/*Why Section*/
.why { padding: 30px 10px 10px; position: relative; counter-reset: why-section; }
.why:before { content: ''; position: absolute; left: -900px; right: -900px; top: 0; bottom: 0; background-color: rgba(150, 44, 42,.1) }
.why h2 { text-align: center;  }
.why ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; position: relative; z-index: 2; list-style: none; color: #fff; }
.why ul li { max-width: 240px; -webkit-box-flex: 1; -ms-flex: 1 1 33%; flex: 1 1 33%; padding: 0; margin: 10px; width: 100%; overflow: visible; color: #000; line-height: 1.2;text-align: center; }
.why ul li:before { content: ''; position: relative; z-index: 2; display: block; margin: 0 auto 10px; counter-increment: why-section; content: counter(why-section); font-size: 30px; color: #fff; border-radius: 50%; height: 50px; width: 50px; line-height: 50px; background-color: rgba(150, 44, 42,.3); color: #000;}
@media (max-width: 730px) { .why ul { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 0; }
  .why ul li { -webkit-box-flex: 1; -ms-flex: 1 1 100%; flex: 1 1 100%; } }

/* Section Toggle */
.section-toggle {display: none; margin-top: 45px;}
.block.open-togg .section-toggle {display: block;}


#index-faq h3 {
margin-bottom: 2rem;
}



.off {pointer-events: none;}

.service-icons {display: flex; justify-content: center; text-align: center; flex-wrap: wrap; margin: 20px auto; 
    h3 {margin: 5px auto; font-size: 22px; line-height: 1.1;}
    > * {padding: 5px; flex:0 1 180px; margin: 10px auto;display: block;}
  a { color: $text;text-decoration: none;
    &:hover {
        .icon .ic-color {fill: $primary;} 
      h3 {color: $primary;}
    }
  }
}

.ic-color {fill: $secondary}
.sv-icon {height: 80px; display: flex; flex-direction: column; justify-content: center; align-items: center;}
/*.service-icons > a { margin: 0 24px; }*/

.has-h3 {clear: both; display: table; width: 100%; margin: 20px auto; text-align: left;}
.has-h3 h3 {margin: 0 auto 10px;text-align: left;}
@media (max-width: 750px) {
 .has-h3, .has-h3 h3 {text-align: center;}
}

/*==================== Modal ================*/

#lean_overlay {padding: 10px; position: fixed; z-index:1100; top: 0; left: 0; height:100%; width:100%; background: rgba(0,0,0,.9); display: none; -webkit-box-pack:center; -ms-flex-pack:center; justify-content:center; -webkit-box-align:center; -webkit-align-items:center; -ms-flex-align:center; -ms-grid-row-align:center; align-items:center; overflow: scroll; }




.modal-content { display: none; -webkit-box-flex: 0;-ms-flex: 0 1 97%;flex: 0 1 97%;border-radius: 8px;
  background: #fff;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  max-width: 1000px;-webkit-box-sizing: border-box; box-sizing: border-box; position: relative;text-align: center;  width: 93%;  max-height: calc(100vh - 80px); overflow: auto;
  
          h3 {text-align: center;font-size: 26px;margin: 15px 0 10px}
        .has_btns {display: flex; justify-content: center; flex-wrap: wrap;}
        .btn {margin: 5px; min-width: 430px;}

  
    .buttons {display: flex;flex-wrap: wrap;justify-content: center;}
    .buttons > p {margin: 5px}

    }

    .modal-close { position: absolute; right:0; top:0; margin: 5px; z-index:1002; cursor:pointer;  color: $secondary; line-height: 1;
        span {display: none;}
        i { position: relative; color:$secondary; font-style: normal; padding-bottom: 4px;
            &:before { font-size: 40px;content: '\00d7'}
        }
         &:hover i {color: #555; }
    }


    .modal-content .has_btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
    .modal-content .btn{margin:5px;min-width:350px}