/* ==========================================================================
   Raga Roots Music Academy — Design Tokens
   Palette:
     --ink        #14213D  (deep navy — headers, dark sections)
     --saffron    #D4A017  (primary accent — tradition, warmth)
     --maroon     #7A2E2E  (secondary accent — depth, richness)
     --ivory      #F7F3E9  (light section background)
     --charcoal   #2B2B2B  (body text)
     --teal       #3A6B65  (tertiary accent — links/hover)
   Type: Cormorant Garamond (display) + Poppins (body/utility)
   Signature: continuous "meend" (melodic bend) wave — a sitar-string curve
              used as a section-divider motif throughout the site.
   ========================================================================== */

/* ---------------- CDN fallback safety net ----------------
   If Bootstrap's CDN is ever blocked, these keep the page from
   looking totally broken (basic flex layout + button shape). */
.row{ display:flex; flex-wrap:wrap; margin-left:-.75rem; margin-right:-.75rem; }
.row > *{ padding-left:.75rem; padding-right:.75rem; }
.btn{ display:inline-block; padding:.5rem 1.2rem; border-radius:6px; cursor:pointer; text-align:center; }
.navbar-nav{ display:flex; flex-wrap:wrap; list-style:none; padding:0; margin:0; }

:root{
  --ink:#14213D;
  --ink-2:#1D2C52;
  --saffron:#D4A017;
  --saffron-light:#E8C25C;
  --maroon:#7A2E2E;
  --ivory:#F7F3E9;
  --ivory-2:#FBF9F3;
  --charcoal:#2B2B2B;
  --teal:#3A6B65;
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-body:'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --radius:10px;
  --shadow-soft: 0 10px 30px rgba(20,33,61,0.08);
  --shadow-strong: 0 18px 45px rgba(20,33,61,0.18);
}

*{ scroll-behavior:smooth; }

body{
  font-family:var(--font-body);
  color:var(--charcoal);
  background:#fff;
  overflow-x:hidden;
}

h1,h2,h3,h4,.display-font{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:700;
  letter-spacing:.2px;
}

h2.section-title{
  font-size:2.5rem;
  margin-bottom:.5rem;
}

.section-eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:2.5px;
  font-size:.75rem;
  font-weight:600;
  color:var(--maroon);
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:.75rem;
}
.section-eyebrow::before{
  content:"";
  width:26px;height:2px;background:var(--saffron);display:inline-block;
}

.section-lead{
  color:#5b5b5b;
  max-width:620px;
}

a{ color:var(--teal); text-decoration:none; }
a:hover{ color:var(--maroon); }

.btn-cta{
  background:var(--saffron);
  border:1px solid var(--saffron);
  color:var(--ink);
  font-weight:600;
  padding:.65rem 1.5rem;
  border-radius:50px;
  transition:all .25s ease;
}
.btn-cta:hover{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
  transform:translateY(-2px);
}
.btn-outline-ink{
  border:1.5px solid var(--ink);
  color:var(--ink);
  border-radius:50px;
  font-weight:600;
  padding:.6rem 1.4rem;
}
.btn-outline-ink:hover{ background:var(--ink); color:#fff; }

.bg-ivory{ background:var(--ivory); }
.bg-ink{ background:var(--ink); color:#fff; }
.bg-ink h1,.bg-ink h2,.bg-ink h3{ color:#fff; }
.text-saffron{ color:var(--saffron) !important; }
.text-maroon{ color:var(--maroon) !important; }
.text-teal{ color:var(--teal) !important; }

.section{ padding:5.5rem 0; }
@media (max-width:768px){ .section{ padding:3.25rem 0; } }

/* ---------------- Topbar & Navbar ---------------- */
.topbar{
  background:var(--ink);
  color:#cdd3e0;
  font-size:.85rem;
}
.topbar a{ color:#cdd3e0; margin-right:1.25rem; }
.topbar a:hover{ color:var(--saffron); }
.topbar-social a{ margin-right:0; margin-left:1rem; }

.main-navbar{
  background:#fff;
  box-shadow:0 2px 18px rgba(20,33,61,0.07);
  padding:.7rem 0;
  z-index:1030;
}
.navbar-brand{ display:flex; align-items:center; gap:.6rem; }
.brand-mark{
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(145deg,var(--ink),var(--ink-2));
  color:var(--saffron);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  border:2px solid var(--saffron);
}
.brand-text{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.35rem;
  color:var(--ink);
  line-height:1.1;
}
.brand-text em{ display:block; font-style:normal; font-size:.62rem; letter-spacing:2px; text-transform:uppercase; color:var(--maroon); font-family:var(--font-body); font-weight:600; }

.navbar-nav .nav-link{
  color:var(--charcoal);
  font-weight:500;
  padding:.5rem 1rem !important;
  position:relative;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover{ color:var(--maroon); }
.dropdown-menu{ border:none; box-shadow:var(--shadow-strong); border-radius:12px; padding:.6rem; }
.dropdown-item{ border-radius:8px; padding:.5rem .75rem; }
.dropdown-item:hover{ background:var(--ivory); color:var(--maroon); }

/* ---------------- Signature wave divider (meend motif) ---------------- */
.wave-divider{
  display:block;
  width:100%;
  line-height:0;
}
.wave-divider svg{ width:100%; height:60px; display:block; }
.wave-divider.flip{ transform:rotate(180deg); }

/* ---------------- Hero ---------------- */
.hero{
  position:relative;
  background:radial-gradient(1200px 500px at 85% -10%, rgba(212,160,23,0.18), transparent 60%), linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 60%, #223361 100%);
  color:#fff;
  padding:6.5rem 0 8rem;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60' viewBox='0 0 120 60'%3E%3Cpath d='M0 30 Q 15 5 30 30 T 60 30 T 90 30 T 120 30' stroke='%23D4A017' stroke-opacity='0.08' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-size:240px 120px;
  opacity:.7;
  pointer-events:none;
}
.hero .badge-eyebrow{
  background:rgba(212,160,23,0.14);
  border:1px solid rgba(212,160,23,0.4);
  color:var(--saffron-light);
  padding:.4rem 1rem;
  border-radius:50px;
  font-size:.78rem;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-weight:600;
}
.hero h1{
  color:#fff;
  font-size:3.4rem;
  line-height:1.1;
  margin:1.1rem 0 1.2rem;
}
.hero h1 span{ color:var(--saffron); font-style:italic; }
.hero p.lead{ color:#d7dbea; max-width:540px; font-size:1.1rem; }
.hero-stats{ margin-top:2.5rem; }
.hero-stats .stat{ }
.hero-stats .stat h3{ color:var(--saffron); font-size:2.1rem; margin-bottom:0; }
.hero-stats .stat span{ color:#c3c9dd; font-size:.85rem; }

.hero-visual{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  box-shadow:var(--shadow-strong);
  border:6px solid rgba(255,255,255,0.08);
}
.hero-visual img{ width:100%; display:block; }
.hero-play-badge{
  position:absolute; bottom:-22px; left:-22px;
  background:#fff; color:var(--ink);
  border-radius:16px; padding:1rem 1.2rem;
  box-shadow:var(--shadow-strong);
  display:flex; align-items:center; gap:.75rem;
}
.hero-play-badge i{ font-size:1.6rem; color:var(--maroon); }

@media (max-width:991px){
  .hero{ padding:3.5rem 0 5rem; text-align:center; }
  .hero h1{ font-size:2.3rem; }
  .hero p.lead{ margin-left:auto; margin-right:auto; }
  .hero-visual{ margin-top:2.5rem; }
  .hero-play-badge{ left:50%; transform:translateX(-50%); }
}

/* ---------------- Trust strip ---------------- */
.trust-strip{
  background:var(--ivory);
  padding:1.5rem 0;
  border-bottom:1px solid #ece6d6;
}
.trust-strip .item{
  display:flex; align-items:center; gap:.6rem;
  color:var(--ink); font-weight:600; font-size:.95rem;
  justify-content:center;
}
.trust-strip i{ color:var(--saffron); font-size:1.3rem; }

/* ---------------- Genre / category chips ---------------- */
.genre-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1.5px solid #e9e3d4; border-radius:50px;
  padding:.5rem 1.1rem; font-weight:600; font-size:.88rem; color:var(--ink);
  transition:.2s;
}
.genre-chip:hover, .genre-chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
.genre-chip i{ color:var(--saffron); }

/* ---------------- Course cards ---------------- */
.course-card{
  background:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
  transition:transform .3s ease, box-shadow .3s ease;
  height:100%;
  display:flex; flex-direction:column;
  border:1px solid #f0ece0;
}
.course-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-strong); }
.course-card .thumb{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:linear-gradient(135deg,var(--ink),var(--ink-2));
}
.course-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.course-card:hover .thumb img{ transform:scale(1.07); }
.course-card .cat-badge{
  position:absolute; top:.85rem; left:.85rem;
  background:rgba(255,255,255,0.92); color:var(--maroon);
  font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px;
  padding:.3rem .7rem; border-radius:50px;
}
.course-card .body{ padding:1.3rem; display:flex; flex-direction:column; flex:1; }
.course-card h3{ font-size:1.35rem; margin-bottom:.4rem; }
.course-card p{ color:#5c5c5c; font-size:.92rem; flex:1; }
.course-card .meta{
  display:flex; gap:1rem; font-size:.8rem; color:#7c7c7c; margin:.8rem 0;
  flex-wrap:wrap;
}
.course-card .meta span{ display:flex; align-items:center; gap:.35rem; }
.course-card .meta i{ color:var(--saffron); }
.course-card .rating{ color:var(--saffron); font-size:.85rem; }
.course-card .footer-row{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid #f2eee2; padding-top:.9rem; margin-top:.5rem;
}
.course-card .price{ font-weight:700; color:var(--ink); font-family:var(--font-display); font-size:1.3rem; }
.course-card .price small{ font-family:var(--font-body); font-size:.7rem; color:#999; font-weight:400; }

/* ---------------- Instructor cards ---------------- */
.instructor-card{
  background:#fff; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-soft); text-align:center; height:100%;
  border:1px solid #f0ece0;
}
.instructor-card .thumb{ aspect-ratio:4/5; overflow:hidden; background:var(--ivory); }
.instructor-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.instructor-card .body{ padding:1.4rem 1.1rem; }
.instructor-card h3{ font-size:1.25rem; margin-bottom:.15rem; }
.instructor-card .role{ color:var(--maroon); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.instructor-card p.bio{ font-size:.88rem; color:#666; margin-top:.7rem; }
.instructor-card .tags{ margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.instructor-card .tags span{ background:var(--ivory); color:var(--ink); font-size:.72rem; padding:.25rem .65rem; border-radius:50px; }

/* ---------------- Testimonials ---------------- */
.testimonial-card{
  background:#fff; border-radius:var(--radius); padding:2rem;
  box-shadow:var(--shadow-soft); height:100%; position:relative;
  border:1px solid #f0ece0;
}
.testimonial-card i.bi-quote{ font-size:2.2rem; color:var(--saffron); opacity:.5; }
.testimonial-card p.quote{ font-style:italic; color:var(--charcoal); margin:1rem 0; }
.testimonial-card .who{ display:flex; align-items:center; gap:.8rem; }
.testimonial-card .who img{ width:48px; height:48px; border-radius:50%; object-fit:cover; }
.testimonial-card .who h6{ margin:0; font-weight:700; color:var(--ink); }
.testimonial-card .who span{ font-size:.78rem; color:#888; }
.testimonial-card .stars{ color:var(--saffron); font-size:.85rem; }

/* ---------------- Stats band ---------------- */
.stats-band{
  background:var(--maroon);
  color:#fff;
  padding:3.5rem 0;
}
.stats-band .stat h2{ color:#fff; font-size:2.8rem; margin-bottom:0; }
.stats-band .stat span{ color:#e7d3d3; font-size:.85rem; text-transform:uppercase; letter-spacing:1px; }

/* ---------------- Process / steps ---------------- */
.step-card{ text-align:center; padding:1.5rem; }
.step-num{
  width:64px; height:64px; border-radius:50%;
  background:var(--ivory); color:var(--maroon);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:700; font-size:1.5rem;
  margin:0 auto 1.1rem; border:2px dashed var(--saffron);
}

/* ---------------- Blog cards ---------------- */
.blog-card{ background:#fff; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-soft); height:100%; border:1px solid #f0ece0; }
.blog-card .thumb{ aspect-ratio:16/10; overflow:hidden; }
.blog-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:.4s; }
.blog-card:hover .thumb img{ transform:scale(1.06); }
.blog-card .body{ padding:1.3rem; }
.blog-card .meta{ font-size:.78rem; color:#999; margin-bottom:.5rem; display:flex; gap:1rem; }
.blog-card h3{ font-size:1.2rem; }
.blog-card p{ color:#666; font-size:.9rem; }

/* ---------------- FAQ accordion ---------------- */
.accordion-item{ border:none; margin-bottom:.8rem; border-radius:var(--radius) !important; overflow:hidden; box-shadow:var(--shadow-soft); }
.accordion-button{ font-weight:600; color:var(--ink); font-family:var(--font-display); font-size:1.15rem; }
.accordion-button:not(.collapsed){ background:var(--ivory); color:var(--maroon); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--saffron); }

/* ---------------- Forms ---------------- */
.form-control, .form-select{
  border:1.5px solid #e5e0d3; border-radius:8px; padding:.7rem 1rem; font-size:.94rem;
}
.form-control:focus, .form-select:focus{ border-color:var(--saffron); box-shadow:0 0 0 .2rem rgba(212,160,23,.15); }
.form-label{ font-weight:600; color:var(--ink); font-size:.88rem; }
.contact-panel{ background:var(--ink); color:#fff; border-radius:var(--radius); padding:2.2rem; }
.contact-panel h3{ color:#fff; }
.contact-panel .item{ display:flex; gap:1rem; margin-bottom:1.4rem; }
.contact-panel .item i{ color:var(--saffron); font-size:1.3rem; }

/* ---------------- Footer ---------------- */
.footer-cta{
  background:linear-gradient(135deg,var(--ink),var(--ink-2));
  color:#fff; padding:4rem 0; text-align:center;
}
.footer-cta h2{ color:#fff; }
.footer-cta p{ color:#c3c9dd; max-width:520px; margin:0 auto 1.6rem; }

.site-footer{ background:#0F1830; color:#b9c0d6; padding:4rem 0 1.5rem; }
.site-footer .brand-text{ color:#fff; }
.footer-about{ font-size:.88rem; color:#96a0bf; }
.footer-heading{ color:#fff; font-family:var(--font-body); font-size:1rem; font-weight:600; margin-bottom:1.1rem; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:.6rem; }
.footer-links a{ color:#96a0bf; font-size:.9rem; }
.footer-links a:hover{ color:var(--saffron); }
.footer-contact{ list-style:none; padding:0; font-size:.88rem; }
.footer-contact li{ display:flex; gap:.6rem; margin-bottom:.9rem; color:#96a0bf; }
.footer-contact i{ color:var(--saffron); margin-top:.2rem; }
.footer-contact a{ color:#96a0bf; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; border:1px solid #2a3556; color:#b9c0d6; margin-right:.5rem; }
.footer-social a:hover{ background:var(--saffron); border-color:var(--saffron); color:var(--ink); }
.footer-divider{ border-color:#232d4c; margin:2.5rem 0 1.2rem; }

/* ---------------- Floating elements ---------------- */
.whatsapp-float{
  position:fixed; bottom:24px; left:24px; z-index:1050;
  background:#25D366; color:#fff; width:54px; height:54px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:var(--shadow-strong);
}
.back-to-top{
  position:fixed; bottom:24px; right:24px; z-index:1050;
  width:46px; height:46px; border-radius:50%; border:none;
  background:var(--ink); color:#fff; display:none; align-items:center; justify-content:center;
  box-shadow:var(--shadow-strong); font-size:1.1rem;
}
.back-to-top.show{ display:flex; }

/* ---------------- Page header (inner pages) ---------------- */
.page-header{
  background:linear-gradient(150deg,var(--ink),var(--ink-2));
  color:#fff; padding:3.5rem 0 5.5rem; position:relative;
}
.page-header h1{ color:#fff; font-size:2.6rem; margin-bottom:.5rem; }
.page-header .breadcrumb{ background:transparent; margin:0; padding:0; }
.page-header .breadcrumb a{ color:#c3c9dd; }
.page-header .breadcrumb-item.active{ color:var(--saffron); }
.page-header .breadcrumb-item+.breadcrumb-item::before{ color:#7482a8; }

/* ---------------- Misc utility ---------------- */
.card-outline{ border:1.5px dashed var(--saffron); border-radius:var(--radius); }
.badge-soft{ background:var(--ivory); color:var(--maroon); font-weight:600; padding:.4rem .8rem; border-radius:50px; font-size:.75rem; }
.divider-dot{ width:6px; height:6px; border-radius:50%; background:var(--saffron); display:inline-block; margin:0 .6rem; }

::selection{ background:var(--saffron); color:var(--ink); }

.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}