:root {
    --bg: #0b1220;
    --bg2: #0f1a33;
    --stroke: rgba(255, 255, 255, .12);
    --text: rgba(255, 255, 255, .92);
    --muted: rgba(255, 255, 255, .72);
    --shadow: 0 18px 45px rgba(0, 0, 0, .45);
    --brand: #ce2029;
}

body {
    margin: 0;
    background: #f3f4f6;
}

/* -----------------------------
       TOP STRIP (NOT STICKY)
    ------------------------------*/
.top-strip-wrap {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
}

.top-strip {
    font-size: 13px;
    color: #4b5563;
}

.top-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .6rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
    white-space: nowrap;
}

/* -----------------------------
       NAVBAR BASE (NORMAL)
    ------------------------------*/
.premium-nav {
    background:
        radial-gradient(120% 160% at 10% 0%, rgba(206, 32, 41, .16), transparent 55%),
        radial-gradient(120% 160% at 90% 0%, rgba(0, 160, 255, .12), transparent 55%),
        linear-gradient(180deg, rgba(15, 26, 51, .96), rgba(11, 18, 32, .96));
    border-bottom: 1px solid var(--stroke);
    transition: .22s ease;
}

/* When fixed */
.premium-nav.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* spacer (only used when fixed) */
.nav-spacer {
    height: 0px;
}

/* Brand */
.brand-mark {
    width: 100px;
    height: 70px;
    border-radius: 16px;
    /* display: grid; */
    place-items: center;
    /* color: #fff; */
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .30);
    flex: 0 0 auto;
}

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

.brand-text b {
    color: #fff;
    letter-spacing: .2px;
}

.brand-text small {
    color: var(--muted);
}

/* Nav links */
.nav-premium .nav-link {
    color: rgba(255, 255, 255, .86) !important;
    font-weight: 700;
    padding: .62rem .95rem;
    border-radius: 999px;
    transition: .18s ease;
    border-radius: 0px !important;

}

.nav-premium .nav-link:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff !important;
    transform: translateY(-1px);
    border-radius: 0px !important;

}

.nav-premium .nav-link.active {
    background: rgba(206, 32, 41, .22);
    border: 1px solid rgba(206, 32, 41, .28);
    color: #fff !important;
    border-radius: 0px !important;
}

/* Make hamburger icon visible on dark */
.navbar-toggler {
    border: 0;
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* Dropdown */
.dropdown-menu {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, .12);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}

.dropdown-item {
    color: rgba(255, 255, 255, .88);
    font-weight: 650;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

/* CTA */
.btn-cta {
    border-radius: 999px;
    padding: .62rem 1rem;
    font-weight: 800;
    border: 1px solid rgba(206, 32, 41, .25);
    color: #fff;
    background:
        radial-gradient(120% 120% at 10% 10%, rgba(206, 32, 41, .18), transparent 55%),
        linear-gradient(135deg, rgba(206, 32, 41, .95), rgba(206, 32, 41, .70));
    box-shadow: 0 12px 22px rgba(206, 32, 41, .20);
}

.btn-cta:hover {
    filter: brightness(1.03);
    transform: translateY(-1px);
}

/* ======================================================
   ABOUT + TREATMENTS – PREMIUM UNIQUE DESIGN
====================================================== */

.about-premium {
    padding: 110px 0;
    background: linear-gradient(180deg, #fff4f8, #ffffff);
}

/* ---------- ABOUT IMAGE ---------- */

.about-image-layer {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.18);
}

.about-image-layer::after {
    content: "";
    position: absolute;
    inset: 15px;
    border: 2px solid rgba(233, 30, 99, 0.35);
    border-radius: 22px;
    pointer-events: none;
}

.about-image-layer img {
    width: 100%;
    transition: transform 0.6s ease;
}

.about-image-layer:hover img {
    transform: scale(1.06);
}

/* ---------- ABOUT CONTENT ---------- */

.about-box {
    padding: 30px 40px;
    border-left: 4px solid #e91e63;
}

.about-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e91e63;
    text-transform: uppercase;
}

.about-box h2 {
    font-size: 40px;
    font-weight: 800;
    margin-bottom: 18px;
}

.about-box p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 15px;
}

/* ---------- BUTTON ---------- */

.btn-modern {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 34px;
    background: linear-gradient(135deg, #e91e63, #ff5c8d);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.35s ease;
}

.btn-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(233, 30, 99, 0.45);
}

/* ======================================================
   TREATMENT SECTION – MINI CARDS (BIG IMAGE + SPACING)
====================================================== */

.treatment-premium {
    margin-top: 100px;
}

/* Header */
.treatment-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 45px;
}

.treatment-head h2 {
    font-size: 36px;
    font-weight: 800;
    color: #2c2c2c;
}

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

.treatment-mini {
    display: flex;
    align-items: center;
    gap: 22px;
    background: #ffffff;
    padding: 22px;
    border-radius: 22px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
    transition: all 0.35s ease;
    height: 100%;
    margin-bottom: 14px;
    /* 🔥 bottom spacing added */
}

.treatment-mini:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 60px rgba(233, 30, 99, 0.25);
}

/* Image – BIG SIZE */
.treatment-mini img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 16px;
    flex-shrink: 0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    transition: transform 0.35s ease;
    position: relative;
    border-radius: 26px;
    overflow: hidden;
}



.treatment-mini:hover img {
    transform: scale(1.05);
}


.treatment-mini:hover img {
    transform: scale(1.05);
    transition: transform .35s ease;
}

/* Content */
.treatment-mini h4 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 8px;
    color: #2c2c2c;
}

.treatment-mini p {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
    margin-bottom: 8px;
}

/* Link */
.treatment-mini a {
    color: #e91e63;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
}

.treatment-mini a:hover {
    gap: 10px;
}

/* ======================================================
   VIEW ALL BUTTON
====================================================== */

.btn-outline-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid #e91e63;
    color: #e91e63;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-modern:hover {
    background: #e91e63;
    color: #ffffff;
}

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

@media (max-width: 991px) {
    .treatment-mini {
        padding: 18px;
        gap: 18px;
        margin-bottom: 14px;
    }

    .treatment-mini img {
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 575px) {
    .treatment-mini {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 18px;
        /* mobile এ একটু বেশি space */
    }

    .treatment-mini img {
        width: 100%;
        height: 200px;
        border-radius: 18px;
    }
}





/* ===============================
   PREMIUM WHY SECTION (NO IMAGE)
================================ */
.apply-wrap-premium {
    position: relative;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 10% 20%, rgba(206, 32, 41, .16), transparent 60%),
        radial-gradient(900px 520px at 90% 30%, rgba(0, 160, 255, .14), transparent 60%),
        linear-gradient(180deg, #0f1a33, #0b1220);
}

/* subtle grid texture (premium) */
.apply-wrap-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .20;
    pointer-events: none;
}

/* floating background shapes */
.apply-bg-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.apply-bg-shapes .shape {
    position: absolute;
    border-radius: 999px;
    filter: blur(28px);
    opacity: .55;
    transform: translateZ(0);
}

.apply-bg-shapes .s1 {
    width: 280px;
    height: 280px;
    left: -80px;
    top: 40px;
    background: rgba(206, 32, 41, .35);
}

.apply-bg-shapes .s2 {
    width: 340px;
    height: 340px;
    right: -120px;
    top: 120px;
    background: rgba(0, 160, 255, .28);
}

.apply-bg-shapes .s3 {
    width: 320px;
    height: 320px;
    left: 35%;
    bottom: -160px;
    background: rgba(124, 58, 237, .22);
}

/* heading */
.apply-head {
    position: relative;
    z-index: 1;
}

.apply-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .4rem .85rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .82);
    font-weight: 800;
    font-size: 13px;
}

.apply-title {
    margin-top: 12px;
    color: #fff;
    font-weight: 950;
    letter-spacing: .2px;
    font-size: clamp(28px, 3.2vw, 40px);
}

.apply-subtitle {
    margin: 10px auto 0;
    max-width: 760px;
    color: rgba(255, 255, 255, .72);
    line-height: 1.6;
}

/* ===============================
   CARD
================================ */
.why-card {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 28px 22px;
    border-radius: 22px;
    color: rgba(255, 255, 255, .88);
    background:
        radial-gradient(120% 160% at 10% 0%, rgba(255, 255, 255, .10), transparent 55%),
        rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 22px 55px rgba(0, 0, 0, .35);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    overflow: hidden;
}

/* top accent line */
.why-card::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 14px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(var(--accent), .0),
            rgba(var(--accent), .9),
            rgba(var(--accent), .0));
    opacity: .9;
}

/* side glow */
.why-card::after {
    content: "";
    position: absolute;
    inset: -40px;
    background: radial-gradient(500px 220px at 20% 20%, rgba(var(--accent), .18), transparent 60%);
    opacity: .75;
    pointer-events: none;
}

.why-card:hover {
    transform: translateY(-10px);
    border-color: rgba(var(--accent), .35);
    box-shadow: 0 35px 75px rgba(var(--accent), .22), 0 25px 60px rgba(0, 0, 0, .40);
}

/* icon as background element */
/* ===============================
   PREMIUM ICON BOX (UPGRADED)
================================ */
.why-iconbox {
    --ring: rgba(var(--accent), .45);

    width: 70px;
    height: 70px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    margin: 10px 0 18px;
    position: relative;

    /* layered background */
    background:
        radial-gradient(120% 120% at 30% 30%, rgba(var(--accent), .35), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02));

    /* premium rings */
    border: 1px solid rgba(var(--accent), .55);
    box-shadow:
        0 0 0 6px rgba(var(--accent), .12),
        /* soft outer ring */
        0 18px 32px rgba(var(--accent), .35),
        /* glow */
        inset 0 0 0 1px rgba(255, 255, 255, .25);

    transition: transform .25s ease, box-shadow .25s ease;
}

/* BIG soft halo */
.why-iconbox::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: 28px;
    background: radial-gradient(circle, rgba(var(--accent), .45), transparent 65%);
    filter: blur(22px);
    opacity: .7;
    z-index: 0;
}

/* ICON ITSELF */
.why-iconbox i {
    font-size: 28px;
    font-weight: 900;
    z-index: 1;

    /* colored icon */
    background: linear-gradient(135deg,
            rgba(var(--accent), 1),
            rgba(var(--accent), .75));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /* crisp edge */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35));
}

/* Hover effect */
.why-card:hover .why-iconbox {
    transform: translateY(-3px) scale(1.05);
    box-shadow:
        0 0 0 8px rgba(var(--accent), .18),
        0 28px 55px rgba(var(--accent), .55),
        inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.why-card h4 {
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 10px;
}

.why-card p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

/* Responsive */
@media (max-width: 991.98px) {
    .apply-wrap-premium {
        padding: 70px 0;
    }

    .apply-subtitle {
        padding: 0 12px;
    }
}



/* ======================================================
   GALLERY – COMPACT & CLEAN PREMIUM
====================================================== */

.gallery-modern {
    padding: 40px 0;
    background: linear-gradient(180deg, #fff3f7, #ffffff);
}

/* Header */
.gallery-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 35px;
}

.gallery-header h2 {
    font-size: 36px;
    font-weight: 800;
    color: #2c2c2c;
}

/* Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

/* Item */
.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.gallery-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover effects (SUBTLE) */
.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(233, 30, 99, 0.25);
}

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

/* Overlay */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(233, 30, 99, 0.7),
            rgba(0, 0, 0, 0.45));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.35s ease;
}

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

/* Icon */
.gallery-overlay a {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    color: #e91e63;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transform: scale(0.8);
    transition: transform 0.35s ease;
}

.gallery-item:hover .gallery-overlay a {
    transform: scale(1);
}

/* Button */
.btn-outline-modern {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 22px;
    border-radius: 30px;
    border: 2px solid #e91e63;
    color: #e91e63;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-outline-modern:hover {
    background: #e91e63;
    color: #ffffff;
}

/* Responsive */
@media (max-width: 767px) {
    .gallery-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .gallery-header h2 {
        font-size: 30px;
    }

    .gallery-item img {
        height: 200px;
    }
}




/* ======================================================
   TESTIMONIAL – PREMIUM SPEECH BUBBLE (UNIQUE)
====================================================== */

.testimonial-luxury {
    position: relative;
    padding: 40px 0;
    background: linear-gradient(180deg, #fff3f7, #ffffff);
    overflow: hidden;
}

.testimonial-bg-shape {
    position: absolute;
    width: 520px;
    height: 520px;
    background: radial-gradient(circle, rgba(233, 30, 99, .20), transparent 70%);
    top: -220px;
    right: -180px;
    filter: blur(55px);
    z-index: 0;
}

.testimonial-luxury .container {
    position: relative;
    z-index: 2;
}

/* Title */
.testimonial-luxury .section-title span {
    color: #c2185b;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.testimonial-luxury .section-title h2 {
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 950;
    margin-top: 10px;
    color: #101828;
}

.testimonial-luxury .subtitle {
    max-width: 650px;
    margin: 12px auto 0;
    font-size: 16px;
    color: #667085;
    line-height: 1.6;
}

/* Owl stage */
.testimonial-slider .owl-stage {
    display: flex;
    align-items: center;
}

/* Side slides */
.testimonial-slider .owl-item {
    opacity: .35;
    transform: scale(.86);
    transition: all .55s ease;
}

.testimonial-slider .owl-item.active.center {
    opacity: 1;
    transform: scale(1);
}

/* Card (speech bubble style) */
.testimonial-glass {
    position: relative;
    border-radius: 28px;
    padding: 26px 28px 24px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(16, 24, 40, .08);
    /* box-shadow: 0 24px 65px rgba(16, 24, 40, .12); */
    overflow: hidden;
}

/* premium gradient ring on top */
.testimonial-glass::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 14px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg,
            rgba(233, 30, 99, 0),
            rgba(233, 30, 99, .95),
            rgba(14, 165, 233, .85),
            rgba(233, 30, 99, 0));
    opacity: .85;
}

/* quote watermark */
.t-quote-mark {
    position: absolute;
    right: 16px;
    top: 6px;
    font-size: 90px;
    font-family: serif;
    color: rgba(233, 30, 99, .14);
    pointer-events: none;
    line-height: 1;
}

/* Top badge */
.t-badge {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.t-avatar {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    font-weight: 950;
    color: #fff;
    background: linear-gradient(135deg, #e91e63, #ff5c8d);
    box-shadow: 0 12px 28px rgba(233, 30, 99, .22);
}

.t-meta {
    min-width: 0;
}

.t-name {
    font-weight: 900;
    color: #101828;
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.t-sub {
    font-size: 13px;
    color: #667085;
    margin-top: 2px;
}

.t-verified {
    font-size: 12px;
    font-weight: 800;
    color: rgba(17, 24, 39, .85);
    background: rgba(17, 24, 39, .06);
    border: 1px solid rgba(17, 24, 39, .10);
    padding: .18rem .5rem;
    border-radius: 999px;
}

.t-verified i {
    color: #22c55e;
}

/* Message */
.testimonial-glass .message {
    font-size: 16.5px;
    line-height: 1.85;
    color: #344054;
    margin: 12px 0 18px;
}

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

.rating {
    font-size: 18px;
    color: #f5b301;
}

.t-cta {
    text-decoration: none;
    font-weight: 900;
    color: #c2185b;
}

.t-cta:hover {
    text-decoration: underline;
}

/* speech bubble tail */
.t-tail {
    position: absolute;
    left: 46px;
    bottom: -10px;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, .92);
    border-left: 1px solid rgba(16, 24, 40, .08);
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    transform: rotate(45deg);
    border-bottom-left-radius: 6px;
}

/* Dots */
.testimonial-slider .owl-dots {
    margin-top: 36px;
    text-align: center;
}

.testimonial-slider .owl-dot span {
    width: 18px;
    height: 6px;
    background: rgba(233, 30, 99, .20);
    border-radius: 999px;
    margin: 0 6px;
    transition: .2s ease;
}

.testimonial-slider .owl-dot.active span {
    width: 34px;
    background: rgba(233, 30, 99, .95);
}

/* Responsive */
@media (max-width: 991px) {
    .testimonial-glass {
        padding: 22px 20px;
    }
}

@media (max-width: 767px) {
    .testimonial-slider .owl-item {
        opacity: 1;
        transform: scale(1);
    }

    .t-tail {
        display: none;
    }
}



/* ======================================================
   WHY CHOOSE US – UNIQUE TIMELINE DESIGN
====================================================== */
/* ===============================
   WHY V4 (UNIQUE + PROFESSIONAL)
================================ */
.why-v4 {
    padding: 40px 0;
    background:
        radial-gradient(900px 520px at 10% 20%, rgba(233, 30, 99, .10), transparent 60%),
        radial-gradient(900px 520px at 90% 30%, rgba(14, 165, 233, .10), transparent 60%),
        linear-gradient(180deg, #fff7fb, #ffffff);
}

/* Heading */
.why-v4-head .kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .35rem .8rem;
    border-radius: 999px;
    background: rgba(233, 30, 99, .08);
    border: 1px solid rgba(233, 30, 99, .18);
    color: #e91e63;
    font-weight: 800;
    letter-spacing: .8px;
    font-size: 13px;
}

.why-v4-head h2 {
    margin-top: 12px;
    font-size: clamp(30px, 3.2vw, 44px);
    font-weight: 950;
    letter-spacing: .2px;
    color: #101828;
}

.why-v4-head .subtitle {
    max-width: 680px;
    margin: 10px auto 0;
    color: #667085;
    line-height: 1.6;
}

/* Rail */
.why-v4-rail {
    position: relative;
    padding-left: 74px;
}

.why-v4-rail::before {
    content: "";
    position: absolute;
    left: 30px;
    top: 10px;
    bottom: 10px;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(233, 30, 99, .95), rgba(233, 30, 99, .18));
    box-shadow: 0 18px 40px rgba(233, 30, 99, .18);
}

/* Step layout */
.why-v4-step {
    position: relative;
    display: grid;
    grid-template-columns: 0 1fr;
    gap: 18px;
    margin-bottom: 22px;
}

/* ===============================
   FIXED TIMELINE LAYOUT
================================ */

.why-v4-rail {
    position: relative;
    margin-top: 30px;
}

/* vertical line */
.why-v4-rail::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, #e91e63, rgba(233, 30, 99, .2));
    border-radius: 999px;
}

/* step row */
.why-v4-step {
    display: grid;
    grid-template-columns: 80px 1fr;
    /* KEY FIX */
    column-gap: 24px;
    margin-bottom: 34px;
    position: relative;
}

/* rail column */
.rail-col {
    position: relative;
}

/* node */
.rail-node {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #e91e63, #ff5c8d);
    box-shadow:
        0 0 0 8px rgba(233, 30, 99, .12),
        0 18px 40px rgba(233, 30, 99, .22);
    border: 1px solid rgba(255, 255, 255, .35);
    position: relative;
    margin-left: 6px;
}

.rail-node .num {
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 11px;
    padding: .25rem .45rem;
    border-radius: 999px;
    background: #111827;
    color: #fff;
    font-weight: 800;
}

/* content column */
.content-col {
    min-width: 0;
    /* CRITICAL FIX */
}

/* card */
.why-v4-card {
    background: #fff;
    border-radius: 22px;
    padding: 24px 26px;
    box-shadow: 0 18px 45px rgba(16, 24, 40, .08);
    border-left: 4px solid rgba(var(--accent), .95);
}

.why-v4-card h4 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 10px;
    color: #101828;
}

.why-v4-card p {
    font-size: 15.5px;
    line-height: 1.75;
    color: #475467;
    margin: 0;
    white-space: normal;
    /* IMPORTANT */
    word-break: normal;
}

/* hover */
.why-v4-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 65px rgba(233, 30, 99, .18);
}

/* ===============================
   MOBILE FIX
================================ */
@media (max-width: 768px) {
    .why-v4-step {
        grid-template-columns: 20px 1fr;
        column-gap: 0px;
    }

    .why-v4-rail {
        padding-left: 20px !important;
    }

    .why-v4-rail::before {
        left: 22px;
    }
}


/* CTA card */
.why-v4-card.cta {
    background: linear-gradient(135deg, #e91e63, #ff5c8d);
    border: 0;
    color: #fff;
    box-shadow: 0 30px 70px rgba(233, 30, 99, .25);
}

.why-v4-card.cta::before {
    display: none;
}

.why-v4-card.cta h4 {
    color: #fff;
}

.why-v4-card.cta p {
    color: rgba(255, 255, 255, .90);
}

/* Visual side */
.why-v4-visual {
    position: relative;
    padding-left: 10px;
}

.visual-frame {
    border-radius: 28px;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 40, .10);
    box-shadow: 0 35px 90px rgba(16, 24, 40, .18);
    background: #fff;
}

.visual-frame img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.02);
}

/* Badge */
.visual-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(16, 24, 40, .10);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .12);
}

.visual-badge i {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(233, 30, 99, .10);
    color: #e91e63;
    font-size: 18px;
}

.visual-badge b {
    display: block;
    font-weight: 900;
    color: #101828;
}

.visual-badge span {
    display: block;
    font-size: 13px;
    color: #667085;
}

/* Stats chips */
.visual-stats {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 10px;
}

.visual-stats .stat {
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .84);
    border: 1px solid rgba(16, 24, 40, .10);
    box-shadow: 0 18px 40px rgba(16, 24, 40, .10);
    text-align: left;
    min-width: 140px;
}

.visual-stats .stat b {
    display: block;
    font-weight: 950;
    color: #101828;
    line-height: 1.1;
}

.visual-stats .stat span {
    display: block;
    color: #667085;
    font-size: 13px;
}

/* Responsive */
@media (max-width: 991.98px) {
    .why-v4 {
        padding: 30px 0;
    }

    .why-v4-rail {
        padding-left: 60px;
    }

    .why-v4-rail::before {
        left: 24px;
    }

    .rail-node {
        left: 2px;
        z-index: 2;
    }

    .why-v4-visual {
        margin-top: 10px;
    }

    .visual-stats {
        position: static;
        display: flex;
        gap: 10px;
        margin-top: 12px;
    }

    .visual-badge {
        position: static;
        margin-top: 12px;
    }
}


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

@media (max-width: 991px) {
    .why-image-unique {
        padding-left: 0;
        margin-top: 50px;
    }

    .why-timeline {
        padding-left: 20px;
    }
}

@media (max-width: 767px) {
    .why-timeline::before {
        left: 6px;
    }

    .step-dot {
        margin-right: 20px;
    }

    .why-card {
        padding: 24px;
    }
}



/* ======================================================
   BLOG SECTION – MODERN SLIDER
====================================================== */

.blog-modern {
    padding: 40px 0;
    /* background: linear-gradient(180deg, #ffffff, #fff3f7); */
}

/* Header */
.blog-header .sub-title {
    color: #e91e63;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
}

.blog-header h2 {
    font-size: 42px;
    font-weight: 800;
    margin-top: 8px;
}

/* Slider */
.blog-slider .owl-stage {
    display: flex;
    align-items: stretch;
}

/* Card */
.blog-card {
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
    /* box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12); */
    transition: all 0.4s ease;
    height: 100%;
}

.blog-card:hover {
    transform: translateY(-10px);
    /* box-shadow: 0 35px 90px rgba(233, 30, 99, 0.25); */
}

/* Image */
.blog-img {
    position: relative;
    overflow: hidden;
}

.blog-img img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.blog-card:hover .blog-img img {
    transform: scale(1.1);
}

/* Body */
.blog-body {
    padding: 28px 30px 32px;
}

.blog-body h5 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #2c2c2c;
}

.blog-body p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 18px;
}

/* Read more */
.read-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #e91e63;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    gap: 12px;
}

/* Owl dots */
.blog-slider .owl-dots {
    margin-top: 45px;
    text-align: center;
}

.blog-slider .owl-dot span {
    width: 12px;
    height: 12px;
    background: #f1c2d2;
    border-radius: 50%;
    margin: 0 6px;
    transition: all 0.3s ease;
}

.blog-slider .owl-dot.active span {
    background: #e91e63;
    transform: scale(1.4);
}

/* Responsive */
@media (max-width: 991px) {
    .blog-header h2 {
        font-size: 34px;
    }

    .blog-img img {
        height: 220px;
    }
}

@media (max-width: 767px) {
    .blog-body {
        padding: 22px;
    }

    .blog-body h5 {
        font-size: 18px;
    }
}



/* ===============================
   PAGE BANNER (Premium + Breadcrumb)
================================ */
.page-banner {
    position: relative;
    padding: 30px 0;
    overflow: hidden;
    background:
        radial-gradient(900px 520px at 12% 10%, rgba(206, 32, 41, .18), transparent 60%),
        radial-gradient(900px 520px at 88% 15%, rgba(0, 160, 255, .14), transparent 60%),
        linear-gradient(180deg, #0f1a33, #0b1220);
    border-bottom: 1px solid rgba(255, 255, 255, .10);
}

/* subtle texture */
.page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 52px 52px;
    opacity: .22;
    pointer-events: none;
}

/* extra glow layer */
.page-banner-bg {
    position: absolute;
    inset: -60px;
    background: radial-gradient(600px 260px at 50% 0%, rgba(206, 32, 41, .16), transparent 70%);
    filter: blur(22px);
    opacity: .9;
    pointer-events: none;
}

/* Breadcrumb */
.page-breadcrumb .breadcrumb {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: .45rem .8rem;
    display: inline-flex;
    gap: .15rem;
}

.page-breadcrumb .breadcrumb-item,
.page-breadcrumb .breadcrumb-item a {
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.page-breadcrumb .breadcrumb-item a:hover {
    color: #fff;
}

.page-breadcrumb .breadcrumb-item.active {
    color: rgba(255, 255, 255, .92);
}

.page-breadcrumb .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, .45);
}

/* Title + subtitle */
.page-title {
    color: #fff;
    font-weight: 950;
    letter-spacing: .2px;
    line-height: 1.1;
    font-size: clamp(30px, 4vw, 48px);
}

.page-subtitle {
    color: rgba(255, 255, 255, .72);
    max-width: 680px;
    line-height: 1.6;
    font-size: 16px;
}

/* Chips (right side) */
.page-chips {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.page-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .5rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .82);
    font-weight: 800;
    font-size: 13px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Responsive */
@media (max-width: 991.98px) {
    .page-banner {
        padding: 56px 0;
    }

    .page-title {
        text-align: left;
    }
}

@media (max-width: 575.98px) {
    .page-banner {
        padding: 48px 0;
    }

    .page-breadcrumb .breadcrumb {
        padding: .4rem .7rem;
    }
}


/* ======================================================
   SHORT CONTACT CTA – LIGHT & PREMIUM
====================================================== */
.contact-cta-mini {
    padding: 60px 0;
    background: #ffffff;
    border-top: 1px solid #f0f2f5;
}

.cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 34px 40px;
    border-radius: 26px;
    background:
        linear-gradient(90deg, rgba(233, 30, 99, .06) 0%, rgba(255, 255, 255, 1) 38%);
    border: 1px solid #f0f2f5;
    box-shadow: 0 22px 55px rgba(16, 24, 40, .08);
    position: relative;
    overflow: hidden;
}

/* subtle accent stripe */
.cta-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #e91e63, #ff5f8a);
}

/* Left */
.cta-left {
    max-width: 620px;
}

.cta-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: rgba(233, 30, 99, .08);
    border: 1px solid rgba(233, 30, 99, .16);
    color: #c2185b;
    font-weight: 900;
    font-size: 13px;
}

.cta-left h3 {
    margin: 12px 0 8px;
    font-size: clamp(22px, 2.8vw, 32px);
    font-weight: 900;
    color: #101828;
}

.cta-left p {
    margin: 0;
    color: #475467;
    font-size: 15.5px;
    line-height: 1.6;
}

/* Right */
.cta-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cta-link {
    color: #e91e63;
    font-weight: 900;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cta-link i {
    transition: transform .2s ease;
}

.cta-link:hover i {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991.98px) {
    .cta-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 24px;
    }

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




/* ======================================================
   ABOUT PAGE – IMAGE & TEXT SAME HEIGHT (WORKING FIX)
====================================================== */

.about-page-modern {
    padding: 40px 0;
    background: linear-gradient(180deg, #fff4f8, #ffffff);
}

/* Block spacing */
.about-block {
    margin-bottom: 90px;
}

.about-block.reverse .row {
    flex-direction: row-reverse;
}

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

.about-image-frame {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.18);
    height: 100%;
    /* 🔥 now works */
}

.about-image-frame::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 2px solid rgba(233, 30, 99, 0.35);
    border-radius: 24px;
    pointer-events: none;
}

.about-image-frame img {
    width: 100%;
    height: 100%;
    /* 🔥 important */
    object-fit: cover;
    transition: transform 0.6s ease;
}

.about-image-frame:hover img {
    transform: scale(1.05);
}

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

.about-text-card {
    background: #ffffff;
    padding: 40px 45px;
    border-radius: 26px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    position: relative;
    height: 100%;
    /* 🔥 same height as image */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-tag {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e91e63;
    text-transform: uppercase;
}

.about-text-card h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 18px;
    color: #2c2c2c;
}

.about-text-card p {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 14px;
}

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

@media (max-width: 991px) {
    .about-text-card {
        height: auto;
        margin-top: 30px;
        padding: 30px;
    }

    .about-image-frame {
        height: auto;
        min-height: 250px;
    }

    .about-text-card h2 {
        font-size: 30px;
    }

    .about-block {
        margin-bottom: 70px;
    }
}





/* ======================================================
   TREATMENT page / BLOG GRID – MODERN PREMIUM DESIGN
====================================================== */

.treatment-grid-modern {
    padding: 40px 0;
    background: linear-gradient(180deg, #ffffff, #fff4f8);
}

/* Card base */
.treatment-card-modern {
    background: #ffffff;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 20px 55px rgba(0, 0, 0, 0.12);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: all 0.4s ease;
}

.treatment-card-modern:hover {
    transform: translateY(-8px);
    box-shadow: 0 35px 90px rgba(233, 30, 99, 0.25);
}

/* Image */
.card-image {
    position: relative;
    height: 230px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.treatment-card-modern:hover .card-image img {
    transform: scale(1.1);
}

/* Overlay */
.card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(233, 30, 99, 0.45),
            transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.treatment-card-modern:hover .card-image::after {
    opacity: 1;
}

/* Content */
.card-content {
    padding: 26px 24px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-content h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2c2c2c;
    margin-bottom: 10px;
}

.card-content p {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin-bottom: 18px;
    flex-grow: 1;
}

/* Read More */
.card-content a {
    align-self: flex-start;
    color: #e91e63;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
}

.card-content a span {
    transition: transform 0.3s ease;
}

.card-content a:hover {
    gap: 12px;
}

.card-content a:hover span {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991px) {
    .card-image {
        height: 210px;
    }
}

@media (max-width: 575px) {
    .card-image {
        height: 190px;
    }
}


/* ======================================================
   GALLERY PAGE – PREMIUM MODERN DESIGN
====================================================== */

.gallery-premium {
    padding: 40px 0;
    background: linear-gradient(180deg, #fff4f8, #ffffff);
}

/* Card */
.gallery-card {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
    transition: all 0.4s ease;
    height: 100%;
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 40px 100px rgba(233, 30, 99, 0.35);
}

/* Image */
.gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-card:hover img {
    transform: scale(1.1);
}

/* Overlay */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(233, 30, 99, 0.65),
            rgba(0, 0, 0, 0.6));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

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

/* Button */
.gallery-overlay span {
    padding: 14px 36px;
    background: #ffffff;
    color: #e91e63;
    font-weight: 700;
    border-radius: 40px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Responsive */
@media (max-width: 991px) {
    .gallery-card img {
        height: 240px;
    }
}

@media (max-width: 575px) {
    .gallery-card img {
        height: 200px;
    }
}



/* ======================================================
   CONTACT – PREMIUM UNIQUE LAYOUT
====================================================== */

.contact-premium {
    padding: 40px 0;
    background:
        radial-gradient(900px 520px at 10% 20%, rgba(233, 30, 99, .10), transparent 60%),
        radial-gradient(900px 520px at 90% 30%, rgba(14, 165, 233, .10), transparent 60%),
        linear-gradient(180deg, #fff7fb, #ffffff);
}

/* LEFT PANEL */
.contact-left {
    height: 100%;
    border-radius: 26px;
    padding: 34px 28px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(16, 24, 40, .08);
    box-shadow: 0 24px 60px rgba(16, 24, 40, .10);
    position: relative;
    overflow: hidden;
}

/* subtle glow */
.contact-left::before {
    content: "";
    position: absolute;
    inset: -80px;
    background: radial-gradient(600px 260px at 20% 10%, rgba(233, 30, 99, .16), transparent 65%);
    filter: blur(28px);
    opacity: .85;
    pointer-events: none;
}

.contact-left-head {
    position: relative;
    z-index: 1;
    margin-bottom: 18px;
}

.contact-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .35rem .75rem;
    border-radius: 999px;
    background: rgba(233, 30, 99, .08);
    border: 1px solid rgba(233, 30, 99, .16);
    color: #c2185b;
    font-weight: 900;
    font-size: 13px;
}

.contact-left h2 {
    margin-top: 10px;
    font-weight: 950;
    color: #101828;
}

.contact-left p {
    color: #667085;
    margin: 10px 0 0;
    line-height: 1.6;
}

/* info grid */
.contact-info-grid {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    margin-top: 18px;
}

.info-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .75);
    border: 1px solid rgba(16, 24, 40, .06);
    transition: .2s ease;
}

.info-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 45px rgba(16, 24, 40, .10);
}

/* premium icon chip */
.info-ic {
    --a: var(--accent);
    width: 46px;
    height: 46px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    background:
        radial-gradient(120% 120% at 20% 20%, rgba(var(--a), .35), transparent 60%),
        linear-gradient(135deg, rgba(var(--a), 1), rgba(var(--a), .65));
    box-shadow: 0 18px 35px rgba(var(--a), .22);
    flex: 0 0 auto;
}

.info-ic i {
    font-size: 18px;
}

.info-txt h5 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 900;
    color: #101828;
}

.info-txt a,
.info-txt span {
    color: #475467;
    text-decoration: none;
    font-size: 14.5px;
    line-height: 1.5;
}

.info-txt a:hover {
    color: #c2185b;
}

/* actions */
.contact-actions {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

/* trust line */
.contact-trust {
    position: relative;
    z-index: 1;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(17, 24, 39, .06);
    border: 1px solid rgba(17, 24, 39, .10);
    color: #475467;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.contact-trust i {
    color: #22c55e;
}

/* RIGHT FORM PANEL */
.contact-form-premium {
    height: 100%;
    border-radius: 26px;
    padding: 42px 40px;
    background:
        radial-gradient(900px 320px at 10% 0%, rgba(233, 30, 99, .12), transparent 60%),
        #ffffff;
    border: 1px solid rgba(16, 24, 40, .08);
    box-shadow: 0 26px 70px rgba(16, 24, 40, .12);
}

.form-header {
    text-align: left;
    margin-bottom: 22px;
}

.form-header h6 {
    color: #c2185b;
    font-weight: 900;
    letter-spacing: 2px;
    font-size: 13px;
    margin-bottom: 6px;
}

.form-header h2 {
    font-weight: 950;
    margin: 0 0 8px;
    color: #101828;
}

.form-header p {
    color: #667085;
    margin: 0;
}

/* floating inputs */
.floating {
    position: relative;
}

.floating input,
.floating textarea {
    width: 100%;
    padding: 16px 16px;
    border-radius: 16px;
    border: 1px solid rgba(16, 24, 40, .12);
    background: rgba(255, 255, 255, .92);
    font-size: 15px;
    transition: .2s ease;
    outline: none;
}

.floating input:focus,
.floating textarea:focus {
    border-color: rgba(233, 30, 99, .55);
    box-shadow: 0 0 0 6px rgba(233, 30, 99, .12);
}

/* label */
.floating label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0 8px;
    background: #fff;
    color: #667085;
    font-weight: 800;
    font-size: 13px;
    transition: .15s ease;
    pointer-events: none;
}

/* float when input has value */
.floating input:not(:placeholder-shown)+label,
.floating textarea:not(:placeholder-shown)+label,
.floating input:focus+label,
.floating textarea:focus+label {
    top: 0;
    transform: translateY(-50%);
    color: #c2185b;
}

/* button */
.btn-send {
    margin-top: 10px;
    padding: 14px 42px;
    background: linear-gradient(135deg, #e91e63, #ff5f8a);
    border: none;
    color: #fff;
    font-weight: 900;
    border-radius: 999px;
    cursor: pointer;
    transition: .2s ease;
}

.btn-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(233, 30, 99, .30);
}

/* Map premium frame */
.contact-map-premium {
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(16, 24, 40, .10);
    box-shadow: 0 30px 70px rgba(16, 24, 40, .14);
    height: 420px;
    background: #fff;
}

.contact-map-premium iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Responsive */
@media (max-width: 991.98px) {
    .contact-form-premium {
        padding: 34px 22px;
    }

    .contact-left {
        padding: 30px 20px;
    }
}

@media (max-width: 768px) {
    .contact-map-premium {
        height: 320px;
    }
}










/* ===============================
   FOOTER
================================ */
.site-footer {
    background:
        radial-gradient(120% 160% at 10% 0%, rgba(206, 32, 41, .18), transparent 55%),
        linear-gradient(180deg, #0b1220, #070b16);
    color: rgba(255, 255, 255, .82);
    padding: 60px 0 25px;
    border-top: 1px solid rgba(255, 255, 255, .10);
}

.footer-brand h5 {
    color: #fff;
    font-weight: 800;
}

.footer-brand small {
    color: rgba(255, 255, 255, .65);
}

.footer-mark {
    width: 100px;
    height: 70px;
    border-radius: 16px;
    /* display: grid; */
    place-items: center;
    color: #fff;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
}

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

.footer-text {
    font-size: 14px;
    color: rgba(255, 255, 255, .70);
    line-height: 1.6;
}

.footer-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 8px;
}

.footer-links a {
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: 14px;
    transition: .15s ease;
}

.footer-links a:hover {
    color: #fff;
    padding-left: 4px;
}

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
}

.footer-contact li {
    margin-bottom: 8px;
    display: flex;
    gap: 8px;
    align-items: center;
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    margin-right: 6px;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
    transition: .2s ease;
}

.footer-social a:hover {
    background: rgba(206, 32, 41, .85);
    border-color: rgba(206, 32, 41, .85);
    transform: translateY(-2px);
}

.footer-divider {
    border-color: rgba(255, 255, 255, .10);
    margin: 30px 0 20px;
}

.footer-bottom {
    font-size: 13px;
    color: rgba(255, 255, 255, .65);
}

.footer-bottom-links a {
    color: rgba(255, 255, 255, .65);
    margin-left: 14px;
    text-decoration: none;
}

.footer-bottom-links a:hover {
    color: #fff;
}


.whatsapp-icon {
    position: fixed;
    bottom: 55px;
    right: 10px;
    z-index: 9999;
}

.whatsapp-icon img {
    width: 60px;
    transition: transform 0.3s;
}

.whatsapp-icon img:hover {
    transform: scale(1.1);
}



/* ===============================
   UNIQUE SLIDER BANNER
================================ */
.banner-slider {
    position: relative;
    overflow: hidden;
    background: #0b1220;
}

.carousel-item {
    min-height: 80vh;
}

/* banner height */
.min-vh-banner {
    min-height: 72vh;
    padding: 60px 0;
}

/* background layers per slide (NO images needed) */
.slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    transform: scale(1.08);
    transition: transform 7s ease;
    /* zoom effect */
}

/* different unique gradients per slide */
.slide-bg.s1 {
    background:
        radial-gradient(900px 480px at 15% 20%, rgba(206, 32, 41, .25), transparent 60%),
        radial-gradient(900px 520px at 90% 20%, rgba(0, 160, 255, .20), transparent 60%),
        linear-gradient(180deg, #0f1a33, #0b1220);
}

.slide-bg.s2 {
    background:
        radial-gradient(900px 520px at 20% 15%, rgba(34, 197, 94, .18), transparent 60%),
        radial-gradient(900px 520px at 85% 25%, rgba(206, 32, 41, .20), transparent 60%),
        linear-gradient(180deg, #0d1b2a, #070b16);
}

.slide-bg.s3 {
    background:
        radial-gradient(900px 520px at 20% 20%, rgba(124, 58, 237, .18), transparent 60%),
        radial-gradient(900px 520px at 90% 20%, rgba(206, 32, 41, .18), transparent 60%),
        linear-gradient(180deg, #0c1832, #070b16);
}

/* overlay to increase readability */
.banner-slider .carousel-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .25);
    z-index: 1;
}

/* content above bg */
.banner-slider .container {
    position: relative;
    z-index: 2;
}

.slide-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .16);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .88);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 14px;
}

.slide-title {
    font-weight: 950;
    letter-spacing: .2px;
    line-height: 1.08;
    color: #fff;
    font-size: clamp(32px, 4.2vw, 56px);
    margin-bottom: 14px;
}

.slide-title span {
    background: linear-gradient(135deg, #ff7a7a, #ce2029);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.slide-text {
    color: rgba(255, 255, 255, .74);
    font-size: 17px;
    max-width: 560px;
    line-height: 1.6;
}

.slide-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 22px;
}

.slide-metrics {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 26px;
}

.metric {
    padding: .7rem .9rem;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.metric b {
    display: block;
    color: #fff;
    font-weight: 900;
    line-height: 1.1;
}

.metric span {
    display: block;
    color: rgba(255, 255, 255, .70);
    font-size: 13px;
}

/* glass card */
.slide-glass-card {
    border-radius: 22px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .16);
    background:
        radial-gradient(120% 150% at 15% 10%, rgba(255, 255, 255, .12), transparent 55%),
        rgba(255, 255, 255, .06);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
}

.slide-glass-card .card-title {
    color: #fff;
    font-weight: 900;
    margin-bottom: 12px;
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
}

.card-list li {
    display: flex;
    gap: 10px;
    align-items: center;
    color: rgba(255, 255, 255, .85);
    padding: 8px 0;
}

.card-list i {
    color: #22c55e;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.card-link:hover {
    text-decoration: underline;
}

/* premium controls */
.premium-control {
    width: 64px;
    opacity: 1;
}

.control-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: .18s ease;
}

.premium-control:hover .control-icon {
    background: rgba(206, 32, 41, .80);
    border-color: rgba(206, 32, 41, .80);
    transform: translateY(-1px);
}

/* premium indicators */
.premium-indicators {
    gap: 8px;
    margin-bottom: 18px;
}

.premium-indicators [data-bs-target] {
    width: 28px;
    height: 6px;
    border-radius: 999px;
    border: 0;
    opacity: .45;
}

.premium-indicators .active {
    opacity: 1;
}

/* progress bar */
.slider-progress {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 3px;
    z-index: 5;
    background: rgba(255, 255, 255, .10);
}

.slider-progress span {
    display: block;
    height: 100%;
    width: 0%;
    background: rgba(206, 32, 41, .95);
}

/* zoom when active slide */
.carousel-item.active .slide-bg {
    transform: scale(1.0);
}

/* caption animation */
.carousel-item .slide-chip,
.carousel-item .slide-title,
.carousel-item .slide-text,
.carousel-item .slide-actions,
.carousel-item .slide-metrics,
.carousel-item .slide-glass-card {
    opacity: 0;
    transform: translateY(10px);
    transition: .55s ease;
}

.carousel-item.active .slide-chip,
.carousel-item.active .slide-title,
.carousel-item.active .slide-text,
.carousel-item.active .slide-actions,
.carousel-item.active .slide-metrics,
.carousel-item.active .slide-glass-card {
    opacity: 1;
    transform: translateY(0);
}

/* responsive tuning */
@media (max-width: 991.98px) {
    .min-vh-banner {
        min-height: 64vh;
        padding: 54px 0;
    }

    .slide-text {
        margin-left: auto;
        margin-right: auto;
    }

    .slide-actions {
        justify-content: center;
    }

    .slide-metrics {
        justify-content: center;
    }

    .slide-title,
    .slide-text {
        text-align: center;
    }
}


/* ===============================
   LEFT EDGE NOTCH (UNIQUE)
================================ */
.left-call-btn {
    position: fixed;
    left: -42px;
    /* half hidden */
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    background: #1f8f5a;
    color: #fff;
    padding: 14px 22px;
    border-radius: 10px 10px 0 0;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
    transition: left .3s ease;
}

.left-call-btn i {
    transform: rotate(90deg);
    /* fix icon rotation */
}

.left-call-btn:hover {
    left: -10px;
    /* slide out on hover */
}