/* Phone composition from mobile.png (393px reference). Desktop lives in style.css. */
.container { width: calc(100% - 48px); }
.section-heading h2 { font-size: 18px; line-height: 1.2; letter-spacing: -0.3px; }
/* Hero section - Design Fest 2026 Mobile */
.hero {
  min-height: 0;
  background-color: #7840ae;
  background-image:
    url('assete festival/section1/diwali-background-design 1.png'),
    radial-gradient(ellipse 80% 70% at 50% 50%, #b47ef8 0%, #9a5cd6 45%, #7e42be 75%, #6a32a6 100%);
  background-position: center top, center center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  overflow: hidden;
}
.hero::after { display: none; }
.hero__diyas { width: 50px; }
.hero__diya--long { left: 4px; width: 18px; }
.hero__diya--short { left: 24px; width: 12px; }
.hero__mandala-top-right {
  width: 140px;
  opacity: 0.65;
}
.hero__firework-bottom {
  left: auto;
  right: 10px;
  bottom: -10px;
  width: 90px;
  opacity: 0.8;
}
.hero__inner { min-height: 0; padding: 28px 0 24px; }
.hero__copy { text-align: left; padding-left: 14px; }
.hero__badge-fest {
  display: inline-block;
  font-size: 16px;
  padding: 6px 18px;
  margin-bottom: 12px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(216, 52, 8, 0.4);
}
.hero__title {
  margin: 0;
  font: 700 20px/1.25 'Poppins', 'Roboto', sans-serif;
  letter-spacing: -0.01em;
  color: #ffffff;
}
.hero__title span { color: #EBFF24; }
.hero__lede {
  margin: 10px 0 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.95);
}
.hero__benefits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.hero .benefit-pill {
  min-width: 0;
  min-height: 52px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: normal;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(8px);
}
.hero__actions {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-top: 18px;
}
.hero__actions .call-button {
  width: 100%;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--color-orange);
  box-shadow: 0 4px 10px rgba(242, 98, 51, 0.3);
}
.hero__actions .call-button > span:last-child {
  display: block;
}
.hero__actions .call-button small { font-size: 9px; }
.hero__actions .call-button strong { font-size: 15px; }
.hero__actions .call-button__icon {
  width: 32px;
  height: 32px;
  flex-basis: 32px;
  background: #ffffff;
  border-radius: 50%;
  padding: 6px;
  display: grid;
  place-items: center;
}
.hero__actions .call-button__icon svg {
  fill: var(--color-orange);
  width: 16px;
  height: 16px;
}
.hero__actions .button--fest-claim {
  width: 100%;
  min-height: 44px;
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 10px;
}
.hero__actions .fest-sparkle-icon {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px #ffe066) brightness(2.2) contrast(1.2);
}
.hero__form-card {
  max-width: none;
  min-height: auto;
  margin: 24px auto 0;
  padding: 22px 18px 24px;
  border: 2px solid #EAA335;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(40, 10, 80, 0.25);
  width: 100%;
}
.hero .lead-form { gap: 12px; }
.hero .lead-form__intro h2 { margin: 0 0 12px; font-size: 18px; color: #111111; }
.hero .form-field { gap: 4px; }
.hero .form-field label { font-size: 13px; color: #222222; }
.hero .form-field input, .hero .form-field select { height: 38px; font-size: 13px; background: #EDE7F6; border-radius: 6px; }
.hero .form-field input::placeholder { font-size: 13px; }
.hero .phone-input { height: 38px; background: #EDE7F6; border-radius: 6px; }
.hero .phone-input > span { font-size: 13px; color: #222222; }
.hero .lead-form__submit { min-height: 42px; margin-top: 10px; font-size: 15px; border-radius: 6px; background: #5B3E8F; }
.hero .form-status:empty { display: none; }

.video-section { padding: 16px 0 0; }
.video-section .video-panel {
  width: 100%;
  min-height: 0;
  padding: 24px 14px 44px;
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 16px;
  background: radial-gradient(ellipse 85% 45% at 50% 95%, rgba(255, 222, 135, 0.45) 0%, rgba(255, 255, 255, 0) 70%), #f8f4fc;
}
.video-decor--firework-left { top: 8px; left: 8px; width: 65px; }
.video-decor--firework-right { top: 8px; right: 8px; width: 65px; }
.video-decor--diwali-set { bottom: 8px; left: 10px; width: 60px; }
.video-panel .section-heading h2 { font-size: 16px; line-height: 1.25; }
.video-panel .section-heading h2 span { font-size: 16px; margin-top: 4px; }
.video-player {
  aspect-ratio: 16 / 9;
  margin: 18px auto 20px;
  padding: 8px;
  border-radius: 18px;
}
.video-player > img { border-radius: 12px; }
.video-player__shade { inset: 8px; border-radius: 12px; }
.video-player__embed { inset: 8px; border-radius: 12px; }
.video-player .video-play { width: 44px; height: 44px; }
.video-player .video-play img { width: 22px; height: 22px; }
.video-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.button--video-outline,
.button--video-purple {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  gap: 8px;
}
.button--video-outline .question-icon {
  width: 22px;
  height: 22px;
  font-size: 13px;
}
.button--video-purple .button__arrow {
  font-size: 18px;
}
.tools-section {
  padding: 24px 0 24px;
  background: radial-gradient(circle at 50% 25%, #f7effd 0%, #ede2f8 50%, #e6d7f5 100%);
  overflow: visible;
}
.tools-heading {
  margin-bottom: 20px;
  padding: 0 44px;
}
.tools-diya {
  position: absolute;
  bottom: -46px;
  width: clamp(28px, 8vw, 36px);
  z-index: 10;
}
.tools-diya--left { left: 8px; }
.tools-diya--right { right: 8px; }
.tools-heading h2 { font-size: 13.5px; line-height: 1.25; text-align: center; }
.tools-heading h2 span { font-size: 13.5px; margin-top: 2px; }
.capability-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 38px; padding: 12px 10px; gap: 16px 10px; border-radius: 7px; }
.capability-item { gap: 8px; }
.capability-item > .capability-icon { width: 30px; height: 30px; flex-basis: 30px; }
.capability-item span { min-width: 0; }
.capability-item strong { font-size: 12px; line-height: 1.3; white-space: normal; }
.capability-item small { font-size: 11px; line-height: 1.3; }
.tools-section .carousel-wrap { overflow: visible; margin-top: 25px; }
.tools-section .carousel-toolbar, .tools-section > .container > .counselling-banner { display: none; }
.tools-section .carousel-viewport { overflow: visible; touch-action: pan-y; }
.tools-section .carousel-track { position: relative; min-width: 0; width: 100%; height: 232px; padding: 0; display: block; }
.tools-section .carousel-track::after { display: none; }
.tools-section .training-card { position: absolute; top: 0; left: 9%; width: 54%; height: 232px; min-height: 0; padding: 8px 9px 10px; border-radius: 8px; transition: transform 240ms ease; transform-origin: right center; }
.training-card[data-deck-position="0"] { z-index: 4; transform: none; }
.training-card[data-deck-position="1"] { z-index: 3; transform: translateX(36px) scale(.95); }
.training-card[data-deck-position="2"] { z-index: 2; transform: translateX(76px) scale(.9); }
.training-card[data-deck-position="3"] { z-index: 1; transform: translateX(116px) scale(.83); }
.tools-section .training-card__media { height: 130px; flex-shrink: 0; border-radius: 5px; }
.training-card__media span { right: 2px; bottom: 2px; padding: 3px 13px; font-size: 6px; }
.tools-section .training-card h3 { margin: 12px 0 3px; font-size: 14px; }
.tools-section .training-card p { min-height: 0; margin: 0 0 6px; font-size: 8px; line-height: 1.4; }
.tools-section .training-card .button { min-height: 20px; padding: 3px 17px; margin: auto 0 0; border-radius: 5px; font-size: 10px; }
.professional-section { padding: 24px 0 18px; }
.professional-section .section-heading h2 { font-size: 18px; line-height: 1.2; }
.professional-section .section-heading { margin-bottom: 18px; }
.gallery .gallery-stage { width: 100%; height: 130px; aspect-ratio: auto; }
.gallery .gallery-slide { top: 9px !important; bottom: auto !important; width: 24% !important; height: 112px !important; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 6px; }
.gallery .gallery-slide--left { left: 0 !important; right: auto !important; }
.gallery .gallery-slide--center { left: 24% !important; right: auto !important; top: 0 !important; width: 28% !important; height: 130px !important; z-index: 3; box-shadow: 0 4px 4px #0003; }
.gallery .gallery-slide--right { left: 51% !important; right: auto !important; }
.gallery .gallery-slide--hidden { left: 76% !important; right: auto !important; }
.gallery .gallery-slide { cursor: pointer; transition: left 300ms var(--ease), top 300ms var(--ease), width 300ms var(--ease), height 300ms var(--ease), opacity 240ms ease, scale 300ms var(--ease), box-shadow 300ms var(--ease); }
.testimonials-section { padding: 20px 0 34px; background: #eee4f8; }
.testimonials-section .section-heading h2 { font-size: 18px; line-height: 1.2; }
.testimonials-section .section-heading p { margin-top: 10px; font-size: 12px; }
.testimonials-section .testimonials-grid { display: block; margin-top: 30px; }
.testimonials-section .story-list { display: none; }
.testimonials-section .featured-student { width: 80%; overflow: visible; border-radius: 0; box-shadow: none; margin-bottom: 54px; background: transparent; }
.testimonials-section .featured-student__media { height: 412px; aspect-ratio: auto; overflow: visible; border-radius: 0; }
.testimonials-section .featured-student__media > img { object-fit: cover; }
.testimonials-section .featured-student__media::after { position: absolute; inset: 0; content: ''; pointer-events: none; background: linear-gradient(transparent 60%, #21182d99); border-bottom: 4px solid var(--color-orange); }
.testimonials-section .featured-student__play { width: 44px; height: 44px; }
.testimonials-section .featured-student__play img { width: 23px; height: 23px; }
.testimonials-section .featured-student__caption { left: 22%; right: 22%; bottom: -52px; min-height: 52px; padding: 9px 5px; justify-content: center; text-align: center; border-radius: 0 0 28px 28px; background: white; box-shadow: 0 3px 3px #0002; }
.testimonials-section .featured-student__caption > span { display: none; }
.testimonials-section .featured-student__caption h3 { font-size: 14px; font-weight: 400; }
.testimonials-section .featured-student__caption p { font-size: 10px; }
.testimonials-section .featured-student__nav { display: grid; top: auto; bottom: -47px; width: 28px; height: 28px; transform: none; }
.testimonials-section .featured-student__nav--prev { left: -26px; }
.testimonials-section .featured-student__nav--next { right: -26px; }
.testimonials-section .featured-student__nav img { width: 26px; height: 26px; }
/* Mobile testimonials mirror the overlapping course card deck. */
.testimonials-section .testimonials-grid { position: relative; isolation: isolate; padding-bottom: 12px; touch-action: pan-y; }
.testimonials-section .featured-student { z-index: 4; width: 64%; margin: 0 0 0 5.8%; padding: 8px; border-radius: 10px; background: white; box-shadow: 0 3px 6px #21182d26; }
.testimonials-section .featured-student__media { height: 284px; border-radius: 6px; background: white; }
.testimonials-section .featured-student__media > img { height: 210px; border-radius: 6px; }
.testimonials-section .featured-student__media::after { display: none; }
.testimonials-section .featured-student__play { top: 105px; width: 42px; height: 42px; }
.testimonials-section .featured-student__caption { position: static; min-height: 74px; padding: 12px 2px 8px; justify-content: flex-start; text-align: left; border-radius: 0; background: white; box-shadow: none; }
.testimonials-section .featured-student__caption h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.testimonials-section .featured-student__caption p { margin-top: 4px; font-size: 11px; line-height: 1.4; }
.testimonials-section .featured-student__nav { display: none; }
.testimonials-section .featured-student__nav:hover,
.testimonials-section .featured-student__nav:active { transform: none; background: var(--color-lilac); }
.testimonials-section .featured-student__nav--prev { left: 0; }
.testimonials-section .featured-student__nav--next { right: 0; }
.testimonials-section .testimonial-stack-preview { position: absolute; display: block; z-index: calc(4 - var(--stack-index)); top: calc(var(--stack-index) * 8px); left: calc(5.8% + var(--stack-index) * 11%); width: 64%; height: 300px; padding: 8px; overflow: hidden; border-radius: 10px; background: white; box-shadow: 0 3px 6px #21182d26; transform: scale(calc(1 - var(--stack-index) * .045)); transform-origin: left center; pointer-events: none; }
.testimonial-stack-preview > img { width: 100%; height: 210px; border-radius: 6px; object-fit: cover; }
.testimonial-stack-preview > div { padding: 12px 2px 8px; }
.testimonial-stack-preview strong { display: block; color: var(--color-ink); font-size: 15px; line-height: 1.3; }
.testimonial-stack-preview small { display: block; margin-top: 4px; color: #737373; font-size: 11px; line-height: 1.4; }

.showcase-section { padding: 0 0 20px; }
.showcase-section > .showcase-panel { width: calc(100% - 52px); min-height: 298px; padding-top: 18px; background-image: none; border: 1px solid #fff; border-radius: 12px; }
.showcase-section .showcase-panel .section-heading h2 { font-size: 14px; line-height: 1.12; }
.showcase-section .project-stack { height: 230px; margin-top: 12px; overflow: hidden; }
.showcase-section .project-card--center { width: 126px; height: 210px; aspect-ratio: auto; }
.showcase-section .project-card--left, .showcase-section .project-card--right { width: 100px; height: 180px; top: 15px; }
.showcase-section .project-card--left { left: 12%; }
.showcase-section .project-card--right { right: 12%; }
.showcase-section .project-card--back-two,
.showcase-section .project-card--front { display: block; top: 30px; width: 80px; height: 150px; aspect-ratio: auto; }
.showcase-section .project-card--back-two { left: 2%; }
.showcase-section .project-card--front { right: 2%; }
.showcase-section .project-card__caption { min-height: 20px; padding: 4px 6px; }
.showcase-section .project-card__labels > span { font-size: 4px; }
.showcase-section .project-card__labels > strong { font-size: 6px; }
.showcase-section .project-card__caption .project-card__avatar { display: none; }
.outcomes-section { min-height: 0; }
.outcomes-section .outcomes-inner { display: block; min-height: 0; padding: 24px 0 18px; width: calc(100% - 72px); }
.outcomes-copy > p { font-size: 10px; text-align: center; }
.outcomes-copy > p:last-child { font-size: 8px; }
.outcomes-copy h2 { font-size: 20px; margin: 2px 0 4px; }
.outcomes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.outcome-card { min-height: 66px; padding: 12px 13px; border-radius: 6px; }
.outcome-card h3 { font-size: 10px; line-height: 1.2; margin-bottom: 4px; font-weight: 500; }
.outcome-card p { font-size: 8px; line-height: 1.15; font-weight: 300; }
/* Retain the separately supplied mobile Why Velora design. */
.certificate-section { min-height: 334px; background: #eee4f8; }
.certificate-section::before { height: 92px; }
.certificate-section::after, .certificate-visuals { display: none; }
.certificate-section .certificate-inner { min-height: 334px; width: 100%; padding: 22px 0 32px; }
.certificate-section .certificate-heading { position: relative; inset: auto; width: calc(100% - 72px); margin: 0 auto; transform: none; text-align: center; }
.certificate-section .certificate-heading h2 { font-size: 14px; line-height: 1.2; font-weight: 500; letter-spacing: 0; }
.certificate-heading h2 br { display: inline; }
.certificate-heading h2 br::after { content: ' '; }
.certificate-section .certificate-proof { position: relative; inset: auto; display: block; width: calc(100% - 54px); height: 218px; margin: 18px auto 0; transform: none; }
.certificate-section .certificate-checklist { position: absolute; top: 9px; left: 0; width: 74%; height: 188px; min-height: 0; padding: 18px 22px 70px; margin: 0; gap: 10px; border-radius: 10px; }
.certificate-section .certificate-checklist li { min-height: 15px; font-size: 10px; gap: 7px; white-space: nowrap; }
.certificate-section .certificate-checklist li::before { width: 10px; height: 10px; flex-basis: 10px; border-radius: 2px; font-size: 10px; }
.certificate-section .certificate-image { position: absolute; top: 0; right: 0; width: 46%; height: 212px; max-height: none; margin: 0; border-radius: 5px; }
.success-section { padding: 0 0 8px; background: #eee4f8; }
.success-section .success-panel { display: grid; grid-template-columns: 1fr; gap: 0; width: calc(100% - 22px); min-height: 0; padding: 32px 9px 22px; background: #f0e7f9; border: 1px solid white; border-radius: 12px; }
.success-section .success-panel::before { display: none; }
.success-section .success-copy { display: contents; }
.success-section .success-eyebrow { margin: 0 8px 4px; font-size: 18px; font-weight: 400; color: var(--color-purple); order: 1; text-align: left; }
.success-section .success-heading-row { margin-inline: 8px; order: 2; }
.success-section .success-copy h2 { font-size: 30px; line-height: 1.04; letter-spacing: -.5px; }
.success-desktop-break, .success-section .call-button--success { display: none; }
.success-section .success-copy__tagline { margin: 10px 8px 24px; font-size: 18px; order: 3; }
.success-section .success-portraits { position: relative; inset: auto; width: calc(100% - 27px); padding: 0; margin: 0; gap: 8px; order: 4; }
.success-section .placement-card { height: 294px; border-radius: 6px; box-shadow: none; }
.success-section .placement-card--featured { width: calc(60% - 4px); }
.success-section .placement-card--narrow { width: calc(20% - 6px); }
.success-section .placement-card--featured > div { min-height: 74px; padding: 8px; }
.success-section .placement-card--featured h3 { font-size: 24px; line-height: 1.1; }
.success-section .placement-card--featured p { font-size: 12px; line-height: 1.15; }
.success-section .success-next { top: 50%; bottom: auto; right: -28px; width: 20px; height: 20px; font-size: 22px; transform: translateY(-50%); }
.success-section .counselling-banner--small { order: 5; justify-self: center; width: 135px; min-height: 32px; margin: 22px 0 0; padding: 8px 10px; gap: 8px; }
.success-section .counselling-banner--small .success-cta-desktop:first-child { display: none; }
.success-section .success-cta-mobile { display: inline; font-size: 8px; font-weight: 700; white-space: nowrap; }
.success-section .success-cta-arrow { width: 12px; height: 12px; }
.success-section .counselling-banner--small .button__arrow { font-size: 18px; line-height: 1; }
.faq-section .faq-inner { width: calc(100% - 22px); padding: 16px 0 28px; }
.faq-section .faq-copy .section-heading { text-align: center; }
.faq-section .faq-copy .section-heading h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.65px; }
.faq-title-desktop { display: none; }
.faq-title-mobile { display: inline; }
.faq-section .faq-copy .section-heading p { margin-top: 6px; font-size: 9px; }
.faq-section .faq-list { margin-top: 22px; padding: 24px 30px 0; gap: 5px; }
.faq-section .faq-question { min-height: 32px; padding: 8px 10px; font-size: 10px; border-radius: 5px; }
.faq-section .faq-question > span:first-child { padding-right: 8px; }
.faq-section .faq-icon { width: 12px; height: 12px; flex-basis: 12px; }
.faq-section .faq-icon::before { font-size: 16px; }
.faq-section .faq-item.is-open .faq-icon::before { font-size: 20px; }
.faq-section .faq-answer { margin-inline: 4px; border-radius: 0 0 8px 8px; }
.faq-section .faq-answer p { font-size: 8px; line-height: 1.3; padding-inline: 8px; }
.faq-section .faq-item.is-open .faq-answer p { padding-block: 12px; }
.faq-section .faq-item.is-open { margin-bottom: 10px; }
.faq-section .faq-building { display: none; }
.footer-cta::before, .footer-cta .footer-cta__illustration { display: none; }
.footer-cta .footer-cta__inner { min-height: 236px; padding: 26px 34px 30px; }
.footer-cta .footer-cta__content { display: flex; flex-direction: column; align-items: center; }
.footer-cta .footer-cta__title-row { display: contents; }
.footer-cta h2 { order: 1; font-size: 20px; line-height: 1.2; letter-spacing: -.4px; white-space: nowrap; }
.footer-cta h2 br { display: none; }
.footer-cta h2 span::before { content: ' '; }
.footer-cta .footer-cta__content > p { order: 2; margin: 6px 0 20px; font-size: 10px; line-height: 1.3; text-align: center; }
.footer-cta .footer-benefits { order: 3; width: 100%; gap: 10px; }
.footer-cta .footer-benefits div { min-height: 49px; padding: 13px 4px; border-radius: 5px; gap: 4px; }
.footer-cta .footer-benefits strong, .footer-cta .footer-benefits span { font-size: 8px; }
.footer-cta .button--roadmap { order: 4; width: max-content; max-width: 100%; min-height: 32px; padding: 7px 12px; gap: 6px; margin-top: 14px; }
.footer-cta .button--roadmap span:nth-child(2) { font-size: 11px; }
.footer-cta .button--roadmap img { width: 14px; height: 14px; }
.footer-cta .button--roadmap .button__arrow { font-size: 18px; }
/* Keep both career actions together with readable mobile labels. */
.why-mobile-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: 8px; margin-inline: 0; }
.why-mobile-actions .button { min-width: 0; min-height: 48px; padding: 9px 10px; gap: 6px; font-size: 12px; line-height: 1.3; white-space: normal; }
.why-mobile-actions .button span { flex-shrink: 0; font-size: 18px; }
.why-mobile-actions .call-button { min-width: 0; min-height: 48px; padding: 9px 10px; gap: 6px; justify-content: center; }
.why-mobile-actions .call-button strong { font-size: 14px; white-space: nowrap; }
.why-mobile-actions .call-button__icon { width: 22px; height: 22px; flex-basis: 22px; }
.why-mobile-actions .call-button__icon img { width: 22px; height: 22px; }

@media (max-width: 360px) {
  .hero__title { font-size: 18px; }
  .tools-section .training-card { left: 0; width: 55%; }
  .training-card[data-deck-position="3"] { transform: translateX(94px) scale(.83); }
  .training-card[data-deck-position="2"] { transform: translateX(62px) scale(.9); }
  .training-card[data-deck-position="1"] { transform: translateX(30px) scale(.95); }
  .success-section .success-copy h2 { font-size: 26px; }
  .success-section .success-copy__tagline { font-size: 15px; }
  .success-section .placement-card--featured h3 { font-size: 20px; }
  .faq-section .faq-copy .section-heading h2 { font-size: 21px; }
  .faq-section .faq-list { padding-inline: 14px; }
  .footer-cta h2 { font-size: 17px; }
}
