html, body {
    overflow-x: hidden;
}

 @media screen and (max-width: 1024px) {
            .content-grid {
                grid-template-columns: 1fr;
            }

            .sidebar {
                position: relative;
                top: 0;
            }

            .header-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 1rem;
            }

            .logo-section {
                justify-content: center;
            }

            .header-actions {
                justify-content: center;
            }
            
            .age-chart-box {
                flex-direction: column;
                text-align: center;
            }
        }

        @media screen and (max-width: 768px) {
            .site-title h1 {
                font-size: 1.75rem;
            }

            #logoholder {
                height: 60px;
            }

            .main-container {
                padding: 0 1rem;
            }

            .card {
                padding: 1.5rem;
            }

            .carousel-inner img {
                height: 250px;
            }

            .nav-link {
                padding: 0.75rem 1rem !important;
            }
            
            .contact-card {
                padding: 1.5rem;
            }
            
            .table {
                font-size: 0.875rem;
            }

            .table thead th,
            .table tbody td {
                padding: 0.75rem 0.5rem;
            }
            
            .content-card ol > li {
                padding-left: 3.5rem;
            }

            .content-card ol > li::before {
                left: 0.75rem;
                width: 1.75rem;
                height: 1.75rem;
                font-size: 1rem;
            }
            
            .division-card {
                padding: 1.5rem;
            }
            
            .news-item .row {
                margin-left: 0 !important;
                margin-right: 0 !important;
            }
        
            .news-item [class*="col-"] {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
        
            .carousel-container,
            .card,
            .news-item,
            .main-content,
            .sidebar {
                max-width: 100%;
                min-width: 0;
            }

            .carousel-container,
            #mainCarousel,
            .carousel-inner,
            .carousel-item,
            .image-cont {
                width: 100%;
                max-width: 100%;
                overflow: hidden;
            }
        
            .carousel-inner img {
                width: 100%;
                max-width: 100%;
                display: block;
            }
        }

        @media screen and (max-width: 480px) {
            .site-title h1 {
                font-size: 1.25rem;
            }

            .btn-header {
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
            }

            .card-header h2 {
                font-size: 1.25rem;
            }

            #goTopBtn {
                width: 50px;
                height: 50px;
                bottom: 1rem;
                right: 1rem;
            }
            
            .table {
                font-size: 0.75rem;
            }

            .table thead th,
            .table tbody td {
                padding: 0.5rem 0.25rem;
            }
            
            .division-card {
                padding: 1rem;
            }

            .division-card h6 {
                font-size: 1.2rem;
            }
        }