/* Adding styles for Wedding, Bridal, and Commercial Event sections */

/* ===== WEDDING SECTION STYLES ===== */
.wedding-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.wedding-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.wedding-left {
  position: relative;
  z-index: 2;
}

.decorative-wedding-rings {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

.decorative-wedding-rings::before,
.decorative-wedding-rings::after {
  content: "💍";
  font-size: 40px;
  position: absolute;
}

.wedding-title {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.wedding-subtitle {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  color: #6c757d;
  margin-bottom: 20px;
  font-weight: 500;
}

.wedding-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: black;
  margin-bottom: 40px;
}

.wedding-buttons {
  margin-bottom: 40px;
}

/*
      .eng-tab-button {
        padding: 14px 28px;
        background: #c9a86a;
        border: none;
        color: #FFFFFF;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 8px;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(201, 168, 106, 0.3);
      }

      .eng-tab-button svg {
        width: 18px;
        height: 18px;
        transition: transform 0.3s ease;
      }

      .eng-tab-button:not(.active) {
        background: transparent;
        border: 2px solid #c9a86a;
        color: #c9a86a;
      }

      .eng-tab-button:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(201, 168, 106, 0.4);
      }

      .eng-tab-button:hover svg {
        transform: rotate(360deg);
      }*/
.wedding-tab-button {
  background: #c9a86a;
  color: white;
  border: none;
  padding: 18px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
}

.wedding-tab-button:not(.active) {
  background: transparent;
  border: 2px solid #c9a86a;
  color: #c9a86a;
}

.wedding-tab-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(201, 168, 106, 0.4);
}

.wedding-tab-button svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.wedding-tab-button:hover svg {
  transform: rotate(360deg);
}

.wedding-price-badge {
  background: linear-gradient(135deg, #0F2533 0%, #1a3a4d 100%);
  padding: 25px 40px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(255, 215, 0, 0.3);
  filter: blur(50px);
  cursor: default;
}


[data-theme="dark"] .wedding-price-badge {
  background: linear-gradient(135deg, var(--accent-color) 0%, #d4c4a0 100%);
}

.wedding-price-badge .price-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 5px;
}

.wedding-price-badge .price-amount {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: #1a1a1a;
}

.wedding-right {
  position: relative;
}

.wedding-cards-container {
  position: relative;
  padding: 30px;
}

.wedding-decorative-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.wedding-flower-icon {
  position: absolute;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #c9a86a 0%, #a88a56 100%);

  border-radius: 50%;
  opacity: 0.6;
  animation: float 4s ease-in-out infinite;
}

.wedding-flower-icon.top-left {
  top: -20px;
  left: -20px;
}

.wedding-flower-icon.top-right {
  top: -20px;
  right: -20px;
  animation-delay: 1s;
}


.wedding-package-card-wrapper {
  position: relative;
  z-index: 2;
}

.wedding-package-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 50px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: 2px solid rgba(255, 215, 0, 0.3);
  transition: all 0.4s ease;
}

.wedding-package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.2);
}

.wedding-card-header {
  text-align: center;
  margin-bottom: 40px;
}

.wedding-icon-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #c9a86a 0%, #a88a56 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.wedding-icon-badge svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.wedding-card-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.wedding-card-header h4 {
  font-size: 1.3rem;
  color: var(--accent-color);
  font-weight: 500;
}

.wedding-package-features {
  margin-bottom: 40px;
}

.feature-category {
  margin-bottom: 30px;
}

.feature-category h5 {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  color: var(--accent-color);
  margin-bottom: 15px;
  font-weight: 600;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 8px;
}

.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 0;
}

.feature-item svg {
  width: 20px;
  height: 20px;
  fill: #ffd700;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-item span {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.wedding-choose-button {
  width: 100%;
  background: linear-gradient(135deg, #c9a86a 0%, #a88a56 100%);
  color: #ffffff;
  border: none;
  padding: 18px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s ease;
}

.wedding-choose-button:hover {
  transform: translateY(-3px);
}

.wedding-decorative-hearts {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-wedding-heart {
  position: absolute;
  font-size: 3rem;
  color: #a88a56;
  opacity: 0.3;
  animation: floatHeart 8s ease-in-out infinite;
}

.floating-wedding-heart:nth-child(1) {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.floating-wedding-heart:nth-child(2) {
  top: 60%;
  left: 10%;
  animation-delay: 2s;
}

.floating-wedding-heart:nth-child(3) {
  top: 30%;
  right: 8%;
  animation-delay: 4s;
}

.floating-wedding-heart:nth-child(4) {
  bottom: 15%;
  right: 5%;
  animation-delay: 6s;
}

/* ===== BRIDAL SECTION STYLES ===== */
.bridal-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}



.bridal-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.bridal-left {
  position: relative;
  z-index: 2;
}

.decorative-bridal-crown {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pulse 2s ease-in-out infinite;
}

.decorative-bridal-crown::before {
  content: "💞";
  font-size: 40px;
}

.bridal-title {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.bridal-subtitle {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  color: #ff69b4;
  margin-bottom: 20px;
  font-weight: 500;
}

.bridal-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.bridal-buttons {
  margin-bottom: 40px;
}

.bridal-tab-button {
  background: linear-gradient(135deg, #ff69b4 0%, #ffb6c1 100%);
  color: white;
  border: none;
  padding: 18px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(255, 105, 180, 0.3);
}

.bridal-tab-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(255, 105, 180, 0.5);
}

.bridal-tab-button svg {
  width: 24px;
  height: 24px;
}

.bridal-price-badge {
  background: linear-gradient(135deg, #ff69b4 0%, #ffb6c1 100%);
  padding: 25px 40px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(255, 105, 180, 0.3);
  filter: blur(50px);
  cursor: default;
}

[data-theme="dark"] .bridal-price-badge {
  background: linear-gradient(135deg, #34001a 0%, #58232b 100%);
}

.bridal-price-badge .price-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
}

.bridal-price-badge .price-amount {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
}

.bridal-right {
  position: relative;
}

.bridal-cards-container {
  position: relative;
  padding: 30px;
}

.bridal-decorative-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.bridal-flower-icon {
  position: absolute;
  width: 70px;
  height: 70px;
  background: radial-gradient(circle, #ffb6c1 0%, #ff69b4 100%);
  border-radius: 50%;
  opacity: 0.5;
  animation: float 4s ease-in-out infinite;
}

.bridal-flower-icon.top-left {
  top: -25px;
  left: -25px;
}

.bridal-flower-icon.top-right {
  top: -25px;
  right: -25px;
  animation-delay: 1.5s;
}

.bridal-butterfly-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ffb6c1 0%, #ff69b4 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: float 6s ease-in-out infinite;
  opacity: 0.6;
}

.bridal-butterfly-icon.left {
  top: 40%;
  left: -20px;
}

.bridal-butterfly-icon.right {
  top: 60%;
  right: -20px;
  animation-delay: 3s;
}

.bridal-package-card-wrapper {
  position: relative;
  z-index: 2;
}

.bridal-package-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 50px;
  box-shadow: 0 20px 60px rgba(255, 105, 180, 0.15);
  border: 2px solid rgba(255, 105, 180, 0.3);
  transition: all 0.4s ease;
}

.bridal-package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(255, 105, 180, 0.25);
}

.bridal-card-header {
  text-align: center;
  margin-bottom: 40px;
}

.bridal-icon-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #ff69b4 0%, #ffb6c1 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(255, 105, 180, 0.4);
}

.bridal-icon-badge svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.bridal-card-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.bridal-card-header h4 {
  font-size: 1.3rem;
  color: #ff69b4;
  font-weight: 500;
}

.bridal-package-features {
  margin-bottom: 40px;
}

.bridal-choose-button {
  width: 100%;
  background: linear-gradient(135deg, #ff69b4 0%, #ffb6c1 100%);
  color: white;
  border: none;
  padding: 18px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(255, 105, 180, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.bridal-choose-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(255, 105, 180, 0.5);
}

.bridal-decorative-sparkles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-bridal-sparkle {
  position: absolute;
  font-size: 2.5rem;
  opacity: 0.4;
  animation: sparkle 3s ease-in-out infinite;
}

.floating-bridal-sparkle:nth-child(1) {
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}

.floating-bridal-sparkle:nth-child(2) {
  top: 70%;
  left: 5%;
  animation-delay: 1s;
}

.floating-bridal-sparkle:nth-child(3) {
  top: 25%;
  right: 10%;
  animation-delay: 2s;
}

.floating-bridal-sparkle:nth-child(4) {
  bottom: 20%;
  right: 8%;
  animation-delay: 1.5s;
}

/* ===== COMMERCIAL EVENT SECTION STYLES ===== */
.commercial-event-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}


.commercial-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.commercial-left {
  position: relative;
  z-index: 2;
}

.decorative-commercial-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 15px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

.decorative-commercial-badge::before {
  content: "🏢";
  font-size: 40px;
}

.commercial-title {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.commercial-subtitle {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  color: #3498db;
  margin-bottom: 20px;
  font-weight: 500;
}

.commercial-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.commercial-buttons {
  margin-bottom: 40px;
}

.commercial-tab-button {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  padding: 18px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.commercial-tab-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(52, 152, 219, 0.5);
}

.commercial-tab-button svg {
  width: 24px;
  height: 24px;
}

.commercial-price-badge {
  background: linear-gradient(135deg, #0d4f7b 0%, #113853 100%);
  padding: 25px 40px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  filter: blur(50px);


}

[data-theme="dark"] .commercial-price-badge {
  background: linear-gradient(135deg, #7cc5ec 0%, #6caad3 100%);
}

.commercial-price-badge .price-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
}

.commercial-price-badge .price-amount {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
}

.commercial-right {
  position: relative;
}

.commercial-cards-container {
  position: relative;
  padding: 30px;
}

.commercial-decorative-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.commercial-icon-element {
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  opacity: 0.4;
  animation: float 5s ease-in-out infinite;
}

.commercial-icon-element.top-left {
  top: -15px;
  left: -15px;
  border-radius: 10px;
  transform: rotate(45deg);
}

.commercial-icon-element.top-right {
  top: -15px;
  right: -15px;
  border-radius: 50%;
  animation-delay: 1s;
}

.commercial-icon-element.bottom-left {
  bottom: -15px;
  left: -15px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation-delay: 2s;
}

.commercial-icon-element.bottom-right {
  bottom: -15px;
  right: -15px;
  border-radius: 10px;
  animation-delay: 3s;
}

.commercial-package-card-wrapper {
  position: relative;
  z-index: 2;
}

.commercial-package-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 50px;
  box-shadow: 0 20px 60px rgba(52, 152, 219, 0.15);
  border: 2px solid rgba(52, 152, 219, 0.3);
  transition: all 0.4s ease;
}

.commercial-package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(52, 152, 219, 0.25);
}

.commercial-card-header {
  text-align: center;
  margin-bottom: 40px;
}

.commercial-icon-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
}

.commercial-icon-badge svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.commercial-card-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.commercial-card-header h4 {
  font-size: 1.3rem;
  color: #3498db;
  font-weight: 500;
}

.commercial-package-features {
  margin-bottom: 40px;
}

.commercial-choose-button {
  width: 100%;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  padding: 18px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.commercial-choose-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(52, 152, 219, 0.5);
}

.commercial-decorative-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-commercial-icon {
  position: absolute;
  font-size: 3rem;
  color: #3498db;
  opacity: 0.2;
  animation: floatStar 6s ease-in-out infinite;
}

.floating-commercial-icon:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-commercial-icon:nth-child(2) {
  top: 65%;
  left: 8%;
  animation-delay: 2s;
}

.floating-commercial-icon:nth-child(3) {
  top: 40%;
  right: 12%;
  animation-delay: 4s;
}

/* ===== SHARED ANIMATIONS ===== */
@keyframes floatHeart {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

@keyframes sparkle {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.4;
  }

  50% {
    transform: scale(1.3) rotate(180deg);
    opacity: 0.8;
  }
}

@keyframes floatStar {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(180deg);
  }
}

/* ===== RESPONSIVE STYLES ===== */
@media (max-width: 1024px) {

  .wedding-content,
  .bridal-content,
  .commercial-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .wedding-title,
  .bridal-title,
  .commercial-title {
    font-size: 3rem;
  }

  .wedding-subtitle,
  .bridal-subtitle,
  .commercial-subtitle {
    font-size: 1.5rem;
  }

  .wedding-package-card,
  .bridal-package-card,
  .commercial-package-card {
    padding: 35px;
  }

  .wedding-cards-container,
  .bridal-cards-container,
  .commercial-title {
    font-size: 2rem;
  }

  .wedding-subtitle,
  .bridal-subtitle,
  .commercial-subtitle {
    font-size: 1.1rem;
  }

  .wedding-package-card,
  .bridal-package-card,
  .commercial-package-card {
    padding: 20px;
  }

  .wedding-tab-button,
  .bridal-tab-button,
  .commercial-tab-button {
    padding: 12px 20px;
    font-size: 0.85rem;
  }

  .wedding-price-badge,
  .bridal-price-badge,
  .commercial-price-badge {
    padding: 15px 25px;
  }

  .price-amount {
    font-size: 2rem;
  }

  .wedding-choose-button,
  .bridal-choose-button,
  .commercial-choose-button {
    font-size: 1rem;
    padding: 15px;
  }

  .wedding-card-header h3,
  .bridal-card-header h3,
  .commercial-card-header h3 {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {

  .wedding-content,
  .bridal-content,
  .commercial-content {
    gap: 30px;
  }

  .wedding-title,
  .bridal-title,
  .commercial-title {
    font-size: 2.5rem;
  }

  .wedding-buttons,
  .bridal-buttons,
  .commercial-buttons {
    justify-content: center;
  }

  .wedding-tab-button,
  .bridal-tab-button,
  .commercial-tab-button {
    width: 100%;
    justify-content: center;
  }
}
/* ===== DINNER EVENT SECTION STYLES ===== */
.dinner-event-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.dinner-content {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: center;
}

.dinner-left {
  position: relative;
  z-index: 2;
}

.decorative-dinner-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 15px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  animation: pulse 2s ease-in-out infinite;
}

.decorative-dinner-badge::before {
  content: "🍽️";
  font-size: 40px;
}

.dinner-title {
  font-family: "Playfair Display", serif;
  font-size: 4rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.dinner-subtitle {
  font-family: "Playfair Display", serif;
  font-size: 1.8rem;
  color: #3498db;
  margin-bottom: 20px;
  font-weight: 500;
}

.dinner-description {
  font-size: 1.1rem;
  line-height: 1.8;
  color: var(--text-secondary);
  margin-bottom: 40px;
}

.dinner-buttons {
  margin-bottom: 40px;
}

.dinner-tab-button {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  padding: 18px 35px;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3);
}

.dinner-tab-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 35px rgba(52, 152, 219, 0.5);
}

.dinner-tab-button svg {
  width: 24px;
  height: 24px;
}

/* ===== PRICE BADGE ===== */
.dinner-price-badge {
  background: linear-gradient(135deg, #0d4f7b 0%, #113853 100%);
  padding: 25px 40px;
  border-radius: 20px;
  display: inline-block;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
}

[data-theme="dark"] .dinner-price-badge {
  background: linear-gradient(135deg, #7cc5ec 0%, #6caad3 100%);
}

.dinner-price-badge .price-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
}

.dinner-price-badge .price-amount {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: white;
}

/* ===== RIGHT SIDE ===== */
.dinner-right {
  position: relative;
}

.dinner-cards-container {
  position: relative;
  padding: 30px;
}

.dinner-decorative-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
}

.dinner-icon-element {
  position: absolute;
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  opacity: 0.4;
  animation: float 5s ease-in-out infinite;
}

.dinner-icon-element.top-left {
  top: -15px;
  left: -15px;
  border-radius: 10px;
  transform: rotate(45deg);
}

.dinner-icon-element.top-right {
  top: -15px;
  right: -15px;
  border-radius: 50%;
  animation-delay: 1s;
}

.dinner-icon-element.bottom-left {
  bottom: -15px;
  left: -15px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation-delay: 2s;
}

.dinner-icon-element.bottom-right {
  bottom: -15px;
  right: -15px;
  border-radius: 10px;
  animation-delay: 3s;
}

/* ===== PACKAGE CARD ===== */
.dinner-package-card-wrapper {
  position: relative;
  z-index: 2;
}

.dinner-package-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  border-radius: 30px;
  padding: 50px;
  box-shadow: 0 20px 60px rgba(52, 152, 219, 0.15);
  border: 2px solid rgba(52, 152, 219, 0.3);
  transition: all 0.4s ease;
}

.dinner-package-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(52, 152, 219, 0.25);
}

.dinner-card-header {
  text-align: center;
  margin-bottom: 40px;
}

.dinner-icon-badge {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.4);
}

.dinner-icon-badge svg {
  width: 40px;
  height: 40px;
  fill: white;
}

.dinner-card-header h3 {
  font-family: "Playfair Display", serif;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 5px;
}

.dinner-card-header h4 {
  font-size: 1.3rem;
  color: #3498db;
  font-weight: 500;
}

.dinner-package-features {
  margin-bottom: 40px;
}

.dinner-choose-button {
  width: 100%;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  padding: 18px;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(52, 152, 219, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.dinner-choose-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(52, 152, 219, 0.5);
}

/* ===== FLOATING ICONS ===== */
.dinner-decorative-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-dinner-icon {
  position: absolute;
  font-size: 3rem;
  color: #3498db;
  opacity: 0.2;
  animation: floatStar 6s ease-in-out infinite;
}

.floating-dinner-icon:nth-child(1) {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-dinner-icon:nth-child(2) {
  top: 65%;
  left: 8%;
  animation-delay: 2s;
}

.floating-dinner-icon:nth-child(3) {
  top: 40%;
  right: 12%;
  animation-delay: 4s;
}

/* ===== ANIMATION ===== */
@keyframes floatStar {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(180deg);
  }
}



/* ================= MOBILE HERO FINAL FIX (FIXED HEADER) ================= */
@media (max-width: 768px) {

  html, body {
    width: 100%;
    overflow-x: hidden;
  }

  /* Header is fixed */
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 72px;
    z-index: 10000;
  }

  /* Push hero below header + notch */
  .hero,
  .hero-section {
    padding-top: calc(72px + env(safe-area-inset-top) + 24px);
    padding-bottom: 32px;
  }

  .hero-content {
    text-align: center;
    padding: 0 16px;
  }

  .hero-content h1 {
    font-size: 22px;
    line-height: 1.4;
    margin: 0;
  }

  .hero-content p {
    font-size: 14px;
    line-height: 1.6;
    margin: 16px 0 20px;
  }

  .hero-content .btn,
  .hero-content button {
    margin: 0 auto;
    padding: 12px 26px;
    font-size: 14px;
    border-radius: 30px;
  }

  .hero-image img {
    width: 100%;
    border-radius: 16px;
    display: block;
  }
}
/* ================= MOBILE MENU CLICK FIX ================= */
@media (max-width: 768px) {

  #header {
    pointer-events: auto;
    z-index: 10000;
  }

  .menu-toggle {
    pointer-events: auto;
    z-index: 10002;
  }

  .hero,
  .hero-section {
    pointer-events: auto;
  }

  .hero-content,
  .hero-content * {
    pointer-events: auto;
  }
}
@media (max-width: 768px) {

  .nav-links {
    display: none !important;
    position: fixed;
    top: 72px;          /* عدّليها إذا هيدرك أطول/أقصر */
    left: 0;
    right: 0;
    height: calc(100vh - 72px);
    background: #f6f1e9;   /* أو var(--header-bg) إذا عندك */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 9999;
  }

  .nav-links.active {
    display: flex !important;
  }
}
@media (max-width: 768px) {

  /* Mobile menu base */
  .nav-links {
    background: #f6f1e9; /* light background */
  }

  .nav-links a {
    color: #1a1a1a !important; /* dark text */
    font-weight: 500;
  }

  /* Dark mode menu */
  body.dark .nav-links {
    background: #121212;
  }

  body.dark .nav-links a {
    color: #ffffff !important;
  }
}
@media (max-width: 768px) {

  /* Mobile menu background = site blue */
  .nav-links {
    background-color: #0f2a3a; /* الأزرق الغامق تبع الموقع */
  }

  /* Menu text */
  .nav-links a {
    color: #ffffff !important;
    font-weight: 500;
    letter-spacing: 1px;
  }

  /* Hover / active */
  .nav-links a:hover,
  .nav-links a.active {
    color: #d8c9a3; /* ذهبي خفيف يليق مع الهوية */
  }

  /* Theme toggle icon */
  .nav-links .theme-toggle,
  .nav-links svg {
    color: #ffffff;
    stroke: #ffffff;
  }
}
/* ================= MOBILE HERO = DESKTOP COLORS ================= */
@media (max-width: 768px) {

  /* Hero background like desktop */
  .hero,
  .hero-section {
    background: linear-gradient(
      135deg,
      #0b2534 0%,
      #0f2f44 50%,
      #12384f 100%
    );
    color: #ffffff;
    padding-top: calc(72px + env(safe-area-inset-top) + 24px);
    padding-bottom: 40px;
  }

  /* Hero text */
  .hero-content {
    text-align: center;
    padding: 0 18px;
  }

  .hero-content h1 {
    color: #ffffff;
    font-size: 22px;
    line-height: 1.4;
  }

  .hero-content h1 span,
  .hero-content em,
  .hero-content .gold {
    color: #d8c9a3; /* ذهبي */
  }

  .hero-content p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    line-height: 1.6;
    margin: 16px 0 22px;
  }

  /* Button same as desktop */
  .hero-content .btn,
  .hero-content button {
    background-color: #d8c9a3;
    color: #0b2534;
    font-weight: 500;
    padding: 12px 28px;
    border-radius: 30px;
  }

  /* Hero image */
  .hero-image img {
    width: 100%;
    border-radius: 18px;
    margin-top: 24px;
  }
}
@media (max-width: 768px) {

  /* Force hero section to be fully blue */
  .hero,
  .hero-section {
    background: linear-gradient(
      135deg,
      #0b2534 0%,
      #0f2f44 50%,
      #12384f 100%
    );
  }

  /* Remove any gap under hero image */
  .hero-image {
    background: transparent;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 0;
  }
}
@media (max-width: 768px) {

  /* Fix decorative circle / overlay color */
  .hero::before,
  .hero::after,
  .hero-section::before,
  .hero-section::after,
  .hero-overlay,
  .hero-bg-shape,
  .circle,
  .circle-bg {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  /* Make sure hero container stays blue */
  .hero,
  .hero-section {
    background: linear-gradient(
      135deg,
      #0b2534 0%,
      #0f2f44 50%,
      #12384f 100%
    ) !important;
  }

  /* Prevent overlay from cutting background */
  .hero,
  .hero-section,
  .hero-image {
    overflow: hidden;
  }
}
/* ================= REMOVE HERO CIRCLE ON MOBILE ================= */
@media (max-width: 768px) {

  /* Kill the decorative circle */
  .hero::before,
  .hero::after,
  .hero-shape
  .hero-circle,
  .circle,
  .bg-circle,
  .hero-overlay {
    display: none !important;
  }
}
@media (max-width: 768px) {
  .hero,
  .hero-section,
  .hero *,
  .nav-links,
  .nav-links * {
    pointer-events: auto !important;
  }
}

/* ================= DINNER RESPONSIVE FIX ================= */

/* Tablet + Mobile Fix */
@media (max-width: 1024px) {

  .dinner-content {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
    text-align: center;
  }

  .dinner-package-card {
    padding: 35px !important;
  }
}

/* Mobile Fix */
@media (max-width: 768px) {

  .dinner-title {
    font-size: 2.3rem !important;
  }

  .dinner-subtitle {
    font-size: 1.3rem !important;
  }

  .dinner-description {
    font-size: 1rem !important;
  }

  .dinner-tab-button {
    width: 100% !important;
    justify-content: center !important;
  }

  .dinner-price-badge {
    padding: 15px 25px !important;
    margin: 0 auto !important;
    display: inline-block !important;
  }

  .dinner-package-card {
    padding: 25px !important;
  }

  .dinner-choose-button {
    font-size: 1rem !important;
    padding: 15px !important;
  }
}

/* Remove Blur From Price Badge */
.dinner-price-badge,
.wedding-price-badge,
.bridal-price-badge,
.commercial-price-badge {
  filter: blur(0px) !important;
}
/* =========================================================
   ✅ FINAL FIX PATCH (COPY + PASTE AT END OF styles.css)
   Fixes: Click Issues + Hero Circles + Dinner Responsive
========================================================= */

/* ✅ FORCE CLICKS BACK */
* {
  pointer-events: auto !important;
}

/* ✅ HERO MOBILE CLEANUP */
@media (max-width: 768px) {

  /* Keep hero background */
  .hero,
  .hero-section {
    background: linear-gradient(
      135deg,
      #0b2534 0%,
      #0f2f44 50%,
      #12384f 100%
    ) !important;
    overflow: hidden !important;
  }

  /* Remove decorative circles/shapes */
  .hero::before,
  .hero::after,
  .hero-shape,
  .hero-circle,
  .circle,
  .bg-circle,
  .hero-overlay {
    display: none !important;
  }

  /* Fix navbar clicks */
  .nav-links,
  .nav-links * {
    pointer-events: auto !important;
    z-index: 99999 !important;
  }
}

/* ✅ DINNER SECTION RESPONSIVE FIX */
@media (max-width: 1024px) {

  .dinner-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 35px !important;
    text-align: center !important;
  }

  .dinner-package-card {
    padding: 30px !important;
    width: 100% !important;
  }
}

@media (max-width: 768px) {

  .dinner-title {
    font-size: 2.2rem !important;
  }

  .dinner-subtitle {
    font-size: 1.2rem !important;
  }

  .dinner-tab-button {
    width: 100% !important;
    justify-content: center !important;
  }

  .dinner-choose-button {
    width: 100% !important;
  }
}

/* ✅ REMOVE BLUR FROM ALL PRICE BADGES */
.dinner-price-badge,
.wedding-price-badge,
.bridal-price-badge,
.commercial-price-badge {
  filter: blur(0px) !important;
}

/* =========================================================
   ✅ END OF FINAL FIX PATCH
========================================================= */
/* ================= CLICK FIX FINAL ================= */

/* Kill any invisible overlay blocking clicks */
.hero::before,
.hero::after,
.hero-overlay,
.hero-bg-shape,
.circle,
.bg-circle,
.hero-shape,
.hero-circle {
  pointer-events: none !important;
  display: none !important;
}

/* Make sure nothing covers the page */
body * {
  pointer-events: auto !important;
}

/* Navbar must always be clickable */
#header,
.menu-toggle,
.nav-links,
.nav-links a {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 999999 !important;
}
/* ================= MOBILE MENU FULLSCREEN FIX ================= */
@media (max-width: 768px) {

  .nav-links {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;

    background: rgba(10, 30, 45, 0.97) !important;
    backdrop-filter: blur(15px);

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

    gap: 25px !important;
    z-index: 99999 !important;

    transform: translateX(100%);
    transition: 0.4s ease;
  }

  /* لما تنفتح */
  .nav-links.active {
    transform: translateX(0) !important;
  }

  /* شكل الروابط */
  .nav-links a {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: white !important;
    text-decoration: none !important;
  }

  /* زر الثلاث خطوط */
  .menu-toggle {
    position: fixed !important;
    top: 20px !important;
    right: 20px !important;
    z-index: 100000 !important;
    font-size: 28px !important;
    color: white !important;
    cursor: pointer !important;
  }
}
/* ================= STICKY HEADER FIX ================= */
#header {
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 99999;
  background: rgba(10, 30, 45, 0.95);
  backdrop-filter: blur(15px);
}
/* =========================================================
   ✅ FINAL FIX: HEADER ALWAYS STAYS ON TOP (MOBILE + DESKTOP)
========================================================= */

/* Fixed Header */
#header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;

  height: 80px !important;
  display: flex !important;
  align-items: center !important;

  background: rgba(10, 30, 45, 0.95) !important;
  backdrop-filter: blur(15px) !important;

  z-index: 999999 !important;
}

/* Push page content down so header doesn't cover it */
.main-content {
  padding-top: 90px !important;
}

/* Prevent sections from hiding behind header when clicking menu */
section {
  scroll-margin-top: 100px !important;
}
/* ================= HEADER ALIGN FIX ================= */

#header .container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.logo {
  margin: 0 !important;
  padding: 0 !important;
}

.menu-toggle {
  margin-left: auto !important;
}
/* Fix overlapping decorative stars */
.graduation-section {
  position: relative;
  overflow: hidden;
}

.grad-decorative-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.graduation-section > *:not(.grad-decorative-stars) {
  position: relative;
  z-index: 1;
}
/* ===== FIX: graduation card overlap / position ===== */
.graduation-card-wrapper{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 30px;
  min-height: auto; /* بدل 600px */
}

.graduation-package-card{
  position: relative;   /* بدل absolute */
  top: auto;
  left: auto;
  transform: none;      /* شيل translate(-50%,-50%) */
  height: auto;         /* شيل HEIGHT:1300px */
  margin: 0 auto;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}

/* للموبايل: اخفي صورة الجنب اذا بتسبب تداخل */
@media (max-width: 768px){
  .graduation-image-card{ display: none; }
}
/* show all list items - no inner scroll */
.graduation-package-card{
  max-height: none !important;
  overflow-y: visible !important;
  height: auto !important;
}
.graduation-section a {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
/* ===== FIX: Center the graduation buttons and stop shifting ===== */
.graduation-buttons{
  width: 100%;
  max-width: 350px;
  margin: 0 auto 32px;     /* بالنص + مسافة تحت */
  display: flex;
  flex-direction: column;
  align-items: center;      /* يخلي الأزرار بالنص */
}

.grad-tab-button{
  width: 100%;
  justify-content: center;  /* النص والايقونة بالنص */
}

/* كان في translateX(10px) بطلع الزر من النص */
.grad-tab-button:hover,
.grad-tab-button.active{
  transform: none !important;
}

/* ===== FIX: Stop the graduation card from overlapping content ===== */
.graduation-package-card{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  height: auto !important;
}
/* Top image section (same look as engagement image card) */
.top-image-section{
  padding-top: 24px;
  padding-bottom: 24px;
}

/* خفف طول الكرت فوق عن كرت engagement */
.engagement-image-card.top-hero-card{
  min-height: 320px; /* موبايل */
}

/* تابلت وفوق */
@media (min-width: 768px){
  .engagement-image-card.top-hero-card{
    min-height: 450px;
  }
}
@media (max-width: 768px){
  .top-image-section{
    padding-top: calc(72px + env(safe-area-inset-top) + 16px);
  }
}
/* ===== HERO TEXT OVER IMAGE (MOBILE FIRST) ===== */
.hero-content{
  position: absolute;
  inset: 0;
  z-index: 5;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 0 20px;
  text-align: center;
  color: #1a1a1a;
}

.hero-eyebrow{
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 12px;
}

.hero-title{
  font-size: 28px;
  line-height: 1.3;
  font-weight: 500;
  margin-bottom: 14px;
}

.hero-title span{
  opacity: 0.6;
}

.hero-desc{
  font-size: 14px;
  line-height: 1.6;
  max-width: 340px;
  margin-bottom: 24px;
  opacity: 0.8;
}

.hero-btn{
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: #102a3b;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

/* تابلت */
@media (min-width: 768px){
  .hero-title{ font-size: 40px; }
  .hero-desc{ font-size: 16px; max-width: 520px; }
}

/* ديسكتوب */
@media (min-width: 1024px){
  .hero-title{ font-size: 52px; }
}
/* خلي كرت الصورة يسمح بالنص فوقه */
.top-hero-card,
.top-image-section .engagement-image-card{
  position: relative;
}

/* النص فوق الصورة */
.hero-content{
  position: absolute;
  inset: 0;
  z-index: 10;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 18px 18px;
  text-align: center;
  color: #1a1a1a;
}

/* تعتيم خفيف عشان القراءة */
.top-hero-card::after,
.top-image-section .engagement-image-card::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.45);
  z-index: 5;
}

/* النص فوق التعتيم */
.hero-content{ z-index: 10; }

.hero-eyebrow{
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 10px;
}

.hero-title{
  font-size: 22px;       /* موبايل */
  line-height: 1.25;
  margin-bottom: 10px;
  font-weight: 500;
}

.hero-title span{ opacity: 0.6; }

.hero-desc{
  font-size: 13px;
  line-height: 1.6;
  max-width: 320px;
  opacity: 0.85;
  margin-bottom: 16px;
}

.hero-btn{
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  background: #102a3b;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
}

/* أكبر شوي */
@media (min-width: 768px){
  .hero-title{ font-size: 32px; }
  .hero-desc{ font-size: 15px; max-width: 520px; }
}
/* ===== FIX: Move hero text up + improve contrast ===== */

/* ارفع المحتوى لفوق شوي */
.hero-content{
  justify-content: flex-start !important;
  padding-top: 28px !important;   /* عدّلها 24–40 حسب ذوقك */
}

/* قوّي التباين */
.top-hero-card::after,
.top-image-section .engagement-image-card::after{
  background: rgba(0,0,0,0.35) !important; /* أغمق شوي */
}

/* لون النص أبيض أوضح */
.hero-content,
.hero-content *{
  color: #ffffff !important;
}

/* تحسين أحجام الخط للموبايل */
.hero-eyebrow{
  font-size: 11px !important;
  opacity: 0.85 !important;
}

.hero-title{
  font-size: 22px !important;
  line-height: 1.25 !important;
}

.hero-desc{
  font-size: 13px !important;
  line-height: 1.6 !important;
  max-width: 300px !important;
}

/* زر أوضح */
.hero-btn{
  background: #0f2a3a !important;
}

/* أكبر شوي على التابلت */
@media (min-width: 768px){
  .hero-content{ padding-top: 36px !important; }
  .hero-title{ font-size: 32px !important; }
  .hero-desc{ font-size: 15px !important; max-width: 520px !important; }
}
/* ===== TEXT ABOVE HERO IMAGE ===== */
.hero-text-above{
  padding: 24px 20px 12px;
  text-align: center;
}

.hero-text-above .hero-content{
  position: static !important;
  color: #1a1a1a !important;
}

/* النص */
.hero-text-above .hero-eyebrow{
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 10px;
}

.hero-text-above .hero-title{
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 12px;
}

.hero-text-above .hero-desc{
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
  margin: 0 auto 18px;
}

/* الزر */
.hero-text-above .hero-btn{
  background: #102a3b;
  color: #fff;
}

/* موبايل */
@media (max-width: 768px){
  .hero-text-above{
    padding-top: 20px;
  }

  .hero-text-above .hero-title{
    font-size: 24px;
  }
}
/* ===== Make hero text clearer + move it up ===== */
.hero-text-above{
  padding-top: 16px !important;   /* كانت 24 - خففناها */
  padding-bottom: 10px !important;
}

/* خلّي النص أوضح */
.hero-text-above .hero-eyebrow,
.hero-text-above .hero-title,
.hero-text-above .hero-desc{
  color: #0f2230 !important;                 /* كحلي غامق */
  text-shadow: 0 1px 0 rgba(255,255,255,0.5); /* لمعة بسيطة */
}

.hero-text-above .hero-title{
  font-weight: 700 !important;
  letter-spacing: 0.2px;
  margin-top: 6px !important;
}

.hero-text-above .hero-desc{
  opacity: 0.95 !important;
}

/* صغّر المسافات بين العناصر عشان تطلع لفوق */
.hero-text-above .hero-eyebrow{ margin-bottom: 8px !important; }
.hero-text-above .hero-title{ margin-bottom: 10px !important; }
.hero-text-above .hero-desc{ margin-bottom: 14px !important; }

/* الزر يكون أنحف شوي */
.hero-text-above .hero-btn{
  padding: 12px 26px !important;
}

/* موبايل: خلي النص أعلى وأوضح */
@media (max-width: 768px){
  .hero-text-above{
    padding-top: 12px !important;
  }
  .hero-text-above .hero-title{
    font-size: 24px !important;
  }
  .hero-text-above .hero-desc{
    font-size: 13px !important;
    max-width: 340px !important;
  }
}
/* ===== Reduce hero spacing ===== */

/* المسافة تحت الهيدر */
.hero-text-above{
  padding-top: 8px !important;   /* كانت أكبر */
  padding-bottom: 8px !important;
}

/* السطر الصغير */
.hero-eyebrow{
  margin-bottom: 6px !important;
}

/* العنوان */
.hero-title{
  margin-top: 4px !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}

/* الوصف */
.hero-desc{
  margin-bottom: 14px !important;
  line-height: 1.5 !important;
}

/* الزر */
.hero-btn{
  margin-top: 0 !important;
}

/* موبايل أدق */
@media (max-width: 768px){
  .hero-text-above{
    padding-top: 4px !important;
  }

  .hero-title{
    font-size: 23px !important;
  }

  .hero-desc{
    font-size: 13px !important;
  }
}
/* ===== FORCE hero text UP ===== */
.hero-text-above{
  transform: translateY(-40px) !important; /* ارفع كله لفوق */
}

/* موبايل: رفع أقل شوي */
@media (max-width: 768px){
  .hero-text-above{
    transform: translateY(-50px) !important;
  }
}
/* ===== Tighten spacing inside the hero text block ===== */
.hero-text-above *{
  margin-top: 0 !important;
}

/* مسافات أدق */
.hero-text-above .hero-eyebrow{ margin-bottom: 6px !important; }
.hero-text-above .hero-title{ margin-bottom: 10px !important; }
.hero-text-above .hero-desc{ margin-bottom: 12px !important; }

/* خلي الزر أقرب */
.hero-text-above .hero-btn{
  margin: 0 auto !important;
}

/* لو بدك البلوك كله أقرب للصورة شوي */
.hero-text-above{
  transform: translateY(-55px) !important; /* عدّلها -45 / -60 */
  padding-bottom: 0 !important;
}
/* ===== Restore hero font sizes (without adding spacing) ===== */
.hero-text-above .hero-title{
  font-size: 28px !important;   /* موبايل */
  line-height: 1.25 !important;
}

.hero-text-above .hero-desc{
  font-size: 14px !important;
}

/* تابلت */
@media (min-width: 768px){
  .hero-text-above .hero-title{
    font-size: 40px !important;
  }

  .hero-text-above .hero-desc{
    font-size: 16px !important;
  }
}

/* ديسكتوب */
@media (min-width: 1024px){
  .hero-text-above .hero-title{
    font-size: 52px !important;
  }
}
/* ===== FIX TEXT VISIBILITY ON DARK HERO ===== */

/* كل النص */
.hero-text-above,
.hero-text-above *{
  color: #f7f4ef !important;   /* أبيض دافئ */
}

/* العنوان */
.hero-text-above .hero-title{
  color: #ffffff !important;
  text-shadow:
    0 2px 6px rgba(0,0,0,0.45),
    0 0 1px rgba(255,255,255,0.2);
  font-weight: 600 !important;
}

/* الوصف */
.hero-text-above .hero-desc{
  color: #e6e2db !important;
  opacity: 1 !important;
}

/* السطر الصغير */
.hero-text-above .hero-eyebrow{
  color: #ddd7cc !important;
  letter-spacing: 1px;
}

/* الزر */
.hero-text-above .hero-btn{
  background: #0b2433 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
}
/* ===== Adaptive Hero Text for Dark Background ===== */

/* لما الخلفية تكون غامقة (الكحلي) */
.hero-dark,
.hero-dark .hero-text-above{
  color: #ffffff !important;
}

/* العنوان */
.hero-dark .hero-title{
  color: #ffffff !important;
  text-shadow:
    0 3px 8px rgba(0,0,0,0.6),
    0 0 1px rgba(255,255,255,0.25);
}

/* الوصف */
.hero-dark .hero-desc{
  color: #eaeaea !important;
  opacity: 1 !important;
}

/* السطر الصغير */
.hero-dark .hero-eyebrow{
  color: #dcdcdc !important;
}

/* الزر */
.hero-dark .hero-btn{
  background: #0b2433 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}
/* ===== AUTO: make hero text readable on any background ===== */
.hero-text-above{
  /* خلي النص يشتغل مع أي خلفية */
  mix-blend-mode: difference;
}

.hero-text-above *{
  mix-blend-mode: difference;
  color: #ffffff !important; /* مع difference رح ينقلب حسب الخلفية */
}

/* الزر خليه طبيعي (بدون blend) */
.hero-text-above .hero-btn{
  mix-blend-mode: normal !important;
  color: #fff !important;
  background: #0b2433 !important;
}
/* ===== FIX: Hero text readable in DARK THEME only ===== */
[data-theme="dark"] .hero-text-above,
[data-theme="dark"] .hero-text-above *{
  color: #ffffff !important;
  opacity: 1 !important;
}

/* العنوان أوضح */
[data-theme="dark"] .hero-text-above .hero-title{
  color: #ffffff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.65) !important;
  font-weight: 700 !important;
}

/* الوصف والسطر الصغير */
[data-theme="dark"] .hero-text-above .hero-desc,
[data-theme="dark"] .hero-text-above .hero-eyebrow{
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
}

/* الزر يكون واضح على الغامق */
[data-theme="dark"] .hero-text-above .hero-btn{
  background: #FAF7F2 !important;
  color: #0F2533 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45) !important;
}
/* ===== LIGHT THEME (فاتح) ===== */
[data-theme="light"] .hero-text-above,
[data-theme="light"] .hero-text-above *{
  color: #0f2230 !important;     /* كحلي غامق */
  opacity: 1 !important;
  text-shadow: none !important;
}

[data-theme="light"] .hero-text-above .hero-title{
  color: #0b1f2c !important;
  font-weight: 700 !important;
}

[data-theme="light"] .hero-text-above .hero-desc,
[data-theme="light"] .hero-text-above .hero-eyebrow{
  color: rgba(15,34,48,0.85) !important;
}

/* زر الفاتح */
[data-theme="light"] .hero-text-above .hero-btn{
  background: #0b2433 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
}

/* ===== DARK THEME (غامق) ===== */
[data-theme="dark"] .hero-text-above,
[data-theme="dark"] .hero-text-above *{
  color: #ffffff !important;
  opacity: 1 !important;
}

[data-theme="dark"] .hero-text-above .hero-title{
  color: #ffffff !important;
  text-shadow: 0 3px 14px rgba(0,0,0,0.65) !important;
  font-weight: 700 !important;
}

[data-theme="dark"] .hero-text-above .hero-desc,
[data-theme="dark"] .hero-text-above .hero-eyebrow{
  color: rgba(255,255,255,0.88) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.55) !important;
}

/* زر الدارك */
[data-theme="dark"] .hero-text-above .hero-btn{
  background: #FAF7F2 !important;
  color: #0F2533 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.45) !important;
}
/* =========================
   Header + Mobile Menu Theme Fix
   (Put at END of styles.css)
   ========================= */

/* LIGHT THEME */
[data-theme="light"] #header,
[data-theme="light"] header,
[data-theme="light"] .header {
  background: rgba(250, 247, 242, 0.92) !important;
  color: #0f2230 !important;
}

[data-theme="light"] #header .menu-icon,
[data-theme="light"] #header .hamburger,
[data-theme="light"] #header .menu-toggle,
[data-theme="light"] #header i,
[data-theme="light"] #header svg {
  color: #0f2230 !important;
  fill: #0f2230 !important;
}

/* موبّايل منيو / اوفكانفس */
[data-theme="light"] .menu,
[data-theme="light"] .mobile-menu,
[data-theme="light"] .nav-menu,
[data-theme="light"] .menu-panel,
[data-theme="light"] .menu.active,
[data-theme="light"] .mobile-menu.active,
[data-theme="light"] .nav-menu.active {
  background: rgba(250, 247, 242, 0.96) !important;
  color: #0f2230 !important;
}

/* روابط المنيو */
[data-theme="light"] .menu a,
[data-theme="light"] .mobile-menu a,
[data-theme="light"] .nav-menu a {
  color: #0f2230 !important;
}

/* خلفية/overlay المنيو إذا عندك */
[data-theme="light"] .menu-overlay,
[data-theme="light"] .nav-overlay,
[data-theme="light"] .overlay {
  background: rgba(15, 34, 48, 0.10) !important;
}


/* DARK THEME */
[data-theme="dark"] #header,
[data-theme="dark"] header,
[data-theme="dark"] .header {
  background: rgba(15, 34, 48, 0.92) !important;
  color: #ffffff !important;
}

[data-theme="dark"] #header .menu-icon,
[data-theme="dark"] #header .hamburger,
[data-theme="dark"] #header .menu-toggle,
[data-theme="dark"] #header i,
[data-theme="dark"] #header svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

[data-theme="dark"] .menu,
[data-theme="dark"] .mobile-menu,
[data-theme="dark"] .nav-menu,
[data-theme="dark"] .menu-panel,
[data-theme="dark"] .menu.active,
[data-theme="dark"] .mobile-menu.active,
[data-theme="dark"] .nav-menu.active {
  background: rgba(15, 34, 48, 0.96) !important;
  color: #ffffff !important;
}

[data-theme="dark"] .menu a,
[data-theme="dark"] .mobile-menu a,
[data-theme="dark"] .nav-menu a {
  color: #ffffff !important;
}

[data-theme="dark"] .menu-overlay,
[data-theme="dark"] .nav-overlay,
[data-theme="dark"] .overlay {
  background: rgba(0, 0, 0, 0.45) !important;
}
/* ===== THEME OVERRIDE (LAST): header + mobile menu follow vars ===== */

/* Header follows theme */
#header{
  background: var(--header-bg) !important;
}

/* Mobile menu follows theme */
@media (max-width: 768px){
  .nav-links{
    background: var(--header-bg) !important;
    backdrop-filter: blur(15px) !important;
  }

  .nav-links a{
    color: var(--text-primary) !important;
  }

  .nav-links a:hover,
  .nav-links a.active{
    color: var(--accent-color) !important;
  }

  /* ☰ icon follows theme */
  .menu-toggle{
    color: var(--text-primary) !important;
  }

  /* Theme toggle icon/border inside menu */
  .nav-links .theme-toggle{
    border-color: var(--text-primary) !important;
  }

  .nav-links svg{
    fill: var(--text-primary) !important;
    stroke: var(--text-primary) !important;
  }
}
/* ===== Desktop fix for hero text block ===== */
@media (min-width: 1024px){

  /* شيل أي رفع/translate خاص بالموبايل */
  .hero-text-above{
    transform: none !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
    text-align: center !important;
  }

  /* حدد عرض محتوى الهيرو وخليه بالنص */
  .hero-text-above .hero-content{
    max-width: 900px;
    margin: 0 auto;
  }

  /* العنوان ما يطلع يمين */
  .hero-text-above .hero-title{
    font-size: 56px !important;
    line-height: 1.15 !important;
    margin: 14px auto 16px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-eyebrow{
    margin: 0 auto 10px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-desc{
    margin: 0 auto 18px !important;
    max-width: 700px;
  }

  /* الزر يرجع طبيعي وبالنص */
  .hero-text-above .hero-btn{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}
/* Bigger eyebrow text */
.hero-text-above .hero-eyebrow{
  font-size: 13px !important;     /* موبايل */
  letter-spacing: 1.2px !important;
  font-weight: 600 !important;
  opacity: 0.9 !important;
}

@media (min-width: 1024px){
  .hero-text-above .hero-eyebrow{
    font-size: 16px !important;   /* لابتوب */
    letter-spacing: 1.6px !important;
  }
}
/* Desktop only: space between logo and the text next to it (safe) */
@media (min-width: 1024px){
  #header .logo{
    margin-right: 28px !important; /* زِد/قلّل حسب ما بدك */
  }

  /* إذا اللوقو صورة بدون كلاس logo، جرّب هيك كمان */
  #header img{
    margin-right: 28px !important;
  }
}
/* Desktop only: move the hamburger (3 lines) a bit away from the edge */
@media (min-width: 1024px){
  .menu-toggle{
    margin-right: 24px !important;  /* بُعده عن اليمين */
    margin-top: 6px !important;     /* نزّله/طلّعه شوي إذا بدك */
  }
}
/* ===== Desktop fix for hero text block ===== */
@media (min-width: 1024px){

  /* شيل أي رفع/translate خاص بالموبايل */
  .hero-text-above{
    transform: none !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
    text-align: center !important;
  }

  /* حدد عرض محتوى الهيرو وخليه بالنص */
  .hero-text-above .hero-content{
    max-width: 900px;
    margin: 0 auto;
  }

  /* العنوان ما يطلع يمين */
  .hero-text-above .hero-title{
    font-size: 56px !important;
    line-height: 1.15 !important;
    margin: 14px auto 16px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-eyebrow{
    margin: 0 auto 10px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-desc{
    margin: 0 auto 18px !important;
    max-width: 700px;
  }

  /* الزر يرجع طبيعي وبالنص */
  .hero-text-above .hero-btn{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}
/* ===== Desktop fix for hero text block ===== */
@media (min-width: 1024px){

  /* شيل أي رفع/translate خاص بالموبايل */
  .hero-text-above{
    transform: none !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
    text-align: center !important;
  }

  /* حدد عرض محتوى الهيرو وخليه بالنص */
  .hero-text-above .hero-content{
    max-width: 900px;
    margin: 0 auto;
  }

  /* العنوان ما يطلع يمين */
  .hero-text-above .hero-title{
    font-size: 56px !important;
    line-height: 1.15 !important;
    margin: 14px auto 16px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-eyebrow{
    margin: 0 auto 10px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-desc{
    margin: 0 auto 18px !important;
    max-width: 700px;
  }

  /* الزر يرجع طبيعي وبالنص */
  .hero-text-above .hero-btn{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}
.hero-book-btn{
  margin-left: 10px;
  background: #faf7f2 !important;
  color: #0b2433 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}

@media (max-width: 768px){
  .hero-book-btn{
    display: inline-block;
    margin-left: 0;
    margin-top: 12px;
  }
}

.package-book-btn{
  display: inline-block;
  margin-top: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #0b2433;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18);
}
/* تحسين شكل الزرين */
.hero-book-btn{
  margin-top: 14px !important;
}

/* لابتوب: جنب بعض */
@media (min-width: 1024px){
  .hero-book-btn{
    margin-left: 12px !important;
    margin-top: 0 !important;
  }
}
/* Bigger buttons on laptop/desktop */
@media (min-width: 1024px){
  .hero-btn{
    font-size: 16px !important;
    padding: 16px 34px !important;
  }

  .hero-book-btn{
    margin-top: 18px !important; /* إذا بدك بينهن مسافة */
  }
}
/* Perfect desktop hero layout */
@media (min-width: 1024px){

  .hero-text-above{
    text-align: center !important;
  }

  .hero-text-above .hero-title{
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1100px !important;
  }

  .hero-text-above .hero-desc{
    max-width: 720px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Bigger buttons + closer together */
  .hero-btn{
    font-size: 17px !important;
    padding: 16px 40px !important;
  }

  .hero-book-btn{
    margin-top: 14px !important; /* بدل ما تكون بعيدة */
  }
}
/* Bigger eyebrow + description on laptop */
@media (min-width: 1024px){
  .hero-text-above .hero-eyebrow{
    font-size: 18px !important;
    letter-spacing: 1.8px !important;
    font-weight: 600 !important;
  }

  .hero-text-above .hero-desc{
    font-size: 18px !important;
    line-height: 1.8 !important;
    max-width: 900px !important;
  }
}
/* ===== Desktop fix for hero text block ===== */
@media (min-width: 1024px){

  /* شيل أي رفع/translate خاص بالموبايل */
  .hero-text-above{
    transform: none !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
    text-align: center !important;
  }

  /* حدد عرض محتوى الهيرو وخليه بالنص */
  .hero-text-above .hero-content{
    max-width: 900px;
    margin: 0 auto;
  }

  /* العنوان ما يطلع يمين */
  .hero-text-above .hero-title{
    font-size: 56px !important;
    line-height: 1.15 !important;
    margin: 14px auto 16px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-eyebrow{
    margin: 0 auto 10px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-desc{
    margin: 0 auto 18px !important;
    max-width: 700px;
  }

  /* الزر يرجع طبيعي وبالنص */
  .hero-text-above .hero-btn{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}
/* ===== Desktop fix for hero text block ===== */
@media (min-width: 1024px){

  /* شيل أي رفع/translate خاص بالموبايل */
  .hero-text-above{
    transform: none !important;
    padding-top: 28px !important;
    padding-bottom: 18px !important;
    text-align: center !important;
  }

  /* حدد عرض محتوى الهيرو وخليه بالنص */
  .hero-text-above .hero-content{
    max-width: 900px;
    margin: 0 auto;
  }

  /* العنوان ما يطلع يمين */
  .hero-text-above .hero-title{
    font-size: 56px !important;
    line-height: 1.15 !important;
    margin: 14px auto 16px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-eyebrow{
    margin: 0 auto 10px !important;
    max-width: 900px;
  }

  .hero-text-above .hero-desc{
    margin: 0 auto 18px !important;
    max-width: 700px;
  }

  /* الزر يرجع طبيعي وبالنص */
  .hero-text-above .hero-btn{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
  }
}
 











/* ===== Fix hero layout on desktop (stop breaking) ===== */
@media (min-width: 1024px){

  /* خلي البلوك كله بالنص وما يتقسم عمودين */
  .hero-text-above{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }

  /* عنوان ووصف */
  .hero-text-above .hero-title{
    max-width: 980px !important;
    margin: 14px auto 18px !important;
  }

  .hero-text-above .hero-desc{
    max-width: 720px !important;
    margin: 0 auto 22px !important;
  }

  /* الزرين جنب بعض */
  .hero-text-above .hero-actions{
    display: flex !important;
    gap: 14px !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* إذا ما عندك div اسمه hero-actions، خلّي الأزرار نفسها تنضب */
  .hero-btn, .hero-book-btn{
    margin: 0 !important;
  }

  /* كبّر شوي */
  .hero-btn{
    font-size: 16px !important;
    padding: 16px 34px !important;
  }
}
/* ===== FIX DARK THEME (keep LIGHT as-is) ===== */

/* الدارك: خلفية + نصوص واضحة */
html[data-theme="dark"] body{
  background: #081e2c !important;
  color: #ffffff !important;
}

/* الهيرو بالدارك */
html[data-theme="dark"] .hero-text-above{
  background: radial-gradient(circle at 50% 40%, #163a51 0%, #081e2c 70%, #061823 100%) !important;
}

/* النصوص بالدارك */
html[data-theme="dark"] .hero-text-above .hero-title,
html[data-theme="dark"] .hero-text-above .hero-eyebrow,
html[data-theme="dark"] .hero-text-above .hero-desc{
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 6px 22px rgba(0,0,0,0.45) !important;
}

/* إذا في طبقة overlay/blur كانت مخربة الدارك */
html[data-theme="dark"] .hero-text-above::before,
html[data-theme="dark"] .hero-text-above::after,
html[data-theme="dark"] .overlay,
html[data-theme="dark"] .hero-overlay{
  background: transparent !important;
  opacity: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* الأزرار بالدارك */
html[data-theme="dark"] .hero-btn{
  background: #ffffff !important;
  color: #081e2c !important;
}
html[data-theme="dark"] .hero-book-btn{
  background: #ffffff !important;
  color: #081e2c !important;
}
/* Put both buttons together on desktop */
@media (min-width: 1024px){
  .hero-btn,
  .hero-book-btn{
    display: inline-block !important;
    margin: 0 10px !important;
    vertical-align: middle;
  }

  /* خلي Book Now ما يروح لليسار */
  .hero-book-btn{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
  }

  /* خلي مكانهم بالنص تحت النص */
  .hero-text-above{
    text-align: center !important;
  }
}
@media (min-width: 1024px){
  .hero-actions{
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
  }
  .hero-actions .hero-btn,
  .hero-actions .hero-book-btn{
    margin: 0 !important;
  }
}