* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
    color: black;
    box-sizing: border-box;

    --header-height: 100px;
    --main-bg-color: white;
    --main-blue-color: #0000ff;
    --secondary-blue-color: #00d2ff;
    --main-yellow-color: #fbee1e;
    --secondary-yellow-color: #fdbd2d;
    --main-red-color: #fdbd2d;

    --default-section-padding-y: 80px;
    --default-section-padding-x: 20px;
    --default-section-padding: var(--default-section-padding-y) var(--default-section-padding-x);
    --default-section-max-width: 1200px;
    --default-border-radius: 20px;
    --default-row-gap: 20px;
    --default-column-gap: 20px;
    --default-gap: var(--default-row-gap) var(--default-column-gap);

    --scrollbar-width: 15px;

    h1 {font-size: 40px;}
    h2 {font-size: 30px;}
    h3 {font-size: 25px;}
    h4 {font-size: 20px;}
    p {font-size: 18px;}
}

/* ::-webkit-scrollbar {
    width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
    background-color: #000;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb {
    background-color: #fff;
    border-radius: 20px;
} */

body {
    /* overflow: hidden; */
    background-image: url('./images/white_bg.svg');
    background-size: 30%;
}

@media (max-width: 768px) { /* mobile */
    * {
        --header-height: 80px;
    }
    
    .hide-on-mobile {
        display: none !important;
    }
}

@media (min-width: 769px) { /* pc/tablet */
    .hide-on-desktop {
        display: none !important;
    }
}

nav ul {
    display: flex;
    flex-direction: row;
    height: 100%;

    li {
        height: 100%; /* Para ficar com a altura máxima do header e ser mais facil de clicar */
        padding: 0 20px; /* Para não ficar com um espaço vazio entre os botões */
        
        &:last-child {
            padding-right: 0px;
        }

        .menu-btn{
            cursor: pointer;
            display: flex;
            height: 100%;
            align-content: center;
            flex-wrap: wrap;
            font-weight: bolder;
            font-size: 18px;
            transition: background-color 0.2s ease, scale 0.2s ease;
            color: white;

            &:hover {
                color: var(--secondary-blue-color);
                scale: 1.2;
            }

            &:active {
                color: var(--main-blue-color);
                scale: 1.1;
            }
        }
        
        .dropdown-btn {
            background-color: white;
            height: 40px;
            width: 40px;
            justify-content: center;
            border-radius: 50px;
            color: var(--main-blue-color);
            transition: background-color 0.2s ease, color 0.2s ease, scale 0.2s ease;

            &:hover {
                color: var(--secondary-blue-color);
            }
        }

        .dropdown-menu{
            display: none;
            position: absolute;
            top: 80px;
            min-width: 150px;
            height: auto;
            background-color: white;
            padding: 0px 10px;

            ul {
                width: 100%;
                display: flex;
                flex-direction: column;
                
                li {
                    width: 100%;
                    padding: 0px;
                    border-bottom: var(--main-blue-color) 1px solid;

                    a {
                        display: flex;
                        background-color: white;
                        padding: 15px 15px;
                        color: var(--main-blue-color);
                        margin: 0px -10px;
                        font-size: 20px;

                        &:hover {
                            background-color: var(--main-blue-color);
                            color: var(--secondary-blue-color);
                        }
                    }

                    &:last-child {
                        border-bottom: none;
                    }
                } 
            }
        }
    }
}

header {
    z-index: 1000;
    display: flex;
    justify-content: center;
    width: 100%;
    height: var(--header-height);
    padding: 20px;
    background-color: var(--main-blue-color);

    .inner-header {
        display: flex;
        width: 100%;
        max-width: 1200px;
        justify-content: space-between;

        img {
            transition: opacity 0.3s ease;
            height: 100%;
            width: auto;
        }
    }

    .background {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transition: opacity 0.3s ease;
        background-image: url('./images/blue_bg.svg');
        background-size: 30%;
    }
}

.invisible-header {
    position: fixed;
    transition: background-color 0.3s ease;
    background-color: transparent;

    .background {
        opacity: 0;
    }
}

.invisible-header.scrolled {
    background-color: var(--main-blue-color);

    .background {
        opacity: 1;
    }
}

footer {
    z-index: 1000;
    display: flex;
    width: 100%;
    min-height: 100px;
    padding: 20px;
    background-color: var(--main-blue-color);
    background-image: url('./images/blue_bg.svg');
    background-size: 30%;
    justify-content: center;

    .inner-footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 1200px;
        gap: 20px;

        img {
            display: flex;
            height: 100px;
            width: auto;
        }
    }
}

section {
    display: flex;
    padding: var(--default-section-padding);
    justify-content: center;
}

.content {
    display: flex;
    width: 100%;
    max-width: var(--default-section-max-width);
}

.hero {
    pointer-events: none;
    padding: 0px;
    width: 100%;
    height: 800px;
    background-image: radial-gradient(ellipse, var(--secondary-blue-color), var(--main-blue-color) 150%);
    
    h2, p {
        color: white;
    }

    canvas {
        width: 100%; 
        height: 100%;
    }

    .content {
        position: absolute;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        height: 700px;
        gap: 10px;
        padding: 20px;

        img {
            height: auto;
            max-width: 100%;
            max-height: 300px;
            animation: hero-logo 0.4s ease;
            animation-fill-mode: both;
        }

        button {
            pointer-events: all;
            color:var(--main-blue-color);
            background-color: white;
            border-radius: 50px;
            border: 0px;
            padding: 14px 18px;
            font-size: 16px;
            font-weight: bolder;

            transition: 
                background-color 0.2s ease, 
                color 0.2s ease,
                scale 0.2s ease;

            &:hover {
                color: white;
                background-color: var(--main-blue-color);
                scale: 1.15;
            }

            &:active {
                background-color: white;
                color: var(--main-blue-color);
            }
        }
    }
}

@media (min-width: 769px) {
    .step {
        margin-top: -160px;

        &#step1 {
            margin-top: 0px;
        }
    }
}

@media (max-width: 768px) {
    .steps {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .step {
        padding-inline: 0 !important;
        text-align: left !important;
    }
}

.full {
    height: 100vh;
}

.como-jogar {
    overflow: hidden;
    .content {
        flex-direction: column;

        .title {
            text-align: center;
        }

        .steps {
            display: flex;
            flex-direction: column;
            gap: 40px;

            .step {
                .step-content {
                    opacity: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    
                    p {
                        margin-top: -10px;
                    }

                    img {
                        width: 100%;
                        border-radius: 20px;
                    }
                }
                
                &#step1, &#step3, &#step5 {
                    padding-right: 52%;

                    .step-content.visible {
                        animation: step-odd 0.4s ease;
                        animation-fill-mode: both;
                    }
                }

                &#step2, &#step4 {
                    padding-left: 52%;
                    text-align: right;

                    .step-content.visible {
                        animation: step-even 0.4s ease ;
                        animation-fill-mode: both;
                    }
                }
            }
        }
    }
}

.pq-jogar {

    --reason-count: 4;
    /* --reasons-width: calc(((100vw - (var(--default-section-padding-x) * 2) - var(--scrollbar-width)) * var(--reason-count)) + (var(--default-row-gap) * (var(--reason-count) - 1))); */

    position: relative;  /* tem que ter */
    height: calc(400vh - var(--header-height)); /* tem que ter */
    padding: 0;

    background-image: url('./images/blue_bg.svg');
    background-size: 30%;

    &.sticky .inner{
        position: fixed;
        top: var(--header-height);
    }

    &.post-sticky .inner{
        position: absolute;
        top:auto;
        bottom:0;
    }

    .inner {
        display: flex;
        justify-content: center;
        width: 100%;
        height: calc(100vh - var(--header-height));
        padding: var(--default-section-padding);

        background-image: url('./images/blue_bg.svg');
        background-size: 30%;
        background-position-y: calc(-1 * var(--header-height)) ;

        .content {
            max-width: 1500px;
            flex-direction: column;
            gap: var(--default-gap);
            
            .title {
                text-align: center;
                color: white;
            }
            
            .reasons-wrapper {
                display: block;
                overflow: hidden;
                height: 100%;

                .reasons {
                    display: flex;
                    flex-direction: row;
                    width: calc((400%) + var(--default-row-gap) * (var(--reason-count) - 1));
                    height: 100%;
                    gap: var(--default-gap);

                    .reason {
                        padding: 20px 20px;
                        border-radius: 20px;
                        background-color: #001aac;
                        width: 100%;
                        height: 100%;
                        
                        h3 {
                            color: white;
                        }
                    }
                }
            }
            
            .reasons-gradient {
                display: none;
                margin-top: -340px;
                width: 100%;
                height: 310px;
                background-image: linear-gradient(90deg, var(--main-blue-color) 0%, transparent 10%, transparent 90%, var(--main-blue-color) 100%);
                position: relative;
            }
        }
    }
}

.faq-section {
    display: flex;

    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 1200px;
        gap: 30px;

        .faq {
            max-width: 900px;
            
            .faq-item {
                border: 1px solid var(--main-blue-color);
                border-bottom: 0;
                overflow: hidden;

                .question {
                    cursor: pointer;
                    padding: 10px 15px;
                    background-color: #f8f8f8;
                }

                .answer {
                    max-height: 0;
                    overflow: hidden;
                    padding: 0px 15px;
                    background-color: #3636ff;
                    color: white;
                    transition: max-height 0.3s ease, padding 0.3s ease;
                }

                &:last-child{
                    border-bottom: 1px solid var(--main-blue-color);
                }
            }
        }
    }
}

@keyframes hero-logo {
    0% {scale: 0.2; rotate: 90deg;}
    50% {scale: 1.3; rotate: -40deg;}
    100% {scale: 1; rotate: 0deg;}
}

@keyframes step-odd {
    from {
        transform: translateX(-100vw) rotate(-90deg);
        opacity: 1;
    }

    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes step-even {
    from {
        transform: translateX(100vw) rotate(90deg);
        opacity: 1;
    }

    to {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes rolling {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: rotate(90deg);
        opacity: 1;
    }
    50% {
        transform: rotate(180deg);
        opacity: 1;
    }
    100% {
        transform: rotate(270deg);
        opacity: 1;
    }
}