.elementor-8 .elementor-element.elementor-element-d95ebd3{--display:flex;}/* Start custom CSS for html, class: .elementor-element-cf1847e *//* ==========================================
   AFSHAR GEARBOX
   SINGLE HERO
========================================== */

.afg-site {

  direction: rtl;

  font-family:
    Tahoma,
    Arial,
    sans-serif;

  color: #fff;

}

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

.afg-header {

  position: absolute;

  top: 0;
  right: 0;
  left: 0;

  z-index: 100;

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

  background:
    linear-gradient(
      180deg,
      rgba(5,9,13,.92),
      rgba(5,9,13,.35)
    );

}

.afg-header-inner {

  width: min(1400px, 94%);

  min-height: 78px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;

}

/* ==========================================
   LOGO
========================================== */

.afg-logo {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 230px;

  color: #fff;

  text-decoration: none;

}

.afg-logo-icon {

  width: 48px;
  height: 48px;

  display: flex;

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

  border:
    2px solid #e5232e;

  border-radius: 50%;

  color: #e5232e;

  font-size: 27px;

  box-shadow:
    0 0 20px
    rgba(229,35,46,.18);

}

.afg-logo-text strong {

  display: block;

  font-size: 21px;

  font-weight: 900;

  line-height: 1.4;

}

.afg-logo-text strong span {

  color: #e5232e;

}

.afg-logo-text small {

  display: block;

  margin-top: 2px;

  color: #aeb5ba;

  font-size: 9px;

}

/* ==========================================
   NAVIGATION
========================================== */

.afg-nav {

  display: flex;

  align-items: center;

  gap: 28px;

}

.afg-nav a {

  position: relative;

  padding: 29px 0;

  color: #e6e7e8;

  font-size: 12px;

  font-weight: 600;

  text-decoration: none;

  transition: .25s ease;

}

.afg-nav a:hover {

  color: #fff;

}

.afg-nav a.active {

  color: #ef3039;

}

.afg-nav a.active::after {

  content: "";

  position: absolute;

  right: 0;
  left: 0;

  bottom: 17px;

  height: 3px;

  border-radius: 10px;

  background: #e5232e;

}

/* ==========================================
   HEADER BUTTON
========================================== */

.afg-header-btn {

  display: flex;

  align-items: center;

  gap: 9px;

  padding: 12px 20px;

  background: #e5232e;

  color: #fff;

  border-radius: 5px;

  font-size: 11px;

  font-weight: 700;

  text-decoration: none;

  box-shadow:
    0 7px 22px
    rgba(229,35,46,.2);

  transition: .25s ease;

}

.afg-header-btn:hover {

  transform: translateY(-2px);

  background: #ff303b;

}

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

.afg-mobile-menu {

  display: none;

  width: 42px;
  height: 42px;

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

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

  border-radius: 8px;

  padding: 9px;

  cursor: pointer;

}

.afg-mobile-menu span {

  display: block;

  height: 2px;

  margin: 5px 0;

  background: #fff;

}

/* ==========================================
   HERO
========================================== */

.afg-hero {

  position: relative;

  min-height: 680px;

  overflow: hidden;

  background: #070c10;

}

/* ==========================================
   BACKGROUND
========================================== */

.afg-slide-bg {

  position: absolute;

  inset: 0;

  background:

    linear-gradient(
      90deg,
      rgba(5,10,14,.98) 0%,
      rgba(5,10,14,.92) 34%,
      rgba(5,10,14,.55) 67%,
      rgba(5,10,14,.88) 100%
    ),

    url("http://afshargreabox.ir/wp-content/uploads/2026/10/afshar-gearbox-hero.webp")
    center / cover no-repeat;

}

.afg-slide-bg::after {

  content: "";

  position: absolute;

  inset: 0;

  background:

    radial-gradient(
      circle at 72% 45%,
      rgba(229,35,46,.13),
      transparent 28%
    );

}

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

.afg-hero-container {

  position: relative;

  z-index: 3;

  width: min(1400px, 94%);

  min-height: 600px;

  margin: auto;

  padding-top: 120px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 60px;

}

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

.afg-hero-content {

  width: 52%;

  max-width: 720px;

}

.afg-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 17px;

  padding: 8px 13px;

  color: #e5232e;

  background:
    rgba(229,35,46,.08);

  border-right:
    3px solid #e5232e;

  font-size: 11px;

  font-weight: 700;

}

.afg-eyebrow i {

  font-style: normal;

  font-size: 14px;

}

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

.afg-hero-content h1 {

  margin: 0 0 18px;

  color: #fff;

  font-size:
    clamp(38px, 4vw, 62px);

  font-weight: 900;

  line-height: 1.45;

  letter-spacing: -1.5px;

}

.afg-hero-content h1 strong {

  display: block;

  color: #e5232e;

  font-weight: 900;

}

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

.afg-hero-content p {

  max-width: 620px;

  margin: 0 0 27px;

  color: #c4c9cd;

  font-size: 15px;

  line-height: 2.15;

}

/* ==========================================
   BUTTONS
========================================== */

.afg-hero-buttons {

  display: flex;

  align-items: center;

  gap: 12px;

  flex-wrap: wrap;

  margin-bottom: 34px;

}

.afg-btn-primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  min-width: 190px;

  padding: 14px 22px;

  background: #e5232e;

  color: #fff;

  border-radius: 5px;

  font-size: 12px;

  font-weight: 800;

  text-decoration: none;

  box-shadow:
    0 10px 30px
    rgba(229,35,46,.22);

  transition: .25s ease;

}

.afg-btn-primary:hover {

  transform: translateY(-3px);

  background: #f52b36;

}

.afg-btn-primary span {

  font-size: 19px;

  line-height: 1;

}

.afg-btn-secondary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-width: 170px;

  padding: 13px 21px;

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

  color: #fff;

  border-radius: 5px;

  font-size: 12px;

  font-weight: 700;

  text-decoration: none;

  transition: .25s ease;

}

.afg-btn-secondary:hover {

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

  border-color: #fff;

}

/* ==========================================
   FEATURES
========================================== */

.afg-hero-features {

  display: flex;

  align-items: center;

  gap: 27px;

}

.afg-feature {

  display: flex;

  align-items: center;

  gap: 9px;

}

.afg-feature-icon {

  width: 36px;
  height: 36px;

  display: flex;

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

  border:
    1px solid rgba(229,35,46,.6);

  border-radius: 50%;

  color: #e5232e;

  font-size: 15px;

}

.afg-feature strong {

  display: block;

  margin-bottom: 2px;

  color: #fff;

  font-size: 10px;

}

.afg-feature span {

  display: block;

  color: #888f94;

  font-size: 8px;

}

/* ==========================================
   HERO VISUAL
========================================== */

.afg-hero-visual {

  position: relative;

  width: 43%;

  min-height: 450px;

  display: flex;

  align-items: center;

  justify-content: center;

}

.afg-visual-glow {

  position: absolute;

  width: 420px;
  height: 420px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(229,35,46,.16),
      transparent 65%
    );

  filter: blur(15px);

}

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

.afg-gearbox-card {

  position: relative;

  z-index: 2;

  width: 410px;
  height: 300px;

  display: flex;

  align-items: center;

  justify-content: center;

  background:

    linear-gradient(
      145deg,
      rgba(35,43,49,.9),
      rgba(8,13,17,.9)
    );

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

  border-radius: 22px;

  box-shadow:
    0 30px 80px
    rgba(0,0,0,.45);

}

.afg-gearbox-card::before {

  content: "";

  position: absolute;

  inset: 10px;

  border:
    1px solid rgba(229,35,46,.18);

  border-radius: 16px;

}

.afg-gearbox-placeholder {

  text-align: center;

  color: #e5232e;

}

.afg-gearbox-symbol {

  font-size: 130px;

  line-height: 1;

  filter:
    drop-shadow(
      0 0 20px
      rgba(229,35,46,.3)
    );

}

.afg-gearbox-placeholder span {

  display: block;

  margin-top: 10px;

  color: #fff;

  font-size: 18px;

  font-weight: 900;

  letter-spacing: 4px;

}

.afg-gearbox-placeholder small {

  display: block;

  margin-top: 3px;

  color: #888;

  font-size: 9px;

  letter-spacing: 3px;

}

/* ==========================================
   FLOATING BADGE
========================================== */

.afg-floating-badge {

  position: absolute;

  z-index: 4;

  right: 5px;

  bottom: 60px;

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 12px 15px;

  background:
    rgba(16,22,27,.94);

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

  border-radius: 8px;

  box-shadow:
    0 15px 35px
    rgba(0,0,0,.4);

}

.afg-badge-icon {

  width: 38px;
  height: 38px;

  display: flex;

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

  background: #e5232e;

  border-radius: 50%;

  font-size: 17px;

}

.afg-floating-badge strong {

  display: block;

  margin-bottom: 3px;

  color: #fff;

  font-size: 10px;

}

.afg-floating-badge span {

  color: #888;

  font-size: 8px;

}

/* ==========================================
   BOTTOM BAR
========================================== */

.afg-hero-bottom {

  position: absolute;

  z-index: 5;

  right: 0;
  bottom: 0;
  left: 0;

  min-height: 72px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 70px;

  background:
    rgba(3,8,12,.75);

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

}

.afg-bottom-item {

  display: flex;

  align-items: center;

  gap: 10px;

}

.afg-bottom-item strong {

  color: #e5232e;

  font-size: 13px;

}

.afg-bottom-item span {

  color: #aeb4b8;

  font-size: 10px;

}

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

@media (max-width: 1100px) {

  .afg-nav {

    gap: 16px;

  }

  .afg-nav a {

    font-size: 10px;

  }

  .afg-header-action {

    display: none;

  }

  .afg-hero-content {

    width: 58%;

  }

  .afg-hero-visual {

    width: 38%;

  }

  .afg-gearbox-card {

    width: 330px;

    height: 260px;

  }

  .afg-hero-bottom {

    gap: 30px;

  }

}

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

@media (max-width: 850px) {

  .afg-header-inner {

    min-height: 70px;

  }

  .afg-nav {

    display: none;

  }

  .afg-mobile-menu {

    display: block;

  }

  .afg-logo {

    min-width: auto;

  }

  .afg-hero {

    min-height: 760px;

  }

  .afg-hero-container {

    min-height: 680px;

    padding-top: 115px;

    flex-direction: column;

    justify-content: center;

    text-align: center;

  }

  .afg-hero-content {

    width: 100%;

    max-width: 700px;

  }

  .afg-eyebrow {

    border-right: 0;

    border-bottom:
      2px solid #e5232e;

  }

  .afg-hero-content h1 {

    font-size: 38px;

  }

  .afg-hero-content p {

    margin-left: auto;

    margin-right: auto;

  }

  .afg-hero-buttons {

    justify-content: center;

  }

  .afg-hero-features {

    justify-content: center;

    flex-wrap: wrap;

  }

  .afg-hero-visual {

    width: 100%;

    min-height: 200px;

  }

  .afg-gearbox-card {

    width: 300px;

    height: 190px;

  }

  .afg-gearbox-symbol {

    font-size: 80px;

  }

  .afg-floating-badge {

    bottom: 0;

    right:
      calc(50% - 170px);

  }

  .afg-hero-bottom {

    display: none;

  }

}

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

@media (max-width: 550px) {

  .afg-header-inner {

    width: 92%;

  }

  .afg-logo-icon {

    width: 40px;

    height: 40px;

    font-size: 22px;

  }

  .afg-logo-text strong {

    font-size: 17px;

  }

  .afg-logo-text small {

    font-size: 7px;

  }

  .afg-hero {

    min-height: 720px;

  }

  .afg-hero-container {

    width: 90%;

    min-height: 660px;

    padding-top: 105px;

  }

  .afg-hero-content h1 {

    font-size: 29px;

    letter-spacing: -.5px;

  }

  .afg-hero-content p {

    font-size: 12px;

    line-height: 2;

  }

  .afg-eyebrow {

    font-size: 9px;

  }

  .afg-btn-primary,
  .afg-btn-secondary {

    width: 100%;

    min-width: 0;

    padding: 13px 15px;

    font-size: 11px;

  }

  .afg-hero-buttons {

    width: 100%;

  }

  .afg-hero-features {

    gap: 12px;

  }

  .afg-feature {

    flex: 1;

    min-width: 90px;

    justify-content: center;

    flex-direction: column;

  }

  .afg-feature strong {

    font-size: 9px;

  }

  .afg-feature span {

    font-size: 7px;

  }

  .afg-feature-icon {

    width: 31px;

    height: 31px;

  }

  .afg-gearbox-card {

    width: 250px;

    height: 160px;

  }

  .afg-gearbox-symbol {

    font-size: 65px;

  }

  .afg-floating-badge {

    right: 50%;

    transform: translateX(50%);

    white-space: nowrap;

  }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7ced2eb *//* ================================
   AFSHAR GEARBOX
   SERVICES SECTION
================================ */

.afshar-services {
    width: 100%;
    background: #f1f5f8;
    padding: 28px 18px 30px;
    box-sizing: border-box;
    font-family: "IRANSans", "Vazirmatn", Tahoma, Arial, sans-serif;
}

.afshar-services *,
.afshar-services *::before,
.afshar-services *::after {
    box-sizing: border-box;
}

.afshar-services-container {
    width: 100%;
    max-width: 1550px;
    margin: 0 auto;
}

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

.afshar-section-header {
    text-align: center;
    margin-bottom: 18px;
}

.afshar-section-header h2 {
    margin: 0 0 5px;
    color: #101820;
    font-size: 25px;
    font-weight: 900;
    line-height: 1.4;
}

.afshar-section-header p {
    margin: 0;
    color: #303941;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.8;
}

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

.afshar-services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
    width: 100%;
}

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

.afshar-service-card {
    position: relative;
    display: block;
    height: 122px;
    overflow: hidden;

    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.28);

    text-decoration: none;
    color: #fff;

    background: #111a20;

    isolation: isolate;
    transition:
        transform 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.afshar-service-card:hover {
    transform: translateY(-3px);
    border-color: rgba(225, 30, 38, 0.75);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}

/* ================================
   BACKGROUND IMAGE
================================ */

.service-bg {
    position: absolute;
    inset: 0;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    z-index: -3;

    transition: transform 0.45s ease;
}

.afshar-service-card:hover .service-bg {
    transform: scale(1.06);
}

/*
   این تصاویر را بعداً با عکس‌های واقعی
   پروژه جایگزین کن.
*/

.service-bg-1 {
    background-image:
        url("https://images.unsplash.com/photo-1632823469850-1f77b5f6f8b7?auto=format&fit=crop&w=900&q=80");
}

.service-bg-2 {
    background-image:
        url("https://images.unsplash.com/photo-1486262715619-67b85e0b08d3?auto=format&fit=crop&w=900&q=80");
}

.service-bg-3 {
    background-image:
        url("https://images.unsplash.com/photo-1600705722908-bab6e92f6c7d?auto=format&fit=crop&w=900&q=80");
}

.service-bg-4 {
    background-image:
        url("https://images.unsplash.com/photo-1615906655593-ad0386982a0f?auto=format&fit=crop&w=900&q=80");
}

.service-bg-5 {
    background-image:
        url("https://images.unsplash.com/photo-1517524008697-84bbe3c3fd98?auto=format&fit=crop&w=900&q=80");
}

.service-bg-6 {
    background-image:
        url("https://images.unsplash.com/photo-1625047509248-ec889cbff17f?auto=format&fit=crop&w=900&q=80");
}

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

.service-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(4, 11, 16, 0.88) 0%,
            rgba(5, 13, 19, 0.68) 45%,
            rgba(4, 10, 15, 0.82) 100%
        );

    z-index: -2;
}

.service-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.08),
            rgba(0, 0, 0, 0.35)
        );
}

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

.service-content {
    position: relative;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    padding: 12px 14px;
    text-align: right;
}

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

.service-icon {
    width: 30px;
    height: 30px;

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

    margin-bottom: 4px;

    color: #e51e25;
    font-size: 23px;
    line-height: 1;

    text-shadow:
        0 0 8px rgba(229, 30, 37, 0.25);
}

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

.service-content h3 {
    margin: 0 0 4px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 800;
    line-height: 1.55;

    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}

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

.service-content p {
    margin: 0;

    max-width: 100%;

    color: rgba(255, 255, 255, 0.86);

    font-size: 9px;
    font-weight: 400;
    line-height: 1.7;

    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

/* ================================
   RESPONSIVE
================================ */

@media (max-width: 1200px) {

    .afshar-services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .afshar-service-card {
        height: 140px;
    }
}

@media (max-width: 700px) {

    .afshar-services {
        padding: 25px 12px;
    }

    .afshar-section-header h2 {
        font-size: 21px;
    }

    .afshar-section-header p {
        font-size: 11px;
    }

    .afshar-services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .afshar-service-card {
        height: 145px;
    }

    .service-content {
        padding: 11px;
    }

    .service-content h3 {
        font-size: 12px;
    }

    .service-content p {
        font-size: 9px;
    }
}

@media (max-width: 420px) {

    .afshar-services-grid {
        grid-template-columns: 1fr;
    }

    .afshar-service-card {
        height: 130px;
    }
}/* End custom CSS */