:root {
    --primary-red: #FFFFFF;
    --text-white: #d01206;
    --border-white: rgba(192, 0, 0, 0.2);
    --focus-blue: #61AEEF;
    --focus-shadow: rgba(97, 174, 239, 0.5);
}

.navbar-custom {
    background-color: var(--primary-red) !important;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    border-bottom: none !important;
}

.nav-link-custom,
.navbar-brand img,
.navbar-toggler-icon,
.btn-outline-custom {
    color: var(--text-white) !important;
    transition: all 0.3s ease;
}

.navbar-brand-logo {
    padding: 0;
    margin-right: 2rem;
}

    .navbar-brand-logo img {
        height: 45px;
        width: auto;
    }

.nav-item {
    padding: 0 0.25rem;
}

.nav-link-custom {
    position: relative;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    background-color: transparent !important;
}

    .nav-link-custom::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background-color: var(--text-white);
        transition: width 0.3s ease-out, left 0.3s ease-out;
    }

    .nav-link-custom:hover::after {
        width: 100%;
        left: 0;
    }

    

.btn-outline-custom {
    color: var(--text-white);
    border-color: var(--text-white);
}

    .btn-outline-custom:hover {
        background-color: var(--text-white);
        color: var(--primary-red) !important;
        border-color: var(--text-white);
    }

    .btn-outline-custom i {
        color: inherit;
    }


.form-control-custom {
    border: 1px solid var(--text-white);
    background-color: var(--primary-red);
    color: var(--text-white);
    transition: border-color 0.3s, box-shadow 0.3s;
}

    .form-control-custom::placeholder {
        color: rgba(192, 0, 0, 0.7);
    }

    .form-control-custom:focus {
        background-color: var(--primary-red);
        color: var(--text-white);
        border-color: var(--focus-blue);
        box-shadow: 0 0 0 0.25rem var(--focus-shadow);
    }

.navbar-toggler {
    border-color: rgba(192, 0, 0, 0.5);
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28192, 0, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

---
.text-muted.bg-dark {
    background-color: #1a1a1a !important;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.6);
    border-top: 3px solid #333;
}

.text-muted.bg-dark h5 {
    font-weight: 700;
    letter-spacing: 0.5px;
    border-bottom-color: #444 !important;
}

.text-muted.bg-dark .col-lg-3:first-child > div[style*='height: 150px'] {
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #444 !important;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.text-muted.bg-dark a.text-white {
    color: #ddd !important;
    transition: color 0.3s ease;
}

    .text-muted.bg-dark a.text-white:hover {
        color: #ff4d4d !important;
    }

.text-muted.bg-dark .btn {
    border-radius: 50px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.text-muted.bg-dark .btn-outline-light {
    color: #ddd;
    border-color: #555;
}

    .text-muted.bg-dark .btn-outline-light:hover {
        background-color: #333;
        border-color: #ddd;
        color: #ff4d4d;
    }

.text-muted.bg-dark .btn-outline-success:hover {
    background-color: #25d366;
    color: white;
}

.text-muted.bg-dark .btn-social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    color: #FFFFFF;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

    .text-muted.bg-dark .btn-social-icon.whatsapp:hover {
        background-color: #25D366;
        border-color: #25D366;
        color: white;
    }

.text-muted.bg-dark .btn-social-icon.facebook:hover {
    background-color: #1877F2;
    border-color: #1877F2;
    color: white;
}

    .text-muted.bg-dark .btn-social-icon.linkedin:hover {
        background-color: #0A66C2;
        border-color: #0A66C2;
        color: white;
    }

    .text-muted.bg-dark .btn-social-icon.instagram:hover {
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
        border-color: #fd5949;
        color: white;
        box-shadow: 0 0 15px rgba(214, 36, 159, 0.8);
    }