:root { --accent:#007b9e; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body { font-family: Arial, Helvetica, sans-serif; background:#fff; color:#000; }
a { color:var(--accent); }
header { background:#fff; padding:20px; text-align:center; border-bottom:1px solid #eee; }
header img { max-height:80px; }
nav { background:#fff; padding:10px; border-bottom:1px solid #eee; }
.nav-wrap { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; }
.nav-item { position:relative; }
nav a { color:#000; text-decoration:none; padding:8px 12px; border-radius:6px; display:inline-block; }
nav a:hover, nav a.active { background:#f2f4f7; }
.dropdown { position:absolute; top:38px; left:0; background:#fff; border:1px solid #eee; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,.06); display:none; min-width:220px; z-index:10; }
.dropdown a { display:block; padding:10px 14px; color:#000; }
.dropdown a:hover { background:#f7f7f7; }
.nav-item:hover .dropdown { display:block; }
.content { max-width:900px; margin:40px auto; padding:0 20px; line-height:1.7; }
.hero { padding:40px 20px; text-align:center; background:#fff; }
.hero h1 { font-size:2.2em; margin:0; }
footer { background:#fff; color:#000; text-align:center; padding:20px; font-size:0.9em; margin-top:40px; border-top:1px solid #eee; }
.btn { background:var(--accent); color:#fff; text-decoration:none; padding:12px 16px; border-radius:8px; display:inline-block; }
.btn:hover { filter:brightness(0.95); }
.rotating-graphics { position:relative; width:100%; height:70vh; margin:0 auto; overflow:hidden; }
.rotating-graphics img { position:absolute; width:100%; height:100%; object-fit:cover; opacity:0; animation:fade 18s infinite; }
.rotating-graphics img:nth-child(1) { animation-delay:0s; }
.rotating-graphics img:nth-child(2) { animation-delay:6s; }
.rotating-graphics img:nth-child(3) { animation-delay:12s; }
@keyframes fade { 0% { opacity:0; } 10% { opacity:1; } 30% { opacity:1; } 40% { opacity:0; } 100% { opacity:0; } }
.hero-banner { position:relative; width:100%; height:360px; overflow:hidden; }
.hero-banner img { width:100%; height:100%; object-fit:cover; }
.hero-banner h1 { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:3em; font-weight:bold; text-shadow: 2px 2px 6px rgba(0,0,0,0.85); margin:0; letter-spacing:.5px; }
.card { background:#fff; border-radius:10px; padding:20px; border:1px solid #eee; box-shadow:0 1px 0 rgba(0,0,0,.02); }
.grid { display:grid; grid-template-columns: 1fr; gap:20px; }
@media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
label { display:block; margin:10px 0 6px; }
input, textarea { width:100%; padding:12px; border-radius:8px; border:1px solid #ddd; background:#fff; color:#000; }
button { background:var(--accent); color:#fff; border:none; padding:12px 16px; border-radius:8px; cursor:pointer; }
button:hover { filter:brightness(0.95); }


/* --- Dynamic logo & sticky header --- */
header { position: sticky; top: 0; z-index: 1000; transition: padding .25s ease, box-shadow .25s ease; }
header img { transition: max-height .25s ease, transform .25s ease; }
header.shrink { padding:10px; box-shadow: 0 4px 16px rgba(0,0,0,.06); }
header.shrink img { max-height:48px; transform: translateZ(0); }
@media (max-width: 640px) {
  header img { max-height:60px; }
  header.shrink img { max-height:44px; }
}


.profile-photo { width:100%; max-width:220px; border-radius:8px; margin-bottom:12px; display:block; }