/* إعادة تعريف متغيرات الألوان لضمان التناسق */
   :root {
       --wm-red: #A52A2A;
       --wm-red-dark: #7A1F1F;
       --wm-dark-gray: #333333;
       --wm-light-gray: #f8f9fa;
       --wm-text-muted: #6c757d;
   }

   /* أنماط عامة للصفحة */
   .contact-page-section {
       padding: 80px 0;
       font-family: 'Jost', sans-serif;
   }

   /* ====== بداية: التعديلات الجديدة لقسم العنوان الصوري ====== */
   .contact-hero-section {
       padding: 100px 0;
       position: relative;
       background-image: url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?q=80&w=2070&auto=format&fit=crop');
       /* صورة احترافية مؤقتة */
       background-size: cover;
       background-position: center;
       color: #fff;
   }

   /* طبقة داكنة فوق الصورة لتحسين وضوح النص */
   .contact-hero-section::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-color: rgba(0, 0, 0, 0.5);
       z-index: 1;
   }

   /* للتأكد من أن المحتوى يظهر فوق الطبقة الداكنة */
   .contact-hero-section .container {
       position: relative;
       z-index: 2;
   }

   .contact-hero-section .contact-page-title {
       font-size: 3.5rem;
       font-weight: 700;
       color: #fff;
       text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
       margin-bottom: 1rem;
   }

   .contact-hero-section .contact-page-subtitle {
       font-size: 1.25rem;
       color: rgba(255, 255, 255, 0.9);
       max-width: 650px;
       margin: 0 auto 50px auto;
   }

   /* ====== نهاية: التعديلات الجديدة لقسم العنوان الصوري ====== */


   /* تصميم قسم معلومات التواصل */
   .contact-info-box {
       background-color: var(--wm-light-gray);
       padding: 40px;
       border-radius: 8px;
       height: 100%;
   }

   .contact-info-box h3 {
       color: var(--wm-dark-gray);
       font-weight: 600;
       margin-bottom: 30px;
   }

   .contact-info-item {
       display: flex;
       align-items: flex-start;
       margin-bottom: 25px;
   }

   .contact-info-item .icon {
       flex-shrink: 0;
       width: 50px;
       height: 50px;
       background-color: var(--wm-red);
       color: #fff;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.2rem;
       margin-right: 20px;
   }

   .contact-info-item h4 {
       font-size: 1.2rem;
       font-weight: 600;
       color: var(--wm-dark-gray);
       margin-bottom: 5px;
   }

   .contact-info-item p,
   .contact-info-item p a {
       margin: 0;
       color: var(--wm-text-muted);
       text-decoration: none;
   }

   .contact-info-item p a:hover {
       color: var(--wm-red);
   }

   /* تصميم نموذج التواصل */
   .contact-form-box {
       padding: 40px;
       border-radius: 8px;
       background-color: #fff;
       box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
   }

   .contact-form-box h3 {
       color: var(--wm-dark-gray);
       font-weight: 600;
       margin-bottom: 30px;
   }

   .form-control {
       border-radius: 5px;
       padding: 12px 15px;
       border: 1px solid #ced4da;
   }

   .form-control:focus {
       border-color: var(--wm-red);
       box-shadow: 0 0 0 0.25rem rgba(165, 42, 42, 0.25);
   }

   .form-floating>label {
       color: var(--wm-text-muted);
   }

   .btn-submit-contact {
       background-color: var(--wm-red);
       border-color: var(--wm-red);
       color: #fff;
       padding: 12px 35px;
       font-weight: 600;
       border-radius: 50px;
       text-transform: uppercase;
       letter-spacing: 0.5px;
       transition: all 0.3s ease;
   }

   .btn-submit-contact:hover {
       background-color: var(--wm-red-dark);
       border-color: var(--wm-red-dark);
       transform: translateY(-3px);
   }

   .text-danger {
       font-size: 0.875em;
   }

   .alert-success {
       border-radius: 5px;
   }

   /* قسم خريطة جوجل */
   .google-map-section {
       padding: 0;
   }

   .google-map-section iframe {
       width: 100%;
       height: 450px;
       border: 0;
   }

   /* قسم التواصل الاجتماعي */
   .social-media-section {
       background-color: var(--wm-light-gray);
   }

   .social-media-section .contact-page-title,
   .social-media-section .contact-page-subtitle {
       color: var(--wm-dark-gray);
   }

   .social-icons-list {
       display: flex;
       justify-content: center;
       gap: 20px;
   }

   .social-icon-link {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       background-color: #fff;
       color: var(--wm-text-muted);
       font-size: 1.5rem;
       text-decoration: none;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
       transition: all 0.3s ease;
   }

   .social-icon-link:hover {
       transform: translateY(-5px);
       color: #fff;
   }

   .social-icon-link.facebook:hover {
       background-color: #3b5998;
   }

   .social-icon-link.twitter:hover {
       background-color: #000000;
   }

   .social-icon-link.instagram:hover {
       background-color: #e1306c;
   }

   .social-icon-link.linkedin:hover {
       background-color: #0077b5;
   }

   .social-icon-link.youtube:hover {
       background-color: #ff0000;
   }

   /* ====== NEW: Styles for the Pricing Section ====== */
   .pricing-section {
       background-color: var(--wm-light-gray);
   }

   .pricing-card {
       background-color: #fff;
       border-radius: 8px;
       padding: 40px;
       border: 1px solid #e0e0e0;
       text-align: center;
       transition: all 0.3s ease;
       height: 100%;
       display: flex;
       flex-direction: column;
   }

   .pricing-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
       border-color: var(--wm-red);
   }

   .pricing-card .icon {
       font-size: 3rem;
       color: var(--wm-red);
       margin-bottom: 20px;
   }

   .pricing-card .tier-name {
       font-size: 1.5rem;
       font-weight: 600;
       color: var(--wm-dark-gray);
       margin-bottom: 15px;
   }

   .pricing-card .tier-description {
       color: var(--wm-text-muted);
       margin-bottom: 30px;
   }

   .pricing-card .feature-list {
       list-style: none;
       padding: 0;
       margin-bottom: 40px;
       text-align: left;
   }

   .pricing-card .feature-list li {
       padding-left: 25px;
       position: relative;
       margin-bottom: 10px;
   }

   .pricing-card .feature-list li::before {
       content: '\f00c';
       /* Font Awesome check icon */
       font-family: 'Font Awesome 5 Free';
       font-weight: 900;
       position: absolute;
       left: 0;
       top: 2px;
       color: #28a745;
   }

   .pricing-card .btn-quote {
       margin-top: auto;
   }

   /* =================================================================
   NEW: RESPONSIVE DESIGN ADJUSTMENTS
================================================================= */

   /* Medium devices (tablets, less than 992px) */
   @media (max-width: 991px) {
       .pricing-card {
           margin-bottom: 30px;
           /* Add space between pricing cards when they stack */
       }
   }


   /* Small devices (phones, less than 768px) */
   @media (max-width: 767px) {
       .contact-page-section {
           padding: 60px 0;
           /* تقليل الهوامش العامة في الصفحة */
       }

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

       .contact-hero-section .contact-page-subtitle {
           font-size: 1.1rem;
           /* تصغير حجم النص الفرعي */
           margin-bottom: 20px;
       }

       /* --- Contact Info & Form --- */
       .contact-info-box,
       .contact-form-box {
           padding: 25px;
           /* تقليل الهوامش الداخلية في الصناديق */
       }

       /* When info box stacks on top of form, add space below it */
       .col-lg-5 {
           margin-bottom: 30px;
       }

       /* --- Service Tiers / Pricing --- */
       .pricing-card .tier-name {
           font-size: 1.3rem;
           /* تصغير حجم عنوان الخدمة */
       }

       .pricing-card {
           padding: 30px;
       }

       /* --- Social Media Icons --- */
       .social-icon-link {
           width: 50px;
           /* تصغير حجم أيقونات التواصل */
           height: 50px;
           font-size: 1.2rem;
       }

       .social-icons-list {
           gap: 15px;
           /* تقليل المسافة بين الأيقونات */
       }
   }