/* في ملف css/style.css */

/* تنسيقات زر "اشترك" */
.btn-newsletter-subscribe {
    background-color: #057d71; /* اللون الأخضر الغامق/المائي الذي حددته */
    border-color: #057d71;
    color: #fff;
    transition: all 0.3s ease;
}

.btn-newsletter-subscribe:hover,
.btn-newsletter-subscribe:focus,
.btn-newsletter-subscribe:active {
    background-color: #FFA500 !important; /* اللون البرتقالي الفاتح */
    border-color: #057d71 !important;
    color: #fff !important;
}

/* تنسيقات أيقونة البريد الإلكتروني */
.newsletter-section .fa-envelope-open-text {
    color: #057d71; /* نفس اللون الأخضر الغامق/المائي الذي حددته */
}
/* يمكنك وضع هذا في style.css */
.contact-newsletter,
.newsletter-section { /* استخدم الكلاس الذي تستخدمه في HTML */
    /* الخصائص الأساسية التي تم تضمينها في الـ HTML مباشرة لأغراض الشرح */
    /* background-image: url('../images/your-background-image.jpg'); */ /* ضع مسار صورتك هنا */
    /* background-size: cover; */
    /* background-position: center; */

    /* **هذا هو السطر المهم لتأثير الـ Parallax (الصورة الثابتة):** */
    background-attachment: fixed; /* يجعل الصورة ثابتة عند التمرير */

    position: relative; /* ضروري لتموضع الـ overlay */
    padding: 80px 0; /* مساحة علوية وسفلية للمحتوى */
    color: #fff; /* لون النص داخل القسم ليكون واضحاً على الخلفية */
    text-align: center; /* توسيط النص */
}

/* الطبقة الشفافة فوق الصورة لجعل النص أكثر وضوحاً */
.contact-newsletter .overlay,
.newsletter-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* طبقة سوداء شفافة 60% */
    z-index: 0; /* تأكد أنها تحت المحتوى */
}

.contact-newsletter .container,
.newsletter-section .container {
    position: relative;
    z-index: 1; /* تأكد أن المحتوى فوق الـ overlay */
}

/* تأكد أن هذه التنسيقات موجودة لضمان التجاوب كما ناقشنا */
@media (max-width: 767.98px) {
    .contact-newsletter .display-4,
    .newsletter-section .display-4 {
        font-size: 2.2rem;
    }
    .contact-newsletter .lead,
    .newsletter-section .lead {
        font-size: 1rem;
    }
    .contact-newsletter .col-md-7,
    .newsletter-section .col-md-7,
    .contact-newsletter .col-md-3,
    .newsletter-section .col-md-3 {
        width: 100%; /* اجعل الأعمدة تأخذ عرض 100% على الشاشات الصغيرة */
    }
    .contact-newsletter .col-md-7,
    .newsletter-section .col-md-7 {
        margin-bottom: 10px; /* مسافة بين حقل الإيميل والزر */
    }

    /* للصور الثابتة في الخلفية، قد تحتاج إلى تعديل بسيط على الجوال */
    .contact-newsletter,
    .newsletter-section {
        background-attachment: scroll; /* في الجوال، يفضل جعلها scroll لمنع مشاكل الأداء */
        background-position: center center;
    }
}
.contact-newsletter {
    /* أضف تنسيقاتك الخلفية هنا (background-image, background-size, etc.) */
    padding: 80px 0; /* مساحة علوية وسفلية */
}

.contact-newsletter .display-4 {
    font-size: 3rem;
}

.contact-newsletter .lead {
    font-size: 1.25rem;
    line-height: 1.8;
}

.contact-newsletter .form-control-lg {
    height: calc(2.875rem + 2px); /* لتكون متناسقة مع الزر */
}

@media (max-width: 767.98px) {
    .contact-newsletter .display-4 {
        font-size: 2.2rem;
    }
    .contact-newsletter .lead {
        font-size: 1rem;
    }
    .contact-newsletter .col-md-7,
    .contact-newsletter .col-md-3 {
        width: 100%; /* اجعل الأعمدة تأخذ عرض 100% على الشاشات الصغيرة */
    }
    .contact-newsletter .col-md-7 {
        margin-bottom: 10px; /* مسافة بين حقل الإيميل والزر */
    }
}