/* Small Device - 576px */
@media screen and (max-width: 576px) {  
    nav > .menu,
    nav > .btn{
        display: none;
    }
    nav{
        padding: 18px 20px;
    }
    nav .brand{
    font-size: 2.5rem;
    }
    nav .hamburger-menu{
    display: inline-block;
    }

    /* common styles */
    .section-heading h2{
        font-size: 3.2rem;
        margin-bottom: 16px;
    }

    /* hero section */
    #hero {
        background-image: url(./assets/hero-bg.png);
        background-repeat: no-repeat;
        background-size: 150% 150%;
        background-position: center;
        padding: 40px 20px;
    }
    #hero .hero-container .logo-container {
        width: 200px;
        height: 200px;
    }
    #hero .hero-container .logo-container img{
        width: 100%;  
    }

    #hero .hero-container .logo-container .microphone img{
        width: 50%;
    }

    #hero .hero-container .logo-container .badge{
        font-size: 1.6rem;
        top: 0;
        right: 0; 
    }
    #hero .hero-container .hero-content h1{
        font-size: 4rem;
    }

    /* About section */
    #about, #choose-techwave, #host, #footer{
        padding: 40px 20px;
    }
    #about .about-container .about-header .about-desc{
        line-height: 20px;
    }
    .divider{
        margin: 40px 0; 
    }
    
    #about .about-container .about-status{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
    }

    .about-status .status-item h1{
        font-size: 4rem;
    }

    /* Why Choose Section  */    
    .card-contianer{
        margin-top: 2.4rem;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.6rem;
    }

    .big-layout, 
    .wide-layout, 
    .normal-layout {
        grid-column: span 1;
        grid-row: span 1;
    }

    /* Features Section */
    #features{
        padding: 40px 0;
    }
    .feature-card-container {
        margin-top: 2.4rem;
        grid-template-columns: repeat(1, 1fr);
        gap: 1.6rem;
        place-items: center;
    }

    /* Host Section */
    .host-card-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 16px;
        text-align: center;
    }
    .host-img img{
        width: 150px;
    }
    .host-card-container .host-content .host-social{
        justify-content: center;
        gap: 8px;
    }

    
    /* Footer Section */
    #footer{
        background-image: url(./assets/footer-bg.png); 
        background-repeat: no-repeat;
        background-size: 150% 150%;
        background-position: center;
    }
    #footer .footer-container{
        gap: 2.4rem;
    }
    .footer-container .footer-brand img{
        width: 50%;
    }
    #footer .footer-container .footer-links-container{
        flex-wrap: wrap ;
        gap: 1.6rem;
    }

    

}