#about-section,
#certifications-section,
#plans-section {
    scroll-margin-top: 60px; /* Ajuste este valor se o título ainda estiver cortado */
}
#services-section {
    scroll-margin-top: 80px;
}

/* General Reset & Base Styles */
body {
    margin: 0;
    padding: 0;
    font-family: var(--body-fontFamily);
    font-weight: var(--body-fontWeight);
    color: #333;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--head-fontFamily);
    font-weight: var(--head-fontWeight);
    color: #111827;
}
a {
    text-decoration: none;
    color: inherit;
}
/* Reset/Base para o container - importante para o grid do footer */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
section {
    padding: 80px 0;
}

/* Header Navigation Styles */
.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    /* display: flex; REMOVED TO ALLOW TAILWIND'S `hidden` AND `lg:flex` TO WORK */
    justify-content: center;
    gap: 25px; /* Espaçamento entre os itens do menu */
    flex-wrap: wrap; /* Permite que os itens quebrem linha em telas menores */
}

.main-nav ul li a {
    font-family: var(--head-fontFamily);
    font-weight: 500;
    font-size: 1.1rem;
    color: #111827;
    padding: 5px 0;
    transition: color 0.3s ease;
    position: relative; /* Para o efeito de sublinhado */
}

.main-nav ul li a:hover {
    color: #007bff; /* Cor ao passar o mouse */
}

/* Efeito de sublinhado ao passar o mouse */
.main-nav ul li a::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #007bff;
    transition: width 0.3s ease-out;
}

.main-nav ul li a:hover::after {
    width: 100%;
}

/* Responsividade do menu */
@media (max-width: 768px) {
    .main-nav ul {
        justify-content: center; /* Centraliza os itens em telas menores */
        gap: 15px; /* Reduz o espaçamento */
        margin-top: 20px; /* Espaço entre o logo e o menu */
    }
    .main-nav ul li a {
        font-size: 1rem; /* Reduz o tamanho da fonte */
    }
}

.hero {
    position: relative;
    height: 70vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}
.hero-carousel {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.hero-carousel .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.hero-carousel .slide.active {
    opacity: 1;
}
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}
.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #fff;
}
.hero p {
    font-size: 1.3rem;
    margin-bottom: 40px;
}
.hero .cta-buttons a {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    margin: 0 10px;
    font-weight: bold;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}
.hero .cta-buttons .primary-cta {
    display: inline-block;
    padding: 15px 30px;
    background-color: #28a745; /* Verde vibrante */
    color: #fff;
    text-decoration: none !important;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1;
    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
    margin-top: 30px;
    cursor: pointer;
}
.hero .cta-buttons .primary-cta:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}
.hero .cta-buttons .secondary-cta {
    background-color: transparent;
    border: 2px solid #fff;
    color: #fff;
}
.hero .cta-buttons .secondary-cta:hover {
    background-color: #fff;
    color: #007bff;
}

/* Certifications */
.certifications-section {
    background-color: #e0e0e0;
    text-align: center;
}
.certifications-section h2 {
    font-weight: 500;
}
.certifications-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 50px;
}
.certification-item img {
    max-width: 120px;
    height: auto;
    transition:
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out;
}
.certification-item img:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Plans Section */
.plans-section {
    background-color: #f0f4f8;
    text-align: center;
}
.plans-section h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
}
.plans-section p {
    max-width: 800px;
    margin: 0 auto 50px auto;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #444;
}
.plans-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 50px;
}
.plan-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border: 2px solid transparent;
}
.plan-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}
.plan-card h3 {
    font-size: 2rem;
    margin-bottom: 15px;
    color: #007bff;
}
.plan-card .price {
    font-size: 2.5rem;
    font-weight: bold;
    color: #111827;
    margin-bottom: 25px;
}
.plan-card .price span {
    font-size: 1.2rem;
    font-weight: normal;
    color: #666;
}
.plan-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    width: 100%;
}
.plan-card ul li {
    font-size: 1rem;
    color: #555;
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}
.plan-card ul li::before {
    content: "✓";
    color: #048b16;
    position: absolute;
    left: 0;
    font-weight: bold;
}

.red-text {
    color: red;
    font-weight: bold;
}

.plan-card .cta-button {
    background-color: #007bff;
    color: #fff;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: auto; /* Pushes button to the bottom */
}

.plan-card .cta-consbutton {
    background-color: #28a745;
    color: #fff;
    padding: 14px 30px;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-top: auto; /* Pushes button to the bottom */
}

.plan-card .cta-button:hover {
    background-color: #0056b3;
}

.plan-card .cta-consbutton:hover {
    background-color: #218838;
}

/* Footer */
footer {
    background-color: #4a4a4a; /* Cor de fundo do footer */
    color: #fff; /* Cor do texto geral do footer */
    padding: 60px 0; /* Espaçamento interno superior e inferior */
}

/* Layout de Grid para as colunas do footer */
footer .footer-grid {
    display: grid;
    grid-template-columns: auto auto;
    gap: 100px; /* Espaçamento entre as colunas */
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
}

/* Estilos das listas de links */
footer .footer-col ul {
    list-style: none; /* Remove marcadores de lista */
    padding: 0;
    margin: 0;
}

footer .footer-col ul li {
    margin-bottom: 10px; /* Espaçamento entre os itens da lista */
}

footer .footer-col ul li a {
    color: #fff; /* Cor dos links */
    text-decoration: none; /* Remove sublinhado dos links */
    transition: color 0.3s ease; /* Transição suave na cor ao passar o mouse */
}

footer .footer-col ul li a:hover {
    color: #007bff; /* Cor dos links ao passar o mouse */
}

/* Estilos dos ícones sociais */
footer .social-icons a {
    margin-right: 15px; /* Espaçamento entre os ícones */
    display: inline-block; /* Para aplicar margin e padding corretamente */
}

footer .social-icons svg {
    width: 28px; /* Largura do ícone SVG */
    height: 28px; /* Altura do ícone SVG */
    color: #fff; /* Cor padrão do ícone */
    transition: color 0.3s ease; /* Transição suave na cor ao passar o mouse */
}

footer .social-icons a:hover svg {
    color: #007bff; /* Cor dos ícones ao passar o mouse (ex: Facebook, LinkedIn) */
}

/* Estilo específico para o ícone do YouTube ao passar o mouse */
footer .social-icons a[href*="https://www.youtube.com/@mwone_ti"]:hover svg
{
    color: #ff0000; /* Cor vermelha para o YouTube */
}

/* Estilo para o texto de direitos autorais */
footer .copyright {
    text-align: center; /* Centraliza o texto */
    margin-top: 40px; /* Espaçamento acima do texto */
    font-size: 0.9rem; /* Tamanho da fonte */
    color: #bbb; /* Cor do texto */
}

/* Ajustes responsivos para o footer */
@media (max-width: 768px) {
    footer .footer-grid {
        grid-template-columns: 1fr; /* Em telas menores, uma única coluna */
        max-width: 100%; /* Ocupe toda a largura disponível */
        gap: 30px; /* Reduzir o gap para telas menores, se desejar */
    }
}

.colored-letter {
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-decoration: underline;
}
.colored-letter2 {
    color: rgb(255, 255, 255);
    font-weight: bold;
    z-index: 1;
    text-decoration: underline;
}
.column {
    width: 50%;
    padding: 5px;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

@media screen and (min-width: 480px) {
    .column {
        width: 50%;
    }
}

@media screen and (min-width: 600px) {
    .column {
        width: 33.33%;
    }
}

@media screen and (min-width: 768px) {
    .column {
        width: 25%;
    }
}

@media screen and (min-width: 1024px) {
    .column {
        width: 20%;
    }
}

@media screen and (min-width: 1200px) {
    .column {
        width: 14.28%;
    }
}
/* Efeito hover para os ícones no cabeçalho */
header
    .w-9.lg\:w-auto
    ul.lg\:flex.items-center.gap-x-4.gap-y-2.flex-wrap.hidden
    a:hover
    svg {
    color: #007bff !important; /* Um azul vibrante */
    transition: color 0.3s ease; /* Transição suave */
}

/* Efeito hover para o ícone do YouTube no cabeçalho */
header .w-9.lg\:w-auto ul.lg\:flex.items-center.gap-x-4.gap-y-2.flex-wrap.hidden a[href="https://www.youtube.com/@mwone_ti"]:hover svg
{
    color: #ff0000 !important; /* Vermelho */
    transition: color 0.3s ease; /* Transição suave */
}

/* Efeito hover para os ícones no rodapé */
footer ul.flex.items-center.gap-x-4.gap-y-2.flex-wrap a:hover svg {
    color: #007bff !important; /* Um azul vibrante */
    transition: color 0.3s ease; /* Transição suave */
}

/* Efeito hover para o ícone do YouTube no rodapé */
footer ul.flex.items-center.gap-x-4.gap-y-2.flex-wrap a[href="https://www.youtube.com/@mwone_ti"]:hover svg
{
    color: #ff0000 !important; /* Vermelho */
    transition: color 0.3s ease; /* Transição suave */
}

/* Efeitos para os escudos de certificação */
.row .column img {
    transition:
        transform 0.3s ease-in-out,
        box-shadow 0.3s ease-in-out; /* Transição suave */
    /* Opcional: para garantir que os escudos não saiam do layout ao escalar */
    display: block;
    margin: 0 auto;
}

.row .column img:hover {
    transform: scale(1.1); /* Aumenta a imagem em 10% */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra */
    cursor: pointer; /* Muda o cursor para indicar interatividade */
}

body {
    margin: 0;
    padding: 0;
}

/* Estilos para a seção de projetos (cards) */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(280px, 1fr)
    ); /* 4 colunas em telas maiores, ajusta para menos */
    gap: 20px; /* Espaçamento entre os cartões */
    padding: 20px;
}

.project-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Garante que a imagem não vaze nos cantos arredondados */
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.project-card img {
    width: 100%;
    height: 180px; /* Altura fixa para as imagens */
    object-fit: cover; /* Garante que a imagem cubra a área sem distorcer */
    border-bottom: 1px solid #eee;
}

.project-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
}

.project-content h3 {
    font-size: 1.5rem;
    color: #111827;
    margin-bottom: 10px;
    font-family: var(
        --head-fontFamily
    ); /* Usar a fonte de cabeçalho definida */
    font-weight: 500;
}

.project-content p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Faz o parágrafo ocupar o máximo de espaço antes do botão */
}

.project-button {
    background-color: #007bff; /* Azul padrão */
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: bold;
    transition: background-color 0.3s ease;
    align-self: flex-start; /* Alinha o botão à esquerda dentro do card */
}

.project-button:hover {
    background-color: #0056b3;
}

/* Remova ou ajuste os estilos antigos do .video-grid e .video-item se não forem mais usados */
.video-grid {
    /* Remova se não for mais necessário, ou ajuste para outras seções */
    display: none; /* Esconda o layout antigo */
}
.video-item {
    /* Remova se não for mais necessário */
    display: none; /* Esconda os itens antigos */
}

.video-item {
    position: relative;
    padding: 20px;
    border-radius: 5px;
}

.video-item img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* Troque a animação do botão nos vídeos */
.video-item:hover .player-overlay {
    opacity: 1;
    transform: scale(
        1.05
    ); /* Adiciona um leve aumento de escala para o overlay */
}
.video-item:hover img {
    transform: scale(
        1.02
    ); /* Adiciona um leve aumento de escala para a imagem */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adiciona uma sombra para um efeito mais "flutuante" */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease; /* Garante uma transição suave */
}

.video-item:hover .player-overlay {
    opacity: 1;
}

.video-item p {
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
}

/* Estilos para o popup */
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.popup.open {
    opacity: 1;
    visibility: visible;
}

.popup-content {
    position: relative;
    background-color: rgb(255, 255, 255); /* Fundo branco para o "mini-post" */
    padding: 30px; /* Mais padding para melhor visualização */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-width: 900px; /* Largura máxima para o mini-post */
    max-height: 90vh; /* Altura máxima para não transbordar */
    overflow-y: auto; /* Adiciona scroll se o conteúdo for muito grande */
    gap: 20px; /* Espaçamento entre os elementos internos */
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #555;
    font-size: 36px;
    cursor: pointer;
    z-index: 10; /* Garante que o X fique visível */
    font-weight: normal;
    transition: color 0.2s ease;
}

.popup-close:hover {
    color: #f00; /* Cor vermelha ao passar o mouse */
}

/* NEW POPUP MODEL STYLES */
.new-popup-content {
    display: grid;
    grid-template-columns: 1fr; /* Default to single column */
    gap: 25px;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    max-width: 1000px; /* Wider for a two-column layout */
    width: 90%; /* Adjust as needed */
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
}

@media (min-width: 768px) {
    .new-popup-content {
        grid-template-columns: 1.5fr 1fr; /* Two columns: video on left, text on right */
    }
}

.new-popup-video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
    background-color: #000; /* Placeholder for video loading */
}

.new-popup-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* Remove default iframe border */
}

.new-popup-details {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to the top */
}

.new-popup-details h3 {
    font-family: var(--head-fontFamily);
    font-weight: 500;
    font-size: 2.2rem;
    color: #111827;
    margin-bottom: 15px;
    text-align: left; /* Align title to left */
    line-height: 1.2;
}

.new-popup-details p {
    color: #444;
    font-size: 1.1rem;
    line-height: 1.7;
    text-align: left;
    margin-bottom: 20px;
}

.new-popup-details .contact-button {
    display: inline-block;
    padding: 12px 25px;
    background-color: #28a745; /* Green button */
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    transition:
        background-color 0.3s ease,
        transform 0.2s ease;
    align-self: flex-start; /* Align button to left */
    margin-top: auto; /* Push button to bottom if content is short */
}

.new-popup-details .contact-button:hover {
    background-color: #218838;
    transform: translateY(-2px);
}

/* End NEW POPUP MODEL STYLES */

/* Media Queries for responsiveness of the NEW popup */
@media (max-width: 767px) {
    /* Tablet and smaller */
    .new-popup-content {
        grid-template-columns: 1fr; /* Single column layout */
        padding: 20px;
        width: 95%;
    }
    .new-popup-details h3 {
        font-size: 1.8rem;
        text-align: center; /* Center title on smaller screens */
    }
    .new-popup-details p {
        font-size: 1rem;
    }
    .new-popup-details .contact-button {
        align-self: center; /* Center button on smaller screens */
    }
}

@media (max-width: 480px) {
    /* Mobile */
    .new-popup-content {
        padding: 15px;
        gap: 15px;
    }
    .new-popup-details h3 {
        font-size: 1.5rem;
    }
}

h1 {
    text-align: center;
    padding: 20px;
}
.news-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.news-block {
    flex: 1 1 250px;
    margin-right: 10px;
    margin-bottom: 20px;
    background-color: #eef5fd;
    padding: 10px;
    height: 630px; /* Ajusta a altura do bloco */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilos opcionais para melhorar a aparência */
.news-block img {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.news-summary {
    margin-bottom: 10px;
}

.read-more {
    display: inline-block;
    background-color: #0077b5;
    color: #fff;
    padding: 5px 10px;
    text-decoration: none;
    border-radius: 3px;
}

/* Responsividade */
@media screen and (max-width: 900px) {
    /* Adjusted breakpoint for 2 columns */
    .news-block {
        flex-basis: 48%; /* 2 items per row */
    }
}

@media screen and (max-width: 600px) {
    .news-block {
        flex-basis: 100%;
        margin-right: 0;
    }
}
/* --- Estilos para a nova seção de Serviços --- */
.services-section {
    background-color: #1a202c; /* Mesmo fundo da seção História */
    color: #cbd5e0;
    padding: 80px 0;
    text-align: center;
}

.services-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.services-title {
    font-family: var(--head-fontFamily);
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 50px;
}

.services-title .highlight-text {
    color: #2dce89; /* Verde-água de destaque */
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.service-card {
    background-color: #2d3748; /* Cor de fundo dos blocos */
    padding: 40px 30px;
    border-radius: 8px;
    text-align: left;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    border-bottom: 4px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    border-bottom-color: #2dce89; /* Efeito hover combinando com o destaque */
}

.service-icon {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background-color: rgba(45, 206, 137, 0.1); /* Fundo translúcido verde */
    border-radius: 12px;
    color: #2dce89;
}

.service-card h3 {
    font-family: var(--head-fontFamily);
    font-size: 1.6rem;
    font-weight: 500;
    color: #fff;
    margin-bottom: 15px;
}

.service-card p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e2e8f0;
    margin: 0;
}

/* 1. Estilos para a nova seção "Nossa História e Compromisso" */
.about-section-new {
    background-color: #1a202c; /* Fundo escuro */
    color: #cbd5e0; /* Cor do texto clara */
    padding: 80px 0;
    text-align: center;
}
.about-section-new .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.about-title {
    font-family: var(--head-fontFamily);
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 10px;
}
.about-title .highlight-text {
    color: #2dce89; /* Cor verde-água do texto destacado */
}
.about-subtitle {
    font-size: 1.2rem;
    color: #a0aec0; /* Cinza claro para o subtítulo */
    margin-bottom: 50px;
}
.about-content-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    text-align: left;
}
.about-text {
    flex: 1;
    min-width: 300px;
}
.about-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}
.about-stats {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    min-width: 300px;
}
.stat-item {
    background-color: #2d3748; /* Cinza mais escuro para os boxes */
    padding: 25px;
    border-radius: 8px;
    text-align: center;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}
.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}
.stat-item h3 {
    font-family: var(--head-fontFamily);
    font-size: 2.5rem;
    font-weight: 500;
    color: #2dce89; /* Cor verde-água para os números */
    margin-bottom: 5px;
}
.stat-item p {
    font-size: 1rem;
    color: #e2e8f0;
}

/* Responsividade da nova seção Sobre */
@media (max-width: 992px) {
    .about-content-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .about-text {
        text-align: left;
    }
}
@media (max-width: 480px) {
    .about-stats {
        grid-template-columns: 1fr;
    }
}

/* 2. Estilos para destacar o Plano Profissional */
.plan-card.recommended-plan {
    position: relative;
    border: 3px solid #007bff;
    transform: translateY(-20px);
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.2);
}
.plan-card.recommended-plan::before {
    content: "RECOMENDADO";
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #007bff;
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: bold;
    font-family: var(--head-fontFamily);
    z-index: 10;
}

/* Ajusta o hover do plano recomendado */
.plan-card.recommended-plan:hover {
    transform: translateY(-25px); /* Efeito de elevação sutil */
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.25);
}

/* Remove o hover dos outros cards para não conflitarem visualmente */
.plan-card:not(.recommended-plan):hover {
    transform: translateY(-15px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
    border-color: #007bff;
}