/* Tipos */
.big-titulo{
    font-family: "Bellefair", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 10vh;
    color: #442A05;
}
.mail-contato{
    display: flex;
    justify-content: center;

    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    text-decoration: none;
    text-align: center;
    font-size: 2vh;
    color: #fbc379;

}
.titulo{
    font-family: "Bellefair", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 4vh;
    color: #442A05;
}
.titulo-workshop{
    font-family: "Bellefair", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 3vh;
    color: #442A05;

    text-align: center !important;
}
.tituloAlternativo{
    font-family: "Bellefair", serif;
    font-weight: 400;
    font-style: normal;

    font-size: 60;
    color: #ffffff;
}
.subtitulo{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: bold;
    
    color: #027071;
}
.corpoDoTexto{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: light;

    color: #442A05;
    font-size: 2vh;
}
.corpoDoTexto-12{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: light;

    color: #442A05;
    font-size: 12px;
}
.corpoDoTexto-dinamico{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: light;

    color: #442A05;
    font-size: 3vh;
}
.corpoDoTextoAlternativo{
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: light;

    color: #ffffff;
}
.turquesa{
    color: #027071 !important;
}
.texto-dinamico{
    margin-top: 10vh;
}
.texto-dinamico-frases{
    min-height: 50vh;

    padding-top: 25vh;
    padding-bottom: 25vh;
    text-align: center;
}
.centralizador-texto-workshop{
    text-align: center;
}

/* Text box animados */
.text-box-dir{
    animation: text-box-dir-animation both;
    animation-timeline: view(40% 15%);
}
@keyframes text-box-dir-animation{
    from{
        opacity: 0;
        transform: translate(500px) scale(0.3);
    }to{
        opacity: 1;
        transform: translate(0) scale(1);
    }
}
.text-box-esq{
    animation: text-box-esq-animation both;
    animation-timeline: view(60% 15%);
}
@keyframes text-box-esq-animation{
    from{
        opacity: 0;
        transform: translate(-500px) scale(0.3);
    }to{
        opacity: 1;
        transform: translate(0) scale(1);
    }
}
.falling-text {
    opacity: 0;
    transform: translateY(-200px) !important;
    transition: none;
  }

  .falling-text.visible {
    animation: falling-text 2s ease-out forwards !important;
  }

  @keyframes falling-text {
    0% {
      opacity: 0;
      transform: translateY(-200px) scale(0.8);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
}
/* Imagens */
.img-book-roll {
    position: sticky;
    top: 35vh;
    
    animation: text-box-esq-animation 1s ease-out both;
}
@keyframes text-box-esq-animation {
    from {
        opacity: 0;
        transform: translate(-500px) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translate(0) scale(1);
    }
}
.img-icon{
    height: 3vh;
    width: auto;
}
/* Menu */
/* ========== NAVBAR ========== */
main {
    margin-top: 76px;
}
.navbar-brand{
font-family: "Montserrat", serif;
font-optical-sizing: auto;
font-weight: 300;
color: #012340; 

}
.navbar-nav{
    left: 0;
    background-color: rgb(224, 237, 255);
    padding-top: 10px ;
    padding-bottom: 10px ;
    padding-right: 10px ;

    border: 0.3px solid;
    border-color: #041E42;
    border-radius: 150px;
}
.nav-item{
    background-color: #E0EDFF;

    color: #442A05;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;
    padding: 5px;

    padding-left: 10px ;
    padding-right: 10px ;
    margin-left: 10px;

    border: 0.3px solid;
    border-radius: 50px;
    border-color: #442a0596;
}

/* Conteiner personalizados */
.box{
    min-height: 50vh;
    padding: 15vh 15vh;
    text-align: center;
}
.box-contato{
    min-height: 25vh;
    padding: 15vh 15vh;
    text-align: center;
}
.container-hero{
    height: 100%;
    width: 100%;
    padding-left: 10%;
    padding-right: 10%;
    display: flex;
    justify-items: center;
    align-items: center;
}
.hero-section {
    display: flex;
    align-items: center;
    justify-items: center;
    width: 100%; /* Ocupa 100% da largura da tela */
    height: 100vh; /* Ocupa 100% da altura da tela */
    background-color: #ffffff;

    color: #442A05;
    padding: 10vh 0;
}
.Foto-Hero{
    height: 45vh;
    width: auto;
    background-position: right bottom;
}
.logos-section {
    height: 10vh;
    margin-top: -22vh; 

    background: rgb(2,113,114);
    background: linear-gradient(-90deg, rgba(2,113,114,1) 20%, rgba(1,38,66,1) 80%);

    background-size: cover;
    background-position: center;
}
.logos {
display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
}
.logos-img{
    max-width: auto; 
    height: 15px; 
}

/*  Cards  */
.feature-card {
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s;
}
.feature-card-2 {
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s;
}
.feature-card:hover {
    transform: translateY(-5px);
}
.testimonial-card {
    background-color: #012340;
    border-radius: 15px;
    padding: 30px;
    margin: 15px 0;
}
.testimonial-vid{
    border-radius: 15px;
}
.section-padding {
    padding: 80px 0;
}
.big-card {
    background-color: #ffffff;

    padding-top: 30px;
    border-radius: 30px;

    display: flex;
    align-items: center; 
    justify-content: center;
    gap: 20px;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.redes-img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 10px;
    align-items: center;
    justify-items: center;
}

/*  Botões  */
.btn-form{
    background: rgb(251,195,121);
    background: -moz-linear-gradient(-90deg, rgba(251,195,121,1) 20%, rgba(217,141,98,1) 80%);
    background: -webkit-linear-gradient(-90deg, rgba(251,195,121,1) 20%, rgba(217,141,98,1) 80%);
    background: linear-gradient(-90deg, rgba(251,195,121,1) 20%, rgba(217,141,98,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbc379",endColorstr="#d98d62",GradientType=1);

    padding: 1vh;

    font-weight: 600;
    text-decoration: none;
    color: #442A05;
    border-style: none;
    border-radius: 50px;
}
.btn-buy{
    background: rgb(251,195,121);
    background: -moz-linear-gradient(-90deg, rgba(251,195,121,1) 20%, rgba(217,141,98,1) 80%);
    background: -webkit-linear-gradient(-90deg, rgba(251,195,121,1) 20%, rgba(217,141,98,1) 80%);
    background: linear-gradient(-90deg, rgba(251,195,121,1) 20%, rgba(217,141,98,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fbc379",endColorstr="#d98d62",GradientType=1);

    padding: 1vh;
    padding-left: 30px;
    padding-right: 30px;

    font-weight: 600;
    text-decoration: none;
    color: #442A05;
    border-style: none;
    border-radius: 50px;

    margin-left: 10px;
    margin-right: 10px;
}
.button{
    background-color: #fbc379;

    color: #442A05;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 16px;
    text-decoration: none;

    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 8px;
    padding-bottom: 8px;

    border-radius: 50px;
}

/*variado*/
.footer{
    height: 20vh;

    background-color: #012340;
}
.identidade{
    color: #fbc379;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: light;
}
.funcao{
    color: #00c5c9;
    font-family: "Montserrat", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: light;
}
.section-sobre{
    padding-top: 80px;
}
.icon{
    width: 80px;
    height: auto;
}
.cabecalho{
    margin-bottom: 20px;
}
.perfil{
    width: 100%;
    height: auto;
    border-radius: 10px;
}
.margem-50{
    margin-bottom: 50px;
}
.margem-100{
    margin-bottom: 100px;
}
.margem-top-50{
    margin-top: 50px;
}
.margem-top-100{
    margin-top: 100px;
}
.page-contato{
    margin: 0;
    padding: 0;

    background: rgb(2,113,114);
    background: linear-gradient(0deg, rgba(2,113,114,1) 20%, rgba(1,38,66,1) 80%);
}
.bgimg01{
    background-image: url(img/bg01.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.bgimg02{
    background-image: url(img/bg02.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
}
.compra-livro{
    z-index: 999;
    position:  fixed;
    margin: auto;
    bottom: 16vh;
}


/* MOBILE */
@media (max-width: 992px) { 
    .navbar {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        background: white !important;
        box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    }
    .navbar-nav{
        /* Componente que abraça os botões */
        left: 0;
        background-color: rgba(255, 255, 255, 0);
        padding-top: 10px ;
        padding-bottom: 10px ;
        padding-right: 10px ;
        padding-left: 10px ;
    
        border: 0px;
        border-radius: 0px;
    }
    .navbar-collapse {
        position: fixed !important;
        top: 56px; /* Altura da navbar */
        left: 0;
        right: 0;
        bottom: 0;
        height: calc(100vh - 56px) !important;
        overflow-y: auto;
        z-index: 9999;
        padding: 20px 15px;
        background: rgba(255, 255, 255, 0.124) !important;
        backdrop-filter: blur(10px);
        transform: none !important;
        visibility: hidden;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .navbar-collapse.show {
        visibility: visible;
        opacity: 1;
    }
    .body{
        width: 992px;
        padding-top: 70px;
    }
    .titulo{
        font-family: "Bellefair", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 3vh;
        color: #442A05;
    }
    .titulo-workshop{
        font-family: "Bellefair", serif;
        font-weight: 400;
        font-style: normal;
        font-size: 3vh;
        color: #442A05;
    }
    .logos-section {
        height: 10vh;
        margin-top: -10vh; 
        background: rgb(1,35,64);
        background: linear-gradient(45deg, rgba(1,35,64,1) 0%, rgba(2,115,115,1) 100%);
        background-size: cover;
        background-position: center;   
    }
    /* Menu */
    .nav-item {
        margin: 12px 0;
        padding: 0 !important;
    }
    .nav-link {
        font-size: 1.2rem !important;
        padding: 15px !important;
        border-radius: 8px !important;
        background: rgba(0,0,0,0.03);
        display: block;
        text-align: center;
    }
    .big-card{
        margin: 20px;
        text-align: center;
    }
    .footer{
        height: 35vh;
    
        background-color: #012340;
    }
    .btn-form{
        margin-left: 0px;
        margin-right: 0px;
    }
    .box-contato{
        min-height: 20vh;
        padding: 5vh 5vh;
        text-align: center;
    }
    .livro-sec{
        display: flex !important;
        align-items: center !important;
        justify-items: center !important;
        text-align: center;
    }
    .hero-mobile{
        display: block;
        align-items: center;
        justify-items: center;

        text-align: center;
    }
    .btn-buy{
        text-align: center !important;
    }
    .compra-livro {
        bottom: 5vh;
    }
    .feature-card-2 {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-items: start;
        justify-content: flex-start;

        text-align: start;
        color: #442A05 !important;

        padding: 20px;
        border-radius: 10px;
        transition: transform 0.3s;
    }
    .list-workshop{
        display: flex;
        align-items: center;
        justify-items: flex-start;
    }
    .centralizador-texto-workshop{
        text-align: start;
    }
}