
/* Settings */

:root {
  --spacing-6-6: 6.6%; /* Heade Section Padding 6.6% */
  --spacing-93-4: 93.4%; /* Hero Section Height 93.4%, the remaining after  --spacing-6-6 */
}
/* Settings */

/* Mobile Nav-Bar */

.mobile-nav {
  display: none;
  font-family: "Almarai", sans-serif;
  position: absolute;
  top: 128px; /* Same height as header */
  right: 0;
  width: 100%;
  background-color: rgba(var(--primary-blue-dark), 0.95);
  padding: 20px 0;
  text-align: center;
  z-index: 99;
}

.mobile-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav li {
  margin: 10px 0;
}

.mobile-nav a {
  text-decoration: none;
  color: white;
  font-size: 18px;
}

/* padding under the first menue mobile-nav */
.li-dwn-paddng {
  padding-bottom: 5px;
}

@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }
}

/* Mobile Nav-Bar */


/* Main */

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body, html {
  font-family: sans-serif;
  height: 100%;
  background-color: transparent;
}

/* Container wrapper */
.container {
  width: 100%;
  overflow-x: hidden;
}


/* ✅ Hero Section */
.div-hero-section {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 128px; /* Check Settings @css/settings.css*/
}

/* Video background */
.video-bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Bottom section inside hero */
.div-bottom-section {
  background-color: rgba(var( --primary-blue-light), 0.59);  /* ✅ 59% opacity */
  position: relative;   /* ✅ Makes it a stacking context */
  z-index: 1;           /* ✅ Places it above the video */
  display: flex;
  width: 100%;
  height: 100%;
}

.div-statistics-section,
.div-identity-section {
  width: 50%;
  height: 100%;
}


.div-identity-section {
  display: flex;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  align-items: center; /* ⬅️ vertical alignment */
  justify-items: center; /* ⬅️ horizontal alignment */
}


.div-business-name {

  font-family: "Almarai", sans-serif;
  font-size: 52px;
  text-shadow: 0 5px 0 #55adc1;
  font-weight: 700;
  color: white;
}

.div-business-activity {

  font-family: "Almarai", sans-serif;
  font-size: 42px;
  text-shadow: 0 5px 0 #825f00;
  font-weight: 700;
  color: white;
}


.div-statistics-section {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Content section after hero */
.div-content-section {
  width: 100%;
  height: 600px;
  background-color: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #333;
}

/* main */


/* Header */
/* ✅ Fixed Header */
.div-header-section {
  position: fixed;                           /* Always stick to top */
  top: 0;
  left: 0;
  width: 100%;
  height: 128px; /* Check Settings @css/settings.css*/
  background-color: rgba(var( --primary-blue-light), 0.59);  /* ✅ 59% opacity */
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 100;                              /* Float above all */
  transition: background-color 0.3s ease;    /* Smooth transition */
}

/* ✅ Background color after scroll */
.div-header-section.scrolled {
  background-color: rgba(var( --primary-blue-dark), 1);  /* ✅ 100% opacity */
}

/* Header inner layout */
.header-content {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 15 equal fractions */
  align-items: center;
  width: 100%;
  margin: 0 auto;
  direction: rtl;         /* already assumed from <html dir="rtl"> */
  grid-auto-flow: dense;  /* optional: fills spaces more efficiently */
}

.aldarbi-logo {
  grid-column: 1 / span 3;
  justify-self: center;
}

.injected-logo {
  width: 100px;
  height: auto;
}


/* Navbar */

.navbar {
  grid-column: 5 / span 4; /* Occupies columns 8 to 13 */
  justify-self: center;              /* Align the navbar to the right inside its grid cell */
  font-family: "Almarai", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px); /* Responsive font size */
  font-style: normal;
}


.navbar ul {
  display: flex;
  /*justify-content: flex-start;*/
  padding: 0;
  margin: 0;
  list-style: none;
}

.navbar li {
  margin-left: 20px;
}

.navbar a {
  text-decoration: none;
  color: white;
  font-weight: 600;
}

.navbar a:hover {
  color: grey;
}

/* Hamburger Menu */

.hamburger-menu {
  display: none;              /* Hidden by default */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 32px;
  cursor: pointer;
  gap: 5px;
  grid-column: 10 / span 2;
  justify-self: start;
}

.hamburger-menu span {
  display: block;
  width: 100%;
  height: 4px;
  background-color: white;
  border-radius: 2px;
}

/* Mobile (phones) */
@media (max-width: 480px) {
  .navbar {
    display: none;            /* Hide full nav on small screens */
  }

  .hamburger-menu {
    display: flex;            /* Show hamburger only on small screens */
  }
  
}


/* Tablets (iPads) */
@media (max-width: 768px) {
  .navbar {
    display: none;            /* Hide full nav on small screens */
  }

  .hamburger-menu {
    display: flex;            /* Show hamburger only on small screens */
  }

  .div-bottom-section {
    flex-direction: column;
    height: auto; /* Let it grow based on content */
  }

  .div-identity-section,
  .div-statistics-section {
    width: 100%;
    height: 50vh; /* Each takes half of the screen height */
  }

  .div-identity-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; /* space between name and activity */
  }

  .div-business-name,
  .div-business-activity {
    font-size: 36px;
    text-align: center;
  }

  .div-statistics-section {
    display: flex;
    align-items: center;
    justify-content: center;
  }


}


/* Small Laptops */
@media (max-width: 1024px) {

  
}


/* color pallete */
:root {
  /* How to use this colors? */
  /* example: background-color: rgba(var( --primary-blue-light), 0.1);  /* ✅ 10% opacity */
  --primary-white-plain: 234, 235, 237;  /* No rgba(), just the values */
  --primary-blue-dark: 40, 54, 127;  /* No rgba(), just the values */
  --primary-blue-light: 16, 76, 186;  /* No rgba(), just the values */
  --primary-grey-dark: 146, 147, 149;  /* No rgba(), just the values */
  --primary-grey-light: 177, 182, 199;  /* No rgba(), just the values */
}
/* Color Pallete */