html,
body {
    overflow-x: hidden;
}

.scr-only {
    border: 0 !important;
    clip-path: inset(50%) !important;
    /* 2 */
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 1px !important;
    white-space: nowrap !important;
    /* 3 */
}


/* ------FONTS-------- */

@font-face {
    font-family: "Mozilla";
    src: url("../fonts/MozillaHeadline-VariableFont_wdth,wght.ttf");
}

@font-face {
    font-family: "Poppins";
    src: url('../fonts/Poppins-VariableFont_wght.ttf');
}

#hero h1.h1-lisoki {
    font-family: "Mozilla" !important;
    font-weight: 600 !important;
    font-size: 20px!important;
    color: rgb(213, 213, 213) !important;
}

#hero h2.h2-lisoki {
    font-family: "Poppins" !important;
    font-weight: 400 !important;
    font-size: 20px!important;
    color: white !important;
    line-height: unset !important;
}

#hero h3 {
    font-family: "Mozilla";
    font-size: 13px;
}

h4 {
    font-family: "Mozilla";
    font-size: 8px;
}

#hero p {
    font-family: "Poppins";
    font-size: 14px;
}

li {
    list-style-type: none;
    padding-left: 0%;
}


/* ------COLORS-------- */

 :root {
    --noir: black;
    --bleu-fonce: #131D28;
}


/* ------HERO-------- */

.container {
    max-width: 300px;
    margin-inline: auto;
}

body {
    background-color: var(--bleu-fonce);
    color: white;
}

#hero .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    text-align: center;
}

#hero .container h1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    letter-spacing: 3px;
}

#hero .container h1 span {
    font-size: 28px!important;
    color: white;
}

#hero {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}

#hero::after {
    content: "";
    position: absolute;
    width: 200vw;
    bottom: 0;
    left: -300px;
    right: 300px;
    height: 300px;
    background: linear-gradient(0deg, rgba(19, 29, 40, 1) 0%, rgba(19, 29, 40, 0) 100%);
}

.bulb-container {
    border: 1px solid white;
    border-radius: 50px;
    overflow: hidden;
    height: 50px;
    width: 225px;
    display: flex;
    justify-content: center;
    padding-inline: 38px;
}

.bulb-contenu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    animation: slideWords 6s infinite !important;
}

#hero .bulb-contenu h2.h2-lisoki {
    font-style: italic;
}

#hero h2.h2-lisoki {
    font-family: "Poppins"!important;
    margin-block: 10px!important;
    font-weight: 200 !important;
}

.designer {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-direction: column;
}


/* Анімація */

@keyframes slideWords {
    0%,
    10% {
        transform: translateY(0);
        /* Слово 1 */
    }
    20%,
    30% {
        transform: translateY(-50px);
        /* Слово 2 */
    }
    40%,
    50% {
        transform: translateY(-100px);
        /* Слово 3 */
    }
    60%,
    70% {
        transform: translateY(-150px);
        /* Слово 4 */
    }
    80%,
    90% {
        transform: translateY(-200px);
        /* Слово 5 */
    }
    100% {
        transform: translateY(0);
        /* Повертаємось на початок */
    }
}

.scroll-down-btn {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 50px;
    border: 2px solid #ffffff;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 100;
    text-decoration: none;
}

.scroll-down-btn span {
    display: block;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: 50%;
    animation: scrollAnim 1.5s infinite !important;
    margin-top: 8px;
}

@keyframes scrollAnim {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(10px);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.scroll-down {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.scroll-down-icon {
    width: 30px;
    height: 30px;
    animation: bounceDown 0.5s infinite alternate ease-in-out !important;
}

@keyframes bounceDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(5px);
    }
}


/* ------scrolling-words-------- */

.scrolling-words-section {
    width: 100vw;
    position: relative;
    padding: 20px 0;
    left: 50%;
    margin-left: -50vw;
    width: 100vw !important;
    /* Займає всю ширину viewport */
}

.scrolling-words-track {
    display: flex;
    gap: 16px;
    animation: scroll-left 15s linear infinite !important;
}

.word-item {
    border: 1px solid white;
    border-radius: 50px;
    padding: 6px 16px;
    white-space: nowrap;
    background: transparent;
}

.word-item p {
    color: white;
    font-size: 16px;
    font-family: "Poppins";
}

@keyframes scroll-left {
    0% {
        transform: translateX(-10%);
    }
    100% {
        transform: translateX(-50%);
    }
}


/*============== TABLETTE ================== */

@media (min-width: 768px) {
    .container {
        max-width: 600px;
        margin-inline: auto;
    }
    #hero h1.h1-lisoki {
        font-size: 32px !important;
    }
    #hero .container h1 span {
        font-size: 48px!important;
    }
    #hero h2.h2-lisoki {
        font-size: 32px !important;
    }
    .bulb-container {
        height: 50px;
        width: 257px;
    }
    .designer {
        flex-direction: row;
        gap: 24px;
    }
    .bulb-contenu {
        margin-top: -10px;
    }
    @keyframes slideWords {
        0%,
        10% {
            transform: translateY(0);
            /* Слово 1 */
        }
        20%,
        30% {
            transform: translateY(-70px);
            /* Слово 2 */
        }
        40%,
        50% {
            transform: translateY(-138px);
            /* Слово 3 */
        }
        60%,
        70% {
            transform: translateY(-206px);
            /* Слово 4 */
        }
        80%,
        90% {
            transform: translateY(-272px);
            /* Слово 5 */
        }
        100% {
            transform: translateY(0);
            /* Повертаємось на початок */
        }
    }
}


/*================= DESKTOP =============== */

@media (min-width: 1160px) {
    .container {
        max-width: 1318px;
        margin-inline: auto;
    }
    #hero h1.h1-lisoki {
        font-family: "Mozilla"!important;
        font-weight: 600 !important;
        font-size: 54px !important;
    }
    #hero .container h1 span {
        font-size: 68px!important;
    }
    #hero h2.h2-lisoki {
        font-family: "Poppins" !important;
        font-size: 54px !important;
    }
    .bulb-container {
        height: 108px;
        width: auto;
    }
    .designer {
        flex-direction: row;
        gap: 24px;
    }
    @keyframes slideWords {
        0%,
        10% {
            transform: translateY(0);
            /* Слово 1 */
        }
        20%,
        30% {
            transform: translateY(-100px);
            /* Слово 2 */
        }
        40%,
        50% {
            transform: translateY(-200px);
            /* Слово 3 */
        }
        60%,
        70% {
            transform: translateY(-300px);
            /* Слово 4 */
        }
        80%,
        90% {
            transform: translateY(-400px);
            /* Слово 5 */
        }
        100% {
            transform: translateY(-10);
            /* Повертаємось на початок */
        }
    }
}