/* guide-new.html */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap");
    .page {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: linear-gradient(to bottom,
          #00acb51f 0%,
          #00abb559 50%,
          #00acb51f 100%) !important;
      height: fit-content !important;
    }
    .floating-shapes .shape:nth-child(1) { animation-delay: -5s; }
    .floating-shapes .shape:nth-child(2) { animation-delay: -10s; }
    .floating-shapes .shape:nth-child(3) { animation-delay: -15s; }
    .floating-shapes .shape:nth-child(4) { animation-delay: -3s; }

  
    /* From Uiverse.io by gagan-gv */
    .button {
      padding: 15px 20px;
      font-size: 16px;
      background: transparent;
      border: none;
      position: relative;
      color: #f0f0f0;
      z-index: 1;
      width: 44%;
    }
    .button::after,
    .button::before {
      content: "";
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: -99999;
      transition: all 0.4s;
    }
    .button::before {
      transform: translate(0%, 0%);
      width: 100%;
      height: 100%;
      background: #ff9c00;
      border-radius: 10px;
    }
    .button2::before {
      transform: translate(0%, 0%);
      width: 100%;
      height: 100%;
      background: #00abb5;
      border-radius: 10px;
    }
    .button::after {
      transform: translate(10px, 10px);
      width: 35px;
      height: 35px;
      background: #40acb447;
      backdrop-filter: blur(5px);
      border-radius: 50px;
    }
    .button:hover::before {
      transform: translate(5%, 20%);
      width: 110%;
      height: 110%;
    }
    .button:hover::after {
      border-radius: 10px;
      transform: translate(0, 0);
      width: 100%;
      height: 100%;
    }
    .button:active::after {
      transition: 0s;
      transform: translate(0, 5%);
    }

  
    body {
      font-family: 'Vazirmatn', sans-serif;
    }
    .gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .glass-effect {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .card-shadow {
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    .hover-lift {
      transition: all 0.3s ease;
    }
    .hover-lift:hover {
      transform: translateY(-5px);
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
    .section-number {
      background: linear-gradient(135deg, #ff6b6b, #feca57);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .pulse-animation {
      animation: pulse 2s infinite;
    }
    @keyframes pulse {
      0%,
      100% {
        opacity: 1;
      }
      50% {
        opacity: .5;
      }
    }
    .floating-shapes {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 0;
    }
    .shape {
      position: absolute;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
      animation: float 20s infinite linear;
    }
    @keyframes float {
      0% {
        transform: translateY(100vh) rotate(0deg);
      }
      100% {
        transform: translateY(-100vh) rotate(360deg);
      }
    }

  
    .page {
      direction: rtl;
    }
    .home-mamad-card {
      direction: rtl;
      text-align: justify;
      background: #e7f7f8;
      padding: 29px;
      border-radius: 16px;
      max-width: 50%;
      height: fit-content;
    }

  
    .gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .card-hover {
      transition: all 0.3s ease;
    }
    .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }
    .table-stripe {
      background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.05) 50%, transparent 100%);
    }
    .animate-fade-in {
      animation: fadeIn 0.6s ease-in-out;
    }
    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    .timeline-dot {
      position: relative;
    }
    .timeline-dot::before {
      content: '';
      position: absolute;
      top: 50%;
      right: -1px;
      width: 8px;
      height: 8px;
      background: #6366f1;
      border-radius: 50%;
      transform: translateY(-50%);
      box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
    }
    .scroll-smooth {
      scroll-behavior: smooth;
    }

  
    body {
      font-family: "Vazirmatn", sans-serif;
    }
    .glass-morphism {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .gradient-text {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .card-3d {
      transform-style: preserve-3d;
      transition: all 0.4s ease;
    }
    .card-3d:hover {
      transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
    }
    .scroll-indicator {
      position: fixed;
      top: 0;
      left: 0;
      height: 4px;
      background: linear-gradient(90deg, #0099a7, #006066);
      z-index: 1000;
      transition: width 0.3s ease;
    }
    .floating-shapes {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: -1;
    }
    .shape {
      position: absolute;
      opacity: 0.1;
    }
    .shape-1 {
      top: 10%;
      right: 10%;
      animation: float 8s ease-in-out infinite;
    }
    .shape-2 {
      top: 60%;
      left: 15%;
      animation: float 6s ease-in-out infinite reverse;
    }
    .shape-3 {
      bottom: 20%;
      right: 20%;
      animation: float 10s ease-in-out infinite;
    }
    .requirement-card {
      position: relative;
      overflow: hidden;
    }
    .requirement-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.1),
          transparent);
      transition: left 0.5s;
    }
    .requirement-card:hover::before {
      left: 100%;
    }
    .progress-bar {
      height: 6px;
      background: linear-gradient(90deg, #0099a7, #006066);
      border-radius: 3px;
      position: relative;
      overflow: hidden;
    }
    .progress-bar::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.4),
          transparent);
      animation: shimmer 2s infinite;
    }
    @keyframes shimmer {
      0% {
        left: -100%;
      }
      100% {
        left: 100%;
      }
    }
    .tab-content {
      display: none;
    }
    .tab-content.active {
      display: block;
      animation: fadeInScale 0.5s ease-out;
    }
    .tab-button {
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }
    .tab-button::before {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 0;
      height: 3px;
      background: linear-gradient(90deg, #0099a7, #006066);
      transition: all 0.3s ease;
      transform: translateX(-50%);
    }
    .tab-button.active::before {
      width: 100%;
    }
    .counter {
      background: linear-gradient(135deg, #0099a7, #006066);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
    }
    .guide-btn-row {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }