/* =============================================
🏠 قسم الرئيسية: تحسين فقرات من نحن وتواصل معنا للموبايل
- عرض كامل، نص كبير وواضح، مسافات مريحة
- مخصص حتى 769px ولا يؤثر على الديسكتوب
============================================= */
@media (max-width: 769px) {
/* غلاف الكتل داخل الرئيسية */
#home .about-preview,
#home .contact-preview {
width: 100% !important;
margin: 14px 0 !important;
padding: 16px 14px !important;
border-radius: 16px !important;
border: 1px solid rgba(0, 64, 128, 0.08) !important;
box-shadow: 0 8px 24px rgba(10, 40, 100, 0.08) !important;
}
/* عنوان الفقرة داخل الرئيسية */
#home .preview-title {
font-size: 1.4rem !important;
margin-bottom: 10px !important;
}
/* نص من نحن داخل الرئيسية — كبير وواضح */
#home .about-preview .about-text {
font-size: 1.06rem !important;
line-height: 1.9 !important;
color: #ffffff !important;
border: 1px solid rgba(0, 64, 128, 0.06) !important;
border-radius: 12px !important;
padding: 14px 12px !important;
text-align: justify !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
transform: none !important;
}
/* ميزات من نحن — شبكة مرتبة ومضغوطة */
#home .about-preview .about-features {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 8px !important;
}
#home .about-preview .feature-item {
font-size: 0.9rem !important;
padding: 8px 10px !important;
border-radius: 12px !important;
background: rgba(0, 64, 128, 0.06) !important;
}
/* تواصل معنا داخل الرئيسية — عناصر واضحة بعرض كامل */
#home .contact-preview .contact-info {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
#home .contact-preview .contact-item {
border-radius: 12px !important;
border: 1px solid rgba(0, 64, 128, 0.06) !important;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05) !important;
}
#home .contact-preview .contact-details strong {
font-size: 1rem !important;
}
#home .contact-preview .contact-details span {
font-size: 1.02rem !important;
color: #ffffff !important;
}
/* زر "تعرف علينا أكثر" و CTA التواصل — أعرض وأوضح */
#home .learn-more-btn,
#home .contact-actions .contact-btn {
width: 100% !important;
justify-content: center !important;
padding: 12px 14px !important;
border-radius: 14px !important;
font-size: 1.02rem !important;
}
}
/* ===== محاذاة أزرار نافذة الحجز جنبًا إلى جنب على كل الشاشات ===== */
.booking-modal .modal-buttons {
display: flex !important;
flex-wrap: nowrap !important; /* دائمًا جنب بعض */
gap: 10px !important;
justify-content: center !important;
align-items: center !important;
}
.booking-modal .modal-buttons .whatsapp-btn,
.booking-modal .modal-buttons .copy-btn {
width: auto !important; /* إلغاء 100% على الشاشات الصغيرة */
flex: 0 1 auto !important; /* يمنع التمدد الكامل */
padding: 12px 20px !important; /* تباعد مريح */
border-radius: 12px !important;
}
@media (max-width: 500px) {
.booking-modal .modal-buttons {
gap: 8px !important;
}
.booking-modal .modal-buttons .whatsapp-btn,
.booking-modal .modal-buttons .copy-btn {
padding: 10px 14px !important; /* تقليل الحشوة للمساحات الضيقة */
font-size: 0.95rem !important;
}
}
@media (max-width: 360px) {
.booking-modal .modal-buttons .whatsapp-btn,
.booking-modal .modal-buttons .copy-btn {
padding: 8px 12px !important;
font-size: 0.9rem !important;
}
}
/* ===============================
📱 تحسين شامل حتى 769px (موبايل + تابلت صغيرة)
يعطي تناسقًا ووضوحًا أعلى مع الحفاظ على قواعد 600px و420px الأدق
=============================== */
@media (max-width: 769px) {
.contact-section {
padding: 32px 16px !important;
background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%) !important;
}
.contact-container {
max-width: 720px !important;
margin: 0 auto !important;
padding: 18px !important;
border-radius: 16px !important;
box-shadow: 0 8px 28px rgba(8, 46, 112, 0.06) !important;
background: transparent !important;
}
.contact-title { font-size: 1.8rem !important; margin-bottom: 8px !important; }
.contact-subtitle { font-size: 1.05rem !important; margin-bottom: 18px !important; color: #4a5872 !important; }
.contact-card {
backdrop-filter: blur(8px) !important;
border-radius: 14px !important;
padding: 18px 16px !important;
box-shadow: 0 8px 26px rgba(10, 50, 120, 0.08) !important;
}
.contact-card h3 { font-size: 1.15rem !important; }
.contact-card .desc { font-size: 1rem !important; }
/* صفوف الأرقام والإيميلات: شبكة رباعية ثابتة */
.contact-row,
.email-item {
border: 1px solid rgba(0, 64, 128, 0.08) !important;
border-radius: 12px !important;
padding: 12px !important;
display: grid !important;
grid-template-columns: auto 1fr auto auto !important;
gap: 12px !important;
align-items: center !important;
}
/* العنصر الوصفي (الوظيفة) لا يلتف */
.email-item > span:first-child,
.contact-row > span:first-child { white-space: nowrap !important; font-weight: 800 !important; }
/* رقم داخل */
.contact-row span p { display: inline !important; margin: 0 !important; direction: ltr !important; unicode-bidi: embed !important; font-weight: 800 !important; }
/* البريد واضح LTR */
.email-item .email-link {
direction: ltr !important;
unicode-bidi: embed !important;
font-weight: 800 !important;
color: #ffffff !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
/* الأزرار: قبل النسخ زر الإرسال، كلاهما أهداف لمس مُريحة */
.contact-small-btn,
.copy-btn { min-width: 44px !important; border-radius: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
.contact-small-btn.email-send-btn { background: linear-gradient(90deg,#0066cc,#004f9a) !important; color: #fff !important; }
.copy-btn { background: linear-gradient(90deg,#1e90ff,#007bff) !important; color: #fff !important; }
.contact-small-btn i, .copy-btn i { font-size: 1.05rem !important; }
/* ترتيب نهائي للأزرار داخل الشبكة */
.email-item .contact-small-btn.email-send-btn { order: 2 !important; }
.email-item .copy-btn { order: 3 !important; margin-inline-start: 0 !important; }
}
/* ===============================
📱 تصميم احترافي للغاية لقسم تواصل معنا على الموبايل فقط
- لا يؤثر على الديسكتوب
- يرفع الوضوح وسهولة اللمس والقراءة
=============================== */
@media (max-width: 600px) {
/* هيكل عام أكثر أناقة */
.contact-section {
padding: 24px 12px !important;
background: linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%) !important;
}
.contact-container {
max-width: 640px !important;
margin: 0 auto !important;
padding: 16px !important;
border-radius: 16px !important;
box-shadow: 0 8px 28px rgba(8, 46, 112, 0.06) !important;
background: transparent !important;
}
.contact-title {
font-size: 1.6rem !important;
margin-bottom: 6px !important;
}
.contact-subtitle {
font-size: 0.95rem !important;
color: #4a5872 !important;
margin-bottom: 18px !important;
}
/* البطاقات: زجاجية خفيفة وتمييز أقوى */
.contact-card {
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(30, 90, 170, 0.08) !important;
border-radius: 14px !important;
padding: 16px 14px !important;
box-shadow: 0 8px 26px rgba(10, 50, 120, 0.08) !important;
}
.contact-card h3 {
font-size: 1.05rem !important;
margin-bottom: 8px !important;
}
.contact-card .desc {
font-size: 0.95rem !important;
margin-bottom: 12px !important;
}
/* صفوف الأرقام والإيميلات: شبكة رباعية تضمن ترتيب ثابت: وظيفة | بريد/رقم | زر إرسال | زر نسخ */
.contact-row,
.email-item {
border: 1px solid rgba(0, 64, 128, 0.08) !important;
border-radius: 12px !important;
padding: 12px 12px !important;
display: grid !important;
grid-template-columns: auto 1fr auto auto !important;
gap: 10px !important;
align-items: center !important;
}
/* إصلاح العناصر الداخلية واتجاهاتها */
.contact-row span,
.email-item > span:first-child {
white-space: nowrap !important;
font-weight: 700 !important;
}
/* معالجة رقم المحمول داخل
داخل span إن وجد */
.contact-row span p {
display: inline !important;
margin: 0 !important;
direction: ltr !important;
unicode-bidi: embed !important;
font-weight: 800 !important;
}
/* البريد: LTR واضح، نص كبير وبارز */
.email-item .email-link {
direction: ltr !important;
unicode-bidi: embed !important;
font-weight: 800 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
justify-self: start !important;
}
/* الأزرار: أهداف لمس كبيرة وواضحة */
.copy-btn,
.contact-small-btn {
min-width: 44px !important;
padding: 0 10px !important;
border-radius: 12px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}
.contact-small-btn.email-send-btn { background: linear-gradient(90deg,#0066cc,#004f9a) !important; color: #fff !important; }
.copy-btn { background: linear-gradient(90deg,#1e90ff,#007bff) !important; color: #fff !important; }
.copy-btn i, .contact-small-btn i { font-size: 1.05rem !important; }
/* دفع الأزرار لليسار (نهاية السطر في RTL) وإبقاء البريد بمحاذاة يمين العنصر الأوسط */
.email-item .copy-btn { margin-inline-start: 0 !important; }
.email-item .contact-small-btn.email-send-btn { order: 2 !important; }
.email-item .copy-btn { order: 3 !important; }
}
/* 🔒 منع شريط Google Translate من الظهور نهائيًا */
body {
top: 0px !important;
}
/* إخفاء iframe الشريط ومنعه من الظهور */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame,
.goog-te-banner {
display: none !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
/* إزالة أي إزاحة يضيفها Google تلقائيًا على html أو body */
html {
margin-top: 0px !important;
}
/* إخفاء أي عنصر يظهر داخل
من بقايا الشريط */
body > .skiptranslate {
display: none !important;
}
/* إخفاء كل لوغو وروابط Google من الترجمة */
.goog-logo-link,
.goog-te-gadget-icon {
display: none !important;
visibility: hidden !important;
}
:root{
--nav-height: 72px;
--primary-dark: #002244;
--primary: #004080;
--primary-light: #1e90ff;
--accent: #ffcc00;
--white: #fff;
--bg: #f6f8fb;
--text: #222;
}
*{box-sizing:border-box;margin:0;padding:0;font-family:Arial}
html,body{height:100%}
body{
background:var(--bg);
color:var(--text);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* NAVBAR */
.navbar{
position: sticky; top:0; left:0; right:0;
height:var(--nav-height);
background:linear-gradient(180deg,var(--primary-dark),var(--primary));
color:var(--white);
display:flex; align-items:center; z-index:1200;
box-shadow:0 4px 18px rgba(0,0,0,0.12);
padding:0 1rem;
}
.nav-container{max-width:1200px;margin:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:0.6rem}
.logo img{height:50px;border-radius:8px;object-fit:cover}
.logo .title{font-weight:700;line-height:1}
.logo .subtitle{font-size:0.85rem;opacity:0.9}
/* links */
.nav-links{display:flex;gap:0.5rem;align-items:center}
.nav-links a{
color:var(--white);text-decoration:none;padding:0.5rem 0.8rem;border-radius:8px;font-weight:600;
transition:background .18s, color .18s, transform .12s;
}
.nav-links a:hover{background:rgba(255,255,255,0.07);transform:translateY(-2px)}
.nav-links a.active{background:rgba(255,255,255,0.12);color:var(--accent)}
/* mobile toggle */
.menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.4rem;padding:0.35rem 0.5rem;border-radius:6px}
.menu-toggle:focus{outline:2px solid rgba(255,255,255,0.18)}
/* page wrapper - keep space under navbar */
main.content{min-height:calc(100vh - var(--nav-height));}
/* SECTIONS: hidden by display:none when not active (so no leftover space) */
section{
display:none; /* <-- important: hidden sections take no space */
opacity:0;
}
section.active{display:block;opacity:1;} /* display controlled by JS + class */
/* For fade transitions we use inline style transitions in JS, CSS sets sensible defaults */
.section-inner{
background:var(--white);
padding:28px;
box-shadow:0 8px 24px rgba(14,30,37,0.06);
min-height:200px;
transition:transform .28s ease;
}
@media(min-width: 540px){
#services .section-inner{
margin: 20px;
border-radius: 10px;
min-height:500px;
}
}
/* cards grid */
.section-grid{
display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:18px;margin-top:10px;
}
.card{
background:linear-gradient(180deg, #ffffff, #fbfdff);
border-radius:10px;padding:18px;text-align:center;
box-shadow:0 6px 14px rgba(10,20,40,0.04);transition:transform .22s, box-shadow .22s;
}
.card:hover{
transform:translateY(-8px);
box-shadow:0 12px 30px rgba(10,20,40,0.08)
}
.card h3{
color:var(--primary);margin-bottom:0.35rem
}
.cardk{
background:linear-gradient(180deg, #ffffff, #fbfdff);
border-radius:10px;padding:18px;text-align:center;
box-shadow:0 8px 12px rgba(19, 41, 84, 0.262);
transition:transform .22s, box-shadow .22s;
}
.cardk:hover{
transform:translateY(-8px);
box-shadow:0 12px 30px rgba(10, 20, 40, 0.219)
}
.cardk h3{
color:var(--primary);
margin-bottom:0.35rem;
font-size: 22px;
}
.cardk k{
font-size: 16px;
}
/* form */
form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
input,textarea{padding:12px;border-radius:8px;border:1px solid #e7eef8;font-size:1rem;background:#fff}
input:focus,textarea:focus{outline:none;border-color:var(--primary-light);box-shadow:0 6px 18px rgba(30,144,255,0.08)}
button[type="submit"]{background:var(--primary);color:var(--white);padding:12px;border-radius:10px;border:none;font-weight:700;cursor:pointer}
button[type="submit"]:hover{background:var(--primary-dark)}
/* responsive */
@media(max-width: 880px){
.nav-links{gap:6px}
}
@media(max-width: 768px){
.menu-toggle{display:block}
.nav-links{
position:fixed;top:var(--nav-height);left:0;right:0;background:linear-gradient(180deg,var(--primary-dark),var(--primary));
flex-direction:column;padding:14px;gap:8px;display:none;
}
.nav-links.show{display:flex}
.nav-links a{padding:10px;border-radius:8px}
}
/* accessibility helper - visually hidden */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.kadamatna{
font-size: 50px;
}
.kadamatna {
font-family: "Tajawal", sans-serif;
font-size: 50px; /* الحجم الذي طلبته */
font-weight: 700; /* سماكة أنيقة */
direction: rtl;
text-align: center;
margin: 0;
/* تدرج لوني أنيق للنص */
background: linear-gradient(90deg, #4facfe, #437de9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* ظل ناعم خلفي فقط */
text-shadow: 1px 2px 6px rgba(0, 0, 0, 0.388);
/* لمسة بسيطة بالحروف */
}
/* ====== قسم خدماتنا الاحترافي ====== */
.services-section {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
border-radius: 20px;
padding: 80px 60px;
margin: 40px auto;
max-width: 1300px;
box-shadow: 0 10px 40px rgba(0, 50, 120, 0.06);
overflow: hidden;
transition: all 0.3s ease-in-out;
}
/* إضاءة خلفية ناعمة */
.services-section::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -180px;
right: -180px;
background: radial-gradient(circle, rgba(67, 125, 233, 0.12), transparent 70%);
z-index: 0;
}
.services-section::after {
content: "";
position: absolute;
width: 400px;
height: 400px;
bottom: -150px;
left: -150px;
background: radial-gradient(circle, rgba(0, 160, 255, 0.1), transparent 70%);
z-index: 0;
}
.services-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 35px;
margin-top: 50px;
}
/* البطاقات */
.service-card {
background: rgb(31 114 237 / 78%) !important;
border-radius: 18px;
padding: 28px 24px 36px;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(220, 230, 255, 0.7);
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
/* أيقونات */
.service-card .icon {
font-size: 46px;
margin-bottom: 16px;
background: linear-gradient(90deg, #4facfe, #437de9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: transform 0.3s ease;
}
/* عناوين */
.service-card h3 {
font-size: 1.65rem;
font-weight: 1000;
margin-bottom: 14px;
}
/* الفقرات */
.service-card p {
font-size: 1.3rem;
color: #333;
line-height: 1.6;
}
/* تأثير التفاعل */
.service-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 14px 38px rgba(67, 125, 233, 0.16);
border-color: rgba(67, 125, 233, 0.25);
}
.service-card:hover .icon {
transform: scale(1.2) rotate(-4deg);
}
/* حركة دخول أنيقة عند التمرير */
@keyframes fadeUp {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
.service-card {
opacity: 0;
animation: fadeUp 0.9s ease forwards;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.25s; }
.service-card:nth-child(3) { animation-delay: 0.4s; }
.service-card:nth-child(4) { animation-delay: 0.55s; }
/* استجابة للجوال */
@media (max-width: 768px) {
.services-section {
padding: 50px 24px;
}
.services-grid {
gap: 25px;
}
.service-card {
padding: 24px;
}
}
/* ====== قسم خدماتنا الفاخر ====== */
.services-section {
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
border-radius: 20px;
padding: 70px 40px;
margin: 60px auto;
max-width: 1300px;
box-shadow: 0 8px 28px rgba(0, 40, 120, 0.08);
position: relative;
overflow: hidden;
}
/* خلفيات إضاءة ناعمة */
.services-section::before,
.services-section::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(100px);
opacity: 0.18;
}
.services-section::before {
width: 380px;
height: 380px;
top: -150px;
right: -120px;
background: #4facfe;
}
.services-section::after {
width: 300px;
height: 300px;
bottom: -100px;
left: -100px;
background: #437de9;
}
/* عنوان القسم */
.services-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 2;
}
.services-header h2 {
font-family: "Tajawal", sans-serif;
font-weight: 800;
font-size: 2.8rem;
letter-spacing: -0.5px;
background: linear-gradient(90deg, #004080, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.services-header .subtitle {
color: #444;
font-size: 1.6rem;
opacity: 0.9;
}
/* شبكة البطاقات */
.services-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 28px;
justify-content: center;
}
/* البطاقة */
.service-card {
background: #fff;
border-radius: 16px;
padding: 34px 28px 40px;
text-align: center;
border: 1px solid rgba(210, 220, 255, 0.7);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
transition: all 0.35s ease;
position: relative;
z-index: 2;
overflow: hidden;
}
/* أيقونة الخدمة */
.service-card .icon {
font-size: 48px;
margin-bottom: 14px;
background: linear-gradient(90deg, #4facfe, #437de9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: transform 0.3s ease;
}
/* العنوان */
.service-card h3 {
color: #ffffffc9;
font-size: 1.85rem;
font-weight: 700;
margin-bottom: 12px;
}
/* النص */
.service-card p {
color: #fffefe;
font-size: 1.3rem;
line-height: 1.85;
text-align: justify;
}
/* تفاعل البطاقة */
.service-card:hover {
transform: translateY(-12px) scale(1.03);
box-shadow: 0 14px 38px rgba(67, 125, 233, 0.15);
border-color: rgba(67, 125, 233, 0.25);
}
.service-card:hover .icon {
transform: scale(1.15) rotate(6deg);
}
/* تأثير عند اللمس */
.service-card:active {
transform: scale(0.97);
transition: transform 0.1s;
}
/* حركة دخول */
@keyframes fadeInUp {
0% {opacity: 0; transform: translateY(40px);}
100% {opacity: 1; transform: translateY(0);}
}
.service-card {
opacity: 0;
animation: fadeInUp 0.9s ease forwards;
}
.service-card:nth-child(1) { animation-delay: 0.1s; }
.service-card:nth-child(2) { animation-delay: 0.25s; }
.service-card:nth-child(3) { animation-delay: 0.4s; }
.service-card:nth-child(4) { animation-delay: 0.55s; }
/* تحسين العرض على اللابتوبات الكبيرة */
@media (min-width: 1200px) {
.services-grid {
grid-template-columns: repeat(2, minmax(500px, 1fr));
gap: 35px 50px;
}
.service-card {
padding: 40px 40px 48px;
}
}
/* تحسين للشاشات الصغيرة */
@media (max-width: 768px) {
.services-section {
padding: 50px 20px;
}
.services-header h2 {
font-size: 2.2rem;
}
.service-card {
padding: 26px 20px;
}
}
/* ====== قسم التذاكر الفاخر والمتناسق ====== */
.tickets-section {
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
border-radius: 20px;
padding: 70px 40px;
margin: 60px auto;
max-width: 1350px;
box-shadow: 0 8px 28px rgba(0, 40, 120, 0.08);
position: relative;
overflow: hidden;
}
/* خلفية ناعمة */
.tickets-section::before {
content: "";
position: absolute;
top: -120px;
right: -120px;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(67,125,233,0.15), transparent 70%);
z-index: 0;
}
/* العنوان */
.tickets-header {
text-align: center;
position: relative;
z-index: 2;
margin-bottom: 50px;
}
.tickets-header h2 {
font-family: "Tajawal", sans-serif;
font-weight: 800;
font-size: 2.8rem;
background: linear-gradient(90deg, #004080, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.tickets-header .subtitle {
color: #555;
font-size: 1.55rem;
opacity: 0.9;
}
/* الشبكة */
.tickets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 32px;
justify-content: center;
align-items: stretch;
position: relative;
z-index: 2;
}
/* البطاقات */
.ticket-card {
background: #fff;
border-radius: 18px;
box-shadow: 0 6px 16px rgba(0,0,0,0.05);
border: 1px solid rgba(220,230,255,0.7);
transition: all 0.35s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.ticket-card:hover {
transform: translateY(-10px) scale(1.02);
box-shadow: 0 16px 38px rgba(67, 125, 233, 0.15);
border-color: rgba(67, 125, 233, 0.25);
}
/* رأس البطاقة */
.ticket-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.airline-logo {
font-size: 30px;
}
.airline-name {
font-weight: 700;
font-size: 1.15rem;
color: var(--primary-dark);
}
/* تفاصيل الرحلة */
.ticket-details {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.route {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
font-weight: 700;
color: #004080;
}
.route .arrow {
margin: 0 8px;
font-size: 1.4rem;
color: #1e90ff;
}
.info {
display: flex;
justify-content: space-between;
font-size: 0.95rem;
color: #333;
flex-wrap: wrap;
gap: 6px;
}
.dates {
font-size: 0.9rem;
color: #555;
display: flex;
flex-direction: column;
gap: 4px;
}
/* زر الحجز — تصميم احترافي وأنيق ومريح للعين */
.book-btn {
position: relative;
align-self: center;
background: linear-gradient(135deg, #1d64b4, #257ad3);
color: #ffffff;
border: none;
padding: 13px 36px;
font-size: 1.05rem;
font-weight: 700;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
width: 210px;
letter-spacing: 0.3px;
box-shadow: 0 4px 0 #1b4e8b, 0 10px 22px rgba(30, 110, 190, 0.2);
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* تأثير رفع خفيف ولمعة أنيقة عند التحويم */
.book-btn:hover {
background: linear-gradient(135deg, #257ad3, #2b89e3);
transform: translateY(-3px);
box-shadow: 0 6px 0 #1b4e8b, 0 14px 26px rgba(30, 110, 190, 0.25);
filter: brightness(1.03);
}
/* تأثير الضغط */
.book-btn:active {
transform: translateY(2px);
box-shadow: 0 2px 0 #1b4e8b, 0 6px 10px rgba(30, 110, 190, 0.2);
filter: brightness(0.97);
}
/* لمعان جانبي ناعم جدًا */
.book-btn::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0.25),
transparent 70%
);
opacity: 0;
transition: opacity 0.4s ease;
}
.book-btn:hover::before {
opacity: 0.5;
}
/* حركات دخول */
@keyframes fadeTicket {
0% { opacity: 0; transform: translateY(40px); }
100% { opacity: 1; transform: translateY(0); }
}
.ticket-card {
opacity: 0;
animation: fadeTicket 0.8s ease forwards;
}
.ticket-card:nth-child(1) { animation-delay: 0.1s; }
.ticket-card:nth-child(2) { animation-delay: 0.25s; }
.ticket-card:nth-child(3) { animation-delay: 0.4s; }
/* الشاشات الكبيرة */
@media (min-width: 1200px) {
.tickets-grid {
grid-template-columns: repeat(3, minmax(380px, 1fr));
gap: 40px;
}
.ticket-card {
}
}
/* ===== الشاشات الصغيرة ===== */
@media (max-width: 768px) {
.tickets-section {
padding: 50px 20px;
margin: 40px auto;
}
.tickets-header h2 {
font-size: 2rem;
}
.tickets-header .subtitle {
font-size: 0.95rem;
padding: 0 10px;
}
.tickets-grid {
grid-template-columns: 1fr;
gap: 22px;
}
.ticket-card {
border-radius: 14px;
}
.airline-logo {
font-size: 26px;
}
.airline-name {
font-size: 1rem;
}
.route {
font-size: 1.1rem;
}
.info {
flex-direction: column;
align-items: center;
font-size: 0.9rem;
gap: 6px;
}
.dates {
font-size: 0.85rem;
align-items: center;
}
.book-btn {
width: 100%;
padding: 12px 0;
font-size: 1rem;
}
}
/* الهواتف الصغيرة جدًا */
@media (max-width: 420px) {
.tickets-section {
padding: 40px 16px;
}
.ticket-card {
}
.route {
font-size: 1rem;
}
.book-btn {
font-size: 0.95rem;
padding: 10px 0;
}
}
/* ===== نافذة رقم التواصل ===== */
.booking-modal {
position: fixed;
inset: 0;
display: none;
justify-content: center;
align-items: center;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(5px);
z-index: 5000;
transition: opacity 0.3s ease;
opacity: 0;
}
.booking-modal.show {
opacity: 1;
}
.modal-content {
background: #fff;
border-radius: 18px;
padding: 36px 40px;
box-shadow: 0 10px 40px rgba(0, 40, 120, 0.15);
text-align: center;
max-width: 380px;
width: 90%;
animation: popupScale 0.35s ease;
position: relative;
}
@keyframes popupScale {
from { transform: scale(0.85); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.close-modal {
position: absolute;
top: 10px;
left: 16px;
font-size: 1.6rem;
color: #777;
cursor: pointer;
transition: color 0.2s;
}
.close-modal:hover {
color: #1e90ff;
}
.modal-content h3 {
font-size: 1.05rem;
color: #002244;
margin-bottom: 18px;
line-height: 1.7;
}
.booking-number {
background: #f4f7ff;
color: #004080;
font-weight: 700;
font-size: 1.3rem;
padding: 12px 18px;
border-radius: 12px;
margin-bottom: 18px;
letter-spacing: 1px;
user-select: all;
display: inline-block;
border: 1px solid rgba(67,125,233,0.2);
}
.copy-btn {
background: linear-gradient(90deg, #004080, #1e90ff);
color: #fff;
border: none;
padding: 12px 30px;
border-radius: 12px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.copy-btn:hover {
transform: scale(1.05);
box-shadow: 0 8px 18px rgba(67,125,233,0.25);
}
.copy-btn:active {
transform: scale(0.95);
}
/* الجوال */
@media (max-width: 500px) {
.modal-content {
padding: 28px 22px;
}
.modal-content h3 {
font-size: 0.95rem;
}
.booking-number {
font-size: 1.1rem;
}
}
/* ===== أيقونات شركات الطيران في قسم التذاكر ===== */
.airline-logo {
width: 42px;
height: 42px;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eaf2ff, #ffffff);
box-shadow: 0 4px 10px rgba(0, 64, 128, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.airline-logo img {
width: 70%;
height: 70%;
object-fit: contain;
filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
object-fit: cover !important;
}
.ticket-card:hover .airline-logo {
transform: scale(1.1);
box-shadow: 0 8px 18px rgba(67, 125, 233, 0.18);
}
/* ===== قسم من نحن الفخم ===== */
.about-section {
position: relative;
width: 100%; /* تغطي العرض كامل */
background: rgba(255, 255, 255, 0.75);
padding: 100px 0; /* نزيل هوامش الجوانب ونخلي padding رأسي فقط */
box-shadow: inset 0 0 40px rgba(0, 40, 100, 0.1);
overflow: hidden;
min-height: 100vh; /* 100% من ارتفاع الشاشة */
}
/* المحتوى الداخلي */
.about-section .about-container {
max-width: 1200px; /* تحديد عرض المحتوى */
margin: 0 auto; /* توسيط */
padding: 0 20px;
}
/* خلفية تفاعلية */
.about-bg .sphere,
.about-bg .cube,
.about-bg .ring {
position: absolute;
opacity: 0.2;
filter: blur(2px) drop-shadow(0 10px 25px rgba(0,0,0,0.2));
animation: float 8s ease-in-out infinite alternate;
}
.sphere {
top: -80px; right: -90px;
width: 200px; height: 200px;
background: radial-gradient(circle at 30% 30%, #4facfe, #004080);
border-radius: 50%;
}
.cube {
bottom: -70px; left: -70px;
width: 160px; height: 160px;
background: linear-gradient(135deg, #1e90ff, #004080);
transform: rotate3d(1, 1, 0, 35deg);
border-radius: 18px;
}
.ring {
top: 45%; left: 50%;
width: 260px; height: 260px;
border: 16px solid rgba(67,125,233,0.6);
border-radius: 50%;
transform: translate(-50%, -50%) rotate3d(0, 1, 0, 50deg);
}
/* تحريك الأشكال */
@keyframes float {
from { transform: translateY(0) rotate(0deg); }
to { transform: translateY(-25px) rotate(20deg); }
}
/* العنوان */
.about-header {
position: relative;
z-index: 2;
text-align: center;
margin-bottom: 40px;
}
.about-header h2 {
font-family: "Tajawal", sans-serif;
font-weight: 800;
font-size: 3rem;
background: linear-gradient(90deg, #004080, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 12px;
}
.about-header .subtitle {
color: #333;
font-size: 1.4rem;
opacity: 0.85;
}
/* النص */
.about-content {
position: relative;
z-index: 2;
}
.about-content p {
font-size: 1.35rem;
line-height: 2.1;
color: #ffffff;
font-weight: 600;
text-align: justify;
background: rgb(68 99 244 / 80%);
padding: 28px 30px;
border-radius: 18px;
box-shadow: 0 8px 28px rgba(0, 40, 120, 0.08);
animation: fadeUp 1s ease forwards;
transform: translateY(40px);
opacity: 0;
}
/* حركة دخول */
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
}
/* تأثير hover */
.about-content p:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 18px 40px rgba(0, 60, 140, 0.15);
transition: all 0.4s ease;
}
/* معلومات التواصل في قسم من نحن */
.about-contact-info {
margin-top: 32px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.contact-info-item {
background: rgb(64 107 234 / 80%);
backdrop-filter: blur(10px);
border-radius: 16px;
padding: 24px;
display: flex;
align-items: flex-start;
gap: 16px;
box-shadow: 0 6px 20px rgba(0, 40, 120, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(67, 125, 233, 0.1);
}
.contact-info-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 60, 140, 0.15);
border-color: rgba(67, 125, 233, 0.3);
}
.contact-info-item i {
font-size: 2rem;
color: #deefff;
transition: all 0.3s ease;
flex-shrink: 0;
}
.contact-info-item:hover i {
transform: scale(1.15);
color: #004080;
}
.contact-info-item strong {
display: block;
color: #d5dcfb;
font-size: 1.1rem;
margin-bottom: 6px;
font-weight: 700;
}
.contact-info-item p {
color: #d6e3f7;
font-size: 0.95rem;
margin: 0;
line-height: 1.6;
background: transparent;
padding: 0;
box-shadow: none;
text-align: right;
transform: none;
opacity: 1;
animation: none;
}
.facebook-link {
color: #a4cafb;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
display: inline-block;
}
.facebook-link:hover {
color: #004080;
text-decoration: underline;
transform: translateX(-3px);
}
/* تجاوب */
@media (max-width: 768px) {
.about-header h2 { font-size: 2.2rem; }
.about-content p { font-size: 1rem; line-height: 1.9; }
.about-contact-info {
grid-template-columns: 1fr;
gap: 16px;
}
.contact-info-item {
padding: 20px;
}
.contact-info-item i {
font-size: 1.6rem;
}
}
/* ===== جعل الخلفية تغطي كامل الشاشة بدون تحريك أفقي ===== */
/* لضمان أن العنصر لا يسبب تمرير جانبي */
#services,
#memories {
position: relative;
overflow-x: hidden; /* يمنع التحريك يمين/يسار */
isolation: isolate;
}
/* الخلفية الممتدة */
#services::before,
#memories::before {
content: "";
position: absolute;
inset: 0; /* يغطي القسم بالكامل بدون تجاوز */
background:
radial-gradient(600px 600px at 95% -10%, rgba(67, 125, 233, 0.036), transparent 60%),
radial-gradient(520px 520px at 8% 110%, rgba(30, 143, 255, 0.062), transparent 62%),
linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
z-index: -1;
}
/* حاوية المحتوى الداخلية */
.section-inner.services-section,
.section-inner.tickets-section {
position: relative;
background: transparent !important;
box-shadow: none !important;
border-radius: 0 !important;
overflow: visible !important;
max-width: 1200px;
margin: 0 auto;
padding: clamp(60px, 6vw, 100px) clamp(16px, 4vw, 60px);
}
/* تعديل بسيط للموبايل */
@media (max-width: 480px) {
.section-inner.services-section,
.section-inner.tickets-section {
padding: 48px 16px;
}
}
/* إزالة أي تمرير أو مؤشر حركة داخل قسم الخدمات */
#services {
overflow: hidden !important; /* يمنع أي تحريك أو تمرير */
}
/* ولو في عناصر تتحرك (مثل float animation) داخل خدماتنا، نخليها محدودة */
#services * {
overflow: visible;
}
/* تأكد أن الخلفية ما تطلع خارج الحدود */
#services::before {
overflow: hidden;
clip-path: inset(0); /* يقطع أي زوائد خارج الإطار */
}
/* ===== خلفية قسم خدماتنا ===== */
#services {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(180deg, #f8fbff 0%, #eaf1ff 100%);
}
/* أشكال متحركة للخدمات */
#services .bg-shape,
#services .bg-shape2,
#services .bg-ring {
position: absolute;
border-radius: 50%;
opacity: 0.25;
filter: blur(2px);
animation: floatShape 8s ease-in-out infinite alternate;
}
#services .bg-shape {
top: -100px;
right: -120px;
width: 250px;
height: 250px;
background: radial-gradient(circle at 30% 30%, #4facfe, #004080);
}
#services .bg-shape2 {
bottom: -80px;
left: -100px;
width: 200px;
height: 200px;
background: radial-gradient(circle at 60% 40%, #1e90ff, #0040a0);
animation-delay: 1.5s;
}
#services .bg-ring {
top: 40%;
left: 50%;
width: 300px;
height: 300px;
border: 12px solid rgba(67,125,233,0.25);
transform: translate(-50%, -50%) rotate(45deg);
animation-delay: 0.5s;
}
/* حركة ناعمة */
@keyframes floatShape {
from { transform: translateY(0) rotate(0deg); }
to { transform: translateY(-25px) rotate(20deg); }
}
.service-card i {
font-size: 2.5rem;
color: #f0f8ff;
margin-bottom: 15px;
transition: transform 0.3s ease, color 0.3s ease;
}
.service-card:hover i {
transform: scale(1.15);
color: #004080;
}
/* ===== قسم شركاؤنا ===== */
#partners {
position: relative;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
width: 100%;
padding: 40px 0;
overflow: hidden;
}
#partners::before {
content: "";
position: absolute;
top: -150px;
right: -150px;
width: 400px;
height: 400px;
border-radius: 50%;
background: radial-gradient(circle, rgba(67,125,233,0.12), transparent 70%);
z-index: 0;
}
#partners .section-inner {
max-width: 1200px;
margin: 0 auto;
padding: 40px 30px;
text-align: center;
position: relative;
z-index: 2;
background-color: #5b7bee8a !important;
border-radius: 15px;
}
#partners h2 {
font-family: "Tajawal", sans-serif;
font-size: 2.6rem;
font-weight: 800;
background: #ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 40px;
}
#partners .section-grid {
display: flex;
flex-wrap: wrap;
gap: 30px;
justify-content: center;
align-items: center;
}
#partners .cardk {
background: #fff;
border-radius: 16px;
padding: 30px 20px;
box-shadow: 0 8px 22px rgba(0, 40, 100, 0.08);
transition: all 0.3s ease;
width: 240px;
}
#partners .cardk:hover {
transform: translateY(-8px) scale(1.03);
box-shadow: 0 16px 36px rgba(67,125,233,0.18);
}
#partners img {
width: 100px;
margin-bottom: 12px;
opacity: 0.9;
transition: opacity 0.3s ease;
}
#partners .cardk:hover img {
opacity: 1;
}
/* تجاوب */
@media (max-width: 768px) {
#partners h2 {
font-size: 2rem;
}
#partners .cardk {
width: 160px;
padding: 20px 10px;
}
}
/* ===== قسم شركاؤنا الفخم ===== */
#partners {
position: relative;
overflow: hidden;
background: radial-gradient(circle at 80% 10%, #f3f7ff, #e8efff 80%);
isolation: isolate;
}
/* خلفية تفاعلية */
.partners-bg .sphere,
.partners-bg .ring,
.partners-bg .flare {
position: absolute;
filter: blur(2px);
opacity: 0.15;
animation: floatPartner 8s ease-in-out infinite alternate;
}
.sphere {
top: -120px;
right: -100px;
width: 300px;
height: 300px;
background: radial-gradient(circle at 30% 30%, #4facfe, #004080);
border-radius: 50%;
}
.ring {
bottom: -80px;
left: -80px;
width: 280px;
height: 280px;
border: 12px solid rgba(67,125,233,0.3);
border-radius: 50%;
}
.flare {
top: 45%;
left: 50%;
width: 380px;
height: 380px;
background: radial-gradient(circle, rgba(30,144,255,0.15), transparent 70%);
transform: translate(-50%, -50%);
animation-delay: 1.5s;
}
@keyframes floatPartner {
from { transform: translateY(0); }
to { transform: translateY(-25px) rotate(15deg); }
}
/* المحتوى */
.partners-section {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
text-align: center;
}
.partners-header i {
font-size: 3rem;
color: #1e90ff;
margin-bottom: 15px;
animation: iconPulse 2s infinite ease-in-out;
}
@keyframes iconPulse {
0%, 100% { transform: scale(1); color: #1e90ff; }
50% { transform: scale(1.15); color: #004080; }
}
.partners-header h2 {
font-family: "Tajawal", sans-serif;
font-weight: 800;
font-size: 3.2rem;
background: linear-gradient(90deg, #004080, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 20px;
}
.partners-header .subtitle {
font-size: 1.35rem;
line-height: 2;
color: #f5f6f8;
opacity: 0.9;
max-width: 850px;
margin: 0 auto 60px;
font-weight: 800;
}
/* شبكة الشركاء */
.partners-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 28px;
}
.partner-card {
background: rgb(21 43 120 / 57%);
border-radius: 18px;
padding: 35px 15px;
box-shadow: 0 8px 25px rgba(0, 40, 100, 0.08);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.partner-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(30,144,255,0.06), rgba(0,64,128,0.03));
opacity: 0;
transition: opacity 0.4s ease;
}
.partner-card:hover::before {
opacity: 1;
}
.partner-card i {
font-size: 2.3rem;
color: #719cc6;
margin-bottom: 12px;
transition: transform 0.4s ease, color 0.4s ease;
}
.partner-card:hover i {
transform: scale(1.15) rotate(10deg);
color: #f7fbff;
}
.partner-card span {
display: block;
font-weight: 700;
color: #d3e4f9;
font-size: 1.1rem;
letter-spacing: 0.3px;
}
/* ظهور أنيق عند التمرير */
.partner-card {
opacity: 0;
transform: translateY(40px);
animation: fadeUpCard 1s forwards;
}
.partner-card:nth-child(1) { animation-delay: 0.1s; }
.partner-card:nth-child(2) { animation-delay: 0.2s; }
.partner-card:nth-child(3) { animation-delay: 0.3s; }
.partner-card:nth-child(4) { animation-delay: 0.4s; }
.partner-card:nth-child(5) { animation-delay: 0.5s; }
.partner-card:nth-child(6) { animation-delay: 0.6s; }
.partner-card:nth-child(7) { animation-delay: 0.7s; }
.partner-card:nth-child(8) { animation-delay: 0.8s; }
.partner-card:nth-child(9) { animation-delay: 0.9s; }
.partner-card:nth-child(10) { animation-delay: 1s; }
.partner-card:nth-child(11) { animation-delay: 1.1s; }
@keyframes fadeUpCard {
to { opacity: 1; transform: translateY(0); }
}
/* تجاوب */
@media (max-width: 768px) {
.partners-header h2 { font-size: 2.3rem; }
.partners-header .subtitle { font-size: 1rem; }
.partner-card { padding: 25px 10px; }
}
/* ===== صورة التذكرة ===== */
.ticket-image {
width: 100%;
height: 250px;
border-radius: 14px 14px 0 0;
overflow: hidden;
margin-bottom: 16px;
position: relative;
box-shadow: 0 6px 18px rgba(0, 40, 120, 0.12);
transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.ticket-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
filter: brightness(0.95) contrast(1.05);
}
.ticket-card:hover .ticket-image img {
transform: scale(1.05);
filter: brightness(1.05) contrast(1.1);
}
.ticket-card:hover .ticket-image {
transform: translateY(-4px);
box-shadow: 0 10px 28px rgba(30, 144, 255, 0.18);
}
.ticket-body {
padding: 16px 18px; /* التباعد الداخلي للعناصر داخل البطاقة */
display: flex;
flex-direction: column;
gap: 12px; /* المسافة بين العناصر */
box-sizing: border-box;
}
/* === قسم الأخبار === */
.news-section {
direction: rtl;
padding: 60px 20px;
background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}
.news-container {
max-width: 750px;
margin: 0 auto;
}
/* ===== عنوان القسم ===== */
.news-heading {
font-size: 2rem;
font-weight: 800;
text-align: right;
margin-bottom: 35px;
background: linear-gradient(90deg, #0c3b6b, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ===== الفيد العمودي ===== */
.news-feed {
display: flex;
flex-direction: column;
gap: 32px;
}
/* ===== البطاقة (المنشور) ===== */
.news-card {
background: #fff;
border-radius: 18px;
box-shadow: 0 6px 28px rgba(10,30,70,0.08);
overflow: hidden;
transition: all 0.4s ease;
border: 1px solid rgba(0,0,0,0.05);
animation: fadeIn 0.8s ease forwards;
opacity: 0;
transform: translateY(25px);
}
@keyframes fadeIn {
to { opacity: 1; transform: translateY(0); }
}
.news-card:hover {
transform: translateY(-8px);
box-shadow: 0 16px 45px rgba(10,30,70,0.12);
}
/* ===== رأس المنشور (ثابت) ===== */
.news-card .post-header {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 20px 12px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.logo-wrap {
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(10,30,70,0.1);
}
.logo-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.meta {
text-align: right;
flex-grow: 1;
}
.company-name {
font-size: 1.1rem;
font-weight: 700;
color: #0f172a;
margin: 0;
}
.company-tag {
font-size: 0.9rem;
color: #6b7280;
margin: 2px 0 0 0;
}
/* ===== الصورة ===== */
.card-image {
position: relative;
background: #f3f6fb;
overflow: hidden;
max-height: 600px;
}
.card-image img {
width: 100%;
height: auto;
max-height: 600px;
object-fit: contain;
transition: transform 0.5s ease, filter 0.5s ease;
display: block;
margin: auto;
}
.news-card:hover .card-image img {
transform: scale(1.02);
filter: brightness(1.05);
}
/* ===== النص ===== */
.card-body {
padding: 20px 22px 26px;
text-align: right;
}
.card-title {
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 10px;
color: #0c254a;
line-height: 1.5;
}
.card-excerpt {
font-size: 1.05rem;
color: #555;
line-height: 1.8;
white-space: pre-wrap;
}
/* ===== رسالة لا توجد أخبار ===== */
.news-empty {
text-align: center;
color: #6b7280;
font-size: 1rem;
margin-top: 30px;
}
/* ===== استجابة للشاشات ===== */
@media (max-width: 600px) {
.news-section {
padding: 40px 15px;
}
.news-card {
border-radius: 14px;
}
.logo-wrap {
width: 48px;
height: 48px;
border-radius: 10px;
}
.card-title {
font-size: 1.1rem;
}
}
/* ✅ 1. تحسين عرض اللوغو داخل بطاقة الخبر */
.news-logo img {
width: 100%;
height: auto;
object-fit: contain;
display: block;
margin: 0 auto;
max-height: 120px; /* يضمن أن الصورة لا تتجاوز حجم البطاقة */
}
/* ✅ 2. جعل نص الخبر يظهر بسطرين فقط مع المزيد.. */
.card-excerpt {
position: relative;
display: -webkit-box;
-webkit-line-clamp: 2; /* عدد الأسطر المسموح بها */
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
line-height: 1.8;
color: #333;
transition: all 0.4s ease;
}
/* عند فتح البطاقة (عند الضغط على المزيد) */
.news-card.expanded .card-excerpt {
-webkit-line-clamp: unset;
max-height: none;
}
/* ✅ الزر "المزيد.." */
.more-btn {
color: #004080;
font-weight: 700;
cursor: pointer;
display: inline-block;
margin-top: 6px;
}
.more-btn:hover {
text-decoration: underline;
}
/* ✅ تجاوب عام */
@media (max-width: 768px) {
.news-logo img { max-height: 90px; }
.card-excerpt { font-size: 0.95rem; }
}
/* ===== تحسين عرض اللوغو داخل البطاقة الإخبارية ===== */
.logo-wrap {
width: 56px;
height: 56px;
border-radius: 12px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #eef6ff, #ffffff);
box-shadow: 0 6px 14px rgba(10,30,70,0.06);
}
.logo-wrap img {
width: 100%;
height: 100%;
object-fit: contain; /* أهم سطر: يحفظ شعارك كاملاً بدون قص أو تمدد */
display: block;
}
/* ==== تعديل: دعم فواصل الأسطر والاختبار لزر المزيد ==== */
.card-excerpt {
display: block;
overflow: hidden;
line-height: 1.8;
max-height: calc(1.8em * 2); /* سطران افتراضياً */
transition: max-height 380ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
white-space: pre-wrap; /* مهم: يحول \n /
إلى أسطر مرئية */
color: #333;
}
/* حالة التوسيع تُرفع قيمة max-height ديناميكياً عبر JS */
.news-card.expanded .card-excerpt {
/* عند التوسيع لا نحدد قيمة هنا — JS يحدد max-height الفعلية */
/* لكن نترك transition يعمل */
}
/* زر المزيد — يظهر فقط عندما يكون النص أطول فعلاً (سيضيفه JS) */
.more-btn {
display: inline-block;
margin-top: 10px;
color: #004080;
font-weight: 800;
cursor: pointer;
user-select: none;
transition: color 160ms ease, transform 160ms ease;
}
.more-btn:hover { color: #1e90ff; transform: translateY(-2px); }
/* مظهر صغير للـ"المزيد.." عند الشاشات الصغيرة */
@media (max-width: 480px) {
.logo-wrap { width: 48px; height: 48px; border-radius: 10px; }
.card-excerpt { line-height: 1.7; max-height: calc(1.7em * 2); }
.more-btn { font-size: 0.95rem; }
}
/* للتأكد من أن الصورة الكبرى في card-image لا تؤثر على شعار البطاقة */
.news-card .card-image img {
max-height: 420px;
width: 100%;
object-fit: contain;
display: block;
}
/* ===== خلفية قسم التذاكر التفاعلية ثلاثية الأبعاد ===== */
#memories {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(180deg, #f7faff 0%, #e8f0ff 100%);
}
/* أشكال ثلاثية الأبعاد */
#memories .bg-3d-sphere,
#memories .bg-3d-ring,
#memories .bg-3d-cube {
position: absolute;
opacity: 0.18;
filter: blur(2px);
transform-style: preserve-3d;
animation: float3d 9s ease-in-out infinite alternate;
z-index: 0;
}
/* كرات مضيئة */
#memories .bg-3d-sphere {
top: -120px;
right: -120px;
width: 240px;
height: 240px;
background: radial-gradient(circle at 30% 30%, #4facfe, #004080);
border-radius: 50%;
}
/* حلقة مضيئة */
#memories .bg-3d-ring {
bottom: -100px;
left: -80px;
width: 260px;
height: 260px;
border: 14px solid rgba(30,144,255,0.25);
border-radius: 50%;
transform: rotate3d(0.6, 1, 0, 55deg);
animation-delay: 1.2s;
}
/* مكعب زجاجي */
#memories .bg-3d-cube {
top: 40%;
left: 50%;
width: 180px;
height: 180px;
background: linear-gradient(135deg, rgba(255,255,255,0.12), rgba(67,125,233,0.25));
border-radius: 18px;
transform: translate(-50%, -50%) rotate3d(1,1,0,30deg);
box-shadow: 0 0 80px rgba(67,125,233,0.2);
animation-delay: 2s;
}
/* حركة ناعمة ثلاثية الأبعاد */
@keyframes float3d {
from { transform: translateY(0) rotate3d(1,1,0,0deg) scale(1); }
to { transform: translateY(-30px) rotate3d(1,1,0,25deg) scale(1.05); }
}
/* تأثير ضوء ديناميكي */
#memories::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 20%, rgba(123, 159, 226, 0.062), transparent 60%),
radial-gradient(circle at 20% 80%, rgba(30, 143, 255, 0.06), transparent 60%);
animation: lightPulse 10s ease-in-out infinite alternate;
z-index: 0;
}
@keyframes lightPulse {
from { opacity: 0.4; transform: scale(1); }
to { opacity: 0.7; transform: scale(1.1); }
}
/* ضمان بقاء بطاقات التذاكر فوق التأثير */
.tickets-section, .tickets-grid, .ticket-card {
position: relative;
z-index: 2;
}
/* ===== قسم الأخبار الفخم الرسمي مع خلفية ثلاثية الأبعاد وتناسق لوني راقٍ ===== */
#news {
position: relative;
overflow: hidden;
isolation: isolate;
background: linear-gradient(180deg, #f6f9ff 0%, #eaf0ff 100%);
perspective: 1000px;
}
/* حركة الإضاءة الخلفية */
#news::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(70, 129, 255, 0.047), transparent 70%),
radial-gradient(circle at 20% 85%, rgba(0, 80, 200, 0.04), transparent 70%),
linear-gradient(180deg, #f8fbff 0%, #eaf0ff 100%);
z-index: 0;
animation: newsLightShift 14s ease-in-out infinite alternate;
}
@keyframes newsLightShift {
from { opacity: 0.75; transform: scale(1); }
to { opacity: 1; transform: scale(1.1); }
}
/* عناصر الخلفية 3D */
#news .bg-sphere,
#news .bg-ring,
#news .bg-cube {
position: absolute;
z-index: 0;
opacity: 0.18;
will-change: transform;
transition: transform 0.2s ease-out;
}
/* كرة مضيئة */
#news .bg-sphere {
top: -100px;
right: -120px;
width: 240px;
height: 240px;
background: radial-gradient(circle at 30% 30%, #0025ff, #0081ff);
border-radius: 50%;
filter: blur(1px);
transform: translateZ(0);
}
/* حلقة شفافة */
#news .bg-ring {
bottom: -130px;
left: -100px;
width: 300px;
height: 300px;
border: 12px solid rgba(67,125,233,0.25);
border-radius: 50%;
transform: rotate3d(1,1,0,25deg);
}
/* مكعب زجاجي */
#news .bg-cube {
top: 45%;
left: 55%;
width: 160px;
height: 160px;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(67,125,233,0.18));
border-radius: 18px;
box-shadow: 0 0 60px rgba(67,125,233,0.18);
transform: translate(-50%, -50%) rotate3d(1,1,0,25deg);
}
/* عنوان رسمي */
#news .news-heading {
text-align: center;
font-family: "Tajawal", sans-serif;
font-size: 2.8rem;
font-weight: 800;
letter-spacing: 0.5px;
background: linear-gradient(90deg, #003366, #1e90ff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
z-index: 2;
position: relative;
}
#news .news-subtitle {
text-align: center;
color: #344767;
opacity: 0.85;
font-size: 1.1rem;
margin-bottom: 45px;
position: relative;
z-index: 2;
font-weight: 500;
}
/* بطاقات الأخبار بتصميم رسمي متناسق */
.news-card {
background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
border: 1px solid rgba(67,125,233,0.15);
border-radius: 16px;
box-shadow:
0 3px 10px rgba(0, 64, 128, 0.05),
0 8px 25px rgba(0, 64, 128, 0.06);
transition: all 0.35s ease;
backdrop-filter: blur(4px);
}
.news-card:hover {
transform: translateY(-6px) scale(1.01);
background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 100%);
box-shadow:
0 6px 25px rgba(67,125,233,0.14),
0 0 10px rgba(30,144,255,0.06);
border-color: rgba(67,125,233,0.22);
}
/* تحسين النصوص داخل البطاقات */
.card-title {
color: #0d1e46 !important;
font-weight: 700 !important;
}
.card-excerpt {
color: #3a4c6e !important;
}
/* رأس الخبر */
.post-header {
background: linear-gradient(90deg, rgba(245,248,255,0.8), rgba(255,255,255,0.9));
border-bottom: 1px solid rgba(67,125,233,0.1);
}
.logo-wrap {
background: linear-gradient(135deg, #f2f6ff, #ffffff);
box-shadow: 0 4px 12px rgba(0,64,128,0.04);
}
/* لمعان خفيف علوي */
#news::after {
content: "";
position: absolute;
top: 0; left: 0;
width: 100%; height: 200px;
background: linear-gradient(180deg, rgba(255,255,255,0.4), transparent);
pointer-events: none;
z-index: 1;
}
/* تدرج الطبقات */
.news-container, .news-feed, .news-card {
position: relative;
z-index: 2;
}
/* ====== NAVBAR الأنيق الرسمي بتدرجات زرقاء فخمة ====== */
.navbar {
position: sticky;
top: 0;
left: 0;
right: 0;
height: var(--nav-height);
background: linear-gradient(135deg, #002b60 0%, #004b9b 50%, #0073e6 100%);
color: var(--white);
display: flex;
align-items: center;
z-index: 1200;
box-shadow: 0 6px 22px rgba(0, 40, 100, 0.18);
padding: 0 1rem;
backdrop-filter: blur(8px);
transition: all 0.35s ease;
}
.navbar::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent 70%);
pointer-events: none;
}
.nav-container {
max-width: 1200px;
margin: auto;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
/* === الروابط === */
.nav-links {
display: flex;
gap: 0.5rem;
align-items: center;
}
.nav-links a {
color: var(--white);
text-decoration: none;
padding: 10px 18px;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
font-size: 1.3rem;
}
/* تأثير التحويم */
.nav-links a:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 60, 140, 0.25);
}
/* العنصر النشط */
.nav-links a.active {
background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
color: #ffcc00;
box-shadow: inset 0 0 12px rgba(255,255,255,0.25);
}
/* زر القائمة للجوال */
.menu-toggle {
display: none;
background: rgba(255,255,255,0.12);
border: none;
color: #fff;
font-size: 1.5rem;
padding: 0.45rem 0.6rem;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.menu-toggle:hover {
background: rgba(255,255,255,0.2);
transform: scale(1.05);
}
/* عند التمرير */
.navbar.scrolled {
background: linear-gradient(135deg, #002550 0%, #004080 60%, #005fcc 100%);
box-shadow: 0 8px 28px rgba(0, 40, 100, 0.22);
backdrop-filter: blur(10px);
}
/* تجاوب */
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.nav-links {
position: fixed;
top: var(--nav-height);
left: 0;
right: 0;
background: linear-gradient(180deg, #002d6b 0%, #004f9f 100%);
flex-direction: column;
align-items: center;
padding: 18px 0;
gap: 12px;
display: none;
box-shadow: 0 6px 25px rgba(0, 40, 120, 0.2);
}
.nav-links.show {
display: flex;
animation: fadeDown 0.35s ease forwards;
}
@keyframes fadeDown {
from { opacity: 0; transform: translateY(-15px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-links a {
font-size: 1.05rem;
padding: 12px 24px;
}
}
/* ===== إصلاح تناسق الهيدر وتفعيل قائمة الجوال دون تغيير التصميم ===== */
/* أساسيات ثبات الشكل */
.navbar {
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
z-index: 1500;
height: 74px;
}
.nav-container {
width: 100%;
max-width: 1200px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
/* إصلاح شكل الشعار */
.logo {
display: flex;
align-items: center;
gap: 10px;
user-select: none;
}
.logo img {
height: 50px;
width: auto;
object-fit: contain;
}
/* الروابط */
.nav-links {
display: flex;
align-items: center;
gap: 12px;
}
/* روابط الهيدر الكبيرة */
.nav-link {
display: flex;
align-items: center;
justify-content: center;
padding: 10px 18px;
border-radius: 10px;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
}
.nav-link:hover {
background: rgba(255,255,255,0.15);
}
/* زر القائمة للجوال */
.menu-toggle {
display: none;
background: transparent;
border: none;
font-size: 1.8rem;
color: #fff;
cursor: pointer;
user-select: none;
}
/* ===== تصميم قائمة الجوال ===== */
@media (max-width: 900px) {
.menu-toggle {
display: block;
}
.nav-links {
display: none;
flex-direction: column;
align-items: center;
position: fixed;
top: 74px;
left: 0;
right: 0;
background: rgba(0, 35, 80, 0.95);
backdrop-filter: blur(10px);
padding: 25px 0;
gap: 14px;
z-index: 1200;
animation: fadeDown 0.4s ease forwards;
}
.nav-links.show {
display: flex;
}
@keyframes fadeDown {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-link {
font-size: 1.1rem;
padding: 12px 24px;
width: 100%;
text-align: center;
}
}
.price-two {
display: block;
width: 100%;
text-align: center;
margin-top: 6px;
font-size: 0.95rem;
color: #004080;
font-weight: 700;
background: rgba(67,125,233,0.05);
padding: 6px 0;
border-radius: 8px;
}
/* === إصلاح موضع العنوان (airline-name) وثبات الزر ===
ألصق هذا في نهاية الـ CSS داخل index.html */
.ticket-body {
display: flex; /* تجعل محتويات الجسم عموداً قابلاً للمرونة */
flex-direction: column;
gap: 12px; /* يحافظ على المسافات الحالية */
min-height: 0; /* مهم داخل بطاقات ذات قيود ارتفاع */
box-sizing: border-box;
}
/* اجعل رأس البطاقة (اللوغو + الاسم) عنصر غير مرن يبقى في الأعلى */
.ticket-top {
flex: 0 0 auto; /* لا يتمدد ولا ينكمش */
align-items: center;
display: flex;
gap: 10px;
margin-bottom: 0; /* نترك المسافات داخل العناصر إن لزم */
}
/* العنصر الذي يحتوي التفاصيل (المسار، الأسعار، التواريخ) هو الذي يمتد */
.ticket-details {
flex: 1 1 auto; /* يمتد ليملأ الفراغ بين العنوان والزر */
min-height: 0; /* منع overflow عند استخدام flex داخل grid */
display: flex;
flex-direction: column;
gap: 10px;
}
/* حافظ على سلوك .info الحالي (يمكنه البقاء كما هو) */
.info {
/* لا تغيّر justify-content هنا — يمكن أن يبقى موجوداً */
}
/* تأكد أن زر الحجز لا يتمدد ويبقى في أسفل البطاقة */
.book-btn {
flex: 0 0 auto; /* لا يتمدد — يظل في الأسفل */
align-self: center; /* يبقى في وسط البطاقة عرضياً كما الآن */
margin-top: 8px; /* مسافة بسيطة عن المحتوى أعلاه */
}
/* حماية إضافية: عندما تكون الصورة موجودة، لا تؤثر على ترتيب ticket-body */
.ticket-card > .ticket-image {
flex: 0 0 auto; /* لا تسمح للصورة بالتأثير على ارتفاع الجسم المرن */
}
/* للحالات الصغيرة: ضمان التوافق */
@media (max-width: 768px) {
.ticket-body { gap: 10px; }
.ticket-details { gap: 8px; }
}
/* ===== تنسيق احترافي مفصّل لقسم التذاكر (ضعه في نهاية الـ CSS) ===== */
/* 1) بنية داخلية ثابتة */
.ticket-card {
display: flex;
flex-direction: column;
justify-content: flex-start; /* لا نستخدم space-between هنا - نتحكم صراحة */
height: 100%;
min-height: 420px; /* ارتفاع افتراضي يعطِي توازنًا للـ grid (يمكن ضبطه) */
overflow: hidden;
}
/* 2) صورة التذكرة لا تؤثر على ارتفاع الجسم المرن */
.ticket-card > .ticket-image {
flex: 0 0 auto; /* ثابت الحجم */
}
/* 3) الجسم: رأس + منطقة رئيسية قابلة للتمدد + CTA في الأسفل */
.ticket-body {
display: flex;
flex-direction: column;
gap: 12px;
padding: 16px 18px;
flex: 1 1 auto; /* يأخذ المساحة المتبقية */
min-height: 0; /* مهم داخل flex ليتصرف بشكل متوقع */
box-sizing: border-box;
}
/* 4) الرأس: يبقى بنفس الموضع دائمًا (تحت الصورة مباشرةً) */
.ticket-top {
display: flex;
align-items: center;
gap: 12px;
flex: 0 0 auto; /* لا ينكمش ولا يتمدد */
padding-top: 2px;
}
/* logo ثابت الحجم */
.airline-logo {
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 10px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
/* اسم الشركة: نُبقيه في نفس الموضع ونمنع اختفاؤه بصريًا */
.airline-name {
font-size: 1.4rem !important;
font-weight: 800;
color: #03264d;
min-height: 1.2em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
/* 5) المنطقة الرئيسية: شبكة متوازنة أفقياً */
.ticket-main-grid {
display: grid;
grid-template-rows: auto 1fr auto; /* المسار / محتوى المعلومات / التواريخ */
gap: 10px;
align-items: start;
flex: 1 1 auto;
min-height: 0;
}
/* المسار واضح في الأعلى من الشبكة */
.ticket-main-grid .route {
grid-row: 1;
display:flex;
justify-content:center;
align-items:center;
font-weight:800;
font-size:1.55rem;
color:#00396b;
letter-spacing:0.3px;
}
/* محتوى المعلومات: عمودان متساويان */
.ticket-main-grid .info {
grid-row: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 12px;
align-items: start;
width: 100%;
}
/* كل خلية تعرض label ثم value */
.ticket-main-grid .info > div {
display:flex;
flex-direction:column;
gap:4px;
min-height: 40px;
}
/* التصنيفات والقيم */
.ticket-main-grid .label {
font-size:1rem;
color:#667085;
font-weight:700;
direction: rtl;
}
.ticket-main-grid .value {
font-size:1rem;
color:#05294c;
font-weight:800;
}
/* التواريخ في الأسفل - عرض عمودي */
.ticket-main-grid .dates {
grid-row: 3;
display:flex;
flex-direction:column;
gap:6px;
color:#3b4b64;
font-size:1.3rem;
}
/* 6) حاوية الزر: تضمن أن الزر ثابت في الأسفل */
.ticket-cta {
flex: 0 0 auto; /* لا يتمدد */
display:flex;
justify-content:center;
align-items:center;
padding-top: 6px;
}
/* لا نلمس تصميم الزر الحالي لكن نضمن محاذاته */
.ticket-cta .book-btn {
margin: 0;
align-self: center;
width: 220px;
}
/* 7) حالات الغياب: placeholders مرئية وخفيفة */
.airline-name:empty::after {
content: "شركة غير محددة";
color: #9aa6b8;
font-weight:700;
opacity:0.9;
display:block;
}
/* حالة غياب السعر/درجة - نعرض نص خفيف بدل ترك الحقل يختفي */
.ticket-main-grid .value:empty::after {
content: "—";
color: #a8b3c2;
font-weight:700;
}
/* 8) قيود وحماية من الانهيار داخل أقسام مرنة */
.ticket-details, .ticket-main-grid, .info, .dates {
min-height: 0;
}
/* 9) تجاوب */
@media (max-width: 900px) {
.ticket-main-grid .info {
grid-template-columns: 1fr;
}
.ticket-cta .book-btn {
width: 100%;
}
.airline-logo { width:46px; height:46px; flex-basis:46px; }
.airline-name { font-size:1rem; }
.ticket-card { min-height: 360px; }
}
/* === تكبير صورة الخبر لتظهر بوضوح أكبر === */
#news .card-image {
width: 100%;
height: auto;
max-height: none;
background: #f3f5f8;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
#news .card-image img {
width: 100%;
height: auto;
max-height: 1000px; /* يمكنك تعديلها (600 إلى 800) لزيادة الارتفاع */
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.4s ease, filter 0.4s ease;
}
/* عند تمرير الفأرة على الخبر */
#news .news-card:hover .card-image img {
transform: scale(1.04);
filter: brightness(1.05);
}
/* === ضبط عرض بطاقات الأخبار لتكون مثل منشورات فيسبوك على الشاشات الكبيرة === */
/* في الشاشات الكبيرة */
@media (min-width: 1200px) {
#news #news-grid {
display: flex;
flex-direction: column;
align-items: center;
}
#news .news-card {
width: 650px; /* يمكنك تعديلها بين 600 - 700 حسب ذوقك */
margin: 0 auto;
}
}
/* في الشاشات المتوسطة (تابلت) */
@media (min-width: 768px) and (max-width: 1199px) {
#news .news-card {
width: 80%;
margin: 0 auto;
}
}
/* في الشاشات الصغيرة (موبايل) */
@media (max-width: 767px) {
#news .news-card {
width: 100%;
}
}
/* ===== قسم تواصل معنا الاحترافي الحديث ===== */
.contact-section {
background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%);
padding: 90px 20px;
}
.contact-container {
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.contact-title {
font-family: "Tajawal", sans-serif;
font-weight: 800;
font-size: 2.8rem;
letter-spacing: -0.5px;
background: linear-gradient(318deg, #ffffff6e, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 10px;
}
.contact-subtitle {
font-size: 1.1rem;
color: #555;
margin-bottom: 60px;
}
.contact-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 35px;
}
.contact-card {
background: #3f79d0de;
border-radius: 20px;
padding: 40px 30px;
box-shadow: 0 10px 35px rgba(0, 80, 160, 0.08);
text-align: right;
transition: all 0.4s ease;
margin-bottom: 30px;
}
.contact-card:hover {
transform: translateY(-6px);
box-shadow: 0 14px 45px rgba(0, 80, 160, 0.15);
}
.icon-wrap {
width: 55px;
height: 55px;
background: linear-gradient(135deg, #007bff, #004f9a);
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.6rem;
margin-bottom: 20px;
}
.contact-card h3 {
color: #ffffff;
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 8px;
}
.contact-card .desc {
color: #ffffff;
font-size: 1rem;
margin-bottom: 20px;
}
.contact-row,
.email-item {
background: #2157b5;
border-radius: 12px;
padding: 10px 14px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.contact-row:hover,
.email-item:hover {
background: #286aee;
}
.contact-row span,
.email-item span {
color: #dde9ff;
font-size: 0.98rem;
flex: 1;
word-break: break-all;
}
.email-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
/* رابط الإيميل مع أيقونة احترافية */
.email-link {
display: flex;
align-items: center;
gap: 8px;
color: #004080;
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
padding: 6px 12px;
border-radius: 8px;
transition: all 0.3s ease;
flex: 1;
word-break: break-all;
}
.email-link i {
color: #1e90ff;
font-size: 1.1rem;
transition: all 0.3s ease;
}
.email-link:hover {
color: #ffffff;
transform: translateX(-2px);
}
.email-link:hover i {
transform: scale(1.15);
color: #ffffff;
}
/* جعل نص الإيميل يأخذ المسافة ويدفع الأزرار لليسار داخل قسم تواصل معنا */
.contact-section .email-item .email-link {
margin-inline-start: auto; /* يدفع الأزرار التالية لليسار في RTL */
cursor: default; /* ليس رابطاً الآن */
text-decoration: none;
}
/* فرض صف أفقي في قسم تواصل معنا حتى على الشاشات الصغيرة */
.contact-section .email-item {
display: flex;
flex-direction: row !important;
align-items: center !important;
}
/* تحسين التجاوب */
@media (max-width: 768px) {
.contact-grid {
grid-template-columns: 1fr;
}
.contact-card {
text-align: center;
}
.contact-row,
.email-item {
flex-direction: column;
align-items: center;
gap: 8px;
}
.email-link {
justify-content: center;
text-align: center;
width: 100%;
}
.copy-btn {
margin: 0;
}
.contact-card h3 {
font-size: 1.3rem;
}
}
/* === ضبط كامل شكل مساحة اللوغو ليكون متناسقًا لجميع اللوغوات === */
/* ======== إصلاح نهائي: اللوغو يملأ المربع كاملاً بشكل احترافي ======== */
/* ===== تحسين نهائي للوغو شركات الطيران — يملأ الحاوية بأناقة ومتناسق ===== */
/* حاوية اللوغو: مربع مرن ومتجاوب */
.airline-logo {
width: 86px; /* حجم افتراضي على الديسكتوب */
height: 86px; /* مربع بالكامل */
flex: 0 0 86px; /* يحتفظ بالمساحة داخل الـ ticket-top */
border-radius: 14px; /* زاوية ناعمة */
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #f5f9ff, #ffffff);
box-shadow: 0 6px 18px rgba(2, 36, 76, 0.06);
transition: transform .28s ease, box-shadow .28s ease;
box-sizing: border-box;
}
/* داخل الصورة: نُجعلها تملأ الحاوية مع الحفاظ على نسبة العرض للارتفاع */
.airline-logo img {
width: 100%;
height: 100%;
object-fit: contain; /* يحافظ على كامل الشعار دون قص أو تشويه */
display: block;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.12));
background: transparent;
}
/* تأثير تكبير لطيف عند تحويم البطاقة (موجود لديك، نتركه يعمل مع القيم الجديدة) */
.ticket-card:hover .airline-logo {
transform: scale(1.08);
box-shadow: 0 12px 30px rgba(2, 36, 76, 0.12);
}
/* استجابة الشاشات: أصغر على الموبايل لكن متناسق */
@media (max-width: 900px) {
.airline-logo { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 12px; }
}
@media (max-width: 420px) {
.airline-logo { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 10px; }
}
/* ضمان أن اسم الشركة يحتل المساحة المتبقية ويختصر نصوص طويلة */
.airline-name {
flex: 1 1 auto;
min-width: 0; /* مهم لعمل ellipsis داخل flex */
margin-inline-start: 8px; /* ترويسة من جهة اليمين لأن dir:rtl */
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
/* شعار الانتقال الزجاجي */
#section-transition {
position: fixed;
top: 0; left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.08);
backdrop-filter: blur(28px) saturate(180%);
-webkit-backdrop-filter: blur(28px) saturate(180%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
}
#section-transition img {
width: clamp(180px, 30vw, 480px);
filter: drop-shadow(0 0 40px rgba(255,255,255,0.95));
opacity: 0;
transform: scale(0.8);
transition: opacity 0.4s ease, transform 0.4s ease;
}
/* عند التفعيل */
#section-transition.active {
opacity: 1;
pointer-events: all;
}
#section-transition.active img {
opacity: 1;
transform: scale(1.08);
}
/* في الشاشات الصغيرة جدًا (موبايل) */
@media (max-width: 600px) {
#section-transition img {
width: 65vw; /* يغطي أغلب الشاشة */
transform: scale(0.85);
}
#section-transition.active img {
transform: scale(1.05);
}
}
/* خلفية متحركة متطورة */
.hero-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
}
/* طائرات متحركة متطورة */
.floating-planes {
position: absolute;
width: 100%;
height: 100%;
}
.plane {
position: absolute;
font-size: 2rem;
color: rgba(255, 255, 255, 0.8);
animation: floatPlane 20s infinite linear;
z-index: 2;
}
.plane-1 {
top: 20%;
left: -10%;
animation-delay: 0s;
animation-duration: 25s;
}
.plane-2 {
top: 40%;
left: -15%;
animation-delay: 5s;
animation-duration: 30s;
}
.plane-3 {
top: 60%;
left: -20%;
animation-delay: 10s;
animation-duration: 35s;
}
.plane-4 {
top: 30%;
left: -25%;
animation-delay: 15s;
animation-duration: 28s;
}
.plane-5 {
top: 70%;
left: -30%;
animation-delay: 20s;
animation-duration: 32s;
}
.plane-trail {
position: absolute;
width: 100px;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
top: 50%;
right: -100px;
animation: trailMove 2s infinite;
}
@keyframes floatPlane {
0% {
transform: translateX(0) translateY(0) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateX(100vw) translateY(-50px) rotate(5deg);
opacity: 0;
}
}
@keyframes trailMove {
0%, 100% {
opacity: 0;
transform: scaleX(0);
}
50% {
opacity: 1;
transform: scaleX(1);
}
}
/* سحب متحركة */
.clouds {
position: absolute;
width: 100%;
height: 100%;
}
.cloud {
position: absolute;
font-size: 3rem;
color: rgba(255, 255, 255, 0.6);
animation: floatCloud 30s infinite linear;
}
.cloud-1 {
top: 10%;
left: -20%;
animation-delay: 0s;
animation-duration: 40s;
}
.cloud-2 {
top: 30%;
left: -25%;
animation-delay: 8s;
animation-duration: 45s;
}
.cloud-3 {
top: 50%;
left: -30%;
animation-delay: 16s;
animation-duration: 35s;
}
.cloud-4 {
top: 70%;
left: -35%;
animation-delay: 24s;
animation-duration: 50s;
}
.cloud-5 {
top: 20%;
left: -40%;
animation-delay: 32s;
animation-duration: 38s;
}
.cloud-6 {
top: 80%;
left: -45%;
animation-delay: 40s;
animation-duration: 42s;
}
@keyframes floatCloud {
0% {
transform: translateX(0) translateY(0);
opacity: 0;
}
10% {
opacity: 0.7;
}
90% {
opacity: 0.7;
}
100% {
transform: translateX(120vw) translateY(-20px);
opacity: 0;
}
}
/* نجوم متلألئة */
.stars {
position: absolute;
width: 100%;
height: 100%;
}
.star {
position: absolute;
font-size: 1.5rem;
color: rgba(255, 255, 255, 0.8);
animation: twinkle 3s infinite;
}
.star-1 {
top: 15%;
left: 20%;
animation-delay: 0s;
}
.star-2 {
top: 25%;
left: 80%;
animation-delay: 0.5s;
}
.star-3 {
top: 45%;
left: 15%;
animation-delay: 1s;
}
.star-4 {
top: 65%;
left: 85%;
animation-delay: 1.5s;
}
.star-5 {
top: 35%;
left: 50%;
animation-delay: 2s;
}
.star-6 {
top: 75%;
left: 30%;
animation-delay: 2.5s;
}
.star-7 {
top: 55%;
left: 70%;
animation-delay: 3s;
}
.star-8 {
top: 85%;
left: 60%;
animation-delay: 3.5s;
}
@keyframes twinkle {
0%, 100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.2);
}
}
/* جزيئات متحركة */
.particles {
position: absolute;
width: 100%;
height: 100%;
}
.particle {
position: absolute;
width: 4px;
height: 4px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
animation: floatParticle 15s infinite linear;
}
.particle-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
animation-duration: 20s;
}
.particle-2 {
top: 40%;
left: 20%;
animation-delay: 2s;
animation-duration: 18s;
}
.particle-3 {
top: 60%;
left: 30%;
animation-delay: 4s;
animation-duration: 22s;
}
.particle-4 {
top: 80%;
left: 40%;
animation-delay: 6s;
animation-duration: 16s;
}
.particle-5 {
top: 30%;
left: 60%;
animation-delay: 8s;
animation-duration: 24s;
}
.particle-6 {
top: 50%;
left: 70%;
animation-delay: 10s;
animation-duration: 19s;
}
.particle-7 {
top: 70%;
left: 80%;
animation-delay: 12s;
animation-duration: 21s;
}
.particle-8 {
top: 90%;
left: 90%;
animation-delay: 14s;
animation-duration: 17s;
}
@keyframes floatParticle {
0% {
transform: translateY(0) translateX(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100vh) translateX(50px);
opacity: 0;
}
}
/* تحسينات قسم البطل */
.hero-section {
position: relative;
z-index: 10;
background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, var(--primary-light) 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 2rem;
}
.hero-content {
text-align: center;
max-width: 1200px;
width: 100%;
position: relative;
z-index: 20;
}
/* شارة البطل */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50px;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
font-size: 1.3rem;
font-weight: 600;
color: var(--white);
position: relative;
overflow: hidden;
}
.badge-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
animation: badgeGlow 3s infinite;
}
@keyframes badgeGlow {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* العنوان الرئيسي */
.hero-title {
margin-bottom: 1.5rem;
line-height: 1.2;
}
.title-line {
display: block;
font-size: 2rem;
font-weight: 400;
opacity: 0.9;
margin-bottom: 0.5rem;
}
.title-main {
display: block;
font-size: 4rem;
font-weight: 700;
margin: 0.5rem 0;
position: relative;
}
.title-gradient {
background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 50%, #e6f3ff 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}
.title-underline {
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
border-radius: 2px;
animation: underlineGlow 2s infinite;
}
@keyframes underlineGlow {
0%, 100% {
box-shadow: 0 0 5px var(--accent);
}
50% {
box-shadow: 0 0 20px var(--accent), 0 0 30px var(--accent);
}
}
.title-sub {
display: block;
font-size: 1.8rem;
font-weight: 300;
opacity: 0.8;
margin-top: 0.5rem;
}
/* وصف البطل */
.hero-description {
font-size: 1.9rem;
line-height: 1.6;
max-width: 800px;
margin: 0 auto 2rem;
opacity: 0.9;
}
/* أزرار العمل */
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 3rem;
flex-wrap: wrap;
}
@media (max-width:500px) {
}
/* 🎯 جعل الزرين دائمًا جنب بعض وتقليل حجمهما قليلاً تحت 500px */
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 3rem;
flex-wrap: nowrap; /* ❌ لا نريد التفاف الزرين تحت بعض */
}
/* 🔹 تنسيق طبيعي للأزرار كما هو */
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border: none;
border-radius: 50px;
font-size: 1.3rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none;
min-width: 180px;
justify-content: center;
}
/* 📱 عند الشاشات الصغيرة (تحت 500px) */
@media (max-width: 500px) {
.hero-actions {
gap: 0.6rem; /* تقليل المسافة بين الزرين */
}
.btn-primary,
.btn-secondary {
padding: 1rem 1.4rem; /* تقليل الحشوة قليلاً */
font-size: 0.9rem; /* حجم نص أصغر قليلًا */
min-width: 150px; /* تقليل العرض الأدنى */
}
}
/* 📱 عند الشاشات الصغيرة جدًا (أقل من 360px) */
@media (max-width: 360px) {
.btn-primary,
.btn-secondary {
padding: 0.65rem 1.2rem;
font-size: 0.85rem;
min-width: 120px;
}
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), #ffd700);
color: var(--primary-dark);
box-shadow: 0 8px 25px rgba(255, 204, 0, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.btn-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s ease;
}
.btn-primary:hover, .btn-secondary:hover {
transform: translateY(-3px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover .btn-glow,
.btn-secondary:hover .btn-glow {
left: 100%;
}
/* إحصائيات البطل */
.hero-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.stat-item {
text-align: center;
padding: 1.5rem;
background: rgb(91 112 247 / 99%);
backdrop-filter: blur(17px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 15px;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.stat-item:hover {
transform: translateY(-5px);
background: rgba(22, 5, 212, 0.664);
}
.stat-icon {
font-size: 2rem;
color: var(--accent);
margin-bottom: 0.5rem;
}
.stat-number {
font-size: 2.5rem;
font-weight: 700;
color: var(--white);
margin-bottom: 0.5rem;
display: block;
}
.stat-label {
font-size: 1.5rem;
opacity: 0.8;
color: var(--white);
}
.stat-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: statGlow 4s infinite;
}
@keyframes statGlow {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
/* تحسينات الأقسام الفرعية */
.services-preview, .tickets-carousel, .partners-preview, .about-preview, .contact-preview {
margin: 3rem 0;
padding: 2rem;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.preview-title {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.5rem;
font-weight: 600;
color: var(--white);
margin-bottom: 1.5rem;
}
.preview-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.partners-badge, .about-badge, .contact-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
background: rgba(255, 255, 255, 0.1);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.8rem;
color: var(--white);
}
/* تذاكر متحركة */
.tickets-carousel {
position: relative;
}
.carousel-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.carousel-indicator {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
cursor: pointer;
transition: all 0.3s ease;
}
.carousel-indicator.active {
background: var(--accent);
transform: scale(1.2);
}
.tickets-container {
position: relative;
overflow: hidden;
border-radius: 15px;
margin-bottom: 1rem;
}
.tickets-track {
display: flex;
gap: 1rem;
transition: transform 0.5s ease;
}
.tickets-gradient-left,
.tickets-gradient-right {
position: absolute;
top: 0;
width: 50px;
height: 100%;
z-index: 10;
pointer-events: none;
}
.tickets-gradient-left {
left: 0;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.05), transparent);
}
.tickets-gradient-right {
right: 0;
background: linear-gradient(-90deg, rgba(0, 0, 0, 0.05), transparent);
}
.carousel-controls {
display: flex;
justify-content: center;
gap: 1rem;
margin-bottom: 1rem;
}
.carousel-btn {
width: 40px;
height: 40px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: var(--white);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.carousel-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.auto-scroll-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.7);
}
/* شركاء */
.partners-container {
margin-bottom: 1.5rem;
}
.partners-logos {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.partner-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.partner-logo:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-3px);
}
.logo-icon {
font-size: 1.5rem;
color: var(--accent);
}
.logo-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: logoGlow 3s infinite;
}
@keyframes logoGlow {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.partners-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 1rem;
}
.partner-stat {
text-align: center;
}
.partner-stat .stat-number {
font-size: 1.5rem;
font-weight: 700;
color: var(--accent);
}
.partner-stat .stat-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
}
/* من نحن */
.about-preview {
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.about-features {
display: flex;
gap: 1rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
font-size: 0.9rem;
color: var(--white);
}
.about-image {
position: relative;
}
.image-container {
position: relative;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 15px;
padding: 2rem;
text-align: center;
overflow: hidden;
}
.image-placeholder {
font-size: 4rem;
color: var(--accent);
margin-bottom: 1rem;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0, 64, 128, 0.8), rgba(0, 34, 68, 0.6));
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 15px;
opacity: 0;
transition: opacity 0.3s ease;
}
.image-container:hover .image-overlay {
opacity: 1;
}
.overlay-text {
text-align: center;
color: var(--white);
}
.overlay-text span {
font-size: 1.5rem;
font-weight: 700;
display: block;
}
.overlay-text small {
font-size: 0.9rem;
opacity: 0.8;
}
.image-glow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 204, 0, 0.1), transparent);
border-radius: 15px;
animation: imageGlow 4s infinite;
}
@keyframes imageGlow {
0%, 100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
.about-stats {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.about-stat {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
flex: 1;
}
.stat-icon {
font-size: 1.2rem;
color: var(--accent);
}
.stat-info {
text-align: left;
}
.stat-info .stat-number {
font-size: 1.1rem;
font-weight: 700;
color: var(--white);
display: block;
}
.stat-info .stat-label {
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
}
/* التواصل */
.contact-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
flex-wrap: wrap;
gap: 1rem;
}
.contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.contact-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.contact-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.contact-icon {
font-size: 1.5rem;
color: var(--accent);
min-width: 30px;
}
.contact-details {
flex: 1;
}
.contact-details strong {
display: block;
color: var(--white);
margin-bottom: 0.2rem;
}
.contact-details span {
color: rgba(255, 255, 255, 0.8);
font-size: 0.9rem;
}
.contact-glow {
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
animation: contactGlow 3s infinite;
}
@keyframes contactGlow {
0% {
left: -100%;
}
100% {
left: 100%;
}
}
.contact-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.contact-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
border: none;
border-radius: 25px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-decoration: none;
}
.contact-btn.primary {
background: linear-gradient(135deg, var(--accent), #ffd700);
color: var(--primary-dark);
}
.contact-btn.secondary {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.contact-stats {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 1rem;
}
.contact-stat {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.8);
}
/* أزرار عامة */
.view-all-btn, .learn-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
color: var(--white);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 25px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
cursor: pointer;
}
.view-all-btn:hover, .learn-more-btn:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
/* تأثيرات الحركة */
.animate-fade-in {
animation: fadeIn 1s ease-out;
}
.animate-slide-up {
animation: slideUp 1s ease-out;
}
.animate-fade-in-delay {
animation: fadeIn 1s ease-out 0.3s both;
}
.animate-fade-in-delay-2 {
animation: fadeIn 1s ease-out 0.6s both;
}
.animate-bounce-in {
animation: bounceIn 0.8s ease-out 0.9s both;
}
.animate-bounce-in-delay {
animation: bounceIn 0.8s ease-out 1.2s both;
}
.animate-slide-in {
animation: slideIn 0.8s ease-out;
}
.animate-counter {
animation: counterUp 2s ease-out 1.5s both;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(0.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes counterUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ====================================
📱 تنسيق احترافي للشاشات الأفقية (موبايل)
==================================== */
/* الشاشات الصغيرة (أقل من 768px) */
@media (max-width: 768px) {
/* قسم البطل - إحكام المساحة */
.hero-section {
padding: 1rem;
min-height: auto;
padding-bottom: 2rem;
}
.hero-content {
padding: 0;
}
/* العنوان الرئيسي - أكبر قليلاً على الموبايل */
.hero-title .title-main {
font-size: 2.6rem;
margin: 0.3rem 0;
}
.title-line {
font-size: 1.15rem;
margin-bottom: 0.3rem;
}
.title-sub {
font-size: 1.35rem;
margin-top: 0.3rem;
}
/* الوصف - أكبر قليلاً */
.hero-description {
font-size: 1.05rem;
line-height: 1.6;
margin: 0 auto 1.5rem;
padding: 0 1rem;
}
/* البادج - أصغر */
.hero-badge {
font-size: 1rem;
padding: 0.4rem 0.8rem;
margin-bottom: 0.8rem;
}
/* الإحصائيات - افقي (2x2) */
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.8rem;
max-width: 100%;
margin-top: 1rem;
}
.stat-item {
padding: 1rem 0.8rem;
}
.stat-icon {
font-size: 1.5rem;
}
.stat-number {
font-size: 1.8rem;
}
.stat-label {
font-size: 0.75rem;
}
/* قسم "من نحن" - يحافظ على 2 أعمدة */
.about-preview {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.2rem;
}
.about-features {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.feature-item {
font-size: 0.8rem;
padding: 0.4rem 0.6rem;
text-align: center;
border-radius: 15px;
}
/* قسم "من نحن" - نص أصغر */
.about-preview .about-text {
font-size: 0.9rem;
line-height: 1.6;
}
/* قسم التواصل - افقي */
.contact-preview {
padding: 1.2rem;
}
.contact-info {
grid-template-columns: 1fr;
gap: 0.8rem;
}
.contact-item {
padding: 0.8rem;
gap: 0.6rem;
}
.contact-icon {
font-size: 1.2rem;
}
.contact-details span {
font-size: 0.85rem;
}
/* العنوان الفرعي للتواصل */
.preview-title {
font-size: 1.3rem;
margin-bottom: 1rem;
}
/* الأزرار - يحافظ على افقي */
.hero-actions {
gap: 0.8rem;
margin-bottom: 2rem;
}
.btn-primary, .btn-secondary {
padding: 0.85rem 1.6rem;
font-size: 1.5rem ;
min-width: 140px;
}
/* تذاكر متحركة - موبايل */
.tickets-carousel {
padding: 40px 0 50px;
gap: 15px;
}
.tickets-carousel .carousel-header {
padding: 0 15px;
}
.tickets-carousel .carousel-title {
font-size: 1.3rem;
}
.tickets-container {
padding: 0 10px;
}
.tickets-track {
gap: 20px;
}
/* شريحة التذاكر - الصورة تملأ كل المساحة */
.tickets-carousel .ticket-card {
flex: 0 0 280px;
height: 420px;
border-radius: 18px;
}
.tickets-carousel .ticket-card > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-controls {
gap: 0.8rem;
margin-top: 20px;
}
.carousel-btn {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
}
/* الشاشات الصغيرة جداً (أقل من 480px) */
@media (max-width: 480px) {
/* قسم البطل - إحكام أكثر */
.hero-section {
padding: 0.8rem;
padding-bottom: 1.5rem;
}
/* العنوان الرئيسي - أكبر قليلاً */
.hero-title .title-main {
font-size: 2.1rem;
margin: 0.2rem 0;
}
.title-line {
font-size: 1.05rem;
}
.title-sub {
font-size: 1.2rem;
}
/* الوصف - أكبر قليلاً */
.hero-description {
font-size: 0.98rem;
margin-bottom: 1.2rem;
padding: 0 0.8rem;
}
/* البادج */
.hero-badge {
font-size: 0.75rem;
padding: 0.35rem 0.7rem;
}
/* الإحصائيات - يحافظ على 2x2 */
.hero-stats {
grid-template-columns: repeat(2, 1fr);
gap: 0.6rem;
}
.stat-item {
padding: 0.8rem 0.6rem;
}
.stat-icon {
font-size: 1.3rem;
}
.stat-number {
font-size: 1.5rem;
}
.stat-label {
font-size: 0.7rem;
}
/* "من نحن" - ميزات افقية */
.about-preview {
padding: 1rem;
}
.about-preview .about-text {
font-size: 0.85rem;
line-height: 1.5;
}
.about-features {
grid-template-columns: repeat(3, 1fr);
gap: 0.4rem;
}
.feature-item {
font-size: 0.75rem;
padding: 0.35rem 0.5rem;
}
/* التواصل */
.contact-preview {
padding: 1rem;
}
.preview-title {
font-size: 1.2rem;
}
/* الأزرار - أصغر */
.btn-primary, .btn-secondary {
padding: 0.75rem 1.3rem;
font-size: 1.3rem;
min-width: 120px;
}
/* تذاكر - شاشات صغيرة */
.tickets-carousel {
padding: 35px 0 45px;
gap: 12px;
}
.tickets-carousel .carousel-header {
padding: 0 12px;
}
.tickets-carousel .carousel-title {
font-size: 1.2rem;
}
.tickets-container {
padding: 0 8px;
}
.tickets-track {
gap: 16px;
}
.tickets-carousel .ticket-card {
flex: 0 0 260px;
height: 390px;
border-radius: 16px;
}
.tickets-carousel .ticket-card > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-btn {
width: 34px;
height: 34px;
font-size: 0.85rem;
}
}
/* الشاشات جداً صغيرة (أقل من 360px) */
@media (max-width: 360px) {
.hero-section {
padding: 0.6rem;
padding-bottom: 1.2rem;
}
.hero-title .title-main {
font-size: 1.85rem;
}
.hero-description {
font-size: 0.92rem;
padding: 0 0.6rem;
}
.hero-badge {
font-size: 1rem;
padding: 0.3rem 0.6rem;
}
.hero-stats {
gap: 0.5rem;
}
.stat-item {
padding: 0.6rem 0.5rem;
}
.stat-icon {
font-size: 1.1rem;
}
.stat-number {
font-size: 1.3rem;
}
.stat-label {
font-size: 0.65rem;
}
.about-preview {
padding: 0.8rem;
}
.about-preview .about-text {
font-size: 0.8rem;
}
.about-features {
grid-template-columns: repeat(2, 1fr);
gap: 0.4rem;
}
.feature-item {
font-size: 0.7rem;
padding: 0.3rem 0.4rem;
}
.contact-preview {
padding: 0.8rem;
}
.preview-title {
font-size: 1.1rem;
}
.btn-primary, .btn-secondary {
padding: 0.65rem 1.1rem;
font-size: 1.3rem;
min-width: 100px;
}
.tickets-carousel {
padding: 30px 0 40px;
gap: 10px;
}
.tickets-carousel .carousel-title {
font-size: 1.1rem;
}
.tickets-container {
padding: 0 6px;
}
.tickets-track {
gap: 14px;
}
.tickets-carousel .ticket-card {
flex: 0 0 240px;
height: 370px;
border-radius: 14px;
}
.tickets-carousel .ticket-card > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.carousel-btn {
width: 32px;
height: 32px;
font-size: 0.8rem;
}
}
/* ================================================
🎟️ قسم التذاكر المتحركة في الرئيسية (تصميم فاخر نهائي)
================================================ */
/* ✨ القسم العام */
.tickets-carousel {
position: relative;
width: 100%;
padding: 80px 0 90px;
overflow: hidden;
border-radius: 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 40px;
box-shadow: 0 0 80px rgba(0, 0, 0, 0.05);
transition: all 0.6s ease;
opacity: 0;
transform: translateY(40px);
animation: fadeInSection 1s ease forwards;
}
@keyframes fadeInSection {
to {
opacity: 1;
transform: translateY(0);
}
}
/* ✈️ الرأس */
.tickets-carousel .carousel-header {
width: 100%;
max-width: 1600px;
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 10px;
transition: all 0.3s ease;
}
.tickets-carousel .carousel-header:hover {
transform: translateY(-2px);
}
.tickets-carousel .carousel-title {
font-size: 2rem;
font-weight: 800;
display: flex;
align-items: center;
gap: 10px;
color: #fff;
letter-spacing: 0.4px;
user-select: none;
text-shadow: 0 2px 10px rgba(0,0,0,0.2);
transition: transform 0.3s ease;
}
.tickets-carousel .carousel-title:hover {
transform: scale(1.03);
}
.tickets-carousel .carousel-title i {
font-size: 1.5rem;
opacity: 0.9;
}
.tickets-carousel .carousel-indicators span {
width: 10px;
height: 10px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0 0 6px rgba(0,0,0,0.15);
}
.tickets-carousel .carousel-indicators span.active {
background: rgba(255,255,255,0.6);
transform: scale(1.4);
box-shadow: 0 0 12px rgba(255,255,255,0.4);
}
/* 🧭 الحاوية - تحسين شامل */
.tickets-container {
position: relative;
width: 100%;
max-width: 1400px;
margin: 0 auto;
overflow: hidden;
display: flex;
align-items: center;
padding: 0 20px;
transition: all 0.4s ease;
opacity: 0;
transform: translateY(30px);
animation: fadeUpContainer 1s ease 0.2s forwards;
}
@keyframes fadeUpContainer {
to {
opacity: 1;
transform: translateY(0);
}
}
/* المسار - تحسين المسافات */
.tickets-track {
display: flex;
gap: 30px;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
padding: 10px 0;
}
.tickets-track::-webkit-scrollbar {
display: none;
}
/* ===== 🎟️ البطاقات - تصميم انيق ومتناسق ===== */
.tickets-carousel .ticket-card {
flex: 0 0 340px;
height: 500px;
border-radius: 22px;
position: relative;
overflow: hidden;
scroll-snap-align: start;
background: #000;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
transition: transform 0.45s ease, box-shadow 0.45s ease;
cursor: pointer;
}
.tickets-carousel .ticket-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
/* الصورة - تملأ كامل المساحة بشكل أنيق */
.tickets-carousel .ticket-card > img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s ease, filter 0.6s ease;
filter: brightness(0.85);
}
.tickets-carousel .ticket-card:hover > img {
transform: scale(1.12);
filter: brightness(1);
}
/* الطبقة الزجاجية أسفل النص فقط */
.tickets-carousel .ticket-info-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
padding: 22px 20px 24px;
color: #fff;
text-align: right;
}
/* رأس البطاقة */
.tickets-carousel .ticket-top {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.tickets-carousel .ticket-top img {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: contain;
background: rgba(255,255,255,0.9);
padding: 3px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
transition: transform 0.4s ease;
}
.tickets-carousel .ticket-card:hover .ticket-top img {
transform: scale(1.1);
}
.tickets-carousel .ticket-top h3 {
font-size: 1.2rem;
font-weight: 800;
color: #ffffff;
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
/* تفاصيل الرحلة */
.tickets-carousel .ticket-info {
font-size: 0.95rem;
line-height: 1.6;
}
.tickets-carousel .ticket-info .route {
font-size: 1.05rem;
font-weight: 700;
color: #e9f5ff;
}
.tickets-carousel .ticket-info .price {
font-weight: 800;
color: #ffdd57;
font-size: 1.05rem;
background: rgba(0,0,0,0.25);
padding: 4px 10px;
border-radius: 8px;
display: inline-block;
margin-top: 6px;
}
/* 💫 تأثير ضوء ناعم */
.tickets-carousel .ticket-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.1), transparent 60%);
opacity: 0;
transition: opacity 0.5s ease;
}
.tickets-carousel .ticket-card:hover::after {
opacity: 1;
}
/* 🎬 حركة ظهور البطاقات */
.tickets-carousel .ticket-card {
opacity: 0;
transform: translateY(40px);
animation: fadeTicketUp 0.9s ease forwards;
}
.tickets-carousel .ticket-card:nth-child(1) { animation-delay: 0.1s; }
.tickets-carousel .ticket-card:nth-child(2) { animation-delay: 0.25s; }
.tickets-carousel .ticket-card:nth-child(3) { animation-delay: 0.4s; }
@keyframes fadeTicketUp {
to { opacity: 1; transform: translateY(0); }
}
/* الأزرار */
.carousel-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 30px;
}
.carousel-btn {
width: 45px;
height: 45px;
border: none;
background: rgba(255,255,255,0.15);
color: #fff;
border-radius: 50%;
cursor: pointer;
font-size: 1.2rem;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.carousel-btn:hover {
background: rgba(255,255,255,0.3);
transform: scale(1.08);
}
/* مؤشر الحركة */
.auto-scroll-indicator {
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
color: #aaa;
gap: 6px;
font-size: 0.9rem;
opacity: 0.8;
animation: fadePulse 3s infinite ease-in-out;
}
@keyframes fadePulse {
0%,100% { opacity: 0.7; }
50% { opacity: 1; }
}
/* 📱 موبايل - تم التعديل في قسم آخر */
/* === تحسينات موبايل فقط لقسم تواصل معنا (لا تغير HTML) === */
/* الصق هذه القواعد في نهاية الـ CSS لتأخذ أولوية على القواعد السابقة */
@media (max-width: 768px) {
/* جعل الحاوية ضيقة ومركزية مع مسافات مناسبة على الموبايل */
.contact-section {
padding: 32px 12px !important;
}
.contact-container {
max-width: 560px !important;
margin: 0 auto !important;
padding: 18px !important;
box-shadow: 0 8px 28px rgba(0,40,100,0.08) !important;
border-radius: 14px !important;
text-align: right !important; /* لأن اللغة عربية */
}
/* تدرج الأحجام للعناوين لتناسب الشاشات الصغيرة */
.contact-title {
font-size: 1.6rem !important;
line-height: 1.15 !important;
margin-bottom: 8px !important;
}
.contact-subtitle {
font-size: 0.95rem !important;
margin-bottom: 16px !important;
}
/* تحوّل الشبكة لعمود واحد - دون كسر المحتوى */
.contact-grid {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
/* تصغير البطاقات وتهيئتها لعرض رأسي */
.contact-card {
padding: 18px !important;
border-radius: 12px !important;
margin-bottom: 12px !important;
text-align: right !important;
}
/* صف الأرقام/الإيميلات: اجعل المحتوى عمودياً مع محاذاة صحيحة */
.contact-row,
.email-item {
flex-direction: column !important;
align-items: flex-end !important; /* to keep label on the right */
gap: 8px !important;
padding: 10px !important;
}
.contact-row span,
.email-item span {
text-align: right !important;
width: 100% !important;
word-break: break-word !important; /* يمنع كسر الصفائح الطويلة خارج الشاشة */
font-size: 0.95rem !important;
}
/* أزرار النسخ صغيرة ومقاسة بشكل مناسب */
.copy-btn {
margin: 0 !important;
padding: 8px 10px !important;
min-width: 42px !important;
border-radius: 10px !important;
font-size: 0.95rem !important;
align-self: flex-start !important; /* يضع الزر تحت النص إذا لزم */
}
/* إذا كانت الأزرار على نفس السطر — نعطيها عرض مناسب */
.contact-actions .contact-btn {
padding: 10px 14px !important;
font-size: 0.95rem !important;
border-radius: 12px !important;
width: auto !important;
}
/* تحسين قابلية القراءة للعناصر الداخلية */
.contact-card h3 {
font-size: 1.05rem !important;
}
.contact-card .desc {
font-size: 0.95rem !important;
line-height: 1.5 !important;
}
/* أيقونات وحجمها بحيث لا تتعدى المحتوى */
.icon-wrap, .contact-icon, .logo-wrap {
width: 46px !important;
height: 46px !important;
font-size: 1.15rem !important;
}
/* منع تمرير عرضي — يضمن عدم خروج أي عنصر خارج الشاشة */
.contact-section, .contact-container, .contact-card, .contact-grid {
overflow-x: hidden !important;
}
/* تحسين مظهر بطاقة الأرقام لتكون مرئية وواضحة */
.contact-row, .email-item {
background: transparent !important;
border-radius: 8px !important;
}
/* تقليل المسافة في الفوتر الصغير (contact-stats) */
.contact-stats {
gap: 10px !important;
font-size: 0.88rem !important;
}
/* ضمان أن عناصر الـ .contact-item لا تدفع الصفحة لأعلى بسبب التحريك */
.contact-item { transform: none !important; }
}
/* قواعد إضافية للشاشات الأصغر جدا */
@media (max-width: 420px) {
.contact-container { padding: 14px 12px !important; }
.contact-title { font-size: 1.45rem !important; }
.contact-subtitle { font-size: 0.9rem !important; }
.copy-btn { height: 36px !important; padding: 6px 8px !important; }
}
/* ========================
CSS مُتكامل لقسم #home
- يَحذف أي خلفية زرقاء قديمة
- يعرض 3 صور بأبعادها الأصلية (لا تمدد)
- يضمن ظهور العناصر المتحركة فوق الصور
=======================*/
/* 1) تأكيد مسح الأزرق القديم: (قواعد قوية تتجاوز أي قواعد سابقة) */
#home, #home .section-inner, #home .section-inner.hero-section {
background: transparent !important;
background-image: none !important;
color: #06203a !important; /* نص داكن فوق الخلفية */
box-shadow: none !important;
}
/* إذا كانت هناك قواعد تُستخدم متغيرات --primary */
#home .section-inner[style],
#home .section-inner {
background: rgba(255,255,255,0.5) !important; /* طبقة زجاجية خفيفة */
border: 1px solid rgba(6,30,70,0.04) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
}
/* 2) بنية الخلفية وحاويات الصور */
.hero-background {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
/* الحاوية التي تحتوي الصور الثلاث */
.hero-images {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
z-index: 2; /* أقل من العناصر المتحركة التي تريد أن تبقى فوق الصور */
pointer-events: none;
}
/* الصور: لا تمدد — تظل بأحجامها الأصلية */
.hero-images img {
display: block;
width: auto !important;
height: auto !important;
max-height: 70vh; /* تمنع تجاوزه لطول الشاشة */
max-width: 85vw; /* تمنع تجاوزه لعرض الشاشة */
object-fit: none !important; /* يمنع التمدد أو القص */
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.18);
transition: transform 1s cubic-bezier(.2,.9,.2,1), opacity 0.6s;
opacity: 0.98;
}
/* ترتيب فني للصور */
.hero-images img:nth-child(1) {
transform: translateX(-22%) rotate(-3deg);
z-index: 1;
}
.hero-images img:nth-child(2) {
transform: scale(1.03);
z-index: 2;
}
.hero-images img:nth-child(3) {
transform: translateX(22%) rotate(3deg);
z-index: 1;
}
/* تأثير طفيف عند hover (اختياري على الديسكتوب) */
#home:hover .hero-images img:nth-child(1) { transform: translateX(-26%) rotate(-4deg) scale(1.02); }
#home:hover .hero-images img:nth-child(3) { transform: translateX(26%) rotate(4deg) scale(1.02); }
/* طبقة تغشية زجاجية خفيفة فوق الصور (تم إزالة اللون الأزرق) */
.hero-images::after {
content: "";
position: absolute;
inset: 0;
background: rgba(255,255,255,0.15);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
z-index: 3;
pointer-events: none;
}
/* 3) اجعل عناصر الطائرات/السحب/النجوم فوق الصور */
.floating-planes,
.clouds,
.stars,
.particles {
position: absolute;
inset: 0;
z-index: 5; /* أعلى من الصور ولكن تحت المحتوى (.section-inner) */
pointer-events: none;
}
/* 4) تأكيد أن المحتوى يظهر فوق كل شيء */
.section-inner,
.section-inner.hero-section,
.hero-content {
position: relative;
z-index: 10 !important;
}
/* تحديد z-index أعلى للمحتوى في القسم الرئيسي (أقل من الطائرات والسحب) */
#home .section-inner,
#home .section-inner.hero-section,
#home .hero-content {
z-index: 50 !important;
}
/* 5) تحسين تجاوب الموبايل: العمودي، دون تمديد */
@media (max-width: 768px) {
.hero-images {
flex-direction: column;
gap: 10px;
top: 48%;
}
.hero-images img {
max-width: 92vw;
max-height: 34vh;
transform: none !important;
}
.hero-images img:nth-child(1),
.hero-images img:nth-child(3) {
transform: none !important;
}
/* إزالة أي ظل مفرط يبطئ العرض على الموبايل */
.hero-images img { box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
}
/* 6) صورة الخلفية: تم نقلها من ::before إلى HTML لتجنب مشاكل الاستضافة */
#home .section-inner .background-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
filter: blur(8px) brightness(0.95);
z-index: 0;
pointer-events: none;
}
/* 8) اختصار لطباعة أخطاء تحميل الصور في console (مساعدة للمراجعة) */
.hero-images img[data-checked="false"] {
outline: 2px dashed rgba(255,0,0,0.12);
}
/* ============================
إصلاح ظهور الطائرات والسحب
— تأكد من ترتيب z-index الصحيح
— الطائرات تظهر فوق المحتوى، لكن لا تعيق النقرات
============================*/
/* أولاً: اجعل hero-background إنشاء stacking context واضح */
.hero-background {
position: absolute; /* يجب أن يكون موجوداً مسبقاً، إن لم يكن فضعه */
inset: 0;
width: 100%;
height: 100%;
z-index: 30; /* ضع الأب فوق section-inner السابق */
pointer-events: none; /* حتى لا يعيق الخلفية التفاعل */
}
/* الآن حدد z-index تفصيلياً لأبناء الخلفية */
/* الصور — تبقى خلف المحتوى لكن فوق الخلفية الأساسية */
.hero-images {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 32; /* أقل من الطائرات/السحب لكن أعلى من الخلفية */
pointer-events: none;
}
/* الطائرات والسحب يجب أن تكون أعلى من content */
.floating-planes {
position: absolute;
inset: 0;
z-index: 60; /* عالي ليظهر فوق .section-inner */
pointer-events: none; /* مهم: لا تعيق النقر على الأزرار */
}
/* اجعل كل طائرة قابلة للعرض وتتحرك */
.floating-planes .plane {
position: absolute;
display: block;
color: rgba(4,60,110,0.95);
font-size: 1.45rem; /* غيّر حسب الرغبة */
text-shadow: 0 2px 8px rgba(0,0,0,0.20);
opacity: 0.98;
transform-origin: center;
/* مثال مواقع ابتدائية — عدّل المواقع عبر CSS أو JS */
}
/* السحب فوق الطائرات قليلاً أو تحته حسب رغبتك */
.clouds {
position: absolute;
inset: 0;
z-index: 58; /* تحت الطائرات بقليل أو فوقها إذا تريد */
pointer-events: none;
}
/* النجوم والجزيئات فوق كل شيء */
.stars, .particles {
position: absolute;
inset: 0;
z-index: 62;
pointer-events: none;
}
/* تأكد أن المحتوى المرئي (section-inner) لا يخفي الطائرات: */
/* تم نقل الكود أعلاه للقسم الرئيسي #home لحل تعارض z-index */
/* ===== تحسينات للحركة — أمثلة افتراضية للطائرات (يمكن تعديلها لاحقًا) ===== */
@keyframes plane-move-1 {
0% { transform: translateX(-15%) translateY(0) rotate(-2deg); opacity: 0.9; }
50% { transform: translateX(110%) translateY(-28px) rotate(4deg); opacity: 1; }
100% { transform: translateX(-15%) translateY(0) rotate(-2deg); opacity: 0.95; }
}
.floating-planes .plane-1 { top: 20%; left: -10%; animation: plane-move-1 14s linear infinite; }
.floating-planes .plane-2 { top: 28%; left: -8%; animation: plane-move-1 18s linear infinite; transform: scale(0.95); }
.floating-planes .plane-3 { top: 50%; left: -12%; animation: plane-move-1 20s linear infinite; transform: scale(1.05); }
.floating-planes .plane-4 { top: 70%; left: -9%; animation: plane-move-1 22s linear infinite; transform: scale(0.9); }
.floating-planes .plane-5 { top: 40%; left: -7%; animation: plane-move-1 16s linear infinite; transform: scale(0.88); }
/* ===== تجاوب — تقليل حجم أيقونات الطائرات على الموبايل ===== */
@media (max-width: 768px) {
.floating-planes .plane { font-size: 1.05rem !important; opacity: 0.85; }
.floating-planes .plane-1,
.floating-planes .plane-2,
.floating-planes .plane-3,
.floating-planes .plane-4,
.floating-planes .plane-5 {
animation-duration: calc(var(--dur, 16s) * 1.2) !important;
}
}
/* ✅ تصغير حجم بطاقات الأخبار قليلاً */
.news-card {
transform: scale(0.92); /* تصغير البطاقة بنسبة 8% */
transform-origin: center; /* يجعل التصغير من منتصف البطاقة */
}
.news-card:hover {
transform: scale(0.95) translateY(-6px); /* تفاعل متناسق مع الحجم الجديد */
}
/* تصغير النصوص والمسافات داخل الخبر */
.news-card .card-body {
padding: 16px 18px 20px; /* تقليل الحواف الداخلية */
}
.news-card .card-title {
font-size: 1.1rem; /* كان 1.3rem */
}
.news-card .card-excerpt {
font-size: 0.95rem; /* كان 1.05rem */
line-height: 1.7;
}
/* ✅ تصميم فاخر واحترافي جدًا لنافذة الحجز (modal-content) */
.modal-content {
background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);
border-radius: 20px;
padding: 40px 34px;
box-shadow:
0 10px 35px rgba(0, 60, 140, 0.18),
0 0 10px rgba(30,144,255,0.08);
text-align: center;
max-width: 400px;
width: 92%;
animation: popupLuxury 0.45s ease;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
border: 1px solid rgba(67,125,233,0.12);
}
/* ✨ حافة ضوئية فاخرة */
.modal-content::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 80% 0%, rgba(67,125,233,0.08), transparent 70%);
z-index: 0;
}
/* النص */
.modal-content h3 {
font-family: "Tajawal", sans-serif;
font-weight: 800;
font-size: 1.2rem;
color: #002a6b;
margin-bottom: 20px;
line-height: 1.8;
position: relative;
z-index: 2;
}
/* رقم الهاتف */
.booking-number {
background: linear-gradient(135deg, #f2f6ff, #ffffff);
color: #004080;
font-weight: 800;
font-size: 1.4rem;
padding: 14px 22px;
border-radius: 14px;
margin-bottom: 22px;
letter-spacing: 1px;
user-select: all;
display: inline-block;
border: 1px solid rgba(67,125,233,0.15);
box-shadow: 0 4px 12px rgba(0, 60, 140, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
position: relative;
z-index: 2;
}
.booking-number:hover {
transform: scale(1.04);
box-shadow: 0 8px 20px rgba(67,125,233,0.18);
}
/* زر النسخ */
.copy-btn {
background: linear-gradient(135deg, #004080, #1e90ff);
color: #fff;
border: none;
padding: 13px 36px;
border-radius: 12px;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
z-index: 2;
box-shadow: 0 6px 20px rgba(30, 110, 190, 0.25);
}
.copy-btn:hover {
background: linear-gradient(135deg, #1e90ff, #2b9eff);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(67,125,233,0.25);
}
.copy-btn:active {
transform: translateY(2px);
box-shadow: 0 4px 14px rgba(30,110,190,0.25);
}
/* حاوية الأزرار في Modal */
.modal-buttons {
display: flex;
gap: 12px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/* زر واتساب احترافي */
.whatsapp-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: linear-gradient(135deg, #25D366, #20BA5A);
color: #fff;
border: none;
padding: 13px 36px;
border-radius: 12px;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.25);
position: relative;
z-index: 2;
}
.whatsapp-btn i {
font-size: 1.4rem;
transition: all 0.3s ease;
}
.whatsapp-btn:hover {
background: linear-gradient(135deg, #20BA5A, #1DA954);
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.35);
color: #fff;
}
.whatsapp-btn:hover i {
transform: scale(1.15);
}
.whatsapp-btn:active {
transform: translateY(2px);
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}
/* تعديل على أزرار Modal على الشاشات الصغيرة */
@media (max-width: 500px) {
.modal-buttons {
flex-direction: row; /* إبقاء واتساب ونسخ بجانب بعض على الموبايل */
gap: 10px;
}
.whatsapp-btn,
.copy-btn {
width: auto;
justify-content: center;
}
}
/* زر الإغلاق */
.close-modal {
position: absolute;
top: 10px;
left: 14px;
font-size: 1.5rem;
color: #667;
cursor: pointer;
transition: all 0.3s ease;
z-index: 3;
}
.close-modal:hover {
color: #1e90ff;
transform: rotate(90deg);
}
/* ✨ حركة دخول ناعمة */
@keyframes popupLuxury {
0% {
opacity: 0;
transform: translateY(40px) scale(0.9);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* ✅ تجاوب مع الشاشات الصغيرة */
@media (max-width: 480px) {
.modal-content {
padding: 30px 22px;
border-radius: 16px;
max-width: 90%;
}
.modal-content h3 {
font-size: 1rem;
}
.booking-number {
font-size: 1.2rem;
padding: 12px 18px;
}
.copy-btn {
width: 100%;
font-size: 0.95rem;
padding: 12px 0;
}
}
/* ✅ تحسينات خفيفة للتصميم الأصلي للتذاكر على شاشات الجوال فقط */
@media (max-width: 600px) {
/* البطاقة تبقى بنفس الفكرة، فقط مسافات أقل */
.ticket-card {
border-radius: 14px;
box-shadow: 0 6px 16px rgba(0,0,0,0.08);
background: #fff;
overflow: hidden;
margin-bottom: 16px;
transition: transform 0.3s ease;
}
.ticket-card:hover {
transform: translateY(-3px);
}
/* الصورة كما هي تماماً */
.ticket-image {
width: 100%;
height: auto;
border-radius: 14px 14px 0 0;
overflow: hidden;
}
/* الجسم الداخلي: نفس فكرة التصميم القديم ولكن متوازن أكثر */
.ticket-body {
padding: 12px 14px 16px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 6px;
}
/* اللوغو والعنوان كما في التصميم القديم */
.ticket-top {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 8px;
margin-bottom: 8px;
}
.airline-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.airline-name {
font-size: 1rem;
color: #003366;
font-weight: 700;
}
/* التفاصيل الداخلية: نفس الترتيب القديم لكن محاذاة أفضل */
.ticket-details {
display: flex;
flex-direction: column;
gap: 4px;
color: #222;
font-size: 0.9rem;
line-height: 1.5;
}
.ticket-details strong {
color: #003366;
}
/* السطر الذي يحتوي السعر والدرجة */
.info {
display: flex;
justify-content: space-between;
font-weight: 600;
color: #003366;
}
/* السطر الذي يحتوي التواريخ */
.dates {
display: flex;
justify-content: space-between;
color: #555;
font-size: 0.85rem;
}
/* الزر كما هو، واضح وفخم */
.book-btn {
margin-top: 10px;
width: 100%;
padding: 12px 0;
background: linear-gradient(135deg, #004080, #1e90ff);
color: #fff;
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 700;
box-shadow: 0 6px 18px rgba(0,64,128,0.15);
transition: all 0.3s ease;
}
.book-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(0,64,128,0.25);
}
}
/* ✅ تكبير لوغو الهيدر بشكل واضح واحترافي */
header .logo img,
.navbar .logo img {
height: 65px !important; /* كان غالباً بين 40–50px، الآن أكبر وبارز */
width: auto !important; /* نحافظ على النسبة الأصلية */
object-fit: contain !important;
transition: all 0.3s ease;
}
/* إذا كان اللوغو داخل عنصر يحتوي على .logo نفسه */
header .logo,
.navbar .logo {
display: flex;
align-items: center;
justify-content: center;
}
/* ✅ على الشاشات الصغيرة: نحافظ على الحجم المناسب */
@media (max-width: 600px) {
header .logo img,
.navbar .logo img {
height: 65px !important; /* أصغر قليلاً في الجوال ليظل متناسق */
}
}
/* زر الترجمة المخصص */
.translate-btn{
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
color: #fff;
padding: 8px 12px;
border-radius: 10px;
font-weight:700;
cursor:pointer;
min-width:44px;
height:40px;
display:inline-flex;
align-items:center;
justify-content:center;
}
/* عند التفعيل */
.translate-btn.active{
background: rgba(255,255,255,0.08);
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* ----- إخفاء كل شارات/شريط Google Translate واللوغو والـ iframe ----- */
/* يحجب البانر العلوي */
.goog-te-banner-frame.skiptranslate,
.goog-te-banner-frame { display: none !important; height: 0 !important; }
/* يحجب أي شعار أو رابط لـ google */
.goog-logo-link, .goog-te-gadget-icon { display: none !important; }
/* يحجب صندوق الترجمة الكامل (الـ select) المرئي — نحن لا نريد أن يراه المستخدم */
.goog-te-combo { display: none !important; }
/* يحجب الإطار الذي قد تظهر بداخله عناصر جوجل */
iframe.goog-te-menu-frame { visibility: hidden !important; height: 0 !important; }
/* افتراضياً نجعل العنصر الحاوي مخفي (لمدة التحميل) */
#google_translate_element { display: none !important; }
/* ضمان عدم تأثير الإخفاء على مستوى z-index للصفحة */
body > .goog-te-banner-frame.skiptranslate { display:none !important; }
/* ===== تصغير التذاكر في الصفحة الرئيسية على شاشات <= 400px ===== */
@media (max-width: 400px) {
/* استهدف كل المكونات التي قد تحتوي على بطاقة التذكرة */
#home .tickets-carousel .ticket-card,
#home.active .tickets-carousel .ticket-card,
.tickets-carousel .ticket-card,
.tickets-grid .ticket-card,
.ticket-card {
/* جعل عرض البطاقة أصغر (flex-basis) + ضبط الارتفاع ليتناسب */
flex: 0 0 350px !important; /* عرض البطاقة */
max-width: 350px !important;
}
.tickets-container{
padding: 3px !important;
}
}
/* === أزرار صغيرة متناسقة بجانب زر النسخ === */
.contact-small-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 38px;
padding: 6px 8px;
margin-left: 8px;
border-radius: 10px;
border: none;
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
background: #fff;
color: #002b5c;
box-shadow: 0 4px 12px rgba(0,0,0,0.07);
font-size: 0.95rem;
}
/* لون خاص لزر الإرسال */
.contact-small-btn.email-send-btn {
background: linear-gradient(90deg,#0066cc,#004f9a);
color: #fff;
}
/* WhatsApp */
.contact-small-btn.whatsapp-btn {
background: linear-gradient(90deg,#25D366,#128C7E);
color: #fff;
}
/* copy button existing style already أزرق; نحتفظ به */
/* تأثير hover */
.contact-small-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(0,0,0,0.12); }
/* تصغير الأيقونات داخل */
.contact-small-btn i { font-size: 1rem; }
/* Responsive: ضع الأزرار بجانب النص على الشاشات الكبيرة، وداخل صف عمودي على الموبايل */
@media (max-width: 640px) {
.contact-row, .email-item {
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.contact-small-btn { min-width: 46px; height: 44px; margin-left: 0; }
}
/* ==== تأكد أن الايميل يظهر مباشرة بجانب الوظيفة (RTL-aware) ==== */
.email-item {
align-items: center; /* محاذاة رأسية جيدة */
gap: 10px; /* مسافة صغيرة بين العناصر */
flex-wrap: nowrap; /* حاول إبقاؤهم في سطر واحد إن أمكن */
justify-content: flex-start; /* لا تستخدم space-between هنا */
}
/* تأكد من أن العنصر الأول (الوظيفة) لا يتقلص ويظل على اليمين */
.email-item > span:first-child {
flex: 0 0 auto; /* لا ينمو ولا ينكمش */
white-space: nowrap; /* منع التفاف نص الوظيفة */
margin-inline-end: 6px;/* مسافة من جهة البداية (اليسار في RTL تكون margin-inline-end) */
}
/* الايميل: لا تسمح له بأن يملأ المساحة، واحتفظ باتجاهه لعرض البريد إنجليزياً */
.email-link {
display: inline-flex; /* يبقى مع الأيقونة داخل */
align-items: center;
gap: 8px;
flex: 0 0 auto; /* لا ينمو ولا ينكمش */
white-space: nowrap; /* إبقائه في نفس السطر */
direction: ltr; /* البريد يظهر من اليسار لليمين داخل العنصر */
unicode-bidi: embed;
text-decoration: none; /* إن أردت إزالة underline الافتراضي */
color: inherit; /* يحافظ على اللون العام */
}
/* زرّان النسخ والإرسال (إذا كانت موجودة) — ادفعهم لليمين/اليسار بشكل منطقي */
.email-item .copy-btn,
.email-item .send-btn,
.email-item .email-buttons {
flex: 0 0 auto; /* لا تنمو */
}
/* إذا أردنا دفع الأزرار إلى الطرف الآخر (اليسار في RTL) — استخدم margin-inline-start:auto */
.email-item .email-buttons {
margin-inline-start: auto; /* في RTL هذا يدفع الأزرار لأبعد اليسار */
gap: 8px;
align-items: center;
}
/* fallback: لو الأزرار ليست داخل .email-buttons بل زر copy-btn مباشرة */
.email-item > .copy-btn {
margin-inline-start: auto;
}
/* responsive: على الشاشات الصغيرة نفعل التفاف مرتب */
@media (max-width: 650px) {
.email-item {
flex-wrap: wrap;
gap: 8px;
}
.email-item > span:first-child,
.email-link {
white-space: normal; /* يسمح بالالتفاف حينما تقل المساحة */
}
.email-item .email-buttons,
.email-item > .copy-btn {
margin-inline-start: 0; /* وعودتها إلى السطر التالي */
align-self: flex-end;
}
}
/* === ترتيب عناصر الايميل بشكل احترافي ومتناسق RTL === */
.email-item {
align-items: center;
flex-wrap: nowrap;
justify-content: flex-start; /* المحاذاة العامة */
gap: 10px;
direction: rtl; /* للتأكيد على اتجاه النص */
}
/* العنصر الأول: الوظيفة */
.email-item > span:first-child {
flex: 0 0 auto;
white-space: nowrap;
margin-inline-end: 8px;
}
/* الايميل نفسه */
.email-link {
display: inline-flex;
align-items: center;
gap: 6px;
direction: ltr; /* عنوان البريد يظهر بشكل صحيح */
unicode-bidi: embed;
flex: 0 0 auto;
white-space: nowrap;
text-decoration: none;
color: inherit;
}
/* دعم الموبايل */
@media (max-width: 650px) {
.email-item {
flex-wrap: wrap;
gap: 8px;
}
.email-item button {
margin-inline-start: 0 !important; /* عند ضيق المساحة */
align-self: flex-end;
}
}
/* ===== ضبط نهائي: إبقاء الايميل في اليمين والزر في اليسار دائماً ===== */
.contact-section .email-item {
flex-direction: row !important; /* صف دائماً */
align-items: center !important; /* محاذاة رأسية */
justify-content: flex-start !important; /* بداية الصف (يمين في RTL) */
flex-wrap: nowrap !important; /* لا التفاف */
}
/* اجعل الايميل أول عنصر (يمين) حتى مع اختلاف أحجام الشاشة */
.contact-section .email-item .email-link {
order: -1; /* يظهر أولاً على اليمين */
direction: rtl; /* عرض البريد من اليسار لليمين */
unicode-bidi: embed;
margin-inline-end: 8px; /* مسافة صغيرة قبل الوسم التالي */
}
/* الوسم الوظيفي يبقى بعد الايميل مباشرة */
.contact-section .email-item > span:first-child {
order: 0;
margin-inline-end: 8px;
}
/* زر النسخ يدفع إلى اليسار دائماً */
.contact-section .email-item > .copy-btn {
order: 99; /* دائماً في النهاية (يسار) */
margin-inline-start: auto !important; /* يدفعه لأقصى اليسار */
}
/* ==== overrides نهائية لضمان الترتيب المطلوب: الوظيفة (يمين) ثم الايميل، والأزرار يسار ==== */
.contact-section .email-item{direction: rtl !important;}
.contact-section .email-item > span:first-child{order:0 !important; white-space:nowrap;}
.contact-section .email-item .email-link{order:1 !important; direction:rtl !important; unicode-bidi:embed;}
.contact-section .email-item .copy-btn,
.contact-section .email-item .contact-small-btn{order:99 !important;}
.contact-section .email-item .copy-btn{margin-inline-start:auto !important;}
/* 🎨 تخصيص قسم الرئيسية (من نحن + تواصل معنا) للخلفية الشفافة الأنيقة */
#home .about-preview,
#home .contact-preview {
width: 90%;
max-width: 1200px;
margin: 40px auto;
padding: 40px 50px;
border-radius: 20px;
background: rgb(35 78 203 / 74%) !important;
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
color: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* عند التمرير عليها تأثير أنيق */
#home .about-preview:hover,
#home .contact-preview:hover {
transform: translateY(-5px);
box-shadow: 0 12px 45px rgba(67, 125, 233, 0.3);
}
/* تحسين الخطوط والرموز */
#home .preview-title i {
color: #00bfff;
}
#home .preview-title {
color: #ffffff;
font-size: 1.8rem;
margin-bottom: 18px;
}
#home .about-text {
color: #e6f0ff;
font-size: 2rem;
line-height: 1.9;
text-align: justify;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* تحسين عرضها على اللابتوب */
@media (min-width: 1024px) {
#home .about-preview,
#home .contact-preview {
display: flex;
flex-direction: column;
justify-content: center;
}
}
/* ألوان النصوص الداخلية لتناسب الخلفية الزجاجية */
#home .contact-details strong,
#home .contact-details span {
color: #e6f4ff !important;
}
#home .feature-item {
background: rgba(255, 255, 255, 0.12);
border-radius: 14px;
padding: 10px 14px;
color: #e6f4ff;
}
#home .contact-item {
background: rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 14px;
box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.05);
}
/* زرّيهما */
#home .learn-more-btn,
#home .contact-btn {
background: linear-gradient(135deg, #1d64b4, #2598e8);
color: #fff !important;
border: none;
border-radius: 14px;
padding: 14px 30px;
font-size: 1.1rem;
font-weight: 700;
transition: all 0.3s ease;
box-shadow: 0 4px 14px rgba(30, 110, 190, 0.3);
}
#home .learn-more-btn:hover,
#home .contact-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(67, 125, 233, 0.4);
}
/* 🎨 تحسين احترافي لقسم الرئيسية (من نحن + تواصل معنا) */
#home .about-preview,
#home .contact-preview {
width: 90%;
max-width: 1200px;
margin: 50px auto;
padding: 50px 60px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.05); /* شفافية ناعمة */
backdrop-filter: blur(20px) saturate(160%);
-webkit-backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
color: #f5f7ff;
transition: all 0.35s ease;
}
/* توازن على الشاشات الكبيرة */
@media (min-width: 992px) {
#home .about-preview,
#home .contact-preview {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
}
/* تأثير أنيق عند التحويم */
#home .about-preview:hover,
#home .contact-preview:hover {
transform: translateY(-6px);
box-shadow: 0 14px 50px rgba(0, 120, 255, 0.25);
}
/* 🌙 عناوين الفقرات */
#home .preview-title {
color: #ffffff;
font-size: 1.9rem;
margin-bottom: 18px;
letter-spacing: -0.5px;
}
#home .preview-title i {
color: #43b1ff;
}
/* 📄 نص من نحن */
#home .about-text {
color: #ffffff;
font-size: 1.40rem;
font-weight: 600;
line-height: 2;
text-align: justify;
background: #00000026 !important;
border: none !important;
box-shadow: none !important;
}
/* ✨ ميزات من نحن */
#home .about-features {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 16px;
}
#home .feature-item {
flex: 1 1 30%;
background: rgba(255, 255, 255, 0.1);
border-radius: 14px;
padding: 10px 14px;
color: #e6f4ff;
text-align: center;
font-size: 1.3rem;
}
/* ☎️ عناصر التواصل */
#home .contact-info {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 14px;
width: 100%;
}
#home .contact-item {
background: rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 14px;
transition: all 0.3s ease;
}
#home .contact-item:hover {
background: rgba(255, 255, 255, 0.15);
}
#home .contact-details strong {
color: #ffffff;
}
#home .contact-details span {
color: #b9d8ff;
font-weight: 700;
}
/* 🩵 زر أنيق وهادئ */
#home .learn-more-btn,
#home .contact-actions .contact-btn {
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.15));
border: 1px solid rgba(255,255,255,0.2);
color: #e6f4ff !important;
padding: 14px 34px;
border-radius: 16px;
font-size: 1.05rem;
font-weight: 700;
cursor: pointer;
transition: all 0.35s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
#home .learn-more-btn:hover,
#home .contact-actions .contact-btn:hover {
background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.25));
transform: translateY(-2px);
box-shadow: 0 8px 26px rgba(0, 120, 255, 0.25);
}
/* 📱 توافق كامل مع الجوالات */
@media (max-width: 768px) {
#home .about-preview,
#home .contact-preview {
width: 94%;
padding: 30px 22px;
margin: 20px auto;
background: rgba(255, 255, 255, 0.05); /* لا أبيض أبداً */
backdrop-filter: blur(14px) saturate(180%);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
#home .about-text {
font-size: 1rem;
line-height: 1.8;
}
#home .learn-more-btn,
#home .contact-actions .contact-btn {
width: 100%;
font-size: 1rem;
}
#home .contact-item {
padding: 12px;
}
}
/* ===== خلفيات اختيارية للأقسام مع تغبيش دائم ===== */
.section-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
filter: blur(8px); /* تأثير التغبيش الدائم */
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
/* عندما تكون الصورة موجودة */
.section-bg.has-bg {
opacity: 0.6; /* شفافية للخلفية المغمورة */
}
/* تأكد من ظهور المحتوى فوق الخلفية */
#services .section-inner,
#memories .section-inner,
#about .about-container,
#partners .section-inner,
#news .news-container,
#contact .contact-container {
position: relative;
z-index: 2;
}
/* طبقة شفافة فوق الخلفية لتحسين قراءة النص */
.section-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4); /* طبقة داكنة لتحسين contrast */
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.section-overlay.active {
opacity: 1;
}
/* ===== إصلاح خلفيات قسم من نحن وتواصل معنا ===== */
/* قسم تواصل معنا - إصلاحات شاملة */
#contact {
position: relative;
min-height: 100vh;
overflow: hidden;
}
#contact .section-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
filter: blur(8px);
opacity: 0;
transition: opacity 0.5s ease;
}
#contact .section-bg.has-bg {
opacity: 0.6;
}
#contact .section-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
opacity: 0;
transition: opacity 0.5s ease;
}
#contact .section-overlay.active {
opacity: 1;
}
#contact .contact-container {
position: relative;
z-index: 2;
}
/* إزالة الخلفية الأصلية من قسم تواصل معنا */
.contact-section {
background: transparent !important;
padding: 40px 2px !important;
}
.contact-title{
text-align: center !important;
}
/* إصلاح فوري لقسم من نحن */
#about {
position: relative;
min-height: 100vh;
overflow: hidden;
}
#about .section-bg {
position: fixed !important; /* تغيير إلى fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
filter: blur(8px);
opacity: 0;
}
#about .section-bg.has-bg {
opacity: 0.7;
}
#about .section-overlay {
position: fixed !important; /* تغيير إلى fixed */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 1;
opacity: 0;
}
#about .section-overlay.active {
opacity: 1;
}
/* إخفاء الخلفية الأصلية نهائياً */
#about .about-bg {
display: none !important;
}
#about .about-container {
position: relative;
z-index: 3; /* تأكد من ظهور المحتوى */
background: transparent;
}
/* حل نهائي لقسم من نحن - إضافة في نهاية CSS */
#about {
position: relative;
min-height: 100vh;
overflow: hidden;
}
#about .section-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: -1; /* مهم: وضع behind المحتوى */
filter: blur(8px);
opacity: 0.7;
}
#about .section-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}
/* إخفاء كامل للخلفيات الأصلية */
#about .about-bg,
#about .sphere,
#about .cube,
#about .ring {
display: none !important;
visibility: hidden !important;
}
#about .about-container {
position: relative;
z-index: 1;
}
#about .about-section {
background: transparent !important;
}
/* زر الاتصال داخل contact-row */
.call-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
background: linear-gradient(90deg, #007bff, #1e90ff);
color: #fff;
border-radius: 10px;
padding: 8px 14px;
font-weight: 700;
font-size: 0.9rem;
box-shadow: 0 4px 10px rgba(0, 64, 128, 0.15);
transition: all 0.3s ease;
}
.call-btn i {
font-size: 1rem;
margin-bottom: 4px;
}
.call-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 64, 128, 0.25);
background: linear-gradient(90deg, #1e90ff, #007bff);
}
/* أزرار الاتصال داخل قسم تواصل معنا */
.contact-small-btn.call-btn-land,
.contact-small-btn.call-btn-mobile {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
background: linear-gradient(90deg,#1e90ff,#007bff);
color: #fff;
padding: 10px 14px;
border-radius: 12px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 4px 10px rgba(0,64,128,0.15);
transition: all 0.3s ease;
}
/* لون مختلف للمحمول */
.contact-small-btn.call-btn-mobile {
background: linear-gradient(90deg,#28a745,#1c9437);
}
/* تفاعل عند التحويم */
.contact-small-btn.call-btn-land:hover,
.contact-small-btn.call-btn-mobile:hover {
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,64,128,0.25);
}
/* أيقونة الهاتف */
.contact-small-btn.call-btn-land i,
.contact-small-btn.call-btn-mobile i {
font-size: 1rem;
}
/* زر الموقع داخل قسم من نحن */
.location-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: linear-gradient(90deg, #007bff, #1e90ff);
color: #fff;
text-decoration: none;
padding: 12px 20px;
border-radius: 12px;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 4px 10px rgba(0, 64, 128, 0.15);
transition: all 0.3s ease;
margin-top: 14px;
}
.location-btn:hover {
background: linear-gradient(90deg, #1e90ff, #007bff);
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0, 64, 128, 0.25);
}
.location-btn i {
font-size: 1.1rem;
}
/* ضمان التناسق الكامل في جميع الشاشات */
@media (max-width: 768px) {
.location-btn {
width: 100%;
font-size: 1rem;
padding: 12px;
border-radius: 14px;
justify-content: center;
}
}
/* تكديس الشبكة في حالة العرض الضيق جداً مع الحفاظ على ترتيب منطقي */
@media (max-width: 769px) {
.contact-row,
.email-item { grid-template-columns: 1fr 1fr !important; }
.email-item > span:first-child { grid-column: 1 / 3 !important; }
.email-item .email-link { grid-column: 1 / 3 !important; }
.email-item .copy-btn { grid-column: 2 / 3 !important; justify-self: end !important; }
.contact-row span { grid-column: 1 / 3 !important; }
/* الأزرار تصبح بعرض شبه متساوٍ لتسهيل الضغط بالإبهام */
.email-item .actions,
.email-item > .contact-small-btn,
.email-item > .email-send-btn {
grid-column: 1 / 3 !important;
justify-self: stretch !important;
display: flex !important;
gap: 8px !important;
}
.email-item .actions .contact-small-btn,
.email-item .actions .email-send-btn,
.email-item > .contact-small-btn,
.email-item > .email-send-btn {
flex: 1 1 48% !important;
min-width: 48% !important;
height: 44px !important;
}
}
.fa-solid-fa-earth-americas{
width:25%;
}
.partner-card.ktot{
width:25%;
margin-bottom: 20px;
background: rgb(35 128 248 / 72%);
}
/* ===== 💎 زر شركاؤنا الفخم مع تكبير اللوغو والنص فقط ===== */
.partner-card.ktot {
display: flex !important;
flex-direction: column !important; /* 🔥 يجعل اللوغو فوق النص */
align-items: center !important;
justify-content: center !important;
gap: 20px !important; /* مسافة بسيطة بين اللوغو والنص */
font-family: "Tajawal", sans-serif !important;
font-weight: 900 !important;
font-size: clamp(3rem, 6vw + 1rem, 5rem) !important; /* 🔥 تكبير الخط فعلياً */
line-height: 1.1 !important;
border: none !important;
border-radius: 28px !important;
color: #ffffff !important;
background: linear-gradient(135deg, #003570, #0060d0, #1e90ff) !important;
box-shadow: 0 16px 40px rgba(30, 110, 190, 0.5),
inset 0 0 35px rgba(255, 255, 255, 0.18) !important;
text-shadow: 0 5px 12px rgba(0, 0, 0, 0.35) !important;
cursor: pointer !important;
transition: all 0.35s ease !important;
position: relative !important;
overflow: hidden !important;
letter-spacing: 1.2px !important;
text-align: center !important;
margin: 40px auto !important;
white-space: nowrap !important;
width: 40% !important;
max-width: 95vw !important;
padding: clamp(32px, 5vw, 55px) clamp(80px, 8vw, 130px) !important;
}
/* الأيقونة (اللوغو) */
.partner-card.ktot i {
font-size: 100px !important; /* 🔥 تكبير فعلي وواضح */
margin-bottom: 10px !important;
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35)) !important;
transition: transform 0.3s ease !important;
}
/* النص داخل الزر */
.partner-card.ktot .alamia {
font-size: 30px !important; /* 🔥 تكبير النص بشكل واضح */
font-weight: 900 !important;
margin: 0 !important;
line-height: 1.1 !important;
}
/* عند التحويم */
.partner-card.ktot:hover i {
transform: scale(1.08) !important;
}
.partner-card.ktot:hover {
box-shadow: 0 22px 50px rgba(30, 110, 190, 0.55),
inset 0 0 40px rgba(255, 255, 255, 0.2) !important;
filter: brightness(1.1) !important;
}
@media (max-width: 880px) {
.partner-card.ktot {
font-size: clamp(2.4rem, 5vw, 3.8rem) !important;
width: 40% !important;
}
.partner-card.ktot i {
font-size: 6rem !important;
}
.partner-card.ktot .alamia {
font-size: 1.5rem !important;
}
}
@media (max-width: 718px) {
.partner-card.ktot {
font-size: 2.6rem !important;
width: 80% !important;
}
.partner-card.ktot i {
font-size: 5rem !important;
}
.partner-card.ktot .alamia {
font-size: 1.5rem !important;
}
}
/* ===== 🎯 زر وكلاء الخطوط العالمية الفخم ===== */
.partner-card.ktot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
font-family: "Tajawal", sans-serif;
font-weight: 900;
text-align: center;
/* الحجم والتموضع */
margin: 40px auto;
width: min(90%, 600px);
padding: clamp(30px, 6vw, 60px) clamp(50px, 8vw, 100px);
/* الشكل */
color: #fff;
background: linear-gradient(135deg, #003570, #0060d0, #1e90ff);
border: none;
border-radius: 28px;
box-shadow: 0 16px 40px rgba(30, 110, 190, 0.4),
inset 0 0 35px rgba(255, 255, 255, 0.15);
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
cursor: pointer;
transition: all 0.35s ease;
position: relative;
overflow: hidden;
}
/* أيقونة الكرة الأرضية 🌍 */
.partner-card.ktot i {
font-size: clamp(3rem, 7vw, 6rem);
filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
transition: transform 0.3s ease;
}
/* النص */
.partner-card.ktot .alamia {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 900;
margin: 0;
line-height: 1.1;
}
/* تأثير التحويم */
.partner-card.ktot:hover {
box-shadow: 0 22px 50px rgba(30, 110, 190, 0.55),
inset 0 0 40px rgba(255, 255, 255, 0.18);
filter: brightness(1.1);
transform: translateY(-4px);
}
.partner-card.ktot:hover i {
transform: scale(1.08);
}
/* ===== استجابة الموبايل ===== */
@media (max-width: 768px) {
.partner-card.ktot {
width: 100%;
padding: 40px 20px;
}
.partner-card.ktot i {
font-size: 4.5rem;
}
.partner-card.ktot .alamia {
font-size: 1.2rem;
}
}
/* ===== الهواتف الصغيرة جداً ===== */
@media (max-width: 480px) {
.partner-card.ktot {
width: 100%;
padding: 32px 16px;
}
.partner-card.ktot i {
font-size: 3.8rem;
}
.partner-card.ktot .alamia {
font-size: 2rem;
}
}
/* --------- STYLES for English brand in navbar --------- */
/* عنصر نص انجليزي أنيق ومتصّل داخل الشريط */
.nav-brand-en {
font-family: 'Parisienne', cursive;
font-size: 1.25rem; /* عدّل الحجم حسب ذوقك */
white-space: nowrap; /* يمنع التفاف الكلمات */
direction: ltr; /* لعرض الإنجليزية بشكل صحيح */
unicode-bidi: embed;
text-decoration: none;
color: var(--white);
padding: 6px 10px;
margin-inline-start: 10px; /* في RTL هذه المسافة تظهر على اليسار */
display: inline-flex;
}
/* مخفي على شاشات صغيرة لتجنب ازدحام الشريط — يظهر داخل قائمة الجوال إذا رغبت */
@media (max-width: 900px) {
.nav-brand-en { display: none; }
}
/* إذا رغبت أن يظهر داخل قائمة الجوال (عندما تُفتح .nav-links.show) */
@media (max-width: 900px) {
.nav-links.show .nav-brand-en {
display: inline-flex; /* سيظهر مع بقية العناصر عندما تُفتح القائمة */
font-size: 1.15rem;
padding: 8px 14px;
}
}