/* erettsegifeladatok.pages.dev - site-authored Siimple visual treatment.
   palette: steel-ice (engineering, precise, cool)
   type:    rubik-solo
   usage:   Sky accent is the only saturated colour; it marks links, active tabs and the CTA. */
:root {
  --background-color: #FFFFFF;
  --surface-color: #FFFFFF;
  --default-color: #475569;
  --heading-color: #0F172A;
  --accent-color: #334155;
  --contrast-color: #FFFFFF;
  --default-font: Rubik, 'Segoe UI', system-ui, sans-serif;
  --heading-font: Rubik, 'Segoe UI', system-ui, sans-serif;
  --nav-font: Rubik, 'Segoe UI', system-ui, sans-serif;
  --nav-color: rgba(255, 255, 255, 0.85);
  --nav-hover-color: #0284C7;
  --nav-mobile-background-color: #FFFFFF;
  --nav-dropdown-background-color: #FFFFFF;
  --nav-dropdown-color: #0F172A;
  --nav-dropdown-hover-color: #334155;
}

.light-background {
  --background-color: #F1F5F9;
  --surface-color: #FFFFFF;
}

.dark-background {
  --background-color: #0F172A;
  --default-color: #FFFFFF;
  --heading-color: #FFFFFF;
  --surface-color: #475569;
  --accent-color: #0284C7;
  --contrast-color: #0F172A;
  --nav-color: rgba(255, 255, 255, 0.85);
  --nav-hover-color: #0284C7;
}

/* Keep Siimple's native hero, image panels, and cards with useful subject imagery. */
.hero { background: #0f172a; color: #fff; }
.hero > img { opacity: .58; }
.hero h2, .hero p { color: #fff !important; }
.hero .container { position: relative; z-index: 3; }
.header .logo h1 { font-size: clamp(1.25rem, 2.25vw, 2rem); font-weight: 600; }
.hero h2 { font-weight: 600; letter-spacing: -.025em; }
.hero p { max-width: 45rem; margin: 1.25rem auto 0; font-size: clamp(1.05rem, 1.65vw, 1.3rem); line-height: 1.55; }
.hero .btn-get-started { background: #0284c7; color: #fff; font-weight: 650; letter-spacing: 0; }
.about img { width: 100%; border: 1px solid #d7e1ea; border-radius: 1rem; }
.why-us .card { height: 100%; border: 1px solid #d7e1ea; box-shadow: 0 14px 34px rgba(15,23,42,.06); }
.why-us .card .img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.why-us .card .title a { color: #0f172a; }
#services .service-item { height: 100%; border: 1px solid #d7e1ea; }
#services .container > p.mt-4 { text-align: center; margin-bottom: 0; }
#services .container > p.mt-4 a { display: inline-block; padding: .85rem 1.5rem; border-radius: 999px; background: #0284c7; color: #fff; font-weight: 650; text-decoration: none; }
#services .container > p.mt-4 a:hover, #services .container > p.mt-4 a:focus-visible { background: #075985; }
#ad-after-services { display: grid; place-items: center; max-width: 54rem; border: 1px dashed #b7c9d8 !important; border-radius: 1rem; background: #f8fafc; color: #475569; }
#ad-after-services small { font-size: .8rem; }
#guide { background: #eaf2f8; }
#guide .container { max-width: 54rem; }
#guide h2 { margin-bottom: 1rem; }
.footer { background: #0f172a !important; color: #fff; }
.footer h3, .footer p, .footer a, .footer span { color: #fff; }
@media (max-width: 575.98px) {
  .header .logo h1 { font-size: 1rem !important; line-height: 1.15; }
  .hero { min-height: 28rem; }
  .hero h2 { font-size: clamp(2rem, 9vw, 3rem); }
}