/* ==================================== Engineered Reach - Custom Styles Engineering-inspired design for digital marketing agency ==================================== */ :root{--primary-blue: #007BFF;--primary-dark: #0056b3;--accent-blue: #00a8ff;--dark-text: #1a1a1a;--gray-text: #4a5568;--light-gray: #e2e8f0;--bg-white: #ffffff;--bg-light: #f8f9fa;--font-heading: 'Outfit', sans-serif;--font-body: 'Plus Jakarta Sans', sans-serif;--section-padding: 80px;--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);--shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);} /* ==================================== Global Styles ==================================== */ *{margin: 0;padding: 0;box-sizing: border-box;} body{font-family: var(--font-body);color: var(--dark-text);line-height: 1.7;font-size: 16px;overflow-x: hidden;} h1, h2, h3, h4, h5, h6{font-family: var(--font-heading);font-weight: 700;line-height: 1.2;letter-spacing: -0.02em;} a{text-decoration: none;transition: var(--transition);} img{max-width: 100%;height: auto;} section{padding: var(--section-padding) 0;} /* ==================================== Navigation ==================================== */ .navbar{background: linear-gradient(135deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 86, 179, 0.85) 100%);backdrop-filter: blur(10px);padding: 1rem 0;transition: var(--transition);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);} .navbar.scrolled{background: rgba(0, 0, 0, 0.95);padding: 0.5rem 0;} .navbar-brand{font-family: var(--font-heading);font-size: 1.5rem;font-weight: 800;color: white !important;display: flex;align-items: center;letter-spacing: -0.01em;} .navbar-brand i{font-size: 1.8rem;color: var(--accent-blue);} .brand-text{background: linear-gradient(135deg, #fff 0%, var(--accent-blue) 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;} .nav-link{color: rgba(255, 255, 255, 0.85) !important;font-weight: 500;padding: 0.5rem 1.2rem !important;transition: var(--transition);position: relative;} .nav-link::after{content: '';position: absolute;bottom: 0;left: 50%;width: 0;height: 2px;background: var(--accent-blue);transition: var(--transition);transform: translateX(-50%);} .nav-link:hover::after, .nav-link.active::after{width: 60%;} .nav-link:hover{color: white !important;} .btn-nav-cta{background: var(--accent-blue);color: white !important;border-radius: 8px;padding: 0.6rem 1.5rem !important;margin-left: 1rem;} .btn-nav-cta::after{display: none;} .btn-nav-cta:hover{background: var(--primary-dark);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 168, 255, 0.3);} /* ==================================== Hero Section ==================================== */ .hero-section{position: relative;min-height: 100vh;display: flex;align-items: center;overflow: hidden;background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);} .hero-background{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 0;} .hero-img{width: 100%;height: 100%;object-fit: cover;opacity: 0.25;filter: grayscale(20%);} .grid-overlay{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: linear-gradient(rgba(0, 168, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 168, 255, 0.05) 1px, transparent 1px);background-size: 50px 50px;z-index: 1;} .hero-content{position: relative;z-index: 2;} .hero-text{animation: fadeInUp 1s ease-out;} @keyframes fadeInUp{from{opacity: 0;transform: translateY(30px);} to{opacity: 1;transform: translateY(0);}} .hero-badge{display: inline-block;background: rgba(0, 168, 255, 0.15);border: 1px solid rgba(0, 168, 255, 0.3);color: var(--accent-blue);padding: 0.5rem 1.2rem;border-radius: 50px;font-weight: 600;font-size: 0.9rem;margin-bottom: 1.5rem;letter-spacing: 0.5px;text-transform: uppercase;} .hero-title{color: white;font-size: 4rem;font-weight: 800;line-height: 1.1;margin-bottom: 1rem;animation: fadeInUp 1s ease-out 0.2s both;} .hero-subtitle{color: var(--accent-blue);font-size: 1.8rem;font-weight: 600;margin-bottom: 1.5rem;animation: fadeInUp 1s ease-out 0.4s both;} .hero-description{color: rgba(255, 255, 255, 0.85);font-size: 1.2rem;max-width: 600px;margin-bottom: 2.5rem;line-height: 1.8;animation: fadeInUp 1s ease-out 0.6s both;} .hero-cta-group{display: flex;gap: 1rem;flex-wrap: wrap;margin-bottom: 3rem;animation: fadeInUp 1s ease-out 0.8s both;} .btn-primary{background: linear-gradient(135deg, var(--accent-blue) 0%, var(--primary-blue) 100%);border: none;padding: 1rem 2rem;font-weight: 600;border-radius: 10px;box-shadow: 0 4px 16px rgba(0, 168, 255, 0.3);transition: var(--transition);} .btn-primary:hover{transform: translateY(-3px);box-shadow: 0 8px 24px rgba(0, 168, 255, 0.4);background: linear-gradient(135deg, var(--primary-blue) 0%, var(--accent-blue) 100%);} .btn-outline-light{border: 2px solid rgba(255, 255, 255, 0.3);color: white;padding: 1rem 2rem;font-weight: 600;border-radius: 10px;background: transparent;transition: var(--transition);} .btn-outline-light:hover{background: white;color: var(--primary-blue);border-color: white;transform: translateY(-3px);} .hero-stats{display: flex;gap: 3rem;flex-wrap: wrap;animation: fadeInUp 1s ease-out 1s both;} .stat-item{text-align: left;} .stat-number{color: var(--accent-blue);font-size: 2.5rem;font-weight: 800;font-family: var(--font-heading);} .stat-label{color: rgba(255, 255, 255, 0.7);font-size: 0.9rem;text-transform: uppercase;letter-spacing: 1px;margin-top: 0.3rem;} /* ==================================== Section Headers ==================================== */ .section-title{font-size: 2.8rem;font-weight: 800;color: var(--dark-text);margin-bottom: 1rem;position: relative;} .section-subtitle{font-size: 1.2rem;color: var(--gray-text);max-width: 700px;margin: 0 auto;} /* ==================================== Services Overview ==================================== */ .services-overview{background: var(--bg-light);position: relative;} .service-card{background: white;padding: 2.5rem;border-radius: 16px;height: 100%;transition: var(--transition);border: 1px solid rgba(0, 123, 255, 0.1);position: relative;overflow: hidden;} .service-card::before{content: '';position: absolute;top: 0;left: 0;width: 100%;height: 4px;background: linear-gradient(90deg, var(--accent-blue), var(--primary-blue));transform: scaleX(0);transition: var(--transition);transform-origin: left;} .service-card:hover::before{transform: scaleX(1);} .service-card:hover{transform: translateY(-8px);box-shadow: var(--shadow-lg);} .service-icon{width: 70px;height: 70px;background: linear-gradient(135deg, rgba(0, 168, 255, 0.1) 0%, rgba(0, 123, 255, 0.05) 100%);border-radius: 12px;display: flex;align-items: center;justify-content: center;margin-bottom: 1.5rem;} .service-icon i{font-size: 2rem;color: var(--primary-blue);} .service-card h3{font-size: 1.4rem;margin-bottom: 1rem;color: var(--dark-text);} .service-card p{color: var(--gray-text);line-height: 1.7;margin: 0;} /* ==================================== Results Section ==================================== */ .results-section{background: white;} .result-item{display: flex;gap: 1.5rem;margin-bottom: 2rem;padding: 1.5rem;background: var(--bg-light);border-radius: 12px;transition: var(--transition);} .result-item:hover{background: linear-gradient(135deg, rgba(0, 168, 255, 0.05) 0%, rgba(0, 123, 255, 0.02) 100%);transform: translateX(8px);} .result-icon{width: 60px;height: 60px;background: linear-gradient(135deg, var(--accent-blue), var(--primary-blue));border-radius: 12px;display: flex;align-items: center;justify-content: center;flex-shrink: 0;} .result-icon i{font-size: 1.8rem;color: white;} .result-text h4{font-size: 1.3rem;margin-bottom: 0.5rem;color: var(--dark-text);} .result-text p{color: var(--gray-text);margin: 0;} .results-visual{position: relative;} .results-visual::after{content: '';position: absolute;top: -20px;right: -20px;width: 200px;height: 200px;background: linear-gradient(135deg, rgba(0, 168, 255, 0.1), transparent);border-radius: 50%;z-index: -1;} /* ==================================== Testimonials ==================================== */ .testimonials-section{background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%);color: white;} .testimonials-section .section-title, .testimonials-section .section-subtitle{color: white;} .testimonial-card{background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(10px);border: 1px solid rgba(255, 255, 255, 0.1);padding: 2.5rem;border-radius: 16px;height: 100%;transition: var(--transition);} .testimonial-card:hover{background: rgba(255, 255, 255, 0.08);transform: translateY(-8px);border-color: rgba(0, 168, 255, 0.3);} .testimonial-rating{color: #fbbf24;margin-bottom: 1.5rem;font-size: 1.1rem;} .testimonial-text{font-size: 1.1rem;line-height: 1.8;margin-bottom: 1.5rem;color: rgba(255, 255, 255, 0.9);font-style: italic;} .testimonial-author strong{display: block;color: white;font-size: 1.1rem;margin-bottom: 0.3rem;} .testimonial-author span{color: var(--accent-blue);font-size: 0.9rem;} /* ==================================== Nationwide Section ==================================== */ .nationwide-section{background: var(--bg-light);} .state-item{display: flex;align-items: center;padding: 1rem;background: white;border-radius: 8px;font-weight: 600;color: var(--dark-text);transition: var(--transition);border: 1px solid rgba(0, 123, 255, 0.1);} .state-item i{color: var(--primary-blue);font-size: 1.2rem;} .state-item:hover{background: linear-gradient(135deg, rgba(0, 168, 255, 0.05) 0%, rgba(0, 123, 255, 0.02) 100%);transform: translateX(5px);border-color: var(--accent-blue);} .map-visual{position: relative;} .map-visual img{box-shadow: var(--shadow-lg);} /* ==================================== CTA Section ==================================== */ .cta-section{background: white;} .cta-box{background: linear-gradient(135deg, var(--accent-blue) 0%, var(--primary-blue) 100%);padding: 4rem;border-radius: 20px;box-shadow: 0 12px 40px rgba(0, 123, 255, 0.3);position: relative;overflow: hidden;} .cta-box::before{content: '';position: absolute;top: -50%;right: -20%;width: 500px;height: 500px;background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);border-radius: 50%;} .cta-title{color: white;font-size: 2.5rem;font-weight: 800;margin-bottom: 1rem;} .cta-text{color: rgba(255, 255, 255, 0.9);font-size: 1.2rem;margin: 0;} .cta-box .btn-light{background: white;color: var(--primary-blue);font-weight: 700;border: none;padding: 1rem 2rem;border-radius: 10px;box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);transition: var(--transition);} .cta-box .btn-light:hover{transform: translateY(-3px);box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);} /* ==================================== Footer ==================================== */ .footer{background: linear-gradient(135deg, #0a0f1a 0%, #1a2332 100%);color: rgba(255, 255, 255, 0.8);padding: 4rem 0 2rem;} .footer-brand{font-family: var(--font-heading);font-size: 1.5rem;font-weight: 800;color: white;margin-bottom: 1rem;display: flex;align-items: center;} .footer-brand i{color: var(--accent-blue);} .footer-description{color: rgba(255, 255, 255, 0.7);margin-bottom: 1.5rem;} .social-links{display: flex;gap: 1rem;} .social-link{width: 45px;height: 45px;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 10px;display: flex;align-items: center;justify-content: center;color: white;font-size: 1.2rem;transition: var(--transition);} .social-link:hover{background: var(--accent-blue);border-color: var(--accent-blue);transform: translateY(-3px);} .footer-heading{color: white;font-weight: 700;margin-bottom: 1.5rem;font-size: 1.1rem;} .footer-links{list-style: none;padding: 0;} .footer-links li{margin-bottom: 0.8rem;} .footer-links a{color: rgba(255, 255, 255, 0.7);transition: var(--transition);} .footer-links a:hover{color: var(--accent-blue);padding-left: 5px;} .footer-contact{list-style: none;padding: 0;} .footer-contact li{color: rgba(255, 255, 255, 0.7);margin-bottom: 0.8rem;display: flex;align-items: center;} .footer-contact i{color: var(--accent-blue);} .footer-bottom{margin-top: 3rem;padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);text-align: center;color: rgba(255, 255, 255, 0.5);} /* ==================================== Responsive Design ==================================== */ @media (max-width: 991px){.hero-title{font-size: 3rem;} .hero-subtitle{font-size: 1.5rem;} .section-title{font-size: 2.2rem;} .hero-stats{gap: 2rem;} .cta-box{padding: 3rem 2rem;} .cta-title{font-size: 2rem;}} @media (max-width: 767px){.hero-title{font-size: 2.5rem;} .hero-subtitle{font-size: 1.3rem;} .hero-cta-group{flex-direction: column;} .hero-cta-group .btn{width: 100%;} .section-title{font-size: 2rem;} .stat-number{font-size: 2rem;} .cta-box{padding: 2rem 1.5rem;} .cta-title{font-size: 1.8rem;}} /* ==================================== Animations ==================================== */ .fade-in{animation: fadeIn 0.6s ease-out;} @keyframes fadeIn{from{opacity: 0;} to{opacity: 1;}} .slide-in-left{animation: slideInLeft 0.8s ease-out;} @keyframes slideInLeft{from{opacity: 0;transform: translateX(-50px);} to{opacity: 1;transform: translateX(0);}} html{scroll-behavior: smooth;} ::selection{background: var(--accent-blue);color: white;} ::-moz-selection{background: var(--accent-blue);color: white;}