z  *{margin: 0; padding: 0; box-sizing: border-box;}
img{max-width: 100%;}
a, a:hover, a:focus, a:visited, a:active{text-decoration: none;}
p, ul, li{padding: 0; margin: 0;}


.sticky{left: 0; right: 0;z-index: 999; position: fixed !important; top: 0px; animation: slideDown .5s ease-out;}


/* header */
header{position: relative; z-index: 9; background-color: #fff; box-shadow: 0 0 10px #00000021; padding: 5px 0;}
header .headermn .navbar .navbar-brand{width: 8%;}
header .nav-link{color: #000; font-size: 16px; font-weight: 500; transition: .5s; position: relative; padding: 0px 0px !important;}
header .nav-link::after{content: ''; background-color: #065395; width: 0%; height: 2px; position: absolute; bottom: -5px; left: 0; transition: .5s;}
header .nav-link:hover::after{width: 100%;}
header .nav-link:hover, header .nav-link:focus{ color: #065395;}
header .navbar-nav{gap: 20px;}
header form .btn{border-radius: 0 100px 100px 0; border: 0; background-color: #065395; color: #fff;}
header .whatsapp{justify-content: end; align-items: center; gap: 15px; margin-left: 30px;}
header .whatsapp li a{color: #fff; background: linear-gradient(90deg,#065395, #d3a433); padding: 10px 25px; font-size: 16px; font-weight: 500; display: inline-block; transition: .5s; border-radius: 10px;}
header .whatsapp li a:hover{background: linear-gradient(90deg,#d3a433, #065395) ;}

header .navbar-toggler{border: none; color: #d3a433; font-size: 28px; border-radius: 0;}
header .navbar-toggler:focus{box-shadow: none ;}
header .offcanvas-title img{width: 50%;}
header .navbar-nav{position: relative;}


/* slider */
#slider{
  background-image: url(../images/banner1.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
#slider .banner-bg{background-color: #00000069; padding: 90px 0; overflow:hidden;}
#slider .content h3{color: #fff; font-size: 40px; font-weight: 700; padding: 0 0 10px 10px; border-bottom: 1px solid #fff;}
#slider .content h3 span{color: #d3a433;}
#slider .content ul{list-style: none;}
#slider .content ul li{color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 10px;}
#slider form{background-color: #ffffffd2; padding: 30px 15px; border-radius: 20px;}
#slider form.row{row-gap: 20px;}
#slider form h3{color: #065395; font-weight: bold; font-size: 25px;}
#slider form h3 span{color: #d3a433;}
#slider form .form-control{border: none; border-bottom: 1px solid #065395; background-color: transparent; border-radius: 0px; color: #000;}
#slider form .form-control:focus{box-shadow: none; border-color: #065395;}
#slider form .form-control::placeholder{color: #3b3b3b;}
#slider form .btn{background-color: #065395; color: #fff; width: 100%;}
#slider form .btn:hover{background-color: #d3a433; }


/* about */
#about{padding: 70px 0;}
#about .row{row-gap: 25px;}
#about .img img{border-radius: 10px;}
#about .content h3{color: #065395; font-size: 33px; font-weight: bold; margin-bottom: 30px;}
#about .content h3 span{color: #d3a433;}
#about .content ul{list-style: none;}
#about .content ul li{font-size: 16px; font-weight: 500; color: grey; margin-bottom: 15px;}
#about .content ul li i{font-size: 18px; font-weight: 500; color: #065395; }
#about .content a{color: #fff; background: linear-gradient(90deg,#065395, #d3a433); padding: 10px 25px; font-size: 18px; font-weight: 500; display: inline-block; transition: .5s; border-radius: 10px; margin-top: 30px;}
#about .content a:hover{background: linear-gradient(90deg,#d3a433, #065395) ;}


/* treatments */
#treatments .row{row-gap: 25px;}
#treatments h2{color: #065395; font-size: 38px; font-weight: bold; text-align: center; margin-bottom: 30px;}
#treatments h2 span{color: #d3a433;}
#treatments .img{background-color: #d4ebff; height: 100%; border-radius: 10px; overflow: hidden;}
#treatments .img img{width: 100%;}
#treatments .text{padding: 20px;}
#treatments .text h4{color: #065395; font-weight: bold; margin-bottom: 20px;}
#treatments .text p{color: grey;}



/* doctor */
#doctor{padding: 70px 0;}
#doctor .row{row-gap: 20px;}
#doctor .p1{font-size: 18px; color: #d3a433; text-align: center; font-weight: bold;}
#doctor h2{font-size: 33px; color: #065395; text-align: center; margin-bottom: 30px; font-weight: bold;}
#doctor .img img{border-radius: 10px;}
#doctor .content p{color: grey; font-size: 16px; text-align: justify;}


/* testmonial */
#testmonial{padding: 70px 0; background-color: #065395;}
#testmonial h2{font-size: 33px; color: #fff; text-align: center; margin-bottom: 50px; font-weight: bold;}
#testmonial .row{row-gap: 25px;}
#testmonial ul.content{display: flex; gap: 20px; list-style: none; align-items: center;}
#testmonial ul.content li:first-child{width: 200px;}
#testmonial ul.content li:first-child img{border-radius: 50%; width: 100%;}
#testmonial ul.content li p{font-size: 15px; color: #fff; text-align: justify;}
#testmonial ul.content li h5{font-size: 23px; margin: 5px 0 0 0; font-weight: 700; color: #d3a433;}


/* footer */
footer .footertop{background-color: #d4ebff; padding: 70px 0px 20px;}
footer .row{row-gap: 25px;}
footer .footertop .about img{width: 120px; ;}
footer .footertop .about p{color: #000; font-size: 15px; margin-top: 20px; }
footer .footertop ul{list-style: none;}
footer .footertop ul li{color: #000; margin-top: 10px;}
footer .footertop ul li a{color: #000; font-size: 16px; transition: .5s; display: inline-block; border-bottom: 1px solid transparent;}
footer .footertop ul li a:hover{color: #065395;}
footer .footertop .addres li{margin-bottom: 20px;}
footer .footertop .addres li i{color: #065395; font-size: 22px;}
footer .footerboo ul{display: flex; justify-content: space-between; margin: 0; border-top: 1px solid #06539536;padding-top: 20px;}
footer .footerboo{background-color:#d4ebff; padding: 20px;}
footer .footerboo .soical li:first-child{color: #065395; text-align: center;}
footer .footerboo .soical li:first-child a{color: #fff; font-size: 16px; display: inline-block; width: 35px;height: 35px;line-height: 35px; background-color: #065395; border-radius: 50%; transition: .5s;}
footer .footerboo .soical li:first-child a:hover{background-color: #d3a433;}
footer .footerboo ul li img{width: 195px; background-color: #065395; padding: 0px 10px 8px; border-radius: 100px;}




/* heading */
#heading{background-image: url(../images/banner1.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover;}
#heading .heading-bg{background-color: #00000048; padding: 100px 0;}
#heading h2{font-size: 45px; font-weight: bold; color: #fff;}
#heading p, #heading a{font-size: 18px; color: #fff; font-weight: bold; transition: .5s;}
#heading a:hover{color: #d3a433;}




  /* quickcontact */
.quickcontact {
  width: 45px;
  position: fixed;
  top: 77%;
  right: 15px;
  z-index: 102;
}


/* modal */
.modal form.row{row-gap: 20px;}
.modal .btn-theme {border-radius: 0px; background: #065395; color: #fff;}
.modal .btn-theme:hover{background-color: #000; color: white;} 
.modal .form-control{border-radius: 0px; border: none; box-shadow: none; background-color: #f1f1f1;}
.modal .form-control:focus{border-color: #000;}
.modal .submit{background-color: #d3a433; color: #fff; font-weight: 500px; padding: 10px; border: 0; transition: .5;}
.modal .submit:hover{background-color: #065395;}


  .popup-box{
        display: flex;
    }

  .form-box {
    background: #fdf0f8;
    padding: 30px 25px;
    text-align: center;
    width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .form-box h2 {
    margin: 0;
    font-size: 18px;
    color: #065395;
    font-weight: 900 !important;
    margin-bottom: 20px;
    line-height: 30px;

  }


  .phone-input {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
  }

  .country-code {
    background: #eee;
    padding: 10px 12px;
    font-size: 15px;
    border-right: 1px solid #ccc;
  }

  input[type="number"] {
    border: none;
    outline: none;
    padding: 10px;
    width: 100%;
    font-size: 16px;
  }

  .book-btn {
    color: white;
    border: none;
    padding: 12px 0;
    width: 100%;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    animation: blink-bg 1s infinite alternate;
  }

  @keyframes blink-bg {
    0% { background-color: #000; }
    50% { background-color: #065395; }
    100% { background-color: #000; }
  }

  .social-icons {
    margin-top: 20px;
  }

  .social-icons a {
    text-decoration: none;
    color: #555;
    font-size: 22px;
    margin: 0 10px;
    transition: color 0.3s;
  }

  .social-icons a:hover {
    color: #007BFF;
  }
  
  
    select {
    border: none;
    outline: none;
    background: #eee;
    padding: 10px;
    font-size: 15px;
    border-right: 1px solid #ccc;
  }

/* ===========================
   Responsive Design
   =========================== */
    @media (max-width: 768px) {
    
      .popup-box {
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
    
      .form-box {
        width: 100%;
        padding: 20px;
        box-shadow: 0 3px 10px rgba(0,0,0,0.15);
      }
    
      .form-box h2 {
        font-size: 18px;
      }
    
      .form-box p {
        font-size: 13px;
        margin-bottom: 15px;
      }
    
      .phone-input {
        flex-direction: row;
      }
    
      select {
        font-size: 14px;
        padding: 8px;
        width: 30%;
      }
    
      input[type="number"] {
        font-size: 14px;
        padding: 8px;
      }
    
      .book-btn {
        font-size: 15px;
        padding: 10px 0;
      }
    
      .social-icons {
        margin-top: 15px;
      }
    
      .social-icons a {
        font-size: 20px;
        margin: 0 8px;
      }
    
      /* Optional: Adjust popup itself */
      .popup {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    
      .close-icon {
        top: 10px;
        right: 15px;
        font-size: 26px;
      }
    }
    
    @media (max-width: 480px) {
      .form-box h2 {
        font-size: 16px;
      }
    
      .form-box p {
        font-size: 12px;
      }
    
      select {
        width: 35%;
      }
    
      input[type="number"] {
        font-size: 13px;
      }
    
      .book-btn {
        font-size: 14px;
      }
    }



/* Overlay background */
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Styling for popups */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  z-index: 1000;
  text-align: center;
  border-radius: 10px;
  width: 750px;
}

.popup img { width:500px;}
@media (max-width:991px) {
  .popup{
    width: 330px;
  }
}

.popup img {
  max-width: 100%;
  height: 100%;
}

/* Close icon */
.close-icon {
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 24px;
  font-weight: bolder;
  cursor: pointer;
  color: #000;
}

.close-icon:hover {
  color: #9c7440;
}

.precautions-for-hair-before-after .col-box{
  border: 1px solid #9c7440;
  padding: 20px;
  border-radius: 30px;
  height: 100%;
}

.cta-strap-content{
  background-color: #9c7440;
}

.cta-strap-content p{
  color: #fff;
}

.cta-strap-content button{
  background-color: #fff;
  padding: 10px;
  border-radius: 30px;
}

.cta-strap-content button a{
  color: #9c7440;
}

.best-advance-anti-ageing .col-box{
  border: 1px solid #9c7440;
  padding: 20px;
  height: 100%;
  border-radius: 30px;
}