/* :root {
  --primary-dark: #082440;
  --acent: #071727;
  --blue: #1e90ff;
  --blue-dark: #1461AF;
  --indigo: #0B223A;
  --gray-light: #F0F0F0;
  --gray-dark: #3A3A3A;
  --white: #ffffff;
} */

:root {
  --primary-dark: #202168;
  --accent: #071727;
  --blue: #39589D;
  --blue-dark: #1461AF;
  --indigo: #0B223A;
  --gray-light: #F0F0F0;
  --gray-dark: #1e1e1e;
  --white: #ffffff;
}

/* font */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); */


@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,300..700;1,300..700&display=swap");

* {
    font-family: "Red Hat Text", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Red Hat Text', sans-serif;
}

/* font */
.fw-bold {
 font-weight: 600 !important; 
}

/* background */
.bg-blue-dark {
  background-color: var(--blue-dark);
}

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

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

.bg-primary-dark {
  background-color: var(--primary-dark);
}

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

.bg-gradient-custom {
  background: linear-gradient(180deg, #1461AF 0%, #0B2139 100%);
  color: white;
}

.bg-galeri {
  position: relative;
  background-image: url(../images/custom/bg-galeri.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.bg-galeri::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #091F39D9;
  opacity: 0.9 !important;
  z-index: 1;
}

.rbt-btn.btn-white:hover {
  background: var(--blue-dark) !important;
  color: var(--color-white);
}

.nav-pills .nav-link {
  background: var(--gray-light);
  border: 0;
  border-radius: .25rem;
  color: #000;
}

.nav-pills .nav-link.active {
  color: #fff !important;
  background-color: var(--blue-dark) !important;
}

.rbt-information-list li a i {
  margin-right: 10px;
  font-size: 20px !important;
  margin-top: 2px;
}

.img-hero {
  width: 100%;
}

/* card */
.card-img-overlay {
  position: absolute;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 2rem;
  border-radius: calc(.25rem - 1px);
}

.list-group-item {
  position: relative;
  display: block;
  padding: .5rem 1rem;
  color: #fff;
  text-decoration: none;
  background-color: transparent !important;
  border: 1px solid rgba(0, 0, 0, .125);
}

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

/* Buttom */

.rounded-5 {
  border-radius: 24px !important;
}
.rounded-6 {  
  border-radius: 1rem !important;
}

/* header */
.rbt-header-top.rbt-header-top-1.variation-height-50 {
  padding-top: 0px;
  padding-bottom: 0px !important;
  height: 50px;
  min-height: 50px;
}

.rbt-header .mainmenu-nav .mainmenu {
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: start;
}

.rbt-header .mainmenu-nav .mainmenu > li:hover > a, .rbt-header .mainmenu-nav .mainmenu > li.active > a {
  color: var(--gray-light) !important;
  background-color: var(--blue-dark) !important;
}

.rbt-header .mainmenu-nav .mainmenu li:first-child a {
  padding-left: 10px !important;
}

.rbt-header .mainmenu-nav .mainmenu li:last-child a {
  padding-right: 10px !important;
}

.rbt-information-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 0;
  list-style: none;
  margin: -2px -7px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* rbt section */
.rbt-section-gapTop {
  padding-top: 72px;
}

.rbt-section-gapBottom {
  padding-bottom: 72px;
}

/* rbt card */
.rbt-cat-box-1 .inner {
  background-color: var(--color-white);
  box-shadow: var(--shadow-1);
  border-radius: 24px;
  padding: 24px 24px;
}

.rbt-counterup .inner .content .counter::after {
  position: absolute;
  content: "";
  right: 0;
  font-size: 42px;
}

/* swiper custom */
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));
  height: var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));
  display: inline-block;
  border-radius: 50%;
  background: var(--swiper-pagination-bullet-inactive-color, #ccc);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, .9);
}

.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

/* Base styles for Swiper buttons */
.swiper-button-next,
.swiper-button-prev {
  width: 44px; /* Adjust size as needed */
  height: 44px; /* Adjust size as needed */
  background-color: #007bff; /* Blue background */
  border-radius: 50%; /* Circular shape */
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Icon color */
  position: absolute; /* Positioning */
  top: 50%; /* Center vertically */
  transform: translateY(-50%); /* Adjust for centering */
  z-index: 10; /* Ensure it's above other elements */
}

/* Positioning the next button */
.swiper-button-next {
  right: 10px; /* Adjust as needed */
}

/* Positioning the previous button */
.swiper-button-prev {
  left: 10px; /* Adjust as needed */
}

/* Remove default content */
.swiper-button-next:after,
.swiper-button-prev:after {
  content: ''; /* Remove default icons */
}

/* Add SVG for the next button */
.swiper-button-next:before {
  content: '';
  display: inline-block;
  width: 16px; /* Adjust size as needed */
  height: 16px; /* Adjust size as needed */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16"><path d="M11.742 8.5l-4.5 4.5-1.5-1.5 3-3-3-3 1.5-1.5 4.5 4.5a.5.5 0 0 1 0 .707z"/></svg>') no-repeat center;
  background-size: contain; /* Ensure the SVG fits */
}

/* Add SVG for the previous button */
.swiper-button-prev:before {
  content: '';
  display: inline-block;
  width: 16px; /* Adjust size as needed */
  height: 16px; /* Adjust size as needed */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16"><path d="M4.258 8.5l4.5-4.5 1.5 1.5-3 3 3 3-1.5 1.5-4.5-4.5a.5.5 0 0 1 0-.707z"/></svg>') no-repeat center;
  background-size: contain; /* Ensure the SVG fits */
}

/* devider */
.divider {
  border-top: 2px solid #E8E8E8;
  width: 100%;
  margin: 0 1rem;
}
.divider-text {
  position: relative;
  top: -0.5rem;
  background-color: #fff;
  padding: 0 0.8rem;
}

.course-sidebar-top {
  margin-top: 400px !important;
}

/* caraousel */
.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 1.25rem;
  left: 5%;
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}

.gradient-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180.13deg, rgba(0, 0, 0, 0) 33.15%, #080808 99.88%);
  z-index: 1;
}

.rbt-banner-6.variation-03 {
  height: 450px !important;
  display: flex;
  align-items: center;
  width: 100%;
}

.rbt-banner-6.variation-04 {
  height: 750px !important;
  display: flex;
  align-items: center;
  width: 100%;
}

.gradient-to-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  z-index: 1;
}

.title {
  font-size: 32px;
  color: var(--blue);
}

.btn {
  height: 54px;
  place-content: center;
  white-space: nowrap;

  padding: 0 24px;

  border-radius: 999px;

  span i {
    vertical-align: text-top;
    font-size: 18px;
  }
}

/* screen */
@media only screen and (max-width: 1199px) {
  .rbt-banner-6.variation-03 {
      height: auto;
      width: 100vw;
  }
}

.fs-10 {
  font-size: 10px !important;
}

.fs-11 {
  font-size: 11px !important;
}

.fs-12 {
  font-size: 12px !important;
}

.fs-13 {
  font-size: 13px !important;
}

.fs-14 {
  font-size: 14px !important;
}

.fs-15 {
  font-size: 15px !important;
}

.fs-16 {
  font-size: 16px !important;
}

.fs-17 {
  font-size: 17px !important;
}

.fs-18 {
  font-size: 18px !important;
}

.fs-19 {
  font-size: 19px !important;
}

.fs-20 {
  font-size: 20px !important;
}

.fs-21 {
  font-size: 21px !important;
}

.fs-22 {
  font-size: 22px !important;
}

.fs-23 {
  font-size: 23px !important;
}

.fs-24 {
  font-size: 24px !important;
}

.fs-25 {
  font-size: 25px !important;
}

.fs-26 {
  font-size: 26px !important;
}

.fs-27 {
  font-size: 27px !important;
}

.fs-28 {
  font-size: 28px !important;
}

.fs-29 {
  font-size: 29px !important;
}

.fs-30 {
  font-size: 30px !important;
}

.fs-31 {
  font-size: 31px !important;
}

.fs-32 {
  font-size: 32px !important;
}

.fs-33 {
  font-size: 33px !important;
}

.fs-34 {
  font-size: 34px !important;
}

.fs-35 {
  font-size: 35px !important;
}

.fs-36 {
  font-size: 36px !important;
}

.fs-37 {
  font-size: 37px !important;
}

.fs-38 {
  font-size: 38px !important;
}

.fs-39 {
  font-size: 39px !important;
}

.fs-40 {
  font-size: 40px !important;
}

.fs-41 {
  font-size: 41px !important;
}

.fs-42 {
  font-size: 42px !important;
}

.fs-43 {
  font-size: 43px !important;
}

.fs-44 {
  font-size: 44px !important;
}

.fs-45 {
  font-size: 45px !important;
}

.fs-46 {
  font-size: 46px !important;
}

.fs-47 {
  font-size: 47px !important;
}

.fs-48 {
  font-size: 48px !important;
}

.fs-49 {
  font-size: 49px !important;
}

.fs-50 {
  font-size: 50px !important;
}

.fs-51 {
  font-size: 51px !important;
}

.fs-52 {
  font-size: 52px !important;
}

.fs-53 {
  font-size: 53px !important;
}

.fs-54 {
  font-size: 54px !important;
}

.swiper.kegiatan-swiper {
  .card {
    background-color: #ffffff10;

    .card-body {
      padding: 22px !important;
      background-color: transparent;

      span {
        display: block;
        font-size: 14px;
        margin-bottom: 8px !important;
        color: rgb(255, 255, 255, .5);
      }

      h5 {
        color: white;
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 0 !important;
      }

    }
  }
}

.artikel {
  .card {
    border: none;

    img {
      object-fit: cover;
    }

    .card-body {
      border: none;

      h5 {
        font-size: 22px;
        color: var(--primary-dark);
      }

      p {
        font-size: 16px;
        color: var(--gray-dark);
        opacity: .7;
      }
    }
  }
}