:root {
    --primary: #fef4de;
    --button-light: #f3ce5e;
    --white: #fff;
    --brown: #5c2c24;
    --brown-gray: #72433a;
    --gray: #c2c2c2;
    --orange: #ff6e1d;
    --font-header: "Poppins", sans-serif;
    --font-body: "Roboto", sans-serif;
    --font-size-small: 1rem;
    --font-size-medium: 1.2rem;
    --font-size-large: 6rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: linear-gradient(72deg, #1b18f8 3%, #000000 99%);
}

/* .section-vid {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: space-evenly;
} */

.caixa-video-mario {
    position: fixed;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.video112 {
        display: none;
    }

.video111 {
    position: fixed;
    top: -2.9rem;
    min-height: 100%;
    min-width: 100%;
}

/* .mascara-video {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(109deg, rgba(10, 12, 16, 0.99) 15%, rgba(10, 12, 16, 0.7) 50%, rgba(10, 12, 16, 0.99) 85%);
} */

 .mascara-video {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background: linear-gradient(109deg, rgba(10, 12, 16, 0.695) 15%, rgba(10, 12, 16, 0.65) 50%, rgba(10, 12, 16, 0.695) 85%);
}


html {
    scroll-behavior: smooth;
}

.header {
    width: 100%;
    display: flex;
    flex-direction: initial;
    align-items: start;
    padding: 1rem 1.5rem;
    position: fixed;
    z-index: 1001;
    background: rgb(177, 46, 126, 0.8);
    box-shadow: rgba(0, 0, 0, 0.19) 0px 1px 4px;

}

.logo-img {
    display: flex;
    filter: drop-shadow(2px 2px 2px black);
}

.logo {
    display: flex;
    flex-direction: row;
    width: 450px;
    height: 50px;
    font-family: var(--font-header);
    font-weight: 700;
    
    margin-left: 0.3rem;
    color: var(--brown);
    cursor: pointer;
}


.logo a {

    font-size-adjust: 1;
    padding: 2px;
    text-decoration: none;
    color: var(--orange);
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}



.logo span {
    padding: 2px;
    font-size-adjust: 1;
    color: #a525cc;

    filter: drop-shadow(2px 2px 2px black);
}

.logox {
    width: 43px;
    height: 43px;
    border-radius: 50%;
}


/* MENU */
.navigation {
    width: 70%;
}

.navigation ul {
    display: flex;
    margin-top: 10px;
    justify-content: end;
    gap: 1rem;
}

.navigation ul li {
    list-style: none;
    cursor: pointer;
}

.navigation ul li a {
    font-size-adjust: 0.8;
    font-family: var(--font-header);
    text-decoration: none;
    color: var(--orange);
    font-weight: 500;
}
.pipeline {
    color:#e4d93e;
}
.nav-item:hover {
    color: var(--white);
}

/* Inicio do BANNER  */

.banner {
    width: 100%;
    /*background: #e4e2f5;
    background: linear-gradient(72deg, #135f46 1%, #4e13ce 99%);*/
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-evenly;
    
    /*background: linear-gradient(72deg, #3debb0 3%, #4e13ce 99%);*/
   /* background: -webkit-radial-gradient(circle, #3debb0, #4e13ce);  Safari 5.1 - 6.0 */
    /*background: -o-radial-gradient(circle, #3debb0, #4e13ce);  Opera 11.1 - 12.0 */
   /* background: -moz-radial-gradient(circle, #3debb0, #4e13ce); /* Firefox 3.6 - 15 */

    /* background: radial-gradient(circle, #420eb4,#30c594 ); */

    /*  background-color: rgba(255, 255, 255, 0.5);
    Fundo branco com 50% de transparência */
}

.banner-content {
    width: 75%;
    padding: 6rem 0 2rem;
    display: flex;
    margin: auto;
}

.banner-text {
    margin: auto;
    width: 50%;
}

.banner-title {
    font-family: "Permanent Marker", serif;
    /* font-family: var(--font-header);*/
    font-size: 5rem;
    /* color: #582966; */
    /*background: linear-gradient(circle, rgba(255, 215, 0, 1) 0%, rgba(247, 37, 90, 0.904) 100%);
     color:  #fae06a;*/
    color: gold; 
    line-height: 118%;
    text-transform: uppercase;
    font-weight: 900;


    left: 0;
    animation: effectNextTitle 3s linear 1 forwards;
    z-index: 2;
    filter: blur(0);
    opacity: 1;
     filter: drop-shadow(4px 1px 1px var(--brown-gray)); 
    /*text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87;*/


}

.banner-subtitle {
    font-size: var(--font-size-medium);
    font-family: var(--font-header);
    /* color: #491e57; */
    color:red;
    line-height: 1rem;
    font-size-adjust: 1;
    padding-top: 40px;
   

    left: 0;
    animation: effectNextSubtitle 3s linear 1 forwards;
    z-index: 2;
    filter: blur(0);
    opacity: 1;
    filter: drop-shadow(4px 1px 1px var(--brown-gray));
    /* text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
}

.banner-subtitle2 {
    font-size: var(--font-size-medium);
    font-family: var(--font-header);
    /* color: #491e57; */
    color: red;
    line-height: 3rem;
    font-size-adjust: 1;

    left: 0;
    animation: effectNextSubtitle2 3.5s linear 1 forwards;
    z-index: 2;
    filter: blur(0);
    opacity: 1;
    filter: drop-shadow(4px 1px 1px var(--brown-gray));
   /*  text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
}

.banner-img {
    width: 50%;
    display: flex;
    transform: rotateY(180deg);
}

.banner-image {
    margin: auto auto;
    width: 50%;
    border-radius: 2rem;
    right: 0;
    animation: effectNextThumb 2.5s linear 1 forwards;
    z-index: 2;
    filter: blur(0);
    opacity: 1;

}

.banner-image:hover {
    width: 60%;
    filter: drop-shadow(4px 2px 2px var(--brown-gray));
    transform: rotateY(180deg);
    transition: all 2s ease;
}




.banner-description {
    font-size: var(--font-size-medium);
    font-family: var(--font-body);
    padding: 0 0.3rem;
    /* color: #250730; */
    color: #fff;
    width: 85%;
    Margin-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 1.5rem;

    left: 0;
    animation: effectNextDescription 3.5s linear 1 forwards;
    z-index: 2;
    filter: blur(0);
    opacity: 1;
    /* filter: drop-shadow(4px 1px 1px var(--brown-gray));
    text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
}

.banner-button {

    width: 150px;
    background: var(--orange);
    padding: 0.7rem 2rem;
    border-radius: 2rem;
    text-decoration: none;
    font-family: var(--font-body);
    color: var(--white);
    font-weight: 600;
    font-size: var(--font-size-small);
}


.banner-button2 {
    width: 150px;
    background: #32CD32;
    padding: 0.7rem 2rem;
    border-radius: 2rem;
    margin: 1rem;
    text-decoration: none;
    font-family: var(--font-body);
    color: var(--white);
    font-weight: 600;
    font-size: var(--font-size-small);
    text-align: center;

}

@keyframes effectNextThumb {
    from {
        margin: auto auto;
        width: 50%;
        border-radius: 2rem;
        transform: translateX(-800px);
        filter: blur(20px);
        opacity: 0;

    }
}

@keyframes effectNextTitle {
    from {
        margin: auto auto;
        width: 50%;
        border-radius: 2rem;
        transform: translateX(-800px);
        filter: blur(20px);
        opacity: 0;

    }
}

@keyframes effectNextSubtitle {
    from {
        margin: auto auto;
        width: 50%;
        border-radius: 2rem;
        transform: translateY(-800px);
        filter: blur(20px);
        opacity: 0;

    }
}

@keyframes effectNextSubtitle2 {
    from {
        margin: auto auto;
        width: 50%;
        border-radius: 2rem;
        transform: translateY(-800px);
        filter: blur(20px);
        opacity: 0;

    }
}

@keyframes effectNextDescription {
    from {
        margin: auto auto;
        width: 50%;
        border-radius: 2rem;
        transform: translateY(400px);
        filter: blur(20px);
        opacity: 0;

    }
}

/* Fim do BANNER  */


/* Inicio -  qrcode na tela */
.qrcode-site {
    position: absolute;
    top: 150px;
    right: 35px;
    width: 100px;
    height: 100px;
    cursor: pointer;
    transition: all 1s ease;
}

.qrcode-site:hover {
    position: absolute;
    top: 150px;
    right: 20px;
    width: 180px;
    height: 180px;
}
/* Fim - qrcode na tela */



/* inicio Carrocell responsivo*/

.gmedias {
    background: radial-gradient(circle, #34a780,#3a1688 );
}

.cardist {

    width: 100%;
    display: flex;
    /* Adicionando flex para centralizar conteúdo */
    justify-content: center;
    /* Centraliza o conteúdo horizontalmente */
    align-items: center;
    /* Centraliza o conteúdo verticalmente */
    flex-direction: column;
    padding-bottom: 2rem;
}

.content0 {
    display: flex;
    flex-direction: column;
    /* Alinha o conteúdo na vertical (se necessário) */

}

.content1 {
    height: 100%;
    /* Faz a altura ocupar toda a altura do cardist */
    max-width: 635px;
    /* Define uma largura máxima para manter a estética */
    width: 100%;
    /* Permite que o container se ajuste ao tamanho da tela */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* Adiciona sombra para um efeito mais moderno */
}

.navigation1 {
    display: flex;
    /* Alinha os botões de navegação em linha */
    justify-content: center;
   
    border-radius: 1rem;



    margin: 0.6rem auto;
    border-radius: 8px;
    
    background: linear-gradient(72deg, #3debb0 1%, #8956f3 99%);
}

.barx {
    width: 70px;
    height: 17px;
    border: 2px solid #fff;
    margin: 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.4s;
}

.barx:hover {
    background-color: #fff;
}

.cardist input {
    display: none;
}

.slides {
    /* Mantém a cor de fundo do carrossel */
    margin: auto;
    display: flex;
    width: 500%;
    /* Continua a largura total dos slides */
    height: 100%;
    /* Faz o slide ocupar 100% da altura do content1 */
}

.slide {
    width: 20%;
    /* Cada slide ocupa 20% da largura total */
    transition: 0.6s;
    /* Transição suave entre slides */
}

.slide img {
    width: 100%;
    height: 100%;
}

#slide1:checked~.s1 {
    margin-left: 0%;
}

#slide2:checked~.s1 {
    margin-left: -20%;
}

#slide3:checked~.s1 {
    margin-left: -40%;
}

#slide4:checked~.s1 {
    margin-left: -60%;
}

#slide5:checked~.s1 {
    margin-left: -80%;
}

/* fim do Carrocell responsivo*/





/* Inicio Foto Grid */
.cards {

    width: 100%;
    
    display:flex;
    flex-direction:column; 
   /* justify-content: center;*/
    /*align-items: center;*/
}



.card-content {
    width: 100%;
    display: flex;
    margin-left: auto;
    margin-right:auto;
    /* flex-direction:row; */
    justify-content: space-between;
    max-width: 1200px;
    padding: 0.3rem 8rem;
    flex-wrap: wrap;
}

.card-title {
    width: 100%;
    padding-top:2.5rem;
    padding-bottom:2rem;
    font-family: var(--font-header);
    color: var(--white);
    font-size: 30px;
    text-align: center;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}

.card {
    width: 200px;
    height: 250px;
    margin: 1rem 0.5rem;
    /*  border: 1px solid var(--primary);*/
    border-radius: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}



#card0 {
    background: url("../img2/cd0.webp") center center no-repeat;
    background-size: 160px;
    border-radius: 8px;
}

#card1 {
    background: url("../img2/cd1.webp") center center no-repeat;
    background-size: 160px;
}

#card2 {
    background: url("../img2/cd2.webp") center center no-repeat;
    background-size: 150px;
}

#card3 {
    background: url("../img2/cd3.webp") center center no-repeat;
    background-size: 130px;
}

#card4 {
    background: url("../img2/cd4.webp") center center no-repeat;
    background-size: 160px;

}

#card5 {
    background: url("../img2/cd5.webp") center center no-repeat;
    background-size: 180px;

}

#card6 {
    background: url("../img2/cd6.webp") center center no-repeat;
    background-size: 180px;
}

#card7 {
    background: url("../img2/cd7.webp") center center no-repeat;
    background-size: 180px;

}

#card8 {
    background: url("../img2/cd8.webp") center center no-repeat;
    background-size: 180px;
}

#card9 {
    background: url("../img2/cd9.webp") center center no-repeat;
    background-size: 160px;
}

#card10 {
    background: url("../img2/cd10.webp") center center no-repeat;
    background-size: 180px;
}

#card11 {
    background: url("../img2/cd11.webp") center center no-repeat;
    background-size: 180px;
}



.card-button {
    display: flex;
    font-family: var(--font-body);
    width: 150px;
    justify-content: center;
    padding: 0.7rem;
    border-radius: 2rem;
    background: var(--button-light);
    font-size: var(--font-size-small);
    color: var(--brown);
    font-weight: 500;
    border: none;
    margin: 0.4rem auto 2rem;
    cursor: pointer;
    transition: filter 0.2s;
}

.card-button:hover {
    filter: brightness(0.9);
}

#card0:hover,
#card1:hover,
#card2:hover,
#card3:hover,
#card4:hover,
#card5:hover,
#card6:hover,
#card7:hover,
#card8:hover,
#card9:hover,
#card10:hover,
#card11:hover {
    background-size: 200px;
}



.arrow {
    display: none;
}

/* Final Foto Grid */


/* Inicio Projetos */
.card-title {
    width: 100%;
    padding-top:2.5rem;
    padding-bottom:4rem;
    font-family: var(--font-header);
    color: var(--white);
    font-size: 30px;
    text-align: center;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
} 
.projetos {
    width:100%;
    height: auto;
    padding: 2rem 6rem;
}
.projetos-caixa {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    max-width: 1200px;
    padding: 0 auto;
}
.projetos-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    border: 1px solid var(--vidro);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: pointer;
}
.projetos-card:hover {
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
    transform: translateY(-10px) scale(1.03);
}

.projetos-titulo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}


.projetos-imagem {
    height: 400px;
    width: 100%;
    object-fit: cover;
}

/* .projetos-imagem2,
.projetos-imagem1 {
    height: 210px;
    width: 100%;
    object-fit: contain;
    padding-top: 10px;
} */


.caixa-textos-projeto {
    padding: 1.5rem;

    h3 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        color: rgb(250, 116, 38);
    }
}

.paragrafo-projetos {
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.25rem;
}

.info-projetos {
    margin-bottom: 5px;
}
/* Final Projetos */


/* DESCRIPTIONS */
.descriptions {
    width: 100vw;
    height: auto;
    padding-bottom: 2rem;
    /* background: hwb(60 86% 3%); */
    /*background: rgb(250, 250, 249);*/
    background: #fff;
}

.descriptions-title {
    text-align: center;

    padding: 2rem;
    font-size: 1.7rem;
    color: var(--brown);
  
    font-weight: 700;
    font-family: var(--font-header);
}

.description-content {
    width: 90%;
    margin: 1rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.description-card {
    width: calc(40% - 20px);
    max-width: 40%;
    padding: 2.5rem 2rem;
    background: #f0ecec;
    font-family: var(--font-body);
    border-radius: 2rem;
    display: flex;
    row-gap: 1rem;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.description-title {
    color: var(--brown);
    font-size: var(--font-size-small);
}

.description-button {
    display: flex;
    text-decoration: none;
    font-family: var(--font-body);
    width: 150px;
    justify-content: center;
    padding: 0.7rem;
    border-radius: 2rem;
    background: var(--button-light);
    font-size: var(--font-size-small);
    border: none;
    margin: 0.4rem auto 2rem;
    cursor: pointer;
    transition: filter 0.2s;
    color: var(--brown);
    font-weight: 600;
}

.desc-button2 {
    padding-bottom: .6rem;
}


.description-button2 {
    display: flex;
    text-decoration: none;
    font-family: var(--font-body);
    width: 150px;
    justify-content: center;
    padding: 0.7rem;
    border-radius: 2rem;
    background: var(--button-light);
    font-size: var(--font-size-small);
    border: none;
    margin: 2.5rem auto 2rem;
    cursor: pointer;
    transition: filter 0.2s;
    color: var(--brown);
    font-weight: 600;
}

.description-button:hover {
    filter: brightness(0.9);
}

/* inicio da area de pagamento pix */
.pagamento-pix {
    width: 100%;
    height: auto;
    background: green;
    display: flex;
    flex-direction: column;
}
.pagamento-pixx {
    width: 100%;
    height: auto;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2rem auto 2rem auto;
    
}
.pix-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2rem auto 2rem auto;

    h2 {
        font-size: 2rem;
        color: var(--white);
        font-family: var(--font-header);
        font-weight: 600;
        margin-bottom: 1.5rem;
        margin-top: 1.2rem;
    }
}

.pix-img {
    width: 250px;
    height: 250px;
    margin-top: 1rem;
}


.pix-info p {
    width: 500px;
    height: 200px;
    font-size: .8rem;
    color: var(--white);
    font-weight: 600;
    font-family: var(--font-header);
    margin-top: 1rem;
    padding: 5px 20px 5px 20px;
}
/* final da area de pagamento pix */

/* Inicio de Quentions */
.question-content {
    width: 85%;
    margin: 3rem auto 2rem;
    display: flex;
}

.question-description {
    font-size: 30px;
    padding: .5rem;
    text-align: center;
}

.questions-title,
.questions-text {
    width: 80%;
    color: var(--white);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}


.question-text {
    width: 100%;
    font-size: var(--font-size-small);
    font-family: var(--font-body);
    margin-top: 1.5rem;
}

.question {
    height: 3rem;
    text-align: center;
    padding-top: 7px;
    font-weight: 500;
    cursor: pointer;
    color: var(--white);
    border-top: #c2bcbc solid 1px;
    border-radius: 10px;
    background: linear-gradient(70deg, rgb(100, 143, 114), rgb(78, 160, 67));
}
.question:hover {
    color:#f0b512;
    background: var(--brown-gray);
}

.question-list,
.question-answers {
    font-size: var(--font-size-small);
    font-family: var(--font-body);
    font-weight: 400;
    padding: 0.2rem 1rem 2rem 2rem;
    color: var(--white); 
}

.plan-btn2 {
    color:var(--white);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 800;
    background: green;
    border-radius: 5px;
}

/* Fim de Quentions */




/* CONTATO  */
.contact {
    width: 100%;
    background: var(--white);
    
}
.border-top {
    width:90%;
    display:block;
    margin-left:auto;
    margin-right: auto;
    border-top: 2px solid rgb(0,0,0, 0.3);
}
.contact-content {
    width: 90%;
    margin: auto;
    display: flex;
}

.contact-title {
    text-align: center;
    padding: 3rem 0;
    font-size: var(--font-size-medium);
    color: var(--brown);
    font-weight: 600;
    font-family: var(--font-header);
    font-size-adjust: 0.8;
}

.contact-form {
    width: 50%;
    display: flex;
    margin: 2rem;
    row-gap: 1rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact-form input {
    border-radius: 4rem;
    padding: 0 1rem;
    font-size: var(--font-size-medium);
    height: 60px;
    border: solid 3px var(--gray);
    width: 475px;
}

.contact-form textarea {
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    font-size: var(--font-size-medium);
    height: 286px;
    border: solid 3px var(--gray);
    width: 475px;
    font-family: var(--font-body);
}

.contact-img {
    width: 70%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn {
    display: flex;
    font-family: var(--font-body);
    width: 150px;
    justify-content: center;
    padding: 0.7rem;
    border-radius: 2rem;
    background: var(--button-light);
    color: var(--brown);
    font-weight: 600;
    font-size: var(--font-size-small);
    border: none;
    margin: 0.4rem auto 2rem;
    cursor: pointer;
    transition: filter 0.2s;
}

.contact-btn:hover {
    filter: brightness(0.9);
}

.logo-contact {
    color: var(--white);
}



.images-medias {
    display: flex;
    justify-content: center;
}


#media {
    cursor: pointer;
    margin: 10px;
    /*width: 40px;
    height: 40px;*/
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}

#media:hover {
    width: 60px;
    height: 60px;
    filter: drop-shadow(4px 2px 2px var(--brown-gray));
    transition: all 0.1s ease;
}



.buttonss {
    display: flex;
    align-items: center;
}

#gministerio {
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    font-size: var(--font-size-medium);
    color: var(--white);
    font-weight: 700;
    font-family: var(--font-header);
    font-size-adjust: 0.8;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}

.banner-button2:hover,
.banner-button:hover,
.description-button2:hover {
    width: 153px;
    opacity: 0.8;
    background-color:#ff0202;
    transition: all 0.2s ease;
}


.musicmenezes {
    width: 100%;
    display: flex;
    justify-content: center;
}

#musica {
    width: 50%;
    border-radius: 10px;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}

.titulo-videos {
    width: 100vw;
    font-family: var(--font-header);
    color: var(--white);
    font-size: 20px;
    text-align: center;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}

#title-music {
    width: 100vw;
    margin-top: 20px;
    font-family: var(--font-header);
    color: var(--white);
    font-size: 20px;
    text-align: center;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}



.classevide {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    gap: 3rem;
    flex-wrap: wrap;
    
    background-image: url('../img4/photo-1403.webp');
    background-size: cover; /* Ajusta a imagem para cobrir todo o fundo */
    background-position: center; /* Centraliza a imagem */
    background-repeat: no-repeat; /* Impede que a imagem se repita */
    
}

.enzo {
    border-radius: 20px;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
    margin-bottom: 2rem;
}



/* Inicio - icones fixos na tela */
.android-image {
    width: 60px;
    position: fixed;
    z-index: 1001;
    left: 25px;
    top: 110px;
    cursor: pointer;
    border: 2px solid #32CD32;
    border-radius: 50%;
    font-size: 15px;
}

.android-image:hover {
    border: 2px dashed #32CD32;
}
 
.whatsapp-content {
    display:flex;
    position: relative;
}

.whatsapp-contato-image {
    width: 65px;
    position: fixed;
    z-index: 1001;
    right: 20px;
    bottom: 50px;
    cursor: pointer;
    transition: all 1s ease;
}

.whatsapp-contato-image:hover {
    transform: rotate(90deg) translate(0, 0);
}
/* FIM - icones fixos na tela */

/*Inicio do footerr */

.footerr {
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    background: #b12e7e;
}

.footer-contacto-pai {
    width: 100vw;
    display: flex;
    Margin-top: 1rem;
    align-items: center;
    font-family: var(--font-header);
    filter: drop-shadow(2px 1px 1px var(--orange));
}

.footer-contacto {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    margin: 0 auto;
    justify-content: center;
    align-items: center;

}

.footer-image {
    margin: 0.8rem;
    border-radius: 50%;
    filter: drop-shadow(2px 1px 1px var(--orange));
}

.footer-icons {
    margin: 1rem auto 0 auto;
    list-style: none;
    align-items: center;
    justify-content: center;
    display: flex;
}



.icons-list {
    display: flex;
    gap: 2rem;
    font-size: 2rem;
    color: var(--white);
}

.icons-links {
    font-size: 2rem;
    color: var(--white);
}

.icons-links:hover {
    color: #ff0202;
}

.copyright {
    font-size: 8px;
    color: #fff;
    text-align: center;
    padding: 14px 0;
}

/* .copy-right_text {
    color: var(--gray);
    text-align: center;
    font-size: var(--font-size-small);
    font-size-adjust: .3;
}

Final do footer */
/* RESPONSIVE  */

@media only screen and (min-width: 601px) and (max-width: 1024px) {
  
   
    .navigation,
    .pipeline {
        display: none;
    } 
    
 
    .nav-item:hover {
        color: var(--brown);
    }
    .banner-text1 {
        width: 600px;
        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .banner-subtitle {
        font-size: 1.2rem;
        color: red;
        /* color: #491e57;
        filter: drop-shadow(4px 1px 1px var(--brown-gray));
        text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
    }

    .banner-subtitle2 {
        font-size: 1.2rem;
        color: red;
        /* color: #491e57;
        filter: drop-shadow(4px 1px 1px var(--brown-gray));
        text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
    }


    .card-content {
        justify-content: center;
        margin: auto;
    }

    .header {
        justify-content: space-between;
    }


    .navigation {
        display: none;
    }


    #nav-items {
        position: fixed;
        display: flex;
        height: auto;
        width: 100%;
        right: 0px;
        align-items: center;
        padding: 40px 17px;
        flex-direction: column;
        justify-content: start;
        z-index: 1000;
        top: 77px;
        background: var(--primary);
        transition: all 2s ease;
    }

    .navigation.active {
        display: block;
    }

    .bars.active .bar:nth-child(1) {
        transition: all 1s ease;
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .bars.active .bar:nth-child(2) {
        opacity: 0;
    }

    .bars.active .bar:nth-child(3) {
        transition: all 1s ease;
        transform: rotate(45deg) translate(-5px, -6px);
    }
}



@media only screen and (max-width: 600px) {
    
     .video111,
    .navigation,
    .pipeline,
    .banner-button2 {
        display: none;
    }

    .whatsapp-contato-image {
    position: fixed;
    z-index: 1001;
    right: 10px;
    bottom: 20px;
    cursor: pointer;
}



   .video112 {
        display: block;
        position: fixed;
        top: -2.5rem;
        min-height: 100%;
        min-width: 100%;
    }


    /* DESCRIPTIONS RESPONSIVE */
    .description-title,
    .description,
    .description-rating {
        text-align: center;
    }

    /* CONTACT RESPONSIVE */
    .contact-form input,
    .contact-form textarea {
        max-width: 90%;
        margin: auto;
    }



    /* Inicio do Logo responsivo*/

    .header {
        width: 100%;
        display: flex;
        padding: 1rem 1.1rem;
        position: fixed;
        z-index: 1001;
        background: #b12e7e;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 1px 4px;
    }

    .logo {
        display: flex;
        padding: 0 10px;
        flex-direction: column;
        width: 13rem;
        height: 3.2rem;
        font-family: var(--font-header);
        font-weight: 700;
        color: var(--brown);
        cursor: pointer;
    }

    .logo a {
        width: 15rem;
        height: 1.6rem;
        font-size-adjust: .80;
        padding: 0 0.1rem;
        text-decoration: none;
        color: var(--orange);
        filter: drop-shadow(2px 2px 2px black);
    
    }

    .logo span {
        width: 14rem;
        padding-left: 0.1rem;
        font-size-adjust: .80;
        color: #a525cc;
        filter: drop-shadow(2px 2px 2px black);
    }

    .logox {
        width: 55px;
        height: 55px;
        border-radius: 50%;
    }

    .logo-img {
        display: flex;
    }

    /* .logo span {
        display: none;
    }

     Fim do Logo responsivo*/

 
     /*Inicio da responsividade do qrcode */
     .qrcode-site {
        position: absolute;
        top: 110px;
        right: 15px;
        width: 50px;
        height: 50px;
        cursor: pointer;
        transition: all 1s ease;
    }
    
    .qrcode-site:hover {
        position: absolute;
        top: 150px;
        right: 15px;
        width: 380px;
        height: 380px;
        z-index: 1000;
    }
    /*fim da responsividade do qrcode */

    /* Inicio do BANNER  */

    .banner {
        width: 100%;
       
    }

    .banner-text1 {

        display: flex;
        flex-direction: column;
        align-items: center;

    }

    .banner-text {
        margin: 2rem;
        width: 50%;
    }

    .banner-subtitle {
        font-size: var(--font-size-medium);
        font-family: var(--font-header);
        /* color: #491e57; */
        color: red;
        line-height: 1rem;
        padding: 10px;
        font-size-adjust: 1;
       filter: drop-shadow(4px 1px 1px var(--brown-gray));
        /*  text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
    }

    .banner-subtitle2 {
        font-size: var(--font-size-medium);
        font-family: var(--font-header);
        /* color: #491e57; */
        color: red;
        line-height: 1rem;
        width: 310px;
        padding: 5px 15px 20px;
        font-size-adjust: 1;
        filter: drop-shadow(4px 1px 1px var(--brown-gray));
         /*text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */

    }



    .banner-title {
        text-align: center;
        font-size: var(--font-size-large);
        /*font-family: var(--font-header);*/
        /* color: #582966; */
        color: #fae06a;
        line-height: 100%;
        text-transform: uppercase;
        font-weight: 800;
        filter: drop-shadow(4px 1px 1px var(--brown-gray));
    }



    .banner-description {
        /* font-size: var(--font-size-small); */
        font-size: var(--font-size-medium);

        font-family: var(--font-body);
        padding: 0.7rem 0.5rem;
        /* color: #250730; */
        color: #fff;
        width: 300px;
        margin-bottom: 1.5rem;
        /* filter: drop-shadow(4px 1px 1px var(--brown-gray));
        text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
    }

    .buttonss {
        width: 320px;
        display: flex;
        flex-direction: row;
        padding-left: 1rem;


    }

    .banner-button {
        width: 300px;
        background: var(--orange);
        border-radius: 2rem;
        text-decoration: none;
        font-family: var(--font-body);
        color: var(--white);
        font-weight: 800;
        font-size: var(--font-size-medium);
    }

    .banner-button:hover,
    .description-button2:hover {
        width: 300px;
        opacity: 0.8;
        background-color:#ff0202;
        transition: all 0.2s ease;
    }

    /* Fim do BANNER  */



    /* inicio Carrocell responsivo*/

    .cardist {
        height: 300px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items:center;
        padding-bottom: 2rem;
    }

    .content1 {
        height: 240px;
        width: 350px;
        border-radius: 20px;
        margin-left: auto;
        margin-right: auto;

      
        /*  position: absolute;*/
    }

    .navigation1 {
        border-radius: 8px;
        justify-items: center;
        display: flex;
        background: linear-gradient(72deg, #3debb0 1%, #8956f3 99%);
    }

    .barx {
        width: 56px;
        height: 20px;
        border: 2px solid #fff;
        margin: 6px;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.4s;
    }

    /* fim do Carrocell responsivo*/



    /* CARDS RESPONSIVE */





/* Inicio Projetos */
.card-title {
    width: 100%;
    padding-top:2.5rem;
    padding-bottom:2rem;
    font-family: var(--font-header);
    color: var(--white);
    font-size: 30px;
    text-align: center;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
} 

.projetos {
    width:100%;
    height: 750px;
    padding: 1rem 1rem;
}
.projetos-caixa {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /* Esconder barra de rolagem */
    -ms-overflow-style: none; /* Para Internet Explorer e Edge */
    scrollbar-width: none; /* Para Firefox */
}

.projetos-caixa::-webkit-scrollbar {
    display: none; /* Para Chrome, Safari e Edge */
}
.projetos-card {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    backdrop-filter: blur(5px);
    border: 1px solid var(--vidro);
    overflow: hidden;
    transition: all 0.5s ease;
    cursor: grab;
}
.projetos-card:hover {
    box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
    transform: translateY(-5px) scale(1.03);
}

.projetos-titulo {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
}


.projetos-imagem {
    height: 400px;
    width: 100%;
    object-fit: cover;
}
 
.caixa-textos-projeto {
    padding: 1.5rem;

    h3 {
        font-size: 1.3rem;
        margin-bottom: 1rem;
        color: rgb(250, 116, 38);
    }
}

.paragrafo-projetos {
    color: rgba(226, 232, 240, 0.8);
    line-height: 1.25rem;
}

.info-projetos {
    margin-bottom: 5px;
    
}
/* Final Projetos */











    /* Inicio Foto Grid */
    /* .cards {
        padding: 1rem 0;
        width: 100%;
    }



    .card-content {
        width: 100%;
        display: flex;
        justify-content: space-between;
        max-width: 1200px;
        padding: 0.3rem 2.4rem .5rem 0;
        flex-wrap: wrap;
    }




    .card {
        width: 100%;
        height: 450px;
        min-width: 300px; */
        /* border: 1px solid var(--primary)
        ;*/

        /* margin: 1rem 10px;
        border-radius: 8px;
        cursor: grab;
        transition: all 0.2s ease;
        filter: drop-shadow(2px 1px 1px var(--brown-gray));
    }

    #card0 {
        background: url("../img2/cd0.webp") center center no-repeat;
        background-size: 400px;
        border-radius: 8px;
    }

    #card1 {
        background: url("../img2/cd1.webp") center center no-repeat;
        background-size: 400px;
    }

    #card2 {
        background: url("../img2/cd2.webp") center center no-repeat;
        background-size: 400px;
    }

    #card3 {
        background: url("../img2/cd3.webp") center center no-repeat;
        background-size: 400px;
    }

    #card4 {
        background: url("../img2/cd4.webp") center center no-repeat;
        background-size: 400px;

    }

    #card5 {
        background: url("../img2/cd5.webp") center center no-repeat;
        background-size: 500px;

    }

    #card6 {
        background: url("../img2/cd6.webp") center center no-repeat;
        background-size: 500px;
    }

    #card7 {
        background: url("../img2/cd7.webp") center center no-repeat;
        background-size: 500px;

    }

    #card8 {
        background: url("../img2/cd8.webp") center center no-repeat;
        background-size: 500px;
    }

    #card9 {
        background: url("../img2/cd9.webp") center center no-repeat;
        background-size: 400px;
    }

    #card10 {
        background: url("../img2/cd10.webp") center center no-repeat;
        background-size: 500px;
    }

    #card11 {
        background: url("../img2/cd11.webp") center center no-repeat;
        background-size: 500px;
    }

    .card-button {
        display: flex;
        font-family: var(--font-body);
        width: 150px;
        justify-content: center;
        padding: 0.7rem;
        border-radius: 2rem;
        background: var(--button-light);
        font-size: var(--font-size-small);
        color: var(--brown);
        font-weight: 500;
        border: none;
        margin: 0.4rem auto 0 auto;
        cursor: pointer;
        transition: filter 0.2s;
    }

    .card-button:hover {
        filter: brightness(0.9);
    }

    #card0:hover,
    #card1:hover,
    #card2:hover,
    #card3:hover,
    #card4:hover,
    #card5:hover,
    #card6:hover,
    #card7:hover,
    #card8:hover,
    #card9:hover,
    #card10:hover,
    #card11:hover {
        background-size: 500px;
    } */


    
    .card-content {
        flex-wrap: nowrap;
        overflow-x: scroll;
        /* overflow-x: scroll; */
        /* Esconde a barra de rolagem Para firefox*/
        scrollbar-width: none;
        /* Esconde a barra de rolagem Para internet explore e edge*/
        -ms-overflow-style: none;

        /* Esconde a barra de rolagem e manter a funcinalidade*/
        overflow: whidden;
        /* Mantém a funcionalidade de rolagem vertical e manter a funcinalidade*/
        overflow-y: scroll;
        margin-left: 0;
    }

    .card-content::-webkit-scrollbar {
        /*background: #7446f3;
        border-radius: 20px;*/
        /* Esconde a barra de rolagem Para chromer safari e opera*/
        display: none;
    }

    /*.card-content::-webkit-scrollbar-thumb {
        background: var(--brown);
        background: #7446f3;
        border: 1px solid var(--button-light);
        border-radius: 20px;*/





    .arrow {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        gap: 100px;

    }

    .btn-arrow {
        border: none;
        background: white;
        cursor: pointer;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
    }

    .btn-arrow2 {
        border: none;
        background: white;
        cursor: pointer;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }

    .bx {
        font-size: 1.6rem;
        color: var(--brown);
        padding: 10px 35px 10px;

    }
/* Final Foto Grid */


    

    /* MENU RESPONSIVE */
    .header {
        justify-content: space-between;
    }

    .navigation {
        display: none;
    }

    .bars {
        cursor: pointer;
        margin-top: 8px;
    }

    .bar {
        display: block;
        width: 28px;
        height: 3px;
        background: var(--orange);
        border-radius: 3px;
        margin: 5px auto;
    }

    #nav-items {
        position: fixed;
        display: flex;
        height: auto;
        width: 100%;
        right: 0px;
        align-items: center;
        padding: 40px 17px;
        flex-direction: column;
        justify-content: start;
        z-index: 1000;
        top: 67px;
        background: var(--primary);
        transition: all 1s ease;
    }

    .nav-item:hover {
        color: var(--brown);
    }

    .navigation.active {
        display: block;
    }

    .bars.active .bar:nth-child(1) {
        transition: all 1s ease;
        transform: rotate(-45deg) translate(-5px, 6px);
    }

    .bars.active .bar:nth-child(2) {
        opacity: 0;
    }

    .bars.active .bar:nth-child(3) {
        transition: all 1s ease;
        transform: rotate(45deg) translate(-5px, -6px);
    }

.android-image {
    width: 60px;
    position: fixed;
    z-index: 1001;
    left: 15px;
    top: 100px;
    cursor: pointer;
    border: 2px solid #32CD32;
    border-radius: 50%;
    font-size: 15px;
}

.questions-title,
.questions-text {
    width: 86%;
    color: var(--white);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem;
}

/* inicio da area de pagamento pix */
.pagamento-pix {
    width: 100%;
    height: auto;
    background: green;
    display: flex;
    flex-direction: column;
}
.pagamento-pixx {
    width: 100%;
    height: auto;
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2rem auto 2rem auto;
    
}
.pix-container {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 2rem auto 2rem auto;

    h2 {
        font-size: 1.8rem;
        color: var(--white);
        font-family: var(--font-header);
        font-weight: 600;
        margin-bottom: 1.5rem;
        margin-top: 1.2rem;
    }
}

.pix-img {
    width: 250px;
    height: 250px;
    margin-top: 1rem;
}


.pix-info p {
    width: 400px;
    height: 200px;
    font-size: .8rem;
    color: var(--white);
    font-weight: 600;
    font-family: var(--font-header);
    margin-top: 1rem;
    padding: 5px 20px 5px 20px;
}
/* final da area de pagamento pix */

}

@media only screen and (max-width: 1024px) {
    :root {
        --font-size-small: 0.8rem;
        --font-size-medium: 1rem;/**/
        --font-size-large: 4rem;
    }

    #gministerio {
    padding-top: 1.5rem;
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
    font-size: 1.2rem;
    color: var(--white);
    font-weight: 700;
    font-family: var(--font-header);
    font-size-adjust: 0.8;
    filter: drop-shadow(2px 1px 1px var(--brown-gray));
}

    .bars {
        cursor: pointer;
        margin-top: 8px;
        
    }

    .bar {
        display: block;
        width: 28px;
        height: 3px;
        background: var(--orange);
        border-radius: 3px;
        margin: 5px auto;
    }

    /* BANNER RESPONSIVE .banner-img*/
    .contact-img {
        display: none;
    }

    .banner {
        width: 100%;
        display: flex;
        border-radius: 0;
    }


    .banner-content {
        width: 100%;
        height: 980px;
        display: flex;
        flex-direction: column;
    }

    .banner-title {
        text-align: center;
        font-size: var(--font-size-large);
        /*font-family: var(--font-header);*/
        /* color: #582966; */
        color: #fae06a;
        text-transform: uppercase;
        font-weight: 800;
        margin-top: 1rem;
        margin-bottom: 1rem;
        filter: drop-shadow(4px 1px 1px var(--brown-gray));
    }

    .banner-text {
        width: 80%;
        row-gap: 1rem;
        align-items: center;
        justify-content: center;
        display: flex;
        flex-direction: column;
    }



    .banner-description {
        text-align: center;
        color: #fff;
        /*color: #250730;
         filter: drop-shadow(4px 1px 1px var(--brown-gray));
        text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87; */
    }

    .banner-button {
        text-align: center;
    }


    .banner-img {
        /* margin: 1rem auto 2; */
        width: 100%;
    }

    .banner-image:hover {
        width: 220px;
        filter: drop-shadow(4px 2px 2px var(--brown-gray));
        transition: all 0.2s ease;
    }

    .banner-image {
        margin: auto auto;
        width: 200px;
        border-radius: 2rem;
        background: var(--orange);
    }

    /* DESCRIPTIONS RESPONSIVE */
    .description-content {
        flex-direction: column;
    }

    .description-title {
        color: var(--brown);
        font-size: var(--font-size-medium);
    }

    .description-card {
        width: 90%;
        max-width: 90%;
    }

    /* CONTACT RESPONSIVE */
    .contact-form {
        width: 90%;
        margin: auto;
    }

}