#section-homepage-hero {
  height: 1000px;
  background-image: url("./assets/images/home-backgroud.png");
}

@media only screen and (max-width: 1200px) {
  #section-homepage-hero {
    height: fit-content;
  }
}

@media only screen and (max-width: 768px) {
  #section-homepage-hero {
    height: fit-content;
    background-image: url("./assets/images/home-backgroud-responsive.png");
    background-size: cover;
    background-position: 58% calc(-90px + 0px);
  }
}

@media only screen and (max-width: 350px) {
  .flex-col-responsive {
    flex-direction: column;
  }
}

.card {
  transition:
    width 320ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 320ms ease,
    background-image 240ms ease,
    background-size 320ms ease;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* حالت پیش‌فرض: پوشش کامل کارت */
  overflow: hidden;
}
/* حالت بصری کارت غیر فعال (کوتاه) */
.card.inactive {
  /* اگر می‌خواهی سایز اولیه کارت ثابت باشد، اینجا مشخص کن */
  width: 120px;
}
/* حالت کارت فعال (ترجیحا از JS تنظیم میشه) */
.card.active {
  /* width از JS هم ست میشه ولی کلاس برای fallback */
  width: 420px;
}

/* @media only screen and (min-width: 720px) {
  .about-us-mobile {
    display: none;
  }
  .about-us-descktop {
    display: block;
  }
}

@media only screen and (max-width: 720px) {
  .about-us-mobile {
    display: block;
  }
  .about-us-descktop {
    display: none;
  }
} */

/* introduction section */
.main-page-about-us-title-dashed-style {
  width: 32px;
  height: 3px;
}
.main-page-about-us-title {
  color: #414448;
  font-size: 24px;
  font-weight: 700;
}
.main-page-introduction-text-title {
  color: #414448;
  font-size: 16px;
  font-weight: 700;
}
.main-page-introduction-text {
  /* color: #717376; */
  color: #212121;
  font-size: 14px;
  font-weight: 400;
}
/* services */
.main-page-services-card-container {
  background-color: white;
}

.main-page-service-image-container {
  width: 64px; /* یا هر اندازه دلخواه */
  height: 64px;
  /* flex-shrink: 0; */
}
.main-page-service-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* باعث کراپ ملایم و حفظ تناسب میشه */
}
.main-page-service-title {
  font-size: 16px;
  font-weight: 700;
  color: #414448;
}
.main-page-service-text {
  font-size: 14px;
  color: #414448;
  line-height: 32px;
}
.main-page-service-button {
  font-size: 14px;
  background-color: #60dfe2;
  color: #414448;
}
.main-page-service-background-color {
  background-color: #d7ecf0;
  height: 200px;
  width: 90%;
  border-radius: 48px;
}
/* why canoe */

.main-page-service-constultant-container {
  width: 579px; /* یا هر اندازه دلخواه */
  height: 362px;
  /* flex-shrink: 0; */
}
.main-page-service-constultant-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* باعث کراپ ملایم و حفظ تناسب میشه */
}
.main-page-constultant-container {
  background-color: #005f70;
}
.main-page-constultant-title {
  font-size: 36px;
  font-weight: 600;
  color: white;
}
.main-page-constultant-text {
  font-size: 18px;
  font-weight: 600;
  color: white;
}
.main-page-constultant-button {
  font-size: 16px;
  font-weight: 700;
  background-color: #60dfe2;
  color: white;
}
/* !========================== */
/* !customers comments */
/* !========================== */
.main-page-customers-container {
  border: 1px solid #e8e8e9;
  border-radius: 16px;
  /* slider style for card */
  width: 345px;
  margin: 40px 15px 0px 15px;
  color: white;
  flex-shrink: 0;
}
.main-page-customer-comment-image-container {
  width: 72px;
  height: 72px;
}
.main-page-customer-comment-image-container img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.main-page-customers-company-name {
  color: #414448;
  font-weight: 700;
}
.main-page-customers-name {
  color: #9fa1a3;
  font-weight: 500;
}
.main-page-customers-text {
  color: #414448;
  line-height: 32px;
  font-weight: 500;
}
/* ! customer slider component*/
.slider-container {
  /* direction: rtl; */
  position: relative;
  width: 100%;
  overflow: hidden;
  margin: 0px auto;
}

.slider-wrapper {
  display: flex;
  flex-direction: row-reverse;
  margin: 0px 20px 0px 10px;
  transition: transform 0.5s ease-in-out;
}
.slider-dots {
  transition:
    background-color 0.5s ease,
    transform 0.5s ease;
}
.deactive-dots {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d9d9d9;
}
.active-dotted {
  width: 37px;
  height: 10px;
  border-radius: 40px;
  background-color: #005f70;
}

.logo-tab {
  width: 132px;
}

/* responsive design */
@media only screen and (max-width: 720px) {
  /* .section-customers {
    margin-top: 1200px;
  } */

  .logo-tab {
    width: 66px;
  }
}

@media only screen and (max-width: 768px) {
  /* .section-customers {
    margin-top: 1500px;
  } */
  .main-page-about-us-title {
    font-size: 14px;
    font-weight: 700;
  }
  .main-page-introduction-text-title {
    font-size: 12px;
    font-weight: 700;
  }
  .main-page-introduction-text {
    color: #616161;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
  }
  .main-page-about-us-title-dashed-style {
    width: 14px;
    height: 2px;
  }
  /* services */
  .main-page-services-card-container {
    --r: 20px; /* control the rounded part*/
    --s: 50px; /* control the size of the cut */
    --a: 20deg; /* control the depth of the curvature*/
    background: linear-gradient(45deg, #d7ecf0, #d7ecf0);
    --_m: 0 / calc(2 * var(--r)) calc(2 * var(--r)) no-repeat
      radial-gradient(50% 50%, #000 calc(100% - 1px), #0000);
    --_d: (var(--s) + var(--r)) * cos(var(--a));
    mask:
      calc(50% + var(--_d)) var(--_m),
      calc(50% - var(--_d)) var(--_m),
      radial-gradient(
          var(--s) at 50% calc(-1 * sin(var(--a)) * var(--s)),
          #0000 100%,
          #000 calc(100% + 1px)
        )
        0 calc(var(--r) * (1 - sin(var(--a)))) no-repeat,
      linear-gradient(
        90deg,
        #000 calc(50% - var(--_d)),
        #0000 0 calc(50% + var(--_d)),
        #000 0
      );
    /* background-color: #d7ecf0; */
  }
  .main-page-service-title {
    font-size: 14px;
    font-weight: 600;
  }
  .main-page-service-text {
    font-size: 12px;
    line-height: 24px;
  }
  .main-page-service-button {
    font-size: 12px;
  }
  .main-page-service-image-container {
    left: 38%;
    top: -50px;
    width: 90px; /* یا هر اندازه دلخواه */
    height: 90px;
    /* flex-shrink: 0; */
  }
  .main-page-service-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* باعث کراپ ملایم و حفظ تناسب میشه */
  }
  /* consultant */
  .main-page-constultant-title {
    font-size: 14px;
    font-weight: 700;
  }
  .main-page-constultant-text {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
  }
  .main-page-constultant-button {
    font-size: 12px;
    font-weight: 600;
  }
  .main-page-service-constultant-container {
    width: 220px;
    height: 118px;
  }
}

/* full responsive-about inoco homepage */

/* کمترین عرض قابل نمایش */
/* .height-section-about-us-desktop-homepage {
  height: 950px;
} */
.padding-top-projects-responsive {
  padding-top: 56px;
}

.padding-left-responsive {
  padding-left: 50px;
}

/* .height-section-about-us-mobile-homepage {
  height: 1250px;
} */

@media (min-width: 320px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1250px;
  } */
}
@media (min-width: 333px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1200px;
  } */
}
@media (min-width: 361px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1150px;
  } */
}
@media (min-width: 370px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1100px;
  } */
}

/* موبایل متوسط */
@media (min-width: 375px) {
}

@media (min-width: 393px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1050px;
  } */
}

@media (min-width: 401px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1000px;
  } */
}
@media (min-width: 417px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1000px;
  } */
}

@media (min-width: 425px) {
  /* .height-section-about-us-mobile-homepage {
    height: 1000px;
  } */
}

@media (min-width: 429px) {
  /* .height-section-about-us-mobile-homepage {
    height: 970px;
  } */
}
@media (min-width: 443px) {
  /* .height-section-about-us-mobile-homepage {
    height: 950px;
  } */
}

@media (min-width: 480px) {
  /* .height-section-about-us-mobile-homepage {
    height: 900px;
  } */
}

@media (min-width: 528px) {
  /* .height-section-about-us-mobile-homepage {
    height: 870px;
  } */
}

@media (min-width: 536px) {
  /* .height-section-about-us-mobile-homepage {
    height: 870px;
  } */
}
@media (min-width: 542px) {
  /* .height-section-about-us-mobile-homepage {
    height: 830px;
  } */
}
@media (min-width: 590px) {
  /* .height-section-about-us-mobile {
    height: 800px;
  } */
}
@media (min-width: 620px) {
  /* .height-section-about-us-mobile-homepage {
    height: 800px;
  } */
}
@media (min-width: 625px) {
  /* .height-section-about-us-mobile-homepage {
    height: 750px;
  } */
}

@media (min-width: 720px) {
  /* .height-section-about-us-mobile-homepage {
    height: 720px;
  } */
}
@media (min-width: 730px) {
  /* .height-section-about-us-mobile-homepage {
    height: 680px;
  } */
}
@media (min-width: 734px) {
  /* .height-section-about-us-mobile-homepage {
    height: 630px;
  } */
}

/* تبلت */
@media (min-width: 767px) {
  /* .height-section-about-us-desktop-homepage {
    height: 950px;
  } */
  .padding-top-projects-responsive {
    padding-top: 20px;
  }

  .padding-left-responsive {
    padding-left: 50px;
  }

  .padding-top-responsive {
    padding-top: 110px;
  }
}

@media (min-width: 790px) {
  /* .height-section-about-us-desktop-homepage {
    height: 950px;
  } */
  .padding-top-projects-responsive {
    padding-top: 45px;
  }
}

@media (min-width: 826px) {
  /* .height-section-about-us-desktop-homepage {
    height: 900px;
  } */

  .padding-top-projects-responsive {
    padding-top: 45px;
  }
}

@media (min-width: 875px) {
  /* .height-section-about-us-desktop-homepage {
    height: 900px;
  } */
  .padding-top-projects-responsive {
    padding-top: 35px;
  }
}

@media (min-width: 938px) {
  /* .height-section-about-us-desktop-homepage {
    height: 900px;
  } */
  .padding-top-projects-responsive {
    padding-top: 60px;
  }
}

/* @media (min-width: 950px) {
  .height-section-about-us-desktop-homepage {
    height: 840px;
  }
} */
@media (min-width: 974px) {
  /* .height-section-about-us-desktop-homepage {
    height: 800px;
  } */

  .padding-top-responsive {
    padding-top: 100px;
  }
}

@media (min-width: 996px) {
  .padding-top-projects-responsive {
    padding-top: 90px;
  }
}

/* دسکتاپ */
@media (min-width: 1024px) {
}

/* دسکتاپ */
@media (min-width: 1088px) {
  /* .height-section-about-us-desktop-homepage {
    height: 800px;
  } */

  .padding-top-responsive {
    padding-top: 80px;
  }

  .padding-top-projects-responsive {
    padding-top: 30px;
  }
}

@media (min-width: 1111px) {
  .padding-top-projects-responsive {
    padding-top: 60px;
  }
}

@media (min-width: 1180px) {
  .padding-left-responsive {
    padding-left: 65px;
  }
}
@media (min-width: 1262px) {
  /* .height-section-about-us-desktop-homepage {
    height: 715px;
  } */

  .padding-top-responsive {
    padding-top: 70px;
  }

  .padding-top-projects-responsive {
    padding-top: 20px;
  }
}
@media (min-width: 1262px) {
  .padding-top-projects-responsive {
    padding-top: 20px;
  }
}

@media (min-width: 1340px) {
  .padding-left-responsive {
    padding-left: 80px;
  }

  .padding-top-responsive {
    padding-top: 56px;
  }
}

@media (min-width: 1420px) {
  /* .height-section-about-us-desktop-homepage {
    height: 700px;
  } */
  .padding-top-projects-responsive {
    padding-top: 50px;
  }
}

@media (min-width: 1550px) {
  /* .height-section-about-us-desktop-homepage {
    height: 700px;
  } */

  .padding-top-projects-responsive {
    padding-top: 60px;
  }
}
@media (min-width: 1806px) {
  /* .height-section-about-us-desktop-homepage {
    height: 700px;
  } */

  .padding-top-projects-responsive {
    padding-top: 90px;
  }
}
@media (min-width: 2326px) {
  /* .height-section-about-us-desktop-homepage {
    height: 700px;
  } */

  .padding-top-projects-responsive {
    padding-top: 100px;
  }
}

/* کلاس مورد نظر — فقط height را تنظیم می‌کند */
.equal-height {
  padding: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
  /* فقط height — اگر مقدار متغیر تنظیم نشده باشد، auto خواهد بود */
  height: var(--equal-article-height, auto);
  box-sizing: border-box; /* شامل padding در محاسبهٔ height */
  overflow: hidden; /* اگر خواستی محتوای اضافی را پنهان کند */
}