/* Reset and Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', sans-serif; background-color: #0A1128; color: #ffffff; line-height: 1.6; } /* Reserved: global image styles (no global blur) */ .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } /* Header */ .header { position: fixed; top: 0; left: 0; right: 0; background-color: rgba(10, 17, 40, 0.95); backdrop-filter: blur(10px); z-index: 1000; padding: 1rem 0; } .header .container { display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 700; color: #ffffff; } .nav { display: flex; gap: 2rem; } .nav-link { color: #ffffff; text-decoration: none; font-weight: 500; transition: color 0.3s ease; } .nav-link:hover { color: #00D4FF; } /* Buttons */ .btn { padding: 12px 24px; border: none; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; transition: all 0.3s ease; text-decoration: none; display: inline-block; } .btn-primary { background: linear-gradient(135deg, #00D4FF, #0099CC); color: #ffffff; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(0, 212, 255, 0.3); } .btn-outline { background: transparent; color: #ffffff; border: 2px solid #ffffff; } .btn-outline:hover { background: #ffffff; color: #0A1128; } .btn-white { background: #ffffff; color: #0A1128; } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3); } .btn-outline-white { background: transparent; color: #ffffff; border: 2px solid #ffffff; } .btn-outline-white:hover { background: #ffffff; color: #0A1128; } /* Hero Section */ .hero { padding: 120px 0 80px; background: linear-gradient(135deg, #0A1128 0%, #1a2332 100%); } .hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero-title { font-size: 3.5rem; font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; } .hero-title span { display: block; } .hero-subtitle { font-size: 1.2rem; color: #B8C5D6; margin-bottom: 2rem; line-height: 1.6; } .hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-form { display: flex; justify-content: center; } .form-card { background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(10px); border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 16px; padding: 2rem; width: 100%; max-width: 400px; box-shadow: 0 20px 40px rgba(0, 212, 255, 0.1); } .form-card h3 { text-align: center; margin-bottom: 1.5rem; font-size: 1.5rem; } .form-card input, .form-card select, .form-card textarea { width: 100%; padding: 12px 16px; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; color: #ffffff; font-size: 1rem; } /* Ensure dropdown option items are readable on open lists */ .form-card select option, .form-group select option { color: #0A1128; background-color: #ffffff; } .form-card input::placeholder, .form-card textarea::placeholder { color: #B8C5D6; } .form-card input:focus, .form-card select:focus, .form-card textarea:focus { outline: none; border-color: #00D4FF; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1); } /* Section Titles */ .section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 3rem; text-align: left; } /* Services Section */ .services { padding: 80px 0; background-color: #0F1A2E; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .service-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.1); border-top: 3px solid #00D4FF; border-radius: 12px; padding: 2rem; transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 212, 255, 0.1); } .service-icon { font-size: 2rem; color: #00D4FF; margin-bottom: 1rem; } .service-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #ffffff; } .service-card p { color: #B8C5D6; line-height: 1.6; } /* Process Section */ .process { padding: 80px 0; background-color: #0A1128; } .process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 3rem; } .process-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.1); border-top: 3px solid #00D4FF; border-radius: 12px; padding: 2rem; text-align: center; transition: transform 0.3s ease; } .process-card:hover { transform: translateY(-5px); } .process-number { width: 60px; height: 60px; background: linear-gradient(135deg, #00D4FF, #0099CC); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; margin: 0 auto 1rem; } .process-card h3 { font-size: 1.3rem; margin-bottom: 1rem; color: #ffffff; } .process-card p { color: #B8C5D6; line-height: 1.6; } .process-button { text-align: center; } /* Recent Work Section */ .recent-work { padding: 80px 0; background-color: #0F1A2E; } .work-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .work-item img { width: 100%; height: 250px; object-fit: cover; filter: blur(2px); border-radius: 12px; transition: transform 0.3s ease; } .work-item img:hover { transform: scale(1.05); } /* Testimonials Section */ .testimonials { padding: 80px 0; background-color: #0A1128; } .testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; } .testimonial-card { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 12px; padding: 2rem; transition: transform 0.3s ease; } .testimonial-card:hover { transform: translateY(-5px); } .testimonial-card p { font-style: italic; font-size: 1.1rem; margin-bottom: 1.5rem; color: #ffffff; line-height: 1.6; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-author img { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; } .testimonial-author span { font-weight: 600; color: #ffffff; } /* About Section */ .about { padding: 80px 0; background-color: #0F1A2E; } .about-content { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .about-image img { width: 100%; max-height: 220px; height: auto; object-fit: contain; border-radius: 0; border: none; background: transparent; } .about-text h2 { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #ffffff; } .about-text p { font-size: 1.1rem; color: #B8C5D6; line-height: 1.8; } /* CTA Section */ .cta { padding: 80px 0; background: linear-gradient(135deg, #00D4FF, #0099CC); } .cta-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; } .cta-content h2 { font-size: 2.5rem; font-weight: 700; color: #ffffff; } .cta-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } /* Footer */ .footer { padding: 40px 0; background-color: #0A1128; border-top: 1px solid rgba(255, 255, 255, 0.1); } .footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; } .footer-logo { font-size: 1.5rem; font-weight: 700; color: #ffffff; } .footer-nav { display: flex; gap: 2rem; flex-wrap: wrap; } .footer-nav a { color: #B8C5D6; text-decoration: none; transition: color 0.3s ease; } .footer-nav a:hover { color: #00D4FF; } /* Process Page Styles */ .process-page { padding: 120px 0 80px; background-color: #0A1128; } .breadcrumbs { margin-bottom: 2rem; font-size: 0.9rem; color: #B8C5D6; } .breadcrumbs a { color: #00D4FF; text-decoration: none; transition: color 0.3s ease; } .breadcrumbs a:hover { color: #ffffff; } .breadcrumbs .separator { margin: 0 0.5rem; color: #B8C5D6; } .page-header { margin-bottom: 4rem; } .page-header h1 { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff; line-height: 1.1; } .page-subtitle { font-size: 1.3rem; color: #B8C5D6; line-height: 1.6; } .process-content { display: grid; grid-template-columns: 300px 1fr; gap: 4rem; margin-bottom: 4rem; } /* Process Navigation */ .process-nav { position: sticky; top: 140px; height: fit-content; } .process-nav-list { display: flex; flex-direction: column; gap: 1rem; } .process-nav-item { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 12px; text-decoration: none; color: #B8C5D6; transition: all 0.3s ease; } .process-nav-item:hover, .process-nav-item.active { background: rgba(0, 212, 255, 0.1); border-color: #00D4FF; color: #ffffff; transform: translateX(5px); } .process-nav-icon { width: 40px; height: 40px; background: linear-gradient(135deg, #00D4FF, #0099CC); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #ffffff; font-size: 1.1rem; } .process-nav-item.active .process-nav-icon { background: #ffffff; color: #0A1128; } /* Process Details */ .process-details { background: rgba(255, 255, 255, 0.02); border-radius: 16px; padding: 2rem; border: 1px solid rgba(0, 212, 255, 0.1); } .phase-section { display: none; } .phase-section.active { display: block; } .phase-header { margin-bottom: 2rem; } .phase-header h2 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: #ffffff; } .phase-header p { font-size: 1.1rem; color: #B8C5D6; line-height: 1.6; } /* Metrics Table */ .phase-metrics { margin-bottom: 2rem; } .metrics-table { width: 100%; border-collapse: collapse; background: rgba(255, 255, 255, 0.03); border-radius: 8px; overflow: hidden; } .metrics-table th { background: rgba(0, 212, 255, 0.1); color: #ffffff; font-weight: 600; padding: 1rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .metrics-table td { padding: 1rem; color: #B8C5D6; border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .metrics-table tr:last-child td { border-bottom: none; } /* Phase Checklist */ .phase-checklist { margin-bottom: 2rem; } .phase-checklist h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 1rem; color: #ffffff; } .phase-checklist ul { list-style: none; } .phase-checklist li { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; color: #B8C5D6; line-height: 1.6; } .phase-checklist i { color: #00D4FF; font-size: 0.9rem; } .phase-quote { background: rgba(0, 212, 255, 0.05); border-left: 3px solid #00D4FF; padding: 1.5rem; border-radius: 0 8px 8px 0; margin-top: 2rem; } .phase-quote p { color: #B8C5D6; font-style: italic; font-size: 1.1rem; line-height: 1.6; margin: 0; } /* Process Actions */ .process-actions { display: flex; gap: 1rem; justify-content: center; margin-bottom: 4rem; } .process-actions .btn { display: flex; align-items: center; gap: 0.5rem; } /* Footer Social */ .footer-social { display: flex; gap: 1rem; } .social-link { color: #B8C5D6; font-size: 1.2rem; transition: color 0.3s ease; } .social-link:hover { color: #00D4FF; } /* Modal Styles */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 17, 40, 0.95); backdrop-filter: blur(10px); z-index: 10000; overflow-y: auto; padding: 20px; } .modal.show { display: flex; align-items: center; justify-content: center; } .modal-content { background: #0A1128; border: 1px solid rgba(0, 212, 255, 0.2); border-radius: 16px; max-width: 800px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5); } .modal-header { padding: 2rem 2rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; } .modal-title { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .modal-title i { color: #00D4FF; font-size: 1.5rem; } .modal-title h2 { font-size: 2rem; font-weight: 700; color: #ffffff; margin: 0; } .modal-subtitle { color: #B8C5D6; font-size: 1.1rem; margin: 0; } .modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: transparent; border: none; color: #B8C5D6; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; transition: color 0.3s ease; } .modal-close:hover { color: #ffffff; } /* Quote Form */ .quote-form { padding: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; color: #ffffff; font-weight: 600; margin-bottom: 0.75rem; font-size: 1rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .form-group input, .form-group textarea { width: 100%; padding: 12px 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; color: #ffffff; font-size: 1rem; transition: border-color 0.3s ease; } .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #00D4FF; box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1); } .form-group input::placeholder, .form-group textarea::placeholder { color: #B8C5D6; } /* Package Options */ .package-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .package-option { cursor: pointer; } .package-option input[type="radio"] { display: none; } .package-label { display: flex; flex-direction: column; align-items: center; padding: 1rem; background: rgba(255, 255, 255, 0.03); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; transition: all 0.3s ease; text-align: center; } .package-option input[type="radio"]:checked + .package-label { background: #00D4FF; border-color: #00D4FF; color: #0A1128; } .package-name { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; } .package-price { font-size: 0.9rem; opacity: 0.8; } /* Option Buttons */ .option-buttons { display: flex; gap: 1rem; flex-wrap: wrap; } .option-button { cursor: pointer; } .option-button input[type="radio"] { display: none; } .option-button span { display: inline-block; padding: 8px 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; color: #B8C5D6; font-size: 0.9rem; transition: all 0.3s ease; } .option-button input[type="radio"]:checked + span { background: #00D4FF; border-color: #00D4FF; color: #0A1128; } /* Info Panels */ .info-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 2rem 0; } .info-panel { background: rgba(0, 212, 255, 0.05); border: 1px solid rgba(0, 212, 255, 0.1); border-radius: 12px; padding: 1.5rem; } .info-panel h4 { color: #00D4FF; font-size: 1.1rem; margin-bottom: 1rem; font-weight: 600; } .info-panel ul { list-style: none; margin: 0; padding: 0; } .info-panel li { color: #B8C5D6; margin-bottom: 0.5rem; font-size: 0.9rem; position: relative; padding-left: 1.5rem; } .info-panel li:before { content: "✓"; position: absolute; left: 0; color: #00D4FF; font-weight: bold; } .info-panel li:last-child { margin-bottom: 0; } /* Form Footer */ .form-footer { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.5rem; margin-top: 2rem; } .disclaimer { color: #B8C5D6; font-size: 0.9rem; margin-bottom: 1.5rem; text-align: center; } .disclaimer a { color: #00D4FF; text-decoration: none; } .disclaimer a:hover { text-decoration: underline; } .form-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .btn-secondary { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); } /* Modal Animation */ .modal-content { transform: scale(0.9) translateY(-20px); opacity: 0; transition: all 0.3s ease; } .modal.show .modal-content { transform: scale(1) translateY(0); opacity: 1; } /* Compact Contact Modal (fits on a single frame, no scrolling) */ #contactModal { padding: 10px; } #contactModal .modal-content { max-width: 480px; width: 95%; max-height: none; overflow: hidden; } #contactModal .modal-header { padding: 1rem 1rem 0.75rem; } #contactModal .modal-title i { font-size: 1.1rem; } #contactModal .modal-title h2 { font-size: 1.25rem; } #contactModal .modal-subtitle { font-size: 0.9rem; opacity: 0.85; } #contactModal .contact-form { padding: 0.75rem 1rem 1rem; } #contactModal .form-row { grid-template-columns: 1fr 1fr; gap: 0.75rem; } #contactModal .form-group { margin-bottom: 0.5rem; } #contactModal .form-group input, #contactModal .form-group textarea { padding: 8px 10px; } #contactModal .option-button span { padding: 6px 10px; font-size: 0.8rem; } #contactModal .contact-form textarea { height: 64px; } #contactModal .form-footer { margin-top: 0.75rem; padding-top: 0.75rem; } #contactModal .form-actions { gap: 0.75rem; } #contactModal .btn { padding: 8px 14px; font-size: 0.9rem; } /* Compact modal responsive tweak */ @media (max-width: 640px) { #contactModal .form-row { grid-template-columns: 1fr; } #contactModal .modal-content { max-width: 520px; } } /* Responsive Design */ @media (max-width: 768px) { /* Mobile container padding */ .container { padding: 0 15px; } /* Mobile header adjustments */ .hero-content { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .hero-title { font-size: 2.2rem; line-height: 1.2; } .hero-subtitle { font-size: 1rem; margin-bottom: 1.5rem; } /* Mobile form adjustments */ .form-card { padding: 1.5rem; max-width: 100%; } .form-card h3 { font-size: 1.3rem; } .form-card input, .form-card select, .form-card textarea { padding: 10px 12px; font-size: 0.95rem; } .about-content { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .about-text h2 { font-size: 2rem; } .about-text p { font-size: 1rem; } .about-image img { max-height: 180px; } .cta-content { flex-direction: column; text-align: center; } .cta-content h2 { font-size: 2rem; } .nav { display: none; } .header .btn { display: none; } /* Mobile services grid */ .services-grid { grid-template-columns: 1fr; gap: 1.5rem; } .service-card { padding: 1.5rem; } .service-card h3 { font-size: 1.2rem; } /* Mobile process grid */ .process-grid { grid-template-columns: 1fr; gap: 1.5rem; } .process-card { padding: 1.5rem; } .process-number { width: 50px; height: 50px; font-size: 1.3rem; } /* Mobile work grid */ .work-grid { grid-template-columns: 1fr; gap: 1.5rem; } .work-item img { height: 200px; } /* Mobile testimonials */ .testimonials-grid { grid-template-columns: 1fr; gap: 1.5rem; } .testimonial-card { padding: 1.5rem; } .testimonial-card p { font-size: 1rem; } /* Mobile section titles */ .section-title { font-size: 2rem; margin-bottom: 2rem; } /* Mobile buttons */ .btn { padding: 10px 20px; font-size: 0.95rem; } .hero-buttons { flex-direction: column; align-items: center; gap: 0.75rem; } .cta-buttons { flex-direction: column; align-items: center; gap: 0.75rem; } /* Process Page Mobile Styles */ .process-content { grid-template-columns: 1fr; gap: 2rem; } .process-nav { position: static; order: 2; } .process-nav-list { flex-direction: row; overflow-x: auto; padding-bottom: 1rem; } .process-nav-item { min-width: 140px; flex-direction: column; text-align: center; padding: 1rem 0.75rem; } .process-nav-item span { font-size: 0.9rem; } .page-header h1 { font-size: 2.2rem; } .page-subtitle { font-size: 1rem; } .process-actions { flex-direction: column; align-items: center; } .footer-content { flex-direction: column; text-align: center; gap: 1.5rem; } .footer-nav { flex-direction: column; gap: 1rem; } /* Modal Mobile Styles */ .modal-content { max-width: 95vw; margin: 10px; } .modal-header { padding: 1.5rem 1.5rem 1rem; } .modal-title h2 { font-size: 1.5rem; } .modal-subtitle { font-size: 1rem; } .quote-form { padding: 1.5rem; } .form-row { grid-template-columns: 1fr; gap: 1rem; } .package-options { grid-template-columns: 1fr; gap: 0.75rem; } .option-buttons { flex-direction: column; gap: 0.75rem; } .info-panels { grid-template-columns: 1fr; gap: 1rem; } .form-actions { flex-direction: column; gap: 1rem; } .form-actions .btn { width: 100%; justify-content: center; } /* Mobile navigation improvements */ .header { padding: 0.75rem 0; } .logo { font-size: 1.5rem; } /* Add mobile menu button */ .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: #ffffff; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; } } /* Desktop: Hide mobile menu overlay */ .mobile-menu-overlay { display: none !important; position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: 999 !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Mobile Menu Toggle Button */ .mobile-menu-toggle { display: none; align-items: center; justify-content: center; background: transparent; border: none; color: #ffffff; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 6px; transition: background-color 0.3s ease; } .mobile-menu-toggle:hover { background: rgba(255, 255, 255, 0.1); } .mobile-menu-toggle.active { background: rgba(0, 212, 255, 0.2); color: #00D4FF; } /* Mobile-specific Contact Modal Styles */ @media (max-width: 768px) { /* Mobile Contact Modal - Full Screen */ #contactModal { padding: 0; align-items: flex-start; justify-content: flex-start; } #contactModal .modal-content { max-width: 100%; width: 100%; height: 100vh; max-height: 100vh; border-radius: 0; margin: 0; display: flex; flex-direction: column; overflow: hidden; } #contactModal .modal-header { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 17, 40, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; } #contactModal .modal-title h2 { font-size: 1.5rem; margin: 0; } #contactModal .modal-subtitle { font-size: 0.9rem; margin: 0.5rem 0 0 0; } #contactModal .modal-close { top: 1rem; right: 1rem; background: rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 0.5rem; border: 1px solid rgba(255, 255, 255, 0.2); } #contactModal .contact-form { padding: 1rem; flex: 1; overflow-y: auto; display: flex; flex-direction: column; } #contactModal .form-row { grid-template-columns: 1fr; gap: 1rem; } #contactModal .form-group { margin-bottom: 1rem; } #contactModal .form-group input, #contactModal .form-group textarea { padding: 12px 16px; font-size: 16px; /* Prevents zoom on iOS */ border-radius: 8px; } #contactModal .option-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } #contactModal .option-button span { padding: 10px 12px; font-size: 0.9rem; text-align: center; border-radius: 8px; } #contactModal .form-footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 17, 40, 0.95); backdrop-filter: blur(10px); position: sticky; bottom: 0; } #contactModal .form-actions { flex-direction: column; gap: 0.75rem; } #contactModal .form-actions .btn { width: 100%; padding: 12px 16px; font-size: 1rem; justify-content: center; } /* Mobile Menu Styles */ .mobile-menu-toggle { display: flex !important; align-items: center; justify-content: center; background: transparent; border: none; color: #ffffff; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 6px; transition: background-color 0.3s ease; } /* Mobile Menu Toggle - Show on mobile */ .mobile-menu-toggle { display: flex !important; } /* Mobile Menu Overlay */ .mobile-menu-overlay { display: none !important; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(10, 17, 40, 0.98); backdrop-filter: blur(10px); z-index: 999; overflow-y: auto; } .mobile-menu-overlay.show { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; } .mobile-menu-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); background: rgba(10, 17, 40, 0.95); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 10; } .mobile-menu-logo { font-size: 1.5rem; font-weight: 700; color: #ffffff; } .mobile-menu-close { background: transparent; border: none; color: #ffffff; font-size: 1.2rem; cursor: pointer; padding: 0.5rem; border-radius: 6px; transition: background-color 0.3s ease; } .mobile-menu-close:hover { background: rgba(255, 255, 255, 0.1); } .mobile-menu-content { padding: 2rem 1rem; } .mobile-menu-nav { display: flex; flex-direction: column; gap: 0; } .mobile-menu-nav a { display: flex; align-items: center; justify-content: space-between; padding: 1rem; color: #ffffff; text-decoration: none; font-weight: 500; font-size: 1.1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.05); transition: all 0.3s ease; } .mobile-menu-nav a:hover { background: rgba(0, 212, 255, 0.1); color: #00D4FF; padding-left: 1.5rem; } .mobile-menu-nav a i { color: #B8C5D6; font-size: 0.9rem; transition: color 0.3s ease; } .mobile-menu-nav a:hover i { color: #00D4FF; } .mobile-menu-cta { margin-top: 2rem; padding: 1rem; background: rgba(0, 212, 255, 0.1); border-radius: 12px; border: 1px solid rgba(0, 212, 255, 0.2); } .mobile-menu-cta h3 { color: #00D4FF; font-size: 1.1rem; margin-bottom: 1rem; text-align: center; } .mobile-menu-cta .btn { width: 100%; justify-content: center; padding: 12px 16px; font-size: 1rem; } /* Hide desktop navigation on mobile */ .nav { display: none !important; } .header .btn { display: none !important; } } /* Extra small mobile devices */ @media (max-width: 480px) { .container { padding: 0 12px; } .hero-title { font-size: 1.8rem; } .hero-subtitle { font-size: 0.95rem; } .section-title { font-size: 1.8rem; } .page-header h1 { font-size: 1.8rem; } .form-card { padding: 1rem; } .service-card, .process-card, .testimonial-card { padding: 1rem; } .work-item img { height: 180px; } .btn { padding: 8px 16px; font-size: 0.9rem; } .hero-buttons, .cta-buttons { gap: 0.5rem; } } /* Services Page */ .services-page .services-hero { padding: 120px 0 40px; background-color: #0A1128; } .services-page .page-title { font-size: 3rem; font-weight: 700; color: #ffffff; margin-bottom: 0.75rem; } .services-page .page-subtitle { color: #B8C5D6; } .services-catalog { background-color: #0F1A2E; padding: 60px 0; } .catalog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; } .catalog-card { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: start; padding: 1.25rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.1); border-radius: 12px; text-decoration: none; color: #B8C5D6; transition: transform .2s ease, box-shadow .2s ease; } .catalog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,212,255,0.1); } .catalog-card h3 { color: #fff; margin-bottom: .25rem; font-size: 1.2rem; } .catalog-icon { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: linear-gradient(135deg, #00D4FF, #0099CC); color: #0A1128; } .catalog-meta { color: #8fbad0; font-weight: 600; } .packages-section { background-color: #0A1128; padding: 70px 0; } .packages-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .package-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.1); border-radius: 12px; padding: 1.5rem; } .package-card.featured { border-color: #00D4FF; box-shadow: 0 20px 40px rgba(0,212,255,0.15); } .package-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .75rem; } .package-head h3 { color: #fff; font-size: 1.3rem; } .package-head .price { color: #00D4FF; font-weight: 700; } .package-list { list-style: none; margin: 1rem 0; padding: 0; } .package-list li { position: relative; padding-left: 1.25rem; margin-bottom: .6rem; color: #B8C5D6; } .package-list li:before { content: "✓"; position: absolute; left: 0; color: #00D4FF; font-weight: 700; } .package-actions { display: flex; gap: .75rem; } .addons-section { background-color: #0F1A2E; padding: 60px 0; } .addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .addon-card { background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.1); border-radius: 12px; padding: 1rem; } /* Services groups and badges */ .service-group { background: rgba(255,255,255,0.03); border: 1px solid rgba(0,212,255,0.1); border-radius: 12px; padding: 1rem; margin-bottom: 1rem; } .service-group h3 { color: #8fbad0; font-size: 1rem; margin-bottom: .75rem; letter-spacing: .2px; } .badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; } .badge { display: inline-block; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); border-radius: 8px; color: #B8C5D6; font-size: .9rem; text-decoration: none; } .badge:hover { border-color: #00D4FF; color: #fff; background: rgba(0,212,255,0.08); } /* Sidebar counts */ .process-nav-item .nav-count { margin-left: auto; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: #8fbad0; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; } .process-nav-item.active .nav-count { background: #ffffff; color: #0A1128; border-color: #ffffff; } /* Force packages into a single horizontal row */ .packages-section .packages-grid { display: flex; flex-wrap: nowrap; gap: 1rem; overflow: hidden; } .packages-section .package-card { flex: 1 1 25%; min-width: 0; padding: 1rem; } /* Ensure exactly four cards fit the row */ .packages-section .packages-grid > .package-card { width: 25%; } @media (max-width: 900px) { .packages-section .package-card { padding: 0.75rem; } .packages-section .packages-grid { gap: 0.75rem; } } /* Force pure white text within Services page/components */ .process-page .page-subtitle, .process-page .process-details, .process-page .phase-header p, .process-page .service-group h3, .process-page .service-group p, .process-page .phase-checklist li, .process-page .phase-quote p, .process-page .metrics-table th, .process-page .metrics-table td, .process-page .badge, .process-page .process-nav-item, .packages-section, .packages-section .package-card, .packages-section .package-list li, .addons-section, .addons-section .addon-card { color: #ffffff; } .process-page .badge { color: #ffffff; } .process-page .process-nav-item { color: #ffffff; } .packages-section .price { color: #ffffff; } @media (max-width: 480px) { .hero-title { font-size: 2rem; } .section-title { font-size: 2rem; } .hero-buttons { flex-direction: column; align-items: center; } .cta-buttons { flex-direction: column; align-items: center; } .container { padding: 0 15px; } } /* ===== Mobile Fixes for Process Page ===== */ /* Hide horizontal scrollbar for process nav */ @media (max-width: 768px) { .process-nav-list { scrollbar-width: none; /* Firefox */ } .process-nav-list::-webkit-scrollbar { display: none; /* Chrome, Safari */ } } /* Reduce padding and font sizes inside phase sections */ @media (max-width: 768px) { .process-details { padding: 1rem; } .phase-header h2 { font-size: 1.5rem; } .phase-header p { font-size: 0.95rem; } } /* Make metrics table scrollable on small screens */ @media (max-width: 640px) { .metrics-table { display: block; overflow-x: auto; white-space: nowrap; } .metrics-table th, .metrics-table td { font-size: 0.85rem; padding: 0.5rem; } } /* Make process action buttons full width on mobile */ @media (max-width: 640px) { .process-actions .btn { width: 100%; justify-content: center; } } /* ===== Extra Mobile Fixes for Process Page ===== */ /* Stack nav above details for better flow */ @media (max-width: 640px) { .process-content { display: flex; flex-direction: column; } .process-nav { order: -1; /* show nav first */ margin-bottom: 1rem; } } /* Make nav items more compact and touch-friendly */ @media (max-width: 640px) { .process-nav-item { min-width: 110px; padding: 0.75rem; font-size: 0.8rem; } .process-nav-icon { width: 32px; height: 32px; font-size: 0.9rem; } } /* Phase content readability */ @media (max-width: 640px) { .phase-header h2 { font-size: 1.3rem; } .phase-header p { font-size: 0.9rem; line-height: 1.4; } .phase-checklist li { font-size: 0.85rem; } .phase-quote p { font-size: 0.9rem; } } /* Table tweaks */ @media (max-width: 480px) { .metrics-table { font-size: 0.8rem; } .metrics-table th, .metrics-table td { padding: 0.4rem 0.6rem; } } /* Buttons: stretch and stack */ @media (max-width: 480px) { .process-actions { flex-direction: column; gap: 0.75rem; } .process-actions .btn { width: 100%; } } /* ===== Services Page Mobile Fixes ===== */ /* Stack sidebar nav above details */ @media (max-width: 768px) { .process-content { flex-direction: column; } .process-nav { order: -1; margin-bottom: 1rem; } } /* Compact nav items for services */ @media (max-width: 768px) { .process-nav-item { min-width: 120px; font-size: 0.8rem; padding: 0.6rem; } .process-nav-icon { width: 32px; height: 32px; font-size: 0.9rem; } } /* Phase section readability */ @media (max-width: 640px) { .phase-header h2 { font-size: 1.3rem; } .phase-header p { font-size: 0.9rem; } .badge-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0.5rem; } .badge { font-size: 0.8rem; padding: 0.4rem 0.6rem; } } /* Packages grid responsive */ @media (max-width: 1024px) { .packages-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } @media (max-width: 640px) { .packages-grid { grid-template-columns: 1fr; gap: 1rem; } .package-card { padding: 1rem; } .package-head h3 { font-size: 1.1rem; } .package-head .price { font-size: 1rem; } .package-list li { font-size: 0.9rem; } } /* ===== Services Page Strong Mobile Fixes ===== */ /* Force sidebar nav above details on small screens */ @media (max-width: 768px) { .process-content { display: flex; flex-direction: column !important; } .process-nav { order: -1 !important; width: 100% !important; margin-bottom: 1rem !important; } .process-details { width: 100% !important; } } /* Shrink and scroll nav items horizontally if needed */ @media (max-width: 640px) { .process-nav-list { display: flex; overflow-x: auto; gap: 0.5rem; padding-bottom: 0.5rem; scrollbar-width: none; } .process-nav-list::-webkit-scrollbar { display: none; } .process-nav-item { flex: 0 0 auto; min-width: 110px; font-size: 0.8rem; padding: 0.6rem; } } /* Make badges more compact */ @media (max-width: 640px) { .badge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.5rem; } .badge { font-size: 0.8rem; padding: 0.3rem 0.5rem; } } /* Packages grid strict breakpoints */ @media (max-width: 1024px) { .packages-grid { display: grid; grid-template-columns: 1fr 1fr !important; gap: 1rem; } } @media (max-width: 640px) { .packages-grid { grid-template-columns: 1fr !important; } .package-card { padding: 1rem; } .package-head h3 { font-size: 1.1rem; } .package-head .price { font-size: 1rem; } .package-list li { font-size: 0.9rem; } } /* ===== Services Page Packages Fixes ===== */ /* Tablet: 2 columns */ @media (max-width: 1024px) { .packages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .package-card { padding: 1.2rem; } } /* Mobile: 1 column */ @media (max-width: 640px) { .packages-grid { grid-template-columns: 1fr; gap: 1rem; } .package-card { padding: 1rem; border-radius: 12px; } .package-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .package-head h3 { font-size: 1rem; } .package-head .price { font-size: 0.95rem; font-weight: 600; } .package-list { margin: 0; padding: 0; list-style: none; } .package-list li { font-size: 0.85rem; margin-bottom: 0.4rem; line-height: 1.3; } .package-actions { margin-top: 1rem; } .package-actions .btn { width: 100%; text-align: center; } } /* ===== Strong Fix for Services Packages Section ===== */ /* Desktop default stays as is */ /* Tablet view (≤1024px): 2 columns */ @media (max-width: 1024px) { .packages-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; } .package-card { padding: 1.5rem; } } /* Mobile view (≤768px): force single column */ @media (max-width: 768px) { .packages-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .package-card { width: 100% !important; padding: 1rem !important; margin: 0 auto; border-radius: 10px; } /* Header (title + price) */ .package-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; } .package-head h3 { font-size: 1rem !important; margin: 0; } .package-head .price { font-size: 0.9rem !important; font-weight: 600; } /* Package list cleanup */ .package-list { margin: 0; padding: 0; list-style: none; } .package-list li { font-size: 0.85rem !important; margin-bottom: 0.4rem; line-height: 1.4; } /* Buttons full width */ .package-actions { margin-top: 1rem; } .package-actions .btn { width: 100% !important; text-align: center; padding: 0.7rem; } } /* ===== Process Page Cards Responsiveness ===== */ /* Tablet (≤1024px): switch to 2 columns */ @media (max-width: 1024px) { .process-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; } .process-card { padding: 1.5rem; } } /* Mobile (≤640px): stack into single column */ @media (max-width: 640px) { .process-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .process-card { padding: 1rem !important; border-radius: 10px; text-align: center; } /* Number circle smaller */ .process-number { width: 36px; height: 36px; font-size: 0.9rem; margin: 0 auto 0.5rem auto; } /* Card heading + text */ .process-card h3 { font-size: 1.1rem !important; margin-bottom: 0.5rem; } .process-card p { font-size: 0.9rem !important; line-height: 1.4; } } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding-bottom: 2rem; } .footer-brand h3 { font-size: 1.6rem; font-weight: 700; color: #ffffff; margin-bottom: 0.75rem; } .footer-brand p { color: #B8C5D6; font-size: 0.95rem; line-height: 1.6; margin-bottom: 1rem; } .footer-links h4, .footer-contact h4 { color: #ffffff; font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem; } .footer-links ul, .footer-contact ul { list-style: none; padding: 0; margin: 0; } .footer-links li, .footer-contact li { margin-bottom: 0.5rem; color: #B8C5D6; font-size: 0.95rem; } .footer-links a { color: #B8C5D6; text-decoration: none; transition: color 0.3s ease; } .footer-links a:hover { color: #00D4FF; } .footer-social { display: flex; gap: 1rem; margin-top: 0.5rem; } .footer-social a { font-size: 1.3rem; color: #B8C5D6; transition: color 0.3s ease; } .footer-social a:hover { color: #00D4FF; } .footer-contact i { color: #00D4FF; margin-right: 0.5rem; } .footer-bottom { text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1rem; color: #B8C5D6; font-size: 0.9rem; }