@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@100..900&display=swap");

:root {
  --primary: #ff2800 !important;
  --gradient: linear-gradient(45deg, #ff2800 0%, rgb(168, 16, 16) 100%) !important;

  --facebook: #1877f2 !important;
  --instagram: #e4405f !important;
  --whatsapp: #25d366 !important;
  --telegram: #229ed9 !important;
  --phone: #444c57 !important;
  --edges: 64px;
}


.main-container {
  min-height: 100vh !important;
  padding: 32px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(32px, 6vw, 64px) !important;
  overflow-x: hidden !important;
}

h2 {
  font-weight: 700 !important;
  color: #444c57 !important;
  font-size: clamp(22px, 3vw, 28px) !important;
}

.header-info {
  width: calc(min(100%, 1200px) - var(--edges)) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: clamp(16px, 4vw, 32px) !important;
  padding: clamp(16px, 4vw, 32px) !important;
  background: var(--gradient) !important;
  border-radius: 24px !important;
}

.header-text {
  flex: 1 1 0 !important;
  color: white !important;
  padding: clamp(8px, 3vw, 32px) !important;
  font-size: clamp(20px, 3vw, 28px) !important;
}

.thumbnail {
  width: min(100%, 400px) !important;
  height: auto !important;
  border-radius: 16px !important;
  object-fit: cover !important;
}

.hours {
  position: relative !important;
  width: min(700px, calc(100% - var(--edges))) !important;
  margin-top: 80px !important;
  padding-top: 48px !important;
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  background: #f9f9fb !important;
  border-top: 4px solid var(--primary) !important;
  border-radius: 24px !important;
}

.hours > div {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px !important;
}

.hours > div > svg {
  width: 100px !important;
  position: absolute !important;
  left: 50% !important;
  top: -80px !important;
  transform: translateX(-50%) !important;
}

.hours-header > span {
  color: var(--primary) !important;
}

.contact-wrapper {
  width: 100% !important;
  padding: 16px !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(16px, 4vw, 64px) !important;

  background: #ffffff !important;
  border-radius: 20px !important;
}

.contact {
  width: min(100%, 1000px) !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
}

.contact-point > span {
  color: #d8dde5 !important;
}

.contact-point {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: clamp(16px, 2vw, 20px) !important;
  font-weight: 500 !important;
  color: #000000 !important;
}

.contact-point > p {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
}

/*.phone-number {*/
/*  white-space: nowrap !important;*/
/*  text-decoration: none !important;*/
/*  color: #000000 !important;*/
/*}*/

.email, .phone-number {
  font-weight: 500 !important;
  color: #000000 !important;
  text-decoration: none !important;
  font-size: clamp(16px, 2vw, 20px) !important;
}

.separator {
  padding-inline: 4px !important;
  color: #868d96 !important;
  font-size: clamp(16px, 2vw, 20px) !important;

}

.info {
  width: 100% !important;
  padding: clamp(32px, 6vw, 64px) 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 32px) !important;
  background: #f9f9fb !important;
}

.branches {
  width: min(100%, 1100px) !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(32px, 6vw, 64px) !important;
}

.branch-list {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.city-name {
  font-size: clamp(14px, 2vw, 20px) !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
}

.branch > ul > li {
  color: inherit !important;
  font-weight: 400 !important;
  font-size: clamp(16px, 2vw, 18px) !important;
  list-style: disc !important;
}

li::marker {
  font-size: 12px !important;
}

.branch {
  position: relative !important;
  z-index: 0 !important;
  padding-block: 4px !important;
}

.branch::before {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;

  background: #e5e8ed !important;
  border-radius: 8px !important;

  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
  z-index: -1 !important;
}

.branch.active::before {
  opacity: 1 !important;
}

.map {
  flex: 1 1 0 !important;
  width: 100% !important;
  max-width: 500px !important;
  height: auto !important;
}

.map path[data-city] {
  transition: fill 0.2s ease !important;
}

.map path[data-city]:hover {
  fill: #ff6b65 !important;
}

.socials {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100% !important;
}

.socials-list {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  width: 100% !important;
}

.socials-list > a > p {
  display: none !important;
}

.social {
  background: #f9f9fb !important;
  border: 1px solid #e5e8ed !important;
  border-radius: 12px !important;
  padding: 0 !important;
  width: 64px !important;
  height: 64px !important;
  cursor: pointer !important;
  color: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 100ms !important;
}

.social:hover {
  background: #ebebee !important;
}

@media (max-width: 700px) {
  .header-info {
    flex-direction: column !important;
    text-align: center !important;
  }

  .header-text {
    width: 100% !important;
  }

  .thumbnail {
    width: 100% !important;
    max-width: 400px !important;
  }

  .map {
    display: none !important;
  }

  .socials-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    place-items: center !important;
    gap: 16px !important;
    width: calc(min(100%, 1200px) - 32px) !important;
  }

  .socials-list > a {
    gap: 12px !important;
    text-decoration: none !important;
    font-size: 18px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    font-weight: 500 !important;
    border-radius: 9999px !important;
  }

  .socials-list > a > p {
    display: block !important;
  }
}