.heroSection {
    background-image: url(/assets/new-img/OilFlow1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 70svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.heroHeading {
    width: 70%;
    font-size: 6rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    -webkit-text-stroke: #000 1px;
    text-shadow: #000 5px 5px 5px;
    line-height: 8rem;
}

.infoBlock {
    display: flex;
    flex-direction: column;
}

.about {
    padding: 3rem 5rem;
    font-size: 1.8rem;
    line-height: 1.8;
    text-align: center;
}

.mAndV, 
.callout {
    background-color: #A37B4B;
    background-image: url(/assets/new-img/OilDrop1.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    padding: 4rem;
    column-gap: 4%;
}

.articleBlock,
.calloutBlock {
    background-color: #eee;
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.calloutBlock {
    width: 80%;
    align-items: center;
}

.articleHeading,
.calloutHeading {
    font-size: 3rem;
    color: #A37B4B;
}

.articleContent,
.calloutContent {
    font-size: 1.8rem;
    line-height: 1.8;
}

.calloutContent {
    width: 80%;
}


/* Service Section */
.serviceSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 0;
}

.sectionHeading {
    width: 100%;
    text-align: center;
    font-size: 4rem;
    border-bottom: solid 1.5rem #A37B4B;
}

.serviceRow {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 90%;
}

.serviceRowImg {
    width: 45%;
    min-height: 400px;
    max-height: 450px;
    object-fit: cover;
}

.serviceRowArticle {
    width: 45%;
    min-height: 400px;
    max-height: 650px;
    padding: 3rem;
}

.serviceArticleHeading {
    font-size: 3rem;
}

.serviceArticleContent {
    width: 90%;
    font-size: 1.6rem;
    line-height: 1.6;
}

.serviceList {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 1.6rem;
    width: 90%;
    float: left;
}

.serviceListbullet {
    padding: 0.5rem 0;
}

/* rest of website */

.productsArticle {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5rem 0;
}



.productHeading {
    width: 100%;
    text-align: center;
    font-size: 4rem;
}

.orangeBlock {
    background-color: #E88025;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.orangeInfo {
    width: 50%;
    font-size: 1.8rem;
}

.productImage {
    object-fit: contain;
}

.productList {
    font-size: 1.8rem;
    line-height: 1.8;
}

.blueBlock {
    background-color: #2B3E4E;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 6rem;
}

.systemsRow {
    width: 80%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    row-gap: 4rem;
    column-gap: 3%;
}

.systemsProductLink {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    color: #A37B4B;
    font-weight: 700;
    text-align: center;
    border: solid #A37B4B 2px;
    padding: 1rem;
    background-color: #fff;
}

.btn {
    background-color: #A37B4B;
    padding: 2rem 0.5rem;
    border-radius: 50px;    
    text-decoration: none;
}

.btnSpan {
    background-color: #000;
    padding: 1.6rem 4rem;
    border-radius: 50px;
    color: #fff;
}

.carouselBlock {
    width: 100%;
    position: relative;
    padding: 1rem;
}

.mySlides {
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    row-gap: 2rem;
    min-height: 250px;
}

.image {
    object-fit: contain;
}

/* responsive3 */
@media (max-width:1359px) {
    .systemsRow {
        width: 90%;
    }
}

/* responsive4 */
@media (max-width:1249px) {
    .image {
        width: 200px;
    }
}

/* responsive5 */
@media (max-width: 1024px) {
    .systemsProductLinkImg {
        width: 150px;
    }

    .serviceRow {
        width: 95%;
    }

    .image {
        width: 150px;
    }

    .productImage {
        width: 450px;
        object-fit: contain;
    }

    .blueBlock {
        padding: 3rem 1rem;
    }

    .blueBlockImg {
        width: 150px;
        height: 150px;
    }
}
/* responsive6 */
@media (max-width:911px) {
    .mAndV {
        flex-direction: column;
        align-items: center;
        row-gap: 2rem;
    }

    .articleBlock {
        width: 80%;
    }

    .systemsProductLink {
        width: 40%;
    }

    .serviceRow {
        flex-direction: column;
        align-items: center;
        row-gap: 0;
        column-gap: 0;
    }

    .reverse .serviceRowImg {
        display: none;
    }

    .serviceRowImg {
        display: none;
    }
    
    .serviceRowArticle {
        width: 90%;
        max-height: fit-content;
        min-height: 200px;
        padding: 2rem;
    }
}

/* responsive7 */
@media (max-width:768px) {
    .heroSection {
        height: 50svh;
    }
    
    .heroHeading {
        width: 80%;
        font-size: 4rem;
        line-height: 5rem;
    }
    
    .orangeBlock {
        flex-direction: column;
        padding: 2rem 0;
    }
    
    .orangeInfo {
        width: 90%;
        font-size: 1.8rem;
    }
    
    .productImage {
        width: 500px;
        height: 250px;
        object-fit: contain;
    }

    .blueBlock {
        flex-direction: row;
        flex-wrap: wrap-reverse;
        row-gap: 2rem;
    }
    
    .btn {
        width: 90%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1rem 0.5rem;
    }
    
    .btnSpan {
        width: 100%;
        text-align: center;
    }
}

/* responsive8 */
@media (max-width:639px) {
    .articleHeading,
    .calloutHeading {
        font-size: 2.2rem;
        padding: 0;
        margin: 0;
    }
    
    .articleContent,
    .calloutContent {
        font-size: 1.6rem;
        line-height: 1.6;
    }
    
    .sectionHeading {
        font-size: 3rem;
    }
    
    .serviceArticleHeading {
        font-size: 2rem;
    }
    
    /* rest of website */
    
    .productsArticle {
        padding: 1rem 0;
    }
    
    .productHeading {
        width: 90%;
        font-size: 2.5rem;
    }
    
    .productImage {
        width: 400px;
    }
    
    .btnSpan {
        padding: 1.6rem 2rem;
    }
}