.elementor-773 .elementor-element.elementor-element-f66a2dc{--display:flex;border-style:none;--border-style:none;}.elementor-773 .elementor-element.elementor-element-83a3346{--display:flex;}.elementor-theme-builder-content-area{height:400px;}.elementor-location-header:before, .elementor-location-footer:before{content:"";display:table;clear:both;}@media(max-width:767px){.elementor-773 .elementor-element.elementor-element-f66a2dc{--content-width:500px;--min-height:0px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--border-radius:0px 0px 0px 0px;--margin-top:0px;--margin-bottom:17px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:3px;--padding-left:0px;--padding-right:0px;}.elementor-773 .elementor-element.elementor-element-616dcf1{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:-0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-616dcf1 */:root{
    --card-size: 95px; /* اندازه کارت (عرض و ارتفاع) - در موبایل کوچک */
    --pill-width: 25px;
    --pill-radius: 25px;
    --gap: 1px;
    --shadow: 0 10px 18px rgba(22,30,40,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
  }
/* فونت تیترها */ @font-face{ font-family: "YekanTitle"; src: url("https://khfanoo.ir/wp-content/uploads/2025/11/YekanBakh-Bold.woff") format("woff"); font-weight: 500; font-display: swap;}

/* فونت نوشته‌های معمولی */
@font-face{
    font-family: "YekanText";
    src: url("https://khfanoo.ir/wp-content/uploads/2025/11/YekanBakh-Bold.woff") format("woff");
    font-weight: 500;
    font-display: swap;
}

/* فونت نوشته داخل نوار عمودی (LOREM IPSUM چرخیده) */
@font-face{
    font-family: "YekanText";
    src: url("https://khfanoo.ir/wp-content/uploads/2025/11/YekanBakh-Bold.woff") format("woff");
    font-weight: 400;
    font-display: swap;


}

.cards-row{
  display: flex;
  justify-content: center;   /* ✅ وسط‌چین افقی */
  align-items: flex-start;
  gap: var(--gap);

  padding: 2px 1px 15px;   /* ✅ فضای امن برای هاور */
  
}

/* ✅ وسط‌چین واقعی حتی در حالت اسکرول */
.cards-row::before,
.cards-row::after{
  content: "";
  flex: 0 0 50%;
}


  /* هر کارت */
  .card{
    position:relative;
    flex: 0 0 var(--card-size);
    width:var(--card-size);
    height:var(--card-size);
    background: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
    border-radius:18px;
    box-shadow: var(--shadow);
    padding:11px 1px 14px 1px; /* left padding بزرگتر برای جا دادن پِل */
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
    font-family: var(--font-family-custom), system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  /* نوار عمودی رنگی در سمت چپ */
  .card .pill{
    position:absolute;
    left:10px;
    top:50%;
    transform: translateY(-50%);
    width:var(--pill-width);
    height:calc(var(--card-size) - 28px);
    border-radius:var(--pill-radius);
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
  }

  /* متن داخل نوار — عمودی/چرخیده */
  .card .pill .rot-text{
    transform: rotate(-90deg);
    transform-origin:center;
    white-space:nowrap;
    font-size:11px;
    letter-spacing:1px;
    font-weight:500;
    color:#fff;
  }
.card .pill{
    box-shadow: 0 8px 18px rgba(0,0,0,0.18);
}
.card .pill{
    position: absolute;
    left: 5px;
    top: 52%;
    transform: translateY(-50%);
    width: var(--pill-width);
    height: calc(var(--card-size) - 30px);
    border-radius: var(--pill-radius);

    /* گـــرادیـــان داخلی برای عمق */
    background: linear-gradient(180deg, #e8ebee, #d8dadd);

    /* سایه‌های داخلی برای فرورفتگی واقعی */
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.22),      /* سایه تیره داخل */
        inset -4px -4px 8px rgba(255,255,255,0.9), /* هایلایت روشن داخل */
        0 4px 12px rgba(0,0,0,0.1);                /* سایه بیرونی خیلی ملایم */
}

  /* دایره آیکون که بالاتر از کادر قرار می‌گیره */
  .card .icon-circle{
    width:36px;
    height:36px;
    border-radius:50%;
    background: #fff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:-30px; /* برای قرار گرفتن روی لبه بالا */
    border-radius: 18px;
    border: 2px solid rgba(59,0,78,0.18);
    box-shadow: 
        0 0 8px rgba(59,0,78,0.28);
    box-shadow: 0 6px 12px rgba(16,24,32,0.06);
    
  }
  
.card .icon-circle{
    color: #3b004e;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12), 
                0 2px 4px rgba(0,0,0,0.08);
}

  .card h3{
    margin:10px 30px 2px;
    font-size:11px;
    font-weight:650;
    padding-left:30px;
    line-height:1.5;

    /* نمونه رنگ برای اولین کارت؛ با JS/CSS تغییر می‌کنیم */

  }

  .card p{
    margin:0;
    font-size:11px;
    line-height:1.2;
    color: #9aa3ad;
    opacity:0.95;
  }
/* کارت 1 - گرادیان #003B4E */
.c-1 .pill{
    background: linear-gradient(180deg, #005B72 0%, #003B4E 100%);
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.32),
        inset -4px -4px 8px rgba(255,255,255,0.18),
        0 4px 12px rgba(0,0,0,0.15);
}

/* کارت 2 - گرادیان #5F0E45 */
.c-2 .pill{
    background: linear-gradient(180deg, #8A1666 0%, #5F0E45 100%);
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.34),
        inset -4px -4px 8px rgba(255,255,255,0.20),
        0 4px 12px rgba(0,0,0,0.15);
}

/* کارت 3 - گرادیان #3B004E */
.c-3 .pill{
    background: linear-gradient(180deg, #5A007A 0%, #3B004E 100%);
    box-shadow:
        inset 4px 4px 8px rgba(0,0,0,0.36),
        inset -4px -4px 8px rgba(255,255,255,0.18),
        0 4px 12px rgba(0,0,0,0.15);
       
}
/* کارت 1 */
.c-1 h3{
    color: #0A6C84 !important;
}

/* کارت 2 */
.c-2 h3{
    color: #5f0e45 !important;
}

/* کارت 3 */
.c-3 h3{
    color: #3B004E !important;
}

/* متن کارت 1 */
.c-1 p{
    color: rgba(0, 91, 114, 0.80) !important;
}

/* متن کارت 2 */
.c-2 p{
    color: rgba(138, 22, 102, 0.80) !important;
}

/* متن کارت 3 */
.c-3 p{
    color: rgba(90, 0, 122, 0.80) !important;
}
.card{
    background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F4 80%);
    box-shadow: 
        0 10px 18px rgba(22, 30, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.c-1.card{
    border-radius: 18px;
    border: 2px solid rgba(0,59,78,0.18);
    box-shadow: 
        0 0 8px rgba(0,59,78,0.28);
        
}
.c-2.card{
    border-radius: 18px;
    border: 2px solid rgba(95,14,69,0.18);
    box-shadow: 
        0 0 8px rgba(95,14,69,0.28);
}
.c-3.card{
    border-radius: 18px;
    border: 2px solid rgba(59,0,78,0.18);
    box-shadow: 
        0 0 8px rgba(59,0,78,0.28);
        
}
  /* کوچک‌سازی/فاصله برای اندازه‌های خیلی کوچک موبایل */
  
    :root{ --card-size:120px; --pill-width:30px; }
    .card .icon-circle{ width:46px; height:46px; margin-top:-24px; }
    .card h3{ font-size:12px; }
    .card p{ font-size:10px; }
  
  
  /* افکت کلی هاور و کلیک روی کارت */
.card{
  transition: 
    transform 0.28s ease,
    box-shadow 0.28s ease;
  cursor: pointer;
}

/* هاور (دسکتاپ) */
.card:hover{
  transform: translateY(-1px) scale(1.015);
  box-shadow: 
    0 16px 28px rgba(0,0,0,0.14),
    inset 0 1px 0 rgba(255,255,255,0.7);
}

/* کلیک (موبایل و دسکتاپ) */
.card:active{
  transform: scale(0.96);
  box-shadow: 
    0 6px 14px rgba(0,0,0,0.18);
}

/* انیمیشن نوار رنگی هنگام هاور */
.card .pill{
  transition: 
    transform 0.3s ease,
    filter 0.3s ease;
}

.card:hover .pill{
  transform: translateY(-50%) scale(1.06);
  filter: brightness(1.15);
}

/* انیمیشن دایره آیکن */
.card .icon-circle{
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover .icon-circle{
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

/* افکت موج نرم هنگام کلیک */
.card:active .icon-circle{
  transform: scale(0.9);
}

.cards-row{
  position: relative;
  z-index: 1;
}
.card{
  position: relative;
  z-index: 2;  /* کارت همیشه روی کانتینر میاد */
}

/* ✅ وسط‌چین واقعی حتی در حالت اسکرول */
.cards-row::before,
.cards-row::after{
  content: "";
  flex: 0 0 50%;

}
/* =========================
   ✅ ریسپانسیو برای موبایل
   ========================= */
@media (max-width: 480px) {

  :root{
    --card-size: 90px;
    --pill-width: 24px;
    --gap: 6px;
  }

  .cards-row{
    gap: 6px;
    padding-bottom: 20px;
  }

  .card{
    padding: 10px 2px 12px;
    border-radius: 14px;
  }

  .card .icon-circle{
    width: 32px;
    height: 32px;
    margin-top: -26px;
  }

  .card h3{
    font-size: 10.5px;
    margin: 8px 18px 2px;
    padding-left: 26px;
  }

  .card p{
    font-size: 10px;
  }

  .card .pill{
    height: calc(var(--card-size) - 26px);
    left: 6px;
  }

  .card .pill .rot-text{
    font-size: 10px;
  }
}


/* =========================
   ✅ ریسپانسیو برای لپ‌تاپ
   ========================= */
@media (min-width: 768px) and (max-width: 1366px){

  :root{
    --card-size: 125px;
    --pill-width: 32px;
    --gap: 14px;
  }

  .cards-row{
    gap: 14px;
    padding-bottom: 30px;
  }

  .card{
    padding: 14px 6px 18px;
    border-radius: 20px;
  }

  .card .icon-circle{
    width: 48px;
    height: 48px;
    margin-top: -28px;
  }

  .card h3{
    font-size: 13px;
    margin: 12px 36px 4px;
    padding-left: 32px;
  }

  .card p{
    font-size: 12px;
  }

  .card .pill{
    height: calc(var(--card-size) - 34px);
    left: 8px;
  }

  .card .pill .rot-text{
    font-size: 12px;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ea8022e *//* ---------- پایه فوتر موبایل ---------- */

.mobile-footer {
  background: #3B004E;
  padding: 40px 15px 25px;
  text-align: center;
  position: relative;
  color: #FFF9F4;
  overflow: hidden;
  border-radius: 30px 2px 30px 0;
}
/* --- شبکه‌های اجتماعی --- */
.mobile-footer-social {
    margin-top: 25px;
    display: flex;
    justify-content: center;
    gap: 18px;
}

.mobile-footer-social a img,
.mobile-footer-social a i {
    width: 26px;
    height: 26px;
    transition: .3s ease;
}
/* آیکون‌های Font Awesome (تلگرام + واتساپ) */
.mobile-footer-social a i {
    font-size: 28px;
    transition: .3s ease;}
    
/* تغییر رنگ آیکون تلگرام */
.mobile-footer-social .telegram i {
    font-size: 28px;
    color: #fff9f4;
}
.mobile-footer-social .whatsapp i {
    color: #fff9f4;
}
/* افکت هاور همه آیکون‌ها */
.mobile-footer-social a:hover img,
.mobile-footer-social a:hover i {
    transform: translateY(-5px) scale(1.12);
    
}
    /* تلگرام */
.mobile-footer-social .telegram:hover i {
    color: #00b0ff;   /* رنگ هاور اختصاصی */
}

/* واتساپ */
.mobile-footer-social .whatsapp:hover i {
    color: #2bff7d;   /* هاور اختصاصی واتساپ */
}

.mobile-footer-social a img {
  transition: 0.3s ease;
}

.mobile-footer-social a:hover img {
  filter: brightness(0) saturate(100%) invert(53%) sepia(80%) saturate(800%) hue-rotate(352deg) brightness(92%) contrast(105%);
}




/* ---------- لوگو با نسخه 3 (پلت رنگی برند) ---------- */

.mobile-footer-logo {
  position: relative;
  margin-bottom: -70px;
}

.mobile-footer-logo img {
  width: 110px;
  position: relative;
  z-index: 1;
 
}


/* ---------- منوهای فوتر ---------- */

.mobile-footer-menu,
.mobile-footer-portfolio {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.mobile-footer-menu a,
.mobile-footer-portfolio a {
  color: #FFF9F4;
  font-size: 14px;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  transition: 0.2s;
}

.mobile-footer-menu a:hover,
.mobile-footer-portfolio a:hover {
  background: rgba(255,255,255,0.18);
}


/* ---------- شبکه های اجتماعی ---------- */

.mobile-footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 20px 0;
}

.mobile-footer-social img {
  width: 26px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
}


/* ---------- ایمیل ---------- */

.mobile-footer-email span {
  font-size: 13px;
  color: #FFF9F4;
  opacity: 0.8;
}
.site-copy {
  text-align: center;
  font-size: 13px;
  color: #888;
  margin-top: 15px;
  margin-bottom: 0;
  opacity: 0.8;
  }

.mobile-footer-logo,
.footer-logo-box {
  position: relative;
  top: -93px;
  z-index: 10;
}

.mobile-footer-logo img,
.footer-logo-box img {
  width: 120px;
  filter:
    drop-shadow(0 6px 12px #3B004E40)
    drop-shadow(0 10px 20px #3B004E25)
    drop-shadow(0 14px 30px #3B004E35);
  transition: transform 0.3s, filter 0.3s;
}

/* افکت Hover لوگو (اختیاری) */
.mobile-footer-logo img:hover,
.footer-logo-box img:hover {
  transform: scale(1.05);
  filter:
    drop-shadow(0 8px 16px #3B004E50)
    drop-shadow(0 19px 25px #3B004E30)
    drop-shadow(0 16px 35px #3B004E40);
}

.mobile-footer {
  position: relative; /* برای اینکه لوگو نسبت به فوتر قرار بگیره */
  overflow: visible;  /* این مهمه */
}

/* =========================
   ✅ فوتر مخصوص تبلت
   ========================= */
@media (min-width: 600px) and (max-width: 1024px) {

  .mobile-footer {
    display: block;
    padding: 50px 30px 35px;
    border-radius: 40px 10px 40px 10px;
  }

  .mobile-footer-logo {
    top: -112px;
  }

  .mobile-footer-logo img {
    width: 140px;
  }

  .mobile-footer-menu,
  .mobile-footer-portfolio {
    gap: 16px;
    margin-bottom: 20px;
  }

  .mobile-footer-menu a,
  .mobile-footer-portfolio a {
    font-size: 15px;
    padding: 6px 14px;
  }

  .mobile-footer-social {
    gap: 22px;
    margin: 25px 0;
  }

  .mobile-footer-social a i,
  .mobile-footer-social img {
    width: 30px;
    font-size: 32px;
  }

  .mobile-footer-email span {
    font-size: 14px;
  }

  .site-copy {
    font-size: 14px;
  }
}/* End custom CSS */