/* =========================================================
Root Variables - Start
========================================================= */
@font-face {
    font-family: IRANSans;
    src: url('/fonts/IRANSansWeb(FaNum).woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/IRANSansWeb(FaNum).woff') format('woff'), /* Pretty Modern Browsers */ url('/fonts/IRANSansWeb(FaNum).ttf') format('truetype'); /* Legacy iOS */
}

@font-face {
    font-family: 'Kufi';
    font-style: normal;
    font-weight: 400;
    src: local('Kufi'), local('DroidArabicKufi'), url(/fonts/Kufi.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE80-FEFC;
}

a, a:link, a:visited, a:hover, a:active {text-decoration:none;}

:root {
/* Colors */
--primary-color: #b48a36;
--bs-primary: var(--parimary-color);
--primary-color-darker: #906b20;
--primary-rgb: 180, 138, 54;
--bs-primary-rgb: var(--primary-rgb);
--secondary-color: #533a08;
--white: #ffffff;
--white-rgb: 255, 255, 255;
--black: #000000;
--black-rgb: 0, 0, 0;
/* Light Theme Base */
--body-bg: #fff;
--body-color: #212529;
--muted-color: #6c757d;
--border-light: #e9ecef;
/* Dark Theme Base */
--dark-bg: #0f1115;
--dark-text: #f1f3f5;
--dark-muted: #adb5bd;
--dark-border: #2a2f38;
--dark-panel: #15171c;
/* Shadows */
--shadow-sm: 0 10px 30px rgba(15, 23, 42, .04);
--shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
--shadow-lg: 0 16px 40px rgba(15, 23, 42, .12);
/* Transitions & Layout */
--transition-base: .25s ease;
--transition-fast: .2s ease;
--mega-translate-x: -50%;
--transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
/* Links */
--nav-main-link:#906b20;
--theme-links:#906b20;
/* NavBar */
--nav-toggle-bg: transparent;
--nav-toggle-icon-size : 24px;
--nav-toggle-box-size : 24px;
--navbar-bg-normal: none;
--navbar-bg-dark: rgba(0,0,0, 0.95);
--navbar-bg-fixed: rgba(255,255,255,0.95);
--text-light: #fff;
}
.text-justify {text-align:justify;}


:dir(rtl) {
--mega-translate-x: 50%;
}
/* =========================================================
Root Variables - End
========================================================= */


/* =========================================================
Base Body Styles - Start
========================================================= */
body {
font-family: IRANSans, Arial, sans-serif;
background: var(--body-bg);
color: var(--body-color);
transition: background var(--transition-base), color var(--transition-base);
}

body.dark {
background: var(--dark-bg);
color: var(--dark-text);
}
/* =========================================================
Base Body Styles - End
========================================================= */

.feature-card h1, h2, h3, h4, h5, h6 {color:#fff;}
.btn-theme-primary {
--bs-btn-color: #fff;
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color-darker);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--primary-color-darker);
  --bs-btn-hover-border-color: var(--primary-color-darker);
  --bs-btn-focus-shadow-rgb: none;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--primary-color-darker);
  --bs-btn-active-border-color: var(--primary-color-darker);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #0d6efd;
  --bs-btn-disabled-border-color: #0d6efd;
}


h1, h2, h3, h4, h5, h6 {color:var(--primary-color)}







/* Under Construction */
.under-construction video {max-width:100%;}
.under-construction h2 {color:var(--primary-color-darker)}


/* Block Type 1 */
.block-type-1 {padding:10px 0px 30px 0px;}


/* Benefit Section */
.benefits-section {padding: 30px 0px;}
        /* استایل‌های سفارشی بخش Benefits */
        .benefits-section {
            padding: 80px 0;
            background-color: var(--bg-light);
            overflow: hidden;
        }

        /* استایل کارت‌های مزایا */
        .benefit-card {
            background: #ffffff;
            border: none;
            border-radius: 16px;
            padding: 24px;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            z-index: 1;
        }

        .benefit-card::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            /* استفاده از start و end در CSS مدرن به جای left/right */
            inset-inline-start: 0;
            width: 4px;
            background-color: var(--primary-color);
            border-radius: 4px;
            transform: scaleY(0.3);
            transition: transform 0.4s ease;
        }

        .benefit-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
        }

        .benefit-card:hover::before {
            transform: scaleY(1);
        }

        /* انیمیشن آیکون‌ها هنگام هاور */
        .benefit-icon-wrapper {
            width: 60px;
            height: 60px;
            background-color: rgba(13, 110, 253, 0.1);
            color: var(--primary-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.8rem;
            transition: all 0.3s ease;
        }

        .benefit-card:hover .benefit-icon-wrapper {
            background-color: var(--primary-color);
            color: #ffffff;
            transform: rotateY(180deg);
        }

        /* بخش تصویر متحرک و خلاقانه */
        .interactive-image-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
        }

        /* قاب اصلی تصویر با انیمیشن شناور */
        .main-image-wrapper {
            position: relative;
            z-index: 2;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
            animation: floating 6s ease-in-out infinite;
        }

        .main-image-wrapper img {
            transition: transform 0.5s ease;
            display: block;
            max-width: 100%;
            height: auto;
        }

        .interactive-image-container:hover .main-image-wrapper img {
            transform: scale(1.05);
        }

        /* المان‌های تزئینی متحرک در پس‌زمینه تصویر */
        .decor-shape {
            position: absolute;
            z-index: 1;
            filter: blur(1px);
        }

        .shape-1 {
            width: 120px;
            height: 120px;
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            top: -10px;
            inset-inline-start: -10px;
            opacity: 0.2;
            animation: morphing 8s infinite alternate;
        }

        .shape-2 {
            width: 150px;
            height: 150px;
            border: 8px solid rgba(13, 202, 240, 0.2);
            border-radius: 50%;
            bottom: -20px;
            inset-inline-end: -20px;
            animation: floating 8s ease-in-out infinite reverse;
        }

        /* تعریف انیمیشن‌ها */
        @keyframes floating {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
            100% { transform: translateY(0px); }
        }

        @keyframes morphing {
            0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
            100% { border-radius: 50% 50% 35% 65% / 55% 45% 55% 45%; }
        }


    /* Time Line */
    .timeline-section {
      position: relative;
      overflow: hidden;
      margin-bottom:50px;
    }

    .section-title {
      font-weight: 800;
      font-size: 2rem;
      color: var(--primary-color-darker);
    }

    .section-subtitle {
      color: #6c757d;
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.9;
    }

    .timeline {
      position: relative;
      margin-top: 60px;
      padding: 20px 0;
    }

    /* خط وسط */
    .timeline::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      right: 50%;
      width: 4px;
      background: linear-gradient(to bottom, var(--primary-color-darker), var(--primary-color));
      transform: translateX(50%);
      border-radius: 50px;
    }

    .timeline-item {
      position: relative;
      margin-bottom: 50px;
    }

    .timeline-content {
      background: #fff;
      border-radius: 18px;
      padding: 25px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
      position: relative;
      transition: all 0.3s ease;
      border: 1px solid #eef1f4;
    }

    .timeline-content:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 35px rgba(13, 110, 253, 0.12);
    }

    .timeline-icon {
      width: 60px;
      height: 60px;
      background: var(--primary-color-darker);
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      position: absolute;
      top: 20px;
      right: 50%;
      transform: translateX(50%);
      z-index: 2;
      box-shadow: 0 8px 20px rgba(13, 110, 253, 0.25);
      border: 4px solid #f8f9fa;
    }

    .timeline-step {
      display: inline-block;
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--primary-color-darker);
      background: rgba(13, 110, 253, 0.1);
      padding: 6px 14px;
      border-radius: 50px;
      margin-bottom: 12px;
    }

    .timeline-content h5 {
      font-weight: 800;
      margin-bottom: 12px;
    }

    .timeline-content p {
      margin-bottom: 0;
      color: #6c757d;
      line-height: 1.9;
      font-size: 0.96rem;
    }

    /* فاصله از خط مرکزی */
    .timeline-item .col-lg-5 {
      position: relative;
    }

    /* فلش باکس‌ها */
    .timeline-content::before {
      content: "";
      position: absolute;
      top: 28px;
      width: 16px;
      height: 16px;
      background: #fff;
      transform: rotate(45deg);
      border: 1px solid #eef1f4;
      z-index: 0;
    }

    .timeline-item:nth-child(odd) .timeline-content::before {
      left: -8px;
      border-right: none;
      border-top: none;
    }

    .timeline-item:nth-child(even) .timeline-content::before {
      right: -8px;
      border-left: none;
      border-bottom: none;
    }

    .timeline-date {
      font-size: 0.9rem;
      color: #adb5bd;
      margin-bottom: 10px;
      display: block;
    }

    /* موبایل */
    @media (max-width: 991.98px) {
      .timeline::before {
        right: 30px;
        transform: none;
      }

      .timeline-icon {
        right: 30px;
        transform: translateX(50%);
        width: 52px;
        height: 52px;
        font-size: 1.1rem;
      }

      .timeline-item {
        padding-right: 80px;
      }

      .timeline-item .row {
        justify-content: flex-start !important;
      }

      .timeline-item .col-lg-5 {
        width: 100%;
      }

      .timeline-content::before {
        right: -8px !important;
        left: auto !important;
        border-left: none !important;
        border-bottom: none !important;
      }
    }


    /* Carusel Logos */
 #clientslogos {
      position: relative;
      padding: 3rem 0;
      /* گرادینت عمودی: بالا و پایین شفاف، وسط رنگی */
      background: linear-gradient(to bottom, transparent 100%, var(--primary-color-darker) 5%, var(--primary-color-darker) 0%, transparent 100%);
      user-select: none;
      -webkit-user-select: none;
      overflow: hidden;
    }

    .logo-container {
      position: relative;
      width: 100%;
      overflow: hidden;
    }

    /* کانتینر اصلی اسکرول */
    .logo-wrapper {
      display: flex;
      overflow-x: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
      /* حذف اسکرول‌بار پیش‌فرض */
      -ms-overflow-style: none;
      scrollbar-width: none;
      
      gap: 1.5rem;
      padding: 1.5rem 1rem;
      cursor: grab;
      touch-action: pan-y;
    }

    .logo-wrapper::-webkit-scrollbar {
      display: none;
    }

    .logo-wrapper.dragging {
      cursor: grabbing;
      scroll-behavior: auto; /* غیرفعال کردن موقت انیمیشن در زمان درگ برای حرکت روانتر */
    }

    .logo-item {
      /* روی دسکتاپ ۵ تا در هر ردیف قرار می‌گیرند */
      flex: 0 0 calc(20% - 1.2rem); 
      min-width: 160px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
    }

    .logo-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100px;
      background: #ffffff;
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 0.75rem;
      padding: 1rem;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
      text-decoration: none;
    }

    .logo-static {
      cursor: default;
    }

    .logo-link:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 16px rgba(0,0,0,0.08);
    }

    .logo-link img {
      max-height: 55px;
      max-width: 100%;
      object-fit: contain;
      pointer-events: none;
    }

    /* ریسپانسیو گوشی و تبلت */
    @media (max-width: 991.98px) {
      .logo-item {
        flex: 0 0 calc(33.333% - 1rem); /* ۳ تا در تبلت */
      }
    }
    @media (max-width: 575.98px) {
      .logo-item {
        flex: 0 0 calc(50% - 0.75rem); /* ۲ تا در موبایل */
      }
    }


    /* Pro text and image blocks 6-7-8 */

            /* لیست با آیکون سفارشی و منطقی */
        .custom-list {
            list-style: none;
            padding-inline-start: 0;
        }

        .custom-list li {
            position: relative;
            padding-inline-start: 2.5rem;
            margin-bottom: 1.25rem;
            display: flex;
            align-items: center;
        }

        .custom-list li::before {
            content: "";
            position: absolute;
            inset-inline-start: 0;
            width: 22px;
            height: 22px;
            background-image: url('/images/favicon-32.png');
            background-size: contain;
            background-repeat: no-repeat;
        }

        /* ظرف تصویر */
        .shine-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 1.5rem;
            background-color: #1a1a1a; /* پس‌زمینه تیره برای تضاد با نور */
            aspect-ratio: 16 / 9;
            cursor: pointer;
        }

        .shine-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            /* انیمیشن زوم هم در رفت و هم در برگشت */
            transition: transform 0.6s ease-in-out;
        }

        /* لایه افکت شاین */
        .shine-wrapper::after {
            content: "";
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.4) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: skewX(-25deg);
            
            /* موقعیت اولیه در خارج از کادر (سمت شروع) */
            inset-inline-start: -100%;
            
            /* کلید حل مشکل: ترنزیشن اینجا باشد تا برگشت هم انیمیت شود */
            transition: inset-inline-start 0.7s ease-in-out;
        }

        /* حالت هاور برای حرکت به سمت پایان */
        .shine-wrapper:hover::after {
            /* جابجایی به سمت مخالف */
            inset-inline-start: 150%;
        }

        .shine-wrapper:hover img {
            transform: scale(1.1);
        }

        /* استایل‌های تکمیلی */
        .content-section {
            font-size:100%;
            padding: 40px 0px 0px 0px;
            text-align:justify;
            line-height:180%;
        }



    /* Full image shine */
    .shine-hover{
      position:relative;
      display:inline-block;
      overflow:hidden;
      line-height:0; /* جلوگیری از فاصله اضافی زیر img */
      border-radius:14px; /* اختیاری */
    }

    .shine-hover img{
      display:block;
      max-width:100%;
      height:auto;
      border-radius:15px;
    }

    /* نوار نور */
    .shine-hover::before{
      content:"";
      position:absolute;
      top:0;
      left:-80%;
      width:40%;
      height:100%;
      background:linear-gradient(
        120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.15) 35%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0.15) 65%,
        rgba(255,255,255,0) 100%
      );
      transform:skewX(-25deg);
      transition:left .7s ease;
      pointer-events:none;
    }

    .shine-hover:hover::before{
      left:140%;
    }


    /* FAQ */
    .faq-section {margin-bottom:40px;}
.faq-title {
      text-align: center;
      margin-bottom: 10px;
      font-weight: 700;
      color: #212529;
    }

    .faq-desc {
      text-align: center;
      color: #6c757d;
      margin-bottom: 30px;
    }

    .accordion-item {
      border: 1px solid #e9ecef;
      border-radius: 12px !important;
      overflow: hidden;
      margin-bottom: 14px;
    }

    .accordion-button {
      background-color: #fff;
      color: #212529;
      font-weight: 700;
      text-align: start;
      box-shadow: none !important;
      padding-block: 18px;
      padding-inline-start: 20px;
      padding-inline-end: 20px;
    }

    .accordion-button:not(.collapsed) {
      background-color: #f1f3f5;
      color: #0d6efd;
    }

    .accordion-button:focus {
      box-shadow: none;
      border-color: transparent;
    }

    .accordion-body {
      text-align: start;
      line-height: 1.9;
      color: #495057;
      padding-inline-start: 20px;
      padding-inline-end: 20px;
      padding-block: 18px;
      background-color: #fff;
    }



/* Related Section */
.related-section {
      margin-top: 60px;
      margin-bottom: 60px;
    }

    .section-title {
      font-weight: 700;
      margin-bottom: 10px;
    }

    .section-desc {
      color: #6c757d;
      margin-bottom: 30px;
    }

    .related-card {
      border: 0;
      border-radius: 18px;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 8px 24px rgba(0,0,0,0.08);
      transition: all 0.3s ease;
      height: 100%;
    }

    .related-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 14px 34px rgba(0,0,0,0.14);
    }

    .related-card img {
      width: 100%;
      height: 220px;
      object-fit: cover;
      display: block;
    }

    .related-card .card-body {
      padding: 20px;
    }

    .related-card .card-title {
      font-size: 1.15rem;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .related-card .card-text {
      color: #6c757d;
      line-height: 1.8;
      font-size: 0.95rem;
      margin-bottom: 18px;
    }

    .related-link {
      text-decoration: none;
      font-weight: 600;
      color: #0d6efd;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: 0.2s;
    }

    .related-link:hover {
      color: #0a58ca;
    }

    .related-link svg {
      transition: transform 0.2s ease;
    }

    .related-card:hover .related-link svg {
      transform: translateX(-4px);
    }

    .badge-custom {
      position: absolute;
      top: 14px;
      inset-inline-start: 14px;
      background-color: rgba(13, 110, 253, 0.92);
      color: #fff;
      padding: 8px 14px;
      border-radius: 999px;
      font-size: 0.8rem;
      font-weight: 600;
      z-index: 2;
    }

    .image-wrap {
      position: relative;
    }





    .slider-section {
      padding: 60px 0;
    }

    .logoSlider {
      width: 100%;
      overflow: hidden;
      position: relative;
      user-select: none;
      -webkit-user-select: none;
      touch-action: pan-y;
      direction: ltr;
      cursor: grab;
    }

    .logoSlider.is-dragging {
      cursor: grabbing;
    }

    .logoSlider-track {
      display: flex;
      transition: transform 0.4s ease;
      will-change: transform;
    }

    .logoSlider-item {
      flex: 0 0 25%;
      padding: 10px;
      box-sizing: border-box;
    }

    .logo-box {
      background: #fff;
      border-radius: 12px;
      padding: 30px 20px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      color: #495057;
    }

    .logo-box img {
      max-width: 100%;
      max-height: 60px;
      width: auto;
      height: auto;
      display: block;
      pointer-events: none;
      -webkit-user-drag: none;
      user-drag: none;
    }

    @media (max-width: 1199px) {
      .logoSlider-item {
        flex: 0 0 25%;
      }
    }

    @media (max-width: 991px) {
      .logoSlider-item {
        flex: 0 0 33.3333%;
      }
    }

    @media (max-width: 767px) {
      .logoSlider-item {
        flex: 0 0 50%;
      }
    }



    .mega-link img {width:30px;}




  #products {
      padding: 80px 0;
    background: linear-gradient(
        to bottom,
        #fff 0,
        #f1f1f1 60px,
        #f1f1f1 calc(100% - 60px),
        #fff 100%
    );
    }

  #products h1, #products h2, #products h3, #products h4, #products h5 {
      color: var(--primary-color-darker);
  }
    .section-title {
      text-align: center;
      margin-bottom: 48px;
    }

    .section-title h2 {
      margin-bottom: 10px;
      font-size: 2rem;
      font-weight: 700;
    }

    .product-card {
      height: 100%;
      border: 0;
      border-radius: 24px;
      background: #fff;
      overflow: hidden;
      box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);
      transition: transform 0.35s ease, background 0.35s ease, box-shadow 0.35s ease;
      text-align:center;
    }

    .product-card:hover {
      transform: translateY(-8px);
      background: linear-gradient(135deg, #fef8eb, #fef8eb);
      box-shadow: 0 18px 45px rgba(180, 140, 50, 0.10);
    }

    .product-media img {width:80%;height:auto;max-width:100px;}

    .product-media {
      justify-content: center;
      align-items: center;
      padding: 28px 0px 10px;
      perspective: 900px;
      width:100%;
      text-align:center;
    }

    .product-image-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      padding:20px;
    }

    .product-image {
      width: 100%;
      height: 100%;
      display: block;
      transition: transform 0.8s ease;
      transform-style: preserve-3d;
      filter: drop-shadow(0 10px 24px rgba(180, 140, 50, 0.1));
    }

    .product-card:hover .product-image {
      transform: rotateY(180deg);
    }

    .product-card .card-body {
      padding: 18px 24px 30px;
      text-align: center;
    }

    .product-title {
      margin-bottom: 12px;
      font-size: 1.25rem;
      font-weight: 700;
    }

    .product-title a {
      color: var(--primary-color);
      text-decoration: none;
      transition: color 0.3s ease;
    }

    .product-card:hover .product-title a {
      color: var(--primary-color-darker);
    }

    .product-desc {
      margin-bottom: 20px;
      color: #6c757d;
      line-height: 1.9;
      font-size: 0.95rem;
    }

    .btn-product {
      border-radius: 999px;
      padding: 10px 22px;
    }



 .food-section {
      padding-block: 80px;
    }

    .food-card {
      position: relative;
      padding-block-start: 88px;
      height: 100%;
    }

    .food-card__img-wrap {
      position: absolute;
      inset-block-start: 0;
      inset-inline: 0;
      display: flex;
      justify-content: center;
      z-index: 3;
      pointer-events: none;
    }

    .food-card__img {
      inline-size: 160px;
      block-size: 160px;
      object-fit: cover;
      border-radius: 50%;
      border: 8px solid #fff;
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
      display: block;
      background:#fff;
      padding:5%;
      overflow:hidden;
    }

     .food-card__img img {
         padding:0.6%;
         max-width:100%;
     }

    .food-card__body {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      height: 100%;
      padding: 90px 24px 30px;
      text-align: center;
      background: #fff;
      box-shadow: 0 14px 36px rgba(0, 0, 0, 0.08);
      border-top-right-radius: 80px;
      border-top-left-radius: 20px;
      border-bottom-right-radius: 80px;
      border-bottom-left-radius: 20px;
    }

    .food-card__body::before {
      content: "";
      position: absolute;
      inset: 0;
      background: #c89543;
      border-radius: inherit;
      transform: scaleY(0);
      transform-origin: bottom center;
      transition: transform 0.4s ease;
      z-index: 0;
    }

    .food-card:hover .food-card__body::before {
      transform: scaleY(1);
    }

    .food-card__title,
    .food-card__text,
    .food-card__btn {
      position: relative;
      z-index: 1;
      transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    }

    .food-card__title {
      color: #1c2430;
      font-size: 20px;
      font-weight: 700;
    }

.food-card:hover .food-card__title,
.food-card:hover .food-card__text {
  color: #ffffff !important; /* اضافه کردن important برای اطمینان از غلبه بر استایل‌های دیگر */
}


    .food-card__text {
      color: #7f7f7f;
      font-size: 15px;
      line-height: 1.9;
      margin-bottom: 28px;
    }

    .food-card__btn {
      min-inline-size: 190px;
      min-block-size: 54px;
      border: 1px solid #d7aa63;
      border-radius: 999px;
      background: transparent;
      color: #c89543;
      font-weight: 600;
    }

    .food-card:hover .food-card__title,
    .food-card:hover .food-card__text {
      color: #fff;
    }

    .food-card:hover .food-card__btn {
      background: #fff;
      border-color: #fff;
      color: #c89543;
    }

    @media (max-width: 767.98px) {
      .food-card {
        padding-block-start: 76px;
      }

      .food-card__img {
        inline-size: 150px;
        block-size: 150px;
      }

      .food-card__body {
        min-height: auto;
        padding: 100px 20px 28px;
      }
    }