/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}

/* Ensure all images are responsive */
img {
  width: 100%;
  height: auto;
}

/* Wrapper */
.wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Hero Section */
.hero-section {
  /* position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  transform: translateZ(0);
  position: sticky; */
  width: 100%;
  top: 0;
  z-index: 999;
  position: fixed;
}

.hero-section img {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  transform: translate(-50%, -50%);
  color: #ffc031;
  font-size: 5vw;
  font-weight: bold;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}

.back-icon {
  position: absolute;
  top: 8vw;
  left: 1vw;
  font-size: 7vw;
  color: #fff;
}

/* Offers Section */
.offers {
  margin: 0 6px;
  margin-top: 26%;
}

/* Restaurant Highlight */
.restaurant-highlight {
  position: relative;
  display: inline-block;
}

.restaurant-info {
  position: absolute;
  top: 4%;
  left: 3%;
  z-index: 10;
}

.dining-image {
  width: 97%;
}

/* Logo Container */
.logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 0 12px;
  /* Top, Right, Bottom, Left */
  width: 30%;
  /* Adjust width as needed */
  height: 8vh;
  /* Fixed height for better alignment */
  border-radius: 8px;
}

.restaurant-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Ensures the image scales properly */
}

.restaurant-info p {
  font-size: 3.2vw;
  margin: 0 12px;
}

/* Responsive  */
@media (max-width: 260px) {
  .restaurant-info p {
    font-size: 3vw;
  }

  .logo-container {
    height: 6vh;
  }
}

/* Centered Content */
.centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.placeholder-image {
  width: 80%;
  margin: 20px 0;
}

/* ============================= */
/* RTL SUPPORT */
/* ============================= */

html[dir="rtl"] * {
  direction: rtl;
  text-align: right;
}

/* .hero-text::before {
  content: "Prestige";
}

html[dir="rtl"] .hero-text::before {
  content: "برستيج";
} */

/* Adjust hero-text position */
html[dir="rtl"] .hero-text {
  left: auto;
  right: 50%;
  transform: translate(50%, -50%);
}

/* Move back icon to the right */
html[dir="rtl"] .back-icon {
  left: auto;
  right: 1vw;
}

/* Move restaurant info to the right */
html[dir="rtl"] .restaurant-info {
  left: auto;
  right: 3%;
}

/* Adjust logo container margin */
html[dir="rtl"] .logo-container {
  margin: 0 12px 0 0;
}

/* Ensure flexbox items align correctly in RTL */
html[dir="rtl"] .wrapper {
  /* flex-direction: column-reverse; */
}

/* ✅ Move Lottie animation based on RTL */
html[dir="rtl"] .logo-container lottie-player {
  left: 5% !important;
  right: auto !important;
}

html[dir="ltr"] .logo-container lottie-player {
  right: 5% !important;
  left: auto !important;
}

html[dir="rtl"] .offer-image {
  content: url("./images/offers-ar.png");
}

html[dir="ltr"] .offer-image {
  content: url("./images/offers.png");
}

html[dir="rtl"] .outline {
  transform: scaleX(-1);
}