/* Estilos globais */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

/* Configurações Features */
.features-container {
  display: flex;
  justify-content: center; /* Centraliza as boxes */
  flex-wrap: wrap;
  margin: 40px 0;
  padding: 20px;
}

.feature {
  text-align: center;
  width: 300px; /* Largura aumentada das boxes */
  margin: 10px; /* Pequeno espaçamento entre as boxes */
  padding: 20px; /* Espaçamento interno */
  background: linear-gradient(145deg, #e6e6e6, #ffffff); /* Gradiente de fundo */
  border-radius: 15px; /* Bordas arredondadas */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), 
              -5px -5px 15px rgba(255, 255, 255, 0.7); /* Sombra para efeito 3D */
  transition: transform 0.3s, box-shadow 0.3s; /* Transições suaves */
}

.feature:hover {
  transform: translateY(-5px); /* Levanta a box ao passar o mouse */
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
              -8px -8px 20px rgba(255, 255, 255, 0.9); /* Aumenta a sombra ao passar o mouse */
}

.feature-icon {
  width: 60px; 
  height: 60px;
  margin: 0 auto 15px;
}

.feature-icon svg {
  fill: #4A90E2; 
  width: 100%;
  height: 100%;
}

h3 {
  font-size: 18px; 
  color: #333; 
  font-weight: bold; 
  margin: 10px 0 0; 
}



/* ----- CONFIGURAÇÃO MENU HEADER TOPO ----- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: 'Montserrat', sans-serif; /* Aplicando Montserrat para o menu */
}

header {
    background-color: #fff; /* Cor de fundo do header */
    padding: 10px; /* Espaçamento interno (superior/inferior e laterais) */
}

/* Navbar Layout */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 10%;
}

.logo {
    display: flex;
    align-items: center;
}

.logo h1 {
    color: #000;
    font-size: 1.8rem;
    font-weight: 700;
}

/* Menu e botão alinhados à direita */
.nav-list {
    display: flex;
    align-items: center;
    margin-left: auto; /* Alinha à direita */
}

.nav-list ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

.nav-item {
    margin: 0 15px;
}

.nav-link {
    text-decoration: none;
    font-size: 1.15rem;
    color: #474747;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #0187a7;
}

/* Estilos do botão de Login */
.login-button button {
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    background-color: #0187a7;
    margin-left: 20px;
    cursor: pointer;
}

.login-button button a {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 1.1rem;
}

.login-button button:hover {
    background-color: #016f7d;
}

/* Botão do WhatsApp na versão desktop */
.btn-contato {
    background-color: #25d366;
    color: #fff;
    padding: 10px 15px;
    border-radius: 25px;
    font-family: "Montserrat", sans-serif; /* Font Montserrat no botão */
    font-size: 14px;
    text-decoration: none;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 20px;
    transition: background-color 0.3s;
}

.btn-contato i {
    margin-right: 8px;
}

.btn-contato:hover {
    background-color: #128c7e;
}

/* Mobile Menu Styles */
.mobile-menu-icon {
    display: none;
}

.mobile-menu {
    display: none;
}

/* Mobile Menu Styles */
@media screen and (max-width: 730px) {
    .nav-bar {
        padding: 1.5rem 2rem; /* Ajustando o padding para a versão mobile */
    }

    /* Ajustando a logo para a esquerda */
    .logo {
        margin-left: 0; /* Alinhando a logo à esquerda */
    }

    /* Ajustando o menu para a direita */
    .nav-list {
        margin-left: auto; /* Garante que o menu fique alinhado à direita */
        justify-content: flex-end; /* Alinha os itens do menu à direita */
    }

    .nav-item {
        display: none; /* Esconde os itens do menu na versão mobile */
    }

    .login-button {
        display: none; /* Esconde o botão de login na versão mobile */
    }

    /* Menu hambúrguer: três traços */
    .mobile-menu-icon {
        display: block;
        cursor: pointer;
    }

    .mobile-menu-icon button {
        background-color: transparent;
        border: none;
        position: relative;
        width: 30px; /* Tamanho do botão */
        height: 25px; /* Altura do botão */
    }

    .mobile-menu-icon button span {
        display: block;
        width: 100%;
        height: 4px;
        background-color: #064a6a; /* Cor dos três traços */
        margin: 5px 0;
        transition: all 0.3s ease;
    }

    /* Animação do menu ao clicar */
    .mobile-menu ul {
        display: flex;
        flex-direction: column;
        text-align: center;
        padding-bottom: 1rem;
    }

    .mobile-menu .nav-item {
        display: block;
        padding-top: 1.2rem;
    }

    .mobile-menu .login-button {
        display: block;
        padding: 1rem 2rem;
    }

    .mobile-menu .login-button button {
        width: 100%;
    }

    .open {
        display: block;
    }

    /* Cor de fundo do botão de WhatsApp no mobile */
    .mobile-menu .btn-contato {
        background-color: #5cb85c;
        color: #fff;
        padding: 10px 15px;
        border-radius: 25px;
        font-family: "Montserrat", sans-serif;
        font-size: 14px;
        text-decoration: none;
        display: flex;
        align-items: center;
        cursor: pointer;
        margin-top: 10px;
    }

    .mobile-menu .btn-contato i {
        margin-right: 8px;
    }

    .mobile-menu .btn-contato:hover {
        background-color: #4cae4c;
    }

    /* Ajuste no alinhamento do botão do WhatsApp */
    .mobile-menu .btn-contato {
        justify-content: center; /* Garante que o ícone e texto fiquem centralizados */
    }

    .mobile-menu .btn-contato i {
        margin-right: 5px; /* Ajuste no espaço entre o ícone e o texto */
    }
}



/* ----- CONFIGURAÇÃO VIDEO TELA INICIAL ----- */
body, html {
  margin: 0;
  padding: 0;
  height: auto; /* Permite rolagem do conteúdo */
  overflow: auto; /* Permite rolagem da página */
}

/* Contêiner do vídeo com altura fixa */
.fixed-video {
  position: relative;
  width: 100%; /* Largura total */
  height: 600px; /* Altura fixa de 600px para desktop */
  background-color: black; /* Fundo em caso de erro no carregamento do vídeo */
  z-index: 1000;
  overflow: hidden; /* Esconde qualquer excesso do vídeo */
}

/* Estilo do vídeo */
video {
  width: 100%; /* Largura 100% para ocupar toda a área disponível */
  height: 100%; /* Altura 100% para cobrir toda a área */
  object-fit: cover; /* Faz o vídeo cobrir a área sem distorção, podendo cortar partes */
}

/* Exemplo de conteúdo adicional abaixo do vídeo */
.content {
  padding: 20px;
  background-color: #f4f4f4;
  min-height: 500px;
}

/* Media Query para dispositivos móveis */
@media (max-width: 768px) {
  .fixed-video {
    height: 350px; /* Ajusta a altura do vídeo para dispositivos móveis maiores (ex. tablets) */
  }
}

@media (max-width: 480px) {
  .fixed-video {
    height: 200px; /* Reduz ainda mais a altura para telas menores (ex. smartphones pequenos) */
  }
}



/* ----- CONFIGURAÇÃO TELA BENEFÍCIOS ----- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Estilo da seção de benefícios */
.benefits {
  background: #f8f9fa; /* Cor de fundo suave */
  padding: 40px 20px; /* Espaçamento interno */
  text-align: center; /* Centraliza o texto */
  border-radius: 20px; /* Arredondar cantos */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Sombra para a seção */
}

.benefits h2 {
  font-family: "Montserrat", sans-serif; /* Aplicando a fonte Montserrat */
  font-size: 50px; /* Tamanho do título */
  font-weight: 600;
  color: #064a6a; /* Cor do texto */
  margin-bottom: 20px; /* Espaçamento abaixo do título */
  font-weight: 600; /* Título em negrito */
}

.benefit-cards {
  display: flex;
  justify-content: center; /* Centraliza os cartões */
  flex-wrap: wrap; /* Permite que os cartões quebrem para uma nova linha */
  margin: 40px 0; /* Espaçamento acima e abaixo dos cartões */
  gap: 15px; /* Espaçamento entre os cartões */
}

.card {
  text-align: center; /* Centraliza o texto do cartão */
  width: 300px; /* Largura aumentada dos cartões */
  padding: 20px; /* Espaçamento interno */
  background: linear-gradient(145deg, #e6e6e6, #ffffff); /* Gradiente de fundo */
  border-radius: 15px; /* Bordas arredondadas */
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1), 
              -5px -5px 15px rgba(255, 255, 255, 0.7); /* Sombra para efeito 3D */
  transition: transform 0.3s, box-shadow 0.3s; /* Transições suaves */
}

.card:hover {
  transform: translateY(-5px); /* Levanta o cartão ao passar o mouse */
  box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.2), 
              -8px -8px 20px rgba(255, 255, 255, 0.9); /* Aumenta a sombra ao passar o mouse */
}

.card-icon {
  width: 60px; /* Tamanho do ícone */
  height: 60px; /* Mantém proporção */
  margin: 0 auto 15px; /* Espaçamento abaixo do ícone */
}

.card-icon svg {
  fill: #4A90E2; /* Cor do ícone */
  width: 100%;
  height: 100%;
}

.card h3 {
  font-family: "Montserrat", sans-serif; /* Aplicando a fonte Montserrat */
  font-size: 18px; /* Tamanho do título do cartão */
  color: #064a6a; /* Cor do título */
  font-weight: bold; /* Título em negrito */
  margin: 10px 0 0; /* Margem para o título */
}

.card p {
  font-family: "Montserrat", sans-serif; /* Aplicando a fonte Montserrat */
  color: #555; /* Cor do texto do parágrafo */
  font-size: 15px; /* Tamanho do texto do parágrafo */
  line-height: 1.5; /* Altura da linha para melhor legibilidade */
}

/* Media Queries para ajustar o tamanho do título h2 nos dispositivos móveis */
@media (max-width: 768px) {
  .benefits h2 {
    font-size: 30px; /* Ajusta o tamanho do título no mobile */
    margin-bottom: 15px; /* Ajuste no espaçamento abaixo do título */
  }
}

@media (max-width: 480px) {
  .benefits h2 {
    font-size: 24px; /* Ajuste ainda maior para telas muito pequenas */
    margin-bottom: 12px; /* Ajuste no espaçamento */
  }
}



/* ----- CONFIGURAÇÃO TELA CARACTERÍSTICAS ----- */
.container-caracteristicas {
  display: flex; /* Usar flexbox */
  justify-content: center; /* Centraliza horizontalmente */
  align-items: center; /* Centraliza verticalmente */
  max-width: 1200px; /* Largura máxima para centralizar */
  margin: 0 auto; /* Centraliza na tela */
  padding: 20px; /* Adiciona um pouco de espaço */
}

/* Estilos da seção de imagem */
.image-section {
  flex: 1; /* Permite que a imagem ocupe espaço flexível */
  text-align: center; /* Centraliza a imagem */
}

h2.titulo-caracteristica {
  color: #064a6a;
}

/* Estilos da seção de texto */
.text-section {
  flex: 1; /* Permite que o texto ocupe espaço flexível */
  text-align: left; /* Alinha o texto à esquerda */
  padding: 0 20px; /* Adiciona espaçamento lateral */
}

/* Estilos da imagem */
.feature-image {
  max-width: 100%; /* Garante que a imagem não ultrapasse o contêiner */
  height: auto; /* Mantém a proporção da imagem */
  border-radius: 15px; /* Arredonda os cantos da imagem */
}

/* Media Query para telas pequenas (dispositivos móveis) */
@media (max-width: 768px) {
  .container-caracteristicas {
    flex-direction: column; /* Empilha a imagem e o texto verticalmente */
    align-items: flex-start; /* Alinha os itens ao início do contêiner */
    padding: 10px; /* Diminui o padding para telas pequenas */
  }

  .image-section {
    width: 100%; /* A imagem ocupa toda a largura disponível */
    margin-bottom: 20px; /* Adiciona espaço abaixo da imagem */
  }

  .text-section {
    width: 100%; /* O texto ocupa toda a largura disponível */
    text-align: center; /* Centraliza o texto em telas pequenas */
    padding: 0; /* Remove o padding para otimizar o uso do espaço */
  }

  h2.titulo-caracteristica {
    font-size: 18px; /* Ajusta o tamanho do título para telas pequenas */
  }

  .feature-image {
    max-width: 90%; /* Limita a largura da imagem para não ultrapassar a tela */
    margin: 0 auto; /* Centraliza a imagem */
  }
}

/* Media Query para telas muito pequenas (exemplo: smartphones muito estreitos) */
@media (max-width: 480px) {
  h2.titulo-caracteristica {
    font-size: 16px; /* Diminui ainda mais o tamanho da fonte */
  }

  .container-caracteristicas {
    padding: 5px; /* Diminui o padding em telas muito pequenas */
  }

  .text-section p {
    font-size: 14px; /* Ajusta o tamanho do texto das descrições */
  }
}



/* ----- CONFIGURAÇÃO TELA FOOTER (RODAPÉ) ----- */
footer {
  background-color: #f8f9fa; /* Cor de fundo */
  padding: 2rem 0; /* Espaçamento */
  text-align: center; /* Centraliza o texto */
  color: #333; /* Cor do texto */
  border-radius: 10px; /* Cantos arredondados */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Sombra 3D mais pronunciada */
  margin: 20px 0; /* Espaçamento externo para separar do conteúdo */
}

.footer-separator {
  margin-top: 20px; /* Espaço acima do footer */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra 3D */
}

.footer-content {
  max-width: 1200px; /* Largura máxima */
  margin: 0 auto; /* Centraliza o conteúdo */
  padding: 0 1rem; /* Adiciona padding nas laterais */
}

.footer-info {
  margin-bottom: 1rem; /* Espaçamento entre informações e redes sociais */
}

.footer-info h3 {
  color: #064a6a;
  margin-bottom: 0.5rem; /* Espaçamento entre informações e redes sociais */
}

.footer-columns {
  display: flex; /* Flexbox para colunas */
  justify-content: space-between; /* Espaço entre as colunas */
  margin: 1rem 0; /* Espaçamento entre a info e as colunas */
}

.footer-column {
  flex: 1; /* Cada coluna ocupa igual espaço */
  margin: 0 1rem; /* Espaçamento entre as colunas */
  text-align: left; /* Alinha o texto à esquerda */
}

.footer-column h3 {
  color: #064a6a;
  margin-bottom: 0.5rem; /* Espaçamento abaixo do título */
}

.social-media {
  margin-top: 1rem; /* Espaçamento acima das redes sociais */
}

.social-media a {
  color: #064a6a; /* Cor dos ícones */
  margin: 0 0.5rem; /* Espaçamento entre os ícones */
  font-size: 1.5rem; /* Tamanho dos ícones */
  text-decoration: none; /* Remove sublinhado */
  transition: color 0.3s; /* Efeito de transição */
}

.social-media a:hover {
  color: #0e8eaa; /* Muda a cor ao passar o mouse */
}

.footer-logo {
  width: 120px; /* Ajuste a largura conforme necessário */
  height: auto; /* Mantém a proporção da imagem */
  margin-bottom: 1rem; /* Espaçamento abaixo da logo */
}

footer p {
  font-size: 0.9rem; /* Tamanho da fonte para os direitos autorais */
  color: #666; /* Cor mais clara para o texto dos direitos autorais */
}

/* Media Queries para dispositivos móveis */
@media screen and (max-width: 768px) {
  .footer-columns {
    flex-direction: column; /* Empilha as colunas em dispositivos móveis */
    align-items: center; /* Alinha o conteúdo no centro */
    margin-top: 1rem; /* Espaçamento entre as colunas */
  }

  .footer-column {
    margin: 1rem 0; /* Espaçamento entre as colunas empilhadas */
    text-align: center; /* Centraliza o texto nas colunas */
  }

  .social-media a {
    font-size: 1.2rem; /* Tamanho menor dos ícones */
    margin: 0 1rem; /* Aumenta o espaçamento entre os ícones */
  }

  footer p {
    font-size: 0.8rem; /* Menor tamanho de fonte para direitos autorais */
    margin-top: 1rem; /* Espaçamento acima do texto */
  }

  .footer-logo {
    width: 100px; /* Reduz o tamanho da logo no mobile */
    margin-bottom: 1rem; /* Espaçamento abaixo da logo */
  }
}

@media screen and (max-width: 480px) {
  .footer-logo {
    width: 80px; /* Tamanho menor da logo em telas muito pequenas */
  }

  .footer-columns {
    margin: 0; /* Remove o espaçamento extra nas colunas */
  }

  footer p {
    font-size: 0.7rem; /* Tamanho bem menor para telas pequenas */
  }
}



/* ----- CONFIGURAÇÃO TELA OFERTAS (CHAMADA DE VENDAS) ----- */
body {
  font-family: "Montserrat", sans-serif; /* Fonte padrão */
  background-color: #f8f9fa; /* Cor de fundo suave */
  color: #333; /* Cor do texto */
  margin: 0;
  padding: 0;
}

.sales-container {
  width: 100%; /* Ajusta a largura para 100% da tela */
  max-width: 1200px; /* Largura máxima igual à seção de benefícios */
  height: 300px; /* Define a altura da seção */
  margin: 50px auto; /* Centraliza a seção */
  padding: 20px; /* Espaçamento interno */
  background: rgba(255, 255, 255, 0.8); /* Cor de fundo com opacidade */
  border-radius: 15px; /* Bordas arredondadas */
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); /* Sombra para a seção */
  text-align: center; /* Centraliza o texto */
  background-image: url('/assets/img/home-ofertas-banner.png'); /* Imagem de fundo */
  background-size: cover; /* Cobre todo o contêiner */
  background-position: center; /* Centraliza a imagem de fundo */
  display: flex; /* Utiliza flexbox */
  flex-direction: column; /* Direção vertical */
  justify-content: center; /* Centraliza verticalmente */
  align-items: center; /* Centraliza horizontalmente */
}

.sales-title {
  font-family: "Montserrat", sans-serif; /* Fonte padrão */
  color: #064a6a;
  font-weight: 600;
  font-size: 30px; /* Tamanho do título */
  margin-bottom: 10px; /* Espaçamento abaixo do título */
}

.sales-description {
  width: 80%;
  font-size: 18px; /* Tamanho do texto da descrição */
  margin-bottom: 30px; /* Espaçamento abaixo da descrição */
}

.sales-button-wrapper {
  display: inline-block; /* Mantém o botão em uma linha */
}

.sales-button {
  background-color: #25D366; /* Cor de fundo do WhatsApp */
  color: #ffffff; /* Cor do texto do botão */
  text-decoration: none; /* Remove sublinhado */
  font-weight: bold; /* Texto em negrito */
  transition: background-color 0.3s, transform 0.3s; /* Transição suave para a cor de fundo e transformações */
  font-family: "Montserrat", Sans-serif;
  font-weight: 600;
  letter-spacing: 1px;
  border-radius: 10px 10px 10px 10px;
  padding: 15px 25px; /* Aumenta o padding para deixar o botão maior */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sales-button i {
  margin-right: 15px; /* Aumenta o espaço entre o ícone e o texto */
}

.sales-button:hover {
  background-color: #128C7E; /* Cor de fundo ao passar o mouse (tom mais escuro de verde do WhatsApp) */
  transition-duration: .3s;
  transform: scale(1.05); /* Aumento suave do botão ao passar o mouse */
}

/* Media Queries para dispositivos móveis */
@media (max-width: 768px) {
  .sales-container {
    height: 250px; /* Reduz a altura no mobile */
    padding: 15px; /* Menos padding */
  }

  .sales-title {
    font-size: 24px; /* Diminui o tamanho do título */
    margin-bottom: 8px; /* Menos espaçamento abaixo */
  }

  .sales-description {
    width: 90%; /* Aumenta a largura da descrição no mobile */
    font-size: 16px; /* Diminui o tamanho da fonte */
    margin-bottom: 20px; /* Menos espaçamento abaixo */
  }

  .sales-button {
    padding: 12px 20px; /* Ajusta o tamanho do botão */
  }

  .sales-button i {
    margin-right: 10px; /* Menos espaçamento entre o ícone e o texto */
  }
}

/* Media Queries para dispositivos muito pequenos, como celulares em modo retrato */
@media (max-width: 480px) {
  .sales-container {
    height: 250px; /* Reduz ainda mais a altura para telas menores */
  }

  .sales-title {
    font-size: 20px; /* Reduz ainda mais o tamanho do título */
  }

  .sales-description {
    font-size: 14px; /* Diminui o tamanho da fonte da descrição */
  }

  .sales-button {
    padding: 10px 15px; /* Ajusta o botão para telas pequenas */
  }

  .sales-button i {
    margin-right: 5px; /* Ajusta o ícone para telas pequenas */
  }

}

  /* ----- CONFIGURAÇÃO TELA PLANOS ----- */
body {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: #333;
}

h1 {
    font-size: 32px;
}

.banner {
    background-color: #4A90E2;
    color: white;
    text-align: center;
    padding: 60px 20px;
    margin-bottom: 20px;
}

.banner h1 {
    font-family: "Montserrat", sans-serif;
    font-size: 45px;
    margin: 0;
}

.banner p {
    font-size: 18px;
    margin-top: 10px;
    text-transform: uppercase;
}

/* Container dos planos (ajustando para layout grid) */
.plans-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 10px;
}

.plans-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Exibe 4 planos por linha em telas grandes */
    gap: 20px;
    max-width: 1200px;
    width: 100%;
}

/* Estilo dos planos */
.plan-card {
    min-width: 250px;
    max-width: 280px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.plan-card-descricao {
    padding: 15px;
}

/* Efeito de hover */
.plan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

/* Estilo do título (h2) */
.plan-card h2.plano {
    font-size: 40px;
    font-weight: 600;
    background-color: #4A90E2; /* Cor de fundo para o título */
    color: white; /* Cor do texto */
    padding: 15px; /* Espaçamento interno do título */
    margin: 0; /* Remove a margem extra */
    border-radius: 8px 8px 0 0; /* Bordas arredondadas no topo */
}

/* Estilo de preço */
.plan-price {
    font-size: 28px;
    color: #4A90E2;
    margin: 10px 0;
    font-weight: bold;
}

/* Estilo do botão "Escolher Plano" (fixado na parte inferior do card) */
.plan-button {
    background-color: #4A90E2;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    position: absolute; /* Fixar o botão na parte inferior do cartão */
    bottom: 10px; /* Distância da parte inferior */
    left: 50%; /* Centralizar horizontalmente */
    transform: translateX(-50%); /* Ajustar para centralizar corretamente */
    width: 70%;
}

.plan-button:hover {
    background-color: #357ABD;
}

/* Cores específicas para cada plano */
.basic {
    border-left: 5px solid #4A90E2;
}

.intermediate {
    border-left: 5px solid #F39C12;
}

.advanced {
    border-left: 5px solid #E74C3C;
}

.ultra {
    border-left: 5px solid #8E44AD;
}

/* Responsividade para telas menores (Mobile) */

/* Para telas menores que 768px, exibe 2 planos por linha */
@media (max-width: 768px) {
    .plans-grid {
        grid-template-columns: repeat(2, 1fr); /* Exibe 2 planos por linha */
        justify-items: center; /* Centraliza as grids horizontalmente */
    }
    
    /* Ajusta os tamanhos dos textos no banner para mobile */
    .banner h1 {
        font-size: 28px; /* Reduz o tamanho do título para telas menores */
    }

    .banner p {
        font-size: 14px; /* Reduz o tamanho do texto do parágrafo para telas menores */
    }
}

/* Para telas menores que 480px */
@media (max-width: 480px) {
    .plans-grid {
        grid-template-columns: 1fr; /* Exibe 1 plano por linha */
        justify-items: center; /* Centraliza as grids horizontalmente */
    }

    .plan-card {
        min-width: 220px;
        max-width: 250px;
    }
    
    /* Ajusta os tamanhos dos textos no banner para telas ainda menores */
    .banner h1 {
        font-size: 24px; /* Ajusta ainda mais o título */
    }

    .banner p {
        font-size: 12px; /* Ajusta ainda mais o texto do parágrafo */
    }
}