/* =======================================================
   CITEX GROUP - RESPONSIVE DESIGN
======================================================= */

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

@media (max-width: 1024px){

    #home{
        flex-direction:column;
        text-align:center;
        gap:60px;
    }

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

    nav{
        display:none;
    }

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

    .hero-card{
        width:100%;
        display:flex;
        justify-content:center;
    }

}

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

@media (max-width: 768px){

    section{
        padding:80px 5%;
    }

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

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

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

    .primary-btn,
    .secondary-btn{
        width:100%;
        text-align:center;
    }

    .section-title h2{
        font-size:34px;
    }

    .project-grid,
    .about-grid,
    .team-grid,
    .stats-grid{
        grid-template-columns:1fr;
    }

    .footer-content{
        flex-direction:column;
        text-align:center;
    }

}

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

@media (max-width: 480px){

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

    .status-card{
        padding:25px;
    }

    .logo h2{
        font-size:24px;
    }

    .discord-btn{
        padding:10px 18px;
        font-size:14px;
    }

}