/* Extra small (nenhum breakpoint específico) */
/* Estilos globais, aplicados para todas as telas menores que 576px */

/* Small (<576px) */
@media (max-width: 576px) {

    body {
       /* background-color: red !important; */
       padding-top: 62px;
    }
    .fundo-moldura {
        width: 97%;
        height: 412px;
        background-color: var(--primary-color-bg);
        border-radius: 20px;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .imagem-operadora {
        width: 96%;
        height: 412px;
        border-radius: 20px;
        object-fit: cover;
        position: absolute; /* Faz a imagem flutuar sobre a moldura */
        left: 1%; /* Ajuste o valor conforme necessário para deslocar a imagem para a direita */
        top: 5px;
    }

    .parceiros-img {
        filter: grayscale(0%);
        opacity: 1;
    }

    #cta-final h2{
        font-size: 2rem;
    }

    #diferenciais h2 {
        font-size: 2.5rem;
    }

    #depoimentos h2{
        font-size: 2.5rem;
    }

    .banner-titulo {
        font-size: 1.75rem !important;
    }

    .banner-content {
        margin-top: 120px;
    }

    .banner-copy {
        font-size: 1rem;
    }

    .carousel-item {
        width: unset;
    }
    .video-container {
        width: 585px !important;
        height: 412px !important;
        overflow: hidden !important;
        margin: 0 auto !important;
        position: relative !important;
        right: -20px !important;
        margin-left:13px !important;
        margin-top:35px !important;
        border-radius: 20px !important;
        }

}

/* Small (>577px) */
@media (min-width: 577px) {
    .fundo-moldura {
        width: 97%;
        height: 512px;
        background-color: var(--primary-color-bg);
        border-radius: 20px;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .imagem-operadora {
        width: 98%;
        height: 512px;
        border-radius: 20px;
        object-fit: cover;
        position: absolute; /* Faz a imagem flutuar sobre a moldura */
        left: 1%; /* Ajuste o valor conforme necessário para deslocar a imagem para a direita */
        top: 5px;
    }
    .video-container {
        width: 585px;
        height: 512px;
        overflow: hidden;
        margin: 0 auto;
        position: relative; /* permite deslocamento interno */
        right: -20px; /* joga o container 20px para a direita */
        margin-left:13px;
        margin-top:35px;
        border-radius: 20px; /* ajuste o valor como quiser */
        }
}

/* Medium (<768px) */
@media (max-width: 768px) {
    .form-overlay{
        position: relative !important;
        top: 0;
        left: 0;
        right: 0;
        width: 600px;
        margin-top: 70px !important;
        max-width: 90%;
        margin: 0 auto;
        z-index: 10;
        display: block !important;
    }
    .div-principal-rd {
        padding-top:130px !important;
    }

    .video-container {
        width: 485px;
        height: 512px;
        overflow: hidden;
        margin: 0 auto;
        position: relative; /* permite deslocamento interno */
        right: -20px; /* joga o container 20px para a direita */
        margin-left:13px;
        margin-top:35px;
        border-radius: 20px; /* ajuste o valor como quiser */
    }
}

/* Medium (≥768px) */
@media (min-width: 768px) {
    /* Estilos aplicados para telas com largura maior ou igual a 768px */

    body {
        /*Cor de fundo para verificar o breaking point*/
        /* background-color: lightblue; */ 
        padding-top: 56px;
    }

    .ps-footer-list {
        padding-left: 6rem;
    }
    .video-container {
        width: 412px;
        height: 512px;
        overflow: hidden;
        margin: 0 auto;
        position: relative; /* permite deslocamento interno */
        right: -20px; /* joga o container 20px para a direita */
        margin-left:13px;
        margin-top:35px;
        border-radius: 20px; /* ajuste o valor como quiser */
        }
}

/* Medium (≥768px) and  Large (<991px) */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .banner-titulo{
        font-size: 1.9rem;
        font-weight: 700;
    }
    .banner-content{
        margin-top:174px !important;
    }
}

/* Large (≥992px) */
@media (min-width: 992px) {
    /* Estilos aplicados para telas com largura maior ou igual a 992px */
    body {
       /* background-color: lightgreen; */
    }

    .cta-final-content h2 {
        font-size: 2rem;
    }

    .cta-final-copy {
        max-width: 381px;
    }

    .cta-final-img {
        background-image: url('../img/cta-img-lg.webp');
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
    }

    #depoimentos h2 {
        max-width: 668px;
    }

    #cta-final h2{
        max-width: 324px;
    }

    .banner-titulo{
        font-size: 2rem;
        font-weight: 700;
    }

    .banner-copy {
        font-size: 1rem;
        font-weight: 400;
    }

    #diferenciais h2 {
        font-size: 2rem;
    }

    #diferenciais h3 {
        font-size: .75rem;
    }

    .banner-content {
        text-align: left;
        margin-top:-114px !important;
    }
}

/* Large (<1097px) */
@media (max-width: 1097px) {
    .form-overlay{
        position: relative;
        top: 0;
        left: 0;
        right: 0;
        width: 600px;
        margin-top: 70px !important;
        max-width: 90%;
        margin: 0 auto;
        z-index: 10;
    }
}

/* Extra large (≥1098px) */
@media (min-width: 1098px) {
    .form-overlay{
        margin-top:-30px !important;
    }
}

/* Extra large (<1199px) */
@media (max-width: 1199px){
    .banner-content{
        margin-top:174px !important;
    }
}

/* Extra large (≥1200px) */
@media (min-width: 1200px) {
    /* Estilos aplicados para telas com largura maior ou igual a 1200px */
    body {
        /* background-color: lightpink; */
    }

    .cta-final-content h2 {
        font-size: 2.25rem;
    }

    .cta-final-copy {
        max-width: 472px;
        font-size: 1.25rem;
    }

    .cta-final-img {
        background-image: url('../img/cta-img-xl.webp');
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
    }

    #cta-final h2{
        max-width: 364px;
    }
    .fundo-moldura {
        width: 412px;
        height: 512px;
        background-color: var(--primary-color-bg);
        border-radius: 20px;
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }
    
    .imagem-operadora {
        width: 412px;
        height: 512px;
        border-radius: 20px;
        object-fit: cover;
        position: absolute; /* Faz a imagem flutuar sobre a moldura */
        left: 1%; /* Ajuste o valor conforme necessário para deslocar a imagem para a direita */
        top: 5px;
    }
    .form-overlay{
        margin-top:-33px !important;
    }
    .banner-content{
        margin-top:-74px !important;
    }
}

/* Extra large (≥1287px) and Extra large (<1347px) */
@media screen and (min-width: 1287px) and (max-width: 1347px) {
    .form-overlay{
        margin-top:-26px !important;
    }
}

/* Extra large (>1348px) */
@media (min-width: 1348px) {
    .form-overlay {
        position: absolute;
        top: 50%;              /* Move para o meio */
        right: 10%;
        transform: translateY(-50%); /* Corrige o alinhamento central */
        width: 400px;
        max-width: 90%;
        z-index: 10;
        margin-top:3px !important;
    }
    .div-form-header {
        height: 300px !important;
        background: transparent !important;
    }

}

/* Extra large (≥1287px) and Extra large (<1574px) */
@media screen and (min-width: 1287px) and (max-width: 1574px) { 
    .banner-content{
        margin-top:-104px !important;
    }
}

/* Extra extra large (≥1400px) */
@media (min-width: 1400px) {
    /* Estilos aplicados para telas com largura maior ou igual a 1400px */
    body {
       /* background-color: rgb(240, 201, 128); */
    }

    .cta-final-content h2 {
        font-size: 2.5rem;
    }

    .cta-final-img {
        background-image: url('../img/cta-img-xxl.webp');
        background-size: cover;
        background-position: right;
        background-repeat: no-repeat;
    }

    #cta-final h2{
        max-width: 405px;
    }

    .banner-content {
        text-align: left;
    }

    .banner-titulo{
        font-size: 2.5rem;
        font-weight: 700;
    }

    .banner-copy {
        font-size: 1.25rem;
        font-weight: 400;
    }
   
}

/* Extra large (<1880px) */
@media (max-width: 1880px) {
    .banner-content{
        margin-top:-94px !important;
    }
}