@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Playfair+Display&display=swap');

section#term {
  line-height: 1.6;
  margin: 0;
  padding: 0;
  padding-top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  
}
#term {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0px 120px 0px 120px;
}
#term .container:first-child{
  display: flex;
  width: 100%;
  justify-content: center;
}
#term .container:first-child .row:first-child{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 0;
}
#term .container:first-child .gambar {
  display: flex;
  justify-content: center;
  width: 100%; /* Lebar penuh */
  height: 567px; /* Tinggi tetap 567px */
  

}

#term .container:first-child .gambar img {

  width: 1200px; /* Lebar otomatis */
  height: 567px; /* Mengisi tinggi penuh dari kontainer */
  object-fit: cover; /* Memastikan gambar mengisi area tanpa distorsi */
  display: block;
}

#term .container:nth-child(2) {
  width: 85%;
  display: flex;
  justify-content: space-between;
}
#term .container:nth-child(2) .row:first-child {
  width: 90%;
}
#term .container:nth-child(2) .row:nth-child(2) {
  padding-top: 90px;
  width: 35%;
}
#term .container:nth-child(2) .row:first-child .content {
  margin-top: 15px;
  padding-right: 20px;
}
#term .container:nth-child(2) .row:first-child h1 {
  font-size: 3em;
  margin-top: 0;
  font-family: "72 Black";
  height: fit-content;
}
#term .container:nth-child(2) .row:first-child h2 {
  font-size: 2em;
  font-family: "72 Black";
  height: 70px;
  margin-top: 30px;
}
#term .container:nth-child(2) .row:first-child p {
  font-size: 20px;
  font-family: 'Merriweather', serif;
  margin-top: 25px;
}
#term .container:nth-child(2) .row:first-child ol {
  padding-left: 30px;
}

#term .container:nth-child(2) .row:first-child ol li {
  margin-bottom: 10px;
  font-size: 20px;
  font-family: 'Merriweather', serif;
}
#term .container:nth-child(2) .row:first-child ul {
  padding-left: 30px;
}

#term .container:nth-child(2) .row:first-child ul li {
  margin-bottom: 10px;
  font-size: 20px;
  font-family: 'Merriweather', serif;
}

#term .container:nth-child(2) .row:nth-child(2) .sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

#term .container:nth-child(2) .row:nth-child(2) .current-issue h3 {
  margin-top: 0;
  border-bottom: 2px solid #ff0000;
  color: #ff0000;
  font-family: "Latto";
  margin-bottom: 20px;
}

#term .container:nth-child(2) .row:nth-child(2) .current-issue img {
  width: 100%;
  height: auto;
}

#term a {
  text-decoration: underline;
  text-decoration-color: black; /* Set underline color to black */
  text-decoration-style: solid; /* Solid underline */
  text-decoration-thickness: 1px; /* Underline thickness */
  color: inherit; /* Inherit color from parent element */
}

#term a:hover {
  text-decoration: underline;
}
#term .container:nth-child(3) {
  width: 81%;
  display: flex;
  justify-content: space-between;
}

#term .container:nth-child(3) .row:first-child h1 {
  font-size: 2em;
  margin-bottom: 50px;
  font-family: "72 Black";
}

#term .container:nth-child(3) .row:first-child .faq-item {
  margin-bottom: 20px;
}

#term .container:nth-child(3) .row:first-child .faq-question {
  font-family: "72 Black";
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  outline: none;
  font-size: 1.8em;
  font-weight: 500;
  cursor: pointer;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  position: relative;
}

#term .container:nth-child(3) .row:first-child .faq-question::before {
  content: "\25B6"; /* Panah kanan */
  font-size: 0.6em;
  transition: transform 0.3s ease;
  margin-right: 50px;
  position: absolute;
  left: -10px;
  z-index: 1;
}

#term
  .container:nth-child(3)
  .row:first-child
  .faq-question.active::before {
  transform: rotate(90deg); /* Panah ke bawah */
}

#term .container:nth-child(3) .row:first-child .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
  padding: 0 10px;
}

#term .container:nth-child(3) .row:first-child .faq-answer.open {
  max-height: 500px; /* Bisa disesuaikan, ini cukup untuk beberapa paragraf */
}

#term .container:nth-child(3) .row:first-child .faq-answer ul li {
  margin: 0;
  font-size: 20px;
  font-family: 'Merriweather', serif;
  margin-bottom: 8px;
}

#term .container:nth-child(3) .row:first-child a {
  text-decoration: underline;
  text-decoration-color: black;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  color: inherit;
}

#term .container:nth-child(3) .row:first-child a:hover {
  text-decoration: underline;
}
@media (max-width: 768px) {
  #term {
    margin: 0 0px;
    flex-direction: column;
  }

  #term .container:nth-child(2),
  #term .container:nth-child(3) {
    flex-direction: column;
    width: 100%;
  }

  #term .container:nth-child(2) .row:nth-child(2),
  #term .container:nth-child(3) .row:first-child {
    width: 100%;
    padding-top: 0px;
  }
  #term .container:first-child .gambar{
    height: 350px ;
  }

  #term .container:first-child .gambar img {
    width: 150%;
    height: 350px;
  }
  #term .container:nth-child(2) .row:first-child h2 {
  font-size: 1.5em;
  font-family: "72 Black";
  height: 40px;
  margin-top: 10px;
}
#term .container:nth-child(2) .row:first-child h1 {
  font-size: 2em;
  margin-top: 0;
  font-family: "72 Black";
  height: fit-content;
}
#term .container:nth-child(2) .row:first-child ol {
  padding-left: 25px;
}

#term .container:nth-child(2) .row:first-child ol li {
  margin-bottom: 10px;
  font-size: 16px;
  font-family: 'Merriweather', serif;
}
#term .container:nth-child(2) .row:first-child ul {
  padding-left: 25px;
}

#term .container:nth-child(2) .row:first-child ul li {
  margin-bottom: 10px;
  font-size: 16px;
  font-family: 'Merriweather', serif;
}
#term .container:nth-child(3) .row:first-child h1 {
  font-size: 1.5em;
  margin-bottom: 15px;
  font-family: "72 Black";
}
#term .container:nth-child(3) .row:first-child .faq-answer ul li {
  margin: 0;
  font-size: 16px;
  font-family: 'Merriweather', serif;
  margin-bottom: 5px;
}
#term .container:nth-child(3) .row:first-child .faq-question {
 
  font-size: 1.2em;
  margin-left: 10px;
  
}
}

@media screen and (max-width: 480px) {
  #term .container:first-child .gambar img{
    max-width: 100%;
  }
}