body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    background-color: #121212;
}
.bod {
    background: url('beachtheme.jpeg') no-repeat;
    background-size: cover;
    background-position: center;
}

.header {
    position: 'fixed';
    top: 0;
    left: 0;
    width: 90%;
    padding: 20px 100px;
    background: #005278;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    }
.logo {
    font-size: 32px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}
.downloadContainer {
    background-color: #005278;
    border-radius: 30px;
    margin-top: 5%;
    height: 6vh;
    width: 25vw;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
}
@media (max-width: 768px) {

    /* Adjust the breakpoint as needed */
    .downloadContainer {
        width: 80vw;
        height: 8vh;
        /* Make the button wider on smaller screens */
    }
}
.downloadText {
    padding: 30px;
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif
}

a {
     text-decoration: none;
     color: #121212;
}
p, b, li, h1, h2, h3, a { 
    font-family: Arial, Helvetica, sans-serif;
    color: #fafafa;
}
.logoContainer {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex: 1;
    height: 90vh;
    flex-direction: row;
}
.suppText {
    color: #fafafa;
    text-align: center;
    margin-top: 5%;
    width: 25vw;
    word-spacing: 10px;
    font-size: x-large;
    font-family: Arial, Helvetica, sans-serif
}
@media (max-width: 768px) {

    /* Adjust the breakpoint as needed */
    .suppText {
        width: 80vw;
        height: 8vh;
        /* Make the button wider on smaller screens */
    }
}
.mainContainer {
    display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
}
.navbar a {
    font-size: 18.43px;
    color: #fff;
    padding: 5px;
    font-weight: 500;
    text-decoration: none;
}
.comingSoon {
    font-size: 55.3px;
    color: #9edaff;
    align-self: center;
}
.comingSoonContainer {
    justify-content: center;
    display: flex;
    height: 700px;
}
.welcome {
    font-weight: 500; font-size: xx-large; padding: 5;
}
.secondaryHeader {
font-size: 19.20;
        padding: 5;
        font-weight: 600;

}
.contactContainer {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 30vh;
    flex-direction: column;
}
.answer {
    font-size: 18.43px;
    padding-top: 2.5%;
}
#message {
    font-size: 18.43px;
    width: 60%;
}
#myForm {
    text-align: center;
}
footer {
    padding: 10px;
    text-align: center;
    height: 5vh;
}
@media (max-width: 768px) {

    /* Adjust the breakpoint as needed */
    .navbar {
        flex-direction: column;
        display: flex;
        align-items: center;
        /* Make the button wider on smaller screens */
    }
}
.navbar {
    margin-top: 1%;
}
footer p {
    color: #fafafa;
    margin: 0;
    text-align: center;
    align-self: center;
    margin-top: 1%;
    font-family: Arial, Helvetica, sans-serif;
   
}
.footerContainer {
    position: relative;
    bottom: 0;
    left: 50%;
    /* Start in the middle */
    transform: translateX(-50%);
    /* Shift it back by half its width */
    width: 100%;
    /* Optional: Make it span the full width */
}

.footerSuppContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.content-wrapper {
    flex: 1;
}
.faqsection {
            /* Assuming this is your container's class */
            width: 40vw;
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin: 0 auto;
            flex: 1;
            /* Add this line to center horizontally */
}
@media (max-width: 768px) {

    /* Adjust the breakpoint as needed */
    .faqsection {
        width: 80vw;
        /* Make the button wider on smaller screens */
    }
}
.dropdown {
    border-bottom: 1px solid #ccc;
        width: 40vw;
        /* Adjust as needed */
}
@media (max-width: 768px) {

    /* Adjust the breakpoint as needed */
    .dropdown {
        width: 80vw;
        /* Make the button wider on smaller screens */
    }
}
.dropdown-header {
    padding-top: 35px;
    padding-bottom: 35px;
    padding-right: 10px;
    font-size: large;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fafafa;
    font-family: Arial, Helvetica, sans-serif;
}

.arrow {
    transition: transform 0.3s ease;
    /* Add a transition for smooth rotation */
}

.down {
    transform: rotate(0deg);
}

.up {
    transform: rotate(180deg);
}
.dropdown-content {
    display: none;
    padding: 10px;
    font-size: x-large;
    border-top: 1px solid #ccc;
    background-color: #121212;
}
.center {
    text-align: center;
}