:root {
    --color-roxo: #671578;
    --color-amarelo: #FFC82A;
    --color-laranja: #EF4E36;
    --color-azul: #3E56A3;
    --color-preto: #000000;
    --color-branco: #FFFFFF;
    --color-cinza-light: #EAEAEA;
    --color-verde: #0A982E;
    --gradient-roxo-amarelo: linear-gradient(to right, var(--color-roxo) 0%, var(--color-amarelo) 100%);
    --gradient-roxo-laranja: linear-gradient(to right, var(--color-roxo) 0%, var(--color-laranja) 100%);
}

.head-1 {
    font-size: 3rem; /* 60px */
    margin: 0; 
}

.head-2 {
    font-size: 2.8125rem; /* 45px */
    margin: 0; 
}

.head-3 {
    font-size: 2rem; /* 45px */
    margin: 0; 
}

.sub-1 {
    font-size: 1.2rem; /* 24px */
    margin: 0; 
}

.sub-2 {
    font-size: 1.1rem; /* 20px */
    margin: 0; 
}

.sub-3 {
    font-size: 1rem; /* 16px */
    margin: 0; 
}

.sub-4 {
    font-size: 0.875rem; /* 14px */
    margin: 0; 
}

@media (max-width: 767.98px) {
    .head-1 {
        font-size: 9vw; 
    }

    .head-2 {
        font-size: 6.5vw; 
    }

    .head-3 {
        font-size: 6vw; 
        margin: 0; 
    }

    .sub-1 {
        font-size: 4.2vw; 
    }

    .sub-2 {
        font-size: 4vw; 
    }

    .sub-3 {
        font-size: 2.1vw; 
    }

    .sub-4 {
        font-size: 3vw; 
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .head-1 {
        font-size: 3.3rem; /* 60px */
        margin: 0; 
    }    
}

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

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

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

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

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

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

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

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

.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; /* Opcional: esconde o elemento após o fade */ }
}

.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 {
    font-family: 'BelfastGrotesk' !important;
    overflow-x: hidden !important;
}

h1 {
    font-family: 'BelfastGrotesk' !important;
}

.finisher-header {
    width: 100% !important;
}

.pag-sobre {
    & .header {
      & .headline {
        height: 350px;
        h1 {
            margin-top: -7%;
        }
      }
    }

    & .sobre {

        & .container-sobre {
            width: 1000px;
            max-width: 95%; 

            & .headline {
                width: 100%;

                p {
                    width: 100%; 
                }
            }
        }
    }

    & .missao {
        margin-top: 100px;
        padding: 0 0 150px 0;
        background-color: var(--color-roxo);
        position: relative;

        & .divisor {
            background-color: var(--color-amarelo);
        }

        & .abas {
            margin-top: 0px;

            & .aba {
                margin-top: 30px;
                cursor: pointer;
                padding: 0px 0px;
                border-bottom: solid 2px var(--color-amarelo);
                h2 {
                    color: var(--color-branco);
                    margin-bottom: 5px;
                }
                
                p {
                    color: var(--color-branco);
                    margin-bottom: 10px;
                }

                i {
                    font-size: 2rem;
                    color: var(--color-amarelo);
                    transition: transform 0.3s ease;
                }
            }
        }
    }

    & .qualificacoes {
        padding: 100px 0;
        background-color: var(--color-amarelo);
        margin-top: -4px !important;

        & .row {
            margin: 0px !important;
        }

        & .card-qualificacoes {
            background-color: var(--color-branco);
            padding: 40px 30px;
            border-radius: 10px;

           

            & .icone {
                background-color: var(--color-amarelo);
                border-radius: 10px;
                height: 50px;
                width: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-bottom: 10px;
            }

            h2 {
                color: var(--color-roxo);
            }

            p {
                color: var(--color-roxo);
            }
        }
    }

    & .rodape {
        margin-top: 0px !important;
    }
}
.aba-conteudo {
    max-height: 0;
    opacity: 0;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out; 
}

.aba-conteudo.active {
    max-height: 200px; 
    opacity: 1;
}

.aba-titulo.active i {
    transform: rotate(180deg);
}

@media (max-width: 767px) {
    .pag-sobre {
        & .header {
          & .headline {
            height: 300px;
            h1 {
                margin-top: -12%;
            }
          }
        }
    }
}

.header {
    width: 100%;
    height: auto;
    position: relative;
    padding-top: 40px;

    & .topo {
        background-color: white;
        padding: 20px;
        height: 90px;
        border-radius: 10px;
        svg {
            width: 250px;
        }

        & .bar-menu {
            svg {
                width: 30px;
            }
        }
    }

    & .menu {
        gap: 30px;

        & a {
            text-decoration: none;
            color: var(--color-preto);
            transition: transform 0.3s ease-in-out; 
        }
        
        & a:not(.btn-destaque):hover {
            color: var(--color-roxo);
            transform: scale(1.1); 
        }
    }
}

@media (max-width: 575.98px) {
    .header {
        & .topo {
            svg {
                width: 75%;
            }
        }
    }
}

.btn-destaque {
    width: auto;
    background-color: var(--color-amarelo);
    padding: 15px 30px;
    border-radius: 100px;
    color: var(--color-preto);
    text-decoration: none;
    transition: transform 0.3s ease-in-out; 

    & a {
        width: auto;
        color: var(--color-preto);
        text-decoration: none;
    }
}

.btn-destaque:hover {
    color: var(--color-roxo);
    transform: scale(1.1); 
}

.btn-destaque-roxo {
    width: auto;
    background-color: var(--color-roxo);
    padding: 15px 30px;
    border-radius: 100px;
    color: var(--color-branco);
    text-decoration: none;
    transition: transform 0.3s ease-in-out; 
}


.btn-destaque-roxo a {
    width: auto;
    color: var(--color-preto);
    text-decoration: none;
}

.btn-destaque-roxo svg {
    width: 55px;
    margin-left: 8px;
    fill: var(--color-branco);
}

.btn-destaque-roxo:hover {
    color: var(--color-amarelo);
    transform: scale(1.1) !important; 

    & svg {
        fill: var(--color-amarelo);
    }
}

.btn-principal button {
    width: auto;
    border: none;
    padding: 15px 30px;
    border-radius: 100px;
    color: var(--color-preto);
    background-color: var(--color-amarelo);
    text-decoration: none;
    transition: transform 0.3s ease-in-out; 

    & a {
        width: auto;
        color: var(--color-preto);
        text-decoration: none;
    }

    & svg {
        width: 55px;
        margin-left: 8px;
        fill: var(--color-branco);
    }
}

.btn-principal button:hover {
    color: var(--color-roxo);
    transform: scale(1.1); 

    & a {
        color: var(--color-roxo);
    }

    & svg {
        fill: var(--color-roxo);
    }
}

.btn-principal.roxo button {
    background-color: var(--color-roxo); 
    color: var(--color-branco); 
}

.btn-principal.roxo button:hover {
    color: var(--color-amarelo); 
    transform: scale(1.1);
}

.btn-principal.roxo button a {
    color: var(--color-branco);
}

.btn-principal.roxo button:hover a {
    color: var(--color-amarelo); 
}

.btn-principal.roxo button svg {
    fill: var(--color-branco);
}

.btn-principal.roxo button:hover svg {
    fill: var(--color-amarelo); 
}


button.submit {
    width: auto;
    border: none;
    padding: 15px 30px;
    border-radius: 100px;
    color: var(--color-branco);
    background-color: var(--color-verde);
    text-decoration: none;
    transition: transform 0.3s ease-in-out; 

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

    & svg {
        width: 55px;
        margin-left: 8px;
        fill: var(--color-branco);
    }
}

button.submit:hover {
    transform: scale(1.1); 

}

.headline {
    color: var(--color-branco);

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

    & h1 {
        margin-top: 20%;
    }
}

.foto-mockup img {
   z-index: 2;
}

@media (min-width: 1920px) and (max-width: 3839px) {
    .foto-mockup img {
        width: 190%;
        margin-left: -20%;
        padding-top: 30px;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .foto-mockup img {
        width: 180%;
        margin-left: -30%;
        padding-top: 30px;
    }
}

@media (min-width: 1280px) and (max-width: 1439px) {
    .foto-mockup img {
        width: 195%;
        margin-left: -5%;
        padding-top: 30px;
    }
}

@media (min-width: 768px) and (max-width: 1279px) {
    .headline {
        text-align: center;

        & .container {
            padding: 50px 0;
            align-items: center !important;
        }

        & h1 {
            margin-top: 30px;
        }

        & .text {
            width: 100% !important;
            justify-content: center !important;
            align-items: center !important;
        }
    }
    .foto-mockup img {
        width: 100%;
        margin-left: 0%;
        padding-top: 20px;
    }
}

@media (max-width: 767px) {
    .headline {
        text-align: center;

        & .container {
            padding: 50px 0;
            align-items: center !important;
        }

        & h1 {
            margin-top: 30px;
        }
    }
    .foto-mockup img {
        width: 130%;
        margin-left: 0;
        padding-top: 25px;
    }
}

.divisor {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 95%; 
    max-width: 1641px; 
    background-color: var(--color-branco);
    height: 100px;
    border-radius: 100px 100px 0 0;
    z-index: 1;
}


@media (max-width: 767px) {
    .divisor {
        height: 90px;
        border-radius: 60px 60px 0 0;
    }
}

.sobre {
    padding: 0 0 100px 0;
    background-color: var(--color-branco);
    margin-top: -1px;

    @media (max-width: 1100px) {
        padding: 50px 0;
    }

    & .container-sobre {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1100px;
        max-width: 90%; 
        flex-wrap: wrap; 
        
        @media (max-width: 1100px) { 
            flex-direction: column; 
            align-items: center;
            width: 100%;
        }

        & .headline {
            width: 620px;
            max-width: 100%; 

            img {
                width: auto;
                max-width: 50%;
            }
            
            @media (max-width: 1100px) {
                text-align: center;
            }

            h2 {
                color: transparent;
                background-image: var(--gradient-roxo-amarelo);
                -webkit-background-clip: text; 
                background-clip: text;
                text-transform: uppercase;
                padding-top: 4px;
                z-index: 2;
            }
    
            p {
                color: var(--color-preto);
                z-index: 2;
                width: 700px; 
                max-width: 100%;
            }
        }

        & .botao {
            margin-left: 40px;
            margin-top: 30px;
            
            @media (max-width: 1100px) {
                width: 100%; 
                display: flex;
                justify-content: center; 
                margin-left: 0px;
                margin-top: 20px;
            }
        }
    }
}

.servicos {
    padding: 100px 0 200px 0;
    background-color: var(--color-roxo);
    color: var(--color-branco);

    & .servicos-card {
        width: 100%;
        transition: transform 1s ease;

        & .image {
            height: 274px;
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center center;
            width: 100%;
            border-radius: 10px 10px 0 0;
        }

        h2 {
            color: var(--color-preto);
            text-transform: uppercase;

        }

        .text {
            border-radius: 0 0 10px 10px;
            background-color: var(--color-branco);
            height: 200px;
            padding: 15px;

            h2 {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100px;
            }
        }
    }
}

.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; 
}

.porque {
    background-color: var(--color-branco);
    padding: 0 0 100px 0;

    h2 {
        color: transparent;
        background-image: var(--gradient-roxo-amarelo);
        -webkit-background-clip: text; 
        background-clip: text;
        text-transform: uppercase;
        padding-top: 4px;
        margin-right: 60px;
    }

    & .topicos {

        & .topico {
            overflow: hidden;
            
            & .point {
                background-color: var(--color-roxo);
                width: 30px;
                height: 30px;
                border: solid 6px var(--color-amarelo);
                border-radius: 50%;
            }

            & .linha {
                background-color: var(--color-roxo);
                width: 2px;
                height: 50px;
            }

            & .texto {
                width: auto;
                p {
                    color: var(--color-roxo);
                    margin-left: 20px;
                }
            }
        }
    }

}

.pag-servico {
    & .servicos-servico {

        position: relative;

        & .circulo {
            margin-top: 0px;
            margin-bottom: -141px;
            z-index: 999;
        }

        & .servicos {
            padding: 200px 0 200px 0;
        }
    }


}

@media (max-width: 767.98px) {
    .pag-servico {
        & .servicos-servico {
            & .circulo {
                margin-bottom: -75px;
            }

            & .servicos {
                padding: 150px 0 200px 0;
            }
        }
    }
}

.circulo {
    background-color: var(--color-branco);
    width: 282px;
    height: 282px;
    border-radius: 50%;
    margin-top: -141px;

    & svg {
        width: 60%;
    }
}

@media (max-width: 767.98px) {
    .porque {
        padding: 0 0 100px 0;

        h2 {
            margin-right: 0px;
            text-align: center !important;
            margin-bottom: 30px;
        }
    
        & .topicos {
            width: 85%;
            & .topico {
                & .texto {
                    p {
                        margin-left: 10px;
                    }
                }
            }
        }
    }

    .circulo {
        width: 150px;
        height: 150px;
        margin-top: -75px;

        & svg {
            width: 60%;
        }
    }
}

.frase {
    margin: 0 auto;
    width: 95%; 
    max-width: 1641px; 
    background-color: var(--color-amarelo);
    height: auto;
    border-radius: 100px 100px 0 0;
    z-index: 1;
    padding: 50px 20px 20px 20px;

    h2 {
        color: transparent;
        background-image: var(--gradient-roxo-laranja);
        -webkit-background-clip: text; 
        background-clip: text;
        font-style: italic;
        width: 683px;
        max-width: 100%;
    }
}


@media (max-width: 767px) {
    .frase {
        border-radius: 60px 60px 0 0;
        padding: 50px 20px 20px 20px;
    }
}

.tecnologias {
    position: relative;
    padding: 100px 0 200px 0;
    background-color: var(--color-amarelo);
    color: var(--color-branco);
    margin-top: -2px;

    h2 {
        color: var(--color-roxo);
    }

    p {
        color: var(--color-roxo);
    }

    & .tecnologias-card {
        width: 100%;

        & .image-padding {
            background-color: var(--color-branco);
            height: 258px;
            width: 350px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px 0 0 10px;

        }

        & .image {
            height: 200px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center center;
            background-color: var(--color-branco);
            width: 300px;
            
        }

        h2 {
            color: var(--color-preto);
            text-transform: uppercase;

        }

        .text {
            border-radius: 0 10px 10px 0;
            background-color: var(--color-roxo);
            height: 258px;
            padding: 20px;

            h2 {
                display: flex;
                justify-content: center;
                align-items: center;
                color: var(--color-branco);
            }
        }
    }
}


@media (max-width: 767px) {
    .tecnologias {
        padding: 60px 0 150px 0;
    
        h2 {
            color: var(--color-roxo);
        }
    
        p {
            color: var(--color-roxo);
        }
    
        & .tecnologias-card {

            & .image-padding {
                height: 258px;
                width: 100%;    
                border-radius: 10px 10px 0 0;
            }
    
            & .image {
                height: 200px;
                width: 90%;
            }
    
            & .text {
                width: 100%;
                height: 130px;
                padding: 40px 20px;
                border-radius: 0 0 10px 10px;
            }
        }
    }
}    

.contato {
    padding: 0 0 100px 0;
    margin-top: -2px;
    
    & .headline {
        h2 {
            color: transparent;
            background-image: var(--gradient-roxo-laranja);
            -webkit-background-clip: text; 
            background-clip: text;
            text-transform: uppercase;
            width: 683px;
            max-width: 100%;
        }

        p {
            color: var(--color-preto);
        }

        img {
            width: auto;
            max-width: 50%;
        }
    }

    & .formulario {
        background-color: var(--color-roxo);
        padding: 50px 30px;
        border-radius: 10px;


        & input {
            background-color: var(--color-branco);
            padding: 15px;
            text-align: center;
            color: var(--color-preto);
            border: solid 2px var(--color-cinza-light);
            border-radius: 100px;
        }
    
        & input::placeholder {
            color: var(--color-preto);
        }
    
        & select {
            background-color: transparent;
            padding: 15px;
            text-align: center;
            color: var(--color-white);
            border: solid 2px var(--color-white);
        }
    
    }
}

#formularioEnviado {
    h2 {
        color: var(--color-branco);
    }
}

@media (max-width: 767px) {
    .contato {
        padding: 0 0 100px 0;
        
        & .headline {
            img {
                width: auto;
                max-width: 80%;
            }
        }
    
        & .formulario {
            padding: 50px 15px;
            border-radius: 10px;
    
    
            & input {
                background-color: var(--color-branco);
                padding: 15px;
                text-align: center;
                color: var(--color-preto);
                border: solid 2px var(--color-cinza-light);
                border-radius: 100px;
            }        
        
        }
    
        & .ctas {
            & .btn-principal {
                width: 100% !important;
    
                button {
                    width: 100%;
                }
            }
        }
    }
}

.rodape {
    background-color: var(--color-cinza-light);
    padding: 35px 0;
    margin-top: 60px;

    svg {
        width: 250px;
    }

    & i {
        color: var(--color-roxo);
        font-size: 1.3rem;
    }

    & i:hover {
        color: var(--color-azul);
    }
}

.copy {
    padding: 5px 0;
    background-color: var(--color-roxo);
    color: var(--color-branco);
}

.menu-pop-up { 
    padding: 20px;
    background-color: var(--color-roxo); 
    width: 100%;
    height: 100vh;
    position: fixed; 
    top: 0;
    z-index: 999;
    
    transform: translateX(-100%);
    transition: transform 1s ease;


    & .container {
        height: 100vh;
    }

    & a {
        text-decoration: none;
        color: var(--color-branco);
    }
    
    & a:not(.btn-destaque):hover {
        color: var(--color-amarelo);
    }

    & .close-button { 
        i {
            color: var(--color-branco);
            font-size: 2rem; 
            position: absolute;
            top: 20px;
            right: 20px;
        }
    }

    & .menu {
        a {
            margin-left: 20px;
        }
    }

    & .btn-principal button:hover {
        transform: none !important;
    }
}

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

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    width: 100%;
    max-width: 100%;
}
.gallery-item {
    width: 350px;
    height: 250px;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
}
.gallery-item:hover {
    transform: scale(1.03);
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 767px) {
    .gallery-item {
        width: 48%;
        height: 250px;
    }
}

.swiper-slide a {
    text-decoration: none !important;
    color: var(--color-preto);
}