*{
    margin: 0;
    scroll-behavior: smooth;
}
nav
{
    
    height: 4vmax;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2) ;
    position: sticky;
    top: 0%;
    background-color: white;
    z-index:  10000;
}
.left{
    
    width: 20%;
    display: flex;
    justify-content: center;

}
.left > a{
    text-decoration: none;
    color: crimson;
    font-size: 2vmax;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    

}

.mid{

    width: 60%;
    display: flex;
    justify-content:space-evenly;
    align-self: stretch;

    
    
}
.mid > a
{
    text-decoration: none;
    color: black;
    /* border: 1px solid yellow; */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}
.mid > a:hover
{
    border-bottom: 2px solid crimson;
    /* align-content: baseline; */

}

.right
{
    /* border: 2px solid salmon ; */
    width: 20%;
    display: flex;
    justify-content: center;
}
.right >img
{
    width: 2.5vmax;
    /* border: 2px solid yellow; */
}
 
.home{
    /* border: 1px solid red; */
    height: 90vh;
    background-image: linear-gradient(to right , rgb(100, 94, 167), rgb(195, 195, 225)
    );
    display: flex;
}
.container
{
    width: 100%;
    height: 100%;
    /* border: 1px solid green; */

}
#rightcontainer
{
    display: flex;

    justify-content: flex-end;
    

}
#rightcontainer >img
{
   margin-right: 7vmax;    
   filter: drop-shadow(0 0 20px black);
}

#leftcontainer {
    display : flex;
    flex-direction: column;
     padding: 2vmax; 
    box-sizing: border-box;  
    justify-content: center;
    
    
}
#leftcontainer > h1
{
    font-size: 5vmax;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    /* margin-bottom: 3vh; */

}

#leftcontainer > h2
{
    font-family: 2vmax;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-bottom: 3vh;
    
}

#leftcontainer > p
{
   
    font-family: 2vmax;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
#leftcontainer > button 
{
    width: 13vmax;
    padding: 1vmax;
    border-radius: 2vmax;
    border: none;
    background-color: crimson;
    color: white;
    font-family: Georgia, 'Times New Roman', Times, serif;
    cursor: pointer;
    margin-top: 2vmax;

}

/* ----------------------- */
#products{

     height: 100vh;
     /* border: 1px solid green; */
    
}
#products > h1{
    
    margin: 5vmax auto;
    text-align: center;

    font-size: 2.5vmax;
    border-bottom: 5px solid crimson;
    padding: 1vmax;
    width: 30vw;
    
}
.productsContainer{
    /* border: 2px solid greenyellow; */

    display:  flex;
    justify-content: center;
    flex-wrap: wrap;
    /* background-color: rgb(82, 246, 246); */
    height: 100%;
    width: 80vw;
    margin: auto;

}
.product
{

    /* border: 2px solid  crimson; */
    width: 22vmax;
    transition:  all 0.8s;
    cursor: pointer;
    height: 30vmax;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1vmax;

}
.product > img{
    width: 20vmax;
    /* height: 20vmax; */
}
.product :hover
{
    transform:translateY(-10px);
}

footer
{   
    margin-top: 30vmax;
    background-color: #393434;
    /* height: 15vmax; */
    padding: 2vmax;
    display: flex; 
    color: antiquewhite;
    


}
.leftfooter
{
 width:20% ;
 /* border: 1px solid white; */
 display:  flex;
 flex-direction: column;
 align-items: center;

}
.leftfooter > img
{
    width: 10vmax;
    margin: 1vmax;
    cursor: pointer;

}
.leftfooter > p{
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}

.midfooter
{
 width:60% ;
 /* border: 1px solid white; */
}
.rightfooter
{
 width:20% ;
 
 /* border: 1px solid white; */
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: space-between;
}
.rightfooter > a
{   
    text-decoration: none;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    
}
.rightfooter > img{
    
    width: 3vmax;
    height: 3vmax;
}
.midfooter
{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.midfooter > h2{
color: crimson;
}