/* CSS Custom Properties */
:root {
    --primary-blue: #007ba7;
    --accent-yellow: #f7cb2d;
    --dark-blue: #055c9d;
    --navy: #14213d;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --text-gray: #6c757d;
    --border-color: #e9ecef;
    --shadow: 0 10px 30px rgba(20, 33, 61, 0.1);
    --shadow-hover: 0 20px 60px rgba(20, 33, 61, 0.2);
    
    /* =================================================================================== */
    /* 🎛️ HERO SECTION COMPLETE CUSTOMIZATION GUIDE - EDIT VALUES BELOW TO ADJUST LAYOUT */
    /* =================================================================================== */
    
    /* 📐 HERO CONTAINER LAYOUT CONTROLS */
    --hero-height: 800px;              /* 📏 TOTAL HEIGHT: Increase (1200px) = taller section | Decrease (800px) = shorter section */
    
    /* 🎯 ⭐ QUICK SPACING CONTROLS - EDIT THESE FOR EASY ADJUSTMENTS ⭐ 🎯 */
    --logo-vertical-position: 10rem;       /* 🔥 LOGO VERTICAL POSITION: Increase (2rem/4rem) = move logo down | Decrease (-2rem/-4rem) = move logo up */
    --title-to-subtitle-gap: 1rem;        /* 🔥 TITLE ↔️ SUBTITLE SPACE: Decrease (1rem/0.5rem) = closer | Increase (2rem/3rem) = further apart */
    --subtitle-to-buttons-gap: 2rem;      /* 🔥 SUBTITLE ↔️ BUTTONS SPACE: Decrease (1rem/0.5rem) = closer | Increase (3rem/4rem) = further apart */
    
    --hero-gap: 4rem;                   /* 📏 VERTICAL SPACING: Increase (6rem) = more space between logo/image | Decrease (2rem) = tighter layout */
    --hero-padding: 0 20px;             /* 📏 SIDE MARGINS: Change to "0 40px" = wider side margins | "0 10px" = narrower margins */
    --hero-max-width: 1200px;           /* 📏 CONTENT WIDTH: Increase (1400px) = wider content | Decrease (1000px) = narrower content */
    --hero-direction: column;           /* 🔄 LAYOUT DIRECTION: "column" = logo above image | "row" = logo beside image */
    --hero-alignment: center;           /* 🎯 ALIGNMENT: "center" = centered | "flex-start" = left/top align | "flex-end" = right/bottom align */
    
    /* 🏷️ ACADEMIA LOGO POSITIONING & SIZE CONTROLS */
    --hero-logo-size: 550px;            /* 📏 LOGO SIZE: Increase (600px) = bigger logo | Decrease (400px) = smaller logo */
    --hero-logo-margin-top: 10rem;       /* ⬆️ LOGO TOP SPACE: Increase (5rem) = push logo down | Decrease (1rem) = move logo up */
    --hero-logo-margin-bottom: var(--logo-vertical-position); /* ⬇️ LOGO BOTTOM SPACE: ⭐ CONTROLLED BY --logo-vertical-position ABOVE ⭐ */
    --hero-logo-shadow-blur: 15px;      /* ✨ LOGO SHADOW BLUR: Increase (25px) = softer shadow | Decrease (10px) = sharper shadow */
    --hero-logo-shadow-spread: 40px;    /* ✨ LOGO SHADOW SIZE: Increase (60px) = bigger shadow | Decrease (20px) = smaller shadow */
    --hero-logo-shadow-opacity: 0.4;    /* ✨ LOGO SHADOW OPACITY: Increase (0.8) = darker shadow | Decrease (0.2) = lighter shadow */
    
    /* 🖼️ TUTORING IMAGE POSITIONING & SIZE CONTROLS */
    --hero-image-width: 500px;          /* 📏 IMAGE WIDTH: Increase (600px) = wider image | Decrease (400px) = narrower image */
    --hero-image-height: 350px;         /* 📏 IMAGE HEIGHT: Increase (400px) = taller image | Decrease (300px) = shorter image */
    --hero-image-margin-top: 0rem;      /* ⬆️ IMAGE TOP SPACE: Increase (2rem) = push image down | Decrease (-1rem) = move image up */
    --hero-image-margin-bottom: 25rem;   /* ⬇️ IMAGE BOTTOM SPACE: Increase (2rem) = more space below image | Decrease (-1rem) = less space */
    --hero-image-margin-left: 0rem;     /* ⬅️ IMAGE LEFT SPACE: Increase (2rem) = push image right | Decrease (-1rem) = move image left */
    --hero-image-margin-right: 0rem;    /* ➡️ IMAGE RIGHT SPACE: Increase (2rem) = push image left | Decrease (-1rem) = move image right */
    --hero-image-border-radius: 30px;   /* 🔲 IMAGE CORNERS: Increase (50px) = more rounded | Decrease (15px) = less rounded | 0px = square */
    --hero-image-glow-blur-1: 15px;     /* ✨ OUTER GLOW BLUR: Increase (25px) = softer outer glow | Decrease (10px) = sharper glow */
    --hero-image-glow-blur-2: 8px;      /* ✨ INNER GLOW BLUR: Increase (15px) = softer inner glow | Decrease (5px) = sharper glow */
    --hero-image-glow-offset: 20px;     /* ✨ OUTER GLOW DISTANCE: Increase (30px) = glow extends further | Decrease (10px) = closer glow */
    --hero-image-glow-offset-inner: 12px; /* ✨ INNER GLOW DISTANCE: Increase (20px) = inner glow extends further | Decrease (8px) = closer */
    --hero-image-glow-opacity-1: 0.8;   /* ✨ OUTER GLOW OPACITY: Increase (1.0) = more visible | Decrease (0.5) = more transparent */
    --hero-image-glow-opacity-2: 0.9;   /* ✨ INNER GLOW OPACITY: Increase (1.0) = more visible | Decrease (0.6) = more transparent */
    
    /* 📝 HERO TEXT POSITIONING & SIZE CONTROLS */
    --hero-title-size: 3.5rem;          /* 📏 MAIN TITLE SIZE: Increase (4rem) = bigger title | Decrease (3rem) = smaller title */
    --hero-title-line-height: 1.2;      /* 📏 TITLE LINE SPACING: Increase (1.4) = more space between lines | Decrease (1.1) = tighter */
    --hero-title-margin: var(--title-to-subtitle-gap); /* ⬇️ TITLE BOTTOM SPACE: ⭐ CONTROLLED BY --title-to-subtitle-gap ABOVE ⭐ */
    --hero-subtitle-size: 1.2rem;       /* 📏 SUBTITLE SIZE: Increase (1.4rem) = bigger subtitle | Decrease (1rem) = smaller subtitle */
    --hero-subtitle-line-height: 1.6;   /* 📏 SUBTITLE LINE SPACING: Increase (1.8) = more line space | Decrease (1.4) = tighter lines */
    --hero-subtitle-margin: var(--subtitle-to-buttons-gap); /* ⬇️ SUBTITLE BOTTOM SPACE: ⭐ CONTROLLED BY --subtitle-to-buttons-gap ABOVE ⭐ */
    --hero-content-gap: 4rem;           /* ↔️ TEXT TO IMAGE GAP: Increase (6rem) = more space between text & image | Decrease (2rem) = closer */
    
    /* 🔘 HERO BUTTONS POSITIONING & SIZE CONTROLS */
    --hero-button-padding: 12px 30px;   /* 📏 BUTTON SIZE: "15px 40px" = bigger buttons | "10px 25px" = smaller buttons */
    --hero-button-gap: 1rem;            /* ↔️ BUTTON SPACING: Increase (1.5rem) = more space between buttons | Decrease (0.5rem) = closer */
    --hero-button-border-radius: 50px;  /* 🔲 BUTTON ROUNDNESS: Increase (60px) = more rounded | Decrease (25px) = less rounded | 0px = square */
    --hero-button-font-size: 1rem;      /* 📏 BUTTON TEXT SIZE: Increase (1.2rem) = bigger text | Decrease (0.9rem) = smaller text */
    
    /* ⭕ FLOATING CIRCLES POSITIONING & SIZE CONTROLS */
    --shape-1-size: 100px;              /* 📏 YELLOW CIRCLE SIZE: Increase (150px) = bigger circle | Decrease (80px) = smaller circle */
    --shape-1-top: 10%;                 /* ⬆️ YELLOW CIRCLE TOP POSITION: Increase (20%) = lower on screen | Decrease (5%) = higher up */
    --shape-1-left: 5%;                 /* ⬅️ YELLOW CIRCLE LEFT POSITION: Increase (15%) = move right | Decrease (2%) = move left */
    --shape-2-size: 150px;              /* 📏 BLUE CIRCLE SIZE: Increase (200px) = bigger circle | Decrease (120px) = smaller circle */
    --shape-2-top: 70%;                 /* ⬆️ BLUE CIRCLE TOP POSITION: Increase (80%) = lower on screen | Decrease (60%) = higher up */
    --shape-2-right: 5%;                /* ➡️ BLUE CIRCLE RIGHT POSITION: Increase (15%) = move left | Decrease (2%) = move right */
    --shape-3-size: 80px;               /* 📏 DARK CIRCLE SIZE: Increase (120px) = bigger circle | Decrease (60px) = smaller circle */
    --shape-3-bottom: 10%;              /* ⬇️ DARK CIRCLE BOTTOM POSITION: Increase (20%) = higher up | Decrease (5%) = lower down */
    --shape-3-left: 15%;                /* ⬅️ DARK CIRCLE LEFT POSITION: Increase (25%) = move right | Decrease (10%) = move left */
    --floating-animation-distance: 20px; /* 🎭 FLOAT DISTANCE: Increase (30px) = circles float higher | Decrease (10px) = subtle movement */
    --floating-animation-duration: 6s;   /* ⏱️ FLOAT SPEED: Decrease (4s) = faster floating | Increase (8s) = slower floating */
    
    /* 🖼️ IMAGE SECTION CUSTOMIZATION VARIABLES */
    --image-section-padding: 80px 0;    /* 📏 SECTION PADDING: Increase (100px 0) = more vertical space | Decrease (60px 0) = less space */
    --image-section-gap: 4rem;          /* ↔️ IMAGE TO TEXT GAP: Increase (6rem) = more space | Decrease (2rem) = closer together */
    --section-image-width: 500px;       /* 📏 IMAGE WIDTH: Increase (600px) = wider image | Decrease (400px) = narrower image */
    --section-image-height: 350px;      /* 📏 IMAGE HEIGHT: Increase (400px) = taller image | Decrease (300px) = shorter image */
    --tagline-title-size: 2.5rem;       /* 📏 TAGLINE TITLE SIZE: Increase (3rem) = bigger title | Decrease (2rem) = smaller title */
    --tagline-text-size: 1.2rem;        /* 📏 TAGLINE TEXT SIZE: Increase (1.4rem) = bigger text | Decrease (1rem) = smaller text */
    
    /* 📱 MOBILE DEVICE RESPONSIVE CONTROLS */
    --logo-vertical-position-mobile: 0rem; /* 🔥 MOBILE LOGO VERTICAL POSITION: Increase (1rem/2rem) = move down | Decrease (-1rem/-2rem) = move up */
    --title-to-subtitle-gap-mobile: 1rem; /* 🔥 MOBILE TITLE ↔️ SUBTITLE SPACE: Decrease (0.5rem) = closer | Increase (1.5rem) = further apart */
    --subtitle-to-buttons-gap-mobile: 1.5rem; /* 🔥 MOBILE SUBTITLE ↔️ BUTTONS SPACE: Decrease (1rem) = closer | Increase (2rem) = further apart */
    --hero-height-mobile: 500px;        /* 📏 MOBILE HEIGHT: Increase (600px) = taller on mobile | Decrease (400px) = shorter on mobile */
    --hero-gap-mobile: 2rem;            /* 📏 MOBILE SPACING: Increase (3rem) = more space on mobile | Decrease (1rem) = tighter on mobile */
    --hero-logo-size-mobile: 150px;     /* 📏 MOBILE LOGO SIZE: Increase (200px) = bigger logo on mobile | Decrease (120px) = smaller */
    --hero-logo-margin-top-mobile: 2rem; /* ⬆️ MOBILE LOGO TOP SPACE: Increase (3rem) = push down | Decrease (1rem) = move up */
    --hero-logo-margin-bottom-mobile: var(--logo-to-image-gap-mobile); /* ⬇️ MOBILE LOGO BOTTOM SPACE: ⭐ CONTROLLED BY --logo-to-image-gap-mobile ABOVE ⭐ */
    --hero-image-width-mobile: 350px;   /* 📏 MOBILE IMAGE WIDTH: Increase (400px) = wider on mobile | Decrease (300px) = narrower */
    --hero-image-height-mobile: 250px;  /* 📏 MOBILE IMAGE HEIGHT: Increase (300px) = taller on mobile | Decrease (200px) = shorter */
    --hero-image-margin-top-mobile: 0rem; /* ⬆️ MOBILE IMAGE TOP SPACE: Increase (2rem) = push down | Decrease (-1rem) = move up */
    --hero-image-margin-bottom-mobile: 0rem; /* ⬇️ MOBILE IMAGE BOTTOM SPACE: Increase (2rem) = more space | Decrease (-1rem) = less space */
    --hero-title-size-mobile: 2.5rem;   /* 📏 MOBILE TITLE SIZE: Increase (3rem) = bigger title | Decrease (2rem) = smaller title */
    --hero-subtitle-size-mobile: 1rem;  /* 📏 MOBILE SUBTITLE SIZE: Increase (1.2rem) = bigger subtitle | Decrease (0.9rem) = smaller */
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--navy);
    overflow-x: hidden;
}

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

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    z-index: 1000;
    height: 80px;
    padding: 0;
    transition: all 0.3s ease;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.navbar-logo {
    height: 120px;
    width: auto;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1001;
}

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

.logo {
    display: none; /* Legacy logo class */
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--navy);
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-yellow));
    transition: width 0.3s ease;
}

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

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--navy);
    margin: 3px 0;
    transition: 0.3s;
    border-radius: 2px;
}

/* Hero Section */
.hero {
    min-height: var(--hero-height);
    display: flex;
    align-items: var(--hero-alignment);
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(247, 203, 45, 0.05), rgba(0, 123, 167, 0.05));
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: var(--shape-1-size);
    height: var(--shape-1-size);
    background: linear-gradient(135deg, var(--accent-yellow), var(--primary-blue));
    top: var(--shape-1-top);
    left: var(--shape-1-left);
    animation-delay: 0s;
}

.shape-2 {
    width: var(--shape-2-size);
    height: var(--shape-2-size);
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    top: var(--shape-2-top);
    right: var(--shape-2-right);
    animation-delay: 2s;
}

.shape-3 {
    width: var(--shape-3-size);
    height: var(--shape-3-size);
    background: linear-gradient(135deg, var(--dark-blue), var(--navy));
    bottom: var(--shape-3-bottom);
    left: var(--shape-3-left);
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(calc(-1 * var(--floating-animation-distance))) rotate(180deg); }
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    animation: float var(--floating-animation-duration) ease-in-out infinite;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--hero-content-gap);
    align-items: var(--hero-alignment);
    max-width: var(--hero-max-width);
    margin: 0 auto;
    padding: var(--hero-padding);
}

.hero-title {
    font-size: var(--hero-title-size);
    font-weight: 700;
    line-height: var(--hero-title-line-height);
    margin-bottom: var(--hero-title-margin);
    color: var(--navy);
}

.gradient-text {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-size: var(--hero-subtitle-size);
    color: var(--text-gray);
    margin-bottom: var(--hero-subtitle-margin);
    line-height: var(--hero-subtitle-line-height);
}

.hero-buttons {
    display: flex;
    gap: var(--hero-button-gap);
}

.btn {
    padding: var(--hero-button-padding);
    border: none;
    border-radius: var(--hero-button-border-radius);
    font-size: var(--hero-button-font-size);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    color: white;
    box-shadow: var(--shadow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: transparent;
    color: var(--primary-blue);
    border: 2px solid var(--primary-blue);
}

.btn-secondary:hover {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
}

.hero-visual {
    position: relative;
    height: var(--hero-height);
    display: flex;
    flex-direction: var(--hero-direction);
    align-items: var(--hero-alignment);
    justify-content: center;
    gap: var(--hero-gap);
}

.hero-logo-container {
    z-index: 3;
    margin-top: var(--hero-logo-margin-top);
    margin-bottom: var(--hero-logo-margin-bottom);
}

.hero-logo {
    height: var(--hero-logo-size);
    width: auto;
    filter: drop-shadow(0 var(--hero-logo-shadow-blur) var(--hero-logo-shadow-spread) rgba(0, 123, 167, var(--hero-logo-shadow-opacity)));
    transition: all 0.3s ease;
}

.hero-image {
    position: relative;
    z-index: 2;
    margin-top: var(--hero-image-margin-top);
    margin-bottom: var(--hero-image-margin-bottom);
    margin-left: var(--hero-image-margin-left);
    margin-right: var(--hero-image-margin-right);
}

.tutoring-image {
    width: var(--hero-image-width);
    height: var(--hero-image-height);
    object-fit: cover;
    border-radius: var(--hero-image-border-radius);
    position: relative;
    z-index: 1;
}

.hero-image {
    position: relative;
    z-index: 2;
}

.hero-image::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--hero-image-glow-offset));
    left: calc(-1 * var(--hero-image-glow-offset));
    right: calc(-1 * var(--hero-image-glow-offset));
    bottom: calc(-1 * var(--hero-image-glow-offset));
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow), var(--dark-blue));
    border-radius: calc(var(--hero-image-border-radius) + var(--hero-image-glow-offset));
    z-index: -1;
    filter: blur(var(--hero-image-glow-blur-1));
    opacity: var(--hero-image-glow-opacity-1);
}

.hero-image::after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--hero-image-glow-offset-inner));
    left: calc(-1 * var(--hero-image-glow-offset-inner));
    right: calc(-1 * var(--hero-image-glow-offset-inner));
    bottom: calc(-1 * var(--hero-image-glow-offset-inner));
    background: linear-gradient(135deg, var(--accent-yellow), var(--dark-blue), var(--primary-blue));
    border-radius: calc(var(--hero-image-border-radius) + var(--hero-image-glow-offset-inner));
    z-index: -1;
    filter: blur(var(--hero-image-glow-blur-2));
    opacity: var(--hero-image-glow-opacity-2);
}

/* Hero cards removed - no longer needed */

/* Section Styles */
.section-header {
    text-align: center;
    margin-bottom: 4rem;
}

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

.section-subtitle {
    font-size: 1.1rem;
    color: var(--text-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Image Section */
.image-section {
    padding: var(--image-section-padding);
    background: linear-gradient(135deg, rgba(0, 123, 167, 0.02), rgba(247, 203, 45, 0.02));
}

.image-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--image-section-gap);
    align-items: center;
}

.image-container {
    position: relative;
}

.section-image {
    width: 100%;
    max-width: var(--section-image-width);
    height: var(--section-image-height);
    object-fit: cover;
    border-radius: 25px;
    position: relative;
    z-index: 1;
}

.section-image::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow), var(--dark-blue));
    border-radius: 40px;
    z-index: -1;
    filter: blur(12px);
    opacity: 0.6;
}

.tagline-container {
    padding: 2rem;
}

.tagline-title {
    font-size: var(--tagline-title-size);
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tagline-text {
    font-size: var(--tagline-text-size);
    color: var(--text-gray);
    line-height: 1.7;
    margin-bottom: 0;
}

/* Services Section */
.services {
    padding: 100px 0;
    background: var(--light-gray);
}

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

.service-card {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 3rem 2.5rem;
    border-radius: 20px;
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--shadow);
    border: 1px solid #e9ecef;
}

/* Removed - using box-shadow for outer glow instead */

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 
        0 20px 40px rgba(20, 33, 61, 0.15),
        0 0 30px rgba(0, 123, 167, 0.4),
        0 0 60px rgba(247, 203, 45, 0.3),
        0 0 90px rgba(5, 92, 157, 0.2);
}

/* Using box-shadow for outer glow instead of ::before */

/* Removed service gradient element */

.service-icon {
    width: 100px;
    height: 100px;
    margin: 0 auto 2rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: white;
}

.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--navy);
}

.service-card p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Testimonial Section */
.testimonial {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--navy), var(--dark-blue));
    color: white;
}

.testimonial-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 3rem;
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 800px;
    text-align: center;
    position: relative;
    box-shadow: 0 0 50px rgba(247, 203, 45, 0.2);
    animation: testimonialGlow 3s ease-in-out infinite;
}

@keyframes testimonialGlow {
    0%, 100% { box-shadow: 0 0 50px rgba(247, 203, 45, 0.2); }
    50% { box-shadow: 0 0 80px rgba(0, 123, 167, 0.3); }
}

.quote-icon {
    font-size: 3rem;
    background: linear-gradient(135deg, var(--accent-yellow), var(--primary-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
}

.testimonial-card blockquote {
    font-size: 1.3rem;
    line-height: 1.7;
    font-style: italic;
    margin-bottom: 2rem;
    position: relative;
}

.testimonial-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 1.5rem;
}

.author-info h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--accent-yellow);
}

.author-info p {
    opacity: 0.8;
    margin: 0;
}

.rating {
    display: flex;
    gap: 0.3rem;
}

.rating i {
    color: var(--accent-yellow);
    font-size: 1.2rem;
}

/* About Section */
.about {
    padding: 100px 0;
}

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

.about-text h2 {
    margin-bottom: 1.5rem;
}

.about-text p {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 2rem;
    line-height: 1.7;
}

.features-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.feature-content h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--navy);
}

.feature-content p {
    color: var(--text-gray);
    margin: 0;
}

.floating-card {
    background: white;
    padding: 2rem;
    border-radius: 20px;
    box-shadow: var(--shadow-hover);
    animation: cardFloat 3s ease-in-out infinite;
    position: relative;
}

.floating-card::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow), var(--dark-blue));
    border-radius: 28px;
    z-index: -1;
    opacity: 0.7;
    filter: blur(12px);
    animation: cardOuterGlow 3s ease-in-out infinite;
}

@keyframes cardOuterGlow {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

.card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.card-header i {
    color: var(--accent-yellow);
    font-size: 1.2rem;
}

.card-header span {
    font-weight: 600;
    color: var(--navy);
}

.progress-bar {
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.progress-fill {
    height: 100%;
    width: 85%;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-yellow));
    border-radius: 4px;
    animation: progressFill 2s ease-in-out;
}

@keyframes progressFill {
    from { width: 0%; }
    to { width: 85%; }
}

.card-stats {
    display: flex;
    justify-content: space-between;
}

.stat {
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
}

.stat-desc {
    font-size: 0.9rem;
    color: var(--text-gray);
}

/* Contact Section */
.contact {
    padding: 100px 0;
    background: var(--light-gray);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.contact-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.contact-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.contact-details h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--navy);
}

.contact-details p {
    color: var(--text-gray);
    line-height: 1.6;
}

/* Contact Form */
.contact-form-container {
    background: white;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: var(--shadow);
    position: relative;
}

.contact-form-container::before {
    content: '';
    position: absolute;
    top: -6px;
    left: -6px;
    right: -6px;
    bottom: -6px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow), var(--dark-blue));
    border-radius: 26px;
    z-index: -1;
    opacity: 0.5;
    filter: blur(8px);
    animation: formOuterGlow 4s ease-in-out infinite;
}

@keyframes formOuterGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.01); }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    position: relative;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    transition: all 0.3s ease;
    outline: none;
}

.form-group textarea {
    min-height: 120px;
    resize: vertical;
}

.form-group label {
    position: absolute;
    top: 15px;
    left: 15px;
    color: var(--text-gray);
    transition: all 0.3s ease;
    pointer-events: none;
    background: white;
    padding: 0 5px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(0, 123, 167, 0.1);
}

.form-group input:focus + label,
.form-group select:focus + label,
.form-group textarea:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group select:not([value=""]) + label,
.form-group textarea:not(:placeholder-shown) + label {
    top: -8px;
    font-size: 0.85rem;
    color: var(--primary-blue);
    font-weight: 500;
}

.form-gradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-yellow));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s ease;
    border-radius: 1px;
}

.form-group input:focus ~ .form-gradient,
.form-group select:focus ~ .form-gradient,
.form-group textarea:focus ~ .form-gradient {
    transform: scaleX(1);
}

.btn-submit {
    background: linear-gradient(135deg, var(--primary-blue), var(--dark-blue));
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Footer */
.footer {
    background: var(--navy);
    color: white;
    padding: 60px 0 20px;
}

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

.footer-section h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--accent-yellow);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 0.5rem;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-section ul li a:hover {
    color: var(--accent-yellow);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 1rem;
}

.footer-section p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
}

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

.social-link {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-yellow));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(247, 203, 45, 0.3);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        left: -100%;
        top: 70px;
        flex-direction: column;
        background-color: white;
        width: 100%;
        text-align: center;
        transition: 0.3s;
        box-shadow: var(--shadow);
        padding: 2rem 0;
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: var(--hero-gap-mobile);
    }

    .hero-title {
        font-size: var(--hero-title-size-mobile);
        margin-bottom: var(--title-to-subtitle-gap-mobile);
    }

    .hero-subtitle {
        font-size: var(--hero-subtitle-size-mobile);
        margin-bottom: var(--subtitle-to-buttons-gap-mobile);
    }

    .hero-buttons {
        justify-content: center;
        flex-wrap: wrap;
    }

    .about-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .image-content {
        grid-template-columns: 1fr;
        gap: 2rem;
        text-align: center;
    }

    .section-image {
        max-width: 350px;
        height: 250px;
    }

    .tagline-title {
        font-size: 2rem;
    }

    .tagline-text {
        font-size: 1rem;
    }

    .hero-visual {
        height: var(--hero-height-mobile);
        gap: var(--hero-gap-mobile);
    }

    .hero-logo {
        height: var(--hero-logo-size-mobile);
    }
    
    .hero-logo-container {
        margin-top: var(--hero-logo-margin-top-mobile);
        margin-bottom: var(--hero-logo-margin-bottom-mobile);
    }

    .tutoring-image {
        width: var(--hero-image-width-mobile);
        height: var(--hero-image-height-mobile);
    }
    
    .hero-image {
        margin-top: var(--hero-image-margin-top-mobile);
        margin-bottom: var(--hero-image-margin-bottom-mobile);
    }

    .service-card {
        padding: 2rem 1.5rem;
    }

    .service-icon {
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .floating-shape {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .section-title {
        font-size: 2rem;
    }

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

/* Smooth scrolling animations */
@media (prefers-reduced-motion: no-preference) {
    .service-card,
    .feature-item,
    .contact-item,
    .stat-item {
        opacity: 0;
        transform: translateY(30px);
        animation: fadeInUp 0.6s ease forwards;
    }

    .service-card:nth-child(1) { animation-delay: 0.1s; }
    .service-card:nth-child(2) { animation-delay: 0.2s; }
    .service-card:nth-child(3) { animation-delay: 0.3s; }
    .service-card:nth-child(4) { animation-delay: 0.4s; }
}

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