/* General Styling */
    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Space Grotesk', sans-serif;
      background-color: #060911;
      color: #f8fafc;
      background-image: linear-gradient(rgba(56, 189, 248, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 189, 248, 0.1) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: pan-grid 60s linear infinite;
    }

    @keyframes pan-grid {
      from {
        background-position: 0 0;
      }

      to {
        background-position: -500px -500px;
      }
    }

    .text-gradient {
      background: -webkit-linear-gradient(45deg, #38bdf8, #a78bfa);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    /* Hero Animation */
    .hero-animate {
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInSlideUp 0.8s ease-out forwards;
    }

    #about .text-content h1 {
      animation-delay: 0.2s;
    }

    #about .text-content p {
      animation-delay: 0.4s;
    }

    #about .animation-content {
      animation-delay: 0.6s;
    }

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

    /* HUD Frame */
    .hud-frame {
      position: relative;
      padding: 1rem;
      border: 1px solid rgba(56, 189, 248, 0.2);
    }

    .hud-frame::before,
    .hud-frame::after,
    .hud-frame .corners::before,
    .hud-frame .corners::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-color: #38bdf8;
      border-style: solid;
      animation: draw-corners 1s ease-out forwards 0.8s;
    }

    .hud-frame::before {
      top: -1px;
      left: -1px;
      border-width: 2px 0 0 2px;
    }

    .hud-frame::after {
      top: -1px;
      right: -1px;
      border-width: 2px 2px 0 0;
    }

    .hud-frame .corners::before {
      bottom: -1px;
      left: -1px;
      border-width: 0 0 2px 2px;
    }

    .hud-frame .corners::after {
      bottom: -1px;
      right: -1px;
      border-width: 0 2px 2px 0;
    }

    @keyframes draw-corners {
      to {
        width: 2rem;
        height: 2rem;
      }
    }

    .hud-frame img {
      display: block;
      width: 100%;
    }

    /* Section Title Animation */
    .section-title {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
      position: relative;
      display: inline-block;
      padding-bottom: 0.5rem;
    }

    .section-title.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #38bdf8, #a78bfa);
      transition: width 0.8s ease-out 0.3s;
    }

    .section-title.visible::after {
      width: 100%;
    }

    /* Skills Grid Styling */
    .skills-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
    }

    .skill-category h3 {
      color: #a78bfa;
      margin-bottom: 1rem;
    }

    .skills-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
    }

    .skill-badge {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: #1e293b;
      border: 1px solid #334155;
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      font-size: 0.9rem;
    }

    /* REVAMPED: Creative Project Card Styling */
    .projects-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 2.5rem;
    }

    .project-card {
      background-color: #1e293b;
      border-radius: 0.5rem;
      position: relative;
      overflow: hidden;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      min-height: 280px;
      opacity: 0;
      transform: translateY(30px);
    }

    #projects.visible .project-card {
      opacity: 1;
      transform: translateY(0);
    }

    /* Staggered animation delay */
    #projects.visible .project-card:nth-child(1) {
      transition-delay: 0.1s;
    }

    #projects.visible .project-card:nth-child(2) {
      transition-delay: 0.2s;
    }

    #projects.visible .project-card:nth-child(3) {
      transition-delay: 0.3s;
    }

    #projects.visible .project-card:nth-child(4) {
      transition-delay: 0.4s;
    }

    #projects.visible .project-card:nth-child(5) {
      transition-delay: 0.5s;
    }

    #projects.visible .project-card:nth-child(6) {
      transition-delay: 0.6s;
    }

    .project-card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    /* Animated Border */
    @property --angle {
      syntax: '<angle>';
      initial-value: 0deg;
      inherits: false;
    }

    .project-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 2px solid transparent;
      border-radius: 0.5rem;
      background: conic-gradient(from var(--angle), transparent, #a78bfa, #38bdf8, #a78bfa, transparent);
      animation: rotate-border 4s linear infinite;
      opacity: 0;
      transition: opacity 0.4s ease;
    }

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

    @keyframes rotate-border {
      to {
        --angle: 360deg;
      }
    }

    /* Card Inner Content & Hover Effect */
    .project-card-inner {
      position: absolute;
      top: 2px;
      left: 2px;
      right: 2px;
      bottom: 2px;
      background-color: #1e293b;
      border-radius: calc(0.5rem - 2px);
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }

    .project-card-front,
    .project-card-back {
      transition: transform 0.5s ease, opacity 0.5s ease;
    }

    .project-card-back {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      opacity: 0;
      transform: scale(1.1);
    }

    .project-card:hover .project-card-front {
      transform: scale(0.8);
      opacity: 0;
    }

    .project-card:hover .project-card-back {
      transform: scale(1);
      opacity: 1;
    }

    /* Experience Timeline */
    .experience-timeline {
      position: relative;
      max-width: 1000px;
      margin: 0 auto;
    }

    .experience-timeline::after {
      content: '';
      position: absolute;
      width: 3px;
      background: #374151;
      top: 0;
      bottom: 0;
      left: 30px;
      margin-left: -1.5px;
    }

    .timeline-item {
      padding: 10px 0 10px 70px;
      position: relative;
      width: 100%;
      opacity: 0;
      transform: translateY(50px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .timeline-item.visible {
      opacity: 1;
      transform: translateY(0);
    }

    .timeline-item.visible .timeline-content-item {
      opacity: 1;
      transform: translateY(0);
    }

    .timeline-content-item {
      opacity: 0;
      transform: translateY(15px);
      transition: opacity 0.5s ease 0.3s, transform 0.5s ease 0.3s;
    }

    .timeline-item.visible .timeline-content-item:nth-child(2) {
      transition-delay: 0.4s;
    }

    .timeline-item.visible .timeline-content-item:nth-child(3) li:nth-child(1) {
      transition-delay: 0.5s;
    }

    .timeline-item.visible .timeline-content-item:nth-child(3) li:nth-child(2) {
      transition-delay: 0.6s;
    }

    .timeline-item.visible .timeline-content-item:nth-child(3) li:nth-child(3) {
      transition-delay: 0.7s;
    }

    .timeline-item::after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      left: 21.5px;
      background-color: #0B1120;
      border: 4px solid #38bdf8;
      top: 25px;
      border-radius: 50%;
      z-index: 1;
      transition: box-shadow 0.3s;
    }

    .timeline-item.current-job::after {
      box-shadow: 0 0 20px #38bdf8;
      animation: pulse-dot 2s infinite;
    }

    @keyframes pulse-dot {

      0%,
      100% {
        box-shadow: 0 0 20px #38bdf8;
      }

      50% {
        box-shadow: 0 0 30px #38bdf8;
      }
    }

    .timeline-content {
      padding: 1.5rem;
      background: #111827;
      border-radius: 0.5rem;
      border: 1px solid #374151;
    }

    @media (min-width: 768px) {
      .experience-timeline::after {
        left: 50%;
      }

      .timeline-item {
        width: 50%;
        padding: 10px 40px;
      }

      .timeline-item:nth-child(odd) {
        left: 0;
        padding-left: 0;
      }

      .timeline-item:nth-child(even) {
        left: 50%;
        /* ----- THIS IS THE FIX ----- */
        padding-right: 0;
      }

      .timeline-item::after {
        left: auto;
      }

      .timeline-item:nth-child(odd)::after {
        right: -9.5px;
      }

      .timeline-item:nth-child(even)::after {
        left: -9.5px;
      }
    }

    /* Shiny button effect */
    .shiny-button {
      position: relative;
      overflow: hidden;
    }

    .shiny-button::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: left 0.7s ease;
    }

    .shiny-button:hover::before {
      left: 100%;
    }

    /* Wavy Animation Section */
    #contact {
      position: relative;
      width: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    #contact .wave {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      background: #1e293b;
      box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5);
    }

    #contact .wave span {
      content: "";
      position: absolute;
      width: 325vh;
      height: 325vh;
      top: 0;
      left: 50%;
      transform: translate(-50%, -75%);
      background: #0B1120;
    }

    #contact .wave span:nth-child(1) {
      border-radius: 45%;
      background: rgba(11, 17, 32, 1);
      animation: wave-animate 5s linear infinite;
    }

    #contact .wave span:nth-child(2) {
      border-radius: 40%;
      background: rgba(11, 17, 32, 0.5);
      animation: wave-animate 10s linear infinite;
    }

    #contact .wave span:nth-child(3) {
      border-radius: 42.5%;
      background: rgba(11, 17, 32, 0.5);
      animation: wave-animate 15s linear infinite;
    }

    @keyframes wave-animate {
      0% {
        transform: translate(-50%, -75%) rotate(0deg);
      }

      100% {
        transform: translate(-50%, -75%) rotate(360deg);
      }
    }

    .contact-content {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 2rem;
    }

    /* Animated Hamburger Menu */
    #menu-toggle {
      display: none;
    }

    .toggle-container {
      display: block;
      position: relative;
      z-index: 100;
      width: 20px;
      height: 20px;
    }

    .button-toggle {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      border-radius: 100%;
      transition: 0.6s;
    }

    .button-toggle:hover {
      box-shadow: 0 0 0 8px rgba(56, 189, 248, 0.2), inset 0 0 0 20px rgba(56, 189, 248, 0.2);
    }

    .button-toggle::before,
    .button-toggle::after {
      position: absolute;
      content: '';
      top: 50%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #38bdf8;
      border-radius: 5px;
      transition: 0.5s;
    }

    .button-toggle::before {
      transform: translateY(-50%) rotate(45deg) scale(0);
    }

    .button-toggle::after {
      transform: translateY(-50%) rotate(-45deg) scale(0);
    }

    .mobile-nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: #0B1120;
      transform: scale(0);
      transition: transform 0.5s ease;
      z-index: 90;
    }

    .mobile-nav-item {
      color: #f8fafc;
      font-size: 2rem;
      font-weight: bold;
      padding: 1rem;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.4s ease, transform 0.4s ease;
    }

    #menu-toggle:checked~header .toggle-container .button-toggle {
      box-shadow: 0 0 0 100vmax #0B1120, inset 0 0 0 20px #0B1120;
    }

    #menu-toggle:checked~header .toggle-container .button-toggle::before {
      transform: translateY(-50%) rotate(45deg) scale(1);
    }

    #menu-toggle:checked~header .toggle-container .button-toggle::after {
      transform: translateY(-50%) rotate(-45deg) scale(1);
    }

    #menu-toggle:checked~header .hamburger-lines {
      transform: scale(0);
    }

    #menu-toggle:checked~.mobile-nav {
      transform: scale(1);
    }

    #menu-toggle:checked~.mobile-nav .mobile-nav-item {
      opacity: 1;
      transform: translateY(0);
    }

    #menu-toggle:checked~.mobile-nav .mobile-nav-item:nth-child(1) {
      transition-delay: 0.2s;
    }

    #menu-toggle:checked~.mobile-nav .mobile-nav-item:nth-child(2) {
      transition-delay: 0.3s;
    }

    #menu-toggle:checked~.mobile-nav .mobile-nav-item:nth-child(3) {
      transition-delay: 0.4s;
    }

    #menu-toggle:checked~.mobile-nav .mobile-nav-item:nth-child(4) {
      transition-delay: 0.5s;
    }

    #menu-toggle:checked~.mobile-nav .mobile-nav-item:nth-child(5) {
      transition-delay: 0.6s;
    }

    .hamburger-lines {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 14px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      pointer-events: none;
      transition: transform 0.5s ease;
    }

    .hamburger-lines span {
      display: block;
      width: 100%;
      height: 2px;
      background-color: #f8fafc;
      border-radius: 5px;
    }

    .hamburger-lines span:nth-child(2) {
      width: 80%;
    }