/* ===================================
   Services Background System
   نظام الخلفيات المخصص لصفحات الخدمات
   =================================== */

/* ===================================
   1. Services Page Header Background
   =================================== */

.services-page-header {
  position: relative;
  padding: 6rem 0 4rem;
  background: linear-gradient(135deg, #1a2570 0%, #2d3a8c 50%, #1a2570 100%);
  overflow: hidden;
}

.services-page-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(232, 196, 106, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(232, 196, 106, 0.1) 0%, transparent 50%);
  z-index: 0;
}

.services-page-header > .container {
  position: relative;
  z-index: 1;
}

/* ===================================
   2. Section 1 - Gold Theme with Background Image
   =================================== */

.services-grid-section-1 {
  position: relative;
  padding: 5rem 0;
  background-image: url('../images/back.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

/* الطبقة الضبابية البيضاء فوق الصورة */
.services-grid-section-1::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 0;
  pointer-events: none;
}

/* الدوائر الديكور الذهبية */
.services-grid-section-1::after {
  content: '';
  position: absolute;
  top: -30%;
  right: -5%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(232, 196, 106, 0.15) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  animation: float 8s ease-in-out infinite;
}

/* ===================================
   3. Section 2 - Navy Theme with Background Image
   =================================== */

.services-grid-section-2 {
  position: relative;
  padding: 5rem 0;
  background-image: url('../images/back 2.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  overflow: hidden;
}

/* الطبقة الضبابية البيضاء فوق الصورة */
.services-grid-section-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  z-index: 0;
  pointer-events: none;
}

/* الدوائر الديكور الزرقاء */
.services-grid-section-2::after {
  content: '';
  position: absolute;
  top: -35%;
  left: -6%;
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(26, 37, 112, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 1;
  animation: float 9s ease-in-out infinite;
}

/* ===================================
   4. Container Above Everything
   =================================== */

.services-grid-section-1 > .container,
.services-grid-section-2 > .container {
  position: relative;
  z-index: 10;
}

/* ===================================
   5. Float Animation
   =================================== */

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(30px, -30px) scale(1.05);
  }
}

/* ===================================
   6. Responsive Adjustments
   =================================== */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .services-page-header {
    padding: 3.5rem 0 2.5rem;
  }

  .services-grid-section-1,
  .services-grid-section-2 {
    padding: 2.8rem 0;
    /* Parallax يشتغل على mobile */
    background-attachment: fixed;
  }

  /* زيادة الـ opacity على mobile لتحسين القراءة */
  .services-grid-section-1::before,
  .services-grid-section-2::before {
    background: rgba(255, 255, 255, 0.90);
  }

  /* تصغير الدوائر على mobile */
  .services-grid-section-1::after {
    width: 400px;
    height: 400px;
  }

  .services-grid-section-2::after {
    width: 380px;
    height: 380px;
  }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .services-page-header {
    padding: 4.5rem 0 3rem;
  }

  .services-grid-section-1,
  .services-grid-section-2 {
    padding: 3.5rem 0;
    /* Parallax يشتغل على tablet */
    background-attachment: fixed;
  }

  .services-grid-section-1::before,
  .services-grid-section-2::before {
    background: rgba(255, 255, 255, 0.87);
  }

  .services-grid-section-1::after {
    width: 500px;
    height: 500px;
  }

  .services-grid-section-2::after {
    width: 480px;
    height: 480px;
  }
}

/* Desktop (> 992px) */
@media (min-width: 992px) {
  .services-grid-section-1,
  .services-grid-section-2 {
    /* Parallax يشتغل على desktop */
    background-attachment: fixed;
  }
}

/* ===================================
   7. Performance Optimizations
   =================================== */

.services-grid-section-1::before,
.services-grid-section-1::after,
.services-grid-section-2::before,
.services-grid-section-2::after {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ===================================
   8. Print Styles
   =================================== */

@media print {
  .services-page-header,
  .services-grid-section-1,
  .services-grid-section-2 {
    background: white !important;
  }

  .services-page-header::before,
  .services-grid-section-1::before,
  .services-grid-section-1::after,
  .services-grid-section-2::before,
  .services-grid-section-2::after {
    display: none !important;
  }
}