/* Reset & Base */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto', sans-serif; background:#f4f4f4; color:#333; overflow-x:hidden; }
a { text-decoration:none; }

/* Navigation */
nav { position:fixed; width:100%; background:#222; padding:15px 0; z-index:1000; }
nav ul { display:flex; justify-content:center; list-style:none; }
nav ul li { margin:0 20px; }
nav ul li a { color:#fff; font-weight:600; transition:color .3s; }
nav ul li a:hover { color:#ffba00; }

/* Hero */
.hero { position:relative; height:100vh; background:url('hero.jpg') center/cover no-repeat; }
.hero-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.5); }
.hero-content { position:relative; top:50%; transform:translateY(-50%); text-align:center; color:#fff; padding:0 20px; }
.hero h1 { font-size:3.5em; margin-bottom:10px; }
.hero p { font-size:1.5em; margin-bottom:20px; height:2em; }
.btn { display:inline-block; padding:15px 30px; background:#ffba00; color:#222; font-weight:700; border-radius:5px; transition:background .3s; }
.btn:hover { background:#e0a800; }

/* Sections */
main section { padding:80px 20px; max-width:1200px; margin:0 auto; }
main section h2 { font-size:2.5em; margin-bottom:20px; color:#004e92; }

/* Cards container perspective for 3D effect */
.cards { display:flex; flex-wrap:wrap; gap:20px; justify-content:center; perspective:1200px; }

/* Card styling with 3D jump */
.card { 
  background:#fff; 
  padding:30px; 
  border-radius:10px; 
  box-shadow:0 4px 8px rgba(0,0,0,0.1); 
  flex:1 1 300px; 
  text-align:center; 
  transition:transform .3s ease, box-shadow .3s ease; 
  transform-style:preserve-3d;
}
.card:hover { 
  transform: translateY(-20px) translateZ(30px); 
  box-shadow:0 12px 24px rgba(0,0,0,0.2); 
}

/* Form */
form { display:flex; flex-direction:column; gap:15px; max-width:600px; margin:0 auto; }
form input, form textarea { padding:15px; border:1px solid #ccc; border-radius:5px; }
form button { padding:15px; background:#004e92; color:#fff; font-weight:600; border:none; border-radius:5px; transition:background .3s; }
form button:hover { background:#003c75; }

/* Footer */
footer { background:#222; color:#fff; text-align:center; padding:20px 0; }

/* Responsive */
@media(max-width:768px){
  nav ul { flex-direction:column; }
  .hero h1 { font-size:2.5em; }
}