@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Almarai:wght@700&family=IBM+Plex+Sans+Arabic:wght@700&display=swap');
/*
=================================================================
  GENERAL & BASE STYLES
=================================================================
*/
body {
    font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
    direction: rtl;
    background-color: #ffffff;
    color: #333;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /*
    MODIFIED: This rule is still needed to prevent content on internal
    pages from being hidden by the fixed header.
  */
  .page-body #main-content {
      padding-top: 96px;
  }
  
  .section-padding {
    padding: 6rem 1rem;
  }
  
  .section-heading {
    font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
    position: relative;
    text-align: center;
  }
  
  .section-heading::after {
    content: '';
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #d4a437, #f1d293);
    display: block;
    margin: 1.5rem auto 0;
    border-radius: 2px;
  }
  .section-heading.text-end::after {
      margin: 1.5rem 0 0 auto;
  }
  .section-heading.text-align-right::after {
    margin: 1.5rem 0 0 auto;
  }
  
  .section-subheading {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 3.5rem auto;
    text-align: center;
  }
  
  /*
  =================================================================
    ANIMATIONS
  =================================================================
  */
  [data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  [data-animate].animate {
    opacity: 1;
    transform: translateY(0);
  }
  
  /*
  =================================================================
    HEADER & NAVIGATION (REVISED LOGIC)
  =================================================================
  */
  
  /* --- Base Header Styles --- */
  #main-header {
      background-color: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  /* --- Dark Mode Header (Applied on scroll and on all internal pages) --- */
  /* This is the look you want for the scrolled homepage AND the default for other pages. */
  #main-header.scrolled,
  .page-body #main-header {
      background-color: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      border-bottom-color: transparent;
  }
  
  /* --- Unified Navigation Link Styles --- */
  .main-nav-link {
      font-size: 1rem;
      font-weight: 500;
      color: white; /* All links are white against transparent or dark background */
      padding: 0.5rem 1rem;
      position: relative;
      text-decoration: none;
      transition: color 0.3s ease;
  }
  
  .main-nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background-color: var(--color-gold);
      transition: width 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  /* Unified hover/active effect for all pages */
  #main-header .main-nav-link:hover, 
  #main-header .main-nav-link.current-menu-item {
      color: var(--color-gold);
  }
  
  #main-header .main-nav-link:hover::after, 
  #main-header .main-nav-link.current-menu-item::after {
      width: 60%;
  }
  
  
  /* --- CTA Button --- */
  /* This style is for the default state on the homepage and the scrolled/internal page state */
  #main-header .nav-cta {
    background-color: var(--color-light);
    color: var(--color-dark);
    border-color: var(--color-light);
  }
  
  /* Hover effect for CTA button */
  #main-header .nav-cta:hover {
      background-color: var(--color-gold);
      border-color: var(--color-gold);
      color: var(--color-dark);
  }
  
  /* --- Mobile Menu --- */
  .nav-hamburger {
      color: white;
  }
  
  .nav-link-mobile {
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font-weight: 500;
  }
  
  .nav-link-mobile:hover {
      background-color: rgba(241, 210, 147, 0.1);
      color: var(--color-gold-light);
  }
  
  
  /*
  =================================================================
    HERO SECTION
  =================================================================
  */
  .hero-section {
      position: relative;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      overflow: hidden;
  }
  
  .video-background {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
  }
  
  .video-background video {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .video-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000000;
      opacity: 0.6;
      z-index: 2;
  }
  
  .hero-content {
      position: relative;
      z-index: 3;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      height: 100%;
      padding-bottom: 120px;
  }
  
  .hero-content-inner {
      width: 100%;
      max-width: 800px;
  }
  
  .hero-title {
      font-family: 'Montserrat', 'Playfair Display', 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 6vw, 3.5rem); /* reduced size */
      font-weight: 700;
      color: white;
      text-shadow: 0 5px 25px rgba(0,0,0,0.5);
      letter-spacing: 1px;
      line-height: 1.1;
  }
  .hero-title-gold {
      color: var(--color-gold, #d4a437);
  }
  
  .hero-subtitle {
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      max-width: 650px;
      margin: 1.5rem auto 2.5rem auto;
      color: rgba(255, 255, 255, 0.85);
      line-height: 1.8;
  }
  
  .hero-buttons .btn {
      min-width: 180px;
      padding: 0.8rem 2rem;
      font-size: 1rem;
      font-weight: 600;
      border-radius: 50px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin: 0.5rem;
      transition: all 0.3s ease;
  }
  
  .btn-gold {
      background-color: var(--color-gold);
      color: black;
      border: 2px solid var(--color-gold);
  }
  .btn-gold:hover {
      background-color: var(--color-gold-light);
      border-color: var(--color-gold-light);
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(212, 164, 55, 0.2);
  }
  
  .btn.btn-outline-light {
      border-color: white;
      color: white;
  }
  .btn.btn-outline-light:hover {
      background-color: white;
      color: black;
      transform: translateY(-3px);
  }
  
  .scroll-down-indicator {
      position: absolute;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
  }
  
  .mouse {
      width: 30px;
      height: 50px;
      border: 2px solid white;
      border-radius: 25px;
      position: relative;
  }
  .mouse span {
      position: absolute;
      display: block;
      top: 25%;
      left: 50%;
      width: 4px;
      height: 10px;
      background: white;
      border-radius: 4px;
      transform: translateX(-50%);
      animation: scroll-wheel 2s infinite;
  }
  
  @keyframes scroll-wheel {
      0% { top: 25%; opacity: 1; }
      30% { opacity: 1; }
      100% { top: 60%; opacity: 0; }
  }
  
  /*
  =================================================================
    ABOUT SECTION
  =================================================================
  */
  .about-image-container {
      position: relative;
  }
  .about-image-container::before {
      content: '';
      position: absolute;
      bottom: -20px;
      left: -20px;
      width: 80%;
      height: 80%;
      background: linear-gradient(135deg, rgba(241, 210, 147, 0.08), rgba(212, 164, 55, 0.08));
      z-index: -1;
      border-radius: 0.5rem;
      transition: all 0.4s ease;
  }
  .about-company-section:hover .about-image-container::before {
      transform: translate(10px, 10px);
  }
  .about-text {
      font-size: 1.1rem;
      line-height: 2;
      color: #555;
      text-align: justify;
  }
  
  /*
  =================================================================
    FEATURES SECTION V2
  =================================================================
  */
  .feature-box-v2 {
    background: white;
    padding: 2.5rem 2rem;
    border-radius: 1rem;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid #e9ecef;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  .feature-box-v2:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: var(--color-gold);
  }
  .feature-box-v2::after {
      content: '';
      position: absolute;
      bottom: -50px;
      left: -50px;
      width: 100px;
      height: 100px;
      background-color: var(--color-gold);
      border-radius: 50%;
      opacity: 0;
      transform: scale(0);
      transition: all 0.5s ease;
      z-index: 0;
  }
  .feature-box-v2:hover::after {
      opacity: 0.1;
      transform: scale(4);
  }
  .feature-icon {
    font-size: 2.5rem;
    color: var(--color-gold);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
    position: relative;
    z-index: 1;
  }
  .feature-box-v2:hover .feature-icon {
    transform: scale(1.1);
  }
  .feature-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2b2b2b;
    margin-bottom: 0.75rem;
    position: relative;
    z-index: 1;
  }
  .feature-text {
    color: #666;
    line-height: 1.6;
    position: relative;
    z-index: 1;
  }
  
  /*
  =================================================================
    PARALLAX PROJECT SECTION
  =================================================================
  */
  .parallax-section {
      padding: 8rem 1rem;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      position: relative;
  }
  .parallax-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
  }
  .parallax-title {
      font-size: 2rem;
      font-weight: 700;
      text-shadow: 0 3px 15px rgba(0,0,0,0.5);
  }
  .parallax-subtitle {
      font-size: 1.2rem;
      max-width: 600px;
      margin: 1rem auto 2rem auto;
      color: rgba(255,255,255,0.9);
  }
  .project-details-box {
      background-color: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 1rem;
      padding: 2rem;
      max-width: 700px;
      margin: 0 auto;
  }
  .project-details-box ul {
      text-align: right;
  }
  .project-details-box li {
      margin-bottom: 0.75rem;
      display: flex;
      align-items: center;
  }
  .project-details-box li:last-child {
      margin-bottom: 0;
  }
  .project-details-box i {
      color: var(--color-gold-light);
      margin-left: 1rem;
      font-size: 1.2rem;
      width: 20px;
  }
  
  /*
  =================================================================
    FOOTER V2
  =================================================================
  */
  .site-footer {
      background-color: #050505;
  }
  .footer-heading {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9ca3af;
  }
  .footer-link-v2 {
    display: inline-block;
    color: #d1d5db;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    position: relative;
  }
  .footer-link-v2:hover {
    color: var(--color-gold-light);
    transform: translateX(-5px);
  }
  .social-icon-v2 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255,255,255,0.05);
    color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
  }
  .social-icon-v2:hover {
    background-color: var(--color-gold);
    color: #000;
    transform: translateY(-3px);
  }
  .form-input-v2 {
    width: 100%;
    padding: 0.8rem 1rem;
    color: #fff;
    background-color: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  }
  .form-input-v2::placeholder { color: #9ca3af; }
  .form-input-v2:focus {
    outline: none;
    background-color: rgba(255,255,255,0.1);
    border-color: var(--color-gold);
  }
  .btn-gold-full {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #000;
    background-color: var(--color-gold);
    border: 2px solid var(--color-gold);
    border-radius: 0.375rem;
    transition: all 0.3s ease;
  }
  .btn-gold-full:hover {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    transform: translateY(-2px);
  }
  
  /*
  =================================================================
    FLOATING BUTTONS
  =================================================================
  */
  .floating-buttons {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 999;
      display: flex;
      flex-direction: column;
      gap: 1rem;
  }
  .whatsapp-btn, .scroll-to-top {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      background-color: var(--color-gold);
      color: black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      transition: all 0.3s ease;
      transform: scale(0);
      opacity: 0;
      animation: pop-in 0.5s 1s forwards;
  }
  .whatsapp-btn:hover, .scroll-to-top:hover {
      transform: scale(1.1) rotate(10deg);
      background-color: var(--color-gold-light);
      color: black;
  }
  .whatsapp-btn {
      background-color: #25D366;
      color: white;
      animation-delay: 0.8s;
  }
  .whatsapp-btn:hover {
      background-color: #128C7E;
  }
  .scroll-to-top.visible {
      transform: scale(1);
      opacity: 1;
  }
  
  @keyframes pop-in {
      from { transform: scale(0); opacity: 0; }
      to { transform: scale(1); opacity: 1; }
  }
  
  /*
  =================================================================
    PAGE HEADER COMPONENT
  =================================================================
  */
  .page-header {
      padding: 6rem 1rem 5rem;
      background-color: var(--color-dark);
      color: var(--color-light);
      text-align: center;
      position: relative;
      overflow: hidden;
      min-height: 420px;
      display: flex;
      align-items: center;
  }
  
  .page-header::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: linear-gradient(45deg, rgba(212, 164, 55, 0.05) 25%, transparent 25%, transparent 50%, rgba(212, 164, 55, 0.05) 50%, rgba(212, 164, 55, 0.05) 75%, transparent 75%, transparent 100%);
      background-size: 60px 60px;
      opacity: 0.5;
      animation: move-bg 20s linear infinite;
  }
  
  @keyframes move-bg {
      0% { background-position: 0 0; }
      100% { background-position: 60px 60px; }
  }
  
  .page-header .page-title {
      font-size: clamp(2.5rem, 6vw, 4rem);
      color: var(--color-gold-light);
      text-shadow: 0 2px 15px rgba(0,0,0,0.5);
      position: relative;
      z-index: 1;
  }
  
  .page-header .page-subtitle {
      font-size: 1.1rem;
      color: rgba(255,255,255,0.8);
      text-shadow: 0 0 8px black, 0 0 12px black !important;
      max-width: 600px;
      margin: 1rem auto 0;
      position: relative;
      z-index: 1;
  }
  
  /*
  =================================================================
    MODERNIZED CONTENT CARD
  =================================================================
  */
  .content-card-v2 {
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 25px rgba(0,0,0,0.04);
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      height: 100%;
      overflow: hidden;
      border: 1px solid #e9ecef;
      display: flex;
      flex-direction: column;
      text-decoration: none;
      color: inherit;
  }
  
  .content-card-v2:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
      border-color: var(--color-gold);
  }
  
  .card-image-wrapper {
      height: 240px;
      overflow: hidden;
      position: relative;
  }
  
  .card-image-wrapper .card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .content-card-v2:hover .card-img {
      transform: scale(1.1);
  }
  
  .card-image-wrapper .card-status-badge {
      position: absolute;
      top: 1rem;
      left: 1rem;
      background: var(--color-gold);
      color: black;
      padding: 0.3rem 0.8rem;
      border-radius: 50px;
      font-size: 0.8rem;
      font-weight: 600;
      z-index: 1;
      box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  }
  
  .card-body-content {
      padding: 1.75rem;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
  }
  
  .card-title-v2 {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 0.75rem;
  }
  
  .card-excerpt {
      color: #555;
      line-height: 1.7;
      margin-bottom: 1rem;
      flex-grow: 1;
  }
  
  .card-meta, .card-footer-action {
      margin-top: auto; /* Pushes to the bottom */
  }
  
  .card-meta {
      font-size: 0.9rem;
      color: #777;
      border-top: 1px solid #f0f0f0;
      padding-top: 1rem;
  }
  
  .card-footer-action .card-button {
      display: inline-block;
      color: var(--color-gold);
      font-weight: 600;
      text-decoration: none;
      transition: all 0.3s ease;
  }
  .card-footer-action .card-button i {
      transition: transform 0.3s ease;
      margin-right: 5px;
  }
  .content-card-v2:hover .card-button {
      letter-spacing: 0.5px;
  }
  .content-card-v2:hover .card-button i {
      transform: translateX(-4px);
  }
  
  /*
  =================================================================
    PROJECTS & ARTICLES ARCHIVE
  =================================================================
  */
  .filter-controls {
      background-color: #fff;
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 5px 20px rgba(0,0,0,0.05);
      margin-bottom: 3rem;
  }
  .filter-controls .btn-group .btn {
      border-radius: 50px !important;
      padding: 0.5rem 1.5rem;
      font-weight: 600;
      margin: 0 0.25rem;
      border-width: 2px;
  }
  .filter-controls .btn-gold {
      background-color: var(--color-gold);
      border-color: var(--color-gold);
      color: black;
  }
  .filter-controls .btn-outline-gold {
      border-color: var(--color-gold);
      color: var(--color-gold);
  }
  .filter-controls .btn-outline-gold:hover {
      background-color: var(--color-gold);
      color: black;
  }
  
  /*
  =================================================================
    SINGLE PROJECT & ARTICLE
  =================================================================
  */
  .single-post-container {
      background: white;
      margin-top: -80px; /* Pulls up to overlap with header */
      position: relative;
      z-index: 2;
      border-radius: 0;
      box-shadow: 0 15px 50px rgba(0,0,0,0.1);
      overflow: hidden;
      padding-bottom: 3rem; /* Add padding to the bottom */
  }
  .single-post-thumbnail {
      margin-top: 2rem; /* Adds space below the header */
  }
  .single-post-thumbnail img {
      width: 100%;
      max-height: 500px;
      object-fit: cover;
  }
  .single-post-content {
      padding: 3rem;
  }
  .article-body {
      font-size: 1.1rem;
      line-height: 2;
      color: #333;
  }
  /* Ensure article content is visible even if animations fail to trigger */
  .single-post-content[data-animate] {
      opacity: 1;
      transform: none;
  }
  /* Make images and figures inside articles responsive */
  .article-body img,
  .article-body figure img,
  .article-body .wp-block-image img {
      max-width: 100%;
      height: auto;
      display: block;
  }
  .article-body figure {
      margin: 1.5rem 0;
  }
  /* Handle wide content elements inside the article */
  .article-body iframe,
  .article-body video,
  .article-body embed,
  .article-body object {
      max-width: 100%;
      width: 100%;
  }
  .article-body .wp-block-table,
  .article-body table {
      width: 100%;
      display: block;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
  }

  /* Mobile refinements */
  @media (max-width: 576px) {
      .single-post-content {
          padding: 1.25rem;
      }
      .single-post-thumbnail img {
          max-height: 260px;
      }
      .article-body {
          font-size: 1rem;
      }
      /* Force images to stay within container on mobile */
      .article-body img,
      .article-body figure img,
      .article-body .wp-block-image img {
          max-width: 100% !important;
          width: auto !important;
          height: auto !important;
          box-sizing: border-box;
      }
      /* Ensure figures don't overflow */
      .article-body figure {
          max-width: 100%;
          overflow: hidden;
      }
      /* Add padding to prevent edge overflow */
      .single-post-container {
          margin-left: 0.5rem;
          margin-right: 0.5rem;
      }
  }
  .article-body h2, .article-body h3 {
      font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
      color: var(--color-dark);
      margin-top: 2rem;
      margin-bottom: 1rem;
  }
  .article-body p {
      margin-bottom: 1.5rem;
  }
  .project-details-grid {
      background-color: #f8f9fa;
      border: 1px solid #e9ecef;
      border-radius: 0.5rem;
      padding: 2rem;
  }
  .detail-item {
      display: flex;
      align-items: center;
      font-size: 1.1rem;
  }
  .detail-item i {
      color: var(--color-gold);
      font-size: 1.5rem;
      margin-left: 1rem;
      width: 30px;
      text-align: center;
  }
  
  /*
  =================================================================
    NEW: RELATED ARTICLES SECTION STYLES
  =================================================================
  */
  .related-articles-section {
      background-color: #f8f9fa;
      border-top: 1px solid #e9ecef;
  }
  
  .related-section-title {
      font-size: 1.8rem;
      font-weight: 700;
      color: var(--color-dark);
      margin-bottom: 2rem;
      position: relative;
      padding-bottom: 0.75rem;
  }
  
  .related-section-title::after {
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 50px;
      height: 3px;
      background: var(--color-gold);
  }
  
  .related-articles-list {
      list-style: none;
      padding: 0;
      margin: 0;
  }
  
  .related-article-item {
      margin-bottom: 1rem;
      padding-bottom: 1rem;
      border-bottom: 1px solid #e9ecef;
  }
  .related-article-item:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
  }
  
  .related-article-item a {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: inherit;
      transition: background-color 0.2s ease-in-out;
      padding: 0.5rem;
      border-radius: 0.5rem;
  }
  
  .related-article-item a:hover {
      background-color: #e9ecef;
  }
  
  .related-article-thumbnail {
      width: 70px;
      height: 70px;
      object-fit: cover;
      border-radius: 0.5rem;
      margin-left: 1rem; /* For RTL */
      flex-shrink: 0;
  }
  
  .related-article-info {
      display: flex;
      flex-direction: column;
  }
  
  .related-article-title {
      font-size: 1.1rem;
      font-weight: 600;
      color: var(--color-dark);
      margin-bottom: 0.25rem;
      line-height: 1.4;
  }
  
  .related-article-date, .related-article-meta {
      font-size: 0.85rem;
      color: #6c757d;
  }
  
  .related-article-meta i {
      color: var(--color-gold);
  }
  
  
  /*
  =================================================================
    ABOUT PAGE
  =================================================================
  */
  .about-intro-section .about-image-container {
      border-radius: 1rem;
      overflow: hidden;
      box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  }
  .vision-mission-section {
      background-color: #f8f9fa;
  }
  
  /*
  =================================================================
    CONTACT PAGE
  =================================================================
  */
  .contact-form-wrapper {
      background: white;
      padding: 3rem;
      border-radius: 1rem;
      box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  }
  .contact-form-wrapper .form-control {
      background-color: #f8f9fa;
      border: 2px solid #f8f9fa;
      padding: 0.9rem 1rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
  }
  .contact-form-wrapper .form-control:focus {
      background-color: white;
      border-color: var(--color-gold);
      box-shadow: none;
  }
  .contact-info-card {
      background: linear-gradient(135deg, var(--color-dark), #333);
      color: white;
      padding: 2rem;
      border-radius: 1rem;
      text-align: center;
      transition: all 0.3s ease;
  }
  .contact-info-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
  }
  .contact-info-icon {
      width: 60px;
      height: 60px;
      margin: 0 auto 1.5rem auto;
      background: var(--color-gold);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.8rem;
      color: var(--color-dark);
  }
  .contact-info-card h4 {
      font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
      color: var(--color-gold-light);
  }
  
  /*
  =================================================================
    FAQ PAGE
  =================================================================
  */
  .faq-item-v2 {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
  }
  .faq-item-v2.active {
      border-color: var(--color-gold);
      box-shadow: 0 5px 20px rgba(212, 164, 55, 0.15);
  }
  .faq-question-v2 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-dark);
    cursor: pointer;
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .faq-question-v2::after {
      content: '\f078'; /* FontAwesome chevron-down */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      transition: transform 0.3s ease;
  }
  .faq-item-v2.active .faq-question-v2::after {
      transform: rotate(180deg);
  }
  .faq-answer-v2 {
    color: #555;
    line-height: 1.8;
    padding: 0 1.5rem 1.5rem 1.5rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), padding 0.5s ease;
  }
  .faq-item-v2.active .faq-answer-v2 {
      max-height: 500px; /* Adjust as needed */
  }
  .faq-answer-v2 ul {
    padding-right: 1.5rem;
    margin-top: 1rem;
  }
  .faq-answer-v2 li {
    margin-bottom: 0.5rem;
  }
  
  /*
  =================================================================
    SERVICES PAGE
  =================================================================
  */
  .service-card {
      background-color: white;
      border-radius: 1rem;
      padding: 2rem;
      height: 100%;
      box-shadow: 0 4px 25px rgba(0,0,0,0.04);
      border: 1px solid #e9ecef;
      transition: all 0.3s ease;
  }
  .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.08);
      border-color: var(--color-gold);
  }
  .service-icon {
      font-size: 3rem;
      color: var(--color-gold);
      margin-bottom: 1.5rem;
  }
  .service-title {
      font-size: 1.6rem;
      color: var(--color-dark);
  }
  .service-list li {
      padding-right: 1.5rem;
      position: relative;
      margin-bottom: 0.75rem;
  }
  .service-list li::before {
      content: '\f00c'; /* FontAwesome check */
      font-family: 'Font Awesome 6 Free';
      font-weight: 900;
      position: absolute;
      right: 0;
      top: 5px;
      color: var(--color-gold);
  }
  /*
  =================================================================
    PROJECTS ARCHIVE (REVISED FILTERS)
  =================================================================
  */
  /* Main container for the filter buttons area */
  .project-filters {
      margin-bottom: 3rem;
  }
  
  /* This defines each row of filter buttons */
  .filter-button-group {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 0.5rem; /* This creates space between the buttons */
  }
  
  /* Re-apply original button styling to the new structure */
  .filter-button-group .btn {
      border-radius: 50px !important;
      padding: 0.5rem 1.5rem;
      font-weight: 600;
      margin: 0;
      border-width: 2px;
  }
  
  /* This is the style for an ACTIVE filter button. It now matches the hover state. */
  .project-filters .btn-gold {
      background-color: var(--color-gold);
      border-color: var(--color-gold);
      color: black;
  }
  
  /* This is the style for an INACTIVE filter button. */
  .project-filters .btn-outline-gold {
      border-color: var(--color-gold);
      color: var(--color-gold);
      background-color: transparent; /* Ensures no background color when inactive */
  }
  
  /* This is the hover effect for an INACTIVE button. */
  .project-filters .btn-outline-gold:hover {
      background-color: var(--color-gold);
      color: black;
  }
  
  /* Custom sector button style */
  .btn-outline-primary {
    color: #222e50; /* Example sector font color, adjust as needed */
    border: 2px solid #222e50;
    background: transparent;
    transition: all 0.3s;
  }
  .btn-outline-primary:hover, .btn-outline-primary:focus {
    color: #fff;
    background: #89CFF0; /* Baby blue */
    border-color: #89CFF0;
  }
  
  .header-bg-project {
    background-image: url('../images/cover.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}
.header-bg-project::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}
.header-bg-project > .container {
    position: relative;
    z-index: 2;
}

.header-bg-article {
    background-image: url('../images/cover2.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}
.header-bg-article::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}
.header-bg-article > .container {
    position: relative;
    z-index: 2;
}

.header-bg-about {
    background: url('../images/cover2.jpg') center center/cover no-repeat;
    min-height: 320px;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}
.header-bg-faq {
    background: url('../images/cover3.jpg') center center/cover no-repeat;
    min-height: 320px;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}
.header-bg-services {
    background: url('../images/cover4.jpg') center center/cover no-repeat;
    min-height: 320px;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}
.header-bg-contact {
    background: url('../images/cover4.jpg') center center/cover no-repeat;
    min-height: 320px;
    display: flex;
    align-items: center;
    color: #fff;
    position: relative;
}

/* Stunning Footer Styles */
.stunning-footer {
    background: linear-gradient(135deg, #111 60%, #222 100%);
    position: relative;
    overflow: hidden;
}
/* Footer SVG Wave Divider */
.footer-wave-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    pointer-events: none;
    line-height: 0;
}

/* Glowing Logo Hover */
.footer-logo-glow {
    filter: drop-shadow(0 0 32px #FFD70088) drop-shadow(0 0 8px #fff2);
    transition: filter 0.3s;
}
.footer-logo-glow:hover {
    filter: drop-shadow(0 0 48px #FFD700cc) drop-shadow(0 0 16px #fff4);
}

/* Animated Background Container for Footer */
#footer-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.site-footer {
    position: relative;
    overflow: hidden;
}

.stunning-footer-heading {
    font-size: 1.4rem;
    font-weight: bold;
    color: #FFD700;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px #0008;
}
.stunning-footer-links li {
    margin-bottom: 0.5rem;
}
.stunning-link {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    position: relative;
    transition: color 0.2s;
    padding-bottom: 2px;
}
.stunning-link::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #FFD700 60%, #fff 100%);
    transition: width 0.3s;
    position: absolute;
    left: 0;
    bottom: -2px;
}
.stunning-link:hover {
    color: #FFD700;
}
.stunning-link:hover::after {
    width: 100%;
}
.glassmorphism-form {
    background: rgba(255,255,255,0.08);
    border-radius: 1.5rem;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.18);
    padding: 2rem 1.5rem;
    margin-top: 1.5rem;
}
.stunning-input {
    background: rgba(0,0,0,0.3);
    border: 1px solid #FFD70044;
    color: #fff;
    border-radius: 0.75rem;
    font-size: 1rem;
    padding: 0.75rem 1rem;
    transition: border 0.2s, box-shadow 0.2s;
}
.stunning-input:focus {
    border: 1.5px solid #FFD700;
    box-shadow: 0 0 8px #FFD70044;
    outline: none;
}
.stunning-btn {
    background: linear-gradient(90deg, #FFD700 60%, #fff 100%);
    color: #111;
    font-weight: bold;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    box-shadow: 0 2px 16px #FFD70044;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.stunning-btn:hover {
    background: linear-gradient(90deg, #fff 60%, #FFD700 100%);
    color: #FFD700;
    box-shadow: 0 4px 32px #FFD70088;
}
.stunning-footer-copyright {
    font-size: 1.1rem;
    color: #FFD700cc;
    letter-spacing: 1px;
    text-shadow: 0 2px 8px #0008;
}
@media (max-width: 768px) {
    .footer-logo-glow { height: 64px; }
    .glassmorphism-form { padding: 1.2rem 0.5rem; }
}
  
/* Custom utility to always right-align text */
.text-align-right {
  text-align: right !important;
}
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@700&family=Almarai:wght@700&family=IBM+Plex+Sans+Arabic:wght@700&display=swap');
/*
=================================================================
  GENERAL & BASE STYLES
=================================================================
*/
body {
    font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
    direction: rtl;
    background-color: #ffffff;
    color: #333;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /*
    MODIFIED: This rule is still needed to prevent content on internal
    pages from being hidden by the fixed header.
  */
  .page-body #main-content {
      padding-top: 96px;
  }
  
  .section-padding {
    padding: 6rem 1rem;
  }
  
  .section-heading {
    font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
    position: relative;
    text-align: center;
  }
  
  .section-heading::after {
    content: '';
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #d4a437, #f1d293);
    display: block;
    margin: 1.5rem auto 0;
    border-radius: 2px;
  }
  .section-heading.text-end::after {
      margin: 1.5rem 0 0 auto;
  }
  .section-heading.text-align-right::after {
    margin: 1.5rem 0 0 auto;
  }
  
  .section-subheading {
    font-size: 1.1rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto 3.5rem auto;
    text-align: center;
  }
  
  /*
  =================================================================
    ANIMATIONS
  =================================================================
  */
  [data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  [data-animate].animate {
    opacity: 1;
    transform: translateY(0);
  }
  
  /*
  =================================================================
    HEADER & NAVIGATION (REVISED LOGIC)
  =================================================================
  */
  
  /* --- Base Header Styles --- */
  #main-header {
      background-color: transparent;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  }
  
  /* --- Dark Mode Header (Applied on scroll and on all internal pages) --- */
  /* This is the look you want for the scrolled homepage AND the default for other pages. */
  #main-header.scrolled,
  .page-body #main-header {
      background-color: rgba(0, 0, 0, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
      border-bottom-color: transparent;
  }
  
  /* --- Unified Navigation Link Styles --- */
  .main-nav-link {
      font-size: 1rem;
      font-weight: 500;
      color: white; /* All links are white against transparent or dark background */
      padding: 0.5rem 1rem;
      position: relative;
      text-decoration: none;
      transition: color 0.3s ease;
  }
  
  .main-nav-link::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background-color: var(--color-gold);
      transition: width 0.4s cubic-bezier(0.23, 1, 0.320, 1);
  }
  
  /* Unified hover/active effect for all pages */
  #main-header .main-nav-link:hover,
  #main-header .main-nav-link.current-menu-item {
      color: var(--color-gold);
  }
  
  #main-header .main-nav-link:hover::after,
  #main-header .main-nav-link.current-menu-item::after {
      width: 60%;
  }
  
  /* --- CTA Button --- */
  /* This style is for the default state on the homepage and the scrolled/internal page state */
  #main-header .nav-cta {
      background-color: var(--color-light);
      color: var(--color-dark);
      border-color: var(--color-light);
  }
  
  /* Hover effect for CTA button */
  #main-header .nav-cta:hover {
      background-color: var(--color-gold);
      border-color: var(--color-gold);
      color: var(--color-dark);
  }
  
  /* --- Mobile Menu --- */
  .nav-hamburger {
      color: white;
  }
  
  .nav-link-mobile {
      color: white;
      padding: 0.75rem 1rem;
      border-radius: 0.375rem;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      font-weight: 500;
  }
  
  .nav-link-mobile:hover {
      background-color: rgba(241, 210, 147, 0.1);
      color: var(--color-gold-light);
  }

  /*
  =================================================================
    INLINE IMAGE BANNER (RESPONSIVE)
  =================================================================
  */
  /*
=================================================================
  INLINE IMAGE BANNER (RESPONSIVE)
=================================================================
*/
.image-banner {
    position: relative;
    width: 100%;
    background-color: #fff; /* fallback while image loads */
    margin-top: 1.25rem; /* space below hero */
    overflow: hidden;
}
.image-banner-inner {
    max-width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}
.image-banner-img {
    display: block;
    width: 100%;
    height: clamp(300px, 25vw, 500px); /* Default height for desktop */
    object-fit: cover; /* Default behavior for desktop: fill and crop */
    object-position: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    transition: transform 0.3s ease;
}

/* Hover effect for better interactivity on desktop */
.image-banner-img:hover {
    transform: scale(1.02);
}

/* For tablets and phones, ensure the full image is visible */
@media (max-width: 768px) {
    .image-banner {
        margin-top: 0.75rem;
        padding: 0 0.75rem; /* Add some horizontal spacing */
    }
    .image-banner-img {
        height: auto; /* Let the image's aspect ratio determine the height */
        object-fit: contain; /* Scale the image to fit without cropping */
        border-radius: 0.5rem; /* Add rounded corners on mobile */
    }
}
/*
=================================================================
  STUNNING FAQ PAGE STYLES (V2) - LIGHT MODE
=================================================================
*/
.faq-section-v2 {
    background-color: #f8f9fa; /* Light background */
    position: relative;
    overflow: hidden;
}

.faq-container-v2 {
    max-width: 900px;
    margin: 0 auto;
    background: #ffffff; /* White container */
    border-radius: 1rem;
    padding: 2rem;
    border: 1px solid #e9ecef; /* Lighter border */
    box-shadow: 0 8px 32px rgba(0,0,0,0.08); /* Softer shadow */
    position: relative;
    z-index: 1;
}

.faq-tabs-nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow tabs to wrap on smaller screens */
    gap: 1rem;
    margin-bottom: 2.5rem;
    border-bottom: 1px solid #dee2e6; /* Standard border color */
    padding-bottom: 1rem;
}

.faq-tab-btn {
    background: transparent;
    border: none;
    color: #6c757d; /* Darker text for inactive tabs */
    font-family: 'Cairo', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
    border-radius: 8px;
    position: relative;
}

.faq-tab-btn::after {
    content: '';
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #d4a437; /* Gold accent */
    transition: width 0.4s cubic-bezier(0.23, 1, 0.320, 1);
}

.faq-tab-btn:hover {
    color: #212529; /* Darker hover text */
}

.faq-tab-btn.active {
    color: #d4a437; /* Gold for active */
}

.faq-tab-btn.active::after {
    width: 80%;
}

.faq-content-pane {
    display: none;
    animation: fadeIn 0.5s ease;
}

.faq-content-pane.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.faq-item-v3 {
    border-bottom: 1px solid #e9ecef; /* Light border */
    margin-bottom: 1rem;
}

.faq-item-v3:last-child {
    border-bottom: none;
}

.faq-question-v3 {
    padding: 1.25rem 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #212529; /* Dark text for question */
    font-size: 1.1rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.faq-question-v3:hover {
    color: #d4a437; /* Gold on hover */
}

.faq-question-v3 i {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 0.9rem;
    color: #6c757d;
}

.faq-answer-v3 {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding 0.5s ease;
    color: #495057; /* Standard body text color */
    padding: 0 1rem;
}

.faq-answer-v3 p {
    margin: 0;
    padding-bottom: 1.5rem;
    line-height: 1.8;
}

.faq-item-v3.active .faq-question-v3 {
    color: #d4a437; /* Gold for active question */
}

.faq-item-v3.active .faq-question-v3 i {
    transform: rotate(180deg);
    color: #d4a437;
}

.faq-item-v3.active .faq-answer-v3 {
    max-height: 250px; /* Adjust as needed for longer answers */
}

/* --- FAQ Contact CTA --- */
.faq-contact-cta {
    background: linear-gradient(135deg, var(--color-dark), #2c2c2c);
    color: white;
    padding: 3rem;
    border-radius: 1rem;
    text-align: center;
    margin-top: 2rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
    border-top: 4px solid var(--color-gold);
}

.faq-contact-cta .cta-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1.5rem auto;
    background: var(--color-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--color-dark);
    box-shadow: 0 0 0 8px rgba(212, 164, 55, 0.2);
}

.faq-contact-cta h3 {
    font-family: 'Cairo', 'Almarai', 'IBM Plex Sans Arabic', sans-serif;
    font-size: 2rem;
    color: var(--color-gold-light);
    margin-bottom: 0.75rem;
}

.faq-contact-cta p {
    color: rgba(255, 255, 255, 0.8);
    max-width: 450px;
    margin: 0 auto 2rem auto;
}
.shadowText{

    text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.7);
}

/*
=================================================================
  CUSTOM OVERRIDES FOR SPECIFIC PAGES
=================================================================
*/

/* Remove padding from the content area on single project pages
   to allow embedded content (like project-embedder.html) to go full-width. */
.single-project-body .single-post-content {
    padding: 0;
}
/*
=================================================================
  RESPONSIVE SPACING ADJUSTMENTS
=================================================================
*/
@media (max-width: 768px) {
    /* Reduce the large space under the banner on mobile devices */
    .image-banner + .section-padding {
      padding-top: 3rem; /* Reduces the default 6rem padding */
    }
  }