/* Fade-in animation */
    .fade-in {
      animation: fadeIn 1.5s ease-in-out;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    html {
      scroll-behavior: smooth;
    }

    /* Ensure the flex container aligns children at the top */
    #experience .flex {
      align-items: flex-start;
    }

    /* Job Tabs List: display as a row on mobile, column on desktop */
    #job-tabs {
      display: flex;
      flex-direction: row;
      /* Mobile: tabs in a row */
      padding: 1rem;
      gap: 0.5rem;
    }

    /* On desktop, change flex direction and spacing */
    @media (min-width: 768px) {
      #job-tabs {
        flex-direction: column;
        /* Desktop: tabs in a column */
        gap: 0.5rem;
        /* Use vertical spacing (space-y-2) */
      }
    }

    /* Individual Job Tabs */
    #job-tabs li {
      cursor: pointer;
      padding: 0.5rem;
      font-size: 1rem;
      font-weight: 500;
      color: #d1d5db;
      position: relative;
      transition: color 0.3s ease;
    }

    /* Hover Effect */
    #job-tabs li:hover {
      color: #64ffda;
    }

    /* Active Tab Styling for Mobile: bottom border */
    #job-tabs li.active {
      color: #64ffda;
      font-weight: 600;
      border-bottom: 2px solid #64ffda;
      /* Active bottom border on mobile */
    }

    /* Active Tab Indicator for Desktop: left border via pseudo-element */
    @media (min-width: 768px) {
      #job-tabs li.active {
        border-bottom: none;
        /* Remove mobile bottom border on desktop */
      }

      #job-tabs li.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 3px;
        height: 100%;
        background-color: #64ffda;
        transition: background-color 0.3s ease;
      }
    }

    /* Dropdown styling for desktop */
    .dropdown {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #1f2937;
      /* gray-800 */
      border: 1px solid #374151;
      /* gray-700 */
      border-radius: 0.25rem;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
      min-width: 10rem;
      z-index: 50;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
    }

    /* Show dropdown on hover (desktop) */
    .group:hover .dropdown {
      display: block;
      opacity: 1;
      transform: translateY(0);
    }

    /* Fixed Social Icons Sidebar */
    .social-icons {
      position: fixed;
      left: 2rem;
      bottom: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1rem;
      z-index: 50;
    }

    .social-icons a {
      transition: transform 0.2s;
    }

    .social-icons a:hover {
      transform: translateY(-4px);
    }

    /* Custom styling for the active tab in Experience/Jobs section */
    .active {
      background-color: transparent;
    }

    /* Fade-down effect applied directly on the <a> element */
    .fadedown-enter-done {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 500ms ease-in-out 400ms, transform 500ms ease-in-out 400ms;
    }

    /* Resume Button styling with hover effects */
    .custom-button {
      display: inline-block;
      padding: 0.5rem 1.5rem;
      border: 1px solid #64ffda;
      /* Accent color similar to Brittany's site */
      color: #64ffda;
      /* Accent text color */
      background-color: transparent;
      text-decoration: none;
      font-weight: 600;
      border-radius: 4px;
      line-height: 1;
      transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
    }

    .custom-button:hover {
      /* Move left (-3px on X) and up (-3px on Y) */
      transform: translate(-3px, -3px);
      background-color: rgba(100, 255, 218, 0.1);
      box-shadow: 0 0 0 2px #64ffda;
    }

    ul.custom-bullet li {
      list-style: none;
      /* Remove default bullet */
      position: relative;
      padding-left: 1.2em;
      font-size: medium;
      /* Space for the custom bullet */
      margin-bottom: 0.5em;
      margin-right: 0.75rem;
      /* Optional: spacing between items */
    }

    ul.custom-bullet li::before {
      content: "▹";
      position: absolute;
      left: 0;
      color: #66BB6A;
      /* Customize the bullet color if desired */
    }

    ul.custom-bullet2 li {
      list-style: none;
      /* Remove default bullet */
      position: relative;
      padding-left: 1.2em;
      font-size: 0.99rem;
      /* Space for the custom bullet */
      margin-bottom: 0.5em;
      margin-right: 0.75rem;
      /* Optional: spacing between items */
    }

    ul.custom-bullet2 li::before {
      content: "▹";
      position: absolute;
      left: 0;
      color: #66BB6A;
      /* Customize the bullet color if desired */
    }

    /* Typewriter Effect */
    .typewriter {
      overflow: hidden;
      /* Ensures the content is not revealed until the animation */
      border-right: .15em solid #64ffda;
      /* The typwriter cursor */
      white-space: nowrap;
      /* Keeps the content on a single line */
      margin: 0 auto;
      /* Gives that scrolling effect as the typing happens */
      letter-spacing: .15em;
      /* Adjust as needed */
      animation:
        typing 3.5s steps(40, end),
        blink-caret .75s step-end infinite;
    }

    /* The typing effect */
    @keyframes typing {
      from {
        width: 0
      }

      to {
        width: 100%
      }
    }

    /* The typewriter cursor effect */
    @keyframes blink-caret {

      from,
      to {
        border-color: transparent
      }

      50% {
        border-color: #64ffda;
      }
    }

    /* Responsive adjustments for typewriter */
    @media (max-width: 768px) {
      .typewriter {
        white-space: normal;
        border-right: none;
        animation: none;
      }
    }