:root {

    /* ===== Primary Brand Colors ===== */
    --primary-gold: #D4AF37;
    --gold-light: #E6C766;
    --gold-dark: #B8962E;

    /* ===== Base Colors ===== */
    --black: #000000;
    --dark: #111111;
    --white: #FFFFFF;
    --light: #F8F9FA;

    /* ===== Text Colors ===== */
    --text-dark: #222222;
    --text-light: #777777;

    /* ===== Background Colors ===== */
    --bg-light: #F5F5F5;
    --bg-dark: #0A0A0A;

    /* ===== Border / Divider ===== */
    --border-light: #E0E0E0;
    --border-dark: #333333;

    /* ===== Accent Colors ===== */
    --accent: #C59B2A;

    /* ===== Gradient (Premium Look) ===== */
    --gold-gradient: linear-gradient(135deg, #D4AF37, #F7E27E);

}

body {
    background: var(--bg-light);
    color: var(--text-dark);
}

.btn-gold {
    background: var(--primary-gold);
    color: var(--black);
}

.section-dark {
    background: var(--bg-dark);
    color: var(--white);
}

.border-custom {
    border: 1px solid var(--border-light);
}

/* Base */
body {
    font-family: 'Poppins', sans-serif;
    margin-top: 70px;

}

.container-custom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    /* better than padding for spacing */
    padding: 80px 100px;
}

/* LEFT CONTENT */
.left {
    flex: 1;
}

.left h1 {
    font-size: 48px;
    color: var(--primary-gold);
    margin-bottom: 20px;
}

.left p {
    font-size: 16px;
    color: var(--text-light);
    line-height: 1.7;
}

/* RIGHT IMAGE */
.right {
    flex: 1;
    text-align: center;
}

.right img {
    width: 100%;
    max-width: 450px;
    border-radius: 12px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .container-custom {
        flex-direction: column;
        padding: 60px 20px;
        text-align: center;
    }

    .left h1 {
        font-size: 32px;
    }
}






/* HEADER FIX */
.header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
}

/* TOP BAR */
.top-bar {
    background: #D4AF37;
    color: #000;
    font-size: 14px;
    padding: 6px 0;
}

/* NAVBAR */
.main-nav {
    background: #000;
    padding: 12px 0;
}

/* LOGO */
.logo {
    height: 110px;
    margin-right: 8px;
}

.navbar-brand span {
    color: #D4AF37;
    font-weight: 600;
}

/* NAV LINKS */
.nav-link {
    color: #fff;
    font-weight: 500;
    margin: 0 10px;
    position: relative;
}

/* HOVER UNDERLINE */
.nav-link::after {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    background: #D4AF37;
    left: 0;
    bottom: -5px;
    transition: 0.3s;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

.nav-link:hover {
    color: #D4AF37;
}

/* BUTTON */
.btn-appointment {
    background: #D4AF37;
    color: #000;
    border-radius: 30px;
    padding: 8px 18px;
    font-weight: 500;
}

.btn-appointment:hover {
    background: #b8962e;
    color: #fff;
}

/* MOBILE MENU STYLE */
@media (max-width: 992px) {

    .navbar-collapse {
        background: #000;
        padding: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-link {
        padding: 10px 0;
    }

    .btn-appointment {
        width: 100%;
        margin-top: 10px;
    }
}




/* =========================
HERO WRAP
========================= */

.hero-split-wrap {
    margin-top: 100px;
    overflow: hidden;
}

.split-hero {
    display: flex;
    min-height: 100vh;
}


/* =========================
LEFT PANEL
========================= */

.hero-left {

    width: 50%;

    background: var(--hero-left-bg);

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 100px 120px;

    position: relative;

}

/* subtle vertical accent line */
.hero-left::before {
    content: "";
    position: absolute;
    left: 70px;
    top: 28%;
    width: 3px;
    height: 140px;
    background: var(--accent);
    border-radius: 20px;
}

.hero-tag {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-dark);
    margin-bottom: 28px;
}

.hero-left h1 {
    font-size: 58px;
    line-height: 1.18;
    font-weight: 700;
    color: var(--text-dark);
    max-width: 650px;
    margin-bottom: 24px;
}

.hero-left h1 span {
    display: block;
    color: var(--accent);
}

.hero-left p {
    font-size: 17px;
    line-height: 1.8;
    color: var(--text-light);
    max-width: 520px;
    margin-bottom: 35px;
}


/* PREMIUM BUTTON */

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    width: fit-content;
    /* key fix */
    max-width: max-content;

    background: var(--accent);
    color: var(--white);

    padding: 18px 34px;

    border-radius: 14px;

    font-weight: 600;
    text-decoration: none;

    box-shadow: 0 10px 25px rgba(0, 168, 150, .20);

    transition: .35s;
}

.hero-btn:hover {
    transform: translateY(-4px);
    background: var(--primary-gold);
    color: var(--black);
}


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

.hero-right {
    width: 50%;
    position: relative;
}

.hero-right img {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    display: block;
}


/* =========================
PREMIUM CONTROLS
========================= */

.custom-control {
    width: auto;
    opacity: 1;
}

.custom-control span {

    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: rgba(0, 0, 0, .72);
    color: var(--white);

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

    backdrop-filter: blur(6px);

    transition: .3s;
}

.custom-control span:hover {
    background: var(--primary-gold);
    color: var(--black);
}

.carousel-control-prev {
    left: 30px;
}

.carousel-control-next {
    right: 30px;
}


/* =========================
INDICATORS
========================= */

.custom-indicators {
    bottom: 35px;
}

.custom-indicators button {

    width: 12px;
    height: 12px;

    border-radius: 50%;

    background: var(--accent);

    margin: 0 6px;
}


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

@media(max-width:992px) {
    .hero-split-wrap {
        margin-top: 140px;
        overflow: hidden;
    }

    .split-hero {
        flex-direction: column;
        min-height: auto;
    }

    .carousel-inner {

        justify-content: center;
    }

    .hero-left,
    .hero-right {
        width: 100%;
    }

    .hero-left {
        padding: 70px 30px 50px;
        text-align: center;
    }

    .hero-left::before {
        display: none;
    }

    .hero-left h1 {
        font-size: 36px;
    }

    .hero-left p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-right img {
        height: 420px;
    }

    .custom-control span {
        width: 46px;
        height: 46px;
    }

    .carousel-control-prev {
        left: 15px;
    }

    .carousel-control-next {
        right: 15px;
    }

    @media(max-width:992px) {

        .hero-btn {
            width: fit-content;
            max-width: max-content;

            padding: 14px 24px;
            font-size: 15px;

            margin: 20px auto 0;
            /* centers button on mobile */
        }

        /* if you want left aligned instead, use this instead:
.hero-btn{
margin:20px 0 0;
align-self:flex-start;
}
*/

    }

}


.section-space {
    padding: 100px 0;
}

.about-home {
    background: var(--white);
}

.about-img-wrap {
    position: relative;
    padding-right: 40px;
}

.main-about-img {
    border-radius: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}

/* experience card */
.exp-box {
    position: absolute;
    right: 0;
    bottom: 40px;

    background: var(--primary-gold);
    color: var(--black);

    padding: 25px 30px;

    border-radius: 20px;

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

.exp-box h4 {
    font-size: 38px;
    margin: 0;
    font-weight: 700;
}

.sec-tag {
    color: var(--bg-dark);
    font-weight: 700;
    display: block;
    margin-bottom: 18px;
}

.about-home h2 {
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 25px;
}

.about-home h2 span {
    color: var(--primary-gold);
}

.about-home p {
    color: var(--text-light);
    line-height: 1.8;
    margin-bottom: 35px;
}

/* features */
.feature-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-item {
    background: var(--bg-light);
    padding: 22px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: .3s;
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-item i {
    font-size: 28px;
    color: var(--accent);
}

.feature-item h6 {
    margin: 0;
}

/* mobile */
@media(max-width:992px) {

    .section-space {
        padding: 70px 0;
    }

    .about-home {
        text-align: center;
    }

    .about-home h2 {
        font-size: 34px;
    }

    .about-img-wrap {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .exp-box {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 20px;
        display: inline-block;
    }

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

}

.about-premium {
    padding: 100px 0;
    background: var(--white);
}

.about-visual {
    position: relative;
    display: flex;
    gap: 25px;
    align-items: center;
}

/* images */
.img-box {
    flex: 1;
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .08);
}

.img-box img {
    width: 100%;
    display: block;
    height: 520px;
    object-fit: cover;
}

.img-two {
    margin-top: 30px;
}


/* ROTATING BADGE */

.exp-badge {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: var(--accent);

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

}

/* rotating outer text */
.exp-text {
    position: absolute;
    width: 100%;
    height: 100%;

    animation: spinText 12s linear infinite;
}

.exp-text span {
    position: absolute;
    inset: 18px;

    border: 2px solid rgba(255, 255, 255, .35);
    border-radius: 50%;

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

    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

/* center number */
.exp-center {
    width: 95px;
    height: 95px;

    background: var(--white);
    color: var(--accent);

    border-radius: 50%;

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

    font-size: 42px;
    font-weight: 700;
}


/* rotate animation */
@keyframes spinText {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* content */
.about-premium h2 {
    font-size: 52px;
    line-height: 1.2;
    margin: 20px 0;
}

.about-premium h2 span {
    color: var(--primary-gold);
}

.about-premium p {
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 30px;
}

/* list */
.about-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px;
}

.about-list li {
    margin-bottom: 18px;
    font-size: 18px;
}

.about-list i {
    color: var(--accent);
    margin-right: 10px;
}

/* action */
.about-actions {
    display: flex;
    align-items: center;
    gap: 35px;
}

/* mobile */
@media(max-width:992px) {

    .about-premium {
        text-align: center;
        padding: 70px 0;
    }

    .about-list {
        text-align: left;
    }


    .about-visual {
        flex-direction: column;
    }

    .img-box img {
        height: 360px;
    }

    .img-two {
        margin-top: 0;
    }

    .exp-badge {
        width: 140px;
        height: 140px;
    }

    .exp-center {
        width: 75px;
        height: 75px;
        font-size: 30px;
    }

    .about-premium h2 {
        font-size: 34px;
    }

    .about-actions {
        flex-direction: column;
        gap: 20px;
    }

}

.exp-badge {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 180px;
    height: 180px;

    border-radius: 50%;

    background: var(--accent);

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

}

/* real rotating svg */
.exp-rotate {
    position: absolute;
    width: 100%;
    height: 100%;

    animation: spinCircle 12s linear infinite;
}

.exp-rotate text {
    fill: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* center circle */
.exp-center {

    width: 92px;
    height: 92px;

    background: var(--white);
    color: var(--accent);

    border-radius: 50%;

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

    font-size: 42px;
    font-weight: 700;

    z-index: 2;
}


/* perfect rotation */
@keyframes spinCircle {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* mobile */
@media(max-width:992px) {

    .exp-badge {
        width: 140px;
        height: 140px;
    }

    .exp-center {
        width: 72px;
        height: 72px;
        font-size: 30px;
    }

    .exp-rotate text {
        font-size: 9px;
    }

}

@media(max-width:992px) {

    .about-visual {
        flex-direction: column;
        gap: 20px;
    }

    /* both image boxes same size */
    .img-box {
        width: 100%;
        max-width: 100%;
    }

    .img-box img {
        width: 100%;
        height: 280px;
        /* mobile height */
        object-fit: cover;
        border-radius: 20px;
        display: block;
    }

    /* remove extra push */
    .img-two {
        margin-top: 0;
    }

    /* badge reposition */
    .exp-badge {
        width: 130px;
        height: 130px;

        left: 50%;
        top: 50%;

        transform: translate(-50%, -50%);
    }

    .exp-center {
        width: 70px;
        height: 70px;
        font-size: 28px;
    }

}

.stats-strip {
    background: var(--accent);
    padding: 35px 10px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* always 5 columns */
    gap: 15px;
    text-align: center;
}

.stat-box {
    padding: 10px 5px;
    transition: .3s;
}

.stat-box:hover {
    transform: translateY(-5px);
}

/* icons */
.stat-box i {
    font-size: 34px;
    color: var(--white);
    display: block;
    margin-bottom: 10px;
}

/* numbers */
.stat-box h3 {
    font-size: 48px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 8px;
}

.stat-box h3::after {
    content: "+";
}

.stat-box p {
    font-size: 20px;
    color: var(--white);
    margin: 0;
}


/* tablet */
@media(max-width:992px) {

    .stat-box i {
        font-size: 24px;
    }

    .stat-box h3 {
        font-size: 30px;
    }

    .stat-box p {
        font-size: 14px;
    }

}


/* small mobile still SAME ROW */
@media(max-width:576px) {

    .stats-strip {
        padding: 25px 6px;
    }

    .stats-grid {
        gap: 6px;
    }

    .stat-box i {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .stat-box h3 {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .stat-box p {
        font-size: 10px;
        line-height: 1.2;
    }

}


.services-sec {
    padding: 100px 0;
    background: var(--hero-left-bg);
}

.services-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 50px;
    gap: 20px;
}

.services-top h2 {
    font-size: 52px;
}

.services-top h2 span {
    color: var(--primary-gold);
}

/* top button */
.all-services-btn {
    background: var(--accent);
    color: var(--white);
    padding: 14px 26px;
    border-radius: 12px;
    text-decoration: none;
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

/* important for 4 cards */
.serviceSlider {
    overflow: hidden;
    padding: 20px 10px 70px;
}

.swiper-slide {
    height: auto;
}

.service-card {
    background: var(--white);
    border-radius: 28px;
    padding: 35px 25px;
    text-align: center;
    min-height: 390px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .06);
}

.service-card img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
}

.service-card h4 {
    font-size: 24px;
    margin-bottom: 15px;
}

.service-card p {
    line-height: 1.8;
    color: var(--text-light);
}

/* arrows */
.swiper-button-next,
.swiper-button-prev {
    width: 50px;
    height: 50px;
    background: var(--accent);
    border-radius: 50%;
    color: var(--white);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 18px;
}

/* bubbles */
.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: var(--primary-gold);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    transform: scale(1.3);
}

/* mobile */
@media(max-width:992px) {

    .services-top {
        flex-direction: column;
        text-align: center;
    }

    .services-top h2 {
        font-size: 34px;
    }

    .service-card {
        min-height: auto;
    }

}

.why-sec {
    padding: 110px 0;
    background: var(--white);
    overflow: hidden;
}

.why-sec h2 {
    font-size: 54px;
    line-height: 1.15;
    margin: 18px 0 25px;
}

.why-sec h2 span {
    display: block;
    color: var(--primary-gold);
}

.why-intro {
    line-height: 1.8;
    margin-bottom: 40px;
    color: var(--text-light);
}

/* feature list */
.why-item {
    display: flex;
    gap: 22px;
    margin-bottom: 35px;
}

.why-icon {
    min-width: 68px;
    width: 68px;
    height: 68px;

    border-radius: 50%;

    background: var(--hero-left-bg);

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

    box-shadow: 0 8px 25px rgba(0, 0, 0, .05);
}

.why-icon i {
    font-size: 30px;
    color: var(--accent);
}

.why-item h4 {
    font-size: 30px;
    margin-bottom: 10px;
}

.why-item p {
    line-height: 1.8;
    color: var(--text-light);
}


/* CIRCLE IMAGES */
.circle-wrap {
    position: relative;
    height: 720px;
}

/* common */
.circle-img {
    position: absolute;
    overflow: hidden;
    border-radius: 50%;

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

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

/* big */
.big-circle {
    width: 460px;
    height: 460px;
    top: 0;
    right: 30px;
}

/* middle */
.mid-circle {
    width: 330px;
    height: 330px;
    left: 30px;
    top: 220px;
}

/* small */
.small-circle {
    width: 250px;
    height: 250px;
    right: 90px;
    bottom: 0;
}

/* subtle floating motion */
.big-circle {
    animation: float1 5s ease-in-out infinite;
}

.mid-circle {
    animation: float2 6s ease-in-out infinite;
}

.small-circle {
    animation: float3 7s ease-in-out infinite;
}

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

@keyframes float2 {
    50% {
        transform: translateY(12px);
    }
}

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


/* mobile */
@media(max-width:992px) {

    .why-sec {
        padding: 70px 0;
        text-align: center;
    }

    .why-sec h2 {
        font-size: 36px;
    }

    .why-item {
        flex-direction: column;
        align-items: center;
    }

    .why-item h4 {
        font-size: 24px;
    }

    .circle-wrap {
        height: auto;
        margin-top: 50px;

        display: flex;
        flex-direction: column;
        gap: 25px;
        align-items: center;
    }

    .circle-img {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
    }

    .big-circle {
        width: 300px;
        height: 300px;
    }

    .mid-circle {
        width: 240px;
        height: 240px;
    }

    .small-circle {
        width: 180px;
        height: 180px;
    }

}

/* doctor image better for portraits */
.service-card img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 25px;
    border: 5px solid var(--hero-left-bg);
}

/* doctor name */
.service-card h4 {
    font-size: 28px;
    margin-bottom: 15px;
}

/* specialty */
.service-card p {
    font-size: 18px;
    line-height: 1.7;
}

.care-sec {
    padding: 100px 0;
    background: var(--white);
}

.care-box {

    background: var(--hero-left-bg);

    border-radius: 40px;

    padding: 80px 60px;

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

.care-head {
    margin-bottom: 60px;
}

.care-head h2 {
    font-size: 52px;
    margin-top: 18px;
}

.care-head h2 span {
    color: var(--primary-gold);
}


/* grid */
.care-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* card */
.care-card {

    background: var(--white);

    padding: 45px 30px;

    border-radius: 28px;

    text-align: center;

    transition: .35s;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);
}

.care-card:hover {
    transform: translateY(-8px);
}

/* icon circle */
.care-icon {

    width: 90px;
    height: 90px;

    margin: 0 auto 25px;

    border-radius: 28px;

    background: linear-gradient(135deg,
            var(--accent),
            #72d7ce);

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

    box-shadow: 0 10px 30px rgba(0, 168, 150, .18);
}

.care-icon i {
    font-size: 38px;
    color: var(--white);
}

.care-card h4 {
    font-size: 26px;
    line-height: 1.5;
    margin: 0;
}


/* mobile */
@media(max-width:992px) {

    .care-sec {
        padding: 70px 0;
    }

    .care-box {
        padding: 50px 25px;
        border-radius: 28px;
    }

    .care-head h2 {
        font-size: 34px;
    }

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

    .care-card {
        padding: 30px 18px;
    }

    .care-icon {
        width: 70px;
        height: 70px;
    }

    .care-icon i {
        font-size: 28px;
    }

    .care-card h4 {
        font-size: 18px;
    }

}

@media(max-width:576px) {

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

}

.faq-sec {
    padding: 100px 0;
    background: var(--hero-left-bg);
}

.faq-head {
    margin-bottom: 60px;
}

.faq-head h2 {
    font-size: 52px;
    margin: 18px 0;
}

.faq-head h2 span {
    color: var(--primary-gold);
}


/* FAQ */
.faq-item {
    width: 100%;
    border: none;

    background: var(--accent);
    color: var(--white);

    border-radius: 18px;

    padding: 0;

    margin-bottom: 20px;

    overflow: hidden;

    text-align: left;
}

.faq-q {
    padding: 28px 30px;
    display: flex;
    justify-content: space-between;
    font-size: 24px;
    font-weight: 600;
}

.faq-a {
    display: none;

    background: var(--white);
    color: var(--text-dark);

    padding: 25px 30px;
    line-height: 1.8;
}

.faq-item.active .faq-a {
    display: block;
}


/* BEFORE AFTER */
.compare-wrap {
    position: relative;

    max-width: 540px;
    height: 420px;

    border-radius: 30px;

    overflow: hidden;

    margin: auto;
}

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

.before-img {
    position: absolute;
    inset: 0;
}

.after-img {
    position: absolute;
    inset: 0;
    width: 50%;
    overflow: hidden;
    border-right: 2px solid var(--white);
}

/* labels */
.label {
    position: absolute;
    top: 25px;

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

    padding: 10px 22px;

    border-radius: 12px;

    font-weight: 600;
}

.before {
    left: 25px;
}

.after {
    right: 25px;
}

/* handle */
.compare-handle {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 56px;
    height: 56px;

    background: var(--black);
    color: var(--white);

    border-radius: 50%;

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

    cursor: ew-resize;

    z-index: 5;
}


/* mobile */
@media(max-width:992px) {

    .faq-sec {
        padding: 70px 0;
    }

    .faq-head h2 {
        font-size: 34px;
    }

    .faq-q {
        font-size: 18px;
        padding: 22px;
    }

    .compare-wrap {
        margin-top: 40px;
        height: 300px;
    }

}

.faq-sec {
    padding: 100px 0;
    background: var(--hero-left-bg);
}

.faq-head {
    margin-bottom: 60px;
}

.faq-head h2 {
    font-size: 52px;
}

.faq-head h2 span {
    color: var(--primary-gold);
}


/* FAQ */
.faq-item {
    background: var(--accent);
    border-radius: 18px;
    margin-bottom: 18px;
    overflow: hidden;
    cursor: pointer;
}

.faq-q {
    padding: 26px 30px;
    display: flex;
    justify-content: space-between;
    font-size: 22px;
    font-weight: 600;
    color: var(--white);
}

.faq-a {
    display: none;
    padding: 25px 30px;
    background: var(--white);
    line-height: 1.8;
}

.faq-item.active .faq-a {
    display: block;
}


/* BEFORE AFTER */

.compare-wrap {
    position: relative;
    height: 420px;
    max-width: 540px;
    margin: auto;

    overflow: hidden;
    border-radius: 30px;
}

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

/* before full */
.before-img {
    position: absolute;
    inset: 0;
}

/* after on right */
.after-img {
    position: absolute;
    top: 0;
    right: 0;

    width: 50%;
    height: 100%;

    overflow: hidden;

    border-left: 2px solid #fff;
}

.after-img img {
    position: absolute;
    top: 0;
    right: 0;

    width: 100%;
    height: 100%;
}


/* labels */
.label {
    position: absolute;
    top: 25px;
    padding: 10px 22px;

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

    border-radius: 12px;
    font-weight: 600;
}

.before {
    left: 25px;
}

.after {
    right: 25px;
}


/* drag handle */
.compare-handle {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 56px;
    height: 56px;

    background: var(--black);
    color: var(--white);

    border-radius: 50%;

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

    cursor: ew-resize;

    z-index: 5;
}


/* mobile */
@media(max-width:992px) {

    .faq-head h2 {
        font-size: 34px;
    }

    .faq-q {
        font-size: 18px;
    }

    .compare-wrap {
        height: 300px;
        margin-top: 40px;
    }

}

.compare-wrap {
    position: relative;
    height: 420px;
    max-width: 540px;
    margin: auto;
    overflow: hidden;
    border-radius: 30px;
}

/* BEFORE always base layer */
.before-img {
    position: absolute;
    inset: 0;
}

.before-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* AFTER stays fixed RIGHT */
.after-img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 50%;
    /* initial split */
    overflow: hidden;
    border-left: 2px solid #fff;
}

/* important: keep AFTER anchored right */
.after-img img {
    position: absolute;
    top: 0;
    right: 0;
    width: 540px;
    /* same as compare width */
    height: 100%;
    object-fit: cover;
}

/* labels */
.before {
    left: 25px;
}

.after {
    right: 25px;
}

/* handle */
.compare-handle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    cursor: ew-resize;
}

/* before label */
.before {
    left: 25px;
    z-index: 6;
}

/* AFTER label fixed right */
.after-fixed {
    position: absolute;

    top: 25px;
    right: 25px;
    /* always fixed right */

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

    padding: 10px 22px;
    border-radius: 12px;

    font-weight: 600;

    z-index: 6;
}

.testimonial-sec {
    padding: 100px 0;
    background: var(--white);
}

.review-intro h2 {
    font-size: 52px;
    margin: 18px 0;
}

.review-intro h2 span {
    color: var(--primary-gold);
}

.rating-box {
    margin: 30px 0;
}

.rating-box h3 {
    font-size: 38px;
}

.reviewSlider {
    overflow: hidden;
    padding-bottom: 60px;
}

/* cards */
.review-card {

    background: var(--hero-left-bg);

    padding: 35px 30px;

    border-radius: 30px;

    min-height: 300px;

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

    transition: .35s;
}

.review-card:hover {
    transform: translateY(-8px);
}

.review-top {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
}

.review-top img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.review-top h5 {
    margin: 0;
    font-size: 22px;
}

.review-top span {
    color: var(--primary-gold);
}

.review-card p {
    line-height: 1.8;
}

.swiper-pagination-bullet {
    background: var(--primary-gold);
    opacity: 1;
}

.swiper-pagination-bullet-active {
    transform: scale(1.3);
}

@media(max-width:992px) {

    .testimonial-sec {
        padding: 70px 0;
    }

    .review-intro {
        text-align: center;
        margin-bottom: 40px;
    }

    .review-intro h2 {
        font-size: 34px;
    }

    .review-card {
        min-height: auto;
    }

}

.appointment-sec {
    padding: 100px 0;
    background: var(--white);
}

.appointment-box {

    background: linear-gradient(135deg,
            var(--accent),
            #72d7ce);

    padding: 80px 70px;

    border-radius: 40px;

    box-shadow: 0 25px 50px rgba(0, 168, 150, .18);
}

.appointment-box h2 {
    font-size: 54px;
    line-height: 1.15;
    margin: 20px 0;
    color: var(--white);
}

.appointment-box h2 span {
    display: block;
    color: var(--primary-gold);
}

.appointment-box p {
    color: var(--white);
    line-height: 1.8;
    margin-bottom: 30px;
}

/* features */
.cta-features {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.cta-features div {
    color: var(--white);
    font-weight: 600;
}

.cta-features i {
    margin-right: 8px;
    color: var(--primary-gold);
}


/* right buttons */
.cta-actions {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.outline-btn {

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

    padding: 18px 34px;

    border: 2px solid var(--white);

    color: var(--white);

    border-radius: 14px;

    text-decoration: none;
    font-weight: 600;
}

.outline-btn:hover {
    background: var(--white);
    color: var(--accent);
}


/* mobile */
@media(max-width:992px) {

    .appointment-sec {
        padding: 70px 0;
    }

    .appointment-box {
        padding: 50px 25px;
        text-align: center;
    }

    .appointment-box h2 {
        font-size: 34px;
    }

    .cta-features {
        justify-content: center;
    }

    .cta-actions {
        margin-top: 35px;
    }

}


/* =========================
CONTACT SECTION
========================= */

.contact-sec {
    padding: 110px 0;
    background: var(--white);
    overflow: hidden;
}

.contact-sec h2 {
    font-size: 56px;
    line-height: 1.15;
    font-weight: 700;
    margin: 20px 0 35px;
    color: var(--text-dark);
    max-width: 620px;
}

.contact-sec h2 span {
    display: block;
    color: var(--primary-gold);
}

.contact-info h4 {
    font-size: 32px;
    margin-bottom: 18px;
    font-weight: 700;
}

.contact-info p {
    font-size: 18px;
    line-height: 1.9;
    color: var(--text-light);
    max-width: 560px;
    margin-bottom: 45px;
}


/* =========================
CONTACT CTA BOX
========================= */

.contact-call-box {

    background: linear-gradient(135deg,
            var(--accent),
            #63d4cb);

    border-radius: 32px;

    padding: 36px 42px;

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

    gap: 30px;

    box-shadow: 0 20px 50px rgba(0, 168, 150, .16);

}

.call-block h6 {
    margin-bottom: 12px;
    font-size: 15px;
    letter-spacing: .5px;
    color: rgba(255, 255, 255, .9);
}

.call-block h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
}

.call-block a {
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .35);
    padding-bottom: 3px;
}


/* CENTER CALL CIRCLE */

.call-circle {

    width: 92px;
    height: 92px;

    border-radius: 50%;

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

    border: 4px solid rgba(255, 255, 255, .16);

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

    text-decoration: none;

    transition: .35s;
}

.call-circle i {
    font-size: 34px;
    color: var(--white);
}

.call-circle:hover {
    transform: translateY(-4px) scale(1.04);
    background: var(--white);
}

.call-circle:hover i {
    color: var(--accent);
}


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

.map-wrap {

    border-radius: 36px;

    overflow: hidden;

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

    position: relative;
}

.map-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

.map-wrap iframe {
    width: 100%;
    height: 560px;
    border: 0;
    display: block;
}


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

@media(max-width:992px) {

    .contact-sec {
        padding: 70px 0;
        text-align: center;
    }

    .contact-sec h2 {
        font-size: 36px;
        max-width: 100%;
    }

    .contact-info h4 {
        font-size: 26px;
    }

    .contact-info p {
        font-size: 16px;
        margin-left: auto;
        margin-right: auto;
    }

    .contact-call-box {
        flex-direction: column;
        padding: 32px 24px;
        margin-bottom: 40px;
        gap: 22px;
    }

    .call-block h3 {
        font-size: 24px;
    }

    .call-circle {
        width: 74px;
        height: 74px;
    }

    .call-circle i {
        font-size: 28px;
    }

    .map-wrap {
        border-radius: 26px;
    }

    .map-wrap iframe {
        height: 360px;
    }

}

.site-footer {
    background: var(--bg-dark);
    padding: 100px 0 60px;
}

/* boxed footer */
.footer-box {

    background: var(--white);

    border-radius: 40px;

    padding: 70px 60px 35px;

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

.footer-logo {
    max-width: 150px;
    margin-bottom: 30px;
}

.footer-about {
    line-height: 1.9;
    color: var(--text-light);
    max-width: 340px;
}

.footer-box h4 {
    font-size: 30px;
    margin-bottom: 30px;
}

/* links */
.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li,
.footer-contact li {
    margin-bottom: 18px;
}

.footer-links a {
    text-decoration: none;
    color: var(--text-dark);
}

.footer-links a:hover {
    color: var(--primary-gold);
}

.footer-contact i {
    color: var(--accent);
    margin-right: 10px;
}

/* divider */
.footer-box hr {
    margin: 45px 0 30px;
}

/* bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.footer-bottom p {
    margin: 0;
}

.footer-bottom a {
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
}

/* socials */
.footer-social {
    display: flex;
    gap: 15px;
}

.footer-social a {

    width: 50px;
    height: 50px;

    border-radius: 50%;

    background: var(--hero-left-bg);

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

    text-decoration: none;
}

.footer-social i {
    font-size: 22px;
    color: var(--accent);
}


/* mobile */
@media(max-width:992px) {

    .site-footer {
        padding: 70px 0 50px;
    }

    .footer-box {
        padding: 50px 30px 30px;
        text-align: center;
    }

    .footer-about {
        margin: auto;
    }

    .footer-bottom {
        justify-content: center;
        flex-direction: column;
    }

    .footer-social {
        justify-content: center;
    }

}

/* =====================
WHATSAPP FLOAT
===================== */

.whatsapp-float {

    position: fixed;

    right: 25px;
    bottom: 25px;

    z-index: 9999;

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

    background: #25D366;
    color: #fff;

    padding: 15px 22px;

    border-radius: 60px;

    text-decoration: none;
    font-weight: 600;

    box-shadow: 0 12px 30px rgba(37, 211, 102, .35);

    animation: whatsPulse 2s infinite;
}

/* icon */
.whatsapp-float i {
    font-size: 30px;
}

/* pulse ring */
.whatsapp-float::before {

    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 60px;

    border: 2px solid rgba(37, 211, 102, .35);

    animation: ringPulse 2s infinite;
}


/* hover */
.whatsapp-float:hover {
    transform: translateY(-4px);
    color: #fff;
}


/* animations */
@keyframes whatsPulse {

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

}

@keyframes ringPulse {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
    }

}


/* mobile only icon */
@media(max-width:768px) {

    .whatsapp-float {

        width: 62px;
        height: 62px;

        padding: 0;

        border-radius: 50%;

        justify-content: center;
    }

    .whatsapp-float span {
        display: none;
    }

    .whatsapp-float i {
        font-size: 34px;
    }

    .whatsapp-float::before {
        border-radius: 50%;
    }

}

/* =====================
SCROLL TOP
===================== */

.scroll-top {

    position: fixed;

    right: 25px;
    bottom: 100px;
    /* above whatsapp */

    z-index: 9998;

    width: 58px;
    height: 58px;

    border: none;
    outline: none;

    border-radius: 50%;

    background: var(--primary-gold);
    color: var(--black);

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

    cursor: pointer;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition: .35s;

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

}

/* show */
.scroll-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top i {
    font-size: 28px;
}

.scroll-top:hover {
    transform: translateY(-4px);
}


/* mobile */
@media(max-width:768px) {

    .scroll-top {
        width: 50px;
        height: 50px;

        right: 20px;
        bottom: 95px;
    }

    .scroll-top i {
        font-size: 22px;
    }

}

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

.page-header {

    position: relative;

    height: 700px;

    background: url(./img/bg5.png) center center/cover no-repeat;

    background-attachment: fixed;
    /* parallax */

    display: flex;
    align-items: center;

    overflow: hidden;
}

/* dark overlay */
.overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(rgba(0, 0, 0, .45),
            rgba(0, 0, 0, .55));
}

.header-content {
    position: relative;
    z-index: 2;

    max-width: 700px;
}

.header-content .sec-tag {
    color: var(--primary-gold);
    display: block;
    margin-bottom: 20px;
}

.header-content h1 {
    font-size: 70px;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 25px;
}

.header-content h1 span {
    display: block;
    color: var(--primary-gold);
}

.header-content p {
    font-size: 20px;
    color: var(--white);
    line-height: 1.8;
    max-width: 550px;
}


/* mobile fix */
@media(max-width:992px) {

    .page-header {

        height: 580px;

        /* fixed attachment bad on mobile */

    }

    .header-content {
        text-align: center;
        margin: auto;
    }

    .header-content h1 {
        font-size: 38px;
    }

    .header-content p {
        font-size: 16px;
    }

}

.about-page-sec {
    padding: 100px 0;
    background: var(--white);
}

.about-page-img {
    position: relative;
    padding-right: 50px;
}

.main-img {
    width: 100%;
    border-radius: 35px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);
}

/* mini badge */
.about-mini-card {

    position: absolute;

    right: 0;
    bottom: 50px;

    background: var(--accent);

    padding: 28px 35px;

    border-radius: 25px;

    box-shadow: 0 15px 35px rgba(0, 168, 150, .18);

    text-align: center;
}

.about-mini-card h4 {
    font-size: 46px;
    color: var(--white);
    margin: 0;
}

.about-mini-card span {
    color: var(--white);
}


/* content */
.about-page-sec h2 {
    font-size: 54px;
    line-height: 1.2;
    margin: 20px 0 25px;
}

.about-page-sec h2 span {
    display: block;
    color: var(--primary-gold);
}

.about-page-sec p {
    line-height: 1.9;
    margin-bottom: 20px;
}

/* list */
.about-list {
    list-style: none;
    padding: 0;
    margin: 35px 0;
}

.about-list li {
    margin-bottom: 18px;
    font-size: 20px;
}

.about-list i {
    color: var(--accent);
    margin-right: 10px;
}


/* mobile */
@media(max-width:992px) {

    .about-page-sec {
        padding: 70px 0;
        text-align: center;
    }

    .about-page-img {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .about-mini-card {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-top: 20px;
    }

    .about-page-sec h2 {
        font-size: 34px;
    }

}

/* =========================
STATS WITH BG IMAGE
========================= */

.stats-bg {

    padding: 100px 0;

    background:
        linear-gradient(rgba(0, 0, 0, .55),
            rgba(0, 0, 0, .55)),
        url(./img/bg5.png) center center/cover no-repeat;

    background-attachment: fixed;

    position: relative;
}


/* cards grid */
.stats-grid {

    display: grid;

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

    gap: 25px;
}


/* separate cards */
.stat-box {

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

    backdrop-filter: blur(14px);

    border: 1px solid rgba(255, 255, 255, .18);

    padding: 35px 20px;

    border-radius: 30px;

    text-align: center;

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

    transition: .35s;
}

.stat-box:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, .20);
}


/* icon */
.stat-box i {
    font-size: 34px;
    color: var(--primary-gold);
    display: block;
    margin-bottom: 15px;
}

/* numbers */
.stat-box h3 {
    font-size: 50px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 10px;
}

.stat-box h3::after {
    content: "+";
}

.stat-box p {
    margin: 0;
    font-size: 20px;
    color: var(--white);
}


/* tablet */
@media(max-width:992px) {

    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
        /* keep same row */
        gap: 10px;
    }

    .stat-box {
        padding: 20px 8px;
        border-radius: 18px;
    }

    .stat-box i {
        font-size: 18px;
        margin-bottom: 8px;
    }

    .stat-box h3 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .stat-box p {
        font-size: 10px;
        line-height: 1.2;
    }

}


/* small mobile */
@media(max-width:576px) {

    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
        /* still same row */
        gap: 6px;
    }

    .stat-box {
        padding: 16px 5px;
        border-radius: 14px;
    }

    .stat-box i {
        font-size: 15px;
    }

    .stat-box h3 {
        font-size: 16px;
    }

    .stat-box p {
        font-size: 8px;
    }

}

.mission-sec {
    padding: 100px 0;
    background: var(--hero-left-bg);
}

.sec-head {
    margin-bottom: 60px;
}

.sec-head h2 {
    font-size: 52px;
    margin-top: 18px;
}

.sec-head h2 span {
    color: var(--primary-gold);
}


/* cards */
.mv-card {

    background: var(--white);

    padding: 60px 45px;

    border-radius: 35px;

    text-align: center;

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

    transition: .35s;
}

.mv-card:hover {
    transform: translateY(-8px);
}

/* icon */
.mv-icon {

    width: 95px;
    height: 95px;

    margin: 0 auto 30px;

    border-radius: 28px;

    background: linear-gradient(135deg,
            var(--accent),
            #72d7ce);

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

.mv-icon i {
    font-size: 42px;
    color: var(--white);
}

.mv-card h3 {
    font-size: 34px;
    margin-bottom: 20px;
}

.mv-card p {
    line-height: 1.9;
}


/* mobile */
@media(max-width:992px) {

    .mission-sec {
        padding: 70px 0;
    }

    .sec-head h2 {
        font-size: 34px;
    }

    .mv-card {
        padding: 40px 25px;
    }

    .mv-card h3 {
        font-size: 28px;
    }

    .mv-icon {
        width: 75px;
        height: 75px;
    }

    .mv-icon i {
        font-size: 30px;
    }

}

.all-services-sec {
    padding: 100px 0;
    background: var(--hero-left-bg);
}

.sec-head {
    margin-bottom: 60px;
}

.sec-head h2 {
    font-size: 52px;
    margin: 18px 0;
}

.sec-head h2 span {
    color: var(--primary-gold);
}


/* cards */
.service-box {

    background: var(--white);

    padding: 50px 35px;

    border-radius: 35px;

    text-align: center;

    min-height: 420px;

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

    transition: .4s;
}

.service-box:hover {
    transform: translateY(-10px);
}

/* icon image */
.service-box img {
    width: 100px;
    height: 100px;

    border-radius: 50%;
    object-fit: cover;

    margin-bottom: 25px;
}

.service-box h4 {
    font-size: 30px;
    margin-bottom: 20px;
}

.service-box p {
    line-height: 1.8;
}


/* mobile */
@media(max-width:992px) {

    .all-services-sec {
        padding: 70px 0;
    }

    .sec-head h2 {
        font-size: 34px;
    }

    .service-box {
        min-height: auto;
        padding: 35px 25px;
    }

    .service-box h4 {
        font-size: 24px;
    }

}

.gallery-sec {
    padding: 100px 0;
    background: var(--white);
}

/* masonry */
.gallery-grid {

    display: grid;

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

    grid-auto-rows: 250px;

    gap: 20px;
}

.gallery-item {

    display: block;

    overflow: hidden;

    border-radius: 30px;

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

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: .45s;
}

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

/* variations */
.tall {
    grid-row: span 2;
}

.wide {
    grid-column: span 2;
}


/* mobile */
@media(max-width:992px) {

    .gallery-sec {
        padding: 70px 0;
    }

    .gallery-grid {

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

        grid-auto-rows: 180px;
    }

}

@media(max-width:576px) {

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

    .wide,
    .tall {
        grid-column: auto;
        grid-row: auto;
    }

}

.btn-appointment {

    background: var(--accent);
    color: var(--white);

    padding: 14px 28px;

    border-radius: 12px;

    font-weight: 600;

    transition: .35s;
}

/* hover */
.btn-appointment:hover {
    background: var(--primary-gold);
    color: var(--black);
}


/* active */
.btn-appointment.active-btn {

    background: var(--primary-gold);

    color: var(--black);

    box-shadow:
        0 8px 20px rgba(212, 175, 55, .25);

}

/* =========================
APPOINTMENT FORM
========================= */

.appoint-form-sec {
    padding: 110px 0;
    background: var(--hero-left-bg);
}

.appoint-box {

    background: var(--white);

    padding: 80px 70px;

    border-radius: 42px;

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

    position: relative;

    overflow: hidden;
}

/* subtle accent top bar */
.appoint-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 6px;

    background: linear-gradient(90deg,
            var(--accent),
            var(--primary-gold));
}


/* heading */
.sec-head {
    margin-bottom: 55px;
}

.sec-head h2 {
    font-size: 54px;
    margin-top: 18px;
}

.sec-head h2 span {
    color: var(--primary-gold);
}


/* =========================
FORM FIELDS
========================= */

#appointmentForm input,
#appointmentForm select,
#appointmentForm textarea {

    width: 100%;

    padding: 18px 22px;

    background: #fafafa;

    border: 1px solid #dfe5e8;

    border-radius: 16px;

    outline: none;

    font-size: 16px;

    transition: .35s;
}

/* focus */
#appointmentForm input:focus,
#appointmentForm select:focus,
#appointmentForm textarea:focus {

    background: var(--white);

    border-color: var(--accent);

    box-shadow: 0 0 0 4px rgba(0, 168, 150, .08);

    transform: translateY(-2px);
}


/* select arrow better */
#appointmentForm select {
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #666 50%),
        linear-gradient(135deg, #666 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 50%,
        calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* textarea */
#appointmentForm textarea {
    min-height: 150px;
    resize: none;
}


/* button */
#appointmentForm .hero-btn {
    border: none;
    cursor: pointer;
    padding: 18px 38px;
}

#appointmentForm .hero-btn:hover {
    transform: translateY(-4px);
}


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

@media(max-width:992px) {

    .appoint-form-sec {
        padding: 70px 0;
    }

    .appoint-box {
        padding: 45px 25px;
        border-radius: 28px;
    }

    .sec-head h2 {
        font-size: 34px;
    }

    #appointmentForm input,
    #appointmentForm select,
    #appointmentForm textarea {
        padding: 15px 18px;
        font-size: 15px;
    }

}

.footer-contact li {
    margin-bottom: 18px;
    line-height: 1.8;
}

.footer-contact i {
    margin-right: 12px;
    min-width: 22px;
}

/* =========================
SUPER CONTACT BOX
========================= */

.contact-call-box {

    background: linear-gradient(135deg,
            var(--accent),
            #72d7ce);

    border-radius: 36px;

    padding: 42px 36px;

    display: grid;

    grid-template-columns:
        1fr 110px 1fr;

    align-items: center;

    gap: 30px;

    box-shadow:
        0 25px 60px rgba(0, 168, 150, .20);

    position: relative;

    overflow: hidden;
}

/* decorative glow */
.contact-call-box::before {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    right: -50px;
    top: -50px;

    border-radius: 50%;

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


/* left/right blocks */
.call-block {
    position: relative;
    z-index: 2;
}

.call-block h6 {
    font-size: 15px;
    letter-spacing: .6px;
    margin-bottom: 14px;

    color: rgba(255, 255, 255, .9);
}

.call-block h3 {
    font-size: 24px;
    line-height: 1.5;
    margin-bottom: 8px;

    color: var(--white);
}

.call-block a {
    color: var(--white);

    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, .35);
}


/* center call button */
.call-circle {

    width: 96px;
    height: 96px;

    border-radius: 50%;

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

    border: 5px solid rgba(255, 255, 255, .18);

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

    text-decoration: none;

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

    transition: .35s;
}

.call-circle i {
    font-size: 34px;
    color: var(--white);
}

.call-circle:hover {
    transform: translateY(-5px) scale(1.05);
    background: var(--white);
}

.call-circle:hover i {
    color: var(--accent);
}


/* mobile */
@media(max-width:992px) {

    .contact-call-box {

        grid-template-columns: 1fr;

        text-align: center;

        padding: 32px 22px;

        gap: 22px;
    }

    .call-circle {
        margin: auto;
        width: 74px;
        height: 74px;
    }

    .call-circle i {
        font-size: 28px;
    }

    .call-block h3 {
        font-size: 20px;
    }

}

.contact-sec {
    padding: 100px 0;
}

.row.align-items-start {
    align-items: flex-start;
}

/* equal map height */
.map-wrap iframe {
    width: 100%;
    height: 500px;
    border: 0;
    border-radius: 30px;
}

/* contact box now full width */
.contact-call-box {
    max-width: 900px;
    margin: auto;
    margin-top: 50px;
}

.stat-box h3::after {
    content: "K+";
}

/* =====================
LEFT FLOAT CALL BUTTON
===================== */

.call-float {

    position: fixed;

    left: 25px;
    bottom: 25px;

    z-index: 9999;

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

    background: linear-gradient(135deg,
            var(--primary-gold),
            #e9c75a);

    color: var(--black);

    padding: 15px 22px;

    border-radius: 60px;

    text-decoration: none;

    font-weight: 700;

    box-shadow:
        0 12px 30px rgba(212, 175, 55, .35);

    animation: callPulse 2s infinite;
}

/* icon */
.call-float i {
    font-size: 28px;
}


/* pulse ring */
.call-float::before {

    content: "";

    position: absolute;

    inset: -8px;

    border-radius: 60px;

    border: 2px solid rgba(212, 175, 55, .35);

    animation: ringPulse 2s infinite;
}


/* hover */
.call-float:hover {
    transform: translateY(-4px);
    color: var(--black);
}


/* animation */
@keyframes callPulse {

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

}

@keyframes ringPulse {

    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.15);
        opacity: 0;
    }

}


/* mobile icon only */
@media(max-width:768px) {

    .call-float {

        width: 62px;
        height: 62px;

        padding: 0;

        border-radius: 50%;

        justify-content: center;
    }

    .call-float span {
        display: none;
    }

    .call-float i {
        font-size: 30px;
    }

    .call-float::before {
        border-radius: 50%;
    }

}

.testimonial-marquee {
    padding: 100px 0;
    background: var(--hero-left-bg);
    overflow: hidden;
}

/* rows */
.marquee-row {
    overflow: hidden;
    margin-top: 40px;
}

.marquee-track {
    display: flex;
    gap: 25px;
    width: max-content;
}

/* animation */
.left-move .marquee-track {
    animation: moveLeft 25s linear infinite;
}

.right-move .marquee-track {
    animation: moveRight 25s linear infinite;
}

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

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

@keyframes moveRight {
    0% {
        transform: translateX(-50%);
    }

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


/* cards */
.test-card {

    width: 380px;

    background: #f6efe4;

    padding: 30px 28px;

    border-radius: 28px;

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

    flex-shrink: 0;
}

/* stars */
.stars {
    color: #f5b301;
    font-size: 18px;
    margin-bottom: 12px;
}

/* text */
.test-card p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    min-height: 130px;
}

/* client */
.client {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.client img {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}

.client span {
    font-weight: 600;
}


/* mobile */
@media(max-width:768px) {

    .test-card {
        width: 280px;
        padding: 22px;
    }

    .test-card p {
        font-size: 14px;
    }

}