/* Custom styles for the navigation bar shadow */
        .navbar-shadow {
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
        }

        /* Custom styles for card-like sections */
        .card {
            border-radius: 0.75rem; /* Equivalent to rounded-lg in Tailwind */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* Carousel styles for consistent display */
        .carousel-container {
            position: relative;
        }

        .carousel-inner {
            overflow: hidden;
            position: relative;
            width: 100%;
        }

        .carousel-track {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        /* For multi-item carousels (teachers) to control width dynamically */
        .teacher-carousel-item {
            flex-shrink: 0; /* Prevents items from shrinking */
            box-sizing: border-box; /* Include padding and border in the element's total width */
            padding: 1rem; /* Adjust as needed */
        }

        /* Carousel navigation buttons */
        .carousel-button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border: none;
            padding: 0.75rem;
            cursor: pointer;
            z-index: 10;
            border-radius: 9999px; /* Full rounded */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.3s ease;
        }

        .carousel-button:hover {
            background-color: rgba(0, 0, 0, 0.7);
        }

        .carousel-button.prev {
            left: 1rem;
        }

        .carousel-button.next {
            right: 1rem;
        }

        /* Pagination dots */
        .carousel-dot {
            width: 0.75rem; /* w-3 */
            height: 0.75rem; /* h-3 */
            border-radius: 9999px; /* rounded-full */
            background-color: #9CA3AF; /* bg-gray-400 */
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .carousel-dot.active-dot {
            background-color: #2563EB; /* bg-blue-600 */
        }

        /* Styles for "View Details" arrow in teacher section */
        .view-details-arrow {
            position: absolute;
            top: 1rem;
            right: 1rem;
            color: #2563EB; /* text-blue-600 */
            transition: transform 0.2s ease-in-out;
        }

        .view-details-arrow:hover {
            transform: translateX(5px);
        }

        /* News & Updates Section Styles */
        .news-updates-container {
            border-radius: 0.5rem; /* rounded-lg */
            background-color: #ffffff;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .news-item {
            display: flex;
            align-items: flex-start; /* Align items to the start for vertical spacing on small screens */
            padding: 1rem 0;
            border-bottom: 1px solid #E5E7EB; /* border-gray-200 */
        }

        .news-item:last-child {
            border-bottom: none;
        }

        .date-label {
            font-weight: 600; /* font-semibold */
            color: #4B5563; /* text-gray-700 */
            flex-shrink: 0;
            width: 100px; /* Fixed width for dates */
            margin-right: 1.5rem; /* mr-6 */
            text-align: right;
            padding-right: 1rem;
            border-right: 2px solid #D1D5DB; /* light gray separator */
        }

        .news-content {
            flex-grow: 1;
        }

        .news-content .title {
            font-weight: 700; /* font-bold */
            color: #1F2937; /* text-gray-900 */
            margin-bottom: 0.25rem;
            font-size: 1.125rem; /* text-lg */
        }

        .news-content .description {
            color: #4B5563; /* text-gray-700 */
            font-size: 0.9375rem; /* Slightly smaller than base text */
            line-height: 1.5;
        }

        @media (max-width: 767px) {
            .news-item {
                flex-direction: column; /* Stack date and content on small screens */
                align-items: flex-start;
            }
            .date-label {
                width: auto;
                text-align: left;
                padding-right: 0;
                border-right: none;
                margin-bottom: 0.5rem; /* Add space below date */
            }
        }

        /* Footer Navigation Links */
        .footer-nav-link {
            @apply text-gray-400 hover:text-blue-400 transition-colors duration-200 text-sm;
        }

        /* Scroll-to-top button */
        .scroll-up-btn {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            background-color: #2563eb; /* Tailwind blue-600 */
            color: white;
            border: none;
            border-radius: 9999px; /* fully rounded */
            padding: 0.75rem; /* sufficient padding */
            cursor: pointer;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            display: none; /* Hidden by default, shown with JS */
            transition: background-color 0.3s ease, transform 0.3s ease;
            z-index: 1000; /* ensure it's on top */
            width: 48px; /* Fixed width and height for a perfect circle */
            height: 48px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .scroll-up-btn:hover {
            background-color: #1d4ed8; /* Tailwind blue-700 */
            transform: translateY(-3px); /* slight lift effect */
        }
        .scroll-up-btn img {
            width: 100%; /* Make image fill the button */
            height: 100%;
            object-fit: cover; /* Ensure image covers the area without distortion */
            border-radius: 9999px; /* Keep image circular */
        }