/* Custom Styles */
        body {
            font-family: 'Inter', sans-serif;
            padding-top: 56px; /* Adjust for fixed navbar */
            background-color: #FFFaf5; /* Light warm cream background */
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            color: #E67E22 !important; /* Joyful orange */
        }

        /* Hero Section */
        .hero-section {
            position: relative;
            padding: 10rem 0;
            /* Updated placeholder with joyful, sunny colors */
            background: url('https://edunext-main-storage-cf.edunexttechnologies.com/dpsnc/school___static/1785470651863_Blond.jpeg') no-repeat center center;
            background-size: cover;
            color: white;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.3); /* Lighter overlay */
        }

        .hero-content {
            position: relative;
            z-index: 2;
        }

        /* Custom Card Styles */
        .card {
            border: none;
            border-radius: 0.5rem; /* Softer rounded corners */
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15)!important;
        }
        
        /* Rounded corners for all elements */
        .rounded-3 {
            border-radius: 0.5rem !important;
        }

        /* Registration form styling */
        .registration-section {
            background-color: #ffffff;
            border-radius: 0.5rem;
        }
        
        /* Custom primary text color */
        .text-custom-primary {
            color: #E67E22 !important; /* Joyful orange */
        }

        /* CSS-Only Carousel Styles */
        .css-slider-wrapper {
            overflow: hidden;
            width: 100%;
            margin: 0 auto;
            border-radius: 0.5rem; /* Match other rounded corners */
        }

        .css-slider {
            /* 5 slides (4 unique + 1 duplicate) = 500% width */
            width: 500%; 
            display: flex;
            /* Animation: 5s per slide * 4 slides = 20s total duration */
            animation: slide 20s infinite linear; 
        }

        .css-slide {
            /* 100% / 5 slides = 20% width */
            width: 20%; 
            flex-shrink: 0;
        }

        .css-slide img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* Keyframes for the sliding animation */
        @keyframes slide {
            0% {
                transform: translateX(0%);
            }
            100% {
                /* We move 4 slides over (4/5 = 80%) */
                transform: translateX(-80%); 
            }
        }

        /* "Our Aim" card styles */
        .card-aim {
            /* This creates the color strip on the left */
            border-left-width: 6px !important; 
            /* We remove other borders */
            border-top: none;
            border-right: none;
            border-bottom: none;
            /* The border-color (e.g., border-primary) is set by Bootstrap classes in the HTML */
        }
        
        .card-aim p {
            transition: color 0.2s ease-in-out;
        }

        /* Color hover effect for Aim cards */
        .card-aim:hover p { /* Change text color on hover */
            color: #ffffff !important; 
        }
        
        .card-aim.border-primary:hover {
            background-color: #0d6efd; /* Bootstrap Primary */
        }
        .card-aim.border-success:hover {
            background-color: #198754; /* Bootstrap Success */
        }
        .card-aim.border-warning:hover {
            background-color: #ffc107; /* Bootstrap Warning */
        }
        .card-aim.border-danger:hover {
            background-color: #dc3545; /* Bootstrap Danger */
        }
        
        /* Special case for warning, as white text is hard to read */
        .card-aim.border-warning:hover p {
            color: #333 !important; /* Dark text for yellow background */
        }
        
        /* Custom Footer */
        .footer-custom {
            background-color: #2E8B57; /* Friendly Sea Green */
        }