/* ===============================
   ROOT VARIABLES (DARK MODE)
   =============================== */
:root {
  --bg-base: #020617;
  /*blue black*/

  --glow-blue: rgba(59, 130, 246, 0.25);
  --glow-cyan: rgba(34, 211, 238, 0.18);

  --text-main: #e5e7eb;
  --text-muted: #9ca3af;

  --cyan: #22d3ee;
  --cyan-soft: #64ffda;
  --cyan-hero: #2dd4bf;
  --blue: #60a5fa;
  --blue-soft: #0077ff;

  --yellow: #facc15;
  --orange: #fb923c;

  --border-soft: rgba(148, 163, 184, 0.2);



  --accent-teal: #2dd4bf;
  --accent-cyan: #22d3ee;
  --accent-blue: #38bdf8;
  --accent-purple: #a855f7;


  /*  can also  used as linear gradient */
  --colour1: #0bb079 0%;
  --colourtypw: #2490be 35%;
  --colr: #0077ff 55%;

  --gradient-primary: linear-gradient(135deg,
      #64ffda 0%,
      #00b8ff 50%,
      #0077ff 100%);
  /* Chatbot Gradient Removed from Root as per request */

  --gradient-title: linear-gradient(90deg,
      #64ffda 0%,
      #0077ff 100%);

  /* Old portfolio variables for compatibility */
  --primary-blue: #020617;
  --secondary-blue: rgba(6, 10, 20, 0.9);
  --text-primary: var(--text-main);
  --text-secondary: var(--text-muted);
  --fifthaccent: #64ffda;
}

/* Gradient name  ramsundar */

.gradient-text1 {
  background: linear-gradient(135deg, #14B8A6, #3B82F6, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dark : Teal → Blue → Gold*/


.gradient-text {
  background: linear-gradient(90deg,
      var(--cyan-soft),
      #38bdf8 35%,
      var(--blue) 55%,
      #93c5fd 70%,
      #d1bfa3 88%,
      #e6d3a3 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-highlight {
  color: #ffffff;
  font-weight: 600;
}

body.light .text-highlight {
  color: #000000;
}



/*RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*BODY / BACKGROUND */

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text-main);

  background:
    radial-gradient(900px 450px at 50% 15%,
      rgba(34, 211, 238, 0.08),
      transparent 65%),
    linear-gradient(180deg,
      #05070d 0%,
      #05070d 100%);

  min-height: 100vh;
  transition: background 0.4s ease, color 0.3s ease;
}

/* 

LIGHT MODE (DIMMED / COMFORT) 

*/
body.light {
  /* Base background */
  --bg-base: #f1f5f9;
  /* dim slate white */

  /* Reduced glow (important) */
  --glow-blue: rgba(0, 119, 255, 0.12);
  --glow-cyan: rgba(0, 184, 255, 0.10);

  /* Softer text (no harsh black) */
  --text-main: #1e293b;
  /* slate-800 */
  --text-muted: #64748b;
  /* slate-500 */

  --border-soft: rgba(2, 6, 23, 0.12);

  /* Old portfolio variables for light mode */
  --primary-blue: #ffffff;
  --secondary-blue: #f5f5f5;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --fifthaccent: #0077ff;

  /* Light mode gradient */
  --gradient-primary: linear-gradient(135deg,
      #0077ff 0%,
      #00b8ff 50%,
      #64ffda 100%);

  --gradient-title: linear-gradient(90deg,
      #0077ff 0%,
      #64ffda 100%);
}

/* Background layers */
body.light {
  background:
    radial-gradient(900px 450px at 50% 12%,
      rgba(45, 212, 191, 0.04),
      transparent 65%),
    linear-gradient(180deg,
      #e9eef3 0%,
      /* key change: NOT white */
      #f1f5f9 100%);

  transition: background 0.4s ease, color 0.3s ease;
}

/* Cards */
body.light .skills-card {
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 8px 30px rgba(15, 23, 42, 0.08);
}




/* ===============================
   NAVBAR (old portfolio style)
   =============================== */
.navbar {
  background: #020617;
  backdrop-filter: blur(10px);
  padding: 1rem 0;
}

.navbar-brand {
  font-weight: 600;
  text-decoration: none;
  color: var(--text-primary);
}

.navbar-nav .nav-link {
  color: var(--text-primary) !important;
  font-weight: 500;
  padding: 0.5rem 1rem;
  transition: color 0.3s ease;
}

.nav-link:hover {
  color: var(--accent-blue) !important;
}

.nav-link.active {
  position: relative;
  color: var(--accent-blue) !important;
}

.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-blue) 0%, #000000 100%);
  border-radius: 2px;
}

.navbar-toggler {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-toggler:focus {
  box-shadow: none;
}

.navbar-toggler-icon {
  filter: brightness(0) invert(1);
}

body.light .navbar {
  background: rgba(255, 255, 255, 0.95);
}

body.light .navbar-brand,
body.light .navbar-nav .nav-link {
  color: var(--text-main) !important;
}

body.light .navbar-toggler-icon {
  filter: none;
}

/* ===============================
   MOBILE / TABLET – NAVBAR DROPDOWN
   =============================== */
@media (max-width: 991px) {
  .navbar-collapse {
    background: rgba(5, 7, 13, 0.96);
    padding: 18px 20px;
    border-radius: 14px;
    margin-top: 12px;
  }

  .nav-link {
    padding: 12px 0;
    border-bottom: none;
  }

  body.light .navbar-collapse {
    background: rgba(255, 255, 255, 0.98);
  }
}


/* ===============================
   SCROLL INDICATOR ( STYLE)
   =============================== */
.scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 0;
  right: 0;
  margin: auto;
  width: fit-content;
  text-align: center;
  z-index: 2;
  opacity: 0.85;

  /* floating motion */
  animation: mouse-float 2.2s ease-in-out infinite;
}



.scroll-text {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  margin-bottom: 8px;
  color: var(--text-muted);
}

/* Mouse outline */
.mouse {
  width: 26px;
  height: 42px;
  border: 2px solid var(--fifthaccent);
  border-radius: 14px;
  position: relative;
  margin: 0 auto;
}

/* Wheel */
.wheel {
  width: 4px;
  height: 8px;
  background: var(--fifthaccent);
  border-radius: 4px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scroll-wheel 1.6s infinite;
}

/* Wheel animation */
@keyframes scroll-wheel {
  0% {
    opacity: 0;
    transform: translate(-50%, 0);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, 14px);
  }
}

/* Mouse floating */
@keyframes mouse-float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}


/* ===============================
   HERO
   =============================== */
.hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
}


#particles-js {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 1;
}


.hero-content {
  max-width: 900px;
  text-align: center;
}

.hello {
  color: var(--cyan);
  font-weight: 500;
  margin-bottom: 30px;
}

.hero-title {
  font-size: 4.2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 24px;
}



.hero-role {
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--cyan-soft);
  margin-bottom: 22px;
}

.hero-skill {
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--cyan-hero);
  margin-bottom: 40px;
}

.hero-desc {
  color: var(--text-muted);
  margin-bottom: 70px;
}

/* ===============================
   BUTTONS
   =============================== */
.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

.btn-hero {
  padding: 11px 26px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  color: #020617;
  background: var(--gradient-primary);
  box-shadow: 0 0 28px rgba(34, 211, 238, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hover */
.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(34, 211, 238, 0.65);
}

@media (max-width: 480px) {
  .btn-hero {
    padding: 8px 16px;
    font-size: 0.85rem;
    width: 100%;
    /* Optional: make them full width or just smaller */
  }

  .hero-buttons {
    gap: 10px;
    /* Reduce gap */
    flex-direction: column;
    /* Stack them on very small screens if desired, or keep row */
    padding: 0 20px;
  }
}


.btn-glow {
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 500;
  text-decoration: none;
  color: #020617;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.btn-glow:hover {
  transform: translateY(-2px);
}



/*section*/
/* ===============================
   SECTION (GLOBAL)
   =============================== */
section {
  position: relative;
  padding: 120px 0;
  scroll-margin-top: 80px;
  /* navbar offset */
}

/* ===============================
   ABOUT SECTION
   =============================== */
.about-section {
  position: relative;
  padding: 140px 0;
}

/* ===============================
   SECTION HEADER (CENTERED)
   =============================== */
.section-header {
  max-width: 720px;
  margin: 0 auto 80px auto;
  text-align: center;
}

/* Title */
.section-title {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-main);
  margin-bottom: 16px;
}

.section-title.gradient-full {
  background: var(--gradient-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* SAME gradient as hero name */
.section-title .gradient-text {
  background: var(--gradient-title);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Cyan soft underline */
.section-title::after {
  content: "";
  display: block;
  width: 72px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg,
      transparent,
      var(--cyan-soft),
      transparent);
  opacity: 0.85;
}

/* ===============================
   ABOUT GRID
   =============================== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: flex-start;
}

/* LEFT CONTENT */
.about-left {
  color: var(--text-main);
}

.about-emoji p {
  margin-bottom: 8px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.about-emoji strong {
  color: var(--cyan-hero);
}

.about-text {
  margin-top: 16px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ===============================
   EDUCATION LADDER (SCROLL-SYNCED)
   =============================== */
.education-ladder-reference {
  position: relative;
  padding: 0;
  /* Remove top padding to align with left side text */
}

.edu-header {
  margin-bottom: 40px;
  text-align: center;
}

.edu-header i {
  font-size: 1.6rem;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-right: 12px;
  filter: drop-shadow(0 0 10px rgba(34, 211, 238, 0.3));
}

.edu-header h3 {
  font-size: 1.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* Align left to match intro text */
  margin: 0;
}

.ladder-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 30px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .ladder-layout {
    grid-template-columns: 50px 1fr;
    /* Fixed width for ladder, rest for cards */
    gap: 15px;
  }

  .ladder-side {
    display: flex;
    /* Show ladder */
    height: 280px;
    /* Slightly shorter on mobile */
  }

  /* Adjust ladder rail width/position for mobile if needed */
  .ladder-rail-container {
    width: 40px;
  }

  .scroll-climber {
    width: 35px;
    height: 35px;
  }

  .climber-speech {
    display: none;
    /* Hide speech bubble on mobile to save space */
  }

  .edu-card-ref {
    padding: 16px;
    /* Reduce padding */
    gap: 12px;
  }

  .edu-info h4 {
    font-size: 1rem;
    /* Smaller title */
  }
}

/* LADDER SIDE */
.ladder-side {
  position: sticky;
  top: 200px;
  height: 320px;
  display: flex;
  justify-content: center;
}

.ladder-rail-container {
  --rail-width: 4px;
  position: relative;
  width: 60px;
  height: 100%;
}

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--rail-width);
  background: rgba(45, 212, 191, 0.2);
  border-radius: 2px;
}

.rail.left {
  left: 0;
  right: auto;
}

.rail.right {
  right: 0;
  left: auto;
}

.rungs-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--rail-width);
  right: var(--rail-width);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 0;
}

.rung {
  height: 2px;
  width: 100%;
  background: rgba(45, 212, 191, 0.2);
  border-radius: 0;
  /* Remove radius for clean butt-joint with rails */
}

/* CLIMBER */
.scroll-climber {
  position: absolute;
  left: 50%;
  top: 90%;
  /* Initial pos */
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  color: var(--cyan);
  z-index: 5;
  transition: transform 0.1s ease-out;
}

.climber-svg {
  filter: drop-shadow(0 0 8px rgba(45, 212, 191, 0.6));
}

/* SPEECH BUBBLE */
.climber-speech {
  position: absolute;
  bottom: 100%;
  right: 100%;
  margin-bottom: 10px;
  margin-right: -10px;
  opacity: 0;
  transform: scale(0.8);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.speech-box {
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(45, 212, 191, 0.4);
  padding: 8px 12px;
  border-radius: 10px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.speech-box p {
  margin: 0;
  font-size: 0.8rem;
  color: #fff;
}

.speech-arrow {
  position: absolute;
  bottom: -10px;
  right: 15px;
  color: rgba(15, 23, 42, 0.95);
  font-size: 1.2rem;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

/* EDUCATION COLUMN */
.education-steps-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.edu-card-ref {
  display: flex;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.edu-card-ref:hover {
  border-color: rgba(45, 212, 191, 0.3);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-5px);
}

.edu-dot {
  width: 12px;
  height: 12px;
  background: rgba(45, 212, 191, 0.3);
  border-radius: 50%;
  margin-top: 6px;
  box-shadow: 0 0 10px rgba(45, 212, 191, 0.2);
}

.edu-info h4 {
  font-size: 1.25rem;
  margin-bottom: 4px;
  color: var(--text-main);
}

.edu-year {
  font-size: 0.85rem;
  color: var(--cyan);
  margin-bottom: 8px;
  font-weight: 600;
}

.edu-school {
  font-size: 1rem;
  color: #e2e8f0;
  margin-bottom: 4px;
}

.edu-board {
  font-size: 0.9rem;
  color: #94a3b8;
}

.accent-weight {
  color: var(--cyan);
  font-weight: 700;
}

/* Light mode education cards */
body.light .edu-card-ref {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(15, 23, 42, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

body.light .edu-card-ref:hover {
  border-color: rgba(0, 119, 255, 0.3);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light .edu-dot {
  background: rgba(0, 119, 255, 0.3);
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.2);
}

body.light .edu-school {
  color: #475569;
}

body.light .edu-board {
  color: #64748b;
}

body.light .accent-weight {
  color: #0077ff;
}

/* Responsive adjustment */
@media (max-width: 992px) {
  .education-timeline {
    margin-top: 30px;
  }
}



/* ===============================
   SKILLS SECTION
   =============================== */



.skills-section {
  position: relative;
  padding: 120px 0 140px;
  /* old portfolio spacing */
}

/* 
   SECTION HEADER */

.skills-section .section-header {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}

.skills-section .section-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 18px;
}

.skills-section .section-title .gradient-text {
  display: inline-block;
}

/* underline */
.skills-section .section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin: 14px auto 0;
  background: linear-gradient(90deg,
      transparent,
      var(--cyan-soft),
      transparent);
  opacity: 0.8;
}

/* ===============================
   SKILLS CARD
   =============================== */

.skills-card {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;

  padding: 44px 48px;
  /* old portfolio padding */

  background: rgba(6, 10, 20, 0.9);
  border-radius: 20px;
  border: 1px solid var(--border-soft);

  box-shadow: 0 0 55px rgba(45, 212, 191, 0.35);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ===============================
   SKILL ITEM
   =============================== */
.skill-item {
  margin-bottom: 25px;
  /* space BEFORE next skill */
}


.skill {
  margin-bottom: 60px;
  /* old portfolio spacing */
}



/* label row */
.skill-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 6px;
  line-height: 1.2;
}

.skill-header span {
  color: var(--text-main);
  font-size: 1.05rem;
  font-weight: 500
}

.percent {
  color: var(--cyan-hero);
  font-weight: 600;
}

/* ===============================
   PROGRESS BAR
   =============================== */

.bar {

  margin-top: 0;
  /* old portfolio thickness */

  background: linear-gradient(90deg,
      rgba(15, 23, 42, 0.95),
      rgba(15, 23, 42, 0.6));

  border-radius: 999px;
  overflow: hidden;
  height: 7px;
  /* Default height for mobile */
}

.fill {
  height: 100%;
  width: 0;

  border-radius: 999px;
  background: var(--gradient-primary);

  box-shadow: 0 0 18px rgba(45, 212, 191, 0.35);
  transition: width 1.4s ease;
}

/* hover polish */
.skill:hover .fill {
  box-shadow:
    0 0 18px rgba(45, 212, 191, 0.45),
    0 0 36px rgba(34, 211, 238, 0.25);
}

/* ===============================
   LIGHT MODE
   =============================== */

body.light .skills-card {
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.1);
}

body.light .bar {
  background: linear-gradient(90deg,
      rgba(226, 232, 240, 0.9),
      rgba(226, 232, 240, 0.6));
}

body.light .skill-header span {
  color: var(--text-main);
}

/* ===============================
   RESPONSIVE
   =============================== */

@media (min-width: 768px) {
  .bar {
    height: 9px;
  }
}

@media (max-width: 576px) {
  .skills-card {
    padding: 34px 26px;
  }
}


/* ===============================
   SKILL TAGS 
   =============================== */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  /* correct spacing between cards */
  margin-top: 56px;
  /* space from section above */
}

/* Individual tag – OLD PORTFOLIO CARD */
.skill-tag {
  padding: 14px 24px;
  min-width: 120px;
  text-align: center;

  font-size: 0.95rem;
  font-weight: 500;

  /* ✅ OLD PORTFOLIO SHAPE */
  border-radius: 14px;
  /* ← FIX (was 999px) */

  background: rgba(34, 211, 238, 0.08);
  border: 1px solid var(--border-soft);
  color: #ffffff;

  cursor: pointer;
  user-select: none;

  /* ✅ FLOATING FEEL */
  transform: translateY(-6px);

  /* ✅ OLD PORTFOLIO SHADOW */
  box-shadow:
    0 12px 28px rgba(2, 6, 23, 0.55),
    0 0 14px rgba(34, 211, 238, 0.18);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease,
    color 0.3s ease;
}

/* Hover → lift + glow (old style) */
.skill-tag:hover {
  transform: translateY(-12px);
  background: rgba(34, 211, 238, 0.16);
  color: var(--cyan);

  box-shadow:
    0 22px 55px rgba(2, 6, 23, 0.7),
    0 0 32px rgba(34, 211, 238, 0.45);
}

/* Click → press */
.skill-tag:active {
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(34, 211, 238, 0.3);
}


body.light .skill-tag {
  background: rgba(45, 212, 191, 0.12);
  color: #000000;
  border-color: rgba(45, 212, 191, 0.35);

  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.18),
    0 0 14px rgba(56, 189, 248, 0.18);
}

body.light .skill-tag:hover {
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.28),
    0 0 30px rgba(56, 189, 248, 0.35);
}

/* ===============================
   RADAR CHART
   =============================== */

.radar-chart-container {
  margin-top: 70px;
  text-align: center;
}

.chart-title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--cyan);
  margin-bottom: 22px;
}

#skillRadarChart {
  max-width: 420px;
  margin: 0 auto;

  background: rgba(10, 25, 47, 0.85);
  border-radius: 18px;
  padding: 24px;

  border: 1px solid var(--border-soft);


  box-shadow:
    0 8px 24px rgba(2, 6, 23, 0.65),
    /* depth */
    0 0 28px rgba(0, 255, 218, 0.22);
  /* glow */
}

body.light #skillRadarChart {
  background: rgba(255, 255, 255, 0.92);

  box-shadow:
    0 10px 26px rgba(15, 23, 42, 0.18),
    0 0 26px rgba(56, 189, 248, 0.25);
}


/* ===============================
   SKILLS & TOOLS
   =============================== */

.skills-section1 {
  padding: 0;
}

/* TOOL ITEM */
.tool-item {
  text-align: center;
  margin-bottom: 0;
}

/* CARD — OLD PORTFOLIO SIZE */
.tool-card {
  width: 78px;
  height: 78px;

  background: linear-gradient(180deg,
      rgba(15, 23, 42, 0.75),
      rgba(6, 10, 20, 0.95));

  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.18);

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 auto;

  /* floating feel */
  transform: translateY(-10px);

  box-shadow:
    0 18px 40px rgba(2, 6, 23, 0.6),
    0 0 20px rgba(34, 211, 238, 0.16);

  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ICON — FILLS CARD */
.tool-card img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

/* NAME */
.tool-name {
  display: block;
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--cyan-soft);
}

/* HOVER — EXTRA LIFT + GLOW */
.tool-item:hover .tool-card {
  transform: translateY(-18px);
  box-shadow:
    0 28px 65px rgba(2, 6, 23, 0.7),
    0 0 38px rgba(34, 211, 238, 0.4);
}

.tool-item:hover img {
  transform: scale(1.05);
}

/* LIGHT MODE */
body.light .tool-card {
  background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.95),
      rgba(241, 245, 249, 0.96));

  border: 1px solid rgba(2, 6, 23, 0.12);

  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.18),
    0 0 20px rgba(56, 189, 248, 0.18);
}

body.light .tool-name {
  color: var(--cyan-hero);
}


/* ===============================
   CHATBOT (old portfolio style)
   =============================== */
/* ===============================
   CHATBOT (New Design Styles)
   =============================== */

/* Glass Utility */
.glass {
  background: linear-gradient(135deg, hsla(222, 47%, 8%, 0.6), hsla(222, 47%, 6%, 0.4));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid hsla(173, 80%, 60%, 0.1);
}

body.light .glass {
  background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.8), hsla(0, 0%, 100%, 0.6));
  border: 1px solid hsla(173, 80%, 40%, 0.15);
}

/* Chatbot Container */
#chatbot {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 2000;
  font-family: 'Inter', sans-serif;
}

/* 1. Trigger Button */
.chat-trigger {
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, hsl(173, 80%, 40%) 0%, hsl(217, 91%, 60%) 50%, hsl(38, 92%, 50%) 100%);
  box-shadow: 0 0 30px rgba(173, 216, 230, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  z-index: 2002;
}

.chat-trigger:hover {
  transform: scale(1.05);
}

.chat-trigger i {
  color: white;
  font-size: 1.2rem;
  z-index: 2;
}

/* Spinning Ring */
.btn-ring {
  position: absolute;
  inset: -4px;
  /* slightly larger */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  animation: spin 8s linear infinite;
  pointer-events: none;
}

/* Ripple */
.btn-ripple {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(45, 212, 191, 0.4);
  z-index: -1;
  animation: ripple 2s infinite ease-out;
}

/* Tooltip Bubble (Rafi Style) */
.chat-tooltip {
  position: absolute;
  bottom: 65px;
  /* Closer to button */
  right: 0;
  width: 180px;
  /* Gradient matching rafi-main */
  background: linear-gradient(135deg, rgba(23, 23, 23, 0.95), rgba(9, 9, 11, 0.95));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.5);
  z-index: 2001;
  opacity: 0;
  animation: tooltip-in 0.8s ease-out 1s forwards, float 4s ease-in-out infinite;
  pointer-events: none;
  overflow: visible;
  /* Allow arrow to stick out */
}

/* Clip inner content but allow arrow */
.tooltip-content {
  position: relative;
  z-index: 2;
  padding: 10px 12px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #e2e8f0;
  overflow: hidden;
  /* Clip shimmer here */
  border-radius: 12px;
  /* Match parent */
}

/* Shimmer Layer - inside content or separate? */
/* To clip shimmer but show arrow, structure is tricky. */
/* If overflow is visible on parent, shimmer traverses parent... it will spill. */
/* Workaround: Put shimmer in valid container or use mask. */
/* Current HTML: .shimmer is sibling of .tooltip-arrow. */
/* Let's set overflow:hidden on a wrapper div inside? No, let's keep overflow:hidden on .chat-tooltip and move arrow OUTSIDE? */
/* Easier: .chat-tooltip overflow:visible. Shimmer inside a .inner-box with overflow:hidden. */
/* But .chat-tooltip HAS the border/bg. */
/* Let's Try: Arrow is pseudo element of .chat-tooltip? No, it's a div. */
/* If I set overflow:visible on .chat-tooltip, the shimmer (absolute inset 0) will stay inside border-box normally, but if it translates? */
/* translateX moves it. */
/* Solution: Move background/border/shimmer to an inner separate div, and keep arrow outside that inner div. */
/* BUT HTML structure is fixed in previous step. */
/* .chat-tooltip contains .shimmer, .tooltip-content, .tooltip-arrow. */
/* If I set .chat-tooltip overflow: visible (for arrow), shimmer spills. */
/* CSS Fix: 
   .chat-tooltip { background: none; border: none; overflow: visible; }
   .tooltip-bg { position: absolute; inset:0; background: ...; border: ...; overflow: hidden; border-radius: 12px; }
   (Need to inject this div? Or re-use existing tags?)
   
   Alternative: Arrow is INSIDE .chat-tooltip but pushed out?
   If overflow hidden, arrow is clipped.
   
   Correction: The Arrow MUST be outside the clipped area.
   
   Quick fix: Use the existing HTML.
   .chat-tooltip: overflow: visible.
   .shimmer: border-radius: 12px. (It still spills during animation if it moves out).
   
   Better: Set `clip-path` on shimmer? Or just careful constraints.
   
   Actually, usually Tooltips use a pseudo-element for arrow which requires `overflow: visible` on the main box.
   To make shimmer clip, the BACKGROUND needs to be a separate element or the main box needs overflow hidden.
   
   Let's check `rafi-main`.
   Often the "shimmer" is on the text or a specific `span`.
   Here it's a card sweep.
   
   Let's try:
   .chat-tooltip { overflow: visible; ... }
   .shimmer { ... border-radius: 12px; }  <- If it translates -100%, it sits outside.
   
   Okay, I will change the HTML structure slightly to handle this in standard CSS.
   Wrapper (.chat-tooltip-wrapper) -> Position, arrow.
   Inner (.chat-tooltip-card) -> BG, border, shimmer, content, overflow:hidden.
   
   Since I can use `replace_file_content` on HTML, I'll do that.
   
   Plan:
   1. Modify HTML to Wrap content+shimmer in `.chat-tooltip-card`.
   2. CSS: .chat-tooltip (wrapper, floating), .chat-tooltip-card (overflow hidden, bg), .tooltip-arrow (outside card).
*/

/* Temporarily, I will just adjust the bottom position and arrow.
   If shimmer spills, I will fix structure next.
   User said "shimmer comes from outside". If overflow is visible, it WILL come from outside visible space.
   Wait, "comes from outside" is GOOD?
   "shimmer should comes from outside and go therough boc"
   "shimmer start from before the box"
   
   Maybe user WANTS the spill? No, "go through box" implies effect. Usually clipped.
   
   Let's check the previous state. I had `overflow: hidden` on `.chat-tooltip`.
   This clips the arrow if `bottom: -5px` is outside.
   If padding/height allows `bottom: 0` to be inside...
   
   Arrow is `bottom: -5px`. 
   If `overflow: hidden`, arrow is CUT.
   Previous step 275 CSS had `overflow: hidden`.
   So the arrow was likely invisible or cut! That's the "V" bug.
   
   Fix: Remove `overflow: hidden` from main tooltip.
   Apply `overflow: hidden` to a new inner container or existing content element?
   
   Let's Refactor HTML to support this properly.
*/

.chat-tooltip.hidden {
  display: none;
}

/* 2. Chat Window */
/* Hidden state handled by JS toggling display or class, here defining layout */
#chatWindow {
  position: fixed;
  bottom: 100px;
  right: 25px;
  width: 380px;
  height: 600px;
  max-height: 80vh;
  border-radius: 24px;
  display: flex;
  /* overridden by inline-style or JS class if 'hidden' */
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.5);
  transform-origin: bottom right;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;

  /* ensure text colors are correct inside glass */
  color: var(--text-main);
}

#chatWindow.hidden {
  opacity: 0;
  transform: scale(0.9) translateY(20px);
  pointer-events: none;
  visibility: hidden;
}

/* Header */
.chat-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, hsl(173, 80%, 40%) 0%, hsl(217, 91%, 60%) 50%, hsl(38, 92%, 50%) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
}

.header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.avatar-circle i {
  font-size: 1.2rem;
}

.status-dot {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 10px;
  height: 10px;
  background: #4ade80;
  /* green-400 */
  border: 2px solid white;
  border-radius: 50%;
}

.header-info h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.header-info p {
  font-size: 0.75rem;
  margin: 0;
  opacity: 0.9;
}

#closeChat {
  background: transparent;
  border: none;
  color: white;
  opacity: 0.8;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 4px;
  transition: opacity 0.2s;
}

#closeChat:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

/* Messages Area */
.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(0, 0, 0, 0.2);
  /* minor dim */
}

.message {
  max-width: 85%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.5;
  word-wrap: break-word;
}

.bot-message,
.botMsg {
  align-self: flex-start;
  border-top-left-radius: 4px;
  /* Glass effect handled by .glass class added in HTML */
  background: rgba(30, 41, 59, 0.6);
  /* Fallback */
  border: 1px solid rgba(148, 163, 184, 0.1);
}

.user-message,
.userMsg {
  align-self: flex-end;
  border-top-right-radius: 4px;
  background: linear-gradient(135deg, hsl(173, 80%, 40%) 0%, hsl(217, 91%, 60%) 50%, hsl(38, 92%, 50%) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ===============================
   CUSTOM MODAL CLOSE BUTTON
   =============================== */
.modal-close-custom {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1056;
  /* Higher than Bootstrap modal content */
  transition: all 0.3s ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.modal-close-custom:hover {
  background: rgba(255, 0, 0, 0.8);
  transform: rotate(90deg);
}

body.light .modal-close-custom {
  background: rgba(255, 255, 255, 0.8);
  color: #000;
}

body.light .modal-close-custom:hover {
  background: rgba(255, 0, 0, 0.8);
  color: white;
}


/* Input Area */
.chat-input-area {
  padding: 16px;
  border-top: 1px solid rgba(148, 163, 184, 0.1);
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(10px);
  display: flex;
  gap: 10px;
}

body.light .chat-input-area {
  background: rgba(255, 255, 255, 0.8);
}

#chatInput {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 12px;
  padding: 10px 16px;
  color: var(--text-main);
  outline: none;
  font-size: 0.9rem;
  transition: all 0.2s;
}

#chatInput:focus {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--cyan-soft);
}

body.light #chatInput {
  background: white;
  border: 1px solid #e2e8f0;
}

#sendMessageBtn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, hsl(173, 80%, 40%) 0%, hsl(217, 91%, 60%) 100%);
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}

#sendMessageBtn:hover {
  opacity: 0.9;
}

/* Animations */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(200%);
  }
}

@keyframes ripple {
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes tooltip-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

@keyframes wiggle {

  0%,
  100% {
    transform: rotate(0) scale(1);
  }

  25% {
    transform: rotate(-10deg) scale(1.1);
  }

  75% {
    transform: rotate(10deg) scale(1.1);
  }
}

/* Apply Floating to Button Container */
#chatbotBtn {
  animation: float 4s ease-in-out infinite;
}

/* Apply Wiggle to Icon on Interval (using delay/duration tricks or simplified hover) */
/* Ideally we want it periodic. CSS alone only does continuous loops.
   We'll make a long duration keyframe with a short action. */
@keyframes periodic-wiggle {

  0%,
  85% {
    transform: rotate(0) scale(1);
  }

  87% {
    transform: rotate(-10deg) scale(1.1);
  }

  90% {
    transform: rotate(10deg) scale(1.1);
  }

  93% {
    transform: rotate(-10deg) scale(1.1);
  }

  95% {
    transform: rotate(0) scale(1);
  }
}

.chat-trigger i {
  color: white;
  font-size: 1.5rem;
  z-index: 2;
  animation: periodic-wiggle 5s ease-in-out infinite;
}

/* Mobile Responsive */
@media (max-width: 480px) {
  #chatWindow {
    width: 90%;
    right: 5%;
    bottom: 20px;
    /* Reduced bottom dist */
    height: 70vh;
  }
}

/* ===============================
   THEME SWITCH (old portfolio: fixed below navbar, top 80px right 20px)
   =============================== */
.theme-switch {
  position: fixed;
  top: 80px;
  right: 20px;
  display: inline-block;
  width: 55px;
  height: 30px;
  z-index: 2000;
}

.theme-switch::after {
  content: "Dark mode is better 😎";
  position: absolute;
  left: -160px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--secondary-blue);
  color: var(--accent-blue);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.3s;
}

.theme-switch:hover::after {
  opacity: 1;
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-switch .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--secondary-blue);
  border-radius: 12px;
  border: 2px solid limegreen;
  transition: 0.4s;
  box-shadow: 0 0 8px limegreen;
}

.theme-switch input:checked+.slider {
  background-color: limegreen;
}

.theme-switch .slider::before {
  position: absolute;
  content: "🌙";
  height: 24px;
  width: 24px;
  left: 3px;
  bottom: 3px;
  background-color: var(--accent-blue);
  border-radius: 50%;
  transition: 0.4s;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: var(--primary-blue);
}

.theme-switch input:checked+.slider::before {
  transform: translateX(25px);
  content: "☀️";
}





/* ===============================
   Icons github,linkedin etc
   =============================== */


.social-links {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 40px;
}

/* Base icon */
.social-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-soft);

  color: var(--text-muted);
  font-size: 1.1rem;
  text-decoration: none;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    color 0.18s ease;
}

/* Hover → glow + lift */
.social-icon:hover {
  color: var(--cyan);
  background: rgba(34, 211, 238, 0.08);
  box-shadow: 0 0 22px rgba(34, 211, 238, 0.45);
  transform: translateY(-2px) scale(1.05);
}

/* Click / Tap → bulk press */
.social-icon:active {
  transform: scale(0.94);
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.35);
}

/* Specific Social Brand Colors on Hover */
.social-icon.youtube:hover {
  color: #ff0000;
  background: rgba(255, 0, 0, 0.08);
  box-shadow: 0 0 22px rgba(255, 0, 0, 0.45);
}

.social-icon.facebook:hover {
  color: #1877F2;
  background: rgba(24, 119, 242, 0.08);
  box-shadow: 0 0 22px rgba(24, 119, 242, 0.45);
}

.social-icon.instagram:hover {
  color: #E4405F;
  background: rgba(228, 64, 95, 0.08);
  box-shadow: 0 0 22px rgba(228, 64, 95, 0.45);
}

.social-icon.snapchat:hover {
  color: #FFFC00;
  background: rgba(255, 252, 0, 0.08);
  box-shadow: 0 0 22px rgba(255, 252, 0, 0.45);
}

.social-icon.linktree:hover {
  color: #39E09B;
  background: rgba(57, 224, 155, 0.08);
  box-shadow: 0 0 22px rgba(57, 224, 155, 0.45);
}

/* Light mode adjustment */
body.light .social-icon {
  background: rgba(2, 6, 23, 0.04);
}


/* ===============================
   PUBLICATIONS SECTION
   =============================== */

.publications-section {
  padding: 0;
}

/* Section header */
.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-title {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--text-main);
}

.section-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 14px;
  background: linear-gradient(90deg,
      transparent,
      #64ffda,
      transparent);
}

body.light .section-title::after {
  background: linear-gradient(90deg,
      transparent,
      #0077ff,
      transparent);
}

/* 
   AOS WRAPPER (NO TRANSFORM!) */
.publication-item {
  max-width: 100%;
}

/* PUBLICATION CARD – OLD STYLE  */
.publication-card {
  width: 100%;
  padding: 30px 35px;
  border-radius: 20px;
  position: relative;

  background: rgba(6, 10, 20, 0.9);
  border: 1px solid #64ffda;

  /* DEFAULT FLOAT (SAFE — AOS IS ON WRAPPER) */
  transform: translateY(-6px);

  /* OFFSET SHADOW = FLOAT FEEL */
  box-shadow:
    6px 22px 48px rgba(2, 6, 23, 0.65),
    0 0 28px rgba(34, 211, 238, 0.18);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.publication-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--gradient-title);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

.publication-icon i {
  font-size: 1.4rem;
  color: #020617;
}

body.light .publication-icon {
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.4);
}

/* HOVER → EXTRA LIFT */
.publication-card:hover {
  transform: translateY(-16px);
  box-shadow:
    10px 36px 80px rgba(2, 6, 23, 0.75),
    0 0 45px rgba(34, 211, 238, 0.4);
}

/*  TEXT */

.publication-title {
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 12px;
  line-height: 1.4;
  color: var(--text-main);
}

.publication-meta {
  font-size: 0.95rem;
  opacity: 0.75;
  margin-bottom: 22px;
  color: var(--text-secondary);
}

/* BUTTON */

.btn-publication {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 999px;
  font-weight: 600;

  background: var(--gradient-primary);
  color: #020617;
  text-decoration: none;

  box-shadow: 0 0 22px rgba(34, 211, 238, 0.45);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.btn-publication:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 34px rgba(34, 211, 238, 0.65);
}

/* LIGHT MODE*/

body.light .publication-card {
  background: rgba(255, 255, 255, 0.9);
  border-color: #0077ff;
  box-shadow:
    6px 20px 42px rgba(15, 23, 42, 0.15),
    0 0 22px rgba(0, 119, 255, 0.18);
}

/* ===============================
   CONNECT with me (old portfolio: card sizes, background)
   =============================== */
#connect {

  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 100px 0;
}

#connect .connect-card,
#connect .card {
  background: var(--secondary-blue);
  border: 1px solid rgba(100, 255, 218, 0.1);
}

body.light #connect {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 100px 0;
}

body.light #connect .connect-card,
body.light #connect .card {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(2, 6, 23, 0.1);
}

/* ===============================
   PROJECTS – OLD PORTFOLIO STYLE
   =============================== */

/* Projects */
.project-filters {
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.project-filters button {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--accent-blue);
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.project-filters button.active {
  background: var(--gradient-primary);
  color: #020617;
}

.project-filters button:hover {
  background: rgba(100, 255, 218, 0.1);
}



.card {
  background: rgba(10, 25, 47, 0.85);
  border: 1px solid #64ffda;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
  border-radius: 12px;
}

.card:hover {
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}

body.light .card {
  border-color: #0077ff;
}

body.light .card:hover {
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.3);
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 30px rgba(100, 255, 218, 0.3);
}

/* Button styles from old portfolio */
.btn-custom {
  background: transparent;
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  padding: 1rem 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-custom:hover {
  background: rgba(100, 255, 218, 0.1);
}

.btn-custom-secondary {
  background: rgba(100, 255, 218, 0.1);
  color: var(--accent-blue);
  border: 1px solid var(--accent-blue);
  padding: 1rem 2rem;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-custom-secondary:hover {
  background: rgba(100, 255, 218, 0.2);
  color: var(--fifthaccent-blue);
  transform: translateY(-3px);
}

/* ===============================
   TIMELINE (Experience) – Card boxes + connector lines
   =============================== */
.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding-bottom: 20px;
}

.timeline::after {
  content: "";
  position: absolute;
  width: 2px;
  background: #64ffda;
  top: 0;
  left: 50%;
  margin-left: -1px;
  z-index: 0;
  bottom: 0;
  height: 100%;
}

body.light .timeline::after {
  background: #0077ff;
}

.timeline-item {
  padding: 10px 40px;
  position: relative;
  width: 50%;
  box-sizing: border-box;
  z-index: 1;
}

/* Connector: horizontal line from card to timeline dot */
.timeline-item::before {
  content: "";
  position: absolute;
  height: 2px;
  background: #64ffda;
  top: 24px;
  z-index: 0;
}

body.light .timeline-item::before {
  background: #0077ff;
}

.timeline-item.left::before {
  right: -20px;
  width: 70px;
}

.timeline-item.right::before {
  left: -10px;
  width: 50px;
}

/* Timeline dot – gradient */
.timeline-item::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #64ffda 0%, #0077ff 100%);
  border-radius: 50%;
  top: 15px;
  z-index: 2;
  box-shadow: 0 0 16px rgba(100, 255, 218, 0.5);
}

body.light .timeline-item::after {
  background: radial-gradient(circle, #0077ff 0%, #64ffda 100%);
  box-shadow: 0 0 16px rgba(0, 119, 255, 0.5);
}

/* Experience card – rounded, darker bg, border, shadow */
.timeline-content {
  background: rgba(6, 10, 20, 0.95);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.timeline-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(45, 212, 191, 0.12);
}

body.light .timeline-content {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(2, 6, 23, 0.1);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}

.timeline-content h4 {
  color: var(--text-main);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.timeline-date {
  color: #64ffda;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
}

body.light .timeline-date {
  color: #0077ff;
}

.text-muted {
  color: var(--text-muted) !important;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.timeline-content ul.text-muted {
  margin-top: 8px;
  padding-left: 1.2rem;
}

.left {
  left: 0;
  text-align: right;
}

.right {
  left: 50%;
  text-align: left;
}

.left::after {
  right: -10px;
}

.right::after {
  left: -10px;
}

@media (max-width: 768px) {
  .timeline::after {
    left: 31px;
  }

  .timeline-item {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  .timeline-item::after {
    left: 21px;
  }

  .timeline-item::before {
    display: none;
  }

  .left,
  .right {
    left: 0;
    text-align: left;
  }
}

/* ===============================
   CERTIFICATION CARD
   =============================== */
.certification.card {
  background: rgba(6, 10, 20, 0.9);
  border: 1px solid #64ffda;
  border-radius: 16px;
  transition: box-shadow 0.3s ease;
}

.certification.card:hover {
  box-shadow: 0 0 20px rgba(100, 255, 218, 0.3);
}

body.light .certification.card {
  background: rgba(255, 255, 255, 0.9);
  border-color: #0077ff;
}

body.light .certification.card:hover {
  box-shadow: 0 0 20px rgba(0, 119, 255, 0.3);
}

.certificate-icon {
  margin: 0 auto 20px;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
  border-radius: 50%;
  color: #f59e0b;
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 2px rgba(255, 255, 255, 0.05);
  position: relative;
}

.certificate-icon::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), transparent);
  z-index: -1;
}

body.light .certificate-icon {
  background: linear-gradient(135deg, #1a1f2e 0%, #0f1419 100%);
  color: #fbbf24;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* ===============================
   CONTACT – RAFI STYLE (Get In Touch)
   =============================== */
.contact-section-rafi {
  padding: 60px 0 20px;
  background: rgba(6, 10, 20, 0.4);
}

body.light .contact-section-rafi {
  background: rgba(241, 245, 249, 0.5);
}

.contact-section-rafi .col-lg-6 a.fw-medium:hover {
  color: var(--cyan-hero) !important;
}

.contact-section-rafi a.fw-medium i.fa-external-link-alt {
  font-size: 0.75rem;
  opacity: 0.7;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.contact-section-rafi a.fw-medium:hover i.fa-external-link-alt {
  opacity: 1;
  transform: translateX(2px);
}

.contact-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--gradient-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #020617;
  box-shadow: 0 0 28px rgba(45, 212, 191, 0.4);
  flex-shrink: 0;
}

.contact-form-rafi.glass {
  background: rgba(6, 10, 20, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-soft);
  padding-bottom: 2rem !important;
}

@media (min-width: 768px) {
  .contact-form-rafi.glass {
    padding-bottom: 2.5rem !important;
  }
}

body.light .contact-form-rafi.glass {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(2, 6, 23, 0.12);
}

.contact-form-rafi .form-control {
  background: rgba(10, 25, 47, 0.6);
  border: 1px solid var(--border-soft);
  color: var(--text-main);
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

.contact-form-rafi .form-control:focus {
  border-color: var(--accent-blue);
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
  outline: none;
}

.contact-form-rafi .form-control::placeholder {
  color: var(--text-muted);
}

.contact-form-rafi .form-label {
  color: var(--text-main);
}

/* Light mode form controls */
body.light .contact-form-rafi .form-control {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(15, 23, 42, 0.2);
  color: #1e293b;
}

body.light .contact-form-rafi .form-control:focus {
  border-color: #0077ff;
  box-shadow: 0 0 0 3px rgba(0, 119, 255, 0.15);
}

body.light .contact-form-rafi .form-control::placeholder {
  color: #64748b;
  opacity: 0.8;
}

.btn-contact {
  background: var(--gradient-primary);
  border: none;
  color: #020617;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 10px;
  box-shadow: 0 0 28px rgba(45, 212, 191, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.btn-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(45, 212, 191, 0.5);
  color: #020617;
}

/* ===============================
   FOOTER
   =============================== */
.footer {
  position: relative;
  overflow: hidden;
  padding: 20px 0 60px;
  background: rgba(2, 6, 23, 0.6);
  border-top: 1px solid var(--border-soft);
}

#particles-footer {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.footer-content {
  position: relative;
  z-index: 1;
}

.footer p {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0;
}

body.light .footer {
  background: rgba(241, 245, 249, 0.8);
  border-top-color: rgba(2, 6, 23, 0.1);
}

body.light .footer p {
  color: var(--text-muted);
}

/* ===============================
   RESPONSIVE (mobile, tablet, laptop) – old portfolio style
   =============================== */
@media (max-width: 991px) {
  section {
    padding: 80px 0;
  }

  .hero-title {
    font-size: clamp(2.5rem, 8vw, 3.5rem);
  }

  .hero-skill,
  .hero-role {
    font-size: 1.5rem;
  }

  .hero-desc {
    font-size: 0.95rem;
    margin-bottom: 40px;
  }

  .section-title {
    font-size: 2rem;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .theme-switch {
    top: 70px;
    right: 16px;
  }

  .theme-switch::after {
    display: none;
  }

  #connect {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  section {
    padding: 60px 0;
  }

  .hero-title {
    font-size: clamp(2rem, 10vw, 2.8rem);
  }

  .hero-skill,
  .hero-role {
    font-size: 1.25rem;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .btn-hero {
    width: 100%;
    max-width: 320px;
  }

  .section-title {
    font-size: 1.75rem;
  }

  .edu-header h3 {
    font-size: 1.5rem;
    justify-content: center;
  }

  .project-filters {
    gap: 8px;
  }

  .project-filters button {
    flex: 1 1 auto;
    min-width: 120px;
  }

  #chatWindow {
    width: min(340px, calc(100vw - 40px));
    right: 20px;
  }

  .contact-section-rafi .d-flex.gap-4 {
    flex-direction: column;
    gap: 1.5rem !important;
  }
}

@media (max-width: 576px) {
  section {
    padding: 50px 0;
  }

  .hero {
    padding-bottom: 120px;
  }

  .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hello {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .hero-skill,
  .hero-role {
    font-size: 1.1rem;
    margin-bottom: 12px;
  }

  .hero-desc {
    font-size: 0.875rem;
    margin-bottom: 30px;
  }

  .section-title {
    font-size: 1.5rem;
  }

  /* Modal Mobile Adjustments */
  .modal-glass-content {
    padding: 20px;
    border-radius: 16px;
  }

  .modal-project-title {
    font-size: 1.5rem;
  }

  .modal-section-title {
    font-size: 1.1rem;
  }

  .modal-description,
  .feature-item {
    font-size: 0.9rem;
  }

  /* Project Buttons Mobile */
  .btn-action-group {
    flex-direction: column;
    width: 100%;
  }

  .btn-view-demo,
  .btn-view-code {
    width: 100% !important;
  }

  .btn-info-circle {
    width: 100% !important;
    height: 44px;
    border-radius: 8px;
  }

  .btn-info-circle i {
    font-size: 1rem;
  }

  .skill-tags {
    gap: 10px;
    margin-top: 32px;
  }

  .skill-tag {
    padding: 10px 16px;
    font-size: 0.85rem;
    min-width: 100px;
  }

  .radar-chart-container {
    margin-top: 30px;
  }

  #skillRadarChart {
    padding: 12px;
  }

  .theme-switch {
    width: 48px;
    height: 26px;
    top: 60px;
    right: 10px;
  }

  .theme-switch .slider::before {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 10px;
    bottom: 2px;
    left: 3px;
  }

  .theme-switch input:checked+.slider::before {
    transform: translateX(20px);
  }
}

@media (min-width: 992px) {
  section {
    padding: 120px 0;
  }
}

@media (hover: none) {
  .card:hover {
    transform: none;
  }

  .skill-tag:hover {
    transform: translateY(-6px);
  }
}

/* ===============================
   CHATBOT TOOLTIP (SHIMMER & GLASS)
   =============================== */
#chatTooltip {
  position: fixed;
  bottom: 86px;
  right: 28px;
  width: fit-content;
  z-index: 9999;
  animation:
    float-tooltip 3s ease-in-out infinite,
    drift-tooltip 5s ease-in-out infinite;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  overflow: visible;
}

#chatTooltip.hidden {
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
}

.tooltip-shell {
  position: relative;
  padding: 4px 8px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(9, 9, 11, 0.88));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  /* no hard borders */
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 12px 40px -12px rgba(0, 0, 0, 0.75),
    0 0 24px rgba(255, 255, 255, 0.06),
    0 0 36px rgba(56, 189, 248, 0.15);
  overflow: visible;
  /* shimmer must exist outside before/after */
  color: #f8fafc;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
  display: flex;
  align-items: flex-start;
  /* keep text closer to top */
}

.tooltip-shell::before {
  content: '';
  position: absolute;
  inset: -30% -45%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.08), transparent 55%);
  filter: blur(18px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 0;
}

.tooltip-shell::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.7;
  pointer-events: none;
  z-index: 1;
  animation: diagonal-glow 5s ease-in-out infinite;
}

/* Shimmer Effect - Light Sweep */
.shimmer {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0) 5%,
      rgba(255, 255, 255, 0.7) 50%,
      rgba(255, 255, 255, 0) 95%);
  filter: blur(10px);
  opacity: 0.55;
  mix-blend-mode: screen;
  box-shadow:
    0 0 18px rgba(255, 255, 255, 0.10),
    0 0 36px rgba(255, 255, 255, 0.06);
  /* start clearly OUTSIDE left edge, then exit beyond right (straight L->R) */
  transform: translateX(-160%);
  animation: shimmer-sweep 3.1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  animation-delay: 1.2s;
  z-index: 2;
  pointer-events: none;
}

/* Tooltip Content */
.tooltip-content {
  position: relative;
  z-index: 3;
  transform: translateY(-1px);
  /* remove remaining top air */
}

/* Remove default paragraph spacing inside tooltip */
.tooltip-content p {
  margin: 0;
  padding: 0;
}

.tooltip-content .highlight {
  color: #2dd4bf;
  font-weight: 600;
  text-shadow: none;
}

/* Tooltip Arrow */
.tooltip-arrow {
  position: absolute;
  bottom: -8px;
  right: 24px;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.9), rgba(9, 9, 11, 0.88));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  transform: rotate(45deg);
  z-index: -1;
}

/* Light Bleed Effect (Glow behind) -- handled by box-shadow mostly, but adding subtle ambient light */
#chatTooltip::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 16px;
  z-index: -2;
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08), transparent 45%),
    radial-gradient(circle at 80% 20%, rgba(56, 189, 248, 0.12), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(168, 85, 247, 0.12), transparent 55%);
  opacity: 0.7;
  filter: blur(10px);
}

/* ANTI-GRAVITY FLOAT ANIMATION */
@keyframes float-tooltip {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* SHIMMER SWEEP ANIMATION */
@keyframes shimmer-sweep {
  0% {
    /* outside left */
    transform: translateX(-160%);
    opacity: 0.05;
  }

  20% {
    opacity: 0.55;
  }

  100% {
    /* outside right */
    transform: translateX(190%);
    opacity: 0.05;
  }
}

@keyframes drift-tooltip {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-6px, -3px);
  }

  100% {
    transform: translate(0, 0);
  }
}

@keyframes diagonal-glow {
  0% {
    transform: translate(-8%, -6%) rotate(0deg);
    opacity: 0.6;
  }

  50% {
    transform: translate(6%, 4%) rotate(2deg);
    opacity: 0.9;
  }

  100% {
    transform: translate(-8%, -6%) rotate(0deg);
    opacity: 0.6;
  }
}

/* ===============================
   PROJECT ACTION BUTTONS
   =============================== */
.btn-action-group {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1.25rem;
}

.btn-action {
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none !important;
  border: 1.5px solid transparent;
}

/* View Demo (Live) */
.btn-view-demo {
  background: var(--cyan-hero);
  color: #020617;
  flex-grow: 2;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.25);
}

.btn-view-demo:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 25px rgba(45, 212, 191, 0.45);
  background: #2dd4bf;
  color: #020617;
}

/* Design / Code */
.btn-view-code {
  background: rgba(45, 212, 191, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  flex-grow: 2;
}

.btn-view-code:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

/* Info Button */
.btn-info-circle {
  width: 44px;
  padding: 0;
  flex-shrink: 0;
  background: rgba(236, 72, 153, 0.05);
  border-color: rgba(236, 72, 153, 0.3);
  color: #ec4899;
}

.btn-info-circle:hover {
  background: rgba(236, 72, 153, 0.15);
  border-color: #ec4899;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.2);
  transform: scale(1.05);
}

/* ===============================
   PROJECT INFO MODAL (Refined)
   =============================== */
.project-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2, 6, 23, 0.7);
  /* Slightly more transparent */
  backdrop-filter: blur(8px);
  /* Reduced blur slightly for better performance/visibility */
  -webkit-backdrop-filter: blur(8px);
}

.project-modal.active {
  display: flex;
}

.modal-glass-content {
  background: #0f172a;
  /* Solid dark background to ensure visibility */
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
  padding: 30px;
  /* Removed CSS animation to prevent conflict with GSAP */
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }

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

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color 0.3s;
  z-index: 10;
}

.modal-close-btn:hover {
  color: #fff;
}

.modal-project-title {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.modal-project-tech {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.modal-tech-tag {
  background: rgba(45, 212, 191, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.3);
  color: var(--cyan-hero);
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.modal-section {
  margin-bottom: 24px;
}

.modal-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.title-cyan {
  color: var(--cyan-hero);
}

.title-pink {
  color: #ec4899;
}

.modal-description {
  color: var(--text-muted);
  line-height: 1.6;
  font-size: 1rem;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
  color: #e2e8f0;
}

.feature-item i {
  color: var(--cyan-hero);
  margin-top: 4px;
  font-size: 0.9rem;
}

.modal-footer-btns {
  display: flex;
  gap: 15px;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Light mode overrides */
body.light .modal-glass-content {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.1);
}

body.light .modal-project-title {
  color: #020617;
}

body.light .modal-description {
  color: #475569;
}

body.light .feature-item {
  color: #334155;
}

body.light .modal-close-btn {
  color: #64748b;
}

/* Connect Section Button Refinement */
.btn-mini {
  padding: 6px 14px !important;
  font-size: 0.8rem !important;
  min-width: 100px;
  height: auto;
  line-height: 1.2;
}

/* Contact Socials Row */
.contact-socials-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 2px;
}

@media (max-width: 991px) {
  .contact-icon {
    width: 44px;
    height: 44px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .contact-socials-row {
    justify-content: flex-start;
    margin-top: 1.5rem !important;
  }
}

/* ===============================
   IN-APP BROWSER BANNER (CENTERED)
   =============================== */
.in-app-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(45, 212, 191, 0.4);
  border-radius: 20px;
  z-index: 10000;
  padding: 30px 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  animation: fadeInOut 0.5s ease-out;
}

.in-app-banner.hidden {
  display: none;
}

.banner-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  color: #fff;
  text-align: center;
}

.banner-main-icon {
  color: var(--cyan-hero);
  font-size: 3rem;
  margin-bottom: 10px;
}

.banner-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s;
}

.banner-close:hover {
  color: #fff;
}

.btn-breakout {
  background: var(--gradient-primary);
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  color: #020617;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.2s;
  width: 100%;
}

.btn-breakout:hover {
  transform: scale(1.02);
}

@keyframes fadeInOut {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

/* ===============================
   PDF MODAL FALLBACK
   =============================== */
.modal-pdf-container {
  height: 100%;
  position: relative;
}

.pdf-fallback {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: var(--bg-base);
  z-index: 1;
  /* Sits behind if PDF loads, but shows if it's blank */
  padding: 20px;
  text-align: center;
}

.pdf-fallback i {
  font-size: 4rem;
  color: #f87171;
  margin-bottom: 20px;
}

.pdf-fallback p {
  color: var(--text-main);
  margin-bottom: 25px;
  font-size: 1.1rem;
}

.fallback-btns {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.fallback-btns .btn-hero {
  min-width: 180px;
}

/* Ensure embed/iframe is on top if it works */
.modal-pdf-container embed,
.modal-pdf-container iframe {
  position: relative;
  z-index: 2;
  background: white;
  /* Some browsers show white before loading */
}

/* Hide embed on mobile/tablets where it often fails */