body { font-family: 'Inter', sans-serif; transition: background-color 0.3s ease, color 0.3s ease; }

        

        /* Hero Parallax */

        .hero-section {

              background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/images/banner.jpg');

              background-size: cover; background-position: center; background-attachment: fixed;

        }



        /* Interactive Elements */

        .card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }

        .card-hover:hover { transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15); }

        

        /* Navigation Transitions */

        .dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }

        .group:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }

        

        /* Resource Cards */

        .card-image-container { height: 12rem; display: flex; align-items: center; justify-content: center; overflow: hidden; background-color: #ffffff; padding: 1rem; border-bottom: 1px solid #f3f4f6; position: relative; }

        .card-image-container img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.5s ease; }

        .card-hover:hover .card-image-container img { transform: scale(1.08); }



        /* Grade Badges */

        .grade-circle { width: 8rem; height: 8rem; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

        .grade-circle:hover { transform: scale(1.1) rotate(5deg); }

        

        /* Mobile Navigation */

        .mobile-dropdown-menu { transition: max-height 0.4s ease-in-out, opacity 0.4s ease; max-height: 0; opacity: 0; overflow: hidden; }

        .mobile-dropdown-menu.open { max-height: 600px; opacity: 1; }

        

        /* Search Modal */

        .search-modal { display: none; position: fixed; z-index: 100; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.85); backdrop-filter: blur(5px); }

        .search-modal-content { position: relative; margin: 10% auto; padding: 20px; width: 90%; max-width: 700px; animation: slideDown 0.3s ease-out; }

        @keyframes slideDown { from { transform: translateY(-50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

        .search-modal-close { position: absolute; top: -44px; right: 0; color: #fff; font-size: 26px; font-weight: bold; cursor: pointer; transition: color 0.2s; background: #1e293b; border: 1px solid #94a3b8; border-radius: 50%; width: 40px; height: 40px; line-height: 1; }

        .search-modal-close:hover { color: #dc2626; }



        /* Dark Mode */

        .dark body { background-color: #111827; color: #f3f4f6; }

        .dark .bg-white { background-color: #1f2937 !important; color: #f3f4f6; }

        .dark .text-gray-600 { color: #9ca3af; }

        .dark .bg-gray-50 { background-color: #111827 !important; }

        .dark .bg-gray-100 { background-color: #374151 !important; }

        .dark .border-gray-200 { border-color: #374151; }

        .dark .card-image-container { background-color: #374151; border-color: #4b5563; }

        

        /* Fix for Logo in Dark Mode - Clip Art Style (No White Block) */

        .dark .logo-image { 

            background-color: transparent !important; 

            filter: invert(1) grayscale(1);

            mix-blend-mode: screen;

            padding: 0;

            box-shadow: none;

            border-radius: 0;

        }



        /* News Ticker */

        .news-ticker-wrap { width: 100%; overflow: hidden; background-color: #dc2626; color: white; white-space: nowrap; border-bottom: 4px solid #991b1b; }

        .news-ticker { display: inline-block; padding-left: 100%; animation: ticker 40s linear infinite; }

        .news-ticker:hover { animation-play-state: paused; }

        @keyframes ticker { 0% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(-100%, 0, 0); } }

        

        /* Floating Socials */

        .social-float { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; gap: 12px; background: rgba(255,255,255,0.98); padding: 15px 10px; border-radius: 0 12px 12px 0; box-shadow: 4px 0 15px rgba(0,0,0,0.1); border: 1px solid #e5e7eb; border-left: none; }

        .dark .social-float { background: rgba(31, 41, 55, 0.98); border-color: #4b5563; }

        .social-float a { transition: all 0.2s; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; }

        .social-float a:hover { transform: scale(1.15); }

        

        /* --- BUTTON CSS --- */

        .promo-container {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            margin: 2rem auto;

            width: 100%;

            gap: 1.5rem;

        }



        @media (min-width: 768px) {

            .promo-container {

                flex-direction: row;

                gap: 2rem;

            }

        }

       /* --- BUTTON & 12 ARROWS CSS --- */

        .promo-container {

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            margin: 5rem auto;

            width: 100%;

        }



        .button-wrapper {

            position: relative;

            display: inline-block;

        }



        /* 12 Arrows Setup */

        .floating-arrow-wrapper {

            position: absolute;

            width: 40px; 

            height: 40px;

            display: flex; 

            align-items: center; 

            justify-content: center;

            z-index: 20;

        }



        .floating-arrow-wrapper i {

            font-size: 1.8rem;

            animation: arrow-bounce 0.6s infinite alternate ease-in-out;

        }



        /* Original 8 Colors */

        .arr-c1 i { color: #4285f4; filter: drop-shadow(0 0 8px rgba(66, 133, 244, 0.8)); } /* Blue */

        .arr-c2 i { color: #ea4335; filter: drop-shadow(0 0 8px rgba(234, 67, 53, 0.8)); } /* Red */

        .arr-c3 i { color: #fbbc04; filter: drop-shadow(0 0 8px rgba(251, 188, 4, 0.8)); } /* Yellow */

        .arr-c4 i { color: #34a853; filter: drop-shadow(0 0 8px rgba(52, 168, 83, 0.8)); } /* Green */

        .arr-c5 i { color: #9b72cb; filter: drop-shadow(0 0 8px rgba(155, 114, 203, 0.8)); } /* Purple */

        .arr-c6 i { color: #d96570; filter: drop-shadow(0 0 8px rgba(217, 101, 112, 0.8)); } /* Pink */

        .arr-c7 i { color: #06b6d4; filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.8)); } /* Cyan */

        .arr-c8 i { color: #f97316; filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.8)); } /* Orange */



        /* 4 NEW Colors */

        .arr-c9 i { color: #ec4899; filter: drop-shadow(0 0 8px rgba(236, 72, 153, 0.8)); } /* Hot Pink (Between Blue & Red) */

        .arr-c10 i { color: #14b8a6; filter: drop-shadow(0 0 8px rgba(20, 184, 166, 0.8)); } /* Teal (Between Purple & Green) */

        .arr-c11 i { color: #8b5cf6; filter: drop-shadow(0 0 8px rgba(139, 92, 246, 0.8)); } /* Violet (Between Pink & Purple) */

        .arr-c12 i { color: #84cc16; filter: drop-shadow(0 0 8px rgba(132, 204, 22, 0.8)); } /* Lime (Between Blue & Orange) */



        /* Arrow Positions (Mobile First) */

        .arr-pos-t   { top: -45px; left: calc(50% - 20px); transform: rotate(90deg); }

        .arr-pos-t-r { top: -45px; left: calc(50% + 40px); transform: rotate(115deg); }

        .arr-pos-tr  { top: -25px; right: -25px; transform: rotate(135deg); }

        .arr-pos-r   { right: -45px; top: calc(50% - 20px); transform: rotate(180deg); }

        .arr-pos-br  { bottom: -25px; right: -25px; transform: rotate(225deg); }

        .arr-pos-b-r { bottom: -45px; left: calc(50% + 40px); transform: rotate(245deg); }

        .arr-pos-b   { bottom: -45px; left: calc(50% - 20px); transform: rotate(270deg); }

        .arr-pos-b-l { bottom: -45px; left: calc(50% - 80px); transform: rotate(295deg); }

        .arr-pos-bl  { bottom: -25px; left: -25px; transform: rotate(315deg); }

        .arr-pos-l   { left: -45px; top: calc(50% - 20px); transform: rotate(0deg); }

        .arr-pos-tl  { top: -25px; left: -25px; transform: rotate(45deg); }

        .arr-pos-t-l { top: -45px; left: calc(50% - 80px); transform: rotate(65deg); }



        /* Animation Delays (Creates a smooth 12-step circle) */

        .arr-pos-t i   { animation-delay: 0.0s; }

        .arr-pos-t-r i { animation-delay: 0.1s; }

        .arr-pos-tr i  { animation-delay: 0.2s; }

        .arr-pos-r i   { animation-delay: 0.3s; }

        .arr-pos-br i  { animation-delay: 0.4s; }

        .arr-pos-b-r i { animation-delay: 0.5s; }

        .arr-pos-b i   { animation-delay: 0.6s; }

        .arr-pos-b-l i { animation-delay: 0.7s; }

        .arr-pos-bl i  { animation-delay: 0.8s; }

        .arr-pos-l i   { animation-delay: 0.9s; }

        .arr-pos-tl i  { animation-delay: 1.0s; }

        .arr-pos-t-l i { animation-delay: 1.1s; }



        /* Button Styles */

        .sparkle-btn {

            position: relative;

            padding: 16px 32px;

            font-family: 'Inter', sans-serif;

            font-size: 1.2rem;

            font-weight: 800;

            letter-spacing: -0.025em;

            color: #ffffff;

            text-decoration: none;

            background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);

            background-size: 300% 100%;

            border-radius: 50px;

            border: 3px solid #ffffff;

            box-shadow: 0 0 20px rgba(155, 114, 203, 0.6);

            transition: all 0.3s ease;

            cursor: pointer;

            z-index: 10;

            overflow: hidden;

            animation: gradient-shift 4s ease infinite;

            display: flex;

            flex-direction: column;

            align-items: center;

            line-height: 1.2;

            text-align: center;

        }



        .sparkle-btn span:first-child { font-size: 1.3rem; }

        .sparkle-btn span:last-child { font-size: 1rem; opacity: 0.9; font-weight: 600; }



        .sparkle-btn::before {

            content: '';

            position: absolute;

            top: -5px; right: -5px; bottom: -5px; left: -5px;

            z-index: -1;

            background: linear-gradient(90deg, #4285f4, #9b72cb, #d96570, #f4b400, #4285f4);

            background-size: 300% 100%;

            border-radius: 55px;

            filter: blur(15px);

            opacity: 0.7;

            animation: gradient-shift 4s ease infinite, breathe 2.5s ease-in-out infinite alternate;

        }



        .sparkle-btn:hover {

            transform: scale(1.05) translateY(-3px);

            box-shadow: 0 10px 30px rgba(217, 101, 112, 0.8);

        }



        /* Fireworks Effect */

        .sparkle-btn::after {

            content: '';

            position: absolute;

            top: 50%; left: 50%;

            width: 100%; height: 100%;

            background-image: 

                radial-gradient(circle, #fff 10%, transparent 20%),

                radial-gradient(circle, #f4b400 10%, transparent 20%),

                radial-gradient(circle, #fff 10%, transparent 20%),

                radial-gradient(circle, #4285f4 10%, transparent 20%),

                radial-gradient(circle, #fff 10%, transparent 20%);

            background-size: 15% 15%, 20% 20%, 10% 10%, 25% 25%, 15% 15%;

            background-position: 10% 20%, 80% 10%, 50% 80%, 20% 70%, 90% 80%;

            background-repeat: no-repeat;

            transform: translate(-50%, -50%) scale(0);

            opacity: 0;

            z-index: 1;

            transition: transform 0.5s ease-out, opacity 0.5s ease-out;

            pointer-events: none;

        }



        .sparkle-btn:hover::after {

            transform: translate(-50%, -50%) scale(2.5);

            opacity: 1;

            animation: fade-out 0.5s forwards 0.3s;

        }



        /* Desktop Adjustments */

        @media (min-width: 768px) {

            .promo-container { margin: 8rem auto; }

            .sparkle-btn { padding: 24px 64px; border-radius: 80px; border-width: 4px; }

            .sparkle-btn span:first-child { font-size: 2.2rem; }

            .sparkle-btn span:last-child { font-size: 1.4rem; }

            

            .floating-arrow-wrapper i { font-size: 2.5rem; }

            

            .arr-pos-t   { top: -75px; left: calc(50% - 20px); }

            .arr-pos-t-r { top: -75px; left: calc(50% + 80px); }

            .arr-pos-tr  { top: -55px; right: -45px; }

            .arr-pos-r   { right: -75px; top: calc(50% - 20px); }

            .arr-pos-br  { bottom: -55px; right: -45px; }

            .arr-pos-b-r { bottom: -75px; left: calc(50% + 80px); }

            .arr-pos-b   { bottom: -75px; left: calc(50% - 20px); }

            .arr-pos-b-l { bottom: -75px; left: calc(50% - 120px); }

            .arr-pos-bl  { bottom: -55px; left: -45px; }

            .arr-pos-l   { left: -75px; top: calc(50% - 20px); }

            .arr-pos-tl  { top: -55px; left: -45px; }

            .arr-pos-t-l { top: -75px; left: calc(50% - 120px); }

        }



        /* Keyframes */

        @keyframes arrow-bounce {

            0% { transform: translateX(0px); }

            100% { transform: translateX(18px); }

        }

        @keyframes gradient-shift {

            0% { background-position: 0% 50%; }

            50% { background-position: 100% 50%; }

            100% { background-position: 0% 50%; }

        }

        @keyframes breathe {

            0% { filter: blur(10px); opacity: 0.5; transform: scale(0.98); }

            100% { filter: blur(20px); opacity: 0.9; transform: scale(1.02); }

        }

        @keyframes fade-out {

            to { opacity: 0; }

        }