:root {
  --st-primary:#0A63E8;
  --st-secondary:#1BB2FF;
  --st-light:#f9f9f9;
}

/* ========== Base ========== */
body {
  margin:0;
  overflow-x:hidden;
  font-family:Arial,sans-serif;
}
.site-content .ast-container {
  padding:0!important;
  margin:0!important;
  min-width:100%!important;
}
.wp-block-latest-posts,.wp-block-tag-cloud{ padding:20px; }
.st-wrapper { width:100%; display:block; overflow:hidden; }
.st-section { width:100%; padding:80px 20px; box-sizing:border-box; }
.st-section.st-alt { background:var(--st-light); }
.st-inner { max-width:1200px; margin:0 auto; }
.st-title { text-align:center; font-size:32px; margin-bottom:40px; }

/* ========== Hero Section ========== */
.st-hero {
  background:linear-gradient(-45deg,var(--st-primary),var(--st-secondary),#6C63FF,var(--st-secondary));
  background-size:400% 400%;
  animation:st-gradient 12s ease infinite;
  color:#fff;
  text-align:center;
  padding:140px 20px;
  overflow:hidden;
}
@keyframes st-gradient {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
.st-hero-title {
  font-size:52px; margin-bottom:20px;
  opacity:0; animation:st-fadeUp 1s ease forwards;
}
.st-hero-sub {
  font-size:20px; margin-bottom:40px;
  opacity:0; animation:st-fadeUp 1s ease forwards .5s;
}
.st-hero-btn {
  background:#fff; color:var(--st-primary);
  padding:14px 32px; border-radius:6px; text-decoration:none;
  font-weight:600; opacity:0; display:inline-block;
  animation:st-fadeUp 1s ease forwards 1s;
}
.st-hero-btn:hover { background:#000; color:#fff; }
@keyframes st-fadeUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
 
.st-hero-title,
.st-hero-sub,
.st-hero-btn {
  opacity:0;
  transform:translateY(30px);
  transition:all 1s ease;
}
.st-hero.st-hero-visible .st-hero-title {
  opacity:1; transform:translateY(0); transition-delay:0s;
}
.st-hero.st-hero-visible .st-hero-sub {
  opacity:1; transform:translateY(0); transition-delay:.3s;
}
.st-hero.st-hero-visible .st-hero-btn {
  opacity:1; transform:translateY(0); transition-delay:.6s;
}

/* Hero text color fix */
.st-hero-title {
  color:#fff; /* pure white for max contrast */
  text-shadow:0 2px 6px rgba(0,0,0,0.3); /* readability boost */
}
.st-hero-sub {
  color:#f1f1f1; /* lighter gray-white */
}
.st-hero-btn {
  background:#fff;
  color:var(--st-primary);
}
.st-hero-btn:hover {
  background:#000;
  color:#fff;
}



/* ========== Stats Section ========== */
.st-stats { display:flex; justify-content:space-around; text-align:center; gap:20px; flex-wrap:wrap; }
.st-stat { flex:1; background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.05); min-width:150px; }
 
.st-stat p { margin:0; color:#555; }
.st-stat h3 {
  font-size: 28px;
  margin: 0;
  color: var(--st-primary);
  transition: transform .3s ease;
}
.st-stat:hover h3 {
  transform: scale(1.1);
}


/* ========== Grid Sections (Subjects / Posts) ========== */

.st-grid { display:grid; gap:24px; }

/*------  posts card-------- */
.st-card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  background: #fff; /* later colorThief se set kar sakte ho */
}

.st-thumb-wrap {
  position: relative;
}

.st-thumb-wrap img {
  width: 100%;
  display: block;
  border-radius: 10px;
}

.st-thumb-overlay {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  padding: 6px 10px;
  display: flex;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0));
}

.st-meta {
  background: rgba(0,0,0,0.35);
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Subjects scroll wrapper */
.st-subjects-wrapper {
  position: relative;
  overflow: hidden;
}

/* Subjects grid scroll */
.st-subjects {
  display: grid;
  grid-auto-flow: column;             /* horizontal flow */
  grid-template-rows: repeat(2, auto);/* exactly 2 rows */
  grid-auto-columns: 220px;           /* card width */
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 10px 40px; /* space for buttons */
}

.st-subjects::-webkit-scrollbar {
  height: 8px;
}
.st-subjects::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 4px;
}

.st-subjects .st-card {
  scroll-snap-align: start;
  background:#fff;
  border:1px solid #eee;
  border-radius:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:all .3s ease;
}
.st-subjects .st-card {
  position: relative;
  width: 220px; /* adjust as needed */
  height: 140px;
  border-radius: 10px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.st-subjects .st-card .st-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(25, 87, 156, 0.5); /* #19579c 50% opacity */
  display: flex;
  align-items: center;
  justify-content: center;
}

.st-subjects .st-card h4 {
  position: relative;
  color: #FFD700; /* try golden: #FFD700 */
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  z-index: 2;
}


/* Scroll buttons */
.st-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  z-index: 10;
}
.st-scroll-btn.left { left: 5px; }
.st-scroll-btn.right { right: 5px; }
.st-scroll-btn:hover { background: rgba(0,0,0,0.8); }

.st-stories,
.st-subjects{
  scrollbar-width: none;   /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
.st-stories::-webkit-scrollbar,
.st-subjects::-webkit-scrollbar{
  display:none; /* Chrome/Safari */
}
 


/*------------ */
.st-posts { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }

.post-thumb-img-content {
  height: 250px;           /* ✅ fixed height */
  width: 100%;
  background: #f5f5f5;
  overflow: hidden;
}

.post-thumb-img-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* ✅ maintain ratio, fill width */
  object-position: center; /* ✅ center part visible */
  display: block;
}
.st-story-card{
  position:relative;
  width:250px;flex-shrink:0;margin:0 10px;
  background:#111;border-radius:12px;overflow:hidden;
  color:#fff;
}
.st-img-wrap{position:relative;height:180px;overflow:hidden;}
.st-img-wrap img{width:100%;height:100%;object-fit:cover;}
.st-overlay{
  position:absolute;top:0;left:0;width:100%;height:100%; pointer-events: none;
  background:linear-gradient(to bottom,rgba(0,0,0,0.6),transparent,rgba(0,0,0,0.7));
}
.st-slides{
  display:flex;gap:2px;padding:5px;position:absolute;top:5px;left:0;width:100%;
}
.st-slides span{
  flex:1;height:4px;background:rgba(255,255,255,0.4);border-radius:2px;
}
.st-title-text{padding:8px;font-size:14px;text-align:center;background:#111;}
.st-carousel{display:flex;align-items:center;}
.st-stories{display:flex;overflow-x:auto;scroll-behavior:smooth;}
.st-prev,.st-next{background:#000;color:#fff;border:0;padding:10px;cursor:pointer;}
.st-modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.st-modal-content {
  position: relative;
  width: 90%;
  max-width: 500px;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
}
.st-close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 18px;
  cursor: pointer;
  z-index: 10000;
}


/* ========== Card Styles ========== */
.st-card {
  background:#fff; border:1px solid #eee; border-radius:10px;
  padding:20px; box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:.3s; text-align:center;
}
.st-card:hover { transform:translateY(-5px); box-shadow:0 6px 16px rgba(0,0,0,.1); }
.st-card h3 { margin-bottom:12px; font-size:20px; }
.st-card a { color:var(--st-primary); text-decoration:none; }

/* Thumbnail */
.st-thumb { margin-bottom:15px; }
.st-thumb-img { width:100%; height:180px; object-fit:cover; border-radius:8px; }

/* ========== Quote Section ========== */
.st-quote {
  background:var(--st-primary); color:#fff;
  text-align:center; padding:60px 20px; border-radius:12px;
}
.st-quote h3 { font-size:24px; font-style:italic; }

/* ========== Video + Text Section ========== */
.st-flex { display:flex; gap:40px; align-items:center; flex-wrap:wrap; }
.st-video-box, .st-quote-box { flex:1; }
.st-video-box iframe { width:100%; border-radius:12px; }
.st-quote-box { font-size:18px; color:#444; }

/* ========== Banner Section ========== */
.st-banner {
  background:var(--st-secondary); color:#fff;
  text-align:center; padding:40px; border-radius:12px;
}
.st-banner h2 { margin-bottom:10px; }

/* ========== Testimonials Section ========== */
.st-testimonials { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; }
.st-testimonial {
  background:#fff; padding:20px; border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.st-testimonial p { font-style:italic; color:#333; }

/* ========== FAQ Section ========== */
.st-faq-item { margin-bottom:15px; }
.st-faq-q {
  background:#eee; padding:12px; border-radius:6px;
  cursor:pointer; font-weight:600;
}
.st-faq-a { display:none; padding:10px; }

/* ========== Quiz Section ========== */
.st-quiz-widget { display:flex; gap:40px; align-items:flex-start; flex-wrap:wrap; }
.st-quiz-box {
  flex:2; background:#fff; padding:20px;
  border-radius:12px; box-shadow:0 4px 12px rgba(0,0,0,.08);
  transition:.3s;
}
.st-quiz-box.fullscreen {
  position:fixed; top:0; left:0;
  width:100%; height:100%;
  background:#fff; padding:40px;
  overflow:auto; z-index:9999;
}
.st-options { list-style:none; padding:0; margin:0; }
.st-options li {
  cursor:pointer; padding:8px 12px; margin-bottom:6px;
  background:#fafafa; border:1px solid #ddd;
  border-radius:6px; transition:.3s;
}
.st-options li:hover { background:#eef5ff; }
.st-options li.correct { background:#d4f8d4!important; border-color:#28a745; }
.st-options li.incorrect { background:#ffd6d6!important; border-color:#dc3545; }
.st-quiz-cta { flex:1; background:var(--st-light); padding:30px; border-radius:12px; text-align:center; }
.st-quiz-cta p { margin-top:15px; font-size:16px; color:#555; }
.chip {
  background:var(--st-primary); color:#fff;
  border:none; padding:8px 16px; margin:5px;
  border-radius:20px; cursor:pointer; transition:.3s;
}
.chip:hover { background:#000; }

/* ========== Contact Section ========== */
.st-contact-form { max-width:600px; margin:0 auto; }
.st-contact-form input,.st-contact-form textarea {
  width:100%; padding:12px; margin-bottom:16px;
  border:1px solid #ddd; border-radius:6px;
}
.st-contact-form button {
  background:var(--st-primary); color:#fff;
  border:none; padding:14px 32px;
  border-radius:6px; cursor:pointer; font-weight:600;
}
.st-contact-form button:hover { background:#000; }

/* ========== Footer ========== */
.st-footer { background:var(--st-primary); color:#ccc; text-align:center; padding:30px; }
.st-footer a { color:#fff; margin:0 10px; text-decoration:none; }

/* ========== Responsive ========== */
@media(max-width:768px){
  .st-flex{flex-direction:column;}
  .st-stats{flex-direction:column;}
}

/* ========== Subjects Section Extra ========== */
#st-subjects .st-card {
  background:#fff; border:1px solid #eee; border-radius:12px;
  padding:0; overflow:hidden;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:all .3s ease;
}
#st-subjects .st-card:hover {
  transform:translateY(-6px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}
#st-subjects .st-thumb { width:100%; height:160px; overflow:hidden; }
#st-subjects .st-thumb-img { width:100%; height:100%; object-fit:cover; transition:.4s; }
#st-subjects .st-card:hover .st-thumb-img { transform:scale(1.1); }
#st-subjects h3 {
  font-size:18px; margin:15px 0; padding:0 10px;
  font-weight:600; color:#333;
}

/* ========== Community Section ========== */
#st-community .st-card { text-align:center; padding:30px 20px; }
#st-community .st-card h3 { margin:15px 0 10px; font-size:20px; }
#st-community .st-card p { font-size:15px; color:#666; margin-bottom:15px; }
#st-community .st-card a { display:inline-block; margin:4px 0; font-weight:600; color:var(--st-primary); }
#st-community .st-card a:hover { color:#000; }


/*  Animation */
.st-section {
  

  align-items: center;
  justify-content: center;
  transition: transform 0.8s ease-out;
}

/* odd = dark bg */
.st-section:nth-of-type(odd) {
  background: #19579c;
}
.st-section:nth-of-type(odd) .st-title {
  color: #fff; /* light text on dark bg */
}

/* even = light bg */
.st-section:nth-of-type(even) {
  background: whitesmoke;
}
.st-section:nth-of-type(even) .st-title {
  color: #222; /* dark text on light bg */
}

/* special section 5 */
.st-section:nth-of-type(5) {
  background: #ff7f50;
}
.st-section:nth-of-type(5) .st-title {
  color: #fff; /* coral is mid-dark → white text looks better */
}


.st-section.scroll-effect {
  transform: translateY(0);
}
.st-section.before {
  transform: translateY(80px); /* neeche se thoda uthe hue lagenge */
}