/* =========================================
   PADCOG RESPONSIVE CSS
========================================= */

/* =========================
   LARGE TABLETS
========================= */

@media (max-width:1200px){

    .navbar,
    .top-bar-container,
    .about-container,
    .vm-container,
    .core-container,
    .join-container,
    .news-container,
    .quick-container,
    .footer-container{
        width:95%;
    }

}

/* =========================
   TABLETS
========================= */

@media (max-width:1024px){

    /* TOP BAR */

    .top-bar-container{
        flex-direction:column;
        gap:12px;
        text-align:center;
    }

    .top-left,
    .top-right{
        justify-content:center;
        flex-wrap:wrap;
    }

    /* NAVBAR */

    .navbar{
        display:grid;
        grid-template-columns:1fr auto 1fr;
        align-items:center;
    }

    .logo{
        justify-self:start;
        flex:1;
    }

    .menu-toggle{
        display:block !important;
        margin-left:auto;
        order:2;
    }

    .nav-btn{
        display:flex;
        justify-content:center;
    }

    /* MOBILE MENU */

    .nav-menu{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#ffffff;
        padding:25px 0;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        display:none;
        z-index:9999;
    }

    .nav-menu.active{
        display:block;
    }

    .nav-links{
        flex-direction:column;
        align-items:flex-start;
        width:90%;
        margin:auto;
        gap:0;
    }

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

    .nav-links li a{
        display:flex;
        justify-content:space-between;
        width:100%;
        padding:16px 0;
        border-bottom:1px solid #eee;
    }

    .nav-links > li::after{
        display:none !important;
    }

    .dropdown-menu{
        position:static !important;
        opacity:1;
        visibility:visible;
        transform:none;
        display:none;
        width:100%;
        box-shadow:none;
        background:#f8f9fb;
        margin-top:5px;
        border-radius:8px;
    }

    .dropdown.active .dropdown-menu{
        display:block !important;
    }

    /* HERO */

    .hero-content{
        width:80%;
    }

    .hero-content h1{
        font-size:54px;
    }

    /* FLEX LAYOUTS */

    .about-container,
    .vm-container,
    .join-container,
    .about-main-container{
        flex-direction:column;
        gap:40px;
    }

    /* GRID LAYOUTS */

    .leadership-intro-container,
    .president-container,
    .public-health-container,
    .why-padcog-container,
    .objectives-container,
    .about-vm-container{
        grid-template-columns:1fr;
    }

    .core-values-container{
        grid-template-columns:repeat(2,1fr);
    }

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

    .news-container{
        grid-template-columns:repeat(2,1fr);
    }

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

    .footer-container{
        grid-template-columns:repeat(2,1fr);
    }

    .verification-wrapper{
        grid-template-columns:1fr;
    }

}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

    /* TOP BAR */

    .top-left{
        flex-direction:column;
        gap:8px;
    }

    /* HERO */

    .hero{
        height:auto;
    }

    .hero-slide{
        padding-top:140px;
        padding-bottom:120px;
    }

    .hero-content{
        width:90%;
        margin-left:auto;
        margin-right:auto;
        padding-top:0;
    }

    .hero-content h1{
        font-size:42px;
        line-height:1.3;
    }

    .hero-content p{
        font-size:17px;
    }

    .hero-buttons{
        flex-direction:column;
        align-items:flex-start;
    }

    .hero-dots{
        left:20px;
    }

    /* ABOUT PAGE */

    .about-main-container,
    .leadership-intro-container,
    .president-container,
    .objectives-container,
    .public-health-container,
    .why-padcog-container{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:40px !important;
    }

    .about-vm-container{
        grid-template-columns:1fr;
    }

    .about-main-image,
    .public-health-image,
    .leadership-intro-image,
    .president-image{
        order:-1;
    }

    .about-main-content h2,
    .objectives-content h2,
    .public-health-content h2,
    .why-padcog-content h2,
    .leadership-intro-content h2,
    .president-content h2{
        font-size:34px;
        line-height:1.3;
    }

    .about-main-content p,
    .objectives-content p,
    .public-health-content p,
    .why-padcog-content p,
    .leadership-intro-content p,
    .president-content p{
        font-size:16px;
        line-height:1.8;
    }

    .core-values-container{
        grid-template-columns:1fr;
    }

    /* HOME PAGE */

    .about-content h2{
        font-size:32px;
    }

    .about-content p{
        font-size:16px;
        line-height:1.8;
    }

    .core-container{
        grid-template-columns:repeat(2,1fr);
    }

    .news-container{
        grid-template-columns:1fr;
    }

    .quick-container{
        grid-template-columns:repeat(2,1fr);
    }

    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .footer-socials{
        justify-content:center;
    }

    .footer-contact li{
        justify-content:center;
    }

    .footer-about img{
        margin:auto;
    }

    /* REGISTRATION */

    .form-steps{
        gap:10px;
    }

    .step-circle{
        width:45px;
        height:45px;
        font-size:18px;
    }

    .step-item p{
        font-size:14px;
    }

    .review-container{
        grid-template-columns:1fr;
    }

    .form-navigation{
        flex-direction:column;
        gap:15px;
    }

    .next-btn,
    .prev-btn,
    .submit-btn{
        width:100%;
    }

    /* VERIFICATION */

    .verification-wrapper,
    .verification-wrapper.show-result{
        display:flex;
        flex-direction:column;
        gap:20px;
    }

    .verification-left,
    .verification-right{
        width:100%;
        padding:30px 22px;
    }

    .verification-buttons{
        flex-direction:column;
    }

    .result-grid{
        grid-template-columns:1fr;
    }

    /* LOGIN */

    .login-card{
        padding:40px 25px;
    }

    .login-card h2{
        font-size:36px;
    }

    /* CONTACT */

    .contact-container{
        grid-template-columns:1fr;
    }

    .contact-info h2{
        font-size:38px;
    }

    .contact-form-box{
        padding:30px 25px;
    }

}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width:576px){

    .hero-content h1{
        font-size:34px;
    }

    .hero-content p{
        font-size:16px;
    }

    .about-content h2,
    .news-header h2,
    .quick-header h2{
        font-size:34px;
    }

    .core-container{
        grid-template-columns:1fr;
    }

    .quick-container{
        grid-template-columns:1fr;
    }

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

    .review-grid{
        grid-template-columns:1fr;
    }

}