/* ------------------------------ */
/*        THEME VARIABLES         */
/* ------------------------------ */
:root {
  --scrollbar-width: 0px;
  --bg-color: #f4f7f8;
  --text-color: #1a1a1a;
  --accent-color: #61dbfb;
  --highlight-color: #007acc;
  --section-bg: #ffffff;
  --nav-height: 64px;
  --nav-bg: var(--section-bg);
  --nav-shadow: rgba(0, 0, 0, 0.05);
  --overlay-bg: rgba(18, 24, 27, 0.9);
  --blur: blur(10px);
  --icon-color: #1a1a1a;
  --scroll-thumb: linear-gradient(135deg, #61dbfb, #ff00cc, #00ff99);
  --scroll-track: #1a1a1a;
  --scroll-border: #1a1a1a;
}

[data-theme="dark"] {
  --bg-color: #12181b;
  --text-color: #e4e8ea;
  --accent-color: #61dbfb;
  --highlight-color: #00aaff;
  --section-bg: #1b1f23;
  --nav-shadow: rgba(255, 255, 255, 0.05);
  --overlay-bg: rgba(0, 0, 0, 0.85);
  --icon-color: #e4e8ea;
  --scroll-thumb: linear-gradient(135deg, #007acc, #ffa07a, #00ffcc);
  --scroll-track: #eee;
  --scroll-border: #eee;
}

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

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-color);
  line-height: 1.6;
  transition: background-color 0.3s ease, color 0.3s ease;
  padding-top: var(--nav-height);
}

body.no-scroll {
  overflow: hidden;
  position: fixed;
  width: 100%;
}


.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (max-width:414px) {

  .container {
    width: 100%;
  }

}

html {
  scroll-padding-top: 80px;
  /* adjust based on your header height */
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}


html::-webkit-scrollbar-track {
  background: var(--scroll-track);
}

html::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  background-size: 300% 300%;
  animation: funky-scroll 4s ease infinite;
  border-radius: 10px;
  border: 2px solid var(--scroll-border);
}

@keyframes funky-scroll {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Then adjust duration if needed */
html::-webkit-scrollbar-thumb {
  animation: funky-scroll 6s ease infinite;
  /* Was 4s, try 6s for chill vibes */
}


/* ------------------------------ */
/*         HEADER STYLING         */
/* ------------------------------ */
.site-header {
  background-color: var(--nav-bg);
  height: var(--nav-height);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;
  box-shadow: 0 2px 4px var(--nav-shadow);
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  width: 100%;
}

.logo {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--accent-color);
  padding-left: 0.25rem;
}

.main-nav {
  margin-left: auto;
  width: fit-content;
}


.main-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.main-nav a,
#theme-toggle {
  position: relative;
  text-decoration: none;
  color: var(--text-color);
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: color 0.3s;
  padding: 0.5rem;
}

.main-nav a:hover,
#theme-toggle:hover {
  color: var(--highlight-color);
}

#theme-toggle {
  font-size: 1.2rem;
  line-height: 1;
}

/* ------------------------------ */
/*     MOBILE NAV TOGGLE ICON     */
/* ------------------------------ */
.mobile-nav-toggle {
  display: none;
  width: 30px;
  height: 22px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: 0.25rem;
  z-index: 1001;
  color: var(--icon-color);
}

.mobile-nav-toggle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 3px;
  background-color: currentColor;
  transition: background 0.3s ease;
  transform: translate(-50%, -50%);
}

.mobile-nav-toggle span::before,
.mobile-nav-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: currentColor;
  transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}

.mobile-nav-toggle span::before {
  top: -10px;
}

.mobile-nav-toggle span::after {
  bottom: -10px;
}

.mobile-nav-toggle.open span {
  background: transparent;
}

.mobile-nav-toggle.open span::before {
  transform: rotate(45deg);
  top: 0;
}

.mobile-nav-toggle.open span::after {
  transform: rotate(-45deg);
  bottom: 0;
}

/* ------------------------------ */
/*         OVERLAY MENU           */
/* ------------------------------ */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  overflow: hidden;
  background: var(--overlay-bg);
  backdrop-filter: var(--blur);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: height 0.4s ease, opacity 0.4s ease;
}

.mobile-nav.open {
  height: 100vh;
  opacity: 1;
  pointer-events: all;
}

.mobile-nav.open a {
  opacity: 1 !important;
  pointer-events: auto;
  transform: none !important;
}

.mobile-nav a {
  color: var(--text-color);
  font-size: 1.5rem;
  padding: 1rem;
  text-decoration: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-nav.open a {
  opacity: 1;
  transform: translateY(0);
}

.mobile-nav a:hover {
  color: var(--accent-color);
}

/* ------------------------------ */
/*       RESPONSIVE HEADER        */
/* ------------------------------ */
@media (max-width: 895px) {
  .main-nav {
    display: none;
  }

  .mobile-nav-toggle {
    display: block;
  }

  .site-header .container {
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
  }

  .logo {
    padding-left: 0;
  }
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
@media (max-width: 895px) and (min-width: 415px) {
  .mobile-nav {
    overflow-y: auto;
    padding-top:18em;
    padding-bottom:5em;
  }
}



/* ------------------------------ */
/*         SECTION STYLING        */
/* ------------------------------ */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Tag filter buttons */
.filter-btn {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  background: none;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Individual tag colors */
.filter-btn[data-filter="all"] {
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
}

.filter-btn[data-filter="tag-dev"] {
  border: 1px solid #007acc;
  color: #007acc;
}

.filter-btn[data-filter="tag-ui"] {
  border: 1px solid #d473d4;
  color: #d473d4;
}

.filter-btn[data-filter="tag-data"] {
  border: 1px solid #ffa600;
  color: #ffa600;
}

.filter-btn[data-filter="tag-tools"] {
  border: 1px solid #3aa76d;
  color: #3aa76d;
}

/* Active/hover states */
.filter-btn.active,
.filter-btn:hover {
  color: #fff;
}

.filter-btn[data-filter="all"].active,
.filter-btn[data-filter="all"]:hover {
  background: var(--accent-color);
  color: #000;
}

.filter-btn[data-filter="tag-dev"].active,
.filter-btn[data-filter="tag-dev"]:hover {
  background: #007acc;
}

.filter-btn[data-filter="tag-ui"].active,
.filter-btn[data-filter="tag-ui"]:hover {
  background: #d473d4;
}

.filter-btn[data-filter="tag-data"].active,
.filter-btn[data-filter="tag-data"]:hover {
  background: #ffa600;
}

.filter-btn[data-filter="tag-tools"].active,
.filter-btn[data-filter="tag-tools"]:hover {
  background: #3aa76d;
}

.filter-btn[data-filter="tag-branding"] {
  border: 1px solid #e26d5c;
  color: #e26d5c;
}

.filter-btn[data-filter="tag-logo"] {
  border: 1px solid #7b61ff;
  color: #7b61ff;
}

.filter-btn[data-filter="tag-print"] {
  border: 1px solid #92b25a;
  color: #92b25a;
}

.filter-btn[data-filter="tag-illustration"] {
  border: 1px solid #ffae42;
  color: #ffae42;
}

/* Active/hover styles */
.filter-btn[data-filter="tag-branding"].active,
.filter-btn[data-filter="tag-branding"]:hover {
  background: #e26d5c;
  color: #fff;
}

.filter-btn[data-filter="tag-logo"].active,
.filter-btn[data-filter="tag-logo"]:hover {
  background: #7b61ff;
  color: #fff;
}

.filter-btn[data-filter="tag-print"].active,
.filter-btn[data-filter="tag-print"]:hover {
  background: #92b25a;
  color: #fff;
}

.filter-btn[data-filter="tag-illustration"].active,
.filter-btn[data-filter="tag-illustration"]:hover {
  background: #ffae42;
  color: #fff;
}


/* Technology Projects Filter Buttons */
.filter-btn[data-filter="all"] {
  border: 1px solid var(--accent-color);
  color: var(--accent-color);
}

.filter-btn[data-filter="tag-programming"] {
  border: 1px solid #5c6bc0;
  color: #5c6bc0;
}

.filter-btn[data-filter="tag-3d-modeling"] {
  border: 1px solid #00897b;
  color: #00897b;
}

.filter-btn[data-filter="tag-project-development"] {
  border: 1px solid #42a5f5;
  color: #42a5f5;
}

/* Active/hover styles */
.filter-btn[data-filter="tag-programming"].active,
.filter-btn[data-filter="tag-programming"]:hover {
  background: #5c6bc0;
  color: #fff;
}

.filter-btn[data-filter="tag-3d-modeling"].active,
.filter-btn[data-filter="tag-3d-modeling"]:hover {
  background: #00897b;
  color: #fff;
}

.filter-btn[data-filter="tag-project-development"].active,
.filter-btn[data-filter="tag-project-development"]:hover {
  background: #42a5f5;
  color: #fff;
}









/* Education & Training Filter Buttons */
.filter-btn[data-filter="tag-formal"] {
  border: 1px solid #1976d2;
  color: #1976d2;
}

.filter-btn[data-filter="tag-professional"] {
  border: 1px solid #2e7d32;
  color: #2e7d32;
}

.filter-btn[data-filter="tag-online"] {
  border: 1px solid #ff9800;
  color: #ff9800;
}

.filter-btn[data-filter="tag-selftaught"] {
  border: 1px solid #9c27b0;
  color: #9c27b0;
}

.filter-btn[data-filter="tag-formal"].active,
.filter-btn[data-filter="tag-formal"]:hover {
  background: #1976d2;
  color: #fff;
}

.filter-btn[data-filter="tag-professional"].active,
.filter-btn[data-filter="tag-professional"]:hover {
  background: #2e7d32;
  color: #fff;
}

.filter-btn[data-filter="tag-online"].active,
.filter-btn[data-filter="tag-online"]:hover {
  background: #ff9800;
  color: #fff;
}

.filter-btn[data-filter="tag-selftaught"].active,
.filter-btn[data-filter="tag-selftaught"]:hover {
  background: #9c27b0;
  color: #fff;
}


/* ------------------------------ */
/*         CARD STYLING           */
/* ------------------------------ */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  justify-content: center;
  /* NEW: keeps cards centered when there's a gap */
  gap: 2rem;
  padding: 1rem;
}



.card {
  width: 100%;
  /* Full width of its grid column */
  max-width: 500px;
  /* Prevent single card from stretching too wide */
  margin-left: auto;
  margin-right: auto;
  background: color-mix(in srgb, var(--section-bg) 95%, var(--text-color) 5%);
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: fadeInScaleUp 0.4s ease forwards;
}



@keyframes fadeOutScaleDown {
  0% {
    opacity: 1;
    transform: scale(1);
    height: auto;
  }

  100% {
    opacity: 0;
    transform: scale(0.95);
    height: 0;
  }
}

@keyframes fadeInScaleUp {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.card-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
  }
}

.card-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transition: transform 0.3s ease;
  margin: -1em 0 0;

}

.web-glass-bg {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  padding: 0.75rem;
  display: inline-block;
  margin-bottom: 1rem;
  transition: background 0.3s ease;
}

[data-theme="dark"] .web-glass-bg {
  background: rgba(255, 255, 255, 0.05);
}


/* Web Works section image wrapper */
/* Web Works section image wrapper */
#web+.section .web-glass-bg {
  padding: 0.75rem;
  margin-top: 0rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Image inside Web Works cards - increasing size by 10% */
#web+.section .web-glass-bg .card-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  transform: scale(1);
  /* Increase size by 10% */
  transition: transform 0.3s ease;
  /* Smooth transition */
}



#projectOverlay {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);

}

/* WebKit Scrollbar for Project Overlay */
#projectOverlay::-webkit-scrollbar {
  width: 8px;
}

#projectOverlay::-webkit-scrollbar-track {
  background-color: #61dbfb;
  /* fallback solid */
}


#projectOverlay::-webkit-scrollbar-thumb {
  background-color: #61dbfb;
  /* fallback solid */

  background-size: 300% 300%;
  animation: funky-modal-scroll 6s ease infinite;
  border-radius: 10px;
  border: 2px solid var(--scroll-border);
}


/* Scoped animation for modal only */
@keyframes funky-modal-scroll {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}



/* Center the modal content */

/* Ensure the image is centered and constrained */
/* Default modal image style */
#projectOverlay .card-image {
  display: block;
  width: 100%;
  max-width: 350px;
  /* Maximum width on desktop */
  height: auto;
  margin: 1em auto;
  object-fit: contain;
}

/* Optional: For mobile devices, you may want to adjust the max-height */
@media (max-width: 600px) {
  #projectOverlay .card-image {
    max-width: 90%;
    /* Allow slight margin on mobile */
    max-height: 400px;
    /* Lower max-height for smaller screens */
    margin: 2em auto;
  }
}





@media (hover: hover) {
  .card:hover .card-image {
    transform: scale(1.02);
  }
}

/* Web images in the cards */
.card:hover .card-image {
  transform: scale(1.05);
  /* Scale image slightly */
  transition: transform 0.3s ease;
  /* Smooth transition */
}

/* Web Works section image wrapper */
#web+.section .web-glass-bg .card-image {
  transition: transform 0.3s ease;
  /* Smooth transition */
}

#web+.section .card:hover .card-image {
  transform: scale(1.05);
  /* Scale image slightly */
  transition: transform 0.3s ease;
  /* Smooth transition */
}



.card h3 {
  font-size: 1.25rem;
  color: var(--accent-color);
  font-size: 1.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 414px) {
  .card h3 {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: unset;
  }
}


@media (max-width: 360px) {
  .card h3 {
    font-size: 1rem !important;
  }
}

.card p {
  font-size: 0.95rem;
  color: var(--text-color);
  line-height: 1.4;
  text-align: center;
}

[data-theme="dark"] .card {
  background: color-mix(in srgb, var(--section-bg) 80%, #ffffff 20%);
}

/* Gallery styling */








#projectOverlay .gallery {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
}

#projectOverlay .gallery img {
  max-height: 150px;
  object-fit: cover;
  margin: 0 5px;
  border-radius: 5px;
}


#projectOverlay p {
  text-align: justify;
}


@media (max-width:600px) {
  #projectOverlay .gallery img {
    max-height: 150px;
    margin-top: 1.5em;
  }
  #projectOverlay.tech-modal .card-image,
#projectOverlay.gdb-modal .card-image,
#projectOverlay.education-modal .card-image {
  margin: -3em 0 -1em 0;
}
}

/* For Firefox (scrollbar-width and scrollbar-color) */
#projectOverlay .gallery {
  scrollbar-width: thin; /* “auto” or “thin” */
  scrollbar-color: #888 transparent; /* fallback thumb & track colors */
}

/* For WebKit-based browsers (Chrome, Safari, Edge) */
#projectOverlay .gallery::-webkit-scrollbar {
  height: 8px; /* Horizontal bar’s thickness */
  background: transparent; /* or a fallback color */
}

#projectOverlay .gallery::-webkit-scrollbar-track {
  background: transparent; /* or #1a1a1a, etc. */
}



/* Style the technologies */
.tech {
  margin-top: 1em;
}

.technologies {
  font-size: 16px;
  color: #333;
  margin-top: 10px;
}

.technologies strong {
  font-weight: bold;
}

.technologies span {
  display: inline-block;
  background: #f4f4f4;
  padding: 5px 10px;
  margin-right: 5px;
  border-radius: 5px;
}

.technologies span:hover {
  background: #ddd;
}

.technologies p {
  margin: 5px 0;
}

@media (max-width: 600px) {
  .technologies span {
    font-size: 14px;
    margin-right: 8px;
    padding: 3px 6px;
  }
}



.visit-site {
  margin-top: 1.5rem;
  text-align: center;
}

.visit-site a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--bg-color);
  background-color: var(--accent-color);
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  transition: background 0.3s ease, color 0.3s ease;
}

.visit-site a:hover {
  background-color: var(--highlight-color);
  color: var(--bg-color);
}

.visit-site a::before {
  content: "🌐";
  font-size: 1.2rem;
  color: #000;
  /* Force black icon */
}

/* Base modal image size (applies to all) */
/* .gallery-image,
.card-image {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto;
  display: block;
} */


/* .gallery-image,
.card-image {
  width: 100%;
  max-width: 480px; 
  margin: 1rem auto;
  display: block;
} */
/* ------------------------------ */
/*             TAGS               */
/* ------------------------------ */
/* Tag container – ensures tags display in a row and wrap properly */
.tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: 1em;
}


/* Base styling for individual tags */
.tag {
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}


.tag-dev {
  background-color: #007acc;
}

.tag-ui {
  background-color: #d473d4;
}

.tag-data {
  background-color: #ffa600;
}

.tag-tools {
  background-color: #3aa76d;
}

.tag-branding {
  background-color: #e26d5c;
}

.tag-logo {
  background-color: #7b61ff;
}

.tag-print {
  background-color: #92b25a;
}

.tag-illustration {
  background-color: #ffae42;
}

/* ------------------------------ */
/*    Tech Projects   */
/* ------------------------------ */
.tag-programming {
  background-color: #1565c0;
  /* Strong blue */
}

.tag-3d-modeling {
  background-color: #607d8b;
  /* Steel blue */
}

.tag-project-development {
  background-color: #8e24aa;
  /* Purple tone */
}

/* ------------------------------ */
/*  Movie App Technologies Tags   */
/* ------------------------------ */





/* ------------------------------ */
/*    EDUCATION & TRAINING TAGS   */
/* ------------------------------ */
.tag-formal {
  background-color: #1976d2;
}

.tag-professional {
  background-color: #2e7d32;
}

.tag-online {
  background-color: #ff9800;
}

.tag-selftaught {
  background-color: #9c27b0;
}


/* === Modal TECH TAG COLORS === */
.tag-project-development {
  background-color: #5c6bc0;
}

.tag-3d-modeling {
  background-color: #607d8b;
  color: #fff;
}

.tag-programming {
  background-color: #ac4caf;
  color: #fff;
}

/* ------------------------------ */
/*     MISSING TECHNOLOGY TAGS    */
/* ------------------------------ */

.tag-print {
  background-color: #92b25a;
}

.tag-branding {
  background-color: #ec651c;
  color: #fff;
}

/* Additional Technology Tag Colors */
.tag-html5 {
  background-color: #e44d26;
}

.tag-css3 {
  background-color: #264de4;
}

.tag-javascript {
  background-color: #f7df1e;
  color: #000;
}

.tag-responsive-design {
  background-color: #009688;
}

.tag-seo-optimization {
  background-color: #00c853;
}

.tag-client-collaboration {
  background-color: #6d4c41;
  color: #fff;
}

.tag-3d-animation {
  background-color: #7e57c2;
}

.tag-interactive-design {
  background-color: #42a5f5;
}

.tag-css-animation {
  background-color: #ff684d;
  color: #000;
}

.tag-game-logic {
  background-color: #81d4fa;
  color: #000;
}

.tag-local-storage {
  background-color: #a1887f;
  color: #fff;
}

/* Adobe Suite & Motion */
.tag-adobe-after-effects {
  background-color: #9999ff;
  color: #fff;
}

.tag-adobe-premiere-pro {
  background-color: #aa66cc;
  color: #fff;
}

.tag-motion-graphics {
  background-color: #3488ee;
  color: #fff;
}

.tag-multimedia-production {
  background-color: #4db6ac;
  color: #fff;
}

.tag-2d-animation {
  background-color: #ec201c;
  color: #fff;
}

.tag-after-effects {
  background-color: #5c42ef;
  color: #fff;
}

/* AI, Automation & Cloud */
.tag-ai {
  background-color: #ed3d25;
  color: #fff;
}

.tag-audio-video {
  background-color: #1c7aec;
  color: #fff;
}

.tag-automation {
  background-color: #1c5aec;
  color: #fff;
}

.tag-azure {
  background-color: #9c13eb;
  color: #fff;
}

.tag-branching {
  background-color: #13ebb5;
  color: #fff;
}

/* Business, Chat & Data */
.tag-business-analytics {
  background-color: #34eee2;
  color: #fff;
}

.tag-chatgpt {
  background-color: #ee385d;
  color: #fff;
}

.tag-classification {
  background-color: #3da2ef;
  color: #fff;
}

.tag-cloud {
  background-color: #ed2aac;
  color: #fff;
}

.tag-creative-suite {
  background-color: #17ec9a;
  color: #fff;
}

.tag-cybersecurity {
  background-color: #b43def;
  color: #fff;
}

.tag-data-analysis {
  background-color: #922aed;
  color: #fff;
}

.tag-data-ethics {
  background-color: #673def;
  color: #fff;
}

.tag-databases {
  background-color: #2fabee;
  color: #fff;
}

.tag-deep-learning {
  background-color: #ec2d17;
  color: #fff;
}

.tag-devops {
  background-color: #4d21ed;
  color: #fff;
}

.tag-ethics {
  background-color: #34ee72;
  color: #fff;
}

.tag-finance {
  background-color: #ee3875;
  color: #fff;
}

.tag-generative-ai {
  background-color: #ec6517;
  color: #fff;
}

/* Version Control & Development */
.tag-git {
  background-color: #eb2813;
  color: #fff;
}

.tag-github {
  background-color: #ed342a;
  color: #fff;
}

.tag-graphic-design {
  background-color: #179aec;
  color: #fff;
}

.tag-illustrator {
  background-color: #ec1cd7;
  color: #fff;
}

.tag-indesign {
  background-color: #1cecc6;
  color: #fff;
}

.tag-infrastructure {
  background-color: #42efc1;
  color: #fff;
}

.tag-layout {
  background-color: #21eddf;
  color: #fff;
}

.tag-leadership {
  background-color: #ed2ab3;
  color: #fff;
}

.tag-marketing {
  background-color: #9ceb13;
  color: #fff;
}

.tag-merging {
  background-color: #ee2fb8;
  color: #fff;
}

.tag-microsoft-learn {
  background-color: #30ec17;
  color: #fff;
}

.tag-ml {
  background-color: #ef42a1;
  color: #fff;
}

.tag-ml-basics {
  background-color: #1cece2;
  color: #fff;
}

.tag-mobile-dev {
  background-color: #2f38ee;
  color: #fff;
}

.tag-networks {
  background-color: #ec2d17;
  color: #fff;
}

.tag-neural-nets {
  background-color: #42ef90;
  color: #fff;
}

.tag-neural-networks {
  background-color: #21ed83;
  color: #fff;
}

.tag-nlp {
  background-color: #2aedac;
  color: #fff;
}

.tag-openai {
  background-color: #42efcd;
  color: #fff;
}

.tag-photo-editing {
  background-color: #4542ef;
  color: #fff;
}

.tag-photoshop {
  background-color: #ef3dab;
  color: #fff;
}

.tag-productivity {
  background-color: #1cec57;
  color: #fff;
}

.tag-project-management {
  background-color: #4279ef;
  color: #fff;
}

.tag-prompt-engineering {
  background-color: #c42fee;
  color: #fff;
}

.tag-prompting {
  background-color: #13eb5b;
  color: #fff;
}

.tag-quality-assurance {
  background-color: #99ec1c;
  color: #fff;
}

.tag-regression {
  background-color: #ed2a34;
  color: #fff;
}

.tag-software-dev {
  background-color: #ef963d;
  color: #fff;
}

.tag-strategy {
  background-color: #177eec;
  color: #fff;
}

.tag-text-generation {
  background-color: #eb13ae;
  color: #fff;
}

.tag-tooling {
  background-color: #813def;
  color: #fff;
}

.tag-typography {
  background-color: #455a64;
  color: #fff;
}

.tag-ui-design {
  background-color: #386fee;
  color: #fff;
}

.tag-ux-design {
  background-color: #a8ec17;
  color: #fff;
}

.tag-version-control {
  background-color: #2ad0ed;
  color: #fff;
}

.tag-vision {
  background-color: #68ee34;
  color: #fff;
}

.tag-web-design {
  background-color: #8a21ed;
  color: #fff;
}

.tag-web-dev {
  background-color: #1c92ec;
  color: #fff;
}

/* ------------------------------ */
/*   Missing Technology Tag Styles   */
/* ------------------------------ */

/* Web / Utility Projects */
.tag-in-browser-editor {
  background-color: #6c5ce7;
  /* vibrant purple */
  color: #fff;
}

.tag-live-preview {
  background-color: #00b894;
  /* fresh green */
  color: #fff;
}

.tag-minify-libraries {
  background-color: #0984e3;
  /* blue */
  color: #fff;
}

.tag-theme-toggle {
  background-color: #fdcb6e;
  /* warm yellow */
  color: #000;
}

.tag-filereader-api {
  background-color: #e17055;
  /* reddish-orange */
  color: #fff;
}

.tag-canvas-api {
  background-color: #d63031;
  /* bold red */
  color: #fff;
}

.tag-jszip {
  background-color: #6ab04c;
  /* medium green */
  color: #fff;
}

.tag-responsive-ui {
  background-color: #f0932b;
  /* orange */
  color: #fff;
}

.tag-client-side-file-handling {
  background-color: #00cec9;
  /* bright cyan */
  color: #fff;
}

/* Volunteer / Backend Projects */
.tag-php {
  background-color: #777BB4;
  /* PHP blue */
  color: #fff;
}

.tag-mysql {
  background-color: #4479A1;
  /* MySQL blue */
  color: #fff;
}

.tag-calendar-uiux {
  background-color: #74b9ff;
  /* light blue */
  color: #fff;
}

.tag-secure-auth-system {
  background-color: #2d3436;
  /* dark gray/charcoal */
  color: #fff;
}

.tag-toast-notifications {
  background-color: #fd79a8;
  /* soft pink */
  color: #fff;
}

/* Mapping / Data Visualization */
.tag-geojson {
  background-color: #b71540;
  /* deep red */
  color: #fff;
}

.tag-openlayers {
  background-color: #ff7675;
  /* soft red */
  color: #fff;
}

.tag-mapbox {
  background-color: #341f97;
  /* dark purple */
  color: #fff;
}

.tag-chart-js {
  background-color: #6c5ce7;
  /* reusing vibrant purple */
  color: #fff;
}

/* Dissertation / Interactive Displays */
.tag-raspberry-pi-3 {
  background-color: #a29bfe;
  /* light purple */
  color: #fff;
}

.tag-rpi-gpio {
  background-color: #636e72;
  /* muted gray */
  color: #fff;
}

.tag-hardware-integration {
  background-color: #00b894;
  /* fresh green */
  color: #fff;
}

.tag-electronics {
  background-color: #0984e3;
  /* blue */
  color: #fff;
}

.tag-touchscreen-interface {
  background-color: #fdcb6e;
  /* warm yellow */
  color: #000;
}

.tag-interactive-display {
  background-color: #e17055;
  /* reddish-orange */
  color: #fff;
}

.tag-audio-feedback {
  background-color: #6ab04c;
  /* medium green */
  color: #fff;
}

.tag-real-time-display-updates {
  background-color: #d63031;
  /* bold red */
  color: #fff;
}

.tag-museum-technology {
  background-color: #00cec9;
  /* bright cyan */
  color: #fff;
}

/* Human-Computer Interaction Projects */
.tag-user-testing {
  background-color: #fd79a8;
  /* soft pink */
  color: #fff;
}

.tag-human-centered-design {
  background-color: #e17055;
  /* reddish-orange */
  color: #fff;
}

.tag-accessibility-design {
  background-color: #6ab04c;
  /* medium green */
  color: #fff;
}

.tag-uiux-design {
  background-color: #f0a10f;
  /* medium green */
  color: #fff;
}

.tag-html {
  background-color: #43f00f;
  /* medium green */
  color: #fff;
}

.tag-css {
  background-color: #0f25f0;
  /* medium green */
  color: #fff;
}

.tag-chartjs {
  background-color: #e80ff0;
  /* medium green */
  color: #fff;
}

.tag-multimedia {
  background-color: #770f7a;
  /* medium green */
  color: #fff;
}

.tag-visual-identity {
  background-color: #34495e;
  color: #fff;
}

.tag-logo-design {
  background-color: #16a085;
  color: #fff;
}

.tag-print-design {
  background-color: #27ae60;
  color: #fff;
}

.tag-digital-branding {
  background-color: #8e44ad;
  color: #fff;
}

.tag-brand-strategy {
  background-color: #e67e22;
  color: #fff;
}

.tag-packaging-design {
  background-color: #f39c12;
  color: #fff;
}

.tag-digital-illustration {
  background-color: #d35400;
  color: #fff;
}

.tag-banner-design {
  background-color: #2980b9;
  color: #fff;
}

.tag-concept-art {
  background-color: #2c3e50;
  color: #fff;
}

.tag-fan-art {
  background-color: #c0392b;
  color: #fff;
}

.tag-information-design {
  background-color: #7f8c8d;
  color: #fff;
}

.tag-overlay-techniques {
  background-color: #bdc3c7;
  color: #000;
}

.tag-military-inspired-design {
  background-color: #2d3436;
  color: #fff;
}

.tag-photo-composition {
  background-color: #6c5ce7;
  color: #fff;
}

.tag-vintage-design {
  background-color: #8d8741;
  color: #fff;
}

.tag-layout-design {
  background-color: #e27d60;
  color: #fff;
}

.tag-modern-ui-design {
  background-color: #e8a87c;
  color: #fff;
}

.tag-cinematic-design {
  background-color: #f8a5c2;
  color: #fff;
}

.tag-feature-presentation {
  background-color: #f3a683;
  color: #fff;
}

.tag-minimal-design {
  background-color: #778beb;
  color: #fff;
}

.tag-color-theory {
  background-color: #786fa6;
  color: #fff;
}

.tag-child-friendly-design {
  background-color: #ff7979;
  color: #fff;
}




.tag-calendar-uiux {
  background-color: #ff6f61;
  /* a warm coral */
  color: #fff;
}

.tag-secure-auth-system {
  background-color: #6a4c93;
  /* a deep purple */
  color: #fff;
}

.tag-toast-notifications {
  background-color: #f39c12;
  /* orange tone */
  color: #fff;
}

.tag-2d-platformer {
  background-color: #27ae60;
  /* green */
  color: #fff;
}

.tag-box2d {
  background-color: #2980b9;
  /* blue tone */
  color: #fff;
}

.tag-python {
  background-color: #306998; /* Python blue */
  color: #fff;
}

/* Missing Technology Tag Styles */
.tag-wayfinding {
  background-color: #5cacee; /* A clear sky blue */
  color: #fff;
}

.tag-adobe-photoshop {
  background-color: #31326f; /* A deep, classic Photoshop blue */
  color: #fff;
}

.tag-adobe-illustrator {
  background-color: #ff9a00; /* A vivid orange reminiscent of Illustrator's identity */
  color: #fff;
}

.tag-poster-design {
  background-color: #c0392b; /* Bold red for impactful poster layouts */
  color: #fff;
}

.tag-digital-collage {
  background-color: #9b59b6; /* Vibrant purple ideal for creative digital collages */
  color: #fff;
}

.tag-visual-storytelling {
  background-color: #16a085; /* Teal that evokes clarity and narrative focus */
  color: #fff;
}

.tag-keyframe-animation { background-color: #8e24aa; /* a vibrant purple */ }

.tag-uv-mapping { background-color: #5c6bc0; /* strong blue */ }

.tag-rendering { background-color: #43a047; /* a fresh green */ }

.tag-digital-sculpting { background-color: #3949ab; /* deep indigo */ }

.tag-autodesk-3ds-max { background-color: #fdd835; color: #000; /* yellow with dark text for contrast */ }

.tag-animation { background-color: #d81b60; /* a bold pink */ }

.tag-material-design { background-color: #039be5; /* a bright light blue */ }

.tag-box2d-physics { background-color: #f4511e; /* a dynamic red-orange */ }

.tag-asset-creation { background-color: #6d4c41; /* a rich brown */ }

.tag-retro-game-design { background-color: #8bc34a; /* a light, playful green */ }

.tag-level-design { background-color: #00acc1; /* a vibrant teal */ }

.tag-physics-simulation { background-color: #1e88e5; /* a clear blue */ }

.tag-game-development { background-color: #7cb342; /* a fresh lime green */ }

.tag-modular-design { background-color: #5e35b1; /* a deep purple */ }

.tag-interactive-media { background-color: #00897b; /* a balanced teal */ }

.tag-texturing { background-color: #ff7043; /* A warm coral tone */ }







/* LocalStorage */
.tag-localstorage {
  background-color: #8D6E63; /* soft brown */
  color: #fff;
}

/* html2pdf */
.tag-html2pdf {
  background-color: #00695C; /* deep teal (PDF/print feel) */
  color: #fff;
}

/* Accessibility */
.tag-accessibility {
  background-color: #FFD600; /* bright yellow (WCAG color symbol) */
  color: #000;
}















/* Optional: Tech tag grouping */
.tech-tags {
  margin-top: 1rem;
  border-top: 1px solid var(--highlight-color);
  padding-top: 0.5rem;
}

.hero {
  text-align: center;
  padding: 4rem 0;
  background: var(--section-bg);
}

.hero h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.section {
  background: var(--section-bg);
  margin-top: 2rem;
  padding: 3rem 0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin: 1% 10%;
}

@media (max-width: 768px) {
  .section {
    margin: 2%;
  }

  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 1rem;
  }

  .card {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .section {
    margin: 1rem;
    padding: 2rem 1rem;
  }

  .portfolio-grid {
    gap: 1.25rem;
    padding: 0;
  }
}

form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 0.1em;
}

form input,
form textarea {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background: var(--bg-color);
  color: var(--text-color);
}

form button {
  background-color: var(--accent-color);
  color: #000;
  border: none;
  padding: 0.75rem;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.3s;
}

form button:hover {
  background-color: var(--highlight-color);
}

.site-footer {
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--section-bg);
}

.project-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  z-index: 1003;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Align to top */
  padding: 2rem;
  overflow-y: auto;
  transition: opacity 0.3s ease;
}

/* Apply the shift only if modal content exceeds a threshold */


.project-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-content {
  background: var(--section-bg);
  color: var(--text-color);
  max-width: 800px;
  width: 100%;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  position: relative;
  animation: fadeInUp 0.3s ease forwards;
}

.close-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--text-color);
  cursor: pointer;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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


.card[data-id] {
  cursor: pointer;
}

#about,
#web,
#gdb,
#edu,
#contact {
  margin-top: 2em;
}

/* Base styles */
.me {
  text-align: justify;
}

.mobile-break {
  display: inline;
}

/* On small screens, insert a block break */
@media (max-width: 768px) {
  .mobile-break {
    display: block;
    height: 1em;
    content: "";
  }
}

.scroll-border {
  position: absolute;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(to right,
      #1976d2, #007acc, #7b61ff, #d473d4, #9c27b0,
      #e26d5c, #ff9800, #ffa600, #ffae42, #92b25a,
      #2e7d32, #3aa76d, #1976d2);
  background-size: 200% auto;
  animation: borderScroll 20s linear infinite;
  z-index: 999;
  pointer-events: none;
}

@keyframes borderScrollHorizontal {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: 0% center;
  }
}

.scroll-border {
  background-size: 200% auto;
  animation: borderScrollHorizontal 20s linear infinite;
}


/* Hide one signature based on theme */
.signature-img {
  display: none;
  height: 180px;
  vertical-align: middle;
  padding-top: 0.5em;
}

[data-theme="light"] .light-only {
  display: inline;
}

[data-theme="dark"] .dark-only {
  display: inline;
}


/* ------------------------------ */
/*        MODAL STYLING            */
/* ------------------------------ */


/* Modal container */
.modal {
  position: fixed;
  top: 2em;
  /* Set the top of the modal to be 2em from the top of the screen */
  left: 0;
  width: 100%;
  max-height: 90vh;
  /* Restrict modal height to 90% of the viewport */
  background: var(--overlay-bg);
  /* Semi-transparent background */
  backdrop-filter: blur(6px);
  /* Apply blur effect to the background */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  /* Align the modal content towards the top */
  z-index: 1004;
  opacity: 0;
  /* Initially hidden */
  pointer-events: none;
  /* Disable pointer events when hidden */
  transition: opacity 0.3s ease;
  /* Smooth fade-in transition */
}

/* Modal is visible when not hidden */
.modal:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

/* Gallery inside Modal */
.modal .gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  margin-top: 2rem;
}

.modal .gallery img {
  border-radius: 6px;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

/* Tags inside Modal */
.modal .tags {
  margin: 1rem 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}


.back-to-top {
  margin-top: 2rem;
  background: var(--accent-color);
  color: #000;
  border: none;
  padding: 0.75rem 1.25rem;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: background 0.3s;
}

.back-to-top:hover {
  background: var(--highlight-color);
}


.back-to-top {
  display: none;
  /* default hidden */
}

.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-start;
  margin-top: 1rem;
  border-top: 1px solid var(--highlight-color);
  padding-top: 0.5rem;
}

.tech-tags .tag {
  flex-grow: 1;
  flex-basis: auto;
  text-align: center;
  white-space: nowrap;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.theme-toggle-icon {
  font-size: 1.2rem;
  background: none;
  border: none;
  color: var(--icon-color);
  cursor: pointer;
  transition: transform 0.2s ease;
  z-index: 1002;
}

.theme-toggle-icon:hover {
  transform: scale(1.15);
}

/* Default: hide the mobile toggle on desktop */
#mobileThemeToggle {
  display: none;
}

/* Show it only when burger menu is visible */
@media (max-width: 895px) {
  #mobileThemeToggle {
    display: inline-block;
  }
}

.dev-badge {
  background-color: #ff5252;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  display: inline-block;
  margin: 1rem auto;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  display: block;
  max-width: fit-content;
}

.dev-badge-inline {
  background-color: #ff5252;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  display: block;
  margin: 0.75rem auto 0;
  text-align: center;
  max-width: fit-content;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}



span.dev-badge-inline {
  margin-top: -6em;
  z-index: 999;
  margin-bottom: 2em;
}










/* #modalMainImage {
  max-height: 400px;
} */

#projectOverlay.education-modal .card-image {
  max-width: 400px;
  transform: none; /* or custom scale */
}




.modal-image-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 1rem 0;
}




















#edu .education-grid .card-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(from 0deg,
      #1976d2, #007acc, #7b61ff, #d473d4, #9c27b0,
      #e26d5c, #ff9800, #ffa600, #ffae42, #92b25a,
      #2e7d32, #3aa76d, #1976d2);
  display: inline-block;
  margin: 0 auto 1rem;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
}

/* Image inside card */
#edu .education-grid .card-image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 2;
  transform-origin: center center;
}

/* Spin ring clockwise in dark mode */
[data-theme="dark"] #edu .education-grid .card-image {
  animation: spinClockwise 4s linear infinite;
}

/* Spin ring counter-clockwise in light mode */
[data-theme="light"] #edu .education-grid .card-image {
  animation: spinCounterClockwise 4s linear infinite;
}

/* Reverse image spin in dark mode to cancel rotation */
[data-theme="dark"] #edu .education-grid .card-image img {
  animation: counterSpin 4s linear infinite;
}

/* Spin image in opposite direction in light mode to cancel rotation */
[data-theme="light"] #edu .education-grid .card-image img {
  animation: spinClockwise 4s linear infinite;
}

/* Optional hover effect */
#edu .portfolio-grid.education-grid .card .card-image:hover {
  transform: scale(1.05);
}

#edu .card:hover .card-image {
  transform: none !important;
}

/* Keyframes */
@keyframes spinClockwise {
  0% {
    transform: rotate(0turn);
  }

  100% {
    transform: rotate(1turn);
  }
}

@keyframes spinCounterClockwise {
  0% {
    transform: rotate(0turn);
  }

  100% {
    transform: rotate(-1turn);
  }
}

@keyframes counterSpin {
  0% {
    transform: rotate(0turn);
  }

  100% {
    transform: rotate(-1turn);
  }
}


#projectOverlay.web-modal .card-image {
  max-width: 900px;
  margin:-3em 0;
}

#projectOverlay.tech-modal .card-image {
  max-width: 450px;
}

#projectOverlay.gdb-modal .card-image {
  max-width: 500px;
}

#projectOverlay.education-modal .card-image {
  max-width: 350px;
}
.gallery {
  cursor: grab;
  user-select: none;
}

.gallery.dragging {
  cursor: grabbing;
}




















































/* 1) Single-column by default: mobile & tablets < 1024px */
.contact-layout {
  display: block;
}




/* 2) Two-column grid for screens >= 1024px */
@media (min-width: 1024px) {
  .contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch; /* Makes both columns the same height if content allows */
  }
  .contact-col,
  .recommend-col {
    margin-bottom: 0;
    display: flex;          /* Let them flex */
    flex-direction: column; /* Stack internal items vertically */
  }

  /* Optional: limit or reduce textarea height on larger screens */
  .contact-col textarea {
    min-height: 200px;  /* or any suitable value */
    max-height: 400px;  /* avoid it becoming too huge */
    resize: vertical;   /* let users drag to expand if needed */
  }
}
































/* Recommendations styling stays the same */
.recommendations {
  border-radius: 10px;
  padding: 1rem;
  margin: 2rem 0;
  margin-top:-3.4em;
}

.recommendations h3 {
  margin-bottom: 1rem;
}

.recommendations blockquote {
  position: relative;
  /* Remove your solid border-left */
  margin: 1rem 0;
  padding: 1rem 1rem 1rem 2rem;
  background: var(--bg-color);
  border-radius: 6px;
  font-style: italic;
  color: var(--text-color);
}

/* Use ::before for the animated left border */
.recommendations blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  /* The same rainbow gradient from your hero border, but vertical */
  background: linear-gradient(
    to bottom,
    #1976d2, #007acc, #7b61ff, #d473d4, #9c27b0,
    #e26d5c, #ff9800, #ffa600, #ffae42, #92b25a,
    #2e7d32, #3aa76d, #1976d2
  );
  /* Make it taller than needed, then animate its position */
  background-size: auto 200%;
  /* The main animation */
  animation: borderScroll 20s linear infinite;
  /* Optionally match the container’s corners on the left side */
  border-radius: 6px 0 0 6px;
  /* Ensure the pseudo-element sits behind text */
  z-index: 1;
}

@keyframes borderScroll {
  0% {
    background-position: center 200%;
  }
  100% {
    background-position: center 0%;
  }
}


.recommendations blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-style: normal;
  font-weight: 600;
  color: #8d8d8d;
}

/* Blockquote needs position: relative 
   so the absolutely-positioned button anchors correctly */
.recommendations blockquote {
  position: relative;
  padding: 1rem 1rem 2.5rem 2rem; /* extra bottom padding for the button */
  margin: 1rem 0;
  background: var(--bg-color);
  border-radius: 6px;
  font-style: italic;
  color: var(--text-color);
}

/* The base style you liked, made smaller via .small-linkedin-btn */
.btn-linkedin {
  display: inline-block;
  background: var(--accent-color); /* or your brand color */
  color: #000;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s;
  border-radius: 6px;
}

.btn-linkedin:hover {
  background: var(--highlight-color);
  color: var(--bg-color);
}

/* The smaller variation + positioned in bottom-right corner */
.small-linkedin-btn {
  position: absolute;
  bottom: 1rem;
  right: 1rem;

  /* Make it visually smaller than the default .btn-linkedin */
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.2;
}


.contact-col form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (min-width: 1024px) {
  .contact-col form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .recommendations {
    margin-top: 0;
  }
}









.form-response {
  display: none; /* 🔒 Hidden by default */
  margin-top: 1.5rem;
  padding: 1rem;
  border-left: 6px solid;
  border-radius: 6px;
  font-weight: 500;
  background-color: #f0f0f0;
  color: var(--text-color);
  transition: all 0.3s ease;
}

.form-response.visible {
  display: block; /* 🔓 Only show when active */
}

/* ...the rest stays the same (success, processing, error) */





/* Base styling for all form responses */
.form-response {
  margin-top: 0;
  padding: 0.5rem;
  border-left: 6px solid;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  text-align: center;
  transition: all 0.3s ease;
}

/* Success: green with darker green border */
.form-response.success {
  background-color: #e6f9ec;
  border-left-color: #2e7d32;
  color: #2e7d32;
}

/* Sending in progress: soft orange */
.form-response.processing {
  background-color: #fff3e0;
  border-left-color: #ef6c00;
  color: #ef6c00;
}

/* Error: red with darker red border */
.form-response.error {
  background-color: #fdecea;
  border-left-color: #c62828;
  color: #c62828;
}

.bottom-recomm {
  margin-top:-4em;
}

.quick-intro {
  margin-top: 1.7em;
  margin-bottom: 2rem;
  background: var(--bg-color);
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
}

.quick-intro h3 {
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.quick-intro p {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.connect-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9rem;
}

.connect-highlights li {
  margin-bottom: 0.5rem;
}

.contact-col h2 {
  padding-top: 0.1rem; /* Or tweak to match right column’s spacing */
}
.recommend-col h2 {
  margin-top: -0.75rem; /* Fine-tune visually */
}

@media (max-width:1024px){
  .recommendations {

    margin-top: 1.5em
}
.tags {
  justify-content: start;
  padding: 0.5em 0;
}
.modal-image-wrapper {
  padding: 3em 0;
}
a.btn-linkedin.small-linkedin-btn {
  margin: -0.5em 0;
}
}

@media (max-width: 414px) {
  .card {
    margin-bottom: 1rem;
  }
}
@keyframes borderScrollHorizontal {
  0% { background-position: 200% center; }
  100% { background-position: 0% center; }
}

.scroll-border {
  animation: borderScrollHorizontal 30s linear infinite;
}




form {
  position: relative;
}

.form-response {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  width: max-content;
  max-width: 90%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Visibility toggle */
.form-response.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Styles for response types */
.form-response.success {
  background-color: #e6f9ec;
  color: #2e7d32;
  border-left: 4px solid #2e7d32;
}

.form-response.error {
  background-color: #fdecea;
  color: #c62828;
  border-left: 4px solid #c62828;
}

.form-response.processing {
  background-color: #fff3e0;
  color: #ef6c00;
  border-left: 4px solid #ef6c00;
}
.input-error {
  border: 2px solid #c62828 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}