@extends('awtad.layout.app')
@section('content')
    <style>
@media (max-width: 600px) {
    .responsive-image {
        object-position: center center !important;
    }
}
</style>

<!-- Include enhanced design CSS -->
<link rel="stylesheet" href="{{ asset('css/enhanced-design.css') }}">
<!-- Include WOW.js for animations -->
<script src="{{ asset('js/wow.min.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        new WOW().init();
    });
</script>

<div id="carouselExampleFade" class="carousel slide carousel-fade hero-carousel" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{{ asset('images/111.jpg') }}" class="responsive-image" style="width: 100%; height:100vh; object-fit:cover; object-position: top left;" alt="شركة أوتاد الخيمة">
      <div class="carousel-caption wow fadeIn" style="" >
        {{-- <h1 class="" >شركة أوتاد الخيمة</h1>
         --}}
         <div> 
        <img src="{{ asset('images/logo/3-01.png') }}" alt="Company Logo" class="img-fluid hero-logo" style="margin: 0 auto; display: block; filter: brightness(1) contrast(1.1);">
        <h4 class="hero-subtitle" >للإستشارات الهندسية والمقاولات والتجارة العامة</h4>
         </div>
      </div>
      <a href="#company_cv" class="hero-scroll-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="hvr-hang icon icon-tabler icon-tabler-select" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 7l5 5l5 -5" />
          <path d="M7 13l5 5l5 -5" />
        </svg>
      </a>
    </div>
    <div class="carousel-item">
      <img src="{{ asset('images/222.jpg') }}" class="responsive-image" style="width: 100%; height:100vh; object-fit:cover; object-position: top left;" alt="شركة أوتاد الخيمة">
      <div class="carousel-caption wow fadeIn" data-wow-delay="0.3s">
         <div> 
        <img src="{{ asset('images/logo/3-01.png') }}" alt="Company Logo" class="img-fluid hero-logo" style="margin: 0 auto; display: block; filter: brightness(1) contrast(1.1);">
        <h4 class="hero-subtitle" >للإستشارات الهندسية والمقاولات والتجارة العامة</h4>
         </div>
      </div>
      <a href="#company_cv" class="hero-scroll-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="hvr-hang icon icon-tabler icon-tabler-select" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 7l5 5l5 -5" />
          <path d="M7 13l5 5l5 -5" />
        </svg>
      </a>
    </div>
    <div class="carousel-item">
      <img src="{{ asset('images/333.jpg') }}" class="responsive-image" style="width: 100%; height:100vh; object-fit:cover; object-position: top left;" alt="شركة أوتاد الخيمة">
      <div class="carousel-caption wow fadeIn" data-wow-delay="0.3s">
         <div> 
        <img src="{{ asset('images/logo/3-01.png') }}" alt="Company Logo" class="img-fluid hero-logo" style="margin: 0 auto; display: block; filter: brightness(1) contrast(1.1);">
        <h4 class="hero-subtitle" >للإستشارات الهندسية والمقاولات والتجارة العامة</h4>
         </div>
      </div>
      <a href="#company_cv" class="hero-scroll-icon">
        <svg xmlns="http://www.w3.org/2000/svg" class="hvr-hang icon icon-tabler icon-tabler-select" width="70" height="70" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
          <path d="M7 7l5 5l5 -5" />
          <path d="M7 13l5 5l5 -5" />
        </svg>
      </a>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div><!-- carouselExampleFade -->

<div id="company_cv"></div>
<!-- start Company CV -->
<section class="cv-section py-5" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); position: relative; overflow: hidden;" dir="rtl">
<br>
<br>
<br>

  <!-- Background decorative elements -->
  <div style="position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(52, 152, 219, 0.1) 0%, transparent 70%); border-radius: 50%; z-index: 0;"></div>
  <div style="position: absolute; bottom: -150px; left: -150px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(231, 76, 60, 0.08) 0%, transparent 70%); border-radius: 50%; z-index: 0;"></div>
  
  <div class="container" style="position: relative; z-index: 1;">
    <div class="section-header wow fadeIn text-center" data-wow-delay="0.3s" style="margin-bottom: 4rem;">
      <h1 style="font-size: 3.5rem; font-weight: 700; color: #2c3e50; margin-bottom: 1rem; position: relative; display: inline-block;">
        سيرتنا الذاتية
        <span style="position: absolute; bottom: -15px; left: 50%; transform: translateX(-50%); width: 100px; height: 4px; background: linear-gradient(135deg, #3498db, #2980b9); border-radius: 2px;"></span>
      </h1>
      <p style="font-size: 1.4rem; color: #7f8c8d; margin-top: 2rem; font-weight: 500;">تاريخ حافل بالإنجازات والمشاريع الرائدة</p>
    </div>
    
    <div class="row">
      <div class="col-12">
        <div class="cv-content wow fadeInUp" data-wow-delay="0.5s">
          <div class="timeline" style="position: relative; padding: 2rem 0;">
            <!-- Timeline line -->
            <div style="position: absolute; right: 50%; top: 0; bottom: 0; width: 4px; background: linear-gradient(to bottom, #3498db, #2980b9, #3498db); border-radius: 2px; transform: translateX(50%);"></div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; animation: fadeInRight 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #e74c3c, #c0392b); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(231, 76, 60, 0.3); position: relative; z-index: 2; margin-left: 2rem; min-width: 100px; text-align: center;">1972</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-right: 5px solid #e74c3c; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">بداية الشركة</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">بدأت أعمالنا في مجال المقاولات مع تنفيذ مشاريع الطرق والصرف الصحي مع أمانة بغداد.</p>
              </div>
            </div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; flex-direction: row-reverse; animation: fadeInLeft 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #3498db, #2980b9); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(52, 152, 219, 0.3); position: relative; z-index: 2; margin-right: 2rem; min-width: 100px; text-align: center;">1975</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-left: 5px solid #3498db; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">مشروع ساب نيسان للمياه - المرحلتان الأولى والثانية</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">عقد مع مديرية ماء بغداد لمد أنابيب بقطر 500-1400 ملم مع جميع التوصيلات والملحقات. الاستشاريون: شركة سيريكا الفرنسية. الموردون: شركة كوبوتا اليابانية.</p>
              </div>
            </div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; animation: fadeInRight 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #f39c12, #e67e22); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(243, 156, 18, 0.3); position: relative; z-index: 2; margin-left: 2rem; min-width: 100px; text-align: center;">1979</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-right: 5px solid #f39c12; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">مشروع ساب نيسان - المرحلة الثالثة</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">وضع أنابيب الدكنايل 500-800 مم. الاستشاريون: همفريز وبراون لندن. الموردون: بوينت أي موسون.</p>
              </div>
            </div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; flex-direction: row-reverse; animation: fadeInLeft 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #9b59b6, #8e44ad); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(155, 89, 182, 0.3); position: relative; z-index: 2; margin-right: 2rem; min-width: 120px; text-align: center;">1982-1984</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-left: 5px solid #9b59b6; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">مشروع القناة</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">عقد مع مديرية ماء بغداد لوضع الأنابيب الفولاذية 100-600 مم.</p>
              </div>
            </div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; animation: fadeInRight 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #1abc9c, #16a085); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(26, 188, 156, 0.3); position: relative; z-index: 2; margin-left: 2rem; min-width: 120px; text-align: center;">1985-1990</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-right: 5px solid #1abc9c; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">مشروع شبكة ماء الكرخ</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">مد أنابيب الدكنايل 700-1600-2300 مم بطول 60 كم. الاستشاريون: دبليو إس أتكينز لندن. الموردون: بوينت أي موسون وكوبوتا.</p>
              </div>
            </div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; flex-direction: row-reverse; animation: fadeInLeft 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #e67e22, #d35400); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(230, 126, 34, 0.3); position: relative; z-index: 2; margin-right: 2rem; min-width: 100px; text-align: center;">2002</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-left: 5px solid #e67e22; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">مشروع منطقة البياع</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">تنفيذ مد الأنابيب وأعمال الخرسانة في منطقة البياع ببغداد.</p>
              </div>
            </div>
            
            <div class="timeline-item" style="position: relative; margin-bottom: 3rem; display: flex; align-items: center; animation: fadeInRight 0.6s ease-out;">
              <div class="timeline-year" style="background: linear-gradient(135deg, #34495e, #2c3e50); color: white; padding: 1rem 1.5rem; border-radius: 25px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 8px 25px rgba(52, 73, 94, 0.3); position: relative; z-index: 2; margin-left: 2rem; min-width: 120px; text-align: center;">2005-2007</div>
              <div class="timeline-content" style="background: white; padding: 2rem; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-right: 5px solid #34495e; flex: 1; position: relative; transition: all 0.3s ease;" onmouseover="this.style.transform='translateY(-5px)'; this.style.boxShadow='0 15px 40px rgba(0,0,0,0.15)'" onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 30px rgba(0,0,0,0.1)'">
                <h4 style="color: #2c3e50; font-weight: 700; margin-bottom: 1rem; font-size: 1.4rem;">التعاون مع شركة بارسونز الأمريكية</h4>
                <p style="color: #5a6c7d; line-height: 1.8; margin: 0; font-size: 1.1rem;">مشروع في مدينة الصدر - مد أنابيب بلاستيكية ودكنايل 150-600 مم بطول 52 كم مع جميع الملحقات.</p>
              </div>
            </div>
          </div>
          
          <div class="facilities-info mt-5" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 3rem; border-radius: 20px; color: white; text-align: center; box-shadow: 0 15px 35px rgba(102, 126, 234, 0.3); position: relative; overflow: hidden;">
            <!-- Decorative elements -->
            <div style="position: absolute; top: -50px; right: -50px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; z-index: 0;"></div>
            <div style="position: absolute; bottom: -30px; left: -30px; width: 100px; height: 100px; background: rgba(255,255,255,0.08); border-radius: 50%; z-index: 0;"></div>
            
            <div style="position: relative; z-index: 1;">
              <h3 style="font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3);">مرافقنا</h3>
              <p style="font-size: 1.3rem; line-height: 1.8; margin: 0; opacity: 0.95;">مستودع الشركة في بغداد بمساحة <strong>37,500 م²</strong> والمساحة المغطاة <strong>12,000 م²</strong> لخدمة جميع أغراض الشركة.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Add responsive styles -->
  <style>
    @keyframes fadeInRight {
      from {
        opacity: 0;
        transform: translateX(30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes fadeInLeft {
      from {
        opacity: 0;
        transform: translateX(-30px);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @media (max-width: 768px) {
      .timeline-item {
        flex-direction: column !important;
        text-align: center;
      }
      
      .timeline-item .timeline-year {
        margin: 0 0 1rem 0 !important;
        order: 1;
      }
      
      .timeline-item .timeline-content {
        order: 2;
        border-left: none !important;
        border-right: none !important;
        border-top: 5px solid;
      }
      
      .section-header h1 {
        font-size: 2.5rem !important;
      }
      
      .facilities-info {
        padding: 2rem !important;
      }
      
      .facilities-info h3 {
        font-size: 2rem !important;
      }
    }
    
    @media (max-width: 480px) {
      .timeline-content {
        padding: 1.5rem !important;
      }
      
      .timeline-year {
        padding: 0.8rem 1.2rem !important;
        font-size: 1rem !important;
      }
      
      .section-header h1 {
        font-size: 2rem !important;
      }
    }
  </style>
</section>
<!-- end Company CV -->



<!-- start services -->
 <div id="services"></div>
 <section class="our-services overflow-hidden py-5" dir="rtl">
   <div class="services-bg-element"></div>
   <div class="services-bg-element"></div>
   <div class="container">
     <div class="section-header text-center wow fadeIn" data-wow-delay="0.3s">
     <br>
     <br>
     <br>
       <h1 class="display-4 fw-bold mb-4 scroll scroll_left">خدماتنا</h1>
       <p class="lead mb-5">نحن نقدم مجموعة شاملة من خدمات المقاولات والاستشارات الهندسية</p>
     </div>

     <div class="row justify-content-center g-4">
       <div class="col-lg-6 col-md-6 scroll scroll_right">
         <div class="service-card h-100 p-4 rounded-lg shadow-sm hover-shadow wow fadeInUp" data-wow-delay="0.4s">
           <div class="card-body d-flex flex-column align-items-center">
             <div class="icon-container mb-4 p-3 rounded-circle">
               <img src="{{ asset('images/icons/25112024062927search.png') }}" class="img-fluid" style="width: 80px;" alt="شبكات المياه">
             </div>
             <h3 class="card-title h4 fw-bold mb-3">شبكات المياه والصرف الصحي</h3>
             <div class="card-text text-center">تنفيذ مشاريع مد الأنابيب بأقطار مختلفة (100-2300 ملم) مع جميع التوصيلات والملحقات والصمامات والأعمال المدنية المطلوبة.</div>
           </div>
         </div>
       </div>

       <div class="col-lg-6 col-md-6 scroll scroll_left">
         <div class="service-card h-100 p-4 rounded-lg shadow-sm hover-shadow wow fadeInUp" data-wow-delay="0.6s">
           <div class="card-body d-flex flex-column align-items-center">
             <div class="icon-container mb-4 p-3 rounded-circle">
               <img src="{{ asset('images/icons/25112024063512wall.png') }}" class="img-fluid" style="width: 80px;" alt="المباني والإنشاءات">
             </div>
             <h3 class="card-title h4 fw-bold mb-3">المباني والإنشاءات</h3>
             <div class="card-text text-center">تنفيذ مشاريع المباني متعددة الطوابق والمنازل الخاصة والجسور الصغيرة مع استخدام معداتنا الثقيلة المتخصصة.</div>
           </div>
         </div>
       </div>
 <br>
       <div class="col-lg-6 col-md-6 scroll scroll_left">
         <div class="service-card h-100 p-4 rounded-lg shadow-sm hover-shadow wow fadeInUp" data-wow-delay="0.8s">
           <div class="card-body d-flex flex-column align-items-center">
             <div class="icon-container mb-4 p-3 rounded-circle">
               <img src="{{ asset('images/icons/25112024064001soil-analysis.png') }}" class="img-fluid" style="width: 80px;" alt="الاستشارات الهندسية">
             </div>
             <h3 class="card-title h4 fw-bold mb-3">الاستشارات الهندسية</h3>
             <div class="card-text text-center">تقديم الاستشارات الهندسية المتخصصة والتعاون مع الشركات العالمية والاستشاريين الدوليين في تنفيذ المشاريع الكبرى.</div>
           </div>
         </div>
       </div>
 <br>
       <div class="col-lg-6 col-md-6 scroll scroll_right">
         <div class="service-card h-100 p-4 rounded-lg shadow-sm hover-shadow wow fadeInUp" data-wow-delay="1.0s">
           <div class="card-body d-flex flex-column align-items-center">
             <div class="icon-container mb-4 p-3 rounded-circle">
               <img src="{{ asset('images/icons/25112024064208quality.png') }}" class="img-fluid" style="width: 80px;" alt="المقاولات المتخصصة">
             </div>
             <h3 class="card-title h4 fw-bold mb-3">المقاولات المتخصصة</h3>
             <div class="card-text text-center">تنفيذ مشاريع الأنابيب البلاستيكية والحديدية والدكنايل مع أنظمة الضخ المختلفة وجميع الأعمال الخرسانية المطلوبة.</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </section><!-- services -->
 <!-- end services -->



<!-- start Our Staff -->
<div id="our_stuff"></div>
<section class="staff-section" style="background:url('{{ asset('images/c.png') }}');" dir="rtl">
  <!-- Floating Elements -->
  <div class="staff-floating-element"></div>
  <div class="staff-floating-element"></div>
  <div class="staff-floating-element"></div>
  <div class="staff-floating-element"></div>

  <!-- Particles -->
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>
  <div class="staff-particle"></div>

  <div class="container">
    <br>
    <br>
    <h1 class="text-center text-white mb-5 wow fadeInDown" style="z-index: 33; position: relative;">الكادر الخاص بنا</h1>
    <div class="row justify-content-center">
      <div class="col-md-10">
        <div class="staff-content ">
          <h3 class="text-white text-center scroll scroll_zoomIn" style="line-height: 2;">فريق من المتخصصين ذوي الخبرة العاملين في مجال المنتجات والاستشارة وكذلك تقيدم الدعم الفني اينما يكون مكان العميل لدينا</h3>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- end Our Staff -->

<!-- start our works -->
<div id="our_works"></div>
<section class="our-works py-5" dir="rtl">
  <div class="container">
    <div class="section-header text-center wow fadeIn" data-wow-delay="0.3s">
      <h1 class="display-4 fw-bold mb-4 scroll scroll_left">أعمالنا</h1>
      <p>نبذة عن اعمالنا</p>
    </div>

    <div class="works-item wow fadeIn" data-wow-delay="0.4s">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="works-content wow fadeInRight" data-wow-delay="0.5s">
            <h4 style="text-align: justify; line-height: 2;">مشاريع الطرق والصرف الصحي: نفذنا العديد من مشاريع الطرق والصرف الصحي مع أمانة بغداد، بما في ذلك مشروع الحرية للصرف الصحي ومشاريع منطقة الطالبية والكاظمية، باستخدام أنابيب خرسانية وبلاستيكية بأعماق مختلفة.</h4>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="works-image scroll scroll_right" data-wow-delay="0.5s">
            <img src="{{ asset('images/231.webp') }}" width="100%" class="rounded shadow">
          </div>
        </div>
      </div>
    </div>

    <div class="works-item wow fadeIn" data-wow-delay="0.6s">
      <div class="row align-items-center">
        <div class="col-lg-6 order-2 order-lg-1">
          <div class="works-image wow fadeInRight" data-wow-delay="0.5s">
            <img src="{{ asset('images/15.webp') }}" width="100%" class="rounded shadow">
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2">
          <div class="works-content scroll scroll_right" data-wow-delay="0.5s">
            <h4 style="text-align: justify; line-height: 2;">مشاريع المباني والإنشاءات: تخصصنا في تنفيذ المباني متعددة الطوابق والمنازل الخاصة والجسور الصغيرة، مع امتلاك معداتنا الثقيلة الخاصة المطلوبة لتنفيذ هذه المشاريع بأعلى معايير الجودة.</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="works-item wow fadeIn" data-wow-delay="0.8s">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="works-content wow fadeInRight" data-wow-delay="0.5s">
            <h4 style="text-align: justify; line-height: 2;">مشروع شبكة ماء الكرخ (1985-1990): أكبر مشاريعنا حيث نفذنا مد أنابيب الدكنايل بأقطار 700-1600-2300 ملم بطول 60 كيلومتر، بالتعاون مع الاستشاريين الدوليين دبليو إس أتكينز لندن والموردين العالميين بوينت أي موسون وكوبوتا.</h4>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="works-image scroll scroll_right" data-wow-delay="0.5s">
            <img src="{{ asset('images/1212.jpg') }}" width="100%" class="rounded shadow">
          </div>
        </div>
      </div>
    </div>

    <div class="works-item wow fadeIn" data-wow-delay="1.0s">
      <div class="row align-items-center">
        <div class="col-lg-6 order-2 order-lg-1">
          <div class="works-image wow fadeInRight" data-wow-delay="0.5s">
            <img src="{{ asset('images/18.avif') }}" width="100%" class="rounded shadow">
          </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2">
          <div class="works-content scroll scroll_right" data-wow-delay="0.5s">
            <h4 style="text-align: justify; line-height: 2;">التعاون الدولي مع شركة بارسونز الأمريكية (2005-2007): نفذنا مشروع مدينة الصدر لمد أنابيب بلاستيكية ودكنايل بأقطار 150-600 ملم بطول 52 كيلومتر مع جميع الملحقات، مما يعكس قدرتنا على العمل مع أكبر الشركات العالمية.</h4>
          </div>
        </div>
      </div>
    </div>

    <div class="works-item wow fadeIn" data-wow-delay="1.2s">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="works-content wow fadeInRight" data-wow-delay="0.5s">
            <h4 style="text-align: justify; line-height: 2;">الاستشارات الهندسية والتعاون الدولي: عملنا مع كبرى الشركات الاستشارية العالمية مثل شركة سيريكا الفرنسية وهمفريز وبراون لندن، وتعاونا مع موردين عالميين مثل شركة كوبوتا اليابانية، مما أكسبنا خبرة دولية واسعة في مجال الاستشارات الهندسية.</h4>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="works-image scroll scroll_right" data-wow-delay="0.5s">
            <img src="{{ asset('images/oil.png') }}" width="100%" class="rounded shadow">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- end our works -->




<!-- end additional services -->


<!-- end additional services -->

<!-- start photo gallery -->
<section class="gallery-section py-5" style="background-color: #f8f9fa;">
  <div class="container">
    <div class="section-header text-center wow fadeIn" data-wow-delay="0.3s">
      <h2 class="mb-4" style="color: #2c3e50; font-weight: bold;">معرض الصور</h2>
      {{-- <p class="lead" style="color: #6c757d;">استعرض مجموعة من أعمالنا ومشاريعنا المتميزة</p> --}}
    </div>

    <div class="row g-3">
      <!-- Photo 1 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="0.1s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/1.png') }}" alt="صورة 1" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 2 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="0.2s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/2.png') }}" alt="صورة 2" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 3 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="0.3s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/3.png') }}" alt="صورة 3" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 4 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="0.4s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/4.png') }}" alt="صورة 4" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 5 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="0.5s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/5.png') }}" alt="صورة 5" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 6 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="0.6s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/6.png') }}" alt="صورة 6" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 7 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.2s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/7.png') }}" alt="صورة 7" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 8 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.3s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/8.png') }}" alt="صورة 8" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- Photo 9 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.4s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/9.png') }}" alt="صورة 9" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>



      <!-- Photo 12 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.7s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/12.png') }}" alt="صورة 12" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>


      <!-- Photo 13 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.7s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/13.png') }}" alt="صورة 13" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>


      <!-- Photo 14 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.7s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/14.png') }}" alt="صورة 14" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>


      <!-- Photo 15 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.7s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/15.png') }}" alt="صورة 15" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>


      <!-- Photo 16 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.7s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/16.png') }}" alt="صورة 16" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>


      <!-- Photo 17 -->
      <div class="col-lg-2 col-md-4 col-sm-6 col-6">
        <div class="gallery-item wow fadeInUp" data-wow-delay="1.7s">
          <div class="gallery-image-wrapper" style="position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;">
            <img src="{{ asset('images/photos/17.png') }}" alt="صورة 17" class="img-fluid" style="width: 100%; height: 300px; object-fit: contain; transition: transform 0.3s ease;">
            <div class="gallery-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,123,255,0.8); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: center; justify-content: center;">
              <i class="fas fa-search-plus" style="color: white; font-size: 24px;"></i>
            </div>
          </div>
        </div>
      </div>





  </div>{{-- row --}}
</section>
<style>
.gallery-image-wrapper:hover {
  transform: scale(1.05);
}

.gallery-image-wrapper:hover .gallery-overlay {
  opacity: 1;
}

.gallery-image-wrapper:hover img {
  transform: scale(1.1);
}

.gallery-item {
  cursor: pointer;
}

@media (max-width: 768px) {
  .gallery-image-wrapper img {
    height: 150px;
  }
}
</style>

<!-- end photo gallery -->

<!-- start contact us -->





<!-- start contact us -->
<div id="contact_us"></div>
<section class="contact-section py-5">
  <!-- Background Elements -->
  <div class="contact-bg-element"></div>
  <div class="contact-bg-element"></div>

  <div class="container">
    <div class="section-header wow fadeIn" data-wow-delay="0.3s">
      <br>
      <br>
      <br>
      <h1>اتصل بنا</h1>
    </div>

    <!-- مواقعنا والتواصل -->
    <div class="row justify-content-center mb-5">
      <div class="col-md-10">
        <div class="contact-info-section wow fadeInUp" data-wow-delay="0.4s" style="background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); border-radius: 15px; padding: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; direction: rtl;">
          
          <div class="row">
            <div class="col-md-6 mb-4">
              <div style="background: white; padding: 25px; border-radius: 10px; height: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.08);">
                <h4 style="color: #28a745; margin-bottom: 15px; font-weight: bold;">🇮🇶 العراق – بغداد</h4>
                <p style="color: #495057; font-size: 16px; line-height: 1.6; margin-bottom: 0;">المنصور – شارع 14 رمضان</p>
              </div>
            </div>
            
            <div class="col-md-6 mb-4">
              <div style="background: white; padding: 25px; border-radius: 10px; height: 100%; box-shadow: 0 5px 15px rgba(0,0,0,0.08);">
                <h4 style="color: #dc3545; margin-bottom: 15px; font-weight: bold;">🇦🇪 الإمارات – دبي</h4>
                <p style="color: #495057; font-size: 16px; line-height: 1.6; margin-bottom: 0;">شارع الميناء – بناية الطيار<br>الطابق الثالث، مكتب 310</p>
              </div>
            </div>
          </div>
          
          <div class="contact-details mt-4" style="background: white; padding: 25px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.08);">
            <div class="row justify-content-center">
              <div class="col-md-8">
                <p style="margin-bottom: 12px; color: #495057; font-size: 16px;">📞 <a href="tel:+971504655096" style="color: #151a1f; text-decoration: none;">+971 50 465 5096</a> | فاكس: <a href="tel:+97143982775" style="color: #151a1f; text-decoration: none;">+971 4 398 2775</a></p>
                <p style="margin-bottom: 12px; color: #495057; font-size: 16px;">✉️ <a href="mailto:info@awtadalkhima.com" style="color: #151a1f; text-decoration: none;">info@awtadalkhima.com</a></p>
                <p style="margin-bottom: 0; color: #495057; font-size: 16px;">🌐 <a href="http://www.awtadalkhima.com" target="_blank" style="color: #151a1f; text-decoration: none;">www.awtadalkhima.com</a></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="social-buttons wow fadeInUp " data-wow-delay="0.5s">
          <div style="display: flex; flex-wrap:wrap; justify-content: center; padding: 30px; gap: 30px;">
            <a href="https://wa.me/+971504655096" class="social-icon scroll scroll_right" target="_blank">
              <img src="{{ asset('images/icons/whatsapp.png') }}" style="width:90px" alt="واتساب">
            </a>
            <a href="https://www.instagram.com/" class="social-icon " target="_blank">
              <img src="{{ asset('images/icons/instagram.png') }}" style="width:90px" alt="انستغرام">
            </a>

                        <a href="https://web.facebook.com/profile.php?id=61570116857668" class="social-icon" target="_blank">
              <img src="{{ asset('images/icons/facebook.png') }}" style="width:90px" alt="فيسبوك">
            </a>


            <a href="mailto:info@awtadalkhima.com" class="social-icon scroll scroll_left" target="_blank">
              <img src="{{ asset('images/icons/email.png') }}" style="width:90px" alt="ايميل">
            </a>
          </div><!-- display: flex -->

        </div><!-- social-buttons -->
      </div>

    </div>
  </div>
</section><!-- contact_us -->


<!-- end contact us -->

<!-- start signature section -->
<section class="signature-section py-5" style="background-color: #f8f9fa; border-top: 2px solid #151a1f;">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8 text-center">
        <div class="signature-content wow fadeInUp" data-wow-delay="0.3s">
          <h2 class="signature-title mb-4" style="color: #2c3e50; font-weight: bold;">التوقيع</h2>
          
          <div class="signature-details" style="background: white; padding: 30px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1);">
            <h3 style="color:#151a1f; margin-bottom: 10px; font-size: 24px;">Mohammed Yaseen Al Rawi</h3>
            <p style="color: #6c757d; font-size: 18px; margin-bottom: 5px;">CEO</p>
            <p style="color: #151a1f; font-weight: bold; font-size: 20px; margin-bottom: 20px;">AWTAD ALKHIMA</p>
            <p style="color: #495057; font-size: 16px; margin-bottom: 20px;">AWTAD ALKHIMA for Engineering, Contracting & General Trading</p>
            
            <div class="contact-info" style="text-align: center;">
              <p style="margin-bottom: 8px; color: #495057;">📞 <a href="tel:+9647901510853" style="color: #151a1f; text-decoration: none;">+964 790 151 0853 (Iraq)</a></p>
              <p style="margin-bottom: 8px; color: #495057;">📞 <a href="tel:+971505584251" style="color: #151a1f; text-decoration: none;">+971 50 558 4251 (Dubai)</a></p>
              <p style="margin-bottom: 8px; color: #495057;">✉️ <a href="mailto:info@awtadalkhima.com.iq" style="color: #151a1f; text-decoration: none;">info@awtadalkhima.com.iq</a></p>
              <p style="margin-bottom: 8px; color: #495057;">🌐 <a href="http://awtadalkhima.com.iq" target="_blank" style="color: #151a1f; text-decoration: none;">awtadalkhima.com.iq</a></p>
              <p style="margin-bottom: 0; color: #495057;">📍 Baghdad, Iraq | Dubai, UAE</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- end signature section -->

<style>
    /* Custom Responsive Styles */
    
    /* Hero Section Defaults */
    .hero-logo {
        max-width: 500px;
    }
    .hero-subtitle {
        display: block;
        color: #fff;
        margin-top: 10px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }

    /* Media Queries for Medium Screens (Tablets) */
    @media (max-width: 991px) {
        .hero-logo {
            max-width: 350px !important;
        }
        .hero-subtitle {
            font-size: 1.2rem;
        }
        .display-4 {
            font-size: 2.8rem;
        }
        /* Override inline styles for social icons */
        .social-icon img {
            width: 70px !important;
        }
        .service-card h3 {
            font-size: 1.3rem;
        }
    }

    /* Media Queries for Small Screens (Mobile) */
    @media (max-width: 576px) {
        /* Hero */
        .hero-logo {
            max-width: 200px !important;
        }
        .hero-subtitle {
            font-size: 0.9rem;
            margin-top: 5px;
        }
        .carousel-caption {
            bottom: 15%;
            padding-bottom: 0;
        }
        
        /* General Typography */
        .display-4 {
            font-size: 2rem !important;
        }
        .section-header h1 {
            font-size: 2rem !important;
        }
        .lead {
            font-size: 1rem;
        }
        h1 { font-size: 1.8rem !important; }
        h2 { font-size: 1.6rem !important; }
        h3 { font-size: 1.4rem !important; }
        h4 { font-size: 1.1rem !important; }

        /* Services */
        /* Override inline styles for service icons */
        .icon-container img {
            width: 50px !important;
        }
        .service-card {
            padding: 1.5rem !important;
        }
        
        /* Staff */
        .staff-content h3 {
            font-size: 1rem !important;
            line-height: 1.6 !important;
        }
        
        /* Works */
        .works-content h4 {
            font-size: 0.95rem !important;
            line-height: 1.6 !important;
            text-align: center !important;
        }
        .works-item {
            margin-bottom: 2rem;
        }
        
        /* Gallery */
        .gallery-image-wrapper img {
            height: 120px !important;
        }
        
        /* Contact */
        .contact-info-section {
            padding: 20px !important;
        }
        /* Override inline styles for social icons */
        .social-icon img {
            width: 50px !important;
        }
        .social-buttons {
            gap: 15px !important;
            padding: 10px !important;
        }
        
        /* Signature */
        .signature-details {
            padding: 20px !important;
        }
        .signature-title {
            font-size: 1.8rem !important;
        }
    }
</style>

<br>
<br>

@endsection