body {
     background: linear-gradient(135deg, #121137 0%, #1a1a4f 100%);
     color: #ffffff;
 }
 /* Width of the scrollbar */
 ::-webkit-scrollbar {
     width: 12px;
     height: 12px;
     /* For horizontal scrollbars */
 }

 /* Background of the scrollbar track */
 ::-webkit-scrollbar-track {
     background:  #121137;
     border-radius: 50px;
 }

 /* Handle of the scrollbar */
 ::-webkit-scrollbar-thumb {
     background-color: #5DE9D9;
     /* Handle color */
     border-radius: 10px;
     border: 3px solid transparent;
     /* Adds padding around handle */
 }

 /* Hover effect on the scrollbar handle */
 ::-webkit-scrollbar-thumb:hover {
     background-color: #5DE9D9;
     border-radius: 2px;
 }
 /* For Firefox */
 * {
     scrollbar-width: thin;
     scrollbar-color: #5DE9D9 #121137;
 }

 .nav {
     background: #121137;
     /* Solid color matching the background gradient start */
     border-bottom: 1px solid #5DE9D9;
     /* Teal border to match your accent color */
     box-shadow: 0 0 10px 0 rgba(93, 233, 217, 0.5);
     transition: all 0.3s ease;
     }
     
.nav:hover {
    box-shadow: 0 0 20px 0 rgba(93, 233, 217, 0.8);
    /* Increased glow effect on hover */
 }

 .icon:hover {
     transform: scale(1.4);
 }

 .boxes {
     overflow: hidden;
     display: inline-block;
     animation: anime 10s linear infinite;
 }

 @keyframes anime {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-49%);
     }
 }

 .heading1,
 .heading2 {
     -webkit-text-stroke: 2px #5DE9D9;
     color: rgba(93, 233, 217, 0.1);
     text-shadow: 0 0 20px rgba(93, 233, 217, 0.5),
         0 0 40px rgba(93, 233, 217, 0.3),
         0 0 60px rgba(93, 233, 217, 0.2);
 }

 @media (max-width: 768px) {
     .nav-mid {
         display: none;
     }

     .nav-icon {
         gap: 1rem;
     }

     .intro {
         grid-template-columns: 1fr;
     }

     .intro-left,
     .intro-right {
         padding: 2rem;
     }

     .heading1 {
         font-size: 3rem;
     }

     .heading2 {
         font-size: 2rem;
     }
 }

 .char {
     display: inline-block;
     opacity: 0;
     transform: translateY(50px);
 }

 .fade-in {
     opacity: 0;
     transform: translateY(20px);
 }
  .nav-name-1 {
      transition: transform 0.2s ease-in-out;
  }

  .nav-name-2 {
      transition: transform 0.2s ease-in-out;
  }

  .nav-first:hover .nav-name-1 {
      transform: translateY(-110%);
  }

  .nav-first:hover .nav-name-2 {
      transform: translateY(-93%);
  }

 .nav-item {
     position: relative;
     overflow: hidden;
 }

 .nav-item::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: -1%;
     width: 100%;
     height: 2px;
     background-color: #5DE9D9;
     transform: translateX(-100%);
     transition: transform 0.3s ease;
 }

 .nav-item:hover::after {
     transform: translateX(0);
 }

 .nav-item p {
     padding: 5px 14px;
     /* background-color: #040404; */
 }

 /* skills section animation */
  .skill-h1 {
      -webkit-text-stroke: 2px #5DE9D9;
      /* Teal stroke */
      color: rgba(93, 233, 217, 0.1);
      /* Very light teal fill */
  }
  .skill-h1:hover {
      color: rgba(93, 233, 217, 0.3);
      text-shadow: 0 0 25px rgba(93, 233, 217, 0.8),
          0 0 50px rgba(93, 233, 217, 0.6),
          0 0 75px rgba(93, 233, 217, 0.4);
      transform: scale(1.05);
  }

  /* Adjust stroke width for different screen sizes */
  @media (max-width: 1024px) {
      .skill-h1 {
          -webkit-text-stroke: 1.5px #5DE9D9;
      }
  }

  @media (max-width: 768px) {
      .skill-h1 {
          -webkit-text-stroke: 1px #5DE9D9;
      }
  }

  @media (max-width: 480px) {
      .skill-h1 {
          -webkit-text-stroke: 0.5px #5DE9D9;
      }
  }

  .skill-h1::after {
      content: "";
      height: 3px;
      width: 0;
      background-color: #5DE9D9;
      display: block;
      position: absolute;
      bottom: 13%;
      left: 50%;
      transform: translateX(-50%);
      opacity: 0;
      transition: width 0.5s ease, opacity 0.5s ease;
  }

  .skill-h1:hover::after {
      width: 80%;
      opacity: 1;
  }

  .skill {
      filter: blur(10px);
  }

  body {
      background: linear-gradient(135deg, #121137 0%, #1a1a4f 100%);
  }

  .skill-section {
      background: transparent;
  }
  /* project section animation */
   .projects-container {
       background: linear-gradient(135deg, #121137 0%, #0c0c40 100%);
   }

   .project-h1 {
       -webkit-text-stroke: 2px #5DE9D9;
       color: rgba(93, 233, 217, 0.1);
       text-shadow: 0 0 20px rgba(93, 233, 217, 0.5),
           0 0 40px rgba(93, 233, 217, 0.3),
           0 0 60px rgba(93, 233, 217, 0.2);
       position: relative;
       transition: all 0.3s ease;
   }

   .project-h1:hover {
       color: rgba(93, 233, 217, 0.3);
       text-shadow: 0 0 25px rgba(93, 233, 217, 0.8),
           0 0 50px rgba(93, 233, 217, 0.6),
           0 0 75px rgba(93, 233, 217, 0.4);
       transform: scale(1.05);
   }

   .project-h1::after {
       content: "";
       height: 3px;
       width: 0;
       background-color: #5DE9D9;
       display: block;
       position: absolute;
       bottom: -10px;
       left: 50%;
       transform: translateX(-50%);
       opacity: 0;
       transition: width 0.5s ease, opacity 0.5s ease;
   }

   .project-h1:hover::after {
       width: 80%;
       opacity: 1;
   }

   .swiper-slide {
       transition: transform 0.3s ease;
   }

   .swiper-slide-active {
       transform: scale(1.05);
   }

   .swiper-pagination-bullet {
       width: 12px;
       height: 12px;
       background-color: rgba(93, 233, 217, 0.5);
       opacity: 0.5;
   }

   .swiper-pagination-bullet-active {
       background-color: #5DE9D9;
       opacity: 1;
   }

   .swiper-button-next,
   .swiper-button-prev {
       color: #5DE9D9;
   }

   @media (max-width: 1024px) {
       .project-h1 {
           -webkit-text-stroke: 1.5px #5DE9D9;
       }
   }

   @media (max-width: 768px) {
       .project-h1 {
           -webkit-text-stroke: 1px #5DE9D9;
       }
   }

   @media (max-width: 480px) {
       .project-h1 {
           -webkit-text-stroke: 0.5px #5DE9D9;
       }
   }

   /* resume section animation */
        #imgres1,
        #imgres2,
        #imgres0 {
            transform: perspective(1000px) rotateX(-90deg);
            background-size: cover;
            background-position: center;
        }
    
        .resume-h1 {
            -webkit-text-stroke: 2px #c2e6e2;
            color: rgba(68, 238, 238, 0.573);
        }
    
        @media (max-width: 1024px) {
            .resume-h1 {
                -webkit-text-stroke: 1.5px #5DE9D9;
            }
        }
    
        @media (max-width: 768px) {
            .resume-h1 {
                -webkit-text-stroke: 1px #5DE9D9;
            }
        }
    
        @media (max-width: 480px) {
            .resume-h1 {
                -webkit-text-stroke: 0.5px #5DE9D9;
            }
        }
    
        .overlay-resume {
            backdrop-filter: blur(5px) grayscale(100%);
            background-color: rgba(18, 17, 55, 0.5);
            z-index: 20;
        }
    
        .resume-link {
            box-shadow: 0 0 15px #5DE9D9;
            transition: all 0.3s ease;
            z-index: 101;
        }
    
        .resume-link:hover {
            box-shadow: 0 0 25px #5DE9D9;
        }

                 .contact-link {
                     transition: all 0.3s ease;
                     opacity: 0;
                     transform: translateY(50px);
                 }
        
                 .contact-link:hover {
                     transform: translateY(-5px);
                     box-shadow: 0 10px 20px rgba(93, 233, 217, 0.2);
                 }

.thank-you-text {
    -webkit-text-stroke: 2px #5DE9D9;
    color: rgba(93, 233, 217, 0.1);
    text-shadow: 0 0 20px rgba(93, 233, 217, 0.5),
                 0 0 40px rgba(93, 233, 217, 0.3),
                 0 0 60px rgba(93, 233, 217, 0.2);
}

@media (max-width: 1024px) {
    .thank-you-text { -webkit-text-stroke: 1.5px #5DE9D9; }
}
@media (max-width: 768px) {
    .thank-you-text { -webkit-text-stroke: 1px #5DE9D9; }
}
@media (max-width: 480px) {
    .thank-you-text { -webkit-text-stroke: 0.5px #5DE9D9; }
}
/* about section animation */
.about-h1 {
    -webkit-text-stroke: 2px #5DE9D9;
    color: rgba(93, 233, 217, 0.1);
    text-shadow: 0 0 20px rgba(93, 233, 217, 0.5),
        0 0 40px rgba(93, 233, 217, 0.3),
        0 0 60px rgba(93, 233, 217, 0.2);
}

.info-card {
    background: rgba(93, 233, 217, 0.1);
    border: 1px solid rgba(93, 233, 217, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(93, 233, 217, 0.2);
}

.info-card-content {
    transform: translateZ(60px);
}
.about-h1::after {
    content: "";
    height: 3px;
    width: 0;
    background-color: #5DE9D9;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: width 0.5s ease, opacity 0.5s ease;
}
 .about-h1:hover::after {
     width: 80%;
     opacity: 1;
 }
 .about-h1:hover {
     color: rgba(93, 233, 217, 0.3);
     text-shadow: 0 0 25px rgba(93, 233, 217, 0.8),
         0 0 50px rgba(93, 233, 217, 0.6),
         0 0 75px rgba(93, 233, 217, 0.4);
     transform: scale(1.05);
 }
/* contact section animation */
.contact-h1 {
    -webkit-text-stroke: 2px #5DE9D9;
    color: rgba(93, 233, 217, 0.1);
}
.contact-h1:hover {
    color: rgba(93, 233, 217, 0.3);
    text-shadow: 0 0 25px rgba(93, 233, 217, 0.8),
        0 0 20px rgba(93, 233, 217, 0.6),
        0 0 25px rgba(93, 233, 217, 0.4);
    transform: scale(1.05);
}
.contact-h1::after {
    content: "";
    height: 3px;
    width: 0;
    background-color: #5DE9D9;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: width 0.5s ease, opacity 0.5s ease;
}

.contact-h1:hover::after {
    width: 25%;
    opacity: 1;
}

.img-container {
    transition: transform 0.3s ease;
    transform-style: preserve-3d;
}

.img-container:hover {
    transform: perspective(1000px) rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
}



.view-more-projects {
    position: relative;
    z-index: 10;
}

.view-more-projects a {
    box-shadow: 0 0 15px rgba(93, 233, 217, 0.3);
}

.view-more-projects a:hover {
    box-shadow: 0 0 25px rgba(93, 233, 217, 0.5);
}

/* Custom pagination styles */
.swiper-pagination {
    position: relative;
    margin-top: 2rem;
}

.swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    border-radius: 2px;
    background-color: rgba(93, 233, 217, 0.3);
    opacity: 1;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    width: 40px;
    background-color: #5DE9D9;
    box-shadow: 0 0 15px rgba(93, 233, 217, 0.5);
}

/* Custom navigation buttons */
.swiper-button-next,
.swiper-button-prev {
    width: 50px;
    height: 50px;
    background: rgba(93, 233, 217, 0.1);
    border: 2px solid #5DE9D9;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: rgba(93, 233, 217, 0.2);
    box-shadow: 0 0 20px rgba(93, 233, 217, 0.4);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 20px;
    color: #5DE9D9;
}

/* Hide navigation buttons on mobile */
@media (max-width: 768px) {
    .swiper-button-next,
    .swiper-button-prev {
        display: none;
    }
    
    .swiper-pagination-bullet {
        width: 20px;
        height: 3px;
    }
    
    .swiper-pagination-bullet-active {
        width: 30px;
    }
}