@media screen and (max-width: 768px){

.container{
    width: 95%;
}

/*==================
index page 
====================*/

.hero-presentation{
    min-width: 100%;
    margin:0;
    height: auto;
}

.hero-presentation h1{
    width: auto;
}

.hero-presentation .btn{
    width: 100%;
    margin: 0px;
}
    
.hero-background{
    max-height: 70vh;
}
     
.section-benefits{
    margin: 50px 0;
}

.grid-benefits{
    grid-template-columns: 1fr;
    row-gap: 20px;
}
.benefit {
    flex-direction: row;
    gap: 30px;
    text-align: left;
}

.benefit img {
    width: 80px;
    margin: auto 0;
}

.grid-production {
    grid-template-columns: 1fr;
    row-gap: 20px;
}

.grid-production .calculator,
.grid-production .palette,
.grid-production .paint {
    border-radius: 0px;
    margin: 20px  0;
}

.grid-production .square {
    padding: 50px;
    min-height: 300px;
}
      
/*==================
production page 
====================*/

.grid-page-products {
    grid-template-columns: 1fr;
    
}

.menubar {
    display:block;
}

.menubar .btn{
    margin-right: 20px;
}

.product-columns {
    grid-template-columns: 1fr;
}
.card-description{
    min-height: fit-content;
}

/*==================
palitra page 
====================*/

.grid-page-palitra{
    grid-template-columns: 1fr;
}

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

.btns-wrapper{
    display: block;
}

.btns-wrapper .btn{
    margin-right: 20px;
}

/*==================
contact page 
====================*/

.contact-info{
    grid-template-columns: 1fr;
    padding: 50px;
}

.info-right{
    text-align: left;
}

/*==================
calculator page 
====================*/

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

form{
    padding: 30px;
    border-radius: 18px 18px 0 0;
}

.surface-area{
    grid-template: 'name name name name name'
                    'height width number square del' / 3fr 3fr 1fr 0.5fr 0.5fr ;  
    row-gap: 10px;
}

.name{
    grid-area: name;
}

.result-area{
    border-radius: 0 0 18px 18px;
}

select{
    width: 100%;
}

/*==================
product page 
====================*/

.info-wrapper{
    grid-template-columns: 1fr;
}

.link-wrapper{
    flex-direction: column;
    margin-top: 10px;
}

.link-btn{
    width: 100%;
    margin-top: 0;
}


/*==================
navigation menu
====================*/

a .logo{
    width:65px;
    height:75px;
}

.nav-right{
    display: none;
}

.nav-burger{
    display: block;
}

nav{
    display:flex;
    justify-content: space-between;
}

.btn-burger{
    width: 50px;
    height: 50px;
    background-image: url(../images/icons/menu.png);
    background-size: 35px;
    background-clip:border-box;
    background-position: center;
    background-repeat: no-repeat;
    background-color: inherit;
    border: solid 1px grey;
    border-radius: 8px;
}

.content-menu{
    display: none;
    z-index:2;
}

.appear{
    display: flex;
}

.nav-bottom{
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width:100%;
    margin: 0 auto;
    border-top: 1px solid grey;
    border-bottom: 1px solid grey;
}

a {
    margin-bottom: 10px;
}
}

@media screen and (max-width: 576px){
    .hero-presentation{
        padding: 20px;
    }
    .hero-presentation h1{
        font-size: 20px;
    }
    .benefit img{
       min-width: 70px;
    }
    .footer-section{
        flex-direction: column;
        text-align: center;
    }
    .card img {
        width:50%;
    }
}