@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: "Poppins", serif;

}

.section {
    border-top: solid 5px var(--secondary-color);
   
    width: 100%;
    /* text-align: justify; */
}

.ST{
    margin-top: 3rem;
    height: 45rem;
}

.ST2{
    margin-bottom: 1rem;
    height: 45rem;
}
.sectionFull {

    width: 100%;

}

h1 {
    font-size: 200%;

}

.section h1 {
    font-weight: 300;

}

.section h2 {
    font-size: 150%;
    font-weight: 300;
}

.section p {
    font-size: 90%;
}

body {
    background-color: var(--primary-color);
    color: #d4d4d4;

}

.img {
    height: 100%;
    -webkit-height: 100%;
    -moz-height: 100%;
    -ms-height: 100%;
    object-fit: contain;
}

.img2 {
    -webkit-width: 100%;
    -moz-width: 100%;
    -ms-width: 100%;
    width: 100%;
    object-fit: cover;
}

.img3 {
    width: 100%;
    -webkit-width: 100%;
    -moz-width: 100%;
    -ms-width: 100%;
    -webkit-height: 100%;
    -moz-height: 100%;
    -ms-height: 100%;
    height: 100%;
    object-fit: cover;
}


.alingH {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alingV {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

}

.hero {
    /* background: url('../imgs/consultoria-financeira.webp') no-repeat center center/cover; */
    color: white;
    text-align: center;
    height: 50vh;
    width: 100%;

}

.hero h2 {
    font-size: 140%;
    text-align: start;
    font-weight: 300;
    margin-bottom: 0.5em;
}

.hero p {
    font-size: 85%;
    margin-bottom: 1em;
    text-align: start;
}

.img_capa {
    height: 50vh;
    flex: 0 0 100%;
    position: relative;
    display: flex;
    align-items: center;

}


.img_capa .img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    position: relative;
    filter: brightness(0.3);

}

.img_capa span {
    width: 100%;
    position: absolute;
    z-index: 10;


}

.img_service {
    height: 50vh;
}

.img_service span {
    bottom: 3rem
}

.carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.cards-container {
    display: flex;
    /* Garante que os slides fiquem em linha */

    width: 100vw;
    transition: transform 0.5s ease;
}

.card {
    flex: 0 0 100vw;
    /* Cada card terá 100% da largura da viewport */
    box-sizing: border-box
}

.div_nav-dots {
    position: absolute;
    width: 100%;
    z-index: 90;
    top: 85%;
}


.nav-dots {
    text-align: center;
    margin-top: 10px;
}

.nav-dots .dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background-color: #858585;
    border-radius: 50%;
    cursor: pointer;
}

.nav-dots .dot.active {
    background-color: #ddd;
}



.cta-button {
    background-color: var(--secondary-color);
    color: white;
    padding: 0.8em 1.5em;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.services {
    /* background-color: var(--backColor); */
    background-color: var(--backColor);
    margin-bottom: 4rem;
}

#services2 {
    background-color: var(--gray-color);

}

#cards_beneficios {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    /* padding: 2rem; */


}

.services .section {
    color: #f5f5f5;
    /* border-top: solid 5px var(--terciary-color); */
}

#cards_beneficios .section {
    color: #f5f5f5;

}

#services2 .section {
    border-top: solid 5px var(--primary-color);
}



.services,
.about,
.contact {
    padding: 2em 0;

}

#contact {
    background-color: #d4d4d4;
    color: #333;
}

.container {
    width: 80%;
    filter: brightness(100%);
    margin: 0 auto;
}

.services h2,
.about h2,
.contact h2 {
    text-align: center;
    margin-bottom: 1em;
}

.service-items {
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
    color: #333;
    flex-direction: column;
    gap: 4rem;
}

.gap {
    gap: 2rem
    
}

.service-item {
    background-color: white;
    padding: 1.5em;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
    height: 5rem;
    flex: 1 1 calc(33% - 2em);
    transition: 0.2s;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.service-item:hover {
    /* transform: scale(1.15); */

    cursor: pointer;
    background-color: #d4d4d4;
}

.service-item h3 {
    margin-bottom: 0.5em;
}

.about p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.contact {
    background-color: var(--backColor);
    color: white;
    text-align: center;
}

.contact p {
    margin-bottom: 1em;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em 0;
}

.Flashlogin {
    display: flex;
    margin: 1.3rem;
    align-items: center;
    padding: 1rem;
    height: auto;
    flex-direction: column;
    overflow: hidden;
    justify-content: space-between;
}

.Servicos{
    height: 35rem;
    display: flex;
    align-items: center;
}

.detalhesBoxes {
    display: flex;

    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}


.prev-btn,
.next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    z-index: 10;
    background-color: #f5f5f5;
    cursor: pointer;
    border-radius: 10px;

    padding: 0.5rem;
    opacity: 60%;
}

.prev-btn {
    left: 10px;
    height: 3rem;
}


.prev-btn img {
    rotate: 180deg;
}

.next-btn {
    right: 10px;
    height: 3rem;
}



.div_b {
    width: 100%;
    display: none;
    align-items: center;
    padding: 2rem;
    height: 15vh;
    margin-top: 2rem;
    overflow: hidden;
    /* background-color: var(--secondary-color); */
}

.blob_ {
    height: 45rem;
    width: 100%;
    display: flex;
    overflow: hidden;
    /* border-radius: 63% 45% 28% 70% / 80% 50% 55% 42%; */
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
    justify-content: center;
}

/* border-radius: 82% 29% 18% 70% / 59% 88% 12% 50%; */



.scroll_animado {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.5s ease-in-out;

}

/* Classe para ativar a animação */
.scroll_animado.show {
    opacity: 1;
    transform: translateY(0);
}

.card_info {
    background-color: var(--white-color);
    width: 100%;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 0.5rem;
    padding-top: 4rem;
    padding-bottom: 2rem;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;


}

.icon_card {
    height: 5rem;
    width: 5rem;
    padding: 0.5rem;
    background-color: var(--primary-color);
    border-radius: 2rem;
    position: absolute;
    top: -3rem;
}


.vertical-section {
    display: flex;
    width: 90%;
    /* background-color: aqua; */
    align-items: center;
    justify-content: center;
    margin: 2rem 0;
    border-bottom: 5px solid var(--secondary-color);

}

.v-s2 {
    border-right: 5px solid var(--blue-color);

}

.vertical-section h1 {
    text-align: center;

}

.desc_conteudo {
    text-align: justify;
    width: 90%;

}

.desc_conteudo ul {
    padding-left: 3rem;
}

.backImg {
    position: absolute;
    z-index: -5;
    height: 104%;
    width: 100vw;
    filter: brightness(0.3);
    object-fit: cover;
}

.tutorial {
    display: flex;
    position: relative;
    width: 100%;
    color: var(--white-color);
    flex-direction: column;
    align-items: center;

    /* margin-top: 2rem; */
    /* margin-bottom: 4rem; */
    /* padding-top: 4rem; */
    /* padding-bottom: 4rem; */
}



.tutorial .alingH {
    /* height: 28rem; */
    flex-direction: column;
    justify-content: space-between;

}


.tutorial .alingV {
    justify-content: center;
    align-items: start;
    width: 90%;
}

.FT {
    margin: 0;
    padding: 2rem;
}


.tutorial .section {
    color: var(--white-color);
    margin-top: 4rem;
}

.tutorial .Hreverse {
    flex-direction: column-reverse;
}

.offMarginPaddin{
    margin: 0;
    padding: 0;
}
/* 
.h_IMG{
    height: 10rem;
} */

.ops{
    display: flex;
    position: absolute;
    top: 30%;
    right: 23%;
}


@media (min-width: 700px) {

    .tutorial .alingH {
        flex-direction: row;
        height: 15rem;
        justify-content: center;
    }

    .tutorial .alingV {
        width: 50%;
    }


    #cards_beneficios {
        padding: 4rem;

    }

    #cards_beneficios .backImg {}



    #cards_beneficios .fundo_img {
        height: 100%;
    }



    .Flashlogin {
        flex-direction: row;
        margin: 0;
    }


    .ops{
        top:25%;
        right:40%;
    }
    


    .section {
        padding: 1rem;
        width: 45%;
        height: auto;
    }

    .section h1 {
        /* font-size: 2.5rem; */
    }

    .section p {
        font-size: 100%;
    }

    .div_b {
        width: 45%;
        height: auto;
        display: flex;
        margin-top: 0;
        overflow: auto;
        /* background-color: var(--secondary-color); */
    }

    .hero h2 {
        font-size: 2.5em;
    }

    .hero p {
        font-size: 1.2em;

    }

    .service-items {
        gap: inherit;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .gap{
        flex-direction: column  ;
    }

    .service-item {
        margin: 1em;
    }



    .card_info {
        width: 25%;
        padding: 1.5em;
        padding-top: 4rem;
    }

    .detalhesBoxes {
        flex-direction: row;
        height: 30rem;
    }
    
    .vertical-section {
        width: 27%;
        border-right: 5px solid var(--secondary-color);

    }
    .desc_conteudo {
        width: 70%;
        padding: 2rem;
        padding-right: 5rem;
        height: 50%;
        /* border-left: 5px solid var(--secondary-color);
        border-top: 5px solid var(--secondary-color); */
        position: relative;
        border-bottom: 5px solid transparent; /* Define a altura da borda */
        
        background: linear-gradient(to right, var(--secondary-color) 0%, var(--secondary-color) 50%, transparent 50%);
        background-size: 100% 5px;
        background-repeat: no-repeat;
        background-position: top left

    }


    
}