/* ============================================
   NHIIT INSTITUTE — RESPONSIVE CSS
   Breakpoints:
   - Tablet:  max-width: 1024px
   - Mobile:  max-width: 768px
   - Small:   max-width: 480px
============================================ */


/* ===== TABLET (max 1024px) ===== */
@media (max-width: 1024px) {

    /* Header */
    .container_nav ul { gap: 20px; }

    /* Hero */
    .carousel_content .text_container .headeing h1 { font-size: 2rem; line-height: 48px; }

    /* Why Choose */
    .chooseus_layout { gap: 24px; }
    .chooseus_left { max-width: 38%; }
    .chooseus_right { grid-template-columns: repeat(3, 1fr); }

    /* Courses */
    .course_card { gap: 20px; }

    /* Career */
    .career_grid { grid-template-columns: repeat(2, 1fr); }

    /* Features */
    .features_grid { grid-template-columns: repeat(2, 1fr); }

    /* Placement */
    .placement_grid { grid-template-columns: repeat(2, 1fr); }

    /* Affiliation */
    .affiliation_left h2 { font-size: 1.8rem; }

    /* Footer */
    .footer_grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .footer_col { padding-bottom: 4px; }
    .footer_logo_wrap img { max-width: 100px; }
    .footer_bottom_inner { flex-direction: row; }
    .footer_contact_item { padding: 8px 10px; }
    .footer_getin_btn { font-size: .85rem; }
}


/* ===== MOBILE (max 768px) ===== */
@media (max-width: 768px) {

    /* ---- HEADER ---- */
    header {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: 999;
    }

    /* Top bar — single row, compact */
    .header_top .container-xxl {
        flex-wrap: nowrap;
        padding: 5px 12px;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    .container_contact { flex-shrink: 0; }
    /* Hide email on mobile, show only phone */
    .container_contact a:last-child { display: none; }
    .container_contact a:first-child { font-size: .7rem; padding: 2px 5px; }
    .container_scroll { display: none; }
    .container_upcoming { flex-shrink: 0; gap: 4px; }
    .container_upcoming a { font-size: .68rem; padding: 3px 8px; margin: 0; }

    /* Bottom bar */
    .header_bottom .container-xxl {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 16px;
        flex-wrap: nowrap;
        position: relative;
    }

    /* Logo */
    .container_logo img { max-width: 100px; }

    /* Hide desktop login button */
    .desktop_login { display: none; }

    /* Hamburger button */
    .hamburger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 28px;
        height: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        flex-shrink: 0;
        z-index: 1001;
    }
    .hamburger span {
        display: block;
        width: 100%;
        height: 2.5px;
        background: var(--primary_color);
        border-radius: 2px;
        transition: all .3s ease;
    }
    /* Hamburger → X animation */
    .hamburger.open span:nth-child(1) { transform: translateY(8.75px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-8.75px) rotate(-45deg); }

    /* Mobile nav — hidden by default */
    .container_nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12);
        z-index: 1000;
        border-top: 2px solid var(--primary_color);
    }
    .container_nav.open { display: block; }

    .container_nav ul {
        flex-direction: column;
        gap: 0;
        padding: 8px 0;
    }
    .container_nav ul li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    .container_nav ul li:last-child { border-bottom: none; }
    .container_nav ul li a {
        display: block;
        padding: 13px 20px;
        font-size: .92rem;
        color: #222;
        text-transform: capitalize;
        font-weight: 600;
        transition: background .15s, color .15s;
    }
    .container_nav ul li a:hover {
        background: #f0f4ff;
        color: var(--primary_color);
    }

    /* Login button inside mobile nav */
    .container_nav ul::after {
        content: '';
        display: block;
    }
    .mobile_login_wrap {
        padding: 12px 20px 14px;
    }
    .mobile_login_wrap button {
        width: 100%;
        background: var(--primary_color);
        border: none;
        outline: none;
        padding: 11px;
        border-radius: 8px;
        font-weight: 700;
        color: #fff;
        font-size: .9rem;
        cursor: pointer;
    }

    /* Main padding for fixed header */
    main { padding-top: 80px; }

    /* ---- HERO ---- */
    .carosole_container { height: auto; padding: 30px 0; }
    .carousel-item { height: auto !important; }
    .carousel_content { padding: 20px 16px; }
    .carousel_content .text_container {
        flex-direction: column;
        text-align: center;
    }
    .carousel_content .text_container .headeing h1 {
        font-size: 1.6rem;
        line-height: 38px;
    }
    .carousel_content .text_container p { font-size: .88rem; }
    .button_container .count {
        flex-direction: column;
        gap: 8px;
    }
    .button_container .btns {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    .overlay_image_container img {
        max-width: 140px;
    }
    .overlay_image_container img:first-child { left: 10px; top: 10px; }
    .overlay_image_container img:last-child  { right: 10px; bottom: 10px; }

    /* ---- FRECHER (Stats cards) ---- */
    .frecher { margin: 20px 0; padding: 16px; }
    .frecher h2 { font-size: 1.3rem; line-height: 1.4; }
    .cards_container {
        justify-content: center;
        gap: 16px;
    }
    .cards { width: 100%; max-width: 100%; height: auto; padding: 20px; }

    /* ---- WHY CHOOSE US ---- */
    .chooseus_layout { flex-direction: column; gap: 28px; }
    .chooseus_left  { max-width: 100%; }
    .chooseus_right { max-width: 100%; }
    .chooseus_right { grid-template-columns: repeat(2, 1fr); }
    .chooseus_left h1 { font-size: 2rem; line-height: 1.3; }

    /* ---- COURSES SECTION ---- */
    .courses_heading h2 { font-size: 1.6rem; }
    .courses_tabs { gap: 6px; }
    .tab_btn { padding: 5px 12px; font-size: .78rem; }
    .course_card {
        flex-direction: column;
        max-width: 100%;
        padding: 20px;
    }
    .course_img {
        width: 100%;
        max-height: 200px;
    }
    .course_lists { flex-direction: column; gap: 12px; }
    .course_meta { flex-direction: column; gap: 6px; }

    /* ---- FEATURES ---- */
    .features_grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .features_heading h2 { font-size: 1.6rem; }

    /* ---- CAREER SECTION ---- */
    .career_heading h2 { font-size: 1.8rem; }
    .career_grid { grid-template-columns: repeat(1, 1fr); }

    /* ---- MENTORSHIP ---- */
    .mentorship_outer { padding: 24px 18px; }
    .mentorship_heading h2 { font-size: 1.3rem; }
    .mentorship_tabs { gap: 6px; }
    .m_tab_btn { padding: 6px 12px; font-size: .78rem; }
    .m_card {
        flex-direction: column;
        max-width: 100%;
    }
    .m_card_img { width: 100%; }
    .m_card_title_row { flex-direction: column; align-items: flex-start; gap: 6px; }

    /* ---- AFFILIATION ---- */
    .affiliation_wrapper { flex-direction: column; }
    .affiliation_left { flex: none; width: 100%; padding: 28px 22px; }
    .affiliation_left h2 { font-size: 2rem; }
    .affiliation_right { width: 100%; }
    .affiliation_logos { gap: 10px; padding: 16px; }
    .aff_logo { width: 56px; height: 56px; }

    /* ---- JOURNEY / CONTACT ---- */
    .journey_wrapper { flex-direction: column; gap: 28px; }
    .journey_left h2 { font-size: 1.6rem; }
    .journey_right { flex: none; width: 100%; }

    /* ---- PLACEMENT MASTERY ---- */
    .placement_grid { grid-template-columns: repeat(2, 1fr); }
    .placement_heading h2 { font-size: 1.6rem; }

    /* ---- NSDC ---- */
    .nsdc_heading { font-size: 1.5rem; }
    .nsdc_benefits { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .nsdc_cert_img { max-width: 100%; }

    /* ---- TESTIMONIALS ---- */
    .testimonial_heading h2 { font-size: 1.5rem; }
    .testimonial_carousel_wrap { max-width: 100%; }
    .t_card { padding: 20px 18px; }
    .t_photo { width: 70px; height: 70px; }

    /* ---- HIRING ---- */
    .hiring_wrapper { flex-direction: column; gap: 20px; }
    .hiring_left { flex: none; width: 100%; padding: 28px 22px; }
    .hiring_left h2 { font-size: 1.8rem; }
    .hiring_right {
        width: 100%;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
    }

    /* ---- FAQ ---- */
    .faq_heading h2 { font-size: 1.5rem; }
    .faq_grid { grid-template-columns: 1fr; }
    .faq_banner {
        flex-direction: column;
        text-align: center;
        gap: 14px;
    }
    .faq_banner_left { flex-direction: column; gap: 8px; }

    /* ---- FOOTER ---- */
    .footer_main { padding: 32px 0 24px; }
    .footer_grid {
        grid-template-columns: 1fr 1fr;
        gap: 28px;
    }
    .footer_logo_wrap img { max-width: 90px; }
    .footer_bottom_inner {
        flex-direction: column;
        gap: 6px;
        text-align: center;
    }

    /* ---- WHY CHOOSE CARDS (right grid) ---- */
    .chooseus_right { grid-template-columns: repeat(2, 1fr); }
}


/* ===== SMALL MOBILE (max 480px) ===== */
@media (max-width: 480px) {

    /* Header */
    .container_nav ul { gap: 8px; }
    .container_nav ul li a { font-size: .78rem; }

    /* Hero */
    .carousel_content .text_container .headeing h1 { font-size: 1.3rem; line-height: 32px; }
    .overlay_image_container img { display: none; }

    /* Frecher */
    .frecher h2 { font-size: 1.1rem; }
    .cards { min-width: 100%; }

    /* Why choose */
    .chooseus_right { grid-template-columns: 1fr 1fr; }
    .cu_card { padding: 16px 10px; }
    .cu_icon { width: 46px; height: 46px; font-size: 1.2rem; }

    /* Features */
    .features_grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .feature_card { padding: 18px 12px; }
    .feature_icon { font-size: 1.8rem; }

    /* Career */
    .career_heading h2 { font-size: 1.4rem; }
    .career_grid { grid-template-columns: 1fr; }

    /* Courses */
    .courses_heading h2 { font-size: 1.3rem; }

    /* Placement */
    .placement_grid { grid-template-columns: 1fr 1fr; }

    /* NSDC */
    .nsdc_benefits { grid-template-columns: 1fr; }

    /* Journey */
    .journey_left h2 { font-size: 1.3rem; }
    .journey_form_card { padding: 20px 16px; }

    /* Hiring */
    .hiring_right { grid-template-columns: repeat(2, 1fr); }
    .hiring_left h2 { font-size: 1.5rem; }

    /* Footer */
    .footer_grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .footer_col {
        padding: 20px 0;
        border-bottom: 1px solid #e8edf5;
    }
    .footer_col:last-child { border-bottom: none; }
    .footer_col h4 { font-size: 1rem; }
    .footer_logo_wrap img { max-width: 100px; }
    .footer_links { gap: 10px; }
    .footer_links a { font-size: .85rem; }
    .footer_socials a { width: 38px; height: 38px; font-size: 1.1rem; }
    .footer_office { margin-bottom: 14px; }
    .footer_contact_item { padding: 10px; }
    .footer_getin_btn { font-size: .9rem; padding: 12px; }
    .footer_branches_btn { font-size: .88rem; }
    .footer_address { font-size: .82rem; }
    .footer_bottom { padding: 16px 0; }
    .footer_bottom_inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        font-size: .8rem;
    }

    /* FAQ */
    .faq_heading h2 { font-size: 1.2rem; }
    .faq_q { font-size: .82rem; }

    /* Affiliation */
    .affiliation_left h2 { font-size: 1.6rem; }

    /* Testimonial */
    .t_card { padding: 16px 14px; }
    .t_review { font-size: .82rem; }

    /* Mentorship */
    .m_card_img { min-height: 160px; }
}


/* Hide text on mobile */
@media (max-width: 768px) {
    .hide_mobile { display: none; }
}