/* Modern Design System & Variables */
:root {
    --primary: #0f3d2e;
    /* Dark Green matched from image */
    --primary-dark: #08261e;
    --accent: #d4af37;
    /* Gold matched from image */
    --accent-hover: #b5952f;
    --surface: #FFFFFF;
    --surface-alt: #F8F9FA;
    --text-main: #1A1A1A;
    --text-muted: #666666;
    --text-inverted: #FFFFFF;
    --border: #E5E7EB;

    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-colored: 0 10px 25px -5px rgba(15, 61, 46, 0.15);

    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1.5rem;
    --radius-full: 9999px;

    --container-width: 1280px;
    --header-height: 80px;
    --top-bar-height: 40px;
}

/* Reset & Base */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--surface);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    padding-top: var(--top-bar-height);
    /* Make space for top bar */
}

/* Top Bar */
.top-bar {
    background-color: var(--primary);
    color: var(--text-inverted);
    height: var(--top-bar-height);
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
}

.top-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.contact-info {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.contact-item i {
    color: var(--accent);
}

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

.social-icons a {
    color: var(--text-inverted);
    transition: color 0.2s;
}

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

/* Header Adjustments */
/* Header Adjustments */
.header {
    top: var(--top-bar-height);
    /* Push down by top bar height */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--primary);
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

.header img {
    max-height: 40px;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: auto;
}

/* Utilities */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-full);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-family: var(--font-heading);
}

.btn-primary {
    background-color: var(--accent);
    color: var(--primary-dark);
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(242, 169, 0, 0.4);
}

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

.btn-secondary:hover {
    background-color: var(--primary);
    color: var(--text-inverted);
}

.section-padding {
    padding: 6rem 0;
}

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

.mb-1 {
    margin-bottom: 1rem;
}

.mb-2 {
    margin-bottom: 2rem;
}

.mb-4 {
    margin-bottom: 4rem;
}

/* Header */
.header {
    height: var(--header-height);
    background: #FFFFFF;
    position: fixed;
    top: var(--top-bar-height);
    /* Ensure top position is explicit */
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
}

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

/* Logo Styles */
.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 2px;
    text-decoration: none;
}

.logo-icon {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 800;
    color: #2E7D32;
    /* Green X */
    line-height: 1;
    font-style: italic;
}

.logo-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-name {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 800;
    color: #000;
    letter-spacing: 2px;
    line-height: 1;
}

.tagline {
    font-size: 0.5rem;
    color: #66b539;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
    list-style: none;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: #4a4a4a;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding-bottom: 2px;
}

.nav-link i {
    font-size: 0.8rem;
    margin-top: 2px;
}

.nav-link.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

.nav-link:hover {
    color: var(--accent);
}

.btn-primary {
    background-color: var(--accent);
    color: #FFFFFF;
    font-weight: 500;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    /* Fully rounded pill shape */
    box-shadow: none;
    /* Flat style as per image */
}

.btn-primary:hover {
    background-color: var(--accent-hover);
    transform: none;
    box-shadow: none;
}

/* Hero Section */
.hero {
    margin-top: var(--header-height);
    padding: 2rem 0 6rem;
    position: relative;
    overflow: hidden;
    background: #fff;
}

.hero .container {
    padding: 0 1rem;
}

.hero-card {
    background: radial-gradient(circle at center, #1C6A54 0%, #0C4132 100%);
    border-radius: 2rem;
    padding: 6rem 4rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #ffffff;
}

/* Typography override for Hero */
.hero-heading {
    font-family: 'Outfit', sans-serif;
    /* Using Outfit as main, serif if requested specifically but image looks like clean serif or slab. Let's stick to serif for "Hornsby" part if needed, or just standard heading font. The image actually looks like a Serif font for the whole heading. */
    font-family: "Merriweather", serif;
    /* Let's assume a serif font is desired as per image style */
    font-size: 3.5rem;
    line-height: 1.3;
    margin-bottom: 2rem;
    font-weight: 400;
    color: #ffffff;
    /* FIXED: Explicitly white to override global h1 color */
    position: relative;
    /* Ensure it sits above shapes */
    z-index: 10;
}

.hero-heading strong {
    font-weight: 700;
}

.hero-subtext {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.8;
    opacity: 0.9;
    font-family: var(--font-body);
}

.hero-btn {
    background-color: var(--accent);
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.2s;
}

.hero-btn:hover {
    transform: translateY(-2px);
    background-color: var(--accent-hover);
}

/* Geometric Decorations */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

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

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

.shape {
    position: absolute;
    opacity: 0.6;
    animation: float 6s ease-in-out infinite;
}

.shape-triangle-outline {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 22h20L12 2z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2L2 22h20L12 2z' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
}

.s1 {
    top: 20%;
    left: 10%;
    color: #6a5acd;
    transform: rotate(-15deg);
    animation-delay: 0s;
}

/* Purple/Blue */
.s2 {
    top: 70%;
    left: 15%;
    color: #ffffff;
    opacity: 0.3;
    transform: rotate(15deg);
    animation-delay: 1s;
}

.s3 {
    top: 30%;
    right: 10%;
    color: #90ee90;
    opacity: 0.5;
    transform: rotate(-45deg);
    animation-delay: 2s;
}

.s4 {
    bottom: 20%;
    right: 20%;
    color: #ffffff;
    opacity: 0.2;
    transform: rotate(10deg);
    animation-delay: 3s;
}

.s5 {
    bottom: 5%;
    /* Moved down from 15% to 5% to avoid overlapping button */
    left: 50%;
    color: #FFD700;
    transform: rotate(180deg);
    animation-delay: 4s;
}

/* Gold */

/* Responsive Hero */
@media (max-width: 768px) {
    .hero-card {
        padding: 4rem 1.5rem;
        border-radius: 1.5rem;
    }

    .hero-heading {
        font-size: 2.2rem;
    }

    .hero-subtext {
        font-size: 1rem;
    }
}

/* Responsive Hero Button - Small Mobile */
@media (max-width: 438px) {
    .hero-btn {
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
        width: 100%;
        max-width: 280px;
        text-align: center;
        display: inline-block;
    }

    .hero-heading {
        font-size: 1.8rem;
    }

    .hero-card {
        padding: 2.5rem 1rem;
    }
}


/* Services Section */
.services-section {
    background-color: #fff;
    /* padding-top removed to use standard section-padding (6rem) from HTML class */
}

.section-title {
    font-family: "Merriweather", serif;
    font-size: 2.5rem;
    color: #1A1A1A;
    margin-bottom: 1rem;
    font-weight: 500;
}

.section-title strong {
    font-weight: 800;
}

/* ... existing services styles ... */

/* Environment Section */
.env-section {
    background-color: #fff;
}

.env-nav-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 3rem;
    margin-top: 2rem;
}

.env-pills,
.res-pills {
    display: flex;
    gap: 0.5rem;
    background: #FFF9E6;
    /* Light gold/cream background */
    padding: 0.5rem;
    border-radius: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.env-pill {
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    color: #1c6a54;
    /* Dark green text */
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.env-pill:hover {
    background-color: rgba(212, 175, 55, 0.1);
}

.env-pill.active {
    background-color: var(--accent);
    /* Gold */
    color: #fff;
}

.env-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: start;
}

.env-image-col {
    position: relative;
}

.env-feature-title {
    font-family: "Merriweather", serif;
    /* Assuming serif based on previous sections, though image looks sans-serif bold. Let's stick to sans-serif for content headers if requested, but image title "Grasslands" looks bold sans-serif? Actually looks like bold sans-serif. */
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1A1A1A;
}

.env-text {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

.mt-2 {
    margin-top: 1rem;
}

/* Testimonial */
.env-testimonial {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

.testimonial-name {
    font-weight: 700;
    color: #1A1A1A;
    font-size: 1.1rem;
    line-height: 1.2;
}

.testimonial-role {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 500;
}

/* Responsive Env */
@media (max-width: 1024px) {
    .env-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .env-image-col .img-placeholder {
        min-height: 350px !important;
    }
}

.section-subtitle {
    color: #666;
    font-size: 1rem;
    max-width: 600px;
    margin: 0 auto;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
}

.service-card {
    border: 2px dashed #e0e0e0;
    border-radius: 20px;
    padding: 3rem 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    background: #fff;
}

.service-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background: #FFFCF5;
    /* Subtle tint on hover */
}

.service-card .icon-wrapper {
    width: 80px;
    height: 80px;
    background-color: #E8F5E9;
    /* Light green bg */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
    color: var(--primary);
    font-size: 2rem;
}

.service-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1A1A1A;
    line-height: 1.4;
}

.service-card p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* Feature Cards (Existing) - Keep for reference or remove if replaced */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

/* Introduction Section */
.intro-section {
    background-color: #fff;
    /* padding-bottom removed to use standard section-padding (6rem) from HTML class */
}

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

.intro-heading {
    font-family: "Merriweather", serif;
    font-size: 2.8rem;
    color: #1A1A1A;
    margin-bottom: 2rem;
    line-height: 1.2;
    font-weight: 700;
}

.intro-content p {
    color: #4a4a4a;
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Collage Styling */
.intro-collage {
    position: relative;
    height: 550px;
    width: 100%;
}

.collage-image-1 {
    position: absolute;
    top: 0;
    right: 0;
    width: 70%;
    height: 55%;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
}

.collage-image-2 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60%;
    height: 60%;
    z-index: 2;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Stamp Animation */
.stamp-wrapper {
    position: absolute;
    top: 30%;
    left: 18%;
    transform: translate(-50%, -50%);
    z-index: 5;
    /* background: #fff; */
    border-radius: 50%;
    padding: 10px;
    /* Animation removed from here to trigger on scroll */
    /* Bounce effect */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* Start invisible for animation */
    /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */
}

/* Trigger animation when parent section is revealed */
.reveal.active .stamp-wrapper {
    animation: punch 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes punch {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2);
    }

    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.stamp-wrapper svg {
    animation: rotate 15s linear infinite;
    animation-delay: 1s;
    /* Wait for punch to finish */
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Arrow Decoration */
.arrow-decoration {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 3;
    pointer-events: none;
}

/* Responsive Intro */
@media (max-width: 1024px) {
    .intro-heading {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .intro-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .intro-collage {
        height: 400px;
        order: -1;
        /* Image first on mobile? Or text first? Standard is often image first, but let's keep it as is or check preference using order. */
    }

    .collage-image-1 {
        width: 75%;
    }

    .collage-image-2 {
        width: 70%;
    }

    .arrow-decoration {
        display: none;
        /* Hide decorative arrow on mobile to save space */
    }
}

.feature-card {
    background: var(--surface);
    padding: 2.5rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: all 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-colored);
    border-color: var(--accent);
}

.feature-icon {
    width: 60px;
    height: 60px;
    background: #E8F4F4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Evaluation Types Section */
.eval-section {
    background-color: var(--primary);
    color: var(--text-inverted);
}

.eval-section h2 {
    color: var(--text-inverted);
}

.eval-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 2rem;
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer */
.footer {
    background-color: var(--primary-dark);
    color: var(--text-inverted);
    padding: 4rem 0 2rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 4rem;
    margin-bottom: 4rem;
}

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

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--primary);
}

.mobile-btn {
    display: none;
}

.desktop-btn {
    display: inline-flex;
}

/* Responsive */
@media (max-width: 1024px) {
    .container {
        width: 95%;
    }

    .hamburger {
        display: block;
        z-index: 1002;
    }

    .nav-menu {
        position: fixed;
        top: calc(var(--header-height) + var(--top-bar-height));
        left: -100%;
        width: 100%;
        background-color: #ffffff;
        display: flex;
        /* FIXED: Now explicitly flex */
        flex-direction: column;
        align-items: center;
        padding: 2rem 0;
        transition: 0.3s ease-in-out;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
        z-index: 999;
    }

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

    .nav-links {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .nav-link {
        font-size: 1.2rem;
    }

    .desktop-btn {
        display: none;
    }

    .mobile-btn {
        display: inline-flex;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .top-bar {
        display: none;
        /* Often hidden on very small screens, or styled differently */
    }

    body {
        padding-top: var(--header-height);
    }

    /* Reset padding since top bar is gone */

    .header {
        top: 0;
    }

    .nav-menu {
        top: var(--header-height);
    }

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

    .hero-content p {
        margin: 0 auto 2.5rem;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

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

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

    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* Performers Section & Carousel */
.performers-section {
    background-color: #fafafa;
}

.carousel-wrapper {
    position: relative;
    padding: 0 1rem;
}

/* Track behaves as a flex container with scroll snap */
.performers-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 2rem;
    /* Space for shadow/hover transform */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
}

.performers-track::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Card Styling */
.performer-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;

    /* Fixed sizing for carousel */
    flex: 0 0 calc(25% - 1.5rem);
    /* 4 items minus gap adjustment */
    scroll-snap-align: start;
    min-width: 250px;
    /* Minimum width safety */
}

.performer-card:hover {
    transform: translateY(-5px);
}

.performer-img-wrapper {
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
}

.performer-placeholder {
    width: 100%;
    height: 100%;
    background-color: #ccc;
}

.performer-name {
    color: var(--accent);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    font-family: 'Outfit', sans-serif;
}

.performer-score {
    color: #1A1A1A;
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 1rem;
    font-family: 'Outfit', sans-serif;
}

.performer-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.performer-stats li {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

/* Navigation Buttons */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #eee;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 10;
    color: var(--primary);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-btn:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.carousel-btn.prev {
    left: -20px;
}

.carousel-btn.next {
    right: -20px;
}

/* Responsive Breakpoints for Carousel Items */
@media (max-width: 1200px) {
    .performer-card {
        flex: 0 0 calc(33.333% - 1.33rem);
        /* 3 items */
    }
}

@media (max-width: 900px) {
    .performer-card {
        flex: 0 0 calc(50% - 1rem);
        /* 2 items */
    }
}

@media (max-width: 600px) {
    .performer-card {
        flex: 0 0 100%;
        /* 1 item */
    }

    .carousel-btn {
        display: none;
        /* Hide buttons on mobile, swipe is better */
    }
}

/* Consultation CTA Section */
.cta-banner {
    background-color: #F2B72E;
    /* Fallback color */
    background-image: url('./images/Group\ 1171275052.png');
    /* Placeholder path */
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
    padding: 5rem 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    margin-top: 2rem;
}

.cta-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-title {
    font-size: 2.5rem;
    font-family: 'Merriweather', serif;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.cta-title .serif-text {
    font-family: 'Merriweather', serif;
    font-weight: 700;
}

.cta-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
    color: #fff;
    font-weight: 500;
}

.cta-btn {
    background-color: var(--primary);
    color: #fff;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border-radius: 50px;
}

.cta-btn:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media (max-width: 768px) {
    .cta-banner {
        padding: 3rem 1.5rem;
        border-radius: 20px;
    }

    .cta-title {
        font-size: 1.8rem;
    }
}

/* Xseed Difference Section */
.diff-section {
    position: relative;
    /* No padding here, handled by wrapper/card */
}

.diff-wrapper {
    display: flex;
    min-height: 700px;
    position: relative;
}

.diff-bg-left {
    width: 35%;
    background-color: #F2B72E;
    position: relative;
    /* Optional geometric pattern overlay could go here */
}

.diff-bg-right {
    width: 65%;
    background-color: #eee;
    /* Fallback */
    background-size: cover;
    background-position: center;
}

.diff-content-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.diff-card {
    pointer-events: auto;
    background: #ffffff;
    width: 55%;
    /* Covers part of left and part of right */
    max-width: 650px;
    padding: 3rem;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    margin-left: 0;
    position: absolute;
    bottom: -10%;
    /* Let flexbox in container handle it, or add small margin if needed */
}

.diff-title {
    font-size: 2.5rem;
    font-family: 'Merriweather', serif;
    color: #1A1A1A;
    margin-bottom: 1.5rem;
}

.diff-intro {
    font-size: 1.05rem;
    color: #333;
    margin-bottom: 2rem;
    font-weight: 600;
    line-height: 1.6;
}

.diff-list {
    list-style: none;
    padding: 0;
}

.diff-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 1rem;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

.diff-list li::before {
    content: "•";
    color: var(--text-main);
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .diff-wrapper {
        flex-direction: column;
        min-height: auto;
    }

    .diff-bg-left {
        width: 100%;
        height: 200px;
    }

    .diff-bg-right {
        width: 100%;
        height: 300px;
        order: -1;
    }

    .diff-content-overlay {
        position: relative;
        padding: 0;
        height: auto;
    }

    .diff-content-overlay .container {
        display: block !important;
        height: auto !important;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .diff-card {
        width: 100%;
        max-width: 100%;
        margin: -100px 0 0;
        /* Overlap upwards */
        padding: 2rem;
        position: relative;
        /* Reset position */
        bottom: auto;
        /* Reset bottom */
    }
}

/* Testimonials Section */
.testimonials-section {
    background-color: #fff;
    overflow: hidden;
    /* For blob overflow */
}

.testimonial-img-wrapper {
    position: relative;
    padding: 0;
    /* Removed padding for better alignment */
}

.testimonial-blob-shape {
    position: relative;
    width: 100%;
    /* Adjust as needed */
    height: auto;
    /* Let image define height */
    /* Removed border-radius and overflow for pre-cut image */
}

.testimonial-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* changed to contain to respect aspect ratio */
}

.testimonial-content {
    padding-left: 2rem;
}

@media (max-width: 768px) {
    .testimonial-content {
        padding-left: 0;
    }
}

/* Author Profile */
.testimonial-text {
    font-size: 1rem;
    color: #555;
    line-height: 1.7;
    font-style: italic;
    border-left: 3px solid var(--accent);
    padding-left: 1.5rem;
}

.author-profile {
    display: flex;
    align-items: center;
    position: relative;
}

.author-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 1rem;
    background-color: #ddd;
}

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

.author-name {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--text-main);
    font-family: 'Outfit', sans-serif;
}

.author-role {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 500;
}

.author-arrow {
    position: absolute;
    bottom: -10px;
    left: 180px;
    /* Adjust based on name length */
    opacity: 0.6;
    transform: rotate(-10deg);
}

@media (max-width: 992px) {
    .testimonial-blob-shape {
        height: 350px;
        margin-bottom: 2rem;
    }

    .author-arrow {
        display: none;
        /* Hide on mobile to avoid overlap */
    }
}

/* Testimonial Carousel Styles */
.testimonial-slider-container {
    position: relative;
    width: 100%;
    min-height: 250px;
    /* Prevent jumpiness */
}

.testimonial-track {
    position: relative;
}

.testimonial-slide {
    display: none;
    animation: fadeEffect 0.8s;
}

.testimonial-slide.active {
    display: block;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.testimonial-dots {
    margin-top: 2rem;
    display: flex;
    gap: 8px;
    align-items: center;
}

.dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    background-color: #ddd;
    border-radius: 50%;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.dot.active,
.dot:hover {
    background-color: var(--accent);
    transform: scale(1.2);
}

.testimonial-section {
    background: #fff;
    padding: 6rem 0;
    margin-top: 5rem;
    /* Standardized to match other sections */
}

.testimonial-container {
    max-width: 1200px;
    margin: auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

.testimonial-image {
    flex: 0 0 45%;
    /* Increase image width (was auto/smaller) */
}

.testimonial-image img {
    width: 100%;
    border-radius: 28px;
    display: block;
    /* Remove bottom space */
}

.testimonial-content {
    flex: 1;
    /* Take remaining space */
}

.testimonial-content h2 {
    font-size: 42px;
    line-height: 1.3;
    margin-bottom: 20px;
    color: #1e293b;
}

.testimonial-content h2 span {
    color: #f4b400;
}

.testimonial-content .intro {
    font-size: 16px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 18px;
}

.testimonial-content .description {
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
    margin-bottom: 30px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-author img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author h4 {
    margin: 0;
    font-size: 16px;
    color: #1e293b;
}

.testimonial-author span {
    font-size: 14px;
    /* color: #f4b400; */
}

/* Responsive */
@media (max-width: 991px) {
    .testimonial-container {
        flex-direction: column;
        text-align: center;
    }

    .testimonial-author {
        justify-content: center;
    }
}

.grade-improvement {
    background: linear-gradient(135deg, #0f3d32, #0b5a47);
    padding: 90px 20px;
    color: #e6f2ee;
}

.grade-container {
    max-width: 1250px;
    margin: auto;
    display: flex;
    align-items: stretch;
    /* KEY */
    gap: 70px;
    position: relative;
}

/* Text */
.grade-content {
    max-width: 650px;
}

.grade-content h2 {
    font-size: 38px;
    line-height: 1.3;
    margin-bottom: 26px;
    color: #ffffff;
}

.grade-content h2 span {
    font-weight: 700;
}

.grade-content p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 18px;
    color: #d8ebe5;
}

/* Image */
.grade-image {
    display: flex;
    align-items: flex-end;
    position: absolute;
    top: 15px;
    left: 50%;
    /* Center relative to container or adjust as needed, user had 30rem */
    left: auto;
    right: 0;
    /* Align to right */
    /* Bottom aligned */
}

/* User previously had left: 30rem, but right align is usually safer/cleaner */
.grade-image {
    top: auto;
    bottom: 0;
    left: auto;
    right: 50px;
}

/* Revert grade-image changes since user only asked for fonts, I will stick to fonts */


.grade-content h2 span {
    font-weight: 700;
}

.grade-content p {
    font-size: 16px;
    line-height: 1.9;
    margin-bottom: 18px;
    color: #d8ebe5;
}

/* Image */
.grade-image {
    display: flex;
    align-items: flex-end;
    position: absolute;
    bottom: -5.5rem;
    left: 30rem;
    /* Bottom aligned */
}

.grade-image img {
    height: 100%;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .grade-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .grade-image img {
        height: auto;
        width: 100%;
        max-width: 360px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .grade-improvement {
        padding: 60px 16px;
    }

    .grade-content h2 {
        font-size: 30px;
    }

    .grade-content p {
        font-size: 16px;
        line-height: 1.7;
    }

    .grade-image img {
        max-width: 260px;
    }
}

.why-xseed {
    background: #ffffff;
    padding: 90px 20px;
}

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

/* Header */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
}

.section-header h2 {
    font-size: 38px;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.3;
}

.section-header p {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
}

/* Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

/* Card */
.feature-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 32px 24px;
    text-align: center;
    border: 2px solid #facc15;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Icon */
.feature-card .icon {
    font-size: 42px;
    margin-bottom: 16px;
}

/* Text */
.feature-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #1e293b;
}

.feature-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #555;
}

/* Footer */
.section-footer {
    margin-top: 60px;
    text-align: center;
}

.section-footer p {
    font-size: 16px;
    color: #555;
    ;
    font-weight: 500;
}

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

    .section-header h2 {
        font-size: 36px;
    }
}

/* -------- Mobile -------- */
@media (max-width: 600px) {
    .why-xseed {
        padding: 60px 16px;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .section-header h2 {
        font-size: 28px;
    }

    .feature-card {
        padding: 26px 20px;
    }
}

.tutoring-process {
    background: #ffffff;
    padding: 80px 20px;
}

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

/* Title */
.section-title {
    text-align: center;
    font-size: 38px;
    color: #1e293b;
    margin-bottom: 70px;
    line-height: 1.3;
}

/* Steps Layout */
.steps-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    align-items: stretch;
    /* EQUAL HEIGHT */
}

/* Connector Line */
.steps-line {
    position: absolute;
    top: 22px;
    left: 0;
    right: 0;
    height: 2px;
    background: repeating-linear-gradient(to right,
            #d1d5db,
            #d1d5db 6px,
            transparent 6px,
            transparent 12px);
    z-index: 0;
}

/* Step Item */
.step-item {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Step Number */
.step-number {
    width: 44px;
    height: 44px;
    background: #facc15;
    color: #ffffff;
    border-radius: 50%;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    flex-shrink: 0;
    /* Prevent squashing */
    position: relative;
    /* Ensure z-index works */
    z-index: 2;
    /* Sit above the line */
    box-shadow: 0 0 0 4px #fff;
    /* White border to cut the line cleanly */
}

/* Card */
.step-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 22px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);

    display: flex;
    flex-direction: column;
    height: 100%;
    /* CRITICAL */
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card Hover */
.step-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Icon */
.step-icon {
    font-size: 36px;
    margin-bottom: 14px;
}

/* Text */
.step-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #1e293b;
}

.step-card p {
    font-size: 16px;
    line-height: 1.7;
    color: #64748b;
    margin-top: auto;
    /* ALIGN CONTENT */
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .steps-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .steps-line {
        display: none;
    }

    .section-title {
        font-size: 32px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .tutoring-process {
        padding: 60px 16px;
    }

    .steps-wrapper {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .section-title {
        font-size: 26px;
        margin-bottom: 40px;
    }

    .step-number {
        margin-bottom: 14px;
    }
}

.cta-consultation {
    position: relative;
    padding: 100px 20px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #ffffff;
}

/* Green Overlay */
.cta-overlay {
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg,
            rgba(6, 78, 59, 0.92),
            rgba(2, 44, 34, 0.95)); */
    z-index: 1;
}

/* Content */
.cta-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin: auto;
    text-align: center;
}

/* .cta-content h2 {
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
} */

.cta-content h2 span {
    font-weight: 800;
}

.cta-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #d1fae5;
    margin-bottom: 40px;
}

/* Button */
.cta-btn {
    display: inline-block;
    background: #fbbf24;
    color: #1f2933;
    padding: 14px 42px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

/* ---------- Tablet ---------- */
@media (max-width: 1024px) {
    .cta-content h2 {
        font-size: 36px;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .cta-consultation {
        padding: 70px 16px;
    }

    .cta-content h2 {
        font-size: 28px;
    }

    .cta-content p {
        font-size: 16px;
    }
}

.pricing-section {
    background: #fff;
    padding: 100px 20px;
    color: #fff;
}

.pricing-header {
    max-width: 800px;
    margin: 0 auto 70px;
    text-align: center;
}

.pricing-header h2 {
    font-size: 42px;
    margin-bottom: 20px;
}

.pricing-header p {
    color: #2A2A2A;
    line-height: 1.7;
    font-size: 16px;
}

/* Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    max-width: 1300px;
    margin: auto;
}

/* Card */
.pricing-card {
    background: #fff;
    color: #111;
    border-radius: 18px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    border: 2px solid #fbbf24;
    min-height: 100%;
}

/* Slightly taller middle cards */
.pricing-card.featured {
    transform: translateY(-20px);
}

.card-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 3px solid #064e3b;
    margin-bottom: 20px;
}

.pricing-card h3 {
    font-size: 22px;
    margin-bottom: 20px;
}

.pricing-card hr {
    border: none;
    border-top: 1px solid #d1d5db;
    margin-bottom: 24px;
}

.pricing-card h4 {
    font-size: 16px;
    margin-bottom: 16px;
}

/* List */
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.pricing-card li {
    font-size: 14px;
    padding-left: 24px;
    margin-bottom: 14px;
    position: relative;
    color: #374151;
}

.pricing-card li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #064e3b;
    font-weight: bold;
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-card.featured {
        transform: none;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .pricing-header h2 {
        font-size: 30px;
    }
}

.faq-section {
    position: relative;
    padding: 120px 20px;
    background:
        linear-gradient(180deg, rgba(6, 78, 59, .9), rgba(6, 78, 59, .95)),
        var(--faq-bg-image);
    background-size: cover;
    background-position: center;
    color: #fff;
}

.faq-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, #0f766e, #064e3b);
    opacity: 0.6;
    z-index: 0;
}

.faq-container {
    position: relative;
    max-width: 1100px;
    margin: auto;
    z-index: 1;
    text-align: center;
}

.faq-container h2 {
    font-size: 42px;
    margin-bottom: 18px;
}

.faq-container span {
    font-weight: 700;
}

.faq-subtitle {
    color: #d1fae5;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 60px;
}

/* Grid */
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px 28px;
}

/* Item */
.faq-item {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 40px;
    overflow: hidden;
    transition: background 0.3s ease;
}

/* Question */
.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    padding: 20px 26px;
    color: #fff;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-question .icon {
    width: 28px;
    height: 28px;
    background: #065f46;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.3s ease;
}

/* Answer */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer p {
    padding: 0 26px 22px;
    font-size: 14px;
    color: #ecfdf5;
    line-height: 1.7;
}

/* Active */
.faq-item.active .faq-answer {
    max-height: 200px;
}

.faq-item.active .icon {
    transform: rotate(45deg);
}

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

    .faq-container h2 {
        font-size: 32px;
    }
}

/* Scroll Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* Contact Section */
.contact-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

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

.contact-info-col .section-title {
    text-align: left;
    margin-bottom: 1.5rem;
}

.contact-intro {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

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

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

.contact-detail-item i {
    width: 50px;
    height: 50px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.contact-detail-item h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1A1A1A;
    margin-bottom: 0.25rem;
}

.contact-detail-item p {
    color: #555;
    font-size: 0.95rem;
    margin: 0;
}

/* Contact Form */
.contact-form-col {
    background: #fff;
    padding: 2.5rem;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 600;
    color: #1A1A1A;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background: #fafafa;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.15);
    background: #fff;
}

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

.contact-submit {
    width: 100%;
    padding: 1rem;
    font-size: 1.1rem;
}

/* Custom CAPTCHA Styling */
.custom-captcha-wrapper {
    margin-bottom: 1.5rem;
}

.captcha-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
}

.captcha-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: #064e3b;
    flex-grow: 1;
}

.captcha-refresh {
    width: 40px;
    height: 40px;
    border: none;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.captcha-refresh:hover {
    background: #059669;
    transform: rotate(180deg);
}

.captcha-refresh i {
    font-size: 1rem;
}

.captcha-refresh {
    padding: 0;
    line-height: normal;
}

@media (max-width: 400px) {
    .captcha-container {
        padding: 0.75rem;
    }

    .captcha-question {
        font-size: 1rem;
    }
}

/* Form Messages */
.form-message {
    padding: 1rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    font-weight: 500;
    animation: fadeIn 0.3s ease;
}

.form-message-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.form-message-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

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

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

/* Responsive Contact */
@media (max-width: 992px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-info-col .section-title {
        text-align: center;
    }

    .contact-intro {
        text-align: center;
    }

    .contact-details {
        align-items: center;
    }

    .contact-detail-item {
        max-width: 320px;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .contact-detail-item {
        max-width: 100%;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
    }

    .contact-detail-item i {
        width: 45px;
        height: 45px;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

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

/* Default Avatar Icon for Performers */
.performer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, #1c6a54 100%);
}

.performer-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.8);
}

/* YouTube Video Section */
.video-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
    position: relative;
}

.video-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    background: #000;
    margin-bottom: 2rem;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

.video-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.video-description p {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.8;
}

.section-subtitle {
    color: #666;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* Responsive Video Section */
@media (max-width: 768px) {
    .video-wrapper {
        max-width: 100%;
    }

    .video-container {
        border-radius: 12px;
    }

    .video-description p {
        font-size: 1rem;
    }

    .section-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .video-container {
        border-radius: 8px;
        margin-bottom: 1.5rem;
    }

    .video-description p {
        font-size: 0.95rem;
    }
}