/*//////////////////////////////////////////////////////////////////////////////////////////*/

/* MOBILE LAYOUT */

/*//////////////////////////////////////////////////////////////////////////////////////////*/

.hamburger-menu {
display: none;
}

.line {
width: 2.5em;
height: 0.2em;
background-color: var(--color-dark-blue);
margin: 7px 0;
border-radius: 1em;
transition: transform 0.3s ease, height 0.3s ease;
}

.line-animation-1 {
transform: rotate(45deg) translate(5px, 10px);
height: 0.25em;
}

.line-animation-2 {
opacity: 0;
}

.line-animation-3 {
transform: rotate(-45deg) translate(5px, -10px);
height: 0.25em;
}

.mobile-menu {
position: fixed;
transform: translateY(-0.45rem);
left: 100%;
width: 100%;
height: 100%;
background-color: var(--color-dark-blue);
opacity: 0;
z-index: 1000;
transition: opacity 0.3s ease, right 0.3s ease;
}

.mobile-menu-content {
position: absolute;
top: 80px;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
padding-top: 15em;
}

.mobile-menu a {
display: block;
padding-bottom: 20px;
padding-top: 20px;
color: var(--color-white);
text-decoration: none;
}

.mobile-menu.active {
display: block;
}

.mobile-footer-bar {
display: none;
}

@media (max-width: 1200px) {

.dropdown-content-mobile {
display: none;
}

.banner {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
line-height: 1.5;
box-sizing: border-box;
top: 0;
position: fixed;
z-index: 1002;
max-height: 80vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}


.navbar-right {
display: none;
}

.hamburger-menu {
display: block;
cursor: pointer;
position: absolute;
right: 2.5em;
}

.hamburger-menu.active .line:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.active .line:nth-child(2) {
opacity: 0;
}

.hamburger-menu.active .line:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}

.mobile-menu {
position: fixed;
left: 100%;
top: 90px;
gap: 0;
transition: 0.25s;
overflow-y: auto;
max-height: calc(100vh - 40px);
}

.mobile-menu.active {
left: 0;
}

.mobile-dropdown {
position: relative;
display: flex;
justify-content: center;
}

.dropdown-content-mobile {
display: none;
position: absolute;
top: 100%;
width: 100%;
z-index: 999;
background-color: var(--color-dark-blue);
}

.dropdown-content-mobile a {
white-space: nowrap;
text-align: center;
}

.mobile-dropdown.active .dropdown-content-mobile {
display: flex;
flex-direction: column;
align-items: center;
}

.navbar-left {
padding-left: 0em;
}

.navbar-logo {
padding-left: 2rem;
}

.headerContentContainer {
padding: 0em 4em;
}

.imageColumn {
display: none;
}

.contentContainer, .footer {
padding-left: 0em;
padding-right: 0em;
}

.contentContainer {
flex-wrap: wrap;
}

.contentTitle {
text-align: center;
padding-top: 3.5em;
padding-bottom: 0.5em;
font-weight: 600;
}

.contentSubtitle {
text-align: center;
padding: 0 4em;
}

.button-info-container {
    justify-content: center;
}

.IDme-button-container {
display: flex;
justify-content: center;
padding-top: 0em;
margin-right: 0;
}

.IDme-button img {
width: 16em;
}

.info-icon-container {
    display: none;
}

.under18Text {
    display: block;
}

.tiny-text {
text-align: center;
justify-content: center;
padding-bottom: 3em;
}

.accordion {
flex: initial;
max-width: initial;
}

.accordion .contentBox .label {
padding: 15px;
}

.footer-links {
padding-left: 0rem;
order: 2;
}

footer {
padding: 1rem;
padding-top: 2rem;
display: block;
}

/* Adjust viewport height for mobile devices to account for footer-bar */
body {
padding-bottom: 85px; /* Set equal to footer-bar height */
}

.mobile-footer-background {
position: fixed;
bottom: 0px;
left: 0;
width: 100%;
background-color: var(--color-white);
height: 85px;
z-index: 998;
box-shadow: 0px -10px 10px rgba(0, 0, 0, 0.065);
}

.mobile-footer-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 80px;
z-index: 999;
display: flex;
justify-content: space-between;
}

.footer-button {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--color-white);
cursor: pointer;
text-decoration: none;
}

.footer-button span {
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
margin-top: 8px;
}
}




/*//////////////////////////////////////////////////////////////////////////////////////////*/

/* WIDESCREEN LAYOUT */

/*//////////////////////////////////////////////////////////////////////////////////////////*/

@media (min-width: 1200px) {
    
    .headerContentContainer,
    .contentContainer, .navbar-left, .navbar-right, .footer {
        padding-left: 12%;
        padding-right: 12%;
    }

    .landingPageHeader {
        height: 600px;
    }

    .IDme-button img {
        padding-top: 2em;
        width: 18em;
    }

    .imageColumn img {
        width: 29em;
        height: auto;
        transform: translateY(45px);
    }

    .backgroundBannerWhite {
        padding: 2.5em 1em;
    }

    
    /* Additional adjustments for very wide layouts */
    .contentTitle {
        font-size: 3em; /* Increase title size for better visibility on widescreens */
    }

    footer {
        height: 180px;
    }
}