@font-face {
     font-family: 'satoshiRegular';
     src: url('../assets/fonts/regular/Satoshi-Regular.eot'),
         url('../assets/fonts/regular/Satoshi-Regular.woff2') format('woff2'),
         url('../assets/fonts/regular/Satoshi-Regular.woff') format('woff'),

 }


 * {
     margin: 0;
     outline: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --white-050: #ffffff;
     --black-950: #1D1D1B;
     --background-color: var(--black-950);
 }

 body {
     background: var(--background-color);


     font-family: "satoshiRegular" !important;

     overflow-x: hidden;
 }

/* استایل اسکرول‌بار برای WebKit (کروم، سافاری) */
::-webkit-scrollbar {
    width: 8px; /* ضخامت اسکرول */
}

::-webkit-scrollbar-track {
    background: #1D1D1B; /* مسیر اسکرول هم سیاه */
    border-radius: 0;
}

::-webkit-scrollbar-thumb {
    background-color: #BEFA00; /* رنگ سبز */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #BEFA00; /* سبز روشن هنگام هاور */
}







 .navbar {
     width: 100%;
     display: flex;
     justify-content: center;
     padding: 24px 0;

     /* =============================
         Fixed Position
      ============================= */
     position: fixed;
     top:  0;
     left: 0;
     z-index: 9999;
     pointer-events: none;

     font-family: "satoshiRegular" !important;

 }

.nav__item {
  position: relative;
  text-decoration: none;
}

/* نقطه پایه */
.nav__item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;

  width: 6px;
  height: 6px;

  background: #fff;
  border-radius: 50%;

  transform: translate(-50%, 10px) scale(0);
  opacity: 0;

  box-shadow:
    0 0 6px rgba(255,255,255,0.8),
    0 0 12px rgba(255,255,255,0.5);

  transition:
    transform 0.35s cubic-bezier(.2,.8,.2,1),
    opacity 0.25s ease,
    box-shadow 0.3s ease;
}



/* وقتی active میشه */
.nav__item.active::after {
  transform: translate(-50%, 0) scale(1);
  opacity: 1;
}

.nav__item.active {
  color: #fff;

  text-shadow:
    0 0 4px rgba(255,255,255,0.7),
    0 0 8px rgba(255,255,255,0.4);
}



 /* =============================
       Navbar Container
    ============================= */
 .navbar__container {
     pointer-events: auto;
     display: flex;
     align-items: center;
     gap: 36px;

     padding: 14px 28px;
     border-radius: 14px;
     background: #29292B;

 }



 .navbar__container {
     position: relative;
     border-radius: 14px;
 }

 /* Progress Border */
 .navbar__container::after {
     content: "";
     position: absolute;
     inset: -1px;
     border-radius: inherit;
     pointer-events: none;

     background:
         conic-gradient(#ccff33 var(--progress, 0%),
             rgba(255, 255, 255, 0.08) 0);

     /* وسطش رو خالی می‌کنیم */
     -webkit-mask:
         linear-gradient(#000 0 0) content-box,
         linear-gradient(#000 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;

     padding: 10px;
 }


 /* =============================
       Nav Items
    ============================= */
 .nav__item {
     color: #fff;
     font-size: var(--font-size-medium);
     font-weight: 500;
     cursor: pointer;
     opacity: 0.9;
     transition: opacity 0.2s ease;
 }

 .nav__item:hover {
     opacity: 1;
 }


 .nav__cta {
     position: relative;
     overflow: hidden;

     display: flex;
     align-items: center;
     gap: 10px;

     padding: 12px 22px;
     border-radius: 12px;

     background: linear-gradient(135deg, #ccff33, rgb(193, 255, 7));
     color: #29292B;
     font-size: var(--font-size-medium);

     box-shadow:
         0 10px 30px rgba(204, 255, 51, 0.35),
         inset 0 0 0 1px rgba(255, 255, 255, 0.25);

     cursor: pointer;

     transition:
         transform 0.2s ease,
         box-shadow 0.25s ease;
 }

 .nav__cta:hover {
     box-shadow:
         0 18px 45px rgba(204, 255, 51, 0.55),
         inset 0 0 0 1px rgba(255, 255, 255, 0.35);
 }

 /* Shine */
 .nav__cta::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, 0.4),
             transparent);
     transform: translateX(-120%);
     transition: transform 0.6s ease;
 }

 .nav__cta:hover::before {
     transform: translateX(120%);
 }

 /* Icon */
 .nav__cta-icon {
     width: 35px;
     height: 35px;
     border-radius: 50%;
     background: #fff;

     display: flex;
     align-items: center;
     justify-content: center;

     transition: transform 0.25s ease;
 }

 main section.rabi-hero {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     background-image: url('../assets/images/Gradient-Background-2-1-min-2048x1456.jpg');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
 }

 main section.rabi-hero p {
     color: var(--white-050);
     font-family: sans-serif;
     font-size: 1.2rem;
 }

 section.content {
     position: relative;
     z-index: 1;
 }

 main section.content div.section-content {
     background: var(--white-050);
     height: 100vh;
     color: #fff;




     display: flex;
     align-items: center;
     justify-content: center;
 }

 main section.content div.section-transition {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     position: absolute;
     width: 100%;
     height: auto;
     left: 0;
 }

 main section.content div.section-transition {
     bottom: 100%;
     align-items: end;
 }

 main section.content div.section-transition div.section-transition-div {
     height: 0px;
     background: var(--white-050);
 }


 #canvas-container {

     position: fixed;
     /* یا absolute اگر فقط داخل main می‌خوای */
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;

     /* پشت محتوا */
     pointer-events: none;
     /* کلیک‌ها از روش رد می‌شن */
 }



 /* CSS */
 #background-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 9999;
     /* همیشه پشت محتوا */
     pointer-events: none;
     /* اجازه کلیک روی عناصر بالا */
 }








 .rabi-container {
     padding: 60px 20px;
     text-align: center;


 }

 .rabi-heading {
     font-size: 5rem;
     font-weight: 600;
     margin: 0;
     line-height: 1.2;
     color: #000;
 }

 .rabi-heading span {
     color: #888;
     font-weight: 400;
     background: linear-gradient(269deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;

 }

 .rabi-row {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 40px;
     gap: 30px;
 }

 .rabi-tagline {
     display: flex;
     justify-content: center;
     gap: 18px;
     font-size: 5rem;
     white-space: nowrap;

     color: #000;




 }

 .rabi-card {
     background-image: url("../assets/images/Frame-1000004808.jpg");
     background-size: cover;
     background-position: center;
     border-radius: 16px;
     padding: 5px 60px;
     box-shadow: 0px 6px 16px rgba(92, 85, 85, 0.2);
     transform: rotate(-6deg);
     transition: transform 0.3s ease;
     height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     overflow: hidden;
 }

 .rabi-card:hover {
     transform: rotate(0deg) scale(1.05);
 }

 /* ===== ساختار تیکر ===== */
 .ticker-wrapper {
     width: 60px;
     height: 60px;
     overflow: hidden;
     border-radius: 8px;
     position: relative;
 }

 .ticker {
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     flex-direction: column;
     will-change: transform;
 }

 .ticker img {
     width: 60px;
     height: 60px;
     border-radius: 8px;
     object-fit: cover;
     display: block;
 }

 .rabi-quote {
     font-size: 2.2rem;
     color: #000 !important;
     font-weight: 400;
     line-height: 1.6;
     width: 340px;
     text-align: center;
 }

 .tagline-right {
     margin-left: 10px;
 }
















 .about-text {
     padding: 60px 20px;
     width: 80%;

 }

 .rabi-paragraph {
     font-size: 40px;
     filter: blur(10px);
     opacity: 0;
     transition: filter 0.3s, opacity 0.3s;
     color: #000;
 }


















 /* why choose us */

 .green-horizontal {
     height: 100vh;
     background: #E2E2E2;
     overflow: hidden;
 }

 .cards-track {
     display: flex;
     height: 100%;
     will-change: transform;
     padding-left: 5vw;
     padding-right: 5vw;
     box-sizing: content-box;
 }


 .card:last-child {
     margin-right: 5vw;
 }

 /* شماره کارت */
 .card-number {
     position: absolute;
     top: 10%;
     right: 30;
     transform: translateY(-50%);
     font-size: 5rem;
     /* بزرگ و قابل توجه */
     font-weight: 800;
     color: rgba(0, 0, 0, 0.1);
     /* سبز کمرنگ */
     z-index: -1;
     /* پشت عنوان */
     pointer-events: none;
 }

 /* کارت */
 .card {
     position: relative;
     min-width: 40vw;
     max-width: 400px;
     height: 70vh;
     margin: auto 5vw auto 0;
     background: rgb(255, 255, 255);
     border-radius: 40px;
     flex-direction: column;
     justify-content: flex-start;
     padding: 32px;
     color: #29292B !important;
     transform-origin: center;
     transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
     overflow: hidden;
 }

 /* محتوای کارت */
 .card-content {
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 /* عنوان کارت */
 /* کارت شماره به‌صورت کمرنگ پشت عنوان */
 .card-title {
     position: relative;
     font-size: 2.75rem;
     font-weight: 700;
     margin: 0 0 10px 0;
     line-height: 1.2;
     letter-spacing: 0.5px;

     color: #29292B
 }




 /* توضیحات کارت */
 .card-description {
     font-size: 1.05rem;
     line-height: 1.6;
     opacity: 0.85;
     margin: 0;
     color: #29292B;
 }

 .card.active-card {
     background-color: #BEFA00;
     box-shadow: rgba(190, 250, 0, 0.6) 0px 50px 100px -20px, rgba(190, 250, 0, 0.3) 0px 30px 60px -30px;

     transform: scale(1.08);

     border: 10px solid #ebebeb;

 }

 .card[data-index="03"].active-card {
     transform: scale(1.08) rotate(5deg);
     transition: transform 0.3s ease;
 }


 .card[data-index="02"] svg {
     width: 900px;
     /* عرض بیشتر از کارت */
     height: auto;
     margin-top: auto;
     /* پایین کارت */
     display: block;
     position: relative;
     /* می‌تونی left/right هم تغییر بدی */
     left: -100px;
     /* مثلا 100px به چپ حرکت بده تا بیرون بزنه */
 }

 /* حالت پیش‌فرض: خط خاکستری و مسیر کشیده نشده */
 .aurora-line {
     stroke: #999;
     stroke-dasharray: 400;
     /* طول مسیر تقریبی */
     stroke-dashoffset: 400;
     transition: none;
     /* غیرفعال کردن انیمیشن پیش‌فرض */
 }

 /* گرادیانت مخفی باشد */
 .aurora-fill {
     opacity: 0;
     transition: none;
 }

 /* وقتی کارت فعال شد */
 .card[data-index="02"].active-card .aurora-line {
     animation: drawLine 2s ease forwards, changeColor 2s ease forwards;
 }

 .card[data-index="02"].active-card .aurora-fill {
     animation: fadeFill 2s ease forwards 1s;
 }

 /* انیمیشن رسم مسیر */
 @keyframes drawLine {
     to {
         stroke-dashoffset: 0;
     }
 }

 /* تغییر رنگ از خاکستری به سبز */
 @keyframes changeColor {
     from {
         stroke: #999;
     }

     to {
         stroke: #a3e635;
     }
 }

 /* ظاهر شدن گرادیانت بعد از رسم خط */
 @keyframes fadeFill {
     to {
         opacity: 1;
     }
 }

 .icoo {

     width: 270px;
     transform: translateX(300px) translateY(380px) rotate(-10deg);
     transition: transform 0.8s ease;
 }

 .card.active-card .icoo {
     transform: translateX(300px) translateY(10px) rotate(-40deg);
 }


 .end-spacer {
     min-width: 5vw;
     flex-shrink: 0;
 }



















 .features {
     height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
 }

 .cards333 {
     display: flex;
     gap: 20px;
 }

 .card333 {
     width: 308px;
     height: 400px;
     background: #111;
     border-radius: 18px;
     padding: 24px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
     /* فقط translateY اولیه */
     transform: translateY(200px);
     opacity: 0;
 }





 .card333 h3 {
     margin: 0 0 12px;
     font-size: 22px;
 }

 .card333 p {
     margin: 0;
     opacity: 0.7;
     line-height: 1.6;
     font-size: 14px;
 }


































 /* Each card43633 wrapper has 15vh top padding */
 .card43633-wrapper {
     height: 70vh;
     padding-top: 15vh;
     position: relative;
     width: 90vw;
     margin: auto;

 }

 /* Last card43633 wrapper gets extra bottom padding and increased height */
 .card43633-wrapper:last-of-type {
     height: 85vh;
     /* 70vh + 15vh extra to account for bottom padding */
     padding-bottom: 15vh;
 }

 /* The card43633 fills the wrapper's width and remaining height in normal wrappers */
 .card43633 {
     width: 100%;
     margin: 0 auto;
     background: #fff;
     border-radius: 16px;
     padding: 50px;
     box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
     display: flex;
     flex-direction: column;
     align-items: flex-end;
 }







 .serive-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     width: 100%;
     padding: 0 20px;
     /* فاصله از لبه‌ها */
 }

 .serive-header h3 {
     color: #000;

     font-family: Satoshi;
     font-size: 64px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
     letter-spacing: -1.28px;
 }


 .serive-header img {
     width: 52px;
     height: 90px;
     aspect-ratio: 26/45;
 }


 .servise-desc-container {
     width: 100%;
 }

 .service-desc {
     color: #000;
     text-align: justify;
     font-family: Satoshi;
     font-size: 32px;
     font-style: normal;
     font-weight: 400;
     line-height: normal;
     letter-spacing: -0.64px;
 }





 .services-card-icons {

     position: fixed;
     width: 130px;
     /* کوچیک‌تر شدن */
     height: 130px;
     /* transform: translate(20px, -15px); */
     /* جابجایی X و Y */

     top: 10px;
     left: 50%;
 }


 .container2222 {
     width: 1080px;
     max-width: calc(90vw - 2rem);
     clip-path: inset(-100% -100% 0 -100%);
     position: relative;
     touch-action: none;

     transform: translateY(-0.8rem);
 }




 ul {
     margin: 0 auto;
     display: grid;
     grid-template-columns: repeat(calc(var(--swatch-count) + 3), 1fr);
     list-style-type: none;
     padding: 0;
     margin: 0;
     pointer-events: none;
     translate: 0 calc(var(--offset-y) * 1%);
 }

 li {
     position: relative;
     aspect-ratio: 1/4;
     pointer-events: all;
     --delay: calc(sin(((var(--i)) / var(--swatch-count)) * 45deg) * 1s);
     animation: enter 0.2s var(--delay) var(--ease) both;
 }

 li button:is(:hover) {
     translate: 0 calc(clamp(0.9, var(--power), 1) * var(--distance, 40) * -1%);
 }

 @keyframes enter {
     0% {
         translate: 0 100%;
     }
 }

 [data-dark=true] button {
     color: #fff;
 }

 [data-dark=false] button {
     color: #000;
 }

 li button {
     container-type: inline-size;
     font-family: "Reddit Mono", serif;
     font-weight: 600;
     background: var(--color);
     border-radius: 1.2rem;
     width: 400%;
     aspect-ratio: 3/4;
     display: grid;
     place-items: start;
     position: absolute;
     border: 0;
     padding: 1rem;
     rotate: 0deg;
     translate: 0 0;
     transition: translate 0.2s var(--ease), rotate 0.2s var(--ease), scale 0.2s var(--ease);
     cursor: pointer;
 }

 li button span {
     pointer-events: none;
     font-size: 10cqi;
     opacity: 0;
     translate: 0 50%;
     transition: all 0.22s var(--ease);
 }

 /* Dock-style hover */
 li button:is(:hover, :focus-visible) {
     scale: 1.6;
     /* بزرگ شدن */
     translate: 0 -20%;
     /* بالا اومدن */
     rotate: 0deg;
 }

 li button:is(:hover, :focus-visible) span {
     opacity: 1;
     translate: 0 0;
 }











 /* In the last wrapper, adjust card43633 height to account for extra bottom padding */
 .card43633-wrapper:last-of-type .card43633 {
     height: 500px;
     /* 85 - (15+15) = 55vh */
 }





 /* Page Transition Overlay */
 .transitionContainer {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100dvh;
     display: flex;
     flex-direction: column;
     z-index: 1000;
     pointer-events: none;
 }

 .transition-row {
     flex: 1;
     display: flex;
 }

 .transition-row.row-1 .block {
     transform-origin: top;
 }

 .transition-row.row-2 .block {
     transform-origin: bottom;
 }

 .block {
     flex: 1;
     background-color: #121212;
     transform: scaleY(1);
     will-change: transform;
 }





 .team {
     display: flex;
     flex-direction: column;
     align-items: center;
     /* وسط عمودی */
     height: 100vh;
     background-color:#fff;
     position: relative;
     margin-top: -100px;

     padding-bottom: 300px;

    }

 .small-team {
     font-size: 76.8px;
     text-align: center;
     margin-bottom: 20px;
 }

 .bg-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-size: 358.4px;
     font-weight: 900;
     line-height: 0.8;
     letter-spacing: -6px;
     color: #8E827C;
     opacity: 0.35;
     user-select: none;
     pointer-events: none;
     z-index: 0;
     text-align: center;
 }

 .demoWrapper {
     width: 900px;
     height: 500px;

     margin-right: -300px;
     position: relative;
     z-index: 1;
     display: flex;
     justify-content: center;
 }

 .stage {
     width: 100%;
     height: 450px;
     position: relative;
     perspective: 1200px;
     /* بهتر برای 3D */
     transform-style: preserve-3d;
 }

 .box {
     position: absolute;
     width: 300px;
     /* کوچک‌تر برای فاصله بیشتر */
     height: 300px;
     overflow: hidden;
     border-radius: 12px;
 }

 .video_2 {
    position: absolute;
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 12px;
    object-fit: cover; /* برای پوشش کامل ویدیو */
}

 .box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;

     border-radius: 16px;
 }



 .infinite-scroll {
  display: flex;
  flex-direction: column;
}




.main-footer{
    height: 100vh;
    width: 100vw;

    background-color: #1D1D1B;

    padding-top: 100px;
    color: #eeee;
    
}





.footer {
  height: 30vh;
  width: 100vw;
  background-color: #BEFA00;
  overflow: hidden;
}

section.footer-container {
  height: 75vh;
  color: #f0f0f0;
  background-color: #BEFA00;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
} 


.herooo-text{
    font-size: 200px;

    font-weight: 900;
    color:#1D1D1B ;
}






.cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background: #BEFA00;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: background 0.3s, border-radius 0.3s;
}

.cursor.nav-hover {
  background: #ffffff;
  border-radius: 50%;
}

.cursor.nav-hover::before {
  opacity: 0;
  animation: none;
}

.cursor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  background: #ffffff;
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  user-select: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

.cursor-follower.nav-hover {
  background: rgba(190, 250, 0, 0.2);
  mix-blend-mode: normal;
  border-radius: 50%;
  opacity: 0.2;
}







/* center contact block */

.footer-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 80px;
}

.contact {
  text-align: center;
}

.phone {
  font-size: 36px;
  letter-spacing: 2px;
}

.email {
  font-size: 42px;
  font-weight: bold;
}

.address {
  margin-top: 16px;
  font-size: 14px;
  opacity: 0.7;
}

.address-title{
    color: #ffff;
}

/* giant brand text */

.brand {
  text-align: center;
  font-size: clamp(120px, 22vw, 420px);
  font-weight: 900;
  color: #ccc;
  line-height: 0.85;
  letter-spacing: -5px;
  user-select: none;
}

/* footer bottom */

.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
  font-size: 12px;
  opacity: 0.6;
}

/* responsive */

@media (max-width: 768px) {

  .phone { font-size: 24px; }
  .email { font-size: 28px; }

  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .brand {
    letter-spacing: -2px;
  }
}