/* ==========================================================================
   MODERN RESPONSIVE CSS MEDIA QUERIES
   ========================================================================== */

/* Base styles (Mobile First - 320px+) */

/* ==========================================================================
   BREAKPOINT VARIABLES (for reference)
   ========================================================================== */
/*
  xs: 0px (default - mobile first)
  sm: 576px (small devices)
  md: 768px (tablets)
  lg: 992px (laptops)
  xl: 1200px (desktops)
  xxl: 1400px (large desktops)
*/

/* ==========================================================================
   SMALL DEVICES (Landscape phones, 576px and up)
   ========================================================================== */
@media (max-width: 576px) {


 
}

/* ==========================================================================
   MEDIUM DEVICES (Tablets, 768px and up)
   ========================================================================== */
@media (min-width: 768px) {

}

/* ==========================================================================
   LARGE DEVICES (Laptops/Desktops, 992px and up)
   ========================================================================== */
@media (min-width: 992px) {


}

/* ==========================================================================
   EXTRA LARGE DEVICES (Large Desktops, 1200px and up)
   ========================================================================== */
@media (min-width: 1200px) {


}

/* ==========================================================================
   EXTRA EXTRA LARGE DEVICES (Large Desktops, 1400px and up)
   ========================================================================== */
@media (min-width: 1400px) {

}

/* ==========================================================================
   CUSTOM BREAKPOINTS
   ========================================================================== */

/* Ultra-wide screens (1600px+) */
@media (min-width: 1600px) {

}

/* ==========================================================================
   DEVICE-SPECIFIC QUERIES
   ========================================================================== */

/* Tablets in portrait mode */
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {

}

/* Tablets in landscape mode */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
  
}

/* Mobile landscape */
@media (max-width: 767px) {
    .hero .heading{
              padding: 1rem;
    border-radius: 20px;
    background: rgba(3, 2, 2, 0.3);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    }
  
    .floating-star-two {
  left: -3%;
  top: 80%;

}
    .play-school-card{
        padding-bottom: 1rem;
    }
    .custom-accordion .accordion-button{
        font-size: 1rem !important;
    }
    .child-development{
        padding-top: 3rem;
    }
    .hero{
        padding-bottom: 7rem;
    }
    .child-programe {

  animation: snakeWaveBg 10s ease-in-out infinite alternate!important;
}
    .custom-slide{
        flex-shrink: unset !important;
    }
    .site-footer .footer-heading {
        font-size: 2rem;
    }

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

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

    .programe-title {
        font-size: 2rem;
    }

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

    .parents-confident .pt-4 {
        padding-top: 0 !important;
    }

    .parents-confident .section-title {
        font-size: 1.8rem;
    }

    main {
        overflow-x: hidden;
    }

    .play-img {
        position: relative;
        width: 260px;
    }

    .play-school .heading h2 {
        font-size: 1.8rem;
        margin-bottom: 0;
        padding-bottom: 1.8rem;
    }

    .highlight-teal {
        font-size: 2rem;
    }

    .dev-card .card-title {
        font-size: 2rem;
    }

    .hero {
        background-position: 80%;
    }

    .child-development .section-title {
        font-size: 1.8rem;
    }

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

    .contact-btn {
        height: 2.5rem;
        font-size: 0.8rem;
    }

    /* ── Testimonial Slider – Mobile ── */

    /* Prevent slider from causing horizontal scroll */
    .testimonial {
        overflow-x: hidden;
    }

    .custom-slider-container {
        padding: 0;
        overflow: visible;
    }

    .testimonial-card {
        padding: 1.5rem 1.25rem;
        border-radius: 16px;
        max-width: 100%;
    }

    /* Stack image on top, centre it */
    .testimonial-card .col-md-5 {
        display: flex;
        justify-content: center;
        margin-bottom: 1rem;
    }

    /* Give the text column a normal top margin when stacked */
    .testimonial-card .col-md-7 {
        margin-top: 0 !important;
    }

    .testimonial-img-box {
        transform: none;
        display: inline-block;
        padding: 6px;
        max-width: 180px;
        width: 100%;
    }

    .testimonial-img {
        width: 100%;
        border-radius: 12px;
    }

    /* Name badge: take out of absolute flow so it doesn't clip */
    .testimonial-name {
        position: static;
        transform: none;
        display: block;
        margin-top: 8px;
        font-size: 0.85rem;
        padding: 6px 16px;
        text-align: center;
    }

    .testimonial-quote {
        font-size: 1rem;
    }

    /* Hide side arrow buttons on mobile — use dots instead */
    .custom-control-prev,
    .custom-control-next {
        display: none !important;
    }

    /* Larger, more tappable dots */
    .custom-indicators {
        margin-top: 20px;
    }

    .custom-indicators button {
        width: 8px;
        height: 8px;
        border-radius: 50%;
    }

    .custom-indicators button.active {
        width: 24px;
        border-radius: 10px;
    }
}

/* ── Testimonial Slider – Tablet (768px – 991px) ── */
@media (min-width: 768px) and (max-width: 991px) {

    /* Prevent horizontal overflow from arrows */
    .testimonial {
        overflow-x: hidden;
    }

    /* Shrink slider width to leave room for arrows inside the viewport */
    .custom-slider-container {
        max-width: 100%;
        padding: 0 60px;   /* leaves space for the arrow buttons */
    }

    .testimonial-card {
        padding: 2rem 1.5rem;
        max-width: 100%;
    }

    .testimonial-img-box {
        transform: rotate(-2deg);
    }

    /* Reposition arrows to stay inside the padded container */
    .custom-control-prev {
        left: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .custom-control-next {
        right: 0;
        margin-right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    .testimonial-quote {
        font-size: 1.1rem;
    }

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

/* ==========================================================================
   HIGH DPI / RETINA DISPLAYS
   ========================================================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
 
}

/* ==========================================================================
   PREFER REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}




/* ==========================================================================
   CONTAINER QUERIES (Modern browsers)
   ========================================================================== */
@container (min-width: 400px) {

}

@container (min-width: 600px) {

}