/* =========================================================
   W3TecHub — Design System
   "Job First" workflow platform: Learn • Build • Innovate • Get Hired
   ========================================================= */

/* ---- Self-hosted fonts (no external CDN needed) ---- */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('../vendor/fonts/inter/inter-latin-400-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('../vendor/fonts/inter/inter-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('../vendor/fonts/inter/inter-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('../vendor/fonts/inter/inter-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url('../vendor/fonts/poppins/poppins-latin-500-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url('../vendor/fonts/poppins/poppins-latin-600-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:700; font-display:swap; src:url('../vendor/fonts/poppins/poppins-latin-700-normal.woff2') format('woff2'); }
@font-face{ font-family:'Poppins'; font-style:normal; font-weight:800; font-display:swap; src:url('../vendor/fonts/poppins/poppins-latin-800-normal.woff2') format('woff2'); }

:root{
  --w3-red:        #C81E2C;   /* primary brand red (from logo) */
  --w3-red-dark:   #8E1420;
  --w3-ink:        #12181F;   /* near-black navy for text/dark sections */
  --w3-ink-soft:   #2B3440;
  --w3-gold:       #E8A93B;   /* accent — "Get Hired" energy */
  --w3-teal:       #0E7C6B;   /* success / placement */
  --w3-navy:       #14224A;   /* deep blue — mobile menu hover state */
  --w3-paper:      #FBF8F4;   /* warm off-white background */
  --w3-line:       #E7E1D8;
  --w3-muted:      #6B7280;

  --bs-primary: var(--w3-red);
  --bs-primary-rgb: 200,30,44;
}

html{ scroll-behavior:smooth; }

body{
  font-family:'Inter', -apple-system, sans-serif;
  color: var(--w3-ink);
  background: var(--w3-paper);
}

h1,h2,h3,h4,h5,h6,.font-display{
  font-family:'Poppins', sans-serif;
  font-weight:700;
  color: var(--w3-ink);
  letter-spacing:-0.01em;
}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Poppins',sans-serif;
  font-weight:600; font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--w3-red);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--w3-gold);display:inline-block;}

.text-primary{ color: var(--w3-red) !important; }
.bg-primary{ background-color: var(--w3-red) !important; }
.text-gold{ color: var(--w3-gold) !important; }
.bg-ink{ background-color: var(--w3-ink) !important; }
.bg-paper{ background-color: var(--w3-paper) !important; }
.bg-soft{ background-color: #F3EEE6 !important; }

a{ color:var(--w3-red); text-decoration:none; }
a:hover{ color:var(--w3-red-dark); }

/* ---------- Buttons ---------- */
.btn{ font-family:'Poppins',sans-serif; font-weight:600; border-radius:2px; transition:.25s; }
.btn-primary{ background:var(--w3-red); border-color:var(--w3-red); }
.btn-primary:hover{ background:var(--w3-red-dark); border-color:var(--w3-red-dark); }
.btn-gold{ background:var(--w3-gold); border-color:var(--w3-gold); color:var(--w3-ink); }
.btn-gold:hover{ background:#d69627; border-color:#d69627; color:var(--w3-ink); }
.btn-outline-light-2{ border:1px solid rgba(255,255,255,.5); color:#fff; }
.btn-outline-light-2:hover{ background:#fff; color:var(--w3-ink); }
.btn-square{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; }

/* ---------- Spinner ---------- */
#spinner{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease-out, visibility 0s linear .5s; z-index:99999; background:var(--w3-paper); }
#spinner.show{ transition:opacity .5s ease-out, visibility 0s linear 0s; visibility:visible; opacity:1; pointer-events:auto; }

/* ---------- Navbar ---------- */
.navbar{ padding:0; border-bottom:1px solid var(--w3-line); }
.navbar-brand{ line-height:1; }
.brand-mark{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.6rem; color:var(--w3-ink); }
.brand-mark span{ color:var(--w3-red); }
.brand-tag{ font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--w3-muted); display:block; margin-top:-4px; }
.navbar-logo{ height:52px; width:auto; display:block; }
.footer-logo{ height:56px; width:auto; display:block; }
@media (max-width:575.98px){ .navbar-logo{ height:42px; } }
.navbar .nav-link{ font-family:'Poppins',sans-serif; font-weight:600; font-size:.92rem; color:var(--w3-ink-soft); padding:1.7rem .85rem !important; }
.navbar .nav-link:hover, .navbar .nav-link.active{ color:var(--w3-red); }
.navbar .dropdown-menu{ border:none; border-top:3px solid var(--w3-red); box-shadow:0 12px 30px rgba(18,24,31,.12); border-radius:0; padding:.5rem 0; }
.navbar .dropdown-item{ font-weight:500; padding:.55rem 1.4rem; }
.navbar .dropdown-item:hover{ background:var(--w3-paper); color:var(--w3-red); }
.nav-apply-btn{ background:var(--w3-red); color:#fff; border:none; border-radius:50rem; padding:.65rem 1.6rem; margin:0 1.75rem; font-weight:600; font-size:.92rem; line-height:1.3; box-shadow:0 6px 16px rgba(200,30,44,.32); transition:background .2s ease, transform .2s ease; white-space:nowrap; flex-shrink:0; }
.nav-apply-btn-mobile{ display:flex; justify-content:center; width:100%; margin:1rem 0 0; }
.nav-apply-btn:hover{ background:var(--w3-red-dark); color:#fff; transform:translateY(-1px); }
.nav-apply-btn i{ font-size:.8rem; }
@media (min-width:992px){
  .navbar .dropdown:hover > .dropdown-menu{ display:block; margin-top:0; }
}

/* ---------- Mobile navbar: compact, evenly-spaced flat menu ---------- */
@media (max-width:991.98px){
  .navbar-nav.ms-auto{ gap:0; }
  .navbar .nav-item.nav-link,
  .navbar .nav-item.dropdown > .nav-link.dropdown-toggle{
    display:block;
    width:100%;
    padding:.85rem .25rem !important;
    border-bottom:1px solid var(--w3-line);
  }
  .navbar-collapse .navbar-nav > a.nav-item.nav-link:first-child{ border-top:1px solid var(--w3-line); }
  .navbar .nav-item.dropdown{ border-bottom:1px solid var(--w3-line); }
  .navbar .nav-item.dropdown > .nav-link.dropdown-toggle{ border-bottom:none; }
  .navbar .dropdown-menu{ box-shadow:none; padding:.25rem 0 .5rem 1rem; border-top:none; }
  .navbar .dropdown-item{ padding:.5rem .5rem; }
  .nav-apply-btn-mobile{ margin-top:1.25rem; }

  .navbar .nav-item.nav-link:hover,
  .navbar .nav-item.dropdown > .nav-link.dropdown-toggle:hover,
  .navbar .dropdown-item:hover{
    background:var(--w3-navy) !important;
    color:#fff !important;
  }
}


/* ---------- Hero ---------- */
.hero{
  position:relative;
  background: linear-gradient(120deg, var(--w3-ink) 0%, #1c2733 62%, var(--w3-red-dark) 130%);
  overflow:hidden;
}
.hero::after{
  content:"";position:absolute; inset:0;
  background-image: radial-gradient(circle at 82% 20%, rgba(232,169,59,.18), transparent 45%),
                     radial-gradient(circle at 15% 85%, rgba(200,30,44,.25), transparent 40%);
}
.hero .container{ position:relative; z-index:2; }
.hero h1{ color:#fff; font-size:clamp(2.1rem,4vw,3.4rem); line-height:1.12; }
.hero p.lead{ color:rgba(255,255,255,.78); font-size:1.05rem; }
.hero-badge{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color:#fff; padding:.4rem .9rem; border-radius:30px; font-size:.78rem; font-weight:600;
}
.hero-logo{ height:54px; width:auto; display:block; filter:drop-shadow(0 8px 18px rgba(0,0,0,.35)); }
.hero-tagline{ color:rgba(255,255,255,.88); font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.hero-tagline .text-gold{ margin:0 .4em; }

/* ---------- Hero image carousel ---------- */
.header-carousel{ position:relative; }
.header-carousel .owl-stage-outer{ }
.header-carousel .slide{ position:relative; height:560px; overflow:hidden; }
.header-carousel .slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.header-carousel .slide.slide-gradient{ background:linear-gradient(120deg, var(--w3-ink) 0%, #1c2733 62%, var(--w3-red-dark) 130%); }
.header-carousel .slide.slide-gradient-teal{ background:linear-gradient(120deg, var(--w3-ink) 0%, #17392f 55%, var(--w3-teal) 140%); }
.header-carousel .slide.slide-gradient-gold{ background:linear-gradient(120deg, var(--w3-ink) 0%, #3a2f18 55%, var(--w3-gold) 150%); }
.header-carousel .slide.slide-gradient-red{ background:linear-gradient(120deg, var(--w3-ink-soft) 0%, #331016 60%, var(--w3-red) 145%); }
.header-carousel .slide-overlay{ position:absolute; inset:0; background:linear-gradient(100deg, rgba(18,24,31,.92) 0%, rgba(18,24,31,.72) 45%, rgba(200,30,44,.45) 100%); display:flex; align-items:center; }
.header-carousel .slide-content{ position:relative; z-index:2; color:#fff; max-width:620px; padding:0 1rem; }
.header-carousel .slide-content h1{ color:#fff; font-size:clamp(2rem,3.6vw,3.1rem); line-height:1.14; }
.header-carousel .slide-content p{ color:rgba(255,255,255,.8); font-size:1.02rem; }
.header-carousel .owl-nav{ display:none; }
.header-carousel .owl-dots{ position:absolute; bottom:22px; left:0; right:0; margin:0 !important; z-index:3; text-align:center; }
.header-carousel .owl-dots .owl-dot{ display:inline-block; cursor:pointer; }
.header-carousel .owl-dots .owl-dot span{ display:block; width:10px; height:10px; margin:5px 6px; border-radius:50%; background:rgba(255,255,255,.45); transition:background .2s ease, transform .2s ease; }
.header-carousel .owl-dots .owl-dot.active span,.header-carousel .owl-dots .owl-dot:hover span{ background:var(--w3-gold); transform:scale(1.15); }
@media (max-width:767px){ .header-carousel .slide{ height:620px; } }

/* ---------- Workflow stepper (signature element) ---------- */
.workflow{
  display:flex; flex-wrap:wrap; gap:0; border:1px solid var(--w3-line); background:#fff;
}
.workflow-step{
  flex:1 1 0; min-width:150px; padding:1.5rem 1.25rem; position:relative; border-right:1px solid var(--w3-line);
}
.workflow-step:last-child{ border-right:none; }
.workflow-step .wf-num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:.75rem; color:var(--w3-gold); letter-spacing:.1em; }
.workflow-step h6{ margin:.35rem 0 0; font-size:.95rem; }
.workflow-step::after{
  content:"\2192"; position:absolute; right:-11px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; background:var(--w3-red); color:#fff; border-radius:50%;
  font-size:.7rem; display:flex; align-items:center; justify-content:center; z-index:2;
}
.workflow-step:last-child::after{ display:none; }
@media (max-width:767px){
  .workflow{ flex-direction:column; }
  .workflow-step{ border-right:none; border-bottom:1px solid var(--w3-line); }
  .workflow-step::after{ content:"\2193"; right:auto; left:20px; top:auto; bottom:-11px; }
  .workflow-step:last-child{ border-bottom:none; }
}

/* ---------- Section titles ---------- */
.section-head{ max-width:640px; }
.section-head.mx-auto{ text-align:center; }

/* ---------- Stat counters ---------- */
.stat-strip{ background:var(--w3-ink); }
.stat-item h2{ color:#fff; font-size:2.2rem; margin-bottom:.15rem; }
.stat-item h2 span{ color:var(--w3-gold); }
.stat-item p{ color:rgba(255,255,255,.65); margin:0; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; }

/* ---------- Cards ---------- */
.card-tile{ background:#fff; border:1px solid var(--w3-line); padding:1.75rem 1.5rem; height:100%; transition:.25s; position:relative; }
.card-tile:hover{ border-color:var(--w3-red); transform:translateY(-4px); box-shadow:0 14px 30px rgba(18,24,31,.08); }
.card-tile-highlight{ border:2px solid var(--w3-gold); background:linear-gradient(180deg,#FFF8EC 0%,#fff 65%); }
.card-tile-highlight:hover{ border-color:var(--w3-gold); }
.card-tile-highlight::after{
  content:"Popular";
  position:absolute; top:-12px; right:16px;
  background:var(--w3-gold); color:var(--w3-ink);
  font-family:'Poppins',sans-serif; font-weight:700; font-size:.68rem;
  letter-spacing:.05em; text-transform:uppercase;
  padding:.28rem .65rem; border-radius:20px;
  box-shadow:0 4px 10px rgba(232,169,59,.4);
}
.card-tile .tile-icon{
  width:52px;height:52px;border-radius:50%;background:var(--w3-paper);
  display:flex;align-items:center;justify-content:center;color:var(--w3-red);font-size:1.3rem;margin-bottom:1rem;
}
.course-card{ background:#fff; border:1px solid var(--w3-line); overflow:hidden; height:100%; }
.course-card .course-media{ background:linear-gradient(135deg,var(--w3-ink),var(--w3-red-dark)); color:#fff; padding:1.75rem; position:relative; }
.course-card .course-media i{ font-size:2rem; color:var(--w3-gold); }
.course-card .course-body{ padding:1.25rem 1.4rem 1.5rem; }
.badge-level{ background:var(--w3-paper); color:var(--w3-ink-soft); font-weight:600; font-size:.72rem; padding:.35rem .6rem; }

/* ---------- Partner badges (crisp wordmark cards — replaces low-res logo images) ---------- */
.partner-badge{ background:#fff; border:1px solid var(--w3-line); border-radius:12px; padding:1.9rem 1.25rem; text-align:center; height:100%; transition:.25s; }
.partner-badge:hover{ border-color:var(--w3-red); box-shadow:0 12px 26px rgba(18,24,31,.08); transform:translateY(-3px); }
.partner-badge .partner-icon{
  width:46px; height:46px; border-radius:50%; background:var(--w3-paper); color:var(--w3-red);
  display:flex; align-items:center; justify-content:center; margin:0 auto .85rem; font-size:1.15rem;
}
.partner-badge .partner-mark{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.05rem; color:var(--w3-ink); letter-spacing:-.01em; line-height:1.25; display:block; }
.partner-badge .partner-tag{ display:block; margin-top:.4rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--w3-muted); }

/* ---------- Job cards ---------- */
.job-card{ background:#fff; border:1px solid var(--w3-line); padding:1.4rem 1.5rem; display:flex; gap:1.1rem; align-items:flex-start; }
.job-card .job-logo{ width:54px;height:54px;flex:0 0 54px;background:var(--w3-paper);color:var(--w3-red);display:flex;align-items:center;justify-content:center;font-size:1.4rem; border:1px solid var(--w3-line); }
.job-tag{ background:var(--w3-paper); color:var(--w3-ink-soft); font-size:.72rem; font-weight:600; padding:.3rem .55rem; margin-right:.35rem; }
.job-tag.fresher{ background:#E9F6F3; color:var(--w3-teal); }
.job-tag.experienced{ background:#FDECEC; color:var(--w3-red); }
.job-tag.internship{ background:#FCF3E3; color:#a4720f; }
.filter-pill{ border:1px solid var(--w3-line); background:#fff; color:var(--w3-ink-soft); font-weight:600; font-size:.85rem; padding:.5rem 1.1rem; border-radius:30px; cursor:pointer; }
.filter-pill.active,.filter-pill:hover{ background:var(--w3-ink); color:#fff; border-color:var(--w3-ink); }

/* ---------- Timeline (process) ---------- */
.timeline{ position:relative; padding-left:2.2rem; border-left:2px dashed var(--w3-line); }
.timeline-item{ position:relative; padding-bottom:2.2rem; }
.timeline-item:last-child{ padding-bottom:0; }
.timeline-item::before{
  content:""; position:absolute; left:-2.55rem; top:.2rem; width:14px;height:14px;border-radius:50%;
  background:var(--w3-red); border:3px solid #fff; box-shadow:0 0 0 2px var(--w3-red);
}

/* ---------- Testimonials ---------- */
.testimonial-item{ background:#fff; border:1px solid var(--w3-line); border-radius:16px; text-align:left; padding:1.75rem 1.6rem; box-shadow:0 10px 26px rgba(18,24,31,.07); }
.testimonial-top{ position:relative; display:flex; align-items:center; gap:1rem; margin-bottom:1.15rem; }
.testimonial-avatar{ width:64px; height:64px; border-radius:50%; overflow:hidden; flex:0 0 64px; box-shadow:0 4px 10px rgba(18,24,31,.14); }
.testimonial-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.testimonial-rating{ position:absolute; top:-10px; left:42px; background:#fff; color:var(--w3-ink); font-size:.72rem; font-weight:700; padding:.28rem .55rem; border-radius:50rem; box-shadow:0 4px 10px rgba(18,24,31,.2); display:inline-flex; align-items:center; gap:.25rem; }
.testimonial-rating i{ color:var(--w3-gold); font-size:.7rem; }
.testimonial-id{ flex:1; min-width:0; }
.testimonial-id h6{ margin-bottom:.3rem; }
.testimonial-role-chip{ background:rgba(33,104,233,.08); color:#2168E9; font-size:.7rem; font-weight:700; padding:.32rem .65rem; border-radius:50rem; white-space:nowrap; }
.testimonial-quote{ color:var(--w3-muted); font-size:.92rem; line-height:1.6; margin-bottom:0; }

/* ---------- Gallery ---------- */
.gallery-tile{
  aspect-ratio:4/3; position:relative; overflow:hidden; color:#fff; display:flex; align-items:flex-end;
  padding:1rem; font-family:'Poppins',sans-serif; font-weight:600;
}
.gallery-tile span{ position:relative; z-index:2; }
.gallery-tile::before{ content:""; position:absolute; inset:0; opacity:.88; }
.gallery-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.65), transparent 55%); }
.gt-1::before{ background:linear-gradient(135deg,#C81E2C,#8E1420); }
.gt-2::before{ background:linear-gradient(135deg,#12181F,#2B3440); }
.gt-3::before{ background:linear-gradient(135deg,#E8A93B,#a4720f); }
.gt-4::before{ background:linear-gradient(135deg,#0E7C6B,#0a5a4d); }
.gt-5::before{ background:linear-gradient(135deg,#2B3440,#12181F); }
.gt-6::before{ background:linear-gradient(135deg,#8E1420,#C81E2C); }
.gt-7::before{ background:linear-gradient(135deg,#a4720f,#E8A93B); }

/* ---------- Faq ---------- */
.accordion-button{ font-family:'Poppins',sans-serif; font-weight:600; }
.accordion-button:not(.collapsed){ background:var(--w3-paper); color:var(--w3-red); box-shadow:none; }
.accordion-button:focus{ box-shadow:none; border-color:var(--w3-line); }

/* ---------- Page header (inner pages) ---------- */
.page-header{ background:var(--w3-ink); padding:3.5rem 0 3rem; position:relative; overflow:hidden; }
.page-header::after{ content:""; position:absolute; inset:0; background:radial-gradient(circle at 90% 10%, rgba(200,30,44,.35), transparent 45%); }
.page-header .container{ position:relative; z-index:2; }
.page-header h1{ color:#fff; margin:.35rem 0 0; line-height:1.25; }
.page-header .breadcrumb{ display:flex; flex-wrap:wrap; margin:0 0 .85rem; padding:0; list-style:none; font-size:.85rem; }
.page-header .breadcrumb-item{ display:inline-flex; align-items:center; }
.page-header .breadcrumb a{ color:rgba(255,255,255,.65); }
.page-header .breadcrumb .active{ color:var(--w3-gold); }
.page-header .breadcrumb-item+.breadcrumb-item{ margin-left:.5rem; padding-left:.5rem; }
.page-header .breadcrumb-item+.breadcrumb-item::before{ content:"/"; color:rgba(255,255,255,.4); padding-right:.5rem; float:left; }
.page-header .eyebrow{ display:block; margin-bottom:.6rem; }

/* ---------- Forms ---------- */
.form-control,.form-select{ border-radius:2px; border:1px solid var(--w3-line); padding:.65rem .9rem; }
.form-control:focus,.form-select:focus{ border-color:var(--w3-red); box-shadow:0 0 0 .2rem rgba(200,30,44,.12); }
.form-card{ background:#fff; border:1px solid var(--w3-line); padding:2rem; }

/* ---------- Resume builder ---------- */
.builder-shell{ background:#fff; border:1px solid var(--w3-line); }
.builder-shell .accordion-item{ border:none; border-bottom:1px solid var(--w3-line); }
.builder-shell .accordion-item:last-child{ border-bottom:none; }
.builder-shell .accordion-button{ font-family:'Poppins',sans-serif; font-weight:700; font-size:.95rem; color:var(--w3-ink); background:#fff; padding:1rem 1.35rem; }
.builder-shell .accordion-button:not(.collapsed){ background:var(--w3-paper); color:var(--w3-red); box-shadow:none; }
.builder-shell .accordion-button:focus{ box-shadow:none; border-color:var(--w3-line); }
.builder-shell .accordion-button::after{ flex-shrink:0; }
.builder-shell .accordion-body{ padding:1.35rem; background:#fdfdfc; }
.builder-shell .accordion-button .sec-badge{ font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--w3-teal); color:#fff; padding:.15rem .5rem; border-radius:50rem; margin-left:.6rem; }
.builder-shell .accordion-button .sec-optional{ background:var(--w3-muted); }
.form-section-hint{ font-size:.8rem; color:var(--w3-muted); margin-bottom:1rem; }

.repeater-item{ border:1px solid var(--w3-line); background:#fff; padding:1.1rem 1.1rem .6rem; margin-bottom:.9rem; position:relative; }
.repeater-item .repeater-remove{ position:absolute; top:.5rem; right:.5rem; width:28px; height:28px; border:none; background:var(--w3-paper); color:var(--w3-red); border-radius:50%; line-height:1; font-size:.85rem; }
.repeater-item .repeater-remove:hover{ background:var(--w3-red); color:#fff; }
.repeater-add{ border:1px dashed var(--w3-red); color:var(--w3-red); background:#fff; font-weight:600; font-size:.85rem; padding:.5rem 1rem; }
.repeater-add:hover{ background:var(--w3-paper); }

.skill-search{ margin-bottom:.75rem; }
.skill-pills{ display:flex; flex-wrap:wrap; gap:.5rem; max-height:220px; overflow-y:auto; padding:.25rem; }
.skill-pill{ display:none; }
.skill-pill input{ display:none; }
.skill-pill label{ display:inline-block; border:1px solid var(--w3-line); padding:.35rem .8rem; font-size:.82rem; cursor:pointer; color:var(--w3-ink-soft); margin:0; user-select:none; }
.skill-pill input:checked + label{ background:var(--w3-red); border-color:var(--w3-red); color:#fff; }
.skill-pill.match{ display:block; }

.chip-input-row{ display:flex; gap:.5rem; margin-bottom:.6rem; }
.chip-list{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ background:var(--w3-paper); border:1px solid var(--w3-line); padding:.3rem .5rem .3rem .8rem; font-size:.82rem; display:inline-flex; align-items:center; gap:.5rem; }
.chip button{ border:none; background:none; color:var(--w3-red); font-size:.8rem; line-height:1; padding:0; }

.domain-block{ border-left:3px solid var(--w3-red); padding:.9rem 1rem; background:var(--w3-paper); margin-bottom:1rem; }
.domain-block h6{ font-family:'Poppins',sans-serif; font-weight:700; font-size:.85rem; text-transform:uppercase; color:var(--w3-red); letter-spacing:.04em; }

.builder-actions{ position:sticky; bottom:0; background:#fff; border-top:1px solid var(--w3-line); padding:1rem 1.35rem; z-index:5; }

/* Live preview sheet */
.resume-sheet{ background:#fff; border:1px solid var(--w3-line); padding:2.2rem; min-height:600px; font-family: var(--rs-font, 'Inter', sans-serif); color:#222; }
.resume-sheet.is-empty{ display:flex; align-items:center; justify-content:center; color:var(--w3-muted); text-align:center; min-height:500px; }
.resume-sheet h3.rs-name{ color:var(--rs-accent, var(--w3-red)); border:none; padding:0; margin:0; font-size:1.6rem; }
.resume-sheet h6.rs-heading{ text-transform:uppercase; letter-spacing:.05em; font-size:.8rem; font-weight:700; color:var(--rs-accent, var(--w3-red)); border-bottom:1px solid var(--w3-line); padding-bottom:.3rem; margin:1.1rem 0 .5rem; }
.resume-sheet .rs-photo{ width:100px; height:100px; border-radius:8px; object-fit:cover; border:2px solid var(--rs-accent, var(--w3-red)); flex-shrink:0; }
.resume-sheet .rs-badge{ background:var(--w3-paper); color:var(--w3-ink-soft); font-size:.72rem; font-weight:600; padding:.3rem .6rem; display:inline-block; margin:0 .35rem .35rem 0; }
.resume-sheet .rs-item{ margin-bottom:.75rem; }
.resume-sheet .rs-item .rs-item-title{ font-weight:700; font-size:.95rem; }
.resume-sheet .rs-item .rs-item-meta{ font-size:.8rem; color:var(--w3-muted); }
.resume-sheet .rs-signature{ margin-top:1.5rem; text-align:right; font-style:italic; color:var(--w3-muted); }
.resume-sheet.rs-tpl-classic{ font-family: Georgia, 'Times New Roman', serif; }
.resume-sheet.rs-tpl-classic h3.rs-name{ text-align:center; }
.resume-sheet.rs-tpl-classic .rs-header{ text-align:center; border-bottom:2px solid var(--rs-accent,var(--w3-red)); padding-bottom:.75rem; }
.resume-sheet.rs-tpl-corporate .rs-header{ background:var(--w3-ink); color:#fff; margin:-2.2rem -2.2rem 1rem; padding:1.5rem 2.2rem; }
.resume-sheet.rs-tpl-corporate .rs-header .rs-item-meta{ color:rgba(255,255,255,.7); }
.resume-sheet.rs-tpl-corporate h3.rs-name{ color:#fff; }
.resume-sheet.rs-tpl-minimal h6.rs-heading{ border-bottom:none; color:var(--w3-ink); }
.resume-sheet.rs-tpl-ats{ font-family:Arial, sans-serif; }
.resume-sheet.rs-tpl-ats h6.rs-heading{ border-bottom:1px solid #999; color:#000; }
.resume-sheet.rs-tpl-ats h3.rs-name{ color:#000; }
.resume-sheet.rs-page-a4{ max-width:794px; margin:0 auto; }
.resume-sheet.rs-page-letter{ max-width:816px; margin:0 auto; }
.resume-sheet.rs-len-1{ font-size:.92rem; }
.resume-sheet.rs-len-2{ font-size:.97rem; }
.resume-sheet.rs-len-3{ font-size:1.02rem; }

@media print{
  /* Removes the browser's own printed header/footer (date/time, page
     title, URL) — that text is drawn in the page margin, so with no
     margin left to draw it in, most browsers simply omit it. The resume
     sheet keeps its visual margin via its own .5in padding below. */
  @page{ margin:0; }

  /* Hide site chrome entirely (display:none removes it from layout flow,
     so it can't leave blank space before the resume). */
  .navbar, .page-header, #spinner,
  .site-footer, .footer-bottom,
  .back-to-top, .whatsapp-float, .map-float,
  #cookieConsentBanner{ display:none !important; }

  /* Resume Builder: hide the form column and "Live Preview" label,
     leaving only the resume sheet itself. */
  #resumeBuilderPage .col-xl-7,
  #resumeBuilderPage .sticky-top > h5{ display:none !important; }

  /* .sticky-top uses position:sticky, which becomes the containing block
     for any absolutely-positioned descendant — that's what was pushing
     the resume down the page. Reset the whole wrapper chain to normal
     static block flow so the resume sheet starts at the true page top. */
  #resumeBuilderPage,
  #resumeBuilderPage .container-fluid,
  #resumeBuilderPage .row,
  #resumeBuilderPage .col-xl-5,
  #resumeBuilderPage .sticky-top{
      display:block !important;
      position:static !important;
      width:100% !important;
      max-width:100% !important;
      margin:0 !important;
      padding:0 !important;
      float:none !important;
  }

  html, body{ margin:0 !important; padding:0 !important; background:#fff !important; }

  #resumePreview{
      position:static !important;
      width:100% !important;
      border:none !important;
      box-shadow:none !important;
      margin:0 auto !important;
      padding:.5in !important;
  }
}

/* ---------- Footer ---------- */
.site-footer{ background:var(--w3-ink); color:rgba(255,255,255,.62); }
.site-footer h6{ color:#fff; font-size:.95rem; margin-bottom:1.1rem; }
.site-footer a{ color:rgba(255,255,255,.62); }
.site-footer a:hover{ color:var(--w3-gold); }
.footer-bottom{ background:#0B0F14; }
.social-square{ width:36px;height:36px;border:1px solid rgba(255,255,255,.15); display:inline-flex; align-items:center; justify-content:center; color:#fff; }
.social-square:hover{ background:var(--w3-red); border-color:var(--w3-red); }

/* ---------- Utility strips ---------- */
.cta-strip{ background:linear-gradient(120deg,var(--w3-red),var(--w3-red-dark)); color:#fff; }
.cta-strip h2{ color:#fff; }

/* ---------- Back to top / WhatsApp (stacked on the same side so neither
   button drifts over footer text or map controls in the opposite corner) ---------- */
.back-to-top{ position:fixed; display:none; right:24px; bottom:24px; z-index:120; padding:0 !important; align-items:center; justify-content:center; text-align:center; line-height:38px !important; }

.whatsapp-float{ position:fixed; right:24px; bottom:88px; z-index:120; width:52px;height:52px;border-radius:50%; background:#25D366; color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.4rem; box-shadow:0 8px 20px rgba(0,0,0,.25); }
.map-float{ position:fixed; right:24px; bottom:152px; z-index:120; width:52px;height:52px;border-radius:50%; background:#4285F4; color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.3rem; box-shadow:0 8px 20px rgba(0,0,0,.25); }
@media (max-width:575.98px){
  .back-to-top{ right:16px; bottom:16px; width:44px; height:44px; line-height:44px !important; }
  .whatsapp-float{ right:16px; bottom:70px; width:44px; height:44px; font-size:1.2rem; }
  .map-float{ right:16px; bottom:124px; width:44px; height:44px; font-size:1.1rem; }
}

/* Keep the last footer column clear of the floating action buttons */
.site-footer{ padding-bottom:.5rem; }
.site-footer .container.py-5{ padding-bottom:8.5rem !important; }

/* Map / card stack on Contact: stop the fixed buttons visually landing on
   the embedded map's own zoom controls by keeping a safe margin below it */
.contact-map-wrap{ margin-bottom:1.75rem; }
.contact-map-wrap iframe{ position:relative; z-index:1; }

/* ---------- Owl nav override ---------- */
/* Static, centered row beneath the carousel instead of absolute overlay —
   absolute positioning here had no reliable positioned ancestor to anchor
   to, which is why the arrows kept rendering in the wrong spot. */
.owl-carousel .owl-nav{ position:static; margin-top:1.75rem; display:flex; justify-content:center; align-items:center; gap:.75rem; }
.owl-carousel .owl-nav button.owl-prev,.owl-carousel .owl-nav button.owl-next{
  position:static; top:auto; left:auto; right:auto; transform:none;
  width:48px; height:48px; border-radius:50%; flex:0 0 auto;
  background:#2168E9 !important; border:none !important; color:#fff !important;
  display:inline-flex; align-items:center; justify-content:center; font-size:1rem; transition:.2s;
  box-shadow:0 8px 18px rgba(33,104,233,.28);
}
.owl-carousel .owl-nav button.owl-prev:hover,.owl-carousel .owl-nav button.owl-next:hover{
  background:#1652BE !important; color:#fff !important; transform:translateY(-1px);
}
.owl-carousel .owl-dots{ margin-top:.5rem; }
.owl-carousel .owl-dots .owl-dot.active span{ background:var(--w3-red) !important; }

/* wow init hide */
.wow{ visibility:hidden; }

/* ---------- Discuss Your Requirement CTA banner ---------- */
.discuss-cta{
  background: radial-gradient(140% 180% at 12% 8%, #8E1420 0%, #C81E2C 55%, #A81926 100%);
  border-radius: 14px;
  padding: 3.25rem 2.5rem;
  text-align: center;
}
.discuss-cta h2{
  color: var(--w3-ink);
  font-weight: 800;
  font-size: 1.9rem;
}
.discuss-cta p{
  color: rgba(255,255,255,.92);
  font-size: 1.05rem;
}
.discuss-cta .btn-gold{
  font-weight: 700;
  padding: .9rem 1.5rem;
  border-radius: 6px;
}
.discuss-cta .btn-gold:hover{
  background: #d99a2c;
  border-color: #d99a2c;
  color: var(--w3-ink);
}
@media (max-width: 575.98px){
  .discuss-cta{ padding: 2.25rem 1.5rem; }
  .discuss-cta h2{ font-size: 1.5rem; }
}

/* =========================================================
   Legal / Policy pages (Privacy, Terms & Conditions, Refund)
   ========================================================= */
.policy-toc{
  position: sticky;
  top: 100px;
  background: #fff;
  border: 1px solid var(--w3-line);
  padding: 1.25rem 1.4rem;
}
.policy-toc h6{ font-family:'Poppins',sans-serif; font-weight:700; margin-bottom:.9rem; }
.policy-toc a{
  display:block;
  color: var(--w3-ink-soft);
  font-size:.88rem;
  padding:.4rem 0;
  border-bottom:1px solid var(--w3-line);
  text-decoration:none;
}
.policy-toc a:last-child{ border-bottom:none; }
.policy-toc a:hover{ color: var(--w3-red); }

.policy-content{ background:#fff; border:1px solid var(--w3-line); padding:2.5rem; }
.policy-content h2{
  font-size:1.35rem;
  margin-top:2.25rem;
  margin-bottom:.9rem;
  padding-bottom:.6rem;
  border-bottom:2px solid var(--w3-line);
  scroll-margin-top:100px;
}
.policy-content h2:first-child{ margin-top:0; }
.policy-content h3{ font-size:1.05rem; margin-top:1.4rem; margin-bottom:.6rem; }
.policy-content p, .policy-content li{ color: var(--w3-ink-soft); font-size:.96rem; line-height:1.75; }
.policy-content ul, .policy-content ol{ padding-left:1.3rem; }
.policy-content li{ margin-bottom:.4rem; }
.policy-updated{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--w3-paper); border:1px solid var(--w3-line);
  padding:.5rem 1rem; font-size:.82rem; color: var(--w3-muted);
  margin-bottom: 2rem;
}
.policy-content table{ width:100%; border-collapse:collapse; margin:1rem 0 1.5rem; font-size:.9rem; }
.policy-content table th, .policy-content table td{ border:1px solid var(--w3-line); padding:.6rem .8rem; text-align:left; }
.policy-content table th{ background:var(--w3-paper); font-family:'Poppins',sans-serif; }
@media (max-width:991.98px){
  .policy-toc{ position:static; margin-bottom:2rem; }
  .policy-content{ padding:1.5rem; }
}

/* =========================================================
   Cookie Consent
   ========================================================= */
#cookieConsentBanner{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: var(--w3-ink);
  color: #E7E9ED;
  padding: 1.1rem 1.5rem;
  padding-bottom: calc(1.1rem + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 24px rgba(0,0,0,.18);
  transform: translateY(100%);
  transition: transform .35s ease;
  pointer-events: none;
}
#cookieConsentBanner.show{ transform: translateY(0); pointer-events: auto; }
#cookieConsentBanner .cookie-text{ font-size:.88rem; max-width:640px; }
#cookieConsentBanner .cookie-text a{ color: var(--w3-gold); text-decoration:underline; }
#cookieConsentBanner button{ position: relative; z-index: 1; }
#cookieConsentBanner .btn-cookie-reject{
  background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff;
}
#cookieConsentBanner .btn-cookie-reject:hover{ background:rgba(255,255,255,.1); color:#fff; }
#cookieConsentBanner .btn-cookie-customize{
  background:transparent; border:1px solid var(--w3-gold); color: var(--w3-gold);
}
#cookieConsentBanner .btn-cookie-customize:hover{ background:var(--w3-gold); color:var(--w3-ink); }

/* While the cookie banner is open, get the floating action buttons out of the
   way entirely so they can never sit on top of (or intercept taps meant for)
   the banner's buttons on small screens. */
#cookieConsentBanner.show ~ .back-to-top,
#cookieConsentBanner.show ~ .whatsapp-float,
#cookieConsentBanner.show ~ .map-float{
  display: none !important;
}

.cookie-pref-row{
  display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
  padding:1rem 0; border-bottom:1px solid var(--w3-line);
}
.cookie-pref-row:last-child{ border-bottom:none; }
.cookie-pref-row h6{ font-family:'Poppins',sans-serif; font-weight:700; margin-bottom:.3rem; }
.cookie-pref-row p{ font-size:.85rem; color:var(--w3-muted); margin:0; }
.form-switch .form-check-input{ width:2.6em; height:1.4em; cursor:pointer; }
.form-switch .form-check-input:checked{ background-color: var(--w3-red); border-color: var(--w3-red); }

/* ---- Test Series module (shared across test-series*.php) ---- */
.btn-ts-outline{ border:1px solid var(--w3-navy); color:var(--w3-navy); font-weight:600; }
.btn-ts-outline:hover{ background:var(--w3-navy); color:#fff; }
.btn-ts-solid{ background:var(--w3-red); border-color:var(--w3-red); color:#fff; font-weight:600; }
.btn-ts-solid:hover{ background:var(--w3-red-dark); border-color:var(--w3-red-dark); color:#fff; }