html {
    scroll-behavior: smooth; /* Faz a rolagem ser suave */
}
*{
    margin: 0;
}
header {
    margin-top: 8vw;
    display: flex;
    flex-direction: row ;
    height: 90vh;
    /* border: 3px solid red; */
    /* justify-content: center; */
    align-items: center;
    justify-content: space-between;
    
    background-image: url("../IMG/ChatGPT.png");
    background-size: 80%;
    background-position: center;
    background-repeat: repeat;
}

@font-face {
    font-family: 'MinhaFonteTitle';
    src: url('../FONTS/moon_get-Heavy.ttf') format('truetype');
}

@font-face {
    font-family: 'MinhaFonteTitle2';
    src: url('../FONTS/Classica-Book.ttf') format('truetype');
}

@font-face {
    font-family: 'MinhaFonteSection1';
    src: url('../FONTS/BebasNeue-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'MinhaFonteCat';
    src: url('../FONTS/Bison-Bold\(PersonalUse\).ttf') format('truetype');
}


.headline{
    /* border: 2px solid blue; */
    /*width: 60%;  deu errado*/
    flex: 80%;
}
@keyframes brilhoDourado {
    0% { text-shadow: 0 0 10px #0c1c53; }
    50% { text-shadow: 0 0 20px #0c1c53, 0 0 30px #0f2980; }
    100% { text-shadow: 0 0 10px #0c1c53; }
}

.headline h1{
    /* font-family: Georgia, 'Times New Roman', Times, serif;
    margin-left: 20%;
    color: #ffffff; 
    -webkit-text-stroke: 1px rgba(11, 11, 51, 0.6); 
    font-size: 3rem;
    /* text-shadow: 6px 6px 20px rgba(0, 0, 139, 0.6); */
    /*animation: brilhoDourado 3s infinite alternate ease-in-out;*/
}

#title{
    font-family: 'MinhaFonteTitle',sans-serif;
    font-size: 3vw;
    margin-left: 9.5%;
    /*width: 1200px;*/
    color: #ffffff;
    animation: brilhoDourado 3s infinite alternate ease-in-out;
    text-shadow: 10px 10px 30px rgb(0, 0, 139);
    text-align: left;
}

#title2{
    font-family: 'MinhaFonteTitle2';
    font-size: 2vw;
    margin-left: 10%;
    color: #ffffff;
    text-shadow: 10px 10px 30px rgb(0, 0, 139);
    animation: brilhoDourado 3s infinite alternate ease-in-out;
    text-align: left;
}
#CTA-mobile-button{
    display: none;
}

#section{
    margin-top: 20px;
    display: flex;
    height: 80dvh;
}
.section-img{
    flex: 50%;
    background-image: url("../IMG/ct img.jpg");
    background-size: contain;
    background-position: left;
    background-repeat: no-repeat; 
    background-attachment: fixed;
}
.section-img img{
    position: static;
    width: 100%;
    height: 100%;
}
.section-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 50%;
    background-color: #030D2F;
}
.titulo-section{
    text-align: center;
    color: #ffff;
    font-family: 'MinhaFonteSection1',sans-serif;
    font-size: calc(2rem + 2vw);
    margin: 6rem 0 0 0;
    padding: 5px 0;
}
.text-section{
    margin: 1.5rem 1.5rem 0 1.5rem;
    color: #ffff;
    font-family: 'MinhaFonteTitle2',sans-serif;
    font-size: calc(0.7rem + 0.7vw);
}
#text-section-mobile{
    display: none;
}
/* ==================== Seção Modalidades ================= */

.categoria{ /* Texto de Título da seção  */
    margin: 0;
    font-size: 2rem;
    color: #FFBA42;
}
#modalidades{
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    height: auto;
    background: linear-gradient(-45deg, #0a163b, #030c2b, #1b2f6e, #0a216e, #19285b );
    background-size: 400% 400%;
    animation: bg 12s ease infinite;
}
@keyframes bg{
    0%{
        background-position: 8, 50%;
    }
    50%{
        background-position: 100%, 100%;
    }
    100%{
        background-position: 8%, 50%;
    }
}

.desc-modalidade{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 50%;
    height: 80%;
    margin-right: 5%;
}
.textbox{
    font-family:'MinhaFonteSection1',sans-serif;
    font-size: 3vw;
    width: 100%;
    height: 20%;
    border-bottom: 2px #FFBA42 solid;
}
.modalidade-box{
    height: 10rem;
    width: 100%;
    border-bottom: 2px #FFBA42 solid;
    display: flex;
    align-items: center;
    padding-left: 2%;
}
.categoria{
    color: #FFBA42 solid;
    font-family: 'MinhaFonteCat',sans-serif;
}
.desc{ /* Texto de descrição das Modalidades  */
    color: #ffff;
    font-size: 1.3vw;
    font-family: 'MinhaFonteTitle2',sans-serif;
    position: relative;
}
#modalidades h1{ /* Texto dos tipos de Modalidades  */
    text-align: center;
    color: #FFBA42;
    font-size: 3rem;
}
.horarios{ /* Texto: " Horários "  */
    color: #ffff;
    font-size: 2vw;
    font-family: 'MinhaFonteCat',sans-serif;
}
.horarios-container{
    font-size: 1.1vw;
    margin: 0 2% 0 0%;
    font-family: 'MinhaFonteTitle2',sans-serif;
}
.horarios-container p{ /* Texto dos horários de funcionamento  */
    margin: 1rem;
    color: #ffff;
}
.toggle-btn{
    display: none;
}
/* ==================== Fim seção Modalidades ================= */

figure {
    position: relative;
    height: 45rem;
    width: 100%;
    margin: 0;
    background-image: url('../IMG/faixadahome.PNG');
    background-position: center;
    background-size: cover; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}






/* ==================== Seção Carrossel ================= */
.instagram-slider {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    width: 100%;
    
  }
.instagram-slider h1{
    font-size: 4.5rem;
    font-family: 'MinhaFonteSection1',sans-serif;
    color: #030D2F;
    margin: 2rem 0 3rem 0;
}
  
  .slider-track {
    margin-bottom: 10px;
    display: flex;
    gap: 1rem;
    width: calc(200%); /* Para repetir suavemente */
    animation: scrollSlider 30s linear infinite;
  }
  
  .slide {
    flex: 0 0 20vw; /* 5 imagens de 20vw cada = 100vw */
    height: calc(20vw * 4 / 3); /* Mantém proporção 3:4 */
  }
  
  .slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
    margin: 0;
    padding: 0;
  }
    
  @keyframes scrollSlider {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  
/* ==================== Fim Seção Carrossel ================= */



/* ==================== responsivit ================= */
@media screen and (max-width: 1200px) {
    header{
        background-size: 100%;
        height: calc(2rem + 60vw);
    }
}
@media screen and (max-width: 1024px) {
    .desc{ /* Texto de descrição das Modalidades  */
        font-size: 1.8vw;
    }
    .horarios{ /* Texto: " Horários "  */
        font-size: 2.8vw;
    }
    .categoria{
        font-size: 3.3vw;
    }
    .horarios-container{
        font-size: 1.5vw;
    }
    .horarios-container p{ /* Texto dos horários de funcionamento  */
        margin: 1rem;
    }
   
}
@media screen and (max-width: 768px) {
    header{
        margin-top: 8vw;
    }
    .section-img{
        background-attachment: local;
        background-size: cover;
        
    }

    .modalidade-box .desc,
  .modalidade-box .horarios,
  .modalidade-box .horarios-container {
    display: none;
  }
  .textbox{
    margin: 0;
  }

  #modalidades{
    margin: 0;
  }
  .modalidade-box .toggle-btn {
    display: flex;
    justify-content: center;
    background: none;
    border: none;
    font-size: 1.2rem;
    color: gold;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  .box-button{
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    border: #FFBA42 solid 2px;
  }
  .toggle-btn{
    align-self: center;
  }
  .instagram-slider h1{
    font-size: 3rem;
    margin: 5vw 0 5vw 0;
  }

  .modalidade-box .toggle-btn.rotate {
    transform: rotate(180deg);
  }

  .modalidade-box {
    flex-direction: column;
    align-items: flex-start;
    justify-content: left;
    border: #FFBA42 solid 3px;
    height: auto;
    padding: 10px;
    margin-bottom: 10px;
  }
  .desc-modalidade{
    margin: 0;
    width: 100%;
  }
  .desc{
    font-size: 0.8rem;
  }
  .categoria{
    font-size: 2rem;
  }
  .modalidade-box .categoria {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .horarios{
    align-self: center;
    margin: 0;
    font-size: 1.8rem;
  }
  .horarios-container{
    font-size: 1rem;
  }

 
    /* FOOTER */
    /* .box {
        height: auto;
        margin: 10% 0;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "form"
            "Ender"
            "Pags";
        gap: 20px;
        padding: 0 5%;
    }

    #Form {
        margin: 0;
        padding: 10%;
        min-width: unset;
        grid-area: form;
    }

    #TitleForm1 {
        font-size: 28px;
        text-align: center;
    }

    #TitleForm2 {
        font-size: 14px;
        text-align: center;
        margin-top: 5px;
    }

    #RForm {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas:
            "Nome"
            "Email"
            "Tel"
            "Msg";
        gap: 10px;
    }

    #Email,
    #TelForm {
        margin: 0;
    }

    #Ender {
        margin: 0;
        padding: 5% 10%;
        text-align: center;
        grid-area: Ender;
    }

    #Pags {
        margin: 0;
        grid-area: Pags;
        gap: 15px;
        font-size: 1.2rem;
    }

    .rede {
        justify-content: center;
        gap: 12px;
    }

    .rede a img {
        width: 28px;
        height: 28px;
    }

    .links {
        font-size: 18px;
        color: #FFBA42;
    }

    .rodape {
        font-size: 0.75rem;
        padding: 10px;
        text-align: center;
    }

    #textfoot {
        padding: 0 10px;
    }

    .caixa-input input {
        width: 100%;
        font-size: 16px;
        padding: 10px;
    }

    .btn {
        width: 100%;
        padding: 10px;
        font-size: 16px;
    }

    .cel {
        font-size: 1rem;
    }*/
}

@media (max-width: 720px){
    .text-section {
     margin: 0 0 0 1vw;
    }
    .titulo-section{
        margin: 2vw 0 0 0;
    }
}
@media (max-width: 500px){
    header{
        margin-top: 20vw;
    }
}



@media (max-width: 425px){
    .categoria{
        font-size: 2rem;
    }
    header{
        align-items: flex-start;
        margin: 15vw 0 0 0;
        /* border: red 3px solid; */
        height: 50%;
        background-image: url(../IMG/ct\ img.jpg);
        background-size: cover;
        background-repeat: no-repeat;
    }
    .headline{
        margin-top: 25%;
    }
    .instagram-slider h1{
        font-size: 9vw;
        margin: 5vw 0 5vw 0;
      }
    #CTA-mobile-button{
        margin: 50px;
        display: flex;
        justify-content: center;
        margin-left: 10%;
        width: 40%;
        background-color: rgba(4, 54, 129);
        border: #FFBA42 3px solid;
    }
    #CTA-mobile-button a{
        text-decoration: none;
        font-size: calc(10px + 2vw);
        color: white;
        margin: 5%;
    }
    #title{
        display: none;
    }
    #title2{
        font-size: calc(1rem + 2.5vw);
        margin: 0 15vw 1rem 2rem;
    }
    #section{
        flex-direction: column-reverse;
        margin: 0;
        height: 100%;
    }
    .section-img{
        background-attachment: local;
        background-size: cover;
        background-image: url(../IMG/ct1.jpg);
        height: 10rem;
    }
    .section-text{
        padding: 5%;
        flex: 0;
    }
    #text-section-mobile{
        display: block;
        font-size: 5vw;
        color: #FFBA42;
        font-family: 'MinhaFonteTitle2',sans-serif;
        text-align: center
    }
    .text-section{
        display: none;
    }
    .titulo-section{
        display:none;
    }

    

  figure{
    background-attachment: local;
    background-size: cover;
    height: 15rem;
  }

  .slide {
    flex: 0 0 60vw; /* 5 imagens de 20vw cada = 100vw */
    height: calc(60vw * 4 / 3); /* Mantém proporção 3:4 */
  }
  .slider-track {
    gap: 4vw;
    width: calc(400%); /* Para repetir suavemente */
    animation: scrollSlider 30s linear infinite;
  }

}
@media (max-width: 325px){
    #title2{
        margin-right: 8vw;
    }
}