html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Poppins', sans-serif;
    overflow: hidden; /* Prevent scrolling on the body */
}

a {
    color: black;
}

.container-fluid {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden; /* Prevent container from scrolling */
}

.row {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.noscroll, .scroll {
    box-sizing: border-box;
}

/* Banner and Media styles */
.noscroll {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50vh; /* Default for portrait mode */
}

.scroll {
    flex: 1;
    overflow-y: auto; /* Enable scrolling for content */
    padding: 20px;
}

/* Landscape orientation */
@media (orientation: landscape) {
    .row {
        flex-direction: row;
    }

    .noscroll {
        width: 50%;
        height: 100vh;
    }

    .scroll {
        width: 50%;
        height: 100vh;
    }

    .video-container {
        flex: 1;
        min-height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video-container video {
        max-height: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1; /* Ensure video is square */
    }
}

/* Portrait or square orientation */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
    .noscroll {
        width: 100%;
        height: 45vh;
    }

    .scroll {
        width: 100%;
        height: 55vh;
    }

    .video-container {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .video-container video {
        max-height: 100%;
        max-width: 100%;
        aspect-ratio: 1 / 1; /* Ensure video is square */
    }
}

/* Banner section */
.banner-area {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: -10px;
}

.accessibility-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;

}

.control-icon {
    scale: 0.9;
    max-height: 60px;
    margin-top: -10px;
}
/* Video area section */
.video-container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Ensure nothing goes outside the container */
    background-color: transparent;
    z-index: -1;
    top: 100px;
    min-height:30vh;
}

.video-container video {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Ensure video fits within the container */
}

.media-player {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    max-height: 50px;
    margin-top: -35px;
}

/* Text Content section */
.content {
    padding: 20px;
}

.text > *:hover {
    background-color: #ffff94;
    opacity: 80%;
}

.highlighted {
    background-color: #fdd134; /* Or any other style you prefer for highlighting */
}

/* Footer */
.center-justify {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 10px;
}

/*************************** Accessibility Controls */
.accessibility-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    max-width: 100%; /* Ensure it doesn't overflow its container */
    flex-wrap: nowrap; /* Prevent wrapping */
    background-color: transparent;

}

.accessibility-controls picture {
    flex: 1 1 auto; /* Allow icons to grow and shrink */
    max-width: 25%; /* Limit the size of each icon */
}

.accessibility-controls img {
    max-width: 100%; /* Ensure images scale down */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure images fit within their container */
}

/*************************** Media Player Styling */
.media-player {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 10px;
    background-color: transparent;
    height: 30px;
    padding-bottom: 60px;
    margin: 20px;
}

.media-player a {
    font-size: 40px;
    color: #fbb000;
    cursor: pointer;
    text-decoration: none !important;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.media-player a:hover, .media-player a:active, .media-player a:focus {
    color: #001514;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 200, 'opsz' 20;
}

.accessible-content {
}

.copyright-section {
    justify-content: center;
    gap: 10px;
    padding: 10px;
    z-index: 2;
    height: 30px;
    position : fixed;
    bottom : 10px;
    z-index: -1;
}


#sign-icon.active {
    filter: grayscale(0)
}

#sign-icon {
    filter: grayscale(1)
}

#text-icon.active {
    filter: grayscale(1)
}

#text-icon {
    filter: grayscale(0)
}

#speak-icon.active {
    filter: grayscale(1)
}

#speak-icon {
    filter: grayscale(0)
}

.large-text {
    font-size: 200%;
    font-family: 'verdana', sans-serif;
    font-weight: 400;
    zoom: 150%;
}

.easy-read #cognitive-icon {
    filter: grayscale(1)
}