/* =========================
   Global
========================= */

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

body {
    font-family: 'Segoe UI',sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
}

.coffee-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.coffee-title {
    font-size: 42px;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
    color: #222;
}


/* =========================
Hero
========================= */

.coffee-hero {
    height: 100vh;
    background: url('/img/coffee-banner.jpg');
    background-position: center;
    background-size: cover;
    position: relative;
    display: flex;
    align-items: center;
}

.coffee-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.60);
}

.coffee-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 700px;
}

    .coffee-content h1 {
        font-size: 65px;
        line-height: 80px;
        margin-bottom: 25px;
        font-weight: 700;
        color: white;
    }

    .coffee-content p {
        font-size: 20px;
        margin-bottom: 35px;
    }

.coffee-buttons {
    display: flex;
    gap: 20px;
}

.coffee-btn-primary {
    background: #c79a50;
    color: white;
    padding: 16px 30px;
    border-radius: 8px;
    font-weight: 600;
    transition: .3s;
}

    .coffee-btn-primary:hover {
        background: #a87730;
    }

.coffee-btn-secondary {
    border: 2px solid white;
    padding: 16px 30px;
    border-radius: 8px;
    color: white;
}

    .coffee-btn-secondary:hover {
        background: white;
        color: #222;
    }



.feature-box {
    display: flex;
    gap: 25px;
}

.feature {
    text-align: center;
    width: 180px;
}

    .feature i {
        font-size: 35px;
        color: #c79a50;
        margin-bottom: 15px;
    }

    .feature h4 {
        margin-bottom: 10px;
    }


/* Coffee Custom List */

.coffee-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

    .coffee-list li {
        position: relative;
        padding-left: 35px;
        margin-bottom: 15px;
        font-size: 15px;
        line-height: 28px;
        color: #555;
        transition: .3s ease;
    }

        /* Custom icon */

        .coffee-list li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 2px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #c79a50;
            color: white;
            font-size: 12px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Hover */

        .coffee-list li:hover {
            padding-left: 40px;
            color: #222;
        }


/* =========================
Advantages
========================= */

.coffee-advantages {
    padding: 100px 0;
    background: #f8f8f8;
}

.coffee-grid {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.coffee-card {
    background: white;
    padding: 40px;
    flex: 1;
    min-width: 300px;
    max-width: 370px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .4s;
}

    .coffee-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 35px rgba(0,0,0,.15);
    }

.coffee-icon {
    width: 85px;
    height: 85px;
    margin: auto auto 25px;
    background: #f7eee2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .coffee-icon i {
        font-size: 35px;
        color: #c79a50;
    }

.coffee-card h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.coffee-card p {
    color: #666;
}



/* =========================
Products
========================= */

.coffee-products {
    padding: 100px 0;
}

.coffee-product-grid {
    display: grid;
    /*grid-template-columns: repeat(auto-fit,minmax(280px,1fr));*/
    /*gap: 30px;*/
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}

.coffee-product {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .3s;
}

    .coffee-product:hover {
        transform: translateY(-10px);
    }

    .coffee-product img {
        height: 250px;
        width: 100%;
        object-fit: cover;
    }

    .coffee-product h3 {
        padding: 25px 25px 10px;
    }

    .coffee-product p {
        padding: 0 25px 25px;
        color: #666;
    }



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

@media(max-width:991px) {

    .coffee-content h1 {
        font-size: 45px;
        line-height: 60px;
    }

    .coffee-title {
        font-size: 34px;
    }
}


@media(max-width:768px) {

    .coffee-hero {
        height: auto;
        padding: 120px 0;
    }

    .coffee-content h1 {
        font-size: 34px;
        line-height: 45px;
    }

    .coffee-content p {
        font-size: 16px;
    }

    .coffee-buttons {
        flex-direction: column;
    }

    .coffee-btn-primary,
    .coffee-btn-secondary {
        text-align: center;
    }

    .coffee-title {
        font-size: 28px;
    }
}




/* ========================= */

.coffee-pipeline-section {
    padding: 80px 0;
    background: #f5f5f5;
}

.pipeline-title {
    text-align: center;
    font-size: 55px;
    font-weight: 700;
    margin-bottom: 60px;
}


/* Main Grid */

.pipeline-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}


/* Card */

.pipeline-card {
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
    transition: .4s;
}

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

.step-top {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}


/* Number */

.step-number {
    width: 55px;
    height: 55px;
    min-width: 55px;
    border-radius: 50%;
    background: #1f5b2e;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
}


/* Heading */

.step-details h3 {
    font-size: 32px;
    margin-bottom: 15px;
    line-height: 1.2;
}

.step-details p {
    font-size: 16px;
    line-height: 2;
    color: #666;
}


/* Image */

.pipeline-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}


/* Tablet */

@media(max-width:1200px) {

    .pipeline-grid {
        grid-template-columns: repeat(2,1fr);
    }
}


/* Mobile */

@media(max-width:768px) {

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

    .pipeline-title {
        font-size: 35px;
    }

    .step-details h3 {
        font-size: 28px;
    }
}



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

.onion-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.onion-title {
    font-size: 42px;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}

/* HERO */

.onion-hero {
    height: 100vh;
    background: url('/img/onion-banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.onion-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,.65);*/
}

.onion-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 700px;
}

    .onion-content h1 {
        font-size: 65px;
        margin-bottom: 25px;
    }

    .onion-content p {
        font-size: 22px;
        margin-bottom: 30px;
    }

.onion-buttons {
    display: flex;
    gap: 20px;
}

.btn-primary-onion {
    background: #d34a2f;
    padding: 15px 30px;
    border-radius: 8px;
    color: white;
}

.btn-secondary-onion {
    border: 2px solid white;
    padding: 15px 30px;
    border-radius: 8px;
    color: white;
}

/* Advantages */

.onion-advantages {
    padding: 100px 0;
    background: #f8f8f8;
}

.onion-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.onion-card {
    background: white;
    padding: 35px;
    text-align: center;
    border-radius: 20px;
}

    .onion-card i {
        font-size: 40px;
        margin-bottom: 20px;
        color: #d34a2f;
    }


/* Quality */

.quality-section {
    padding: 100px 0;
}

.quality-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 30px;
}

.quality-box {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 5px 20px rgba(0,0,0,.08);
}


/* Products */

.onion-product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}

.onion-product {
    border-radius: 15px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0px 5px 20px rgba(0,0,0,.08);
}

    .onion-product img {
        height: 220px;
        width: 100%;
        object-fit: cover;
    }

    .onion-product h3,
    .onion-product p {
        padding: 20px;
    }

/* Farm */

.farm-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.farm-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}

/* CTA */

.cta-onion {
    padding: 100px;
    text-align: center;
    background: #d34a2f;
    color: white;
}

    .cta-onion a {
        display: inline-block;
        margin-top: 30px;
        padding: 15px 35px;
        background: white;
        color: #d34a2f;
        border-radius: 8px;
    }

/* Responsive */

@media(max-width:991px) {

    .onion-grid,
    .quality-grid,
    .onion-product-grid,
    .farm-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .onion-grid,
    .quality-grid,
    .onion-product-grid,
    .farm-grid {
        grid-template-columns: 1fr;
    }

    .onion-content h1 {
        font-size: 35px;
    }
}




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

.pepper-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.pepper-title {
    font-size: 42px;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}

/* HERO */

.pepper-hero {
    height: 100vh;
    background: url('/img/pepper-banner.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
}

.pepper-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,.60);*/
}

.pepper-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 700px;
}

    .pepper-content h1 {
        font-size: 65px;
        margin-bottom: 25px;
    }

    .pepper-content p {
        font-size: 22px;
        margin-bottom: 35px;
    }

.pepper-buttons {
    display: flex;
    gap: 20px;
}

.pepper-btn-primary {
    background: #2c6b2f;
    padding: 15px 30px;
    color: white;
    border-radius: 8px;
}

.pepper-btn-secondary {
    border: 2px solid white;
    padding: 15px 30px;
    color: white;
    border-radius: 8px;
}

/* Advantages */

.pepper-advantages {
    padding: 100px 0;
    background: #f8f8f8;
}

.pepper-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.pepper-card {
    padding: 35px;
    background: white;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

    .pepper-card i {
        font-size: 40px;
        color: #2c6b2f;
        margin-bottom: 20px;
    }


/* Products */

.pepper-product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}

.pepper-product {
    background: white;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

    .pepper-product img {
        width: 100%;
        height: 230px;
        object-fit: cover;
    }

    .pepper-product h3,
    .pepper-product p {
        padding: 20px;
    }


/* Processing */

.processing-section {
    padding: 100px 0;
}

.processing-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px;
}

.process-box {
    padding: 30px;
    border-radius: 20px;
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

    .process-box i {
        font-size: 35px;
        color: #2c6b2f;
        margin-bottom: 20px;
    }


/* Supply */

.supply-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
}

.supply-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 15px;
}


/* CTA */

.pepper-cta {
    padding: 100px;
    text-align: center;
    background: #2c6b2f;
    color: white;
}

    .pepper-cta a {
        display: inline-block;
        margin-top: 30px;
        padding: 15px 30px;
        background: white;
        color: #2c6b2f;
        border-radius: 8px;
    }


/* Responsive */

@media(max-width:991px) {

    .pepper-grid,
    .pepper-product-grid,
    .processing-grid,
    .supply-grid {
        grid-template-columns: repeat(2,1fr);
    }
}


@media(max-width:768px) {

    .pepper-grid,
    .pepper-product-grid,
    .processing-grid,
    .supply-grid {
        grid-template-columns: 1fr;
    }

    .pepper-content h1 {
        font-size: 35px;
    }
}




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

.cardamom-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.cardamom-title {
    font-size: 42px;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}


/* HERO */

.cardamom-hero {
    height: 100vh;
    background: url('/img/cardamom-banner.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.cardamom-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,.65);*/
}

.cardamom-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 700px;
}

    .cardamom-content h1 {
        font-size: 65px;
        margin-bottom: 25px;
    }

    .cardamom-content p {
        font-size: 22px;
        margin-bottom: 35px;
    }

.cardamom-buttons {
    display: flex;
    gap: 20px;
}

.cardamom-btn-primary {
    background: #2d7d46;
    padding: 15px 30px;
    color: #fff;
    border-radius: 8px;
}

.cardamom-btn-secondary {
    border: 2px solid white;
    padding: 15px 30px;
    color: white;
    border-radius: 8px;
}


/* Sections */

.cardamom-advantages,
.cardamom-products,
.cardamom-process,
.supply-section,
.cardamom-packaging {
    padding: 100px 0;
}

.cardamom-advantages {
    background: #f8f8f8;
}

.cardamom-grid,
.cardamom-product-grid,
.process-grid,
.supply-grid,
.packaging-grid {
    display: grid;
    gap: 30px;
}

.cardamom-grid {
    grid-template-columns: repeat(3,1fr);
}

.cardamom-product-grid {
    grid-template-columns: repeat(4,1fr);
}

.process-grid {
    grid-template-columns: repeat(4,1fr);
}

.supply-grid {
    grid-template-columns: repeat(3,1fr);
}

.packaging-grid {
    grid-template-columns: repeat(3,1fr);
}


/* Cards */

.cardamom-card,
.process-box,
.package-card {
    padding: 35px;
    background: #fff;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

    .cardamom-card i,
    .process-box i {
        font-size: 40px;
        margin-bottom: 20px;
        color: #2d7d46;
    }

.cardamom-product {
    overflow: hidden;
    background: white;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

    .cardamom-product img,
    .supply-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .cardamom-product h3,
    .cardamom-product p {
        padding: 20px;
    }


/* CTA */

.cardamom-cta {
    padding: 100px;
    text-align: center;
    background: #2d7d46;
    color: white;
}

    .cardamom-cta a {
        display: inline-block;
        margin-top: 30px;
        padding: 15px 35px;
        background: white;
        color: #2d7d46;
        border-radius: 8px;
    }


/* Responsive */

@media(max-width:991px) {

    .cardamom-grid,
    .cardamom-product-grid,
    .process-grid,
    .supply-grid,
    .packaging-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .cardamom-grid,
    .cardamom-product-grid,
    .process-grid,
    .supply-grid,
    .packaging-grid {
        grid-template-columns: 1fr;
    }

    .cardamom-content h1 {
        font-size: 38px;
    }
}







.bm-container {
    width: 90%;
    max-width: 1300px;
    margin: auto;
}

.bm-title {
    font-size: 42px;
    text-align: center;
    margin-bottom: 60px;
    font-weight: 700;
}

.bm-hero {
    height: 100vh;
    background: url('/img/building-banner.jpg');
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.bm-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    /*background: rgba(0,0,0,.65);*/
}

.bm-content {
    position: relative;
    z-index: 2;
    color: white;
    max-width: 700px;
}

    .bm-content h1 {
        font-size: 65px;
        margin-bottom: 20px;
    }

    .bm-content p {
        font-size: 22px;
        margin-bottom: 30px;
    }

.bm-buttons {
    display: flex;
    gap: 20px;
}

.bm-btn-primary {
    padding: 15px 30px;
    background: #d16d2d;
    color: white;
    border-radius: 8px;
}

.bm-btn-secondary {
    padding: 15px 30px;
    border: 2px solid white;
    color: white;
    border-radius: 8px;
}

.bm-why,
.bm-products,
.bm-specification,
.bm-supply,
.bm-industries,
.bm-faq {
    padding: 100px 0;
}

.bm-grid,
.bm-product-grid,
.bm-supply-grid,
.industry-grid {
    display: grid;
    gap: 30px;
}

.bm-grid {
    grid-template-columns: repeat(4,1fr);
}

.bm-product-grid {
    grid-template-columns: repeat(4,1fr);
}

.bm-supply-grid {
    grid-template-columns: repeat(4,1fr);
}

.industry-grid {
    grid-template-columns: repeat(3,1fr);
}

.bm-card,
.supply-box,
.faq-box {
    padding: 35px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

.bm-product {
    overflow: hidden;
    border-radius: 20px;
    background: white;
    box-shadow: 0 5px 20px rgba(0,0,0,.08);
}

    .bm-product img {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .bm-product h3,
    .bm-product p {
        padding: 20px;
    }

.bm-table {
    width: 100%;
    border-collapse: collapse;
}

    .bm-table th {
        background: #d16d2d;
        color: white;
        padding: 15px;
    }

    .bm-table td {
        padding: 15px;
        border: 1px solid #ddd;
    }

.industry-grid div {
    padding: 30px;
    text-align: center;
    background: #f5f5f5;
    border-radius: 10px;
}

.bm-cta {
    padding: 100px;
    text-align: center;
    background: #d16d2d;
    color: white;
}

    .bm-cta a {
        display: inline-block;
        margin-top: 30px;
        padding: 15px 30px;
        background: white;
        color: #d16d2d;
        border-radius: 8px;
    }

@media(max-width:991px) {

    .bm-grid,
    .bm-product-grid,
    .bm-supply-grid,
    .industry-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .bm-grid,
    .bm-product-grid,
    .bm-supply-grid,
    .industry-grid {
        grid-template-columns: 1fr;
    }

    .bm-content h1 {
        font-size: 38px;
    }
}