/* Base styles */
body {
  background-color: #fafafc;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* Glass effect for cards and containers */
.glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
}

.glass-dark {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-apple {
  transition: all 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}

.btn-apple:hover {
  transform: scale(1.02);
}

.section-heading {
  position: relative;
  display: inline-block;
}

.section-heading:after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 0;
  width: 48px;
  height: 3px;
  background: #ff6900;
  border-radius: 4px;
}

.client-badge {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.2s ease;
}

.client-badge:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: #2C7A7B50;
  transform: translateY(-2px);
}

.hover-lift {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -12px rgba(0, 0, 0, 0.15);
}

.navbar-transition {
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
}

.hero-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/home.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-services {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/services.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-about {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/part.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-contact {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/contact.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-bg-partner {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/coop.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Partner section with German and Saudi flags blended */
.partner-flags-bg {
  background-image: url('../images/coop.webp');
  background-size: cover;
  background-repeat: no-repeat;
  background-blend-mode: overlay;
  position: relative;
}


@media screen and (max-width:500px) {

  .hero-bg {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/hero-mobile.webp');

  }
  .hero-bg-contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/hero-mobile.webp');

  }
  .hero-bg-services {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2)), url('../images/services-mobile.webp');

  }
  .hero-bg-partner {
    background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3)), url('../images/parner-mobile.webp');

  }
  .hero-bg-about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1)), url('../images/about-mobile.webp');

  }

}


  /* ===== تحسين ألوان النصوص الأساسية ===== */
        body {
            color: #2d5a3f; /* أخضر زيتوني داكن */
        }
        /* العناوين الرئيسية في الأقسام */
        .section-heading, h2:not(.text-primary), h3:not(.text-primary):not(.text-white) {
            color: #8b2c3d !important;
        }
        /* النصوص الطويلة والوصف */
        .text-gray-700, .text-gray-600, .text-gray-500, p:not(.text-white) {
            color: #3a6b4a !important;
        }
        /* البطاقات والنصوص داخلها */
        .glass p, .glass h3, .glass .text-gray-600, .glass .text-gray-700 {
            color: #2d5a3f !important;
        }
        /* الحفاظ على النص الأبيض في الهيرو والمناطق الداكنة */
        .hero-bg .text-white, .hero-bg p, .partner-flags-bg p, .partner-flags-bg h2, .partner-flags-bg li, .partner-flags-bg .text-gray-200 {
            color: white !important;
        }
        /* لون الروابط في الفوتر */
        footer, footer .text-gray-500 {
            color: #d1d5db;
        }
        /* ===== أنيميشن النبض لأزرار التواصل ===== */
        @keyframes attractPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(255, 105, 0, 0.4);
                transform: scale(1);
            }
            70% {
                box-shadow: 0 0 0 12px rgba(255, 105, 0, 0);
                transform: scale(1.05);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(255, 105, 0, 0);
                transform: scale(1);
            }
        }
       .contact-float{
    position: fixed;
    left: 16px;
    bottom: 20%;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 50;
}

/* الشكل الأساسي */
.contact-item{
    display: flex;
    align-items: center;
    gap: 10px;

    width: 48px;              /* مقفول */
    height: 48px;
    overflow: hidden;

    border-radius: 50%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(10px);

    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    transition: all 0.5s ease;

    padding: 0 15px;
    white-space: nowrap;
}

/* الأيقونة */
.contact-item i{
    font-size: 18px;
    color: #ff6900;
    flex-shrink: 0;
}

/* النص مخفي في البداية */
.contact-item span{
    opacity: 0;
    transform: translateX(10px);
    transition: 0.3s ease;
    font-weight: 500;
    color: #333;
}

/* الحالة النشطة (فتح البوكس) */
.contact-item.active{
    width: 105px;
    border-radius: 999px;
    background: #ff6900;
    transform: scale(1.05);
}

/* لون الأيقونة في الحالة النشطة */
.contact-item.active i{
    color: #fff;
}

/* ظهور النص */
.contact-item.active span{
    opacity: 1;
    transform: translateX(0);
    color: #fff;
}


/* ==============================================
   BUTTON ATTRACTION ANIMATIONS - جذب الانتباه للزرارير
   ============================================== */

/* نبض لفت انتباه للأزرار الأساسية (CTA) */
@keyframes softAttractPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 105, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(255, 105, 0, 0.2);
        transform: scale(1.02);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 105, 0, 0);
        transform: scale(1);
    }
}

/* تطبيق النبض على زرارير الدعوة الأساسية */
.bg-primary:not(.no-animate):not(.lang-option):not(.contact-item),
a.bg-primary:not(.no-animate),
.btn-apple,
section .bg-primary[href*="contact"],
section .bg-primary[href*="services"] {
    animation: softAttractPulse 2.2s infinite ease-in-out !important;
}

/* تأثير وهج متحرك عند hover أو focus */
.bg-primary:hover,
.bg-primary:focus,
.btn-apple:hover,
.btn-apple:focus {
    animation: none !important;
    box-shadow: 0 0 0 0 rgba(255, 105, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease;
    transform: scale(1.03);
}

/* جذب انتباه إضافي للزرارير الثانوية (بوردر) */
.border-white\/50:not(.bg-primary),
.border-primary:not(.bg-primary) {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.border-white\/50:not(.bg-primary):hover,
.border-primary:not(.bg-primary):hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* وميض خفيف على الزرارير العائمة (contact-float) */
.contact-item {
    animation: borderGlow 2s infinite alternate;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 2px rgba(255, 105, 0, 0.3);
        border: 1px solid rgba(255, 105, 0, 0.2);
    }
    100% {
        box-shadow: 0 0 12px rgba(255, 105, 0, 0.6);
        border: 1px solid rgba(255, 105, 0, 0.8);
    }
}

/* حركة جذب إضافية للعنصر النشط من الأزرار العائمة */
.contact-item.active {
    animation: activeContactPulse 1.5s infinite ease-in-out;
}

@keyframes activeContactPulse {
    0% {
        transform: scale(1);
        background: #ff6900;
    }
    50% {
        transform: scale(1.07);
        background: #ff8c42;
        box-shadow: 0 0 0 6px rgba(255, 105, 0, 0.3);
    }
    100% {
        transform: scale(1);
        background: #ff6900;
    }
}

/* منع الأنيميشن للمستخدمين اللي بيكرهوا الحركة (احترام accessibility) */
@media (prefers-reduced-motion: reduce) {
    .bg-primary,
    .btn-apple,
    .contact-item,
    .contact-item.active {
        animation: none !important;
        transition: none !important;
    }
}