/* =========================================================
   contact.css — تواصل معنا: كروت كل كارت لينك كامل (اتصال / واتساب / موقع)
   ========================================================= */

:root {
  --ebmnt1-contact-inner-bg-color: #004250;
  --ebmnt1-contact-image-url: url("https://htmldemo.zcubethemes.com/powerhaus/img/bg/contact-bg.png");
  --ebmnt1-contact-overlay-solid-color: rgba(0, 66, 80, 0.94);
  --ebmnt1-contact-overlay-soft-color: rgba(0, 66, 80, 0);
  --ebmnt1-contact-content-gap: 1.6em;

  --ebmnt1-contact-intro-font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  --ebmnt1-contact-intro-text-color: rgba(255, 255, 255, 0.85);

  --ebmnt1-contact-card-bg-color: rgba(1, 44, 61, 0.55);
  --ebmnt1-contact-card-border-color: #ffc107;
  --ebmnt1-contact-card-radius: 2rem;
  --ebmnt1-contact-card-icon-bg-color: #ffc107;
  --ebmnt1-contact-card-icon-color: #012c3d;
  --ebmnt1-contact-card-icon-font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --ebmnt1-contact-card-title-font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  --ebmnt1-contact-card-title-text-color: #ffffff;
  --ebmnt1-contact-card-detail-font-size: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
  --ebmnt1-contact-card-detail-text-color: rgba(255, 255, 255, 0.85);
  --ebmnt1-contact-card-arrow-color: #ffc107;
  --ebmnt1-contact-card-hover-bg-color: #ffc107;
  --ebmnt1-contact-card-hover-title-text-color: #012c3d;
  --ebmnt1-contact-card-hover-detail-text-color: #004250;
  --ebmnt1-contact-card-hover-icon-bg-color: #012c3d;
  --ebmnt1-contact-card-hover-icon-color: #ffc107;
  --ebmnt1-contact-card-hover-arrow-color: #012c3d;
}

.ebmnt1-contact__inner {
  background-color: var(--ebmnt1-contact-inner-bg-color);
  background-image: linear-gradient(var(--ebmnt1-contact-overlay-solid-color), var(--ebmnt1-contact-overlay-solid-color)), var(--ebmnt1-contact-image-url);
  background-size: cover;
  background-position: left center;
}

.ebmnt1-contact__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ebmnt1-contact-content-gap);
  text-align: center;
}

.ebmnt1-contact__intro {
  max-width: 34rem;
  font-size: var(--ebmnt1-contact-intro-font-size);
  color: var(--ebmnt1-contact-intro-text-color);
}

.ebmnt1-contact__cards {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.ebmnt1-contact-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1em;
  padding: 0.9em 1.1em;
  text-align: start;
  background-color: var(--ebmnt1-contact-card-bg-color);
  border: 1px solid var(--ebmnt1-contact-card-border-color);
  border-radius: var(--ebmnt1-contact-card-radius);
  transition: background-color 0.35s ease, transform 0.35s ease;
}

.ebmnt1-contact-card__icon {
  flex-shrink: 0;
  width: 3.4rem;
  height: 3.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--ebmnt1-contact-card-icon-font-size);
  color: var(--ebmnt1-contact-card-icon-color);
  background-color: var(--ebmnt1-contact-card-icon-bg-color);
  border-radius: 50%;
  transition: background-color 0.35s ease, color 0.35s ease;
}

.ebmnt1-contact-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.5;
}

.ebmnt1-contact-card__title {
  font-size: var(--ebmnt1-contact-card-title-font-size);
  font-weight: 800;
  color: var(--ebmnt1-contact-card-title-text-color);
  transition: color 0.35s ease;
}

.ebmnt1-contact-card__detail {
  font-size: var(--ebmnt1-contact-card-detail-font-size);
  color: var(--ebmnt1-contact-card-detail-text-color);
  transition: color 0.35s ease;
}

.ebmnt1-contact-card__detail--ltr {
  direction: ltr;
  text-align: start;
}

.ebmnt1-contact-card__arrow {
  color: var(--ebmnt1-contact-card-arrow-color);
  transition: color 0.35s ease, transform 0.35s ease;
}

.ebmnt1-contact-card:hover {
  background-color: var(--ebmnt1-contact-card-hover-bg-color);
  transform: translateY(-0.3em);
}

.ebmnt1-contact-card:hover .ebmnt1-contact-card__icon {
  color: var(--ebmnt1-contact-card-hover-icon-color);
  background-color: var(--ebmnt1-contact-card-hover-icon-bg-color);
}

.ebmnt1-contact-card:hover .ebmnt1-contact-card__title {
  color: var(--ebmnt1-contact-card-hover-title-text-color);
}

.ebmnt1-contact-card:hover .ebmnt1-contact-card__detail {
  color: var(--ebmnt1-contact-card-hover-detail-text-color);
}

.ebmnt1-contact-card:hover .ebmnt1-contact-card__arrow {
  color: var(--ebmnt1-contact-card-hover-arrow-color);
  transform: translateX(-0.4em);
}

/* لابتوب: المحتوى في جهة البداية (يمين) والصورة تظهر على اليسار */
@media (min-width: 992px) {
  .ebmnt1-contact__inner {
    background-image: linear-gradient(to left, var(--ebmnt1-contact-overlay-solid-color) 48%, var(--ebmnt1-contact-overlay-soft-color) 85%), var(--ebmnt1-contact-image-url);
  }

  .ebmnt1-contact__content {
    width: 48%;
    align-self: flex-start;
    align-items: flex-start;
    text-align: start;
  }
}