:root {
  --bgcolor:   #fff;
  --txtcolor:  #000;
  --lnkcolor:  darkorange;
  --hvrcolor:  orange;
  --test:      lightgreen;
  --test2:     grey;
  --hdrfont:   28px;
  --blghdr:    24px;
  --txtfont:   20px;
  --space:     16px;
  --space2:    200px;
  --space3:    400px;
}

/* Global reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Media defaults */
img,
video {
  max-width: 100%;
  display: inline-block;
}

/* List styling */
ul {
  list-style: none;
}
ul a {
  color: var(--txtcolor);
  text-decoration: none;
}
ul a:hover   { color: var(--hvrcolor); }
ul a.active  { color: var(--lnkcolor); }

li::before {
  content: '\21FE ';
  padding-right: 20px;
  font-size: var(--hdrfont);
}

/* Spacers */
.spacer  { height: var(--space); }
.spacer2 { height: var(--space2); }

/* Page layout */
body {
  font-family: 'Poppins','DejaVu Sans',sans-serif;
  background: var(--bgcolor);
  margin: 0;
  padding: 0;
}

/* Custom scrollbar (Chrome/Edge/Safari) */
*::-webkit-scrollbar               { width: 12px; }
*::-webkit-scrollbar-track         { background: var(--lnkcolor); }
*::-webkit-scrollbar-thumb         { background: var(--hvrcolor); }

/* Horizontal image scroll container */
.scroll-container {
  overflow-x: auto;
  white-space: nowrap;
}
.scroll-container img { padding: 0; }

/* Header */
.header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background: var(--bgcolor);
}
.header_logo {
  margin: 1% 0 0 1%;
  width: 250px;
  display: flex;
}
.header_menu {
  display: flex;
  align-items: center;
  font-size: var(--hdrfont);
  font-weight: bold;
  padding-right: 1.5vw;
}
.header_menu a {
  color: var(--txtcolor);
  padding: 0 1.1vw;
  text-decoration: none;
}
.header_menu a:hover,
.header_menu a.active {
  color: var(--hvrcolor);
}
.header_menu a.active { color: var(--lnkcolor); }

/* Main content */
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 80px;
}
.news_main {
  width: 70%;
  margin: 2%;
  padding: 1%;
  border: 1px solid var(--lnkcolor);
  border-radius: 8px;
}
.about_main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 2%;
  gap: 20px;
}
.about_pic { flex: 0 0 30%; height: auto; }
.about_txt {
  flex: 0 0 40%;
  font-size: var(--txtfont);
  color: var(--txtcolor);
  padding: 20px 0;
  overflow: hidden;
}

/* Footer */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--bgcolor);
  text-align: center;
}
.footer_menu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2.5vw;
  font-size: 18px;
  margin-top: 10px;
}
.footer_menu a {
  color: var(--txtcolor);
  text-decoration: none;
}
.footer_menu a:hover   { color: var(--hvrcolor); }
.footer_menu a.active  { color: var(--lnkcolor); }

/* Text styles */
.hdr {
  font-size: var(--blghdr);
  font-weight: bold;
  color: var(--txtcolor);
}
.txt {
  font-size: var(--txtfont);
  color: var(--txtcolor);
}

/* -------------------------------------------------
   Responsive tweaks – works from small phones up to
   tablet width (≈ 768 px).  All rules are scoped to the
   same media query so they apply together.
   ------------------------------------------------- */
@media (max-width: 768px) {
  /* ---- About section --------------------------------------------------- */
  .about_main {
    flex-direction: column;
    align-items: center;
  }

  .about_pic,
  .scroll-container {
    width: auto !important;          /* let the element fill the row */
    height: 400px !important;        /* fixed height for images */
    display: flex;
    align-items: center;
    gap: 12px;                        /* space between images */
  }

  .scroll-container img {
    height: 400px;        /* force exact height */
    width: 100%;          /* keep aspect ratio */
    max-width: none !important;      /* cancel global max‑width:100% */
    object-fit: contain;             /* no cropping */
    flex-shrink: 0;                  /* prevent flex shrink */
  }

  .about_txt {
    width: 100%;
    padding: 20px;
  }

  .txt {
    font-size: calc(var(--txtfont) * 0.8);
  }

  /* ---- Header menu ----------------------------------------------------- */
  .header_menu {
    font-size: calc(var(--hdrfont) * 0.7);   /* 28 px → ~20 px */
  }

  /* ---- Footer ----------------------------------------------------------- */
  .footer {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0 auto;               /* centre horizontally */
    width: 100%;
    text-align: center;
    display: flex;                /* centre inner content */
    justify-content: center;
    align-items: center;
    padding: 8px 0;               /* vertical breathing room */
  }

  .footer_menu {
    display: inline-flex;         /* keep original inline‑flex behaviour */
    flex-wrap: wrap;
    gap: 1.5rem;                  /* space between links */
    justify-content: center;
  }
}