body{
    margin: 0px;
    background-color: rgb(233, 228, 228);
}
*{
    scroll-behavior: smooth;
}
nav{
    /* border-bottom: 2px solid rgba(0, 0, 0, 0.378); */
    display: flex;
    height: 3.5vmax;
    background-color: rgb(249, 246, 242);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.286);
    position: sticky;
    top: 0%;
    z-index: 10000;
}

.left{
    /* border: 2px solid gray; */
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left a{
    text-decoration: none;
    color: black;
    font-size: 2vmax;
    font-weight: 550;
    /* padding-left: 1vmax; */
}

.mid{
    /* border: 2px solid yellow; */
    width: 60%;
    display: flex;
    justify-content: space-evenly; 
    border-right: 2px solid black;   
    /* align-items: center; */
}

.mid a{
    /* border: 2px solid orange; */
    text-decoration: none;
    color: black;
    font-size: 1.4vmax;
    font-weight: 540;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mid a:hover{
    border-bottom: 2px solid black;
}

.right{
    display: flex;
    /* border: 2px solid blue; */
    width: 20%;
    justify-content: center;
    justify-content: space-evenly;
    /* align-items: center;     */
}

.right img{
    /* border-left: 2px solid black; */
    /* border-right: 2px     solid black ; */
    display: flex;
    align-items: center;
    justify-content: center; 
    cursor: pointer;
}

.home{
    /* border: 2px solid red; */
    height: 91.5vh;
    background-color: rgb(233, 228, 228);
    display: flex;
}

.container{
    /* border: 2px solid green; */
    height: 100%;
    width: 100%;
}

#rightContainer{
    /* border: 6px solid violet; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#rightContainer img{
    /* border: 2px solid yellow; */
    display: flex;
    width: 30vmax;
    height: 41vmax;
}

#leftContainer{
    /* border: 2px solid green; */
    display: flex;
    flex-direction: column;
    padding: 3vmax;
    box-sizing: border-box;
    justify-content: center;
}

#leftContainer h1{
    /* border: 2px solid green; */
    letter-spacing:  0.3vmax;
    word-spacing: 0.2vmax;
    margin-bottom: -5%;
    font-size: 5vmax;
     /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;  */
}

#leftContainer h2{
    font-size: 2.4vmax;
    letter-spacing:  0.3vmax;
    /* border: 2px solid green; */
}


#leftContainer p{
    font-size: 1.4vmax;
    /* border: 2px solid green; */
    line-height: 1.3;
    letter-spacing: 0.1vmax;
    margin-bottom: 5%;
}

#leftContainer button{
    border-radius: 1.1vmax;
    display: flex;
    width: 10vmax;
    height: 7%;
    justify-content: center;
    align-items: center;
    background-color: rgb(94, 190, 187);
    transition: all 0.4s;
    cursor: pointer;
}


#leftContainer button:hover{
    background-color: rgba(240, 248, 255, 0);
    border: 2px solid rgb(94, 190, 187);

}




/* ------------------- */


.products{
    /* display: flex; */
    /* border: 2px solid aqua; */
    background-color: rgb(233, 228, 228);
    height: 100%;
    padding-left: 3vmax;
    /* justify-content: center; */
}

.products>h1{
    /* border: 2px solid salmon; */
    text-align: center;
    margin: 3vmax auto; /* top bottom left right */
    font-size: 3vmax;
    letter-spacing: 0.4vmax;
    font-weight: 500;
    width: 20vw;
    padding: 0.5vmax;
    border-bottom: 0.1vmax solid black;
}



.productsContainer{
    display: flex;
    flex-wrap: wrap;
    background-color: rgb(233, 228, 228);
    /* height: 100%;  */
    /* width: 100%; */
    /* border: 2px solid black; */
    justify-content: center;
}

.product{
    /* border: 2px solid black; */
    box-shadow: 0 0 1vmax 0.1vmax rgba(0, 0, 0, 0.212);
    transition: all 0.3s;
    height: 28vmax;
    width: 23vmax;  
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    /* justify-content: space-between; */
    margin: 1.8vmax;


}

.product img{
    /* border: 2px solid black; */
    height: 24vmax;
    width: 20vmax;
}

.product h2{
    /* border: 2px solid black; */
    margin: 3%;
    font-size: 1.3vmax;
}

.product h4{
    margin: -1.5%;
    font-size: 0.9vmax;
}

.product:hover{
    transform: translateY(-10px);
}

/* ----------- */



footer{
    /* padding: 3vmax; */
    margin-top: 2vmax;
    height: 12%;
    background-color: rgb(40, 37, 37);
    color: aliceblue;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leftfooter{
    width: 20%;
    /* border: 2px solid wheat; */
    font-size: 1.5vmax;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.leftfooter>h5{
    
    margin: 0%;
}
.leftfooter>h4{
    margin: -1%;
}

.midfooter{
    width: 60%;
    /* border: 2px solid wheat; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5vmax;

    margin-top: -2%;

}
.rightfooter{
    width: 20%;
    /* border: 2px solid wheat; */
    display: flex;
    font-size: 1.5vmax;

    flex-direction: column;
}

.rightfooter a{

    text-decoration: none;
    color: aliceblue;
    font-size: 1.2vmax;
    line-height: 1.6;
}