/* =====================================================================
   WHITEHAT INNOVATORS — style.css
   Structural clone of reference.html (pentestingexams.com)
   Theme: Deep Blue + Neon Orange
===================================================================== */

/* ─── Custom Properties ──────────────────────────────────────────── */
:root {
  --orange:        #ff6b1a;
  --orange-lt:     #ff8c4a;
  --orange-dk:     #e55a0d;
  --navy-dark:     #060f1e;
  --navy:          #0a192f;
  --navy-light:    #112240;
  --neon:          #00e676;
  --neon-dim:      #00c853;
  --shadow-org:    0 0 28px rgba(255,107,26,.35), 0 4px 16px rgba(255,107,26,.2);
}

/* ─── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { background: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; color: #1a2a4a; }
::selection { background: rgba(255,107,26,.25); color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--navy-dark); }
::-webkit-scrollbar-thumb { background: var(--orange); border-radius: 3px; }

/* ─── Bootstrap Overrides ────────────────────────────────────────── */
.bg-aliceblue { background: #f8fafc !important; }
.bg-dark      { background: var(--navy-dark) !important; }
.bg-purple    { background: linear-gradient(180deg,#1a0533 0%,#0a192f 100%) !important; }
.bg-regalblue { background: var(--navy) !important; }

/* ─── Typography ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: 'Space Grotesk', sans-serif; }
.sec-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 700; }
.orbitron  { font-family: 'Orbitron', sans-serif; }

/* ─────────────────────────────────────────────────────────────────
   TOP BAR
───────────────────────────────────────────────────────────────── */
.top-bar.bg-dark { background: linear-gradient(90deg,#1a0533,#0a192f,#1a0533) !important; border-bottom: 1px solid rgba(255,107,26,.3); }

/* ─────────────────────────────────────────────────────────────────
   NAVBAR
───────────────────────────────────────────────────────────────── */
#navbar.navbar { padding-top: .75rem; padding-bottom: .75rem; }
#navbar .nav-link { color: #1a2a4a; font-weight: 500; font-size: .9rem; transition: color .15s ease; }
#navbar .nav-link:hover, #navbar .nav-link.active { color: var(--orange) !important; }
#navbar .dropdown-item { font-size: .875rem; padding: .5rem .75rem; transition: background .15s ease; }
#navbar .dropdown-item:hover { background: rgba(255,107,26,.07); color: var(--orange); }
.new-badge.blink .nav-link { animation: subtle-blink 2.5s ease-in-out infinite; }
@keyframes subtle-blink {
  0%,100% { opacity:1; } 50% { opacity:.65; }
}
.navbar-nav-scroll { max-height: none !important; }
.navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,107,26,.25); }

/* ─────────────────────────────────────────────────────────────────
   HERO
───────────────────────────────────────────────────────────────── */
#hero { min-height: 90vh; display: flex; align-items: center; }
.hero-title { text-shadow: 0 2px 20px rgba(0,0,0,.4); }

/* HEX GRID */
.hex-cell {
  width: 68px; height: 76px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: #ffffff;
  display: flex; align-items: center; justify-content: center;
  cursor: default; flex-shrink: 0;
  transition: transform .25s ease, filter .25s ease;
  font-size: 1.4rem;
  color: #0a192f;
}
.hex-cell:hover {
  transform: scale(1.12) translateY(-3px);
  filter: drop-shadow(0 6px 14px rgba(255,107,26,.55));
  z-index: 2;
}
.hex-orange { background: linear-gradient(135deg,var(--orange),var(--orange-dk)) !important; }
.hex-grid-wrapper { perspective: 1000px; }
.hex-grid-wrapper .d-flex.gap-2 { gap: 10px !important; }

/* ─────────────────────────────────────────────────────────────────
   COMPARISON (compSwiper)
───────────────────────────────────────────────────────────────── */
.comparison .swiper-button-next,
.comparison .swiper-button-prev { color: white; }
.comparison .swiper-button-next::after,
.comparison .swiper-button-prev::after { font-size: 1.1rem; }
.comparison .swiper-pagination-bullet { background: rgba(255,255,255,.4); opacity: 1; }
.comparison .swiper-pagination-bullet-active { background: var(--orange); }

.glass-card {
  background: rgba(17,34,64,.9) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  backdrop-filter: blur(12px);
  transition: transform .3s ease, border-color .3s ease;
}
.glass-card:hover { transform: translateY(-5px); border-color: rgba(255,107,26,.35) !important; }
.card-grid { display: flex; flex-direction: column; }
.vs-col { display: flex; justify-content: center; }

/* ─────────────────────────────────────────────────────────────────
   CATEGORY CARDS
───────────────────────────────────────────────────────────────── */
.category .card {
  border: 1.5px solid transparent !important;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.category .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(255,107,26,.12), 0 4px 16px rgba(10,25,47,.1) !important;
  border-color: rgba(255,107,26,.4) !important;
}
.cat-all-exams, .cat-essentials, .cat-professional, .cat-expert {
  transition: transform .3s ease;
}
.category .card:hover .cat-all-exams,
.category .card:hover .cat-essentials,
.category .card:hover .cat-professional,
.category .card:hover .cat-expert { transform: scale(1.08) rotate(-3deg); }

/* ─────────────────────────────────────────────────────────────────
   PEN EXAMS / SERVICES (pentSwiper)
───────────────────────────────────────────────────────────────── */
.pen-exams .card {
  border: 1.5px solid transparent !important;
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pen-exams .card:hover {
  border-color: rgba(255,107,26,.3) !important;
  box-shadow: 0 16px 48px rgba(255,107,26,.12), 0 4px 16px rgba(10,25,47,.08) !important;
  transform: translateY(-4px);
}
.exam-badge { font-size: .7rem !important; letter-spacing: .02em; }
.youtube-thumbnail-image { cursor: pointer; transition: opacity .2s ease; }
.youtube-thumbnail-image:hover { opacity: .85; }
.btn-modal { background: none; border: none; width: 100%; padding: 0; }

#pentPrev:hover, #pentNext:hover { background: rgba(255,107,26,.08); border-color: var(--orange) !important; }
#pentPrev:hover i, #pentNext:hover i { color: var(--orange) !important; }

/* ─────────────────────────────────────────────────────────────────
   MODAL
───────────────────────────────────────────────────────────────── */
.modal-content { border: 1px solid rgba(255,107,26,.3); border-radius: .75rem; overflow: hidden; }
.modal-header { border-bottom: 1px solid rgba(255,107,26,.3) !important; }

/* ─────────────────────────────────────────────────────────────────
   COUNTER SECTION
───────────────────────────────────────────────────────────────── */
.counter-up { background: var(--navy-dark) !important; }
.counter-up .display-2 { font-family: 'Orbitron', sans-serif; color: var(--orange); font-size: clamp(2.5rem,5vw,4rem); }
.counter-up .couter-title { letter-spacing: .1em; text-transform: uppercase; font-size: .875rem; }
.counter-up .card { background: transparent !important; }

/* ─────────────────────────────────────────────────────────────────
   TESTIMONIALS (testiSwiper)
───────────────────────────────────────────────────────────────── */
.testimonials .card { transition: transform .3s ease, box-shadow .3s ease; }
.testimonials .card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(10,25,47,.1) !important; }
.testimonials .swiper-pagination-bullet { background: #d1d5db; opacity: 1; }
.testimonials .swiper-pagination-bullet-active { background: var(--navy) !important; }
.testiSwiper .pb-8 { padding-bottom: 3rem !important; }
.author { flex-shrink: 0; }

/* ─────────────────────────────────────────────────────────────────
   ORGANIZATION / LOGO MARQUEE (orglogo-1, orglogo-2)
───────────────────────────────────────────────────────────────── */
.organization .has-mask {
  -webkit-mask-image: linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
  mask-image: linear-gradient(90deg,transparent,black 10%,black 90%,transparent);
}
.organization .swiper-wrapper { transition-timing-function: linear !important; }
.organization figure { transition: transform .2s ease; }
.organization figure:hover { transform: scale(1.05); }
.organization .company-logo { max-height: 40px; width: auto; object-fit: contain; }

/* ─────────────────────────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────────────────────────── */
footer.bg-regalblue { background: var(--navy) !important; }
.footer-title { font-family: 'Space Grotesk', sans-serif; }
.footer-top a { transition: color .2s ease; }
.footer-top a:hover { color: var(--orange) !important; opacity: 1 !important; }
.social-icon a:hover { color: var(--orange) !important; opacity: 1 !important; }
.menu-item a { text-decoration: none; transition: color .2s ease; }
.menu-item a:hover { color: var(--orange) !important; opacity: 1 !important; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }

/* ─────────────────────────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────────────────────────── */
.reveal-up   { opacity:0; transform:translateY(32px); transition:opacity .7s ease, transform .7s ease; }
.reveal-left { opacity:0; transform:translateX(-40px); transition:opacity .7s ease, transform .7s ease; }
.reveal-right{ opacity:0; transform:translateX(40px);  transition:opacity .7s ease, transform .7s ease; }
.revealed    { opacity:1 !important; transform:none !important; }

/* ─────────────────────────────────────────────────────────────────
   UTILITY
───────────────────────────────────────────────────────────────── */
.icon-link { display: inline-flex; align-items: center; }
.icon-link-hover:hover i { transform: translateX(3px); transition: transform .2s ease; }
.mt-xl-7 { margin-top: 3.5rem; }
.pt-xl-10, .pb-xl-10 { padding-top: 5rem; padding-bottom: 5rem; }
.px-xxl-5 { padding-left: 3rem; padding-right: 3rem; }

/* ─────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
  .hex-cell { width: 58px; height: 66px; font-size: 1.2rem; }
}
@media (max-width: 991.98px) {
  #hero { min-height: auto; padding-top: 4rem; padding-bottom: 4rem; }
  .counter-up .display-2 { font-size: 2.5rem; }
}
@media (max-width: 767.98px) {
  .pt-xl-10, .pb-xl-10 { padding-top: 3rem; padding-bottom: 3rem; }
  .px-xxl-5 { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 575.98px) {
  .hex-cell { width: 48px; height: 56px; font-size: 1rem; }
  .counter-up .display-2 { font-size: 2rem; }
}