/*====================================================
        Doctor Hair & Skin Clinic
====================================================*/



/*==============================
RESET
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family: "Raleway", sans-serif;
    background:#fff;
    color:#222;
    overflow-x:hidden;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;
    margin:0;
    padding:0;

}

.container-fluid{

    max-width:1400px;

}

/*==============================
HEADER
==============================*/

.header-area{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    background:#fff;

    z-index:99999;

    transition:.35s;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.header-wrapper{

    height:95px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}

/*==============================
LOGO
==============================*/

.logo{

    display:flex;
    align-items:center;

}

.logo img{

    width:230px;
    height:97px;
    object-fit:contain;

}

/*==============================
DESKTOP MENU
==============================*/

.main-menu{

    flex:1;
    display:flex;
    justify-content:center;

}

.main-menu>ul{

    display:flex;
    align-items:center;
    gap:20px;

}

.main-menu>ul>li{

    position:relative;

}

.main-menu>ul>li>a{

    display:flex;

    align-items:center;

    gap:8px;

    font-size:17px;

    font-weight:600;

    color:#1f2937;

    padding:36px 8px;

    transition:.3s;

    position:relative;

}

.main-menu>ul>li>a i{

    font-size:12px;

    transition:.3s;

}

.main-menu>ul>li>a:hover{

    color:#00a7a5;

}

.main-menu>ul>li:hover>a{

    color:#00a7a5;

}

.main-menu>ul>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:24px;

    width:0;

    height:3px;

    background:#00a7a5;

    border-radius:50px;

    transition:.35s;

}

.main-menu>ul>li:hover>a::after{

    width:100%;

}

.main-menu>ul>li:hover>a i{

    transform:rotate(180deg);

}

/*==============================
RIGHT SIDE
==============================*/

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

}

/*==============================
BOOK BUTTON
==============================*/

.appointment-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    background:#00a7a5;

    color:#fff;

    font-size:16px;

    font-weight:600;

    padding:15px 34px;

    border-radius:60px;

    transition:.35s;

}

.appointment-btn:hover{

    background:#083b52;

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 20px 40px rgba(0,0,0,.15);

}

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

.mobile-toggle{

    width:50px;

    height:50px;

    display:none;

    justify-content:center;

    align-items:center;

    background:#00a7a5;

    color:#fff;

    font-size:22px;

    border-radius:12px;

    cursor:pointer;

}

/*==============================
STICKY HEADER
==============================*/

.header-area.sticky{

    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.header-area.sticky .header-wrapper{

    height:80px;

}

.header-area.sticky .logo img{

    width:200px;

}

.header-area.sticky .main-menu>ul>li>a{

    padding:28px 8px;

}

/*====================================================
            PROFESSIONAL MEGA MENU
====================================================*/

.mega-parent{
    position:relative;
}

/* Mega Menu Box */

.mega-menu{

    position:absolute;

    top:100%;
    left:290%;

    transform:translateX(-50%) translateY(20px);

    width:1320px;
    max-width:96vw;

    background:#ffffff;

    border-radius:0 0 18px 18px;

    padding:45px;

    box-shadow:
        0 25px 70px rgba(0,0,0,.12);

    border-top:4px solid #00a7a5;

    opacity:0;
    visibility:hidden;

    transition:.35s ease;

    z-index:9999;

}

/* Hover */

.mega-parent:hover .mega-menu{

    opacity:1;
    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/*=========================
GRID
==========================*/

.mega-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

}
/* ==========================
   3 COLUMN MEGA MENU
========================== */

.mega-menu-3{
    width: 1000px;
    padding: 30px;
    margin-left: -100px;
}

.mega-grid-3{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
}

.mega-grid-3 .mega-column{
    min-width: 0;
}

.mega-grid-3 .mega-column h4{
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 15px;
    padding-bottom: 10px;
  
}

.mega-grid-3 .mega-column ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.mega-grid-3 .mega-column ul li{
    margin-bottom: 8px;
}

.mega-grid-3 .mega-column ul li a{
     display:block;

    color:#555;

    font-size:13px;

    font-weight:500;

    transition:.3s;

    position:relative;

    padding-left:0;
}

.mega-grid-3 .mega-column ul li a:hover{
    color: #0b6e4f;
    padding-left: 6px;
}

@media(max-width:991px){

    .mega-menu-3{
        width:100%;
        padding:20px;
    }

    .mega-grid-3{
        grid-template-columns:1fr;
        gap:20px;
    }

}

/*=========================
COLUMN
==========================*/

.mega-column{

    width:100%;

}

/* Heading */

.mega-column h4{

    font-size:17px;

    font-weight:600;

    color:#111827;

    margin-bottom:8px;

    display:flex;

    align-items:center;

    gap:12px;

    position:relative;

    padding-bottom:15px;

}

/* Underline */

.mega-column h4::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:55px;

    height:3px;

    background:#00a7a5;

}

/* Icons */

.mega-column h4 i{

    color:#00a7a5;

    font-size:26px;

}

/*=========================
LIST
==========================*/

.mega-column ul{

    margin:0;
    padding:0;

}

.mega-column ul li{

    margin-bottom:4px;

}

.mega-column ul li:last-child{

    margin-bottom:0;

}

.mega-column ul li a{

    display:block;

    color:#555;

    font-size:13px;

    font-weight:500;

    transition:.3s;

    position:relative;

    padding-left:0;

}

/* Arrow */



/* Hover */

.mega-column ul li:hover a{

    color:#00a7a5;

    padding-left:22px;

}

.mega-column ul li:hover a::before{

    left:0;

    opacity:1;

}

/*====================================================
            NORMAL DROPDOWN
====================================================*/
/*==========================
      Hair & Skin Mega Menu
===========================*/

.hs-mega-parent{
    position:relative;
}

.hs-mega-parent>a{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.hs-mega-parent>a i{
    font-size:12px;
    transition:.35s;
}

.hs-mega-parent:hover>a i{
    transform:rotate(180deg);
}

/* Dropdown */

.hs-mega-dropdown{

    position:absolute;

    left:100%;

    top:100%;

    transform:translateX(-50%) translateY(15px);

    width:920px;

    background:#fff;

    border-top:4px solid #0fa79c;

    box-shadow:0 18px 45px rgba(0,0,0,.10);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.hs-mega-parent:hover .hs-mega-dropdown{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

/* Grid */

.hs-mega-wrapper{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    padding:42px;

}

/* Column */

.hs-column h3{

    font-size:18px;

    color:#1b2232;

    font-weight:600;

    margin-bottom:5px;

    position:relative;

    padding-bottom:16px;

}

.hs-column h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:82px;

    height:4px;

    background:#0fa79c;

}

/* List */

.hs-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.hs-column ul li{

    margin-bottom:-3px;

}

.hs-column ul li:last-child{

    margin-bottom:0;

}

.hs-column ul li a{

    display:block;

    text-decoration:none;

    color:#5d5d5d;

    font-size:13px;

    font-weight:500;

    line-height:1.65;

    transition:.25s;

}

.hs-column ul li a:hover{

    color:#0fa79c;

    padding-left:8px;

}

/* Responsive */

@media(max-width:1200px){

.hs-mega-dropdown{

    width:95%;

}

}

@media(max-width:991px){

.hs-mega-dropdown{

    position:static;

    width:100%;

    transform:none;

    opacity:1;

    visibility:visible;

    box-shadow:none;

    border-top:none;

}

.hs-mega-wrapper{

    grid-template-columns:1fr;

    gap:30px;

    padding:25px;

}

.hs-column h3{

    font-size:19px;

}

.hs-column ul li a{

    font-size:16px;

}

}
.has-dropdown{

    position:relative;

}

.submenu{

    position:absolute;

    left:0;

    top:100%;

    width:280px;

    background:#fff;

    border-radius:15px;

    padding:15px 0;

    box-shadow:0 18px 50px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    z-index:999;

}

.has-dropdown:hover .submenu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.submenu li{

    position:relative;

}

.submenu li a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 25px;

    color:#444;

    font-size:15px;

    transition:.3s;

}

.submenu li a:hover{

    background:#f5fbfb;

    color:#00a7a5;

    padding-left:35px;

}

/*====================================================
        RESPONSIVE
====================================================*/

@media(max-width:1300px){

    .mega-menu{

        width:95vw;

    }

    .mega-grid{

        gap:5px;

    }

}

@media(max-width:1100px){

    .mega-grid{

        grid-template-columns:repeat(2,1fr);

    }

}

@media(max-width:991px){

    .mega-menu{

        display:none;

    }

}
/*====================================================
                MOBILE MENU
====================================================*/

.mobile-menu{

    position:fixed;

    top:0;
    left:-100%;

    width:340px;
    max-width:90%;

    height:100vh;

    background:#fff;

    z-index:99999;

    overflow-y:auto;

    transition:.4s ease;

    box-shadow:0 20px 60px rgba(0,0,0,.18);

}

.mobile-menu.active{

    left:0;

}

.mobile-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:20px;

    border-bottom:1px solid #ececec;

}

.mobile-header img{

    width:180px;

}

.close-menu{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#00a7a5;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    font-size:18px;

}

.mobile-nav{

    padding:15px 20px;

}

.mobile-nav>li{

    border-bottom:1px solid #f1f1f1;

}

.mobile-nav>li>a,
.mobile-nav>li>span{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    font-size:16px;

    font-weight:600;

    color:#222;

    cursor:pointer;

    transition:.3s;

}

.mobile-nav>li>a:hover,
.mobile-nav>li>span:hover{

    color:#00a7a5;

}

/* Mobile Dropdown */

.mobile-submenu{
    display:none;
    padding-left:15px;
    padding-bottom:10px;
}

.mobile-dropdown.active > .mobile-submenu{
    display:block;
}

.mobile-menu{
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
}

.mobile-nav{
    padding-bottom:120px;
}

.mobile-dropdown{
    width:100%;
}

.mobile-dropdown span{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
}

.mobile-dropdown.active > span i{
    transform:rotate(180deg);
}

.mobile-dropdown ul li{

    border:none;

}

.mobile-dropdown ul li a{

    display:block;

    padding:10px 0;

    color:#666;

    font-size:15px;

    transition:.3s;

}

.mobile-dropdown ul li a:hover{

    color:#00a7a5;

    padding-left:10px;

}

.mobile-dropdown span i{

    transition:.3s;

}

.mobile-dropdown.active span i{

    transform:rotate(180deg);

}

/*====================================================
                    OVERLAY
====================================================*/

.overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.overlay.active{

    opacity:1;

    visibility:visible;

}

/*====================================================
                    HERO SECTION
====================================================*/

.hero-section{

    margin-top:95px;

    min-height:720px;

    display:flex;

    align-items:center;

    background:linear-gradient(135deg,#0c7289,#1db7b6);

    color:#fff;

    overflow:hidden;

    position:relative;

}

.hero-section::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-180px;

    top:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

}

.hero-content{

    position:relative;

    z-index:2;

}

.hero-subtitle{

    display:inline-block;

    font-size:18px;

    font-weight:500;

    margin-bottom:18px;

}

.hero-content h1{

    font-size:62px;

    line-height:1.15;

    font-weight:800;

    margin-bottom:25px;

}

.hero-content p{

    font-size:21px;

    line-height:1.8;

    max-width:620px;

    opacity:.95;

    margin-bottom:35px;

}

.hero-btns{

    display:flex;

    align-items:center;

    gap:18px;

}

.hero-image{

    position:relative;

    z-index:2;

}

.hero-image img{

    max-width:100%;

    animation:floatImage 4s ease-in-out infinite;

}

/* Floating Animation */

@keyframes floatImage{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0);

    }

}

/* Fade Animation */

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

.hero-content{

    animation:fadeUp .8s ease;

}

/*====================================================
                RESPONSIVE
====================================================*/

@media(max-width:1200px){

    .hero-content h1{

        font-size:52px;

    }

}

@media(max-width:991px){

    .main-menu{

        display:none;

    }

    .mobile-toggle{

        display:flex;

    }

    .header-right .appointment-btn{

        display:none;

    }

    .header-wrapper{

        height:80px;

    }

    .logo img{

        width:190px;
        height:75px;

    }

    .hero-section{

        margin-top:80px;

        text-align:center;

        padding:80px 0;

        min-height:auto;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        margin:auto;

        margin-bottom:30px;

        font-size:18px;

    }

    .hero-btns{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-image{

        margin-top:50px;

    }

}

@media(max-width:767px){

    .hero-content h1{

        font-size:34px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-btns{

        flex-direction:column;

    }

    .hero-btns a{

        width:100%;

        text-align:center;

    }

    .mobile-menu{

        width:100%;

        max-width:100%;

    }

}

@media(max-width:575px){

    .logo img{

        width:165px;

    }

    .hero-content h1{

        font-size:28px;

        line-height:1.3;

    }

    .hero-subtitle{

        font-size:15px;

    }

    .hero-content p{

        font-size:15px;

    }

}
/* slider section */
.slider-container { position: relative; height: 100vh; width: 100%; overflow: hidden;margin-top: 97px; }
.slide { 
    position: absolute; width: 100%; height: 100%; 
    background-size: cover; background-position: center; 
    display: none; align-items: center; 
    /* Smooth transition for slide swap */
    transition: opacity 1s ease-in-out; 
}
.slide.active { display: flex; opacity: 1; }

.content { margin-left: 3%; max-width: 500px; z-index: 2;margin-top: 47px; }

/* Heading & Text: Fade In Left */
.slide.active h1{
    font-size: 40px;
    color:#244246;
    animation: fadeInLeft 1s ease forwards;
   
}
.slide.active p{
    color:#62432f;
    font-size: 22px;
    animation: fadeInLeft 1s ease forwards;
   
}
/* Button: Fade In Up */
.slide.active .btn-main {
    animation: fadeInUp 1s ease forwards;
    opacity: 0;
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Base styles for text */

.btn-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:16px 38px;
    font-size:16px;
    font-weight:700;
    letter-spacing:.5px;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(135deg,#0A4F53,#58C3C2);
    border:2px solid #58C3C2;
    border-radius:50px;
    box-shadow:0 10px 25px rgba(10,79,83,.25);
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
    z-index:1;
}

.btn-main::before{
    content:'';
    position:absolute;
    top:0;
    left:-100%;
    width:100%;
    height:100%;
    background:linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transition:.6s;
    z-index:-1;
}

.btn-main:hover::before{
    left:100%;
}

.btn-main:hover{
    background:linear-gradient(135deg,#58C3C2,#0A4F53);
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(10,79,83,.35);
    color:#fff;
}

.btn-main:active{
    transform:scale(.97);
}

.btn-main i{
    margin-left:10px;
    transition:.3s;
}

.btn-main:hover i{
    transform:translateX(6px);
}
/* Pagination */
.pagination { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: center; gap: 15px; }
.dot { height: 12px; width: 12px; background: transparent; border: 2px solid #fff; border-radius: 50%; cursor: pointer; }
.dot.active { background: #00acc1; border-color: #00acc1; }
@media (max-width: 767px){
    .slide.active h1{
        font-size: 20px;
         margin-top: 10px;
        line-height: 1.3;
    }

    .slide.active p{
        font-size: 14px;
        line-height: 1.6;
       
    }
    .slider-container { position: relative; height: 35vh; width: 100%; overflow: hidden; background: #000;margin-top: 27px; }
    .btn-main{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 10px;
    font-size:10px;
    font-weight:500;
    letter-spacing:.5px;
    color:#fff;
    text-decoration:none;
    background:linear-gradient(135deg,#0A4F53,#58C3C2);
    border:2px solid #58C3C2;
    border-radius:50px;
    box-shadow:0 10px 25px rgba(10,79,83,.25);
    transition:all .4s ease;
    position:relative;
    overflow:hidden;
    z-index:1;
}
}
/* about css */
.about-section{

background:#fff;

overflow:hidden;

}

.about-images{

position:relative;

height:650px;

}
/* Initial State */
.img-main,
.img-small{
    opacity:0;
    transform:translateX(-80px);
    transition:all 1s ease;
}

/* Active */
.img-main.show,
.img-small.show{
    opacity:1;
    transform:translateX(0);
}

/* Delay for second image */
.img-small{
    transition-delay:.4s;
}

.img-main{

width:88%;

border-radius:18px;

overflow:hidden;

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.img-main img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.img-main:hover img{

transform:scale(1.05);

}

.img-small{

position:absolute;

right:0;

bottom:30px;

width:52%;

border-radius:18px;

overflow:hidden;

box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.img-small img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.img-small:hover img{

transform:scale(1.05);

}

.floating-circle{

position:absolute;

width:160px;

height:160px;

background:#d8f3ef;

border-radius:50%;

right:-40px;

top:-30px;

z-index:-1;

animation:float 6s infinite ease-in-out;

}

.floating-dot{

position:absolute;

width:35px;

height:35px;

background:#46b6b0;

border-radius:50%;

left:-15px;

bottom:60px;

animation:float 5s infinite;

}

.about-content h1{

font-size:30px;


font-weight:700;

line-height:1.2;

margin:15px 0;

color:#1b686b;

}

.section-tag{

color:#3baea6;

font-weight:600;

font-size:18px;

position:relative;

padding-left:55px;

}
/* 
.section-tag::before{

content:"";

position:absolute;

left:0;

top:50%;

width:40px;

height:2px;

background:#3baea6;

} */

.tagline{

color:#3baea6;

margin-bottom:20px;

font-weight:600;

}

.about-content p{
text-align: justify;
font-size:17px;

line-height:23px;

color:#666;

}

.about-box{

background:#f7fbfb;

padding:18px;

border-radius:12px;

text-align:center;

font-weight:600;

transition:.4s;

border:1px solid #e8f3f3;

}

.about-box i{

display:block;

font-size:28px;

margin-bottom:12px;

color:#3baea6;

}

.about-box:hover{

transform:translateY(-8px);

background:#3baea6;

color:#fff;

}

.about-box:hover i{

color:#fff;

}

.about-btn{

display:inline-block;

margin-top:25px;

padding:15px 38px;

background:linear-gradient(135deg,#0A4F53,#58C3C2);

color:#fff;

text-decoration:none;

border-radius:40px;

font-weight:600;

transition:.4s;

}

.about-btn:hover{

transform:translateY(-4px);

color:#fff;

box-shadow:0 15px 30px rgba(0,0,0,.2);

}

@keyframes float{

50%{

transform:translateY(-15px);

}

}

@media(max-width:991px){

.about-images{

height:auto;

margin-bottom:50px;

}

.img-main{

width:100%;

}

.img-small{

position:relative;

width:70%;

margin:-70px auto 0;

left:0;

right:0;

bottom:0;

}

.about-content h1{

font-size:36px;

}

}

@media(max-width:576px){

.about-content h1{

font-size:25px;

}

.about-content p{

font-size:15px;

line-height:28px;

}

.img-small{

width:80%;

margin-top:-50px;

}

.about-box{

padding:15px;

font-size:14px;

}

.about-btn{

width:100%;

text-align:center;

}

}
/*  */

/* imgs css */
.section-title h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #1b686b;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 15px;
 
    text-transform: capitalize;
    letter-spacing: -0.5px;
}

/* Decorative underline */
.section-title h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: #00cec9; /* Yahan apne brand ka color daalein */
    border-radius: 2px;
}
.section-title p{
    font-size: 35px;
    font-weight: 600;
}
.service-section {
    padding: 5px 0;
    width: 100%; /* Yeh container ko screen ki width ke hisaab se set karega */
    background: #fff;
    overflow: hidden;
}
.service-slider{
    position:relative;
    padding:0 60px;
}

.serviceSwiper{
    overflow:hidden;
}

.service-card{

    background:#fff;

    border-radius:220px 220px 35px 35px;

    overflow:hidden;

    border:3px solid #00a7a5
    
    ;

    transition:.4s;

    text-align:center;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.service-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 50px rgba(0,0,0,.15);

}


.service-img{

    height:320px;

    overflow:hidden;

    position:relative;

    background:#fce1ea;

}

.service-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.service-card:hover img{

    transform:scale(1.08);

}

.service-img:after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    height:140px;

    background:linear-gradient(to top,#fff,transparent);

}

.service-content{

    padding:28px 15px 35px;

}

.service-content h3{

    font-size:20px;

    color:#222;

    margin:0;

}

/* arrows */

.service-prev,
.service-next{

    position:absolute;

    top:45%;

    width:55px;

    height:55px;

    background:#008b8b;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:10;

    transition:.3s;

    border-radius:50%;

}

.service-prev{

    left:0;

}

.service-next{

    right:0;

}

.service-prev:hover,
.service-next:hover{

    background:#00a7a5;

    transform:scale(1.08);

}

/* active card */

.swiper-slide-active .service-card{

    transform:scale(1.02);

}

.swiper-slide{

    padding:5px;

}

/************** Mobile **************/

@media(max-width:991px){

.service-slider{

padding:0;

}

.service-prev,
.service-next{

display:none;

}

.service-img{

height:350px;

}

}

@media(max-width:767px){

.service-section{

padding:10px 0;

}

.service-img{

height:300px;

}

.service-card{

border-radius:170px 170px 30px 30px;

}

.service-content{

padding:22px;

}

.service-content h3{

font-size:22px;

}

}
/* floating btns css */
/* Container for Floating Buttons */
.social-fab-container { 
    position: fixed; 
    bottom: 30px; 
    right: 30px; 
    z-index: 1000; 
    display: flex; 
    flex-direction: column-reverse; /* Icons niche se upar stack honge */
    align-items: center;
    gap: 15px;
}

.fab-main { 
    width: 60px; height: 60px; 
    background: #244246; /* Aapka Heading Color */
    color: white; border-radius: 50%; border: none; 
    font-size: 25px; cursor: pointer;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); 
    transition: 0.4s;
}

/* Hidden Social Icons */
.social-menu { 
    display: flex; flex-direction: column; gap: 15px; 
    opacity: 0; visibility: hidden;
    transform: translateY(20px); /* Shuruat mein niche rahenge */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Open Class (JS se toggle hogi) */
.social-menu.open { 
    opacity: 1; visibility: visible; 
    transform: translateY(0); /* Click karne par upar slide karenge */
}

.social-btn { 
    width: 50px; height: 50px; background: #fff; 
    border-radius: 50%; display: flex; align-items: center; 
    justify-content: center; text-decoration: none; 
    color: #244246; border: 2px solid #244246;
    transition: 0.3s;
}

.social-btn:hover { background: #244246; color: #fff; transform: scale(1.1); }

/* laser hair removal css */
.card-container {
    width: 86%;            /* Sets the width to 86% */
    margin: 0 auto;        /* This centers the container horizontally on the page */
    display: flex;
    justify-content: center; /* This centers the cards inside the container */
    align-items: center;
    gap: 35px;
    padding: 20px;
}

.card {
  flex: 1;
  border: 2px solid #00a7a5; /* Light pink border color */
  border-radius: 100px 100px 20px 20px; /* Arched top corners */
  overflow: hidden; /* Clips the image to the border shape */
  text-align: center;
  padding-bottom: 20px;
  background: white;
}

.card img {
  width: 100%;
  height: 300px; /* Adjust based on your preference */
  object-fit: cover;
  display: block;
}

.card p {
  font-weight: bold;
  margin-top: 15px;
  color: #333;
}

/*  */

/* whychoose css */
.why-choose-us { padding: 10px 20px; background: #f4f7f6; }
.container { max-width: 1100px; margin: 0 auto; }

.header { text-align: center; margin-bottom: 60px; }
.header h2 { font-size: 42px; color: #1a1a1a; margin-bottom: 10px; }
.header p {  font-weight: bold; text-transform: uppercase; letter-spacing: 2px; }

.main-grid { display: flex; gap: 50px; flex-wrap: wrap; }
.text-side { flex: 1; min-width: 300px; animation: slideLeft 1s ease-out; }
.highlights-side { flex: 1; min-width: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* The Creative Cards */
.highlight-item {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
  text-align: center;
  font-weight: 600;
  transition: all 0.4s ease;
  animation: popUp 0.8s ease forwards;
  opacity: 0;
}

.highlight-item:hover {
  background: #70c9c7;
  
  transform: translateY(-10px);
}

/* Animations */
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-50px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes popUp {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* Delay for each card */
.highlight-item:nth-child(1) { animation-delay: 0.2s; }
.highlight-item:nth-child(2) { animation-delay: 0.3s; }
.highlight-item:nth-child(3) { animation-delay: 0.4s; }
.highlight-item:nth-child(4) { animation-delay: 0.5s; }
.highlight-item:nth-child(5) { animation-delay: 0.6s; }
.highlight-item:nth-child(6) { animation-delay: 0.7s; }

@media (max-width: 768px) {
  .highlights-side { grid-template-columns: 1fr; }
}
/*  */

/* before after */.result-section{
    padding:80px 0;
    background:#f8f9fa;
}

.result-gallery{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.result-item{
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
    transition:.4s;
    cursor:pointer;
}

.result-item img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
    transition:.5s;
}

.result-item:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.18);
}

.result-item:hover img{
    transform:scale(1.08);
}

.know-more{
    display:inline-block;
   
    color:#00cec9;
    text-decoration:underline;
    font-size:17px;
    font-weight:600;
    transition:.4s;
}
.know-more:hover{
    display:inline-block;
    color:#173c42;
    text-decoration:none;
    font-size:17px;
    font-weight:600;
    transition:.4s;
}


/* Tablet */

@media(max-width:991px){

.result-gallery{
    grid-template-columns:repeat(2,1fr);
}

.result-item img{
    height:320px;
}

}

/* Mobile */

@media(max-width:576px){

.result-gallery{
    grid-template-columns:1fr;
}

.result-item img{
    height:280px;
}

}
/*  */
/* testimonial css */
.testimonial-section{
    padding:30px 0;
    background:#f6f9fc;
}

.section-title{
    margin-bottom:50px;
}

.section-title h2{
    font-size:40px;
    font-weight:600;
}

.section-title p{
    color:#666;
}

.testimonialSlider{
    padding-bottom:60px;
}

.swiper-slide{
    height:auto;
}

.testimonial-card{

    background:#fff;
    border-radius:20px;
    padding:35px;

    min-height:340px;

    display:flex;
    flex-direction:column;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:.4s;
}

.testimonial-card:hover{

    transform:translateY(-10px);

}

.quote{

    width:60px;
    height:60px;

    border-radius:50%;

    background:#0A4F53;

    color:#fff;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;

    margin-bottom:20px;

}

.testimonial-card p{

    flex:1;

    line-height:1.8;

    color:#555;

}

.user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:25px;

    border-top:1px solid #eee;

    padding-top:20px;

}

.user img{

    width:65px;

    height:65px;

    border-radius:50%;

    object-fit:cover;

}

.user h5{

    margin:0;

    font-size:20px;

}

.user span{

    color:#0A4F53;

    font-size:14px;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

}

.swiper-pagination-bullet-active{

    background:#0A4F53;

    width:35px;

    border-radius:20px;

}

@media(max-width:768px){

.section-title h2{

font-size:25px;

}

.testimonial-card{

padding:25px;

min-height:320px;

}

}
/*  */
/* GMB */
 
/*=====================================
CONTENT BOX
=====================================*/

.content-box{
    display:none;
    grid-template-columns:1fr 1fr;
    gap:35px;
    margin-top:35px;
    background:#fff;
    border-radius:20px;
    padding:35px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    animation:fadeUp .45s ease;
}

.content-box.active{
    display:grid;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(30px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*=====================================
LEFT INFO
=====================================*/

.branch-info h3{

    font-size:30px;
    font-weight:700;
    color:#173c42;
    margin-bottom:20px;

}

.branch-info p{

    display:flex;
    align-items:flex-start;
    gap:14px;
    font-size:17px;
    line-height:30px;
    color:#555;
    margin-bottom:18px;

}

.branch-info i{

    width:42px;
    height:42px;
    background:#0d9b84;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;

}

/*=====================================
MAP
=====================================*/

.branch-map{

    overflow:hidden;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);

}

.branch-map iframe{

    width:100%;
    height:100%;
    min-height:380px;
    border:0;

}

/*=====================================
HOVER
=====================================*/

.content-box:hover{

    transform:translateY(-5px);
    transition:.35s;
    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

/*=====================================
RESPONSIVE
=====================================*/

@media(max-width:991px){

.content-box{

grid-template-columns:1fr;
padding:25px;

}

.branch-map iframe{

min-height:300px;

}

}

@media(max-width:768px){

.city-tabs{

gap:12px;

}

.location-tabs{

gap:10px;

}

.tab-link{

width:100%;

}

.loc-btn{

width:100%;

}

.branch-info h3{

font-size:24px;

}

.branch-info p{

font-size:15px;

}

}

@media(max-width:576px){

.content-box{

padding:18px;

}

.branch-map iframe{

min-height:250px;

}

}
/*====================================
        CITY TABS
====================================*/

.city-tabs{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:18px;
    margin-bottom:35px;
}

.tab-link{

    position:relative;
    border:none;
    outline:none;

    padding:14px 40px;

    border-radius:50px;

    background:#ffffff;

    color:#173c42;

    font-size:17px;
    font-weight:600;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.tab-link:hover{

    background:#0d9b84;
    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 15px 35px rgba(13,155,132,.25);

}

.tab-link.active{

    background:linear-gradient(135deg,#0d9b84,#14b89b);

    color:#fff;

    box-shadow:0 15px 40px rgba(13,155,132,.35);

}


/*====================================
        LOCATION TABS
====================================*/

.location-tabs{

    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;

    gap:15px;

    margin-bottom:35px;

}

.loc-btn{

    border:none;
    outline:none;

    padding:12px 32px;

    border-radius:40px;

    background:#f3f7f9;

    color:#173c42;

    font-size:15px;
    font-weight:600;

    cursor:pointer;

    transition:.35s ease;

    box-shadow:0 8px 20px rgba(0,0,0,.06);

}

.loc-btn:hover{

    background:#173c42;

    color:#fff;

    transform:translateY(-3px);

}

.loc-btn.active{

    background:#0d9b84;

    color:#fff;

    box-shadow:0 12px 30px rgba(13,155,132,.35);

}


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

@media(max-width:768px){

.city-tabs,
.location-tabs{

    gap:10px;

}

.tab-link,
.loc-btn{

    width:100%;
    max-width:260px;

    text-align:center;

    font-size:15px;

    padding:12px 20px;

}

}
/* City Content */

.city-content{
    display:none;
}

.city-content.active-city{
    display:block;
}

/* Branch Content */

.content-box{
    display:none;
}

.content-box.active{
    display:grid;   /* agar flex use karna hai to display:flex */
}
/*  */
/* FAQS */
/*======================================
        FAQ SECTION
======================================*/

.faq-section{
    padding:90px 0;
    background:#f7fbfb;
    position:relative;
    overflow:hidden;
}

.faq-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(0,170,120,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(60px);
}

.faq-section::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(0,170,120,.06);
    border-radius:50%;
    right:-100px;
    bottom:-100px;
    filter:blur(60px);
}

.faq-section .container{
    position:relative;
    z-index:2;
}


/* Heading */

.sub-title{

    display:inline-block;
    color:#0d9b84;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:10px;

}

.main-title{

    font-size:42px;
    font-weight:700;
    color:#222;
    margin-bottom:15px;

}

.faq-section p{

    color:#666;
    font-size:16px;

}


/*======================================
       ACCORDION
======================================*/

.custom-faq .accordion-item{

    border:none;
    margin-bottom:20px;
    border-radius:18px !important;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;

}

.custom-faq .accordion-item:hover{

    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);

}


/* Question */

.custom-faq .accordion-button{

    background:#fff;
    color:#222;
    font-size:17px;
    font-weight:600;
    padding:22px 25px;
    box-shadow:none;
    position:relative;
    transition:.35s;

}

.custom-faq .accordion-button:not(.collapsed){

    background:linear-gradient(135deg,#0d9b84,#14b89b);
    color:#fff;

}


/* Answer */

.custom-faq .accordion-body{

    font-size:15px;
    line-height:1.9;
    color:#666;
    padding:22px 25px;
    background:#fff;

}


/* Remove Bootstrap Icon */

.accordion-button::after{

    display:none;

}


/*======================================
      CUSTOM PLUS ICON
======================================*/

.custom-faq .accordion-button::before{

    content:"+";
    position:absolute;
    right:20px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:#0d9b84;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    transition:.35s;

}

.custom-faq .accordion-button:not(.collapsed)::before{

    content:"−";
    background:#fff;
    color:#0d9b84;
    transform:rotate(180deg);

}


/*======================================
      SMOOTH ANIMATION
======================================*/

.accordion-collapse{

    transition:all .4s ease;

}


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

@media(max-width:991px){

.main-title{

    font-size:34px;

}

.custom-faq{

    margin-bottom:25px;

}

}

@media(max-width:768px){

.faq-section{

    padding:70px 0;

}

.main-title{

    font-size:28px;

}

.custom-faq .accordion-button{

    font-size:15px;
    padding:18px 18px;

}

.custom-faq .accordion-body{

    font-size:14px;
    padding:18px;

}

.custom-faq .accordion-button::before{

    width:30px;
    height:30px;
    font-size:18px;

}

}

@media(max-width:576px){

.main-title{

    font-size:24px;

}

.sub-title{

    font-size:13px;

}

.custom-faq .accordion-item{

    margin-bottom:15px;

}

}
/*  */
/* gallery */
/*======================================
        GALLERY SECTION
======================================*/

.gallery-section{
    padding:90px 0;
    background:#f8fbfc;
    /* margin-top: -90px; */
    position:relative;
    overflow:hidden;
}

.gallery-section::before{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(16,185,129,.08);
    border-radius:50%;
    top:-120px;
    left:-120px;
    filter:blur(80px);
}

.gallery-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(16,185,129,.06);
    border-radius:50%;
    right:-120px;
    bottom:-120px;
    filter:blur(80px);
}

.gallery-section .container{
    position:relative;
    z-index:2;
}


/*==============================
      Heading
===============================*/

.gallery-subtitle{

    color:#0f9d8c;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:600;
    font-size:15px;

}

.gallery-title{

    font-size:42px;
    font-weight:700;
    margin:10px 0 15px;
    color:#222;

}

.gallery-text{

    max-width:650px;
    margin:auto;
    color:#777;
    line-height:28px;

}


/*==============================
      Card
===============================*/

.gallery-card{

    position:relative;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    background:#fff;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.4s;

}

.gallery-card:hover{

    transform:translateY(-10px);

}

.gallery-img{

    width:100%;
    height:450px;
    object-fit:cover;
    display:block;
    transition:.6s;

}
.social.whatsapp{
    background: #25D366;
    color: #fff;
}

.social.whatsapp:hover{
    background: #1ebe5d;
    color: #fff;
}

.gallery-card:hover .gallery-img{

    transform:scale(1.12);

}


/*==============================
      Overlay
===============================*/
.gallery-overlay{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    background:rgba(0,0,0,.45);
    opacity:0;
    transition:.4s;
    pointer-events:none;   /* IMPORTANT */
}

.gallery-card:hover .gallery-overlay{
    opacity:1;
}


/*==============================
      Icon
===============================*/

.gallery-overlay i{

    width:70px;
    height:70px;
    background:#fff;
    color:#0f9d8c;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    transform:scale(.5) rotate(-180deg);
    transition:.5s;

}

.gallery-card:hover .gallery-overlay i{

    transform:scale(1) rotate(0);

}


/*==============================
      Border Glow
===============================*/

.gallery-card::before{

    content:"";
    position:absolute;
    inset:0;
    border:3px solid transparent;
    border-radius:18px;
    transition:.4s;
    z-index:2;

}

.gallery-card:hover::before{

    border-color:#008b8b;

}


/*==============================
      Shadow
===============================*/

.gallery-card:hover{

    box-shadow:0 20px 50px rgba(0,0,0,.18);

}


/*==============================
      Responsive
===============================*/

@media(max-width:991px){

.gallery-title{

font-size:34px;

}

.gallery-img{

height:260px;

}

}

@media(max-width:768px){

.gallery-section{

padding:70px 0;

}

.gallery-title{

font-size:28px;

}

.gallery-img{

height:220px;

}

}

@media(max-width:576px){

.gallery-title{

font-size:24px;

}

.gallery-subtitle{

font-size:13px;

}

.gallery-img{

height:180px;

}

.gallery-card{

border-radius:14px;

}

.gallery-overlay i{

width:55px;
height:55px;
font-size:20px;

}

}
/*======================================
        GALLERY LIGHTBOX
======================================*/

.gallery-lightbox{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.9);
    display:flex;
    justify-content:center;
    align-items:center;

    opacity:0;
    visibility:hidden;

    z-index:999999;

    transition:.4s;
}

.gallery-lightbox.active{

    opacity:1;
    visibility:visible;

}


/*==============================
      Image
===============================*/

.lightbox-content{

    width:90%;
    max-width:900px;
    display:flex;
    justify-content:center;
    align-items:center;

}

.lightbox-content img{

    width:100%;
    max-height:85vh;
    object-fit:contain;
    border-radius:15px;
    animation:zoomImage .4s ease;

}

@keyframes zoomImage{

0%{

transform:scale(.7);
opacity:0;

}

100%{

transform:scale(1);
opacity:1;

}

}


/*==============================
      Close Button
===============================*/

.close-lightbox{

    position:absolute;
    top:25px;
    right:35px;
    font-size:45px;
    color:#fff;
    cursor:pointer;
    transition:.3s;
    z-index:10;

}

.close-lightbox:hover{

    color:#10b981;
    transform:rotate(180deg);

}


/*==============================
      Prev Next Buttons
===============================*/

.lightbox-btn{

    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    border:none;
    border-radius:50%;
    background:#10b981;
    color:#fff;
    cursor:pointer;
    transition:.3s;
    font-size:22px;

}

.lightbox-btn:hover{

    background:#fff;
    color:#10b981;
    transform:translateY(-50%) scale(1.1);

}

.prev-btn{

    left:30px;

}

.next-btn{

    right:30px;

}


/*==============================
      Background Blur
===============================*/

.gallery-lightbox::before{

    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:rgba(16,185,129,.15);
    border-radius:50%;
    filter:blur(100px);
    top:5%;
    left:5%;

}

.gallery-lightbox::after{

    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background:rgba(16,185,129,.10);
    border-radius:50%;
    filter:blur(100px);
    bottom:5%;
    right:5%;

}


/*==============================
      Mobile
===============================*/

@media(max-width:768px){

.lightbox-content{

width:95%;

}

.lightbox-btn{

width:45px;
height:45px;
font-size:16px;

}

.prev-btn{

left:10px;

}

.next-btn{

right:10px;

}

.close-lightbox{

font-size:35px;
right:20px;
top:15px;

}

}
/*  */
/* contact css *//* Contact Cards */
.contact-section{
    margin-top: -100px;
}
.contact-item {
    display: flex; align-items: center; gap: 20px;
    padding: 20px; border: 2px dashed #00a7a5; margin-bottom: 20px;
    transition: 0.4s ease; 
}
.contact-item:hover { transform: scale(1.02); background: #f8f9fa; }
.contact-item i { font-size: 24px; color: #0b6e4f; }

/* Form Styling */
.contact-form .form-control { border-radius: 0; border: 1px solid #ced4da; padding: 12px; }
.btn-submit {     background: linear-gradient(135deg, #0A4F53, #58C3C2); color: white; padding: 12px 30px; border: none; font-weight: bold; }
.btn-submit:hover { background: #00a7a5; }

/* Map */
.map-container { border: 5px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.1); }

/* Responsive Mobile View */
/* @media (max-width: 768px) {
    .contact-item { text-align: center; flex-direction: column; }
    .row { flex-direction: column-reverse; }
    .contact-section{
    margin-top: 0px;
} */


/* about page css */

.why-us-section{
    padding:30px 0;
    margin-top: -68px;
    background:#fff;
    overflow:hidden;
}

.why-us-section .mini-title{

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:#00a7a5;
    font-size:15px;
    font-weight:600;
    margin-bottom:18px;
}

.why-us-section h2{

    font-size:38px;
    line-height:1.2;
  
    font-weight:700;
    color:#083b52;
    margin-bottom:25px;
}

.why-us-section p{

    color:#777;
    line-height:1.9;
    font-size:16px;
}

.feature-box{

    display:flex;
    gap:18px;

    margin-top:30px;

    transition:.4s;
}

.feature-box:hover{

    transform:translateX(12px);
}

.content h5{

    font-size:22px;
    margin-bottom:8px;
    color:#222;
}

.content p{

    margin:0;
}

.image-wrapper{

    position:relative;

    display:flex;
    justify-content:center;
    align-items:center;
}

.shape{

    position:absolute;

    width:520px;
    height:520px;

    background:#00cec9;

    border-radius:55% 45% 50% 50%;

    animation:blob 8s infinite linear;
}
h2{
   
    color:#083b52;
}
.image-wrapper img{

    width:470px;

    position:relative;

    z-index:2;
   border-radius: 36%;
    animation:float 4s ease-in-out infinite;
}

@keyframes float{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

}

@keyframes blob{

0%{

border-radius:55% 45% 50% 50%;

transform:rotate(0deg);

}

50%{

border-radius:45% 55% 60% 40%;

transform:rotate(10deg);

}

100%{

border-radius:55% 45% 50% 50%;

transform:rotate(0deg);

}

}

/* Tablet */

@media(max-width:991px){

.why-us-section{

padding:70px 0;
margin-top: 0px;

}

.why-us-section h2{

font-size:38px;

}
/* 
.image-wrapper{

margin-top:-71px;

} */

.shape{

width:420px;
height:420px;

}

.image-wrapper img{

width:360px;

}

}

/* Mobile */

@media(max-width:767px){

.why-us-section{

padding:60px 0;

text-align:center;

}

.why-us-section h2{

font-size:19px;

}
.why-us-section p {
    color: #777;
    line-height: 1.9;
    font-size: 14px;
    text-align: justify;
}

.feature-box{

flex-direction:column;

align-items:center;

text-align:center;

}

.content h5{

font-size:20px;

}

.shape{

width:300px;
height:300px;

}

.image-wrapper img{

width:260px;

}

}
/*  */
/* about page 2 section */
.clinic-facilities{
    padding:30px 0;
    background:#fcfbfb;
}

.facility-content{
    max-width:1150px;
    margin:auto;
}

.section-subtitle{
    display:inline-flex;
    align-items:center;
    justify-content: center;
    gap:10px;
    background:#f8efe9;
    color:#00a884;
    padding:10px 22px;
    border-radius:40px;
    font-weight:600;
    margin-bottom:20px;
}

.section-subtitle i{
    font-size:18px;
}

.facility-content h2{
    font-size:48px;
    font-weight:700;
    color:#1b696b;
    text-align: center;
    line-height:1.25;
    margin-bottom:20px;
}

.facility-content p{
    font-size:17px;
    color:#777;
    text-align: center;
    line-height:1.9;
    margin-bottom:40px;
}

.facility-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
}

.facility-item{
    display:flex;
    align-items:center;
    gap:15px;
    background:#fbf6f2;
    padding:18px 20px;
    border-radius:12px;
    transition:.35s;
    border:1px solid #f2e4db;
}

.facility-item i{
    width:48px;
    height:48px;
    background:#fff;
    color:#58C3C2;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    transition:.35s;
}

.facility-item span{
    font-size:16px;
    font-weight:600;
    color:#333;
}

.facility-item:hover{
    background:#58C3C2;
    transform:translateY(-6px);
}

.facility-item:hover span{
    color:#fff;
}

.facility-item:hover i{
    background:#fff;
    color:#00a7a5;
    transform:rotate(10deg);
}

@media(max-width:768px){

.facility-content{
    text-align:center;
}

.facility-content h2{
    font-size:32px;
}

.facility-list{
    grid-template-columns:1fr;
}

.facility-item{
    text-align:left;
}

}
/*  */
/* 3rd */
/*==========================
Approach Section
==========================*/

.approach-sec{

    padding:90px 0;
    background:#fff;
    overflow:hidden;

}

.approach-box{

    display:grid;
    grid-template-columns:42% 58%;
    gap:45px;
    align-items:center;

}

.approach-left{

    position:relative;
    padding-left:30px;

}

.approach-left::before{

    content:'';
    position:absolute;
    left:0;
    top:0;
    width:6px;
    height:120px;
    border-radius:20px;
    background:linear-gradient(#0D4D57,#77C8C2);

}

.small-title{

    display:inline-block;
    background:#dff4f2;
    color:#0D4D57;
    padding:8px 18px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
    letter-spacing:1px;

}

.approach-left h2{

    font-size:44px;
    color:#15343c;
    font-weight:700;
    line-height:1.2;
    margin-bottom:20px;

}

.approach-left h2 span{

    color:#0D4D57;

}

.approach-left p{

    color:#666;
    font-size:17px;
    line-height:30px;

}

/* Cards */

.approach-right{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;

}

.step-box{

    background:#fff;
    padding:20px;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    transition:.4s;
    border:1px solid #e5efef;
    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.step-box::before{

    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0D4D57,#77C8C2);

}

.step-box span{

    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0D4D57;
    color:#fff;
    font-size:20px;
    font-weight:700;
    margin-bottom:20px;
    transition:.4s;

}

.step-box h5{

    margin:0;
    color:#18353c;
    font-size:20px;
    line-height:30px;
    font-weight:600;

}

.step-box:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 40px rgba(13,77,87,.18);

}

.step-box:hover span{

    background:#77C8C2;
    color:#0D4D57;
    transform:rotate(360deg);

}

/* Bottom */

.approach-content{

    margin-top:60px;

}

.approach-content>p{

    background:rgb(247, 251, 251);
;
    border-left:5px solid #77C8C2;
    padding:28px;
    border-radius:15px;
    color:#555;
    line-height:32px;
    font-size:17px;
    box-shadow:0 10px 30px rgba(0,0,0,.05);

}

.bottom-highlight{

    margin-top:25px;
    background:linear-gradient(135deg,#0D4D57,#2d7075);
    color:#fff;
    border-radius:18px;
    padding:28px;
    position:relative;
    overflow:hidden;

}

.bottom-highlight::before{

    content:'';
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    right:-60px;
    top:-60px;

}

.bottom-highlight p{

    margin:0;
    font-size:18px;
    line-height:32px;
    position:relative;
    z-index:2;

}

/* Responsive */

@media(max-width:991px){

.approach-box{

grid-template-columns:1fr;
gap:40px;

}

.approach-left h2{

font-size:36px;

}

}

@media(max-width:768px){

.approach-sec{

padding:70px 0;

}

.approach-left{

padding-left:20px;

}

.approach-left::before{

height:90px;

}

.approach-left h2{

font-size:28px;

}

.approach-left p{

font-size:15px;
line-height:28px;

}

.approach-right{

grid-template-columns:1fr;

}

.step-box{

padding:22px;

}

.step-box span{

width:55px;
height:55px;
font-size:18px;

}

.step-box h5{

font-size:18px;
line-height:28px;

}

.approach-content>p{

padding:22px;
font-size:15px;
line-height:28px;

}

.bottom-highlight{

padding:22px;

}

.bottom-highlight p{

font-size:15px;
line-height:28px;

}

}

@media(max-width:480px){

.approach-left h2{

font-size:24px;

}

.small-title{

font-size:12px;

}

}
/*  */
/* 4th section aboutpage */
/*=========================
MISSION SECTION
=========================*/

.mission-section{

    padding:30px 0;
    background:#f8fbfb;
    overflow:hidden;
    position:relative;

}

.mission-section::before{

    content:'';
    position:absolute;
    width:300px;
    height:300px;
    background:#7BC8C41a;
    border-radius:50%;
    top:-120px;
    right:-120px;
    animation:float 8s linear infinite;

}

.mission-section::after{

    content:'';
    position:absolute;
    width:250px;
    height:250px;
    background:#0D4D5710;
    border-radius:50%;
    bottom:-120px;
    left:-120px;
    animation:float2 9s linear infinite;

}

/* Image */

.mission-img{

    position:relative;
    padding:25px;

}

.mission-img img{

    width:100%;
    border-radius:25px;
    position:relative;
    z-index:2;
    box-shadow:0 20px 45px rgba(0,0,0,.12);
    transition:.5s;

}

.mission-img:hover img{

    transform:scale(1.03);

}

.shape-one{

    position:absolute;
    width:170px;
    height:170px;
    background:#7BC8C4;
    border-radius:25px;
    top:0;
    left:0;
    z-index:1;

}

.shape-two{

    position:absolute;
    width:170px;
    height:170px;
    background:#0D4D57;
    border-radius:25px;
    bottom:0;
    right:0;
    z-index:1;

}

/* Content */

.mission-content{

    background:#fff;
    padding:35px;
    border-radius:25px;
    box-shadow:0 15px 40px rgba(0,0,0,.07);

}

.mission-tag{

    display:inline-block;
    background:#dff6f4;
    color:#0D4D57;
    padding:8px 20px;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;

}

.mission-content h2{

    font-size:42px;
    color:#1f2b30;
    font-weight:700;
    margin-bottom:20px;

}

.mission-content h2 span{

    color:#0D4D57;

}

.mission-content p{

    color:#666;
    font-size:17px;
    line-height:30px;
    margin-bottom:30px;

}

/* List */

.mission-item{

    display:flex;
    align-items:center;
    gap:18px;
    background:#f8fbfb;
    padding:8px 20px;
    border-radius:15px;
    margin-bottom:4px;
    transition:.4s;
    border-left:4px solid transparent;

}

.mission-item:hover{

    transform:translateX(12px);
    border-left:4px solid #0D4D57;
    box-shadow:0 10px 25px rgba(13,77,87,.10);

}

.icon{

    width:30px;
    height:30px;
    background:linear-gradient(135deg,#0D4D57,#7BC8C4);
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:13px;
    flex-shrink:0;

}

.mission-item h5{

    margin:0;
    font-size:16px;
    color:#18333b;
    line-height:28px;
    font-weight:600;

}

/* Animation */

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(30px);

}

100%{

transform:translateY(0);

}

}

@keyframes float2{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-30px);

}

100%{

transform:translateY(0);

}

}

/* Responsive */

@media(max-width:991px){

.mission-content{

margin-top:20px;

}

.mission-content h2{

font-size:34px;

}

}

@media(max-width:768px){

.mission-section{

padding:70px 0;

}

.mission-img{

padding:10px;

margin-bottom:20px;

}

.shape-one{

width:100px;
height:100px;

}

.shape-two{

width:100px;
height:100px;

}

.mission-content{

padding:25px;

}

.mission-content h2{

font-size:28px;

}

.mission-content p{

font-size:15px;
line-height:28px;

}

.mission-item{

padding:15px;

gap:15px;

}

.icon{

width:45px;
height:45px;
font-size:16px;

}

.mission-item h5{

font-size:16px;
line-height:24px;

}

}

@media(max-width:576px){

.mission-content{

padding:20px;

}

.mission-content h2{

font-size:24px;

}

.mission-tag{

font-size:12px;

}

}
/*  */
/* 5th section slider about page */
/*==================================
Clinic Gallery Section
==================================*/

.clinic-gallery{

    padding:30px 0;
    background:#fff;
    overflow:hidden;
    position:relative;

}

.clinic-gallery::before{

    content:'';
    position:absolute;
    width:320px;
    height:320px;
    background:#77c8c41c;
    border-radius:50%;
    left:-140px;
    top:-140px;
    animation:floatOne 8s linear infinite;

}

.clinic-gallery::after{

    content:'';
    position:absolute;
    width:260px;
    height:260px;
    background:#0d4d5710;
    border-radius:50%;
    right:-120px;
    bottom:-120px;
    animation:floatTwo 9s linear infinite;

}

/*========================
Left Content
========================*/

.gallery-content{

    position:relative;
    z-index:2;

}

.gallery-subtitle{

    display:inline-block;
    padding:9px 20px;
    background:#dff6f4;
    color:#0D4D57;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:18px;

}

.gallery-content h2{

    font-size:46px;
    font-weight:700;
    color:#1b2c32;
    margin-bottom:22px;
    line-height:1.2;

}

.gallery-content h2 span{

    color:#0D4D57;

}

.gallery-content p{

    font-size:17px;
    color:#666;
    line-height:32px;
    margin:0;

}

/*========================
Slider Wrapper
========================*/

.gallery-slider-wrapper{

    position:relative;
    padding:18px;

}

.clinicSwiper{

    border-radius:25px;
    overflow:hidden;
    position:relative;
    background:#fff;
    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

/*========================
Image
========================*/

.gallery-img{

    position:relative;
    overflow:hidden;

}

.gallery-img img{

    width:100%;
    height:540px;
    object-fit:cover;
    transition:1.2s;

}

.swiper-slide-active .gallery-img img{

    transform:scale(1.08);

}

/*========================
White Fade Overlay
========================*/

.gallery-img::after{

    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:linear-gradient(
        90deg,
        rgba(255,255,255,.65) 0%,
        rgba(255,255,255,0) 35%,
        rgba(255,255,255,0) 65%,
        rgba(255,255,255,.65) 100%
    );

    opacity:0;
    transition:.8s;
    pointer-events:none;

}

.swiper-slide-active .gallery-img::after{

    opacity:1;
    animation:fadeSlide 1.3s ease;

}

/*========================
Navigation Buttons
========================*/

.gallery-prev,
.gallery-next{

    width:20px;
    height:20px;
    border-radius:50%;
    background:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:20;
    cursor:pointer;
    transition:.4s;
    color:#0D4D57;
    font-size:7px;
    box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.gallery-prev{

    left:18px;

}

.gallery-next{

    right:18px;

}

.gallery-prev:hover,
.gallery-next:hover{

    background:#0D4D57;
    color:#fff;
    transform:translateY(-50%) scale(1.1);

}

/*========================
Pagination
========================*/

.clinicSwiper .swiper-pagination{

    bottom:18px !important;

}

.clinicSwiper .swiper-pagination-bullet{

    width:12px;
    height:12px;
    opacity:1;
    background:#d8d8d8;
    transition:.4s;

}

.clinicSwiper .swiper-pagination-bullet-active{

    width:38px;
    border-radius:20px;
    background:#0D4D57;

}

/*========================
Floating Animation
========================*/

@keyframes floatOne{

0%{

transform:translateY(0);

}

50%{

transform:translateY(35px);

}

100%{

transform:translateY(0);

}

}

@keyframes floatTwo{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0);

}

}

/*========================
White Fade Animation
========================*/

@keyframes fadeSlide{

0%{

opacity:1;
transform:translateX(-100%);

}

100%{

opacity:1;
transform:translateX(100%);

}

}

/*========================
Responsive
========================*/

@media(max-width:991px){

.gallery-content{

text-align:center;
margin-bottom:20px;

}

.gallery-content h2{

font-size:36px;

}

.gallery-img img{

height:450px;

}

}

@media(max-width:768px){

.clinic-gallery{

padding:70px 0;

}

.gallery-content h2{

font-size:30px;

}

.gallery-content p{

font-size:15px;
line-height:28px;

}

.gallery-slider-wrapper{

padding:0;

}

.gallery-img img{

height:520px;

}

.gallery-prev,
.gallery-next{

width:45px;
height:45px;
font-size:16px;

}

.clinicSwiper .swiper-pagination-bullet{

width:10px;
height:10px;

}

.clinicSwiper .swiper-pagination-bullet-active{

width:30px;

}

}

@media(max-width:576px){

.gallery-content h2{

font-size:26px;

}

.gallery-subtitle{

font-size:12px;

}

.gallery-img img{

height:260px;

}

.gallery-prev{

left:10px;

}

.gallery-next{

right:10px;

}

}
/*  */
/* blog page css */
.blog-card { 
    background: #fff; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.08); 
    transition: 0.4s; 
}

.blog-card:hover { transform: translateY(-10px); }

/* Image Hover Effect */
.image-box { position: relative; overflow: hidden; height: 220px; }
.image-box img { 
    width: 100%; height: 100%; object-fit: cover; 
    transition: transform 0.6s ease; 
}
.blog-card:hover img { transform: scale(1.1); }

/* Vertical Date Ribbon */
.date-ribbon {
    position: absolute; left: 0; top: 0; height: 100%; width: 50px;
    background: #c5a059; color: #fff;
    writing-mode: vertical-lr; text-orientation: mixed;
    display: flex; align-items: center; justify-content: center;
    font-weight: bold; font-size: 14px; letter-spacing: 1px;
}

/* Blog Text */
.blog-content { padding: 20px; }
.meta { font-size: 12px; color: #888; margin-bottom: 8px; text-transform: uppercase; }
.blog-content h4 { font-size: 18px; font-weight: 700; color: #2c3e50; margin-bottom: 15px; }
.read-more { color: #00a7a5; font-weight: bold; text-decoration: none; font-size: 14px; }

/* Mobile View: Stack as 1 column */
@media (max-width: 767px) {
    .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
}
/*  */
/* video page css */
/*==========================
 Video Gallery
==========================*/

.video-gallery-section{
    padding:30px 0;
    background:#fff;
}

.section-heading{
    text-align:center;
    margin-bottom:55px;
}

.section-heading span{
    display:inline-block;
    background:#0d6efd;
    color:#fff;
    padding:7px 18px;
    border-radius:30px;
    font-size:14px;
    margin-bottom:15px;
    letter-spacing:1px;
}

.section-heading h2{
    font-size:40px;
    font-weight:700;
    color:#222;
    margin-bottom:15px;
}

.section-heading p{
    color:#777;
    max-width:650px;
    margin:auto;
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.video-card{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.4s;
}

.video-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 45px rgba(13,110,253,.25);
}

.video-card video{
    width:100%;
    height:250px;
    display:block;
    object-fit:cover;
    border-radius:18px;
    transition:.4s;
}

.video-card:hover video{
    transform:scale(1.03);
}

/* Glow Border */
.video-card::before{
    content:'';
    position:absolute;
    inset:0;
    border-radius:18px;
    padding:2px;
    background:linear-gradient(135deg,#0d6efd,#00d4ff,#00b894);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:0;
    transition:.4s;
    pointer-events:none;
}

.video-card:hover::before{
    opacity:1;
}

/*==========================
 Tablet
==========================*/

@media(max-width:991px){

.video-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
}

.video-card video{
height:220px;
}

.section-heading h2{
font-size:34px;
}

}

/*==========================
 Mobile
==========================*/

@media(max-width:767px){

.video-gallery-section{
padding:60px 0;
}

.video-grid{
grid-template-columns:1fr;
gap:18px;
}

.video-card video{
height:240px;
}

.section-heading h2{
font-size:28px;
}

.section-heading p{
font-size:15px;
}

}
/*  */
/* hair clinical condi page  */
.hair-clinic-section {
    padding: 10px 20px;
    background: #ffffff;
}

.clinic-container {
    max-width: 1100px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 40px;
    animation: fadeInUp 1s ease-out;
}

.clinic-image {
    flex: 1;
}

.clinic-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.clinic-content {
    flex: 1;
}

.clinic-content h2 {
    font-size: 2rem;
    color: #0A4F53;
    margin-bottom: 20px;
}

.clinic-content p {
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.7;
}

/* Mobile View */
@media (max-width: 768px) {
    .clinic-container {
        flex-direction: column;
        text-align: center;
    }
    .clinic-content h2 {
    font-size: 1.4rem;
    color: #0A4F53;
    margin-bottom: 20px;
}
}

/* Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 2nd section hair clinical con */
.hair-condition-info{
background:#f6fbff;
}

.condition-card{

background:#fff;
padding:45px;
border-radius:25px;
box-shadow:0 15px 40px rgba(0,0,0,.08);
transition:.4s;
position:relative;
overflow:hidden;

}

.condition-card::before{

content:'';
position:absolute;
left:0;
top:0;
width:100%;
height:6px;
background:linear-gradient(90deg,#008b8b, #00cec9);

}

.condition-card:hover{

transform:translateY(-8px);

}

.title-box{

display:flex;
align-items:center;
gap:20px;
margin-bottom:30px;

}

.icon-box{

width:70px;
height:70px;
background:linear-gradient(135deg,#008b8b,#00cec9);
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:28px;
color:#fff;
animation:floatIcon 3s infinite;

}

.title-box h2{

font-weight:700;
margin-bottom:8px;
color:#008b8b;

}

.condition-text{

line-height:1.9;
color:#555;

}

.important-note{

background:#eef8ff;
padding:20px;
border-left:5px solid #00a7a5;
border-radius:12px;
display:flex;
gap:15px;
margin-top:25px;

}

.important-note i{

font-size:24px;
color:#00a7a5;

}

.symptoms-grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:15px;
margin-top:20px;

}

.symptoms-grid div{

background:#f8fbff;
padding:15px;
border-radius:10px;
font-weight:600;
transition:.3s;
border:1px solid #e8f2ff;

}

.symptoms-grid div:hover{

background:#00a7a5;
color:#fff;
transform:translateY(-5px);

}

@keyframes floatIcon{

50%{
transform:translateY(-8px);
}

}

@media(max-width:768px){

.condition-card{
padding:25px;
}

.title-box{
flex-direction:column;
text-align:center;
}

.symptoms-grid{
grid-template-columns:1fr;
}

}
.hair-condition-section{
    background:#f7fbfb;
}

/* Left Card */

.condition-content{
    background:#fff;
    border-radius:20px;
    padding:40px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    height:100%;
    position:relative;
    overflow:hidden;
}

.condition-content::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width:8px;
    height:100%;
    background:#0B5C5A;
}

.section-heading{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:25px;
}

.icon-circle{
    width:75px;
    height:75px;
    border-radius:50%;
    background:#0B5C5A;
    color:#fff;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:30px;
    flex-shrink:0;
}

.section-heading h2{
    font-size:30px;
    font-weight:700;
    color:#0B5C5A;
    margin-bottom:5px;
}

.section-heading p{
    color:#777;
    margin:0;
}

.condition-text{
    line-height:1.9;
    color:#555;
    margin-bottom:30px;
}

.diagnosis-box{
    background:#FFF7ED;
    border-left:5px solid #008b8b;
    border-radius:15px;
    padding:20px;
    display:flex;
    gap:18px;
    align-items:flex-start;
}

.bulb{
    width:60px;
    height:60px;
    background:#008b8b;
    color:#fff;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:24px;
    flex-shrink:0;
}

.diagnosis-box h5{
    color:#0B5C5A;
    margin-bottom:8px;
    font-weight:700;
}

.diagnosis-box p{
    margin:0;
    color:#666;
}

/* Right Card */

.symptom-card{
    background:#0B5C5A;
    border-radius:20px;
    padding:40px;
    color:#fff;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
    height:100%;
}

.symptom-card h3{
    font-size:28px;
    margin-bottom:30px;
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
}

.symptom-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
}

/* Tablet */
@media (max-width:991px){
    .symptom-list{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
}

/* Mobile */
@media (max-width:767px){
    .symptom-list{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
}

/* Small Mobile */
@media (max-width:480px){
    .symptom-list{
        grid-template-columns:repeat(2,1fr);
        gap:8px;
    }
}

.symptom-item{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.12);
    padding:16px 18px;
    border-radius:12px;
    display:flex;
    align-items:center;
    gap:15px;
    transition:.35s;
    backdrop-filter:blur(4px);
}

.symptom-item:hover{
    transform:translateX(10px);
    background:#008b8b;
}

.symptom-item span{
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    color:#0B5C5A;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:16px;
    flex-shrink:0;
}

.symptom-item:hover span{
    color:#00a7a5;
}

/* Responsive */

@media(max-width:991px){

.condition-content,
.symptom-card{
padding:30px;
}

.section-heading{
flex-direction:column;
text-align:center;
}

.section-heading h2{
font-size:26px;
}

.icon-circle{
margin:auto;
}

.diagnosis-box{
flex-direction:column;
text-align:center;
align-items:center;
}

.symptom-card{
margin-top:20px;
}

}

@media(max-width:576px){

.condition-content,
.symptom-card{
padding:22px;
border-radius:15px;
}

.section-heading h2{
font-size:22px;
}

.symptom-card h3{
font-size:22px;
}

.symptom-item{
padding:14px;
font-size:15px;
}

}
.hair-treatment-section{

background:#fff;

}

.hair-treatment-section h2{

font-weight:700;


}

.treatment-box{

background:#fff;
padding:28px;
border-radius:18px;
box-shadow:0 10px 30px rgba(0,0,0,.08);
border-top:5px solid #58C3C2;
transition:.4s;
height:100%;

}

.treatment-box:hover{

background:#58C3C2;
transform:translateY(-10px);

}

.treatment-box h4{

color:#083b52;
margin-bottom:15px;
transition:.3s;

}

.treatment-box p{

color:#555;
line-height:1.8;
transition:.3s;

}

.treatment-box:hover h4,
.treatment-box:hover p{

color:#fff;

}

@media(max-width:768px){

.treatment-box{

padding:22px;

}

}
/*==================================
Advanced Diagnostic Section
==================================*/

.diagnostic-section{
    background:#f6fbfc;
    overflow:hidden;
}

.section-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 18px;
    background:#d8f3f4;
    color:#008b8b;
    border-radius:30px;
    font-weight:600;
    font-size:14px;
}

.section-title{
    font-size:38px;
    font-weight:600;
    color:#073b4c;
}

.section-desc{
    max-width:720px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
    font-size:16px;
}

/* Left Box */

.diagnostic-info{
    position:relative;
    background:#fff;
    border-radius:25px;
    padding:50px 35px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    overflow:hidden;
    z-index:2;
}

.circle-bg{
    position:absolute;
    width:220px;
    height:220px;
    border-radius:50%;
    background:linear-gradient(135deg,#12c2b3,#3ec7d8);
    right:-70px;
    top:-70px;
    opacity:.12;
}

.diagnostic-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(135deg,#12c2b3,#30b8d5);
    color:#fff;
    font-size:35px;
    margin-bottom:25px;
    animation:floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon{

0%,100%{
transform:translateY(0);
}

50%{
transform:translateY(-10px);
}

}

.diagnostic-info h3{
    font-weight:700;
    color:#083344;
    margin-bottom:18px;
}

.diagnostic-info p{
    color:#5f6b75;
    line-height:1.8;
    margin:0;
}

/* Cards */

.diagnostic-card{
    display:flex;
    align-items:center;
    gap:16px;
    background:#fff;
    padding:8px 22px;
    border-radius:18px;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.4s;
    height:100%;
    border:1px solid transparent;
}

.diagnostic-card:hover{

transform:translateY(-8px);

border-color:#14b8a6;

box-shadow:0 25px 45px rgba(20,184,166,.20);

}

.diagnostic-card i{
    width:55px;
    height:55px;
    background:linear-gradient(135deg,#13c2b4,#2fb9d6);
    border-radius:50%;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.diagnostic-card span{
    font-weight:600;
    color:#073b4c;
    line-height:1.5;
}

.diagnostic-card small{
    display:block;
    color:#7b8794;
    font-weight:500;
}

/* Bottom */

.diagnostic-bottom{
    background:linear-gradient(135deg,#0ea5a4,#17b5c8);
    color:#fff;
    border-radius:22px;
    padding:28px 35px;
    display:flex;
    align-items:center;
    gap:20px;
    box-shadow:0 20px 40px rgba(18,194,179,.25);
}

.diagnostic-bottom i{
    font-size:45px;
}

.diagnostic-bottom p{
    margin:0;
    font-size:17px;
    line-height:1.8;
}

/* Responsive */

@media(max-width:991px){

.section-title{
font-size:30px;
}

.diagnostic-info{
margin-bottom:30px;
}

}

@media(max-width:767px){

.section-title{
font-size:26px;
}

.section-desc{
font-size:15px;
}

.diagnostic-info{
padding:35px 25px;
text-align:center;
}

.diagnostic-icon{
margin:auto auto 20px;
}

.diagnostic-card{
padding:15px;
}

.diagnostic-card i{
width:48px;
height:48px;
font-size:18px;
}

.diagnostic-bottom{
flex-direction:column;
text-align:center;
padding:25px;
}

.diagnostic-bottom i{
font-size:38px;
}

.diagnostic-bottom p{
font-size:15px;
}

}
.info-section {
    padding: 80px 20px;
    background: #f4f7f6;
}

.info-grid {
    max-width: 1100px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.info-card {
    background: #fff;
    padding: 40px;
    border-radius: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-10px);
}

.info-card.highlight {
    background: #008b8b;
    color: #fff;
}
h3{
   
    font-weight: 600;
}
.info-card.highlight h3, .info-card.highlight p {
    color: #fff;
}

.icon {
    font-size: 2rem;
    margin-bottom: 20px;
}



/* Mobile View: Stack items */
@media (max-width: 768px) {
    .info-grid {
        grid-template-columns: 1fr;
    }
}
/*=============================
Treatment Section
==============================*/

.treatment-section{
    background:#f7fcfc;
    overflow:hidden;
}

.treatment-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 20px;
    background:#d9f8f6;
    color:#0a8f90;
    border-radius:40px;
    font-weight:600;
}

.treatment-title{
    font-size:42px;
    font-weight:700;
    color:#06394a;
}

.treatment-subtitle{
    max-width:720px;
    margin:auto;
    color:#6c757d;
    line-height:1.8;
}

/* Left Box */

.treatment-list-box{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.treatment-item{

    display:flex;
    align-items:center;
    gap:15px;

    background:#fff;

    padding:18px;

    border-radius:18px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    transition:.4s;

}

.treatment-item:hover{

transform:translateY(-8px);

background:linear-gradient(135deg,#14b8a6,#25b6d2);

color:#fff;

}

.treatment-item:hover i{

background:#fff;

color:#0a8f90;

}

.treatment-item i{

width:50px;

height:50px;

border-radius:50%;

background:linear-gradient(135deg,#16c2b7,#25b7d5);

color:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:20px;

transition:.4s;

flex-shrink:0;

}

.treatment-item span{

font-weight:600;

font-size:15px;

}

/* Note */

.treatment-note{

display:flex;

gap:18px;

align-items:center;

padding:22px;

background:linear-gradient(135deg,#11b6aa,#28b6d2);

border-radius:20px;

color:#fff;

box-shadow:0 15px 40px rgba(0,0,0,.15);

}

.treatment-note i{

font-size:38px;

}

/* Image */

.treatment-image{

position:relative;

padding:25px;

}

.treatment-image img{

width:100%;

border-radius:30px;

box-shadow:0 30px 60px rgba(0,0,0,.18);

position:relative;

z-index:2;

animation:floatimg 4s ease-in-out infinite;

}

@keyframes floatimg{

0%,100%{
transform:translateY(0px);
}

50%{
transform:translateY(-15px);
}

}

.shape{

position:absolute;

border-radius:50%;

z-index:1;

}

.shape1{

width:180px;

height:180px;

background:#b7f2ef;

top:0;

right:10px;

animation:rotateShape 12s linear infinite;

}

.shape2{

width:120px;

height:120px;

background:#d7f8ff;

bottom:20px;

left:0;

animation:rotateShape 10s linear infinite reverse;

}

@keyframes rotateShape{

100%{
transform:rotate(360deg);
}

}

/* Floating Cards */

.floating-card{

position:absolute;

background:#fff;

padding:14px 20px;

border-radius:50px;

box-shadow:0 12px 30px rgba(0,0,0,.15);

font-weight:600;

display:flex;

align-items:center;

gap:10px;

z-index:3;

animation:floatcard 3s ease-in-out infinite;

}

.floating-card i{

color:#0ba6a2;

font-size:20px;

}

.card1{

top:30px;

left:-10px;

}

.card2{

bottom:35px;

right:-10px;

animation-delay:1.5s;

}

@keyframes floatcard{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

}

/* Responsive */

@media(max-width:991px){

.treatment-title{

font-size:32px;

}

.treatment-image{

margin-top:40px;

}

}

@media(max-width:768px){

.treatment-list-box{

grid-template-columns:1fr;

}

.treatment-title{

font-size:28px;

}

.treatment-item{

padding:16px;

}

.treatment-note{

flex-direction:column;

text-align:center;

}

.card1{

left:10px;

top:15px;

font-size:13px;

}

.card2{

right:10px;

bottom:15px;

font-size:13px;

}

.shape1{

width:120px;

height:120px;

}

.shape2{

width:80px;

height:80px;

}

}
/*  */
/*  */
/* skin clinical cond treat page */
.skin-treatment-section { padding: 60px 20px; background: #f9fbfb; }

.content-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.card-skin {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.3s ease;
}

.card-skin-skin:hover { transform: translateY(-10px); }

.card-skin.secondary { background: #008b8b; color: #fff; }
.card-skin.secondary h3, .card-skin.secondary li { color: #fff; }

.icon { font-size: 2.5rem; margin-bottom: 15px; }

.ul { list-style: none; padding: 0; }
.ul .li { margin-bottom: 15px; padding-left: 25px; position: relative; line-height: 1.6; }
.ul .li::before { content: "✓"; position: absolute; left: 0; color: #008b8b; font-weight: bold; }
.secondary .ul .li::before { color: #fff; }

/* Mobile View */
@media (max-width: 768px) {
    .content-wrapper { grid-template-columns: 1fr; }
}
/*==============================
COMMON SKIN CONDITIONS
==============================*/

.skin-condition-section{
    background:#f8fcfc;
    position:relative;
    overflow:hidden;
}

.section-tag{
    display:inline-block;
    padding:10px 22px;
    background:#dffaf7;
    color:#0f766e;
    font-size:15px;
    font-weight:700;
    border-radius:50px;
    margin-bottom:15px;
    letter-spacing:.5px;
}

.section-title{
    font-size:42px;
    font-weight:600;
    color:#083344;
    margin-bottom:15px;
}

.section-desc{
    max-width:750px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
    font-size:16px;
}

/*==============================
CARD
==============================*/

.skin-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    height:100%;

    display:flex;

    flex-direction:column;

    position:relative;

    transition:.45s;

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    border:1px solid rgba(15,118,110,.08);

}

.skin-card::before{

    content:'';

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#0f766e,#14b8a6);

}

.skin-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 50px rgba(15,118,110,.18);

}

/*==============================
IMAGE
==============================*/

.skin-img{

    position:relative;

    height:240px;

    overflow:hidden;

}

.skin-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

.skin-card:hover .skin-img img{

    transform:scale(1.08);

}

/*==============================
NUMBER BADGE
==============================*/

.number{

    position:absolute;

    top:15px;

    left:15px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:linear-gradient(135deg,#14b8a6,#0f766e);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:20px;

    font-weight:700;

    box-shadow:0 10px 25px rgba(20,184,166,.35);

}

/*==============================
CONTENT
==============================*/

.skin-content{

    padding:25px;

    flex:1;

    display:flex;

    flex-direction:column;

}

.skin-content h3{

    font-size:24px;

    font-weight:700;

    color:#083344;

    margin-bottom:18px;

    line-height:1.4;

}

.skin-content h6{

    font-size:16px;

    color:#0f766e;

    font-weight:700;

    margin-top:12px;

    margin-bottom:8px;

    display:flex;

    align-items:center;

    gap:8px;

}

.skin-content h6::before{

    content:'';

    width:8px;

    height:8px;

    border-radius:50%;

    background:#14b8a6;

}

.skin-content p{

    color:#4b5563;

    line-height:1.8;

    margin-bottom:10px;

    font-size:15px;

}

.skin-content ul{

    margin:0;

    padding-left:18px;

}

.skin-content ul li{

    color:#4b5563;

    line-height:1.8;

    margin-bottom:6px;

    font-size:15px;

}

.skin-content ul li::marker{

    color:#14b8a6;

}

/*==============================
HOVER EFFECT
==============================*/

.skin-card:hover h3{

    color:#0f766e;

}

.skin-card:hover .number{

    transform:rotate(360deg);

    transition:1s;

}

/*==============================
AOS FIX
==============================*/

[data-aos]{

    transition-duration:900ms;

}

/*==============================
TABLET
==============================*/

@media(max-width:991px){

.section-title{

font-size:34px;

}

.skin-img{

height:220px;

}

.skin-content{

padding:22px;

}

.skin-content h3{

font-size:22px;

}

}

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

@media(max-width:767px){

.section-title{

font-size:28px;

}

.section-desc{

font-size:15px;

}

.skin-img{

height:210px;

}

.skin-content{

padding:20px;

}

.skin-content h3{

font-size:20px;

}

.skin-content h6{

font-size:15px;

}

.skin-content p,

.skin-content li{

font-size:14px;

}

.number{

width:48px;

height:48px;

font-size:18px;

}

}
.skin-card{background:#fff;border-radius:18px;overflow:hidden;height:100%;box-shadow:0 10px 25px rgba(0,0,0,.08);transition:.3s;border-top:5px solid #14b8a6}
.skin-card:hover{transform:translateY(-8px)}
.skin-img{position:relative;height:220px;overflow:hidden}
.skin-img img{width:100%;height:100%;object-fit:cover}
.number{position:absolute;top:15px;left:15px;background:#0f766e;color:#fff;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold}
.skin-content{padding:20px}
.skin-content h3{font-size:22px;color:#083344}
.skin-content h6{color:#0f766e;margin-top:0px}
.cta-section { padding: 80px 20px; background: #fdfdfd; }
.container { max-width: 1100px; margin: auto; }
.grid-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.info-box, .consult-box { padding: 30px; border-radius: 20px; }

.info-box { background: #f4f7f6; }
.info-box ul { list-style: none; padding: 0; }
.info-box li { margin-bottom: 12px; padding-left: 25px; position: relative; }
.info-box li::before { content: "🔹"; position: absolute; left: 0; font-size: 0.8rem; }

.consult-box { background: #008b8b; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.consult-box h2 { color: #fff; margin-bottom: 20px; }
.consult-box p { margin-bottom: 30px; line-height: 1.6; opacity: 0.9; }

.quote-btn {
    background: #fff;
    color: #06394a;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}

.quote-btn:hover { background: #00a7a5; transform: scale(1.05); }

/* Mobile View */
@media (max-width: 768px) {
    .grid-split { grid-template-columns: 1fr; }
    
}
/*  */

/* fungal infection treat page */

/*  */
.mobile-submenu{
    display:none;
    padding-left:15px;
    margin:0;
}

.mobile-dropdown.active > .mobile-submenu{
    display:block;
}

.mobile-dropdown > span{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
    user-select:none;
}

.mobile-dropdown > span i{
    transition:0.3s;
}

.mobile-dropdown.active > span i{
    transform:rotate(180deg);
}
.mobile-submenu{

    max-height:0;
    overflow:hidden;
    transition:.35s ease;

}

.mobile-dropdown.active>.mobile-submenu{

    max-height:3000px;

}

.mobile-dropdown>span{

    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;

}

.mobile-dropdown>span i{

    transition:.3s;

}

.mobile-dropdown.active>span i{

    transform:rotate(180deg);

}