@charset "utf-8";

/* =======================
   Base / Global Styles
   ======================= */

body {
  margin: 0;
  padding: 0;
  background-color: #fff;
}

img {
  border: none;
  max-width: 100%;
  height: auto;
  display: block;
  /* removes extra spacing under image */
  margin: 0;
  padding: 0;
}

/* =======================
   Layout Containers
   ======================= */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.25rem;
  box-sizing: border-box;
}

main.container {
  margin-top: 1.2rem;
  /*NB IF YOU CHANGE THIS THEN YOU BETTER CHANGE #strip IN slideshow.css */
}

.subscribe-wrapper {
  display: flex;
  justify-content: center;
  /* horizontal centering */
  /* optional vertical centering */
  flex-direction: column;
  align-items: center;
  padding: 2rem 0.5rem;
}

footer.container {
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Header */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  /* for mobile nav dropdown */
}

header img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 0;
  padding: 0
}

.logo-wrapper {
  padding: 1rem 2rem 1rem 0;
  /* adds space around logo */
}

/* Hamburger menu */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 16px;
  height: 12px;
  margin-right: 0.5rem;
  /* space from right edge */
  position: relative;
  color: #666;
  /* dark grey */
}

.menu-toggle::before,
.menu-toggle::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
}

.menu-toggle::before {
  top: 0;
}

.menu-toggle::after {
  bottom: 0;
}

/* Middle line */
.menu-toggle {
  background: linear-gradient(currentColor 0 0) center/100% 2px no-repeat;
}

/* Navigation */
header nav {
  /* border-top: 1px solid #ccc; */
  border-bottom: 1px solid #ccc;
  width: 100%;
}

header nav ul {
  display: flex;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0;
  /* reset default padding */
}

header nav ul li a {
  display: block;
  padding: 0.9375rem 1.25rem;
  /* 15px top/bottom, 20px sides */
  text-decoration: none;
  color: #333;
  font-size: 0.8rem;
  /* small */
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  /* 1px */
  transition: color 0.3s, background 0.3s;
}

header nav ul li a:hover {
  color: #0077cc;
  text-decoration: underline;
}

.content_padding {
  padding: 0rem 0.5rem;
}

.inline_image {
  display: block;
  margin: 2rem auto;
  max-width: min(100%, 600px);
  /* shrink to container, cap at 600px */
  height: auto;
  border-radius: 0.4rem;
}

.image-row {
  display: flex;
  gap: 2px;
  width: 100%;
  height: 250px;
  /* Fixed height - adjust as needed */
  border-radius: 6px;
  overflow: hidden;
  /* Add this to ensure images don't peek outside the rounded corners */
}

.image-row img {
  flex: 1;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* You can adjust crop position */
  min-width: 0;
}

/* =======================
   Footer
   ======================= */
#footer1 {
  display: flex;
  justify-content: flex-end;
  gap: 0.625rem;
  /* 10px */
  padding: 1.25rem 2rem 0.625rem 2rem;
  box-sizing: border-box;
}

#footer2 {
  display: flex;
  justify-content: flex-start;
  /* horizontal alignment */
  align-items: center;
  /* vertical alignment */
  min-height: 4.4375rem;
  /* 71px */
  padding: 0 2rem;
  font-size: 0.75rem;
  /* 12px */
  background: linear-gradient(to right,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0.1)),
    url("../images/bg_footer.jpg") no-repeat right top;
  background-size: auto;
  box-sizing: border-box;
  border-top: 0.0625rem solid #ccc;
}

.flex-2-col {
  display: flex;
  margin: 1rem 0 2rem 0;
  gap: 1rem;
  align-items: flex-start;
  /* align to top */
}

.flex-2-col-left {
  flex-shrink: 0;
  /* don't shrink the image column */
  width: auto;
  /* let it size naturally */
}

.flex-2-col-right {
  flex: 1;
  /* take up remaining space */
  min-width: 0%;
  /* allow it to shrink if needed */
}

.flex-2-col-left img {
  display: block;
  max-width: 300px;
  width: auto;
  /* don't force 100% width */
  height: auto;
  border-radius: 0.4rem;
  margin: 0;
}

/* Responsive: stack columns on small screens, text first, image below */
@media (max-width: 700px) {
  .flex-2-col {
    flex-direction: column;
    gap: 1rem;
  }

  .flex-2-col-left {
    order: 2;
    width: 100%;
    /* ensure container takes full width */
  }

  .flex-2-col-right {
    order: 1;
  }

  .flex-2-col-left img {
    max-width: min(500px, 100%);
    display: block;
    margin: 0 auto;
    /* center the image */
  }
}

.outline {
  border: 1px solid #e6cf95;
  /* pale green border */
  border-radius: 0.4rem;
  padding: 1rem;
  box-sizing: border-box;
  overflow: hidden;
  /* keeps the icon neatly inside rounded corners */
}

.flex-table-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* two equal columns */
  column-gap: 2rem;
  row-gap: 2rem;
}

.flex-table-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 2rem;
  row-gap: 2rem;
}

.flex-table-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 1rem;
  border-radius: 0.4rem;
}


@media (max-width: 600px) {

  .flex-table-2,
  .flex-table-3 {
    grid-template-columns: 1fr;
    /* stack into single column */
    justify-items: center;
    /* center items horizontally */
  }

  .flex-table-column {
    flex: 1 1 100%;
    /* ensure full width for flexible columns */
  }
}

.flex-hide-the-first {
  display: flex;
  gap: 1rem;
  padding: 1rem 0.5rem;
}

/* Left column: shrink to fit image, let text wrap */
.hide-on-small {
  flex: 0 0 auto;
  /* shrink to fit content */
  max-width: 300px;
  /* optional: limit width of left column */
}

.hide-on-small img {
  display: block;
  /* ensures image takes up its own line */
  width: 100%;
  /* optional: scale image to column width */
  height: auto;
  border-radius: 0.4rem;
  /* optional: rounded corners */
  margin: 0;
}

.always-show {
  flex: 1 1 auto;
  /* allow it to grow and shrink based on available space */
  min-width: 0;
  /* important: lets flex items shrink below content width */
}

/* =======================
   Responsive
   ======================= */
@media (max-width: 960px) {
  header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  header.container {
    border-bottom: 1px solid #ccc;
  }

  .menu-toggle {
    display: block;
  }

  header nav {
    display: none;
    position: absolute;
    top: 80%;
    right: 1rem;
    width: 90%;
    /* slightly smaller than full width */
    max-width: 15rem;
    margin: 0;
    background: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 999;
    padding: 0;
  }

  header nav.open {
    display: block;
    opacity: 1;
    transform: translateY(0);
  }

  header nav ul {
    flex-direction: column;
    gap: 0.625rem;
    /* 10px */
    align-items: center;
    padding: 0.625rem 0;
    /* 10px top/bottom */
  }

  header nav ul li a {
    padding: 0.75rem 1.25rem;
    /* 12px top/bottom, 20px sides */
  }

  .flex-hide-the-first {
    padding: 0.5rem 0.5rem;
  }
}

/* Hide left column on small screens */
@media (max-width: 800px) {
  .hide-on-small {
    display: none;
  }
}

.cta-container {
  text-align: center;
  /* Centers the button */
  margin-top: 20px;
  /* Adds some spacing */
}

.cta-button {
  display: block;
  min-width: 50px;
  max-width: 250px;
  width: 100%;
  margin: 1.5rem auto;
  /* horizontal auto centers it */
  background-color: #eaa963;
  color: white;
  font-size: 16px;
  padding: 0.5rem 0.2rem;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #cb9358;
}

.cta-button:active {
  background-color: #a57745;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


.circle-crop {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 2rem 0;
}