html, body {
    overflow-x: hidden;
    width: 100%;
}

* {
    padding: 0;
    margin: 0; 
}

.gradient-bg {
    background: linear-gradient(360deg, #6CB754 0%, #374729 100%);
}

.navbar {
    background: linear-gradient(360deg, #6CB754 0%, #374729 100%);
}

.container-nav {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.logo, .menu, .button {
    justify-content: center;
    align-items: center;
    display: flex;
}

.logo {
    width: 240px;
    height: 79.80px;
}

.menu {
    justify-content: flex-start;
    align-items: center; /* Alinhado ao centro verticalmente */
    gap: 20px; /* Reduzido o espaçamento entre itens para melhor responsividade */
    flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
}

.menu-item {
    width: auto;
    height: auto; /* Ajustado para permitir altura dinâmica */
    justify-content: center;
    align-items: center;
    display: flex;
    text-decoration: none;
    padding: 8px 12px; /* Adicionado espaçamento interno */
    transition: background-color 0.3s ease; /* Adicionado efeito de transição */
}

.button-nav {
    background: linear-gradient(90deg, #FDC80D 0%, #DFD628 78%, #D6DB30 100%);
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: flex;
    text-decoration: none;
    border: none;
}

.button-nav:hover {

    background: #D6DB30;
    box-shadow: 4px 4px 0px #E6C81C;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    display: inline-flex

}

.menu-item > div, .button-nav > div {
    color: white;
    font-size: 16px;
    font-family: 'Recursive', sans-serif;
    font-weight: 700; /* Corrigido o valor de font-weight (700px não é válido) */
    word-wrap: break-word;
    text-align: center; /* Centralizado o texto */
}

.button-nav > div {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

.content-infos {
    height: 100vh;
    flex-direction: column;   
}

.size-content {
    top: 10% !important; 
    left: 10%;
    width: 50%;
}

.title {
    color: #010101;
    font-size: 36px;
    font-family: Recursive;
    font-weight: 800;
    text-transform: uppercase;
    word-wrap: break-word;
    text-align: center;
}

.subtitle {
    width: 480px;
    color: #010101;
    font-size: 24px;
    font-family: Recursive;
    font-weight: 400;
    line-height: 30px;
    word-wrap: break-word;
}

.title-ceo {
    color: #ffffff;
    font-size: 36px;
    font-family: Recursive;
    font-weight: 800;
    text-transform: uppercase;
    word-wrap: break-word;
    text-align: center;
}

.parag-ceo {
    
    color: #ffffff;
    font-size: 16px;
    font-family: Recursive;
    font-weight: 400;
    line-height: 30px;
    word-wrap: break-word;
}

.bg-section2 {
    width: 90%;
    
}

        
.ceo {
    max-width: 635px;
}

.card-1 {
    width: 20%;
}

.custom-size-partner {
    width: 250px !important;
    height: auto !important;
    max-width: none !important; /* <- ESSENCIAL para sobrescrever o Bootstrap */
}

.custom-size-partner-dianna {
    width: 275px !important;
    height: auto !important;
    max-width: none !important; /* <- ESSENCIAL para sobrescrever o Bootstrap */
}

/* Desktop: empurra para a direita */
@media (min-width: 992px) {
    .shift-right-1 {
        margin-left: 36rem; /* Ajustável: pode ser 8rem, 12rem etc. */
    }
    .shift-right-2 {
        margin-left: 39rem; /* Ajustável: pode ser 8rem, 12rem etc. */
    }
}

/* Mobile e tablet: sem margem lateral */
@media (max-width: 991.98px) {
    .shift-right {
        margin-left: 0 !important;
    }
    .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
        margin-top: 1rem;
    }
    
    .menu-item {
        width: 100%;
        justify-content: flex-start;
    }
    
    .navbar-toggler {
        border: none;
        background-color: transparent;
    }
    
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    }
}
@media (max-width: 768px) {
    .menu {
        flex-direction: column; /* Itens empilhados verticalmente */
        align-items: flex-start; /* Alinhado à esquerda */
        gap: 10px; /* Reduzido o espaçamento entre itens */
    }

    .menu-item {
        width: 100%; /* Itens ocupam toda a largura */
        justify-content: flex-start; /* Alinhado à esquerda */
        padding: 10px; /* Espaçamento interno maior para toque em dispositivos móveis */
    }

    .menu-item > div {
        font-size: 14px; /* Reduzido o tamanho da fonte para telas menores */
    }
    .logo img {
        width: 140px; /* opcional: ajuste o tamanho em mobile se necessário */
    }

    .title {
        font-size: 28px;
    }

    .subtitle {
        font-size: 16px;
        line-height: 24px;
        width: 100%;
        text-align: center;
        padding: 0 1rem;
    }

    section.d-flex {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
    }
    
    .bg-section2 {
        width: 100%;
        height: auto;
    }

    .container.position-absolute {
        position: relative !important;
        margin: 2rem auto !important;
        padding: 1rem !important;
        width: 100% !important;
    }

    /* Empilha texto e imagem */
    .col-md-7,
    .col-md-5 {
        width: 100% !important;
        max-width: 100%;
        padding: 1rem !important;
    }
        
    /* Ajusta o título e parágrafo */
    .title-ceo {
        font-size: 24px !important;
        text-align: center;
        padding: 1rem 0 !important;
    }

    .parag-ceo {
        font-size: 15px;
        text-align: justify;
        line-height: 26px;
        padding: 0 !important;
    }

    /* Imagem do CEO no centro */
    .ceo {
        width: 80% !important;
        max-width: 300px;
        margin: 1rem auto;
        display: block;
    }

    .container .align-items-center {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0 !important;
        margin: 0 !important;
    }

    .container a {
        width: 90%;
        max-width: 350px;
        margin: 1rem 0;
        padding: 0 !important;
    }

    .card-1 {
        width: 100%;
        height: auto;
    }

    /* Ajuste da section de parceiros */
    section.d-flex {
        flex-direction: column;
        align-items: center;
    }

    .position-absolute {
        position: relative !important;
    }

    .row.container-fluid.mx-5,
    .row.container.mx-5 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 1rem;
    }

    .col-lg-8.col-12.d-flex,
    .col-lg-6.col-12.d-flex {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .col-lg-8.col-12.d-flex img,
    .col-lg-6.col-12.d-flex img {
        padding: 1rem 0 !important;
        width: 80%;
        max-width: 300px;
        height: auto;
    }

    #divModalDescription {
        font-size: 16px;
        padding: 3rem;
        line-height: 1.6;
    }
    
    .modal-dialog {
        max-width: 95% !important; /* Modal mais largo no mobile */
        margin: 1rem auto;
    }
    
    .modal-body {
        max-height: 70vh;
        overflow-y: auto;
    }
}

* {
    box-sizing: border-box;
}

.row,
.container,
.container-fluid {
    max-width: 100%;
    overflow-x: hidden;
}

@media screen and (min-width: 1200px) {
    .hero-section .container.row {
      display: flex !important;
      flex-direction: row !important; /* <-- volta para linha */
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      margin: 5rem auto !important;
      max-width: 1140px; /* largura padrão Bootstrap */
    }
  
    .hero-content {
      padding: 3rem 3rem !important;
      margin: 0 !important;
      width: 50% !important;
      max-width: 600px;
      text-align: left !important;
      align-items: flex-start !important;
      justify-content: center !important;
    }
  
    .title {
      text-align: left !important;
      font-size: 36px;
    }
  
    .subtitle {
      text-align: left !important;
      font-size: 24px;
      width: 100%;
      padding: 0;
      line-height: 30px;
    }
  }

  @media screen and (max-width: 768px) 
{
    /* ========== HERO SECTION ========== */
    
    .hero-section .container.position-absolute {
        position: absolute !important;
        top: -35%;
        left: 5%;
        z-index: 2;
        padding: 1rem;
        margin: 0;
        width: 95%;
        max-width: 720px;
    }

    .hero-content {
        text-align: left !important;
        padding: 0.75rem;
        color: #000;
        border-radius: 8px;
    }

    .title {
        font-size: 20px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: #000;
        text-align: left !important;
    }

    .subtitle {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        margin-bottom: 0.25rem;
        padding: 0;
        width: 70%;
        text-align: left;
    }
     /* ========== FIM HERO SECTION ========== */
}

/* ==================== MOBILE ==================== */
@media screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait),
       screen and (min-width: 600px) and (max-width: 1280px) and (orientation: landscape) {

    /* ========== NAVBAR E MENU ========== */
    .menu {
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
    }

    .navbar .button-nav {
        padding: 0.75rem 1.5rem;
    }
    /* ======= FIM NAVBAR E MENU ======= */

    /* ========== SERVIÇOS SECTION ========== */
    .container.position-absolute.align-items-center.justify-content-center.m-5 {
        position: relative !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* Aqui está o container REAL dos cards */
    .align-items-center.justify-content-center.m-5.p-5 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        grid-gap: 2rem;
        justify-items: center;
        align-items: center;
        padding: 2rem 1rem !important;
    }

    /* Estilo dos cards */
    .card-1 {
        width: 180px !important;
        height: auto !important;
        object-fit: contain;
        display: block;
        margin: 0 auto;
    }
    /* ======= FIM SERVIÇOS SECTION ======= */


    /* ========== CEO SECTION ========== */
    .title-ceo {
        font-size: 28px;
        text-align: center;
        padding: 1rem 0;
    }

    .parag-ceo {
        font-size: 15px;
        text-align: justify;
        line-height: 26px;
        padding: 0 1rem;
    }

    .ceo {
        width: 60% !important;
        max-width: 300px;
        margin: 2rem auto;
        display: block;
    }
    /* ======= FIM CEO SECTION ======= */


    /* ========== PARCEIROS SECTION ========== */
    section.d-flex {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .position-absolute {
        position: relative !important;
    }

    /* PARCEIROS - AJUSTE DE IMAGENS EM GRID */
    .shift-right-1,
    .shift-right-2 {
        margin-left: 0 !important;
        display: grid !important;
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
        gap: 2rem 1rem; /* Espaçamento entre colunas e linhas */
        justify-items: center;
        align-items: center;
    }

    .custom-size-partner,
    .custom-size-partner-dianna {
        width: 275px !important;
        height: auto !important;
        object-fit: contain;
        display: block;
        max-width: 100%;
    }

    .row.container-fluid,
    .row.container {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 1rem !important;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }

    .card-1 {
        width: 40%;
        margin-bottom: 1rem;
    }
    /* ======= FIM PARCEIROS SECTION ======= */


    /* ========== GERAL (OCULTAR ELEMENTOS) ========== */
    .hide-landscape-tablet {
        display: none !important;
    }
    /* ======= FIM GERAL ======= */

}

@media screen and (min-width: 768px) and (max-width: 1366px) and (orientation: portrait) {
    
    /* ========== HERO SECTION ========== */
    .hero-section {
        position: relative;
        width: 100%;
        height: 630px; /* define uma altura explícita */
        overflow: hidden;
    }

    .hero-section img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* agora a imagem preenche a section */
        object-fit: cover;
        z-index: 1;
    }

    .hero-section .container.position-absolute {
        position: absolute !important;
        top: 0%;     
        left: 0%;    
        z-index: 2;
        padding: 0;
        margin: 0;
        width: 90%;
        max-width: 700px; 
    }

    .hero-content {        
        text-align: left !important;
        padding: 0.5rem;
        color: #000; 
        border-radius: 8px;
    }

    .title {
        font-size: 18px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: #000;
        text-align: left !important; 
    }

    .subtitle {
        font-size: 22px;
        line-height: 20px;
        margin-bottom: 0.25rem;
        padding: 0;
        width: 75%;
        text-align: left;
    }
/* ========== FIM HERO SECTION ========== */

}



@media screen and (min-width: 600px) and (max-width: 1280px) and (orientation: landscape) {
    
      /* ========== HERO SECTION ========== */
      .hero-section {
        position: relative;
        width: 100%;
        height: 630px; /* define uma altura explícita */
        overflow: hidden;
    }

    .hero-section img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* agora a imagem preenche a section */
        object-fit: cover;
        z-index: 1;
    }
    
    .hero-section .container.position-absolute {
        position: absolute !important;
        top: 0%;     
        left: 5%;    
        z-index: 2;
        padding: 0;
        margin: 0;
        width: 90%;
        max-width: 700px; 
    }
    
    .hero-content {        
        text-align: left !important;
        padding: 0.5rem;
        color: #000; 
        border-radius: 8px;
    }
    
    .title {
        font-size: 18px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: #000;
        text-align: left !important; 
    }
    
    .subtitle {
        font-size: 22px;
        line-height: 20px;
        margin-bottom: 0.25rem;
        padding: 0;
        width: 75%;
        text-align: left;
    }
    /* ========== FIM HERO SECTION ========== */

}

@media screen and (min-width: 720px) and (max-width: 1180px) and (orientation: portrait) {
    
    /* ========== HERO SECTION ESPECÍFICA 820x1180 ========== */
    .hero-section {
        position: relative;
        width: 100%;
        height: 680px; /* levemente maior para esse device */
        overflow: hidden;
    }

    .hero-section img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    .hero-section .container.position-absolute {
        position: absolute !important;
        top: 0%;
        left: 0%;
        z-index: 2;
        padding: 1rem;
        margin: 0;
        width: 95%;
        max-width: 720px;
    }

    .hero-content {
        text-align: left !important;
        padding: 0.75rem;
        color: #000;
        border-radius: 8px;
    }

    .title {
        font-size: 20px;
        font-weight: 800;
        text-transform: uppercase;
        margin-bottom: 0.5rem;
        color: #000;
        text-align: left !important;
    }

    .subtitle {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 0.25rem;
        padding: 0;
        width: 70%;
        text-align: left;
    }
    /* ========== FIM HERO SECTION ========== */

}


/* ==================== FIM MOBILE ==================== */