/* Responsive Styles */
@media (max-width: 992px) {
    .payment-grid {
        grid-template-columns: 1fr;
    }
    
    .order-summary {
        order: 2;
    }
    
    .payment-methods {
        order: 1;
    }
}

@media (max-width: 768px) {
    .main-nav {
        display: none;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .top-bar .container {
        flex-direction: column;
        gap: 10px;
    }
    
    .contact-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    
    .contact-info span {
        margin-right: 0;
    }
    
    .hero {
        padding: 80px 0;
    }
    
    .features-grid, .programs-grid {
        grid-template-columns: 1fr;
    }
}
/* Responsive Styles */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-info {
        padding-right: 0;
        margin-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .mission-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .stat-item {
        width: 80%;
        margin-bottom: 20px;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
    }
    @media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .team-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .milestones {
        flex-direction: column;
        align-items: center;
    }
    
    .milestone {
        width: 200px;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
}
/* Responsive adjustments */
@media (max-width: 992px) {
    .registration-grid {
        grid-template-columns: 1fr;
    }
    
    .registration-form {
        position: static;
    }
    
    .schedule-options {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .program-highlights {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .highlight-item {
        width: 100%;
        justify-content: center;
    }
    
    .summer-header h1 {
        font-size: 2rem;
    }
}
/* Responsive Adjustments */
@media (max-width: 768px) {
    .registration-form {
        padding: 20px 10px;
    }
    
    .form-section {
        padding: 20px 15px;
    }
    
    .form-header h1 {
        font-size: 1.8rem;
    }
}
@media (max-width: 768px) {
    .legal-document {
        padding: 30px 20px;
    }
    
    .document-title {
        font-size: 1.5rem;
    }
}
@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .cultural-cta {
        padding: 30px 20px;
    }
}

@media (max-width: 992px) {
    .class-grid, .assignment-grid {
        grid-template-columns: 1fr;
    }
    
    .class-sidebar, .assignment-sidebar {
        order: -1;
    }
}

@media (max-width: 768px) {
    .class-card {
        flex-direction: column;
    }
    
    .class-date {
        flex-direction: row;
        justify-content: center;
        gap: 20px;
        border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
    
    .class-day, .class-date-num, .class-month {
        display: inline-block;
    }
    
    .class-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    
    .accordion-meta {
        display: none;
    }
}

@media (max-width: 576px) {
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-actions {
        width: 100%;
    }
    
    .header-actions .btn {
        width: 100%;
        justify-content: center;
    }
    
    .material-item {
        flex-direction: column;
        text-align: center;
    }
    
    .material-actions {
        width: 100%;
        justify-content: center;
    }
}
@media (max-width: 600px) {
    .payment-wrapper {
        padding: 20px;
    }

    .page-title {
        font-size: 22px;
    }

    .payment-action .btn {
        width: 100%;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .summary-content p {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
    
    .summary-content strong {
        display: block;
        margin-bottom: 0.2rem;
    }
    
    .payment-summary .page-title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }
    
    .btn-paystack {
        width: 100%;
        justify-content: center;
    }
}
/* Responsive Design */
    @media (max-width: 1200px) {
        .stats-container {
            grid-column: span 12;
        }
        
        .quick-actions-container {
            grid-column: span 12;
        }
        
        .payments-container,
        .notifications-container {
            grid-column: span 12;
        }
    }

    @media (max-width: 992px) {
        .sidebar {
            width: 240px;
        }
        
        .main-content {
            margin-left: 240px;
            padding: 20px;
        }
    }

    @media (max-width: 768px) {
        .sidebar {
            transform: translateX(-100%);
            width: 280px;
        }
        
        .sidebar.active {
            transform: translateX(0);
        }
        
        .main-content {
            margin-left: 0;
            padding: 20px;
        }
        
        .menu-toggle {
            display: block;
            font-size: 24px;
            cursor: pointer;
            margin-right: 15px;
            color: var(--dark);
        }
    }

    @media (max-width: 576px) {
        .stats-grid {
            grid-template-columns: 1fr;
        }
        
        .actions-grid {
            grid-template-columns: 1fr;
        }
        
        .page-header h1 {
            font-size: 24px;
        }
    }
    /* Responsive adjustments */
@media (max-width: 767.98px) {
    .sidebar {
        position: static;
        height: auto;
        padding-top: 0;
    }
    
    main {
        padding-top: 1rem;
    }
}
/* Responsive Breakpoints */
@media (max-width: 768px) {
    .faq-header h1 {
        font-size: 1.5rem;
    }
    
    .faq-question h3 {
        font-size: 1rem;
    }
    
    .faq-question {
        padding: 12px 15px;
    }
    
    .search-faq input {
        padding: 10px 12px;
    }
    
    .category-btn {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .faq-header h1 {
        font-size: 1.3rem;
    }
    
    .faq-header p {
        font-size: 0.9rem;
    }
    
    .faq-categories {
        justify-content: center;
    }
    
    .faq-contact {
        font-size: 1rem;
    }
}