/* ==========================
   RESPONSIVE MEDIA QUERIES
   ========================== */

/* Large Tablets & Small Desktops (769px to 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.15rem; }

    header { padding: 4px 60px !important; }
    header.sticky { padding: 5px 50px !important; }

    .text-box h1 { font-size: 55px !important; }
    .text-box p { font-size: 32px !important; }

    .comm-col, .act-col { flex-basis: 48% !important; }
    .cards-container, .team-cards { grid-template-columns: repeat(2, 1fr) !important; }
    .about { min-height: 70vh; padding: 60px 10px; display: flex; justify-content: center; align-items: center; }
    .about #about-cont { width: 98%; text-align: center; }
}

/* Tablet & Medium Devices (768px and below) */
@media screen and (max-width: 768px) {
    header { padding: 4px 20px !important; height: 70px !important; }
    header.sticky { padding: 5px 20px !important; }

    header .ieee-logo { width: 120px !important; }
    header .mnu-logo { width: 60px !important; }

    header ul { position: fixed; flex-direction: column; right: -100%; top: 70px; width: 100%; height: 100vh; background: rgba(7,27,58,0.95); padding: 60px 20px 20px 20px; transition: 0.3s; }
    header ul.active { right: 0; }

    header ul li { padding: 15px 0; width: 100%; list-style: none; }

    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }

    .cards-container, .team-cards { grid-template-columns: 1fr !important; padding: 20px !important; }
    .comm-col, .act-col, .about-col, .contact-col, .footer-col { flex-basis: 100% !important; margin-bottom: 30px; }

    /* Home Page */
    .home_page, .home { background-size: cover; background-position: center; height: 100vh; position: relative; display: flex; justify-content: center; }
    .text-box { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; width: 90%; }

    .text-box h1 { font-size: 40px !important; }
    .text-box p { font-size: 24px !important; }
    .text-box p span { font-size: 28px !important; }
    .hero-btn { font-size: 14px !important; padding: 10px 25px !important; }

    /* Footer */
    .footer { height: auto; padding: 30px 15px; }
    .footer .container { flex-direction: column; gap: 30px; padding: 20px; }
    .social, .center { width: 100%; text-align: center; }
    .location { display: none; }
    .location iframe { width: 100%; height: 250px !important; }

    /* FAQ / About / Board adjustments */
    .vision .container { flex-direction: column; text-align: center; gap: 30px; }
    .board-section .founder, .board-section .officers, .board-section .board { grid-template-columns: repeat(2, minmax(180px, 1fr)) !important; gap: 20px; justify-content: center; }
}

/* Mobile Devices (480px and below) */
@media screen and (max-width: 480px) {
    header { padding: 4px 15px !important; height: 60px !important; }
    header .ieee-logo { width: 100px !important; }
    header .mnu-logo { width: 50px !important; }

    header ul { top: 60px; padding: 50px 20px 20px 20px; flex-direction: column !important; }
    header ul li a { font-size: 14px !important; }

    h1 { font-size: 1rem; }
    h2 { font-size: 0.9rem; }
    h3 { font-size: 0.7rem; }
    h4 { font-size: 0.5rem; }

    .text-box { width: 95% !important; top: 55% !important; }
    .text-box h1 { font-size: 28px !important; }
    .text-box p { font-size: 18px !important; }
    .text-box p span { font-size: 22px !important; }
    .hero-btn { font-size: 12px !important; padding: 8px 20px !important; }

    .cards-container, .team-cards { grid-template-columns: 1fr !important; }
    .comm-img, .act-img { height: 200px !important; object-fit: cover; }

    .footer { padding: 20px 10px; }
    .footer .container { flex-direction: column; gap: 20px; padding: 15px; border: 2px solid var(--second-color); }
}

/* Extra Small Devices (320px and below) */
@media screen and (max-width: 320px) {
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1rem; }
    h4 { font-size: 0.95rem; }

    .text-box h1 { font-size: 22px !important; }
    .text-box p { font-size: 16px !important; }
    .text-box p span { font-size: 18px !important; }

    header .ieee-logo { width: 80px !important; }
    header ul li a { font-size: 12px !important; }
}

/* Landscape Mode for Mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .home_page, .home { height: auto !important; min-height: 100vh; }
    .text-box { position: relative !important; transform: none !important; top: auto !important; left: auto !important; padding: 150px 20px 50px !important; }
    header ul { flex-direction: row !important; position: relative !important; background: transparent !important; right: auto; top: auto; width: auto; }
    header .fa-bars { display: none !important; }
}