/* =================================
   CLIENT CUSTOMIZATION SECTION
   ================================= */
   :root {
    /* Primary Brand Colors - Edit These First */
    --primary-color: #73538f;         /* Main brand color */
    --primary-light: #8c6ca8;         /* Lighter shade */
    --primary-dark: #5a3c76;          /* Darker shade */

    /* Secondary Brand Colors - Edit These Second */
    --btn-primary: #5E9B9B;           /* Primary button color */
    --btn-secondary: #F4B942; 
    --btn-tertiary: #b10303;        /* Secondary button color */
    --btn-hover: #4a8a8a;             /* Button hover state */

    /* Text Colors */
    --text-primary: #333333;          /* Main text color */
    --text-secondary: #666666;        /* Secondary text */
    --text-light: #ffffff;            /* Light text color */

    /* Background Colors */
    --bg-primary: #fdfdfe;            /* Main background */
    --bg-secondary: #f8f6ff;          /* Secondary background */
    --bg-gradient-start: var(--primary-color);
    --bg-gradient-end: var(--primary-dark);

    /* Common Properties */
    --default-transition: all 0.3s ease;
    --fast-transition: all 0.2s ease;
    --slow-transition: all 0.5s ease;
    --border-radius-sm: 10px;
    --border-radius-md: 20px;
    --border-radius-lg: 30px;
    --border-radius-pill: 50px;
}

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

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    margin: 0;
    padding: 0;
    color: var(--text-primary);
    line-height: 1.5;
}

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

/* Layout Containers */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* Common Section Styles */
.section {
    position: relative;
    padding: 4rem 0;
}

.white-section {
    background: var(--bg-primary);
    height: 100px;
    position: relative;
    z-index: 10;
}

/* Utility Classes */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Responsive Base Styles */
@media (max-width: 576px) {
    .container {
        padding: 0 1rem;
    }
    
    .white-section {
        height: 80px;
    }
}

/* Animation Keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0); }
    50% { transform: translateY(-20px) rotate(10deg); }
}

@keyframes floatIcon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* =================================
   TOPBAR STYLES
   ================================= */
   .top-bar {
    background: var(--primary-dark);
    color: var(--text-light);
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    transform: translateY(0);
    transition: transform 0.3s ease;
    height: 40px; /* Reduced from 50px for better proportion */
    display: flex;
    align-items: center;
}

.top-bar.hidden {
    transform: translateY(-100%);
}

.top-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    height: 100%;
}

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

.top-bar-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.813rem; /* 13px for better readability */
    color: rgba(255, 255, 255, 0.9);
}

.top-bar-item i {
    font-size: 0.875rem; /* 14px icons */
    color: var(--btn-primary);
}

.top-bar-social {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar-social a {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    transition: var(--default-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    text-decoration: none;
}

.top-bar-social a:hover {
    color: var(--btn-primary);
    transform: translateY(-2px);
}

/* Animation for info items */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-bar-item {
    animation: slideIn 0.5s ease forwards;
}

.top-bar-item:nth-child(1) { animation-delay: 0.1s; }
.top-bar-item:nth-child(2) { animation-delay: 0.2s; }
.top-bar-item:nth-child(3) { animation-delay: 0.3s; }

/* Responsive styles */
@media (max-width: 991px) {
    .top-bar-info {
        gap: 1rem;
    }
}

@media (max-width: 992px) {
    .top-bar {
        display: none;
    }
}

/* =================================
   NAVIGATION STYLES
   ================================= */
   .navbar {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: .8rem 0;
    background: white;
    transition: var(--default-transition);
}

.navbar-scrolled {
    padding: 1rem 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-brand img {
    max-height: 45px;
}

/* Navigation Links */
.nav-link {
    color: var(--text-primary) !important;
    font-weight: 500;
    padding: 0.5rem 1.25rem !important;
    font-size: 0.95rem;
    border-radius: var(--border-radius-pill);
    margin: 0 0.25rem;
    transition: var(--default-transition);
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.nav-link.active {
    background: var(--primary-color);
    color: var(--text-light) !important;
    border-color: var(--primary-color);
}

.nav-link.active:hover {
    opacity: 0.9;
}

/* Navigation Link Hover Effect */
.nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--border-radius-pill);
    background: radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, transparent 70%);
    opacity: 0;
    transition: var(--default-transition);
}

.nav-link:hover::before {
    opacity: 1;
}

/* Mobile Navigation & Offcanvas */
.offcanvas-trigger {
    border: none;
    background: var(--primary-color);
    padding: 10px;
    cursor: pointer;
    display: none;  /* Hide by default, show in media query */
}

.offcanvas-trigger span {
    display: block;
    width: 25px;
    height: 2px;
    background-color: var(--text-light);
    transition: var(--default-transition);
}

/* Active state styles for mobile menu button */
body.offcanvas-active {
    overflow: hidden;
}

/* Offcanvas Menu */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    z-index: 2000;
    visibility: hidden;
    transition: var(--slow-transition);
}

.offcanvas-menu.active {
    right: 0;
    visibility: visible;
}

.offcanvas-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity var(--default-transition);
    backdrop-filter: blur(5px);
}

.offcanvas-menu.active .offcanvas-overlay {
    opacity: 1;
}

.offcanvas-content {
    position: absolute;
    top: 0;
    right: -100%;
    width: 300px;
    max-width: 90%;
    height: 100%;
    background: var(--text-light);
    padding: 2rem;
    transition: right var(--slow-transition);
    display: flex;
    flex-direction: column;
}

.offcanvas-menu.active .offcanvas-content {
    right: 0;
}

/* Offcanvas Header */
.offcanvas-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.offcanvas-close {
    border: none;
    background: transparent;
    padding: 10px;
    cursor: pointer;
    position: relative;
    width: 40px;
    height: 40px;
}

.offcanvas-close span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 2px;
    background-color: var(--primary-color);
    transition: var(--default-transition);
}

.offcanvas-close span:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
}

.offcanvas-close span:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Offcanvas Body */
.offcanvas-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem 0;
}

.nav-content {
    flex-grow: 0;
    margin-bottom: 2rem;
}

.offcanvas-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
}

.offcanvas-nav-item {
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateX(20px);
    transition: var(--default-transition);
}

.offcanvas-menu.active .offcanvas-nav-item {
    opacity: 1;
    transform: translateX(0);
}

/* Staggered animation for nav items */
.offcanvas-nav-item:nth-child(1) { transition-delay: 0.1s; }
.offcanvas-nav-item:nth-child(2) { transition-delay: 0.2s; }
.offcanvas-nav-item:nth-child(3) { transition-delay: 0.3s; }
.offcanvas-nav-item:nth-child(4) { transition-delay: 0.4s; }
.offcanvas-nav-item:nth-child(5) { transition-delay: 0.5s; }

.offcanvas-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    font-size: 1.1rem;
    border-radius: var(--border-radius-sm);
    transition: var(--default-transition);
}

.offcanvas-nav-link:hover {
    background: rgba(115, 83, 143, 0.1);
}

.offcanvas-nav-link.active {
    background: var(--primary-color);
    color: var(--text-light);
}

.offcanvas-nav-link.active .nav-icon {
    opacity: 1;
    transform: translateX(0);
    color: var(--text-light);
}

.nav-icon {
    opacity: 0;
    transform: translateX(-10px);
    transition: var(--default-transition);
}

.offcanvas-nav-link:hover .nav-icon {
    opacity: 1;
    transform: translateX(0);
}

/* Offcanvas Footer */
.offcanvas-footer {
    margin-top: auto;
    padding-top: 2rem;
    border-top: 1px solid rgba(115, 83, 143, 0.1);
}

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

/* Responsive Styles for Offcanvas */
@media (max-width: 991px) {
    .offcanvas-trigger {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .navbar {
        position: fixed;
        top: 0 !important;
        padding: 1rem 0;
    }
    .navbar .nav-link,
    .navbar .btn-primary {
        display: none;
    }
}

/* Make sure the body doesn't scroll when menu is open */
body.offcanvas-active {
    overflow: hidden;
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: 50%;
    color: var(--text-light);
    font-size: 1rem;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: var(--default-transition);
}

.social-link:hover {
    background: var(--primary-color);
    color: var(--text-light);
    transform: translateY(-3px);
}
/* =================================
   BUTTON STYLES
   ================================= */
/* Common button base styles that all buttons will share */
.btn-primary,
.btn-secondary,
.btn-tertiary {
    display: inline-block;
    padding: 0.75rem 1.75rem;
    border-radius: var(--border-radius-pill);
    font-weight: 300;
    text-decoration: none;
    text-align: center;
    border: none;
    transition: var(--default-transition);
    cursor: pointer;
}

/* Primary Button - Teal */
.btn-primary {
    background-color: var(--btn-primary);
    color: var(--text-primary); /* Dark text for contrast with teal */
}

.btn-primary:hover {
    background-color: var(--btn-hover);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(94, 155, 155, 0.3);
}

/* Secondary Button - Yellow */
.btn-secondary {
    background-color: var(--btn-secondary);
    color: var(--text-primary); /* Dark text for contrast with yellow */
}

.btn-secondary:hover {
    background-color: #e0a93d; /* Slightly darker yellow */
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(244, 185, 66, 0.3);
}

/* Tertiary Button - Red */
.btn-tertiary {
    background-color: var(--btn-tertiary);
    color: var(--text-light); /* White text works with dark red */
}

.btn-tertiary:hover {
    background-color: #960303; /* Slightly darker red */
    color: var(--text-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(177, 3, 3, 0.3);
}

/* Size Variations */
.btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Full Width Variation */
.btn-block {
    display: block;
    width: 100%;
}

/* Disabled State */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-tertiary:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =================================
   HERO SECTION STYLES
   ================================= */
.hero-section {
    background-color: var(--primary-color);
    color: var(--text-light);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    padding: 2rem 1rem;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: -2px;
}

.hero-content {
    max-width: 600px;
    margin-bottom: 2rem;
}

.hero-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.hero-content p {
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.hero-image {
    max-width: 100%;
    margin: 0 auto;
}

/* Cloud Decorations */
.cloud-border {
    position: absolute;
    bottom: -150px;
    left: 0;
    width: 102%;
    z-index: 2;
    display: block;
    transition: transform 0.1s ease-out, opacity 0.3s ease-out;
}

.bottom-cloud-border {
    position: absolute;
    bottom: -250px;
    left: -5px;
    width: 102%;
    z-index: 3;
    display: block;
    transition: transform 0.1s ease-out, opacity 0.3s ease-out;
}

/* Responsive Styles */
@media (min-width: 1024px) {
    .hero-section {
        flex-direction: row;
        text-align: left;
        padding: 4rem 2rem;
        margin-bottom: -120px;
    }

    .hero-content {
        margin-right: 2rem;
        text-align: left;
    }

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

    .hero-content p {
        font-size: 1.2rem;
    }

    .hero-image {
        max-width: 100%;
        margin: 0;
    }
}

@media (max-width: 1024px) {
    .cloud-border {
        bottom: -69px;
    }
    .bottom-cloud-border {
      display: none;
    }
}

@media (max-width: 991px) {
    .offcanvas-trigger {
        display: flex;
    }
    
    .navbar .nav-link,
    .navbar .contact-btn {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-content {
        padding: 1rem;
    }

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

    .hero-content p {
        font-size: 0.9rem;
        /* max-width: 90%; */
    }

    .hero-image {
        width: 90%;
    }
}

@media (max-width: 500px) {
.cloud-border {
    bottom: -50px;
}
}
/* =================================
   TOUR SECTION STYLES
   ================================= */
   .tour-section {
    background-color: var(--primary-color);
    position: relative;
    padding: 16rem 0 1rem;
    margin-top: -2px;
}

.tour-section::before {
    content: '';
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    margin-top: -4px;
    bottom: 0;
    background: var(--text-light);
    z-index: 1;
}

.section-divider-top {
    position: absolute;
    top: 59px;
    left: 0;
    width: 100%;
    transform: rotate(180deg);
    z-index: 1;
    transition: opacity var(--default-transition);
    opacity: 0;
}

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

/* Tour Features */
.tour-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.feature-item {
    background: var(--text-light);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: var(--default-transition);
}

.feature-item:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.feature-item h3 {
    color: var(--primary-color);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

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

/* Tour Form */
.tour-form-container {
    background: var(--text-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
}

.tour-form-container::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    bottom: -10px;
    left: -10px;
    background: var(--primary-color);
    border-radius: 25px;
    z-index: -1;
    opacity: 0.1;
}

.form-label {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.form-control, 
.form-select {
    border: 2px solid #e1e1e1;
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.95rem;
    transition: var(--default-transition);
}

.form-control:focus, 
.form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(115, 83, 143, 0.15);
}

/* =================================
   SERVICES SECTION STYLES
   ================================= */
.services-section {
    padding: 15rem 0 18rem;
    background: linear-gradient(180deg, var(--text-light) 0%, var(--bg-secondary) 100%);
    position: relative;
    overflow: hidden;
    margin-top: -2px;
}

.service-clouds-top,
.service-clouds-bottom {
    position: absolute;
    width: 102%;
    z-index: 1;
}

.service-clouds-top {
    top: -1px;
    transform: rotate(180deg);
}

.service-clouds-bottom {
    bottom: -1px;
}

/* Floating Elements */
.floating-elements span {
    position: absolute;
    animation: float 6s ease-in-out infinite;
    opacity: 0.5;
    font-size: 2rem;
}

.floating-star { top: 20%; left: 10%; animation-delay: 0s; }
.floating-heart { top: 40%; right: 15%; animation-delay: 2s; }
.floating-sun { top: 70%; left: 15%; animation-delay: 4s; }

/* Section Header */
.section-header {
    position: relative;
    margin-bottom: 5rem;
}

.floating-icon {
    position: relative;
    height: 80px;
    margin-bottom: 1rem;
}

.floating-icon img {
    width: 60px;
    animation: floatIcon 4s ease-in-out infinite;
}

.section-subtitle {
    color: var(--btn-primary);
    font-weight: 700;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
    /* text-align: center; */
}

.section-title {
    color: var(--primary-color);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Services Grid */
.services-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 2;
}

.service-card {
    position: relative;
    transition: var(--default-transition);
}

.card-shape {
    background: var(--text-light);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
    transition: var(--default-transition);
}

.card-shape::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 48%, rgba(255,255,255,0.1) 50%, transparent 52%);
    z-index: 1;
    transition: var(--default-transition);
}

.service-card:hover .card-shape {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.service-card:hover .card-shape::before {
    transform: scale(1.2);
}

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

/* Service Icons */
.service-icon {
    width: 80px;
    height: 80px;
    border-radius: var(--border-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.service-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.1;
}

/* Service Icon Colors */
.service-icon.infant { color: #FF6B6B; }
.service-icon.preschool { color: #4ECDC4; }
.service-icon.prek { color: #FFD93D; }
.service-icon.afterschool { color: #6C5CE7; }

/* Service Content */
.service-card h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.service-card p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

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

.feature-list li {
    color: #555;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
}

.bullet {
    color: var(--btn-primary);
    margin-right: 0.5rem;
    font-weight: bold;
}


/* Responsive Styles */
@media (max-width: 1200px) {
    .services-wrapper {
        grid-template-columns: repeat(2, 1fr); 
        gap: 1.5rem;
    }
}

@media (max-width: 991px) {
    .tour-section {
        padding: 10rem 1rem 1rem 1rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .tour-features {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .services-section {
        padding: 8rem 0;
    }
}

@media (max-width: 576px) {
    .tour-section {
        padding: 9rem 0rem 4rem 0rem;
    }

    .section-divider-top {
        top: 84px;
    }
    .services-wrapper {
        grid-template-columns: 1fr;;
        gap: 1rem;
    }

    .section-title {
        font-size: 1.75rem;
        text-align: center;
        margin-top: 2rem;
    }
    
    .tour-features {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .tour-form-container {
        padding: 1.25rem;
        margin: 1rem;
    }
    
    .feature-item {
        padding: 1rem;
        text-align: center;
    }

    .feature-icon {
        font-size: 1.75rem;
    }

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

    .floating-elements {
        display: none;
    }


}

/* =================================
   TEAM SECTION STYLES
   ================================= */
   .team-section {
    padding: 15rem 0 14rem;
    background: linear-gradient(360deg, var(--primary-color) 0%, var(--bg-secondary) 50%);
    position: relative;
    overflow: hidden;
    z-index: 1;
    margin-top: -2px;
}

.team-clouds-top,
.team-clouds-bottom {
    position: absolute;
    width: 102%;
    left: -1%;
    z-index: 2;
    opacity: 0;
    transition: opacity var(--default-transition), transform var(--default-transition);
    pointer-events: none;
}

.team-clouds-top {
    top: -1px;
    transform: rotate(180deg);
}

.team-clouds-bottom {
    bottom: -1px;
}

/* Team Header */
.team-section .section-header {
    position: relative;
    z-index: 3;
    margin-bottom: 4rem;
}


.team-section .section-title {
    color: var(--primary-color);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.team-section .section-description {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* Team Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    position: relative;
    z-index: 3;
    padding: 0 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

.team-card {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transition: var(--default-transition);
    background: var(--text-light);
    aspect-ratio: 3/4;
}

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

.team-image {
    position: relative;
    width: 100%;
    height: 100%;
}

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

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

/* Team Overlay */
.team-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to bottom,
        rgba(115, 83, 143, 0.95) 0%,
        rgba(115, 83, 143, 0.8) 60%,
        transparent 100%
    );
    padding: 1.5rem;
    transform: translateY(65%);
    transition: var(--default-transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100px;
}

.team-card:hover .team-overlay {
    transform: translateY(0);
}

.team-overlay h3 {
    color: var(--text-light);
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    padding: 0.5rem 0 2.5rem;
}

.team-overlay p {
    color: var(--btn-primary);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    padding: 0.5rem 0;
}

.team-quote {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-style: italic;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease 0.1s;
}

.team-card:hover .team-quote {
    opacity: 1;
    transform: translateY(0);
}
/* =================================
   TEAM SECTION STYLES
   ================================= */
/* Stats Section Styles */
.stats-section {
    position: relative;
    padding: 8rem 0;
    background-image: url('images/children-parallax.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    margin-top: -2px;
}

.stats-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        var(--primary-color) 0%,
        rgba(115, 83, 143, 0.95) 100%
    );
    backdrop-filter: blur(5px);
}

.stats-wrapper {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    z-index: 2;
}

.stat-card {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--border-radius-lg);
    padding: 2rem;
    text-align: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.5s ease;
}

.stat-card.animate {
    transform: translateY(0);
    opacity: 1;
}

.stat-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    animation: float 6s ease-in-out infinite;
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
    background: linear-gradient(45deg, #fff, #f0f0f0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.stat-label {
    color: var(--text-light);
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.9;
}

.stat-line {
    width: 40px;
    height: 3px;
    background: var(--btn-primary);
    margin: 1rem auto 0;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stat-card:hover .stat-line {
    width: 60px;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Section Header Styles */
.stats-section .section-header {
    position: relative;
    z-index: 2;
}

.stats-section .section-title {
    color: var(--text-light);
}

.stats-section .section-description {
    color: var(--text-light);
    opacity: 0.9;
}

/* Decoration Items */
.stats-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.decoration-item {
    position: absolute;
    font-size: 2rem;
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

.star-1 {
    top: 15%;
    left: 10%;
    animation-delay: 0s;
}

.heart-1 {
    top: 40%;
    right: 15%;
    animation-delay: 2s;
}

.star-2 {
    bottom: 20%;
    left: 20%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .stats-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        padding: 0 1rem;
    }
}

@media (max-width: 768px) {
    .stats-section {
        padding: 6rem 0;
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .decoration-item {
        display: none;
    }

    .stat-card {
        transform: translateY(30px);
    }
}

@media (max-width: 576px) {
    .stats-wrapper {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem;
    }

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

    .stat-number {
        font-size: 2.2rem;
    }

    .stat-label {
        font-size: 1rem;
    }
}

/* =================================
   ABOUT SECTION STYLES
   ================================= */
.about-section {
    padding: 8rem 0;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--text-light) 100%);
    position: relative;
    margin-top: -2px;
}

.about-content {
    padding-right: 3rem;
}

/* About Header */

.about-content .section-title {
    color: var(--text-light);
    font-size: 2.8rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.about-content .lead {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.2rem;
    margin-bottom: 2.5rem;
}

/* About Features */
.about-features {
    margin-bottom: 3rem;
}

.feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    background: var(--primary-color);
    padding: 1.5rem;
    border-radius: var(--border-radius-md);
    transition: var(--default-transition);
}

.feature:hover {
    background: rgba(115, 83, 143, 0.8);
    transform: translateX(10px);
}

.feature-icon {
    font-size: 2rem;
    margin-right: 1rem;
    background: var(--text-light);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
}

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

.feature-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.95rem;
    margin: 0;
}

/* About Image */
.about-image {
    position: relative;
    padding-left: 2rem;
}

.image-shape {
    position: relative;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.image-shape img {
    width: 100%;
    height: auto;
    display: block;
}

.experience-badge {
    position: absolute;
    bottom: 2rem;
    left: 0;
    background: var(--text-light);
    padding: 1.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    text-align: center;
}

.experience-badge .years {
    display: block;
    color: var(--btn-primary);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
}

.experience-badge .text {
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Responsive Styles */
@media (max-width: 1400px) {
    .team-section {
        padding: 12rem 0;
    }
    
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 900px;
        gap: 2rem;
    }

    .team-section .section-title {
        font-size: 2.5rem;
    }
}

@media (max-width: 991px) {
    .about-section {
        padding: 6rem 0;
    }
    
    .about-content {
        padding-right: 0;
        margin-bottom: 3rem;
    }
    
    .about-image {
        padding-left: 0;
        max-width: 600px;
        margin: 0 auto;
    }

    .stats-section {
        background-image: none;
        background-color: var(--primary-color);
        background: linear-gradient(
            180deg,
            var(--primary-color) 0%,
            var(--primary-dark) 100%
        );
    }

    .stats-overlay {
        background: linear-gradient(
            to bottom,
            rgba(115, 83, 143, 0.95) 0%,
            rgba(115, 83, 143, 0.85) 100%
        );
        backdrop-filter: none;
    }
}

@media (max-width: 768px) {
    .navbar {
        top: 0;
    }
    .team-section {
        padding: 8rem 0;
    }

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

    .team-grid {
        grid-template-columns: 1fr;
        max-width: 450px;
        gap: 1.5rem;
    }

    .team-overlay {
        padding: 1.5rem;
    }

    .team-section .section-description {
        font-size: 1rem;
        padding: 0 1rem;
    }

    .about-section {
        padding: 4rem 0;
    }
    .about-content {
        padding-right: 0;
        text-align: center;
    }
    .about-content .section-title {
        font-size: 2.2rem;
    }
    
    .feature {
        padding: 1.2rem;
    }
}

@media (max-width: 576px) {
    .team-section {
        padding: 4rem 0;
    }

    .team-grid {
        max-width: 100%;
    }

    .team-overlay h3 {
        font-size: 1.2rem;
    }

    .team-overlay p {
        font-size: 0.9rem;
    }

    .team-quote {
        font-size: 0.8rem;
    }

    .about-content .section-title {
        font-size: 1.75rem;
    }
}

/* =================================
   REVIEWS SECTION STYLES
   ================================= */
   .reviews-section {
    padding: 6rem 0;
    background: linear-gradient(180deg, var(--text-light) 0%, var(--bg-secondary) 100%);
    position: relative;
    margin-top: -2px;
    overflow: hidden;
}

.reviews-section .section-header {
    margin-bottom: 4rem;
}

.reviews-section .section-title {
    color: var(--primary-color);
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

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

/* Reviews Wrapper */
.reviews-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

.reviews-wrapper iframe {
    border-radius: var(--border-radius-md);
    box-shadow: 0 10px 30px rgba(115, 83, 143, 0.1);
}

/* Reviews Decorations */
.reviews-decoration {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.decoration-item {
    position: absolute;
    font-size: 2rem;
    opacity: 0.2;
    animation: float 6s ease-in-out infinite;
}

.decoration-item.star {
    top: 15%;
    left: 5%;
}

.decoration-item.heart {
    top: 40%;
    right: 5%;
    animation-delay: 2s;
}

.decoration-item.smile {
    bottom: 20%;
    left: 8%;
    animation-delay: 4s;
}

/* =================================
   FOOTER STYLES
   ================================= */
.main-footer {
    background: linear-gradient(360deg, var(--primary-color) 0%, var(--bg-secondary) 99%);
    color: var(--text-light);
    position: relative;
}

/* Footer Top Section */
.footer-top {
    padding: 5rem 0 4rem;
    position: relative;
}

/* Footer Info */
.footer-info {
    margin-bottom: 2rem;
}

.footer-logo {
    max-height: 50px;
    margin-bottom: 1.5rem;
}

.footer-info p {
    color: var(--text-primary);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

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

.footer-social .social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    border-radius: 50%;
    color: var(--text-light);
    font-size: 1rem;
    text-decoration: none;
    transition: var(--default-transition);
}

.footer-social .social-link:hover {
    background: var(--btn-primary);
    color: var(--text-light);
    transform: translateY(-3px);
}

/* Footer Sections */
.footer-title {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: 1rem;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--primary-dark);
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 0.8rem;
}

.footer-links a {
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--default-transition);
    font-size: 0.95rem;
    display: inline-block;
}

.footer-links a:hover {
    color: var(--text-light);
    transform: translateX(5px);
}

/* Footer Contact */
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-contact i {
    color: var(--primary-dark);
    margin-right: 1rem;
    font-size: 1.1rem;
    margin-top: 0.2rem;
}

.footer-contact span {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.footer-contact a {
    color: var(--text-primary);
    text-decoration: none;
}
/* Footer Bottom */
.footer-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.9rem;
}

.footer-legal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
}

.footer-legal a {
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: var(--default-transition);
}

.footer-legal a:hover {
    color: var(--text-light);
}

/* Responsive Styles */
@media (max-width: 991px) {
    .reviews-section {
        padding: 6rem 0;
    }

    .reviews-section .section-title {
        font-size: 2.5rem;
    }

    .footer-top {
        padding: 4rem 0 3rem;
    }
}

@media (max-width: 768px) {
    .reviews-section {
        padding: 4rem 0;
    }

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

    .reviews-wrapper {
        padding: 0 0.5rem;
    }

    .decoration-item {
        display: none;
    }

    .footer-top {
        padding: 3rem 0 2rem;
    }

    .footer-legal {
        justify-content: flex-start;
        margin-top: 1rem;
    }
    .footer-top [class*="col-"] {
        text-align: center;
    }

    /* Center all flex containers */
    .footer-top [class*="col-"] > div {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Center the title line */
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }

    /* Contact list items with icons */
    .footer-contact li {
        justify-content: center;
        flex-direction: row;
        gap: 0.75rem;
    }

    /* Remove right margin from icons since we're using gap */
    .footer-contact i {
        margin-right: 0;
    }

    /* Bottom footer */
    .footer-bottom [class*="col-"],
    .footer-legal {
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .footer-bottom {
        text-align: center;
    }

    .footer-legal {
        justify-content: center;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .copyright {
        margin-bottom: 1rem;
    }
}

/* =================================
   CONTACT US STYLES
   ================================= */

/* Contact Section Styles */
.contact-section {
    padding: 8rem 0;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--text-light) 100%);
    position: relative;
    overflow: hidden;
}

.cloud-border {
    width: 102%;
}

.contact-wrapper {
    position: relative;
    z-index: 2;
    margin-top: 3rem;
}

/* Contact Info Cards */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-card {
    background: var(--text-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: var(--default-transition);
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.card-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.card-icon i {
    color: var(--text-light);
    font-size: 1.5rem;
}

.info-card h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.info-card p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Contact Form */
.contact-form-wrapper {
    background: var(--text-light);
    padding: 2.5rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

.contact-form .form-group {
    margin-bottom: 1rem;
}

.contact-form label {
    color: var(--primary-color);
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.contact-form .form-control,
.contact-form .form-select {
    border: 2px solid #e1e1e1;
    padding: 0.75rem;
    border-radius: var(--border-radius-sm);
    transition: var(--default-transition);
}

.contact-form .form-control:focus,
.contact-form .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(115, 83, 143, 0.15);
}

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

.contact-form .btn-primary {
    width: 100%;
    padding: 1rem;
}

/* Responsive Styles */
@media (max-width: 991px) {
    .contact-section {
        padding: 6rem 0;
    }
    
    .contact-form-wrapper {
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .contact-section {
        padding: 4rem 0;

    }
    
    .info-card {
        padding: 1.5rem;

    }
    .info-card {
        text-align: center;
    }
    
    .card-icon {
        margin: 0 auto 1.5rem;
    }

    .info-card p {
        text-align: center;
    }
    .contact-form-wrapper {
        padding: 1.5rem;
    }
}

@media (max-width: 576px) {
    .contact-section .section-title {
        font-size: 2rem;
    }
    
    .contact-info {
        gap: 1rem;
    }
}


/* =================================
   ABOUT US STYLES
   ================================= */

/* About Hero Section */

.brush-mask-container {
    position: relative;
    width: 100%;
    height: 600px;  /* Adjusted from 800px for better proportion */
    max-width: 100%;  /* Changed from 1000px to use full width */
    overflow: hidden;
    border-radius: 20px;
    margin: 0 auto;
}

.brush-mask-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 810'%3E%3Cpath d='M512 289.445312C507.648438 296.703125 452.496094 242.195312 458.785156 292.347656C461.851562 317.019531 485.878906 343.949219 505.710938 357.496094C490.230469 346.851562 473.460938 354.269531 475.234375 373.136719C476.363281 385.875 482.8125 399.261719 489.746094 409.742188C500.875 426.835938 517 440.21875 527.320312 457.636719C514.742188 444.414062 502.488281 426.027344 486.039062 417.320312C453.949219 399.90625 452.175781 433.929688 468.140625 452.796875C494.261719 483.4375 518.773438 514.882812 540.703125 548.585938C526.515625 527.296875 503.617188 497.949219 481.363281 489.082031C467.332031 483.4375 455.398438 494.726562 460.398438 509.238281C466.847656 527.621094 487.167969 539.554688 499.101562 554.066406C492.488281 545.199219 478.460938 563.742188 478.621094 569.871094C478.941406 580.835938 491.199219 596.800781 496.679688 605.992188C511.679688 630.824219 530.546875 654.53125 555.21875 670.171875C572.148438 680.976562 586.984375 659.046875 576.988281 644.371094C582.148438 646.628906 597.304688 630.019531 596.339844 628.890625C607.949219 643.726562 612.785156 644.371094 631.492188 642.757812C638.425781 651.304688 646.8125 660.980469 658.582031 661.625C716.796875 660.335938 615.527344 537.457031 606.496094 513.589844C636.652344 557.777344 673.097656 596.800781 704.703125 639.695312C711.960938 649.53125 719.378906 664.851562 731.792969 669.042969C747.273438 674.203125 760.015625 656.949219 752.273438 643.242188C738.726562 617.28125 721.3125 593.089844 707.28125 567.613281C722.28125 585.027344 735.824219 612.925781 761.789062 615.023438C785.171875 616.796875 777.109375 585.191406 778.234375 585.027344C795.167969 582.449219 811.617188 582.449219 807.261719 561C817.097656 570.191406 823.710938 585.835938 837.09375 590.1875C847.414062 593.574219 860.636719 588.898438 862.894531 577.449219C863.542969 574.386719 860.316406 555.355469 856.125 555.519531C879.503906 555.839844 883.054688 535.84375 872.570312 518.269531C844.351562 458.601562 811.617188 401.035156 775.011719 346.046875C794.199219 374.75 817.90625 401.195312 838.0625 429.253906C857.089844 455.699219 873.699219 486.179688 896.113281 509.722656C908.210938 522.460938 934.816406 526.492188 935.785156 502.789062C937.398438 469.40625 917.078125 443.285156 904.339844 414.578125C915.144531 429.898438 926.914062 461.023438 951.105469 456.667969C962.875 454.570312 965.292969 444.089844 962.554688 433.769531C951.75 391.84375 928.207031 354.59375 905.789062 318.148438C905.953125 317.988281 906.113281 317.988281 906.113281 317.824219C950.457031 367.332031 987.871094 357.011719 955.941406 287.1875C945.460938 260.257812 931.429688 202.367188 897.082031 195.753906C883.699219 193.175781 863.703125 204.300781 871.121094 220.105469C874.023438 226.070312 878.539062 237.84375 883.214844 242.519531C846.125 209.136719 815.003906 152.539062 763.882812 140.121094C750.175781 139.152344 743.082031 153.667969 747.113281 165.4375C735.019531 155.277344 713.894531 129.15625 695.351562 141.410156C684.0625 149.3125 689.707031 168.339844 696.15625 177.046875C738.40625 234.132812 780.65625 291.21875 822.90625 348.304688C779.042969 290.734375 730.664062 235.101562 678.257812 185.113281C664.550781 172.535156 633.105469 131.089844 610.851562 146.410156C581.179688 166.726562 643.101562 222.199219 655.679688 237.679688C675.515625 263 695.832031 288.316406 713.410156 315.085938C683.738281 284.445312 614.078125 188.820312 577.148438 182.371094C550.058594 180.917969 562.636719 214.945312 573.441406 226.875C560.863281 215.910156 546.1875 208.171875 534.253906 221.554688C530.382812 225.910156 527.804688 244.292969 535.382812 247.195312C506.519531 236.390625 518.289062 278.800781 512 289.445312Z'/%3E%3C/svg%3E");
    -webkit-mask-size: 140% auto;  /* Increased from contain */
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 810'%3E%3Cpath d='M512 289.445312C507.648438 296.703125 452.496094 242.195312 458.785156 292.347656C461.851562 317.019531 485.878906 343.949219 505.710938 357.496094C490.230469 346.851562 473.460938 354.269531 475.234375 373.136719C476.363281 385.875 482.8125 399.261719 489.746094 409.742188C500.875 426.835938 517 440.21875 527.320312 457.636719C514.742188 444.414062 502.488281 426.027344 486.039062 417.320312C453.949219 399.90625 452.175781 433.929688 468.140625 452.796875C494.261719 483.4375 518.773438 514.882812 540.703125 548.585938C526.515625 527.296875 503.617188 497.949219 481.363281 489.082031C467.332031 483.4375 455.398438 494.726562 460.398438 509.238281C466.847656 527.621094 487.167969 539.554688 499.101562 554.066406C492.488281 545.199219 478.460938 563.742188 478.621094 569.871094C478.941406 580.835938 491.199219 596.800781 496.679688 605.992188C511.679688 630.824219 530.546875 654.53125 555.21875 670.171875C572.148438 680.976562 586.984375 659.046875 576.988281 644.371094C582.148438 646.628906 597.304688 630.019531 596.339844 628.890625C607.949219 643.726562 612.785156 644.371094 631.492188 642.757812C638.425781 651.304688 646.8125 660.980469 658.582031 661.625C716.796875 660.335938 615.527344 537.457031 606.496094 513.589844C636.652344 557.777344 673.097656 596.800781 704.703125 639.695312C711.960938 649.53125 719.378906 664.851562 731.792969 669.042969C747.273438 674.203125 760.015625 656.949219 752.273438 643.242188C738.726562 617.28125 721.3125 593.089844 707.28125 567.613281C722.28125 585.027344 735.824219 612.925781 761.789062 615.023438C785.171875 616.796875 777.109375 585.191406 778.234375 585.027344C795.167969 582.449219 811.617188 582.449219 807.261719 561C817.097656 570.191406 823.710938 585.835938 837.09375 590.1875C847.414062 593.574219 860.636719 588.898438 862.894531 577.449219C863.542969 574.386719 860.316406 555.355469 856.125 555.519531C879.503906 555.839844 883.054688 535.84375 872.570312 518.269531C844.351562 458.601562 811.617188 401.035156 775.011719 346.046875C794.199219 374.75 817.90625 401.195312 838.0625 429.253906C857.089844 455.699219 873.699219 486.179688 896.113281 509.722656C908.210938 522.460938 934.816406 526.492188 935.785156 502.789062C937.398438 469.40625 917.078125 443.285156 904.339844 414.578125C915.144531 429.898438 926.914062 461.023438 951.105469 456.667969C962.875 454.570312 965.292969 444.089844 962.554688 433.769531C951.75 391.84375 928.207031 354.59375 905.789062 318.148438C905.953125 317.988281 906.113281 317.988281 906.113281 317.824219C950.457031 367.332031 987.871094 357.011719 955.941406 287.1875C945.460938 260.257812 931.429688 202.367188 897.082031 195.753906C883.699219 193.175781 863.703125 204.300781 871.121094 220.105469C874.023438 226.070312 878.539062 237.84375 883.214844 242.519531C846.125 209.136719 815.003906 152.539062 763.882812 140.121094C750.175781 139.152344 743.082031 153.667969 747.113281 165.4375C735.019531 155.277344 713.894531 129.15625 695.351562 141.410156C684.0625 149.3125 689.707031 168.339844 696.15625 177.046875C738.40625 234.132812 780.65625 291.21875 822.90625 348.304688C779.042969 290.734375 730.664062 235.101562 678.257812 185.113281C664.550781 172.535156 633.105469 131.089844 610.851562 146.410156C581.179688 166.726562 643.101562 222.199219 655.679688 237.679688C675.515625 263 695.832031 288.316406 713.410156 315.085938C683.738281 284.445312 614.078125 188.820312 577.148438 182.371094C550.058594 180.917969 562.636719 214.945312 573.441406 226.875C560.863281 215.910156 546.1875 208.171875 534.253906 221.554688C530.382812 225.910156 527.804688 244.292969 535.382812 247.195312C506.519531 236.390625 518.289062 278.800781 512 289.445312Z'/%3E%3C/svg%3E");
    mask-size: 140% auto;  /* Increased from contain */
    mask-repeat: no-repeat;
    mask-position: center;
    transform: scale(1.8);  /* Increased from 1.1 */
}

.about-hero {
    padding: 180px 0 120px;
    background: var(--primary-color);
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
}

.about-hero-content {
    color: var(--text-light);
    max-width: 600px;
    margin-bottom: 1rem;
}

.hero-subtitle {
    color: var(--btn-primary);
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 2rem;
    display: block;
}

.about-hero-content h1 {
    font-size: 4.5rem;
    font-weight: 800;
    margin-bottom: 2rem;
    line-height: 1.1;
    color: var(--text-light);
}


.hero-description {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    line-height: 1.8;
    max-width: 500px;
}

.about-hero-image {
    position: relative;
    padding: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.main-image {
    width: 100%;
    height: auto;
    border-radius: 30px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    position: relative;
    z-index: 2;
}

.experience-badge {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 1.5rem 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    text-align: center;
    z-index: 3;
}

.experience-badge .years {
    display: block;
    color: var(--primary-color, #6c3c97);
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.experience-badge .text {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 500;
}

.hero-clouds-bottom {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 102%;
    z-index: 2;
}

/* Mission Section */
.mission-section {
    padding: 120px 0;
    background: var(--text-light);
    position: relative;
    margin-top: -2px;
}

/* Mission Image and Brush Mask */
.brush-mask-container-mission {
    position: relative;
    width: 100%;
    height: 600px;
    max-width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.brush-mask-image-mission {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M39.9,-66.2C51.1,-58.9,59.5,-47.1,62.7,-34.7C65.9,-22.3,63.9,-9.3,62.8,3.7C61.7,16.7,61.5,29.8,55.9,40.1C50.3,50.4,39.2,57.9,27.1,61.4C14.9,64.9,1.7,64.4,-12.8,63.4C-27.3,62.3,-43.2,60.8,-54.8,52.6C-66.4,44.3,-73.8,29.4,-76.9,13.5C-80,-2.4,-78.8,-19.3,-72.1,-33C-65.4,-46.8,-53.2,-57.4,-39.9,-63.8C-26.6,-70.3,-13.3,-72.6,0.8,-73.9C14.9,-75.2,28.7,-73.5,39.9,-66.2Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 200%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M39.9,-66.2C51.1,-58.9,59.5,-47.1,62.7,-34.7C65.9,-22.3,63.9,-9.3,62.8,3.7C61.7,16.7,61.5,29.8,55.9,40.1C50.3,50.4,39.2,57.9,27.1,61.4C14.9,64.9,1.7,64.4,-12.8,63.4C-27.3,62.3,-43.2,60.8,-54.8,52.6C-66.4,44.3,-73.8,29.4,-76.9,13.5C-80,-2.4,-78.8,-19.3,-72.1,-33C-65.4,-46.8,-53.2,-57.4,-39.9,-63.8C-26.6,-70.3,-13.3,-72.6,0.8,-73.9C14.9,-75.2,28.7,-73.5,39.9,-66.2Z' transform='translate(100 100)'/%3E%3C/svg%3E");
    mask-size: 100% 200%;
    mask-repeat: no-repeat;
    mask-position: center;
    transform: scale(1.2);
    transition: transform 0.5s ease;
}

.brush-mask-container-mission:hover .brush-mask-image-mission {
    transform: scale(1.3);
}


/* Mission Content */
.mission-content {
    padding-left: 4rem;
}

.mission-content .section-subtitle {
    color: var(--btn-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    display: block;
}

.mission-content .section-title {
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.mission-content .lead {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 3rem;
    line-height: 1.6;
}

/* Mission Points */
.mission-points {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.point-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: rgba(115, 83, 143, 0.05);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    transition: var(--default-transition);
}

.point-item:hover {
    background: rgba(115, 83, 143, 0.1);
    transform: translateX(10px);
}

.point-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.point-content h3 {
    color: var(--primary-color);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.point-content p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}
/* Values Section */
.values-section {
    padding: 15rem 0;
    /* background: linear-gradient(180deg, #fff 0%, var(--bg-secondary) 100%); */
    position: relative;
    overflow: hidden;
    margin-top: -2px;
    margin-bottom: -2px;
}

.values-clouds-top,
.values-clouds-bottom {
    position: absolute;
    width: 102%;
    left: 0;
    z-index: 1;
}

.values-clouds-top {
    top: -1px;
    transform: rotate(180deg);
}

.values-clouds-bottom {
    bottom: -1px;
}

.values-section .section-header {
    position: relative;
    z-index: 2;
    margin-bottom: 60px;
}

.values-section .section-subtitle {
    color: var(--btn-primary);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
}

.values-section .section-description {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-secondary);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
    padding: 0 40px;
}

.value-card {
    background: var(--text-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    text-align: center;
    transition: var(--default-transition);
}

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

.value-icon {
    width: 64px;
    height: 64px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.value-icon i {
    color: var(--text-light);
    font-size: 1.75rem;
}

.value-card h3 {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.value-card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
    line-height: 1.6;
}

/* Facilities Section */
.facilities-section {
    padding: 120px 0;
    background: var(--text-light);
    position: relative;
    margin-top: -2px;
}

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

.facility-card {
    background: var(--text-light);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    transition: var(--default-transition);
}

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

.facility-image {
    width: 100%;
    height: 300px;
    overflow: hidden;
}

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

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

.facility-content {
    padding: 2rem;
}

.facility-content h3 {
    color: var(--primary-color);
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.facility-content p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Accreditation Section */
.accreditation-section {
    padding: 120px 0;
    background: var(--bg-secondary);
    position: relative;
    margin-top: -2px;
}

/* Left Side Content */
.accreditation-content {
    padding-right: 4rem;
}

.accreditation-content .lead {
    color: var(--text-secondary);
    margin-bottom: 3rem;
    font-size: 1.2rem;
    line-height: 1.8;
}

.credentials-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.credential-item {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: var(--text-light);
    padding: 2rem;
    border-radius: var(--border-radius-lg);
    transition: var(--default-transition);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.credential-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.credential-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.credential-icon i {
    color: var(--text-light);
    font-size: 1.5rem;
}

.credential-content h3 {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.credential-content p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Right Side Badges */
.badges-showcase {
    padding: 2rem;
}

.badge-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.achievement-badge {
    aspect-ratio: 1;
    position: relative;
    background: linear-gradient(45deg, var(--primary-color), var(--primary-color-light, #8a63a8));
    border-radius: 50%;
    padding: 0.5rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: var(--default-transition);
}

.achievement-badge:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.badge-inner {
    background: var(--text-light);
    border-radius: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.badge-icon {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.badge-year {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.badge-rating {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.badge-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* Badge Variations */
.quality-badge {
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color, #ffd700));
}

.safety-badge {
    background: linear-gradient(45deg, var(--primary-color), var(--tertiary-color, #4CAF50));
}

.education-badge {
    background: linear-gradient(45deg, var(--secondary-color, #2196F3), var(--primary-color));
}

/* CTA Section */
.about-cta-section {
    padding: 20rem 0 7rem;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--primary-color) 100%);
    position: relative;
    text-align: center;
    color: var(--text-light);
    margin-top: -2px;
}

.cta-clouds-top {
    position: absolute;
    top: -1px;
    left: 0;
    width: 102%;
    transform: rotate(180deg);
}

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

.cta-content h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
}

.cta-content p {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.cta-buttons .btn-primary,
.cta-buttons .btn-secondary {
    padding: 1rem 2rem;
    min-width: 200px;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .values-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 0 20px;
    }

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

@media (max-width: 991px) {
    .about-hero {
        padding: 150px 0 80px;
        min-height: auto;
    }

    .about-hero-content {
        text-align: center;
        margin: 0 auto;
    }

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

    .hero-description {
        margin: 0 auto 2rem;
    }

    .about-hero-image {
        padding: 4rem 10rem;
    }

    .experience-badge {
        padding: 1.2rem 2.5rem;
    }

    /* Updated Mission Styles for 991px */
    .mission-content {
        padding-left: 0;
        margin-top: 3rem;
        text-align: center;
    }

    .brush-mask-container-mission {
        height: 450px;
    }

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

    .mission-content .section-title {
        font-size: 2.2rem;
    }

    .mission-section,
    .facilities-section,
    .accreditation-section {
        padding: 80px 0;
    }

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

    .accreditation-content {
        padding-right: 0;
        margin-bottom: 3rem;
    }

    .values-section {
        padding: 80px 0;
    }

    .cta-content h2 {
        font-size: 3rem;
    }
}

@media (min-width: 656px) and (max-width: 991px) {
    .brush-mask-container-mission {
        height: 450px;
    }
    
    .brush-mask-image-mission {
        transform: scale(1.1);
    }
    
    .brush-mask-container-mission:hover .brush-mask-image-mission {
        transform: scale(1.2);
    }
}

@media (max-width: 768px) {
    .about-hero {
        padding: 120px 0 60px;
    }

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

    .hero-subtitle {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .hero-description {
        font-size: 1rem;
        line-height: 1.6;
    }

    .experience-badge {
        padding: 1rem 2rem;
    }

    .experience-badge .years {
        font-size: 2rem;
    }

    .experience-badge .text {
        font-size: 0.9rem;
    }

    /* Updated Mission Styles for 768px */
    .brush-mask-container-mission {
        height: 350px;
    }

    .point-item {
        padding: 1.5rem;
    }

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

    .mission-content .lead {
        font-size: 1.1rem;
        margin-bottom: 2rem;
    }

    .values-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .certificate-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cta-content h2 {
        font-size: 2.5rem;
    }

    .cta-buttons {
        flex-direction: column;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 576px) {
    .about-hero {
        padding: 100px 0 40px;
    }

    .about-hero-content h1 {
        font-size: 2.2rem;
        margin-bottom: 1.5rem;
    }

    .hero-subtitle {
        font-size: 0.8rem;
        margin-bottom: 1rem;
    }

    .hero-description {
        font-size: 0.95rem;
        padding: 0 1rem;
    }

    .about-hero-image {
        padding: 0 0.5rem;
    }

    .experience-badge {
        padding: 0.8rem 1.5rem;
        border-radius: 15px;
    }

    .experience-badge .years {
        font-size: 1.8rem;
    }

    .experience-badge .text {
        font-size: 0.8rem;
    }

    /* Updated Mission Styles for 576px */
    .brush-mask-container-mission {
        height: 300px;
    }

    .point-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 1.5rem;
    }

    .mission-content .section-title {
        font-size: 1.8rem;
    }

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

    .credential-item {
        flex-direction: column;
        text-align: center;
        align-items: center;
        gap: 1rem;
        padding: 1.5rem;
    }

    .facility-image {
        height: 200px;
    }

    .cta-content h2 {
        font-size: 2rem;
    }
    .mission-section,
    .facilities-section,
    .accreditation-section, .contact-section {
        padding: 60px 0;
        text-align: center;
        
    }
}

/* Added specific tablet breakpoint for mission section */
@media (min-width: 577px) and (max-width: 991px) {
    .mission-content {
        margin-top: 2rem;
    }

    .point-item {
        padding: 1.75rem;
    }

    .brush-mask-container-mission {
        height: 400px;
        margin: 0 auto;
        max-width: 90%;
    }
}

/* Added specific mobile landscape for mission section */
@media (max-width: 767px) and (orientation: landscape) {
    .brush-mask-container-mission {
        height: 350px;
        max-width: 85%;
        margin: 0 auto;
    }
}

/* Added specific adjustments for very small screens */
@media (max-width: 375px) {
    .brush-mask-container-mission {
        height: 250px;
    }

    .point-item {
        padding: 1.25rem;
    }

    .point-icon {
        font-size: 2rem;
    }

    .point-content h3 {
        font-size: 1.2rem;
    }

    .mission-content .section-title {
        font-size: 1.6rem;
    }

    .mission-content .lead {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }
}
/* Add Font Awesome Import */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

header {
  position: sticky;
  top: 0;
  z-index: 99999999999999;
}