/* =========================
   RESET
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;

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

    font-family: var(--font-primary);

    overflow-x: hidden;
}

button,
a {
    font: inherit;
}


/* =========================
   DESIGN SYSTEM
========================= */
@font-face {
    font-family: "Cover";
    src: url("assets/fonts/font-cover3.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}
:root {
    /* COLORS */

    --pink: #d78ca0;
    --green: #729962;
    --brown: #a9785f;
    --darkbrown: #453127;
    --peach: #fff9ed;
    --lightpink: #feecf2;
    --lightpeach: #fff3d9;
    --red: #ff3b3b;
    



    --black: #1a1a1a;
    --white: #ffffff;
    --background: #fffbf8;

    --border-light: #eeeeee;
    --submenu-background: #fafafa;
    --overlay: rgba(0, 0, 0, 0.35);

    /* TYPOGRAPHY */

    --font-primary: "Nunito", sans-serif;
    --font-cover: "Cover", sans-serif;

    /* GENERAL RESPONSIVE FONT SIZES */

    --text-xs: clamp(11px, 2.8vw, 12px);
    --text-sm: clamp(13px, 3.2vw, 14px);
    --text-md: clamp(15px, 3.8vw, 16px);
    --text-lg: clamp(17px, 4.2vw, 19px);
    --text-xl: clamp(24px, 6vw, 28px);
    --text-2xl: clamp(32px, 8vw, 40px);

    /* COMPONENT FONT SIZES */

    --nav-text: clamp(15px, 3.8vw, 17px);
    --nav-subtext: clamp(13px, 3.3vw, 15px);
    --button-text: clamp(15px, 3.8vw, 17px);
    --hero-title: clamp(34px, 9vw, 52px);
    --hero-subtitle: clamp(16px, 4vw, 20px);
    --menu-title: clamp(30px, 7vw, 35px);


    /* FONT WEIGHTS */

    --regular: 400;
    --medium: 500;
    --semibold: 600;
    --bold: 700;
    --extrabold: 800;
    --black-weight: 900;

    /* RESPONSIVE SPACING */

    --space-xs: clamp(6px, 2vw, 8px);
    --space-sm: clamp(12px, 3vw, 16px);
    --space-md: clamp(18px, 5vw, 24px);
    --space-lg: clamp(28px, 7vw, 40px);
    --space-xl: clamp(44px, 10vw, 64px);

    /* BORDER RADIUS */

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 999px;

    /* SHADOWS */

    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 18px 45px rgba(0, 0, 0, 0.16);

    /* TRANSITIONS */

    --transition-fast: 0.2s ease;
    --transition-normal: 0.35s ease;
}


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

.header {
    height: 60px;

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

    padding: 0 20px;

    background: var(--white);
}

.logo {
    display: flex;
    align-items: center;

    text-decoration: none;
}

.logo img {
    width: 140px;
    height: auto;

    display: block;
}
/* =========================
   HEADER LINE
========================= */

.header-line {
    display: flex;

    width: 100%;
    height: 3px;
}

.line-pink {
    width: 50%;
    background: var(--pink);
}

.line-green {
    width: 50%;
    background: var(--green);
}

/* =========================
   BUTON HAMBURGER
========================= */

.menu-button {
    width: 30px;
    height: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 0;

    background: none;
    border: none;

    cursor: pointer;
}

.menu-button span {
    width: 100%;
    height: 3px;

    background: var(--green);

    border-radius: var(--radius-full);
}


/* =========================
   MENIU MOBIL
========================= */

.mobile-menu {
    position: fixed;

    top: 0;
    right: -100%;

    width: 88%;
    max-width: 390px;

    height: 100vh;
    height: 100dvh;

    background: var(--white);

    z-index: 1000;

    overflow-y: auto;
    overflow-x: hidden;

    transition: right var(--transition-normal);
}

.mobile-menu.open {
    right: 0;
}


/* =========================
   HEADER DIN MENIU
========================= */

.menu-header {
    position: relative;

    min-height: 10px;

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

    padding: 5px 25px;

    border-bottom: 1px solid var(--border-light);
}

.menu-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-logo {
    width: 170px;
    max-width: 100%;
    height: auto;

    display: block;
}

.close-menu {
    position: absolute;

    left: 22px;
    top: 50%;

    transform: translateY(-50%);

    padding: 4px;

    background: none;
    border: none;

    color: var(--black);

    font-size: 34px;
    font-weight: var(--regular);
    line-height: 1;

    cursor: pointer;
}


/* =========================
   LINKURI PRINCIPALE
========================= */

.menu-links > a,
.submenu-button {
    width: 100%;
    min-height: 64px;

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

    padding: 14px 24px;

    background: var(--white);

    border: none;
    border-bottom: 1px solid var(--border-light);

    color: var(--black);

    font-family: var(--font-primary);
    font-size: var(--nav-text);
    font-weight: var(--extrabold);

    text-align: left;
    text-decoration: none;

    cursor: pointer;
}


/* =========================
   SĂGEATĂ SUBMENIU
========================= */

.menu-arrow {
    color: #cfcfcf;

    font-size: 32px;
    font-weight: var(--regular);
    line-height: 1;

    transition: transform var(--transition-fast);
}

.submenu-button.open .menu-arrow {
    transform: rotate(90deg);
}


/* =========================
   SUBMENIU
========================= */

.submenu {
    display: none;

    background: var(--submenu-background);
}

.submenu.open {
    display: block;
}

.submenu a {
    display: block;

    padding: 13px 24px 13px 40px;

    border-bottom: 1px solid var(--border-light);

    color: var(--black);

    font-family: var(--font-primary);
    font-size: var(--nav-subtext);
    font-weight: var(--bold);

    text-decoration: none;
}


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

.menu-overlay {
    position: fixed;

    inset: 0;

    background: var(--overlay);

    opacity: 0;
    visibility: hidden;

    z-index: 999;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}

.menu-overlay.open {
    opacity: 1;
    visibility: visible;
}


/* =========================
   STARE MENIU DESCHIS
========================= */

body.menu-open {
    overflow: hidden;
}


/* =========================
   HOVER PENTRU DISPOZITIVE
   CU MOUSE
========================= */

@media (hover: hover) {
    .menu-links > a:hover,
    .submenu-button:hover,
    .submenu a:hover {
        background: var(--background);
    }
}
/* =========================
   PRODUCTS PAGE
========================= */

.products-page {
    width: 100%;
    min-height: 100vh;

    padding: 60px 40px;

    background: var(--white);
}

.products-list {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 30px;
}


/* =========================
   PRODUCT CARD
========================= */

.product-card {
    width: 100%;

    display: grid;
    grid-template-columns: 320px 1fr 180px;
    align-items: center;

    gap: 45px;

    padding: 30px;

    background: var(--lightpink);

    border-radius: 30px;

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


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

.product-image-box {
    width: 100%;
    height: 280px;

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

    overflow: hidden;

    border-radius: 22px;
}

.product-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
}


/* =========================
   PRODUCT INFO
========================= */

.product-info {
    min-width: 0;

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

.product-title {
    margin: 0 0 28px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(28px, 2.5vw, 42px);
    font-weight: var(--black-weight);

    line-height: 1.1;
}

.product-description,
.product-allergens {
    margin: 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(15px, 1.3vw, 19px);
    font-weight: var(--medium);

    line-height: 1.6;
}

.product-description {
    margin-bottom: 18px;
}

.product-description strong,
.product-allergens strong {
    color: var(--pink);

    font-weight: var(--black-weight);
}


/* =========================
   PRODUCT PRICE
========================= */

.product-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
}

.product-price span {
    margin-bottom: 5px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--bold);
}

.product-price strong {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: var(--black-weight);

    line-height: 1;

    white-space: nowrap;
}


/* =========================
   PRODUCT CARD - MOBILE
========================= */

@media (max-width: 700px) {

    .products-page {
        padding: 30px 18px;
    }

    .product-card {
        display: flex;
        flex-direction: column;

        gap: 0;

        padding: 20px;

        border-radius: 26px;
    }

    .product-image-box {
        height: 230px;

        margin-bottom: 22px;
    }

    .product-title {
        margin-bottom: 18px;

        font-size: 27px;

        text-align: center;
    }

    .product-description,
    .product-allergens {
        font-size: 15px;

        line-height: 1.5;
    }

    .product-description {
        margin-bottom: 14px;
    }

    .product-price {
        width: 100%;

        margin-top: 24px;
        padding-top: 18px;

        border-top: 1px solid var(--pink);
    }

    .product-price span {
        font-size: 14px;
    }

    .product-price strong {
        font-size: 30px;
    }

}
/* =========================
   PRODUCT TAGS
========================= */

.product-card-tagged {
    position: relative;
}

.product-tag {
    position: absolute;

    top: 18px;
    left: 18px;

    z-index: 2;

    padding: 7px 14px;

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

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

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    line-height: 1;

    letter-spacing: 0.4px;

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


/* păstrăm indisponibil pe rosu */

.product-tag-unavailable {
    background: var(--red);
}


/* =========================
   PRODUCT TAG - MOBILE
========================= */

@media (max-width: 700px) {

    .product-tag {
        top: 12px;
        left: 12px;

        padding: 6px 11px;

        font-size: 11px;
    }

}
/* =========================
   PRODUCTS PAGE TITLE
========================= */

.products-page-title {
    margin: 0 0 40px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(32px, 4vw, 52px);
    font-weight: var(--black-weight);

    text-align: center;
    line-height: 1;
}
/* =========================
   CONTACT PAGE
========================= */

.contact-page {
    width: 100%;
    min-height: 100vh;

    padding: 60px 40px 90px;

    background: var(--white);
}

.contact-grid {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: start;
}


/* =========================
   CONTACT INFO
========================= */

.contact-info {
    padding-top: 10px;
}

.contact-heading {
    max-width: 620px;

    margin: 0 0 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(26px, 2.3vw, 40px);
    font-weight: var(--black-weight);

    line-height: 1.15;
}

.contact-intro {
    max-width: 620px;

    margin: 0 0 40px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: var(--medium);

    line-height: 1.6;
}


/* =========================
   CONTACT BLOCKS
========================= */

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

.contact-block-title {
    margin-bottom: 12px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 19px;
    font-weight: var(--black-weight);
}

.contact-detail {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--semibold);

    line-height: 1.6;
}

.contact-detail i {
    width: 22px;

    margin-top: 4px;

    color: var(--pink);

    font-size: 20px;

    text-align: center;
}

.contact-detail a {
    color: var(--darkbrown);

    text-decoration: none;
}

.contact-phone-list {
    display: flex;
    flex-direction: column;

    gap: 5px;
}


/* =========================
   CONTACT FORM
========================= */

.contact-form-wrapper {
    width: 100%;
}

.contact-form {
    width: 100%;

    padding: 34px;

    background: var(--peach);

    border: 2px solid var(--brown);
    border-radius: 30px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 20px;
}

.contact-field {
    display: flex;
    flex-direction: column;

    margin-bottom: 20px;
}

.contact-field label {
    margin-bottom: 8px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--bold);
}

.contact-field input,
.contact-field textarea {
    width: 100%;

    padding: 14px 16px;

    background: var(--white);

    border: 1.5px solid var(--brown);
    border-radius: 14px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;

    outline: none;

    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.contact-field input {
    min-height: 50px;
}

.contact-field textarea {
    min-height: 170px;

    resize: vertical;
}

.contact-field input:focus,
.contact-field textarea:focus {
    border-color: var(--pink);

    box-shadow: 0 0 0 3px rgba(215, 140, 160, 0.12);
}


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

.contact-submit {
    padding: 12px 32px;

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

    border: none;
    border-radius: var(--radius-full);

    font-family: var(--font-primary);
    font-size: var(--button-text);
    font-weight: var(--black-weight);

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

@media (hover: hover) {

    .contact-submit:hover {
        transform: translateY(-2px);

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

}


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

@media (max-width: 700px) {

    .contact-page {
        padding: 35px 18px 60px;
    }

    .contact-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .contact-heading {
        font-size: 25px;

        text-align: center;
    }

    .contact-intro {
        text-align: center;
    }

    .contact-form {
        padding: 24px 20px;

        border-radius: 26px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-submit {
        width: 100%;
    }

}
/* =========================
   ABOUT PAGE
========================= */

.about-page {
    width: 100%;

    background: var(--white);

    color: var(--darkbrown);
}


/* =========================
   ABOUT HERO
========================= */

.about-hero {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    padding: 75px 50px 100px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;

    gap: 70px;
}

.about-hero-content {
    position: relative;

    z-index: 2;
}

.about-eyebrow {
    display: inline-block;

    margin-bottom: 18px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.about-main-title {
    max-width: 650px;

    margin: 0 0 25px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(46px, 5.5vw, 82px);
    font-weight: var(--black-weight);

    line-height: 0.98;
}

.about-main-title span {
    color: var(--green);
}

.about-hero-text {
    max-width: 500px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(18px, 1.5vw, 22px);
    font-weight: var(--bold);

    line-height: 1.5;
}

.about-hero-image-wrap {
    position: relative;

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

.about-hero-image-wrap::before {
    content: "";

    position: absolute;

    width: 82%;
    height: 82%;

    background: var(--lightpink);

    border-radius: 50%;

    z-index: 0;
}

.about-hero-image {
    position: relative;

    z-index: 1;

    width: 100%;
    max-width: 620px;
    height: auto;

    display: block;
}


/* =========================
   COMMON ABOUT TEXT
========================= */

.about-section-number {
    display: block;

    margin-bottom: 10px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.about-section-title {
    margin: 0 0 30px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(34px, 3.5vw, 54px);
    font-weight: var(--black-weight);

    line-height: 1;
}

.about-story-text p,
.about-split-content p,
.about-moment-text p,
.about-final-card p {
    margin: 0 0 20px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(16px, 1.25vw, 19px);
    font-weight: var(--medium);

    line-height: 1.7;
}

.about-story-text strong,
.about-split-content strong,
.about-moment-text strong,
.about-final-card strong {
    font-weight: var(--black-weight);
}


/* =========================
   STORY CARD
========================= */

.about-story-section {
    width: 100%;

    padding: 40px 40px 100px;
}

.about-story-card {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 60px;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;

    gap: 70px;

    background: var(--peach);

    border: 2px solid var(--brown);
    border-radius: 36px;
}

.about-story-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-story-image img {
    width: 100%;
    max-width: 480px;
    height: auto;

    display: block;
}

.about-quote {
    margin-top: 35px !important;

    font-size: clamp(28px, 3vw, 46px) !important;
    font-weight: var(--black-weight) !important;

    line-height: 1.1 !important;
}

.dream-word {
    color: var(--green);
}

.cream-word {
    color: var(--pink);
}


/* =========================
   SPLIT SECTION
========================= */

.about-split-section {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 100px 50px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;

    gap: 90px;
}

.about-split-image {
    min-height: 500px;

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

    background: var(--lightpink);

    border-radius: 38px;

    overflow: hidden;
}

.about-split-image img {
    width: 90%;
    height: 90%;

    object-fit: contain;

    display: block;
}

.about-highlight {
    margin-top: 30px !important;

    padding-left: 22px;

    border-left: 5px solid var(--green);

    font-size: clamp(18px, 1.5vw, 22px) !important;
    font-weight: var(--black-weight) !important;
}


/* =========================
   MOMENT SECTION
========================= */

.about-moment-section {
    width: 100%;

    padding: 90px 40px;

    background: var(--lightpink);
}

.about-moment-inner {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1fr 0.8fr;
    align-items: center;

    gap: 80px;
}

.about-moment-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-moment-image img {
    width: 100%;
    max-width: 540px;
    height: auto;

    display: block;
}


/* =========================
   FINAL SECTION
========================= */

.about-final-section {
    width: 100%;

    padding: 110px 40px;

    background: var(--white);
}

.about-final-card {
    width: 100%;
    max-width: 1350px;

    margin: 0 auto;

    padding: 70px;

    background: var(--peach);

    border-radius: 38px;

    text-align: center;
}

.about-final-title {
    margin: 0 0 55px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(44px, 5vw, 76px);
    font-weight: var(--black-weight);

    line-height: 0.95;
}

.about-final-title span {
    color: var(--green);
}

.about-final-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 60px;

    text-align: left;
}

.about-mission {
    max-width: 900px;

    margin: 65px auto 35px;
    padding: 35px;

    background: var(--white);

    border: 2px solid var(--brown);
    border-radius: 28px;
}

.about-mission p {
    margin-bottom: 10px;
}

.about-mission strong {
    display: block;

    color: var(--green);

    font-family: var(--font-primary);
    font-size: clamp(21px, 2vw, 30px);
    font-weight: var(--black-weight);

    line-height: 1.3;
}

.about-ending {
    margin-top: 35px !important;
    margin-bottom: 5px !important;

    font-weight: var(--black-weight) !important;
}

.about-see-you {
    margin-bottom: 35px !important;

    color: var(--pink) !important;

    font-size: clamp(25px, 2.5vw, 36px) !important;
    font-weight: var(--black-weight) !important;
}


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

.about-order-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 34px;

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

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

    font-family: var(--font-primary);
    font-size: var(--button-text);
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

@media (hover: hover) {

    .about-order-button:hover {
        transform: translateY(-3px);

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

}


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

@media (max-width: 700px) {

    .about-hero {
        padding: 45px 20px 65px;

        grid-template-columns: 1fr;

        gap: 35px;

        text-align: center;
    }

    .about-main-title {
        margin-left: auto;
        margin-right: auto;

        font-size: clamp(42px, 12vw, 58px);
    }

    .about-hero-text {
        margin: 0 auto;

        font-size: 17px;
    }

    .about-hero-image {
        max-width: 400px;
    }


    /* STORY */

    .about-story-section {
        padding: 20px 18px 60px;
    }

    .about-story-card {
        padding: 32px 22px;

        grid-template-columns: 1fr;

        gap: 35px;

        border-radius: 28px;
    }

    .about-story-image {
        order: -1;
    }

    .about-story-image img {
        max-width: 330px;
    }

    .about-section-title {
        font-size: 34px;
    }

    .about-quote {
        text-align: center;

        font-size: 29px !important;
    }


    /* NOVEMBER */

    .about-split-section {
        padding: 60px 18px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-split-image {
        min-height: 330px;
    }

    .about-split-image img {
        width: 95%;
    }


    /* MOMENT */

    .about-moment-section {
        padding: 60px 18px;
    }

    .about-moment-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .about-moment-image img {
        max-width: 360px;
    }


    /* FINAL */

    .about-final-section {
        padding: 60px 18px;
    }

    .about-final-card {
        padding: 40px 22px;

        border-radius: 28px;
    }

    .about-final-title {
        margin-bottom: 40px;

        font-size: 44px;
    }

    .about-final-columns {
        grid-template-columns: 1fr;

        gap: 10px;
    }

    .about-mission {
        margin-top: 45px;

        padding: 25px 18px;
    }

    .about-order-button {
        width: 100%;
    }

}
/* =========================
   CORPORATE PAGE
========================= */

.corporate-page {
    width: 100%;

    background: var(--white);
    color: var(--darkbrown);
}


/* =========================
   CORPORATE HERO
========================= */

.corporate-hero {
    position: relative;

    width: 100%;
    min-height: 620px;

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

    overflow: hidden;
}

.corporate-hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center 10%;

    display: block;
}

.corporate-hero-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0, 0, 0, 0.28);
}

.corporate-hero-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1000px;

    padding: 40px;

    text-align: center;

    color: var(--white);
}

.corporate-eyebrow {
    display: inline-block;

    margin-bottom: 16px;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.corporate-title {
    margin: 0 0 24px;

    font-family: var(--font-primary);
    font-size: clamp(48px, 6vw, 88px);
    font-weight: var(--black-weight);

    line-height: 0.98;
}

.corporate-title span {
    color: var(--pink);
}

.corporate-hero-content p {
    max-width: 650px;

    margin: 0 auto;

    font-family: var(--font-primary);
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: var(--bold);

    line-height: 1.5;
}


/* =========================
   CORPORATE INTRO
========================= */

.corporate-intro {
    width: 100%;

    padding: 90px 40px;
}

.corporate-intro-inner {
    max-width: 950px;

    margin: 0 auto;

    text-align: center;
}

.corporate-intro p {
    margin: 0 0 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(18px, 1.7vw, 25px);
    font-weight: var(--semibold);

    line-height: 1.65;
}


/* =========================
   SPLIT SECTION
========================= */

.corporate-split {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    padding: 90px 50px;

    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    align-items: center;

    gap: 90px;
}

.corporate-split-image {
    min-height: 620px;

    border-radius: 36px;

    overflow: hidden;
}

.corporate-split-image img {
    width: 100%;
    height: 100%;

    min-height: 620px;

    object-fit: cover;

    display: block;
}

.corporate-split-content h2,
.corporate-business-content h2,
.corporate-cta h2 {
    margin: 0 0 30px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(36px, 4vw, 58px);
    font-weight: var(--black-weight);

    line-height: 1;
}

.corporate-section-number {
    display: block;

    margin-bottom: 10px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.corporate-split-content p,
.corporate-business-content p,
.corporate-cta p {
    margin: 0 0 20px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(16px, 1.3vw, 19px);
    font-weight: var(--medium);

    line-height: 1.7;
}

.corporate-split-content strong,
.corporate-business-content strong,
.corporate-cta strong {
    font-weight: var(--black-weight);
}


/* =========================
   CORPORATE BUSINESS
========================= */

.corporate-business {
    width: 100%;

    padding: 100px 40px;

    background: var(--lightpink);
}

.corporate-business-inner {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    align-items: center;

    gap: 90px;
}

.corporate-business-image {
    min-height: 620px;

    border-radius: 36px;

    overflow: hidden;
}

.corporate-business-image img {
    width: 100%;
    height: 100%;

    min-height: 620px;

    object-fit: cover;

    display: block;
}

.corporate-highlight {
    margin-top: 30px !important;

    padding: 24px;

    background: var(--white);

    border-left: 5px solid var(--green);
    border-radius: 18px;

    font-weight: var(--black-weight) !important;
}


/* =========================
   CORPORATE CTA
========================= */

.corporate-cta-section {
    width: 100%;

    padding: 110px 40px;

    background: var(--white);
}

.corporate-cta {
    width: 100%;
    max-width: 1000px;

    margin: 0 auto;
    padding: 70px 50px;

    background: var(--peach);

    border: 2px solid var(--brown);
    border-radius: 36px;

    text-align: center;
}

.corporate-cta p {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;
}

.corporate-cta-strong {
    margin-top: 25px !important;

    font-size: clamp(18px, 1.7vw, 23px) !important;
    font-weight: var(--black-weight) !important;
}


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

.corporate-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 20px;

    padding: 13px 34px;

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

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

    font-family: var(--font-primary);
    font-size: var(--button-text);
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

@media (hover: hover) {

    .corporate-contact-button:hover {
        transform: translateY(-3px);

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

}


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

@media (max-width: 700px) {

    .corporate-hero {
        min-height: 520px;
    }

    .corporate-hero-content {
        padding: 30px 20px;
    }

    .corporate-title {
        font-size: clamp(42px, 12vw, 58px);
    }

    .corporate-intro {
        padding: 60px 20px;
    }

    .corporate-intro p {
        font-size: 17px;
    }


    /* EVENTS */

    .corporate-split {
        padding: 60px 18px;

        grid-template-columns: 1fr;

        gap: 40px;
    }

    .corporate-split-image {
        min-height: 430px;
    }

    .corporate-split-image img {
        min-height: 430px;
    }


    /* BUSINESS */

    .corporate-business {
        padding: 60px 18px;
    }

    .corporate-business-inner {
        grid-template-columns: 1fr;

        gap: 40px;
    }

    .corporate-business-image {
        min-height: 430px;
    }

    .corporate-business-image img {
        min-height: 430px;
    }


    /* CTA */

    .corporate-cta-section {
        padding: 60px 18px;
    }

    .corporate-cta {
        padding: 42px 22px;

        border-radius: 28px;
    }

    .corporate-contact-button {
        width: 100%;
    }

}
/* =========================================================
   HOMEPAGE REDESIGN - CREAM DREAM
========================================================= */


/* =========================
   HOME GENERAL
========================= */

.home-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
    text-transform: uppercase;
}


/* =========================
   HOME HERO
========================= */

.hero {
    position: relative;

    width: 100%;
    height: clamp(580px, 82vh, 920px);

    overflow: hidden;
}

.hero-image {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    display: block;

    transform: scale(1.015);
}

.hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.05) 45%,
            rgba(0, 0, 0, 0.30) 100%
        );
}

.hero-content {
    position: absolute;

    inset: 0;

    z-index: 2;

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

    padding: 50px 24px;

    text-align: center;
}

.hero-inner {
    width: 100%;
    max-width: 1050px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero-eyebrow {
    display: inline-flex;

    margin-bottom: 25px;
    padding: 8px 17px;

    background: rgba(255, 255, 255, 0.88);
    color: var(--darkbrown);

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

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--black-weight);

    letter-spacing: 1.8px;

    backdrop-filter: blur(8px);
}

.hero-title {
    margin: 0;

    color: var(--white);

    font-family: var(--font-cover);
    font-size: clamp(44px, 6.5vw, 86px);
    font-weight: normal;

    line-height: 0.98;

    text-shadow:
        0 5px 12px rgba(0, 0, 0, 0.45),
        0 18px 35px rgba(0, 0, 0, 0.25),
        0 35px 70px rgba(0, 0, 0, 0.20);
}

.hero-line {
    display: block;

    white-space: nowrap;
}

.hero-dream,
.hero-cream {
    position: relative;

    color: var(--white);
}

.hero-dream {
    text-shadow:
        -2px 0 var(--green),
        2px 0 var(--green),
        0 -2px var(--green),
        0 2px var(--green),
        -2px -2px var(--green),
        2px -2px var(--green),
        -2px 2px var(--green),
        2px 2px var(--green),
        0 8px 20px rgba(0, 0, 0, 0.35);
}

.hero-cream {
    text-shadow:
        -2px 0 var(--pink),
        2px 0 var(--pink),
        0 -2px var(--pink),
        0 2px var(--pink),
        -2px -2px var(--pink),
        2px -2px var(--pink),
        -2px 2px var(--pink),
        2px 2px var(--pink),
        0 8px 20px rgba(0, 0, 0, 0.35);
}


/* =========================
   HERO BUTTONS
========================= */

.hero-actions {
    margin-top: 38px;

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

    gap: 12px;
}

.hero-button {
    min-height: 46px;

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

    padding: 12px 24px;

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

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    letter-spacing: 0.4px;
    text-decoration: none;

    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.hero-button-primary {
    background: var(--pink);
    color: var(--white);

    border: 2px solid var(--pink);
}

.hero-button-secondary {
    background: rgba(255, 255, 255, 0.92);
    color: var(--darkbrown);

    border: 2px solid rgba(255, 255, 255, 0.92);
}


/* =========================
   HERO SCROLL
========================= */

.hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 24px;

    z-index: 3;

    width: 30px;
    height: 46px;

    border: 2px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-full);

    transform: translateX(-50%);
}

.hero-scroll span {
    position: absolute;

    top: 8px;
    left: 50%;

    width: 4px;
    height: 8px;

    background: var(--white);

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

    transform: translateX(-50%);
}


/* =========================
   MENU SECTION
========================= */

.menu-section {
    position: relative;

    padding: 100px 0 110px;

    background: var(--peach);

    overflow: hidden;
}

.menu-section::before {
    content: "";

    position: absolute;

    top: 120px;
    left: -80px;

    width: 180px;
    height: 180px;

    background: var(--lightpink);

    border-radius: 50%;
}

.menu-section::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: 250px;

    width: 180px;
    height: 180px;

    background: rgba(114, 153, 98, 0.09);

    border-radius: 50%;
}

.menu-title-section {
    position: relative;

    z-index: 2;

    max-width: 720px;

    margin: 0 auto;
    padding: 0 24px 55px;

    text-align: center;
}

.menu-title {
    margin: 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(42px, 4.5vw, 66px);
    font-weight: var(--black-weight);

    line-height: 0.95;
}

.menu-subtitle {
    max-width: 600px;

    margin: 20px auto 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(15px, 1.2vw, 18px);
    font-weight: var(--medium);

    line-height: 1.6;

    opacity: 0.82;
}


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

.category-slider-wrapper {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1540px;

    margin: 0 auto;
    padding: 0 65px;
}

.category-slider {
    width: 100%;

    margin: 0;
    padding: 10px 10px 30px;

    display: flex;
    align-items: stretch;

    gap: 22px;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
}

.category-slider::-webkit-scrollbar {
    display: none;
}

.category-card {
    position: relative;

    flex: 0 0 230px;

    min-width: 0;

    aspect-ratio: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    padding: 16px 16px 20px;

    background: var(--white);

    border: 1px solid rgba(169, 120, 95, 0.12);
    border-radius: 30px;

    color: var(--darkbrown);

    text-decoration: none;

    scroll-snap-align: start;

    box-shadow:
        0 8px 25px rgba(69, 49, 39, 0.06);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.category-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;

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

    background: var(--lightpink);

    border-radius: 22px;

    overflow: hidden;
}

.category-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;

    transition: transform var(--transition-normal);
}

.category-name {
    margin: 20px 0 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: var(--black-weight);

    line-height: 1;
}

.category-link {
    margin-top: 10px;

    display: flex;
    align-items: center;

    gap: 5px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--black-weight);

    letter-spacing: 1.2px;
}

.category-link span {
    font-size: 16px;

    transition: transform var(--transition-fast);
}


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

.slider-arrow {
    position: absolute;

    top: 50%;

    width: 46px;
    height: 46px;

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

    z-index: 10;

    transform: translateY(-50%);

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

    border: 1px solid rgba(69, 49, 39, 0.08);
    border-radius: 50%;

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

    font-size: 35px;
    line-height: 1;

    cursor: pointer;

    transition:
        transform var(--transition-fast),
        opacity var(--transition-fast),
        background var(--transition-fast);
}

.slider-arrow-left {
    left: 8px;
}

.slider-arrow-right {
    right: 8px;
}

.slider-arrow:disabled {
    opacity: 0.25;

    cursor: default;
}


/* =========================
   ORDER PROMO
========================= */

.order-promo {
    position: relative;

    z-index: 2;

    width: calc(100% - 48px);
    max-width: 1180px;

    min-height: 430px;

    margin: 100px auto 0;
    padding: 50px 70px;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: center;

    gap: 70px;

    background: var(--white);

    border: 2px solid rgba(169, 120, 95, 0.18);
    border-radius: 42px;

    box-shadow:
        0 18px 50px rgba(69, 49, 39, 0.07);

    overflow: hidden;
}

.order-promo-decoration {
    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}

.order-promo-decoration-one {
    top: -80px;
    right: -60px;

    width: 210px;
    height: 210px;

    background: var(--lightpink);
}

.order-promo-decoration-two {
    bottom: -90px;
    left: 35%;

    width: 180px;
    height: 180px;

    background: rgba(114, 153, 98, 0.10);
}

.order-promo-image {
    position: relative;

    z-index: 2;

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

.order-promo-image img {
    width: 100%;
    max-width: 420px;
    height: auto;

    display: block;

    filter: drop-shadow(
        0 20px 20px rgba(69, 49, 39, 0.12)
    );
}

.order-promo-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.order-promo-eyebrow {
    margin-bottom: 15px;

    color: var(--green);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.order-promo-title {
    margin: 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(31px, 3vw, 48px);
    font-weight: var(--black-weight);

    line-height: 1.02;
}

.order-promo-title .promo-second-line {
    display: block;

    color: var(--pink);
}

.order-promo-title .promo-dream {
    color: var(--green);
}

.order-promo-text {
    max-width: 430px;

    margin-top: 20px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--medium);

    line-height: 1.5;
}

.order-promo-button {
    margin-top: 28px;

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

    padding: 13px 28px;

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

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

    font-family: var(--font-primary);
    font-size: var(--button-text);
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* =========================
   INFO SECTION
========================= */

.info-section {
    width: 100%;

    padding: 110px 40px 120px;

    background: var(--white);
}

.info-section-heading {
    max-width: 800px;

    margin: 0 auto 60px;

    text-align: center;
}

.info-section-heading h2 {
    margin: 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(38px, 4vw, 58px);
    font-weight: var(--black-weight);

    line-height: 1;
}

.info-grid {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

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

    gap: 30px;
}

.info-card {
    position: relative;

    width: 100%;
    min-height: 600px;

    padding: 55px 45px 45px;

    background: var(--peach);

    border: 2px solid rgba(169, 120, 95, 0.28);
    border-radius: 38px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(69, 49, 39, 0.04);
}

.info-card::before {
    content: "";

    position: absolute;

    top: -70px;
    right: -70px;

    width: 160px;
    height: 160px;

    background: var(--lightpink);

    border-radius: 50%;
}

.info-card-label {
    position: relative;

    z-index: 2;

    display: inline-flex;

    margin-bottom: 28px;
    padding: 7px 13px;

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

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

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--black-weight);

    letter-spacing: 1.5px;
}

.delivery-card,
.location-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center;
}

/* =========================
   DELIVERY CARD - DESKTOP
========================= */

@media (min-width: 701px) {
    .delivery-card {
        justify-content: center;
    }
}

.delivery-title,
.location-title {
    position: relative;

    z-index: 2;

    width: 100%;

    margin: 0 0 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: var(--black-weight);

    line-height: 1.05;

    text-align: center;

    white-space: normal;
}

.title-green {
    color: var(--green);
}

.title-pink {
    color: var(--pink);
}

.info-text {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 480px;

    margin: 0 auto 35px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--semibold);

    line-height: 1.5;

    text-align: center;
}


/* =========================
   DELIVERY APPS
========================= */

.delivery-apps {
    position: relative;
    z-index: 2;

    width: 100%;

    margin-top: 35px;
    margin-bottom: 35px;

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

    gap: 25px;
}

.delivery-apps a {
    width: 100px;
    height: 100px;

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

    background: var(--white);

    border-radius: 25px;

    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(69, 49, 39, 0.06);

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.delivery-apps img {
    width: 115%;
    height: 115%;

    display: block;

    object-fit: contain;
}

.info-button {
    position: relative;

    z-index: 2;

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

    padding: 12px 27px;

    background: transparent;
    color: var(--darkbrown);

    border: 2px solid var(--darkbrown);
    border-radius: var(--radius-full);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--black-weight);

    text-decoration: none;
}


/* =========================
   LOCATION
========================= */

.location-address {
    position: relative;

    z-index: 2;

    margin: 5px 0 30px;

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

    gap: 10px;
}

.location-address p {
    margin: 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--bold);
}

.location-pin {
    width: 30px;
    height: 30px;

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

    color: var(--pink);

    flex-shrink: 0;
}

.location-pin svg {
    width: 100%;
    height: 100%;

    display: block;

    fill: currentColor;
}

.location-map {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 330px;

    margin-top: auto;

    overflow: hidden;

    border-radius: 25px;

    box-shadow:
        0 8px 25px rgba(69, 49, 39, 0.06);
}

.location-map iframe {
    width: 100%;
    height: 100%;

    display: block;

    border: 0;
}


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

.footer {
    width: 100%;

    margin: 0;

    background: var(--lightpeach);
}

.footer-line {
    display: flex;

    width: 100%;
    height: 4px;
}

.footer-question {
    width: 100%;

    padding: 95px 20px 55px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: var(--lightpeach);

    text-align: center;
}

.footer-question-title {
    max-width: 760px;

    margin: 0 0 35px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(30px, 3vw, 46px);
    font-weight: var(--black-weight);

    line-height: 1.08;
}

.footer-form {
    width: 100%;
    max-width: 600px;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 15px;
}

.footer-input {
    width: 100%;

    padding: 16px 22px;

    background: rgba(255, 255, 255, 0.8);
    color: var(--darkbrown);

    border: 1.5px solid rgba(169, 120, 95, 0.65);
    border-radius: var(--radius-full);

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--semibold);

    outline: none;

    transition:
        border var(--transition-fast),
        box-shadow var(--transition-fast);
}

.footer-input:focus {
    border-color: var(--pink);

    box-shadow:
        0 0 0 4px rgba(215, 140, 160, 0.10);
}

.footer-submit {
    padding: 11px 30px;

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

    border: none;
    border-radius: var(--radius-full);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--black-weight);

    cursor: pointer;
}


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

.footer-bottom {
    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 75px 20px 25px;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 18px 42px;

    margin: 0 0 35px;
}

.footer-links a {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-social {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 11px;
}

.footer-social a {
    width: 36px;
    height: 36px;

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

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

    border-radius: 50%;

    font-size: 14px;

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* =========================
   HOMEPAGE HOVER
========================= */

@media (hover: hover) {

    .hero-button:hover,
    .order-promo-button:hover {
        transform: translateY(-3px);

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

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

        box-shadow:
            0 18px 40px rgba(69, 49, 39, 0.11);
    }

    .category-card:hover .category-image {
        transform: scale(1.06);
    }

    .category-card:hover .category-link span {
        transform: translateX(4px);
    }

    .slider-arrow:hover:not(:disabled) {
        background: var(--lightpink);

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

    .delivery-apps a:hover {
        transform: translateY(-6px);

        box-shadow:
            0 14px 30px rgba(69, 49, 39, 0.12);
    }

    .info-button:hover {
        background: var(--darkbrown);
        color: var(--white);
    }

    .footer-links a:hover {
        color: var(--pink);

        transform: translateY(-2px);
    }

    .footer-social a:hover {
        transform:
            translateY(-3px)
            scale(1.05);

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

}


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

@media (max-width: 900px) {

    .category-slider-wrapper {
        padding: 0;
    }

    .category-slider {
        width: 100%;

        padding:
            10px
            24px
            25px;

        gap: 15px;
    }

    .category-card {
        flex:
            0 0
            calc((100vw - 60px) / 2.5);

        padding: 12px 12px 17px;

        border-radius: 24px;
    }

    .slider-arrow {
        display: none;
    }

    .order-promo {
        grid-template-columns: 0.9fr 1.1fr;

        gap: 30px;

        padding: 40px 35px;
    }

}


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

@media (max-width: 700px) {


    /* HERO */

    .hero {
        height: 73vh;
        min-height: 520px;
        max-height: 720px;
    }

    .hero-image {
        object-position: center center;
    }

    .hero-content {
        padding: 30px 18px;
    }

    .hero-eyebrow {
        margin-bottom: 20px;

        padding: 7px 13px;

        font-size: 9px;
    }

    .hero-title {
        font-size: clamp(30px, 7vw, 53px);

        line-height: 1;
    }

    .hero-line {
        white-space: nowrap;
    }

    .hero-actions {
        margin-top: 30px;

        gap: 8px;
    }

    .hero-button {
        min-height: 41px;

        padding: 9px 15px;

        font-size: 10px;
    }

    .hero-scroll {
        width: 26px;
        height: 40px;

        bottom: 17px;
    }


    /* MENU */

    .menu-section {
        padding: 70px 0 75px;
    }

    .menu-title-section {
        padding: 0 20px 38px;
    }

    .home-eyebrow {
        font-size: 9px;

        letter-spacing: 1.5px;
    }

    .menu-title {
        font-size: 39px;
    }

    .menu-subtitle {
        margin-top: 15px;

        font-size: 14px;

        line-height: 1.5;
    }


    /* SLIDER */

    .category-slider {
        padding:
            5px
            18px
            25px;

        gap: 12px;
    }

    .category-card {
        flex:
            0 0
            calc((100vw - 48px) / 2.5);

        padding: 10px 10px 15px;

        border-radius: 22px;
    }

    .category-image-wrap {
        border-radius: 17px;
    }

    .category-name {
        margin-top: 15px;

        font-size: 13px;
    }

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

        font-size: 8px;
    }

    .category-link span {
        font-size: 13px;
    }


    /* ORDER */

    .order-promo {
        width: calc(100% - 36px);

        min-height: 0;

        margin-top: 65px;
        padding: 30px 20px;

        grid-template-columns: 0.85fr 1.15fr;

        gap: 16px;

        border-radius: 28px;
    }

    .order-promo-image img {
        width: 100%;
        max-width: 170px;
    }

    .order-promo-eyebrow {
        margin-bottom: 8px;

        font-size: 7px;

        letter-spacing: 1px;
    }

    .order-promo-title {
        font-size: clamp(16px, 4vw, 23px);
    }

    .order-promo-text {
        margin-top: 10px;

        font-size: 11px;

        line-height: 1.35;
    }

    .order-promo-button {
        margin-top: 15px;

        padding: 9px 14px;

        font-size: 10px;
    }


    /* INFO */

    .info-section {
        padding: 75px 18px;
    }

    .info-section-heading {
        margin-bottom: 40px;
    }

    .info-section-heading h2 {
        font-size: 35px;
    }

    .info-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }

    .info-card {
        min-height: auto;

        padding: 32px 20px 25px;

        border-radius: 28px;
    }

    .info-card-label {
        margin-bottom: 20px;
    }

    .delivery-title,
    .location-title {
        margin: 0 0 18px;

        font-size: clamp(24px, 7vw, 31px);
    }

    .info-text {
        margin-bottom: 28px;

        font-size: 14px;
    }

    .delivery-apps {
        margin: 10px 0 30px;

        gap: 13px;
    }

    .delivery-apps a {
        width: 72px;
        height: 72px;

        border-radius: 19px;
    }

    .info-button {
        padding: 10px 22px;

        font-size: 12px;
    }

    .location-address {
        margin: 4px 0 22px;
    }

    .location-address p {
        font-size: 14px;
    }

    .location-pin {
        width: 25px;
        height: 25px;
    }

    .location-map {
        height: 260px;

        border-radius: 20px;
    }


    /* FOOTER */

    .footer-question {
        padding: 70px 18px 35px;
    }

    .footer-question-title {
        margin-bottom: 27px;

        font-size: 26px;
    }

    .footer-form {
        max-width: 100%;
    }

    .footer-input {
        padding: 13px 17px;

        font-size: 13px;
    }

    .footer-submit {
        padding: 10px 25px;

        font-size: 12px;
    }

    .footer-bottom {
        padding: 60px 10px 20px;
    }

    .footer-links {
        gap: 13px 20px;

        margin-bottom: 27px;
    }

    .footer-links a {
        font-size: 12px;
    }

    .footer-social a {
        width: 32px;
        height: 32px;

        font-size: 12px;
    }

}

/* =========================================================
   ORDER PAGE
========================================================= */

.order-page {
    width: 100%;
    min-height: 100vh;

    padding: 75px 40px 110px;

    background: var(--white);
}


/* =========================
   ORDER INTRO
========================= */

.order-page-intro {
    width: 100%;
    max-width: 850px;

    margin: 0 auto 70px;

    text-align: center;
}

.order-page-eyebrow {
    display: inline-block;

    margin-bottom: 14px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.order-page-intro .products-page-title {
    margin-bottom: 22px;
}

.order-page-subtitle {
    max-width: 700px;

    margin: 0 auto 12px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(19px, 1.8vw, 26px);
    font-weight: var(--bold);

    line-height: 1.4;
}

.order-page-small {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--medium);

    opacity: 0.75;
}


/* =========================
   ORDER APPS
========================= */

.order-apps-section {
    width: 100%;
}

.order-apps-grid {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

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

    gap: 28px;
}


/* =========================
   ORDER APP CARD
========================= */

.order-app-card {
    position: relative;

    min-height: 460px;

    padding: 45px 32px 35px;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: var(--peach);

    border: 2px solid rgba(169, 120, 95, 0.28);
    border-radius: 34px;

    text-align: center;

    overflow: hidden;

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.order-app-card::before {
    content: "";

    position: absolute;

    top: -65px;
    right: -65px;

    width: 150px;
    height: 150px;

    background: var(--lightpink);

    border-radius: 50%;
}

.order-app-logo {
    position: relative;

    z-index: 2;

    width: 150px;
    height: 150px;

    margin-bottom: 28px;

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

    background: var(--white);

    border-radius: 32px;

    box-shadow:
        0 10px 28px rgba(69, 49, 39, 0.07);
}

.order-app-logo img {
    width: 118%;
    height: 118%;

    display: block;

    object-fit: contain;
}

.order-app-card h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 14px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(28px, 2.2vw, 36px);
    font-weight: var(--black-weight);
}

.order-app-card p {
    position: relative;

    z-index: 2;

    max-width: 280px;

    margin: 0 auto 30px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--medium);

    line-height: 1.5;
}

.order-app-button {
    position: relative;

    z-index: 2;

    margin-top: auto;

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

    gap: 9px;

    padding: 12px 24px;

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

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

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.order-app-button span {
    font-size: 18px;

    transition: transform var(--transition-fast);
}


/* =========================
   LOCATION CTA
========================= */

.order-location-section {
    width: 100%;

    padding-top: 90px;
}

.order-location-card {
    width: 100%;
    max-width: 950px;

    margin: 0 auto;
    padding: 55px 35px;

    background: var(--lightpink);

    border-radius: 35px;

    text-align: center;
}

.order-location-card h2 {
    margin: 0 0 15px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(34px, 3.5vw, 52px);
    font-weight: var(--black-weight);

    line-height: 1;
}

.order-location-card p {
    margin: 0 0 27px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--semibold);
}

.order-location-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 26px;

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

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

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* =========================
   ORDER HOVER
========================= */

@media (hover: hover) {

    .order-app-card:hover {
        transform: translateY(-8px);

        box-shadow:
            0 18px 45px rgba(69, 49, 39, 0.10);
    }

    .order-app-button:hover,
    .order-location-button:hover {
        transform: translateY(-3px);

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

    .order-app-button:hover span {
        transform: translateX(4px);
    }

}


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

@media (max-width: 700px) {

    .order-page {
        padding: 45px 18px 70px;
    }

    .order-page-intro {
        margin-bottom: 45px;
    }

    .order-page-subtitle {
        font-size: 18px;
    }

    .order-page-small {
        font-size: 13px;
    }

    .order-apps-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }

    .order-app-card {
        min-height: auto;

        padding: 32px 22px 28px;

        border-radius: 28px;
    }

    .order-app-logo {
        width: 115px;
        height: 115px;

        margin-bottom: 22px;

        border-radius: 25px;
    }

    .order-app-card h2 {
        font-size: 27px;
    }

    .order-app-card p {
        margin-bottom: 25px;

        font-size: 14px;
    }

    .order-app-button {
        width: 100%;

        padding: 11px 18px;
    }

    .order-location-section {
        padding-top: 55px;
    }

    .order-location-card {
        padding: 40px 22px;

        border-radius: 28px;
    }

    .order-location-card h2 {
        font-size: 32px;
    }

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

    .order-location-button {
        width: 100%;
    }

}
/* =========================================================
   TERMS & CONDITIONS PAGE
========================================================= */

.terms-page {
    width: 100%;

    padding: 75px 40px 110px;

    background: var(--white);
}


/* =========================
   TERMS HERO
========================= */

.terms-hero {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto 75px;

    text-align: center;
}

.terms-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.terms-hero h1 {
    margin: 0 0 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(40px, 5vw, 70px);
    font-weight: var(--black-weight);

    line-height: 0.95;
}

.terms-hero > p {
    max-width: 700px;

    margin: 0 auto 20px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--medium);

    line-height: 1.6;
}

.terms-update {
    display: inline-flex;

    padding: 7px 14px;

    background: var(--lightpink);
    color: var(--darkbrown);

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

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--bold);
}


/* =========================
   TERMS LAYOUT
========================= */

.terms-layout {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;

    gap: 45px;
}


/* =========================
   COMPANY CARD
========================= */

.terms-company-card {
    position: sticky;

    top: 25px;

    padding: 32px 28px;

    background: var(--peach);

    border: 2px solid rgba(169, 120, 95, 0.25);
    border-radius: 30px;
}

.terms-card-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--black-weight);

    letter-spacing: 1.5px;
}

.terms-company-card > h2 {
    margin: 0 0 30px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 30px;
    font-weight: var(--black-weight);
}

.terms-company-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(169, 120, 95, 0.18);
}

.terms-company-item:last-child {
    border-bottom: none;
}

.terms-company-item > i {
    width: 20px;

    margin-top: 3px;

    color: var(--pink);

    font-size: 17px;

    text-align: center;

    flex-shrink: 0;
}

.terms-company-item div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.terms-company-item span {
    margin-bottom: 3px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--bold);

    opacity: 0.65;

    text-transform: uppercase;
}

.terms-company-item strong,
.terms-company-item a {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--bold);

    line-height: 1.45;

    text-decoration: none;

    overflow-wrap: anywhere;
}


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

.terms-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

.terms-section {
    position: relative;

    padding: 42px 45px;

    background: var(--peach);

    border-radius: 30px;

    overflow: hidden;
}

.terms-section::after {
    content: "";

    position: absolute;

    top: -75px;
    right: -75px;

    width: 145px;
    height: 145px;

    background: var(--lightpink);

    border-radius: 50%;

    opacity: 0.7;
}

.terms-number {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 9px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.terms-section h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 25px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(27px, 2.3vw, 38px);
    font-weight: var(--black-weight);

    line-height: 1.05;
}

.terms-section p {
    position: relative;

    z-index: 2;

    margin: 0 0 17px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--medium);

    line-height: 1.7;
}

.terms-section p:last-child {
    margin-bottom: 0;
}

.terms-section strong {
    font-weight: var(--black-weight);
}


/* =========================
   ALLERGEN NOTICE
========================= */

.terms-notice {
    position: relative;

    z-index: 2;

    margin-top: 27px;
    padding: 22px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    background: var(--white);

    border-left: 5px solid var(--green);
    border-radius: 18px;
}

.terms-notice i {
    margin-top: 3px;

    color: var(--green);

    font-size: 20px;

    flex-shrink: 0;
}

.terms-notice p {
    margin: 0;

    font-weight: var(--bold);
}


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

.terms-contact-box {
    position: relative;

    z-index: 2;

    margin: 28px 0;

    display: flex;
    flex-direction: column;

    gap: 10px;
}

.terms-contact-box a {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 13px 17px;

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

    border-radius: 15px;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--bold);

    text-decoration: none;
}

.terms-contact-box i {
    width: 20px;

    color: var(--pink);

    text-align: center;
}


/* =========================
   TERMS FINAL CTA
========================= */

.terms-final {
    margin-top: 30px;
    padding: 60px 40px;

    background: var(--lightpink);

    border-radius: 32px;

    text-align: center;
}

.terms-final > span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.terms-final h2 {
    margin: 0 0 18px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: var(--black-weight);

    line-height: 1;
}

.terms-final p {
    max-width: 580px;

    margin: 0 auto 28px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--medium);

    line-height: 1.6;
}

.terms-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 27px;

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

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

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* =========================
   TERMS HOVER
========================= */

@media (hover: hover) {

    .terms-contact-button:hover {
        transform: translateY(-3px);

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

    .terms-company-item a:hover,
    .terms-contact-box a:hover {
        color: var(--pink);
    }

}


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

@media (max-width: 800px) {

    .terms-page {
        padding: 45px 18px 70px;
    }

    .terms-hero {
        margin-bottom: 45px;
    }

    .terms-hero h1 {
        font-size: clamp(36px, 10vw, 48px);
    }

    .terms-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .terms-company-card {
        position: static;

        padding: 27px 22px;

        border-radius: 26px;
    }

    .terms-content {
        gap: 17px;
    }

    .terms-section {
        padding: 32px 22px;

        border-radius: 26px;
    }

    .terms-section h2 {
        font-size: 27px;
    }

    .terms-section p {
        font-size: 14px;

        line-height: 1.65;
    }

    .terms-notice {
        padding: 18px 16px;
    }

    .terms-contact-box a {
        font-size: 12px;
    }

    .terms-final {
        padding: 42px 22px;

        border-radius: 27px;
    }

    .terms-contact-button {
        width: 100%;
    }

}
/* =========================================================
   PRIVACY PAGE
========================================================= */

.privacy-page {
    width: 100%;

    padding: 75px 40px 110px;

    background: var(--white);
}


/* =========================
   PRIVACY HERO
========================= */

.privacy-hero {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto 75px;

    text-align: center;
}

.privacy-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--green);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.privacy-hero h1 {
    margin: 0 0 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(40px, 5vw, 70px);
    font-weight: var(--black-weight);

    line-height: 0.95;
}

.privacy-hero > p {
    max-width: 720px;

    margin: 0 auto 20px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--medium);

    line-height: 1.6;
}

.privacy-update {
    display: inline-flex;

    padding: 7px 14px;

    background: var(--lightpink);
    color: var(--darkbrown);

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

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--bold);
}


/* =========================
   PRIVACY LAYOUT
========================= */

.privacy-layout {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;

    gap: 45px;
}


/* =========================
   COMPANY CARD
========================= */

.privacy-company-card {
    position: sticky;

    top: 25px;

    padding: 32px 28px;

    background: var(--peach);

    border: 2px solid rgba(169, 120, 95, 0.25);
    border-radius: 30px;
}

.privacy-card-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--green);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--black-weight);

    letter-spacing: 1.5px;
}

.privacy-company-card > h2 {
    margin: 0 0 30px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 30px;
    font-weight: var(--black-weight);
}

.privacy-company-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(169, 120, 95, 0.18);
}

.privacy-company-item:last-child {
    border-bottom: none;
}

.privacy-company-item > i {
    width: 20px;

    margin-top: 3px;

    color: var(--green);

    font-size: 17px;

    text-align: center;

    flex-shrink: 0;
}

.privacy-company-item div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.privacy-company-item span {
    margin-bottom: 3px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--bold);

    opacity: 0.65;

    text-transform: uppercase;
}

.privacy-company-item strong,
.privacy-company-item a {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--bold);

    line-height: 1.45;

    text-decoration: none;

    overflow-wrap: anywhere;
}


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

.privacy-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

.privacy-section {
    position: relative;

    padding: 42px 45px;

    background: var(--peach);

    border-radius: 30px;

    overflow: hidden;
}

.privacy-section::after {
    content: "";

    position: absolute;

    top: -75px;
    right: -75px;

    width: 145px;
    height: 145px;

    background: var(--lightpink);

    border-radius: 50%;

    opacity: 0.7;
}

.privacy-number {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 9px;

    color: var(--green);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.privacy-section h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 25px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(27px, 2.3vw, 38px);
    font-weight: var(--black-weight);

    line-height: 1.05;
}

.privacy-section p {
    position: relative;

    z-index: 2;

    margin: 0 0 17px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--medium);

    line-height: 1.7;
}

.privacy-section p:last-child {
    margin-bottom: 0;
}

.privacy-section strong {
    font-weight: var(--black-weight);
}


/* =========================
   LISTS
========================= */

.privacy-list {
    position: relative;

    z-index: 2;

    margin: 5px 0 23px;
    padding: 0;

    list-style: none;
}

.privacy-list li {
    position: relative;

    margin-bottom: 9px;
    padding-left: 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: var(--semibold);

    line-height: 1.55;
}

.privacy-list li::before {
    content: "•";

    position: absolute;

    left: 4px;
    top: 0;

    color: var(--green);

    font-size: 20px;
    font-weight: var(--black-weight);
}


/* =========================
   NOTICE
========================= */

.privacy-notice {
    position: relative;

    z-index: 2;

    margin-top: 27px;
    padding: 22px;

    display: flex;
    align-items: flex-start;

    gap: 15px;

    background: var(--white);

    border-left: 5px solid var(--green);
    border-radius: 18px;
}

.privacy-notice i {
    margin-top: 3px;

    color: var(--green);

    font-size: 20px;

    flex-shrink: 0;
}

.privacy-notice p {
    margin: 0;

    font-weight: var(--bold);
}


/* =========================
   PRIVACY RIGHTS
========================= */

.privacy-rights {
    position: relative;

    z-index: 2;

    margin: 28px 0;

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

    gap: 10px;
}

.privacy-right {
    padding: 16px;

    display: flex;
    align-items: center;

    gap: 13px;

    background: var(--white);

    border-radius: 16px;
}

.privacy-right span {
    color: var(--green);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--black-weight);
}

.privacy-right strong {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 13px;
}


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

.privacy-contact-box {
    position: relative;

    z-index: 2;

    margin: 25px 0;
}

.privacy-contact-box a {
    display: flex;
    align-items: center;

    gap: 12px;

    padding: 14px 17px;

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

    border-radius: 15px;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: var(--bold);

    text-decoration: none;
}

.privacy-contact-box i {
    color: var(--green);
}


/* =========================
   FINAL CTA
========================= */

.privacy-final {
    margin-top: 30px;
    padding: 60px 40px;

    background: var(--lightpink);

    border-radius: 32px;

    text-align: center;
}

.privacy-final > span {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--green);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.privacy-final h2 {
    margin: 0 0 18px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: var(--black-weight);

    line-height: 1;
}

.privacy-final p {
    max-width: 580px;

    margin: 0 auto 28px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--medium);

    line-height: 1.6;
}

.privacy-contact-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 27px;

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

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

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    text-decoration: none;

    transition:
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


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

@media (hover: hover) {

    .privacy-contact-button:hover {
        transform: translateY(-3px);

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

    .privacy-company-item a:hover,
    .privacy-contact-box a:hover {
        color: var(--pink);
    }

}


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

@media (max-width: 800px) {

    .privacy-page {
        padding: 45px 18px 70px;
    }

    .privacy-hero {
        margin-bottom: 45px;
    }

    .privacy-hero h1 {
        font-size: clamp(32px, 9vw, 47px);
    }

    .privacy-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .privacy-company-card {
        position: static;

        padding: 27px 22px;

        border-radius: 26px;
    }

    .privacy-content {
        gap: 17px;
    }

    .privacy-section {
        padding: 32px 22px;

        border-radius: 26px;
    }

    .privacy-section h2 {
        font-size: 27px;
    }

    .privacy-section p,
    .privacy-list li {
        font-size: 14px;
    }

    .privacy-rights {
        grid-template-columns: 1fr;
    }

    .privacy-notice {
        padding: 18px 16px;
    }

    .privacy-final {
        padding: 42px 22px;

        border-radius: 27px;
    }

    .privacy-contact-button {
        width: 100%;
    }

}
/* =========================================================
   COOKIE POLICY PAGE
========================================================= */

.cookie-policy-page {
    width: 100%;

    padding: 75px 40px 110px;

    background: var(--white);
}

.cookie-policy-hero {
    width: 100%;
    max-width: 1050px;

    margin: 0 auto 75px;

    text-align: center;
}

.cookie-policy-eyebrow {
    display: inline-block;

    margin-bottom: 15px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.cookie-policy-hero h1 {
    margin: 0 0 24px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(40px, 5vw, 70px);
    font-weight: var(--black-weight);

    line-height: 0.95;
}

.cookie-policy-hero > p {
    max-width: 720px;

    margin: 0 auto 20px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: clamp(16px, 1.4vw, 20px);
    font-weight: var(--medium);

    line-height: 1.6;
}

.cookie-policy-update {
    display: inline-flex;

    padding: 7px 14px;

    background: var(--lightpink);
    color: var(--darkbrown);

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

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--bold);
}


/* LAYOUT */

.cookie-policy-layout {
    width: 100%;
    max-width: 1400px;

    margin: 0 auto;

    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    align-items: start;

    gap: 45px;
}


/* COMPANY */

.cookie-policy-company {
    position: sticky;

    top: 25px;

    padding: 32px 28px;

    background: var(--peach);

    border: 2px solid rgba(169, 120, 95, 0.25);
    border-radius: 30px;
}

.cookie-policy-card-label {
    display: inline-block;

    margin-bottom: 12px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--black-weight);

    letter-spacing: 1.5px;
}

.cookie-policy-company > h2 {
    margin: 0 0 30px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 30px;
    font-weight: var(--black-weight);
}

.cookie-company-item {
    display: flex;
    align-items: flex-start;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid rgba(169, 120, 95, 0.18);
}

.cookie-company-item:last-child {
    border-bottom: none;
}

.cookie-company-item > i {
    width: 20px;

    margin-top: 3px;

    color: var(--pink);

    font-size: 17px;

    text-align: center;
}

.cookie-company-item div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.cookie-company-item span {
    margin-bottom: 3px;

    color: var(--darkbrown);

    font-size: 10px;
    font-weight: var(--bold);

    opacity: 0.65;

    text-transform: uppercase;
}

.cookie-company-item strong,
.cookie-company-item a {
    color: var(--darkbrown);

    font-size: 13px;
    font-weight: var(--bold);

    line-height: 1.45;

    text-decoration: none;

    overflow-wrap: anywhere;
}


/* CONTENT */

.cookie-policy-content {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 22px;
}

.cookie-policy-section {
    position: relative;

    padding: 42px 45px;

    background: var(--peach);

    border-radius: 30px;

    overflow: hidden;
}

.cookie-policy-number {
    display: block;

    margin-bottom: 9px;

    color: var(--pink);

    font-size: 11px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.cookie-policy-section h2 {
    margin: 0 0 25px;

    color: var(--darkbrown);

    font-size: clamp(27px, 2.3vw, 38px);
    font-weight: var(--black-weight);

    line-height: 1.05;
}

.cookie-policy-section p {
    margin: 0 0 17px;

    color: var(--darkbrown);

    font-size: 16px;
    font-weight: var(--medium);

    line-height: 1.7;
}

.cookie-policy-section p:last-child {
    margin-bottom: 0;
}


/* COOKIE TYPES */

.cookie-type-card {
    margin: 18px 0;
    padding: 22px;

    background: var(--white);

    border-radius: 20px;
}

.cookie-type-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 12px;
}

.cookie-type-dot {
    width: 10px;
    height: 10px;

    background: var(--darkbrown);

    border-radius: 50%;
}

.cookie-type-dot-green {
    background: var(--green);
}

.cookie-type-dot-pink {
    background: var(--pink);
}

.cookie-type-head h3 {
    margin: 0;

    color: var(--darkbrown);

    font-size: 17px;
    font-weight: var(--black-weight);
}

.cookie-type-status {
    margin-left: auto;

    padding: 5px 9px;

    background: var(--lightpink);
    color: var(--darkbrown);

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

    font-size: 8px;
    font-weight: var(--black-weight);

    letter-spacing: 0.7px;
}

.cookie-type-optional {
    color: var(--green);
}


/* NOTICE */

.cookie-policy-notice {
    margin-top: 25px;
    padding: 20px;

    display: flex;
    align-items: flex-start;

    gap: 14px;

    background: var(--white);

    border-left: 5px solid var(--green);
    border-radius: 18px;
}

.cookie-policy-notice i {
    margin-top: 4px;

    color: var(--green);

    font-size: 19px;
}

.cookie-policy-notice p {
    margin: 0;

    font-weight: var(--bold);
}


/* BUTTON */

.cookie-policy-settings-button {
    margin-top: 15px;

    padding: 12px 25px;

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

    border: none;
    border-radius: var(--radius-full);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--black-weight);

    cursor: pointer;
}


/* FINAL */

.cookie-policy-final {
    margin-top: 30px;
    padding: 60px 40px;

    background: var(--lightpink);

    border-radius: 32px;

    text-align: center;
}

.cookie-policy-final > span {
    color: var(--green);

    font-size: 10px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.cookie-policy-final h2 {
    margin: 12px 0 18px;

    color: var(--darkbrown);

    font-size: clamp(32px, 3.5vw, 48px);
    font-weight: var(--black-weight);
}

.cookie-policy-final p {
    max-width: 580px;

    margin: 0 auto 25px;

    color: var(--darkbrown);

    font-size: 16px;

    line-height: 1.6;
}


/* MOBILE */

@media (max-width: 800px) {

    .cookie-policy-page {
        padding: 45px 18px 70px;
    }

    .cookie-policy-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .cookie-policy-company {
        position: static;
    }

    .cookie-policy-section {
        padding: 32px 22px;

        border-radius: 26px;
    }

    .cookie-policy-section p {
        font-size: 14px;
    }

    .cookie-type-status {
        width: 100%;

        margin-left: 20px;

        text-align: left;
    }

    .cookie-policy-final {
        padding: 42px 22px;
    }

    .cookie-policy-settings-button {
        width: 100%;
    }

}
/* =========================================================
   SHARED SIMPLE FOOTER + COPYRIGHT
========================================================= */

.footer-simple {
    width: 100%;
    background: var(--lightpeach);
}

.footer-simple .footer-bottom {
    width: 100%;
    padding: 65px 20px 45px;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-simple .footer-links {
    margin-bottom: 30px;
}

.footer-copyright {
    width: 100%;
    padding: 14px 20px;

    background: var(--white);

    text-align: center;
}

.footer-copyright p {
    margin: 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--semibold);

    letter-spacing: 0.5px;
}

@media (max-width: 700px) {
    .footer-simple .footer-bottom {
        padding: 50px 20px 35px;
    }

    .footer-simple .footer-links {
        gap: 14px 22px;
        margin-bottom: 26px;
    }

    .footer-simple .footer-links a {
        font-size: 12px;
    }

    .footer-simple .footer-social a {
        width: 32px;
        height: 32px;

        font-size: 12px;
    }

    .footer-copyright {
        padding: 12px 15px;
    }

    .footer-copyright p {
        font-size: 9px;
    }
}
/* =========================================================
   COOKIE CONSENT
========================================================= */

.cookie-consent {
    position: relative;

    z-index: 9999;
}


/* =========================
   COOKIE BANNER
========================= */

.cookie-consent-banner {
    position: fixed;

    left: 25px;
    bottom: 25px;

    z-index: 9999;

    width: calc(100% - 50px);
    max-width: 470px;

    padding: 30px;

    background: var(--peach);

    border: 2px solid rgba(169, 120, 95, 0.35);
    border-radius: 28px;

    box-shadow:
        0 18px 50px rgba(69, 49, 39, 0.18);

    opacity: 0;
    visibility: hidden;

    transform: translateY(25px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);
}

.cookie-consent-banner.show {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

.cookie-consent-close,
.cookie-preferences-close {
    position: absolute;

    top: 15px;
    right: 17px;

    padding: 0;

    background: none;
    color: var(--darkbrown);

    border: none;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;
}

.cookie-consent-label {
    display: inline-block;

    margin-bottom: 9px;

    color: var(--pink);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: var(--black-weight);

    letter-spacing: 2px;
}

.cookie-consent-banner h2,
.cookie-preferences-card h2 {
    margin: 0 0 13px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 25px;
    font-weight: var(--black-weight);

    line-height: 1.05;
}

.cookie-consent-banner > p {
    margin: 0 0 22px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--medium);

    line-height: 1.55;
}


/* =========================
   COOKIE BUTTONS
========================= */

.cookie-consent-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 14px;
}

.cookie-button {
    min-height: 39px;

    padding: 9px 16px;

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

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--black-weight);

    cursor: pointer;
}

.cookie-accept {
    background: var(--pink);
    color: var(--white);

    border: 2px solid var(--pink);
}

.cookie-reject {
    background: var(--white);
    color: var(--darkbrown);

    border: 2px solid var(--darkbrown);
}

.cookie-settings {
    background: transparent;
    color: var(--green);

    border: 2px solid var(--green);
}

.cookie-consent-link {
    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: var(--bold);

    text-decoration: underline;
}


/* =========================
   PREFERENCES MODAL
========================= */

.cookie-preferences {
    position: fixed;

    inset: 0;

    z-index: 10000;

    padding: 20px;

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

    background: rgba(69, 49, 39, 0.40);

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast);
}

.cookie-preferences.show {
    opacity: 1;
    visibility: visible;
}

.cookie-preferences-card {
    position: relative;

    width: 100%;
    max-width: 560px;

    padding: 32px;

    background: var(--peach);

    border-radius: 28px;

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

.cookie-preference-row {
    padding: 20px 0;

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

    gap: 25px;

    border-top: 1px solid rgba(169, 120, 95, 0.20);
}

.cookie-preference-row strong {
    display: block;

    margin-bottom: 4px;

    color: var(--darkbrown);

    font-size: 15px;
    font-weight: var(--black-weight);
}

.cookie-preference-row p {
    max-width: 350px;

    margin: 0;

    color: var(--darkbrown);

    font-size: 12px;
    font-weight: var(--medium);

    line-height: 1.45;
}

.cookie-always-on {
    color: var(--green);

    font-size: 9px;
    font-weight: var(--black-weight);

    letter-spacing: 1px;
}


/* =========================
   COOKIE SWITCH
========================= */

.cookie-switch {
    position: relative;

    width: 48px;
    height: 27px;

    flex-shrink: 0;
}

.cookie-switch input {
    position: absolute;

    opacity: 0;
}

.cookie-slider {
    position: absolute;

    inset: 0;

    background: #d8d8d8;

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

    cursor: pointer;

    transition: background var(--transition-fast);
}

.cookie-slider::before {
    content: "";

    position: absolute;

    width: 21px;
    height: 21px;

    left: 3px;
    top: 3px;

    background: var(--white);

    border-radius: 50%;

    transition: transform var(--transition-fast);
}

.cookie-switch input:checked + .cookie-slider {
    background: var(--green);
}

.cookie-switch input:checked + .cookie-slider::before {
    transform: translateX(21px);
}


/* =========================
   SAVE
========================= */

.cookie-save-preferences {
    width: 100%;

    margin-top: 10px;
    padding: 12px 20px;

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

    border: none;
    border-radius: var(--radius-full);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: var(--black-weight);

    cursor: pointer;
}


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

@media (max-width: 700px) {

    .cookie-consent-banner {
        left: 12px;
        bottom: 12px;

        width: calc(100% - 24px);

        padding: 24px 20px;

        border-radius: 23px;
    }

    .cookie-consent-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .cookie-settings {
        grid-column: 1 / -1;
    }

    .cookie-button {
        width: 100%;
    }

    .cookie-preferences-card {
        padding: 27px 20px;

        border-radius: 24px;
    }

}
/* =========================
   ABOUT HERO - BACKGROUND
========================= */

.about-hero.about-hero-background {
    position: relative;

    width: 100%;
    min-height: 650px;

    display: flex;
    align-items: center;

    padding: 70px 6%;

    background-image:
        linear-gradient(
            90deg,
            rgba(40, 25, 20, 0.28) 0%,
            rgba(40, 25, 20, 0.10) 42%,
            rgba(40, 25, 20, 0) 68%
        ),
        url("assets/images/desprenoi.webp");

    background-size: cover;
    background-position: center 80%;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* TEXT */

.about-hero.about-hero-background .about-hero-content {
    position: relative;
    z-index: 2;

    width: min(520px, 48%);
    padding: 0;

    text-align: left;
}


/* ASCUNDEM VECHILE REGULI DE GRID */

.about-hero.about-hero-background {
    grid-template-columns: none;
}


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

@media (max-width: 900px) {

    .about-hero.about-hero-background {
        min-height: 600px;

        padding: 60px 40px;

        background-position: 58% center;
    }

    .about-hero.about-hero-background .about-hero-content {
        width: 55%;
    }

}


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

    .about-hero.about-hero-background {
        min-height: 520px;

        align-items: flex-end;

        padding:
            28px
            22px
            34px;

        background-position: 68% 38%;
    }

    .about-hero.about-hero-background .about-hero-content {
    width: 100%;
    transform: translateY(-170px);
}

    .about-hero.about-hero-background .about-main-title {
        font-size: clamp(42px, 12vw, 58px);

        line-height: 0.98;
    }

    .about-hero.about-hero-background .about-eyebrow {
        font-size: 11px;

        letter-spacing: 1.8px;
    }

    .about-hero.about-hero-background .about-hero-text {
        font-size: 16px;

        line-height: 1.35;
    }

}
/* =========================
   ABOUT FINAL - SINGLE COLUMN
========================= */

.about-final-text {
    width: 100%;
    max-width: 950px;

    margin: 45px auto 55px;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 17px;
    font-weight: var(--medium);

    line-height: 1.7;

    text-align: left;
}

.about-final-text p {
    margin: 0 0 22px;
}

.about-final-text p:last-child {
    margin-bottom: 0;
}

.about-final-text strong {
    font-weight: var(--black-weight);
}


/* =========================
   MISSION PRODUCTS
========================= */

.about-mission-products {
    margin: 22px 0 0;

    color: var(--darkbrown);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: var(--black-weight);

    text-align: center;
}


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

@media (max-width: 700px) {

    .about-final-text {
        margin: 32px auto 40px;

        font-size: 15px;
        line-height: 1.65;
    }

    .about-final-text p {
        margin-bottom: 20px;
    }

    .about-mission-products {
        margin-top: 18px;

        font-size: 14px;
    }

}