:root {
    /* COLORS */
     --color-primary-background: #EFEFEF;
     --color-secondary-background: rgb(30, 61, 59);
     --color-tertiary-background: #D8E1E0;
     --color-primary: #1e3d3b;
     --color-accent: #0055ff;
    /* FONTS */
     --font-primary: "Bebas Neue", sans-serif;
     --font-secondary: "Roboto Mono", monospace;
    /* FONT SIZES */
     --font-large: 100px;
     --font-medium: 36px;
     --font-semi-medium: 28px;
     --font-small: 16px;
     --font-weight-light: 200;
     --font-style-normal: normal;
     --grid-columns: 12;
     --grid-gap: 24px;
     --column-width: calc((100% - (var(--grid-gap) * (var(--grid-columns) - 1))) / var(--grid-columns));
    /* GRID SYSTEM */
     --grid-columns: 12;
     --grid-gutter: 24px;
     --grid-max-width: 1440px;
     --grid-padding: 24px;
}
 .col-1 {
     grid-column: span 1;
}
 .col-2 {
     grid-column: span 2;
}
 .col-3 {
     grid-column: span 3;
}
 .col-4 {
     grid-column: span 4;
}
 .col-5 {
     grid-column: span 5;
}
 .col-6 {
     grid-column: span 6;
}
 .col-7 {
     grid-column: span 7;
}
 .col-8 {
     grid-column: span 8;
}
 .col-9 {
     grid-column: span 9;
}
 .col-10 {
     grid-column: span 10;
}
 .col-11 {
     grid-column: span 11;
}
 .col-12 {
     grid-column: span 12;
}
/**MAIN CSS **/
 * {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
 body {
     background-color: var(--color-primary-background);
     cursor: url('images/balloon.png'), auto;
}
 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     font-family: var(--font-primary);
     font-size: var(--font-medium);
     padding-top: 50px;
     padding-left: 40px;
     padding-right: 40px;
     width: 100%;
     margin: 0 auto;
    /* Sticky properties */
     position: sticky;
     top: 0;
     z-index: 1000;
    /* Glossy background styles */
     background: linear-gradient(to bottom,rgba(239, 239, 239, 0.6), 
    /* top - more visible */
     rgba(255, 255, 255, 0.3), 
    /* middle */
     rgba(255, 255, 255, 0) 
    /* bottom - fade to transparent */
     );
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     animation: fade-down 0.5 0.4s backwards;
}
 nav,nav a,nav li {
     font-family: var(--font-primary);
     font-size: var(--font-medium);
}
 @media (max-width: 1300px) {
     nav,nav a,nav li {
         font-size: var(--font-semi-medium);
    }
}
 @media (max-width: 900px) {
     nav,nav a,nav li {
         font-size: var(--font-small);
         gap: 2px ;
    }
}
 .logo {
     width: 100px;
     animation: fade-down 0.5s 0.2s backwards; 
}
/**Navigation section starts here **/
.nav-links {
  list-style: none;
  display: flex;
  gap: 80px;
  color: var(--color-primary);
}

.nav-links li a {
  position: relative;
  display: inline-block;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: bold;
  overflow: hidden;
}

/* Cut effect using ::before and ::after */
.nav-links li a::before,
.nav-links li a::after {
  content: attr(data-text); /* NOT attr(href) */
  position: absolute;
  left: 0;
  width: 100%;
  color: var(--color-primary);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.nav-links li a::before {
  top: 0;
  clip-path: inset(0 0 50% 0); /* top half */
}

.nav-links li a::after {
  bottom: 0;
  clip-path: inset(50% 0 0 0); /* bottom half */
}

.nav-links li a:hover::before {
  transform: translateY(-3px) skewX(-10deg);
  background: var(--color-accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-left: 10px;
  transition: all 300ms ease;
  overflow: hidden;
  height: 3rem;
}

.nav-links li a:hover::after {
  transform: translateY(3px) skewX(10deg);
  background: var(--color-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: -1px;
  left: 0px;
}

.nav-links li a:hover {
  color: transparent; /* hide the original text */
}





 .hamburger {
     display: none;
     flex-direction: column;
     cursor: pointer;
}
 .hamburger span {
     height: 3px;
     width: 25px;
     background: var(--color-background);
     margin: 4px 0;
     transition: 0.4s;
}
/**Navigation media query - Desktop **/
 @media (max-width: 768px) {
     .nav-links {
         display: none;
         flex-direction: column;
         width: 100%;
         background-color: var(--color-secondary-background);
         position: absolute;
         top: 60px;
         left: 0;
    }
     .nav-links.active {
         display: flex;
    }
     .hamburger {
         display: flex;
    }
}
/* Intro box section */
 .intro-box {
     max-width: 900px;
    /* ✅ Control the width here */
     min-width: 375px;
     width: 100%;
     margin: 0 auto;
    /* ✅ Center horizontally */
     position: relative;
     padding: 110px 20px;
     animation: fade-down 0.5s 0.2s backwards;
    /* ✅ Optional: adds padding on small screens */
}
/* Intro media query - Mobile */
 @media (min-width: 375px) {
     .intro-box {
         padding: 150px 20px;
    }
}
/* Intro media query - Desktop */
 @media (min-width: 700px) {
     .intro-box {
         padding: 160px 0px;
    }
}
/* Hero section */
 .line-row {
     display: flex;
     justify-content: space-between;
     align-items: center;
     border-top: 2px solid black;
     border-bottom: 2px solid black;
     padding: 4px 0;
     font-weight: bold;
     font-size: var(--font-medium);
     z-index: 1;
     position: relative;
     font-family: var(--font-primary);
     font-weight: var();
     font-style: var(--font-style-normal);
     font-size: var(--font-medium);
}
/* Hero section media query - Mobile */
 @media (min-width: 375px) {
     .line-row {
         font-size:var(--font-small);
    }
}
/* Hero section media query - Desktop */
 @media (min-width: 700px) {
     .line-row{
         font-size: var(--font-medium);
    }
}
 .label-left{
     color: var(--color-primary);
}
 .label-right{
     color: var(--color-primary);
}
/* Name-Blue Styling */
 .name-blue {
     font-weight: bold;
     color: var(--color-accent);
     letter-spacing: 6px;
     font-family: var(--font-primary);
     font-style: var(--font-style);
     font-weight: 300;
     font-size: var(--font-large);
    
}
/* Name-Blue Styling media query - Mobile */
 @media (min-width: 375px) {
     .name-blue {
         font-size: var(--font-medium);
    }
}
/* Name-Blue Styling media query - Desktop */
 @media (min-width: 700px) {
     .name-blue {
         font-size: var(--font-large);
    }
}
/* Name-Black Styling */
 .name-black {
     font-size: var(--font-medium);
     font-weight: bold;
     color: var(--color-primary);
     font-family: var(--font-primary);
     font-style: var(--font-style-normal);
     font-weight: 300;
     font-size: var(--font-large);
}
/* Name-Black media Styling media query- Mobile*/
 @media (min-width: 375px) {
     .name-black {
         font-size: var(--font-medium);
    }
}
/* Name-Black media Styling media query- Desktop*/
 @media (min-width: 700px) {
     .name-black {
         font-size: var(--font-large);
    }
}
/* Balloon Image */
 .img-container {
     position: relative;
     width: 100%;
     height: 0;
     z-index: 2;
}
 .balloon-img {
     position: absolute;
     top: -140px;
     left: 50%;
     transform: translateX(-50%);
     width:190px;
     max-width: 100%;
     height: auto;
     z-index: 3;
}
/* Balloon Image media query - Mobile */
 @media (min-width: 375px) {
     .balloon-img {
         top: -239px;
         width: 200px;
         height: auto;
    }
}
/* Balloon Image media query - Desktop */
 @media (min-width: 900px) {
     .balloon-img {
         top: -430px;
         width: 350px;
         height: auto;
    }
}
/* Description */
 .desc {
     border-top: 2px solid black;
     padding-top: 20px;
     font-size: var(--font-small);
     line-height: 1.6;
     margin-top: 10px;
     z-index: 1;
     position: relative;
     font-family: var(--font-secondary);
     font-optical-sizing: auto;
     font-style: var(--font-style-normal);
     color: var(--color-primary) 
}
/* Description media query - Mobile */
 @media (min-width: 375px) {
     .desc {
         font-size: var(--font-small);
    }
}
/* Description media query - Desktop */
 @media (min-width: 900px) {
     .desc {
         font-size: var(--font-small);
    }
}
 .project-section {
     background-color: var(--color-secondary-background);
    /* your dark green/teal bg */
     color: var(--color);
}
 .project-container {
     max-width: 1200px;
     
     padding-bottom: 0px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     gap: 40px;
}
 .project-container-top {
     max-width: 1200px;
     margin: auto;
     padding-top: 100px;
     padding-bottom: 0px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     gap: 40px;
}
 @media (max-width: 768px) {
     .project-container, .project-container-top {
         padding-top: 30px;
         flex-direction: column;
         text-align: center;
        /* optional, for better mobile alignment */
    }
     .project-image img {
         max-width: 100%;   
         grid-column: span 6;
         height: auto;
         display: flex;
         justify-content: center;
         gap: var(--grid-gap);
    }
}
 .project-text {
     flex: 1 1 45%;
     max-width: 100%;
     color: var(--color-primary);
}
 @media (max-width: 768px) {
     .project-text {
         text-align: justify;
    }
}
 .project-text h3 {
     font-size: var(--font-small);
     font-weight: bold;
}
 .project-text span {
     color: var(--color-primary-background);
    /* or Walmart brand color if desired */
}
 .project-text p {
     margin: 20px 0;
     font-family: var(--font-secondary);
     font-size: var(var(--font-small));
     line-height: 1.6;
}
 .view-report {
     display: inline-block;
     background: var(--color-primary-background);
     color: var(--color-primary);
     padding: 10px 20px;
     text-decoration: none;
     font: var(--font-medium);
     transition: 0.3s ease;
}
 a, .view-report{
     font-family: var(--font-secondary);
     font-size: var(--font-small);
}
 .view-report:hover {
     background: transparent;
     border: 2px solid white;
     color: var(--color-primary-background);
}
 @media (max-width: 768px) {
     .view-report {
         width: 100%;
         text-align: center;
    }
}
 .project-image {
     flex: 1 1 45%;
     display: flex;
     justify-content: center;
     padding: 30px;
}
 .project-image img {
     max-width: 100%;
     height: auto;
}


@media (max-width: 900px) {
     .project-image {
         
         padding: 5px;
    }
}


 .project-section {
     background-color: var(--color-secondary-background);
     padding:0;
     margin-top: 100px;
     position: relative;
     z-index: 0;
}
 @media (min-width: 375px) {
     .project-section {
         margin-top: 150px ;
         padding: 150px 20px;
    }
}
 @media (min-width: 900px) {
     .project-section {
         margin-top: 0px ;
         padding: 150px 20px;
    }
}
 .overlap-image-container {
     position: relative;
     width: 100%;
     margin-top: -180px;
    /* Pull image upward into the white section */
     margin-bottom: -320px;
    /* Pull into green section if needed */
     z-index: 2;
     text-align: center;
}
 .overlap-image {
     max-width: 850px;
     width: 100%;
     height: auto;
     display: inline-block;
     padding: 20px 10px 0px 10px;
    /* Adjusted margin for better spacing */
}
 @media (min-width: 375px) {
     .overlap-image {
         max-width: 100%;
         width: 100%;
         height: auto;
         padding: 60px 0px 0px 0px;
        /* Adjusted margin for better spacing */
    }
}
 @media (min-width: 900px) {
     .overlap-image {
         max-width: 60%;
         width: 100%;
         height: auto;
         padding: 0px 0px 0px 0px;
        /* Adjusted margin for better spacing */
    }
}
 .project-text {
     font-family: var(--font-primary);
     font-weight: 200;
     font-style: var(--font-style-normal);
     font-size: var(--font-medium);
}
 .project-desc {
     font-family: var(--font-secondary);
     font-size: var(--font-small);
     color: var(--color-primary-background);
}
 @media (min-width: 375px) {
     .project-desc {
         text-align: justify;
         word-spacing: -1.5px;
    }
}
 hr{
     width: 100%;
     color:var(--color-primary-background);
}
 .form-section {
     background-color: var(--color-secondary-background);
    /* your dark green/teal bg */
     color: var(--color);
}
 .form-container {
     max-width: 1200px;
     margin: auto;
     padding-bottom: 0px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     gap: 40px;
}
 @media (max-width: 768px) {
     .form-container {
         
         flex-direction: column;
         text-align: center;
        /* optional, for better mobile alignment */
    }
     .form-image img {
         max-width: 100%;
         grid-column: span 6;
         height: auto;
         display: flex;
         justify-content: center;
         gap: var(--grid-gap);
    }
}
 .form-text {
     flex: 1 1 45%;
     max-width: 100%;
}
 @media (max-width: 768px) {
     .form-text {
         text-align: justify;
    }
}
 .form-report {
     display: inline-block;
     background: var(--color-primary-background);
     color: var(--color-primary);
     padding: 10px 20px;
     text-decoration: none;
     font: var(--font-medium);
     transition: 0.3s ease;
}
 a, .form-report{
     font-family: var(--font-secondary);
     font-size: var(--font-small);
}
 .form-report:hover {
     background: transparent;
     color: var(--color-primary-background);
}
 @media (max-width: 768px) {
     .form-report {
         width: 100%;
         text-align: center;
    }
}
 .form-image {
     flex: 1 1 45%;
     display: flex;
     justify-content: center;
     padding: 20px;
}
 .form-image img {
     max-width: 100%;
     height: auto;
}
 .form-section {
     background-color: var(--color-tertiary-background);
     padding:0;
     
     position: relative;
     z-index: 0;
}
 @media (min-width: 375px) {
     .form-section {
         
         padding: 150px 20px;
    }
}
 @media (min-width: 900px) {
     .form-section {
         margin-top: 0px ;
         padding: 150px 20px;
    }
}
 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 20px;
}
 .form-row {
     display: flex;
     gap: 20px;
     flex-wrap: wrap;
}
 .form-group {
     flex: 1;
     display: flex;
     flex-direction: column;
     font-family: var(--font-primary);
}
 .full-width {
     width: 100%;
}
 input, textarea {
     padding: 10px;
     font-size: 1rem;
     border: 1px solid #ccc;
     border-radius: none;
}
 .submit-btn {
     padding: 12px 20px;
     font-size: 1rem;
     background-color: var(--color-secondary-background);
     font-family: var(--font-secondary);
     color: white;
     border: none;
     border-radius: none;
     cursor: pointer;
     transition: background-color 0.2s ease;
}
 .submit-btn:hover {
     background-color: #005fa3;
}
/* Responsive */
 @media (max-width: 768px) {
     .form-container {
         flex-direction: column;
         align-items: center;
    }
     .form-row {
         flex-direction: column;
    }
     .form-content {
         max-width: 100%;
    }
}
html {
  scroll-behavior: smooth;
}

.project-section-desc {
     background-color: var(--color-secondary-background);
    /* your dark green/teal bg */
     color: var(--color);
}
 .project-container-desc {
     max-width: 1200px;
     margin: auto;
     padding-top: 90px;
     padding-bottom: 0px;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
     gap: 40px;
}

 @media (max-width: 768px) {
     .project-container-desc {
         padding-top: 30px;
         padding-left: 24px;
         padding-right: 24px;
         flex-direction: column;
         text-align: center;
        /* optional, for better mobile alignment */
    }
     .project-image img {
         max-width: 100%;
         grid-column: span 6;
         height: auto;
         display: flex;
         justify-content: center;
         gap: var(--grid-gap);
    }
}

h3, solution-step{
  color: yellow;
}

 body.project-page {
     background-color: var(--color-secondary-background);
}


    .project-page nav {
    background: linear-gradient(to bottom,
                rgba(30, 62, 62, 0.4),  /* Match your green */
                rgba(30, 62, 62, 0.3),
                rgba(30, 62, 62, 0.2));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(20px);
    }

.project-page nav {
  background-color: rgba(30, 62, 62, 0.1);
}

/* Default nav links (e.g., for index) */
.nav-links li a {
  text-decoration: none;
  
}

/* White nav links for project pages */


/* Cut effect using ::before and ::after */
.project-page .nav-links li a::before,
.project-page .nav-links li a::after {
  content: attr(data-text); /* NOT attr(href) */
  position: absolute;
  left: 0;
  width: 100%;
  color: var(--color-primary-background);
  transition: transform 0.3s ease;
  pointer-events: none;
}

.project-page .nav-links li a::before {
  top: 0;
  clip-path: inset(0 0 50% 0); /* top half */
}

.project-page .nav-links li a::after {
  bottom: 0;
  clip-path: inset(50% 0 0 0); /* bottom half */
}

.project-page .nav-links li a:hover::before {
  transform: translateY(-3px) skewX(-10deg);
  background: var(--color-accent);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  padding-left: 10px;
  transition: all 300ms ease;
  overflow: hidden;
  height: 3rem;
}

project-page .nav-links li a:hover::after {
  transform: translateY(3px) skewX(10deg);
  background: var(--color-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  top: -1px;
  left: 0px;
}

.nav-links li a:hover {
  color: transparent; /* hide the original text */
}







.scroll-container {
  overflow-x: auto; /* Enable horizontal scrolling by default */
  white-space: nowrap; /* Keep images in a single line by default */
  padding-top: 0px;
  -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
  scroll-snap-type: x mandatory; /* Optional: for snapping to images on scroll */
  display: block; /* Ensure it behaves like a block container */
}

.scroll-container img {
  display: inline-block; /* Essential for nowrap to work with images */
  padding: 90px; /* Consistent padding */
  height: auto; /* Maintain aspect ratio */
  scroll-snap-align: start; /* Optional: for snapping to images */
  /* Default width for desktop (or larger screens before specific media queries kick in) */
  /* This ensures all 5 images fit in one row without breaking */
  width: calc(20% - 10px); /* 20% for each of 5 images, minus padding */
  box-sizing: border-box; /* Include padding in the width calculation */
}

/* --- Mobile View Adjustments (portrait phones) --- */
@media (max-width: 376px) {
  .scroll-container img {
    /* Show one image and a peek of the next */
    width: calc(90vw - 20px); /* 90% of viewport width, accounting for padding */
    padding: 10px; /* Reduced padding for smaller screens */
    box-sizing: border-box;
  }

  .scroll-container {
    padding-left: 10px; /* Match image padding for alignment */
    padding-right: 10px; /* Ensures space at the end */
  }
}

/* --- Tablet View Adjustments (larger phones / small tablets) --- */
@media (max-width: 768px) {
  .scroll-container img {
    /* Show one image and a larger peek, or two images slightly cut off */
    width: 45%; /* 60% of viewport width, accounting for padding */
    padding: 10px; /* Reduced padding */
    box-sizing: border-box;
    padding-top: 40px;
  }

  .scroll-container {
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* --- Desktop View (Fixing the "two rows" issue) --- */
/* This media query applies to screens wider than 768px (e.g., desktops) */
@media (min-width: 769px) {
  .scroll-container {
    /* Explicitly keep it to one row */
    white-space: nowrap;
    /* Hide the scrollbar if all images fit well, or keep it if they overflow subtly */
    overflow-x: auto; /* Use 'auto' to show scrollbar only if content overflows */
    /* If you really want to force no scrollbar even on overflow, use 'hidden',
       but this will cut off content. 'auto' is usually better. */
    padding: 0; /* Reset container padding if desired on desktop */
  }

  .scroll-container img {
    /* Adjust width to ensure all 5 images fit horizontally */
    /* Total content width needed: (img_width + 2*padding) * 5 */
    /* Example: If you want 5 images to fit, each should be ~20% of the container. */
    width: 19%; /* 20% of parent width MINUS (20px left + 20px right padding) */
    /* If 20% makes them too small, you can try slightly larger and accept a scrollbar */
    /* width: 20%; and allow images to overflow slightly, which overflow-x: auto handles */
    padding: 15px; /* Restore desktop padding */
    padding-top: 90px;
  }
}
.site-footer{
    background-color: var(--color-tertiary-background);
}

@keyframes appear {
    from {
        opacity: 0;
        clip-path: inset(100% 100% 50% 50%);
        scale: 0.5;
    }
    to{
        opacity: 1;
    }
}

.project-image, .contact-form {
    animation: appear linear;
    animation-timeline:view();
    animation-range: entry 0% cover 50%;
}


@keyframes fade-down {
    0% {
        opacity: 0;
        transform: translateY(-30px); scale:(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0px); scale:(1);
    }
}

.related-projects {
    padding: 4rem 2rem;
    background-color: var(--color-tertiary-background);
    color: var(--color-primary-background);
    text-align: center;
  }
  
  .related-projects h1 {
    font-family: var(--font-primary);
    font-size: var(--font-medium);
    color: var(--color-primary);
    margin-bottom: 2rem;
  }
  
  .related-projects-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    
  }
  
  .project-card {
    background-color: var(--color-primary);
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3rem;
    border-radius: 8px;
    gap: 3rem;
  }
  
  .project-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  
  .project-card-content h3 {
    font-family: var(--font-primary);
    font-size: var(--font-medium);
    margin: 0 0 1rem 0;
    color: var(--color-primary-backgrounds);
    text-align: justify;
  }
  
  .project-card-content p {
    font-family: var(--font-secondary);
    font-size: var(--font-small);
    color:var(--color-primary-background);
    margin: 0 0 2rem 0;
    text-align: justify;
  }
  
  
  
  .project-card-image {
    flex: 1;
    max-width: 200px;
  }
  
  .project-card-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    object-fit: cover;
  }
  
 /* Responsive stacking */
@media (max-width: 1000px) {
    .project-card-wrapper {
      flex-direction: column;
      gap: 2rem;
    }
  
    .project-card {
      max-width: 100%;
      flex-direction: column;
      text-align: center;
      padding: 2rem;
    }
  
    .project-card-image {
      max-width: 100%;
    }
  }



  .scroll-container-2 {
    overflow-x: auto; /* Enable horizontal scrolling by default */
    white-space: nowrap; /* Keep images in a single line by default */
    padding-top: 0px;
    display: block; /* Ensure it behaves like a block container */
  }
  
  .scroll-container-2 img {
    display: inline-block; /* Essential for nowrap to work with images */
    padding: 20px; /* Consistent padding */
    scroll-snap-align: start; /* Optional: for snapping to images */
    width: 50%;
    box-sizing: border-box; /* Include padding in the width calculation */
  }
  
  /* --- Mobile View Adjustments (portrait phones) --- */
  @media (max-width: 376px) {
    .scroll-container-2 img {
      /* Show one image and a peek of the next */
      width: calc(90vw - 20px); /* 90% of viewport width, accounting for padding */
      padding: 10px; /* Reduced padding for smaller screens */
      box-sizing: border-box;
    }
  
    .scroll-container-2 {
      padding-left: 10px; /* Match image padding for alignment */
      padding-right: 10px; /* Ensures space at the end */
    }
  }

  .project-text-2 h1 {
    flex: 1 1 45%;
    max-width: 100%;
    color: var(--color-primary)
}
@media (max-width: 768px) {
    .project-text-2 h1{
        text-align: justify;
   }
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
  }
  
  .social-links img {
    width: 32px;
    height: 32px;
    filter: grayscale(100%);
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
  }
  
  .social-links a:hover img {
    transform: scale(1.2);
    filter: grayscale(0%);
  }