/*? ABOUT GREEN ECONOMY*/
#chevronIcon {
  transition: transform 0.15s ease-in-out;
}

.nav-link {
  color: white;
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}

.nav-link.active {
  font-weight: bold;
  color: #f4e3c1 !important;
}
/* Remove Bootstrap's default caret (arrow) */
.dropdown-toggle::after {
  display: none !important;
}

.custom-divider {
  width: 80%; /* Controls the length of the divider */
  height: 1px;
  background-color: #4c7756;
  margin: 4px auto; /* Centers the divider */
}

.about-green-economy-dropdown {
  border: 1px solid var(--unnamed-color-005f3c);
  border-radius: 10px;
  background: var(--unnamed-color-e6f2e6) 0% 0% no-repeat padding-box;
}

#aboutDropdown {
  transition: color 0.3s ease-in-out;
}
.dropdown-text {
  font: var(--unnamed-font-style-normal) normal var(--unnamed-font-weight-bold)
    var(--unnamed-font-size-16) / 19px var(--unnamed-font-family-helvetica-neue);
  color: var(--unnamed-color-005f3c);
}
.about-green-economy-dropdown .dropdown-item:hover {
  background: var(--unnamed-color-e6f2e6) 0% 0% no-repeat padding-box;
  color: var(--unnamed-color-005f3c) !important;
}

/*? END ABOUT GREEN ECONOMY*/

/*? LEARNING CENTER*/
.learning-center-dropdown-width {
  width: 70px;
}

.learning-center-dropdown {
  border: 1px solid var(--unnamed-color-005f3c);
  border-radius: 10px;
  background: var(--unnamed-color-e6f2e6) 0% 0% no-repeat padding-box;
}

#learnDropDown {
  transition: color 0.3s ease-in-out;
}
/*? END LEARNING CENTER*/

/*? COLLABORATIONS*/
.collaborations-dropdown-width {
  width: 250px;
}

.collaborations-dropdown {
  border: 1px solid var(--unnamed-color-005f3c);
  border-radius: 10px;
  background: var(--unnamed-color-e6f2e6) 0% 0% no-repeat padding-box;
}

#collaborationsDropDown {
  transition: color 0.3s ease-in-out;
}
/*? END COLLABORATIONS*/
/*? WHATS NEW*/
.whats-new-dropdown-width {
  width: 50px;
}

.whats-new-dropdown {
  border: 1px solid var(--unnamed-color-005f3c);
  border-radius: 10px;
  background: var(--unnamed-color-e6f2e6) 0% 0% no-repeat padding-box;
}

#whatsnewDropDown {
  transition: color 0.3s ease-in-out;
}
/*? END WHATS NEW*/
/*? COMMUNITY*/
.whats-new-dropdown-width {
  width: 10px;
} 

.whats-new-dropdown {
  border: 1px solid var(--unnamed-color-005f3c);
  border-radius: 10px;
  background: var(--unnamed-color-e6f2e6) 0% 0% no-repeat padding-box;
}

#community-dropdown {
  transition: color 0.3s ease-in-out;
}
/*? END COMMUNITY*/
.home-body {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-home.png");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}

.ge-body {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-green-economy.png");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}
.lc-body {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-resources.png");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}
.collab-header {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-collaborations.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}
.events-header {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/events-headr.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
} 
.news-header {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/news-header.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
} 
.so-policy {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-policy-and-alliances.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}

.so-lgu {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-green-lgu.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}

.so-gbiz {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/green-businesses.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}



.so-genergy {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-green-energy.jpg");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}

.about-gepp-body {
  font-family: var(--unnamed-font-family-helvetica-neue);
  font-size: var(--unnamed-font-size-16);
  font-weight: var(--unnamed-font-weight-normal);
  line-height: var(--unnamed-line-spacing-26);
  font-style: var(--unnamed-font-style-normal);
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/banner-about-program.png");
  background-size: cover;
  background-position: center;
  /* background-attachment: fixed; */
}

.navbar {
  transition: background-color 0.3s ease-in-out;
}

.scrolled {
  background-color: rgba(var(--unnamed-color-scroll-005f3c), 0.9);
}

/*? WIDTH :: HEADER TITLE*/
.w-header-title {
  width: 217px;
  font-weight: bold;
}

/*? TEXT SIZE :: HEADER TITLE*/

.text-header-title {
  font: var(--unnamed-font-style-normal) 500 var(--unnamed-font-weight-bold)
    var(--unnamed-font-family-helvetica-neue);
  font-size: 16px;
  font-weight: 500;
}

/*? TEXT SIZE :: HEADER DEFAULT */
.text-size-16 {
  font-size: 16px;
}
header {
  height: 105px;
}
.custom-container {
  max-width: 95%; /* Default max width */
  margin: 0 auto; /* Centering */
  padding: 25px 0 25px 0;
  /* background: rgba(255, 255, 255, 0.8);
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); */
}

/*? TABLETS */
@media (min-width: 576px) {
  .custom-text {
    font-size: 18px;
  }
  .custom-container {
    max-width: 90%;
    padding: 25px 0 25px 0;
  }
  .w-header-title {
    width: 400px;
  }
  .text-header-title {
    font-size: 16px;
  }
  .text-size-16 {
    font-size: 16px;
  }
  header {
    height: 85px;
  }
}

@media (min-width: 768px) {
  .custom-text {
    font-size: 24px;
  }
  .custom-container {
    max-width: 90%;
    padding: 25px 0 25px 0;
  }
  .w-header-title {
    width: 400px;
  }
  .text-header-title {
    font-size: 16px;
  }
  .text-size-16 {
    font-size: 16px;
  }
  header {
    height: 85px;
  }
}

@media (max-width: 1199px) {
  div#mobileMenu {
      width: 100%;
      position: absolute;
      background-color: #ffffff;
      margin: 0 auto;
      padding: 0px;
      top: 0;
      left: 0;
      height: auto;
      text-align: center;

  }
  div#mobileMenu a {
      color: #000000 !important;
      margin: 10px auto;
  }
  div#mobileMenu  {
      width: 100%;
  }
  i#hamburgerIcon {
    z-index: 9999999;
    /* color: black !important; */
  }
  .custom-container {
    max-width: 100%
  }
}

/*? LAPTOPS/PC */
@media (min-width: 992px) {
  .custom-text {
    font-size: 32px;
  }
  .custom-container {
    max-width: 90%;
    padding: 25px 0 25px 0;
  }
  .text-size-16 {
    font-size: 12px;
  }
  .text-header-title {
    font-size: 16px;
  }
  .w-header-title {
    width: 230px;
  }
  header {
    height: 100px;
  }
}

@media (min-width: 1200px) {
  .custom-text {
    font-size: 40px;
  }
  .custom-container {
    max-width: 90%;
    padding: 25px 0 25px 0;
  }

  .text-size-16 {
    font-size: 13px;
  }
  .text-header-title {
    font-size: 16px;
  }
  .w-header-title {
    width: 230px;
  }
  header {
    height: 100px;
  }
}

/*? XL SCREENS */
@media (min-width: 1400px) {
  .custom-text {
    padding: 25px 0 25px 0;
  }
  .custom-container {
    max-width: 90%;
    padding: 25px 0 25px 0;
  }
  .text-size-16 {
    font-size: 15px;
  }
  .text-header-title {
    font-size: 20px;
  }
  .w-header-title {
    width: 276px;
  }
  header {
    height: 100px;
  }
}

@media (min-width: 1600px) {
  .custom-text {
    font-size: 48px;
  }
  .custom-container {
    max-width: 90%;
    padding: 25px 0 25px 0;
  }
  .text-size-16 {
    font-size: 16px;
  }
  .text-header-title {
    font-size: 20px;
  }
  .w-header-title {
    width: 276px;
  }
  header {
    height: 100px;
  }
}

@media (min-width: 1920px) {
  .custom-container {
    max-width: 1800px; /* fixed max-width */
  }
  header {
    height: 100px;
  }
}