
@import "assets/font/font.css";
@import "assets/css/normalize.css";
.btn{
   transition: all .5s;
   font-size: 20px;
   color: rgb(255, 255, 255);
   font-weight: bold;
   text-transform: uppercase;
   line-height: 1.2;
   background-color: rgb(0, 0, 0);
   height: 114px;
   width: 100%;
   border-radius: 115px;
   display: flex;
   align-items: center;
   justify-content: center;
}  
.btn:hover{ 
   box-shadow: 0px 4px 15.87px 2.13px #000000;
   transform: translateY(-0.25em);
}  
.header__lgo{  
   margin:40px 0;
}
.header{
 background-image: url('assets/img/bggeneral.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 padding:100px 0 120px 95px;
 position: relative;
 border-radius: 30px;
}
.header h1{
   max-width: 700px;
   font-size: 50px;
   color: rgb(255, 255, 255);
   font-weight: bold;
   line-height: 1.2;
}
.header__sub{
   max-width: 700px;
   display: flex;
   align-items: center;
   gap:30px;
   margin:60px 0 40px 0;
}
.header__sub img{
   max-width: 160px;
}
.header__sub p{
  font-size: 20px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
}  
.header__left{    
   max-width: 320px;
   width: 100%;
   position: absolute;
   top: 50%; 
   right: 0px; 
   transform: translate(15px, -50%);
}
.header__item{
   display: flex;
   align-items: center;
   justify-content: space-between;
   background: #fff;
   border-radius: 10px;
   margin-bottom:20px;
   padding:20px 30px;
}
.header__item img{
   max-width: 100px;
}
.header__item p{
   font-size: 20px;
   color: rgb(40, 40, 40);
   line-height: 1.2;
   max-width: 125px;
}
.header .btn{
   max-width: 430px;
}
.header__up{
   border-radius: 20px;
   background-color: rgb(255, 255, 255);
   box-shadow: 0px 2px 11.76px 0.24px rgba(22, 21, 21, 0.24);
   width: 437px;
   height: 112px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}
.header__up strong{
   font-size: 25px;
   color: rgb(0, 0, 0);
   font-weight: bold;
   line-height: 1.2;
}
.header__up p{
   font-size: 25px;
   color: rgb(0, 0, 0);
   line-height: 1.2;
}
.header__up{
   position: absolute;
   bottom:0px;
   right: 320px;
}


.sec1{
   margin-top:200px;
}
.sec1 h2{
   font-size: 45px;
   color: rgb(71, 71, 102);
   font-weight: bold;
   line-height: 1.2;
   text-align: center;
   margin-bottom:120px;
}
.sec1 h2 span{
  color: rgb(77, 155, 255);
}
.sec1 .sec1__box{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap:50px;
}
.sec1 .sec1__item{
   text-align: center;
   padding:30px 30px 200px 30px;
   border-radius: 30px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   background: #F7F7F7;
   position: relative;

}  
.sec1__item-box{
   background: #fff;
   padding:30px;
   border-radius: 30px;
   position: relative;
   z-index: 99;
}
.sec1 .sec1__item img{
   z-index: 1;
}
.sec1 .sec1__item:nth-child(1) img{
   position: absolute;
   bottom:-75px;
   left:0px;
}
.sec1 .sec1__item:nth-child(2) img{
   position: absolute;
   bottom:-75px;
   left:0px;
}
.sec1 .sec1__item:nth-child(3) img{
   position: absolute;
   bottom:-75px;
   left:0px;
}
.sec1 .sec1__item strong{
   font-size: 30px;
   color: rgb(71, 71, 102);
   font-weight: bold;
   line-height: 1.2;
   margin-bottom:10px;
   display: block;
}
.sec1 .sec1__item strong span{
   color: rgb(77, 155, 255);
}
.sec1 .sec1__item p{
   font-size: 20px;
   color: rgb(71, 71, 102);
   line-height: 1.2;
   padding-bottom:30px;
}


.sec2{
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top:220px;
   align-items: center;
} 
.sec2 .sec2__right h2{
   font-size: 45px;
   color: rgb(71, 71, 102);
   font-weight: bold;
   line-height: 1.2;
   margin-bottom:30px;
}
.sec2 .sec2__right h2 span{
   color: rgb(77, 155, 255);
}
.sec2 .sec2__right p{
   font-size: 20px;
   color: rgb(71, 71, 102);
   line-height: 50px;
}
.sec2 .sec2__right p strong{
   font-weight: bold;
}
.sec2 .sec2__right b{
   font-size: 42px;
   font-weight: bold;
   color: rgb(71, 71, 102);
   margin-top:20px;
   display: block;
}
.sec2__left{
   max-width: 520px;
   margin: 0 auto;
   display: block;
}


.sec3{
   margin-top:120px;
}
.sec3 h2{
   font-size: 45px;
   color: rgb(71, 71, 102);
   font-weight: bold;
   line-height: 1.2;
   text-align: center;
}
.sec3 h2 span{
   color: rgb(77, 155, 255);
}
.sec3 .sec3__box{
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap:75px;
   margin-bottom:50px;
}
.sec3 p{
   font-size: 20px;
   color: rgb(71, 71, 102);
   line-height: 1.2;
   text-align: center;
   margin:60px 0 40px 0;
}
.sec3 .sec3__item{
   border-radius: 30px;
   background-color: rgb(37, 137, 255);
   padding:40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.sec3 .sec3__item strong{
   font-size: 25px;
   color: rgb(255, 255, 255);
   line-height: 1.2;
   text-align: left;
}  
.sec3 .sec3__item p{
   color: rgb(255, 255, 255);
   text-align: left;
}
.sec3 .btn{
   max-width: 560px;
   text-align: center;
   margin: 0 auto;
}



#sec4{
 background-image: url('assets/img/фонzx.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 padding:120px 0 140px 0px;
 margin-top:120px;
 margin-bottom:120px;
}
.sec4>h2{
   font-size: 45px;
  color: rgb(255, 255, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-bottom:30px;
}  
.sec4>p{
   font-size: 25px;
   color: rgb(255, 255, 255);
   font-weight: bold;
   line-height: 1.2;
   text-align: center;
}
.sec4 .sec4__box{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap:40px;
   margin-top:60px;
}
.sec4 .sec4__item{   
   padding:50px 50px 0px 50px;
   background: #fff;
   border-radius: 30px;
}  
.sec4 .sec4__item p{
   font-size: 20px;
   color: rgb(71, 71, 102);
   line-height: 1.2;
   text-align: center;
}
.sec4__location{
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap:40px;
   margin-top:40px;
}
.sec4__location-item img{
   height: 100%;
}






.sec5 h2{
  font-size: 45px;
  color: rgb(71, 71, 102);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
.sec5 h2 span{
   color: rgb(77, 155, 255);
}
.sec5 p{
  font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: center;
  padding:40px 0 70px 0;
}
.sec5 b{
  font-size: 25px;
  color: rgb(71, 71, 102);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  display: block;
}
.sec5__box{
   padding:50px 30px;
   background: #F7F7F7;
   border-radius: 30px;
}
.sec5__list{
   margin-top:40px;
   display: flex;
   justify-content: space-around;
}
.sec5 ul{
   list-style: disc;
}
.sec5 ul li{
   font-size: 25px;
  color: rgb(71, 71, 102);
  line-height: 1.8;
  text-align: left;
}
.sec5 ul li::marker {
   color:#0425FF;
}

.sec6{
   margin-top:200px;
}
.sec6 h2{
  font-size: 45px;
  color: rgb(71, 71, 102);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  margin-bottom:70px;
}
.sec6 .sec6__box{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap:50px;
}  
.sec6 .sec6__item{
   display: flex;
   align-items: center;
   justify-content: center;
}
.sec6 .sec6__item-text p{
  font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: left;
  margin-left:15px;
  width: 200px;
}
.sec6 .sec6__item-img{
   width: 90px;
   height: 90px;
   background: #1929FD;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
}
.sec6 .sec6__item-img img{
   max-width: fit-content;
}



.sec7{
   margin-top:130px;
}
.sec7>h2{
   font-size: 45px;
   color: rgb(71, 71, 102);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}
.sec7>h2 span{
    color: rgb(37, 137, 255);
}
.sec7>p{
   font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: center;
  margin-top:50px;
}
.sec7 .sec7__box{
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap:50px;
   margin-top:100px;
   position: relative;
}
.sec7 .sec7__box:before{
   content: '';
   position: absolute;
   top:80px;
   left:0px;
   width: 100%;
   height: 50px;
   background-image: url('assets/img/Фигура 1 копия.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;
}
.sec7 .sec7__box:after{
   content: '';
   position: absolute;
   bottom:170px;
   left:0px;
   width: 100%;
   height: 50px;
   background-image: url('assets/img/Фигура 1 копия.png');
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   z-index: -1;
}
.sec7 .sec7__item{
   text-align: center;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.sec7 .sec7__item-img{
   max-width: 280px;
   width: 100%;
   height: 280px;
}
.sec7 .sec7__item p{
  font-size: 25px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: left;
}



.sec8{
 background-image: url('assets/img/Группа 15.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-position: center;
 padding:120px 0 100px 95px;
 margin-top:120px;
 border-radius: 30px;
}
.sec8 h2{
   font-size: 45px;
   color: rgb(255, 255, 255);
   font-weight: bold;
   line-height: 1.2;
   text-align: left;
   margin-bottom: 115px;
}
.sec8 .btn{
   max-width: 470px;
}



.sec9{
   background-image: url('assets/img/10.png');
   background-repeat: no-repeat;
   background-size: contain;
   background-position: 30% 50%;
   padding: 300px 0 300px 0px;
   margin-top:120px;
   border-radius: 30px;
   position: relative;
}
.sec9__left{
   max-width: 515px;
   position: absolute;
   top:0px;
   left:0px;
   background-color: rgba(255, 255, 255,0.9);
   border-radius: 30px;
   box-shadow: 0px 2px 11.76px 0.24px rgba(22, 21, 21, 0.24);
   padding:45px;
}
.sec9__left h2{
  font-size: 40px;
  color: rgb(37, 137, 255);
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
}
.sec9__left strong{
  font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: left;
  display: block;
  margin:20px 0;
}
.sec9__left p{
  font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: left;
}
.sec9__right{
   max-width: 515px;
   position: absolute;
   top:0px;
   right:0px;
   border-width: 4px;
   padding:45px;
   border-color: rgb(25, 41, 253);
   border-style: solid;
   border-radius: 30px;
   background-color: rgb(255, 255, 255);
   box-shadow: 0px 2px 11.76px 0.24px rgba(22, 21, 21, 0.24);
}
.sec9__right strong{
   font-size: 20px;
   color: rgb(71, 71, 102);
   font-weight: bold;
   line-height: 1.2;
   text-align: center;
   display: block;
}
.sec9__right p{
  font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: center;
  display: block;
  margin:20px 0 30px 0;
}
.sec9__right .btn{
   max-width: 450px;
}



.footer{
   background-image: url('assets/img/sds15.png');
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
   padding:120px 0 150px 95px;
   border-radius: 30px;
   margin-bottom:140px;
}
.footer h2{
   font-size: 45px;
  color: rgb(71, 71, 102);
  font-weight: bold;
  line-height: 1.2;
  text-align: left;
}
.footer p{
  font-size: 20px;
  color: rgb(71, 71, 102);
  line-height: 1.2;
  text-align: left;
  margin:30px 0;
}
.footer .btn{
   max-width: 390px;
}

@media only screen and (max-width: 1200px) {
   .header{
      padding: 100px 0 120px 15px;
   }
   .header h1{
      font-size: 42px;
   }
   .header__up{
      right: 15px;
   }
   .sec1{
      margin-top:100px;
   }
   .sec2 .sec2__right h2{
      font-size: 38px;
   }
   .sec3 h2, .sec5 h2{
      font-size: 40px;
   }
   .sec1 .sec1__item{
      padding: 30px 30px 30px 30px;
   }  
   .sec1__item img{
      display: none;
   }
   .sec1 .sec1__box{
      grid-template-columns: 1fr 1fr;
   }
   .sec2{
      margin-top: 100px;
   }
   .sec3 .sec3__item{
      flex-direction: column-reverse;
   }
   .sec3__item-img{
      margin-bottom:15px;
   }
   .sec5__list{
      flex-wrap: wrap;
   }
   .sec8{
      padding: 120px 0 100px 15px;
   }
   .sec9{
      background-image: none;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap:30px;
      padding: 30px 0 30px 0px;
   }
   .sec9__left, .sec9__right{
      position: relative;
   }
   .footer{
      padding: 60px 0 100px 15px;
      margin-bottom: 60px;
   }
   .sec4 .sec4__item{
      padding:15px 15px 0 15px;
   }
}
@media only screen and (max-width: 992px) {
   .sec7 .sec7__box:after, .sec7 .sec7__box:before{
      display: none;
   }
   .header__lgo {
      margin: 20px 0;
   }
   .header__left{
      position: relative;
      top:0;
      left: 0;
      transform: none;
      margin-top:50px;
   }
   .header__up{
      position: relative;
      top:0;
      left: 0;
   }
   .sec6 .sec6__box{
      grid-template-columns: 1fr 1fr;
   }
   .sec6 .sec6__item{
      justify-content: center;
   }
   .sec7 .sec7__box{
      grid-template-columns: 1fr 1fr;
   }
   .sec8 h2 {
      font-size: 24px;
      margin-bottom: 40px;
   }
   .sec9{
      grid-template-columns: 1fr;
      margin-top: 60px;
   }
   .footer h2{
      font-size: 30px;
   }
   .footer p{
      font-size: 16px;
   }

}
@media only screen and (max-width: 768px) {
   .sec6 .sec6__item-text p{
      width: auto;
   }
   .header__lgo {
      margin: 15px 0;
   }
   .header {
       padding: 30px 0 30px 15px;
   }   
   .header h1 {
       font-size: 28px;
   }
   .header__sub p {
      font-size: 18px;
   }
   .sec1 h2{
      font-size: 28px;
      margin-bottom: 60px;
   }
   .sec1 .sec1__box {
       grid-template-columns: 1fr;
   }
   .sec2 {
      margin-top: 50px;
      grid-template-columns: 1fr;
   }
   .sec3 h2, .sec5 h2, .sec4>h2, .sec9__left h2 {
       font-size: 28px;
   }
   .sec3 {
      margin-top: 60px;
   }  
   .sec3 p{
      margin: 30px 0 30px 0;
   }
   .sec3 .sec3__box{
      grid-template-columns: 1fr;
   }
   #sec4{
      padding: 60px 0 60px 0px;
   }
   .sec4>p {
       font-size: 20px;
    }
    .sec4__location, .sec4 .sec4__box{
      grid-template-columns:1fr;
    }
    .sec5 p{
      font-size: 16px;
    }
    .sec5 ul li{
      font-size: 16px;
    }
    .sec6 {
       margin-top: 50px;
   }
   .sec6 h2{
      font-size: 28px;
   }
   .sec6 .sec6__item-text p{
      font-size: 16px;
   }
   .sec6 .sec6__item{
      display: flex;
      align-items: center;
      flex-direction: column;
      gap: 20px;
   }
   .sec7 {
      margin-top: 60px;
   }
   .sec7>h2 {
      font-size: 28px;
   }
   .sec7>p{
      font-size: 16px;
   }
   .sec7 .sec7__item p{
      font-size: 16px;
   }
   .sec8{
      background-position: right;
   }
   .sec8{
      background-image:none;
      background: #0425FF;
   }
   .sec9__left p {
      font-size: 16px;
    }
    .sec9__right p{
      font-size: 16px;
    }
    .footer h2 {
      font-size: 22px;
   }
   .sec2 .sec2__right h2 {
       font-size: 28px;
   }
   .sec8 .btn{
      max-width: 300px;
   }
}
@media only screen and (max-width: 576px) {
   .sec6 .sec6__item-text p{
      width: 200px;
   }
   .header__sub{
      flex-direction: column;
   }
   .sec6 .sec6__box {
       grid-template-columns:1fr;
   }
   .sec6 .sec6__item{
      flex-direction: row;
   }
   .sec7 .sec7__box {
      grid-template-columns: 1fr;
      position: relative;
   }
   
   .header__up{
      max-width: 320px;
   }
   .header h1, .sec1 h2{
      font-size: 24px;
   }
   .header__sub p {
       font-size: 16px;
   }
   .header__up strong{
      font-size: 20px;
   }
   .header__up p {
      font-size: 16px;
   }
   .btn{
      max-width: 300px;
      height: 70px;
      font-size: 15px;
   }
   .sec1 {
      margin-top: 50px;
   }
   .sec1 h2{
      margin-bottom: 30px;
   }
   .sec1 .sec1__item strong{
      font-size: 28px;
   }
   .sec1 .sec1__item p{
      font-size: 16px;
   }
   .sec1__item-box{
      padding: 20px;
   }
   .sec1 .sec1__item {
       padding: 15px;
   }
   .sec1 .sec1__box{
      gap:20px;
   }
   .sec2 .sec2__right h2 {
       font-size: 24px;
   }
   .sec2 .sec2__right p{
      font-size: 16px;
   }
   .sec2 .sec2__right b{
      font-size: 24px;
   }
   .sec3 h2, .sec5 h2, .sec4>h2, .sec9__left h2{
      font-size: 24px;
   }
   .sec3 .sec3__item strong{
      font-size: 16px;
   }
   .sec3 .sec3__box{
      gap:30px;
   }
   .sec3 .btn{
      font-size: 11px;
   }
   #sec4{
      margin-top: 30px;
      margin-bottom: 30px
   }
   .sec4>p {
       font-size: 16px;
   }
   #sec4 {
       padding: 30px 0 30px 0px;
   }
   .sec5 p{
       padding: 20px 0 30px 0;
   }
   .sec5__list{
      flex-direction: column;
      padding:15px;
   }
   .sec6 h2 {
       font-size: 24px;
   }
   .sec8 {
       padding: 60px 0 50px 15px;
   }
   .sec8 .btn{
      font-size: 10px;
   }
   .sec8 h2 {
       font-size: 16px;
       margin-bottom: 40px;
   }
   .sec9__left, .sec9__right{
      padding:25px;
   }
   .sec9__right .btn{
      font-size: 10px;
   }
   .sec9__left h2{
      font-size: 20px;
   }
   .sec9__left strong{
      font-size: 18px;
   }
   .footer .btn{
      max-width: 300px;
      font-size: 15px;
   }
   .header__item{
      padding:15px;
   }
   .header__up{
      max-width: 300px;
      width: 100%;
   }
}
