@font-face {
    font-family: 'IRANSans';
    src: url('fonts/YekanBakh-Medium.f7360956.woff') format('truetype');
    font-weight: 500;
    font-style: normal;
}



/* Basic Font Setup */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Persian text */
.lang-fa {
    font-family: 'IRANSans', sans-serif;
}

/* English text */
.lang-en {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Smooth transitions */
* { transition: background-color 0.3s ease, color 0.3s ease; }
/* Hide elements meant for JS control initially */
.js-hide { display: none; }
/* Smooth Scroll */
html {
    scroll-behavior: smooth;
    /* Adjust based on sticky header height */
    scroll-padding-top: 5rem; /* 80px */
} 


/* --- Custom CSS for Khofantar Effects --- */

/* Animated Gradient Text */
.animated-gradient-text {
    background-image: linear-gradient(
      to right,
      #4f46e5 /* indigo-600 */,
      #a855f7 /* purple-600 */,
      #ec4899 /* pink-500 */,
      #a855f7 /* purple-600 */,
      #4f46e5 /* indigo-600 */
    );
    /* Adjust colors for dark mode if needed, though Tailwind handles base gradient */
    html.dark .animated-gradient-text {
       background-image: linear-gradient(
          to right,
          #818cf8 /* indigo-400 */,
          #c084fc /* purple-400 */,
          #f9a8d4 /* pink-300 */,
          #c084fc /* purple-400 */,
          #818cf8 /* indigo-400 */
        );
    }
  
    background-size: 250% auto; /* Increase size for movement */
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: gradient-animation 6s linear infinite;
  }
  
  @keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
  }
  
  /* Background Blobs Animation */
  .animate-blob {
    animation: blob-animation 10s infinite ease-in-out;
  }
  
  @keyframes blob-animation {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
  }
  
  /* Simple pulsing animation for image border */
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.5; transform: scale(1);}
    50% { opacity: 0.8; transform: scale(1.03); }
  }
  .animate-pulse-slow {
      animation-name: pulse-slow;
      /* animation-duration is set inline via style */
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
  }
  
  /* Utility for animation delay */
  .animation-delay-4000 {
    animation-delay: 4s;
  }



  @media (max-width: 767px) { /* Below md breakpoint */
    /* Hide the central line */
    #journey .border-2-2 {
        display: none;
    }
    /* Adjust layout for mobile */
    #journey .right-timeline,
    #journey .left-timeline {
        justify-content: flex-start; /* Align items to the start */
        flex-direction: row; /* Ensure items are in a row */
        margin-left: 0; /* Reset margin */
        margin-right: 0; /* Reset margin */
    }
     /* Force content card to full width basically */
    #journey .right-timeline > div:nth-child(3), /* Select the content card */
    #journey .left-timeline > div:nth-child(3) { /* Select the content card */
        width: calc(100%); /* Full width minus marker space */
    }
    /* Hide the empty spacer div */
     #journey .right-timeline > div:first-child,
     #journey .left-timeline > div:first-child {
        display: none;
    }
     /* Position the marker absolutely to the left */
     #journey .right-timeline > div:nth-child(2), /* Select the marker */
     #journey .left-timeline > div:nth-child(2) { /* Select the marker */
        position: absolute;
        left: 0;
        transform: translateX(0);
        /* Make sure it doesn't affect layout */
        margin-right: 0;
    }
    /* Add padding to the left of the main wrapper for markers */
    #journey .wrap {
         padding-left: 3rem; /* Space for the markers */
         padding-right: 0;
    }
}