*{box-sizing:border-box}body{margin:0;font-family:Arial,sans-serif;background:#061826;color:white}
nav{position:fixed;width:100%;top:0;padding:20px;display:flex;justify-content:space-between;background:#00111fcc;z-index:3}
nav a{color:white;margin:10px;text-decoration:none}.logo{font-weight:900;font-size:24px}.logo span{color:#29d3ff}
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;background:
linear-gradient(120deg,#001b33aa,#00bcd455),
url('https://media.giphy.com/media/3o7btPCcdNniyf0ArS/giphy.gif');background-size:cover}
.hero-card{padding:50px;text-align:center;backdrop-filter:blur(8px)}
h1{font-size:70px;line-height:.9;text-shadow:8px 8px 0 #007a9c;transform:perspective(500px) rotateX(12deg)}
h1 span{color:#4deaff}.btn{display:inline-block;background:#00c8ff;color:#001;text-decoration:none;padding:15px 30px;border-radius:30px}
section{padding:90px 10%}.cards,.gallery{display:flex;gap:20px;flex-wrap:wrap}
.cards div,.photo{background:#ffffff14;padding:25px;border-radius:20px;flex:1;min-height:120px}
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px}
li{list-style:none;background:#0b3147;padding:20px;border-radius:12px}
.photo{display:flex;align-items:center;justify-content:center;font-weight:bold}
footer{text-align:center;padding:30px;background:#00111f}
@media(max-width:700px){h1{font-size:42px}nav{position:relative;flex-direction:column}}