body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Navbar Styling */

.login-btn {
    margin-left: 16px;
}

.active {
    font-weight: 500;
    color: black;
}

.bg-body-tertiary {
    background-color: #ffffff !important;
}

.btn {
    background-color: #063e78;
    color: #fff;
}

.btn:hover {
    background-color: #09519e;
    color: #fff;
}  

.navLink {
    color: #000;
}

/* Main body styling */

.background {
    flex: 1;
    background-image: url('./landing_page_images/background.png');
    /* background-repeat: no-repeat; */
    background-repeat: repeat-y;
    /* background-size: cover; */
    background-size:contain;
    width: 100%;
    position: relative;
}

.wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* margin-bottom: 10em; */
}
  
.topRectangle {
    background-color: #063e78;
    height: 35em;
    width: 27.5em;
    z-index: 2;
    margin-right: 55em;
    margin-top: 2.5em;
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 0.8em #000;
}
  
.bottomRectangle {
    background-color: #ee0039;
    width: 25em;
    /* height: 55em; */
    /* height: 80em; */
    /* height: 75em; */
    height: 50em;
    /* margin-top: -50px; */
    z-index: 1;
    margin-right: 40em;
    margin-top: 15em;
    /* margin-top: 25em; */
    margin-bottom: 20em;
}

.videoContainer {
    position: absolute;
    z-index: 3;
    margin-top: 4em;
    margin-left: 50em;
}

.videoContainer video {
    /* width: 640px; */
    width: 750px;
}

.solidBackground {
    background-color: #e5e5e5;
    height: 20em;
}

.blueBoxText {
    color: white;
    /* padding-left: 2em; */
    /* padding-right: 2em; */
    padding: 1em;
    /* text-transform: uppercase; */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.secondText {
    font-size: 1.2em;
    text-align: center;
}

.blueBoxImage {
    z-index: 3;
    width: 25em;
    margin-bottom: 1em;
}

.fixed-button {
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Push content to the bottom */
    align-items: flex-end; /* Align content to the right */
    position: fixed; /* Fixed position */
    bottom: 10px;
    right: 10px;
    z-index: 1000;
}

.fixed-button img {
    display: block;
    width: 50px;
    height: auto;
}


/* ----------------- First Container Styling ----------------- */

.firstContainer {
    display: flex;
    flex-direction: column;
    /* justify-content: space-evenly; */
    gap: 2em;
    /* position: absolute; */
    z-index: 3;
    /* margin-top: 35em; */
    /* margin-top: -60em; */
    /* margin-top: -70em; */
    margin-top: -42em;
}

.innerFirstContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* justify-content: space-between; */
    gap: 3em;
    background-color: white;
    box-shadow: 0 0 0.8em #000;
    /* padding: 1em; */
}

/* .innerFirstContainer:nth-of-type(1),
.innerFirstContainer:nth-of-type(3) {
    margin-right: 8em;
} */

/* .innerFirstContainer:nth-of-type(2),
.innerFirstContainer:nth-of-type(4) {
    margin-left: 9em;
} */

.innerFirstContainerText {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    flex-wrap: wrap;
    width: 60em;
}

.learnMoreBtn {
    border: none;
    background-color: #000;
    color: white;
    border-radius: 0.5em;
    width: fit-content;
    padding: 0.5em 1em;
    margin-left: 3em;
}

.learnMoreBtn a {
    text-decoration: none;
    color: white;
}

/* .innerFirstContainerText:nth-of-type(1),
.innerFirstContainerText:nth-of-type(3) {
    padding-left: 3em;
} */

/* .innerFirstContainerText:nth-of-type(2),
.innerFirstContainerText:nth-of-type(4) {
    padding-right: 3em;
} */

.innerFirstContainerText {
    padding-left: 1em;
}

.innerFirstContainerText span {
    display: block;
    padding-left: 2em;
}

.innerFirstContainer p {
    font-size: 1.5em;
}

.innerFirstContainer img {
    width: 18em;
}

#firstImg {
    width: 16em;
}

#thirdImg {
    width: 19em;
}

#fourthImg {
    width: 16em;
}

/* ----------------- Hub Graphic Styling ----------------- */


.circularGraphic {
    /* margin-top: 6em; */
    margin-top: 10em;
    margin-bottom: 3em;
    width: 58em;
}


/* ----------------- Textbox Styling ----------------- */

.textBox {
    /* position: absolute; */
    /* position: relative; */
    min-height: 530px;
    width: 1312px;
    background-color: #fff;
    /* margin-top: 35em; */
    /* margin-top: 5em; */
    margin-top: 0em;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 0 0.8em #000;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-start;
    padding-top: 3em;
    padding-bottom: 3em;
    gap: 2em;
    padding-left: 2em;
    padding-right: 2em;
    gap: 3em;
    /* z-index: 3; */
}

hr {
    border: none;
    height: 0;
    border-top: 0.2em solid #ee0039;
    opacity: 10;
}


.mainBoxText {
   width: 395px;
   height: 205px; 
}

.mainBoxText > h5 {
    font-size: 1.2em;
}

.mainBoxText p, 
.mainBoxText textarea {
    font-size: .95em;
}

.mainBoxText textarea {
    width: 384px !important;
    height: 135px !important;
}

.blueBoxText textarea {
    width: 400px !important;
    height: 200px !important;
}

.mainBoxText textarea[data-element="h5"] {
    height: 100px !important;
    font-size: 1.2em;
}


/* ----------------- Image Container Styling ----------------- */

.imageContainer {
    margin-top: 4em;
    /* background-color: #ee0039; */
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3em;
    /* box-shadow: 0 0 0.8em #000; */
    width: 80em;
}

.imageContainer h1 {
    background-color: #ee0039;
    box-shadow: 0 0 0.8em #000;
    display: flex;
    justify-content: center;
    padding: 1em 2em;
    margin-bottom: 0em;
}

.imageHeader {
    background-color: #ee0039;
    box-shadow: 0 0 0.8em #000;
    padding: 0.5em;
    width: fit-content;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 1.5em;
    /* margin-bottom: 1.5em;
    margin-top: 1.5em; */
    margin: 1.5em;
}

.carousel-inner {
    display: flex;
    justify-content: center;
}

.videoGraphicSection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 4em;
    padding-top: 2em;
    padding-bottom: 2em;
}

/* .video {
    width: 40em;
    box-shadow: 0 0 0.8em #000;
} */

.videoContainerTwo {
    position: relative;
    width: 100%;
    max-width: 40em;
    background-color: black;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.videoContainerTwo::before {
    content: '';
    display: block;
    padding-top: 56.25%;
}

.videoContainerTwo video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: black;
    box-shadow: 0 0 0.8em #000;
}

/* .graphicOne {
    width: 30em;
    box-shadow: 0 0 0.8em #000;
}

.videoOne {
    width: 40em;
    box-shadow: 0 0 0.8em #000;
}

.graphicTwo {
    width: 30em;
    box-shadow: 0 0 0.8em #000;
}

.videoTwo {
    width: 40em;
    box-shadow: 0 0 0.8em #000;
}

.graphicThree {
    width: 30em;
    box-shadow: 0 0 0.8em #000;
}

.videoThree {
    width: 40em;
    box-shadow: 0 0 0.8em #000;
} */


/* ----------------- Contact Container Styling ----------------- */

.contactContainer {
    display: flex;
    flex-direction: row;
}

.formContainer {
    /* background-color: #fff; */
    /* background-color: #063e78; */
    background-color:#0a478a;
    color: white;
    position: relative;
    /* left: 22%; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 5em;
    margin-bottom: 5em;
    padding: 3em;
    width: 50em;
    box-shadow: 0 0 0.8em #000;
}

.required {
    color: #ee0039;
}

.formContainer > .formContainerText {
    display: flex;
    flex-direction: column;
    margin-bottom: 2em;
}

.formContainer > .formContainerText > h3 {
    font-size: 2.5em;
}

.formContainerText {
    text-align: center;
}

.formContainerText textarea[data-element="p"] {
    width: 300px !important;
    height: 200px !important;
}

.formContainer > .form > form {
    display: flex;
    flex-direction: column;
}

::placeholder {
    color: white;
    opacity: 0.5; /* Firefox */
  }
  
  ::-ms-input-placeholder { /* Edge 12 -18 */
    color: white;
  }

.formContainer > .form > form > input {
    width: 80%;
    padding: 0.5em 0.5em;
    margin-left: 1em;
    margin-bottom: 2em;
    margin-top: 0.5em;
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-bottom: 1px solid #000; */
    border-bottom: 1px solid white;
    /* background-color: #063e78; */
    background-color: #0a478a;
    color: white;
}

.formContainer > .form > form > textarea {
    width: 80%;
    height: 6em;
    padding: 0.5em 0.5em;
    margin-left: 1em;
    margin-bottom: 2em;
    margin-top: 0.5em;
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-bottom: 1px solid #000; */
    border-bottom: 1px solid white;
    resize: none;
    /* background-color: #063e78; */
    background-color: #0a478a;
    color: white;
}

.formContainer > .form > form > select {
    width: 80%;
    padding: 0.5em 0.5em;
    margin-left: 1em;
    margin-bottom: 2em;
    margin-top: 0.5em;
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-bottom: 1px solid #000; */
    border-bottom: 1px solid white;
    resize: none;
    /* background-color: #063e78; */
    background-color: #0a478a;
    color: white;
}

.formContainer > .form > form > button {
    width: 40%;
    padding: 0.8em 2em;
    font-size: 0.9em;
    text-transform: uppercase;
    background-color: #ee0039;
    color: #fff;
    border: none;
    margin-top: 2em;
    border-radius: 0.5em;
}


.contactUsContainer {
    background-color: #063e78;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2.5em;
    position: relative;
    left: 16%;
    margin-top: 3em;
    padding: 3em 4em;
    width: auto;
    height: 40em;
}

.innerContactContainer {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.innerText {
    color: #fff;
    display: flex;
    gap: 1em;
    font-weight: 700;
    font-size: 20px;
}

.innerInfo {
    color: white;
    margin-top: 0.8em;
    padding-left: 2.5em;
    font-size: 18px;
}

.emailSent {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: white;
}

.emailError {
    margin-top: 10px;
    font-size: 18px;
    font-weight: 500;
    color: white;
}

.contactSection p {
    display: flex;
    justify-content: center;
    font-size: 1.4em;
}

/* ----------------- Events Container Styling ----------------- */

.eventsContainer {
    width: 100%;
    background-color: #ee0039;
    color: white;
    margin-bottom: 5em;
}

.eventsInnerContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.eventsInnerContainer h1 {
    margin-top: 1em;
    margin-bottom: 1em;
    font-size: 3em;
}

/* .eventsTextContainer {
    background-color: #000;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
} */

.eventsTextContainer {
    background-color: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* .eventsTextContainer p {
    font-size: 2.5em;
} */

.eventsTextContainer p {
    font-size: 2.5em;
    margin-top: 1em;
    margin-bottom: 1em;
}

.eventsTextContainer img {
    /* width: 60em; */
    /* width: 70em; */
    width: 80em;
}

/* ----------------- Footer Styling ----------------- */

.footerContainer {
    margin-top: auto;
    background-color: #063e78;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
    gap: 1em;
    color: white;
}

.footer {
    background-color: #063e78;
    margin-top: auto;
    /* height: 3em; */
    /* height: auto; */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    
}

/* ----------------- MEDIA QUERIES ------------------------- */

/* Media Queries */
@media (max-width: 1521px) {

    .bottomRectangle {
        width: 25em;
        height: 50em;
        margin-right: 35em;
        margin-top: 15em;
    }

    .topRectangle {
        height: 32em;
        width: 25em;
        margin-right: 45em;
        /* margin-top: -54em; */
        box-shadow: 0 0 0.8em #000;
    }

    .secondText {
        font-size: 1em;
        /* padding: 5px; */
    }

    .blueBoxImage {
        width: 23em;
    }
    

    .blueBoxText {
        padding: 1.5em;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        display: flex;
        flex-direction: column;
        /* justify-content: space-evenly; */
        gap: 2em;
        /* position: absolute; */
        z-index: 3;
        /* margin-top: 35em; */
        margin-top: -45em;
        width: 65em;
    }

    .innerFirstContainerText p {
        font-size: 1.2em;
    }


    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 2em;
        margin-bottom: 1em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 54em;
        margin-right: 2em;
    }

    .textBox {
        /* width: 1038.5px; */
        width: 1150px;
        min-height: 480px;
        margin-top: 0em;
        padding-top: 2em;
    }

    .mainBoxText h5 {
        font-size: 1.1em;
    }

    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.94em;
    }

    .blueBoxText {
        padding-left: 1.5em;
    }

    .videoContainer {
        margin-top: 4em;
        margin-left: 40em;
    }

    .videoContainer video {
        /* width: 640px; */
        width: 600px;
    }

    .imageHeader {
        margin-left: auto;
        margin-right: auto;
        width: 45em;
    }

}

@media (max-width: 1300px) {

    .bottomRectangle {
        margin-left: 8.5em;
        /* height: 33em; */
        height: 55em;
        width: 18em;
        margin-top: 8em;
    }
    
    .topRectangle {
        height: 32em;
        width: 25em;
        margin-left: 8em;
        /* margin-top: -48em;  */
        /* position: absolute; */
        box-shadow: 0 0 0.8em #000;
    }

    .blueBoxText {
        padding: 1em;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 1em;
    }

    .blueBoxText {
        padding: 1.5em;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        display: flex;
        flex-direction: column;
        /* justify-content: space-evenly; */
        gap: 2em;
        /* position: absolute; */
        z-index: 3;
        /* margin-top: 35em; */
        margin-top: -43em;
        width: 70em;
    }

    .innerFirstContainer {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        justify-content: space-between;
        gap: 3em;
        background-color: white;
        box-shadow: 0 0 0.8em #000;
    }

    /* .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 7em;
    } */

    /* .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 7em;
    } */

    .innerFirstContainerText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        flex-wrap: wrap;
    }

    .learnMoreBtn {
        border: none;
        background-color: #000;
        color: white;
        border-radius: 0.5em;
        width: fit-content;
        padding: 0.5em 1em;
        margin-left: 0em;
        font-size: 0.8em;
    }

    .learnMoreBtn a {
        text-decoration: none;
        color: white;
    }

    .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 3em;
    }

    .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 3em;
    }

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    .innerFirstContainerText strong {
        font-size: 20px;
    }

    .innerFirstContainerText span {
        /* font-size: 16px; */
        font-size: 0.8em;
    }

    .innerFirstContainer p {
        font-size: 1.4em;
    }

    .innerFirstContainer img {
        width: 18em;
    }

    #firstImg {
        width: 16em;
    }

    #thirdImg {
        width: 19em;
    }

    #fourthImg {
        width: 16em;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 6em;
        margin-bottom: 1em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 60em;
        margin-right: 0em;
        margin-top: 6em;
    }

    /* ----------------- Textbox Styling ----------------- */

    .textBox {
        width: 980px;
        min-height: 400px;
        margin-top: 0em;
        padding-top: 2em;
    }

    .mainBoxText > h5 {
        font-size: 0.9em;
    }
    
    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.7em;
    }

    .videoContainer {
        margin-top: 4em;
        margin-left: 30em;
    }

    .videoContainer video {
        width: 510px;
    }

    .carousel-item.active {
        display: flex !important;
        align-items: center;
        height: 750px;
        /* height:min-content; */
    }

    .imageHeader {
        margin-left: auto;
        margin-right: auto;
    }

    /* ----------------- footer Styling ----------------- */

    .firstFooter,
    .secondFooter,
    .thirdFooter,
    .footer {
        font-size: 14px;
    }

    .footerContainer {
        padding-bottom: -0.2em;
    }

    .footerText {
        margin-top: -0.2em;
    }
}

@media (min-width: 1200px) and (max-width: 1299px) {
    .bottomRectangle {
        margin-left: 8.5em;
        /* height: 33em; */
        height: 55em;
        width: 18em;
        margin-top: 8em;
    }
    
    .topRectangle {
        height: 35em;
        width: 27.5em;
        margin-left: 6em;
        /* margin-top: -48em;  */
        /* position: absolute; */
        box-shadow: 0 0 0.8em #000;
    }

    .blueBoxText {
        padding: 1em;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 1.1em;
    }

    .blueBoxText {
        padding: 1.5em;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        display: flex;
        flex-direction: column;
        /* justify-content: space-evenly; */
        gap: 2em;
        /* position: absolute; */
        z-index: 3;
        /* margin-top: 35em; */
        margin-top: -42em;
        width: 65em;
    }

    .innerFirstContainer {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        justify-content: space-between;
        gap: 3em;
        background-color: white;
        box-shadow: 0 0 0.8em #000;
    }

    .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 7em;
    }

    .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 7em;
    }

    .innerFirstContainerText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        flex-wrap: wrap;
    }

    .learnMoreBtn {
        border: none;
        background-color: #000;
        color: white;
        border-radius: 0.5em;
        width: fit-content;
        padding: 0.5em 1em;
        margin-left: 0em;
        font-size: 0.8em;
    }

    .learnMoreBtn a {
        text-decoration: none;
        color: white;
    }

    .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 3em;
    }

    .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 3em;
    }

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    .innerFirstContainerText strong {
        font-size: 20px;
    }

    .innerFirstContainerText span {
        /* font-size: 16px; */
        font-size: 0.9em;
    }

    .innerFirstContainer p {
        font-size: 1.4em;
    }

    .innerFirstContainer img {
        width: 18em;
    }

    #firstImg {
        width: 16em;
    }

    #thirdImg {
        width: 19em;
    }

    #fourthImg {
        width: 16em;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 6em;
        margin-bottom: 1em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 60em;
        /* margin-right: 2em; */
        margin-top: 3em;
    }

    /* ----------------- Textbox Styling ----------------- */

    .textBox {
        width: 980px;
        min-height: 400px;
        margin-top: 0em;
        padding-top: 2em;
    }

    .mainBoxText > h5 {
        font-size: 0.9em;
    }
    
    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.7em;
    }

    .videoContainer {
        margin-top: 4em;
        margin-left: 30em;
    }

    .videoContainer video {
        width: 510px;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 52em;
        margin-right: 0em;
    }

    .imageContainer {
        /* margin-top: 4em;
        text-align: center;
        padding: 1em; */
        width: 100vw;
    }

    .carousel-item.active {
        display: flex !important;
        align-items: center;
        height: 750px;
        /* height:min-content; */
    }

    .imageHeader {
        margin-left: auto;
        margin-right: auto;
        width: 42em;
        font-size: 1.5em;
    }
    
    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
    
    .graphicOne {
        width: 27.5em;
    }
    
    .videoOne {
        width: 37.5em;
    }
    
    .graphicTwo {
        width: 27.5em;
    }
    
    .videoTwo {
        width: 37.5em;
    }
    
    .graphicThree {
        width: 27.5em;
    }
    
    .videoThree {
        width: 37.5em;
    }

    .eventsTextContainer img {
        width: 100vw;
    }
}

/* @media (max-width: 1000px) { */
@media only screen and (min-width: 1025px) and (max-width: 1200px) {

    /* ----------------- Main Container Styling ----------------- */

    .bottomRectangle {
        left: 350px; 
        top: 38em;
        margin-bottom: 25em;
        height: 50em;
    }
    
    .topRectangle {
        height: 31em;
        width: 24em;
        /* top: 12em; */
        left: -6em; 
        /* right: 1em; */
        box-shadow: 0 0 0.8em #000;
    }

    .secondText {
        font-size: 1em;
    }

    .blueBoxImage {
        z-index: 3;
        width: 22em;
        margin-bottom: 1em;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        margin-top: -46em;
        align-items: center;
        width: 100vw;
    }

    .innerFirstContainer {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        justify-content: space-between;
        gap: 3em;
        background-color: white;
        box-shadow: 0 0 0.8em #000;
        width: 847px;
    }

    .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 5em;
    }

    .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 5em;
    }

    .innerFirstContainerText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        flex-wrap: wrap;
    }

    .learnMoreBtn {
        border: none;
        background-color: #000;
        color: white;
        border-radius: 0.5em;
        width: fit-content;
        padding: 0.5em 1em;
        margin-left: 0em;
        font-size: 0.8em;
    }

    .learnMoreBtn a {
        text-decoration: none;
        color: white;
    }

    .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 3em;
    }

    .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 3em;
    }

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    .innerFirstContainerText strong {
        font-size: 20px;
    }

    .innerFirstContainerText span {
        /* font-size: 16px; */
        font-size: 0.8em;
    }

    .innerFirstContainer p {
        font-size: 1.4em;
    }

    .innerFirstContainer img {
        width: 18em;
    }

    #firstImg {
        width: 16em;
    }

    #thirdImg {
        width: 19em;
    }

    #fourthImg {
        width: 16em;
    }

    /* ----------------- Textbox Styling ----------------- */
    
    #thirdImg {
        width: 17em;
    }

    .textBox {
        flex-wrap: wrap;
        width: 650px;
        z-index: 2;
        gap: 3em;
    }

    .mainBoxText {
        height: 15em;
        width: 500px;
    }

    .mainBoxText > h5 {
        font-size: 1em;
    }

    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.8em;
    }

    .videoContainer {
        margin-top: 4em;
        margin-left: 25em;
    }

    .videoContainer video {
        width: 450px;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 8em;
        margin-bottom: 2em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 52em;
        margin-right: 0em;
        margin-top: 3em;
    }

    .imageContainer {
        margin-top: 4em;
        text-align: center;
        padding: 1em;
        width: 100vw;
    }

    .carousel-item.active {
        display: flex !important;
        align-items: center;
        height: 750px;
        /* height:min-content; */
    }

    .imageHeader {
        margin-left: auto;
        margin-right: auto;
        width: 44em;
        font-size: 1.3em;
    }
    
    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
    
    .graphicOne {
        width: 25em;
    }
    
    .videoOne {
        width: 35em;
    }
    
    .graphicTwo {
        width: 25em;
    }
    
    .videoTwo {
        width: 35em;
    }
    
    .graphicThree {
        width: 25em;
    }
    
    .videoThree {
        width: 35em;
    }

    .eventsTextContainer img {
        width: 100vw;
    }
}



@media only screen and (min-width: 769px) and (max-width: 1024px) {

    /* ----------------- Main Body Styling ----------------- */

    .bottomRectangle {
        /* left: 20em;  */
        margin-top: 40em;
        margin-right: 30em;
        margin-left: 20em;
        margin-bottom: 0em;
        height: 50em;
        width: 22em;
    }
    
    .topRectangle {
        height: 37em;
        width: 28em;
        margin-left: 45em;
        margin-top: 31em;
        /* top: 12em; */
        /* left: 250px;  */
        box-shadow: 0 0 0.8em #000;
    }

    .blueBoxText {
        padding: 1em;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 1.2em;
    }

    .blueBoxImage {
        z-index: 3;
        width: 26em;
        margin-bottom: 1em;
    }

    .videoContainer {
        margin-top: 4em;
        margin-left: 0em;
    }

    .videoContainer video {
        width: 650px;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        margin-top: -18.5em;
        align-items: center;
        width: 100vw;
    }
    
    .innerFirstContainer {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        gap: 3em;
        background-color: white;
        box-shadow: 0 0 0.8em #000;
        width: 40em;
    }
    
    .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 0em;
    }
    
    .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 0em;
    }
    
    .innerFirstContainerText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        flex-wrap: wrap;
    }
    
    .learnMoreBtn {
        border: none;
        background-color: #000;
        color: white;
        border-radius: 0.5em;
        width: fit-content;
        padding: 0.5em 1em;
        margin-left: 0em;
    }
    
    .learnMoreBtn a {
        text-decoration: none;
        color: white;
    }
    
    .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 3em;
    }
    
    .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 3em;
    }
    
    .innerFirstContainer p {
        font-size: 1.2em;
    }
    
    .innerFirstContainerText span {
        padding-left: 0em;
        font-size: 16px;
    }

    .innerFirstContainer img {
        width: 16em;
    }
    
    #firstImg,
    #fourthImg {
        width: 14em;
    }
    
    #thirdImg {
        width: 17em;
    }

    .fixed-button img {
        width: 40px;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 2em;
        margin-bottom: 2em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 45em;
        margin-right: 0em;
        margin-top: 8em;
    }

    /* ----------------- Textbox Styling ----------------- */

    .textBox {
        margin-top: 0em;
        flex-wrap: wrap;
        width: 600px;
        z-index: 2;
        gap: 3em;
    }

    .mainBoxText {
        height: 15em;
        width: 500px;
    }

    .mainBoxText > h5 {
        font-size: 1em;
    }

    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.8em;
    }

    /* ----------------- Image Container Styling ----------------- */

    .imageContainer {
        margin-top: 4em;
        text-align: center;
        padding: 1em;
        width: 100vw;
    }

    .imageContainer h1 {
        margin-bottom: 0.5em;
        font-size: 2em;
    }

    .imageHeader {
        width: 42em;
        font-size: 1.3em;
    }

    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
    
    .graphicOne {
        width: 23em;
    }
    
    .videoOne {
        width: 33em;
    }
    
    .graphicTwo {
        width: 23em;
    }
    
    .videoTwo {
        width: 33em;
    }
    
    .graphicThree {
        width: 23em;
    }
    
    .videoThree {
        width: 33em;
    }

    /* ----------------- Contact Container Styling ----------------- */

    .formContainer {
        margin-top: 4em;
        margin-bottom: 4em;
        padding: 1em;
        width: 40em;
    }

    .formContainer h3 {
        margin: 0.5em;
        font-size: 2em;
    }

    .formContainer > .formContainerText {
        margin-bottom: 2em;
    }

    .form {
        font-size: 16px;
        padding-left: 2em;
        padding-right: 2em;
    }

    .formContainer > .form > form > input {
        width: 90%;
        margin-bottom: 2em;
    }

    .formContainer > .form > form > textarea {
        width: 90%;
        height: 6em;
        margin-bottom: 2em;
    }

    .formContainer > .form > form > select {
        width: 90%;
        margin-bottom: 2em;
    }

    .formContainer > .form > form > button {
        width: 30%;
        padding: 0.5em 1em;
        font-size: 0.9em;
        margin-top: 2em;
        border-radius: 0.5em;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2em;
    }

    .contactUsContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2.5em;
        position: relative;
        left: 16%;
        margin-top: 3em;
        padding: 3em 4em;
        width: auto;
        height: 40em;
    }

    .innerContactContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .innerText {
        gap: 1em;
        font-weight: 700;
        font-size: 18px;
    }

    .innerInfo {
        margin-top: 0.8em;
        padding-left: 2.5em;
        font-size: 16px;
    }

    .emailSent {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: white;
    }
    
    .emailError {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: white;
    }

    /* ----------------- Events Container Styling ----------------- */

    .eventsContainer {
        margin-bottom: 4em;
    }

    .eventsInnerContainer h1 {
        font-size: 2.5em;
        text-align: center;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .eventsTextContainer p {
        font-size: 1.8em;
        text-align: center;
    }

    .eventsTextContainer img {
        width: 100vw;
    }

    /* ----------------- Footer Styling ----------------- */
    
    .footerContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .footer {
        font-size: 15px;
    }
}

@media only screen and (max-width: 991px) {
    .login-btn {
        margin-left: 0px;
        margin-top: 0.5em;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        display: flex;
        flex-direction: column;
        /* justify-content: space-evenly; */
        gap: 2em;
        /* position: absolute; */
        z-index: 3;
        /* margin-top: 35em; */
        margin-top: -20em;
    }

    .bottomRectangle {
        height: 47.5em;
    }

    .topRectangle {
        height: 34em;
        width: 27em;
        box-shadow: 0 0 0.8em #000;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 1.2em;
    }

    .blueBoxImage {
        z-index: 3;
        width: 25em;
        margin-bottom: 1em;
    }

    .innerFirstContainer {
        display: flex;
        flex-direction: row;
        /* justify-content: center; */
        justify-content: space-between;
        gap: 3em;
        background-color: white;
        box-shadow: 0 0 0.8em #000;
    }

    /* .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 5em;
    } */

    /* .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 5em;
    } */

    .innerFirstContainerText {
        display: flex;
        flex-direction: column;
        justify-content: center;
        /* align-items: center; */
        flex-wrap: wrap;
    }

    .learnMoreBtn {
        border: none;
        background-color: #000;
        color: white;
        border-radius: 0.5em;
        width: fit-content;
        padding: 0.5em 1em;
        margin-left: 0em;
        font-size: 0.8em;
    }

    .learnMoreBtn a {
        text-decoration: none;
        color: white;
    }

    .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 3em;
    }

    .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 3em;
    }

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    /* .innerFirstContainer p {
        font-size: 1.4em;
    } */

    .innerFirstContainer img {
        width: 18em;
    }

    #firstImg {
        width: 16em;
    }

    #thirdImg {
        width: 19em;
    }

    #fourthImg {
        width: 16em;
    }

    .circularGraphic {
        margin-right: 0em;
        margin-top: 6em;
    }
    
    .eventsTextContainer img {
        width: 100vw;
    }

    .imageHeader {
        width: 36em;
        font-size: 1.2em;
    }

    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
    
    .graphicOne {
        width: 20em;
    }
    
    .videoOne {
        width: 25em;
    }
    
    .graphicTwo {
        width: 20em;
    }
    
    .videoTwo {
        width: 25em;
    }
    
    .graphicThree {
        width: 20em;
    }
    
    .videoThree {
        width: 25em;
    }
}

@media (max-width: 870px) {
    .bottomRectangle {
        left: 360px; 
    }

}

@media only screen and (min-width: 481px) and (max-width: 768px) {

    /* ----------------- Main Body Styling ----------------- */

    .bottomRectangle {
        /* left: 20em;  */
        margin-top: 25em;
        margin-right: 30em;
        margin-left: 25em;
        margin-bottom: 0em;
        height: 64em;
        width: 22em;
    }
    
    .topRectangle {
        height: 29em;
        width: 23em;
        margin-left: 45em;
        margin-top: 22em;
        /* top: 12em; */
        /* left: 250px;  */
        box-shadow: 0 0 0.8em #000;
    }

    .blueBoxText {
        padding: 1em;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 1em;
    }

    .blueBoxImage {
        z-index: 3;
        width: 21em;
        margin-bottom: 1em;
    }

    .videoContainer {
        margin-top: 4em;
        margin-left: 0em;
    }

    .videoContainer video {
        width: 450px;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        gap: 1em;
        margin-top: -35em;
        align-items: center;
        width: 100vw;
    }

    .innerFirstContainer {
        flex-direction: column;
        gap: 1em;
        width: 23em;
        text-align: center;
        align-items: center;
        margin-left: 5em;
        margin-right: 5em;
    }

    /* .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 0em;
        padding-bottom: 1em;
    }

    .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 0em;
        padding-top: 1em;
    }

    .learnMoreBtn {
        padding: 0.5em 1em;
        margin-left: 0em;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        font-size: 14px;
    } */

    .innerFirstContainerText {
        width: 18em;
        padding-left: 1em !important;
        padding: 1em 1em 0 1em;
    }

    .innerFirstContainerText strong {
        font-size: 20px;
    }

    .innerFirstContainerText span {
        font-size: 16px;
    }

    /* .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 0em;
        padding: 1em 1em 0 1em;
    } */

    /* .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 0em;
        padding: 0em 1em 1em 1em;
    } */

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    .innerFirstContainer p {
        font-size: 1em;
    }

    .innerFirstContainer img {
        width: 18em;
    }

    #firstImg,
    #fourthImg {
        width: 16em;
    }

    #thirdImg {
        width: 19em;
    }

    .fixed-button img {
        width: 35px;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 0em;
        margin-bottom: 0em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 28em;
        margin-right: 0em;
        margin-top: 10em;
    }

    /* ----------------- Textbox Styling ----------------- */

    .textBox {
        margin-top: 0em;
        flex-wrap: wrap;
        /* width: 500px; */
        width: 400px;
        height: 62em;
        z-index: 2;
        gap: 0em;
    }

    .mainBoxText {
        height: 15em;
        width: 500px;
    }

    .mainBoxText > h5 {
        font-size: 1em;
    }

    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.8em;
    }

    /* ----------------- Image Container Styling ----------------- */

    .imageContainer {
        margin-top: 2em;
        text-align: center;
        padding: 1em;
        width: 100vw;
    }

    .imageContainer h1 {
        margin-bottom: 0.5em;
        font-size: 1.8em;
    }

    .imageHeader {
        width: 33.5em;
        font-size: 0.8em;
    }

    .carousel-inner {
        display: flex;
        justify-content: center;
    }
    
    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }
    
    .graphicOne {
        width: 12em;
    }
    
    .videoOne {
        width: 15em;
    }
    
    .graphicTwo {
        width: 12em;
    }
    
    .videoTwo {
        width: 15em;
    }
    
    .graphicThree {
        width: 12em;
    }
    
    .videoThree {
        width: 15em;
    }

    /* ----------------- Contact Container Styling ----------------- */

    .formContainer {
        margin-top: 2em;
        margin-bottom: 2em;
        padding: 1em;
        width: 28em;
    }

    .formContainer > .formContainerText > h3 {
        font-size: 2em;
    }

    .formContainer > .formContainerText {
        margin-bottom: 2em;
    }

    .form {
        font-size: 14px;
        padding-left: 1em;
        padding-right: 1em;
    }

    .formContainer > .form > form > input {
        width: 90%;
        margin-bottom: 2em;
    }

    .formContainer > .form > form > textarea {
        width: 90%;
        height: 6em;
        margin-bottom: 2em;
    }

    .formContainer > .form > form > select {
        width: 90%;
        margin-bottom: 2em;
    }

    .formContainer > .form > form > button {
        width: 30%;
        padding: 0.5em 1em;
        font-size: 0.9em;
        margin-top: 2em;
        border-radius: 0.5em;
        margin-left: auto;
        margin-right: auto;
    }

    .contactUsContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2.5em;
        position: relative;
        left: 16%;
        margin-top: 3em;
        padding: 3em 4em;
        width: auto;
        height: 40em;
    }

    .innerContactContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .innerText {
        gap: 1em;
        font-weight: 700;
        font-size: 18px;
    }

    .innerInfo {
        margin-top: 0.8em;
        padding-left: 2.5em;
        font-size: 16px;
    }

    .emailSent {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: white;
    }
    
    .emailError {
        margin-top: 10px;
        font-size: 16px;
        font-weight: 500;
        color: white;
    }

    /* ----------------- Events Container Styling ----------------- */

    .eventsContainer {
        margin-bottom: 3em;
    }

    .eventsInnerContainer h1 {
        font-size: 1.8em;
        text-align: center;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .eventsTextContainer p {
        font-size: 1.4em;
        text-align: center;
    }

    .eventsTextContainer img {
        width: 100vw;
    }

    /* ----------------- Footer Styling ----------------- */

    .footerContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .footer {
        font-size: 14px;
    }
}

@media only screen and (min-width: 321px) and (max-width: 480px) {

    /* ----------------- Navbar Styling ----------------- */

    .logo {
        width: 10em;
    }

    .navLink {
        font-size: 14px;
        text-decoration: none;
        color: rgba( 0,0,0 , 0.65);
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .login-btn {
        font-size: 14px;
    }

    /* ----------------- Main Body Styling ----------------- */

    .bottomRectangle {
        /* left: 20em;  */
        margin-top: 25em;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0em;
        /* height: 83em; */
        height: 40em;
        width: 16em;
    }
    
    .topRectangle {
        height: 22em;
        width: 15em;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15em;
        /* top: 12em; */
        /* left: 250px;  */
        box-shadow: 0 0 0.8em #000;
    }

    .blueBoxText {
        padding: 1em;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 0.8em;
    }

    .blueBoxImage {
        z-index: 3;
        width: 14em;
        margin-bottom: 1em;
    }

    .videoContainer {
        margin-top: 2em;
        margin-left: 0em;
    }

    .videoContainer video {
        width: 300px;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        gap: 1em;
        /* margin-top: -70em; */
        margin-top: -27em;
        align-items: center;
        width: 100vw;
    }

    .innerFirstContainer {
        flex-direction: column;
        gap: 1em;
        width: 17em;
        text-align: center;
    }

    .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 0em;
        padding-bottom: 1em;
    }

    .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 0em;
        padding-top: 1em;
    }

    .learnMoreBtn {
        padding: 0.5em 1em;
        margin-left: 0em;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        font-size: 12px;
    }

    .innerFirstContainerText {
        width: 18em;
        padding-left: 1em !important;
        padding: 1.5em 1.8em 0 1em;
    }

    .innerFirstContainerText strong {
        font-size: 16px;
    }
    .innerFirstContainerText span {
        font-size: 14px;
    }

    /* .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 0em;
        padding: 1em 1em 0 1em;
    } */

    /* .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 0em;
        padding: 0em 1em 1em 1em;
    } */

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    .innerFirstContainer p {
        font-size: 0.8em;
    }

    .innerFirstContainer img {
        width: 14em;
    }

    #firstImg {
        width: 12em;
    }

    #thirdImg {
        width: 15em;
    }

    #fourthImg {
        width: 12em;
    }

    .fixed-button img {
        width: 30px;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 0em;
        margin-bottom: 0em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 18em;
        margin-right: 0em;
        margin-top: 6em;
        margin-bottom: 2em;
    }

    /* ----------------- Textbox Styling ----------------- */

    .textBox {
        margin-top: 0em;
        flex-wrap: wrap;
        /* width: 500px; */
        width: 300px;
        height: 70em;
        z-index: 2;
        gap: 0em;
    }

    .mainBoxText {
        height: 15em;
        width: 500px;
    }

    .mainBoxText > h5 {
        font-size: 0.9em;
    }

    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.7em;
    }

    /* ----------------- Image Container Styling ----------------- */

    .imageContainer {
        margin-top: 2em;
        text-align: center;
        padding: 1em;
        width: 100vw;
    }

    .imageContainer h1 {
        margin-bottom: 0.5em;
        font-size: 1.5em;
    }

    .imageHeader {
        width: fit-content;
        font-size: 0.8em;
        margin-left: auto;
        margin-right: auto;
    }

    .carousel-inner {
        display: flex;
        justify-content: center;
    }
    
    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em;
    }

    /* .videoContainerTwo {
        position: relative;
        width: 100%;
        max-width: 15em;
        background-color: black;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    
    .videoContainerTwo::before {
        content: '';
        display: block;
        padding-top: 56.25%;
    }
    
    .videoContainerTwo video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: black;
        box-shadow: 0 0 0.8em #000;
    } */
    
    /* .graphicOne {
        width: 8em;
    }
    
    .videoOne {
        width: 10em;
    }
    
    .graphicTwo {
        width: 8em;
    }
    
    .videoTwo {
        width: 10em;
    }
    
    .graphicThree {
        width: 8em;
    }
    
    .videoThree {
        width: 10em;
    } */

    /* ----------------- Contact Container Styling ----------------- */

    .formContainer {
        margin-top: 2em;
        margin-bottom: 2em;
        padding: 1em;
        width: 19em;
    }

    .formContainer > .formContainerText > h3 {
        font-size: 1.5em;
    }

    .formContainer > .formContainerText {
        margin-bottom: 1em;
    }

    .form {
        font-size: 12px;
    }

    .formContainer > .form > form > input {
        width: 90%;
        margin-bottom: 1em;
    }

    .formContainer > .form > form > textarea {
        width: 90%;
        height: 4em;
        margin-bottom: 1em;
    }

    .formContainer > .form > form > select {
        width: 90%;
        margin-bottom: 1em;
    }

    .formContainer > .form > form > button {
        width: 30%;
        padding: 0.5em 1em;
        font-size: 0.9em;
        margin-top: 2em;
        border-radius: 0.5em;
        margin-left: auto;
        margin-right: auto;
    }

    .contactUsContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2.5em;
        position: relative;
        left: 16%;
        margin-top: 3em;
        padding: 3em 4em;
        width: auto;
        height: 40em;
    }

    .innerContactContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .innerText {
        gap: 1em;
        font-weight: 700;
        font-size: 18px;
    }

    .innerInfo {
        margin-top: 0.8em;
        padding-left: 2.5em;
        font-size: 16px;
    }

    .emailSent {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 500;
        color: white;
    }
    
    .emailError {
        margin-top: 10px;
        font-size: 14px;
        font-weight: 500;
        color: white;
    }

    .contactSection p {
        display: flex;
        justify-content: center;
        font-size: 1.1em;
    }

    /* ----------------- Events Container Styling ----------------- */

    .eventsContainer {
        margin-bottom: 3em;
    }

    .eventsInnerContainer h1 {
        font-size: 1.4em;
        text-align: center;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .eventsTextContainer p {
        font-size: 1.1em;
        text-align: center;
    }

    .eventsTextContainer img {
        width: 100vw;
    }

    /* ----------------- Footer Styling ----------------- */

    .footerContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .footer {
        font-size: 12px;
    }
}

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

    /* ----------------- Navbar Styling ----------------- */

    .logo {
        width: 10em;
    }

    .navLink {
        font-size: 14px;
        text-decoration: none;
        color: rgba( 0,0,0 , 0.65);
        padding-top: 0.5em;
        padding-bottom: 0.5em;
    }

    .login-btn {
        font-size: 14px;
    }

    /* ----------------- Main Body Styling ----------------- */

    .bottomRectangle {
        /* left: 20em;  */
        margin-top: 25em;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0em;
        height: 40em;
        width: 16em;
    }
    
    .topRectangle {
        height: 22em;
        width: 15em;
        margin-left: auto;
        margin-right: auto;
        margin-top: 15em;
        box-shadow: 0 0 0.8em #000;
    }

    .blueBoxText {
        padding: 1em;
    }

    .secondText {
        /* font-size: 1.8em; */
        font-size: 0.8em;
    }

    .blueBoxImage {
        z-index: 3;
        width: 14em;
        margin-bottom: 1em;
    }

    .videoContainer {
        margin-top: 2em;
        margin-left: 0em;
    }

    .videoContainer video {
        width: 300px;
    }

    /* ----------------- First Container Styling ----------------- */

    .firstContainer {
        gap: 1em;
        margin-top: -27em;
        display: flex;
        align-items: center;
        width: 100vw;
    }

    .innerFirstContainer {
        flex-direction: column;
        gap: 1em;
        /* width: 17em; */
        text-align: center;
    }

    .innerFirstContainer {
        margin-right: 0em !important;
        padding-bottom: 1em;
    }

    /* .innerFirstContainer:nth-of-type(1),
    .innerFirstContainer:nth-of-type(3) {
        margin-right: 0em;
        padding-bottom: 1em;
    } */

    /* .innerFirstContainer:nth-of-type(2),
    .innerFirstContainer:nth-of-type(4) {
        margin-left: 0em;
        padding-top: 1em;
    } */

    /* .learnMoreBtn {
        padding: 0.5em 1em;
        margin-left: 0em;
        display: flex;
        margin-left: auto;
        margin-right: auto;
        font-size: 12px;
    } */

    .innerFirstContainerText strong {
        font-size: 16px;
    }
    .innerFirstContainerText span {
        font-size: 14px;
    }

    .innerFirstContainerText {
        width: 18em;
        padding-left: 1em !important;
        padding: 1.5em 1em 0 1em;
    }

    /* .innerFirstContainerText:nth-of-type(1),
    .innerFirstContainerText:nth-of-type(3) {
        padding-left: 0em;
        padding: 1em 1em 0 1em;
    } */

    /* .innerFirstContainerText:nth-of-type(2),
    .innerFirstContainerText:nth-of-type(4) {
        padding-right: 0em;
        padding: 0em 1em 1em 1em;
    } */

    .innerFirstContainerText span {
        padding-left: 0em;
    }

    .innerFirstContainer p {
        font-size: 0.8em;
    }

    .innerFirstContainer img {
        width: 14em;
    }

    #firstImg {
        width: 12em;
    }

    #thirdImg {
        width: 15em;
    }

    #fourthImg {
        width: 12em;
    }

    .fixed-button img {
        width: 30px;
    }

    /* ----------------- Hub Graphic Styling ----------------- */

    #hubImgContainer {
        display: flex;
        justify-content: center;
        margin-top: 0em;
        margin-bottom: 0em;
    }

    .circularGraphic {
        display: flex;
        justify-content: center;
        width: 18em;
        margin-right: 0em;
        margin-top: 3em;
    }

    /* ----------------- Textbox Styling ----------------- */

    .textBox {
        margin-top: 0em;
        flex-wrap: wrap;
        width: 300px;
        height: 70em;
        z-index: 2;
        gap: 0em;
    }

    .mainBoxText {
        height: 15em;
        width: 500px;
    }

    .mainBoxText > h5 {
        font-size: 0.9em;
    }

    .mainBoxText p, 
    .mainBoxText ul {
        font-size: 0.7em;
    }

    /* ----------------- Image Container Styling ----------------- */

    .imageContainer {
        margin-top: 2em;
        text-align: center;
        padding: 1em;
        width: 100vw;
    }

    .imageContainer h1 {
        margin-bottom: 0.5em;
        font-size: 1.5em;
    }

    .imageHeader {
        font-size: 0.8em;
        width: fit-content;
    }

    .carousel-inner {
        display: flex;
        justify-content: center;
    }
    
    .videoGraphicSection {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 2em;
    }

    /* .videoContainerTwo {
        position: relative;
        width: 100%;
        max-width: 15em;
        background-color: black;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    
    .videoContainerTwo::before {
        content: '';
        display: block;
        padding-top: 56.25%;
    }
    
    .videoContainerTwo video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
        background-color: black;
        box-shadow: 0 0 0.8em #000;
    } */
    
    /* .graphicOne {
        width: 5em;
    }
    
    .videoOne {
        width: 10em;
    }
    
    .graphicTwo {
        width: 5em;
    }
    
    .videoTwo {
        width: 10em;
    }
    
    .graphicThree {
        width: 5em;
    }
    
    .videoThree {
        width: 10em;
    } */

    /* ----------------- Contact Container Styling ----------------- */

    .formContainer {
        margin-top: 2em;
        margin-bottom: 2em;
        padding: 1em;
        width: 19em;
    }

    .formContainer > .formContainerText > h3 {
        font-size: 1.5em;
    }

    .formContainer > .formContainerText {
        margin-bottom: 1em;
    }

    .form {
        font-size: 12px;
    }

    .formContainer > .form > form > input {
        width: 90%;
        margin-bottom: 1em;
    }

    .formContainer > .form > form > textarea {
        width: 90%;
        height: 4em;
        margin-bottom: 1em;
    }

    .formContainer > .form > form > select {
        width: 90%;
        margin-bottom: 1em;
    }

    .formContainer > .form > form > button {
        width: 30%;
        margin-left: auto;
        margin-right: auto;
        padding: 0.5em 1em;
        font-size: 0.9em;
        margin-top: 2em;
        border-radius: 0.5em;
    }

    .contactUsContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 2.5em;
        position: relative;
        left: 16%;
        margin-top: 3em;
        padding: 3em 4em;
        width: auto;
        height: 40em;
    }

    .innerContactContainer {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }

    .innerText {
        gap: 1em;
        font-weight: 700;
        font-size: 18px;
    }

    .innerInfo {
        margin-top: 0.8em;
        padding-left: 2.5em;
        font-size: 16px;
    }

    .emailSent {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 500;
        color: white;
    }
    
    .emailError {
        margin-top: 10px;
        font-size: 12px;
        font-weight: 500;
        color: white;
    }

    .contactSection p {
        display: flex;
        justify-content: center;
        font-size: 1em;
    }

    /* ----------------- Events Container Styling ----------------- */

    .eventsContainer {
        margin-bottom: 3em;
    }

    .eventsInnerContainer h1 {
        font-size: 1.4em;
        text-align: center;
        padding-left: 0.5em;
        padding-right: 0.5em;
    }

    .eventsTextContainer p {
        font-size: 1.1em;
        text-align: center;
    }

    .eventsTextContainer img {
        width: 100vw;
    }

    /* ----------------- Footer Styling ----------------- */

    .footerContainer {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .footer {
        font-size: 11px;
    }
}