:root {
          --gold-primary: #b59b66;
          --gold-light: #F4E0A1;
          --dark-luxury: #1A1A1A;
          --bg-light: #FAFAFA;
          --footer-bg: #111111;
          --safe-top: env(safe-area-inset-top);
      }

      body {
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          background-color: var(--bg-light);
          color: var(--dark-luxury);
          overflow-x: hidden;
          padding-top: calc(var(--safe-top) + var(--header-height));
      }

      /* Navbar Styling */
      .navbar {
          background: rgba(255, 255, 255, 0.98);
          backdrop-filter: blur(10px);
          border-bottom: 3px solid var(--gold-primary);
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
          top: var(--safe-top);
      }

      .navbar-brand span {
          letter-spacing: 1px;
      }

      /* Hero Section */
      .hero-section {
          height: 75vh;
          background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.75)),
              url('https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&auto=format&fit=crop&w=1370&q=80');
          background-size: cover;
          background-position: center;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
      }

      /* --- تنسيق الشعار داخل الـ Hero --- */
      .hero-logo-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
      }

      .hero-logo-circle {
          width: 178px;
          /* حجم الدائرة في الشاشات الكبيرة */
          height: 178px;
          background: rgba(255, 255, 255, 0.9);
          /* خلفية بيضاء شبه شفافة */
          backdrop-filter: blur(5px);
          /* تأثير ضبابي خلف الدائرة */
          border-radius: 50%;
          /* شكل دائري */
          display: flex;
          justify-content: center;
          align-items: center;
          padding: 20px;
          border: 4px solid var(--gold-light);
          /* إطار ذهبي فاتح */
          transition: all 0.5s ease;
          box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1) !important;
          /* ظل ناعم */
      }

      /* تأثير عند مرور الماوس على الشعار */
      .hero-section:hover .hero-logo-circle {
          transform: scale(1.05) rotate(5deg);
          border-color: var(--gold-primary);
      }

      .hero-logo-img {
          max-height: 80%;
          /* ضمان عدم خروج اللوجو عن الدائرة */
          max-width: 80%;
          object-fit: contain;
      }

      /* تنسيق الأيقونة المؤقتة (Placeholder) */
      .logo-icon-placeholder {
          font-size: 50px;
          color: var(--gold-primary);
      }

      /* --- تعديلات التجاوب للموبايل --- */
      @media (max-width: 768px) {
          .hero-logo-circle {
              width: 178px;
              /* تصغير حجم الدائرة في الموبايل */
              height: 178px;
              padding: 15px;
          }

          .logo-icon-placeholder {
              font-size: 35px;
          }

          .hero-section .display-3 {
              font-size: 2.5rem;
              /* تصغير حجم العنوان الرئيسي */
          }

          .hero-section .lead {
              font-size: 1.1rem !important;
              /* تصغير حجم النص الوصفي */
          }
      }

      /* Card Custom Styling */
      .service-card {
          background: #fff;
          border: none;
          border-radius: 20px;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
          height: 100%;
          border-bottom: 4px solid transparent;
      }

      .service-card:hover {
          transform: translateY(-12px);
          border-bottom: 4px solid var(--gold-primary);
          box-shadow: 0 20px 40px rgba(212, 175, 55, 0.15);
      }

      .icon-box {
          width: 70px;
          height: 70px;
          background: linear-gradient(135deg, var(--gold-primary), var(--gold-light));
          color: white;
          border-radius: 15px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          font-size: 28px;
          transform: rotate(-5deg);
          transition: 0.3s;
      }

      .service-card:hover .icon-box {
          transform: rotate(0deg) scale(1.1);
      }

      .btn-gold {
          background: var(--gold-primary);
          color: white;
          border-radius: 50px;
          padding: 12px 30px;
          border: none;
          font-weight: bold;
          transition: 0.3s;
      }

      .btn-gold:hover {
          background: var(--dark-luxury);
          color: var(--gold-light);
          transform: scale(1.05);
      }

      .section-title {
          position: relative;
          padding-bottom: 15px;
          margin-bottom: 50px;
          font-weight: 800;
          color: var(--dark-luxury);
      }

      .section-title::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 80px;
          height: 4px;
          background: var(--gold-primary);
          border-radius: 2px;
      }

      /* --- Footer Styling --- */
      footer {
          background-color: var(--footer-bg);
          color: #ffffff;
          padding-top: 60px;
          border-top: 5px solid var(--gold-primary);
      }

      .footer-logo {
          font-size: 24px;
          font-weight: 900;
          color: var(--gold-primary);
          margin-bottom: 20px;
          display: block;
      }

      .footer-link {
          color: #bbb;
          text-decoration: none;
          transition: 0.3s;
          display: block;
          margin-bottom: 10px;
      }

      .footer-link:hover {
          color: var(--gold-primary);
          padding-right: 10px;
      }

      .social-icons a {
          width: 40px;
          height: 40px;
          background: #222;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          color: var(--gold-primary);
          margin-left: 10px;
          transition: 0.3s;
          border: 1px solid #333;
      }

      .social-icons a:hover {
          background: var(--gold-primary);
          color: #fff;
          transform: translateY(-5px);
      }

      .contact-info i {
          color: var(--gold-primary);
          width: 30px;
      }

      .copyright {
          background: #000;
          padding: 20px 0;
          margin-top: 50px;
          font-size: 14px;
          color: #777;
      }


      /* --- Investment Page - CSS Framework --- */

      /* تثبيت الهيدر للمسار والرجوع */
      .inv-header-area {
          background: #fff;
          padding: 12px 0;
          border-bottom: 2px solid var(--gold-light);
          position: sticky;
          top: 0;
          z-index: 1000;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
      }

      .inv-back-btn {
          width: 40px;
          height: 40px;
          background: #fff;
          border: 1px solid var(--gold-primary);
          color: var(--gold-primary);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-decoration: none !important;
          transition: 0.3s;
      }

      .inv-back-btn:hover {
          background: var(--gold-primary);
          color: #fff;
      }

      /* Hero Section */
      .inv-hero-card {
          background: #fff;
          border-radius: 20px;
          overflow: hidden;
          margin-top: 25px;
          border: none;
          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
      }

      .inv-hero-img {
          width: 100%;
          height: 250px;
          object-fit: cover;
          border-radius: 20px;
      }

      /* دورة حياة المشروع - كروت احترافية */
      .inv-process-title {
          position: relative;
          display: inline-block;
          margin-bottom: 30px;
          font-weight: 800;
      }

      .inv-process-title::after {
          content: '';
          position: absolute;
          bottom: -8px;
          right: 0;
          width: 50px;
          height: 3px;
          background: var(--gold-primary);
      }

      .inv-step-card {
          background: #fff;
          border-radius: 15px;
          padding: 25px;
          height: 100%;
          border-right: 4px solid var(--gold-primary);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.02);
          transition: 0.4s;
      }

      .inv-step-card:hover {
          transform: translateY(-5px);
          background: var(--bg-light);
      }

      .inv-step-icon {
          font-size: 30px;
          color: var(--gold-primary);
          margin-bottom: 15px;
          display: block;
      }

      /* قسم الركائز (بديل الأرقام) */
      .inv-values-box {
          background: linear-gradient(135deg, var(--dark-luxury), #333);
          color: #fff;
          border-radius: 25px;
          padding: 40px;
          margin: 40px 0;
      }

      .inv-value-item {
          border-right: 1px solid rgba(181, 155, 102, 0.3);
          padding-right: 20px;
      }

      .inv-value-item i {
          color: var(--gold-primary);
          font-size: 22px;
          margin-bottom: 10px;
      }

      /* --- WhatsApp Button Custom Style --- */
      .inv-whatsapp-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
          color: #fff !important;
          padding: 15px 35px;
          border-radius: 50px;
          text-decoration: none !important;
          font-weight: bold;
          font-size: 1.1rem;
          transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
          border: 2px solid #fff;
      }

      .inv-whatsapp-btn i {
          font-size: 24px;
          margin-left: 12px;
      }

      .inv-whatsapp-btn:hover {
          transform: scale(1.05) translateY(-5px);
          box-shadow: 0 15px 30px rgba(37, 211, 102, 0.3) !important;
          background: linear-gradient(135deg, var(--gold-primary) 0%, #b59b66 100%);
          /* يتغير للذهبي عند التمرير ليعطي انطباع فخم */
          border-color: var(--gold-light);
      }

      /* حركة نبض بسيطة لجذب الانتباه */
      .inv-whatsapp-btn {
          animation: inv-pulse-whatsapp 2s infinite;
      }

      @keyframes inv-pulse-whatsapp {
          0% {
              box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4);
          }

          70% {
              box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
          }

          100% {
              box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
          }
      }



      .hos-hero-card {
          background: #fff;
          border-radius: 20px;
          overflow: hidden;
          margin-top: 25px;
          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
      }

      .hos-hero-img {
          width: 100%;
          height: 250px;
          object-fit: cover;
      }

      /* كروت الخدمات الفندقية */
      .hos-service-item {
          background: #fff;
          border-radius: 15px;
          padding: 20px;
          border-right: 4px solid var(--gold-primary);
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
          height: 100%;
          transition: 0.3s;
      }

      .hos-service-item:hover {
          transform: scale(1.02);
      }

      .hos-icon {
          font-size: 28px;
          color: var(--gold-primary);
          margin-bottom: 15px;
          display: block;
      }

      /* قسم مميزات التشغيل */
      .hos-features-wrap {
          background: var(--bg-light);
          border-radius: 20px;
          padding: 30px;
          margin: 30px 0;
          border: 1px dashed var(--gold-primary);
      }

      .hos-feature-line {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          font-size: 0.95rem;
      }

      .hos-feature-line i {
          color: #25D366;
          /* لون أخضر للعلامة */
          margin-left: 10px;
      }


      /* --- Property Management Page Custom Styles --- */

      .mng-hero-card {
          background: #fff;
          border-radius: 20px;
          overflow: hidden;
          margin-top: 25px;
          box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
      }

      .mng-hero-img {
          width: 100%;
          height: 250px;
          object-fit: cover;
      }

      /* كروت الخدمات الإدارية */
      .mng-service-card {
          background: #fff;
          border-radius: 15px;
          padding: 20px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          border-top: 4px solid var(--gold-primary);
          height: 100%;
          transition: all 0.3s ease;
      }

      .mng-service-card:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
      }

      .mng-icon-circle {
          width: 50px;
          height: 50px;
          background: var(--bg-light);
          color: var(--gold-primary);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          margin-bottom: 15px;
      }

      /* صندوق الحماية القانونية والمتابعة */
      .mng-legal-notice {
          background: linear-gradient(135deg, #fdfbf7 0%, #f5f1e6 100%);
          border-radius: 20px;
          padding: 30px;
          margin: 30px 0;
          border-right: 6px solid var(--gold-primary);
      }

      .mng-legal-title {
          color: var(--dark-luxury);
          font-weight: 800;
          display: flex;
          align-items: center;
          gap: 10px;
      }

      .safe-area-top {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          height: var(--safe-top);
          background: #000d4e;
          z-index: 3000;
      }


      /* --- Values Section UI --- */
      .abt-value-box {
          background: #fff;
          padding: 35px 25px;
          border-radius: 30px;
          border: 1px solid rgba(0, 0, 0, 0.05);
          height: 100%;
          transition: all 0.4s ease;
          position: relative;
          box-shadow: 0 10px 25px rgba(0, 0, 0, 0.02);
      }

      .abt-value-box.active {
          background: var(--dark-luxury);
          color: #fff;
          transform: scale(1.05);
          z-index: 2;
          box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }

      .abt-value-box.active .text-secondary {
          color: #ccc !important;
      }

      .abt-value-icon-wrap {
          width: 65px;
          height: 65px;
          background: var(--gold-primary);
          color: #fff;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          font-size: 26px;
          box-shadow: 0 8px 15px rgba(181, 155, 102, 0.3);
      }

      .abt-value-box:hover {
          border-color: var(--gold-primary);
          transform: translateY(-10px);
      }

      /* للتجاوب في الموبايل */
      @media (max-width: 991px) {
          .abt-value-box.active {
              transform: none;
          }
      }


      /* --- About Us Page - Professional Deep UI --- */

      /* ضبط اتجاه الصفحة للعربي تماماً */
      .abt-page-wrapper {
          direction: rtl;
          text-align: right;
      }

      /* Hero Section with Image */
      .abt-hero-header {
          position: relative;
          padding: 60px 0;
          background: linear-gradient(45deg, rgba(26, 26, 26, 0.9), rgba(26, 26, 26, 0.7)),
              url('photo-1486406146926-c627a92ad1ab.jfif');
          background-size: cover;
          background-position: center;
          border-radius: 0 0 50px 50px;
          color: #fff;
          margin-bottom: 40px;
      }

      .abt-main-title {
          color: var(--gold-primary);
          font-weight: 850;
          font-size: 2.5rem;
          margin-bottom: 25px;
          border-right: 6px solid var(--gold-primary);
          padding-right: 20px;
      }

      .abt-lead-text {
          font-size: 1.2rem;
          line-height: 2;
          color: #f0f0f0;
          max-width: 800px;
      }

      /* كروت الرؤية والرسالة المحدثة */
      .abt-info-card {
          background: #fff;
          border-radius: 25px;
          padding: 40px;
          border: 1px solid rgba(181, 155, 102, 0.2);
          height: 100%;
          transition: 0.4s;
          position: relative;
          overflow: hidden;
      }

      .abt-info-card:hover {
          transform: translateY(-10px);
          box-shadow: 0 20px 40px rgba(181, 155, 102, 0.1);
      }

      .abt-card-icon {
          font-size: 45px;
          color: var(--gold-primary);
          margin-bottom: 25px;
          display: block;
      }

      /* قسم لماذا نحن؟ (Why Us) */
      .abt-why-section {
          background: #fff;
          border-radius: 30px;
          padding: 40px;
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
      }

      .abt-feature-item {
          display: flex;
          align-items: flex-start;
          margin-bottom: 30px;
      }

      .abt-feature-icon {
          min-width: 50px;
          height: 50px;
          background: var(--gold-primary);
          color: #fff;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20px;
          /* المسافة من اليمين لأننا RTL */
          font-size: 20px;
      }

      /* تحسين الصورة الجانبية لتناسب الموبايل */
      .abt-side-img {
          width: 100%;
          height: 400px;
          object-fit: cover;
          border-radius: 30px;
          /* الظل الكبير يسبب مشكلة في الموبايل، سنضبطه بالأسفل */
          box-shadow: 20px 20px 0px var(--gold-light);
          transition: 0.3s;
      }

      /* تعديلات الموبايل (أقل من 768px) */
      @media (max-width: 767.98px) {
          .abt-side-img {
              height: 250px;
              /* تقليل الارتفاع في الموبايل */
              /* تقليل إزاحة الظل لضمان بقائه داخل الشاشة */
              box-shadow: 10px 10px 0px var(--gold-light);
              margin-bottom: 20px;
          }

          /* ضبط الهوامش لضمان عدم خروج العنصر بالكامل */
          .abt-page-wrapper .container {
              overflow: hidden;
              /* لمنع أي عنصر من الخروج عن الإطار */
          }

          /* جعل ترتيب العناصر منطقي في الموبايل (الصورة أولاً ثم النص) */
          .order-md-custom {
              order: -1 !important;
              margin-bottom: 30px;
          }
      }

      /* --- Professional Bottom Navigation Bar --- */
      .mobile-nav {
          position: fixed;
          bottom: 20px;
          /* جعل الشريط يطفو قليلاً */
          left: 20px;
          right: 20px;
          height: 70px;
          background: rgba(26, 26, 26, 0.95);
          /* خلفية داكنة فخمة بلمسة زجاجية */
          backdrop-filter: blur(10px);
          border-radius: 20px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          z-index: 9999;
          border: 1px solid rgba(181, 155, 102, 0.3);
          transition: all 0.3s ease-in-out;
      }

      .mobile-nav-item {
          flex: 1;
          text-align: center;
      }

      .mobile-nav-item a {
          text-decoration: none;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #bbb;
          /* لون الأيقونات غير النشطة */
          transition: all 0.3s ease;
      }

      .mobile-nav-item i {
          font-size: 20px;
          margin-bottom: 4px;
      }

      .mobile-nav-item span {
          font-size: 0.65rem;
          font-weight: bold;
      }

      /* تأثير العنصر النشط */
      .mobile-nav-item.active a,
      .mobile-nav-item a:hover {
          color: var(--gold-primary);
      }

      .mobile-nav-item.active i {
          transform: translateY(-5px);
          /* رفع الأيقونة قليلاً */
          color: var(--gold-primary);
          text-shadow: 0 0 10px rgba(181, 155, 102, 0.5);
      }

      /* إضافة مسافة في أسفل الصفحة حتى لا يغطي الشريط المحتوى */
      @media (max-width: 991px) {
          body {
              padding-bottom: 100px !important;
          }
      }

      /* إخفاء الشريط في الشاشات الكبيرة */
      @media (min-width: 992px) {
          .mobile-nav {
              display: none !important;
          }
      }