@media (max-width: 992px) {
            .about-content {
                flex-direction: column;
            }
            
            .about-img, .about-text {
                flex: none;
                width: 100%;
            }
        }

        @media (max-width: 768px) {    
            .hero{           
            background-size: cover; /* หรือใช้ 'cover' แล้วแต่ต้องการ */
            background-position: center;
            }
            .hero h1 {
                font-size: 1.8rem;
            }
              .slider-container {
                display: 40%;
            }
            .hero-btns {
                flex-direction: column;
                align-items: center;
            }  
            nav ul {
                gap: 15px;
            }
            .hide-on-mobile {
         display: none;
          }

        }

        @media (max-width: 576px) {
            .header-container {
                flex-direction: column;
                gap: 20px;
            }
            
            .about-features {
                grid-template-columns: 1fr;
            }
            
            .section-title h2 {
                font-size: 2rem;
            }
        }
  @media (forced-colors: active) {
    body {
        background: Canvas;
        color: CanvasText;
    }
}