* { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; overflow-x: hidden; } .navbar { position: fixed; top: 0; width: 100%; padding: 0.5rem 2rem; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg, #f8f6f6 0%, #13a4f8 100%); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; } .logo-text { font-size: 1.5rem; font-weight: bold; background: linear-gradient(45deg, #4285f4, #34a853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .nav-links { display: flex; list-style: none; } .nav-links li { margin: 0 1rem; } .nav-links a { text-decoration: none; color: #333; font-weight: 500; transition: color 0.3s ease; } .nav-links a:hover { color: #4285f4; } .hero { height: 100vh; display: flex; align-items: center; justify-content: space-between; padding: 0 5%; position: relative; background: linear-gradient(135deg, #f8f6f6 0%, #13a4f8 100%); } .hero-content { max-width: 600px; flex: 1; } .hero-image { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; } .hero h1 { font-size: 3rem; margin-bottom: 1rem; background: linear-gradient(45deg, #4285f4, #34a853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cta-button { padding: 1rem 2rem; font-size: 1.1rem; background: linear-gradient(45deg, #4285f4, #34a853); color: rgb(250, 250, 250); border: none; border-radius: 30px; cursor: pointer; transition: transform 0.3s ease; } .cta-button:hover { transform: translateY(-3px); } .services { padding: 5rem 2rem; background: linear-gradient(135deg, #f8f6f6 0%, #01bb39 100%); } .services h2 { text-align: center; margin-bottom: 3rem; } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; padding: 0 5%; } .service-card { padding: 2rem; text-align: center; background: linear-gradient(135deg, #f8f6f6 0%, #13a4f8 100%); border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } .service-card:hover { transform: translateY(-10px); } .service-card i { font-size: 2.5rem; color: #4285f4; margin-bottom: 1rem; } .contact { padding: 5rem 2rem; background: linear-gradient(135deg, #f8f6f6 0%, #eeca00 100%); } .contact-form { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .contact-form input, .contact-form textarea { padding: 1rem; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; } .contact-form textarea { height: 150px; } .contact-form button { padding: 1rem; background: #4285f4; color: rgb(226, 230, 23); border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s ease; } .contact-form button:hover { background: #34a853; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .luna-logo { height: 80px; margin-right: 20px; object-fit: contain; } .logo { display: flex; align-items: center; } .background-slideshow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; opacity: 0.15; transition: background-image 1s ease-in-out; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } .floating-icon { animation: floating 3s ease-in-out infinite; } @keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .glow-effect { position: relative; overflow: hidden; } .glow-effect:after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; } .glow-effect:hover:after { opacity: 0.4; } .service-card { position: relative; overflow: hidden; } .card-hover-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, rgba(66,133,244,0.1), rgba(52,168,83,0.1)); opacity: 0; transition: opacity 0.3s; } .service-card:hover .card-hover-effect { opacity: 1; } .particle-effect { position: relative; background: transparent; border: 2px solid #4285f4; color: #4285f4; padding: 1rem 2rem; margin-left: 1rem; cursor: pointer; transition: all 0.3s; } .particle-effect:hover { background: #4285f4; color: white; } .hero-buttons { display: flex; gap: 1rem; margin-top: 2rem; } @media (max-width: 768px) { .hero { flex-direction: column; text-align: center; padding-top: 100px; } .nav-links { display: none; } .burger { display: block; } .hero-buttons { flex-direction: column; align-items: center; } .particle-effect { margin-left: 0; margin-top: 1rem; } .hero-image img { height: 240px; margin: 20px 0; } } .hero-image img { height: 720px; width: auto; object-fit: contain; margin-left: 20px; } .contact-info { text-align: center; margin-bottom: 3rem; } .contact-item { margin: 2rem 0; padding: 1rem; position: relative; overflow: hidden; transition: all 0.3s ease; } .contact-item i { font-size: 2rem; margin-right: 1rem; color: #4285f4; animation: pulse 2s infinite; } .highlight-text { background: linear-gradient(45deg, #4285f4, #34a853); -webkit-background-clip: text; -webkit-text-fill-color: transparent; position: relative; display: inline-block; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } .phone-animation { animation: slideInLeft 1s ease-out; } .phone-animation:hover { transform: translateX(10px); background: rgba(66, 133, 244, 0.1); border-radius: 10px; } .email-animation { animation: slideInRight 1s ease-out; } .email-animation:hover { transform: translateX(-10px); background: rgba(52, 168, 83, 0.1); border-radius: 10px; } @keyframes slideInLeft { from { opacity: 0; transform: translateX(-100px); } to { opacity: 1; transform: translateX(0); } } @keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } .contact-item::after { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%); opacity: 0; transition: opacity 0.3s; pointer-events: none; transform: rotate(45deg); } .contact-item:hover::after { opacity: 0.4; } @media (max-width: 768px) { .contact-item h2 { font-size: 1.2rem; } .contact-item i { font-size: 1.5rem; } .highlight-text { display: block; margin-top: 0.5rem; } }