/***** Section reset*****/ 
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*,::after,::before{margin: 0;box-sizing: border-box;}
img{vertical-align: bottom;}
button{cursor: pointer; padding: 0;}
a{text-decoration: none;}
ul{list-style: none; padding: 0;}
label{display: inline-block;}
:disabled{opacity: 0.5; cursor: not-allowed;}
iframe{border: none; padding: .5rem; width: 560px; height: 313px;}
h2{font-weight: 800; font-size: 3rem;}
/***** End Section reset*****/




   
html{font-size: 15px;
   --ff:"Poppins", sans-serif;
   --red:#c1121b;
   --white:#fff;
   scroll-behavior:smooth; 
   scroll-padding-top: 230px;
}
   
   body{font: 16px/1.3 var(--ff); overflow-x: hidden; }
   
/***** End Section font face *****/



/***** Section grid *****/ 

.container{max-width: 1230px; margin: auto; padding: 0 1rem;}
.container-lg{max-width: 1590px; margin: auto; padding: 0 1rem;}
.container-full{padding: 0 1rem;}
.row{display: grid; grid-template-columns: repeat(12, 1fr); gap: 2rem;}
.col-1{grid-column: span 1;}
.col-2{grid-column: span 2;}
.col-3{grid-column: span 3;}
.col-4{grid-column: span 4;}
.col-5{grid-column: span 5;}
.col-6{grid-column: span 6;}
.col-7{grid-column: span 7;}
.col-8{grid-column: span 8;}
.col-9{grid-column: span 9;}
.col-10{grid-column: span 10;}
.col-11{grid-column: span 11;}
.col-12{grid-column: span 12;}
.img-res{max-width: 100%; height: auto;}
.flex{display: flex;}
.align-center{align-items: center;}
.justify-space-bet{justify-content: space-between ;}
.justyfy-center{justify-content: center;}
.p0{padding: 0;}
/***** End Section grid  *****/



/*! LAYOUT  */

/***** Section HEADER *****/ 



/***** End Section HEADER *****/

header{display: grid; grid-template-columns: 100px auto 100px; position: sticky; top: 0; z-index: 5;}
header button{width: 100px; height: 6.67rem; background:#081419; border: none; color: white; font-size: 1.6rem;}
header nav{background-color: var(--red); position: relative; z-index: 0; }
nav a{color:var(--white); line-height:6.67rem; display: block; padding: 0 2rem; position:relative ; font-weight: 500;}
header nav a img{display: block; position:absolute; translate: 5px -50%; margin: auto; animation: move 3s alternate infinite; animation;}
header nav a img:hover{animation-play-state: paused;}
@keyframes move {
   from{rotate: 0deg;}
   to{rotate: 360deg;}
}
header nav::before{content:""; position: absolute; width: 158px; aspect-ratio: 1/1; background: var(--red); 
left: 50%; translate: -50% -10%; border-radius: 50%; z-index: -1;}
.controls{width: 8.4rem; aspect-ratio: 1/1; background: var(--red); color: var(--white); border: none; border-radius: 50%; position: absolute; top: 50%; display: grid; place-content: center; }

header nav a::after{content: ""; width: 0%; border-bottom: 3px solid var(--white); position: absolute;  bottom: 30px; right:0; transition: all .3s ease;}
header nav a:hover::after{left:20px; width: 80%;}

/***** Section WRAP-1 *****/  
.wrap-1{background: url(../img/bg-1.webp) no-repeat center top/cover #081419; 
      color:var(--white);  overflow: hidden; position: relative;
} 
.next{right: 0; translate: 40% 0;}
.prev{left: 0; translate: -40% 0;}
.caption{font-size: 5.3rem; font-weight: bold; margin-bottom: 88px;}
.btn{width: 13rem; height: 3.12rem; background: var(--white); border: none;}
.btn.active{background-color: var(--red); color: white;}
.text{padding: 200px 0; margin-left: 12rem;}
.humburger-box{display: none;}
.humburger{color: var(--white); flex-direction: column; justify-content: center; height: 100%;}
.humburger span{display: block; width: 5rem; height: .2rem; background: var(--white); margin: 3px 0; transition: 500ms; transform-origin: left center;}
.humburger.active span:nth-child(1){  transform: translateY(0px) rotate(16deg); }
.humburger.active span:nth-child(2){ opacity: 0; }
.humburger.active span:nth-child(3){ transform: translateY(0px) rotate(-16deg); }




.carousel-1{
   width: 100%;
   overflow:hidden;
   margin: auto;
   position: relative;
}
 .carousel-track-1 {display: flex; transition: transform 0.5s ease; width: 100%;}
 
 .swiper-slide-1 {
   min-width: 100%;
   visibility: hidden;
 }

 .swiper-slide-1.active {
   visibility: visible;
 }
/***** End Section WRAP-1 *****/



/***** Section WRAP-2 *****/ 
.wrap-2{background: #fefefd;}
.about{border-radius:80px; padding: 6rem; background: var(--white); position: relative; top: -170px; box-shadow: 1px 1px 8px 1px #0d030329;} 
.wrap-2 .btn{background-color: #081419; color: var(--white); font-size: 17px; padding: 22px 100px;} 
.wrap-2 p{ margin: 50px 0 50px 0; line-height: 29.4px;}
.wrap-2 .title{position: relative; line-height:.9;}
.wrap-2 .title::after{content: ""; width: 60px; height: 5px; background-color: var(--red); position: absolute; left: 0; bottom: -10px;}
.corona-info{padding-top: 3rem;}
.corona-info .title::after{display: none;}
.protect{text-align: center; margin: 100px auto;}
.wrap-2 .protect p{margin: 5px 0;}

.carousel{background: url(../img/bg-2.webp) no-repeat center top/cover; padding: 200px 120px 100px 120px; border-radius: 15rem;
   width: 100%;
   overflow:hidden;
   margin: auto;
}
.carousel-wraper{position: relative;}
 .carousel-track {display: flex; transition: transform 0.5s ease; width: 100%;}
 
 .swiper-slide {
   min-width: 100%;
   visibility: hidden;
 }

 .swiper-slide.active {
   visibility: visible;
 }

.protect-box{background-color: var(--white); border-radius: 1rem;  padding: 20px 13px 12px 13px; }
.protect-box p{font-size: 1rem; line-height: 1.4;}
.btn-1{padding: 15px 30px; margin-top: 60px; color: var(--white); background:  #22338593; border: none; font-weight: bold;}
.btn-2{padding: 15px 30px; margin-top: 60px; color: var(--white); background: var(--red); border: none; font-weight: bold;}
.btn-3{padding: 15px 30px; margin-top: 60px; color: var(--white); background: #22338593; border: none;font-weight: bold; }

.controls-1{width: 5rem; aspect-ratio: 1/1; border-radius: 50%; display: grid; place-content: center; position: absolute; translate: 0 50%; box-shadow: 1px 1px 5px 1px #8080804e; cursor: pointer;}
.next-1{ background-color: var(--red); bottom: 0; left: 50.5%; }
.prev-1{background-color: var(--white); bottom: 0; right: 50.5%;}


.cases{text-align: center;}
.cases h2{margin-bottom: -2.33rem;}
.cases-box{box-shadow: 1px 1px 16px 1px #80808055; background-color: var(--white); padding: 1.5rem; position: relative; margin-top: 3rem; z-index: 1;}
.cases-box h3{margin-top: 4rem;}
.cases-box p{margin: 1rem 0;}

.cases-box .small-ico{position: absolute; width: 5rem; aspect-ratio: 1/1; bottom: 0; left: 50%; translate: -50% 50%;}
.cases-box .btn{position: absolute; top: 20%; padding: 0; right: 50%; translate: 50% 0; background-color: var(--red); }

.light-corona{position: absolute; top: -35px; left: 20%; z-index: -1;}

.doc-container{margin-top: 10rem; text-align: center; position: relative; overflow: hidden; }
.doc-container h2{margin-bottom: 4rem;}
.doctor{ box-shadow: 1px 1px 16px 1px #80808055; background-color: var(--white); position: relative; margin-top: 8rem;}
.doctor .img{translate: 50% -50%; border-radius: 50%; position: absolute; right: 50%;}
.doctor h3{margin: 8rem 0 2rem 0 ;}
.doctor p{margin: 2rem ;}
.doctor p img{ float: left; margin-left: 4rem;}
.doc-container .light-corona-1{position: absolute; right: -8rem; top: 20rem; z-index: 2; font-size: 1rem;}
.doc-container .light-corona-2{position: absolute; left: -8rem; bottom:-10rem; z-index: 2;}
/***** End Section WRAP-2 *****/


/***** Section WRAP-3 *****/ 
.wrap-3 h2{margin: 6rem 0 2rem 0; text-align: center;}
.contact-bg{ padding: 6rem 25rem 3.34rem 25rem; background: url(../img/bg-3.webp) no-repeat center top/cover; text-align: center;}
.wrap-3 label{display: block; border: 1px solid var(--white); padding: 1rem 1rem; border-radius:30px; color: var(--white);}
.wrap-3 label input{background:none; border: none; color: var(--white); font-size: 1.5rem; width: 80%; transition: all .8s;}
.wrap-3 label input:focus{outline: none; border-bottom: 1px solid gray}
.wrap-3 button{margin-top: 2rem; padding: 1.2rem 5rem; border-radius: 30px; font-weight: 600; background-color: #142d48; border: none; color: white;}
/***** End Section WRAP-3 *****/


/***** Section WRAP-4 *****/
.wrap-4{padding: 8rem 0 2rem 0; background-color: #151515; color: var(--white);}
.wrap-4 a{color: var(--white); font-size: 1.1rem; line-height: 2;}
.wrap-4 h3{margin-bottom: 1rem;}
.wrap-4 p{font-size: 1.1rem; line-height: 2;}
.wrap-4 iframe{width: 100%; height: 60%;}
.wrap-4 .rights{text-align: center; margin-top: 3rem;}
.wrap-4 .rights hr{width: 60%; margin: auto; margin-bottom: 1rem; border-color: rgb(52, 43, 43);}
.wrap-4 .rights p{font-size: 1rem;}
/***** End Section WRAP-4 *****/

.top{ border: 2rem solid red;  position: fixed; bottom: 2.3rem; right: 2.3rem; border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; cursor: pointer; z-index: 2; overflow: hidden; }

/***** Section SIGNUP POPUP & OVERLAY *****/ 

.overlay{background: #0008; position: fixed; inset:0; z-index: 1000;}
.popup{background: var(--white); padding: 2rem; position: fixed; left: 50%; top: 100px; transform: translateX(-50%); z-index: 1001;}
.hiddenForm{display: none;}
.popup label {display: block; margin: 1rem 0;}
.popup input{float: right; border: 1px solid gray;}
.btn-box{width: 100%; text-align: center;}
.popup .btn{width: 50%; margin-top: 1rem; height: 25px; font-weight: bold; border: none; background-color: var(--red); color: var(--white); }
.popup .close{position: absolute; top: 5px; right: 5px; background: none; color: var(--red); border: none; font-size: 1.4rem;}
.popup input:focus{outline-color: red;}
/***** End Section SIGNUP POPUP *****/





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

/** Section media queries */  
@media screen and (max-width: 1610px) {   /* large screen */
  html{font-size: 13px;}
  .hidden{display: none;}
}
@media screen and (max-width: 1200px) {   /* ipad landscape */
  html{font-size: 13px;}
  nav a{padding: 0 1rem;}
  .text {padding: 90px 0 200px 0;}
  .controls{top: 40%;}
  .contact-bg{padding: 4rem 17rem 1.34rem 18rem;}
}

@media  screen and (max-width: 980px) {     /* ipad portrait */  
   html{font-size: 12px;}
   .col-t-1{grid-column: span 1;}
   .col-t-2{grid-column: span 2;}
   .col-t-3{grid-column: span 3;}
   .col-t-4{grid-column: span 4;}
   .col-t-5{grid-column: span 5;}
   .col-t-6{grid-column: span 6;}
   .col-t-7{grid-column: span 7;}
   .col-t-8{grid-column: span 8;}
   .col-t-9{grid-column: span 9;}
   .col-t-10{grid-column: span 10;}
   .col-t-11{grid-column: span 11;}
   .col-t-12{grid-column: span 12;}
   .collapse{ display: none; position: absolute; left: 0;  right: 0; top: 80px; background: #000; padding-bottom: 1rem;}
   .collapse .flex{flex-flow: column; gap: 0;}
   header{background-color:#081419;}
   header nav a img{display: none;}
   header nav::before{display: none;}
   header nav a::after{display: none;}
   nav li:not(:last-child){line-height: 30px; border-bottom: 1px solid var(--white);}
   nav ul { border-block: 2px solid var(--white)}
   header nav a{line-height: 4.67rem; font-size: 1.2rem;}
   .humburger-box{display: block;}
   .controls{top:30%}
   .carousel{padding: 150px 50px 100px 50px; border-radius: 11rem;}
   .hidden{display: block;}

}

@media  screen and (max-width: 767px) {   /* mobile landscap */
   html{font-size: 8px;}
   .col-ml-1{grid-column: span 1;}
   .col-ml-2{grid-column: span 2;}
   .col-ml-3{grid-column: span 3;}
   .col-ml-4{grid-column: span 4;}
   .col-ml-5{grid-column: span 5;}
   .col-ml-6{grid-column: span 6;}
   .col-ml-7{grid-column: span 7;}
   .col-ml-8{grid-column: span 8;}
   .col-ml-9{grid-column: span 9;}
   .col-ml-10{grid-column: span 10;}
   .col-ml-11{grid-column: span 11;}
   .col-ml-12{grid-column: span 12;}
   .wrap-2 .btn{ 
      padding: 5px 2px;
      display: inline-block;
      text-align: center;
      /* line-height: 50px;} */
      font-size: 1.4rem;
  }
  .humburger.active span:nth-child(3) {
   transform: translateY(0px) rotate(-22deg);
}
  .humburger.active span:nth-child(1) {
   transform: translateY(0px) rotate(22deg);
}
.collapse{top: 53px;}
.popup .close{font-size: 2rem;}

}

@media  screen and (max-width: 460px) {   /* mobile portrait */ 
.col-mp-1{grid-column: span 1;}
.col-mp-2{grid-column: span 2;}
.col-mp-3{grid-column: span 3;}
.col-mp-4{grid-column: span 4;}
.col-mp-5{grid-column: span 5;}
.col-mp-6{grid-column: span 6;}
.col-mp-7{grid-column: span 7;}
.col-mp-8{grid-column: span 8;}
.col-mp-9{grid-column: span 9;}
.col-mp-10{grid-column: span 10;}
.col-mp-11{grid-column: span 11;}
.col-mp-12{grid-column: span 12;}

.order-0{order: 1;}
.order-1{order: 0;}
.text{margin-left: 10rem;}
.caption {
   font-size: 4.3rem;
   font-weight: bold;
   margin-bottom: 26px;
}
.wrap-1 .btn{
   width: 100px;
   height: 30px;
   border: none;
   font-weight: 600;
}
.wrap-2 p{margin: 20px 0 12px 0;}

.wrap-2 .btn{ 
   padding: 0 0;
   width: 100%;
   display: inline-block;
   text-align: center;
   line-height: 27px;}
.carousel{border-radius: 8rem;}
.cases-box .btn{
   width: 120px;
}
.contact-bg{padding: 3rem 4rem;}
.wrap-4 .rights hr{width: 100%;}

}


/** End Section media queries */