/* =========================================================
   SCERT TRAINING — DESIGN TOKENS
   Palette   : institutional navy + marigold/saffron accent + teal
   Type      : Outfit (display) / Inter (body) / JetBrains Mono (data)
   Signature : "training journey" step-ribbon + certificate-seal motif
   ========================================================= */
:root{
  --navy:        #0B3556;
  --navy-dark:   #082741;
  --navy-tint:   #EAF0F5;
  --saffron:     #F2A73B;
  --saffron-dark:#D98A16;
  --teal:        #0F7A73;
  --bg:          #F6F8FA;
  --surface:     #FFFFFF;
  --ink:         #16232E;
  --muted:       #5B6B7A;
  --border:      #E4E9EE;
  --success:     #1E7145;
  --danger:      #B3261E;

  --font-display: 'Outfit', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 2px 8px rgba(11,53,86,.08);
  --shadow-md: 0 8px 28px rgba(11,53,86,.12);
  --shadow-lg: 0 18px 48px rgba(11,53,86,.18);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,.font-display{
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--navy-dark);
  letter-spacing: -0.01em;
}
a{ text-decoration:none; color: var(--navy); }
.text-mono{ font-family: var(--font-mono); }
::selection{ background: var(--saffron); color:#fff; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* ---------- Utility bar ---------- */
.top-utility{
  background: var(--navy-dark);
  color: #cfe0ec;
  font-size: .8rem;
  padding: 6px 0;
}
.top-utility a{ color:#cfe0ec; opacity:.9; }
.top-utility a:hover{ color: var(--saffron); opacity:1; }
.top-utility .divider{ opacity:.3; margin:0 10px; }
.top-utility .social-icons a{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background: rgba(255,255,255,.08); margin-left:6px;
}
.top-utility .social-icons a:hover{ background: var(--saffron); color: var(--navy-dark); }

/* ---------- Header ---------- */
.site-header{
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top:0; z-index: 1030;
}
.brand-row{ padding: 14px 0; }
.brand-logo-emblem{ height:56px; width:auto; }
.brand-title{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--navy-dark);
  font-size: 1.15rem;
  line-height:1.2;
  margin:0;
}
.brand-subtitle{
  font-size:.78rem; color: var(--muted); margin:0;
}
.brand-hindi{ font-size:.75rem; color: var(--muted); }

.navbar-main{
  background: var(--navy);
}
.navbar-main .navbar-nav .nav-link{
  color: #e7eef4;
  font-weight:500;
  font-size: .92rem;
  padding: 14px 16px !important;
  transition: background .15s ease, color .15s ease;
}
.navbar-main .navbar-nav .nav-link:hover,
.navbar-main .navbar-nav .nav-link.active{
  color: #fff;
  background: rgba(255,255,255,.08);
}
.navbar-main .dropdown-menu{
  border:0; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding:8px;
}
.navbar-main .dropdown-item{
  border-radius:6px; padding:8px 12px; font-size:.9rem;
}
.navbar-main .dropdown-item:hover{ background: var(--navy-tint); color: var(--navy); }
.btn-admin-login{
  background: var(--saffron);
  color: var(--navy-dark) !important;
  font-weight:600;
  border-radius: 999px;
  padding: 7px 18px !important;
  font-size:.85rem !important;
}
.btn-admin-login:hover{ background:#fff; }

/* ---------- Marquee notice strip ---------- */
.notice-strip{
  background: var(--navy-tint);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center;
  overflow:hidden;
}
.notice-strip .notice-label{
  background: var(--teal); color:#fff; font-weight:600; font-size:.78rem;
  padding:9px 16px; white-space:nowrap; flex-shrink:0;
}
.notice-marquee{
  overflow:hidden; white-space:nowrap; flex:1; position:relative;
}
.notice-track{
  display:inline-block; padding-left:100%;
  animation: scrollLeft 32s linear infinite;
}
.notice-track a{ color: var(--navy-dark); font-size:.85rem; margin-right:60px; font-weight:500;}
.notice-track a:hover{ color: var(--saffron-dark); }
@keyframes scrollLeft{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* ---------- Hero ---------- */
.hero{ position:relative; }
.hero .carousel-item{ height: 62vh; min-height:420px; }
.hero .carousel-item img{
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.62);
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,39,65,.15) 0%, rgba(8,39,65,.75) 100%);
}
.hero-caption{
  position:absolute; left:0; right:0; bottom:76px;
  color:#fff;
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background: rgba(242,167,59,.15);
  border:1px solid var(--saffron);
  color: var(--saffron);
  font-size:.78rem; font-weight:600; letter-spacing:.04em;
  padding:5px 14px; border-radius:999px;
  text-transform:uppercase;
}
.hero-caption h1{
  color:#fff; font-size: clamp(1.8rem, 4vw, 3rem);
  max-width:760px; margin: 14px 0;
}
.hero-caption p{ max-width:600px; color:#dbe6ee; font-size:1.05rem; }

/* Signature: Training Journey seal-ribbon stat strip overlapping hero */
.journey-strip{
  position:relative; z-index:5;
  margin-top:-58px;
}
.journey-card{
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 22px 10px;
}
.journey-step{
  text-align:center; padding: 10px 6px; position:relative;
}
.journey-step .seal{
  width:52px; height:52px; border-radius:50%;
  background: var(--navy-tint);
  border:2px dashed var(--saffron);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 10px;
  font-family: var(--font-mono); font-weight:700; color: var(--navy);
  font-size:1rem;
}
.journey-step h3{
  font-size:1.5rem; margin:0; color: var(--navy-dark);
  font-family: var(--font-mono);
}
.journey-step p{ font-size:.8rem; color: var(--muted); margin:2px 0 0; text-transform:uppercase; letter-spacing:.03em;}
.journey-step:not(:last-child)::after{
  content:''; position:absolute; right:-2px; top:20%; bottom:20%; width:1px;
  background: var(--border);
}
@media (max-width: 767px){
  .journey-step:not(:last-child)::after{ display:none; }
  .journey-step{ border-bottom:1px dashed var(--border); padding-bottom:16px; margin-bottom:10px;}
  .journey-step:last-child{ border-bottom:0; }
}

/* ---------- Section wrapper ---------- */
.section{ padding: 72px 0; }
.section-sm{ padding: 44px 0; }
.section-eyebrow{
  color: var(--teal); font-weight:700; font-size:.78rem;
  letter-spacing:.08em; text-transform:uppercase;
}
.section-title{ font-size: clamp(1.5rem,3vw,2.1rem); margin: 6px 0 16px; }
.section-divider{
  width:52px; height:4px; background: var(--saffron); border-radius:2px; margin-bottom:20px;
}

/* ---------- About ---------- */
.about-media{
  position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-md);
}
.about-media img{ width:100%; display:block; }
.about-media::before{
  content:''; position:absolute; inset:0;
  border: 6px solid rgba(255,255,255,.5); border-radius: var(--radius-lg);
}

/* ---------- Training programme cards ---------- */
.training-card{
  background: var(--surface);
  border-radius: var(--radius-md);
  overflow:hidden;
  border:1px solid var(--border);
  transition: transform .2s ease, box-shadow .2s ease;
  height:100%;
}
.training-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md); }
.training-card .thumb{ height:170px; overflow:hidden; }
.training-card .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease;}
.training-card:hover .thumb img{ transform: scale(1.06); }
.badge-mode{
  font-size:.7rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px;
}
.badge-Online{ background:#E7F5EC; color: var(--success); }
.badge-Offline{ background:#FDECEC; color: var(--danger); }
.badge-Hybrid{ background:#FFF3E0; color: var(--saffron-dark); }
.training-card .body{ padding:16px 18px 18px; }
.training-card h5{ font-size:1.02rem; margin: 8px 0 6px; }
.training-card .meta{ font-size:.78rem; color: var(--muted); }
.step-progress{ display:flex; gap:4px; margin-top:12px; }
.step-progress span{ height:5px; flex:1; border-radius:3px; background: var(--border); }
.step-progress span.done{ background: var(--teal); }
.step-progress span.active{ background: var(--saffron); }

/* ---------- Tri-column tabs: Announcements / Results / Links ---------- */
.info-tabs .nav-pills .nav-link{
  border-radius: 999px; font-weight:600; font-size:.85rem;
  color: var(--navy); padding:8px 18px; margin-right:8px; border:1px solid var(--border);
}
.info-tabs .nav-pills .nav-link.active{ background: var(--navy); color:#fff; border-color:var(--navy); }
.info-panel{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-md);
  padding: 10px 6px;
}
.info-list li{
  border-bottom:1px dashed var(--border);
  padding: 12px 14px;
  font-size:.9rem;
  display:flex; align-items:flex-start; gap:10px;
}
.info-list li:last-child{ border-bottom:0; }
.info-list li .dot{
  flex-shrink:0; width:8px; height:8px; margin-top:6px; border-radius:50%; background: var(--saffron);
}
.info-list li a{ color: var(--ink); }
.info-list li a:hover{ color: var(--navy); }
.info-list .date-chip{
  font-family: var(--font-mono); font-size:.7rem; color: var(--teal); flex-shrink:0;
}

/* ---------- Management team ---------- */
.team-card{ text-align:center; }
.team-card .avatar{
  width:130px; height:130px; border-radius:50%; overflow:hidden; margin:0 auto 14px;
  border:4px solid var(--surface); box-shadow: var(--shadow-sm);
}
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; }
.team-card h5{ font-size:1rem; margin-bottom:2px; }
.team-card p{ font-size:.82rem; color: var(--teal); font-weight:600; margin:0; }

/* ---------- News cards ---------- */
.news-card{
  background: var(--surface); border-radius: var(--radius-md); overflow:hidden;
  border:1px solid var(--border); height:100%;
  transition: box-shadow .2s ease, transform .2s ease;
}
.news-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-4px); }
.news-card .thumb{ height:160px; overflow:hidden; }
.news-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.news-card .body{ padding:16px 18px; }
.news-card .date{
  font-family: var(--font-mono); font-size:.72rem; color: var(--teal); font-weight:600;
}
.news-card h5{ font-size:.98rem; margin:8px 0; line-height:1.4; }

/* ---------- Gallery preview ---------- */
.gallery-tile{
  position:relative; border-radius: var(--radius-sm); overflow:hidden; aspect-ratio: 4/3;
}
.gallery-tile img{ width:100%; height:100%; object-fit:cover; transition: transform .4s ease; }
.gallery-tile:hover img{ transform: scale(1.08); }
.gallery-tile .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background: rgba(8,39,65,.35); color:#fff; font-size:1.6rem; opacity:0; transition:opacity .2s ease;
}
.gallery-tile:hover .play{ opacity:1; }

/* ---------- CTA strip ---------- */
.cta-strip{
  background: linear-gradient(120deg, var(--navy) 0%, var(--navy-dark) 100%);
  border-radius: var(--radius-lg);
  padding: 46px;
  color:#fff;
  position:relative;
  overflow:hidden;
}
.cta-strip::after{
  content:''; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  border-radius:50%; border:24px solid rgba(242,167,59,.15);
}
.cta-strip h3{ color:#fff; }
.btn-saffron{
  background: var(--saffron); border:none; color: var(--navy-dark); font-weight:700;
  padding:12px 26px; border-radius:999px; transition: all .15s ease;
}
.btn-saffron:hover{ background:#fff; color: var(--navy-dark); }
.btn-outline-light-custom{
  border:1.5px solid rgba(255,255,255,.5); color:#fff; padding:12px 26px; border-radius:999px; font-weight:600;
}
.btn-outline-light-custom:hover{ background:#fff; color: var(--navy-dark); }

/* ---------- Footer ---------- */
.site-footer{
  background: var(--navy-dark); color:#c6d6e2; padding-top:56px;
}
.site-footer h6{ color:#fff; font-family: var(--font-display); font-weight:600; margin-bottom:16px; }
.site-footer a{ color:#a9c0d1; font-size:.88rem; line-height:2.1; }
.site-footer a:hover{ color: var(--saffron); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); margin-top:36px; padding:18px 0; font-size:.82rem; color:#8ba4b8;
}
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:50%; background: rgba(255,255,255,.08); margin-right:8px;
}
.footer-social a:hover{ background: var(--saffron); color: var(--navy-dark); }

/* ---------- Generic page header (inner pages) ---------- */
.page-banner{
  background: var(--navy);
  background-image: linear-gradient(120deg, rgba(8,39,65,.92), rgba(15,122,115,.85));
  padding: 54px 0;
  color:#fff;
}
.page-banner h1{ color:#fff; margin:0; font-size:2rem; }
.page-banner .breadcrumb{ margin:0; font-size:.85rem; }
.page-banner .breadcrumb a{ color:#cfe0ec; }
.page-banner .breadcrumb .active{ color: var(--saffron); }

/* ---------- Cards / lists generic ---------- */
.doc-list-item{
  display:flex; align-items:center; gap:14px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding:14px 16px; margin-bottom:12px;
}
.doc-list-item .doc-icon{
  width:42px; height:42px; border-radius:10px; background: var(--navy-tint); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.doc-list-item .doc-meta{ font-size:.78rem; color: var(--muted); }
.doc-list-item .btn{ margin-left:auto; }

/* ---------- Buttons ---------- */
.btn-navy{ background: var(--navy); color:#fff; border-radius:999px; font-weight:600; }
.btn-navy:hover{ background: var(--navy-dark); color:#fff; }
.btn-outline-navy{ border:1.5px solid var(--navy); color: var(--navy); border-radius:999px; font-weight:600; }
.btn-outline-navy:hover{ background: var(--navy); color:#fff; }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; bottom:26px; right:26px; width:46px; height:46px; border-radius:50%;
  background: var(--saffron); color: var(--navy-dark); display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-md); opacity:0; visibility:hidden; transition: all .25s ease; z-index:1000;
}
.back-to-top.show{ opacity:1; visibility:visible; }

/* ---------- Focus states ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline: 3px solid var(--saffron); outline-offset:2px;
}