/* ==== GLOBAL THEME VARS & FONTS ==== */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

@font-face {
    font-family: 'bender';
    src: url('../fonts/JetBrainsMono-Italic[wght].ttf') format('ttf'),
      url('../fonts/JetBrainsMono[wght].ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-pixel: 'Press Start 2P', 'VT323', monospace;
    --font-digital: 'VT323', 'bender', monospace;
    --font-body: 'bender', 'VT323', sans-serif;

    --color-bg-dark: #121212;
    --color-bg-element: rgba(30, 30, 30, 0.8);
    --color-grid-line: rgba(218, 2, 73, 0.08); 
    
    --color-text-primary: #F5F5F5;
    --color-text-secondary: var(--color-text-primary);
    --color-text-dim: #d8d8d8;

    --color-neon-red: #FF3131;
    --color-neon-red-glow: rgba(218, 2, 73, 0.3);
    --color-neon-green: #00c70a;
    --color-neon-green-glow: rgba(57, 207, 89, 0.6);
    --color-neon-pink: #ff89c0;
    --color-neon-pink-glow: rgba(255, 137, 192, 0.5);
    
    --color-accent: var(--color-neon-red);
    /* Removed --color-accent-glow-strong as it was self-referential and not used optimally */

    --card-border-radius: 10px;
    --section-padding: 60px 20px;

    --grid-bg-image: linear-gradient(var(--color-grid-line) 1px, transparent 1px),
                     linear-gradient(90deg, var(--color-grid-line) 1px, transparent 1px);
    --grid-bg-size: 35px 35px; /* Adjusted grid size for better look based on example */
}


html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  
    background-color: var(--color-bg-dark);
    background-image: var(--grid-bg-image);
    background-size: var(--grid-bg-size);
    background-attachment: fixed;
  
    color: var(--color-text-primary);
  
    scrollbar-width: thin;
    scrollbar-color: var(--color-neon-red) var(--color-bg-dark);
    -ms-overflow-style: none; 
}
body::-webkit-scrollbar {
    width: 8px;
}
body::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}
body::-webkit-scrollbar-thumb {
    background-color: var(--color-accent);
    border-radius: 10px;
    border: 2px solid var(--color-bg-dark);
}

html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* ///////////////
    GENERAL SECTION STYLING
/////////////// */
section {
    padding: var(--section-padding);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.section-header {
    font-family: var(--font-pixel);
    font-size: 2.5rem;
    color: var(--color-neon-red);
    text-shadow: 0 0 4px var(--color-neon-red-glow), 0 0 8px var(--color-neon-red-glow);
    margin-bottom: 40px;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    padding-bottom: 15px;
    line-height: 1.3;
}
.section-header::after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    background-color: var(--color-neon-red);
    box-shadow: 0 0 5px var(--color-neon-red-glow);
    margin: 10px auto 0;
    border-radius: 1px;
}

/* ==========================================================================
   SKILLS SECTION - CARD-BASED LAYOUT (like original "Technology Arsenal" image)
   ========================================================================== */

.tech-arsenal-section { 
    padding: var(--section-padding);
}

/* The h1 in skills section uses .section-header which is already defined globally:
   <h1 class="section-header">Skills</h1> 
   This will give it the pixel font, neon green color, and underline.
*/

.tech-arsenal-subtitle { /* Subtitle below "Skills" header */
    font-family: var(--font-digital);
    font-size: 1.5rem;
    color: var(--color-text-secondary);
    margin-bottom: 50px; /* Space before cards */
    text-align: center;
}

#skills-container.tech-grid-container { /* Container for the skill cards */
    display: flex;
    flex-wrap: wrap; /* Allow cards to wrap to the next line */
    justify-content: center; /* Center the cards horizontally */
    gap: 30px; /* Space between cards */
    max-width: 1200px; 
    margin: 0 auto; /* Center the container */
}

.tech-card { /* Styling for each skill card */
    background-color: var(--color-bg-element); 
    border: 1px solid transparent; 
    border-radius: var(--card-border-radius);
    padding: 25px 20px;
    width: 180px; 
    min-height: 200px; 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; 
    text-align: center;
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
    position: relative; 
}

.tech-card:hover {
    transform: translateY(-7px) scale(1.05);
}

/* Glow Effects for Cards - using box-shadow and border */
.tech-card.glow-blue {
    border-color: rgba(0, 120, 255, 0.4); 
    box-shadow: 0 0 8px var(--color-neon-green-glow), 
                0 0 15px var(--color-neon-green-glow),
                inset 0 0 5px rgba(0, 191, 255, 0.2);
}
.tech-card.glow-blue:hover {
    border-color: var(--color-neon-green);
    box-shadow: 0 0 12px var(--color-neon-green-glow),
                0 0 25px var(--color-neon-green-glow),
                inset 0 0 8px rgba(0, 191, 255, 0.4);
}

.tech-card.glow-pink {
    border-color: rgba(255, 20, 147, 0.4);
    box-shadow: 0 0 8px var(--color-neon-pink-glow), 
                0 0 15px var(--color-neon-pink-glow),
                inset 0 0 5px rgba(255, 20, 147, 0.2);
}
.tech-card.glow-pink:hover {
    border-color: var(--color-neon-pink);
    box-shadow: 0 0 12px var(--color-neon-pink-glow),
                0 0 25px var(--color-neon-pink-glow),
                inset 0 0 8px rgba(255, 20, 147, 0.4);
}

.tech-card.glow-green {
    border-color: rgba(0, 255, 155, 0.4);
    box-shadow: 0 0 8px var(--color-neon-red-glow), 
                0 0 15px var(--color-neon-red-glow),
                inset 0 0 5px rgba(0, 255, 155, 0.2);
}
.tech-card.glow-green:hover {
    border-color: var(--color-neon-red);
    box-shadow: 0 0 12px var(--color-neon-red-glow),
                0 0 25px var(--color-neon-red-glow),
                inset 0 0 8px rgba(0, 255, 155, 0.4);
}


.tech-icon-placeholder, .tech-card img.tech-card-icon { 
    font-size: 3rem; 
    width: 60px; 
    height: 60px; 
    margin-bottom: 15px; 
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-primary); 
}
.tech-card img.tech-card-icon { 
    object-fit: contain;
}


.tech-card h3 { 
    font-family: var(--font-digital);
    font-size: 1.75rem; 
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: normal;
    letter-spacing: 0.5px;
    color: var(--color-text-primary); 
}
.tech-card.glow-blue h3 { color: var(--color-neon-green); }
.tech-card.glow-pink h3 { color: var(--color-neon-pink); }
.tech-card.glow-green h3 { color: var(--color-neon-red); }


.tech-card p { 
    font-family: var(--font-body);
    font-size: 1.2rem; 
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-top: 0;
}

/* ==========================================================================
   END OF SKILLS / TECHNOLOGY ARSENAL REVISIONS
   The rest of the CSS (Navbar, Hero, About, Experience, Projects, Footer, Media Queries)
   would remain the same as in the previous full reskin.
   ========================================================================== */


/* ///////////////
      NAVBAR (No changes from previous full reskin)
/////////////// */
#navbar {
    position: sticky; 
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: rgba(35, 10, 10, 0.85);
    backdrop-filter: blur(5px);
    border-bottom: 1px solid rgba(0, 255, 155, 0.2);
}
  
.headerDiv {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 25px;
    margin: 0;
    max-height: none;
}
  
.headerDiv h1 {
    font-family: var(--font-pixel);
    font-size: 1.5rem;
    color: var(--color-neon-red);
    text-shadow: 0 0 5px var(--color-neon-red-glow);
    user-select: none;
    margin: 0;
    padding: 0;
}
  
.headerBtns a {
    font-family: var(--font-digital);
    text-decoration: none;
    font-size: 1.4rem;
    color: var(--color-text-secondary);
    padding-left: 20px;
    transition: color 0.3s ease, text-shadow 0.3s ease;
    text-transform: uppercase;
}
  
.headerBtns a:hover, .headerBtns a.active-link {
    color: var(--color-neon-red);
    text-shadow: 0 0 5px var(--color-neon-red-glow);
}

.hamb-ico { display: none; background: transparent; border: none; cursor: pointer; }
.hamb-ico img { max-width: 30px; filter: brightness(0) invert(1) opacity(0.8); }
.hamb-ico:hover img { filter: brightness(0) invert(1) opacity(1) drop-shadow(0 0 3px var(--color-neon-red)); }

#headerDropdown {
    position: absolute;
    width: 100%;
    background-color: rgba(35, 10, 10, 0.85);
    backdrop-filter: blur(5px);
    z-index: -1; 
    top: -400px;
    left: 0;
    transition: top 0.35s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid rgba(0, 255, 155, 0.2);
}
#headerDropdown a {
    font-family: var(--font-digital);
    display: block; 
    padding: 12px 20px; 
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 1.25rem; 
    width: 100%; 
    text-align: center;
    text-transform: uppercase;
    transition: color 0.3s ease, background-color 0.3s ease;
}
#headerDropdown a:hover {
    color: var(--color-neon-red);
    background-color: rgba(0, 255, 155, 0.1);
}

/* ///////////////
      HOME (HERO SECTION) (No changes from previous full reskin)
/////////////// */
.homeTitle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh; /* Base height */
    padding: 20px;
    box-sizing: border-box;
    text-align: center; /* Ensure all content within is centered by default */
}
  
.homeTitle h1#headerContent-container {
    user-select: none;
    font-family: var(--font-pixel);
    font-size: clamp(2.5rem, 10vw, 6rem); 
    margin: 0 0 10px 0; /* Reduced bottom margin slightly */
    padding: 0;
    color: var(--color-neon-red);
    text-shadow: 0 0 4px var(--color-neon-red-glow), 0 0 8px var(--color-neon-red-glow), 0 0 15px rgba(218, 2, 73, 0.15);
    line-height: 1.1;
}
.blinkCursor {
    color: var(--color-neon-red);
    text-shadow: 0 0 5px var(--color-neon-red);
    animation: blinkCursor 0.7s linear infinite;
    animation-play-state: paused;
}
@keyframes blinkCursor { 50% { opacity: 0; } }
  
.homeTitle h2#dev-header {
    user-select: none;
    font-family: var(--font-digital);
    font-size: clamp(1.2rem, 5vw, 2.5rem); 
    margin: 0 0 30px 0; /* Reduced bottom margin */
    padding: 0;
    color: var(--color-neon-red); 
    text-shadow: 0 0 3px var(--color-neon-red-glow), 0 0 6px var(--color-neon-red-glow);
}
  
.homeTitle a[download] {
    display: inline-block;
}
.homeTitle button {
    font-family: var(--font-digital);
    font-size: clamp(1rem, 3vw, 1.5rem); 
    font-weight: normal;
    text-transform: uppercase;
    /* MODIFIED: Button color, border, shadow to red */
    color: var(--color-neon-red); 
    background-color: transparent;
    padding: 12px 25px;
    border: 2px solid var(--color-neon-red); 
    border-radius: var(--card-border-radius);
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    box-shadow: 0 0 5px var(--color-neon-red-glow), inset 0 0 3px rgba(255, 49, 49, 0.3); 
}
.homeTitle button:hover {
    background-color: rgba(255, 49, 49, 0.15); 
    color: #fff; /* Keep text white on hover */
    box-shadow: 0 0 10px var(--color-neon-red-glow), 0 0 15px var(--color-neon-red-glow), inset 0 0 5px rgba(255, 49, 49, 0.5);
    transform: translateY(-2px);
}
.homeTitle button:active {
    transform: translateY(0px) scale(0.98);
    box-shadow: 0 0 3px var(--color-neon-pink-glow), inset 0 0 2px rgba(255,20,147,0.2);
}
  
/* ///////////////
    ABOUT ME SECTION (No changes from previous full reskin)
/////////////// */
.about-section {
    /* Grid background from body */
    position: relative; 
    /* The ::before pseudo-element for a large background image is removed 
       as we are now placing the image directly in the content. */
}

/* .aboutHeader is covered by .section-header */

.aboutContent { /* This is the main card-like container for this section */
    display: flex; /* Enable flexbox for side-by-side layout */
    flex-direction: row; /* Image and text side-by-side */
    align-items: center; /* Vertically align items in the center */
    gap: 40px; /* Space between image and text block */
    max-width: 1000px; /* Adjust max-width as needed */
    margin: 0 auto;
    background-color: var(--color-bg-element);
    padding: 30px 40px; /* Padding inside the card */
    border-radius: var(--card-border-radius);
    border: 1px solid var(--color-neon-red); 
    box-shadow: 0 0 10px var(--color-neon-red-glow), 
                inset 0 0 8px rgba(255, 49, 49, 0.15); 
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out; 
}

.aboutContent:hover {
    transform: translateY(-7px) scale(1.015); /* Adjusted scale for a larger element */
    box-shadow: 0 0 15px var(--color-neon-red-glow), /* Intensified outer glow */
                0 0 30px var(--color-neon-red-glow),
                inset 0 0 10px rgba(255, 49, 49, 0.25); /* Intensified inner glow */
}

.about-image-container {
    flex-shrink: 0; /* Prevent image container from shrinking */
}

.profile-photo {
    width: 300px; /* Adjust size of the circular photo */
    height: 300px;
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover; /* Ensures the image covers the circle without distortion */
    object-position: center 25%;
    border: 3px solid var(--color-neon-red); /* Neon blue circular border */
    box-shadow: 0 0 10px var(--color-neon-red-glow); /* Glow around the circle */
    background-color: var(--color-bg-dark); /* Fallback if image is transparent */
}

.aboutContent main { /* Text content block */
    flex: 1; /* Allow text block to take remaining space */
    text-align: justify; 
}

.aboutContent h2 {
    font-family: var(--font-digital);
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 20px; /* Increased margin */
    color: var(--color-neon-red); /* Matching the border/glow */
    text-shadow: 0 0 3px var(--color-neon-red-glow);
}

.aboutContent p {
    font-family: var(--font-body);
    font-size: 1.3rem; /* Slightly smaller for balance */
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin-bottom: 1.2em;
    text-indent: 0; /* Remove text-indent if desired for this layout */
}

/* ///////////////
  EXPERIENCE AND EDUCATION (No changes from previous full reskin)
/////////////// */

#experience-section {
    /* ... your existing #experience-section styles ... */
    position: relative; 
    overflow: hidden;   
}

.tabs {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(255, 49, 49, 0.2);
  padding-left: 50px;  /* Example: Adds 50px space on the left before border starts */
  padding-right: 50px; /* Example: Adds 50px space on the right before border ends */
  /* The line will now be (width of buttons + 100px) long */
  /* Adjust 50px to your desired extension length */

  width: fit-content; /* Makes the .tabs container only as wide as its content + padding */
  margin-left: auto;   /* Centers the fit-content block */
  margin-right: auto;  /* Centers the fit-content block */
  
  padding-bottom: 5px;  /* Optional: Space between buttons and the line */
}
.tab-button {
  font-family: var(--font-digital);
  font-size: 1.5rem;
  font-weight: normal;
  background-color: transparent;
  color: var(--color-text-secondary);
  border: none;
  border-bottom: 3px solid transparent;
  padding: 10px 20px;
  cursor: pointer;
  text-align: center;
  transition: color 0.3s ease, border-bottom-color 0.3s ease, text-shadow 0.3s ease;
  margin: 0 5px;
  text-transform: uppercase;
}
.tab-button.active {
  color: var(--color-neon-red);
  border-bottom-color: var(--color-neon-red);
  text-shadow: 0 0 3px var(--color-neon-red-glow);
}
.tab-button:not(.active):hover {
  color: var(--color-text-primary);
  border-bottom-color: rgba(255, 49, 49, 0.5); 
}

.tab-content-wrapper {
    position: relative; /* Establishes positioning context for absolute children */
    min-height: 375px;  /* Adjust this based on your tallest tab content. 
                           This prevents the section from collapsing or jumping in height.
                           Alternatively, JS can be used to set this dynamically. */
    max-width: 750px;   /* Or your preferred width for the content area */
    margin: 0 auto 2rem auto; /* Center the wrapper */
}

.tab-content {
  position: absolute; /* Position all tab contents in the same spot within the wrapper */
  top: 0;
  left: 0;
  width: 100%; /* Take full width of the wrapper */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */

  opacity: 0; 
  visibility: hidden; 
  transform: translateY(20px); /* Or any other transform for entry animation */
  transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out, visibility 0s 0.4s, box-shadow 0.25s ease-out, border-color 0.25s ease-out;
  
  /* Common styling for the content box itself (padding, background, border, etc.) */
  /* max-width and margin are now on the wrapper */
  background: var(--color-bg-element);
  padding: 25px 30px;
  border-radius: var(--card-border-radius);
  border: 1px solid rgba(255, 49, 49, 0.2); 
  box-shadow: 0 0 10px rgba(255, 49, 49, 0.1); 
  text-align: left;
}

.tab-content.active:hover {
    transform: translateY(-5px) scale(1.01); /* Subtle lift and scale */
    border-color: var(--color-neon-red); /* Make border solid red */
    box-shadow: 0 0 15px var(--color-neon-red-glow), /* Intensified outer glow */
                0 0 30px var(--color-neon-red-glow),
                inset 0 0 10px rgba(255, 49, 49, 0.25); /* Intensified inner glow */
}

.tab-content.active {
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0); 
  transition-delay: 0s;
  z-index: 1; /* Ensure the active tab is visually on top if there's any overlap during transition */
  /* position: absolute; is already set */
}

.tab-content h3 {
  font-family: var(--font-digital);
  font-size: 2rem;
  color: var(--color-neon-red);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 49, 49, 0.2); 
}
.tab-content p {
  font-family: var(--font-body);
  font-size: 1.3rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: 0.5em;
}
.tab-content p strong { color: var(--color-text-primary); }
.tab-content p i { color: var(--color-text-dim); }

.tab-content ul { list-style-type: none; padding-left: 0; }
.tab-content ul li {
  font-family: var(--font-body);
  padding-left: 20px;
  position: relative;
  margin-bottom: 8px;
  color: var(--color-text-secondary);
  font-size: 1.2rem;
}
.tab-content ul li::before {
  content: "»";
  position: absolute;
  left: 0;
  color: var(--color-neon-red);
  font-weight: bold;
}

/* ///////////////
    PROJECTS SECTION (No changes from previous full reskin)
/////////////// */
#project-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; 
    padding: 0 10px;
    max-width: 1250px;
    margin: 0 auto;
}
.project-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    background-color: var(--color-bg-element);
    padding: 20px;
    border-radius: var(--card-border-radius);
    border: 1px solid transparent;
    text-align: left;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    flex-basis: calc(33.333% - 27px);
    min-width: 280px;
    min-height: 330px;
    box-shadow: 0 0 7px rgba(0, 191, 255, 0.2), inset 0 0 3px rgba(0,191,255,0.1);
    border-color: rgba(0,191,255,0.2);
}
.project-tile:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 0 12px var(--color-neon-green-glow), 0 0 20px var(--color-neon-green-glow), inset 0 0 5px rgba(0,191,255,0.3);
    border-color: var(--color-neon-green);
}
.project-tile.glow-p-green:hover {
    box-shadow: 0 0 12px var(--color-neon-red-glow), 0 0 20px var(--color-neon-red-glow), inset 0 0 5px rgba(0,255,155,0.3);
    border-color: var(--color-neon-red);
}
.project-tile.glow-p-pink:hover {
    box-shadow: 0 0 12px var(--color-neon-pink-glow), 0 0 20px var(--color-neon-pink-glow), inset 0 0 5px rgba(255,20,147,0.3);
    border-color: var(--color-neon-pink);
}

.project-tile h3 {
    font-family: var(--font-digital);
    padding-bottom: 8px;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 2rem; 
    color: var(--color-neon-green);
    font-weight: normal;
    border-bottom: 1px solid rgba(0,191,255,0.2);
}
.project-tile.glow-p-green h3 { color: var(--color-neon-red); border-bottom-color: rgba(0,255,155,0.2); }
.project-tile.glow-p-pink h3 { color: var(--color-neon-pink); border-bottom-color: rgba(255,20,147,0.2); }

.project-tile p {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    font-size: 1.4rem;
    line-height: 1.6;
    margin-bottom: 12px;
}
.project-tile p strong { color: var(--color-text-primary); }

.project-tile ul { list-style: none; padding-left: 0; margin-bottom: 15px; }
.project-tile ul li {
    font-family: var(--font-body);
    padding-left: 18px;
    position: relative;
    margin-bottom: 5px;
    font-size: 1.3rem;
    color: var(--color-text-dim);
}
.project-tile ul li::before {
    content: "»";
    position: absolute;
    left: 0;
    color: var(--color-neon-green);
    font-weight: bold;
}
.project-tile.glow-p-green ul li::before { color: var(--color-neon-red); }
.project-tile.glow-p-pink ul li::before { color: var(--color-neon-pink); }

.project-tile .button-container {
  display: flex;
  gap: 10px; 
  margin-top: auto; 
  justify-content: flex-start;
  padding-top: 10px;
}
.project-tile .button-container a,
.project-tile .button-container .coming-soon {
  font-family: var(--font-digital);
  text-align: center;
  background-color: transparent;
  padding: 8px 15px;
  border-radius: var(--card-border-radius);
  font-weight: normal;
  text-decoration: none;
  color: var(--color-neon-pink);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  font-size: 1.2rem;
  border: 1px solid var(--color-neon-pink);
  box-shadow: 0 0 3px var(--color-neon-pink-glow), inset 0 0 2px rgba(255,20,147,0.2);
}
.project-tile.glow-p-green .button-container a,
.project-tile.glow-p-green .button-container .coming-soon {
    color: var(--color-neon-red);
    border-color: var(--color-neon-red);
    box-shadow: 0 0 3px var(--color-neon-red-glow), inset 0 0 2px rgba(0,255,155,0.2);
}
.project-tile.glow-p-blue .button-container a,
.project-tile.glow-p-blue .button-container .coming-soon {
    color: var(--color-neon-green);
    border-color: var(--color-neon-green);
    box-shadow: 0 0 3px var(--color-neon-green-glow), inset 0 0 2px rgba(0,191,255,0.2);
}

.project-tile .button-container a:hover {
  background-color: rgba(255,20,147,0.15);
  color: #fff;
  box-shadow: 0 0 7px var(--color-neon-pink-glow), inset 0 0 4px rgba(255,20,147,0.4);
  transform: translateY(-1px); 
}
.project-tile.glow-p-green .button-container a:hover {
    background-color: rgba(0,255,155,0.15);
    box-shadow: 0 0 7px var(--color-neon-red-glow), inset 0 0 4px rgba(0,255,155,0.4);
}
.project-tile.glow-p-blue .button-container a:hover {
    background-color: rgba(0,191,255,0.15);
    box-shadow: 0 0 7px var(--color-neon-green-glow), inset 0 0 4px rgba(0,191,255,0.4);
}

.project-tile .coming-soon {
  color: var(--color-text-dim) !important; 
  border-style: dashed !important;
  border-color: var(--color-text-dim) !important;
  box-shadow: none !important;
  cursor: default;
}
.project-tile .coming-soon:hover {
    background-color: transparent !important;
    transform: none !important;
}
  
/* ///////////////
    FOOTER (No changes from previous full reskin)
/////////////// */
footer {
    background-color: rgba(35, 10, 10, 0.85);
    border-top: 1px solid rgba(0, 255, 155, 0.15);
    padding: 30px 20px;
    text-align: center;
}

.footerContent p {
    font-family: var(--font-digital);
    margin: 15px 0 0 0;
    color: var(--color-text-dim);
    font-size: 1.25rem;
}
.profileLinks {
    display: flex;
    justify-content: center;
    gap: 25px;
}
.profileLinks a img {
    width: 30px;
    height: 30px;
    filter: grayscale(0%) brightness(1) drop-shadow(0 0 4px var(--color-neon-red));
    transition: filter 0.3s ease, transform 0.3s ease;
}
.profileLinks a:hover img {
    filter: grayscale(0%) brightness(1) drop-shadow(0 0 4px var(--color-neon-red));
    transform: scale(1.15) translateY(-2px);
}
  
/* ///////////////
  MEDIA QUERIES (No changes from previous full reskin, but ensure they work with the new skills list layout)
/////////////// */

/* Larger Desktops */
@media (min-width: 1400px) {
    .section-header { font-size: 2.8rem; }
    .homeTitle h1#headerContent-container { font-size: 7rem; }
    .homeTitle h2#dev-header { font-size: 3rem; }
    /* .tech-card { width: 180px; min-height: 200px; } -- Not applicable for list style */
    #project-container { max-width: 1400px; }
}

/* Standard Desktops & Laptops */
@media (max-width: 1300px) {
  .aboutContent main { padding-left: 0; max-width: 100%; }
  .about-section::before { background-position: center; opacity: 0.05; }
}

/* Tablets & Smaller Laptops */
@media (max-width: 992px) {
    .section-header { font-size: 2.2rem; }
    .homeTitle h1#headerContent-container { font-size: 8vw; }
    .homeTitle h2#dev-header { font-size: 4vw; }
    
    /* .tech-card { width: calc(33.333% - 25px); min-height: 180px; } -- Not applicable for list style */
    #skills-container.tech-grid-container { gap: 30px; } /* Adjust gap for list */
    .tech-card { /* This rule is for the card style, not the list style */
        width: calc(33.333% - 25px); 
        min-height: 190px;
    }

    .project-tile { flex-basis: calc(50% - 25px); min-height: auto; }

    .aboutContent { padding: 25px; }
    .aboutContent h2 { font-size: 1.6rem; }
    .aboutContent p { font-size: 0.95rem; }
    #experience-content, #education-content { padding: 20px; }
    .tab-content h3 { font-size: 1.4rem; }
    .tab-content p { font-size: 0.9rem; }
}

/* Mobile Landscape & Larger Phones */
@media (max-width: 768px) {
  .headerBtns { display: none; }
  .hamb-ico { display: inline-block; }
  #navbar { padding: 12px 20px; } /* This might need removal if .headerDiv padding is 0 */
  .headerDiv { padding: 15px 20px; max-height: initial; } /* Re-adjust for hamburger */


  .section-header { font-size: 2rem; }
  .tech-arsenal-subtitle, .aboutContent p, .tab-content p { font-size: 1.35rem; }
  
    .homeTitle {
        height: auto; /* Let content define height more */
        min-height: 70vh; /* Still give it substantial height */
        padding-top: 15vh; /* Push content down a bit from navbar */
        padding-bottom: 15vh;
    }
    .homeTitle h1#headerContent-container {
        font-size: clamp(1.8rem, 10vw, 3.5rem); /* More aggressive scaling for mobile */
        line-height: 1.2;
    }
    .homeTitle h2#dev-header {
        font-size: clamp(1rem, 6vw, 1.8rem); /* More aggressive scaling */
        margin-bottom: 35px;
    }
    .homeTitle button {
        font-size: clamp(0.9rem, 4vw, 1.2rem); /* Adjust button font size */
        padding: 10px 20px;
    }

  .about-section::before { display: none; }
    .aboutContent {
        flex-direction: column; /* Stack image and text on smaller screens */
        padding: 25px;
        gap: 30px;
    }
    .profile-photo {
        width: 150px;
        height: 150px;
        margin-bottom: 0; /* Remove bottom margin if stacked */
    }
    .aboutContent main {
        text-align: center; /* Center text when stacked */
    }
    .aboutContent h2 {
        font-size: 1.6rem;
    }
    .aboutContent p {
        font-size: 0.9rem;
        text-align: justify; /* Justify paragraphs on mobile */
    }

  .tabs { margin-bottom: 20px; }
  .tab-button{ font-size: 1.5rem; padding: 8px 15px; }
  .tab-content h3 { font-size: 1.75rem; }
  .tab-content p, .tab-content ul li { font-size: 1.25rem; }
  
  /* Tech card (list item) responsive styles */
  #skills-container.tech-grid-container {
      align-items: center; /* Center the list items if they become narrow */
      gap: 25px;
  }
  .tech-card { /* This rule is for the card style, not the list style */
      width: calc(50% - 20px); 
      min-height: 180px;
  }
  .tech-icon-placeholder, .tech-card img.tech-card-icon { /* This rule is for the card style */
      width: 50px; height: 50px; font-size: 2.5rem;
  }
  .tech-card h3 { font-size: 1.75rem; } /* This rule is for the card style */
  .tech-card p { font-size: 1.25rem; } /* This rule is for the card style */


  #project-container { gap: 20px; padding: 0 5px; }
  .project-tile { flex-basis: calc(100% - 10px); padding: 15px; }
  .project-tile h3 { font-size: 1.75rem; }
  .project-tile p, .project-tile ul li { font-size: 1.1rem; }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    :root { --grid-bg-size: 25px 25px; }
    section { padding: 40px 15px; }
    .section-header { font-size: 1.6rem; padding-bottom: 10px; }
    .section-header::after { width: 60px; }

    .homeTitle {
        min-height: 60vh;
        padding-top: 10vh;
        padding-bottom: 10vh;
    }
    .homeTitle h1#headerContent-container {
        font-size: clamp(1.4rem, 9.25vw, 2.75rem); /* Even more responsive for small screens */
    }
    .homeTitle h2#dev-header {
        font-size: clamp(0.9rem, 7vw, 1.5rem);
    }
    .homeTitle button {
        font-size: clamp(0.8rem, 3.5vw, 1.1rem);
    }
    
    .profile-photo {
        width: 120px;
        height: 120px;
    }
    .aboutContent h2 {
        font-size: 1.4rem;
    }
    .aboutContent p {
        font-size: 0.85rem;
    }

    .tab-button { font-size: 1.2rem; padding: 8px 10px; margin: 0 2px; }
    .tab-content h3 { font-size: 1.5rem; }
    .tab-content p, .tab-content ul li { font-size: 1rem; }
    .tab-content-wrapper {
        min-height: 525px;
    }
    
    .tech-arsenal-subtitle { font-size: 1.25rem; margin-bottom: 30px; } /* Further reduced */
     #skills-container.tech-grid-container { gap: 20px; } /* General for container */
    .tech-card { /* This rule is for the card style, not the list style */
        width: calc(100% - 20px); 
        min-height: 170px;
    }
    .tech-icon-placeholder, .tech-card img.tech-card-icon { /* This rule is for the card style */
        width: 45px; height: 45px; font-size: 2.2rem;
    }
    .tech-card h3 { font-size: 1.75rem; } /* This rule is for the card style */
    .tech-card p { font-size: 1.25rem; } /* This rule is for the card style */

    .project-tile h3 { font-size: 1.75em; }
    .project-tile p, .project-tile ul li { font-size: 1.1rem; }
    .project-tile .button-container a, .project-tile .button-container .coming-soon { font-size: 1.1rem; padding: 7px 12px; }
    .footerDiv { padding: 20px 15px; }
    .footerContent p { font-size: 1.1rem; }
    .profileLinks img { width: 26px; height: 26px; }
    .profileLinks { gap: 20px; }
}