.figtree {
     font-family: "Figtree", sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
 }

 :root {
     --bs-blue: #00B3B9;
     --bs-indigo: #6610f2;
     --bs-purple: #6f42c1;
     --bs-white: #4444;
     --bs-gray: #434343;
     --bs-gray-dark: #343a40;
     --bs-primary: #D3ECE5;
     --bs-button: #1C4250E5;
     --background: #00B4BB;
     --secbg: #00b2ba;
     --thirdbg: #ECFEFF;


     --paragraph-color: #657D95;
     --dr-main-btn: linear-gradient(to right, #014461, #028CC7);

     --dr-main-btn-hover: #bd9246;
     --dr-main-heading: #004E69;
     --dr-main-text-primary: #233A51;
     --dr-main-text-secondary: #597882;
     --dr-main-bg-primary: #f6f7f5;
     --dr-main-bg-secondary: #014866;


 }

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 html,
 body {
     overflow-x: hidden !important;
     max-width: 100vw !important;
     position: relative;
 }

 body {
     padding: 0;
     margin: 0;
     font-family: 'Figtree' !important;
     position: relative;
     scroll-behavior: smooth;
     background-color: #EBF6FA !important;
 }

 section {
     background-color: #EBF6FA;
 }


 h2 {
     font-size: 2px;
     line-height: 42px;
     font-weight: 700;
 }

 ul {
     padding: 0;
 }
 ul {
    margin-top: 0;
    margin-bottom: 0rem;
}

 .container {
     margin: 20px;
     padding: 30px;
     padding-left: 20px !important;
 }

 .container-fluid {
     padding-left: 15px;
     padding-right: 15px;
     max-width: 100%;
     overflow-x: hidden;
 }

 a {
     text-decoration: none !important;
     font-size: 18px;
     font-weight: 700;
     line-height: 25px;
     color: var(--bs-blue);
 }

 a:hover {
     color: var(--bs-gray-dark);
 }

  ul {
    margin-top: 0;
    margin-bottom: 0rem !important;
}

 .btn-primary {
     --bs-btn-color: #fff;
     --bs-btn-bg: var(--dr-main-btn);
     --bs-btn-border-color: var(--dr-main-btn);
     --bs-btn-hover-color: #fff;
     --bs-btn-hover-bg: var(--dr-main-btn);
     --bs-btn-hover-border-color: var(--dr-main-btn);
     --bs-btn-focus-shadow-rgb: 49, 132, 253;
     --bs-btn-active-color: #fff;
     --bs-btn-active-bg: var(--dr-main-btn);
     --bs-btn-active-border-color: var(--dr-main-btn);
     --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
     --bs-btn-disabled-color: #fff;
     --bs-btn-disabled-bg: #0d6efd;
     --bs-btn-disabled-border-color: #0d6efd;
 }

 .blue-title {
     color: var(--dr-main-heading) !important;
 }

 .hover-light-btn:hover {

  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}
/* ================= HEADER ================= */

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px !important;
    background: rgb(255, 255, 255);
    border-bottom: 1px solid #eee;
    z-index: 1000;
    display: flex;
    align-items: center;
    box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

/* Remove bootstrap padding inside header */
header nav.container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Logo */
.header-logo img {
    max-height: 75px;
    width: auto;
    display: block;
}

/* Menu */
.header-menu {
    display: flex;
    align-items: center;
}

/* Navigation list */
.nav-list {
    list-style: none;
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
}

    .nav-list li a {
        font-size: 16px;
        font-weight: 600;
        color: #004E69;
        text-decoration: none;
        padding: 6px 8px;
        transition: all 0.3s ease;
    }

        .nav-list li a:hover,
        .nav-list li a.active {
            color: #00B3B9;
            border-bottom: 2px solid #00B3B9;
        }

/* Menu toggle button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .menu-toggle {
        display: block;
    }

    .header-menu {
        position: absolute;
        top: 0; /* same as header height */
        left: 0;
        width: 80%;
        background: #ffffff;
        display: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

        .header-menu.active {
            display: flex;
            height: 100vh;
        }

    .nav-list {
        flex-direction: column;
        width: 100%;
    }

        .nav-list li {
            width: 100%;
            border-bottom: 1px solid #eee;
        }

            .nav-list li a {
                padding: 14px 20px;
                display: block;
                width: 100%;
            }
}
/* ================= MOBILE SIDEBAR ================= */
@media (max-width: 768px) {

    .menu-toggle {
        display: block;
        z-index: 1001;
    }

    .header-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 160px;
        height: 100vh;
        background: #ffffff;
        transition: left 0.3s ease;
        z-index: 1000;
        padding-top: 0px;
    }

        .header-menu.active {
            left: 0;
            height: 100vh;
        }

    /* CLOSE BUTTON – MOBILE ONLY */
    .menu-close {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid #ddd;
        background: #fff;
        font-size: 20px;
        cursor: pointer;
        color: #004E69;
    }

        .menu-close:hover {
            background: #f2f2f2;
        }

    .nav-list {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }

        .nav-list li {
            border-bottom: 1px solid #eee;
        }

            .nav-list li a {
                display: block;
                padding: 14px 20px;
                font-size: 16px;
            }
}

.menu-close {
    display: none;
}


.flip-layout {
    flex-direction: row-reverse;
}

 .phone-icon {
     background: var(--dr-main-btn);
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .phone-icon i {
     color: #333;

     font-size: 18px;
 }

 .icon-svg {
     width: 30px;
     height: 30px;
     fill: #ffffff;
 }

 /* bannner swiper css */
.banner-section {
    position: relative;
 padding:50px 0px;
 margin-top:70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.banner-section .content-section {
    margin-top: 100px;
}

.banner-background {
    background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(Images/scalp_injection_1520x802_nodistortion.webp);
    background-position: center;
    background-size: cover;
    margin-top: 90px;
    width: 100%;
}
.text-whitem{
    color: #ffbf16;
    font-weight: 600;
}

.secondary-heading h3 {
    color: #fff;
    font-size: 24px !important;
    line-height: 40px;
}
.secondary-heading{
    line-height: 20px;
}
.color-text p {
    color: #D6F7FF !important;
    padding-top: 2px !important;
    font-size: 16px !important;
    line-height: 20px !important;
    
}

 .header-button {
     background: var(--dr-main-btn) !important;
 }

 .call-now-bg {
     background: transparent !important;
     border: 2px solid #ffffff;
     width: 157.1875px;
 }

 .swiper {
     width: 100%;
     height: 100%;
     padding: 20px 0px;
     margin-top:0px!important;
     /* So next/prev are visible */
 }

 .swiper-slide {
     text-align: center;
     font-size: 18px;
     display: flex;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
 }


 .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 10px;
 }



 /* naviagtion content css  */
 .navigation-content {
     padding-top: 0px;
     padding-bottom: 0px;
 }

 .navigation-content li {
     list-style: none;
     /* border-left: 2px solid #dbdbdb; */
     margin-bottom: 10px;
 }

 .navigation-content li:first-child {
     border-left: none;
 }

 .navigation-content li a {

     text-decoration: none;
     text-align: left;
     color: var(--dr-main-text-primary);
     padding: 0 25px;
     display: block;
 }
.enquiry-popup {
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.modal-title {
    font-weight: bold;
    color: #007bff;
}

.modal-footer .btn {
    background-color: #007bff;
    border: none;
}

 /* hair loss treatments */
 .hairloss-treatment .container
 {
    padding-bottom: -10px !important;
 }
 .text-yellow {
     color: #F7B701;
 }

 .hairloss-treatment {
     margin-top: -29px;
 }

 .hairloss-treatment h2 {
     font-size: 35px;
     line-height: 42px;
     font-weight: 700;
     text-align: left;
     color: #333333;
 }

 .hairloss-treatment p {
     font-size: 18px;
     font-weight: 500;
     line-height: 23px;
     text-align: left;
     color: var(--dr-main-text-secondary);
 }

 .hairloss-treatment li {
     padding: 10px;
     list-style: none;
     text-align: center;
     width: 25%;
 }

 .imageLayer img {
     border-radius: 35px;
     /* margin-left: -80px; */
 }

 .hairloss-treatment li p {
     font-size: 16px;
     font-weight: 600;
     line-height: 19.5px;
     text-align: center;
     color: var(--bs-gray);
     color: #005868;
     padding-top: 10px;
 }

 .bookAppointmentFormContent {
     background-color: #DBF7FB;
     width: 100%;
     max-width: 500px;
/*     margin: 0 auto;*/
   
     border-radius: 15px;
     padding: 30px 35px 0 35px;
     margin-bottom: 35px;

     /* 3D effect */
     box-shadow: 0px 10.11px 10.15px 0px #00B6CC4D;
     /* 
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1),  */
     border: 1px solid #eaeaea;
     /* subtle border for crisp edges */


 }

 .bookAppointmentFormContent h3 {
     font-size: 30px;
     font-weight: 700;
     line-height: 36px;
     text-align: left;
     color: var(--dr-main-text-primary);

 }

 .bookAppointmentFormContent .formLayer {
     padding-top: 25px;
 }

 .bookAppointmentFormContent input,
 .bookAppointmentFormContent input:focus {
     font-size: 14px;
     font-weight: 600;
     line-height: 21.6px;
     text-align: left;
     color: #000000;
     border: none;
     /* border-bottom: 1px solid #444444; */
     border-radius: 0px;
     background: none;
     box-shadow: none;
     background: #FFFFFF;
     width: 251.28208923339844;
     height: 51.34894943237305;

     opacity: 1;
     top: 103.79px;
     left: 41.52px;
     border-radius: 13.11px;

 }

 .bookAppointmentFormContent input::placeholder {
     color: #005868;
     opacity: 1;
     /* ensures it's fully visible */
 }

 .city_select {

     width: 100%;
     padding: .375rem 2.5rem .375rem .75rem;
     /* extra padding-right for arrow */
     border: none;
     background: #EFEFEF url("Images/Dr-youth/down-arrow.png") no-repeat right 15px center;
     background-size: 16px;
     /* make arrow bigger/smaller */
     font-size: 14px;
     font-weight: 600;
     color: var(--dr-main-text-primary);
     border-radius: 13px;
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     cursor: pointer;

 }


 .options {
     color: var(--bs-gray);
 }

 .bookAppointmentFormContent .submit-btn {
     /* background: var(--bs-button); */
     border-radius: 51px;
     /* border-color: #1C4250E5; */
     background: var(--dr-main-btn) !important;
     margin: 0 auto;
     padding: 10px 20px;
     width: 90%;
     max-width: 350px;
     /* max-width: 150px; */
     display: block;
     color: white;
     border: 2px solid var(--dr-main-btn);
     font-size: 19.67px;

 }

 .bookAppointmentFormContent button:hover {

     /* background-color: var(--dr-main-btn-hover);
    color: white;
    border: 2px solid var(--dr-main-btn-hover) ; */
 }

 .bookAppointmentFormContent .callBack {
     font-size: 14px;
     font-weight: 600;
     /* line-height: 21.6px; */
     line-height: 30px;
     text-align: left;
     /* color: #fff; */
     color: var(--dr-main-text-primary);
     text-align: center;
     /* background: var(--dr-main-bg-primary); */
     border-radius: 25px 25px 0 0;
     display: table;
     margin: 0 auto;
     padding: 10px 10px 3px 10px;
     /* background-color: var(--dr-main-btn-hover); */
 }

 .bookAppointmentFormContent p span {
     width: 30px;
     height: 30px;
     border-radius: 100%;
     /* background: #007358; */
     background-color: var(--dr-main-btn);
     display: inline-block;
 }

 .bookAppointmentFormContent p span img {
     width: 15px;
 }

 .text-color {
     color: #233A51;
     font-size: 19px;
 }

 .signs-of-hairloss h5 {
     color: var(--dr-main-text-primary);
 }

 .signs-of-hairloss p {
     color: var(--dr-main-text-secondary);
     font-size: 18px;
 }

 .causes-hair-loss p {
     margin-bottom: 0.5rem !important;
     color: var(--dr-main-text-primary);
     /* font-weight: 500; */
     font-size: 19px;

 }


 /* other services section css */
 .other-service img {
     width: 101px;
     height: 101px;
     border: 2px solid #004E69;
 }

 .other-service button  {
     font-size: 10px;
     color: black;
     width: 70px;
     height: 20px;
     border-radius: 20px;
     background-color: transparent;

 }
 .other-service a{
    font-size: 10px;
    text-decoration: none;
    color: black;
    font-weight: 10 !important;
    line-height: 0;

 }

 .other-service button:hover {
     background-color: #858686;
     color: white;
     border: 2px solid #858686;
 }

 .other-service h6 {
     color: var(--dr-main-text-primary);
     font-size: 15px;
     font-weight: 400;
     text-align: center;
 }

 .Dermatologist-Approved-Hair-Loss-Treatments h5 {
     color: var(--dr-main-heading) !important;
 }

 .why-choose-us h5 {
     font-size: 16px !important;
 }

 /* before and after */

 .md-reduce {
     margin-bottom: -20px;
 }

 .before-after {
     /* background-color: var(--dr-main-bg-primary); */
     height: 580px;

 }

 .results-header {
     text-align: left;
     position: relative;
 }

 .title {
     font-size: 2rem;
     line-height: 30px;
     font-weight: 600;
     text-align: left;
     color: var(--dr-main-text-primary);
 }

 .b-w-text {
     font-weight: 700 !important;
     font-size: 2rem !important;

 }

 .textLayer {
     padding-bottom: 20px;
     /* padding-right: 85px; */
 }

 .textLayer p {
     font-size: 25px;
     font-weight: 500;
     line-height: 28px;
     /* text-align: left; */
     color: var(--paragraph-color);
 }



 .nav-arrows {
     position: absolute;
     top: 0;
     right: 0;
     display: flex;

 }

 .nav-arrow {
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: transparent;
     border: 1px solid var(--dr-main-text-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     transition: all 0.3s ease;
     color: var(--dr-main-btn);
     z-index: 10;
     margin: 5px;
 }

 .nav-arrow:hover {
     background: var(--dr-main-btn-hover);


 }

 .nav-arrow:hover svg {
     fill: white;
 }

 .before-result {
     overflow-x: hidden;
     margin-top: -30px;
     margin-right: -10px;



 }

 .swipers {
     position: relative;
     margin-left: -15px;


 }

 .result-card {
     /* background: #EBF6FA; */
     /* border-radius: 10px; */
     /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); */
     overflow: hidden;
     transition: transform 0.3s ease;
     height: 100%;
 }

 .remove-mt {
     margin-top: -110px;
 }

 .md-reduce-40 {
     /* margin-bottom: -120px !important; */
     height: 450px;
 }

.before-after-container {
    display: flex;
    gap: 10px;
    height:100%;
    /*     height: 200px; */
    /* margin: 10px; */
}

 .image-half {
     flex: 1;
     position: relative;
     overflow: hidden;
     border-radius: 0px !important;

 }

 .result-image {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 0px !important;

 }



 .image-label {
     position: absolute;
     bottom: 0px;
     right: 0px;
     background: rgba(0, 0, 0, 0.8);
     color: white;
     padding: 8px 8px;
     font-size: 0.5rem;
     font-weight: 600;
     text-transform: capitalize;
 }

 .client-info {
     padding: 10px;
     background: white;
 }

 .client-name {
     font-weight: 600;
     color: var(--dr-main-heading);

     font-size: 1rem;
 }

 .client-id {
     color: var(--dr-main-heading);
     font-size: 1rem;
 }

 .disclaimer {
     text-align: left;
     color: var(--dr-main-text-primary);
     font-size: 0.95rem;


 }

 .no-bg {
     background-color: transparent;
     box-shadow: none;
     scale: 1;
 }

 .small-head {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding-left: 10px;
 }

 .small-head h3 {

     font-size: 15px;
     font-weight: 700;
     line-height: 24px;
     text-align: left;
     color: #007BA2;
     height: 40px;

 }

 .small-head p {
     text-align: left;
     /* font-size: 15px; */
     font-size: 14px;
     font-weight: 400;
     line-height: 19.2px;
     text-align: left;
     /* color: var(--dr-main-text-primary); */
     color: var(--paragraph-color);



 }


 .br {
     border-radius: 50px;

     height: 350px;
     margin-bottom: 10px;
     overflow: hidden;

 }
.treatment-cards-section {
    padding: 60px 20px;
    background: #f9f9f9;
}
.treatment-section-heading {
    text-align: center;
    font-size: 2.5rem;
    color: #00b4ff;
    font-weight: 600;
    margin-bottom: 30px;
}
.treatment-card {
    width: 100%;
    max-width: 300px;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    background: #fff;
    margin-left: 35px;
}
    .treatment-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
.card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    text-align: center;
}



 /* symptoms and type */
 .symptoms-types {
     background-color: var(--dr-main-bg-primary);

     margin-top: -50px;
 }

 .selectPackage {
     border-radius: 8px;
     text-align: center;
     background: var(--dr-main-btn);
     /* box-shadow: 0px 6px 20.4px 0px #00B4BB; */
     margin-top: 20px;
     font-size: 16px;
     font-weight: 500;
     line-height: 15px;
     text-align: left;
     color: #fff;
     border: 2px solid var(--dr-main-btn);
     padding: 15px 20px;
     outline: none;
     transition: 0.5 ease-in;


 }

 .selectPackage:hover {
     background-color: var(--dr-main-btn-hover);
     border: 2px solid var(--dr-main-btn-hover);
 }

 .beforeAfterSwiper,
 .swiperBenifits,
 .swiperSymptoms,

 .Doctorswiper,
 .ReviewSlider {
     padding: 0%;
     margin-left: -12px;
 }

 /* rating and experience section */
 .rating-number {

     font-weight: 900;

     font-size: 31.3px;



 }
.Doctorswiper .swiper-slide {
    width: 308px;
    height: auto;
    display: flex;
    margin-right: 20px;
}
/*.bottomLayer{
    display:flex;
    flex-direction:column;
    justify-content:space-between
}*/


 /* Video procedure */
 .font-23 {
     font-size: 25px !important;
     text-align: center;
 }

 .Videoswiper {
     margin-left: -11px;
 }

 .video-procedure {
     /* background-color:  #00B4BB; */
     /* background-color: var(--background); */
     margin-top: -20px;
     background-color: var(--dr-main-bg-secondary);
 }

 .video-wrapper {
     /* border: 5px solid var(--dr-main-text-primary); */
     object-fit: cover;

     /* overflow: hidden; */
     border-radius: 10px;
     width: auto;
 }

 iframe {
     margin-bottom: -6px;
 }

 .twoswiper {
     margin-left: -10px;
 }

 /* new video procedure */
 .video-thumbnail {
     height: 250px;
     object-fit: cover;
     border-radius: 0 !important;
 }

 .play-overlay {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background: rgba(0,0,0,0.4); */
 }

 .bg-blue-dim {
     background-color: #014866a7 !important;

 }

 .play-triangle {
     width: 0;
     height: 0;
     border-left: 20px solid #FFFFFF;
     border-top: 12px solid transparent;
     border-bottom: 12px solid transparent;
     margin-left: 5px;
 }

 .video-title-overlay {
     top: 20px;
     right: 20px;
     /* background: rgba(0,0,0,0.8); */
 }

 .video-duration-overlay {
     bottom: 10px;
     right: 10px;
     background: rgba(0, 123, 255, 0.9);
 }

 @media (max-width: 768px) {
     .video-thumbnail {
         height: 200px;
     }

     .play-triangle {
         border-left: 15px solid #ffffff;
         border-top: 9px solid transparent;
         border-bottom: 9px solid transparent;
     }
 }












 /* talk-to expert */
 .margin-bottom-45 {
     margin-top: -10px !important;
 }

 .talk-to-expert-content {
     background-color: var(--dr-main-bg-secondary);
     border-radius: 13px;
     padding-left: 5%;
     padding-right: 5%;
     margin-top: -50px;
 }

 .imageLayer-TalkDoctor {
     margin-top: -50px;
 }

 .imageLayer-TalkDoctor img {
     border-radius: 35px;
 }

 .talk-to-expert-content .textLayer {
     /* padding-left: 10px; */
     padding: 10px 3%;
 }

 .talk-to-expert-content p {
     font-size: 18px;
     font-weight: 600;
     line-height: 24px;
     text-align: left;
     color: white;
     margin-bottom: 0px;

 }

 .talk-to-expert-content .buttonLayer {
     padding: 10px;
 }

 .talk-to-expert-content button {
     /* background: var(--dr-main-btn); */
     border-radius: 28px;
     font-size: 20px;
     font-weight: 700;
     line-height: 26.4px;
     text-align: center;
     color: #fff;
     width: 250px;
     padding: 15px;
     outline: none;
     border: 2px solid var(--dr-main-btn);
 }


 /* hair and skin specialist css */
 .doctor-slider {
     box-shadow: 0px 2px 2px 0px #0000001A;
     border-radius: 10px;
     margin-bottom: 5px;
     overflow: hidden;
 }

 .bottomLayer {
     background: var(--bs-white);
     padding: 15px 10px;
 }

 .bottomLayer h2 {
     font-size: 20px;
     font-weight: 600;
     line-height: 30px;
     text-align: left;
     /* color:var(--secbg); */
     color: var(--dr-main-text-primary);
 }

 .bottomLayer p {
     font-size: .9rem;
     font-weight: 500;
     line-height: 1.2rem;
     text-align: left;
     color: var(--paragraph-color);

 }

 .rattingNumber h4 {

     font-size: 22px;
     font-weight: 700;
     line-height: 26.4px;
     text-align: left;
     margin-right: 10px;
     color: var(--dr-main-text-primary);
 }

 .drsListSlider .slider .startsListContent span {
     margin-right: 5px;
     color: #FEC007;
 }

 .fa-star:before {
     content: "\f005";
 }

 .drKnownLanguagesList span {
     font-size: .9rem;
 }

 .bookAppointmentButton {
     padding: 15px 0 0 0;
 }

 .bookAppointmentButton button {
     background: var(--dr-main-btn);
     color: var(--bs-white);
     border-radius: 28px;
     font-size: 16px;
     font-weight: 500;
     line-height: 19.2px;
     text-align: center;
     padding: 12px 20px;
     display: block;
     max-width: 270px;
     width: 100%;
 }

 .rating-experience h3 {
     color: var(--dr-main-heading);
 }

 .bg-body-dark {
     background: #DBF7FB;

 }

 /* rating css start from here */
 .rating-section {
     margin: 50px 0 !important;

 }

 .topRattingLayer {
     background: #1C4250;
     border-radius: 23px;
     padding: 20px;
     margin-top: -20px;
     padding-bottom: 0px;

 }

 .topRattingLayer .iconLayer {
     margin-right: 10px;
 }

 .topRattingLayer span {
     margin-right: 5px;
     color: #FFA903;
 }

 .topRattingLayer span.gray {
     color: #B9B9B9;
 }

 .pb-remove {
     padding-bottom: 0;
 }

 .rattingMobileVersion .iconLayer:first-child {
     margin-left: 0px;
 }

 .rattingMobileVersion .iconLayer {
     box-shadow: -4px 0px 4px 0px #00000040;
     margin-left: -18px;
     border: 2px solid #fff;
     border-radius: 100%;
     margin-bottom: 10px;
 }


 .rattingMobileVersion .rattingContent span {
     font-size: 22px;
     margin: 0 5px;
     margin-bottom: 10px;
 }

 .rattingMobileVersion .numberOfRatting p {
     font-size: 14px;
     font-weight: 600;
     line-height: 16.8px;
     letter-spacing: 0.02em;
     text-align: left;
     color: #fff;
     margin-bottom: 0px;
     margin-bottom: 10px;
 }

 .rattingMobileVersion .numberOfRatting p span {
     color: #fff;
     margin-bottom: 10px;
 }

 /* client review section */
 .client-reviews {
     /* background-color: var(--dr-main-bg-primary); */
     margin-top: -40px;
 }

 .client-reviews .slider {
     background: #fff;
     border-radius: 10px;
     padding: 24px;
     border: 1px solid #F9FAFA;
 }

 .client-reviews .slider .testimonialData {
     min-height: 200px;
     height: 4vw;
     overflow-y: auto;
     /* padding-bottom: 10px; */
     scrollbar-width: thin;
 }

 /* Custom scrollbar for testimonialData */

/* Scroll area */
.client-reviews .slider .testimonialData {
  min-height: 200px;
  height: 4vw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #028CC7 #f1f1f1;
}

/* Scrollbar track */
.client-reviews .slider .testimonialData::-webkit-scrollbar {
  width: 12px;
}

.client-reviews .slider .testimonialData::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

/* Scrollbar thumb */
.client-reviews .slider .testimonialData::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #028CC7, #014461);
  border-radius: 10px;
  border: 2px solid #f1f1f1;
}

.client-reviews .slider .testimonialData::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #014461, #012a33);
}

/* Up Arrow */
.client-reviews .slider .testimonialData::-webkit-scrollbar-button:single-button:vertical:decrement {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23028CC7' viewBox='0 0 24 24'%3E%3Cpath d='M12 8l6 6H6z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 8px;
  height: 16px;
  width: 12px;
}

/* Down Arrow */
.client-reviews .slider .testimonialData::-webkit-scrollbar-button:single-button:vertical:increment {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23028CC7' viewBox='0 0 24 24'%3E%3Cpath d='M12 16l-6-6h12z'/%3E%3C/svg%3E") no-repeat center;
  background-size: 8px;
  height: 16px;
  width: 12px;
}


 .client-reviews .slider h3 {
     font-size: 18px;
     font-weight: 600;
     line-height: 20px;
     text-align: left;
     /* color: #00B4BB; */
     color: var(--dr-main-text-primary);
 }

 .client-reviews .slider p {
     font-size: 16px;
     font-weight: 400;
     line-height: 24px;
     text-align: left;
     overflow: hidden;
     text-overflow: ellipsis;
 }

 .client-reviews .slider .testimonialDataBottom {
     padding-top: 8px;
     margin-bottom: 40px;
 }

 .client-reviews .slider .patientName {
     font-size: 16px;
     font-weight: 600;
     line-height: 20px;
     text-align: left;
     color: var(--dr-main-text-primary);
 }


 .client-reviews .slider .NameText {
     width: 32px;
     height: 32px;
     border-radius: 32px;
     background: var(--dr-main-btn);
     color: #fff;
     margin-right: 10px;
     text-align: center;
     line-height: 32px;
 }

 .client-reviews .slider .startsListContent {
     padding: 8px 0;
 }

 .client-reviews .slider .startsListContent span {
     margin-right: 5px;
     color: #FEC007;
 }

 .client-reviews .slider .patientTreatment {
     font-size: 14px;
     font-weight: 500;
     line-height: 20px;
     text-align: left;
     color: var(--dr-main-text-primary);
 }


 /* ask your Question css */
 .padding-top{
    padding: 0 ;
    padding-top: 20px ;
    padding-left: 20px ;
   
 }
 .ask-Question-section {
     /* background: var(--dr-main-bg-primary); */
     /* max-width: 420px; */
     margin: -20px auto;
 }

 .bg-dark-blue {
     background-color: #014866;
 }

 .mt-remove {
     margin-top: -30px;
 }

 .ask-Question-section h3 {
     font-size: 24px;
     font-weight: 700;
     line-height: 28.8px;
     text-align: left;
     color: var(--dr-main-text-primary);
     margin-bottom: 0;
 }

 .ask-Question-section  .new {
     background: #FCE400;
     border-radius: 10px;
     padding: 10px;
     font-size: 10px;
     font-weight: 500;
     line-height: 12px;
     text-align: left;
     color: #000;
     margin-left: 15px;
 }

 .ask-Question-section .title span i {
     color: #f34d3d;
     font-size: 10px;
     border-radius: 100%;
 }

 .ask-Question-section p {
     font-size: 16px;
     font-weight: 600;
     line-height: 19.2px;
     text-align: left;
     color: var(--dr-main-text-primary);
     /* padding: 15px 0; */
 }

 .icon-call-black {
     width: 30px;
     height: 30px;
     fill: white;
 }

 .ask-Question-section textarea {
     height: 140px;
     

 }
 .remove-mb{
    margin-bottom: -80px;
 }

 .ask-Question-section textarea:active {
     background-color: var(--);
 }
#imgCaptcha2 {
    height: 60px!important;
}

.ask-Question-section textarea,
.ask-Question-section input {
    border-color: var(--dr-main-btn);
    background: none;
    font-size: 16px;
    font-weight: 600;
    line-height: 45px;
    text-align: left;
    border-radius: 10px;
    color: black;
    /* background-color: #E1F4FF; */
    background-color: white;
    padding-left: 20px !important;
}

 .ask-Question-section input::placeholder,
 textarea::placeholder {
     color: var(--dr-main-text-primary);
      color: rgb(163, 163, 163);
     opacity: 1;
     
     
 }

 .ask-Question-section textarea::placeholder  {
     color: var(--dr-main-text-primary);
     color: rgb(163, 163, 163);
 }

 .ask-Question-section .txtinput {
     width: 100%;
     padding: 1rem 1rem;

     /* border-color: #E1F4FF; */
     background: #ffffff;
     font-size: 16px;
     font-weight: 600;
     line-height: 45px;
     text-align: left;
     /* color: #ffffff; */
    color: rgb(163, 163, 163);
     border-radius: 10px;

 }
 .city_selects option {
  color: black;
}

/* Change color once an option is selected */
.city_selects:valid {
  color: black;
}

 .ask-Question-section input:focus {
     background-color: #ffffff;

     color: black;
 }

 .ask-Question-section textarea:focus {
        background-color: #ffffff;
     color:black;
 }

 .ask-Question-section .txtinput :focus {
     background: #E1F4FF;
     color: #000000;
     outline: none;
     box-shadow: none !important;
 }
 .form-control:focus{
    box-shadow: none !important;
 }

.ask-Question-section #btnSubmit2,
.ask-Question-section #btnSubmit2:hover,
.ask-Question-section #btnSubmit2:focus,
.ask-Question-section #btnSubmit2:active {
    /* background: var(--dr-main-btn); */
    background: white !important;
    /* padding: 20px; */
    width: 100% !important;
    margin: 0 auto !important;
    max-width: 350px !important;
    border-radius: 30px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    text-align: center !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 26.4px !important;
    padding: 10px 0 !important;
    /* border-color: var(--dr-main-btn) !important; */
    display: block !important;
    box-shadow: none !important;
    color: #000 !important;
    /* padding-right: 25px; */
}
 .ask-Question-section button,
 .ask-Question-section button:hover,
 .ask-Question-section button:focus,
 .ask-Question-section button:active {
     /* background: var(--dr-main-btn); */
     background: white !important;
     /* padding: 20px; */
     width: 100%;
     margin: 0 auto;
     max-width: 350px;
     border-radius: 30px;
     font-size: 20px;
     font-weight: 600;
     line-height: 24px;
     text-align: center;
     font-size: 20px;
     font-weight: 700;
     line-height: 26.4px;
     padding: 10px 0;
     /* border-color: var(--dr-main-btn) !important; */
     display: block;
     box-shadow: none;
     color: #000;
     /* padding-right: 25px; */
    
 }

 .side-form {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
 }

 /* FQA section */
 .title span {
     color: #00A9DF;
 }

 .t-blue {
     color: var(--dr-main-heading);
 }

 .FQA-acccodian-section .accordion-item {
     border-left: none;
     border-right: none;
 }

 .FQA-acccodian-section .accordion-item:focus {
     border: none;
     outline: none;
 }

 .FQA-acccodian-section .accordion-button {
     font-size: 16px;
     font-weight: 700;
     line-height: 21px;
     text-align: left;
     color: #333;
     margin-bottom: 0px;
 }


.FQA-acccodian-section p{
    color: var(--dr-main-text-primary);
}

 .FQA-acccodian-section .accordion-button.custom-icon::after {
    display: flex;
    justify-content: center;
  
     content: "\002B";
     color: #333;
     width: 20px;
     height: 20px;
     border-radius: 100%;
     border: 2px solid #333;
     text-align: center;
     padding: 3px;
     line-height: 11px;
     transition: all 0.5s ease;
     background: none;
 }


 .FQA-acccodian-section .accordion-button.custom-icon[aria-expanded="true"]::after {
     content: "\2212";
     padding: 2px;
 }


 .FQA-acccodian-section .accordion-body .container-fluid {
     padding-left: 0px;
     padding-right: 0px;
 }
.accordion-button:not(.collapsed) 
{
    box-shadow: none !important;
}
.accordion-button:focus
{
    box-shadow: none !important;
}
 /* visit our nearlocation   */
 .visit-near-branch,
 .mt-remove {
     margin-top: -40px;
 }

 .accordian-content .accordion-item {
     border-left: none;
     border-right: none;
     border-top: none;
 }

 .accordion-header {
     color: var(--dr-main-heading) !important;
 }

 .visit-near-branch ul {
     margin-left: -35px !important;
 }

 .accordian-content .accordion-button {
     font-size: 16px;
     font-weight: 700;
     line-height: 21px;
     text-align: left;
     /* color: var(--dr-main-heading); */
     margin-bottom: 0px;
 }

 .visit-near-branch li {
     color: var(--dr-main-text-primary);
 }

 /* .accordian-content .accordion-body
{
    /* background-color:rgba(208, 208, 208, 0.308); */



 /* consultation -details layer */
 .consultationdetails {
     background: var(--dr-main-bg-primary);
     border-radius: 9px;
     /* border: 2px solid #565656; */
     padding: 10px;
 }

 .consultationTimings span,
 .consultationFee span {
     padding-right: 10px;
 }

 .consultationDetailsContent p {
     margin-bottom: 0px;
     font-size: 16px;
     font-weight: 500;
     line-height: 35.64px;
     letter-spacing: 0.02em;
     text-align: left;
     color: #333333;
 }

 .paymentTypeContent {
     margin-left: auto;
 }

 .paymentTypeContent span {
     padding-left: 10px;
 }

 /* 
footer */
.quick-link-heading h3{
    color: var(--dr-main-text-secondary);
}
 .h-decor {
    
    margin-top: -5px;
    height: 2px;
    width: 35px;
    background-color: var(--dr-main-heading);
}
.Quick-links-content a{
    font-size: 16px;
}
 footer {
     border-top: 1px solid #D3E1ED;
     padding-top: 20px;
 }
 footer ul
 {
    margin-bottom: 1rem !important;
 }

 .terms li {
     border: none;
 }

 .terms-p p, footer p {
     color: var(--paragraph-color) !important;
      font-weight: 400;
 }

 .terms li {
     /* border-left: 1px solid #00A9DF; */
     list-style: none;
 }
 .designed-by a
 
 {
color: #00A9DF;
 }

 .terms li a {
     font-size: 14px;
     font-weight: 400;
     line-height: 16.8px;
     text-align: left;
     color: #00A9DF;
     padding: 5px 10px;
     text-decoration: none;
 }
 footer a
 {
    text-decoration: none;
    
   font-size: 14px;

 } 

 .scrollToTop {
     position: fixed;
     bottom: 30px;
     right: 20px;
     z-index: 1999;
     display: none;
     width: 30px;
     height: 30px;
     border-radius: 100%;
     line-height: 30px;
     text-align: center;
     /* background: #007358; */
     background: var(--dr-main-btn);
 }

 .scrollToTop a {
     color: white;
 }

.accordion-body li{
list-style: none;
list-style-type:none;
}

.remove-under-line{
    text-decoration: none;
}

.location-card {
    background-color: #ffffff; /* same as accordion header */
    
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 1rem;
    text-align: center;
    cursor: default;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: background-color 0.3s;
}

.location-card:hover {
    background-color: #e9ecef;
}
.whatsapp-float {
    position: fixed;
    bottom: 7rem;
    left: 1.5rem;
    background: var(--dr-main-btn);
    color: white;
    width: max-content;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    z-index: 1050;
    padding: 20px;
    border-radius: 24px;
    gap: 0.5rem;
    text-decoration: none;
    transition: 0.3s;
}
.whatsapp-float:hover {
   
color: #00A9DF;
}
.whatsapp-float-alt {
    position: fixed;
    bottom: 2rem;
    left: 1.5rem;
    background-color: rgb(34, 197, 94);
    color: white;
    width: max-content;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
    z-index: 1050;
    padding: 20px;
    border-radius: 24px;
    gap: 0.5rem;
    text-decoration: none;
    transition: 0.3s;
}


.rating-grid {
        display: grid !important
;
        grid-template-columns: repeat(3, 1fr) !important;
        place-content: center !important;
        place-items: center !important;
    
}
.img-captcha {
    border-radius: 10px;
    border: 1px solid var(--dr-main-btn);   
}
/* responsiveness css start from here */
@media (max-width: 1599px) {
    /* for screen 1440px  */
    .laser-images{
        display: flex;
     }
     .LaserHairRemoveImages ul, .nav-wrapper ul{
        padding-left: 0rem !important;
     }
 }

 @media (max-width: 1440px) {
     /* for screen 1366px  */
     .banner-section .content-section
     {
        margin-top: 60px !important;
       
     }
 }

 @media (max-width: 1366px) {

     /* for screen 1200px  */
     .header-logo img {
         margin-left: -40px !important;
     }
    .bookAppointmentFormContent{
        padding:15px;
        width:100%;
    }
    city_select{
        font-size:12px;
    }
    .bookAppointmentFormContent input, .bookAppointmentFormContent textarea {
        font-size: 12px;
    }
    .ask-question-btn {
        height: 55px !important;
    }
 }

    }

    @media (max-width: 1120px) {
        .banner-section .content-section {
            margin-top: 50px !important;
        }

        .bookAppointmentFormContent {
            padding: 15px;
            width: 100%;
        }

        city_select {
            font-size: 10px;
        }

        .bookAppointmentFormContent input, .bookAppointmentFormContent textarea {
            font-size: 10px;
        }
        /* for screen 992px  */
        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 1050px !important;
        }
    }

    @media (max-width: 992px) {
        .banner-section .content-section {
            margin-top: 30px !important;
        }

        .bookAppointmentFormContent {
            max-width: 100%;
        }

        .talk-to-expert-content {
            flex-direction: column;
        }

        .content-section.p-5 {
            padding: 0px 0px 30px 0px !important;
        }


        .align-to-center {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .container {
            margin: 20 60px !important;
        }

        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 900px !important;
        }

        .navigation {
            display: flex;
            flex-wrap: wrap;
        }
    }

    @media (max-width: 769px) {

        /* for screen 576px  */
        .banner-section .content-section {
            margin-top: 60px !important;
        }

        .header-logo img {
            margin-left: 0px !important;
        }



        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 670px !important;
        }

        .imageLayer-TalkDoctor,
        .buttonLayer {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .imageLayer-TalkDoctor img {
                margin-top: -50px;
            }

        /* .textLayer {
         text-align: center !important;
     } */

        .talk-to-expert-content p {
            text-align: center;
        }

        .talk-to-expert.mt-5 {
            margin-top: 100px !important;
        }

        .ProfileImageLayer {
            height: 300px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 10px;
            background-color: transparent;
        }

            .ProfileImageLayer img {
                height: 100%;
                width: auto;
                object-fit: cover;
                display: block;
            }

        .margin-bottom-20 {
            margin-bottom: 20px;
        }

        .side-form {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1rem;
        }

        .Videoswiper {
            margin-left: 6px;
        }
    }




    @media (max-width: 576px) {
        body {
            overflow-x: hidden;
        }

        .banner-section .content-section {
            margin-top: 30px !important;
        }

        .header-logo img {
            margin-left: -38px !important;
        }

        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 520px !important;
        }

        .heading,
        .secondary-heading,
        .button-container {
            text-align: center;
        }

        .icon-svg {
            width: 20px;
            height: 20px;
            fill: #ffffff;
        }

        .header-button {
            border-radius: 18px;
            width: 150px;
            height: 33px;
            font-size: 12px;
        }

        .textLayer {
            text-align: center !important;
        }

        .header-button img {
            width: 20px;
            height: 20px;
            margin-bottom: 4px;
            transform: rotate(360deg);
        }
        .swiper-slide img {
            display: block;
            width: 100%;
            height:100%;
/*            height: 350px;*/
            object-fit: cover;
        }

        .header-logo img {
            max-height: 40px;
            max-width: 300px;
        }


        .signs-of-hairloss .row > * {
            padding-left: 0 !important;
        }

        .mr-remove-20 {
            margin-right: -10px;
        }

        .naviagtion-container {
            --bs-gutter-x: 0rem !important;
        }

        .navigation {
            margin-left: -50px !important;
        }

            .navigation a {
                font-size: smaller;
                padding: 0 10px !important;
            }


        .hairloss-treatment h2 {
            font-size: 28px;
            line-height: 35px;
        }

        .bookAppointmentFormContent h3 {
            font-size: 25px;
        }

        .laser-images {
        }

        .laser-images {
            display: grid !important;
            grid-template-columns: repeat(2,1fr);
            gap: 10px;
        }

        .causes-hair-loss p {
            text-align: left !important;
        }

        .hairloss-treatment li {
            width: 100% !important;
        }

        .results-header {
            display: flex;
            flex-direction: column;
            justify-content: left;
        }

        .textLayer p {
            font-size: 20px;
            text-align: center;
        }

        .text-muted.fs-5 {
            font-size: 12px !important;
        }

        .beforeAfterSwiper .swiper-slide {
            width: 100% !important;
        }

        .rating-experience h3.fs-1 {
            font-size: 20px !important;
        }

        .benifits .row {
        }

        .nav-arrows {
            position: relative;
            top: 20px;
            /* right: -350px; */
            display: flex;
            margin-top: -40px;
            margin-left: auto;
            display: none;
        }

        .rating-experience .container {
            margin: 0 !important;
        }

        .title {
            font-size: 1.8rem;
            line-height: 30px;
        }

        .mt-5.disclaimer {
            margin-top: 10px !important;
        }

        .rating-grid {
            display: grid !important;
            grid-template-columns: repeat(3, 1fr) !important;
            place-content: center;
            place-items: center;
        }
        /*.rating-grid > :last-child {
  grid-column: 1 / -1;*/ /* span across both columns */
        /*justify-self: center;*/ /* center horizontally */
        /*}*/


        .br {
            border-radius: 50px;
            height: 200px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .talk-to-expert-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .ProfileImageLayer {
            height: 300px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            border-radius: 10px;
            background-color: transparent;
        }

            .ProfileImageLayer img {
                height: 100%;
                width: auto;
                object-fit: cover;
                display: block;
            }

        .talk-to-expert.mt-5 {
            margin-top: 50px !important;
        }

        .imageLayer-TalkDoctor {
            display: flex;
            justify-content: center;
            align-items: center;
        }

            .imageLayer-TalkDoctor img {
                margin-top: -0px;
            }

        .talk-to-expert-content p {
            display: flex;
            font-size: 15px;
            text-align: center;
        }

        .bookAppointmentButton {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .ask-Question-section .title span {
            height: 30px;
            display: flex;
            flex-direction: row;
            gap: 5px;
            margin-left: 0px !important;
        }

        .rating-experience .row {
            margin-right: -60px;
        }

        .side-form {
            margin-top: 20px;
            display: grid;
            grid-template-columns: repeat(1, 1fr);
            gap: 1rem;
        }



        .ask-question-btn {
            height: auto;
        }

        .skin-hair-specialist .swiper-slide {
            width: 80%;
        }

        .bottomLayer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: column;
        }

        .drDetailsContent h2,
        .drDetailsContent p {
            text-align: center !important;
        }

        .icon-call-black {
            width: 20px;
            height: 20px;
            fill: var(--dr-main-btn);
        }

        .paymentTypeContent {
            margin-left: auto;
        }

        .FQA-acccodian-section .accordion-button.custom-icon[aria-expanded="true"]::after {
            content: "\2212";
        }

        .FQA-acccodian-section .accordion-button.custom-icon::after {
            padding: 2.5px;
            padding-left: 3px;
        }

        .pt-3.right-accordian {
            padding-top: 0 !important;
        }

        .consultationdetails {
            margin-left: 2px;
        }

        .talk-to-expert-content {
            margin-left: -9px;
        }

        .navigation {
            display: flex;
            flex-wrap: nowrap !important;
            justify-content: flex-start;
            gap: 20px;
            margin-top: -25px;
            padding-bottom: 10px;
            white-space: nowrap;
            animation: scrollNav 15s linear infinite;
        }

            .navigation li {
                flex: 0 0 auto;
                margin-bottom: 10px;
            }

                /* White background for each li (pills look) */
                .navigation li a {
                    background: #fff;
                    border: 1px solid #ddd;
                    padding: 8px 18px;
                    border-radius: 25px;
                    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
                }


        @keyframes scrollNav {
            0% {
                transform: translateX(100%);
            }

            100% {
                transform: translateX(-100%);
            }
        }

        .header-button.p-2 {
            padding: 0 !important;
            padding-right: 1rem !important;
            padding-left: 1rem !important;
        }
    }


    @media (max-width: 421px) {
        .capth-container {
            display: flex;
            flex-wrap: wrap;
        }

        .formLsayer {
            margin-left: 0px !important;
        }

        h2 {
            font-size: calc(1.325rem + .9vw) !important;
        }

        .call-now-bg {
            height: 40px !important;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 6px !important;
            margin: auto;
        }

        .b-w-text {
            font-weight: 700 !important;
            font-size: calc(1.325rem + .9vw) !important;
        }

        body {
            overflow-x: hidden;
        }

        .header-button {
            padding: 6px;
        }

        .heading,
        .secondary-heading,
        .full-width {
            width: 100%;
        }

        .banner-background {
            height: auto;
        }

        .button-container .header-button {
            margin-bottom: 10px;
            padding: 10px !important;
            height: auto;
        }

        .mr-remove-20 {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4px !important;
            height: auto;
        }

        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 370px !important;
        }

        /* .navigation-content ul{
      
        margin-left: -40px !important;
    } */
        .hairloss-treatment p {
            text-align: start !important;
        }

            .hairloss-treatment p.me-5 {
                margin-right: 0rem !important;
                margin-left: -5px;
            }

        .hairloss-treatment li {
            margin-left: -10px;
        }

        .service-card.d-flex {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .img-content {
            margin-top: -20px;
        }

        .benifits .swiper-slide {
            margin-top: -10px;
        }

        .rating-experience .row {
            margin-right: -50px !important;
        }

        .imageLayer-TalkDoctor .buttonLayer {
            margin-bottom: 10px;
        }

        .visit-near-branch, .mt-remove {
            margin-top: -50px;
        }
    }

    @media (max-width: 370px) {

        .container,
        .container-lg,
        .container-md,
        .container-sm {
            max-width: 340px !important;
        }
        .swiper-slide img {
            width: 100%;
            max-width: 100%;
            height: auto;
            aspect-ratio: 1 / 1; 
            object-fit: cover;
            border-radius: 10px;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }
        .Videoswiper {
            margin-left: 6px !important;
        }

        .mr-remove-20 {
            /* margin-right: -12px !important; */
        }

        .rating-experience .row {
            margin-right: -17px !important;
        }
    }

    #txttellus::placeholder {
        font-weight: bold;
    }

    .treatment-head {
        font-size: 1.3rem;
        margin-bottom: 0.8rem;
    }

    .treatment-card-btn {
        display: inline-block;
        background: #00b0ff;
        color: white;
        padding: 6px 14px;
        border-radius: 8px;
        width: 100%;
        font-size: 0.9rem;
        border: unset;
        text-decoration: none;
        transition: 0.3s;
    }

        .treatment-card-btn:hover {
            background: white;
            color: #00b0ff;
            border: 1px solid #00b0ff;
        }
.treatment-card .btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 6px;
}
/* Responsive tweaks */

@media (max-width: 768px) {
    .treatment-section-heading {
        font-size: 1.5rem;
    }

    .treatment-head {
        font-size: 1rem;
    }
}

/* Ensure slides stretch full width on mobile */
@media (max-width: 480px) {
    .swiper-slide {
        width: 100% !important;
    }

    .treatment-card {
        max-width: 100% !important; /* keep some padding */
        object-fit:cover;
    }
}


    .hair-care-section {
        background: linear-gradient(135deg, #8ee7f1, #00d2c4);
        padding: 3rem 0;
        color: #000;
    }

    .section-title {
        font-size: 2.5rem;
        font-weight: 800;
        text-align: center;
        color: #fff;
    }

    .section-subtitle {
        text-align: center;
        color: #222;
        font-size: 18px;
        margin-bottom: 50px;
    }

    .hair-slide {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
        transition: 0.4s ease;
    }

    /* IMAGE */
    .hair-img {
        flex: 1 1 50%;
    }

        .hair-img img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            display: block;
            border-radius: 20px 0 0 20px;
        }

    /* CONTENT */
    .hair-content {
        flex: 1 1 50%;
        padding: 40px;
        box-sizing: border-box;
    }

        .hair-content h3 {
            color: #0a0064;
            font-size: 28px;
            margin-bottom: 15px;
            text-align: left;
            position: relative;
        }

            .hair-content h3::after {
                content: "";
                width: 50px;
                height: 4px;
                background: #00d2c4;
                display: block;
                margin-top: 8px;
            }

        .hair-content p {
            color: #333;
            text-align: left;
            line-height: 1.6;
            font-size: 16px;
        }

    /* 🔥 MOBILE FIX */
    @media (max-width: 768px) {
        .hair-slide {
            flex-direction: column;
        }

        .hair-img {
            width: 100%;
        }

            .hair-img img {
                border-radius: 20px 20px 0 0;
                height: 300px;
                width: 100%;
                object-fit: cover;
            }

        .hair-content {
            padding: 24px;
            text-align: center;
        }

            .hair-content h3,
            .hair-content p {
                text-align: center;
            }

                .hair-content h3::after {
                    margin: 8px auto 0;
                }
    }


    .hair-loss-section {
        padding: 3rem 0;
        background: #fafafa;
    }

        .hair-loss-section h2 {
            text-align: center;
            color: #222;
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .hair-loss-section .sub {
            text-align: center;
            color: #555;
            margin-bottom: 40px;
        }

        .hair-loss-section .card {
            flex: 1 1 400px;
            background: #fff;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            border: 1px solid #eee;
        }

            .hair-loss-section .card h3 {
                font-size: 20px;
                margin-bottom: 15px;
                font-weight: 600;
            }

            .hair-loss-section .card ul {
                list-style: none;
                padding: 0;
                margin: 0;
                text-align: left;
            }

                .hair-loss-section .card ul li {
                    margin-bottom: 10px;
                    padding-left: 25px;
                    position: relative;
                    color: #444;
                    line-height: 1.5;
                }

        /* Causes (red X bullets) */
        .hair-loss-section .red-card ul li::before {
            content: "✖";
            color: #e74c3c;
            position: absolute;
            left: 0;
        }

        /* Signs (green tick bullets) */
        .hair-loss-section .green-card ul li::before {
            content: "✔";
            color: #27ae60;
            position: absolute;
            left: 0;
        }

        /* Color difference in headings */
        .hair-loss-section .red-card h3 {
            color: #e74c3c;
        }

        .hair-loss-section .green-card h3 {
            color: #27ae60;
        }

    /* Tip box style */
    .tip-box {
        margin-top: 15px;
        font-size: 14px;
        background: #f9f9f9;
        padding: 10px 15px;
        border-radius: 8px;
        border-left: 4px solid;
    }

    .red-tip {
        border-color: #e74c3c;
        color: #c0392b;
    }

    .green-tip {
        border-color: #27ae60;
        color: #1e8449;
    }

    .icon-wrap {
        display: flex;
        justify-content: center;
        margin-bottom: 1.2rem;
    }

        .icon-wrap .check-icon {
            width: 4rem;
            height: 4rem;
            border: 3px solid #0084bd;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .check-icon span {
        font-size: 3rem;
        color: var(--gradient-blue);
    }

    .thank_you h1 {
        font-size: 3rem;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .subtext {
        font-size: 1.2rem;
        color: #666;
        margin-bottom: 40px;
    }
    .header-button {
    color: #ffffff !important;
}

.header-button:hover {
    color: #ffffff !important;
}
@media (max-width: 768px) {

    .header-container {
        height: 100px; /* slightly tighter for mobile */
    }

    .header-logo img {
        max-height: 60px; /* increase logo height */
        width: auto;
    }

    header nav.container-fluid {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-left: 15px !important;
    }
}

.enquiry-popup {
    border-radius: 12px;
}

    .enquiry-popup .form-label {
        font-weight: 500;
    }

    .enquiry-popup .form-control,
    .enquiry-popup .form-select {
        border-radius: 6px;
        padding: 10px 12px;
    }

.modal-footer .btn {
    padding: 12px;
    font-size: 16px;
    font-weight: 600;
}
/* Wrapper */
.doctor-call-wrapper {
    position: relative;
    margin-left: 20px;
}

/* Button */
.doctor-call-btn {
    background: #fff;
    border: 2px solid #2c2f7c;
    color: #2c2f7c;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}



    .doctor-call-close:hover {
        background: #1e205a;
    }
.header-container,
.header-container nav,
.header-container .container-fluid {
    overflow: visible !important;
}


.bookAppointmentFormContent select.city_select {
    width: 100% !important;
    padding: 12px 45px 12px 16px !important;
    border: none !important;
    background-color: #FFFFFF !important;
    background-image: url("Images/Dr-youth/down-arrow.png") !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
    background-size: 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 21.6px !important;
    color: #000000 !important;
    border-radius: 13.11px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer;
}

.bookAppointmentFormContent select.city_select {
    width: 100%;
    height: 52px;
    padding: 12px 45px 12px 16px; /* space for arrow */
    border: none;
    border-radius: 14px;
    background-color: #ffffff;
    /* custom arrow */
    background-image: url("Images/Dr-youth/down-arrow.png");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #005868;
    cursor: pointer;
    /* remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.bookAppointmentFormContent select,
.bookAppointmentFormContent option {
    font-family: inherit !important;
}

    .bookAppointmentFormContent select:focus {
        outline: none !important;
        box-shadow: none !important;
    }
    /* FORCE dropdown text color */
    .bookAppointmentFormContent select.city_select {
        color: #005868 !important;
    }

        /* FORCE dropdown option color */
        .bookAppointmentFormContent select.city_select option {
            color: #005868 !important;
        }
    /* Default placeholder look */
    .bookAppointmentFormContent select.city_select {
        color: #005868;
    }

        /* When user selects real value */
        .bookAppointmentFormContent select.city_select:not([value=""]) {
            color: #005868;
        }

        /* Style placeholder option */
        .bookAppointmentFormContent select.city_select option[value=""] {
            color: #005868;
        }

@media (max-width: 1120px) {
    .bookAppointmentFormContent input, .bookAppointmentFormContent textarea {
        font-size: 14px;
    }
}

/* IMPORTANT: allow dropdown to overflow header */
.header-container,
.header-container nav,
.header-container .container-fluid {
    overflow: visible !important;
}

/* Wrapper */
.doctor-call-wrapper {
    position: relative;
    margin-left: 20px;
    z-index: 99999;
}

/* Button */
.doctor-call-btn {
    background: #fff;
    border: 2px solid #2c2f7c;
    color: #2c2f7c;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
}

/* Dropdown panel (hidden by default) */
.doctor-call-panel {
    position: absolute;
    top: 120%;
    right: 0;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    padding: 12px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 9999;
}

/* SHOW ON HOVER */
.doctor-call-wrapper:hover .doctor-call-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Doctor card */
.doctor-call-card {
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: #f6f7ff;
}

    .doctor-call-card:last-child {
        margin-bottom: 0;
    }

.doctor-call-name {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 4px;
}

.doctor-call-phone {
    color: #2c2f7c;
    font-weight: 600;
    text-decoration: none;
}

.doctor-call-card:hover {
    background: #e9ebff;
}


/* Hover buffer */
.doctor-call-wrapper::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 20px;
}
/* ============================= */
/* MOBILE HEADER FIX */
/* ============================= */

@media (max-width: 991px) {

    .header-container {
        padding: 10px 15px;
    }

        .header-container nav .d-flex {
            align-items: center;
            justify-content: space-between;
        }

    /* Logo smaller */
    .header-logo img {
        height: 40px;
        width: auto;
    }

    /* Call button smaller */
    .doctor-call-btn {
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 8px;
    }

        /* Hide Call text on mobile */
        .doctor-call-btn .call-text,
        .doctor-call-btn .arrow {
            display: none;
        }

        /* Make it just icon */
        .doctor-call-btn .call-icon {
            font-size: 18px;
        }

    /* Adjust wrapper */
    .doctor-call-wrapper {
        margin-left: 10px;
    }

    /* Make menu toggle visible */
    .menu-toggle {
        display: block;
        font-size: 22px;
        background: none;
        border: none;
    }

    /* Hide desktop menu */
    .header-menu {
        display: none;
        position: absolute;
        top: 70px;
        left: 0;
        width: 80%;
        background: #fff;
        padding: 20px;
        z-index: 999;
    }

        .header-menu.active {
            display: block;
            height: 100vh;
        }

    .nav-list {
        flex-direction: column;
        gap: 15px;
    }
}
@media (max-width: 991px) {

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap; /* IMPORTANT */
    }

    .header-logo {
        flex: 0 0 auto;
    }

    .header-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .menu-toggle {
        font-size: 22px;
        background: none;
        border: none;
    }

    .doctor-call-btn {
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 8px;
    }
}

/* ============================= */
/* MOBILE HEADER FIX */
/* ============================= */

@media (max-width: 991px) {

    .header-container {
        padding: 10px 15px;
    }

        .header-container nav .d-flex {
            align-items: center;
            justify-content: space-between;
        }

    /* Logo smaller */
    .header-logo img {
        height: 60px;
        width: auto;
    }

    /* Call button smaller */
    .doctor-call-btn {
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 8px;
    }

        /* Hide Call text on mobile */
        .doctor-call-btn .call-text,
        .doctor-call-btn .arrow {
            display: none;
        }

        /* Make it just icon */
        .doctor-call-btn .call-icon {
            font-size: 18px;
        }

    /* Adjust wrapper */
    .doctor-call-wrapper {
        margin-left: 10px;
    }

    /* Make menu toggle visible */
    .menu-toggle {
        font-size: 22px;
        background: none;
        border: none;
    }

    /* Hide desktop menu */
    .header-menu {
        
        position: absolute;
        top: 70px;
        left: 0;
        width: 80%;
        background: #fff;
        padding: 20px;
        z-index: 999;
    }

        

    .nav-list {
        flex-direction: column;
        gap: 15px;
    }
}

@media (max-width: 991px) {

    .header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap; /* IMPORTANT */
    }

    .header-logo {
        flex: 0 0 auto;
    }

    .header-actions {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .menu-toggle {
        font-size: 22px;
        background: none;
        border: none;
    }

    .doctor-call-btn {
        padding: 6px 12px;
        font-size: 14px;
        border-radius: 8px;
    }
}

@media (max-width: 991px) {
    .header-menu {
        position: absolute;
        top: 70px;
        left: 0;
        width: 80%
    }
}

.whatsapp-container {
    position: fixed;
}

.whatsapp-container {
    position: fixed;
    bottom: 20px;
    left: 35px;
    z-index: 9999;
}

.whatsapp-wrapper {
    position: relative;
}

.whatsapp-icon {
    width: 45px;
    height: 45px;
    cursor: pointer;
}

/* Popup Box */
.whatsapp-popup {
    position: absolute;
    bottom: 65px;
    left: 0;
    width: 220px;
    background: #f3f3f3;
    padding: 8px;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: 0.3s ease;
}


.whatsapp-wrapper:hover .whatsapp-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.whatsapp-item {
    display: block;
    background: #e6e7ee;
    padding: 8px;
    border-radius: 6px;
    margin-bottom: 8px;
    text-decoration: none;
}

    .whatsapp-item strong {
        display: block;
        font-size: 16px;
        color: #222;
        margin-bottom: 3px;
    }

    .whatsapp-item span {
        font-size: 16px;
        color: #2e3a8c;
    }

    .whatsapp-item:hover {
        background: #dcdde8;
    }
button.doctor-call-btn {
    background: #febe16d1!important;
    border: none !important;
    color: black !important;
}
.fa-phone:before {
    margin-right: 10px!important;
}


@media (max-width: 1199px) {
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%!important;
        /* height: 350px; */
        object-fit: cover;
    }
}

@media (max-width: 991px) {
    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100% !important;
        /* height: 350px; */
        object-fit: cover;
    }
}

@media (max-width: 768px) {
    .swiper-slide img {
        display: block;
        width: 100%!important;
        height: 100%!important;
        /* height: 350px; */
        object-fit: cover!important;
    }
}