:root {
    /* Primary Palette */
    --primary-color: #2563eb;
    /* Blue-600 */
    --primary-hover: #1d4ed8;
    /* Blue-700 */
    --primary-dark: #1e3a8a;
    /* Blue-900 */

    /* Text Colors */
    --heading-color: #111827;
    /* Gray-900 */
    --text-dark: #374151;
    /* Gray-700 */
    --text-gray: #6b7280;
    /* Gray-500 */
    --text-light: #9ca3af;
    /* Gray-400 */

    /* Backgrounds */
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    /* Gray-50 */
    --bg-accent: #eff6ff;
    /* Blue-50 */

    /* Accents & UI */
    --accent-color: #f59e0b;
    /* Amber-500 (kept for subtle highlights) */
    --border-color: #e5e7eb;
    /* Gray-200 */

    /* Shadows */
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --hover-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    background-color: var(--bg-white);
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

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

ul {
    list-style: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

.btn {
    display: inline-block;
    padding: 0.8rem 1.75rem;
    border-radius: 5px;
    font-weight: 500;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid #ffffff;
    color: #ffffff;
}

.btn-secondary:hover {
    background-color: #ffffff;
    color: var(--primary-color);
}

.btn-block {
    display: block;
    width: 100%;
}

.section {
    padding: 6rem 0;
}

.section-header {
    text-align: center;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.section-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.section-desc {
    color: var(--text-gray);
    font-size: 1.125rem;
    line-height: 1.75;
}

/* Navigation */
.navbar {
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 80px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--primary-color);
}

.logo img {
    height: 40px;
    border-radius: 50%;
    /* Ensuring logo fits circle if needed */
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links li a {
    font-weight: 500;
    transition: color 0.3s;
    font-size: 0.95rem;
}

.nav-links li a:hover {
    color: var(--primary-color);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--primary-color);
}

/* Hero Section */
.hero {
    padding-top: 140px;
    padding-bottom: 100px;
    background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(37, 99, 235, 0.85) 100%), url('students_seminar.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-title .highlight {
    color: var(--accent-color);
    position: relative;
    white-space: normal;
}

.hero-subtitle {
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 2rem;
    max-width: 600px;
}

.hero-stats-preview {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.stat-pill {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 50px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-pill i {
    color: var(--accent-color);
}

.hero-cta {
    display: flex;
    gap: 1rem;
}

.hero-visual {
    position: relative;
    height: auto;
    min-height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}

.blob-1 {
    width: 300px;
    height: 300px;
    background: var(--primary-color);
    opacity: 0.4;
    top: 10%;
    right: 10%;
    animation: float 6s ease-in-out infinite;
}

.blob-2 {
    width: 250px;
    height: 250px;
    background: var(--accent-color);
    opacity: 0.2;
    bottom: 10%;
    left: 20%;
    animation: float 8s ease-in-out infinite reverse;
}

.hero-card {
    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.5rem;
    border-radius: 20px;
    max-width: 350px;
    width: 100%;
    text-align: center;
    z-index: 2;
    transform: rotate(-3deg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.hero-card .icon-box {
    background: #ffffff;
    color: var(--primary-color);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.hero-card h3 {
    font-family: 'Outfit', sans-serif;
    margin-bottom: 0.5rem;
}

.hero-card p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Keyframes */
@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* Programs Section */
.programs {
    background-color: var(--bg-light);
}

/* Program Categories - Stacked Layout */
.program-category {
    margin-bottom: 4rem;
}

.program-category:last-child {
    margin-bottom: 0;
}

.category-title {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 2rem;
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    left: 50%;
    transform: translateX(-50%);
}

.category-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--accent-color);
    margin: 0.5rem auto 0;
    border-radius: 2px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.program-card {
    background: var(--bg-white);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.program-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
    border-color: var(--primary-color);
}

.program-card.featured {
    background: linear-gradient(to bottom right, #ffffff, #f0fdfa);
    border: 1px solid #ccfbf1;
}

.card-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    transition: var(--transition);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
}

.card-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 50%);
    pointer-events: none;
}

.card-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 2px;
    transition: var(--transition);
}

/* Category Specific Icon Styles */
.category-students .card-icon {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    color: #2563eb;
    border-color: #dbeafe;
}

.category-teachers .card-icon {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    color: #16a34a;
    border-color: #dcfce7;
}

.category-management .card-icon {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #ea580c;
    border-color: #ffedd5;
}

.program-card:hover .card-icon {
    transform: scale(1.1) rotate(-5deg);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.12);
}

.program-card:hover .card-icon svg {
    transform: scale(1.1) rotate(5deg);
}

.program-card h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 1.35rem;
    color: var(--heading-color);
}

.program-highlight {
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--accent-color);
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.program-features {
    margin-top: 1.5rem;
}

.program-features li {
    display: flex;
    align-items: start;
    gap: 10px;
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
    color: var(--text-gray);
}

.program-features li i {
    color: var(--primary-color);
    margin-top: 4px;
    font-size: 0.8rem;
}

/* Impact Section */
.impact {
    background: var(--primary-dark);
    color: #ffffff;
    padding: 5rem 0;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 3rem;
    text-align: center;
}

.stat-item h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-color);
    line-height: 1;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.stat-item span {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-color);
}

.stat-item p {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* About Section */
.about-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.lead {
    font-size: 1.35rem;
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.about-text p {
    color: var(--text-gray);
    margin-bottom: 1.5rem;
}

.founder-note {
    background: #f1f5f9;
    padding: 1.5rem;
    border-left: 4px solid var(--accent-color);
    border-radius: 4px;
    margin-top: 2rem;
}

.founder-note blockquote {
    font-style: italic;
    color: var(--text-dark);
}

.about-features {
    display: grid;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.feature-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    background: var(--bg-accent);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.feature-item h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--primary-color);
}

.feature-item p {
    font-size: 0.9rem;
    color: var(--text-gray);
    margin: 0;
}

/* Why Choose Us */
.why-us {
    background-color: var(--bg-light);
}

.reasons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.reason-card {
    text-align: center;
    background: var(--bg-white);
    padding: 2.5rem 2rem;
    border-radius: 50px 0 50px 0;
    box-shadow: var(--card-shadow);
    transition: var(--transition);
}

.reason-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hover-shadow);
}

.reason-card i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1.5rem;
}

.reason-card h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.reason-card p {
    color: var(--text-gray);
    font-size: 0.95rem;
}

/* Testimonials */
.testimonials {
    background-color: var(--bg-white);
}

.testimonial-slider {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.testimonial-card {
    background: var(--bg-white);
    padding: 2.5rem;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.quote-icon {
    color: #e2e8f0;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.feedback {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-style: italic;
    margin-bottom: 1.5rem;
}

.author h5 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.2rem;
}

.author p {
    font-size: 0.85rem;
    color: var(--text-gray);
}

/* Contact Section */
.contact {
    /*background: linear-gradient(to right, #0f172a, #1e293b);*/
    color: var(--white);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    align-items: center;
}

.contact-info h2 {
    color: var(--white);
    font-size: 3rem;
    margin-bottom: 1rem;
}

.contact-info>p {
    margin-bottom: 3rem;
    font-size: 1.2rem;
    opacity: 0.8;
}

.info-item {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.info-item i {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: var(--accent-color);
}

.contact-form {
    background: var(--white);
    padding: 3rem;
    border-radius: 20px;
    color: var(--text-dark);
}

.contact-form h3 {
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-family: 'Outfit', sans-serif;
}

.form-group {
    position: relative;
    /* Essential for floating label positioning */
    margin-bottom: 1.5rem;
}

.contact-form input,
.contact-form select {
    width: 100%;
    padding: 12px 15px;
    /* Adjust padding for visual comfort */
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
    background: transparent;
    /* Needed for the effect */
    height: 50px;
    /* Ensure consistent height */
}

.contact-form input:focus,
.contact-form select:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.1);
}

/* Floating Label Styles */
.contact-form label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--white);
    padding: 0 5px;
    color: var(--text-gray);
    font-size: 1rem;
    transition: var(--transition);
    pointer-events: none;
    /* Allows clicking on the input through the label */
}

/* Move label up when input has focus or has content (using :not(:placeholder-shown)) */
.contact-form input:focus~label,
.contact-form input:not(:placeholder-shown)~label {
    top: 0;
    font-size: 0.85rem;
    color: var(--secondary-color);
    font-weight: 500;
}

/* Optional: Handling Select Element Label
   Select elements usually have a value selected by default or specific behavior.
   For consistency, apply similar logic or keep label static if simpler.
   Here, applying static label style for simplicity or adjusting if using a placeholder option.
*/
.contact-form select {
    color: var(--text-dark);
}

.contact-form select:required:invalid {
    color: var(--text-gray);
}

/* No floating label for select in this simple implementation, typically handled differently or kept static.
   If using the floating label code above for select, ensure it handles the 'value' state correctly.
   For simplicity, let's remove the floating label effect for Select and keep it static or adjust:
*/
.form-group:has(select) label {
    /* Resetting for select if strictly following the pattern is tricky without JS or empty value hacks */
    display: none;
    /* Hide floating label for select, use placeholder */
}


/* Footer */
footer {
    background: #111827;
    color: #ffffff;
    padding: 3rem 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.social-links {
    display: flex;
    gap: 1.5rem;
}

.social-links a {
    color: #ffffff;
    font-size: 1.25rem;
    transition: var(--transition);
}

.social-links a:hover {
    color: var(--accent-color);
}

@media (max-width: 768px) {
    .header-content h1 {
        font-size: 2.5rem;
    }

    .nav-links {
        display: none;
    }

    .about-container,
    .hero-content,
    .contact-container,
    .footer-content {
        grid-template-columns: 1fr;
        flex-direction: column;
        text-align: center;
    }

    .hero-stats-preview {
        justify-content: center;
    }

    .hero-cta {
        justify-content: center;
    }

    .founder-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .founder-content .signature {
        justify-content: center;
    }
}


/* New Sections Styling */

/* Impact Bar */
.impact-bar {
    background: var(--primary-dark);
    color: #ffffff;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.impact-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('path/to/pattern.png') repeat;
    /* Optional subtle pattern */
    opacity: 0.05;
    pointer-events: none;
}

/* Founder Section */
.founder {
    background-color: var(--bg-white);
    overflow: hidden;
}

.founder-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    align-items: center;
}

.founder-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--hover-shadow);
}

.founder-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.founder-image:hover img {
    transform: scale(1.03);
}

.founder-content .section-title {
    text-align: left;
    margin-bottom: 2rem;
}

.founder-bio p {
    margin-bottom: 1.5rem;
    color: var(--text-gray);
    font-size: 1.1rem;
}

.founder-bio .lead {
    color: var(--primary-color);
    font-weight: 600;
    font-style: italic;
    font-size: 1.3rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
}

.signature {
    margin-top: 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.signature p {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-color);
    color: var(--heading-color);
    margin: 0;
}

/* Responsive */
@media (max-width: 900px) {
    .h1 {
        font-size: 3rem;
    }

    .hero-content,
    .about-container,
    .contact-container {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hero-visual {
        order: -1;
        height: 300px;
    }

    .nav-links {
        display: none;
        /* Hidden by default on mobile */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: var(--bg-white);
        flex-direction: column;
        padding: 2rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-title {
        font-size: 3rem;
    }

    .stat-item h2,
    .stat-item span {
        font-size: 2.5rem;
    }
}

@media (max-width: 600px) {
    .container {
        padding: 0 1.5rem;
    }

    .section {
        padding: 4rem 0;
    }

    .contact-form {
        padding: 2rem 1.5rem;
    }

    .contact-info h2 {
        font-size: 2.25rem;
    }

    /* Fix for long email addresses causing overflow */
    .info-item>div {
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .hero-title {
        font-size: 2.5rem;
    }
}