/* B.P. Jain Skill Development Centre — component classes on top of Tailwind CDN */

[x-cloak]{display:none !important}

body{ -webkit-font-smoothing:antialiased }

h1,h2,h3,h4,.font-display{ font-family:'Fredoka',system-ui,sans-serif; letter-spacing:-.01em }

.brand-logo{
  display:inline-flex;align-items:center;gap:1rem;
  min-width:0;padding:.55rem 1rem;border-radius:9999px;
  background:#fff;border:1px solid rgba(43,43,43,.08);
  box-shadow:0 14px 40px -25px rgba(43,43,43,.18);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
  text-decoration:none;color:inherit;
}
.brand-logo:hover,
.brand-logo:focus-visible{
  transform:translateY(-1px);
  box-shadow:0 20px 50px -30px rgba(43,43,43,.22);
  border-color:rgba(43,43,43,.14);
}
.brand-mark{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:1rem;background:linear-gradient(135deg,#FF8C1A,#FFB56A);
  overflow:hidden;box-shadow:0 10px 30px -18px rgba(43,43,43,.22);
}
.brand-mark-img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.95);
}
.brand-logo-copy{
  display:flex;flex-direction:column;min-width:0;
}
.brand-logo-title{
  display:block;font-size:1rem;line-height:1.05;font-weight:700;
  letter-spacing:.01em;color:#111827;
}
.brand-logo-sub{
  display:block;margin-top:.15rem;font-size:.72rem;font-weight:600;
  color:#4B5563;letter-spacing:.08em;text-transform:uppercase;
}
.footer-brand{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:.5rem 1rem;border-radius:9999px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 35px -25px rgba(0,0,0,.24);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
  text-decoration:none;color:#fff;
}
.footer-brand:hover,
.footer-brand:focus-visible{
  transform:translateY(-1px);
  background:rgba(255,255,255,.14);
  border-color:rgba(255,255,255,.2);
}
.footer-brand-mark{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;
  border-radius:1rem;background:linear-gradient(135deg,#FF8C1A,#FFB56A);
  overflow:hidden;box-shadow:0 10px 30px -18px rgba(43,43,43,.22);
}
.footer-brand-mark-img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:brightness(.95);
}
.footer-brand-copy{
  display:flex;flex-direction:column;min-width:0;
}
.footer-brand-title{
  display:block;font-size:1rem;line-height:1.05;font-weight:700;
  letter-spacing:.01em;color:#fff;
}
.footer-brand-sub{
  display:block;margin-top:.12rem;font-size:.72rem;font-weight:600;
  color:rgba(255,255,255,.75);letter-spacing:.08em;text-transform:uppercase;
}
@media(min-width:640px){
  .brand-mark{ width:3rem;height:3rem }
  .brand-logo-title{ font-size:1.05rem }
  .brand-logo-sub{ font-size:.78rem }
}

/* ---------- Nav ---------- */
.nav-link{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.55rem .75rem;border-radius:.85rem;
  font-size:.9rem;font-weight:500;color:#2B2B2B;
  transition:background .2s,color .2s,transform .2s;
}
.nav-link:hover{ background:rgba(255,140,26,.12);color:#E0730A;transform:translateY(-1px) }
.dropdown{
  position:absolute;top:calc(100% + .4rem);left:0;
  background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:1.25rem;padding:.5rem;
  box-shadow:0 22px 45px -18px rgba(43,43,43,.28);
  z-index:60;
}
.drop-item{
  display:flex;align-items:center;gap:.5rem;
  padding:.55rem .7rem;border-radius:.75rem;
  font-size:.875rem;color:#2B2B2B;transition:background .18s;
}
.drop-item:hover{ background:#FFFBF5;color:#E0730A }
.course-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:1rem;
  flex:0 0 auto;margin-right:.75rem;
}
.course-icon-mobile{
  width:1.7rem;height:1.7rem;margin-right:.65rem;
}
.drop-icon,
.m-sub-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9rem;height:1.9rem;border-radius:1rem;
  margin-right:.75rem;flex:0 0 auto;
}
.m-sub-icon{ width:1.7rem;height:1.7rem;margin-right:.6rem }
.dot{ width:.5rem;height:.5rem;border-radius:9999px;flex:0 0 auto }
.m-item{
  display:flex;width:100%;align-items:center;justify-content:space-between;
  padding:.85rem .5rem;border-bottom:1px solid rgba(0,0,0,.06);
  font-family:'Fredoka',sans-serif;font-size:1.05rem;color:#2B2B2B;
}
.m-sub{ display:block;padding:.5rem .5rem;font-size:.9rem;color:#5b5b5b }
.m-sub:hover{ color:#E0730A }

/* ---------- Buttons ---------- */
.btn-primary{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.35rem;border-radius:9999px;
  background:#FF8C1A;color:#fff;font-weight:500;font-size:.925rem;
  box-shadow:0 10px 24px -10px rgba(255,140,26,.9);
  transition:transform .18s, background .18s, box-shadow .18s;
}
.btn-primary:hover{ background:#E0730A;transform:translateY(-2px) }
.btn-primary:disabled{ opacity:.6;transform:none }
.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.35rem;border-radius:9999px;
  border:2px solid #2B2B2B;color:#2B2B2B;font-weight:500;font-size:.925rem;
  transition:background .18s,color .18s,transform .18s;
}
.btn-outline:hover{ background:#2B2B2B;color:#fff;transform:translateY(-2px) }
.btn-white{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.35rem;border-radius:9999px;background:#fff;color:#2B2B2B;
  font-weight:500;transition:transform .18s}
.btn-white:hover{ transform:translateY(-2px) }

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:3px solid #1BB6A6;outline-offset:2px;border-radius:.5rem;
}

/* ---------- Forms ---------- */
.lbl{ display:block;margin-bottom:.3rem;font-size:.78rem;font-weight:500;color:#2B2B2B }
.inp{
  width:100%;border:1.5px solid rgba(43,43,43,.14);border-radius:.9rem;
  padding:.7rem .9rem;font-size:.9rem;background:#fff;color:#2B2B2B;
  transition:border-color .18s, box-shadow .18s;
}
.inp:focus{ border-color:#FF8C1A;box-shadow:0 0 0 4px rgba(255,140,26,.12);outline:none }
.inp::placeholder{ color:rgba(43,43,43,.38) }

/* ---------- Footer ---------- */
.f-head{ font-family:'Fredoka',sans-serif;font-size:1.05rem;color:#fff;margin-bottom:1rem }
.f-link{ color:rgba(255,255,255,.72);transition:color .18s }
.f-link:hover{ color:#FF8C1A }
.social{
  display:grid;place-items:center;height:2.5rem;width:2.5rem;border-radius:9999px;
  background:rgba(255,255,255,.08);color:#fff;transition:background .2s,transform .2s;
}
.social:hover{ background:#FF8C1A;transform:translateY(-2px) }

/* ---------- Decorative ---------- */
.squiggle{
  display:block;margin-top:.4rem;height:14px;width:150px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 14'%3E%3Cpath d='M2 9C22 2 32 12 52 8s28-8 48-3 30 8 48 2' fill='none' stroke='%23FF8C1A' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat;
}
.squiggle-turq{ filter:hue-rotate(140deg) saturate(1.2) }
.blob{ position:absolute;border-radius:42% 58% 63% 37% / 47% 38% 62% 53%;filter:blur(0px);opacity:.5;pointer-events:none }
.tape{
  position:absolute;top:-10px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:76px;height:22px;background:rgba(255,201,60,.75);border-radius:3px;
}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid rgba(43,43,43,.07);border-radius:1.5rem;
  box-shadow:0 10px 30px -12px rgba(43,43,43,.18);
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px) rotate(-.6deg);box-shadow:0 22px 45px -18px rgba(43,43,43,.28) }

.proof-card{
  position:relative;
  overflow:hidden;
}
.proof-card::after{
  content:'';
  position:absolute;
  inset:auto -2.5rem -2.5rem auto;
  width:7rem;
  height:7rem;
  border-radius:9999px;
  background:radial-gradient(circle, rgba(255,140,26,.12) 0%, rgba(255,140,26,0) 70%);
  pointer-events:none;
}
.testimonial-outcomes{
  background:linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,251,245,.92) 100%);
}

.course-card-thumb {
  position:relative;
  overflow:hidden;
}
.course-card-thumb::before {
  content:'';
  position:absolute;
  inset:0;
  background:rgba(14,116,232,.14);
  pointer-events:none;
}
.course-card-thumb-overlay {
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,.82) 100%);
  pointer-events:none;
}
.course-card-copy {
  position:absolute;
  inset-x:0;
  bottom:0;
  padding:1.4rem 1.25rem 1.1rem;
  color:#fff;
}
.course-card-copy h3{
  margin:.65rem 0 0;
  font-size:1.75rem;
  line-height:1.02;
}
.course-card-copy p{
  margin:.7rem 0 0;
  color:rgba(248,250,252,.88);
}
.course-card-copy .explore-badge{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  padding:.65rem 1rem;
  border-radius:9999px;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:.85rem;
  font-weight:600;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease;
}
.group:hover .course-card-copy .explore-badge,
.group:focus-visible .course-card-copy .explore-badge{
  opacity:1;
  transform:translateY(0);
}
.frame{
  background:#fff;padding:.55rem;border-radius:.75rem;
  box-shadow:0 14px 30px -14px rgba(43,43,43,.35);
  transition:transform .3s ease, z-index 0s;
  line-height:0;
}
.frame:hover{ transform:rotate(0deg) scale(1.04) !important;z-index:20 }

.video-card{
  overflow:hidden;border-radius:1.5rem;border:1px solid rgba(43,43,43,.08);background:#fff;
}
.video-card button{
  display:block;width:100%;text-align:left;
  cursor:pointer;
}
.video-thumb{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:#111;
}
.video-thumb video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.video-play{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:4rem;height:4rem;border-radius:9999px;background:rgba(255,255,255,.95);
  color:#FF8C1A;box-shadow:0 18px 40px -24px rgba(0,0,0,.4);
}
.video-play i{transform:translateX(.05rem)}
.video-modal{
  max-height:80vh;width:100%;border-radius:1.5rem;background:#000;
}
.video-modal-caption{margin-top:1rem;font-size:.95rem;color:#fff;opacity:.8;}

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0;transform:translateY(26px);transition:opacity .7s ease, transform .7s ease }
.reveal.is-visible{ opacity:1;transform:none }
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card:hover,.frame:hover{transform:none}
}

/* hide scrollbar on horizontal strips */
.no-bar{ scrollbar-width:none }
.no-bar::-webkit-scrollbar{ display:none }