/* Reset básico */
body, p, form, input, textarea, button {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Corpo da página */
body {
    font-family: 'Poppins', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}
/* Hero Section */
.hero {
    background: url('../img/ytb_background_glitch.jpg') no-repeat center center/cover;
    color: #fff;
    text-align: center;
    padding: 20px 20px;
    
}
.hero .hero-content h1{
    font-size: 2.4rem;     
    line-height: 1.1;
}
.hero-content {
    max-width: 1200px;
    margin: 0 auto;
    
}

.hero .logo {
    max-width: 130px;
    margin-bottom: 0px;
}
.lead{
    color: #0cc6ff;
    font-size: 1.2rem;
    padding: 3rem;
}
.hero p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}
.titulo-custo{
    color: white;
    font-size: 2.4rem;
    line-height: 1;
}
.cta-button {
    display: inline-block;
    margin:2rem;
    padding: 20px 30px;
    background-color: #e92e56;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1rem;
}

.cta-button:hover {
    background-color: #0cc6ff;
}

/* Benefits Section */
.benefits {
    background: #000211;
    padding: 50px 20px;
    text-align: center;
}

.benefits .container {
    max-width: 1200px;
    width:100%;
    margin: 0 auto;
}
.container {
    max-width: 1200px;
    width:100%;
    margin: 0 auto;
}
.benefits h2 {
    font-size: 2rem;
    margin-bottom: 30px;
}

.benefit {
    margin-bottom: 20px;
}

.benefit h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.benefit p {
    font-size: 1rem;
}

.benefits .cta-button {
    margin-top: 30px;
}

/* Contact Form Section */
.contact {
    background: #fff;
    padding: 50px 20px;
    text-align: center;
}

.contact .container {
    max-width: 1200px;
    margin: 0 auto;
}

.contact h2 {
    font-size: 2rem;
    margin-bottom: 30px;
}

.contact form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact label {
    margin: 10px 0 5px;
}

.contact input, .contact textarea {
    width: 100%;
    max-width: 600px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact button {
    padding: 20px 30px;
    background-color: #0033A0;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.contact button:hover {
    background-color: #002a80;
}

/* Estilo do vídeo do YouTube */
.video-container {
    
    position: relative;
    padding-bottom: 45%; /* Proporção 16:9 */    
    
    max-width: 100%;    
}

.video-container iframe {
    border: solid 3px #0cc6ff;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%; /* Ajuste o tamanho do iframe conforme necessário */
    height: 100%; /* Ajuste o tamanho do iframe conforme necessário */
    transform: translate(-50%, -50%); /* Centraliza horizontalmente e verticalmente */
}
.benefits-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.benefit-box {
    
   border:solid 2px #0cc6ff;
    border-radius: 8px;
    padding: 20px;
    width: calc(20% - 10px); /* 5 colunas no desktop */
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.benefit-box:hover {
    transform: translateY(-5px);    
}

/* Estilo dos títulos */
.benefit-box h4 {
    font-weight: bold;
    color: #007bff;    
}

.benefit-box p {
    color: white;
}
.benefit-box h3 {
    color: #0cc6ff;
    font-size: 2rem;
}
/* Benefits Section */
.custo {
    background: #000211;
    padding: 50px 20px;
    text-align: center;
}
.valor-hero img{
    width:200px;
}


/* Custo Section */
.valor-beneficios {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center;     /* Centraliza verticalmente */
    flex-direction: column;  /* Empilha itens verticalmente */
    padding: 20px;
    background-color: #000211; /* Cor de fundo, se desejado */
}
.custo {
    background: #000211;
    padding: 50px 20px;
    text-align: center;
}

.lista-beneficios {
    list-style: none;        /* Remove bullets padrão */
    padding: 0;
    margin: 0;
    text-align: center;      /* Centraliza o texto dos itens */
}

.item-beneficio {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center; /* Centraliza o ícone e o texto dentro de cada item */
}
.item-beneficio i {
    margin-right: 10px;
    color: #0cc6ff;
}



/* Preços */
.preco-antigo {
    font-size: 1.2rem;
    color: #fff;
}

.preco-parcela {
    font-size: 1.2rem;
    color: #fff;
}

.preco-atual {
    font-size: 2rem;
    color: #0cc6ff;
    font-weight: bold;
}
.logo-curso{
    border: solid 2px #0cc6ff;
    border-radius: 7px;;
}
.botao-reserva {
    padding: 20px 30px;
    background-color: #e92e56;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.2rem;
    display: inline-block;
}

.botao-reserva:hover {
    background-color: #0cc6ff;
}
.sp{
    color:white;
    font-weight: 400;
}
.sp2{
    color:#0cc6ff; 
    margin: 5px    
}

/* Contato Section */
.contato {
    background-color: #000211; 
    padding: 50px 20px;
    text-align: center;
}

.contato .container {
    max-width: 1200px;
    margin: 0 auto;
}

.contato-titulo {
    font-size: 2rem;
    margin-bottom: 20px;
    color: #333; /* Cor do texto do título */
}

.contato-descricao {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: #666; /* Cor do texto da descrição */
}

.contato-link {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.2rem;
    color: #0cc6ff;
    background-color: #000211; /* Cor de fundo do link */
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}


/* Formulário de Contato Section */
.formulario {
    background-color: #000211; 
    padding: 50px 20px;
    text-align: center;
}

.formulario .container {
    max-width: 800px;
    margin: 0 auto;
}

.formulario-titulo {
    font-size: 2rem;
    margin-bottom: 20px;
    color: white; /* Cor do texto do título */
}

.form-group {
    margin-bottom: 20px;
    text-align: left; /* Alinha os rótulos e campos à esquerda */
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: white; /* Cor do texto dos rótulos */
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
}

.form-group textarea {
    resize: vertical; /* Permite redimensionar verticalmente apenas */
}

.formulario-botao {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1.2rem;
    color: #fff;
    background-color: #0033A0; /* Cor de fundo do botão */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.formulario-botao:hover {
    background-color: #002a80; /* Cor de fundo do botão ao passar o mouse */
}

/* Responsividade */
@media (max-width: 768px) {

    .formulario-titulo {
        font-size: 1.5rem;
    }

    .form-group label {
        font-size: 1rem;
    }

    .form-group input,
    .form-group textarea {
        font-size: 0.9rem;
    }

    .formulario-botao {
        font-size: 1rem;
    }

    .contato-titulo {
        font-size: 1.5rem;
    }

    .contato-descricao {
        font-size: 1rem;
    }

    .contato-link {
        font-size: 1rem;
    }


    .lead{
        padding:0;
        padding-bottom: 3rem;
    }
    .valor-beneficios {
        padding: 15px;
    }
    
    .item-beneficio {
        font-size: 1rem;
    }

    .benefit-box {
        width: 100%; /* Empilhar itens no mobile */
    }
    
    .hero h1 {
        font-size: 1.8rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .benefits h2 {
        font-size: 1.5rem;
    }

    .benefit h3 {
        font-size: 1.2rem;
    }

    .contact h2 {
        font-size: 1.5rem;
    }
}
@media (max-width: 960px) {
    .video-container {
        padding-bottom: 56.25%; /* Proporção 16:9 */  
        width: 100%;     
        margin: 20px auto; 
    }
    
    .video-container iframe {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translate(0%, 0%); /* Centraliza horizontalmente e verticalmente */
       
    }
    
}