body {font-family: Arial, sans-serif; margin:0; padding:0; line-height:1.6; background:#f9f9f9; color:#333;}
header.hero {background: linear-gradient(135deg, #ff6600, #0066cc); color:#fff; text-align:center; padding:60px 20px; position:relative;}
header.hero .logo {height:80px; margin-bottom:15px;}
header.hero h1 {margin:10px 0; font-size:2.5em;}
header.hero p {font-size:1.2em; margin-bottom:20px;}
header.hero nav {margin-top:20px;}
header.hero nav a {margin: 0 15px; color:#fff; text-decoration:none; font-weight:bold; transition:0.3s;}
header.hero nav a:hover {color:#ffcc99;}
.cta-btn {display:inline-block; margin-top:15px; padding:12px 25px; background:#fff; color:#ff6600; font-weight:bold; border-radius:25px; text-decoration:none; transition:0.3s;}
.cta-btn:hover {background:#ffcc99; color:#fff;}
section {padding:60px 20px; max-width:1100px; margin:auto;}
h2 {color:#0066cc; margin-bottom:20px; text-align:center;}
.grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px;}
.card {background:#fff; border-radius:12px; padding:20px; box-shadow:0 4px 8px rgba(0,0,0,0.1); transition:transform 0.3s;}
.card:hover {transform:translateY(-5px);}
.card img {max-width:300px; height:auto; border-radius:10px; margin-bottom:15px; box-shadow:0 2px 6px rgba(0,0,0,0.2); display:block; margin-left:auto; margin-right:auto;}
ul {margin-left:20px;}
footer {background:#333; color:#fff; text-align:center; padding:20px; margin-top:20px;}
footer a {color:#ff6600; text-decoration:none;}