:root {
    --color-azul: #2a3f5f;
    --color-azul-escuro: #182e49;
    --color-branco: #ffffff;
    --color-bege: #be8e5e;
    --color-amarelo: #d4b242;
    --sub-1: 20px;
    --sub-2: 16px;
    --sub-3: 14px;
    --head-1: 55px;
    --head-2: 35px;
    --head-3: 28px;
}

.head-1 {
    font-size: var(--head-1);
}

.head-2 {
    font-size: var(--head-2);
}

.head-3 {
    font-size: var(--head-3);   
}

.sub-1 {
    font-size: var(--sub-1);
}

.sub-2 {
    font-size: var(--sub-2);
 
}

.sub-3 {
    font-size: var(--sub-3);
}


@media (max-width: 767.98px) {
    :root {
        --sub-1: 5.5vw;  
        --sub-2: 4.26vw;  
        --sub-3: 3.73vw;  
        --head-1: 11vw; 
        --head-2: 8.5vw;  
        --head-3: 7vw;  
    }
}
@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-RegularOblique.eot');
    src: url('/fonts/VisbyCF-RegularOblique.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-RegularOblique.woff2') format('woff2'),
        url('/fonts/VisbyCF-RegularOblique.woff') format('woff'),
        url('/fonts/VisbyCF-RegularOblique.ttf') format('truetype'),
        url('/fonts/VisbyCF-RegularOblique.svg#VisbyCF-RegularOblique') format('svg');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-Bold.eot');
    src: url('/fonts/VisbyCF-Bold.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-Bold.woff2') format('woff2'),
        url('/fonts/VisbyCF-Bold.woff') format('woff'),
        url('/fonts/VisbyCF-Bold.ttf') format('truetype'),
        url('/fonts/VisbyCF-Bold.svg#VisbyCF-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-Regular.eot');
    src: url('/fonts/VisbyCF-Regular.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-Regular.woff2') format('woff2'),
        url('/fonts/VisbyCF-Regular.woff') format('woff'),
        url('/fonts/VisbyCF-Regular.ttf') format('truetype'),
        url('/fonts/VisbyCF-Regular.svg#VisbyCF-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-BoldOblique.eot');
    src: url('/fonts/VisbyCF-BoldOblique.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-BoldOblique.woff2') format('woff2'),
        url('/fonts/VisbyCF-BoldOblique.woff') format('woff'),
        url('/fonts/VisbyCF-BoldOblique.ttf') format('truetype'),
        url('/fonts/VisbyCF-BoldOblique.svg#VisbyCF-BoldOblique') format('svg');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-MediumOblique.eot');
    src: url('/fonts/VisbyCF-MediumOblique.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-MediumOblique.woff2') format('woff2'),
        url('/fonts/VisbyCF-MediumOblique.woff') format('woff'),
        url('/fonts/VisbyCF-MediumOblique.ttf') format('truetype'),
        url('/fonts/VisbyCF-MediumOblique.svg#VisbyCF-MediumOblique') format('svg');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-Medium.eot');
    src: url('/fonts/VisbyCF-Medium.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-Medium.woff2') format('woff2'),
        url('/fonts/VisbyCF-Medium.woff') format('woff'),
        url('/fonts/VisbyCF-Medium.ttf') format('truetype'),
        url('/fonts/VisbyCF-Medium.svg#VisbyCF-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-Heavy.eot');
    src: url('/fonts/VisbyCF-Heavy.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-Heavy.woff2') format('woff2'),
        url('/fonts/VisbyCF-Heavy.woff') format('woff'),
        url('/fonts/VisbyCF-Heavy.ttf') format('truetype'),
        url('/fonts/VisbyCF-Heavy.svg#VisbyCF-Heavy') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Visby CF';
    src: url('/fonts/VisbyCF-HeavyOblique.eot');
    src: url('/fonts/VisbyCF-HeavyOblique.eot?#iefix') format('embedded-opentype'),
        url('/fonts/VisbyCF-HeavyOblique.woff2') format('woff2'),
        url('/fonts/VisbyCF-HeavyOblique.woff') format('woff'),
        url('/fonts/VisbyCF-HeavyOblique.ttf') format('truetype'),
        url('/fonts/VisbyCF-HeavyOblique.svg#VisbyCF-HeavyOblique') format('svg');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}


.pulse {
    animation: pulse 2s infinite; 
}


@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.animate-on-scroll:not(.active) {
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
}

.fade-in {
    opacity: 0;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-out {
    opacity: 1;
    animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; display: none; }
}

.fade-in-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.slide-in-left {
    transform: translateX(-100%);
    animation: slideInLeft 1s forwards;
}

@keyframes slideInLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}

.slide-out-right {
    transform: translateX(0);
    animation: slideOutRight 1s forwards;
}

@keyframes slideOutRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); display: none; }
}

.slide-in-down {
    transform: translateY(-100%);
    animation: slideInDown 1s forwards;
}

@keyframes slideInDown {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}

.zoom-in {
    transform: scale(0.5);
    opacity: 0;
    animation: zoomIn 0.8s forwards;
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.zoom-out {
    transform: scale(1);
    opacity: 1;
    animation: zoomOut 0.8s forwards;
}

@keyframes zoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.5); opacity: 0; display: none; }
}

.rotate-in {
    transform: rotate(-180deg);
    opacity: 0;
    animation: rotateIn 1s forwards;
}

@keyframes rotateIn {
    from { transform: rotate(-180deg); opacity: 0; }
    to { transform: rotate(0deg); opacity: 1; }
}

.imagem-girando {
    animation: girarLentamente 10s linear infinite;
}

@keyframes girarLentamente {
    from {
        transform: rotate(0deg); 
    }
    to {
        transform: rotate(360deg); 
    }
}

.imagem-flutuando {
    animation: flutuarLentamente 4s ease-in-out infinite alternate;
    z-index: 999 !important;
}

@keyframes flutuarLentamente {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px); 
    }
    100% {
        transform: translateY(0); 
    }
}

body {
    background-color: var(--color-azul);
    font-family: 'Visby CF' !important;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-wrapper{
    padding-bottom: 20px !important;
}

.swiper-slide {
    padding: 10px !important;
    text-align: center;
    font-size: 18px;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-prev {
    color: var(--color-amarelo) !important;
}

.swiper-button-prev::after {
    font-size: 30px !important;
}

.swiper-button-next {
    color: var(--color-amarelo) !important;
}

.swiper-button-next::after {
    font-size: 30px !important;
}

.swiper-pagination {
    margin-top: 100px !important;
}

.swiper-pagination-bullet-active {
    background: var(--color-amarelo) !important;
}


.topo {
    padding: 30px 0;

    svg {
        width: 200px;
        height: auto;
    }

    & .menu {
        a {
            color: var(--color-branco);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        a:hover {
            color: var(--color-bege);
            transform: scale(1.1);
        }
    }
}

@media (max-width: 767.98px) {
    .topo {
        padding: 20px 0;

        svg {
            width: 150px;
        }

        & .menu-mobile-icon {
            background-color: var(--color-azul-escuro);
            border-radius: 10px;
            height: 50px;
            width: 50px;
            i {
                color: var(--color-branco);
                font-size: 35px;
            }
        }
    }
}

.menu-mobile {
    background-color: var(--color-azul);
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: 999;
    transform: translateX(-100%);
    transition: transform 0.4s ease;

    & .menu-mobile-links {
        height: 100vh;
        gap: 30px;

        a {
            color: var(--color-branco);
            text-decoration: none;
        }
    }

    & .menu-mobile-close {
        cursor: pointer;
        user-select: none;
        position: absolute;
        top: 30px;
        right: 20px;

        & i {
            font-size: 35px;
            color: var(--color-branco);
        }
    }
}

.menu-mobile.active {
    display: block; 
    opacity: 1;
    transform: translateY(0);
}

.banner {
    padding: 50px 0;
    color: var(--color-azul);
    img {
        width: 50%;
        height: 550px;
        object-fit: cover;
    }

    h1 {
        font-weight: bold;
    }
    
    p {
        margin-top: 10px;
    }

    & .base-texto {
        background-color: var(--color-branco);
        padding: 40px 20px 50px 40px;
        border-radius: 20px 0 0 20px;
        margin-right: -50px;
        z-index: 999;
    }

    & .btn-destaque {
        margin-top: 20px;
    }
}

@media (max-width: 767.98px) {
    .banner {
        text-align: center;
        padding: 20px 0;
        img {
            width: 100%;
            height: 450px;
            object-fit: cover;
        }

        p {
            margin-top: 10px;
        }

        & .base-texto {
            background-color: var(--color-branco);
            padding: 40px 20px;
            border-radius: 20px 20px 0 0;
            margin-right: 0;
            z-index: 999;
        }

        & .btn-destaque {
            margin-top: 20px;
        }
    }
}


.btn-destaque {
    transition: all 0.3s ease;
}

.btn-destaque:hover {
    transform: scale(1.05);
}

.btn-destaque a {
    display: block;
    background-color: var(--color-bege);
    color: var(--color-branco);
    text-decoration: none;
    padding: 15px 40px;
    border-radius: 10px;
    font-weight: bold;

}

.btn-destaque a:hover {
    background-color: var(--color-amarelo);
}

@media (max-width: 767.98px) {
    .btn-destaque a {
        padding: 15px 30px;
        margin-top: -15px;
        border-radius: 10px;
        font-weight: bold;
    }
}

.frase-destaque {
    margin-top: 70px;
    color: var(--color-branco);
    background-color: var(--color-azul) ;
    border: solid 1px var(--color-branco);
    border-radius: 20px;
    padding: 50px;

    & .divisor {
        background-color: var(--color-amarelo);
        width: 200px;
        height: 5px;
    }
}

@media (max-width: 767.98px) {
    .frase-destaque {
        margin-top: 50px;
        padding: 40px 20px;

        & .divisor {
            background-color: var(--color-amarelo);
            width: 200px;
            height: 5px;
        }
    }
}

.destaques {
    padding: 100px 0;

    span.titulo {
        background-color: var(--color-bege);
        color: var(--color-branco);
        padding: 10px 20px;
        border-radius: 10px;
        text-transform: uppercase;
        font-weight: bold;
        line-height: 1.2em;
    }

   

        & .card-one-destaques {
            height: 300px;
            width: 100%;
            background-color: var(--color-azul-escuro);
            border-radius: 10px;
            padding: 40px;

            h2 {
                color: var(--color-amarelo);    
                font-weight: bold;
            }

            p {
                color: var(--color-branco);
                margin-top: 15px;
            }
        }
    
}

.divisor-section {
    background-color: var(--color-branco);
    margin-top: -180px;
    width: 100%;
    height: 180px;
    border-radius: 100px 100px 0 0;
}

.video {
    background-color: var(--color-branco);
    padding-bottom: 100px;
    padding-top: 10px;
    margin-top: -2px;
}
.plyr__poster {
    background-size: cover !important; 
}

.plyr--video {
    border-radius: 15px !important;
}

.newsletter {
    background-color: var(--color-branco);
    padding: 10px 0;
    margin-top: -3px;

    & .container {
        background-color: var(--color-azul-escuro);
        border-radius: 15px;
        color: var(--color-branco);
        padding: 60px;

    }

    h2 {
        color: var(--color-amarelo);
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: bold;
    }

    & .formulario {
        width: 100%;

       form {
            input {
                width: 100%;
                padding: 15px;
                border-radius: 100px;
                border: none;
                height: 50px;
            }

            input::placeholder {
                color: var(--color-azul-escuro);
            }

            button {
                width: 100%;
                background-color: var(--color-bege);
                height: 50px;
                color: var(--color-branco);
                padding: 15px 0;
                border-radius: 100px;
                border: none;
                font-weight: bold;
                cursor: pointer;
            }
       }
    }

}


@media (max-width: 767.98px) {
    .newsletter {
        padding: 10px;

        & .container {
            padding: 60px 20px;

        }
    }
}


.points {
    background-color: var(--color-branco);
    color: var(--color-azul);
    padding: 100px 0;
    margin-top: -3px;

    img {
        height: 900px;
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

    h2 {
        text-transform: uppercase;
        letter-spacing: 5px;
        font-weight: bold;
    }

    p {
        line-height: 1em;
    }

    & .points-list {
        margin-top: 30px;

        & .point {
            span {
                background-color: var(--color-azul);
                border-radius: 50%;
                width: 50px;
                height: 50px;
                color: var(--color-amarelo);
                font-weight: bold;
                flex-shrink: 0;
            }

            p {
                margin: 0;
                line-height: 1em;
            }
        }
    }
}

.foto-advocacia {
    z-index: 777 !important;
}

@media (max-width: 767.98px) {
    .points {
        padding: 50px 0;

        img {
            height: 550px;
            width: 100%;
            object-fit: cover;
            border-radius: 20px;
            margin-top: 60px;
        }

        h2 {
            margin-top: 40px;
        }
    }
}

.faleagora {
    margin-top: -150px;
    height: 900px;
    background-image: url(/img/bg-faleagora.webp);
    background-position: center center;
    background-size: cover;
    background-repeat: none;

    & .btn-destaque {
        margin-bottom: 200px;
    }
}

@media (max-width: 767.98px) {
    .faleagora {
        margin-top: -150px;
        height: 600px;

        & .btn-destaque {
            margin-bottom: 100px;
        }

        & .btn-destaque a {
        font-size: var(--sub-2) !important;
        padding: 15px 20px;
        margin-top: -15px;
        border-radius: 10px;
        font-weight: bold;
        }
    }
}

.rodape {
    border-top: solid 40px var(--color-azul-escuro);
    padding: 50px 0;

    & .redes {
        margin: 40px 0;
        a {
            text-decoration: none;

            i {
                font-size: 20px;
                background-color: var(--color-branco);
                color: var(--color-azul);
                border-radius: 50%;
                width: 35px;
                height: 35px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }

        a:hover {
            i {
                background-color: var(--color-amarelo);
            }
        }
    }


    p {
        color: var(--color-branco);
        margin-top: 20px;
    }

    svg {
        width: 80px;
        height: auto;
    }
    
    & .links {
        a {
            color: var(--color-branco);
            text-decoration: none;
            transition: all 0.3s ease;
        }

        a:hover {
            color: var(--color-bege);
            transform: scale(1.1);
        }
    }
}

@media (max-width: 767.98px) {
  .rodape {        
        & .links {
            margin-bottom: 30px;
  
            a:hover {
                transform: none;
            }
        }
    }  
}



.swiper-icon-prev, .swiper-icon-next {
    cursor: pointer;
    background-color: var(--color-amarelo);
    border-radius: 100px;
    display: flex;
    padding: 10px 20px;
    svg {
        width: 30px;
        fill: var(--color-roxo);
    }
}

.swiper-icon-prev {
    svg {
        transform: scaleX(-1)
    }
}

.swiper-icon-prev-tecnologias, .swiper-icon-next-tecnologias {
    cursor: pointer;
    background-color: var(--color-roxo);
    border-radius: 100px;
    display: flex;
    padding: 10px 20px;
    svg {
        width: 30px;
        fill: var(--color-amarelo);
    }
}

.swiper-icon-prev-tecnologias {
    svg {
        transform: scaleX(-1)
    }
}

.setas-slide {
    justify-content: center;
    padding: 10px 20px;
}

.servicos-card:hover {
    transform: scale(1.01);
}

@media (max-width: 575.98px) {
    .setas-slide {
        justify-content: center;
    }
}

.swiper-button-disabled {
    opacity: 0.5; 
}

.servicos {
    margin-top: 50px;

    & .card {
        background-color: transparent;
        border: none;
        border-radius: 10px;
        padding: 10px;
                    height: 100% !important;


        h2 {
            color: var(--color-azul-escuro);
            font-weight: bold;
        }

        h3 {
            color: var(--color-azul-escuro);
            font-weight: 600;
        }  

        p {
            color: var(--color-azul-escuro);
            font-weight: 500;
        }


        & .conteiner {
            background-color: var(--color-amarelo);
            padding: 45px 15px 40px 15px !important;
            border-radius: 10px;
            position: relative;

            span {
                top: -40px;
                left: 50%;
                transform: translateX(-50%);
                position: absolute;
                background-color: var(--color-azul-escuro);
                border: solid 2px var(--color-amarelo);
                width: 60px;
                height: 60px;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 10px;

                img {
                    width: 100%;
                }
            }
        }


    }
}

@media (max-width: 575.98px) {
.servicos {

    & .card {

        & .conteiner {
        }
    }
}
}