.hidden{
    display: none; /* Hide elements with this class */
}
/* Mobile Device (max-width: 480px) */
@media (max-width: 480px) {
    header > *{
        margin: 0;
    }
   .nav_items,.menu-btn{
         display: none; /* Hide navigation items on mobile */
   }
   img {
    width: 100%; /* Full width for mobile */
   }
   .hero-container{
    flex-direction: column;
    height: auto; /* Allow height to adjust based on content */

   }
   .heading,.newslatter .content h2{
    font-size: 2rem; /* Adjust heading size for mobile */
   }
   .hero-image{
    width: 100%;
   }
   .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%; /* Full width for headings */
   }
   .btn-group{
    flex-direction: column;
   }
   .about-section{
    flex-direction: column;
   }
   .why-us-box{
    flex-direction: column;
    align-items: center;
    max-width: 100%;

   }
   .icon-text{
    height: auto;
   }
   h3{
    line-height: 1.3rem;
   }
   .icon{
    flex-shrink:0 ;
   }   
   .school-section{
    flex-direction: column;
    align-items: center;
   }
   .class-cards,.footer{
    grid-template-columns: repeat(1, 1fr); /* Single column for class cards */
   }
   .classes-section,.newsletter .content{
    padding: 15px;
   }  
}
/* Tablet Device (min-width: 481px and max-width: 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    header > *{
        margin: 0;
    }
    .nav_items{
         display: none; /* Hide navigation items on tablet */
    }
    .hero-container{
        flex-direction: column;
        height: auto; /* Allow height to adjust based on content */
        
    }
    .about-section{
        flex-direction: column;
        align-items: start;
    }
    .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%; /* Full width for headings */
    }
    .hero-image{
        width: 80%;
    }
  
 
    .school-section{
        flex-direction: column-reverse;
        align-items: flex-start;
    }
    .classes-section{
        padding: 24px;
    }
    .class-cards,.footer{
        grid-template-columns: repeat(2, 1fr); /* Two columns for class cards */
    }


}
/* Desktop Device (min-width: 769px) */
@media (min-width: 769px) and (max-width:1024px){
    header > *{
        margin: 0;
    }
    .hero-image{
        flex-shrink: 0; /* Prevent hero image from shrinking */
    }
    .hero-text h1.heading, .school-section h2.heading,.hero-text p, .about-info,
   .about-info h2.heading,.school-section .text-content p,.classes-section h2.heading {
    width: 100%; /* Full width for headings */
   }
   .about-image, .about-info{
    width: 80%;
   }
   .school-section{
    flex-direction: row;
    align-items: center;
   }
   .school-section .text-content{
    width: 60%;
   }
   .class-cards{
    grid-template-columns: repeat(3, 1fr); /* Three columns for class cards */
   }
   .footer{
    grid-template-columns: repeat(3, 1fr); /* Three columns for footer */
   }
 
   

}