/*==========================================================
=
= OVINDI WORLD
= HOMEPAGE STYLESHEET
= VERSION 4
=
==========================================================*/



/*==========================================================
=
= SECTION 01
= CSS VARIABLES
=
==========================================================*/

:root{

    /*--------------------------------------------------
      Brand Colors
    --------------------------------------------------*/

    --color-primary:#d96c8a;
    --color-primary-dark:#bf5473;
    --color-primary-light:#f7d7e2;

    --color-secondary:#7b8cff;
    --color-secondary-dark:#5d70ef;

    --color-success:#43b36b;
    --color-warning:#ffb545;
    --color-danger:#e25d6a;

    /*--------------------------------------------------
      Backgrounds
    --------------------------------------------------*/

    --color-bg:#fffdfd;
    --color-surface:#ffffff;
    --color-surface-soft:#fff8fb;
    --color-surface-dark:#2f2f39;

    /*--------------------------------------------------
      Text
    --------------------------------------------------*/

    --color-text:#2f2f39;
    --color-text-soft:#5f6171;
    --color-text-light:#87899a;
    --color-text-white:#ffffff;

    /*--------------------------------------------------
      Borders
    --------------------------------------------------*/

    --color-border:#ececf2;
    --color-border-dark:#ddddea;

    /*--------------------------------------------------
      Hero
    --------------------------------------------------*/

    --hero-height:100vh;

    --hero-content-width:680px;

    --hero-overlay:

        linear-gradient(
            90deg,
            rgba(0,0,0,.60) 0%,
            rgba(0,0,0,.40) 45%,
            rgba(0,0,0,.18) 100%
        );

    /*--------------------------------------------------
      Radius
    --------------------------------------------------*/

    --radius-xs:8px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-lg:28px;
    --radius-xl:40px;
    --radius-round:999px;

    /*--------------------------------------------------
      Shadows
    --------------------------------------------------*/

    --shadow-xs:
        0 3px 12px rgba(0,0,0,.05);

    --shadow-sm:
        0 8px 24px rgba(0,0,0,.06);

    --shadow-md:
        0 18px 45px rgba(0,0,0,.09);

    --shadow-lg:
        0 30px 80px rgba(0,0,0,.14);

    /*--------------------------------------------------
      Layout
    --------------------------------------------------*/

    --container-width:1240px;

    --section-space:120px;

    --content-width:760px;

    /*--------------------------------------------------
      Animation
    --------------------------------------------------*/

    --transition-fast:.20s ease;

    --transition:

        .35s ease;

    --transition-slow:

        .60s ease;

}



/*==========================================================
=
= SECTION 02
= RESET
=
==========================================================*/

*,
*::before,
*::after{

    margin:0;

    padding:0;

    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

    -webkit-text-size-adjust:100%;

}


body{

    min-width:320px;

    overflow-x:hidden;

    background:var(--color-bg);

    color:var(--color-text);

}


img{

    display:block;

    max-width:100%;

    height:auto;

    border:0;

}


picture{

    display:block;

}


svg{

    display:block;

}


a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


button{

    border:none;

    outline:none;

    cursor:pointer;

    background:none;

    font:inherit;

}


input,
textarea,
select{

    font:inherit;

}


ul,
ol{

    list-style:none;

}



/*==========================================================
=
= SECTION 03
= BASE
=
==========================================================*/

body{

    font-family:

        "Inter",
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;

    font-size:16px;

    font-weight:400;

    line-height:1.7;

    color:var(--color-text);

    background:var(--color-bg);

}


main{

    display:block;

}


section{

    position:relative;

}


::selection{

    background:

        rgba(217,108,138,.22);

}


:focus-visible{

    outline:3px solid

        rgba(123,140,255,.35);

    outline-offset:3px;

}



/*==========================================================
=
= SECTION 04
= TYPOGRAPHY
=
==========================================================*/

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--color-text);

    font-weight:700;

    line-height:1.18;

    letter-spacing:-.02em;

}


h1{

    font-size:clamp(2.8rem,6vw,5rem);

}


h2{

    font-size:clamp(2.1rem,4vw,3.3rem);

}


h3{

    font-size:clamp(1.45rem,2vw,2rem);

}


h4{

    font-size:1.25rem;

}


p{

    color:var(--color-text-soft);

    line-height:1.85;

}


strong{

    font-weight:700;

}


small{

    font-size:.88rem;

}


/*==========================================================
=
= SECTION 05
= LAYOUT
=
==========================================================*/

.container{

    width:min(
        100% - 48px,
        var(--container-width)
    );

    margin-inline:auto;

}


.home-section{

    position:relative;

    padding-block:var(--section-space);

}


.home-section:first-child{

    padding-top:0;

}


.home-section:last-child{

    padding-bottom:calc(var(--section-space) + 20px);

}


.section-content{

    max-width:var(--content-width);

}



/*==========================================================
=
= SECTION 06
= SECTION HEADER
=
==========================================================*/

.section-header{

    max-width:760px;

    margin:0 auto 72px;

    text-align:center;

}


.section-header__eyebrow{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:999px;

    background:#fff2f6;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.16em;

}


.section-header__title{

    margin-bottom:24px;

}


.section-header__description{

    max-width:640px;

    margin:0 auto;

    font-size:1.08rem;

    color:var(--color-text-soft);

}



/*==========================================================
=
= SECTION 07
= UTILITIES
=
==========================================================*/

.text-center{

    text-align:center;

}


.text-left{

    text-align:left;

}


.text-right{

    text-align:right;

}


.hidden{

    display:none !important;

}


.visually-hidden{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;

}


.rounded{

    border-radius:var(--radius-lg);

}


.shadow{

    box-shadow:var(--shadow-md);

}


.glow{

    box-shadow:

        0 0 0 1px rgba(255,255,255,.15),

        0 30px 80px rgba(0,0,0,.10);

}


.w-100{

    width:100%;

}


.mb-0{

    margin-bottom:0 !important;

}


.mt-0{

    margin-top:0 !important;

}


.pt-0{

    padding-top:0 !important;

}


.pb-0{

    padding-bottom:0 !important;

}


.overflow-hidden{

    overflow:hidden;

}


.position-relative{

    position:relative;

}


/*==========================================================
=
= SECTION 08
= BUTTON SYSTEM
=
==========================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    min-height:52px;

    padding:0 28px;

    border:2px solid transparent;

    border-radius:var(--radius-round);

    font-size:.95rem;

    font-weight:700;

    letter-spacing:.02em;

    cursor:pointer;

    transition:var(--transition);

    user-select:none;

    white-space:nowrap;

}

.btn:hover{

    transform:translateY(-3px);

}

.btn:active{

    transform:translateY(0);

}

.btn--primary{

    background:var(--color-primary);

    color:#fff;

    box-shadow:var(--shadow-sm);

}

.btn--primary:hover{

    background:var(--color-primary-dark);

    box-shadow:var(--shadow-md);

}

.btn--secondary{

    background:#fff;

    color:var(--color-primary);

    border-color:var(--color-primary);

}

.btn--secondary:hover{

    background:var(--color-primary);

    color:#fff;

}

.btn--ghost{

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

    border-color:rgba(255,255,255,.22);

    backdrop-filter:blur(14px);

    color:inherit;

}

.btn--ghost:hover{

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

}

.btn--large{

    min-height:60px;

    padding-inline:36px;

    font-size:1rem;

}



/*==========================================================
=
= SECTION 09
= CARD SYSTEM
=
==========================================================*/

.card{

    position:relative;

    overflow:hidden;

    background:var(--color-surface);

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}



/*==========================================================
=
= SECTION 10
= GLASS SURFACE
=
==========================================================*/

.glass{

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

}



/*==========================================================
=
= SECTION 11
= COMMON IMAGE
=
==========================================================*/

.image-cover{

    position:relative;

    overflow:hidden;

}

.image-cover img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .8s ease;

}

.image-cover:hover img{

    transform:scale(1.06);

}



/*==========================================================
=
= SECTION 12
= COMMON BADGES
=
==========================================================*/

.badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:8px 16px;

    border-radius:999px;

    background:#fff3f7;

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/*==========================================================
=
= SECTION 13
= COMMON OVERLAY
=
==========================================================*/

.overlay{

    position:absolute;

    inset:0;

    pointer-events:none;

}



/*==========================================================
=
= SECTION 14
= COMMON HOVER EFFECT
=
==========================================================*/

.hover-lift{

    transition:var(--transition);

}

.hover-lift:hover{

    transform:translateY(-8px);

}

.hover-scale{

    transition:var(--transition);

}

.hover-scale:hover{

    transform:scale(1.03);

}



/*==========================================================
=
= SECTION 15
= DIVIDER
=
==========================================================*/

.section-divider{

    width:120px;

    height:2px;

    margin:28px auto;

    background:linear-gradient(
        to right,
        transparent,
        var(--color-primary),
        transparent
    );

}



/*==========================================================
=
= SECTION 16
= CONTENT WIDTH
=
==========================================================*/

.content-width{

    max-width:760px;

    margin-inline:auto;

}



/*==========================================================
=
= SECTION 17
= SPACING HELPERS
=
==========================================================*/

.mt-1{margin-top:12px;}
.mt-2{margin-top:20px;}
.mt-3{margin-top:32px;}
.mt-4{margin-top:48px;}

.mb-1{margin-bottom:12px;}
.mb-2{margin-bottom:20px;}
.mb-3{margin-bottom:32px;}
.mb-4{margin-bottom:48px;}

.pt-1{padding-top:24px;}
.pt-2{padding-top:48px;}
.pt-3{padding-top:72px;}

.pb-1{padding-bottom:24px;}
.pb-2{padding-bottom:48px;}
.pb-3{padding-bottom:72px;}


/*==========================================================
=
= HERO
= VERSION 5
= PART 2A
=
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    min-height:var(--hero-height);

    background:#111;

}


.hero__slider{

    position:relative;

    width:100%;

    min-height:var(--hero-height);

}


.hero__slide{

    position:absolute;

    inset:0;

    display:flex;

    align-items:center;

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:
        opacity .8s ease,
        visibility .8s ease;

}


.hero__slide.is-active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

    z-index:2;

}


/*----------------------------------------------------------
Background
----------------------------------------------------------*/

.hero__background{

    position:absolute;

    inset:0;

    z-index:1;

    background-repeat:no-repeat;

    background-position:center center;

    background-size:cover;

    transform:scale(1);

    transition:transform 8s ease;

}


.hero__slide.is-active .hero__background{

    transform:scale(1.05);

}


.hero__overlay{

    position:absolute;

    inset:0;

    background:var(--hero-overlay);

    opacity:var(--overlay-opacity,.45);

}


/*----------------------------------------------------------
Container
----------------------------------------------------------*/

.hero__container{

    position:relative;
    z-index:5;
    display:flex;
    align-items:center;
    width:100%;
    min-height:var(--hero-height);
    padding-inline:clamp(40px,6vw,80px);

}


/*----------------------------------------------------------
Hero Content
----------------------------------------------------------*/

.hero__content{

    position:relative;

    z-index:10;

    width:100%;

    max-width:var(--hero-content-width);

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

}


.hero__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:20px;

    padding:8px 18px;

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

    backdrop-filter:blur(12px);

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

    border-radius:999px;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

}


.hero__title{

    margin:0 0 24px;

    color:#fff;

    font-size:clamp(3rem,6vw,5rem);

    font-weight:800;

    line-height:1.08;

    text-shadow:0 4px 20px rgba(0,0,0,.35);

}


.hero__subtitle{

    max-width:640px;

    margin:0 0 36px;

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

    font-size:1.15rem;

    line-height:1.9;

}


.hero__buttons{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:48px;

}


/*----------------------------------------------------------
Hero Statistics
----------------------------------------------------------*/

.hero__stats{

    display:grid;

    grid-template-columns:repeat(3,170px);

    gap:14px;

}


.hero__stat{

    padding:16px;

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

    backdrop-filter:blur(18px);

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

    border-radius:var(--radius-lg);

    text-align:center;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        background .35s ease,
        border-color .35s ease;

}

.hero__stat:hover{

    transform:
        translateY(-8px)
        scale(1.03);

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

    border-color:rgba(255,255,255,.38);

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

}

.hero__stat{

    position:relative;

    overflow:hidden;

}

.hero__stat::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.10),
            rgba(255,255,255,0)
        );

    opacity:0;

    transition:opacity .35s ease;

    pointer-events:none;

}

.hero__stat:hover::before{

    opacity:1;

}


.hero__stat-number{

    display:block;

    margin-bottom:8px;

    color:#fff;

    font-size:1.8rem;

    font-weight:800;

    line-height:1;

}

.hero__stat-number{

    transition:
        transform .35s ease,
        color .35s ease;

}

.hero__stat:hover .hero__stat-number{

    transform:scale(1.08);

    color:#ffffff;

}


.hero__stat-label{

    display:block;

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

    font-size:.84rem;

    line-height:1.5;

}

.hero__stat-label{

    transition:
        opacity .35s ease,
        letter-spacing .35s ease;

}

.hero__stat:hover .hero__stat-label{

    opacity:1;

    letter-spacing:.03em;

}


/*----------------------------------------------------------
Hero Navigation Arrows
----------------------------------------------------------*/

.hero__arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:64px;

    height:64px;

    border:none;

    border-radius:50%;

    background:rgba(20,20,20,.32);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    color:#fff;

    font-size:2rem;

    line-height:1;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    z-index:30;

    transition:
        background .30s ease,
        transform .30s ease,
        opacity .30s ease;

}

.hero__arrow:hover{

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

    transform:
        translateY(-50%)
        scale(1.06);

}

.hero__arrow:active{

    transform:
        translateY(-50%)
        scale(.96);

}

.hero__arrow--prev{

    left:10px;

}

.hero__arrow--next{

    right:10px;

}


/*----------------------------------------------------------
Hero Navigation Dots
----------------------------------------------------------*/

.hero__dots{

    position:absolute;

    left:50%;

    bottom:68px;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:12px;

    z-index:30;

}

.hero__dot{

    width:12px;

    height:12px;

    padding:0;

    border:none;

    border-radius:50%;

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

    cursor:pointer;

    transition:all .30s ease;

}

.hero__dot:hover{

    background:#fff;

}

.hero__dot.is-active{

    width:36px;

    border-radius:999px;

    background:#fff;

}


/*----------------------------------------------------------
Scroll Indicator
----------------------------------------------------------*/

.hero__scroll{

    position:absolute;

    left:50%;

    bottom:95px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    z-index:30;

    letter-spacing:.18em;

    text-transform:uppercase;

    font-size:.78rem;

    font-weight:700;

}

.hero__scroll-text{

    opacity:.88;

}

.hero__scroll-icon{

    font-size:1.3rem;

    animation:heroScroll 1.8s infinite;

}

@keyframes heroScroll{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    50%{

        transform:translateY(10px);

        opacity:.55;

    }

    100%{

        transform:translateY(0);

        opacity:1;

    }

}


/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media (max-width:992px){

.hero__arrow{

    width:56px;

    height:56px;

}

.hero__arrow--prev{

    left:12px;

}

.hero__arrow--next{

    right:12px;

}

.hero__stats{

    grid-template-columns:1fr;

    max-width:320px;

}

}


/*----------------------------------------------------------
Tablet / Mobile
----------------------------------------------------------*/

@media (max-width:768px){

.hero{

    min-height:auto;

}

.hero__container{

    padding-top:130px;

    padding-bottom:120px;

}

.hero__title{

    font-size:clamp(2.5rem,10vw,4rem);

}

.hero__subtitle{

    font-size:1rem;

}

.hero__content{

    max-width:300px;

}

.hero__buttons{

    align-items:flex-start;

    gap:14px;

}

/* Mobile Buttons */

.hero__buttons .btn{

    width:140px;

    min-width:140px;

    min-height:48px;

    padding:12px 18px;

    font-size:.92rem;

    justify-content:center;

}


/* Mobile Statistics */

.hero__stats{

    max-width:220px;

    gap:12px;

}

.hero__stat{

    padding:14px 16px;

}

.hero__stat-number{

    font-size:1.55rem;

}

.hero__stat-label{

    font-size:.80rem;

}


.hero__arrow{

    display:none;

}

.hero__dots{

    bottom:24px;

}

.hero__scroll{

    display:none;

}

}


/*----------------------------------------------------------
Small Phones
----------------------------------------------------------*/

@media (max-width:480px){

.hero__eyebrow{

    font-size:.72rem;

    padding:7px 14px;

}

.hero__content{

    max-width:280px;

}

.hero__buttons .btn{

    width:130px;

    min-width:130px;

}

.hero__stats{

    max-width:200px;

}

.hero__stat{

    padding:14px;

}

.hero__stat-number{

    font-size:1.45rem;

}

.hero__stat-label{

    font-size:.75rem;

}

}


/*----------------------------------------------------------
Version 5.2
Ultra Wide Display Support
(2K / 4K / TV)
----------------------------------------------------------*/

@media (min-width:1800px){

.hero__container{

    justify-content:flex-start;

    padding-left:140px;

    padding-right:80px;

}

.hero__content{

    max-width:720px;

}

.hero__stats{

    max-width:620px;

}

}


/*==========================================================
=
= ABOUT SECTION
= VERSION 5
= ABOUT POLISH
=
==========================================================*/

.about{

    position:relative;

    background:#ffffff;

}


/*----------------------------------------------------------
About Main Grid
----------------------------------------------------------*/

.about__grid{

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:70px;

    align-items:center;

    margin-top:70px;

}


/*----------------------------------------------------------
About Content
----------------------------------------------------------*/

.about__content{

    max-width:620px;

}


.about__title{

    margin-bottom:22px;

    color:var(--color-text);

    font-size:clamp(
        1.7rem,
        3vw,
        2.2rem
    );

    font-weight:700;

}


.about__content p{

    margin-bottom:18px;

    color:var(--color-text-soft);

    line-height:1.85;

}


.about__content p:last-of-type{

    margin-bottom:30px;

}


/*----------------------------------------------------------
About Actions
----------------------------------------------------------*/

.about__actions{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:14px;

}


/*----------------------------------------------------------
About Image
----------------------------------------------------------*/

.about__image{

    position:relative;

    overflow:hidden;

    width:100%;

    aspect-ratio:4 / 3;

    background:
        linear-gradient(
            135deg,
            #fff3f7,
            #f7f4ff
        );

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}


.about__image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transition:
        transform .8s ease,
        filter .8s ease;

}


.about__image:hover img{

    transform:scale(1.05);

}


/*----------------------------------------------------------
Soft Image Overlay
----------------------------------------------------------*/

.about__image::after{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0) 60%,
            rgba(217,108,138,.08) 100%
        );

}


/*==========================================================
=
= ABOUT HIGHLIGHTS
=
==========================================================*/

.about-highlights{

    position:relative;

    padding-top:20px;

    /*
     * Space between the About highlight cards
     * and the following Journey section.
     */
    padding-bottom:90px;

    background:#ffffff;

}


.about-highlights__grid{

    display:grid;

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

    gap:28px;

}


/*----------------------------------------------------------
Highlight Card
----------------------------------------------------------*/

.about-card{

    position:relative;

    padding:30px;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    box-shadow:
        0 4px 14px rgba(31, 41, 55, 0.08);

    transition:var(--transition);

}


.about-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


/*----------------------------------------------------------
Highlight Icon
----------------------------------------------------------*/

.about-card__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:52px;

    height:52px;

    margin-bottom:20px;

    border-radius:50%;

    background:#fff3f7;

    font-size:1.35rem;

}


/*----------------------------------------------------------
Highlight Title
----------------------------------------------------------*/

.about-card__title{

    margin-bottom:12px;

    color:var(--color-text);

    font-size:1.25rem;

    font-weight:700;

}


.about-card__text{

    margin:0;

    color:var(--color-text-soft);

    font-size:.95rem;

    line-height:1.75;

}


/*----------------------------------------------------------
Highlight Top Accent
----------------------------------------------------------*/

.about-card::before{

    content:"";

    position:absolute;

    top:0;

    left:28px;

    right:28px;

    height:3px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

    opacity:.75;

}


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

@media (max-width:1100px){

    .about__grid{

        gap:48px;

    }

    .about-card{

        padding:26px;

    }

}


@media (max-width:768px){

    .about__grid{

        grid-template-columns:1fr;

        gap:40px;

        margin-top:50px;

    }

    .about__content{

        max-width:none;

    }

    .about__image{

        order:2;

        aspect-ratio:16 / 10;

    }

    .about__actions{

        justify-content:flex-start;

    }

    .about-highlights{

        padding-top:10px;

    }

    .about-highlights__grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .about-card{

        padding:26px 24px;

    }

}


@media (max-width:480px){

    .about__grid{

        gap:30px;

        margin-top:40px;

    }

    .about__title{

        font-size:1.6rem;

    }

    .about__content p{

        line-height:1.75;

    }

    .about__actions .btn{

        width:100%;

        justify-content:center;

    }

    .about__image{

        aspect-ratio:4 / 3;

        border-radius:var(--radius-lg);

    }

    .about-card{

        padding:24px 20px;

    }

}


/*==========================================================
=
= STATISTICS SECTION
= VERSION 5 – STATISTICS POLISH
=
==========================================================*/

.statistics{

    position:relative;

    padding:140px 0 120px;

    background:
        linear-gradient(
            180deg,
            #fffdfd 0%,
            #fff8fb 100%
        );

    /*
    |--------------------------------------------------------------------------
    | Section Separation
    |--------------------------------------------------------------------------
    | A very subtle top border + upward shadow separates
    | the Statistics section from the About Highlights section.
    */

    border-top:1px solid rgba(217,108,138,.12);

    box-shadow:
        0 -10px 28px rgba(40,45,90,.055);

    overflow:hidden;

}

.statistics::before{

    content:"";

    position:absolute;

    top:-180px;

    right:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(
            rgba(217,108,138,.10),
            transparent 70%
        );

    pointer-events:none;

}

.statistics::after{

    content:"";

    position:absolute;

    left:-180px;

    bottom:-180px;

    width:360px;

    height:360px;

    border-radius:50%;

    background:

        radial-gradient(
            rgba(123,140,255,.08),
            transparent 70%
        );

    pointer-events:none;

}

.statistics .container{

    position:relative;

    z-index:2;

}

/*----------------------------------------------------------
Grid
----------------------------------------------------------*/

.statistics__grid{

    display:grid;

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

    gap:34px;

    margin-top:90px;

}

/*----------------------------------------------------------
Card
----------------------------------------------------------*/

.stat-card{

    position:relative;

    overflow:hidden;

    padding:50px 30px;

    text-align:center;

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

    backdrop-filter:blur(18px);

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

    border-radius:32px;

    box-shadow:

        0 18px 45px rgba(40,45,90,.06);

    transition:

        transform .35s ease,

        box-shadow .35s ease;

}

.stat-card:hover{

    transform:

        translateY(-8px)

        scale(1.02);

    box-shadow:

        0 28px 70px rgba(40,45,90,.10);

}

.stat-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:

        linear-gradient(

            90deg,

            var(--color-primary),

            var(--color-secondary)

        );

}

/*----------------------------------------------------------
Icon
----------------------------------------------------------*/

.stat-card__icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:82px;

    height:82px;

    margin:0 auto 28px;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            #fff7fa,

            #f8f4ff

        );

    box-shadow:

        inset 0 0 0 1px rgba(255,255,255,.9),

        0 10px 30px rgba(0,0,0,.05);

    font-size:2.15rem;

}

/*----------------------------------------------------------
Number
----------------------------------------------------------*/

.stat-card__number{

    margin-bottom:16px;

    font-size:clamp(2.3rem,4vw,3.4rem);

    font-weight:800;

    line-height:1;

    background:

        linear-gradient(

            135deg,

            var(--color-primary),

            var(--color-secondary)

        );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/*----------------------------------------------------------
Title
----------------------------------------------------------*/

.stat-card__title{

    margin:0;

    color:var(--color-text);

    font-size:1.05rem;

    font-weight:700;

}

/*==========================================================
SUMMARY
==========================================================*/

.statistics-summary{

    margin-top:110px;

}

.statistics-summary__content{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:60px;

    align-items:center;

    padding:60px;

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

    backdrop-filter:blur(18px);

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

    border-radius:36px;

    box-shadow:

        0 25px 70px rgba(40,45,90,.08);

}

.statistics-summary__eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.80rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.16em;

}

.statistics-summary__title{

    margin-bottom:24px;

}

.statistics-summary__description{

    max-width:640px;

    color:var(--color-text-soft);

    line-height:1.9;

}

/*----------------------------------------------------------
Badge
----------------------------------------------------------*/

.statistics-summary__badge{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:250px;

    height:250px;

    margin-left:auto;

    border-radius:50%;

    background:

        linear-gradient(

            135deg,

            var(--color-primary),

            var(--color-secondary)

        );

    color:#fff;

    box-shadow:

        0 25px 60px rgba(217,108,138,.30);

}

.statistics-summary__badge-number{

    font-size:3.2rem;

    font-weight:800;

    line-height:1;

}

.statistics-summary__badge-text{

    margin-top:14px;

    max-width:170px;

    text-align:center;

    line-height:1.6;

    opacity:.95;

}

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

@media (max-width:1100px){

.statistics{

    padding:110px 0 100px;

}

.statistics__grid{

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

}

.statistics-summary__content{

    grid-template-columns:1fr;

}

.statistics-summary__badge{

    margin:auto;

}

}

@media (max-width:640px){

.statistics{

    padding:90px 0 80px;

}

.statistics__grid{

    grid-template-columns:1fr;

    gap:22px;

}

.stat-card{

    padding:38px 24px;

}

.stat-card__icon{

    width:72px;

    height:72px;

    margin-bottom:22px;

    font-size:1.9rem;

}

.stat-card__number{

    font-size:2.5rem;

}

.statistics-summary{

    margin-top:70px;

}

.statistics-summary__content{

    padding:34px 24px;

    gap:34px;

}

.statistics-summary__badge{

    width:220px;

    height:220px;

}

.statistics-summary__badge-number{

    font-size:2.5rem;

}

}


/*==========================================================
=
= STATISTICS → FEATURED MEMORIES SPACING POLISH
= VERSION 5.1
=
==========================================================*/

/*
|--------------------------------------------------------------------------
| Give the Statistics summary card more breathing room
|--------------------------------------------------------------------------
*/

.statistics{

    padding-bottom:160px;

}


/*
|--------------------------------------------------------------------------
| Keep the summary card visually separated
|--------------------------------------------------------------------------
*/

.statistics-summary{

    margin-bottom:20px;

}


/*
|--------------------------------------------------------------------------
| Give Featured Memories a little more top breathing room
|--------------------------------------------------------------------------
*/

.featured-memories{

    padding-top:140px;

}


/*
|--------------------------------------------------------------------------
| Responsive spacing
|--------------------------------------------------------------------------
*/

@media (max-width:1100px){

    .statistics{

        padding-bottom:130px;

    }

    .featured-memories{

        padding-top:120px;

    }

}


@media (max-width:640px){

    .statistics{

        padding-bottom:100px;

    }

    .statistics-summary{

        margin-bottom:10px;

    }

    .featured-memories{

        padding-top:100px;

    }

}


/*==========================================================
=
= FEATURED MEMORIES
= VERSION 5 – POLISH
=
==========================================================*/

.featured-memories{

    position:relative;

    padding:120px 0 120px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fffafc 100%
        );

    overflow:hidden;

}


/*----------------------------------------------------------
Decorative Background
----------------------------------------------------------*/

.featured-memories::before{

    content:"";

    position:absolute;

    top:-220px;

    right:-180px;

    width:520px;

    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(217,108,138,.08),
            transparent 70%
        );

    pointer-events:none;

}


.featured-memories::after{

    content:"";

    position:absolute;

    bottom:-240px;

    left:-180px;

    width:480px;

    height:480px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(123,140,255,.07),
            transparent 70%
        );

    pointer-events:none;

}


.featured-memories .container{

    position:relative;

    z-index:2;

}


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

.featured-memories__grid{

    display:grid;

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

    gap:34px;

    margin-top:80px;

}


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

.memory-card{

    display:flex;

    flex-direction:column;

    min-width:0;

    overflow:hidden;

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

    border:1px solid rgba(0,0,0,.045);

    border-radius:32px;

    box-shadow:
        0 18px 45px rgba(40,45,90,.06);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


.memory-card:hover{

    transform:
        translateY(-10px);

    border-color:
        rgba(217,108,138,.16);

    box-shadow:
        0 30px 70px rgba(40,45,90,.12);

}


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

.memory-card__image{

    position:relative;

    overflow:hidden;

    aspect-ratio:4 / 3;

    background:#f5f5f7;

}


.memory-card__image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .75s cubic-bezier(.2,.7,.2,1);

}


.memory-card:hover
.memory-card__image img{

    transform:scale(1.07);

}


/*----------------------------------------------------------
Image Overlay
----------------------------------------------------------*/

.memory-card__overlay{

    position:absolute;

    inset:0;

    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 45%,
            rgba(0,0,0,.20) 100%
        );

    opacity:.65;

    transition:
        opacity .35s ease;

    pointer-events:none;

}


.memory-card:hover
.memory-card__overlay{

    opacity:.9;

}


/*----------------------------------------------------------
Badge
----------------------------------------------------------*/

.memory-card__badge{

    position:absolute;

    top:20px;

    left:20px;

    z-index:3;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:8px 15px;

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

    border-radius:var(--radius-round);

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

    backdrop-filter:blur(12px);

    color:var(--color-primary);

    font-size:.76rem;

    font-weight:700;

    line-height:1;

    letter-spacing:.08em;

    text-transform:uppercase;

    box-shadow:
        0 8px 22px rgba(0,0,0,.08);

}


/*==========================================================
Memory Content
==========================================================*/

.memory-card__content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}


/*----------------------------------------------------------
Title
----------------------------------------------------------*/

.memory-card__title{

    margin:0 0 15px;

    color:var(--color-text);

    font-size:1.40rem;

    font-weight:750;

    line-height:1.3;

}


.memory-card:hover
.memory-card__title{

    color:var(--color-primary);

}


/*----------------------------------------------------------
Summary
----------------------------------------------------------*/

.memory-card__summary{

    flex:1;

    margin:0 0 28px;

    color:var(--color-text-soft);

    font-size:.96rem;

    line-height:1.8;

}


/*==========================================================
Memory Footer
==========================================================*/

.memory-card__footer{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:20px;

    margin-top:auto;

    padding-top:22px;

    border-top:1px solid var(--color-border);

}


/*----------------------------------------------------------
Meta
----------------------------------------------------------*/

.memory-card__meta{

    display:flex;

    flex-direction:column;

    gap:7px;

    min-width:0;

}


.memory-card__meta-item{

    color:var(--color-text-light);

    font-size:.82rem;

    line-height:1.4;

    white-space:nowrap;

}


/*----------------------------------------------------------
Actions
----------------------------------------------------------*/

.memory-card__actions{

    display:flex;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:10px;

}


.memory-card__actions .btn{

    min-height:44px;

    padding:10px 17px;

    font-size:.84rem;

}


/*==========================================================
Featured Memories Footer
==========================================================*/

.featured-memories__footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    margin-top:90px;

    padding:48px 52px;

    background:
        linear-gradient(
            135deg,
            #fff8fb 0%,
            #ffffff 100%
        );

    border:1px solid var(--color-border);

    border-radius:32px;

    box-shadow:
        0 18px 50px rgba(40,45,90,.055);

}


/*----------------------------------------------------------
Footer Text
----------------------------------------------------------*/

.featured-memories__footer-text{

    max-width:650px;

    margin:0;

    color:var(--color-text-soft);

    font-size:.96rem;

    line-height:1.8;

}


/*----------------------------------------------------------
Footer Actions
----------------------------------------------------------*/

.featured-memories__footer-actions{

    display:flex;

    flex-shrink:0;

    flex-wrap:wrap;

    justify-content:flex-end;

    gap:12px;

}


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

@media (max-width:1100px){

    .featured-memories{

        padding:110px 0 100px;

    }


    .featured-memories__grid{

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

        gap:28px;

        margin-top:70px;

    }


    .memory-card__content{

        padding:27px;

    }


    .memory-card__footer{

        align-items:flex-start;

        flex-direction:column;

    }


    .memory-card__actions{

        justify-content:flex-start;

    }


    .featured-memories__footer{

        align-items:flex-start;

        flex-direction:column;

        gap:28px;

        padding:42px;

    }


    .featured-memories__footer-actions{

        justify-content:flex-start;

    }

}


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

@media (max-width:768px){

    .featured-memories{

        padding:90px 0 80px;

    }


    .featured-memories__grid{

        grid-template-columns:1fr;

        gap:24px;

        margin-top:55px;

    }


    .memory-card{

        border-radius:28px;

    }


    .memory-card__image{

        aspect-ratio:16 / 10;

    }


    .memory-card__content{

        padding:24px;

    }


    .memory-card__title{

        font-size:1.28rem;

    }


    .memory-card__summary{

        margin-bottom:24px;

        font-size:.93rem;

    }


    .memory-card__footer{

        gap:18px;

    }


    .memory-card__actions{

        width:100%;

    }


    .memory-card__actions .btn{

        flex:1;

        min-width:0;

    }


    .featured-memories__footer{

        margin-top:65px;

        padding:34px 24px;

        border-radius:28px;

    }


    .featured-memories__footer-text{

        font-size:.91rem;

    }


    .featured-memories__footer-actions{

        width:100%;

        flex-direction:column;

    }


    .featured-memories__footer-actions .btn{

        width:100%;

    }

}


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

@media (max-width:480px){

    .memory-card__badge{

        top:14px;

        left:14px;

        padding:7px 12px;

        font-size:.70rem;

    }


    .memory-card__content{

        padding:22px;

    }


    .memory-card__footer{

        padding-top:18px;

    }


    .memory-card__actions{

        flex-direction:column;

    }


    .memory-card__actions .btn{

        width:100%;

        flex:none;

    }


    .featured-memories__footer{

        padding:30px 20px;

    }

}

/*==========================================================
=
= TIMELINE SECTION
= VERSION 5
= TIMELINE POLISH
=
==========================================================*/

.timeline{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff8fb 100%
        );

}


/*==========================================================
=
= TIMELINE WRAPPER
=
==========================================================*/

.timeline__wrapper{

    position:relative;

    max-width:1180px;

    margin:80px auto 0;

    padding:20px 0 10px;

}


/*----------------------------------------------------------
Center Line
----------------------------------------------------------*/

.timeline__wrapper::before{

    content:"";

    position:absolute;

    top:0;

    bottom:0;

    left:50%;

    width:4px;

    margin-left:-2px;

    border-radius:999px;

    background:
        linear-gradient(
            180deg,
            var(--color-primary),
            var(--color-secondary)
        );

}


/*==========================================================
=
= TIMELINE ITEM
=
==========================================================*/

.timeline-item{

    position:relative;

    width:calc(50% - 55px);

    margin-bottom:90px;

}


.timeline-item:last-child{

    margin-bottom:0;

}


/*----------------------------------------------------------
Left Item
----------------------------------------------------------*/

.timeline-item--left{

    margin-right:auto;

}


/*----------------------------------------------------------
Right Item
----------------------------------------------------------*/

.timeline-item--right{

    margin-left:auto;

}


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

.timeline-item__content{

    position:relative;

    display:grid;

    grid-template-columns:minmax(0,1fr) 210px;

    grid-template-rows:auto auto;

    gap:26px;

    padding:30px;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/*----------------------------------------------------------
Hover
----------------------------------------------------------*/

.timeline-item:hover
.timeline-item__content{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

    border-color:rgba(217,108,138,.25);

}


/*----------------------------------------------------------
Left / Right Visual Order
----------------------------------------------------------*/

.timeline-item--left
.timeline-item__image{

    order:1;

}


.timeline-item--left
.timeline-item__main{

    order:2;

}


.timeline-item--right
.timeline-item__main{

    order:1;

}


.timeline-item--right
.timeline-item__image{

    order:2;

}


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

.timeline-item__main{

    min-width:0;

}


/*==========================================================
=
= DATE
=
==========================================================*/

.timeline-item__date{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-bottom:18px;

    padding:8px 16px;

    border-radius:999px;

    background:#fff3f7;

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    line-height:1.3;

    text-transform:uppercase;

}


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

.timeline-item__title{

    margin:0 0 16px;

    color:var(--color-heading);

    font-size:1.45rem;

    line-height:1.25;

}


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

.timeline-item__description{

    margin:0;

    color:var(--color-text-soft);

    font-size:.95rem;

    line-height:1.75;

}


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

.timeline-item__image{

    position:relative;

    overflow:hidden;

    width:100%;

    min-width:0;

    aspect-ratio:4 / 3;

    align-self:start;

    background:#f5f5f5;

    border-radius:var(--radius-lg);

}


/*----------------------------------------------------------
Image
----------------------------------------------------------*/

.timeline-item__image img{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease;

}


/*----------------------------------------------------------
Image Hover
----------------------------------------------------------*/

.timeline-item:hover
.timeline-item__image img{

    transform:scale(1.08);

}


/*==========================================================
=
= FOOTER
=
==========================================================*/

.timeline-item__footer{

    grid-column:1 / -1;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding-top:22px;

    border-top:1px solid var(--color-border);

}


/*==========================================================
=
= META
=
==========================================================*/

.timeline-item__meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.timeline-item__meta-item{

    display:inline-flex;

    align-items:center;

    gap:6px;

    padding:7px 12px;

    border-radius:999px;

    background:#fff4f8;

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:600;

    line-height:1.3;

}


/*==========================================================
=
= ACTIONS
=
==========================================================*/

.timeline-item__actions{

    display:flex;

    align-items:center;

    gap:10px;

    flex-shrink:0;

}


/*==========================================================
=
= MARKER
=
==========================================================*/

.timeline-item__marker{

    position:absolute;

    top:48px;

    width:26px;

    height:26px;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#ffffff;

    border:5px solid var(--color-primary);

    box-shadow:
        0 0 0 10px rgba(217,108,138,.12);

}


/*----------------------------------------------------------
Left Marker
----------------------------------------------------------*/

.timeline-item--left
.timeline-item__marker{

    right:-68px;

}


/*----------------------------------------------------------
Right Marker
----------------------------------------------------------*/

.timeline-item--right
.timeline-item__marker{

    left:-68px;

}


/*----------------------------------------------------------
Marker Dot
----------------------------------------------------------*/

.timeline-item__dot{

    display:block;

    width:100%;

    height:100%;

    border-radius:50%;

    background:var(--color-primary);

}


/*==========================================================
=
= TIMELINE FOOTER
=
==========================================================*/

.timeline__footer{

    margin-top:90px;

}


.timeline__footer-content{

    padding:70px 60px;

    text-align:center;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
Eyebrow
----------------------------------------------------------*/

.timeline__footer-eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


/*----------------------------------------------------------
Title
----------------------------------------------------------*/

.timeline__footer-title{

    margin-bottom:20px;

}


/*----------------------------------------------------------
Description
----------------------------------------------------------*/

.timeline__footer-description{

    max-width:720px;

    margin:0 auto 34px;

}


/*----------------------------------------------------------
Actions
----------------------------------------------------------*/

.timeline__footer-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}


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

@media (max-width:1100px){

    .timeline__wrapper{

        max-width:960px;

    }


    .timeline-item{

        width:calc(50% - 42px);

    }


    .timeline-item__content{

        grid-template-columns:1fr;

        gap:22px;

        padding:26px;

    }


    .timeline-item--left
    .timeline-item__image{

        order:1;

    }


    .timeline-item--left
    .timeline-item__main{

        order:2;

    }


    .timeline-item--right
    .timeline-item__main{

        order:1;

    }


    .timeline-item--right
    .timeline-item__image{

        order:2;

    }


    .timeline-item__image{

        aspect-ratio:16 / 10;

    }


    .timeline-item__footer{

        grid-column:1;

    }

}


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

@media (max-width:992px){

    .timeline__wrapper{

        max-width:760px;

        padding-left:0;

    }


    .timeline__wrapper::before{

        left:28px;

        margin-left:-2px;

    }


    .timeline-item{

        width:100%;

        margin-left:0;

        margin-bottom:70px;

        padding-left:74px;

    }


    .timeline-item--left,
    .timeline-item--right{

        margin-left:0;

        margin-right:0;

    }


    .timeline-item__marker{

        left:15px !important;

        right:auto !important;

    }


    .timeline-item__content{

        grid-template-columns:220px minmax(0,1fr);

        align-items:start;

    }


    .timeline-item--left
    .timeline-item__image{

        order:1;

    }


    .timeline-item--left
    .timeline-item__main{

        order:2;

    }


    .timeline-item--right
    .timeline-item__main{

        order:1;

    }


    .timeline-item--right
    .timeline-item__image{

        order:2;

    }


    .timeline-item__footer{

        grid-column:1 / -1;

    }

}


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

@media (max-width:768px){

    .timeline__wrapper{

        margin-top:60px;

        padding-top:10px;

    }


    .timeline__wrapper::before{

        left:20px;

    }


    .timeline-item{

        padding-left:56px;

        margin-bottom:56px;

    }


    .timeline-item__marker{

        left:7px !important;

        width:24px;

        height:24px;

    }


    .timeline-item__content{

        display:flex;

        flex-direction:column;

        gap:20px;

        padding:22px;

    }


    .timeline-item--left
    .timeline-item__main,

    .timeline-item--right
    .timeline-item__main,

    .timeline-item--left
    .timeline-item__image,

    .timeline-item--right
    .timeline-item__image{

        order:initial;

    }


    .timeline-item__image{

        aspect-ratio:16 / 10;

    }


    .timeline-item__title{

        font-size:1.3rem;

    }


    .timeline-item__description{

        font-size:.9rem;

        line-height:1.7;

    }


    .timeline-item__footer{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:16px;

    }


    .timeline-item__actions{

        width:100%;

    }


    .timeline-item__actions .btn{

        width:100%;

    }


    .timeline__footer{

        margin-top:70px;

    }


    .timeline__footer-content{

        padding:46px 28px;

    }


    .timeline__footer-actions{

        flex-direction:column;

        align-items:stretch;

    }


    .timeline__footer-actions .btn{

        width:100%;

    }

}


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

@media (max-width:480px){

    .timeline__wrapper{

        margin-top:50px;

    }


    .timeline__wrapper::before{

        left:16px;

    }


    .timeline-item{

        padding-left:46px;

        margin-bottom:46px;

    }


    .timeline-item__marker{

        left:4px !important;

        width:22px;

        height:22px;

        border-width:4px;

        box-shadow:
            0 0 0 8px rgba(217,108,138,.12);

    }


    .timeline-item__content{

        padding:18px;

        border-radius:var(--radius-lg);

    }


    .timeline-item__date{

        margin-bottom:14px;

        padding:7px 12px;

        font-size:.68rem;

    }


    .timeline-item__title{

        margin-bottom:12px;

        font-size:1.2rem;

    }


    .timeline-item__description{

        font-size:.86rem;

    }


    .timeline-item__meta{

        gap:7px;

    }


    .timeline-item__meta-item{

        padding:6px 9px;

        font-size:.7rem;

    }


    .timeline__footer-content{

        padding:38px 20px;

    }

}


/*==========================================================
=
= VIDEOS SECTION
= VERSION 5
= PART 3
=
==========================================================*/

.videos{

    position:relative;

    background:
        linear-gradient(
            180deg,
            #fff8fb 0%,
            #ffffff 100%
        );

}


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

.videos__grid{

    display:grid;

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

    gap:36px;

    margin-top:72px;

}


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

.video-card{

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-sm);

    transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.video-card:hover{

    box-shadow:var(--shadow-lg);

}


/*==========================================================
=
= VIDEO MEDIA
=
==========================================================*/

.video-card__media{

    position:relative;

    overflow:hidden;

    aspect-ratio:16 / 9;

    background:#111;

}


.video-card__video{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}



/*
------------------------------------------------------------
Fallback Image
------------------------------------------------------------
*/

.video-card__fallback-image{

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.video-card__content{

    display:flex;

    flex-direction:column;

    flex:1;

    padding:30px;

}


/*==========================================================
=
= VIDEO BADGE
=
==========================================================*/

.video-card__badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:2;

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:999px;

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

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    pointer-events:none;

}


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

.video-card__title{

    margin:0 0 16px;

    color:var(--color-text);

    font-size:1.35rem;

    font-weight:700;

    line-height:1.35;

}


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

.video-card__description{

    margin:0;

    color:var(--color-text-soft);

    line-height:1.8;

}


/*==========================================================
=
= VIDEOS FOOTER
=
==========================================================*/

.videos__footer{

    margin-top:90px;

}


.videos__footer-content{

    padding:70px 60px;

    text-align:center;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}


/*----------------------------------------------------------
Eyebrow
----------------------------------------------------------*/

.videos__footer-eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


/*----------------------------------------------------------
Title
----------------------------------------------------------*/

.videos__footer-title{

    margin:0 0 20px;

}


/*----------------------------------------------------------
Description
----------------------------------------------------------*/

.videos__footer-description{

    max-width:720px;

    margin:0 auto 34px;

    color:var(--color-text-soft);

    line-height:1.8;

}


/*----------------------------------------------------------
Actions
----------------------------------------------------------*/

.videos__footer-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}


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

@media (max-width:1100px){

    .videos__grid{

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

        gap:28px;

    }

}


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

@media (max-width:768px){

    .videos__grid{

        grid-template-columns:1fr;

        gap:24px;

        margin-top:54px;

    }


    .video-card__content{

        padding:24px;

    }


    .video-card__title{

        font-size:1.25rem;

    }


    .video-card__description{

        line-height:1.7;

    }


    .videos__footer{

        margin-top:60px;

    }


    .videos__footer-content{

        padding:46px 28px;

    }


    .videos__footer-actions{

        flex-direction:column;

        align-items:stretch;

    }


    .videos__footer-actions .btn{

        width:100%;

    }

}


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

@media (max-width:480px){

    .videos__grid{

        gap:20px;

    }


    .video-card{

        border-radius:var(--radius-lg);

    }


    .video-card__content{

        padding:22px;

    }


    .video-card__badge{

        margin-bottom:14px;

        padding:6px 12px;

        font-size:.70rem;

    }


    .video-card__title{

        margin-bottom:12px;

        font-size:1.15rem;

    }


    .video-card__description{

        font-size:.94rem;

    }


    .videos__footer-content{

        padding:38px 22px;

    }

}


/*==========================================================
=
= PARENTS LETTER
= VERSION 4
= PART 4B-A
=
==========================================================*/

.parents-letter{

    position:relative;

    background:
        linear-gradient(
            180deg,
            #fffdfd 0%,
            #fff8fb 100%
        );

}


/*----------------------------------------------------------
Wrapper
----------------------------------------------------------*/

.parents-letter__wrapper{

    max-width:980px;

    margin:70px auto 0;

}


/*----------------------------------------------------------
Letter
----------------------------------------------------------*/

.letter{

    position:relative;

}


/*----------------------------------------------------------
Paper
----------------------------------------------------------*/

.letter__paper{

    position:relative;

    overflow:hidden;

    padding:70px;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}


.letter__paper::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:8px;

    background:

        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

}


/*----------------------------------------------------------
Header
----------------------------------------------------------*/

.letter__header{

    margin-bottom:42px;

    text-align:center;

}


.letter__eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.letter__title{

    margin:0;

}


/*----------------------------------------------------------
Quote
----------------------------------------------------------*/

.letter__quote{

    margin:0 auto 42px;

    max-width:720px;

    text-align:center;

    color:var(--color-primary);

    font-size:1.25rem;

    font-style:italic;

    line-height:1.8;

}


/*----------------------------------------------------------
Content
----------------------------------------------------------*/

.letter__content{

    max-width:760px;

    margin:0 auto;

}


.letter__paragraph{

    margin-bottom:24px;

    color:var(--color-text);

    font-size:1.06rem;

    line-height:2;

}


.letter__paragraph:last-child{

    margin-bottom:0;

}


/*----------------------------------------------------------
Closing
----------------------------------------------------------*/

.letter__closing{

    margin-top:50px;

    color:var(--color-primary);

    font-size:1.15rem;

    font-style:italic;

}


/*----------------------------------------------------------
Signature
----------------------------------------------------------*/

.letter__signature{

    margin-top:36px;

}


.letter__signature-name{

    font-size:1.2rem;

    font-weight:700;

    color:var(--color-text);

}


.letter__signature-role{

    margin-top:8px;

    color:var(--color-text-light);

    font-size:.95rem;

}


/*----------------------------------------------------------
Written Date
----------------------------------------------------------*/

.letter__written-date{

    margin-top:28px;

    color:var(--color-text-light);

    font-size:.88rem;

}

/*==========================================================
=
= PARENTS LETTER
= VERSION 4
= PART 4B-B
=
==========================================================*/


/*----------------------------------------------------------
Footer
----------------------------------------------------------*/

.parents-letter__footer{

    margin-top:90px;

}


.parents-letter__footer-content{

    position:relative;

    overflow:hidden;

    padding:70px 60px;

    text-align:center;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}


.parents-letter__footer-content::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:260px;

    height:260px;

    border-radius:50%;

    background:rgba(217,108,138,.05);

}


.parents-letter__footer-content::after{

    content:"";

    position:absolute;

    bottom:-90px;

    left:-90px;

    width:200px;

    height:200px;

    border-radius:50%;

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

}


/*----------------------------------------------------------
Footer Text
----------------------------------------------------------*/

.parents-letter__footer-eyebrow{

    position:relative;

    z-index:2;

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.parents-letter__footer-title{

    position:relative;

    z-index:2;

    margin-bottom:20px;

}


.parents-letter__footer-description{

    position:relative;

    z-index:2;

    max-width:720px;

    margin:0 auto 36px;

}


/*----------------------------------------------------------
Actions
----------------------------------------------------------*/

.parents-letter__footer-actions{

    position:relative;

    z-index:2;

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}


/*----------------------------------------------------------
Divider
----------------------------------------------------------*/

.parents-letter__divider{

    width:90px;

    height:4px;

    margin:40px auto;

    border-radius:999px;

    background:

        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

}


/*----------------------------------------------------------
Bottom Note
----------------------------------------------------------*/

.parents-letter__footer-note{

    position:relative;

    z-index:2;

    margin-top:28px;

    color:var(--color-text-light);

    font-size:.95rem;

    line-height:1.8;

}


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

@media (max-width:991px){

.letter__paper{

    padding:50px;

}

.parents-letter__footer-content{

    padding:56px 40px;

}

}


@media (max-width:768px){

.letter__paper{

    padding:34px 24px;

}

.letter__header{

    margin-bottom:30px;

}

.letter__quote{

    margin-bottom:30px;

    font-size:1.08rem;

}

.letter__paragraph{

    font-size:1rem;

    line-height:1.9;

}

.parents-letter__footer-content{

    padding:42px 24px;

}

.parents-letter__footer-actions{

    flex-direction:column;

    align-items:stretch;

}

.parents-letter__footer-actions .btn{

    width:100%;

}

.parents-letter__divider{

    margin:30px auto;

}

}


@media (max-width:480px){

.letter__paper{

    padding:28px 20px;

}

.letter__title{

    font-size:1.9rem;

}

.letter__signature-name{

    font-size:1.05rem;

}

.letter__signature-role{

    font-size:.9rem;

}

.parents-letter__footer-title{

    font-size:1.7rem;

}

}


/*==========================================================
=
= BIRTHDAY COUNTDOWN SECTION
= VERSION 5
=
==========================================================*/

.birthday{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #fff8fb 0%,
            #ffffff 100%
        );

}


/*==========================================================
=
= MAIN BIRTHDAY WRAPPER
=
==========================================================*/

.birthday__wrapper{

    display:grid;

    grid-template-columns:1.6fr .9fr;

    gap:60px;

    align-items:center;

    margin-top:70px;

}


.birthday__content{

    max-width:680px;

}


.birthday__eyebrow{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 18px;

    border-radius:999px;

    background:#fff2f6;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.birthday__title{

    margin-bottom:24px;

    font-size:clamp(2.2rem,4vw,3.3rem);

    line-height:1.15;

}


.birthday__description{

    max-width:620px;

    margin:0;

    color:var(--color-text-light);

    font-size:1.05rem;

    line-height:1.9;

}


/*==========================================================
=
= COUNTDOWN
=
==========================================================*/

.birthday__countdown{

    display:flex;

    justify-content:center;

    align-items:center;

}


.countdown-card{

    position:relative;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:260px;

    height:260px;

    padding:24px;

    overflow:hidden;

    text-align:center;

    border-radius:50%;

    background:
        linear-gradient(135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:#fff;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}


.countdown-card::before{

    content:"";

    position:absolute;

    inset:10px;

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

    border-radius:50%;

    pointer-events:none;

}


.countdown-card:hover{

    transform:scale(1.04);

    box-shadow:
        0 20px 45px rgba(0,0,0,.16);

}


.countdown-card__main{

    position:relative;

    z-index:1;

    display:flex;

    align-items:baseline;

    justify-content:center;

    gap:7px;

}


.countdown-card__number{

    display:block;

    font-size:3.65rem;

    font-weight:800;

    line-height:1;

    font-variant-numeric:tabular-nums;

}


.countdown-card__days-label{

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

    opacity:.92;

}


.countdown-card__time{

    position:relative;

    z-index:1;

    display:flex;

    align-items:flex-start;

    justify-content:center;

    gap:8px;

    margin-top:18px;

}


.countdown-unit{

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:43px;

}


.countdown-unit__number{

    display:block;

    font-size:1.22rem;

    font-weight:800;

    line-height:1.1;

    font-variant-numeric:tabular-nums;

}


.countdown-unit__label{

    margin-top:5px;

    font-size:.52rem;

    font-weight:600;

    letter-spacing:.07em;

    text-transform:uppercase;

    opacity:.82;

}


.countdown-unit__separator{

    padding-top:1px;

    font-size:1.15rem;

    font-weight:700;

    line-height:1;

    opacity:.65;

}


.countdown-card__label{

    position:relative;

    z-index:1;

    display:block;

    margin-top:16px;

    font-size:.72rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    opacity:.9;

}


/*==========================================================
=
= BIRTHDAY CELEBRATION BADGE
=
==========================================================*/

.birthday-badge{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    width:260px;

    height:260px;

    padding:25px;

    text-align:center;

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #ffb347,
            #ff6b8a
        );

    color:#fff;

    box-shadow:var(--shadow-lg);

    transition:var(--transition);

}


.birthday-badge:hover{

    transform:scale(1.04);

    box-shadow:
        0 20px 45px rgba(0,0,0,.16);

}


.birthday-badge__emoji{

    display:block;

    font-size:4rem;

    line-height:1;

}


.birthday-badge__text{

    display:block;

    margin-top:18px;

    font-size:1.1rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}


/*==========================================================
=
= BIRTHDAY DETAILS
=
==========================================================*/

.birthday__details{

    margin-top:90px;

}


.birthday-info{

    display:grid;

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

    gap:28px;

}


.birthday-info__card{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:180px;

    padding:34px 26px;

    text-align:center;

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-sm);

    transition:var(--transition);

}


.birthday-info__card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}


.birthday-info__icon{

    display:block;

    margin-bottom:16px;

    font-size:2rem;

    line-height:1;

}


.birthday-info__label{

    display:block;

    margin-bottom:10px;

    color:var(--color-text-light);

    font-size:.9rem;

}


.birthday-info__value{

    display:block;

    color:var(--color-primary);

    font-size:1.35rem;

    font-weight:700;

}


/*==========================================================
=
= BIRTHDAY MESSAGE
=
==========================================================*/

.birthday-message{

    max-width:820px;

    margin:80px auto 0;

    padding:42px;

    text-align:center;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}


.birthday-message__quote{

    margin:0;

    color:var(--color-text);

    font-size:1.08rem;

    font-style:italic;

    line-height:1.9;

}


.birthday-message__signature{

    margin-top:24px;

    color:var(--color-primary);

    font-size:.95rem;

    font-weight:700;

}


/*==========================================================
=
= BIRTHDAY FOOTER
=
==========================================================*/

.birthday__footer{

    margin-top:80px;

}


.birthday__actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}


/*==========================================================
=
= CELEBRATION STATE
=
==========================================================*/

.birthday__celebration{

    margin-top:55px;

    padding:55px 40px;

    text-align:center;

    border-radius:var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            var(--color-primary),
            var(--color-secondary)
        );

    color:#ffffff;

    box-shadow:var(--shadow-lg);

}


.birthday__celebration-text{

    display:block;

    max-width:720px;

    margin:0 auto;

    font-size:1.05rem;

    line-height:1.8;

    opacity:.96;

}


/*==========================================================
=
= COMING SOON STATE
=
==========================================================*/

.birthday__coming-soon{

    margin-top:55px;

    padding:38px 40px;

    text-align:center;

    border:2px dashed var(--color-border);

    border-radius:var(--radius-lg);

    background:#fffdfd;

}


.birthday__coming-soon-text{

    max-width:760px;

    margin:0 auto;

    color:var(--color-text-light);

    line-height:1.8;

}


/*==========================================================
=
= BOTTOM MESSAGE
=
==========================================================*/

.birthday__bottom{

    margin-top:70px;

    text-align:center;

}


.birthday__bottom-content{

    padding:65px 55px;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-md);

}


.birthday__bottom-eyebrow{

    display:inline-block;

    margin-bottom:18px;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.birthday__bottom-title{

    margin-bottom:20px;

}


.birthday__bottom-description{

    max-width:720px;

    margin:0 auto;

    color:var(--color-text-light);

    line-height:1.9;

}


.birthday__bottom-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

    margin-top:30px;

}


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

@media (max-width:992px){

    .birthday__wrapper{

        grid-template-columns:1fr;

        gap:48px;

    }


    .birthday__content{

        max-width:none;

        text-align:center;

    }


    .birthday__description{

        margin-left:auto;

        margin-right:auto;

    }


    .birthday__countdown{

        order:-1;

    }


    .birthday-info{

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

    }

}


@media (max-width:768px){

    .birthday__wrapper{

        margin-top:50px;

    }


    .countdown-card,
    .birthday-badge{

        width:220px;

        height:220px;

    }


    .countdown-card__number{

        font-size:3.15rem;

    }


    .countdown-card__time{

        gap:6px;

        margin-top:14px;

    }


    .countdown-unit{

        min-width:38px;

    }


    .countdown-unit__number{

        font-size:1.05rem;

    }


    .countdown-unit__label{

        font-size:.46rem;

    }


    .countdown-unit__separator{

        font-size:1rem;

    }


    .birthday-badge__emoji{

        font-size:3.2rem;

    }


    .birthday__title{

        font-size:2.2rem;

    }


    .birthday__description{

        font-size:1rem;

    }


    .birthday-info{

        grid-template-columns:1fr;

    }


    .birthday-message{

        margin-top:55px;

        padding:30px 22px;

    }


    .birthday__celebration{

        padding:46px 28px;

    }


    .birthday__coming-soon{

        padding:30px 22px;

    }


    .birthday__bottom-content{

        padding:46px 28px;

    }


    .birthday__actions,
    .birthday__bottom-actions{

        flex-direction:column;

        align-items:stretch;

    }


    .birthday__actions .btn,
    .birthday__bottom-actions .btn{

        width:100%;

    }

}


@media (max-width:480px){

    .countdown-card,
    .birthday-badge{

        width:190px;

        height:190px;

    }


    .countdown-card__number{

        font-size:2.55rem;

    }


    .countdown-card__time{

        gap:4px;

        margin-top:11px;

    }


    .countdown-unit{

        min-width:31px;

    }


    .countdown-unit__number{

        font-size:.9rem;

    }


    .countdown-unit__label{

        font-size:.38rem;

    }


    .countdown-unit__separator{

        font-size:.85rem;

    }


    .countdown-card__label{

        font-size:.78rem;

    }


    .birthday-badge__emoji{

        font-size:3rem;

    }


    .birthday-badge__text{

        font-size:.9rem;

    }


    .birthday__title{

        font-size:1.9rem;

    }


    .birthday__eyebrow{

        font-size:.72rem;

    }


    .birthday-message__quote{

        font-size:1rem;

    }


    .birthday__celebration{

        margin-top:40px;

        padding:36px 20px;

    }


    .birthday__coming-soon{

        margin-top:40px;

        padding:28px 20px;

    }


    .birthday__bottom{

        margin-top:50px;

    }


    .birthday__bottom-content{

        padding:36px 20px;

    }

}


/*==========================================================
=
= QUOTE SECTION
= VERSION 4
= PART 5A
=
==========================================================*/

.quote-section{

    position:relative;

    overflow:hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff8fb 100%
        );

}


.quote-section .container{

    position:relative;

}


/*----------------------------------------------------------
Quote Card
----------------------------------------------------------*/

.quote-card{

    position:relative;

    z-index:2;

    display:flex;

    align-items:flex-start;

    gap:36px;

    max-width:920px;

    margin:0 auto;

    padding:56px;

    background:#ffffff;

    border:1px solid var(--color-border);

    border-radius:var(--radius-xl);

    box-shadow:var(--shadow-lg);

}


.quote-card__icon{

    flex:0 0 auto;

    color:var(--color-primary);

    font-size:5rem;

    line-height:1;

    opacity:.18;

}


.quote-card__content{

    flex:1;

}


.quote-card__eyebrow{

    display:inline-block;

    margin-bottom:20px;

    color:var(--color-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.14em;

    text-transform:uppercase;

}


.quote-card__text{

    margin:0;

    color:var(--color-text);

    font-size:clamp(1.4rem,2vw,2rem);

    font-style:italic;

    font-weight:500;

    line-height:1.8;

}


.quote-card__author{

    margin-top:32px;

    color:var(--color-text-light);

    font-size:1rem;

    font-weight:600;

}


/*----------------------------------------------------------
Background Decoration
----------------------------------------------------------*/

.quote-card__background{

    position:absolute;

    inset:0;

    pointer-events:none;

}


.quote-card__circle{

    position:absolute;

    border-radius:50%;

    filter:blur(2px);

}


.quote-card__circle--one{

    top:-60px;

    left:-40px;

    width:180px;

    height:180px;

    background:rgba(217,108,138,.08);

}


.quote-card__circle--two{

    right:-80px;

    top:40px;

    width:220px;

    height:220px;

    background:rgba(123,140,255,.07);

}


.quote-card__circle--three{

    left:45%;

    bottom:-100px;

    width:160px;

    height:160px;

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

}


/*----------------------------------------------------------
Footer
----------------------------------------------------------*/

.quote-section__footer{

    position:relative;

    z-index:2;

    max-width:900px;

    margin:70px auto 0;

    text-align:center;

}


.quote-section__footer-text{

    max-width:720px;

    margin:0 auto 34px;

    color:var(--color-text-light);

    line-height:1.9;

}


.quote-section__footer-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:18px;

}


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

@media (max-width:768px){

.quote-card{

    flex-direction:column;

    gap:20px;

    padding:36px 24px;

}

.quote-card__icon{

    font-size:3.5rem;

}

.quote-card__text{

    font-size:1.3rem;

}

.quote-section__footer-actions{

    flex-direction:column;

    align-items:stretch;

}

.quote-section__footer-actions .btn{

    width:100%;

}

}

/* ==========================================================
   Ovindi World
   Homepage CTA Section
   CTA CSS — Version 1
========================================================== */


/* ==========================================================
   CTA SECTION
========================================================== */

.home-cta {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #fff7fb 0%,
            #ffffff 100%
        );

}


/* ==========================================================
   BACKGROUND DECORATION
========================================================== */

.home-cta__background {

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:

        radial-gradient(
            circle at top right,
            rgba(217, 108, 138, .10),
            transparent 35%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(123, 140, 255, .08),
            transparent 35%
        );

}


/* ==========================================================
   CTA CONTENT CARD
========================================================== */

.home-cta__content {

    position: relative;

    z-index: 2;

    max-width: 960px;

    margin: 0 auto;

    padding: 80px 70px;

    text-align: center;

    background: #ffffff;

    border: 1px solid var(--color-border);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-lg);

}


/* ==========================================================
   EYEBROW
========================================================== */

.home-cta__eyebrow {

    display: inline-block;

    margin-bottom: 18px;

    color: var(--color-primary);

    font-size: .82rem;

    font-weight: 700;

    letter-spacing: .14em;

    line-height: 1.4;

    text-transform: uppercase;

}


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

.home-cta__title {

    margin: 0 0 22px;

    color: var(--color-text);

    font-size: clamp(2rem, 4vw, 3rem);

    line-height: 1.2;

}


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

.home-cta__description {

    max-width: 720px;

    margin: 0 auto 40px;

    color: var(--color-text-light);

    font-size: 1.05rem;

    line-height: 1.9;

}


/* ==========================================================
   PRIMARY ACTIONS
========================================================== */

.home-cta__actions {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 18px;

    margin-bottom: 40px;

}


/* ==========================================================
   QUICK LINKS
========================================================== */

.home-cta__quick-links {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 42px;

    color: var(--color-text-light);

    font-size: .95rem;

    line-height: 1.6;

}


.home-cta__quick-links a {

    color: var(--color-primary);

    font-weight: 600;

    text-decoration: none;

    transition: var(--transition);

}


.home-cta__quick-links a:hover {

    color: var(--color-primary-dark);

    text-decoration: underline;

    text-underline-offset: 4px;

}


.home-cta__quick-links a:focus-visible {

    outline: 3px solid rgba(217, 108, 138, .25);

    outline-offset: 4px;

    border-radius: 4px;

}


.home-cta__quick-links span {

    opacity: .45;

}


/* ==========================================================
   FAMILY SIGNATURE
========================================================== */

.home-cta__signature {

    max-width: 520px;

    margin: 0 auto;

}


.home-cta__signature-line {

    display: block;

    width: 90px;

    height: 4px;

    margin: 0 auto 24px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--color-primary),
            var(--color-secondary)
        );

}


.home-cta__signature-text {

    margin: 0;

    color: var(--color-text-light);

    font-size: .98rem;

    font-style: italic;

    line-height: 1.9;

}


/* ==========================================================
   CLOSING MESSAGE
========================================================== */

.home-cta__footer {

    max-width: 680px;

    margin: 42px auto 0;

    padding-top: 30px;

    border-top: 1px solid var(--color-border);

}


.home-cta__footer-icon {

    display: block;

    margin-bottom: 12px;

    font-size: 1.5rem;

    line-height: 1;

}


.home-cta__footer-text {

    margin: 0;

    color: var(--color-text-light);

    font-size: .94rem;

    line-height: 1.85;

}


/* ==========================================================
   LARGE DESKTOP
========================================================== */

@media (max-width: 1280px) {

    .home-cta__content {

        max-width: 920px;

    }

}


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

@media (max-width: 992px) {

    .home-cta__content {

        padding: 64px 48px;

    }

    .home-cta__description {

        margin-bottom: 34px;

    }

}


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

@media (max-width: 768px) {

    .home-cta__content {

        padding: 48px 26px;

    }


    .home-cta__eyebrow {

        margin-bottom: 14px;

        font-size: .76rem;

    }


    .home-cta__title {

        margin-bottom: 18px;

        font-size: clamp(1.85rem, 7vw, 2.4rem);

    }


    .home-cta__description {

        margin-bottom: 32px;

        font-size: 1rem;

        line-height: 1.8;

    }


    .home-cta__actions {

        flex-direction: column;

        align-items: stretch;

        gap: 14px;

        margin-bottom: 32px;

    }


    .home-cta__actions .btn {

        width: 100%;

    }


    .home-cta__quick-links {

        flex-direction: column;

        gap: 10px;

        margin-bottom: 34px;

    }


    .home-cta__quick-links span {

        display: none;

    }


    .home-cta__signature-text {

        font-size: .94rem;

        line-height: 1.8;

    }


    .home-cta__footer {

        margin-top: 34px;

        padding-top: 26px;

    }


    .home-cta__footer-text {

        font-size: .92rem;

        line-height: 1.8;

    }

}


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

@media (max-width: 480px) {

    .home-cta__content {

        padding: 38px 20px;

        border-radius: var(--radius-lg);

    }


    .home-cta__title {

        font-size: 1.8rem;

    }


    .home-cta__description {

        font-size: .96rem;

    }


    .home-cta__signature {

        max-width: 100%;

    }


    .home-cta__signature-line {

        width: 70px;

        height: 3px;

        margin-bottom: 20px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .home-cta__quick-links a {

        transition: none;

    }

}


/*==========================================================
=
= GLOBAL SCROLLBAR
= Chrome / Chromium Auto-Hide Behaviour
=
==========================================================*/

/*
|--------------------------------------------------------------------------
| Default state
|--------------------------------------------------------------------------
| Hide the visual scrollbar while keeping the page scrollable.
| Firefox keeps its own native scrollbar behaviour.
*/

html.scrollbar-auto-hide{

    scrollbar-width:none;

}

html.scrollbar-auto-hide::-webkit-scrollbar{

    width:0;
    height:0;

}


/*
|--------------------------------------------------------------------------
| Active state
|--------------------------------------------------------------------------
| JavaScript adds .scrollbar-active when the mouse reaches
| the right edge of the viewport.
*/

html.scrollbar-auto-hide.scrollbar-active{

    scrollbar-width:auto;

}

html.scrollbar-auto-hide.scrollbar-active::-webkit-scrollbar{

    width:12px;
    height:12px;

}


/*
|--------------------------------------------------------------------------
| Scrollbar thumb
|--------------------------------------------------------------------------
*/

html.scrollbar-auto-hide.scrollbar-active::-webkit-scrollbar-thumb{

    background:rgba(100,100,100,.45);

    border-radius:999px;

    border:3px solid transparent;

    background-clip:padding-box;

}


/*
|--------------------------------------------------------------------------
| Scrollbar track
|--------------------------------------------------------------------------
*/

html.scrollbar-auto-hide.scrollbar-active::-webkit-scrollbar-track{

    background:transparent;

}


/*
|--------------------------------------------------------------------------
| Do not apply the custom behaviour to touch devices
|--------------------------------------------------------------------------
*/

@media (hover:none), (pointer:coarse){

    html.scrollbar-auto-hide{

        scrollbar-width:auto;

    }

    html.scrollbar-auto-hide::-webkit-scrollbar{

        width:auto;
        height:auto;

    }

}
/*==========================================================
=
= END OF HOMEPAGE CSS
= VERSION 4
=
==========================================================*/