:root {
            --primary: #ff9635; /* Orange */
            --secondary: #007991; /* Teal */
            --text-dark: #22323d;
            --heading: #000000;
            --bg-gray: #ecf0f2;
            --white: #ffffff;
        }

        /* Basic Resets */
        * { box-sizing: border-box; margin: 0; padding: 0; }
        body { font-family: 'Open Sans', sans-serif; line-height: 1.6; color: var(--text-dark); background-color: var(--white); }
        h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; font-weight: 600; color: var(--heading); }
        a { text-decoration: none; transition: 0.3s; }
        ul { list-style: none; }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* Navigation Header */
        header { position: absolute; width: 100%; top: 0; z-index: 100; padding: 25px 0; }
        .nav-wrapper { display: flex; justify-content: space-between; align-items: center; }
        .nav-menu { display: flex; gap: 30px; }
        .nav-menu a { color: #ecf0f2; font-weight: 500; font-size: 14px; }
        .nav-menu a:hover { color: var(--white); }
        .btn-cta { background: var(--primary); color: white; padding: 12px 30px; border-radius: 50px; font-weight: 600; text-transform: uppercase; font-size: 13px; }

        /* Hero Section */
        .hero { 
            height: 90vh; 
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                        url('../../img/heroimg/bgindex.png') center/cover;
            display: flex; align-items: center; color: white;
        }
        .hero-label { color: var(--primary); font-weight: bold; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        .hero h1 { font-size: 70px; color: white; margin-bottom: 20px; line-height: 1.1; }
        .hero p { max-width: 500px; margin-bottom: 30px; font-size: 16px; opacity: 0.9; }
        .hero-btns { display: flex; gap: 20px; align-items: center; }

        /* Technologies Section */
        .tech-section { padding: 60px 0; text-align: center; border-bottom: 1px solid #eee; }
        .tech-icons { display: flex; justify-content: center; gap: 40px; margin-top: 30px; opacity: 0.6; }
        .tech-icons img { height: 45px; }

        /* Courses Section */
        .popular-courses { padding: 100px 0; background-color: var(--bg-gray); }
        .section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
        .section-header h2 { font-size: 40px; }
        .course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .course-card { background: white; border-radius: 5px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
        .course-card img { width: 100%; display: block; }
        .course-body { padding: 25px; }
        .course-body h3 { margin-bottom: 10px; font-size: 20px; }
        .btn-more { color: var(--secondary); font-weight: bold; border-bottom: 2px solid var(--secondary); padding-bottom: 2px; font-size: 14px; }

        /* Call to Action Banner */
        .cta-banner { background: var(--secondary); color: white; padding: 80px 0; }
        .cta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-bottom: 50px; }
        .cta-card h4 { color: white; margin-bottom: 10px; }
        .career-box { background: white; color: var(--text-dark); padding: 40px; border-radius: 5px; }
        .career-box h3 { font-size: 28px; margin-bottom: 15px; }

        .career-box-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

@media (max-width: 992px) {
    .career-box-flex {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
}

        .btn-helpline {
    display: inline-flex;
    align-items: center;
    gap: 15px; /* Space between icon and text */
    background: var(--primary);
    color: white;
    padding: 12px 28px;
    border-radius: 50px;
    text-decoration: none;
    transition: transform 0.2s, background-color 0.2s;
    box-shadow: 0 4px 15px rgba(255, 150, 53, 0.3);
}

.btn-helpline i {
    font-size: 24px;
    opacity: 0.9;
}

.btn-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.btn-text .label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    opacity: 0.9;
}

.btn-text .phone {
    font-size: 18px;
    font-weight: 700;
}

/* Hover Effect */
.btn-helpline:hover {
    background: #e6852d; /* Slightly darker orange */
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 150, 53, 0.4);
    color: white;
}

        /* Why Choose Us */
        .why-us { padding: 100px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .feature-item { display: flex; gap: 20px; margin-bottom: 30px; }
        .feature-item i { color: var(--primary); font-size: 24px; }

        /* Testimonials */
        .testimonials { padding: 100px 0; background: var(--bg-gray); }
        .review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 50px; }
        .review-card { background: white; padding: 40px; border-radius: 8px; display: flex; flex-direction: column; gap: 20px; position: relative; }
        .review-card img { width: 60px; border-radius: 50%; }
        .stars { color: var(--primary); font-size: 12px; }

        /* Newsletter */
        .newsletter { padding: 100px 0; text-align: center; }
        .form-group { max-width: 600px; margin: 30px auto; display: flex; gap: 10px; }
        .form-group input { flex: 1; padding: 15px 25px; border-radius: 50px; border: 1px solid #ddd; }
        .btn-submit { background: var(--primary); color: white; padding: 15px 40px; border-radius: 50px; border: none; font-weight: bold; cursor: pointer; }

        /* Footer */
        footer { padding: 80px 0 20px; border-top: 1px solid #eee; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 80px; margin-bottom: 50px; }
        .footer-grid h3 { font-size: 18px; margin-bottom: 20px; }
        .footer-links li { margin-bottom: 12px; }
        .footer-links a { color: var(--text-dark); font-size: 14px; }
        .social-icons { display: flex; gap: 15px; margin-top: 20px; }
        .bottom-bar { border-top: 1px solid #eee; padding-top: 20px; text-align: center; font-size: 13px; color: #888; }

        /* Introduction Section Styles */
.intro-section {
    padding: 100px 0;
    background: var(--white);
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Image takes slightly less space than text */
    gap: 60px;
    align-items: center;
    flex-direction: row !important; /* Overrides the previous global container rule */
}

.intro-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 20px 20px 0px var(--bg-gray); /* Decorative offset shadow */
}

.intro-content {
    text-align: left;
}

.intro-content .sub-label {
    color: var(--secondary);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 10px;
}

.intro-content h2 {
    font-size: 42px;
    margin-bottom: 25px;
    line-height: 1.2;
}

.intro-content p {
    font-size: 17px;
    color: var(--text-dark);
    margin-bottom: 25px;
}

.intro-features {
    padding: 0;
    margin: 0;
}

.intro-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--heading);
}

.intro-features i {
    color: var(--primary);
    font-size: 18px;
}

/* Responsive adjustment for small screens */
@media (max-width: 992px) {
    .intro-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .intro-content {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    .intro-image {
        order: 2; /* Puts image below text on mobile */
    }
}

        /* Responsive */
        @media (max-width: 992px) {
            .course-grid, .cta-grid, .footer-grid, .review-grid { grid-template-columns: 1fr; }
            .hero h1 { font-size: 40px; }
            .why-us { grid-template-columns: 1fr; }
            .nav-menu { display: none; }
        }
        .course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.course-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px; /* Set fixed minimum height */
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.course-img img {
    width: 100%;
    height: 200px;   /* Fixed image height */
    object-fit: cover; /* Prevent image distortion */
}

.course-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px;
}

.course-body p {
    flex-grow: 1;  /* Push button to bottom */
}

.btn-more {
    margin-top: auto;
    display: inline-block;

    text-decoration: none;
}
         /* Course Listing Section */
        .course-listing { padding: 80px 0; background-color: var(--bg-gray); }
        .listing-intro { text-align: center; max-width: 700px; margin: 0 auto 50px; }
        .listing-intro p { font-size: 18px; color: #666; }

        .course-grid { 
            display: grid; 
            grid-template-columns: repeat(3, 1fr); 
            gap: 30px; 
        }

        .course-card { 
            background: var(--white); 
            border-radius: 8px; 
            overflow: hidden; 
            box-shadow: 0 10px 20px rgba(0,0,0,0.05);
            transition: 0.3s;
            display: flex;
            flex-direction: column;
        }
        .course-card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }
        
        .course-img { position: relative; height: 220px; overflow: hidden; }
        .course-img img { width: 100%; height: 100%; object-fit: cover; }
        .course-badge { 
            position: absolute; top: 15px; left: 15px; 
            background: var(--secondary); color: white; 
            padding: 5px 15px; border-radius: 50px; 
            font-size: 12px; font-weight: bold; 
        }

        .course-body { padding: 30px; flex-grow: 1; display: flex; flex-direction: column; }
        .course-body h3 { font-size: 20px; margin-bottom: 15px; min-height: 50px; }
        .course-body p { font-size: 14px; color: #666; margin-bottom: 20px; }
        
        .course-meta { 
            border-top: 1px solid #eee; padding-top: 20px; 
            display: flex; justify-content: space-between; align-items: center; 
            margin-top: auto;
        }
        .duration { font-size: 13px; font-weight: 600; color: var(--text-dark); }
        .btn-view { color: var(--secondary); font-weight: 700; font-size: 14px; }
        .btn-view i { margin-left: 5px; font-size: 12px; }