/* Colour Variables */
:root {
    --main-brand-light-blue: rgb(28, 134, 201);
    --main-brand-ultra-light-blue: rgb(50, 207, 255);
    --main-brand-deep-dark-blue: rgb(1, 36, 71);
    --main-base-grey: gray;
    --main-base-white: white;
    --font-roboto: 'Roboto', sans-serif;
}

/* Hero Landing Header */
.heroLandingHeader {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-image: url("assets/images/bg.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Hero Landing Header : Navigation Bar */
.heroLandingHeaderNavigationBar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100px;
}

.heroLandingHeaderNavigationBarContainer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    width: 80%;
}

.heroLandingHeaderNavigationBarContainerLogoContainer {
    width: 200px;
}

@media only screen and (max-width: 600px) {
    .heroLandingHeaderNavigationBarContainer {
        justify-content: center;
    }
    .heroLandingHeaderNavigationBarContainerLogoContainer {
        display: none;
    }
}

.heroLandingHeaderNavigationBarContainerLogoContainerLogoImage {
    width: 100%;
}


.heroLandingHeaderNavigationBarContainerLinksContainer {
    width: 200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.heroLandingHeaderNavigationLinkItem {
    color: var(--main-base-white);
    font-family: var(--font-roboto);
    font-weight: 300;
    transition: 0.3s;
}

.heroLandingHeaderNavigationLinkItem i {
    margin: 0px 0px 0px 10px;
}

.heroLandingHeaderNavigationLinkItem {
    text-decoration: none;
}

.heroLandingHeaderNavigationLinkItem:hover {
    transform: scale(1.1);
    color: var(--main-brand-ultra-light-blue);
    cursor: pointer;
}

.heroLandingHeaderNavigationLinkSeparator {
    width: 1px;
    height: 20px;
    background-color: var(--main-base-white);
}

.heroLandingHeaderSocialMediaLinkItem {
    text-decoration: none;
    color: var(--main-base-white);
    transition: 0.3s;
}

.heroLandingHeaderSocialMediaLinkItem:hover {
    transform: scale(1.1);
    color: var(--main-brand-ultra-light-blue);
    cursor: pointer;
}

.heroLandingHeaderHeroContainer {
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: 1.0s;
}

.heroLandingHeaderHeroContainer:hover {
    transform: scale(1.05);
}

@media only screen and (max-width: 1920px) {
    .heroLandingHeaderHeroContainer {
        width: 35%;
    }
}

@media only screen and (max-width: 1600px) {
    .heroLandingHeaderHeroContainer {
        width: 40%;
    }
}

@media only screen and (max-width: 1300px) {
    .heroLandingHeaderHeroContainer {
        width: 50%;
    }
}

@media only screen and (max-width: 800px) {
    .heroLandingHeaderHeroContainer {
        width: 60%;
    }
}

@media only screen and (max-width: 500px) {
    .heroLandingHeaderHeroContainer {
        width: 80%;
    }
}

.heroLandingHeaderHeroContainerLogoImage {
    width: 100%;
}

.heroLandingHeaderHeroContainerHeroHeading {
    margin: 30px 0px 0px 0px;
    width: 80%;
    color: var(--main-base-white);
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 35px;
    line-height: 40px;
}

.heroLandingHeaderHeroContainerHeroDescription {
    margin: 10px 0px 0px 0px;
    width: 100%;
    color: var(--main-base-white);
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 20px;
}

.heroLandingHeaderHeroContainerHeroButton {
    text-decoration: none;
    margin: 30px 0px 0px 0px;
    width: 50%;
    height: 50px;
    border: none;
    color: var(--main-base-white);
    background-color: rgb(28, 134, 201);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 20px;
    line-height: 25px;
    transition: 0.5s;
}

.heroLandingHeaderHeroContainerHeroButton:hover {
    transform: scale(1.025);
    color: var(--main-base-white);
    background-color: var(--main-brand-ultra-light-blue);
    cursor: pointer;
}

/* Integrations for Warehousing & Fulfilment */
.mainSpecialSection {
    margin: 0px 0px 100px 0px;
    width: 100%;
    padding: 50px 0px 50px 0px;
    background-color: var(--main-brand-light-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainSpecialSection .mainSpecialSectionContainer {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mainSpecialSection .mainSpecialSectionContainer .mainSpecialSectionTitle {
    width: 100%;
    color: var(--main-base-white);
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 20px;
    line-height: 40px;
}

.mainSpecialSection .mainSpecialSectionContainer .mainSpecialSectionSeparator {
    margin: 5px 0px 0px 0px;
    width: 100%;
    height: 1px;
    background-color: var(--main-base-white);
    opacity: 0.25;
}

.mainSpecialSection .mainSpecialSectionContainer .mainSpecialSectionContent {
    margin: 25px 0px 25px 0px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.mainSpecialSection .mainSpecialSectionContainer .mainSpecialSectionContent .integrationsLogoImageItem {
    margin: 25px 25px 25px 25px;
    width: 200px;
    transition: 0.3s;
}

.integrationsLogoImageItem:hover {
    transform: scale(1.1)
}

/* Main Section Styling */
.mainSection {
    width: 100%;
    padding: 50px 0px 50px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mainSectionContainer {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mainSectionTitle {
    width: 100%;
    color: var(--main-brand-light-blue);
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 20px;
    line-height: 40px;
}

.mainSectionSeparator {
    margin: 5px 0px 0px 0px;
    width: 100%;
    height: 1px;
    background-color: var(--main-base-grey);
    opacity: 0.25;
}

.mainSectionContent {
    width: 100%;
    padding: 50px 0px 50px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

/* Main Section: About Us */
.aboutUsSectionContainer {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

.aboutUsImageContainer {
    margin: 0px 25px 0px 0px;
    width: 600px;
    height: 600px;
    background-image: url("assets/images/drunagor.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media only screen and (max-width: 1450px) {
    .aboutUsImageContainer {
        display: none;
    }
}

.aboutUsTextContainer {
    margin: 0px 0px 0px 25px;
    width: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media only screen and (max-width: 1450px) {
    .aboutUsTextContainer {
        margin: 0px 0px 0px 0px;
        width: 100%;
    }
}

.aboutUsTitle {
    width: 100%;
    color: var(--main-brand-light-blue);
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 30px;
    line-height: 40px;
}

.aboutUsSectionParagraph {
    margin: 25px 0px 25px 0px;
    width: 100%;
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}

/* Main Section: Our Services Section */
.mainSectionContentServiceItemContainer {
    text-decoration: none;
    color: var(--main-brand-deep-dark-blue);
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.mainSectionContentServiceItem {
    margin: 0px 0px 50px 0px;
    padding: 0px 25px 0px 25px;
    width: 300px;
    height: 400px;
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    transition: 0.5s;
}

@media only screen and (max-width: 450px) {
    .mainSectionContentServiceItem {
        margin: 0px 0px 100px 0px;
        height: 450px;
    }
}

.mainSectionContentServiceItem:hover {
    transform: scale(1.05);
}

.ourServicesItemIconImage {
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: 20px;
}

.ourServicesItemTitle {
    margin: 30px 0px 15px 0px;
    width: 100%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 20px;
}

.ourServicesItemDescription {
    width: 100%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 100;
    font-size: 15px;
    line-height: 25px;
}

.ourServicesItemButton {
    margin: 30px 0px 0px 0px;
    padding: 10px 30px 10px 30px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--main-brand-deep-dark-blue);
    background-color: var(--main-base-white);
    color: var(--main-brand-deep-dark-blue);
    text-decoration: none;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 12px;
    line-height: 25px;
    transition: 0.5s;
    position: absolute;
    bottom: 0;
}

.ourServicesItemButton i {
    margin: 0px 0px 0px 10px;
}

.ourServicesItemButton:hover {
    transform: scale(1.025);
    border-color: var(--main-brand-light-blue);
    color: var(--main-brand-light-blue);
    cursor: pointer;
}

/* Main Section: We Distribute Section */
.weDistributeSection {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}
.weDistributeSection .weDistributeSectionImageContainer {
    width: 55%;
    height: 600px;
    background-image: URL("assets/images/runequest.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.weDistributeSection .weDistributeLogoContainer {
    width: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.weDistributeSection .weDistributeLogoContainer .logoRowContainer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.weDistributeItemLogo {
    width: 200px;
    margin: 25px 25px 25px 25px;
    transition: 0.2s
}

.weDistributeItemLogo:hover {
    transform: scale(1.1);
}

@media only screen and (max-width: 1920px) {
    .weDistributeSection .weDistributeSectionImageContainer {
        height: 600px;
    }

    .weDistributeSection .weDistributeLogoContainer {
        height: 600px;
    } 
}

@media only screen and (max-width: 1600px) {
    .weDistributeSection .weDistributeSectionImageContainer {
        height: 500px;
    }

    .weDistributeSection .weDistributeLogoContainer {
        height: 500px;
    }

    .weDistributeSection .weDistributeLogoContainer .logoRowContainer .weDistributeItemLogo {
        width: 160px;
        margin: 15px 25px 15px 25px;
    }
}

@media only screen and (max-width: 1200px) {
    .weDistributeSection .weDistributeSectionImageContainer {
        display: none;
    }

    .weDistributeSection .weDistributeLogoContainer {
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    .weDistributeSection {
        height: 600px;
    }

    .weDistributeSection .weDistributeLogoContainer .logoRowContainer .weDistributeItemLogo {
        width: 160px;
        margin: 25px 0px 25px 0px;
    }
}

@media only screen and (max-width: 500px) {
    .weDistributeSection {
        height: 800px;
    }

    .weDistributeSection .weDistributeLogoContainer .logoRowContainer .weDistributeItemLogo {
        width: 160px;
        margin: 35px 0px 35px 0px;
    }
}

/* Main Section: Recent Fulfilment Section */

.recentFulfilmentContainer {
    width: 100%;
    padding: 50px 0px 50px 0px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    transition: 0.5s;
}


.recentFulfilmentItemContainer {
    width: 330px;
    transition: 0.5s;
}

.recentFulfilmentItemContainer:hover {
    transform: scale(1.025);
}

.recentFulfilmentItemHeroImageElement {
    width: 100%;
    height: 330px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.recentFulfilmentItemHeroImageElementBorderBackground {
    width: 100%;
    height: 230px;
    border: solid;
    border-width: 1px;
    border-color: var(--main-brand-light-blue);
    box-sizing: border-box;
    position: absolute;
    bottom: 0;
}

.recentFulfilmentItemHeroImageElementImage {
    width: 90%;
    z-index: 10;
}

.recentFulfilmentItemLargeSeparator {
    width: 100%;
    height: 10px;
    background-color: var(--main-brand-light-blue);
}

.recentFulfilmentItemInfoElement {
    width: 100%;
    height: 400px;
}

.recentFulfilmentItemInfoTitle {
    width: 100%;
    margin: 25px 0px 25px 0px;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 25px;
    line-height: 25px;
    color: var(--main-brand-deep-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

.recentFulfilmentItemInfoDescription {
    width: 100%;
    margin: 0px 0px 25px 0px;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
    color: var(--main-brand-deep-dark-blue);
}

.recentFulfilmentItemThinSeparator {
    width: 100%;
    height: 1px;
    background-color: var(--main-brand-light-blue);
}

.recentFulfilmentItemKickStarterInfoContainer {
    width: 100%;
    padding: 25px 0px 25px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

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

.recentFulfilmentItemKickStarterInfoBackInfoLogoImage {
    width: 60px;
    height: 60px;
}

.recentFulfilmentItemKickStarterInfoVerticalSeparator {
    width: 1px;
    height: 60px;
    background-color: var(--main-base-grey);
}

.recentFulfilmentItemKickStarterInfoBackerInfoContainer {
    width: 70%;
}

.recentFulfilmentItemKickStarterInfoBackerInfoDescription {
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}

.recentFulfilmentItemInfoButtonContainer {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recentFulfilmentItemInfoButton {
    margin: 30px 0px 0px 0px;
    padding: 10px 30px 10px 30px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--main-brand-deep-dark-blue);
    background-color: var(--main-base-white);
    color: var(--main-brand-deep-dark-blue);
    text-decoration: none;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 12px;
    line-height: 25px;
    transition: 0.5s;
}

.recentFulfilmentItemInfoButton i {
    margin: 0px 0px 0px 10px;
}

.recentFulfilmentItemInfoButton:hover {
    transform: scale(1.025);
    border-color: var(--main-brand-light-blue);
    color: var(--main-brand-light-blue);
    cursor: pointer;
}

/* Hero Image Section */
.heroImageSection {
    width: 100%;
    height: 1000px;
    background-image: url(assets/images/reaper-dwarves-orcs.jpg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Footer Section */
.footerSection {
    width: 100%;
    padding: 50px 0px 50px 0px;
    background-color: var(--main-brand-deep-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
}

.footerContainer {
    width: 70%; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
}

.footerItem {
    width: 33%;
    height: 300px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
}

@media only screen and (max-width: 1920px) {
    .footerContainer {
        width: 80%;
    }
    .footerItem {
        width: 400px;
    }
}

@media only screen and (max-width: 1400px) {
    .footerItem {
        width: 300px;
    }
}

@media only screen and (max-width: 900px) {
    .footerContainer {
        flex-wrap: wrap;
    }
}

.footerItemTitle {
    margin: 0px 0px 25px 0px;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 20px;
    color: var(--main-brand-light-blue);
}

.footerItemDescription {
    margin: 0px 0px 25px 0px;
    width: 70%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 100;
    font-size: 15px;
    line-height: 20px;
    color: var(--main-base-white);
}

.footerSection div div a {
    margin: 0px 0px 25px 0px;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 100;
    font-size: 15px;
    line-height: 20px;
    color: var(--main-brand-light-blue);
    transition: 0.3s;
}

.footerSection div div a:hover {
    transform: scale(1.1);
    color: var(--main-brand-ultra-light-blue)
}

.footerSection div div address {
    margin: 0px 0px 25px 0px;
    text-decoration: none;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 100;
    font-size: 15px;
    line-height: 20px;
    color: var(--main-brand-light-blue);
}

.footerSection #footerCompanyDetailsSection {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.footerSection #footerCompanyDetailsSection a {
    text-decoration: none;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 10px;
    line-height: 20px;
    color: var(--main-brand-light-blue);
}

/* Sub-Page Styling */

/* Sub-Page: Navigation */
.subPageNavigationBar {
    width: 100%;
    height: 100px;
    background-color: var(--main-brand-deep-dark-blue);
    display: flex;
    justify-content: center;
    align-items: center;
}

.subPageNavigationBarContainer {
    width: 80%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.subPageNavigationBarContainerImageLogo {
    width: 200px;
}

.subPageNavigationBarContainerLinksContainer {
    width: 300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}

@media only screen and (max-width: 650px) {
    .subPageNavigationBarContainerImageLogo {
        display: none;
    }

    .subPageNavigationBarContainer {
        justify-content: center;
    }
}


.navigationLinkItem {
    text-decoration: none;
    color: var(--main-base-white);
    font-family: var(--font-roboto);
    font-weight: 300;
    transition: 0.3s;
}

.navigationLinkItem:hover {
    transform: scale(1.1);
    color: var(--main-brand-ultra-light-blue);
    cursor: pointer;
}

.navigationLinkItemIcon {
    margin: 0px 0px 0px 10px;
}

.socialMediaLinkItem {
    text-decoration: none;
    color: var(--main-base-white);
    transition: 0.3s;
}

.socialMediaLinkItem:hover {
    transform: scale(1.1);
    color: var(--main-brand-ultra-light-blue);
    cursor: pointer;
}

.navigationLinkSeparator {
    width: 1px;
    height: 20px;
    background-color: var(--main-base-white);
    opacity: 0.2;
}

/* Sub-Page: Styling */
.pageMainInformationSectionContainer {
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.pageMainIcon {
    width: 250px;
}

.pageMainTitle {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 35px;
    line-height: 40px;
    color: var(--main-base-white);
}

.pageMainDescription {
    margin: 0px 0px 25px 0px;
    width: 50%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
    color: var(--main-base-white);
}

.pageMainSecondaryTitle {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 25px;
    line-height: 40px;
}

@media only screen and (max-width: 500px) {
    .pageMainSecondaryTitle {
        text-align: center;
    }
}

/* Sub-Page: Fulfilment */
.fulfilmentMainInformationSection {
    padding: 50px 0px 50px 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: URL("assets/images/runequest-red.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fulfilmentBodySection {
    width: 100%;
    padding: 0px 0px 50px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fulfilmentBodyItemsContainer {
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

.fulfilmentItemContainer {
    width: 30%;
    height: 350px;
    padding: 25px 0px 25px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

@media only screen and (max-width: 1920px) {
    .fulfilmentBodyItemsContainer {
        flex-wrap: wrap;
    }

    .fulfilmentItemContainer {
        width: 400px;
    }
}

@media only screen and (max-width: 500px) {
    .fulfilmentBodyItemsContainer {
        width: 100%;
    }

    .fulfilmentItemDescription {
        width: 90%;
    }
}


.fulfilmentItemIcon {
    margin: 0px 0px 25px 0px;
    width: 100px;
    height: 100px;
}

.fulfilmentItemTitle {
    margin: 0px 0px 15px 0px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 15px;
    line-height: 30px;
    color: var(--main-brand-deep-dark-blue)
}

.fulfilmentItemDescription {
    margin: 0px 0px 25px 0px;
    width: 80%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}

/* Sub-Page: Warehousing */
.warehousingMainInformationSection {
    padding: 50px 0px 50px 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: URL("assets/images/stock.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Sub-Page: Distribution */
.distributionMainInformationSection {
    padding: 50px 0px 50px 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: URL("assets/images/hero_cover_shipping_containers_3840px.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.distributionBodySection {
    width: 100%;
    padding: 0px 0px 50px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.distributionBodyItemsContainer {
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

.distributionItemContainer {
    width: 30%;
    padding: 25px 0px 25px 0px;
    display: flex;
    align-items: center;
    flex-direction: column;
    
}

@media only screen and (max-width: 1920px) {
    .distributionItemContainer {
        width: 50%;
    }

    .distributionItemDescription {
        width: 100%
    }
}

@media only screen and (max-width: 700px) {
    .distributionBodyItemsContainer {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
    }

    .distributionItemContainer {
        width: 400px;
    }

    .distributionItemDescription {
        width: 100%
    }
}

.distributionItemIcon {
    margin: 0px 0px 25px 0px;
    width: 100px;
    height: 100px;
}

.distributionItemTitle {
    margin: 0px 0px 15px 0px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 15px;
    line-height: 30px;
    color: var(--main-brand-deep-dark-blue)
}


.distributionItemDescription {
    margin: 0px 0px 25px 0px;
    width: 80%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}

/* Sub-Page: Manufacturing */
.manufacturingMainInformationSection {
    padding: 50px 0px 50px 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: URL("assets/images/manufacturing-green.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.manufacturingItemTitle {
    margin: 0px 0px 15px 0px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 15px;
    line-height: 30px;
    color: var(--main-brand-deep-dark-blue)
}

.manufacturingItemDescription {
    margin: 0px 0px 25px 0px;
    width: 80%;
    text-align: center;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}

/* Sub-Page: FAQ */
.faqMainInformationSection {
    padding: 50px 0px 50px 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: URL("assets/images/big-potato-YxmutJlU5Is-unsplash.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.faqBodySection {
    width: 100%;
    padding: 0px 0px 50px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.faqBodyItemsContainer {
    width: 70%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

.faqItemContainer {
    width: 30%;
    padding: 25px 0px 25px 0px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    height: 1000px;
}

@media only screen and (max-width: 1920px) {
    .faqBodyItemsContainer {
        flex-wrap: wrap;
    }

    .faqItemContainer {
        width: 400px;
    }
}

@media only screen and (max-width: 500px) {
    .faqBodyItemsContainer {
        width: 100%;
    }

    .faqItemDescription {
        width: 90%;
    }
}


.faqItemIcon {
    margin: 0px 0px 25px 0px;
    width: 100px;
    height: 100px;
}

.faqItemTitle {
    margin: 0px 0px 15px 0px;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-roboto);
    font-weight: medium;
    font-size: 15px;
    line-height: 30px;
    color: var(--main-brand-deep-dark-blue)
}

.faqItemDescription {
    margin: 0px 0px 25px 0px;
    width: 80%;
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
}

.faqItemDescriptionListContainer {
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.faqItemDescriptionListItem {
    width: 60%;
    text-align: left;
    font-family: var(--font-roboto);
    font-weight: 300;
    font-size: 15px;
    line-height: 25px;
    list-style-type: square;
}

/* Sub-Page: Events */
.eventsMainInformationSection {
    padding: 50px 0px 50px 0px;
    width: 100%;
    height: 800px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-image: URL("assets/images/events-yellow.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}