html,
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  scroll-behavior: smooth;
}
body::before {
  width: 100vw;
  height: 100vh;
}

/* This stops the browser from showing any text before the preloader starts */
body:not(.preloader-active) {
  background-color: #000;
}
/* This CSS ensures it integrates perfectly with your existing styles */
#neural-container {
  position: fixed; /* or absolute if used inside a section */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: -1; /* Place behind your text */
  overflow: hidden;
}

canvas {
  display: block;
  filter: contrast(120%) brightness(120%);
}

/* Matches your scanline effect */
.scanlines {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 1;
}

:root {
  --accent: #f97316;
  --accent-muted: rgba(249, 115, 22, 0.1);
  --bg: #000000;
}
body {
  font-family: "Space Grotesk", sans-serif;
  background-color: var(--bg);
  color: #fff;
  overflow-x: hidden;
  margin: 0;
}
.mono {
  font-family: "JetBrains Mono", monospace;
}
body::before {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background:
    linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
    linear-gradient(90deg, rgba(249, 115, 22, 0.02), rgba(249, 115, 22, 0.01), rgba(249, 115, 22, 0.02));
  z-index: 50;
  background-size:
    100% 2px,
    3px 100%;
  pointer-events: none;
}
/* IPAD PRO / TABLET HEIGHT FIX */
@media (min-width: 768px) and (max-width: 1280px) {
  header {
    min-height: auto !important;
    padding-top: 160px !important;
    padding-bottom: 80px !important;
  }
}
.bento-card {
  background: #0a0a0a;
  border: 1px solid #1a1a1a;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.bento-card:hover {
  border-color: var(--accent);
  background: #0f0f0f;
  transform: translateY(-2px);
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: 1s all ease;
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}
.text-stroke {
  -webkit-text-stroke: 1px rgba(249, 115, 22, 0.3);
  color: transparent;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  background: var(--accent);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0px !important;
  background: transparent !important; /* පසුබිම විනිවිද පෙනෙන ලෙස */
}

/* Firefox සඳහා ප්‍රධාන scrollbar එක hide කිරීම */
html,
body {
  scrollbar-width: none !important;
}
/* 3. මොබයිල් වලදී විශේෂයෙන්ම ප්‍රධාන එක Hide වී ඇති බව තහවුරු කිරීම */
@media (max-width: 768px) {
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 0px !important;
    display: none !important;
  }

  /* මොබයිල් වලදීත් section scrollbar එක පෙන්වීමට */
  div.custom-scrollbar::-webkit-scrollbar {
    width: 3px !important; /* මොබයිල් වලදී පොඩ්ඩක් සිහින්ව */
    display: block !important;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  display: flex;
  white-space: nowrap;
  width: max-content;
  animation: marquee 20s linear infinite;
}
/* Responsive Grid Adjustments for Skills Section */
@media (max-width: 640px) {
  #skills .grid {
    gap: 1rem;
  }
  #skills .bento-card {
    padding: 1.25rem;
  }
  #skills h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
  }
}
/* iPad Pro Specific alignment */
@media (min-width: 768px) and (max-width: 1024px) {
  #skills .lg\:grid-cols-3,
  #skills .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* GALAXY Z FOLD 5 / NARROW SCREEN REPAIR */
@media (max-width: 380px) {
  #skills h2 {
    font-size: 1.75rem !important; /* Forces the long word to fit on one line */
    letter-spacing: -0.05em !important;
  }

  /* Ensure nav bar elements don't collide on thin screens */
  nav span.truncate {
    max-width: 100px !important;
  }

  nav {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #experience h2 {
    font-size: 2.5rem !important;
    margin-bottom: 2rem !important;
  }
  #experience .bento-card {
    padding: 1.25rem !important;
    gap: 0.75rem !important;
  }
  #experience p.max-w-md {
    font-size: 13px !important; /* Slightly smaller than 'base' for ultra-thin screens */
    line-height: 1.4 !important;
  }
}

/* FULL NAV BAR RESPONSIVENESS (ALL DEVICES) */
nav {
  width: 100%;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* Prevent horizontal scroll on mobile caused by large headers */
h1,
h2 {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Ensure bento cards don't shrink too much on tablet */
@media (min-width: 640px) and (max-width: 1024px) {
  #skills .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (min-width: 1024px) {
  .slider-item {
    width: 320px;
    min-height: 450px;
  }
  /* Targets the list items - set to 14px for a clean look */
  #skills .skill-list li {
    font-size: 13px !important;
    letter-spacing: 0.02em;
    margin-bottom: 0.4rem;
  }

  /* Targets the category headers - slightly smaller but bold */
  #skills h3.mono {
    font-size: 12px !important;
    margin-bottom: 1.25rem !important;
  }

  /* Reset scroll height slightly to match the 14px text */
  #skills .h-\[220px\] {
    height: 235px !important;
  }

  /* My Prefer & Roadmap sections desktop adjustment */
  #skills .text-\[12px\],
  #skills .text-\[13px\] {
    font-size: 13px !important;
  }
}
@media (min-width: 1280px) {
  .slider-item.prev {
    transform: translateX(-300px) rotateY(35deg) scale(0.85);
  }
  .slider-item.next {
    transform: translateX(300px) rotateY(-35deg) scale(0.85);
  }
}
/* --- COVERFLOW SLIDER CSS --- */
.slider-wrapper {
  position: relative;
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
  height: 500px;
}
@media (min-width: 768px) {
  .slider-wrapper {
    height: 550px;
  }
}
.slider-item {
  position: absolute;

  border-radius: 20px;
  user-select: none;
  transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform, opacity;
  width: 280px; /* Base width for mobile */
  min-height: 400px;
}
.slider-item.active {
  transform: translateZ(200px);
  z-index: 10;
  opacity: 1;
  border: 1px solid var(--accent);
}
.slider-item.prev {
  transform: translateX(-280px) rotateY(35deg) scale(0.85);
  z-index: 5;
  opacity: 0.4;
}
.slider-item.next {
  transform: translateX(280px) rotateY(-35deg) scale(0.85);
  z-index: 5;
  opacity: 0.4;
}
.slider-item.hide {
  transform: scale(0.3) translateZ(-500px);
  opacity: 0;
  z-index: 0;
}
/* Add this inside your <style> tag */
.line-clamp-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.skill-list li {
  position: relative;
  padding-left: 1.5rem;
}
.skill-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  background-color: var(--accent);
  border-radius: 1px;
  box-shadow: 0 0 8px var(--accent);
}
.custom-scrollbar::-webkit-scrollbar {
  width: 2px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(249, 115, 22, 0.3);
}
/* Fixes the "1 item" bug on Tablets/Hub Max */
@media (min-width: 768px) and (max-width: 1279px) {
  #skills .grid-cols-1,
  #skills .lg\:grid-cols-3,
  #skills .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Nest Hub Max Height Fix - Stops the "Too Much Space" issue */
@media (max-height: 850px) {
  header {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 50px !important;
  }
  #skills,
  #about {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}
/* Achievement Section Borders Fix */
@media (max-width: 639px) {
  #achievements .bento-card {
    border-right: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  /* Tablet 2-column layout border logic */
  #achievements .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Handle short screens (Nest Hub Max) - Escaped special characters */
@media (max-height: 800px) {
  #achievements .max-h-\[290px\] {
    max-h: 200px !important;
  }
}
/* --- UPDATED COVERFLOW SLIDER RESPONSIVE CSS --- */
.slider-wrapper {
  perspective: 1000px;
  height: 500px;
}

.slider-item {
  width: 280px; /* Base width for mobile */
  min-height: 400px;
}

/* Tablet / Desktop Scale Up */
@media (min-width: 768px) {
  .slider-item {
    width: 320px;
    min-height: 450px;
  }
  .slider-wrapper {
    height: 550px;
    perspective: 1200px;
  }
}

/* 3D Transform Logic for Narrow Screens (Z Fold 5 / iPhone SE) */
@media (max-width: 480px) {
  .slider-item.prev {
    transform: translateX(-150px) rotateY(30deg) scale(0.7) !important;
    opacity: 0.2;
  }
  .slider-item.next {
    transform: translateX(150px) rotateY(-30deg) scale(0.7) !important;
    opacity: 0.2;
  }
  .slider-item.active {
    transform: translateZ(100px) !important;
  }
  .slider-item {
    width: 260px; /* Slightly narrower for Z Fold 5 */
  }
}

/* Standard Mobile / Tablet (S8+, iPhone 14) */
@media (min-width: 481px) and (max-width: 1024px) {
  .slider-item.prev {
    transform: translateX(-220px) rotateY(35deg) scale(0.8);
  }
  .slider-item.next {
    transform: translateX(220px) rotateY(-35deg) scale(0.8);
  }
}

/* Avoid text overlap on small heights */
@media (max-height: 700px) {
  .slider-wrapper {
    height: 450px;
  }
  .slider-item {
    min-height: 380px;
    padding: 1.5rem !important;
  }
}

/* IPAD MINI & SMALL TABLET OPTIMIZATION */
@media (min-width: 640px) and (max-width: 820px) {
  nav {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Scale down the font slightly so everything fits in one line on iPad Mini portrait */
  nav .flex.gap-4 {
    gap: 1rem !important;
  }

  nav a {
    font-size: 10px !important;
  }

  /* Make the contact button slightly smaller to save space */
  nav a[href="#contact"] {
    padding: 8px 16px !important;
  }
}

/* Ensure the background blur is consistent on iPad Safari */
nav {
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

/* NEST HUB MAX & LANDSCAPE TABLET VERTICAL FIX */
@media (max-height: 850px) and (orientation: landscape) {
  #skills .grid {
    gap: 0.75rem !important; /* Reduces gap between cards to save height */
  }

  #skills .bento-card {
    padding: 1rem !important; /* Thinner padding */
    min-height: 140px !important; /* Shorter cards to prevent screen overflow */
  }

  #skills .bento-card h3 {
    margin-bottom: 0.5rem !important;
    font-size: 10px !important;
  }

  .skill-list space-y-3 {
    margin-top: 0 !important;
  }

  .skill-list li {
    font-size: 11px !important;
    line-height: 1.2 !important;
  }
  #experience {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  #experience h2 {
    margin-bottom: 2rem !important;
    font-size: 3rem !important;
  }
  /* Increase scroll area for short screens so user can actually see the cards */
  #experience .max-h-\[260px\] {
    max-height: 350px !important;
  }
}

/* Ensure the grid doesn't create a massive empty scroll on Nest Hub */
@media (min-width: 1024px) and (max-height: 900px) {
  #skills {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}
/* --- IPAD (AIR & MINI) SPECIFIC OPTIMIZATION --- */
@media (min-width: 768px) and (max-width: 1024px) {
  #experience .max-w-7xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Increase container height so cards aren't cut off on iPad portrait */
  #experience .max-h-\[500px\] {
    max-height: 700px !important;
  }

  /* Force stack layout on iPad portrait to prevent text squishing */
  #experience .bento-card {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 2.5rem !important; /* Larger padding for premium tablet feel */
  }

  #experience h4 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem;
  }

  #experience p.max-w-md {
    max-width: 100% !important;
    font-size: 1.1rem !important; /* Increased font for tablet readability */
    margin-top: 1rem;
  }
}

/* Fix for iPad Air / Pro Landscape */
@media (min-width: 1025px) and (max-width: 1366px) {
  #experience .bento-card {
    gap: 3rem !important;
  }

  #experience p.max-w-md {
    max-width: 400px !important;
  }
}

/* Custom Scrollbar Visibility for iPad */
.custom-scrollbar {
  -webkit-overflow-scrolling: touch; /* Smooth scrolling for iPad */
}

/* --- EDU & CERTIFI RESPONSIVE REPAIR --- */

/* IPAD MINI / AIR (Portrait) */
@media (min-width: 768px) and (max-width: 1024px) {
  #edu-certifi .grid {
    grid-template-columns: 1fr !important; /* Stack columns for better readability */
    gap: 2rem;
  }

  #edu-certifi .bento-card {
    padding: 2.5rem !important;
  }

  /* Increase scroll area on iPad to prevent tiny scroll windows */
  #edu-certifi .max-h-\[180px\],
  #edu-certifi .max-h-\[160px\],
  #edu-certifi .max-h-\[220px\] {
    max-height: 350px !important;
  }
}

/* GALAXY Z FOLD 5 / SMALL PHONES */
@media (max-width: 380px) {
  #edu-certifi h3 {
    font-size: 1.1rem !important;
    gap: 0.5rem !important;
  }

  #edu-certifi h4 {
    font-size: 0.9rem !important;
  }

  /* Ensure text doesn't overflow horizontally on thin screens */
  #edu-certifi .mono {
    font-size: 9px !important;
  }

  #edu-certifi .bento-card {
    padding: 1.25rem !important;
  }
  #achievements .mt-12 .flex {
    flex-direction: row !important; /* Keep dot and text on one line */
    align-items: center !important;
    justify-content: center !important;
  }

  #achievements .mt-12 .mono {
    font-size: 10px !important; /* Increased size for readability */
    letter-spacing: 0.02em !important; /* Reduced tracking so it fits width */
    line-height: 1.2 !important;
    width: 100% !important;
  }

  /* Force the text to stay in one line if possible, or wrap cleanly */
  #achievements .mt-12 .break-words {
    white-space: nowrap !important;
    display: inline-block !important;
  }

  /* Make the orange dot slightly larger for the bigger font */
  #achievements .mt-12 .w-1 {
    width: 5px !important;
    height: 5px !important;
  }
}
/* Universal Tablet & Desktop Footer Font Fix */
@media (min-width: 381px) {
  #achievements .mt-12 .mono {
    font-size: 12px !important; /* One size increase as requested */
    color: rgba(255, 255, 255, 0.4) !important;
  }
}
/* --- NEST HUB & LANDSCAPE HEIGHT REPAIR --- */
@media (max-height: 850px) and (orientation: landscape) {
  /* Reduce section padding to save vertical space */
  #edu-certifi {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  /* Shrink the H3 heading slightly to save room */
  #edu-certifi h3 {
    margin-bottom: 1.5rem !important;
    font-size: 1.25rem !important;
  }

  /* STRICT HEIGHT CONTROL: Prevents the cards from being too tall */
  #edu-certifi .max-h-\[220px\],
  #edu-certifi .md\:max-h-\[280px\],
  #edu-certifi .max-h-\[180px\] {
    max-height: 150px !important; /* Forces a smaller scroll window on Nest Hub */
  }

  /* Reduce internal padding of cards to keep them slim */
  #edu-certifi .bento-card {
    padding: 1.5rem !important;
  }

  #edu-certifi .space-y-6,
  #edu-certifi .space-y-8 {
    padding-top: 0 !important;
  }
}

/* Fix for standard Nest Hub (Small) specifically */
@media (max-width: 1024px) and (max-height: 600px) {
  #edu-certifi .max-h-\[150px\] {
    max-height: 120px !important;
  }
}
/* --- UNIVERSAL TABLET & NEST HUB HEIGHT FIX --- */
@media (min-width: 640px) and (max-width: 1280px) {
  #edu-certifi {
    padding-top: 40px !important; /* Dramatically reduced from py-32 */
    padding-bottom: 40px !important;
  }

  /* Reduce gap between the two cards */
  #edu-certifi .grid {
    gap: 1.5rem !important;
  }

  /* Make bento cards more compact */
  #edu-certifi .bento-card {
    padding: 1.5rem !important; /* Reduced from p-10 */
    border-radius: 1.5rem !important;
  }

  /* Tighten heading margins */
  #edu-certifi h3 {
    margin-bottom: 1rem !important;
    font-size: 1.25rem !important; /* Slightly smaller for tablet height */
  }

  /* PREVENT OVERFLOW: Fix the scroll window height */
  #edu-certifi .max-h-\[220px\] {
    max-height: 180px !important; /* Slightly shorter to fit screen */
  }

  /* Ensure the list spacing isn't too large */
  #edu-certifi .space-y-6,
  #edu-certifi .space-y-8 {
    margin-top: 0.5rem !important;
  }
}
/* UPDATED FIX FOR NEST HUB (LANDSCAPE SHORT SCREENS) */
@media (max-height: 600px) and (orientation: landscape) {
  /* Increase Heading Size */
  #experience h4 {
    font-size: 1.25rem !important;
    letter-spacing: 0.02em;
  }

  /* Increase Date/Label Size */
  #experience .mono {
    font-size: 10px !important;
  }

  /* Improve Description: Larger font and wider container */
  #experience p.max-w-md {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 550px !important; /* Increased width so the card feels fuller */
    color: rgba(255, 255, 255, 0.7) !important; /* Slightly brighter for readability */
  }

  /* Adjust Card Padding for better balance */
  #experience .bento-card {
    padding: 1.5rem 2rem !important;
    gap: 1.5rem !important;
    flex-direction: row !important; /* Keeps it side-by-side in landscape */
    align-items: center !important;
  }

  /* Ensure the scrollable area is large enough to see the cards */
  #experience .custom-scrollbar {
    max-height: 300px !important;
  }
}
/* Specific fix for iPad portrait where screens are taller but narrow */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  #edu-certifi .grid {
    grid-template-columns: 1fr !important; /* Stack cards to allow full width */
  }

  #edu-certifi .max-h-\[220px\] {
    max-height: 250px !important; /* Allow more height since we are vertical */
  }
}

/* Force Smooth Scrolling for Tablet Safari */
.custom-scrollbar {
  -webkit-overflow-scrolling: touch;
}
/* NEST HUB MAX SPECIFIC REPAIR FOR BOTTOM SKILLS ROW */
@media (min-width: 900px) and (max-height: 850px) and (orientation: landscape) {
  /* Force the bottom 4-column grid into 2 columns so text doesn't squish */
  #skills .lg\:grid-cols-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Fix the "My Prefer_" and "Roadmap" text size and spacing */
  #skills .bento-card {
    min-height: fit-content !important;
    padding: 1.25rem !important;
  }

  #skills .text-\[12px\],
  #skills .text-\[13px\],
  #skills .skill-list li {
    font-size: 14px !important; /* Larger font for the Hub screen */
    line-height: 1.5 !important;
    opacity: 1 !important;
    white-space: nowrap !important; /* Prevents text from breaking into two lines */
  }

  /* Make sure the "My Prefer_" heading is visible */
  #skills h3.mono {
    font-size: 12px !important;
    margin-bottom: 0.5rem !important;
  }

  /* Remove any height restrictions on the bottom cards */
  #skills .min-h-\[200px\] {
    min-height: 120px !important;
  }
} /* --- ACHIEVEMENTS SECTION RESPONSIVE REPAIR --- */

/* --- ACHIEVEMENTS FULL RESPONSIVE REPAIR --- */

/* 1. INCREASE FONT: Academic Excellence Awarded */
#achievements .mono.text-\[10px\].uppercase.opacity-40 {
  font-size: 11px !important; /* Increased for better legibility */
  opacity: 0.6 !important; /* Brighter for readability */
  letter-spacing: 0.05em;
}

/* 2. INCREASE FONT: Verified Academic Credentials Footer */
#achievements .mt-12 .mono {
  font-size: 11px !important; /* Forced increase across all devices */
  color: rgba(255, 255, 255, 0.4) !important; /* More visible than text-white/20 */
}

/* 3. TABLET & IPAD (2-Column Layout) */
@media (min-width: 640px) and (max-width: 1023px) {
  #achievements .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Fix borders for 2-column grid so they don't look broken */
  #achievements .bento-card {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  #achievements .bento-card:nth-child(2n) {
    border-right: none !important;
  }
}

/* 4. NEST HUB MAX & LANDSCAPE (Short Screens) */
@media (max-height: 850px) and (orientation: landscape) {
  #achievements {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  #achievements h2 {
    margin-bottom: 3rem !important;
    font-size: 3.5rem !important;
  }

  /* Ensure the scroll box is large enough so items aren't tiny */
  #achievements .max-h-\[290px\],
  #achievements .md\:max-h-\[290px\] {
    max-height: 350px !important;
  }

  #achievements .bento-card {
    padding: 2rem !important;
  }
}

/* 5. MOBILE & NARROW PHONES (iPhone SE / Z Fold 5) */
@media (max-width: 480px) {
  #achievements h2 {
    font-size: 2.2rem !important;
    margin-bottom: 2rem !important;
  }

  #achievements .bento-card {
    padding: 2rem 1rem !important;
    border-right: none !important; /* Stacked layout means no right border */
  }

  #achievements h4 {
    font-size: 2.2rem !important; /* Adjusting the "3.8" size for small screens */
  }

  /* Increase footer text for very small mobile screens */
  #achievements .mt-12 .mono {
    font-size: 10px !important;
    letter-spacing: 0.02em !important;
  }
}

/* --- IPAD PRO (11" & 12.9") SPECIFIC FIX --- */
@media (min-width: 1024px) and (max-width: 1366px) {
  #achievements .max-w-7xl {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Force 2-column layout for iPad Pro to keep cards large and premium */
  #achievements .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Fix iPad Pro borders for 2-column grid */
  #achievements .bento-card {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 4rem 2rem !important; /* Larger padding for the big screen */
  }

  /* Remove right border on the 2nd and 4th items */
  #achievements .bento-card:nth-child(2n) {
    border-right: none !important;
  }

  /* Increase the scroll height for iPad Pro so cards aren't cut off */
  #achievements .max-h-\[290px\],
  #achievements .md\:max-h-\[290px\] {
    max-height: 600px !important;
  }

  /* Adjust the giant Heading for iPad Pro */
  #achievements h2 {
    font-size: 5rem !important;
    margin-bottom: 4rem !important;
  }

  /* Make footer text clearer on high-res iPad screen */
  #achievements .mt-12 .mono {
    font-size: 13px !important;
    letter-spacing: 0.15em !important;
    opacity: 0.5 !important;
  }
}

/* Fix for iPad Pro Portrait specifically */
@media (min-width: 1024px) and (orientation: portrait) {
  #achievements .grid {
    grid-template-columns: 1fr !important; /* Stack for maximum readability in portrait */
  }
  #achievements .bento-card {
    border-right: none !important;
  }
}
/* --- UNIVERSAL FOOTER RESPONSIVE REPAIR --- */
/* Removes extra spacing at the very bottom of the page */
#contact {
  padding-bottom: 40px !important; /* Force a tight bottom padding */
}

#contact .mt-20 {
  margin-top: 2.5rem !important; /* Reduces the gap above the copyright line */
}

/* Ensure the credits line is not too far from the border */
#contact div.pt-10 {
  padding-top: 1.5rem !important;
}

/* Fix for landscape screens where height is limited */
@media (max-height: 700px) and (orientation: landscape) {
  #contact {
    padding-top: 3rem !important;
    padding-bottom: 2rem !important;
  }
  #contact h2 {
    margin-bottom: 1.5rem !important;
  }
  #contact .mb-20 {
    margin-bottom: 1.5rem !important;
  }
}
/* 1. Status Text (Available for Opportunities) */
#contact .footer-status {
  font-size: 11px !important;
  letter-spacing: 0.3em !important;
}

/* 2. Social Labels (Email, LinkedIn, etc.) */
#contact .footer-label {
  font-size: 10px !important;
  opacity: 0.6 !important;
  letter-spacing: 0.05em !important;
}

/* 3. Bottom Credit Text */
#contact .footer-credits {
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
}

/* TABLET OPTIMIZATION (iPad, Surface, Nest Hub) */
@media (min-width: 768px) {
  #contact .footer-status {
    font-size: 13px !important;
    letter-spacing: 0.5em !important;
  }
  #contact .footer-label {
    font-size: 12px !important;
    opacity: 0.7 !important;
  }
  #contact .footer-credits {
    font-size: 12px !important;
    letter-spacing: 0.2em !important;
  }
}

/* DESKTOP OPTIMIZATION */
@media (min-width: 1280px) {
  #contact .footer-status {
    font-size: 15px !important;
  }
  #contact .footer-label {
    font-size: 13px !important;
  }
  #contact .footer-credits {
    font-size: 13px !important;
  }
}

/* MOBILE FIX (Avoid layout break on thin phones like Z Fold) */
@media (max-width: 400px) {
  #contact h2 {
    font-size: 1.6rem !important; /* Forces the email to stay within bounds */
  }
  #contact .grid {
    grid-template-columns: repeat(2, 1fr) !important; /* Keeps 2 columns on tiny screens */
  }
}