I would really like this by the end of Tuesday on U.S. Central time but a little later is acceptable. I would have preferred to keep doing this myself and work everything out but my problems are...

GREY NODES
Order ID:11599
By-Sanskar Aggarwal    
DETAILING/Product
CSS part –
    Major concern in this assignment was css in which same name class was defined at different spots and with different styling which were creating issues/bugs..
Grid has been added along with hover properties to make the website look more suitable
More work on product page (images used) for better and easier understanding of user.
All other requirements are met along with comments.
CSS code- (Style.css)
/* reset default styles */
body, header, nav, main, footer, div img {
  margin: 0;
  padding: 0;
  border: 0;
}
/*
    Media query for styles specific to screens with widths of at least 428px.
    - Set the font and background color for the html and body elements.
    - make the max-width 100% for responsive design
*/
@media only screen and (min-width: 428px) {
    html, body {
        height: auto;
        background-color: #ffffff;
        font-family: sans-serif;
        max-width: 100%;
    }
    /* set banner and nav background colors */
    header .nav-banner {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background-color: #cccccc;
        height: auto;
        max-height: 10vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .logo {
        max-height: 10vw;
    }
    .nav-banner-text-container {
        z-index: -1;
        position: absolute;
        top: 0; /* adjust this value as needed */
        width: 100%; /* adjust this value as needed */
        max-height: 10vw;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .nav-banner-text {
        font-size: 4vw; /* adjust this value as needed */
        text-align: left;
        font-family: 'Oswald', sans-serif;
        padding: 16vw;
        font-weight: bold;
        margin-bottom: 0.8vw;
    }
    .hero-banner {
        display: flex;
        justify-content: center; /* align the elements inside the container horizontally */
        align-items: center; /* align the elements inside the container vertically */
    }
    .hero-image {
        width: 100%;
        opacity: 0.9;
        height: 25vw;
    }
    .subtitle {
        position: absolute;
        font-size: 3em;
        text-align: center;
    top: 63%;
    left: 26%;
        text-shadow: 4px 4px 8px #000000;
        color: #ffffff;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
        text-shadow: 4px 4px 8px #000000;
    }
    /* set nav to be absolute and appear at the top of the page */
    nav {
        position: relative;
        justify-content: flex-end;
        top: 2.5vw;
        width: 100%;
    }
    /* set nav font and alignment */
    nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: right;
        list-style-type: none;
        margin: 0;
        text-align: right;
    }
    nav li {
        display: inline-block;
        font-size: 2.5vw;
        font-family: 'Bree Serif', serif;
        font-weight: bold;
    }
    /* set nav link styles */
    nav li a {
        z-index: 1;
        display: block;
        color: #0066cc;
        text-align: center;
        padding: 0.2vw 1vw 0.6vw 1vw;
        text-decoration: none;
        font-size:2vw;
        margin: 1.5vw 0.8vw 6vw 0.8vw;
    }
    nav li a:hover{
        text-shadow: 1px 1px rgb(156, 222, 246);
        background-color: #000000;
        border-radius: 45px;
    }
    /* set main content and main-content background color */
    main {
        background-color: #ffffff;
    }
/* Gallery Styles */
.photos {
    /* add styles for the overall layout of the gallery section */
    /* display: flex; */
    /* flex-wrap: wrap; */
    background-color: #cccccc;
    border: 2px solid black;
}
.before-after-images {
    /* add styles to control how the before-and-after images are displayed */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.5vw;
    row-gap: 0.5vw;
    /* grid-gap: 20px; */
    /* align-items: center;
    justify-content: center;
    position: relative; */
    width: 100%;
}
.before-after-images img {
    /* add styles for the before-and-after images */
    width: 30vw;
    height: 20vw;
    border: 2px solid black;
    object-fit: cover;
    margin-left: 1vw;
}
.photos p{
    font-size: 2vw;
    font-weight: bold;
    text-align: center;
}
aside.testimonials {
   ...