/* Universal Box-Sizing */
*, *::before, *::after {
  box-sizing: border-box;
}

.hero {
  position: relative;
  z-index: 10;
}

/* Root Variables */
:root {
  --gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFC700 15%, #FFB300 30%, #FF9A00 45%, #FF8000 60%, #B8860B 75%, #8B6508 90%, #FFD700 100%);
  --background: linear-gradient(45deg, #ffffff, #e6e6e6); /* Advanced white gradient background */
  --text-color: #f0f0f0;
  --accent-color: #FFD700;
  --primary-font: 'Montserrat', sans-serif;
  --secondary-font: 'Montserrat', sans-serif;
}

/* Global Base Styles */
body {
  margin: 0;
  padding: 0;
  background: var(--background);
  font-family: var(--primary-font);
  overflow-x: hidden;
  line-height: 1.6;
}

/* منع تمرير الصفحة عند فتح القائمة */
body.nav-open {
  overflow: hidden !important;
}

/* Set all text elements (except h1) to black */
h2, h3, h4, h5, h6, p, li, span {
  color: #000 !important;
  background: none !important;
  -webkit-text-fill-color: #000 !important;
}

/* Ensure hover state for text elements remains black */
h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, p:hover, li:hover, span:hover {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
}

/* Base styling for hero-content h1 (Desktop default) */
.hero-content h1 {
  font-family: 'Barlow', sans-serif;  /* Using the Barlow font */
  color: #fff;
  font-size: 48px;             /* Desktop size in pixels */
  margin-top: 0;
  position: relative;
  top: -100px;                /* Adjust vertical position */
  text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
  /* Animation: scales up, shifts up, and fades out over 3 seconds */
  animation: advancedFadeOut 3s forwards;
}

/* Improve text readability in the hero section for other elements */
.hero-content > * {
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

/* -------------------------------------------
   New Hero Content Animation for Paragraph and Button
--------------------------------------------- */
body #main-content .hero-content p {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  animation: advancedFadeOut 3s forwards;
  animation-delay: 3s;
}

.hero-content a.cta-button {
  color: #fff !important;
  animation: advancedFadeOut 3s forwards;
  animation-delay: 3s; /* Start after h1 animation */
}

/* -------------------------------------------
   Header & Navigation
--------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0,0,0,0.85);
  padding: 15px 20px;
  z-index: 10003;
  backdrop-filter: blur(8px);
  transition: background 0.4s ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
}
.site-header .logo a {
  font-size: 2rem;
  font-weight: bold;
  display: inline-block;
  cursor: pointer;
  background: var(--gold-gradient);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.7));
  animation: shimmer 2.5s linear infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.main-navigation ul {
  list-style: none;
  display: flex;
  margin: 0;
  padding: 0;
}
.main-navigation li {
  margin-left: 30px;
  position: relative;
}

/* تعديل تأثير hover على روابط القائمة */
.main-navigation li a {
  position: relative;
  z-index: 1; /* لضمان ظهور النص فوق التأثير */
  display: inline-block;
  padding: 14px 32px;
  font-size: 1.3rem;
  border-radius: 4px;  /* شكل مستطيلي أكثر */
  border: 2px solid transparent;  /* حد شفاف في الحالة العادية */
  background: transparent;
  color: #fff !important;
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.main-navigation li a::before {
  content: "";
  position: absolute;
  z-index: -1;  /* التأثير خلف النص */
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(192,192,192,0.3), transparent);
  transition: all 0.6s ease;
}
.main-navigation li a:hover {
  transform: scale(1.05);
  border-color: #C0C0C0; /* لون فضي */
  box-shadow: 0 4px 10px rgba(192,192,192,0.5);
}
.main-navigation li a:hover::before {
  left: 100%;
}

/* ضمان أن كل النص داخل القائمة أبيض باستخدام قواعد ذات خصوصية أعلى */
.main-navigation li a, 
.main-navigation li a * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* -------------------------------------------
   Footer
--------------------------------------------- */

/* -------------------------------------------
   Main Content Animation
--------------------------------------------- */
#main-content {
  animation: fadeIn 1.5s ease-in-out forwards;
  position: relative;
  z-index: 1;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* -------------------------------------------
   Hero Section – Background
--------------------------------------------- */
.hero {
  height: 100vh;
  position: relative;
  background: url('images/header.png') no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.hero-content {
  position: relative;
  text-align: center;
  z-index: 3;
  padding: 0 20px;
}

/* -------------------------------------------
   Hero Section – Video Styling
--------------------------------------------- */
.hero video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

@media (min-width: 769px) {
  .hero video {
    height: 100%;   /* يساوي ارتفاع قسم الـ hero */
    width: auto;    /* يتم حساب العرض تلقائيًا للحفاظ على النسبة */
    left: 50%;
    transform: translateX(-50%);
  }
}

/* -------------------------------------------
   Golden Logo in Hero Section
--------------------------------------------- */
.golden-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.golden-logo img {
  max-width: 300px;
  height: auto;
  filter: drop-shadow(0px 4px 10px rgba(255, 215, 0, 0.8));
  animation: goldShine 3s infinite alternate;
}
@keyframes goldShine {
  0% { filter: drop-shadow(0px 4px 10px rgba(255, 215, 0, 0.8)); }
  100% { filter: drop-shadow(0px 6px 20px rgba(255, 215, 0, 1)); }
}

/* -------------------------------------------
   CTA Button – Advanced Gold Shine Effect
--------------------------------------------- */
.cta-button {
  display: inline-block;
  padding: 14px 32px;
  font-size: 1.3rem;
  border-radius: 50px;
  border: 2px solid var(--accent-color);
  background: transparent;
  color: #000;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.cta-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: all 0.6s ease;
}
.cta-button:hover {
  transform: scale(1.05);
}
.cta-button:hover::before {
  left: 100%;
}

/* -------------------------------------------
   Sections – Layout & Glassmorphism
--------------------------------------------- */
.section {
  padding: 90px 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.glass-section {
  background: rgba(255,255,255,0.08);
  border-radius: 15px;
  backdrop-filter: blur(12px);
  padding: 30px;
  border: 1px solid rgba(255,215,0,0.4);
  margin: 0 auto;
  max-width: 900px;
  transition: transform 0.5s ease;
}
.glass-section:hover {
  transform: translateY(-5px);
}
.section h2 {
  font-size: 2.8rem;
  margin-bottom: 30px;
  background: var(--gold-gradient);
  background-size: 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.7));
  transition: all 0.4s ease;
}
.section h2::after {
  content: "";
  display: block;
  margin: 8px auto 0;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
}
.section p {
  font-size: 1.2rem;
  max-width: 800px;
  margin: 0 auto 40px;
}

/* -------------------------------------------
   Testimonials – Elegant & Minimal
--------------------------------------------- */
.testimonials {
  background: var(--background);
  padding: 60px 20px;
}
.testimonials .testimonial-item {
  display: inline-block;
  width: calc(33.333% - 40px);
  margin: 0 20px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,215,0,0.5);
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.testimonials .testimonial-item img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 15px;
  object-fit: cover;
}
.testimonials .testimonial-item p,
.testimonials .testimonial-item h3 {
  font-size: 0.95rem;
}

/* -------------------------------------------
   Contact Form
--------------------------------------------- */
.contact-form {
  background: var(--background);
  padding: 50px 20px;
  border-radius: 10px;
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border: 2px solid #444;
  border-radius: 5px;
  background: #222;
  color: var(--text-color);
}
.contact-form input[type="submit"] {
  background: transparent;
  border: 2px solid var(--accent-color);
  cursor: pointer;
  color: var(--text-color);
  transition: background 0.3s ease;
}
.contact-form input[type="submit"]:hover {
  background: rgba(255,215,0,0.2);
}

/* -------------------------------------------
   Wine Cards – Advanced Layout using CSS Grid
--------------------------------------------- */
.wine-cards-container, .wine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
.wine-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--accent-color);
  border-radius: 10px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-style: preserve-3d;
}
.wine-card:hover {
  transform: perspective(1000px) rotateX(3deg) rotateY(3deg) scale(1.03);
  box-shadow: 0 8px 20px rgba(255,215,0,0.3);
}
.wine-card img {
  width: 100%;
  border-radius: 10px;
  margin-bottom: 15px;
  transition: transform 0.3s ease;
}
.wine-card:hover img {
  transform: scale(1.05);
}
@keyframes glow {
  0% { box-shadow: 0 0 3px var(--accent-color), 0 0 8px var(--accent-color), 0 0 15px var(--accent-color); }
  50% { box-shadow: 0 0 5px var(--accent-color), 0 0 12px var(--accent-color), 0 0 20px var(--accent-color); }
  100% { box-shadow: 0 0 3px var(--accent-color), 0 0 8px var(--accent-color), 0 0 15px var(--accent-color); }
}

/* -------------------------------------------
   Lively Golden Gradient Text (Welcome Text)
--------------------------------------------- */
.lively-heading {
  font-size: 4rem;
  text-transform: uppercase;
  font-weight: bold;
  background: var(--gold-gradient);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease-in-out infinite, pulse 2s infinite;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
  margin-bottom: 20px;
}

.lively-subheading {
  font-size: 1.8rem;
  font-weight: 500;
  background: var(--gold-gradient);
  background-size: 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 3s ease-in-out infinite;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
  margin-bottom: 20px;
}

@keyframes gradientShift {
  0% { background-position: 0%; }
  50% { background-position: 100%; }
  100% { background-position: 0%; }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* -------------------------------------------
   Responsive Design Adjustments
--------------------------------------------- */
/* Keyframes for the advanced animation */
@keyframes advancedFadeOut {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  50% {
    opacity: 1;
    transform: scale(1.1) translateY(-10px);
  }
  100% {
    opacity: 0;
    transform: scale(1.2) translateY(-20px);
  }
}

/* Smartphone styles (max-width: 480px) */
@media (max-width: 480px) {
  .hero-content h1 {
    font-size: 24px;         /* Smaller font size for mobile devices */
    top: -50px;              /* Adjust vertical position */
  }
}

/* Tablet styles (min-width: 481px and max-width: 1024px) */
@media (min-width: 481px) and (max-width: 1024px) {
  .hero-content h1 {
    font-size: 36px;         /* Medium font size for tablets */
    top: -70px;              /* Adjust vertical position */
  }
}

/* Desktop styles (min-width: 1025px) */
@media (min-width: 1025px) {
  .hero-content h1 {
    font-size: 48px;         /* Larger font size for desktops */
    top: -100px;             /* Adjust vertical position */
  }
}
  .section h2 {
    font-size: 2rem;
  }
  .section {
    padding: 50px 10px;
  }
  .main-navigation li {
    margin-left: 15px;
  }
  .main-navigation li a {
    padding: 10px 20px;
    font-size: 1.1rem;
    animation: navFadeIn 0.5s ease-in-out;
  }
}

@media (max-width: 480px) {
  .wine-card {
    padding: 0 15px;
  }
}

@keyframes navFadeIn {
  0% { opacity: 0; transform: translateY(-10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------
   Updated Responsive Navigation for Smartphones
--------------------------------------------- */
/* زر القائمة للأجهزة الصغيرة - أيقونة ثلاث خطوط بسيطة */
.menu-toggle {
  display: none;
  font-size: 40px; /* حجم أيقونة الهامبرغر */
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  position: fixed;
  top: calc(15px + env(safe-area-inset-top));
  right: calc(20px + env(safe-area-inset-right));
  z-index: 1100;
}

@media screen and (max-width: 768px) {
  .menu-toggle {
    display: block;
  }
  
  .nav-links {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* تغطية كامل الشاشة */
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000;
  }

  .nav-links.show {
    display: flex !important;
  }
}

.wing {
    display: block;
    margin: 20px auto; /* centers the image */
    max-width: 100%;
    height: auto;
}

/* -------------------------------------------
Moving Brands
--------------------------------------------- */
/* ————————————————————————————————
   Advanced Moving Brands Marquee
   ———————————————————————————————— */
.moving-brands {
  position: relative;
  z-index: 10001;
  overflow: hidden;
  white-space: nowrap;
  padding: 40px 0;
  background-color: #000;
  width: 100%;
}

/* gap between loops */
.brands-track {
  display: flex;
  gap: 100px;
  animation: scrollBrands 30s linear infinite;
  width: max-content;
  will-change: transform;
}

.brands-items {
  display: flex;
  gap: 80px;
  align-items: center;
}

/* ensure BOTH spans and links use the same thin font */
.brands-items span,
.brands-items a {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 300 !important;    /* try 200 or 100 for even thinner */
  font-size: 2rem !important;
  letter-spacing: 0.05em !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 1px 1px 4px rgba(255,255,255,0.2) !important;
  white-space: nowrap;
  text-decoration: none !important;  /* remove underline */
}

/* animation */
@keyframes scrollBrands {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

/* responsive */
@media (max-width: 1024px) {
  .moving-brands { padding: 30px 0; }
  .brands-track  { gap: 80px; }
  .brands-items  { gap: 60px; }
  .brands-items span,
  .brands-items a { font-size: 1.6rem !important; }
}

@media (max-width: 768px) {
  .moving-brands { padding: 25px 0; }
  .brands-track  { gap: 60px; }
  .brands-items  { gap: 40px; }
  .brands-items span,
  .brands-items a { font-size: 1.4rem !important; }
}

/* ────────────────────────────────────────────────────────────────────────────
   99. KONTAKT-PAGE OVERRIDES (must come last)
   ──────────────────────────────────────────────────────────────────────────── */

/* Kill your global “all text black” on Kontakt page */
.kontakt-contact-section h2,
.kontakt-contact-section h3,
.kontakt-contact-section h4,
.kontakt-contact-section p,
.kontakt-contact-section li,
.kontakt-contact-section span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
}

/* Links and form labels/placeholders */
.kontakt-contact-section a,
.kontakt-contact-section label,
.kontakt-contact-section ::placeholder {
  color: #fff !important;
  opacity: 1 !important;
}

/* Panels remain dark */
.kontakt-contact-form,
.kontakt-contact-details {
  background-color: #111 !important;
}

/* Ensure the section itself is solid black */
.kontakt-contact-section {
  background-color: #000 !important;
}

.kontakt-contact-details h2,
.kontakt-contact-details h3,
.kontakt-contact-details h4,
.kontakt-contact-details h5,
.kontakt-contact-details h6,
.kontakt-contact-details p,
.kontakt-contact-details li,
.kontakt-contact-details span {
  color: #fff !important; /* اللون اللي تبغاه */
}


.kontakt-contact-form,
.kontakt-contact-details {
  background-color: #000 !important;
  border: none !important;
  box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
}


.content-ssection p,
.content-ssection li,
.aboutus-cta-buttons .cta-button,
.section-dark *,
.content-ssection h2,
.content-ssection h3,
.timeline-content,
blockquote {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}