/* =====================================================================
   KRN Informatix — Modern visual refresh
   Loaded last, after the legacy Bootstrap 2 / template stylesheets.
   Restyles existing markup only — no structural, content, or nav changes.
   Brand colors kept: accent coral #e96b56, dark footer #222, green CTA.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root {
  --k-accent: #e96b56;
  --k-accent-dark: #d6543e;
  --k-ink: #23262b;
  --k-ink-dim: #5a5f68;
  --k-line: #e7e5e2;
  --k-surface: #ffffff;
  --k-surface-alt: #faf8f6;
  --k-dark: #1c1e22;
  --k-dark-2: #14161a;
  --k-green: #2f9e44;
  --k-green-dark: #268038;
  --k-radius: 12px;
  --k-radius-lg: 18px;
  --k-shadow: 0 10px 30px -12px rgba(30, 20, 15, 0.18);
  --k-shadow-sm: 0 4px 14px -6px rgba(30, 20, 15, 0.15);
}

/* ---------- base ----------
   allPageStyle.css sets `* { font-family: "Poppins" }` site-wide but never
   actually loaded Poppins (the @import was commented out), so it silently
   fell back to sans-serif — every layout on the site (flex grids, tight
   card rows) was measured and tuned against that fallback's metrics.
   Loading real Poppins above makes that dead rule bite for the first time
   and reflows those layouts. Pin body copy back to the original fallback
   stack (same specificity, later in the cascade so it wins) and keep
   Poppins scoped to headings only, below, where nothing depends on exact
   text width. */
* { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }

#wrapper, #content, footer, header { color: var(--k-ink); }

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

#content, footer, header .top p, ul.topmenu li a { line-height: 1.7; }

h1, h2, h3, h4, h5, h6,
.box .text h2, #body h2, .upcomimg-batch h3, .modal-title,
.widgetheading, .logo h1 {
  font-family: "Poppins", -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em !important;
  text-align: left;
  color: var(--k-ink);
}

#content h2 { font-size: 1.9rem; margin-bottom: 0.6em; }
#content p { color: var(--k-ink-dim); }

a { transition: color .18s ease; }

/* ---------- header / top bar ---------- */
header {
  box-shadow: none;
  border-bottom: 1px solid var(--k-line);
  position: sticky;
  top: 0;
  z-index: 3000;
  background: #fff;
}

header .top {
  background: var(--k-dark);
  padding: 9px 0;
  margin: 0;
}

header .top p.topcontact,
header .top p.topcontact i,
ul.topmenu li a {
  color: #cfd2d8;
  font-size: 12.5px;
  letter-spacing: .01em;
}

header .top p.topcontact a { color: #fff; font-weight: 500; }
header .top p.topcontact a:hover { color: var(--k-accent); }

header .top marquee {
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  background: rgba(233, 107, 86, 0.16);
  border: 1px solid rgba(233, 107, 86, 0.35);
  border-radius: 999px;
  padding: 4px 16px;
  display: inline-block;
}

ul.social-network li a i {
  transition: transform .18s ease, color .18s ease;
}
ul.social-network li a:hover i {
  color: var(--k-accent) !important;
  transform: translateY(-2px);
}

header .logo img { max-height: 54px; width: auto; margin: 14px 0; }

header ul.nav li a {
  font-family: "Poppins", -apple-system, sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--k-ink);
  padding: 12px 11px !important;
  border-radius: 8px;
}

header ul.nav li a i { color: var(--k-ink-dim); }

header ul.nav > li:hover > a,
header ul.nav > li > a:focus {
  color: var(--k-accent);
  background: rgba(233, 107, 86, 0.08) !important;
}
header ul.nav > li:hover > a i,
header ul.nav li a:hover i { color: var(--k-accent) !important; }

.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
  color: var(--k-accent);
  background: rgba(233, 107, 86, 0.1) !important;
}

/* dropdown menus (still shown/hidden by the existing jQuery hover code).
   The template's flyout is intentionally dark (#343434, see overwrite.css)
   with light text — keep that theme, just refine shape/spacing/hover. */
header ul.nav li ul.dropdown-menu,
.dropdown-menu {
  border: 1px solid #3d3d3d;
  border-radius: var(--k-radius);
  box-shadow: var(--k-shadow);
  padding: 8px;
  margin-top: 12px !important;
}

.dropdown-menu li a,
header ul.nav li ul.dropdown-menu li a {
  border-radius: 8px;
  padding: 9px 12px !important;
  font-size: 13px;
  font-weight: 500;
  border-bottom: none !important;
  color: #dcdcdc;
}

header ul.nav .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a {
  background: var(--k-accent) !important;
  color: #fff !important;
}

.dropdown-menu .divider { background: #3d3d3d; }

/* ---------- hero / camera slider ---------- */
.camera_wrap { background: var(--k-surface-alt); }

.camera_caption h1, .camera_caption h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  line-height: 1.15;
}
.camera_caption h1 span.colored, .camera_caption h2 span.colored { color: var(--k-accent); }
.camera_caption p { color: var(--k-ink-dim); font-size: 15.5px; line-height: 1.7; }

.camera_caption a.btn.btn-success {
  border-radius: 999px;
  padding: 12px 26px;
  font-weight: 600;
  letter-spacing: .01em;
}

/* ---------- content cards (Automation / Selenium / Manual Testing) ---------- */
#content .box {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  padding: 28px 26px;
  box-shadow: var(--k-shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
  box-sizing: border-box;
}
#content .box:hover {
  transform: translateY(-4px);
  box-shadow: var(--k-shadow);
}
#content .box .text h2 { font-size: 1.25rem; margin: 0; }
#content .box .text i.ico {
  background: rgba(233, 107, 86, 0.12) !important;
  color: var(--k-accent) !important;
}
#content .box .text p { margin: 14px 0 16px; font-size: 14.5px; }
#content .box .text a {
  color: var(--k-accent-dark);
  font-weight: 700;
  font-size: 13.5px;
}
#content .box .text a:hover { color: var(--k-accent); }

/* ---------- enquiry form + upcoming batch ---------- */
.formdesign {
  background: linear-gradient(155deg, var(--k-accent) 0%, var(--k-accent-dark) 100%) !important;
  box-shadow: var(--k-shadow) !important;
  padding: 22px 22px 18px !important;
}
.formdesign .modal-title { color: #fff !important; font-size: 1.2rem; margin-bottom: 14px; }

.formdesign input.input-block-level {
  border: none;
  border-radius: 9px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.94);
}

.formdesign #submitbtn {
  background: var(--k-dark) !important;
  border: none !important;
  border-radius: 9px;
  padding: 12px 0;
  font-weight: 600;
  letter-spacing: .02em;
  box-shadow: none;
}
.formdesign #submitbtn:hover { background: var(--k-dark-2) !important; }

.upcomimg-batch {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: 16px 18px;
  box-shadow: var(--k-shadow-sm);
}
.upcomimg-batch h3 { font-size: 1rem; color: var(--k-accent-dark); margin: 0 0 6px; }
.upcomimg-batch p { font-size: 13.5px; color: var(--k-ink-dim); margin: 2px 0; }

/* ---------- why-KRN cards ---------- */
aside.why-KRN > div {
  box-sizing: border-box;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  box-shadow: none;
}
aside.why-KRN > div:hover {
  background: var(--k-accent) !important;
  border-color: var(--k-accent);
}
aside.why-KRN > div span { color: var(--k-accent); font-weight: 700; }
aside.why-KRN > div:hover span { color: #fff; }

/* ---------- buttons (generic) ---------- */
.btn, a.btn {
  border-radius: 9px;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: none !important;
  text-shadow: none !important;
  background-image: none !important;
  border: none;
}
.btn-success, a.btn.btn-success {
  background: var(--k-green) !important;
}
.btn-success:hover, a.btn.btn-success:hover {
  background: var(--k-green-dark) !important;
}
.btn-primary, a.btn.btn-primary {
  background: var(--k-ink) !important;
}
.btn-primary:hover, a.btn.btn-primary:hover {
  background: var(--k-dark-2) !important;
}
.syllabusbtn { border-radius: 9px; font-weight: 600; }

/* ---------- testimonials ---------- */
.testimonial-container {
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-sm);
}
.testimonial p { color: var(--k-ink-dim); line-height: 1.7; }
.testimonial h5 { font-family: "Poppins", sans-serif; }
.nav-button {
  background: var(--k-ink) !important;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-button:hover { background: var(--k-accent) !important; }

/* ---------- footer ---------- */
footer {
  background: var(--k-dark) !important;
  padding-top: 56px;
}
footer .widgetheading {
  color: #fff !important;
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
footer ul.link-list li a {
  color: #b7bac0;
  font-size: 13.5px;
  line-height: 2;
}
footer ul.link-list li a:hover { color: var(--k-accent); }
footer address { color: #b7bac0; font-size: 13.5px; line-height: 1.8; }
footer p, footer p a { color: #b7bac0; font-size: 13.5px; }
footer p a:hover { color: var(--k-accent); }

#sub-footer {
  background: var(--k-dark-2) !important;
  box-shadow: none !important;
}
#sub-footer span, .copyright p span { color: #83868d; font-size: 12.5px; }

/* ---------- popups (enquiry / mock test) ---------- */
#popup, #mockTest {
  background: linear-gradient(155deg, var(--k-accent) 0%, var(--k-accent-dark) 100%) !important;
  border-radius: var(--k-radius-lg) !important;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.45);
}
#popup input, #mockTest input {
  border: none;
  border-radius: 9px;
  padding: 12px 14px;
  margin: 6px 0;
  background: rgba(255, 255, 255, 0.94);
}

/* ---------- misc ---------- */
a.scrollup {
  background: var(--k-ink);
  border-radius: 50%;
  box-shadow: var(--k-shadow-sm);
}

a.social-icon.telephone img { filter: drop-shadow(0 6px 16px rgba(0,0,0,.25)); }

::selection { background: var(--k-accent); color: #fff; }