/* ===== Basic Reset ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: #fff;
  color: #1a1a1a;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===== Site wrapper ===== */
#site {
  flex: 1;              /* Fill remaining space */
  display: flex;
  flex-direction: column;
}

/* ===== Header ===== */
#site-header {
  background: #0b1e39;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 999;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
}
#logo img { height: 80px; width: auto; display: block; }

/* ===== Navigation ===== */
#main-nav { display: flex; align-items: center; }
#main-nav ul { list-style: none; display: flex; gap: 25px; }
#main-nav a { text-decoration: none; color: #fff; padding: 8px 12px; font-weight: 700; transition: color 0.3s; }
#main-nav a:hover { color: #f0c14b; }
#nav-toggle, .nav-toggle-label { display: none; }

/* ===== Hero Section ===== */
#hero {
  display: flex;
  align-items: center;       /* Vertical centering */
  justify-content: center;   /* Horizontal centering */
  text-align: center;        /* Center text inside */
  padding: 40px 20px;        /* Adjust spacing as needed */
  background: linear-gradient(180deg,#f6fbff 0%,#fff 100%);
  flex-direction: column;    /* Stack text and image on top of each other on mobile */
}
.hero-inner {
  display: flex;
  flex-direction: column;    /* Stack text and image vertically */
  align-items: center;       /* Horizontal centering */
  justify-content: center;   /* Vertical centering if needed */
  gap: 24px;                 /* Space between text and image */
  max-width: 1200px;
  width: 100%;
}
/* ===== Buttons ===== */
.btn {
  display: inline-block;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-weight: 700;
  transition: all 0.3s ease;
}
.btn.primary { background: #0073c9; color: #fff;}
.btn.primary:hover, .btn.outline:hover { background-color: #f0c14b !important; color: #0b1e39 !important; border-color: #f0c14b !important; }

/* ===== Sections ===== */
section { padding: 28px 0; }
h2 { font-size: 1.25rem; margin-bottom: 12px; color: #0f1724; }

/* ===== Footer ===== */
#site-footer {
  background: #0f1724;
  color: #fff;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: auto;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
}
.footer-logo img { max-width: 180px; height: auto; margin-bottom: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.footer-links a { color: #cfe8ff; text-decoration: none; font-weight: 600; transition: color 0.3s; }
.footer-links a:hover { color: #f0c14b; }
.footer-copy p { margin-top: 8px; font-size: 0.95rem; color: #cfe8ff; }

/* ===== Responsive ===== */
@media (min-width: 720px) {
  .hero-inner {
    flex-direction: row;       /* Side by side on larger screens */
    align-items: center;       /* Vertical centering */
    justify-content: center;   /* Horizontal centering */
    text-align: left;          /* Align text to the left on desktop */
    gap: 48px;                 /* More space between text and image */
  }
}
@media (max-width: 719px) {
  #main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #0b1e39; padding: 12px 0; z-index: 60; flex-direction: column; }
  #nav-toggle:checked + .nav-toggle-label + #main-nav { display: flex; flex-direction: column; }
  #main-nav ul { flex-direction: column; gap: 0; }
  #main-nav li { border-bottom: 1px solid #1a2a50; }
  #main-nav a { display: block; padding: 12px 18px; }
  .footer-inner { flex-direction: column; text-align: center; }
  .footer-copy { text-align: center; }
}