element_gva_column->render_content(Array, '
باب العطاء مفتوح
تبرع الأن
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
اتصل بنا | وجدان الخيرية – تصميم مميز
/* ===== LUXURY DESIGN SYSTEM – "وجدان" : ALL RULES UNDER .contactus PREFIX ===== */
.contactus * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about_page .reveal {
opacity: 1;
transform: translateY(30px);
transition: all 0.8s ease;
}
.contactus {
--deep-burgundy: #5c1e2a;
--rich-gold: #c89a5e;
--soft-gold: #e5c29f;
--ivory: #fffcf7;
--cream: #faf3ea;
--charcoal: #2c2a2b;
--olive-sage: #7a8b7a;
--shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);
--shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);
--border-radius-l: 2.5rem;
--border-radius-m: 1.8rem;
--border-radius-s: 1.2rem;
--font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';
font-family: var(--font-primary);
background-color: var(--ivory);
color: var(--charcoal);
line-height: 1.6;
overflow-x: hidden;
position: relative;
display: block;
width: 100%;
}
.contactus .vicdan-wrapper {
position: relative;
}
.contactus .container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */
.contactus .top-bar {
background: #1e1c1d;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 0;
font-size: 0.85rem;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(200, 154, 94, 0.4);
}
.contactus .top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contactus .top-bar-link {
color: #e0d6cc;
text-decoration: none;
margin-left: 1.2rem;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.contactus .top-bar-link:hover {
color: var(--rich-gold);
}
/* ===== HEADER – ELEGANT TRANSPARENCY ===== */
.contactus .main-header {
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 154, 94, 0.2);
padding: 0.5rem 0;
position: sticky;
top: 0;
z-index: 50;
}
.contactus .logo-title {
font-size: 2rem;
font-weight: 800;
color: var(--deep-burgundy);
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(92,30,42,0.06);
}
.contactus .logo-subtitle {
font-size: 0.7rem;
color: var(--rich-gold);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: -0.3rem;
}
.contactus .nav-item {
position: relative;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
font-weight: 500;
color: #3e3a37;
transition: 0.2s;
cursor: pointer;
}
.contactus .nav-item:hover {
background: rgba(92, 30, 42, 0.05);
color: var(--deep-burgundy);
}
.contactus .nav-dropdown {
position: absolute;
top: 120%;
right: 0;
background: white;
min-width: 200px;
border-radius: 1.2rem;
padding: 0.8rem 0;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
opacity: 0;
visibility: hidden;
transition: 0.25s;
}
.contactus .nav-item.group:hover .nav-dropdown {
opacity: 1;
visibility: visible;
top: 140%;
}
.contactus .dropdown-link {
display: block;
padding: 0.6rem 1.6rem;
color: #4a4643;
text-decoration: none;
font-size: 0.9rem;
}
.contactus .dropdown-link:hover {
background: #fff3e4;
color: var(--deep-burgundy);
}
/* ===== HERO – POETRY IN MOTION ===== */
.contactus .hero-luxury {
position: relative;
height: 500px;
background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%),
url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.contactus .hero-luxury::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);
z-index: 1;
}
.contactus .hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 1.5rem;
}
.contactus .gold-flourish {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.contactus .gold-flourish i {
color: var(--rich-gold);
font-size: 1.3rem;
text-shadow: 0 0 10px rgba(200,154,94,0.5);
}
.contactus .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,215,150,0.4);
padding: 0.5rem 2rem;
border-radius: 4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--soft-gold);
margin-bottom: 1.8rem;
}
.contactus .hero-luxury h1 {
font-size: 4.8rem;
font-weight: 800;
font-family: 'aljazerabold', 'aljazerabold';
line-height: 1.2;
text-shadow: 0 8px 18px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.contactus .hero-luxury h1 span {
color: var(--rich-gold);
border-bottom: 2px solid var(--rich-gold);
padding-bottom: 0.1rem;
}
.contactus .hero-divider {
width: 160px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);
margin: 1.8rem auto;
border-radius: 3px;
}
.contactus .hero-text {
font-size: 1.3rem;
font-weight: 350;
opacity: 0.95;
max-width: 650px;
margin: 0 auto;
font-style: italic;
}
/* ===== CONTACT CARDS – ART GALLERY ===== */
.contactus .section-crystal {
padding: 5rem 0 3rem;
background: linear-gradient(to bottom, var(--ivory), #fffbf5);
}
.contactus .contact-masterpiece {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media (max-width: 1000px) {
.contactus .contact-masterpiece {
grid-template-columns: 1fr;
}
}
/* info card – like jewelry */
.contactus .info-art {
background: white;
border-radius: var(--border-radius-l);
padding: 3rem 2.2rem;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
position: relative;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
background: linear-gradient(145deg, #fffdfa, #ffffff);
}
.contactus .info-art:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: var(--shadow-gold);
border-color: var(--rich-gold);
}
.contactus .info-art::before {
content: "✦ ✦ ✦";
position: absolute;
top: 20px;
right: 30px;
font-size: 0.9rem;
color: var(--rich-gold);
letter-spacing: 6px;
opacity: 0.6;
}
.contactus .info-item-lux {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.3rem 1.2rem;
margin-bottom: 0.6rem;
border-radius: 1.8rem;
transition: 0.3s;
border: 1px solid transparent;
}
.contactus .info-item-lux:hover {
background: #fef8f0;
border-color: #f0e1ce;
box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);
transform: translateX(-8px);
}
.contactus .icon-crystal {
width: 64px;
height: 64px;
background: rgba(200,154,94,0.08);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.8rem;
transition: 0.25s;
flex-shrink: 0;
}
.contactus .info-item-lux:hover .icon-crystal {
background: var(--deep-burgundy);
color: white;
border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.contactus .social-luxury {
display: flex;
gap: 0.8rem;
margin-top: 2.2rem;
}
.contactus .social-luxury a {
width: 52px;
height: 52px;
background: #f5ede5;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.contactus .social-luxury a:hover {
background: var(--deep-burgundy);
color: var(--rich-gold);
border-radius: 30% 70% 30% 70%;
transform: scale(1.12) rotate(5deg);
border-color: var(--rich-gold);
}
/* right card – hours & ambiance (NO FORM) */
.contactus .hours-boutique {
background: linear-gradient(145deg, #1e1c1d, #2a2425);
border-radius: var(--border-radius-l);
padding: 3rem 2.5rem;
box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);
border: 1px solid rgba(200,154,94,0.4);
position: relative;
overflow: hidden;
color: white;
}
.contactus .hours-boutique::after {
content: "⏣";
position: absolute;
bottom: -30px;
left: -30px;
font-size: 14rem;
color: rgba(200,154,94,0.1);
font-family: 'aljazerabold';
transform: rotate(20deg);
pointer-events: none;
}
.contactus .gold-stroke {
color: var(--rich-gold);
font-weight: 700;
}
.contactus .time-piece {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 1.5rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(229,194,159,0.2);
border-radius: 1.5rem;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: 0.2s;
}
.contactus .time-piece:hover {
background: rgba(200,154,94,0.1);
border-color: var(--rich-gold);
transform: scale(1.02);
}
.contactus .day {
font-weight: 600;
display: flex;
gap: 0.7rem;
align-items: center;
}
.contactus .hours {
background: rgba(255,255,255,0.1);
padding: 0.3rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
direction: ltr;
display: inline-block;
color: var(--soft-gold);
font-weight: 600;
}
.contactus .emergency-contact {
margin-top: 2.2rem;
background: rgba(200,154,94,0.12);
border-right: 5px solid var(--rich-gold);
padding: 1.4rem 1.8rem;
border-radius: 1.2rem;
font-family: 'aljazerabold', 'aljazerabold';
display: flex;
gap: 1.2rem;
align-items: center;
}
/* ===== MAP – LUXURY FRAME ===== */
.contactus .map-container {
position: relative;
margin: 2rem auto 4rem;
border-radius: 2.8rem;
overflow: hidden;
box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);
border: 6px solid white;
height: 450px;
max-width: 1300px;
}
/* ===== BANK ACCOUNTS – OPULENT ===== */
.contactus .bank-gallery {
background: var(--cream);
padding: 5rem 0;
position: relative;
}
.contactus .bank-card-premium {
background: white;
border-radius: 2.2rem;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
border-bottom: 6px solid var(--deep-burgundy);
transition: 0.35s;
position: relative;
overflow: hidden;
}
.contactus .bank-card-premium::before {
content: "●";
position: absolute;
top: -20px; right: -20px;
font-size: 10rem;
color: rgba(200,154,94,0.04);
transform: rotate(25deg);
}
.contactus .bank-card-premium:hover {
transform: translateY(-15px);
border-bottom-color: var(--rich-gold);
box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);
}
.contactus .copy-elegant {
background: transparent;
border: 1px solid var(--deep-burgundy);
color: var(--deep-burgundy);
padding: 0.6rem 1.8rem;
border-radius: 3rem;
font-weight: 600;
transition: 0.25s;
cursor: pointer;
font-size: 1.25rem;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.contactus .copy-elegant:hover {
background: var(--deep-burgundy);
color: white;
border-color: var(--rich-gold);
}
/* ===== FOOTER – DEEP & WARM ===== */
.contactus .footer-opulent {
background: #1a1819;
color: #ccc2ba;
padding: 4rem 0 2rem;
border-top: 6px solid var(--rich-gold);
}
/* UTILITIES (prefixed) */
.contactus .dir-ltr { direction: ltr; }
.contactus .text-gold { color: var(--rich-gold); }
.contactus .bg-ivory { background-color: var(--ivory); }
.contactus .rounded-full { border-radius: 9999px; }
.contactus .no-form .contact-form,
.contactus .contact-form { display: none; } /* ensure no form appears */
/* responsive */
@media (max-width: 768px) {
.contactus .hero-luxury h1 { font-size: 3rem; }
}
/* hide any global form remnants */
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
صُلب العطاء
الحسابات البنكية
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)
VİCDAN DERحساب USD
TR28 0020 9000 0060 8576 0000 20
نسخ الآيبان
VİCDAN DERحساب TRY
TR55 0020 9000 0060 8576 0000 19
نسخ الآيبان
// initialize AOS inside .contactus scope (it's global but fine)
AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });
// toggle functions remain (they target ids inside .contactus)
function toggleMobileMenu() {
const overlay = document.getElementById('mobile-overlay');
const menu = document.getElementById('mobile-menu');
if (overlay && menu) {
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 20);
menu.classList.remove('translate-x-full');
} else {
overlay.classList.add('opacity-0');
menu.classList.add('translate-x-full');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
}
function toggleCart() { /* dummy */ }
window.copyPremium = function(iban) {
navigator.clipboard.writeText(iban);
alert('✨ تم نسخ الآيبان: ' + iban);
};
// hide any potential form elements globally
document.querySelectorAll('.contact-form, form, [type="submit"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');
/* ensure mobile menu hidden at start */
#mobile-overlay, #mobile-menu { display: none; }
.contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; }
/* but we manage with js toggling, keep base hidden */
#mobile-overlay, #mobile-menu { display: none; }
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
باب العطاء مفتوح
تبرع الأن
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
اتصل بنا | وجدان الخيرية – تصميم مميز
/* ===== LUXURY DESIGN SYSTEM – "وجدان" : ALL RULES UNDER .contactus PREFIX ===== */
.contactus * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about_page .reveal {
opacity: 1;
transform: translateY(30px);
transition: all 0.8s ease;
}
.contactus {
--deep-burgundy: #5c1e2a;
--rich-gold: #c89a5e;
--soft-gold: #e5c29f;
--ivory: #fffcf7;
--cream: #faf3ea;
--charcoal: #2c2a2b;
--olive-sage: #7a8b7a;
--shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);
--shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);
--border-radius-l: 2.5rem;
--border-radius-m: 1.8rem;
--border-radius-s: 1.2rem;
--font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';
font-family: var(--font-primary);
background-color: var(--ivory);
color: var(--charcoal);
line-height: 1.6;
overflow-x: hidden;
position: relative;
display: block;
width: 100%;
}
.contactus .vicdan-wrapper {
position: relative;
}
.contactus .container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */
.contactus .top-bar {
background: #1e1c1d;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 0;
font-size: 0.85rem;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(200, 154, 94, 0.4);
}
.contactus .top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contactus .top-bar-link {
color: #e0d6cc;
text-decoration: none;
margin-left: 1.2rem;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.contactus .top-bar-link:hover {
color: var(--rich-gold);
}
/* ===== HEADER – ELEGANT TRANSPARENCY ===== */
.contactus .main-header {
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 154, 94, 0.2);
padding: 0.5rem 0;
position: sticky;
top: 0;
z-index: 50;
}
.contactus .logo-title {
font-size: 2rem;
font-weight: 800;
color: var(--deep-burgundy);
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(92,30,42,0.06);
}
.contactus .logo-subtitle {
font-size: 0.7rem;
color: var(--rich-gold);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: -0.3rem;
}
.contactus .nav-item {
position: relative;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
font-weight: 500;
color: #3e3a37;
transition: 0.2s;
cursor: pointer;
}
.contactus .nav-item:hover {
background: rgba(92, 30, 42, 0.05);
color: var(--deep-burgundy);
}
.contactus .nav-dropdown {
position: absolute;
top: 120%;
right: 0;
background: white;
min-width: 200px;
border-radius: 1.2rem;
padding: 0.8rem 0;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
opacity: 0;
visibility: hidden;
transition: 0.25s;
}
.contactus .nav-item.group:hover .nav-dropdown {
opacity: 1;
visibility: visible;
top: 140%;
}
.contactus .dropdown-link {
display: block;
padding: 0.6rem 1.6rem;
color: #4a4643;
text-decoration: none;
font-size: 0.9rem;
}
.contactus .dropdown-link:hover {
background: #fff3e4;
color: var(--deep-burgundy);
}
/* ===== HERO – POETRY IN MOTION ===== */
.contactus .hero-luxury {
position: relative;
height: 500px;
background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%),
url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.contactus .hero-luxury::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);
z-index: 1;
}
.contactus .hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 1.5rem;
}
.contactus .gold-flourish {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.contactus .gold-flourish i {
color: var(--rich-gold);
font-size: 1.3rem;
text-shadow: 0 0 10px rgba(200,154,94,0.5);
}
.contactus .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,215,150,0.4);
padding: 0.5rem 2rem;
border-radius: 4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--soft-gold);
margin-bottom: 1.8rem;
}
.contactus .hero-luxury h1 {
font-size: 4.8rem;
font-weight: 800;
font-family: 'aljazerabold', 'aljazerabold';
line-height: 1.2;
text-shadow: 0 8px 18px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.contactus .hero-luxury h1 span {
color: var(--rich-gold);
border-bottom: 2px solid var(--rich-gold);
padding-bottom: 0.1rem;
}
.contactus .hero-divider {
width: 160px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);
margin: 1.8rem auto;
border-radius: 3px;
}
.contactus .hero-text {
font-size: 1.3rem;
font-weight: 350;
opacity: 0.95;
max-width: 650px;
margin: 0 auto;
font-style: italic;
}
/* ===== CONTACT CARDS – ART GALLERY ===== */
.contactus .section-crystal {
padding: 5rem 0 3rem;
background: linear-gradient(to bottom, var(--ivory), #fffbf5);
}
.contactus .contact-masterpiece {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media (max-width: 1000px) {
.contactus .contact-masterpiece {
grid-template-columns: 1fr;
}
}
/* info card – like jewelry */
.contactus .info-art {
background: white;
border-radius: var(--border-radius-l);
padding: 3rem 2.2rem;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
position: relative;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
background: linear-gradient(145deg, #fffdfa, #ffffff);
}
.contactus .info-art:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: var(--shadow-gold);
border-color: var(--rich-gold);
}
.contactus .info-art::before {
content: "✦ ✦ ✦";
position: absolute;
top: 20px;
right: 30px;
font-size: 0.9rem;
color: var(--rich-gold);
letter-spacing: 6px;
opacity: 0.6;
}
.contactus .info-item-lux {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.3rem 1.2rem;
margin-bottom: 0.6rem;
border-radius: 1.8rem;
transition: 0.3s;
border: 1px solid transparent;
}
.contactus .info-item-lux:hover {
background: #fef8f0;
border-color: #f0e1ce;
box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);
transform: translateX(-8px);
}
.contactus .icon-crystal {
width: 64px;
height: 64px;
background: rgba(200,154,94,0.08);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.8rem;
transition: 0.25s;
flex-shrink: 0;
}
.contactus .info-item-lux:hover .icon-crystal {
background: var(--deep-burgundy);
color: white;
border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.contactus .social-luxury {
display: flex;
gap: 0.8rem;
margin-top: 2.2rem;
}
.contactus .social-luxury a {
width: 52px;
height: 52px;
background: #f5ede5;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.contactus .social-luxury a:hover {
background: var(--deep-burgundy);
color: var(--rich-gold);
border-radius: 30% 70% 30% 70%;
transform: scale(1.12) rotate(5deg);
border-color: var(--rich-gold);
}
/* right card – hours & ambiance (NO FORM) */
.contactus .hours-boutique {
background: linear-gradient(145deg, #1e1c1d, #2a2425);
border-radius: var(--border-radius-l);
padding: 3rem 2.5rem;
box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);
border: 1px solid rgba(200,154,94,0.4);
position: relative;
overflow: hidden;
color: white;
}
.contactus .hours-boutique::after {
content: "⏣";
position: absolute;
bottom: -30px;
left: -30px;
font-size: 14rem;
color: rgba(200,154,94,0.1);
font-family: 'aljazerabold';
transform: rotate(20deg);
pointer-events: none;
}
.contactus .gold-stroke {
color: var(--rich-gold);
font-weight: 700;
}
.contactus .time-piece {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 1.5rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(229,194,159,0.2);
border-radius: 1.5rem;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: 0.2s;
}
.contactus .time-piece:hover {
background: rgba(200,154,94,0.1);
border-color: var(--rich-gold);
transform: scale(1.02);
}
.contactus .day {
font-weight: 600;
display: flex;
gap: 0.7rem;
align-items: center;
}
.contactus .hours {
background: rgba(255,255,255,0.1);
padding: 0.3rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
direction: ltr;
display: inline-block;
color: var(--soft-gold);
font-weight: 600;
}
.contactus .emergency-contact {
margin-top: 2.2rem;
background: rgba(200,154,94,0.12);
border-right: 5px solid var(--rich-gold);
padding: 1.4rem 1.8rem;
border-radius: 1.2rem;
font-family: 'aljazerabold', 'aljazerabold';
display: flex;
gap: 1.2rem;
align-items: center;
}
/* ===== MAP – LUXURY FRAME ===== */
.contactus .map-container {
position: relative;
margin: 2rem auto 4rem;
border-radius: 2.8rem;
overflow: hidden;
box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);
border: 6px solid white;
height: 450px;
max-width: 1300px;
}
/* ===== BANK ACCOUNTS – OPULENT ===== */
.contactus .bank-gallery {
background: var(--cream);
padding: 5rem 0;
position: relative;
}
.contactus .bank-card-premium {
background: white;
border-radius: 2.2rem;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
border-bottom: 6px solid var(--deep-burgundy);
transition: 0.35s;
position: relative;
overflow: hidden;
}
.contactus .bank-card-premium::before {
content: "●";
position: absolute;
top: -20px; right: -20px;
font-size: 10rem;
color: rgba(200,154,94,0.04);
transform: rotate(25deg);
}
.contactus .bank-card-premium:hover {
transform: translateY(-15px);
border-bottom-color: var(--rich-gold);
box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);
}
.contactus .copy-elegant {
background: transparent;
border: 1px solid var(--deep-burgundy);
color: var(--deep-burgundy);
padding: 0.6rem 1.8rem;
border-radius: 3rem;
font-weight: 600;
transition: 0.25s;
cursor: pointer;
font-size: 1.25rem;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.contactus .copy-elegant:hover {
background: var(--deep-burgundy);
color: white;
border-color: var(--rich-gold);
}
/* ===== FOOTER – DEEP & WARM ===== */
.contactus .footer-opulent {
background: #1a1819;
color: #ccc2ba;
padding: 4rem 0 2rem;
border-top: 6px solid var(--rich-gold);
}
/* UTILITIES (prefixed) */
.contactus .dir-ltr { direction: ltr; }
.contactus .text-gold { color: var(--rich-gold); }
.contactus .bg-ivory { background-color: var(--ivory); }
.contactus .rounded-full { border-radius: 9999px; }
.contactus .no-form .contact-form,
.contactus .contact-form { display: none; } /* ensure no form appears */
/* responsive */
@media (max-width: 768px) {
.contactus .hero-luxury h1 { font-size: 3rem; }
}
/* hide any global form remnants */
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
صُلب العطاء
الحسابات البنكية
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)
VİCDAN DERحساب USD
TR28 0020 9000 0060 8576 0000 20
نسخ الآيبان
VİCDAN DERحساب TRY
TR55 0020 9000 0060 8576 0000 19
نسخ الآيبان
// initialize AOS inside .contactus scope (it's global but fine)
AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });
// toggle functions remain (they target ids inside .contactus)
function toggleMobileMenu() {
const overlay = document.getElementById('mobile-overlay');
const menu = document.getElementById('mobile-menu');
if (overlay && menu) {
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 20);
menu.classList.remove('translate-x-full');
} else {
overlay.classList.add('opacity-0');
menu.classList.add('translate-x-full');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
}
function toggleCart() { /* dummy */ }
window.copyPremium = function(iban) {
navigator.clipboard.writeText(iban);
alert('✨ تم نسخ الآيبان: ' + iban);
};
// hide any potential form elements globally
document.querySelectorAll('.contact-form, form, [type="submit"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');
/* ensure mobile menu hidden at start */
#mobile-overlay, #mobile-menu { display: none; }
.contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; }
/* but we manage with js toggling, keep base hidden */
#mobile-overlay, #mobile-menu { display: none; }
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","layout":"container-fw","padding_top":"0","margin_top":"0","padding_bottom":"0","margin_bottom":"0","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n \r\n \r\n \r\n \r\n \r\n باب العطاء مفتوح\r\n\r\n تبرع الأن\r\n\r\n \r\n \r\n نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.\r\n\r\n \r\n \r\n \r\n \r\n\t\t","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n\r\n \r\n \r\n \r\n اتصل بنا | وجدان الخيرية – تصميم مميز\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n /* ===== LUXURY DESIGN SYSTEM – \"وجدان\" : ALL RULES UNDER .contactus PREFIX ===== */\r\n .contactus * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n.about_page .reveal {\r\n opacity: 1;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n}\r\n .contactus {\r\n --deep-burgundy: #5c1e2a;\r\n --rich-gold: #c89a5e;\r\n --soft-gold: #e5c29f;\r\n --ivory: #fffcf7;\r\n --cream: #faf3ea;\r\n --charcoal: #2c2a2b;\r\n --olive-sage: #7a8b7a;\r\n --shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);\r\n --shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);\r\n --border-radius-l: 2.5rem;\r\n --border-radius-m: 1.8rem;\r\n --border-radius-s: 1.2rem;\r\n --font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';\r\n\r\n font-family: var(--font-primary);\r\n background-color: var(--ivory);\r\n color: var(--charcoal);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .contactus .vicdan-wrapper {\r\n position: relative;\r\n }\r\n\r\n .contactus .container {\r\n width: 90%;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */\r\n .contactus .top-bar {\r\n background: #1e1c1d;\r\n color: rgba(255, 255, 255, 0.7);\r\n padding: 0.6rem 0;\r\n font-size: 0.85rem;\r\n letter-spacing: 0.5px;\r\n border-bottom: 1px solid rgba(200, 154, 94, 0.4);\r\n }\r\n .contactus .top-bar .container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .contactus .top-bar-link {\r\n color: #e0d6cc;\r\n text-decoration: none;\r\n margin-left: 1.2rem;\r\n transition: color 0.25s;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n }\r\n .contactus .top-bar-link:hover {\r\n color: var(--rich-gold);\r\n }\r\n\r\n /* ===== HEADER – ELEGANT TRANSPARENCY ===== */\r\n .contactus .main-header {\r\n background: rgba(255, 252, 245, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-bottom: 1px solid rgba(200, 154, 94, 0.2);\r\n padding: 0.5rem 0;\r\n position: sticky;\r\n top: 0;\r\n z-index: 50;\r\n }\r\n .contactus .logo-title {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--deep-burgundy);\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-shadow: 0 2px 4px rgba(92,30,42,0.06);\r\n }\r\n .contactus .logo-subtitle {\r\n font-size: 0.7rem;\r\n color: var(--rich-gold);\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n margin-top: -0.3rem;\r\n }\r\n .contactus .nav-item {\r\n position: relative;\r\n padding: 0.6rem 1.2rem;\r\n border-radius: 3rem;\r\n font-weight: 500;\r\n color: #3e3a37;\r\n transition: 0.2s;\r\n cursor: pointer;\r\n }\r\n .contactus .nav-item:hover {\r\n background: rgba(92, 30, 42, 0.05);\r\n color: var(--deep-burgundy);\r\n }\r\n .contactus .nav-dropdown {\r\n position: absolute;\r\n top: 120%;\r\n right: 0;\r\n background: white;\r\n min-width: 200px;\r\n border-radius: 1.2rem;\r\n padding: 0.8rem 0;\r\n box-shadow: var(--shadow-elegant);\r\n border: 1px solid rgba(200,154,94,0.2);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: 0.25s;\r\n }\r\n .contactus .nav-item.group:hover .nav-dropdown {\r\n opacity: 1;\r\n visibility: visible;\r\n top: 140%;\r\n }\r\n .contactus .dropdown-link {\r\n display: block;\r\n padding: 0.6rem 1.6rem;\r\n color: #4a4643;\r\n text-decoration: none;\r\n font-size: 0.9rem;\r\n }\r\n .contactus .dropdown-link:hover {\r\n background: #fff3e4;\r\n color: var(--deep-burgundy);\r\n }\r\n\r\n /* ===== HERO – POETRY IN MOTION ===== */\r\n .contactus .hero-luxury {\r\n position: relative;\r\n height: 500px;\r\n background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%), \r\n url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;\r\n background-blend-mode: multiply;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: white;\r\n isolation: isolate;\r\n }\r\n .contactus .hero-luxury::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);\r\n z-index: 1;\r\n }\r\n .contactus .hero-content {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 900px;\r\n padding: 0 1.5rem;\r\n }\r\n .contactus .gold-flourish {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.8rem;\r\n margin-bottom: 1.2rem;\r\n }\r\n .contactus .gold-flourish i {\r\n color: var(--rich-gold);\r\n font-size: 1.3rem;\r\n text-shadow: 0 0 10px rgba(200,154,94,0.5);\r\n }\r\n .contactus .hero-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.12);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255,215,150,0.4);\r\n padding: 0.5rem 2rem;\r\n border-radius: 4rem;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n color: var(--soft-gold);\r\n margin-bottom: 1.8rem;\r\n }\r\n .contactus .hero-luxury h1 {\r\n font-size: 4.8rem;\r\n font-weight: 800;\r\n font-family: 'aljazerabold', 'aljazerabold';\r\n line-height: 1.2;\r\n text-shadow: 0 8px 18px rgba(0,0,0,0.25);\r\n margin-bottom: 0.5rem;\r\n }\r\n .contactus .hero-luxury h1 span {\r\n color: var(--rich-gold);\r\n border-bottom: 2px solid var(--rich-gold);\r\n padding-bottom: 0.1rem;\r\n }\r\n .contactus .hero-divider {\r\n width: 160px;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);\r\n margin: 1.8rem auto;\r\n border-radius: 3px;\r\n }\r\n .contactus .hero-text {\r\n font-size: 1.3rem;\r\n font-weight: 350;\r\n opacity: 0.95;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n font-style: italic;\r\n }\r\n\r\n /* ===== CONTACT CARDS – ART GALLERY ===== */\r\n .contactus .section-crystal {\r\n padding: 5rem 0 3rem;\r\n background: linear-gradient(to bottom, var(--ivory), #fffbf5);\r\n }\r\n .contactus .contact-masterpiece {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 2.5rem;\r\n }\r\n @media (max-width: 1000px) {\r\n .contactus .contact-masterpiece {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n /* info card – like jewelry */\r\n .contactus .info-art {\r\n background: white;\r\n border-radius: var(--border-radius-l);\r\n padding: 3rem 2.2rem;\r\n box-shadow: var(--shadow-elegant);\r\n border: 1px solid rgba(200,154,94,0.2);\r\n position: relative;\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n backdrop-filter: blur(10px);\r\n background: linear-gradient(145deg, #fffdfa, #ffffff);\r\n }\r\n .contactus .info-art:hover {\r\n transform: translateY(-12px) scale(1.01);\r\n box-shadow: var(--shadow-gold);\r\n border-color: var(--rich-gold);\r\n }\r\n .contactus .info-art::before {\r\n content: \"✦ ✦ ✦\";\r\n position: absolute;\r\n top: 20px;\r\n right: 30px;\r\n font-size: 0.9rem;\r\n color: var(--rich-gold);\r\n letter-spacing: 6px;\r\n opacity: 0.6;\r\n }\r\n\r\n .contactus .info-item-lux {\r\n display: flex;\r\n gap: 1.5rem;\r\n align-items: flex-start;\r\n padding: 1.3rem 1.2rem;\r\n margin-bottom: 0.6rem;\r\n border-radius: 1.8rem;\r\n transition: 0.3s;\r\n border: 1px solid transparent;\r\n }\r\n .contactus .info-item-lux:hover {\r\n background: #fef8f0;\r\n border-color: #f0e1ce;\r\n box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);\r\n transform: translateX(-8px);\r\n }\r\n .contactus .icon-crystal {\r\n width: 64px;\r\n height: 64px;\r\n background: rgba(200,154,94,0.08);\r\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--deep-burgundy);\r\n font-size: 1.8rem;\r\n transition: 0.25s;\r\n flex-shrink: 0;\r\n }\r\n .contactus .info-item-lux:hover .icon-crystal {\r\n background: var(--deep-burgundy);\r\n color: white;\r\n border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;\r\n }\r\n\r\n .contactus .social-luxury {\r\n display: flex;\r\n gap: 0.8rem;\r\n margin-top: 2.2rem;\r\n }\r\n .contactus .social-luxury a {\r\n width: 52px;\r\n height: 52px;\r\n background: #f5ede5;\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--deep-burgundy);\r\n font-size: 1.5rem;\r\n transition: all 0.3s;\r\n border: 1px solid transparent;\r\n }\r\n .contactus .social-luxury a:hover {\r\n background: var(--deep-burgundy);\r\n color: var(--rich-gold);\r\n border-radius: 30% 70% 30% 70%;\r\n transform: scale(1.12) rotate(5deg);\r\n border-color: var(--rich-gold);\r\n }\r\n\r\n /* right card – hours & ambiance (NO FORM) */\r\n .contactus .hours-boutique {\r\n background: linear-gradient(145deg, #1e1c1d, #2a2425);\r\n border-radius: var(--border-radius-l);\r\n padding: 3rem 2.5rem;\r\n box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);\r\n border: 1px solid rgba(200,154,94,0.4);\r\n position: relative;\r\n overflow: hidden;\r\n color: white;\r\n }\r\n .contactus .hours-boutique::after {\r\n content: \"⏣\";\r\n position: absolute;\r\n bottom: -30px;\r\n left: -30px;\r\n font-size: 14rem;\r\n color: rgba(200,154,94,0.1);\r\n font-family: 'aljazerabold';\r\n transform: rotate(20deg);\r\n pointer-events: none;\r\n }\r\n .contactus .gold-stroke {\r\n color: var(--rich-gold);\r\n font-weight: 700;\r\n }\r\n .contactus .time-piece {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1.1rem 1.5rem;\r\n background: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(229,194,159,0.2);\r\n border-radius: 1.5rem;\r\n margin-bottom: 1rem;\r\n backdrop-filter: blur(10px);\r\n transition: 0.2s;\r\n }\r\n .contactus .time-piece:hover {\r\n background: rgba(200,154,94,0.1);\r\n border-color: var(--rich-gold);\r\n transform: scale(1.02);\r\n }\r\n .contactus .day {\r\n font-weight: 600;\r\n display: flex;\r\n gap: 0.7rem;\r\n align-items: center;\r\n }\r\n .contactus .hours {\r\n background: rgba(255,255,255,0.1);\r\n padding: 0.3rem 1.2rem;\r\n border-radius: 2rem;\r\n font-size: 0.9rem;\r\n direction: ltr;\r\n display: inline-block;\r\n color: var(--soft-gold);\r\n font-weight: 600;\r\n }\r\n\r\n .contactus .emergency-contact {\r\n margin-top: 2.2rem;\r\n background: rgba(200,154,94,0.12);\r\n border-right: 5px solid var(--rich-gold);\r\n padding: 1.4rem 1.8rem;\r\n border-radius: 1.2rem;\r\nfont-family: 'aljazerabold', 'aljazerabold';\r\n display: flex;\r\n gap: 1.2rem;\r\n align-items: center;\r\n }\r\n\r\n /* ===== MAP – LUXURY FRAME ===== */\r\n .contactus .map-container {\r\n position: relative;\r\n margin: 2rem auto 4rem;\r\n border-radius: 2.8rem;\r\n overflow: hidden;\r\n box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);\r\n border: 6px solid white;\r\n height: 450px;\r\n max-width: 1300px;\r\n }\r\n\r\n /* ===== BANK ACCOUNTS – OPULENT ===== */\r\n .contactus .bank-gallery {\r\n background: var(--cream);\r\n padding: 5rem 0;\r\n position: relative;\r\n }\r\n .contactus .bank-card-premium {\r\n background: white;\r\n border-radius: 2.2rem;\r\n padding: 2.5rem 2rem;\r\n box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);\r\n border-bottom: 6px solid var(--deep-burgundy);\r\n transition: 0.35s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .contactus .bank-card-premium::before {\r\n content: \"●\";\r\n position: absolute;\r\n top: -20px; right: -20px;\r\n font-size: 10rem;\r\n color: rgba(200,154,94,0.04);\r\n transform: rotate(25deg);\r\n }\r\n .contactus .bank-card-premium:hover {\r\n transform: translateY(-15px);\r\n border-bottom-color: var(--rich-gold);\r\n box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);\r\n }\r\n .contactus .copy-elegant {\r\n background: transparent;\r\n border: 1px solid var(--deep-burgundy);\r\n color: var(--deep-burgundy);\r\n padding: 0.6rem 1.8rem;\r\n border-radius: 3rem;\r\n font-weight: 600;\r\n transition: 0.25s;\r\n cursor: pointer;\r\n font-size: 1.25rem;\r\n text-align: center;\r\n margin-right: auto;\r\n margin-left: auto;\r\n display: block;\r\n }\r\n .contactus .copy-elegant:hover {\r\n background: var(--deep-burgundy);\r\n color: white;\r\n border-color: var(--rich-gold);\r\n }\r\n\r\n /* ===== FOOTER – DEEP & WARM ===== */\r\n .contactus .footer-opulent {\r\n background: #1a1819;\r\n color: #ccc2ba;\r\n padding: 4rem 0 2rem;\r\n border-top: 6px solid var(--rich-gold);\r\n }\r\n\r\n /* UTILITIES (prefixed) */\r\n .contactus .dir-ltr { direction: ltr; }\r\n .contactus .text-gold { color: var(--rich-gold); }\r\n .contactus .bg-ivory { background-color: var(--ivory); }\r\n .contactus .rounded-full { border-radius: 9999px; }\r\n .contactus .no-form .contact-form, \r\n .contactus .contact-form { display: none; } /* ensure no form appears */\r\n\r\n /* responsive */\r\n @media (max-width: 768px) {\r\n .contactus .hero-luxury h1 { font-size: 3rem; }\r\n }\r\n\r\n /* hide any global form remnants */\r\n .contact-form, form, [type=\"submit\"], input, select, textarea, .form-group {\r\n display: none !important;\r\n }\r\n .map-container iframe { display: block; }\r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n صُلب العطاء\r\n الحسابات البنكية\r\n•\tرمز السويفت : (ZKBATRIS)\r\n•\tإذن جمع المال : (1036918)\r\n \r\n \r\n \r\n \r\n \r\n VİCDAN DERحساب USD\r\n \r\n TR28 0020 9000 0060 8576 0000 20\r\n نسخ الآيبان\r\n \r\n \r\n \r\n \r\n VİCDAN DERحساب TRY\r\n \r\n TR55 0020 9000 0060 8576 0000 19\r\n نسخ الآيبان\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n // initialize AOS inside .contactus scope (it's global but fine)\r\n AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });\r\n\r\n // toggle functions remain (they target ids inside .contactus)\r\n function toggleMobileMenu() {\r\n const overlay = document.getElementById('mobile-overlay');\r\n const menu = document.getElementById('mobile-menu');\r\n if (overlay && menu) {\r\n if (overlay.classList.contains('hidden')) {\r\n overlay.classList.remove('hidden');\r\n setTimeout(() => overlay.classList.remove('opacity-0'), 20);\r\n menu.classList.remove('translate-x-full');\r\n } else {\r\n overlay.classList.add('opacity-0');\r\n menu.classList.add('translate-x-full');\r\n setTimeout(() => overlay.classList.add('hidden'), 300);\r\n }\r\n }\r\n }\r\n function toggleCart() { /* dummy */ }\r\n window.copyPremium = function(iban) {\r\n navigator.clipboard.writeText(iban);\r\n alert('✨ تم نسخ الآيبان: ' + iban);\r\n };\r\n // hide any potential form elements globally\r\n document.querySelectorAll('.contact-form, form, [type=\"submit\"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');\r\n \r\n \r\n \r\n /* ensure mobile menu hidden at start */\r\n #mobile-overlay, #mobile-menu { display: none; }\r\n .contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; } \r\n /* but we manage with js toggling, keep base hidden */\r\n #mobile-overlay, #mobile-menu { display: none; }\r\n .contact-form, form, [type=\"submit\"], input, select, textarea, .form-group {\r\n display: none !important;\r\n }\r\n .map-container iframe { display: block; }\r\n \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
element_gva_column->render_content(Array, '
باب العطاء مفتوح
تبرع الأن
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
اتصل بنا | وجدان الخيرية – تصميم مميز
/* ===== LUXURY DESIGN SYSTEM – "وجدان" : ALL RULES UNDER .contactus PREFIX ===== */
.contactus * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about_page .reveal {
opacity: 1;
transform: translateY(30px);
transition: all 0.8s ease;
}
.contactus {
--deep-burgundy: #5c1e2a;
--rich-gold: #c89a5e;
--soft-gold: #e5c29f;
--ivory: #fffcf7;
--cream: #faf3ea;
--charcoal: #2c2a2b;
--olive-sage: #7a8b7a;
--shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);
--shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);
--border-radius-l: 2.5rem;
--border-radius-m: 1.8rem;
--border-radius-s: 1.2rem;
--font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';
font-family: var(--font-primary);
background-color: var(--ivory);
color: var(--charcoal);
line-height: 1.6;
overflow-x: hidden;
position: relative;
display: block;
width: 100%;
}
.contactus .vicdan-wrapper {
position: relative;
}
.contactus .container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */
.contactus .top-bar {
background: #1e1c1d;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 0;
font-size: 0.85rem;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(200, 154, 94, 0.4);
}
.contactus .top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contactus .top-bar-link {
color: #e0d6cc;
text-decoration: none;
margin-left: 1.2rem;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.contactus .top-bar-link:hover {
color: var(--rich-gold);
}
/* ===== HEADER – ELEGANT TRANSPARENCY ===== */
.contactus .main-header {
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 154, 94, 0.2);
padding: 0.5rem 0;
position: sticky;
top: 0;
z-index: 50;
}
.contactus .logo-title {
font-size: 2rem;
font-weight: 800;
color: var(--deep-burgundy);
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(92,30,42,0.06);
}
.contactus .logo-subtitle {
font-size: 0.7rem;
color: var(--rich-gold);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: -0.3rem;
}
.contactus .nav-item {
position: relative;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
font-weight: 500;
color: #3e3a37;
transition: 0.2s;
cursor: pointer;
}
.contactus .nav-item:hover {
background: rgba(92, 30, 42, 0.05);
color: var(--deep-burgundy);
}
.contactus .nav-dropdown {
position: absolute;
top: 120%;
right: 0;
background: white;
min-width: 200px;
border-radius: 1.2rem;
padding: 0.8rem 0;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
opacity: 0;
visibility: hidden;
transition: 0.25s;
}
.contactus .nav-item.group:hover .nav-dropdown {
opacity: 1;
visibility: visible;
top: 140%;
}
.contactus .dropdown-link {
display: block;
padding: 0.6rem 1.6rem;
color: #4a4643;
text-decoration: none;
font-size: 0.9rem;
}
.contactus .dropdown-link:hover {
background: #fff3e4;
color: var(--deep-burgundy);
}
/* ===== HERO – POETRY IN MOTION ===== */
.contactus .hero-luxury {
position: relative;
height: 500px;
background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%),
url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.contactus .hero-luxury::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);
z-index: 1;
}
.contactus .hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 1.5rem;
}
.contactus .gold-flourish {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.contactus .gold-flourish i {
color: var(--rich-gold);
font-size: 1.3rem;
text-shadow: 0 0 10px rgba(200,154,94,0.5);
}
.contactus .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,215,150,0.4);
padding: 0.5rem 2rem;
border-radius: 4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--soft-gold);
margin-bottom: 1.8rem;
}
.contactus .hero-luxury h1 {
font-size: 4.8rem;
font-weight: 800;
font-family: 'aljazerabold', 'aljazerabold';
line-height: 1.2;
text-shadow: 0 8px 18px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.contactus .hero-luxury h1 span {
color: var(--rich-gold);
border-bottom: 2px solid var(--rich-gold);
padding-bottom: 0.1rem;
}
.contactus .hero-divider {
width: 160px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);
margin: 1.8rem auto;
border-radius: 3px;
}
.contactus .hero-text {
font-size: 1.3rem;
font-weight: 350;
opacity: 0.95;
max-width: 650px;
margin: 0 auto;
font-style: italic;
}
/* ===== CONTACT CARDS – ART GALLERY ===== */
.contactus .section-crystal {
padding: 5rem 0 3rem;
background: linear-gradient(to bottom, var(--ivory), #fffbf5);
}
.contactus .contact-masterpiece {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media (max-width: 1000px) {
.contactus .contact-masterpiece {
grid-template-columns: 1fr;
}
}
/* info card – like jewelry */
.contactus .info-art {
background: white;
border-radius: var(--border-radius-l);
padding: 3rem 2.2rem;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
position: relative;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
background: linear-gradient(145deg, #fffdfa, #ffffff);
}
.contactus .info-art:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: var(--shadow-gold);
border-color: var(--rich-gold);
}
.contactus .info-art::before {
content: "✦ ✦ ✦";
position: absolute;
top: 20px;
right: 30px;
font-size: 0.9rem;
color: var(--rich-gold);
letter-spacing: 6px;
opacity: 0.6;
}
.contactus .info-item-lux {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.3rem 1.2rem;
margin-bottom: 0.6rem;
border-radius: 1.8rem;
transition: 0.3s;
border: 1px solid transparent;
}
.contactus .info-item-lux:hover {
background: #fef8f0;
border-color: #f0e1ce;
box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);
transform: translateX(-8px);
}
.contactus .icon-crystal {
width: 64px;
height: 64px;
background: rgba(200,154,94,0.08);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.8rem;
transition: 0.25s;
flex-shrink: 0;
}
.contactus .info-item-lux:hover .icon-crystal {
background: var(--deep-burgundy);
color: white;
border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.contactus .social-luxury {
display: flex;
gap: 0.8rem;
margin-top: 2.2rem;
}
.contactus .social-luxury a {
width: 52px;
height: 52px;
background: #f5ede5;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.contactus .social-luxury a:hover {
background: var(--deep-burgundy);
color: var(--rich-gold);
border-radius: 30% 70% 30% 70%;
transform: scale(1.12) rotate(5deg);
border-color: var(--rich-gold);
}
/* right card – hours & ambiance (NO FORM) */
.contactus .hours-boutique {
background: linear-gradient(145deg, #1e1c1d, #2a2425);
border-radius: var(--border-radius-l);
padding: 3rem 2.5rem;
box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);
border: 1px solid rgba(200,154,94,0.4);
position: relative;
overflow: hidden;
color: white;
}
.contactus .hours-boutique::after {
content: "⏣";
position: absolute;
bottom: -30px;
left: -30px;
font-size: 14rem;
color: rgba(200,154,94,0.1);
font-family: 'aljazerabold';
transform: rotate(20deg);
pointer-events: none;
}
.contactus .gold-stroke {
color: var(--rich-gold);
font-weight: 700;
}
.contactus .time-piece {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 1.5rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(229,194,159,0.2);
border-radius: 1.5rem;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: 0.2s;
}
.contactus .time-piece:hover {
background: rgba(200,154,94,0.1);
border-color: var(--rich-gold);
transform: scale(1.02);
}
.contactus .day {
font-weight: 600;
display: flex;
gap: 0.7rem;
align-items: center;
}
.contactus .hours {
background: rgba(255,255,255,0.1);
padding: 0.3rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
direction: ltr;
display: inline-block;
color: var(--soft-gold);
font-weight: 600;
}
.contactus .emergency-contact {
margin-top: 2.2rem;
background: rgba(200,154,94,0.12);
border-right: 5px solid var(--rich-gold);
padding: 1.4rem 1.8rem;
border-radius: 1.2rem;
font-family: 'aljazerabold', 'aljazerabold';
display: flex;
gap: 1.2rem;
align-items: center;
}
/* ===== MAP – LUXURY FRAME ===== */
.contactus .map-container {
position: relative;
margin: 2rem auto 4rem;
border-radius: 2.8rem;
overflow: hidden;
box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);
border: 6px solid white;
height: 450px;
max-width: 1300px;
}
/* ===== BANK ACCOUNTS – OPULENT ===== */
.contactus .bank-gallery {
background: var(--cream);
padding: 5rem 0;
position: relative;
}
.contactus .bank-card-premium {
background: white;
border-radius: 2.2rem;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
border-bottom: 6px solid var(--deep-burgundy);
transition: 0.35s;
position: relative;
overflow: hidden;
}
.contactus .bank-card-premium::before {
content: "●";
position: absolute;
top: -20px; right: -20px;
font-size: 10rem;
color: rgba(200,154,94,0.04);
transform: rotate(25deg);
}
.contactus .bank-card-premium:hover {
transform: translateY(-15px);
border-bottom-color: var(--rich-gold);
box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);
}
.contactus .copy-elegant {
background: transparent;
border: 1px solid var(--deep-burgundy);
color: var(--deep-burgundy);
padding: 0.6rem 1.8rem;
border-radius: 3rem;
font-weight: 600;
transition: 0.25s;
cursor: pointer;
font-size: 1.25rem;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.contactus .copy-elegant:hover {
background: var(--deep-burgundy);
color: white;
border-color: var(--rich-gold);
}
/* ===== FOOTER – DEEP & WARM ===== */
.contactus .footer-opulent {
background: #1a1819;
color: #ccc2ba;
padding: 4rem 0 2rem;
border-top: 6px solid var(--rich-gold);
}
/* UTILITIES (prefixed) */
.contactus .dir-ltr { direction: ltr; }
.contactus .text-gold { color: var(--rich-gold); }
.contactus .bg-ivory { background-color: var(--ivory); }
.contactus .rounded-full { border-radius: 9999px; }
.contactus .no-form .contact-form,
.contactus .contact-form { display: none; } /* ensure no form appears */
/* responsive */
@media (max-width: 768px) {
.contactus .hero-luxury h1 { font-size: 3rem; }
}
/* hide any global form remnants */
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
صُلب العطاء
الحسابات البنكية
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)
VİCDAN DERحساب USD
TR28 0020 9000 0060 8576 0000 20
نسخ الآيبان
VİCDAN DERحساب TRY
TR55 0020 9000 0060 8576 0000 19
نسخ الآيبان
// initialize AOS inside .contactus scope (it's global but fine)
AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });
// toggle functions remain (they target ids inside .contactus)
function toggleMobileMenu() {
const overlay = document.getElementById('mobile-overlay');
const menu = document.getElementById('mobile-menu');
if (overlay && menu) {
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 20);
menu.classList.remove('translate-x-full');
} else {
overlay.classList.add('opacity-0');
menu.classList.add('translate-x-full');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
}
function toggleCart() { /* dummy */ }
window.copyPremium = function(iban) {
navigator.clipboard.writeText(iban);
alert('✨ تم نسخ الآيبان: ' + iban);
};
// hide any potential form elements globally
document.querySelectorAll('.contact-form, form, [type="submit"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');
/* ensure mobile menu hidden at start */
#mobile-overlay, #mobile-menu { display: none; }
.contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; }
/* but we manage with js toggling, keep base hidden */
#mobile-overlay, #mobile-menu { display: none; }
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
') (Line: 110)
gavias_content_builder_render_element('gva_column', Array, '
باب العطاء مفتوح
تبرع الأن
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
اتصل بنا | وجدان الخيرية – تصميم مميز
/* ===== LUXURY DESIGN SYSTEM – "وجدان" : ALL RULES UNDER .contactus PREFIX ===== */
.contactus * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about_page .reveal {
opacity: 1;
transform: translateY(30px);
transition: all 0.8s ease;
}
.contactus {
--deep-burgundy: #5c1e2a;
--rich-gold: #c89a5e;
--soft-gold: #e5c29f;
--ivory: #fffcf7;
--cream: #faf3ea;
--charcoal: #2c2a2b;
--olive-sage: #7a8b7a;
--shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);
--shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);
--border-radius-l: 2.5rem;
--border-radius-m: 1.8rem;
--border-radius-s: 1.2rem;
--font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';
font-family: var(--font-primary);
background-color: var(--ivory);
color: var(--charcoal);
line-height: 1.6;
overflow-x: hidden;
position: relative;
display: block;
width: 100%;
}
.contactus .vicdan-wrapper {
position: relative;
}
.contactus .container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */
.contactus .top-bar {
background: #1e1c1d;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 0;
font-size: 0.85rem;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(200, 154, 94, 0.4);
}
.contactus .top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contactus .top-bar-link {
color: #e0d6cc;
text-decoration: none;
margin-left: 1.2rem;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.contactus .top-bar-link:hover {
color: var(--rich-gold);
}
/* ===== HEADER – ELEGANT TRANSPARENCY ===== */
.contactus .main-header {
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 154, 94, 0.2);
padding: 0.5rem 0;
position: sticky;
top: 0;
z-index: 50;
}
.contactus .logo-title {
font-size: 2rem;
font-weight: 800;
color: var(--deep-burgundy);
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(92,30,42,0.06);
}
.contactus .logo-subtitle {
font-size: 0.7rem;
color: var(--rich-gold);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: -0.3rem;
}
.contactus .nav-item {
position: relative;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
font-weight: 500;
color: #3e3a37;
transition: 0.2s;
cursor: pointer;
}
.contactus .nav-item:hover {
background: rgba(92, 30, 42, 0.05);
color: var(--deep-burgundy);
}
.contactus .nav-dropdown {
position: absolute;
top: 120%;
right: 0;
background: white;
min-width: 200px;
border-radius: 1.2rem;
padding: 0.8rem 0;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
opacity: 0;
visibility: hidden;
transition: 0.25s;
}
.contactus .nav-item.group:hover .nav-dropdown {
opacity: 1;
visibility: visible;
top: 140%;
}
.contactus .dropdown-link {
display: block;
padding: 0.6rem 1.6rem;
color: #4a4643;
text-decoration: none;
font-size: 0.9rem;
}
.contactus .dropdown-link:hover {
background: #fff3e4;
color: var(--deep-burgundy);
}
/* ===== HERO – POETRY IN MOTION ===== */
.contactus .hero-luxury {
position: relative;
height: 500px;
background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%),
url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.contactus .hero-luxury::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);
z-index: 1;
}
.contactus .hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 1.5rem;
}
.contactus .gold-flourish {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.contactus .gold-flourish i {
color: var(--rich-gold);
font-size: 1.3rem;
text-shadow: 0 0 10px rgba(200,154,94,0.5);
}
.contactus .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,215,150,0.4);
padding: 0.5rem 2rem;
border-radius: 4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--soft-gold);
margin-bottom: 1.8rem;
}
.contactus .hero-luxury h1 {
font-size: 4.8rem;
font-weight: 800;
font-family: 'aljazerabold', 'aljazerabold';
line-height: 1.2;
text-shadow: 0 8px 18px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.contactus .hero-luxury h1 span {
color: var(--rich-gold);
border-bottom: 2px solid var(--rich-gold);
padding-bottom: 0.1rem;
}
.contactus .hero-divider {
width: 160px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);
margin: 1.8rem auto;
border-radius: 3px;
}
.contactus .hero-text {
font-size: 1.3rem;
font-weight: 350;
opacity: 0.95;
max-width: 650px;
margin: 0 auto;
font-style: italic;
}
/* ===== CONTACT CARDS – ART GALLERY ===== */
.contactus .section-crystal {
padding: 5rem 0 3rem;
background: linear-gradient(to bottom, var(--ivory), #fffbf5);
}
.contactus .contact-masterpiece {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media (max-width: 1000px) {
.contactus .contact-masterpiece {
grid-template-columns: 1fr;
}
}
/* info card – like jewelry */
.contactus .info-art {
background: white;
border-radius: var(--border-radius-l);
padding: 3rem 2.2rem;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
position: relative;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
background: linear-gradient(145deg, #fffdfa, #ffffff);
}
.contactus .info-art:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: var(--shadow-gold);
border-color: var(--rich-gold);
}
.contactus .info-art::before {
content: "✦ ✦ ✦";
position: absolute;
top: 20px;
right: 30px;
font-size: 0.9rem;
color: var(--rich-gold);
letter-spacing: 6px;
opacity: 0.6;
}
.contactus .info-item-lux {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.3rem 1.2rem;
margin-bottom: 0.6rem;
border-radius: 1.8rem;
transition: 0.3s;
border: 1px solid transparent;
}
.contactus .info-item-lux:hover {
background: #fef8f0;
border-color: #f0e1ce;
box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);
transform: translateX(-8px);
}
.contactus .icon-crystal {
width: 64px;
height: 64px;
background: rgba(200,154,94,0.08);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.8rem;
transition: 0.25s;
flex-shrink: 0;
}
.contactus .info-item-lux:hover .icon-crystal {
background: var(--deep-burgundy);
color: white;
border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.contactus .social-luxury {
display: flex;
gap: 0.8rem;
margin-top: 2.2rem;
}
.contactus .social-luxury a {
width: 52px;
height: 52px;
background: #f5ede5;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.contactus .social-luxury a:hover {
background: var(--deep-burgundy);
color: var(--rich-gold);
border-radius: 30% 70% 30% 70%;
transform: scale(1.12) rotate(5deg);
border-color: var(--rich-gold);
}
/* right card – hours & ambiance (NO FORM) */
.contactus .hours-boutique {
background: linear-gradient(145deg, #1e1c1d, #2a2425);
border-radius: var(--border-radius-l);
padding: 3rem 2.5rem;
box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);
border: 1px solid rgba(200,154,94,0.4);
position: relative;
overflow: hidden;
color: white;
}
.contactus .hours-boutique::after {
content: "⏣";
position: absolute;
bottom: -30px;
left: -30px;
font-size: 14rem;
color: rgba(200,154,94,0.1);
font-family: 'aljazerabold';
transform: rotate(20deg);
pointer-events: none;
}
.contactus .gold-stroke {
color: var(--rich-gold);
font-weight: 700;
}
.contactus .time-piece {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 1.5rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(229,194,159,0.2);
border-radius: 1.5rem;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: 0.2s;
}
.contactus .time-piece:hover {
background: rgba(200,154,94,0.1);
border-color: var(--rich-gold);
transform: scale(1.02);
}
.contactus .day {
font-weight: 600;
display: flex;
gap: 0.7rem;
align-items: center;
}
.contactus .hours {
background: rgba(255,255,255,0.1);
padding: 0.3rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
direction: ltr;
display: inline-block;
color: var(--soft-gold);
font-weight: 600;
}
.contactus .emergency-contact {
margin-top: 2.2rem;
background: rgba(200,154,94,0.12);
border-right: 5px solid var(--rich-gold);
padding: 1.4rem 1.8rem;
border-radius: 1.2rem;
font-family: 'aljazerabold', 'aljazerabold';
display: flex;
gap: 1.2rem;
align-items: center;
}
/* ===== MAP – LUXURY FRAME ===== */
.contactus .map-container {
position: relative;
margin: 2rem auto 4rem;
border-radius: 2.8rem;
overflow: hidden;
box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);
border: 6px solid white;
height: 450px;
max-width: 1300px;
}
/* ===== BANK ACCOUNTS – OPULENT ===== */
.contactus .bank-gallery {
background: var(--cream);
padding: 5rem 0;
position: relative;
}
.contactus .bank-card-premium {
background: white;
border-radius: 2.2rem;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
border-bottom: 6px solid var(--deep-burgundy);
transition: 0.35s;
position: relative;
overflow: hidden;
}
.contactus .bank-card-premium::before {
content: "●";
position: absolute;
top: -20px; right: -20px;
font-size: 10rem;
color: rgba(200,154,94,0.04);
transform: rotate(25deg);
}
.contactus .bank-card-premium:hover {
transform: translateY(-15px);
border-bottom-color: var(--rich-gold);
box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);
}
.contactus .copy-elegant {
background: transparent;
border: 1px solid var(--deep-burgundy);
color: var(--deep-burgundy);
padding: 0.6rem 1.8rem;
border-radius: 3rem;
font-weight: 600;
transition: 0.25s;
cursor: pointer;
font-size: 1.25rem;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.contactus .copy-elegant:hover {
background: var(--deep-burgundy);
color: white;
border-color: var(--rich-gold);
}
/* ===== FOOTER – DEEP & WARM ===== */
.contactus .footer-opulent {
background: #1a1819;
color: #ccc2ba;
padding: 4rem 0 2rem;
border-top: 6px solid var(--rich-gold);
}
/* UTILITIES (prefixed) */
.contactus .dir-ltr { direction: ltr; }
.contactus .text-gold { color: var(--rich-gold); }
.contactus .bg-ivory { background-color: var(--ivory); }
.contactus .rounded-full { border-radius: 9999px; }
.contactus .no-form .contact-form,
.contactus .contact-form { display: none; } /* ensure no form appears */
/* responsive */
@media (max-width: 768px) {
.contactus .hero-luxury h1 { font-size: 3rem; }
}
/* hide any global form remnants */
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
صُلب العطاء
الحسابات البنكية
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)
VİCDAN DERحساب USD
TR28 0020 9000 0060 8576 0000 20
نسخ الآيبان
VİCDAN DERحساب TRY
TR55 0020 9000 0060 8576 0000 19
نسخ الآيبان
// initialize AOS inside .contactus scope (it's global but fine)
AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });
// toggle functions remain (they target ids inside .contactus)
function toggleMobileMenu() {
const overlay = document.getElementById('mobile-overlay');
const menu = document.getElementById('mobile-menu');
if (overlay && menu) {
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 20);
menu.classList.remove('translate-x-full');
} else {
overlay.classList.add('opacity-0');
menu.classList.add('translate-x-full');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
}
function toggleCart() { /* dummy */ }
window.copyPremium = function(iban) {
navigator.clipboard.writeText(iban);
alert('✨ تم نسخ الآيبان: ' + iban);
};
// hide any potential form elements globally
document.querySelectorAll('.contact-form, form, [type="submit"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');
/* ensure mobile menu hidden at start */
#mobile-overlay, #mobile-menu { display: none; }
.contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; }
/* but we manage with js toggling, keep base hidden */
#mobile-overlay, #mobile-menu { display: none; }
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
') (Line: 58)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","layout":"container-fw","padding_top":"0","margin_top":"0","padding_bottom":"0","margin_bottom":"0","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n \r\n \r\n \r\n \r\n \r\n باب العطاء مفتوح\r\n\r\n تبرع الأن\r\n\r\n \r\n \r\n نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.\r\n\r\n \r\n \r\n \r\n \r\n\t\t","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n\r\n \r\n \r\n \r\n اتصل بنا | وجدان الخيرية – تصميم مميز\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n /* ===== LUXURY DESIGN SYSTEM – \"وجدان\" : ALL RULES UNDER .contactus PREFIX ===== */\r\n .contactus * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n.about_page .reveal {\r\n opacity: 1;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n}\r\n .contactus {\r\n --deep-burgundy: #5c1e2a;\r\n --rich-gold: #c89a5e;\r\n --soft-gold: #e5c29f;\r\n --ivory: #fffcf7;\r\n --cream: #faf3ea;\r\n --charcoal: #2c2a2b;\r\n --olive-sage: #7a8b7a;\r\n --shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);\r\n --shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);\r\n --border-radius-l: 2.5rem;\r\n --border-radius-m: 1.8rem;\r\n --border-radius-s: 1.2rem;\r\n --font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';\r\n\r\n font-family: var(--font-primary);\r\n background-color: var(--ivory);\r\n color: var(--charcoal);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .contactus .vicdan-wrapper {\r\n position: relative;\r\n }\r\n\r\n .contactus .container {\r\n width: 90%;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */\r\n .contactus .top-bar {\r\n background: #1e1c1d;\r\n color: rgba(255, 255, 255, 0.7);\r\n padding: 0.6rem 0;\r\n font-size: 0.85rem;\r\n letter-spacing: 0.5px;\r\n border-bottom: 1px solid rgba(200, 154, 94, 0.4);\r\n }\r\n .contactus .top-bar .container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .contactus .top-bar-link {\r\n color: #e0d6cc;\r\n text-decoration: none;\r\n margin-left: 1.2rem;\r\n transition: color 0.25s;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n }\r\n .contactus .top-bar-link:hover {\r\n color: var(--rich-gold);\r\n }\r\n\r\n /* ===== HEADER – ELEGANT TRANSPARENCY ===== */\r\n .contactus .main-header {\r\n background: rgba(255, 252, 245, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-bottom: 1px solid rgba(200, 154, 94, 0.2);\r\n padding: 0.5rem 0;\r\n position: sticky;\r\n top: 0;\r\n z-index: 50;\r\n }\r\n .contactus .logo-title {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--deep-burgundy);\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-shadow: 0 2px 4px rgba(92,30,42,0.06);\r\n }\r\n .contactus .logo-subtitle {\r\n font-size: 0.7rem;\r\n color: var(--rich-gold);\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n margin-top: -0.3rem;\r\n }\r\n .contactus .nav-item {\r\n position: relative;\r\n padding: 0.6rem 1.2rem;\r\n border-radius: 3rem;\r\n font-weight: 500;\r\n color: #3e3a37;\r\n transition: 0.2s;\r\n cursor: pointer;\r\n }\r\n .contactus .nav-item:hover {\r\n background: rgba(92, 30, 42, 0.05);\r\n color: var(--deep-burgundy);\r\n }\r\n .contactus .nav-dropdown {\r\n position: absolute;\r\n top: 120%;\r\n right: 0;\r\n background: white;\r\n min-width: 200px;\r\n border-radius: 1.2rem;\r\n padding: 0.8rem 0;\r\n box-shadow: var(--shadow-elegant);\r\n border: 1px solid rgba(200,154,94,0.2);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: 0.25s;\r\n }\r\n .contactus .nav-item.group:hover .nav-dropdown {\r\n opacity: 1;\r\n visibility: visible;\r\n top: 140%;\r\n }\r\n .contactus .dropdown-link {\r\n display: block;\r\n padding: 0.6rem 1.6rem;\r\n color: #4a4643;\r\n text-decoration: none;\r\n font-size: 0.9rem;\r\n }\r\n .contactus .dropdown-link:hover {\r\n background: #fff3e4;\r\n color: var(--deep-burgundy);\r\n }\r\n\r\n /* ===== HERO – POETRY IN MOTION ===== */\r\n .contactus .hero-luxury {\r\n position: relative;\r\n height: 500px;\r\n background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%), \r\n url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;\r\n background-blend-mode: multiply;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: white;\r\n isolation: isolate;\r\n }\r\n .contactus .hero-luxury::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);\r\n z-index: 1;\r\n }\r\n .contactus .hero-content {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 900px;\r\n padding: 0 1.5rem;\r\n }\r\n .contactus .gold-flourish {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.8rem;\r\n margin-bottom: 1.2rem;\r\n }\r\n .contactus .gold-flourish i {\r\n color: var(--rich-gold);\r\n font-size: 1.3rem;\r\n text-shadow: 0 0 10px rgba(200,154,94,0.5);\r\n }\r\n .contactus .hero-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.12);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255,215,150,0.4);\r\n padding: 0.5rem 2rem;\r\n border-radius: 4rem;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n color: var(--soft-gold);\r\n margin-bottom: 1.8rem;\r\n }\r\n .contactus .hero-luxury h1 {\r\n font-size: 4.8rem;\r\n font-weight: 800;\r\n font-family: 'aljazerabold', 'aljazerabold';\r\n line-height: 1.2;\r\n text-shadow: 0 8px 18px rgba(0,0,0,0.25);\r\n margin-bottom: 0.5rem;\r\n }\r\n .contactus .hero-luxury h1 span {\r\n color: var(--rich-gold);\r\n border-bottom: 2px solid var(--rich-gold);\r\n padding-bottom: 0.1rem;\r\n }\r\n .contactus .hero-divider {\r\n width: 160px;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);\r\n margin: 1.8rem auto;\r\n border-radius: 3px;\r\n }\r\n .contactus .hero-text {\r\n font-size: 1.3rem;\r\n font-weight: 350;\r\n opacity: 0.95;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n font-style: italic;\r\n }\r\n\r\n /* ===== CONTACT CARDS – ART GALLERY ===== */\r\n .contactus .section-crystal {\r\n padding: 5rem 0 3rem;\r\n background: linear-gradient(to bottom, var(--ivory), #fffbf5);\r\n }\r\n .contactus .contact-masterpiece {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 2.5rem;\r\n }\r\n @media (max-width: 1000px) {\r\n .contactus .contact-masterpiece {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n /* info card – like jewelry */\r\n .contactus .info-art {\r\n background: white;\r\n border-radius: var(--border-radius-l);\r\n padding: 3rem 2.2rem;\r\n box-shadow: var(--shadow-elegant);\r\n border: 1px solid rgba(200,154,94,0.2);\r\n position: relative;\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n backdrop-filter: blur(10px);\r\n background: linear-gradient(145deg, #fffdfa, #ffffff);\r\n }\r\n .contactus .info-art:hover {\r\n transform: translateY(-12px) scale(1.01);\r\n box-shadow: var(--shadow-gold);\r\n border-color: var(--rich-gold);\r\n }\r\n .contactus .info-art::before {\r\n content: \"✦ ✦ ✦\";\r\n position: absolute;\r\n top: 20px;\r\n right: 30px;\r\n font-size: 0.9rem;\r\n color: var(--rich-gold);\r\n letter-spacing: 6px;\r\n opacity: 0.6;\r\n }\r\n\r\n .contactus .info-item-lux {\r\n display: flex;\r\n gap: 1.5rem;\r\n align-items: flex-start;\r\n padding: 1.3rem 1.2rem;\r\n margin-bottom: 0.6rem;\r\n border-radius: 1.8rem;\r\n transition: 0.3s;\r\n border: 1px solid transparent;\r\n }\r\n .contactus .info-item-lux:hover {\r\n background: #fef8f0;\r\n border-color: #f0e1ce;\r\n box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);\r\n transform: translateX(-8px);\r\n }\r\n .contactus .icon-crystal {\r\n width: 64px;\r\n height: 64px;\r\n background: rgba(200,154,94,0.08);\r\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--deep-burgundy);\r\n font-size: 1.8rem;\r\n transition: 0.25s;\r\n flex-shrink: 0;\r\n }\r\n .contactus .info-item-lux:hover .icon-crystal {\r\n background: var(--deep-burgundy);\r\n color: white;\r\n border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;\r\n }\r\n\r\n .contactus .social-luxury {\r\n display: flex;\r\n gap: 0.8rem;\r\n margin-top: 2.2rem;\r\n }\r\n .contactus .social-luxury a {\r\n width: 52px;\r\n height: 52px;\r\n background: #f5ede5;\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--deep-burgundy);\r\n font-size: 1.5rem;\r\n transition: all 0.3s;\r\n border: 1px solid transparent;\r\n }\r\n .contactus .social-luxury a:hover {\r\n background: var(--deep-burgundy);\r\n color: var(--rich-gold);\r\n border-radius: 30% 70% 30% 70%;\r\n transform: scale(1.12) rotate(5deg);\r\n border-color: var(--rich-gold);\r\n }\r\n\r\n /* right card – hours & ambiance (NO FORM) */\r\n .contactus .hours-boutique {\r\n background: linear-gradient(145deg, #1e1c1d, #2a2425);\r\n border-radius: var(--border-radius-l);\r\n padding: 3rem 2.5rem;\r\n box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);\r\n border: 1px solid rgba(200,154,94,0.4);\r\n position: relative;\r\n overflow: hidden;\r\n color: white;\r\n }\r\n .contactus .hours-boutique::after {\r\n content: \"⏣\";\r\n position: absolute;\r\n bottom: -30px;\r\n left: -30px;\r\n font-size: 14rem;\r\n color: rgba(200,154,94,0.1);\r\n font-family: 'aljazerabold';\r\n transform: rotate(20deg);\r\n pointer-events: none;\r\n }\r\n .contactus .gold-stroke {\r\n color: var(--rich-gold);\r\n font-weight: 700;\r\n }\r\n .contactus .time-piece {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1.1rem 1.5rem;\r\n background: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(229,194,159,0.2);\r\n border-radius: 1.5rem;\r\n margin-bottom: 1rem;\r\n backdrop-filter: blur(10px);\r\n transition: 0.2s;\r\n }\r\n .contactus .time-piece:hover {\r\n background: rgba(200,154,94,0.1);\r\n border-color: var(--rich-gold);\r\n transform: scale(1.02);\r\n }\r\n .contactus .day {\r\n font-weight: 600;\r\n display: flex;\r\n gap: 0.7rem;\r\n align-items: center;\r\n }\r\n .contactus .hours {\r\n background: rgba(255,255,255,0.1);\r\n padding: 0.3rem 1.2rem;\r\n border-radius: 2rem;\r\n font-size: 0.9rem;\r\n direction: ltr;\r\n display: inline-block;\r\n color: var(--soft-gold);\r\n font-weight: 600;\r\n }\r\n\r\n .contactus .emergency-contact {\r\n margin-top: 2.2rem;\r\n background: rgba(200,154,94,0.12);\r\n border-right: 5px solid var(--rich-gold);\r\n padding: 1.4rem 1.8rem;\r\n border-radius: 1.2rem;\r\nfont-family: 'aljazerabold', 'aljazerabold';\r\n display: flex;\r\n gap: 1.2rem;\r\n align-items: center;\r\n }\r\n\r\n /* ===== MAP – LUXURY FRAME ===== */\r\n .contactus .map-container {\r\n position: relative;\r\n margin: 2rem auto 4rem;\r\n border-radius: 2.8rem;\r\n overflow: hidden;\r\n box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);\r\n border: 6px solid white;\r\n height: 450px;\r\n max-width: 1300px;\r\n }\r\n\r\n /* ===== BANK ACCOUNTS – OPULENT ===== */\r\n .contactus .bank-gallery {\r\n background: var(--cream);\r\n padding: 5rem 0;\r\n position: relative;\r\n }\r\n .contactus .bank-card-premium {\r\n background: white;\r\n border-radius: 2.2rem;\r\n padding: 2.5rem 2rem;\r\n box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);\r\n border-bottom: 6px solid var(--deep-burgundy);\r\n transition: 0.35s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .contactus .bank-card-premium::before {\r\n content: \"●\";\r\n position: absolute;\r\n top: -20px; right: -20px;\r\n font-size: 10rem;\r\n color: rgba(200,154,94,0.04);\r\n transform: rotate(25deg);\r\n }\r\n .contactus .bank-card-premium:hover {\r\n transform: translateY(-15px);\r\n border-bottom-color: var(--rich-gold);\r\n box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);\r\n }\r\n .contactus .copy-elegant {\r\n background: transparent;\r\n border: 1px solid var(--deep-burgundy);\r\n color: var(--deep-burgundy);\r\n padding: 0.6rem 1.8rem;\r\n border-radius: 3rem;\r\n font-weight: 600;\r\n transition: 0.25s;\r\n cursor: pointer;\r\n font-size: 1.25rem;\r\n text-align: center;\r\n margin-right: auto;\r\n margin-left: auto;\r\n display: block;\r\n }\r\n .contactus .copy-elegant:hover {\r\n background: var(--deep-burgundy);\r\n color: white;\r\n border-color: var(--rich-gold);\r\n }\r\n\r\n /* ===== FOOTER – DEEP & WARM ===== */\r\n .contactus .footer-opulent {\r\n background: #1a1819;\r\n color: #ccc2ba;\r\n padding: 4rem 0 2rem;\r\n border-top: 6px solid var(--rich-gold);\r\n }\r\n\r\n /* UTILITIES (prefixed) */\r\n .contactus .dir-ltr { direction: ltr; }\r\n .contactus .text-gold { color: var(--rich-gold); }\r\n .contactus .bg-ivory { background-color: var(--ivory); }\r\n .contactus .rounded-full { border-radius: 9999px; }\r\n .contactus .no-form .contact-form, \r\n .contactus .contact-form { display: none; } /* ensure no form appears */\r\n\r\n /* responsive */\r\n @media (max-width: 768px) {\r\n .contactus .hero-luxury h1 { font-size: 3rem; }\r\n }\r\n\r\n /* hide any global form remnants */\r\n .contact-form, form, [type=\"submit\"], input, select, textarea, .form-group {\r\n display: none !important;\r\n }\r\n .map-container iframe { display: block; }\r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n صُلب العطاء\r\n الحسابات البنكية\r\n•\tرمز السويفت : (ZKBATRIS)\r\n•\tإذن جمع المال : (1036918)\r\n \r\n \r\n \r\n \r\n \r\n VİCDAN DERحساب USD\r\n \r\n TR28 0020 9000 0060 8576 0000 20\r\n نسخ الآيبان\r\n \r\n \r\n \r\n \r\n VİCDAN DERحساب TRY\r\n \r\n TR55 0020 9000 0060 8576 0000 19\r\n نسخ الآيبان\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n // initialize AOS inside .contactus scope (it's global but fine)\r\n AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });\r\n\r\n // toggle functions remain (they target ids inside .contactus)\r\n function toggleMobileMenu() {\r\n const overlay = document.getElementById('mobile-overlay');\r\n const menu = document.getElementById('mobile-menu');\r\n if (overlay && menu) {\r\n if (overlay.classList.contains('hidden')) {\r\n overlay.classList.remove('hidden');\r\n setTimeout(() => overlay.classList.remove('opacity-0'), 20);\r\n menu.classList.remove('translate-x-full');\r\n } else {\r\n overlay.classList.add('opacity-0');\r\n menu.classList.add('translate-x-full');\r\n setTimeout(() => overlay.classList.add('hidden'), 300);\r\n }\r\n }\r\n }\r\n function toggleCart() { /* dummy */ }\r\n window.copyPremium = function(iban) {\r\n navigator.clipboard.writeText(iban);\r\n alert('✨ تم نسخ الآيبان: ' + iban);\r\n };\r\n // hide any potential form elements globally\r\n document.querySelectorAll('.contact-form, form, [type=\"submit\"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');\r\n \r\n \r\n \r\n /* ensure mobile menu hidden at start */\r\n #mobile-overlay, #mobile-menu { display: none; }\r\n .contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; } \r\n /* but we manage with js toggling, keep base hidden */\r\n #mobile-overlay, #mobile-menu { display: none; }\r\n .contact-form, form, [type=\"submit\"], input, select, textarea, .form-group {\r\n display: none !important;\r\n }\r\n .map-container iframe { display: block; }\r\n \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
element_gva_row->render_content(Array, '
باب العطاء مفتوح
تبرع الأن
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
اتصل بنا | وجدان الخيرية – تصميم مميز
/* ===== LUXURY DESIGN SYSTEM – "وجدان" : ALL RULES UNDER .contactus PREFIX ===== */
.contactus * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about_page .reveal {
opacity: 1;
transform: translateY(30px);
transition: all 0.8s ease;
}
.contactus {
--deep-burgundy: #5c1e2a;
--rich-gold: #c89a5e;
--soft-gold: #e5c29f;
--ivory: #fffcf7;
--cream: #faf3ea;
--charcoal: #2c2a2b;
--olive-sage: #7a8b7a;
--shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);
--shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);
--border-radius-l: 2.5rem;
--border-radius-m: 1.8rem;
--border-radius-s: 1.2rem;
--font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';
font-family: var(--font-primary);
background-color: var(--ivory);
color: var(--charcoal);
line-height: 1.6;
overflow-x: hidden;
position: relative;
display: block;
width: 100%;
}
.contactus .vicdan-wrapper {
position: relative;
}
.contactus .container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */
.contactus .top-bar {
background: #1e1c1d;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 0;
font-size: 0.85rem;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(200, 154, 94, 0.4);
}
.contactus .top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contactus .top-bar-link {
color: #e0d6cc;
text-decoration: none;
margin-left: 1.2rem;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.contactus .top-bar-link:hover {
color: var(--rich-gold);
}
/* ===== HEADER – ELEGANT TRANSPARENCY ===== */
.contactus .main-header {
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 154, 94, 0.2);
padding: 0.5rem 0;
position: sticky;
top: 0;
z-index: 50;
}
.contactus .logo-title {
font-size: 2rem;
font-weight: 800;
color: var(--deep-burgundy);
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(92,30,42,0.06);
}
.contactus .logo-subtitle {
font-size: 0.7rem;
color: var(--rich-gold);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: -0.3rem;
}
.contactus .nav-item {
position: relative;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
font-weight: 500;
color: #3e3a37;
transition: 0.2s;
cursor: pointer;
}
.contactus .nav-item:hover {
background: rgba(92, 30, 42, 0.05);
color: var(--deep-burgundy);
}
.contactus .nav-dropdown {
position: absolute;
top: 120%;
right: 0;
background: white;
min-width: 200px;
border-radius: 1.2rem;
padding: 0.8rem 0;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
opacity: 0;
visibility: hidden;
transition: 0.25s;
}
.contactus .nav-item.group:hover .nav-dropdown {
opacity: 1;
visibility: visible;
top: 140%;
}
.contactus .dropdown-link {
display: block;
padding: 0.6rem 1.6rem;
color: #4a4643;
text-decoration: none;
font-size: 0.9rem;
}
.contactus .dropdown-link:hover {
background: #fff3e4;
color: var(--deep-burgundy);
}
/* ===== HERO – POETRY IN MOTION ===== */
.contactus .hero-luxury {
position: relative;
height: 500px;
background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%),
url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.contactus .hero-luxury::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);
z-index: 1;
}
.contactus .hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 1.5rem;
}
.contactus .gold-flourish {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.contactus .gold-flourish i {
color: var(--rich-gold);
font-size: 1.3rem;
text-shadow: 0 0 10px rgba(200,154,94,0.5);
}
.contactus .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,215,150,0.4);
padding: 0.5rem 2rem;
border-radius: 4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--soft-gold);
margin-bottom: 1.8rem;
}
.contactus .hero-luxury h1 {
font-size: 4.8rem;
font-weight: 800;
font-family: 'aljazerabold', 'aljazerabold';
line-height: 1.2;
text-shadow: 0 8px 18px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.contactus .hero-luxury h1 span {
color: var(--rich-gold);
border-bottom: 2px solid var(--rich-gold);
padding-bottom: 0.1rem;
}
.contactus .hero-divider {
width: 160px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);
margin: 1.8rem auto;
border-radius: 3px;
}
.contactus .hero-text {
font-size: 1.3rem;
font-weight: 350;
opacity: 0.95;
max-width: 650px;
margin: 0 auto;
font-style: italic;
}
/* ===== CONTACT CARDS – ART GALLERY ===== */
.contactus .section-crystal {
padding: 5rem 0 3rem;
background: linear-gradient(to bottom, var(--ivory), #fffbf5);
}
.contactus .contact-masterpiece {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media (max-width: 1000px) {
.contactus .contact-masterpiece {
grid-template-columns: 1fr;
}
}
/* info card – like jewelry */
.contactus .info-art {
background: white;
border-radius: var(--border-radius-l);
padding: 3rem 2.2rem;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
position: relative;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
background: linear-gradient(145deg, #fffdfa, #ffffff);
}
.contactus .info-art:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: var(--shadow-gold);
border-color: var(--rich-gold);
}
.contactus .info-art::before {
content: "✦ ✦ ✦";
position: absolute;
top: 20px;
right: 30px;
font-size: 0.9rem;
color: var(--rich-gold);
letter-spacing: 6px;
opacity: 0.6;
}
.contactus .info-item-lux {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.3rem 1.2rem;
margin-bottom: 0.6rem;
border-radius: 1.8rem;
transition: 0.3s;
border: 1px solid transparent;
}
.contactus .info-item-lux:hover {
background: #fef8f0;
border-color: #f0e1ce;
box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);
transform: translateX(-8px);
}
.contactus .icon-crystal {
width: 64px;
height: 64px;
background: rgba(200,154,94,0.08);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.8rem;
transition: 0.25s;
flex-shrink: 0;
}
.contactus .info-item-lux:hover .icon-crystal {
background: var(--deep-burgundy);
color: white;
border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.contactus .social-luxury {
display: flex;
gap: 0.8rem;
margin-top: 2.2rem;
}
.contactus .social-luxury a {
width: 52px;
height: 52px;
background: #f5ede5;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.contactus .social-luxury a:hover {
background: var(--deep-burgundy);
color: var(--rich-gold);
border-radius: 30% 70% 30% 70%;
transform: scale(1.12) rotate(5deg);
border-color: var(--rich-gold);
}
/* right card – hours & ambiance (NO FORM) */
.contactus .hours-boutique {
background: linear-gradient(145deg, #1e1c1d, #2a2425);
border-radius: var(--border-radius-l);
padding: 3rem 2.5rem;
box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);
border: 1px solid rgba(200,154,94,0.4);
position: relative;
overflow: hidden;
color: white;
}
.contactus .hours-boutique::after {
content: "⏣";
position: absolute;
bottom: -30px;
left: -30px;
font-size: 14rem;
color: rgba(200,154,94,0.1);
font-family: 'aljazerabold';
transform: rotate(20deg);
pointer-events: none;
}
.contactus .gold-stroke {
color: var(--rich-gold);
font-weight: 700;
}
.contactus .time-piece {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 1.5rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(229,194,159,0.2);
border-radius: 1.5rem;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: 0.2s;
}
.contactus .time-piece:hover {
background: rgba(200,154,94,0.1);
border-color: var(--rich-gold);
transform: scale(1.02);
}
.contactus .day {
font-weight: 600;
display: flex;
gap: 0.7rem;
align-items: center;
}
.contactus .hours {
background: rgba(255,255,255,0.1);
padding: 0.3rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
direction: ltr;
display: inline-block;
color: var(--soft-gold);
font-weight: 600;
}
.contactus .emergency-contact {
margin-top: 2.2rem;
background: rgba(200,154,94,0.12);
border-right: 5px solid var(--rich-gold);
padding: 1.4rem 1.8rem;
border-radius: 1.2rem;
font-family: 'aljazerabold', 'aljazerabold';
display: flex;
gap: 1.2rem;
align-items: center;
}
/* ===== MAP – LUXURY FRAME ===== */
.contactus .map-container {
position: relative;
margin: 2rem auto 4rem;
border-radius: 2.8rem;
overflow: hidden;
box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);
border: 6px solid white;
height: 450px;
max-width: 1300px;
}
/* ===== BANK ACCOUNTS – OPULENT ===== */
.contactus .bank-gallery {
background: var(--cream);
padding: 5rem 0;
position: relative;
}
.contactus .bank-card-premium {
background: white;
border-radius: 2.2rem;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
border-bottom: 6px solid var(--deep-burgundy);
transition: 0.35s;
position: relative;
overflow: hidden;
}
.contactus .bank-card-premium::before {
content: "●";
position: absolute;
top: -20px; right: -20px;
font-size: 10rem;
color: rgba(200,154,94,0.04);
transform: rotate(25deg);
}
.contactus .bank-card-premium:hover {
transform: translateY(-15px);
border-bottom-color: var(--rich-gold);
box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);
}
.contactus .copy-elegant {
background: transparent;
border: 1px solid var(--deep-burgundy);
color: var(--deep-burgundy);
padding: 0.6rem 1.8rem;
border-radius: 3rem;
font-weight: 600;
transition: 0.25s;
cursor: pointer;
font-size: 1.25rem;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.contactus .copy-elegant:hover {
background: var(--deep-burgundy);
color: white;
border-color: var(--rich-gold);
}
/* ===== FOOTER – DEEP & WARM ===== */
.contactus .footer-opulent {
background: #1a1819;
color: #ccc2ba;
padding: 4rem 0 2rem;
border-top: 6px solid var(--rich-gold);
}
/* UTILITIES (prefixed) */
.contactus .dir-ltr { direction: ltr; }
.contactus .text-gold { color: var(--rich-gold); }
.contactus .bg-ivory { background-color: var(--ivory); }
.contactus .rounded-full { border-radius: 9999px; }
.contactus .no-form .contact-form,
.contactus .contact-form { display: none; } /* ensure no form appears */
/* responsive */
@media (max-width: 768px) {
.contactus .hero-luxury h1 { font-size: 3rem; }
}
/* hide any global form remnants */
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
صُلب العطاء
الحسابات البنكية
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)
VİCDAN DERحساب USD
TR28 0020 9000 0060 8576 0000 20
نسخ الآيبان
VİCDAN DERحساب TRY
TR55 0020 9000 0060 8576 0000 19
نسخ الآيبان
// initialize AOS inside .contactus scope (it's global but fine)
AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });
// toggle functions remain (they target ids inside .contactus)
function toggleMobileMenu() {
const overlay = document.getElementById('mobile-overlay');
const menu = document.getElementById('mobile-menu');
if (overlay && menu) {
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 20);
menu.classList.remove('translate-x-full');
} else {
overlay.classList.add('opacity-0');
menu.classList.add('translate-x-full');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
}
function toggleCart() { /* dummy */ }
window.copyPremium = function(iban) {
navigator.clipboard.writeText(iban);
alert('✨ تم نسخ الآيبان: ' + iban);
};
// hide any potential form elements globally
document.querySelectorAll('.contact-form, form, [type="submit"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');
/* ensure mobile menu hidden at start */
#mobile-overlay, #mobile-menu { display: none; }
.contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; }
/* but we manage with js toggling, keep base hidden */
#mobile-overlay, #mobile-menu { display: none; }
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
') (Line: 110)
gavias_content_builder_render_element('gva_row', Array, '
باب العطاء مفتوح
تبرع الأن
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
اتصل بنا | وجدان الخيرية – تصميم مميز
/* ===== LUXURY DESIGN SYSTEM – "وجدان" : ALL RULES UNDER .contactus PREFIX ===== */
.contactus * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about_page .reveal {
opacity: 1;
transform: translateY(30px);
transition: all 0.8s ease;
}
.contactus {
--deep-burgundy: #5c1e2a;
--rich-gold: #c89a5e;
--soft-gold: #e5c29f;
--ivory: #fffcf7;
--cream: #faf3ea;
--charcoal: #2c2a2b;
--olive-sage: #7a8b7a;
--shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);
--shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);
--border-radius-l: 2.5rem;
--border-radius-m: 1.8rem;
--border-radius-s: 1.2rem;
--font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';
font-family: var(--font-primary);
background-color: var(--ivory);
color: var(--charcoal);
line-height: 1.6;
overflow-x: hidden;
position: relative;
display: block;
width: 100%;
}
.contactus .vicdan-wrapper {
position: relative;
}
.contactus .container {
width: 90%;
max-width: 1300px;
margin: 0 auto;
}
/* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */
.contactus .top-bar {
background: #1e1c1d;
color: rgba(255, 255, 255, 0.7);
padding: 0.6rem 0;
font-size: 0.85rem;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(200, 154, 94, 0.4);
}
.contactus .top-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.contactus .top-bar-link {
color: #e0d6cc;
text-decoration: none;
margin-left: 1.2rem;
transition: color 0.25s;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.contactus .top-bar-link:hover {
color: var(--rich-gold);
}
/* ===== HEADER – ELEGANT TRANSPARENCY ===== */
.contactus .main-header {
background: rgba(255, 252, 245, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(200, 154, 94, 0.2);
padding: 0.5rem 0;
position: sticky;
top: 0;
z-index: 50;
}
.contactus .logo-title {
font-size: 2rem;
font-weight: 800;
color: var(--deep-burgundy);
line-height: 1;
letter-spacing: -0.02em;
text-shadow: 0 2px 4px rgba(92,30,42,0.06);
}
.contactus .logo-subtitle {
font-size: 0.7rem;
color: var(--rich-gold);
font-weight: 600;
letter-spacing: 3px;
text-transform: uppercase;
margin-top: -0.3rem;
}
.contactus .nav-item {
position: relative;
padding: 0.6rem 1.2rem;
border-radius: 3rem;
font-weight: 500;
color: #3e3a37;
transition: 0.2s;
cursor: pointer;
}
.contactus .nav-item:hover {
background: rgba(92, 30, 42, 0.05);
color: var(--deep-burgundy);
}
.contactus .nav-dropdown {
position: absolute;
top: 120%;
right: 0;
background: white;
min-width: 200px;
border-radius: 1.2rem;
padding: 0.8rem 0;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
opacity: 0;
visibility: hidden;
transition: 0.25s;
}
.contactus .nav-item.group:hover .nav-dropdown {
opacity: 1;
visibility: visible;
top: 140%;
}
.contactus .dropdown-link {
display: block;
padding: 0.6rem 1.6rem;
color: #4a4643;
text-decoration: none;
font-size: 0.9rem;
}
.contactus .dropdown-link:hover {
background: #fff3e4;
color: var(--deep-burgundy);
}
/* ===== HERO – POETRY IN MOTION ===== */
.contactus .hero-luxury {
position: relative;
height: 500px;
background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%),
url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
background-blend-mode: multiply;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
isolation: isolate;
}
.contactus .hero-luxury::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);
z-index: 1;
}
.contactus .hero-content {
position: relative;
z-index: 3;
max-width: 900px;
padding: 0 1.5rem;
}
.contactus .gold-flourish {
display: flex;
align-items: center;
justify-content: center;
gap: 0.8rem;
margin-bottom: 1.2rem;
}
.contactus .gold-flourish i {
color: var(--rich-gold);
font-size: 1.3rem;
text-shadow: 0 0 10px rgba(200,154,94,0.5);
}
.contactus .hero-badge {
display: inline-block;
background: rgba(255,255,255,0.12);
backdrop-filter: blur(8px);
border: 1px solid rgba(255,215,150,0.4);
padding: 0.5rem 2rem;
border-radius: 4rem;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 3px;
color: var(--soft-gold);
margin-bottom: 1.8rem;
}
.contactus .hero-luxury h1 {
font-size: 4.8rem;
font-weight: 800;
font-family: 'aljazerabold', 'aljazerabold';
line-height: 1.2;
text-shadow: 0 8px 18px rgba(0,0,0,0.25);
margin-bottom: 0.5rem;
}
.contactus .hero-luxury h1 span {
color: var(--rich-gold);
border-bottom: 2px solid var(--rich-gold);
padding-bottom: 0.1rem;
}
.contactus .hero-divider {
width: 160px;
height: 3px;
background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);
margin: 1.8rem auto;
border-radius: 3px;
}
.contactus .hero-text {
font-size: 1.3rem;
font-weight: 350;
opacity: 0.95;
max-width: 650px;
margin: 0 auto;
font-style: italic;
}
/* ===== CONTACT CARDS – ART GALLERY ===== */
.contactus .section-crystal {
padding: 5rem 0 3rem;
background: linear-gradient(to bottom, var(--ivory), #fffbf5);
}
.contactus .contact-masterpiece {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
@media (max-width: 1000px) {
.contactus .contact-masterpiece {
grid-template-columns: 1fr;
}
}
/* info card – like jewelry */
.contactus .info-art {
background: white;
border-radius: var(--border-radius-l);
padding: 3rem 2.2rem;
box-shadow: var(--shadow-elegant);
border: 1px solid rgba(200,154,94,0.2);
position: relative;
transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
backdrop-filter: blur(10px);
background: linear-gradient(145deg, #fffdfa, #ffffff);
}
.contactus .info-art:hover {
transform: translateY(-12px) scale(1.01);
box-shadow: var(--shadow-gold);
border-color: var(--rich-gold);
}
.contactus .info-art::before {
content: "✦ ✦ ✦";
position: absolute;
top: 20px;
right: 30px;
font-size: 0.9rem;
color: var(--rich-gold);
letter-spacing: 6px;
opacity: 0.6;
}
.contactus .info-item-lux {
display: flex;
gap: 1.5rem;
align-items: flex-start;
padding: 1.3rem 1.2rem;
margin-bottom: 0.6rem;
border-radius: 1.8rem;
transition: 0.3s;
border: 1px solid transparent;
}
.contactus .info-item-lux:hover {
background: #fef8f0;
border-color: #f0e1ce;
box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);
transform: translateX(-8px);
}
.contactus .icon-crystal {
width: 64px;
height: 64px;
background: rgba(200,154,94,0.08);
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.8rem;
transition: 0.25s;
flex-shrink: 0;
}
.contactus .info-item-lux:hover .icon-crystal {
background: var(--deep-burgundy);
color: white;
border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
}
.contactus .social-luxury {
display: flex;
gap: 0.8rem;
margin-top: 2.2rem;
}
.contactus .social-luxury a {
width: 52px;
height: 52px;
background: #f5ede5;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
color: var(--deep-burgundy);
font-size: 1.5rem;
transition: all 0.3s;
border: 1px solid transparent;
}
.contactus .social-luxury a:hover {
background: var(--deep-burgundy);
color: var(--rich-gold);
border-radius: 30% 70% 30% 70%;
transform: scale(1.12) rotate(5deg);
border-color: var(--rich-gold);
}
/* right card – hours & ambiance (NO FORM) */
.contactus .hours-boutique {
background: linear-gradient(145deg, #1e1c1d, #2a2425);
border-radius: var(--border-radius-l);
padding: 3rem 2.5rem;
box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);
border: 1px solid rgba(200,154,94,0.4);
position: relative;
overflow: hidden;
color: white;
}
.contactus .hours-boutique::after {
content: "⏣";
position: absolute;
bottom: -30px;
left: -30px;
font-size: 14rem;
color: rgba(200,154,94,0.1);
font-family: 'aljazerabold';
transform: rotate(20deg);
pointer-events: none;
}
.contactus .gold-stroke {
color: var(--rich-gold);
font-weight: 700;
}
.contactus .time-piece {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.1rem 1.5rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(229,194,159,0.2);
border-radius: 1.5rem;
margin-bottom: 1rem;
backdrop-filter: blur(10px);
transition: 0.2s;
}
.contactus .time-piece:hover {
background: rgba(200,154,94,0.1);
border-color: var(--rich-gold);
transform: scale(1.02);
}
.contactus .day {
font-weight: 600;
display: flex;
gap: 0.7rem;
align-items: center;
}
.contactus .hours {
background: rgba(255,255,255,0.1);
padding: 0.3rem 1.2rem;
border-radius: 2rem;
font-size: 0.9rem;
direction: ltr;
display: inline-block;
color: var(--soft-gold);
font-weight: 600;
}
.contactus .emergency-contact {
margin-top: 2.2rem;
background: rgba(200,154,94,0.12);
border-right: 5px solid var(--rich-gold);
padding: 1.4rem 1.8rem;
border-radius: 1.2rem;
font-family: 'aljazerabold', 'aljazerabold';
display: flex;
gap: 1.2rem;
align-items: center;
}
/* ===== MAP – LUXURY FRAME ===== */
.contactus .map-container {
position: relative;
margin: 2rem auto 4rem;
border-radius: 2.8rem;
overflow: hidden;
box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);
border: 6px solid white;
height: 450px;
max-width: 1300px;
}
/* ===== BANK ACCOUNTS – OPULENT ===== */
.contactus .bank-gallery {
background: var(--cream);
padding: 5rem 0;
position: relative;
}
.contactus .bank-card-premium {
background: white;
border-radius: 2.2rem;
padding: 2.5rem 2rem;
box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
border-bottom: 6px solid var(--deep-burgundy);
transition: 0.35s;
position: relative;
overflow: hidden;
}
.contactus .bank-card-premium::before {
content: "●";
position: absolute;
top: -20px; right: -20px;
font-size: 10rem;
color: rgba(200,154,94,0.04);
transform: rotate(25deg);
}
.contactus .bank-card-premium:hover {
transform: translateY(-15px);
border-bottom-color: var(--rich-gold);
box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);
}
.contactus .copy-elegant {
background: transparent;
border: 1px solid var(--deep-burgundy);
color: var(--deep-burgundy);
padding: 0.6rem 1.8rem;
border-radius: 3rem;
font-weight: 600;
transition: 0.25s;
cursor: pointer;
font-size: 1.25rem;
text-align: center;
margin-right: auto;
margin-left: auto;
display: block;
}
.contactus .copy-elegant:hover {
background: var(--deep-burgundy);
color: white;
border-color: var(--rich-gold);
}
/* ===== FOOTER – DEEP & WARM ===== */
.contactus .footer-opulent {
background: #1a1819;
color: #ccc2ba;
padding: 4rem 0 2rem;
border-top: 6px solid var(--rich-gold);
}
/* UTILITIES (prefixed) */
.contactus .dir-ltr { direction: ltr; }
.contactus .text-gold { color: var(--rich-gold); }
.contactus .bg-ivory { background-color: var(--ivory); }
.contactus .rounded-full { border-radius: 9999px; }
.contactus .no-form .contact-form,
.contactus .contact-form { display: none; } /* ensure no form appears */
/* responsive */
@media (max-width: 768px) {
.contactus .hero-luxury h1 { font-size: 3rem; }
}
/* hide any global form remnants */
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
صُلب العطاء
الحسابات البنكية
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)
VİCDAN DERحساب USD
TR28 0020 9000 0060 8576 0000 20
نسخ الآيبان
VİCDAN DERحساب TRY
TR55 0020 9000 0060 8576 0000 19
نسخ الآيبان
// initialize AOS inside .contactus scope (it's global but fine)
AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });
// toggle functions remain (they target ids inside .contactus)
function toggleMobileMenu() {
const overlay = document.getElementById('mobile-overlay');
const menu = document.getElementById('mobile-menu');
if (overlay && menu) {
if (overlay.classList.contains('hidden')) {
overlay.classList.remove('hidden');
setTimeout(() => overlay.classList.remove('opacity-0'), 20);
menu.classList.remove('translate-x-full');
} else {
overlay.classList.add('opacity-0');
menu.classList.add('translate-x-full');
setTimeout(() => overlay.classList.add('hidden'), 300);
}
}
}
function toggleCart() { /* dummy */ }
window.copyPremium = function(iban) {
navigator.clipboard.writeText(iban);
alert('✨ تم نسخ الآيبان: ' + iban);
};
// hide any potential form elements globally
document.querySelectorAll('.contact-form, form, [type="submit"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');
/* ensure mobile menu hidden at start */
#mobile-overlay, #mobile-menu { display: none; }
.contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; }
/* but we manage with js toggling, keep base hidden */
#mobile-overlay, #mobile-menu { display: none; }
.contact-form, form, [type="submit"], input, select, textarea, .form-group {
display: none !important;
}
.map-container iframe { display: block; }
') (Line: 62)
gavias_content_builder_render_el(Array) (Line: 22)
gavias_content_builder_frontend('[{"settings":{"element":"gva_row","bg_particles":"off","bg_position":"center top","bg_repeat":"no-repeat","bg_attachment":"scroll","bg_size":"cover","style_space":"remove_margin remove_padding remove_padding_col","layout":"container-fw","padding_top":"0","margin_top":"0","padding_bottom":"0","margin_bottom":"0","class":"aboutus"},"columns":[{"settings":{"element":"gva_column"},"col_lg":12,"elements":[{"settings":{"content":"\r\n\r\n \r\n \r\n \r\n \r\n \r\n باب العطاء مفتوح\r\n\r\n تبرع الأن\r\n\r\n \r\n \r\n نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.\r\n\r\n \r\n \r\n \r\n \r\n\t\t","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"},{"settings":{"content":"\r\n\r\n\r\n \r\n \r\n \r\n اتصل بنا | وجدان الخيرية – تصميم مميز\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n /* ===== LUXURY DESIGN SYSTEM – \"وجدان\" : ALL RULES UNDER .contactus PREFIX ===== */\r\n .contactus * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n.about_page .reveal {\r\n opacity: 1;\r\n transform: translateY(30px);\r\n transition: all 0.8s ease;\r\n}\r\n .contactus {\r\n --deep-burgundy: #5c1e2a;\r\n --rich-gold: #c89a5e;\r\n --soft-gold: #e5c29f;\r\n --ivory: #fffcf7;\r\n --cream: #faf3ea;\r\n --charcoal: #2c2a2b;\r\n --olive-sage: #7a8b7a;\r\n --shadow-elegant: 0 30px 50px -20px rgba(44, 42, 43, 0.12);\r\n --shadow-gold: 0 25px 40px -15px rgba(200, 154, 94, 0.25);\r\n --border-radius-l: 2.5rem;\r\n --border-radius-m: 1.8rem;\r\n --border-radius-s: 1.2rem;\r\n --font-primary: 'IBM Plex Sans Arabic', 'aljazerabold', 'aljazerabold';\r\n\r\n font-family: var(--font-primary);\r\n background-color: var(--ivory);\r\n color: var(--charcoal);\r\n line-height: 1.6;\r\n overflow-x: hidden;\r\n position: relative;\r\n display: block;\r\n width: 100%;\r\n }\r\n\r\n .contactus .vicdan-wrapper {\r\n position: relative;\r\n }\r\n\r\n .contactus .container {\r\n width: 90%;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n }\r\n\r\n /* ===== REFINED TOP BAR (placed inside .contactus for isolation) ===== */\r\n .contactus .top-bar {\r\n background: #1e1c1d;\r\n color: rgba(255, 255, 255, 0.7);\r\n padding: 0.6rem 0;\r\n font-size: 0.85rem;\r\n letter-spacing: 0.5px;\r\n border-bottom: 1px solid rgba(200, 154, 94, 0.4);\r\n }\r\n .contactus .top-bar .container {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n }\r\n .contactus .top-bar-link {\r\n color: #e0d6cc;\r\n text-decoration: none;\r\n margin-left: 1.2rem;\r\n transition: color 0.25s;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 0.4rem;\r\n }\r\n .contactus .top-bar-link:hover {\r\n color: var(--rich-gold);\r\n }\r\n\r\n /* ===== HEADER – ELEGANT TRANSPARENCY ===== */\r\n .contactus .main-header {\r\n background: rgba(255, 252, 245, 0.85);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-bottom: 1px solid rgba(200, 154, 94, 0.2);\r\n padding: 0.5rem 0;\r\n position: sticky;\r\n top: 0;\r\n z-index: 50;\r\n }\r\n .contactus .logo-title {\r\n font-size: 2rem;\r\n font-weight: 800;\r\n color: var(--deep-burgundy);\r\n line-height: 1;\r\n letter-spacing: -0.02em;\r\n text-shadow: 0 2px 4px rgba(92,30,42,0.06);\r\n }\r\n .contactus .logo-subtitle {\r\n font-size: 0.7rem;\r\n color: var(--rich-gold);\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n text-transform: uppercase;\r\n margin-top: -0.3rem;\r\n }\r\n .contactus .nav-item {\r\n position: relative;\r\n padding: 0.6rem 1.2rem;\r\n border-radius: 3rem;\r\n font-weight: 500;\r\n color: #3e3a37;\r\n transition: 0.2s;\r\n cursor: pointer;\r\n }\r\n .contactus .nav-item:hover {\r\n background: rgba(92, 30, 42, 0.05);\r\n color: var(--deep-burgundy);\r\n }\r\n .contactus .nav-dropdown {\r\n position: absolute;\r\n top: 120%;\r\n right: 0;\r\n background: white;\r\n min-width: 200px;\r\n border-radius: 1.2rem;\r\n padding: 0.8rem 0;\r\n box-shadow: var(--shadow-elegant);\r\n border: 1px solid rgba(200,154,94,0.2);\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: 0.25s;\r\n }\r\n .contactus .nav-item.group:hover .nav-dropdown {\r\n opacity: 1;\r\n visibility: visible;\r\n top: 140%;\r\n }\r\n .contactus .dropdown-link {\r\n display: block;\r\n padding: 0.6rem 1.6rem;\r\n color: #4a4643;\r\n text-decoration: none;\r\n font-size: 0.9rem;\r\n }\r\n .contactus .dropdown-link:hover {\r\n background: #fff3e4;\r\n color: var(--deep-burgundy);\r\n }\r\n\r\n /* ===== HERO – POETRY IN MOTION ===== */\r\n .contactus .hero-luxury {\r\n position: relative;\r\n height: 500px;\r\n background: linear-gradient(105deg, rgba(92,30,42,0.92) 20%, rgba(122,139,122,0.5) 100%), \r\n url('https://images.unsplash.com/photo-1532629345422-7515f3d16bb6?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;\r\n background-blend-mode: multiply;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n text-align: center;\r\n color: white;\r\n isolation: isolate;\r\n }\r\n .contactus .hero-luxury::after {\r\n content: \"\";\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(circle at 70% 50%, rgba(0,0,0,0.1) 0%, transparent 70%);\r\n z-index: 1;\r\n }\r\n .contactus .hero-content {\r\n position: relative;\r\n z-index: 3;\r\n max-width: 900px;\r\n padding: 0 1.5rem;\r\n }\r\n .contactus .gold-flourish {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 0.8rem;\r\n margin-bottom: 1.2rem;\r\n }\r\n .contactus .gold-flourish i {\r\n color: var(--rich-gold);\r\n font-size: 1.3rem;\r\n text-shadow: 0 0 10px rgba(200,154,94,0.5);\r\n }\r\n .contactus .hero-badge {\r\n display: inline-block;\r\n background: rgba(255,255,255,0.12);\r\n backdrop-filter: blur(8px);\r\n border: 1px solid rgba(255,215,150,0.4);\r\n padding: 0.5rem 2rem;\r\n border-radius: 4rem;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n letter-spacing: 3px;\r\n color: var(--soft-gold);\r\n margin-bottom: 1.8rem;\r\n }\r\n .contactus .hero-luxury h1 {\r\n font-size: 4.8rem;\r\n font-weight: 800;\r\n font-family: 'aljazerabold', 'aljazerabold';\r\n line-height: 1.2;\r\n text-shadow: 0 8px 18px rgba(0,0,0,0.25);\r\n margin-bottom: 0.5rem;\r\n }\r\n .contactus .hero-luxury h1 span {\r\n color: var(--rich-gold);\r\n border-bottom: 2px solid var(--rich-gold);\r\n padding-bottom: 0.1rem;\r\n }\r\n .contactus .hero-divider {\r\n width: 160px;\r\n height: 3px;\r\n background: linear-gradient(90deg, transparent, var(--rich-gold), var(--soft-gold), transparent);\r\n margin: 1.8rem auto;\r\n border-radius: 3px;\r\n }\r\n .contactus .hero-text {\r\n font-size: 1.3rem;\r\n font-weight: 350;\r\n opacity: 0.95;\r\n max-width: 650px;\r\n margin: 0 auto;\r\n font-style: italic;\r\n }\r\n\r\n /* ===== CONTACT CARDS – ART GALLERY ===== */\r\n .contactus .section-crystal {\r\n padding: 5rem 0 3rem;\r\n background: linear-gradient(to bottom, var(--ivory), #fffbf5);\r\n }\r\n .contactus .contact-masterpiece {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 2.5rem;\r\n }\r\n @media (max-width: 1000px) {\r\n .contactus .contact-masterpiece {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n\r\n /* info card – like jewelry */\r\n .contactus .info-art {\r\n background: white;\r\n border-radius: var(--border-radius-l);\r\n padding: 3rem 2.2rem;\r\n box-shadow: var(--shadow-elegant);\r\n border: 1px solid rgba(200,154,94,0.2);\r\n position: relative;\r\n transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);\r\n backdrop-filter: blur(10px);\r\n background: linear-gradient(145deg, #fffdfa, #ffffff);\r\n }\r\n .contactus .info-art:hover {\r\n transform: translateY(-12px) scale(1.01);\r\n box-shadow: var(--shadow-gold);\r\n border-color: var(--rich-gold);\r\n }\r\n .contactus .info-art::before {\r\n content: \"✦ ✦ ✦\";\r\n position: absolute;\r\n top: 20px;\r\n right: 30px;\r\n font-size: 0.9rem;\r\n color: var(--rich-gold);\r\n letter-spacing: 6px;\r\n opacity: 0.6;\r\n }\r\n\r\n .contactus .info-item-lux {\r\n display: flex;\r\n gap: 1.5rem;\r\n align-items: flex-start;\r\n padding: 1.3rem 1.2rem;\r\n margin-bottom: 0.6rem;\r\n border-radius: 1.8rem;\r\n transition: 0.3s;\r\n border: 1px solid transparent;\r\n }\r\n .contactus .info-item-lux:hover {\r\n background: #fef8f0;\r\n border-color: #f0e1ce;\r\n box-shadow: 0 12px 22px -14px rgba(92,30,42,0.12);\r\n transform: translateX(-8px);\r\n }\r\n .contactus .icon-crystal {\r\n width: 64px;\r\n height: 64px;\r\n background: rgba(200,154,94,0.08);\r\n border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--deep-burgundy);\r\n font-size: 1.8rem;\r\n transition: 0.25s;\r\n flex-shrink: 0;\r\n }\r\n .contactus .info-item-lux:hover .icon-crystal {\r\n background: var(--deep-burgundy);\r\n color: white;\r\n border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;\r\n }\r\n\r\n .contactus .social-luxury {\r\n display: flex;\r\n gap: 0.8rem;\r\n margin-top: 2.2rem;\r\n }\r\n .contactus .social-luxury a {\r\n width: 52px;\r\n height: 52px;\r\n background: #f5ede5;\r\n border-radius: 16px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--deep-burgundy);\r\n font-size: 1.5rem;\r\n transition: all 0.3s;\r\n border: 1px solid transparent;\r\n }\r\n .contactus .social-luxury a:hover {\r\n background: var(--deep-burgundy);\r\n color: var(--rich-gold);\r\n border-radius: 30% 70% 30% 70%;\r\n transform: scale(1.12) rotate(5deg);\r\n border-color: var(--rich-gold);\r\n }\r\n\r\n /* right card – hours & ambiance (NO FORM) */\r\n .contactus .hours-boutique {\r\n background: linear-gradient(145deg, #1e1c1d, #2a2425);\r\n border-radius: var(--border-radius-l);\r\n padding: 3rem 2.5rem;\r\n box-shadow: 0 35px 55px -15px rgba(0,0,0,0.35);\r\n border: 1px solid rgba(200,154,94,0.4);\r\n position: relative;\r\n overflow: hidden;\r\n color: white;\r\n }\r\n .contactus .hours-boutique::after {\r\n content: \"⏣\";\r\n position: absolute;\r\n bottom: -30px;\r\n left: -30px;\r\n font-size: 14rem;\r\n color: rgba(200,154,94,0.1);\r\n font-family: 'aljazerabold';\r\n transform: rotate(20deg);\r\n pointer-events: none;\r\n }\r\n .contactus .gold-stroke {\r\n color: var(--rich-gold);\r\n font-weight: 700;\r\n }\r\n .contactus .time-piece {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n padding: 1.1rem 1.5rem;\r\n background: rgba(255,255,255,0.03);\r\n border: 1px solid rgba(229,194,159,0.2);\r\n border-radius: 1.5rem;\r\n margin-bottom: 1rem;\r\n backdrop-filter: blur(10px);\r\n transition: 0.2s;\r\n }\r\n .contactus .time-piece:hover {\r\n background: rgba(200,154,94,0.1);\r\n border-color: var(--rich-gold);\r\n transform: scale(1.02);\r\n }\r\n .contactus .day {\r\n font-weight: 600;\r\n display: flex;\r\n gap: 0.7rem;\r\n align-items: center;\r\n }\r\n .contactus .hours {\r\n background: rgba(255,255,255,0.1);\r\n padding: 0.3rem 1.2rem;\r\n border-radius: 2rem;\r\n font-size: 0.9rem;\r\n direction: ltr;\r\n display: inline-block;\r\n color: var(--soft-gold);\r\n font-weight: 600;\r\n }\r\n\r\n .contactus .emergency-contact {\r\n margin-top: 2.2rem;\r\n background: rgba(200,154,94,0.12);\r\n border-right: 5px solid var(--rich-gold);\r\n padding: 1.4rem 1.8rem;\r\n border-radius: 1.2rem;\r\nfont-family: 'aljazerabold', 'aljazerabold';\r\n display: flex;\r\n gap: 1.2rem;\r\n align-items: center;\r\n }\r\n\r\n /* ===== MAP – LUXURY FRAME ===== */\r\n .contactus .map-container {\r\n position: relative;\r\n margin: 2rem auto 4rem;\r\n border-radius: 2.8rem;\r\n overflow: hidden;\r\n box-shadow: 0 30px 50px -15px rgba(92,30,42,0.25);\r\n border: 6px solid white;\r\n height: 450px;\r\n max-width: 1300px;\r\n }\r\n\r\n /* ===== BANK ACCOUNTS – OPULENT ===== */\r\n .contactus .bank-gallery {\r\n background: var(--cream);\r\n padding: 5rem 0;\r\n position: relative;\r\n }\r\n .contactus .bank-card-premium {\r\n background: white;\r\n border-radius: 2.2rem;\r\n padding: 2.5rem 2rem;\r\n box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);\r\n border-bottom: 6px solid var(--deep-burgundy);\r\n transition: 0.35s;\r\n position: relative;\r\n overflow: hidden;\r\n }\r\n .contactus .bank-card-premium::before {\r\n content: \"●\";\r\n position: absolute;\r\n top: -20px; right: -20px;\r\n font-size: 10rem;\r\n color: rgba(200,154,94,0.04);\r\n transform: rotate(25deg);\r\n }\r\n .contactus .bank-card-premium:hover {\r\n transform: translateY(-15px);\r\n border-bottom-color: var(--rich-gold);\r\n box-shadow: 0 35px 55px -15px rgba(200,154,94,0.3);\r\n }\r\n .contactus .copy-elegant {\r\n background: transparent;\r\n border: 1px solid var(--deep-burgundy);\r\n color: var(--deep-burgundy);\r\n padding: 0.6rem 1.8rem;\r\n border-radius: 3rem;\r\n font-weight: 600;\r\n transition: 0.25s;\r\n cursor: pointer;\r\n font-size: 1.25rem;\r\n text-align: center;\r\n margin-right: auto;\r\n margin-left: auto;\r\n display: block;\r\n }\r\n .contactus .copy-elegant:hover {\r\n background: var(--deep-burgundy);\r\n color: white;\r\n border-color: var(--rich-gold);\r\n }\r\n\r\n /* ===== FOOTER – DEEP & WARM ===== */\r\n .contactus .footer-opulent {\r\n background: #1a1819;\r\n color: #ccc2ba;\r\n padding: 4rem 0 2rem;\r\n border-top: 6px solid var(--rich-gold);\r\n }\r\n\r\n /* UTILITIES (prefixed) */\r\n .contactus .dir-ltr { direction: ltr; }\r\n .contactus .text-gold { color: var(--rich-gold); }\r\n .contactus .bg-ivory { background-color: var(--ivory); }\r\n .contactus .rounded-full { border-radius: 9999px; }\r\n .contactus .no-form .contact-form, \r\n .contactus .contact-form { display: none; } /* ensure no form appears */\r\n\r\n /* responsive */\r\n @media (max-width: 768px) {\r\n .contactus .hero-luxury h1 { font-size: 3rem; }\r\n }\r\n\r\n /* hide any global form remnants */\r\n .contact-form, form, [type=\"submit\"], input, select, textarea, .form-group {\r\n display: none !important;\r\n }\r\n .map-container iframe { display: block; }\r\n \r\n\r\n\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n \r\n صُلب العطاء\r\n الحسابات البنكية\r\n•\tرمز السويفت : (ZKBATRIS)\r\n•\tإذن جمع المال : (1036918)\r\n \r\n \r\n \r\n \r\n \r\n VİCDAN DERحساب USD\r\n \r\n TR28 0020 9000 0060 8576 0000 20\r\n نسخ الآيبان\r\n \r\n \r\n \r\n \r\n VİCDAN DERحساب TRY\r\n \r\n TR55 0020 9000 0060 8576 0000 19\r\n نسخ الآيبان\r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n \r\n \r\n \r\n // initialize AOS inside .contactus scope (it's global but fine)\r\n AOS.init({ duration: 1000, once: true, easing: 'ease-out-cubic' });\r\n\r\n // toggle functions remain (they target ids inside .contactus)\r\n function toggleMobileMenu() {\r\n const overlay = document.getElementById('mobile-overlay');\r\n const menu = document.getElementById('mobile-menu');\r\n if (overlay && menu) {\r\n if (overlay.classList.contains('hidden')) {\r\n overlay.classList.remove('hidden');\r\n setTimeout(() => overlay.classList.remove('opacity-0'), 20);\r\n menu.classList.remove('translate-x-full');\r\n } else {\r\n overlay.classList.add('opacity-0');\r\n menu.classList.add('translate-x-full');\r\n setTimeout(() => overlay.classList.add('hidden'), 300);\r\n }\r\n }\r\n }\r\n function toggleCart() { /* dummy */ }\r\n window.copyPremium = function(iban) {\r\n navigator.clipboard.writeText(iban);\r\n alert('✨ تم نسخ الآيبان: ' + iban);\r\n };\r\n // hide any potential form elements globally\r\n document.querySelectorAll('.contact-form, form, [type=\"submit\"], input, select, textarea, .form-group').forEach(el => el.style.display = 'none');\r\n \r\n \r\n \r\n /* ensure mobile menu hidden at start */\r\n #mobile-overlay, #mobile-menu { display: none; }\r\n .contactus #mobile-overlay.hidden, .contactus #mobile-menu { display: block; } \r\n /* but we manage with js toggling, keep base hidden */\r\n #mobile-overlay, #mobile-menu { display: none; }\r\n .contact-form, form, [type=\"submit\"], input, select, textarea, .form-group {\r\n display: none !important;\r\n }\r\n .map-container iframe { display: block; }\r\n \r\n\r\n","animate_delay":"0"},"editing":false,"element_name":"gva_text_noeditor"}],"editing":false,"element_name":"gva_column"}],"editing":false,"element_name":"gva_row"}]') (Line: 47)
Drupal\gavias_content_builder\Plugin\Field\FieldFormatter\GaviasContentBuilderFormatter->viewElements(Object, 'ar') (Line: 89)
Drupal\Core\Field\FormatterBase->view(Object, 'ar') (Line: 263)
Drupal\Core\Entity\Entity\EntityViewDisplay->buildMultiple(Array) (Line: 351)
Drupal\Core\Entity\EntityViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 24)
Drupal\node\NodeViewBuilder->buildComponents(Array, Array, Array, 'full') (Line: 293)
Drupal\Core\Entity\EntityViewBuilder->buildMultiple(Array) (Line: 250)
Drupal\Core\Entity\EntityViewBuilder->build(Array)
call_user_func_array(Array, Array) (Line: 100)
Drupal\Core\Render\Renderer->doTrustedCallback(Array, Array, 'Render #pre_render callbacks must be methods of a class that implements \Drupal\Core\Security\TrustedCallbackInterface or be an anonymous function. The callback was %s. Support for this callback implementation is deprecated in 8.8.0 and will be removed in Drupal 9.0.0. See https://www.drupal.org/node/2966725', 'silenced_deprecation', 'Drupal\Core\Render\Element\RenderCallbackInterface') (Line: 781)
Drupal\Core\Render\Renderer->doCallback('#pre_render', Array, Array) (Line: 372)
Drupal\Core\Render\Renderer->doRender(Array, ) (Line: 200)
Drupal\Core\Render\Renderer->render(Array, ) (Line: 226)
Drupal\Core\Render\MainContent\HtmlRenderer->Drupal\Core\Render\MainContent\{closure}() (Line: 573)
Drupal\Core\Render\Renderer->executeInRenderContext(Object, Object) (Line: 227)
Drupal\Core\Render\MainContent\HtmlRenderer->prepare(Array, Object, Object) (Line: 117)
Drupal\Core\Render\MainContent\HtmlRenderer->renderResponse(Array, Object, Object) (Line: 90)
Drupal\Core\EventSubscriber\MainContentViewSubscriber->onViewRenderArray(Object, 'kernel.view', Object)
call_user_func(Array, Object, 'kernel.view', Object) (Line: 111)
Drupal\Component\EventDispatcher\ContainerAwareEventDispatcher->dispatch('kernel.view', Object) (Line: 156)
Symfony\Component\HttpKernel\HttpKernel->handleRaw(Object, 1) (Line: 68)
Symfony\Component\HttpKernel\HttpKernel->handle(Object, 1, 1) (Line: 57)
Drupal\Core\StackMiddleware\Session->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\KernelPreHandle->handle(Object, 1, 1) (Line: 191)
Drupal\page_cache\StackMiddleware\PageCache->fetch(Object, 1, 1) (Line: 128)
Drupal\page_cache\StackMiddleware\PageCache->lookup(Object, 1, 1) (Line: 82)
Drupal\page_cache\StackMiddleware\PageCache->handle(Object, 1, 1) (Line: 47)
Drupal\Core\StackMiddleware\ReverseProxyMiddleware->handle(Object, 1, 1) (Line: 52)
Drupal\Core\StackMiddleware\NegotiationMiddleware->handle(Object, 1, 1) (Line: 23)
Stack\StackedHttpKernel->handle(Object, 1, 1) (Line: 708)
Drupal\Core\DrupalKernel->handle(Object) (Line: 19)
نصغي لكم، ونشارككم الأمل. قنواتنا مشرعة لاستفساراتكم وكرم عطائكم.
• رمز السويفت : (ZKBATRIS)
• إذن جمع المال : (1036918)