/* ============================= */
/* 2. ROOT VARIABLES */
/* ============================= */

:root,
[data-theme="light"] {
  --br-16: 12px;
  --br-30: 10px;
  --c-black: #000;
  --c-danger: #f40259;
  --c-info: #0288d1;
  --c-neutral-100: #fefefe;
  --c-neutral-150: #f5f5f7;
  --c-neutral-200: #f1f1f1;
  --c-neutral-250: #dddce5;
  --c-neutral-300: #d1d1d1;
  --c-neutral-350: #b3b3b3;
  --c-neutral-400: #9c9c9c;
  --c-neutral-500: #333333;
  --c-neutral-600: #2b2b2b;
  --c-neutral-700: #171719;
  --c-primary: #050033;
  --c-primary-100: #f6f5fa;
  --c-primary-150: #edecf5;
  --c-primary-200: #eae9f3;
  --c-primary-250: #a9a6c1;
  --c-primary-300: #938ec4;
  --c-primary-350: #6d6991;
  --c-primary-400: #1900ff;
  --c-primary-50: #f0f0f5;
  --c-primary-500: #0f0099;
  --c-primary-600: #090066;
  --c-primary-700: #07004c;
  --c-primary-800: #16171f;
  --c-primary-850: #03001a;
  --c-secondary: #cd6c58;
  --c-success: #0acd58;
  --c-white: #fff;
  --ease1: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease2: cubic-bezier(0.5, 1, 0.89, 1);
  --ease3: cubic-bezier(0.62, 0.05, 0.01, 0.99);
  --ease4: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease5: cubic-bezier(0.24, 0.43, 0.15, 0.97);
  --ease6: cubic-bezier(0.23, 1, 0.32, 1);
  --ease7: cubic-bezier(0.12, 0, 0.39, 0);
  --ff-en: Poppins;
  --ff-main: Arial;
  --fs-10: 1.3rem;
  --fs-11: 1.4rem;
  --fs-12: 1.5rem;
  --fs-13: 1.5rem;
  --fs-14: 1.6rem;
  --fs-15: 1.6rem;
  --fs-16: 1.7rem;
  --fs-18: 1.9rem;
  --fs-20: 2rem;
  --fs-22: 2.2rem;
  --fs-24: 2.4rem;
  --fs-26: 2.6rem;
  --fs-28: 2.8rem;
  --fs-30: 3rem;
  --fs-32: 3.2rem;
  --fs-34: 3.4rem;
  --fs-36: 3.6rem;
  --fs-38: 3.8rem;
  --fs-40: 4rem;
  --fs-42: 4rem;
  --fw-100: "wght" 100;
  --fw-150: "wght" 150;
  --fw-200: "wght" 200;
  --fw-250: "wght" 250;
  --fw-300: "wght" 300;
  --fw-350: "wght" 350;
  --fw-400: "wght" 400;
  --fw-450: "wght" 450;
  --fw-500: "wght" 500;
  --fw-600: "wght" 600;
}


/* ---------- تنظیمات پایه فقط برای بخش خدمات ---------- */
.service-section {
    /* این تنظیم فقط روی محتویات این کلاس تأثیر می‌گذارد */
    font-size: 10px; /* مقدار پایه برای rem های داخل بخش */
}
.service-section * {
    /* بازنشانی فونت به حالت عادی برای المان‌های داخلی */
    font-size: inherit;
}

/* ---------- استایل کارت‌ها ---------- */
.service-cats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin: 2rem 0;
}

.service-cat__img {
    position: relative;
    display: block;
    overflow: hidden;
    clip-path: url(#serviceCardCurve);
    background-color: #f5f5f7;
}
.service-cat__img video,
.service-cat__img img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}
.service-cat__img video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.service-cat-card:hover .service-cat__img video {
    opacity: 1;
}
.service-cat__img .poster-img {
    position: relative;
    z-index: 1;
}
.service-cat-top {
    position: relative;
    isolation: isolate;
}

.service-cat-top:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 50%;
    background: rgba(0, 0, 0, 0.03);
    filter: blur(15px);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
}

.service-cat__title {
    font-size: 0.97rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.service-cat__title a {
    color: #0a4b8a;
    text-decoration: none;
}
.service-cat__title a:hover {
    color: #1e88e5;
}
.service-cat__entitle {
    font-size: 0.7rem;
    font-family: 'Poppins', sans-serif;
    margin: 0 0 1rem;
    color: #6d6991;
}
.service-cat__desc {
    font-size: 0.7rem;
    line-height: 1.8;
    text-align: justify;
    color: #444;
    margin-top: 0.5rem;
}

/* ---------- ریسپانسیو با clamp ---------- */
@media (min-width: 768px) {
    .service-cats {
        flex-direction: row;
        align-items: stretch;
    }
    .service-cat-card {
        max-width: 26.5%;
        margin-bottom: 0;
    }
}
@media (max-width: 767px) {
    .service-cat-card {
        max-width: 90%;
    }
}
/* تنظیم اندازه فونت برای دسکتاپ و موبایل بدون تغییر html */
@media (min-width: 1200px) {
    .service-section {
        font-size: 8px;
    }
}
@media (max-width: 1199px) and (min-width: 768px) {
    .service-section {
        font-size: 8.5px;
    }
}
@media (max-width: 767px) {
    .service-section {
        font-size: 8px;
    }
}
.service-cat__img {
    clip-path: url(#serviceCardCurve);
    /* fallback برای مرورگرهای قدیمی */
    border-radius: 20px;
    overflow: hidden;
}