/* Estilo automático para a página: home */
#display {
    position: relative;
    overflow: hidden;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;

    .img-banner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
    }
    
    .text-content {
        position: absolute;
        z-index: 1;
        padding: 20px;
        border-radius: 10px;
        top: 60px;
        width: 100%;
    }

    h1{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 46px;
        font-weight: 600;
        line-height: 145%;
        text-transform: uppercase;

        span{
            font-weight: 500;
            font-family: "GOSHA Alternates";
        }
    }

    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 18px;
        font-weight: 600;
        border-radius: 80px;
        background: #F4D110;
        display: inline-block;
        padding: 17px 46px;
        margin-bottom: 10px;
    }

    h3{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 24px;
    }
}


#sobre {
    padding: 100px 0;
    background-color: #FFFEFA;

    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        text-transform: uppercase;
        margin-bottom: 70px;
        text-align: center;
    }

    iframe{
        width: 100%;
        height: 500px;
    }

    h3{
        color: #312B80;
        font-size: 24px;
        font-weight: 500;
        line-height: 160%;
        margin-top: 30px;
        margin-bottom: 40px;
    }
    .text-sobre {
        color: #212D38;
        font-size: 18px;
        font-weight: 400;
        line-height: 160%;
    }
    .assin-text-sobre {
        color: #312B80;
        font-size: 18px;
        font-weight: 500;
        line-height: 160%;
    }
    
    .posicao-assinaturas{

        display: flex;
        justify-content: space-evenly;
        margin: 30px 0;
        
        .assinatura-lucio {
            color: #312B80;
            text-align: center;
            font-family: "GOSHA Alternates";
            font-size: 18px;
            font-weight: 600;
            line-height: 180%;
            margin: 0;
        }
        .assinatura-cargo {
            text-align: center;
            color: #535353;
            font-size: 16px;
            font-weight: 400;
            line-height: 180%;
        }
    }


    .card-sobre {
        border-radius: 5px;
        background: linear-gradient(90deg, #312B80 0%, #4139AC 100%);
        box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.10);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 190px;

        .icon-sobre {
            width: 32px;
            object-fit: cover;
            margin-bottom: 10px;
        }
        .tit-card-sobre {
            color: #FFF;
            text-align: center;
            font-family: "GOSHA Alternates";
            font-size: 14px;
            font-weight: 500;
            line-height: 160%;
            margin-bottom: 0;
        }
        .text-card-sobre {
            color: #FFF;
            text-align: center;
            font-family: "GOSHA Alternates";
            font-size: 16px;
            font-weight: 500;
            line-height: 160%;
            margin-bottom: 0;
        }
    }
    .btn-sobre{
        color: #312B80;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.96px;
        padding: 20px 40px;
        border-radius: 5px;
        background: #F4D110;
        transition: 300ms all ease-in-out;

        &:hover{
            background-color: #312B80;
            color: #fff ;
        }
    }
}

#local {
    background-color: #F8FFF4;
    padding: 80px 0;

    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        line-height: 190%;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 0;
    }
    
    h3{
        text-align: center;
        color: #312B80;
        font-size: 24px;
        font-weight: 500;
        line-height: 190%;
        margin-top: -10px;
    }

    h4{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 24px;
        font-style: normal;
        font-weight: 500;
        line-height: 190%;
    }

    .local-text{
        color: #212D38;
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
    }

    h5{
        color: #5BA344;
        font-size: 18px;
        font-weight: 500;
        line-height: 190%;
    }

    .endereco-local{
        color: #212D38;
        font-size: 16px;
        font-weight: 400;
        line-height: 160%;
    }

    .info-local{
        color: #312B80;
        font-size: 16px;
        font-weight: 500;
        line-height: 160%;

        span{
            color: #212D38;
            font-weight: 400;
        }
    }
    a{
        color: #312B80;
    }

    .btn-maps {
        color: #312B80;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.96px;
        border-radius: 5px;
        border: 1px solid #312B80;
        padding: 8px 40px;
        transition: 300ms all ease-in-out;

        &:hover{
            background-color: #312B80;
            color: #fff;
        }
    }

    .img-local{
        width: 100%;
        height: 440px;
        object-fit: cover;
    }
}


#publi {
    padding: 100px 0;

    
    .card-publi {
        border-radius: 5px;
        background: linear-gradient(91deg, #312B80 0%, #5BA344 77.25%, #F4D110 100.87%);
        padding: 50px 80px;
        text-align: center;
        position: relative;
        
        &:after {
            background-color: rgba(244, 209, 16, 0.50);
            background-size: auto;
            display: inline-block;
            width: 89px;
            height: 89px;
            border-radius: 50px;
            content: "";
            top: -45px;
            left: -45px;
            position: absolute;
            z-index: 1;
        }
 
        &:before {
            background-color: rgba(91, 163, 68, 0.50);
            background-size: auto;
            display: inline-block;
            width: 89px;
            height: 89px;
            border-radius: 50px;
            content: "";
            bottom: -45px;
            right: -45px;
            position: absolute;
            z-index: 1;
        }

        h2{
            color: #FFF;
            text-align: center;
            font-family: "GOSHA Alternates";
            font-size: 24px;
            font-style: italic;
            font-weight: 500;
            line-height: 160%; /* 38.4px */

            span{
                font-size: 18px;
            }
        }
    }
}

#paraQuem {
    padding: 80px 0;
    background-color: #FFFDF2;
    overflow: hidden;

    h2{
        color: #312B80;
        text-align: center;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        line-height: 160%;
        text-transform: uppercase;
    }
    .text-quem{
        color: #212D38;
        text-align: center;
        font-size: 18px;
        font-weight: 400;
        line-height: 160%;
        margin-bottom: 60px;
    }

    .card-quem{
        filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.10));

        .img-quem {
            width: 100%;
            height: 310px;
            object-fit: cover;
            border-radius: 8px 8px 0 0;
        }
        .info-card-quem {
            background-color: #F4D110;
            padding: 30px 0;
            border-radius: 0 0 8px 8px;

            p{
                color: #212D38;
                font-family: "GOSHA Alternates";
                font-size: 18px;
                font-weight: 600;
                line-height: 160%; 
                text-align: center;
                margin: 0;
            }
        }
    }

    .btn-quem{
        color: #FFF;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.96px;
        padding: 20px 40px;
        border-radius: 5px;
        background: #312B80;
        transition: 300ms all ease-in-out;

        &:hover{
            background-color: #F4D110;
            color: #312B80 ;
        }
    }

    .swiper-content {
        .passadores {
            position: absolute;
            display: flex;
            justify-content: space-between;
            width: 100%;
            top: calc(50% - 10px);

            .swiper-button-next {
                right: -70px;
                color: #5BA344;
                border: solid 1px;
                width: 60px;
                height: 60px;
                border-radius: 38px;
            }
            .swiper-button-prev {
                left: -70px;
                color: #5BA344;
                border: solid 1px;
                width: 60px;
                height: 60px;
                border-radius: 38px;
            }
        }
    }
    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
        font-size: 1rem;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
        font-size: 1rem;
    }
}

#acontece {
    padding: 100px 0;

    h2 {
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 20px;
    }
    h3{
        color: #535353;
        font-size: 18px;
        font-weight: 400;
        text-align: center;
    }

    .nav-pills {
        display: flex;
        justify-content: center;

        .nav-link {
            border-radius: 5px;
            background: #F9F9FD;
            box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.10);
            margin: 0 16px;
            padding: 24px;

            .dia-evento {
                text-align: justify;
                color: #312B80;
                font-family: "GOSHA Alternates";
                font-size: 24px;
                font-weight: 600;
                margin: 0;
            }
            .dia-evento-data {
                color: #535353;
                font-family: "GOSHA Alternates";
                font-size: 18px;
                font-weight: 500;
                margin: 0;
            }
        }
    }

    .card-programacao {
        border-radius: 5px;
        border: 1px solid #DEDEDE;
        background: #F9F9FD;
        box-shadow: 4px 6px 10px 3px rgba(167, 167, 167, 0.10);

        .info-card-programacao {
            padding: 24px;

            .img-programacao{
                width: 100%;
                height: 222px;
                object-fit: cover;
                border-radius: 4px;
                margin-bottom: 22px;
            }

            h4{
                color: #312B80;
                font-family: "GOSHA Alternates";
                font-size: 22px;
                font-weight: 600;
                line-height: 160%;
                min-height: 120px;
            }
            
            .nome-palestrante {
                color: #535353;
                font-size: 16px;
                font-weight: 400;
                line-height: 190%;
            }

            hr{
                width: 50%;
                height: 3px;
                background-color: #5BA344;
                opacity: 1;
            }

            .horario-palestra {
                color: #535353;
                font-size: 16px;
                font-weight: 400;
                line-height: 190%;
            }
        }
    }

    .swiper-button-prev {
        left: -80px;
        color: #5BA344;
        border: solid 1px;
        width: 60px;
        height: 60px;
        border-radius: 38px;
    }
    .swiper-button-next {
        right: -80px;
        color: #5BA344;
        border: solid 1px;
        width: 60px;
        height: 60px;
        border-radius: 38px;
    }
    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
        font-size: 1rem;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
        font-size: 1rem;
    }

    .btn-acontece{
        color: #312B80;
        font-size: 16px;
        font-weight: 500;
        letter-spacing: 0.96px;
        padding: 20px 40px;
        border-radius: 5px;
        background: #F4D110;
        transition: 300ms all ease-in-out;

            &:hover{
                background-color: #312B80;
                color: #fff;
            }
    }

    .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
        border-radius: 5px;
        background: linear-gradient(180deg, #5BA344 0%, #467D34 100%); 

        .dia-evento {
            color: #F9F9FD;
        }
        .dia-evento-data {
            color: #F9F9FD;
        }
    }
}



#contador {
    padding: 80px 0;
    background: linear-gradient(91deg, #6CB853 19.12%, #5BA344 66.83%, #467D34 87.19%);

    h2 {
        color: #F4D110;
        text-align: center;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        line-height: 190%;
        text-transform: uppercase;
    }
    .text-contador{
        text-align: center;
        color: #FFF;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 40px;
    }

    .lista-de-contagem{
        position: relative;
        z-index: 1;

        .card-contador {
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.50);
            mix-blend-mode: soft-light;
            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            min-height: 150px;

            .numero-contador {
                color: #312B80;
                font-family: "GOSHA Alternates";
                font-size: 56px;
                font-weight: 700;
                margin: 0 0 -10px 0;
            }
            .item-contador {
                color: #FFF;
                text-align: center;
                font-size: 20px;
                font-weight: 400;
            }
        }
    }

    .chamada-contador {
        color: #FFF;
        font-size: 18px;
        font-weight: 500;
        text-align: center;

        .link-contador{
            color: #F4D110;
            font-size: 18px;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: none;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
        }
    }

}


#inscricao {
    padding: 100px 0;

    h3{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }

    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        text-transform: uppercase;
        text-align: center;
        margin-bottom: 30px;
    }

    h4{
        color: #535353;
        font-size: 20px;
        text-align: center;
        font-weight: 400;

        span{
            color: #5BA344;
            font-weight: 600;
        }
    }

    .card-inscricao {
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
        margin: 8px 0;

        .tipo-inscricao {
            width: 100%;
            text-align: center;
            border-radius: 5px;
            background: #F4D110;
            padding: 20px 0;
            
            p{
                color: #312B80;
                text-align: center;
                font-size: 22px;
                font-weight: 600;
                margin: 0;
            }
        }
    }
    
    .info-inscricao {
        padding: 48px 0;

        .lote {
            color: #212D38;
            text-align: center;
            font-size: 16px;
            font-weight: 500;
        }
        .valor-lote {
            color: #5BA344;
            text-align: center;
            font-size: 32px;
            font-weight: 700;
        }
        .btn-inscricao-lote {
            color: #FFF;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 190%;
            letter-spacing: 0.96px;
            border-radius: 5px;
            background: #312B80;
            display: block;
            padding: 14px 32px;
            transition: 300ms all ease-in-out;

            &:hover{
                background-color: #F4D110;
                color: #312B80;
            }
        }
    }

     .swiper-content {
        .passadores {
            position: absolute;
            display: flex;
            justify-content: space-between;
            width: 100%;
            top: calc(50% - 10px);

            .swiper-button-next {
                right: -70px;
                color: #5BA344;
                border: solid 1px;
                width: 60px;
                height: 60px;
                border-radius: 38px;
            }
            .swiper-button-prev {
                left: -70px;
                color: #5BA344;
                border: solid 1px;
                width: 60px;
                height: 60px;
                border-radius: 38px;
            }
        }
    }

    .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
        font-size: 1rem;
    }
    .swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after{
        font-size: 1rem;
    }

}


#videos{
    padding: 80px 0;
    background-color: #F9FFF4;

    h3{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }
    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 700;
        line-height: 190%;
        text-transform: uppercase;
        text-align: center;
    }
    iframe{
        width: 100%;
        height: 355px;
    }
}

#patrocinadores{
    padding: 80px 0;
    background-color: #FFFEFA;

    h3{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 20px;
        font-weight: 600;
        text-align: center;
    }
    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 700;
        line-height: 190%;
        text-transform: uppercase;
        text-align: center;
    }

    .logo-patrocinio {
        width: 100%;
        height: 70px;
        object-fit: contain;
    }

}

#duvidas{
    padding: 100px 0;
    position: relative;

    h2{
        color: #312B80;
        font-family: "GOSHA Alternates";
        font-size: 40px;
        font-weight: 600;
        line-height: 190%; 
        text-transform: uppercase;
    }
    
    .img-duvidas {
        width: 100%;
        object-fit: contain;
        height: 530px;
        left: -80px;
        position: absolute;
        z-index: 10;
        top: 0;
    }

    .box-accordion {
        padding: 20px 20px;
        border-bottom: solid 1px #D9D9D9;
        border-radius: 5px;


        a{
            color: #312B80;
            font-family: "GOSHA Alternates";
            font-size: 20px;
            font-weight: 600;
            line-height: 120%;
        }

    }

    .box-accordion:has(> a.active) {
        background-color: #FFFDF2;
    }

    .box-accordion>a.active:after {
        content: '-';
    }
    .box-accordion>a:after {
        content: '+';
        display: inline-block;
        color: #787878;
    }

    .content-accordion{
        a{
            color: #212D38;
            font-size: 16px;
            font-weight: 400;
            line-height: 160%; /* 25.6px */
        }
    }

    .alinhar-final{
        display: flex;
        justify-content: flex-end;

        .btn-enviar-form{
            color: #FFF;
            text-align: center;
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 190%;
            letter-spacing: 0.96px;
            border-radius: 5px;
            background: #312B80;
            display: block;
            padding: 1rem 4rem;
            text-transform: uppercase;
        }
    }

    .form-check {
        padding-left: 35px;
    }

    .form-control {
        border: solid 1px #312B80;
        padding: 14px 16px;
    }
}


/* TABLET */
@media (min-width: 768px) and (max-width: 1024px) {

    #local {
        .endereco-local {
            margin-bottom: 30px;
        }
    }


    #paraQuem {
        .central-tablet{
            display: flex;
            justify-content: center;

            .card-quem {
                margin-bottom: 30px;
            }
        }
    }
    
    #contador {
        .lista-de-contagem {
            .card-contador {
                margin-bottom: 20px;
            }
        }
    }

    #inscricao {
        .central-tablet{
            display: flex;
            justify-content: center;

            .card-inscricao {
                margin-bottom: 30px;
            }
        }
    }

}

/* MOBILE */
@media all and (max-width: 767px) { 
    #display {
        min-height: 60vh;
        background-color: #fdfae5;

        h1 {
            font-size: 36px;

        }

        .text-content {
            top: 20px;
        }

        .img-banner {
            height: 40%;
            z-index: 0;
            margin-top: 260px;
        }
    }

    #sobre {
        .card-sobre {
            min-height: 156px;
            margin-bottom: 20px;
            padding: 15px;
        }

        .posicao-assinaturas {
            flex-direction: column;
        }

    }
    #local {
        .img-local {
            height: 300px;
        }
    }
    #publi {
        overflow: hidden;

        
        .card-publi {
            padding: 40px 20px;
                h2{
                    font-size: 20px;
                }
        }
    }
    #paraQuem {
        .card-quem {
            margin-bottom: 30px;
        }
        .btn-quem {
            display: block;
            margin: 15px;
        }
        .swiper-content {
            .passadores {
                width: 100%;
                position: relative;
                top: 15px;

                .swiper-button-next {
                    right: 0;
                }
                .swiper-button-prev {
                    left: 0px;
                }
            }
        }

    }

    #acontece{
        .nav-pills {
            display: block;
            width: 100%;

            .nav-item {
                margin-bottom: 10px;

                .nav-link {
                    width: 90%;

                    .dia-evento {
                        text-align: center;
                    }
                }
            }

        }

        .passadores {
            width: 100%;
            position: relative;
            top: 45px;

            .swiper-button-next {
                right: 0;
            }
            .swiper-button-prev {
                left: 0px;
            }
        }

        .btn-acontece {
            display: block;
            margin-top: 40px;
        }
        
    }

    #inscricao {
        .card-inscricao {
            margin-bottom: 30px;
        }

        
        .swiper-content {
            .passadores {
                .swiper-button-next {
                    right: 0px;
                }
                .swiper-button-prev {
                    left: 0px;
                }
            }
        }
    }

    #duvidas {
        padding: 0px 0 60px;

        .img-duvidas {
            position: relative;
            height: 410px;
        }

        .alinhar-final {
            .btn-enviar-form {
                display: block;
                width: 100%;
            }
        }
    }

    #contador {
        .lista-de-contagem {
            .card-contador {
                margin-bottom: 20px;
            }
        }
    }
    #videos {
        iframe {
            margin-bottom: 30px;
        }
    }
}