@import url("https://fonts.cdnfonts.com/css/coco-gothic");
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  background-color: transparent;
}

section {
  width: 100%;
  /* height: auto; */
  height: 100vh;
}

.bg-erat-blue {
  background-color: #070c64;
  color: white;
  text-shadow: 0 0 2px grey;
}

.bg-erat-yellow {
  background-color: #ffc71f;
  color: white;
  text-shadow: 0 0 2px grey;
}

.color-erat-blue {
  color: #070c64;
}

.color-erat-yellow {
  color: #ffc71f;
}

@media (max-width: 600px) {
  html {
    font-size: 12px;
  }
}
/* nav {
    position: fixed;
    width: 100%;
} */

.masthead {
  position: fixed;
  width: 100%;
  height: auto;
  top: 0;
  left: 0;
  bottom: auto;
  right: 0;
  z-index: 100;
}

.masthead-brand {
  position: absolute;
  top: 0;
  left: 0;
}

#header-logo-container {
  position: fixed;
  height: 100px;
  width: auto;
  padding: 10px;
}

#header-logo {
  max-height: 80px;
}

.nav-link {
  color: navy;
  font-family: Quicksand;
  font-size: 1.5rem;
  font-weight: 700;
  text-shadow: 0 0 10px lightcyan;
  margin: 2rem;
}

.nav-link:hover,
.nav-link:focus {
  text-shadow: 0 0 10px black;
}

/*
HEADER
*/
#section-lp-header {
  /* position: relative; */
  /* width: 100%; */
  height: 100vh;
}

#section-lp-header > .image-bg {
  background: url("../../files/assets/images/pages/ngobrol.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

#section-lp-header > .container {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  /* padding: 5rem; */
}

#header_h4_together {
  font-family: "Coco Gothic", sans-serif;
  font-weight: 700;
  color: white;
  text-shadow: 0 0 10px wheat;
}

#header_h1_terus {
  font-family: "Coco Gothic", sans-serif;
  font-weight: 700;
  color: white;
  font-size: 64pt;
  text-shadow: 0 0 10px wheat;
}

#header_btn_learn {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 0.05rem solid #fff;
}

#header_btn_learn:hover,
#header_btn_learn:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: wheat;
  border: 0.05rem solid #fff;
}

/*
ABOUT
*/
#section-lp-about {
  /* position: relative; */
  /* width: 100%;
    height: 100vb; */
  background-color: #070c64;
  /* width: 100vw;
    height: 100vh; */
  color: white;
  height: auto;
}

#section-lp-about #about_h2_about {
  font-size: 4rem;
}

#section-lp-about #about_p_content {
  font-size: 1.5rem;
}

#section-lp-about #about_h2_about,
#section-lp-about #about_p_content {
  font-family: "DM Sans", serif;
}

#section-lp-about > .container {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: 5rem;
}

#section-lp-about .image-bg {
  background: url("../../files/assets/images/pages/mbah-portrait.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#about_btn_learn {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #fff;
  border: 0.05rem solid #fff;
}

#about_btn_learn:hover,
#about_btn_learn:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: wheat;
  border: 0.05rem solid #fff;
}

/*
CHALLENGE
*/
#section-lp-content-challenge {
  position: relative;
  /* width: 100%;
    height: 100vb; */
  background-color: #ffc71f;
  /* width: auto;
    height: 100%; */
  color: white;
  height: auto;
}

#section-lp-content-challenge > .container {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  margin: auto;
}

#section-lp-content-challenge .image-bg {
  width: 100%;
  height: 70vh;
  padding: 0;
  margin: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../../files/assets/images/pages/kumpul-lg.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/* #section-lp-content-challenge .image-bg img {
  width: 100vw;
  height: auto;
  padding: 0;
} */

#section-lp-content-challenge #challenge_h2_title {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  padding: 5rem;
  font-family: "DM Sans", serif;
  font-size: 4rem;
}

#section-lp-content-challenge #challenge_p_content {
  color: #070c64;
  font-family: "Coco Gothic", sans-serif;
  font-size: 1.5rem;
}

/*
GOALS - tiled
*/
#section-lp-content-tiled-goals {
  /* position: relative; */
  /* width: 100%;
    height: 100vb; */
  background-color: #070c64;
  /* width: auto;
    height: 100vh; */
  color: white;
  background: url("../../files/assets/images/pages/erat-team.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#section-lp-content-tiled-goals #goals_h2_title {
  font-family: "DM Sans", serif;
  text-align: center;
  margin-top: 5rem;
  margin-bottom: 5rem;
}

#section-lp-content-tiled-goals .card {
  padding: 3rem;
  border-radius: 1rem;
}

#section-lp-content-tiled-goals .goals-item {
  font-family: "Coco Gothic", serif;
  text-align: center;
}

#section-lp-content-tiled-goals > .container {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: 5rem;
}
/*
#section-lp-content-tiled-goals .image-bg {
    background: url("../../files/assets/images/pages/erat-team.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
} */

/*
GOALS - list
*/
#section-lp-content-list-goals {
  /* position: relative; */
  /* width: 100%;
    height: 100vb; */
  /*     background-color: #FFC71F; */
  background: linear-gradient(rgba(255, 199, 31, 0.5), rgba(255, 199, 31, 0.5)),
    url("../../files/assets/images/pages/kumpul.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* width: 100vw;
    height: 100vh; */
  color: white;
  text-shadow: 0 0 2px grey;
  height: auto;
}

#section-lp-content-list-goals #goals_list_h2_title {
  font-family: "DM Sans", serif;
  font-size: 4rem;
  color: #070c64;
  padding-top: 3rem;
}

#section-lp-content-list-goals .btn-goals {
  color: #fff;
  background-color: #070c64;
  font-family: "DM Sans", serif;
  font-size: 2rem;
  border-radius: 2rem;
}

#section-lp-content-list-goals .btn-goals:hover,
#section-lp-content-list-goals .btn-goals.active {
  background-color: #ffc71f;
}

#section-lp-content-list-goals p {
  font-family: "DM Sans", serif;
  font-size: 2rem;
}

#section-lp-content-list-goals > .container {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: 5rem;
  height: auto;
}

#section-lp-content-list-goals #list_goals_btn_group > .row {
  margin: auto;
}

#section-lp-content-list-goals > .container .row,
#section-lp-content-list-goals > .container .row > .card {
  padding: 1rem;
  height: 100%;
}

#section-lp-content-list-goals > .container .row > .card {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3rem;
}

#section-lp-content-list-goals .image-bg {
  background-color: rgba(255, 255, 255, 0);
  /* background: url("../../files/assets/images/pages/erat-team.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; */
}

#section-lp-content-list-goals #goals_list_text {
  color: #070c64;
  padding: 5rem;
  font-family: "Coco Gothic", serif;
  font-size: 1.5rem;
}

.goals_list_text_collapse {
  display: none;
}

@media (max-width: 900px) {
  #section-lp-content-list-goals > .container {
    padding: 1rem;
  }

  #goals_list_text_container {
    height: 0;
    margin: 0;
    padding: 0;
    display: none;
  }

  .goals_list_text_collapse {
    display: flex;
    color: #070c64;
    padding: 0;
    font-family: "Coco Gothic", serif;
    /* font-size: 1.5rem; */
  }
}

/*
MOVE
*/
#section-lp-content-move {
  /* position: relative; */
  /* width: 100%;
    height: 100vb; */
  background-color: #070c64;
  /* width: 100vw;
    height: 100vh; */
  color: white;
  height: auto;
}

#section-lp-content-move #move_h2_title {
  font-family: "DM Sans", serif;
  font-size: 4rem;
}

#section-lp-content-move #move_p_content {
  font-family: "Coco Gothic", serif;
  color: #ffc71f;
  font-size: 1.5rem;
}

#section-lp-content-move > .container {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: 5rem;
}

#section-lp-content-move .image-bg {
  background: url("../../files/assets/images/pages/erat-team.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*
WORK - single
*/
#section-lp-content-single-work {
  /* position: relative; */
  /* width: 100%;
    height: 100vb; */
  background-color: #070c64;
  /* width: 100vw;
    height: 100vh; */
  color: white;
  height: auto;
}

#section-lp-content-single-work #work_h2_title {
  font-size: 4rem;
}

#section-lp-content-single-work #work_h4_subtitle {
  font-size: 2.5rem;
}

#section-lp-content-single-work #work_p_content {
  font-size: 1.5rem;
  text-align: center;
}

#section-lp-content-single-work #work_h2_title,
#section-lp-content-single-work #work_h4_subtitle,
#section-lp-content-single-work #work_p_content {
  font-family: "DM Sans", serif;
}

#section-lp-content-single-work > .container-fluid {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  padding: 5rem;
  margin: auto;
  min-height: 100vh;
}

#section-lp-content-single-work > .container-fluid > .row {
  margin: auto;
}

/*
PARTNERS
*/
#section-lp-content-tiled-partners {
  background: linear-gradient(
      rgba(255, 255, 255, 0.9),
      rgba(255, 255, 255, 0.9)
    ),
    url("../../files/assets/images/pages/team-gabungan.jpg");
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: cover;
  /* background-blend-mode: darken; */
  /* position: relative; */
  width: 100%;
  height: auto;
  /* color: white; */
  text-align: center;
}

/* #section-lp-content-tiled-partners::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); 
} */

@media (max-width: 1000px) {
  #section-lp-content-tiled-partners > .row {
    padding: 0;
    margin: 0;
  }
  #section-lp-content-tiled-partners > .row img {
    max-width: 100% !important;
    /* height: auto !important; */
    padding: 1rem !important;
    margin: 1rem !important;
  }
}

@media (max-width: 800px) {
  #section-lp-content-tiled-partners > .row img {
    max-height: 10rem;
    height: auto !important;
  }
}

#section-lp-content-tiled-partners #partners_h1_title {
  font-family: "Montserrat", serif;
  font-weight: 700;
  font-size: 3.5rem;
  color: #070c64;
}

/*
CONTACT
*/
#section-lp-contact {
  /* position: relative; */
  /* width: 100%;
    height: 100vb; */
  background-color: #070c64;
  /* width: 100vw;
    height: 100vh; */
  color: white;
  padding: 5rem;
  height: auto;
}

@media (max-width: 800px) {
  #section-lp-contact {
    padding: 1rem;
  }
}

#section-lp-contact #contact_title {
  font-family: "Montserrat", serif;
  font-weight: 900;
  font-size: 4rem;
}

#section-lp-contact #contact_h2_title {
  font-family: "Montserrat", serif;
  font-weight: 400;
  font-size: 4rem;
}

#section-lp-contact #contact_h4_subtitle,
#section-lp-contact #contact_social_title,
#section-lp-contact #contact_donation {
  /* font-family: "Coco Gothic", serif; */
  font-family: "Montserrat", serif;
  font-size: 2rem;
  color: white;
}

#section-lp-contact p {
  /* font-family: "Coco Gothic", serif; */
  font-family: "Montserrat", serif;
  font-size: 1.5rem;
}

#section-lp-contact > .container {
  /* position: absolute; */
  bottom: 0;
  left: 0;
  /* padding: 5rem; */
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 2rem;
}

#section-lp-contact .image-bg {
  background: url("../../files/assets/images/pages/ilustrasi.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  min-height: 100vh !important;
}

.contact_social_icon a {
  font-size: 4rem;
  color: white;
  margin-left: 1rem;
}

.contact_social_icon a:hover {
  color: #ffc71f;
}

@media (max-width: 1000px) {
  #section-lp-contact .image-bg {
    min-height: 30rem !important;
    margin-bottom: 2rem;
  }
}

/*
WORKS
*/
#section-lp-content-tiled-works {
  color: #070c64;
  height: auto;
}

#section-lp-content-tiled-works .card {
  background: none;
  background-color: transparent;
  border: none;
}

#tiled-works-title {
  padding: 3rem;
  text-align: center;
  color: #070c64;
  font-size: 4rem;
}

#tiled-works-items {
  margin: 0;
}

.tiled-works-item {
  min-height: 100vh !important;
}

#tiled-works-items .card-text {
  line-height: 1.5em; /* Tinggi tiap baris */
  max-height: 4.5em; /* 3 baris (3 × 1.5em) */
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  position: relative;
}

#tiled-works-items .card-text::after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  /* background: white; */
  padding-left: 5px;
}

.tiled-works-item-img-container {
  height: 300px;
}

.tiled-works-item-img-container > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}

@media (max-width: 1000px) {
  .tiled-works-item {
    min-height: fit-content !important;
    margin-bottom: 2rem;
  }
}

/*
#section-lp-content-challenge .image-bg {
    background: url("../../files/assets/images/pages/erat-team.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100vw;
    height: 100%;
    position: absolute;
    top: 0;
} */

/* #section-lp-about img {
    position: absolute;
    height: 100vh;
    width: auto;
} */

/*
ERAT FOOTER
*/
#section-lp-footer {
  height: fit-content;
  align-items: center;
  text-align: center;
  padding: 2rem;
}

#section-lp-footer .footer_line {
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(7, 12, 100, 0.0),
    rgba(7, 12, 100, 0.9),
    rgba(7, 12, 100, 0.0)
  );
  margin: 1rem;
}