* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: Arial, Helvetica, sans-serif; line-height: 1.5; color: #222; background: #fbfbfb; font-size:16px; }

:root { --bg: #fbfbfb; --nav: #333333; --accent: #bbbbbb; --muted: #333333; --card: #ffffff; --link: #1a73e8; --link-hover: #0f5ecb; }

.container { max-width: 1000px; margin: 0 auto; padding: 18px; }

.header { background: var(--nav); color: white; padding: 10px 0; }
.header-inner { display:flex; justify-content:space-between; align-items:center; gap:12px; max-width:1000px; margin:0 auto; padding:0 18px; }
.logo { font-weight:700; font-size:20px; }

nav ul { display:flex; gap: 12px; list-style:none; }
nav a { color: white; text-decoration: none; padding:6px 8px; border-radius:4px; font-size:15px; }
nav a:hover { background: rgba(255,255,255,0.14); }
nav a.active { text-decoration: underline; font-weight:700; }

.hero { background: #f7f7f7; text-align:center; padding:60px 18px; border-bottom:2px solid var(--accent); }
.hero h1 { font-size:34px; color: #222222; font-weight:700; }
.hero p { color: var(--muted); margin-top:8px; font-size:15px; }
.cta { display:inline-block; margin-top:10px; background:var(--accent); color:#111; padding:8px 14px; border-radius:6px; font-weight:700; text-decoration:underline; }

/* general links (content) */
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:link, a:visited { color: var(--link); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--link); text-decoration-thickness: 2px; font-weight:600; }
a:hover, a:focus { color: var(--link-hover); text-decoration-color: var(--link-hover); }
a:focus-visible { outline: 3px solid rgba(26,115,232,0.18); outline-offset: 3px; border-radius:3px; }

h2.section-title { font-size:20px; margin:18px 0; color:#222; text-align:center; }
.intro { text-align:center; color:var(--muted); max-width:700px; margin: 0 auto 12px; font-size:15px; }

.grid { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.card { background:var(--card); padding:12px; border-radius:8px; min-width:220px; flex:1 1 220px; }
.card h3 { margin-bottom:6px; font-size:18px; }
.card p { color:#222; font-size:15px; }

.profile img { width:100%; height:150px; object-fit:cover; border-radius:6px; margin-bottom:8px; }

.video iframe { width:100%; height:180px; border:0; }

.form { background:#ffffff; padding:12px; border-radius:8px; }
.form label { display:block; margin:6px 0 4px; font-weight:700; color:#222; }
.form input[type=text], .form input[type=email], .form textarea, .form select, .form input[type=date], .form input[type=tel] { width:100%; padding:8px; border:1px solid #ddd; border-radius:4px; }
.required { border-left:4px solid #e74c3c; padding-left:8px; }
input[required], textarea[required], select[required] { border-left:4px solid #e74c3c; padding-left:6px; background:#fff; }
.asterisk { color:#e74c3c; margin-left:4px; }
.submit { background:var(--accent); padding:8px 12px; border-radius:6px; border:0; margin-top:10px; font-weight:700; cursor:pointer; }

footer { background:var(--nav); color:white; padding:14px 0; text-align:center; margin-top:18px; font-size:15px; }
footer a { color:#fff; text-decoration: underline; }

/* social icons in footer */
.social-link { display:inline-block; width:30px; height:30px; line-height:30px; text-align:center; border-radius:50%; background: rgba(255,255,255,0.06); color: #fff; text-decoration: none; margin: 0 4px; font-weight:700; }
.social-link:hover { background: rgba(255,255,255,0.12); }

@media (max-width:480px) { .hero h1 { font-size:22px; } .video iframe { height:140px; } nav ul { gap:6px; font-size:14px; } body { font-size:15px; } }