@import url('null.css');

.wrapper{
   min-height: 100%;
   overflow: hidden;
   display: flex;
   flex-direction: column;
}

[class*="__container"]{
   max-width: 1050px;
   margin: 0 auto;
   padding: 0 15px;
   box-sizing: content-box;
}

body{
   font-family:'Rubik';
}

.main{
   flex: 1 1 auto;
}



/* header-block */
.header {

   position: absolute;
  width: 100%;
  top: 0;
  left: 0;
   font-family:'Raleway';
   z-index: 50;
}
.header__container {
   
   min-height: 110px;
   display: flex;
   align-items: center;
  
}
.header__logo {
   position: relative;
   z-index: 20;
}
.header__menu {
  width: 670px;
  display: flex;
  justify-content: flex-end;
}

.menu__items {
   display: flex;
   justify-content: flex-end;
   

}
.menu__item {
  margin: 0 40px 0 0;

}

.menu__link{
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1.4px;
   line-height: 1.2;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 1s ease;
}

.menu__link:hover{
   text-decoration: underline;
   transform: scale(1.1);
}



.button {
   position: relative;
   z-index: 20;
  flex:0 0 250px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.button__link {
   
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 1.4px;
   line-height: 1.2;
   text-transform: uppercase;
   color: #FCFDFE;
   background-color: #D473ED;
   border-radius: 5px;
   padding: 14px 30px;
   transition:all 0.5s ease;
}



.button :hover{
   transform: scale(1.1);
   background-color: #db4bffe2;
}
/* -------------------------------------------- */
/* BURGER */

.close-icon-menu,
.icon-menu{
  display: none;
}

.icon-menu span{
   height: 2px;
   background-color: #D473ED;
}

.icon-menu::before,
.icon-menu::after{
   content: "";
   background-color :#D473ED;
   height: 2px;
}

.close-icon-menu::before,
.close-icon-menu::after{
   content: "";
   position: absolute;
   top: 50%;
   left: 0;
   width: 100%;
   background-color :#D473ED;
   height: 2px;
   
}


.close-icon-menu::before{
   transform: rotate(45deg);
}

.close-icon-menu::after{
   transform: rotate(-45deg);
}





/* ----------------------------------------------------- */
/* HOMEPAGE */
.homepage {
   background-color: #fafbfd;
  
}

.homepage__container {
   /* align-items: center; */
   display: flex;
   flex-wrap: wrap;
  position: relative;
  padding: 160px 15px 50px 15px;
}

.homepage__container::before{
   content: "";
   position: absolute;
   width: 100vw;
   height: 100%;
   right: 267px;
   top: 0;
   border-radius: 30px 0px 0px 30px;
   background-color: rgb(1, 66, 173);
   transform: translate(100%,0px);
}
.homepage__content {
   flex: 0 1 45%;
}
.block-text {
   max-width: 410px;
}
.block-text__title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;

}

.block-text__title:not(:last-child){
   margin: 0 0 12px 0;
   
}

.homepage__block-text{
   
   padding: 80px 0 0 0 ;
}

.block-text__title span{
   color: #D473ED;
}
.block-text__text {
   color:#616161;
   font-size: 12px;
   font-weight: 400;
   line-height: 1.4;
   letter-spacing: 0.8px;
   
}
.block-text__text:not(:last-child){
   margin: 0 0 24px 0;
   
}

.block-text__button {
   justify-content: flex-start;
}

.homepage__play {
   flex: 1 1 100%;
   
   margin: 148px 0 0 0;
}
.play {
   display: inline-flex;
}
.play__image {
  flex:0 0 44px;
}
.play__text {
   align-self: center;
   margin: 0 0 0 12px;
}
.play__title {
   color: #B0B0B0;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.2;
   letter-spacing: 8%;
}

.play__title:not(:last-child){
   margin: 0 0 5px 0;
   
}
.play__subtitle {
   font-size: 9px;
   font-weight: 400;
   text-transform: uppercase;
   line-height: 1.2;
   letter-spacing: 16.5%;
}
.homepage__image {
   position: relative;
   flex: 0 1 55%;
   left: 0;
   top: 0;
   z-index: 20;
   max-width: 100%;
}

.homepage__image img{
   width: 100%;
}




/* stay-safe */
.stay-safe {
   padding: 135px 0 106px 0;
}
.stay-safe__container {
   display: flex;
   align-items: center;
}
.stay-safe__media {
   flex: 0 1 50%;
  
}

.img-stay-safe{
   position: relative;
   width: 373px;
   text-align: center;
   padding: 56px 0 27px 0;
   
}
.img-stay-safe img{
   position: relative;
   z-index: 10;
   
}

.stay-safe__img{
   position: relative;
   width: 61.5;
   display: inline-block;
   max-width: 100%;
   top: 0;
   left: 0;
   box-shadow: 2px 4px 32px rgba(0, 0, 0, 0.12);
   border-radius: 16px;
 
   
}

.stay-safe__img::after{
   content: "";
   position: absolute;
   bottom:-13px;
   left: 12px;
   width: 206px;
   height: 27px;
   background: rgba(240, 240, 240, 0.49);
   border-radius: 16px;
   z-index: 5;
}


.stay-safe__content {
   flex: 0 1 50%;
}


.img-stay-safe__item {
   position: absolute;
   background-color: #0142AD;
   border-radius: 30px;
   width: 77px;
   height: 77px
}
.img-stay-safe__item_item-1 {
   top: 0;
   left: 0;
   width: 147px;
   height: 147px;
}
.img-stay-safe__item_item-2 {
   bottom: 0;
   left: 33px;
   ;
}
.img-stay-safe__item_item-3 {
   bottom: 107px;
   right:34px;
  
}


/* ----------------------------------------- */
/* expert */


.expert {
   background-color: #fafbfd;
   padding: 103px 0 116px 0;

}

.statistic-expert {
   position: relative;
   top: 0;
   left: 0;
   max-width: 654px;
   margin: 0 auto;
}
.statistic-expert__body {
   position: relative;
   top: 0;
   left: 0;
   padding: 28px 80px;
   display: flex;
   justify-content: space-around;
   background-color: #FFFFFf;
   border-radius: 16px;
   margin: 0 0 80px 0;
   z-index: 2;
   box-shadow: 0px 2px 24px rgba(88, 126, 236, 0.15);
}
.items-expert__item {
   text-align: center;
   margin: 0 10px 0 0;
}
.items-expert__number {
   font-weight: 700;
   font-size: 36px;
   color: #D473ED;
   line-height: 1.19;
   margin: 0 0 5px 0;
}
.items-expert__text {
   font-family: "Rubik";
   font-weight: 700;
   font-size: 11px;
   line-height: 1.18;
   letter-spacing: 0.37em;
   text-transform: uppercase;
}
.statistic-expert__decor {
   position: absolute;
   background-color: #0142AD;
}
.statistic-expert__decor_1 {
   top: 73px;
   left: -15px;
   width: 65px;
   height: 65px;
   border-radius: 16px;
   transform: rotate(-30deg);

}
.statistic-expert__decor_2 {
   width: 96px;
   height: 96px;
   top: -47px;
   left: 229px;
   border-radius: 30px;
transform: rotate(105deg);
}
.statistic-expert__decor_3 {
   width: 127px;
   height: 127px;
   top: 0px;
   left: 575px;
   border-radius: 30px;
transform: rotate(-30deg);
}


.expert__block-text{
   max-width: 400px;
   margin: 0 20px 0 0;
} 

.expert__body{
display: flex;
align-items: center;
}

.expert__content{
   flex: 0 1 50%;

}
.expert__video{
   flex: 0 1 50%;
   position: relative;
   padding: 0 0 30% 0;
   
   
}

.expert__video iframe{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 8px;
   box-shadow: 0px 4px 18px rgba(88, 126, 236, 0.18);
}


/* Healthcare  */
/* ------------------------------------------------------------------- */


.healthcare {
   padding: 80px 0 73px 0;
}
.healthcare__container {
}
.healthcare__block-text {
}
.block-text_center {
   text-align: center;
   margin: 0 0 50px 0;
   
}
.block-text__title {
}
.block-text__text {
 
   max-width: 600px;
   margin: 0 auto;
}
.healthcare__flex {
   display: flex;
   position: relative;
   max-width: 980px;
   margin: 0 auto;
   gap: 15px;
   /* flex-wrap: wrap; */
  
}


.healthcare__column{
   padding: 0 36px;
   flex: 0 1 33.333%;
   position: relative;
   
}







.item__block{
   height: 100%;
   position: relative;
   text-align: center;
   padding: 35px 17px;
   display: flex;
   flex-direction: column;
   align-items: center;
   background: #FFFFFF;
   box-shadow: 0px 4px 18px rgba(88, 126, 236, 0.18);
   border-radius: 8px;
  z-index: 20;
}
.item__icon {
 margin: 0 0 58px 0;
}
.item__title {
   font-size: 16px;
   line-height: 1.3;
   font-weight: 700;
   letter-spacing: 2px;
}

.item__title:not(:last-child){
   margin: 0 0 5px 0;
}
.item__text {
   font-size: 12px;
   font-weight: 400;
   line-height: 1.3;
   letter-spacing: 8%;
   color: #616161;
   line-height: 138.5%;
}




.healthcare__column_1::before,
.healthcare__column_1::after{
   content: "";
   position: absolute;
   background-color: #0142AD;
}

.healthcare__column_1::before{
   left: 10px;
   top: 232px;
   width: 65px;
   height: 65px;
   border-radius: 16px;
   transform: rotate(-30deg); 
}

.healthcare__column_1::after{
   left: 240px;
   top: 45px;
   width: 96px;
   height: 96px;
   border-radius: 30px;
   transform: rotate(105deg);
   
}

.healthcare__column_3::before,
.healthcare__column_3::after{
   content: "";
   position: absolute;
   background-color: #0142AD;
}

.healthcare__column_3::before{
   left: -76px;
   top: 173px;
   width: 127px;
   height: 127px;
   border-radius: 30px;
   transform: rotate(-30deg); 
}

.healthcare__column_3::after{
   left: 240px;
   top: -33px;
   width: 65px;
   height: 65px;
   border-radius: 16px;
   transform: rotate(-30deg);
   
}

/* Footer*/
/* --------------------------------------------- */

.footer {
   display: flex;
   align-items: center;
   padding:  0 0 50px 0;
   
}
.footer__container {
}
.footer__img{
   display: flex;
  column-gap: 60px;
   

}












/* ----------------------------------------- */
/* MEDIA */

/* PC */

@media (max-width:1087px){
   [class*="__container"]{
      max-width: 970px;
     
   }

   .healthcare__column{
      padding: 0 15px;
      
      
   }
}

/* TABLET */

@media (max-width:991.98px){
   [class*="__container"]{
      max-width: 750px;
     
   }

   .header__button {
      flex:0 0 170px;
     
    }

    .menu__item {
      margin-right: 20px;
    
    }

    .header__container {
   
      min-height: 80px;
   
   }

   .homepage__container::before{
      right: 185px;
      border-radius: 20px 0 20px 0;
   }

  
   .healthcare__flex{
      flex-direction: column;
   }

   .healthcare__flex:not(:last-child){
      margin: 0 0 15px 0;
   }

   .healthcar{
      padding: 30px 0 30px 0;
   }
}



/* MOBILE */

@media (max-width:767.98px){
   [class*="__container"]{
      max-width: none;
     
   }

   
   .icon-menu{
      position: relative;
      flex:0 0 30px;
      height: 18px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 0 0 20px;
      
   }

   .close-icon-menu{
     position: relative;
      flex:0 0 30px;
      height: 30px;
      margin: 0 0 0 20px;
   }

   .menu__body{
     position: fixed;
     left: -100%;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: #0142AD;
      padding: 150px 15px 30px 15px;
      transition: all 0.5s ease;
   }

   .header:target .menu__body{
      left: 0;
   }

   .header:target .menu__body::before{
      content: "";
      top: 0;
      left: 0;
      position: fixed;
      height: 80px;
      width: 100%;
      background-color:#0142AD ;
   }
   
   .menu__link{
      color: #FCFDFE;
      text-align: center;
      font-size: 20px;
   }

   .menu__item{
      margin: 0 0 20px 0;
   }

   .menu__item:last-child{
      margin: 0 0 0px 0;

   }

   .menu__items{
      flex-direction: column;
      justify-content: center;
      align-items: center;
      
   }

   .header:target .icon-menu{
      display: none;
   }
  
   .header:target .close-icon-menu{
      display: flex;
   }

   .homepage__container::before{
      display: none;
   }

   .homepage__container{
      padding: 50px 15px 30px 15px;
   }


   .block-text {
      max-width: none;
     
   }

   .homepage__content {
      padding: 0 0 0 0 ;
      flex: 1 1 100%;
   }

   .homepage__image{
      flex: 1 1 100%;
      text-align: center;
      padding: 30px 0;
   }

   .homepage__play{
      margin: 0;
   }

   .block-text__title{
      font-size: 34px;
   }

   .stay-safe__container{
      flex-direction: column-reverse;
   }

   .stay-safe__content{
      margin: 0 0 30px 0;
   }

   .expert__body{
      align-items: stretch;
      flex-direction: column;
      margin: 0 0 50px 0;
   }

   .expert__block-text{
      margin: 0 0 30px 0;
   } 

   .expert__video{
     
      padding: 0 0 58% 0;
   
   }

   .statistic-expert__body{
      padding: 23px;
   }

   .items-expert__item{
      margin:  0 0 20px 0;
   }

   .items-expert__number {
      font-size: 30px;
   }

   .footer__img{
      
     row-gap: 20px;
   
   }

   .footer{
      padding: 30px 0;
   }
   
}


/* MINI-MOBILE */

@media (max-width:479.98px){
   .header__logo{
      flex: 0 0 40px;
      overflow: hidden;
   }

   .img-stay-safe{
      width: 290px;
   }
   .statistic-expert__body{
      flex-direction: column;
    }

    .footer__img {
       flex-direction: column;
    }

    
}