/* header start */
.header{
   position: relative;
}
.nav .up__nav{
    background-color: var(--color-blue);
    display: flex;
    min-height: 40px;
    justify-content: center;
}
.nav .up__nav ul{
    display: flex;
    align-items: center;
    gap: 30px;
    z-index: 12;

}
.nav .up__nav ul li{
     padding: 18px 10px;
}
.nav .up__nav ul .mobile__li{
    display: none;
}
.nav .up__nav ul .close__li{
   width: 100%;
   display:none;
   justify-content: flex-end;
  font-size: 25px;
}
.nav .up__nav ul li .close__ico{
   
  color: var(--color-blue);

}
.nav .up__nav ul .active{
    background-color: var(--color-pink);
   
}
.nav .up__nav ul li a{
    color: var(--color-white);
}
.nav .up__nav .lang__li{
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    color: var(--color-white);
 }
 .nav .up__nav .lang__li .lang__li-menu{
    position: absolute;
    bottom: 0%;
    left: 100%;
    display:flex;
    gap: 10px;
    opacity: 0;
    margin-left: 20px;
    visibility: hidden;
    transition: var(--transition);
    transform: translateX(-10px);
 }
 .nav .up__nav  .lang__li  .lang__li-menu.active-li{
   opacity: 1;
   visibility: visible;
   transform: translateY(0); 
 }
 .nav .up__nav .lang__li  .lang__li-menu li{
    margin-top: 10px;
   
 }
 .nav .up__nav .lang__li  .lang__li-menu li a{
   color: var(--color-white);
}
 
 .nav .up__nav  .lang__li i{
    margin-left: 7px;
    font-size: 11px;
    transition: var(--transition);
 } 
 .nav .up__nav  .lang__li i.active-li{
    rotate: 180deg;
    transition: var(--transition);
 }
 .nav .up__nav  .lang__li__mobile{
    display: none;
    gap: 30px;
    align-items: center;
 }
 .nav .up__nav  .lang__li__mobile a{
    width: 80px;
    height: 40px;
    border: 1px solid var(--color-pink);
    border-radius: 8em;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-pink);
    
 }

 .nav .down__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .nav .down__nav .header__logo{
    width: 147px;
    height: 118px;
 }
 .nav .down__nav .header__right ul{
   display: flex;
   align-items: center;
   gap: 30px;
 }
 .nav .down__nav .header__right ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--color-white);
 }
 .nav .down__nav .header__right ul li a{
    color: var(--color-white);
 }
 .help{
    background-color: var(--color-pink);
    padding: 18px 40px;
    border-radius: 8em;
    cursor: pointer;
  }

.phone{
    background-color: var(--color-blue);
   
    padding: 18px 40px;
    border-radius: 8em;
    cursor: pointer;
  }
.search{
     border-radius: 50%;
     border: 1px solid #ADC956;
     width: 49px;
     height: 49px;

  } 
.search a{
    color:#ADC956;
  }
  .search a i{
   color:#ADC956;
 }
  .nav .down__nav .header__right ul .bar{
     border-radius: 50%;
     border: 1px solid var(--color-pink);
     width: 49px;
     height: 49px;
     display: none;
   
 }
  .nav .down__nav .header__right ul .bar i{
   color:var(--color-pink);
 }

  .header__contact{
   z-index: 999;
   position: absolute;
   top: 0%;
   left: 0%;
   background-color: var(--color-white);
   padding: 20px 40px;
   width: 100%;
   opacity: 0;
   visibility: hidden;
   transform: translateY(-50px);
   pointer-events: none;
   transition: var(--transition);
  }





  .header__contact.active{
   opacity: 1;
   visibility: visible;
   transform: translateY(0px);
   pointer-events: all;
  }



  .header__contact i{
   font-size: 25px;
   color: var(--color-blue);
   float: right;
   cursor: pointer;
  }
  .header__contact h2{
     color: var(--color-blue);
     text-align: center;
     margin-top: 25px
  }
  .header__contact ul{
   width: 80%;
   margin: auto;
   margin-top: 70px;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.header__contact ul li{
   text-align: center;
 }
 .header__contact ul li h4{
   margin-top: 16px;
 }
 .header__contact ul li a{
   color: var(--color-black);
 }

.header__contact ul li .li-img{
   width: 141px;
   height: 163px;
   margin: auto;
}

.header__contact ul li ul{
   display: flex;
   flex-direction: column;
   margin-top: 20px;
   width: 100%;
   gap: 15px;
}
.header__contact ul li ul .live__chat a{
   color: var(--color-blue);
}

/* header end */

.more__link{

      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 30px;
      border: 1px solid var(--color-pink);
      color: var(--color-pink);
      border-radius:8em;
      padding: 17px 0px;
      width: 150px;
   
}
.more__link-1{
   display: flex;
   justify-content: flex-end;
   margin-bottom: 30px;
}




/* footer start */
.footer{
  
   padding-bottom: 55px;
}
.footer .footer__up{
   margin-top: 60px;
}
.footer .footer__up p{
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.footer .footer__up p a{
  color: var(--color-black);
}
.footer .footer__down{
   margin-top: 55px;
   display: flex;
   justify-content: space-between;
}
.footer .footer__down ul{
   display: flex;
   gap: 30px;
}
.footer .footer__down ul li a{ 
   color: var(--color-black);
}

.footer .footer__down .social__box{ 
   display: flex;
   align-items: center;
   gap: 30px;
}
.footer .footer__down .social__box ul{ 
   display: flex;
   align-items: center;
   gap: 14px;
}

/* footer end */

.page__back a{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 20px;
   width: 130px;
   border: 1px solid var(--color-pink);
   border-radius: 8em;
   padding: 17px 0px;
   color: var(--color-grey);
}

.line{
   width: 100%;
   background-color: #F4F4F4;
   height: 24px;
   margin-top: 100px;
}


/* blog cards start */
.blog__cards{
   display: grid;
   grid-template-columns: repeat(3,1fr);
   gap: 30px;
  
}
.blog__cards .blog__card{
   box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
   padding-bottom: 10px;
   border-radius: 8px;
       display: flex;
    flex-direction: column;
}

.blog__cards .blog__card .card__img{
   width: 100%;
   height: 278px;
}

.blog__cards .blog__card .card__text{
  padding: 20px 30px;
flex: 1;
    display: flex;
    flex-direction: column;
}
.blog__cards .blog__card .card__text p{
  margin-top: 20px;
  color: var(--color-grey);
}
.blog__cards .blog__card .card__text a{

   color: var(--color-blue);
}
.blog__cards .blog__card .card__text a:last-child{
   display:flex;
   justify-content:flex-end;
       margin-top: auto;
}
/* 
blog cards end */


/* blog contact start */

.blog__contact{
   margin-top: 100px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.blog__contact .blog__contact-img{
   max-width: 302px;
   height: 220px;
}
.blog__contact .blog__contact-text{
  text-align: center;
}
.blog__contact .blog__contact-text h4{
   color: var(--color-blue);
}
.blog__contact .blog__contact-text p{
  margin-top: 30px;
}
.blog__contact .blog__contact-text ul{
   display: flex;
   align-items: center;
   gap: 65px;
   margin-top: 50px;
 }
 
 .blog__contact .blog__contact-text ul a{
   color: var(--color-white);
   display: flex;
   align-items: center;
   gap: 15px;
 }

/* blog contact end */

/* responsive start */
@media screen and (max-width:1300px){
   .container{
     width:  var( --container-width-md);
   }
    h1{
      font-size: 4.4rem;
      line-height: 5rem; 
   }
    h2 { 
      font-size: 4rem; 
      line-height: 4rem; 
    } 
      
    h3 { 
      font-size: 3rem; 
      line-height: 4rem; 
    }
    h4 { 
      font-size: 2.7rem; 
      line-height: 3rem; 
    }
    .blog__cards{
      grid-template-columns: repeat(2,1fr);
  }
  .blog__contact .blog__contact-img{
      display: none;
  }    
  .blog__contact .blog__contact-text ul{
      justify-content:center;
  }    
  .blog__contact {
      justify-content:center;
  }
   
}
@media screen and (max-width:992px){
   h1{
      font-size: 3.4rem;
      line-height: 4rem; 
   }
    h2 { 
      font-size: 3rem; 
      line-height: 3.5rem; 
    } 
      
    h3 { 
      font-size: 2.2rem; 
      line-height: 3rem; 
    }
    h4 { 
      font-size: 2rem; 
      line-height: 2.5rem; 
    }
   .header__contact ul{
      
      gap: 20px;

   }
    .nav .up__nav ul {
      gap: 20px;
      display: none;
   }
    .nav .up__nav ul li{
      padding:0;
   }
   .nav .up__nav ul.active{
      display: flex;
   }
    .nav .up__nav ul .close__li{
      display:flex;
   }
    .nav .up__nav  ul {
      flex-direction: column;
      width: 100%;
      background-color: #fff;
      margin-top: 40px;
      align-items: baseline;
      padding:20px;
  }
   .nav .up__nav  ul li a {
     color: var(--color-blue);
    }


     .nav .up__nav .lang__li{
      display: none;
      
     }
     .nav .up__nav  .lang__li__mobile{
        display: flex;
     }
     
   .nav .up__nav ul .mobile__li{
    display: block;
}
   .nav .up__nav  ul .active{
       background: none;
       padding: 0;
    }
   .nav .down__nav .header__right ul .bar{
      display: flex;
    
  }
  .nav .down__nav .header__right ul li{
   padding:0 !important;
   width: 38px !important;
   height: 38px !important; 
  }
  
  .nav .down__nav .header__right ul li span{
   display: none;
  }
  .nav .up__nav .lang__li{
    
    color: var(--color-blue);
 }
    
}

@media screen and (max-width:768px){
   
   .container{
      width: var( --container-width-sm);
    }
    
  .page__back a{
   display: inline-block;
   width: 130px;
   border: none;
   color: var(--color-blue);
   border-radius: 8em;
   padding:0px;
  }
  .page__back i{
   display: none;

  }
}

@media screen and (max-width:576px){
   .header__contact ul{
      width: 100%;
      gap: 50px;

   }
   .header__contact ul li{
      width: 100%;

   }
   .footer{
      padding-bottom: 30px;
      margin-top: 60px;
   }
   .footer .footer__down{
      flex-direction: column;
   }
   .footer .footer__down ul{
      flex-direction: column;
   }
   .footer .footer__down .social__box{
      margin-top: 30px;
   }
   .footer .footer__down .social__box ul{
      flex-direction: row;
   }
   .blog__cards{
       
      grid-template-columns: repeat(1,1fr);
  }
  .blog__contact .blog__contact-text ul{
   flex-wrap: wrap;
   gap: 30px;
}

}


@media screen and (max-width:480px){
   .nav .down__nav .header__logo{
      width: 72px;
      height: 58px;
   }
   .nav .down__nav .header__right ul{
      gap: 10px;
    }
}
/* responsive end */