/* ========================================
            CONTACT PAGE — ADDITIONAL STYLES
           ======================================== */

        /* ---- Page Hero / Breadcrumb ---- */
        .page-hero {
            background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 60%, var(--primary-light) 100%);
            position: relative;
            overflow: hidden;
            padding: 140px 0 80px;
            color: var(--light);
        }

        .page-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.07'%3E%3Cpath d='M10 10 L90 10 L90 90 L10 90 Z' fill='none' stroke='%23FF6A00' stroke-width='2'/%3E%3Ccircle cx='50' cy='50' r='30' fill='none' stroke='%23FFFFFF' stroke-width='1'/%3E%3C/svg%3E") repeat;
            background-size: 40px 40px;
        }

        .page-hero-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.18;
            pointer-events: none;
        }
        .page-hero-orb.orb-1 {
            width: 400px; height: 400px;
            background: var(--accent);
            top: -120px; right: -100px;
        }
        .page-hero-orb.orb-2 {
            width: 300px; height: 300px;
            background: #3b82f6;
            bottom: -80px; left: -60px;
        }

        .page-hero-content {
            position: relative;
            z-index: 2;
        }

        .page-hero h1 {
            font-size: clamp(2.4rem, 5vw, 3.5rem);
            font-weight: 800;
            color: var(--light);
            margin-bottom: 12px;
            line-height: 1.1;
        }

        .page-hero h1 span {
            color: var(--accent);
        }

        .page-hero p.lead {
            color: rgba(255,255,255,0.82);
            font-size: 1.15rem;
            max-width: 520px;
            margin-bottom: 20px;
        }

        .breadcrumb-wrap {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: rgba(255,255,255,0.65);
        }

        .breadcrumb-wrap a {
            color: rgba(255,255,255,0.75);
            text-decoration: none;
            transition: var(--transition-base);
        }

        .breadcrumb-wrap a:hover { color: var(--accent); }
        .breadcrumb-wrap .sep { opacity: 0.5; }
        .breadcrumb-wrap .current { color: var(--accent); font-weight: 600; }

        /* ---- Quick Contact Bar ---- */
        .quick-contact-bar {
            background: var(--accent);
            padding: 14px 0;
        }

        .quick-contact-bar .qc-item {
            display: flex;
            align-items: center;
            gap: 10px;
            color: var(--light);
            font-size: 0.92rem;
            font-weight: 500;
        }

        .quick-contact-bar .qc-item i {
            font-size: 1rem;
            opacity: 0.85;
        }

        .quick-contact-bar a {
            color: var(--light);
            text-decoration: none;
            transition: var(--transition-base);
        }

        .quick-contact-bar a:hover { opacity: 0.75; }

        /* ---- Contact Info Cards ---- */
        .contact-page-section {
            background: var(--light);
            padding: var(--space-3xl) 0;
            position: relative;
        }

        .contact-page-section::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background-image: radial-gradient(#e0e6ef 1.5px, transparent 1.5px);
            background-size: 22px 22px;
            opacity: 0.55;
            pointer-events: none;
        }

        .info-card {
            background: white;
            border-radius: var(--radius-lg);
            padding: var(--space-xl) var(--space-lg);
            box-shadow: var(--shadow-lg);
            border: 2px solid var(--gray-200);
            text-align: center;
            height: 100%;
            transition: var(--transition-slow);
            position: relative;
            overflow: hidden;
        }

        .info-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 0; right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.4s ease;
        }

        .info-card:hover {
            transform: translateY(-8px);
            border-color: var(--accent);
            box-shadow: 0 25px 50px rgba(255,106,0,0.12);
        }

        .info-card:hover::after { transform: scaleX(1); }

        .info-card-icon {
            width: 72px;
            height: 72px;
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto var(--space-md);
            box-shadow: 0 8px 24px rgba(255,106,0,0.28);
            transition: var(--transition-bounce);
        }

        .info-card:hover .info-card-icon {
            transform: scale(1.1) rotate(10deg);
        }

        .info-card-icon i {
            font-size: 1.6rem;
            color: var(--light);
        }

        .info-card h4 {
            font-size: 1.1rem;
            color: var(--primary);
            margin-bottom: 10px;
            font-weight: 700;
        }

        .info-card p, .info-card a {
            color: var(--gray-600);
            font-size: 0.95rem;
            margin-bottom: 4px;
            text-decoration: none;
            display: block;
            transition: var(--transition-base);
            line-height: 1.7;
        }

        .info-card a:hover { color: var(--accent); }

        .info-card .badge-tag {
            display: inline-block;
            background: rgba(255,106,0,0.1);
            color: var(--accent);
            font-size: 0.78rem;
            font-weight: 600;
            padding: 4px 12px;
            border-radius: var(--radius-full);
            margin-top: 10px;
            letter-spacing: 0.5px;
        }

        /* ---- Contact Form & Map ---- */
        .contact-form-section {
            background: linear-gradient(135deg, #242d38 0%, #111b24 100%);
            position: relative;
            padding: var(--space-3xl) 0;
            color: var(--light);
        }

        .contact-form-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' opacity='0.06'%3E%3Cpath d='M10 10 L90 10 L90 90 L10 90 Z' fill='none' stroke='%23FF6A00' stroke-width='1'/%3E%3Ccircle cx='50' cy='50' r='40' fill='none' stroke='%23FFFFFF' stroke-width='1'/%3E%3C/svg%3E");
            background-size: 30px 30px;
        }

        .contact-form-section .section-title,
        .contact-form-section .section-subtitle {
            color: var(--light);
        }

        .contact-form-section .section-description {
            color: rgba(255,255,255,0.75);
        }

        /* Enhanced form card */
        .form-card {
            background: white;
            border-radius: var(--radius-xl);
            padding: var(--space-2xl);
            box-shadow: 0 30px 60px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
        }

        .form-card h3 {
            color: var(--primary);
            font-size: 1.7rem;
            margin-bottom: 6px;
        }

        .form-card .form-subtitle {
            color: var(--gray-500);
            font-size: 0.95rem;
            margin-bottom: var(--space-xl);
        }

        .form-label {
            font-weight: 600;
            font-size: 0.88rem;
            color: var(--gray-700);
            margin-bottom: 6px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-control, .form-select {
            width: 100%;
            padding: 13px 18px;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-md);
            font-family: var(--font-primary);
            font-size: 0.97rem;
            transition: var(--transition-base);
            background: var(--gray-100);
            color: var(--gray-800);
        }

        .form-control:focus, .form-select:focus {
            outline: none;
            border-color: var(--accent);
            background: white;
            box-shadow: 0 0 0 4px rgba(255,106,0,0.1);
        }

        .form-control.is-valid { border-color: var(--success); }
        .form-control.is-invalid { border-color: var(--error); }

        textarea.form-control {
            min-height: 140px;
            resize: vertical;
        }

        .input-icon-wrap {
            position: relative;
        }

        .input-icon-wrap .form-control {
            padding-left: 46px;
        }

        .input-icon-wrap .field-icon {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--gray-500);
            font-size: 0.95rem;
            pointer-events: none;
            transition: var(--transition-base);
        }

        .input-icon-wrap .form-control:focus + .field-icon,
        .input-icon-wrap:has(.form-control:focus) .field-icon {
            color: var(--accent);
        }

        .submit-btn-main {
            background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
            color: var(--light);
            border: none;
            padding: 15px 40px;
            border-radius: var(--radius-full);
            font-weight: 700;
            font-size: 1rem;
            cursor: pointer;
            transition: var(--transition-bounce);
            width: 100%;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            letter-spacing: 0.5px;
        }

        .submit-btn-main::before {
            content: '';
            position: absolute;
            top: 0; left: -100%;
            width: 100%; height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
            transition: left 0.5s ease;
        }

        .submit-btn-main:hover {
            transform: translateY(-3px);
            box-shadow: 0 20px 30px rgba(255,106,0,0.4);
        }

        .submit-btn-main:hover::before { left: 100%; }

        .submit-btn-main:active { transform: translateY(-1px); }

        /* Sidebar info panel */
        .sidebar-panel {
            background: rgba(255,255,255,0.07);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: var(--radius-xl);
            padding: var(--space-xl);
            position: relative;
            z-index: 2;
            height: fit-content;
        }

        .sidebar-panel h4 {
            color: var(--light);
            font-size: 1.3rem;
            margin-bottom: var(--space-lg);
            padding-bottom: var(--space-sm);
            border-bottom: 2px solid var(--accent);
        }

        .sidebar-info-item {
            display: flex;
            gap: var(--space-md);
            margin-bottom: var(--space-lg);
            align-items: flex-start;
        }

        .sidebar-info-item:last-child { margin-bottom: 0; }

        .si-icon {
            width: 46px;
            height: 46px;
            background: rgba(255,106,0,0.2);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent);
            font-size: 1.1rem;
            flex-shrink: 0;
            transition: var(--transition-base);
        }

        .sidebar-info-item:hover .si-icon {
            background: var(--accent);
            color: var(--light);
        }

        .si-text strong {
            display: block;
            color: var(--light);
            font-size: 0.9rem;
            font-weight: 700;
            margin-bottom: 3px;
        }

        .si-text span, .si-text a {
            color: rgba(255,255,255,0.72);
            font-size: 0.9rem;
            text-decoration: none;
            display: block;
            transition: var(--transition-base);
        }

        .si-text a:hover { color: var(--accent); }

        .social-row {
            display: flex;
            gap: 10px;
            margin-top: var(--space-lg);
            padding-top: var(--space-lg);
            border-top: 1px solid rgba(255,255,255,0.1);
            flex-wrap: wrap;
        }

        .social-btn {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 9px 16px;
            border-radius: var(--radius-full);
            font-size: 0.85rem;
            font-weight: 600;
            color: var(--light);
            text-decoration: none;
            transition: var(--transition-bounce);
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.08);
        }

        .social-btn:hover {
            transform: translateY(-3px);
            color: var(--light);
        }

        .social-btn.facebook:hover { background: #1877f2; border-color: #1877f2; }
        .social-btn.twitter:hover  { background: #1da1f2; border-color: #1da1f2; }
        .social-btn.instagram:hover{ background: linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); border-color: transparent; }
        .social-btn.whatsapp:hover  { background: #25d366; border-color: #25d366; }

        /* Hours table */
        .hours-table {
            width: 100%;
            margin-top: var(--space-md);
        }

        .hours-table tr td {
            padding: 7px 0;
            font-size: 0.88rem;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            color: rgba(255,255,255,0.75);
        }

        .hours-table tr td:first-child { color: var(--light); font-weight: 600; }
        .hours-table tr:last-child td { border-bottom: none; }
        .hours-table .open { color: var(--success) !important; font-weight: 700; }
        .hours-table .closed { color: rgba(255,255,255,0.35) !important; }

        /* ---- Map Section ---- */
        .map-section {
            background: var(--primary-light);
            padding: 0;
            position: relative;
        }

        .map-header {
            background: var(--primary);
            padding: var(--space-xl) 0 var(--space-lg);
            text-align: center;
        }

        .map-header .section-title,
        .map-header .section-subtitle { color: var(--light); }

        .map-frame-wrap {
            position: relative;
        }

        .map-frame-wrap iframe {
            display: block;
            width: 100%;
            height: 480px;
            filter: brightness(0.9) contrast(1.05);
            border: none;
        }

        .map-pin-card {
            position: absolute;
            top: 30px; left: 50px;
            background: white;
            border-radius: var(--radius-lg);
            padding: var(--space-md) var(--space-lg);
            box-shadow: var(--shadow-xl);
            max-width: 280px;
            z-index: 5;
            border-left: 4px solid var(--accent);
        }

        .map-pin-card h5 {
            color: var(--primary);
            font-size: 1rem;
            margin-bottom: 5px;
        }

        .map-pin-card p {
            color: var(--gray-600);
            font-size: 0.85rem;
            margin: 0;
            line-height: 1.6;
        }

        .map-pin-card .pin-icon {
            width: 36px; height: 36px;
            background: var(--accent);
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            color: white;
            margin-bottom: 10px;
        }

        @media (max-width: 768px) {
            .map-pin-card { 
                position: relative; 
                top: auto; left: auto; 
                max-width: 100%; 
                margin: 0;
                border-radius: 0;
                border-left: none;
                border-top: 4px solid var(--accent);
            }
            .map-frame-wrap iframe { height: 320px; }
            .form-card { padding: var(--space-lg); }
            .sidebar-panel { margin-top: var(--space-lg); }
        }

        /* ---- FAQ Section ---- */
        .faq-section {
            background: var(--light);
            padding: var(--space-3xl) 0;
            position: relative;
        }

        .faq-section::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: radial-gradient(#d9d9d9 2px, transparent 2px);
            background-size: 20px 20px;
            opacity: 0.4;
            pointer-events: none;
        }

        .faq-accordion .accordion-item {
            background: white;
            border: 2px solid var(--gray-200);
            border-radius: var(--radius-md) !important;
            margin-bottom: 14px;
            overflow: hidden;
            transition: var(--transition-base);
        }

        .faq-accordion .accordion-item:hover {
            border-color: var(--accent);
            box-shadow: 0 8px 24px rgba(255,106,0,0.08);
        }

        .faq-accordion .accordion-button {
            font-weight: 600;
            font-size: 1rem;
            color: var(--primary);
            background: white;
            padding: 20px 24px;
            border-radius: var(--radius-md) !important;
        }

        .faq-accordion .accordion-button:not(.collapsed) {
            color: var(--accent);
            background: rgba(255,106,0,0.04);
            box-shadow: none;
        }

        .faq-accordion .accordion-button::after {
            filter: hue-rotate(20deg) saturate(3);
        }

        .faq-accordion .accordion-button:focus {
            box-shadow: none;
            border-color: transparent;
        }

        .faq-accordion .accordion-body {
            color: var(--gray-600);
            line-height: 1.8;
            padding: 0 24px 20px;
            font-size: 0.97rem;
        }

        /* ---- Success/Error alerts ---- */
        .form-alert {
            padding: 14px 20px;
            border-radius: var(--radius-md);
            font-size: 0.95rem;
            font-weight: 500;
            display: none;
            margin-top: var(--space-md);
            align-items: center;
            gap: 10px;
        }

        .form-alert.success {
            background: rgba(16,185,129,0.1);
            color: var(--success);
            border: 1px solid rgba(16,185,129,0.3);
        }

        .form-alert.error {
            background: rgba(239,68,68,0.1);
            color: var(--error);
            border: 1px solid rgba(239,68,68,0.3);
        }

        /* ---- Programs quick links ---- */
        .programs-cta {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            padding: var(--space-xl) 0;
        }

        .programs-cta .cta-text {
            color: var(--light);
            font-size: 1.3rem;
            font-weight: 700;
        }

        .programs-cta .cta-sub {
            color: rgba(255,255,255,0.75);
            font-size: 0.95rem;
        }

        .cta-btn-group {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .cta-btn-group a {
            padding: 11px 26px;
            border-radius: var(--radius-full);
            font-weight: 600;
            font-size: 0.95rem;
            text-decoration: none;
            transition: var(--transition-bounce);
        }

        .cta-btn-group .btn-accent {
            background: var(--accent);
            color: var(--light);
        }

        .cta-btn-group .btn-accent:hover {
            background: var(--accent-light);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(255,106,0,0.35);
            color: var(--light);
        }

        .cta-btn-group .btn-outline {
            border: 2px solid rgba(255,255,255,0.5);
            color: var(--light);
        }

        .cta-btn-group .btn-outline:hover {
            border-color: var(--light);
            background: rgba(255,255,255,0.1);
            transform: translateY(-3px);
        }

        @media (max-width: 768px) {
            .cta-btn-group { justify-content: flex-start; }
            .page-hero { padding: 130px 0 60px; }
        }

        /* ---- Enroll program chips ---- */
        .program-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background: rgba(255,106,0,0.08);
            border: 1.5px solid rgba(255,106,0,0.25);
            border-radius: var(--radius-full);
            color: var(--accent);
            font-size: 0.85rem;
            font-weight: 600;
            transition: var(--transition-base);
            margin: 4px 3px;
            cursor: pointer;
        }

        .program-chip:hover, .program-chip.active {
            background: var(--accent);
            color: var(--light);
            border-color: var(--accent);
        }

        .char-count {
            font-size: 0.8rem;
            color: var(--gray-500);
            text-align: right;
            margin-top: 4px;
        }