/* ========================
   RESET / GLOBAL
   ======================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Libre Baskerville", serif;
  scroll-behavior: smooth;
}

body {
  color: #222;
  background: #f6f3ee;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,h2,h3,h4,h5{
   font-family: "Libre Baskerville", serif;
   font-style: italic;
   text-transform: capitalize;
}

p{margin-bottom: 1em;}

/* BUTTONS */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: #ff6b00;
  color: #fff;
  border-radius: 4px;
  font-weight: 600;
  transition: background 0.2s ease;
}
.btn:hover { background: #40b0e0; }

.btn.green
{
  background:#00784a;
}

/* ========================
   HEADER
   ======================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* TOP BAR */

.top-bar {
  display:flex;
  align-items: center;
  justify-content: center;
  padding: 1em 0;
  font-size: 1rem;
}

.top-bar a {
  font-weight: 600;
  white-space: nowrap;
  display: inline-flex;
 align-items: center;
 gap: 0.5rem;
 margin:0 2px;
}

.top-bar a:hover {
  text-decoration: underline;
}

/* MAIN NAV CONTAINER */
.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* LOGO */
.logo {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* MAIN NAV */
.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.2rem;
}

.main-nav a {
  font-weight: 500;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  color:#1a1a1a;
  background:#fff;
  transition: all 0.35s ease;
}

.main-nav a:hover {
  background: #40b0e0;
  color:#fff;
}

/* ========================
   BURGER BUTTON
   ======================== */
.burger {
  display: none;
  width: 32px;
  height: 24px;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  z-index: 1100;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; }
.burger span:nth-child(3) { top: 20px; }

.burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.burger.active span:nth-child(2) { opacity: 0; }
.burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* ========================
   HERO SECTION
   ======================== */
   .hero-slider {
   position: relative;
   height: 80vh;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .hero-slide {
   position: absolute;
   inset: 0;
   background-size: cover;
   background-position: center;
   opacity: 0;
   transform: scale(1);
   transition:
     opacity 1.5s ease-in-out,
     transform 6s linear; /* smooth zoom */
   will-change: transform, opacity;
 }

 .hero-slide.active {
   opacity: 1;
   transform: scale(1.2); /* zoom happens only once */
 }

   /* Continuous Ken Burns zoom effect */
   @keyframes zoom {
     0%   { transform: scale(1); }
     100% { transform: scale(1.2); }
   }

   .hero-content {
     position: relative;
     z-index: 2;
     text-align: center;
     max-width: 840px;
     padding: 2rem;
     color: #fff;
     background:rgba(0, 120, 74, 0.5);
     border-radius: 6px;
   }

   .hero-content h1 { font-size: 3rem; font-weight: 700; margin-bottom: 1rem; }
   .hero-content p { font-size: 1.2rem; margin-bottom: 2rem; }
   .hero-content .btn {
     display: inline-block;
     padding: 0.75rem 1.5rem;
     background: #ff6b00;
     color: #fff;
     border-radius: 4px;
     font-weight: 600;
     transition: background 0.2s ease;
   }
   .hero-content .btn:hover { background: #40b0e0; }

   /* ========================
      HOMEPAGE HIGHLIGHTS
      ======================== */
      .highlights{margin-top:-15vh;position: relative; z-index: 3;}
      .card-link {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        text-decoration: none;
        color: inherit;
      }

      .card-link:focus-visible {
        outline: 2px solid #005fcc;
        outline-offset: 4px;
      }
/* ========================
   SECTIONS
   ======================== */
section {
  padding: 4rem 2rem;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
}

section h2 {
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ========================
   GRID / CARDS
   ======================== */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.card {
  display: grid;        /* or flex */
  grid-template-rows: auto 1fr;
  text-decoration: none;
  color: inherit;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.2s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-8px);
}

.card img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

.card-content {
  position: absolute;
  padding: 1.5rem;
  bottom:0; left:0;
  background:rgba(0,0,0,0.5);
  color:#fff;
  text-align: center;
}

.card-content h3 {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.card-content p {
  font-size: 1rem;
}

/* ========================
   PARALLAX SECTION
   ======================== */
   .parallax-area {
     position: relative;
     height: 800px; /* adjust as needed */
     overflow: hidden;

     /* center content vertically & horizontally */
     display: flex;
     align-items: center;       /* vertical centering */
     justify-content: center;   /* horizontal centering */
     text-align: center;        /* ensures text is centered */
     margin-bottom: -2em;
   }

   .parallax-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: url('../images/Offenham-River-rocks.webp');
     background-attachment: fixed;
     background-position: center;
     background-size: cover;
   }

   /* overlay gradient to fade to white at top */
   .parallax-bg::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, #f6f3ee 0%, rgba(255,255,255,0) 45%);
     pointer-events: none;
     z-index: 1;
   }

   .parallax-content {
     position: relative;
     z-index: 2;
     max-width: 800px;
     padding: 2rem;
     color: #fff;
     background:rgba(0, 120, 74, 0.5);
     border-radius: 6px;
   }

   .parallax-content h2 {
     font-size: 2.5rem;
     font-weight: 700;
     margin-bottom: 1rem;
   }

   .parallax-content p {
     font-size: 1.2rem;
     margin-bottom: 2rem;
   }

   .parallax-content .btn {
     display: inline-block;
     padding: 0.75rem 1.5rem;
     background: #ff6b00;
     color: #fff;
     border-radius: 4px;
     font-weight: 600;
     transition: background 0.2s ease;
   }

   .parallax-content .btn:hover {
     background: #40b0e0;
   }


   /* ========================
      HOMEPAGE CONTENT SECTION
      ======================== */
      /* Base styles */

      .content-section {
        width: 100%;
        padding: 4rem 1rem;
        background: #f6f3ee;
      }

      .content-wrapper {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        display: flex;
        align-items: center;
        gap: 2rem;
        flex-wrap: wrap;
      }

      /* Image wrapper with decorative shape */
      .image-wrapper {
        position: relative;
        flex: 1 1 60%;
        min-width: 300px;
        overflow: visible;
      }

      .image-wrapper img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 4px;
        position: relative;
        z-index: 2;
        box-shadow: 0 6px 15px rgb(0 0 0 / 0.1);
      }

      /* Decorative shapes behind images */

      .decor-shape {
        position: absolute;
        bottom: -30px;
        left: -40px;
        width: 160px;
        height: 140px;
        z-index: 1;
        border-radius: 8px;
        opacity: 0.8;
        pointer-events: none;
      }

      .green-shape {
        background: #4caf82;
        background-image: radial-gradient(circle at top left, #4caf82 20%, transparent 70%);
      }

      .orange-shape {
        background: #f48024;
        background-image: radial-gradient(circle at top right, #f48024 20%, transparent 70%);
        left: auto;
        right: -40px;
      }

      /* Text box overlapping image */

      .text-box {
        flex: 1 1 35%;
        background: white;
        padding: 2.5rem 3rem;
        box-shadow: 0 10px 20px rgb(0 0 0 / 0.15);
        border-radius: 8px;
        position: relative;
        z-index: 10;
        max-width: 480px;
        transition: transform 0.3s ease;
      }

      /* Positioning text box offset to left or right */

      .left-offset .text-box {
        margin-left: -100px;
      }

      .right-offset {
        flex-direction: row-reverse;
      }

      .right-offset .text-box {
        margin-right: -100px;
        margin-left: 0;
      }

      /* Icon styling */

      .icon {
        font-size: 2rem;
        width: 24px;
        height: 24px;
        line-height: 24px;
        stroke: currentColor;
        text-align: center;
      }

      .green-icon {
        background-color: #4caf82;
      }

      .orange-icon {
        background-color: #f48024;
      }

      /* Typography */

      .text-box h3 {
        font-size: 1.8rem;
        font-weight: 900;
        margin-bottom: 1rem;
        color: #111;
      }

      .text-box p {
        font-size: 1rem;
        line-height: 1.5;
        color: #444;
      }

      /* Responsive */

      @media (max-width: 900px) {
        .content-wrapper {
          flex-direction: column;
          gap: 1.5rem;
        }
        .text-box {
          margin: 0;
          max-width: 100%;
        }
        .right-offset {
          flex-direction: column;
        }
      }


/* TESTIMONIALS *************** */

.testimonials {
  position: relative;
  background: linear-gradient(to bottom, #40b0e0 0%, #5ec2ec 100%);
  padding: 120px 20px;
  color: #ffffff;
  overflow: hidden;
}

.wave-top,
.wave-bottom {
  position: absolute;
  left: 0;
  width: 100%;
  height: 80px;
  overflow: hidden;
  line-height: 0;
}

.wave-top {
  top: 0;
}

.wave-bottom {
  bottom: 0;
}

.wave-top svg,
.wave-bottom svg {
  display: block;
  width: 100%;
  height: 100%;
}

.wave-top path,
.wave-bottom path {
  fill: #ffffff;
  opacity: 0.2;
}

.testimonials-container {
  max-width: 1100px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 70px;
}

.section-tag {
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.section-header h2 {
  font-size: 44px;
  margin: 15px 0;
}

.section-header p {
  font-size: 18px;
  opacity: 0.95;
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
}

.testimonial-card {
  position: relative;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: 45px 35px;
  backdrop-filter: blur(8px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.quote-mark {
  position: absolute;
  top: 20px;
  left: 20px;
  font-size: 120px;
  color: rgba(255, 255, 255, 0.15);
  line-height: 1;
  pointer-events: none;
}

.stars {
  text-align: center;
  font-size: 30px;
  letter-spacing: 5px;
  margin-bottom: 25px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.9;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .section-header h2 {
    font-size: 32px;
  }

  .testimonials {
    padding: 100px 20px;
  }
}









/* ========================
   FOOTER
   ======================== */
   /* Base footer */
 footer {
   background-color: #00784a;
   color: white;
   font-family: Arial, sans-serif;
   font-weight: 400;
   font-size: 0.9rem;
   line-height: 1.5;
   padding: 4rem 2rem 2rem;
 }

 /* Main grid container */
 .footer-main-container {
   max-width: 1400px;
   margin: 0 auto;
   display: grid;
   grid-template-columns: 2.5fr 1fr 1fr 2fr;
   gap: 3rem 2.5rem;
   align-items: start;
 }

 /* Left column */
 .footer-left {
   display: flex;
   flex-direction: column;
 }

 .footer-logo img {
   width: 160px;
   height:auto;
   margin-bottom: 1.5rem;
 }

 .footer-foundation {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 1.2rem;
 }

 .footer-address {
   font-style: normal;
   line-height: 1.4;
   margin-bottom: 2rem;

 }

 .footer-connect-heading {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 0.8rem;
 }

 .footer-social-icons {
   display: flex;
   gap: 1.25rem;
 }

 .footer-social-icons .social-icon {
   background: white;
   color: #1e392a;
   font-weight: 700;
   font-size: 1.2rem;
   width: 32px;
   height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 3px;
   text-decoration: none;
 }

 /* Middle link columns */
 .footer-links-column h6 {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.15em;
   margin-bottom: 1.2rem;
 }

 .footer-links-column ul {
   list-style: none;
   padding: 0;
   margin: 0;
 }

 .footer-links-column ul li {
   margin-bottom: 1rem;
 }

 .footer-links-column ul li a {
   color: white;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .footer-links-column ul li a:hover {
   text-decoration: underline;
   color: #ffc107; /* Gold highlight on hover */
 }

 /* Right CTA column */
 .footer-cta-column {
   display: flex;
   flex-direction: column;
   gap: 2rem;
 }


 .footer-cta-box, .cta-sticky {
   background-color: #1e392a;
   padding: 1.5rem 2rem;
   color: white;
   text-decoration: none;
   border-radius: 3px;
   display: flex;
   flex-direction: column;
   gap: 0.3rem;
   max-width: 320px;
   transition: background-color 0.3s ease;
 }

 .footer-cta-box small, .cta-sticky small {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   opacity: 0.8;
 }

 .footer-cta-box span, .cta-sticky span {
   font-size: 1.3rem;
   font-weight: 600;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
 }

 .footer-cta-box:hover, .cta-sticky:hover {
   background-color: #40b0e0;
 }

.cta-sticky{background-color: #ff6b00; position: fixed; bottom:2%; right:0; z-index: 9999; width:250px; display: block; font-size: 0.8em; padding: 1rem 1.5rem; font-weight: bold;transition: width 0.3s ease; /* smooth movement */}

 .cta-sticky:hover {
    width: 280px;
}

 /* Arrow icon inside CTA */
 .arrow-icon {
   width: 1.2em;
   height: 1.2em;
   stroke-width: 2.5;
   stroke: #f1e05a; /* yellow arrow */
   flex-shrink: 0;
 }

 /* Footer bottom bar */
 .footer-bottom-bar {
  max-width: 1400px;       /* same max width as main footer */
  margin: 3rem auto 0;     /* center horizontally with spacing above */
  padding: 1rem 2rem;      /* same horizontal padding */
  border-top: 1px solid rgba(255 255 255 / 0.15);
  font-size: 0.8rem;
  font-weight: 400;
  color: rgba(255 255 255 / 0.85);
}

 .footer-bottom-bar nav ul {
   list-style: none;
   display: flex;
   gap: 2rem;
   padding: 0;
   margin: 0;
 }

 .footer-bottom-bar nav ul li a {
   color: rgba(255 255 255 / 0.85);
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .footer-bottom-bar nav ul li a:hover {
   color: #ffc107;
 }

 /* Responsive */

 @media (max-width: 1024px) {
   .footer-main-container {
     grid-template-columns: 1fr 1fr;
     gap: 3rem 3rem;
   }
   .footer-cta-column {
     max-width: 100%;
   }
 }

 @media (max-width: 600px) {
   .footer-main-container {
     grid-template-columns: 1fr;
     gap: 2rem;
   }
   .footer-cta-column {
     max-width: 100%;
   }
   .footer-social-icons {
     gap: 0.8rem;
   }
   .footer-social-icons .social-icon {
     width: 28px;
     height: 28px;
     font-size: 1rem;
   }
   .cta-sticky{width:200px;padding:0.5em 0.5em 0.5em 1em;}
   .cta-sticky small,.cta-sticky span{font-size: 12px!important; text-transform:none;}

   footer{padding-bottom:6em;}
 }


/* ========================
   RESPONSIVE
   ======================== */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
.site-header{position: fixed; width:100%;}
.hero-content{padding:0.5em 1em;}
.hero-content h1{font-size: 1.4em;}
.hero-content p{font-size: 0.9em; line-height:1.3em;}
.logo a img{height:80px!important;}
.nav-container{width:100%; padding:1rem;}

.right-offset .text-box, .left-offset .text-box{
  margin:auto;
}

.decor-shape{left:0; right:auto;bottom:-55px;}
.hero-content .decor-shape{z-index: -1;}
  /* Show burger */
  .burger { display: block; }

  /* Slide-in mobile menu */
  .main-nav {
    position: fixed;
    inset: 0;
    background: #00784a;
    backdrop-filter: blur(8px);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(.77,0,.18,1);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .main-nav.open {
    transform: translateX(0);
  }

  .main-nav ul {
    flex-direction: column;
    gap: 1.5rem;
    text-align: left;
  }

  .main-nav a {
    font-size: 1.5rem;
    font-weight: 600;
    background:none;
    color:#fff;
    text-align:left;
  }

  .burger.active span{background-color:#fff;}

  /* Make hero text smaller */
  .hero h1 { font-size: 2.3rem; }

  /* Mobile top bar */
  .top-bar { padding: 1rem 0rem; }

  .nav-container { flex-wrap: wrap; gap: 0.75rem; }

  .footer-logo,.footer-links-column,.footer-social-icons,.footer-connect-heading,.footer-address
  {
    text-align:center;
    font-size: 1.3em;
  }
  .footer-social-icons{align-items: center; justify-content: center;}

}

@media (max-width: 768px) {
  .grid { grid-template-columns: 1fr; }
}