/* =========================================
   THE SIORA KIDZ - COMPLETE THEME CSS
   ========================================= */

/* 1. FONT IMPORTS 
   Importing Nunito (for Body text) */
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

/* =========================================
   GLOBAL STYLES
   ========================================= */

/* Utility Classes for Optimization */
.section-title-responsive {
    font-family: 'Parkinsans', sans-serif;
    font-size: 2.5rem;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .section-title-responsive {
        font-size: 2rem;
    }
}

.text-lime {
    color: #aed254 !important;
}

.text-brand-orange {
    color: #ed7333 !important;
}

.text-soft-purple {
    color: #B69CD8 !important;
}

.text-brand-yellow {
    color: #FFCF55 !important;
}

.text-nunito {
    font-family: 'Nunito', sans-serif !important;
}

.bg-white-input {
    background-color: #fff !important;
}

.max-w-700 {
    max-width: 700px;
}

.img-cover {
    object-fit: cover;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.parent-details {
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.radius-30 {
    border-radius: 30px !important;
}

html {
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    /* Use Nunito for general text readability */
    font-family: 'Nunito', sans-serif;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Cream Background */
    color: #555555;
    /* Matched to Logo Text Grey */
    line-height: 1.6;
    font-size: 18px;
    /* Slightly larger for parents/readability */
}

/* Headings, Buttons, and Nav use the Logo Font */
/* Headings use Parkinsans */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Parkinsans', sans-serif;
}

h1 {
    font-size: 3.5rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.75rem;
}

h4 {
    font-size: 1.5rem;
}

h5 {
    font-size: 1.25rem;
}

h6 {
    font-size: 1rem;
}


.btn,
.nav-link,
.navbar-brand {
    font-family: 'Parkinsans', sans-serif;
}

.adobe-devanagari {
    font-family: 'Adobe Devanagari', 'Noto Serif Devanagari', serif;
    line-height: 1.2;
}

p {
    font-size: 18px;
    margin-bottom: 1.5rem;
}

.section-paragraph {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #212529;
    /* Bootstrap text-dark */
    opacity: 0.75;
}

a {
    text-decoration: none;
}



.text-primary-dark {
    color: #0D1138 !important;
}



/* Offcanvas & Mobile Menu */
/* Offcanvas & Mobile Menu styles moved to consolidated block */

/* Custom Dropdown Styles */
.intro-btn {
    background-color: #D3E1DD;
    color: #333;
    font-weight: 700;
    border-radius: 10px;
    /* Uniform rounded corners */
    padding: 12px 35px 12px 40px;
    /* Adjusted padding */
    position: relative;
    border: none;
    transition: all 0.3s ease;
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.1rem;
    overflow: hidden;
    /* Clips the background and bar */
}

.intro-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    /* Thinner accent bar */
    background: linear-gradient(to bottom, #ED4579 50%, #FFCF55 50%);
    /* Border radius removed, handled by parent overflow */
}


.intro-btn:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    color: #333;
}

.no-hover:hover {
    box-shadow: none !important;
    transform: none !important;
    cursor: default;
    background-color: #D3E1DD !important;
    color: #333 !important;
}

.dropdown-menu {
    border-radius: 15px !important;
    border: none !important;
    background-color: #fff !important;
    padding: 10px 0 !important;
    min-width: 180px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.motto-word {
    transition: color 0.3s ease;
    cursor: default;
    animation: autoHoverPulse 3s infinite;
}

/* Stagger the delays for auto-hover effect */
.motto-word:nth-child(1) {
    animation-delay: 0s;
}

.motto-word:nth-child(2) {
    animation-delay: 1s;
}

.motto-word:nth-child(3) {
    animation-delay: 2s;
}

@keyframes autoHoverPulse {

    0%,
    100% {
        color: inherit;
    }

    50% {
        color: #4CB7A5;
    }
}

.dropdown-item {
    font-family: 'Parkinsans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 10px 20px;
    color: #555 !important;
    border-bottom: 1px solid #f1f1f1;
    text-align: center;
}

.breadcrumb-section {
    position: relative;
    padding: 120px 0 80px;
    background-color: #fdfbf7;

    overflow: hidden;
    /* Prevent falling flowers from overflowing */
    z-index: 0;
}

.breadcrumb-section .container {
    position: relative;
    z-index: 2;
    /* Ensure text is above flowers */
}

.dropdown-item:hover {
    background-color: #f9f9f9 !important;
    color: #4CB7A5 !important;
    /* Teal Hover */
}

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



/* =========================================
   HERO & CAROUSEL SECTION
   ========================================= */

.hero-section {
    background-color: transparent;
    padding-top: 220px;
    min-height: auto;
    display: block;
    position: relative;
    z-index: 10;
    background-image: url('../assets/images/banner-bg.png');
    background-size: 45%;
    background-position: center;
    background-repeat: repeat;
}

.admission-section-padding {
    padding-top: 180px;
}

.admission-form-card {
    border: 1px solid #4CB7A5;
}

@media (max-width: 991px) {
    .admission-section-padding {
        padding-top: 80px;
    }
}

.admission-left-content h2 {
    font-size: 2.8rem;
    color: #0D1138;
}

.admission-left-content p {
    font-size: 1.15rem;
    color: #555;
    margin-bottom: 1.5rem;
}

.admission-left-content li {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

.hero-container {
    margin: 0 auto;
    background-color: transparent !important;
    position: relative;
    z-index: 20;
    /* Ensure content is above decorations (z-index 15) */
}

.hero-main-img {
    margin-top: 100px;
    max-height: 100% !important;
}

/* Map Section Styles */
.map-header-tag {
    color: #FF8CA1;
    letter-spacing: 2px;
}

.map-container-custom {
    border-radius: 30px !important;
}

/* Program Page Styles */
.program-image-large {
    max-height: 400px;
    height: 100%;
}

.program-icon-box {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.program-icon-teal {
    background-color: #4CB7A5;
}

.program-icon-coral {
    background-color: #F08A84;
}

.program-icon-orange {
    background-color: #ED7333;
}

.text-spacing-1 {
    letter-spacing: 1px;
}

.vertical-divider {
    width: 1px;
    height: 40px;
}



/* Contact Page Styles */
.contact-image-large {
    min-height: 500px;
}

.contact-textarea {
    height: 150px;
}

/* =========================================
   MOBILE HERO STYLES (Consolidated)
   ========================================= */
@media (max-width: 991px) {

    /* --- HEADER (Moved from above) --- */
    .header-section {
        padding: 5px 0;
    }

    .navbar-brand img {
        height: 40px;
    }

    .navbar-toggler {
        border: none;
        outline: none;
        background: transparent !important;
        /* Ensure no dark box */
        box-shadow: none !important;
        padding: 5px;
        /* Add some touch area */
    }

    .navbar-toggler:focus {
        box-shadow: none;
        /* Remove focus ring */
    }

    .custom-toggler-icon {
        width: 30px;
        height: 22px;
        /* Adjusted height for tighter spacing */
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .custom-toggler-bar {
        width: 100%;
        height: 3px;
        /* S slightly thinner for elegance */
        background-color: #555555;
        border-radius: 10px;
        display: block;
        transition: all 0.3s;
    }

    /* --- HERO --- */
    .hero-section {
        min-height: auto;
        padding-top: 60px !important;
        /* Balanced spacing */
        padding-bottom: 4rem;
        background-size: 350px;
        text-align: center;
    }

    .hero-text-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Force buttons to be side-by-side on mobile */
    .hero-text-content .d-flex {
        flex-direction: row !important;
        justify-content: center;
        gap: 10px !important;
        width: 100%;
    }

    .hero-text-content h3 {
        font-size: 1.5rem !important;
        white-space: normal !important;
    }

    .btn-hero-custom {
        width: auto !important;
        text-align: center;
        padding: 8px 15px;
        font-size: 0.9rem;
    }

    .btn-hero-custom::before {
        display: none;
    }

    .hero-main-img {
        margin-top: 20px;
        max-height: 450px !important;
    }

    .display-3 {
        font-size: 2rem;
    }

    .fs-3 {
        font-size: 1.2rem !important;
    }

    .lead {
        font-size: 0.9rem !important;
        margin-bottom: 2rem !important;
    }
}

/* Carousel Desktop/Mobile Logic */
.home-banner-carousel-desktop {
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.home-banner-carousel-mobile {
    display: none;
    position: relative;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.home-banner-carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.home-banner-carousel-slide {
    flex: 0 0 100%;
    width: 100%;
}

.home-banner-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    background-color: #F9F6EF;
}

/* Dots Section */
.home-banner-carousel-dots {
    display: flex;
    flex-direction: row !important;
    justify-content: center;
    padding: 15px 0;
    width: 100%;
    position: relative;
    background-color: #F9F6EF;
}

.home-banner-carousel-dot {
    width: 12px;
    height: 12px;
    margin: 0 6px;
    background: rgba(76, 183, 165, 0.3);
    /* Transparent Teal */
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.home-banner-carousel-dot.active {
    background: #4CB7A5;
    /* Logo Teal */
}

#home-banner-carousel-dots-mobile {
    display: none;
}

@media (max-width: 768px) {
    .home-banner-carousel-desktop {
        display: none;
    }

    .home-banner-carousel-mobile {
        display: block;
    }

    #home-banner-carousel-dots-desktop {
        display: none;
    }

    #home-banner-carousel-dots-mobile {
        display: flex;
    }

    .home-banner-carousel-dot {
        width: 10px;
        height: 10px;
        margin: 0 5px;
    }
}





/* =========================================
   STACKING CONTEXT (MAIN CONTENT)
   ========================================= */

main {
    position: relative;
    z-index: 10;
    background-color: #fff;
}

/* .hero-section removed from here to prevent transparency conflict */
.programs-section,
.about-us-section,
.about-section-overhaul,
.curriculum-section,
.journey-section,
.testimonial-section,
.gallery-section,
.faq-section,
.programs-redesign-section,
.elementor-section,
.footer-section {
    position: relative;
    z-index: 10;
    background-color: #F9F6EF !important;
}

/* =========================================
   SIDE TABS
   ========================================= */

.side-tabs {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1050;
}

.side-tab-dynamic {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    width: 40px;
    min-height: 110px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 10px 0 0 10px;
    font-family: 'Parkinsans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    overflow: hidden;
    padding: 10px 5px;
    cursor: pointer;
}

.content-minimized {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    white-space: nowrap;
    display: block;
}

.content-expanded {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    color: #fff;
    line-height: 1.2;
    font-size: 13px;
    font-weight: 600;
}

.side-tab-dynamic:hover {
    width: 110px;
    border-radius: 15px 0 0 15px;
    padding: 0;
    justify-content: center;
    transform: translateX(-5px);
}

.side-tab-dynamic:hover .content-minimized {
    display: none;
}

.side-tab-dynamic:hover .content-expanded {
    display: flex;
}

/* Tab Colors */
.tab-school {
    background-color: #F08A84;
}

/* Instagram */
.tab-instagram {
    background-color: #A6CF58;
}

/* Facebook */
.tab-facebook {
    background-color: #4CB7A5;
}

/* Whatsapp */
.tab-whatsapp {
    background-color: #B69CD8;
}

/* Logo Purple (a) */

/* =========================================
   CLOUD DIVIDER
   ========================================= */

.cloud-divider {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-top: -100px;
    z-index: 15;
}

.cloud-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 100px);
    margin-left: -50px;
    height: 150px;
}

/* Tablet */
@media (max-width: 991px) {
    .cloud-divider {
        margin-top: -80px;
    }

    .cloud-divider svg {
        height: 120px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cloud-divider {
        margin-top: -50px;
    }

    .cloud-divider svg {
        height: 80px;
        width: calc(100% + 60px);
        margin-left: -30px;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .cloud-divider {
        margin-top: -30px;
    }

    .cloud-divider svg {
        height: 60px;
        width: calc(100% + 40px);
        margin-left: -20px;
    }
}

/* =========================================
   JOURNEY SECTION
   ========================================= */

.journey-section {
    background-color: #F9F6EF;
    z-index: 10;
    overflow: hidden;
}

.journey-card {
    border-radius: 30px;
    padding: 1.5rem;
    position: relative;
    height: 100%;
}

/* Eclectic Approach Cards */
.eclectic-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    position: relative;
    overflow: hidden;
}

.eclectic-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}


.journey-card:not(.p-0)::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    border: none;
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect x='1.5' y='1.5' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' rx='25' ry='25' fill='none' stroke='white' stroke-width='3' stroke-dasharray='15' stroke-opacity='0.6' stroke-linecap='butt'/%3e%3c/svg%3e");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 25px;
    pointer-events: none;
    transition: all 0.3s ease;
}

.journey-card:hover::before {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3cstyle%3e rect %7b animation: d 1s linear infinite; %7d @keyframes d %7b to %7b stroke-dashoffset: -30; %7d %7d %3c/style%3e%3crect x='1.5' y='1.5' width='calc(100%25 - 3px)' height='calc(100%25 - 3px)' rx='25' ry='25' fill='none' stroke='white' stroke-width='3' stroke-dasharray='15' stroke-opacity='0.6' stroke-linecap='butt'/%3e%3c/svg%3e");
}

.bg-orange {
    background-color: #F08A84;
}

.bg-soft-blue {
    background-color: #4CB7A5;
}

.bg-soft-green {
    background-color: #A6CF58;
}

.text-orange {
    color: #F08A84 !important;
}

.text-soft-blue {
    color: #4CB7A5 !important;
}

.text-soft-green {
    color: #A6CF58 !important;
}

.icon-box-white,
.icon-box-white-large {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    width: 60px;
    height: 60px;
    border-radius: 12px;
}



.rotate-icon {
    transition: transform 0.3s ease;
}

.rotate-icon:hover {
    transform: scale(1.05);
}

.journey-card h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.5rem;
    margin-bottom: 0.5rem !important;
}

.journey-card p {
    font-family: 'Nunito', sans-serif;
    margin-bottom: 1rem !important;
}

.journey-card .icon-box-white {
    margin-bottom: 1rem !important;
}

.form-control::placeholder {
    color: #999;
}

/* =========================================
   CURRICULUM SECTION
   ========================================= */

.curriculum-section {
    background-color: #F9F6EF;
    min-height: 400px;
    position: relative;
    z-index: 10;
}

.curriculum-title {
    color: #4CB7A5;
    /* Logo Teal */
    font-family: 'Parkinsans', sans-serif;
    font-size: 2.5rem;
    line-height: 1.2;
}

.curriculum-text {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 90%;
}

.curriculum-img {
    max-height: 400px;
    object-fit: contain;
}

@media (max-width: 991px) {
    .curriculum-title {
        font-size: 2rem;
        text-align: center;
    }

    .curriculum-text {
        text-align: center;
        margin: 0 auto;
    }

    .curriculum-img {
        max-height: 300px;
        margin-top: 2rem;
    }
}

/* =========================================
   PROGRAMS STACKED (STICKY CARDS)
   ========================================= */

.programs-stacked-section {
    padding: 100px 0 200px 0;
    position: relative;
    background-color: #F9F6EF;
}

.programs-stacked-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2;
    padding-bottom: 80px;
}

.programs-bg-box {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1300px;
    height: calc(100% - 100px);
    background-color: rgba(166, 207, 88, 0.15);
    /* Light Lime */
    border-radius: 50px;
    z-index: 1;
}

.vision-bg-box {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1300px;
    height: calc(100% - 40px);
    background-color: rgba(166, 207, 88, 0.15);
    border-radius: 50px;
    z-index: 1;
}

.programs-header {
    padding-top: 80px;
    padding-bottom: 50px;
}

.program-sticky-card {
    position: sticky;
    top: 100px;
    background-color: #fff;
    border-radius: 40px;
    margin-bottom: 0;
    min-height: 480px;
    display: flex;
    overflow: hidden;
    transform-origin: center top;
    transition: opacity 0.4s ease;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 0;
    z-index: 1;
}

.program-sticky-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: -1;
    opacity: 0.6;
}



.program-sticky-card h3,
.program-sticky-card p,
.program-sticky-card .program-card-buttons {
    position: relative;
    z-index: 2;
}

.program-sticky-card .row {
    width: 100%;
    margin: 0;
}

.program-sticky-card h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #555;
    letter-spacing: -0.5px;
}

.program-sticky-card p {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: #666;
    margin-bottom: 2rem !important;
}

.program-sticky-card .see-details {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: #555;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.program-sticky-card .see-details:hover {
    color: #4CB7A5;
}

.card-image-box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 20px;
    border-radius: 0;
}

.card-image-box img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover;
    border-radius: 30px;
}

.program-sticky-card::after {
    content: "";
    display: block;
    height: 100px;
}

/* Stack Order */
.card-1 {
    z-index: 10;
    top: 100px;
    /* Base sticky position */
}

.card-2 {
    z-index: 20;
    top: 140px;
    /* +40px offset */
}

.card-3 {
    z-index: 30;
    top: 180px;
    /* +40px offset */
}

.card-4 {
    z-index: 40;
    top: 220px;
    /* +40px offset */
}

.card-5 {
    z-index: 50;
    top: 260px;
    /* +40px offset */
}

.card-6 {
    z-index: 60;
    top: 300px;
    /* +40px offset */
    margin-bottom: 0;
}

.card-num {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #4CB7A5;
    /* Teal */
    display: inline-block;
}

/* Card Color Variants */
.program-card-orange {
    background-color: #F08A84;
}

.program-card-blue {
    background-color: #4CB7A5;
}

.program-card-green {
    background-color: #A6CF58;
}

.program-card-pink {
    background-color: #FFAD60;
}

.program-card-yellow {
    background-color: #FFCF55;
}

.program-card-purple {
    background-color: #B69CD8;
}

/* Text color fix for colored cards */
.program-sticky-card.colored-card h3,
.program-sticky-card.colored-card .card-num,
.program-sticky-card.colored-card p {
    color: #fff !important;
    opacity: 1 !important;
}

.program-card-buttons {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* Rounded Buttons for Cards */
.btn-white-rounded,
.btn-outline-white-rounded {
    font-family: 'Parkinsans', sans-serif;
    padding: 12px 30px;
    border-radius: 12px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #fff;
    display: inline-flex;
    align-items: center;
}

.btn-white-rounded {
    background-color: #fff;
    color: #555 !important;
}

.btn-white-rounded:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-outline-white-rounded {
    background-color: transparent;
    color: #fff !important;
}

.btn-outline-white-rounded:hover {
    background-color: #fff;
    color: #555 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}



@media (max-width: 991px) {
    .program-sticky-card {
        min-height: auto;
        padding: 20px 15px;
        margin-bottom: 20px;
        top: 100px;
        width: 100%;
    }

    .card-content-col {
        padding: 0 0 20px 0 !important;
    }

    .card-content-left {
        text-align: center !important;
        width: 100%;
    }

    .card-image-box {
        height: 260px;
        width: 100%;
        border-radius: 20px;
    }

    .program-sticky-card h3,
    .program-sticky-card p,
    .program-sticky-card .see-details,
    .program-sticky-card .card-num {
        text-align: center !important;
    }

    .programs-bg-box {
        width: 90%;
        border-radius: 30px;
    }

    .program-sticky-card {
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
        /* Reduced shadow for mobile */
    }

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

    .program-sticky-card p {
        font-size: 16px !important;
    }

    /* Fix Button Alignment on Mobile */
    .program-card-buttons {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center;
        width: 100%;
        gap: 6px;
    }

    .program-card-buttons .btn-white-rounded,
    .program-card-buttons .btn-outline-white-rounded {
        flex: 1 1 0px !important;
        /* Force equal width */
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center;
        justify-content: center;
        white-space: nowrap !important;
        word-break: keep-all !important;
        padding: 8px 4px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        border-radius: 6px;
        height: auto !important;
        /* Allow height to adjust if needed, but text needs to be one line */
        min-height: 36px;
    }

    /* Hide icon to save space */
    .program-card-buttons i {
        display: none !important;
    }
}

/* =========================================
   ABOUT US SECTION
   ========================================= */

.about-us-section {
    background-color: #fff;
}

.text-pink {
    color: #F08A84;
}

.text-teal {
    color: #4CB7A5;
}

.about-features i {
    color: #4CB7A5;
}

.about-image-wrapp.journey-card {
    background-color: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    overflow: hidden;
}

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

.feature-dashed-card {
    border: 2.5px dashed #F5B461;
    /* Orange-ish dashed border */
    border-radius: 15px;
    padding: 30px 20px;
    background-color: #fff;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

.feature-dashed-card:hover {
    background-color: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-style: solid;
    /* Optional: make solid on hover or keep dashed */
}

.feature-dashed-card img {
    max-height: 120px;
    margin-bottom: 20px;
    object-fit: contain;
}

.feature-dashed-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0D1138;
    margin-bottom: 15px;
}

.feature-dashed-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 0;
}

.feature-dashed-card.border-orange {
    border-color: #F5B461;
}

.feature-dashed-card.border-pink {
    border-color: #F08A84;
}

.feature-dashed-card.border-green {
    border-color: #A6CF58;
}

.feature-dashed-card.border-purple {
    border-color: #B69CD8;
}

.about-image-wrapper {
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
    max-width: 320px;
    margin: 0 auto;
}

.about-image-wrapper:hover {
    transform: translateY(-5px);
}

.about-image-wrapper img {
    object-fit: cover;
}

.about-us-section .btn-primary {
    background-color: #B69CD8;
    /* Logo Purple */
    box-shadow: 0 4px 15px rgba(182, 156, 216, 0.3);
}

.about-us-section .btn-primary:hover {
    background-color: #9C80C4;
}

.btn-orange {
    background-color: #F08A84;
    /* Pink */
    border: 2px solid #F08A84;
    color: white;
    font-family: 'Parkinsans', sans-serif;
    border-radius: 10px;
    padding: 10px 20px;
}

.btn-orange:hover {
    background-color: #E07A74;
    border-color: #E07A74;
}

/* Modern Architecture / Stats */
.about-section-overhaul {
    background-color: #F9F6EF;
    border-radius: 0 0 80px 80px;
    z-index: 12;
    position: relative;
    padding: 100px 0;
}

.stats-bg-purple {
    background-color: #B69CD8 !important;
    /* Logo Purple */
    margin-top: -80px;
    padding-top: 140px;
    padding-bottom: 100px;
    z-index: 11;
    position: relative;
    border-radius: 0 0 80px 80px;
    font-family: 'Parkinsans', sans-serif;
    color: #ffffff;
    overflow: hidden;
}

/* =========================================
   TESTIMONIALS & BENTO GRID
   ========================================= */

.testimonial-section {
    background-color: #F9F6EF;
    margin-top: -80px;
    padding-top: 160px;
    padding-bottom: 100px;
    z-index: 10;
    overflow: hidden;
}

.testimonial-quote {
    color: #555;
    font-family: 'Nunito', sans-serif;
    font-style: italic;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    grid-auto-rows: 280px;
}

.bento-item {
    border-radius: 30px;
    overflow: hidden;
}

/* Bento specific colors */
.bg-orange {
    background-color: #F08A84;
}

.bg-green {
    background-color: #A6CF58;
}

.bg-blue {
    background-color: #4CB7A5;
}

.bg-mint {
    background-color: #B69CD8;
}

.bento-content {
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* =========================================
   GALLERY SECTION
   ========================================= */

.gallery-section {
    padding: 100px 0;
    background-color: #F9F6EF;
    overflow: hidden;
}

.gallery-img {
    border-radius: 24px;
    transition: transform 0.4s;
    width: 100%;
    height: 350px;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

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

/* =========================================
   FAQ SECTION
   ========================================= */

.faq-section {
    background-color: #F9F6EF;
    padding: 100px 0;
    overflow: hidden;
}

.accordion-item {
    border: 1px solid #A6CF58;
    /* Lime Border */
    margin-bottom: 20px;
    border-radius: 20px !important;
    overflow: hidden;
    background-color: transparent;
    margin-top: 20px;
}

.accordion-item+.accordion-item {
    border-top: 1px solid #A6CF58;
    margin-top: 0;
}

.accordion-button {
    padding: 20px 30px;
    font-weight: 600;
    color: #555;
    background-color: #fff;
    font-family: 'Parkinsans', sans-serif;
    border-radius: 20px !important;
    transition: all 0.3s ease;
}

.accordion-button::after {
    content: '\f067';
    /* Plus */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    background-image: none !important;
    transform: none !important;
    color: #555;
    font-size: 1.2rem;
}

/* Active State */
.accordion-button:not(.collapsed) {
    background-color: #F08A84;
    /* Theme Coral */
    color: #fff;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.accordion-button:not(.collapsed)::after {
    content: '\f068';
    color: #fff;
}

/* Minus */

.accordion-body {
    padding: 20px 30px 30px 30px;
    color: #fff;
    background-color: #F08A84;
    /* Theme Coral */
    line-height: 1.8;
    font-family: 'Nunito', sans-serif;
}

.accordion-body .section-paragraph {
    color: #fff;
    opacity: 1;
}

/* =========================================
   FOOTER SECTION
   ========================================= */

.footer-section {
    background-color: #2D3E50 !important;
    /* Dark Navy-Grey */
    padding-top: 80px;
    padding-bottom: 0px;
    color: #cfcfcf;
    font-family: 'Parkinsans', sans-serif;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.footer-logo {
    height: 60px;
}

.text-heart-red {
    color: #ff4757;
}

.footer-heading {
    color: #4CB7A5;
    /* Teal Headings */
    margin-bottom: 25px;
    font-weight: 600;
}

.footer-phone {
    color: #ffffff;
    font-weight: 600;
}

.footer-links a {
    color: #cfcfcf;
    text-decoration: none;
    transition: color 0.3s;
    font-family: 'Parkinsans', sans-serif;
}

.footer-links a:hover {
    color: #4CB7A5;
}

.footer-watermark {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 13vw;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.03);
    z-index: 1;
}

.footer-watermark {
    pointer-events: none;
    font-family: 'Parkinsans', sans-serif;
    white-space: nowrap;
}

.footer-bottom-text {
    margin-top: 60px;
    width: 100%;
    padding: 20px 0;
    text-align: center;
    z-index: 20;
    color: #cfcfcf;
    background: rgba(45, 62, 80, 0.9);
    backdrop-filter: blur(5px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'Nunito', sans-serif;
}

/* =========================================
   SPECIAL CLASSES & ANIMATIONS
   ========================================= */

/* Motto Heading (Kept as originally requested) */
.motto-heading {
    color: #555555;
    font-family: 'Adobe Devanagari', 'Noto Serif Devanagari', serif;
    font-size: 2.5rem;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .motto-heading {
        font-size: 1.8rem;
    }
}

@media (min-width: 992px) {
    .motto-heading {
        font-size: 3.5rem;
    }
}

/* Fade / Float Animations */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.animate-fade-up {
    animation: fadeUp 0.8s ease-out forwards;
    opacity: 0;
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s ease-out;
    visibility: hidden;
}

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

/* =========================================
   CTA BANNER SECTION
   ========================================= */
/* Flower Decorations */
/* Flower Decorations */
.decorative-flower {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
    /* Flowers behind text (container is z-2) */
    pointer-events: none;
    opacity: 0.8;
    top: -15%;
    /* Start above visible area */
}

.flower-pink {
    background-image: url('../assets/images/flower-pink.png');
    width: 40px;
    height: 40px;
    left: 10%;
    animation: fall 10s linear infinite;
    animation-delay: 0s;
}

.flower-green {
    background-image: url('../assets/images/flower-green.png');
    width: 35px;
    height: 35px;
    left: 35%;
    animation: fall 12s linear infinite;
    animation-delay: 2s;
}

.flower-yellow {
    background-image: url('../assets/images/flower-yellow.png');
    width: 45px;
    height: 45px;
    left: 65%;
    animation: fall 8s linear infinite;
    animation-delay: 4s;
    right: auto;
    /* Override existing right position */
}

.flower-purple {
    background-image: url('../assets/images/flower-purple.png');
    width: 38px;
    height: 38px;
    left: 85%;
    animation: fall 11s linear infinite;
    animation-delay: 1s;
    right: auto;
    /* Override existing right position */
    bottom: auto;
    /* Override existing bottom position */
}

/* Secondary Flowers (More Variations) */
.flower-pink-2 {
    background-image: url('../assets/images/flower-pink.png');
    width: 30px;
    height: 30px;
    left: 25%;
    animation: fall 13s linear infinite;
    animation-delay: 3s;
}

.flower-green-2 {
    background-image: url('../assets/images/flower-green.png');
    width: 28px;
    height: 28px;
    left: 50%;
    animation: fall 9s linear infinite;
    animation-delay: 1.5s;
}

.flower-yellow-2 {
    background-image: url('../assets/images/flower-yellow.png');
    width: 32px;
    height: 32px;
    left: 75%;
    animation: fall 14s linear infinite;
    animation-delay: 5s;
}

.flower-purple-2 {
    background-image: url('../assets/images/flower-purple.png');
    width: 25px;
    height: 25px;
    left: 5%;
    animation: fall 10s linear infinite;
    animation-delay: 2.5s;
}

/* Tertiary Flowers (Depth, Blur, Sway) */
.flower-pink-3 {
    background-image: url('../assets/images/flower-pink.png');
    width: 25px;
    height: 25px;
    left: 15%;
    opacity: 0.5;
    /* Fainter for depth */
    filter: blur(1.5px);
    /* Blur for depth of field */
    animation: fall-sway 15s linear infinite;
    animation-delay: 1s;
}

.flower-green-3 {
    background-image: url('../assets/images/flower-green.png');
    width: 22px;
    height: 22px;
    left: 40%;
    opacity: 0.5;
    filter: blur(1.5px);
    animation: fall-sway 18s linear infinite;
    animation-delay: 4s;
}

.flower-yellow-3 {
    background-image: url('../assets/images/flower-yellow.png');
    width: 28px;
    height: 28px;
    left: 60%;
    opacity: 0.5;
    filter: blur(1.5px);
    animation: fall-sway 14s linear infinite;
    animation-delay: 2s;
}

.flower-purple-3 {
    background-image: url('../assets/images/flower-purple.png');
    width: 20px;
    height: 20px;
    left: 90%;
    opacity: 0.5;
    filter: blur(1.5px);
    animation: fall-sway 16s linear infinite;
    animation-delay: 5s;
}

@keyframes fall {
    0% {
        top: -15%;
        transform: rotate(0deg);
    }

    100% {
        top: 110%;
        transform: rotate(360deg);
    }
}

@keyframes fall-sway {
    0% {
        top: -15%;
        transform: translateX(0px) rotate(0deg);
    }

    25% {
        transform: translateX(15px) rotate(90deg);
    }

    50% {
        transform: translateX(-15px) rotate(180deg);
    }

    75% {
        transform: translateX(15px) rotate(270deg);
    }

    100% {
        top: 110%;
        transform: translateX(0px) rotate(360deg);
    }
}

/* Mobile Responsiveness for Flowers */
@media (max-width: 768px) {

    /* Group 1 */
    .flower-pink {
        width: 24px;
        height: 24px;
    }

    .flower-green {
        width: 21px;
        height: 21px;
    }

    .flower-yellow {
        width: 27px;
        height: 27px;
    }

    .flower-purple {
        width: 23px;
        height: 23px;
    }

    /* Group 2 */
    .flower-pink-2 {
        width: 18px;
        height: 18px;
    }

    .flower-green-2 {
        width: 17px;
        height: 17px;
    }

    .flower-yellow-2 {
        width: 20px;
        height: 20px;
    }

    .flower-purple-2 {
        width: 15px;
        height: 15px;
    }

    /* Group 3 */
    .flower-pink-3 {
        width: 15px;
        height: 15px;
    }

    .flower-green-3 {
        width: 13px;
        height: 13px;
    }

    .flower-yellow-3 {
        width: 17px;
        height: 17px;
    }

    .flower-purple-3 {
        width: 12px;
        height: 12px;
    }
}

.cta-banner {
    position: relative;
    border-radius: 30px;
    overflow: hidden;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cta-overlay {
    background: linear-gradient(to right, transparent 20%, rgba(68, 64, 60, 0.6) 60%, rgba(68, 64, 60, 0.75) 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.cta-content {
    position: relative;
    z-index: 2;
    padding: 3rem;
    max-width: 600px;
    text-align: left;
    color: #fff;
    margin-right: 2rem;
}

.cta-title {
    font-family: 'Parkinsans', sans-serif;
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.cta-description {
    font-family: 'Nunito', sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    opacity: 0.9;
}

@media (max-width: 991px) {
    .cta-banner {
        height: auto;
        min-height: 400px;
        background-position: center left;
        justify-content: center;
        align-items: flex-end;
    }

    .cta-overlay {
        background: linear-gradient(to top, rgba(68, 64, 60, 0.95) 40%, transparent 100%);
    }

    .cta-content {
        margin-right: 0;
        padding: 2rem;
        max-width: 100%;
        text-align: center;
    }

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

/* =========================================
   CUSTOM DROPDOWN MENU
   ========================================= */

.custom-dropdown-menu {
    border: none;
    /* Teal removed, using inner border */
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    background-color: #fff;
    margin-top: 15px;
    /* Spacing from nav item */
    min-width: 220px;
    display: none;
    /* Default hidden */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.custom-dropdown-menu::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border: 1px solid #4CB7A5;
    border-radius: 15px;
    pointer-events: none;
}

.custom-dropdown-menu::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.custom-dropdown-menu.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.custom-dropdown-menu .dropdown-item {
    font-family: 'Parkinsans', sans-serif;
    padding: 12px 20px;
    border-radius: 12px;
    color: #555;
    font-weight: 500;
    transition: all 0.2s;
    margin-bottom: 5px;
}

.custom-dropdown-menu .dropdown-item:last-child {
    margin-bottom: 0;
}

.custom-dropdown-menu .dropdown-item:hover {
    background-color: #EAF8F6;
    /* Light teal bg */
    color: #4CB7A5;
}

/* Hover support for desktop */
@media (min-width: 992px) {
    .nav-item.dropdown:hover .custom-dropdown-menu {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }
}

/* Float Animations */


/* Utility Animations */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.hover-scale {
    transition: transform 0.3s ease;
}

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

/* Decorative Flower Responsive Styles */
.decor-flower-bottom-right {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 150px;
    z-index: 0;
    pointer-events: none;
    margin-right: 60px;
}

@media (max-width: 768px) {
    .decor-flower-bottom-right {
        max-width: 100px;
        margin-right: 20px;
    }
}

/* Decorative Shape 1 */
.decor-shape-1 {
    position: absolute;
    left: -75px;
    /* Half of 150px */
    top: 50px;
    width: 150px;
    height: auto;
    z-index: 5;
    pointer-events: none;
    display: block;
    opacity: 1;
    animation: spin-slow 25s linear infinite;
}

@media (max-width: 991px) {
    .decor-shape-1 {
        display: none;
    }
}

/* Decorative Shape 2 */
.decor-shape-2 {
    position: absolute;
    right: -75px;
    top: 350px;
    width: 150px;
    opacity: 1;
}

@media (max-width: 991px) {
    .decor-shape-2 {
        display: none;
    }
}


@keyframes spin-slow {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Decorative Shape 3 (Stats Section) */
.decor-shape-3 {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(-22%, -50%);
    width: 150px;
    opacity: 0.75;
    z-index: 1;
}

@media (max-width: 991px) {
    .decor-shape-3 {
        width: 80px;
        left: 0;
    }
}

/* Custom FAQ Styles */
.faq-section {
    overflow: hidden;
}

/* Program Page Overflow Fix - Add class="page-program" to body on program pages */
.page-program,
.page-program *:not(.header-section):not(.header-section *) {
    max-width: 100vw;
}

.page-program {
    overflow-x: hidden !important;
}

.page-program main,
.page-program section:not(.header-section),
.page-program .container:not(.header-section .container) {
    overflow-x: hidden;
}

/* Ensure header dropdowns are always visible on program pages */
.page-program .header-section {
    overflow: visible !important;
}

.page-program .header-section .dropdown-menu,
.page-program .header-section .custom-dropdown-menu {
    z-index: 1050 !important;
}

.accordion-item {
    border: 1px solid #717C98 !important;
    /* Default Blue/Grey Border */
    border-radius: 20px !important;
    margin-bottom: 20px;
    background-color: transparent;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-button {
    background-color: #fff !important;
    color: #0D1138 !important;
    /* Dark Navy Text */
    font-family: 'Parkinsans', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    padding: 20px 25px;
    border-radius: 20px !important;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: #F08A84 !important;
    /* Theme Coral */
    color: #fff !important;
    border-radius: 20px 20px 0 0 !important;
}

.accordion-body {
    background-color: #F08A84;
    /* Theme Coral */
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 25px 25px 25px;
    border-radius: 0 0 20px 20px;
}

/* Active Item Wrapper Style */
.accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: #F08A84 !important;
    background-color: #F08A84;
}

/* Custom Icon Logic */
.accordion-button::after {
    background-image: none !important;
    content: "\f067";
    /* Plus Icon */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #0D1138;
    transform: none !important;
    font-size: 1.2rem;
}

.accordion-button:not(.collapsed)::after {
    content: "\f068";
    /* Minus Icon */
    color: #fff;
}

/* =========================================
   NEW HEADER REDESIGN STYLES
   ========================================= */

.header-section {
    background-color: transparent;
    box-shadow: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-section.scrolled {
    background-color: #F9F6EF !important;
    /* Cream background on scroll */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    animation: slideDown 0.35s ease-out forwards;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* Center Navigation */
.nav-center .nav-link {
    font-family: 'Parkinsans', sans-serif;
    font-size: 17px;
    font-weight: 600;
    color: #4CB7A5 !important;
    /* Teal */
    text-transform: none !important;
    /* Override uppercase */
    padding: 10px 15px !important;
    position: relative;
}

.nav-center .nav-link:hover {
    color: #F08A84 !important;
    /* Pink Hover */
}

/* Mobile Action Buttons */
.mobile-action-buttons {
    margin-top: 20px;
}

/* Button Slide Animation Base */
.btn-hover-slide {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease-in-out;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 5px;
    border-radius: 10px;
    font-weight: 600;
    font-family: 'Parkinsans', sans-serif;
}

.btn-hover-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: -1;
    transition: width 0.4s ease-in-out;
}

.btn-hover-slide:hover::before {
    width: 100%;
}

.btn-hover-slide:hover {
    color: #fff !important;
}

.btn-hover-slide i {
    transition: color 0.4s ease-in-out;
}

.btn-hover-slide:hover i {
    color: #fff !important;
}

/* Admission Button Slide */
.btn-slide-admission {
    border: 2px solid #ff9999;
    color: #333;
}

.btn-slide-admission i {
    color: #ff9999;
}

.btn-slide-admission::before {
    background-color: #ff9999;
}

/* Franchise Button Slide */
.btn-slide-franchise {
    border: 2px solid #008C99;
    color: #333;
}

.btn-slide-franchise i {
    color: #008C99;
}

.btn-slide-franchise::before {
    background-color: #008C99;
}

/* Header Buttons */
.btn-admission {
    border: 2px solid #F08A84;
    /* Pink/Red Border */
    color: #333;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 20px;
    background: transparent;
    transition: all 0.3s ease;
    font-family: 'Parkinsans', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-admission i {
    color: #F08A84;
    font-size: 1.1em;
}

.btn-admission:hover {
    background-color: #F08A84;
    color: #fff;
    box-shadow: 0 5px 15px rgba(240, 138, 132, 0.3);
}

.btn-admission:hover i {
    color: #fff;
}

.btn-partner {
    background-color: #008C99;
    /* Deep Teal */
    color: #fff;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 20px;
    border: none;
    transition: all 0.3s ease;
    font-family: 'Parkinsans', sans-serif;
    display: flex;
    align-items: center;
}

.btn-partner:hover {
    background-color: #007A85;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 140, 153, 0.3);
}

.btn-partner i {
    color: #fff;
    font-size: 1.1em;
}

/* Responsive Hide/Show Logic is handled by Bootstrap classes in HTML, 
   but ensuring no conflicts */
/* =========================================
   NEW HERO REDESIGN STYLES
   ========================================= */

/* Butterfly Animation */
.hero-butterfly {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 70px;
    z-index: 25;
    animation: butterflyFloat 6s ease-in-out infinite;
}

.hero-butterfly-2 {
    position: absolute;
    top: 38%;
    right: 12%;
    width: 60px;
    z-index: 25;
    animation: butterflyFloat 7s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes butterflyFloat {

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

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



/* Custom Hero Buttons Styling */
.btn-hero-custom {
    position: relative;
    padding: 12px 30px 12px 40px;
    /* Adjusted left padding for thinner bar */
    font-family: 'Parkinsans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    border: none;
    border-radius: 5px;
    /* Uniform rounded corners "over all" */
    color: #333;
    transition: all 0.3s ease;
    overflow: hidden;
    /* Clips the background and pseudo-element */
    width: auto;
    text-align: left;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-hero-custom::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    /* Thinner accent bar */
    height: 100%;
    z-index: 1;
    /* Border radius removed; handled by parent overflow: hidden */
}

/* Admission Button Specifics */
.btn-hero-admission {
    background-color: #FBDDD4;
    /* Light Peach/Pink BG */
}

.btn-hero-admission::before {
    background-color: #F28C86;
    /* Darker Pink Bar */
    background-image: linear-gradient(to bottom, #F28C86 50%, #4CB7A5 50%);
    /* Split color bar effect if desired, straight pink for now based on simple perception or try split */
    /* Let's replicate the split bar from the reference: Top Pink, Bottom Teal? Or just solid. 
   Re-examining image: Admission has Pink top bar, Green bottom bar. Partner has Green top bar, Yellow bottom bar. */
    background: linear-gradient(to bottom, #FF8E8E 50%, #4CB7A5 50%);
}

/* Partner Button Specifics */
.btn-hero-partner {
    background-color: #C6D8D3;
    /* Light Greenish Gray BG */
}

.btn-hero-partner::before {
    background: linear-gradient(to bottom, #FFD700 50%, #4CB7A5 50%);
    /* Yellow top, Teal bottom? Hard to see exact order, trying balanced combo */
    background: linear-gradient(to bottom, #E91E63 50%, #FFC107 50%);
    /* Let's try Pink / Yellow for Partner based on reference vibes */
}

.btn-hero-admission:hover {
    background-color: #fbd3c6;
    color: #333;
}

.btn-hero-partner:hover {
    background-color: #b8cec8;
    color: #333;
}

@media (max-width: 768px) {
    .hero-butterfly {
        width: 50px;
        top: 15%;
        left: 5%;
    }

    .hero-butterfly-2 {
        width: 40px;
        top: 35%;
        right: 5%;
    }

    .hero-text-content .d-flex {
        gap: 15px !important;
        /* Ensure gap between buttons */
    }

    .btn-hero-custom {
        padding: 10px 10px 10px 25px;
        /* Reduced vertical and right padding, keeping left space for bar */
        font-size: 0.85rem;
        /* Smaller font text */
        width: auto !important;
        flex: none;
        /* Prevent growing/shrinking */
        justify-content: center;
        /* Center text */
        border-radius: 5px;
        /* Explicitly set to match desktop */
        white-space: nowrap;
        /* Force text to one line */
    }

    .btn-hero-custom::before {
        width: 5px;
        /* Ensure 8px width on mobile too */
        content: '';
        display: block;
    }

    .adobe-devanagari {
        font-size: 1.8rem;
    }
}

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }



    .hero-section {
        background-color: transparent !important;
        min-height: 100vh;
        /* Full height including header overlap/visual area */
        display: flex;
        align-items: center;
    }



}



.navbar-expand-lg .navbar-nav {
    flex-direction: row;
}

/* Smart Fluid Container */
/* Smart Fluid Container Removed - Switched to Standard Bootstrap .container */

/* =========================================
   CUSTOM MOBILE MENU OVERLAY
   ========================================= */

.custom-mobile-menu {
    width: 100% !important;
    /* Full width overlay */
    background-color: #FDFBF7 !important;
    /* Warm paper background */
    border: none;
}

.custom-mobile-menu .offcanvas-header {
    background-color: transparent !important;
    /* Remove teal header */
    padding: 20px 30px;
}

.custom-mobile-menu .btn-close {
    background-size: 1.5rem;
    /* Larger close button */
    opacity: 0.8;
}

/* Mobile Navigation Links */
.custom-mobile-menu .navbar-nav {
    flex-direction: column !important;
    /* Force vertical column */
    width: 100%;
}

.mobile-nav-link {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.3rem;
    /* Slightly smaller but bold as per new Ref */
    font-weight: 700;
    color: #333;
    text-transform: capitalize;
    padding: 15px 0;
    text-align: left;
    /* Explicit Left Align */
    transition: all 0.3s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus {
    color: #4CB7A5;
    padding-left: 10px;
    /* Slight slide right on hover */
}

.mobile-sub-nav-link {
    font-family: 'Parkinsans', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #666;
    text-transform: capitalize;
    padding: 8px 0;
    display: block;
    transition: all 0.3s ease;
}

.mobile-sub-nav-link:hover {
    color: #4CB7A5;
    padding-left: 5px;
}

/* Rotate chevron when expanded */
.mobile-nav-link[data-bs-toggle="collapse"] .fa-chevron-down {
    transition: transform 0.3s ease;
}

.mobile-nav-link[data-bs-toggle="collapse"]:not(.collapsed) .fa-chevron-down {
    transform: rotate(180deg);
}

/* =========================================
   BREADCRUMB SECTION (NEW MODERN)
   ========================================= */

.breadcrumb-section {
    background-image: url('../assets/images/banner-bg.png');
    background-size: 45%;
    background-position: center;
    background-repeat: repeat;
    padding: 220px 0 140px 0;
    /* Increased top padding for header overlay */
    margin-top: 0;
    position: relative;
    z-index: 10;
}

.header-cream {
    background-color: transparent !important;
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 999;
    box-shadow: none !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.header-cream.scrolled {
    background-color: #F9F6EF !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
    animation: slideDown 0.35s ease-out forwards;
}

.breadcrumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(13, 17, 56, 0.85) 0%, rgba(76, 183, 165, 0.7) 100%);
    /* Dark Navy to Teal Gradient */
    z-index: 1;
    display: none;
    /* Hide overlay to show background pattern clearly as per hero style, or keep it if "same bg for header and breadcrumb" means just the pattern. User said "header bg also be transparents and use the sma ebg for header and bradcurumb section". If I remove overlay, it matches hero more. Let's try matching hero exactly first. */
}

.breadcrumb-bottom-shape {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    line-height: 0;
    z-index: 3;
}

.breadcrumb-bottom-shape svg {
    display: block;
    width: 100%;
    height: 60px;
    /* Adjust height of wave */
}

@media (max-width: 991px) {
    .breadcrumb-section {
        padding: 140px 0 100px 0;
        /* Adjust for mobile header height */
        background-position: center top;
    }
}

/* =========================================
   VISION, MISSION, PHILOSOPHY CARDS
   ========================================= */

.vmp-card {
    border-radius: 30px;
    padding: 2.5rem;
    height: 100%;
    color: #333;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.vmp-card h3 {
    font-family: 'Parkinsans', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: #0D6EFD;
    /* Bootstrap Primary Blue */
}

/* Custom Theme Colors */
.bg-card-vision {
    background-color: #F08A84;
    /* Theme Coral */
}

.bg-card-mission {
    background-color: #A6CF58;
    /* Theme Green */
}

.bg-card-philosophy {
    background-color: #4CB7A5;
    /* Theme Teal */
}


/* Override text color inside these cards */
.vmp-card h3,
.vmp-card p {
    color: #ffffff !important;
}

.vmp-card p {
    font-weight: 500;
    font-size: 1rem;
    line-height: 1.5;
}

/* =========================================
   CORE VALUES CARD (ABOUT PAGE)
   ========================================= */
.core-values-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.core-values-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.value-number {
    font-family: 'Parkinsans', sans-serif;
    line-height: 1;
    color: #999;
}

/* =========================================
   STICKY CORE VALUES CARDS
   ========================================= */

.sticky-container {
    position: relative;
    padding-bottom: 50px;
}

.sticky-wrapper {
    position: sticky;
    z-index: 1;
    /* Determine the base top offset - needs to account for header */
    top: 150px;
}

/* Create the stacking effect by increasing top for each subsequent card */
.sticky-wrapper:nth-child(1) {
    top: 150px;
    z-index: 1;
}

.sticky-wrapper:nth-child(2) {
    top: 170px;
    z-index: 2;
}

.sticky-wrapper:nth-child(3) {
    top: 190px;
    z-index: 3;
}

.sticky-wrapper:nth-child(4) {
    top: 210px;
    z-index: 4;
}

.sticky-wrapper:nth-child(5) {
    top: 230px;
    z-index: 5;
}

.sticky-wrapper:nth-child(6) {
    top: 250px;
    z-index: 6;
}

.sticky-card {
    width: 100%;
    /* Enforce square-ish shape */
    aspect-ratio: 1 / 0.9;
    /* Slightly rectangular to fit text better, or 1/1 if strict square */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.sticky-card .value-icon-box {
    margin-bottom: 1.5rem;
}

.sticky-card .value-number {
    position: absolute;
    top: 20px;
    left: 20px;
}

/* Desktop Check: Ensure it works well on large screens */
@media (min-width: 992px) {
    .sticky-card {
        aspect-ratio: 1/0.8;
    }
}

/* Mobile Fallback: If "sticky" on mobile is annoying or takes up too much space, we might adjust,
   but user asked for it "for all". We'll keep it but adjust sizes. */
@media (max-width: 768px) {
    .sticky-wrapper {
        top: 100px !important;
        /* Less offset on mobile */
    }

    /* On mobile, maybe tighten the stack */
    .sticky-wrapper:nth-child(1) {
        top: 100px;
    }

    .sticky-wrapper:nth-child(2) {
        top: 110px;
    }

    .sticky-wrapper:nth-child(3) {
        top: 120px;
    }

    .sticky-wrapper:nth-child(4) {
        top: 130px;
    }

    .sticky-wrapper:nth-child(5) {
        top: 140px;
    }

    .sticky-wrapper:nth-child(6) {
        top: 150px;
    }

    .sticky-card {
        aspect-ratio: auto;
        min-height: 400px;
        padding: 2rem !important;
    }

    .sticky-card .section-paragraph {
        font-size: 1.2rem !important;
    }
}

/* =========================================
   PRELOADER (PULSING LOGO)
   ========================================= */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #F9F6EF;
    /* Cream background for warmth */
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;
}

#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

.preloader-logo {
    width: 140px;
    margin-bottom: 30px;
    animation: gentleFloat 3s ease-in-out infinite;
}

@keyframes gentleFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Playful Dots Animation */
.loader-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.dot-1 {
    background-color: #F08A84;
    animation: kidzBounce 0.6s infinite alternate;
    animation-delay: 0s;
}

/* Coral */
.dot-2 {
    background-color: #FFCF55;
    animation: kidzBounce 0.6s infinite alternate;
    animation-delay: 0.15s;
}

/* Yellow */
.dot-3 {
    background-color: #A6CF58;
    animation: kidzBounce 0.6s infinite alternate;
    animation-delay: 0.3s;
}

/* Lime */
.dot-4 {
    background-color: #4CB7A5;
    animation: kidzBounce 0.6s infinite alternate;
    animation-delay: 0.45s;
}

/* Teal */

@keyframes kidzBounce {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-20px);
    }
}

/* =========================================
   TEAM SECTION (LEADERS)
   ========================================= */

.team-card-leader {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 100%;
    /* Light Blue Gradient Background matching reference */
    background: linear-gradient(180deg, #DCEAF9 0%, #BCCFE4 100%);
    transition: transform 0.3s ease;
}

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

.team-leader-img {
    width: 100%;
    height: auto;
    display: block;
    mix-blend-mode: normal;
    transition: transform 0.5s ease;
}

.team-card-leader:hover .team-leader-img {
    transform: scale(1.05);
}

.team-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    /* Increased height for better text readability */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
    z-index: 1;
}

.team-info-wrapper {
    position: absolute;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 2;
    transform: translateY(15px);
    /* Start slightly down */
    transition: transform 0.4s ease;
}

.team-card-leader:hover .team-info-wrapper {
    transform: translateY(0);
}

.team-card-name {
    color: #FFCF55;
    /* Yellow matching reference */
    font-family: 'Parkinsans', sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    margin-bottom: 5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    display: block;
}

.team-card-role {
    color: #fff;
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.team-card-leader:hover .team-card-role {
    opacity: 1;
    max-height: 50px;
    /* Enough for 1-2 lines */
    margin-top: 5px;
}

/* =========================================
   EXPANDING GALLERY SECTION (Why Siora)
   ========================================= */
.expanding-gallery-section {
    background-color: #F9F6EF;
    padding: 80px 0;
}

.expanding-gallery-wrapper {
    display: flex;
    width: 100%;
    height: 500px;
    gap: 20px;
}

.expanding-card {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 30px;
    cursor: pointer;
    transition: flex 0.5s ease;
    overflow: hidden;
}

.expanding-card:hover {
    flex: 3;
}

.card-content-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0));
    color: #fff;
    transform: translateY(0);
    transition: all 0.3s ease;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}

.expanding-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    color: #fff;
}

.expanding-card p.card-desc {
    font-size: 1rem;
    line-height: 1.5;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    color: #f0f0f0;
}

.expanding-card:hover p.card-desc {
    opacity: 1;
    max-height: 200px;
    margin-top: 10px;
}

/* Mobile Responsiveness for Gallery */
@media (max-width: 991px) {
    .expanding-gallery-wrapper {
        flex-direction: column;
        height: auto;
    }

    .expanding-card {
        width: 100%;
        height: 300px;
        flex: none !important;
    }

    .expanding-card:hover {
        flex: none;
    }

    .expanding-card p.card-desc {
        opacity: 1;
        max-height: none;
        margin-bottom: 0;
    }
}

/* =========================================
   SAFETY ICON GRID SECTION
   ========================================= */
.safety-section {
    background-color: #F9F6EF;
    padding-bottom: 80px;
}

.safety-icon-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.safety-icon-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.safety-icon-img {
    height: 60px;
    width: auto;
    object-fit: contain;
    margin-bottom: 20px;
}

.safety-icon-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: #333;
    margin-bottom: 0;
    font-family: 'Parkinsans', sans-serif;
}

.bg-safety-orange {
    background-color: #EFA692;
    /* Salmon/Orange from image */
}

.bg-safety-green {
    background-color: #8DD688;
    /* Soft Green */
}

.bg-safety-blue {
    background-color: #88C1D6;
    /* Soft Blue */
}

.safety-card-img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 15px;
    margin-bottom: 20px;
}

.safety-card-body {
    padding: 0 10px 10px;
}

.safety-card-title {
    font-weight: 800;
    font-size: 1.25rem;
    margin-bottom: 10px;
    color: #000;
}

.safety-card-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #333;
    margin-bottom: 0;
}

/* Utility Class for hover scale effect */
.hover-scale {
    transition: transform 0.3s ease;
}

.hover-scale:hover {
    transform: scale(1.02);
}

/* =========================================
   PROMISE TIMELINE SECTION
   ========================================= */
.promise-timeline-container {
    position: relative;
    padding: 60px 0;
}

.promise-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background-image: linear-gradient(to right, #ccc 60%, rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 20px 3px;
    background-repeat: repeat-x;
    transform: translateY(-50%);
    z-index: 1;
    display: none;
}

@media (min-width: 992px) {
    .promise-line {
        display: block;
    }
}

.promise-item {
    position: relative;
    z-index: 5;
    text-align: center;
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.promise-circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.promise-circle:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.12);
}

.promise-circle h5 {
    font-size: 1rem;
    margin-top: 10px;
    line-height: 1.3;
}

/* Alternating Layout for Desktop */
@media (min-width: 992px) {
    .promise-item {
        margin-bottom: 0;
    }

    /* Top Items: sit ABOVE the central line */
    .promise-item.item-top {
        transform: translateY(-60px);
    }

    /* Bottom Items: sit BELOW the central line */
    .promise-item.item-bottom {
        transform: translateY(60px);
    }
}

.promise-wave-bg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 200px;
    /* Matches the amplitude logic */
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
    display: none;
}

@media (min-width: 992px) {
    .promise-wave-bg {
        display: block;
    }
}

/* Social Media Icons in Footer */
.social-icons-container {
    margin-top: 1.5rem;
}

.social-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-right: 10px;
}

.social-icon-btn:hover {
    color: #ffffff;
    transform: translateY(-3px);
}

.social-icon-btn.fb:hover {
    background-color: #3b5998;
}

.social-icon-btn.insta:hover {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.social-icon-btn.gmap:hover {
    background-color: #34a853;
}

.social-icon-btn.wa:hover {
    background-color: #25D366;
}

/* Dimensions of Development */
.dimension-card {
    transition: transform 0.3s ease;
}

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

.dimension-list li {
    margin-bottom: 0.8rem;
    font-size: 1.05rem;
    color: #444;
    font-weight: 600;
    display: flex;
    align-items: baseline;
}

.dimension-list li i {
    color: #555;
    margin-top: 2px;
}

/* =========================================
   DIAGRAM SVG
   ========================================= */

.diagram-container {
    max-width: 500px;
    width: 100%;
    position: relative;
    padding: 20px;
}

.development-diagram-svg {
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.1));
}

.segment {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    stroke: #F9F6EF;
    /* Matches background */
    stroke-width: 6px;
    transform-origin: center;
}

.segment:hover {
    transform: scale(1.05);
    filter: brightness(0.98);
    z-index: 10;
}

.segment-yellow {
    fill: #FFF9C4;
}

.segment-purple {
    fill: #E1BEE7;
}

.segment-green {
    fill: #C8E6C9;
}

.diagram-text {
    font-family: 'Parkinsans', sans-serif;
    font-weight: 700;
    font-size: 24px;
    pointer-events: none;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

@media (max-width: 576px) {
    .diagram-text {
        font-size: 18px;
    }
}

.text-yellow {
    fill: #F9A825;
    /* Dark Yellow/Orange */
}

.text-purple {
    fill: #7B1FA2;
    /* Deep Purple */
}

.text-green {
    fill: #2E7D32;
    /* Deep Green */
}

.center-circle-bg {
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.08));
}