*{

    font-family: montserrat;

    margin: 0;

    padding: 0;

}



.slides {

    list-style: none;

    margin-top: 0;



}



.slides,

.slides::after {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    z-index: 0;

}

.slides li span{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    color: transparent;

    background-size: cover;

    background-position: 50% 50%;

    background-repeat: no-repeat;

    opacity: 0;

    z-index: 0;

    animation: animate 25s linear infinite 0s;

}

.slides li:nth-child(1) span{

    background-image: url(bc1.webp);

}

.slides li:nth-child(2) span{

    background-image: url(bc2.webp);

    animation-delay: 5s;



}

.slides li:nth-child(3) span{

    background-image: url(bc3.webp);

    animation-delay: 10s;



}

.slides li:nth-child(4) span{

    background-image: url(bc4.webp);

    animation-delay: 15s;



}

.slides li:nth-child(5) span{

    background-image: url(bc5.webp);

    animation-delay: 20s;



}

.slides li:nth-child(6) span{

    background-image: url(bc6.webp);

    animation-delay: 25s;



}



@keyframes animate {

    0%{

        opacity: 0;

    }

    8%{

        opacity: 1;

    }

    17%{

        opacity: 1;

    }

    25%{

        opacity: 0;

    }

    100%{

        opacity: 0;

    }

}





.navbar{

    background-color: transparent;

    overflow: hidden;

    position: fixed;

    top: 0;

    padding: 0 100px;

    width: 88%;

    z-index: 9999;

    display: flex;

    justify-content: space-between;

    text-shadow: 2px 2px 6px #000000;

}



.navbar a{

    font-family: calibri;

    float: left;

    display: block;

    color: #f2f2f2;

    text-align: center;

    padding: 14px 16px;

    text-decoration: none;

}



.navbar .logo{

    float: left;

    margin-right: 20px;

    font-size: 24px;

    font-weight: bold;

    color: #f2f2f2;

    line-height: 1.8;

}



.navbar a:hover{

    background-color: #00eeff;

    color: black;

    text-shadow: none;

}



.logo img{

    width: 200px;

    height: 150px;

    margin-right: -20px;

    margin-top: -30px;

    margin-bottom: -50px;

    filter: brightness(4);

}



.header-text{

    text-align: center;

    display: grid;

    place-items: center;

    height: 100vh;

    position: relative;

    z-index: 9998;

}



.text-content h1{

    color: #fff;

    font-family: bebas neue;

    font-size: 80px;

    margin: 0;

    padding: 0;

}

.text-content p{

    color: #fff;

}

.text-content h1 span{

    color: #00eeff;

    font-family: bebas neue;

}

.text-content a{

    background-color: #00eeff;

    color: #202020;

    padding: 10px 30px;

    border-radius: 50px;

    text-decoration: none;

    margin-top: 20px;

    display: inline-block;

}



.slider-wrapper{

    position: relative;

    max-width: 48rem;

    margin: auto;

}



.slider {

    display: flex;

    aspect-ratio: 16/9;

    overflow: auto;

}





@media (max-width: 800px){

    .navbar{

        flex-direction: column;

        width: 100%;

        padding: 0;

        align-items: center;

    }

    .navbar a{

        font-size: 10px;

        padding: 14px 7px;

    }

    .text-content h1{

        font-size: 38px;

    }

}



.loading-overlay {

    position: fixed;

    width: 100%;

    height: 100%;

    top: 0;

    left: 0;

    background: rgb(128, 128, 128); /* grey background with 100% opacity */

    z-index: 10000;

    display: flex;

    justify-content: center;

    align-items: center;

}



.loading-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background-color: rgb(128, 128, 128);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 99999;

}



.loading-spinner {

    border: 16px solid #f3f3f3;

    border-top: 16px solid #3498db;

    border-radius: 50%;

    width: 120px;

    height: 120px;

    animation: spin 2s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}



.loading-spinner {

    border: 16px solid #f3f3f3;

    border-top: 16px solid #00eeff;

    border-radius: 50%;

    width: 120px;

    height: 120px;

    animation: spin 2s linear infinite;

}



@keyframes spin {

    0% { transform: rotate(0deg); }

    100% { transform: rotate(360deg); }

}