@import url(
    'https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap'
);


:root {

    --navy: #071a36;
    --navy-2: #0d2948;
    --blue: #1261a8;
    --blue-dark: #0c4f89;
    --gold: #dda928;
    --gold-light: #f5ce68;
    --cream: #f6f1e6;
    --white: #ffffff;
    --dark: #111820;
    --gray: #697580;
    --light-gray: #edf2f6;
    --border: rgba(7,26,54,0.12);

    --shadow:
        0 15px 40px rgba(7,26,54,0.07);

}


* {

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

}


html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

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

    color:
        var(--dark);

    background:
        var(--white);

    line-height:
        1.6;

    overflow-x:
        hidden;

}


img {

    display: block;
    max-width: 100%;

}


a {

    color: inherit;
    text-decoration: none;

}


button {

    font-family: inherit;

}


.container {

    width:
        min(1180px, 92%);

    margin:
        0 auto;

}


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

.header {

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    height:
        88px;

    background:
        rgba(7,26,54,0.98);

    border-bottom:
        1px solid rgba(255,255,255,0.08);

}


.nav-container {

    height:
        88px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

}


.brand {

    width:
        205px;

    height:
        84px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    flex-shrink:
        0;

}


.brand img {

    width:
        195px;

    height:
        80px;

    object-fit:
        contain;

}


.nav {

    flex:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        26px;

}


.nav > a,
.nav-dropdown-button {

    border:
        0;

    background:
        transparent;

    color:
        rgba(255,255,255,0.92);

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.nav > a:hover,
.nav-dropdown-button:hover {

    color:
        var(--gold-light);

}


.nav-dropdown {

    position:
        relative;

}


.nav-dropdown-button {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

}


.nav-dropdown-menu {

    position:
        absolute;

    top:
        calc(100% + 22px);

    left:
        50%;

    width:
        190px;

    padding:
        8px;

    background:
        var(--navy);

    border:
        1px solid rgba(255,255,255,0.12);

    border-radius:
        10px;

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

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateX(-50%)
        translateY(-8px);

    transition:
        all 0.22s ease;

}


.nav-dropdown:hover .nav-dropdown-menu {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateX(-50%)
        translateY(0);

}


.nav-dropdown-menu a {

    display:
        block;

    padding:
        11px 13px;

    color:
        rgba(255,255,255,0.9);

    border-radius:
        7px;

    font-size:
        11px;

    font-weight:
        800;

    text-transform:
        uppercase;

}


.nav-dropdown-menu a:hover {

    color:
        var(--gold-light);

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

}


.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.language-button {

    width:
        43px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--white);

    background:
        transparent;

    border:
        1px solid rgba(255,255,255,0.35);

    border-radius:
        8px;

    cursor:
        pointer;

    font-size:
        12px;

    font-weight:
        900;

}


.quote-button {

    min-height:
        40px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 18px;

    color:
        var(--navy);

    background:
        var(--gold);

    border-radius:
        8px;

    font-size:
        11px;

    font-weight:
        900;

    text-transform:
        uppercase;

}


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

.primary-button,
.secondary-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        50px;

    padding:
        0 23px;

    border-radius:
        9px;

    font-size:
        11px;

    font-weight:
        900;

    text-transform:
        uppercase;

}


.primary-button {

    color:
        var(--navy);

    background:
        var(--gold);

}


.secondary-button {

    color:
        var(--white);

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

    border:
        1px solid rgba(255,255,255,0.35);

}


.text-link {

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        900;

    text-transform:
        uppercase;

}


/* =========================================================
   GENERIC
========================================================= */

.section {

    padding:
        100px 0;

}


.section-tag {

    display:
        inline-block;

    margin-bottom:
        12px;

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.15em;

}


.light-tag {

    color:
        var(--gold-light);

}


.section-heading {

    max-width:
        820px;

    margin:
        0 auto 50px;

    text-align:
        center;

}


.section-heading h2 {

    margin-bottom:
        17px;

    color:
        var(--navy);

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

    line-height:
        1.08;

    letter-spacing:
        -0.04em;

}


.section-heading p {

    color:
        var(--gray);

    font-size:
        15px;

}


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

.hero {

    position:
        relative;

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,35,0.96),
            rgba(4,17,35,0.72),
            rgba(4,17,35,0.20)
        ),
        url("images/Mangoes.png")
        center / cover no-repeat;

}


.hero-overlay {

    position:
        absolute;

    inset:
        0;

}


.hero-content {

    position:
        relative;

    z-index:
        2;

}


.hero-text {

    max-width:
        760px;

    color:
        var(--white);

}


.eyebrow {

    display:
        inline-block;

    margin-bottom:
        20px;

    color:
        var(--gold-light);

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.16em;

}


.hero h1 {

    margin-bottom:
        25px;

    color:
        var(--white);

    font-size:
        clamp(50px,6vw,82px);

    line-height:
        1.02;

    letter-spacing:
        -0.05em;

}


.hero p {

    max-width:
        690px;

    margin-bottom:
        32px;

    color:
        rgba(255,255,255,0.82);

    font-size:
        16px;

}


.hero-buttons {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        14px;

}


/* =========================================================
   HOME INTRO
========================================================= */

.home-intro {

    background:
        var(--cream);

}


.home-intro-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        75px;

    align-items:
        center;

}


.home-intro-image img {

    width:
        100%;

    height:
        470px;

    object-fit:
        cover;

    border-radius:
        18px;

}


.home-intro-content h2 {

    margin-bottom:
        22px;

    color:
        var(--navy);

    font-size:
        clamp(38px,4vw,56px);

    line-height:
        1.05;

}


.home-intro-content p {

    margin-bottom:
        18px;

    color:
        var(--gray);

    font-size:
        15px;

}


/* =========================================================
   HOME PRODUCT CARDS
========================================================= */

.home-category-grid {

    display:
        grid;

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

    gap:
        20px;

}


.home-category-card {

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        16px;

    box-shadow:
        var(--shadow);

}


.home-category-card img {

    width:
        100%;

    height:
        210px;

    object-fit:
        contain;

    padding:
        12px;

    background:
        #f6f8fa;

}


.home-category-card div {

    padding:
        20px;

}


.home-category-card span {

    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        900;

}


.home-category-card h3 {

    margin-top:
        6px;

    color:
        var(--navy);

    font-size:
        18px;

}


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

.global-reach {

    padding:
        90px 0;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #071a36,
            #164667
        );

}


.global-reach-grid {

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        60px;

    align-items:
        center;

}


.global-reach h2 {

    max-width:
        750px;

    margin-bottom:
        22px;

    color:
        var(--white);

    font-size:
        clamp(40px,4vw,58px);

    line-height:
        1.04;

}


.global-reach p {

    max-width:
        700px;

    color:
        rgba(255,255,255,0.75);

}


.aswp-box {

    padding:
        45px;

    border-left:
        1px solid rgba(255,255,255,0.25);

}


.aswp-box strong {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--gold-light);

    font-size:
        clamp(50px,5vw,72px);

    line-height:
        1;

}


.aswp-box span {

    color:
        rgba(255,255,255,0.72);

    font-size:
        12px;

    font-weight:
        800;

}


/* =========================================================
   HOME CONTACT
========================================================= */

.home-contact {

    padding:
        90px 0;

}


.home-contact-grid {

    display:
        grid;

    grid-template-columns:
        1fr 0.8fr;

    gap:
        60px;

    align-items:
        center;

}


.home-contact h2 {

    max-width:
        700px;

    margin-bottom:
        20px;

    color:
        var(--navy);

    font-size:
        clamp(38px,4vw,56px);

    line-height:
        1.04;

}


.home-contact p {

    max-width:
        650px;

    margin-bottom:
        28px;

    color:
        var(--gray);

}


.home-contact-card {

    padding:
        40px;

    border-radius:
        20px;

    color:
        var(--white);

    background:
        var(--navy);

}


.home-contact-card span {

    color:
        var(--gold-light);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.14em;

}


.home-contact-card h3 {

    margin:
        15px 0 22px;

    color:
        var(--white);

    font-size:
        30px;

}


.home-contact-card p {

    margin:
        7px 0;

    color:
        rgba(255,255,255,0.84);

}


/* =========================================================
   PAGE HERO
========================================================= */

.page-hero {

    padding:
        90px 0;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #071a36,
            #183f5e
        );

}


.page-hero h1 {

    max-width:
        850px;

    margin-bottom:
        18px;

    color:
        var(--white);

    font-size:
        clamp(44px,5vw,72px);

    line-height:
        1.02;

    letter-spacing:
        -0.04em;

}


.page-hero p {

    max-width:
        760px;

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

    font-size:
        15px;

}


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

.about-page-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

}


.large-page-image {

    width:
        100%;

    height:
        470px;

    object-fit:
        cover;

    border-radius:
        18px;

}


.about-page h2 {

    margin-bottom:
        20px;

    color:
        var(--navy);

    font-size:
        clamp(36px,4vw,52px);

    line-height:
        1.06;

}


.about-page p {

    margin-bottom:
        16px;

    color:
        var(--gray);

    font-size:
        15px;

}


.corporate-image-section {

    padding:
        90px 0;

}


.cream-section {

    background:
        var(--cream);

}


.corporate-image-section h2 {

    margin-bottom:
        32px;

    color:
        var(--navy);

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

}


.official-image-container {

    display:
        flex;

    justify-content:
        center;

}


.official-corporate {

    width:
        min(100%,820px);

    max-height:
        650px;

    object-fit:
        contain;

    border-radius:
        16px;

    box-shadow:
        0 20px 55px rgba(7,26,54,0.10);

}


.image-es {

    display:
        none;

}


/* =========================================================
   PRODUCTS PAGE
========================================================= */

.products-page-hero {

    padding:
        80px 0;

    color:
        var(--white);

    background:
        linear-gradient(
            135deg,
            #071a36,
            #183f5e
        );

}


.products-page-hero h1 {

    max-width:
        800px;

    margin-bottom:
        15px;

    color:
        var(--white);

    font-size:
        clamp(42px,5vw,68px);

    line-height:
        1.04;

}


.products-page-hero p {

    color:
        rgba(255,255,255,0.76);

    font-size:
        15px;

}


.products-page-main {

    padding:
        85px 0 100px;

    background:
        #f7f8fa;

}


.product-category-grid {

    display:
        grid;

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

    gap:
        28px;

}


.product-category-card {

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

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

}


.product-category-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 24px 50px
        rgba(7,26,54,0.12);

}


.product-category-image {

    width:
        100%;

    height:
        255px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #f4f6f8;

}


.product-category-image img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    max-width:
        100%;

    max-height:
        255px;

    padding:
        24px;

}


.seafood-image {
    background:
        linear-gradient(135deg,#eef4f8,#dcebf5);
}


.ambrossia-image {
    background:
        linear-gradient(135deg,#edf7df,#d5ecb2);
}


.fruits-image {
    background:
        linear-gradient(135deg,#fff4d7,#f4df9c);
}


.coffee-image {
    background:
        linear-gradient(135deg,#f4e6d3,#ddc09c);
}


.rice-image {
    background:
        linear-gradient(135deg,#eef1f4,#dde4ea);
}


.oils-image {
    background:
        linear-gradient(135deg,#f8f0c8,#ead88f);
}


.flour-image {
    background:
        linear-gradient(135deg,#f4f4ef,#e8e7dd);
}


.prefried-image {
    background:
        linear-gradient(135deg,#f4ead5,#dec091);
}


.product-category-content {

    padding:
        28px 30px 32px;

}


.product-category-content > span {

    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.14em;

}


.product-category-content h2 {

    margin:
        8px 0 12px;

    color:
        var(--navy);

    font-size:
        29px;

    line-height:
        1.1;

}


.product-category-content p {

    min-height:
        48px;

    margin-bottom:
        20px;

    color:
        var(--gray);

    font-size:
        13px;

}


.product-category-content strong {

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

}


/* =========================================================
   BRANDS
========================================================= */

.brands-section {

    background:
        #f7f8fa;

}


.brands-grid {

    display:
        grid;

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

    gap:
        30px;

    max-width:
        1100px;

    margin:
        0 auto;

}


.brand-card {

    overflow:
        hidden;

    display:
        grid;

    grid-template-columns:
        46% 54%;

    min-height:
        290px;

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

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

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

}


.brand-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 24px 50px
        rgba(7,26,54,0.12);

}


.brand-card-ambrossia {

    background:
        linear-gradient(
            135deg,
            #edf7df,
            #d5ecb2
        );

}


.brand-card-goldfish {

    background:
        linear-gradient(
            135deg,
            #dceaf7,
            #a9cae7
        );

}


.brand-card-logo {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

}


.brand-card-logo img {

    display:
        block;

    width:
        100%;

    height:
        205px;

    max-width:
        240px;

    max-height:
        205px;

    object-fit:
        contain;

}


.brand-card-content {

    align-self:
        center;

    padding:
        28px;

}


.brand-card-content h2 {

    margin:
        6px 0 12px;

    color:
        var(--navy);

    font-size:
        32px;

    line-height:
        1.05;

}


.brand-card-content p {

    margin-bottom:
        18px;

    color:
        var(--gray);

    font-size:
        13px;

}


.brand-card-content strong {

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

}


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

.contact-page {

    background:
        var(--white);

}


.contact-page-grid {

    display:
        grid;

    grid-template-columns:
        1fr 0.9fr;

    gap:
        55px;

    align-items:
        start;

}


.contact-page-details {

    display:
        grid;

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

    gap:
        18px;

}


.contact-item {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    padding:
        22px;

    background:
        var(--light-gray);

    border-radius:
        12px;

}


.contact-label {

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        0.12em;

}


.contact-item a,
.contact-item > span:not(.contact-label) {

    color:
        var(--navy);

    font-size:
        13px;

    font-weight:
        600;

    word-break:
        break-word;

}


.contact-page-box {

    position:
        relative;

    min-height:
        470px;

    overflow:
        hidden;

    border-radius:
        20px;

    background:
        var(--navy);

}


.contact-seafood-image {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        0.38;

}


.contact-page-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            135deg,
            rgba(4,17,35,0.78),
            rgba(4,17,35,0.94)
        );

}


.contact-page-content {

    position:
        relative;

    z-index:
        2;

    padding:
        45px;

    color:
        var(--white);

}


.contact-page-content h2 {

    margin:
        12px 0 18px;

    color:
        var(--white);

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

    line-height:
        1.06;

}


.contact-page-content p {

    margin-bottom:
        26px;

    color:
        rgba(255,255,255,0.80);

}


/* =========================================================
   CATALOG HERO
========================================================= */

.catalog-hero {

    position:
        relative;

    min-height:
        400px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        var(--navy);

}


.catalog-hero::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        var(--catalog-background-image)
        center / cover no-repeat;

    opacity:
        0.30;

}


.catalog-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,35,0.94),
            rgba(4,17,35,0.44)
        );

}


.catalog-hero-content {

    position:
        relative;

    z-index:
        2;

}


.catalog-back {

    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        rgba(255,255,255,0.82);

    font-size:
        12px;

    font-weight:
        800;

}


.catalog-hero h1 {

    margin-bottom:
        15px;

    color:
        var(--white);

    font-size:
        clamp(42px,5vw,66px);

    line-height:
        1.03;

}


.catalog-hero-content > p {

    max-width:
        700px;

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

    font-size:
        15px;

}


/* =========================================================
   NORMAL CATALOG
========================================================= */

.catalog-main {

    background:
        #f7f8fa;

}


.catalog-normal-section {

    padding:
        75px 0 100px;

}


.catalog-grid {

    display:
        grid;

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

    gap:
        24px;

}


.catalog-card {

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        16px;

    box-shadow:
        var(--shadow);

}


.catalog-card-image {

    width:
        100%;

    height:
        245px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:
        #f5f7fa;

}


.catalog-card-image img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    max-width:
        100%;

    max-height:
        245px;

    padding:
        18px;

}


.catalog-card-content {

    padding:
        24px;

}


.catalog-card-number {

    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        900;

}


.catalog-card h3 {

    margin:
        8px 0 12px;

    color:
        var(--navy);

    font-size:
        21px;

    line-height:
        1.14;

}


.catalog-card p {

    margin-bottom:
        17px;

    color:
        var(--gray);

    font-size:
        13px;

}


.catalog-sheet {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        39px;

    padding:
        0 14px;

    color:
        var(--blue);

    border:
        1px solid rgba(18,97,168,0.30);

    border-radius:
        8px;

    font-size:
        10px;

    font-weight:
        900;

    text-transform:
        uppercase;

}


/* =========================================================
   WIDE PRODUCT CARD
   Carrasqueño image: 1804 x 872
========================================================= */

.catalog-card-wide {

    grid-column:
        1 / -1;

}

.catalog-card-image-wide {

    height:
        300px;

    padding:
        18px 28px;

}

.catalog-card-image-wide img {

    width:
        min(900px, 100%);

    height:
        auto;

    max-height:
        100%;

    object-fit:
        contain;

    padding:
        0;

}

.catalog-card-wide .catalog-card-content {

    padding:
        24px 28px 28px;

}

.catalog-card-wide .catalog-card-content p {

    max-width:
        780px;

}


/* =========================================================
   SPECIAL CATALOG SECTIONS
========================================================= */

#coffeeCocoaSelector,
#cacaoSpecial,
#cacaoGrainSpecial,
#kogiSpecial,
#ambrossiaSpecial {

    display:
        none;

}


body.coffee-page #coffeeCocoaSelector,
body.cacao-page #cacaoSpecial,
body.cacaograin-page #cacaoGrainSpecial,
body.kogi-page #kogiSpecial,
body.ambrossia-page #ambrossiaSpecial {

    display:
        block;

}


body.ambrossia-page #ambrossiaSpecial {

    display:
        grid;

}


body.coffee-page #normalCatalogSection,
body.cacao-page #normalCatalogSection,
body.cacaograin-page #normalCatalogSection,
body.kogi-page #normalCatalogSection,
body.ambrossia-page #normalCatalogSection {

    display:
        none;

}


/* =========================================================
   COFFEE + COCOA SELECTOR
========================================================= */

.coffee-cocoa-selector {

    padding:
        75px 0 100px;

}


.selector-header {

    max-width:
        760px;

    margin:
        0 auto 42px;

    text-align:
        center;

}


.selector-header h2 {

    margin-bottom:
        14px;

    color:
        var(--navy);

    font-size:
        clamp(38px,4vw,55px);

    line-height:
        1.05;

}


.selector-header p {

    color:
        var(--gray);

}


.coffee-cocoa-options {

    display:
        grid;

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

    gap:
        24px;

    max-width:
        1150px;

    margin:
        0 auto;

}


.coffee-cocoa-option {

    overflow:
        hidden;

    background:
        var(--white);

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

    border-radius:
        18px;

    box-shadow:
        var(--shadow);

}


.coffee-cocoa-option-image {

    height:
        285px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

}


.coffee-cocoa-option-image img {

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    max-height:
        285px;

    object-fit:
        contain;

    padding:
        24px;

}


.cacao-option-image {

    background:
        linear-gradient(
            135deg,
            #eee5dc,
            #d8c5b2
        );

}


.cacao-grain-option-image {

    background:
        linear-gradient(
            135deg,
            #f1eee9,
            #e1d6c8
        );

}


.coffee-option-image {

    background:
        linear-gradient(
            135deg,
            #f3e5d3,
            #dfc09a
        );

}


.coffee-cocoa-option-content {

    padding:
        24px;

}


.coffee-cocoa-option-content > span {

    color:
        var(--gold);

    font-size:
        10px;

    font-weight:
        900;

}


.coffee-cocoa-option-content h3 {

    margin:
        7px 0 10px;

    color:
        var(--navy);

    font-size:
        23px;

    line-height:
        1.1;

}


.coffee-cocoa-option-content p {

    min-height:
        55px;

    margin-bottom:
        18px;

    color:
        var(--gray);

    font-size:
        13px;

}


.coffee-cocoa-option-content strong {

    color:
        var(--blue);

    font-size:
        10px;

    font-weight:
        900;

}


/* =========================================================
   DETAIL BACK
========================================================= */

.detail-back {

    display:
        inline-block;

    margin-bottom:
        25px;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

}


/* =========================================================
   CACAO
========================================================= */

.cacao-product-detail {

    padding:
        70px 0 100px;

}


.cacao-detail-stage {

    position:
        relative;

    min-height:
        700px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    border-radius:
        24px;

    background:
        #21150f;

    isolation:
        isolate;

}


.cacao-detail-background {

    position:
        absolute;

    inset:
        0;

    z-index:
        -3;

}


.cacao-detail-background img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    opacity:
        0.24;

}


.cacao-detail-overlay {

    position:
        absolute;

    inset:
        0;

    z-index:
        -2;

    background:
        linear-gradient(
            90deg,
            rgba(28,16,10,0.90),
            rgba(28,16,10,0.45),
            rgba(28,16,10,0.72)
        );

}


.cacao-detail-product {

    width:
        55%;

    height:
        630px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        30px;

}


.cacao-detail-product img {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    max-width:
        100%;

    max-height:
        630px;

}


.cacao-detail-copy {

    width:
        45%;

    padding:
        50px;

}


.cacao-detail-copy h2 {

    margin-bottom:
        20px;

    color:
        var(--white);

    font-size:
        clamp(40px,4vw,60px);

    line-height:
        1.03;

}


.cacao-detail-copy p {

    max-width:
        520px;

    margin-bottom:
        28px;

    color:
        rgba(255,255,255,0.80);

}


/* =========================================================
   KOGI
========================================================= */

.kogi-product-detail {

    padding:
        70px 0 100px;

}


.kogi-introduction {

    position:
        relative;

    min-height:
        600px;

    overflow:
        hidden;

    border-radius:
        24px;

}


.kogi-introduction > img {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


.kogi-introduction-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(4,17,35,0.78),
            rgba(4,17,35,0.18),
            rgba(4,17,35,0.58)
        );

}


.kogi-introduction-copy {

    position:
        relative;

    z-index:
        2;

    max-width:
        560px;

    padding:
        80px 65px;

}


.kogi-introduction-copy h2 {

    margin-bottom:
        20px;

    color:
        var(--white);

    font-size:
        clamp(42px,5vw,66px);

    line-height:
        1;

}


.kogi-introduction-copy p {

    color:
        rgba(255,255,255,0.82);

}


.kogi-product-showcase {

    margin-top:
        30px;

    display:
        grid;

    grid-template-columns:
        1.1fr 0.9fr;

    gap:
        50px;

    align-items:
        center;

    padding:
        45px;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            #f7eee2,
            #ead4b7
        );

}


.kogi-product-image {

    height:
        470px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        18px;

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

}


.kogi-product-image img {

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    max-height:
        470px;

    object-fit:
        contain;

    padding:
        25px;

}


.kogi-product-copy h2 {

    margin-bottom:
        17px;

    color:
        var(--navy);

    font-size:
        clamp(40px,4vw,58px);

    line-height:
        1.04;

}


.kogi-product-copy p {

    margin-bottom:
        25px;

    color:
        var(--gray);

}


/* =========================================================
   AMBROSSIA
========================================================= */

.ambrossia-special {

    grid-template-columns:
        1fr 1fr;

    gap:
        50px;

    align-items:
        center;

    padding:
        45px;

    margin:
        70px 0;

    border-radius:
        24px;

    background:
        linear-gradient(
            135deg,
            #eef8dc,
            #d5efae
        );

}


.ambrossia-product-visual {

    height:
        500px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        18px;

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

}


.ambrossia-product-visual img {

    width:
        100%;

    height:
        100%;

    max-width:
        100%;

    max-height:
        500px;

    object-fit:
        contain;

    padding:
        20px;

}


.ambrossia-product-copy h2 {

    margin-bottom:
        18px;

    color:
        var(--navy);

    font-size:
        clamp(40px,4vw,60px);

    line-height:
        1.03;

}


.ambrossia-product-copy p {

    max-width:
        560px;

    margin-bottom:
        18px;

    color:
        var(--gray);

}


.ambrossia-lead {

    color:
        var(--navy) !important;

    font-size:
        17px;

    font-weight:
        800;

}


/* =========================================================
   CATALOG CONTACT
========================================================= */

.catalog-contact {

    margin-top:
        60px;

    padding:
        45px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

    border-radius:
        20px;

    color:
        var(--white);

    background:
        var(--navy);

}


.catalog-contact h2 {

    max-width:
        700px;

    margin-bottom:
        12px;

    color:
        var(--white);

    font-size:
        clamp(30px,4vw,46px);

    line-height:
        1.08;

}


.catalog-contact p {

    max-width:
        650px;

    color:
        rgba(255,255,255,0.73);

}


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

.footer {

    padding:
        28px 0;

    background:
        #031126;

    color:
        rgba(255,255,255,0.66);

}


.footer-content {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        30px;

}


.footer-brand img {

    width:
        180px;

    height:
        70px;

    object-fit:
        contain;

}


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

@media (max-width: 1050px) {

    .home-category-grid {

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

    }


    .catalog-grid {

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

    }


    .brands-grid {

        grid-template-columns:
            1fr;

    }

}


@media (max-width: 850px) {

    .nav {

        display:
            none;

    }


    .quote-button {

        display:
            none;

    }


    .home-intro-grid,
    .global-reach-grid,
    .home-contact-grid,
    .about-page-grid,
    .contact-page-grid,
    .kogi-product-showcase,
    .ambrossia-special {

        grid-template-columns:
            1fr;

    }


    .product-category-grid {

        grid-template-columns:
            1fr;

    }


    .coffee-cocoa-options {

        grid-template-columns:
            1fr;

    }


    .catalog-grid {

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

    }


    .brand-card {

        grid-template-columns:
            1fr;

    }


    .brand-card-logo {

        min-height:
            240px;

    }


    .brand-card-logo img {

        height:
            190px;

    }


    .cacao-detail-stage {

        flex-direction:
            column;

    }


    .cacao-detail-product,
    .cacao-detail-copy {

        width:
            100%;

    }


    .cacao-detail-product {

        height:
            500px;

    }


    .cacao-detail-copy {

        padding:
            35px;

    }


    .catalog-contact {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}


.catalog-card-wide {
    grid-column: 1 / -1;
}

.catalog-card-image-wide {
    height: 220px;
    padding: 14px;
}

.catalog-card-image-wide img {
    width: 100%;
    height: auto;
    max-height: 100%;
    padding: 0;
}

@media (max-width: 600px) {

    .header,
    .nav-container {

        height:
            76px;

    }


    .brand {

        width:
            155px;

        height:
            70px;

    }


    .brand img {

        width:
            150px;

        height:
            66px;

    }


    .hero {

        min-height:
            620px;

    }


    .hero h1 {

        font-size:
            45px;

    }


    .home-category-grid,
    .catalog-grid,
    .contact-page-details {

        grid-template-columns:
            1fr;

    }


    .home-intro-image img {

        height:
            350px;

    }


    .product-category-image {

        height:
            235px;

    }


    .product-category-image img {

        max-height:
            235px;

        padding:
            20px;

    }


    .catalog-hero {

        min-height:
            360px;

    }


    .catalog-hero h1 {

        font-size:
            42px;

    }


    .catalog-card-image {

        height:
            230px;

    }


    .catalog-card-image img {

        max-height:
            230px;

    }


    .coffee-cocoa-option-image {

        height:
            250px;

    }


    .cacao-detail-product {

        height:
            390px;

    }


    .cacao-detail-copy {

        padding:
            25px;

    }


    .kogi-introduction {

        min-height:
            470px;

    }


    .kogi-introduction-copy {

        padding:
            45px 25px;

    }


    .kogi-product-showcase {

        padding:
            22px;

    }


    .kogi-product-image {

        height:
            350px;

    }


    .ambrossia-special {

        padding:
            22px;

    }


    .ambrossia-product-visual {

        height:
            350px;

    }


    .footer-content {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

}