/* Add to your existing styles.css */

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 200px;
    display: none;
    list-style: none;
    padding: 10px 0;
    border-radius: 5px;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 8px 20px;
}

.dropdown-menu a {
    color: #333;
    display: block;
}

.dropdown-menu a:hover {
    color: #e67e22;
}

/* Page Header */
.page-header {
    height: 400px;
    display: flex;
    align-items: center;
    text-align: center;
    color: white;
    margin-top: 80px;
    background-size: cover !important;
    background-position: center !important;
}

.page-header h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.page-header p {
    font-size: 1.2rem;
    opacity: 0.9;
}

/* Intro Section */
.intro-section {
    padding: 80px 0;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.intro-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Program Levels */
.program-levels {
    padding: 80px 0;
    background: #f9f9f9;
}

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

.level-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.level-icon {
    font-size: 3rem;
    margin-bottom: 20px;
}

.level-features {
    list-style: none;
    margin-top: 20px;
    text-align: left;
}

.level-features li {
    padding: 5px 0;
    border-bottom: 1px solid #eee;
}

/* Benefits Section */
.benefits-section {
    padding: 80px 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    text-align: center;
}

.benefit-item i {
    font-size: 2.5rem;
    color: #e67e22;
    margin-bottom: 15px;
}

/* Schedule Section */
.schedule-section {
    padding: 80px 0;
    background: #f9f9f9;
}

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

.schedule-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.schedule-card.highlight {
    transform: scale(1.05);
    border: 2px solid #e67e22;
}

.price {
    font-size: 1.5rem;
    color: #e67e22;
    font-weight: bold;
    margin-top: 15px;
}

/* CTA Section */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    text-align: center;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 15px;
}

.cta-section p {
    margin-bottom: 30px;
    font-size: 1.2rem;
}

/* Instruments Grid */
.instruments-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 40px 0;
}

.instrument-card {
    background: #f9f9f9;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.instrument-card:hover {
    transform: translateY(-5px);
    background: #e67e22;
    color: white;
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 40px 0;
}

.value {
    background: #f9f9f9;
    padding: 30px;
    text-align: center;
    border-radius: 10px;
    font-size: 1.2rem;
    font-weight: bold;
}

/* Instructor Grid */
.instructor-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px 0;
}

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

.instructor-card img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
}

.instructor-card h4 {
    color: #2c3e50;
    margin-bottom: 5px;
}

.instructor-card p {
    color: #666;
}

/* Mobile Responsive Updates */
@media (max-width: 768px) {
    .intro-grid,
    .levels-grid,
    .benefits-grid,
    .schedule-grid,
    .instruments-grid,
    .values-grid,
    .instructor-grid {
        grid-template-columns: 1fr;
    }
    
    .schedule-card.highlight {
        transform: scale(1);
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .dropdown-menu {
        position: static;
        display: none;
        background: #f9f9f9;
        box-shadow: none;
    }
    
    .dropdown:hover .dropdown-menu {
        display: none; /* Disable hover on mobile */
    }
}

/* Navigation Bar Adjustments */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-menu a {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #e67e22;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    min-width: 200px;
    display: none;
    list-style: none;
    padding: 10px 0;
    border-radius: 5px;
    z-index: 1001;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li {
    padding: 8px 20px;
}

.dropdown-menu a {
    color: #333;
    display: block;
}

.dropdown-menu a:hover {
    color: #e67e22;
    background: #f9f9f9;
}

/* Remove the old nav-buttons styles */
.nav-buttons {
    display: none; /* This hides any remaining button styles */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        padding: 1rem;
    }
    
    .nav-menu {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
        margin: 1rem 0;
        width: 100%;
    }
    
    .dropdown-menu {
        position: static;
        display: none;
        background: #f9f9f9;
        box-shadow: none;
    }
    
    .dropdown:hover .dropdown-menu {
        display: none; /* Disable hover on mobile */
    }
    
    /* Optional: Add a click handler for mobile */
    .dropdown.active .dropdown-menu {
        display: block;
    }
}
/* Add to your styles.css */

/* Logo Container */
.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 15px; /* Space between logo and text */
}

/* Logo Image */
.logo-img {
    height: 60px;  /* Adjust this size as needed */
    width: auto;   /* Keeps the image proportions */
    max-width: 100%;
}

/* Logo Text */
.logo-text {
    font-size: 1.8rem;  /* Bigger text */
    font-weight: 700;
    color: #2c3e50;  /* Dark blue color */
    font-family: 'Playfair Display', serif;
    white-space: nowrap; /* Prevents text from wrapping */
}


/* Navigation Bar Adjustments */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 5%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    min-height: 80px; /* Tall enough for logo */
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .logo a {
        flex-direction: column;
        text-align: center;
        gap: 5px;
    }
    
    .logo-img {
        height: 50px; /* Slightly smaller on mobile */
    }
    
    .logo-text {
        font-size: 1.3rem;
        white-space: normal; /* Allows wrapping on mobile */
    }
    
    .navbar {
        flex-direction: column;
        padding: 1rem;
        min-height: auto;
    }
}
/* Add to your styles.css */

/* Logo Text Styling */
.logo-text {
    font-size: 1.8rem;
    font-family: 'Playfair Display', serif;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* Zimba - Black and Bold */
.zimba-black {
    color: #000000;  /* Pure black */
    font-weight: 900; /* Extra bold */
    font-family: 'Playfair Display', serif;
}

/* International - Keep your orange accent */
.international-orange {
    color: #e67e22;  /* Your orange color */
    font-weight: 500; /* Medium weight - lighter as accent */
    font-family: 'Playfair Display', serif;
}

/* Academy - Black and Bold */
.academy-black {
    color: #000000;  /* Pure black */
    font-weight: 900; /* Extra bold */
    font-family: 'Playfair Display', serif;
}
/* Add to your styles.css */

/* Contact Page Styles */
.contact-info-section {
    padding: 80px 0;
    background: #fff;
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
}

.contact-card {
    background: #f9f9f9;
    padding: 40px 30px;
    text-align: center;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.contact-icon {
    font-size: 3rem;
    color: #e67e22;
    margin-bottom: 20px;
}

.contact-card h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.contact-detail {
    margin: 10px 0;
}

.contact-link {
    color: #333;
    text-decoration: none;
    font-size: 1.1rem;
    transition: color 0.3s;
    display: inline-block;
    padding: 5px 0;
}

.contact-link:hover {
    color: #e67e22;
}

.contact-note {
    font-size: 0.9rem;
    color: #888;
    margin-top: 10px;
}

/* Location Section */
.location-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}

.google-map {
    display: block;
    width: 100%;
    height: 450px;
}

.location-link-container {
    text-align: center;
    margin-top: 30px;
}

.location-link-btn {
    display: inline-block;
    background: #e67e22;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    transition: background 0.3s, transform 0.3s;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
}

.location-link-btn i {
    margin-right: 10px;
}

.location-link-btn:hover {
    background: #d35400;
    transform: scale(1.05);
}

.location-address {
    margin-top: 20px;
    color: #666;
    font-size: 1.1rem;
}

/* Contact Form Section */
.contact-form-section {
    padding: 80px 0;
    background: #fff;
}

.form-container {
    max-width: 700px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 20px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #e67e22;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    cursor: pointer;
    border: none;
}

/* Footer Social Links */
.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    color: white;
    transition: background 0.3s;
}

.social-links a:hover {
    background: #e67e22;
}

/* Footer Contact Links */
.footer-contact a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-contact a:hover {
    color: #e67e22;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .form-container {
        padding: 30px 20px;
    }
    
    .google-map {
        height: 300px;
    }
    
    .location-link-btn {
        padding: 12px 20px;
        font-size: 1rem;
    }
}
/* Add to your existing styles.css */

/* Hero Section with Background Image */
.hero {
    /* Image with dark overlay */
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url('images/hero-bg.jpg');
    
    /* Image settings */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: scroll;  /* Change to 'fixed' for parallax effect */
    
    /* Layout */
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* Text color */
    color: white;
    
    /* Adjust for fixed navbar */
    margin-top: -80px;
    padding-top: 80px;  /* Compensates for negative margin */
    
    /* Animation for smooth loading */
    transition: background-image 0.5s ease;
}

/* Hero content container */
.hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    z-index: 2;  /* Ensures content is above background */
    position: relative;
}

/* Headings */
.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);  /* Makes text readable */
}

.tagline {
    font-size: 2rem;
    color: #e67e22;
    margin-bottom: 20px;
    font-style: italic;
    font-weight: 700;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Paragraph */
.hero-content p {
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.6;
    max-width: 700px;
    margin: 20px auto;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

/* Buttons container */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

/* Button styles */
.btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Primary button */
.btn-large:first-child {
    background-color: #e67e22;
    color: white;
    border: 2px solid #e67e22;
}

.btn-large:first-child:hover {
    background-color: #d35400;
    border-color: #d35400;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(230, 126, 34, 0.4);
}

/* Secondary button */
.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background-color: white;
    color: #2c3e50;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero h1 {
        font-size: 2.5rem;
    }
    
    .tagline {
        font-size: 1.5rem;
    }
    
    .hero-content p {
        font-size: 1.2rem;
        padding: 0 20px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }
    
    .btn-large {
        width: 100%;
    }
    
    /* Disable parallax on mobile for better performance */
    .hero {
        background-attachment: scroll;
    }
}

.hero-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.hero h1 {
    font-size: 3.5rem;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.tagline {
    font-size: 2rem;
    color: #e67e22;
    margin-bottom: 20px;
    font-style: italic;
    font-weight: 700;
}

/* /* ===== WHY CHESS - BEAUTIFUL CENTERED DESIGN ===== */
.why-chess {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background: #1a1515;
    min-height: 800px;
    display: flex;
    align-items: center;
}

/* Slideshow Background */
.chess-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    z-index: 1;
}

/* CSS-Only Slideshow Animation */
.chess-slide:nth-child(1) {
    animation: slideShow 12s infinite;
    animation-delay: 0s;
}

.chess-slide:nth-child(2) {
    animation: slideShow 12s infinite;
    animation-delay: 4s;
}

.chess-slide:nth-child(3) {
    animation: slideShow 12s infinite;
    animation-delay: 8s;
}

/* PAUSE ON SCROLL - This is the magic! */
.why-chess:has(:root) {
    /* Default - animation runs */
}

body:has(:target) .why-chess .chess-slide,
body:active .why-chess .chess-slide {
    /* Optional: pause on click/tap */
}

/* Pause animation when ANY scrolling happens */
body:has(.why-chess:hover) .chess-slide {
    /* Uncomment below if you want pause on hover instead */
    /* animation-play-state: paused; */
}

/* This is the key part - JavaScript will add this class */
.why-chess.paused .chess-slide {
    animation-play-state: paused;
}

@keyframes slideShow {
    0%, 100% { 
        opacity: 0; 
    }
    25% { 
        opacity: 1; 
    }
    33% { 
        opacity: 1; 
    }
    58% { 
        opacity: 0; 
    }
}

/* Content Container */
.why-chess .container {
    position: relative;
    z-index: 10;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Section Header */
.section-header {
    text-align: center;
    margin-bottom: 50px;
    opacity: 0;
    animation: fadeInUp 1s ease forwards;
}

.subtitle {
    display: block;
    color: #e67e22;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 500;
}

.section-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.section-title .highlight {
    color: #e67e22;
    position: relative;
    display: inline-block;
}

.section-title .highlight::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(230, 126, 34, 0.3);
    z-index: -1;
}

.title-underline {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.underline-orange {
    width: 50px;
    height: 3px;
    background: #e67e22;
    border-radius: 3px;
}

.underline-white {
    width: 30px;
    height: 3px;
    background: white;
    border-radius: 3px;
}

/* Main Content Card */
.why-chess-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 50px;
    margin-bottom: 50px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    border: 1px solid rgba(230, 126, 34, 0.3);
    text-align: center;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0;
    animation: fadeInUp 1s ease 0.2s forwards;
}

.quote-icon {
    margin-bottom: 20px;
}

.quote-icon i {
    font-size: 3rem;
    color: #e67e22;
    opacity: 0.3;
}

.main-quote {
    font-size: 1.8rem;
    font-style: italic;
    color: #2c3e50;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
    line-height: 1.4;
}

.why-chess-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #555;
    max-width: 800px;
    margin: 0 auto;
}

.text-highlight {
    color: #e67e22;
    font-weight: 600;
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-bottom: 60px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.skill-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(230, 126, 34, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: fadeInUp 1s ease 0.4s forwards;
}

.skills-grid .skill-card:nth-child(2) {
    animation-delay: 0.6s;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(230, 126, 34, 0.1), transparent);
    transition: left 0.5s ease;
}

.skill-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230, 126, 34, 0.3);
    border-color: #e67e22;
}

.skill-card:hover::before {
    left: 100%;
}

.card-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon i {
    font-size: 3rem;
    color: #e67e22;
    position: relative;
    z-index: 2;
}

.icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.skill-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.skill-card p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.card-footer {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(230, 126, 34, 0.2);
}

.stat {
    font-size: 2rem;
    font-weight: 800;
    color: #e67e22;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Feature Badges */
.feature-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    opacity: 0;
    animation: fadeInUp 1s ease 0.8s forwards;
}

.badge {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 10px 25px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e67e22;
    transition: all 0.3s ease;
}

.badge:hover {
    background: #e67e22;
    color: white;
    transform: scale(1.05);
}

.badge i {
    color: #e67e22;
    transition: all 0.3s ease;
}

.badge:hover i {
    color: white;
}

.badge span {
    font-weight: 500;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.5;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .why-chess {
        padding: 60px 0;
    }
    
    .section-title {
        font-size: 2.5rem;
    }
    
    .main-quote {
        font-size: 1.3rem;
    }
    
    .why-chess-card {
        padding: 30px 20px;
    }
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .badge {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
}

/* Benefits Slider */
.benefits-slider-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.benefit-slide {
    background: white;
    padding: 40px 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.benefit-slide i {
    font-size: 3rem;
    color: #e67e22;
    margin-bottom: 20px;
}

.benefit-slide h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #2c3e50;
}

.benefit-slide p {
    color: #666;
    line-height: 1.6;
}

/* Zimba Notch */
.zimba-notch {
    padding: 80px 0;
    background: #fff;
}

.notch-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.notch-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
}

.notch-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Coaches Section */
.coaches-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.coaches-section .section-title {
    color: white;
}

.coach-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding-bottom: 20px;
}

.coach-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.coach-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.coach-card:hover .coach-image img {
    transform: scale(1.1);
}

.coach-card h3 {
    color: #2c3e50;
    margin: 15px 0 5px;
    font-size: 1.3rem;
}

.coach-card p {
    color: #666;
    margin-bottom: 15px;
}

.coach-social {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.coach-social a {
    color: #e67e22;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.coach-social a:hover {
    color: #2c3e50;
}

/* Gallery Section */
.gallery-section {
    padding: 80px 0;
    background: #f9f9f9;
}

.gallery-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.gallery-item img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* Community Program */
.community-program {
    padding: 80px 0;
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    text-align: center;
}

.community-program .section-title {
    color: white;
}

.community-program p {
    font-size: 1.2rem;
    max-width: 800px;
    margin: 0 auto 50px;
}

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

.program-card {
    background: rgba(255,255,255,0.1);
    padding: 40px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s;
}

.program-card:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.2);
}

.program-card i {
    font-size: 3rem;
    margin-bottom: 15px;
}

.program-card h3 {
    font-size: 1.3rem;
}

/* Music Academy */
.music-academy {
    padding: 80px 0;
    background: #fff;
}

.music-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.music-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
}

.music-text p:first-child {
    font-style: italic;
    color: #e67e22;
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.music-image img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Public Speaking */
.public-speaking {
    padding: 80px 0;
    background: linear-gradient(135deg, #3498db, #2980b9);
    color: white;
    text-align: center;
}

.public-speaking .section-title {
    color: white;
}

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

.speaking-card {
    background: rgba(255,255,255,0.1);
    padding: 40px 20px;
    border-radius: 10px;
    backdrop-filter: blur(10px);
    transition: transform 0.3s;
}

.speaking-card:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.2);
}

.speaking-card i {
    font-size: 3rem;
    margin-bottom: 15px;
}

/* Sportsmanship */
.sportsmanship {
    padding: 80px 0;
    background: #f9f9f9;
    text-align: center;
}

.sportsmanship p {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
}

.sportsmanship strong {
    color: #e67e22;
}

/* Location Contact */
.location-contact {
    padding: 80px 0;
    background: #fff;
}

.contact-location-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
}

.location-info h3,
.contact-info h3 {
    font-size: 1.8rem;
    color: #2c3e50;
    margin-bottom: 30px;
}

.map-container {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin: 20px 0;
}

.contact-details p {
    margin: 15px 0;
    font-size: 1.1rem;
}

.contact-details i {
    width: 30px;
    color: #e67e22;
    font-size: 1.3rem;
}

.contact-details a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s;
}

.contact-details a:hover {
    color: #e67e22;
}

/* Orange text for International in hero */
.orange-text {
    color: #e67e22;  /* Orange color */
    font-weight: 700;  /* Makes it bold */
}
/* Mobile responsive */
@media (max-width: 768px) {
    .orange-text {
        display: inline-block;  /* Keeps background working on mobile */
        margin: 5px 0;  /* Adjust spacing for mobile */
    }
}
/* Button Base Styles */
.btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 50px;  /* Rounded buttons */
    font-weight: 600;
    transition: all 0.3s ease;  /* Smooth transition for hover */
    cursor: pointer;
    border: none;
}

/* Large Button Variant */
.btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
}

/* Primary Button (Explore Programs) */
.btn-primary, 
.btn-large:not(.btn-secondary) {  /* This targets the first button */
    background-color: #e67e22;
    color: white;
    border: 2px solid #e67e22;
}

/* Primary Button Hover Effect */
.btn-primary:hover,
.btn-large:not(.btn-secondary):hover {
    background-color: #d35400;  /* Darker orange on hover */
    border-color: #d35400;
    transform: translateY(-3px);  /* Lifts up slightly */
    box-shadow: 0 10px 20px rgba(230, 126, 34, 0.4);  /* Orange glow shadow */
}

/* Secondary Button (Contact Us) */
.btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
}

/* Secondary Button Hover Effect */
.btn-secondary:hover {
    background-color: white;
    color: #2c3e50;  /* Dark blue text */
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.2);  /* White glow */
}

/* Hero Buttons Container */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

/* Active/Click Effect */
.btn:active {
    transform: translateY(-1px);  /* Slight press effect */
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-5px);  /* Slides up 5px */
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}
/* Why Chess Section with Slideshow */
.why-chess {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: #f9f9f9;
}

/* Slideshow Background */
.chess-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 1;
}

.chess-slide.active {
    opacity: 1;
}

/* Content - sits above slides */
.why-chess .container {
    position: relative;
    z-index: 3;
}

/* Make cards slightly transparent to see background */
.why-chess .skill-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(230, 126, 34, 0.2);
    transition: all 0.3s ease;
}

.why-chess .skill-card:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.2);
}

.why-chess .why-chess-text {
    background: rgba(255, 255, 255, 0.9);
    padding: 30px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    margin-bottom: 40px;
}

/* Slideshow Dots */
.chess-slide-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}

.chess-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid #e67e22;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chess-dot.active {
    background: #e67e22;
    transform: scale(1.2);
    box-shadow: 0 0 15px #e67e22;
}

.chess-dot:hover {
    background: #e67e22;
}
/* Add to your styles.css */

/* Animation for slides - KEEP THIS */
@keyframes slideAnimation {
    0%, 100% { opacity: 0; }
    33% { opacity: 1; }
    66% { opacity: 0; }
}

.chess-slide:nth-child(1) {
    animation: slideAnimation 9s infinite;
    animation-delay: 0s;
}

.chess-slide:nth-child(2) {
    animation: slideAnimation 9s infinite;
    animation-delay: 3s;
}

.chess-slide:nth-child(3) {
    animation: slideAnimation 9s infinite;
    animation-delay: 6s;
}

/* Pause animation when scrolling */
.why-chess.paused .chess-slide {
    animation-play-state: paused;
}

/* Style for dots - make them visible but auto-working */
.chess-dot {
    width: 12px;
    height: 12px;
    background: rgba(255,255,255,0.5);
    border: 2px solid #e67e22;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chess-dot.active {
    background: #e67e22;
    transform: scale(1.2);
    box-shadow: 0 0 15px #e67e22;
}
/* ===== PROFESSIONAL BENEFITS SECTION ===== */
.benefits-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

/* Section Header */
.benefits-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.benefits-section .subtitle {
    display: block;
    color: #e67e22;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 600;
}

.benefits-section .section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.benefits-section .highlight {
    color: #e67e22;
    position: relative;
    display: inline-block;
}

.benefits-section .section-description {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

/* Benefits Grid */
.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

/* Benefit Card */
.benefit-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 126, 34, 0.1);
}

.benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #e67e22;
    transition: height 0.3s ease;
}

.benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230, 126, 34, 0.15);
    border-color: rgba(230, 126, 34, 0.3);
}

.benefit-card:hover::before {
    height: 100%;
}

/* Benefit Icon */
.benefit-icon {
    width: 70px;
    height: 70px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    background: #e67e22;
    transform: scale(1.1);
}

.benefit-icon i {
    font-size: 2rem;
    color: #e67e22;
    transition: all 0.3s ease;
}

.benefit-card:hover .benefit-icon i {
    color: white;
}

/* Benefit Content */
.benefit-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.benefit-card p {
    color: #6c757d;
    line-height: 1.7;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

/* Benefit Stats */
.benefit-stats {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #e67e22;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.85rem;
    color: #adb5bd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Key Takeaways */
.key-takeaways {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 60px;
    padding: 40px;
    background: white;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.takeaway-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: #f8f9fa;
    border-radius: 40px;
    transition: all 0.3s ease;
}

.takeaway-item:hover {
    background: #e67e22;
    transform: scale(1.05);
}

.takeaway-item i {
    color: #e67e22;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.takeaway-item:hover i {
    color: white;
}

.takeaway-item span {
    color: #495057;
    font-weight: 500;
    transition: all 0.3s ease;
}

.takeaway-item:hover span {
    color: white;
}

/* CTA Section */
.benefits-cta {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 20px;
    color: white;
}

.benefits-cta p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 300;
}

.btn-benefits {
    display: inline-block;
    padding: 15px 40px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid #e67e22;
}

.btn-benefits:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(230, 126, 34, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .benefits-section {
        padding: 60px 0;
    }
    
    .benefits-section .section-title {
        font-size: 2.2rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .key-takeaways {
        flex-direction: column;
        align-items: center;
        padding: 30px 20px;
    }
    
    .takeaway-item {
        width: 100%;
        justify-content: center;
    }
    
    .benefits-cta p {
        font-size: 1.2rem;
    }
}
/* ===== WIN WIN STRATEGY SECTION ===== */
.winwin-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(135deg, #2c3e50 0%, #1e2b37 100%);
    overflow: hidden;
}

/* Background Pattern */
.winwin-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(230, 126, 34, 0.1) 0%, transparent 20%),
        radial-gradient(circle at 80% 70%, rgba(230, 126, 34, 0.1) 0%, transparent 20%);
    pointer-events: none;
}

.winwin-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left Content */
.winwin-content {
    color: white;
}

/* Tag */
.winwin-tag {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

.tag-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #e67e22, transparent);
}

.tag-text {
    color: #e67e22;
    font-size: 0.9rem;
    letter-spacing: 3px;
    font-weight: 500;
}

/* Title */
.winwin-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
}

.win-text {
    color: #e67e22;
    position: relative;
    display: inline-block;
    margin: 0 5px;
}

.win-text::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 8px;
    background: rgba(230, 126, 34, 0.3);
    z-index: -1;
}

/* Description */
.winwin-description {
    margin-bottom: 40px;
}

.lead-text {
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.9);
}

.winwin-description p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.7);
}

.winwin-description strong {
    color: #e67e22;
    font-weight: 600;
}

/* Impact Stats */
.impact-stats {
    display: flex;
    gap: 40px;
    margin-bottom: 50px;
}

.stat-item {
    text-align: left;
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    color: #e67e22;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Action Buttons */
.winwin-actions {
    display: flex;
    gap: 20px;
}

.btn-winwin {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.btn-primary {
    background: #e67e22;
    color: white;
}

.btn-primary:hover {
    background: #d35400;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230, 126, 34, 0.3);
}

.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: white;
}

.btn-outline:hover {
    border-color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
    transform: translateY(-3px);
}

/* Right Visual Section */
.winwin-visual {
    position: relative;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(230, 126, 34, 0.2);
}

/* Visual Icon */
.visual-icon {
    width: 100px;
    height: 100px;
    background: rgba(230, 126, 34, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 40px;
    animation: float 3s ease-in-out infinite;
}

.visual-icon i {
    font-size: 3.5rem;
    color: #e67e22;
}

/* Benefit Pills */
.benefit-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-bottom: 30px;
}

.pill {
    background: rgba(230, 126, 34, 0.1);
    border: 1px solid rgba(230, 126, 34, 0.3);
    padding: 10px 25px;
    border-radius: 50px;
    color: white;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    cursor: default;
}

.pill:hover {
    background: #e67e22;
    transform: scale(1.05);
    border-color: #e67e22;
}

/* Decorative Circles */
.decor-circle {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;
    height: 150px;
    border: 2px dashed rgba(230, 126, 34, 0.2);
    border-radius: 50%;
    z-index: -1;
}

.decor-circle.small {
    width: 100px;
    height: 100px;
    bottom: -20px;
    left: -20px;
    top: auto;
    right: auto;
}

/* Animations */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .winwin-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .winwin-title {
        font-size: 2.8rem;
    }
}

@media (max-width: 768px) {
    .winwin-section {
        padding: 60px 0;
    }
    
    .winwin-title {
        font-size: 2.2rem;
    }
    
    .impact-stats {
        flex-direction: column;
        gap: 20px;
    }
    
    .winwin-actions {
        flex-direction: column;
    }
    
    .btn-winwin {
        text-align: center;
    }
    
    .visual-icon {
        width: 80px;
        height: 80px;
    }
    
    .visual-icon i {
        font-size: 2.5rem;
    }
    
    .pill {
        padding: 8px 15px;
        font-size: 0.85rem;
    }
}
/* ===== PARTNER SCHOOLS SECTION ===== */
.partner-schools {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

/* Section Header */
.partner-schools .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.partner-schools .subtitle {
    display: block;
    color: #e67e22;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 600;
}

.partner-schools .section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.partner-schools .highlight {
    color: #e67e22;
    position: relative;
    display: inline-block;
}

.partner-schools .section-description {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

/* Featured School */
.featured-school {
    background: white;
    border-radius: 30px;
    padding: 50px;
    margin-bottom: 60px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid rgba(230, 126, 34, 0.1);
    position: relative;
    overflow: hidden;
}

.featured-school::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 200px;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.1), transparent);
    border-radius: 50%;
}

.featured-badge {
    margin-bottom: 30px;
}

.featured-tag {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-block;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
}

.featured-content {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 2;
}

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

.featured-logo img {
    width: 100%;
    max-width: 180px;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.featured-logo img:hover {
    transform: scale(1.05);
}

.featured-info h3 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 700;
}

.featured-location {
    color: #e67e22;
    font-size: 1.1rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.featured-description {
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.featured-stats {
    display: flex;
    gap: 40px;
}

.featured-stats .stat {
    text-align: left;
}

.featured-stats .stat-number {
    font-size: 2rem;
    font-weight: 800;
    color: #e67e22;
    display: block;
    line-height: 1.2;
}

.featured-stats .stat-label {
    font-size: 0.9rem;
    color: #adb5bd;
    text-transform: uppercase;
}

/* Schools Grid */
.schools-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 60px;
}

.school-card {
    background: white;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid rgba(230, 126, 34, 0.1);
    position: relative;
    overflow: hidden;
}

.school-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #e67e22, #f39c12);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.school-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(230, 126, 34, 0.15);
    border-color: rgba(230, 126, 34, 0.3);
}

.school-card:hover::before {
    transform: scaleX(1);
}

.school-logo {
    width: 120px;
    height: 120px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(230, 126, 34, 0.2);
    transition: all 0.3s ease;
}

.school-card:hover .school-logo {
    border-color: #e67e22;
    transform: scale(1.05);
}

.school-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.school-info h4 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 8px;
    font-weight: 600;
}

.school-location {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.school-location i {
    color: #e67e22;
}

.school-badge {
    display: inline-block;
    padding: 5px 15px;
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Partner CTA */
.partner-cta {
    text-align: center;
    padding: 50px;
    background: linear-gradient(135deg, #2c3e50, #34495e);
    border-radius: 30px;
    color: white;
}

.partner-cta p {
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 300;
}

.btn-partner {
    display: inline-block;
    padding: 15px 40px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid #e67e22;
    font-size: 1.1rem;
}

.btn-partner:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230, 126, 34, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .featured-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .featured-logo img {
        margin: 0 auto;
    }
    
    .featured-stats {
        justify-content: center;
    }
    
    .schools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .partner-schools {
        padding: 60px 0;
    }
    
    .partner-schools .section-title {
        font-size: 2.2rem;
    }
    
    .featured-school {
        padding: 30px 20px;
    }
    
    .featured-info h3 {
        font-size: 1.5rem;
    }
    
    .featured-stats {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .featured-stats .stat {
        text-align: center;
    }
    
    .schools-grid {
        grid-template-columns: 1fr;
    }
    
    .partner-cta {
        padding: 30px 20px;
    }
    
    .partner-cta p {
        font-size: 1.2rem;
    }
}
/* Orange text WITHOUT background highlight */
.orange-text {
    color: #e67e22;  /* Orange color */
    font-weight: 600; /* Optional: makes it slightly bold */
}

/* OR if you want to keep using 'highlight' class */
.highlight {
    color: #e67e22 !important;  /* Orange text */
    background: none !important;  /* Removes any background */
    text-decoration: none !important;  /* Removes any underline */
    border: none !important;  /* Removes any border */
    padding: 0 !important;  /* Removes any padding */
}
/* Orange text WITHOUT background highlight */
.orange-text {
    color: #e67e22;  /* Orange color */
    font-weight: 600; /* Optional: makes it slightly bold */
}
/* ===== COACHES SECTION WITH SWIPER ===== */
.coaches-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.coaches-section .section-title {
    text-align: center;
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 50px;
    font-family: 'Playfair Display', serif;
    position: relative;
}

.coaches-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: #e67e22;
    border-radius: 3px;
}

/* Swiper Container */
.coachesSwiper {
    padding: 20px 10px 60px 10px;
    overflow: visible;
}

.swiper-wrapper {
    padding: 10px 0;
}

/* Coach Card */
.coach-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    position: relative;
    height: auto;
    margin: 10px 0;
    border: 1px solid rgba(230, 126, 34, 0.1);
}

.coach-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 30px 50px rgba(230, 126, 34, 0.2);
    border-color: rgba(230, 126, 34, 0.3);
}

/* Coach Image Container */
.coach-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.coach-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.coach-card:hover .coach-image img {
    transform: scale(1.1);
}

/* Image Overlay */
.coach-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.coach-card:hover .coach-image::after {
    opacity: 1;
}

/* Coach Info */
.coach-card h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin: 15px 20px 5px;
    font-weight: 700;
    position: relative;
    display: inline-block;
}

.coach-card h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: #e67e22;
    transition: width 0.3s ease;
}

.coach-card:hover h3::after {
    width: 100%;
}

.coach-card p {
    color: #e67e22;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 5px 20px 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Social Icons */
.coach-social {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 0 20px 25px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.coach-card:hover .coach-social {
    opacity: 1;
    transform: translateY(0);
}

.coach-social a {
    width: 35px;
    height: 35px;
    background: rgba(230, 126, 34, 0.1);
    border: 1px solid rgba(230, 126, 34, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #e67e22;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.coach-social a:hover {
    background: #e67e22;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(230, 126, 34, 0.3);
}

/* Swiper Pagination */
.swiper-pagination {
    position: relative;
    margin-top: 30px;
}

.swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #e67e22;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 30px;
    border-radius: 5px;
    background: #e67e22;
}

/* Swiper Navigation (Optional - add if you want arrows) */
.swiper-button-next,
.swiper-button-prev {
    color: #e67e22;
    background: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 1.2rem;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #e67e22;
    color: white;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .coach-image {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .coaches-section {
        padding: 60px 0;
    }
    
    .coaches-section .section-title {
        font-size: 2rem;
    }
    
    .coach-image {
        height: 230px;
    }
    
    .coach-card h3 {
        font-size: 1.2rem;
    }
    
    .swiper-button-next,
    .swiper-button-prev {
        display: none; /* Hide arrows on mobile */
    }
}

/* Optional: Add a subtle background pattern */
.coaches-section::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.coaches-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.orange-text {
    color: #e67e22;
    font-weight: 600;
}
/* ===== MUSIC ACADEMY SECTION - CLEAN VERSION ===== */
.music-academy {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
}

/* Background Image */
.music-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/music/music-bg.jpg'); /* Your group music image */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

/* Dark Overlay */
.music-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 2;
}

/* Container */
.music-academy .container {
    position: relative;
    z-index: 3;
    color: white;
}

/* Wrapper for two columns */
.music-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* Left Column - Text */
.music-text-content {
    animation: fadeInUp 1s ease;
}

/* Title */
.music-text-content .section-title {
    font-size: 3rem;
    color: white;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
    line-height: 1.2;
    font-weight: 700;
}

.music-text-content .orange-text {
    color: #e67e22;
    font-weight: 700;
}

/* Quote */
.music-quote {
    margin-bottom: 25px;
    padding-left: 20px;
    border-left: 4px solid #e67e22;
}

.music-quote p {
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.6;
    color: rgba(255,255,255,0.95);
    font-family: 'Playfair Display', serif;
}

/* Description */
.music-description {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 35px;
    color: rgba(255,255,255,0.9);
}

/* Offerings */
.music-offerings {
    margin-bottom: 35px;
}

.music-offerings h3 {
    font-size: 1.3rem;
    color: #e67e22;
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 2px solid rgba(230, 126, 34, 0.3);
    padding-bottom: 10px;
    display: inline-block;
}

.offerings-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.offerings-list li {
    color: white;
    font-size: 1rem;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    position: relative;
    padding-left: 20px;
}

.offerings-list li::before {
    content: "•";
    color: #e67e22;
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* Button */
.btn-music {
    display: inline-block;
    padding: 15px 35px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #e67e22;
    font-size: 1rem;
}

.btn-music:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230, 126, 34, 0.3);
}

/* Right Column - Image */
.music-image-content {
    position: relative;
    animation: fadeInUp 1s ease 0.2s both;
}

.music-image-content img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 30px 50px rgba(0,0,0,0.3);
    border: 3px solid rgba(255,255,255,0.1);
    transition: transform 0.3s ease;
}

.music-image-content img:hover {
    transform: scale(1.02);
    border-color: rgba(230, 126, 34, 0.3);
}

/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .music-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .music-text-content .section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .music-academy {
        padding: 60px 0;
    }
    
    .music-text-content .section-title {
        font-size: 2rem;
        text-align: center;
    }
    
    .music-quote {
        text-align: center;
        border-left: none;
        border-top: 4px solid #e67e22;
        padding-left: 0;
        padding-top: 20px;
    }
    
    .offerings-list {
        grid-template-columns: 1fr;
    }
    
    .music-offerings h3 {
        display: block;
        text-align: center;
    }
    
    .btn-music {
        display: block;
        text-align: center;
    }
}
/* ===== COMBINED SECTION (PUBLIC SPEAKING & SPORTSMANSHIP) ===== */
.combined-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Background Pattern */
.combined-section::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

.combined-section::after {
    content: '';
    position: absolute;
    bottom: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
}

/* Section Header */
.combined-section .section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.combined-section .subtitle {
    display: block;
    color: #e67e22;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 600;
}

.combined-section .section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.combined-section .orange-text {
    color: #e67e22;
}

.combined-section .section-description {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

/* Wrapper */
.combined-wrapper {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    position: relative;
    z-index: 2;
}

/* Left Column - Speaking Cards Grid */
.speaking-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.speaking-card {
    background: white;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(230, 126, 34, 0.1);
    position: relative;
    overflow: hidden;
}

.speaking-card:nth-child(3) {
    grid-column: span 2;
}

.speaking-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #e67e22;
    transition: height 0.3s ease;
}

.speaking-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230, 126, 34, 0.15);
    border-color: rgba(230, 126, 34, 0.3);
}

.speaking-card:hover::before {
    height: 100%;
}

.card-icon {
    width: 70px;
    height: 70px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.speaking-card:hover .card-icon {
    background: #e67e22;
    transform: scale(1.1);
}

.card-icon i {
    font-size: 2rem;
    color: #e67e22;
    transition: all 0.3s ease;
}

.speaking-card:hover .card-icon i {
    color: white;
}

.speaking-card h3 {
    font-size: 1.3rem;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

.speaking-card p {
    color: #6c757d;
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 0.95rem;
}

.card-features {
    list-style: none;
    padding: 0;
}

.card-features li {
    padding: 8px 0;
    color: #495057;
    font-size: 0.9rem;
    border-bottom: 1px dashed rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-features li::before {
    content: "✓";
    color: #e67e22;
    font-weight: bold;
}

/* Right Column - Sportsmanship Story */
.sportsmanship-story {
    position: relative;
}

.story-card {
    background: linear-gradient(135deg, #2c3e50, #1e2b37);
    border-radius: 30px;
    padding: 40px;
    color: white;
    height: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.story-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
}

.story-card h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 2;
    border-bottom: 3px solid #e67e22;
    padding-bottom: 15px;
}

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

.story-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
    margin-bottom: 25px;
}

/* Inspiration Box */
.inspiration-box {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 25px;
    margin: 30px 0;
    border: 1px solid rgba(230, 126, 34, 0.3);
    backdrop-filter: blur(10px);
}

.inspiration-box h4 {
    color: #e67e22;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
}

.legend-grid {
    display: grid;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.legend-item:hover {
    transform: translateX(10px);
    background: rgba(230, 126, 34, 0.2);
}

.legend-icon {
    width: 50px;
    height: 50px;
    background: #e67e22;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-icon i {
    font-size: 1.5rem;
    color: white;
}

.legend-info {
    flex: 1;
}

.legend-info strong {
    display: block;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 3px;
}

.legend-info span {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}

.inspiration-quote {
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
    color: #e67e22 !important;
    margin-top: 20px;
}

/* Story Button */
.btn-story {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 30px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #e67e22;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.btn-story:hover {
    background: transparent;
    color: #e67e22;
    transform: translateX(10px);
    box-shadow: 0 15px 30px rgba(230, 126, 34, 0.3);
}

.btn-story i {
    transition: transform 0.3s ease;
}

.btn-story:hover i {
    transform: translateX(5px);
}

/* Responsive Design */
@media (max-width: 1024px) {
    .combined-wrapper {
        grid-template-columns: 1fr;
    }
    
    .speaking-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .combined-section {
        padding: 60px 0;
    }
    
    .combined-section .section-title {
        font-size: 2.2rem;
    }
    
    .speaking-cards {
        grid-template-columns: 1fr;
    }
    
    .speaking-card:nth-child(3) {
        grid-column: span 1;
    }
    
    .story-card {
        padding: 30px 20px;
    }
    
    .story-card h3 {
        font-size: 1.5rem;
    }
    
    .legend-item {
        flex-direction: column;
        text-align: center;
    }
}
/* ===== CONTACT & LOCATION SECTION ===== */
.contact-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

/* Section Header */
.contact-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.contact-section .subtitle {
    display: block;
    color: #e67e22;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 600;
}

.contact-section .section-title {
    font-size: 3rem;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.contact-section .orange-text {
    color: #e67e22;
}

.contact-section .section-description {
    font-size: 1.2rem;
    color: #6c757d;
    max-width: 600px;
    margin: 0 auto;
}

/* Contact Wrapper */
.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 50px;
}

/* Info Cards */
.info-card {
    background: white;
    border-radius: 20px;
    padding: 35px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
    border: 1px solid rgba(230, 126, 34, 0.1);
    height: 100%;
    transition: transform 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(230, 126, 34, 0.15);
    border-color: rgba(230, 126, 34, 0.3);
}

.info-card h3 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 2px solid rgba(230, 126, 34, 0.2);
    padding-bottom: 15px;
}

.info-card h3 i {
    color: #e67e22;
}

/* Location Info */
.address {
    font-size: 1.1rem;
    color: #2c3e50;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 3px solid #e67e22;
}

/* Map Container */
.map-container {
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
    border: 3px solid rgba(230, 126, 34, 0.2);
}

.map-container iframe {
    width: 100%;
    height: 250px;
    display: block;
}

/* Direction Button */
.btn-direction {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #e67e22;
    margin-bottom: 20px;
}

.btn-direction:hover {
    background: transparent;
    color: #e67e22;
    transform: translateX(5px);
    box-shadow: 0 10px 20px rgba(230, 126, 34, 0.2);
}

/* Nearby Places */
.nearby-places {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: #6c757d;
    border-left: 3px solid #e67e22;
}

.nearby-places i {
    color: #e67e22;
    margin-right: 5px;
}

/* Contact Items */
.contact-item {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.contact-item:last-child {
    border-bottom: none;
}

.contact-icon {
    width: 40px;
    height: 40px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-icon i {
    color: #e67e22;
    font-size: 1.2rem;
}

.contact-details {
    flex: 1;
}

.contact-details a {
    display: block;
    color: #2c3e50;
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.3s ease;
    font-size: 1rem;
}

.contact-details a:hover {
    color: #e67e22;
}

/* Social Links Special Styling */
.social-links a {
    display: inline-block;
    margin-right: 15px;
    padding: 5px 12px;
    background: rgba(230, 126, 34, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.social-links a:hover {
    background: #e67e22;
    color: white;
}

/* Contact Note */
.contact-note {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px dashed rgba(230, 126, 34, 0.2);
}

.contact-note p {
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-note i {
    color: #e67e22;
}

/* Academy Motto */
.academy-motto {
    text-align: center;
    padding: 40px;
    background: linear-gradient(135deg, #2c3e50, #1e2b37);
    border-radius: 30px;
    color: white;
    margin-top: 30px;
}

.academy-motto p {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 10px;
}

.academy-motto strong {
    color: #e67e22;
    font-weight: 700;
}

.motto-small {
    font-size: 1rem !important;
    color: rgba(255,255,255,0.7);
}

/* Responsive Design */
@media (max-width: 992px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0;
    }
    
    .contact-section .section-title {
        font-size: 2.2rem;
    }
    
    .info-card {
        padding: 25px;
    }
    
    .info-card h3 {
        font-size: 1.3rem;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .social-links a {
        display: block;
        margin-bottom: 10px;
        text-align: center;
    }
    
    .academy-motto p {
        font-size: 1.2rem;
    }
}
/* ===== MINIMAL FOOTER ===== */
footer {
    background: #2c3e50;
    padding: 30px 0;
    text-align: center;
}

.footer-copyright p {
    color: #bdc3c7;
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    footer {
        padding: 20px 0;
    }
    
    .footer-copyright p {
        font-size: 0.85rem;
        padding: 0 15px;
    }
}
/* ===== HERO SECTION - CHESS BACKGROUND + ANIMATED LOGO ===== */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-top: -80px;
    padding-top: 80px;
}

/* Chess Background Image (your original) */
.hero-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/hero-bg.jpg'); /* Your chess image */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Dark Overlay for text readability */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

/* Animated Particles (subtle) */
.hero-bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: rgba(230, 126, 34, 0.3);
    border-radius: 50%;
    animation: floatParticle 20s infinite linear;
}

.particle:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.particle:nth-child(2) {
    top: 60%;
    right: 15%;
    animation-delay: 4s;
}

.particle:nth-child(3) {
    bottom: 30%;
    left: 20%;
    animation-delay: 8s;
}

.particle:nth-child(4) {
    top: 40%;
    right: 25%;
    animation-delay: 12s;
}

.particle:nth-child(5) {
    bottom: 50%;
    left: 30%;
    animation-delay: 16s;
}

@keyframes floatParticle {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0.2;
    }
    25% {
        transform: translateY(-50px) translateX(30px);
        opacity: 0.5;
    }
    50% {
        transform: translateY(30px) translateX(-30px);
        opacity: 0.2;
    }
    75% {
        transform: translateY(-30px) translateX(50px);
        opacity: 0.5;
    }
    100% {
        transform: translateY(0) translateX(0);
        opacity: 0.2;
    }
}

/* Hero Content */
.hero .hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    padding: 0 20px;
    color: white;
}

/* Animated Logo Container - KEEPS DOING ITS THING */
.hero-logo-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.hero-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.5));
    /* If logo is dark, add this to make it visible on dark background */
    /* filter: brightness(0) invert(1); /* Uncomment if logo needs to be white */
}

/* Logo Glow Effect - KEEPS DOING ITS THING */
.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

/* Logo Animations - KEEP THESE */
@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

/* Title Animations */
.hero h1 {
    animation: fadeInUp 0.8s ease 0.3s both;
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.tagline {
    animation: fadeInUp 0.8s ease 0.6s both;
    font-size: 2rem;
    color: #e67e22;
    margin-bottom: 20px;
    font-style: italic;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero p {
    animation: fadeInUp 0.8s ease 0.9s both;
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 30px;
    color: rgba(255,255,255,0.95);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

.hero-buttons {
    animation: fadeInUp 0.8s ease 1.2s both;
    display: flex;
    gap: 20px;
    justify-content: center;
}

/* Fade Animations */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 15px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    border: 2px solid transparent;
}

.btn-large {
    padding: 15px 35px;
}

.btn-large:first-child {
    background: #e67e22;
    color: white;
    border-color: #e67e22;
}

.btn-large:first-child:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(230, 126, 34, 0.3);
}

.btn-secondary {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-logo-container {
        width: 150px;
        height: 150px;
    }
    
    .hero h1 {
        font-size: 2.2rem;
    }
    
    .tagline {
        font-size: 1.3rem;
    }
    
    .hero p {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }
    
    .btn {
        width: 100%;
        text-align: center;
    }
}
/* ===== NAVIGATION BAR - FIXED & PERFECT FIT ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 5%;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
    box-sizing: border-box;
}

/* Logo Section */
.logo {
    flex-shrink: 0; /* Prevents logo from shrinking */
}

.logo a {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 8px;
}

.logo-img {
    height: 40px;
    width: auto;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    font-family: 'Playfair Display', serif;
    white-space: nowrap;
}

.logo-text span {
    color: #e67e22;
    font-weight: 400;
    margin-left: 3px;
}

/* Navigation Links Container */
.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

/* Individual Navigation Links */
.nav-link {
    text-decoration: none;
    color: #2c3e50;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.5rem 0;
    position: relative;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: #e67e22;
}

/* Underline Effect */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #e67e22;
    transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* Dropdown Container */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
}

.dropdown-toggle::after {
    content: '▼';
    font-size: 0.7rem;
    color: #e67e22;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: white;
    min-width: 200px;
    border-radius: 8px;
    padding: 8px 0;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border: 1px solid #eee;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(5px);
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.dropdown-item:hover {
    background: #f8f9fa;
    color: #e67e22;
    padding-left: 25px;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    flex-direction: column;
    gap: 5px;
}

.mobile-menu-btn span {
    display: block;
    width: 25px;
    height: 3px;
    background: #2c3e50;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Responsive Design */
@media (max-width: 768px) {
    .navbar {
        padding: 0.8rem 4%;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    .logo-img {
        height: 35px;
    }
    
    .mobile-menu-btn {
        display: flex;
    }
    
    .nav-links {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px);
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        gap: 1.5rem;
        transition: left 0.3s ease;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        overflow-y: auto;
    }
    
    .nav-links.active {
        left: 0;
    }
    
    .nav-link {
        font-size: 1.1rem;
        width: 100%;
    }
    
    .dropdown {
        width: 100%;
    }
    
    .dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding: 0 0 0 1rem;
        margin-top: 0.5rem;
        display: none;
        border: none;
        background: #f8f9fa;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    .dropdown-toggle::after {
        margin-left: auto;
    }
    
    .dropdown-item {
        padding: 10px 15px;
    }
}

/* Small screens */
@media (max-width: 480px) {
    .logo-text {
        font-size: 0.9rem;
    }
    
    .logo-img {
        height: 30px;
    }
    
    .navbar {
        padding: 0.6rem 3%;
    }
}
html {
    scroll-behavior: smooth;
}

/* Add offset so sections aren't hidden behind the navbar */
#programs,
#contact {
    scroll-margin-top: 80px; /* Adjust if your navbar height is different */
}
/* Highlight the top Programs dropdown when activated from hero */
.dropdown.highlight .dropdown-toggle {
    color: #e67e22;
}
/* ===== DROPDOWN TRIGGER FIX ===== */
.dropdown.show-dropdown .dropdown-menu {
    display: block !important;
}

/* For testing - remove after it works */
.dropdown.show-dropdown {
    /* border: 2px solid red;  /* Uncomment to test */
}
/* ===== CHESS PAGE STYLES ===== */
.chess-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

.chess-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('images/chess/chess-hero-bg.jpg') center/cover;
    z-index: 1;
}

.chess-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
}

.chess-hero-content {
    position: relative;
    z-index: 3;
    color: white;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-subtitle {
    color: #e67e22;
    font-size: 1.2rem;
    letter-spacing: 3px;
    margin-bottom: 20px;
    display: block;
}

.chess-hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.hero-tagline {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}

.hero-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.hero-features i {
    color: #e67e22;
}

.btn-chess-primary, .btn-chess-secondary {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0 10px;
}

.btn-chess-primary {
    background: #e67e22;
    color: white;
    border: 2px solid #e67e22;
}

.btn-chess-primary:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
}

.btn-chess-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-chess-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-3px);
}

/* About Section */
.chess-about {
    padding: 100px 0;
    background: #f8f9fa;
}

.about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-text .section-subtitle {
    color: #e67e22;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    display: block;
}

.about-text h2 {
    font-size: 2.8rem;
    margin-bottom: 25px;
    color: #2c3e50;
}

.lead-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.about-image {
    position: relative;
}

.about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: #e67e22;
    color: white;
    padding: 30px;
    border-radius: 50%;
    text-align: center;
    width: 150px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.years {
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1;
}

/* Program Levels */
.chess-levels {
    padding: 100px 0;
    background: white;
}

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

.level-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    position: relative;
    transition: all 0.3s ease;
}

.level-card.popular {
    transform: scale(1.05);
    border: 2px solid #e67e22;
    box-shadow: 0 30px 60px rgba(230,126,34,0.15);
}

.level-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.level-badge {
    position: absolute;
    top: -15px;
    left: 30px;
    background: #2c3e50;
    color: white;
    padding: 5px 20px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
}

.level-card.popular .level-badge {
    background: #e67e22;
}

.level-icon {
    font-size: 4rem;
    margin-bottom: 20px;
}

.level-card h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
    color: #2c3e50;
}

.level-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.level-features li {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.level-features i {
    color: #e67e22;
}

.level-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.duration {
    color: #666;
    font-weight: 500;
}

.btn-level {
    background: transparent;
    color: #e67e22;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 20px;
    border: 2px solid #e67e22;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.btn-level:hover {
    background: #e67e22;
    color: white;
}

/* Why Join Section */
.why-join {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa, white);
}

/* Success Stories */
.success-stories {
    padding: 100px 0;
    background: #2c3e50;
    color: white;
}

.success-stories .section-header h2 {
    color: white;
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.story-card {
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 40px;
    display: flex;
    gap: 30px;
    align-items: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.story-image img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e67e22;
}

.story-content i {
    color: #e67e22;
    font-size: 2rem;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* CTA Section */
.chess-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    text-align: center;
}

.chess-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.chess-cta p {
    font-size: 1.2rem;
    margin-bottom: 40px;
}

.btn-cta-primary, .btn-cta-secondary {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    margin: 0 10px;
}

.btn-cta-primary {
    background: white;
    color: #e67e22;
    border: 2px solid white;
}

.btn-cta-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-cta-primary:hover, .btn-cta-secondary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 992px) {
    .levels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .level-card.popular {
        transform: scale(1);
    }
    
    .about-wrapper {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .levels-grid {
        grid-template-columns: 1fr;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .chess-hero-content h1 {
        font-size: 3rem;
    }
    
    .stories-grid {
        grid-template-columns: 1fr;
    }
    
    .story-card {
        flex-direction: column;
        text-align: center;
    }
    
    .experience-badge {
        width: 100px;
        height: 100px;
        padding: 15px;
        bottom: -20px;
        right: -20px;
    }
    
    .years {
        font-size: 1.8rem;
    }
}
/* Chess Page Logo Animation (matching homepage) */
.chess-logo-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.chess-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1); /* Makes logo white */
}

.chess-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

/* Reuse the same animations from homepage */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

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

/* Adjust hero content spacing */
.chess-hero-content {
    padding-top: 20px;
}

.hero-subtitle {
    margin-bottom: 10px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .chess-logo-container {
        width: 100px;
        height: 100px;
    }
}
/* Hero Subtitle - Big and Bold */
.hero-subtitle {
    font-size: 2.5rem;        /* Big size */
    font-weight: 900;         /* Extra bold */
    color: white;             /* White color */
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Make "International" orange */
.hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 900;
}
/* Chess Hero Section with Background Image */
.chess-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

/* Background Image */
.chess-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

/* Dark Overlay */
.chess-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 2;
}

/* Content */
.chess-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.chess-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo */
.chess-logo-container {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.chess-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1);
}

.chess-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

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

/* Hero Subtitle */
.hero-subtitle {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 900;
}

/* Chess Academy Title */
.chess-hero-content h1 {
    font-size: 4rem;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-tagline {
    font-size: 1.5rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
}

.hero-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.hero-features span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
}

.hero-features i {
    color: #e67e22;
}

/* Buttons */
.btn-chess-primary {
    display: inline-block;
    padding: 15px 40px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    border: 2px solid #e67e22;
    transition: all 0.3s ease;
}

.btn-chess-primary:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230,126,34,0.3);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .chess-logo-container {
        width: 100px;
        height: 100px;
    }
    
    .hero-subtitle {
        font-size: 1.8rem;
    }
    
    .chess-hero-content h1 {
        font-size: 2.8rem;
    }
    
    .hero-features {
        flex-direction: column;
        gap: 15px;
    }
}
/* Chess Logo Container - BIG and CENTERED */
.chess-logo-container {
    position: relative;
    width: 220px;        /* Increased from 150px */
    height: 220px;       /* Increased from 150px */
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

/* Chess Logo - BIG and BOLD */
.chess-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1); /* Makes logo white */
    transition: transform 0.3s ease;
}

.chess-logo:hover {
    transform: scale(1.1); /* Extra pop on hover */
}

/* Glow Effect - Bigger to match */
.chess-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;          /* Slightly larger than logo */
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

/* Animations */
@keyframes logoPulse {
    0%, 100% { 
        transform: scale(1); 
    }
    50% { 
        transform: scale(1.08); /* Slightly bigger pulse */
    }
}

@keyframes glowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); /* Bigger glow pulse */
    }
}

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

/* Mobile Responsive - Still big but adjusted */
@media (max-width: 768px) {
    .chess-logo-container {
        width: 160px;      /* Still big on mobile */
        height: 160px;
    }
}

@media (max-width: 480px) {
    .chess-logo-container {
        width: 130px;      /* Slightly smaller on very small screens */
        height: 130px;
    }
}
/* Chess Logo Container - BIG and CENTERED */
.chess-logo-container {
    position: relative;
    width: 250px;        /* Big size */
    height: 250px;       /* Big size */
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

/* Chess Logo - BIG and BOLD */
.chess-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1); /* Makes logo white */
}

/* Glow Effect */
.chess-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

/* Animations */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes glowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
    .chess-logo-container {
        width: 180px;
        height: 180px;
    }
}
/* Make the chess logo BIGGER */
.chess-hero .chess-logo-container {
    width: 300px;        /* Increase this value to make it bigger */
    height: 300px;       /* Increase this value to make it bigger */
    margin: 0 auto 30px;
}

.chess-hero .logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Keeps the logo proportions */
}
/* ===== SPORTSMANSHIP STORY SECTION ===== */
.sportsmanship-story {
    height: 100%;
}

.story-card {
    background: linear-gradient(135deg, #2c3e50, #1e2b37);
    border-radius: 30px;
    padding: 40px;
    color: white;
    height: 100%;
    box-shadow: 0 30px 60px rgba(0,0,0,0.2);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230, 126, 34, 0.3);
}

.story-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(230, 126, 34, 0.1);
    border-radius: 50%;
}

.story-card h3 {
    font-size: 1.8rem;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 2;
    border-bottom: 3px solid #e67e22;
    padding-bottom: 15px;
}

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

.story-content p {
    font-size: 1rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.9);
    margin-bottom: 25px;
}

/* Inspiration Box */
.inspiration-box {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 25px;
    margin: 30px 0;
    border: 1px solid rgba(230, 126, 34, 0.3);
    backdrop-filter: blur(10px);
}

.inspiration-box h4 {
    color: #e67e22;
    font-size: 1.2rem;
    margin-bottom: 20px;
    text-align: center;
}

.legend-grid {
    display: grid;
    gap: 20px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.legend-item:hover {
    transform: translateX(10px);
    background: rgba(230, 126, 34, 0.2);
}

.legend-icon {
    width: 50px;
    height: 50px;
    background: #e67e22;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.legend-icon i {
    font-size: 1.5rem;
    color: white;
}

.legend-info {
    flex: 1;
}

.legend-info strong {
    display: block;
    color: white;
    font-size: 1.1rem;
    margin-bottom: 3px;
}

.legend-info span {
    color: rgba(255,255,255,0.7);
    font-size: 0.85rem;
}

.inspiration-quote {
    font-size: 1.1rem;
    font-style: italic;
    text-align: center;
    color: #e67e22 !important;
    margin-top: 20px;
}

/* Story Button */
.btn-story {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 30px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid #e67e22;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}

.btn-story:hover {
    background: transparent;
    color: #e67e22;
    transform: translateX(10px);
    box-shadow: 0 15px 30px rgba(230, 126, 34, 0.3);
}

.btn-story i {
    transition: transform 0.3s ease;
}

.btn-story:hover i {
    transform: translateX(5px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .story-card {
        padding: 30px 20px;
    }
    
    .story-card h3 {
        font-size: 1.5rem;
    }
    
    .legend-item {
        flex-direction: column;
        text-align: center;
    }
}

/* Adjust spacing for the main title */
.chess-hero-content h1 {
    margin-top: 10px;
    font-size: 4rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 1.8rem;
    }
    
    .chess-hero-content h1 {
        font-size: 2.8rem;
    }
}
/* ===== DIPLOMATIC MUSIC PAGE STYLES ===== */

/* Hero Section - Elegant */
.music-hero-subtitle {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 15px;
    display: block;
}

.music-hero-content h1 {
    font-size: 4rem;
    font-weight: 500;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.music-hero-tagline {
    font-size: 1.2rem;
    font-weight: 300;
    font-style: italic;
    color: rgba(255,255,255,0.8);
    margin-bottom: 35px;
    letter-spacing: 0.5px;
}

/* Refined Feature Pills */
.music-hero-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
}

.music-hero-features span {
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,0.8);
    position: relative;
    padding-bottom: 8px;
    text-transform: uppercase;
    font-weight: 300;
}

.music-hero-features span::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(230,126,34,0.4);
}

/* Buttons - Refined */
.btn-music-primary, .btn-music-secondary {
    padding: 12px 35px;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    font-weight: 400;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-music-primary {
    background: transparent;
    color: white;
    border: 1px solid #e67e22;
}

.btn-music-primary:hover {
    background: #e67e22;
    color: white;
    transform: translateY(-2px);
}

.btn-music-secondary {
    background: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.3);
}

.btn-music-secondary:hover {
    border-color: white;
    color: white;
    transform: translateY(-2px);
}

/* About Section - Balanced */
.music-about-text h2 {
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
}

.lead-text {
    font-size: 1.1rem;
    font-weight: 300;
    line-height: 1.8;
    color: #555;
    font-style: italic;
}

.music-stats .stat-number {
    font-size: 2.2rem;
    font-weight: 400;
    color: #e67e22;
}

.music-stats .stat-label {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #777;
}

/* Experience Badge - Subtle */
.music-experience-badge {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(230,126,34,0.2);
    color: #2c3e50;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.music-experience-badge .years {
    color: #e67e22;
    font-weight: 500;
}

/* Instrument Cards - Clean */
.instrument-card {
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 5px 20px rgba(0,0,0,0.02);
}

.instrument-card:hover {
    border-color: rgba(230,126,34,0.3);
    box-shadow: 0 15px 30px rgba(230,126,34,0.05);
}

.instrument-card h3 {
    font-weight: 500;
    color: #2c3e50;
}

.instrument-features li {
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #f0f0f0;
}

/* Gallery - Elegant */
.gallery-overlay {
    background: linear-gradient(to top, rgba(44,62,80,0.9), transparent);
}

.gallery-overlay h3 {
    font-weight: 400;
    color: #e67e22;
}

/* Benefit Cards - Refined */
.music-benefit-card {
    border: 1px solid rgba(230,126,34,0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
}

.music-benefit-card:hover {
    border-color: rgba(230,126,34,0.3);
}

/* Testimonials - Sophisticated */
.music-testimonials {
    background: #2c3e50;
}

.testimonial-card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.05);
}

.testimonial-card p {
    font-weight: 300;
    line-height: 1.8;
}

/* CTA - Understated */
.music-cta {
    background: #f8f9fa;
    color: #2c3e50;
}

.music-cta h2 {
    font-weight: 500;
    color: #2c3e50;
}

.btn-cta-music {
    background: transparent;
    color: #e67e22;
    border: 1px solid #e67e22;
}

.btn-cta-music-outline {
    background: transparent;
    color: #2c3e50;
    border: 1px solid #2c3e50;
}
/* ===== MUSIC ABOUT SECTION - ELEGANT ===== */
.music-about {
    padding: 100px 0;
    background: #f8f9fa;
    position: relative;
}

.music-about-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.music-about-text {
    padding-right: 30px;
}

.section-subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-weight: 500;
}

.music-about-text h2 {
    font-size: 2.8rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
    color: #2c3e50;
    position: relative;
    display: inline-block;
}

.music-about-text h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 80px;
    height: 3px;
    background: #e67e22;
}

.music-about-text .orange-text {
    color: #e67e22;
}

.lead-text {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8;
    color: #555;
    font-style: italic;
    margin-bottom: 20px;
    border-left: 3px solid #e67e22;
    padding-left: 20px;
    background: rgba(230,126,34,0.02);
    padding: 20px;
    border-radius: 0 16px 16px 0;
}

.music-about-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 30px;
}

/* Music Stats - Elegant Cards */
.music-stats {
    display: flex;
    gap: 40px;
    margin-top: 40px;
}

.music-stats .stat-item {
    text-align: center;
    background: white;
    padding: 25px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    min-width: 120px;
    transition: all 0.3s ease;
}

.music-stats .stat-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(230,126,34,0.1);
    border-color: rgba(230,126,34,0.3);
}

.music-stats .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #e67e22;
    display: block;
    line-height: 1;
    font-family: 'Playfair Display', serif;
    margin-bottom: 8px;
}

.music-stats .stat-label {
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #777;
    font-weight: 500;
}

/* About Image */
.music-about-image {
    position: relative;
}

.music-about-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.music-experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: white;
    padding: 25px;
    border-radius: 50%;
    text-align: center;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 2px solid rgba(230,126,34,0.2);
    transition: all 0.3s ease;
}

.music-experience-badge:hover {
    transform: scale(1.05);
    border-color: #e67e22;
}

.music-experience-badge .years {
    font-size: 2.2rem;
    font-weight: 700;
    color: #e67e22;
    line-height: 1;
    font-family: 'Playfair Display', serif;
}

.music-experience-badge span:last-child {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
}

/* ===== INSTRUMENTS SECTION - PROFESSIONAL CARDS ===== */
.music-instruments {
    padding: 100px 0;
    background: white;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
}

.section-header .subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
    font-weight: 500;
}

.section-header h2 {
    font-size: 2.8rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: #e67e22;
}

.section-header .orange-text {
    color: #e67e22;
}

.section-description {
    font-size: 1.1rem;
    color: #777;
    max-width: 700px;
    margin: 20px auto 0;
    line-height: 1.6;
}

/* Instruments Grid */
.instruments-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.instrument-card {
    background: white;
    border-radius: 16px;
    padding: 35px 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid #f0f0f0;
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.instrument-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.instrument-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(230,126,34,0.1);
    border-color: rgba(230,126,34,0.3);
}

.instrument-card:hover::before {
    transform: translateX(100%);
}

.instrument-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.instrument-card:hover .instrument-icon {
    transform: scale(1.1);
}

.instrument-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.instrument-card p {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.instrument-features {
    list-style: none;
    padding: 0;
    text-align: center;
}

.instrument-features li {
    padding: 8px 0;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s ease;
    position: relative;
    padding-left: 20px;
}

.instrument-features li::before {
    content: '♪';
    color: #e67e22;
    position: absolute;
    left: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.instrument-card:hover .instrument-features li::before {
    opacity: 1;
}

.instrument-features li:hover {
    color: #e67e22;
    transform: translateX(5px);
}

.instrument-features li:last-child {
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .instruments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .music-about-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .music-about-text {
        padding-right: 0;
    }
    
    .music-about-text h2 {
        font-size: 2.2rem;
    }
    
    .music-stats {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .music-stats .stat-item {
        min-width: 140px;
        flex: 1 1 auto;
    }
    
    .music-experience-badge {
        width: 100px;
        height: 100px;
        padding: 15px;
        bottom: -20px;
        right: -20px;
    }
    
    .music-experience-badge .years {
        font-size: 1.5rem;
    }
    
    .instruments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .section-header h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .instruments-grid {
        grid-template-columns: 1fr;
    }
    
    .music-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .music-stats .stat-item {
        width: 100%;
        max-width: 200px;
    }
    
    .section-header h2 {
        font-size: 1.8rem;
    }
    
    .section-header h2::after {
        width: 60px;
    }
}
/* ===== MUSIC HERO SECTION - MATCHING CHESS PAGE ===== */
.music-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

.music-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/music/music-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}

.music-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.75) 100%);
    z-index: 2;
}

.music-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.music-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* BIG Logo - Same as Chess Page */
.music-logo-container {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.music-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1);
}

.music-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

/* Animations - Same as Chess */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes glowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}

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

/* Hero Subtitle - Same as Chess */
.music-hero-subtitle {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.music-hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 900;
}

.music-hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.music-hero-tagline {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
}

/* Features with check circles - Same as Chess */
.music-hero-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.music-hero-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.1);
    padding: 10px 25px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
}

.music-hero-features i {
    color: #e67e22;
    font-size: 1.2rem;
}

/* Buttons - Same style as Chess */
.music-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-music-primary, .btn-music-secondary {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-music-primary {
    background: #e67e22;
    color: white;
    border: 2px solid #e67e22;
}

.btn-music-primary:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230,126,34,0.3);
}

.btn-music-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-music-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .music-logo-container {
        width: 150px;
        height: 150px;
    }
    
    .music-hero-subtitle {
        font-size: 1.8rem;
    }
    
    .music-hero-content h1 {
        font-size: 3rem;
    }
    
    .music-hero-tagline {
        font-size: 1.3rem;
    }
    
    .music-hero-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .music-hero-buttons {
        flex-direction: column;
    }
}
/* ===== FACULTY SWIPER SECTION ===== */
.music-faculty {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

/* Faculty Swiper */
.facultySwiper {
    padding: 40px 10px 70px 10px;
    margin-top: 30px;
}

/* Faculty Card */
.faculty-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(230,126,34,0.1);
    height: 100%;
    margin: 10px 0;
}

.faculty-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.15);
    border-color: rgba(230,126,34,0.3);
}

/* Faculty Image Container */
.faculty-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.faculty-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.faculty-card:hover .faculty-image img {
    transform: scale(1.1);
}

/* Social Icons Overlay */
.faculty-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: bottom 0.3s ease;
}

.faculty-card:hover .faculty-social {
    bottom: 0;
}

.faculty-social a {
    width: 36px;
    height: 36px;
    background: #e67e22;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.faculty-social a:hover {
    background: white;
    color: #e67e22;
    transform: scale(1.1);
}

/* Faculty Info */
.faculty-info {
    padding: 25px 20px;
    text-align: center;
}

.faculty-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.faculty-title {
    color: #e67e22;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.faculty-bio {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Swiper Navigation */
.facultySwiper .swiper-button-next,
.facultySwiper .swiper-button-prev {
    color: #e67e22;
    background: white;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.facultySwiper .swiper-button-next::after,
.facultySwiper .swiper-button-prev::after {
    font-size: 1.2rem;
    font-weight: bold;
}

.facultySwiper .swiper-button-next:hover,
.facultySwiper .swiper-button-prev:hover {
    background: #e67e22;
    color: white;
    transform: scale(1.1);
}

/* Swiper Pagination */
.facultySwiper .swiper-pagination {
    bottom: 10px;
}

.facultySwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #e67e22;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.facultySwiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 25px;
    border-radius: 5px;
    background: #e67e22;
}

/* Responsive */
@media (max-width: 768px) {
    .faculty-image {
        height: 250px;
    }
    
    .facultySwiper .swiper-button-next,
    .facultySwiper .swiper-button-prev {
        display: none;
    }
}
/* ===== FACULTY GRID SECTION ===== */
.music-faculty {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    position: relative;
}

/* Faculty Grid - 3x2 Grid */
.faculty-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
    gap: 30px;
    margin-top: 50px;
}

/* Faculty Card */
.faculty-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(230,126,34,0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.faculty-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(230,126,34,0.15);
    border-color: rgba(230,126,34,0.3);
}

/* Faculty Image Container */
.faculty-image {
    position: relative;
    width: 100%;
    height: 260px;
    overflow: hidden;
}

.faculty-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.faculty-card:hover .faculty-image img {
    transform: scale(1.1);
}

/* Social Icons Overlay */
.faculty-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: bottom 0.3s ease;
}

.faculty-card:hover .faculty-social {
    bottom: 0;
}

.faculty-social a {
    width: 36px;
    height: 36px;
    background: #e67e22;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.faculty-social a:hover {
    background: white;
    color: #e67e22;
    transform: scale(1.1);
}

/* Faculty Info */
.faculty-info {
    padding: 25px 20px;
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.faculty-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
}

.faculty-title {
    color: #e67e22;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.faculty-bio {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 992px) {
    .faculty-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .faculty-grid {
        grid-template-columns: repeat(2, 1fr); /* Still 2 on mobile */
        gap: 20px;
    }
    
    .faculty-image {
        height: 220px;
    }
    
    .faculty-info {
        padding: 20px 15px;
    }
    
    .faculty-info h3 {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .faculty-grid {
        grid-template-columns: 1fr; /* 1 column on small mobile */
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}
/* ===== WHY JOIN SECTION - ELEGANT & DIPLOMATIC ===== */
.why-join-music {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative Background Elements */
.why-join-music::before {
    content: '♪';
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 15rem;
    color: rgba(230, 126, 34, 0.03);
    font-family: serif;
    transform: rotate(-15deg);
    line-height: 1;
}

.why-join-music::after {
    content: '♫';
    position: absolute;
    bottom: 50px;
    right: 50px;
    font-size: 15rem;
    color: rgba(230, 126, 34, 0.03);
    font-family: serif;
    transform: rotate(15deg);
    line-height: 1;
}

/* Section Header */
.why-join-music .section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.why-join-music .subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
    font-weight: 500;
}

.why-join-music .section-header h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.why-join-music .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
}

.why-join-music .orange-text {
    color: #e67e22;
}

.why-join-music .section-description {
    font-size: 1.1rem;
    color: #777;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.6;
    font-style: italic;
}

/* Benefits Grid */
.why-join-music .benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

/* Benefit Card */
.why-join-music .benefit-card {
    background: white;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.02);
    border: 1px solid rgba(230, 126, 34, 0.1);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
}

.why-join-music .benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.02), transparent);
    transition: height 0.5s ease;
    z-index: 0;
}

.why-join-music .benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230, 126, 34, 0.1);
    border-color: rgba(230, 126, 34, 0.3);
}

.why-join-music .benefit-card:hover::before {
    height: 100%;
}

/* Icon Wrapper */
.why-join-music .benefit-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-join-music .benefit-icon {
    width: 80px;
    height: 80px;
    background: rgba(230, 126, 34, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.why-join-music .benefit-card:hover .benefit-icon {
    background: #e67e22;
    transform: scale(1.1);
    border-color: #e67e22;
}

.why-join-music .benefit-icon i {
    font-size: 2.2rem;
    color: #e67e22;
    transition: all 0.5s ease;
}

.why-join-music .benefit-card:hover .benefit-icon i {
    color: white;
}

/* Icon Glow Effect */
.why-join-music .benefit-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.why-join-music .benefit-card:hover .benefit-icon-wrapper::after {
    opacity: 1;
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.1;
    }
}

/* Benefit Text */
.why-join-music .benefit-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.why-join-music .benefit-card:hover h3 {
    color: #e67e22;
}

.why-join-music .benefit-card p {
    color: #777;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

/* Benefit Line */
.why-join-music .benefit-line {
    width: 40px;
    height: 2px;
    background: #e67e22;
    margin: 0 auto;
    transition: width 0.5s ease;
    position: relative;
    z-index: 2;
}

.why-join-music .benefit-card:hover .benefit-line {
    width: 80px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .why-join-music .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
    
    .why-join-music .section-header h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 768px) {
    .why-join-music {
        padding: 70px 0;
    }
    
    .why-join-music .benefits-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .why-join-music .section-header h2 {
        font-size: 2rem;
    }
    
    .why-join-music::before,
    .why-join-music::after {
        font-size: 8rem;
    }
}

@media (max-width: 480px) {
    .why-join-music .benefit-card {
        padding: 30px 20px;
    }
    
    .why-join-music .benefit-card h3 {
        font-size: 1.3rem;
    }
}
/* ===== WHY JOIN SECTION ===== */
.why-join-music {
    padding: 100px 0;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    position: relative;
    overflow: hidden;
}

/* Decorative Music Notes */
.why-join-music::before {
    content: '♪';
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 15rem;
    color: rgba(230, 126, 34, 0.03);
    font-family: serif;
    transform: rotate(-15deg);
    line-height: 1;
    pointer-events: none;
}

.why-join-music::after {
    content: '♫';
    position: absolute;
    bottom: 50px;
    right: 50px;
    font-size: 15rem;
    color: rgba(230, 126, 34, 0.03);
    font-family: serif;
    transform: rotate(15deg);
    line-height: 1;
    pointer-events: none;
}

/* Section Header */
.why-join-music .section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.why-join-music .subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
    font-weight: 500;
}

.why-join-music .section-header h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    position: relative;
    display: inline-block;
}

.why-join-music .section-header h2::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
}

.why-join-music .orange-text {
    color: #e67e22;
}

.why-join-music .section-description {
    font-size: 1.1rem;
    color: #777;
    max-width: 600px;
    margin: 20px auto 0;
    line-height: 1.6;
    font-style: italic;
}

/* Benefits Grid */
.why-join-music .benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

/* Benefit Card */
.why-join-music .benefit-card {
    background: white;
    border-radius: 20px;
    padding: 40px 25px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.02);
    border: 1px solid rgba(230, 126, 34, 0.1);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.why-join-music .benefit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(135deg, rgba(230, 126, 34, 0.02), transparent);
    transition: height 0.5s ease;
    z-index: 0;
}

.why-join-music .benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230, 126, 34, 0.1);
    border-color: rgba(230, 126, 34, 0.3);
}

.why-join-music .benefit-card:hover::before {
    height: 100%;
}

/* Icon Wrapper */
.why-join-music .benefit-icon-wrapper {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-join-music .benefit-icon {
    width: 80px;
    height: 80px;
    background: rgba(230, 126, 34, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(230, 126, 34, 0.2);
}

.why-join-music .benefit-card:hover .benefit-icon {
    background: #e67e22;
    transform: scale(1.1);
    border-color: #e67e22;
}

.why-join-music .benefit-icon i {
    font-size: 2.2rem;
    color: #e67e22;
    transition: all 0.5s ease;
}

.why-join-music .benefit-card:hover .benefit-icon i {
    color: white;
}

/* Icon Glow Effect */
.why-join-music .benefit-icon-wrapper::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 1;
}

.why-join-music .benefit-card:hover .benefit-icon-wrapper::after {
    opacity: 1;
    animation: iconPulse 2s infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 0.1;
    }
}

/* Benefit Text */
.why-join-music .benefit-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.why-join-music .benefit-card:hover h3 {
    color: #e67e22;
}

.why-join-music .benefit-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
    flex-grow: 1;
}

/* Benefit Line */
.why-join-music .benefit-line {
    width: 40px;
    height: 2px;
    background: #e67e22;
    margin: 0 auto;
    transition: width 0.5s ease;
    position: relative;
    z-index: 2;
}

.why-join-music .benefit-card:hover .benefit-line {
    width: 80px;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .why-join-music .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .why-join-music {
        padding: 70px 0;
    }
    
    .why-join-music .benefits-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .why-join-music .section-header h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 480px) {
    .why-join-music .benefit-card {
        padding: 30px 20px;
    }
}
/* ===== TESTIMONIALS SECTION - ELEGANT & DIPLOMATIC ===== */
.testimonials-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #2c3e50, #1e2b37);
    position: relative;
    overflow: hidden;
}

/* Decorative Music Notes Background */
.testimonials-section::before {
    content: '♪ ♪ ♪';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.03);
    font-family: serif;
    line-height: 1;
    transform: rotate(-15deg);
    pointer-events: none;
}

.testimonials-section::after {
    content: '♫ ♫ ♫';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.03);
    font-family: serif;
    line-height: 1;
    transform: rotate(15deg);
    pointer-events: none;
}

/* Section Header */
.testimonials-section .section-header {
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
}

.testimonials-section .section-subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
    font-weight: 500;
}

.testimonials-section .section-title {
    font-size: 3rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.testimonials-section .orange-text {
    color: #e67e22;
}

.testimonials-section .section-description {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.7);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

/* Testimonial Card */
.testimonial-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230,126,34,0.5);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
    background: rgba(255,255,255,0.08);
}

/* Testimonial Icon */
.testimonial-icon {
    margin-bottom: 20px;
}

.testimonial-icon i {
    font-size: 2.5rem;
    color: #e67e22;
    opacity: 0.5;
    transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-icon i {
    opacity: 1;
    transform: scale(1.1);
}

/* Testimonial Content */
.testimonial-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.testimonial-text {
    color: rgba(255,255,255,0.9);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    font-style: italic;
    position: relative;
    flex-grow: 1;
}

/* Testimonial Author */
.testimonial-author {
    border-top: 1px solid rgba(230,126,34,0.3);
    padding-top: 20px;
    margin-top: auto;
}

.testimonial-author strong {
    display: block;
    color: #e67e22;
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.testimonial-author span {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Decorative Element */
.testimonial-decoration {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(230,126,34,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    transition: all 0.4s ease;
}

.testimonial-card:hover .testimonial-decoration {
    transform: scale(1.5);
    opacity: 0.5;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .testimonials-section {
        padding: 70px 0;
    }
    
    .testimonials-section .section-title {
        font-size: 2.2rem;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .testimonial-card {
        padding: 30px 25px;
    }
    
    .testimonials-section::before,
    .testimonials-section::after {
        font-size: 6rem;
    }
}

@media (max-width: 480px) {
    .testimonial-card {
        padding: 25px 20px;
    }
    
    .testimonial-text {
        font-size: 0.95rem;
    }
}
/* ===== ABOUT PAGE - CINEMATIC STYLES ===== */

/* About Hero Section */
.about-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-top: -80px;
    padding-top: 80px;
}

.about-hero-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e, #16213e), url('images/about/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    z-index: 1;
    animation: slowZoom 20s infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.8) 100%);
    z-index: 2;
}

/* Particles */
.about-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}

.about-hero-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(230, 126, 34, 0.3);
    border-radius: 50%;
    animation: floatParticle 15s infinite linear;
}

.about-hero-particles .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.about-hero-particles .particle:nth-child(2) { top: 60%; right: 15%; animation-delay: 3s; }
.about-hero-particles .particle:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 6s; }
.about-hero-particles .particle:nth-child(4) { top: 40%; right: 25%; animation-delay: 9s; }
.about-hero-particles .particle:nth-child(5) { bottom: 50%; left: 30%; animation-delay: 12s; }

@keyframes floatParticle {
    0% { transform: translateY(0) translateX(0); opacity: 0.3; }
    25% { transform: translateY(-50px) translateX(30px); opacity: 0.8; }
    50% { transform: translateY(30px) translateX(-30px); opacity: 0.3; }
    75% { transform: translateY(-30px) translateX(50px); opacity: 0.8; }
    100% { transform: translateY(0) translateX(0); opacity: 0.3; }
}

/* Hero Content */
.about-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.about-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.about-hero-logo {
    margin-bottom: 30px;
    animation: fadeInDown 1s ease;
}

.about-hero-logo img {
    width: 120px;
    height: auto;
    filter: brightness(0) invert(1);
}

.about-hero-title {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.about-hero-title .title-line {
    display: block;
}

.about-hero-title .highlight {
    color: #e67e22;
    text-shadow: 0 0 30px rgba(230, 126, 34, 0.5);
    animation: glowPulse 3s infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 30px rgba(230, 126, 34, 0.5); }
    50% { text-shadow: 0 0 50px rgba(230, 126, 34, 0.8); }
}

.about-hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 50px;
    color: rgba(255,255,255,0.9);
    letter-spacing: 2px;
}

/* Hero Stats */
.about-hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.about-hero-stats .stat-item {
    text-align: center;
}

.about-hero-stats .stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #e67e22;
    display: block;
    line-height: 1;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.about-hero-stats .stat-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    width: 30px;
    height: 50px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 25px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: #e67e22;
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% { top: 8px; opacity: 1; }
    100% { top: 25px; opacity: 0; }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* ===== OUR STORY SECTION ===== */
.about-story {
    padding: 120px 0;
    background: #fff;
    position: relative;
    overflow: hidden;
}

.about-story::before {
    content: '2015';
    position: absolute;
    top: 50px;
    right: 50px;
    font-size: 15rem;
    font-weight: 900;
    color: rgba(230, 126, 34, 0.03);
    font-family: 'Playfair Display', serif;
    line-height: 1;
    transform: rotate(15deg);
    pointer-events: none;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.story-content .section-tag {
    display: inline-block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-weight: 600;
    position: relative;
}

.story-content .section-tag::before,
.story-content .section-tag::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30px;
    height: 1px;
    background: #e67e22;
}

.story-content .section-tag::before {
    right: -40px;
}

.story-content .section-tag::after {
    left: -40px;
}

.story-title {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
    color: #2c3e50;
}

.story-text .lead {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.8;
    color: #555;
    margin-bottom: 25px;
    font-style: italic;
    border-left: 4px solid #e67e22;
    padding-left: 25px;
}

.story-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #666;
    margin-bottom: 20px;
}

/* Milestones */
.story-milestones {
    display: flex;
    gap: 40px;
    margin-top: 40px;
    flex-wrap: wrap;
}

.milestone {
    text-align: center;
    min-width: 100px;
}

.milestone-year {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #e67e22;
    font-family: 'Playfair Display', serif;
    margin-bottom: 5px;
}

.milestone-desc {
    font-size: 0.85rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Story Image */
.story-image {
    position: relative;
}

.story-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.story-image-caption {
    position: absolute;
    bottom: -20px;
    left: 30px;
    background: white;
    padding: 15px 25px;
    border-radius: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-left: 4px solid #e67e22;
}

.story-image-caption span {
    color: #2c3e50;
    font-weight: 500;
    font-size: 0.95rem;
}

/* ===== MISSION & VISION ===== */
.mission-vision {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    position: relative;
    overflow: hidden;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.mission-card, .vision-card {
    background: white;
    border-radius: 30px;
    padding: 50px 40px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.05);
    transition: all 0.5s ease;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(230,126,34,0.1);
}

.mission-card:hover, .vision-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 40px 80px rgba(230,126,34,0.15);
    border-color: rgba(230,126,34,0.3);
}

.mission-card::before, .vision-card::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(230,126,34,0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.card-icon {
    width: 80px;
    height: 80px;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    transition: all 0.5s ease;
}

.mission-card:hover .card-icon,
.vision-card:hover .card-icon {
    background: #e67e22;
    transform: scale(1.1);
}

.card-icon i {
    font-size: 2.5rem;
    color: #e67e22;
    transition: all 0.5s ease;
}

.mission-card:hover .card-icon i,
.vision-card:hover .card-icon i {
    color: white;
}

.mission-card h3, .vision-card h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
}

.mission-card p, .vision-card p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.card-footer {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.card-footer span {
    background: #f8f9fa;
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 0.85rem;
    color: #e67e22;
    border: 1px solid rgba(230,126,34,0.2);
    transition: all 0.3s ease;
}

.card-footer span:hover {
    background: #e67e22;
    color: white;
}

/* ===== CORE VALUES ===== */
.core-values {
    padding: 100px 0;
    background: white;
}

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

.value-card {
    background: #f8f9fa;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.4s ease;
    border: 1px solid rgba(230,126,34,0.1);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(230,126,34,0.1);
    border-color: rgba(230,126,34,0.3);
}

.value-card:hover::before {
    transform: translateX(100%);
}

.value-icon {
    width: 70px;
    height: 70px;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.value-card:hover .value-icon {
    background: #e67e22;
    transform: scale(1.1);
}

.value-icon i {
    font-size: 2rem;
    color: #e67e22;
    transition: all 0.4s ease;
}

.value-card:hover .value-icon i {
    color: white;
}

.value-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.value-card p {
    color: #666;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 0;
}

/* ===== IMPACT NUMBERS ===== */
.impact-numbers {
    padding: 80px 0;
    background: linear-gradient(135deg, #2c3e50, #1e2b37);
    position: relative;
    overflow: hidden;
}

.impact-numbers::before {
    content: '★';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 15rem;
    color: rgba(255,255,255,0.03);
    font-family: serif;
    transform: rotate(15deg);
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
    z-index: 2;
}

.impact-item {
    text-align: center;
    padding: 30px;
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.impact-item:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.1);
    border-color: #e67e22;
}

.impact-number {
    display: block;
    font-size: 3.5rem;
    font-weight: 800;
    color: #e67e22;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.impact-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* ===== LEADERSHIP ===== */
.leadership {
    padding: 100px 0;
    background: #f8f9fa;
}

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

.leader-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(230,126,34,0.1);
}

.leader-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.15);
    border-color: #e67e22;
}

.leader-image {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
}

.leader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.leader-card:hover .leader-image img {
    transform: scale(1.1);
}

.leader-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: bottom 0.3s ease;
}

.leader-card:hover .leader-social {
    bottom: 0;
}

.leader-social a {
    width: 40px;
    height: 40px;
    background: #e67e22;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.leader-social a:hover {
    background: white;
    color: #e67e22;
    transform: scale(1.1);
}

.leader-info {
    padding: 25px 20px;
    text-align: center;
}

.leader-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.leader-title {
    color: #e67e22;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leader-bio {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== GLOBAL PARTNERS ===== */
.global-partners {
    padding: 80px 0;
    background: white;
}

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

.partner-item {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.partner-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(230,126,34,0.1);
    border-color: #e67e22;
}

.partner-item img {
    max-width: 100%;
    max-height: 60px;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.4s ease;
}

.partner-item:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* ===== SPONSOR CTA ===== */
.sponsor-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.sponsor-cta::before {
    content: '★';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 15rem;
    color: rgba(255,255,255,0.1);
    font-family: serif;
    transform: rotate(-15deg);
}

.sponsor-cta::after {
    content: '★';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 15rem;
    color: rgba(255,255,255,0.1);
    font-family: serif;
    transform: rotate(15deg);
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.sponsor-cta h2 {
    font-size: 4rem;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
}

.sponsor-cta p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
}

.cta-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 50px;
}

.cta-features .feature {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
}

.cta-features .feature i {
    font-size: 1.5rem;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-sponsor, .btn-sponsor-outline {
    display: inline-block;
    padding: 18px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-sponsor {
    background: white;
    color: #e67e22;
    border: 2px solid white;
}

.btn-sponsor:hover {
    background: transparent;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.btn-sponsor-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-sponsor-outline:hover {
    background: white;
    color: #e67e22;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1024px) {
    .about-hero-title {
        font-size: 4rem;
    }
    
    .story-grid,
    .mission-vision-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .values-grid,
    .leadership-grid,
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .impact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: 3rem;
    }
    
    .about-hero-stats {
        gap: 30px;
    }
    
    .about-hero-stats .stat-number {
        font-size: 2.2rem;
    }
    
    .story-title {
        font-size: 2.5rem;
    }
    
    .values-grid,
    .leadership-grid,
    .partners-grid,
    .impact-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
    
    .btn-sponsor,
    .btn-sponsor-outline {
        width: 100%;
        text-align: center;
    }
    
    .sponsor-cta h2 {
        font-size: 2.5rem;
    }
}

@media (max-width: 480px) {
    .about-hero-title {
        font-size: 2.2rem;
    }
    
    .about-hero-subtitle {
        font-size: 1rem;
    }
    
    .story-milestones {
        justify-content: center;
    }
    
    .story-image-caption {
        left: 20px;
        right: 20px;
        text-align: center;
    }
}
/* FORCE LOGO TO BE BIG - UPDATED */
.navbar .logo a {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.navbar .logo-img {
    height: 80px !important;  /* Force big size */
    width: auto !important;
    max-width: none !important;
    display: block !important;
}

.navbar .logo-text {
    font-size: 2.2rem !important;  /* Force big text */
    font-weight: 800 !important;
    color: #2c3e50;
    line-height: 1.2;
}

.navbar .logo-text span {
    color: #e67e22;
    font-weight: 700;
}

/* For even bigger on desktop */
@media (min-width: 992px) {
    .navbar .logo-img {
        height: 100px !important;
    }
    
    .navbar .logo-text {
        font-size: 2.5rem !important;
    }
}

/* Adjust navbar height to fit bigger logo */
.navbar {
    padding: 15px 5%;
    min-height: 100px;
}
/* ===== ABOUT HERO LOGO - BIG & BOLD ===== */
.about-logo-container {
    width: 280px !important;
    height: 280px !important;
    margin: 0 auto 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeInDown 1s ease;
}

.about-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1); /* Makes logo white */
    animation: logoPulse 3s infinite ease-in-out;
}

/* Logo Pulse Animation */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* Even bigger on large screens */
@media (min-width: 1200px) {
    .about-logo-container {
        width: 350px !important;
        height: 350px !important;
    }
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .about-logo-container {
        width: 200px !important;
        height: 200px !important;
    }
}

/* Make title bigger too */
.about-hero-title {
    font-size: 4.5rem !important;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .about-hero-title {
        font-size: 3rem !important;
    }
}

/* Stats styling */
.about-hero-stats .stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: #e67e22;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
}

.about-hero-stats .stat-label {
    font-size: 0.9rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.7);
}
/* ===== ART & CRAFT ACADEMY PAGE STYLES ===== */

/* Art Hero Section */
.art-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

.art-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c3e50, #8e44ad), url('images/art/art-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    z-index: 1;
    animation: slowZoom 20s infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.art-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

.art-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.art-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Art Logo */
.art-logo-container {
    position: relative;
    width: 250px;
    height: 250px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.art-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1);
}

.art-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes glowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}

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

/* Art Hero Typography */
.art-hero-subtitle {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.art-hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 900;
}

.art-hero-content h1 {
    font-size: 4.5rem;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.art-hero-tagline {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
}

/* Art Hero Features */
.art-hero-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.art-hero-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.1);
    padding: 10px 25px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
}

.art-hero-features i {
    color: #e67e22;
    font-size: 1.2rem;
}

/* Art Hero Buttons */
.art-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-art-primary, .btn-art-secondary {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-art-primary {
    background: #e67e22;
    color: white;
    border: 2px solid #e67e22;
}

.btn-art-primary:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230,126,34,0.3);
}

.btn-art-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-art-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

/* ===== ART INTRO SECTION ===== */
.art-intro {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.art-intro-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.art-intro-text .section-subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-weight: 500;
}

.art-intro-text h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
}

.art-intro-text .lead-text {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    border-left: 4px solid #e67e22;
    padding-left: 25px;
}

.art-intro-text p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Art Stats */
.art-stats {
    display: flex;
    gap: 50px;
    margin-top: 40px;
}

.art-stats .stat-item {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    min-width: 100px;
    transition: all 0.3s ease;
}

.art-stats .stat-item:hover {
    transform: translateY(-5px);
    border-color: #e67e22;
}

.art-stats .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #e67e22;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.art-stats .stat-label {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Art Intro Image */
.art-intro-image {
    position: relative;
}

.art-intro-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.art-experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: white;
    padding: 25px;
    border-radius: 50%;
    text-align: center;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 2px solid rgba(230,126,34,0.2);
    transition: all 0.3s ease;
}

.art-experience-badge:hover {
    transform: scale(1.05);
    border-color: #e67e22;
}

.art-experience-badge .years {
    font-size: 2.2rem;
    font-weight: 700;
    color: #e67e22;
    line-height: 1;
    font-family: 'Playfair Display', serif;
}

/* ===== ART CATEGORIES SECTION ===== */
.art-categories {
    padding: 100px 0;
    background: white;
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.category-card {
    background: white;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.category-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.1);
    border-color: #e67e22;
}

.category-card:hover::before {
    transform: translateX(100%);
}

.category-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.category-card:hover .category-icon {
    transform: scale(1.1);
}

.category-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.category-card p {
    color: #777;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.category-features {
    list-style: none;
    padding: 0;
    text-align: center;
}

.category-features li {
    padding: 8px 0;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s ease;
    position: relative;
}

.category-features li:last-child {
    border-bottom: none;
}

.category-features li:hover {
    color: #e67e22;
    transform: translateX(5px);
}

/* ===== MASTER ARTISTS SECTION ===== */
.art-masters {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.masters-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.master-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(230,126,34,0.1);
}

.master-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.15);
    border-color: #e67e22;
}

.master-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.master-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.master-card:hover .master-image img {
    transform: scale(1.1);
}

.master-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: bottom 0.3s ease;
}

.master-card:hover .master-social {
    bottom: 0;
}

.master-social a {
    width: 36px;
    height: 36px;
    background: #e67e22;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.master-social a:hover {
    background: white;
    color: #e67e22;
    transform: scale(1.1);
}

.master-info {
    padding: 25px 20px;
    text-align: center;
}

.master-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.master-title {
    color: #e67e22;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.master-bio {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== ART GALLERY SECTION ===== */
.art-gallery {
    padding: 100px 0;
    background: white;
}

.art-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 250px;
    cursor: pointer;
}

.gallery-item.large {
    grid-column: span 1;
    grid-row: span 2;
    height: 520px;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #e67e22;
}

.gallery-overlay p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ===== ART WHY JOIN SECTION ===== */
.art-why-join {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.art-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.art-benefit-card {
    text-align: center;
    padding: 40px 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
}

.art-benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.1);
    border-color: #e67e22;
}

.art-benefit-card .benefit-icon {
    width: 80px;
    height: 80px;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.art-benefit-card:hover .benefit-icon {
    background: #e67e22;
    transform: scale(1.1);
}

.art-benefit-card .benefit-icon i {
    font-size: 2.2rem;
    color: #e67e22;
    transition: all 0.4s ease;
}

.art-benefit-card:hover .benefit-icon i {
    color: white;
}

.art-benefit-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.art-benefit-card p {
    color: #777;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ===== ART CTA SECTION ===== */
.art-cta {
    padding: 80px 0;
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.art-cta::before {
    content: '🎨';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.1);
    transform: rotate(-15deg);
}

.art-cta::after {
    content: '🖌️';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.1);
    transform: rotate(15deg);
}

.art-cta h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 2;
}

.art-cta p {
    font-size: 1.2rem;
    margin-bottom: 40px;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.btn-cta-art, .btn-cta-art-outline {
    display: inline-block;
    padding: 15px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-cta-art {
    background: white;
    color: #8e44ad;
    border: 2px solid white;
}

.btn-cta-art:hover {
    background: transparent;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.btn-cta-art-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-cta-art-outline:hover {
    background: white;
    color: #8e44ad;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .categories-grid,
    .masters-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .art-intro-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .masters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .art-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .art-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .gallery-item.large {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .art-hero-content h1 {
        font-size: 3rem;
    }
    
    .art-hero-subtitle {
        font-size: 1.8rem;
    }
    
    .art-logo-container {
        width: 180px;
        height: 180px;
    }
    
    .art-hero-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .art-hero-buttons {
        flex-direction: column;
    }
    
    .art-intro-text h2 {
        font-size: 2.2rem;
    }
    
    .art-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .art-experience-badge {
        width: 100px;
        height: 100px;
        padding: 15px;
        bottom: -20px;
        right: -20px;
    }
    
    .categories-grid,
    .masters-grid,
    .art-benefits-grid,
    .art-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .art-cta h2 {
        font-size: 2.2rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .art-logo-container {
        width: 150px;
        height: 150px;
    }
    
    .art-hero-content h1 {
        font-size: 2.5rem;
    }
}
/* ===== ART HERO LOGO - BIG & BOLD ===== */
.art-logo-container {
    width: 300px !important;
    height: 300px !important;
    margin: 0 auto 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}

.art-logo-container .logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* REMOVED: filter: brightness(0) invert(1);  <- Delete this line */
    animation: artLogoPulse 3s infinite ease-in-out;
}

.art-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: artGlowPulse 3s infinite ease-in-out;
    z-index: 1;
}

@keyframes artLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes artGlowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}
/* ===== ICT & ROBOTICS ACADEMY PAGE STYLES ===== */

/* Tech Hero Section - Futuristic */
.tech-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
    background: #0a0a0a;
}

.tech-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a0a, #1a2a3a), url('images/tech/tech-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    z-index: 1;
    animation: slowZoom 20s infinite alternate;
}

@keyframes slowZoom {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.tech-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,20,40,0.9) 100%);
    z-index: 2;
}

/* Tech Particles */
.tech-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.tech-particles .particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #00ffff;
    border-radius: 50%;
    box-shadow: 0 0 10px #00ffff;
    animation: techFloat 15s infinite linear;
}

.tech-particles .particle:nth-child(1) { top: 10%; left: 20%; animation-delay: 0s; }
.tech-particles .particle:nth-child(2) { top: 30%; right: 15%; animation-delay: 2s; }
.tech-particles .particle:nth-child(3) { bottom: 40%; left: 30%; animation-delay: 4s; }
.tech-particles .particle:nth-child(4) { top: 60%; right: 40%; animation-delay: 6s; }
.tech-particles .particle:nth-child(5) { bottom: 20%; left: 50%; animation-delay: 8s; }
.tech-particles .particle:nth-child(6) { top: 70%; right: 60%; animation-delay: 10s; }
.tech-particles .particle:nth-child(7) { bottom: 50%; left: 70%; animation-delay: 12s; }
.tech-particles .particle:nth-child(8) { top: 40%; right: 80%; animation-delay: 14s; }

@keyframes techFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
    25% {
        transform: translateY(-50px) translateX(30px);
        opacity: 0.8;
    }
    50% {
        transform: translateY(30px) translateX(-30px);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-30px) translateX(50px);
        opacity: 0.8;
    }
    100% {
        transform: translateY(0) translateX(0);
        opacity: 1;
    }
}

.tech-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.tech-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Tech Logo */
.tech-logo-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.tech-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 5;
    animation: techLogoPulse 3s infinite ease-in-out;
    filter: brightness(1.2) drop-shadow(0 0 20px rgba(0,255,255,0.5));
}

.tech-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(0,255,255,0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: techGlowPulse 3s infinite ease-in-out;
    z-index: 4;
}

.tech-logo-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    border: 2px solid rgba(0,255,255,0.2);
    border-radius: 50%;
    animation: techRingRotate 10s infinite linear;
    z-index: 3;
}

@keyframes techLogoPulse {
    0%, 100% { transform: scale(1); filter: brightness(1.2) drop-shadow(0 0 20px rgba(0,255,255,0.5)); }
    50% { transform: scale(1.08); filter: brightness(1.5) drop-shadow(0 0 40px rgba(0,255,255,0.8)); }
}

@keyframes techGlowPulse {
    0%, 100% { 
        opacity: 0.4; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.8; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}

@keyframes techRingRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Tech Hero Typography */
.tech-hero-subtitle {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-shadow: 0 0 20px rgba(0,255,255,0.5);
}

.tech-hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(230,126,34,0.5);
}

.tech-hero-content h1 {
    font-size: 5rem;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-shadow: 0 0 30px rgba(0,255,255,0.5);
}

.tech-hero-tagline {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    font-family: 'Montserrat', sans-serif;
}

/* Tech Hero Features */
.tech-hero-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.tech-hero-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    background: rgba(0, 255, 255, 0.1);
    padding: 10px 25px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: white;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
}

.tech-hero-features i {
    color: #00ffff;
    font-size: 1.2rem;
}

/* Tech Hero Buttons */
.tech-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-tech-primary, .btn-tech-secondary {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    font-family: 'Orbitron', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.btn-tech-primary {
    background: transparent;
    color: #00ffff;
    border: 2px solid #00ffff;
    box-shadow: 0 0 20px rgba(0,255,255,0.3);
}

.btn-tech-primary:hover {
    background: #00ffff;
    color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(0,255,255,0.6);
}

.btn-tech-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-tech-secondary:hover {
    background: white;
    color: #0a0a0a;
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(255,255,255,0.6);
}

/* Tech Scroll Indicator */
.tech-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    z-index: 10;
}

.tech-scroll-indicator span {
    width: 30px;
    height: 50px;
    border: 2px solid rgba(0,255,255,0.3);
    border-radius: 25px;
    position: relative;
}

.tech-scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 10px;
    background: #00ffff;
    border-radius: 2px;
    animation: techScroll 2s infinite;
    box-shadow: 0 0 10px #00ffff;
}

@keyframes techScroll {
    0% { top: 8px; opacity: 1; }
    100% { top: 25px; opacity: 0; }
}

/* ===== TECH INTRO SECTION ===== */
.tech-intro {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a0a0a, #1a2a3a);
    color: white;
}

.tech-intro-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.tech-intro-text .section-subtitle {
    display: block;
    color: #00ffff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 15px;
    font-weight: 500;
    text-shadow: 0 0 10px #00ffff;
}

.tech-intro-text h2 {
    font-size: 3.2rem;
    font-weight: 600;
    color: white;
    margin-bottom: 25px;
    font-family: 'Orbitron', sans-serif;
    text-transform: uppercase;
}

.tech-intro-text .lead-text {
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 1.8;
    color: #ccc;
    margin-bottom: 20px;
    border-left: 4px solid #00ffff;
    padding-left: 25px;
}

.tech-intro-text p {
    color: #aaa;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Tech Stats */
.tech-stats {
    display: flex;
    gap: 50px;
    margin-top: 40px;
}

.tech-stats .stat-item {
    text-align: center;
    background: rgba(0,255,255,0.05);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(0,255,255,0.2);
    min-width: 100px;
    transition: all 0.3s ease;
}

.tech-stats .stat-item:hover {
    transform: translateY(-5px);
    border-color: #00ffff;
    box-shadow: 0 0 30px rgba(0,255,255,0.2);
}

.tech-stats .stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ffff;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 20px #00ffff;
}

.tech-stats .stat-label {
    font-size: 0.8rem;
    color: #ccc;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Tech Intro Image */
.tech-intro-image {
    position: relative;
}

.tech-intro-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0,255,255,0.2);
    border: 1px solid rgba(0,255,255,0.3);
}

.tech-experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(10px);
    padding: 25px;
    border-radius: 50%;
    text-align: center;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid #00ffff;
    box-shadow: 0 0 40px rgba(0,255,255,0.3);
}

.tech-experience-badge .years {
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ffff;
    line-height: 1;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 0 20px #00ffff;
}

.tech-experience-badge span:last-child {
    color: white;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== TECH TRACKS SECTION ===== */
.tech-tracks {
    padding: 100px 0;
    background: #0f0f0f;
}

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

.track-card {
    background: rgba(20,30,40,0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 25px;
    border: 1px solid rgba(0,255,255,0.2);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.track-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ffff, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.track-card:hover {
    transform: translateY(-10px);
    border-color: #00ffff;
    box-shadow: 0 0 50px rgba(0,255,255,0.2);
}

.track-card:hover::before {
    transform: translateX(100%);
}

.track-card.featured {
    border: 2px solid #00ffff;
    box-shadow: 0 0 30px rgba(0,255,255,0.3);
    transform: scale(1.05);
    z-index: 2;
}

.featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #00ffff;
    color: #0a0a0a;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 0 20px #00ffff;
}

.track-icon {
    width: 80px;
    height: 80px;
    background: rgba(0,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    border: 1px solid rgba(0,255,255,0.3);
    transition: all 0.4s ease;
}

.track-card:hover .track-icon {
    background: #00ffff;
    transform: scale(1.1);
    box-shadow: 0 0 30px #00ffff;
}

.track-icon i {
    font-size: 2.5rem;
    color: #00ffff;
    transition: all 0.4s ease;
}

.track-card:hover .track-icon i {
    color: #0a0a0a;
}

.track-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 10px;
    font-family: 'Orbitron', sans-serif;
    text-align: center;
}

.track-description {
    color: #aaa;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 1px solid rgba(0,255,255,0.2);
    padding-bottom: 20px;
}

.track-features {
    list-style: none;
    padding: 0;
    margin-bottom: 25px;
}

.track-features li {
    padding: 8px 0;
    color: #ccc;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.track-features li i {
    color: #00ffff;
    font-size: 1rem;
}

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

.level-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.level-badge.beginner {
    background: rgba(0,255,0,0.2);
    color: #00ff00;
    border: 1px solid #00ff00;
}

.level-badge.intermediate {
    background: rgba(255,255,0,0.2);
    color: #ffff00;
    border: 1px solid #ffff00;
}

.level-badge.advanced {
    background: rgba(255,0,0,0.2);
    color: #ff0000;
    border: 1px solid #ff0000;
}

/* ===== TECH GALLERY ===== */
.tech-gallery {
    padding: 100px 0;
    background: #0a0a0a;
}

.tech-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

.tech-gallery .gallery-item {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 250px;
    cursor: pointer;
    border: 1px solid rgba(0,255,255,0.2);
}

.tech-gallery .gallery-item.large {
    grid-column: span 1;
    grid-row: span 2;
    height: 520px;
}

.tech-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.tech-gallery .gallery-item:hover img {
    transform: scale(1.1);
}

.tech-gallery .gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.tech-gallery .gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.tech-gallery .gallery-overlay h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: #00ffff;
}

.tech-gallery .gallery-overlay p {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ===== TECH WHY JOIN SECTION ===== */
.tech-why-join {
    padding: 80px 0;
    background: linear-gradient(135deg, #0f0f0f, #1a2a3a);
}

.tech-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.tech-benefit-card {
    text-align: center;
    padding: 40px 30px;
    background: rgba(20,30,40,0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(0,255,255,0.2);
    transition: all 0.4s ease;
}

.tech-benefit-card:hover {
    transform: translateY(-10px);
    border-color: #00ffff;
    box-shadow: 0 0 50px rgba(0,255,255,0.2);
}

.tech-benefit-card .benefit-icon {
    width: 80px;
    height: 80px;
    background: rgba(0,255,255,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    border: 1px solid rgba(0,255,255,0.3);
    transition: all 0.4s ease;
}

.tech-benefit-card:hover .benefit-icon {
    background: #00ffff;
    transform: scale(1.1);
    box-shadow: 0 0 30px #00ffff;
}

.tech-benefit-card .benefit-icon i {
    font-size: 2.2rem;
    color: #00ffff;
    transition: all 0.4s ease;
}

.tech-benefit-card:hover .benefit-icon i {
    color: #0a0a0a;
}

.tech-benefit-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
    font-family: 'Orbitron', sans-serif;
}

.tech-benefit-card p {
    color: #aaa;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ===== TECH INSTRUCTORS SECTION ===== */
.tech-instructors {
    padding: 100px 0;
    background: #0f0f0f;
}

.instructors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.instructor-card {
    background: rgba(20,30,40,0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(0,255,255,0.2);
    transition: all 0.4s ease;
}

.instructor-card:hover {
    transform: translateY(-10px);
    border-color: #00ffff;
    box-shadow: 0 0 50px rgba(0,255,255,0.2);
}

.instructor-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.instructor-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.instructor-card:hover .instructor-image img {
    transform: scale(1.1);
}

.instructor-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    transition: bottom 0.3s ease;
}

.instructor-card:hover .instructor-social {
    bottom: 0;
}

.instructor-social a {
    width: 36px;
    height: 36px;
    background: #00ffff;
    color: #0a0a0a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.instructor-social a:hover {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 0 20px #00ffff;
}

.instructor-info {
    padding: 25px 20px;
    text-align: center;
}

.instructor-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: white;
    margin-bottom: 5px;
    font-family: 'Orbitron', sans-serif;
}

.instructor-title {
    color: #00ffff;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.instructor-bio {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== TECH TIMELINE ===== */
.tech-timeline {
    padding: 80px 0;
    background: #0a0a0a;
}

.timeline-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.timeline-item {
    text-align: center;
    padding: 40px 30px;
    background: rgba(20,30,40,0.8);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(0,255,255,0.2);
    position: relative;
    transition: all 0.4s ease;
}

.timeline-item:hover {
    transform: translateY(-10px);
    border-color: #00ffff;
    box-shadow: 0 0 50px rgba(0,255,255,0.2);
}

.timeline-number {
    font-size: 3rem;
    font-weight: 800;
    color: rgba(0,255,255,0.2);
    font-family: 'Orbitron', sans-serif;
    position: absolute;
    top: 10px;
    right: 20px;
    transition: all 0.4s ease;
}

.timeline-item:hover .timeline-number {
    color: rgba(0,255,255,0.4);
}

.timeline-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 15px;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    z-index: 2;
}

.timeline-item p {
    color: #aaa;
    line-height: 1.6;
    font-size: 0.95rem;
    position: relative;
    z-index: 2;
}

/* ===== TECH CTA SECTION ===== */
.tech-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #00ffff, #0066ff);
    color: #0a0a0a;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.tech-cta::before {
    content: '{ }';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.1);
    font-family: monospace;
    transform: rotate(-15deg);
}

.tech-cta::after {
    content: '</>';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.1);
    font-family: monospace;
    transform: rotate(15deg);
}

.tech-cta h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 20px;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}

.tech-cta p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.btn-cta-tech, .btn-cta-tech-outline {
    display: inline-block;
    padding: 15px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Orbitron', sans-serif;
}

.btn-cta-tech {
    background: #0a0a0a;
    color: #00ffff;
    border: 2px solid #0a0a0a;
}

.btn-cta-tech:hover {
    background: transparent;
    color: #0a0a0a;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.btn-cta-tech-outline {
    background: transparent;
    color: #0a0a0a;
    border: 2px solid #0a0a0a;
}

.btn-cta-tech-outline:hover {
    background: #0a0a0a;
    color: #00ffff;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .tracks-grid,
    .instructors-grid,
    .timeline-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .tech-intro-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .tech-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tech-gallery .gallery-item.large {
        height: 250px;
    }
}

@media (max-width: 768px) {
    .tech-hero-content h1 {
        font-size: 3.5rem;
    }
    
    .tech-hero-subtitle {
        font-size: 1.8rem;
    }
    
    .tech-logo-container {
        width: 200px;
        height: 200px;
    }
    
    .tech-hero-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .tech-hero-buttons {
        flex-direction: column;
    }
    
    .tech-intro-text h2 {
        font-size: 2.5rem;
    }
    
    .tech-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .tech-experience-badge {
        width: 100px;
        height: 100px;
        padding: 15px;
        bottom: -20px;
        right: -20px;
    }
    
    .tracks-grid,
    .instructors-grid,
    .tech-benefits-grid,
    .timeline-grid,
    .tech-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .tech-cta h2 {
        font-size: 2.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .tech-logo-container {
        width: 180px;
        height: 180px;
    }
    
    .tech-hero-content h1 {
        font-size: 2.5rem;
    }
}
/* ===== PUBLIC SPEAKING ACADEMY PAGE STYLES ===== */

/* Speak Hero Section */
.speak-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

.speak-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2c3e50, #c0392b), url('images/speak/speak-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
    z-index: 1;
    animation: slowZoom 20s infinite alternate;
}

.speak-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

.speak-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

.speak-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Speak Logo */
.speak-logo-container {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.speak-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: speakLogoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1);
}

.speak-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: speakGlowPulse 3s infinite ease-in-out;
    z-index: 1;
}

@keyframes speakLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes speakGlowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}

/* Speak Hero Typography */
.speak-hero-subtitle {
    font-size: 2.5rem;
    font-weight: 900;
    color: white;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.speak-hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 900;
}

.speak-hero-content h1 {
    font-size: 5rem;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.speak-hero-tagline {
    font-size: 1.8rem;
    margin-bottom: 30px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
}

/* Speak Hero Features */
.speak-hero-features {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.speak-hero-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.1);
    padding: 10px 25px;
    border-radius: 50px;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255,255,255,0.2);
}

.speak-hero-features i {
    color: #e67e22;
    font-size: 1.2rem;
}

/* Speak Hero Buttons */
.speak-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-speak-primary, .btn-speak-secondary {
    display: inline-block;
    padding: 15px 40px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.btn-speak-primary {
    background: #e67e22;
    color: white;
    border: 2px solid #e67e22;
}

.btn-speak-primary:hover {
    background: transparent;
    color: #e67e22;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230,126,34,0.3);
}

.btn-speak-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-speak-secondary:hover {
    background: white;
    color: #2c3e50;
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(255,255,255,0.2);
}

/* ===== SPEAK INTRO SECTION ===== */
.speak-intro {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.speak-intro-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.speak-intro-text .section-subtitle {
    display: block;
    color: #e67e22;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
    font-weight: 500;
}

.speak-intro-text h2 {
    font-size: 3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
}

.speak-intro-text .lead-text {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    border-left: 4px solid #e67e22;
    padding-left: 25px;
}

.speak-intro-text p {
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
}

/* Speak Stats */
.speak-stats {
    display: flex;
    gap: 50px;
    margin-top: 40px;
}

.speak-stats .stat-item {
    text-align: center;
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    min-width: 100px;
    transition: all 0.3s ease;
}

.speak-stats .stat-item:hover {
    transform: translateY(-5px);
    border-color: #e67e22;
}

.speak-stats .stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #e67e22;
    display: block;
    line-height: 1;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.speak-stats .stat-label {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Speak Intro Image */
.speak-intro-image {
    position: relative;
}

.speak-intro-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.speak-experience-badge {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: white;
    padding: 25px;
    border-radius: 50%;
    text-align: center;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border: 2px solid rgba(230,126,34,0.2);
    transition: all 0.3s ease;
}

.speak-experience-badge:hover {
    transform: scale(1.05);
    border-color: #e67e22;
}

.speak-experience-badge .years {
    font-size: 2.2rem;
    font-weight: 700;
    color: #e67e22;
    line-height: 1;
    font-family: 'Playfair Display', serif;
}

/* ===== SPEAK SKILLS SECTION ===== */
.speak-skills {
    padding: 100px 0;
    background: white;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.skill-card {
    background: white;
    border-radius: 20px;
    padding: 35px 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.skill-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.1);
    border-color: #e67e22;
}

.skill-card:hover::before {
    transform: translateX(100%);
}

.skill-icon {
    font-size: 3.5rem;
    margin-bottom: 20px;
    transition: transform 0.3s ease;
}

.skill-card:hover .skill-icon {
    transform: scale(1.1);
}

.skill-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 10px;
    font-family: 'Playfair Display', serif;
}

.skill-card p {
    color: #777;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 15px;
}

.skill-features {
    list-style: none;
    padding: 0;
    text-align: center;
}

.skill-features li {
    padding: 8px 0;
    color: #666;
    font-size: 0.9rem;
    border-bottom: 1px solid #f5f5f5;
    transition: all 0.2s ease;
    position: relative;
}

.skill-features li:last-child {
    border-bottom: none;
}

.skill-features li:hover {
    color: #e67e22;
    transform: translateX(5px);
}

/* ===== SPEAK LEVELS SECTION ===== */
.speak-levels {
    padding: 100px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

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

.level-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.level-card.featured {
    border: 2px solid #e67e22;
    transform: scale(1.05);
    box-shadow: 0 20px 40px rgba(230,126,34,0.15);
    z-index: 2;
}

.level-card .featured-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: #e67e22;
    color: white;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.level-number {
    font-size: 4rem;
    font-weight: 800;
    color: rgba(230,126,34,0.1);
    font-family: 'Playfair Display', serif;
    line-height: 1;
    margin-bottom: 10px;
}

.level-card h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.level-desc {
    color: #777;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    border-bottom: 1px dashed #eee;
    padding-bottom: 20px;
}

.level-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.level-features li {
    padding: 10px 0;
    color: #666;
    font-size: 0.95rem;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    padding-left: 25px;
}

.level-features li::before {
    content: '✓';
    color: #e67e22;
    position: absolute;
    left: 0;
    font-weight: bold;
}

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

.level-duration {
    display: inline-block;
    padding: 8px 20px;
    background: rgba(230,126,34,0.1);
    color: #e67e22;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* ===== SPEAK COACHES SECTION ===== */
.speak-coaches {
    padding: 100px 0;
    background: white;
}

.coaches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.coach-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    transition: all 0.4s ease;
    border: 1px solid rgba(230,126,34,0.1);
}

.coach-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.15);
    border-color: #e67e22;
}

.coach-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.coach-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.coach-card:hover .coach-image img {
    transform: scale(1.1);
}

.coach-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: bottom 0.3s ease;
}

.coach-card:hover .coach-social {
    bottom: 0;
}

.coach-social a {
    width: 36px;
    height: 36px;
    background: #e67e22;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.coach-social a:hover {
    background: white;
    color: #e67e22;
    transform: scale(1.1);
}

.coach-info {
    padding: 25px 20px;
    text-align: center;
}

.coach-info h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.coach-title {
    color: #e67e22;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.coach-bio {
    color: #777;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ===== SPEAK STORIES SECTION ===== */
.speak-stories {
    padding: 100px 0;
    background: linear-gradient(135deg, #2c3e50, #c0392b);
    color: white;
    position: relative;
    overflow: hidden;
}

.speak-stories::before {
    content: '"';
    position: absolute;
    top: 50px;
    left: 50px;
    font-size: 20rem;
    color: rgba(255,255,255,0.03);
    font-family: serif;
    transform: rotate(-15deg);
}

.speak-stories::after {
    content: '"';
    position: absolute;
    bottom: 50px;
    right: 50px;
    font-size: 20rem;
    color: rgba(255,255,255,0.03);
    font-family: serif;
    transform: rotate(15deg);
}

.speak-stories .section-header h2 {
    color: white;
}

.speak-stories .section-description {
    color: rgba(255,255,255,0.8);
}

.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    position: relative;
    z-index: 2;
}

.story-card {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 40px 30px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: all 0.4s ease;
}

.story-card:hover {
    transform: translateY(-10px);
    background: rgba(255,255,255,0.08);
    border-color: #e67e22;
}

.quote-icon {
    color: #e67e22;
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: 20px;
}

.story-text {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 25px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
}

.story-author {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
}

.story-author strong {
    display: block;
    color: #e67e22;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.story-author span {
    color: rgba(255,255,255,0.5);
    font-size: 0.85rem;
}

/* ===== SPEAK WHY JOIN SECTION ===== */
.speak-why-join {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa, #ffffff);
}

.speak-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 50px;
}

.speak-benefit-card {
    text-align: center;
    padding: 40px 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.03);
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
}

.speak-benefit-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.1);
    border-color: #e67e22;
}

.speak-benefit-card .benefit-icon {
    width: 80px;
    height: 80px;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
    transition: all 0.4s ease;
}

.speak-benefit-card:hover .benefit-icon {
    background: #e67e22;
    transform: scale(1.1);
}

.speak-benefit-card .benefit-icon i {
    font-size: 2.2rem;
    color: #e67e22;
    transition: all 0.4s ease;
}

.speak-benefit-card:hover .benefit-icon i {
    color: white;
}

.speak-benefit-card h3 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.speak-benefit-card p {
    color: #777;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ===== SPEAK CTA SECTION ===== */
.speak-cta {
    padding: 100px 0;
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.speak-cta::before {
    content: '🎤';
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.1);
    transform: rotate(-15deg);
}

.speak-cta::after {
    content: '🗣️';
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size: 12rem;
    color: rgba(255,255,255,0.1);
    transform: rotate(15deg);
}

.speak-cta h2 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
    font-family: 'Playfair Display', serif;
    position: relative;
    z-index: 2;
}

.speak-cta p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    opacity: 0.9;
    position: relative;
    z-index: 2;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.btn-cta-speak, .btn-cta-speak-outline {
    display: inline-block;
    padding: 15px 45px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-cta-speak {
    background: white;
    color: #e67e22;
    border: 2px solid white;
}

.btn-cta-speak:hover {
    background: transparent;
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.btn-cta-speak-outline {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-cta-speak-outline:hover {
    background: white;
    color: #e67e22;
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 1200px) {
    .skills-grid,
    .coaches-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .speak-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .speak-intro-wrapper {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .skills-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .levels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .coaches-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .stories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .speak-hero-content h1 {
        font-size: 3.5rem;
    }
    
    .speak-hero-subtitle {
        font-size: 1.8rem;
    }
    
    .speak-logo-container {
        width: 200px;
        height: 200px;
    }
    
    .speak-hero-features {
        flex-direction: column;
        gap: 15px;
    }
    
    .speak-hero-buttons {
        flex-direction: column;
    }
    
    .speak-intro-text h2 {
        font-size: 2.2rem;
    }
    
    .speak-stats {
        flex-direction: column;
        align-items: center;
    }
    
    .speak-experience-badge {
        width: 100px;
        height: 100px;
        padding: 15px;
        bottom: -20px;
        right: -20px;
    }
    
    .skills-grid,
    .levels-grid,
    .coaches-grid,
    .stories-grid,
    .speak-benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .level-card.featured {
        transform: scale(1);
    }
    
    .speak-cta h2 {
        font-size: 2.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .speak-logo-container {
        width: 180px;
        height: 180px;
    }
    
    .speak-hero-content h1 {
        font-size: 2.5rem;
    }
}
/* ===== SPEAK HERO LOGO - BIG & BOLD (ORIGINAL COLORS) ===== */
.speak-logo-container {
    width: 300px !important;
    height: 300px !important;
    margin: 0 auto 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative;
}

.speak-logo-container .logo-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    /* REMOVED: filter: brightness(0) invert(1);  <- Delete this line */
    animation: speakLogoPulse 3s infinite ease-in-out;
}

.speak-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.5) 0%, transparent 70%);
    border-radius: 50%;
    animation: speakGlowPulse 3s infinite ease-in-out;
    z-index: 1;
}

@keyframes speakLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

@keyframes speakGlowPulse {
    0%, 100% { 
        opacity: 0.5; 
        transform: translate(-50%, -50%) scale(1); 
    }
    50% { 
        opacity: 0.9; 
        transform: translate(-50%, -50%) scale(1.3); 
    }
}

/* Even bigger on large screens */
@media (min-width: 1200px) {
    .speak-logo-container {
        width: 350px !important;
        height: 350px !important;
    }
}

/* Responsive for tablets */
@media (max-width: 992px) {
    .speak-logo-container {
        width: 250px !important;
        height: 250px !important;
    }
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .speak-logo-container {
        width: 200px !important;
        height: 200px !important;
    }
}

/* Make title bigger too */
.speak-hero-content h1 {
    font-size: 4.5rem !important;
    margin-top: 20px;
}

@media (max-width: 768px) {
    .speak-hero-content h1 {
        font-size: 3rem !important;
    }
}
/* ===== ABOUT HERO TITLE FIX ===== */
.about-hero-title {
    font-size: 5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 30px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    text-align: center;
    position: relative;
}

.about-hero-title .title-line {
    display: block;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.about-hero-title .highlight {
    color: #e67e22;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    /* REMOVE any glow effect if present */
    animation: none; /* Remove any animation */
}

/* Make sure no glow is applied */
.about-hero-title .highlight {
    animation: none;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

/* Optional: If you want a very subtle shadow instead of glow */
.about-hero-title .highlight {
    color: #e67e22;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .about-hero-title {
        font-size: 3.5rem;
    }
}

@media (max-width: 480px) {
    .about-hero-title {
        font-size: 2.5rem;
    }
}
/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 40px;
}

/* Skill Card */
.skill-card {
    background: white;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border: 1px solid rgba(230,126,34,0.1);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.skill-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.skill-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(230,126,34,0.1);
    border-color: #e67e22;
}

.skill-card:hover::before {
    transform: translateX(100%);
}

/* Card Icon */
.card-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin: 0 auto 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-icon i {
    font-size: 2.5rem;
    color: #e67e22;
    position: relative;
    z-index: 2;
    transition: all 0.4s ease;
}

.skill-card:hover .card-icon i {
    color: white;
}

.icon-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    transition: all 0.4s ease;
}

.skill-card:hover .icon-bg {
    background: #e67e22;
    transform: translate(-50%, -50%) scale(1.1);
}

/* Card Text */
.skill-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #2c3e50;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.skill-card p {
    color: #666;
    line-height: 1.7;
    font-size: 0.95rem;
    margin-bottom: 25px;
}

/* Card Footer */
.card-footer {
    border-top: 1px solid rgba(230,126,34,0.2);
    padding-top: 20px;
}

.stat {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #e67e22;
    line-height: 1.2;
    font-family: 'Playfair Display', serif;
}

.stat-label {
    font-size: 0.8rem;
    color: #777;
    text-transform: uppercase;
    letter-spacing: 1px;
}
/* ===== INSPIRING LEGENDS SECTION - GENERIC FIX ===== */
section:has(h2:contains("Inspiring Legends")),
section:has(.legends-title),
section:has(.inspiration-box) {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    text-align: center;
}

/* Style the quote */
section:has(.inspiration-quote) .inspiration-quote {
    font-size: 1.4rem;
    font-style: italic;
    color: #2c3e50;
    max-width: 700px;
    margin: 30px auto;
    padding: 30px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-left: 4px solid #e67e22;
}

/* Style the button */
section:has(.btn-story) .btn-story {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 35px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    border: 2px solid #e67e22;
}

section:has(.btn-story) .btn-story i {
    transition: transform 0.3s ease;
}

section:has(.btn-story) .btn-story:hover i {
    transform: translateX(5px);
}
/* ===== SPORTSMANSHIP STORY - TEXT VISIBILITY FIX ===== */

/* Main story text - make it dark for readability */
.story-content p {
    color: #2c3e50 !important;  /* Dark blue-gray color */
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Inspiring Legends heading */
.inspiration-box h4,
.legacy-section h4,
h4:contains("Inspiring Legends") {
    color: #e67e22 !important;  /* Orange color */
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Legend names - make them dark and bold */
.legend-info strong,
.legend-name,
strong:contains("Phiona Mutesi"),
strong:contains("Bobby Fischer") {
    color: #2c3e50 !important;  /* Dark blue-gray */
    font-size: 1.1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

/* Legend titles/descriptions */
.legend-info span,
.legend-title,
span:contains("Ugandan sensation"),
span:contains("American chess grandmaster") {
    color: #666 !important;  /* Medium gray */
    font-size: 0.9rem;
}

/* Inspiration quote */
.inspiration-quote,
p:contains("Every chess player has a story") {
    color: #e67e22 !important;  /* Orange color */
    font-size: 1.2rem;
    font-style: italic;
    text-align: center;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

/* Story card background - ensure it's light */
.story-card {
    background: #ffffff !important;  /* White background */
    border-radius: 16px;
    padding: 35px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
}
/* ===== SPORTSMANSHIP STORY - DIRECT FIX ===== */

/* Target the specific section */
.sportsmanship-story .story-card {
    background: white !important;
    color: #333 !important;
}

/* All text inside should be dark */
.sportsmanship-story p,
.sportsmanship-story span,
.sportsmanship-story div:not(.legend-icon) {
    color: #2c3e50 !important;
}

/* Keep headings orange */
.sportsmanship-story h3,
.sportsmanship-story h4 {
    color: #e67e22 !important;
}

/* Legend items - structured layout */
.sportsmanship-story .legend-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Legend names */
.sportsmanship-story .legend-item strong {
    color: #2c3e50 !important;
    font-size: 1.1rem;
    display: block;
}

/* Legend descriptions */
.sportsmanship-story .legend-item span {
    color: #666 !important;
    font-size: 0.9rem;
}

/* Quote at the bottom */
.sportsmanship-story .inspiration-quote {
    color: #e67e22 !important;
    font-style: italic;
    text-align: center;
    font-size: 1.1rem;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
<!-- Right Column - Sportsmanship Story -->
<div class="sportsmanship-story">
    <div class="story-card" style="background: white; color: #2c3e50;">
        <h3 style="color: #e67e22;">The Importance of Chess Sportsmanship</h3>
        
        <div class="story-content">
            <p style="color: #2c3e50;">
                Along side one's career path, chess is an opportunity for one to shine as a 
                sportsperson and even build a name along the course just like many profound 
                chess players of the time.
            </p>
            
            <!-- Featured Inspiration -->
            <div class="inspiration-box" style="background: #f8f9fa;">
                <h4 style="color: #e67e22;">Inspiring Legends</h4>
                <div class="legend-grid">
                    <!-- Phiona Mutesi -->
                    <div class="legend-item" style="display: flex; align-items: center; gap: 15px; padding: 10px;">
                        <div class="legend-icon" style="background: #e67e22; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-crown" style="color: white;"></i>
                        </div>
                        <div class="legend-info">
                            <strong style="color: #2c3e50; display: block;">Phiona Mutesi</strong>
                            <span style="color: #666;">Ugandan sensation, "Queen of Katwe"</span>
                        </div>
                    </div>
                    
                    <!-- Bobby Fischer -->
                    <div class="legend-item" style="display: flex; align-items: center; gap: 15px; padding: 10px;">
                        <div class="legend-icon" style="background: #e67e22; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                            <i class="fas fa-chess-king" style="color: white;"></i>
                        </div>
                        <div class="legend-info">
                            <strong style="color: #2c3e50; display: block;">Bobby Fischer</strong>
                            <span style="color: #666;">American chess grandmaster</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <p class="inspiration-quote" style="color: #e67e22; font-style: italic; text-align: center;">
                "Every chess player has a story. Yours starts here."
            </p>
        </div>
        
        <a href="public-speaking.html" class="btn-story" style="display: inline-block; padding: 12px 30px; background: #e67e22; color: white; text-decoration: none; border-radius: 50px;">
            Discover More <i class="fas fa-arrow-right"></i>
        </a>
    </div>
</div>

 /* ===== COMPLETE MOBILE RESPONSIVE FIXES ===== */

/* Base mobile fixes */
@media (max-width: 768px) {
    
    /* ---------- HEADER & NAVIGATION ---------- */
    .navbar {
        padding: 10px 15px;
        position: fixed;
        top: 0;
        width: 100%;
        background: white;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .logo a {
        gap: 8px;
    }
    
    .logo-img {
        height: 35px !important;
        width: auto;
    }
    
    .logo-text {
        font-size: 1.1rem !important;
        white-space: nowrap;
    }
    
    /* Mobile menu */
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 5px;
    }
    
    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background: white;
        flex-direction: column;
        padding: 30px 20px;
        transition: left 0.3s ease;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        z-index: 999;
    }
    
    .nav-menu.active {
        left: 0;
    }
    
    .nav-menu li {
        width: 100%;
        margin-bottom: 15px;
    }
    
    .nav-menu a {
        display: block;
        padding: 12px 15px;
        font-size: 1.1rem;
        border-bottom: 1px solid #f0f0f0;
    }
    
    /* Dropdown mobile */
    .dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        padding-left: 20px;
        display: none;
        background: #f9f9f9;
    }
    
    .dropdown.active .dropdown-menu {
        display: block;
    }
    
    /* ---------- HERO SECTIONS (ALL PAGES) ---------- */
    .hero,
    .chess-hero,
    .music-hero,
    .art-hero,
    .tech-hero,
    .speak-hero,
    .about-hero {
        min-height: 100vh;
        padding-top: 80px;
        margin-top: 0;
        text-align: center;
    }
    
    .hero-content,
    .chess-hero-content,
    .music-hero-content,
    .art-hero-content,
    .tech-hero-content,
    .speak-hero-content,
    .about-hero-content {
        padding: 20px 15px;
        width: 100%;
    }
    
    /* Logo containers - all pages */
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 140px !important;
        height: 140px !important;
        margin: 0 auto 20px !important;
    }
    
    .hero-logo,
    .chess-logo,
    .music-logo,
    .art-logo,
    .tech-logo,
    .speak-logo,
    .about-logo,
    .logo-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
    
    /* Hero titles - all pages */
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1,
    .about-hero-title {
        font-size: 2.2rem !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }
    
    .hero-subtitle,
    .chess-hero-subtitle,
    .music-hero-subtitle,
    .art-hero-subtitle,
    .tech-hero-subtitle,
    .speak-hero-subtitle {
        font-size: 1.1rem !important;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }
    
    .tagline,
    .hero-tagline,
    .music-hero-tagline,
    .art-hero-tagline,
    .tech-hero-tagline,
    .speak-hero-tagline {
        font-size: 1rem !important;
        margin-bottom: 20px;
        padding: 0 10px;
    }
    
    /* Hero description */
    .hero p,
    .chess-hero p,
    .music-hero p,
    .art-hero p,
    .tech-hero p,
    .speak-hero p {
        font-size: 0.95rem !important;
        line-height: 1.5;
        margin-bottom: 25px;
        padding: 0 10px;
    }
    
    /* Hero features/badges */
    .hero-features,
    .music-hero-features,
    .art-hero-features,
    .tech-hero-features,
    .speak-hero-features {
        flex-direction: column;
        gap: 10px;
        margin-bottom: 25px;
    }
    
    .hero-features span,
    .music-hero-features span,
    .art-hero-features span,
    .tech-hero-features span,
    .speak-hero-features span {
        width: 100%;
        justify-content: center;
        font-size: 0.9rem;
        padding: 8px 15px;
    }
    
    /* Hero buttons */
    .hero-buttons,
    .music-hero-buttons,
    .art-hero-buttons,
    .tech-hero-buttons,
    .speak-hero-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .btn,
    .btn-large,
    .btn-music-primary,
    .btn-music-secondary,
    .btn-art-primary,
    .btn-art-secondary,
    .btn-tech-primary,
    .btn-tech-secondary,
    .btn-speak-primary,
    .btn-speak-secondary,
    .btn-chess-primary {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.95rem;
        text-align: center;
    }
    
    /* ---------- STATS SECTIONS ---------- */
    .about-hero-stats,
    .music-stats,
    .art-stats,
    .tech-stats,
    .speak-stats {
        flex-direction: column;
        gap: 15px;
        align-items: center;
        margin-top: 25px;
    }
    
    .stat-item {
        width: 100%;
        max-width: 180px;
        padding: 12px 10px;
    }
    
    .stat-number {
        font-size: 1.8rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
    }
    
    /* ---------- SECTION HEADERS ---------- */
    .section-header {
        margin-bottom: 30px;
    }
    
    .section-title {
        font-size: 2rem !important;
        line-height: 1.2;
    }
    
    .section-subtitle,
    .subtitle {
        font-size: 0.8rem !important;
        letter-spacing: 2px;
        margin-bottom: 8px;
    }
    
    .section-description {
        font-size: 0.95rem !important;
        padding: 0 15px;
    }
    
    /* ---------- GRID LAYOUTS (ALL PAGES) ---------- */
    .skills-grid,
    .categories-grid,
    .tracks-grid,
    .coaches-grid,
    .instructors-grid,
    .masters-grid,
    .faculty-grid,
    .benefits-grid,
    .music-benefits-grid,
    .art-benefits-grid,
    .tech-benefits-grid,
    .speak-benefits-grid,
    .levels-grid,
    .values-grid,
    .leadership-grid,
    .partners-grid,
    .testimonials-grid,
    .stories-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
        margin-top: 30px;
    }
    
    /* Cards */
    .skill-card,
    .category-card,
    .track-card,
    .coach-card,
    .instructor-card,
    .master-card,
    .faculty-card,
    .benefit-card,
    .music-benefit-card,
    .art-benefit-card,
    .tech-benefit-card,
    .speak-benefit-card,
    .level-card,
    .value-card,
    .leader-card,
    .testimonial-card,
    .story-card {
        padding: 25px 20px;
        margin: 0 10px;
    }
    
    /* Featured card fix */
    .level-card.featured,
    .track-card.featured {
        transform: scale(1);
        margin: 10px 0;
    }
    
    /* ---------- GALLERY SECTIONS ---------- */
    .gallery-grid,
    .tech-gallery-grid,
    .art-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
    }
    
    .gallery-item,
    .tech-gallery .gallery-item {
        height: 200px;
    }
    
    .gallery-item.large {
        height: 250px;
    }
    
    /* ---------- ABOUT PAGE SPECIFIC ---------- */
    .story-grid,
    .mission-vision-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    
    .story-image {
        margin-top: 20px;
    }
    
    .story-image-caption {
        left: 20px;
        right: 20px;
        text-align: center;
    }
    
    .story-milestones {
        justify-content: center;
    }
    
    .mission-card,
    .vision-card {
        padding: 30px 25px;
    }
    
    /* Experience badge */
    .music-experience-badge,
    .art-experience-badge,
    .tech-experience-badge,
    .speak-experience-badge {
        width: 90px !important;
        height: 90px !important;
        padding: 10px !important;
        bottom: -15px;
        right: -15px;
    }
    
    .years {
        font-size: 1.5rem !important;
    }
    
    /* ---------- CONTACT SECTION ---------- */
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .info-card {
        padding: 25px 20px;
    }
    
    .map-container iframe {
        height: 250px;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .contact-icon {
        margin-bottom: 5px;
    }
    
    .social-links a {
        display: inline-block;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    
    /* ---------- FOOTER ---------- */
    footer {
        padding: 40px 0 20px;
        text-align: center;
    }
    
    .footer-copyright p {
        font-size: 0.8rem;
        padding: 0 15px;
        line-height: 1.5;
    }
    
    /* ---------- SPORTSMANSHIP STORY SECTION ---------- */
    .sportsmanship-story .story-card {
        padding: 25px 20px;
    }
    
    .legend-item {
        flex-direction: column;
        text-align: center;
    }
    
    .legend-icon {
        margin: 0 auto;
    }
    
    .story-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- SMALL PHONES (up to 480px) ---------- */
@media (max-width: 480px) {
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1,
    .about-hero-title {
        font-size: 2rem !important;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 120px !important;
        height: 120px !important;
    }
    
    .section-title {
        font-size: 1.8rem !important;
    }
    
    .btn,
    .btn-large,
    .btn-music-primary,
    .btn-music-secondary,
    .btn-art-primary,
    .btn-art-secondary,
    .btn-tech-primary,
    .btn-tech-secondary,
    .btn-speak-primary,
    .btn-speak-secondary {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .stat-item {
        max-width: 150px;
    }
    
    .stat-number {
        font-size: 1.5rem !important;
    }
}

/* ---------- TABLETS (481px - 768px) ---------- */
@media (min-width: 481px) and (max-width: 768px) {
    .skills-grid,
    .categories-grid,
    .tracks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .coaches-grid,
    .instructors-grid,
    .masters-grid,
    .faculty-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .gallery-grid,
    .tech-gallery-grid,
    .art-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .hero-buttons,
    .music-hero-buttons,
    .art-hero-buttons,
    .tech-hero-buttons,
    .speak-hero-buttons {
        flex-direction: row;
        justify-content: center;
    }
    
    .btn,
    .btn-large,
    .btn-music-primary,
    .btn-music-secondary,
    .btn-art-primary,
    .btn-art-secondary,
    .btn-tech-primary,
    .btn-tech-secondary,
    .btn-speak-primary,
    .btn-speak-secondary {
        width: auto;
        min-width: 180px;
    }
}

/* ---------- GENERAL FIXES ---------- */
html, body {
    overflow-x: hidden;
    width: 100%;
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    box-sizing: border-box;
}

* {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fix for 100vh on mobile */
.hero,
.chess-hero,
.music-hero,
.art-hero,
.tech-hero,
.speak-hero,
.about-hero {
    min-height: 100vh; /* Fallback */
    min-height: -webkit-fill-available;
}

/* Improve tap targets */
a, button, .btn, .nav-link, .dropdown-toggle {
    -webkit-tap-highlight-color: rgba(230,126,34,0.2);
}
/* ===== MOBILE NAVIGATION IMPROVEMENTS ===== */
@media (max-width: 768px) {
    /* Ensure menu is clickable */
    .nav-menu {
        background: white;
        z-index: 1000;
        pointer-events: auto;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px 20px;
        font-size: 1.1rem;
        color: #2c3e50;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f0;
        transition: background 0.2s ease;
        -webkit-tap-highlight-color: rgba(230,126,34,0.2);
    }
    
    .nav-menu a:active {
        background: #f0f0f0;
        color: #e67e22;
    }
    
    .nav-menu a.active {
        color: #e67e22;
        font-weight: 600;
        background: #f8f9fa;
    }
    
    /* Dropdown menu styling */
    .dropdown-menu {
        background: #f9f9f9;
        border-radius: 8px;
        margin: 5px 0 10px 0;
        overflow: hidden;
    }
    
    .dropdown-menu a {
        padding: 12px 20px 12px 35px;
        font-size: 1rem;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .dropdown-menu a:last-child {
        border-bottom: none;
    }
    
    .dropdown-menu a:active {
        background: #e0e0e0;
    }
    
    /* Highlight active program */
    .dropdown-menu a.active {
        color: #e67e22;
        font-weight: 600;
        background: #f0f0f0;
    }
    
    /* Mobile menu button */
    .mobile-menu-btn {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 1001;
    }
    
    .mobile-menu-btn span {
        width: 25px;
        height: 2px;
        background: #2c3e50;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    .mobile-menu-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    
    .mobile-menu-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Prevent body scroll when menu open */
    body.menu-open {
        overflow: hidden;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .nav-menu a {
        padding: 12px 15px;
        font-size: 1rem;
    }
    
    .dropdown-menu a {
        padding: 10px 15px 10px 30px;
    }
}
/* ===== HEADER SCROLL BEHAVIOR ===== */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: transform 0.3s ease;
}

/* Header hidden state (when scrolling down) */
header.header-hidden {
    transform: translateY(-100%);
}

/* Header visible state (when scrolling up or at top) */
header.header-visible {
    transform: translateY(0);
}

/* Add padding to body to account for fixed header */
body {
    padding-top: 80px; /* Adjust based on your header height */
}

/* Adjust for mobile */
@media (max-width: 768px) {
    body {
        padding-top: 70px; /* Smaller padding on mobile */
    }
}
/* ===== NAVIGATION VISIBILITY CONTROL ===== */

/* Desktop styles */
@media (min-width: 769px) {
    /* Show desktop menu */
    .nav-menu {
        display: flex !important;
    }
    
    /* Hide mobile elements */
    .menu-toggle,
    .side-menu,
    .menu-overlay {
        display: none !important;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Hide desktop menu on mobile */
    .nav-menu {
        display: none !important;
    }
    
    /* Show hamburger button */
    .menu-toggle {
        display: flex !important;
    }
    
    /* Side menu handling - will be shown by JavaScript */
    .side-menu {
        display: flex;
        right: -300px;
    }
    
    .side-menu.open {
        right: 0;
    }
    
    .menu-overlay {
        display: block;
    }
}
/* ===== MOBILE MENU STYLES ===== */

/* Desktop styles */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
    }
    
    .hamburger-btn,
    .mobile-menu,
    .mobile-overlay {
        display: none !important;
    }
}

/* Mobile styles */
@media (max-width: 768px) {
    /* Hide desktop menu */
    .nav-menu {
        display: none !important;
    }
    
    /* Show hamburger button */
    .hamburger-btn {
        display: flex !important;
        flex-direction: column;
        gap: 5px;
        padding: 10px;
        cursor: pointer;
        z-index: 1001;
    }
    
    .hamburger-btn span {
        width: 25px;
        height: 2px;
        background: #2c3e50;
        border-radius: 2px;
        transition: all 0.3s ease;
    }
    
    /* Hamburger animation when open */
    .hamburger-btn.active span:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    
    .hamburger-btn.active span:nth-child(2) {
        opacity: 0;
    }
    
    .hamburger-btn.active span:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }
    
    /* Mobile menu overlay */
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: rgba(0,0,0,0.5);
        z-index: 1002;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }
    
    .mobile-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    
    /* Mobile menu - slides in from left */
    .mobile-menu {
        position: fixed;
        top: 0;
        left: -300px;
        width: 280px;
        height: 100vh;
        background: white;
        box-shadow: 2px 0 20px rgba(0,0,0,0.1);
        z-index: 1003;
        transition: left 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }
    
    .mobile-menu.open {
        left: 0;
    }
    
    /* Mobile menu header */
    .mobile-menu-header {
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-menu-header h3 {
        font-size: 1rem;
        color: #2c3e50;
        margin: 0;
        font-weight: 600;
    }
    
    .close-menu {
        background: none;
        border: none;
        font-size: 1.8rem;
        color: #999;
        cursor: pointer;
        padding: 0;
        line-height: 1;
    }
    
    .close-menu:hover {
        color: #e67e22;
    }
    
    /* Mobile menu content */
    .mobile-menu-content {
        flex: 1;
        padding: 20px 0;
    }
    
    .mobile-nav-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    
    .mobile-nav-link {
        display: block;
        padding: 15px 20px;
        color: #2c3e50;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        border-bottom: 1px solid #f5f5f5;
        transition: all 0.2s ease;
    }
    
    .mobile-nav-link:active {
        background: #f8f9fa;
        color: #e67e22;
    }
    
    /* Dropdown toggle */
    .mobile-dropdown-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .mobile-dropdown-toggle i {
        color: #e67e22;
        transition: transform 0.3s ease;
    }
    
    .mobile-dropdown.active .mobile-dropdown-toggle i {
        transform: rotate(180deg);
    }
    
    /* Dropdown menu */
    .mobile-dropdown-menu {
        list-style: none;
        padding: 0;
        margin: 0;
        background: #f9f9f9;
        display: none;
    }
    
    .mobile-dropdown.active .mobile-dropdown-menu {
        display: block;
    }
    
    .mobile-dropdown-menu li {
        margin: 0;
    }
    
    .mobile-dropdown-menu a {
        display: block;
        padding: 12px 20px 12px 35px;
        color: #2c3e50;
        text-decoration: none;
        font-size: 0.95rem;
        border-bottom: 1px solid #e0e0e0;
    }
    
    .mobile-dropdown-menu a:last-child {
        border-bottom: none;
    }
    
    .mobile-dropdown-menu a:active {
        background: #e0e0e0;
        color: #e67e22;
    }
    
    /* Mobile menu footer */
    .mobile-menu-footer {
        padding: 20px;
        border-top: 1px solid #f0f0f0;
        text-align: center;
    }
    
    .mobile-contact-btn {
        display: inline-block;
        padding: 12px 30px;
        background: #e67e22;
        color: white;
        text-decoration: none;
        border-radius: 25px;
        font-weight: 600;
        font-size: 0.95rem;
        transition: background 0.3s ease;
    }
    
    .mobile-contact-btn:active {
        background: #d35400;
    }
}
/* ===== FIXED NAVBAR LAYOUT ===== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-sizing: border-box;
}

.logo {
    flex: 1;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.logo-img {
    height: 40px;
    width: auto;
}

.logo-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
    white-space: nowrap;
}

.logo-text span {
    color: #e67e22;
}

/* Hamburger button - positioned on the right */
.hamburger-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    z-index: 1001;
    margin-left: auto; /* This pushes it to the right */
}

.hamburger-btn span {
    width: 25px;
    height: 2px;
    background: #2c3e50;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* Mobile styles */
@media (max-width: 768px) {
    .navbar {
        padding: 10px 15px;
    }
    
    .logo-img {
        height: 35px;
    }
    
    .logo-text {
        font-size: 1rem;
    }
    
    /* Show hamburger on mobile */
    .hamburger-btn {
        display: flex !important;
    }
    
    /* Hide desktop menu */
    .nav-menu {
        display: none !important;
    }
}

/* Desktop styles */
@media (min-width: 769px) {
    .nav-menu {
        display: flex !important;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 30px;
    }
    
    .hamburger-btn {
        display: none !important;
    }
}
/* ===== MOBILE DROPDOWN STYLES ===== */
.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mobile-dropdown-toggle i {
    color: #e67e22;
    transition: transform 0.3s ease;
}

.mobile-dropdown.active .mobile-dropdown-toggle i {
    transform: rotate(180deg);
}

.mobile-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-radius: 8px;
}

.mobile-dropdown.active .mobile-dropdown-menu {
    max-height: 300px; /* Adjust based on content */
    padding: 8px 0;
}

.mobile-dropdown-menu li {
    margin: 0;
}

.mobile-dropdown-menu a {
    display: block;
    padding: 12px 20px 12px 35px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.mobile-dropdown-menu a:last-child {
    border-bottom: none;
}

.mobile-dropdown-menu a:active {
    background: #e67e22;
    color: white;
    padding-left: 40px;
}
/* ===== MOBILE DROPDOWN STYLES ===== */
.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mobile-dropdown-toggle i {
    color: #e67e22;
    transition: transform 0.3s ease;
}

.mobile-dropdown.active .mobile-dropdown-toggle i {
    transform: rotate(180deg);
}

.mobile-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #f8f9fa;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-radius: 8px;
}

.mobile-dropdown.active .mobile-dropdown-menu {
    max-height: 300px; /* Adjust based on content */
    padding: 8px 0;
}

.mobile-dropdown-menu li {
    margin: 0;
}

.mobile-dropdown-menu a {
    display: block;
    padding: 12px 20px 12px 35px;
    color: #2c3e50;
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.mobile-dropdown-menu a:last-child {
    border-bottom: none;
}

.mobile-dropdown-menu a:active {
    background: #e67e22;
    color: white;
    padding-left: 40px;
}
/* ===== ABOUT HERO SECTION - FIXED LAYOUT ===== */
.about-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 100px 0 50px;
    overflow: hidden;
    background: #0a0a0a;
}

.about-hero-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    color: white;
    position: relative;
    z-index: 10;
}

/* Logo */
.about-logo-container {
    width: 150px;
    height: 150px;
    margin: 0 auto 20px;
}

.about-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Academy Name */
.about-academy-name {
    margin-bottom: 30px;
}

.name-line {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.2;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.name-line:nth-child(1) { color: white; }
.name-line:nth-child(2) { color: #e67e22; }
.name-line:nth-child(3) { color: white; }

/* Tagline */
.about-tagline {
    margin-bottom: 20px;
}

.tagline-unleashing {
    display: block;
    font-size: 3rem;
    font-weight: 900;
    color: white;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 1.2;
}

.tagline-unseen {
    display: block;
    font-size: 3.5rem;
    font-weight: 900;
    color: #e67e22;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 5px;
    line-height: 1.2;
    text-shadow: 0 0 20px rgba(230,126,34,0.3);
}

/* Description */
.about-description {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
    font-style: italic;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Stats Grid */
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.stat-box {
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(230,126,34,0.2);
    border-radius: 12px;
    padding: 20px 10px;
    text-align: center;
    transition: transform 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
    border-color: #e67e22;
    background: rgba(230,126,34,0.1);
}

.stat-number {
    display: block;
    font-size: 2.2rem;
    font-weight: 800;
    color: #e67e22;
    line-height: 1.2;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.stat-label {
    display: block;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .about-hero {
        padding: 80px 0 40px;
    }
    
    .about-logo-container {
        width: 120px;
        height: 120px;
    }
    
    .name-line {
        font-size: 1.8rem;
    }
    
    .tagline-unleashing {
        font-size: 2.2rem;
    }
    
    .tagline-unseen {
        font-size: 2.5rem;
    }
    
    .about-description {
        font-size: 1rem;
        padding: 0 15px;
    }
    
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 0 15px;
    }
    
    .stat-box {
        padding: 15px 5px;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .name-line {
        font-size: 1.5rem;
    }
    
    .tagline-unleashing {
        font-size: 1.8rem;
    }
    
    .tagline-unseen {
        font-size: 2rem;
    }
    
    .about-stats-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== COMPLETE MOBILE OPTIMIZATION ===== */

/* Base mobile settings */
@media (max-width: 768px) {
    
    /* ---------- GENERAL FIXES ---------- */
    html, body {
        overflow-x: hidden;
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    * {
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }
    
    .container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin: 0 auto;
    }
    
    /* ---------- TYPOGRAPHY SCALING ---------- */
    body {
        font-size: 16px; /* Base size */
        line-height: 1.5;
    }
    
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.4rem; }
    h4 { font-size: 1.2rem; }
    
    .section-title {
        font-size: 2rem !important;
        margin-bottom: 20px;
    }
    
    .section-subtitle {
        font-size: 0.85rem !important;
        letter-spacing: 2px;
    }
    
    /* ---------- NAVIGATION ---------- */
    .navbar {
        padding: 8px 12px;
        min-height: 60px;
    }
    
    .logo-img {
        height: 35px !important;
    }
    
    .logo-text {
        font-size: 1rem !important;
    }
    
    /* ---------- HERO SECTIONS ---------- */
    .hero, 
    .chess-hero, 
    .music-hero, 
    .art-hero, 
    .tech-hero, 
    .speak-hero, 
    .about-hero {
        min-height: 100vh;
        padding: 70px 0 40px;
        text-align: center;
    }
    
    .hero-content,
    .chess-hero-content,
    .music-hero-content,
    .art-hero-content,
    .tech-hero-content,
    .speak-hero-content,
    .about-hero-content {
        padding: 20px 10px;
    }
    
    /* Logo containers */
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 120px !important;
        height: 120px !important;
        margin: 0 auto 15px !important;
    }
    
    /* Titles */
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1,
    .about-hero-title {
        font-size: 2rem !important;
        line-height: 1.2;
        margin-bottom: 10px;
    }
    
    .hero-subtitle,
    .chess-hero-subtitle,
    .music-hero-subtitle,
    .art-hero-subtitle,
    .tech-hero-subtitle,
    .speak-hero-subtitle {
        font-size: 1rem !important;
        margin-bottom: 10px;
    }
    
    .tagline,
    .hero-tagline,
    .music-hero-tagline,
    .art-hero-tagline,
    .tech-hero-tagline,
    .speak-hero-tagline {
        font-size: 0.95rem !important;
        margin-bottom: 20px;
    }
    
    /* Feature badges */
    .hero-features,
    .music-hero-features,
    .art-hero-features,
    .tech-hero-features,
    .speak-hero-features {
        flex-direction: column;
        gap: 8px;
        margin-bottom: 20px;
    }
    
    .hero-features span,
    .music-hero-features span,
    .art-hero-features span,
    .tech-hero-features span,
    .speak-hero-features span {
        width: 100%;
        font-size: 0.9rem;
        padding: 8px 12px;
    }
    
    /* ---------- BUTTONS ---------- */
    .hero-buttons,
    .music-hero-buttons,
    .art-hero-buttons,
    .tech-hero-buttons,
    .speak-hero-buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .btn,
    .btn-large,
    .btn-music-primary,
    .btn-music-secondary,
    .btn-art-primary,
    .btn-art-secondary,
    .btn-tech-primary,
    .btn-tech-secondary,
    .btn-speak-primary,
    .btn-speak-secondary,
    .btn-chess-primary {
        width: 100%;
        padding: 12px 20px;
        font-size: 0.95rem;
    }
    
    /* ---------- STATS SECTIONS ---------- */
    .about-hero-stats,
    .music-stats,
    .art-stats,
    .tech-stats,
    .speak-stats {
        flex-direction: column;
        gap: 12px;
        align-items: center;
        margin-top: 20px;
    }
    
    .stat-item {
        width: 100%;
        max-width: 200px;
        padding: 12px;
    }
    
    .stat-number {
        font-size: 1.8rem !important;
    }
    
    .stat-label {
        font-size: 0.7rem !important;
    }
    
    /* ---------- GRID LAYOUTS ---------- */
    .skills-grid,
    .categories-grid,
    .tracks-grid,
    .coaches-grid,
    .instructors-grid,
    .masters-grid,
    .faculty-grid,
    .benefits-grid,
    .music-benefits-grid,
    .art-benefits-grid,
    .tech-benefits-grid,
    .speak-benefits-grid,
    .levels-grid,
    .values-grid,
    .leadership-grid,
    .partners-grid,
    .testimonials-grid,
    .stories-grid {
        grid-template-columns: 1fr !important;
        gap: 15px;
        margin-top: 25px;
    }
    
    /* Cards */
    .skill-card,
    .category-card,
    .track-card,
    .coach-card,
    .instructor-card,
    .master-card,
    .faculty-card,
    .benefit-card,
    .music-benefit-card,
    .art-benefit-card,
    .tech-benefit-card,
    .speak-benefit-card,
    .level-card,
    .value-card,
    .leader-card,
    .testimonial-card,
    .story-card {
        padding: 20px 15px;
        margin: 0 5px;
    }
    
    /* ---------- GALLERY SECTIONS ---------- */
    .gallery-grid,
    .tech-gallery-grid,
    .art-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    
    .gallery-item,
    .tech-gallery .gallery-item {
        height: 200px;
    }
    
    .gallery-item.large {
        height: 220px;
    }
    
    /* ---------- ABOUT PAGE SPECIFIC ---------- */
    .story-grid,
    .mission-vision-grid {
        grid-template-columns: 1fr !important;
        gap: 25px;
    }
    
    .story-image {
        margin-top: 20px;
    }
    
    .story-image-caption {
        left: 15px;
        right: 15px;
        text-align: center;
        font-size: 0.9rem;
    }
    
    .story-milestones {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }
    
    .milestone {
        min-width: 80px;
    }
    
    .milestone-year {
        font-size: 1.5rem;
    }
    
    .mission-card,
    .vision-card {
        padding: 25px 20px;
    }
    
    /* ---------- EXPERIENCE BADGES ---------- */
    .music-experience-badge,
    .art-experience-badge,
    .tech-experience-badge,
    .speak-experience-badge {
        width: 80px !important;
        height: 80px !important;
        padding: 8px !important;
        bottom: -15px;
        right: -15px;
    }
    
    .years {
        font-size: 1.3rem !important;
    }
    
    /* ---------- CONTACT SECTION ---------- */
    .contact-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    
    .info-card {
        padding: 20px 15px;
    }
    
    .map-container iframe {
        height: 200px;
    }
    
    .contact-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .contact-icon {
        margin-bottom: 5px;
    }
    
    .btn-direction {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* ---------- FOOTER ---------- */
    footer {
        padding: 30px 0 15px;
        text-align: center;
    }
    
    .footer-copyright p {
        font-size: 0.75rem;
        padding: 0 10px;
        line-height: 1.4;
    }
}

/* ===== SPECIFIC DEVICE OPTIMIZATIONS ===== */

/* Small phones (iPhone SE, older Android) */
@media (max-width: 375px) {
    html { font-size: 14px; }
    
    .logo-img { height: 30px !important; }
    .logo-text { font-size: 0.9rem !important; }
    
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1 {
        font-size: 1.8rem !important;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container {
        width: 100px !important;
        height: 100px !important;
    }
    
    .stat-number { font-size: 1.5rem !important; }
    .stat-label { font-size: 0.65rem !important; }
}

/* Medium phones (iPhone 12/13/14, Pixel) */
@media (min-width: 376px) and (max-width: 428px) {
    html { font-size: 15px; }
    
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1 {
        font-size: 2rem !important;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container {
        width: 120px !important;
        height: 120px !important;
    }
}

/* Large phones (iPhone Pro Max, Samsung Ultra) */
@media (min-width: 429px) and (max-width: 480px) {
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1 {
        font-size: 2.2rem !important;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container {
        width: 130px !important;
        height: 130px !important;
    }
}

/* Small tablets (iPad Mini, Surface Duo) */
@media (min-width: 481px) and (max-width: 768px) {
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1 {
        font-size: 2.5rem !important;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container {
        width: 150px !important;
        height: 150px !important;
    }
    
    .skills-grid,
    .categories-grid,
    .tracks-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .coaches-grid,
    .instructors-grid,
    .masters-grid,
    .faculty-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .gallery-grid,
    .tech-gallery-grid,
    .art-gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Increase tap targets for touch devices */
    a, button, .btn, .nav-link, .mobile-nav-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Remove hover effects on touch devices */
    .skill-card:hover,
    .category-card:hover,
    .track-card:hover,
    .coach-card:hover,
    .btn:hover {
        transform: none !important;
    }
    
    /* Add active state instead */
    .btn:active,
    .mobile-nav-link:active {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

/* ===== SAFE AREA INSETS (for notched phones) ===== */
@supports (padding: max(0px)) {
    .navbar {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-top: max(8px, env(safe-area-inset-top));
    }
    
    .mobile-menu {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    .particle,
    .chess-slide,
    .music-logo-glow,
    .art-logo-glow,
    .tech-logo-glow,
    .speak-logo-glow {
        animation: none !important;
    }
    
    /* Simplify backgrounds */
    .hero-bg-particles,
    .about-hero-particles,
    .tech-particles {
        display: none;
    }
}

/* ===== LANDSCAPE MODE FIXES ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero,
    .chess-hero,
    .music-hero,
    .art-hero,
    .tech-hero,
    .speak-hero,
    .about-hero {
        min-height: auto;
        padding: 100px 0 60px;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container {
        width: 80px !important;
        height: 80px !important;
    }
    
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1 {
        font-size: 1.8rem !important;
    }
}
/* ===== FIX HEADER COVERING CONTENT ===== */

/* Add padding to body to account for fixed header */
body {
    padding-top: 80px; /* Adjust based on your header height */
    margin: 0;
}

/* Ensure header is fixed but content starts below it */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; /* Fixed height */
    background: white;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Push all hero sections down */
.hero,
.chess-hero,
.music-hero,
.art-hero,
.tech-hero,
.speak-hero,
.about-hero {
    margin-top: 0 !important;
    padding-top: 100px !important; /* Space for header + extra breathing room */
    min-height: 100vh;
}

/* Adjust logo containers to be visible */
.hero-logo-container,
.chess-logo-container,
.music-logo-container,
.art-logo-container,
.tech-logo-container,
.speak-logo-container,
.about-logo-container {
    margin-top: 20px !important;
    position: relative;
    z-index: 10;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    body {
        padding-top: 70px;
    }
    
    header {
        height: 70px;
    }
    
    .hero,
    .chess-hero,
    .music-hero,
    .art-hero,
    .tech-hero,
    .speak-hero,
    .about-hero {
        padding-top: 90px !important;
    }
    
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        margin-top: 10px !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    body {
        padding-top: 60px;
    }
    
    header {
        height: 60px;
    }
    
    .hero,
    .chess-hero,
    .music-hero,
    .art-hero,
    .tech-hero,
    .speak-hero,
    .about-hero {
        padding-top: 80px !important;
    }
}
/* ===== ADVANCED HEADER TRANSFORMATION ===== */

/* Header base styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(65px, 12vh, 85px);
    background: white;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
}

/* Header scrolled state - logo hides, text and hamburger remain */
header.header-scrolled {
    height: clamp(50px, 8vh, 60px);
    background: rgba(255, 255, 255, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

/* Logo image transition */
header .logo-img {
    height: 45px;
    width: auto;
    transition: all 0.3s ease;
}

header.header-scrolled .logo-img {
    height: 0 !important;
    width: 0 !important;
    opacity: 0;
    margin: 0;
    transform: scale(0);
}

/* Logo text transition */
header .logo-text {
    font-size: 1.2rem;
    transition: all 0.3s ease;
    white-space: nowrap;
}

header.header-scrolled .logo-text {
    font-size: 1rem;
    font-weight: 600;
}

/* Hamburger button always visible */
.hamburger-btn {
    transition: all 0.3s ease;
}

header.header-scrolled .hamburger-btn {
    transform: scale(0.95);
}

/* ===== DEVICE-SPECIFIC OPTIMIZATIONS ===== */

/* iPhone SE, small Android (320px - 375px) */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 375px) {
    header {
        height: 60px;
    }
    
    header.header-scrolled {
        height: 50px;
    }
    
    header .logo-img {
        height: 35px;
    }
    
    header .logo-text {
        font-size: 0.9rem;
    }
    
    header.header-scrolled .logo-text {
        font-size: 0.8rem;
    }
    
    .hamburger-btn span {
        width: 20px;
    }
}

/* iPhone 12/13/14, Pixel 6/7 (376px - 428px) */
@media only screen 
and (min-device-width: 376px) 
and (max-device-width: 428px) {
    header {
        height: 65px;
    }
    
    header.header-scrolled {
        height: 55px;
    }
    
    header .logo-img {
        height: 38px;
    }
    
    header .logo-text {
        font-size: 1rem;
    }
    
    header.header-scrolled .logo-text {
        font-size: 0.9rem;
    }
}

/* iPhone Pro Max, Samsung Ultra (429px - 480px) */
@media only screen 
and (min-device-width: 429px) 
and (max-device-width: 480px) {
    header {
        height: 70px;
    }
    
    header.header-scrolled {
        height: 60px;
    }
    
    header .logo-img {
        height: 42px;
    }
}

/* Small tablets (481px - 768px) */
@media only screen 
and (min-device-width: 481px) 
and (max-device-width: 768px) {
    header {
        height: 75px;
    }
    
    header.header-scrolled {
        height: 65px;
    }
    
    header .logo-img {
        height: 48px;
    }
}

/* ===== ANDROID-SPECIFIC FIXES ===== */
@media screen 
and (min-device-width: 360px) 
and (max-device-width: 640px) {
    /* Ensure smooth transitions on Android */
    header {
        -webkit-transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        transition: all 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
}

/* ===== NOTCHED PHONE SUPPORT ===== */
@supports (padding: max(0px)) {
    header {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
        padding-top: env(safe-area-inset-top);
        box-sizing: border-box;
    }
}

/* ===== TOUCH OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    .hamburger-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    
    /* Smooth transitions for touch devices */
    header,
    .logo-img,
    .logo-text {
        transition: all 0.3s ease-out;
    }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce) {
    header,
    .logo-img,
    .logo-text {
        transition: none !important;
    }
}
/* ===== CLEAN PARTNER SCHOOLS FIX ===== */

@media (max-width: 768px) {
    
    /* Complete restack */
    .featured-school {
        background: white !important;
        border-radius: 16px !important;
        padding: 20px !important;
    }
    
    .featured-content {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Logo on top */
    .featured-logo {
        order: 1 !important;
        margin-bottom: 15px !important;
    }
    
    /* Badge below logo */
    .featured-badge {
        order: 2 !important;
        margin-bottom: 10px !important;
    }
    
    /* Text content */
    .featured-info {
        order: 3 !important;
        text-align: center !important;
    }
    
    /* Stats at bottom */
    .featured-stats {
        order: 4 !important;
        margin-top: 20px !important;
    }
    
    /* Clean up text */
    .featured-info h3 {
        font-size: 1.4rem !important;
        margin-bottom: 5px !important;
    }
    
    .featured-location {
        justify-content: center !important;
        margin-bottom: 10px !important;
    }
    
    .featured-description {
        font-size: 0.9rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    
    /* Stats in a row */
    .featured-stats {
        display: flex !important;
        justify-content: space-around !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
    }
    
    .featured-stats .stat {
        flex: 1 !important;
        min-width: 80px !important;
        text-align: center !important;
        background: #f8f9fa !important;
        padding: 10px 5px !important;
        border-radius: 10px !important;
    }
}

/* Very small phones */
@media (max-width: 480px) {
    .featured-stats {
        flex-direction: column !important;
    }
    
    .featured-stats .stat {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        text-align: left !important;
    }
    
    .featured-stats .stat-number {
        font-size: 1.2rem !important;
    }
}
/* ===== FIX PARTNER SCHOOLS ON MOBILE ===== */

@media (max-width: 768px) {
    
    /* Fix featured school section */
    .featured-school {
        padding: 25px 15px !important;
        margin-bottom: 30px !important;
    }
    
    /* Stack content vertically */
    .featured-content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    /* Center logo */
    .featured-logo {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 10px !important;
    }
    
    .featured-logo img {
        max-width: 120px !important;
        height: auto !important;
        margin: 0 auto !important;
    }
    
    /* Fix text alignment */
    .featured-info {
        text-align: center !important;
        padding: 0 5px !important;
    }
    
    .featured-info h3 {
        font-size: 1.3rem !important;
        margin-bottom: 5px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
    
    .featured-location {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
        justify-content: center !important;
    }
    
    .featured-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        margin-bottom: 15px !important;
        padding: 0 10px !important;
    }
    
    /* Fix stats layout */
    .featured-stats {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin-top: 15px !important;
    }
    
    .featured-stats .stat {
        text-align: center !important;
        padding: 8px 5px !important;
        background: #f8f9fa !important;
        border-radius: 8px !important;
    }
    
    .featured-stats .stat-number {
        font-size: 1.2rem !important;
        display: block !important;
    }
    
    .featured-stats .stat-label {
        font-size: 0.7rem !important;
        display: block !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }
    
    /* Fix badge position */
    .featured-badge {
        text-align: center !important;
        margin-bottom: 15px !important;
    }
    
    .featured-tag {
        display: inline-block !important;
        padding: 5px 15px !important;
        font-size: 0.8rem !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .featured-logo img {
        max-width: 100px !important;
    }
    
    .featured-info h3 {
        font-size: 1.2rem !important;
    }
    
    .featured-stats {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    
    .featured-stats .stat {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
    }
    
    .featured-stats .stat-number {
        font-size: 1.1rem !important;
        margin-right: 10px !important;
    }
    
    .featured-stats .stat-label {
        font-size: 0.8rem !important;
    }
}

/* Medium phones */
@media (min-width: 481px) and (max-width: 768px) {
    .featured-stats {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
/* ===== LIGHT MODE ATTRACTIVE MENU ===== */

@media (max-width: 768px) {
    
    .mobile-menu {
        background: white !important;
        box-shadow: 5px 0 30px rgba(0,0,0,0.1) !important;
    }
    
    .mobile-menu-header {
        border-bottom: 2px solid #f0f0f0 !important;
    }
    
    .mobile-menu-header h3 {
        color: #2c3e50 !important;
    }
    
    .close-menu {
        color: #e67e22 !important;
    }
    
    .mobile-nav-link {
        color: #2c3e50 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .mobile-nav-link:hover,
    .mobile-nav-link.active {
        background: rgba(230,126,34,0.1) !important;
        color: #e67e22 !important;
    }
    
    .mobile-dropdown-menu {
        background: #f8f9fa !important;
    }
    
    .mobile-dropdown-menu a {
        color: #2c3e50 !important;
    }
    
    .mobile-menu-footer {
        background: #f8f9fa !important;
    }
}
/* ===== MOBILE MENU HEADER - ORANGE INTERNATIONAL ===== */

@media (max-width: 768px) {
    
    .mobile-menu-header {
        background: linear-gradient(135deg, #0f172a, #1e1e2f) !important;
        padding: 25px 20px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-bottom: 2px solid rgba(230,126,34,0.3) !important;
    }
    
    /* Logo container */
    .mobile-logo-container {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
    }
    
    /* Logo image */
    .mobile-logo {
        width: 45px !important;
        height: 45px !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1);
        animation: mobileLogoPulse 2s infinite ease-in-out;
    }
    
    @keyframes mobileLogoPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }
    
    /* Logo text container */
    .mobile-logo-text {
        display: flex !important;
        flex-direction: column !important;
        line-height: 1.2 !important;
    }
    
    /* Zimba text - WHITE */
    .mobile-zimba {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
        color: white !important;
        font-family: 'Playfair Display', serif !important;
        letter-spacing: 1px !important;
    }
    
    /* International text - ORANGE (THIS IS WHAT YOU WANT) */
    .mobile-international {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: #e67e22 !important; /* ORANGE COLOR */
        font-family: 'Playfair Display', serif !important;
        letter-spacing: 0.5px !important;
        text-shadow: 0 0 8px rgba(230,126,34,0.4);
    }
    
    /* Academy text - WHITE */
    .mobile-academy {
        font-size: 1rem !important;
        font-weight: 600 !important;
        color: white !important;
        font-family: 'Playfair Display', serif !important;
        letter-spacing: 0.5px !important;
    }
    
    /* Close button */
    .close-menu {
        color: #e67e22 !important;
        font-size: 2.5rem !important;
        background: rgba(255,255,255,0.1) !important;
        width: 45px !important;
        height: 45px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 1px solid rgba(230,126,34,0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    .close-menu:hover {
        background: #e67e22 !important;
        color: white !important;
        transform: rotate(90deg) !important;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .mobile-logo {
        width: 35px !important;
        height: 35px !important;
    }
    
    .mobile-zimba {
        font-size: 1rem !important;
    }
    
    .mobile-international,
    .mobile-academy {
        font-size: 0.85rem !important;
    }
}
/* ===== FORCE INTERNATIONAL TO BE ORANGE ===== */

/* Target the exact text in mobile menu */
.mobile-menu .mobile-international,
.mobile-menu-header .mobile-international,
.mobile-logo-text .mobile-international {
    color: #e67e22 !important;
    font-weight: 700 !important;
    display: inline-block !important;
}

/* Make sure parent containers don't override */
.mobile-logo-text span {
    display: inline-block !important;
}

.mobile-logo-text .mobile-zimba {
    color: white !important;
}

.mobile-logo-text .mobile-academy {
    color: white !important;
}

/* Alternative: Target by text content if class isn't working */
.mobile-logo-text span:nth-child(2) {
    color: #e67e22 !important;
}

/* Force override for any possible conflicts */
span.orange-text,
.orange-text {
    color: #e67e22 !important;
}

/* For mobile menu header specifically */
@media (max-width: 768px) {
    .mobile-menu-header span:nth-child(2),
    .mobile-logo-text span:nth-child(2) {
        color: #e67e22 !important;
    }
}
/* ===== FIX DESKTOP DROPDOWN MENU ===== */

@media (min-width: 769px) {
    
    /* Make sure dropdown is positioned correctly */
    .dropdown {
        position: relative !important;
    }
    
    /* Dropdown menu - visible on hover */
    .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) translateY(10px) !important;
        background: white !important;
        min-width: 240px !important;
        border-radius: 16px !important;
        padding: 12px 0 !important;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
        border: 1px solid rgba(230, 126, 34, 0.2) !important;
        z-index: 1000 !important;
        list-style: none !important;
    }
    
    /* Show dropdown on hover */
    .dropdown:hover .dropdown-menu {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(5px) !important;
    }
    
    /* Add a nice pointer arrow */
    .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -6px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: white;
        border-left: 1px solid rgba(230, 126, 34, 0.2);
        border-top: 1px solid rgba(230, 126, 34, 0.2);
        border-radius: 4px 0 0 0;
    }
    
    /* Dropdown items */
    .dropdown-menu li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }
    
    .dropdown-menu a {
        display: block !important;
        padding: 12px 25px !important;
        color: #2c3e50 !important;
        text-decoration: none !important;
        font-size: 0.95rem !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        white-space: nowrap !important;
        border-bottom: 1px solid rgba(0,0,0,0.03) !important;
    }
    
    .dropdown-menu a:last-child {
        border-bottom: none !important;
    }
    
    /* Hover effect with icon */
    .dropdown-menu a {
        position: relative !important;
        padding-left: 25px !important;
    }
    
    .dropdown-menu a::before {
        content: '→';
        position: absolute;
        left: 5px;
        color: #e67e22;
        opacity: 0;
        transition: all 0.3s ease;
    }
    
    .dropdown-menu a:hover::before,
    .dropdown-menu a.active::before {
        opacity: 1;
        left: 10px;
    }
    
    .dropdown-menu a:hover,
    .dropdown-menu a.active {
        background: rgba(230, 126, 34, 0.05) !important;
        color: #e67e22 !important;
        padding-left: 35px !important;
    }
    
    /* Program-specific icons */
    .dropdown-menu a[href="chess.html"]:hover::before {
        content: '';
    }
    .dropdown-menu a[href="music.html"]:hover::before {
        content: '';
    }
    .dropdown-menu a[href="art-craft.html"]:hover::before {
        content: '';
    }
    .dropdown-menu a[href="ict-robotics.html"]:hover::before {
        content: '';
    }
    .dropdown-menu a[href="public-speaking.html"]:hover::before {
        content: '';
    }
    
    /* Style for the Programs button itself */
    .dropdown-toggle {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
    }
    
    .dropdown-toggle::after {
        content: '▼' !important;
        font-size: 0.7rem !important;
        color: #e67e22 !important;
        transition: transform 0.3s ease !important;
    }
    
    .dropdown:hover .dropdown-toggle::after {
        transform: rotate(180deg) !important;
    }
    
    /* Active state for dropdown toggle */
    .dropdown-toggle.active {
        color: #e67e22 !important;
    }
}
/* ===== MUSIC ACADEMY DESKTOP FIX ===== */

@media (min-width: 769px) {
    
    /* Hero section */
    .music-hero {
        min-height: 100vh;
        display: flex;
        align-items: center;
        padding: 0;
        position: relative;
        overflow: hidden;
    }
    
    .music-hero-content {
        max-width: 900px;
        margin: 0 auto;
        padding: 0 20px;
        text-align: center;
    }
    
    /* Logo */
    .music-logo-container {
        width: 180px !important;
        height: 180px !important;
        margin: 0 auto 25px !important;
        position: relative;
    }
    
    .music-logo {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        filter: brightness(0) invert(1);
    }
    
    .music-logo-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120%;
        height: 120%;
        background: radial-gradient(circle, rgba(230,126,34,0.4) 0%, transparent 70%);
        border-radius: 50%;
        z-index: -1;
        animation: glowPulse 3s infinite;
    }
    
    @keyframes glowPulse {
        0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
        50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
    }
    
    /* Subtitle */
    .music-hero-subtitle {
        display: block;
        font-size: 2rem !important;
        font-weight: 600;
        color: white;
        margin-bottom: 10px;
        letter-spacing: 2px;
    }
    
    .music-hero-subtitle .orange-text {
        color: #e67e22 !important;
        font-weight: 700;
    }
    
    /* Main title */
    .music-hero-content h1 {
        font-size: 4.5rem !important;
        font-weight: 800;
        color: white;
        margin-bottom: 15px;
        font-family: 'Playfair Display', serif;
        line-height: 1.2;
    }
    
    .music-hero-content h1 .orange-text {
        color: #e67e22 !important;
    }
    
    /* Tagline */
    .music-hero-tagline {
        font-size: 1.5rem !important;
        color: rgba(255,255,255,0.9);
        margin-bottom: 35px;
        font-style: italic;
        font-weight: 300;
    }
    
    /* Features - horizontal layout */
    .music-hero-features {
        display: flex !important;
        justify-content: center !important;
        gap: 30px !important;
        margin-bottom: 40px !important;
        flex-wrap: wrap !important;
    }
    
    .music-hero-features span {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        background: rgba(255,255,255,0.1) !important;
        backdrop-filter: blur(5px) !important;
        padding: 12px 25px !important;
        border-radius: 50px !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        font-size: 1rem !important;
        color: white !important;
    }
    
    .music-hero-features i {
        color: #e67e22 !important;
        font-size: 1.2rem !important;
    }
    
    /* Buttons - horizontal layout */
    .music-hero-buttons {
        display: flex !important;
        justify-content: center !important;
        gap: 20px !important;
    }
    
    .btn-music-primary,
    .btn-music-secondary {
        display: inline-block !important;
        padding: 15px 40px !important;
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        border-radius: 50px !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        min-width: 200px !important;
        text-align: center !important;
    }
    
    .btn-music-primary {
        background: #e67e22 !important;
        color: white !important;
        border: 2px solid #e67e22 !important;
    }
    
    .btn-music-primary:hover {
        background: transparent !important;
        color: #e67e22 !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 25px rgba(230,126,34,0.4) !important;
    }
    
    .btn-music-secondary {
        background: transparent !important;
        color: white !important;
        border: 2px solid white !important;
    }
    
    .btn-music-secondary:hover {
        background: white !important;
        color: #2c3e50 !important;
        transform: translateY(-3px) !important;
        box-shadow: 0 10px 25px rgba(255,255,255,0.2) !important;
    }
    
    /* About section */
    .music-about {
        padding: 100px 0 !important;
    }
    
    .music-about-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 60px !important;
        align-items: center !important;
    }
    
    .music-about-text h2 {
        font-size: 3rem !important;
        margin-bottom: 25px !important;
    }
    
    .music-about-text .lead-text {
        font-size: 1.2rem !important;
        line-height: 1.8 !important;
        margin-bottom: 20px !important;
    }
    
    .music-stats {
        display: flex !important;
        gap: 40px !important;
        margin-top: 40px !important;
    }
    
    .stat-item {
        text-align: center !important;
    }
    
    .stat-number {
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        color: #e67e22 !important;
        display: block !important;
    }
    
    .stat-label {
        font-size: 0.9rem !important;
        color: #777 !important;
        text-transform: uppercase !important;
    }
    
    /* Instruments grid */
    .instruments-grid {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 30px !important;
        margin-top: 50px !important;
    }
    
    .instrument-card {
        background: white !important;
        border-radius: 16px !important;
        padding: 35px 25px !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.05) !important;
        border: 1px solid rgba(230,126,34,0.1) !important;
        transition: all 0.3s ease !important;
        text-align: center !important;
    }
    
    .instrument-card:hover {
        transform: translateY(-10px) !important;
        box-shadow: 0 20px 40px rgba(230,126,34,0.15) !important;
        border-color: #e67e22 !important;
    }
    
    .instrument-icon {
        font-size: 3.5rem !important;
        margin-bottom: 20px !important;
    }
    
    .instrument-card h3 {
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        margin-bottom: 10px !important;
        color: #2c3e50 !important;
    }
    
    .instrument-card p {
        color: #777 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        margin-bottom: 15px !important;
    }
    
    .instrument-features {
        list-style: none !important;
        padding: 0 !important;
    }
    
    .instrument-features li {
        padding: 8px 0 !important;
        color: #666 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }
    
    .instrument-features li:last-child {
        border-bottom: none !important;
    }
}

/* Fix for larger screens */
@media (min-width: 1200px) {
    .music-hero-content h1 {
        font-size: 5rem !important;
    }
    
    .music-logo-container {
        width: 220px !important;
        height: 220px !important;
    }
}

/* Swiper Customization */
.swiper-button-next,
.swiper-button-prev {
    color: #e67e22;
    background: rgba(255,255,255,0.9);
}
/* Make chess page logo match homepage */
.chess-logo-container {
    width: 180px !important;
    height: 180px !important;
}

/* Remove any conflicting sizes */
.chess-logo {
    max-width: 100% !important;
    height: auto !important;
}
/* ===== UNIFORM LOGO SIZE FOR ALL PAGES ===== */

/* Base size for all program pages and about page */
.chess-logo-container,
.music-logo-container,
.art-logo-container,
.tech-logo-container,
.speak-logo-container,
.about-logo-container {
    width: 180px !important;
    height: 180px !important;
    margin: 0 auto 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo images inside containers */
.chess-logo-container img,
.music-logo-container img,
.art-logo-container img,
.tech-logo-container img,
.speak-logo-container img,
.about-logo-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* For larger screens (desktop) */
@media (min-width: 1200px) {
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 200px !important;
        height: 200px !important;
    }
}

/* For tablets */
@media (max-width: 992px) {
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 160px !important;
        height: 160px !important;
    }
}

/* For mobile */
@media (max-width: 768px) {
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 140px !important;
        height: 140px !important;
    }
}

/* For small mobile */
@media (max-width: 480px) {
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        width: 120px !important;
        height: 120px !important;
    }
}
/* ===== ABOUT PAGE - ENHANCED DARK THEME ===== */

/* Hero Section */
.about-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: -80px;
    padding-top: 80px;
    background: #0a0a0a;
}

.about-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a0a0a, #111111);
    z-index: 1;
}

.about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, transparent 0%, rgba(0,0,0,0.6) 100%);
    z-index: 2;
}

.about-hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.about-hero-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(230,126,34,0.3);
    border-radius: 50%;
    animation: aboutParticleFloat 18s infinite linear;
}

.about-hero-particles .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.about-hero-particles .particle:nth-child(2) { top: 60%; right: 15%; animation-delay: 3s; }
.about-hero-particles .particle:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 6s; }
.about-hero-particles .particle:nth-child(4) { top: 40%; right: 25%; animation-delay: 9s; }
.about-hero-particles .particle:nth-child(5) { bottom: 50%; left: 30%; animation-delay: 12s; }

@keyframes aboutParticleFloat {
    0% { transform: translateY(0) translateX(0); opacity: 0.4; }
    25% { transform: translateY(-50px) translateX(30px); opacity: 0.8; }
    50% { transform: translateY(30px) translateX(-30px); opacity: 0.3; }
    75% { transform: translateY(-30px) translateX(40px); opacity: 0.7; }
    100% { transform: translateY(0) translateX(0); opacity: 0.4; }
}

.about-hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* About Logo */
.about-logo-container {
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
    position: relative;
    animation: fadeInDown 1s ease;
}

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

.about-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    animation: aboutLogoFloat 4s infinite ease-in-out;
}

@keyframes aboutLogoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Academy Name */
.about-academy-name {
    margin-bottom: 30px;
}

.name-line {
    display: block;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.2;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.name-line:nth-child(1) { color: #ffffff; }
.name-line:nth-child(2) { color: #e67e22; }
.name-line:nth-child(3) { color: #ffffff; }

/* Tagline */
.about-tagline {
    margin-bottom: 25px;
}

.tagline-unleashing,
.tagline-unseen {
    display: block;
    font-size: clamp(1.8rem, 5vw, 3rem);
    font-weight: 900;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    line-height: 1.2;
}

.tagline-unleashing {
    color: #ffffff;
}

.tagline-unseen {
    color: #e67e22;
    margin-top: 5px;
}

/* Description */
.about-description {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: rgba(255,255,255,0.8);
    margin-bottom: 40px;
    font-style: italic;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

/* Stats Grid */
.about-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
}

.stat-box {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 16px;
    padding: 20px 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
    border-color: rgba(230,126,34,0.4);
    background: rgba(230,126,34,0.05);
}

.stat-number {
    display: block;
    font-size: clamp(1.8rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #e67e22;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
}

.stat-label {
    display: block;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ===== OUR STORY SECTION ===== */
.about-story {
    padding: 100px 0;
    background: #0f0f0f;
    position: relative;
}

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.story-content .section-tag {
    display: inline-block;
    color: #e67e22;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 20px;
    font-weight: 500;
}

.story-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 25px;
    font-family: 'Playfair Display', serif;
    color: #ffffff;
}

.story-text .lead {
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.8;
    margin-bottom: 20px;
    border-left: 3px solid #e67e22;
    padding-left: 20px;
    color: rgba(255,255,255,0.9);
    font-style: italic;
}

.story-text p {
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
    margin-bottom: 20px;
}

/* Milestones */
.story-milestones {
    display: flex;
    gap: 30px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.milestone {
    text-align: center;
    padding: 12px 20px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.milestone:hover {
    background: rgba(230,126,34,0.1);
    transform: translateY(-3px);
}

.milestone-year {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e67e22;
    font-family: 'Playfair Display', serif;
    margin-bottom: 5px;
}

.milestone-desc {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Story Image */
.story-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

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

.story-image:hover img {
    transform: scale(1.05);
}

.story-image-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(5px);
    padding: 6px 18px;
    border-radius: 30px;
    border-left: 3px solid #e67e22;
}

.story-image-caption span {
    color: white;
    font-size: 0.8rem;
}

/* ===== MISSION & VISION SECTION ===== */
.mission-vision {
    padding: 100px 0;
    background: #0a0a0a;
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.mission-card,
.vision-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 24px;
    padding: 45px 35px;
    transition: all 0.4s ease;
}

.mission-card:hover,
.vision-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230,126,34,0.3);
    box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}

.card-icon {
    width: 70px;
    height: 70px;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.mission-card:hover .card-icon,
.vision-card:hover .card-icon {
    background: #e67e22;
    transform: scale(1.05);
}

.card-icon i {
    font-size: 2rem;
    color: #e67e22;
    transition: all 0.3s ease;
}

.mission-card:hover .card-icon i,
.vision-card:hover .card-icon i {
    color: white;
}

.mission-card h3,
.vision-card h3 {
    font-size: 1.6rem;
    margin-bottom: 20px;
    color: white;
}

.mission-card p,
.vision-card p {
    color: rgba(255,255,255,0.7);
    line-height: 1.8;
    margin-bottom: 25px;
}

.card-footer {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.card-footer span {
    background: rgba(230,126,34,0.1);
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.75rem;
    color: #e67e22;
    border: 1px solid rgba(230,126,34,0.2);
}

/* ===== CORE VALUES SECTION ===== */
.core-values {
    padding: 100px 0;
    background: #0f0f0f;
}

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

.value-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 35px 25px;
    text-align: center;
    transition: all 0.4s ease;
}

.value-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230,126,34,0.3);
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}

.value-icon {
    width: 70px;
    height: 70px;
    background: rgba(230,126,34,0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon {
    background: #e67e22;
    transform: scale(1.05);
}

.value-icon i {
    font-size: 2rem;
    color: #e67e22;
    transition: all 0.3s ease;
}

.value-card:hover .value-icon i {
    color: white;
}

.value-card h3 {
    font-size: 1.3rem;
    margin-bottom: 12px;
    color: white;
}

.value-card p {
    color: rgba(255,255,255,0.7);
    line-height: 1.6;
    font-size: 0.9rem;
}

/* ===== LEADERSHIP SECTION ===== */
.leadership {
    padding: 100px 0;
    background: #0a0a0a;
}

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

.leader-card {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}

.leader-card:hover {
    transform: translateY(-8px);
    border-color: rgba(230,126,34,0.3);
    box-shadow: 0 20px 30px rgba(0,0,0,0.2);
}

.leader-image {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
}

.leader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.leader-card:hover .leader-image img {
    transform: scale(1.08);
}

.leader-social {
    position: absolute;
    bottom: -50px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    transition: bottom 0.3s ease;
}

.leader-card:hover .leader-social {
    bottom: 0;
}

.leader-social a {
    width: 35px;
    height: 35px;
    background: #e67e22;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.leader-social a:hover {
    background: white;
    color: #e67e22;
    transform: scale(1.1);
}

.leader-info {
    padding: 20px;
    text-align: center;
}

.leader-info h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: white;
}

.leader-title {
    color: #e67e22;
    font-size: 0.85rem;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.leader-bio {
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
    .story-grid,
    .mission-vision-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .values-grid,
    .leadership-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .about-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .about-logo-container {
        width: 140px;
        height: 140px;
    }
    
    .values-grid,
    .leadership-grid {
        grid-template-columns: 1fr;
    }
    
    .about-stats-grid {
        grid-template-columns: 1fr;
        max-width: 250px;
    }
    
    .story-milestones {
        justify-content: center;
    }
    
    .mission-card,
    .vision-card {
        padding: 30px 25px;
    }
    
    .tagline-unleashing,
    .tagline-unseen {
        font-size: clamp(1.5rem, 5vw, 2rem);
        letter-spacing: 3px;
    }
}

@media (max-width: 480px) {
    .about-logo-container {
        width: 110px;
        height: 110px;
    }
    
    .name-line {
        font-size: clamp(1.2rem, 4vw, 1.8rem);
        letter-spacing: 1px;
    }
    
    .tagline-unleashing,
    .tagline-unseen {
        letter-spacing: 2px;
    }
}
/* ===== FIX CONTACT PAGE LOGO - MAKE IT BIGGER ===== */

/* Override the existing logo size */
.hero-logo-container {
    width: 180px !important;
    height: 180px !important;
    margin: 30px auto 20px !important;
}

/* Make the logo image fill the container */
.hero-logo-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
}

/* Adjust glow effect to match new size */
.logo-glow {
    width: 100% !important;
    height: 100% !important;
}

/* For larger screens */
@media (min-width: 1200px) {
    .hero-logo-container {
        width: 220px !important;
        height: 220px !important;
    }
}

/* For tablets */
@media (max-width: 768px) {
    .hero-logo-container {
        width: 150px !important;
        height: 150px !important;
        margin: 20px auto 15px !important;
    }
}

/* For mobile */
@media (max-width: 480px) {
    .hero-logo-container {
        width: 120px !important;
        height: 120px !important;
        margin: 15px auto 10px !important;
    }
}
/* ===== GLOBAL FONT SETTINGS ===== */

/* Base font for all pages */
body {
    font-family: 'Montserrat', sans-serif;
    color: var(--text-primary, #ffffff);
    line-height: 1.6;
}

/* Headings for all pages */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    line-height: 1.2;
}

/* Specific heading sizes */
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: clamp(1.2rem, 2.5vw, 1.5rem); }
h5 { font-size: clamp(1rem, 2vw, 1.2rem); }

/* Paragraph text for all pages */
p, .text-body {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.9rem, 2vw, 1rem);
    line-height: 1.6;
    color: var(--text-secondary, rgba(255,255,255,0.9));
}

/* Buttons across all pages */
button, .btn, .btn-primary, .btn-secondary, .btn-outline {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

/* Navigation links */
.nav-link, .navbar a, .mobile-nav-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

/* Card titles */
.card-title, .glass-card .card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

/* Form inputs */
input, textarea, select, .form-input, .form-select, .form-textarea {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
}

/* Small text, captions, labels */
.small-text, .caption, .stat-label, .badge, .tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Orange text accent */
.orange-text, .text-orange {
    color: #e67e22;
    font-weight: 600;
}

/* Section headers */
.section-header .subtitle,
.section-subtitle,
.header-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #e67e22;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
}

/* Quotes */
blockquote, .quote-text, .testimonial-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.1rem;
}

/* ===== FONT SMOOTHING ===== */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ===== RESPONSIVE FONT ADJUSTMENTS ===== */
@media (max-width: 768px) {
    body {
        font-size: 15px;
    }
    
    h1 { font-size: clamp(2rem, 6vw, 2.5rem); }
    h2 { font-size: clamp(1.6rem, 5vw, 2rem); }
    h3 { font-size: clamp(1.3rem, 4vw, 1.6rem); }
}

@media (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    .section-title {
        font-size: 1.8rem;
    }
    
    .header-tag {
        font-size: 0.7rem;
        letter-spacing: 2px;
    }
}
/* ===== EMERGENCY LOGO FIX - UNIVERSAL ===== */

/* Force ALL logos to be visible */
img[src*="zimba-logo"],
img[src*="logo"],
.logo-img,
.hero-logo,
.chess-logo,
.music-logo,
.art-logo,
.tech-logo,
.speak-logo,
.about-logo,
.contact-logo,
.mobile-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 50px !important;
    min-height: 50px !important;
    width: auto !important;
    height: auto !important;
    max-width: 200px !important;
}

/* Fix logo containers */
.logo a,
.logo,
.hero-logo-container,
.chess-logo-container,
.music-logo-container,
.art-logo-container,
.tech-logo-container,
.speak-logo-container,
.about-logo-container,
.mobile-logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Remove any filters that might hide logos */
.hero-logo-container img,
.chess-logo-container img,
.music-logo-container img {
    filter: none !important;
}
/* ===== FIX LOGO COLOR - SHOW ORIGINAL ===== */
.hero-logo-container img,
.logo-img {
    filter: none !important;
    filter: brightness(1) invert(0) !important;
    /* Remove the white filter */
}

/* If the above doesn't work, try this */
.hero-logo-container img {
    filter: none !important;
    -webkit-filter: none !important;
}
/* ===== CHESS PAGE - MAKE TEXT VISIBLE ===== */

/* About Section Container */
.chess-about {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a, #0f0f0f);
}

/* Main Heading */
.chess-about h2 {
    font-size: 2.5rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    margin-bottom: 20px;
}

/* Paragraph Text */
.chess-about p,
.chess-about .lead-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* Stats List - Make Numbers and Labels Visible */
.chess-about ul {
    list-style: none;
    padding: 0;
    margin: 30px 0;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.chess-about li {
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(230, 126, 34, 0.25);
    border-radius: 16px;
    padding: 20px 30px;
    min-width: 140px;
}

.chess-about li strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: #e67e22;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Playfair Display', serif;
}

.chess-about li span {
    display: block;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Optional: Add hover effect to stats */
.chess-about li:hover {
    transform: translateY(-5px);
    border-color: #e67e22;
    background: rgba(230, 126, 34, 0.08);
    transition: all 0.3s ease;
}
/* ===== ABOUT STORY SECTION - TEXT VISIBILITY ===== */

.about-story {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a0a0a, #0f0f0f);
    position: relative;
}

/* Section Tag */
.about-story .section-tag {
    display: inline-block;
    color: #e67e22;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

/* Main Title */
.about-story .story-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    margin-bottom: 25px;
    line-height: 1.2;
}

/* Lead Paragraph */
.about-story .lead-text {
    font-size: 1.2rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 25px;
    border-left: 3px solid #e67e22;
    padding-left: 20px;
    font-style: italic;
}

/* Regular Paragraphs */
.about-story p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
}

/* Milestones Section */
.story-milestones {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
    padding: 30px 0;
    border-top: 1px solid rgba(230, 126, 34, 0.2);
    border-bottom: 1px solid rgba(230, 126, 34, 0.2);
}

/* Individual Milestone */
.milestone {
    text-align: center;
    min-width: 120px;
    flex: 1;
}

.milestone-year {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #e67e22;
    font-family: 'Playfair Display', serif;
    margin-bottom: 5px;
}

.milestone-desc {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Optional: Add hover effect to milestones */
.milestone:hover {
    transform: translateY(-5px);
    transition: all 0.3s ease;
}

.milestone:hover .milestone-year {
    text-shadow: 0 0 10px rgba(230, 126, 34, 0.5);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .about-story {
        padding: 60px 0;
    }
    
    .about-story .story-title {
        font-size: 2rem;
    }
    
    .about-story .lead-text {
        font-size: 1rem;
    }
    
    .story-milestones {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }
    
    .milestone {
        text-align: center;
        width: 100%;
    }
    
    .milestone-year {
        font-size: 1.5rem;
    }
}
/* ===== MOBILE HEADER SPACING - ALL PAGES ===== */

@media (max-width: 768px) {
    
    /* ===== BODY & HEADER ===== */
    body {
        padding-top: 75px !important;
    }
    
    header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        background: rgba(10, 10, 10, 0.95);
        backdrop-filter: blur(10px);
        min-height: 70px;
    }
    
    .navbar {
        padding: 12px 15px !important;
        min-height: 70px;
    }
    
    .logo-img {
        height: 42px !important;
    }
    
    /* ===== HERO SECTIONS - ALL PAGES ===== */
    .hero,
    .chess-hero,
    .music-hero,
    .art-hero,
    .tech-hero,
    .speak-hero,
    .about-hero {
        margin-top: 0 !important;
        padding-top: 90px !important;
        min-height: 100vh;
    }
    
    /* ===== LOGO CONTAINERS - BIGGER TOP MARGIN ===== */
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        margin-top: 50px !important;
        margin-bottom: 30px !important;
    }
    
    /* ===== HERO CONTENT ===== */
    .hero-content,
    .chess-hero-content,
    .music-hero-content,
    .art-hero-content,
    .tech-hero-content,
    .speak-hero-content,
    .about-hero-content {
        padding-top: 25px !important;
    }
    
    /* ===== TITLES - MORE SPACE ===== */
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1,
    .about-hero h1,
    .about-hero-title {
        margin-top: 25px !important;
        margin-bottom: 15px !important;
        line-height: 1.3 !important;
    }
    
    /* ===== TAGLINES ===== */
    .tagline,
    .hero-tagline,
    .music-hero-tagline,
    .art-hero-tagline,
    .tech-hero-tagline,
    .speak-hero-tagline {
        margin-top: 10px !important;
        margin-bottom: 20px !important;
    }
    
    /* ===== DESCRIPTIONS ===== */
    .hero p,
    .chess-hero p,
    .music-hero p,
    .art-hero p,
    .tech-hero p,
    .speak-hero p {
        margin-top: 15px !important;
        margin-bottom: 25px !important;
        line-height: 1.6 !important;
    }
    
    /* ===== FEATURE BADGES ===== */
    .hero-features,
    .music-hero-features,
    .art-hero-features,
    .tech-hero-features,
    .speak-hero-features {
        margin-top: 20px !important;
        margin-bottom: 30px !important;
        gap: 15px !important;
    }
    
    .hero-features span,
    .music-hero-features span,
    .art-hero-features span,
    .tech-hero-features span,
    .speak-hero-features span {
        padding: 12px 20px !important;
    }
    
    /* ===== BUTTONS ===== */
    .hero-buttons,
    .music-hero-buttons,
    .art-hero-buttons,
    .tech-hero-buttons,
    .speak-hero-buttons {
        margin-top: 30px !important;
        margin-bottom: 40px !important;
        gap: 18px !important;
    }
    
    .btn,
    .btn-large,
    .btn-music-primary,
    .btn-music-secondary,
    .btn-art-primary,
    .btn-art-secondary,
    .btn-tech-primary,
    .btn-tech-secondary,
    .btn-speak-primary,
    .btn-speak-secondary {
        padding: 14px 25px !important;
    }
}

/* ===== PAGE-SPECIFIC LOGO SPACING - EVEN MORE SPACE ===== */
@media (max-width: 768px) {
    
    /* Music Page */
    .music-hero .music-logo-container {
        margin-top: 60px !important;
        margin-bottom: 35px !important;
    }
    .music-hero h1 {
        margin-top: 30px !important;
    }
    
    /* Chess Page */
    .chess-hero .chess-logo-container {
        margin-top: 60px !important;
        margin-bottom: 35px !important;
    }
    .chess-hero h1 {
        margin-top: 30px !important;
    }
    
    /* Art Page */
    .art-hero .art-logo-container {
        margin-top: 60px !important;
        margin-bottom: 35px !important;
    }
    
    /* Tech Page */
    .tech-hero .tech-logo-container {
        margin-top: 60px !important;
        margin-bottom: 35px !important;
    }
    
    /* Speaking Page */
    .speak-hero .speak-logo-container {
        margin-top: 60px !important;
        margin-bottom: 35px !important;
    }
    
    /* About Page */
    .about-hero .about-logo-container {
        margin-top: 60px !important;
        margin-bottom: 35px !important;
    }
}

/* ===== EXTRA SPACE FOR SMALL PHONES (iPhone SE, etc.) ===== */
@media (max-width: 480px) {
    .hero-logo-container,
    .chess-logo-container,
    .music-logo-container,
    .art-logo-container,
    .tech-logo-container,
    .speak-logo-container,
    .about-logo-container {
        margin-top: 70px !important;
        margin-bottom: 40px !important;
    }
    
    .hero,
    .chess-hero,
    .music-hero,
    .art-hero,
    .tech-hero,
    .speak-hero,
    .about-hero {
        padding-top: 100px !important;
    }
    
    .hero h1,
    .chess-hero h1,
    .music-hero h1,
    .art-hero h1,
    .tech-hero h1,
    .speak-hero h1,
    .about-hero h1 {
        margin-top: 35px !important;
    }
}
/* ===== PARTNER SCHOOL LOGOS - FIX ===== */

/* Make logo containers consistent */
.school-logo {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    border: 1px solid rgba(230, 126, 34, 0.2);
    overflow: hidden;
}

/* Make logos fill the container - NO FILTER */
.school-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* For the featured school logo */
.featured-logo {
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    border: 1px solid rgba(230, 126, 34, 0.2);
    overflow: hidden;
}

.featured-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Responsive for mobile */
@media (max-width: 768px) {
    .school-logo {
        width: 80px;
        height: 80px;
    }
    
    .featured-logo {
        width: 120px;
        height: 120px;
    }
}
/* ===== FEATURE BADGES - MAKE TEXT VISIBLE WHITE ===== */

/* Container for badges */
.feature-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
    padding: 10px;
}

/* Individual badge styling */
.badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(230, 126, 34, 0.3);
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

/* Make text WHITE and visible */
.badge span {
    color: #ffffff !important;
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* Icon color */
.badge i {
    color: #e67e22;
    font-size: 1rem;
}

/* Optional hover effect */
.badge:hover {
    background: rgba(230, 126, 34, 0.15);
    border-color: #e67e22;
    transform: translateY(-2px);
}
/* ===== MOBILE DROPDOWN - COMPLETE WORKING CSS ===== */

.mobile-dropdown {
    position: relative;
}

.mobile-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mobile-dropdown-toggle i {
    transition: transform 0.3s ease;
    color: #e67e22;
}

.mobile-dropdown.active .mobile-dropdown-toggle i {
    transform: rotate(180deg);
}

/* Hide by default */
.mobile-dropdown-menu {
    display: none;
    list-style: none;
    padding: 10px 0 10px 20px;
    margin: 0;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}

/* Show when active */
.mobile-dropdown.active .mobile-dropdown-menu {
    display: block !important;
}

.mobile-dropdown-menu li {
    margin: 0;
}

.mobile-dropdown-menu a {
    display: block;
    padding: 10px 15px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-dropdown-menu a:last-child {
    border-bottom: none;
}

.mobile-dropdown-menu a:hover,
.mobile-dropdown-menu a:active {
    color: #e67e22;
    padding-left: 20px;
}
/* ===== STATIC LOGO - NO ANIMATIONS ===== */

/* Remove ALL animations from ALL logos */
img[src*="zimba-logo"],
.logo-img,
.hero-logo,
.chess-logo,
.music-logo,
.art-logo,
.tech-logo,
.speak-logo,
.about-logo,
.mobile-logo {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
}

/* Hide any glow elements */
[class*="logo-glow"] {
    display: none !important;
}

/* Remove float animation */
@keyframes none {
    0%, 100% { transform: none; }
}
/* ===== PREMIUM INTERNATIONAL STYLES ===== */

/* ===== 1. ADVANCED SCROLL BEHAVIOR ===== */

/* Smooth scroll with custom easing */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

/* Custom scrollbar - International Standard */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #e67e22, #f39c12);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

/* ===== 2. GLASS MORPHISM EFFECTS (International Standard) ===== */

/* Glass card base */
.glass-premium {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

/* Hover glow effect for cards */
.glass-premium:hover {
    border-color: rgba(230, 126, 34, 0.3);
    box-shadow: 0 20px 40px rgba(230, 126, 34, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 3. ANIMATED GRADIENT BORDERS ===== */

.animated-border {
    position: relative;
    background: linear-gradient(135deg, #1a1a2a, #0a0a0a);
    border-radius: 24px;
    overflow: hidden;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, 
        #e67e22, #f39c12, #e67e22, #d35400, #e67e22);
    background-size: 300% 300%;
    border-radius: 24px;
    z-index: -1;
    animation: borderGlow 4s ease infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.animated-border:hover::before {
    opacity: 1;
}

@keyframes borderGlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== 4. INTERNATIONAL LOADING EFFECT ===== */

/* Skeleton loading effect */
.skeleton {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.05) 25%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite;
}

@keyframes skeletonLoading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== 5. TEXT ANIMATIONS (Subtle but Professional) ===== */

/* Reveal animation on scroll */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Typing effect for hero text */
.typing-effect {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid #e67e22;
    animation: typing 3s steps(40, end), blinkCursor 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: #e67e22; }
}

/* ===== 6. 3D HOVER EFFECTS FOR CARDS ===== */

.card-3d {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.card-3d:hover {
    transform: translateY(-10px) rotateX(5deg);
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.3);
}

/* ===== 7. INTERNATIONAL COLOR SCHEME VARIABLES ===== */

:root {
    /* Premium International Colors */
    --international-orange: #e67e22;
    --international-orange-dark: #d35400;
    --international-gold: #f39c12;
    --international-dark: #0a0a0a;
    --international-dark-alt: #1a1a2a;
    --international-light: #f5f5f5;
    --international-gray: #8a8a8a;
    
    /* Success / Error / Info Colors */
    --success-green: #27ae60;
    --error-red: #e74c3c;
    --info-blue: #3498db;
    --warning-yellow: #f1c40f;
}

/* ===== 8. ADVANCED BUTTON EFFECTS ===== */

.btn-international {
    position: relative;
    background: linear-gradient(135deg, #e67e22, #d35400);
    border: none;
    color: white;
    padding: 14px 35px;
    border-radius: 50px;
    font-weight: 600;
    overflow: hidden;
    transition: all 0.4s ease;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.btn-international::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.6s ease;
}

.btn-international:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.4);
}

.btn-international:hover::before {
    left: 100%;
}

.btn-international:active {
    transform: translateY(2px);
}

/* Outline button variant */
.btn-outline-international {
    background: transparent;
    border: 2px solid #e67e22;
    color: #e67e22;
}

.btn-outline-international:hover {
    background: #e67e22;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.3);
}

/* ===== 9. STATS COUNTER ANIMATION ===== */

.counter-number {
    display: inline-block;
    animation: countUp 2s ease-out;
}

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

/* ===== 10. LAZY LOAD IMAGE EFFECT ===== */

.lazy-image {
    filter: blur(10px);
    transition: filter 0.5s ease;
}

.lazy-image.loaded {
    filter: blur(0);
}

/* ===== 11. INTERNATIONAL FOOTER SHINE ===== */

footer {
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #e67e22, transparent);
    animation: shineFooter 3s infinite;
}

@keyframes shineFooter {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== 12. CUSTOM SELECTION COLOR ===== */

::selection {
    background: #e67e22;
    color: white;
}

::-moz-selection {
    background: #e67e22;
    color: white;
}

/* ===== 13. GLOWING TEXT EFFECT ===== */

.text-glow {
    text-shadow: 0 0 20px rgba(230, 126, 34, 0.5);
    animation: textGlow 3s infinite;
}

@keyframes textGlow {
    0%, 100% { text-shadow: 0 0 20px rgba(230, 126, 34, 0.3); }
    50% { text-shadow: 0 0 40px rgba(230, 126, 34, 0.6); }
}

/* ===== 14. HOVER REVEAL EFFECT ===== */

.hover-reveal {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.hover-reveal::after {
    content: '→';
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    transition: right 0.3s ease;
    color: #e67e22;
    font-size: 1.2rem;
}

.hover-reveal:hover::after {
    right: 20px;
}

.hover-reveal:hover {
    padding-right: 35px;
}

/* ===== 15. FLOATING BACKGROUND ELEMENTS ===== */

.floating-bg {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(230,126,34,0.05), transparent);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    animation: floatBg 20s infinite ease-in-out;
}

@keyframes floatBg {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(50px, -30px); }
    50% { transform: translate(-30px, 60px); }
    75% { transform: translate(40px, 40px); }
}

/* ===== 16. INTERNATIONAL GRID OVERLAY ===== */

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(230,126,34,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,126,34,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
    z-index: 0;
}

/* ===== 17. PREMIUM CARD SHADOW SYSTEM ===== */

.shadow-premium {
    box-shadow: 
        0 10px 20px rgba(0, 0, 0, 0.1),
        0 6px 6px rgba(0, 0, 0, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.shadow-premium:hover {
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.15),
        0 12px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ===== 18. TEXT GRADIENT EFFECT ===== */

.text-gradient-premium {
    background: linear-gradient(135deg, #ffffff, #e67e22, #f39c12, #ffffff);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGradientShift 6s infinite;
}

@keyframes textGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ===== 19. MAGNETIC BUTTON EFFECT ===== */

.btn-magnetic {
    transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
}

/* ===== 20. INTERNATIONAL ACCORDION/FAQ STYLING ===== */

.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 16px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-question {
    padding: 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: rgba(230, 126, 34, 0.05);
}

.faq-question i {
    transition: transform 0.3s ease;
    color: #e67e22;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 20px 20px;
}

/* ===== 21. RESPONSIVE TYPOGRAPHY CLAMP SYSTEM ===== */

:root {
    --font-xs: clamp(0.75rem, 1.5vw, 0.875rem);
    --font-sm: clamp(0.875rem, 2vw, 1rem);
    --font-base: clamp(1rem, 2.5vw, 1.125rem);
    --font-md: clamp(1.125rem, 3vw, 1.25rem);
    --font-lg: clamp(1.25rem, 3.5vw, 1.5rem);
    --font-xl: clamp(1.5rem, 4vw, 1.875rem);
    --font-2xl: clamp(1.875rem, 5vw, 2.25rem);
    --font-3xl: clamp(2.25rem, 6vw, 3rem);
    --font-4xl: clamp(3rem, 7vw, 3.75rem);
}

/* ===== 22. SMOOTH PAGE TRANSITIONS ===== */

.page-transition {
    animation: pageFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* ===== 23. INTERNATIONAL FOCUS RING ===== */

*:focus-visible {
    outline: 2px solid #e67e22;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ===== 24. LOADING SPINNER (International Style) ===== */

.loader-global {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(230, 126, 34, 0.1);
    border-top-color: #e67e22;
    border-radius: 50%;
    animation: spinLoader 0.8s infinite linear;
}

@keyframes spinLoader {
    to { transform: rotate(360deg); }
}

/* ===== 25. RESPONSIVE VIDEO EMBEDS ===== */

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 16px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ===== 26. SKELETON TEXT LOADER ===== */

.skeleton-text {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.05) 25%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: skeletonPulse 1.5s infinite;
}

/* ===== 27. INTERNATIONAL HOVER LINE ===== */

.hover-line {
    position: relative;
    display: inline-block;
}

.hover-line::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #e67e22;
    transition: width 0.3s ease;
}

.hover-line:hover::after {
    width: 100%;
}

/* ===== 28. DARK MODE READY (International Standard) ===== */

@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #0a0a0a;
        --bg-secondary: #1a1a2a;
        --text-primary: #ffffff;
        --text-secondary: rgba(255,255,255,0.8);
    }
}

/* ===== 29. FLOATING ACTION BUTTON (Back to Top) ===== */

.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: #e67e22;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    background: #d35400;
}

/* ===== 30. INTERNATIONAL GRADIENT BACKGROUND ===== */

.gradient-bg-world {
    background: linear-gradient(145deg, 
        #0a0a0a 0%,
        #1a1a2a 30%,
        #2a2a3a 50%,
        #1a1a2a 70%,
        #0a0a0a 100%);
    position: relative;
}

.gradient-bg-world::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(230,126,34,0.05) 0%, transparent 50%);
    pointer-events: none;
}
/* ===== ZIMBA GALLERY - BOLD & MODERN ===== */

.gallery-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #0a0a0a 0%, #0f0f0f 100%);
    position: relative;
    overflow: hidden;
}

/* Animated Background Effect */
.gallery-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.03) 0%, transparent 70%);
    animation: rotateBg 20s linear infinite;
    pointer-events: none;
}

@keyframes rotateBg {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Section Title */
.gallery-section .section-title {
    font-size: 3rem;
    font-weight: 800;
    text-align: center;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    width: 100%;
    letter-spacing: -0.5px;
}

/* Title Underline Effect */
.gallery-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, #e67e22, #f39c12);
    border-radius: 2px;
}

/* Gallery Grid - 3 Columns */
.gallery-section .gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 60px;
}

/* Gallery Items */
.gallery-section .gallery-item {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    aspect-ratio: 4 / 3;
}

/* Image Styling */
.gallery-section .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Effect - Image Zoom */
.gallery-section .gallery-item:hover img {
    transform: scale(1.1);
}

/* Hover Effect - Card Lift */
.gallery-section .gallery-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(230, 126, 34, 0.2);
}

/* Overlay - Hidden by Default */
.gallery-section .gallery-item .overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0.95) 0%,
        rgba(230, 126, 34, 0.7) 40%,
        transparent 100%);
    padding: 30px 20px 20px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Show Overlay on Hover */
.gallery-section .gallery-item:hover .overlay {
    transform: translateY(0);
}

/* Overlay Content */
.gallery-section .gallery-item .overlay h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: #e67e22;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.gallery-section .gallery-item .overlay p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

/* View Details Link */
.gallery-section .gallery-item .overlay .view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.gallery-section .gallery-item:hover .overlay .view-link {
    opacity: 1;
    transform: translateX(0);
}

.gallery-section .gallery-item .overlay .view-link i {
    transition: transform 0.3s ease;
}

.gallery-section .gallery-item .overlay .view-link:hover {
    color: #e67e22;
}

.gallery-section .gallery-item .overlay .view-link:hover i {
    transform: translateX(5px);
}

/* Play Icon for Videos (Optional) */
.gallery-section .gallery-item .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(230, 126, 34, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 2;
}

.gallery-section .gallery-item:hover .play-icon {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.1);
}

.gallery-section .gallery-item .play-icon i {
    color: white;
    font-size: 1.5rem;
    margin-left: 5px;
}

/* Badge for New/Featured */
.gallery-section .gallery-item .badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #e67e22;
    color: white;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet */
@media (max-width: 992px) {
    .gallery-section {
        padding: 70px 0;
    }
    
    .gallery-section .section-title {
        font-size: 2.5rem;
    }
    
    .gallery-section .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .gallery-section {
        padding: 60px 0;
    }
    
    .gallery-section .section-title {
        font-size: 2rem;
    }
    
    .gallery-section .section-title::after {
        width: 60px;
        height: 3px;
    }
    
    .gallery-section .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-section .gallery-item {
        aspect-ratio: 16 / 9;
    }
    
    .gallery-section .gallery-item .overlay {
        transform: translateY(0);
        background: linear-gradient(to top, 
            rgba(0, 0, 0, 0.9) 0%,
            rgba(230, 126, 34, 0.5) 50%,
            transparent 100%);
        padding: 20px 15px 15px;
    }
    
    .gallery-section .gallery-item .overlay h3 {
        font-size: 1.1rem;
    }
    
    .gallery-section .gallery-item .overlay p {
        font-size: 0.75rem;
    }
    
    .gallery-section .gallery-item .overlay .view-link {
        opacity: 1;
        transform: translateX(0);
        font-size: 0.7rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .gallery-section {
        padding: 50px 0;
    }
    
    .gallery-section .section-title {
        font-size: 1.8rem;
    }
    
    .gallery-section .gallery-item {
        aspect-ratio: 4 / 3;
    }
    
    .gallery-section .gallery-item .overlay h3 {
        font-size: 1rem;
    }
}

/* Add animation on scroll */
.gallery-section .gallery-item {
    opacity: 0;
    transform: translateY(30px);
    animation: galleryFadeInUp 0.6s ease forwards;
}

.gallery-section .gallery-item:nth-child(1) { animation-delay: 0.1s; }
.gallery-section .gallery-item:nth-child(2) { animation-delay: 0.2s; }
.gallery-section .gallery-item:nth-child(3) { animation-delay: 0.3s; }
.gallery-section .gallery-item:nth-child(4) { animation-delay: 0.4s; }
.gallery-section .gallery-item:nth-child(5) { animation-delay: 0.5s; }
.gallery-section .gallery-item:nth-child(6) { animation-delay: 0.6s; }

@keyframes galleryFadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Optional: Image Loading Effect */
.gallery-section .gallery-item img {
    filter: blur(5px);
    transition: filter 0.3s ease, transform 0.6s ease;
}

.gallery-section .gallery-item img.loaded {
    filter: blur(0);
}
/* ===== GALLERY SLIDER - NO BUTTONS ===== */

.gallery-slider-wrapper {
    padding: 30px 0 50px;
    position: relative;
}

/* Swiper Container */
.gallerySwiper {
    overflow: hidden;
    padding: 10px;
    margin: 0 -10px;
}

/* Slide Styling */
.gallery-slide {
    border-radius: 20px;
    overflow: hidden;
    height: 400px;
    position: relative;
    cursor: grab;
    transition: all 0.3s ease;
}

.gallery-slide:active {
    cursor: grabbing;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-slide:hover img {
    transform: scale(1.05);
}

/* Slide Caption */
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.gallery-slide:hover .slide-caption {
    transform: translateY(0);
}

.slide-caption h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 5px;
    color: #e67e22;
    font-family: 'Playfair Display', serif;
}

.slide-caption p {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Pagination Dots - Only navigation */
.gallerySwiper .swiper-pagination {
    position: relative;
    margin-top: 30px;
}

.gallerySwiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #e67e22;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.gallerySwiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 25px;
    border-radius: 5px;
    background: #e67e22;
}

/* Remove navigation buttons completely */
.gallerySwiper .swiper-button-next,
.gallerySwiper .swiper-button-prev {
    display: none !important;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 992px) {
    .gallery-slide {
        height: 350px;
    }
    
    .slide-caption h3 {
        font-size: 1.2rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .gallery-slider-wrapper {
        padding: 20px 0 40px;
    }
    
    .gallery-slide {
        height: 280px;
    }
    
    .slide-caption {
        padding: 20px;
    }
    
    .slide-caption h3 {
        font-size: 1rem;
    }
    
    .slide-caption p {
        font-size: 0.75rem;
    }
    
    /* Make swipe more obvious on mobile */
    .gallery-slide {
        cursor: pointer;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .gallery-slide {
        height: 240px;
    }
    
    .gallerySwiper .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
    }
    
    .gallerySwiper .swiper-pagination-bullet-active {
        width: 20px;
    }
}
/* ===== GALLERY SECTION - BLUE & ORANGE SPLIT ===== */

.gallery-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #0a0a0a, #0f0f0f);
}

/* Title styling */
.gallery-section .section-title {
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    position: relative;
}

/* Blue text for "Zimba" */
.gallery-section .section-title .blue-text {
    color: #3498db;  /* Bright blue */
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
}

/* Orange text for "Gallery" */
.gallery-section .section-title .orange-text {
    color: #e67e22;
    text-shadow: 0 0 10px rgba(230, 126, 34, 0.3);
}

/* Optional: Add underline that combines both colors */
.gallery-section .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, #3498db, #e67e22, #3498db);
    border-radius: 2px;
}

/* Slider container */
.gallery-slider-wrapper {
    padding: 30px 0 50px;
}

/* Slide styling */
.gallery-slide {
    border-radius: 16px;
    overflow: hidden;
    height: 350px;
    position: relative;
    cursor: grab;
}

.gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-slide:hover img {
    transform: scale(1.05);
}

/* Caption styling */
.slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 25px;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    color: white;
}

.slide-caption h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 5px;
    color: #e67e22;
}

.slide-caption p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Pagination dots */
.gallerySwiper .swiper-pagination-bullet {
    background: #e67e22;
    opacity: 0.3;
}

.gallerySwiper .swiper-pagination-bullet-active {
    opacity: 1;
    width: 25px;
    border-radius: 5px;
}

/* Hide navigation buttons */
.gallerySwiper .swiper-button-next,
.gallerySwiper .swiper-button-prev {
    display: none !important;
}

/* ===== DIFFERENT BLUE SHADES (Choose one) ===== */

/* Option 1: Royal Blue */
.gallery-section .section-title .blue-text {
    color: #4169E1;
}

/* Option 2: Cyan Blue */
.gallery-section .section-title .blue-text {
    color: #00BFFF;
}

/* Option 3: Dark Blue */
.gallery-section .section-title .blue-text {
    color: #1E3A8A;
}

/* Option 4: Electric Blue */
.gallery-section .section-title .blue-text {
    color: #007bff;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .gallery-section .section-title {
        font-size: 2rem;
    }
    
    .gallery-slide {
        height: 280px;
    }
    
    .slide-caption {
        padding: 18px;
    }
    
    .slide-caption h3 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .gallery-section .section-title {
        font-size: 1.8rem;
    }
    
    .gallery-slide {
        height: 240px;
    }
}
/* Gradient from Blue to Orange */
.gallery-section .section-title {
    background: linear-gradient(135deg, #3498db, #e67e22);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    width: auto;
    margin-left: auto;
    margin-right: auto;
}
/* ===== MUSIC HERO SECTION - PREMIUM STYLING ===== */

.music-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

/* Background Image with Gradient Overlay */
.music-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
        rgba(10, 10, 10, 0.7) 0%,
        rgba(30, 20, 40, 0.8) 50%,
        rgba(10, 10, 10, 0.7) 100%),
        url('images/music/music-hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: 1;
}

/* Dark Overlay for Text Readability */
.music-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, 
        transparent 0%, 
        rgba(0, 0, 0, 0.5) 100%);
    z-index: 2;
}

/* Floating Particles */
.music-bg-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.music-bg-particles .particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(230, 126, 34, 0.5);
    border-radius: 50%;
    animation: musicFloat 15s infinite linear;
}

.music-bg-particles .particle:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; }
.music-bg-particles .particle:nth-child(2) { top: 60%; right: 15%; animation-delay: 3s; }
.music-bg-particles .particle:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 6s; }
.music-bg-particles .particle:nth-child(4) { top: 40%; right: 25%; animation-delay: 9s; }
.music-bg-particles .particle:nth-child(5) { bottom: 50%; left: 30%; animation-delay: 12s; }

@keyframes musicFloat {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100px) translateX(30px);
        opacity: 0;
    }
}

/* Container */
.music-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* Hero Content */
.music-hero-content {
    text-align: center;
    color: white;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo */
.music-logo-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeInDown 1s ease;
}

.music-logo {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: logoPulse 3s infinite ease-in-out;
    filter: brightness(0) invert(1);
}

.music-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 3s infinite ease-in-out;
    z-index: 1;
}

/* Typography */
.music-hero-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    font-family: 'Playfair Display', serif;
    display: block;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.music-hero-subtitle .orange-text {
    color: #e67e22;
}

.music-hero-content h1 {
    font-size: 4rem;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    letter-spacing: 2px;
}

.music-hero-tagline {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.9);
    font-style: italic;
    letter-spacing: 1px;
}

/* Features */
.music-hero-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.music-hero-features span {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    padding: 10px 25px;
    border-radius: 50px;
    font-size: 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.music-hero-features span:hover {
    background: rgba(230, 126, 34, 0.2);
    border-color: rgba(230, 126, 34, 0.5);
    transform: translateY(-2px);
}

.music-hero-features i {
    color: #e67e22;
    font-size: 1rem;
}

/* Buttons */
.music-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-music-primary, .btn-music-secondary {
    display: inline-block;
    padding: 14px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    font-size: 1rem;
    letter-spacing: 1px;
}

.btn-music-primary {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    border: none;
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.3);
}

.btn-music-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(230, 126, 34, 0.5);
}

.btn-music-secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.btn-music-secondary:hover {
    border-color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
    transform: translateY(-3px);
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 10;
    animation: bounce 2s infinite;
}

.scroll-indicator span {
    width: 25px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 25px;
    position: relative;
}

.scroll-indicator span::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: #e67e22;
    border-radius: 2px;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0% { top: 8px; opacity: 1; }
    100% { top: 20px; opacity: 0; }
}

@keyframes bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-10px); }
}

/* Animations */
@keyframes logoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}

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

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .music-logo-container {
        width: 150px;
        height: 150px;
    }
    
    .music-hero-content h1 {
        font-size: 3.2rem;
    }
}

@media (max-width: 768px) {
    .music-logo-container {
        width: 130px;
        height: 130px;
    }
    
    .music-hero-subtitle {
        font-size: 1.2rem;
    }
    
    .music-hero-content h1 {
        font-size: 2.5rem;
    }
    
    .music-hero-tagline {
        font-size: 1rem;
    }
    
    .music-hero-features {
        flex-direction: column;
        gap: 12px;
    }
    
    .music-hero-features span {
        width: 100%;
        justify-content: center;
    }
    
    .music-hero-buttons {
        flex-direction: column;
        gap: 15px;
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
    }
    
    .btn-music-primary, .btn-music-secondary {
        width: 100%;
        text-align: center;
    }
    
    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 480px) {
    .music-logo-container {
        width: 110px;
        height: 110px;
    }
    
    .music-hero-subtitle {
        font-size: 1rem;
    }
    
    .music-hero-content h1 {
        font-size: 2rem;
    }
    
    .music-hero-tagline {
        font-size: 0.9rem;
    }
}
/* ===== ART GALLERY GRID (Matching Music Page) ===== */

.art-gallery {
    padding: 80px 0;
    background: #0f0f0f;
}

/* Gallery Grid - 3 columns on desktop, 2 on tablet, 1 on mobile */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 50px;
}

/* Gallery Item */
.gallery-item {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 280px;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.08);
}

.gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(230, 126, 34, 0.2);
}

/* Overlay - Hidden by default, shows on hover */
.gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    padding: 25px 20px 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    transform: translateY(0);
}

.gallery-overlay h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #e67e22;
    margin-bottom: 5px;
    font-family: 'Playfair Display', serif;
}

.gallery-overlay p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 992px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .gallery-item {
        height: 260px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .art-gallery {
        padding: 60px 0;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .gallery-item {
        height: 250px;
    }
    
    .gallery-overlay {
        transform: translateY(0);
        background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
    }
    
    .gallery-overlay h3 {
        font-size: 1rem;
    }
    
    .gallery-overlay p {
        font-size: 0.8rem;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .gallery-item {
        height: 220px;
    }
}
/* Premium Warm Gradient Background */
.music-hero-bg.premium-gradient {
    background: linear-gradient(145deg, 
        #1a0a2e 0%,
        #2d1b4e 25%,
        #e67e22 50%,
        #d35400 75%,
        #1a0a2e 100%);
    background-size: 200% 200%;
    animation: gradientShift 12s ease infinite;
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Music Notes Pattern */
.music-notes-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='rgba(255,255,255,0.03)' stroke-width='1' d='M30,30 L35,28 L33,35 Z M45,25 L50,22 L48,30 Z M60,35 L65,32 L63,40 Z M75,28 L80,25 L78,33 Z M20,50 L25,48 L23,55 Z M55,55 L60,52 L58,60 Z M70,45 L75,42 L73,50 Z M85,55 L90,52 L88,60 Z'/%3E%3C/svg%3E");
    background-size: 60px 60px;
    background-repeat: repeat;
    opacity: 0.4;
    pointer-events: none;
    z-index: 3;
}
/* ===== ART & CRAFT HERO - PREMIUM CREATIVE BACKGROUND ===== */

.art-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

/* Creative Gradient - Warm & Artistic */
.art-hero-bg.creative-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, 
        #1a0a2e 0%,
        #2d1b4e 20%,
        #8e44ad 45%,
        #e67e22 70%,
        #f39c12 85%,
        #1a0a2e 100%);
    background-size: 300% 300%;
    animation: artisticShift 18s ease infinite;
    z-index: 1;
}

@keyframes artisticShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Warm Orange Alternative Gradient (if you prefer) */
.art-hero-bg.warm-art-gradient {
    background: linear-gradient(135deg, 
        #0d071a 0%,
        #2a1a3a 30%,
        #e67e22 60%,
        #d35400 80%,
        #0d071a 100%);
    background-size: 300% 300%;
    animation: warmShift 15s ease infinite;
}

@keyframes warmShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dark Overlay for Text Readability */
.art-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, 
        rgba(0,0,0,0.15) 0%, 
        rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

/* Floating Art Elements */
.floating-art {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.art-element {
    position: absolute;
    font-size: 3.5rem;
    opacity: 0.12;
    animation: floatArt 22s infinite linear;
    filter: drop-shadow(0 0 5px rgba(230,126,34,0.3));
}

.element1 { top: 12%; left: 8%; animation-delay: 0s; font-size: 3rem; }
.element2 { top: 65%; right: 12%; animation-delay: -3s; font-size: 4rem; }
.element3 { bottom: 25%; left: 15%; animation-delay: -6s; font-size: 2.8rem; }
.element4 { top: 40%; right: 22%; animation-delay: -9s; font-size: 3.2rem; }
.element5 { bottom: 55%; left: 28%; animation-delay: -12s; font-size: 3.5rem; }
.element6 { top: 75%; left: 45%; animation-delay: -15s; font-size: 2.5rem; }

@keyframes floatArt {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.15; }
    90% { opacity: 0.15; }
    100% {
        transform: translateY(-100vh) translateX(60px) rotate(180deg);
        opacity: 0;
    }
}

/* Container */
.art-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* Art Hero Content */
.art-hero-content {
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo Container */
.art-logo-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}

.art-logo:hover {
    transform: scale(1.03);
}

.art-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: radial-gradient(circle, rgba(142, 68, 173, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: artGlowPulse 4s infinite ease-in-out;
}

@keyframes artGlowPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

/* Hero Text Container */
.art-hero-text {
    margin-bottom: 35px;
}

/* Subtitle */
.art-hero-subtitle {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.art-hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 500;
    letter-spacing: 2px;
}

/* Main Title */
.art-hero-title {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.art-hero-title .orange-text {
    color: #e67e22;
    font-weight: 700;
}

/* Tagline */
.art-hero-tagline {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    margin-top: 5px;
    font-style: normal;
}

/* Features - Premium Pills */
.art-hero-features {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.art-hero-features span {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    padding: 10px 24px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.art-hero-features span:hover {
    background: rgba(142, 68, 173, 0.2);
    border-color: rgba(142, 68, 173, 0.4);
    transform: translateY(-2px);
}

.art-hero-features i {
    color: #e67e22;
    font-size: 1rem;
}

/* Buttons */
.art-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-art-primary,
.btn-art-secondary {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}

.btn-art-primary {
    background: linear-gradient(135deg, #e67e22, #d35400);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.btn-art-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.5);
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.btn-art-secondary {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn-art-secondary:hover {
    border-color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
    transform: translateY(-3px);
}

/* Scroll Hint */
.hero-scroll-hint {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 10;
    opacity: 0.7;
    animation: fadeInUp 0.8s ease 1.2s both;
}

.hero-scroll-hint span {
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.hero-scroll-hint span:first-child {
    width: 12px;
    animation: scrollHint 2s infinite;
}

.hero-scroll-hint span:last-child {
    width: 18px;
}

@keyframes scrollHint {
    0% { opacity: 0.3; width: 8px; }
    50% { opacity: 1; width: 24px; }
    100% { opacity: 0.3; width: 8px; }
}

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

/* ===== RESPONSIVE ===== */

/* Desktop Large */
@media (min-width: 1400px) {
    .art-logo-container {
        width: 200px;
        height: 200px;
    }
    
    .art-hero-title {
        font-size: 5.5rem;
    }
    
    .art-hero-tagline {
        font-size: 1.6rem;
    }
}

/* Desktop Medium */
@media (max-width: 1200px) {
    .art-hero-title {
        font-size: 4.2rem;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .art-logo-container {
        width: 140px;
        height: 140px;
    }
    
    .art-hero-title {
        font-size: 3.8rem;
    }
    
    .art-hero-tagline {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }
    
    .art-hero-features {
        gap: 15px;
    }
    
    .art-hero-features span {
        padding: 8px 18px;
        font-size: 0.75rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .art-logo-container {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }
    
    .art-hero-subtitle {
        font-size: 0.85rem;
        letter-spacing: 4px;
    }
    
    .art-hero-title {
        font-size: 2.8rem;
        letter-spacing: 0;
    }
    
    .art-hero-tagline {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }
    
    .art-hero-features {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        margin-bottom: 35px;
    }
    
    .art-hero-features span {
        width: 100%;
        max-width: 260px;
        justify-content: center;
        padding: 10px 20px;
    }
    
    .art-hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn-art-primary,
    .btn-art-secondary {
        width: 100%;
        max-width: 240px;
        text-align: center;
        padding: 12px 20px;
    }
    
    .hero-scroll-hint {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .art-logo-container {
        width: 100px;
        height: 100px;
    }
    
    .art-hero-title {
        font-size: 2.2rem;
    }
    
    .art-hero-tagline {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }
    
    .art-element {
        display: none;
    }
}
/* ===== PUBLIC SPEAKING HERO - PREMIUM CONFIDENT BACKGROUND ===== */

.speak-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

/* Confident Gradient - Bold & Energetic (Red-Orange to Deep Blue) */
.speak-hero-bg.confident-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, 
        #1a0a2e 0%,
        #2d1b4e 15%,
        #c0392b 45%,
        #e67e22 65%,
        #2980b9 85%,
        #1a0a2e 100%);
    background-size: 300% 300%;
    animation: confidentShift 16s ease infinite;
    z-index: 1;
}

@keyframes confidentShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Warm Alternative Gradient (Orange-Red focus) */
.speak-hero-bg.warm-speech-gradient {
    background: linear-gradient(135deg, 
        #0d071a 0%,
        #2a1a3a 20%,
        #e74c3c 50%,
        #e67e22 70%,
        #f39c12 85%,
        #0d071a 100%);
    background-size: 300% 300%;
    animation: warmSpeechShift 14s ease infinite;
}

@keyframes warmSpeechShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Bold Alternative Gradient (Blue-Orange - Trust & Energy) */
.speak-hero-bg.bold-blue-gradient {
    background: linear-gradient(135deg, 
        #0a1628 0%,
        #1a2a4a 25%,
        #e67e22 55%,
        #c0392b 75%,
        #0a1628 100%);
    background-size: 300% 300%;
    animation: boldShift 18s ease infinite;
}

@keyframes boldShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dark Overlay for Text Readability */
.speak-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, 
        rgba(0,0,0,0.15) 0%, 
        rgba(0,0,0,0.7) 100%);
    z-index: 2;
}

/* Floating Speech/Communication Elements */
.floating-speech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.speech-element {
    position: absolute;
    font-size: 3.5rem;
    opacity: 0.12;
    animation: floatSpeech 20s infinite linear;
    filter: drop-shadow(0 0 5px rgba(230,126,34,0.3));
}

.element1 { top: 10%; left: 5%; animation-delay: 0s; font-size: 3rem; }
.element2 { top: 70%; right: 8%; animation-delay: -2.5s; font-size: 4rem; }
.element3 { bottom: 20%; left: 12%; animation-delay: -5s; font-size: 3.2rem; }
.element4 { top: 45%; right: 18%; animation-delay: -7.5s; font-size: 2.8rem; }
.element5 { bottom: 55%; left: 25%; animation-delay: -10s; font-size: 3.5rem; }
.element6 { top: 80%; left: 40%; animation-delay: -12.5s; font-size: 2.5rem; }

@keyframes floatSpeech {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.12; }
    90% { opacity: 0.12; }
    100% {
        transform: translateY(-100vh) translateX(70px) rotate(180deg);
        opacity: 0;
    }
}

/* Container */
.speak-hero .container {
    position: relative;
    z-index: 10;
    width: 100%;
}

/* Speak Hero Content */
.speak-hero-content {
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo Container */
.speak-logo-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.speak-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}

.speak-logo:hover {
    transform: scale(1.03);
}

.speak-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: radial-gradient(circle, rgba(230, 126, 34, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: speakGlowPulse 4s infinite ease-in-out;
}

@keyframes speakGlowPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.1); }
}

/* Hero Text Container */
.speak-hero-text {
    margin-bottom: 35px;
}

/* Subtitle */
.speak-hero-subtitle {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.speak-hero-subtitle .orange-text {
    color: #e67e22;
    font-weight: 500;
    letter-spacing: 2px;
}

/* Main Title */
.speak-hero-title {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.speak-hero-title .orange-text {
    color: #e67e22;
    font-weight: 700;
}

/* Tagline */
.speak-hero-tagline {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    margin-top: 5px;
    font-style: normal;
}

/* Features - Premium Pills */
.speak-hero-features {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.speak-hero-features span {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
    padding: 10px 24px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.speak-hero-features span:hover {
    background: rgba(230, 126, 34, 0.15);
    border-color: rgba(230, 126, 34, 0.4);
    transform: translateY(-2px);
}

.speak-hero-features i {
    color: #e67e22;
    font-size: 1rem;
}

/* Buttons */
.speak-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-speak-primary,
.btn-speak-secondary {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer;
}

.btn-speak-primary {
    background: linear-gradient(135deg, #e67e22, #c0392b);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(230, 126, 34, 0.3);
}

.btn-speak-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(230, 126, 34, 0.5);
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

.btn-speak-secondary {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.4);
}

.btn-speak-secondary:hover {
    border-color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
    color: #e67e22;
    transform: translateY(-3px);
}

/* Scroll Hint */
.hero-scroll-hint {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 10;
    opacity: 0.7;
    animation: fadeInUp 0.8s ease 1.2s both;
}

.hero-scroll-hint span {
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.hero-scroll-hint span:first-child {
    width: 12px;
    animation: scrollHint 2s infinite;
}

.hero-scroll-hint span:last-child {
    width: 18px;
}

@keyframes scrollHint {
    0% { opacity: 0.3; width: 8px; }
    50% { opacity: 1; width: 24px; }
    100% { opacity: 0.3; width: 8px; }
}

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

/* ===== RESPONSIVE ===== */

/* Desktop Large */
@media (min-width: 1400px) {
    .speak-logo-container {
        width: 200px;
        height: 200px;
    }
    
    .speak-hero-title {
        font-size: 5.5rem;
    }
    
    .speak-hero-tagline {
        font-size: 1.6rem;
    }
}

/* Desktop Medium */
@media (max-width: 1200px) {
    .speak-hero-title {
        font-size: 4.2rem;
    }
}

/* Tablet */
@media (max-width: 992px) {
    .speak-logo-container {
        width: 140px;
        height: 140px;
    }
    
    .speak-hero-title {
        font-size: 3.8rem;
    }
    
    .speak-hero-tagline {
        font-size: 1.2rem;
        letter-spacing: 3px;
    }
    
    .speak-hero-features {
        gap: 15px;
    }
    
    .speak-hero-features span {
        padding: 8px 18px;
        font-size: 0.75rem;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .speak-logo-container {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }
    
    .speak-hero-subtitle {
        font-size: 0.85rem;
        letter-spacing: 4px;
    }
    
    .speak-hero-title {
        font-size: 2.8rem;
        letter-spacing: 0;
    }
    
    .speak-hero-tagline {
        font-size: 0.9rem;
        letter-spacing: 2px;
    }
    
    .speak-hero-features {
        flex-direction: column;
        gap: 10px;
        align-items: center;
        margin-bottom: 35px;
    }
    
    .speak-hero-features span {
        width: 100%;
        max-width: 260px;
        justify-content: center;
        padding: 10px 20px;
    }
    
    .speak-hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .btn-speak-primary,
    .btn-speak-secondary {
        width: 100%;
        max-width: 240px;
        text-align: center;
        padding: 12px 20px;
    }
    
    .hero-scroll-hint {
        display: none;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .speak-logo-container {
        width: 100px;
        height: 100px;
    }
    
    .speak-hero-title {
        font-size: 2.2rem;
    }
    
    .speak-hero-tagline {
        font-size: 0.75rem;
        letter-spacing: 1.5px;
    }
    
    .speech-element {
        display: none;
    }
}
.dropdown-menu a::before {
    content: '→';
    position: absolute;
    left: 5px;
    color: #e67e22;
    opacity: 0;
    transition: all 0.3s ease;
}

/* Only show arrow on hover, NOT on active */
.dropdown-menu a:hover::before,
.dropdown-menu a.active::before {
    opacity: 1;
    left: 10px;
}
/* ===== ICT & ROBOTICS HERO - PREMIUM TECH GRADIENT ===== */

.tech-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    margin-top: -80px;
    padding-top: 80px;
    overflow: hidden;
}

/* Tech Gradient - Cyber/Neon Theme */
.tech-hero-bg.tech-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, 
        #0a0a0a 0%,
        #0a1a2a 25%,
        #0066ff 50%,
        #00ccff 70%,
        #0a0a0a 100%);
    background-size: 300% 300%;
    animation: techShift 15s ease infinite;
    z-index: 1;
}

@keyframes techShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Dark Overlay */
.tech-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, 
        rgba(0,0,0,0.2) 0%, 
        rgba(0,0,0,0.8) 100%);
    z-index: 2;
}

/* Floating Tech Elements */
.floating-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.tech-element {
    position: absolute;
    font-size: 3rem;
    font-weight: bold;
    font-family: monospace;
    opacity: 0.1;
    animation: floatTech 20s infinite linear;
}

.element1 { top: 10%; left: 5%; animation-delay: 0s; font-size: 2.5rem; }
.element2 { top: 70%; right: 8%; animation-delay: -3s; font-size: 3rem; }
.element3 { bottom: 20%; left: 12%; animation-delay: -6s; font-size: 3.5rem; }
.element4 { top: 45%; right: 20%; animation-delay: -9s; font-size: 2.8rem; }
.element5 { bottom: 55%; left: 28%; animation-delay: -12s; font-size: 2.2rem; }
.element6 { top: 80%; left: 40%; animation-delay: -15s; font-size: 3rem; }

@keyframes floatTech {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.12; }
    90% { opacity: 0.12; }
    100% {
        transform: translateY(-100vh) translateX(60px) rotate(360deg);
        opacity: 0;
    }
}

/* Tech Hero Content */
.tech-hero .container {
    position: relative;
    z-index: 10;
}

.tech-hero-content {
    text-align: center;
    max-width: 950px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Logo */
.tech-logo-container {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tech-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 2;
}

.tech-logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
    background: radial-gradient(circle, rgba(0, 102, 255, 0.25) 0%, transparent 70%);
    border-radius: 50%;
    z-index: 1;
    animation: techGlowPulse 4s infinite ease-in-out;
}

@keyframes techGlowPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}

/* Typography */
.tech-hero-text {
    margin-bottom: 35px;
}

.tech-hero-subtitle {
    display: block;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 6px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 12px;
    font-family: 'Montserrat', sans-serif;
}

.tech-hero-subtitle .orange-text {
    color: #00ccff;
    font-weight: 500;
    letter-spacing: 2px;
}

.tech-hero-title {
    font-size: 5rem;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
    letter-spacing: -1px;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.tech-hero-title .orange-text {
    color: #00ccff;
    font-weight: 700;
}

.tech-hero-tagline {
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 4px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    margin-top: 5px;
}

/* Features */
.tech-hero-features {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-bottom: 45px;
    flex-wrap: wrap;
}

.tech-hero-features span {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 102, 255, 0.1);
    backdrop-filter: blur(8px);
    padding: 10px 24px;
    border-radius: 40px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 204, 255, 0.3);
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.tech-hero-features span:hover {
    background: rgba(0, 204, 255, 0.2);
    border-color: rgba(0, 204, 255, 0.6);
    transform: translateY(-2px);
}

.tech-hero-features i {
    color: #00ccff;
    font-size: 1rem;
}

/* Buttons */
.tech-hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.btn-tech-primary,
.btn-tech-secondary {
    display: inline-block;
    padding: 14px 38px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    font-family: 'Montserrat', sans-serif;
}

.btn-tech-primary {
    background: linear-gradient(135deg, #0066ff, #00ccff);
    color: white;
    border: none;
    box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
}

.btn-tech-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 102, 255, 0.5);
}

.btn-tech-secondary {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(0, 204, 255, 0.5);
}

.btn-tech-secondary:hover {
    border-color: #00ccff;
    background: rgba(0, 204, 255, 0.1);
    color: #00ccff;
    transform: translateY(-3px);
}

/* Scroll Hint */
.hero-scroll-hint {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    z-index: 10;
    opacity: 0.7;
}

.hero-scroll-hint span {
    display: block;
    width: 24px;
    height: 2px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2px;
}

.hero-scroll-hint span:first-child {
    width: 12px;
    animation: scrollHint 2s infinite;
}

.hero-scroll-hint span:last-child {
    width: 18px;
}

@keyframes scrollHint {
    0% { opacity: 0.3; width: 8px; }
    50% { opacity: 1; width: 24px; }
    100% { opacity: 0.3; width: 8px; }
}

/* Responsive */
@media (max-width: 992px) {
    .tech-logo-container { width: 140px; height: 140px; }
    .tech-hero-title { font-size: 3.8rem; }
    .tech-hero-tagline { font-size: 1.2rem; letter-spacing: 3px; }
}

@media (max-width: 768px) {
    .tech-logo-container { width: 120px; height: 120px; }
    .tech-hero-title { font-size: 2.8rem; }
    .tech-hero-tagline { font-size: 0.9rem; letter-spacing: 2px; }
    .tech-hero-features { flex-direction: column; align-items: center; }
    .tech-hero-features span { width: 100%; max-width: 260px; justify-content: center; }
    .tech-hero-buttons { flex-direction: column; align-items: center; }
    .btn-tech-primary, .btn-tech-secondary { width: 100%; max-width: 240px; text-align: center; }
    .hero-scroll-hint { display: none; }
}

@media (max-width: 480px) {
    .tech-logo-container { width: 100px; height: 100px; }
    .tech-hero-title { font-size: 2.2rem; }
    .tech-element { display: none; }
}