.hidden{
    display: none;
}

/* Mobile Devices (max-width:480px) */

@media (max-width:480px) {

    header > *{
        margin: 0;
    }
    .nav_items,  .menu-btn{
        display: none;
    }
    img{
        width: 100%;
    }

    .hero-container{
        flex-direction: column;
        height: auto;
    }

    .heading, .newsletter .content h2{
        font-size: 2rem;
    }

    .hero-image,  .btn, .outline-btn,  .hero-text h1.heading, .school-section h2.heading, .hero-text p,
    .about-image, .about-info, .about-info h2.heading, .school-section .text-content p, .classes-section h2.heading
    {
        width: 100%;
    }

    .btn-group{
        flex-direction: column;
    }

    .about-section, .school-section{
        flex-direction: column;
    }

    .why-us-box{
        flex-direction: column;
        align-items: center;
        max-width: 100%;
    }
    .icon-text{
        height: auto;
    }

    h3{
        line-height: 1.5;
    }
    .icon{
        flex-shrink: 0;
    }
    .class-cards, .footer  {
        grid-template-columns: repeat(1, 1fr);
    }

    .classes-section, .newsletter .content{
        padding: 15px;
    }

}


/* Tablet Devices (min-width: 481px and max-width: 768px)  */

@media screen and (min-width: 481px) and (max-width: 768px) {
    .nav_items{
        display: none;
    }

    header > * {
        margin: 0;
    }

    .hero-container{
        flex-direction: column;
        height: auto;
    }

    .about-section{
        flex-direction: column;
        align-items: start;
    }

    .hero-image,  .hero-text h1.heading, .school-section h2.heading, .hero-text p,
    .about-image, .about-info, .about-info h2.heading, .school-section .text-content p, .classes-section h2.heading
    {
        width: 100%;
    }

    .hero-image img {
        width: 65%;
    }


    .school-section{
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .classes-section{
        padding: 24px;
    }

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

/* Laptop or Desktop (min-width:769px and max-width: 1024px) */

@media screen and (min-width: 769px) and (max-width: 1024px){
    .hero-image{
        flex-shrink: 0;
    }

    .hero-text h1.heading, .school-section h2.heading, .hero-text p,
    .about-image, .about-info, .about-info h2.heading, .school-section .text-content p, .classes-section h2.heading
    {
        width: 100%;
    }

    .school-section{
        flex-direction: row;
        align-items: center;
    }
    .school-section .text-content{
        width: 60%;
    }

    .class-cards, .footer {
        grid-template-columns: repeat(3, 1fr);
    }
   
}