/*.floating-card {
  position: absolute;
  width: fit-content;
  z-index: 5; /* This keeps the card ON TOP of the image
  border: 1px solid rgba(0,0,0,0.05); /* Very subtle border
  border-radius:12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0,0,0,0.03);
  padding: 10px;
} */


/* Position each card specifically relative to the girl */

/* --- Desktop Styling (992px and up) --- */
/* Wide Desktop Navbar */
@media (min-width: 992px) {
    .custom-navbar {
        background-color: #ffffff !important; /* Pure White */
        border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* Very subtle separator */
        padding: 15px 0; /* Vertical breathing room */
        border-radius: 0; /* Removes the pill shape for a standard wide look */

    }

    /* Adjusting link colors for white background */
    .nav-link {
        color: #333333 !important; /* Dark grey for readability */
        font-weight: 500;
        font-family: 'Outfit', sans-serif;
        margin: 0 15px;
    }

    .nav-link:hover {
        color: #e91e63 !important; /* Brand Pink on hover */
    }
}



/* Navbar Action Buttons */
.btn-outline-pink {
    border: 2px solid #e91e63;
    color: #e91e63;
    border-radius: 50px;
    padding: 8px 25px;
    font-weight: 700;
    transition: all 0.3s ease;
    margin-right: 5px;
}

.btn-solid-pink {
    background-color: #e91e63;
    color: #ffffff;
    border-radius: 50px;
    padding: 10px 25px;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(233, 30, 99, 0.2);
}

/* Container for the text */
.logo-text-wrapper {
    border-color: #eee !important; /* Subtle divider line */
    line-height: 1;
    padding-left: 5px;
}

/* "ScratchUp" Styling */
.brand-name-main {
    font-family: 'Outfit', sans-serif;
    font-weight: 750;
    font-size: 1.8rem;
    color: #e91e63; /* Brand Pink */
    letter-spacing: -0.5px;
}

.up-text {
    font-weight: 400; /* Lighter weight for the "Up" part to make it modern */
    opacity: 0.8;
}

/* "PASSION FOR LEARNING" Slogan */
.brand-slogan-text {
    font-family: 'Outfit', sans-serif;
    font-size: 0.46rem;
    font-weight: 800;
    color: #4e342e; /* Deep Brown for professional contrast */
    letter-spacing: 1.8px; /* This makes the slogan look high-end */
    margin-top: 2px;
}

/* Logo Image sizing */
.brand-logo-img {
    height: 45px;
    width: auto;
}

@media (max-width: 991px) {
    /* 1. Ensure the navbar has enough vertical breathing room */
    .custom-navbar {
        padding: 10px 15px !important;
        background-color: #ffffff !important;
        border-bottom: 1px solid rgba(0,0,0,0.05);

    }

    /* 2. Scale the Logo Icon */
    .brand-logo-img {
        height: 40px; /* Smaller for mobile */
    }

    /* 3. Refine the Text for Small Screens */
    .brand-name-main {
        font-size: 1.7rem; /* Down from 1.5rem */
    }

    .brand-slogan-text {
        font-size: 0.45rem; /* Tiny but sharp */
        letter-spacing: 1.8px;
    }

    /* 4. The Burger Menu Color */
    .navbar-toggler {
        border: none;
        color: #e91e63; /* Make the lines your brand pink! */
        padding: 0;
    }

    .navbar-toggler-icon {
        /* Use a custom SVG or CSS to make the icon pink to match your brand */
        filter: invert(19%) sepia(95%) saturate(3845%) hue-rotate(331deg) brightness(91%) contrast(101%);
    }
}

@media (max-width: 991px) {
    .navbar-collapse {
        background: #ffffff;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        padding: 20px 0;
        box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        border-radius: 0 0 25px 25px; /* Rounded bottom for a modern feel */
        z-index: 1000;
        text-align: center;
    }

    .nav-link {
        padding: 15px 0;
        border-bottom: 1px solid #f8f9fa;
        font-size: 0.6rem;
        color: #4e342e !important; /* Use that deep brown for the text */
    }

    .navbar-nav {
        align-items: center; /* Centers the actual list items */
    }

    .nav-item {
        width: 100%;
        margin: 10px 0;
    }

    /* Centers the Parent/School buttons on mobile */
    .nav-btn-group, .d-flex {
        justify-content: center !important;

    }

    }

    /* Make the action buttons full width on mobile */
    .nav-btn-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
}

.brand-title {
    color: #e91e63;
    font-weight: 800;
    font-size: 1.5rem;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}

.up-weight {
    font-weight: 400;
    opacity: 0.7;
}

.brand-slogan {
    color: #4e342e;
    font-size: 0.5rem;
    letter-spacing: 1.7px;
    font-weight: 900;
    text-transform: uppercase;
    white-space: nowrap; /* Keeps slogan on one line */
    color:black;
}

/* Fix for Mobile View */
@media (max-width: 991px) {
    .navbar-collapse {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* Hamburger color to match your brand pink */
    .navbar-toggler-icon {
        filter: invert(19%) sepia(95%) saturate(3845%) hue-rotate(331deg) brightness(91%) contrast(101%);
    }
}

/* Typography & Branding */
.brand-name {
    color: #e91e63;
    font-weight: 800;
    font-size: 1.4rem;
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}
.brand-name span { font-weight: 400; opacity: 0.7; }

.brand-slogan {
    font-size: 0.55rem;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: #2c3e50;
    text-transform: uppercase;
}

/* Nav Link Spacing - The "Tight" Look */
.custom-nav-links .nav-link {
    font-weight: 600;
    color: #444 !important;
    padding: 0 3px !important; /* This stops them from drifting too far */
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.custom-nav-links .nav-link:hover {
    color: #e91e63 !important;
}

/* Button Refinement */
.btn-outline-pink {
    border: 2px solid #e91e63;
    color: #e91e63;
    border-radius: 50px;
    padding: 8px 22px;
    font-weight: 700;
    font-size: 0.9rem;
}

.btn-solid-pink {
    background: #e91e63;
    color: white;
    border-radius: 50px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 0.9rem;
    border: none;
}
/* Card Container Refinement */
.floating-card {

  border-radius: 24px !important; /* Deep, smooth curves */
  padding: 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.03);
  transition: transform 0.3s ease;
  width: fit-content;
  z-index: 5;
  background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
}

header {
  background-color: black;
}

@media (max-width: 768px) {
  .floating-card {
    transform: scale(0.8); /* Shrink them on smaller screens */
  }
  .student-count-card {
    left: 0; /* Pull them in closer to the center */
  }
}

/* Styling the orange icon box */
.icon-box-orange {
  background-color: #F48C06; /* The orange from your image */
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
}

/* Positioning the Congrats card on the right side of the lady */
.congrats-card {
  position: absolute;
  bottom: 30%; /* Positioned halfway up from the bottom */
  right: -10%; /* Pushed slightly out to the right */
  min-width: 240px;
}

/* The Pink Icon Box */
.icon-box-pink {
  background-color: #D85C7F;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* FINAL POSITIONING FOR ALL THREE CARDS */

/* Card 1: ScratchApp - Top Left */
.scratch-app-card {
    position: absolute;
    top: 18%;
    left: -6%; /* Negative pulls it slightly outside the image area */
    z-index: 10;
}

/* Card 2: Compete & Win - Middle Right */
.compete-win-card {
    position: absolute;
    top: 45%;
    right: -10%; /* Pushes it out to the right */
    z-index: 10;
}

/* Card 3: Smart Learner - Bottom Left/Center */
.smart-learner-card {
    position: absolute;
    bottom: 5%;
    left: 5%;
    z-index: 11; /* Keeps it on the very top if they overlap */
}






h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800; /* Extra bold for that "sexy" look */
  letter-spacing: -1.5px; /* Tighten the letters slightly for a designer touch */
  line-height: 1.1;
}

h1 span {
  /* This is for the "love of learning" part */
  color: #F48C06;
  font-style: italic; /* Adding style */
}

.highlight {
  display: block;
    font-weight: 700; /* Extra bold */
    font-size: 4.5rem;
    color: #E91E63; /* Your Brand Pink */
    font-style: italic;
    letter-spacing: -2px;
    /* Adding a subtle glow to make it stand out */
    text-shadow: 0 10px 30px rgba(233, 30, 99, 0.2);
}

.highlight::after {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 12px;
  background-color: rgba(244, 140, 6, 0.2); /* Soft orange highlight */
  z-index: -1; /* Sits behind the text */
  border-radius: 4px;
}

/* Create the soft circular wrapper */
.icon-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%; /* Perfect circle */
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4rem;
  flex-shrink: 0; /* Prevents the circle from squishing */
}

/* Specific colors to match your theme */
.bg-warning-subtle { background-color: rgba(255, 193, 7, 0.15) !important; }
.bg-info-subtle { background-color: rgba(13, 202, 240, 0.15) !important; }
.bg-danger-subtle { background-color: rgba(220, 53, 69, 0.15) !important; }

/* Apply this to your whole project or just the hero section */
body {
  font-family: 'Poppins', sans-serif;
}

h1 {
  font-weight: 800;
  letter-spacing: -2px; /* This "tight" look is very modern and sexy */
  line-height: 1.1;
}

.floating-card h6 {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #2D2D2D; /* A deep charcoal instead of pure black looks more premium */
}

/* Updated Icon Circles with soft tints */
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.bg-primary-subtle { background-color: rgba(13, 110, 253, 0.12) !important; }
.bg-danger-subtle { background-color: rgba(220, 53, 69, 0.12) !important; }

/* 1. The Main Headline Styling */
h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800; /* Extra bold for impact */
  font-size: 3.5rem; /* Large and bold */
  color: #2D2D2D;
  line-height: 1.1;
  letter-spacing: -2px; /* This is the "secret" to the sexy look */
  margin-bottom: 1.5rem;
}

/* 2. Style the "love of learning" phrase */
h1 span.highlight {
  color: #F48C06; /* The golden yellow */
  font-style: italic; /* Adds that stylish flair */
  position: relative;
  display: inline-block;
}

/* 3. The Designer Underline (Subtle and Cool) */
h1 span.highlight::after {
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(244, 140, 6, 0.2); /* Transparent tint of the yellow */
  z-index: -1;
  border-radius: 10px;
}


.floating-card:hover {
  transform: translateY(-5px); /* Subtle lift when hovering */
}

/* Circular Icon Wrappers */
.icon-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}

/* Icon Colors */
.bg-laptop { background-color: rgba(13, 110, 253, 0.12); color: #0d6efd; }
.bg-trophy { background-color: rgba(255, 193, 7, 0.15); color: #ffc107; }
.bg-lightbulb { background-color: rgba(220, 53, 69, 0.12); color: #dc3545; }


.hero-title {
  font-weight: 200;
  font-size: 2.5rem;
  overflow: hidden;
  color: #2D2D2D;
  padding-bottom:5px;

}

.fostering-text {
   font-family: 'Playfair Display', serif;
   font-weight: 400; /* Lighter weight */
    font-size: 1.6rem;
    color: #E37400
    font-style: italic;
    letter-spacing: 0.5px;
 }

/* Individual Letter Styling */
.char {
  display: inline-block;
  transform: translateY(100%); /* Start hidden below */
  animation: reveal-letter 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* The Reveal Animation */
@keyframes reveal-letter {
  0% {
      transform: translateY(100%);
      opacity: 0;
  }
  100% {
      transform: translateY(0);
      opacity: 1;
  }
}


p.hero-description {
  font-size: 1.1rem;
      color: #666666; /* Grey makes it much easier to read than black */
      line-height: 1.6;
      max-width: 500px;
      font-weight: 400;

}

.btn-sexy {
  background: #E91E63;;
  color: #ffffff;
  font-weight: 600;
  padding: 14px 35px;
  border-radius: 50px; /* pill shape */
  border: none;
  box-shadow: 0 10px 20px rgba(244, 140, 6, 0.3);
  transition: all 0.3s ease;
  text-transform: capitalize;
}

.btn-sexy:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 25px rgba(244, 140, 6, 0.4);
  color: #ffffff;
}

.watch-link {
  color: #2D2D2D;
  padding-left: 40px; /* The extra space you asked for */
  transition: 0.3s;
}

.play-icon-wrapper {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  background: rgba(233, 30, 99, 0.1) !important; /* Soft Pink tint instead of blue */
    color: #E91E63 !important;
    border: 1px solid rgba(233, 30, 99, 0.2);

}

.watch-link:hover {
  color: #F48C06;
}

/* Add this to your cards to make them "breathe" */
@keyframes floating {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

.floating-card {
    animation: floating 4s ease-in-out infinite;
}

/* Offset the timing so they don't move at the same time */
.congrats-card { animation-delay: 1s; }
.scratch-app-card { animation-delay: 2s; }

.play-pause {
  position: relative;
  z-index: 1;
}

/* The Pulsing Ring */
.play-pause::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #24D2FE; /* Use the blue from your design */
  border-radius: 50%;
  z-index: -1;
  animation: pulse-ring 2s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80%, 100% {
    transform: scale(1.6); /* How big the ring expands */
    opacity: 0;
  }
}

.watch-link:hover .play-icon-wrapper {
  transform: scale(1.1);
  transition: 0.3s ease;
  background-color: #24D2FE;
  color: white;
}


.hero-section {
  position: relative; /* Essential for the divider to stick to the bottom */
  background-color: #ffdbac; /* Your cream background */
    padding-bottom: 0 !important; /* Remove the bottom gap */
    overflow: hidden;
    padding-bottom: 120px;
  /* This creates the curve at the bottom */
  border-bottom-left-radius: 50% 80px;
  border-bottom-right-radius: 50% 80px;

}


lady-container {
    position: relative;
    z-index: 2; /* Keeps her in front of the curve */
    margin-bottom: -20px; /* Pulls her down slightly into the curve area */
}

.fw-bold-two {
  padding-left:20px;
  color: red;

}

/* Floating Card Headlines */
.floating-card h6, .floating-card .card-title {
    color: #333333; /* Soft Charcoal */
    font-weight: 700;
    letter-spacing: -0.2px;
}

/* Floating Card Sub-text */
.floating-card p, .floating-card .card-description {
    color: #777777; /* Medium Grey */
    font-weight: 400;
}

.text-muted {
  padding-left:20px;
}

.stats-section {
  /* This ensures it blends with the white SVG curve of the hero */
  background-color: #ffffff;
  padding-top: 40px;
}

.stat-icon {
  font-size: 2rem;
  color: #F48C06; /* Matching your theme color */
  margin-bottom: 10px;
  display: block;
}


.stat-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  color: #777777;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Subtle Divider Line (Optional) */
@media (min-width: 768px) {
  .stat-item {
    border-right: 1px solid #f0f0f0;
  }
  .col-md-3:last-child .stat-item {
    border-right: none;
  }
}

.stat-item {
  padding: 20px;
  transition: all 0.3s ease;
  border-radius: 15px;
}

/* Add a subtle lift when the user mouse-overs */
.stat-item:hover {
  background-color: #FFF9F1; /* Matches your hero background */
  transform: translateY(-5px);
}

.stat-icon {
  font-size: 2.2rem;
  color: #F48C06;
  margin-bottom: 15px;
  /* Soft background circle for icons */
  width: 60px;
  height: 60px;
  background: rgba(244, 140, 6, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
}

.sub-title {
  color: #F48C06;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 10px;
}

.display-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 2.8rem;
  color: #2D2D2D;
  line-height: 1.2;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.welcome-text {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #555555;
  margin-bottom: 30px;
}


/* Section Background */
.welcome-section {
    background-color: pink; /* That soft cream background */
    padding: 120px 0;
    overflow: visible;
}




/* 1. The Wrapper (Provides padding and relative positioning) */
.glass-card-wrapper {
    position: relative;
    padding: 30px;
    z-index: 1;
}




/* 4. The Sexy Blobs (They sit BEHIND the glass to show off the blur) */
.glass-blob-pink {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 150px;
    height: 150px;
    background: rgba(233, 30, 99, 0.2);
    filter: blur(40px);
    z-index: -1;
    border-radius: 50%;
}

.glass-blob-blue {
    position: absolute;
    bottom: -20px;
    left: -20px;
    width: 180px;
    height: 180px;
    background: rgba(0, 123, 255, 0.15);
    filter: blur(50px);
    z-index: -1;
    border-radius: 50%;
}

/* 1. THE GLASS PANEL: Needs a stronger white border and more blur */
.glass-card {
    background: rgba(255, 255, 255, 0.45); /* Slightly more solid */
    backdrop-filter: blur(25px); /* Stronger frost effect */
    -webkit-backdrop-filter: blur(25px);

    padding: 25px;
    border-radius: 45px;

    /* This 'Double Border' trick makes it look like real glass edges */
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-right: 1px solid rgba(255, 255, 255, 0.2);

    /* A softer, deeper shadow */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.08);
}

/* 2. THE IMAGE: Give it a 'Nested' feeling */
.glass-image {
    width: 100%;
    border-radius: 30px;
    /* Soft inner shadow to make it look embedded in the glass */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 3. THE GLOW: Use the 'Aura' method */
.glass-card-wrapper::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(233, 30, 99, 0.25) 0%, rgba(233, 30, 99, 0) 70%);
    filter: blur(50px);
    z-index: -1;
    animation: floatGlow 10s infinite ease-in-out;
}

@keyframes floatGlow {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-20px, 20px) scale(1.1); }
}

.pink-underline::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 18px; /* Thick enough to look like a marker */
    background: rgba(233, 30, 99, 0.25); /* Very soft pink */
    z-index: -1; /* Sits behind the letters */
    border-radius: 4px;
}

.learners-text {
    position: relative;
    display: inline-block;
    color: #E91E63; /* Your Brand Pink */
    font-weight: 200;
    font-style: italic;
    z-index: 1;
    font-size: 0.7em;
    font-family: 'Poppins', sans-serif;
    margin-top:-16px;
}

.learners-text::after {
    content: "";
    position: absolute;
    left: -2%; /* Starts slightly before the text */
    bottom: 5px; /* Sits right under the letters */
    width: 110%; /* Extends slightly past the text for a natural look */
    height: 18px; /* Thick marker look */
    background-color: rgba(233, 30, 99, 0.35) !important; /* Softened Highlighter */
    z-index: -1;

    /* This 'clip-path' creates the rough, hand-drawn edges */
    clip-path: polygon(2% 20%, 98% 10%, 95% 80%, 5% 90%);

    transform: scaleX(1);
}
/* 3. The Typography */
.welcome-label {
  font-family: 'Outfit', sans-serif;
    color: #FF9800; /* Use your Orange brand color to match the Hero accents */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.9rem;
}

.welcome-headline {
  font-family: 'Outfit', sans-serif; /* Matching Hero */
    font-weight: 900;
    font-size: 3.5rem;
    color: #2d2d2d; /* Use dark charcoal, not pure black, for a softer look */
    line-height: 1.1;
    letter-spacing: -1px;

}

.revo_text {

  font-family: 'Playfair Display', serif !important;
  font-weight: 500; /* Lighter weight */
   font-size: 2.3rem;
   color: #4A4A4A !important;
   font-style: italic;
   letter-spacing: 0.5px;


}
/* 4. The Hero Underline Technique */
.pink-underline {
    position: relative;
    color: #e91e63;
    display: inline-block;
    z-index: 1;
}



/* 5. The Philosophy Button */
.btn-philosophy {
    background: #e91e63;
    color: white;
    padding: 15px 35px;
    border-radius: 50px;
    border: none;
    font-weight: 700;
    box-shadow: 0 10px 20px rgba(233, 30, 99, 0.3);
    transition: 0.3s ease;
}

.btn-philosophy:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(233, 30, 99, 0.4);
}


.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 250px);
  gap: 20px;
}

.bento-item {
  background: #ffffff;
  border-radius: 30px;
  padding: 30px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.bento-item:hover {
  transform: translateY(-10px);
}

/* Make ScratchApp Big: Spans 1 column and 2 rows */
.scratch-app {
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background: linear-gradient(135deg, #ffffff 0%, #f0faff 100%);
  border: 1px solid #e0f4ff;
}

/* Top Right Card: MYSASM spans 2 columns */
.mysasm {
  grid-column: 2 / 4;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

/* Bottom Middle: ScratchVid */
.scratchvid {
  grid-column: 2 / 3;
}

/* Bottom Right: Digital Mock */
.digital-mock {
  grid-column: 3 / 4;
}

/* Icon Styles */
.icon-box {
  width: 50px;
  height: 50px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.blue-bg { background: rgba(36, 210, 254, 0.1); color: #24d2fe; }
.orange-bg { background: rgba(244, 140, 6, 0.1); color: #f48c06; }
.red-bg { background: rgba(255, 71, 87, 0.1); color: #ff4757; }
.green-bg { background: rgba(46, 213, 115, 0.1); color: #2ed573; }

/* --- Desktop Styles (The Bento Look) --- */
@media (min-width: 992px) {
  .bento-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 300px); /* Increased height for better spacing */
    gap: 24px;
  }

  .scratch-app {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
  }

  .mysasm {
    grid-column: 2 / 4;
  }

  .scratchvid {
    grid-column: 2 / 3;
  }

  .digital-mock {
    grid-column: 3 / 4;
  }
}

/* --- Mobile & Tablet Styles (The Stack Look) --- */
@media (max-width: 991px) {
  .bento-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .bento-item {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 200px; /* Ensures cards don't look squashed */
  }

  .mysasm {
    flex-direction: column; /* Stack icon on top of text for MYSASM on mobile */
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .display-title {
    font-size: 2rem; /* Shrink headline slightly for small screens */
  }

  .bento-img {
    max-width: 80%; /* Prevent the mockup image from overflowing */
    margin: 20px auto 0 auto;
  }
}

.btn-primary-sexy {
  background-color: #F48C06;
  border-color: #F48C06;
  color: white;
  transition: all 0.3s ease;
}

.btn-primary-sexy:hover {
  background-color: #e07b00;
  transform: scale(1.05);
  color: white;
}

/* Make the image float slightly to grab attention */
.floating-animation {
  animation: floating 3s ease-in-out infinite;
}

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

.product-mockup-container {
  position: relative;
  padding: 20px;
}

/* Adding a soft glow behind the product mockup */
.product-mockup-container::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 80%;
  background: rgba(36, 210, 254, 0.1);
  filter: blur(60px);
  z-index: -1;
  border-radius: 50%;
}

.btn-mysasm {
  background-color: #24d2fe;
  color: white;
  border: none;
  transition: 0.3s;
}

.btn-mysasm:hover {
  background-color: #1bb5db;
  transform: translateY(-3px);
  color: white;
}

.mysasm-features {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}

.mysasm-features li {
  font-family: 'Poppins', sans-serif;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #444;
  font-weight: 500;
}

.mysasm-features i {
  color: #24d2fe;
  font-size: 1.2rem;
}

/* Floating Reward Badge Styles */
.mysasm-visual-wrapper {
  position: relative;
}

.reward-badge {
  position: absolute;
  bottom: 20px;
  right: -10px;
  background: #ff4757;
  color: white;
  padding: 10px 20px;
  border-radius: 50px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 10px 20px rgba(255, 71, 87, 0.3);
  animation: pulse-red 2s infinite;
}

@keyframes pulse-red {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.btn-book-us {
  background-color: #2ed573;
  color: white;
  border: none;
  transition: all 0.3s ease;
}

.btn-book-us:hover {
  background-color: #26af5f;
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(46, 213, 115, 0.3);
  color: white;
}

.mock-event-visual {
  position: relative;
}

/* The Live Indicator Badge */
.live-indicator {
  position: absolute;
  top: 20px;
  left: 20px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 8px 15px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(5px);
}

.live-indicator .dot {
  width: 8px;
  height: 8px;
  background-color: #ff4757;
  border-radius: 50%;
  box-shadow: 0 0 10px #ff4757;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}

.feature-pills .badge {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-purple-solid {
  background-color: #6f42c1;
  color: white;
  border: 2px solid #6f42c1;
  transition: 0.3s;
}

.btn-purple-solid:hover {
  background-color: #59359a;
  color: white;
  transform: translateY(-3px);
}

.btn-purple-outline {
  background-color: transparent;
  color: #6f42c1;
  border: 2px solid #6f42c1;
  transition: 0.3s;
}

.btn-purple-outline:hover {
  background-color: #6f42c1;
  color: white;
}

.coding-visual {
  position: relative;
}

.student-text {
    position: relative;
    display: inline-block;
    color: #E91E63; /* Your Brand Pink */
    font-weight: 800;
    font-style: italic;
    z-index: 1;
    font-size: 1.3em;
}

.student-text::after {
    content: "";
    position: absolute;
    left: -2%; /* Starts slightly before the text */
    bottom: 5px; /* Sits right under the letters */
    width: 110%; /* Extends slightly past the text for a natural look */
    height: 18px; /* Thick marker look */
    background-color: rgba(233, 30, 99, 0.35) !important; /* Softened Highlighter */
    z-index: -1;

    /* This 'clip-path' creates the rough, hand-drawn edges */
    clip-path: polygon(2% 20%, 98% 10%, 95% 80%, 5% 90%);

    transform: scaleX(1);
}

.stat-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    padding: 40px 20px;
    border-radius: 30px; /* Matching the curved theme */
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Sexy 3D Lifting Shadow */
    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.05),
        0 6px 6px rgba(0, 0, 0, 0.05),
        inset 0 -4px 0 rgba(0, 0, 0, 0.05);
}

.stat-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(233, 30, 99, 0.1); /* Soft pink glow on hover */
}

/* Icon Wrapper with 3D Aura */
.stat-icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background: #FFF4F7;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #E91E63; /* Brand Pink */
    box-shadow: 0 8px 15px rgba(233, 30, 99, 0.15);
}

/* Typography Refinement */
.stat-number {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 2.8rem;
    color: #2D2D2D; /* Soft Charcoal instead of Black */
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #888;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Import a cleaner, more professional font if you haven't yet */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;800&display=swap');

.stats-container {
    font-family: 'Outfit', sans-serif;
}

/* The Icon Wrapper - Making it 3D and Colorful */
.stat-icon-box {
    width: 80px;
    height: 80px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 20px;
    transition: all 0.3s ease;
    /* This creates a soft 3D 'pod' effect */
    background: #ffffff;
    box-shadow: inset 0 -4px 0 rgba(0,0,0,0.05), 0 10px 20px rgba(0,0,0,0.05);
}

/* Specific Icon Colors with Glows */
.icon-students { color: #E91E63; background: #FFF0F5; box-shadow: 0 10px 20px rgba(233, 30, 99, 0.15); }
.icon-schools  { color: #4F46E5; background: #EEF2FF; box-shadow: 0 10px 20px rgba(79, 70, 229, 0.15); }
.icon-parents  { color: #F59E0B; background: #FFFBEB; box-shadow: 0 10px 20px rgba(245, 158, 11, 0.15); }
.icon-partners { color: #10B981; background: #ECFDF5; box-shadow: 0 10px 20px rgba(16, 185, 129, 0.15); }

/* Typography Refinement */
.stat-number-text {
    font-weight: 800; /* Bold but not "chunky" */
    font-size: 2rem;
    color: #1A1A1A; /* Very dark grey, softer than pure black */
    letter-spacing: -1.5px;
    margin-bottom: 0;
    font-family: 'Outfit', sans-serif;
}

.stat-desc-text {
    font-weight: 600;
    font-size: 0.75rem;
    color: #94A3B8; /* Elegant blue-grey */
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media (max-width: 767px) {
    .hero-section {
        text-align: center; /* Centers everything for a balanced mobile look */
        padding: 40px 20px;
    }

    .fostering-text {
        font-family: 'Playfair Display', serif;
        font-weight: 900;
        font-style: italic;
        font-size: 1.4rem; /* Large and bold */
        line-height: 1.1;
        color: #E37400; /* That vibrant Google-style orange */
        margin-bottom: 10px;
        display: block;
    }

    .student-text {
      font-size: 2.2rem !important;
      font-weight: 900;
      line-height: 1;
      margin-bottom: 20px;
    }

    .hero-cta-group {
            display: flex;
            flex-direction: column; /* Moves video link BELOW the button */
            align-items: center;
            gap: 20px;
            margin-top: 25px;
        }
    .hero-desc {
        font-size: 1rem;
        color: #4e342e; /* Deep brown for readability */
        padding: 0 10px;
        line-height: 1.5;
        margin-bottom: 30px;
    }

    /* Centers the buttons on mobile */
    .hero-cta-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;

    }

    .btn-sexy-pink {
        width: 100%;
        max-width: 260px; /* Constrains the button so it's not too big */
        padding: 12px 0;
        border-radius: 50px;
        font-size: 1.1rem;
    }

    .watch-link {
        display: flex;
        gap: 8px;
        font-weight: 600;
        color: #4e342e; /* Deep brown from your brand palette */
        text-decoration: none;
        padding-right:50px;
    }
}