/* --- Base & Reset Styles --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            color: #333;
            background-color: #fff;
            line-height: 1.6;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        ul {
            list-style-type: none;
        }

        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        
        /* --- Utility & Layout Classes --- */
        .container {
            width: 100%;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
        }
        
        .theme-bg { background-color: #1a26c9; }
        .grey-bg { background-color: #f8f8f8; }

        .text-center { text-align: center; }

        .tp-section__title {
            font-size: 2.25rem; /* 36px */
            font-weight: 800;
            line-height: 1.2;
            color: #111;
            margin-bottom: 1rem;
        }

        
        /* --- Hero Section --- */
        .hero-section {
            padding-top: 10rem;
            padding-bottom: 5rem;
            position: relative;
            overflow: hidden;
            color: white;
        }
        .hero-grid {
            display: grid;
            gap: 2rem;
            align-items: center;
        }
        .hero-content { text-align: center; }
        .hero-content span { font-weight: 600; opacity: 0.8; }
        .hero-content h1 { font-size: 2.5rem; font-weight: 800; margin: 1rem 0; line-height: 1.2; }
        .hero-content p { font-size: 1.125rem; opacity: 0.9; margin-bottom: 2rem; }

        .hero-shape { position: absolute; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); }
        .shape-1 { top: 0; left: 0; width: 16rem; height: 16rem; transform: translate(-25%, -25%); }
        .shape-2 { bottom: 0; right: 0; width: 24rem; height: 24rem; transform: translate(25%, 25%); }

      

        /* --- Generic Section Styles --- */
        .section-py { padding: 5rem 0; }
        .section-grid { display: grid; gap: 3rem; align-items: center; }
        .section-content p { color: #4b5563; margin-bottom: 1rem; }
        .section-content ul { list-style-type: none; margin-top: 1.5rem; }
        .section-content ul li { margin-bottom: 0.75rem; color: #374151; }
        
        /* --- About & Learn Sections --- */
        .about-images { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
        .about-images img { border-radius: 0.5rem; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: transform 0.3s ease; }
        .about-images img:hover { transform: scale(1.05); }
        .about-images img:nth-child(2) { margin-top: 2rem; }
        
        .learn-grid { display: grid; gap: 2rem; }
        .learn-item {
            text-align: center;
            padding: 1.5rem;
            border: 2px solid transparent;
            border-radius: 0.5rem;
            transition: all 0.3s ease;
        }
        .learn-item:hover { border-color: #3b82f6; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
        .learn-item .icon { font-size: 2.5rem; color: #1a26c9; margin-bottom: 1rem; }
        .learn-item h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
        .learn-item p { color: #4b5563; }

        /* --- Schedule Section --- */
        .schedule-grid { display: grid; gap: 2rem; max-width: 56rem; margin: auto; }
        .schedule-card { background-color: #fff; padding: 1.5rem; border-radius: 0.5rem; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
        .schedule-card h3 { font-size: 1.5rem; font-weight: 700; color: #1a26c9; border-bottom: 1px solid #e5e7eb; padding-bottom: 0.5rem; margin-bottom: 1rem; }
        .schedule-card ul li { margin-bottom: 0.75rem; }
        
        /* --- CTA Section --- */
        .cta-section {
            padding: 5rem 1rem;
            color: white;
            text-align: center;
            background-image: url('https://www.transparenttextures.com/patterns/cubes.png');
        }
        .cta-section h2 { font-size: 2.25rem; font-weight: 800; }
        .cta-section p { opacity: 0.8; margin-top: 1rem; margin-bottom: 2rem; max-width: 42rem; margin-left: auto; margin-right: auto; }
      

        /* --- Responsive Styles --- */
        @media (min-width: 768px) {
            .hero-content h1 { font-size: 3rem; }
            #countdown { gap: 2rem; }
            .learn-grid { grid-template-columns: repeat(2, 1fr); }
            .schedule-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (min-width: 1024px) {
            .hero-grid { grid-template-columns: repeat(2, 1fr); }
            .hero-content { text-align: left; }
            .section-grid { grid-template-columns: repeat(2, 1fr); }
            .learn-grid { grid-template-columns: repeat(4, 1fr); }
            .footer-grid { grid-template-columns: repeat(4, 1fr); }
        }