/* Centrar el contenedor y darle un ancho del 80% */
 .custom-container {
    max-width: 80%;
    margin: auto; /* Centra el contenedor */
    padding: 30px;
    background: #f8f9fa; /* Color de fondo suave */
    border-radius: 10px;
    text-align: center; /* Centrar el texto */
    /*box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);  Sombra ligera */
}

.custom-container h1 {
    color: #333;
    font-weight: bold;
    
}

.custom-container p {
    color: #333;
    
    
}

.custom-container strong {
    color: #007bff; /* Azul Bootstrap */
}

.content {
            display: flex;
            justify-content: center;
            padding: 2rem 0;
        }
        .contact-wrap {
            max-width: 1000px;
            width: 100%;
            margin: 0 auto;
            background: #06203a;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            overflow: hidden;
        }
        .form {
            padding: 2rem;
        }
        .form h3 {
            margin-bottom: 1.5rem;
            color: #ffffff;
            text-align: center;
        }
        .form-control {
            background-color: #495057;
            border: 1px solid #6c757d;
            color: #ffffff;
            border-radius: 4px;
        }
        .col-form-label {
            color: #ffffff;
        }
        .form-control:focus {
            background-color: #495057;
            border-color: #0d6efd;
            box-shadow: 0 0 5px rgba(13, 110, 253, 0.5);
            color: #ffffff;
        }
        .form-control::placeholder {
            color: #ffffff;
            opacity: 0.7;
        }
        .btn-primary {
            background-color: #0d6efd;
            border: none;
            padding: 0.75rem 1.5rem;
            font-size: 1rem;
            border-radius: 4px;
            color: #ffffff;
        }
        .btn-primary:hover {
            background-color: #0a58ca;
        }
        .form-check-label {
            margin-left: 0.5rem;
            color: #ffffff;
        }
        .form-check-label a {
            color: #ffffff;
            text-decoration: none;
        }
        .form-check-label a:hover {
            text-decoration: underline;
        }
        .form-check-input {
            cursor: pointer;
        }
        .required::after {
            content: " *";
            color: #ffffff;
        }
        .required-note {
            color: #ffffff;
            font-size: 0.9rem;
            margin-bottom: 1.5rem;
        }
        .submitting {
            display: none;
            color: #ffffff;
            margin-left: 1rem;
        }
        .submitting.active {
            display: inline-block;
        }
        .invalid-feedback {
            color: #ffffff;
        }
        @media (max-width: 768px) {
            .form {
                padding: 1.5rem;
            }
            .btn-primary {
                width: 100%;
            }
        }