/* Large Desktop Screens */
@media (max-width: 1200px) {
    .navbar {
        padding: 16px 5%;
    }

    .nav-links {
        gap: 18px;
    }

    .hero-content h1 {
        font-size: 3.4rem;
    }

    footer .complete-footer {
        padding: 45px 25px 35px;
    }

    .footer-alignment {
        gap: 30px;
    }
}

/* Tablet Screen Layout */
@media (max-width: 992px) {
    .navbar {
        padding: 14px 5%;
    }

    /* Hamburger Menu Button */
    .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: 1px solid var(--shadow-color);
        background: var(--card-bg);
        color: var(--heading-color);
        font-size: 20px;
        cursor: pointer;
        z-index: 1002;
        transition: all 0.25s ease;
    }

    .menu-btn:hover {
        background: rgba(255, 255, 255, 0.08);
        transform: scale(1.04);
    }

    /* Mobile Navigation Drawer */
    .nav-links {
        position: fixed;
        top: 0;
        right: 0;
        width: min(330px, 86vw);
        height: 100vh;
        height: 100dvh;
        background: var(--bg-color);
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        gap: 6px;
        padding: 85px 22px 35px;
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.45);
        z-index: 1000;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        list-style: none;
    }

    .lightmode .nav-links {
        border-left: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: -10px 0 35px rgba(0, 0, 0, 0.15);
    }

    .nav-links.active {
        transform: translateX(0);
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links li a {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 13px 18px;
        font-size: 1rem;
        font-weight: 500;
        color: var(--paragraph-color);
        border-radius: 12px;
        border: 1px solid transparent;
        background: transparent;
        text-decoration: none;
        transition: all 0.25s ease;
    }

    .nav-links li a:hover,
    .nav-links li a.active-link {
        color: var(--heading-color);
        background: var(--card-bg);
        border-color: var(--shadow-color);
        transform: translateX(4px);
    }

    .nav-links li a::after {
        display: none;
    }

    .nav-links li:last-child {
        margin-top: auto;
        padding-top: 18px;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        display: flex;
        justify-content: center;
    }

    .lightmode .nav-links li:last-child {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* Hero Content Layout */
    .hero-content {
        padding: 110px 5% 50px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-content p {
        font-size: 1.05rem;
        max-width: 650px;
    }

    /* Footer Tablet Layout */
    footer .complete-footer {
        padding: 40px 24px 30px;
    }

    .footer-alignment {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    footer .student-chapter {
        grid-column: 1 / -1;
        align-items: center;
        text-align: center;
    }

    footer .student-chapter img {
        max-width: 220px;
        margin: 0 auto;
    }

    .college-handles {
        align-items: flex-start;
    }
}

/* Mobile Phone Screens */
@media (max-width: 768px) {
    .navbar {
        padding: 12px 5%;
    }

    .logo {
        font-size: 1.3rem;
        gap: 10px;
    }

    .logo #logo:not(.animate) {
        height: 36px;
        width: 36px;
    }

    .logo #logo.animate,
    #logo.animate {
        position: fixed;
        top: 50%;
        left: 50%;
        width: min(78vw, 270px);
        height: min(94vw, 380px);
        aspect-ratio: 27 / 38;
        margin: 0;
        padding: 28px 18px;
        border-radius: 50%;
        clip-path: ellipse(50% 50% at 50% 50%);
        background: #ffffff;
        object-fit: contain;
        z-index: 100001;
        border: 4px solid var(--primary-color);
        box-shadow: 0 0 45px rgba(0, 191, 255, 0.6), 0 20px 55px rgba(0, 0, 0, 0.85);
        transform: translate(-50%, -50%) rotate(360deg);
        cursor: pointer;
    }

    .hero-content {
        padding: 95px 5% 40px;
    }

    .hero-content h1 {
        font-size: 2.3rem;
        line-height: 1.25;
    }

    .hero-content p {
        font-size: 0.95rem;
        margin: 18px auto;
    }

    .btn {
        padding: 12px 26px;
        font-size: 0.9rem;
        margin: 5px;
    }

    .main h1 {
        font-size: 1.8rem;
    }

    /* Footer Mobile Layout */
    .footer-alignment {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: left;
    }

    footer .student-chapter {
        align-items: flex-start;
        text-align: left;
    }

    footer .student-chapter img {
        max-width: 190px;
        margin: 0;
    }

    .all-links {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        text-align: left;
    }

    footer h3 {
        text-align: center;
    }

    footer ul,
    footer ul.access-links {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items:flex-start;
        gap: 9px;
        width: 100%;
        
    }

    footer ul li {
        display: block;
        width: 100%;
        list-style: none;
        list-style-type: none;
    }

    .college-handles {
        align-items: flex-start;
        text-align: center;
        width: 100%;
    }

    .college-handles h3 {
        text-align: left;
    }

    footer .social-icons {
        justify-content: flex-start;
    }

    footer .location {
        text-align: left;
        max-width: 100%;
        margin: 0;
    }

    footer .location a {
        display: inline-block;
    }
}

/* Small Mobile Phones */
@media (max-width: 480px) {
    .navbar {
        padding: 10px 4%;
    }

    .logo {
        font-size: 1.15rem;
        gap: 8px;
    }

    .logo #logo:not(.animate) {
        height: 32px;
        width: 32px;
    }

    .logo #logo.animate,
    #logo.animate {
        position: fixed;
        top: 50%;
        left: 50%;
        width: min(80vw, 240px);
        height: min(95vw, 340px);
        aspect-ratio: 24 / 34;
        margin: 0;
        padding: 24px 16px;
        border-radius: 50%;
        clip-path: ellipse(50% 50% at 50% 50%);
        background: #ffffff;
        object-fit: contain;
        z-index: 100001;
        border: 3.5px solid var(--primary-color);
        box-shadow: 0 0 35px rgba(0, 191, 255, 0.6), 0 16px 45px rgba(0, 0, 0, 0.85);
        transform: translate(-50%, -50%) rotate(360deg);
        cursor: pointer;
    }

    .hero-content {
        padding: 85px 4% 35px;
    }

    .hero-content h1 {
        font-size: 1.85rem;
        line-height: 1.25;
    }

    .hero-content p {
        font-size: 0.88rem;
        margin: 14px auto;
    }

    .hero-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 8px;
    }

    .btn {
        width: 100%;
        max-width: 260px;
        padding: 11px 22px;
        font-size: 0.88rem;
        margin: 0;
        text-align: center;
    }

    .main h1 {
        font-size: 1.45rem;
    }

    .main p {
        font-size: 0.88rem;
        padding: 0 10px;
    }

    footer .complete-footer {
        padding: 35px 16px 25px;
    }

    .all-links {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
        text-align: left;
    }
    footer ul,
    footer ul.access-links {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items:flex-start;
        gap: 9px;
        width: 100%;
        
    }

    footer ul li {
        display: block;
        width: 100%;
        list-style: none;
        list-style-type: none;
    }    

    footer h3 {
        text-align: center;
        font-size: 1.05rem;
    }

    footer li {
        padding: 5px 0;
    }

    footer a {
        font-size: 0.88rem;
    }

    footer .social-btn {
        height: 42px;
        width: 42px;
        font-size: 17px;
    }

    footer .last-line {
        padding: 14px 12px;
        font-size: 0.8rem;
    }
}