/* Custom scrollbar */
 ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #111;
  }

  ::-webkit-scrollbar-thumb {
    background: #f97316;
    border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #e45c04;
  }

  /* Scroll snap */
  .scroll-snap {
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
  }

  .scroll-snap-item {
    scroll-snap-align: start;
  }

  /* Page load animations */
  .animate-fade-in {
    animation: fadeIn 1s ease-in-out;
  }

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

  /* Hover effects */
  .tech-skill {
    transition: all 0.3s ease;
  }

  .tech-skill:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 10px 20px rgba(249, 115, 22, 0.3);
  }

  /* Underline animation */
  .underline-animation {
    position: relative;
    padding-bottom: 5px;
    transition: all 0.3s ease;
  }

  .underline-animation::after {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #f97316;
    transition: width 0.3s ease;
  }

  .underline-animation:hover::after {
    width: 100%;
  }

  /* Card hover animation */
  .card-hover {
    transition: all 0.3s ease;
  }

  .card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.2);
  }

  /* Custom media queries for scroll behavior */
  @media (min-width: 1024px) {
    .horizontal-scroll-wrapper {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      height: 100vh;
    }

    .scroll-section {
      flex: 0 0 100vw;
      scroll-snap-align: start;
      height: 100vh;
    }
  }

  @media (max-width: 1023px) {
    .horizontal-scroll-wrapper {
      display: block;
      overflow-y: auto;
      overflow-x: hidden;
      scroll-snap-type: y mandatory;
      scroll-behavior: smooth;
      height: 100vh;
      width: 100vw;
    }
  
    .scroll-section {
      scroll-snap-align: start;
      width: 100vw;
      min-height: 100vh;
      box-sizing: border-box;
      padding: 2rem;
    }
  }
  

  /* Particle animation */
  .particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    background: #f97316;
    opacity: 0.6;
  }

  /* Progress bar */
  .progress-bar {
    height: 5px;
    background: #f97316;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    transition: width 0.2s ease;
  }

  /* Floating animation */
  .floating {
    animation: floating 3s ease-in-out infinite;
  }

  @keyframes floating {
    0% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-15px);
    }
    100% {
      transform: translateY(0px);
    }
  }

  /* Typing animation */
  .typing-animation {
    border-right: 2px solid #f97316;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 auto;
    animation: typing 3.5s steps(40, end),
      blink-caret 0.75s step-end infinite;
  }

  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }

  @keyframes blink-caret {
    from,
    to {
      border-color: transparent;
    }
    50% {
      border-color: #f97316;
    }
  }

  /* Custom blob animation */
  .blob {
    background: rgba(249, 115, 22, 0.2);
    border-radius: 50%;
    filter: blur(40px);
    position: absolute;
    z-index: -1;
    animation: blob-move 15s infinite alternate;
  }

  @keyframes blob-move {
    0% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(50px, -20px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 40px) scale(0.9);
    }
    100% {
      transform: translate(30px, 10px) scale(1.05);
    }
  }

  /* Project card hover effect */
  .project-card {
    transition: all 0.4s ease;
    overflow: hidden;
  }

  .project-card:hover {
    transform: translateY(-10px);
  }

  .project-card .project-overlay {
    transition: all 0.4s ease;
    opacity: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  }

  .project-card:hover .project-overlay {
    opacity: 1;
  }

  .project-card img {
    transition: all 0.5s ease;
  }

  .project-card:hover img {
    transform: scale(1.1);
  }

  /* Form input styles */
  .form-input {
    transition: all 0.3s ease;
    border: 2px solid transparent;
  }

  .form-input:focus {
    border-color: #f97316;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
  }
  #cert-typed-code::after {
    content: '|';
    animation: blink 1s step-start infinite;
    color: rgb(255, 255, 255);
}

@keyframes blink {
    50% { opacity: 0; }
}

.text-glow {
    text-shadow: 0 0 4px rgba(99, 89, 89, 0.4);
}