/* =====================================
   RESPONSIVE DESIGN - ACMUN 2026
   ===================================== */


/* Large Tablets and Small Laptops */
@media (max-width: 1200px) {

    .hero h1 {
        font-size: 60px;
    }

    .hero p {
        font-size: 20px;
    }

    .container {
        width: 90%;
    }

}


/* Tablets */
@media (max-width: 992px) {

    /* Navigation */
    .navbar {
        padding: 15px 20px;
    }

    .nav-links {
        gap: 15px;
    }


    /* Hero Section */
    .hero {
        text-align: center;
        padding: 120px 20px;
    }

    .hero h1 {
        font-size: 50px;
    }


    /* Cards */
    .cards,
    .timeline,
    .committee-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Buttons */
    .btn {
        padding: 12px 25px;
    }

}



/* Mobile Devices */
@media (max-width: 768px) {


    body {
        overflow-x: hidden;
    }


    /* Mobile Navigation */

    .navbar {
        flex-direction: column;
    }


    .nav-links {
        flex-direction: column;
        width:100%;
        text-align:center;
        display:none;
    }


    .nav-links.active {
        display:flex;
    }


    /* Hero */

    .hero {
        min-height: 80vh;
        padding:100px 15px;
    }


    .hero h1 {

        font-size:38px;
        line-height:1.2;

    }


    .hero h2 {

        font-size:22px;

    }


    .hero p {

        font-size:16px;

    }



    /* Sections */

    section {

        padding:50px 15px;

    }


    .section-title {

        font-size:30px;

    }



    /* Cards */

    .cards,
    .timeline,
    .committee-grid {

        grid-template-columns:1fr;

    }



    /* Images */

    img {

        max-width:100%;
        height:auto;

    }



    /* Buttons */

    .hero-buttons {

        flex-direction:column;
        gap:15px;

    }


    .btn {

        width:100%;
        text-align:center;

    }



    /* Footer */

    footer {

        text-align:center;

    }

}



/* Small Phones */

@media (max-width:480px) {


    .hero h1 {

        font-size:32px;

    }


    .hero h2 {

        font-size:18px;

    }


    .countdown {

        flex-wrap:wrap;

    }


    .countdown div {

        width:45%;
        margin-bottom:10px;

    }


    .logo img {

        width:120px;

    }


}

/* ===============================
   MOBILE HAMBURGER MENU
   =============================== */


.menu-toggle {

    display:none;
    cursor:pointer;
    width:35px;

}


.menu-toggle span {

    display:block;
    height:3px;
    width:30px;
    background:#fff;
    margin:6px 0;
    transition:0.4s;

}


/* Mobile View */

@media(max-width:768px){


    .navbar {

        display:flex;
        flex-direction:row;
        justify-content:space-between;
        align-items:center;

    }



    .menu-toggle {

        display:block;

    }



    .nav-links {

        position:absolute;
        top:80px;
        left:0;
        width:100%;
        background:#081C3A;

        display:none;
        flex-direction:column;
        text-align:center;

        padding:20px 0;

        z-index:999;

    }



    .nav-links li {

        margin:15px 0;

    }



    .nav-links a {

        color:white;
        font-size:18px;

    }



    .nav-links.active {

        display:flex;

    }



    /* Hamburger Animation */

    .menu-toggle.active span:nth-child(1){

        transform:rotate(45deg) translate(5px,5px);

    }


    .menu-toggle.active span:nth-child(2){

        opacity:0;

    }


    .menu-toggle.active span:nth-child(3){

        transform:rotate(-45deg) translate(7px,-7px);

    }


}
/* =================================
   STICKY TRANSPARENT NAVBAR
   ================================= */


.main-navbar {

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:9999;

    padding:20px 50px;

    display:flex;
    justify-content:space-between;
    align-items:center;


    background:transparent;

    transition:all 0.4s ease;

}


/* Navbar after scroll */

.main-navbar.scrolled {


    background:#081C3A;

    padding:12px 50px;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.25);

    border-bottom:
    2px solid #C9A227;


}



/* Logo animation */

.main-navbar img {

    width:140px;

    transition:0.4s;

}


.main-navbar.scrolled img {

    width:110px;

}



/* Menu text */


.main-navbar a {

    color:white;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}


.main-navbar a:hover {

    color:#C9A227;

}


@media(max-width:768px){


.countdown-wrapper{

text-align:center;

}


.countdown{

justify-content:center;

}


.time-box{

width:75px;

height:75px;

}


.time-box span{

font-size:28px;

}

}