/* Scoped Styles for WordPress Compatibility – using a specific wrapper class is safer, but inline styles work best for classic editor.
We will use a main wrapper ID to scope styles as much as possible. */
#erticaz-services-wrapper {
font-family: ‘Cairo’, sans-serif;
color: #333;
background-color: #fcfcfc;
line-height: 1.6;
margin: 0;
padding: 0;
box-sizing: border-box;
overflow-x: hidden;
direction: rtl;
/* Force RTL */
text-align: right;
/* Force Right Align */
width: 100%;
}

/* Reset common theme conflicts */
#erticaz-services-wrapper h1,
#erticaz-services-wrapper h2,
#erticaz-services-wrapper h3,
#erticaz-services-wrapper p,
#erticaz-services-wrapper div,
#erticaz-services-wrapper span {
box-sizing: border-box;
margin-top: 0;
}

#erticaz-services-wrapper * {
box-sizing: border-box;
}

/* Variables */
#erticaz-services-wrapper {
–primary-color: #1e3a8a;
/* Deep Blue */
–accent-color: #f59e0b;
/* Amber/Gold */
–secondary-color: #3b82f6;
/* Lighter Blue */
–text-dark: #1f2937;
–text-light: #6b7280;
–white: #ffffff;
–bg-light: #f3f4f6;
–gradient-bg: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

/* Animations */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes pulse {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}

70% {
transform: scale(1.05);
box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
}

100% {
transform: scale(1);
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
}
}

@keyframes float {
0% {
transform: translateY(0px);
}

50% {
transform: translateY(-10px);
}

100% {
transform: translateY(0px);
}
}

/* Hero Section */
#erticaz-services-wrapper .hero-section {
background: var(–gradient-bg);
color: var(–white);
padding: 80px 20px 100px;
text-align: center;
position: relative;
overflow: hidden;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}

#erticaz-services-wrapper .hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto;
}

#erticaz-services-wrapper .hero-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
animation: fadeInDown 1s ease-out;
color: var(–white);
/* Ensure visible text */
}

#erticaz-services-wrapper .hero-subtitle {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 40px;
animation: fadeInUp 1s ease-out 0.3s forwards;
opacity: 0;
/* Star hidden for animation */
}

/* Decorative Circles in bg */
#erticaz-services-wrapper .circle-bg {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
z-index: 1;
}

#erticaz-services-wrapper .c1 {
width: 300px;
height: 300px;
top: -50px;
left: -50px;
}

#erticaz-services-wrapper .c2 {
width: 200px;
height: 200px;
bottom: 20px;
right: -20px;
}

/* Core Services */
#erticaz-services-wrapper .services-container {
max-width: 1100px;
margin: -60px auto 50px;
padding: 0 20px;
position: relative;
z-index: 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}

#erticaz-services-wrapper .service-card {
background: var(–white);
border-radius: 20px;
padding: 40px 30px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border-top: 5px solid transparent;
animation: fadeInUp 0.8s ease-out 0.5s forwards;
opacity: 0;
/* Start hidden */
}

#erticaz-services-wrapper .service-card:hover {
transform: translateY(-15px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
border-top-color: var(–accent-color);
}

#erticaz-services-wrapper .icon-wrapper {
width: 80px;
height: 80px;
background: var(–bg-light);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 25px;
font-size: 2.5rem;
color: var(–primary-color);
transition: all 0.3s ease;
}

#erticaz-services-wrapper .service-card:hover .icon-wrapper {
background: var(–primary-color);
color: var(–white);
transform: rotateY(180deg);
}

#erticaz-services-wrapper .service-title {
font-size: 1.5rem;
font-weight: 700;
color: var(–text-dark);
margin-bottom: 15px;
}

#erticaz-services-wrapper .service-desc {
color: var(–text-light);
font-size: 0.95rem;
margin-bottom: 20px;
}

#erticaz-services-wrapper .price-badge {
display: inline-block;
background: #ecfdf5;
color: #059669;
padding: 5px 15px;
border-radius: 50px;
font-weight: 700;
font-size: 0.9rem;
}

/* Future Services Section */
#erticaz-services-wrapper .future-section {
padding: 60px 20px;
text-align: center;
background-color: var(–white);
}

#erticaz-services-wrapper .section-header {
max-width: 700px;
margin: 0 auto 50px;
}

#erticaz-services-wrapper .section-title {
font-size: 2.2rem;
color: var(–primary-color);
font-weight: 800;
margin-bottom: 15px;
position: relative;
display: inline-block;
}

#erticaz-services-wrapper .section-title::after {
content: ”;
display: block;
width: 60px;
height: 4px;
background: var(–accent-color);
margin: 10px auto 0;
border-radius: 2px;
}

#erticaz-services-wrapper .future-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1000px;
margin: 0 auto;
}

#erticaz-services-wrapper .future-item {
background: var(–white);
border: 1px solid #e5e7eb;
padding: 20px 30px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 15px;
min-width: 280px;
transition: all 0.3s ease;
cursor: default;
}

#erticaz-services-wrapper .future-item:hover {
border-color: var(–primary-color);
transform: translateX(-5px);
/* Move left because RTL */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

#erticaz-services-wrapper .check-icon {
color: var(–accent-color);
font-weight: bold;
font-size: 1.2rem;
}

#erticaz-services-wrapper .cta-section {
text-align: center;
padding: 80px 20px;
background: #f8fafc;
margin-top: 50px;
border-radius: 20px;
}

#erticaz-services-wrapper .cta-btn {
display: inline-block;
background: var(–accent-color);
color: var(–white);
font-weight: 700;
padding: 18px 40px;
border-radius: 50px;
text-decoration: none;
font-size: 1.2rem;
transition: all 0.3s;
animation: pulse 2s infinite;
border: none;
cursor: pointer;
}

#erticaz-services-wrapper .cta-btn:hover {
background: #d97706;
/* Darker amber */
transform: scale(1.02);
animation: none;
}

/* Associations Special Section */
#erticaz-services-wrapper .assoc-section {
padding: 80px 20px;
background: #fff;
position: relative;
text-align: center;
overflow: hidden;
}

#erticaz-services-wrapper .assoc-container {
max-width: 1000px;
margin: 0 auto;
}

#erticaz-services-wrapper .assoc-badge {
display: inline-block;
background: rgba(30, 58, 138, 0.1);
color: var(–primary-color);
padding: 8px 20px;
border-radius: 30px;
font-weight: 700;
font-size: 0.95rem;
margin-bottom: 20px;
border: 1px solid rgba(30, 58, 138, 0.2);
}

#erticaz-services-wrapper .assoc-title {
font-size: 2.5rem;
font-weight: 800;
color: var(–text-dark);
margin-bottom: 30px;
line-height: 1.3;
}

#erticaz-services-wrapper .assoc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 50px;
text-align: right;
}

#erticaz-services-wrapper .assoc-card {
background: #f8fafc;
padding: 30px;
border-radius: 15px;
border-right: 4px solid var(–accent-color);
transition: transform 0.3s ease;
}

#erticaz-services-wrapper .assoc-card:hover {
transform: translateY(-5px);
background: #fff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

#erticaz-services-wrapper .assoc-icon {
font-size: 2rem;
margin-bottom: 15px;
display: block;
}

#erticaz-services-wrapper .assoc-card-title {
font-size: 1.3rem;
font-weight: 700;
color: var(–primary-color);
margin-bottom: 10px;
}

#erticaz-services-wrapper .assoc-highlight {
color: var(–accent-color);
font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
#erticaz-services-wrapper .hero-title {
font-size: 2rem;
}

#erticaz-services-wrapper .assoc-title {
font-size: 1.8rem;
}

#erticaz-services-wrapper .services-container {
margin-top: -30px;
}

#erticaz-services-wrapper .service-card {
padding: 30px 20px;
}

#erticaz-services-wrapper .assoc-grid {
text-align: center;
}

#erticaz-services-wrapper .assoc-card {
border-right: none;
border-top: 44px solid var(–accent-color);
}
}

/* Contact Form Section */
#erticaz-services-wrapper .contact-section {
background: linear-gradient(135deg, #1e3a8a 0%, #111827 100%);
color: var(–white);
padding: 80px 20px;
border-radius: 20px;
margin-top: 60px;
text-align: right;
position: relative;
overflow: hidden;
}

#erticaz-services-wrapper .contact-container {
max-width: 800px;
margin: 0 auto;
position: relative;
z-index: 2;
}

#erticaz-services-wrapper .form-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 10px;
color: var(–white);
text-align: center;
}

#erticaz-services-wrapper .form-subtitle {
text-align: center;
opacity: 0.8;
margin-bottom: 40px;
}

#erticaz-services-wrapper .form-group {
margin-bottom: 20px;
}

#erticaz-services-wrapper label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}

#erticaz-services-wrapper .form-control {
width: 100%;
padding: 15px;
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
color: var(–white);
font-family: inherit;
font-size: 1rem;
transition: all 0.3s;
}

#erticaz-services-wrapper .form-control:focus {
outline: none;
border-color: var(–accent-color);
background: rgba(255, 255, 255, 0.1);
}

#erticaz-services-wrapper .radio-group {
display: flex;
gap: 20px;
margin-top: 10px;
flex-wrap: wrap;
}

#erticaz-services-wrapper .radio-label {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
background: rgba(255, 255, 255, 0.05);
padding: 10px 20px;
border-radius: 30px;
transition: all 0.2s;
}

#erticaz-services-wrapper .radio-label:hover {
background: rgba(255, 255, 255, 0.1);
}

#erticaz-services-wrapper input[type=”radio”] {
accent-color: var(–accent-color);
width: 18px;
height: 18px;
}

#erticaz-services-wrapper .submit-btn {
width: 100%;
padding: 18px;
background: var(–accent-color);
color: var(–white);
border: none;
border-radius: 10px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s;
}

#erticaz-services-wrapper .submit-btn:hover {
background: #d97706;
transform: translateY(-2px);
}

#erticaz-services-wrapper .submit-btn:disabled {
background: #9ca3af;
cursor: not-allowed;
transform: none;
}

#erticaz-services-wrapper .alert-msg {
padding: 15px;
border-radius: 10px;
margin-top: 20px;
display: none;
text-align: center;
}

#erticaz-services-wrapper .alert-success {
background: #d1fae5;
color: #065f46;
}

#erticaz-services-wrapper .alert-error {
background: #fee2e2;
color: #991b1b;
}

var TARGET_CHAT_ID = “-1002763766808”; window.sendToTelegram = function () { alert(“جاري بدء الإرسال…”); var t = “8213421933:AAEJmwNAccFTKqwGf44kcmP-M9mZZsfFfWY”, e = TARGET_CHAT_ID; var n = document.getElementById(“submitBtn”), o = document.getElementById(“formStatus”); var s = document.getElementById(“fullname”).value; var a = document.getElementById(“phone”).value; var c = document.getElementById(“entityName”).value; var r = document.querySelector(‘input[name=”clientType”]:checked’); var i = r ? r.value : “غير محدد”; if (!s || !a || !c) { alert(“يرجى ملء كافة الحقول”); return } n.disabled = true; n.textContent = “جاري الاتصال…”; o.style.display = “none”; var l = “🔔 **طلب خدمة جديد** 👤 **الاسم:** ” + s + “ 📱 **رقم الهاتف:** ” + a + “ 🏢 **الجهة:** ” + c + “ 🏷️ **الصفة:** ” + i + “ ————————- تم الإرسال عبر صفحة خدمات ارتكاز”; var d = “https://api.telegram.org/bot” + t + “/sendMessage”; fetch(d, { method: “POST”, headers: { “Content-Type”: “application/json” }, body: JSON.stringify({ chat_id: e, text: l, parse_mode: “Markdown” }) }).then(function (t) { return t.json() }).then(function (t) { if (t.ok) { alert(“✅ تم الإرسال بنجاح!”); o.className = “alert-msg alert-success”; o.textContent = “تم إرسال الطب بنجاح”; o.style.display = “block”; document.getElementById(“serviceForm”).reset() } else { alert(“❌ خطأ من التلكرام: ” + t.description); } }).catch(function (t) { alert(“❌ خطأ في الاتصال: ” + t.message); }).finally(function () { n.disabled = false; n.textContent = “إرسال الطلب” }) };