/* --- إعدادات أساسية --- */
html { scroll-behavior: smooth; }
body {
margin: 0;
min-height: 100vh;
box-sizing: border-box;
font-family: 'Segoe UI', Arial, sans-serif;
border: 25px solid;
border-image: linear-gradient(to bottom, #ffffff, #c9c0b3) 30;
background: linear-gradient(#ffffff 50%, #c9c0b3 90%) fixed;
padding-top: 10px;
}
/* --- القائمة العلوية --- */
/* --- תפריט ניווט עליון --- */
nav {
display: flex;
justify-content: space-between; /* هذا سيوزع العناصر الثلاثة (يمين، وسط، يسار) */
align-items: center;
padding: 0 0; /* تقليل الـ padding */
height: 70px;
background: #2c3e50;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
left: 25px; /* نفس عرض الإطار الأيسر */
right: 25px; /* نفس عرض الإطار الأيمن */
width: calc(100% - 50px); /* عرض الصفحة ناقص عرض الإطار من الجهتين */
}
/* הגדרת הצדדים כדי שישמרו על איזון */
/* 2. جعل كل قسم يأخذ حجمه الفعلي */
.nav-left, .nav-links, .nav-right {
flex: 1; /* جعل الثلاثة متساوين في المساحة المتاحة للترتيب */
display: flex;
align-items: center;
}
.nav-right {
justify-content: center; /* هذا سيدفع الأيقونات لأقصى اليسار */
}
/* 4. التأكد من توسيط الروابط في المنتصف */
.nav-links {
justify-content: center;
}
/* אם ברצונך להוסיף טקסט או אלמנט נוסף בצד ימין (הריק שסימנת) */
.nav-left::after {
content: "איכות | שירות | מחיר";
color: #ff6600;
font-size:0.9rem;
font-weight: bold; /* מודגש כפי שביקשת */
letter-spacing: 1px;
/* margin-right: 15px;*/
white-space: nowrap;
display: inline-block; /* מוודא שהטקסט מגיב נכון למרווחים */
}
.logo { width:85px; border-radius: 5px; }
.nav-links { display: flex; gap: 20px; }
.nav-links a { color: white; text-decoration: none; font-weight: bold; padding: 10px; transition: 0.3s; }
.nav-links a:hover { background: #34495e; border-radius: 5px; color: #27ae60; }
/* --- אזור יצירת קשר בתוך הניווט --- */
.contact-sidebar { display: flex; align-items: center; gap: 15px; }
.contact-sidebar p { display: none; } /* מסתיר את הטקסט כדי לחסוך מקום בתפריט העליון */
.social-icons { display: flex; gap: 10px; font-size: 20px; }
.social-icons a { color: white; transition: 0.3s; }
.social-icons a:hover { color: #27ae60; transform: scale(1.2); }
.social-container {
display: flex;
flex-direction: column ; /* מסדר את האלמנטים אחד מעל השני */
align-items: center; /* ממקם אותם במרכז */
gap: 5px; /* מרווח קטן בין הטקסט לאייקונים */
}
.social-text {
font-size: 0.9rem; /* טקסט קטן כדי שלא יתפוס יותר מדי מקום */
color: #ff6600; /* צבע לבן בהתאם לעיצוב ה-Header שלך */
white-space: nowrap; /* מונע מהטקסט לרדת שורה */
font-weight: bold; /* הוספת הדגשה */
}
/* --- תוכן מרכזי --- */
main { padding: 0px; }
section { padding: 40px 0; text-align: center; }
/* --- Hero Section المحدث --- */
.hero {
background-image: url("images/new-hero.png");
background-size: cover;
background-position: center;
height: 470px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: white;
border-radius: 15px;
margin-bottom: 40px;
position: relative; /* ضروري لتأثيرات النص */
}.hero:hover {
transform: scale(1);
}
/* تأثير الإطار المتوهج للنص */
.hero h1 {
font-size:2rem;
color: #fff;
text-shadow: 0 0 10px #ff6600, 0 0 20px #ff6600, 0 0 30px #ff6600, 0 0 40px #d35400;
padding: 20px;
/*border: 3px solid rgba(255, 255, 255, 0.3);*/
border-radius: 15px;
/*background: rgba(0, 0, 0, 0.2);*/
backdrop-filter: blur(2px);
}
.hero h2 { color: #ecf0f1; font-size: 1.5rem; }
/* ריווח כללי לכל האזורים */
section {
padding: 10px 20px;
}
/* --- المنتجات --- */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
max-width: 1200px;
margin: auto;
}
.product-card {
background: white;
border: 2px solid transparent;
border-radius: 12px;
padding: 20px;
text-align: center;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.product-card:hover { border-color: #27ae60; transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.2); }
.product-img { width: 100%; height: 250px; object-fit: cover; border-radius: 8px; cursor: zoom-in; }
.buy-btn { background-color: #27ae60; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; transition: 0.3s; }
/* --- אודות וטקסטים --- */
.about-section {
background-color: #ffffff;
/*border: 5px double #2c3e50;*/
/* border-radius: 15px;*/
padding: 30px;
margin: 40px auto;
max-width: 800px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
text-align: center;
direction: rtl;
}
h1, h2 { color: #2c3e50; text-shadow: 2px 2px 4px rgba(0,0,0,0.2); }
#testimonials .product-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
padding: 20px;
}
.product-card {
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: transform 0.3s ease;
text-align: center;
}
.product-card:hover {
transform: translateY(-5px); /* אפקט קפיצה קטן במחשב */
}
#shop h2::after, #about h2::after, #testimonials h2::after , #school h2::after {
content: ""; display: block; width: 60px; height: 3px; background-color: #27ae60; margin: 15px auto;
}
/* --- الفوتر --- */
/* --- עיצוב פוטר ממוקד וסימטרי --- */
footer {
background-color: #2c3e50;
color: white;
padding: 40px 20px 20px 20px;
margin-top: 30px;
text-align: center; /* יישור טקסט פנימי למרכז */
direction: rtl;
}
.footer-content {
display: grid;
/* מרכז את הטורים בצורה אוטומטית */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 30px;
max-width: 1000px; /* צמצום מעט כדי שהכל ייראה מרוכז */
margin: 0 auto;
justify-items: center; /* ממקם כל טור במרכז העמודה שלו */
}
.footer-section {
padding: 10px;
display: flex;
flex-direction: column;
align-items: center; /* הופך את התוכן בכל טור לממורכז */
text-align: center;
}
/* תיקון צבע הטקסט בתוך הפוטר */
.footer-section h2 {
color: #ff6600 !important; /* צבע לבן-אפרפר בהיר וקריא */
font-size: 1.1rem; /* גודל טקסט מתאים לפוטר */
margin: 5px 0; /* מרווחים למראה מסודר */
font-weight: bold !important; /* משקל טקסט רגיל כדי להבדיל מהכותרות הראשיות */
}
.footer-section h3 {
margin-bottom: 12px;
color: #27ae60;
font-size: 1.1rem;
}
/* טיפול ספציפי באייקונים כדי שיהיו במרכז */
.footer-section .social-icons {
display: flex;
justify-content: center; /* מרכז את האייקונים */
gap: 15px;
font-size: 20px;
margin-top: 5px;
}
/* תיקון צבע קישורים בפוטר */
.footer-section a.contact-link {
color: #ff6600 !important; /* צבע צהוב-זהב בולט על הרקע הכהה */
text-decoration: none; /* מסיר את קו התחתי המיותר */
font-weight: bold;
display: block;
margin: 5px 0;
transition: color 0.3s;
}
.footer-section a.contact-link:hover {
color: #ffffff !important; /* הופך ללבן כשעוברים עם העכבר */
}
.footer-bottom {
margin-top: 30px;
padding-top: 15px;
border-top: 1px solid #3e5871; /* קו הפרדה עדין */
font-size: 0.8rem;
color: #bdc3c7;
}
/* --- نظام المعرض والـ Lightbox --- */
.program-gallery { display: flex; gap: 15px; overflow-x: auto; padding: 10px 0; scrollbar-width: none; }
.program-gallery img {
flex: 0 0 250px;
height: 200px;
object-fit: cover;
border-radius: 12px;
cursor: default; /* تم التغيير من zoom-in إلى default */
}
.lightbox {
display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(0,0,0,0.95); z-index: 99999; flex-direction: column; align-items: center; justify-content: center;
}
.main-zoomed-img {
width: 800px; /* عرض ثابت */
height: 500px; /* ارتفاع ثابت */
object-fit: contain; /* يضمن احتواء الصورة كاملة دون قصها، مع ترك مساحات فارغة (Letterboxing) إذا لزم الأمر */
background-color: #000; /* خلفية سوداء في حال كانت أبعاد الصورة لا تملأ المساحة */
border: 3px solid white;
border-radius: 8px;
margin-bottom: 20px;
display: block;
margin-left: auto;
margin-right: auto;
}
/* تنسيق زر الإغلاق الجديد (قريب وواضح) */
/* حاوية داخلية لتجمع الصورة والزر معاً */
.lightbox-content-wrapper {
position: relative; /* النقطة المرجعية للزر */
display: inline-block;
}
/* تنسيق زر الإغلاق ليكون داخل الحاوية */
.close-lightbox {
position: absolute;
top: -40px; /* يظهر فوق الصورة مباشرة */
right: 0; /* يلتصق بجهة اليمين الخاصة بالإطار */
color: white;
font-size: 35px;
font-weight: bold;
cursor: pointer;
z-index: 100002;
transition: color 0.3s;
}
.close-lightbox:hover {
color: #ff6600;
}
/* تنسيق زر الإغلاق */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
/* --- Lightbox & Filmstrip System (Updated) --- */
/* 2. الصورة الرئيسية */
@media (max-width: 850px) {
.main-zoomed-img {
width: 90vw; /* عرض مرن للموبايل */
height: 60vh; /* ارتفاع نسبي */
}
}
@media (max-width: 850px) {
.filmstrip-container {
display: flex;
flex-wrap: wrap; /* السماح للصور بالانتقال لصف جديد */
justify-content: center;
gap: 5px; /* مسافة أصغر بين الصور */
overflow-x: hidden; /* إخفاء شريط التمرير الأفقي */
max-height: 140px; /* تحديد ارتفاع يسمح بصفين فقط */
overflow-y: auto; /* تمرير عمودي إذا كان العدد كبيراً */
}
.filmstrip-container .thumb {
width: 45px !important; /* تصغير حجم الصور لتناسب صفين */
height: 45px !important;
flex-shrink: 0;
}
}
/* 3. حاوية شريط الصور (Filmstrip) */
* حاوية شريط الصور */
/* حاوية شريط الصور */
/* حاوية الصور المصغرة */
.filmstrip-container {
display: flex;
justify-content: center; /* توسيط الشريط */
align-items: center;
gap: 8px;
padding: 10px;
overflow-x: auto; /* يسمح بالتمرير إذا كان العدد كبيراً */
width: 100%; /* التأكد أنها تأخذ العرض المتاح */
scrollbar-width: thin; /* شكل شريط التمرير */
}
/* التأكد من أن الصور المصغرة تأخذ مساحة مناسبة */
.filmstrip-container .thumb {
width: 60px !important;
height: 60px !important;
object-fit: cover;
cursor: pointer;
border: 2px solid transparent;
border-radius: 4px;
flex-shrink: 0; /* مهم جداً لمنع انضغاط الصور */
transition: 0.3s;
}
/* الصور المصغرة داخل الشريط */
.filmstrip-container img {
width: 50px;
height: 50px;
object-fit: cover;
flex-shrink: 0; /* يمنع الصور من الانكماش أو الاختفاء */
cursor: pointer;
border: 2px solid transparent;
}
.filmstrip-container .thumb.active {
border-color: #27ae60;
transform: scale(1.05);
}
@media (max-width: 480px) {
.close-lightbox {
top: 10px;
right: 20px;
font-size: 40px;
}
}
/* إخفاء شريط التمرير في المتصفحات */
.filmstrip-container::-webkit-scrollbar { height: 4px; }
.filmstrip-container::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
#backToTopBtn {
display: none; /* مخفي افتراضياً */
position: fixed;
bottom: 30px;
left: 30px;
z-index: 2000;
border: none;
background-color: #27ae60;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 50%;
font-size: 18px;
box-shadow: 0 4px 6px rgba(0,0,0,0.2);
transition: 0.3s;
}
#backToTopBtn:hover {
background-color: #219653;
transform: scale(1.1);
}
/*MOBILE*/
@media (
max-width: 768px) {
nav {
flex-direction: row !important; /* תמיד שורה במובייל */
height: 70px !important;
padding: 0 10px !important;
}
.nav-left, .nav-right {
display: none !important;
}
.logo { width: 70px; margin-bottom: 5px; }
/* הצגת ההמבורגר בלבד */
.menu-toggle {
display: flex !important;
}
/* מרכוז תפריט הקישורים */
.nav-links {
top: 60px !important; /* התאמה לגובה החדש של ה-Nav */
}
}
.nav-links a {
padding: 5px; /* הקטנת הריווח סביב כל קישור */
font-size:1.0rem;
}
}
/* هذا الأمر يخبر المتصفح أن يترك مسافة 80 بكسل فوق القسم عند الضغط على الرابط */
/* רספונסיביות */
@media (max-width: 768px) {
.footer-content { grid-template-columns: 1fr; gap: 10px; }
.footer-section:nth-child(2) { text-align: right; } /* בטלפון מיישרים לימין */
}
/* התאמה לרספונסיביות */
/* רספונסיביות */
@media (max-width: 768px) {
.footer-content {
grid-template-columns: 1fr;
gap: 20px;
}
/* הסרנו את השורה שגרמה לטור השני להיות מיושר לימין */
}
section {
animation: fadeIn 1s ease-in-out;
}
@media (max-width: 480px) {
/* --- תיקון הלייטבוקס למובייל --- */
.lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.95);
z-index: 99999; /* הוספנו עוד 9 כדי להבטיח עליונות */
overflow-y: auto;
padding: 50px 10px 20px 10px;
box-sizing: border-box;
align-items: flex-start; /* שונה ממרכז כדי למנוע חיתוך למעלה */
justify-content: center;
/* אפקט טשטוש לרקע כשהלייטבוקס פעיל */
backdrop-filter: blur(5px);
}}
/* تنسيق زر التواصل داخل اللייטבוקס */
.agent-btn {
display: block;
margin: 15px auto 0 auto; /* توسيط الزر وإضافة مسافة من الأعلى */
padding: 10px 30px;
background-color: #27ae60;
color: white;
border: none;
border-radius: 5px;
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
}
.agent-btn:hover {
background-color: #219150;
}
/* التأكد من توسيط شريط الصور */
.filmstrip-container {
display: flex;
justify-content: center; /* التوسيط الأفقي للشريط */
align-items: center;
gap: 10px;
margin: 20px auto; /* هامش للتباعد */
width: fit-content; /* عرض الشريط يكون بحجم محتوياته فقط */
max-width: 90vw;
overflow-x: auto;
}
/* هذا الكود يعمل فقط في شاشات الموبايل (عرض أقل من 768 بكسل) */
@media (max-width: 768px) {
main {
padding-top: 0; /* يمكنك تغيير القيمة حسب المساحة المطلوبة */
}
/* أو إذا كنت تفضل إضافة مساحة لكل قسم على حدة */
section {
margin-top: 40px;
}
}
/* هذا الكود يطبق على جميع الأقسام */
section {
/* يجب أن تكون القيمة مساوية لارتفاع الـ nav أو أكبر قليلاً */
scroll-margin-top: 90px;
}
/* في نسخة الموبايل قد تحتاج لزيادتها إذا كان الـ nav أطول */
@media (max-width: 768px) {
section {
scroll-margin-top:40px; /* اضبط هذه القيمة حتى ترى العنوان بالكامل */
}
}
/* עיצוב המבורגר למובייל בלבד */
.menu-toggle {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 10px;
}
.menu-toggle span {
width: 25px; height: 3px; background: white;
}
@media (max-width: 768px) {
/* נקה את ה-nav מרוחב דינמי שיוצר בעיות */
nav {
width: 100% !important;
left: 0 !important;
right: 0 !important;
padding: 0 !important;
justify-content: space-between;
}
/* הסתר את הקישורים והלוגו העמוסים כדי להשאיר מקום רק להמבורגר */
.nav-left, .nav-right, .nav-links {
display: none; /* הקישורים יהיו מוסתרים עד ללחיצה */
}
/* הצג את ההמבורגר במובייל */
.menu-toggle {
display: flex !important;
}
.nav-links.active {
display: flex !important;
position: fixed;
top: 60px;
left: 0;
width: 100%;
/* height: 38vh;*/ /* لتغطية كامل الشاشة عمودياً */
background: rgba(44, 62, 80, 0.95); /* إضافة شفافية خفيفة مع بلور */
/* backdrop-filter: blur(10px);*/ /* سر العصرية: تأثير الزجاج المضبب */
flex-direction: column;
align-items: center; /* توسيط الروابط */
justify-content: flex-start;
padding-top: 50px;
box-shadow: none;
z-index: 1000;
transition: all 0.3s ease-in-out; /* حركة انسيابية عند الفتح */
}
/* تنسيق الروابط لتبدو أكبر وأوضح */
.nav-links a {
font-size: 20px;
color: white;
text-decoration: none;
margin: 15px 0;
font-weight: 500;
transition: color 0.3s;
}
.nav-links a:hover {
color: #f1c40f; /* لون مميز عند الضغط */
}
}
/* מוסתר בדסקטופ */
.mobile-only-info {
display: none;
flex-direction: column;
align-items: center;
gap: 10px;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #34495e;
}
@media (max-width: 768px) {
/* נציג את המידע רק במובייל */
.mobile-only-info {
display: flex;
}
/* הסתרת האלמנטים המקוריים שגרמו לדחיסה */
.nav-left::after, .nav-right .social-container {
display: none !important;
}
}
/* Hide mobile branding by default on desktop */
.mobile-branding {
display: none;
}
@media (max-width: 768px) {
/* Adjust nav to be a flex container to hold the mobile branding */
nav {
display: flex !important;
align-items: center;
justify-content: space-between;
padding: 0 !important;
}
/* Force the mobile-branding to be a flex row */
.mobile-branding {
display: flex !important;
align-items: center;
gap: 8px; /* Space between logo and text */
flex-grow: 1;
}
.mobile-branding .logo {
width: 60px !important; /* Slightly smaller to fit */
height: auto;
}
.mobile-slogan {
font-size: 0.75rem !important;
color: #ff6600;
font-weight: bold;
white-space: nowrap;
}
/* Keep the menu toggle visible */
.menu-toggle {
display: flex !important;
margin-right: 10px;
}
}
/* Hide mobile container by default */
.mobile-header-group {
display: none;
}
@media (max-width: 768px) {
/* Show the group as a row */
.mobile-header-group {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0 10px;
}
.branding-text-and-social {
display: flex !important;
flex-direction: row !important; /* لجعل العناصر بجانب بعضها */
align-items: center !important;
gap: 30px !important; /* مسافة بين السلوجان والأيقونات */
}
/* تنسيق الأيقونات لتظهر بجانب بعضها */
.mobile-social-icons {
display: flex !important;
gap: 15px !important;
margin-top: 0 !important; /* إزالة أي هامش علوي */
}
.mobile-social-icons a {
font-size:24px;
color: #ffffff !important; /* أخضر */
transition: color 0.3s ease;
}
/* لون الأيقونات عند مرور الفأرة (أو اللمس) أبيض */
/* تأثير الـ Hover واللمس */
.mobile-social-icons a:hover,
.mobile-social-icons a:active {
color: #27ae60 !important; /* اللون الأخضر عند التفاعل */
transform: scale(1.2); /* تكبير طفيف عند الضغط */
}
/* Ensure other mobile branding elements are visible and aligned */
/* ضبط حاوية الموبايل الرئيسية */
.mobile-branding {
display: flex !important;
align-items: center;
gap: 0;
}
}
/* Hide the desktop social container on mobile to prevent double icons */
/*@media (max-width: 768px) {
.nav-right {
display: none !important;
}
}
@media (max-width: 768px) {
/* الحاوية الجديدة التي تضم النص والأيقونات */
.mobile-social-container {
display: flex !important;
align-items: center;
gap: 8px; /* مسافة بين النص والأيقونات */
margin-top: 5px;
}
/* تنسيق كلمة "צרו קשר" */
.contact-label {
font-size: 0.8rem;
font-weight: bold;
color: #ff6600 !important;
}
/* التأكد من أن الأيقونات تظهر بشكل سليم */
.mobile-social-icons {
display: flex !important;
gap: 8px;
}
}
@media (max-width: 768px)
{
/* تنسيق حاوية الروابط عندما تكون مفعلة (active) */
.nav-links.active {
display: flex !important;
position: fixed;
top: 60px; /* المسافة من الأعلى لتكون أسفل الـ Nav */
right: 0;
width: 100%; /* يمكن جعلها 100% أو جزء منها */
background: #2c3e50;
flex-direction: column;
align-items: center;
padding: 20px 0;
z-index: 1000;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}
/* تنسيق الروابط داخل القائمة */
.nav-links a {
display: block;
width: 100%;
text-align: center;
padding: 0; /* زيادة المساحة للضغط بسهولة */
font-size: 1.2rem; /* حجم مناسب للموبايل */
color: white;
text-decoration: none;
border-bottom: 1px solid #3e5871; /* فاصل بين الروابط */
}
/* تأثير عند الضغط */
.nav-links a:hover {
background: #34495e;
color: #27ae60;
}
}
@media (max-width: 768px) {
.nav-links a {
font-size: 0.9rem !important; /* يمكنك تعديل القيمة (مثلاً 1.0rem أو 1.2rem) */
padding: 0 !important; /* الحفاظ على مساحة كافية للضغط */
}
}
@media (max-width: 768px) {
body {
border: 5px solid #ffe4c4;
}
}
.no-scroll {
overflow: hidden;
height: 100vh; /* يمنع الصفحة من التحرك */
}
img { content-visibility: auto; }
/* אכיפת הסתרת הטקסט */
.text-content {
max-height: 50px; /* הגובה ההתחלתי */
overflow: hidden;
display: block !important; /* אכיפה */
transition: max-height 0.4s ease-out;
position: relative;
}
/* מצב פתוח */
.text-content.expanded {
max-height: 500px; /* גובה גדול מספיק להכיל את כל הטקסט */
}
/* עיצוב כפתור */
.read-more-btn {
background: none;
border: none;
color: #d35400;
font-size: 0.9rem;
cursor: pointer;
font-weight: bold;
margin: 5px auto;
text-decoration: underline;
display: block;
}
.hidden-card {
display: none;
}
.product-image-container {
position: relative; /* ضروري لوضع الأيقونة فوق الصورة */
}
.zoom-overlay-icon {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.5); /* خلفية داكنة نصف شفافة */
border-radius: 50%; /* شكل دائري للأيقونة */
padding: 8px;
font-size: 1.2rem;
color: #ffffff; /* لون الأيقونة أبيض */
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.3); /* إطار خفيف لزيادة الوضوح */
}
@media (max-width: 768px) {
/* ריווח כללי לכל האזורים */
section {
padding: 0px 20px;
}
.hero {
height:420px;
background-image:url("images/new-hero-mobile.png");
}
ب