/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Nunito",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #25477d; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #25477d; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --contrast-color: #ffffff; /* The contrast color is used for elements when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors */
  --background-color-2: #f9f8cc;
  --background-blue:#0b7ac2;
  --heading-color-white:#ffffff;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #f6c506; /* Applied to main navmenu links when they are hovered over or active */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #25477d; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 50px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 20px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color-white);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 15px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
  font-weight: 500;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.menu-mobile-app {
  display: none;
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
    display: none;
  }

  .menu-mobile-app {
    font-size: 10px;
    display: block;
    /* position: absolute; */
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px color-mix(in srgb, var(--default-color), transparent 85%);
}

/* Blog Detail Page */
.blog-details-page .header {
  --background-color: rgba(255, 255, 255, 0);
}

.blog-details-page.scrolled .header {
  --background-color: #ffffff;
}

/* Index Page Header
------------------------------*/
.index-page .header {
  --background-color: rgba(255, 255, 255, 0);
}

/* Index Page Header on Scroll
------------------------------*/
.index-page.scrolled .header {
  --background-color: #ffffff;
}

.scrolled .navmenu a,
.scrolled .navmenu a:focus {
  color: #262b62;
}

.scrolled .navmenu li:hover > a,
.scrolled .navmenu .active,
.scrolled .navmenu .active:focus {
  color: #f6c506;
}

.scrolled .header .logo h1 {
  color: #262b62;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 12px;
    font-size: 15px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/* Listing Dropdown - Desktop */
@media (min-width: 1200px) {
  .navmenu .listing-dropdown {
    position: static;
  }

  .navmenu .listing-dropdown ul {
    margin: 0;
    padding: 10px;
    background: var(--nav-dropdown-background-color);
    box-shadow: 0px 0px 20px color-mix(in srgb, var(--default-color), transparent 90%);
    position: absolute;
    top: 130%;
    left: 0;
    right: 0;
    visibility: hidden;
    opacity: 0;
    display: flex;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
  }

  .navmenu .listing-dropdown ul li {
    flex: 1;
  }

  .navmenu .listing-dropdown ul li a,
  .navmenu .listing-dropdown ul li:hover>a {
    padding: 10px 20px;
    font-size: 15px;
    color: var(--nav-dropdown-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown ul li a:hover,
  .navmenu .listing-dropdown ul li .active,
  .navmenu .listing-dropdown ul li .active:hover {
    color: var(--nav-dropdown-hover-color);
    background-color: var(--nav-dropdown-background-color);
  }

  .navmenu .listing-dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }
}

/* Listing Dropdown - Mobile */
@media (max-width: 1199px) {
  .navmenu .listing-dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .center-logo {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  .navmenu .listing-dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .listing-dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }
}

/*--------------------------------------------------------------
# Waves Effect By Wahyu
--------------------------------------------------------------*/
/* @media (max-width: 768px) {
  #hero .carousel-container {
    height: 90vh;
  }

  #hero h2 {
    font-size: 28px;
  }
} */

/* Untuk tampilan mobile, ubah kolom menjadi 6 sehingga menjadi 2 kolom per baris */
@media (max-width: 768px) {
  .menu-mobile-app .row > .col-md-3 {
    flex: 0 0 50%; /* Atur lebar kolom menjadi 50% */
    max-width: 50%; /* Pastikan lebar maksimal kolom adalah 50% */
  }

  .center-logo {
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }

  /* .menu-mobile-app .feature-box {
    justify-content: center;
  } */
}


.hero-waves {
  display: block;
  width: 100%;
  height: 60px;
  position: absolute;
}

.wave1 use {
  animation: move-forever1 10s linear infinite;
  animation-delay: -2s;
}

.wave2 use {
  animation: move-forever2 8s linear infinite;
  animation-delay: -2s;
}

.wave3 use {
  animation: move-forever3 6s linear infinite;
  animation-delay: -2s;
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}
/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--heading-color-white);
  background-color: var(--background-blue);
  font-size: 14px;
  /* padding-bottom: 50px; */
  position: relative;
}

.footer .footer-newsletter {
  background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
  border-top: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-bottom: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  padding: 50px 0;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
}

.footer .footer-newsletter .newsletter-form {
  margin-top: 30px;
  padding: 6px 8px;
  position: relative;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: 0px 2px 25px color-mix(in srgb, var(--default-color), transparent 95%);
  display: flex;
  transition: 0.3s;
  border-radius: 4px;
}

.footer .footer-newsletter .newsletter-form:focus-within {
  border-color: var(--accent-color);
}

.footer .footer-newsletter .newsletter-form input[type=email] {
  border: 0;
  padding: 4px;
  width: 100%;
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  color: var(--default-color);
}

.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
  outline: none;
}

.footer .footer-newsletter .newsletter-form input[type=submit] {
  border: 0;
  font-size: 16px;
  padding: 0 20px;
  margin: -7px -8px -7px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
}

.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.footer .footer-newsletter .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  font-weight: 600;
  border-radius: 4px;
}

.footer .footer-newsletter .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-top: 10px;
}

.footer .footer-newsletter .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: subscription-loading 1s linear infinite;
}

@keyframes subscription-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.footer .footer-top {
  padding-top: 50px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 10px;
  transition: 0.3s;
}

.footer .social-links a:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.footer h4 {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-links {
  margin-bottom: 30px;
}

.footer .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links ul i {
  margin-right: 3px;
  font-size: 12px;
  line-height: 0;
  color: var(--accent-color);
}

.footer .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-links ul a {
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1;
}

.footer .footer-links ul a:hover {
  color: var(--accent-color);
}

.footer .footer-about a {
  color: var(--heading-color);
  font-size: 24px;
  font-weight: 600;
  font-family: var(--heading-font);
}

.footer .footer-contact p {
  margin-bottom: 5px;
}

.footer .copyright {
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .copyright a {
  color: #debd1f;
}

.footer .credits {
  margin-top: 6px;
  font-size: 13px;
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  position: relative;
}

.page-title .heading {
  padding: 80px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.page-title .heading h1 {
  font-size: 38px;
  font-weight: 700;
}

.page-title nav {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 20px 0;
}

.page-title nav ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.page-title nav ol li+li {
  padding-left: 10px;
}

.page-title nav ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 98px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 56px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  color: var(--accent-color);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.section-title p {
  color: var(--heading-color);
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.section-title p .description-title {
  color: var(--accent-color);
}

/* White Colour */
.section-title-white {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title-white h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, #25477d, transparent 70%);
  color: var(--heading-color-white);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.section-title-white p {
  color: #debd1f;
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.section-title-white small {
  color: var(--heading-color-white);
  margin: 10px 0 0 0;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.section-title-white p .description-title-white {
  color: var(--accent-color);
  font-size: 12px;
}

/* White Colour */
.section-title-white-2 {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title-white-2 h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, #25477d, transparent 70%);
  color: var(--heading-color-white);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.section-title-white-2 p {
  color: #ffffff;
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

.section-title-white-2 small {
  color: var(--heading-color-white);
  margin: 10px 0 0 0;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.section-title-white-2 p .description-title-white {
  color: var(--accent-color);
  font-size: 12px;
}

/* Heading Menu Mobile */
/* menu-mobile-heading Colour */
.menu-mobile-heading {
  text-align: center;
  padding-bottom: 40px;
  position: relative;
}

.menu-mobile-heading h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 8px 20px;
  margin: 0;
  background: color-mix(in srgb, #debd1f, transparent 10%);
  color: var(--heading-color-white);
  display: inline-block;
  text-transform: uppercase;
  border-radius: 50px;
  font-family: var(--default-font);
}

.menu-mobile-heading p {
  color: #ffffff;
  margin: 10px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
  text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);
}

.menu-mobile-heading small {
  color: var(--heading-color-white);
  margin: 10px 0 0 0;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.menu-mobile-heading p .description-title-white {
  color: var(--accent-color);
  font-size: 12px;
}

.section-title small {
  color: var(--heading-color-white);
  margin: 10px 0 0 0;
  font-size: 17px;
  font-weight: 700;
  font-family: var(--heading-font);
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  /* width: 100%; */
  /* min-height: 100vh; */
  /* position: relative; */
  padding: 80px 0 60px 0;
  /* display: flex; */
  align-items: center;
  background: url(../img/hero-bg.png) top center no-repeat;
  background-size: cover;

  width: 100%;
  overflow: hidden;
  position: relative;
  /* background: linear-gradient(0deg, rgb(42, 44, 57) 0%, rgb(51, 54, 74) 100%); */
  /* padding: 0; */
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  line-height: 56px;
  color: #f6c506;
}

.hero p {
  color: color-mix(in srgb, var(--heading-color-white), transparent 30%);
  margin: 5px 0 30px 0;
  font-size: 17px;
  line-height: 30px;
  font-weight: 400;
}

.hero .btn-get-started {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 40px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.hero .btn-get-started i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.hero .btn-get-started:hover {
  color: var(--default-color);
  background: #f6c506;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-color), transparent 55%);
}

.hero .btn-get-started:hover i {
  transform: translateX(5px);
}

.hero .btn-watch-video {
  font-size: 16px;
  transition: 0.5s;
  color: var(--default-color);
  font-weight: 600;
}

.hero .btn-watch-video i {
  color: var(--accent-color);
  font-size: 32px;
  transition: 0.3s;
  line-height: 0;
  margin-right: 8px;
}

.hero .btn-watch-video:hover {
  color: var(--accent-color);
}

.hero .btn-watch-video:hover i {
  color: color-mix(in srgb, var(--accent-color), transparent 15%);
}

.hero .animated {
  animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@media (max-width: 640px) {
  .hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .hero p {
    font-size: 17px;
    line-height: 30px;
    margin-bottom: 30px;
  }
}

@keyframes up-down {
  0% {
    transform: translateY(10px);
  }

  100% {
    transform: translateY(-10px);
  }
}

/* Hero Form */
.hero #contact-form h3 {
  font-size: 36px;
  font-weight: bold;
  line-height: 46px;
  padding-bottom: 6px;
}

.get-a-quote h6 {
  color: #858585;
  font-size: 16px;
  font-weight: 400;
  padding-bottom: 30px;
}
.get-a-quote {
  z-index: 11;
  background-color: white;
  padding: 40px;
  border-radius: 20px;
  position: relative;
  box-shadow: -1px 0px 44px 15px rgb(0 0 0 / 7%);
  -webkit-box-shadow: -1px 0px 44px 15px rgb(0 0 0 / 7%);
  -moz-box-shadow: -1px 0px 44px 15px rgba(0,0,0,0.7);
  
}
.get-a-quote .form-controls {
  width: 100%;
  height: 60px;
  border: 0;
  outline: 0;
  margin-bottom: 20px;
  color: #444;
  font-size: 16px;
  border-bottom: 3px solid #d3d3d3;
}
.get-a-quote input:focus {
  border-color: var(--accent-color);
}
.get-a-quote p {
  font-weight: bold;
  padding-bottom: 10px;
  padding-top: 10px;
}

.radio-button {
  margin-right: 15px;
  font-size: 16px;
  font-weight: 600;
  align-items: center;
  display: flex;
  margin-bottom: 35px;
}
.radio-button label {
  padding-left: 10px;
}
.radio-button input{
  width: 22px;
  height: 22px;
}
.group-img{
  position: relative;
}
.group-img svg {
  position: absolute;
  right: 0;
  width: 22px;
  height: auto;
  top: 21px;
}
.get-a-quote img {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .btn {
  padding: 15px 25px;
  border-width: 0;
  border-radius: 15px;
  font-size: 15px;
  font-family: var(--heading-font);
  line-height: 24px;
  text-transform: uppercase;
  -webkit-transition-property: color, border-color, background-color;
  transition-property: color, border-color, background-color;
  -webkit-transition-duration: .35s;
  transition-duration: .35s;
  -webkit-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  cursor: pointer;
  background-color: var(--accent-color);
  color: #ffffff;
}
.hero .btn:hover {
  background-color: #f6c506;
  color: #25477d;
  
}

.hero .btn:after {
  width: 136%;
}

.hero .btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}

/* Profiles */
.img-profile {

}

.img-profile img {
  max-width: 100%;
  height: auto;
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  padding: 40px;
}

.about .content h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-color);
  text-transform: uppercase;
}

.about .content h2 {
  font-size: 24px;
  font-weight: 700;
}

.about .content p {
  margin: 15px 0 30px 0;
  line-height: 30px;
}

.about .content .btn-read-more {
  color: var(--contrast-color);
  background: var(--accent-color);
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0px 5px 25px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.about .content .btn-read-more span {
  font-family: var(--default-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.about .content .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.about .content .btn-read-more:hover i {
  transform: translateX(5px);
}

.about .img-fluid {
  z-index: 1;
}


/* Deskripsi TryOut */
.deskripsi-tryout {
  color: var(--contrast-color);
  border-radius: 15px;
  padding: 25px;
  margin-bottom: 10px;
}

.deskripsi-tryout-green {
  background-color: #20c997;
}

.deskripsi-tryout-blue {
  background-color: #0d6efd;
}

/* About 22 */
.about .contents {
  background-color: var(--background-blue);
  padding: 40px;
  color: #ffffff;
  border-radius: 60px 0px 0px 30px;
}

.about .contents h2 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
}

.about .contents p {
  margin: 15px 0 30px 0;
  line-height: 30px;
  color: #ffffff;
}

.about .contents .btn-read-more {
  color: #545454;
  background: #f6c506;
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0px 5px 25px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.about .contents .btn-read-more span {
  font-family: var(--default-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.about .contents .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.about .contents .btn-read-more:hover i {
  transform: translateX(5px);
}

@media (max-width: 991px) {
  .about .contents {
    background-color: var(--background-blue);
    padding: 40px;
    color: #ffffff;
    border-radius: 60px 60px 0px 0px;
  }
}

/* Text Box */
.text-boxs {
  color: #ffffff;
  line-height: 30px;
  font-size: 20px;
  background-color: rgba(255, 255, 255, 0.2); /* Putih transparan */
  padding: 35px;
  border-radius: 20px 50px 20px 50px;
}

@media (max-width: 600px) {
  .text-boxs {
    color: #ffffff;
    line-height: 30px;
    font-size: 20px;
    background-color: rgba(255, 255, 255, 0.2); /* Putih transparan */
    padding: 35px;
    border-radius: 20px 50px 20px 50px;
    margin: 20px 24px;
    max-width: 90%;
  }

  .hidden {
    display: none;
  }
}

/* Ournament */
.background-ornament {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 500px; /* Sesuaikan ukuran gambar */
  height: auto;
  opacity: 0.1; /* Mengatur transparansi gambar */
  z-index: 0;
}

.background-ornament-about-atas {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 350px; /* Sesuaikan ukuran gambar */
  height: auto;
  opacity: 0.5; /* Mengatur transparansi gambar */
  z-index: 0;
}

/* Tagline */
.tag-line-oke h2 {
  padding: 5px;
  color: #debd1f;
  margin: 35px 0 0 0;
  font-size: 32px;
  font-weight: 700;
  font-family: var(--heading-font);
  text-align: center;
}

.tag-line-oke h3 {
  color: #ffffff;
  margin: 10px 0 0 0;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--heading-font);
  text-align: center;
}

/* 6.22. PROFILE COVER */
.profile-cover {
  position: relative;
  z-index: 0;
}

.profile-cover__action {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 120px 30px 10px 153px;
  border-radius: 5px 5px 0 0;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
          justify-content: flex-end;
  overflow: hidden;
}

.profile-cover__action > .btn {
  margin-left: 10px;
  margin-bottom: 10px;
}

.profile-cover__action > .btn > span {
  display: none;
}

.profile-cover__img {
  position: absolute;
  top: 120px;
  left: 30px;
  text-align: center;
  z-index: 1;
}

.profile-cover__img > img {
  /* max-width: 120px; */
  width: 120px;
  height: 120px;
  border: 5px solid #fff;
  border-radius: 50%;
}

.profile-cover__img > .h3 {
  color: #393939;
  font-size: 20px;
  line-height: 30px;
}

.modal-backdrop {
  position: fixed;
  z-index: var(--bs-backdrop-zindex);
}

.no-fixed-backdrop + .modal-backdrop {
  position: absolute !important;
}

.profile-cover__img > img + .h3 {
  margin-top: 6px;
}

.profile-cover__info .nav {
  margin-right: 28px;
  /* Kalau mau pake informasi count aktifkan kode css dibawah ini */
  /* padding: 15px 0 10px 170px; */ 
  padding: 130px 0 10px 170px;
  color: #999;
  font-size: 16px;
  line-height: 26px;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  -ms-flex-pack: end;
  -webkit-box-pack: end;
  justify-content: flex-end;
}

.profile-cover__info .nav li {
  margin-top: 13px;
  margin-bottom: 13px;
}

.profile-cover__info .nav li:not(:first-child) {
  margin-left: 30px;
  padding-left: 30px;
  border-left: 1px solid #eee;
}

.profile-cover__info .nav strong {
  display: block;
  margin-bottom: 10px;
  color: #e16123;
  font-size: 34px;
}
.sub-name {
  margin-top: -10px;
  font-size: 14px;
}

@media (min-width: 481px) {
  .profile-cover__action > .btn {
      min-width: 125px;
  }

  .profile-cover__action > .btn > span {
      display: inline-block;
  }
}

@media (max-width: 600px) {
  .profile-cover__info .nav {
      display: block;
      margin: 90px auto 0;
      /* Uncomment css dibawah ini apabila ingin menambahkan count */
      /* padding-left: 30px;
      padding-right: 30px; */
      padding: 40px 0 10px 170px;
  }
  
  .profile-cover__info .nav li:not(:first-child) {
      margin-top: 8px;
      margin-left: 0;
      padding-top: 18px;
      padding-left: 0;
      border-top: 1px solid #eee;
      border-left-width: 0;
  }
}

/* 2.4. BACKGROUND IMAGE */
.bg--img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 2.5. BACKGROUND OVERLAY */
[data-overlay] {
  position: relative;
  z-index: 0;
}

[data-overlay]:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  -webkit-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
  z-index: -1;
}

[data-overlay~="0"]:before { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
[data-overlay~="0.1"]:before { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; }
[data-overlay~="0.2"]:before { opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; }
[data-overlay~="0.3"]:before { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; }
[data-overlay~="0.4"]:before { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
[data-overlay~="0.5"]:before { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
[data-overlay~="0.6"]:before { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
[data-overlay~="0.7"]:before { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
[data-overlay~="0.8"]:before { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
[data-overlay~="0.9"]:before { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }
[data-overlay~="1"]:before { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

[data-overlay~="lighter"]:before { background-color: #eee; }
[data-overlay~="blue"]:before { background-color: #2bb3c0; }
[data-overlay~="orange"]:before { background-color: #e16123; }
[data-overlay~="green"]:before { background-color: #009378; }
[data-overlay~="red"]:before { background-color: #ff4040; }

.panel[data-overlay] {
  overflow: hidden;
}

/*--------------------------------------------------------------
# Values Section
--------------------------------------------------------------*/
.values .card {
  background-color: var(--background-color);
  color: var(--default-color);
  padding: 30px;
  box-shadow: 0px 0 10px color-mix(in srgb, var(--default-color), transparent 92%);
  text-align: center;
  transition: 0.3s;
  height: 100%;
  border: 0;
}

.values .card img {
  padding: 30px 50px;
  transition: 0.5s;
  transform: scale(1.1);
}

.values .card h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 18px;
}

.values .card:hover {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 88%);
}

.values .card:hover img {
  transform: scale(1);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-item {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 92%);
  padding: 30px;
}

.stats .stats-item i {
  color: var(--accent-color);
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
}

.stats .stats-item span {
  color: var(--heading-color);
  font-size: 36px;
  display: block;
  font-weight: 600;
}

.stats .stats-item p {
  padding: 0;
  margin: 0;
  font-family: var(--heading-font);
  font-size: 16px;
}

/*--------------------------------------------------------------
# Features Section
--------------------------------------------------------------*/
.features {
  background: var(--background-blue);
  position: relative;
}

.features .feature-box {
  padding: 24px 20px;
  background: var(--background-color);
  border-radius: 5px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  height: 100%;
}

.features .feature-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.features .feature-box i {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.features .feature-box:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* List Mode */
.features .feature-box ul {
  list-style-type: none; /* Menghilangkan bullet points default */
  padding: 15px; /* Menghilangkan padding default */
  margin: 0; /* Menghilangkan margin default */
}

.features .feature-box li {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 450;
  margin-bottom: 20px;
  transition: 0.3s;
}

.features .feature-box li:last-child {
  margin-bottom: 0; /* Menghilangkan margin pada item terakhir */
}

.features .feature-box li i {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.features .feature-box li:hover {
  color: #f6c506; /* Mengubah warna teks saat dihover */
}

.features .feature-box li:hover i {
  background: #f6c506;
  color: var(--contrast-color); /* Mengubah warna ikon saat dihover */
}

.table-profil {
  line-height: 60px;
}

.features .alert {
  background: var(--background-blue);
}

.features .alert h2 {
  color: #ffffff;
  margin: 0px 0 0 0;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--heading-font);
}

/* Button */

.btn-primary {
  background-color: var(--accent-color);
  border-color: var(--heading-font);
}

.btn-warning {
  background-color: #debd1f;
  border-color: #debd1f;
  color: var(--accent-color);
  padding: 15px;
  font-weight: bold;
}

.btn-warning:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: #ffffff;
}

.btn-imbos {
  background-color: #0b7ac2;
  color: #ffffff;
}

.btn-imbos:hover {
  background-color: #383838;
  color: #ffffff;
}

/*--------------------------------------------------------------
# Alt Features Section
--------------------------------------------------------------*/
.alt-features {
  background: var(--background-blue);
  position: relative;
}

.alt-features .icon-box {
  display: flex;
}

.alt-features .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.alt-features .icon-box i {
  font-size: 44px;
  line-height: 44px;
  color: var(--accent-color);
  margin-right: 15px;
}

.alt-features .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Alt Features Section2
--------------------------------------------------------------*/
.alt-features-2 {
  background: var(--background-color);
}

.alt-features-2 .icon-box {
  display: flex;
}

.alt-features-2 .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.alt-features-2 .icon-box i {
  font-size: 44px;
  line-height: 44px;
  color: var(--accent-color);
  margin-right: 15px;
}

.alt-features-2 .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# menu-mobile-app Section
--------------------------------------------------------------*/
.menu-mobile-app {
  padding: 20px;
}

.menu-mobile-app .feature-box {
  padding: 10px 10px;
  background: var(--background-color);
  border-radius: 5px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  height: 100%;
}

.menu-mobile-app .feature-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.menu-mobile-app .feature-box a {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  font-family: var(--heading-font);
  line-height: 1;
}

.menu-mobile-app .feature-box i {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.menu-mobile-app .feature-box:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Alt Features Section
--------------------------------------------------------------*/
.alt-features .icon-box {
  display: flex;
}

.alt-features .icon-box h4 {
  font-size: 20px;
  font-weight: 350;
  margin: 0 0 10px 0;
  color: #ffffff;
}

.alt-features .icon-box i {
  font-size: 44px;
  line-height: 44px;
  color: #ffffff;
  margin-right: 15px;
}

.alt-features .icon-box p {
  font-size: 15px;
  color: #ffffff;
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# about features Section
--------------------------------------------------------------*/
.about {
  position: relative;
}

.aboutfeatures {
  background: #f6c506;
}

.aboutfeatures .feature-box {
  padding: 24px 20px;
  background: var(--background-color);
  border-radius: 5px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  height: 100%;
}

.aboutfeatures .feature-box h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.aboutfeatures .feature-box i {
  background: color-mix(in srgb, var(--accent-color), transparent 92%);
  color: var(--accent-color);
  line-height: 0;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.aboutfeatures .feature-box:hover i {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.aboutfeatures blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
  border-radius: 10px;
}

.aboutfeatures blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.aboutfeatures blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #0b7ac2;
  margin-top: 20px;
  margin-bottom: 20px;
}

.aboutfeatures .btn-read-more {
  color: var(--contrast-color);
  background: var(--accent-color);
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  box-shadow: 0px 5px 25px color-mix(in srgb, var(--accent-color), transparent 90%);
}

.aboutfeatures .btn-read-more span {
  font-family: var(--default-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.aboutfeatures .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.aboutfeatures .content .btn-read-more:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Alt aboutfeatures Section
--------------------------------------------------------------*/
.alt-aboutfeatures .icon-box {
  display: flex;
}

.alt-aboutfeatures .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.alt-aboutfeatures .icon-box i {
  font-size: 44px;
  line-height: 44px;
  color: var(--accent-color);
  margin-right: 15px;
}

.alt-aboutfeatures .icon-box p {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-item .icon {
  font-size: 36px;
  padding: 20px 20px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 25px;
  display: inline-block;
  line-height: 0;
  transition: 0.3s;
}

.services .service-item h3 {
  font-size: 24px;
  font-weight: 700;
}

.services .service-item .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 20px;
}

.services .service-item .read-more i {
  line-height: 0;
  margin-left: 5px;
  font-size: 18px;
}

.services .service-item.item-cyan {
  border-bottom: 3px solid #0dcaf0;
}

.services .service-item.item-cyan .icon {
  color: #0dcaf0;
  background: rgba(13, 202, 240, 0.1);
}

.services .service-item.item-cyan .read-more {
  color: #0dcaf0;
}

.services .service-item.item-cyan:hover {
  background: #0dcaf0;
}

.services .service-item.item-orange {
  border-bottom: 3px solid #fd7e14;
}

.services .service-item.item-orange .icon {
  color: #fd7e14;
  background: rgba(253, 126, 20, 0.1);
}

.services .service-item.item-orange .read-more {
  color: #fd7e14;
}

.services .service-item.item-orange:hover {
  background: #fd7e14;
}

.services .service-item.item-teal {
  border-bottom: 3px solid #20c997;
}

.services .service-item.item-teal .icon {
  color: #20c997;
  background: rgba(32, 201, 151, 0.1);
}

.services .service-item.item-teal .read-more {
  color: #20c997;
}

.services .service-item.item-teal:hover {
  background: #20c997;
}

.services .service-item.item-red {
  border-bottom: 3px solid #df1529;
}

.services .service-item.item-red .icon {
  color: #df1529;
  background: rgba(223, 21, 4, 0.1);
}

.services .service-item.item-red .read-more {
  color: #df1529;
}

.services .service-item.item-red:hover {
  background: #df1529;
}

.services .service-item.item-indigo {
  border-bottom: 3px solid #6610f2;
}

.services .service-item.item-indigo .icon {
  color: #6610f2;
  background: rgba(102, 16, 242, 0.1);
}

.services .service-item.item-indigo .read-more {
  color: #6610f2;
}

.services .service-item.item-indigo:hover {
  background: #6610f2;
}

.services .service-item.item-pink {
  border-bottom: 3px solid #f3268c;
}

.services .service-item.item-pink .icon {
  color: #f3268c;
  background: rgba(243, 38, 140, 0.1);
}

.services .service-item.item-pink .read-more {
  color: #f3268c;
}

.services .service-item.item-pink:hover {
  background: #f3268c;
}

.services .service-item:hover h3,
.services .service-item:hover p,
.services .service-item:hover .read-more {
  color: #fff;
}

.services .service-item:hover .icon {
  background: #fff;
}

/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-tem {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 40px 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
  height: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1200px) {
  .pricing .pricing-tem:hover {
    transform: scale(1.1);
    box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 85%);
  }
}

.pricing h3 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
}

.pricing .price {
  font-size: 36px;
  color: var(--heading-color);
  font-weight: 600;
  font-family: var(--heading-font);
}

.pricing .price sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .price span {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 16px;
  font-weight: 300;
}

.pricing .icon {
  padding: 20px 0;
}

.pricing .icon i {
  font-size: 48px;
}

.pricing ul {
  padding: 0;
  list-style: none;
  color: var(--default-color);
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  margin-bottom: 25px;
}

.pricing ul li {
  padding-bottom: 10px;
}

.pricing ul .na {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
  text-decoration: line-through;
}

.pricing .btn-buy {
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  color: var(--accent-color);
  transition: none;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--heading-font);
  font-weight: 600;
  transition: 0.3s;
  border: 1px solid var(--accent-color);
  margin-top: auto; /* Memastikan tombol berada di bagian bawah */
  white-space: nowrap;    /* Mencegah teks pada tombol membungkus ke baris baru */
  margin-top: auto;       /* Memastikan tombol berada di bagian bawah */
  margin-left: auto;      /* Memposisikan tombol ke tengah */
  margin-right: auto;     /* Memposisikan tombol ke tengah */
}

.pricing .btn-buy:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pricing .featured {
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* Guru */
#guru {
  background-color: #e9e8e8;
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
  position: relative;
  padding: 20px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
  margin: 0 30px 0 0;
  transition: 0.3s;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.faq .faq-container .faq-item h3 .num {
  color: var(--accent-color);
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: var(--accent-color);
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
  padding: 0;
  margin: 0 auto 20px auto;
  list-style: none;
  text-align: center;
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  display: inline-block;
  padding: 0;
  font-size: 18px;
  font-weight: 500;
  margin: 0 10px;
  line-height: 1;
  margin-bottom: 5px;
  transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
  margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
  margin-right: 0;
}

@media (max-width: 575px) {
  .portfolio .portfolio-filters li {
    font-size: 14px;
    margin: 0 5px;
  }
}

.portfolio .portfolio-content {
  position: relative;
  overflow: hidden;
}

.portfolio .portfolio-content img {
  transition: 0.3s;
}

.portfolio .portfolio-content .portfolio-info {
  opacity: 0;
  position: absolute;
  inset: 0;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  background: rgba(0, 0, 0, 0.6);
  padding: 15px;
}

.portfolio .portfolio-content .portfolio-info h4 {
  font-size: 14px;
  padding: 5px 10px;
  font-weight: 400;
  color: #ffffff;
  display: inline-block;
  background-color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info p {
  position: absolute;
  bottom: 10px;
  text-align: center;
  display: inline-block;
  left: 0;
  right: 0;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}

.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
  position: absolute;
  left: calc(50% - 40px);
  font-size: 26px;
  top: calc(50% - 14px);
  color: #fff;
  transition: 0.3s;
  line-height: 1.2;
}

.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
  color: var(--accent-color);
}

.portfolio .portfolio-content .portfolio-info .details-link {
  left: 50%;
  font-size: 34px;
  line-height: 0;
}

.portfolio .portfolio-content:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-content:hover img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
  background: var(--background-blue);
}

.testimonials .testimonial-item {
  box-shadow: 0px 0 20px color-mix(in srgb, var(--default-color), transparent 90%);
  box-sizing: content-box;
  padding: 30px;
  margin: 40px 30px;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: 0.3s;
  background: var(--background-color);
  border-radius: 10px;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 4px solid var(--background-color);
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin: 0;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-wrapper {
  height: auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--background-color), transparent 70%);
  opacity: 1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.testimonials .swiper-slide {
  opacity: 0.3;
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide-active {
    opacity: 1;
  }

  .testimonials .swiper-pagination {
    margin-top: 0;
  }

  .testimonials .testimonial-item {
    margin: 40px 20px;
  }
}

@media (min-width: 1200px) {
  .testimonials .swiper-slide-next {
    opacity: 1;
    transform: scale(1.12);
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/

.team {
  background: #f6c506;
}

.team .team-member {
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 92%);
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  transition: 0.3s;
  background: var(--background-color);
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .member-img:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: url(../img/team-shape.svg) no-repeat center bottom;
  background-size: contain;
  z-index: 1;
}

.team .team-member .social {
  position: absolute;
  right: -100%;
  top: 30px;
  opacity: 0;
  border-radius: 4px;
  transition: 0.5s;
  background: color-mix(in srgb, var(--background-color), transparent 60%);
  z-index: 2;
}

.team .team-member .social a {
  transition: color 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin: 15px 12px;
  display: block;
  line-height: 0;
  text-align: center;
}

.team .team-member .social a:hover {
  color: var(--default-color);
}

.team .team-member .social i {
  font-size: 18px;
}

.team .team-member .member-info {
  padding: 10px 15px 20px 15px;
}

.team .team-member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
}

.team .team-member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.team .team-member .member-info p {
  font-style: italic;
  font-size: 14px;
  padding-top: 15px;
  line-height: 26px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.team .team-member:hover {
  transform: scale(1.08);
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 85%);
}

.team .team-member:hover .social {
  right: 8px;
  opacity: 1;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
  transition: 0.3s;
  opacity: 0.5;
}

.clients .swiper-slide img:hover {
  opacity: 1;
}

.clients .swiper-wrapper {
  height: auto;
}

.clients .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  opacity: 1;
  background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.clients .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Recent Posts Section
--------------------------------------------------------------*/
.recent-posts .post-item {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 92%);
  transition: 0.3s;
}

.recent-posts .post-item .post-img img {
  transition: 0.5s;
}

.recent-posts .post-item .post-date {
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.recent-posts .post-item .post-content {
  padding: 30px;
}

.recent-posts .post-item .post-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.recent-posts .post-item .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.recent-posts .post-item .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.recent-posts .post-item hr {
  color: color-mix(in srgb, var(--default-color), transparent 80%);
  margin: 20px 0;
}

.recent-posts .post-item .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.recent-posts .post-item .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.recent-posts .post-item:hover .post-title,
.recent-posts .post-item:hover .readmore {
  color: var(--accent-color);
}

.recent-posts .post-item:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 30px;
}

.contact .info-item i {
  font-size: 38px;
  line-height: 0;
  color: var(--accent-color);
}

.contact .info-item h3 {
  font-size: 20px;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-item p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.contact .php-email-form {
  background: color-mix(in srgb, var(--default-color), transparent 96%);
  padding: 30px;
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--background-color);
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
  font-size: 14px;
  padding: 10px 15px;
  box-shadow: none;
  border-radius: 0;
  color: var(--default-color);
  background-color: color-mix(in srgb, var(--background-color), transparent 50%);
  border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
  border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 0;
  padding: 10px 30px;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type=submit]:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: color-mix(in srgb, var(--default-color), transparent 85%);
  opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li+li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
  padding: 20px;
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 88%);
}

.service-details .service-box+.service-box {
  margin-top: 30px;
}

.service-details .service-box h4 {
  font-size: 20px;
  font-weight: 700;
  border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.service-details .services-list a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  background-color: color-mix(in srgb, var(--default-color), transparent 96%);
  display: flex;
  align-items: center;
  padding: 12px 15px;
  margin-top: 15px;
  transition: 0.3s;
}

.service-details .services-list a:first-child {
  margin-top: 0;
}

.service-details .services-list a i {
  font-size: 16px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .services-list a.active {
  color: var(--contrast-color);
  background-color: var(--accent-color);
}

.service-details .services-list a.active i {
  color: var(--contrast-color);
}

.service-details .services-list a:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  color: var(--accent-color);
}

.service-details .download-catalog a {
  color: var(--default-color);
  display: flex;
  align-items: center;
  padding: 10px 0;
  transition: 0.3s;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
  border-top: 0;
  padding-top: 0;
}

.service-details .download-catalog a:last-child {
  padding-bottom: 0;
}

.service-details .download-catalog a i {
  font-size: 24px;
  margin-right: 8px;
  color: var(--accent-color);
}

.service-details .download-catalog a:hover {
  color: var(--accent-color);
}

.service-details .help-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  margin-top: 30px;
  padding: 30px 15px;
}

.service-details .help-box .help-icon {
  font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
  color: var(--contrast-color);
}

.service-details .services-img {
  margin-bottom: 20px;
}

.service-details h3 {
  font-size: 26px;
  font-weight: 700;
}

.service-details p {
  font-size: 15px;
}

.service-details ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.service-details ul li {
  padding: 5px 0;
  display: flex;
  align-items: center;
}

.service-details ul i {
  font-size: 20px;
  margin-right: 8px;
  color: var(--accent-color);
}

.content-title-custom-1 p{
  text-align: center;
  position: relative;
  font-size: 18px;
  font-weight: 500;
  font-family: var(--nav-font);
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}

/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
  padding: 30px;
  height: 100%;
}

.blog-posts .post-img {
  max-height: 440px;
  margin: -30px -30px 0 -30px;
  overflow: hidden;
}

.blog-posts .title {
  font-size: 24px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-posts .title a {
  color: var(--heading-color);
  transition: 0.3s;
}

.blog-posts .title a:hover {
  color: var(--accent-color);
}

.blog-posts .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-posts .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-posts .meta-top ul li+li {
  padding-left: 20px;
}

.blog-posts .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-posts .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-posts .content {
  margin-top: 20px;
}

.blog-posts .content .read-more {
  text-align: right;
}

.blog-posts .content .read-more a {
  background: var(--accent-color);
  color: var(--contrast-color);
  display: inline-block;
  padding: 8px 30px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog-posts .content .read-more a:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog-pagination li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-pagination li a.active,
.blog-pagination li a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.blog-pagination li a.active a,
.blog-pagination li a:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content p {
  text-align: justify;
  line-height: 30px;
}

/* .blog-details .content img {
  width: 100%;
} */

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/* Gaya khusus untuk radio button dalam div dengan kelas customradiobutton */
.customradiobutton input[type="radio"] {
  display: none;
}

.customradiobutton label {
  display: inline-block;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  padding-left: 30px;
}

.customradiobutton label::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.customradiobutton label::after {
  content: '\2713';
  font-size: 16px;
  color: white;
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s ease;
}

.customradiobutton input[type="radio"]:checked + label::before {
  background-color: var(--background-blue);
  border-color: var(--background-blue);
}

.customradiobutton input[type="radio"]:checked + label::after {
  opacity: 1;
}

/* Upload Box */
.upload-box {
  border: 2px dashed #ccc;
  width: 100%;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  position: relative;
}

.upload-box input[type="file"] {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-box .upload-icon {
  font-size: 50px;
  color: #ccc;
}

.upload-box .upload-text {
  margin-top: 10px;
  font-size: 18px;
  color: #ccc;
}

.preview-box {
  margin-top: 20px;
  text-align: center;
}

.preview-box img {
  max-width: 100%;
  height: auto;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  width: 120px;
  height: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding: 10px 0;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
  padding-top: 10px;
}

.comment-form form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.comment-form form h4 {
  font-weight: bold;
  font-size: 22px;
}

.comment-form form p {
  font-size: 14px;
}

.comment-form form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.comment-form form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.comment-form form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.comment-form form .form-group {
  margin-bottom: 25px;
}

.comment-form form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.comment-form form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
  padding: 30px;
  margin: 60px 0 30px 0;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

.widget-item:last-child {
  margin-bottom: 0;
}

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
  transition: 0.3s;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.search-widget form:is(:focus-within) {
  border-color: var(--accent-color);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

.tags-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}

/* 2.5. BACKGROUND OVERLAY */
[data-overlay] {
  position: relative;
  z-index: 0;
}

[data-overlay]:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #000;
  -webkit-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
  z-index: -1;
}

[data-overlay~="0"]:before { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; }
[data-overlay~="0.1"]:before { opacity: 0.1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; }
[data-overlay~="0.2"]:before { opacity: 0.2; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)"; }
[data-overlay~="0.3"]:before { opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; }
[data-overlay~="0.4"]:before { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; }
[data-overlay~="0.5"]:before { opacity: 0.5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; }
[data-overlay~="0.6"]:before { opacity: 0.6; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; }
[data-overlay~="0.7"]:before { opacity: 0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; }
[data-overlay~="0.8"]:before { opacity: 0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; }
[data-overlay~="0.9"]:before { opacity: 0.9; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; }
[data-overlay~="1"]:before { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; }

[data-overlay~="lighter"]:before { background-color: #eee; }
[data-overlay~="blue"]:before { background-color: #2bb3c0; }
[data-overlay~="orange"]:before { background-color: #e16123; }
[data-overlay~="green"]:before { background-color: #009378; }
[data-overlay~="red"]:before { background-color: #ff4040; }

.panel[data-overlay] {
  overflow: hidden;
}

/*--------------------------------------------------------------
# Panel
--------------------------------------------------------------*/
.panel[data-overlay] {
  overflow: hidden;
}

/* 5.21. PANEL */
.panel {
  margin-bottom: 30px;
  color: #696969;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .08);
}

.panel-heading {
  color: #393939;
  padding: 10px 20px;
  border-width: 0;
  border-radius: 0;
}

.panel-heading:before,
.panel-heading:after {
  content: " ";
  display: table;
}

.panel-heading:after {
  clear: both;
}

.panel-title {
  float: left;
  margin-top: 3px;
  margin-bottom: 3px;
  font-size: 14px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
  color: #393939;
}

.panel-title select {
  border-width: 0;
  background-color: transparent;
  text-transform: uppercase;
}

.panel-title select option {
  text-transform: capitalize;
}

.panel-title .select2 {
  display: block;
  min-width: 200px;
}

.panel-title .select2-selection {
  height: auto;
  padding: 0;
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  overflow: hidden;
  white-space: nowrap;
}

.no-outlines .panel-title .select2-selection {
  outline: 0;
}

.panel-title .select2-selection .select2-selection__rendered {
  float: left;
  margin-right: 8px;
  padding: 0;
  line-height: inherit;
}

.panel-title .select2-selection .select2-selection__arrow {
  float: left;
  display: block;
  position: relative;
  top: auto;
  right: auto;
  width: auto;
  height: auto;
}

.panel-title .select2-selection .select2-selection__arrow:before {
  content: "\f107";
  font-family: "Font Awesome\ 5 Free";
  font-weight: 700;
}

.panel-title .select2-container--open .select2-selection__arrow:before {
  content: "\f106";
}

.panel-title .select2-selection .select2-selection__arrow b {
  display: none;
}

.panel-heading .dropdown {
  float: right;
}

.panel-heading .dropdown .dropdown-toggle {
  margin: -10px -20px;
  padding: 10px 20px;
  color: #999;
  border-width: 0;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
}

.panel-heading .dropdown .dropdown-toggle:after {
  display: none;
}

.panel-heading .dropdown-menu {
  top: 30px !important;
  left: auto !important;
  right: -20px;
  margin: 0;
  padding: 10px 0;
  border-width: 0;
  border-radius: 4px 0 0 4px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, .08);
  -webkit-transform: none !important;
          transform: none !important;
  z-index: 1001;
}

.panel-heading .dropdown-menu a {
  padding: 5px 15px;
  color: #999;
  font-size: 13px;
  line-height: 23px;
}

.panel-heading .dropdown-menu a:hover {
  color: #e16123;
}

.panel-heading .dropdown-menu i {
  min-width: 15px;
  margin-right: 6px;
  font-size: 11px;
  text-align: center;
}

.panel-subtitle {
  margin: 20px 0;
}

.panel-subtitle:first-child {
  margin-top: 0;
}

.panel-subtitle .h5 {
  color: #999;
  font-weight: 600;
}

.panel-subtitle .h5 small {
  color: #777;
}

.panel-body {
  padding: 20px;
}

.panel-content {
  position: relative;
  padding: 31px 20px 33px;
  border-top: 1px solid #eee;
  border-radius: 0 0 4px 4px;
}

.panel-about table {
  width: 100%;
  word-break: break-word;
}

.panel-about table tr + tr th,
.panel-about table tr + tr td {
  padding-top: 8px;
}

.panel-about table th {
  min-width: 120px;
  color: var(--accent-color);
  font-weight: 400;
  vertical-align: top;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
}

.panel-about table th > i {
  min-width: 14px;
  margin-right: 8px;
  text-align: center;
}

.panel-social {
  position: relative;
  padding: 0 20px 33px;
  border-radius: 0 0 4px 4px;
  z-index: 0;
}

.panel-heading + .panel-social {
  padding-top: 21px;
  border-top: 1px solid #eee;
}

.panel-social > .nav {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
          justify-content: center;
}

.panel-social > .nav > li:not(:last-child) {
  margin-right: 20px;
}

.panel-social > .nav > li > a {
  color: #ccc;
}

.panel-social > .nav > li > a:hover {
  color: #393939;
}

.panel-activity__status > .form-control {
  min-height: 80px;
  padding-top: 15px;
  padding-bottom: 15px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.panel-activity__status > .form-control:not(:focus) {
  border-color: #ccc;
}

.panel-activity__status > .actions {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 10px 20px;
  background-color: #ebebea;
  border-style: solid;
  border-width: 0 1px 1px;
  border-color: #ccc;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

.panel-activity__status > .actions > .btn-group {
  -ms-flex: 1;
      -webkit-box-flex: 1;
          flex: 1;
  font-size: 16px;
}

.panel-activity__status > .actions > .btn-group > .btn-link {
  padding-left: 0;
  padding-right: 0;
  color: #9c9c9c;
}

.panel-activity__status > .actions > .btn-group > .btn-link:hover {
  color: #393939;
}

.panel-activity__status > .actions > .btn-group > .btn-link:not(:last-child) {
  margin-right: 25px;
}

.panel-activity__list {
  position: relative;
  margin: 60px 0 0;
  padding: 0;
  list-style: none;
  z-index: 0;
}
.panel-activity__list:before {
  content: " ";
  display: none;
  position: absolute;
  top: 20px;
  left: 35px;
  bottom: 0;
  border-left: 2px solid #ebebea;
}
.panel-activity__list > li {
  position: relative;
  z-index: 0;
}
.panel-activity__list > li + li {
  margin-top: 51px;
}

.activity__list__icon {
  display: none;
  position: absolute;
  top: 2px;
  left: 0;
  min-width: 30px;
  color: #fff;
  background-color: #2bb3c0;
  border-radius: 50%;
  line-height: 30px;
  text-align: center;
}
.activity__list__header {
  position: relative;
  min-height: 35px;
  padding-top: 4px;
  padding-left: 45px;
  color: #999;
  z-index: 0;
}
.activity__list__header img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 35px;
  border-radius: 50%;
}
.activity__list__header p {
  display: inline-block;
  vertical-align: middle;
}
.activity__list__header a {
  color: #222;
  font-weight: 600;
}
.activity__list__body {
  padding-top: 13px;
  padding-left: 43px;
}
.activity__list__footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  margin-top: 23px;
  margin-left: 43px;
  padding: 13px 8px 0;
  color: #999;
  border-top: 1px dotted #ccc;
}
.activity__list__footer a {
  color: inherit;
}
.activity__list__footer a:hover {
  color: #222;
}
.activity__list__footer a + a {
  margin-left: 15px;
}
.activity__list__footer i {
  margin-right: 8px;
}
.activity__list__footer span {
  margin-left: auto;
}

@media (min-width: 768px) {
  .panel-activity__list {
      padding-left: 20px;
  }

  .panel-activity__list:before {
      display: block;
  }

  .panel-activity__list > li {
      padding-left: 50px;
  }

  .activity__list__icon {
      display: block;
  }
}

/* 1.3. FORM ELEMENTS */
.form-group {
  margin-bottom: 13px;
  margin-bottom: 0.8125rem;
  font-family: var(--nav-font);
}

label {
  display: block;
  margin-bottom: 0;
}
label + label {
  margin-top: 10px;
}
.btn-group > label + label {
  margin-top: 0;
}
.form-inline label + label {
  margin-top: 0;
}

.label-text {
  display: inline-block;
  margin-bottom: 8px;
  color: #696969;
  font-weight: 600;
  font-size: 14px;
}

.form-control {
  height: 40px;
  padding: 8px 20px;
  padding: 0.5rem 1.25rem;
  border-color: #ebebea;
  font-size: 15px;
  box-shadow: none;
  -webkit-transition-duration: .25s;
          transition-duration: .25s;
}
.no-outlines .form-control {
  outline: 0;
}
.form-control:focus {
  border-color: #009378;
  box-shadow: none;
}
.form-control.error {
  border-color: #e16123;
}
.form-control-lg {
  height: 50px;
  padding-top: 11px;
  padding-top: 0.6875rem;
  padding-bottom: 11px;
  padding-bottom: 0.6875rem;
  font-size: 16px;
  line-height: 26px;
}
.form-control-sm {
  height: 34px;
  padding-top: 4px;
  padding-top: 0.25rem;
  padding-bottom: 4px;
  padding-bottom: 0.25rem;
  font-size: 13px;
  line-height: 24px;
}
.form-control-rounded {
  border-radius: 30px;
}

.form-control[type="number"] {
  padding-right: 8px;
  padding-right: 0.5rem;
}

textarea.form-control {
  height: auto;
  min-height: 120px;
}

select {
  cursor: pointer; /* SET POINTER */
}
.no-outlines select {
  outline: 0; /* RESET OUTLINE */
}
select.form-control {
  padding: 8px 15px 9px;
  padding: 0.5rem 0.9375rem 0.5625rem;
}
select.form-control:not([size]):not([multiple]) {
  height: 40px;
}
select.form-control[multiple] {
  min-height: 120px;
  padding: 5px 0;
  padding: 0.3125rem 0;
  overflow: auto;
}
select.form-control option {
  padding: 4px 20px;
  padding: 0.25rem 1.25rem;
}

.form-check,
.form-radio {
  margin-bottom: 0;
  padding-left: 0;
}
.form-check + .form-check,
.form-radio + .form-radio {
  margin-top: 6px;
}
.form-inline .form-check + .form-check,
.form-inline .form-radio + .form-radio {
  margin-top: 0;
}
.form-check-input,
.form-radio-input {
  display: none;
}
.form-check-label,
.form-radio-label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  padding-left: 1.875rem;
  cursor: pointer;
  z-index: 0;
}
.form-check-label:before,
.form-radio-label:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.form-check-label:after,
.form-radio-label:after {
  content: "\f00c";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  color: #fff;
  background-color: #009378;
  border-radius: 2px;
  font-family: "Font Awesome\ 5 Free";
  font-size: 11px;
  line-height: 21px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition: opacity .25s linear, -webkit-transform .25s linear;
  transition: opacity .25s linear, -webkit-transform .25s linear;
  transition: opacity .25s linear, transform .25s linear;
  transition: opacity .25s linear, transform .25s linear, -webkit-transform .25s linear;
}
.form-check-input:checked + .form-check-label:after,
.form-radio-input:checked + .form-radio-label:after {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
          transform: scale(1);
}
.form-radio-label:before,
.form-radio-label:after {
  border-radius: 50%;
}

.custom-checkbox {
  padding-left: 30px;
  padding-left: 1.875rem;
}
.custom-checkbox > .custom-control-indicator {
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 2px;
}
.custom-checkbox > .custom-control-indicator:before {
  content: "\f00c";
  display: block;
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  color: #fff;
  background-color: #009378;
  border-radius: 2px;
  font-family: "Font Awesome\ 5 Free";
  font-size: 11px;
  line-height: 21px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition: opacity .25s linear, -webkit-transform .25s linear;
  transition: opacity .25s linear, -webkit-transform .25s linear;
  transition: opacity .25s linear, transform .25s linear;
  transition: opacity .25s linear, transform .25s linear, -webkit-transform .25s linear;
}
.custom-checkbox > input:checked + .custom-control-indicator:before {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
          transform: scale(1);
}
.custom-checkbox > .custom-control-description {
  cursor: pointer;
}

.custom-file {
  height: 40px;
}
.custom-file-input {
  height: 100%;
  cursor: pointer;
}
.custom-file-label {
  height: 100%;
  padding: 7px 20px;
  padding: 0.4375rem 1.25rem;
  line-height: 24px;
}
.custom-file-label:after {
  height: 100%;
  padding: 7px 20px;
  padding: 0.4375rem 1.25rem;
}

.input-group + .input-group {
  margin-top: 15px;
}
.input-group-text {
  padding-left: 20px;
  padding-left: 1.25rem;
  padding-right: 20px;
  padding-right: 1.25rem;
  color: #fff;
  background-color: #2bb3c0;
  border-color: #2bb3c0;
}
.input-group-text .fa {
  font-size: 14px;
  line-height: 24px;
}

/* 1.4. ICONS */
/* a.star-icon {
  color: #999;
}
a.star-icon:hover,
a.star-icon.is-stared {
  color: #009378;
  background-color: transparent;
}
a.star-icon:before {
  content: "\f005";
  font-family: "Font Awesome\ 5 Free";
  font-size: 12px;
  font-weight: 400;
}
a.star-icon.is-stared:before {
  font-weight: 700;
} */

/*------------------------------------*\
    7. PANELS
\*------------------------------------*/
/* 7.1. MINI STATS PANEL */
.miniStats--panel {
  border-radius: 5px;
}

.miniStats--panel p {
  margin-bottom: 0;
}

.miniStats--header {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding: 25px 20px;
  border-radius: 5px 5px 0 0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

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

.miniStats--label {
  display: inline-block;
  margin-left: auto;
  padding: 0 10px;
  border-radius: 25px;
  font-size: 12px;
  line-height: 25px;
}

.miniStats--body {
  position: relative;
  padding: 31px 20px 30px;
  z-index: 0;
}

.miniStats--icon {
  position: absolute;
  top: 50%;
  right: 10%;
  margin-top: -40px;
  font-size: 80px;
  line-height: 80px;
  opacity: 0.15;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
  z-index: -1;
}

.miniStats--caption {
  font-size: 13px;
  line-height: 23px;
  letter-spacing: 1px;
}

.miniStats--title {
  color: #393939;
  font-weight: 700;
  text-transform: uppercase;
}

.miniStats--num {
  margin-top: 8px;
  font-size: 36px;
  line-height: 46px;
  font-weight: 300;
}

/* 7.2. TODO PANEL */
.todo--panel .list-group {
  position: relative;
  max-height: 314px;
  margin-bottom: 0;
  padding-top: 23px;
  padding-bottom: 25px;
  overflow: auto;
  z-index: 0;
}

.todo--panel .list-group:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 20px;
  right: 20px;
  border-top: 1px solid #eee;
}

.todo--panel .list-group-item {
  margin-top: 27px;
  padding: 0;
  border-width: 0;
}

li.list-group-item:first-child {
  margin-top: 0;
}

.todo--label {
  padding-left: 20px;
  padding-right: 30px;
  color: #696969;
  font-weight: 400;
}

.todo--input {
  display: none;
}

.todo--text {
  display: block;
  position: relative;
  padding-left: 39px;
  -webkit-transition: color .25s;
  transition: color .25s;
  cursor: pointer;
  z-index: 0;
}

.todo--text:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  border: 1px solid #ccc;
  border-radius: 2px;
}

.todo--text:after {
  content: "\f00c";
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -10px;
  width: 20px;
  height: 20px;
  color: #fff;
  background-color: #009378;
  border-radius: 2px;
  font-family: "Font Awesome\ 5 Free";
  font-size: 11px;
  line-height: 21px;
  font-weight: 700;
  text-align: center;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transform: scale(0.3);
          transform: scale(0.3);
  -webkit-transition: opacity .25s linear, -webkit-transform .25s linear;
  transition: opacity .25s linear, -webkit-transform .25s linear;
  transition: opacity .25s linear, transform .25s linear;
  transition: opacity .25s linear, transform .25s linear, -webkit-transform .25s linear;
}

.todo--input:checked + .todo--text {
  color: #999;
  text-decoration: line-through;
}

.todo--input:checked + .todo--text:after {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  -webkit-transform: scale(1);
          transform: scale(1);
}

.todo--remove {
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -15px;
  color: #999;
  font-size: 18px;
  line-height: 28px;
}

.todo--panel .input-group {
  border-top: 1px solid #eee;
}

.todo--panel .form-control {
  height: auto;
  padding: 13px 20px 14px;
  border-width: 0;
}

.todo--panel .btn-link {
  padding: 12px 16px;
  color: #ccc;
  font-size: 28px;
  border-width: 0;
}

.todo--panel .ps__rail-x,
.todo--panel .ps__rail-y {
  z-index: 1;
}

.todo--extras .fa {
  margin-left: 15px;
  font-size: 16px;
  line-height: 22px;
}

.todo--date {
  margin-left: 15px;
  white-space: nowrap;
}

.todo--actions {
  margin-left: 10px;
  padding-left: 10px;
}

.todo--actions > .fa {
  cursor: pointer;
}

.todo--filter {
  padding-left: 20px;
  font-size: 20px;
  line-height: 30px;
}

/* 7.3. WEATHER PANEL */
.weather--panel {
  padding: 24px 20px 36px;
  border-radius: 5px;
  text-align: center;
}

.weather--title {
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
}

.weather--title .fa {
  margin-right: 5px;
  font-size: 30px;
  line-height: 40px;
}

.weather--info {
  margin-top: 14px;
  font-size: 46px;
  line-height: 56px;
}

.weather--info .wi {
  margin-right: 10px;
}

/* 7.4. PROFILE PANEL */
.profile--panel {
  text-align: center;
}

.profile--panel .img-wrapper {
  padding: 75px 0 0;
  background-size: 100% 150px;
  background-position: top center;
  border-radius: 5px 5px 0 0;
}

.profile--panel .img {
  position: relative;
  max-width: 150px;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid #fff;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
  z-index: 0;
}

.profile--panel .img:before {
  content: " ";
  position: absolute;
  right: 11px;
  bottom: 11px;
  width: 15px;
  height: 15px;
  background-color: #2bb3c0;
  border: 3px solid #fff;
  border-radius: 50%;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  -webkit-transition: opacity .35s;
  transition: opacity .35s;
}

.profile--panel .img.online:before {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.profile--panel .name {
  margin-top: 17px;
}

.profile--panel .name .h3 {
  color: #393939;
  font-weight: 400;
}

.profile--panel .role {
  margin-top: 2px;
  font-size: 16px;
  line-height: 26px;
}

.profile--panel .action {
  padding-top: 13px;
  padding-bottom: 30px;
}

.profile--panel .action .btn {
  padding: 7px 30px;
  font-size: 16px;
  line-height: 26px;
}

.profile--panel .bio {
  padding: 1px 20px 23px;
}

.profile--panel .info {
  padding: 10px 20px 30px;
  font-size: 20px;
  line-height: 30px;
}

.profile--panel .info li {
  -ms-flex-preferred-size: 0;
               flex-basis: 0;
  -ms-flex-positive: 1;
          flex-grow: 1;
  max-width: 100%;
  padding: 5px 15px;
}

.profile--panel .info li:not(:last-child) {
  border-style: solid;
  border-width: 0 1px 0 0;
  border-color: #ebebea;
}

.profile--panel .info strong {
  color: #e16123;
  font-weight: 600;
}

.profile--panel .info span {
  display: block;
  color: #696969;
  font-weight: 300;
}

@media (max-width: 450px) {
  .profile--panel .info li {
      width: 100%;
      flex-basis: auto;
  }
  
  .profile--panel .info li:not(:last-child) {
      border-width: 0 0 1px;
  }
}

/* 7.5. FEEDS PANEL */
.feeds-panel {
  margin: 20px 20px 0;
  padding-top: 17px;
  padding-bottom: 23px;
  border-top: 1px solid #ebebea;
}

.feeds-panel li {
  position: relative;
  width: 100%;
  min-height: 20px;
  padding-left: 40px;
  z-index: 0;
}

.feeds-panel li:before,
.feeds-panel li:after {
  content: " ";
  display: table;
}

.feeds-panel li:after {
  clear: both;
}

.feeds-panel li + li {
  margin-top: 12px;
}

.feeds-panel .fa {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 30px;
  border-radius: 2px;
  font-size: 12px;
  line-height: 30px;
  text-align: center;
}

.feeds-panel .text {
  color: #696969;
  line-height: 26px;
}

.feeds-panel .time {
  float: right;
  margin-left: 5px;
  color: #ccc;
  font-style: italic;
}

.feeds-panel li a {
  color: #e16123;
}

/* 7.6. COMMENTS PANEL */
.comments-panel > ul {
  margin: 0;
  padding: 20px 20px 30px;
  list-style: none;
}

.comments-panel > ul > li {
  position: relative;
  padding: 12px 20px 20px 0;
  z-index: 0;
}

.comments-panel > ul > li:before,
.comments-panel > ul > li:after {
  content: " ";
  display: table;
}

.comments-panel > ul > li:after {
  clear: both;
}

.comments-panel > ul > li + li {
  margin-top: -1px;
}

.comments-panel .img {
  float: left;
  margin-right: 15px;
  max-width: 40px;
  border: 2px solid #ebebea;
  border-radius: 50%;
}

.comments-panel .img:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  bottom: 0;
  border: 1px solid #ebebea;
  z-index: -1;
}

.comments-panel .info {
  overflow: hidden;
}

.comments-panel .h6 {
  margin-bottom: 4px;
  color: #393939;
  font-weight: 600;
}

.comments-panel .action {
  margin-top: 13px;
}

.comments-panel .action:before,
.comments-panel .action:after {
  content: " ";
  display: table;
}

.comments-panel .action:after {
  clear: both;
}

.comments-panel .status {
  float: left;
}

.comments-panel .btn {
  float: right;
  padding-top: 1px;
  padding-bottom: 1px;
}

.comments-panel .nav {
  display: block;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  margin-top: -12px;
  padding: 0 20px 17px;
  font-size: 12px;
  line-height: 22px;
  font-weight: 600;
  text-transform: uppercase;
  overflow: hidden;
}

.comments-panel .nav .prev {
  float: left;
}

.comments-panel .nav .next {
  float: right;
}

.comments-panel .nav .next .fa {
  margin-left: 3px;
}

/* 3.3. MORRIS CHART */
.morris-hover.morris-default-style {
  padding: 7px 20px 11px;
  background-color: rgba(255, 255, 255, 0.95);
  border-width: 0;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
  -webkit-transition: top .35s linear, left .35s linear;
  transition: top .35s linear, left .35s linear;
}

.morris-hover.morris-default-style .morris-hover-row-label {
  font-size: 14px;
  font-weight: 400;
}

.morris-hover.morris-default-style .morris-hover-point + div {
  margin-top: -4px;
}

/*------------------------------------*\
  8. CHARTS
\*------------------------------------*/
/* 8.1. CHART TITLE */
.chart--title {
  margin-top: 17px;
  margin-bottom: 18px;
}

.chart--title .h2 {
  font-family: "Montserrat", sans-serif;
  text-align: center;
}

/* 8.2. CHART STATS */
.chart--stats {
  padding: 10px 0;
  border-top: 1px solid #d9d9d9;
}

.chart--stats .nav > li {
  margin: 10px 25px;
  padding: 0px 0 2px 29px;
  text-align: left;
}

.chart--stats .nav > li:before {
  top: 5px;
  bottom: 5px;
  width: 15px;
  border-radius: 2px;
}

.chart--stats .amount {
  margin-bottom: 3px;
  color: #393939;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
}

.chart--stats .label {
  margin-right: 8px;
  padding: 0;
  color: #999;
  font-size: 14px;
  line-height: 24px;
  font-weight: 400;
}

.chart--stats .label + span {
  white-space: nowrap;
}

.chart--stats .fa {
  margin-right: 6px;
}

.chart--stats.style--2 .nav > li {
  padding-left: 0;
}

.chart--stats.style--2 p[data-overlay] {
  padding-left: 20px;
}

.chart--stats.style--2 p[data-overlay]:before {
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
}

.chart--stats.style--3 {
  padding: 1px 0 10px;
  border-top-width: 0;
}

.chart--stats.style--3 .nav > li {
  margin-left: 0;
  margin-right: 15px;
}

.chart--stats.style--3 p {
  margin-bottom: 0;
}

.chart--stats.style--3 p[data-trigger="sparkline"] {
  margin-bottom: 7px;
}

.chart--stats.style--4 {
  color: #696969;
  margin-top: 7px;
  padding: 0 20px 23px;
  border-top-width: 0;
  text-align: left;
}

.chart--stats.style--4 .nav {
  display: block;
}

.chart--stats.style--4 .nav > li {
  display: block;
  position: relative;
  margin: 0;
  padding: 0 0 0 23px;
  overflow: hidden;
}

.chart--stats.style--4 .nav > li:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 0;
  bottom: auto;
  width: 9px;
  height: 9px;
  margin-top: -5px;
  border: 1px solid #ff4040;
  border-radius: 50%;
}

.chart--stats.style--4 .nav > li + li {
  margin-top: 9px;
}

.chart--stats.style--4 .nav > li > .stat {
  float: right;
  margin-left: 10px;
  color: #2bb3c0;
  clear: both;
}

@media screen and (max-width: 1199px) {
  .chart--stats .nav > li {        
      -ms-flex-preferred-size: 0;
      flex-basis: 0;
      -ms-flex-positive: 1;
      flex-grow: 1;
  }
}

/* 8.4. LINE CHART */
.line--chart {
  margin-top: -4px;
  padding: 0 0 5px 6px;
  height: 324px;
}

.line--chart.style--2 {
  height: 200px;
}

.line--chart.style--3 {
  height: 204px;
}

.line--chart.style--4 {
  position: relative;
  height: auto;
  margin: 17px 20px 0;
  padding: 0 0 17px;
  z-index: 0;
}

.line--chart.style--4:before {
  content: " ";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 20px;
  border: 1px solid #ebebea;
  z-index: -1;
}

/* 8.5. AREA CHART */
.area--chart {
  margin-top: -4px;
  padding: 0 0 5px 6px;
}

.area--chart.style--1 {
  height: 240px;
}

.area--chart.style--2 {
  height: 340px;
}

/* 8.6. SPARKLINE CHART */
.jqstooltip{
  box-sizing: content-box;
}

/* 8.7. CHART ACTION */
.chart--action {
  padding: 3px 20px 18px;
}

/* SUb Text */
.sub-text h3{
  color: #ffffff;
  margin: 10px 0 0 0;
  font-size: 25px;
  font-weight: 700;
  font-family: var(--heading-font);
}

.sub-title {
  position: relative;
  padding-left: 15px; /* Adjust this value based on the size of the box you want */
}

.sub-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 25px;
  background-color: #debd1f;
  box-sizing: border-box;
  border-radius: 5px;
}

/* Form Group */