@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Cairo:wght@400&display=swap');
body {
  margin: 0;
  font-family: 'Montserrat', Arial, sans-serif;
  color: #fff;
}
@media (max-width: 425px) {
  .slogan-second-line {
        padding-left: 0px !important;
  }

}
/* Thin line at the very top */
.top-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  background-color: #686C5E;
  z-index: 10;
}

/* Header with logo and menu */
/* Default transparent header without shade */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 100;
  background-color: transparent !important; /* Fully transparent */
  box-shadow: none !important; /* No shadow at the top */
}


/* When sticky (on scroll), make it solid white */
.header.sticky {
  
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}



.header.sticky .menu a {
  color: #2F353B;
}

.header.sticky .extra a {
  color: #2F353B;
}

.header.sticky .logo img {
  content: url('../images/logo.png');
}
.header.sticky .logo img {
  width: 130px; /* أو أي حجم يناسبك */
  transition: all 0.3s ease;
}

/* Logo */
.logo img {
  width: 200px;
  transition: all 0.3s ease;
}
/* Animated Glowing Effect */
@keyframes glowing {
  0% { 
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); 
  }
  50% { 
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8)); 
  }
  100% { 
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4)); 
  }
}

/* Extra elements (Search bar and العربية) */
    .extra {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: auto; /* Push to the far right */
        padding-right: 20px; /* Add padding from the right edge */
    }

    .extra a {
        text-decoration: none;
        color: #fff;
        font-size: 18px;
        font-family: 'Cairo', sans-serif;
        transition: color 0.3s ease;
    }

    .extra .search-icon {
        font-size: 22px;
        cursor: pointer;
        color: #fff;
    }

    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 40px;
        box-sizing: border-box;
        background-color: rgba(0, 0, 0, 0.05); /* 5% transparent background */
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }

    .header.sticky {
        background-color: #fff; /* Solid white background on scroll */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow for sticky state */
    }

    .header.sticky .extra a {
        color: #2F353B; /* Change text color for sticky */
    }

    .header.sticky .extra .search-icon {
        color: #2F353B; /* Change search icon color for sticky */
    }
    /* Bonyan Section with Video Embed */
  .bonyan-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: url('images/pattern.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed; /* Parallax effect */
    background-color: #2F353B;
    padding: 100px 10%;
    color: #fff;
  }

  .bonyan-content {
    width: 50%; /* Adjust width for better harmony */
  }

  .bonyan-section h1 {
    font-size: 42px;
    font-weight: bold;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    margin-bottom: 20px;
  }

  .bonyan-section p {
    font-size: 20px;
    line-height: 1.8;
    font-family: 'Montserrat', sans-serif;
    text-align: justify;
  }

  .bonyan-video {
  position: relative;
  width: 48%; /* Adjust width */
  aspect-ratio: 16 / 9; /* Maintain aspect ratio */
  background-color: #000; /* Fallback color for the container */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Add shadow for depth */
  overflow: hidden; /* Clip any overflow */
}

.bonyan-video iframe {
  width: 100%;
  height: 100%;
  border: none;
  position: relative;
  z-index: 1; /* Ensure the video is above the gradient */
}

.bonyan-video::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 30%; /* Height of the gradient overlay */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #2F353B 100%);
  z-index: 2; /* Place it above the video */
  pointer-events: none; /* Allow user interaction with the video */
}

/* Apply glow animation to the logo */
.logo img {
  width: 200px;
  transition: all 0.3s ease;
  animation: glowing 2s infinite alternate ease-in-out;
}

/* Menu */
.menu {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-grow: 1;
}
.menu ul#primary-menu,  ul#footer-menu {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-grow: 1;
  list-style: none;
}

.menu a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  transition: color 0.3s ease;
}

/* Extra elements (Search bar and العربية) */
.extra {
  display: flex;
  align-items: center;
  gap: 15px;
}

.extra a {
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-family: 'Cairo', sans-serif;
  transition: color 0.3s ease;
}

.extra .search-icon {
  font-size: 22px;
  cursor: pointer;
  color: #fff;
}

/* Fullscreen Video Background */
.video-container {
  position: relative; /* Use relative so content starts after video */
  width: 100%;
  height: 100vh; /* Fullscreen */
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* Push it to the background */
}

.video-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35vh; /* Adjust the height for a smoother transition */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #2F353B 100%);
  z-index: 2;
  pointer-events: none; /* Ensures no interaction issues */
}


.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4); /* Dark overlay for contrast */
  z-index: 1;
}

/* Ensure content starts **after** the video */
.main-content {
  position: relative;
  z-index: 2; /* Keeps content above video */
  background-color: #fff;
  min-height: 100vh;
  padding-top: 100px; /* Adjusted padding */
}

/* Middle Image */
.middle-image {
  position: absolute;
  bottom: -40px;
  right: -40px;
  transform: none;
  z-index: 10;
  pointer-events: none;
}

.middle-image img {
  max-width: 250px;
  opacity: 0.5;
}

@media (max-width: 768px) {
  .middle-image {
    position: absolute !important;
    right: 0 !important;
    bottom: -20px !important;  /* نزلناها أكتر */
    width: 160px !important;
    height: auto !important;
    transform: none !important;
    z-index: 5;
  }

  .middle-image img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain;
    opacity: 0.4;
    display: block;
  }
}





/* Slogan */
.slogan {
  position: absolute;
  bottom: 40px;
  left: 40px;
  font-size: 60px;
  font-weight: medium;
  line-height: 1.2;
  color: #fff;
  z-index: 10;
  font-family: 'Montserrat', sans-serif;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
  max-width: calc(100% - 80px);
  word-wrap: break-word;
}

.slogan .highlight {
  font-family: 'Dancing Script', cursive;
  font-size: 60;
  color: #fff;
  position: relative;
  display: inline-block;
}

.slogan .highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 5px;
  background-color: #8D948D;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease-in-out;
}

.slogan .highlight:hover::after {
  transform: scaleX(1);
}

.slogan-second-line {
  display: inline-block;
  padding-left: 180px; /* Adjust the value to align perfectly */
}


/* Full-width Bonyan section */
.bonyan-section {
  background: url('images/pattern.png') no-repeat center center;
  background-size: cover;
  background-color: #2F353B;
  padding: 100px 20px;
  color: #fff;
}

.bonyan-section h1 {
  font-size: 42px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  text-align: left;
  margin-bottom: 20px;
  margin-left: 10%;
}

.bonyan-section p {
  font-size: 20px;
  line-height: 1.8;
  max-width: 80%;
  margin: 0 auto;
  font-family: 'Montserrat', sans-serif;
  text-align: justify;
}

.section-subtitle {
  font-size: 14px;
  color: #686C5E;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 5px;  /* Keep the subtitle close to the title */
  text-align: left;
}

/* Line Under Section Titles */
.section-title {
  position: relative;
  font-size: 42px;
  font-weight: bold;
  font-family: 'Montserrat', sans-serif;
  color: #2F353B;
  margin-top: 0;       /* Remove extra space above the title */
  margin-bottom: 20px; /* Space below the title for the line */
  text-align: left;
}

/* Underline Effect */
.section-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 5px;
  background-color: #2F353B;
  margin-top: 5px;     /* Space between the title and the line */
}
/* General Style for Section Buttons */
.section-button {
  background-color: #2F353B;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
  border-radius: 5px;
  display: inline-block;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  position: absolute;
  bottom: 20px; /* Align to bottom */
  right: 20px; /* Align to the right */
}

/* Hover Effect for Section Buttons */
.section-button:hover {
  background-color: #686C5E;
  transform: scale(1.05);
}

/* Specific Section Adjustments */
.bonyan-section .section-button {
  position: static; /* Adjust if needed */
  margin-top: 20px;
}

.news-section .section-button {
  position: relative;
  display: inline-block;
  margin-top: 10px;
}

.vision-section .section-button {
  position: relative;
  margin-top: 20px;
}

.footer {
  background-color: #000;
  color: #ccc;
  padding: 30px 10%;
  font-family: 'Montserrat', sans-serif;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.footer-logo img {
  max-width: 150px;
}

.footer-menu {
  text-align: center;
}

.footer-menu a {
  margin: 0 15px;
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-menu a:hover {
  color: #FFD700; /* أصفر مثل لون اللوجو */
}

.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  color: #ccc;
  font-size: 20px;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-social a:hover {
  color: #FFD700;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  border-top: 1px solid #333;
  padding-top: 15px;
}

.footer-logo-text {
  flex: 1;
  text-align: left;
  font-size: 12px;
}

.footer-links {
  flex: 1;
  text-align: center;
}

.footer-links a {
  margin: 0 10px;
  color: #ccc;
  text-decoration: none;
  font-size: 12px;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #FFD700;
}

.footer-designed {
  flex: 1;
  text-align: right;
  font-size: 12px;
}

.footer-designed a.footer-link {
  color: #888;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-designed a.footer-link:hover {
  color: #FFD700;
  text-decoration: underline;
}

}
/* hide on desktop, show on mobile */
.hamburger { display: none !important; }
@media (max-width: 992px) {
  .bonyan-tabs-menu {padding: 8px !important;justify-content: center !important;}
  .hamburger { display: block !important; border: none !important; background: transparent !important;
        outline: none !important; }
  .contact-buttons {gap:10px !important;}
  .contact-button{padding: 12px 5px !important;
    font-size: 13px !important;}
}
/* ───── Mobile Burger override ───── */
@media (max-width: 992px) {
  /* hide the desktop nav by default */
  .menu,
  .extra {
    display: none !important;
  }
  /* show only when the burger adds .active */
  .menu.active,
  .extra.active {
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}
/* ───── Mobile Burger Menu Styling ───── */
@media (max-width: 992px) {
  /* Position the opened menu full-width, dark background */
  .menu.active,
  .extra.active {
    position: absolute;
    top: 70px; /* adjust to sit just below your header */
    left: 0;
    width: 100%;
    background: #333; /* dark grey */
    color: #fff;
    z-index: 200;
    padding: 20px 0;
    display: flex !important;
    flex-direction: column;
    align-items: center;
  }

  /* Main menu items (ul#primary-menu) as a vertical list */
  .menu.active ul#primary-menu {
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .menu.active ul#primary-menu li {
    margin: 10px 0;
  }
  .menu.active ul#primary-menu a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
  }

  /* Separator line before the extra links */
  .extra.active::before {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background: #555;
    margin: 20px auto;
  }

  /* Extra links themselves */
  .extra.active {
    gap: 15px;
  }
  .extra.active a,
  .extra.active .search-icon {
    color: #fff;
    font-size: 18px;
  }
}
/* ───── Mobile Burger Menu Styling ───── */
@media (max-width: 992px) {

  /* 1) Main menu panel */
  .header.sticky .extra a {color: #fff !important;}
  .header.sticky .extra .search-icon {color: #fff !important;}
  .menu.active + .extra {margin-top: 345px !important;position: absolute !important;}
  
  .bonyan-content,
  .bonyan-video {
    width: 100% !important;
  }
  .video-container img{height: -webkit-fill-available !important;}
  .vision-section {flex-direction: column !important;}
   .projects-grid {
        grid-template-columns: 1fr !important; 
    }
  .news-grid {flex-wrap: wrap !important;}
  .section-title,.contact-title  {font-size: 36px !important;}
  .bonyan-tabs-section{flex-direction: column !important;}
  /* Default styling (desktop/tablet) */
  .bonyan-tabs-menu {
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap;
    width: 100% !important;
  }

  .bonyan-tabs-menu {
      flex-wrap: wrap !important; /* allow wrapping into 2 rows */
    }
  .bonyan-tab-button {
    width: fit-content !important; /* 2 buttons per row */
    box-sizing: border-box; /* ensures padding/border don't break width */
  }

  /*.bonyan-tabs-menu {width: 100% !important; padding: unset !important;flex-direction: row !important;overflow: scroll !important;}*/
  .bonyan-tab-content.active{flex-direction: column !important;}
  .bonyan-tab-image {width: 113% !important; object-fit: contain !important;}
  .filters {flex-direction: column !important;}
  .unique-news-grid {flex-direction: column !important;}
  .unique-news-item img {object-fit: contain !important;}
  .slide-caption{padding: 0px !important;}
  .bonyan-contact-grid {gap: unset !important;}
  .job-details-form-wrapper {flex-direction: column !important;}
  .job-details-left,.job-form-right  {width: 100% !important; padding: 5px !important;}
  .contact-section {margin-top: 15% !important;}
  .divider{display: none !important;}
  .contact-box h4 {margin-top: auto !important;}
  .contact-box {margin-top: 5% !important;}
  .timeline-img img {width: 200px !important;height: 140px !important;object-fit: cover !important;}
  .side-image-container.reveal {display: none !important;}
  .image-gallery-section{min-height: auto !important;}
  .related-grid {margin-left: unset !important;flex-direction: column !important;}
  .related-box {width: 100% !important;}
  .two-images-container {flex-direction: column !important;}
  .vertical-img,.horizontal-img {width: 100% !important;}
  .project-details {flex-wrap: wrap !important;gap: 60px !important;}
  .project-title {font-size: 34px !important;}
  .menu.active {
    position: absolute;
    top: 70px;       /* adjust if your header height is different */
    left: 0;
    width: 100%;
    background: #333;
    z-index: 200;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  /* Menu items as a vertical list */
  .menu.active ul#primary-menu {
    display: flex !important;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    text-align: center;
  }
  .menu.active ul#primary-menu li {
    margin: 10px 0;
  }
  .menu.active ul#primary-menu a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
  }

  /* 2) Extra panel (العربية + search) below the menu */
  .extra.active {
    position: relative;    /* so it sits beneath the .menu */
    width: 100%;
    background: #333;      /* same grey */
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
  }

  /* separator line */
  .extra.active::before {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background: #555;
    margin-bottom: 20px;
  }

  /* extra links styling */
  .extra.active a,
  .extra.active .search-icon {
    color: #fff;
    font-size: 18px;
    margin: 5px 0;
  }
}
/* ───── Final Mobile Menu Fix ───── */
@media (max-width: 992px) {
  /* Hide both by default */
  .menu,
  .extra {
    display: none !important;
  }

  /* 1) Show & style the main menu when active */
  .menu.active {
    display: flex !important;
    position: absolute;
    top: 70px;               /* adjust to sit just beneath your header */
    left: 0;
    width: 100%;
    background: #333;        /* dark grey */
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    z-index: 999;
  }
  .menu.active ul#primary-menu {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    text-align: center;
  }
  .menu.active ul#primary-menu li {
    margin: 10px 0;
  }
  .menu.active ul#primary-menu li a {
    color: #fff;
    font-size: 18px;
    text-decoration: none;
  }

  /* 2) Separator + extra links below it */
  .extra.active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background: #333;
    padding: 20px 0;
    margin-top: calc(70px + /* menu-panel height */  (var(--menu-panel-height, auto)));
    /* If the above calc is messy, you can just tweak margin-top until it sits just under .menu.active */
  }
  .extra.active::before {
    content: '';
    display: block;
    width: 80%;
    height: 1px;
    background: #555;
    margin-bottom: 20px;
  }
  .extra.active a,
  .extra.active .search-icon {
    color: #fff;
    font-size: 18px;
    margin: 5px 0;
  }
}
@media (max-width: 992px) {
  .news-grid,
  .unique-news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px;
  }

  .news-grid .news-item,
  .unique-news-grid .unique-news-item {
    width: 100% !important;
  }
}
@media (max-width: 768px) {
  .sectors-carousel {
    display: flex;
    overflow-x: auto;
    gap: 16px;
    padding: 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    animation: none !important;
    transform: none !important;
  }

  .sector-block {
    flex: 0 0 80%;        /* Set each card to take 80% of the screen */
    min-width: 80%;
    max-width: 80%;
    scroll-snap-align: center;
    box-sizing: border-box;
    border-radius: 12px;
  }

  .sectors-carousel::-webkit-scrollbar {
    display: none;
  }
}
.video-container {
  position: relative;
  z-index: 1;
  height: 100vh;
  width: 100%;
  overflow: hidden;
}

.video-container video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  z-index: 0;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 767px) {
  .slogan {
    font-size: 5vw;
    line-height: 1.4;
    text-align: left !important;
    padding: 0 6vw;
    word-break: break-word;
    white-space: normal;
  }

  .slogan-second-line {
    display: block;
    text-align: left;
    margin-left: 19vw; /* ⬅️ Adjust this value as needed */
    padding: 0;
  }

  .highlight {
    font-family: 'Dancing Script', cursive;
    font-size: 5vw;
    white-space: nowrap;
  }
}



@media (max-width: 767px) {
  .bonyan-section {
    background-image: url('images/pattern.png');
    background-position: top center !important;
    background-repeat: no-repeat;
    background-size: contain;
    background-attachment: scroll !important;
    background-color: #2F353B;
  }
}