/* ============================================ PORTO DESKTOP STYLES Wrapped in @layer components - lower priority than @layer overrides (navigation-glassmorphism). This enables proper cascade control without needing !important declarations. Phase 3 of CSS Risk Mitigation Plan ============================================ */ @layer components { :root { /* ============================================ COLOR TOKENS ARE IN base-architecture.css This file only contains component-specific styles. All color variables inherit from the unified token system. Source of truth: styles/base-architecture.css ============================================ */ /* Legacy aliases for backward compatibility */ --primary: var(--surface-navy); --primary-dark: var(--surface-navy-dark); --primary-light: #1a4570; --primary-overlay: var(--surface-overlay); --accent: var(--accent-coral); --accent-light: #ff4d7a; --accent-dark: var(--accent-coral-hover); --gold-color: var(--accent-gold-light); --gold: var(--accent-gold-light); --bg-card: var(--surface-base); --border-color: var(--border-light); --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.2); /* Transitions */ --transition: all 0.3s ease; --transition-fast: all 0.2s ease; --transition-slow: all 0.4s ease; /* Typography */ --font-heading: 'Montserrat', 'Jost', sans-serif; --font-primary: 'Montserrat', sans-serif; --font-secondary: 'Open Sans', 'Roboto', sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-secondary); font-size: 1rem; line-height: 1.8; color: var(--text-body); background-color: var(--surface-base); overflow-x: hidden; } /* Skip Link for Accessibility */ .skip-link { position: absolute; top: -40px; left: 0; background: var(--primary-color); color: var(--text-light); padding: 8px 16px; text-decoration: none; z-index: 10000; font-weight: 600; } .skip-link:focus { top: 0; max-width: 100%; } html { overflow-x: hidden; max-width: 100%; /* Note: Using 100% instead of 100vw to avoid scrollbar width causing overflow on mobile */ } h1, h2, h3, h4, h5 { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Preloader */ @keyframes spin { to { transform: rotate(360deg); } } /* ============================================ EXODUS HEADER STYLES - Immigration Theme ============================================ */ /* Header Desktop - Exodus Style */ /* Homepage-only: Transparent header on initial load */ /* Nav Shell - Resets font-size to counter global 80% scale */ /* Exodus Announcement Bar */ /* Exodus Header Main */ /* Exodus Logo - Premium Brand Lockup */ /* Header Contact Button */ /* Scrolled state - white text for navy background */ /* Narrow desktop screens - tighter nav to prevent Contact overlap */ @media (max-width: 1400px) { .nav-link { padding: 5px 4px; font-size: 10px; letter-spacing: 0.15px; } } /* Exodus Navigation */ .header-nav { display: flex; align-items: center; } .nav-link { display: flex; align-items: center; gap: 3px; padding: 6px 6px; color: var(--primary-color); text-decoration: none; font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; transition: var(--transition-fast); position: relative; white-space: nowrap; } .nav-link::after { content: ''; position: absolute; bottom: 8px; left: 18px; right: 18px; height: 2px; background: var(--accent-color); transform: scaleX(0); transition: var(--transition); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link:hover, .nav-link.active { color: var(--accent-color); } .nav-link i { font-size: 10px; transition: var(--transition-fast); } /* Dropdown Menu */ .dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; max-height: 400px; overflow-y: auto; background: var(--bg-white); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 8px 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s ease; list-style: none; z-index: 100; border: 1px solid rgba(0, 0, 0, 0.06); } .dropdown-menu li a { display: block; padding: 8px 16px; margin: 2px 8px; color: var(--text-dark); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.15s ease; border-radius: 6px; } .dropdown-menu li a:hover { background: var(--bg-light); color: var(--accent-color); transform: translateX(4px); } .dropdown-menu .dropdown-header { padding: 8px 20px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } /* Exodus Header Social Icons */ /* Scrolled state - white icons for navy background */ /* Desktop Theme Toggle - Softer contrast in light mode */ #themeToggle.header-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; color: var(--text-muted, #5a6a7a); font-size: 14px; background: transparent; border: 1px solid rgba(90, 106, 122, 0.3); border-radius: 4px; cursor: pointer; transition: var(--transition); } #themeToggle.header-icon:hover { color: var(--accent-color); border-color: var(--accent-color); background: rgba(255, 22, 84, 0.08); } /* Scrolled state - softer white icon for navy background */ /* Mobile Only Toggle */ @media (max-width: 1100px) { .header-nav { display: none; } /* Scrolled state - white for navy background */ /* Homepage transparent header - mobile toggle white */ } /* Legacy Header Styles (for backwards compatibility) */ .header-logo a { text-decoration: none; display: flex; align-items: center; gap: 10px; } .header-logo img { height: 38px; width: auto; } .logo-text { font-family: var(--font-primary); font-size: 18px; font-weight: 700; color: var(--primary-color); letter-spacing: -0.3px; } .logo-suffix { color: var(--accent-color); } /* ============================================ EXODUS HERO STYLES ============================================ */ /* Hero Section - Divi Exodus Style */ .hero-section { position: relative; min-height: 100vh; display: flex; align-items: center; padding-top: 140px; padding-bottom: 120px; overflow: visible; /* Changed from hidden - allows overlap cards to display */ } .hero-section.exodus-hero { min-height: 85vh; padding-top: 160px; padding-bottom: 180px; position: relative; /* Hero starts at top of viewport, content padded below fixed header */ margin-bottom: 80px; /* Reduced from 120px - cards now visible, less gap needed */ overflow: visible; /* Ensure overlap cards aren't clipped */ } .hero-section.exodus-hero .container { max-width: 1180px; } .hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -2; } .hero-background .hero-image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; z-index: 0; } /* Exodus Overlay - 85% Navy as per Exodus Design System */ .hero-overlay.exodus-overlay { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: linear-gradient(to right, rgba(7, 24, 36, 0.78) 0%, rgba(14, 43, 72, 0.55) 55%, rgba(14, 43, 72, 0.40) 100%) !important; z-index: 1 !important; } /* Exodus Title Typography */ .hero-title.exodus-title { margin-bottom: 30px !important; } .hero-title.exodus-title .title-line { display: block !important; font-family: var(--font-primary) !important; font-size: clamp(2rem, 4vw, 2.875rem) !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--text-light) !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; } /* Exodus CTA Button */ .hero-cta.exodus-cta { display: inline-block; background: var(--accent-color); color: var(--text-light); padding: 1.125rem 2.8rem; min-width: 11rem; text-align: center; text-decoration: none; font-family: var(--font-primary); font-size: 0.9375rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 0; transition: var(--transition); box-shadow: 0 16px 35px rgba(15, 37, 63, 0.35); position: relative; overflow: hidden; } .hero-cta.exodus-cta::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: var(--transition-slow); } .hero-cta.exodus-cta:hover::before { left: 100%; } .hero-cta.exodus-cta:hover { background: var(--accent-dark); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(227, 30, 36, 0.5); } /* Exodus Card Icon Transitions */ /* Legacy hero styles - Disabled for team photo visibility */ .hero-background::before { display: none; } .hero-background::after { display: none; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; } .hero-overlay::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to top, rgba(10, 31, 68, 0.5) 0%, transparent 100%); } .hero-overlay::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); opacity: 0.5; } .hero-content { position: relative; z-index: 5; } .hero-text { max-width: 650px; } .hero-title { margin-bottom: 25px; } .hero-subtitle { font-family: var(--font-primary); font-size: 1.5rem; font-weight: 600; color: var(--text-light); margin-bottom: 1.25rem; } .hero-subtitle .highlight { color: var(--accent-color); font-weight: 700; position: relative; } .hero-subtitle .highlight::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 3px; background: var(--accent-color); border-radius: 2px; } .hero-lead { font-family: var(--font-secondary); font-size: 1.125rem; font-weight: 400; color: rgba(255, 255, 255, 0.9); margin-bottom: 1.25rem; line-height: 1.6; } .hero-bullets { list-style: none; padding: 0; margin: 0 0 25px 0; } .hero-bullets li { font-family: var(--font-secondary); font-size: 1rem; color: rgba(255, 255, 255, 0.95); margin-bottom: 0.75rem; display: flex; align-items: center; gap: 12px; } .hero-bullets li i { color: var(--accent-color); font-size: 14px; width: 20px; text-align: center; } .hero-cta-secondary { font-family: var(--font-secondary); font-size: 14px; color: rgba(255, 255, 255, 0.8); text-decoration: underline; text-underline-offset: 3px; transition: var(--transition); } .hero-cta-secondary:hover { color: var(--accent-color); } .hero-cta-group { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin-bottom: 25px; margin-top: 10px; } /* ============================================ EXODUS OVERLAP CARDS - Inside Hero Section Full-width strip overlapping hero bottom ============================================ */ .overlap-cards-wrapper { position: absolute !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: translateY(50%) !important; z-index: 20 !important; padding: 0 20px !important; } .overlap-cards-wrapper .container { max-width: 1200px; margin: 0 auto; padding: 0; } .overlap-cards { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px !important; } .overlap-card { background: var(--accent-color) !important; padding: 1.5rem !important; border-radius: 16px !important; box-shadow: 0 15px 40px rgba(255, 22, 84, 0.35) !important; transition: var(--transition); position: relative !important; overflow: hidden !important; text-decoration: none !important; color: #ffffff !important; cursor: pointer; display: flex !important; gap: 1rem !important; align-items: flex-start !important; } .overlap-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(0,0,0,0.1) 100%); opacity: 0; transition: var(--transition); } .overlap-card:hover::before { opacity: 1; } .overlap-card:hover { transform: translateY(-10px); box-shadow: 0 25px 60px rgba(255, 22, 84, 0.45); } .overlap-card-icon { width: 56px !important; height: 56px !important; min-width: 56px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255, 255, 255, 0.15) !important; border: 2px solid rgba(255, 255, 255, 0.35) !important; border-radius: 50% !important; flex-shrink: 0 !important; transition: var(--transition); overflow: hidden !important; } .overlap-card-icon i { font-size: 1.25rem !important; color: #ffffff !important; } .overlap-card:hover .overlap-card-icon { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.6); transform: scale(1.1); } .overlap-card-title { font-family: var(--font-heading) !important; font-size: 1rem !important; font-weight: 700 !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; margin: 0 0 0.5rem 0 !important; line-height: 1.3 !important; } .overlap-card-desc { font-family: var(--font-secondary) !important; font-size: 0.875rem !important; font-weight: 400 !important; color: rgba(255, 255, 255, 0.9) !important; line-height: 1.5 !important; margin: 0 !important; } .overlap-card-badge { display: inline-block !important; font-size: 0.75rem !important; color: #ffffff !important; margin-top: 0.5rem !important; opacity: 0.9 !important; } .overlap-card-content { flex: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; } .overlap-card-badge { display: inline-block; font-family: var(--font-heading); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, 0.95); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 6px; padding: 4px 0; } .overlap-card-badge::before { content: '\2713'; margin-right: 6px; } /* Logo Pills - White Background for Contrast */ .hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent-color); color: var(--text-light); padding: 14px 32px; text-decoration: none; font-family: var(--font-primary); font-size: 14px; font-weight: 600; border-radius: 50px; transition: var(--transition); box-shadow: 0 4px 20px rgba(227, 30, 36, 0.35); position: relative; overflow: hidden; } .hero-cta::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: var(--transition-slow); } .hero-cta:hover::before { left: 100%; } .hero-cta:hover { background: var(--accent-dark); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(227, 30, 36, 0.5); } .hero-cta i { font-size: 18px; } .hero-cta-secondary { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .hero-cta-secondary a { color: var(--text-light); text-decoration: underline; text-underline-offset: 2px; } .hero-cta-secondary a:hover { color: var(--accent-color); } .hero-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; } .hero-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; font-family: var(--font-primary); font-size: 15px; font-weight: 600; text-decoration: none; border-radius: 8px; transition: var(--transition); cursor: pointer; border: 2px solid transparent; min-height: 52px; } .hero-btn i { font-size: 18px; } @media (max-width: 768px) { .hero-actions { flex-direction: column; width: 100%; } .hero-btn { width: 100%; justify-content: center; padding: 18px 24px; font-size: 14px; } } /* ============================================ EXODUS FEATURE CARDS - Red Card Strip ============================================ */ /* Exodus Cards Section */ /* Exodus Red Card */ /* Exodus Card Icon */ /* Exodus Card Typography */ /* ============================================ HERO CARDS WRAPPER - Cards Inside Hero Section ============================================ */ /* Legacy standalone section (kept for other pages) */ .overlap-card { background: var(--accent-color); padding: 32px 28px; text-align: left; transition: var(--transition); position: relative; overflow: hidden; border-radius: 16px; border: none; box-shadow: 0 8px 32px rgba(255, 22, 84, 0.25); } /* Secondary Navy Card Treatment */ .overlap-card:last-child { border-right: none; } .overlap-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%); opacity: 0; transition: var(--transition); } .overlap-card:hover::before { opacity: 1; } .overlap-card:hover { transform: translateY(-8px); box-shadow: 0 25px 50px rgba(255, 22, 84, 0.4); } .overlap-card h4 { font-family: var(--font-heading); font-size: 15px; font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 15px; line-height: 1.4; } .overlap-card p { font-family: var(--font-secondary); font-size: 15px; font-weight: 400; color: rgba(255, 255, 255, 0.9); line-height: 1.7; margin: 0; } /* ============================================ MOBILE RESPONSIVE - EXODUS DIVI STYLE Matching: https://immigration-visa-consultancy-layout.divi-marketplace.com/ ============================================ */ @media (max-width: 992px) { /* ========== MOBILE HEADER - Exodus Clean ========== */ /* Hamburger Menu Button - 3 Lines Exodus Style */ /* Top Bar Hidden on Mobile */ /* ========== HERO SECTION - Exodus Centered ========== */ .hero-section.exodus-hero { min-height: auto; padding-top: 80px; padding-bottom: 20px; display: flex; flex-direction: column; align-items: center; } .hero-title.exodus-title { margin-bottom: 20px; text-align: center; } .hero-title.exodus-title .title-line { font-size: 28px; line-height: 1.3; letter-spacing: 1px; display: block; text-align: center; } .hero-lead { font-size: 16px; text-align: center; margin-bottom: 18px; } .hero-bullets { margin: 0 0 20px 0; padding: 0 10px; } .hero-bullets li { font-size: 14px; justify-content: flex-start; text-align: left; margin-bottom: 10px; } .hero-cta-group { flex-direction: column; align-items: center; gap: 12px; } .hero-cta-secondary { display: inline-block; text-align: center; margin-top: 0; font-size: 13px; } /* CTA Button - Exodus Red Full Width */ .hero-cta.exodus-cta { display: inline-block; width: auto; min-width: 200px; margin: 0 auto; text-align: center; padding: 15px 35px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; } /* ========== HERO CARDS - Mobile Stacked ========== */ /* ========== OVERLAP CARDS - Mobile Stacked ========== */ .overlap-cards-wrapper { position: relative !important; transform: none !important; bottom: auto !important; left: auto !important; right: auto !important; padding: 30px 16px !important; margin-top: -40px !important; z-index: 10 !important; } .overlap-cards { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; gap: 16px !important; } .overlap-card { padding: 1.25rem !important; border-radius: 12px !important; border: none !important; box-shadow: 0 8px 24px rgba(255, 22, 84, 0.25) !important; display: flex !important; gap: 1rem !important; align-items: flex-start !important; text-align: left !important; } /* Secondary Navy Card on Mobile */ .overlap-card:last-child { border-bottom: none; } /* iOS Feature Cards Section - Fix Overlap */ .feature-cards-section.os-ios-only { margin-top: 0; padding-top: 40px; padding-bottom: 40px; } .overlap-card-icon { width: 48px !important; height: 48px !important; min-width: 48px !important; flex-shrink: 0 !important; } .overlap-card-content { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; } .overlap-card-title, .overlap-card h4 { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 8px 0 !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; } .overlap-card-desc, .overlap-card p { font-size: 14px !important; line-height: 1.5 !important; margin: 0 !important; max-width: none !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; color: rgba(255, 255, 255, 0.9) !important; } /* h4 and p styles moved above with overlap-card-title and overlap-card-desc */ .overlap-card:hover { transform: none; box-shadow: none; } /* ========== TEAM SECTION - Single Column ========== */ .team-cta-wrapper { margin-top: 30px; text-align: center; padding: 0 20px; } .team-tagline { font-size: 15px; text-align: center; padding: 0; } .team-cta { display: inline-block; width: auto; min-width: 200px; } /* ========== ABOUT SECTION - Exodus Mobile ========== */ .about-section.exodus-about { padding: 60px 0; } .about-grid.exodus-about-grid { grid-template-columns: 1fr; gap: 30px; padding: 0 20px; } .about-image.exodus-about-image { max-width: 300px; margin: 0 auto; } .about-content.exodus-about-content { text-align: center; } .about-content.exodus-about-content p { text-align: center; } .exodus-features-list { justify-content: center; flex-wrap: wrap; } .exodus-feature-item { justify-content: center; } .about-cta.exodus-cta-btn { display: inline-block; width: auto; min-width: 200px; margin: 20px auto 0; text-align: center; } /* ========== SERVICES SECTION - Single Column ========== */ .services-section .section-header { text-align: center; padding: 0 20px; } .section-title.exodus-section-title { font-size: 24px; line-height: 1.3; } /* ========== LANGUAGES SECTION - 2 Column Grid ========== */ .languages-section.exodus-languages { padding: 60px 0; } .languages-section .section-header { text-align: center; padding: 0 20px; } .languages-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 20px; } .language-item { font-size: 12px; padding: 12px 10px; text-align: center; } .language-item i { font-size: 14px; } /* ========== PROCESS SECTION ========== */ .process-section { padding: 60px 0; } .process-section .section-header { text-align: center; padding: 0 20px; } .process-steps { flex-direction: column; gap: 20px; padding: 0 20px; } .process-step { text-align: center; max-width: 300px; margin: 0 auto; } /* ========== CTA SECTION ========== */ .cta-section { padding: 60px 0; } .cta-section .container { text-align: center; padding: 0 20px; } .cta-section h2 { font-size: 24px; text-align: center; } .cta-section p { text-align: center; } .cta-buttons { flex-direction: column; align-items: center; gap: 15px; } .cta-buttons a { width: 100%; max-width: 280px; text-align: center; } /* ========== FOOTER ========== */ .footer { padding: 40px 0 0; } .footer-grid { grid-template-columns: 1fr; gap: 30px; text-align: center; margin-bottom: 30px; } .footer-brand { grid-column: 1 / -1; } .footer-social { justify-content: center; } .footer-links, .footer-services, .footer-contact { text-align: center; } .footer-links h4, .footer-services h4, .footer-contact h4 { display: inline-block; position: relative; padding-bottom: 12px; margin-bottom: 18px; } .footer-links h4::after, .footer-services h4::after, .footer-contact h4::after { left: 50%; transform: translateX(-50%); } .footer-links ul, .footer-services ul { display: flex; flex-direction: column; align-items: center; } .footer-links ul li, .footer-services ul li { text-align: center; } .footer-contact ul { display: inline-block; text-align: left; } /* ========== TESTIMONIALS - Mobile Carousel ========== */ .testimonials-section { padding: 60px 0; } .testimonial-card { flex: 0 0 90vw; min-width: 280px; scroll-snap-align: center; padding: 30px 25px; } .testimonial-card p { font-size: 15px; margin-bottom: 20px; } /* ========== iOS FEATURE CARDS ========== */ .feature-cards-section.os-ios-only .feature-cards { grid-template-columns: 1fr; gap: 15px; padding: 0 20px; } .feature-cards-section.os-ios-only .feature-card { text-align: center; max-width: 350px; margin: 0 auto; } } @media (max-width: 576px) { /* ========== EXTRA SMALL - Phone Portrait ========== */ .hero-title.exodus-title .title-line { font-size: 24px; } .hero-cta.exodus-cta { width: 100%; max-width: 260px; } .overlap-card { padding: 35px 20px; } .overlap-card h4 { font-size: 15px; } .overlap-card p { font-size: 13px; } .section-title.exodus-section-title { font-size: 22px; } .languages-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .language-item { font-size: 11px; padding: 10px 8px; } } /* ============================================ SWORN TRANSLATOR SECTION - Trust Building ============================================ */ .credential-item { display: flex; align-items: center; gap: 12px; background: var(--bg-white); padding: 15px 20px; border-radius: 8px; box-shadow: var(--shadow-sm); } .credential-item i { color: var(--accent-color); font-size: 20px; } .credential-item span { font-family: var(--font-secondary); font-size: 14px; font-weight: 500; color: var(--text-dark); } /* ============================================ TEAM SECTION ============================================ */ .team-cta-wrapper { text-align: center; margin-top: 50px; } .team-tagline { font-family: var(--font-secondary); font-size: 18px; color: var(--text-muted); margin-bottom: 25px; font-style: italic; } .team-cta { display: inline-flex; align-items: center; gap: 12px; background: var(--accent-color); color: var(--text-light); padding: 18px 40px; text-decoration: none; font-family: var(--font-heading); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-radius: 50px; transition: var(--transition); box-shadow: 0 6px 25px rgba(255, 22, 84, 0.3); } .team-cta:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 10px 35px rgba(255, 22, 84, 0.4); } /* ============================================ SPECIALISTS SECTION (Role-Based Team) ============================================ */ .specialists-section { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-alt); } .specialists-grid { /* Grid handled by base-architecture.css .grid-4.grid--auto-fit */ gap: 30px; margin-top: 50px; } .specialist-card { display: block; background: var(--bg-white); border-radius: 12px; padding: 35px 25px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid transparent; text-decoration: none; color: inherit; cursor: pointer; } .specialist-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: var(--accent-color); } .specialist-icon { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-color) 0%, #c41048 100%); display: flex; align-items: center; justify-content: center; margin: 0 auto 25px; box-shadow: 0 8px 25px rgba(255, 22, 84, 0.25); overflow: hidden; } .specialist-icon i { font-size: 32px; color: var(--text-light); } .specialist-card h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.3; } .specialist-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; margin-bottom: 20px; } .specialist-bullets { list-style: none; padding: 0; margin: 0 0 20px 0; text-align: left; } .specialist-bullets li { font-size: 14px; color: var(--text-muted) !important; line-height: 1.6; margin-bottom: 8px; padding-left: 18px; position: relative; text-decoration: none !important; } .specialist-bullets li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background: var(--accent-color); border-radius: 50%; } .specialist-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .specialist-tags .tag { background: var(--bg-alt); color: var(--primary-color); padding: 6px 12px; border-radius: 20px; font-family: var(--font-heading); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } @media (max-width: 1200px) { .specialists-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .specialists-grid { grid-template-columns: 1fr; gap: 20px; } .specialist-card { padding: 30px 20px; } .specialist-icon { width: 70px; height: 70px; } .specialist-icon i { font-size: 28px; } .specialist-card h3 { font-size: 16px; } } /* ============================================ EXODUS ABOUT SECTION ============================================ */ .about-section.exodus-about { padding: 90px 0; background: var(--bg-white); } .about-grid.exodus-about-grid { display: grid; grid-template-columns: 420px 1fr; gap: 50px; align-items: center; max-width: 1100px; margin: 0 auto; } .about-image.exodus-about-image { position: relative; } .about-image.exodus-about-image img { width: 100%; border-radius: 8px; box-shadow: var(--shadow-lg); } .experience-badge.exodus-badge { position: absolute; bottom: -20px; right: -20px; background: var(--accent-color); color: var(--text-light); padding: 20px 24px; text-align: center; border-radius: 8px; box-shadow: 0 10px 30px rgba(227, 30, 36, 0.4); } .experience-badge.exodus-badge .years { display: block; font-family: var(--font-primary); font-size: 2.25rem; font-weight: 700; line-height: 1; } .experience-badge.exodus-badge .text { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; } .section-label.exodus-label { display: inline-block; color: var(--accent-color); font-family: var(--font-primary); font-size: var(--fs-xs, 11px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.25em; margin-bottom: var(--space-sm, 12px); } .section-title.exodus-section-title { font-family: var(--font-primary); font-size: var(--fs-xl, clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem)); font-weight: 700; color: var(--text-dark); line-height: 1.3; letter-spacing: 0.01em; margin-bottom: var(--space-md, 18px); } .about-content.exodus-about-content p { color: var(--text-muted); font-size: 16px; line-height: 1.8; margin-bottom: 20px; } .exodus-features-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 24px 0; } .about-summary { font-size: 15px; color: var(--text-muted); font-style: italic; margin: 20px 0; line-height: 1.7; } .exodus-feature-item { display: flex; align-items: center; gap: 10px; } .exodus-feature-item i { color: var(--accent-color); font-size: 16px; } .exodus-feature-item span { font-family: var(--font-secondary); font-size: 14px; font-weight: 500; color: var(--text-dark); } .about-cta.exodus-cta-btn { display: inline-block; background: var(--accent-color); color: var(--text-light); padding: 16px 40px; text-decoration: none; font-family: var(--font-primary); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; transition: var(--transition); box-shadow: 0 8px 25px rgba(227, 30, 36, 0.35); } .about-cta.exodus-cta-btn:hover { background: var(--accent-dark); transform: translateY(-4px); box-shadow: 0 12px 35px rgba(227, 30, 36, 0.45); } /* ============================================ EXODUS SERVICES SECTION ============================================ */ /* ============================================ EXODUS LANGUAGES SECTION ============================================ */ .languages-section.exodus-languages { /* Padding controlled by .section class in base-architecture.css */ background: var(--primary-color); } .languages-section.exodus-languages .section-label.exodus-label, .languages-section.exodus-languages .section-title.exodus-section-title { color: var(--text-light); } .languages-grid { /* Grid handled by base-architecture.css .grid-3.grid--auto-fit */ gap: 15px; margin-bottom: 30px; } .language-item { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 0.1); padding: 15px 20px; border-radius: 8px; color: var(--text-light); font-family: var(--font-secondary); font-size: 14px; font-weight: 500; transition: var(--transition); border: 1px solid rgba(255, 255, 255, 0.15); } .language-item:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-3px); } .language-item i { color: var(--accent-color); font-size: 16px; } .language-item.highlight { background: var(--accent-color); border-color: var(--accent-color); } .language-item.highlight:hover { background: var(--accent-dark); } .languages-note { text-align: center; color: rgba(255, 255, 255, 0.8); font-size: 15px; font-style: italic; } /* ============================================ EXODUS STATS SECTION ============================================ */ /* ============================================ RESPONSIVE - EXODUS SECTIONS ============================================ */ @media (max-width: 1200px) { .languages-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { .about-grid.exodus-about-grid { grid-template-columns: 1fr; gap: 40px; } .experience-badge.exodus-badge { bottom: 20px; right: 20px; } .languages-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .stats-grid { grid-template-columns: repeat(2, 1fr); } .section-title.exodus-section-title { font-size: 2rem; } } @media (max-width: 768px) { .services-grid { grid-template-columns: 1fr; } .languages-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr; } .process-steps { grid-template-columns: 1fr; } .reasons-grid { grid-template-columns: 1fr; } .package-grid { grid-template-columns: 1fr; } .exodus-features-list { grid-template-columns: 1fr; } .section-title.exodus-section-title { font-size: 28px; } } /* Legacy Feature Cards Section */ .feature-cards-section { position: relative; z-index: 10; margin-top: -100px; padding-bottom: 100px; } .feature-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .feature-card { background: var(--bg-white); padding: 45px 35px; border-radius: 12px; box-shadow: var(--shadow-md); text-align: center; transition: var(--transition); position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); transform: scaleX(0); transition: var(--transition); } .feature-card:hover::before { transform: scaleX(1); } .feature-card:hover { transform: translateY(-15px); box-shadow: var(--shadow-hover); } .card-icon { width: 90px; height: 90px; margin: 0 auto 25px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 50%; color: var(--text-light); font-size: 36px; transition: var(--transition); } .feature-card:hover .card-icon { background: linear-gradient(135deg, var(--accent-color), var(--accent-light)); transform: scale(1.1) rotate(5deg); } .card-divider { width: 60px; height: 3px; background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); margin: 0 auto 25px; border-radius: 2px; } .feature-card h3 { font-family: var(--font-primary); font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 15px; } .feature-card p { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 25px; } .card-link { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-color); text-decoration: none; font-weight: 600; font-size: 14px; transition: var(--transition-fast); } .card-link:hover { color: var(--accent-dark); gap: 15px; } .card-link i { font-size: 12px; transition: var(--transition-fast); } .card-link:hover i { transform: translateX(3px); } /* About Section */ .about-section { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-white); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .about-image { position: relative; } .about-image img { width: 100%; border-radius: 12px; box-shadow: var(--shadow-lg); } .about-image::before { content: ''; position: absolute; top: -20px; left: -20px; right: 20px; bottom: 20px; border: 4px solid var(--accent-color); border-radius: 12px; z-index: -1; transition: var(--transition); } .about-image:hover::before { transform: translate(10px, 10px); } .experience-badge { position: absolute; bottom: -30px; right: -30px; background: linear-gradient(135deg, var(--accent-color), var(--accent-dark)); color: var(--text-light); padding: 30px 40px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-lg); animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .experience-badge .years { display: block; font-family: var(--font-primary); font-size: 52px; font-weight: 800; line-height: 1; } .experience-badge .text { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; } .section-label { display: inline-block; color: var(--accent-color); font-family: var(--font-primary); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 3px; margin-bottom: 15px; position: relative; padding-left: 45px; } .section-label::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 35px; height: 3px; background: var(--accent-color); border-radius: 2px; } .section-title { font-family: var(--font-primary); font-size: 2.625rem; font-weight: 700; color: var(--text-dark); line-height: 1.25; margin-bottom: 30px; } .about-content p { color: var(--text-muted); margin-bottom: 20px; line-height: 1.8; font-size: 16px; } .stat-item { display: flex; align-items: center; gap: 18px; } .stat-icon { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(227, 30, 36, 0.1), rgba(10, 31, 68, 0.1)); border-radius: 12px; color: var(--accent-color); font-size: 24px; transition: var(--transition); } .stat-item:hover .stat-icon { background: var(--accent-color); color: var(--text-light); transform: scale(1.1); } .stat-number { display: block; font-family: var(--font-primary); font-size: 24px; font-weight: 700; color: var(--text-dark); } .stat-label { font-size: 14px; color: var(--text-muted); } .about-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--primary-color); color: var(--text-light); padding: 16px 35px; text-decoration: none; font-family: var(--font-primary); font-size: 14px; font-weight: 600; border-radius: 50px; transition: var(--transition); box-shadow: 0 4px 15px rgba(10, 31, 68, 0.3); } .about-cta:hover { background: var(--primary-dark); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(10, 31, 68, 0.4); } /* Services Section */ .services-section { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-light); } .section-header { margin-bottom: 60px; } .section-header.center { text-align: center; } .section-header.center .section-label { padding-left: 0; } .section-header.center .section-label::before { display: none; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .service-card { background: var(--bg-white); padding: 45px 35px; border-radius: 12px; box-shadow: var(--shadow-sm); transition: var(--transition); border-bottom: 4px solid transparent; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); opacity: 0; transition: var(--transition); } .service-card:hover { transform: translateY(-12px); box-shadow: var(--shadow-hover); border-bottom-color: var(--accent-color); } .service-icon { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(227, 30, 36, 0.1), rgba(10, 31, 68, 0.1)); border-radius: 16px; color: var(--accent-color); font-size: 32px; margin-bottom: 30px; transition: var(--transition); position: relative; z-index: 1; } .service-card:hover .service-icon { background: var(--accent-color); color: var(--text-light); transform: scale(1.1) rotate(-5deg); } .service-card h3 { font-family: var(--font-primary); font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 15px; position: relative; z-index: 1; } .service-card p { color: var(--text-muted); font-size: 15px; line-height: 1.7; margin-bottom: 25px; position: relative; z-index: 1; } .service-card ul { list-style: none; margin-bottom: 15px; position: relative; z-index: 1; } .service-card ul li { padding: 6px 0; color: var(--text-dark); } .service-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent-color); text-decoration: none; font-weight: 600; font-size: 14px; padding-top: 20px; border-top: 1px solid var(--border-color); transition: var(--transition-fast); position: relative; z-index: 1; } .service-link i { transition: var(--transition-fast); } .service-link:hover { gap: 15px; } .service-link:hover i { transform: translateX(5px); } /* Why Choose Us Section - Exodus Divi Style */ .why-section { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-alt); position: relative; } .why-section .section-label { color: var(--accent-color); } .why-section .section-title { color: var(--text-dark); } .section-divider { width: 80px; height: 4px; background: var(--accent-color); margin: 25px auto 0; border-radius: 2px; } .why-grid { /* Grid handled by base-architecture.css .grid-4.grid--auto-fit */ gap: 24px; margin-top: 50px; } .why-card { text-align: center; padding: 40px 28px 35px; background: var(--bg-white); border-radius: 8px; transition: var(--transition); border-top: 4px solid var(--accent-color); box-shadow: 0 8px 30px rgba(0,0,0,0.08); position: relative; } .why-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(0,0,0,0.12); } .why-card i { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; font-size: 26px; margin: 0 auto 22px; color: var(--gold); background: rgba(212, 165, 76, 0.12); border-radius: 50%; transition: var(--transition); overflow: hidden; } .why-card:hover i { transform: scale(1.1); background: rgba(212, 165, 76, 0.18); color: var(--gold); } .why-card h3 { font-family: var(--font-primary); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; color: var(--primary-color); } .why-card p { font-size: 14px; line-height: 1.75; color: var(--text-muted); } /* Process Section */ .process-section { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-white); } .process-steps { /* Grid handled by base-architecture.css .grid-3.grid--auto-fit */ gap: 40px; margin-top: 60px; } .process-step { flex: 1; max-width: 320px; text-align: center; padding: 40px 30px; background: var(--bg-white); border-radius: 16px; transition: var(--transition); position: relative; } .process-step:hover { background: var(--bg-light); transform: translateY(-10px); box-shadow: var(--shadow-lg); } .step-number { font-family: var(--font-primary); font-size: 72px; font-weight: 800; background: linear-gradient(135deg, var(--accent-color), var(--primary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; margin-bottom: 25px; opacity: 0.9; } .process-step h3 { font-family: var(--font-primary); font-size: 22px; font-weight: 700; color: var(--text-dark); margin-bottom: 15px; } .process-step p { color: var(--text-muted); font-size: 15px; line-height: 1.7; } /* ============================================ DIAGONAL SECTION TRANSITIONS - Exodus Style ============================================ */ /* ============================================ EXODUS PROCESS STEPS - Premium 3-Step Layout ============================================ */ .process-section.exodus-process { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-light); } /* Process Visual Showcase */ .process-steps.exodus-process-steps { display: grid; grid-template-columns: repeat(3, 260px); justify-content: center; gap: 28px; margin-top: 50px; } .process-step.exodus-step { background: var(--bg-white); border-radius: 12px; padding: 32px; text-align: center; box-shadow: var(--shadow-md); transition: var(--transition); position: relative; overflow: hidden; } .process-step.exodus-step::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-color), var(--primary-color)); transform: scaleX(0); transition: var(--transition); } .process-step.exodus-step:hover::before { transform: scaleX(1); } .process-step.exodus-step:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); } .exodus-step .step-header { display: flex; flex-direction: column; align-items: center; margin-bottom: 25px; } .exodus-step .step-index { font-family: var(--font-primary); font-size: 20px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; margin-bottom: 16px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--accent-color, #FF1654); border-radius: 50%; box-shadow: 0 4px 15px rgba(255, 22, 84, 0.35); } .exodus-step .step-icon { width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border: 2px solid var(--accent-color); border-radius: 50%; background: transparent; transition: var(--transition); overflow: hidden; } .exodus-step .step-icon i { font-size: 28px; color: var(--primary-color); transition: var(--transition); } .exodus-step:hover .step-icon { background: var(--accent-color); border-color: var(--accent-color); } .exodus-step:hover .step-icon i { color: var(--text-light); } .exodus-step .step-title { font-family: var(--font-primary); font-size: 20px; font-weight: 700; color: var(--text-dark); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 15px; } .exodus-step .step-desc { font-family: var(--font-secondary); font-size: 15px; color: var(--text-muted); line-height: 1.7; margin: 0; } /* Testimonials Section - Exodus Navy Style */ .testimonials-section { padding: 80px 0; background: linear-gradient(135deg, var(--primary-color, #0E2B48) 0%, #071824 100%); position: relative; z-index: 1; } .testimonials-section .testimonials-title { color: #ffffff; text-align: center; font-size: clamp(1.5rem, 3vw, 2rem); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 50px; } .testimonials-section .testimonials-title::after { content: ''; display: block; width: 60px; height: 3px; background: var(--accent-color, #FF1654); margin: 16px auto 0; } .testimonial-card { background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); padding: 40px 32px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); position: relative; transition: var(--transition); border: 1px solid rgba(255, 255, 255, 0.1); } .testimonial-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); background: rgba(255, 255, 255, 0.12); } .quote-icon { position: absolute; top: 20px; right: 28px; font-size: 42px; color: var(--accent-color, #FF1654); opacity: 0.3; } .testimonial-card p, .testimonial-card .testimonial-quote { font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, 0.9); font-style: italic; margin-bottom: 28px; } .testimonial-author { display: flex; flex-direction: column; gap: 6px; padding-top: 20px; border-top: 2px solid var(--accent-color, #FF1654); } .author-name { font-family: var(--font-primary); font-weight: 700; color: #ffffff; font-size: 15px; } .author-role, .author-title { font-size: 13px; color: rgba(255, 255, 255, 0.7); } .author-location { font-size: 12px; color: rgba(255, 255, 255, 0.75); } .author-location i { color: var(--accent-color, #FF1654); margin-right: 4px; } /* Testimonials Carousel Controls */ .carousel-wrapper { position: relative; } .carousel-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: #ffffff; cursor: pointer; transition: all 0.3s ease; z-index: 10; } .carousel-arrow:hover { background: var(--accent-color, #FF1654); border-color: var(--accent-color, #FF1654); } .carousel-prev { left: -20px; } .carousel-next { right: -20px; } .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; } .carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: none; cursor: pointer; transition: all 0.3s ease; } .carousel-dot.active, .carousel-dot:hover { background: var(--accent-color, #FF1654); transform: scale(1.2); } /* FAQ Section - HTML5 Native Accordions */ .faq-section { /* Padding controlled by .section class in base-architecture.css */ background: var(--bg-white); } .faq-list { max-width: 850px; margin: 60px auto 0; } /* HTML5 Details Element Styling */ /* Remove default marker/triangle */ /* Summary Styling (The Clickable Header) */ /* Icon Styling */ /* Open State Styles */ /* Content Area */ @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Legacy Compatibility - Keep old classes for other pages */ .faq-item { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; overflow: hidden; transition: var(--transition); } .faq-item:hover { box-shadow: var(--shadow-md); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 25px 30px; background: var(--bg-white); border: none; cursor: pointer; font-family: var(--font-primary); font-size: 17px; font-weight: 600; color: var(--text-dark); text-align: left; transition: var(--transition); } .faq-question:hover { background: var(--bg-light); } .faq-question i { font-size: 14px; color: var(--accent-color); transition: var(--transition); } .faq-item.active .faq-question { background: var(--primary-color); color: var(--text-light); } .faq-item.active .faq-question i { color: var(--text-light); transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq-item.active .faq-answer, .faq-item[open] .faq-answer, details.faq-item[open] .faq-answer { max-height: 400px; } .faq-answer p { padding: 25px 30px; color: var(--text-muted); line-height: 1.8; font-size: 15px; } /* Contact Section */ .contact-section { /* Padding controlled by .section class in base-architecture.css */ background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); color: var(--text-light); position: relative; overflow: hidden; } .contact-section::before { content: ''; position: absolute; top: -50%; right: -30%; width: 70%; height: 200%; background: radial-gradient(ellipse, rgba(227, 30, 36, 0.2) 0%, transparent 60%); } .contact-wrapper { max-width: 750px; margin: 0 auto; text-align: center; position: relative; z-index: 1; } .contact-wrapper .section-label { color: rgba(255,255,255,0.8); padding-left: 0; } .contact-wrapper .section-label::before { display: none; } .contact-wrapper .section-title { color: var(--text-light); } .contact-description { font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 40px; line-height: 1.8; } .contact-form { background: rgba(255,255,255,0.08); backdrop-filter: blur(10px); padding: 50px; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } .form-group { margin-bottom: 20px; } .form-group input, .form-group textarea { width: 100%; padding: 18px 25px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); border-radius: 10px; color: var(--text-light); font-size: 15px; font-family: inherit; transition: var(--transition); } .form-group input::placeholder, .form-group textarea::placeholder { color: rgba(255,255,255,0.5); } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: var(--accent-color); background: rgba(255,255,255,0.15); } .form-group textarea { min-height: 150px; resize: vertical; } .submit-btn { width: 100%; padding: 18px 40px; background: var(--accent-color); color: var(--text-light); border: none; border-radius: 50px; font-family: var(--font-primary); font-size: 16px; font-weight: 600; cursor: pointer; transition: var(--transition); box-shadow: 0 6px 25px rgba(227, 30, 36, 0.4); } .submit-btn:hover { background: var(--accent-dark); transform: translateY(-3px); box-shadow: 0 10px 35px rgba(227, 30, 36, 0.5); } .submit-btn:disabled { opacity: 0.7; cursor: wait; } .form-result { margin-top: 20px; text-align: center; font-size: 14px; } .form-result .form-success, .form-result .form-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px; border-radius: 12px; } .form-result .form-success { background: rgba(37, 211, 102, 0.1); border: 1px solid rgba(37, 211, 102, 0.3); } .form-result .form-success > i { font-size: 32px; color: #25D366; } .form-result .form-success > span { color: var(--text-dark); font-weight: 600; } .form-result .form-error { background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.3); } .form-result .form-error > i { font-size: 32px; color: #ff6b6b; } .form-result .form-error > span { color: var(--text-dark); font-weight: 600; } .form-result .whatsapp-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 20px; background: #25D366; color: #fff; border-radius: 25px; text-decoration: none; font-weight: 600; font-size: 14px; transition: var(--transition); } .form-result .whatsapp-link:hover { background: #1da851; transform: translateY(-2px); } .form-result .whatsapp-link i { font-size: 18px; } .form-result .success { color: #25D366; font-weight: 600; } .form-result .error { color: #ff6b6b; font-weight: 600; } .contact-buttons { display: flex; gap: 20px; justify-content: center; margin-top: 40px; } .contact-btn { display: inline-flex; align-items: center; gap: 12px; padding: 16px 35px; border-radius: 50px; text-decoration: none; font-family: var(--font-primary); font-weight: 600; font-size: 15px; transition: var(--transition); } .contact-btn.whatsapp { background: #25D366; color: var(--text-light); box-shadow: 0 4px 15px rgba(37, 211, 102, 0.35); } .contact-btn.whatsapp:hover { background: #1da851; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(37, 211, 102, 0.45); } .contact-btn.phone { background: #4A90E2; color: var(--text-light); box-shadow: 0 4px 15px rgba(74, 144, 226, 0.35); } .contact-btn.phone:hover { background: #357ABD; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(74, 144, 226, 0.45); } .contact-btn.email { background: #EA4335; color: var(--text-light); box-shadow: 0 4px 15px rgba(234, 67, 53, 0.35); } .contact-btn.email:hover { background: #C5362C; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(234, 67, 53, 0.45); } /* Footer */ .footer { background: var(--primary-dark); color: rgba(255,255,255,0.8); padding: 50px 0 0; } .footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 40px; } .footer-brand p { font-size: 14px; line-height: 1.7; margin-bottom: 18px; color: rgba(255,255,255,0.7); } .footer-social { display: flex; gap: 10px; } .footer-social a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.1); border-radius: 8px; color: var(--text-light); font-size: 16px; transition: var(--transition); } .footer-social a:hover { background: var(--accent-color); transform: translateY(-3px); } .footer-links h4, .footer-services h4, .footer-contact h4 { font-family: var(--font-primary); font-size: 15px; font-weight: 700; color: var(--text-light); margin-bottom: 18px; position: relative; padding-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .footer-links h4::after, .footer-services h4::after, .footer-contact h4::after { content: ''; position: absolute; bottom: 0; left: 0; width: 40px; height: 3px; background: var(--accent-color); border-radius: 2px; } .footer-links ul, .footer-services ul, .footer-contact ul { list-style: none; } .footer-links ul li, .footer-services ul li { margin-bottom: 10px; } .footer-links ul li a, .footer-services ul li a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 14px; transition: var(--transition-fast); display: inline-flex; align-items: center; gap: 8px; } .footer-links ul li a::before, .footer-services ul li a::before { content: '→'; opacity: 0; transform: translateX(-10px); transition: var(--transition-fast); } .footer-links ul li a:hover, .footer-services ul li a:hover { color: var(--text-light); padding-left: 8px; } .footer-links ul li a:hover::before, .footer-services ul li a:hover::before { opacity: 1; transform: translateX(0); } .footer-contact ul li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 13px; } .footer-contact ul li i { color: var(--accent-color); font-size: 14px; margin-top: 2px; width: 16px; text-align: center; } .footer-contact ul li a { color: rgba(255,255,255,0.7); text-decoration: none; transition: var(--transition-fast); } .footer-contact ul li a:hover { color: var(--text-light); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding: 30px 0; text-align: center; } .footer-bottom p { font-size: 14px; color: rgba(255,255,255,0.6); } /* Back to Top Button */ .back-to-top { position: fixed; bottom: 30px; right: 30px; width: 50px; height: 50px; background: var(--accent-color); color: var(--text-light); border: none; border-radius: 50%; font-size: 20px; cursor: pointer; opacity: 0; visibility: hidden; transition: var(--transition); box-shadow: 0 4px 15px rgba(227, 30, 36, 0.4); z-index: 999; } .back-to-top.visible { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--accent-dark); transform: translateY(-5px); } /* CTA Banner */ .cta-banner { background: var(--accent-color); padding: 60px 0; text-align: center; } .cta-banner h2 { font-family: var(--font-primary); font-size: 2rem; font-weight: 700; color: var(--text-light); margin-bottom: 20px; } .cta-banner p { font-size: 18px; color: rgba(255,255,255,0.9); margin-bottom: 30px; } .cta-banner .cta-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--text-light); color: var(--accent-color); padding: 16px 40px; border-radius: 50px; text-decoration: none; font-family: var(--font-primary); font-weight: 700; font-size: 16px; transition: var(--transition); } .cta-banner .cta-btn:hover { background: var(--primary-color); color: var(--text-light); transform: translateY(-3px); } /* Stats Counter Section */ .stats-section { padding: 80px 0; background: var(--bg-light); } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } /* ========== NEW PAGE STYLES ========== */ /* Main Content - accounts for fixed header on desktop */ .main-content { padding-top: 0; } /* Page Hero - extends behind fixed header */ .page-hero { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 160px 0 60px; color: var(--text-light); } /* Index pages - remove header spacing when hero is first */ .main-content > .page-hero:first-child { margin-top: 0; } .sharjah-hero { background-image: url('../assets/images/onedrive/locations/sharjah.png'); } .breadcrumb { margin-bottom: 16px; font-size: 12px; letter-spacing: 0.02em; } .breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } .breadcrumb ol li { display: flex; align-items: center; color: rgba(255, 255, 255, 0.5); } .breadcrumb ol li::after { content: "›"; margin-left: 8px; color: rgba(255, 255, 255, 0.35); font-size: 11px; } .breadcrumb ol li:last-child::after { display: none; } .breadcrumb ol li a { color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; } .breadcrumb ol li a:hover { color: rgba(255, 255, 255, 0.85); } .breadcrumb ol li[aria-current="page"] { color: rgba(255, 255, 255, 0.7); font-weight: 500; } .hero-title { font-family: var(--font-primary); font-size: 48px; font-weight: 700; margin-bottom: 15px; } .hero-subtitle { font-size: 20px; opacity: 0.9; } /* Section Padding */ .bg-light { background: var(--bg-light); } /* Section Headers */ .section-header { margin-bottom: 50px; } .section-header h2 { font-family: var(--font-primary); font-size: 2.25rem; font-weight: 700; color: var(--primary-color); margin-bottom: 15px; } .section-header p { font-size: 18px; color: var(--text-muted); } /* Intro Grid */ /* Highlight Box */ .highlight-box { display: flex; gap: 20px; padding: 25px; background: linear-gradient(135deg, rgba(10, 31, 68, 0.05) 0%, rgba(10, 31, 68, 0.1) 100%); border-left: 4px solid var(--primary-color); border-radius: 0 12px 12px 0; margin-top: 30px; } .highlight-box i { font-size: 28px; color: var(--primary-color); flex-shrink: 0; } .highlight-box h4 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 8px; } .highlight-box p { margin: 0; font-size: 15px; } .highlight-box.warning { border-left-color: var(--accent-color); background: linear-gradient(135deg, rgba(227, 30, 36, 0.05) 0%, rgba(227, 30, 36, 0.1) 100%); } .highlight-box.warning i, .highlight-box.warning h4 { color: var(--accent-color); } .highlight-box.premium { border-left-color: var(--gold-color); background: linear-gradient(135deg, rgba(212, 165, 76, 0.05) 0%, rgba(212, 165, 76, 0.1) 100%); } .highlight-box.premium i, .highlight-box.premium h4 { color: var(--gold-color); } .highlight-box.corporate { border-left-color: var(--primary-color); } /* Quick Quote Card */ /* Buttons */ .btn-coral { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--accent-color); color: var(--text-light); padding: 14px 28px; border-radius: 8px; text-decoration: none; font-family: var(--font-primary); font-weight: 600; font-size: 15px; transition: var(--transition); border: none; cursor: pointer; } .btn-coral:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(227, 30, 36, 0.3); } .btn-coral.btn-lg { padding: 18px 36px; font-size: 16px; } .btn-coral.btn-sm { padding: 10px 20px; font-size: 14px; } .btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: var(--primary-color); padding: 14px 28px; border-radius: 8px; text-decoration: none; font-family: var(--font-primary); font-weight: 600; font-size: 15px; transition: var(--transition); border: 2px solid var(--primary-color); cursor: pointer; } .btn-outline:hover { background: var(--primary-color); color: var(--text-light); } .btn-outline.btn-lg { padding: 16px 34px; font-size: 16px; } /* Package Cards */ .package-card { background: var(--bg-white); padding: 35px; border-radius: 16px; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; } .package-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); } .package-card.featured { border: 2px solid var(--accent-color); } .package-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--accent-color); color: var(--text-light); padding: 6px 20px; border-radius: 20px; font-size: 13px; font-weight: 600; } .package-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), var(--primary-light)); border-radius: 16px; margin-bottom: 20px; } .package-icon i { font-size: 28px; color: var(--text-light); } .package-card h3 { font-family: var(--font-primary); font-size: 22px; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; } /* Process Timeline */ .process-timeline { position: relative; max-width: 800px; margin: 0 auto; } .timeline-item { display: flex; gap: 25px; margin-bottom: 40px; position: relative; } .timeline-item:last-child { margin-bottom: 0; } .timeline-content h4 { font-family: var(--font-primary); font-size: 20px; font-weight: 600; color: var(--primary-color); margin-bottom: 8px; } .timeline-content p { color: var(--text-muted); line-height: 1.7; } /* Process Steps */ .process-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .step-item { text-align: center; position: relative; } .step-number { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; background: var(--accent-color); color: var(--text-light); font-family: var(--font-primary); font-size: 24px; font-weight: 700; border-radius: 50%; margin: 0 auto 20px; } .step-content h4 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; } .step-content p { font-size: 14px; color: var(--text-muted); } /* Document Grid */ .docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .doc-item { background: var(--bg-white); padding: 30px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); } .doc-item:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .doc-item i { font-size: 36px; color: var(--accent-color); margin-bottom: 15px; } .doc-item h4 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 8px; } .doc-item p { font-size: 14px; color: var(--text-muted); } .service-note { font-size: 14px; color: var(--accent-color); font-weight: 500; } /* Chain Visual */ .chain-visual { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 15px; margin-bottom: 40px; } .chain-step { text-align: center; flex: 0 0 200px; } .chain-arrow { color: var(--accent-color); font-size: 24px; } /* Country Grid */ .countries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; } .country-card { background: var(--bg-white); padding: 25px; border-radius: 12px; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); } .country-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .country-flag { font-size: 36px; margin-bottom: 10px; } .country-card h4 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 8px; } .country-card p { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; } .country-card .timeline { font-size: 12px; color: var(--accent-color); font-weight: 600; } /* Certificate Grid */ .cert-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .cert-card { background: var(--bg-white); padding: 30px; border-radius: 16px; box-shadow: var(--shadow-sm); transition: var(--transition); } .cert-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .cert-card h3 { font-family: var(--font-primary); font-size: 20px; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; } .cert-card > p { color: var(--text-muted); margin-bottom: 15px; font-size: 14px; } /* Requirements Grid */ .requirements-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; } .req-card { background: var(--bg-white); padding: 25px; border-radius: 12px; box-shadow: var(--shadow-sm); } .req-card h4 { font-family: var(--font-primary); font-size: 16px; font-weight: 600; color: var(--primary-color); margin-bottom: 12px; } .req-card h4 i { margin-right: 8px; color: var(--accent-color); } .req-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; } /* Document Categories */ .doc-category h3 { font-family: var(--font-primary); font-size: 20px; font-weight: 600; color: var(--primary-color); margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .doc-category h3 i { color: var(--accent-color); } /* Free Zones Grid */ /* Pack Content */ /* Reasons Grid */ .reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .reason-card { text-align: center; padding: 30px 20px; } .reason-icon { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; background: rgba(227, 30, 36, 0.1); border-radius: 50%; margin: 0 auto 20px; } .reason-icon i { font-size: 28px; color: var(--accent-color); } .reason-card h3 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; } .reason-card p { font-size: 14px; color: var(--text-muted); line-height: 1.7; } /* FAQ Accordion */ .faq-accordion { max-width: 800px; margin: 0 auto; } .faq-item { background: var(--bg-white); border-radius: 12px; margin-bottom: 15px; box-shadow: var(--shadow-sm); overflow: hidden; } .faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; background: none; border: none; cursor: pointer; font-family: var(--font-primary); font-size: 16px; font-weight: 600; color: var(--primary-color); text-align: left; transition: var(--transition-fast); } .faq-question:hover { color: var(--accent-color); } .faq-question i { transition: var(--transition-fast); } .faq-item.active .faq-question i { transform: rotate(180deg); } .faq-answer { padding: 0 25px; max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; } .faq-item.active .faq-answer, .faq-item[open] .faq-answer, details.faq-item[open] .faq-answer { padding: 0 25px 20px; max-height: 500px; } .faq-answer p { color: var(--text-muted); line-height: 1.8; } /* CTA Section */ .cta-section { background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%); padding: 80px 0; text-align: center; } .cta-content h2 { font-family: var(--font-primary); font-size: 2.25rem; font-weight: 700; color: var(--text-light); margin-bottom: 15px; } .cta-content p { font-size: 18px; color: rgba(255,255,255,0.85); margin-bottom: 30px; } .cta-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .cta-section .btn-outline { border-color: rgba(255,255,255,0.5); color: var(--text-light); } .cta-section .btn-outline:hover { background: var(--text-light); color: var(--primary-color); border-color: var(--text-light); } /* Pricing Tables */ .pricing-note { display: flex; align-items: flex-start; gap: 15px; background: rgba(10, 31, 68, 0.05); padding: 20px 25px; border-radius: 12px; max-width: 900px; margin: 0 auto; } .pricing-note i { color: var(--primary-color); font-size: 20px; flex-shrink: 0; margin-top: 2px; } /* Price Cards */ .price-card { background: var(--bg-white); padding: 35px; border-radius: 16px; box-shadow: var(--shadow-sm); text-align: center; transition: var(--transition); position: relative; } .price-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); } .price-card.featured { border: 2px solid var(--accent-color); } .price-card h3 { font-family: var(--font-primary); font-size: 22px; font-weight: 600; color: var(--primary-color); margin-bottom: 15px; } /* Package Grid for Pricing */ .package-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .package-grid .package-card { padding: 25px; } .package-grid .package-icon { width: 60px; height: 60px; margin-bottom: 15px; } .package-grid .package-icon i { font-size: 24px; } .package-grid .package-card h3 { font-size: 18px; } /* Attestation Pricing */ /* Extras Grid */ /* Guarantee */ /* Legal Content */ /* Digital Content */ .check-list { list-style: none; } .check-list li { padding: 8px 0; display: flex; align-items: center; gap: 10px; } .check-list li i { color: #25D366; } /* Footer Logo */ .footer-logo { height: 50px; width: auto; margin-bottom: 15px; } /* Logo Image */ /* Responsive */ @media (max-width: 1200px) { .package-grid { grid-template-columns: repeat(2, 1fr); } .reasons-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { .cert-grid, .docs-grid, .countries-grid, .requirements-grid { grid-template-columns: 1fr; } .services-grid { grid-template-columns: repeat(2, 1fr); } .process-steps { grid-template-columns: repeat(2, 1fr); } .chain-visual { flex-direction: column; } .chain-arrow { transform: rotate(90deg); } .hero-title { font-size: 36px; } .section-header h2 { font-size: 28px; } .related-services .services-grid { grid-template-columns: 1fr; } } /* Related Services Cards */ .related-services { padding: 80px 0; } .related-services .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; } .related-card { display: block; background: var(--bg-white); padding: 30px 25px; border-radius: 16px; text-align: center; text-decoration: none; box-shadow: var(--shadow-sm); transition: var(--transition); border: 2px solid transparent; } .related-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); border-color: var(--accent-color); } .related-card h3 { font-family: var(--font-primary); font-size: 18px; font-weight: 600; color: var(--primary-color); margin-bottom: 10px; transition: var(--transition-fast); } .related-card:hover h3 { color: var(--accent-color); } .related-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin: 0; } @media (max-width: 1200px) { .related-services .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .related-services .services-grid { grid-template-columns: 1fr; } } /* ============================================ EXODUS SCROLL ANIMATIONS - Smooth Fade In ============================================ */ /* Base animation states */ /* Animated state */ /* Stagger delays for grid items */ /* Hero entrance animation */ .hero-content { animation: heroFadeIn 0.8s ease-out forwards; } @keyframes heroFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Smooth hover transitions for all interactive elements */ a, button, .card, .service-card, .feature-card { transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* Reduced motion preference */ @media (prefers-reduced-motion: reduce) { .hero-content { animation: none; } } /* ============================================ PARTNERSHIP TRUST SECTION ============================================ */ .trust-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--primary-color); color: white; font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 6px; } .trust-badge i { color: var(--gold-color); } /* Partnership Disclosure Notice (for service pages) */ /* Footer Partnership Text */ .footer-partnership { font-size: 12px; color: var(--text-light); margin-top: 10px; display: flex; align-items: center; gap: 8px; opacity: 0.9; } .footer-partnership i { color: var(--gold-color); } .footer-partnership strong { color: var(--gold-color); font-weight: 600; } /* Partner Links */ .partner-link { color: inherit; text-decoration: underline; text-decoration-color: var(--gold-color); text-underline-offset: 2px; transition: all 0.2s ease; } .partner-link:hover { color: var(--gold-color); text-decoration-color: var(--gold-color); } .footer-partnership .partner-link { color: var(--gold-color); } .footer-partnership .partner-link:hover { color: #fff; text-decoration-color: #fff; } @media (min-width: 992px) { .header-mobile, .footer-bar { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .container { max-width: 720px; } .services-grid { grid-template-columns: repeat(2, 1fr); } .why-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr; text-align: center; } .footer-links, .footer-services, .footer-contact { text-align: center; } .footer-links h4, .footer-services h4, .footer-contact h4 { display: inline-block; } .footer-links h4::after, .footer-services h4::after, .footer-contact h4::after { left: 50%; transform: translateX(-50%); } .footer-links ul, .footer-services ul { display: flex; flex-direction: column; align-items: center; } .footer-social { justify-content: center; } } html { scroll-padding-top: 80px; } @media (max-width: 991px) { html { scroll-padding-top: 70px; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } img { max-width: 100%; height: auto; } a { transition: var(--transition); } button { cursor: pointer; font-family: inherit; } input, textarea, button { font-family: inherit; } ::selection { background: var(--primary-color); color: var(--text-light); } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bg-light); } ::-webkit-scrollbar-thumb { background: var(--primary-color); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-dark); } @media (max-width: 991px) { ::-webkit-scrollbar { width: 5px; } } @supports (-webkit-touch-callout: none) { .footer-bar { padding-bottom: calc(env(safe-area-inset-bottom) + 5px); height: calc(65px + env(safe-area-inset-bottom)); } .main-content { padding-bottom: calc(65px + env(safe-area-inset-bottom)); } } .container { width: 100%; padding-left: 15px; padding-right: 15px; } @media (min-width: 576px) { .container { max-width: 540px; margin: 0 auto; } } @media (min-width: 768px) { .container { max-width: 720px; } } @media (min-width: 992px) { .container { max-width: 960px; } } @media (min-width: 1200px) { .container { max-width: 1140px; } } @media (min-width: 1400px) { .container { max-width: 1200px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } @media print { .header-mobile, .footer-bar, .sidebar-menu, .sidebar-overlay, .search-overlay { display: none !important; } .main-content { padding: 0 !important; } body { font-size: 12pt; line-height: 1.5; } } /* Search Results */ .search-result-item { display: flex; flex-direction: column; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border-radius: 8px; margin-bottom: 8px; text-decoration: none; transition: all 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.1); } .search-result-item:hover { background: rgba(255, 22, 84, 0.15); border-color: var(--coral-color, #FF1654); transform: translateX(4px); } .result-category { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold-color, #d4a54c); margin-bottom: 4px; } .result-title { font-size: 15px; font-weight: 600; color: #fff; } .search-result-item:hover .result-title { color: var(--coral-color, #FF1654); } .no-results { text-align: center; color: rgba(255, 255, 255, 0.6); padding: 20px; font-size: 14px; } /* ============================================ EXODUS DIVI INNER PAGE STYLES ============================================ */ /* Inner Page Hero - Exodus Style */ /* Exodus Feature Highlights (3-Column Cards below hero) */ /* Exodus Section Headers */ /* Exodus Stats Bar */ .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; } .stat-item { color: #fff; } .stat-number { font-family: var(--font-heading, 'Montserrat', sans-serif); font-size: 46px; font-weight: 800; line-height: 1; margin-bottom: 8px; } .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--gold, #d4a54c); } /* Exodus Service Cards Grid */ /* Exodus CTA Section */ .exodus-cta-section { background: linear-gradient(135deg, var(--primary, #0E2B48) 0%, #071824 100%); padding: 80px 0; text-align: center; } .exodus-cta-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 16px; } .exodus-cta-section p { color: rgba(255, 255, 255, 0.8); font-size: 1.1rem; margin-bottom: 30px; max-width: 600px; margin-left: auto; margin-right: auto; } .exodus-cta-btn { display: inline-flex; align-items: center; gap: 12px; background: var(--accent, #FF1654); color: #fff; padding: 18px 40px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; border-radius: 50px; transition: all 0.3s ease; } .exodus-cta-btn:hover { background: #fff; color: var(--primary, #0E2B48); transform: translateY(-3px); box-shadow: 0 10px 30px rgba(255, 22, 84, 0.4); } .exodus-cta-btn i { font-size: 18px; } /* Exodus Two-Column Layout */ /* Exodus Document/Feature List */ .exodus-feature-item { background: var(--bg-alt, #f0f2f5); padding: 20px; border-radius: 8px; border-left: 3px solid var(--accent, #FF1654); } .exodus-feature-item h4 { font-size: 14px; color: var(--primary, #0E2B48); margin-bottom: 8px; text-transform: uppercase; } .exodus-feature-item ul { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-muted, #555); } .exodus-feature-item li { margin-bottom: 4px; } /* Responsive Exodus Styles */ @media (max-width: 991px) { .stats-grid { grid-template-columns: 1fr; gap: 30px; } .stat-number { font-size: 36px; } } @media (max-width: 767px) { .exodus-cta-btn { padding: 16px 30px; font-size: 13px; } /* Footer Mobile Alignment */ .footer-grid { grid-template-columns: 1fr !important; gap: 30px; text-align: center; } .footer-brand, .footer-links, .footer-services, .footer-contact { text-align: center; } .footer-links h4, .footer-services h4, .footer-contact h4 { display: inline-block; position: relative; } .footer-links h4::after, .footer-services h4::after, .footer-contact h4::after { left: 50% !important; transform: translateX(-50%) !important; } .footer-links ul, .footer-services ul { display: flex; flex-direction: column; align-items: center; } .footer-links ul li, .footer-services ul li { text-align: center; } .footer-social { justify-content: center; } .footer-contact ul { display: flex; flex-direction: column; align-items: center; text-align: center; } .footer-contact ul li { display: flex; align-items: center; justify-content: center; gap: 10px; } } /* ============================================ END EXODUS DIVI INNER PAGE STYLES ============================================ */ /* Industry Page Responsive Grids */ /* ============================================ POPULAR DOCUMENTS SECTION ============================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 8px; text-decoration: none; font-weight: 600; font-family: var(--font-primary); font-size: 14px; transition: var(--transition); } .btn-accent { background: var(--accent-color); color: white; } .btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(255, 22, 84, 0.3); } /* ============================================ FORM ACCESSIBILITY IMPROVEMENTS ============================================ */ .form-group label { display: block; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.9); margin-bottom: 8px; } .contact-section .form-group input, .contact-section .form-group textarea { border-radius: 8px; } .contact-section .submit-btn { border-radius: 8px; margin-bottom: 100px; /* Space above mobile bottom nav */ } @media (min-width: 768px) { .contact-section .submit-btn { margin-bottom: 0; } } } /* End @layer components */