/**
 * Career Guide Foundation - Original Design CSS
 * 100% EXACT copy from original HTML design
 * File: /wp-content/themes/career-guide-theme/assets/css/original-design.css
 */

:root {
            --primary-blue: #0b56a4;
            --primary-dark: #08407a;
            --secondary-orange: #ff5722;
            --text-dark: #333;
            --bg-light: #f4f6f8;
            --white: #ffffff;
            --color-primary: #fd7e14; /* Main Orange/Action Color */
            --color-secondary: #ffc107; /* Highlight/Accent Yellow */
            --color-text: #343a40;
            --color-bg-light: #f7f9fc;
            --color-border: #e0e0e0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Roboto', sans-serif;
        }

        body {
            background-color: #fff;
        }

        /* --- 1. Top News Ticker --- */
        .ticker-wrap {
            width: 100%;
            background-color: var(--primary-blue);
            color: white;
            font-size: 13px;
            overflow: hidden;
            height: 35px;
            display: flex;
            align-items: center;
        }

        .ticker {
            display: inline-block;
            white-space: nowrap;
            padding-right: 100%;
            animation: ticker 25s linear infinite;
        }

        .ticker-item {
            display: inline-block;
            padding: 0 2rem;
            font-weight: 500;
        }

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

      
        /* --- 3. Hero Section --- */
        .hero-section {
            /* * CORRECTED: Using a public URL for the background image
             * ADDED: background-attachment: fixed for parallax effect
             */
            background-image: url('https://conservexinfomedia.com/cgf/images/dsad.png'); /* Reliable background image URL */
            background-size: cover;
            background-position: center;
            background-attachment: fixed; /* Parallax effect */
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
            min-height: 500px;
            display: flex;
            align-items: center;
            padding: 50px 5%; 
            
        }
        
        /* Optional: Add an overlay for better text readability if the image is busy */
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Semi-transparent overlay to ensure text stands out */
            background-color: rgba(244, 246, 248, 0.75); 
            z-index: 0; 
        }

        .hero-container {
            display: grid;
            grid-template-columns: 1fr 1.2fr 1fr;
            align-items: center;
            gap: 30px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative; 
            z-index: 1; 
        }

        /* Left Column */
        .hero-left { text-align: left; }
        .hero-text-block {
            display: inline-block;
            font-weight: 900;
            font-size: 32px;
            line-height: 1.2;
            text-transform: uppercase;
        }
        .text-small { 
            font-size: 16px; 
            color: #555; 
            display: block; 
            margin-bottom: 10px; 
            font-weight: 700;
            letter-spacing: 1px;
        }
        .bg-white-text { 
            background: white; 
            color: var(--text-dark);
            padding: 5px 10px; 
            border: 3px solid var(--text-dark); 
            box-shadow: 4px 4px 0 var(--text-dark); 
            margin-bottom: 12px; 
            display: inline-block;
        }
        .bg-black-text { 
            background: var(--text-dark); 
            color: white; 
            padding: 8px 15px; 
            display: inline-block; 
            transform: rotate(-2deg);
        }
        

        /* Center Column */
        .hero-center {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .hero-image-frame img {
            max-width: 100%;
            height: auto;
            border-radius: 20px;
            -webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        /* Right Column */
        .hero-right {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .admission-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            text-align: center;
            box-shadow: 0 10px 25px rgba(0,0,0,0.08);
            border: 1px solid #eee;
            width: 100%;
            max-width: 320px;
        }

        .admission-card h3 {
            color: var(--primary-blue);
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 5px;
        }
        .admission-card p {
            color: #666;
            font-size: 14px;
            margin-bottom: 20px;
            line-height: 1.4;
        }
        
        .feature-list {
            list-style: none;
            text-align: left;
            margin-bottom: 20px;
        }
        .feature-list li {
            font-size: 13px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            color: #444;
        }
        .feature-list li i {
            color: #00c853;
            margin-right: 10px;
        }

        .btn-admission {
            background: var(--secondary-orange);
            color: white;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
            transition: transform 0.2s, background 0.2s;
        }
        .btn-admission:hover {
            transform: translateY(-2px);
            background: #e64a19;
        }

        /* --- 4. Stats Bar --- */
        .stats-bar {
            display: flex;
            justify-content: space-around;
            padding: 30px 5% 40px;
            background: white;
            max-width: 1200px;
            margin: 0 auto;
        }
        .stat-item {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .stat-icon { font-size: 36px; }
        .icon-smile { color: #f59e0b; }
        .icon-mentor { color: var(--secondary-orange); }
        .icon-google { color: #4285f4; }
        
        .stat-text h3 {
            font-size: 22px;
            font-weight: 800;
            margin-bottom: 2px;
            color: #222;
        }
        .stat-text p { font-size: 14px; color: #666; }

        /* --- 5. Popup Modal Styles --- */
        .modal {
            display: none; 
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6); 
            backdrop-filter: blur(4px);
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            background-color: #fefefe;
            border-radius: 12px;
            padding: 30px;
            width: 90%;
            max-width: 450px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.3);
            position: relative;
            animation: fadeIn 0.3s ease-out;
        }

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

        .close-btn {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            position: absolute;
            top: 15px;
            right: 20px;
        }

        .close-btn:hover { color: #000; }

        .modal-header {
            text-align: center;
            margin-bottom: 20px;
        }
        .modal-header h2 {
            color: var(--primary-blue);
            margin-bottom: 5px;
        }
        .modal-header p {
            font-size: 14px;
            color: #666;
        }

/* Lead modal layout */
.lead-modal-content {
  max-width: 900px;
  width: 95%;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
}

.lead-modal-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  min-height: 380px;
}

/* Left panel */
.lead-modal-left {
  background: linear-gradient(135deg, #0b56a4, #08407a);
  color: #fff;
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lead-modal-left h2 {
  font-size: 24px;
  font-weight: 800;
  margin: 10px 0 15px;
}

.lead-modal-left p {
  font-size: 14px;
  color: #dbe7ff;
  margin-bottom: 18px;
}

.mentor-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mentor-badge i {
  font-size: 14px;
}

.lead-perks {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}

.lead-perks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}

.lead-perks i {
  color: #ffc107;
  margin-top: 2px;
}

.lead-trust {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.9;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lead-trust i {
  color: #00e676;
}

/* Right panel */
.lead-modal-right {
  padding: 28px 30px 26px;
  background: #ffffff;
}

.lead-modal-right h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0b1a3d;
  margin-bottom: 4px;
}

.lead-subtitle {
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 16px;
}

.lead-form .form-row {
  margin-bottom: 10px;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d0d7e2;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  border-color: #0b56a4;
  box-shadow: 0 0 0 2px rgba(11,86,164,0.15);
}

.lead-form .form-row.split {
  display: flex;
  gap: 8px;
}

.lead-form .form-row.split select {
  max-width: 90px;
}

/* Primary CTA button */
.lead-submit-btn {
  width: 100%;
  margin-top: 6px;
  padding: 11px;
  border-radius: 999px;
  border: none;
  background: #0b56a4;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(11,86,164,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s;
}

.lead-submit-btn:hover {
  background: #08407a;
  transform: translateY(-1px);
  box-shadow: 0 10px 25px rgba(11,86,164,0.4);
}

.lead-privacy {
  margin-top: 8px;
  text-align: center;
  font-size: 11px;
  color: #6c757d;
}

.lead-privacy i {
  color: #00c853;
  margin-right: 4px;
}

/* Close icon styling stays aligned */
#leadModal .close-btn {
  color: #ffffff;
  position: absolute;
  top: 10px;
  right: 14px;
  font-size: 26px;
  z-index: 10;
}

/* Mobile stacking */
@media (max-width: 768px) {
  .lead-modal-content {
    max-width: 100%;
    border-radius: 0;
  }
  .lead-modal-grid {
    grid-template-columns: 1fr;
  }
  .lead-modal-left {
    padding: 22px 20px;
  }
  #leadModal .close-btn {
    top: 6px;
    right: 10px;
  }
}




        .form-group { margin-bottom: 15px; }
        
        .form-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 14px;
            transition: border 0.3s;
        }
        .form-input:focus {
            border-color: var(--primary-blue);
            outline: none;
        }
        textarea.form-input {
            resize: vertical;
            height: 80px;
        }

        .btn-submit {
            background-color: var(--primary-blue);
            color: white;
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
        }
        .btn-submit:hover { background-color: var(--primary-dark); }

        /* Responsive */
        @media (max-width: 900px) {
            .hero-container {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 40px;
            }
            .hero-left, .feature-list { text-align: center; }
            .feature-list li { justify-content: center; }
            header { flex-direction: column; gap: 15px; }
            .main-nav { gap: 15px; }
            .tagline { display: none; }
            .stats-bar { flex-direction: column; gap: 30px; align-items: center;}

            /* Adjust hero section for mobile with background image */
            .hero-section {
                /* Remove fixed attachment for better mobile performance */
                background-attachment: scroll; 
            }
            .hero-section::before {
                background-color: rgba(244, 246, 248, 0.85); /* Slightly darker overlay for mobile */
            }
        }
        
        /* Update/Confirm this CSS is in your <style> block */

            .btn-compare {
                background-color: var(--secondary-orange);
                color: white;
                border: none;
                padding: 8px 15px;
                border-radius: 6px;
                font-size: 13px;
                font-weight: 500;
                cursor: pointer;
                transition: background 0.2s;
            }
            .btn-compare:hover {
                background-color: #e64a19;
            }
            
            /* --- 8. Compare & Lead Form Section (New) --- */
.compare-lead-section {
    padding: 60px 5%;
    background-color: var(--bg-light); 
}

.lead-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Left (USP) is slightly wider than Right (Form) */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Left Column: USP and Logos --- */
.lead-left {
    padding-right: 20px;
}
.university-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    padding: 15px;
    margin-bottom: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.university-logos img {
    height: 30px; /* Standardized height for logos */
    opacity: 0.7;
}

.usp-block h2 {
    font-size: 26px;
    color: var(--primary-dark);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 25px;
}

.usp-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.usp-list li {
    font-size: 15px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
}

.usp-list li i {
    color: #00c853; /* Success green */
    margin-right: 10px;
    font-size: 18px;
}
.usp-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}


/* --- Right Column: Form Card --- */
.form-card-big {
    background: white;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-title-blue {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 5px;
}

.form-subtitle {
    font-size: 15px;
    color: #666;
    margin-bottom: 10px;
}

.financial-details {
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.subsidy-info { color: #00c853; font-weight: 700; }

.comparison-form .form-row {
    margin-bottom: 12px;
}

.comparison-form .form-row input,
.comparison-form .form-row select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-dark);
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    background-color: white;
}

.comparison-form .form-row.split {
    display: flex;
    gap: 10px;
}
.comparison-form .form-row.split input,
.comparison-form .form-row.split select {
    flex: 1;
}

.small-info {
    font-size: 11px;
    color: #999;
    margin-top: -8px;
    margin-bottom: 15px;
}
.view-details {
    color: var(--primary-blue);
    text-decoration: none;
}

.btn-compare-small {
    background: transparent;
    color: var(--secondary-orange);
    border: 1px solid var(--secondary-orange);
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.btn-compare-small:hover {
    background: var(--secondary-orange);
    color: white;
}

.btn-find-best {
    background: var(--secondary-orange);
    color: white;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.4);
    margin-bottom: 20px;
}
.btn-find-best:hover {
    background: #e64a19;
}

.security-text {
    text-align: center;
    font-size: 13px;
    color: #00c853;
    margin-bottom: 15px;
}
.tnc-text {
    font-size: 10px;
    color: #999;
    line-height: 1.4;
    text-align: center;
}


/* --- Responsive Adjustments (Ensure this is inside your @media (max-width: 900px) block if applicable) --- */
@media (max-width: 900px) {
    /* ... existing media queries ... */
    .lead-container {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px;
    }
    .usp-list {
        grid-template-columns: 1fr; /* Stack USP items vertically */
    }
    .lead-left {
        padding-right: 0;
    }
}
@media (max-width: 500px) {
    .comparison-form .form-row.split {
        flex-direction: column;
    }
}

/* --- New Modal Content Styles (For Two-Column Form) --- */
#leadModal .modal-content {
    width: 90%; /* Wider modal */
    max-width: 1000px;
    padding: 0; /* Remove internal padding, container handles it */
    border-radius: 15px;
    overflow: hidden; /* Important for the layout */
    animation-name: animatetop;
    animation-duration: 0.4s;
}

#leadModal .close-btn {
    color: #fff;
    opacity: 0.8;
    top: 10px;
    right: 15px;
    font-size: 30px;
    position: absolute;
    z-index: 1000;
}

.modal-inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two columns for the form content */
    height: auto;
    background: white;
}

/* --- Left Column: USP and Logos (Inside Modal) --- */
.modal-left {
    background-color: var(--bg-light); /* Light background for contrast */
    padding: 30px;
}
.modal-left .university-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}
.modal-left .university-logos img {
    height: 30px; 
    opacity: 0.8;
}

.modal-left h2 {
    font-size: 20px;
    color: var(--primary-dark);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 15px;
}
.modal-left .usp-list {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}
.modal-left .usp-list li {
    font-size: 14px;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.modal-left .usp-list li i {
    color: #00c853; 
    margin-right: 8px;
    font-size: 16px;
}
.modal-left .usp-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* --- Right Column: Form (Inside Modal) --- */
.modal-right {
    padding: 30px;
}
.form-title-blue {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-blue);
    margin-bottom: 5px;
}
.financial-details {
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}
.subsidy-info { color: #00c853; font-weight: 700; }
.comparison-form .form-row { margin-bottom: 12px; }
.comparison-form .form-row input,
.comparison-form .form-row select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-dark);
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    background-color: white;
}
.comparison-form .form-row.split { display: flex; gap: 10px; }
.comparison-form .form-row.split input,
.comparison-form .form-row.split select { flex: 1; }
.small-info { font-size: 11px; color: #999; margin-top: -8px; margin-bottom: 15px; }
.view-details { color: var(--primary-blue); text-decoration: none; }
.btn-compare-small { /* Re-using old compare button for the new one */
    background: transparent;
    color: var(--secondary-orange);
    border: 1px solid var(--secondary-orange);
    width: 100%;
    padding: 10px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    cursor: pointer;
}
.btn-find-best {
    background: var(--secondary-orange);
    color: white;
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(255, 87, 34, 0.4);
    margin-bottom: 20px;
}
.security-text { text-align: center; font-size: 13px; color: #00c853; margin-bottom: 10px; }
.tnc-text { font-size: 10px; color: #999; line-height: 1.4; text-align: center; }

/* Responsive adjustments for modal */
@media (max-width: 768px) {
    #leadModal .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        min-height: 100vh;
    }
    .modal-inner-grid {
        grid-template-columns: 1fr;
    }
    .modal-left {
        display: none; /* Hide left USP column on small screens to prioritize the form */
    }
}

/* Update the existing .btn-compare styles to look like the screenshot's 'Enquire Now' */
.course-card .btn-compare {
    /* Changing the name to .btn-enquire for clarity, but keeping the class .btn-compare 
       if you want to avoid mass HTML replacement. We will change the HTML text though. */
    background-color: var(--primary-blue); /* Blue background for 'Enquire Now' */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.course-card .btn-compare:hover {
    background-color: #004d99; /* Darker blue on hover */
}


.course-page-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* --- Left Sidebar (Navigation) --- */
        .sidebar {
            width: 250px;
            padding: 20px 0;
            background-color: #0d6efd; /* Highlighted section color */
            border-radius: 12px 0 0 12px;
        }

        .sidebar-item {
            padding: 15px 25px;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
            border-left: 5px solid transparent;
        }

        .sidebar-item.active {
            background-color: #fff;
            color: #0d6efd;
            border-left: 5px solid #ffc107; /* Highlight color for active */
        }

        .sidebar-item-desc {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
        }

        .sidebar-item.active .sidebar-item-desc {
             color: #6c757d;
        }

        /* --- Right Content (Course Grid) --- */
        .course-content {
            flex-grow: 1;
            padding: 30px;
        }

        .course-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .course-card {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            width: calc(33.33% - 13.33px); /* 3 cards per row, accounting for gap */
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            transition: transform 0.2s, box-shadow 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .course-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .card-header-info {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
            font-size: 12px;
            font-weight: 600;
            color: #6c757d;
        }
        
        .card-header-info span {
            padding: 3px 8px;
            border-radius: 4px;
            background-color: #e9ecef;
        }
        
        .card-header-info .highlight {
            background-color: #d1e7dd; /* Light green for trend/new */
            color: #0f5132;
        }

        .card-icon {
            font-size: 30px;
            color: #0d6efd;
            margin-bottom: 10px;
        }

        .course-name {
            font-size: 16px;
            font-weight: 700;
            color: #343a40;
            min-height: 40px; /* Ensure consistent height */
        }

        .enquire-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 15px;
            background-color: #ffc107; /* Primary button color (Orange/Yellow) */
            color: #212529;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .enquire-btn:hover {
            background-color: #ffda6a;
        }

        .view-all-btn-container {
            text-align: center;
            margin-top: 30px;
        }

        .view-all-btn {
            background: none;
            border: 1px solid #0d6efd;
            color: #0d6efd;
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }

        .view-all-btn:hover {
            background-color: #0d6efd;
            color: #fff;
        }
        
        
        
        .course-page-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* --- Left Sidebar (Navigation) --- */
        .sidebar {
            width: 250px;
            padding: 20px 0;
            background-color: #0d6efd; /* Primary blue for sidebar */
            border-radius: 12px 0 0 12px;
            height: fit-content;
        }

        .sidebar-item {
            padding: 15px 25px;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
            border-left: 5px solid transparent;
        }

        .sidebar-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .sidebar-item.active {
            background-color: #fff;
            color: #0d6efd;
            border-left: 5px solid #ffc107; /* Highlight color for active */
        }

        .sidebar-item-desc {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
        }

        .sidebar-item.active .sidebar-item-desc {
             color: #6c757d;
        }

        /* --- Right Content (Course Grid) --- */
        .course-content {
            flex-grow: 1;
            padding: 30px;
            position: relative; /* For placing the chat icon robot */
        }

        .course-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .course-card {
            background: #fff;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            width: calc(33.33% - 13.33px); /* 3 cards per row */
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .card-header-info {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 600;
            color: #6c757d;
            flex-wrap: wrap;
        }
        
        .card-header-info span {
            padding: 3px 6px;
            border-radius: 4px;
            background-color: #e9ecef;
            white-space: nowrap;
        }
        
        .card-header-info .highlight-green {
            background-color: #d1e7dd;
            color: #0f5132;
        }
        .card-header-info .highlight-global {
            background-color: #dae5f2;
            color: #0d6efd;
        }

        .card-icon {
            font-size: 30px;
            color: #0d6efd;
            margin-bottom: 10px;
        }

        .course-name {
            font-size: 15px;
            font-weight: 700;
            color: #343a40;
            min-height: 40px;
            line-height: 1.3;
            margin-bottom: 10px;
        }

        .enquire-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 15px;
            background-color: #0d6efd; /* Blue color for action button */
            color: #fff;
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .enquire-btn:hover {
            background-color: #0b5ed7;
        }

        .view-all-btn-container {
            text-align: center;
            margin-top: 30px;
        }

        .view-all-btn {
            background: #e9f2ff;
            border: 1px solid #0d6efd;
            color: #0d6efd;
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        
        .robot-icon {
            position: absolute;
            bottom: 20px;
            right: 0px;
            width: 80px;
            height: 80px;
            /* Placeholder for the cute robot icon */
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%230d6efd"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm4-11c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm-6 0c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1-.45-1-1-1zm6 6c-2.21 0-4-1.79-4-4h2c0 1.1.9 2 2 2s2-.9 2-2h2c0 2.21-1.79 4-4 4z"/></svg>') center/contain no-repeat;
        }
        
        .course-page-container {
            display: flex;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* --- Left Sidebar (Navigation Tabs) --- */
        .sidebar {
            width: 250px;
            padding: 20px 0;
            background-color: var(--color-primary); /* Primary Orange for sidebar */
            border-radius: 12px 0 0 12px;
        }

        .sidebar-item {
            padding: 15px 25px;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
            border-left: 5px solid transparent;
        }

        .sidebar-item:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .sidebar-item.active {
            background-color: #fff;
            color: var(--color-primary);
            border-left: 5px solid var(--color-secondary); /* Highlight color */
        }

        .sidebar-item-desc {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
        }

        .sidebar-item.active .sidebar-item-desc {
             color: #6c757d;
        }
        
        /* --- Right Content (Course Grid) --- */
        .course-content {
            flex-grow: 1;
            padding: 30px;
        }
        
        .tab-content {
            display: none; /* Hidden by default for all tabs */
        }
        
        .tab-content.active {
            display: block; /* Shown for the active tab */
        }

        .course-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
        }

        .course-card {
            background: #fff;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            width: calc(33.33% - 13.33px); /* 3 cards per row */
            padding: 15px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .card-header-info {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 10px;
            font-size: 11px;
            font-weight: 600;
            color: #6c757d;
            flex-wrap: wrap;
        }
        
        .card-header-info span {
            padding: 3px 6px;
            border-radius: 4px;
            background-color: #e9ecef;
            white-space: nowrap;
        }
        
        .card-header-info .highlight-green {
            background-color: #d1e7dd;
            color: #0f5132;
        }
        
        .card-icon {
            font-size: 30px;
            color: var(--color-primary);
            margin-bottom: 10px;
        }

        .course-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--color-text);
            min-height: 40px;
            line-height: 1.3;
            margin-bottom: 10px;
        }

        .enquire-btn {
            display: block;
            width: 100%;
            padding: 10px;
            margin-top: 15px;
            background-color: var(--color-secondary); /* Yellow button for contrast */
            color: var(--color-text);
            border: none;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .enquire-btn:hover {
            background-color: #ffda6a;
        }

        .view-all-btn-container {
            text-align: center;
            margin-top: 30px;
        }

        .view-all-btn {
            background: #fff7e6;
            border: 1px solid var(--color-primary);
            color: var(--color-primary);
            padding: 10px 25px;
            border-radius: 50px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s, color 0.3s;
        }
        
        .course-page-container {
            display: flex;
            max-width: 1400px; /* Increased max-width to comfortably fit 6 cards */
            margin: 0 auto;
            background-color: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* --- Left Sidebar (Navigation Tabs) --- */
        .sidebar {
            width: 250px;
            padding: 20px 0;
            background-color: var(--color-primary); /* PRIMARY ORANGE */
            border-radius: 12px 0 0 12px;
        }

        .sidebar-item {
            padding: 15px 25px;
            color: #fff;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s;
            border-left: 5px solid transparent;
        }

        .sidebar-item.active {
            background-color: #fff;
            color: var(--color-primary);
            border-left: 5px solid var(--color-secondary); /* Highlight color */
        }

        .sidebar-item-desc {
            display: block;
            font-size: 12px;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.8);
        }

        .sidebar-item.active .sidebar-item-desc {
             color: #6c757d;
        }
        
        /* --- Right Content (Course Grid) --- */
        .course-content {
            flex-grow: 1;
            padding: 30px;
        }
        
        .tab-content {
            display: none; 
        }
        
        .tab-content.active {
            display: block; 
        }

        .course-grid {
            display: flex;
            flex-wrap: wrap;
            gap: 15px; /* Reduced gap to fit 6 cards */
        }

        .course-card {
            background: #fff;
            border: 1px solid var(--color-border);
            border-radius: 8px;
            /* CALCULATED WIDTH FOR 6 CARDS IN A ROW: */
            width: calc(16.66% - 12.5px); 
            padding: 10px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .card-header-info {
            display: flex;
            justify-content: center;
            gap: 5px;
            margin-bottom: 5px;
            font-size: 10px; /* Smaller font for tighter space */
            font-weight: 600;
            color: #6c757d;
            flex-wrap: wrap;
        }
        
        .card-header-info span {
            padding: 2px 5px;
            border-radius: 4px;
            background-color: #e9ecef;
            white-space: nowrap;
        }

        .card-icon {
            font-size: 24px; /* Slightly smaller icons */
            color: var(--color-primary);
            margin-bottom: 5px;
        }

        .course-name {
            font-size: 13px; /* Smaller font for smaller blocks */
            font-weight: 700;
            color: var(--color-text);
            min-height: 35px;
            line-height: 1.2;
            margin-bottom: 5px;
        }

        .enquire-btn {
            display: block;
            width: 100%;
            padding: 8px 5px; /* Reduced padding */
            margin-top: 5px;
            background-color: var(--color-primary); /* ORANGE BUTTON */
            color: #fff;
            border: none;
            border-radius: 6px;
            font-size: 12px; /* Smaller button text */
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .view-all-btn {
            border: 1px solid var(--color-primary);
            color: var(--color-primary);
            /* ... rest of the styling ... */
        }
        
        /* --- POPUP STYLES (Retained and ensured Orange) --- */
        .modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.6);}
        .modal-content {background-color: #fefefe; margin: 5% auto; border-radius: 10px; width: 800px; max-width: 90%; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); display: flex; position: relative;}
        .close-btn {color: #aaa; position: absolute; top: 10px; right: 20px; font-size: 32px; font-weight: bold; cursor: pointer; z-index: 10;}
        .modal-left-panel {width: 40%; background-color: var(--color-primary); color: #fff; padding: 30px; border-radius: 10px 0 0 10px; display: flex; flex-direction: column; justify-content: space-between;}
        .feature-list li::before {content: '★'; color: var(--color-secondary); font-size: 14px; margin-right: 10px;}
        .modal-right-panel {width: 60%; padding: 30px;}
        .submit-btn {width: 100%; padding: 12px; background-color: var(--color-primary); color: #fff; border: none; border-radius: 6px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 10px; display: flex; align-items: center; justify-content: center;}
        .submit-btn:hover {background-color: #e86d0b;}
        .university-logos {display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.2);}
        .university-logos .logo-placeholder {height: 25px; width: 60px; background-color: rgba(255, 255, 255, 0.2); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff;}
        .main-headline {font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 20px;}
        .feature-list {list-style: none; padding: 0; margin-bottom: 30px;}
        .feature-list li {padding: 8px 0; display: flex; align-items: center; font-size: 14px;}
        .story-branding .image-placeholder {width: 100%; height: 150px; background-color: #f89d38; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff; text-align: center;}
        .form-title {font-size: 20px; font-weight: 700; margin-bottom: 5px; color: #333;}
        .form-subtitle {font-size: 14px; color: #6c757d; margin-bottom: 15px;}
        .form-header-details {font-size: 12px; margin-bottom: 20px; color: #6c757d;}
        .form-header-details span {color: #28a745; font-weight: 600;}
        .form-group {margin-bottom: 15px;}
        .form-group input, .form-group select {width: 100%; padding: 10px 12px; border: 1px solid #ced4da; border-radius: 6px; box-sizing: border-box; font-size: 14px; height: 40px;}
        .form-row {display: flex; gap: 15px;}
        .form-row > .form-group {flex: 1;}
        .mobile-input-group {display: flex;}
        .mobile-input-group select {width: 35%; border-right: none; border-radius: 6px 0 0 6px;}
        .mobile-input-group input {width: 65%; border-left: none; border-radius: 0 6px 6px 0;}
        .compare-faster-btn {background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; padding: 5px 15px; border-radius: 4px; font-size: 12px; font-weight: 600; display: inline-block; margin-bottom: 15px; cursor: pointer;}
        .submit-btn::after {content: '→'; margin-left: 10px; font-size: 18px;}
        .privacy-info {font-size: 12px; color: #28a745; margin-top: 15px; text-align: center; font-weight: 600;}
        .terms-text {font-size: 10px; color: #6c757d; margin-top: 15px; line-height: 1.4; text-align: center;}
  /* ==================================================================== */
/* 4. NEW SERVICE ICONS & STATS BAR STYLES */
/* ==================================================================== */
.support-platform-section {
    max-width: 1200px;
    margin: 40px auto 20px auto;
    text-align: center;
}

.support-platform-section h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 30px;
}

.service-icons-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.service-item {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    border-right: 1px solid #f0f0f0;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s;
}

.service-item:last-child {
    border-right: none;
}

.service-item i {
    font-size: 28px;
    color: var(--color-primary); /* Use Orange */
    margin-bottom: 5px;
}

.item-stat {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary); /* Orange for stats */
}

.item-name {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
    line-height: 1.2;
    min-height: 30px; /* Ensure consistent height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Status Labels */
.service-item.live::before, .service-item.new::before, .service-item.info::before {
    content: attr(class);
    position: absolute;
    top: -15px;
    right: 5px;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

.service-item.live::before {
    content: 'LIVE';
    background-color: #f75d5d; /* Reddish */
    color: #fff;
}

.service-item.new::before {
    content: 'New';
    background-color: #28a745; /* Green */
    color: #fff;
}

.service-item.info::before {
    content: 'Info';
    background-color: #007bff; /* Blue */
    color: #fff;
}

.view-all-services-btn {
    background: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    padding: 8px 30px;
    margin-top: 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

/* ==================================================================== */
/* 5. NEW FEATURED CARDS SECTION STYLES */
/* ==================================================================== */
.featured-cards-section {
    max-width: 1200px;
    margin: 40px auto 40px auto;
    text-align: center;
}

.featured-card-container {
    display: flex;
    gap: 20px;
}

.featured-card {
    flex: 1;
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border-top: 5px solid var(--color-primary); /* Orange top border */
}

.featured-card h3 {
    font-size: 18px;
    font-weight: 700;
    color: #000;
    margin-bottom: 15px;
    line-height: 1.3;
}

.card-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-content p {
    font-size: 16px;
    font-weight: 500;
    color: #6c757d;
    line-height: 1.4;
}

.highlight-orange {
    color: var(--color-primary);
    font-size: 24px;
    font-weight: 700;
    display: block;
    line-height: 1;
}

.image-placeholder-small {
    width: 100px;
    height: 100px;
    background-color: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-align: center;
    color: #aaa;
    /* Simulate the image/graphic from the screenshot */
    border: 1px dashed #ddd; 
}

.card-footer {
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: var(--color-text);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.card-footer i {
    color: var(--color-primary); /* Orange checkmark */
    margin-right: 5px;
}

/* Carousel Dots (Placeholder) */
.carousel-dots {
    margin-top: 20px;
}

.dot {
    display: inline-block;
    height: 8px;
    width: 8px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 4px;
}

.dot.active {
    background-color: var(--color-primary);
    width: 20px;
    border-radius: 4px;
}


/* Must be in your <style> block */

.featured-card-container {
    /* Enables horizontal scrolling when the combined width of cards exceeds the screen width */
    display: flex;
    gap: 20px;
    overflow-x: auto; /* <--- THIS IS CRITICAL */
    
    /* Hides the scrollbar but keeps the scrolling functionality (optional, often needed for clean design) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Optional: Hides scrollbar in Webkit browsers (Chrome, Safari) */
.featured-card-container::-webkit-scrollbar {
    display: none;
}

.featured-card {
    /* Ensures the cards don't shrink when scrolling is enabled */
    flex-shrink: 0;
    width: calc((100% - 40px) / 3); /* Adjusts for 3 cards wide on desktop */
    min-width: 300px; /* Ensures they stack neatly on smaller screens */
}
/* ==================================================================== */
/* 6. EXPERT GUIDANCE SECTION STYLES */
/* ==================================================================== */

/* Dark Blue Background Section */
.expert-guidance-section {
    background-color: #0b1a3d; /* Dark Blue from screenshot */
    padding: 60px 20px;
    color: #fff;
    text-align: center;
    position: relative; /* Needed for absolute positioning of arrows */
}

.guidance-header {
    max-width: 800px;
    margin: 0 auto 40px auto;
}

.guidance-header i {
    font-size: 24px;
    color: var(--color-primary); /* Orange */
    margin-bottom: 10px;
}

.guidance-header h3 {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 5px;
}

.guidance-header h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 10px;
    display: inline-block;
    border-bottom: 2px solid var(--color-primary); /* Orange line */
}

.guidance-header p {
    color: #b0c4de;
    font-size: 16px;
}

/* Mentor Cards Layout */
.mentor-carousel-container {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  padding-bottom: 20px;   /* only bottom padding */
  padding-left: 0;        /* no horizontal padding */
  padding-right: 0;
  scroll-behavior: smooth;
}



.mentor-card {
  background: #fff;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
  flex-shrink: 0;
  width: 250px;
  overflow: hidden;
  color: #000;
  margin-left: 0;   /* important */
}

.mentor-image-wrapper {
    position: relative;
    padding-bottom: 15px; /* Space for the bottom curve/shadow */
}

.mentor-image-wrapper img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.rating, .counseling-count {
    position: absolute;
    top: 10px;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}

.rating {
    left: 10px;
    background-color: #38c172; /* Green */
}

.counseling-count {
    right: 10px;
    background-color: #007bff; /* Blue */
}

.mentor-details {
    padding: 15px;
}

.mentor-details h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #0b1a3d;
}

.mentor-details p {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 5px;
}

.btn-consult {
    background-color: #0b1a3d; /* Dark Blue button */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    margin-top: 10px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s;
}

.btn-consult:hover {
    background-color: var(--color-primary); /* Orange on hover */
}

/* Carousel Arrows (Simple Scroll Arrows) */
.carousel-nav-arrows {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    transform: translateY(-50%);
    pointer-events: none; /* Allows clicks to pass through to the button */
    max-width: 1240px;
    left: 50%;
    transform: translate(-50%, -50%);
}

.arrow-left, .arrow-right {
    background: #fff;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 18px;
    color: #0b1a3d;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    pointer-events: auto; /* Re-enable clicks on the buttons themselves */
}



@media (max-width: 768px) {
  .service-icons-grid {
    flex-wrap: wrap;
  }

  .service-item {
    flex: 0 0 50%;     /* 2 per row on mobiles */
    border-right: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
  }

  .service-item:nth-child(2n) {
    border-right: none;
  }
}

@media (max-width: 480px) {
  .service-item {
    flex: 0 0 100%;    /* 1 per row on very small screens */
    border-right: none;
  }
}

@media (max-width: 900px) {
  .course-page-container {
    flex-direction: column;   /* sidebar on top, cards below */
  }

  .sidebar {
    width: 100%;
    border-radius: 12px 12px 0 0;
  }

  .course-content {
    padding: 20px;
  }

  .course-grid {
    justify-content: center;
  }

  .course-card {
    width: calc(50% - 15px);  /* 2 per row on tablets */
  }
}

@media (max-width: 600px) {
  .course-card {
    width: 100%;              /* 1 per row on phones */
  }
}

        
        
        /* For mentor carousel */
.mentor-carousel-container {
  overflow-x: auto;
  scrollbar-width: none;        /* Firefox */
}
.mentor-carousel-container::-webkit-scrollbar {
  display: none;                /* Chrome, Safari, Edge */
}

/* For featured cards carousel */
.featured-card-container {
  overflow-x: auto;
  scrollbar-width: none;
}
.featured-card-container::-webkit-scrollbar {
  display: none;
}



.site-footer {
  background: #0b1a3d;
  color: #dbe2ff;
  padding: 45px 5% 22px;
  margin-top: 60px;
  font-size: 14px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto 20px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.1fr;
  gap: 40px;
}

.footer-col h4 {
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 14px;
}

.footer-text {
  font-size: 13px;
  line-height: 1.6;
  color: #c0cae8;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 800;
  color: #ffffff;
}

.footer-logo i {
  font-size: 26px;
  color: var(--color-primary);
}

.footer-logo span {
  font-size: 18px;
}

.footer-social {
  margin-top: 14px;
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 13px;
  transition: background 0.2s, transform 0.15s, border-color 0.2s;
}

.footer-social a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 6px;
}

.footer-links a {
  color: #c0cae8;
  text-decoration: none;
  font-size: 13px;
  transition: color 0.2s;
}

.footer-links a:hover {
  color: var(--color-secondary);
}

.footer-contact p {
  margin: 0 0 4px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-contact i {
  color: var(--color-secondary);
}

.footer-cta-btn {
  margin-top: 10px;
  padding: 9px 16px;
  border-radius: 999px;
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 14px rgba(253,126,20,0.4);
}

.footer-cta-btn:hover {
  background: #e86d0b;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(253,126,20,0.5);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #9aa5d1;
}

.footer-bottom a {
  color: #9aa5d1;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--color-secondary);
}

/* Responsive footer */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 25px;
  }
}

@media (max-width: 600px) {
  .footer-inner {
    grid-template-columns: 1fr;
  }
  .site-footer {
    padding: 30px 6% 18px;
  }
}