/* ==========================================
   MubaraqCloud Engineering Documentation
   Responsive Styles v1.0
========================================== */

/* ========= Large Tablets ========= */

@media (max-width:1024px){

    .navbar{
        padding:16px 4%;
    }

    .hero h1{
        font-size:2.8rem;
    }

    section{
        padding:70px 0;
    }

}

/* ========= Tablets ========= */

@media (max-width:768px){

    /* Navigation */

    .navbar{
        flex-direction:column;
        gap:20px;
        text-align:center;
    }

    .nav-links{
        flex-wrap:wrap;
        justify-content:center;
        gap:16px;
    }

    /* Hero */

    .hero{
        padding:90px 20px 70px;
    }

    .hero h1{
        font-size:2.2rem;
        line-height:1.3;
    }

    .hero p{
        font-size:1rem;
    }

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

    .btn-primary,
    .btn-secondary{
        width:220px;
        text-align:center;
        margin-left:0;
    }

    /* Cards */

    .project-card,
    .report-card,
    .card,
    .progress-card,
    .stat-card{
        padding:24px;
    }

    /* Grid */

    .tech-grid,
    .report-grid,
    .stats-grid{
        grid-template-columns:1fr;
    }

    /* Typography */

    h1{
        font-size:2.3rem;
    }

    h2{
        font-size:1.8rem;
    }

    h3{
        font-size:1.2rem;
    }

}

/* ========= Mobile Phones ========= */

@media (max-width:480px){

    body{
        font-size:15px;
    }

    .logo a{
        font-size:1.1rem;
    }

    .hero{
        padding:80px 18px 60px;
    }

    .hero h1{
        font-size:1.9rem;
    }

    .hero p{
        font-size:.95rem;
    }

    .badge{
        font-size:.8rem;
        padding:6px 12px;
    }

    section{
        padding:55px 0;
    }

    .project-card,
    .report-card,
    .card{
        padding:20px;
    }

    .table{
        display:block;
        overflow-x:auto;
        white-space:nowrap;
    }

    footer{
        padding:35px 20px;
    }

}

/* ========= Ultra Wide Screens ========= */

@media (min-width:1400px){

    .container{
        max-width:1320px;
    }

    .hero h1{
        font-size:4rem;
    }

}