.twotoone .vc_row {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on mobile */
    gap: 20px; /* optional spacing between columns */
    align-items: stretch; /* forces both columns to match height */
}

.twotoone .wpb_column {
    flex: 1; /* each column takes equal width */
}

.twotoone .wpb_single_image img {
    width: 100%;
    height: 100%;        /* make the image fill the column */
    /*object-fit: cover;*/   /* crop image while keeping aspect ratio */
    display: block;
}


@media (min-width: 1059px) {
    .twotoone .vc_row {
        display: flex;
        align-items: stretch;
    }

    .twotoone .wpb_single_image img {
        height: 100%;
        object-fit: cover;
    }
}


h4 {
    font-family: poppins;
  font-weight: 900;
  
  color: #7ba065;
}


.facts-sub-heading a {
  color: #ffcb00;
}

.facts-sub-heading a {
  color: #ffcb00;
}

.facts-sub-heading a:hover{
  color: #6e5905 !important;
}

.cta-button.header-cta-button {
border: 1px solid #010;
  margin-left: 0px;
  
  margin-bottom: 48px !important;
}


.desktopbook{
    margin-top: auto !important;
}


.twotoone .twotoone_single_image {
    flex: 1; /* fills the height of the text column */
    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100%; /* if parent has height */
    /*min-height: 400px; /* fallback for very small content */
}

.myflex {
display: flex;
}

.cta-button {
  /*background-color: #fff;*/
  border-radius: 5px;
  text-decoration: none;
  margin-right: 15px;
  font-weight: 500;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 3em;
  letter-spacing: -0.6px;
  word-spacing: 1px;
  color: #3E6D40;
  border: 3px #3E6D40 solid !important;
}


.banner-subheading{
    letter-spacing: -2.5px !important;
    font-size: clamp(16px, 3vw, 38.5px) !important;
}


button:first-child {

  margin-top: 0%;
 
}



@media (max-width: 480px) {
  .wpforms-container {
    background: #f6f6f6 !important;
    padding: 25px !important;
    width: calc(480px - 190px);
    margin-left: 0px;
  }
}





.burger-icon {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 40px;
    height: 30px;
    /* adjust to your design */
}
.burger-icon .bar1,
.burger-icon .bar2,
.burger-icon .bar3 {
    width: 100%;
    height: 4px;
    background-color: #f6f6f6;
    transition: 0.3s;
}
.burger-icon.change .bar1 {
    transform: rotate(-45deg) translate(-10px, 21px);
}
.burger-icon.change .bar2 {
    opacity: 0;
}
.burger-icon.change .bar3 {
    transform: rotate(45deg) translate(-9px, -24px) !important;
}



/* Scroll animation base */
.scroll-slide {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-slide.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay classes */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }


/* Scroll animations */
.scroll-slide {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.scroll-slide.visible {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.testimonial-item {
    background: #f9f9f9;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.testimonial-item blockquote {
    font-size: 1.1em;
    font-style: italic;
    margin: 0 0 10px 0;
}
.testimonial-item cite {
    font-weight: bold;
}


.testimonial-rating {
    color: #477a08; /* green, like your template */
    font-size: 1.4em;
    letter-spacing: 2px;
    margin-bottom: 10px;
}



 .event-title-link {
  font-weight: 900;
  color: #ffeeac;
  text-decoration: none;
  margin-left: 5px;
}

.event-title-link:hover {
    text-decoration: underline;
    color: #fff !important;
}

/* Blog Grid Enhancements */



.event-date {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    font-weight: normal;
}

/* For single event view */
.eventbrite-single-title .event-date {
    font-size: 1.2rem;
    color: #888;
    margin-top: 10px;
}

/* Date styling */
.event-date {
    display: block;
    font-size: 0.8em;
    color: #666;
    margin-top: 5px;
    font-weight: normal;
}

/* Blog Image Container */
.blog-image {
    position: relative;
    overflow: hidden;
    height: 250px; /* Match your existing image height */
}

/* Featured Image */
.blog-featured-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Title Overlay */
.blog-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(28, 25, 19, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.blog-title {
    color: white;
    text-align: center;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
    font-size: calc(82px - 4vw);
    font-weight: 900;
    text-transform: uppercase;
    padding: 15px;
    width: 90%;
    margin: 0;
}


.company-title {
    position: relative;
  z-index: 2;
  color: #4a7a48;
  text-align: left !important;
  text-shadow: 0 2px 5px rgba(0,0,0,0.0) !important;
  font-size: calc(82px - 4vw);
  font-weight: 900;
  text-transform: uppercase;
  padding: 0px !important;
  
  width: 90%;
  margin: 0;
    margin-bottom: 0px;
  transition: all 0.3s ease;
  margin-bottom: 20px !important;
}

/* Hover Effects */
.blog-card:hover .blog-featured-image {
    transform: scale(1.05);
}

.blog-card:hover .blog-title-overlay {
    background: rgba(174, 10, 10, 0.7);
}


/* Blog Title Link Styling */
.blog-title-link {
    color: #ffffff !important;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 0px;
    transition: all 0.3s ease;
    text-shadow: 0 2px 5px rgba(0,0,0,0.8);
}

.blog-title-link:hover {
    color: #f6f6f6 !important;
    transform: scale(1.02);
    text-shadow: 
        0 0 10px rgba(255,255,255,0.3),
        0 2px 5px rgba(0,0,0,0.9);
}

/* Responsive adjustments */
@media (max-width: 1055px) {
    .blog-title-link {
        
        line-height: 100%;
    }


    .hidden.noshade.leftalign {
  font-size: 60px !important;
}

}

/* Existing Blog Content Styles Remain Unchanged */
.blog-content {
    /* Your existing styles */
    padding: 25px;
    background: #fff;
}

/* Responsive Adjustments */
@media (max-width: 1055px) {
    .blog-title {
        font-size: calc(72px - 4vw);
        padding: 10px;
    }
}


.responsive-picture img {
    height: 100%; /* Match the height of the parent grid item */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image fits without being cropped */
}




/* slider */

.footer-slider-container {
    width: 100%;
    padding: 0px 0;
    background: #f5f5f5; /* Optional */
}

.footer-swiper {
    max-width: 1200px;
    margin: 0 auto;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

/* Navigation buttons */
.swiper-button-prev, .swiper-button-next {
    color: #000;
    background: rgba(255,255,255,0.7);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.swiper-button-prev:after, 
.swiper-button-next:after {
    font-size: 20px;
}


/* slider */


/*animation*/



@keyframes neonFlash {
  0% {
    color: rgb(22, 113, 53);
    text-shadow:
      0 0 5px rgb(22, 113, 53),
      0 0 10px rgb(22, 113, 53),
      0 0 15px rgb(22, 113, 53),
      0 0 20px rgb(22, 113, 53);
  }
  50% {
    color: white;
    text-shadow:
      0 0 5px white,
      0 0 10px white,
      0 0 15px white,
      0 0 20px white;
  }
  100% {
    color: rgb(22, 113, 53);
    text-shadow:
      0 0 5px rgb(22, 113, 53),
      0 0 10px rgb(22, 113, 53),
      0 0 15px rgb(22, 113, 53),
      0 0 20px rgb(22, 113, 53);
  }
}


.flashing-title {
    animation: neonFlash 1s infinite !important;
    font-weight: bold;
    text-transform: uppercase;
}


@keyframes neonGlow {
  0% {
    filter: drop-shadow(0 0 10px rgb(22, 113, 53));
  }
  50% {
    filter: drop-shadow(0 0 15px white);
  }
  100% {
    filter: drop-shadow(0 0 10px rgb(22, 113, 53));
  }
}


.flashing-svg {
    animation: neonGlow 1s infinite !important;
}

.glowing {
  


  color: white;
  background-color: rgba(58, 4, 7, 0.4);
  padding: 50px 20px;
  font-size: 24px;
  border-radius: 10px;
  animation: glow 2.5s infinite alternate;
  margin: 95px auto;
}

@keyframes glow {
  0% { box-shadow: 0 0 5px #fff; }
  50% { box-shadow: 0 0 20px #fff; }
  100% { box-shadow: 0 0 5px #fff; }
}
/*animation end*/


/* Recurrence Badge */
.eventbrite-recurring-badge {
    background: #ffd700;
    color: #000;
    padding: 5px 10px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 15px;
    font-weight: bold;
}

/* Recurrence Dates List */
.recurrence-dates {
    margin: 10px 0;
    padding-left: 20px;
}
.recurrence-dates li {
    list-style-type: disc;
    margin: 5px 0;
}



.map-link {
    display: block;
    margin-top: 10px;
    padding: 8px 15px;
    background: #074401;
    color: white !important;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s ease;
}

.map-link:hover {
    background: #8c0808;
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(174,10,10,0.2);
}



/* Archive Blog Styles */


    .blog-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 25px;
        margin: 0px;
    }

    /* Blog Header with Background Image */
.blog-header-with-bg {
    position: relative;
    height: 300px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0px;
    overflow: hidden;
}

.blog-header-with-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(28, 25, 19, 0.5);
    z-index: 1;
    transition: background 0.3s ease;
}

.blog-card:hover .blog-header-with-bg::before {
    background: rgba(174, 10, 10, 0.6);
}

.blog-title {
    position: relative;
  z-index: 2;
  color: white !important;
  text-align: center;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8);
  font-size: calc(82px - 4vw);
  font-weight: 900;
  text-transform: uppercase;
  padding: 6.25%;
    padding-top: 6.25%;
    padding-bottom: 6.25%;
  width: 90%;
  margin: 0;
    margin-bottom: 0px;
  transition: all 0.3s ease;
  padding-top: 0px;
}


.logotest {
  

  position: relative;
  height: 75px;
  background-size: 75px;
  overflow: hidden;
  z-index: 99999;
  top: 0px;
  left: 25px;
  width: 75px;
  margin-bottom: 25px;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px dotted #4a4a4a;
}

.blog-card:hover .blog-title {
    transform: scale(1.05);
}

/* Keep all your existing styles for other elements */
.blog-content {
    padding: 25px;
    background: #fff;
}

/* Responsive adjustments */
@media (max-width: 1055px) {
    .blog-header-with-bg {
        height: 600px;
    }
    
    .blog-title {
        font-size: calc(72px - 4vw);
        padding: 15px;
    }
}

    .blog-card {
        border: 1px dotted #CECFD0;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .blog-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .blog-featured-image {
        width: 100%;
        height: 250px;
        object-fit: cover;
    }

    .blog-content {
        padding: 25px;
    }

    .blog-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 15px;
    }

    .blog-categories, .blog-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .category-tab, .tag-tab {
        padding: 5px 10px;
        border-radius: 3px;
        font-size: calc(72px - 4vw);
        text-transform: uppercase;
        transition: all 0.3s ease;
    }

    .category-tab {
        background-color: #074401;
        color: white;
    }

    .category-tab:hover {
        background-color: #1C1913;
    }

    .tag-tab {
        background-color: #1C1913;
        color: white;

    }

    .tag-tab:hover {
        background-color: #074401;
        color: #fff !important;
    }

    .meta-tags {
  margin-top: -10px !important;
  font-weight: 400 !important;
}

    .blog-title {
        font-size: calc(82px - 4vw);
        margin-bottom: 15px;
        color: #192331;
        padding-bottom: 0px !important;
        line-height: inherit;
    }

    .blog-excerpt {
        /*font-size: calc(72px - 4vw);*/
        margin-bottom: 15px;
    }

    .read-more {
        color: #074401;
        font-weight: 700;
        text-transform: uppercase;
    }

    @media (min-width: 768px) {
        .blog-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (min-width: 1024px) {
        .blog-grid {
            grid-template-columns: repeat(3, 1fr);
        }
    }

    @media (min-width: 1440px) {
        .blog-grid {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    @media (min-width: 1920px) {
        .blog-grid {
            grid-template-columns: repeat(6, 1fr);
        }


    }


    .blogcardtitle {
  line-height: 100%;
}

.blog-title.blogcardtitle {
  margin-bottom: 0px;
}

/* Archive Blog Styles End */



/* event archive */
    .event-read-more {
    display: block;
    text-align: center;
    background-color: #1C1913;
    color: white;
    text-transform: uppercase;
    padding: 50px;
    font-weight: 400;
    text-decoration: none;
    
    margin-top: 25px;
    transition: background 0.3s ease;
}

.event-read-more i {
    margin-right: 10px;
}

.event-read-more:hover {
    background-color: #074401;
    color: #fff !important;
}

    .eventbrite-events-container { padding:75px; margin: 0px; }
    .eventbrite-event { border: 1px dotted #CECFD0; padding: 25px; margin-bottom: 40px; }
    .eventbrite-event img { max-width: 100%; height: auto; }
    .eventbrite-event-title {  margin-top: 50px; }
    .eventbrite-event-meta { margin-top: 10px;  color: #555; }
    .eventbrite-event-date, .eventbrite-event-venue { margin-bottom: 5px; }
    .eventbrite-event-description { margin-top: 15px; }
    .eventbrite-event-button {
       display: block;
  background-color: #000 !important;
  color: #fff;
  padding: 25px 25px;
  margin-top: 15px;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  font-weight: 400;
    }

    .eventbrite-event-button:hover {
        background-color: #fff !important;
        border: dotted 1px #1C1913;
    }

    .logo-container img {
        height: 0;
    }


   

    .header-image {
        animation: scrollBackground 120s linear infinite;
        background-repeat: repeat;
    }

    .featimgblog {
        width: 100%;
        margin-top: 0px;
    }
/* event Archive end*/



.testimonial-card .testimonial-rating {
    color: #f5b301;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}



.testimonial-card .testimonial-role {
  font-size: 22px;
  opacity: 0.8;
  font-weight: 600;
  color: #0a512e;
}


.testimonial-rating i {
  color: #f5b301;
  margin-right: 2px;
  font-size: 2.1rem;
}


/* ========================================
   FIX: EQUAL WIDTH & HEIGHT GRID CARDS
   ======================================== */

/* 1. Make the grid container full-width with proper spacing */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 25px;
    margin: 75px 0; /* center it */
    /*max-width: 1440px; /* optional: prevent it from being too wide */
    padding: 0 0px; /* consistent padding on sides */
    width: 100%;
}

/* 2. Each card fills its grid cell completely */
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%; /* fill the grid cell */
    min-width: 0; /* prevent overflow */
    border: 1px dotted #CECFD0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* keep everything inside */
}

/* 3. The link wrapper fills the card */
.blog-card .testimonial-link {
    display: flex;
    flex-direction: column;
    flex: 1;
    text-decoration: none;
    width: 100%;
}

/* 4. Header image - consistent height */
.blog-header-with-bg {
    flex-shrink: 0;
    height: 300px;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* 5. Content area - expands to fill */
.blog-card .blog-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 25px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* 6. Excerpt takes remaining space */
.blog-card .blog-excerpt {
    flex: 1;
    margin-bottom: 15px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* 7. Rating at the bottom */
.blog-card .testimonial-rating {
    margin-top: auto;
    margin-bottom: 10px;
}

/* 8. Keep the logotest consistent */
.logotest {
    flex-shrink: 0;
    height: 75px;
    width: 75px;
    margin-bottom: 25px;
    background-size: cover;
    background-position: center;
    border: 1px dotted #4a4a4a;
    overflow: hidden;
    margin-left: 0px;
  margin-bottom: 25px !important;
}


.footerlinks.footermenulinks {
    grid-template-columns: repeat(5, 1fr) !important;
  }



.parapoints {
  padding-bottom: 10px;}

/* 9. Prevent text from breaking the layout */
.blog-title, .company-title, .blog-excerpt, .testimonial-role {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

/* 10. Responsive: 2 columns on tablet */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
        
        padding: 0;
    }
}

/* 11. Responsive: 1 column on mobile */
@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        margin: 25px 15px;
        padding: 0;
    }
    
    .blog-header-with-bg {
        height: 250px;
    }
}


.greenfoot > div > .parapoints {
  padding-bottom: 5px !important;
}


h4.lighttext {
  font-family: poppins !important;
}


.links.lighttext:hover {
  color: #d0fba9 !important;
}


.data-fa-icon.icon-style.book.buttonfooter {
  padding-left: 25px;
  color: #86a16d !important;
}

p, .sidebar, .widget {
  font-weight: 400;
}


.header::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 53px;
  background-size: 100% 100%;
  z-index: 3;
  pointer-events: none;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 130" preserveAspectRatio="none"><path d="M0,60 C50,0 100,0 150,60 C200,120 250,120 300,60 C350,0 400,0 450,60 C500,120 550,120 600,60 C650,0 700,0 750,60 C800,120 850,120 900,60 C950,0 1000,0 1050,60 C1100,120 1150,120 1200,60 L1200,130 L0,130 Z" fill="%23ffffff"/><path d="M0,85 C50,45 100,45 150,85 C200,125 250,125 300,85 C350,45 400,45 450,85 C500,125 550,125 600,85 C650,45 700,45 750,85 C800,125 850,125 900,85 C950,45 1000,45 1050,85 C1100,125 1150,125 1200,85 L1200,130 L0,130 Z" fill="%23ffffff" opacity="0.6"/></svg>') repeat bottom center;
}



.top-strip.scrolled::after {
  content: '';
  position: absolute;
  bottom: -45px;
  left: 0;
  width: 100%;
  height: 53px;
  background-size: 100% 100%;
  z-index: -1;
  pointer-events: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 130" preserveAspectRatio="none"><path d="M1200,70 C1150,130 1100,130 1050,70 C1000,10 950,10 900,70 C850,130 800,130 750,70 C700,10 650,10 600,70 C550,130 500,130 450,70 C400,10 350,10 300,70 C250,130 200,130 150,70 C100,10 50,10 0,70 L0,0 L1200,0 Z" fill="%23ffffff"/><path d="M1200,45 C1150,85 1100,85 1050,45 C1000,5 950,5 900,45 C850,85 800,85 750,45 C700,5 650,5 600,45 C550,85 500,85 450,45 C400,5 350,5 300,45 C250,85 200,85 150,45 C100,5 50,5 0,45 L0,0 L1200,0 Z" fill="%23ffffff" opacity="0.6"/></svg>');
}


/* 1. Make the footer the anchor for the absolutely-positioned wave */


/* 2. Style the .wavy div itself – it acts as the wave container */
.wavy {
  

  position: relative;
  top: 75px;
  left: 0px;
  width: 100%;
  height: 53px;
  pointer-events: none;
  z-index: 10;
}

/* 3. The actual wave graphic – using your SVG, curvy edge at the TOP */
.wavy::before {
  content: '';
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 100%;
  pointer-events: none;
  /* ❌ NO transform: scaleY(-1) – we want the wavy edge at the top */
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 130" preserveAspectRatio="none"><path d="M1200,70 C1150,130 1100,130 1050,70 C1000,10 950,10 900,70 C850,130 800,130 750,70 C700,10 650,10 600,70 C550,130 500,130 450,70 C400,10 350,10 300,70 C250,130 200,130 150,70 C100,10 50,10 0,70 L0,0 L1200,0 Z" fill="%23ffffff"/><path d="M1200,45 C1150,85 1100,85 1050,45 C1000,5 950,5 900,45 C850,85 800,85 750,45 C700,5 650,5 600,45 C550,85 500,85 450,45 C400,5 350,5 300,45 C250,85 200,85 150,45 C100,5 50,5 0,45 L0,0 L1200,0 Z" fill="%23ffffff" opacity="0.6"/></svg>');
}


.season-boat.banner  {
  left: -63px;
  top: 275px;
}



.season-logo.banner {
  top: 275px;
  background-size: auto;
  left: 45%;
}



.season-boat {
  position: absolute;
  width: 45%;
  aspect-ratio: 1;
  left: 0%;
  top: 50%;
  background: url("../images/season-boat.svg") no-repeat center;
    background-size: auto;
  background-size: contain;
  z-index: 3;
  animation: windBobbing 8s ease-in-out infinite;
}

.season-logo {
  position: absolute;
  width: 25%;
  aspect-ratio: 1;
  
  top: 0%;
  background: url("../images/season-logo.svg") no-repeat center;
    background-size: auto;
  background-size: contain;
  z-index: 3;
  animation: windBobbing 8s ease-in-out infinite;
}


@media (min-width: 1500px) {
  .season-frame {
    height: 840px !important;
    top: -184px !important;
  }

  .season-boat.banner {
  left: -298px;
  top: -7px;
}

  .season-logo.banner {
  
  top: 50px;
}
}



@media (max-width: 787px) {

.top-strip.scrolled::after {
  bottom: -19px !important;
  height: 18px !important;
}

.header::after {
  bottom: -2px;
  height: 40px;
  }

  .season-boat.banner {
 
  top: 66%;
 
}

  .season-logo.banner {
  
  top: 271px;
    width: 50%;
    left: 24% !important;
}

.lighttext.greenfoot {
  font-size: 0.6em
}

.footerlinks.footermenulinks {
  margin-top: -10px;
}

.child-seasons-section .feature-card, .activities-grid-section .feature-card {
    padding: 25px 25px 25px !important;
    
    margin: 0 0 !important;

    width: calc(100% - 0px) !important;
  }


 .child-seasons-section {
    padding: 0 !important;
  }


    .activities-grid-section .card-text {
   
  }


.activities-grid-section .feature-card {
    
    
}


h3.card-title {
  margin-bottom: 20px !important;
font-size: calc(100% - -4px) !important;
}

 
  .activities-grid-section {
    padding: 0px !important;
  } 


  .blog-title {
    font-size: calc(38px - 4vw) !important;
    padding: 0px !important;
    } 


      .blog-grid {
    margin: 25px 0px !important;
}

.greenfoot > div > .parapoints{
    font-size: 0.6em !important;
}


data-fa-icon.icon-style.book {
  margin-left: 0px !important;
  padding-left: 0px !important;
}




.season-schooltool {
    position: absolute;
    width: 249% !important;      /* or 175% – keep whatever you need */
    aspect-ratio: 1;
    left: -80% !important;       /* adjust as needed */
    top: 14% !important;         /* adjust as needed */
/* Use the new mobile keyframe – no static transform needed */
    animation: windBobbingMobile 12s ease-in-out infinite !important;
  }



/* Mobile-specific keyframes */
@keyframes windBobbingMobile {
  0%, 100% {
    transform: rotate(90deg) translateY(0) translateX(0);
  }
  25% {
    transform: rotate(90deg) translateY(-8px) translateX(5px);
  }
  50% {
    transform: rotate(90deg) translateY(-16px) translateX(0);
  }
  75% {
    transform: rotate(90deg) translateY(-8px) translateX(-5px);
  }
}

.season-paintbg-01 {
  

    position: absolute;
    width: 425% ;      /* or 175% – keep whatever you need */
    aspect-ratio: 1;
    right: -215% ;       /* adjust as needed */
    top: -0% ;         /* adjust as needed */

  }


}

.season-paintbg-01 {

  position: absolute;
  
  aspect-ratio: 1;
  
  background: url("../images/season-paintbg-01.svg") no-repeat center;
    background-position-x: center;
    background-position-y: center;
    background-size: auto;
  background-size: auto;
  background-size: contain;
  z-index: 1;
  top: 0%;
 }

@media (min-width: 1060px){
 .season-paintbg-01 {

  position: absolute;
  width: 160% !important;
  aspect-ratio: 1;
  right: -28% !important;
  background: url("../images/season-paintbg-01.svg") no-repeat center;
    background-position-x: center;
    background-position-y: center;
    background-size: auto;
  background-size: auto;
  background-size: contain;
  z-index: 1;
 }
}

/* Tablet: 788px to 1059px */
@media (min-width: 816px) and (max-width: 1059px) {
  .season-paintbg-01 {
    width: 189% !important;      /* between mobile 425% and desktop 160% */
    right: -50% !important;      /* adjust to centre it better */
    top: -1% !important;          /* or whatever you need */
    /* keep background and other properties from default */
    /*! width: 100% !important; */
  }

  .season-boat.banner {
  left: -63px;
  top: 344px !important;
}

.season-logo.banner {
    
    background-size: auto !important;
    top: 244px;
    left: 500px;
    z-index: 0;
}
}


@media (min-width: 788px) and (max-width: 815px) {
  .season-paintbg-01 {

    

    
      position: absolute;
  width: 229% !important;
  aspect-ratio: 1;
  right: -98% !important;
  top:-10%;
  }


}


@media (min-width: 587px) and (max-width: 787px) {
   .season-paintbg-01 {
    position: absolute;
    width: 505% !important;
    aspect-ratio: 1;
    right: -261% !important;
    top: -30%;
  }


  .season-schooltool {
    width: 226% !important;
    left: -76% !important;
    top: -83% !important;
}


.season-schooltool {

 width: 164% !important;
    left: -40% !important;
    top: -56% !important;
}


}



@media (max-width: 586px) {
  .season-paintbg-01 {
    position: absolute;
    width: 490% !important;
    aspect-ratio: 1;
    right: -255% !important;
    top: -24% !important;
  }
}










h3.card-title {
  padding-bottom: 0px !important;
}

.card-text {
  text-align: center;
}

h2.vc_custom_heading.vc_do_custom_heading {

    text-align: left !important;
  margin-top: 50px;
}
.footerlinks.footermenulinks {
  margin-bottom: 10px;
}



.child-seasons-section {
  font-family: 'Poppins', sans-serif;
  padding: 50px 75px 0px !important;
  background: #86a16d !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  position: relative !important;
  box-sizing: border-box;
  overflow: visible !important;
}

.child-seasons-section::after {
  content: '' !important;
  position: absolute;
  top: 100% !important;          /* Starts right at the bottom edge */
  left: 0 !important;
  width: 100% !important;
  height: 53px !important;       /* Adjust this to control wave height */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L1200 0 L1200 55 C1100 95 1000 95 900 55 C800 15 700 15 600 55 C500 95 400 95 300 55 C200 15 100 15 0 55 Z' fill='%2386a16d'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: top center !important;
  z-index: 15 !important;
  pointer-events: none !important;
}

.child-seasons-section::before {
  content: '' !important;
  position: absolute;
  bottom: 100% !important;      /* Positions it directly above the section */
  left: 0 !important;
  width: 100% !important;
  height: 53px !important;      /* Matches your wave height */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0 45 C100 5 200 5 300 45 C400 85 500 85 600 45 C700 5 800 5 900 45 C1000 85 1100 85 1200 45 L1200 100 L0 100 Z' fill='%2386a16d'/%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important; /* Aligns the flat bottom of the SVG to the bottom of this pseudo-element */
  z-index: 15 !important;
  pointer-events: none !important;
}


.season-schooltool {
  position: absolute;
  width: 143%;
  aspect-ratio: 1;
  left: -43%;
  top: -48%;
  background: url("../images/season-schooltool.svg") no-repeat center;
    background-position-x: center;
    background-position-y: center;
    background-size: auto;
  background-size: auto;
  background-size: contain;
  z-index: 0;
  animation: windBobbing 12s ease-in-out infinite;
}





@media (max-width: 1059px) {
  #menu.dropdown-menu {
    position: fixed;
    top: var(--header-height, 191px) ;
  }
}
.header-image {
  background-position: center 325% !important;
}




   


@media (max-width: 587px) {
  .season-schooltool {

    width: 239% !important;
   
    left: -78% !important;
    top: -22% !important;
}

  .season-boat.banner,  {
    left: -141px;
    top: 54%;
    width: 56%;
  }

  .season-logo.banner {
    
    top: 38%;
    width: 56%;
  }
}


@media (min-width: 1075px) {
.season-schooltool {
  
  top: -100%;}
}


 @media (max-width: 486px) {
  .season-paintbg-01 {
    top: -3% !important;
  }


    .header::after {
    bottom: -2px;
    height: 40px;
    background-position-y: 0px;
  }

  .season-schooltool {
    top: 3% !important;
}

 .season-boat.banner,   {
    left: -54px;
    top: 74%;
    width: 56%;
  }

  .season-logo.banner{
    top: 74%;
    width: 56%;
  }

  .factsmob {
  width: calc(100% - 30px);
}

}


.header {
  
  background-image: none !important;
}

.facts-sub-heading, .facts-sub-heading p {
font-family: poppins !important;
  font-weight: 300 !important;
  line-height: inherit !important;
}


  h3.inp {
    letter-spacing: inherit !important;
  }

body, p, .sidebar, .widget, .product-content, .description, .facts-sub-heading, footer-links.linkagain.lighttext.greenfoot a, footer-links.linkagain.lighttext.greenfoot {
  font-family: 'poppins', sans-serif !important;
  font-weight: 100 !important;
}

@media (min-width: 1329px) {
  body, p, .sidebar, .widget {
    text-align: left;
    font-size: 16px;
    font-family: poppins !important;
  }
}


.homebg.csbg0 {
  background-image: url('http://localhost/cs/wp-content/uploads/2026/07/csbg.png');
}

.homebg.csbg1 {
  background-image: url('http://localhost/cs/wp-content/uploads/2026/07/paperheart.jpg');
}


.homebg.csbg2 {
  background-image: url('http://localhost/cs/wp-content/uploads/2026/07/scruncthy.jpg');
}


.homebg.csbg3 {
  background-image: url('http://localhost/cs/wp-content/uploads/2026/07/group.png');
}

.homebg.csbg4 {
  background-image: url('http://localhost/cs/wp-content/uploads/2026/07/viesa.jpg');
}


/* =========================
   FRAME (viewport mask)
========================= */

.season-frame {
    width: 100%;
    height: 160px;
    position: relative;
    overflow: hidden;
}

@media (min-width: 400px) {
    .season-frame {
        height: 180px;
    }
}

@media (min-width: 480px) {
    .season-frame {
        height: 230px;
    }
}

@media (min-width: 550px) {
    .season-frame {
        height: 240px;
    }
}

@media (min-width: 680px) {
    .season-frame {
        height: 300px;
    }
}

@media (min-width: 700px) {
    .season-frame {
        height: 325px;
    }
}

@media (min-width: 800px) {
    .season-frame {
        height: 375px;
    }
}

@media (min-width: 900px) {
    .season-frame {
        height: 430px;
    }
}

@media (min-width: 1000px) {
    .season-frame {
        height: 530px;
    }
}

@media (min-width: 1300px) {
    .season-frame {
        height: 630px;
    }
}

@media (min-width: 1500px) {
    .season-frame {
        height: 700px;
    }
}


/* =========================
   PIVOT ANCHOR
========================= */

.season-anchor {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}


/* =========================
   RESPONSIVE CIRCLE SYSTEM
========================= */

.season-circle {
    position: relative;
    width: 100vw;
    max-width: 2000px;
    aspect-ratio: 1;
    transform: translateY(50%);
}


/* =========================
   WHEEL + LEAF LAYERS
========================= */

.season-wheel,
.season-leaves,
.season-leaves-small,
.season-clouds {
    position: absolute;
    inset: 0;
}

.season-wheel img,
.season-leaves img,
.season-leaves-small img,
.season-clouds img {
    width: 100%;
    height: 100%;
    display: block;
}


/* =========================
   ROTATION
========================= */

.season-wheel {
    transform-origin: center;
    animation: spin 50s reverse linear infinite;
    z-index: 2;
}

.season-leaves {
    transform-origin: center;
    animation: spin 70s linear infinite reverse;
    z-index: 1;
}

.season-leaves-small {
    transform-origin: center;
    animation: spin 80s linear infinite reverse;
    z-index: 5;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================
   PAPER PLANE
========================= */

.paper-plane {
    position: absolute;
    width: 45%;
    aspect-ratio: 1;
    left: 19%;
    top: 50%;

    background:
        url("../images/paper-plane.svg")
        no-repeat center;

    background-size: contain;

    z-index: 3;
    animation: windBobbing 5s ease-in-out infinite;
}


/* =========================
   CLOUDS
========================= */

.season-clouds {
    position: absolute;
    aspect-ratio: 1;
    top: 46%;

    background:
        url("../images/season-clouds.svg")
        no-repeat center;

    background-size: contain;

    z-index: 10;
    animation: windBobbing 10s ease-in-out infinite;
}


/* =========================
   FLOAT / WIND ANIMATION
========================= */

@keyframes windBobbing {

    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    20% {
        transform: translate(12%, -6%) rotate(8deg) scale(1.03);
    }

    40% {
        transform: translate(22%, 3%) rotate(14deg) scale(1.06);
    }

    60% {
        transform: translate(15%, 10%) rotate(6deg) scale(1.02);
    }

    80% {
        transform: translate(6%, 4%) rotate(-6deg) scale(0.99);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
}



.cs-card-section.child-seasons-section {
  margin-bottom: 50px !important;
}

.trust {
  background: #fff;
}


.cta-button.header-cta-button.remargin {
  top: 25px !important;
  position: relative;