body {
    margin: 0;
}

* {
    scroll-behavior: smooth;
}

nav {
    height: 4vmax;
    display: flex;
    /* border: 2px solid rgb(42, 224, 124); */
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.507);
    position: sticky;
    top: 0%;
    background-color: white;
    z-index: 1000;
}


.left {
    /* border: 2px solid red; */
    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 {
    /* border: 2px solid yellow; */
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    align-self: stretch;
}

.mid>a {
    text-decoration: none;
    color: black;
    font-size: 1.4vmax;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.mid>a:hover {
    border-bottom: 2px solid crimson;
    color: crimson;
}

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

.right>img {
    width: 2.5vmax;
    cursor: pointer;
    margin: 1vmax;

}

.home {

    height: 90vh;
    /* background-image: linear-gradient(
        to right,
        rgb(124,159,192),
        rgb(184,184,223)
    ); */
    background-image: radial-gradient(rgb(230, 221, 255), rgb(184, 184, 223));
    display: flex;
}

.container {
    width: 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: 3vmax;
    box-sizing: border-box;
    justify-content: center;
}

#leftContainer>h1 {
    font-size: 5vmax;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#leftContainer>h2 {
    margin-top: -8%;
    font-size: 2vmax;
    font-family: sans-serif;
}

#leftContainer>p {
    font-size: 1.2vmax;
    margin-left: 2%;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

#leftContainer>button {
    width: 11vmax;
    padding: 0.6vmax;
    border: none;
    margin-left: 2%;
    border-radius: 2vmax;
    background-color: crimson;
    color: white;
    cursor: pointer;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

#leftContainer>button:hover {
    background-color: rgb(156, 17, 44);
}

/* products styling  */

#products>h1 {
    text-align: center;
    margin: 5vmax auto;
    font-size: 2.5vmax;
    border-bottom: 5px solid crimson;
    width: 25vw;
    padding: 1vmax;
}

.productsContainer {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    max-width: 80vw;
    
    margin: auto;
    justify-content: space-evenly;
}

/* ----------------------------------------------------------- */
.product {

    height: 30vmax;
    /* width: 22vmax; */
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1vmax;

}

.product>img {
    width: 20vmax;

}

.product>h4 {
    margin: 2%;
}

.product>h5 {
    margin: 0;
}

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

/* ========================================================== */

footer {
    /* height: 10vmax; */
    margin-top: 10vmax;
    padding: 2vmax;
    background-color: rgb(34, 33, 33);
    color: white;
    display: flex;
    align-items: center;
}

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

.leftFooter>h4 {
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.leftFooter>p {
    text-align: center;
    font-family: 'Segoe UI';
}

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

.MidFooter {
    width: 60%;

    text-align: center;
}

.MidFooter>p {
    max-width: 60%;
    margin: 1vmax auto;
}

.MidFooter>h1 {

    text-decoration: none;
    color: crimson;
    font-size: 4vmax;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.rightFooter {
    width: 20%;

    display: flex;
    flex-direction: column;
    align-items: center;

}

.rightFooter>h4 {

    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 1.4vmax;
    text-decoration: underline;
}

.rightFooter>a {
    text-decoration: none;
    color: white;
    margin: 0.5vmax;

}