body {
            font-family: 'Inter', sans-serif;
            background-color: #ffffff;
            color: #1a1a1a;
            scroll-behavior: smooth;
        }

        /* Corporate Branding */
        .brand-teal,
        .text-brand {
            color: #42bfc7;
        }

        .bg-brand-gradient {
            background: linear-gradient(135deg, #42bfc7 0%, #2563eb 100%);
        }

        .border-brand {
            border-color: #42bfc7;
        }

        /* High-End Banner Overlay */
        .hero-banner {
            background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
                url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1920&q=80');
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
        }

        /* REDESIGNED COURSE BOX: Minimalist Glass-Inset */
        .modern-box {
            background: #ffffff;
            border: 1px solid #f0f0f0;
            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
            position: relative;
            z-index: 1;
        }

        .modern-box:hover {
            transform: translateY(-15px) scale(1.02);
            border-color: #42bfc7;
            box-shadow: 0 40px 80px -15px rgba(0, 0, 0, 0.1);
        }

        /* Top Bar Expand from Center */
        .modern-box::before {
            content: "";
            position: absolute;
            top: 0;
            left: 50%;
            width: 0;
            height: 5px;
            background: #42bfc7;
            transition: all 0.4s ease;
            transform: translateX(-50%);
        }

        .modern-box:hover::before {
            width: 100%;
        }

        /* Background Radial Glow on Hover */
        .modern-box::after {
            content: "";
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at top right, rgba(66, 191, 199, 0.05), transparent 70%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }

        .modern-box:hover::after {
            opacity: 1;
        }

        /* Icon Animation */
        .modern-box .icon-container {
            transition: all 0.4s ease;
        }

        .modern-box:hover .icon-container {
            background-color: #42bfc7;
            color: white;
            transform: rotateY(360deg);
        }

        .modern-box a:hover {
            background: #42bfc7;
            box-shadow: 0 10px 20px rgba(66, 191, 199, 0.4);

        }

        .modern-box {
            overflow: hidden;
            position: relative;
            border-radius: 8px;
        }

        .course-overlay {
            position: absolute;
            bottom: -100%;
            left: 0;
            width: 100%;
            height: 65%;
            background: #ffffff;
            padding: 2.5rem;
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            border-top: 1px solid #f0f0f0;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 20;
        }

        .modern-box:hover .course-overlay {
            bottom: 0;
        }

        .btn-theme {
            background: linear-gradient(135deg, #42bfc7 0%, #2563eb 100%);
            color: white;
            transition: all 0.3s ease;
        }

        .text-kern {
            letter-spacing: -0.02em;
        }

        .input-field {
            background: #f9f9f9;
            border: 1px solid #eee;
            transition: border-color 0.3s ease;
        }

        .input-field:focus {
            border-color: #42bfc7;
            outline: none;
            background: #fff;
        }

        .input-field::placeholder {
            color: #bbb;
        }

        form button:hover {
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            background-color: #42bfc7;
        }