body {
            font-family: 'Poppins', sans-serif;
            color: #333;
        }

        /* --- Navigation Bar --- */
        .navbar {
            background-color: rgba(0, 0, 0, 0.7) !important;
            backdrop-filter: blur(10px);
            transition: background-color 0.3s ease;
        }
        .navbar-brand {
            font-weight: 700;
            font-size: 1rem;
        }
        .nav-link {
            font-weight: 600;
            color: #fff !important;
        }
        .nav-link:hover {
            color: #0d6efd !important;
        }

        .carousel-item {
            width: 100vw;
             background-color: #555; /*Fallback color */
        }
        .carousel-item img {
            width: 100%;
            /* height: 100%; */
            object-fit: cover;      
        }

        .carousel-caption {
            bottom: 20%; 
            z-index: 2;
        }
        .carousel-caption h1 {
            font-size: 4rem;
            font-weight: 700;
        }
        .carousel-caption p {
            font-size: 1.25rem;
            font-weight: 300;
            max-width: 600px;
            margin: 1rem auto;
        }

        /* --- Primary Button --- */
        .btn-primary {
            font-weight: 600;
            padding: 12px 30px;
            border-radius: 50px;
            border: none;
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
        }

        /* --- Section Styling --- */
        .section-padding {
            padding: 80px 0;
        }
        h2.section-title {
            font-weight: 700;
            margin-bottom: 50px;
            text-align: center;
        }
        .section-bg-light {
            background-color: #f8f9fa;
        }

        /* --- About Us --- */
        .about-image {
            width: 100%;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }

        /* --- Feature Cards --- */
        .feature-card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
            text-align: center;
        }
        .feature-card:hover {
            transform: translateY(-10px);
        }
        .feature-icon {
            font-size: 3rem;
            color: #0d6efd;
        }

        /* --- Contact Form --- */
        .form-control {
            border-radius: 10px;
            padding: 12px;
        }
        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            border-color: #86b7fe;
        }

        /* --- Footer --- */
        footer {
            background-color: #212529;
            color: white;
        }
        footer a {
            color: #adb5bd;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        footer a:hover {
            color: #fff;
        }
   
   
        /* CSS for the Text Scroller (News Ticker) */

        /* 1. Container for the scroller */
        .scroller-container {
            /* Set a background color for visibility */
            background-color: #f7f7f7; 
            border: 2px solid #336699; /* School-themed border */
            overflow: hidden; /* Crucial: Hides text outside the box */
            white-space: nowrap; /* Crucial: Keeps the text on a single line */
            padding: 10px 0;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin: 20px auto; /* Center the scroller */
            max-width: 90%; /* Responsive width */
            border-radius: 8px;
        }

        /* 2. The text element that will move */
        .scrolling-text {
            display: inline-block;
            font-size: 1.1rem;
            font-weight: bold;
            color: #cc0000; /* Use a bright color for notices */
            
            /* Apply the CSS animation */
            animation: scroll-left 25s linear infinite;
        }
        
        /* Optional: Pause the scroll on mouse hover */
        .scrolling-text:hover {
            animation-play-state: paused;
        }


        /* 3. The Animation Keyframes */
        @keyframes scroll-left {
            /* Start position: 100% of the container width (off-screen right) */
            0% {
                transform: translateX(100%);
            }
            /* End position: -100% of the text width (off-screen left) */
            100% {
                transform: translateX(-100%);
            }
        }
        
        /* Optional: Adding a static 'Notice:' label to the left */
        .label-box {
            display: inline-block;
            background-color: #336699;
            color: white;
            padding: 10px 15px;
            font-size: 1.2rem;
            font-family: sans-serif;
            margin-right: 15px; /* Spacing */
            /* Animation applied to the text is within a sub-container */
        }