:root { --primary-color: #03fde8; --secondary-color: #0237e4; --accent-color: #0afd02; --text-color: #ffffff; --dark-bg: rgba(0, 0, 0, 0.8); --card-bg: rgba(255, 255, 255, 0.1); --gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Sour Gummy", cursive; line-height: 1.6; color: var(--text-color); background: #000; overflow-x: hidden; } .main-nav { position: fixed; top: 0; width: 100%; padding: 1rem 2rem; background: var(--dark-bg); backdrop-filter: blur(10px); display: flex; justify-content: space-between; align-items: center; z-index: 1000; } .logo p { font-size: 2rem; font-weight: bold; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: glowText 2s infinite alternate; } .contact-info { display: flex; align-items: center; gap: 1.5rem; } .contact-info i { font-size: 2.5rem; color: var(--primary-color); transition: all 0.3s ease; } .contact-info i:hover { transform: scale(1.2); color: var(--accent-color); } .contact-info span { font-size: 1.8rem; color: var(--text-color); text-shadow: 0 0 10px var(--primary-color); } .hero { height: 60vh; padding-top: 80px; text-align: center; position: relative; } .hero-content { position: relative; z-index: 2; } .hero h1 { font-size: 4rem; margin-bottom: 1.5rem; color: var(--text-color); text-shadow: 0 0 20px var(--primary-color); animation: pulse 2s infinite; } .subtitle { font-size: 1.5rem; opacity: 0.8; } .slideshow-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .mySlides { position: absolute; width: 100%; height: 100%; } .mySlides img { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6); } .services { position: relative; z-index: 2; padding: 2rem; margin-top: -2rem; } .services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; max-width: 1400px; margin: 0 auto; } .service-card { background: var(--card-bg); border-radius: 15px; padding: 2rem; text-align: center; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; animation: wobble 3s infinite ease-in-out; } .service-card i { font-size: 3rem; margin-bottom: 1.5rem; color: var(--primary-color); } .service-card a { color: var(--text-color); text-decoration: none; font-size: 1.4rem; padding: 1.2rem; display: block; background: var(--gradient); border-radius: 15px; transition: all 0.3s ease; box-shadow: 0 0 15px rgba(3, 253, 232, 0.3); } .service-card:hover { transform: translateY(-5px); } .service-card a:hover { background: linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-color) 100%); box-shadow: 0 0 20px rgba(3, 253, 232, 0.3); } footer { position: relative; z-index: 2; background: var(--dark-bg); padding: 1.5rem; text-align: center; margin-top: 2rem; overflow: hidden; } footer p { font-size: 1.8rem; color: var(--text-color); text-transform: uppercase; letter-spacing: 2px; animation: neonGlow 4s ease-in-out infinite; position: relative; display: inline-block; } @keyframes neonGlow { 0% { color: var(--text-color); text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); transform: scale(1); } 25% { color: var(--primary-color); text-shadow: 0 0 20px var(--accent-color), 0 0 40px var(--accent-color), 0 0 60px var(--accent-color); transform: scale(1.1); } 50% { color: var(--accent-color); text-shadow: 0 0 30px var(--secondary-color), 0 0 60px var(--secondary-color), 0 0 90px var(--secondary-color); transform: scale(1); } 75% { color: var(--secondary-color); text-shadow: 0 0 20px var(--primary-color), 0 0 40px var(--primary-color), 0 0 60px var(--primary-color); transform: scale(1.1); } 100% { color: var(--text-color); text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); transform: scale(1); } } @keyframes wobble { 0% { transform: scale(1); box-shadow: 0 0 15px rgba(3, 253, 232, 0.3); } 50% { transform: scale(1.08); box-shadow: 0 0 30px rgba(3, 253, 232, 0.5); } 100% { transform: scale(1); box-shadow: 0 0 15px rgba(3, 253, 232, 0.3); } } @keyframes glowText { from { text-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color), 0 0 30px var(--primary-color); } to { text-shadow: 0 0 20px var(--accent-color), 0 0 40px var(--accent-color), 0 0 60px var(--accent-color); } } @keyframes pulse { 0% { transform: scale(1); text-shadow: 0 0 20px var(--primary-color); } 50% { transform: scale(1.05); text-shadow: 0 0 40px var(--accent-color), 0 0 60px var(--accent-color); } 100% { transform: scale(1); text-shadow: 0 0 20px var(--primary-color); } } @media screen and (max-width: 1200px) { .services-grid { grid-template-columns: repeat(2, 1fr); padding: 0 2rem; } .service-card { padding: 1.8rem; } .service-card a { font-size: 1.3rem; } } @media screen and (max-width: 768px) { .hero { height: auto; padding-top: 100px; padding-bottom: 2rem; } .logo p { font-size: 1.8rem; } .contact-info i { font-size: 2rem; } .contact-info span { font-size: 1.5rem; } .hero h1 { font-size: 2.5rem; } .services { margin-top: 1rem; padding: 1rem; } .services-grid { grid-template-columns: 1fr; gap: 2rem; } .service-card { padding: 1.5rem; } .service-card i { font-size: 2.5rem; } .service-card a { font-size: 1.2rem; padding: 1rem; } footer p { font-size: 1.4rem; letter-spacing: 1px; } } @media screen and (max-width: 480px) { .main-nav { padding: 0.8rem; } .logo p { font-size: 1.5rem; } .contact-info i { font-size: 1.8rem; } .contact-info span { font-size: 1.2rem; } .hero h1 { font-size: 2rem; } .service-card { padding: 1.2rem; } .service-card i { font-size: 2rem; } .service-card a { font-size: 1.1rem; padding: 0.8rem; } footer p { font-size: 1.2rem; letter-spacing: 0.5px; } footer { padding: 1rem; } }