@media only screen and (max-width: 600px) {
    li.nav-item.mobile-menu {
        display: block;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden !important;
    -webkit-overflow-x: hidden !important;
    -moz-overflow-x: hidden !important;
    -ms-overflow-x: hidden !important;
}

/*community gardens contact form*/
/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    /* padding-top: 100px; */
    /* Location of the box */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

.fixed-navbar ul li.nav-item a.nav-link,
.navbar ul li.nav-item a.nav-link {
    font-size: 16px !important;
}

nav.navbar.navbar-expand-lg.navbar-bg.fixed-navbar ul.navbar-nav li.nav-item a.nav-link,
nav.navbar.navbar-expand-lg.navbar-bg ul.navbar-nav li.nav-item a.nav-link {
    font-size: 16px !important;
}

/* Modal Content */
.modal-content {
    background-color: #EAE5DE;
    margin: auto;
    padding: 10px 15px;
    /* padding: 10px 0; */
    /* border: 1px solid #888; */
    width: 90%;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

button.navbar-toggler {
    font-size: x-large;
}

img#menu-icon {
    height: 36px;
    width: 36px;
}

li.nav-item.mobile-menu {
    display: none;
}


/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
    width: 100%;
    /* Full width */
    padding: 12px;
    /* Some padding */
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 4px;
    /* Rounded borders */
    box-sizing: border-box;
    /* Make sure that padding and width stays in place */
    margin-top: 6px;
    /* Add a top margin */
    margin-bottom: 16px;
    /* Bottom margin */
    resize: vertical
        /* Allow the user to vertically resize the textarea (not horizontally) */
}

input[type=email],
select,
textarea {
    width: 100%;
    padding: 12px;
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical
        /* Allow the user to vertically resize the textarea (not horizontally) */
    ;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    /*  background-color: #04AA6D;*/
    color: black;
    background-color: white;
    padding: 12px 80px;
    border: 2px solid black;
    /*  border-radius: 4px;*/
    cursor: pointer;
    font-size: 20px;
    font-weight: 700;
}

/* When moving the mouse over the submit button, add a darker green color */

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
}


.en-espanol-a {
    color: #0d6efd;
    text-decoration: underline;
    
}
.en-espanol{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.growing-to-give-program-section p a {
    color: #61177C;
}

.hero-section-content-div p a {
    color: #ebebeb;
}

.nav-link,
.nav-link:hover {
    color: white !important;
}

.navbar-toggler {
    border: #ccc solid 1px;
}

.para-about {
    font-size: 18px !important;
    line-height: 1.929 !important;
    margin-bottom: 0 !important;
    color: #7f7f7f !important;
    font-family: 'Baskervville', serif !important;
    font-weight: 100 !important;
}

.dark-green-color {
    color: #32471A;
}

/*Community garden page styles*/
.community-garden-section {
    background-color: #32471a !important;
    padding-bottom: 30px !important;
    font-weight: 100 !important;
}

/*pagination*/
.pagination {
    display: inline-block;

}

.pagination a {
    color: black;
    background: #DEF2B3;
    font-weight: bold;
    float: left;
    padding: 9px 16px;
    margin-left: 6px;
    text-decoration: none;
    transition: background-color .3s;
    /*  border: 1px solid #ddd;*/
}

.pagination .inactive {
    background: #829F4B;
}

.pagination a.active {
    background: #DEF2B3;
}

.pagination a:hover:not(.active) {
    background-color: #5e7434;
}

.dropdown .dropdown-menu {
    transition: all .5s;
    /* overflow: hidden; */
    /* transform-origin: top center;
    transform: scale(1, 0); */
    /* display: block; */
    /* margin-top: -1px; */
    height: auto !important;
    z-index: 500000;
    /* overflow-y: scroll !important; */
    overflow-x: hidden !important;
    box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;
    border: none !important;
}
.dropdown .dropdown-menu-blog {
  height: 550px !important;
  overflow-y: auto !important;
  scrollbar-width: thin; /* for Firefox */
  scrollbar-color: #888; /* thumb and track color for Firefox */
}

/* Chrome, Edge, and Safari */
.dropdown .dropdown-menu-blog::-webkit-scrollbar {
  width: 8px;
}
/* .dropdown-menu-projects{
    height: 200px;
    z-index: 500000;
} */
.dropdown-about .dropdown-menu-about {
    z-index: 500000;
    max-height: 540px !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
}

.indent {
    padding-left: 20px;
}

#project-dropdown {
    height: 340px;
}

.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    /* height: 800px;  */
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

ul.dropdown-menu {
    width: 660px;
    margin-left: -590px;
}

ul.dropdown-menu-projects {
    width: 430px;
    margin-left: -297px;
    height: 160px !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}

ul.dropdown-menu-about-us {
    width: 180px;
    margin-left: -80px;
}

p.h1-p {
    color: white;
    margin-top: 0px;
    font-size: 3rem;
    margin-bottom: 0;
}

/*======= Custom donate popup design here ==========*/
.donate-btn{
    padding: 10px 20px;
    background-color: #fff;
    color: #000;
    outline: none;
    border: 2px solid #fff;
    transition: .3s;
    font-weight: 600;
    margin-top: 10px;
    border-radius: 4px;
}

.donate-btn:hover{
    background-color: transparent;
    color: #fff;
}
.donate-btn img{
    height: 18px;
    margin-left: 10px;
    width: auto;
}
.donate-btn-slide{
    padding: 10px 10px;
    background-color: #364620;
    color: #fff;
    outline: none;
    border: 2px solid #364620;
    transition: .3s;
    font-weight: 600;
    margin-top: 10px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.donate-btn-slide img{
    height: 18px;
    margin-right: 3px;
    width: auto;
}
/*====== Donate Popup css ========*/



/*====== Donations buttons css start here  =======*/
     .donation-fixed {
      position: fixed;
      bottom: 185px;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      z-index: 999;
    }

    .donation-btn {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      color: #fff;
      text-align: center;
      font-family: 'Segoe UI', sans-serif;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }

    .donation-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 24px rgba(0,0,0,0.4);
      color: #fff;
    }

    /* ===== Colors ===== */
    .give-100 {
      background-color: #6B002C;
    }
    .give-50 {
      background-color: #b4314a;
    }
    .give-25 {
      background-color: #ec2133;
    }


    /* ===== Text Styles ===== */
    .donation-btn span:first-child {
      font-size: 15px;
      line-height: 1;
    }
    .donation-btn span:last-child {
      font-size: 17px;
      margin-top: 4px;
    }

    /* ===== Responsive Adjustments ===== */
    @media (max-width: 992px) {
      .donation-btn {
        width: 80px;
        height: 80px;
      }
      .donation-btn span:first-child {
        font-size: 14px;
      }
      .donation-btn span:last-child {
        font-size: 16px;
      }
      .donation-fixed {
        gap: 12px;
        bottom: 80px;
      }
    }

    @media (max-width: 576px) {
      .donation-btn {
        width: 65px;
        height: 65px;
      }
      .donation-btn span:first-child {
        font-size: 12px;
      }
      .donation-btn span:last-child {
        font-size: 14px;
      }
      .donation-fixed {
        gap: 10px;
        bottom: 40px;
      }
    }
/*====== Donations buttons css start here  =======*/


/*====== SET 2 Donations buttons css start here  =======*/
     .set2-donation-fixed {
      position: fixed;
      bottom: 185px;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      z-index: 999;
    }

    .set2-donation-btn {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-weight: 700;
      color: #fff;
      text-align: center;
      font-family: 'Segoe UI', sans-serif;
      box-shadow: 0 8px 20px rgba(0,0,0,0.3);
      transition: all 0.3s ease;
      cursor: pointer;
      text-decoration: none;
    }

    .set2-donation-btn:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 24px rgba(0,0,0,0.4);
      color: #fff;
    }


    /* ===== Colors ===== */
    .set2-donation-fixed .give-100 {
      background-color: #bb6367;
    }
    .set2-donation-fixed .give-50 {
      background-color: #7395a2;
    }
    .set2-donation-fixed .give-25 {
      background-color: #e4b853;
    }

    /* ===== Text Styles ===== */
    .set2-donation-btn span:first-child {
      font-size: 15px;
      line-height: 1;
    }
    .set2-donation-btn span:last-child {
      font-size: 17px;
      margin-top: 4px;
    }

    /* ===== Responsive Adjustments ===== */
    @media (max-width: 992px) {
      .set2-donation-btn {
        width: 80px;
        height: 80px;
      }
      .set2-donation-btn span:first-child {
        font-size: 14px;
      }
      .set2-donation-btn span:last-child {
        font-size: 16px;
      }
      .set2-donation-fixed {
        gap: 12px;
        bottom: 80px;
      }
    }

    @media (max-width: 576px) {
      .set2-donation-btn {
        width: 65px;
        height: 65px;
      }
      .set2-donation-btn span:first-child {
        font-size: 12px;
      }
      .set2-donation-btn span:last-child {
        font-size: 14px;
      }
      .set2-donation-fixed {
        gap: 10px;
        bottom: 40px;
      }
    }
/*====== SET 2 Donations buttons css start here  =======*/

.close-btn-area {
    position: absolute;
    top: 2px; /* Adjust to your desired distance from the top */
    right: 10px; /* Adjust to your desired distance from the right */
    z-index: 10; /* Ensure it's above other elements */
}

.donate-close {
    background: none;
    border: none;
    font-size: 1.5em; /* Adjust for size */
    color: #000; /* Button color */
    cursor: pointer;
    transition: all 0.3s ease;
}

.donate-close:hover {
    color: #ff0000; /* Change color on hover */
}
.donate-form {
    margin-bottom: 25px;
    /* text-align: center; */
}

.donate-form h2 {
    font-size: 1.4em;
    font-weight: bold;
    margin-bottom: 8px;
    color: #000;
}

.donate-form p {
    font-size: 17px;
    color: #000;
    line-height: 1.3;
    font-weight: 500;
    margin-bottom: 18px;
}

.donate-form .donation-options {
    display: flex;
    /* justify-content: center; */
    margin-bottom: 10px;
}
.btn-title{
    font-weight: 600;
    margin-bottom: 4px;
}
.donate-form .button {
    background-color: #fff;
    color: #000;
    border: 2px solid #000;
    padding: 9px 30px;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    border-radius: 0;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.donate-form .button:hover {
    background-color: #000;
    color: #fff;
}

.donate-form .monthly-option {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    gap: 5px;
}

.donate-form .monthly-option input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 5px;
}

.thank-you {
    font-size: 1.2em;
    font-weight: bold;
    color: #000;
    margin: 0;
    padding: 0;
}

@media (max-width: 768px) {
    .donate-form p {
        font-size: 18px;
        color: #000;
        line-height: 1.3;
        margin-bottom: 20px;
    }
}
@media (max-width: 600px) {
    .donate-form2{
        margin-top: 50px !important;
    }
}
@media (max-width: 480px) {
    .donate-form .button {
        padding: 8px 22px;
        font-size: 1em;
        outline: none;
    }
    .modal-content{
        padding: 5px;
        width: 92%;
    }
    .growing-to-give-text-section h1{
        font-size: 30px;
    }
    .growing-to-give-text-section h2{
        font-size: 27px;
    }
}
@media (max-width: 450px) {
    .modal-content{
        padding: 5px;
        width: 95%;
    }
    .donate-form p{
        margin-bottom: 15px;
    }
    p.h1-p {
        font-size: 2.5rem;
    }
}




/*===== Youtube video section css start ======*/
    .youtube-vid-sec {
      background: #fff;
      padding: 60px 0;
    }

    .youtube-vid-sec .video-box {
      position: relative;
      overflow: hidden;
      border-radius: 6px;
      cursor: pointer;
      transition: transform 0.3s ease;
    }

    .youtube-vid-sec .video-box:hover {
      transform: scale(1.02);
    }

    .youtube-vid-sec .video-box img.thumbnail {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 6px;
    }

    .youtube-vid-sec .play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 70px;
      height: 50px;
      z-index: 2;
      transition: transform 0.3s ease;
    }

    .youtube-vid-sec .video-box:hover .play-icon {
      transform: translate(-50%, -50%) scale(1.1);
    }

    @media (max-width: 768px) {
      .youtube-vid-sec .play-icon {
        width: 60px;
        height: 40px;
      }
    }
/*===== Youtube video section css End ======*/


/*========== Tab slider css start here =============*/
.slide-tab {
    position: fixed;
    right: 0;
    bottom: 45%; /* Positioned 100px from the bottom */
    
    transition: all 0.3s ease, opacity 0.3s ease;
    z-index: 1000;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
  }
  
  .slide-tab.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  

  

  


/*======= Custom donate popup design here ==========*/


ul {
    list-style: none;
    padding-left: 0;
}

.custom-container {
    max-width: 1400px;
    margin: 0 auto;
}
.donate-popup .modal{
    z-index: 9999999 !important;
}
.navbar-bg {
    background-color: #32471A;
    padding: 6px 50px 5px 100px;
}
.fixed-navbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    /* Ensure the navbar stays above other content */
}

.header-logo {
    height: 80px;
    width: 150px;
}

.navbar-content-div {
    display: flex;
    justify-content: flex-end;
}

.navbar-menu-icon {
    height: 20px;
    width: 20px;
}

.navbar-content-div ul li a {
    color: #ECECDD !important;
    margin-right: 30px;
}

.navbar-content-div ul li a.dropdown-item {
    color: #000 !important;
}

/* Reserve stable navbar height to prevent CLS */
.navbar { min-height: 64px; }
.header-logo { height: 60px; width: auto; display: block; }
.navbar-menu-icon { height: 32px; width: 32px; display: block; }
/* Fallback for older browsers */
.hero-section{
  height: 70vh;
  width: 100%;
  background: center/cover no-repeat url("/images/header.png");
  padding-left: 110px;
  padding-top: 20px;
  display: flex;
  align-items: center;
  position: relative;
  padding-bottom: 200px;
}

/* Modern override: prefer WebP, fallback to PNG */
.hero-section{
  background-image: -webkit-image-set(
    url("/images/header.webp") type("image/webp") 1x,
    url("/images/header.png")  type("image/png")  1x
  );
  background-image: image-set(
    url("/images/header.webp") type("image/webp") 1x,
    url("/images/header.png")  type("image/png")  1x
  );
}

.hero-section-content-div {
    height: auto;
    width: 100%;
    margin-top: 25px;
}

.hero-dark-bg-content {
    width: 100%;
    /* max-width: 700px; */
    background-color: #32471A;
    position: absolute;
    bottom: 0;
    left: 0;
    padding-left: 110px;
}

.en-espanol1 {
    color: #8ac144;
    margin-bottom: 10px;
    margin-top: 53px;
    font-size: 24px;
}

.en-espanol2 {
    color: #8ac144;
    margin-bottom: 7px;
    margin-top: 15px;
}

.en-espanol {
    color: #8ac144;
}

.hero-section-content-div h1 {
    color: white;
    margin-top: 20px;
    font-size: 3rem;
    margin-bottom: 20px;
}

.hero-section-para {
    color: #fff;
    font-size: 18px;
    width: 450px;
}
@media screen and (max-width: 991px) {
    .hero-section {
        height: auto;
    }
    .hero-dark-bg-content{
        width: 100%;
    }
}
@media screen and (max-width: 518px) {
    
    .hero-section-para {
        color: #fff;
        font-size: 18px;
        width: auto;
    }
}
.hero-section-content-div ul {
    list-style: none;
    color: #ECECDD;
    padding: 0px;
    margin-bottom: 30px;
}

.hero-section-content-div ul li {
    display: inline;
    margin-right: 10px;

}

.growing-to-give-text-section {
    height: auto;
    width: 100%;
    background-color: #fbfbfe;
    padding: 35px 150px 0px 150px;
    /* position: absolute; */
    bottom: 0;
    width: 100%;
    /* display: none; */
}

@media screen and (max-width: 991px) {
    .hero-section {
        padding-left: 50px;
    }
    .growing-to-give-text-section {
        height: auto;
        width: 100%;
        background-color: #fbfbfe;
        padding: 35px 35px;
        /* position: absolute; */
        bottom: 0;
        width: 100%;
        /* display: none; */
    }
}

.growing-to-give-text-section h1,
h2,
h3,
h4 {
    font-weight: 800;
}

.growing-to-give-text-section h1,
h2,
h3,
h4,
p {
    font-family: 'Baskervville', serif !important;
}

.growing-to-give-text-section p {
    font-size: 19px;
    color: #222;
}

.iframe-wrapper {
    position: relative;
    padding-top: 56.25%;
}

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

.video-div {
    height: 200px;
    width: 100%;
    background-color: red;
}

.growing-to-give-picture-section {
    height: auto;
    width: 100%;
    background-color: #fbfbfe;
    padding: 10px 150px 20px 150px;
}

.initiatives-card {
    height: 400px;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: all .5s ease-in-out;
    position: relative;
    overflow: hidden;
    /* Ensure that the background does not spill out of the container */
}

.initiatives-card:hover {
    background-size: 120%;
    /* Increase the background size */
}

.initiatives-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}

.growing-to-give-picture-section p {
    font-family: Verdana;
    /* font-weight: bold; */
    color: #111;
    margin-bottom: 40px;
    margin-top: 10px;
    font-size: 20px;
}

.growing-to-give-picture-section-link {
    text-decoration: none;
    color: white;
    font-family: 'Baskerville', serif;
}

.card-heading {
    position: relative;
    z-index: 200;
    font-size: 40px;
    color: #fff;
}

.growing-to-give-program-section {
    height: auto;
    width: 100%;
    background-color: #fbfbfe;
    padding: 10px 150px 0px 150px;
}

.growing-to-give-program-section h3 {
    font-weight: bold;
    margin-bottom: 20px;
}

.growing-to-give-program-section h3,
p {
    font-family: 'Baskervville', serif;
}

.growing-to-give-program-section p {
    font-size: 18px;
}

.separator-div {
    height: 1px;
    width: 100%;
    background-color: gray;
}

.growing-to-give-picture1-section {
    height: auto;
    width: 100%;
    background-color: #fbfbfe;
    padding: 50px 150px 20px 150px;
}

.picture1-section-img5 {
    /* background-image: url("../images/gtg-southafrica.jpeg"); */
    background-position: top;
}

.initiatives-card img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    transition: all .5s ease-in-out;
}

.initiatives-card img:hover {
    transition: all .5s ease-in-out;
    transform: scale(1.2);
    transition: all .5s ease-in-out;
}

.growing-to-give-picture1-section p {
    font-family: Verdana;
    font-weight: bold;
    margin-bottom: 40px;
    margin-top: 10px;
    font-size: 20px;
}

.growing-to-give-picture1-section-link {
    text-decoration: none;
    color: white;
    font-family: 'Baskerville', serif;
}

.growing-to-give-footer {
    height: auto;
    width: 100%;
    background-color: #32471A;
    padding: 100px 150px 70px 150px;

}

#gtgFooter {
    /* position: fixed; */
    bottom: -100%;
    width: 100%;
    transition: bottom 0.5s ease-in-out;
    z-index: 100;
}

.growing-to-give-footer-left-content-div {
    height: 300px;
    width: 50%;
    padding-top: 30px;
}

.growing-to-give-footer-left-content-div ul {
    list-style: none;
    padding: 0px;
}

.growing-to-give-footer-left-content-div ul li {
    margin-bottom: 20px;
    color: #EBEBEB;
}

.growing-to-give-footer-left-content-div ul li a {
    color: #EBEBEB;
}

.growing-to-give-footer-right-content-div {
    height: auto;
    width: 100%;
    padding-top: 55px;
}

.growing-to-give-footer-right-content-div h4 {
    color: #8ac144;
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 18px;
    text-decoration: underline;
    margin-top: -40px;
    padding-left: 115px;
}

.growing-to-give-footer-right-content-div p {
    color: #ECE5DD;
    font-size: 18px;
    font-family: 'Baskervville', serif;
}

.gtg-footer-icons-div ul {
    list-style: none;
    padding: 0px;
    margin-top: 20px;
}

.gtg-footer-icons-div ul li {
    margin-top: 10px;
    display: inline;
    margin-right: 20px;
}

.growing-to-give-copyright-div {
    height: 100px;
    width: 100%;
    background-color: #3c4724;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    padding: 15px;
    margin-top: 19px;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    /* margin-bottom: 190px; */
}

.social-icons {
    height: 100px;
    width: 100%;
    background-color: #3c4724;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff !important;
    font-size: 20px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-bottom: -25px;
}

.growing-to-give-copyright-div p {
    color: #fff !important;
}

/* ***************** */
.mob-menu-section {
    width: 100%;
    height: 100vh;
    max-width: 600px;
    /* min-width: 600px; */
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #696f4b;
    position: fixed;
    top: 90px;
    right: 0;
    z-index: 1090;
    padding: 2rem;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    font-family: 'valkyrie-text';
    padding-bottom: 60px;
}

.mob-nav-visible {
    transform: translateX(0);
}

.mob-menu-section ul li {
    color: #fff;
    margin-bottom: 15px;
}

.mob-menu-section ul li a {
    text-decoration: none;
    color: #fff;
}

.nav-heading-mob {
    color: #fff;
    margin: 15px 0;
}


/* ***********Modal************ */

.newsletter-modal {
    display: none!important;
    position: fixed !important;

    z-index: 888;
    /* left: 50%; */
    /* margin-left: -350px; */
    /*top: 50%;*/
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -0%);
    width: 1700px;
    /*bottom: 0;
    overflow: auto; 
    width: 100%;
    margin: auto;*/
    padding: 0px 150px 0px 520px;
    background-color: #ece5dd;
}

/* Modal Content */
.newsletter-modal .modal-content {
    background-color: #ece5dd;
    /* margin: 15% auto; */
    /*padding: 50px 30px;*/
    width: 100%;
    /* max-width: 700px; */
    border: 2px blue;
    margin-bottom: -16px;
    margin-left: 90px;
}

.newsletter {
    background-color: #fff;
    padding: 2rem 2rem;
    margin-top: -100px;

}

.modal-inner-wrapper h3 {
    font-weight: bold;
    font-size: 28px !important;
}

/*  .btns-container {
    
  
    padding-top: 1rem;

  }*/
.newsletter p {
    font-weight: 500;
    color: #000;
    font-size: .9rem !important;
    line-height: 1.3;
}

.modal-inner-wrapper {
    display: grid;
    gap: 4rem;
    grid-template-columns: 1fr 1fr;
    /*padding: 2rem 0;*/
}

/* The Close Button */
.close {
    display: none !important;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 40px;
    top: 30px;
    background: black;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.close img {
    width: 50%;
}

.close:hover,
.close:focus {
    text-decoration: none;
    cursor: pointer;
}

/* Newsletter styles */

.donate-section h3 {
    margin: 10px 0;
}

.newsletter p {
    font-size: 14px;
}

.newsletter input[type="text"],
.newsletter input[type="email"] {
    width: calc(100% - 22px);
    padding: 10px;
    margin: 10px 0;
    display: inline-block;
    border: none;
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    width: 100%;
    margin-top: 2rem;
}

/* Button styles */
.subscribe-button {
    margin-top: 2rem !important;
    display: block;
}

.subscribe-button,
.donate-button,
.learn-more,
.sponsor-button {
    background-color: #fff;
    color: black;
    border: 2px solid black;
    padding: 14px 20px;
    margin: 10px 0;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

.subscribe-button:hover {
    opacity: 0.8;
}


.donate-button {
    width: auto;
    padding: 10px 18px;
    width: 80px;
    height: 80px;
    font-size: 22px;
    font-weight: bold;
}

.donate-button:hover {
    background-color: #000;
    color: #fff;
}

.donate-button.learn-more-btn {
    font-size: 14px !important;
}

#donate-btn4 {
    border-left: none;
}


.learn-more {
    background-color: #2196F3;
}

.sponsor-button {
    background-color: #f44336;
}

.contentarea.las-lst-para.car-sec h3 {
    position: relative !important;
}

/* ***********MEDIA QUERY************ */
@media (max-width: 600px) {
    nav.navbar.navbar-expand-lg.navbar-bg .container-fluid {
        padding: 0;
    }

    a.navbar-brand {
        padding-left: 10px;
    }

    .hero-dark-bg-content {
        padding-left: 40px;
    }

    .hero-section {
        padding-bottom: 200px !important;
    }

    .navbar-bg {
        padding: 10px 0px;
    }

    .header-logo {
        height: 60px;
        width: auto;
    }

    .growing-to-give-footer,
    .growing-to-give-program-section,
    .growing-to-give-picture1-section,
    .growing-to-give-picture-section,
    .growing-to-give-text-section,
    .hero-section {
        padding: 40px 20px;

    }

    .growing-to-give-footer {
        padding-top: 80px;
    }

    .hero-section-content-div {
        max-width: unset;
    }

    .nav-link {
        color: #fff;
    }

    .navbar-toggler {
        border: none;
        margin-right: 10px;
    }

    .initiatives-card {
        margin-bottom: 1rem;
        height: 250px;
    }

    .newsletter-modal {
        padding: 0 !important;
    }

    .newsletter {
        margin-top: 70px;
    }

    .growing-to-give-footer-left-content-div {
        width: 70%;
    }

    .growing-to-give-footer-right-content-div {
        height: auto;
        width: 100%;
    }

    .contentarea.las-lst-para.car-sec::before {
        height: 350px !important;
    }

    .mob-menu-section {
        max-width: unset !important;
    }

    .modal-inner-wrapper {
        grid-template-columns: 1fr !important;
    }

    .newsletter-modal {

        bottom: 0;
        width: 100%;

        z-index: 888;

        margin-left: 0;
    }

    .btns-container {
        height: 224px;
        margin-left: -70px;
    }

    .donate-button {
        width: auto;
        padding: 10px 18px;
        width: 70px;
        height: 70px;
        font-size: 20px;
        font-weight: bold;
    }

    .custom-checkbox {
        position: absolute;
        /* margin-top: 105px; */
        margin-top: 25px;
        /* margin-left: 90px; */

    }

    .newsletter-modal .modal-content {
        position: static !important;
    }
}


.newsletter-modal .modal-content {
    position: static !important;
}


/* Hide the default checkbox */
.custom-checkbox input[type="checkbox"] {
    visibility: hidden;
    position: absolute;
}

.custom-checkbox .checkmark {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 8px;
    border: 1px solid black;
    /* background: url('../images/tick.png') no-repeat center center; */
    /* background-size: 90%!important; */
    vertical-align: middle;
    cursor: pointer;
    background-color: white;
    margin-left: 10px;
}

.checkbox-desc {
    width: 120px;
}

/* When the checkbox is checked, display the checkmark */
.custom-checkbox input[type="checkbox"]:checked+.checkmark {
    /* background: url('../images/tick.png') no-repeat center center; */
    background-size: contain;
}

/* Style the label text */
.custom-checkbox {
    display: flex;
    align-items: center;
    cursor: pointer;
    justify-content: center;
}

.black-active {
    /* Your styles for the active state, for example: */
    background-color: black;
    color: white;
    /* Add other styles as needed */
}

.black-active:hover {
    background-color: #fff;
    color: #000;
}

.hr {
    width: 100%;
    height: 2px;
    margin: 5px 0 20px 0;
    background-color: #fff;
}





/* CSS */
.director-container {
    overflow: hidden;
}

.centered:hover {
    transition: 1s all ease;
    padding-bottom: 240px;
    bottom: -42%;
}

.centered:hover p {
    visibility: visible;
    display: block;
}


/* ********************* About us ******************** */



.ourTeam h4 {
    color: #14182e;
    margin: 0 0 30px 0;

}

header.text-center h3 {

    font-size: 1.4rem;
    text-align: left;
    padding: 0 30px;
    padding-top: 20px;
    margin-bottom: 0;
    margin-top: 3rem;
}

header.text-center h2 {
    font-size: 1.4rem;
    text-align: left;
    padding: 0 18px;
    /*    padding-top: 20px;*/
    margin-bottom: 0;
    margin-top: 2rem;
}

.ourTeam .i {
    margin-top: 30px
}

.ourTeam .i .c {
    background: #ecb63a;
    /*
    -webkit-box-shadow: 0 4px 0 #2b86ac;
    -moz-box-shadow: 0 4px 0 #2b86ac;
    box-shadow: 0 4px 0 #2b86ac;
*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    position: relative;
    overflow: hidden;
    padding-bottom: 80px
}

.ourTeam .i .c .wrap {
    position: relative
}

.ourTeam .i .c .wrap img {
    width: 100%;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

.ourTeam .i .c .wrap .info {
    padding: 15px 0;
    position: absolute;
    top: 100%;
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    background-color: #ecb63a;
}

.ourTeam .i .c .wrap .info .name {
    margin: 0;
    font-size: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #14182d;
}

.ourTeam .i .c .wrap .info .position {
    margin: 0;
    font-size: 12px;
    /*    font-size: 1.2rem;*/
    color: #14182d;
    position: relative;
    z-index: 9;
}

.ourTeam .i .c .more {
    position: absolute;
    bottom: -100%;
    width: 100%;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
    font-size: 1.4rem;
    /* height: 375px; */
    height: 100%;
    text-align: left;
    padding-top: 20px;
    background: #ecb63a;
}

.ourTeam .i .c .more p {
    margin: 0 18px 30px 18px;
    line-height: 26px;
    color: #333;
    font-size: 1rem;
    padding-top: 7px;
}

.ourTeam .i .c .more p a {
    color: #c85d65;
    display: block;
    margin-top: 15px;
}

.ourTeam .i .c .more .socials {
    margin: 0 0 20px 0
}

.ourTeam .i .c .more .socials a {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    font-size: 2.2rem;
    color: #fff;
    margin: 0 0 0 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    text-align: center;
    -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 3px 0 rgba(0, 0, 0, .1);
    box-shadow: 0 3px 0 rgba(0, 0, 0, .1)
}

.ourTeam .i .c .more .socials a:first-child {
    margin: 0
}

.ourTeam .i .c .more .socials a.google-plus {
    background: #e23535
}

.ourTeam .i .c .more .socials a.google-plus:hover {
    background: #de2020
}

.ourTeam .i .c .more .socials a.linkedin {
    background: #069
}

.ourTeam .i .c .more .socials a.linkedin:hover {
    background: #005580
}

.ourTeam .i .c:hover img {
    -moz-opacity: 0;
    -khtml-opacity: 0;
    -webkit-opacity: 0;
    opacity: 100
}

.ourTeam .i .c:hover .info {
    top: 40%
}

.ourTeam .i .c:hover .more {
    bottom: -45%


}

.p-lr-20 {
    padding: 0 20px;
}

.p-lr-30 {
    padding: 0 30px;
}

.p-lr-15 {
    padding: 0 15px;
}

.p-l-30 {
    padding-left: 30px;
}

.ourTeam .i .c .wrap .info .name-desktop {
    display: block;
}

.ourTeam .i .c .wrap .info .name-mobile {
    display: none;
}

@media screen and (max-width:768px) {
    .p-lr-30 {
        padding: 0 15px;
        padding-right: 10px;
    }

    .p-l-30 {
        padding-left: 15px;
    }

    .ourTeam .i .c .wrap .info .name-mobile {
        display: block;
    }

    .ourTeam .i .c .wrap .info .name-desktop {
        display: none;
    }

    .ourTeam .i .c .wrap .info .name-mobile {
        font-size: 1.6rem;
        font-weight: 900;
        padding-top: 1.1rem;
        line-height: 0.8;
    }

    .ourTeam .i .c .wrap .info .name-mobile span {
        font-size: 1.2rem;
        font-weight: normal;
    }

    /*
    .ourTeam .i .c .wrap .info {
        padding: 15px 0;
        position: absolute;
        top: 100%;
        width: 100%;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -ms-transition: all .8s ease;
        -o-transition: all .8s ease;
        background-color: #ecb63a;
    }
    .ourTeam .i .c .wrap img {
        width: 100%;
        -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        -webkit-transition: all .8s ease;
        -moz-transition: all .8s ease;
        -ms-transition: all .8s ease;
        -o-transition: all .8s ease
    }*/
}

/********************** Media *********************/

.image-list .thumb-container {
    border: solid 1px #CCC
}

.thumb-container {
    padding: 0px;
}

.thumb-container figcaption {
    padding: 25px 15px 10px 15px;
    font-size: 1.2rem;
}

li.dropdown.mobile_dropdown {
    display: none;
    text-align: left;
}

ul.spanish-drop {
    width: 430px;
    margin-left: -247px;
    height: 160px !important;
}
@media (min-width: 1200px) {
    .container {
        width: 1250px !important;
        max-width: 1250px !important;
    }
}
/* Show dropdown on hover for desktop only */
@media (min-width: 992px) {
  .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
  }
}
/*


@media (min-width: 1200px) and (max-width:1400px) {
    .ourTeam .i .c:hover .more {
        bottom: -20%
    }
}

@media (min-width: 1200px) and (max-width:1400px) {
    .ourTeam .i .c:hover .more {
        bottom: -20%
    }
}*/

@media (max-width: 991px) {


    .navbar {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
        flex-direction: column;
        align-items: flex-start;
    }

    .navbar li {
        position: relative;
        width: 100%;
    }

    .navbar a {
        display: block;
        color: #fff;
        text-decoration: none;
        padding: 15px 20px;
        transition: background-color 0.3s;
    }

    /* Submenu styles */
    .submenu {
        /* position: absolute; */
        top: 100%;
        left: 0;
        display: none;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #32471A;
        width: 100%;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.3s, transform 0.3s;
        height: 350px;
        overflow-y: auto;
    }

    .submenu li a {
        padding: 10px 35px;
        color: #fff;
        text-decoration: none;
    }

    .submenu li a:hover {
        background-color: #273616;
    }

    li.nav-item.dropdown.hideMobile {
        display: none !important;
    }

    li.dropdown.mobile_dropdown {
        display: block !important;
    }





    .navbar-collapse {
        background-color: #273616 !important;
    }
}

@media (max-width: 991px) {
    .navbar-nav {
        padding-left: 0px !important;
        overflow: auto !important;
        width: 100vw !important;
        margin-left: 0px !important;
        background-color: #273616;
        padding-left: 0px !important;
        height: calc(100vh - 80px);
    }

    ul.navbar-nav.ms-auto li.nav-item {
        padding-left: 0px;
        width: 100%;
    }

    .navbar-nav .nav-item a.nav-link {
        /* padding-left: 10px;1299
         */
        text-align: left;
    }
}

@media (max-width: 991px) {
    .dropdown:hover .dropdown-menu {
        /* translate: 300px -40px; */
        padding-right: 0px;
        width: 100%;
        transform: scale(1) !important;
        height: 300px !important;
        overflow-y: auto !important;
        padding-top: 0px;
        padding-bottom: 0px;
        margin-bottom: 0px;
    }

    ul.dropdown-menu.dropdown-menu-projects.show,
    ul.dropdown-menu.dropdown-menu-blog.show {
        display: block !important;
    }

    ul.dropdown-menu.dropdown-menu-projects,
    ul.dropdown-menu.dropdown-menu-blog {
        display: none;
    }

    .dropdown:hover .dropdown-menu {
        display: none !important;
    }
}


@media (max-width: 991px) {
    .navbar-collapse {
        top: 80px !important;
    }

    a#blogDropdown {
        text-align: left;
    }

    .dropdown-menu li a.dropdown-item {
        padding-left: 40px;
        font-size: 14px;
    }

    .dropdown:hover .dropdown-menu-blog {
        /* translate: 510px -120px; */
        padding-right: 0px;
        padding-left: 0px;
        width: 100%;
        transform: scale(1) !important;
        margin-top: 0px;
        background-color: #32471a;
        /* height: 1290px !important; */
        height: 300px !important;
        overflow: auto !important;
        margin-left: 0px !important;
        border: none !important;
        border-radius: 0px !important;
    }
}

@media (max-width: 991px) {
    .dropdown-item {
        width: 100% !important;
        color: white !important;
        background-color: #32471a;
    }

    .dropdown-item:hover {
        color: white !important;
        background-color: #273616;
    }

    ul.dropdown-menu {
        width: 100%;
        margin-left: 0;
    }

    .column {
        float: left;
        width: 100%;
        padding: 0px;
        height: auto;
        background-color: #32471a !important;
    }

    .bmset {
        height: 130px !important;
    }

    .dropdown-menu .row {
        margin-left: 0;
        margin-right: 0;
    }

    /* .row{
        background-color: #32471a;
    } */
}




.about-img {
    background-image: url(../images/siobhan.jpg);
    background-position: center;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.about-play button img {
    height: 80px;
    width: 80px;
}


.image-container {
    position: relative;
    width: 100%;
    /* Set the width of your container */
    height: 650px;

}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: none;
    background-color: transparent !important;
    cursor: pointer;
}



/* Close button */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    color: white;
    font-size: 30px;
    border: none;
    cursor: pointer;
}

/* Iframe styling */
#videoIframe {
    max-width: 90%;
    max-height: 90%;
    border: none;
}


#lvideo-wrap {
    position: fixed;
    height: 90dvh;
    z-index: 9991;
    opacity: 0;
    visibility: hidden;
}

#lvideo-wrap,
#lvideo-wrap:after,
#lvideo-wrap .lvideo-overlay {
    left: 0;
    top: 0;
    width: 100%;
    transition: all 0.3s ease-in-out;
    box-sizing: border-box;
}

#lvideo-wrap:after,
#lvideo-wrap .lvideo-overlay {
    height: 100%;
    position: absolute;
}

#lvideo-wrap:after {
    content: "";
    display: block;
    background-color: var(--primary-color);
    opacity: 0;
    z-index: -1;
}

#lvideo-wrap .lvideo-container {
    height: 90dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lvideo-wrap video,
#lvideo-wrap iframe {
    /* border-radius: 12px; */
    position: relative;
    box-sizing: border-box;
    background-color: #000;
    z-index: 10;
    box-shadow: 0 0 19px rgba(0, 0, 0, 0.16);
    display: block;
    max-width: 1280px;
    height: auto;
    width: 90%;
    aspect-ratio: 16/9;
}

#lvideo-wrap video {
    object-fit: cover;
}

#lvideo-wrap .lvideo-close {
    background-color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 5%;
    top: 5%;
    width: 42px;
    height: 42px;
    border-radius: 100%;
    border: solid 2px var(--primary-color);
    padding: 0;
    transition: all 0.3s ease-in-out;
    z-index: 150;
}

#lvideo-wrap .lvideo-close:before,
#lvideo-wrap .lvideo-close:after {
    content: "";
    width: 60%;
    height: 3px;
    background-color: var(--primary-color);
    position: absolute;
    transition: all 0.3s ease-in-out;
}

#lvideo-wrap .lvideo-close:before {
    transform: rotate(42deg);
}

#lvideo-wrap .lvideo-close:after {
    transform: rotate(-42deg);
}

#lvideo-wrap .lvideo-close:focus {
    outline: none;
}

#lvideo-wrap .lvideo-close:hover {
    background-color: var(--primary-color);
}

#lvideo-wrap .lvideo-close:hover:before,
#lvideo-wrap .lvideo-close:hover:after {
    background-color: #fff;
}

#lvideo-wrap.active {
    opacity: 1;
    visibility: visible;
}

#lvideo-wrap.active:after {
    opacity: 0.5;
}


.play-btn-animated {
    width: 100px;
    height: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border-radius: 100px;
    transition: all 0.3s ease;
    line-height: 100px;
    position: relative;
    padding: 0;
    cursor: pointer;
    border: 0;
}

.play-btn-animated:before,
.play-btn-animated:after {
    content: "";
    border: 1px solid;
    border-color: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 1;
    animation: 1s it-zoom linear infinite;
}

.play-btn-animated:before {
    animation-delay: 0.5s;
}

.play-btn-animated:hover {
    transform: scale(1.1);
}

.play-btn-animated i {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 15px;
    border-color: transparent transparent transparent #333;
    margin: auto;
}

@keyframes it-zoom {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}



/*======= Image hover section css start here ========*/

.home-img img {width: 100%;float: left;height: auto;transition: all 0.5s ease;}
.home-img img:hover { transform: scale(1.02, 1.02);}



.home-img .img1 { width:100%; float:left; margin-right:1%; overflow: hidden;}
.home-img .img2 { width:100%; float:left; margin:0;position: relative;cursor: pointer; overflow: hidden;}
.home-img .img2 img { opacity: 1; left: 0; top: 0; transition: all 1s ease 0s; width: 100%;}
.home-img .img2 img.image-overlay { opacity: 0; position: absolute; top: 0; width: 100%; left: 0;}
.home-img .img2 img.image-overlay:hover {opacity:1;}

/* ================== COLLABORATIVE PARTNERS (final • 800×600 logos) ================== */
/* Section band: green + spacing + full-bleed white panel behind the slider */
.contentarea.las-lst-para.car-sec.home-cont{
  position: relative;
  background:#32471A;
  padding:56px 0 120px;
  /* White panel positions */
  --panel-top: 300px;     /* desktop: where white panel starts; nudge as needed */
  --panel-height: 700px;  /* desktop: panel height to give breathing room */
}

/* Remove global .container background only here */
.contentarea.las-lst-para.car-sec.home-cont > .container{
  background: transparent;
  padding: 0;
  border-radius: 0;
}

/* Full-bleed white lower panel */
.contentarea.las-lst-para.car-sec.home-cont::after{
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: var(--panel-top);
  width: 100vw;
  height: var(--panel-height);
  background:#fff;
  z-index: 0; /* panel sits behind the slider */
}

/* Keep the slider above the panel */
.testimonial,
.container-slick,
.rev_slider{ position: relative; z-index: 1; }

/* Desktop slider spacing */
.rev_slider{
  min-height: 220px;
  padding-block: 24px 64px;
}

/* Center items for both tiny-slider and slick */
.rev_slider .tns-slider,
.rev_slider .slick-track{ display:flex !important; align-items:center; }
.rev_slider .tns-item,
.rev_slider .slick-slide{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:100% !important;
}

/* Slide inner wrapper */
.rev_slider .test{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 380px;      /* room for 800×600 logos */
  padding: 12px 24px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Logo sizing (desktop) — target visual height ~320px */
.rev_slider img{
  display:block;
  margin:0 auto;
  height:auto !important;
  width:auto !important;
  transform:none !important;
  max-height: 320px !important;
}

/* Controls & dots */
.testimonial .slick-arrow,
.rev_slider .tns-controls button{ z-index:3; }
.testimonial .slick-dots{ position:static; margin-top:20px; }

/* ================== MOBILE ================== */
@media (max-width:768px){
  /* Align white panel edge with arrows and add vertical room */
  .contentarea.las-lst-para.car-sec.home-cont{
    --panel-top: 186px;          /* adjust 180–200px if needed */
    --panel-height: 820px;       /* generous space under the logos */
    padding: 48px 0 110px;
  }

  /* Slider band spacing */
  .contentarea.las-lst-para.car-sec.home-cont .rev_slider{
    padding-block: 28px 28px !important;
    min-height: 420px !important;
  }

  /* Center each slide; remove side padding to maximize size */
  .contentarea.las-lst-para.car-sec.home-cont .rev_slider .rev_slide,
  .contentarea.las-lst-para.car-sec.home-cont .rev_slider .rev_slide .test{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height: 420px !important;
    padding: 0 12px !important;
  }

  /* Logo sizing (mobile) — cap around ~300px tall (4:3 @ 390px ≈ 293px) */
  .contentarea.las-lst-para.car-sec.home-cont .rev_slider .rev_slide .test img{
    height:auto !important;
    width:auto !important;
    max-width:100% !important;   /* never exceed viewport width */
    max-height:300px !important; /* main mobile cap */
    transform:none !important;
    display:block !important;
  }
}
/* ================== /COLLABORATIVE PARTNERS ================== */

/* === Performance: lazy-render offscreen sections (PSI) === */
@supports (content-visibility: auto) {
  .growing-to-give-text-section,
  .growing-to-give-picture-section,
  .growing-to-give-program-section,
  .growing-to-give-picture1-section,
  .growing-to-give-footer,
  .ourTeam,
  .community-garden-section {
    content-visibility: auto;
    contain-intrinsic-block-size: 1000px; /* reserve space to avoid jank */
  }
}

/* === Prevent CLS for partner logos (800x600 -> 4:3) === */
.rev_slider .test img{
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

/* === Respect reduced motion to lower main-thread work === */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
  html:focus-within { scroll-behavior: auto; }
}

/* === Modal shell sizing so showing/hiding doesn't shift layout === */
.newsletter-modal .modal-content{
  inline-size: min(100%, 700px);
  margin-inline: auto;
}

/* === Stabilize hero heading block so FOIT/FOIT swaps don't shift === */
.hero-section-content-div h1{ min-height: 3.2em; }