/* SASHA CHEEK - CYBERPUNK PORTFOLIO SKIN */
/* ==========================================================
   STARTER/LOADING PAGE
   ========================================================== */

/* Preloader Color */
#preloader {
  background-color: #000;
  /* background behind the loader */
}

.spinner {
  border: 4px solid rgba(255, 255, 255, 0.2);
  /* outer ring */
  border-top: 4px solid #39ff14;
  /* neon green spinner color */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

/* ==========================================================
  FONT - GLOBAL
   ========================================================== */

/* === SITENAME FONT === */
/* H1 Sitename Text */
h1.sitename {
  font-family: 'Orbitron', sans-serif;
  font-size: 64px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #00eaff;
  text-shadow:
    3px 3px 8px rgba(0, 0, 0, 0.85),
    0 0 3px #00eaff,
    0 0 8px #00eaff;
}

/* === SECTION TITLES FONT === */
/* H1 Section Titles & Headers */
.section-title h1,
.section-header h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 56px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #00eaff;
  position: relative;
  display: inline-block;
  padding: 1rem 2rem;
  margin: 2rem auto;
  text-align: center;

  /* === Dual-layer glow + crisp shadow === */
  text-shadow:
    /* inner dark outline for clarity */
    0 0 1px #ffffff,
    0 0 2px #000,
    /* outer glow layers */
    0 0 4px #39ff14,
    0 0 8px #39ff14,
    0 0 16px #39ff14,
    0 0 32px #39ff14;
  box-shadow:
    0 0 6px #39ff14,
    inset 0 0 8px rgba(57, 255, 20, 0.2);

  /* Subtle glass background */
  background: rgba(0, 10, 20, 0.35);
  border: 1px solid rgba(0, 255, 255, 0.25);
  border-radius: 10px;
  box-shadow:
    0 0 10px rgba(0, 255, 255, 0.2),
    inset 0 0 6px rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

/* === SECTION DIVIDER LINES FONT === */
.section-title h1::before,
.section-title h1::after,
.section-header h1::before,
.section-header h1::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 180px;
  height: 2px;
  background:
    /* glowing nodes */
    radial-gradient(circle at 20% 50%, #00eaff 0 4px, transparent 5px),
    radial-gradient(circle at 70% 50%, #00eaff 0 4px, transparent 5px),
    /* base line */
    linear-gradient(90deg,
      transparent,
      #00eaff 20%,
      #00eaff 80%,
      transparent);
  box-shadow:
    0 0 4px #00eaff,
    0 0 8px rgba(0, 234, 255, 0.5);
  opacity: 0.9;
}

/* Left divider */
.section-title h1::before,
.section-header h1::before {
  right: 100%;
  transform: translateY(-50%) skewX(-30deg);
}

/* Right divider */
.section-title h1::after,
.section-header h1::after {
  left: 100%;
  transform: translateY(-50%) skewX(30deg);
}

/* === GLOBAL PARAGRAPHS FONT === */
p {
  font-family: 'VT323', monospace;
  color: #9ee9ff;
  font-size: 1.05rem;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

/* === NAVIGATION MENU FONT === */

/* Desktop Nav */
@media (min-width: 1200px) {

  .navmenu a,
  .navmenu a:focus {
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #00eaff;
    /* refined cyan */
    background-color: transparent;
    transition: all 0.3s ease;
    text-shadow:
      0 0 2px rgba(0, 234, 255, 0.6),
      0 0 6px rgba(0, 234, 255, 0.4);
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: #39ff14;
    /* neon green accent */
    background: transparent;
    /* no highlight box */
    border: none;
    box-shadow: none;
    /* remove outer glow frame */
    text-shadow:
      0 0 4px #39ff14,
      0 0 10px rgba(57, 255, 20, 0.7),
      0 0 20px rgba(57, 255, 20, 0.4);
    /* smooth green glow */
    transition: color 0.25s ease, text-shadow 0.25s ease;
  }

}

/* Mobile Nav */
@media (max-width: 1199px) {
  .navmenu ul {
    background-color: rgba(10, 10, 30, 0.95);
    /* dark glass panel */
    backdrop-filter: blur(4px);
    /* subtle futuristic blur */
  }

  .navmenu a,
  .navmenu a:focus {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #00eaff;
    /* calm cyan */
    background-color: transparent;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-shadow:
      0 0 2px rgba(0, 234, 255, 0.6),
      0 0 6px rgba(0, 234, 255, 0.4);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: #39ff14;
    /* signal green */
    text-shadow:
      1px 1px 4px rgba(0, 0, 0, 0.8),
      0 0 5px #39ff14,
      0 0 10px #39ff14;
  }
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 1024px) {
  #testimonials .testimonial-item {
    max-width: 92%;
  }
}

#testimonials .framed-subtitle {
  font-size: 0.92rem;
  padding: 4px 8px;
  display: block;
  max-width: 92%;
  margin: 0 auto;
}

#testimonials .testimonial-item {
  margin: 16px auto;
  padding: 20px 14px;
}

#testimonials .testimonial-img {
  width: 70px;
  height: 70px;
  margin-bottom: 10px;
}

#testimonials .swiper {
  padding-bottom: 44px;
}

#testimonials .swiper-pagination {
  bottom: 8px;
  gap: 6px;
}

#testimonials .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
}

#testimonials .framed-subtitle {
  font-size: 0.88rem;
}

#testimonials .swiper {
  padding-bottom: 40px;
}

#testimonials .swiper-pagination {
  bottom: 6px;
}

/* =========================
   Responsive
   ========================= */

/* === HERO SECTION FONT === */

/* H1 Hero Font */
.hero h1,
#hero h1,
#hero .container h1 {
  font-family: 'Orbitron', sans-serif !important;
  font-weight: 600 !important;
  font-size: 3rem !important;
  /* roughly 48px */
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #00eaff !important;

  /* Crisp TRON-style glow */
  text-shadow:
    0 0 3px rgba(0, 234, 255, 0.9) !important,
    0 0 8px rgba(0, 234, 255, 0.6) !important,
    0 0 16px rgba(0, 234, 255, 0.4) !important;
}

/* H2 Hero Font */
/* Tagline */
#hero h2 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 1.5px;
  color: #6fd3ff;
  /* pale blue */
  text-transform: uppercase;
  text-shadow:
    0 0 2px rgba(111, 211, 255, 0.8),
    0 0 6px rgba(111, 211, 255, 0.6),
    0 0 12px rgba(111, 211, 255, 0.3);
  margin-bottom: 0.5rem;
}

/* Tagline container */
#hero .tagline {
  opacity: 0.9;
  margin-bottom: 1.5rem;
}

/* Other framed subtitles */
section:not(#about) h2.framed-subtitle {
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  font-weight: bold;

  /* color swap only */
  color: #7FE1FF;
  /* soft aqua */
  border: 2px solid #7FE1FF;

  /* framing/layout preserved */
  display: block;
  width: 400px;
  margin: 15px auto 20px auto;
  /* top + bottom spacing */
  text-align: center;
  padding: 6px 12px;
  border-radius: 3px;
  letter-spacing: 0.5px;
  position: relative;

  /* darker glass so it reads on dark/photo bgs */
  background: rgba(6, 18, 26, 0.35);

  /* glow tuned to aqua */
  text-shadow:
    0 0 1px #000,
    0 0 2px #000,
    0 0 4px rgba(127, 225, 255, 0.95),
    0 0 8px rgba(127, 225, 255, 0.70),
    0 0 16px rgba(127, 225, 255, 0.55),
    0 0 32px rgba(127, 225, 255, 0.40);
  box-shadow:
    0 0 6px rgba(127, 225, 255, 0.55),
    inset 0 0 8px rgba(127, 225, 255, 0.15);
}

/* If you use a framed subtitle inside Testimonials, match it */
#testimonials .framed-subtitle {
  color: #7FE1FF;
  border-color: #7FE1FF;
  background: rgba(6, 18, 26, 0.35);
  text-shadow:
    0 0 1px #000,
    0 0 2px #000,
    0 0 4px rgba(127, 225, 255, 0.95),
    0 0 8px rgba(127, 225, 255, 0.70),
    0 0 16px rgba(127, 225, 255, 0.55),
    0 0 32px rgba(127, 225, 255, 0.40);
  box-shadow:
    0 0 6px rgba(127, 225, 255, 0.55),
    0 0 12px rgba(127, 225, 255, 0.45);
}

/* H3 Hero Font */
#hero h3 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  letter-spacing: 1.2px;
  color: #6fd3ff;
  /* pale blue */
  text-transform: uppercase;
  text-shadow:
    0 0 2px rgba(111, 211, 255, 0.8),
    0 0 6px rgba(111, 211, 255, 0.6),
    0 0 12px rgba(111, 211, 255, 0.3);
  margin-bottom: 0.5rem;
}

/* Hero Font H1 - H3 Shadow */
#hero h1,
#hero h2,
#hero h3 {
  text-shadow:
    0 0 3px rgba(0, 234, 255, 0.9),
    0 0 6px rgba(0, 234, 255, 0.5),
    0 2px 10px rgba(0, 0, 0, 0.75);
  /* subtle dark grounding */
}

/* === ABOUT SECTION FONT === */

/* H2 About */
#about h2 {
  font-family: 'VT323', monospace;
  font-size: 1.8rem;
  /* same size */
  font-weight: bold;
  color: #7FE1FF;
  /* same neon green */
  display: inline-block;
  padding: 3px 8px;
  border: 2px solid #9ee9ff;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.5px;
  margin-bottom: 15px;
  position: relative;

  /* === Dual-layer glow + crisp shadow === */
  text-shadow:
    /* inner dark outline for clarity */
    0 0 1px #000,
    0 0 2px #000,
    /* outer glow layers */
    0 0 4px #7FE1FF,
    0 0 8px #7FE1FF,
    0 0 16px #7FE1FF,
    0 0 32px #7FE1FF;
  box-shadow:
    0 0 6px #7FE1FF,
    inset 0 0 8px rgba(57, 255, 20, 0.2);
}

/* Blinking cursor (kept subtle) */
#about h2::after {
  content: "_";
  color: #7FE1FF;
  margin-left: 6px;
  animation: blink 1.2s infinite;
}

/* Blinking cursor animation */
@keyframes blink {

  0%,
  50%,
  100% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

/* === SERVICES SECTION FONT === */

/* Section base */
.services {
  margin-top: 4rem;
  text-align: center;
}

/* Services Icon */
.service-card i {
  font-size: 2rem;
  color: #00eaff;
  text-shadow: 0 0 6px #00eaff, 0 0 12px rgba(0, 234, 255, 0.8);
  margin-bottom: 1rem;
}

/* Title */
.service-card h3 {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1.4rem;
  color: #00eaff;
  text-shadow:
    0 0 6px #00eaff,
    0 0 12px rgba(0, 234, 255, 0.8);
  margin-bottom: 1rem;
}

/* Description */
.service-card p {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #9ee9ff;
  text-shadow: 0 0 6px rgba(158, 233, 255, 0.8);
  margin: 0;
}

/* === RESUME SECTION FONT === */

/* Resume section h5 styling - Role/Tag labels */
#resume h5 {
  font-family: 'VT323', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  color: #00eaff;
  background-color: #12151f;
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 3px;
  margin: 0;
  box-shadow: 0 0 8px #00eaff,
    0 0 16px rgba(57, 255, 20, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Resume section h3 styling - Section titles */
#resume h3 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  color: #00eaff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  margin: 0 0 12px 0;
  border: 2px solid rgba(0, 246, 255, 0.4);
  border-radius: 4px;
  /*box-shadow:
    0 0 6px #00eaff,
    inset 0 0 12px rgba(144, 238, 144, 0.5); */
}

/* Resume section h4 styling - Job/Position titles */
.resume-item h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: #00eaff;
  /* neon green */
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow:
    0 0 8px #00eaff,
    0 0 16px rgba(57, 255, 20, 0.6);
  margin-bottom: 8px;
}

/* === TECH PORTFOLIO SECTION FONT === */
.portfolio-section {
  background: #000;
  padding: 4rem 2rem;
  color: #e5e5e5;
  font-family: 'VT323', monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}

/* Text Content */
.portfolio-content {
  padding: 1.5rem;
}

.portfolio-content h3 {
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  color: #00f6ff;
  margin-bottom: 0.5rem;
}

.portfolio-content p {
  font-size: 1.1rem;
  color: #bbb;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Tags */
.tags {
  padding: 0 1.5rem 1.5rem;
}

.tags span {
  background: rgba(0, 246, 255, 0.08);
  border: 1px solid rgba(0, 246, 255, 0.4);
  color: #00f6ff;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-right: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* === WRITING/BLOG SECTION FONT === */

/* Neon Writing Box and Text */
.neon-box {
  display: inline-block;
  padding: 10px 20px;
  background: rgba(0, 255, 0, 0.1);
  border: 1.5px solid #39ff14;
  border-radius: 6px;
  color: #7EEBFF;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  box-shadow: 0 0 10px #39ff14, inset 0 0 10px rgba(57, 255, 20, 0.3);
}

/* Article Title, Inline Block and Date Font */
.article-title {
  color: #9aff9a;
  font-family: 'VT323', monospace;
  font-size: 1.3rem;
  line-height: 1.4;
  margin-bottom: 10px;
}

.article-date {
  color: #00f7ff;
  font-size: 0.9rem;
  opacity: 0.8;
  margin-bottom: 12px;
  font-family: 'VT323', monospace;
}

.btn-neon {
  display: inline-block;
  padding: 8px 16px;
  font-size: 1rem;
  color: #12151f;
  background: #00f7ff;
  border: none;
  border-radius: 6px;
  font-family: 'VT323', monospace;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 0.3s ease;
  text-decoration: none;
}

/* === FOOTER SECTION FONT === */

/* Default Footer Text */
#footer,
#footer p,
#footer small {
  font-family: 'VT323', monospace;
  color: #9ee9ff;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  line-height: 1.5;
  opacity: 0.9;
}

/* Footer titles / name line */
#footer h3,
#footer h4 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #00eaff;
  text-shadow:
    0 0 3px rgba(0, 234, 255, 0.9),
    0 0 8px rgba(0, 234, 255, 0.6),
    0 0 16px rgba(0, 234, 255, 0.4);
  margin-bottom: 0.5rem;
}

/* Footer links (socials / credits) */
#footer a {
  color: #6fd3ff;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#footer a:hover {
  color: #39ff14;
  /* neon green hover */
  text-shadow:
    0 0 4px #39ff14,
    0 0 10px rgba(57, 255, 20, 0.7);
}

/* Copyright and credits alignment */
#footer .copyright,
#footer .credits {
  font-size: 0.9rem;
  margin-top: 15px;
  opacity: 0.85;
}

/* ==========================================================
   END OF GLOBAL TEXT
   ========================================================== */

/* ==========================================================
   GLOBAL RESPONSIVE - WEB BROWSER, MOBILE & TABLETS DISPLAY
   ========================================================== */

/* SECTION TITLES - H1 TEXT */
/* Medium screens (tablets and small laptops) */
@media (max-width: 992px) {

  .section-title h1,
  .section-header h1 {
    font-size: 2.2rem;
  }
}

/* Small screens (phones and small tablets) */
@media (max-width: 768px) {

  .section-title h1,
  .section-header h1 {
    font-size: 1.7rem;
  }
}

/* Extra small screens (very narrow phones) */
@media (max-width: 480px) {

  .section-title h1,
  .section-header h1 {
    font-size: 1.4rem;
  }
}

/* SUBTITLES - H2 TEXT */
/* H2 Text for Small Platforms */
.section-title h2 {
  font-size: 1rem;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  section:not(#about) h2.framed-subtitle {
    font-size: 1.4rem;
    /* slightly smaller text */
    padding: 4px 8px;
    /* tighter padding */
  }
}

/* ==========================================================
   END OF GLOBAL RESPONSIVE - WEB BROWSER, MOBILE & TABLETS DISPLAY
   ========================================================== */

/* === HERO SECTION STYLING === */
/* Ensure hero image acts as background */
#hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

/* Background image */
#hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

/* Purple overlay */
#hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(128, 0, 128, 0.55), rgba(64, 0, 128, 0.75));
  z-index: 2;
}

/* Content sits above overlay */
#hero .container {
  position: relative;
  z-index: 3;
}

/* Social links */
#hero .social-links a {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 247, 255, 0.2);
  color: #00f7ff;
  transition: all 0.3s ease;
}

#hero .social-links a:hover {
  background: #00f7ff;
  color: #12151f;
  box-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff;
}

/* === ABOUT SECTION STYLING === */
/* HOLOGRAM */
.holo-static {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 12px;
  background-color: #000;
  box-shadow: 0 0 25px #00eaff55, 0 0 45px #00eaff33;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Portrait image */
.holo-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: brightness(1.15) contrast(1.2) saturate(1.2);
  transition: filter 0.3s ease;
}

/* Static scanlines overlay */
.holo-static::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
      rgba(0, 255, 255, 0.25) 0px,
      rgba(0, 255, 255, 0.25) 2px,
      transparent 4px,
      transparent 8px);
  mix-blend-mode: screen;
  opacity: 0.25;
  pointer-events: none;
}

/* Subtle cyan overlay */
.holo-static::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 255, 255, 0.1),
      rgba(0, 255, 255, 0.05));
  mix-blend-mode: screen;
  opacity: 0.2;
  pointer-events: none;
}

/* Static grain texture */
.holo-static .grain {
  position: absolute;
  inset: 0;
  background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Static-noise-texture.png');
  background-size: cover;
  opacity: 0.05;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* === FAINT GREEN HOVER === */
.holo-static:hover {
  transform: scale(1.01);
  box-shadow:
    0 0 25px #39ff1444,
    /* faint neon green outer glow */
    0 0 45px #00eaff33;
  /* keep soft cyan base */
}

.holo-static:hover .holo-img {
  filter: brightness(1.25) contrast(1.25) saturate(1.3);
}

/* === HEADER LOGO SITENAME STYLING == */

/* Make the site name smaller and responsive */
.header .logo .sitename {
  margin: 0;
  line-height: 1.05;
  letter-spacing: .04em;
  /* scales between 14px and 22px based on viewport */
  font-size: clamp(14px, 1.2vw + 0.6rem, 22px);
  white-space: nowrap;
  /* keep it on one line */
}

/* === SERVICES SECTION STYLING === */

/* Background image and overlay for Services section */
#services {
  position: relative;
  background: url("assets/img/Nick_Fancher_Unplash_Cyberbunk2077.png") no-repeat center center;
  background-size: cover !important;
  color: #fff;
  padding: 80px 0;
  /* adjust as needed for spacing */
  text-align: center;
  z-index: 1;
  overflow: hidden;
}

#services::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 170, 255, 0.4) 0%,
      /* top: soft neon blue */
      rgba(0, 0, 0, 0.6) 100%
      /* bottom: fade to black */
    );
  z-index: 0;
}

/* Background image sits above overlay */
#services .container {
  position: relative;
  z-index: 1;
}

/* Grid layout */
.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.5rem;
  justify-items: center;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* Service cards */
.service-card {
  background: rgba(10, 10, 15, 0.9);
  border: 1px solid rgba(0, 246, 255, 0.6);
  border-radius: 14px;
  box-shadow:
    0 0 15px rgba(0, 246, 255, 0.3),
    0 0 25px rgba(0, 246, 255, 0.2);
  width: 100%;
  max-width: 450px;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: shimmerPulse 3.5s infinite ease-in-out;
  transition: all 0.35s ease;
}

/* Hover */
.service-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 0 30px #00ffcc,
    0 0 60px rgba(0, 255, 204, 0.6);
  border-color: #00ffcc;
}

/* Responsive stack */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: 1fr;
  }

  .service-card {
    max-width: 90%;
    margin: 0 auto;
  }
}

/* Shimmer animation */
@keyframes shimmerPulse {
  0% {
    box-shadow:
      0 0 10px rgba(0, 246, 255, 0.25),
      0 0 20px rgba(0, 246, 255, 0.15);
  }

  50% {
    box-shadow:
      0 0 25px rgba(0, 255, 204, 0.4),
      0 0 50px rgba(0, 255, 204, 0.25);
  }

  100% {
    box-shadow:
      0 0 10px rgba(0, 246, 255, 0.25),
      0 0 20px rgba(0, 246, 255, 0.15);
  }
}

/* === RESUME SECTION STYLING === */
#resume::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 170, 255, 0.4) 0%,
      /* top: soft neon blue */
      rgba(0, 0, 0, 0.6) 100%
      /* bottom: fade to black */
    );
  z-index: 0;
}

/* Background image sits above overlay */
#resume .container {
  position: relative;
  z-index: 1;
}

/* === BLOG SECTION STYLING === */

/* ===== BLOG SLIDER (scoped to #slider) ===== */

/* Section shell */
#slider.section-black {
  padding: 0;
  /* slider usually sits flush */
  background: #080c12;
  /* your dark base */
  position: relative;
}

/* Swiper container */
#slider .swiper {
  width: 100%;
}

/* Slides: full-bleed, responsive height, background covers */
#slider .swiper-slide {
  position: relative;
  min-height: 46vh;
  max-height: 70vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 247, 255, 0.25);
  box-shadow: 0 0 24px rgba(0, 247, 255, 0.18);
}

/* Dark legibility overlay */
#slider .swiper-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0, 0, 0, 0.15) 0%,
      rgba(0, 0, 0, 0.45) 55%,
      rgba(0, 0, 0, 0.75) 100%);
  pointer-events: none;
}

/* Slide content block */
#slider .swiper-slide .content {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  color: #e7faff;
  text-shadow: 0 0 18px rgba(0, 247, 255, 0.35), 0 0 2px #00f7ff;
  max-width: 900px;
}

/* Titles + links */
#slider .swiper-slide .content h2 {
  margin: 0 0 6px;
  font-family: 'VT323', monospace;
  color: #39ff14;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.15;
  font-size: clamp(20px, 2.4vw, 36px);
}

#slider .swiper-slide .content h2 a {
  color: #c7fdff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 247, 255, 0.35);
}

#slider .swiper-slide .content h2 a:hover {
  color: #ffffff;
  border-bottom-color: rgba(0, 247, 255, 0.6);
}

#slider .swiper-slide .content p {
  margin: 0;
  opacity: .9;
  font-size: clamp(14px, 1.3vw, 18px);
}

/* Arrows */
#slider .swiper-button-next,
#slider .swiper-button-prev {
  color: #9feaff;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(11, 15, 20, 0.72);
  border: 1px solid rgba(0, 247, 255, 0.35);
  box-shadow: 0 0 18px rgba(0, 247, 255, 0.22);
  backdrop-filter: blur(4px);
}

#slider .swiper-button-next:hover,
#slider .swiper-button-prev:hover {
  background: rgba(11, 15, 20, 0.9);
  box-shadow: 0 0 26px rgba(0, 247, 255, 0.36);
}

#slider .swiper-button-next:after,
#slider .swiper-button-prev:after {
  font-size: 18px;
  /* icon size */
}

/* Pagination bullets */
#slider .swiper-pagination {
  bottom: 10px !important;
}

#slider .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: #1f3640;
  opacity: 1;
  border: 1px solid rgba(0, 247, 255, 0.35);
  box-shadow: 0 0 10px rgba(0, 247, 255, 0.25);
}

#slider .swiper-pagination-bullet-active {
  background: #00f7ff;
  border-color: #00f7ff;
  box-shadow: 0 0 14px rgba(0, 247, 255, 0.6);
}

/* Container spacing so slides breathe */
#slider .container {
  padding: 20px 12px 28px;
}

/* Responsive tune-ups */
@media (max-width: 992px) {
  #slider .swiper-slide {
    min-height: 40vh;
  }

  #slider .swiper-button-next,
  #slider .swiper-button-prev {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 576px) {
  #slider .swiper-slide {
    min-height: 36vh;
  }

  #slider .swiper-slide .content {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
}

/* Accessibility: focus-visible for arrow buttons (keyboard users) */
#slider .swiper-button-next:focus-visible,
#slider .swiper-button-prev:focus-visible {
  outline: 2px solid #00f7ff;
  outline-offset: 2px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #slider .swiper {
    transition: none !important;
  }
}

/* === TECH PORTFOLIO SECTION STYLING === */

/* Card Base */
.portfolio-item {
  width: 90%;
  max-width: 900px;
  background: rgba(10, 10, 10, 0.95);
  border: 1px solid rgba(0, 246, 255, 0.4);
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0, 246, 255, 0.25);
  transition: all 0.35s ease;
  /* overflow: hidden; */
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hover effect - bright green glow */
.portfolio-item:hover {
  transform: translateY(-5px);
  border-color: #00ff9c;
  box-shadow: 0 0 40px #00ff9c, 0 0 20px rgba(0, 255, 156, 0.6);
}

/* Animated subtle glow pulse */
.portfolio-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  border: 1px solid rgba(0, 246, 255, 0.2);
  animation: bluePulse 2s infinite alternate;
}

@keyframes bluePulse {
  from {
    box-shadow: 0 0 10px rgba(0, 246, 255, 0.3);
  }

  to {
    box-shadow: 0 0 25px rgba(0, 246, 255, 0.6);
  }
}

/* IFrame Image (Interactive Data Visuals */
.portfolio-item iframe {
  width: 100%;
  height: 420px;
  border: none;
  display: block;
}

/* Force white background for Datawrapper embeds */
iframe[src*="datawrapper.dwcdn.net"] {
  background-color: #fff !important;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(0, 246, 255, 0.4);
}

.portfolio-item iframe {
  z-index: 1;
  position: relative;
}

/* Other Project Images */
.portfolio-item img {
  width: 100%;
  height: 420px;
  object-fit: cover;
}

/* === WRITING/BLOG SECTION STYLING === */

/* ARTICLE CARD STYLING */
.article-card {
  background: rgba(15, 20, 25, 0.6);
  border: 2px solid rgba(0, 247, 255, 0.3);
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 247, 255, 0.25);
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px #39ff14, 0 0 60px rgba(0, 247, 255, 0.6);
}

.article-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-bottom: 2px solid rgba(0, 247, 255, 0.4);
}

.article-content {
  padding: 20px;
}

.btn-neon:hover {
  background: #39ff14;
  color: #0e121b;
  box-shadow: 0 0 15px #39ff14, 0 0 30px rgba(57, 255, 20, 0.8);
}

/* === TESTIMONIALS SECTION STYLING === */
/* === TESTIMONIALS SECTION STYLING === */
:root{
  --t-cyan:#00f7ff;
  --t-green:#39ff14;
  --t-body:#9ee9ff;
  --t-card:rgba(10,14,20,.85);
  --t-border:rgba(0,247,255,.35);
}

#testimonials{ position:relative; }

/* Card */
#testimonials .t-card{
  background:var(--t-card);
  border:2px solid var(--t-border);
  border-radius:14px;
  box-shadow:0 0 24px rgba(0,247,255,.22);
  padding:22px 18px;
  max-width:860px;
  margin:0 auto;
  text-align:center;
  position:relative;
}

/* Avatar */
#testimonials .t-avatar{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  display:block; margin:0 auto 12px;
  box-shadow:0 0 8px rgba(0,247,255,.6);
  border:1px solid rgba(0,247,255,.45);
}

/* Name & role */
#testimonials .t-name{
  font-family:'VT323',monospace;
  font-size:1.25rem; line-height:1.1;
  color:var(--c-title,#9aff9a);
  margin:0 0 4px;
  text-shadow:0 0 6px rgba(154,255,154,.65);
}
#testimonials .t-role{
  font-family:'VT323',monospace;
  font-size:1rem; color:#7FE1FF; opacity:.95;
  margin:0 0 10px;
}

/* New divider (node line) */
#testimonials .t-divider{ position:relative; width:min(72%,520px); height:12px; margin:10px auto 14px; }
#testimonials .t-divider.t-node{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--t-cyan),transparent);
  box-shadow:0 0 10px rgba(0,247,255,.45);
}
#testimonials .t-divider.t-node::before,
#testimonials .t-divider.t-node::after{
  content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:10px; height:10px; border-radius:50%;
  background:var(--t-green);
  box-shadow:0 0 8px rgba(57,255,20,.9), 0 0 18px rgba(57,255,20,.45);
}
#testimonials .t-divider.t-node::before{ left:-6px; }
#testimonials .t-divider.t-node::after { right:-6px; }

/* Quote text */
#testimonials .t-quote{
  font-family:'VT323',monospace;
  color:var(--t-body);
  font-size:1.05rem; line-height:1.55; letter-spacing:.3px;
  margin:0;
  text-shadow:0 0 6px rgba(158,233,255,.35);
}
#testimonials .qmark{
  color:var(--t-green); font-size:1.2rem;
  text-shadow:0 0 8px rgba(57,255,20,.6);
}
#testimonials .qmark.left{ margin-right:.25rem; }
#testimonials .qmark.right{ margin-left:.25rem; }

/* Swiper containment + centering (single source of truth) */
#testimonials .swiper{ padding:8px 0 52px; overflow:hidden; }
#testimonials .swiper-slide{ display:flex; justify-content:center; }

@media (min-width:992px){
  #testimonials .swiper{ overflow:visible; }
}

/* Scoped pagination */
#testimonials .testimonials-pagination{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  display:flex; gap:8px; width:auto; z-index:10;
}
#testimonials .testimonials-pagination .swiper-pagination-bullet{
  width:9px; height:9px; background:#1f3640; opacity:1; border-radius:50%;
  border:1px solid var(--t-border);
  box-shadow:0 0 10px rgba(0,247,255,.25);
  transition:transform .18s ease, background .18s ease, border-color .18s ease;
}
#testimonials .testimonials-pagination .swiper-pagination-bullet-active{
  background:var(--t-cyan); border-color:var(--t-cyan);
  box-shadow:0 0 14px rgba(0,247,255,.6);
  transform:scale(1.2);
}

/* Arrows */
#testimonials .testimonials-prev,
#testimonials .testimonials-next{
  color:#9feaff; width:40px; height:40px; border-radius:999px;
  background:rgba(11,15,20,.72);
  border:1px solid var(--t-border);
  box-shadow:0 0 18px rgba(0,247,255,.22);
}
#testimonials .testimonials-prev:hover,
#testimonials .testimonials-next:hover{
  background:rgba(11,15,20,.9);
  box-shadow:0 0 26px rgba(0,247,255,.36);
}

/* Responsive tweaks */
@media (max-width:576px){
  #testimonials .t-card{ padding:18px 14px; }
  #testimonials .t-quote{ font-size:1rem; }
}

/* === CONTACT SECTION STYLING === */
#contact form {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px;
  background: rgba(10, 10, 20, 0.6);
  border: 2px solid rgba(0, 247, 255, 0.3);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 247, 255, 0.25), inset 0 0 8px rgba(0, 247, 255, 0.1);
  backdrop-filter: blur(3px);
}

#contact input,
#contact textarea {
  width: 100%;
  background: rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(0, 247, 255, 0.25);
  border-radius: 8px;
  color: #9aff9a;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  padding: 12px 15px;
  margin-bottom: 15px;
  outline: none;
  transition: all 0.3s ease;
}

#contact input::placeholder,
#contact textarea::placeholder {
  color: rgba(154, 255, 154, 0.4);
}

#contact input:focus,
#contact textarea:focus {
  border-color: #00f7ff;
  box-shadow: 0 0 10px #00f7ff, 0 0 25px rgba(0, 247, 255, 0.5);
  background: rgba(0, 0, 0, 0.6);
}

/* SUBMIT BUTTON */
#contact button[type="submit"] {
  width: 100%;
  background: #00eaff;
  /* refined TRON cyan */
  color: #0e121b;
  /* dark text for contrast */
  border: none;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.05rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.35s ease;
  box-shadow:
    0 0 12px rgba(0, 234, 255, 0.7),
    0 0 24px rgba(0, 234, 255, 0.5),
    0 0 48px rgba(0, 234, 255, 0.3);
}

/* Hover + Active Pulse */
#contact button[type="submit"]:hover {
  background: #39ff14;
  /* neon green */
  color: #0e121b;
  box-shadow:
    0 0 16px #39ff14,
    0 0 32px rgba(57, 255, 20, 0.7),
    0 0 64px rgba(57, 255, 20, 0.4);
  transform: translateY(-2px);
}

#contact button[type="submit"]:active {
  transform: translateY(1px);
  box-shadow:
    0 0 10px #00eaff,
    0 0 20px rgba(0, 234, 255, 0.6);
}

/* Unified Message Area */
#contact .status-messages {
  margin-bottom: 15px;
}

/* Success message */
#contact .sent-message {
  display: none;
  color: #39ff14;
  background: rgba(0, 255, 50, 0.08);
  padding: 10px 15px;
  border-radius: 6px;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  text-align: center;
  box-shadow: 0 0 6px rgba(57, 255, 20, 0.4);
  animation: fadeInSuccess 0.4s ease-in-out;
}

/* Error message */
#contact .error-message {
  display: none;
  color: #ff66c4;
  background: rgba(255, 0, 144, 0.1);
  padding: 10px 15px;
  border-radius: 6px;
  font-family: 'VT323', monospace;
  font-size: 1.2rem;
  text-align: center;
  box-shadow: 0 0 6px rgba(255, 102, 196, 0.3);
  animation: fadeInError 0.4s ease-in-out;
}

/* Fade-in animations */
@keyframes fadeInSuccess {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInError {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Message Status */
#contact .status-messages {
  transition: all 0.3s ease;
  min-height: 40px;
  /* keeps layout steady even when hidden */
}

/* === Autofill Fix (Chrome, Edge, Safari) === */
#contact input:-webkit-autofill,
#contact textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.45) inset !important;
  -webkit-text-fill-color: #9aff9a !important;
  caret-color: #9aff9a !important;
  transition: background-color 5000s ease-in-out 0s;
}

#contact input:-webkit-autofill:focus,
#contact textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.6) inset !important;
  border-color: #00f7ff !important;
}

/* === FOOTER SECTION STYLING === */
/* Cyberpunk Footer Background Pic */
#footer {
  position: relative;
  background: url("../img/cyberpunk-footer.jpg") no-repeat center center;
  background-size: cover !important;
  /* fills the entire area */
  color: #fff;
  text-align: center;
  padding: 60px 0;
  z-index: 1;
  overflow: hidden;
}

/* Purple overlay */
#footer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(128, 0, 128, 0.55) 0%,
      /* top: purple */
      rgba(0, 0, 0, 0.65) 100%
      /* bottom: fade to black */
    );
  z-index: 0;
}

/* Footer Social Links */
#footer .social-links a {
  font-size: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 247, 255, 0.2);
  color: #00f7ff;
  transition: all 0.3s ease;
}

#footer .social-links a:hover {
  background: #00f7ff;
  color: #12151f;
  box-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff;
}

/* Keep footer content above overlay */
#footer .container,
#footer h3,
#footer p,
#footer .social-links,
#footer .copyright,
#footer .credits {
  position: relative;
  z-index: 1;
}

/* === SCROLL-TO-TOP BUTTON STYLING === */
/* Scroll-to-top button styled like social icons */
#scroll-top {
  font-size: 22px;
  /* slightly larger arrow */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 247, 255, 0.2);
  /* faint cyan background */
  color: #00f7ff;
  /* neon cyan */
  transition: all 0.3s ease;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
}

#scroll-top:hover {
  background: #00f7ff;
  color: #12151f;
  box-shadow: 0 0 10px #00f7ff, 0 0 20px #00f7ff;
}

/* =========================
   SINGLE ARTICLE PAGE (scoped)
   ========================= */

/* Scope to article pages only */
.page-post #main {
  background: transparent;
  padding-top: 150px;
}

/* Kill any white/boxed containers around the header/title area */
.page-post .blog>.container,
.page-post .blog .section-title.container,
.page-post .article-title.container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Solid dark band behind the section header */
.page-post #blog.section-black {
  background: #12151f !important;
  /* site black */
  padding-top: 56px;
  /* clear the fixed navbar */
  padding-bottom: 24px;
}

/* Remove template dividers/stripes */
.page-post #blog.section-black::before,
.page-post #blog.section-black::after,
.page-post #blog .section-title::before,
.page-post #blog .section-title::after {
  content: none !important;
  display: none !important;
}

/* Ensure the inner title container is truly transparent */
.page-post #blog .container.section-title {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

/* Keep your Orbitron neon for the big blue header title */
.page-post #blog .section-title h1,
.page-post #blog .section-title h1 i {
  /* uses your existing global styles; no change needed */
}

/* Optional: your framed subtitle style still applies; nothing to change here */

/* Dark article “card” */
.page-post article {
  background: rgba(11, 15, 20, 0.96);
  border: 1px solid rgba(0, 247, 255, 0.25);
  border-radius: 16px;
  padding: 24px 24px 32px;
  box-shadow: 0 0 24px rgba(0, 247, 255, 0.18);
  margin-top: 12px;
  /* a touch of breathing room */
}

/* Date line: subtle on dark */
.page-post .article-title p.text-muted {
  color: #9fc9d6 !important;
}

/* Images inside post content */
.page-post .content img {
  border-radius: 10px;
  max-width: 100%;
  height: auto;
}

/* Responsive top padding */
@media (max-width: 991px) {
  .page-post #main {
    padding-top: 120px;
  }
}

/* === Article Content Font === */

/* h3 inside the article body */
article .content h3,
.article-content h3 {
  color: #00f6ff;
  text-shadow:
    0 0 3px rgba(0, 246, 255, 0.6),
    0 0 8px rgba(0, 246, 255, 0.35);
}

/* tag pills under articles */
article .tags span,
.article-content .tags span {
  color: #00f6ff;
  background: rgba(0, 246, 255, 0.08);
  border: 1px solid rgba(0, 246, 255, 0.4);
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* =========================================================
   UNIFORM BLOG + TECH PORTFOLIO TYPOGRAPHY & BUTTONS
   (Put this at the very end of custom.css so it wins)
   ========================================================= */

:root {
  /* fonts */
  --font-heading: 'Orbitron', sans-serif;
  --font-body: 'VT323', monospace;

  /* colors */
  --c-bg: #12151f;
  --c-title: #9aff9a;
  /* light neon green (titles) */
  --c-body: #9ee9ff;
  /* body copy cyan */
  --c-muted: #7FE1FF;
  /* meta lines like “Published on…” */
  --c-border: rgba(0, 247, 255, 0.35);
  --c-card: rgba(15, 20, 25, 0.60);

  /* button */
  --btn-bg: #00f7ff;
  /* cyan */
  --btn-text: #0e121b;
  /* dark text for contrast */
  --btn-hover-bg: #39ff14;
  /* neon green hover */
  --btn-hover-text: #0e121b;
  --btn-shadow: 0 0 12px rgba(0, 234, 255, 0.7), 0 0 24px rgba(0, 234, 255, 0.5);
  --btn-shadow-hover: 0 0 16px #39ff14, 0 0 32px rgba(57, 255, 20, .7);
}

/* ---------- Cards (both blog + portfolio) ---------- */

/* same frame + glow on both card types */
.article-card,
.portfolio-item {
  background: var(--c-card) !important;
  border: 2px solid var(--c-border) !important;
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0, 247, 255, 0.25) !important;
  color: var(--c-body) !important;
  font-family: var(--font-body) !important;
}

/* images */
.article-card .article-img,
.portfolio-item img,
.portfolio-item iframe {
  border-bottom: 2px solid var(--c-border);
}

/* hover effect */
.article-card:hover,
.portfolio-item:hover {
  transform: translateY(-6px);
  border-color: #00ff9c !important;
  box-shadow: 0 0 40px #00ff9c, 0 0 60px rgba(0, 247, 255, 0.6) !important;
}

/* ---------- Titles (blog + portfolio) ---------- */

.article-title,
.article-title a,
.portfolio-content h3,
.portfolio-content h3 a {
  font-family: var(--font-body) !important;
  font-size: 1.35rem !important;
  line-height: 1.35 !important;
  color: var(--c-title) !important;
  text-decoration: none !important;
}

.article-title a:hover,
.portfolio-content h3 a:hover {
  color: #caffca !important;
  /* lighter green on hover */
  text-shadow: 0 0 6px rgba(154, 255, 154, .7);
}

/* Article page: H2 + Figure/figcaption styling*/

/* fallbacks in case tokens aren't defined above */
:root {
  --c-body: #9ee9ff;   /* paragraph/body color */
  --c-title: #9aff9a;  /* green used for article titles */
}

.page-post article {
  /* just keeping spacing consistent */
  --h2-size: clamp(1.35rem, 2.2vw, 1.85rem);
}

/* H2 in article content — match your green title vibe */
.page-post article .content h2 {
  font-family: var(--font-body, 'VT323', monospace) !important;
  color: var(--c-title) !important;
  font-size: var(--h2-size) !important;
  line-height: 1.28 !important;
  margin: 1.35rem 0 .55rem !important;
  text-shadow: 0 0 6px rgba(154, 255, 154, .7) !important;
  letter-spacing: .3px;
  text-align: center;
}

/* Optional: thin cyan underline for visual rhythm */
.page-post article .content h2 + * {
  border-top: 0;
}
.page-post article .content h2.use-underline {
  padding-bottom: .25rem;
  border-bottom: 1px solid rgba(0, 247, 255, .28);
}

/* Figure block + image */
.page-post article figure {
  margin: 1.25rem 0;
}
.page-post article figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(0, 247, 255, .22);
  box-shadow: 0 0 18px rgba(0, 247, 255, .18);
}

/* Figcaption — match paragraph color */
.page-post article figure figcaption {
  font-family: var(--font-body, 'VT323', monospace);
  color: var(--c-body);
  font-size: 1rem;
  line-height: 1.45;
  opacity: .95;
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(0, 247, 255, .25);
  text-align: center; /* change to center if preferred */
  text-shadow: 0 0 6px rgba(158, 233, 255, .35);
}

/* Smaller/muted variant if you add class="small" */
.page-post article figure figcaption.small {
  font-size: .92rem;
  opacity: .85;
}

/* meta/date lines */
.article-date,
.article-content .meta,
.portfolio-content .meta {
  color: var(--c-muted) !important;
  opacity: .95 !important;
  font-size: .95rem !important;
  margin-bottom: .65rem !important;
  font-family: var(--font-body) !important;
}

/* body text inside both */
.article-content p,
.portfolio-content p,
.article-card p,
.portfolio-item p {
  color: var(--c-body) !important;
  font-family: var(--font-body) !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
}

/* tags on both */
.article-content .tags span,
.tags span {
  background: rgba(0, 246, 255, 0.08) !important;
  border: 1px solid rgba(0, 246, 255, 0.4) !important;
  color: #00f6ff !important;
  padding: .3rem .7rem !important;
  border-radius: 6px !important;
  font-size: .9rem !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
}

/* ---------- Buttons (one style everywhere) ---------- */

/* normalize any button used inside these cards */
.article-card .btn,
.portfolio-item .btn,
.btn-neon {
  display: inline-block;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  border: 0 !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  color: var(--btn-text) !important;
  background: var(--btn-bg) !important;
  box-shadow: var(--btn-shadow) !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, color .25s ease !important;
}

.article-card .btn:hover,
.portfolio-item .btn:hover,
.btn-neon:hover {
  background: var(--btn-hover-bg) !important;
  color: var(--btn-hover-text) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-2px) !important;
}

/* make stretched-link titles not change color on hover except the title itself */
.article-card .stretched-link:after {
  pointer-events: none;
}

/* Make the article page H1 match the green article title style */
.page-post .article-title h1 {
  font-family: var(--font-body, 'VT323', monospace) !important;
  color: var(--c-title, #9aff9a) !important;
  line-height: 1.25 !important;
  font-size: clamp(1.8rem, 2.6vw, 2.2rem) !important;
  /* adjust if you want bigger */
  margin: 0 0 .35rem 0 !important;
  text-shadow: 0 0 6px rgba(154, 255, 154, .7) !important;
}

/* Optional: match any H1 that appears inside the article body too */
.page-post article .content h1 {
  font-family: var(--font-body, 'VT323', monospace) !important;
  color: var(--c-title, #9aff9a) !important;
  text-shadow: 0 0 6px rgba(154, 255, 154, .7) !important;
}

/* ===========================================
   Single post buttons (Bootstrap outlines)
   =========================================== */
.page-post .btn {
  --btn-font: 'VT323', monospace;
  --c-cyan: #00f7ff;
  --c-green: #39ff14;
  --c-dark: #0e121b;

  font-family: var(--btn-font) !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-weight: 700 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  border-width: 2px !important;
  transition: transform .18s ease, color .25s ease, background .25s ease, box-shadow .25s ease, border-color .25s ease !important;
}

/* -------- Primary (cyan) -------- */
.page-post .btn-outline-primary {
  color: var(--c-cyan) !important;
  border-color: color-mix(in srgb, var(--c-cyan) 85%, #ffffff 15%) !important;
  background: transparent !important;
  box-shadow: 0 0 10px rgba(0, 247, 255, .25) !important;
}
.page-post .btn-outline-primary:hover,
.page-post .btn-outline-primary:active {
  color: var(--c-dark) !important;
  background: var(--c-cyan) !important;
  border-color: var(--c-cyan) !important;
  box-shadow: 0 0 14px rgba(0, 247, 255, .65), 0 0 28px rgba(0, 247, 255, .35) !important;
  transform: translateY(-2px);
}
.page-post .btn-outline-primary:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 2px;
}
.page-post .btn-outline-primary.disabled,
.page-post .btn-outline-primary:disabled {
  color: rgba(0, 247, 255, .45) !important;
  border-color: rgba(0, 247, 255, .35) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* -------- Secondary (neon green) -------- */
.page-post .btn-outline-secondary {
  color: var(--c-green) !important;
  border-color: color-mix(in srgb, var(--c-green) 85%, #ffffff 15%) !important;
  background: transparent !important;
  box-shadow: 0 0 10px rgba(57, 255, 20, .25) !important;
}
.page-post .btn-outline-secondary:hover,
.page-post .btn-outline-secondary:active {
  color: var(--c-dark) !important;
  background: var(--c-green) !important;
  border-color: var(--c-green) !important;
  box-shadow: 0 0 16px rgba(57, 255, 20, .75), 0 0 32px rgba(57, 255, 20, .45) !important;
  transform: translateY(-2px);
}
.page-post .btn-outline-secondary:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 2px;
}
.page-post .btn-outline-secondary.disabled,
.page-post .btn-outline-secondary:disabled {
  color: rgba(57, 255, 20, .45) !important;
  border-color: rgba(57, 255, 20, .35) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* optional: keep equal spacing when used as a 3-button nav */
.page-post .post-nav .btn { min-width: 9.25rem; text-align: center; }

/* CODE BLOCK DESIGNS */
/* Inline code */
.page-post code,
#blog code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, 'VT323', monospace;
font-size: 0.95rem;
color: #7FE1FF;
background: rgba(6, 18, 26, 0.55);
border: 1px solid rgba(0, 247, 255, 0.35);
border-radius: 6px;
padding: .1rem .35rem;
}

/* Code block */
.page-post pre,
#blog pre {
background: rgba(10, 14, 20, 0.9);
border: 1.5px solid rgba(0, 247, 255, 0.35);
box-shadow: 0 0 18px rgba(0, 247, 255, 0.22);
border-radius: 12px;
padding: 14px 16px;
overflow: auto;
margin: 1rem 0 1.25rem;
}

/* Make the text inside the block clean and non-wrapping by default */
.page-post pre code,
#blog pre code {
display: block;
white-space: pre;        /* use pre-wrap if you prefer wrapping */
color: #9ee9ff;
text-shadow: 0 0 6px rgba(158, 233, 255, .35);
}