*{
    font-style: 'Inter';

    margin: 0vw; padding: 0vw;
    box-sizing: border-box;
    outline: none; border: none;
    text-decoration: none;
    text-transform: none;
}



nav{
    display:flex;
    position: fixed;
    width: 100%;
    padding: 1% 5%;
    justify-content: space-between;
    align-items: center;
    background-color: black;
    z-index: 100;
}

nav img{
    width: 12vw;
}

.nav-bar{
    flex: 1;
    text-align: right;
    color: white;
    
}

#nav-active{
    background-color:gray;
}

.nav-bar ul li{
    list-style: none;
    display: inline-block;
    padding: 0.4vw 2vw;
    position: relative;
}

.nav-bar ul li a{
    color: white;
    text-decoration: none;
    font-size: 1.5vw;
}



.nav-bar ul li:hover{
    background-color: rgb(146, 146, 146);
}

.nav-bar ul li a:hover{
    color: black;
}

.landing-page{
    padding: 1% 5%;
    padding-top: 10vw;
}

.more-product img{
    width: 35vw;
    border-radius: 2vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.25));
}

.more-product{
    margin: auto;
    display: flex;
    margin-bottom: 4vw;
    font-size: 1.5vw;
}

.more-product img:hover{
    transform: scale(1.1);
    transition: 0.4s;
}

.container-3photo img:hover{
    transform: scale(1.1);
    transition: 0.4s;
}

.text-column{
    padding: 2.6vw;
    padding-top: 2vw;
    margin-left: 0.9vw;
}

.text-column h2{
    font-size: 4vw;
    background-color: #e6e6e6;
    border-radius: 1vw;
}

.text-column p{
    padding-top: 1vw;
}

.button-more{
    padding: 1vw 0;
    margin-top: 1vw; 
    filter: drop-shadow(0px 0.2vw 1vw rgba(0, 0, 0, 0.25));
 }

 .button-more a{
     background-color: black;
     color: white;
     padding: 0.5vw 2vw;
     border-radius: 2vw;
 }


 .button-more a:hover{
     background-color: grey;
     color: black;
     font-weight: bold;
     border: 0.1vw solid black;
     transform: scale(1.1);
 }

.text-column p{
    margin-top: 1vw;
}

.more-about{
    padding: 3vw;
    padding-bottom: 5vw;
    text-align: center;
    align-content: center;
    font-size: 1.5vw;
    background-color: #e6e6e6;
}

.more-about h1{
    font-size: 3vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.5));
}

.more-about p{
    padding: 0vw 8vw;
    padding-top: 0.5vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.5));
}

.container-3photo img{
    width: 22vw;
    padding-top: 1vw;
    margin: 0vw 1.5vw;
    border-radius: 2vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.25));
}

.more-contact{
    padding: 2vw;
    padding-top: 4vw;
    padding-bottom: 4vw;
    text-align: center;
    align-content: center;
    font-size: 1.5vw;
}

.more-contact h1{
    font-size: 3vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.5));
}

.more-contact p{
    padding: 0vw 8vw;
    padding-top: 0.5vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.5));
}

.banner{
    margin-top: 0vw;
}

.banner img{
    width: 100%;
    margin-top: 4.7vw;
}

.heading{
    text-align: center;
    font-size: 1.5vw;
    letter-spacing: 0.22em;
    padding-top: 1.5vw;
}

.container-category{
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding: 1vw;
}

.container-category img{
    width: 9vw;
    padding: 1vw 0.5vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.25));

}

.container-category img:hover{
    transform: scale(1.2);
}

.box{
    padding-left: 3vw;
    padding-right: 3vw;
}

.our-product{
    background-color: #F6F6F4 ;
}

.wrapper{
    text-align: left;
    font-size: 1.5vw;
    letter-spacing: 0.22em;
    padding: 1.5% 5%;
    border: 0.2vw solid black;
    background-color: #e6e6e6;
}

.category{
    padding-bottom: 5vw;
}


.container{
    display: flex;
    justify-content: center;
    align-items: center; 
}

.box-img img{
    width: 18vw;
}

.product-name{
    font-weight: 600;
    font-size: 1.2vw;
}

.description{
    font-size: 0.9vw;
}

.price{
    font-size: 0.8vw;
}
.container .card{
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 1vw;
    margin: 1.5vw;
    width: 20vw;
    box-shadow: 0.2vw 0.2vw 1vw 0.2vw rgba(0, 0, 0, 0.2);
    border-radius: 0.8vw;

}

.container .card:hover{
    background-color: gray;
    color: white;
    transform: scale(1.1);
}

.about-us{
    background-color: #e6e6e6;
    padding: 5vw;
    padding-top: 7vw;
    padding-bottom: 5vw;
    text-align: center;
    align-content: center;
    font-size: 1.5vw;
}


.about-us h1{
    font-size: 3vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.5));
    margin-bottom: 2vw;
}

.about-us p{
    padding: 0 6vw;
    padding-top: 0.5vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.5));
    text-align:center;
}

.content-about img{
    width: 35vw;
    border-radius: 2vw;
    filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.25));
}

.content-about img:hover{
    transform: scale(1.1);
}

.content-about{
    margin: auto;
    display: flex;
    padding: 4% 5%;
    font-size: 1.5vw;
}

.text-content-about{
    padding: 2.6vw;
    padding-top: 2vw;
    margin-top: 2.5vw;
    margin-left: 0vw;
    filter: drop-shadow(0vw 1vw 2vw rgba(0, 0, 0, 1));

}

.text-content-about h2{
    font-size: 3vw;
    border-radius: 1vw;
    margin-bottom: 2vw;
}

.content-contact-us{
    padding: 8vw 0;
}

.contact-us{
    text-align: center;
    background-color: black;
    color: white;
    line-height: 3.5vw;
}

.contact-us h2{
    font-size: 1.5vw;
}

.container-contact{
    width: 100%;
    padding: 0vw 32vw;
    margin: auto;
    margin-left: auto;
}

.row{
    padding: 2vw 3vw;
    padding-top: 1.5vw;
    background-color: #e6e6e6;
    filter: drop-shadow(0vw 1vw 2vw rgba(0, 0, 0, 1));

}

.input-container{
    margin-bottom: 1vw;
}
.input-container label{
    font-size: 1vw;
}

.input-container input{
    width: 100%;
    font-size: 0.8vw;
    line-height: 2vw;
    padding: 0.5vw 1vw;
    border-radius: 10vw;
}

.input-container1{
    font-size: 0.8vw;
    margin-bottom: 2vw;
}

.input-container input:focus{
    border: 0.2vw solid black;
}

.input-container textarea:focus{
    border: 0.2vw solid black;
}

.input-container textarea{
    padding: 0.5vw 1vw;
    font-size: 0.8vw;
    width: 100%;
    border-radius: 1vw ;
}

.submit{
    margin-bottom: 1vw;
}



.submit input{
    width: 100%;
    font-size: 1vw;
    font-weight: 800;
    letter-spacing: 0.1vw;
    line-height: 2vw;
    padding: 0.5vw 1vw;
    border-radius: 10vw;
    background-color: gray;
}

.submit input:hover{
    background-color: black;
    color: white;
    cursor:pointer;
}


 .footer{
     background-color: black;
     padding: 1vw;
     padding-top: 2vw;
     color: white;
     font-size: 1vw;
     align-items: center;
     text-align: center;
 }

 
 .footer img{
     width: 1.5vw;

     margin: 0vw 2vw;
 }

 .footer img:hover{
     width: 2vw;
 }

 .footer ul{
     margin-top: 0;
     padding: 0;
     list-style: none;
     font-size: 1vw;
     line-height: 3;
     margin-bottom: 0;
     text-align: center;
 }

 .footer ul li a{
    color: white;
    text-decoration: none;
}
.footer ul li{
    display: inline-block;
    padding: 1vw 6vw;
}

.footer ul li a:hover{
    background: grey;
}

.footer p{
    font-size: 0.8vw;
}