/* Custom variables already loaded from global.css */


/* =====================================================
   ELAN EDITORIAL HERO
===================================================== */

:root{

    --black:#11 1111;
    --white:#ffffff;
    --gray:#b7b7b7;
    --light:#f7f7f7;
    --accent:#d4af37;

    --transition:.5s cubic-bezier(.22,1,.36,1);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

body{

font-family:'Plus Jakarta Sans',sans-serif;
background:#fff;
overflow-x:hidden;

}

/* =========================================
HEADER GAP FIX
========================================= */

.site-header{

position:fixed;

top:0;
left:0;

width:100%;

z-index:9999;

}

#main-content,
main,
.site-main,
.entry-content{

margin:0!important;
padding:0!important;

}

/* =========================================
FULL HERO
========================================= */

.elan-editorial-hero{

position:relative;

width:100%;
height:100vh;

overflow:hidden;

background:#000;

}

/* =========================================
SLIDER
========================================= */

.hero-slider{

position:absolute;

top:0;
left:0;

width:100%;
height:100%;

overflow:hidden;

}

.hero-slide{

position:absolute;

width:100%;
height:100%;

opacity:1;

}

.hero-slide img{

position:absolute;

inset:0;

width:100%;
height:100%;

object-fit:cover;

object-position:center top;   /* top par focus */

transition:transform 8s ease;

}


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

.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(0,0,0,.72) 0%,
rgba(0,0,0,.42) 45%,
rgba(0,0,0,.05) 100%
);

z-index:2;

}

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

.hero-content{

position:absolute;

left:8%;

bottom:12%;

max-width:680px;

z-index:5;

color:#fff;

}

/* =========================================
LABEL
========================================= */

.hero-label{

display:inline-block;

padding:10px 20px;

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

border-radius:40px;

font-size:13px;

font-weight:700;

letter-spacing:3px;

margin-bottom:25px;

backdrop-filter:blur(10px);

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

text-transform:uppercase;

}

/* =========================================
TITLE
========================================= */

.hero-title{

font-family:'Playfair Display',serif;

font-size:clamp(58px,7vw,110px);

line-height:.95;

font-weight:700;

letter-spacing:-3px;

margin-bottom:28px;

max-width:700px;

}

/* Letter Animation */

.hero-title span{

display:inline-block;

opacity:0;

transform:translateY(60px);

animation:letterReveal .7s forwards;

}

@keyframes letterReveal{

to{

opacity:1;

transform:translateY(0);

}

}

/* =========================================
DESCRIPTION
========================================= */

.hero-description{

font-size:21px;

line-height:1.8;

max-width:560px;

color:rgba(255,255,255,.82);

margin-bottom:45px;

}

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

.hero-btn{

display:inline-flex;

align-items:center;

gap:15px;

padding:18px 40px;

border-radius:50px;

background:#fff;

color:#111;

font-weight:700;

font-size:17px;

text-decoration:none;

position:relative;

overflow:hidden;

transition:var(--transition);

}

.hero-btn span{

font-size:22px;

transition:.35s;

}

.hero-btn:hover{

transform:translateY(-5px);

box-shadow:

0 25px 50px rgba(0,0,0,.25);

}

.hero-btn:hover span{

transform:translateX(8px);

}

.hero-btn::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;
height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.6),
transparent
);

transition:1s;

}

.hero-btn:hover::before{

left:120%;

}

/*=========================================
 SLIDER DOTS
=========================================*/

.hero-navigation{

position:absolute;

left:50%;

bottom:45px;

transform:translateX(-50%);

display:flex;

gap:14px;

z-index:20;

}

.hero-dot{

width:13px;
height:13px;

border-radius:50%;

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

cursor:pointer;

transition:.4s;

}

.hero-dot.active{

background:#fff;

transform:scale(1.45);

}

/*=========================================
 SCROLL INDICATOR
=========================================*/

.scroll-indicator{

position:absolute;

bottom:35px;

right:50px;

width:34px;

height:58px;

border:2px solid rgba(255,255,255,.55);

border-radius:30px;

display:flex;

justify-content:center;

padding-top:8px;

z-index:20;

}

.scroll-indicator span{

width:6px;

height:10px;

background:#fff;

border-radius:20px;

animation:scrollDown 2s infinite;

}

@keyframes scrollDown{

0%{

opacity:0;

transform:translateY(0);

}

40%{

opacity:1;

}

100%{

opacity:0;

transform:translateY(22px);

}

}

/*=========================================
 BACKGROUND LIGHT EFFECT
=========================================*/

.elan-editorial-hero::before{

content:"";

position:absolute;

width:550px;

height:550px;

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

border-radius:50%;

filter:blur(90px);

left:-180px;

top:-180px;

animation:blobOne 12s infinite ease-in-out;

}

.elan-editorial-hero::after{

content:"";

position:absolute;

width:650px;

height:650px;

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

border-radius:50%;

filter:blur(110px);

right:-250px;

bottom:-250px;

animation:blobTwo 15s infinite ease-in-out;

}

@keyframes blobOne{

50%{

transform:translateY(70px) scale(1.15);

}

}

@keyframes blobTwo{

50%{

transform:translate(-60px,-70px) scale(1.1);

}

}

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

.hero-slide img{

will-change:transform;

}

.elan-editorial-hero:hover .hero-slide img{

transform:scale(1.12);

}

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

.fade-image{

opacity:0;

transform:scale(1.12);

}

.show-image{

opacity:1;

transform:scale(1);

}

/*=========================================
 TITLE FADE
=========================================*/

.fade-text{

opacity:0;

transform:translateY(40px);

transition:.7s;

}

.show-text{

opacity:1;

transform:translateY(0);

}

/* fisrt section end heare ----------------------------------------------------------------------- */




/* ==========================================================================
   ELAN HOW IT WORKS SECTION (SOPHISTICATED EDITORIAL LAYOUT)
   ========================================================================== */

.elan-how-it-works {
    width: 100%;
    background: var(--light);
    padding: 20px 0 40px; 
    margin: 0 !important;
    border: 0;
    display: block;
    overflow: hidden;
}

.elan-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 8%;
}

/* --- SECTION HEADER --- */
.works-header {
    text-align: center;
    margin-bottom: 40px;
}

.works-tag {
    font-size: 11px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--accent); /* Champagne Gold */
    font-weight: 700;
    display: block;
    margin-bottom: 16px;
}

.works-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(42px, 5vw, 68px);
    font-weight: 700;
    color: var(--black);
    line-height: 1.1;
    letter-spacing: -2px;
    margin-bottom: 20px;
}

.works-subtitle {
    font-size: 18px;
    color: #555;
    font-weight: 400;
    margin-bottom: 24px;
}

.works-subtitle .accent-text {
    color: var(--accent);
    font-weight: 600;
}

.works-accent-line {
    width: 50px;
    height: 3px;
    background-color: var(--accent);
    margin: 0 auto 30px auto;
    border-radius: 2px;
}

.works-promo {
    font-size: 20px;
    font-weight: 600;
    color: var(--black);
    letter-spacing: -0.5px;
}

/* --- STEPS GRID --- */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 70px;
}

/* --- CARD STRUCTURE --- */
.step-card {
    background: var(--white);
    border-radius: 28px; /* High rounded aesthetic */
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.08);
}

.step-media-container {
    position: relative;
    width: 100%;
    height: 380px;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f0f0f0;
    margin-bottom: 28px;
}

.step-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card:hover .step-main-img {
    transform: scale(1.06);
}

/* Elegant Floating Numeric Badges */
.step-number {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    width: 42px;
    height: 42px;
    background: var(--white);
    border: 1.5px solid var(--accent);
    color: var(--black);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* --- FLOATING COMPONENTS (Refined Stitch Fix Upgrades) --- */

/* Badge Step 2: Stylist Curation Glass */
.curator-floating-badge {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card:hover .curator-floating-badge {
    transform: translateX(-50%) translateY(-3px);
}

.badge-spark {
    color: var(--accent);
    font-size: 18px;
}

.curator-floating-badge p {
    font-size: 13px;
    font-weight: 600;
    color: var(--black);
    margin: 0;
    flex: 1;
}

.heart-icon {
    color: #e25c5c;
    font-size: 15px;
    animation: pulseHeart 1.5s infinite;
}

@keyframes pulseHeart {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Badge Step 3: $20 Off Box */
.discount-floating-badge {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: var(--white);
    border-radius: 16px;
    padding: 18px 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border-left: 4px solid var(--accent);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.step-card:hover .discount-floating-badge {
    transform: translateY(-3px);
}

.benefit-label {
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
}

.discount-floating-badge h5 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.discount-floating-badge p {
    font-size: 12px;
    font-weight: 500;
    color: var(--black);
    margin: 0;
}





/* how it work end here ------------------------------------------------------------ */

/*==========================
WHY ELAN
==========================*/

/* ==========================================================================
   WHY ÉLAN SECTION (UPDATED FIGMA ACCURATE)
   ========================================================================= */

.elan-why-section {
    background: #FAF8F5;
    padding: 30px 0 20px; /* Padding-bottom ko 70px se ghatakar 20px kar diya gaya hai */
    overflow: hidden;
}

.elan-container {
    width: min(1440px, 94%); 
    margin: 0 auto;
}

/* --- HEADER --- */
.elan-heading {
    text-align: center;
    margin-bottom: 40px;
}

.elan-subtitle {
    display: block;
    color: #C6942E;
    font-size: 12px;
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.elan-title {
    font-family: "Playfair Display", serif;
    font-size: clamp(34px, 3.8vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1B2646;
    margin: 0;
}

/* --- FEATURES GRID --- */
.elan-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    border: none; /* Upar-neeche ki lines hata di gayi hain */
}
.elan-feature {
    /* Padding badha di gayi hai taaki features ke beech gap badh jaaye */
    padding: 20px 40px; 
    text-align: center;
    position: relative; /* Line ke liye yeh zaroori hai */
}

.elan-feature:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 45%; /* Line ki height kam kar di gayi hai */
    background-color: #E8E0D8;
}
/* --- ICON BADGES --- */
.elan-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 24px;
    border-radius: 50%;
    background: #F4ECE3;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: none;
}

.elan-icon svg {
    width: 30px;
    height: 30px;
    stroke: #1B2646;
    stroke-width: 1.3;
}

/* --- FEATURE TEXT --- */
.elan-feature h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: #1B2646;
    margin: 0 0 10px 0;
}

.elan-feature p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    max-width: 240px;
    margin: 0 auto;
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
}

/* ==========================================================================
   RESPONSIVE DESIGN (TABLET & MOBILE)
   ========================================================================== */

@media(max-width: 1024px) {
    .elan-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Responsive me lines ko handle karne ka naya tareeka */
    .elan-feature::after {
        display: none; /* Pehle sabhi vertical lines chhupa do */
    }
    
    .elan-feature:nth-child(odd)::after {
        display: block; /* Sirf pehle column ke items par vertical line dikhao */
    }
    
    /* Horizontal lines waise hi rahengi */
    .elan-feature:nth-child(1),
    .elan-feature:nth-child(2) {
        border-bottom: 1px solid #E8E0D8;
    }
}

@media(max-width: 560px) {
    .elan-features {
        grid-template-columns: 1fr;
    }
    
    /* Mobile me sabhi vertical lines hata do */
    .elan-feature::after {
        display: none;
    }
    
    .elan-feature {
        border-bottom: 1px solid #E8E0D8;
    }

    .elan-feature:last-child {
        border-bottom: none;
    }
}

/*=========================================
END
=========================================*/

/* why elan end here ----------------------------------------------------------------------------- */




/* ==========================================================================
   AI RECOMMENDATIONS SECTION 
   ========================================================================== */


/* ELAN AI SECTION START */
.elan-ai-section {
    background: #FFFFFF;
    border-top: 1px solid #E8E0D8;
    padding: 50px 0 60px;
    overflow: hidden;
}
.elan-container {
    width: min(1440px, 94%);
    margin: 0 auto;
}
.elan-ai-box {
    display: grid;
    grid-template-columns: 46% 34% 20%;
    gap: clamp(30px, 3.5vw, 55px);
    align-items: center;
}
.elan-left {
    width: 100%;
}
.elan-left img {
    display: block;
    width: 100%;
    border-radius: 24px;
    object-fit: cover;
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
}
.elan-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.elan-small-title {
    display: block;
    margin-bottom: 16px;
    color: #C6942E;
    font-size: clamp(11px, .75vw, 12px);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.elan-right h2 {
    margin: 0 0 20px;
    font-family: "Playfair Display", serif;
    font-size: clamp(36px, 3.5vw, 52px);
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: #1B2646;
}
.elan-right p {
    width: 100%;
    max-width: 420px;
    margin: 0 0 32px;
    color: #555555;
    font-size: clamp(15px, 1vw, 17px);
    line-height: 1.65;
}
.elan-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 50px;
    background: #0F1D3F;
    border: none;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all .3s ease;
    box-shadow: 0 8px 24px rgba(15, 29, 63, 0.15);
}
.elan-btn:hover {
    transform: translateY(-2px);
    background: #081127;
    box-shadow: 0 12px 28px rgba(15, 29, 63, 0.25);
}
.elan-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.elan-list-item {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #333333;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(14px, 0.95vw, 16px);
    font-weight: 600;
    line-height: 1.4;
}
.elan-check {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F4ECE3;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: none;
}
.elan-check svg {
    width: 20px;
    height: 20px;
    stroke: #1B2646;
    stroke-width: 1.3;
}
@media(max-width: 1100px) {
    .elan-ai-box {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .elan-right {
        order: 2;
    }
    .elan-left {
        order: 1;
    }
    .elan-list {
        order: 3;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }
    .elan-right h2 {
        font-size: clamp(36px, 4.5vw, 48px);
    }
}
@media(max-width: 768px) {
    .elan-ai-section {
        padding: 0 0 40px;
    }
    .elan-ai-box {
        gap: 30px;
    }
    .elan-right {
        text-align: center;
        align-items: center;
    }
    .elan-right p {
        max-width: 100%;
    }
    .elan-btn {
        width: 200px;
    }
    .elan-list {
        grid-template-columns: 1fr;
    }
}
@media(max-width: 560px) {
    .elan-right h2 {
        font-size: 34px;
        line-height: 1.1;
    }
    .elan-right p {
        font-size: 15px;
    }
    .elan-btn {
        width: 100%;
        max-width: 240px;
    }
    .elan-list-item {
        font-size: 14px;
    }
    .elan-check {
        width: 38px;
        height: 38px;
    }
    .elan-check svg {
        width: 18px;
        height: 18px;
    }
}
/* ELAN AI SECTION END */

/* ai recomandetion section end here --------------------------------------------- */

/* 1. Hero Section Banner */
.elan-hero-section {
    position: relative;
    height: 600px; /* Perfect desktop height as per screenshot */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Semi-transparent overlay to keep text highly readable */
.elan-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.05); /* Very light to keep the image crisp */
    z-index: 1;
}

.elan-hero-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    display: flex;
    justify-content: center; /* Center the card exactly like Stitch Fix */
}

/* Floating White Card */
.elan-hero-card {
    background-color: rgba(255, 255, 255, 0.98); /* 98% solid white for premium look */
    padding: 48px 40px;
    border-radius: 4px; /* Minimal border radius */
    max-width: 480px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Soft elegant shadow */
}

/* Card Heading - Serif Bold style */
.elan-hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: #1a2b6d; /* Deep blue Stitch Fix color */
    margin-bottom: 16px;
}

/* Card Subtext */
.elan-hero-subtext {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 28px;
    font-weight: 400;
}

/* Mint Green Button */
.elan-hero-btn {
    display: inline-block;
    background-color: #8ccfcf; /* Exact mint green button from screenshot */
    color: #1a3c34;
    padding: 14px 32px;
    border-radius: 50px; /* Capsule shape */
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.elan-hero-btn:hover {
    background-color: #79bebe;
    transform: translateY(-1px);
}

/* 2. "How It Works" Section */
.how-it-works-section {
    padding: 80px 40px;
    text-align: center;
    background-color: #ffffff;
}

/* Heading style */
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 700;
    color: #1a2b6d;
    margin-bottom: 48px;
}

/* Grid of Steps */
.steps-grid {
    display: flex;
    justify-content: center;
    gap: 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.step-card {
    flex: 1;
    padding: 20px;
    text-align: center;
}

/* Number badges */
.step-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f0eff8;
    color: #1a2b6d;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
}

.step-number {
    font-size: 18px;
    font-weight: 700;
}

.step-heading {
    font-size: 18px;
    font-weight: 600;
    color: #1a2b6d;
    margin-bottom: 12px;
}

.step-desc {
    font-size: 14px;
    color: #555555;
    line-height: 1.6;
}





/* ==========================================================
                    TESTIMONIALS SECTION
========================================================== */

.testimonials-section {
    width: 100%;
    background: #FAF7F2;
    padding: 40px 0 60px; 
}

.testimonials-container{

    width:90%;
    max-width:1350px;
    margin:auto;

}

/* ================= Header ================= */

.testimonials-header {
    text-align: center;
    margin-bottom: 40px; 
}

.testimonials-tag{

    display:block;

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

    color:#C5963A;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.testimonials-title {
    font-family: 'Playfair Display', serif;
    font-size: 58px;
    font-weight: 700;
    color: #13295B;
    margin-bottom: 12px; 
}
.testimonials-subtitle{

    max-width:700px;

    margin:auto;

    font-size:18px;

    color:#666;

    line-height:1.8;

}

/* ================= Grid ================= */

.testimonials-grid{

    display:grid;

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

    gap:28px;

}

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

.testimonial-card{

    background:#fff;

    border-radius:26px;

    padding:40px 30px;

    text-align:center;

    transition:.35s ease;

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

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

/* ================= Avatar ================= */

.testimonial-avatar {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 20px; 
    border: 6px solid #F7F4EF;
}

/* ================= Stars ================= */

.review-stars{

    display:flex;

    justify-content:center;

    gap:4px;

    margin-bottom:18px;

}

.review-stars span{

    font-size:18px;

}

.review-stars .filled{

    color:#F4B400;

}

.review-stars .empty{

    color:#D8D8D8;

}

/* ================= Name ================= */

.customer-name{

    font-size:22px;

    font-weight:700;

    color:#13295B;

    margin-bottom:18px;

}

/* ================= Review ================= */

.testimonial-text{

    color:#666;

    font-size:16px;

    line-height:1.8;

}

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

@media(max-width:1100px){

.testimonials-grid{

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

}

}

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

@media(max-width:768px){
    .testimonials-section {
        padding: 40px 0; 
    }


.testimonials-title{

font-size:42px;

}

.testimonials-grid{

grid-template-columns:1fr;

}

.testimonial-card{

padding:35px 24px;

}

.testimonial-avatar{

width:110px;

height:110px;

}

.customer-name{

font-size:20px;

}

}


/* promo-banner css start --------------------------------------------------------------------------  */

/*====================================================
    ELAN HOME CTA BANNER
====================================================*/

.hp-banner{
    width:min(1500px,96%);
    height:clamp(180px,22vw,300px);
    margin:40px auto 20px;
    border-radius:24px;
    overflow:hidden;
    position:relative;
    background-image:url("https://res.cloudinary.com/nyvax6v5/image/upload/v1783149025/home-page-bottom-baner_jnpplk.png");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

/* Overlay */

.hp-banner::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.10) 28%,
        rgba(0,0,0,0) 55%
    );

}

/*========================*/
.hp-banner-main{
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/*========================*/

.hp-banner-content{
    width: min(500px,90%);
    text-align: center;
    margin: 0;
    transform: none;      /* remove translateX */
}

/*========================*/
/*========================*/
.hp-banner-title{
    color:#fff;
    font-size:clamp(20px,2.2vw,38px);
    line-height:1.15;
    font-weight:700;
    letter-spacing:-0.5px;
    text-align:center;

    max-width:440px;
    margin:0 auto 12px;
}

/*========================*/
.hp-banner-text{
    color:#F3F3F3;
    font-size:clamp(12px,0.95vw,16px);
    line-height:1.55;

    max-width:360px;
    text-align:center;
    margin:0 auto 18px;
}

/*========================*/
.hp-banner-btn{
    display:inline-flex;
    justify-content:center;
    align-items:center;

    padding:12px 28px;
    font-size:14px;
    font-weight:600;

    background:#F5C84C;
    color:#111;
    border-radius:999px;
    text-decoration:none;

    transition:.3s;
}

.hp-banner-btn:hover{

    background:#FFD96D;

    transform:translateY(-2px);

}

/*====================================================
            1200px
====================================================*/
@media (max-width:1200px){

    .hp-banner{
        height:280px;
    }

    .hp-banner-content{
        width:min(460px,90%);
        margin:0 auto;
        text-align:center;
    }

    .hp-banner-title{
        font-size:36px;
    }

    .hp-banner-text{
        font-size:15px;
    }
}

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

    .hp-banner{
        height:260px;
    }

    .hp-banner-content{
        width:min(420px,90%);
        margin:0 auto;
        text-align:center;
    }

    .hp-banner-title{
        font-size:32px;
    }

    .hp-banner-text{
        font-size:14px;
        max-width:330px;
        margin:0 auto 18px;
    }

    .hp-banner-btn{
        padding:12px 28px;
        font-size:14px;
    }
}

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

    .hp-banner{
        height:220px;
    }

    .hp-banner-main{
        justify-content:center;
        align-items:center;
        padding:0;
    }

    .hp-banner-content{
        width:min(320px,90%);
        margin:0 auto;
        text-align:center;
    }

    .hp-banner-title{
        font-size:24px;
        margin-bottom:10px;
    }

    .hp-banner-text{
        display:none;
    }

    .hp-banner-btn{
        padding:10px 22px;
        font-size:13px;
    }
}

/*====================================================
            480px
====================================================*/
@media (max-width:480px){

    .hp-banner{
        height:180px;
        border-radius:16px;
        margin-bottom:0;
    }

    .hp-banner-main{
        justify-content:center;
        align-items:center;
        padding:0;
    }

    .hp-banner-content{
        width:90%;
        margin:0 auto;
        text-align:center;
    }

    .hp-banner-title{
        font-size:20px;
        line-height:1.2;
        margin-bottom:10px;
    }

    .hp-banner-text{
        display:none;
    }

    .hp-banner-btn{
        padding:9px 18px;
        font-size:12px;
    }
}


/* promo-banner-css end --------------------------------------------------------------------------- */

/* Responsive Scaling */
@media (max-width: 768px) {
    .elan-hero-section {
        height: auto;
        padding: 60px 20px;
    }
    .elan-hero-card {
        padding: 32px 24px;
    }
    .steps-grid {
        flex-direction: column;
        gap: 20px;
    }
}