/*==================================
PREMIUM MOBILE HEADER
==================================*/

@media(max-width:768px){

.menu-toggle{

    display:flex;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:var(--primary);

    border-radius:20px;

    transition:.3s;

}

.navbar{

    flex-wrap:wrap;

    min-height:80px;

}

.nav-menu{

    display:none;

    width:100%;

    flex-direction:column;

    align-items:center;

    gap:25px;

    padding:30px 0;

    margin-top:20px;

    background:#fff;

}

.nav-menu.active{

    display:flex;

}

.nav-right{

    display:none;

}

.logo img{

    width:140px;

}

}

/*==================================
HERO PREMIUM MOBILE
==================================*/

@media(max-width:768px){

.hero{

    padding:130px 0 80px;

}

.hero-wrapper{

    grid-template-columns:1fr;

    gap:50px;

    text-align:center;

}

.hero-left h1{

    font-size:42px;

}

.hero-left p{

    font-size:17px;

}

.hero-features{

    justify-content:center;

}

.hero-button{

    justify-content:center;

}

.hero-right img{

    max-width:320px;

}

}

@media(max-width:768px){

.product-card{

    padding:20px;

}

.product-card h3{

    font-size:22px;

}

}

/* === HERO BACKGROUND MOBILE UPDATE - MZY CUSTOM === */
@media(max-width:768px){
    .hero{
        min-height:auto;
        padding:135px 0 85px;
        background-image:
            linear-gradient(rgba(255,255,255,0.92), rgba(255,255,255,0.82)),
            url("../images/hero-bg-cleaning.jpg");
        background-size:cover;
        background-position:center center;
        background-repeat:no-repeat;
    }

    .hero-wrapper{
        text-align:left;
        align-items:flex-start;
    }

    .hero-right{
        display:none;
    }

    .hero-features,
    .hero-button{
        justify-content:flex-start;
    }
}