/* Global Styles */
:root {
    --primary-color: #0056b3;
    /* Deep Blue */
    --secondary-color: #fbbf24;
    /* Warm Amber */
    --accent-color: #e65c4f;
    /* Original Orange Accent - kept for legacy if needed */
    --text-dark: #333;
    --text-light: #fff;
    --bg-light: #f5f5f5;
    /* Smoky White */
    --font-family: 'Outfit', sans-serif;
    --overlay-color: rgba(0, 86, 179, 0.85);
    /* Semi-transparent primary blue */
}

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

body {
    font-family: var(--font-family);
    color: var(--text-dark);
    overflow-x: hidden;
}

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

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

ul {
    list-style: none;
}

/* Header */
.header {
    background-color: #fff;
    padding: 15px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-top: 3px solid #0056b3;
    border-bottom: 3px solid #0056b3;
    box-shadow: 0 6px 15px rgba(0, 86, 179, 0.15);
}

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

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

.logo-icon {
    font-size: 40px;
    color: var(--secondary-color);
}

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

.brand-name {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: #4a4a4a;
}

.brand-sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #4a4a4a;
}

.brand-tag {
    font-size: 8px;
    color: var(--secondary-color);
    letter-spacing: 1px;
}

.navbar {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links {
    display: flex;
    gap: 25px;
}

.nav-links li a {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-links li a i {
    font-size: 10px;
    color: #666;
}

.header-social-icons {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-right: 10px;
}

.header-social-icons a {
    color: #666;
    font-size: 16px;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #0056b3;
}

.header-social-icons a:hover {
    color: #0056b3;
}

.btn-enquiry {
    background-color: #4a3b32;
    /* Dark brown */
    color: #fff;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.3s;
}

.btn-enquiry:hover {
    background-color: #0056b3;
}

/* Hero Section */
.hero {
    position: relative;
    height: 75vh;
    /* Background moved to ::after for zoom effect */
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Hero Background Image Fallback */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f3f4f6; /* Fallback color */
    z-index: -1;
}

/* Hero Slider Backgrounds */
.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Fallback before JS runs */
    height: 100%;
    display: flex;
    transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    will-change: transform;
}

.hero-slide {
    width: 100%; /* Fallback before JS runs */
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

@keyframes heroZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.hero-content-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Align welcome content to the right */
}

/* Right Overlay Shape */
.hero::before {
    content: '';
    position: absolute;
    top: 50%;
    /* Center vertically */
    right: 0; /* Align overlay to the right */
    width: 30%;
    /* Reduced width as requested (25-30%) */
    height: 120%;
    /* Taller than container to ensure coverage */
    background: rgba(255, 255, 255, 0.6);
    /* More transparent whitish */
    backdrop-filter: blur(5px);
    /* Optional: adds a nice glass effect */
    border-radius: 50% 0 0 50%; /* Curve on the left, flat on the right */
    z-index: 1;
    transform: translateY(-50%);
    /* Center vertically */
}

.hero-left-overlay {
    position: relative;
    z-index: 2;
    max-width: 350px;
    /* Reduced max-width to fit in 30% overlay */
    padding-left: 45px; /* Shift text slightly right to center it inside the right semi-circle overlay */
    color: #333;
    /* Dark text for contrast */
}

.tag-pill {
    background-color: var(--primary-color);
    /* Dark bg for pill */
    color: #fff;
    /* White text */
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    margin-bottom: 25px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero-welcome-small {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
    color: var(--primary-color); /* Change to school primary blue */
}

.hero-main-heading {
    font-size: 64px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    font-family: 'Outfit', sans-serif;
    color: #4a4a4a;
    /* Match logo brand name color */
}

.hero-sub-text {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 40px;
    line-height: 1.6;
    opacity: 1;
    max-width: 90%;
    color: #444;
}

.btn-enquiry-hero {
    background-color: var(--primary-color);
    /* Dark button */
    color: #fff;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-transform: capitalize;
}

.btn-enquiry-hero:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    background-color: var(--secondary-color);
    color: #fff;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
    .hero::before {
        width: 70%;
    }

    .hero-main-heading {
        font-size: 48px;
    }
}

@media (max-width: 768px) {
    .hero {
        height: 60vw !important; /* Maintain landscape aspect ratio on mobile */
    }

    .hero::before {
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        background: rgba(0, 0, 0, 0.35) !important; /* Soft overlay to keep image clear and natural */
        backdrop-filter: none !important;
    }

    /* Keep backgrounds centered and naturally scaled */
    .hero-slider .hero-slide {
        background-position: center center !important;
        background-size: cover !important;
    }

    /* Remove specific left offset shifts to maintain full-image centering */
    .hero-slider .slide-h4 {
        background-position: center center !important;
    }

    .hero-content-overlay {
        justify-content: center !important;
        align-items: center !important; /* Center overlay text vertically and horizontally */
        padding-bottom: 0 !important;
        text-align: center !important;
    }

    .hero-left-overlay {
        padding: 0 15px !important;
        align-items: center !important;
        display: flex !important;
        flex-direction: column !important;
        max-width: 100% !important;
        margin: 0 !important;
    }

    .hero-welcome-small {
        font-size: 11px !important;
        color: var(--secondary-color) !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
        letter-spacing: 2px !important;
        margin-bottom: 2px !important;
    }

    .hero-main-heading {
        font-size: 22px !important;
        color: #fff !important;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9) !important;
        margin-bottom: 8px !important;
        line-height: 1.1 !important;
    }

    .hero-sub-text {
        display: none !important; /* Hide long subtext on mobile to show full image clearly */
    }

    .btn-enquiry-hero {
        background-color: var(--secondary-color) !important;
        color: #111 !important;
        padding: 8px 20px !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
    }
}

/* Floating WhatsApp Button */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s;
}

.whatsapp-float:hover {
    transform: scale(1.1);
}

/* Vision Hero Section */
.vision-hero {
    text-align: center;
    margin-bottom: 80px;
    padding: 40px 20px;
}

.vision-quote {
    font-size: 56px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 15px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.vision-subquote {
    font-size: 24px;
    font-weight: 500;
    color: #666;
    font-style: italic;
}

/* Vision & Mission Grid */
.vision-mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-bottom: 80px;
}

.vision-card {
    background: #fff;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
}

/* Color variations for Vision cards */
.vision-card.card-blue {
    background-color: #e1f5fe;
}

.vision-card.card-purple {
    background-color: #f3e5f5;
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

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

.vision-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 20px 50px rgba(230, 92, 79, 0.2);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.vision-card .card-icon-wrapper {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.vision-card:hover .card-icon-wrapper {
    transform: rotate(360deg) scale(1.1);
}

.vision-card .card-icon-wrapper i {
    font-size: 32px;
    color: #fff;
}

.vision-card .card-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
}

.vision-card .card-desc {
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.btn-learn-more-inline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-learn-more-inline:hover {
    gap: 15px;
    color: var(--primary-color);
}

.btn-learn-more-inline i {
    transition: transform 0.3s ease;
}

.btn-learn-more-inline:hover i {
    transform: translateX(5px);
}

/* Services Section */
.services-section {
    margin-top: 60px;
}

.services-section .section-title {
    font-size: 48px;
    text-align: center;
    margin-bottom: 15px;
}

.services-section .section-desc {
    text-align: center;
    margin-bottom: 50px;
}

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

.service-card {
    border-radius: 25px;
    padding: 50px 40px;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.service-card::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.service-card:hover::after {
    opacity: 1;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.service-card:hover {
    transform: translateY(-20px) scale(1.03);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
}

.service-card .card-icon-wrapper {
    width: 80px;
    height: 80px;
    margin-bottom: 30px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.service-card:hover .card-icon-wrapper {
    transform: scale(1.15) rotate(10deg);
    background: rgba(255, 255, 255, 0.8);
}

.service-card .card-icon-wrapper i {
    font-size: 42px;
    color: #333;
    transition: all 0.4s ease;
}

.service-card:hover .card-icon-wrapper i {
    color: var(--secondary-color);
    transform: scale(1.1);
}

.service-card .card-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #222;
    transition: color 0.3s ease;
}

.service-card:hover .card-title {
    color: var(--primary-color);
}

.service-card .card-desc {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
}

/* Responsive */
@media (max-width: 1024px) {
    .vision-quote {
        font-size: 42px;
    }

    .vision-mission-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 600px) {
    .vision-quote {
        font-size: 32px;
    }

    .vision-subquote {
        font-size: 18px;
    }

    .vision-card {
        padding: 30px 20px;
    }

    .service-card {
        padding: 40px 25px;
    }
}

/* Footer */
.footer {
    background-color: #007DC5;
    /* Exact match with Enquiry Form blue */
    color: #fff;
    padding-top: 100px;
    /* Increased padding for shape divider */
    position: relative;
    overflow: hidden;
}

/* Add a subtle pattern overlay */
.footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.05) 0%, transparent 10%),
        radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.05) 0%, transparent 10%);
    pointer-events: none;
}

.footer-map-widget {
    width: 100%;
    height: 180px;
    /* Slightly taller */
    border-radius: 15px;
    overflow: hidden;
    margin-top: 20px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    /* Semi-transparent border */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Ensure overlay is positioned relative to this */
}

.footer-map-widget iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(20%) contrast(1.2);
    /* Blend map better */
}

.map-clickable-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    background: transparent;
}

.custom-shape-divider-top-footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 2;
}

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

/* Pillars Section Base */
.pillars {
    position: relative;
    padding: 100px 0 50px;
    background-color: #f5f5f5;
    overflow: hidden;
}

/* Wavy Divider */
.custom-shape-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-top .shape-fill {
    fill: #fff;
    /* White to blend with previous section if needed, or orange if it's the divider itself */
    /* Actually based on image, the wave is white on top of the hero or vice versa. 
       The hero has an image. The pillars section is white. 
       The wave seems to be the transition. 
       Let's make the fill white to cut into the hero if placed there, 
       OR if it's at the top of pillars, it should be the color of the hero bottom? 
       Wait, the image shows an orange wave at the top of the white section? 
       No, the image shows a white background for the text, and above it is the hero image.
       There is an orange wave shape at the boundary.
       Let's try setting fill to the secondary color (orange) and see. 
       Actually, looking closely at the second image, there is an orange wave at the top.
    */
    fill: var(--secondary-color);
}

/* Content Styling */
.pillars-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.pillars-header {
    margin-bottom: 60px;
    position: relative;
}

.section-title {
    font-size: 48px;
    font-weight: 700;
    color: #222;
    line-height: 1.2;
    margin-bottom: 20px;
}

.highlight-text {
    color: var(--secondary-color);
}

.section-desc {
    max-width: 800px;
    margin: 0 auto;
    font-size: 16px;
    color: #555;
    line-height: 1.6;
}

.section-desc strong {
    color: #333;
    font-weight: 600;
}

/* Decorative Elements */
.paper-plane-container {
    position: absolute;
    top: -50px;
    left: 0;
    width: 100%;
    height: 200px;
    pointer-events: none;
    z-index: -1;
}

.paper-plane-icon {
    position: absolute;
    top: 20px;
    right: 10%;
    width: 40px;
    transform: rotate(45deg);
    filter: invert(51%) sepia(93%) saturate(1352%) hue-rotate(346deg) brightness(101%) contrast(96%);
    /* Orange tint */
}

.flight-path {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

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

.pillar-card {
    min-height: 350px;
    border-radius: 20px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    transition: transform 0.3s;
    position: relative;
    text-align: left;
}

.pillar-card:hover {
    transform: translateY(-10px);
}


/* Footer Enhancements */
.footer-heading {
    color: #fbbf24;
    /* Yellow accent for headings */
    font-size: 20px;
    margin-bottom: 25px;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff;
    transform: translateX(5px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.contact-info p {
    margin-bottom: 15px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.contact-info strong {
    color: #fbbf24;
}

.footer-bar {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 25px 0;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bar-right a {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer-bar-right a:hover {
    background: #fbbf24;
    color: #003d82;
    transform: translateY(-3px);
}

/* This is tricky to get exactly like the image without SVG, but we can try a simple border or skip for now if too complex */

.card-blue {
    background-color: #e1f5fe;
    /* Light Blue */
}

.card-green {
    background-color: #e8f5e9;
    /* Light Green */
}

.card-orange {
    background-color: #fff3e0;
    /* Light Orange */
}

.card-purple {
    background-color: #f3e5f5;
    /* Light Purple */
}

.card-icon-wrapper {
    margin-bottom: 25px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Optional: Add a background circle if needed, but image seems to have icons floating or with subtle bg */
}

.card-icon-wrapper i {
    font-size: 40px;
    color: #333;
}

.card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.4;
    color: #222;
}

.card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

.card-desc strong {
    color: #333;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 1024px) {
    .section-title {
        font-size: 36px;
    }

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

@media (max-width: 600px) {
    .section-title {
        font-size: 28px;
    }

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

/* Early Years Section */
.early-years {
    position: relative;
    padding: 150px 0 100px;
    background-color: #eaf4fc;
    /* Light Blue Background */
    overflow: hidden;
}

/* Reuse the shape divider but flip/adjust if needed */
.custom-shape-divider-top-early {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-early svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-top-early .shape-fill {
    fill: #fff;
    /* White to transition from pillars section */
}

.early-years-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.highlight-orange {
    color: var(--secondary-color);
}

.btn-view-all {
    background-color: #4a3b32;
    /* Dark Brown */
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    transition: background-color 0.3s;
}

.btn-view-all:hover {
    background-color: #352a24;
}

/* Decorative Elements */
.deco-flower-left {
    position: absolute;
    top: 50px;
    left: 15%;
    font-size: 80px;
    color: #8bc34a;
    transform: rotate(-15deg);
    opacity: 0.8;
    animation: spinFloatLeft 6s ease-in-out infinite;
}

@keyframes spinFloatLeft {

    0%,
    100% {
        transform: rotate(-15deg) translateY(0px) scale(1);
    }

    25% {
        transform: rotate(-25deg) translateY(-15px) scale(1.05);
    }

    50% {
        transform: rotate(-5deg) translateY(-25px) scale(1.1);
    }

    75% {
        transform: rotate(-20deg) translateY(-15px) scale(1.05);
    }
}

.deco-crosses-left {
    position: absolute;
    top: 20px;
    left: 5%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: rainDownLeft 3s ease-in-out infinite;
}

@keyframes rainDownLeft {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.8;
    }

    25% {
        transform: translateY(10px) translateX(5px);
        opacity: 1;
    }

    50% {
        transform: translateY(20px) translateX(-5px);
        opacity: 0.9;
    }

    75% {
        transform: translateY(10px) translateX(3px);
        opacity: 1;
    }
}

.deco-crosses-left span {
    font-size: 30px;
    font-weight: 900;
    color: #FFD700;
    line-height: 0.5;
    animation: twinkle 2s ease-in-out infinite;
}

.deco-crosses-left span:nth-child(2) {
    animation-delay: 0.5s;
}

.deco-flower {
    position: absolute;
    top: 50px;
    right: 15%;
    font-size: 80px;
    color: #8bc34a;
    /* Green */
    transform: rotate(15deg);
    opacity: 0.8;
    animation: spinFloat 6s ease-in-out infinite;
}

@keyframes spinFloat {

    0%,
    100% {
        transform: rotate(15deg) translateY(0px) scale(1);
    }

    25% {
        transform: rotate(25deg) translateY(-15px) scale(1.05);
    }

    50% {
        transform: rotate(5deg) translateY(-25px) scale(1.1);
    }

    75% {
        transform: rotate(20deg) translateY(-15px) scale(1.05);
    }
}

.deco-crosses {
    position: absolute;
    top: 20px;
    right: 5%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    animation: rainDown 3s ease-in-out infinite;
}

@keyframes rainDown {

    0%,
    100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.8;
    }

    25% {
        transform: translateY(10px) translateX(-5px);
        opacity: 1;
    }

    50% {
        transform: translateY(20px) translateX(5px);
        opacity: 0.9;
    }

    75% {
        transform: translateY(10px) translateX(-3px);
        opacity: 1;
    }
}

.deco-crosses span {
    font-size: 30px;
    font-weight: 900;
    color: #FFD700;
    /* Changed to golden yellow */
    line-height: 0.5;
    animation: twinkle 2s ease-in-out infinite;
}

.deco-crosses span:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes twinkle {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Navigation */
.slider-nav {
    position: absolute;
    top: -80px;
    /* Adjust based on layout */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

.nav-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
}

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

/* Gallery Section */
.gallery-header {
    text-align: center;
    margin-bottom: 50px;
    margin-top: -140px;
    position: relative;
    z-index: 10;
}

.gallery-header .section-title {
    margin-bottom: 10px;
}

.gallery-header .section-desc {
    margin-bottom: 0;
}

.gallery-scroll-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 20px 0;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    row-gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.gallery-card {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    aspect-ratio: 1;
    background: #fff;
}

.gallery-card:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.gallery-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e1f5fe 0%, #f3e5f5 100%);
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

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

/* Responsive Gallery */
@media (max-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Early Years Programs Section */
.early-years-programs {
    padding: 100px 0;
    background-color: #fff5e6;
    position: relative;
}

/* Wavy Top Divider for Programs */
.custom-shape-divider-top-programs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-programs svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 100px;
}

.custom-shape-divider-top-programs .shape-fill {
    fill: #fff5e6;
}

.programs-header {
    text-align: center;
    margin-bottom: 60px;
}

.programs-header .section-title {
    font-size: 48px;
    margin-bottom: 20px;
}

.programs-header .section-desc {
    max-width: 900px;
    margin: 0 auto 30px;
}

.btn-view-all-programs {
    background-color: #4a3b32;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-view-all-programs:hover {
    background-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 92, 79, 0.3);
}

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

.program-card-item {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

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

.program-image {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

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

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

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

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

.program-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 25px 25px 15px;
    line-height: 1.3;
}

.program-desc {
    font-size: 15px;
    line-height: 1.7;
    color: #666;
    margin: 0 25px 25px;
}

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

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

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

/* About Us Section */
.about-us {
    padding: 100px 0;
    background-color: #f5f5f5;
    /* Midnight Blue - matches footer */
    overflow: hidden;
}

.about-content {
    display: flex;
    align-items: center;
    gap: 80px;
}

.about-image-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image-mask {
    width: 385px; /* Increased by 10% from 350px */
    height: 385px; /* Increased by 10% from 350px */
    border-radius: 50%;
    /* Perfect circle */
    overflow: hidden;
    position: relative;
    z-index: 2;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    border: 3px solid #fff;
}

.about-image-mask:hover {
    border-color: var(--primary-color);
}

.about-image-mask::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(0, 86, 179, 0.4), transparent);
    transform: rotate(45deg);
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: 3;
    pointer-events: none;
}

.about-image-mask:hover::before {
    opacity: 1;
    animation: shine 1.5s ease-in-out;
}

@keyframes shine {
    0% {
        left: -50%;
    }

    100% {
        left: 150%;
    }
}

.about-image-mask:hover {
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25), 0 0 30px rgba(13, 110, 253, 0.2);
}

.about-image-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Align to the top of the photo to prevent cutting off the head */
    transition: transform 0.4s ease;
}

.about-image-mask:hover img {
    transform: none; /* Keep Chairman's face fully visible and crisp without zooming out of bounds */
}

/* Rotating Ring */
.rotating-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 535px; /* Increased proportionally to fit the 385px mask */
    height: 535px; /* Increased proportionally to fit the 385px mask */
    z-index: 1;
    animation: spin 20s linear infinite;
    pointer-events: none; /* Make sure it doesn't block mouse interactions */
}

.rotating-svg {
    width: 100%;
    height: 100%;
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* About Text */
.about-text {
    flex: 1;
    position: relative;
}

.about-squiggle {
    position: absolute;
    top: -50px;
    left: 0;
    z-index: 3;
}

.deco-dashes {
    position: absolute;
    top: -40px;
    right: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.deco-dashes span {
    width: 8px;
    height: 20px;
    background-color: #fdd835;
    /* Yellow */
    border-radius: 4px;
    transform: rotate(-30deg);
    display: block;
}

.btn-learn-more {
    background-color: #4a3b32;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    transition: background-color 0.3s;
}

.btn-learn-more:hover {
    background-color: #352a24;
}

/* Responsive About Us */
@media (max-width: 1024px) {
    .about-content {
        flex-direction: column;
        text-align: center;
        gap: 50px;
    }

    .about-image-wrapper {
        position: relative !important;
        top: auto !important;
    }

    .about-image-mask {
        width: 280px; /* Equal width and height to maintain a perfect circle on tablet/mobile */
        height: 280px;
    }

    .rotating-ring {
        width: 380px; /* Adjusted to fit the 280px mask */
        height: 380px;
    }

    .deco-dashes {
        right: 50%;
        transform: translateX(50%);
    }
}

/* Footer Section */
.footer {
    position: relative;
    background-color: #007DC5;
    /* Midnight Blue - Professional & Suitable */
    padding: 150px 0 50px;
    color: #fff;
    /* Changing text to white for better contrast on darker background */
    /* Add a subtle doodle pattern if available, otherwise just color */
    background-image: url('https://www.transparenttextures.com/patterns/school.png');
    /* Placeholder pattern */
}

.custom-shape-divider-top-footer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-top-footer svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 120px;
}

.custom-shape-divider-top-footer .shape-fill {
    fill: #fff5e6;
    /* Match About Us background */
}

/* If the footer wave is orange as per image, we need to adjust */
/* The image shows an orange wave AT THE BOTTOM of the About Us section, or TOP of Footer? */
/* It looks like the wave is orange, and the footer is blue. */
/* Let's make the wave fill orange, but wait, the previous section is peach. */
/* If the wave is orange, it sits on top of the blue footer? */
/* Actually, let's look at the image. There is an orange wave separating the peach section and the blue footer. */
/* So the shape fill should be orange, but we need to position it correctly. */
/* Let's try making the shape fill orange (#ff7043) and see how it looks against the peach background */

.custom-shape-divider-top-footer .shape-fill {
    fill: #fff5e6;
    /* Peach Wave to blend with previous section */
}

/* Wait, if the wave is at the top of the footer (blue), and the previous section is peach... */
/* If the SVG is at the top of the footer, the "empty" part of the SVG shows the background behind it (footer blue). */
/* The "filled" part shows the color we set. */
/* We want the transition from Peach -> Orange Wave -> Blue Footer. */
/* This is tricky with just one SVG. */
/* Let's assume the wave is part of the footer's top decoration. */
/* We'll set the fill to #ff7043. */

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

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
    gap: 40px;
}

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

.footer-logo .logo-icon {
    font-size: 30px;
    color: #fff;
}

.footer-logo .brand-name {
    font-size: 24px;
}

.footer-desc {
    font-size: 14px;
    line-height: 1.6;
    max-width: 300px;
}

.footer-heading {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #fff;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    font-size: 14px;
    color: #fff;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: #fff;
    text-decoration: underline;
}

.contact-info p {
    font-size: 14px;
    margin-bottom: 15px;
    line-height: 1.6;
}

.contact-info strong {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

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

@media (max-width: 600px) {
    .footer-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-logo {
        justify-content: center;
    }

    .footer-desc {
        margin: 0 auto;
    }
}

/* Footer Bottom Bar */
.footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 5%;
    /* Added gap in corners */
    margin-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bar-left {
    text-align: left;
}

.footer-bar-right {
    display: flex;
    gap: 20px;
    justify-content: flex-end;
}

.footer-bar-right a {
    color: #fff;
    font-size: 18px;
    transition: color 0.3s;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.footer-bar-right a:hover {
    background: var(--secondary-color);
    transform: translateY(-3px);
}

.footer-copy {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    font-weight: 300;
}

@media (max-width: 768px) {
    .footer-bar {
        flex-direction: column-reverse;
        /* Icons on top on mobile looks better, or column for standard stacking */
        gap: 20px;
        text-align: center;
        padding: 30px 20px;
    }

    .footer-bar {
        flex-direction: column;
    }

    .footer-bar-left,
    .footer-bar-right {
        text-align: center;
        justify-content: center;
    }
}

/* Popup Form Styles */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    /* Hidden by default */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.popup-overlay.show {
    display: flex;
    opacity: 1;
}

.popup-content {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 20px;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

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

.close-popup {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.3s ease;
    border: none;
}

.close-popup:hover {
    background: #f0f0f0;
    transform: scale(1.1);
}

/* Popup Form Card Styling (Deep Blue Professional Theme) */
.popup-form-card {
    background-color: var(--primary-color) !important; /* Deep Blue background */
    padding: 35px 30px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    overflow-y: auto;
    border: none !important;
    color: #fff;
    font-family: var(--font-family);
}

.popup-form-card .form-header {
    font-size: 26px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #fff !important;
    margin-bottom: 5px !important;
    letter-spacing: 1px !important;
}

.popup-form-card .form-sub-header {
    font-size: 16px !important;
    text-align: center !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 25px !important;
    font-weight: 500 !important;
}

/* Inputs & Dropdowns inside the popup */
.popup-form-card .form-group {
    margin-bottom: 15px !important;
}

.popup-form-card .form-group input,
.popup-form-card .form-group select {
    width: 100% !important;
    padding: 12px 15px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    font-size: 15px !important;
    background-color: #fff !important;
    color: #333 !important;
    font-family: var(--font-family) !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.popup-form-card .form-group input:focus,
.popup-form-card .form-group select:focus {
    outline: none !important;
    border-color: var(--secondary-color) !important;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.4) !important;
}

/* Dropdown Arrow customization (select) */
.popup-form-card .form-group select {
    appearance: none !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

/* Consent check and label formatting */
.popup-form-card .form-footer {
    margin: 20px 0 !important;
    text-align: left !important;
}

.popup-form-card .checkbox-container {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    user-select: none !important;
}

.popup-form-card .checkbox-container input {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--secondary-color) !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}

.popup-form-card .consent-text {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.4 !important;
}

/* Submit button styling */
.popup-form-card .btn-enquire-submit {
    width: 100% !important;
    padding: 14px 20px !important;
    background-color: var(--secondary-color) !important; /* Warm Amber Gold */
    color: #111 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}

.popup-form-card .btn-enquire-submit:hover {
    background-color: #f59e0b !important; /* Slightly darker gold */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3) !important;
}

.popup-form-card .btn-enquire-submit:active {
    transform: translateY(0) !important;
}

/* Custom Modal Success/Error Pop-up */
.success-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.success-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.success-modal-card {
    background: #fff;
    border-radius: 16px;
    padding: 35px 30px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(30px) scale(0.9);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.success-modal-overlay.active .success-modal-card {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.success-modal-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    margin: 0 auto 20px auto;
}

.success-modal-icon.success {
    background: #e6f6ec;
    color: #22c55e;
}

.success-modal-icon.error {
    background: #fee2e2;
    color: #ef4444;
}

.success-modal-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    font-family: 'Outfit', sans-serif;
}

.success-modal-desc {
    font-size: 15px;
    color: var(--text-muted);
    margin: 0 0 25px 0;
    line-height: 1.5;
}

.success-modal-btn {
    color: #fff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    font-size: 15px;
    font-family: 'Outfit', sans-serif;
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.success-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.success-modal-btn:active {
    transform: translateY(0);
}

/* Mobile Navigation Toggle styling */
.menu-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
    color: var(--primary-color);
    padding: 5px;
    transition: color 0.3s;
}

.menu-toggle:hover {
    color: var(--secondary-color);
}

@media (max-width: 768px) {
    .menu-toggle {
        display: block;
        order: 3; /* Position after logo and enquire button */
    }

    .brand-name {
        font-size: 18px !important;
    }

    .logo-img-placeholder img {
        height: 40px !important;
    }

    .navbar {
        gap: 10px;
        width: auto;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        border-top: 2px solid #edf2f7;
        border-bottom: 3px solid var(--primary-color);
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        padding: 15px 0;
        gap: 5px;
        margin: 0;
        list-style: none;
        z-index: 999;
    }

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

    .nav-links li {
        width: 100%;
        text-align: center;
    }

    .nav-links li a {
        display: block;
        padding: 12px 0;
        font-size: 15px;
        width: 100%;
        border-bottom: 1px solid #f7fafc;
    }

    .header-social-icons {
        display: none !important;
    }

    .btn-enquiry {
        padding: 8px 16px !important;
        font-size: 11px !important;
        order: 2;
        margin: 0 10px 0 0 !important;
    }
}

/* Responsive Popup Modal styling */
@media (max-width: 600px) {
    .popup-content {
        margin: 15px;
        max-width: calc(100% - 30px);
    }

    .popup-form-card {
        padding: 25px 20px;
    }

    .close-popup {
        top: 10px;
        right: 10px;
        width: 32px;
        height: 32px;
        font-size: 20px;
        background: #fff;
        color: #333;
        border: 1px solid #ddd;
    }
}

@media (max-width: 400px) {
    .popup-form-card {
        padding: 20px 15px;
    }
}