/* Colors */
/* Primary Color is (May Green) and secondary green is (Green) */
/* Font Family */
:root {
  --fs-lg: 2.6rem;
  --fs-md: 2rem;
  --fs-normal: 1.6rem;
  --fs-small: 1.4rem;
  --section-margin: 5rem;
  --ff-heading: Noto Serif TC, serif;
  --ff-body: Noto Sans TC, sans-serif;
  --ff-poppins: Poppins, sans-serif; }

html {
  font-size: 62.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

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

body {
  min-height: 100vh;
  font-size: var(--fs-normal);
  font-family: var(--ff-body);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 2px;
  padding-top: 83px; }

/* Remove letter-spacing for English */
html[lang="en"] body {
  letter-spacing: 0 !important; }

html[lang="en"] {
  --ff-heading: "Open Sans", serif;
  --ff-body: "Open Sans", serif;
  --ff-poppins: "Open Sans", serif; }

img, picture, svg, video {
  display: block;
  max-width: 100%; }

sup {
  vertical-align: super;
  font-size: 9px; }

@media (min-width: 992px) {
  :root {
    --fs-lg: 3.6rem;
    --fs-md: 2rem;
    --fs-normal: 1.6rem;
    --section-margin: 10rem; } }

.go-to-top-btn {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: white;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  opacity: 0.5;
  transition: opacity 0.3s; }

.go-to-top-btn:hover {
  opacity: 1; }

header {
  border-bottom: 1px solid #CBC9C7;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: white; }

.header__banner {
  background-image: linear-gradient(to right, #67C550, #4FAA38);
  height: 1rem;
  width: 100%; }

.nav {
  background-color: #FFFFFF;
  font-family: var(--ff-body);
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 90%;
  max-width: 120rem;
  height: 7.2rem;
  margin: 0 auto; }
  .nav__logo {
    height: 70%; }
    .nav__logo img {
      height: 100%; }
  .nav__list,
  .nav .mobile_nav__list {
    display: none; }
  .nav .mobile_nav__list.show {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100dvh;
    left: 0;
    background: white;
    position: fixed;
    padding: 0;
    margin: 0;
    bottom: 0;
    top: 0;
    align-items: center;
    padding: 1.6rem;
    z-index: 10000;
    /* Base styling for the dropdown list */
    /* Styling for each list item within the dropdown */
    /* Styling for the links within the dropdown */
    /* Hover effect for better interaction feedback */
    /* Last child to remove the bottom border */ }
    .nav .mobile_nav__list.show .list__close {
      align-self: flex-end; }
    .nav .mobile_nav__list.show .list__close:after {
      font-size: var(--fs-lg);
      display: inline-block;
      content: "\00d7";
      /* This will render the 'X' */ }
    .nav .mobile_nav__list.show .list__itemsContainer {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.6rem;
      width: 100%;
      overflow-y: auto;
      /* Allows vertical scrolling when content exceeds max-height */
      -webkit-overflow-scrolling: touch;
      /* For smooth scrolling on iOS */
      scrollbar-width: none;
      /* Firefox */
      -ms-overflow-style: none;
      /* Internet Explorer 10+ */ }
    .nav .mobile_nav__list.show .list__itemsContainer::-webkit-scrollbar {
      width: 0;
      /* Hide scrollbar for Chrome, Safari, and Opera */
      background: transparent;
      /* Optional: for older versions compatibility */ }
    .nav .mobile_nav__list.show .list__dropdown {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%; }
    .nav .mobile_nav__list.show .list__dropdown .list__item:after {
      position: absolute;
      content: "";
      margin: 0 0.5em;
      display: inline-block;
      border: 7px solid transparent;
      border-top: 8px solid gray;
      border-bottom: 0 none;
      right: 0; }
    .nav .mobile_nav__list.show .list__dropdown.active .list__item:after {
      transform: rotate(180deg); }
    .nav .mobile_nav__list.show .list__dropdown .list__item {
      width: 100%;
      max-width: 250px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative; }
    .nav .mobile_nav__list.show .list__dropdownItems {
      max-height: 0;
      opacity: 0;
      padding: 0;
      background-color: #f8f8f8;
      /* Light grey background for contrast */
      border: 1px solid #e0e0e0;
      /* Subtle border for definition */
      border-radius: 8px;
      /* Slightly rounded corners for a modern look */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      /* Soft shadow for depth */
      width: 100%;
      /* Full width on mobile for better touch interaction */
      transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease-out; }
    .nav .mobile_nav__list.show .list__dropdown.active .list__dropdownItems {
      max-height: 1000px;
      opacity: 1;
      padding: 10px 0;
      /* Padding for spacing */ }
    .nav .mobile_nav__list.show .list__dropdown.active .list__dropdownItems li {
      display: list-item;
      /* Reset height when active */ }
    .nav .mobile_nav__list.show .list__dropdownItems li {
      display: none;
      list-style: none;
      margin: 0;
      border-bottom: 1px solid #e0e0e0;
      /* Light separator between items */ }
    .nav .mobile_nav__list.show .list__dropdownItems li a {
      display: block;
      padding: 15px 20px;
      /* Increased padding for touch screens */
      color: #333333;
      /* Dark text for readability */
      text-decoration: none;
      font-family: 'Noto Sans TC', sans-serif;
      font-size: 16px;
      /* Slightly larger text for mobile */
      transition: background-color 0.3s ease, color 0.3s ease; }
    .nav .mobile_nav__list.show .list__dropdownItems li a:hover {
      background-color: #e0e0e0;
      /* Light grey on hover for touch feedback */
      color: #1b8036;
      /* Green text to match your theme */ }
    .nav .mobile_nav__list.show .list__dropdownItems li:last-child {
      border-bottom: none; }
    .nav .mobile_nav__list.show .list__item {
      font-size: var(--fs-lg);
      color: #545454;
      text-decoration: none; }
      .nav .mobile_nav__list.show .list__item:hover, .nav .mobile_nav__list.show .list__item:focus, .nav .mobile_nav__list.show .list__item:link, .nav .mobile_nav__list.show .list__item:active, .nav .mobile_nav__list.show .list__item:visited {
        text-decoration: none;
        color: inherit; }
      .nav .mobile_nav__list.show .list__item:hover {
        color: black; }
    .nav .mobile_nav__list.show .list__lang a {
      text-decoration: none; }
      .nav .mobile_nav__list.show .list__lang a:hover, .nav .mobile_nav__list.show .list__lang a:focus, .nav .mobile_nav__list.show .list__lang a:link, .nav .mobile_nav__list.show .list__lang a:active, .nav .mobile_nav__list.show .list__lang a:visited {
        text-decoration: none;
        color: inherit; }
  .nav .nav__rightContainer {
    display: flex;
    align-items: center;
    height: 100%; }
    .nav .nav__rightContainer .nav__btn {
      color: #FFFFFF;
      padding: 1.5rem 2.5rem;
      background-image: linear-gradient(to right, #67C550, #4FAA38);
      border-radius: 20px;
      border: 1px solid white; }
    .nav .nav__rightContainer .nav__btn:hover {
      color: #4FAA38;
      background: white;
      border: 1px solid #4FAA38; }
    .nav .nav__rightContainer .nav__btn,
    .nav .nav__rightContainer .nav__btna:hover,
    .nav .nav__rightContainer .nav__btna:focus {
      text-decoration: none; }
    .nav .nav__rightContainer .header__lang {
      display: none; }
    .nav .nav__rightContainer .nav__mobileHamburger {
      margin-left: 2rem;
      background-color: #FFFFFF;
      border: none; }

@media (min-width: 992px) {
  .nav__list {
    display: flex;
    list-style-type: none;
    gap: 2rem;
    cursor: pointer;
    color: #545454;
    height: 100%;
    align-items: center; }
  .nav .list__dropdown {
    display: flex;
    align-items: center;
    height: 100%;
    position: relative; }
    .nav .list__dropdown .list__dropdownItems {
      background: #F9F9F9;
      border: 1px solid #e0e0e0;
      /* Light border for definition */
      border-radius: 0 0 6px 6px;
      /* Subtle rounded corners */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Elevation effect */
      max-height: 0;
      /* Start collapsed */
      opacity: 0;
      /* Invisible initially */
      overflow: hidden;
      /* Prevent content overflow */
      position: absolute;
      left: 0;
      top: 100%;
      /* Position below the parent item */
      width: auto;
      /* Adjust width as needed */
      z-index: 10;
      /* Ensure it appears above other elements */
      padding: 0;
      /* No padding initially */
      transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.3s ease-out;
      min-width: 200px; }
  .nav .list__dropdown:hover .list__dropdownItems {
    max-height: 500px;
    /* Expand */
    opacity: 1;
    /* Fade in */
    padding: 8px 16px;
    /* Add padding during expansion */ }
  .nav .list__dropdown .list__dropdownItems li {
    list-style: none;
    /* Remove bullet points */
    margin: 0;
    /* Reset margin */ }
  .nav .list__dropdown .list__dropdownItems li a {
    display: block;
    padding: 12px 16px;
    /* Inner spacing for links */
    color: #333333;
    /* Neutral text color */
    text-decoration: none;
    /* No underline */
    font-family: 'Noto Sans TC', sans-serif;
    /* Match font from your design */
    font-size: 14px;
    /* Adjust size for readability */
    transition: background-color 0.3s ease, color 0.3s ease;
    /* Smooth hover effects */ }
  .nav .list__dropdown .list__dropdownItems li a:hover {
    background-color: #f1f5f3;
    /* Subtle green-tinted hover */
    color: #1b8036;
    /* Match the green tone from the header */ }
  .nav .list__item {
    display: flex;
    text-decoration: none;
    height: 80%;
    align-items: center;
    position: relative;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center; }
    .nav .list__item:hover {
      color: black; }
      .nav .list__item:hover:before {
        position: absolute;
        content: '';
        width: 100%;
        height: 4px;
        background-color: #4FAA38;
        border-radius: 10px;
        bottom: 0;
        left: 0; }
    .nav .list__item:link, .nav .list__item:active, .nav .list__item:visited {
      color: inherit; }
  .nav__mobileHamburger {
    display: none; }
  .header__lang {
    flex-direction: column;
    align-items: center;
    line-height: normal;
    margin-left: 2rem;
    position: relative;
    display: inline-block !important;
    cursor: pointer;
    height: 100%; }
    .header__lang .lang_currentWrapper {
      display: flex;
      height: 100%;
      align-items: center;
      gap: .5rem; }
      .header__lang .lang_currentWrapper .lang__image {
        margin-right: .5rem;
        max-width: 2rem;
        object-fit: contain;
        filter: brightness(0) saturate(100%) invert(31%) sepia(8%) saturate(9%) hue-rotate(330deg) brightness(92%) contrast(81%); }
      .header__lang .lang_currentWrapper .lang__currentLang {
        color: #545454; }
    .header__lang .lang__dropdown {
      display: none;
      position: absolute;
      background-color: #f1f1f1;
      min-width: 160px;
      box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
      right: 0;
      transition: display 1s ease-in-out;
      z-index: 2; }
      .header__lang .lang__dropdown .item {
        padding: 1rem;
        display: flex;
        border-bottom: 1px solid rgba(51, 51, 51, 0.5);
        padding-right: 2.5rem;
        cursor: pointer;
        text-decoration: none !important;
        color: #545454; }
        .header__lang .lang__dropdown .item:last-child {
          border-bottom: none; }
        .header__lang .lang__dropdown .item.current {
          background-color: #5A9F4D;
          color: #FFFFFF; }
          .header__lang .lang__dropdown .item.current::before {
            content: '\2713';
            margin-right: 1rem; }
        .header__lang .lang__dropdown .item:hover a {
          color: #4FAA38; }
        .header__lang .lang__dropdown .item:hover.current a {
          color: #FFFFFF; }
    .header__lang:hover .lang__dropdown {
      display: block;
      background-color: white;
      border-radius: 0 0 1rem 1rem; } }

footer {
  background-color: #F9F9F9;
  font-size: 1.3rem;
  display: flex;
  flex-direction: column;
  border-top: 1px solid #CBC9C7; }
  footer .footer__container {
    width: 90%;
    max-width: 120rem;
    display: flex;
    flex-direction: column-reverse;
    margin: 5rem auto; }
    footer .footer__container .footerNav__container {
      padding-bottom: 5rem;
      border-bottom: 1px solid #CBC9C7; }
      footer .footer__container .footerNav__container .menuTitle {
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 1rem 0; }
        footer .footer__container .footerNav__container .menuTitle .dropdown {
          margin: 0 0.5em;
          display: inline-block;
          border: 7px solid transparent;
          border-top: 8px solid gray;
          border-bottom: 0 none; }
      footer .footer__container .footerNav__container .menuItems {
        cursor: pointer;
        font-weight: 400;
        color: #464646;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out; }
        footer .footer__container .footerNav__container .menuItems a {
          text-decoration: none !important;
          color: #464646; }
          footer .footer__container .footerNav__container .menuItems a:focus {
            color: #464646; }
    footer .footer__container .footerContact__container {
      padding: 5rem 3rem 0 3rem;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1rem; }
      footer .footer__container .footerContact__container img {
        width: 100px;
        object-fit: contain; }
      footer .footer__container .footerContact__container .slogan {
        color: #212121;
        align-self: flex-end; }
      footer .footer__container .footerContact__container .title {
        grid-row: 2 / 3;
        grid-column: 1 / 2;
        color: #212121;
        margin-top: 1.6rem;
        font-weight: 700; }
      footer .footer__container .footerContact__container .socials {
        margin-top: 1.6rem;
        grid-row: 2 / 3;
        grid-column: 2 / 3;
        display: flex;
        gap: 1rem;
        align-items: center;
        justify-content: flex-start; }
      footer .footer__container .footerContact__container .contact__phone,
      footer .footer__container .footerContact__container .contact__email,
      footer .footer__container .footerContact__container .contact__location,
      footer .footer__container .footerContact__container .contact__location2 {
        grid-column: 1 / 3;
        display: grid;
        grid-template-columns: 35px 1fr;
        align-items: center;
        color: #212121; }
        footer .footer__container .footerContact__container .contact__phone a:link, footer .footer__container .footerContact__container .contact__phone a:visited, footer .footer__container .footerContact__container .contact__phone a:hover, footer .footer__container .footerContact__container .contact__phone a:active,
        footer .footer__container .footerContact__container .contact__email a:link,
        footer .footer__container .footerContact__container .contact__email a:visited,
        footer .footer__container .footerContact__container .contact__email a:hover,
        footer .footer__container .footerContact__container .contact__email a:active,
        footer .footer__container .footerContact__container .contact__location a:link,
        footer .footer__container .footerContact__container .contact__location a:visited,
        footer .footer__container .footerContact__container .contact__location a:hover,
        footer .footer__container .footerContact__container .contact__location a:active,
        footer .footer__container .footerContact__container .contact__location2 a:link,
        footer .footer__container .footerContact__container .contact__location2 a:visited,
        footer .footer__container .footerContact__container .contact__location2 a:hover,
        footer .footer__container .footerContact__container .contact__location2 a:active {
          color: #4FAA38; }
        footer .footer__container .footerContact__container .contact__phone b,
        footer .footer__container .footerContact__container .contact__email b,
        footer .footer__container .footerContact__container .contact__location b,
        footer .footer__container .footerContact__container .contact__location2 b {
          font-weight: 700; }
      footer .footer__container .footerContact__container .contact__location,
      footer .footer__container .footerContact__container .contact__phone {
        align-items: flex-start; }
  footer .copyrights {
    padding: 1rem;
    width: 100%;
    font-size: 12px;
    background-color: #4FAA38;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    letter-spacing: 1px;
    text-align: center; }
    footer .copyrights a {
      color: #FFFFFF;
      text-decoration: none;
      cursor: pointer; }
      footer .copyrights a:hover {
        text-decoration: underline; }
    footer .copyrights .long {
      display: none; }
    footer .copyrights .short {
      display: block; }

@media (min-width: 992px) {
  footer .footer__container {
    display: grid;
    grid-template-columns: minmax(60%, 500px) 1fr; }
    footer .footer__container .footerContact__container {
      grid-template-columns: auto 1fr;
      gap: 1rem;
      column-gap: 5rem;
      min-width: 500px;
      padding-top: 0; }
      footer .footer__container .footerContact__container .logo {
        grid-column: 1 / 2;
        grid-row: 1 / 2; }
      footer .footer__container .footerContact__container .slogan {
        grid-column: 1 / 2;
        grid-row: 2 / 3; }
      footer .footer__container .footerContact__container .socials {
        grid-column: 1 / 2;
        grid-row: 3 / 4; }
      footer .footer__container .footerContact__container .title {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
        align-self: flex-end; }
      footer .footer__container .footerContact__container .contact__email {
        grid-column: 2 / 3;
        grid-row: 2 / 3; }
      footer .footer__container .footerContact__container .contact__phone {
        grid-column: 2 / 3;
        grid-row: 3 / 4; }
      footer .footer__container .footerContact__container .contact__location {
        grid-column: 2 / 3;
        grid-row: 4 / 5; }
      footer .footer__container .footerContact__container .contact__location2 {
        grid-column: 2 / 3;
        grid-row: 5 / 6; }
    footer .footer__container .footerNav__container {
      border-left: 1px solid #CBC9C7;
      border-bottom: none;
      display: flex;
      width: 100%;
      justify-content: space-around; }
      footer .footer__container .footerNav__container .dropdown {
        display: none !important; }
      footer .footer__container .footerNav__container .menuItems {
        max-height: fit-content; }
      footer .footer__container .footerNav__container .menu3 .menuItems {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100px;
        align-items: center;
        justify-content: space-between; }
  footer .copyrights .short {
    display: none !important; }
  footer .copyrights .long {
    display: block !important; } }

.hero {
  background-image: url("../img/news-hero-bg.webp");
  background-repeat: no-repeat;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-position: 37% 32%; }
  .hero__content {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 120rem;
    margin-left: auto;
    margin-right: auto; }
    .hero__content .subheader {
      width: 100%;
      font-family: var(--ff-poppins);
      color: #4FAA38;
      text-decoration: underline;
      font-size: var(--fs-md);
      text-underline-offset: 3px; }
    .hero__content h2 {
      font-family: var(--ff-heading);
      font-size: var(--fs-lg);
      color: #000000;
      margin-bottom: 3rem;
      text-underline-offset: 3px;
      color: #FFFFFF; }

.breadcrumb {
  display: flex;
  flex-direction: row;
  width: 90%;
  max-width: 120rem;
  margin: 1rem auto;
  color: #6F6F6F;
  font-size: 1.2rem;
  align-items: center;
  text-align: center;
  gap: 1rem;
  display: flex;
  width: 90%;
  max-width: 120rem;
  margin: 3rem auto;
  gap: 2rem; }
  .breadcrumb a {
    text-decoration: none;
    font-family: var(--ff-body);
    text-decoration: none; }
    .breadcrumb a:hover, .breadcrumb a:focus, .breadcrumb a:link, .breadcrumb a:active, .breadcrumb a:visited {
      text-decoration: none;
      color: inherit; }
    .breadcrumb a:hover, .breadcrumb a.active {
      font-weight: 700; }
  .breadcrumb a, .breadcrumb span {
    text-wrap: nowrap; }
  .breadcrumb span {
    text-overflow: ellipsis;
    overflow: hidden; }
  @media (min-width: 992px) {
    .breadcrumb {
      margin: 3rem auto; } }
.marketsList {
  display: flex;
  flex-direction: column;
  width: 90%;
  max-width: 120rem;
  margin: 0 auto var(--section-margin) auto; }
  .marketsList .subheader {
    width: 100%;
    font-family: var(--ff-poppins);
    color: #4FAA38;
    text-decoration: underline;
    font-size: var(--fs-md);
    text-underline-offset: 3px; }
  .marketsList .header__wrapper {
    display: flex;
    justify-content: space-between; }
    .marketsList .header__wrapper h2 {
      font-family: var(--ff-heading);
      font-size: var(--fs-lg);
      color: #000000;
      margin-bottom: 3rem;
      text-underline-offset: 3px; }
    .marketsList .header__wrapper .text__underline {
      font-family: var(--ff-heading);
      font-size: var(--fs-md);
      font-weight: bold;
      text-decoration: underline;
      text-underline-offset: 5px;
      color: #000000; }
  .marketsList .marketsList__wrapper {
    margin-top: 5rem;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-evenly;
    column-gap: 1rem; }
    .marketsList .marketsList__wrapper .card {
      width: 100%;
      max-width: 400px;
      padding-bottom: 5rem;
      text-decoration: none;
      cursor: pointer; }
      .marketsList .marketsList__wrapper .card .card__image {
        border-radius: 1rem;
        overflow: hidden; }
        .marketsList .marketsList__wrapper .card .card__image img {
          width: 100%;
          object-fit: cover;
          height: 100%;
          border-radius: 1rem;
          transition: all .5s ease-in; }
      .marketsList .marketsList__wrapper .card .card__title {
        font-size: var(--fs-md);
        font-weight: bold;
        margin-top: 2rem; }
        .marketsList .marketsList__wrapper .card .card__title:hover {
          color: #5A9F4D; }
      .marketsList .marketsList__wrapper .card .card__description {
        margin-top: 1rem;
        font-family: var(--ff-body);
        font-weight: 400;
        font-size: var(--fs-normal);
        line-height: 180%;
        color: #000000;
        opacity: 0.6; }
      .marketsList .marketsList__wrapper .card:link, .marketsList .marketsList__wrapper .card:visited, .marketsList .marketsList__wrapper .card:hover, .marketsList .marketsList__wrapper .card:active {
        text-decoration: none;
        color: inherit; }
      .marketsList .marketsList__wrapper .card:hover {
        border-radius: 1rem; }
        .marketsList .marketsList__wrapper .card:hover .card__title {
          color: #5A9F4D; }
        .marketsList .marketsList__wrapper .card:hover img {
          transform: scale(1.3); }

@media (min-width: 576px) {
  .marketsList .marketsList__wrapper .card {
    width: 45%; } }

@media (min-width: 992px) {
  .marketsList .marketsList__wrapper .card {
    width: 30%; } }

.show {
  display: grid;
  opacity: 1; }

.hide {
  display: none;
  opacity: 0; }