* {
  margin: 1px;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  background: #f9f7ff;
  color: #333;
}

/* NAVBAR */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 8%;
  background: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  
}

.logo img {
  width: 40px;
  
}

nav {
  display: flex;
  gap: 25px;
}

nav a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
}

nav a:hover {
  color: #ff7aa2;
}

.auth {
  display: flex;
  gap: 15px;
  align-items: center;
}

.auth button {
  background: #7bdff2;
  border: none;
  padding: 10px 18px;
  border-radius: 25px;
  cursor: pointer;
}

/* HERO */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 80px 8%;
}

.hero-title {
  max-width: 570px;
  margin: 0;
  color: #3f4c4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -2px;
}

.hero-title em {
  position: relative;
  display: inline-block;
  margin-top: 12px;
  color: #e9a6c3;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: 1.05;
}

/* Soft hand-drawn underline */
.hero-title em::after {
  content: "";
  position: absolute;
  left: 8%;
  bottom: -10px;
  width: 82%;
  height: 4px;
  background: #e9a6c3;
  border-radius: 50%;
  transform: rotate(-1.5deg);
  opacity: 0.85;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 42px;
    letter-spacing: -1px;
  }
}

.hero-text p {
  margin-top: 35px;
  font-size: 18px;
  color: #666;
}

.hero-text button {
  margin-top: 25px;
  padding: 14px 28px;
  border: none;
  border-radius: 25px;
  background: #ff7aa2;
  color: white;
  cursor: pointer;
}

.hero-image img {
  width: 420px;
}

/* COURSES */
.courses {
  padding: 80px 8%;
  text-align: center;
}

.courses h2 {
  font-size: 32px;
  margin-bottom: 40px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
  gap: 20px;
  justify-content: center;
}

.card {
  background: white;
  padding: 15px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.card img {
  width: 160px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin: 0 auto 12px;
}

.card h3 {
  margin: 8px 0;
  font-size: 18px;
}

.card p {
  margin: 5px 0;
  color: #ff6b9a;
  font-weight: bold;
}
/* ABOUT */
.about {
  padding: 80px 8%;
}

.about-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: linear-gradient(135deg, #ffe3ec, #e3f2ff);
  padding: 50px;
  border-radius: 25px;
}

.about-text h2 {
  font-size: 28px;
  margin-bottom: 15px;
}

.about-text p {
  line-height: 1.8;
  color: #444;
}

.about-image img {
  width: 260px;
  height: 260px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
}

/* RESPONSIVE */
@media (max-width: 768px) {

  .hero {
    flex-direction: column;
    text-align: center;
  }

  .hero-image img {
    width: 300px;
    margin-top: 30px;
  }

  .about-box {
    flex-direction: column;
    text-align: center;
  }

  nav {
    display: none;
  }
  
}

/* NEW SECTIONS */

.benefits {
  padding: 90px 8%;
  text-align: center;
}

.benefits h2 {
  font-size: 36px;
  margin-bottom: 50px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 25px;
}

.benefit-card {
  background: white;
  padding: 35px;
  border-radius: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.benefit-card span {
  font-size: 40px;
}

.benefit-card h3 {
  margin: 15px 0;
}

.benefit-card p {
  color: #666;
}

.booking {
  padding-top: 45px;
}

.booking-box {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  overflow: hidden;
  background: #f2eaf4;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.booking-content {
  padding: 52px;
}

.booking-content .section-kicker {
  color: #927fa5;
}

.booking-content h2 {
  max-width: 450px;
}

.booking-content p {
  max-width: 470px;
  color: #6f7884;
}

.booking-list {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 25px 0 28px;
}

.booking-list span {
  padding: 7px 11px;
  background: rgba(255,255,255,.63);
  border-radius: 999px;
  color: #756582;
  font-size: 12px;
  font-weight: 800;
}

.booking-form {
  margin: 27px;
  padding: 28px;
  background: rgba(255,255,255,.88);
  border-radius: 23px;
}

.booking-form h3 {
  margin-bottom: 4px;
  color: var(--ink-dark);
  font-size: 21px;
}

.booking-form > p {
  margin-bottom: 20px;
  color: var(--muted);
  font-size: 13px;
}

.calendar-booking {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 390px;
}

.calendar-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  background: #f2eaf4;
  border-radius: 50%;
  font-size: 26px;
}

.calendar-benefits {
  margin: 3px 0 24px;
}

.calendar-benefits p {
  margin: 9px 0;
  color: #756582;
  font-size: 13px;
  font-weight: 600;
}

/* Soft pink booking buttons */
.booking .secondary-btn,
.booking .primary-btn {
  display: inline-block;
  padding: 12px 18px;
  background: #e9a6c3;
  color: #ffffff;
  border: 1px solid #e9a6c3;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  transition: background-color .2s, border-color .2s, transform .2s;
}

.booking .secondary-btn:hover,
.booking .primary-btn:hover {
  background: #d98eaf;
  border-color: #d98eaf;
  color: #ffffff;
  transform: translateY(-2px);
}

.booking-calendar-btn {
  width: 100%;
  margin-top: auto;
}

@media (max-width: 768px) {
  .booking-box {
    grid-template-columns: 1fr;
  }

  .booking-content {
    padding: 34px 24px 18px;
  }

  .booking-form {
    margin: 18px;
    padding: 25px;
  }

  .calendar-booking {
    min-height: 340px;
  }
}
.preview {
  margin: 40px 8%;
  padding: 70px;
  text-align: center;
  border-radius: 30px;
  background: linear-gradient(135deg, #ffe3ec, #e3f2ff);
}

.preview h2 {
  font-size: 34px;
  margin-bottom: 15px;
}

.preview p {
  color: #555;
  margin-bottom: 25px;
}

.preview button {
  background: #ff7aa2;
  color: white;
  border: none;
  padding: 14px 30px;
  border-radius: 30px;
  cursor: pointer;
  font-size: 16px;
}

.testimonials {
  padding: 90px 8%;
  text-align: center;
}

.testimonials h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.testimonial-card {
  max-width: 700px;
  margin: auto;
  background: white;
  padding: 40px;
  border-radius: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.testimonial-card p {
  font-size: 20px;
  line-height: 1.8;
  color: #444;
}

.testimonial-card h4 {
  margin-top: 20px;
  color: #ff7aa2;
}
/* FAQ */

.faq {
  padding: 90px 8%;
  text-align: center;
}

.faq h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.faq-container {
  max-width: 800px;
  margin: auto;
}

.faq details {
  background: white;
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 20px;
  text-align: left;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
}

.faq p {
  margin-top: 15px;
  color: #666;
  line-height: 1.6;
}

/* FOOTER */

.footer {
  background: white;
  text-align: center;
  padding: 50px 8%;
  margin-top: 80px;
  border-top: 1px solid #eee;
}

.footer h3 {
  margin-bottom: 10px;
}

.footer p {
  color: #666;
}

.footer-links {
  margin: 25px 0;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.footer-links a {
  text-decoration: none;
  color: #ff7aa2;
  font-weight: 600;
}

.footer-links a:hover {
  opacity: 0.8;
}

.copyright {
  font-size: 14px;
  color: #999;
}
/* FINAL IMPROVEMENTS */

html {
  scroll-behavior: smooth;
}

.navbar {
  z-index: 1000;
}

button {
  transition: 0.3s;
}

button:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

.main-btn {
  display: inline-block;
  margin-top: 25px;
  padding: 14px 28px;
  border-radius: 25px;
  background: #ff7aa2;
  color: white;
  text-decoration: none;
  transition: 0.3s;
}

.main-btn:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}
/* HERO STICKERS */

/* HERO STICKERS */

.hero-stickers {
  position: relative;
  width: 520px;
  height: 430px;
  margin: auto;
}

.sticker {
  position: absolute;
  width: 105px;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.08));
  animation: explodeFloat 5s ease-in-out infinite;
  will-change: transform;
}

/* TOP */

.blue-door {
  left: 60px;
  top: 40px;
  --x: -18px;
  --y: -18px;
}

.pastries {
  left: 200px;
  top: 35px;
  --x: 0px;
  --y: -24px;
}

.clothes {
  right: 70px;
  top: 45px;
  --x: 18px;
  --y: -18px;
}

/* MIDDLE */

.flag {
  left: 85px;
  top: 165px;
  --x: -24px;
  --y: 0px;
}

.radio {
  left: 215px;
  top: 155px;
  --x: 0px;
  --y: -10px;
}

.harissa {
  right: 95px;
  top: 165px;
  --x: 24px;
  --y: 0px;
}

/* BOTTOM */

.map {
  left: 70px;
  bottom: 45px;
  --x: -18px;
  --y: 18px;
}

.inshallah {
  left: 205px;
  bottom: 35px;
  width: 120px;
  --x: 0px;
  --y: 24px;
}

.passport {
  right: 75px;
  bottom: 45px;
  --x: 18px;
  --y: 18px;
}

/* CHILI */

.chili {
  left: 300px;
  top: 230px;
  width: 85px;
  --x: 14px;
  --y: 12px;
  animation: chiliWiggle 4s ease-in-out infinite;
}

/* ANIMATIONS */

@keyframes explodeFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(var(--x), var(--y)) scale(1.04) rotate(3deg);
  }
}

@keyframes chiliWiggle {
  0%, 100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(14px, 12px) scale(1.05) rotate(6deg);
  }
}

/* MOBILE */

@media (max-width: 768px) {
  .hero-stickers {
    width: 330px;
    height: 320px;
    margin-top: 30px;
  }

  .sticker {
    width: 70px;
  }

  .inshallah {
    width: 85px;
  }

  .blue-door {
    left: 25px;
    top: 25px;
  }

  .pastries {
    left: 125px;
    top: 20px;
  }

  .clothes {
    right: 25px;
    top: 25px;
  }

  .flag {
    left: 40px;
    top: 125px;
  }

  .radio {
    left: 130px;
    top: 115px;
  }

  .harissa {
    right: 45px;
    top: 125px;
  }

  .map {
    left: 35px;
    bottom: 25px;
  }

  .inshallah {
    left: 125px;
    bottom: 20px;
  }

  .passport {
    right: 35px;
    bottom: 25px;
  }

}
/* TESTIMONIAL GRID */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1200px;
  margin: auto;
}

/* TESTIMONIALS */

.testimonials {
  padding: 90px 8%;
  text-align: center;
}

.testimonials h2 {
  font-size: 42px;
  margin-bottom: 50px;
}

/* TESTIMONIALS */

.testimonials {
  padding: 90px 8%;
  text-align: center;
}

.testimonials h2 {
  font-size: 34px;
  margin-bottom: 40px;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: auto;
}

.testimonial-card {
  background: white;
  padding: 25px;
  border-radius: 25px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
  text-align: center;
  transition: 0.3s;
}

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

.testimonial-card p {
  font-size: 18px;
  line-height: 1.7;
  color: #444;
  margin-bottom: 15px;
}

.testimonial-card h4 {
  color: #ff7aa2;
  font-size: 20px;
  margin-bottom: 10px;
}

.stars {
  font-size: 24px;
  color: gold;
  margin-top: 10px;
  letter-spacing: 2px;
}

.stats p {
  color: #666;
}

@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    gap: 25px;
  }
}

/* ==================================================
   POCKET DARJA INTERACTIVE PHRASES
================================================== */

[hidden] {
  display: none !important;
}

.pocket-section {
  padding: 90px 8%;
  background: #f9f7ff;
}

.section-heading {
  max-width: 720px;
  margin: 0 auto 55px;
  text-align: center;
}

.section-label {
  display: inline-block;
  padding: 7px 15px;
  color: #755d70;
  background: #f8dce8;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.section-heading h2 {
  margin: 18px 0 12px;
  color: #46505b;
  font-family: Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.2;
}

.section-heading h2 em {
  color: #e9a6c3;
  font-weight: 400;
}

.section-heading p {
  color: #7b8494;
  font-size: 15px;
  line-height: 1.7;
}

.pocket-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 40px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}

.flip-scene {
  perspective: 1400px;
}

.darja-flip-card {
  position: relative;
  width: 100%;
  max-width: 590px;
  min-height: 340px;
  margin: 0 auto;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .25, 1);
}

.darja-flip-card.flipped {
  transform: rotateY(180deg);
}

.darja-flip-card:focus-visible {
  outline: 4px solid rgba(233, 166, 195, .45);
  outline-offset: 6px;
}

.darja-card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 38px;
  border: 1px solid #eadfe7;
  border-radius: 30px;
  box-shadow: 0 16px 35px rgba(70, 62, 77, .09);
  text-align: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.darja-card-front {
  background: linear-gradient(145deg, #ffffff, #f2eaf4);
}

.darja-card-back {
  background: linear-gradient(145deg, #ffffff, #f8dce8);
  transform: rotateY(180deg);
}

.phrase-arabic {
  color: #536577;
  font-size: clamp(48px, 7vw, 72px);
  line-height: 1.4;
}

.phrase-latin {
  margin-top: 8px;
  color: #9d6f87;
  font-size: 18px;
  font-weight: 700;
}

.phrase-meaning {
  max-width: 430px;
  color: #46505b;
  font-family: Georgia, serif;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1.35;
}

.phrase-example {
  margin-top: 20px;
  padding: 10px 18px;
  color: #8d6379;
  background: #ffffff;
  border: 1px dashed #e9a6c3;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
}

.phrase-hint {
  margin-top: 24px;
  color: #89919e;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}

.phrase-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.phrase-control {
  padding: 11px 18px;
  color: #ffffff;
  background: #e9a6c3;
  border: 1px solid #e9a6c3;
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(70, 62, 77, .07);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.phrase-control:hover {
  color: #ffffff;
  background: #d98eaf;
  border-color: #d98eaf;
}

.phrase-menu {
  padding: 22px;
  background: #ffffff;
  border: 1px solid #eadfe7;
  border-radius: 25px;
  box-shadow: 0 12px 28px rgba(70, 62, 77, .07);
}

.phrase-menu h3 {
  margin-bottom: 15px;
  color: #7b8494;
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.phrase-choice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 13px;
  color: #536577;
  background: #ffffff;
  border: 1px solid #eadfe7;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .2s, background .2s;
}

.phrase-choice:hover {
  background: #f8dce8;
  transform: translateX(4px);
}

.phrase-choice.active {
  background: #e9a6c3;
  border-color: #e9a6c3;
}

.phrase-choice span {
  font-size: 17px;
}

.phrase-choice small {
  color: #7b8494;
  font-size: 12px;
  font-weight: 700;
}

.phrase-choice.active span,
.phrase-choice.active small {
  color: #ffffff;
}

@media (max-width: 850px) {
  .pocket-layout {
    grid-template-columns: 1fr;
  }

  .phrase-menu {
    width: 100%;
    max-width: 590px;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .pocket-section {
    padding: 70px 5%;
  }

  .darja-flip-card {
    min-height: 310px;
  }

  .darja-card-face {
    padding: 25px;
  }

  .phrase-control {
    padding: 10px 13px;
    font-size: 12px;
  }
}

/* ==================================================
   HERO PORTRAIT — REPLACES THE STICKER COLLAGE
================================================== */

.hero-portrait {
  position: relative;
  width: min(48vw, 560px);
  min-width: 420px;
  margin: 0 auto;
  padding: 28px 22px 35px;
}

.portrait-shape {
  width: 100%;
  aspect-ratio: .88;
  overflow: hidden;
  background: #f2eaf4;
  border: 8px solid rgba(255, 255, 255, .85);
  border-radius: 48% 48% 46% 54% / 42% 44% 56% 58%;
  box-shadow: 0 22px 50px rgba(71, 61, 80, .14);
}

.portrait-shape img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 50% 28%;
}

.greeting-note {
  position: absolute;
  top: 0;
  right: -8px;
  min-width: 165px;
  padding: 16px 20px;
  background: #fff4dc;
  border: 6px solid #ffffff;
  border-radius: 25px 25px 7px 25px;
  box-shadow: 0 14px 28px rgba(71, 61, 80, .13);
  text-align: center;
  transform: rotate(4deg);
}

.greeting-note strong {
  display: block;
  color: #526470;
  font-size: 27px;
  line-height: 1.2;
}

.greeting-note span {
  display: block;
  margin-top: 5px;
  color: #7c8490;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 600;
}

.teacher-note {
  position: absolute;
  left: -28px;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 300px;
  padding: 17px 22px;
  background: rgba(255, 255, 255, .96);
  border: 1px solid #eadfe7;
  border-radius: 25px;
  box-shadow: 0 15px 32px rgba(71, 61, 80, .12);
}

.teacher-note-icon {
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  color: #ffffff;
  background: #e9a6c3;
  border-radius: 50%;
  font-size: 20px;
}

.teacher-note strong,
.teacher-note small {
  display: block;
}

.teacher-note strong {
  color: #4e5965;
  font-size: 15px;
}

.teacher-note small {
  margin-top: 5px;
  color: #7b8494;
  font-size: 12px;
}

.portrait-flower {
  position: absolute;
  left: 0;
  top: 30%;
  width: 58px;
  height: 58px;
  background: #e9e2f5;
  border-radius: 50% 50% 48% 52%;
  box-shadow: 18px 0 #e9e2f5, -18px 0 #e9e2f5,
              0 18px #e9e2f5, 0 -18px #e9e2f5;
}

.portrait-flower span {
  position: absolute;
  inset: 17px;
  z-index: 1;
  background: #d98eaf;
  border-radius: 50%;
}

@media (max-width: 980px) {
  .hero {
    flex-direction: column;
    gap: 55px;
    text-align: center;
  }

  .hero-portrait {
    width: min(82vw, 540px);
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .hero-portrait {
    width: 92vw;
    padding: 20px 15px 75px;
  }

  .greeting-note {
    right: 2px;
    min-width: 135px;
    padding: 12px 14px;
  }

  .greeting-note strong {
    font-size: 22px;
  }

  .teacher-note {
    left: 50%;
    bottom: 8px;
    min-width: min(90vw, 310px);
    transform: translateX(-50%);
  }

  .portrait-flower {
    left: 5px;
    top: 34%;
    transform: scale(.72);
  }
}
/* STATS SECTION */

.stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px;
  text-align: center;
  padding: 40px 8%;
  width: 100%;
}

.stats div {
  min-width: 150px;
}

.stats h3 {
  font-size: 32px;
  color: #ff7aa2;
  margin-bottom: 5px;
}

.stats p {
  color: #666;
  font-size: 16px;
}

@media (max-width: 768px) {
  .stats {
    flex-direction: column;
    gap: 25px;
  }
}
.experience-text {
  display: flex;
  flex-direction: column;
}

.experience-text strong {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: #4e5965;
  font-size: 18px;
  line-height: 1.2;
}

.experience-number {
  color: #d98eaf;
  font-family: Georgia, serif;
  font-size: 30px;
  font-weight: 700;
}

.experience-text small {
  margin-top: 5px;
  color: #7b8494;
  font-size: 12px;
  letter-spacing: 0.2px;
}
/* ========================================
   SPOTIFY PODCAST SECTION
======================================== */

.podcast-section {
  padding: 70px 8%;
  background: #f2eaf4;
  text-align: center;
}


/* PODCAST TITLE */

.podcast-heading {
  max-width: 700px;
  margin: 0 auto 35px;
}

.podcast-label {
  display: inline-block;
  padding: 7px 16px;
  color: #755d70;
  background: #ffffff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.podcast-heading h2 {
  margin: 18px 0 13px;
  color: #3f4c4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 500;
  line-height: 1.2;
}

.podcast-heading h2 em {
  color: #e9a6c3;
  font-weight: 500;
}

.podcast-heading p {
  margin: 0;
  color: #6f7884;
  font-size: 16px;
  line-height: 1.7;
}


/* LIST OF EPISODES */

.podcast-episodes {
  display: grid;
  gap: 16px;
  max-width: 950px;
  margin: 0 auto;
}


/* ONE EPISODE ROW */

.podcast-episode {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(270px, 0.8fr);
  align-items: stretch;
  gap: 14px;
}


/* SMALL SPOTIFY PLAYER */

.episode-audio {
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 6px;
  background: #ffffff;
  border: 1px solid #eadfe7;
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(70, 62, 77, 0.07);
}

.episode-audio iframe {
  display: block;
  width: 100%;
  height: 152px !important;
  border: none;
  border-radius: 12px;
}


/* SMALL PDF CARD */

.podcast-resource {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-content: center;
  align-items: center;
  gap: 10px 12px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  background: #ffffff;
  border: 1px solid #eadfe7;
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(70, 62, 77, 0.07);
  text-align: left;
}


/* PDF ICON */

.resource-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: #ffffff;
  background: #e9a6c3;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}


/* PDF INFORMATION */

.resource-information {
  min-width: 0;
  background: transparent;
}

.resource-information span {
  display: block;
  color: #b65f85;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.resource-information h3 {
  margin: 3px 0 0;
  color: #3f4c4a;
  font-size: 14px;
  line-height: 1.25;
}

.resource-information p {
  display: none;
}


/* PDF DOWNLOAD BUTTON */

.pdf-download-button {
  grid-column: 1 / -1;
  display: block;
  padding: 9px 12px;
  color: #ffffff;
  background: #e9a6c3;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.pdf-download-button:hover {
  color: #ffffff;
  background: #d98eaf;
  transform: translateY(-1px);
}


/* TABLET AND PHONE */

@media (max-width: 750px) {
  .podcast-section {
    padding: 60px 5%;
  }

  .podcast-heading {
    margin-bottom: 28px;
  }

  .podcast-episode {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .episode-audio,
  .podcast-resource {
    width: 100%;
  }

  .episode-audio iframe {
    height: 152px !important;
  }
}
/* LANGUAGE SELECTOR */

.language-switcher {
  margin-left: 15px;
}

.language-switcher select {
  padding: 9px 32px 9px 13px;
  color: #3f4c4a;
  background-color: #ffffff;
  border: 1px solid #eadfe7;
  border-radius: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.language-switcher select:hover,
.language-switcher select:focus {
  border-color: #e9a6c3;
}


/* LANGUAGE SELECTOR ON PHONE */

@media (max-width: 750px) {
  .language-switcher {
    width: 100%;
    margin: 12px 0 0;
    text-align: center;
  }

  .language-switcher select {
    width: auto;
  }
}
/* ========================================
   TESTIMONIALS — SOFT CARD DESIGN
======================================== */

.quotes-band {
  background: #f7f2f8;
}

.quotes-band section {
  padding: 75px 0 !important;
}

.quotes-band .container {
  width: min(1180px, 90%);
  margin: 0 auto;
}


/* SECTION TITLE */

.quotes-band .section-head {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

.quotes-band .kicker {
  display: inline-block;
  padding: 7px 16px;
  color: #557068;
  background: #dcefe9;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.quotes-band .section-head h2 {
  margin: 17px 0 0;
  color: #3f4c4a;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 500;
  line-height: 1.2;
}

.quotes-band .section-head h2 em {
  color: #e9a6c3;
  font-weight: 500;
}


/* TESTIMONIAL GRID */

.quotes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}


/* TESTIMONIAL CARD */

.quote {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  background: #fffaf6;
  border: 1px solid #eadfd8;
  border-radius: 28px;
  box-shadow: 0 10px 30px rgba(70, 62, 77, 0.05);
  text-align: left;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.quote:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 38px rgba(70, 62, 77, 0.1);
}


/* STARS */

.quotes-band .stars {
  margin-bottom: 20px;
  color: #d9aa50;
  font-size: 17px;
  letter-spacing: 2px;
  text-align: center
}


/* REVIEW TEXT */

.quote > p {
  flex: 1;
  max-height: 250px;
  margin: 0 0 25px;
  padding-right: 8px;
  overflow-y: auto;
  color: #657080;
  font-size: 14px;
  line-height: 1.75;
}

/* Soft scrollbar for longer reviews */

.quote > p::-webkit-scrollbar {
  width: 5px;
}

.quote > p::-webkit-scrollbar-track {
  background: transparent;
}

.quote > p::-webkit-scrollbar-thumb {
  background: #ead2dd;
  border-radius: 20px;
}


/* REVIEWER INFORMATION */

.quote-person {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: auto;
}



.q-name {
  color: #3f4c4a;
  font-size: 15px;
  font-weight: 700;
}

.q-role {
  margin-top: 3px;
  color: #87909c;
  font-size: 12px;
  line-height: 1.4;
}


/* TABLET */

@media (max-width: 950px) {
  .quotes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* PHONE */

@media (max-width: 650px) {
  .quotes-band section {
    padding: 60px 0 !important;
  }

  .quotes {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .quote {
    padding: 23px;
    border-radius: 22px;
  }

  .quote > p {
    max-height: 280px;
  }
}
/* Full navbar logo */

.logo-only {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.logo-only img {
  width: 260px;
  height: auto;
  max-height: 85px;
  object-fit: contain;
}

@media (max-width: 700px) {
  .logo-only img {
    width: 150px;
    max-height: 65px;
  }
}
.logo-only {
  position: relative;
  left: -20px;
}
/* NEW WEBSITE FOOTER */

.site-footer {
  padding: 65px 7% 25px;
  color: #59636f;
  background: #fffdfb;
  border-top: 1px solid #eadfe7;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr 1fr 1.3fr;
  gap: 55px;
  max-width: 1250px;
  margin: 0 auto;
  padding-bottom: 45px;
}

.footer-brand img {
  display: block;
  width: 190px;
  height: auto;
  margin-bottom: 18px;
}

.footer-brand p {
  max-width: 310px;
  margin: 0;
  color: #77818e;
  font-size: 14px;
  line-height: 1.8;
}

.footer-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 13px;
}

.footer-column h3 {
  margin: 6px 0 8px;
  color: #3f4c4a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.footer-column a {
  color: #697382;
  font-size: 14px;
  text-decoration: none;
  transition: 0.2s ease;
}

.footer-column a:hover {
  color: #e49abb;
  transform: translateX(3px);
}

.footer-contact p {
  margin: 0;
  color: #77818e;
  font-size: 14px;
}

.footer-contact a {
  color: #c66f96;
  overflow-wrap: anywhere;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 25px;
  max-width: 1250px;
  margin: 0 auto;
  padding-top: 22px;
  border-top: 1px solid #eadfe7;
}

.footer-bottom p {
  margin: 0;
  color: #89919c;
  font-size: 13px;
}

.footer-bottom span {
  color: #e9a6c3;
}

@media (max-width: 900px) {
  .footer-main {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

@media (max-width: 600px) {
  .site-footer {
    padding: 50px 7% 22px;
  }

  .footer-main {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}
/* Soft pink testimonial stars */

.quotes .stars {
  color: #e5a0bd;
}
/* Smooth movement between website sections */

html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 90px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
/* Keep footer email clear on desktop */

.footer-contact a {
  direction: ltr;
  white-space: nowrap;
  font-size: 13px;
}

@media (max-width: 600px) {
  .footer-contact a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}