/* Reset e base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*,
:before,
:after {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

::backdrop {
    --tw-border-spacing-x: 0;
    --tw-border-spacing-y: 0;
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-pan-x: ;
    --tw-pan-y: ;
    --tw-pinch-zoom: ;
    --tw-scroll-snap-strictness: proximity;
    --tw-gradient-from-position: ;
    --tw-gradient-via-position: ;
    --tw-gradient-to-position: ;
    --tw-ordinal: ;
    --tw-slashed-zero: ;
    --tw-numeric-figure: ;
    --tw-numeric-spacing: ;
    --tw-numeric-fraction: ;
    --tw-ring-inset: ;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-color: rgb(59 130 246 / .5);
    --tw-ring-offset-shadow: 0 0 #0000;
    --tw-ring-shadow: 0 0 #0000;
    --tw-shadow: 0 0 #0000;
    --tw-shadow-colored: 0 0 #0000;
    --tw-blur: ;
    --tw-brightness: ;
    --tw-contrast: ;
    --tw-grayscale: ;
    --tw-hue-rotate: ;
    --tw-invert: ;
    --tw-saturate: ;
    --tw-sepia: ;
    --tw-drop-shadow: ;
    --tw-backdrop-blur: ;
    --tw-backdrop-brightness: ;
    --tw-backdrop-contrast: ;
    --tw-backdrop-grayscale: ;
    --tw-backdrop-hue-rotate: ;
    --tw-backdrop-invert: ;
    --tw-backdrop-opacity: ;
    --tw-backdrop-saturate: ;
    --tw-backdrop-sepia: ;
    --tw-contain-size: ;
    --tw-contain-layout: ;
    --tw-contain-paint: ;
    --tw-contain-style:
}

*,
:before,
:after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb
}

:before,
:after {
    --tw-content: ""
}

html,
:host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
    font-feature-settings: normal;
    font-variation-settings: normal;
    -webkit-tap-highlight-color: transparent
}



body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

.App {
    min-height: 100vh;
}

/* Header */
.Header {
    background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    justify-content: space-between;
    align-items: center;
}

.Header__Logo img {
    height: 40px;
    width: auto;
}

.Logo {
    font-size: 1.5rem;
    line-height: 2rem;
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    font-weight: 700;
}

.Header__MenuButton {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    color: white;
}

.Header__MenuButton:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.Header__MobileMenu {
    display: none;
    position: absolute;
    top: 3.5rem;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.Header__MobileMenu.show {
    display: block;
}

.Header__MobileMenu ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.Header__MobileMenu li {
    list-style: none;
}

.Header__MobileMenu a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.Header__MobileMenu a:hover {
    color: #0d7377;
}

/* Hero Section */
/* .Hero {
    background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 120px 2rem 2rem;
    position: relative;
    overflow: hidden;
} */

.Hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 120px 2rem 2rem;
    width: 100%;
    /* Garante que a seção cubra toda a largura da página */
    margin: 0 auto;
    position: relative;
    /* background-image: url('images/Pessoa.png'); */
    background-image: image-set(
        url('images/Pessoa.webp') type('image/webp'),
        url('images/Pessoa.png') type('image/png')
    );
    background-size: cover;
    /* Faz a imagem cobrir toda a área */
    background-position: center top;
    /* Ajusta a posição para descer um pouco */
    background-repeat: no-repeat;
    /* Evita repetição da imagem */
    min-height: 100vh;
    /* Garante que a seção ocupe a altura total da tela */
}

.Hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%" r="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>') no-repeat center center;
    background-size: cover;
    opacity: 0.3;
}

/* .Hero__Content {
    flex: 1;
    max-width: 600px;
    color: white;
    z-index: 2;
    position: relative;
} */

.Hero__Content {
    flex: 1;
    max-width: 50%;
    color: white;
    z-index: 2;
    position: relative;
}

.Hero__Title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.Hero__Subtitle {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.Hero__Highlight {
    background: rgba(255, 255, 255, 0.15);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.Hero__Features {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.Hero__Feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.Hero__FeatureIcon {
    width: 24px;
    height: 24px;
}

/* .Hero__FormContainer {
    flex: 0 0 400px;
    z-index: 2;
    position: relative;
} */

.Hero__FormContainer {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 50%;
    z-index: 2;
    position: relative;
}

/* Form Card */
/* .FormCard {
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
} */

.FormCard {
    width: 100%;
    max-width: 400px;
    background: white;
    padding: 2rem;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

.FormCard__Title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0d7377;
    margin-bottom: 0.5rem;
    text-align: center;
}

.FormCard__Subtitle {
    color: #666;
    text-align: center;
    margin-bottom: 2rem;
}

.FormCard__FormField {
    margin-bottom: 1.5rem;
}

.FormCard__FormField label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.FormCard__FormField input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.FormCard__FormField input:focus {
    outline: none;
    border-color: #0d7377;
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
}

.FormCard__SubmitButton {
    width: 100%;
    background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.FormCard__SubmitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 115, 119, 0.3);
}

.FormCard__PrivacyText {
    text-align: center;
    font-size: 0.875rem;
    color: #666;
    margin-top: 1rem;
}

/* Sections */
.About,
.Features,
.DNA,
.Contact {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.About__Title,
.Features__Title,
.DNA__Title,
.Contact__Title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 1rem;
    color: #0d7377;
}

.About__Description,
.Features__Description,
.DNA__Description,
.Contact__Description {
    text-align: center;
    font-size: 1.125rem;
    color: #666;
    margin-bottom: 3rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.About__Section {
    margin-bottom: 3rem;
}

.About__SectionTitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0d7377;
    margin-bottom: 1rem;
}

/* Features Grid */
.Features__Grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.FeatureCard {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
}

.FeatureCard:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.FeatureCard__Title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0d7377;
    margin-bottom: 1rem;
}

.FeatureCard__Description {
    color: #666;
    margin-bottom: 1rem;
}

.FeatureCard__Status {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Call to Action */
.CallToAction {
    background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
    padding: 5rem 2rem;
    text-align: center;
    color: white;
}

.CallToAction__Title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.CallToAction__Description {
    font-size: 1.125rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.CallToAction__Button {
    background: white;
    color: #0d7377;
    border: none;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.CallToAction__Button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* DNA Grid */
.DNA__Grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.DNACard {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: transform 0.3s ease;
}

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

.DNACard__Title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0d7377;
    margin-bottom: 1rem;
}

.DNACard__Description {
    color: #666;
}

/* Milestones */
.Milestones {
    background: #f8f9fa;
    padding: 3rem 2rem;
}

.Milestones__Content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 4rem;
}

.MilestoneCard {
    text-align: center;
}

.MilestoneCard__Year {
    font-size: 3rem;
    font-weight: 700;
    color: #0d7377;
    margin-bottom: 0.5rem;
}

.MilestoneCard__Description {
    font-size: 1.125rem;
    color: #666;
}

/* Contact */
/* .Contact__Info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.Contact__InfoItem {
    text-align: center;
} */

.Contact__Info {
    display: flex;
    /* Alinha os itens em uma linha */
    justify-content: center;
    /* Centraliza os itens horizontalmente */
    align-items: center;
    /* Centraliza os itens verticalmente */
    gap: 2rem;
    /* Espaçamento entre os itens */
    margin-bottom: 3rem;
    flex-wrap: wrap;
    /* Permite que os itens quebrem para a próxima linha em telas menores */
}

.Contact__InfoItem {
    text-align: center;
    /*flex: 1;*/
    /* Faz com que os itens ocupem o mesmo espaço */
    min-width: 250px;
    /* Define um tamanho mínimo para os itens */
}

.Contact__InfoLabel {
    font-weight: 600;
    color: #0d7377;
    margin-bottom: 0.5rem;
}

.Contact__InfoValue {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.Contact__InfoDetail {
    color: #666;
    font-size: 0.875rem;
}

.Contact__Form {
    max-width: 600px;
    margin: 0 auto;
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.Contact__FormField {
    margin-bottom: 1.5rem;
}

.Contact__FormField label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.Contact__FormField input,
.Contact__FormField textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e1e5e9;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    font-family: inherit;
}

.Contact__FormField textarea {
    min-height: 120px;
    resize: vertical;
}

.Contact__FormField input:focus,
.Contact__FormField textarea:focus {
    outline: none;
    border-color: #0d7377;
    box-shadow: 0 0 0 3px rgba(13, 115, 119, 0.1);
}

.Contact__SubmitButton {
    width: 100%;
    background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
    color: white;
    border: none;
    padding: 16px;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.Contact__SubmitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(13, 115, 119, 0.3);
}

/* Estilização do rodapé */
.Footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 2rem;
    position: relative;
}

.Footer__Text {
    margin: 0;
    font-size: 1rem;
}

.Footer__Developer {
    margin-top: 1rem; /* Adiciona espaço entre os textos */
    font-size: 0.875rem;
    color: white;
}

.Footer__Link {
    color: #14a085;
    text-decoration: none;
    transition: color 0.3s ease;
}

.Footer__Link:hover {
    color: #0d7377;
}

/* Responsive */
@media (max-width: 768px) {
    .Footer {
        padding: 1.5rem; /* Ajusta o padding para telas menores */
    }

    .Footer__Text {
        font-size: 0.9rem; /* Reduz o tamanho do texto */
    }

    .Footer__Developer {
        font-size: 0.8rem; /* Reduz o tamanho do texto */
        margin-top: 0.5rem; /* Ajusta o espaçamento */
    }
    
    .Hero {
        flex-direction: column;
        /* Empilha o conteúdo e o formulário */
        text-align: center;
        /* Centraliza o texto */
        padding: 100px 1rem 2rem;
        /* Ajusta o espaçamento interno */
        background-size: auto;
        /* Ajusta a imagem para caber na tela */
        background-position: top center;
        /* Centraliza a imagem no topo */
    }

    .Hero__Content {
        margin-bottom: 2rem;
        /* Adiciona espaçamento entre o conteúdo e o formulário */
        max-width: 90%;
        /* Reduz a largura do conteúdo */
    }

    .Hero__Title {
        font-size: 2rem;
        /* Reduz o tamanho do título */
        line-height: 1.4;
        /* Ajusta o espaçamento entre linhas */
    }

    .Hero__Subtitle {
        font-size: 1rem;
        /* Reduz o tamanho do subtítulo */
        margin-bottom: 1.5rem;
        /* Ajusta o espaçamento inferior */
    }

    .Hero__Highlight {
        padding: 1rem;
        margin-bottom: 1.5rem;
    }

    .Hero__Features {
        justify-content: center;
    }

    .Hero__FormContainer {
        width: 100%;
        /* Garante que o formulário ocupe toda a largura */
        max-width: 400px;
        /* Define um limite máximo */
    }

    .Header {
        padding: 1rem;
    }

    .About,
    .Features,
    .DNA,
    .Contact {
        padding: 3rem 1rem;
    }

    .Features__Grid {
        grid-template-columns: 1fr;
        /* Exibe um cartão por linha */
        gap: 1.5rem;
        /* Adiciona espaçamento entre os cartões */
    }

    .FeatureCard {
        padding: 1.5rem;
        /* Reduz o espaçamento interno dos cartões */
    }

    .FeatureCard__Title {
        font-size: 1.25rem;
        /* Reduz o tamanho do título */
    }

    .FeatureCard__Description {
        font-size: 1rem;
        /* Reduz o tamanho do texto */
    }

    .DNA__Grid {
        grid-template-columns: 1fr;
        /* Exibe um cartão por linha */
        gap: 1.5rem;
        /* Adiciona espaçamento entre os cartões */
    }

    .DNACard {
        padding: 1.5rem;
        /* Reduz o espaçamento interno dos cartões */
    }

    .DNACard__Title {
        font-size: 1.25rem;
        /* Reduz o tamanho do título */
    }

    .DNACard__Description {
        font-size: 1rem;
        /* Reduz o tamanho do texto */
    }

    .Milestones__Content {
        flex-direction: column;
        gap: 2rem;
    }

    .Contact__Info {
        flex-direction: column;
        /* Empilha os itens verticalmente */
        gap: 1.5rem;
        /* Adiciona espaçamento entre os itens */
    }

    .Contact__InfoItem {
        text-align: center;
        /* Centraliza os itens */
        margin-bottom: 1rem;
        /* Adiciona espaçamento inferior */
    }

    .Contact__Form {
        padding: 1.5rem;
        /* Reduz o espaçamento interno */
        max-width: 90%;
        /* Reduz a largura do formulário */
    }

    .Contact__FormField {
        margin-bottom: 1rem;
        /* Reduz o espaçamento entre os campos */
    }

    .Contact__SubmitButton {
        padding: 12px;
        /* Ajusta o tamanho do botão */
        font-size: 1rem;
        /* Reduz o tamanho do texto */
    }

    .Footer {
        padding: 1.5rem;
        /* Reduz o espaçamento interno */
        font-size: 0.9rem;
        /* Reduz o tamanho do texto */
    }
}

/* Success message */
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #c3e6cb;
}

.error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid #f5c6cb;
}

/* Loading state */
.loading {
    opacity: 0.7;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0d7377;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.WhatsAppButton {
    position: fixed;
    bottom: 20px;
    /* Distância do botão em relação à parte inferior da tela */
    right: 20px;
    /* Distância do botão em relação à lateral direita */
    width: 60px;
    /* Largura do botão */
    height: 60px;
    /* Altura do botão */
    background-color: #25d366;
    /* Cor de fundo do botão (verde do WhatsApp) */
    border-radius: 50%;
    /* Torna o botão circular */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Adiciona uma sombra ao botão */
    z-index: 1000;
    /* Garante que o botão fique acima de outros elementos */
    transition: transform 0.3s ease;
}

.WhatsAppButton:hover {
    transform: scale(1.1);
    /* Aumenta o botão levemente ao passar o mouse */
}

.WhatsAppButton img {
    width: 60px;
    /* Define a largura da imagem igual ao botão */
    height: 60px;
    /* Define a altura da imagem igual ao botão */
    border-radius: 50%;
    /* Garante que a imagem também fique circular */
    object-fit: cover;
    /* Ajusta a imagem para cobrir o espaço sem distorção */
}


.hidden {
    display: none;
}


/* #mobileMenu {
    display: none; 
    position: absolute;
    top: 4rem; 
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: transform 0.3s ease, opacity 0.3s ease;
} */

#mobileMenu.show {
    display: block; /* Exibe o menu quando a classe 'show' está presente */
    transform: translateY(0);
    opacity: 1;
}

/* #mobileMenu.hidden {
    display: none; 
} */

#mobileMenu ul {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

#mobileMenu li {
    list-style: none;
}

#mobileMenu a {
    text-decoration: none;
    color: #333;
    font-size: 1rem;
    transition: color 0.3s ease;
}

#mobileMenu a:hover {
    color: #0d7377; /* Cor de destaque ao passar o mouse */
}



/* Estilização para a página de cartão de visitas */
.BusinessCard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    background: linear-gradient(135deg, #0d7377 0%, #14a085 100%);
    min-height: 100vh;
    color: white;
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.2);
}

.BusinessCard__Avatar {
    width: 120px;
    height: 120px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.BusinessCard__Logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.BusinessCard__Header {
    margin-bottom: 2rem;
}

.BusinessCard__Name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.BusinessCard__Tagline {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

.BusinessCard__ContactInfo {
    width: 100%;
    max-width: 400px;
    margin-bottom: 2rem;
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.BusinessCard__ContactItem {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.BusinessCard__ContactItem:last-child {
    border-bottom: none;
}

.BusinessCard__ContactIcon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d7377;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.BusinessCard__ContactDetails {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.BusinessCard__ContactLabel {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 500;
}

.BusinessCard__ContactValue {
    font-size: 1rem;
    font-weight: 600;
}

.BusinessCard__Social {
    width: 100%;
    max-width: 400px;
    margin-bottom: 2rem;
}

.BusinessCard__SocialTitle {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: white;
}
.Link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.BusinessCard__SocialLink {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    text-decoration: none;
    color: white;
    transition: background 0.3s ease, transform 0.2s ease;
}

.BusinessCard__SocialLink:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.BusinessCard__SocialIcon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d7377;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.BusinessCard__SocialArrow {
    margin-left: auto;
    font-size: 1.2rem;
    opacity: 0.7;
}

.BusinessCard__Actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    width: 100%;
    max-width: 400px;
}

.FormCard__SubmitButton {
    width: 100%;
    background: white;
    color: #0d7377;
    border: none;
    padding: 12px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.FormCard__SubmitButton:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* Responsividade específica para o cartão */
@media (max-width: 768px) {
    .BusinessCard__Avatar {
        width: 100px;
        height: 100px;
    }
    
    /* .BusinessCard__Logo {
        width: 70px;
        height: 70px;
    } */
    
    .BusinessCard__Name {
        font-size: 1.5rem;
    }
    
    .BusinessCard__ContactInfo,
    .BusinessCard__Social,
    .BusinessCard__Actions {
        max-width: 90%;
    }
}