:root{
  --kid-primary:#ff6b6b;
  --kid-secondary:#4ecdc4;
  --kid-yellow:#ffe66d;
  --kid-blue:#5aa9e6;
  --kid-bg:#fffaf2;
  --kid-green:#38b000;
  --kid-red:#e63946;
}

body{ 
  font-family: "Baloo 2", "Fredoka", system-ui, -apple-system, sans-serif;
  background-color: var(--kid-bg);
  margin:0;
  padding:0;
}

.kid-bg{ background: radial-gradient(1200px 600px at -10% -10%, #ffeedd 0, transparent 50%) , var(--kid-bg); }

.kid-nav{ background: linear-gradient(90deg, #fff, #fff6e5); }
.kid-logo{ font-size: 1.5rem; }

/* Change dropdown background */
.navbar .dropdown-menu {
    background-color: #fff6e6; /* light cream color matching your theme */
    border-radius: 10px;       /* rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* subtle shadow */
}

/* Change dropdown item text color */
.navbar .dropdown-menu .dropdown-item {
    color: #333;               /* text color */
}

/* Hover effect */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: #ffd699; /* light orange on hover */
    color: #000;
}

.btn-kid {
  background: #ffb74d;
  color: #000000;
  border-radius: 12px;
  padding: .5rem 1rem;
  box-shadow: 0 6px 0 #fcac33;
}

.btn-kid:hover {
  background-color:#fcac33;
  box-shadow: 0 6px 0 #ffb74d;
}

.hero{
  background: linear-gradient(135deg, #fff7dd, #fff);
  border: 3px dashed var(--kid-yellow);
  border-radius: 20px;
}

.card-kid{
  border: 3px solid var(--kid-blue);
  border-radius: 16px;
  transition: transform .08s ease;
}
.card-kid:hover{ transform: translateY(-2px); }

.kid-footer{ background: #fff; border-top: 4px solid var(--kid-secondary); }
.tag{ background: var(--kid-secondary); color:#fff; border-radius:999px; padding:.1rem .6rem; font-size:.85rem; }

/* Constrain the content width */
.container {
    max-width: 1200px; /* same as detail page */
    margin: 0 auto; 
    padding: 20px; /* small horizontal padding */
}

/* Alphabet list */
.alphabet-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* spacing between cards */
    padding: 20px 20px;
}

/* Alphabet card as clickable link */
.alphabet-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    text-align: center;
    border-radius: 15px;
    background-color: #ffe0b2;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    padding: 10 px;
    text-decoration: none; /* remove underline */
    color: inherit; /* keep text color */
    transition: transform 0.2s, box-shadow 0.2s;
}

.alphabet-card:hover {
    transform: scale(1.05);
    box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

/* Image */
.alphabet-card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Letter button */
.alphabet-card .letter {
    font-size: 24px;
    margin-top: 5px;
    padding: 8px;
    border-radius: 50%;
    border: none;
    background-color: #ffcc80;
    cursor: pointer;
}

/* Word */
.alphabet-card p {
    margin-top: 5px;
    font-weight: bold;
}

/* Responsive for small screens */
@media (max-width: 768px) {
    .alphabet-list {
        justify-content: center;
        gap: 15px;
        padding: 20px 0;
    }
    .alphabet-card {
        width: 115px;
    }
}


/* Wrapper with padding so content doesn't touch screen edges */
.alphabet-detail-wrapper {
    padding: 20px 60px; /* increased horizontal padding */
}

/* Title & Word aligned to left with proper spacing */
.alphabet-title {
    font-size: 28px;
    text-align: left;
    margin-bottom: 10px;
}

.alphabet-word {
    font-size: 20px;
    text-align: left;
    margin-bottom: 30px;
}

.alphabet-detail-container {
    display: flex;
    justify-content: center;   /* 👈 center align all columns */
    align-items: center;       /* 👈 vertically center inside row */
    gap: 50px;                 /* thoda aur space beech me */
    flex-wrap: wrap;           /* responsive stacking */
}

/* Left: Image */
.alphabet-image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
}

/* Middle: Buttons */
.alphabet-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
}

/* Right: Tracing Canvas (update class name to match HTML) */
.trace-board-container-unique {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    flex: 1.2 1 0;
}

.trace-board-container-unique canvas {
    width: 300px;  
    height: 300px;
    max-width: 100%;
    border: 2px solid #000;
    border-radius: 5px;
}

/* Buttons styling */
.alphabet-buttons button,
.alphabet-trace button {
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #ffb74d;
    border: none;
    cursor: pointer;
    font-size: 14px;
}

.alphabet-buttons button:hover,
.alphabet-trace button:hover {
  background-color: #fcac33;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .alphabet-detail-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .alphabet-image img {
        width: 150px;
        height: 150px;
    }

    .alphabet-trace canvas {
        width: 250px;
        height: 250px;
    }
}

/* Constrain the content width like main site */
.container {
    max-width: 1200px; /* adjust as per logo-login width */
    margin: 0 auto; /* center the container */
    padding: 0 20px; /* small horizontal padding */
}

/* Wrapper padding inside container */
.alphabet-detail-wrapper {
    padding: 20px 0; /* only vertical padding now */
}

/* Keep all other styles same */


.nav-buttons-top {
    display: flex;
    justify-content: flex-end; /* right aligned */
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* allow wrap on small screens */
    z-index: 10; /* make sure not overlapped */
}

.nav-buttons-top .nav-button {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #ffb74d;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.2s;
}

.nav-buttons-top .nav-button:hover {
    background-color: #ffa726;
}


/* Title row aligned properly */
.title-row {
  display: flex;
  justify-content: space-between; /* title left, buttons right */
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 8px 0;
  border-bottom: 2px solid #eee;
  margin-bottom: 12px;
}

/* Title text */
.alphabet-title {
  font-size: 28px;
  font-weight: 700;
  margin: 0;
  color: #333;
}

/* Right-side round buttons */
.nav-buttons {
  display: flex;
  gap: 12px;
  margin-left: auto; /* pushes the group to the far right */
}

.circle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 22px;
  line-height: 1;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transition: transform 0.15s ease, opacity 0.15s ease;
}

.circle-prev { background: #f76ea3; }  /* pink */
.circle-home { background: #3b82f6; }  /* blue */
.circle-next { background: #34d399; }  /* green */

.circle-btn:hover {
  transform: scale(1.08);
  opacity: 0.9;
}

/* Mobile tweaks */
@media (max-width: 640px) {
  .circle-btn { width: 44px; height: 44px; font-size: 20px; }
  .alphabet-title { font-size: 24px; }
}


/* Alphabet Tracing Unique Styles */
.trace-board-container-unique {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
  position: relative;
}

#traceCanvasUnique {
  border: 2px solid #333;
  background: #fff;
  border-radius: 10px;
  cursor: crosshair;
}

.trace-buttons-unique {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}

.trace-buttons-unique button {
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: #ffb74d;
  color: #000000;
  font-size: 14px;
  cursor: pointer;
}

.trace-buttons-unique button:hover {
  background: #fcac33;
}

/* Reward balloons */
.reward-balloon-unique {
  position: absolute;
  font-size: 28px;
  animation: floatUpUnique 2s ease forwards;
  pointer-events: none;
}

@keyframes floatUpUnique {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-150px) scale(1.5); }
}

/* Header wrapper */
.alphabet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* mobile support */
}

/* Mobile: stack vertically */
@media (max-width: 576px) {
  .alphabet-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .alphabet-filter-form {
    width: 100%;
    margin-top: 0.5rem;
  }

  .alphabet-language-select {
    width: 100%;
  }
}

/* Kid-friendly dropdown */
.alphabet-language-select {
  padding: 3px 15px;
  font-size: 1.1rem;
  border-radius: 12px;
  border: 2px solid #ffb347;
  background: #fff8e7;
  cursor: pointer;
  outline: none;
  transition: 0.3s;
}

.alphabet-language-select:hover {
  background: #ffe4b5;
}

.alphabet-language-select:focus {
  border-color: #ff8800;
}


/* Unique ID to avoid clash */
.story-language-select {
  padding: 6px 12px;
  font-size: 1rem;
  border-radius: 12px;
  background: #f8f9fa;
  border: 2px solid #ffd966;
  cursor: pointer;
}

/* Mobile view: dropdown goes below title */
@media (max-width: 576px) {
  #story-language-form {
    width: 100%;
    margin-top: -10px;
  }
  .story-language-select {
    width: 100%;
    margin-top: 8px;
  }
}

/* Vocabulary List */
/* Container same as alphabet */
#vocab-list-page .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Grid like alphabet list */
#vocab-list-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px 0;
}

/* Card design */
.vocab-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 140px;
  text-align: center;
  border-radius: 15px;
  background: #ffe0b2;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  padding: 10px;
  text-decoration: none;   /* link ka underline hatado */
  color: inherit;          /* text color normal rakho */
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}

.vocab-card:hover {
  transform: scale(1.05);
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}


/* Image */
.vocab-img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  margin: 8px 0;
}

/* Fake button look */
.vocab-card .btn-vocab {
  background-color: #ffb74d;
  border-radius: 12px;
  padding: 6px 12px;
  font-weight: bold;
  display: inline-block;
  margin-top: auto;
}

.vocab-card .btn-vocab:hover {
  background-color: #fcac33;
}

/* Practice Flashcard button on Vocab List page */
.btn-vocab {
  background-color: #ffb74d;
}

.btn-vocab:hover {
  background-color: #fcac33;
}


/* Vocabulary Detail Page*/
#vocab-detail-page .vocab-detail-card {
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  max-width: 600px;   /* card ko constrain kiya */
  margin: 20px auto;  /* page ke center me */
  text-align: center;
  background-color: #ffe0b2;
}

/* Word */
#vocab-detail-page .vocab-word {
  font-size: 28px;
  margin-bottom: 15px;
  margin-top: 30px;
}

/* Image wrapper */
#vocab-detail-page .vocab-img-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}

#vocab-detail-page .vocab-detail-img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}

/* Text blocks */
#vocab-detail-page .vocab-meaning,
#vocab-detail-page .vocab-example,
#vocab-detail-page .vocab-synonyms {
  margin: 8px 0;
  font-size: 16px;
}

/* Buttons (TTS) */
#vocab-detail-page .btn-group {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

#vocab-detail-page .btn-vocab {
  background-color: #ffb74d;
  border-radius: 12px;
  padding: 10px 16px;
  color: rgb(0, 0, 0);
  text-decoration: none;
  font-weight: bold;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}

#vocab-detail-page .btn-vocab:hover {
  background-color: #fcac33;
}

/* Responsive */
@media (max-width: 768px) {
  #vocab-detail-page .vocab-detail-img {
    max-width: 100%;
  }
  #vocab-detail-page .vocab-word {
    font-size: 22px;
  }
  .vocab-card {
    width: 115px;
  }
}


/* 🃏 Practice Vocabulary Page */
/* Container */
#flashcard-container {
  max-width: 1100px;
}

/* Flashcard Styles */
.flashcard {
  perspective: 1000px;
  cursor: pointer;
  display: flex;             /* center trick */
  justify-content: center;   /* horizontally center */
}

.flashcard-inner {
  position: relative;
  width: 100%;               /* full column le lo */
  max-width: 220px;          /* card ka fixed width */
  height: 220px;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  margin: 0 auto;            /* extra safety */
}

.flashcard.is-flipped .flashcard-inner {
  transform: rotateY(180deg);
}

.flashcard-front,
.flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  padding: 12px;
  background: #ffe0b2;
}

.flashcard-front {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.flashcard-front img {
  width: 100%;
  height: 100px;
  object-fit: contain;
  margin-bottom: 8px;
}

.flashcard-back {
  transform: rotateY(180deg);
  font-size: 14px;
  overflow-y: auto;
}


/* Vocab Detail Page Content - Starts */
/* Layout */
.vocab-header { text-align: left; margin-bottom: 15px; }
.vocab-separator { margin: 8px 0; border-top: 2px solid #ccc; }

.vocab-info-card {
  background: #ffffff;
  padding: 10px 15px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.vocab-columns {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.vocab-col {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* TTS Buttons */
.tts-buttons button {
  display: block;
  margin: 10px auto;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #ffb74d;
  color: white;
  cursor: pointer;
}
.tts-buttons button:hover { background: #fcac33; }

/* Practice Box */
.practice-box {
  width: 100%;
  min-height: 280px;
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.practice-title {
  text-align: center;
  background: linear-gradient(45deg,#ff9a9e,#fad0c4);
  padding: 6px;
  border-radius: 8px;
  font-weight: bold;
  margin-bottom: 8px;
}

.listening-area {
  flex: 1;
  text-align: center;
  margin-bottom: 10px;
}
#listening-status { font-size: 14px; color: #666; margin-bottom: 6px; }
#spoken-text { font-size: 16px; margin: 6px 0; }
#result { font-size: 18px; font-weight: bold; margin-top: 8px; }

/* Gamified Result */
.result-correct { color: green; animation: pop 0.4s ease; }
.result-wrong { color: red; animation: shake 0.4s ease; }

@keyframes pop { 0%{transform:scale(0.7);}100%{transform:scale(1);} }
@keyframes shake {
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}

/* Practice Buttons inside box */
.practice-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.practice-buttons button {
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #ffb74d;
  color: white;
  cursor: pointer;
}
.practice-buttons button:hover { background: #fcac33; }

/* Responsive */
@media(max-width: 768px){
  .vocab-columns { flex-direction: column; }
}
/* Vocab Detail Page Content - End */

/* Rhyme Section CSS - Start */
/* ====== Rhymes Detail Page Specific Styles ====== */
#rhyme-detail-page .control-bar .btn {
  border-radius: 12px;
  margin-left: 5px;
}
#rhyme-detail-page .control-bar .btn:hover {
  background-color: #fcac33;
}
#rhyme-detail-page .rhyme-bg {
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 16px;
}
#rhyme-detail-page .rhyme-columns {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  flex-wrap: wrap;
}
#rhyme-detail-page .rhyme-col {
  flex: 1;
  min-width: 280px;
}
#lyrics-text {
  white-space: pre-wrap;
  font-size: 1.1rem;
  line-height: 1.6;
}
#lyrics-text mark {
  background: #ffb74d;
  border-radius: 4px;
  padding: 0 2px;
}
.rhyme-line {
  margin-bottom: 6px;
}
.practice-box {
  border: 2px solid var(--kid-blue);
  border-radius: 14px;
  padding: 15px;
  background: #f8fbff;
}
.practice-title {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.practice-buttons button {
  margin: 5px 0;
  display: block;
  width: 100%;
  border-radius: 10px;
  border: none;
  padding: 8px;
  background: #ffb74d;
  color: #fff;
  font-size: 1rem;
}
.practice-buttons button:hover {
  background-color: #fcac33;
}
.result-correct { color: green; font-weight: bold; }
.result-almost { color: orange; font-weight: bold; }
.result-wrong { color: red; font-weight: bold; }

/* Rhyme Section CSS - End */

/* Activities Section Starts */

/* Activity List Cards */
.ak-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.ak-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ak-card-image {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.ak-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ak-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.ak-card h2 {
  margin-top: 0;
  font-size: 20px;
  color: var(--kid-primary);
}

.ak-card p {
  font-size: 16px;
  color: #333;
}

.ak-btn {
  display: inline-block;
  margin-top: 10px;
  background: #ffb74d;
  color: #fff;
  padding: 8px 14px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.ak-btn:hover {
  background: #fcac33;
}

.ak-card-content {
    padding: 1rem;
}

.ak-container{
  max-width: 1200px;
  margin:auto;
  padding:20px;
}

.ak-header h1{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ak-words{
  display:flex;
  flex-wrap:wrap;
  margin:15px 0;
  justify-content:center;
}

.ak-word{
  background: var(--kid-yellow);
  margin:5px;
  padding:10px 15px;
  border-radius:8px;
  cursor:grab;
  font-size:18px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.ak-targets{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap:15px;
  margin-top:20px;
}

.ak-target{
  background: #fff;
  border:2px dashed var(--kid-blue);
  border-radius:12px;
  padding:10px;
  text-align:center;
}

.ak-target img{
  width:100%;
  height:auto;
  max-height:100px;
  object-fit:contain;
  border-radius:8px;
}

/* Drop slot */
.ak-drop-slot{
  margin-top:8px;
  min-height:30px;
  border:2px dashed #ccc;
  border-radius:6px;
  font-size:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: background 0.3s, color 0.3s;
}

/* Correct / Wrong feedback */
.ak-drop-slot.ak-correct{
  background: var(--kid-green);
  color:#fff;
  border-color: var(--kid-green);
}

.ak-drop-slot.ak-wrong{
  background: var(--kid-red);
  color:#fff;
  border-color: var(--kid-red);
}

.ak-speak{
  cursor:pointer;
  margin-left:6px;
  font-size:16px;
}

/* Activities Section End */

/* =========================================================
   🏠 New HomePage CSS (Optimized & Responsive)
   ========================================================= */

/* 🎨 Root Variables */
:root {
  --hp-primary: #ff6b6b;
  --hp-secondary: #4ecdc4;
  --hp-yellow: #ffe66d;
  --hp-blue: #5aa9e6;
  --hp-bg: #fffaf2;
  --hp-dark: #343a40;
}

/* =========================================================
   🎈 Hero Section
   ========================================================= */
.hp-hero {
  position: relative;
  padding: 80px 20px;
  background: linear-gradient(135deg, #ffe66d, #ff6b6b);
  color: #fff;
  text-align: center;
  overflow: hidden;
}

.hp-hero-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: auto;
}

.hp-hero-text {
  flex: 1 1 50%;
  text-align: left;
  z-index: 2;
}

.hp-hero-text h1 {
  font-size: 2.8rem;
  font-weight: 700;
  animation: bounceLetters 2s infinite;
}

.hp-hero-text p {
  font-size: 1.2rem;
  margin: 15px 0;
}

.hp-highlight {
  color: var(--hp-yellow);
}

.hp-buttons {
  margin-top: 20px;
}

.hp-btn {
  background: #fff;
  color: var(--hp-primary);
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.hp-btn:hover {
  background: var(--hp-blue);
  color: #fff;
  transform: scale(1.05);
}

.hp-btn-alt {
  background: var(--hp-dark);
  color: #fff;
}

.hp-hero-image {
  flex: 1 1 40%;
  position: relative;
  text-align: center;
  cursor: pointer;
}

.hp-hero-image img {
  max-width: 100%;
  border-radius: 20px;
  z-index: 2;
  position: relative;
}

/* 🎈 Floating Decorations */
.hp-floating {
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: 1;
}

.hp-balloon {
  background: url('/static/img/balloon.png') no-repeat center/contain;
  top: 10%;
  right: 15%;
  animation: floatY 4s ease-in-out infinite;
}

.hp-star {
  background: url('/static/img/star.png') no-repeat center/contain;
  bottom: 15%;
  left: 10%;
  animation: twinkle 3s infinite alternate;
}

/* 🌊 Waves */
.hp-wave {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  background-repeat: no-repeat;
  background-size: cover;
}

.hp-wave-top {
  top: -1px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg'><path fill='%23fffaf2' d='M0,64L80,53.3C160,43,320,21,480,16C640,11,800,21,960,32C1120,43,1280,53,1360,58.7L1440,64V80H0Z'></path></svg>");
}

.hp-wave-bottom {
  bottom: -1px;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1440 80' xmlns='http://www.w3.org/2000/svg'><path fill='%23fffaf2' d='M0,32L80,48C160,64,320,96,480,96C640,96,800,64,960,53.3C1120,43,1280,53,1360,58.7L1440,64V0H0Z'></path></svg>");
}

/* =========================================================
   🌟 General Section Styles
   ========================================================= */
.hp-section {
  padding: 60px 20px;
  text-align: center;
}

.hp-alt-bg {
  background: #fdf6e3;
}

.hp-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 40px;
  color: var(--hp-dark);
}

/* =========================================================
   ❤️ Why Section
   ========================================================= */
.hp-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.hp-icon-card {
  background: #fff;
  border-radius: 20px;
  padding: 20px;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.hp-icon-card:hover {
  transform: translateY(-8px);
}

/* =========================================================
   🚀 Features
   ========================================================= */
.hp-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
}

.hp-feature-card {
  background: #fff;
  border-radius: 18px;
  padding: 25px;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

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

.hp-btn-small {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 16px;
  border-radius: 20px;
  background: var(--hp-primary);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
}

.hp-btn-small:hover {
  background: var(--hp-blue);
}

.hp-tip {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--hp-dark);
  opacity: 0.8;
}

/* =========================================================
   🎮 Fun Zone
   ========================================================= */
.hp-fun-card {
  background: #fff;
  border-radius: 18px;
  padding: 30px;
  font-size: 1.2rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: inherit;
}

.hp-fun-card:hover {
  transform: scale(1.08);
  background: #ffe66d;
}

/* =========================================================
   📚 Stories Carousel
   ========================================================= */
.hp-carousel-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hp-carousel {
  display: flex;
  transition: transform 0.6s ease;
}

.hp-slide {
  flex: 0 0 calc(100% / 3);
  box-sizing: border-box;
  padding: 10px;
}

.hp-slide a {
  display: block;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  color: var(--hp-dark);
  transition: transform 0.3s ease, background 0.3s ease;
  height: 100%;
}

.hp-slide img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 10px;
}

.hp-slide:hover a {
  transform: scale(1.05);
  background: #fff7e6;
}

/* Dots navigation */
.hp-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

.hp-dot {
  width: 10px;
  height: 10px;
  background: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
}

.hp-dot.active {
  background: var(--hp-primary);
  transform: scale(1.3);
}

/* =========================================================
   🌈 Highlights
   ========================================================= */
.hp-highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.hp-highlight-card {
  background: #fff;
  border-radius: 18px;
  padding: 20px;
  font-size: 1rem;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

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

/* =========================================================
   👩‍👩‍👦 Stats
   ========================================================= */
/* Stats section */
.hp-stats { padding: 44px 16px; text-align: center; }
.hp-stats .hp-title { margin-bottom: 18px; }

.hp-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
}

.hp-stat-card {
  background: #ffffff;
  padding: 18px 14px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(10,10,10,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 110px;
}

.hp-stat-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.hp-stat-number {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 6px;
  color: #111;
}

.hp-stat-label {
  font-size: 0.95rem;
  color: #555;
}

/* responsive tweaks */
@media (max-width: 480px) {
  .hp-stat-number { font-size: 1.6rem; }
  .hp-stat-card { padding: 14px; }
}

/* dark theme support - if required else comment or delete it to not to use */
/* @media (prefers-color-scheme: dark) {
  .hp-stat-card { background: #0b0b0b; box-shadow: none; }
  .hp-stat-number { color: #fff; }
  .hp-stat-label { color: #cfcfcf; }
} */


/* =========================================================
   👩‍👩‍👦 Testimonials
   ========================================================= */
#hp-testimonials {
  padding: 4rem 2rem;
  max-width: 1400px;
  margin: 0 auto;
}

.hp-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

.hp-testimonial-card {
  background: #fff;
  border-radius: 1.5rem;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hp-testimonial-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
}

.hp-testimonial-img img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid #ffcb05;
}

.hp-testimonial-text {
  font-size: 1rem;
  margin-bottom: 0.8rem;
  color: #333;
}

.hp-rating {
  font-size: 1.2rem;
  color: #ffb400;
  margin-bottom: 0.5rem;
}

.hp-testimonial-emojis {
  font-size: 1.3rem;
}

/* =========================================================
   👨‍👩‍👧 Parent Testimonial Sections
   ========================================================= */
.hp-row-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: flex-start;
  padding: 3rem 2rem;
}

.hp-half-section {
  flex: 1 1 48%;
  box-sizing: border-box;
  background: #fdf6e3;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hp-half-section .hp-title {
  margin: 0 0 1rem;
}

.hp-parent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hp-parent-list li {
  display: flex;
  align-items: center;
  margin-bottom: 0.8rem;
  font-size: 1rem;
  text-align: left;
}

.hp-parent-list li::before {
  content: "✅";
  margin-right: 0.5rem;
  font-size: 1.1rem;
  color: #ffb400;
}

/* =========================================================
   🦶 Footer
   ========================================================= */
.hp-footer {
  position: relative;
  text-align: center;
  background: var(--hp-dark);
  color: #fff;
  padding: 40px 20px 20px;
  font-size: 0.9rem;
}

.hp-social a {
  color: #fff;
  text-decoration: none;
  margin: 0 8px;
  transition: color 0.3s;
}

.hp-social a:hover {
  color: var(--hp-yellow);
}

/* =========================================================
   🎬 Animations
   ========================================================= */
@keyframes floatY {
  0% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
  100% { transform: translateY(0); }
}

@keyframes twinkle {
  from { opacity: 0.3; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1.1); }
}

@keyframes bounceLetters {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* =========================================================
   🧭 Tabs
   ========================================================= */
.hp-tabs {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-bottom: 25px;
}

.hp-tab {
  background: var(--hp-blue);
  color: #fff;
  padding: 10px 20px;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.3s ease;
}

.hp-tab.active,
.hp-tab:hover {
  background: var(--hp-primary);
  transform: scale(1.05);
}

.hidden {
  display: none;
}

/* =========================================================
   📱 Responsive Design
   ========================================================= */

/* Tablets & below */
@media (max-width: 768px) {
  .hp-hero-content {
    flex-direction: column;
    text-align: center;
    padding: 30px 15px;
  }

  .hp-hero-text h1 { text-align: center; }
  .hp-hero-text p { text-align: center; }

  .hp-hero-image {
    max-width: 80%;
    margin: 20px auto 0;
  }

  /* Buttons */
  .hp-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
  }

  .hp-btn,
  .hp-btn-small {
    display: inline-block;
    width: 65%;             /* Fit to text */
    max-width: none;         /* Remove limit */
    text-align: center;
  }

  .hp-feature-grid { grid-template-columns: 1fr; padding: 20px; }

  .hp-slide { flex: 0 0 70%; }

  .hp-slide img { height: 120px; }

  .hp-testimonial-grid {
    flex-direction: column;
    padding: 20px;
  }

  .hp-testimonial { width: 100%; margin-bottom: 15px; }

  .hp-half-section { flex: 1 1 100%; }
}

/* Small phones (≤480px) */
@media (max-width: 480px) {
  .hp-hero { padding: 60px 15px; }
  .hp-hero-text h1 { font-size: 2.8rem; }
  .hp-hero-text p { font-size: 1.2rem; }

  .hp-feature-card,
  .hp-fun-card,
  .hp-highlight-card,
  .hp-testimonial-card {
    padding: 1rem;
  }

  .hp-buttons { width: 100%; align-items: center; }
}

/* Extra small (≤360px) */
@media (max-width: 360px) {
  .hp-testimonial-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #hp-testimonials { padding: 2rem 1rem; }

  .hp-testimonial-text { font-size: 0.9rem; }
  .hp-testimonial-emojis { font-size: 1rem; }
}

/* =========================================================
   ✅ End of HomePage CSS
   ========================================================= */


/* User Login Sign up CSS - Start */

.signup-selection-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.signup-form-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 20px;
    background: #FFCDD2;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

.signup-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.cards-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.si-card {
    flex: 1 1 100px;
    margin: 10px;
    padding: 20px;
    border-radius: 15px;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.kid-card { background-color: #FFCDD2; }
.parent-card { background-color: #C5CAE9; }
.school-card { background-color: #B2DFDB; }

.si-card:hover {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(0,0,0,0.3);
}

.kid-submit-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    background-color: #FF8A65;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    margin-top: 10px;
}

.kid-submit-btn:hover {
    background-color: #FF7043;
}

input.kid-input, input.parent-input, input.school-input, input.login-input {
    width: 90%;
    padding: 10px;
    margin: 5px 0;
    border-radius: 10px;
    border: 1px solid #ccc;
}

.parent-form-container {
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;
    background: #C5CAE9;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    text-align: center;
}
.parent-form-container h1 {
    color: #303F9F;
    font-size: 2em;
    margin-bottom: 20px;
}
.parent-form-container input, .parent-form-container select {
    width: 90%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 10px;
    border: 1px solid #fff;
    font-size: 1em;
}
.parent-submit-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 10px;
    background-color: #303F9F;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    transition: 0.3s;
}
.parent-submit-btn:hover {
    background-color: #3F51B5;
}

.school-form-container {
    max-width: 520px;
    margin: 50px auto;
    padding: 25px;
    background: #B2DFDB;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    text-align: center;
}
.school-form-container h1 {
    color: #00796B;
    font-size: 2em;
    margin-bottom: 20px;
}
.school-form-container input, .school-form-container select {
    width: 90%;
    padding: 10px;
    margin: 8px 0;
    border-radius: 10px;
    border: 1px solid #fff;
    font-size: 1em;
}
#other_board_div input {
    background-color: #E0F2F1;
}
.school-submit-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 10px;
    background-color: #00796B;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    transition: 0.3s;
}
.school-submit-btn:hover {
    background-color: #004D40;
}

.login-form-container {
    max-width: 450px;
    margin: 60px auto;
    padding: 25px;
    background: #FFF3E0;
    border-radius: 20px;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    text-align: center;
}
.login-form-container h1 {
    color: #FF6F00;
    font-size: 2em;
    margin-bottom: 20px;
}
.login-form-container input {
    width: 90%;
    padding: 12px;
    margin: 8px 0;
    border-radius: 10px;
    border: 1px solid #FFA726;
    font-size: 1em;
}
.login-submit-btn {
    padding: 10px 25px;
    border: none;
    border-radius: 10px;
    background-color: #FF6F00;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    transition: 0.3s;
}
.login-submit-btn:hover {
    background-color: #EF6C00;
}
.error-message {
    color: red;
    margin-bottom: 10px;
}
/* User Login Sign up CSS - End */

/* Pricing Subscription CSS - Start */

/* Pricing Section */
/* #pricing-section {
  text-align: center;
  padding: 20px;
} */
.pricing-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #ff6f61;
  /* font-family: 'Comic Sans MS', cursive, sans-serif; */
}
/* .pricing-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}
.pricing-card {
  background: #fff8dc;
  border: 3px solid #ffcc00;
  border-radius: 20px;
  width: 250px;
  padding: 20px;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.pricing-card:hover {
  transform: scale(1.05);
}
.plan-name {
  font-size: 1.5rem;
  color: #333;
}
.plan-price {
  font-size: 1.8rem;
  color: #ff5722;
  margin: 10px 0;
}
.plan-duration {
  font-size: 1rem;
  color: #555;
}
.subscribe-btn {
  display: inline-block;
  background: #ffcc00;
  color: #333;
  padding: 10px 20px;
  border-radius: 15px;
  text-decoration: none;
  font-weight: bold;
}
.subscribe-btn:hover {
  background: #ff9900;
  color: #fff;
} */

/* Status Section */
#status-section {
  text-align: center;
  margin-top: 30px;
}
.status-title {
  font-size: 2rem;
  margin-bottom: 20px;
  color: #009688;
}
.status-active {
  color: #4caf50;
  font-size: 1.2rem;
}
.status-expired {
  color: #f44336;
  font-size: 1.2rem;
}
.status-dates {
  margin-top: 10px;
  font-size: 1rem;
}

/* Pricing Subscription CSS - End */


/* RazorPay Payment Integration CSS - Start */

/* Payment & Pricing Styling for Kids */
/* .pricing-container {
    padding: 20px;
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.pricing-title {
    font-size: 2rem;
    color: #ff6f61;
    margin-bottom: 20px;
    font-family: 'Comic Sans MS', cursive, sans-serif;
}

.pricing-cards, .payment-card {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.pricing-card, .payment-card {
    background: #fffbf0;
    border: 2px solid #ffd700;
    border-radius: 15px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 8px 12px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.pricing-card:hover, .payment-card:hover {
    transform: scale(1.05);
}

.plan-name {
    font-size: 1.5rem;
    color: #ff6347;
    font-weight: bold;
}

.plan-price {
    font-size: 1.2rem;
    color: #228b22;
}

.subscribe-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px;
    background: #ff4500;
    color: white;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.3s ease;
}

.subscribe-btn:hover {
    background: #ff6347;
}

/* Responsive */
/* @media(max-width:768px){
    .pricing-cards, .payment-card {
        flex-direction: column;
        align-items: center;
    }
} */ */

/* RazorPay Payment Integration CSS - End */

/* Pricing Page CSS - Start */

/* ================================
Pricing Page Styles
================================ */

/* General Reset */
body, h1, h2, h3, p, div, section {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section {
  padding: 3rem 1.5rem;
}

/* Hero Section */
.pricing-hero-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffe066, #ff6b6b);
  color: #fff;
  text-align: center;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  padding: 4rem 1.5rem;
}

.pricing-hero-title {
  font-size: 2.5rem;
  font-weight: 800;
}

.pricing-hero-subtitle {
  margin: 1rem 1rem 30px;
  font-size: 1.2rem;
}

.pricing-hero-cta {
  background: #4dabf7;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 25px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}
.pricing-hero-cta:hover {
  background: #1c7ed6;
  transform: scale(1.05);
}

.pricing-hero-img {
  max-width: 280px;
  margin-top: 1.5rem;
  animation: pricing-float 3s ease-in-out infinite;
}

@keyframes pricing-float {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* Section Titles */
.pricing-section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 2rem;
  color: #444;
}

/* Free vs Premium */
.pricing-comparison-table {
  max-width: 900px;
  margin: 0 auto;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.pricing-comparison-row {
  display: flex;
  justify-content: space-between;
  background: #fff;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}
.pricing-comparison-row:nth-child(even) { background: #f8f9fa; }

.pricing-comparison-col {
  flex: 1;
  text-align: center;
  font-size: 0.95rem;
}

.pricing-feature {
  font-weight: bold;
  color: #495057;
}
.pricing-free {
  color: #ff922b;
}
.pricing-premium {
  color: #37b24d;
  font-weight: bold;
}

/* Features Section */
.pricing-feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.pricing-feature-card {
  background: #f8f0c7;
  border-radius: 20px;
  padding: 1rem;
  text-align: center;
  font-weight: bold;
  color: #495057;
  transition: transform 0.3s;
}
.pricing-feature-card:hover {
  transform: translateY(-5px);
  background: #ffe066;
}
.pricing-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

/* Plans Section */
.pricing-tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  gap: 10px;
}

.pricing-tab-btn {
  padding: 10px 20px;
  background: #f3f3f3;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.3s;
}

.pricing-tab-btn.active {
  background: #ffcc00;
  color: #000;
}

.pricing-tab-pane {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.pricing-tab-pane.active {
  display: flex;
}
/* .pricing-plans-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
} */
/* .pricing-plan-card {
  background: #fff;
  border-radius: 25px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  transition: 0.3s;
}
.pricing-plan-card:hover {
  transform: scale(1.05);
}
.pricing-plan-header {
  margin-bottom: 1rem;
}
.pricing-plan-name {
  font-size: 1.3rem;
  font-weight: bold;
  color: #333;
}
.pricing-plan-price {
  font-size: 1.5rem;
  color: #ff6b6b;
  margin: 0.5rem 0;
}
.pricing-plan-duration {
  font-size: 1rem;
  color: #666;
}
.pricing-plan-btn {
  background: #ff922b;
  color: #fff;
  padding: 0.7rem 1.5rem;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}
.pricing-plan-btn:hover {
  background: #f76707;
} */

/* Testimonials */
.pricing-trust-badges {
  display: flex;
  flex-wrap: wrap;            /* Wrap to next line if screen is small */
  justify-content: center;     /* Center badges horizontally */
  gap: 1rem;                   /* Space between badges */
  margin-top: 2rem;            /* Space below feature cards */
}
.pricing-badge {
  display: inline-block;
  background: #e9ecef;
  color: #333;
  margin: 0.3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 15px;
  font-size: 0.9rem;
}

/* FAQ Section */
.pricing-faq-container {
  max-width: 800px;
  margin: 0 auto;
}
.pricing-faq-item {
  margin-bottom: 1rem;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.pricing-faq-question {
  width: 100%;
  background: #74c0fc;
  color: #fff;
  border: none;
  padding: 1rem;
  text-align: left;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}
.pricing-faq-question:hover {
  background: #339af0;
}
.pricing-faq-answer {
  display: none;
  padding: 1rem;
  background: #f1f3f5;
  color: #333;
}

/* Final CTA */
.pricing-final-cta-section {
  background: linear-gradient(135deg, #63e6be, #5c7cfa);
  text-align: center;
  color: #fff;
  padding: 3rem 1.5rem;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
.pricing-final-cta-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}
.pricing-final-cta-btn {
  background: #ff922b;
  color: #fff;
  padding: 0.9rem 2rem;
  border-radius: 25px;
  font-size: 1.2rem;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}
.pricing-final-cta-btn:hover {
  background: #f76707;
  transform: scale(1.05);
}

/* Animation Visible Class */
.pricing-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  transition: all 0.6s ease-in-out;
}

/* Responsive */
@media (max-width: 768px) {
  .pricing-hero-title { font-size: 2rem; }
  .pricing-hero-subtitle { font-size: 1rem; }
  .pricing-plans-container { grid-template-columns: 1fr; }
  .pricing-feature-cards { grid-template-columns: 1fr 1fr; }
  .pricing-testimonial-cards { grid-template-columns: 1fr; }
}

/* Pricing Page CSS - End */

/* Dashboard CSS - Start */

/* Dashboard Styles (All IDs & Classes prefixed with dashboard-) */
.dashboard-container {
  max-width: 1200px;
  margin: auto;
}

.dashboard-header h2.dashboard-welcome {
  font-size: 2rem;
  color: #ff7f50;
}

.dashboard-subtitle {
  font-size: 1rem;
  color: #555;
}

.dashboard-card {
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  transition: transform 0.3s;
}

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

.dashboard-profile-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

.dashboard-btn {
  background: #ff5722;
  color: #fff;
  border: none;
  border-radius: 8px;
}

.dashboard-btn:hover {
  background: #e64a19;
  color: #fff;
}

.dashboard-feature-grid .dashboard-feature-card {
  cursor: pointer;
  border-radius: 12px;
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}

.dashboard-feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.dashboard-feature-icon {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

/* .dashboard-tts-icon {
  position: absolute;
  bottom: 15px;
  right: 15px;
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform 0.3s;
}

.dashboard-tts-icon:hover {
  transform: scale(1.3);
  color: #ff7f50;
} */

.dashboard-announcements {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #fff3e0;
  padding: 10px 0;
  border-radius: 10px;
}

.dashboard-announcement-track {
  display: flex;
  gap: 50px; /* proper spacing */
  white-space: nowrap;
  animation: dashboard-marquee 15s linear infinite;
  /* Make animation pause on hover */
}

.dashboard-announcements:hover .dashboard-announcement-track {
  animation-play-state: paused;
}

.dashboard-announcement-item {
  flex: 0 0 auto;
  font-weight: bold;
  color: #ff7f50;
  text-decoration: none; /* remove underline */
  transition: color 0.3s;
}

.dashboard-announcement-item:hover {
  color: #ff5722; /* hover color */
  cursor: pointer;
}

/* Keyframes for marquee */
@keyframes dashboard-marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.dashboard-subscription-card {
  /* background: linear-gradient(135deg, #ffe0b2, #ffcc80); */
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  padding: 20px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.dashboard-subscription-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.subscription-title {
  font-size: 1.5rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.subscription-status {
  font-weight: bold;
  margin-bottom: 5px;
}

.subscription-status.active {
  color: #28a745; /* green */
}

.subscription-status.pending {
  color: #ffc107; /* yellow */
}

.subscription-status.none {
  color: #dc3545; /* red */
}

.subscription-plan {
  font-size: 1.2rem;
  margin-bottom: 5px;
}

.subscription-end {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 10px;
}

.btn-dashboard-subscribe {
  background: #ff5722;
  color: #fff;
  border-radius: 50px;
  padding: 8px 20px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.3s, transform 0.3s;
}

.btn-dashboard-subscribe:hover {
  background: #e64a19;
  transform: translateY(-2px);
}


/* Edit Profile Page CSS - Start */

/* Edit Profile Card */
.editprofile-card {
  max-width: 600px;
  background: #fff7f0;
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.editprofile-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.editprofile-title {
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
}

/* Avatar / logo */
.editprofile-avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 3px solid #ff7f50;
}

.editprofile-avatar-placeholder {
  width: 120px;
  height: 120px;
  background: #ffd9b3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: #ff7f50;
}

/* Upload button */
.btn-editprofile-upload {
  display: inline-block;
  margin-top: 5px;
  background: #ff5722;
  color: #fff;
  padding: 6px 15px;
  border-radius: 50px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s;
}

.btn-editprofile-upload:hover {
  background: #e64a19;
}

/* Form fields */
.editprofile-fields .form-group label {
  font-weight: 500;
  margin-bottom: 5px;
}

.editprofile-fields .form-group input,
.editprofile-fields .form-group select,
.editprofile-fields .form-group textarea {
  width: 100%;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  transition: border 0.3s;
}

.editprofile-fields .form-group input:focus,
.editprofile-fields .form-group select:focus,
.editprofile-fields .form-group textarea:focus {
  border-color: #ff7f50;
  outline: none;
}

/* Buttons */
.btn-editprofile-save {
  background: #28a745;
  color: #fff;
  border-radius: 50px;
  padding: 8px 25px;
  font-weight: 500;
  transition: background 0.3s, transform 0.3s;
}

.btn-editprofile-save:hover {
  background: #218838;
  transform: translateY(-2px);
}

.btn-editprofile-cancel {
  background: #6c757d;
  color: #fff;
  border-radius: 50px;
  padding: 8px 25px;
  font-weight: 500;
  transition: background 0.3s, transform 0.3s;
}

.btn-editprofile-cancel:hover {
  background: #5a6268;
  transform: translateY(-2px);
}


/* Edit Profile Page CSS - End */

/* Signup_selection Page CSS - Start */

/* Signup Page Specific Styles */
.signup-container {
  text-align: center;
  padding: 30px;
}

.signup-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 20px;
  color: #333;
}

.signup-cards {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

/* Matching Card + Form Colors */
#kid-form { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }
#parent-form { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
#school-form { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); }

.signup-card {
  color: white;
  padding: 20px 30px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: 600;
  transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Assign gradient colors same as forms */
.signup-card.kid-card { background: linear-gradient(135deg, #ff9a9e, #fad0c4); }
.signup-card.parent-card { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }
.signup-card.school-card { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); }

.signup-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.25);
}

/* Forms */
.signup-form {
  max-width: 500px;
  margin: 0 auto 30px;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  animation: fadeIn 0.4s ease-in-out;
  transition: background 0.3s;
}

.signup-form h2 {
  margin-bottom: 20px;
  font-size: 1.6rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.signup-form .form-group {
  text-align: left;
  margin-bottom: 15px;
  text-align: center;
}

.signup-form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

.signup-form input,
.signup-form select {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: none;
  outline: none;
  font-size: 1rem;
  box-shadow: inset 2px 2px 6px rgba(0,0,0,0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.signup-form input:focus,
.signup-form select:focus {
  transform: scale(1.02);
  box-shadow: inset 2px 2px 10px rgba(0,0,0,0.2);
}

.signup-submit {
  width: 100%;
  padding: 12px;
  margin-top: 10px;
  border: none;
  font-size: 1.1rem;
  font-weight: bold;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.3s, transform 0.2s, box-shadow 0.2s;
  color: white;
}

/* Matching submit buttons */
#kid-form .signup-submit { background: #ff6a88; }
#parent-form .signup-submit { background: #4facfe; }
#school-form .signup-submit { background: #f093fb; }

.signup-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  filter: brightness(1.1);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Signup_selection Page CSS - End */

/* Additional Core Pages CSS - Start */

.legal-page {
  max-width: 900px;
  margin: auto;
  padding: 40px 20px;
  /* font-family: 'Comic Sans MS', 'Poppins', sans-serif; */
  color: #333;
  background: #fff9f3;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.1);
}

.legal-header {
  text-align: center;
  margin-bottom: 30px;
}

.legal-header h1 {
  font-size: 2.2rem;
  color: #ff6f3c;
}

.legal-subtitle {
  font-size: 1.1rem;
  color: #777;
}

.legal-icon {
  width: 80px;
  margin-bottom: 10px;
}

.legal-content h2 {
  margin-top: 20px;
  color: #3c9dff;
}

.legal-content p, 
.legal-content li {
  font-size: 1rem;
  line-height: 1.6;
}

/* About Page CSS - Start */

/* Common Container */
.rk-about-container, .rk-contact-container {
  max-width: 1100px;
  margin: auto;
  padding: 40px 20px;
  text-align: center;
}

/* ABOUT US PAGE */
.rk-about-hero {
  background: linear-gradient(135deg, #ffe7ba, #ffd6a0);
  padding: 40px 20px;
  color: #333;
  border-bottom: 5px solid #ffb347;
}

.rk-about-title { font-size: 2.5rem; font-weight: bold; }
.rk-about-subtitle { font-size: 1.1rem; margin-top: 8px; }

.rk-section-heading {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: #444;
}

.rk-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}

/* Card container */
.rk-feature-card {
  background: #fff6e6;           /* soft kid-friendly background */
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth hover */
}

/* Link wrapper for full-card click */
.rk-feature-card-link {
  display: block;       /* make link cover the div */
  text-decoration: none; /* remove underline */
  color: inherit;        /* keep text color */
}

/* Hover effect for card */
.rk-feature-card-link:hover .rk-feature-card {
  cursor: pointer;
  transform: translateY(-5px); /* subtle lift */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* stronger shadow */
}

.rk-love-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.rk-love-card {
  background: #e6f7ff;
  border-radius: 15px;
  padding: 20px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* About Page CSS - End */

/* CONTACT PAGE */
/* Contact Page CSS - Start */

/* Container */
.rk-contact-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Hero */
.rk-contact-hero {
  background: linear-gradient(135deg, #ffe7ba, #ffd6a0);
  padding: 60px 20px;
  text-align: center;
  border-bottom: 5px solid #00bcd4;
}

.rk-contact-title { font-size: 2.5rem; font-weight: bold; }
.rk-contact-subtitle { font-size: 1.1rem; margin-top: 8px; }

/* Contact Grid Layout */
.rk-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 40px;
}

/* Contact Card Style */
.rk-contact-card {
  background: #fff6e6;
  padding: 30px 25px;
  border-radius: 15px;
  box-shadow: 0 6px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
 
}

.rk-contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* Contact Info */
.rk-contact-card h2 {
  margin-bottom: 20px;
  font-size: 1.5rem;
}
.rk-contact-card p {
  margin-bottom: 12px;
  font-size: 1rem;
  color: #333;
}
.rk-contact-map {
  margin-top: 20px;
  border-radius: 10px;
  overflow: hidden;
}

/* Form Styling */
.rk-field-group {
  margin-bottom: 20px;
}

.rk-field-group input,
.rk-field-group textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.rk-field-group textarea {
  height: 100px;   /* compact textarea */
  resize: vertical;   /* user can expand if needed */
}


.rk-field-group input:focus,
.rk-field-group textarea:focus {
  border-color: #007bff;
  outline: none;
}

/* Submit Button */
#rk-submit-btn {
  padding: 14px 30px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color 0.3s;
}
#rk-submit-btn:hover {
  background-color: #0056b3;
}

/* Messages */
.rk-success-msg {
  margin-top: 15px;
  color: green;
  font-weight: 500;
}
.rk-error-msg {
  margin-top: 15px;
  color: red;
  font-weight: 500;
}
.rk-error-field {
  color: red;
  font-size: 0.9rem;
  display: block;
  margin-top: 6px;
}

/* Responsive - Mobile */
@media (max-width: 992px) {
  .rk-contact-grid {
    grid-template-columns: 1fr;
  }
  .rk-contact-card {
    margin-bottom: 25px;
  }
}

/* Required: ensure page has meta viewport set:
   <meta name="viewport" content="width=device-width, initial-scale=1">
*/

/* --- Variables (only essentials) --- */
:root{
  --bg: #fff;
  --card-bg: linear-gradient(90deg,#fbfbfd,#fff);
  --accent1:#5b6bff;
  --accent2:#39c7ff;
  --text:#1f2937;
  --muted:#55606a;
  --border: rgba(45,55,72,0.06);
}

/* Reset box-sizing for this component */
.rk-livechat-strip,
.rk-livechat-inner,
.rk-livechat-content,
.rk-livechat-action,
.rk-livechat-cta{box-sizing:border-box}

/* Outer spacing */
.rk-livechat-strip{width:100%;padding:18px 12px;background:#fdf6e3}

/* Card container */
.rk-livechat-inner{
  max-width:1180px;
  margin:0 auto;
  background:var(--card-bg);
  border-radius:12px;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  box-shadow:0 8px 30px rgba(20,30,60,0.06);
}

/* Content area */
.rk-livechat-content{flex:1 1 auto;min-width:0;padding-right:8px}
.rk-livechat-title{margin:0 0 4px;color:var(--text);font-weight:700;line-height:1.12;font-size:clamp(15px,2.2vw,18px)}
.rk-livechat-sub{margin:0;color:var(--muted);font-size:clamp(13px,1.8vw,14px);opacity:.95;}

/* Action area & CTA */
.rk-livechat-action{flex:0 0 220px;display:flex;align-items:center;justify-content:flex-end;min-width:120px}
.rk-livechat-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#fff;font-weight:800;font-size:clamp(14px,1.6vw,15px);
  text-decoration:none;box-shadow:0 8px 26px rgba(64,86,255,0.16);
  width:100%;max-width:220px;text-align:center;
  transition:transform .18s,box-shadow .18s,opacity .12s;
}

/* Hover & keyboard focus */
.rk-livechat-cta:hover,
.rk-livechat-cta:focus{transform:translateY(-3px);box-shadow:0 14px 40px rgba(64,86,255,0.22);opacity:.98;outline:none}
.rk-livechat-cta:focus-visible{box-shadow:0 0 0 4px rgba(91,107,255,0.12),0 14px 40px rgba(64,86,255,0.22);border-radius:12px}

/* small accent bar (optional) */
.rk-livechat-inner::before{
  content:"";width:6px;height:56px;border-radius:6px;
  background:linear-gradient(180deg,var(--accent1),var(--accent2));
  flex-shrink:0;margin-right:12px;
}

/* Responsive: stack on narrow screens */
@media (max-width:640px){
  .rk-livechat-inner{flex-direction:column;align-items:stretch;}
  .rk-livechat-inner::before{display:none}
  .rk-livechat-content{order:1;padding-right:0}
  .rk-livechat-action{order:2;justify-content:center;flex:auto;width:100%}
  .rk-livechat-cta{max-width:none;width:100%;padding:12px}
}

/* Ultra-narrow devices (320px) */
@media (max-width:380px){
  .rk-livechat-strip{padding:10px 8px}
  .rk-livechat-inner{border-radius:10px;}
  .rk-livechat-title{font-size:15px}
  .rk-livechat-sub{font-size:12px}
  .rk-livechat-cta{font-size:13px;padding:10px;border-radius:10px}
}

/* Ensure long text wraps */
.rk-livechat-title, .rk-livechat-sub{word-wrap:break-word;overflow-wrap:anywhere}


/* Contact Page CSS - End */

/* Additional Core Pages CSS - End */

/* Footer CSS - Start */

/* Kid Footer */
.kid-footer {
  background: #fff6e6;
  color: #333;
}

.kid-footer-top {
  border-top: 4px solid #ffcc70;
}

.kid-footer-title {
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #ff7b54;
}

.kid-footer-text {
  font-size: 0.9rem;
  color: #444;
}

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

.kid-footer-links a {
  color: #444;
  text-decoration: none;
  transition: color 0.2s;
}

.kid-footer-links a:hover {
  color: #ff7b54;
}

.kid-footer-social img {
  width: 30px;
  height: 30px;
  transition: transform 0.2s;
}

.kid-footer-social img:hover {
  transform: scale(1.2);
}

.kid-footer-bottom {
  background: #ffb74d;
  color: #222;
  font-weight: 600;
}

/* Footer CSS - End */

/* Payment Create Order Page CSS - Start */

/* ---------- Payment Page Styling (Unique, Non-Conflicting) ---------- */
#payment-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: linear-gradient(135deg, #fff6e6, #ffe1cc);
  min-height: 100vh;
}

.payment-container {
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  padding: 30px 25px 40px;
  text-align: center;
  transition: transform 0.3s ease;
}

.payment-container:hover {
  transform: translateY(-5px);
}

.payment-header {
  margin-bottom: 25px;
}

.payment-header h2 {
  font-size: 1.8rem;
  color: #333;
  font-weight: 700;
  margin-bottom: 10px;
}

.payment-header p {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

.payment-details {
  text-align: left;
  margin-top: 15px;
  margin-bottom: 30px;
  background: #fff6e6;
  padding: 15px 20px;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.payment-details strong {
  color: #000;
}

#razorpay-form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#razorpay-form script {
  margin-top: 20px;
}

.note-text {
  font-size: 0.9rem;
  color: #888;
  margin-top: 15px;
}

/* ---------- Fancy Styling for Razorpay Default Button ---------- */
#razorpay-form > .razorpay-payment-button {
  background: linear-gradient(135deg, #ff9966, #ff5e62);
  color: #fff !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  padding: 12px 30px !important;
  border: none !important;
  border-radius: 50px !important;
  cursor: pointer !important;
  box-shadow: 0 4px 10px rgba(255, 100, 80, 0.3);
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  display: inline-block !important;
}

#razorpay-form > .razorpay-payment-button:hover {
  background: linear-gradient(135deg, #ff5e62, #ff9966);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 80, 60, 0.4);
}

#razorpay-form > .razorpay-payment-button:active {
  transform: scale(0.97);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 600px) {
  #payment-section {
    padding: 40px 15px;
  }

  .payment-container {
    padding: 25px 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  }

  .payment-header h2 {
    font-size: 1.5rem;
  }

  .payment-details {
    font-size: 0.95rem;
    padding: 12px 15px;
  }

  #razorpay-form > .razorpay-payment-button {
    font-size: 1rem !important;
    padding: 10px 24px !important;
  }
}

/* Payment Create Order Page CSS - End */

/* Subscription Status Page CSS - Start */

/* ---------- Subscription Status Page Styling (Unique & Safe) ---------- */
#subscription-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 60px 20px;
  background: linear-gradient(135deg, #fff6e6, #ffe1cc);
  min-height: 100vh;
  text-align: center;
}

.subscription-status-container {
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  padding: 35px 25px 45px;
  transition: transform 0.3s ease;
}

.subscription-status-container:hover {
  transform: translateY(-5px);
}

.subscription-status-title {
  font-size: 1.8rem;
  color: #333;
  font-weight: 700;
  margin-bottom: 30px;
}

/* ---------- Status Card Styles ---------- */
.status-card {
  border-radius: 15px;
  padding: 25px 20px;
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.active-status-card {
  background: linear-gradient(135deg, #b2f5ea, #81e6d9);
  color: #065f46;
  border: 2px solid #38b2ac;
}

.pending-status-card {
  background: linear-gradient(135deg, #fefcbf, #fbd38d);
  color: #744210;
  border: 2px solid #f6ad55;
}

.no-subscription-card {
  background: linear-gradient(135deg, #fed7d7, #feb2b2);
  color: #742a2a;
  border: 2px solid #fc8181;
}

/* ---------- Buttons ---------- */
.subscribe-btn {
  display: inline-block;
  background: linear-gradient(135deg, #ff9966, #ff5e62);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  padding: 10px 25px;
  border-radius: 30px;
  text-decoration: none;
  margin-top: 15px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 100, 80, 0.3);
}

.subscribe-btn:hover {
  background: linear-gradient(135deg, #ff5e62, #ff9966);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(255, 80, 60, 0.4);
}

/* ---------- Celebration Emoji Animation ---------- */
.celebration {
  font-size: 1.5rem;
  margin-top: 10px;
  animation: floatCelebration 2.5s ease-in-out infinite alternate;
}

@keyframes floatCelebration {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* ---------- Footer Navigation Links ---------- */
.status-footer-links {
  margin-top: 25px;
  font-size: 0.95rem;
  color: #555;
}

.status-footer-links a {
  color: #ff5e62;
  font-weight: 600;
  text-decoration: none;
  margin: 0 8px;
  transition: color 0.3s ease;
}

.status-footer-links a:hover {
  color: #ff9966;
}

/* ---------- Mobile Responsive ---------- */
@media (max-width: 600px) {
  #subscription-status {
    padding: 40px 15px;
  }

  .subscription-status-container {
    padding: 25px 20px 35px;
  }

  .subscription-status-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }

  .status-card {
    font-size: 1rem;
    padding: 20px 15px;
  }

  .subscribe-btn {
    font-size: 0.95rem;
    padding: 8px 20px;
  }

  .status-footer-links {
    font-size: 0.9rem;
  }
}

/* Subscription Status Page CSS - End */

/* Remove Additional Space from Header and Footer CSS - Start */

/* ===== Global Layout Spacing Fix ===== */

/* Remove unnecessary padding/margin between header, main content, and footer */
main.py-4 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Reduce footer top margin so content sits tighter */
.kid-footer.mt-5 {
  margin-top: 20px !important; /* You can set 0 if you want it perfectly tight */
}

/* Remove Additional Space from Header and Footer CSS - End */

.mb-3 {
  margin-top: 30px;
}


/* Pricing Page Card New CSS - Start */

/* ===== Compact Pricing Plan Cards - Optimized for 4 in row ===== */
.pricing-plans-compact-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 0.5rem;
}

.pricing-plan-compact-card {
  background: linear-gradient(145deg, #ffffff 0%, #f8faff 100%);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border: 2px solid #e8f4ff;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 320px;
}

.pricing-plan-compact-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
}

.pricing-plan-compact-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  border-color: #45b7d1;
}

/* Kid Plan Specific Styles */
.kid-plan-card {
  background: linear-gradient(145deg, #ffffff 0%, #fff9f9 100%);
  border-color: #ffd6d6;
}

.kid-plan-card::before {
  background: linear-gradient(90deg, #ff9a9e, #fad0c4, #fad0c4, #ff9a9e);
}

/* School Plan Specific Styles */
.school-plan-card {
  background: linear-gradient(145deg, #ffffff 0%, #f0f9ff 100%);
  border-color: #b3e0ff;
}

.school-plan-card::before {
  background: linear-gradient(90deg, #4facfe, #00f2fe, #00f2fe, #4facfe);
}

/* Compact Plan Ribbons */
.plan-card-ribbon {
  position: absolute;
  top: 12px;
  right: -28px;
  background: linear-gradient(45deg, #ff6b6b, #ff8e8e);
  color: white;
  padding: 6px 35px;
  font-size: 0.75rem;
  font-weight: bold;
  transform: rotate(45deg);
  box-shadow: 0 2px 10px rgba(255, 107, 107, 0.3);
}

.school-ribbon {
  background: linear-gradient(45deg, #4ecdc4, #45b7d1);
}

/* Compact Plan Header */
.pricing-plan-compact-header {
  text-align: center;
  margin-bottom: 1rem;
  flex-shrink: 0;
}

.plan-compact-icon {
  font-size: 2rem;
  margin-bottom: 0.8rem;
  display: block;
}

.pricing-plan-compact-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.pricing-plan-compact-duration {
  color: #7f8c8d;
  font-size: 0.85rem;
  margin-bottom: 0.8rem;
}

.student-compact-count {
  color: #3498db;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

/* Compact Price Container */
.price-compact-container {
  margin: 1rem 0;
}

.original-compact-price {
  color: #95a5a6;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
}

.pricing-plan-compact-price {
  font-size: 1.8rem;
  font-weight: bold;
  color: #2c3e50;
  margin: 0.3rem 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pricing-plan-compact-savings {
  color: #27ae60;
  font-weight: bold;
  font-size: 0.8rem;
  background: #e8f6f3;
  padding: 3px 10px;
  border-radius: 15px;
  display: inline-block;
}

.pricing-plan-compact-validity {
  color: #7f8c8d;
  font-size: 0.8rem;
  margin-top: 0.3rem;
}

/* Compact Plan Features */
.pricing-plan-compact-features {
  margin: 1rem 0;
  flex-grow: 1;
}

.plan-compact-feature {
  padding: 0.5rem 0;
  border-bottom: 1px solid #ecf0f1;
  color: #2c3e50;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  line-height: 1.2;
}

.plan-compact-feature:last-child {
  border-bottom: none;
}

/* Compact Plan Footer */
.pricing-plan-compact-footer {
  text-align: center;
  flex-shrink: 0;
  margin-top: auto;
}

.plan-compact-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 0.8rem 1rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-decoration: none;
  border-radius: 12px;
  font-weight: bold;
  font-size: 0.9rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.plan-compact-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
  color: white;
}

.school-compact-btn {
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}

.school-compact-btn:hover {
  box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}

.btn-compact-icon {
  font-size: 1rem;
}

.plan-compact-guarantee {
  margin-top: 0.8rem;
  color: #7f8c8d;
  font-size: 0.75rem;
  font-style: italic;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .pricing-plans-compact-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 1rem;
  }
}

@media (max-width: 768px) {
  .pricing-plans-compact-container {
    grid-template-columns: 1fr;
    gap: 1.2rem;
    max-width: 400px;
  }
  
  .pricing-plan-compact-card {
    padding: 1.5rem;
    min-height: 300px;
  }
}

/* Animation for compact card entrance */
@keyframes compactCardEntrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pricing-plan-compact-card {
  animation: compactCardEntrance 0.5s ease-out;
}

.pricing-plan-compact-card:nth-child(2) {
  animation-delay: 0.1s;
}

.pricing-plan-compact-card:nth-child(3) {
  animation-delay: 0.2s;
}

.pricing-plan-compact-card:nth-child(4) {
  animation-delay: 0.3s;
}