/* =========================
   GLOBAL
========================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #1f1a17;

    background: #faf7f2;
}

a {
    color: inherit;
    text-decoration: none;
}


/* =========================
   PAGE LOADER
========================= */

.page-loader {
    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #080808;

    opacity:
        1;

    visibility:
        visible;

    transition:
        opacity 0.35s ease,
        visibility 0.35s ease;
}


.page-loader-hidden {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


.loader-content {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;
}


.loader-monogram {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        74px;

    font-weight:
        400;

    line-height:
        1;

    color:
        #e4bb63;
}


.loader-name {
    margin-top:
        10px;

    font-size:
        15px;

    font-weight:
        600;

    letter-spacing:
        5px;

    color:
        #e4bb63;
}


.loader-spinner {
    width:
        28px;

    height:
        28px;

    margin-top:
        27px;

    border:
        2px solid
        rgba(228, 187, 99, 0.25);

    border-top-color:
        #e4bb63;

    border-radius:
        50%;

    animation:
        loader-spin
        0.8s
        linear
        infinite;
}


@keyframes loader-spin {

    to {
        transform:
            rotate(360deg);
    }

}


/* =========================
   LANDING PAGE
========================= */

.landing-page {
    min-height:
        100vh;

    background-image:
        url("../images/hero-hamper.webp");

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;

    padding:
        40px;
}


/* =========================
   MAIN GLASS PANEL
========================= */

.overlay-panel {
    width:
        min(1200px, 96%);

    min-height:
        82vh;

    background:
        rgba(220, 238, 241, 0.40);

    backdrop-filter:
        blur(3px);

    border-radius:
        22px;

    padding:
        25px
        38px
        42px
        38px;

    display:
        flex;

    flex-direction:
        column;

    box-shadow:
        0
        18px
        45px
        rgba(0, 0, 0, 0.12);
}


/* =========================
   TOP BAR
========================= */

.top-bar {
    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    margin-bottom:
        32px;
}

.top-left {
    min-height:
        1px;
}


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

.logo-box {
    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}

.logo-link {
    display:
        block;
}

.brand-logo {
    width:
        130px;

    height:
        130px;

    object-fit:
        cover;

    display:
        block;

    border-radius:
        18px;

    box-shadow:
        0
        6px
        20px
        rgba(0, 0, 0, 0.15);
}


/* =========================
   OUR STORY BUTTON
========================= */

.top-right {
    display:
        flex;

    justify-content:
        flex-end;
}

.story-button {
    display:
        inline-block;

    padding:
        14px
        24px;

    background:
        rgba(255, 255, 255, 0.78);

    border-radius:
        18px;

    font-size:
        18px;

    font-weight:
        600;

    transition:
        transform 0.2s,
        opacity 0.2s;
}

.story-button:hover {
    transform:
        translateY(-2px);

    opacity:
        0.92;
}


/* =========================
   MAIN HEADING
========================= */

.heading-block {
    text-align:
        center;

    margin-bottom:
        42px;
}

.heading-block h1 {
    margin:
        0;

    font-size:
        clamp(
            36px,
            4.6vw,
            62px
        );

    font-weight:
        700;

    line-height:
        1.1;
}

.heading-subtitle {
    max-width:
        720px;

    margin:
        16px
        auto
        0;

    font-size:
        18px;

    line-height:
        1.6;

    color:
        #433b37;
}


/* =========================
   TWO-CARD GRID
========================= */

.choice-grid {
    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        28px;
}


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

.choice-card {
    min-height:
        380px;

    border-radius:
        22px;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.88);

    box-shadow:
        0
        14px
        32px
        rgba(0, 0, 0, 0.08);

    transition:
        transform 0.25s,
        box-shadow 0.25s;
}

.choice-card:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0
        18px
        36px
        rgba(0, 0, 0, 0.13);
}


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

.shop-card {
    display:
        grid;

    grid-template-columns:
        220px
        1fr;
}


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

.surprise-card {
    display:
        grid;

    grid-template-columns:
        1fr
        220px;
}


/* =========================
   PHOTO AREAS
========================= */

.photo-box {
    width:
        100%;

    height:
        100%;

    padding:
        0;

    overflow:
        hidden;

    display:
        flex;

    justify-content:
        center;

    align-items:
        center;
}

.profile-photo {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    object-position:
        center top;

    display:
        block;
}

.left-photo {
    background:
        #f3eee8;
}

.right-photo {
    background:
        #f3eee8;
}


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

.choice-text {
    padding:
        32px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}

.choice-text h2 {
    margin:
        0
        0
        12px
        0;

    font-size:
        clamp(
            27px,
            3vw,
            39px
        );

    line-height:
        1.1;
}

.choice-text p {
    margin:
        18px
        0
        24px
        0;

    font-size:
        17px;

    line-height:
        1.6;
}


/* =========================
   DELIVERY BADGES
========================= */

.delivery-badge {
    width:
        fit-content;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px
        13px;

    border-radius:
        999px;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.2px;
}

.delivery-icon {
    font-size:
        15px;
}

.india-badge {
    background:
        #e8f4ea;

    color:
        #245c32;

    border:
        1px solid
        #bddcc4;
}

.thrissur-badge {
    background:
        #f8e5e3;

    color:
        #7c3036;

    border:
        1px solid
        #e6bfbb;
}


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

.card-link {
    display:
        inline-block;

    width:
        fit-content;

    padding:
        14px
        22px;

    border-radius:
        12px;

    background:
        #231d1a;

    color:
        white;

    font-size:
        16px;

    font-weight:
        600;

    transition:
        transform 0.2s,
        opacity 0.2s;
}

.card-link:hover {
    transform:
        translateY(-2px);

    opacity:
        0.9;
}


/* =========================
   OUR STORY
========================= */

.our-story-section {
    padding:
        90px
        8%;

    background:
        #fffaf5;
}

.story-content {
    max-width:
        850px;
}

.story-label {
    margin:
        0
        0
        14px
        0;

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        2px;
}

.story-content h2 {
    margin:
        0
        0
        22px
        0;

    font-size:
        clamp(
            34px,
            4vw,
            54px
        );

    line-height:
        1.1;
}

.story-content p:last-child {
    margin:
        0;

    font-size:
        18px;

    line-height:
        1.8;
}


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

@media (max-width: 950px) {

    .landing-page {
        padding:
            18px;
    }

    .overlay-panel {
        padding:
            24px
            18px
            28px
            18px;
    }

    .top-bar {
        grid-template-columns:
            1fr;

        gap:
            16px;

        justify-items:
            center;
    }

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

    .brand-logo {
        width:
            110px;

        height:
            110px;
    }

    .heading-block {
        margin-bottom:
            30px;
    }

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

    .shop-card {
        grid-template-columns:
            180px
            1fr;
    }

    .surprise-card {
        grid-template-columns:
            1fr
            180px;
    }

    .choice-text {
        padding:
            28px
            24px;
    }
}


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

@media (max-width: 650px) {

    .landing-page {
        min-height:
            auto;

        align-items:
            flex-start;

        padding:
            8px;

        background-image:
            url("../images/hero-hamper-mobile.webp");

        background-size:
            100%
            auto;

        background-position:
            center
            top;

        background-repeat:
            no-repeat;

        background-color:
            #f5eee8;
    }


    .overlay-panel {
        width:
            100%;

        min-height:
            auto;

        border-radius:
            20px;

        padding:
            13px
            12px
            16px;

        background:
            rgba(236, 242, 239, 0.72);

        backdrop-filter:
            blur(5px);

        box-shadow:
            none;
    }


    .top-bar {
        display:
            flex;

        flex-direction:
            row;

        justify-content:
            space-between;

        align-items:
            center;

        gap:
            8px;

        margin-bottom:
            14px;
    }

    .top-left {
        display:
            none;
    }


    .brand-logo {
        width:
            64px;

        height:
            64px;

        border-radius:
            14px;

        box-shadow:
            0
            4px
            12px
            rgba(0, 0, 0, 0.13);
    }


    .story-button {
        padding:
            9px
            14px;

        border-radius:
            12px;

        font-size:
            13px;

        background:
            rgba(255, 255, 255, 0.88);
    }


    .heading-block {
        margin-bottom:
            15px;

        padding:
            0
            4px;
    }

    .heading-block h1 {
        font-size:
            31px;

        line-height:
            1;

        letter-spacing:
            -0.6px;
    }

    .heading-subtitle {
        max-width:
            330px;

        margin:
            8px
            auto
            0;

        font-size:
            13px;

        line-height:
            1.4;
    }


    .choice-grid {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            11px;
    }


    .choice-card {
        min-height:
            158px;

        height:
            158px;

        border-radius:
            17px;

        background:
            rgba(255, 255, 255, 0.94);

        box-shadow:
            0
            7px
            18px
            rgba(0, 0, 0, 0.08);
    }


    .shop-card {
        display:
            grid;

        grid-template-columns:
            35%
            65%;
    }


    .surprise-card {
        display:
            grid;

        grid-template-columns:
            65%
            35%;
    }


    .photo-box {
        width:
            100%;

        height:
            158px;

        min-height:
            0;

        overflow:
            hidden;
    }


    .profile-photo {
        width:
            100%;

        height:
            100%;

        object-fit:
            cover;

        display:
            block;
    }


    .left-photo .profile-photo {
        object-position:
            center
            12%;
    }


    .right-photo .profile-photo {
        object-position:
            center
            10%;
    }


    .choice-text {
        padding:
            13px;

        display:
            flex;

        flex-direction:
            column;

        justify-content:
            center;

        min-width:
            0;
    }


    .choice-text h2 {
        margin:
            0
            0
            7px;

        font-size:
            20px;

        line-height:
            0.98;

        letter-spacing:
            -0.3px;
    }


    .choice-text p {
        display:
            none;
    }


    .delivery-badge {
        max-width:
            100%;

        padding:
            5px
            7px;

        gap:
            4px;

        border-radius:
            999px;

        font-size:
            9px;

        line-height:
            1.15;

        white-space:
            normal;
    }


    .delivery-icon {
        font-size:
            10px;
    }


    .card-link {
        margin-top:
            9px;

        padding:
            8px
            11px;

        border-radius:
            9px;

        font-size:
            12px;

        line-height:
            1.1;
    }


    .our-story-section {
        padding:
            45px
            20px;
    }


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


    .story-content p:last-child {
        font-size:
            15px;

        line-height:
            1.65;
    }

}


/* =====================================================
   EXTRA SMALL PHONES
===================================================== */

@media (max-width: 390px) {

    .overlay-panel {
        padding:
            11px
            10px
            14px;
    }


    .brand-logo {
        width:
            58px;

        height:
            58px;
    }


    .story-button {
        padding:
            8px
            12px;

        font-size:
            12px;
    }


    .top-bar {
        margin-bottom:
            11px;
    }


    .heading-block {
        margin-bottom:
            12px;
    }


    .heading-block h1 {
        font-size:
            28px;
    }


    .heading-subtitle {
        font-size:
            12px;

        line-height:
            1.35;
    }


    .choice-grid {
        gap:
            9px;
    }


    .choice-card {
        min-height:
            150px;

        height:
            150px;
    }


    .photo-box {
        height:
            150px;
    }


    .shop-card {
        grid-template-columns:
            34%
            66%;
    }


    .surprise-card {
        grid-template-columns:
            66%
            34%;
    }


    .choice-text {
        padding:
            11px;
    }


    .choice-text h2 {
        font-size:
            18px;

        margin-bottom:
            6px;
    }


    .delivery-badge {
        font-size:
            8.5px;

        padding:
            4px
            6px;
    }


    .card-link {
        margin-top:
            7px;

        padding:
            7px
            9px;

        font-size:
            11px;
    }

}