/* 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 }

/* ---------- 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;
}
.nav-link:hover{ background:#FFE7CC;color:#E0730A }
.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 }
.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) }

.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;
}
.frame:hover{ transform:rotate(0deg) scale(1.04) !important;z-index:20 }

/* ---------- 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 }