html {
            scroll-behavior: smooth;
        }

        .hero {
            background: url('/assets/images/hero-bg.webp') no-repeat center center;
            background-size: cover;
            color: white;
            height: 100vh;
            position: relative;
        }

        .hero-overlay {
            background-color: rgba(0, 0, 0, 0.55);
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }

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

        body {
            font-family: 'Inter', sans-serif;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Poppins', sans-serif;
        }

        .course-features {
            display: table;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }

        .card.course-card {
            transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s cubic-bezier(.4,2,.6,1);
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        .card.course-card:hover, .card.course-card:focus-within {
            transform: translateY(-10px) scale(1.03);
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            z-index: 2;
        }

        

        .certificate-img {
            transition: transform 0.25s cubic-bezier(.4,2,.6,1), box-shadow 0.25s cubic-bezier(.4,2,.6,1);
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
            border-radius: 1rem;
            background: #fff;
        }
        .certificate-img:hover, .certificate-img:focus-within {
            transform: translateY(-8px) scale(1.04);
            box-shadow: 0 8px 32px rgba(0,0,0,0.18);
            z-index: 2;
        }