@font-face {
    font-family: 'National';
    src: url('../images/../fonts/National2-Medium.otf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'National';
    src: url('../images/../fonts/National2-Bold.otf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'National';
    src: url('../images/../fonts/National2-Bold.otf');
    font-weight: bold;
    font-style: normal;
}


body {
    margin: 0;
    background: #000;
    color: #FFF;
    font-size: 35px;
    font-weight: 600;
    line-height: 35px;
    font-family: "National", sans-serif;
    width: 100%;
    overflow-x: hidden;
    position: relative;
    overflow-y: auto;


    section {
        padding: 100px;
    }

    h1 {
        font-size: 80px;
    }



    #header {
        position: relative;
        width: 100%;
        height: 100vh;
        padding-top: 350px;
        padding-bottom: 350px;
        background: #000;
        overflow: hidden;

        .overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }

        .overlay-hover {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;
            animation: spin 20s linear infinite;

            img {
                max-width: 190%;
                max-height: 190%;
                object-fit: cover;
            }

        }
    }


    #responsability {
        position: relative;
        width: 100%;
        height: 100vh;
        background: url('../images/bannerResponsability.png') no-repeat center center/cover;

        .overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }
    }


    /* LETREIRO */
    .messageBanner {
        position: relative;
        width: 100%;
        height: 50px;
        overflow: hidden;
        background: #111111;
        display: flex;
        align-items: center;

        .scrolling {
            display: flex;
            width: max-content;
            animation: marquee 120s linear infinite;

            span {
                font-size: 100px;
                font-weight: bold;
                color: #9fb2dd;
                white-space: nowrap;
                padding: 0 2rem;
            }
        }
    }

    .reverseMessageBanner {
        position: relative;
        width: 100%;
        height: 50px;
        overflow: hidden;
        background: #111111;
        display: flex;
        align-items: center;

        .scrolling {
            display: flex;
            width: max-content;
            animation: reverseMarquee 120s linear infinite;

            span {
                font-size: 100px;
                font-weight: bold;
                color: #9fb2dd;
                white-space: nowrap;
                padding: 0 2rem;
            }
        }
    }

    #about {
        background-color: #111111;
        position: relative;
        width: 100%;
        overflow: hidden;

        .overlay-image {
            position: absolute;
            top: 20%;
            right: -30%;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }
    }

    #biblia {
        position: relative;
        width: 100%;
        padding-top: 350px;
        padding-bottom: 350px;
        background: url('../images/bannerBiblia.png') no-repeat center center/cover;

        .overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }

        .overlay-hover {
            overflow: hidden;
            position: absolute;
            top: -45%;
            right: 0px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80%;
            z-index: 11;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }
    }

    #video {
        position: relative;
        width: 100%;
        background-color: #0f0f0f;
        min-height: 400px;
        overflow: visible;

        .overlay-image {
            position: absolute;
            inset: 0;

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 100%;
                max-height: 100%;
            }

            img:nth-child(1) {
                z-index: 5;
            }

            img:nth-child(2) {
                z-index: 1;
                width: 200%;
                height: 200%;
                object-fit: contain;
            }
        }

        .overlay-push {
            position: absolute;
            inset: 0;

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 90%;
                max-height: 90%;
            }
        }
    }


    #arrows {
        position: relative;
        width: 100%;
        overflow: hidden;

        .overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }

        .arrows {
            display: grid;
            grid-template-columns: repeat(3, 100px);
            gap: 60px;
            justify-content: start;

            i {
                font-size: 230px;
                line-height: 130px;
                color: transparent;
                -webkit-text-stroke: 2px #e84d0d;
                opacity: 0.8;
            }
        }
    }



    #bars {
        padding: 0px !important;
        width: 100%;

        .bar,
        .reverseBar {
            display: block;
            height: 40px;
        }

        .bar {
            height: 20px;
            background: linear-gradient(90deg,
                    #5a00ff 0%,
                    #8a3cff 50%,
                    #a36bff 100%);
        }

        .reverseBar {
            background: linear-gradient(90deg,
                    #a36bff 0%,
                    #8a3cff 50%,
                    #5a00ff 100%);
        }
    }

    #offers {
        min-height: 1200px;
        background-color: #262626;
        position: relative;

        .overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }


        p {
            display: inline-block;
            padding: 4px 8px;
            background: linear-gradient(90deg, rgba(170, 105, 255) 0%, rgba(134, 54, 255) 69%);
            color: #FFF;
        }
    }

    #date {
        position: relative;
        width: 100%;
        padding-top: 350px;
        padding-bottom: 350px;

        .overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90%;
            height: 90%;
            z-index: 1;

            img {
                max-width: 100%;
                max-height: 100%;
                object-fit: cover;
            }
        }

        .row {
            border-bottom: 1px solid #FFF;
        }
    }

    #speakers {
        position: relative;
        width: 100%;
        background-color: #262626;
        min-height: 400px;

        .overlay-image {
            position: absolute;
            inset: 0;

            img {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                max-width: 100%;
                max-height: 100%;
            }

            img:nth-child(1) {
                z-index: 5;
            }

            img:nth-child(2) {
                z-index: 1;
                width: 200%;
                height: 200%;
                object-fit: contain;
            }
        }
    }

    .name {
        color: #8670ed;
        font-size: 30px;
    }

    .position {
        color: #bababa;
        font-size: 20px;
    }
}

#preFooter {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;

    .overlay-image {
        position: absolute;
        bottom: -80%;
        /* A imagem começa com esse offset */
        left: 50%;
        transform: translate(-50%, 30%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: 1;

        animation: liftAndDrop 3s ease-in-out infinite;
        /* Animação com ciclo contínuo */

        img {
            max-width: 150%;
            max-height: 150%;
            object-fit: cover;
        }
    }

    p {
        display: inline-block;
        padding: 4px 8px;
        background: linear-gradient(90deg, rgba(170, 105, 255) 0%, rgba(134, 54, 255) 69%);
        color: #fff;
    }
}

/* BTN CTA */
.purpleBtnCTA {
    background: linear-gradient(90deg, rgba(170, 105, 255) 0%, rgba(134, 54, 255) 69%);
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    z-index: 9 !important;


    &::hover {
        background: #8670ed;
    }
}

.orangeBtnCTA {
    background: #d54e16;
    color: #fff;
    font-size: 50px;
    font-weight: bold;
    padding: 15px 30px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    cursor: pointer;
    z-index: 9 !important;

    &::hover {
        background: #dc7143ff;
    }
}

footer {
    max-height: 200px;
    padding: 50px;
    background: #0f0f0f;

    .footerMainColor {
        line-height: 5px;
        font-weight: 500;
        font-size: 14px;
        color: #d6d6d6;
    }

    .footerSubColor {
        line-height: 5px;
        font-weight: 500;
        font-size: 14px;
        color: #807e7e;
    }
}

/* ANIMAÇÕES */
@keyframes spin {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes fill {
    0% {
        color: #e84d0d;
        opacity: 0.3;
        transform: scale(0.8);
        filter: brightness(0.7);
    }

    100% {
        color: #e84d0d;
        opacity: 1;
        transform: scale(1);
        filter: brightness(1.2);
    }
}

@keyframes marquee {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes reverseMarquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

@keyframes liftAndDrop {
    0% {
        bottom: -5%;
    }

    50% {
        bottom: 0%;
    }

    100% {
        bottom: -5%;
    }
}

/* ===========================
   MOBILE/TABLET ONLY (SCSS)
   =========================== */

@media (max-width: 991.98px) {
    body {
        font-size: 22px;
        line-height: 1.4;

        section {
            padding: 60px 24px;
        }

        h1 {
            font-size: 48px;
            line-height: 1.1;
        }
    }

    #header {
        height: auto;
        padding-top: 160px;
        padding-bottom: 120px;

        .overlay-image,
        .overlay-hover {
            width: 100%;
            height: auto;
        }

        .overlay-hover img {
            max-width: 140%;
            max-height: 140%;
        }
    }

    .messageBanner,
    .reverseMessageBanner {
        height: 36px;

        .scrolling span {
            font-size: 30px;
            padding: 0 1rem;
        }
    }

    #about {

        .col-5,
        .col-7 {
            flex: 0 0 100% !important;
            max-width: 100% !important;
        }

        .overlay-image {
            display: none;
        }
    }

    #biblia {
        padding: 160px 0;
        background-position: center;
        background-size: cover;

        .overlay-hover {
            top: -10%;
            width: 95%;
            right: 0;
        }

        p {
            font-size: 22px;
            line-height: 1.5;
        }
    }

    #video {
        iframe {
            width: 100%;
            height: 250px;
        }

        .overlay-image {
            margin-top: -285px;
            margin-left: -50px;
            max-width: 50%;
        }

        .overlay-push {
            width: 300%;
            max-width: 500%;
            margin-left: -100px;
        }
    }

    #arrows {
        .arrows {
            display: grid;
            grid-template-columns: repeat(3, 68px);
            gap: 28px;

            i {
                font-size: 120px;
                line-height: 90px;
                -webkit-text-stroke: 1.5px #e84d0d;
            }
        }

        .col-8 {
            margin-top: 40px !important;
        }

        .overlay-image {
            display: none;
        }
    }

    #responsability {
        height: auto;
        background-position: center;
        background-size: cover;

        .overlay-image {
            display: none;
        }

        .orangeBtnCTA {
            margin-top: 24px !important;
        }
    }

    #offers {
        min-height: auto;
        padding-bottom: 40px;

        p {
            display: block;
            margin: 8px auto;
            width: fit-content;
            font-size: 20px;
        }

        .overlay-image {
            display: none;
        }
    }

    #date {
        padding: 140px 0;

        .row {
            border-bottom: 1px solid rgba(255, 255, 255, 0.35);
        }

        .col-6.text-end {
            text-align: right;
            font-size: 24px;
            margin-top: 8px !important;
        }
    }

    #speakers {
        padding: 40px 0;

        .overlay-image {
            img:nth-child(2) {
                width: 130% !important;
                height: auto !important;
                opacity: 0.5;
            }

            img:nth-child(1) {
                opacity: 0.4;
            }
        }

        .name {
            font-size: 24px;
        }

        .position {
            font-size: 16px;
        }
    }

    #preFooter {
        height: auto;
        min-height: 70vh;

        .overlay-image {
            bottom: -40%;
        }
    }

    #bars {

        .bar,
        .reverseBar {
            height: 18px;
        }

        .bar {
            height: 14px;
        }
    }

    .purpleBtnCTA,
    .orangeBtnCTA {
        font-size: 30px;
        padding: 12px 22px;
        border-radius: 10px;
        position: relative;
        z-index: 9;
        display: inline-block;
    }

    footer {
        padding: 28px;

        .footerMainColor,
        .footerSubColor {
            line-height: 1.4;
            font-size: 12px;
        }
    }
}

/* CELULAR */
@media (max-width: 767.98px) {
    body {
        font-size: 18px;

        h1 {
            font-size: 36px;
        }
    }

    #header {
        padding-top: 0px !important;
        padding-bottom: 0px !important;
        height: 80vh !important;


        .overlay-hover img {
            max-width: 120%;
            max-height: 120%;
        }

        .logo-mobile {
            width: 100% !important;
        }
    }

    .messageBanner,
    .reverseMessageBanner {
        height: 50px;
        font-size: 18px;

        .scrolling span {
            font-size: 45px !important;
        }
    }

    .reverseMessageBanner {
        margin-top: -20px !important;
    }


    #about {
        .overlay-image {
            display: none;
        }

        .img-mobile {
            margin-left: -60px
        }
    }

    #arrows {
        margin-top: 50px !important;
        margin-left: 30px !important;
        margin-right: 30px !important;
        padding: 20px;
        padding-bottom: 50px;
        overflow-x: hidden;



        .arrows {
            display: grid;
            gap: 20px !important;

            i {
                font-size: 100px !important;
                line-height: 50px !important;
            }
        }

        .img-mobile {
            width: 80% !important;
        }

        .col-mobile {
            max-width: 84% !important;
        }
    }

    #biblia {
        padding: 0px !important;
        padding-top: 50px !important;
        padding-bottom: 100px !important;
        max-height: 800px !important;

        .overlay-hover {
            display: none;
        }
    }

    #responsability {
        padding: 0px !important;
        padding-top: 50px !important;
        padding-bottom: 100px !important;
        max-height: 500px !important;

        .overlay-hover {
            display: none;
        }
    }

    #offers {
        padding: 0px !important;
        padding-top: 50px !important;
        padding-bottom: 0px !important;
        max-height: 100px !important;
        min-height: 650px !important;

        .overlay-hover {
            display: none !important;
        }

        .img-mobile-one {
            margin-left: 50px !important;
        }

        .img-mobile-two {
            margin-top: -400px !important;
        }
    }

    #date {
        padding: 0px !important;
        padding-top: 50px !important;
        padding-bottom: 0px !important;
        max-height: 100px !important;
        min-height: 550px !important;


        .text-mobile {
            font-size: 16px !important;
        }

        .col-6.text-end {
            text-align: left !important;
            margin-top: 4px !important;
            font-size: 22px;
        }
    }

    #speakers {
        padding: 0px !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;

        .img-mobile {
            z-index: 1;
            width: 90% !important;
            margin-top: -870px !important;
        }

        .img-preletor {
            width: 50% !important;
        }
    }

    #preFooter {
        .overlay-image {
            bottom: -30%;
            animation-duration: 4s;
        }
    }

    .d-flex.flex-row.align-items-center.gap-5.mt-5 {
        flex-direction: column;
        gap: 16px !important;
        align-items: center !important;
    }
}

@media (max-width: 575.98px) {
    body {
        section {
            padding: 44px 18px;
        }
    }

    #header {
        padding-top: 90px;
        padding-bottom: 70px;
    }

    .messageBanner,
    .reverseMessageBanner {
        .scrolling span {
            font-size: 24px;
        }
    }

    #arrows {
        .arrows {
            grid-template-columns: repeat(2, 56px);
            gap: 18px;

            i {
                font-size: 84px;
                line-height: 70px;
            }
        }
    }

    .purpleBtnCTA,
    .orangeBtnCTA {
        font-size: 24px;
        padding: 10px 18px;
    }

    #offers {
        p {
            font-size: 18px;
            text-align: center;
        }
    }

    footer {

        .footerMainColor,
        .footerSubColor {
            font-size: 11px;
        }
    }
}