```css
/* Ecofy Sustainable Solutions
   Premium Green & White Theme
*/


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


body{

    font-family: Arial, Helvetica, sans-serif;
    color:#1f2937;
    line-height:1.6;
    background:#ffffff;

}



h1,h2,h3{

    color:#14532d;

}


p{

    font-size:16px;

}



section{

    padding:80px 8%;

    text-align:center;

}





/* HEADER */


header{

    position:sticky;
    top:0;
    background:white;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);

}


.navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 8%;

}



.logo{

    display:flex;
    align-items:center;
    gap:15px;

}


.logo img{

    width:70px;
    height:70px;
    object-fit:contain;

}



.logo h2{

    margin:0;
    font-size:26px;

}



.logo p{

    font-size:12px;
    color:#4b5563;

}





.nav-links{

    display:flex;
    list-style:none;
    gap:25px;

}



.nav-links a{

    text-decoration:none;
    color:#166534;
    font-weight:600;

}



.nav-links a:hover{

    color:#22c55e;

}







/* HERO */


.hero{

    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:90vh;
    background:#f0fdf4;

}



.hero-content{

    width:50%;
    text-align:left;

}



.hero h1{

    font-size:52px;
    line-height:1.2;
    margin-bottom:25px;

}



.hero p{

    font-size:18px;
    margin-bottom:30px;

}



.hero-image{

    width:40%;

}



.hero-image img{

    width:100%;
    border-radius:20px;

}






/* BUTTONS */


.btn{

    display:inline-block;
    background:#166534;
    color:white;
    padding:14px 30px;
    border-radius:30px;
    text-decoration:none;
    margin:10px;
    font-weight:bold;

}



.btn:hover{

    background:#22c55e;

}



.outline{

    background:white;
    color:#166534;
    border:2px solid #166534;

}








/* HEADINGS */


section h2{

    font-size:38px;
    margin-bottom:15px;

}



.section-text{

    max-width:800px;
    margin:20px auto 40px;

}








/* CARDS */


.cards{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:30px;
    margin-top:40px;

}



.card{

    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:0.3s;

}



.card:hover{

    transform:translateY(-8px);

}



.card img{

    width:100%;
    height:220px;
    object-fit:cover;
    border-radius:15px;
    margin-bottom:20px;

}



.card h3{

    margin-bottom:15px;

}



.card a{

    display:inline-block;
    margin-top:15px;
    color:#166534;
    font-weight:bold;
    text-decoration:none;

}








/* GREEN SECTIONS */


.green-section{

    background:#14532d;
    color:white;

}



.green-section h2,
.green-section h3{

    color:white;

}



.green-section .card{

    color:#1f2937;

}








/* CATALOGUE */


#catalogue{

    background:#dcfce7;

}







/* CONTACT */


#contact{

    background:#f0fdf4;

}







/* FOOTER */


footer{

    background:#14532d;
    color:white;
    padding:50px 8%;
    text-align:center;

}



footer h2{

    color:white;

}



.footer-links{

    display:flex;
    justify-content:center;
    gap:80px;
    margin:30px 0;

}



.footer-links a{

    color:#bbf7d0;
    text-decoration:none;

}








/* MOBILE RESPONSIVE */


@media(max-width:900px){


.navbar{

    flex-direction:column;
    gap:20px;

}


.nav-links{

    flex-wrap:wrap;
    justify-content:center;

}



.hero{

    flex-direction:column;
    text-align:center;

}



.hero-content{

    width:100%;
    text-align:center;

}



.hero h1{

    font-size:38px;

}



.hero-image{

    width:80%;
    margin-top:30px;

}



.footer-links{

    flex-direction:column;
    gap:30px;

}


}
```
/* Footer Company Logos */

.footer-links{

    display:flex;
    justify-content:center;
    gap:60px;
    margin:40px 0;
    flex-wrap:wrap;

}


.footer-company{

    text-align:center;
    width:260px;

}


.footer-company img{

    width:120px;
    height:70px;
    object-fit:contain;
    margin-bottom:15px;

}


.footer-company h3{

    color:white;
    margin-bottom:10px;

}


.footer-company p{

    color:#d1fae5;

}


.footer-company a{

    color:#bbf7d0;
    text-decoration:none;
    font-weight:bold;

}


.footer-company a:hover{

    color:white;

}
/* =========================================
   ECOFY MOBILE DESIGN
   ========================================= */

.menu-toggle {
    display: none;
}


/* =========================================
   MOBILE - SCREENS BELOW 900px
   ========================================= */

@media (max-width: 900px) {

    /* HEADER */

    header {
        position: sticky;
        top: 0;
        width: 100%;
        z-index: 1000;
    }


    .navbar {
        position: relative;

        display: flex;
        flex-direction: row;

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

        padding: 12px 18px;
    }


    /* ECOFY BRAND */

    .logo {
        display: flex;
        align-items: center;
        gap: 9px;
    }


    .logo img {
        width: 45px;
        height: 45px;
        object-fit: contain;
    }


    .logo h2 {
        font-size: 22px;
        line-height: 1.1;
    }


    .logo p {
        font-size: 9px;
        line-height: 1.35;
    }


    /* HAMBURGER BUTTON */

    .menu-toggle {
        display: block;

        background: none;
        border: none;

        color: #14532d;

        font-size: 29px;

        cursor: pointer;

        padding: 5px;

        line-height: 1;
    }


    /* MOBILE NAVIGATION */

    .nav-links {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background: white;

        list-style: none;

        flex-direction: column;

        align-items: center;

        gap: 0;

        padding: 8px 0 15px;

        margin: 0;

        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    }


    .nav-links.active {
        display: flex;
    }


    .nav-links li {
        width: 100%;
        text-align: center;
    }


    .nav-links a {
        display: block;

        width: 100%;

        padding: 12px 20px;

        font-size: 16px;

        color: #14532d;
    }


    .nav-links a:hover {
        background: #f0fdf4;
    }


    /* HERO */

    .hero {
        min-height: auto;

        padding: 55px 20px;

        flex-direction: column;

        text-align: center;
    }


    .hero-content {
        width: 100%;

        text-align: center;
    }


    .hero h1 {
        font-size: 34px;

        line-height: 1.2;

        margin-bottom: 20px;
    }


    .hero p {
        font-size: 16px;

        line-height: 1.6;
    }


    .hero-image {
        width: 100%;

        margin-top: 30px;
    }


    .hero-image img {
        width: 100%;

        max-height: 300px;

        object-fit: cover;

        border-radius: 16px;
    }


    /* BUTTONS */

    .buttons {
        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 5px;
    }


    .btn {
        width: 90%;

        max-width: 300px;

        text-align: center;

        margin: 5px 0;
    }


    /* GENERAL SECTIONS */

    section {
        padding: 60px 20px;
    }


    section h2 {
        font-size: 30px;
    }


    .section-text {
        font-size: 15px;
    }


    /* PRODUCT CARDS */

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

        gap: 22px;

        margin-top: 30px;
    }


    .card {
        padding: 22px;

        border-radius: 16px;
    }


    .card img {
        height: 210px;
    }


    /* FOOTER */

    footer {
        padding: 55px 20px 30px;

        text-align: center;
    }


    footer h2 {
        font-size: 30px;

        margin-bottom: 10px;
    }


    footer > p {
        font-size: 15px;

        line-height: 1.6;
    }


    /* FOOTER - ONE VERTICAL ALIGNMENT */

    .footer-links {
        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

        gap: 45px;

        width: 100%;

        margin: 40px 0;
    }


    .footer-company {
        width: 100%;

        max-width: 300px;

        display: flex;

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .footer-company img {
        width: 110px;

        height: 65px;

        object-fit: contain;

        margin-bottom: 15px;
    }


    .footer-company h3 {
        font-size: 21px;

        margin: 5px 0 8px;
    }


    .footer-company p {
        font-size: 15px;

        margin-bottom: 5px;
    }


    .footer-company a {
        font-size: 15px;

        margin-top: 10px;
    }


    .copyright {
        margin-top: 35px;

        font-size: 13px;
    }

}
/* =========================================
   CATALOGUE SECTION - TEXT VISIBILITY FIX
   ========================================= */

#catalogue {
    background: #DCFCE7;
    text-align: center;
}


#catalogue h2 {
    color: #14532D;
}


#catalogue p {
    color: #1F2937;
}


#catalogue .btn {
    background: #166534;
    color: #FFFFFF;
    border: none;
}


#catalogue .btn:hover {
    background: #14532D;
}
/* =====================================
   B2B SOLUTIONS SECTION FIX
   ===================================== */

.b2b-card {
    background: #FFFFFF;
    border-radius: 20px;
    padding: 25px;
    text-align: center;
    border: 1px solid #DCFCE7;
}


.b2b-card h3 {
    color: #14532D;
    font-size: 20px;
    font-weight: 700;
}


.b2b-card p {
    color: #1F2937;
}


.b2b-card .dot,
.b2b-card .icon {
    color: #22C55E;
}


/* Hover effect */
.b2b-card:hover {
    border-color: #22C55E;
}
/* =====================================
   FORCE B2B TEXT VISIBILITY FIX
   ===================================== */

.b2b-card,
.b2b-card h3,
.b2b-card p,
.b2b-solutions h3,
.b2b-solutions p {
    opacity: 1 !important;
    visibility: visible !important;
}

 /* =====================================
    B2B CARD TEXT VISIBILITY FIX
    ===================================== */

.card h3 {
    color: #14532D !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.card p {
    color: #1F2937 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.card a {
    color: #166534 !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.b2b-card h3 {
    color: #14532D !important;
}


.b2b-card p {
    color: #1F2937 !important;
}


/* If cards use white text from parent */
.b2b-card * {
    text-shadow: none !important;
}