/* Global MAS Technology - Enhanced Theme System */ /* CSS Variables for Theme Colors */ :root {/* Primary Colors */ --primary-50: #f0f9ff;--primary-100: #e0f2fe;--primary-200: #bae6fd;--primary-300: #7dd3fc;--primary-400: #38bdf8;--primary-500: #2a5298;--primary-600: #1e3c72;--primary-700: #1e40af;--primary-800: #1e3a8a;--primary-900: #1e3a8a;/* Secondary Colors */ --secondary-50: #f0fdf4;--secondary-100: #dcfce7;--secondary-200: #bbf7d0;--secondary-300: #86efac;--secondary-400: #4ade80;--secondary-500: #4CAF50;--secondary-600: #45a049;--secondary-700: #16a34a;--secondary-800: #15803d;--secondary-900: #14532d;/* Accent Colors */ --accent-gold: #fbbf24;--accent-orange: #f97316;--accent-purple: #8b5cf6;--accent-pink: #ec4899;/* Gradients */ --gradient-primary: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 50%, var(--secondary-500) 100%);--gradient-secondary: linear-gradient(135deg, var(--secondary-500) 0%, var(--accent-gold) 100%);--gradient-contact: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);--gradient-contact-dark: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);/* Shadows */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);--shadow-contact: 0 20px 40px -12px rgb(0 0 0 / 0.15);/* Transitions */ --transition-fast: 150ms ease-in-out;--transition-normal: 300ms ease-in-out;--transition-slow: 500ms ease-in-out} /* Dark Mode Variables */ [data-theme="dark"] {--bg-primary: #0f172a;--bg-secondary: #1e293b;--text-primary: #f1f5f9;--text-secondary: #cbd5e1;--border-color: #334155} /* Light Mode Variables */ [data-theme="light"], :root {--bg-primary: white;--bg-secondary: #f9fafb;--text-primary: #111827;--text-secondary: #6b7280;--border-color: #e5e7eb} /* Enhanced Glass Effect */ .glass-effect {backdrop-filter: blur(16px) saturate(180%);background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);box-shadow: var(--shadow-xl)} /* Enhanced Animations */ @keyframes float {0%, 100% {transform: translateY(0px) rotate(0deg)} 50% {transform: translateY(-20px) rotate(2deg)} } @keyframes fadeIn {from {opacity: 0} to {opacity: 1} } @keyframes slideUp {from {transform: translateY(30px);opacity: 0} to {transform: translateY(0);opacity: 1} } @keyframes slideInLeft {from {transform: translateX(-30px);opacity: 0} to {transform: translateX(0);opacity: 1} } @keyframes slideInRight {from {transform: translateX(30px);opacity: 0} to {transform: translateX(0);opacity: 1} } @keyframes scaleIn {from {transform: scale(0.9);opacity: 0} to {transform: scale(1);opacity: 1} } @keyframes pulse-glow {0%, 100% {box-shadow: 0 0 20px rgba(42, 82, 152, 0.3)} 50% {box-shadow: 0 0 40px rgba(42, 82, 152, 0.6)} } /* Animation Classes */ .animate-float {animation: float 6s ease-in-out infinite} .animate-fade-in {animation: fadeIn 0.5s ease-in-out} .animate-slide-up {animation: slideUp 0.5s ease-out} .animate-slide-in-left {animation: slideInLeft 0.6s ease-out} .animate-slide-in-right {animation: slideInRight 0.6s ease-out} .animate-scale-in {animation: scaleIn 0.5s ease-out} .animate-pulse-glow {animation: pulse-glow 2s ease-in-out infinite} /* Enhanced Button Styles */ .btn {display: inline-flex;align-items: center;justify-content: center;padding: 0.875rem 2.5rem;border-radius: 0.75rem;font-weight: 700;text-decoration: none;transition: all var(--transition-normal);cursor: pointer;border: none;position: relative;overflow: hidden;font-size: 1rem;line-height: 1.5;min-height: 3.5rem;text-transform: uppercase;letter-spacing: 0.05em;box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.1)} .btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left 0.6s ease} .btn:hover::before {left: 100%} .btn-primary {background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #4CAF50 100%);color: white;box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);border: 2px solid transparent} .btn-primary:hover {transform: translateY(-3px);box-shadow: 0 12px 35px rgba(30, 60, 114, 0.4);background: linear-gradient(135deg, #1e40af 0%, #2563eb 50%, #16a34a 100%)} .btn-secondary {background: linear-gradient(135deg, #4CAF50 0%, #22c55e 50%, #fbbf24 100%);color: white;box-shadow: 0 8px 25px rgba(76, 175, 80, 0.3);border: 2px solid transparent} .btn-secondary:hover {transform: translateY(-3px);box-shadow: 0 12px 35px rgba(76, 175, 80, 0.4);background: linear-gradient(135deg, #16a34a 0%, #10b981 50%, #f59e0b 100%)} .btn-outline {background: transparent;color: #1e3c72;border: 2px solid #1e3c72;box-shadow: 0 4px 14px rgba(30, 60, 114, 0.1)} .btn-outline:hover {background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);color: white;transform: translateY(-3px);box-shadow: 0 8px 25px rgba(30, 60, 114, 0.3);border-color: transparent} .btn-ghost {background: rgba(255, 255, 255, 0.15);color: white;backdrop-filter: blur(15px);border: 2px solid rgba(255, 255, 255, 0.2);box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1)} .btn-ghost:hover {background: rgba(255, 255, 255, 0.25);transform: translateY(-3px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);border-color: rgba(255, 255, 255, 0.3)} /* New button variants for better visibility */ .btn-white {background: white;color: #1e3c72;box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);border: 2px solid transparent} .btn-white:hover {background: #f8fafc;color: #1e40af;transform: translateY(-3px);box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2)} .btn-gradient {background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);color: white;box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3)} .btn-gradient:hover {background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);transform: translateY(-3px);box-shadow: 0 12px 35px rgba(102, 126, 234, 0.4)} /* Enhanced Card Styles */ .card {background: var(--bg-primary);border-radius: 1.5rem;padding: 2rem;box-shadow: var(--shadow-lg);border: 1px solid var(--border-color);transition: all var(--transition-normal);position: relative;overflow: hidden} .card::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--gradient-primary);transform: scaleX(0);transition: transform var(--transition-normal)} .card:hover::before {transform: scaleX(1)} .card:hover {transform: translateY(-8px);box-shadow: var(--shadow-xl)} /* Language Toggle Styles */ .lang-toggle {position: fixed;top: 50%;right: 1rem;transform: translateY(-50%);z-index: 9999} .lang-toggle.rtl {right: auto;left: 1rem} .lang-flag {width: 4rem;height: 4rem;border-radius: 50%;display: flex;align-items: center;justify-content: center;cursor: pointer;transition: all var(--transition-normal);backdrop-filter: blur(16px);border: 3px solid rgba(255, 255, 255, 0.4);box-shadow: var(--shadow-xl);background: white;position: relative;overflow: hidden;padding: 0} .lang-flag::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.05));border-radius: 50%;opacity: 0;transition: opacity var(--transition-normal)} .lang-flag:hover {transform: scale(1.15) rotate(5deg);border-color: rgba(255, 255, 255, 0.8);box-shadow: 0 8px 32px rgba(42, 82, 152, 0.4)} .lang-flag img {transition: all var(--transition-normal)} .lang-flag:hover img {transform: scale(1.05)} .lang-flag:hover::before {opacity: 1} .lang-flag:active {transform: scale(1.05)} .lang-flag.single-flag {animation: gentle-pulse 3s ease-in-out infinite} @keyframes gentle-pulse {0%, 100% {box-shadow: 0 4px 20px rgba(42, 82, 152, 0.3)} 50% {box-shadow: 0 8px 32px rgba(42, 82, 152, 0.5)} } /* Gradient Text */ .gradient-text {background: var(--gradient-primary);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text} /* Dark Mode Styles */ [data-theme="dark"] .card {background: rgba(30, 41, 59, 0.8);border-color: rgba(71, 85, 105, 0.3);backdrop-filter: blur(16px)} [data-theme="dark"] .glass-effect {background: rgba(30, 41, 59, 0.3);border: 1px solid rgba(71, 85, 105, 0.3)} [data-theme="dark"] .lang-flag:not(.active) {background: rgba(30, 41, 59, 0.8);border-color: rgba(71, 85, 105, 0.3)} /* Responsive Design */ @media (max-width: 768px) {.lang-toggle {right: 1rem !important;top: auto !important;bottom: 5rem !important;transform: none !important;z-index: 9999 !important} .lang-toggle.rtl {left: 1rem !important;right: auto !important} .lang-flag {width: 3.5rem !important;height: 3.5rem !important;border-width: 3px !important;box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important} .lang-flag:hover {transform: scale(1.1) rotate(3deg)} .lang-flag:hover img {transform: scale(1.02)} .lang-flag:active {transform: scale(0.95) !important} .card {padding: 1.5rem} .btn {padding: 0.625rem 1.5rem;font-size: 0.875rem} } /* Accessibility */ .sr-only {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip: rect(0, 0, 0, 0);white-space: nowrap;border: 0} /* Focus styles */ *:focus {outline: 2px solid var(--primary-500);outline-offset: 2px} /* Scrollbar */ ::-webkit-scrollbar {width: 8px} ::-webkit-scrollbar-track {background: var(--bg-secondary)} ::-webkit-scrollbar-thumb {background: var(--gradient-primary);border-radius: 9999px} ::-webkit-scrollbar-thumb:hover {background: var(--primary-700)} /* Print Styles */ @media print {.no-print, .lang-toggle {display: none !important} .card {box-shadow: none;border: 1px solid var(--border-color)} } /* Partners Swiper Styles */ .partners-section {background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);overflow: hidden;position: relative} [data-theme="dark"] .partners-section {background: linear-gradient(135deg, #1e293b 0%, #334155 100%)} .partners-swiper {width: 100%;height: auto;overflow: visible} .partners-swiper .swiper-slide {width: auto !important;height: auto} .partner-logo {flex-shrink: 0;width: 160px;height: 100px;display: flex;align-items: center;justify-content: center;background: white;border-radius: 12px;box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);transition: all var(--transition-normal);padding: 1rem;border: 1px solid rgba(0, 0, 0, 0.05)} [data-theme="dark"] .partner-logo {background: rgba(255, 255, 255, 0.95);border-color: rgba(255, 255, 255, 0.1)} .partner-logo img {max-width: 100%;max-height: 100%;object-fit: contain;opacity: 1;transition: all var(--transition-normal);border-radius: 8px} .partner-logo:hover {transform: translateY(-4px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)} .partner-logo:hover img {transform: scale(1.08);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)} /* Partner Placeholder Styles */ .partner-placeholder {font-size: 0.875rem;font-weight: 600;color: #6b7280;text-align: center;display: flex;align-items: center;justify-content: center;height: 100%;width: 100%;background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);border-radius: 8px;transition: all var(--transition-normal)} [data-theme="dark"] .partner-placeholder {color: #9ca3af;background: linear-gradient(135deg, #374151 0%, #4b5563 100%)} .partner-logo:hover .partner-placeholder {color: var(--primary-600);background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);transform: scale(1.05)} [data-theme="dark"] .partner-logo:hover .partner-placeholder {color: #60a5fa;background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%)} /* Swiper Custom Styles */ .partners-swiper .swiper-wrapper {transition-timing-function: linear !important} /* Custom fade edges for Swiper */ .partners-section::before, .partners-section::after {content: '';position: absolute;top: 0;bottom: 0;width: 80px;z-index: 10;pointer-events: none} .partners-section::before {left: 0;background: linear-gradient(to right, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0))} .partners-section::after {right: 0;background: linear-gradient(to left, rgba(248, 250, 252, 1), rgba(248, 250, 252, 0))} [data-theme="dark"] .partners-section::before {background: linear-gradient(to right, rgba(30, 41, 59, 1), rgba(30, 41, 59, 0))} [data-theme="dark"] .partners-section::after {background: linear-gradient(to left, rgba(30, 41, 59, 1), rgba(30, 41, 59, 0))} /* Responsive Partners with Swiper */ @media (max-width: 768px) {.partner-logo {width: 130px;height: 85px;padding: 0.75rem} } @media (max-width: 480px) {.partner-logo {width: 110px;height: 75px;padding: 0.5rem} } /* Contact Page Enhancements */ .contact-card {background: var(--gradient-contact);border: 1px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);transition: all var(--transition-normal)} [data-theme="dark"] .contact-card {background: var(--gradient-contact-dark);border: 1px solid rgba(255, 255, 255, 0.1)} .contact-form-input {transition: all var(--transition-normal);border: 2px solid transparent;background: rgba(255, 255, 255, 0.8);backdrop-filter: blur(5px)} [data-theme="dark"] .contact-form-input {background: rgba(0, 0, 0, 0.3)} .contact-form-input:focus {border-color: var(--primary-500);box-shadow: 0 0 0 4px rgba(42, 82, 152, 0.1);background: rgba(255, 255, 255, 0.95);transform: translateY(-2px)} [data-theme="dark"] .contact-form-input:focus {background: rgba(0, 0, 0, 0.5);box-shadow: 0 0 0 4px rgba(42, 82, 152, 0.2)} .contact-info-item {transition: all var(--transition-normal);position: relative;overflow: hidden} .contact-info-item::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);transition: left var(--transition-slow)} .contact-info-item:hover::before {left: 100%} .contact-submit-btn {position: relative;overflow: hidden;background: var(--gradient-primary);transition: all var(--transition-normal)} .contact-submit-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);transition: left var(--transition-slow)} .contact-submit-btn:hover::before {left: 100%} .contact-submit-btn:hover {transform: translateY(-2px);box-shadow: var(--shadow-2xl)} /* Message Cards */ .message-success {background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);border: 2px solid #bbf7d0;animation: slideInDown 0.5s ease-out} [data-theme="dark"] .message-success {background: linear-gradient(135deg, #14532d 0%, #166534 100%);border: 2px solid #16a34a} .message-error {background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);border: 2px solid #fecaca;animation: slideInDown 0.5s ease-out} [data-theme="dark"] .message-error {background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);border: 2px solid #dc2626} @keyframes slideInDown {from {opacity: 0;transform: translateY(-20px)} to {opacity: 1;transform: translateY(0)} } /* Reduced Motion */ @media (prefers-reduced-motion: reduce) {*, *::before, *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important} .partners-swiper .swiper-wrapper {transform: none !important} .partners-swiper {overflow: visible} .partners-swiper .swiper-slide {position: static !important;margin-right: 2rem} .contact-info-item::before, .contact-submit-btn::before {display: none} .contact-form-input:focus {transform: none} .contact-submit-btn:hover {transform: none} }