/* إخفاء عناصر الصفحة الرئيسية الحالية */
body > *:not(.city-buttons) {
  display: none;
}

/* تصميم صفحة الهبوط */
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* جعل ارتفاع الصفحة ممتلئ */
  background-color: #FFFEFF; /* خلفية بيضاء */
  font-family: "Rubik", sans-serif;
}

.city-buttons {
  display: flex;
  flex-direction: column; /* ترتيب الأزرار عمودياً */
  gap: 20px; /* مسافة بين الأزرار */
}

.city-button {
  padding: 15px 30px;
  background-color: #ff6600; /* لون برتقالي */
  color: white;
  font-size: 18px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none; /* إزالة التسطير من الروابط */
  transition: background-color 0.3s ease; /* تأثير انتقال سلس */
}

.city-button:hover {
  background-color: #35C0CD; /* لون سماوي عند المرور بالماوس */
}


/* تصميم خاص للأجهزة الصغيرة */
@media (max-width: 768px) {
  .city-buttons {
    flex-direction: row; /* ترتيب الأزرار أفقيًا */
    flex-wrap: wrap; /* السماح للأزرار بالانتقال إلى سطر جديد */
    justify-content: center; /* توسيط الأزرار */
  }

  .city-button {
    width: 45%; /* ضبط عرض الزر */
    margin: 5px; /* مسافة حول الأزرار */
  }
}

<div class="city-buttons">
  <a href="https://lushflowers.gifts/ar/%D9%87%D8%AF%D8%A7%D9%8A%D8%A7-%D8%A7%D9%84%D9%88%D8%B1%D9%88%D8%AF-%D9%88-%D8%A7%D9%84%D8%B2%D9%87%D9%88%D8%B1/c542093444" class="city-button">جدة</a>
  <a href="https://lushflowers.gifts/ar/%D9%87%D8%AF%D8%A7%D9%8A%D8%A7-%D8%A7%D9%84%D9%85%D9%86%D8%A7%D8%B3%D8%A8%D8%A7%D8%AA/c1804432485" class="city-button">الرياض</a>
  <a href="https://lushflowers.gifts/ar/%D8%A7%D9%84%D8%B9%D8%B1%D9%88%D8%B6/c705527766" class="city-button">الشرقية</a>
</div>