@media(max-width:768px){

.nav-menu{

    position:fixed;

    top:80px;

    left:-100%;

    width:100%;

    background:#010101;

    flex-direction:column;

    text-align:center;

    padding:40px 0;

    transition:.3s;

}

.nav-menu.active{

    left:0;

}

.btn-primary{

    display:none;

}

.hamburger{

    display:block;

}

}



/* for hero */

/* Hero */

@media (max-width: 768px) {

    .hero {
        min-height: auto;
        padding: 100px 0 60px;
        display: block;
    }

    .hero-container {
        width: 90%;
        margin: 0 auto;
    }

    /* IMAGE TOP */

    .hero-image {
        position: relative;

        top: auto;
        right: auto;

        width: 100%;
        height: 330px;

        transform: none;

        margin-bottom: -15px;
    }

    .hero-image img {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: center;
    }

    /* TEXT BELOW */

    .hero-content {
        width: 100%;
        max-width: 600px;

        text-align: center;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .hero p {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-buttons {
        justify-content: center;
    }

    /* MOBILE FADE */

    .hero-fade {
        height: 500px;
        bottom: auto;

        background:
            linear-gradient(
                to bottom,
                transparent 40%,
                #010101 100%
            );
    }
}



/* for about */


/* ABOUT */

@media(max-width:768px){

.about-container{

grid-template-columns:1fr;

text-align:center;

}

.about-image img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.about-features{

grid-template-columns:1fr;

}

.feature-item{

justify-content:center;

}



/* products */


@media(max-width:768px){

.products-grid{

grid-template-columns:1fr;

}

}


/* for contact */


/* CONTACT */

@media(max-width:992px){

.contact-container{

grid-template-columns:1fr;

}

.contact-form button{

width:100%;

}

}


/* for foooter */


/* FOOTER */


@media(max-width:768px){


    

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.footer-logo img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.social-links{

justify-content:center;

}

}