/* =========================================
   MOBILE ONLY — ECOWOOD HERO
========================================= */

@media (max-width: 768px){

    .luxury-hero{
        padding: 38px 0 0 !important;
        min-height: auto !important;
        overflow: hidden !important;
        background:
            radial-gradient(circle at 82% 28%, rgba(120,230,80,.16), transparent 30%),
            linear-gradient(145deg,#00361f 0%,#00532f 58%,#0a7042 100%) !important;
    }

    .hero-container{
        width: 100% !important;
        margin: 0 !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }

    .hero-text{
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-badge{
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        color: #9be96d !important;
        font-size: 11px !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
    }

    .hero-badge::after{
        content: "" !important;
        width: 42px !important;
        height: 1px !important;
        background: #89e45d !important;
    }

    .hero-text h1{
        margin: 0 !important;
        color: #ffffff !important;
        font-family: Georgia, serif !important;
        font-size: 46px !important;
        line-height: .95 !important;
        letter-spacing: -1px !important;
    }

    .hero-text h1 span{
        display: block !important;
        color: #76e04f !important;
    }

    .hero-text > p{
        margin: 22px 0 24px !important;
        color: #f0f5f1 !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .hero-features{
        width: 48% !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 11px !important;
        float: left !important;
    }

    .feature-item{
        min-height: 58px !important;
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .feature-item i{
        flex: 0 0 42px !important;
        width: 42px !important;
        height: 42px !important;
        border: 1px solid rgba(117,227,79,.35) !important;
        border-radius: 50% !important;
        background: rgba(0,73,40,.72) !important;
        color: #78ed54 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important;
    }

    .feature-item h4{
        margin: 0 0 3px !important;
        color: #ffffff !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .feature-item span{
        display: block !important;
        color: #dbe5de !important;
        font-size: 9px !important;
        line-height: 1.3 !important;
    }
}
@media (max-width: 768px){

    .hero-container{
        position:relative !important;
        padding-bottom:20px !important;
    }

    .hero-image{
        position:absolute !important;
        right:18px !important;
        bottom:145px !important;

        width:46% !important;
        margin:0 !important;

        display:flex !important;
        align-items:flex-end !important;
        justify-content:flex-end !important;
    }

    .hero-image img{
        display:block !important;
        width:100% !important;
        max-width:220px !important;
        height:auto !important;
        margin:0 !important;
        object-fit:contain !important;
        border-radius:14px !important;
    }

    .hero-buttons{
        width:100% !important;
        clear:both !important;
        margin:26px 0 20px !important;

        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    .btn-main,
    .btn-outline{
        width:100% !important;
        min-width:0 !important;
        height:48px !important;
        margin:0 !important;
        padding:0 12px !important;

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

        border-radius:30px !important;
        font-size:14px !important;
    }

    .hero-bottom{
        position:relative !important;
        z-index:2 !important;
        width:100% !important;
        clear:both !important;
        margin:0 !important;

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

        background:#003c22 !important;
    }

    .hero-bottom > div{
        min-width:0 !important;
        padding:14px 4px !important;

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

        text-align:center !important;
    }

    .hero-bottom i{
        display:block !important;
        margin:0 0 7px !important;
        color:#79e14f !important;
        font-size:18px !important;
    }

    .hero-bottom h4{
        margin:0 !important;
        color:#ffffff !important;
        font-size:9px !important;
        line-height:1.25 !important;
    }
}
@media (max-width:768px){

    .luxury-hero{
        padding-top:42px !important;
    }

    .hero-text h1{
        font-size:40px !important;
        line-height:.94 !important;
    }

    .hero-text > p{
        margin:18px 0 20px !important;
        font-size:14px !important;
        line-height:1.45 !important;
    }

    .hero-features{
        gap:7px !important;
    }

    .feature-item{
        min-height:50px !important;
    }

    .feature-item i{
        flex-basis:38px !important;
        width:38px !important;
        height:38px !important;
        font-size:15px !important;
    }

    .feature-item h4{
        font-size:12px !important;
    }

    .feature-item span{
        font-size:8px !important;
    }



.hero-buttons{
    position:relative !important;
    top:20px !important;

    margin-top:20px !important;
    margin-bottom:15px !important;
    gap:8px !important;
}

    .btn-main,
    .btn-outline{
        height:50px !important;
        font-size:20px !important;
    }

    .hero-bottom > div{
        padding:20px 9px !important;
    }

    .hero-bottom i{
        font-size:16px !important;
        margin-bottom:5px !important;
    }

    .hero-bottom h4{
        font-size:10px !important;
    }
}
@media (max-width:768px){

.hero-container{
    position:relative !important;
    min-height 720px !important;
}

.hero-image{
    position:absolute !important;
    right:15px !important;
    bottom:150px !important;
    width:42% !important;
    margin:0 !important;
}

.hero-image img{
    width:100% !important;
    height:auto !important;
    display:block !important;
}

/* =================================
   FINAL PRODUCT COLLECTION DESIGN
================================= */

.products{
    padding:42px 16px 55px !important;
    background:#ffffff !important;
}

.products .section-small-title{
    margin-bottom:8px !important;
    color:#16803f !important;
    text-align:center !important;
    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:2px !important;
}

.products > h2{
    margin:0 0 26px !important;
    color:#08713a !important;
    text-align:center !important;
    font-size:30px !important;
    line-height:1.15 !important;
}

/* Green outer container */
.product-box{
    width:100% !important;
    margin:0 auto !important;
    padding:20px !important;

    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:16px !important;

    background:#0b7038 !important;
    border-radius:18px !important;
    box-sizing:border-box !important;

    align-items:start !important;
    grid-auto-rows:auto !important;
}

/* White card */
.product-card{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    display:flex !important;
    flex-direction:column !important;

    padding:0 !important;
    margin:0 !important;

    overflow:hidden !important;
    background:#ffffff !important;
    border-radius:18px !important;
    text-decoration:none !important;
    box-sizing:border-box !important;

    box-shadow:0 6px 16px rgba(0,0,0,.13) !important;
}

/* Image */
.product-card > img{
    width:100% !important;
    height:120px !important;

    display:block !important;
    margin:0 !important;
    padding:0 !important;

    object-fit:cover !important;
    border-radius:0 !important;
}

/* Bottom white content */
.product-card .card-content{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;

    padding:8px 6px 10px !important;
    margin:0 !important;

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

    background:#ffffff !important;
    text-align:center !important;
    box-sizing:border-box !important;
}

/* Title */
.product-card .card-content h3{
    width:100% !important;
    min-height:28px !important;

    margin:0 0 6px !important;
    padding:0 !important;

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

    color:#08713a !important;
    font-size:13px !important;
    font-weight:800 !important;
    line-height:1.15 !important;
    text-transform:uppercase !important;
}

/* Arrow */
.product-card .arrow-btn{
    width:30px !important;
    height:30px !important;

    margin:0 auto !important;
    padding:0 !important;

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

    border-radius:50% !important;
    background:#08713a !important;
    color:#ffffff !important;
    flex:none !important;
}

.product-card .arrow-btn i{
    margin:0 !important;
    padding:0 !important;
    color:#ffffff !important;
    font-size:12px !important;
}

/* Mobile */
@media (max-width:768px){

    .products{
        padding:36px 14px 48px !important;
    }

    .products > h2{
        margin-bottom:22px !important;
        font-size:28px !important;
    }

    .product-box{
        padding:14px !important;
        gap:12px !important;
        border-radius:30px !important;
    }

    .product-card{
        border-radius:16px !important;
    }

    .product-card > img{
        height:50px !important;
    }

    .product-card .card-content{
        padding:5px 5px 5px !important;
    }

    .product-card .card-content h3{
        min-height:24px !important;
        margin-bottom:5px !important;
        font-size:12px !important;
    }

    .product-card .arrow-btn{
        width:28px !important;
        height:28px !important;
    }

    .product-card .arrow-btn i{
        font-size:10px !important;
    }
}
.products{
    padding-top:25px !important;
    padding-bottom:25px !important;
}

.products h2{
    margin:5px 0 15px !important;
    line-height:1.1 !important;
}

.section-small-title{
    margin-bottom:5px !important;
}

.product-box{
    padding:12px !important;
    gap:10px !important;
}
.products{
    padding:30px 0 !important;
    margin:0 !important;
}

.products h2{
    margin:8px 0 20px !important;
}

.section-small-title{
    margin:0 0 8px !important;
}

.product-box{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding:18px !important;
.products{
    padding-top:20px !important;
    padding-bottom:20px !important;
}

.products h2{
    margin:6px 0 12px !important;
    font-size:52px;
    line-height:1.05;
}

.section-small-title{
    margin:0 0 6px !important;
    letter-spacing:4px;
}

.product-box{
    margin-top:10px !important;
}
.products{
    padding-top:20px !important;
    padding-bottom:20px !important;
    margin:0 !important;
}

.product-box{
    margin-bottom:0 !important;
}

.why-choose{
    margin-top:20px !important;
    padding-top:20px !importan;
}
/* Remove extra white space between Products and Why Us */

.products{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
}

.product-box{
    margin-bottom:0 !important;
}

.why-us{
    margin-top:0 !important;
    padding-top:15px !important;
}
/* FINAL POLISH — paste at end */

.company-stats .stats-grid .stat-box {
    min-height: 122px !important;
    border-radius: 18px !important;
    box-shadow:
        0 12px 28px rgba(24, 72, 39, 0.11),
        0 3px 8px rgba(24, 72, 39, 0.04) !important;
}

.company-stats .stat-icon {
    color: #2f8f3b !important;
}

.company-stats .stat-content h3 {
    color: #126b34 !important;
}

.company-stats .stats-heading h2 {
    font-size: 31px !important;
    letter-spacing: -1px !important;
}

@media (max-width: 650px) {
    .company-stats {
        padding-top: 34px !important;
    }

    .company-stats .stats-grid {
        gap: 13px !important;
    }

    .company-stats .stats-grid .stat-box {
        min-height: 116px !important;
        padding: 15px 10px !important;
    }

    .company-stats .stat-content h3 {
        font-size: 28px !important;
    }

    .company-stats .stat-content p {
        font-size: 11.5px !important;
    }
}