/* ====================
   GLOBAL STUFF (FONTS)
   ==================== */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,600;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,400&display=swap');
 
*, *::before, *::after {
  box-sizing: border-box;
}
 
body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #1a1a1a;
}
 
h1, h2, h3, h4 {
  font-family: 'Lora', serif;
  font-weight: 600;
}

/* ====================
   BACKGROUND
   ==================== */

/* change background color */
.background {
  background-color: #f5f4f0;
}

/* ====================
   HEADER/NAV
   ==================== */

/* for styling the top of the header */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 1000;

  background: rgba(255, 255, 255, 0.6);
  /* transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* Safari support */
  padding: 10px 20px;
}

.header-bar h3 {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #0f6e56;
  margin: 0;
  letter-spacing: -0.01em;
}
 
.header-bar .nav-link {
  font-size: 0.85rem;
  font-weight: 500;
  color: #444 !important;
  padding: 6px 12px !important;
  border-radius: 6px;
  transition: background 0.18s, color 0.18s;
  letter-spacing: 0.01em;
}
 
.header-bar .nav-link:hover {
  background: rgba(29, 158, 117, 0.08);
  color: #0f6e56 !important;
}
 
.header-bar .nav-link.active {
  background: rgba(29, 158, 117, 0.1);
  color: #0f6e56 !important;
}

/* ====================
   HERO SECTION 
   ====================*/

.banner {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
  filter: brightness(0.72);
}

/* hero section styling */
.hero-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

/* contains text over the hero image */
.hero-text {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  color: white;
  text-align: center;
}

.hero-text h1 {
  font-family: 'Lora', serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
  line-height: 1.3;
  color: white;
}

/* ====================
   MAIN CONTENT HOMEPAGE
   ==================== */

.container.my-4 {
  background: white;
  border-radius: 14px;
  padding: 36px 40px;
  margin-top: 36px !important;
  margin-bottom: 36px !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);
}
 
.container.my-4 h2 {
  font-size: 1.35rem;
  color: #0f6e56;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e0e0e0 !important;
}
 
.container.my-4 h4 {
  font-size: 1rem;
  color: #1a1a1a;
  margin-top: 20px;
  margin-bottom: 6px;
}
 
.container.my-4 p {
  color: #444;
  line-height: 1.75;
}
 
.container.my-4 ul {
  color: #444;
  padding-left: 1.4rem;
}
 
.container.my-4 ul li {
  margin-bottom: 6px;
  line-height: 1.7;
}

/* ====================
   ABOUT US PAGE
   ==================== */

/* creates card in aboutUs.html */
.row-box {
  width: 250px;
  height: auto;
  /* taller to fit image + text */
  display: flex;
  flex-direction: column;
  border: 1px solid #ccc;
  border-radius: 14px;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  padding-bottom: 20px;
  transition: box-shadow 0.2s, transform 0.2s;
}

.row-box:hover {
  box-shadow: 0 8px 28px rgba(15, 110, 86, 0.12);
  transform: translateY(-3px);
}

/* wraps cards horizontally and evenly */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  /* allow multiple per row */
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
}

/* Styles for bottom container in aboutUs.html */
.bottom-flex-container {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 40px;
  padding: 0 100px;
  /* add horizontal padding to prevent edge crowding */
}

/* override width behavior ONLY for bottom cards */
.bottom-flex-container .row-box {
  flex: 1;
  padding: 10px;
  /* makes them stretch evenly */
  max-width: none;
}


/* text content for each card */
.image-box {
  width: 140px;
  /* smaller than the card */
  height: 140px;
  /* same as width */
  margin: 22px auto 0 auto;
  /* center horizontally */
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid #e1f5ee;
  /* optional if you want circular container */
}

/* makes images cover their containers */
.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* crop and maintain aspect ratio */
  border-radius: 50%;
  /* perfectly circular */
}

/* changes font to italic */
.italic-font {
  font-family: 'Italic', serif;
}

.text-box {
  flex: 1;
  /* text takes the remaining space */
  padding: 10px;
  text-align: center;
}

.text-box h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 2px;
  color: #1a1a1a;
}
 
.text-box p {
  font-size: 0.8rem;
  color: #666;
  margin-bottom: 2px;
  line-height: 1.5;
}
 
.text-box p b {
  font-size: 0.78rem;
  color: #0f6e56;
  font-weight: 500;
}

/* ====================
   DOCUMENTS PAGE
   ==================== */

.link-container {
  display: grid;
  grid-template-columns: 20vh;
}

.link-box {
  width: 98vw;
  height: auto;
  padding: 10px;
  margin: 10px;
  /* taller to fit image + text */
  border-radius: 12px;
  background: white;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: box-shadow 0.2s, transform 0.2s;
}

.link-box:hover {
  box-shadow: 0 8px 28px rgba(15, 110, 86, 0.1);
  transform: translateY(-2px);
}

.link-image-box img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  align-self: left;
  border-radius: 20px;
}

.link {
  /* text takes the remaining space */
  padding: 10px;
}

/* ====================
   FOOTER
   ==================== */

footer {
  margin-top: 20px;
}
 
footer .text-body-secondary {
  font-size: 0.82rem;
  color: #999 !important;
  letter-spacing: 0.02em;
}
 
footer .border-bottom {
  border-color: rgba(0,0,0,0.08) !important;
}