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

 body {
     font-family: 'Quicksand', sans-serif;
     background: linear-gradient(135deg, #fef9f3 0%, #fdf4e7 100%);
     overflow-x: hidden;
     overflow-y: hidden;
 }

 /* ========================================
   NEW SECTIONS CSS - Add to your project
   Save as: new-sections.css
======================================== */


 .trail {
     position: fixed;
     pointer-events: none;
     font-size: 18px;
     opacity: 0;
     transform: translate(-50%, -50%) scale(0);
     transition: opacity 0.35s ease, transform 0.35s ease;
 }


 /* ========================================
   1. DAYCARE PROGRAMS SECTION
======================================== */

 .daycare-programs {
     padding: 120px 6%;
     background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
     position: relative;
     overflow: hidden;
 }

 .daycare-programs::before {
     content: '🎈';
     position: absolute;
     font-size: 200px;
     opacity: 0.1;
     top: 50px;
     left: -50px;
     animation: floatAround 20s infinite;
 }

 .daycare-programs::after {
     content: '⭐';
     position: absolute;
     font-size: 150px;
     opacity: 0.1;
     bottom: 50px;
     right: -30px;
     animation: floatAround 15s infinite reverse;
 }

 @keyframes floatAround {

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

     25% {
         transform: translate(30px, -30px) rotate(90deg);
     }

     50% {
         transform: translate(0, -60px) rotate(180deg);
     }

     75% {
         transform: translate(-30px, -30px) rotate(270deg);
     }
 }

 .daycare-programs-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
     gap: 50px;
     margin-top: 60px;
     position: relative;
     z-index: 2;
 }

 .daycare-program-card {
     background: white;
     border-radius: 40px;
     overflow: hidden;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
     transition: all 0.5s ease;
     position: relative;
 }

 .daycare-program-card:hover {
     transform: translateY(-15px) scale(1.02);
     box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
 }

 .daycare-program-header {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     padding: 50px 40px 40px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .daycare-program-header::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
     animation: rotateGradient 15s linear infinite;
 }

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

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

 .daycare-program-icon {
     font-size: 80px;
     margin-bottom: 20px;
     display: inline-block;
     filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.3));
     position: relative;
     z-index: 1;
 }

 .daycare-program-header h3 {
     font-size: 36px;
     color: white;
     margin-bottom: 15px;
     position: relative;
     z-index: 1;
 }

 .daycare-program-badge {
     display: inline-block;
     padding: 10px 25px;
     background: linear-gradient(135deg, #ffd93d 0%, #ffaa00 100%);
     color: #333;
     border-radius: 25px;
     font-weight: bold;
     font-size: 14px;
     box-shadow: 0 5px 15px rgba(255, 217, 61, 0.5);
     position: relative;
     z-index: 1;
 }

 .badge-secondary {
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
 }

 .daycare-program-content {
     padding: 45px 40px;
 }

 .daycare-program-time {
     background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     padding: 20px 30px;
     border-radius: 20px;
     text-align: center;
     margin-bottom: 30px;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
 }

 .time-icon {
     font-size: 30px;
 }

 .daycare-program-time strong {
     font-size: 18px;
     color: #2e7d32;
 }

 .daycare-program-desc {
     font-size: 17px;
     line-height: 1.8;
     color: #555;
     margin-bottom: 35px;
 }

 .daycare-program-features h4 {
     font-size: 22px;
     color: #667eea;
     margin-bottom: 25px;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .daycare-program-features h4::before {
     content: '✨';
     font-size: 24px;
 }

 .daycare-program-features ul {
     list-style: none;
     margin-bottom: 35px;
 }

 .daycare-program-features li {
     display: flex;
     align-items: flex-start;
     gap: 20px;
     padding: 20px;
     margin-bottom: 15px;
     background: #f8f9fa;
     border-radius: 18px;
     transition: all 0.3s ease;
 }

 .daycare-program-features li:hover {
     background: #e8eaf6;
     transform: translateX(10px);
 }

 .feature-icon {
     font-size: 32px;
     flex-shrink: 0;
     filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
 }

 .daycare-program-features li strong {
     display: block;
     font-size: 16px;
     color: #333;
     margin-bottom: 5px;
 }

 .daycare-program-features li p {
     font-size: 14px;
     color: #666;
     margin: 0;
 }

 .daycare-program-pricing {
     text-align: center;
     padding: 30px;
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     border-radius: 20px;
     margin-bottom: 30px;
 }

 .price {
     display: block;
     font-size: 42px;
     font-weight: bold;
     color: #e65100;
     margin-bottom: 8px;
 }

 .price-note {
     font-size: 16px;
     color: #666;
 }

 .daycare-program-btn {
     width: 100%;
     padding: 18px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border: none;
     border-radius: 30px;
     font-size: 18px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
 }

 .daycare-program-btn:hover {
     transform: scale(1.05);
     box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
 }

 /* ========================================
   2. WHY CHOOSE US SECTION
======================================== */

 .why-choose-us {
     padding: 120px 6%;
     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
     position: relative;
     overflow: hidden;
 }

 .why-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=1200') center/cover;
     opacity: 0.08;
     z-index: 0;
 }

 .why-choose-content {
     position: relative;
     z-index: 1;
 }

 .why-features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 35px;
     margin-top: 50px;
 }

 .why-feature-card {
     background: white;
     padding: 40px 35px;
     border-radius: 30px;
     text-align: center;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
 }

 .why-feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 5px;
     background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

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

 .why-feature-card:hover {
     transform: translateY(-15px) scale(1.05);
     box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25);
 }

 .why-icon {
     font-size: 70px;
     margin-bottom: 25px;
     display: inline-block;
     filter: drop-shadow(0 8px 15px rgba(0, 0, 0, 0.2));
     transition: all 0.3s ease;
 }

 .why-feature-card:hover .why-icon {
     transform: scale(1.2) rotate(10deg);
 }

 .why-feature-card h3 {
     font-size: 24px;
     color: #667eea;
     margin-bottom: 15px;
     font-weight: 700;
 }

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

 /* ========================================
   3. FOUNDER SECTION
======================================== */

 .founder-section {
     padding: 120px 6%;
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
     position: relative;
     overflow: hidden;
 }

 .founder-section::before {
     content: '💝';
     position: absolute;
     font-size: 250px;
     opacity: 0.08;
     top: 100px;
     right: -50px;
     animation: pulse 3s ease-in-out infinite;
 }

 @keyframes pulse {

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

     50% {
         transform: scale(1.1);
         opacity: 0.12;
     }
 }

 .founder-container {
     display: grid;
     grid-template-columns: 450px 1fr;
     gap: 80px;
     align-items: start;
     max-width: 1400px;
     margin: 0 auto;
     background: white;
     padding: 60px;
     border-radius: 40px;
     box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
     position: relative;
     z-index: 1;
 }

 .founder-image-wrapper {
     position: relative;
 }

 .founder-image-decoration {
     position: absolute;
     top: -20px;
     left: -20px;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     border-radius: 40px;
     z-index: 0;
 }

 .founder-image {
     width: 100%;
     height: 550px;
     object-fit: cover;
     border-radius: 40px;
     position: relative;
     z-index: 1;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
 }

 .founder-quote-bubble {
     position: absolute;
     bottom: 30px;
     right: -30px;
     background: linear-gradient(135deg, #ffd93d 0%, #ffaa00 100%);
     padding: 20px 30px;
     border-radius: 30px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
     z-index: 2;
     animation: bounce 2s ease-in-out infinite;
 }

 @keyframes bounce {

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

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

 .founder-quote-bubble p {
     margin: 0;
     font-size: 18px;
     font-weight: bold;
     color: #333;
 }

 .founder-content {
     padding-top: 20px;
 }

 .founder-title {
     font-size: 20px;
     color: #667eea;
     font-weight: 600;
     margin-bottom: 30px;
     display: block;
 }

 .founder-story p {
     font-size: 17px;
     line-height: 1.9;
     color: #555;
     margin-bottom: 25px;
     text-align: justify;
 }

 .founder-story p strong {
     color: #667eea;
     font-size: 19px;
 }

 .founder-credentials {
     display: grid;
     grid-template-columns: 1fr;
     gap: 20px;
     margin: 40px 0;
     padding: 35px;
     background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     border-radius: 25px;
     border-left: 5px solid #4caf50;
 }

 .credential-item {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .credential-icon {
     font-size: 45px;
     flex-shrink: 0;
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
 }

 .credential-item strong {
     display: block;
     font-size: 18px;
     color: #2e7d32;
     margin-bottom: 5px;
 }

 .credential-item p {
     margin: 0;
     font-size: 15px;
     color: #555;
 }

 .founder-closing {
     font-style: italic;
     background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
     padding: 25px 30px;
     border-radius: 20px;
     border-left: 5px solid #ff9800;
 }

 .founder-signature {
     margin-top: 40px;
     text-align: right;
 }

 /* ========================================
   4. VIDEO SHOWCASE SECTION
======================================== */

 .video-showcase {
     padding: 120px 6%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .video-showcase::before {
     content: '🎬';
     position: absolute;
     font-size: 300px;
     opacity: 0.05;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
 }

 .video-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
     margin-top: 60px;
     position: relative;
     z-index: 1;
 }

 .video-main {
     grid-column: span 2;
 }

 .video-card {
     background: white;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
     transition: all 0.4s ease;
 }

 .video-card:hover {
     transform: translateY(-15px) scale(1.03);
     box-shadow: 0 35px 90px rgba(0, 0, 0, 0.5);
 }

 .video-wrapper {
     position: relative;
     width: 100%;
     padding-bottom: 56.25%;
     /* 16:9 aspect ratio */
     background: #000;
     overflow: hidden;
 }

 .video-wrapper video {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .video-info {
     padding: 30px;
     text-align: center;
 }

 .video-info h3 {
     font-size: 24px;
     color: #333;
     margin-bottom: 12px;
 }

 .video-info p {
     font-size: 16px;
     color: #666;
     margin: 0;
 }

 /* ========================================
   MOBILE RESPONSIVE - NEW SECTIONS
======================================== */

 @media (max-width: 1024px) {
     .daycare-programs-grid {
         grid-template-columns: 1fr;
     }

     .founder-container {
         grid-template-columns: 1fr;
         gap: 50px;
         padding: 40px;
     }

     .founder-image-wrapper {
         order: -1;
     }

     .founder-image {
         height: 450px;
     }

     .video-main {
         grid-column: span 1;
     }
 }

 @media (max-width: 768px) {

     .daycare-programs,
     .why-choose-us,
     .founder-section,
     .video-showcase {
         padding: 80px 5%;
     }

     .daycare-programs-grid {
         grid-template-columns: 1fr;
         gap: 35px;
     }

     .daycare-program-card {
         border-radius: 30px;
     }

     .daycare-program-header {
         padding: 40px 30px 30px;
     }

     .daycare-program-icon {
         font-size: 60px;
     }

     .daycare-program-header h3 {
         font-size: 28px;
     }

     .daycare-program-content {
         padding: 30px 25px;
     }

     .daycare-program-features li {
         padding: 15px;
     }

     .feature-icon {
         font-size: 28px;
     }

     .price {
         font-size: 36px;
     }

     .why-features-grid {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .why-feature-card {
         padding: 30px 25px;
     }

     .why-icon {
         font-size: 55px;
     }

     .founder-container {
         padding: 30px;
         border-radius: 30px;
     }

     .founder-image {
         height: 400px;
     }

     .founder-quote-bubble {
         right: 20px;
         bottom: 20px;
         padding: 15px 20px;
     }

     .founder-quote-bubble p {
         font-size: 16px;
     }

     .founder-story p {
         font-size: 16px;
     }

     .credential-icon {
         font-size: 35px;
     }

     .video-grid {
         grid-template-columns: 1fr;
         gap: 30px;
     }
 }

 @media (max-width: 480px) {

     .daycare-programs,
     .why-choose-us,
     .founder-section,
     .video-showcase {
         padding: 60px 4%;
     }

     .daycare-program-header h3 {
         font-size: 24px;
     }

     .daycare-program-icon {
         font-size: 50px;
     }

     .daycare-program-content {
         padding: 25px 20px;
     }

     .price {
         font-size: 32px;
     }

     .founder-container {
         padding: 20px;
     }

     .founder-image {
         height: 350px;
         border-radius: 25px;
     }

     .founder-credentials {
         padding: 25px 20px;
     }

     .credential-item {
         flex-direction: column;
         text-align: center;
     }
 }

 .hero-video {
     width: 100%;
     height: 100vh;
     object-fit: cover;
     display: block;
 }

 /* ===== VISION & MISSION RESPONSIVE FIX ===== */

 @media (max-width: 768px) {

     /* Section spacing */
     .programs {
         padding: 60px 0;
     }

     /* Title area */
     .programs .section-title {
         font-size: 2rem;
     }

     .programs .section-subtitle {
         font-size: 0.95rem;
     }

     /* Grid → Stack */
     .programs>div[style*="grid-template-columns"] {
         grid-template-columns: 1fr !important;
         gap: 24px !important;
         padding: 0 16px !important;
     }

     /* Cards */
     .programs article {
         padding: 28px !important;
         border-radius: 16px !important;
     }

     /* Icons */
     .programs article div[aria-hidden="true"] {
         font-size: 36px !important;
         margin-bottom: 12px !important;
     }

     /* Headings */
     .programs article h3 {
         font-size: 1.35rem !important;
     }

     /* Paragraph text */
     .programs article p {
         font-size: 0.95rem;
         line-height: 1.7;
     }
 }

 /* Hero with Video Background */
 .hero {
     position: relative;
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     color: white;
 }

 .hero-video {
     position: absolute;
     top: 50%;
     left: 50%;
     min-width: 100%;
     min-height: 100%;
     width: auto;
     height: auto;
     transform: translate(-50%, -50%);
     z-index: 0;
     object-fit: cover;
 }

 .hero-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     z-index: 1;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     text-align: center;
     padding: 0 5%;
     max-width: 900px;
 }

 .hero h1 {
     font-size: 56px;
     margin-bottom: 25px;
     text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.4);
     animation: fadeInUp 1s ease;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 .hero h1 .highlight {
     color: #ffd93d;
     display: inline-block;
     animation: wiggle 1.5s ease infinite;
 }

 @keyframes wiggle {

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

     50% {
         transform: rotate(2deg);
     }
 }

 .hero-text {
     font-size: 22px;
     margin-bottom: 35px;
     text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.3);
     animation: fadeInUp 1.2s ease;
 }

 .cta-btn {
     background: linear-gradient(135deg, #ffd93d 0%, #ffaa00 100%);
     color: #333;
     padding: 18px 45px;
     font-size: 20px;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     font-weight: bold;
     box-shadow: 0 8px 25px rgba(255, 217, 61, 0.5);
     transition: all 0.3s ease;
     animation: fadeInUp 1.4s ease;
 }

 .cta-btn:hover {
     transform: translateY(-5px) scale(1.05);
     box-shadow: 0 12px 35px rgba(255, 217, 61, 0.7);
 }

 /* About Section with Background Image */
 .about {
     position: relative;
     padding: 100px 5%;
     overflow: hidden;
 }

 .about-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://images.unsplash.com/photo-1544776193-352d25ca82cd?w=1200') center/cover;
     z-index: 0;
     opacity: 0.15;
 }

 .about-content {
     position: relative;
     z-index: 1;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 60px;
     align-items: center;
     background: rgba(255, 255, 255, 0.95);
     padding: 60px;
     border-radius: 30px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
 }

 .section-subtitle {
     font-size: 16px;
     color: #ff6b6b;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 15px;
     letter-spacing: 2px;
 }

 .section-title {
     font-size: 42px;
     color: #667eea;
     margin-bottom: 25px;
     line-height: 1.3;
 }

 .section-title-2 {
     font-size: 26px;
     color: #6875af;
     margin-bottom: 20px;
     line-height: 1.3;
 }

 .section-text {
     font-size: 18px;
     line-height: 1.8;
     color: #555;
     margin-bottom: 30px;
 }

 .about-image img {
     width: 100%;
     border-radius: 25px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     animation: floatImage 4s ease-in-out infinite;
 }

 @keyframes floatImage {

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

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

 .about-list {
     list-style: none;
 }



 /* =====================================
   CTA 🚀
===================================== */

 .cta-section {
     padding: 140px 8%;
     background: linear-gradient(135deg, var(--pink), var(--yellow));
     text-align: center;
 }

 .cta-title {
     font-size: 44px;
     margin-bottom: 22px;
 }

 .cta-description {
     font-size: 18px;
     margin-bottom: 35px;
 }

 .about-list li {
     padding: 15px 20px;
     margin: 12px 0;
     background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
     border-radius: 15px;
     display: flex;
     align-items: center;
     gap: 15px;
     transition: all 0.3s ease;
     font-weight: 600;
     color: #333;
 }

 .about-list li:hover {
     transform: translateX(10px);
     box-shadow: 0 5px 20px rgba(76, 175, 80, 0.3);
 }

 .about-list li::before {
     content: '✓';
     width: 35px;
     height: 35px;
     background: linear-gradient(135deg, #4caf50 0%, #8bc34a 100%);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: bold;
     font-size: 18px;
     flex-shrink: 0;
 }

 /* Programs Section */
 .programs {
     background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
     padding: 100px 5%;
     position: relative;
 }

 .program-grid {
     display: grid;
     grid-template-columns: repeat(2, minmax(420px, 1fr));
     gap: 35px;
     margin-top: 60px;
 }

 .program-grid-2 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 35px;
     margin-top: 60px;
 }

 .program-card {
     background: white;
     border-radius: 25px;
     padding: 40px 30px;
     text-align: center;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
     transition: all 0.4s ease;
     position: relative;
     overflow: hidden;
 }

 .program-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.6s ease;
 }

 .program-card:hover::before {
     left: 100%;
 }

 .program-card:hover {
     transform: translateY(-15px) scale(1.03);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
 }

 .program-icon {
     font-size: 65px;
     margin-bottom: 25px;
     display: inline-block;
     filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
 }

 .program-card h3 {
     font-size: 24px;
     color: #667eea;
     margin-bottom: 15px;
     font-weight: 700;
 }

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

 .badge {
     display: inline-block;
     padding: 8px 18px;
     background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
     color: white;
     border-radius: 20px;
     font-size: 13px;
     font-weight: bold;
     margin-top: 20px;
 }

 .badge-c {
     display: inline-block;
     padding: 8px 18px;
     background: linear-gradient(135deg, #fa7d00 0%, #e4832f 100%);
     color: rgb(255, 255, 255);
     border-radius: 20px;
     font-size: 13px;
     font-weight: bold;
     margin-top: 20px;
 }

 .program-image{
    width: 60%;
    align-items: center;
    margin: 10px auto;
 }

 .program-image img{
    width: 100%;
 }

 /* Why Choose Section with Background */
 .why-choose {
     position: relative;
     padding: 100px 5%;
     overflow: hidden;
 }

 .why-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: url('https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=1200') center/cover;
     z-index: 0;
     opacity: 0.1;
 }

 .why-choose-content {
     position: relative;
     z-index: 1;
 }

 .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 35px;
     margin-top: 60px;
 }

 .feature-box {
     background: linear-gradient(135deg, #fff16fff 0%, rgba(255, 236, 63, 1) 100%);
     padding: 45px 35px;
     border-radius: 25px;
     text-align: center;
     color: white;
     box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
     transition: all 0.4s ease;
 }

 .feature-box:hover {
     transform: translateY(-12px) rotate(2deg);
     box-shadow: 0 20px 50px rgba(102, 126, 234, 0.5);
 }

 .feature-icon {
     font-size: 55px;
     margin-bottom: 20px;
     filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
 }

 .feature-box h3 {
     font-size: 22px;
     margin-bottom: 15px;
 }

 .feature-box p {
     line-height: 1.6;
     opacity: 0.95;
 }

 /* Daycare Programs */
 .daycare {
     background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
     padding: 100px 5%;
 }

 .daycare-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 45px;
     margin-top: 60px;
 }

 .daycare-card {
     background: white;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
     transition: all 0.4s ease;
 }

 .daycare-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
 }

 .daycare-header {
     height: 180px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
 }

 .daycare-header::before {
     content: '';
     position: absolute;
     width: 200%;
     height: 200%;
     background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
     animation: rotate 10s linear infinite;
 }

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

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

 .daycare-badge {
     background: rgba(255, 255, 255, 0.95);
     color: #667eea;
     padding: 12px 28px;
     border-radius: 30px;
     font-weight: bold;
     font-size: 18px;
     position: relative;
     z-index: 1;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
 }

 .daycare-content {
     padding: 35px;
 }

 .daycare-tag {
     display: inline-block;
     padding: 8px 18px;
     background: #e8f5e9;
     color: #4caf50;
     border-radius: 20px;
     font-size: 13px;
     font-weight: bold;
     margin-bottom: 15px;
 }

 .daycare-content h3 {
     font-size: 26px;
     color: #333;
     margin-bottom: 18px;
 }

 .daycare-content p {
     color: #666;
     line-height: 1.7;
     margin-bottom: 15px;
 }

 .daycare-time {
     color: #ff6b6b;
     font-weight: bold;
     margin: 20px 0;
     font-size: 17px;
 }

 .daycare-list {
     list-style: none;
     margin-top: 25px;
 }

 .daycare-list li {
     padding: 10px 0;
     padding-left: 30px;
     position: relative;
     color: #555;
     font-weight: 500;
 }

 .daycare-list li::before {
     content: '★';
     position: absolute;
     left: 0;
     color: #ffd93d;
     font-size: 18px;
 }

 /* Video Section */
 .video-section {
     padding: 100px 5%;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

 .video-container {
     max-width: 1100px;
     margin: 0 auto;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 25px 70px rgba(0, 0, 0, 0.5);
     position: relative;
 }

 .video-container video {
     width: 100%;
     display: block;
 }

 /* Mission Section */
 .mission {
     padding: 100px 5%;
     background: white;
 }

 .mission-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
     gap: 35px;
     margin-top: 60px;
 }

 .mission-card {
     background: white;
     border-radius: 30px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
     transition: all 0.4s ease;
 }

 .mission-card:hover {
     transform: translateY(-12px);
     box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
 }

 .mission-card img {
     width: 100%;
     height: 280px;
     object-fit: cover;
 }

 .mission-content {
     padding: 35px;
 }

 .mission-card h3 {
     font-size: 26px;
     color: #667eea;
     margin-bottom: 18px;
 }

 .mission-card p {
     color: #666;
     line-height: 1.8;
     margin-bottom: 15px;
 }

 .founder {
     color: #ff6b6b;
     font-weight: bold;
     font-style: italic;
     margin-top: 25px;
     display: block;
 }

 .mission-card.dark {
     background: linear-gradient(135deg, #2d3436 0%, #000000 100%);
     color: white;
     display: flex;
     align-items: center;
     justify-content: center;
     min-height: 400px;
 }

 .mission-card.dark h3 {
     color: #ffd93d;
 }

 .mission-card.dark p {
     color: white;
 }

 /* Stats Section */
 .stats {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     padding: 80px 5%;
     color: white;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 35px;
     margin-top: 50px;
 }

 .stat-box {
     text-align: center;
     padding: 40px 30px;
     background: rgba(255, 255, 255, 0.15);
     border-radius: 25px;
     backdrop-filter: blur(15px);
     transition: all 0.4s ease;
     border: 2px solid rgba(255, 255, 255, 0.2);
 }

 .stat-box:hover {
     transform: scale(1.1) rotate(-2deg);
     background: rgba(255, 255, 255, 0.25);
     border-color: rgba(255, 255, 255, 0.4);
 }

 .stat-number {
     font-size: 52px;
     font-weight: bold;
     margin-bottom: 12px;
     text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
 }

 .stat-label {
     font-size: 17px;
     opacity: 0.95;
 }

 /* =====================================
   TEACHERS 🧑‍🏫
===================================== */

 .teachers-section {
     padding: 130px 8%;
     background: linear-gradient(135deg, var(--sky), #ffffff);
 }

 .teachers-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 45px;
 }

 .teacher-card {
     background: white;
     border-radius: 35px;
     overflow: hidden;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
     transition: transform 0.4s ease;
 }

 .teacher-card:hover {
     transform: translateY(-14px);
 }

 .teacher-photo {
     width: 100%;
     height: 320px;
     object-fit: cover;
 }

 .teacher-info {
     padding: 28px;
     text-align: center;
 }

 /* ================= KID FOOTER ================= */

 .kid-footer {
     position: relative;
     background: linear-gradient(135deg, #bde0fe, #caffbf);
     padding: 120px 8% 40px;
     overflow: hidden;
 }

 /* Cloud shape */
 .footer-cloud {
     position: absolute;
     top: -60px;
     left: 0;
     width: 100%;
     height: 120px;
     background: #fff;
     border-bottom-left-radius: 100% 60%;
     border-bottom-right-radius: 100% 60%;
 }

 /* Layout */
 .footer-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 50px;
     position: relative;
     z-index: 2;
 }

 .footer-box h3 {
     font-size: 26px;
     margin-bottom: 18px;
 }

 .footer-box h4 {
     font-size: 20px;
     margin-bottom: 18px;
 }

 .footer-box p,
 .footer-box a {
     font-size: 16px;
     line-height: 1.7;
     color: #333;
     text-decoration: none;
     display: block;
     margin-bottom: 10px;
 }

 .footer-box a:hover {
     color: #ff6b6b;
 }

 /* Social icons */
 .footer-social {
     display: flex;
     gap: 12px;
     margin-top: 15px;
 }

 .footer-social a {
     width: 42px;
     height: 42px;
     background: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
 }

 .footer-social a:hover {
     transform: scale(1.2) rotate(10deg);
 }

 /* Bottom bar */
 .footer-bottom {
     margin-top: 60px;
     text-align: center;
     padding-top: 20px;
     border-top: 2px dashed rgba(0, 0, 0, 0.15);
 }

 .footer-bottom p {
     font-size: 14px;
     color: #555;
 }

 /* Mobile */
 @media (max-width: 600px) {
     .kid-footer {
         padding: 90px 6% 30px;
     }

     .footer-box h3 {
         font-size: 22px;
     }
 }

 /* ================= CARTOON ANIMALS 🧸 ================= */

 .footer-animals {
     position: absolute;
     bottom: -10px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 30px;
     z-index: 3;
 }

 .animal {
     font-size: 60px;
     transform: translateY(40%);
     transition: transform 0.4s ease;
     cursor: pointer;
 }

 /* Peek effect */
 .animal:hover {
     transform: translateY(0);
 }

 /* Idle bounce (soft) */
 .animal {
     animation: animalBounce 4s ease-in-out infinite;
 }

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

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

 .animal:nth-child(4) {
     animation-delay: 3s;
 }

 @keyframes animalBounce {

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

     50% {
         transform: translateY(30%);
     }
 }

 @media (max-width: 600px) {
     .footer-animals {
         gap: 18px;
     }

     .animal {
         font-size: 42px;
     }

     .cloud {
         font-size: 50px;
     }
 }



 /* Cursor Trail */
 .trail {
     position: fixed;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     pointer-events: none;
     opacity: 0;
     transition: opacity 0.3s;
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
 }

 /* Back to Top */
 .back-to-top {
     position: fixed;
     bottom: 35px;
     right: 35px;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 26px;
     cursor: pointer;
     box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
     opacity: 0;
     transition: all 0.4s ease;
     z-index: 1000;
 }

 .back-to-top.visible {
     opacity: 1;
 }

 .back-to-top:hover {
     transform: translateY(-8px) scale(1.1);
     box-shadow: 0 12px 35px rgba(102, 126, 234, 0.7);
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .hero h1 {
         font-size: 46px;
     }

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

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

 @media (max-width: 768px) {
     .burger {
         display: flex;
     }

     .nav-menu {
         position: fixed;
         top: 80px;
         right: -100%;
         width: 280px;
         height: calc(100vh - 80px);
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         flex-direction: column;
         padding: 40px 30px;
         box-shadow: -5px 0 25px rgba(0, 0, 0, 0.3);
         transition: right 0.4s ease;
     }

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

     .nav-menu a {
         width: 100%;
         text-align: left;
         padding: 15px 20px;
         background: rgba(255, 255, 255, 0.1);
         border-left: 4px solid transparent;
     }

     .nav-menu a:hover {
         border-left-color: #ffd93d;
         background: rgba(255, 255, 255, 0.2);
     }

     .download-btn {
         display: none;
     }

     .hero h1 {
         font-size: 36px;
     }

     .hero-text {
         font-size: 18px;
     }

     .cta-btn {
         padding: 15px 35px;
         font-size: 18px;
     }

     .about-content {
         padding: 40px 30px;
     }

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

     .program-icon,
     .feature-icon {
         font-size: 50px;
     }

     .stat-number {
         font-size: 42px;
     }
 }

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

     .hero-text {
         font-size: 16px;
     }

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

     .about-content {
         padding: 25px 20px;
     }

     .back-to-top {
         width: 50px;
         height: 50px;
         font-size: 22px;
     }
 }

 /* =========================
   NEW SECTIONS (ADDED ONLY)
========================= */

 /* Gallery */
 .gallery {
     padding: 100px 5%;
     background: #fff;
 }

 .gallery-grid {
     margin-top: 60px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: 25px;
 }

 .gallery-item {
     border-radius: 25px;
     overflow: hidden;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
     transition: transform 0.4s ease;
 }

 .gallery-item img {
     width: 100%;
     height: 320px;
     object-fit: cover;
 }

 .gallery-item:hover {
     transform: scale(1.08);
 }

 /* Daily Schedule */
 .schedule {
     padding: 100px 5%;
     background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
 }

 .schedule-timeline {
     margin-top: 60px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 25px;
 }

 .time-box {
     background: white;
     padding: 25px;
     text-align: center;
     font-weight: bold;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     transition: transform 0.3s ease;
 }

 .time-box:hover {
     transform: translateY(-10px);
 }

 /* Testimonials */
 .testimonials {
     padding: 100px 5%;
     background: #f9f9f9;
 }

 .testimonial-grid {
     margin-top: 60px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
 }

 .testimonial-card {
     background: white;
     padding: 40px;
     border-radius: 30px;
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
     font-size: 18px;
     line-height: 1.7;
 }

 .testimonial-video video {
     width: 100%;
     border-radius: 30px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
 }

 /* Events */
 .events {
     padding: 100px 5%;
     background: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
 }

 .events-grid {
     margin-top: 60px;
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 25px;
 }

 .event-card {
     background: linear-gradient(135deg, #667eea, #764ba2);
     color: white;
     padding: 40px;
     text-align: center;
     border-radius: 25px;
     font-size: 20px;
     font-weight: bold;
     transition: transform 0.4s ease;
 }

 .event-card:hover {
     transform: scale(1.1);
 }

 /* Admissions CTA */
 .admissions-cta {
     padding: 100px 5%;
     text-align: center;
     background-image: url('https://images.unsplash.com/photo-1503676260728-1c00da094a0b?w=1200');
     background-size: cover;
     background-position: center;
     color: white;
 }

 .admissions-cta h2 {
     font-size: 48px;
     margin-bottom: 20px;
 }

 .admissions-cta p {
     font-size: 20px;
     margin-bottom: 30px;
 }