:root {
  --main-color-one: #408085;
  --heading-color: #1e1926;
  --paragraph-color: #6b6b6b;
  --heading-font: 'Sora', sans-serif;
  --body-font: 'Poppins', sans-serif;
  --animate-delay: 0.3s;
  --light-green: #eff4f5;
  --light-orange: #fff4ed;
  --light-blue: #f5f7ff;
  --main-blue: #254a77;
  --main-green: #85bec2;
  --main-orange: #ff9652;
  --dark-blue: #143863;
  --red-sd: #c14344;
  --blue-smp: #3160ad;
}

p {
  hyphens: none !important;
}

.accordion-wraper p,
.accordion-wraper ul li,
.accordion-wraper ol li {
  color: #000 !important;
}

.accordion-wrapper ol li {
  margin-bottom: 5px !important;
}

.accordion-wrapper.style-02 .collapse {
  overflow: scroll;
}

.accordion-wrapper.style-02 a {
  color: orange;
}

.radius-30 {
  border-radius: 30px;
}

@media (max-width: 576px) {
  .radius-30 {
    border-radius: 10px;
  }
}

.info {
  background-color: #d9edf7 !important;
}

.warning {
  background-color: #fcf8e3 !important;
}

.success {
  background-color: #dff0d8 !important;
}

/* override */
.table > :not(caption) > * > * {
  border-bottom-width: 0 !important;
}

.navbar-area.navigation-style-02 .custom-container .logo-wrapper {
  max-width: 200px !important;
}

@media (max-width: 576px) {
  .navbar-area.navigation-style-02 .custom-container .logo-wrapper {
    max-width: 140px !important;
  }
}

.accordion-wrapper .card .card-header a {
  font-size: 16px;
}

.btn-margin {
  margin-right: 30px;
}

@media (max-width: 768px) {
  .btn-margin {
    margin-right: 10px;
  }
}

@media only screen and (max-width: 991px) {
  .banner-area.home-two {
    padding: 60px 0px 60px !important;
  }
}

.navbar-area .custom-container .navbar-collapse .navbar-nav li + li {
  margin-left: 20px;
}

.accordion-wrapper .card .card-header a {
  padding: 15px 20px;
}

@media only screen and (max-width: 768px) {
  .accordion-wrapper .card .card-header a {
    padding: 10px 50px 10px 20px !important;
    font-size: 14px;
  }

  .accordion-wrapper .card {
    border-radius: 10px;
  }

  .accordion-wrapper .card + .card {
    margin-top: 15px;
  }
}

@media (max-width: 576px) {
  .accordion-wrapper .card .card-header a {
    font-size: 12px;
  }

  .accordion-wrapper .card * {
    font-size: 12px;
  }
}

/* end override */

/* end header baner */
.text-green {
  color: var(--main-color-one);
}

.text-orange {
  color: var(--main-orange);
}

.text-blue {
  color: var(--dark-blue);
}

.bg-light-blue2 {
  background-color: #e9eeff;
}

.bg-light-green {
  background-color: var(--light-green);
}

.bg-light-orange {
  background-color: var(--light-orange);
}

.bg-light-blue {
  background-color: var(--light-blue);
}

.banner-area .banner-inner p {
  font-size: 16px;
  font-weight: 600;
  line-height: 2;
}

.banner-area.home-two {
  padding: 90px 0px;
}

.banner-area .banner-wrapper .element-03 {
  position: absolute;
  right: 20%;
  top: 0%;
}

.banner-area.home-two .banner-wrapper .thumbnail .banner-img {
  top: 0px;
}

.banner-area .banner-wrapper .element-05 {
  position: absolute;
  bottom: 13px;
  right: 31%;
  -webkit-animation: scroll-up 2s linear infinite;
  animation: scroll-up 2s linear infinite;
}

@media (max-width: 576px) {
  .banner-area .banner-wrapper .element-05 {
    display: none;
  }
}

.banner-img {
  width: 100%;
  max-width: 500px;
}

@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .banner-area.home-two .banner-wrapper .thumbnail .banner-img {
    right: 10% !important;
    top: 36px !important;
  }
}

.banner-area .banner-wrapper .element-03 {
  position: absolute;
  right: 17%;
  top: 12%;
  width: 100%;
  max-width: 420px;
}

.banner-area .banner-wrapper .element-05 {
  position: absolute;
  bottom: 88px;
  right: 28%;
  -webkit-animation: scroll-up 2s linear infinite;
  animation: scroll-up 2s linear infinite;
}

.btn-custom-login {
  background-color: #408085;
  padding: 10px 46px;
  border-radius: 25px;
  transition: 0.1.5s;
  color: #fff;
}

.btn-custom-login:hover {
  color: #fff;
  opacity: 0.8;
}

.text-description {
  width: 100%;
}

/* end header baner */

/* pengumuman */
.p-section {
  padding: 80px 0;
}

.p-section-video {
  padding: 50px 0;
}

.p-section-30 {
  padding: 30px 0 80px 0;
}

.section-title {
  text-align: center;
  font-weight: bold;
  font-size: 28px;
  color: #4a4a4a;
  margin-bottom: 30px;
}

@media (max-width: 576px) {
  .section-title {
    font-size: 20px;
  }

  .btn-common {
    font-size: 14px !important;
    padding: 20px !important;
    border-radius: 10px !important;
  }
}

.slider-image {
  border-radius: 30px;
  overflow: hidden;
}

@media (max-width: 768px) {
  .slider-image {
    border-radius: 10px;
  }
}

/* end pengumuman */

/* footer */
.main-footer {
  padding: 30px;
  background-color: #254a77;
}

.footer-title {
  font-size: 25px;
  font-weight: bold;
}

.footer-hero {
  color: #a2d9dc;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 12px;
}

/* .footer-2 {
  display: grid;
  justify-content: space-between;
  grid-template-columns: repeat(4, 1fr);
} */

/* .footer-2-item {
  display: flex;
  justify-content: end;
} */

.footer-bottom {
  background-color: var(--dark-blue);
  padding: 30px;
}

@media (max-width: 576px) {
  .footer-2 {
    justify-content: start;
    grid-template-columns: 1fr;
  }
}
/* end footer */

/* faq */

.faq-wrapper {
  position: relative;
  background-color: #a2d9dc;
  border-bottom-left-radius: 80px;
  border-bottom-right-radius: 80px;
}

@media (max-width: 576px) {
  .faq-wrapper {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

.faq-title {
  font-size: 65px;
  font-weight: 600;
}

@media (max-width: 992px) {
  .faq-title {
    font-size: 40px;
  }
}

.btn-call {
  cursor: pointer;
  background: linear-gradient(to right, #ff9652, #ffb382);
  margin-top: 20px;
  display: inline-block;
  padding: 20px 40px;
  color: white;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 500;
}

.divider-orange {
  width: 200px;
  height: 6px;
  background-color: #ff9652;
}

.btn-call:hover {
  opacity: 0.9;
  color: white;
}
/* end faq */

/* aplikasi wrapper */
.unduh-wrapper {
  padding-top: 150px;
  position: relative;
  z-index: 3;
  background-color: #85bec2;
  padding-bottom: 150px;
}

@media (max-width: 768px) {
  .unduh-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.radius-wrapper {
  width: 100%;
  height: 100px;
  position: absolute;
  z-index: -1;
  background-color: #254a77;
  bottom: 0px;
}

.anak-smp-image {
  width: 350px;
  display: inline-block;
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 120px;
}

@media (max-width: 992px) {
  .anak-smp-image {
    display: none;
  }
}

/* unduh */
.unduh-title {
  font-size: 50px;
  color: #fff;
  font-weight: 500;
}

@media (max-width: 992px) {
  .unduh-title {
    font-size: 35px;
  }
}

.app-hand {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  position: absolute;
  right: 0;
  bottom: 0;
}

@media (max-width: 1200px) {
  .app-hand {
    max-width: 450px;
  }
}

@media (max-width: 992px) {
  .app-hand {
    max-width: 380px;
  }
}

@media (max-width: 768px) {
  .app-hand {
    display: none;
  }
}

#rny_vid_frame_sd,
#rny_vid_frame_smp {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}

@media (max-width: 768px) {
  #rny_vid_frame_sd,
  #rny_vid_frame_smp {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
}

/* jenjang sekolah */
.pilihan-wrapper {
  display: flex;
  gap: 80px;
  justify-content: center;
}

@media (max-width: 992px) {
  .pilihan-wrapper {
    gap: 30px;
  }

  .pilihan-img-wrapper {
    display: none;
  }
}

.pilihan-item {
  cursor: pointer;
  padding: 15px 20px 15px 15px;
  width: 100%;
  background-color: #fff;
  border-radius: 20px;
  display: flex;
  transition: 0.4s;
  box-shadow: rgba(255, 150, 82, 0.2) 0px 7px 29px 0px;
}

@media (max-width: 576px) {
  .pilihan-title {
    font-size: 16px;
    margin-bottom: 20px;
    text-align: center;
  }

  .pilihan-desc {
    display: none;
  }
}

.pilihan-item .text-pilihan {
  font-weight: 600;
}

.shadow-sd {
  box-shadow: rgba(255, 150, 82, 0.2) 0px 7px 29px 0px;
}

.pilihan-img-wrapper img {
  width: 100%;
  height: 100%;
  max-width: 196px;
  padding: 0 15px;
}

.pilihan-title {
  font-size: 20px;
  font-weight: bold;
}

.pilihan-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

a.btn-pilihan-info {
  display: block;
  width: 100%;
  padding: 10px 20px;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
}

.bg-sd {
  background-color: var(--red-sd);
}

.bg-smp {
  background-color: var(--blue-smp);
}

.text-sd {
  color: var(--red-sd);
}

.text-smp {
  color: var(--blue-smp);
}

.inline-block {
  display: inline-block;
}

.pilihan-item:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* untuk sd */
/* .pilihan-item.hover-sd:hover, */
.pilihan-item.hover-sd.active {
  background-color: var(--red-sd);
}

/* .pilihan-item.hover-sd:hover .pilihan-title, */
.pilihan-item.hover-sd.active .pilihan-title {
  color: #fff;
}

/* .pilihan-item.hover-sd:hover .btn-pilihan-info, */
.pilihan-item.hover-sd.active .btn-pilihan-info {
  background-color: #fff;
  color: var(--red-sd);
}

/* .pilihan-item.hover-sd:hover .text-pilihan, */
.pilihan-item.hover-sd.active .text-pilihan {
  color: #fff;
}

/* untuk smp */
/* .pilihan-item.hover-smp:hover, */
.pilihan-item.hover-smp.active {
  background-color: var(--blue-smp);
}

/* .pilihan-item.hover-smp:hover .pilihan-title, */
.pilihan-item.hover-smp.active .pilihan-title {
  color: #fff;
}

/* .pilihan-item.hover-smp:hover .btn-pilihan-info, */
.pilihan-item.hover-smp.active .btn-pilihan-info {
  background-color: #fff;
  color: var(--blue-smp);
}

/* .pilihan-item.hover-smp:hover .text-pilihan, */
.pilihan-item.hover-smp.active .text-pilihan {
  color: #fff;
}

/* end jenjang sekolah */

/* option sekolah */
.wrapper-option-sekolah {
  display: flex;
  gap: 20px;
}

.wrapper-option-sekolah-2 {
  display: flex;
  gap: 50px;
}

@media (max-width: 576px) {
  .wrapper-option-sekolah-2 {
    gap: 20px;
  }
}

.option-sekolah {
  cursor: pointer;
  padding: 15px;
  background-color: white;
  width: 100%;
  max-width: 130px;
  border-radius: 15px;
  transition: 0.3s;
}

/* .option-sekolah.active {
  background-color: var(--main-color-one);
} */

.option-sekolah[data-id='sd'].active {
  background-color: var(--red-sd);
}

.option-sekolah[data-id='smp'].active {
  background-color: var(--blue-smp);
}

.option-sekolah:hover {
  box-shadow: rgba(162, 194, 255, 0.35) 0px 5px 15px;
}

.shadow-option {
  box-shadow: rgba(162, 194, 255, 0.35) 0px 5px 15px;
}

.option-sekolah:active {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}
/* end option sekolah */

/* effect fade pada tab */
/* Style the tab */
.tab {
  overflow: hidden;
  border: 0px solid #ccc;
  background-color: #fff;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 0px solid;
  border-top: none;
}

.tabcontent {
  animation: fadeEffect 1s;
  /* Fading effect takes 1 second */
}

.tabcontent > h3,
.tabcontent > p {
  text-align: center;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* end effect fade pada tab */

.title {
  text-align: center;
}

@media (max-width: 768px) {
  .title {
    font-size: 25px;
  }
}

.updated-at {
  display: inline;
}

@media (max-width: 576px) {
  .title {
    font-size: 20px;
  }

  .updated-at {
    display: block;
  }
}

.custom-list {
  list-style-type: none;
  padding-left: 20px;
}

.custom-list > li {
  margin-bottom: 10px;
}

.custom-list > li > ul > li {
  margin-left: 10px;
}

.card-cs {
  border: 1px solid #eceff1;
  background-color: #fff;
  border-radius: 20px;
  padding: 20px 30px;
}

.wrapper-filter {
  display: grid;
  gap: 20px;
}

.column-3 {
  grid-template-columns: repeat(3, 1fr);
}

.column-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 576px) {
  .column-3,
  .column-4 {
    grid-template-columns: 1fr;
  }
}

table * {
  color: #000;
}

.single-course-item > .contact .title {
  margin-top: 0;
}

.single-course-item > .contact {
  padding: 20px;
  height: 100%;
}

.single-course-item .thumbnail {
  display: block;
  border: 1px solid #e4e4e4;
  border-radius: 20px;
}

.infografis-list-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
}

@media (max-width: 992px) {
  .infografis-list-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
  }
}

@media (max-width: 768px) {
  .infografis-list-wrapper {
    grid-template-columns: repeat(1, 1fr);
    gap: 50px;
  }
}

@media (max-width: 576px) {
  .infografis-list-wrapper {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.single-course-item {
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.single-course-item:hover {
  transform: translateY(-20px);
}

.single-course-item > .contact .tag {
  font-size: 13px;
}

.wrapper-table {
  width: 100%;
  max-width: 500px;
}

@media (min-width: 992px) {
  .nav-login-mobile {
    display: none !important;
  }
}

/* Style the tab */
.tab-wrapper {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.tablinks {
  cursor: pointer;
  padding: 10px 25px;
  border-radius: 5px;
  /* background-color: var(--light-green); */
  /* color: var(--main-color-one); */
  /* border: 1px solid var(--main-color-one); */
  transition: 0.3s;
  font-weight: bold;
}

.tablinks.btn-tab-sd {
  background-color: #fff;
  color: var(--red-sd);
  border: 1px solid var(--red-sd);
}

.tablinks.btn-tab-smp {
  background-color: #fff;
  color: var(--blue-smp);
  border: 1px solid var(--blue-smp);
}

.tablinks:hover {
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.tablinks:active {
  box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset,
    rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
}

/* .tablinks.active {
  background-color: var(--main-color-one);
  color: var(--light-green);
} */

.tablinks.btn-tab-sd.active {
  background-color: var(--red-sd);
  color: #fff;
}

.tablinks.btn-tab-smp.active {
  background-color: var(--blue-smp);
  color: #fff;
}

.tablinks {
  display: none;
}

.jalur-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  margin: 15px 0;
}

.jalur-card {
  cursor: pointer;
  position: relative;
  width: 100%;
  max-width: 350px;
  border-radius: 25px;
  background-color: #fff;
  padding: 30px;
  transition: 0.3s;
  height: 315px;
}

.jalur-card-hover {
  display: none;
  top: 85px;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 3;
  max-width: 350px;
  border-radius: 25px;
  background-color: #fff;
  padding: 30px;
  transition: 0.3s;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

.jalur-card:hover .jalur-card-hover {
  display: block;
  opacity: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 992px) {
  .jalur-card {
    max-width: 300px;
  }
}

@media (max-width: 576px) {
  .jalur-card {
    max-width: 500px;
  }
}

.jalur-card:hover {
  /* transform: translateY(-20px); */
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

a.jalur-btn {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--main-color-one);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  display: inline-block;
  padding: 10px 20px;
}

.jalur-img {
  display: inline-block;
  position: absolute;
  top: -25px;
  width: 60px;
}

.jalur-title {
  margin-top: 25px;
  font-weight: bold;
}

.jalur-desc {
  color: #6b6b6b;
  font-size: 12px;
  text-align: justify;
}

.header-img-title {
  display: inline-block;
  text-align: center;
  width: 350px;
}

@media (max-width: 576px) {
  .header-img-title {
    width: 200px;
  }
}
/* Style the buttons that are used to open the tab content */

.slick-dots li button:before {
  font-size: 15px !important;
}

.visitor-wrapper {
  background-color: #345e91;
  border-radius: 10px;
  padding: 10px;
}

.img-visitor {
  width: 40px;
}

.visitor-desc {
  margin-left: 5px;
  color: #fff;
  display: inline-block;
  font-weight: bold;
}

.visitor-text {
  color: #ffb800;
  font-weight: bold;
  margin-right: 10px;
}

.visitor-item {
  margin-top: 5px;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* .slick-next:before,
.slick-prev:before {
  font-size: 40px;
}

.slick-next:before {
  margin-left: -80px;
}

.slick-prev:before {
  color: red;
  z-index: 999; 
} */

#sliderInfo .slick-arrow,
#sliderModal .slick-arrow
 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background-color: rgba(0, 0, 0, 0.2); /* lebih transparan */
  color: rgba(255, 255, 255, 0.8);
  border: none;
  font-size: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#sliderInfo .slick-prev-custom,
#sliderModal .slick-prev-custom
 {
  left: 20px; /* agak masuk ke dalam */
}

#sliderInfo .slick-next-custom,
#sliderModal .slick-next-custom
 {
  right: 20px;
}

.tab-status-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10px 17px;
  gap: 10px;
  background-color: var(--light-green);
  border-radius: 10px;
  border: 2px solid var(--main-color-one);
}

@media (max-width: 576px) {
  .tab-status-wrapper {
    justify-content: center;
  }
}

.btn-status {
  cursor: pointer;
  font-weight: bold;
  padding: 8px 30px;
  border-radius: 10px;
}

.btn-status:hover {
  background-color: #fff;
}

.btn-status.active {
  color: #fff;
  background-color: var(--main-color-one);
}

.nav-tabs .nav-link {
  text-decoration: none;
  font-weight: 600;
  color: #000;
}

.color-red.active {
  color: var(--red-sd) !important;
}

.color-green.active {
  color: #45B7AD !important;
}