/* =====================================
   Responsive Layout
===================================== */

@media (max-width: 992px) {

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

    .hero h2{
        font-size:2.7rem;
    }

    nav ul{
        gap:18px;
    }

}

@media (max-width:768px){

    .site-header .container{

        flex-direction:column;

        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;

        justify-content:center;

        gap:14px;

    }

    .hero{

        min-height:65vh;

    }

    .hero h2{

        font-size:2.2rem;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .features .container{

        grid-template-columns:1fr;

    }

}

@media (max-width:480px){

    .logo{

        flex-direction:column;

        text-align:center;

    }

    .logo img{

        width:60px;

    }

    .hero h2{

        font-size:1.8rem;

    }

    footer{

        font-size:.9rem;

    }

}

/* ====================================
   Module 008 - Homepage Branding
==================================== */

@media (max-width: 768px) {

    .welcome-section {

        padding: 55px 0;

    }

    .welcome-grid {

        grid-template-columns: 1fr;

        gap: 35px;

    }

    .ad-slot {

        min-height: 140px;

    }

}

@media (max-width: 768px) {

    .nav-menu {
        display: none;
    }

    .nav-menu.show {
        display: flex;
    }

    .mobile-toggle {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

}