/* 
---------- 01 TYPOGRAPHY SYSTEM
-Font sizes (px):
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

-Font weights:
default: 400
medium: 500
semi-bold: 600
bold: 700

-Line-heights: 
default: 1
small: 1.05
medium: 1.2
paragraph defualt 1.6
large: 1.8

-Letter spacing:
-0.5px
0.75px

---------- 02 COLORS
primary color: #05735f,

tints: #B4D5CF #fff7e6

shades: #01221C, #056856

accents: #fab005, #eb4d4b

background: #fff7e6 #eee9db #f9f4e8



primary text: #3A514D #343a40 #283734 #212529

secondary text: #62716E #adb5bd #868e96

grays:
#888
#767676
#686868
#555
#333


---------- 03 SHADOWS
0 2.4rem 4.8rem rgba(0, 0, 0, 0.075)


---------- 04 BORDER RADIUS
default: 5px
medium: 3px

---------- 05 WHITE SPACE
Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 / 160 / 192 / 256 / 320 / 384 / 512 / 640 / 768 / 1024 / 1280 / 1536 / 2048  / 2560 / 3072 / 5120

 */

/* GLOBAL RESET */
:root {
  --primary-color: #006400; /* #;*/
  --secondary-color: #cce0cc;
  --accent-color: #ffa500;
  --accent-color-dark: #cc8400;
  --text-color-darker: #001400;
  --text-color-dark: #1a2c1a;
  --text-color-light: #808a80;
  --text-color-lighter: #b3b9b3;
  --background-light: #e6f0e6;
  --font-size: 1.8rem;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* background-color: rgba(127, 238, 255, 0.1); */
}

html {
  /* 9px / 16px * 100 */
  font-size: 56%;
  scroll-behavior: smooth;
}

/* DEFAULT SETTING */
body {
  font-family: 'Nunito', sans-serif;
  line-height: 1;
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--primary-color);
  overflow-x: hidden;
}

main {
  overflow-x: hidden;
}

header {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

h1 {
  width: 80%;
  font-size: 3.6rem;
  font-weight: 900;
  color: #ffffff;
  text-align: center;
  line-height: 1.2em;
  letter-spacing: 0.2em;
}

h2 {
  display: flex;
  font-size: 2.4rem;
  font-weight: 800;
  z-index: 1;
}

h3 {
  font-size: 2rem;
  font-weight: 800;
}

p {
  line-height: 3rem;
  font-size: var(--font-size);
  margin-top: 2.4rem;
  color: var(--text-color-dark);
}

ul {
  list-style: none;
  display: flex;
}

a {
  text-decoration: none;
  display: block;
  color: var(--primary-color);
}

a:hover {
  color: var(--text-color-dark);
}

span {
  color: var(--text-color-light);
  font-weight: 700;
}

section > .container,
footer .container {
  /* width: 29rem; */
  margin: 0 2.4rem;
  background-color: #ffffff;
}

img {
  width: 100%;
  height: auto;
}

section > .container > header {
  padding-top: 2.4rem;
}

.btn {
  padding: 14px;
  font-weight: 600;
  background-color: transparent;
  color: var(--primary-color);
  cursor: pointer;
  border: 2px solid var(--accent-color);
  transition: all 1s ease;
}

.btn:hover {
  background-color: var(--accent-color);
}

.btn.btn--cta {
  width: max-content;
  padding: 1.8rem 3.2rem;
  color: #ffffff;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn.btn--cta:hover {
  color: var(--text-color-dark);
}

.btn.btn--button {
  padding: 0.8rem;
  transition: all 0.3s ease;
}

.btn.btn--button:hover svg path {
  fill: var(--text-color-dark);
}

@keyframes beat {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/******************************************************** LANDING PAGE *********************************************************/
/* LANDING PAGE - HERO */
.page-header .nav {
  display: flex;
  align-items: center;
  background-color: var(--text-color-darker);
  padding: 1.2rem;
  position: fixed;
  width: 100%;
  height: 8.5rem;
  z-index: 999;
}

.page-header .nav .menu-box {
  /* width: 100%; */
  flex-grow: 1;
}

.menu-box .nav__menu {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 100vh;
  /* background-color: rgba(0, 0, 0, 0.7); */
  background-color: var(--text-color-darker);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  align-items: center;
  transform: translateX(-100%);
  transition: all 1s ease-in-out;
  /* opacity: 0; */
  pointer-events: none;
  visibility: hidden;
}

.nav__menu {
  margin-top: 8rem;
}

.nav-open .nav__menu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transform: translateX(0);
}

.menu-box .nav__menu .menu-item .menu-item__link {
  text-decoration: none;
  color: #f9f9fc;
  font-weight: 500;
}

.menu-box .nav__menu .menu-item .menu-item__link:hover {
  color: var(--accent-color);
}

.page-header .nav .nav__logo a {
  display: flex;
}

.page-header .nav .nav__logo a .logo-mark {
  width: 60px;
  height: auto;
}

.page-header .nav .nav__other {
  width: 20rem;
}

.page-header .nav .menu-box .toggler-box {
  margin-left: auto;
  display: flex;
  align-items: center;
  border: none;
  background-color: transparent;
  cursor: pointer;
  z-index: 2;
}

.toggler-box .menu__open {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.toggler-box .menu__open svg.beat {
  animation: beat 0.5s ease;
  animation-iteration-count: 3;
}

.menu__open #group-open-btn .cc {
  transition: all 0.3s ease-in-out;
}

.menu__open #group-open-btn .ss,
.menu__open #group-open-btn .ee,
.menu__open #group-open-btn .ww,
.menu__open #group-open-btn .nn {
  transition: all 0.5s ease-in-out;
}

.nav-open .menu__open #group-open-btn .cc {
  fill: transparent;
}

.nav-open .menu__open #group-open-btn .ss {
  transform: scale(0.75) translate(27px, 47px);
}

.nav-open .menu__open #group-open-btn .ee {
  transform: scale(0.75) translate(47px, 47px);
}

.nav-open .menu__open #group-open-btn .nn {
  transform: scale(0.75) translate(47px, 27px);
}

.nav-open .menu__open #group-open-btn .ww {
  transform: scale(0.75) translate(27px, 27px);
}

.header-imgs {
  position: relative;
  display: flex;
  flex-direction: row;
  height: 500px;
}

.header-imgs .thm-breadcrumb {
  display: flex;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.6rem;
  color: #ffffff;
}

.header-imgs .thm-breadcrumb .active {
  color: var(--text-color-darker);
}

.header-imgs .thm-breadcrumb li {
  margin: 0 0.8rem;
  font-size: 1.8rem;
}

.header-imgs .thm-breadcrumb li a {
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}

.header-imgs .thm-breadcrumb li a:hover {
  color: var(--text-color-darker);
}

.header-imgs .thm-breadcrumb li span {
  color: #ffffff;
}

.header-imgs .heading-secondary {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3.6rem;
  color: #ffffff;
}

.header-imgs .header-img-box {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: var(--accent-color);
}

.header-imgs .header-img-box .header-img {
  background-image: url(/img/background/header/banner.jpg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
}

/* .header-imgs .header-img-box .header-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background-color: rgb(0, 0, 0, 0.7);
} */

.hero {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  align-items: center;
  gap: 3.2rem;
  padding: 4.8rem 2.4rem;
}

.hero .hero__items picture::after {
  content: '';
  position: absolute;
  margin-top: -8rem;
  inset: 0 0 0 0;
  min-width: 100%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
}

.hero .hero__items .hero__item {
  position: absolute;
  inset: 0 0 0 0;
}

.hero__item picture source,
.hero__item picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.hero .hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.hero .hero__content h1 {
  padding: 2.4rem;
  width: 100%;
}

/* .hero .hero__controls {
  display: flex;
  gap: 3.2rem;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
} */

.hero button.left-btn,
.hero button.right-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.2;
}

.hero button.left-btn {
  left: 0;
  margin-left: 2.4rem;
}

.hero button.right-btn {
  right: 0;
  margin-right: 2.4rem;
}

/* LANDING PAGE - ABOUT SECTION */
.about-section .container {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  padding: 6.4rem 0;
}

.about-section__info .about-content p {
  margin-bottom: 2.4rem;
}

.about-section__info .about-content .btn {
  color: #006400;
  transition: color 0.3s ease;
}

.about-section__info .about-content .btn:hover {
  color: var(--text-color-dark);
}

/* .about-section__background {
  position: relative;
  top: 0;
  left: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    linear-gradient(#006400, #006400);
} */

.about-imgs {
  position: relative;
  min-height: 48rem;
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1rem var(--background-light) solid;
  z-index: 1;
}

.about-imgs img {
  position: absolute;
  border: 1rem #fff solid;
  width: 24rem;
  height: auto;
}

.about-imgs img:nth-child(5) {
  position: relative;
  width: 100%;
}

.about-imgs img:nth-child(1) {
  display: none;
  top: -2.4rem;
  left: -2.4rem;
}
.about-imgs img:nth-child(2) {
  bottom: -2.4rem;
  /* left: -2.4rem; */
}
.about-imgs img:nth-child(3) {
  top: -2.4rem;
  /* right: -2.4rem; */
}
.about-imgs img:nth-child(4) {
  display: none;
  bottom: -2.4rem;
  right: -2.4rem;
}

/* .about-section__background .about-img {
  object-fit: cover;
} */

/* .about-section__background .about-img {
  height: 37.8rem;
  background-image: url('/img/background/about/about-center-gate.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.6;
} */

/* .about-section__background h2 {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 100%;
  text-align: center;
  color: #ffffff;
  transform: translateX(-50%);
} */

/* .about-section__background p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  text-align: center;
  color: #ffffff;
} */

/* LANDING PAGE - SERVICES SECTION */
.services-section .services-box {
  margin-top: 9.2rem;
  margin-bottom: 8rem;
}

.services-section .services-box .services {
  display: flex;
  flex-direction: column;
  gap: 8rem;
}

.service {
  position: relative;
  height: 37rem;
  display: inline-flex;
}

.service > span::before {
  content: '';
  background-color: #ffffff;
  opacity: 0;
  inset: 0;
  position: absolute;
  z-index: -1;
  transition: all 0.4s ease-out;
}

.service > span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 10rem;
  display: flex;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  padding: 2.4rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease-out;
  z-index: 1;
}

.service > span svg {
  fill: var(--primary-color);
  transition: fill 0.4s ease-out;
}

.service .overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background-color: rgba(0, 40, 0, 0.5);
  transition: all 0.3s ease-out;
}

.service .overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  justify-content: center;
  inset: 0;
  padding: 0 2.4rem;
  background-color: rgba(0, 0, 0, 0.75);
  transition: all 0.3s ease-out;
}

.service:hover > span::before {
  background-color: rgba(0, 100, 0, 0.75);
  /* background-color: rgba(255, 166, 0, 0.75); */
  opacity: 1;
}

.service:hover span svg {
  fill: #ffffff;
  /* fill: var(--text-color-dark); */
}

.service > span:hover ~ .overlay::before,
.service:hover .overlay::before {
  opacity: 1;
}

.service > span:hover ~ .overlay,
.service:hover .overlay {
  background-color: transparent;
}

.service .overlay * {
  color: #ffffff;
  z-index: 1;
}

.service .overlay span {
  font-size: 2.4rem;
  font-weight: 700;
  margin-top: 2.4rem;
}

.service .overlay p {
  text-align: center;
}

.service img {
  object-fit: cover;
  object-position: center;
}

.services-section__bg-1 {
  display: none;
}

.services-section__bg-2 {
  display: none;
}

/* LANDING PAGE - ACTIVITIES SECTION */
/* .activities-section .intro ul {
  flex-direction: column;
  gap: 1rem;
  list-style: circle;
  margin-top: 2.4rem;
  color: var(--text-color-dark);
} */

.activities {
  display: flex;
  flex-direction: column;
  margin: 4.8rem 0;
}

.activities .activity {
  position: relative;
  display: flex;
  overflow: hidden;
  z-index: 1;
}

.activities .activity .overlay {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
  padding: 2.4rem;
  position: absolute;
  inset: 0;
  z-index: 1;
}

.activities .activity .overlay .tag {
  padding: 0.8rem 1.8rem;
  color: #ffffff;
}

.activities .activity .overlay .title {
  color: #ffffff;
  font-weight: 700;
  font-size: 2.4rem;
  text-align: center;
}

.activities .activity .overlay p {
  color: #ffffff;
  text-align: center;
}

.activities .activity img {
  display: inline-flex;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: luminosity;
  opacity: 0.6;
}

.activities .activity img {
  transition: transform 1s ease-out;
}

.activities .activity .overlay:hover ~ img {
  transform: scale(1.2);
}

/* LANDING PAGE - EVENTS SECTION */
.events-section .intro {
  margin-top: 4.8rem;
}
.events-section ul {
  flex-direction: column;
  color: var(--text-color-dark);
}

.events-section ul > li {
  margin-bottom: 2.4rem;
}

.events-section ul > li img {
  width: 5rem;
}

.events-section ul ul {
  margin-left: 2.4rem;
  margin-top: 3rem;
  list-style: circle;
}

.events-section ul ul > li {
  margin-bottom: 1.2rem;
}

.events .event {
  display: inline-block;
  min-height: 24rem;
  padding: 2.4rem;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.events .event .header {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: 100%;
}

.events-section__bg {
  display: none;
}

/* LANDING PAGE - VOLUNTEER SECTION */
.volunteer-section {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.volunteer-section .container {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.volunteer-section .content {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.volunteer-section .content p {
  margin-top: 0;
}

.volunteer-section .content p .btn {
  display: block;
  margin-top: 2.4rem;
}

.volunteer-section .volunteer-bg {
  position: relative;
  background-color: var(--accent-color);
}

.volunteer-section .volunteer-img {
  height: 37.8rem;
  background-image: url('/img/background/volunteer/volunteer.jpg');
  background-size: cover;
  background-position: center;
  mix-blend-mode: luminosity;
  opacity: 1;
}

.volunteer-section .volunteer-bg a {
  position: absolute;
  top: 15%;
  left: 50%;
  width: 100%;
  text-align: center;
  color: #ffffff;
  transform: translateX(-50%);
}

.volunteer-section .volunteer-bg p {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 70%;
  transform: translate(-50%, -50%);
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 2;
  text-align: center;
  color: #ffffff;
}

.volunteer-section span {
  display: block;
}

.volunteer-section .text {
  font-family: 'Storytella', 'Satisfy', 'Caveat', cursive;
  font-size: 9rem;
  font-weight: 400;
  color: var(--accent-color);
  text-align: center;
}

.volunteer-section .title {
  margin-bottom: 2.4rem;
  font-size: 2.4rem;
  color: var(--primary-color);
}

.volunteer-section .btn--cta {
  color: var(--primary-color);
}
/* LANDING PAGE - CONTACT SECTION */

/* LANDING PAGE - CONTACT SECTION */
.about-section__bg {
  display: none;
}
/******************************************************** OTHER PAGES ********************************************************/
.container.page {
  padding: 8rem 0;
}

/******************************************************** FOOTER ********************************************************/
.footer {
  background-color: var(--text-color-darker);
  color: #ffffff;
  padding-top: 6.4rem;
  padding-bottom: 2.4rem;
}

.footer p {
  display: flex;
  flex-direction: column;
  color: var(--text-color-light);
}

.footer p,
.footer ul.links {
  margin-top: 2.4rem;
}

.footer ul.links li {
  display: flex;
  gap: 4.8rem;
}

.footer ul.links li ul {
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

.footer ul {
  margin-top: 4.8rem;
}

.footer .container {
  background-color: var(--text-color-darker);
}

.footer-body__item {
  display: flex;
  flex-direction: column;
  gap: 4.8rem;
  padding-bottom: 4.8rem;
}

.footer-body .footer-body__item a {
  display: inline-block;
  color: var(--text-color-light);
  margin-top: 2.4rem;
}

.footer-body .footer-body__item a .logo-mark {
  width: 6.5rem;
}

.footer-body .footer-body__item .social-media {
  display: flex;
}

.footer-body .footer-body__item .social-media .social-icon {
  margin-right: 4.8rem;
}

.footer-body .footer-body__item .social-media img {
  width: 2.4rem;
}

.footer-body .footer-body__item .links {
  display: flex;
  flex-direction: column;
  gap: 3.2rem;
}

.footer-bottom::before {
  content: '';
  display: block;
  height: 0.1rem;
  opacity: 0.3;
  width: 100%;
  background-color: var(--text-color-light);
  margin: 2.4rem 0;
}