/* Estilos para a div de mensagem */
 .custom-alert-overlay {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     display: flex;
     justify-content: center;
     align-items: center;
     z-index: 9999;
 }

 .custom-alert-box {
     background-color: white;
     padding: 20px;
     border-radius: 5px;
     text-align: center;
 }

/* ======================================================
   BOTÕES DE REDES SOCIAIS - RESPONSIVIDADE
   ====================================================== */
/* Container dos botões de redes sociais - ESPECÍFICO para não afetar áreas internas */
.contact-area .form-group,
.footer-area .form-group,
.get-start-area .form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* ======================================================
   CORREÇÃO CRÍTICA: Reverter display block nas áreas internas
   A regra global .form-group com flexbox quebrava layouts internos
   ====================================================== */
.content-wrapper .form-group,
.content-wrapper-services .form-group {
    display: block !important;
}

/* Garantir que todos os botões tenham transição suave */
.btn {
    transition: all 0.3s ease !important;
}

/* Botões de redes sociais em telas pequenas */
@media (max-width: 768px) {
    .click-whatsapp,
    .click-facebook,
    .click-instagram,
    .click-linkedin {
        width: calc(50% - 0.1rem); /* Dois botões por linha com menos gap */
        margin: 0.25rem 0.05rem; /* Margem menor entre as colunas */
    }
    
    /* Reduzir altura e padding APENAS dos botões de redes sociais */
    .click-whatsapp a,
    .click-facebook a,
    .click-instagram a,
    .click-linkedin a {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.8rem !important;
        height: auto !important;
        line-height: 1.2 !important;
    }
}

/* Para telas muito pequenas */
@media (max-width: 480px) {
    .click-whatsapp,
    .click-facebook,
    .click-instagram,
    .click-linkedin {
        width: 100%; /* Um botão por linha */
        margin: 0.2rem 0;
    }
    
    /* Altura ainda menor para mobile pequeno - APENAS redes sociais */
    .click-whatsapp a,
    .click-facebook a,
    .click-instagram a,
    .click-linkedin a {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.75rem !important;
        height: auto !important;
        line-height: 1.1 !important;
    }
}

/* ======================================================
   NOTIFICAÇÕES ELEGANTES GLOBAIS
   ====================================================== */
.geral-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    max-width: 400px;
    min-width: 300px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-left: 4px solid #3498db;
    opacity: 0;
    transform: translateY(-20px);
    animation: slideInNotification 0.4s ease-out forwards;
}

.geral-notification-warning {
    border-left-color: #f39c12;
}

.geral-notification-success {
    border-left-color: #27ae60;
}

.geral-notification-error {
    border-left-color: #e74c3c;
}

.geral-notification-content {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    gap: 0.75rem;
}

.geral-notification i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.geral-notification-warning i {
    color: #f39c12;
}

.geral-notification-success i {
    color: #27ae60;
}

.geral-notification-error i {
    color: #e74c3c;
}

.geral-notification span {
    flex: 1;
    color: #2c3e50;
    font-weight: 500;
    font-size: 0.9rem;
    line-height: 1.4;
}

.geral-notification-close {
    background: none;
    border: none;
    color: #bdc3c7;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.geral-notification-close:hover {
    background: #ecf0f1;
    color: #7f8c8d;
}

.geral-notification-close i {
    font-size: 0.875rem;
}

@keyframes slideInNotification {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 
 .bg_videos_links {
    background: url(images/bg-contact.jpg) top #e4e4e4 fixed;
}

.section_padding_50_80 {
    padding-top: 50px;
    padding-bottom: 60px;
}



.titulo-servico {
    font-size: 16px!important;
    font-weight: bold!important;
    margin-top: 10px!important;
    line-height: 1.4!important;
    color: #fff!important; 
}

.descricao-servico {
    font-size: 13px!important;
    margin-top: 5px!important;
    line-height: 1.4!important;
    color: #fff!important; 
}