/* Hide volume controls */
video::-webkit-media-controls-volume-slider,
video::-webkit-media-controls-mute-button {
    display: none !important;
}

/* Keep play button and scrubber visible */
video::-webkit-media-controls-panel {
    display: flex !important;
}

video::-webkit-media-controls-play-button {
    display: block !important;
}

/* Hide unwanted controls */
video::-webkit-media-controls-fullscreen-button,
video::-webkit-media-controls-picture-in-picture-button,
video::-webkit-media-controls-download-button {
    display: none !important;
}

html,
body {
    touch-action: pan-y;
}

@font-face {
    font-family: 'Swiss 721 BT';
    src: url('../fonts/Swiss 721 BT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    background-color: #EFEBD7;
}


a {
    text-decoration: none;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #EFEBD7;
    z-index: 1000;
}

.loader--hidden {
    opacity: 0;
    visibility: hidden;
}

.loader::after {
    content: "";
    width: 75px;
    height: 75px;
    border: 15px solid #dddddd;
    border-top-color: #F1C17F;
    border-radius: 50%;
    animation: loading 0.75s ease infinite;
    z-index: 1001;
}

@keyframes loading {
    from {
        transform: rotate(0turn);
    }

    to {
        transform: rotate(1turn);
    }
}

.NLHFLOGO {
    width: 248px;
    height: 248px;
    flex-shrink: 0;
    position: fixed;
    top: 25px;
    right: 25px;
}

h3,
h2 {
    color: black;
    font-family: "Swiss 721 BT";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-align: center;
}

.screensaver {
    width: 100%;
    height: 100vh;
    background: #EFEBD7;

}

.screensaver-bg {
    width: 100%;
    height: auto;

    img {
        width: 100%;
        height: inherit;
        border-bottom: 5px solid #F1C17F;

    }


}

.title {
    margin-top: 18px;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;

    h1 {
        align-self: stretch;
        color: #232021;
        font-family: "Avenir";
        font-size: 80px;
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        text-align: center;
        text-transform: uppercase;
        margin-bottom: 0px;
    }

    p {
        color: #000;
        font-family: "Swiss 721 BT";
        font-size: 24px;

        font-weight: 100;
        line-height: normal;
        margin-bottom: 0px;
        margin-top: 24px;
    }

    a {
        border-radius: 35.5px;
        background: #1A1A1A;
        display: flex;
        width: 302px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: White;
        /* Body */
        font-family: "Swiss 721 BT";
        font-size: 28px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-top: 24px;
        padding-bottom: 24px;

    }
}

.start-buttons {
    display: flex;
    justify-content: space-evenly;
    width: 50%;
    margin-top: 60px;
}

.fp-bg {
    width: 100%;
    height: 100%;

    img {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        top: 0;
        left: 0;
    }
}

.side-panel {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: auto;

    img {
        object-fit: cover;
        height: inherit;
        width: inherit;
    }

    .text {
        position: absolute;
        width: 73%;
        height: 100%;
        top: 0;
        left: 80px;
        display: flex;
        flex-direction: column;
        justify-content: center;


        h1 {
            color: #FDFCF8;
            /* Title */
            font-family: "Avenir";
            font-size: 80px;
            font-style: normal;
            font-weight: 300;
            line-height: normal;
            text-transform: uppercase;
            margin-bottom: 27px;
        }

        p {
            color: #FAF6EF;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 24px;
            font-style: normal;
            font-weight: 100;
            line-height: 36px;
            width: inherit;
            /* 150% */
        }
    }

    .videos {
        position: absolute;
        top: 72px;
        left: 300px;
    }



    .video-button {
        border-radius: 20px;
        border: none;
        background: #1A1A1A;
        display: flex;
        width: 150px;
        height: 75px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: White;
        /* Body */
        font-family: "Swiss 721 BT";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        padding-top: 24px;
        padding-bottom: 24px;
        box-shadow: 0px 250px 70px 0px rgba(0, 0, 0, 0.00), 0px 160px 64px 0px rgba(0, 0, 0, 0.01), 0px 90px 54px 0px rgba(0, 0, 0, 0.05), 0px 40px 40px 0px rgba(0, 0, 0, 0.09), 0px 10px 22px 0px rgba(0, 0, 0, 0.10);

    }

    .video-button.active {

        border: 2px solid var(--Secondary-orange, #F1C17F);

    }


    .play-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50px;
        /* Adjust as needed */
        height: auto;
        pointer-events: none;
        /* Ensures it doesn’t interfere with clicking on the thumbnail */
    }

    .parent-category {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50px;
        left: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        img {
            object-fit: cover;
            width: 300px;
            height: auto;
            border-radius: 50%;
            box-shadow: 0px 253.096px 70.962px 0px rgba(0, 0, 0, 0.00), 0px 163.212px 63.865px 0px rgba(0, 0, 0, 0.01), 0px 92.25px 54.404px 0px rgba(0, 0, 0, 0.05), 0px 40.212px 40.212px 0px rgba(0, 0, 0, 0.09), 0px 9.462px 21.288px 0px rgba(0, 0, 0, 0.10);

        }


        h3,
        h2 {
            color: white;
            font-family: "Swiss 721 BT";
            font-size: 40px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            text-align: center;
            margin-top: 32px;
            margin-bottom: 0px;

        }

        h3 {
            margin-top: 20px;
        }

    }
}

.side-panel-image {
    border-right: 5px solid var(--Secondary-orange, #F1C17F);

}

.sub-fields {
    position: absolute;
    width: 100%;
    height: calc(100% - 180px);
    top: 180px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.sections {

    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    img {
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0px 253.096px 70.962px 0px rgba(0, 0, 0, 0.00), 0px 163.212px 63.865px 0px rgba(0, 0, 0, 0.01), 0px 92.25px 54.404px 0px rgba(0, 0, 0, 0.05), 0px 40.212px 40.212px 0px rgba(0, 0, 0, 0.09), 0px 9.462px 21.288px 0px rgba(0, 0, 0, 0.10);

    }


    h3,
    h2 {
        color: #000;
        font-family: "Swiss 721 BT";
        font-size: 40px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-align: center;
        margin-top: 32px;
        margin-bottom: 0px;

    }

    h3 {
        margin-top: 20px;
    }
}

.links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.navigation {
    position: fixed;
    top: 72px;
    left: 48px;
    z-index: 999;

    img {
        margin-right: 56px;
    }

}

.cat {

    position: fixed;
    left: 471px;
    top: 0px;
    width: calc(1920px - 471px);
    height: calc(100% - 75px);
    display: flex;
    row-gap: 0px;
    column-gap: 0px;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding-top: 75px;
    padding-bottom: 75px;
    overflow-y: auto;

    a {
        width: 375px;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    img {
        object-fit: cover;
        width: 100%;
        height: 100%;
        border-radius: 25px;
        box-shadow: 0px 253.096px 70.962px 0px rgba(0, 0, 0, 0.00), 0px 163.212px 63.865px 0px rgba(0, 0, 0, 0.01), 0px 92.25px 54.404px 0px rgba(0, 0, 0, 0.05), 0px 40.212px 40.212px 0px rgba(0, 0, 0, 0.09), 0px 9.462px 21.288px 0px rgba(0, 0, 0, 0.10);
        margin-bottom: 24px;
    }



    p {
        color: rgb(83, 83, 83);
        font-family: "Swiss 721 BT";
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        text-align: center;
        margin-top: 8px;
        margin-bottom: 0px;

    }

    h2 {
        margin-top: 8px;
        font-size: 32px;
    }

    .item {
        width: 350px;
        height: 450px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: start;
        text-align: center;


    }
}

.item-image {
    width: 250px;
    height: 250px;
}

.gallery-contents {
    position: absolute;
    top: 32px;
    left: 500px;


}



::-webkit-scrollbar {
    width: 0px;
}

.gallery {
    width: calc(100% - 32px);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Adjust columns based on container width */
    grid-gap: 10px;
    padding-bottom: 32px;
}

.gallery-item {
    width: calc(100%);
    aspect-ratio: 452/238;
    /* Makes the div a square */
    overflow: hidden;
    background-color: #f0f0f0;
    object-fit: cover;
    box-shadow: 0px 311px 87px 0px rgba(0, 0, 0, 0.00), 0px 199px 80px 0px rgba(0, 0, 0, 0.01), 0px 112px 67px 0px rgba(0, 0, 0, 0.05), 0px 50px 50px 0px rgba(0, 0, 0, 0.09), 0px 12px 27px 0px rgba(0, 0, 0, 0.10);
    /* Fallback background */
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures image covers the div without stretching */
}

.gallery-item.lazy {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}

.gallery-item.lazy:not([src]) {
    background-color: #f0f0f0;
    /* Placeholder background */
}

.gallery-item {
    opacity: 1;
}

.video-item {
    position: relative;
}

.play-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    /* Adjust as needed */
    height: auto;
    pointer-events: none;
    /* Ensures it doesn’t interfere with clicking on the thumbnail */
}


.gallery-button {
    color: #000;
    font-family: "Swiss 721 BT";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
    text-align: center;
    display: flex;
    width: 400px;
    height: 140px;
    padding: 20px;
    margin-bottom: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: var(--primary-light, #EFEBD7);
    border: none;
    box-shadow: 0px 250px 70px 0px rgba(0, 0, 0, 0.00), 0px 160px 64px 0px rgba(0, 0, 0, 0.01), 0px 90px 54px 0px rgba(0, 0, 0, 0.05), 0px 40px 40px 0px rgba(0, 0, 0, 0.09), 0px 10px 22px 0px rgba(0, 0, 0, 0.10);
}

.gallery-button.active {

    border: 5px solid var(--Secondary-orange, #F1C17F);

}

/* Overlay styling */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    touch-action: none;
}

.overlay-image-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 80%;
    height: 80%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-image-container img {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.2s ease;
}

.close {
    position: fixed;
    width: 96px;
    height: 109px;
    top: 20px;
    right: 20px;
    color: white;
    cursor: pointer;
    z-index: 1001;
}



.nav-button {

    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 18px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

#prev-button {
    left: 10px;
}

#next-button {
    right: 10px;
    transform: rotateY(180deg);
}