:root {
    --background-color: #f7f7ef;
    --background-color-2: #d3dfb9;
    --footer-background-color: #333;
    --theme-color-first: #2bb57e;
    --theme-color-second: #8ec347;
    /* #90cc48 */
    
}

html {
    scroll-behavior: smooth;
}

body {
    /* font-family: Arial, sans-serif; */
    font-family: "Nanum Pen Script", cursive;
    font-weight: 400;
    font-style: normal;
    margin: 0;
    padding: 0;
    background-color: var(--background-color);
    text-align: center;
    font-size: 18px;
}

/* Link styling */
a {
  display: inline-block;
  color: var(--theme-color-second);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--theme-color-first);
}

.margin-0 {
    margin: 0;
}
 
/* === Header (top-banner) === */
.top-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--footer-background-color);
  color: #fff;
  padding: 10px 20px;
  position: sticky;
  top: 0;
  z-index: 1000;
  white-space: nowrap;     /* Prevents header contents from wrapping */
}

/* Logo stays fixed size */
.logo-container {
  width: 120px;
  flex-shrink: 0;
  text-align: left;
}

.top-banner img,
.logo-container img {
  height: 30px;
  width: auto;
}

/* Nav-menu occupies remaining space but never touches logo */
.nav-menu {
  flex: 1;
  max-width: calc(100% - 240px); /* adjust 200px to match your logo+padding width */
}

/* Allow nav links to wrap into two neat rows if needed */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 15px 30px;           /* vertical | horizontal spacing */
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  white-space: nowrap;      /* keep each label on one line */
  font-weight: bold;
}

/* Link styling */
.nav-links a {
  display: inline-block;
  color: var(--theme-color-second);
  text-decoration: none;
  font-size: 17px;
  transition: color 0.2s ease;
  white-space: nowrap;      /* no mid-word breaks */
}

.nav-links a:hover {
  color: var(--theme-color-first);
}

/* Hamburger menu for mobile */
.banner-right-button {
  width: 120px;
  flex-shrink: 0;
  text-align: right;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
}

.hamburger span {
  width: 25px;
  height: 3px;
  background: white;
  margin: 4px 0;
  border-radius: 2px;
}

/* hero */
.hero {
    width: 100%;
    height: 280px;
    background-image: url('/asserts/hero-background.png');
    background-size: cover; /* Ensures the image covers the entire div */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.hero-image-title {
    height: 68%;
    width: auto;
}

.page-title-big {
    margin: 0;
    padding: 8px;
    background-color: var(--background-color-2);
    font-size: 50px;
    font-weight: 900;
    scroll-margin-top: 56px !important;
}

.media-limiter {
    width: 700px;
    /* style="width: 70vw; height: auto;" */
}

.banner {
    max-width: 700px;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    margin: 40px auto;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.text {
    gap: 15px;
    margin: 3rem auto;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    margin: 40px auto;
    max-width: 700px;
}

.column {
    display: flex;
}

.open-links {
}

.open-link {
    max-width: 42%;
    background-color: var(--background-color-2);
    margin: 15px;
    color: #000000;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
}

.people-image-container {
  flex: 0 0 100px;
  width: 100px;         /* 你想要的显示宽度 */
  height: 100px;        /* 你想要的显示高度 */
  overflow: hidden;     /* 裁剪超出部分 */
  position: relative;

  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.6);
  display: flex;
}

.people-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;    /* 保持比例并裁剪填满容器 */
  object-position: center; /* 可根据需要调整裁剪焦点 */
  display: block;
}

/* === footer === */
footer {
    margin-top: 50px;
    padding: 10px;
    background-color: var(--footer-background-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
}

.footer-page {
    color: var(--background-color);
}

.thankyou {
    color: var(--theme-color-first);
}

.footer-buttom {
    font-family: Arial, sans-serif;
    color: #999999;
    /* margin-top: 20px; */
    padding: 10px;
    font-size: 10px;
}

/* NOW IT"S FOR SILDER  */
.slider {
  flex: 1 1 auto;
  height: 30vw;
  padding: 0;             
  margin: 0 auto;         
  overflow: hidden;       
  box-sizing: border-box; 
  width: 100%;            
  max-width: 100%;       
  position: relative;        /* Needed for absolutely positioned buttons */ 
}

.slides {
  padding: 0;
  margin: 0;
  display: flex;
  width: 100%;
  transition: transform 0.5s ease-in-out; /* Smooth animation */
}

.slides img {
  flex: 0 0 100%;
  width: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 100%;       
  display: block
  flex-shrink: 0;  
  object-fit: cover;
  display: block;      
}

button.prev,
button.next {
  position: absolute;
  top: 50%;
  transform: translateX(-15%);
  transform: translateY(-50%);
  background-color: #b4b4ac;
  color: var(--theme-color-first);
  border: none;
  padding: 1rem;
  cursor: pointer;
  opacity: 0.7;
  z-index: 1;
}

button.prev:hover,
button.next:hover {
  opacity: 1;
}

button.prev {
  left: 0;
}

button.next {
  right: 0;
}

.top {
	scroll-margin-top: 56px !important;
}


/*=== MEDIA! ===*/
@media (max-width: 700px) {
    /* there hero! */
    .hero-image-title {
        width: 80%;
        height: auto;
    }

  /* Hide the regular nav menu by default */
  .nav-menu {
    position: absolute;
    top: 60px;  /* Adjust based on your header height */
    right: 0;
    width: 100%;
    background-color: #333;
    display: none;
    flex-direction: column;
  }
  
  /* Show the nav menu when active */
  .nav-menu.active {
    display: flex;
  }sadddadd
  
  /* Stack the links vertically */
  .nav-links {
    flex-direction: column;
    margin: 0;
  }
  
  .nav-links li {
    margin: 10px 0;
  }
  
  /* Display the hamburger icon on mobile */
  .hamburger {
    margin-right: 20px;
    display: block;
  }

  .nav-menu {
    flex: 1;
    max-width: 100%; /* adjust 200px to match your logo+padding width */
    background-color: #555;
  }

  .column {
    display: flex;

  }
}