.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

:root{
    --ohs-green: rgba(197,206, 78,1);
    --ohs-green-low-opacity: rgba(197,206, 78,0.15);
    --description-color: rgba(170, 170, 170, 1);
}

html{
    height: 100%;
    scroll-behavior: smooth;
}


body {
    background-color: rgba(0, 0, 0, 255);
    height: 100%;
    padding: 0;
    margin: 0;
}

p, h1, h2, h3{
    font-family: "Poppins";
}

a{
    font-family: "Poppins";
    color: white;
    text-decoration: none;
}

section{
}

.metalBorder{
    margin:0;
    padding: 0;
    height: 11px;
    width: 100%;
    background-image: url(images/metalBorder.webp);
}

#backgroundHomeColor{
        background: linear-gradient(to bottom, black, rgb(6, 7, 7));
        position: fixed;
        width: 100%;
        z-index: -3;
        height: 100vh;
}

/*------------ NAVBAR START ----------------*/
#navBar {
    background-color: rgba(0, 0, 0, 0.5);

    padding: 0%;
    padding-top: 10px;
    padding-bottom: 10px;

    margin: 0 auto;

    width: 100%;

    display: grid;
    grid-template-areas: "navBarLeft navBarRight";
    grid-template-columns: repeat(2, 1fr); 

    align-items: end;

    position: fixed;

    z-index: 1;

    backdrop-filter: blur(5px);
}

#navBarLeft {
    grid-area: navBarLeft;

    padding: 0;
    margin: 0;

    display: grid;
    grid-template-areas: "a a";

    grid-template-columns: max-content 1fr; 
    justify-items: start;
    gap: 16px;
}

#navBarOhsLogo {
    padding-left: 40px;
}

#navBarLogoSubtitle {

    margin: 0;
    margin-bottom: 5px;

    color: white;

    font-size: 1rem;

    font-weight: 300;

    text-align: left;
    width: 100%;

    align-self: end;
}

#navBarRight {
    grid-area: navBarRight;

    /* background-color: red; */

    display: grid;
    position: relative;

    padding: 0;

    margin: 0;
    margin-left: auto;
    grid-template-areas: "a a a a";

    grid-template-columns: repeat(4, 1fr);

    max-width: 600px;
    width: 90%;

    place-items: center;
}

#navBarRightMobile{
    display: none;
}

.navBarButtons {
    margin: 0;
    padding: 0;

    color: white;

    position: relative;
}


.navBarText {
    margin: 0;
    padding: 0;

    cursor: pointer;

    width: 100%;

    font-family: "Poppins";

    text-align: center;
}

.navBarButtonUnderline {
    margin: 0;
    padding: 0;

    background-color: red;

    width: 100%;

    height: 2px;

    opacity: 1;
    transform: scale(0.0, 0.0);

    transition: transform 0.2s ease;
    z-index: 2;
}

#ourGamesNavButton {
    width: 120px;
    padding: 0px;
}

#aboutUsNavButton {
    width: 120px;
    padding: 0px;
}

#gameNavDropDown {
    display: none;

    position: absolute;

    opacity: 0;
    padding: 0;

    width: 100%;

    transform: translate(0px, 0px);

    transition: opacity 0.25s ease, transform 0.25s ease-in-out, display 0.25s;
    transition-behavior: allow-discrete;

    top: -5px;
    padding-top: 30px;
}

#gameNavDropDown.active {
    display: block;
    opacity: 1;
    transform: translate(0px, 4px);
}

@starting-style {
    #gameNavDropDown.active {
        opacity: 0;
        transform: translate(0px, 0px);
    }
}

#gameNavDropDownTextContainer {
    padding: 0px;
    margin-top: 5px;
    margin-bottom: 5px;

    cursor: pointer;

    background-color: black;
    transition: color 0.10s ease-in;
}
#gameNavDropDownTextContainer.hover {
    background-color: red;
}

#gameNavDropDownText {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
}
/*------------ YODHA ----------------*/

#gameYodha {
    /* background-color: purple; */

    box-sizing: border-box;
    position: relative;

    padding: 0;

    padding-top: 80px;

    padding-bottom: 0px;
    margin: 0;
    display: block;
    font-size: 0;

    background-image: url(images/YodhaBattlePoster.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    min-height: 700px;

    width: 100%;
}

#gameYodhaPoster {
    width: 100%;
    padding: 0;
    margin: 0;
}

#gameYodhaLogoBox {

    padding: 0;
    margin: 0 auto;

    max-width: 1280px;
    width: 90%;

    padding-top: 25%;
    padding-bottom: 2%;

    display: grid;
    place-items: center;
    gap: 10px;
}

#gameYodhaLogoImg {
    opacity: 1;
    width: 300px;
    transition: opacity 1.0s ease;
}

#gameYodhaLogoImg.visible {
    opacity: 1;
}

/*------------ ASURA ----------------*/

#gameAsura{
    position: relative;
    margin: 0;
    padding: 0;
    background-color: red;
     background-image: url(images/AsuraVengeancePoster.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    max-width: 100%;

    min-height: 600px;
}

#gameAsuraPoster {
    width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: -4px;

    background-color: red;
}

#gameAsuraPoster.visible{
    opacity: 1;
}

#gameAsuraLogoBox{
    padding: 0;
    padding-top: 20%;
    padding-bottom: 2%;

    max-width: 1280px;
    width: 90%;
    margin: 0 auto;

    display: grid;
    place-items: center;
}

#gameAsuraLogoImg{
    opacity: 1;
    width: 300px;
}

#gameAsuraLogoImg.visible{
    opacity: 1;
}

/*------------ LEARN MORE BUTTON ----------------*/

#learnMoreButton {
    position: relative;

    padding: 0;
    margin: 0;

    height: 37px;
    opacity: 1.0;

    transform: scale(1.0, 1.0);
    transition: transform 0.25s ease-in-out;
}

#learnMoreButton.visible{
}

#learnMoreButton.hover{
    transform: scale(1.1, 1.0);
}

#learnMoreButtonImg {
    width: 150px;

    padding: 0;
    padding-top: 10px;
    margin: 0;

    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%); 

    cursor: pointer;
}

#learnMoreButtonText {
    position: absolute;

    color: white;
    width: 500px;

    left: 50%;
    bottom: 25%;

    font-family: "Poppins";
    font-weight: 400;
    font-size: 1rem;

    transform: translate(-50%, 50%);

    text-align: center;
    margin: 0;

    cursor: pointer;
}

/*-----------------------------------------------*/

#gameDescription {
    box-sizing: border-box;
    color: rgb(170, 170, 170);
    text-align: center;
    margin: 0;
    padding: 20px;
    font-size: 1.25rem;
    background-color: rgba(0,0,0,0.55);
    backdrop-filter: blur(5px);
    border-radius: 5px;
}

#overlay {
    position:  fixed;
    background-color: black;
    width: 100%;
    height: 100vh;
    z-index: 100;
    opacity: 1;
    transition: opacity 1.0s;
}

#overlay.close {
    opacity: 0;
    pointer-events: none;
}

/*-----------------------------------------------*/

#homePageHeader{
    color: white;

    font-size: 3rem;
    font-weight: 700;

    text-align: center;

    font-family: "Poppins";
    margin: 0;
    padding:20px;
}

#homePageSubHeader{
    font-family: "Poppins";
    color: white;

    font-size: 2.5rem;
    font-weight: 500;

    text-align: center;

    margin: 0;
    padding: 10px;

}

/*-----------------------------------------------*/

#aboutUsAndServicesSection{
    background-image: url("images/AboutUsBg.webp");
    background-repeat: repeat;

}

#aboutUsSection{
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 20px;

    scroll-margin-top: 75px;
}

#aboutUsSectionBgImage{
    position: absolute;
    width: 100%;
    z-index: -3;
    opacity: 0.05;
}

#aboutUsGrid {
    box-sizing: border-box;
    display: grid;
    grid-template-areas: "logo description";
    place-items: center;
    gap: 50px;

    /* width: 50%; */
    /* margin: 20px; */

    max-width: 900px;
    margin: 0 auto;
    /* padding-left: 25%; */

    background-color: rgba(111, 9, 9, 0.25);
    padding: 40px;
    border-radius: 10px;

    backdrop-filter: blur(5px);
}

#aboutUsOhsLogo{
    grid-area: logo;
    width: 125px;
}

#aboutUsDescription{
    box-sizing: border-box;
    grid-area: description;
    color: var(--description-color);
    font-weight: 400;
    font-size: 1.45rem;
    margin: 0;
}

/*-----------------------------------------------*/

#servicesSection{
    padding: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#servicesGrid {
    display: grid;
    grid: "auto auto auto auto";
    gap: 20px;
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    grid-template-columns: repeat(4, 1fr);
    place-items: top;

    border: solid 1px var(--ohs-green) ;
    border-radius: 5px;
    box-shadow: 0px 4px 0px var(--ohs-green);

    padding: 20px;

    }

#servicesGridContent {
    border-radius: 20px;
    padding: 10px;
    border: solid 3px var(--ohs-green-low-opacity) ;
    border-radius: 5px;
}

#servicesGridContent.color01{
    background-color: rgba(29, 84, 33, 0.065);
}

#servicesGridContent.color02{
    background-color: rgba(105, 35, 35, 0.076);
}

#servicesGridContentImg {
    width: 100px;
    margin-left: 50%;
    transform: translate(-50%, 0);
    color: var(--ohs-green)
}

#servicesGridContentHeader {
    color: var(--ohs-green);
    text-align: center;
    margin: 0;
    font-size: 1.6rem;
    font-weight: 600;
}

#servicesGridContentDescription {
    color: grey;
    text-align: left;
    margin: 0;
    padding: 10px 5px;
    font-style: italic;
    font-size: 1.0rem;
}

#servicesContactUs{
    color: grey;
    text-align: center;
    font-size: 1.2rem;
}
#servicesContactUsLink{
    color: var(--ohs-green);
    font-weight: 600;
}

/*------------ CLIENTS ----------------*/

#trustedPartnerSection{
    background-color: rgb(255, 255, 255);
    padding: 20px;
}

#trustedPartnerSubheader{
    font-family: "Poppins";
    color: black;

    font-size: 2.5rem;
    font-weight: 500;

    text-align: center;

    margin: 0;
    padding: 20px;
}


#trustedPartnersGrid {
    box-sizing: border-box;
    display: grid;
    grid: "auto auto auto auto";
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px;
    place-items: center;
}

#trustedPartnersGrid02{
    box-sizing: border-box;
    display: grid;
    grid: "a a a";
    max-width: 800px;
    place-items: center;

    margin: 0 auto;
}

#trustedPartnersImg{
    width: 200px;
}

/*------------ AWARDS & ACCOLADES ----------------*/

#accoladesSection{
    box-sizing: border-box;
    padding: 30px;
}

#awardsGrid {
    box-sizing: border-box;
    display: grid;
    grid: "auto auto auto";
    place-items: center;
    max-width: 1280px;
    width: 90%;
    margin: 0 auto;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    padding: 20px;
}


#accoladesImg{
    width: 300px;
}

/*------------ GALLERY ----------------*/

#galleryCarouselMainPicGrid {
    /* background-color: grey; */
    display: grid;
    grid-template-areas: "a a a";
    grid-template-columns: auto 90% auto;
    max-width: 700px;
    width: 90%;
    align-items: center;
    place-items: center;
    margin: 0 auto;
}

#gallerySection{
    padding: 20px;
}

#galleryLeftArrow {
    cursor: pointer;
}

#galleryRightArrow {
    cursor: pointer;
}

.arrowImage {
    opacity: 0.5;
    transform: scale(1.0, 1.0);
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.arrowImage.hover {
    opacity: 1.0;
    transform: scale(1.1, 1.1);
}

#galleryCarouselMainPicContainer {
    padding: 10px;
    margin: 0 auto;
}

#galleryMainPic {
    cursor: pointer;
    max-width: 600px;
    padding: 0px;
    margin: 0px;
    border-radius: 5px;
    border: solid 2px var(--ohs-green);
    box-shadow: 0px 2px var(--ohs-green);
}

#galleryCarouselContainer {
    box-sizing: border-box;
    cursor: pointer;
    display: grid;
    grid-auto-flow: column;
    /* width: 50%;
    padding-left: 25%; */
    place-items: center;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 5px;
}

#galleryCarouselContainerMobile{
    display: none;
}

#gallerySlidePic {
    border: 2px solid rgba(255,255,255,0);
    /* background-color: brown; */

    padding: 2px;
    width: 75%;
    transition: border 0.20s ease;
    opacity: 0.75;
    border-radius: 5px;
}

#gallerySlidePic.selected{
    border: 2px solid var(--ohs-green);
}

/*------------ CONTACT FORM ----------------*/
#formContainer{
    /* background-color:  red; */
    padding: 20px;
}

#contactUsForm{
    box-sizing: border-box;
    background-color: black;
    width: 90%;
    max-width: 600px;
    margin: 0px auto;
    padding: 10px;
    border: 1px solid var(--ohs-green);
    border-radius: 5px;
    /* box-shadow: 0px 0px 8px 8px var(--ohs-green-low-opacity); */
    box-shadow: 0px 4px 0px var(--ohs-green);
}

#formGrid{
    display: grid;

    grid-template-areas: "a a";

    gap:10px;

    padding-bottom: 10px;

    place-items: start;
    align-items: center;
    width: 100%;
}

#formGrid > label{
    font-family: "Poppins";
    color: white;
    width: 25%;
    font-size: 1.2rem;
    font-weight: 300;
}

#formGrid > input{
    font-family: "Poppins";

    color: grey;
    font-size: 1.2rem;

    height: 30px;

    width: 100%;

    box-sizing: border-box;
}

#contactUsForm > textarea{
    font-family: "Poppins";

    width: 100%;

    color: grey;
    font-size: 1.2rem;

    height: 250px;

    margin-bottom: 5px;

    box-sizing: border-box;
}

#buttonColumn{
    text-align: center;
}

#buttonColumn > button{
    width: 35%;

    background-color: grey;
    color: black;

    border: none;
    border-radius: 5px;

    font-family: "Poppins";
    font-size: 1.2rem;

    margin-bottom: 10px;
}

#buttonColumn > button.unlocked{
    background-color: var(--ohs-green);
}

#formMessageTextContent{
    color: var(--description-color);

    display: grid;
    grid-template-areas: "a a";
    align-items: center;

    font-family: "Poppins";
    margin-bottom: 10px;
}

#formNotificationMsg{
    font-style: italic;
}

#formMessageCount{
    text-align: right;
}

#formSubtitle{
    color: var(--ohs-green);

    font-family: "Poppins";
    font-weight: 300;
    font-size: 1rem;

    text-align: center;
}

#formPrivacyNotice{
    margin-top: 10px;
    padding: 10px;

    color: var(--description-color);

    font-family: "Poppins";
    font-size: small;
    font-style: italic;

    text-align: left;

    border: 2px solid var(--ohs-green-low-opacity);
    border-radius: 10px;
}

#formPrivacyNotice > a{
    color: var(--description-color);

    text-decoration: underline;
}


/*------------ FOOTER ----------------*/
#footerContainer{
    display: grid;

    grid: "auto auto auto";
    grid-template-columns: 25% 50% 25%;

    align-items: center;

    padding: 20px;

    margin: 0 auto;
    margin-top: 20px;
}

#footerLogoContainer {
    display: grid;

    grid: "auto auto";
    grid-template-columns: 130px auto;

    gap: 0%; 

    align-items: center;

    place-items: left;
}

#footerImg {
    max-width: 70%;
    margin-top: -15px;
}

#footerDescription {
    color: var(--description-color); 
    font: "Poppins";
    font-size: 0.85rem;
    margin: 0px;
    width: 80%;
    align-self: center;
}

#footerDisclaimer{
    display: grid;

    grid-template-areas: "a a a";
    grid-template-columns: auto 10px auto;

    color: var(--description-color); 

    font-size: 0.85rem;
    text-align: center;

    gap: 10px;
}

#footerDisclaimer > a{
    color: var(--description-color); 
    text-decoration: underline;
}

#footerSeprator{
    background-color: var(--ohs-green);
    width: 2px;
    height: 20px;
    place-self: center;
}

#footerDisclaimerText{
    place-self: end;
}

#footerPrivacyLink{
    place-self: start;
}

#footerSocialMediaContainer {
    display: grid;

    grid: "a a a";
    grid-template-columns: 60% auto auto;
    place-items: end;
    align-items: center;
    padding-left: 50%;
}

#footerSocialMediaContainer > p{
    color: var(--description-color); 
    text-align: right;
    font-size: 0.85rem;
}

#footerContainerMobile{
    display: none;
}

.socialIcon{
    width: 32px;
    text-align: center;

    transform: scale(1.0);
    transition: transform 0.2s ease-in-out;
}

.socialIcon.hover{
    transform: scale(1.5);
}

/*----------------------------------------------------------*/
/*-------------------- MOBILE ------------------------------*/
/*----------------------------------------------------------*/

@media screen and (max-width: 780px){

    body{
        margin: 0;
        padding: 0;
    }

    #overlay{
        display: none;
    }

    #backgroundColor{
        display: none;
    }

    .metalBorder{
        /* display: none; */
    }

        #gameDescription {
            font-size: 0.90rem;
        }


/*-------------------- NAV BAR ------------------------------*/

#navBar {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin: 0 0;
    grid-template-columns: auto auto;
    position: fixed;
}

#navBarLeft {
    display: grid;
    grid-area: navBarLeft;
    grid: "a";
    grid-template-columns: auto;
    gap: 10px;
}

#navBarRight {
    display: none;
    grid-area: none;
}

#navBarRightMobile {
    box-sizing: border-box;
    grid-area: navBarRight;
    display: block;
    place-self: end;
    align-self: end;

    position: relative;

    padding: 10px;
}

#navBarRightMobile > img{
    max-width: 70px;
    width: 40px;
}

#navBarOhsLogo {
    padding: 0;
    max-width: 100px;
}

#navBarLogoSubtitle {
    width: auto;
    margin: 0;


    color: white;

    font-weight: 300;
    text-align: left;

    align-self: end;
    font-size: 0.6rem;
}

#burgerMenu {
    padding: 0;
    margin: 0;

    font-family: "Poppins";

    position: absolute;
    right: -20%;
    top: 115%;

    width: 500px;

    text-align: right;

    z-index: -100;

    overflow: hidden;

    visibility: hidden;
}



#burgerMenuClipRect {
    background-color: rgba(0, 0, 0, 0.9);

    margin: 0;
    padding: 0;
    padding-right: 10px;
    min-height: 100px;

    opacity: 0;
    transform: translateY(-100.0px);

    z-index: -1;

    visibility: hidden;
    transition: z-index 0.2s, visibility 0.2s, opacity 0.2s ease-in, transform 0.2s ease-in-out; 


    backdrop-filter: blur(10px);
}

#burgerMenuClipRect.hover{
    opacity: 1;
    transform: translateY(0.0px);
    visibility: visible;
    z-index: 1000;
}

#burgerMenuText{
    padding: 10px;
    font-size: 2.0rem;
    color: white;
}
                
/*--------------------- GAME - YODHA --------------------------------*/

#gameYodha {
    display: block;

    background-image: url(images/YodhaPosterMobile.webp);
}

#gameYodhaPoster {
}

#gameYodhaLogoBox {
    padding-top: 80%;
    padding-bottom: 10%;
}

#gameYodhaLogoImg{
    width: 300px; 
}


/*--------------------- GAME - ASURA --------------------------------*/

#gameAsura {
    background-image: url(images/AsuraPosterMobile.webp);
}

#gameAsuraLogoBox{
    padding-top: 80%;
    padding-bottom: 10%;
}

#gameAsuraLogoImg{
    width: 200px;
}

#learnMoreButtonText {
max-width: 150px;
width: 90%;
}

#learnMoreButton{
width: 150px;
}

/*--------------------- ABOUT US --------------------------------*/

#aboutUsSection {
    padding: 0;
}

#aboutUsGrid {
    display: grid;
    grid-template-areas: "logo"
                         "description";

    padding: 20px;
    margin: 0;

    gap: 10px;
}

#aboutUsOhsLogo{
    box-sizing: border-box;
    width: auto;
    max-width: 250px;
    padding: 20px;
}

#aboutUsDescription{
    font-size: 1.2rem;
}

/*------------- SERVICES -----------------*/

#servicesGrid {
    grid: "auto";
}

#servicesSection{
    scroll-margin-top: 50px;
}

/*------------- AWARDS -----------------*/

#accoladesSection{
    padding: 10px;
}

#awardsGrid {
    grid: "a";
    gap: 10px;
    padding: 10px;
    margin: 0 auto;
    max-width: 800px;
    box-sizing: content-box;

    border: solid 1px var(--ohs-green) ;
    border-radius: 5px;
    box-shadow: 0px 4px 0px var(--ohs-green);
}
#accoladesImg{
    max-width: 300px;
    width: 100%;
}

/*-------------- PARTNERS --------------------*/


#trustedPartnersGrid {
    grid: "auto auto";
    max-width: 1280px;
    padding: 0;

    margin: 0 auto;
}

#trustedPartnersGrid02 {
    grid: "auto auto";
    max-width: 1280px;
}

#trustedPartnersImg{
    max-width: 200px;
    width: 90%;
}

/*------------- GALLERY -----------------*/

#gallerySection{
    padding: 10px;
}

#galleryCarouselMainPicGrid {
    display: none;
    margin: 0;
    width: 100%;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 5px;
}

#galleryCarouselMainPicContainer {
    padding: 0;
    max-width: 300px;
    width: 100%;
}

#galleryMainPic {
    width: 100%;
}

#galleryCarouselContainer {
    display: none;
}

#galleryCarouselContainerMobile {
    box-sizing: content-box;
    cursor: pointer;
    display: grid;

    grid-template-areas: "a";

    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 10px;
    gap: 5px;

    border: solid 1px var(--ohs-green) ;
    border-radius: 5px;
    box-shadow: 0px 4px 0px var(--ohs-green);
}

#galleryCarouselContainerMobile > a{
}

#galleryMainPickLink{
    width: auto;
}

#gallerySlidePic {
    padding: 0;
    margin: 0;

    width: 100%;
    opacity: 1;
    margin: 0 auto;
    place-self: center;
    border: 0;
}


/*------------- CONTACT FORM -----------------*/

#formContainer{
    scroll-margin-top: 50px;
}

#contactUsForm{
    box-sizing: content-box;
    width: auto;
}

#formGrid {
    box-sizing: border-box;
    grid-template-columns: 1fr auto;
}

#formGrid > label {
}

#formGrid > input{
    box-sizing: border-box;
}

#formMessage{
    box-sizing: border-box;
}

/*------------- FOOTER -----------------*/

#footerContainer{
    display: none;
}

#footerContainerMobile{
    display: grid;
    grid: "auto";
    padding: 20px;
    margin: 0 auto;
    margin-top: 20px;
    place-items: center;
    box-sizing: border-box;

    gap: 20px;
}

#footerDisclaimerTextMobileContainer {
    text-align: center;
    color: var(--description-color);
    font-size: 0.95rem;
}

#footerDisclaimerTextMobileContainer > a{
    color: var(--description-color);
    text-decoration: underline;
}

#footerSocialMediaContainer{
    max-width: 300px;
    grid-template-columns: 45% auto auto;
    width: 250px;
    margin: 0 auto;
    align-items: center;
    place-items: center;
    padding: 0;
}

#footerSocialMediaContainer > p{
    font-size: 0.95rem;
}

.socialIcon{
    width: 50px;
}

}