/* light theme */
html {
  --bg-color: #ffffff;
  --bg-nav: #f9f9f9;
  --bg-media: #e4e4e4;
  --primary-color: #1b182c;
  --mute-color: #a9a8a8;
  --light-gray-color: #f9f9f9;
  --blue-color: #1c75fd;
  --green-color: #27de9c;
  --hot-pink-color: #f42a66;
  --pink-color: #ff95df;
  --yellow-color: #f8c400;
  --button-color: #1b182c;
  --border-color: #e1e1e1;
}
/* dark theme */
html[data-theme="dark"] {
  --bg-color: #121419;
  --bg-nav: #20242d;
  --bg-media: #20232b;
  --primary-color: #ffffff;
  --mute-color: #a9a8a8;
  --light-gray-color: #f9f9f9;
  --blue-color: #1c75fd;
  --green-color: #27de9c;
  --hot-pink-color: #f42a66;
  --pink-color: #ff95df;
  --yellow-color: #f8c400;
  --button-color: #f8c400;
  --border-color: #353946;
}

/* header */
.header {
  background: url(../images/banner.png) no-repeat;
  background-size: cover;
  min-height: 300px;
  background-position: center top;
}
.header .title p {
  font-size: 20px;
}

/* faqs */
.accordion-card {
  padding: 30px;
  border: 1px solid var(--border-color);
  border-radius: 25px;
  margin-bottom: 15px;
}

.card-header .card-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.card-header .card-title {
  font-size: 16px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--primary-color);
}

.accordion-card .card-info {
  margin-top: 45px;
  color: var(--primary-color);
}

.card-header .icon-box {
  position: relative;
}

.card-header svg {
  width: 20px;
  height: 20px;
  position: absolute;
  top: -5px;
  left: -10px;
  fill: var(--primary-color);
}

.icon-box .plus-icon.show {
  opacity: 1;
  visibility: visible;
  transform: rotate(90deg);
  transition: all 0.3s linear;
}

.icon-box .plus-icon {
  opacity: 0;
  visibility: hidden;
  transform: rotate(0deg);
  transition: all 0.3s linear;
}

.icon-box .minus-icon {
  opacity: 1;
  visibility: visible;
  transform: rotate(0deg);
  transition: all 0.3s linear;
}

.card-body {
  overflow: hidden;
  opacity: 1;
  visibility: hidden;
  line-height: 1.6;
  font-size: 1rem;
  font-weight: 500;
  max-height: 0;
  transition: visibility 0.5s, padding 0.5s, max-height 0.5s;
}

.card-body.open {
  visibility: visible;
}