/* ========== GLOBAL CONTAINER WIDTHS ========== */
main,
.courses-section,
.faculty-section,
.admissions-wrapper,
.contact-wrapper,
.register-container,
.login-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ========== COMMON GRID CARDS (COURSES, FACULTY, ETC.) ========== */
.grid-3,
.grid-4 {
    display: grid;
    gap: 20px;
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Example: agar tumne khud classes banayi hain:
   .course-grid, .faculty-grid, .info-cards ko bhi yahan add kar sakte ho */
.course-grid,
.faculty-grid,
.info-cards {
    display: grid;
    gap: 20px;
}

/* by default 3 column */
.course-grid,
.faculty-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ========== NAVBAR BASE ========== */
nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

/* ========== BREAKPOINT 1 – TABLET (<= 992px) ========== */
@media (max-width: 992px) {

    /* Center card container thoda chhota */
    .login-wrapper,
    .register-wrapper {
        margin: 20px;
    }

    /* Grids 2 column ho jayein */
    .grid-3,
    .course-grid,
    .faculty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-4,
    .info-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Login / Register left-right panels stack */
    .login-wrapper,
    .register-wrapper {
        flex-direction: column;
    }

    .login-info,
    .register-info,
    .login-form-container,
    .register-form-container {
        padding: 24px 22px;
    }
}

/* ========== BREAKPOINT 2 – MOBILE (<= 768px) ========== */
@media (max-width: 768px) {

    body {
        justify-content: flex-start;
    }

    nav {
        padding: 10px 16px;
    }

    /* Simple: nav links hide, sirf logo + button */
    .nav-links {
        display: none;
    }

    .page-header,
    .contact-wrapper,
    .admissions-wrapper,
    .courses-section,
    .faculty-section,
    .register-container,
    .login-container {
        padding: 20px 14px;
    }

    /* Sab grid 1 column */
    .grid-3,
    .grid-4,
    .course-grid,
    .faculty-grid,
    .info-cards {
        grid-template-columns: 1fr;
    }

    .login-wrapper,
    .register-wrapper {
        margin: 15px 10px 30px;
        border-radius: 16px;
    }

    .form-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

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

    .login-header h1,
    .register-header h1 {
        font-size: 20px;
    }

    .btn-login,
    .btn-register {
        font-size: 13px;
        padding: 10px;
    }

    footer {
        padding: 20px 10px;
    }

    .footer-links {
        gap: 14px;
    }
}

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

    .logo-title {
        font-size: 16px;
    }

    .logo-tagline {
        display: none;
    }

    .login-wrapper,
    .register-wrapper {
        margin: 10px 6px 24px;
    }

    .page-header p,
    .section-text {
        font-size: 12px;
    }
}

/* ========== UNIFORM IMAGE SIZING ========== */
/* Sabhi images ko ek hi size ka banane ke liye */
.campus-photos img,
.event-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}

/* Faculty images ke liye special styling (circular rakho) */
.faculty-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--secondary-color);
    display: block;
    margin-left: auto;
    margin-right: auto;
}