/* ===== متغیرهای اصلی ===== */
  :root{
    --bg-0:#0b0a07;
    --bg-1:#150d08;
    --bg-2:#1a0d06;
    --orange:#ff8a4a;
    --orange-2:#ffb028;
    --ink:#f3ede4;
    --ink-dim:#c9bfae;
    --line:rgba(255,180,40,.15);
    --glass:rgba(255,180,40,.05);
    --ease:cubic-bezier(0.4,0,0.2,1);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-0);
    color:var(--ink);
    font-family:'IranYekan','anjoman';
    overflow-x:hidden;
    position:relative;
  }

  /* ===== بخش‌ها ===== */
  .section{
    position:relative;
    z-index:2;
    padding:120px 24px;
  }

  .container{position:relative;z-index:2;max-width:1180px;margin:0 auto;}



  /* ================= HERO ================= */
  .hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #1a0d06;
    transition: background-color 700ms cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 100vh;
    display: flex;
    align-items: center;
    z-index: 2;
  }

  .hero-inner {
    position: relative;
    width: 100%;
    height: 100vh;
    max-height: 1000px;
    overflow: hidden;
  }

  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(245, 124, 0, 0.06) 0%, transparent 55%),
      radial-gradient(ellipse at 20% 80%, rgba(245, 124, 0, 0.04) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 50%, rgba(245, 124, 0, 0.03) 0%, transparent 70%);
    pointer-events: none;
    transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(245, 124, 0, 0.05) 0%, transparent 65%);
    pointer-events: none;
    animation: ambientGlow 12s ease-in-out infinite alternate;
    transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  @keyframes ambientGlow {
    0% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
    100% { opacity: 0.3; transform: scale(1); }
  }

  .bg-orb-hero {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    z-index: 0;
    animation: orbFloat 20s ease-in-out infinite alternate;
    transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bg-orb-hero.orb-1 {
    width: 600px;
    height: 600px;
    background: rgba(245, 124, 0, 0.04);
    top: -100px;
    right: -100px;
    animation-delay: 0s;
  }
  .bg-orb-hero.orb-2 {
    width: 500px;
    height: 500px;
    background: rgba(245, 124, 0, 0.03);
    bottom: -50px;
    left: -50px;
    animation-delay: -7s;
  }
  .bg-orb-hero.orb-3 {
    width: 400px;
    height: 400px;
    background: rgba(245, 124, 0, 0.02);
    top: 40%;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: -14s;
  }

  /* حالت روشن */
  .hero.light-mode .bg-orb-hero.orb-1 {
    width: 700px;
    height: 700px;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.15), rgba(245, 124, 0, 0.02));
    top: -150px;
    right: -150px;
    filter: blur(120px);
    animation-duration: 25s;
  }

  .hero.light-mode .bg-orb-hero.orb-2 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.12), rgba(200, 80, 20, 0.02));
    bottom: -80px;
    left: -80px;
    filter: blur(110px);
    animation-duration: 22s;
    animation-delay: -5s;
  }

  .hero.light-mode .bg-orb-hero.orb-3 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.10), rgba(245, 124, 0, 0.01));
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    filter: blur(100px);
    animation-duration: 28s;
    animation-delay: -10s;
  }

  .hero.light-mode .bg-orb-hero.orb-4 {
    display: block;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.08), transparent);
    top: 10%;
    left: 20%;
    filter: blur(80px);
    animation-duration: 18s;
    animation-delay: -3s;
  }

  .hero.light-mode .bg-orb-hero.orb-5 {
    display: block;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.06), transparent);
    bottom: 20%;
    right: 10%;
    filter: blur(90px);
    animation-duration: 20s;
    animation-delay: -8s;
  }

  .bg-orb-hero.orb-4,
  .bg-orb-hero.orb-5 {
    display: none;
  }

  .hero.light-mode::before {
    background:
      radial-gradient(ellipse at 70% 30%, rgba(245, 124, 0, 0.20) 0%, transparent 60%),
      radial-gradient(ellipse at 30% 70%, rgba(245, 124, 0, 0.16) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 50%, rgba(245, 124, 0, 0.12) 0%, transparent 70%),
      radial-gradient(ellipse at 80% 80%, rgba(245, 124, 0, 0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 20%, rgba(245, 124, 0, 0.08) 0%, transparent 45%);
    animation: lightBgPulse 8s ease-in-out infinite alternate;
  }

  .hero.light-mode::after {
    background: 
      radial-gradient(ellipse at 50% 0%, rgba(245, 124, 0, 0.18) 0%, transparent 60%),
      radial-gradient(ellipse at 50% 100%, rgba(245, 124, 0, 0.12) 0%, transparent 50%);
    animation: lightGlow 6s ease-in-out infinite alternate;
  }

  @keyframes lightBgPulse {
    0% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
    100% { opacity: 0.6; transform: scale(0.97); }
  }

  @keyframes lightGlow {
    0% { opacity: 0.3; transform: scale(0.95); }
    100% { opacity: 0.8; transform: scale(1.05); }
  }

  .light-lines {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .hero.light-mode .light-lines {
    display: block;
  }

  .light-lines .line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245, 124, 0, 0.15), transparent);
    animation: lineMove linear infinite;
  }

  .light-lines .line:nth-child(1) {
    top: 20%;
    width: 40%;
    left: -10%;
    animation-duration: 12s;
    animation-delay: 0s;
  }
  .light-lines .line:nth-child(2) {
    top: 50%;
    width: 30%;
    left: -5%;
    animation-duration: 15s;
    animation-delay: -3s;
  }
  .light-lines .line:nth-child(3) {
    top: 75%;
    width: 50%;
    left: -20%;
    animation-duration: 10s;
    animation-delay: -6s;
  }
  .light-lines .line:nth-child(4) {
    top: 35%;
    width: 25%;
    right: -10%;
    animation-duration: 14s;
    animation-delay: -2s;
    background: linear-gradient(90deg, rgba(245, 124, 0, 0.15), transparent);
  }

  @keyframes lineMove {
    0% { transform: translateX(0) scaleX(0.5); opacity: 0; }
    20% { opacity: 0.6; }
    80% { opacity: 0.6; }
    100% { transform: translateX(120%) scaleX(1.5); opacity: 0; }
  }

  .sparkles {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
  }

  .hero.light-mode .sparkles {
    display: block;
  }

  .sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(245, 124, 0, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(245, 124, 0, 0.3);
    animation: sparkleAnim ease-in-out infinite alternate;
  }

  .sparkle:nth-child(1) { top: 15%; left: 25%; animation-duration: 4s; animation-delay: 0s; }
  .sparkle:nth-child(2) { top: 30%; right: 30%; animation-duration: 3.5s; animation-delay: -1s; width: 4px; height: 4px; }
  .sparkle:nth-child(3) { bottom: 25%; left: 40%; animation-duration: 5s; animation-delay: -2s; }
  .sparkle:nth-child(4) { bottom: 40%; right: 20%; animation-duration: 3s; animation-delay: -0.5s; width: 5px; height: 5px; }
  .sparkle:nth-child(5) { top: 55%; left: 15%; animation-duration: 4.5s; animation-delay: -3s; }
  .sparkle:nth-child(6) { top: 45%; right: 45%; animation-duration: 3.8s; animation-delay: -1.5s; width: 4px; height: 4px; }
  .sparkle:nth-child(7) { bottom: 15%; left: 65%; animation-duration: 5.5s; animation-delay: -4s; }
  .sparkle:nth-child(8) { top: 70%; left: 85%; animation-duration: 4.2s; animation-delay: -2.5s; }

  @keyframes sparkleAnim {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    30% { opacity: 1; transform: scale(1.5) rotate(180deg); }
    70% { opacity: 0.8; transform: scale(1) rotate(360deg); }
    100% { opacity: 0; transform: scale(0) rotate(720deg); }
  }

  .light-waves {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

  .hero.light-mode .light-waves {
    display: block;
  }

  .light-waves .wave {
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.04), transparent 70%);
    animation: waveAnim ease-in-out infinite alternate;
  }

  .light-waves .wave:nth-child(1) {
    top: -50%;
    left: -50%;
    animation-duration: 15s;
    animation-delay: 0s;
  }
  .light-waves .wave:nth-child(2) {
    bottom: -50%;
    right: -50%;
    animation-duration: 20s;
    animation-delay: -5s;
    background: radial-gradient(circle, rgba(245, 124, 0, 0.03), transparent 70%);
  }

  @keyframes waveAnim {
    0% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    50% { transform: scale(1.2) rotate(180deg); opacity: 0.7; }
    100% { transform: scale(0.8) rotate(360deg); opacity: 0.4; }
  }

  .grain-hero {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0.35;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/></svg>");
    background-size: 200px 200px;
    background-repeat: repeat;
    transition: opacity 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero.light-mode .grain-hero {
    opacity: 0.15;
  }

  .ghost-text {
    position: absolute;
    inset-inline: 0;
    top: 16%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
    z-index: 2;
    font-family: 'Anton', sans-serif;
    font-size: clamp(90px, 28vw, 380px);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    white-space: nowrap;
    transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1);
    color: #ff8a4a;
    opacity: 0.85;
    text-shadow: 0 0 40px rgba(225, 95, 42, 0.6), 0 0 80px rgba(225, 95, 42, 0.3);
  }

  .hero.light-mode .ghost-text {
    color: #ffffff !important;
    opacity: 0.95 !important;
    text-shadow: 
      0 0 20px rgba(245, 124, 0, 0.8),
      0 0 40px rgba(245, 124, 0, 0.5),
      0 0 80px rgba(245, 124, 0, 0.3),
      0 0 120px rgba(245, 124, 0, 0.15) !important;
  }

  .brand-label {
    position: absolute;
    top: 24px;
    right: 16px;
    z-index: 60;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffb028;
    letter-spacing: 0.22em;
    background: rgba(255, 180, 40, 0.15);
    backdrop-filter: blur(2px);
    padding: 6px 14px;
    border-radius: 40px;
    border: 1px solid rgba(255, 180, 40, 0.3);
    transition: all 700ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .hero.light-mode .brand-label {
    color: #ffb028;
    background: rgba(255, 180, 40, 0.08);
    border-color: rgba(255, 180, 40, 0.15);
  }

  @media (min-width: 640px) {
    .brand-label {
      right: 32px;
      font-size: 13px;
    }
  }

  .carousel {
    position: absolute;
    inset: 0;
    z-index: 3;
  }

  .carousel-item {
    position: absolute;
    aspect-ratio: 0.6 / 1;
    transition:
      transform 650ms cubic-bezier(0.4, 0, 0.2, 1),
      filter 650ms cubic-bezier(0.4, 0, 0.2, 1),
      opacity 650ms cubic-bezier(0.4, 0, 0.2, 1),
      left 650ms cubic-bezier(0.4, 0, 0.2, 1),
      bottom 650ms cubic-bezier(0.4, 0, 0.2, 1),
      height 650ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, filter, opacity;
  }

  .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
  }

  .hero.light-mode .carousel-item img {
    filter: drop-shadow(0 20px 40px rgba(245, 124, 0, 0.15));
  }

  .role-center {
    left: 50%;
    bottom: 0;
    height: 92%;
    transform: translateX(-50%) scale(1.68);
    filter: blur(0px) drop-shadow(0 20px 30px rgba(0, 0, 0, 0.6));
    opacity: 1;
    z-index: 20;
  }

  .role-left {
    left: 30%;
    bottom: 12%;
    height: 28%;
    transform: translateX(-50%) scale(1);
    filter: blur(2px) brightness(0.8);
    opacity: 0.8;
    z-index: 10;
  }

  .role-right {
    left: 70%;
    bottom: 12%;
    height: 28%;
    transform: translateX(-50%) scale(1);
    filter: blur(2px) brightness(0.8);
    opacity: 0.8;
    z-index: 10;
  }

  .role-back {
    left: 50%;
    bottom: 12%;
    height: 22%;
    transform: translateX(-50%) scale(1);
    filter: blur(5px) brightness(0.5);
    opacity: 0.7;
    z-index: 5;
  }

  .role-hidden {
    opacity: 0;
    z-index: 0;
    transform: scale(0.8);
  }

  @media (max-width: 639px) {
    .role-center {
      height: 60%;
      bottom: 22%;
      transform: translateX(-50%) scale(1.25);
    }
    .role-left {
      left: 20%;
      height: 16%;
      bottom: 32%;
    }
    .role-right {
      left: 80%;
      height: 16%;
      bottom: 32%;
    }
    .role-back {
      height: 13%;
      bottom: 32%;
    }
  }

  .bottom-left {
    position: absolute;
    bottom: 24px;
    right: 16px;
    z-index: 60;
    max-width: 320px;
  }

  @media (min-width: 640px) {
    .bottom-left {
      bottom: 80px;
      right: 96px;
    }
  }

  .nav-buttons {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .nav-btn {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 10, 7, 0.9);
    backdrop-filter: blur(6px);
    border: 2px solid #ff8a4a;
    cursor: pointer;
    padding: 0;
    transition: transform 150ms, background-color 150ms, box-shadow 150ms, border-color 700ms, background 700ms;
    box-shadow: 0 4px 20px rgba(225, 95, 42, 0.2);
  }

  .hero.light-mode .nav-btn {
    border-color: rgba(245, 124, 0, 0.3);
    background: rgba(11, 10, 7, 0.6);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 30px rgba(245, 124, 0, 0.05);
  }

  @media (min-width: 640px) {
    .nav-btn {
      width: 68px;
      height: 68px;
    }
  }

  .nav-btn:hover {
    transform: scale(1.06);
    background-color: #e15f2a;
    border-color: #ffb028;
    box-shadow: 0 0 20px rgba(225, 95, 42, 0.6);
  }

  .hero.light-mode .nav-btn:hover {
    background-color: rgba(245, 124, 0, 0.2);
    border-color: rgba(245, 124, 0, 0.5);
    box-shadow: 0 0 40px rgba(245, 124, 0, 0.1);
  }

  .nav-btn svg {
    width: 26px;
    height: 26px;
    stroke: #ff8a4a;
    stroke-width: 2.5;
    fill: none;
    transition: stroke 150ms;
  }

  .nav-btn:hover svg {
    stroke: #0b0a07;
  }

  .hero.light-mode .nav-btn svg {
    stroke: rgba(245, 124, 0, 0.4);
  }

  .hero.light-mode .nav-btn:hover svg {
    stroke: #1a0d06;
  }

  .accent-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #ff8a4a, #ffb028, #ff8a4a);
    z-index: 70;
    opacity: 1;
    transition: opacity 700ms, background 700ms;
  }

  .hero.light-mode .accent-line {
    opacity: 0.6;
    background: linear-gradient(90deg, rgba(245, 124, 0, 0.5), rgba(245, 124, 0, 0.8), rgba(245, 124, 0, 0.5));
  }



/* ==========================================================
   SECTION
========================================================== */

.products-showcase{

    position:relative;

    width:100%;

    padding:110px 0 105px;

    overflow:hidden;

}


/* ==========================================================
   CONTAINER
========================================================== */

.products-showcase .container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:0 40px;

}



.products-showcase .categories-head{

    width:100%;

    margin:0 auto;

    text-align:center;

}


/* ==========================================================
   DIVIDER
========================================================== */

.products-showcase-divider{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:500px;

    margin:48px auto 55px;

}


/* Divider Lines */

.products-showcase-divider span{

    display:block;

    flex:1;

    height:1px;

}


/* Left */

.products-showcase-divider span:first-child{

    background:
        linear-gradient(
            to left,
            rgba(255,176,40,.38),
            rgba(255,176,40,0)
        );

}


/* Right */

.products-showcase-divider span:last-child{

    background:
        linear-gradient(
            to right,
            rgba(255,176,40,.38),
            rgba(255,176,40,0)
        );

}


/* Center Dot */

.products-showcase-divider i{

    position:relative;

    display:block;

    width:7px;

    height:7px;

    margin:0 15px;

    flex:0 0 7px;

    border-radius:50%;

    background:var(--orange);

    box-shadow:
        0 0 10px rgba(255,138,74,.65),
        0 0 25px rgba(255,138,74,.20);

}


/* ==========================================================
   PRODUCTS GRID
========================================================== */

.products-showcase-grid{

    display:grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:32px;

    width:100%;

}


/* ==========================================================
   PRODUCT CARD
========================================================== */

.products-showcase-card{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    min-width:0;

    overflow:hidden;

    padding:20px 20px 32px;

    border:1px solid rgba(255,176,40,.13);

    border-radius:28px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.025),
            rgba(255,138,74,.012)
        );

    box-shadow:
        0 20px 55px rgba(0,0,0,.20);

    isolation:isolate;

    transition:
        transform .5s cubic-bezier(.4,0,.2,1),
        border-color .5s ease,
        box-shadow .5s ease,
        background .5s ease;

}


/* ==========================================================
   CARD AMBIENT GLOW
========================================================== */

.products-showcase-card::before{

    content:"";

    position:absolute;

    top:-150px;

    left:50%;

    width:360px;

    height:250px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(255,138,74,.055);

    filter:blur(70px);

    opacity:.7;

    pointer-events:none;

    z-index:-1;

    transition:
        transform .7s ease,
        opacity .7s ease;

}


/* ==========================================================
   CARD BOTTOM LIGHT
========================================================== */

.products-showcase-card::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:-120px;

    width:300px;

    height:180px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        rgba(255,176,40,.025);

    filter:blur(60px);

    pointer-events:none;

    z-index:-1;

}


/* ==========================================================
   CARD HOVER
========================================================== */

.products-showcase-card:hover{

    transform:translateY(-8px);

    border-color:
        rgba(255,176,40,.34);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,138,74,.018)
        );

    box-shadow:
        0 30px 80px rgba(0,0,0,.30),
        0 0 50px rgba(255,138,74,.045);

}


.products-showcase-card:hover::before{

    transform:
        translateX(-50%)
        scale(1.18);

    opacity:1.2;

}


/* ==========================================================
   CARD TOP
========================================================== */

.products-showcase-card-top{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    min-height:28px;

    margin-bottom:14px;

    text-align:center;

}


/* ==========================================================
   NUMBER
========================================================== */

.products-showcase-number{

    position:relative;

    font-family:'IranYekan';

    font-size:11px;

    font-weight:600;

    line-height:1;

    letter-spacing:.12em;

    color:var(--orange);

    opacity:.8;

}


/* Number Separator */

.products-showcase-number::after{

    content:"";

    display:inline-block;

    width:1px;

    height:10px;

    margin-left:12px;

    vertical-align:-1px;

    background:
        rgba(255,176,40,.22);

}


/* ==========================================================
   CATEGORY
========================================================== */

.products-showcase-category{

    font-family:'IranYekan';

    font-size:10px;

    font-weight:600;

    line-height:1;

    letter-spacing:.18em;

    color:
        rgba(243,237,228,.50);

}


/* ==========================================================
   IMAGE AREA
========================================================== */

.products-showcase-image{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:390px;

    overflow:hidden;

    border-radius:21px;

    background:#080706;

    isolation:isolate;

}


/* ==========================================================
   IMAGE AREA LIGHT
========================================================== */

.products-showcase-image::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(255,125,35,.12),
            rgba(255,125,35,.035) 30%,
            transparent 65%
        );

}


/* ==========================================================
   IMAGE OVERLAY
========================================================== */

.products-showcase-image::after{

    content:"";

    position:absolute;

    inset:0;

    z-index:2;

    pointer-events:none;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.02),
            transparent 35%,
            rgba(0,0,0,.10)
        );

    opacity:.8;

    transition:
        opacity .5s ease;

}


/* ==========================================================
   PRODUCT IMAGE
========================================================== */

.products-showcase-image img{

    position:relative;

    z-index:1;

    display:block;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1);

    transition:
        transform .8s cubic-bezier(.4,0,.2,1),
        filter .6s ease;

}


/* ==========================================================
   IMAGE HOVER
========================================================== */

.products-showcase-card:hover
.products-showcase-image img{

    transform:scale(1.04);

}


.products-showcase-card:hover
.products-showcase-image::after{

    opacity:1;

}


/* ==========================================================
   CONTENT
========================================================== */

.products-showcase-content{

    position:relative;

    z-index:5;

    width:100%;

    margin-top:27px;

    text-align:center;

}


/* ==========================================================
   MINI TITLE
========================================================== */

.products-showcase-mini-title{

    display:block;

    margin-bottom:8px;

    font-family:'IranYekan';

    font-size:9px;

    font-weight:600;

    line-height:1;

    letter-spacing:.20em;

    color:var(--orange);

    opacity:.65;

}


/* ==========================================================
   PRODUCT TITLE
========================================================== */

.products-showcase-content h3{

    margin:0;

    padding:0;

    font-family:'IranYekan';

    font-size:24px;

    font-weight:800;

    line-height:1.6;

    color:var(--ink);

    text-align:center;

}


/* ==========================================================
   PRODUCT DESCRIPTION
========================================================== */

.products-showcase-content p{

    width:100%;

    max-width:340px;

    margin:8px auto 0;

    padding:0;

    font-family:'IranYekan';

    font-size:15px;

    font-weight:400;

    line-height:2;

    color:var(--ink-dim);

    text-align:center;

}


/* ==========================================================
   CTA
========================================================== */

.products-showcase-link{

    position:relative;

    z-index:5;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:24px;

    padding:11px 23px;

    border:1px solid
        rgba(255,176,40,.18);

    border-radius:999px;

    background:
        rgba(255,176,40,.035);

    color:var(--ink);

    font-family:IranYekan, sans-serif;

    font-size:13px;

    font-weight:600;

    line-height:1.5;

    text-decoration:none;

    text-align:center;

    transition:
        color .35s ease,
        border-color .35s ease,
        background .35s ease,
        transform .35s ease,
        box-shadow .35s ease;

}


/* CTA Icon */

.products-showcase-link i{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:10px;

    color:var(--orange);

    transition:
        transform .35s ease;

}


/* ==========================================================
   CTA HOVER
========================================================== */

.products-showcase-link:hover{

    color:var(--orange);

    border-color:
        rgba(255,176,40,.42);

    background:
        rgba(255,176,40,.07);

    transform:translateY(-2px);

    box-shadow:
        0 8px 25px rgba(255,138,74,.07);

}


.products-showcase-link:hover i{

    transform:translateX(-4px);

}


/* ==========================================================
   BOTTOM NOTE
========================================================== */

.products-showcase-bottom{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:18px;

    width:100%;

    margin-top:42px;

    text-align:center;

}


/* Bottom Text */

.products-showcase-bottom span{

    font-family:Anjoman, sans-serif;

    font-size:13px;

    font-weight:400;

    line-height:1.8;

    color:
        rgba(201,191,174,.52);

}


/* Bottom Icon */

.products-showcase-bottom i{

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:7px;

    color:var(--orange);

    opacity:.7;

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1100px){

    .products-showcase{

        padding:95px 0 90px;

    }


    .products-showcase .container{

        padding:0 30px;

    }


    .products-showcase-grid{

        gap:24px;

    }


    .products-showcase-image{

        height:340px;

    }


    .products-showcase-content h3{

        font-size:22px;

    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:768px){

    .products-showcase{

        padding:75px 0 70px;

    }


    .products-showcase .container{

        padding:0 18px;

    }


    .products-showcase-divider{

        max-width:360px;

        margin:38px auto 38px;

    }


    .products-showcase-divider i{

        margin:0 12px;

    }


    .products-showcase-grid{

        grid-template-columns:1fr;

        gap:24px;

    }


    .products-showcase-card{

        padding:16px 16px 28px;

        border-radius:23px;

    }


    .products-showcase-card-top{

        margin-bottom:12px;

    }


    .products-showcase-image{

        height:310px;

        border-radius:17px;

    }


    .products-showcase-content{

        margin-top:23px;

    }


    .products-showcase-content h3{

        font-size:21px;

    }


    .products-showcase-content p{

        max-width:310px;

        font-size:14px;

    }


    .products-showcase-link{

        margin-top:22px;

        padding:10px 21px;

        font-size:12px;

    }


    .products-showcase-bottom{

        flex-direction:column;

        gap:6px;

        margin-top:30px;

    }


    .products-showcase-bottom i{

        display:none;

    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width:480px){

    .products-showcase{

        padding:60px 0 55px;

    }


    .products-showcase .container{

        padding:0 14px;

    }


    .products-showcase-divider{

        max-width:270px;

        margin:30px auto 32px;

    }


    .products-showcase-divider i{

        width:6px;

        height:6px;

        margin:0 9px;

        flex-basis:6px;

    }


    .products-showcase-card{

        padding:14px 14px 25px;

        border-radius:21px;

    }


    .products-showcase-card-top{

        margin-bottom:10px;

    }


    .products-showcase-number{

        font-size:10px;

    }


    .products-showcase-category{

        font-size:9px;

    }


    .products-showcase-image{

        height:270px;

        border-radius:15px;

    }


    .products-showcase-content{

        margin-top:20px;

    }


    .products-showcase-mini-title{

        font-size:8px;

    }


    .products-showcase-content h3{

        font-size:20px;

    }


    .products-showcase-content p{

        max-width:280px;

        font-size:13px;

        line-height:1.9;

    }


    .products-showcase-link{

        padding:9px 18px;

        font-size:11px;

    }


    .products-showcase-bottom span{

        font-size:12px;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce){

    .products-showcase-card,
    .products-showcase-card::before,
    .products-showcase-image img,
    .products-showcase-image::after,
    .products-showcase-link,
    .products-showcase-link i{

        transition:none;

    }

}

/*========== WHY FALCON =========*/


.why-head{

    text-align:center;

    margin-bottom:70px;

}



.why-head{

    max-width:700px;

    margin:auto;

}



/*==================================
        WHY SECTION GRID
==================================*/


.why-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:80px;

}





/*==================================
        CARD
==================================*/


.why-card{

    position:relative;

    overflow:hidden;


    padding:40px 30px;


    min-height:360px;


    border-radius:30px;


    background:

    linear-gradient(
        145deg,
        rgba(255,176,40,.08),
        rgba(255,255,255,.025)
    );


    border:

    1px solid rgba(255,176,40,.15);



    backdrop-filter:blur(18px);



    transition:.5s;


}





/* نور پشت کارت */


.why-card::before{


    content:"";


    position:absolute;


    width:220px;

    height:220px;



    top:-120px;

    right:-100px;



    border-radius:50%;



    background:

    radial-gradient(
        circle,
        rgba(255,145,0,.25),
        transparent 70%
    );



    opacity:.5;


    transition:.5s;


}
/*==================================
        NUMBER
==================================*/


.why-number{


    position:absolute;


    top:20px;


    left:25px;



    font-size:60px;



    font-weight:900;



    color:rgba(255,176,40,.08);



    font-family:Inter,'anjoman';


}





/*==================================
        ICON
==================================*/


.why-icon{


    width:90px;


    height:90px;



    display:flex;


    align-items:center;


    justify-content:center;



    border-radius:25px;



    background:



    linear-gradient(
        135deg,
        rgba(255,176,40,.18),
        rgba(255,255,255,.03)
    );



    border:


    1px solid rgba(255,176,40,.25);




    margin-bottom:30px;



    transition:.5s;



}







.why-icon i{


    font-size:38px;



    background:



    linear-gradient(
        135deg,
        #ffbd32,
        #ff7200
    );



    -webkit-background-clip:text;


    -webkit-text-fill-color:transparent;



    filter:



    drop-shadow(
        0 0 15px rgba(255,145,0,.45)
    );



    transition:.4s;



}
/*==================================
        TITLE
==================================*/


.why-card h3{


    font-size:24px;


    font-weight:900;


    color:#fff;



    margin-bottom:18px;



    letter-spacing:-.5px;



}




.why-card h3::after{
  


    content:"";



    display:block;



    width:45px;



    height:3px;



    margin-top:14px;



    border-radius:20px;



    background:



    linear-gradient(
        90deg,
        var(--orange),
        var(--orange-2)
    );

    



}






/*==================================
        TEXT
==================================*/


.why-card p{


    font-size:15px;



    line-height:2;



    color:var(--ink-dim);



    font-weight:500;



}







/*==================================
        HOVER
==================================*/


.why-card:hover{


    transform:translateY(-12px);



    border-color:



    rgba(255,176,40,.4);





    box-shadow:

    0 25px 60px rgba(0,0,0,.45),


    0 0 40px rgba(255,145,0,.15);

    
       transition:
        transform .35s ease,
        background .35s ease;


}






.why-card:hover::before{


    transform:scale(1.4);


    
    



}






.why-card:hover .why-icon{


    transform:


    rotate(-6deg)

    scale(1.1);





    background:



    linear-gradient(
        135deg,
        var(--orange),
        var(--orange-2)
    );



}






.why-card:hover .why-icon i{


    -webkit-text-fill-color:#fff;



}
/*==================================
        TABLET
==================================*/


@media(max-width:1100px){


    .why-grid{


        grid-template-columns:repeat(2,1fr);


        gap:25px;


    }


}







/*==================================
        MOBILE
==================================*/


@media(max-width:650px){


    .why-grid{


        grid-template-columns:repeat(2,1fr);


        gap:15px;


        margin-top:50px;


    }






    .why-card{


        min-height:260px;


        padding:25px 15px;


        border-radius:22px;


    }






    .why-number{


        font-size:42px;


        top:12px;


        left:15px;


    }







    .why-icon{


        width:65px;


        height:65px;


        border-radius:18px;


        margin-bottom:20px;


    }







    .why-icon i{


        font-size:28px;


    }







    .why-card h3{


        font-size:17px;


        margin-bottom:12px;


    }







    .why-card h3::after{


        width:35px;


        height:2px;


        margin-top:10px;


    }







    .why-card p{


        font-size:12px;


        line-height:1.8;


    }



}

/*=============================
      COMPARE SECTION
==============================*/

.compare-head{

text-align:center;

margin-bottom:60px;

}

.compare-head{

max-width:700px;

margin:auto;

}

.compare-table{

border:1px solid rgba(255,180,40,.12);

border-radius:24px;

overflow:hidden;

background:rgba(255,180,40,.03);

backdrop-filter:blur(10px);

}

.compare-row{

display:grid;

grid-template-columns:2fr 1.5fr 1.5fr;

align-items:center;

padding:22px 30px;

border-bottom:1px solid rgba(255,255,255,.06);

transition:.35s;

}

.compare-row:last-child{

border-bottom:none;

}

.compare-row:hover{

background:rgba(255,180,40,.05);

}

.compare-header{

background:rgba(255,180,40,.08);

font-weight:700;

font-size:18px;

}

.compare-header .falcon{

color:var(--orange);

font-weight:800;

}

.compare-header i{

margin-left:8px;

}

.good{

color:#4CAF50;

font-weight:600;

}

.good i{

margin-left:8px;

}

.bad{

color:#ff6b6b;

font-weight:600;

}

.bad i{

margin-left:8px;

}

.compare-row>div:first-child{

font-weight:700;

color:#fff;

}

@media(max-width:768px){

.compare-table{

overflow-x:auto;

}

.compare-row{

min-width:650px;

}

}

/*==============================
      PROCESS SECTION
==============================*/

.process-section{

    position:relative;

    overflow:hidden;

}

.process-timeline{

    position:relative;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:40px;

    margin-top:80px;

}


/*==============================
      TIMELINE LINE
==============================*/

.timeline-line{

    position:absolute;

    left:12.5%;

    right:12.5%;

    top:45px;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,145,0,.35),
        rgba(255,145,0,.95),
        rgba(255,145,0,.35),
        transparent
    );

    z-index:1;

}


/*==============================
        ITEM
==============================*/

.process-item{

    position:relative;

    text-align:center;

    z-index:2;

}


/*==============================
         ICON
==============================*/

.process-icon{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#121212;

    border:2px solid rgba(255,145,0,.18);

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    font-size:34px;

    color:#ff9800;

    transition:.45s;

    z-index:3;

}

.process-item:hover .process-icon{

    background:linear-gradient(135deg,#ff8c00,#ffb000);

    color:#fff;

    transform:translateY(-10px);

    box-shadow:

        0 0 30px rgba(255,145,0,.45),

        0 0 60px rgba(255,145,0,.2);

}


/*==============================
      NUMBER
==============================*/

.step-number{

    position:absolute;

    top:-14px;

    right:-10px;

    width:34px;

    height:34px;

    border-radius:50%;

    background:#ff9800;

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:12px;

    font-weight:700;

}


/*==============================
        CONTENT
==============================*/

.process-content{

    margin-top:30px;

}

.process-content h3{

    margin-bottom:15px;

    font-size:21px;

    font-weight:700;

}

.process-content p{

    line-height:2;

    color:var(--text-2);

}


/*==============================
      TABLET
==============================*/

@media(max-width:992px){

.process-timeline{

grid-template-columns:repeat(2,1fr);

row-gap:70px;

}

.timeline-line{

display:none;

}

}


/*==============================
        MOBILE
==============================*/

@media(max-width:768px){

.process-timeline{

grid-template-columns:1fr;

gap:60px;

}


/* خط دقیقاً از وسط آیکون‌ها */

.timeline-line{

display:block;

position:absolute;

top:45px;

left:44px;

width:2px;

height:calc(100% - 90px);

background:linear-gradient(

180deg,

transparent,

rgba(255,145,0,.25),

rgba(255,145,0,.95),

rgba(255,145,0,.25),

transparent

);

z-index:1;

}


.process-item{

display:flex;

align-items:flex-start;

text-align:right;

gap:25px;

}


.process-icon{

width:88px;

height:88px;

margin:0;

flex-shrink:0;

}


.process-content{

margin-top:10px;

}


.process-content p{

max-width:100%;

}

}

/*==================================
        FALCON APPLICATIONS
==================================*/


.falcon-applications{

    position:relative;

    overflow:hidden;

}






/*==================================
        SECTION HEADER
==================================*/


.falcon-applications .section-title{

    max-width:750px;

    margin:0 auto 70px;

    text-align:center;

}






.falcon-applications .sub{

    max-width:650px;

    margin:20px auto 0;

}






/*==================================
        APPLICATION GRID
==================================*/


.application-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

    margin-top:80px;

}






/*==================================
        APPLICATION CARD
==================================*/


.application-card{

    position:relative;

    height:480px;

    overflow:hidden;

    border-radius:30px;

    display:flex;

    align-items:flex-end;

    text-decoration:none;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    isolation:isolate;

    transition:.5s ease;

}






.application-card:hover{

    transform:translateY(-10px);

    border-color:rgba(255,176,40,.45);

}
/*==================================
        APPLICATION IMAGE
==================================*/


.application-card img{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    z-index:-2;

    transition:.8s ease;

}






/*==================================
        IMAGE HOVER ZOOM
==================================*/


.application-card:hover img{

    transform:scale(1.08);

}






/*==================================
        OVERLAY
==================================*/


.application-overlay{

    position:absolute;

    inset:0;


    background:


    linear-gradient(

        180deg,

        rgba(0,0,0,.15) 0%,

        rgba(0,0,0,.35) 45%,

        rgba(0,0,0,.88) 100%

    );


    z-index:-1;


    transition:.5s ease;

}






/*==================================
        OVERLAY HOVER
==================================*/


.application-card:hover 
.application-overlay{


    background:


    linear-gradient(

        180deg,

        rgba(0,0,0,.2) 0%,

        rgba(0,0,0,.45) 45%,

        rgba(0,0,0,.95) 100%

    );


}
/*==================================
        APPLICATION CONTENT
==================================*/


.application-content{

    position:relative;

    z-index:2;

    width:100%;

    padding:35px;

    color:#fff;

}






/*==================================
        NUMBER
==================================*/


.application-content span{


    display:block;


    font-size:55px;


    line-height:1;


    font-weight:900;


    color:rgba(255, 176, 40, 0.488);


    margin-bottom:15px;


    font-family:Inter,'anjoman';


}






/*==================================
        TITLE
==================================*/


.application-content h3{


    font-size:32px;


    font-weight:900;


    color:#fff;


    margin-bottom:15px;


    letter-spacing:-.5px;


}






/*==================================
        DESCRIPTION
==================================*/


.application-content p{


    font-size:15px;


    line-height:2;


    color:rgba(255,255,255,.75);


    max-width:320px;


    margin-bottom:25px;


}






/*==================================
        LINK
==================================*/


.application-content strong{


    display:inline-flex;


    align-items:center;


    gap:10px;


    font-size:15px;


    font-weight:700;


    color:#fff;


    transition:.3s ease;


}






.application-card:hover 
.application-content strong{


    color:var(--orange);


}






.application-card:hover 
.application-content span{


    color:rgba(255,176,40,.35);


    transform:translateY(-5px);


}






.application-content span{


    transition:.4s ease;


}

/*==================================
        TABLET
==================================*/


@media(max-width:1100px){


    .application-grid{


        grid-template-columns:repeat(2,1fr);


        gap:25px;


    }




    .application-card{


        height:430px;


    }



    .application-content{


        padding:30px;


    }




    .application-content h3{


        font-size:28px;


    }


}








/*==================================
        MOBILE
==================================*/


@media(max-width:650px){


    .falcon-applications .section-title{


        margin-bottom:40px;


    }





    .application-grid{


        grid-template-columns:1fr;


        gap:20px;


        margin-top:50px;


    }





    .application-card{


        height:380px;


        border-radius:22px;


    }





    .application-content{


        padding:25px;


    }





    .application-content span{


        font-size:45px;


        margin-bottom:12px;


    }





    .application-content h3{


        font-size:24px;


        margin-bottom:10px;


    }





    .application-content p{


        font-size:13px;


        line-height:1.9;


        margin-bottom:18px;


    }





    .application-content strong{


        font-size:14px;


    }



}

/*================ PREMIUM CTA ================*/

.premium-cta{

padding:140px 24px;

}

.cta-box{

position:relative;

padding:80px 60px;

border-radius:34px;

overflow:hidden;

background:rgba(255,180,40,.05);

border:1px solid rgba(255,180,40,.15);

backdrop-filter:blur(12px);

text-align:center;

}

.cta-box::before{

content:"";

position:absolute;

width:450px;

height:450px;

border-radius:50%;

background:radial-gradient(circle,

rgba(255,176,40,.22),

transparent 70%);

top:-220px;

left:-180px;

animation:ctaFloat 9s ease-in-out infinite;

}

.cta-box::after{

content:"";

position:absolute;

width:400px;

height:400px;

border-radius:50%;

background:radial-gradient(circle,

rgba(255,138,74,.18),

transparent 70%);

bottom:-200px;

right:-150px;

animation:ctaFloat2 10s ease-in-out infinite;

}

@keyframes ctaFloat{

50%{

transform:translate(40px,25px);

}

}

@keyframes ctaFloat2{

50%{

transform:translate(-35px,-20px);

}

}

.cta-box>*{

position:relative;

z-index:2;

}

.cta-box {

max-width:700px;

margin:25px auto;

}

.cta-features{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

margin:45px 0;

}

.cta-feature{

padding:14px 24px;

border-radius:50px;

background:rgba(255,255,255,.03);

border:1px solid rgba(255,180,40,.12);

font-size:14px;

color:var(--ink);

transition:.35s;

}

.cta-feature strong{

color:var(--orange-2);

margin-left:8px;

}

.cta-feature:hover{

transform:translateY(-5px);

border-color:rgba(255,180,40,.35);

}

.cta-buttons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

margin-top:20px;

}

.btn-primary{

padding:18px 42px;

border-radius:60px;

background:linear-gradient(135deg,

var(--orange),

var(--orange-2));

color:#fff;

font-weight:800;

text-decoration:none;

box-shadow:0 12px 40px rgba(245,124,0,.35);

transition:.35s;

}

.btn-primary:hover{

transform:translateY(-5px) scale(1.03);

box-shadow:0 18px 60px rgba(245,124,0,.5);

}

.btn-secondary{

padding:18px 42px;

border-radius:60px;

text-decoration:none;

font-weight:700;

color:var(--ink);

border:1px solid rgba(255,180,40,.25);

background:rgba(255,255,255,.03);

transition:.35s;

}

.btn-secondary:hover{

background:rgba(255,180,40,.08);

border-color:rgba(255,180,40,.45);

transform:translateY(-5px);

}

@media(max-width:768px){

.cta-box{

padding:55px 28px;

}

.cta-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

width:100%;

}

}


.section-title{
  margin: 0px 15px 0px 15px;
  
  text-align: center;
}

/*==================================
        PREMIUM ICON
==================================*/

.process-icon{

    width:125px;
    height:125px;

    margin:auto;

    border-radius:32px;

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

    position:relative;

    background:
    linear-gradient(
        145deg,
        rgba(255,176,40,.15),
        rgba(255,255,255,.03)
    );

    border:1px solid rgba(255,176,40,.25);

    backdrop-filter:blur(15px);

    color:var(--orange);

    font-size:42px;

    transition:.5s;

    box-shadow:
    inset 0 0 30px rgba(255,176,40,.05);

}


/* حلقه داخلی */

.process-icon::before{
    
    content:"";

    position:absolute;

    inset:12px;

    border-radius:22px;

    border:1px dashed rgba(255,176,40,.25);

    transition:.5s;

}


/* آیکون */

.process-icon i{

    position:relative;

    z-index:2;

    font-size:42px;

    background:
    linear-gradient(
        135deg,
        #ffb428,
        #ff7a00
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    filter:
    drop-shadow(
        0 0 15px rgba(255,150,0,.45)
    );

    transition:.4s;

}


/* Hover Icon */

.process-item:hover .process-icon{

    transform:
    translateY(-12px)
    rotate(-4deg);

    background:
    linear-gradient(
        135deg,
        var(--orange),
        var(--orange-2)
    );

    box-shadow:

    0 20px 50px rgba(255,130,0,.35),

    0 0 70px rgba(255,160,0,.25);

}


.process-item:hover .process-icon i{

    -webkit-text-fill-color:#fff;

    transform:scale(1.12);

}


.process-item:hover .process-icon::before{

    transform:rotate(180deg);

    border-color:
    rgba(255,255,255,.4);

}



/*==================================
        BIGGER CARD
==================================*/


.process-content{

   text-align: center;

    margin-top:35px;

    padding:32px 28px;

    min-height:220px;

    border-radius:28px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;


    background:
    linear-gradient(
        160deg,
        rgba(255,176,40,.08),
        rgba(255,255,255,.025)
    );


    border:
    1px solid rgba(255,176,40,.15);


    backdrop-filter:blur(18px);

    transition:.45s;

}


/*==================================
        PREMIUM TITLE
==================================*/


.process-content h3{


    font-size:24px;

    font-weight:900;

    color:#fff;


    margin-bottom:18px;


    letter-spacing:-.8px;


    position:relative;


}



/* خط زیر عنوان */

.process-content h3::after{
    margin: auto;
   text-align: center;

    content:"";


    width:55px;

    height:4px;


    display:block;


    margin-top:14px;


    border-radius:20px;


    background:
    linear-gradient(
        90deg,
        var(--orange),
        var(--orange-2)
    );


    box-shadow:

    0 0 15px rgba(255,150,0,.5);


}



/* توضیحات */

.process-content p{


    font-size:16px;

    line-height:2.1;

    color:var(--ink-dim);

    font-weight:500;

}



/*==================================
        DESKTOP SIZE
==================================*/


@media(min-width:993px){

.process-item{

    min-height:360px;

}


.process-content{

    height:220px;

}

}



/*==================================
        MOBILE
==================================*/


@media(max-width:768px){


.process-icon{

    width:95px;

    height:95px;

    border-radius:25px;

}


.process-icon i{

    font-size:32px;

}


.process-content{

    padding:25px;

    min-height:auto;

}


.process-content h3{

    font-size:20px;

}

}