/* CSS Variables */
   :root {
       --ramzad-black: #111111;
       --ramzad-white: #FFFFFF;
       /* --ramzad-white: #E6E6E6; */
       --ramzad-yellow: #FFC107;
       --transition-duration: 0.3s;
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   body {
       font-family: 'Montserrat', sans-serif;
       line-height: 1.6;
       color: var(--ramzad-black);
       overflow-x: hidden;
   }

   /* Arabic Language Support */
   [dir="rtl"] {
       font-family: 'Cairo', sans-serif;
   }

   /* Header */
   .header {
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       z-index: 1000;
       background: transparent;
       transition: all var(--transition-duration) ease;
       padding: 1rem 0;
   }

   .header.scrolled {
       background: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(10px);
       box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
   }

   .nav {
       display: flex;
       justify-content: space-between;
       align-items: center;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 2rem;
   }

   .logo {
       display: inline-flex;
       align-items: center;
       /* 2. يحاذيها عموديًا في المنتصف */
       /* gap: 12px; */
       font-size: 2rem;
       font-weight: 900;
       color: var(--ramzad-black);
   }

   .logo img {
       height: 45px;
       /* تحديد ارتفاع الأيقونة (يمكنك تعديله) */
       width: auto;
       /* العرض يتكيف تلقائيًا للحفاظ على الأبعاد */
       display: block;
       /* يزيل أي مسافات إضافية تحت الصورة */
   }

   .logo .highlight {
       color: var(--ramzad-yellow);
   }

   .nav-menu {
       display: flex;
       list-style: none;
       gap: 2rem;
       align-items: center;
   }

   .nav-link {
       text-decoration: none;
       color: var(--ramzad-black);
       font-weight: 700;
       transition: color var(--transition-duration) ease;
       background: none;
       border: none;
       cursor: pointer;
       font-size: 1rem;
       font-family: inherit;
   }

   .nav-link:hover {
       color: var(--ramzad-yellow);
   }

   .btn-primary {
       background: var(--ramzad-yellow);
       color: var(--ramzad-black);
       font-weight: 900;
       padding: 0.75rem 1.5rem;
       border-radius: 0.5rem;
       text-decoration: none;
       border: none;
       cursor: pointer;
       transition: all var(--transition-duration) ease;
       font-family: inherit;
   }

   .btn-primary:hover {
       background: #e6ac00;
       transform: translateY(-2px);
       box-shadow: 0 5px 15px rgba(255, 193, 7, 0.4);
   }

   .lang-toggle {
       background: var(--ramzad-yellow);
       color: var(--ramzad-black);
       border: none;
       padding: 0.5rem 1rem;
       border-radius: 0.5rem;
       font-weight: 700;
       cursor: pointer;
       transition: all var(--transition-duration) ease;
       margin-left: 1rem;
   }

   .lang-toggle:hover {
       background: #e6ac00;
   }

   /* Mobile Menu */
   .mobile-toggle {
       display: none;
       background: none;
       border: none;
       font-size: 1.5rem;
       cursor: pointer;
       color: var(--ramzad-black);
   }

   @media (max-width: 768px) {
       .nav-menu {
           position: fixed;
           top: 0;
           right: -100%;
           width: 100%;
           height: 100vh;
           background: var(--ramzad-white);
           flex-direction: column;
           justify-content: center;
           transition: right var(--transition-duration) ease;
       }

       .nav-menu.active {
           right: 0;
       }

       .mobile-toggle {
           display: block;
       }
   }

   /* Hero Section */
   .hero {
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%);
       text-align: center;
       padding: 2rem;
   }

   .hero-content {
       max-width: 800px;
   }

   .hero h1 {
       font-size: clamp(3rem, 8vw, 6rem);
       font-weight: 900;
       margin-bottom: 2rem;
       margin-top: 2rem;
       line-height: 1.1;
   }

   .hero .highlight {
       color: var(--ramzad-yellow);
   }

   .hero p {
       font-size: 1.5rem;
       color: #666;
       margin-bottom: 3rem;
       line-height: 1.6;
   }



   /* Section Styles */
   .section {
       position: relative;
       padding: 5rem 2rem;
       background: #E6E6E6;
   }

   .container {
       max-width: 1200px;
       margin: 0 auto;
   }

   .section-header {
       text-align: center;
       margin-bottom: 4rem;
   }

   .section-title {
       font-size: 3rem;
       font-weight: 900;
       margin-bottom: 1rem;
   }

   .section-subtitle {
       font-size: 1.25rem;
       color: #666;
       max-width: 600px;
       margin: 0 auto;
   }

   /* Services Grid */
   .services-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
       gap: 4rem;
       max-width: 1000px;
       margin: 0 auto;
   }

   .service-item {
       text-align: center;
       transition: transform var(--transition-duration) ease;
   }

   .service-item:hover {
       transform: translateY(-5px);
   }

   .services {
       background-color: #E6E6E6;
   }

   .service-icon {
       width: 150px;
       height: 150px;
       background: var(--ramzad-yellow);
       /* border-radius: 50%; */
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 1rem;
       /* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
   }

   .service-icon i {
       font-size: 20rem;
       color: rgb(84, 83, 83);
   }

   .service-title {
       font-size: 0.9rem;
       font-weight: 700;
       color: var(--ramzad-black);
   }

   /* Production Section */
   .production {
       background: var(--ramzad-black);
       color: var(--ramzad-white);
   }

   .production-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
       gap: 2rem;
   }

   .production-item {
       position: relative;
       overflow: hidden;
       border-radius: 1rem;
       transition: transform var(--transition-duration) ease;
   }

   .production-item:hover {
       transform: scale(1.05);
   }

   .production-item img {
       width: 100%;
       height: 250px;
       object-fit: cover;
       filter: blur(10px);


   }

   .production-overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, 0.9);
       display: flex;
       flex-direction: column;
       /* لوضع العناصر فوق بعضها */
       justify-content: center;
       align-items: center;
       text-align: center;
       opacity: 0;
       transition: opacity var(--transition-duration) ease;
   }

   .production-item:hover .production-overlay {
       opacity: 1;
   }

   .production-overlay i {
       font-size: 3rem;
       color: var(--ramzad-yellow);
   }

   .production-overlay .coming-soon-text {
       /* تنسيق النص */
       font-size: 22px;
       /* حجم الخط */
       font-weight: bold;
       /* خط عريض */
       color: white;
       /* لون النص */
   }


   /* --- الجزء السحري: إظهار النص بناءً على لغة الموقع --- */

   /* إذا كانت لغة الموقع هي العربية (ar) */
   html[lang="ar"] .coming-soon-text::before {
       content: "قريبًا";
   }

   /* إذا كانت لغة الموقع هي الإنجليزية (en) */
   html[lang="en"] .coming-soon-text::before {
       content: "Soon";
   }

   /* Work Portfolio */
   .work-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
       gap: 2rem;
   }

   .work-item {
       background: var(--ramzad-white);
       border-radius: 1rem;
       overflow: hidden;
       box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       transition: transform var(--transition-duration) ease;
   }

   .work-item:hover {
       transform: translateY(-5px);
   }

   .work-item img {
       width: 100%;
       height: 200px;
       object-fit: cover;
   }

   .work-content {
       padding: 1.5rem;
   }

   .work-title {
       font-size: 1.25rem;
       font-weight: 900;
       margin-bottom: 0.5rem;
   }

   .work-desc {
       color: #666;
   }

   /* Team Section */
   /* =================================== */
   /*      OUR WORK (VIDEO) SECTION       */
   /* =================================== */

   .video-section {
       /* 
      تم تعديل الخلفية لتكون داكنة لتناسب هوية الموقع.
      إذا كان هذا هو القسم الزوجي، ستتغير الخلفية تلقائيًا إلى الأصفر
      بسبب القواعد التي أضفناها سابقًا.
    */
       background-color: var(--ramzad-yellow);
       padding: 100px 0;
   }

   /* 
  تنسيق الحاوية الرئيسية للفيديو
  يبقى كما هو لأنه يعتمد على الأبعاد ولا يتأثر بنوع الوسم بالداخل.
*/
   .video-wrapper {
       position: relative;
       max-width: 1100px;
       margin: 0 auto;
       padding-bottom: 56.25%;

       height: 0;
       background: #000;
       /* خلفية سوداء تظهر أثناء تحميل الفيديو */
       overflow: hidden;
       aspect-ratio: 16/9;

       /* تصميم الإطار الأنيق */
       border-radius: 15px;
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
   }

   /* 
  -- التعديل الرئيسي هنا --
  قمنا بتغيير المحدد من "iframe" إلى "video" وأضفنا بعض التحسينات.
*/
   .video-wrapper video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;

       /* 
      1. لضمان أن الفيديو يملأ الإطار بالكامل حتى لو كانت أبعاده مختلفة.
    */
       object-fit: cover;

       /* 
      2. لضمان أن الفيديو نفسه يأخذ الحواف الدائرية من الحاوية.
      يجب أن تكون القيمة أقل قليلاً من قيمة الحاوية (15px) لتجنب أي تسريب.
    */
       border-radius: 14px;
   }

   /*
  (اختياري) تنسيق صورة الغلاف (poster) لتبدو أفضل
*/
   .video-wrapper video[poster] {
       object-fit: cover;
       /* تأكد من أن صورة الغلاف تملأ الإطار أيضًا */
   }

   /* Partners Section */
   .partners-grid {
       display: grid;
       /* عرض 5 شعارات في الصف على الشاشات الكبيرة */
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       gap: 40px;
       align-items: center;
   }

   .partner-logo {
       /* لا نحتاج لخلفية أو حدود في الحالة العادية */
       text-align: center;
       /* نضيف انتقالًا سلسًا لجميع الخصائص */
       transition: transform 0.3s ease, opacity 0.3s ease;
       border-radius: 10px;
   }

   .partner-logo img {
       max-width: 120px;
       /* تحديد حجم أقصى للشعار */
       height: auto;
       margin: 0 auto;
       border-radius: 12px;
       /* توسيط الشعار أفقيًا */

       /* 
      جعل الشعارات باهتة وبلون رمادي في الحالة العادية
      لإعطاء إحساس بالوحدة والتركيز على الشعار الذي يتم التفاعل معه.
    */
       filter: grayscale(100%) opacity(60%);

       transition: filter 0.4s ease;
       /* انتقال سلس لتأثير الفلتر */
   }

   /* 
  تأثير الـ Hover:
  عند تمرير الماوس فوق الشعار، يصبح ملونًا بالكامل، أكثر وضوحًا، ويرتفع قليلاً.
*/
   .partner-logo:hover img {
       transform: scale(1.3);
       filter: grayscale(0%) opacity(100%);
   }




   /* Contact Section */
   .contact {
       background: var(--ramzad-black);
       color: var(--ramzad-white);
   }

   .contact-content {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 4rem;
       align-items: start;
   }

   @media (max-width: 768px) {
       .contact-content {
           grid-template-columns: 1fr;
       }
   }



   .contact-info {
       display: flex;
       flex-direction: column;
       gap: 2rem;
   }

   .contact-item {
       display: flex;
       align-items: flex-start;
       gap: 1rem;
   }

   .contact-icon {
       width: 48px;
       height: 48px;
       background: var(--ramzad-yellow);
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
   }

   .contact-icon i {
       color: var(--ramzad-black);
       font-size: 1.25rem;
   }

   .contact-details h4 {
       font-size: 1.25rem;
       font-weight: 900;
       margin-bottom: 0.5rem;
   }

   .contact-details p {
       color: #ccc;
       line-height: 1.6;
   }

   /* Footer */
   .footer {
       background: #000;
       color: var(--ramzad-white);
       padding: 3rem 2rem 2rem;
   }

   .footer-content {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 3rem;
       max-width: 1200px;
       margin: 0 auto 2rem;
   }

   .footer-section h4 {
       font-size: 1.5rem;
       font-weight: 900;
       /* margin-bottom: 1rem; */
   }

   .footerlogo {

       display: inline-flex;
       align-items: center;
   }

   .footer-section img {

       height: 50px;

   }

   .footer-section .highlight {
       color: var(--ramzad-yellow);
   }

   .footer-links {
       list-style: none;
       display: flex;
       flex-direction: column;
       gap: 0.5rem;
   }

   .footer-links a {
       color: #ccc;
       text-decoration: none;
       transition: color var(--transition-duration) ease;
   }

   .footer-links a:hover {
       color: var(--ramzad-yellow);
   }

   .social-links {
       display: flex;
       gap: 1rem;
   }

   .social-link {
       width: 40px;
       height: 40px;
       background: #333;
       border-radius: 0.5rem;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #ccc;
       text-decoration: none;
       transition: all var(--transition-duration) ease;
   }

   .social-link:hover {
       background: var(--ramzad-yellow);
       color: var(--ramzad-black);
   }

   .footer-bottom {
       text-align: center;
       padding-top: 2rem;
       border-top: 1px solid #333;
       color: #ccc;
   }

   /* Animations */
   .animate-on-scroll {
       opacity: 0;
       transform: translateY(30px);
       transition: all 0.8s ease-out;
   }

   .animate-on-scroll.animate {
       opacity: 1;
       transform: translateY(0);
   }

   /* Hidden class for language switching */
   .hidden {
       display: none;
   }

   .custom-shape-divider-bottom-1750580573 {
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       overflow: hidden;
       line-height: 0;
       z-index: -1;
   }

   .custom-shape-divider-bottom-1750580573 svg {
       position: relative;
       display: block;
       width: calc(144% + 1.3px);
       height: 200px;
   }

   .custom-shape-divider-bottom-1750580573 .shape-fill {
       fill: #FFC107;
   }

   /** For mobile devices **/
   @media (max-width: 767px) {
       .custom-shape-divider-bottom-1750580573 svg {
           width: calc(174% + 1.3px);
           height: 95px;
       }
   }



   .custom-shape-divider-top-1750580357 {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       overflow: hidden;
       line-height: 0;
       transform: rotate(180deg);
   }

   .custom-shape-divider-top-1750580357 svg {
       position: relative;
       display: block;
       width: calc(144% + 1.3px);
       height: 78px;
   }

   .custom-shape-divider-top-1750580357 .shape-fill {
       fill: #FFC107;
   }

   /** For mobile devices **/
   @media (max-width: 767px) {
       .custom-shape-divider-top-1750580357 svg {
           width: calc(174% + 1.3px);
           height: 95px;
       }
   }

   #production {
       background: var(--ramzad-yellow);
       color: var(--ramzad-white);
   }

   #team {
       background: var(--ramzad-yellow);
       color: var(--ramzad-black);
   }