/*-----------------------------------*\

  Made by: 
  Ashish Kumar | Full-Stack Developer
  Senior Computer Science student at Arizona State University
  Project: My Portfolio Website

  File: #style.css

\*-----------------------------------*/

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

  /**
   * colors
   */

  /* gradient */

  --bg-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(240, 1%, 25%) 3%, 
    hsl(0, 0%, 19%) 97%
  );
  --bg-gradient-jet: linear-gradient(
    to bottom right, 
    hsla(240, 1%, 18%, 0.251) 0%, 
    hsla(240, 2%, 11%, 0) 100%
  ), hsl(240, 2%, 13%);
  --bg-gradient-yellow-1: linear-gradient(
    to bottom right, 
    hsl(45, 100%, 71%) 0%, 
    hsla(36, 100%, 69%, 0) 50%
  );
  --bg-gradient-yellow-2: linear-gradient(
    135deg, 
    hsla(45, 100%, 71%, 0.251) 0%, 
    hsla(35, 100%, 68%, 0) 59.86%
  ), hsl(240, 2%, 13%);
  --border-gradient-onyx: linear-gradient(
    to bottom right, 
    hsl(0, 0%, 25%) 0%, 
    hsla(0, 0%, 25%, 0) 50%
  );
  --text-gradient-yellow: linear-gradient(
    to right, 
    hsl(45, 100%, 72%), 
    hsl(35, 100%, 68%)
  );

  /* solid */

  --jet: hsl(0, 0%, 22%);
  --onyx: hsl(240, 1%, 17%);
  --eerie-black-1: hsl(240, 2%, 13%);
  --eerie-black-2: hsl(240, 2%, 12%);
  --smoky-black: hsl(0, 0%, 7%);
  --white-1: hsl(0, 0%, 100%);
  --white-2: hsl(0, 0%, 98%);
  --orange-yellow-crayola: hsl(45, 100%, 72%);
  --vegas-gold: hsl(45, 54%, 58%);
  --light-gray: hsl(0, 0%, 84%);
  --light-gray-70: hsla(0, 0%, 84%, 0.7);
  --bittersweet-shimmer: hsl(0, 43%, 51%);

  /**
   * typography
   */

  /* font-family */
  --ff-poppins: 'Poppins', sans-serif;

  /* font-size */
  --fs-1: 24px;
  --fs-2: 18px;
  --fs-3: 17px;
  --fs-4: 16px;
  --fs-5: 15px;
  --fs-6: 14px;
  --fs-7: 13px;
  --fs-8: 11px;

  /* font-weight */
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;

  /**
   * shadow
   */
  
  --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.25);
  --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.25);
  --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.25);
  --shadow-4: 0 25px 50px hsla(0, 0%, 0%, 0.15);
  --shadow-5: 0 24px 80px hsla(0, 0%, 0%, 0.25);

  /**
   * transition
   */

  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease-in-out;

}





/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a { text-decoration: none; }

li { list-style: none; }

img, ion-icon, a, button, time, span { display: block; }

button {
  font: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}

input, textarea {
  display: block;
  width: 100%;
  background: none;
  font: inherit;
}

::selection {
  background: var(--orange-yellow-crayola);
  color: var(--smoky-black);
}

:focus { outline-color: var(--orange-yellow-crayola); }

html { font-family: var(--ff-poppins); }

body { background: var(--smoky-black); }





/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.sidebar,
article {
  background: var(--eerie-black-2);
  border: 1px solid var(--jet);
  border-radius: 20px;
  padding: 15px;
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.separator {
  width: 100%;
  height: 1px;
  background: var(--jet);
  margin: 16px 0;
}

.icon-box {
  position: relative;
  background: var(--border-gradient-onyx);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: var(--orange-yellow-crayola);
  box-shadow: var(--shadow-1);
  z-index: 1;
}

.icon-box::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--eerie-black-1);
  border-radius: inherit;
  z-index: -1;
}

.icon-box ion-icon { --ionicon-stroke-width: 35px; }

article { display: none; }

article.active {
  display: block;
  animation: fade 0.5s ease backwards;
}

@keyframes fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.h2,
.h3,
.h4,
.h5 {
  color: var(--white-2);
  text-transform: capitalize;
}

.h2 { font-size: var(--fs-1); }

.h3 { font-size: var(--fs-2); }

.h4 { font-size: var(--fs-4); }

.h5 {
  font-size: var(--fs-7);
  font-weight: var(--fw-500);
}

.article-title {
  position: relative;
  padding-bottom: 7px;
}

.article-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background: var(--text-gradient-yellow);
  border-radius: 3px;
}

.has-scrollbar::-webkit-scrollbar {
  width: 5px; /* for vertical scrollbar */
  height: 5px; /* for horizontal scrollbar */
}

.has-scrollbar::-webkit-scrollbar-track {
  background: var(--onyx);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-thumb {
  background: var(--orange-yellow-crayola);
  border-radius: 5px;
}

.has-scrollbar::-webkit-scrollbar-button { width: 20px; }

.content-card {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 15px;
  padding-top: 45px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  z-index: 1;
}

.content-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}





/*-----------------------------------*\
  #MAIN
\*-----------------------------------*/

main {
  margin: 15px 12px;
  margin-bottom: 75px;
  min-width: 259px;
}





/*-----------------------------------*\
  #SIDEBAR
\*-----------------------------------*/

.sidebar {
  margin-bottom: 15px;
  max-height: 112px;
  overflow: hidden;
  transition: var(--transition-2);
}

.sidebar.active { max-height: 405px; }

.sidebar-info {
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
}

.avatar-box {
  background: var(--bg-gradient-onyx);
  border-radius: 20px;
}

.avatar-box img {
  border-radius: 20px;
}

.info-content .name {
  color: var(--white-2);
  font-size: var(--fs-3);
  font-weight: var(--fw-500);
  letter-spacing: -0.25px;
  margin-bottom: 10px;
}

.info-content .title {
  color: var(--white-1);
  background: var(--onyx);
  font-size: var(--fs-8);
  font-weight: var(--fw-300);
  width: max-content;
  padding: 3px 12px;
  border-radius: 8px;
}

.info_more-btn {
  position: absolute;
  top: -15px;
  right: -15px;
  border-radius: 0 15px;
  font-size: 13px;
  color: var(--orange-yellow-crayola);
  background: var(--border-gradient-onyx);
  padding: 10px;
  box-shadow: var(--shadow-2);
  transition: var(--transition-1);
  z-index: 1;
}

.info_more-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--bg-gradient-jet);
  transition: var(--transition-1);
  z-index: -1;
}

.info_more-btn:hover,
.info_more-btn:focus { background: var(--bg-gradient-yellow-1); }

.info_more-btn:hover::before,
.info_more-btn:focus::before { background: var(--bg-gradient-yellow-2); }

.info_more-btn span { display: none; }

.sidebar-info_more {
  opacity: 0;
  visibility: hidden;
  transition: var(--transition-2);
}

.sidebar.active .sidebar-info_more {
  opacity: 1;
  visibility: visible;
}

.contacts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.contact-item {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

.contact-info {
  max-width: calc(100% - 46px);
  width: calc(100% - 46px);
}

.contact-title {
  color: var(--light-gray-70);
  font-size: var(--fs-8);
  text-transform: uppercase;
  margin-bottom: 2px;
}

.contact-info :is(.contact-link, time, address) {
  color: var(--white-2);
  font-size: var(--fs-7);
}

.contact-info address { font-style: normal; }

.social-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 15px;
  padding-bottom: 4px;
  padding-left: 7px;
}

.social-item .social-link {
  color: var(--light-gray-70);
  font-size: 18px;
}


.social-item .social-link:hover { color: var(--light-gray); }





/*-----------------------------------*\
  #NAVBAR
\*-----------------------------------*/

.navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: hsla(240, 1%, 17%, 0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--jet);
  border-radius: 12px 12px 0 0;
  box-shadow: var(--shadow-2);
  z-index: 5;
}

.navbar-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}

.navbar-link {
  color: var(--light-gray);
  font-size: var(--fs-8);
  padding: 20px 7px;
  transition: color var(--transition-1);
}

.navbar-link:hover,
.navbar-link:focus { color: var(--light-gray-70); }

.navbar-link.active { color: var(--orange-yellow-crayola); }





/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about .article-title { margin-bottom: 15px; }

.about-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}

.about-text p { margin-bottom: 15px; }



/**
 * #service 
 */

.service { margin-bottom: 35px; }

.service-title { margin-bottom: 20px; }

.service-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.service-item {
  position: relative;
  background: var(--border-gradient-onyx);
  padding: 20px;
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  z-index: 1;
}

.service-item::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
}

.service-icon-box { margin-bottom: 10px; }

.service-icon-box img { margin: auto; }

.service-content-box { text-align: center; }

.service-item-title { margin-bottom: 7px; }

.service-item-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-3);
  line-height: 1.6;
}


/**
 * #testimonials 
 */

.testimonials { margin-bottom: 30px; }

.testimonials-title { margin-bottom: 20px; }

.testimonials-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 0 -15px;
  padding: 25px 15px;
  padding-bottom: 35px;
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
}

.testimonials-item {
  min-width: 100%;
  scroll-snap-align: center;
}

.testimonials-avatar-box {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(15px, -25px);
  background: var(--bg-gradient-onyx);
  border-radius: 14px;
  box-shadow: var(--shadow-1);
}

.testimonials-item-title { margin-bottom: 7px; }

.testimonials-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
  display: -webkit-box;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/**
 * #testimonials-modal
 */

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
  pointer-events: none;
  visibility: hidden;
}

.modal-container::-webkit-scrollbar { display: none; }

.modal-container.active {
  pointer-events: all;
  visibility: visible;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: hsl(0, 0%, 5%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 1;
  transition: var(--transition-1);
}

.overlay.active {
  opacity: 0.8;
  visibility: visible;
  pointer-events: all;
}

.testimonials-modal {
  background: var(--eerie-black-2);
  position: relative;
  padding: 15px;
  margin: 15px 12px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  transform: scale(1.2);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 2;
}

.modal-container.active .testimonials-modal {
  transform: scale(1);
  opacity: 1;
}

.modal-close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: var(--onyx);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-2);
  font-size: 18px;
  opacity: 0.7;
}

.modal-close-btn:hover,
.modal-close-btn:focus { opacity: 1; }

/* Use CSS text × only in the Highlights modal */
.testimonials-modal .modal-close-btn::before {
  content: "×";
  font-size: 20px;
  line-height: 1;
  color: var(--white-2);
}

.modal-avatar-box {
  background: var(--bg-gradient-onyx);
  width: max-content;
  border-radius: 14px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-2);
}

.modal-img-wrapper > img { display: none; }

.modal-title { margin-bottom: 4px; }

.modal-content time {
  font-size: var(--fs-6);
  color: var(--light-gray-70);
  font-weight: var(--fw-300);
  margin-bottom: 10px;
}

.modal-content p {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}


/**
 * #clients 
 */

.clients { margin-bottom: 15px; }

.clients-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 15px;
  margin: 0 -15px;
  padding: 25px;
  padding-bottom: 25px;
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 25px;
}

.clients-item {
  min-width: 50%;
  scroll-snap-align: start;
}

.clients-item img {
  width: 80px;
  height: auto;  /* keeps aspect ratio */
  filter: grayscale(1);
  transition: var(--transition-1);
}

.clients-item img:hover { filter: grayscale(0); }





/*-----------------------------------*\
  #RESUME
\*-----------------------------------*/

.article-title { margin-bottom: 30px; }


/**
 * education and experience 
 */

.timeline { margin-bottom: 30px; }

.timeline .title-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.timeline-list {
  font-size: var(--fs-6);
  margin-left: 45px;
}

.timeline-item { position: relative; }

.timeline-item:not(:last-child) { margin-bottom: 20px; }

.timeline-item-title {
  font-size: var(--fs-6);
  line-height: 1.3;
  margin-bottom: 7px;
}

.timeline-list span {
  color: var(--vegas-gold);
  font-weight: var(--fw-400);
  line-height: 1.6;
}

.timeline-item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: -25px;
  left: -30px;
  width: 1px;
  height: calc(100% + 50px);
  background: var(--jet);
}

.timeline-item::after {
  content: "";
  position: absolute;
  top: 5px;
  left: -33px;
  height: 6px;
  width: 6px;
  background: var(--text-gradient-yellow);
  border-radius: 50%;
  box-shadow: 0 0 0 4px var(--jet);
}

.timeline-text {
  color: var(--light-gray);
  font-weight: var(--fw-300);
  line-height: 1.6;
}


/**
 * skills 
 */

.skills-title { margin-bottom: 20px; }

.skills-list { padding: 20px; }


.skills-item:not(:last-child) { margin-bottom: 15px; }

.skill .title-wrapper {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 8px;
}

.skill .title-wrapper data {
  color: var(--light-gray);
  font-size: var(--fs-7);
  font-weight: var(--fw-300);
}

.skill-progress-bg {
  background: var(--jet);
  width: 100%;
  height: 8px;
  border-radius: 10px;
}

.skill-progress-fill {
  background: var(--text-gradient-yellow);
  height: 100%;
  border-radius: inherit;
}





/*-----------------------------------*\
  #PORTFOLIO
\*-----------------------------------*/

.filter-list { display: none; }

.filter-select-box {
  position: relative;
  margin-bottom: 25px;
}

.filter-select {
  background: var(--eerie-black-2);
  color: var(--light-gray);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.filter-select.active .select-icon { transform: rotate(0.5turn); }

.select-list {
  background: var(--eerie-black-2);
  position: absolute;
  top: calc(100% + 6px);
  width: 100%;
  padding: 6px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.15s ease-in-out;
}

.filter-select.active + .select-list {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.select-item button {
  background: var(--eerie-black-2);
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  text-transform: capitalize;
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
}

.select-item button:hover { --eerie-black-2: hsl(240, 2%, 20%); }

.project-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin-bottom: 10px;
}

.project-item { display: none; }

.project-item.active {
  display: block;
  animation: scaleUp 0.25s ease forwards;
}

@keyframes scaleUp {
  0% { transform: scale(0.5); }
  100% { transform: scale(1); }
}

.project-item > a { width: 100%; }

.project-img {
  position: relative;
  width: 100%;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 15px;
}

.project-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
  transition: var(--transition-1);
}

.project-item > a:hover .project-img::before { background: hsla(0, 0%, 0%, 0.5); }

.project-item-icon-box {
  --scale: 0.8;

  background: var(--jet);
  color: var(--orange-yellow-crayola);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
  font-size: 20px;
  padding: 18px;
  border-radius: 12px;
  opacity: 0;
  z-index: 1;
  transition: var(--transition-1);
}

.project-item > a:hover .project-item-icon-box {
  --scale: 1;
  opacity: 1;
}

.project-item-icon-box ion-icon { --ionicon-stroke-width: 50px; }

.project-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

.project-item > a:hover img { transform: scale(1.1); }

.project-title,
.project-category { margin-left: 10px; }

.project-title {
  color: var(--white-2);
  font-size: var(--fs-5);
  font-weight: var(--fw-400);
  text-transform: capitalize;
  line-height: 1.3;
}

.project-category {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}





/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog-posts { margin-bottom: 10px; }

.blog-posts-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.blog-post-item > a {
  position: relative;
  background: var(--border-gradient-onyx);
  height: 100%;
  box-shadow: var(--shadow-4);
  border-radius: 16px;
  z-index: 1;
}

.blog-post-item > a::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: var(--eerie-black-1);
  z-index: -1;
}

.blog-banner-box {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  overflow: hidden;
}

.blog-banner-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-1);
}

.blog-post-item > a:hover .blog-banner-box img { transform: scale(1.1); }

.blog-content { padding: 15px; }

.blog-meta {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
}

.blog-meta :is(.blog-category, time) {
  color: var(--light-gray-70);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
}

.blog-meta .dot {
  background: var(--light-gray-70);
  width: 4px;
  height: 4px;
  border-radius: 4px;
}

.blog-item-title {
  margin-bottom: 10px;
  line-height: 1.3;
  transition: var(--transition-1);
}

.blog-post-item > a:hover .blog-item-title { color: var(--orange-yellow-crayola); }

.blog-text {
  color: var(--light-gray);
  font-size: var(--fs-6);
  font-weight: var(--fw-300);
  line-height: 1.6;
}





/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

.mapbox {
  position: relative;
  height: 250px;
  width: 100%;
  border-radius: 16px;
  margin-bottom: 30px;
  border: 1px solid var(--jet);
  overflow: hidden;
}

.mapbox figure { height: 100%; }

.mapbox iframe {
  width: 100%;
  height: 100%;
  border: none;
  filter: grayscale(1) invert(1);
}

.contact-form { margin-bottom: 10px; }

.form-title { margin-bottom: 20px; }

.input-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  margin-bottom: 25px;
}

.form-input {
  color: var(--white-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-400);
  padding: 13px 20px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  outline: none;
}

.form-input::placeholder { font-weight: var(--fw-500); }

.form-input:focus { border-color: var(--orange-yellow-crayola); }

textarea.form-input {
  min-height: 100px;
  height: 120px;
  max-height: 200px;
  resize: vertical;
  margin-bottom: 25px;
}

textarea.form-input::-webkit-resizer { display: none; }

.form-input:focus:invalid { border-color: var(--bittersweet-shimmer); }

.form-btn {
  position: relative;
  width: 100%;
  background: var(--border-gradient-onyx);
  color: var(--orange-yellow-crayola);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 13px 20px;
  border-radius: 14px;
  font-size: var(--fs-6);
  text-transform: capitalize;
  box-shadow: var(--shadow-3);
  z-index: 1;
  transition: var(--transition-1);
}

.form-btn::before {
  content: "";
  position: absolute;
  inset: 1px;
  background: var(--bg-gradient-jet);
  border-radius: inherit;
  z-index: -1;
  transition: var(--transition-1);
}

.form-btn ion-icon { font-size: 16px; }

.form-btn:hover { background: var(--bg-gradient-yellow-1); }

.form-btn:hover::before { background: var(--bg-gradient-yellow-2); }

.form-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.form-btn:disabled:hover { background: var(--border-gradient-onyx); }

.form-btn:disabled:hover::before { background: var(--bg-gradient-jet); }



/*-----------------------------------*\
  #HIGHLIGHTS TEXT TOGGLE
\*-----------------------------------*/

/* Default: show preview, hide detailed */
.testimonials .only-modal { display: none; }
.testimonials .only-preview { display: block; }

/* Inside modal: show detailed, hide preview */
.testimonials-modal .only-modal { display: block; }
.testimonials-modal .only-preview { display: none; }

/*-----------------------------------*\
  #RESPONSIVE
\*-----------------------------------*/

/**
 * responsive larger than 450px screen
 */

@media (min-width: 450px) {

  /**
   * client
   */

  .clients-item { min-width: calc(33.33% - 10px); }



  /**
   * #PORTFOLIO, BLOG 
   */

  .project-img,
  .blog-banner-box { height: auto; }

}





/**
 * responsive larger than 580px screen
 */

@media (min-width: 580px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 32px;
    --fs-2: 24px;
    --fs-3: 26px;
    --fs-4: 18px;
    --fs-6: 15px;
    --fs-7: 15px;
    --fs-8: 12px;

  }



  /**
   * #REUSED STYLE
   */

  .sidebar, article {
    width: 520px;
    margin-inline: auto;
    padding: 30px;
  }

  .article-title {
    font-weight: var(--fw-600);
    padding-bottom: 15px;
  }

  .article-title::after {
    width: 40px;
    height: 5px;
  }

  .icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    font-size: 18px;
  }



  /**
   * #MAIN
   */

  main {
    margin-top: 60px;
    margin-bottom: 100px;
  }



  /**
   * #SIDEBAR
   */

  .sidebar {
    max-height: 180px;
    margin-bottom: 30px;
  }

  .sidebar.active { max-height: 584px; }

  .sidebar-info { gap: 25px; }

  .avatar-box { border-radius: 30px; }

  .avatar-box img { width: 120px; }

  .info-content .name { margin-bottom: 15px; }

  .info-content .title { padding: 5px 18px; }

  .info_more-btn {
    top: -30px;
    right: -30px;
    padding: 10px 15px;
  }

  .info_more-btn span {
    display: block;
    font-size: var(--fs-8);
  }

  .info_more-btn ion-icon { display: none; }

  .separator { margin: 32px 0; }

  .contacts-list { gap: 20px; }

  .contact-info {
    max-width: calc(100% - 64px);
    width: calc(100% - 64px);
  }



  /**
   * #NAVBAR
   */

  .navbar { border-radius: 20px 20px 0 0; }

  .navbar-list { gap: 20px; }

  .navbar-link { --fs-8: 14px; }



  /**
   * #ABOUT
   */

  .about .article-title { margin-bottom: 20px; }

  .about-text { margin-bottom: 40px; }

  /* service */

  .service-item {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px;
    padding: 30px;
  }

  .service-icon-box {
    margin-bottom: 0;
    margin-top: 5px;
  }

  .service-content-box { text-align: left; }

  /* testimonials */

  .testimonials-title { margin-bottom: 25px; }

  .testimonials-list {
    gap: 30px;
    margin: 0 -30px;
    padding: 30px;
    padding-bottom: 35px;
  }

  .content-card {
    padding: 30px;
    padding-top: 25px;
  }

  .testimonials-avatar-box {
    transform: translate(30px, -30px);
    border-radius: 20px;
  }

  .testimonials-avatar-box img { width: 80px; }

  .testimonials-item-title {
    margin-bottom: 10px;
    margin-left: 95px;
  }

  .testimonials-text {
    line-clamp: 2;
    -webkit-line-clamp: 2;
  }

  /* testimonials modal */

  .modal-container { padding: 20px; }

  .testimonials-modal {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 25px;
    padding: 30px;
    border-radius: 20px;
  }

  .modal-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-avatar-box {
    border-radius: 18px;
    margin-bottom: 0;
  }

  .modal-avatar-box img { width: 65px; }

  .modal-img-wrapper > img {
    display: block;
    flex-grow: 1;
    width: 35px;
  }

  /* clients */

  .clients-list {
    gap: 50px;
    margin: 0 -30px;
    padding: 45px;
    scroll-padding-inline: 45px;
  }

  .clients-item { min-width: calc(33.33% - 35px); }



  /**
   * #RESUME
   */

  .timeline-list { margin-left: 65px; }

  .timeline-item:not(:last-child)::before { left: -40px; }

  .timeline-item::after {
    height: 8px;
    width: 8px;
    left: -43px;
  }

  .skills-item:not(:last-child) { margin-bottom: 25px; }



  /**
   * #PORTFOLIO, BLOG
   */

  .project-img, .blog-banner-box { border-radius: 16px; }

  .blog-posts-list { gap: 30px; }

  .blog-content { padding: 25px; }



  /**
   * #CONTACT
   */

  .mapbox {
    height: 380px;
    border-radius: 18px;
  }

  .input-wrapper {
    gap: 30px;
    margin-bottom: 30px;
  }

  .form-input { padding: 15px 20px; }

  textarea.form-input { margin-bottom: 30px; }

  .form-btn {
    --fs-6: 16px;
    padding: 16px 20px;
  }

  .form-btn ion-icon { font-size: 18px; }

}





/**
 * responsive larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE
   */

  .sidebar, article { width: 700px; }

  .has-scrollbar::-webkit-scrollbar-button { width: 100px; }



  /**
   * SIDEBAR
   */

  .contacts-list {
    grid-template-columns: 1fr 1fr;
    gap: 30px 15px;
  }



  /**
   * NAVBAR
   */

  .navbar-link { --fs-8: 15px; }



  /**
   * ABOUT
   */

  /* testimonials modal */

  .testimonials-modal {
    gap: 35px;
    max-width: 680px;
  }

  .modal-avatar-box img { width: 80px; }



  /**
   * PORTFOLIO
   */

  .article-title { padding-bottom: 20px; }

  .filter-select-box { display: none; }

  .filter-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 25px;
    padding-left: 5px;
    margin-bottom: 30px;
  }

  .filter-item button {
    color: var(--light-gray);
    font-size: var(--fs-5);
    transition: var(--transition-1);
  }

  .filter-item button:hover { color: var(--light-gray-70); }

  .filter-item button.active { color: var(--orange-yellow-crayola); }

  /* portfolio and blog grid */

  .project-list, .blog-posts-list { grid-template-columns: 1fr 1fr; }



  /**
   * CONTACT
   */

  .input-wrapper { grid-template-columns: 1fr 1fr; }

  .form-btn {
    width: max-content;
    margin-left: auto;
  }
  
}





/**
 * responsive larger than 1024px screen
 */

@media (min-width: 1024px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
    * shadow
    */

    --shadow-1: -4px 8px 24px hsla(0, 0%, 0%, 0.125);
    --shadow-2: 0 16px 30px hsla(0, 0%, 0%, 0.125);
    --shadow-3: 0 16px 40px hsla(0, 0%, 0%, 0.125);

  }



  /**
   * REUSED STYLE
   */

  .sidebar, article {
    width: 950px;
    box-shadow: var(--shadow-5);
  }



  /**
   * MAIN 
   */

  main { margin-bottom: 60px; }

  .main-content {
    position: relative;
    width: max-content;
    margin: auto;
  }



  /**
   * NAVBAR
   */

  .navbar {
    position: absolute;
    bottom: auto;
    top: 0;
    left: auto;
    right: 0;
    width: max-content;
    border-radius: 0 20px;
    padding: 0 20px;
    box-shadow: none;
  }

  .navbar-list {
    gap: 30px;
    padding: 0 20px;
  }

  .navbar-link { font-weight: var(--fw-500); }



  /**
   * ABOUT
   */

  /* service */

  .service-list {
    grid-template-columns: 1fr 1fr;
    gap: 20px 25px;
  }

  /* testimonials */

  .testimonials-item { min-width: calc(50% - 15px); }

  /* clients */

  .clients-item { min-width: calc(25% - 38px); }



  /**
   * PORTFOLIO
   */

  .project-list { grid-template-columns: repeat(3, 1fr); }



  /**
   * BLOG
   */

  .blog-banner-box { height: 230px; }

}





/**
 * responsive larger than 1250px screen
 */

@media (min-width: 1250px) {

  /**
   * RESET
   */

  body::-webkit-scrollbar { width: 20px; }

  body::-webkit-scrollbar-track { background: var(--smoky-black); }

  body::-webkit-scrollbar-thumb {
    border: 5px solid var(--smoky-black);
    background: hsla(0, 0%, 100%, 0.1);
    border-radius: 20px;
    box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, 0.11),
                inset -1px -1px 0 hsla(0, 0%, 100%, 0.11);
  }

  body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, 0.15); }

  body::-webkit-scrollbar-button { height: 60px; }



  /**
   * REUSED STYLE
   */

  .sidebar, article { width: auto; }

  article { min-height: 100%; }



  /**
   * MAIN
   */

  main {
    max-width: 1200px;
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
  }

  .main-content {
    min-width: 75%;
    width: 75%;
    margin: 0;
  }



  /**
   * SIDEBAR
   */

  .sidebar {
    position: sticky;
    top: 60px;
    max-height: max-content;
    height: 100%;
    margin-bottom: 0;
    padding-top: 60px;
    z-index: 1;
  }

  .sidebar-info { flex-direction: column; }

  .avatar-box img { width: 150px; }

  .info-content .name {
    white-space: nowrap;
    text-align: center;
  }

  .info-content .title { margin: auto; }

  .info_more-btn { display: none; }

  .sidebar-info_more {
    opacity: 1;
    visibility: visible;
  }

  .contacts-list { grid-template-columns: 1fr; }

  .contact-info :is(.contact-link) {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .contact-info :is(.contact-link, time, address) {
    --fs-7: 14px;
    font-weight: var(--fw-300);
  }

  .separator:last-of-type {
    margin: 15px 0;
    opacity: 0;
  }

  .social-list { justify-content: center; }



  /**
	 * RESUME
	 */

  .timeline-text { max-width: 700px; }

}

/*-----------------------------------*\
  #HIGHLIGHTS (override testimonial clamp)
\*-----------------------------------*/

.testimonials .testimonials-text {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/*-----------------------------------*\
  #HIGHLIGHTS MODAL PARAGRAPH SPACING
\*-----------------------------------*/

/* Add space between paragraphs in the popup */
.testimonials-modal [data-modal-text] p {
  margin: 0 0 16px;   /* bottom gap */
  line-height: 1.6;   /* optional: nicer readability */
}

/* No extra space after the last paragraph */
.testimonials-modal [data-modal-text] p:last-child {
  margin-bottom: 0;
}

/*-----------------------------------*\
  #DEAN'S LIST GRID (MODAL)
\*-----------------------------------*/
.testimonials-modal .cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns desktop */
  gap: 12px;
  margin-top: 10px;
}

@media (max-width: 700px) {
  .testimonials-modal .cert-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 cols small screens */
  }
}

.testimonials-modal .cert-card {
  background: var(--bg-gradient-onyx);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-2);
}

.testimonials-modal .cert-thumb-btn {
  padding: 0;
  border: 0;
  background: transparent;
  width: 100%;
  display: block;
  cursor: pointer;
}

.testimonials-modal .cert-card img {
  width: 100%;
  height: 140px;          /* smaller thumbs */
  object-fit: cover;
  display: block;
}

.testimonials-modal .cert-card:hover img {
  transform: translateY(-1px);
  filter: brightness(1.05);
  transition: transform 120ms ease, filter 120ms ease;
}



/* Highlight action buttons inside modal */
.testimonials-modal .highlight-actions {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.testimonials-modal .highlight-btn {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--onyx);
  color: var(--white-2);
  font-size: var(--fs-6);
  box-shadow: var(--shadow-2);
}

.testimonials-modal .highlight-btn.ghost {
  background: transparent;
  outline: 1px solid var(--onyx);
}

/* === Technical Skills: icon grid === */
.skills-icons {
  display: grid;
  gap: 28px;
}

.skill-group h4 {
  margin: 0 0 10px 0;
  color: var(--white-2);
}

.icon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-tile {
  background: var(--eerie-black-2);
  border-radius: 14px;
  box-shadow: var(--shadow-2);
  display: grid;
  place-items: center;
  padding: 12px;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.icon-tile:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-3);
  background: var(--onyx);
}

.icon-64 {
  width: 36px;   /* adjust if your SVGs need larger/smaller */
  height: 36px;
  display: block;
}

/* If any SVG appears too dark on your theme, brighten slightly
.icon-64 { filter: contrast(1.05) saturate(1.05); }
*/

/* === Icon tooltips (hover + keyboard) === */
.icon-tile {
  position: relative;
  outline: none; /* we'll style focus state below */
}

/* Tooltip bubble */
.icon-tile::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: 100%;                 /* place above the tile */
  transform: translate(-50%, -6px);
  background: var(--onyx);
  color: var(--white-2);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--fs-7);
  line-height: 1;
  white-space: nowrap;
  box-shadow: var(--shadow-2);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2;
}

/* Little arrow under the bubble */
.icon-tile::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% - 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--onyx);
  opacity: 0;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2;
}

/* Show tooltip on hover or keyboard focus */
.icon-tile:hover::after,
.icon-tile:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, -12px);
}
.icon-tile:hover::before,
.icon-tile:focus-visible::before {
  opacity: 1;
}

/* Optional: a subtle focus ring that matches your theme */
.icon-tile:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 214, 10, .35); /* tweak if needed */
  border-radius: 14px;
}

/* === Resume Download Button === */
.resume-download {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  padding: 0.6rem 1.2rem;
  margin-top: 1rem;

  background: rgba(255, 255, 255, 0.08);       /* frosted look */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;

  color: var(--white-2);
  font-weight: 500;
  font-size: var(--fs-6);
  text-decoration: none;

  transition: background 0.25s ease, transform 0.15s ease;
}

.resume-download ion-icon {
  font-size: 1.2rem;
}

.resume-download:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.resume-download:active {
  transform: translateY(0);
}

/* Certificates gallery */
.cert-gallery { margin-top: 16px; }
.cert-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1200px) {
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .cert-grid { grid-template-columns: 1fr; }
}

.cert-card { display: block; }
.cert-card .cert-thumb-btn {
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.cert-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;           /* keeps tiles even; adjust if needed */
  object-fit: cover;
}

.cert-card .cert-thumb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.12);
  filter: brightness(1.03);
}


/* Project modal (matches testimonials modal look/feel) */
.project-modal-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
  pointer-events: none;
  visibility: hidden;
  z-index: 22;
}

.project-modal-container.active {
  pointer-events: all;
  visibility: visible;
}

.project-modal {
  background: var(--eerie-black-2);
  position: relative;
  padding: 15px;
  margin: 15px 12px;
  border: 1px solid var(--jet);
  border-radius: 14px;
  box-shadow: var(--shadow-5);
  transform: scale(1.05);
  opacity: 0;
  transition: var(--transition-1);
  z-index: 2;
  max-width: 880px;
}

.project-modal-container.active .project-modal {
  transform: scale(1);
  opacity: 1;
}

/* Portfolio modal typography to match Highlights modal */
.project-modal .modal-title {
  color: var(--white-2);
}

.project-modal .project-cat {
  color: var(--light-gray-70);
}

/* Make all injected content use the same body color */
.project-modal .modal-content {
  color: var(--light-gray-70);
}
.project-modal .modal-content p,
.project-modal .modal-content li,
.project-modal .modal-content span,
.project-modal .modal-content div {
  color: var(--light-gray-70);
}

/* Links inside Project modal — no underlines */
.project-modal .modal-content a {
  text-decoration: none;
  opacity: 1;                 /* keep text fully opaque */
}
.project-modal .modal-content a:hover {
  text-decoration: none;
}

/* Keep native desktop styling; only tweak phones */
@media (max-width: 580px) {
  /* These are your horizontal scrollers on mobile */
  .has-scrollbar {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;            /* ensure horizontal scroll */
    scrollbar-gutter: stable;    /* reserve space so the track stays visible */
    scrollbar-width: thin;       /* Firefox: visible & thin */
    scrollbar-color: var(--orange-yellow-crayola) var(--onyx);
  }

  /* WebKit (iOS Safari/Chrome) */
  .has-scrollbar::-webkit-scrollbar {
    height: 6px;                 /* horizontal bar height */
  }
  .has-scrollbar::-webkit-scrollbar-track {
    background: var(--onyx);
    border-radius: 5px;
  }
  .has-scrollbar::-webkit-scrollbar-thumb {
    background: var(--orange-yellow-crayola);
    border-radius: 5px;
  }
}

/* =========================================================
   Mobile scroll hint bar (always visible, decorative)
   Applies to Highlights (.testimonials-list) and
   Tech I Use (.clients-list)
   ========================================================= */
@media (max-width: 580px) {

  /* Ensure the lists are positioned for pseudo-elements */
  .testimonials-list,
  .clients-list {
    position: relative;
    padding-bottom: 18px;   /* space for the hint bar */
  }

  /* Track (thin dark line) */
  .testimonials-list::after,
  .clients-list::after {
    content: "";
    position: absolute;
    left: 25px;             /* matches your list padding/gutter */
    right: 25px;
    bottom: 8px;            /* sits above the real scrollbar area */
    height: 4px;
    background: var(--onyx);
    border-radius: 4px;
    pointer-events: none;
    z-index: 1;
  }

  /* Thumb (short yellow segment to suggest “scroll me”) */
  .testimonials-list::before,
  .clients-list::before {
    content: "";
    position: absolute;
    left: 25px;             /* start at the same inset as the track */
    bottom: 8px;
    width: 92px;            /* length of the “hint”; tweak as you like */
    height: 4px;
    background: var(--orange-yellow-crayola);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
  }
}

/* =========================================================
   Certificate Lightbox — Frameless & Centered
   ========================================================= */

.cert-lightbox {
  position: fixed;
  inset: 0;
  display: none;                /* hidden by default */
  align-items: center;          /* vertical centering */
  justify-content: center;      /* horizontal centering */
  z-index: 30;                  /* above other modals */
  background: rgba(0, 0, 0, 0.85); /* dark overlay backdrop */
}

.cert-lightbox.active {
  display: flex;                /* show lightbox when active */
}

/* Optional: if you keep the backdrop element for click-to-close,
   keep it invisible (no extra gray frame) */
.cert-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: transparent;      /* keep transparent if using container bg */
}

/* Panel acts only as an image wrapper (no frame) */
.cert-lightbox-panel {
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
}

/* Certificate image */
.cert-lightbox-panel img {
  display: block;
  max-width: min(92vw, 1400px); /* responsive width */
  max-height: 90vh;             /* keep within viewport height */
  width: auto;
  height: auto;
  border-radius: 6px;           /* optional, set to 0 for square corners */
}

/* =========================================================
   Mobile tap cues for Highlights cards (testimonials)
   ========================================================= */
@media (max-width: 580px) {
  /* Target only the clickable cards in Highlights */
  .testimonials-list .content-card {
    position: relative;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  }

/* Mobile clickable hint: subtle grey arrow icon */
.testimonials-list .content-card::after {
  content: "↗";                     /* simple arrow glyph */
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 18px;                   /* slightly larger than text */
  color: rgba(255, 255, 255, 0.45);  /* subtle greyish white */
  pointer-events: none;
}

  /* Touch feedback */
  .testimonials-list .content-card:active {
    transform: scale(0.985);
    box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.35) inset, var(--shadow-1);
    filter: brightness(1.02);
  }

  /* Optional: if you prefer just an icon instead of a pill, swap ::after for this:
  .testimonials-list .content-card::after {
    content: "↗";
    top: 10px; right: 12px; font-size: 16px; padding: 0;
    background: transparent; border: 0; color: var(--orange-yellow-crayola);
  } */
}

/* Accessibility focus ring for keyboard users (tab on mobile with external keyboard) */
.testimonials-list .content-card:focus-visible {
  outline: 2px solid var(--orange-yellow-crayola);
  outline-offset: 3px;
  border-radius: 12px;
}

/* =========================================================
   Mobile hint for "Tech I Use" (clients-list) — FIXED
   ========================================================= */
@media (max-width: 580px) {
  .clients-list {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
  }

  /* New: pill sits in normal flow, under the paragraph, left-aligned */
  .tech-tap-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin: 8px 0 6px 2px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1;

    color: var(--light-gray-70);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    backdrop-filter: blur(4px);

    pointer-events: none;

    /* 👇 new lines for floating effect */
    animation: techFloat 2.4s ease-in-out infinite;
    will-change: transform;
  }

  @keyframes techFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
  }

  /* tiny press feedback */
  .clients-list .clients-item img {
    transition: transform .12s ease, filter .2s ease;
  }
  .clients-list .clients-item:active img {
    transform: scale(0.985);
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tech-tap-hint { animation: none !important; }
}

/* Prevent duplicate X in the Project modal (Portfolio) */
.project-modal .modal-close-btn::before {
  content: none !important;
}

/* FIXING VIEW FULL RESUME BUTTON ALIGNMENT FOR MOBILE VIEW ONLY  -- Right now it's no longer use because we moved the view my resume button at the very bottom
if in future when we use the button at the top like before then this code block will be used*/

/* Resume: keep the "View Full Resume" button separated from Education on phones */
@media (max-width: 580px) {
  /* the <p class="about-text"> that wraps the link */
  [data-page="resume"] > .about-text {
    margin: 10px 0 18px 0;   /* top | right/left | bottom */
  }

  /* optional: make the button a tidy inline pill on mobile */
  [data-page="resume"] .resume-download {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
}

/*FIXING BUTTON CODE BLOCK ENDS HERE*/

/* Resume bottom button alignment */
[data-page="resume"] .resume-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

[data-page="resume"] .about-text:last-of-type {
  text-align: center;
  margin: 32px 0 20px;
}

/* =========================================================
   Resume bottom CTA: centered pill, both desktop & mobile
   ========================================================= */

/* Center the section-level paragraph that holds the CTA */
[data-page="resume"] .resume-cta {
  text-align: center;
  margin: 32px 0 20px;
  padding: 0; /* ensure no padded outer "pill" */
}

/* The anchor is just a wrapper — no background/border/shadow */
[data-page="resume"] .resume-cta > a {
  display: inline-block;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Keep the original pill button design */
[data-page="resume"] .resume-cta .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Force readable light text & icon inside the pill */
[data-page="resume"] .resume-cta .btn span,
[data-page="resume"] .resume-cta .btn ion-icon {
  color: var(--white-2) !important;
  fill: currentColor;
}

/* =========================================================
   Activity Timeline (below Tech I Use)
   ========================================================= */
.activity {
  margin-top: 28px;
}

.activity .section-title {
  /* your .h3 already styles titles; this just adds a little space */
  margin-bottom: 12px;
}

.activity-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;                 /* no scroll needed for one pill; wraps nicely if more are added */
}

.activity-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;

  background: var(--eerie-black-2);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  color: var(--white-2);
  text-decoration: none;

  box-shadow: var(--shadow-2);
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}

.activity-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-3);
  background: rgba(255,255,255,0.06);
}

.activity-pill:active {
  transform: translateY(0);
}

.pill-emoji {
  font-size: 18px;
  line-height: 1;
}