body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #101010;
}

/* Navbar Styles */
.navbar {
  background: transparent;
  padding: 20px 0;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 10;
  transition: background-color 0.3s ease, transform 0.3s ease, -webkit-backdrop-filter 0.3s ease;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, transform 0.3s ease;
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, transform 0.3s ease, -webkit-backdrop-filter 0.3s ease;
}

.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.navbar .logo img {
  height: 35px;
  margin-left: -30px;
}

.navbar .navbar-nav {
  display: flex;
  /* Flexbox for horizontal layout */
  list-style: none;
  /* Remove bullet points */
  gap: 20px;
  /* Space between items */
  margin: 0 auto;
  /* Center the menu */
  flex-grow: 1;
  /* Allow the menu to grow and fill space */
  justify-content: center;
  /* Center items horizontally */
}

.navbar .menu {
  display: flex;
  justify-content: center;
  /* Mengatur horizontal rata tengah */
  align-items: center;
  /* Mengatur vertikal rata tengah */
  flex-grow: 1;
  margin-bottom: -20px;
  /* Membuat menu mengisi ruang di antara logo dan tombol */
}

.navbar .menu ul {
  display: flex;
  list-style: none;
  gap: 20px;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fff;
}

.navbar-dark .navbar-nav .nav-link:hover {
  font-weight: bold;
  color: #2447f9;
}

.nav-link.active {
    color: #2447f9 !important;
    /* Warna teks saat aktif */
    font-weight: bold;
}

.navbar .menu ul li a {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  font-weight: 500;
}

.navbar .btn-container {
  display: flex;
  align-items: center;
}

.navbar .btn-primary {
  background-color: #2447f9;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

.btn-primary:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}

.navbar.scrolled {
  margin-top: 0 !important;
  background-color: rgba(21, 21, 21, 0.8);
  /* Warna hitam dengan transparansi */
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  /* Efek blur */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  /* Efek bayangan lebih gelap */
}

@media (max-width: 991px) {
  .navbar .navbar-nav {
    margin-top: 10px;
    gap: 5px;
    background-color: transparent;
    /* Background dengan transparansi */
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
  }
  .logo img {
    margin-left: 0 !important;
  }
}
@media (max-width: 360px) {
  .logo img {
    margin-left: -7px !important;
    width: 90%;
  }
}
.mega-menu {
  display: none !important;
  margin-top: 0 !important;
  border: none;
  opacity: 0;
  padding: 30px;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 20px;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  width: 1200px;
  max-width: 50%;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #1E1E1E;
}

.mega-menu.show {
  display: block !important;
  opacity: 1;
  visibility: visible;
}

.mega-menu-container {
  display: flex;
  gap: 30px;
}

.column-left-mega {
  flex: 5;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.mega-left-content {
  position: relative;
  height: 400px;
  width: 100%;
}

.mega-left-bg-image {
  position: absolute;
  top: 0;
  border-radius: 25px;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 1;
}

.mega-left-overlay {
  position: absolute;
  top: 0;
  border-radius: 25px;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  z-index: 2;
}

.mega-left-text {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 30px;
  color: white;
  z-index: 3;
}

.mega-left-text h4 {
  font-size: 16px;
  margin-bottom: 10px;
  color: #47bb8e;
  font-weight: bold;
}

.mega-left-text h2 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
}

.mega-left-text p {
  font-size: 14px;
  line-height: 1.6;
}

.mega-right-column {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  flex: 1 !important;
}

.mega-menu-services {
  width: 100% !important;
  max-width: 100% !important;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 0 !important;
}

.mega-menu-item {
  width: 100% !important;
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 15px;
  transition: background-color 0.3s ease;
}

.mega-menu-icon {
  min-width: 60px;
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

.mega-menu-text {
  flex: 1;
  width: calc(100% - 75px) !important;
}

.mega-menu-item:hover {
  background: linear-gradient(to right, #151515, #2447f9);
}

.mega-menu-text:hover h3 {
  color: #fff;
  cursor: pointer;
}

.mega-menu-text:hover p {
  color: #999aa4 !important;
}

.mega-menu-icon {
  width: 60px;
  /* Lebar tetap */
  aspect-ratio: 1/1;
  /* Menjamin proporsi 1:1 untuk bentuk lingkaran */
  border-radius: 50%;
  /* Membuatnya berbentuk lingkaran */
  background-color: #f6f8fd;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* Hindari konten keluar dari lingkaran */
}

.mega-menu-icon:hover {
  background-color: #2447f9;
}

.mega-menu-icon img {
  width: 30px;
  height: 30px;
}

.mega-menu-text a {
  text-decoration: none;
}

.mega-menu-text h3 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #fff;
}

.mega-menu-text h3:hover {
  color: #fff;
}

.mega-menu-text p {
  font-size: 14px;
  color: #666;
}

/* Mobile Styles (up to 767px) */
@media (max-width: 767px) {
  .mega-menu {
    position: fixed;
    top: 60px;
    left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: calc(50vh - 60px);
    transform: none !important;
    margin: 0;
    padding: 15px;
    border-radius: 20px;
    overflow-y: auto;
  }
  .mega-menu-container {
    width: 100% !important;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }
  /* Hide left column completely */
  .column-left-mega,
  .mega-left-content,
  .mega-left-bg-image,
  .mega-left-overlay,
  .mega-left-text {
    display: none !important;
  }
  .col-5.mega-right-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    flex: 0 0 100% !important;
  }
  .mega-menu-services {
    width: 100% !important;
    padding: 10px !important;
  }
  .mega-menu-item {
    width: 100% !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  .mega-menu-icon {
    min-width: 45px !important;
    width: 45px !important;
    height: 45px !important;
    margin-right: 12px !important;
  }
  .mega-menu-icon img {
    width: 24px !important;
    height: 24px !important;
  }
  .mega-menu-text {
    width: calc(100% - 57px) !important;
  }
  .mega-menu-text h3 {
    font-size: 16px !important;
    margin-bottom: 4px !important;
  }
  .mega-menu-text p {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
}
/* Tablet Styles (768px to 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .mega-menu {
    position: fixed;
    top: 60px;
    left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    height: calc(45vh - 60px);
    transform: none !important;
    margin: 0;
    padding: 20px;
    border-radius: 10px;
    overflow-y: auto;
  }
  .mega-menu-container {
    width: 100% !important;
    flex-direction: column !important;
    gap: 0;
    padding: 0;
  }
  /* Hide left column completely */
  .column-left-mega,
  .mega-left-content,
  .mega-left-bg-image,
  .mega-left-overlay,
  .mega-left-text {
    display: none !important;
  }
  .col-5.mega-right-column {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    flex: 0 0 100% !important;
  }
  .mega-menu-services {
    width: 100% !important;
    padding: 15px !important;
  }
  .mega-menu-item {
    width: 100% !important;
    padding: 15px !important;
    margin-bottom: 10px !important;
  }
  .mega-menu-icon {
    min-width: 50px !important;
    width: 50px !important;
    height: 50px !important;
    margin-right: 15px !important;
  }
  .mega-menu-icon img {
    width: 26px !important;
    height: 26px !important;
  }
  .mega-menu-text {
    width: calc(100% - 65px) !important;
  }
  .mega-menu-text h3 {
    font-size: 17px !important;
    margin-bottom: 5px !important;
  }
  .mega-menu-text p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  /* Fix Bootstrap column behavior */
  .d-flex {
    width: 100% !important;
  }
}
.header-section {
  background: url("../images/bg-header.webp") no-repeat center center/cover;
  height: 80vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.header-section .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.1));
  z-index: 1;
}

.header-section .container {
  position: relative;
  z-index: 2;
}

.header-section .header-content {
  max-width: 600px;
  margin: 0 auto;
}

.header-section h1 {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
}

.header-section p {
  font-size: 18px;
  margin-bottom: 40px;
}

.header-section .search-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-section .search-container input {
  width: 400px;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid;
  border-color: #525252;
  color: #fff;
  outline: none;
  background-color: #191919;
  font-size: 16px;
  margin-right: -40px;
  z-index: 3;
}

.header-section .search-container button {
  padding: 10px 20px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  z-index: 4;
}

.header-section .search-container button i {
  font-size: 18px;
  margin-left: -20px;
  color: #525252;
}

.header-section .search-container input:focus {
  box-shadow: 0 0 0 0.25rem rgba(36, 71, 249, 0.4);
  transition: all 0.4s;
}

@media (max-width: 768px) {
  .header-content {
    padding: 0 10px;
  }
  .search-container {
        padding: 0 10px;
    }
  .header-content h1 {
    font-size: 40px;
  }
}
/* Category Section Styles */
.category-section {
  padding: 60px 0;
}

.title-cateogry {
  margin-bottom: 40px;
  color: #fff;
  background-color: #101010;
}

.title-cateogry h1 {
  font-weight: bold;
  font-size: 30px;
}

.category-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 30px;
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.category-card {
  background-color: #1E1E1E;
  border-radius: 15px;
  padding: 20px;
  text-align: left;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
  align-items: flex-start;
}

.category-card:hover {
  transform: translateY(-5px);
  border-color: #2447f9;
  /* Ganti warna border saat hover */
  transition: all 0.4s;
}

.category-card img.icon-category {
  width: 50px;
  height: 50px;
  margin-bottom: 15px;
}

.category-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: bold;
  color: #fff;
}

.category-card p {
  font-size: 12px;
  color: #777;
}

/* Responsive for smaller screens */
@media (max-width: 992px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .category-section {
    padding: 0 5px;
  }
  .title-cateogry {
    margin-top: 40px;
    margin-left: 10px;
  }
}
@media (max-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .category-grid {
    grid-template-columns: 1fr;
  }
}
/* Product Section Styles */
.product-section {
  padding: 60px 0;
}

.product-section.get-free {
  padding: 120px 0;
}

.product-grid a {
  text-decoration: none;
}

.title-products-header {
  margin-bottom: 40px;
  color: #fff;
  background-color: #101010;
}

.title-products-header.product-details {
  margin-top: 100px;
  margin-bottom: 20px;
  color: #fff;
  background-color: #101010;
}

.title-products-header h1 {
  font-weight: bold;
  font-size: 30px;
}

.product-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card {
  background-color: #1E1E1E;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.product-card .product-title {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 1.2em;
}

.product-card .product-title:hover {
  -webkit-line-clamp: unset;
  height: auto;
}

/* Wrapper untuk tooltip */
.tooltip-wrapper {
  position: relative;
  display: inline-block;
  line-height: 20px;
  margin-left: -15px;
  bottom: -5px;
}

.tooltip-wrapper.detail {
    position: relative;
    display: inline-block;
    line-height: 20px;
    margin-left: 5px;
    bottom: 0;
}

/* Style lingkaran untuk ikon */
.tooltip-icon {
  width: 30px;
  height: 30px;
  background-color: rgba(15, 244, 126, 0.231372549);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tooltip-icon img {
  width: 18px;
  height: 18px;
}

@keyframes ttp {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
  }
}
.tooltip-icon {
  animation: ttp 1.5s infinite;
}

/* Tooltip content (tersembunyi secara default) */
.tooltip-content {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* ✅ Batasi lebar maksimum agar tidak terlalu besar */
  max-width: 250px;
  width: -moz-max-content;
  width: max-content;
  word-wrap: break-word;
  /* ✅ Biarkan teks wrap jika panjang */
}

.tooltip-content.detail {
  position: absolute;
  bottom: 40px;
  left: 100%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  z-index: 10;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  /* ✅ Batasi lebar maksimum agar tidak terlalu besar */
  max-width: 250px;
  width: -moz-max-content;
  width: max-content;
  word-wrap: break-word;
  /* ✅ Biarkan teks wrap jika panjang */
}

/* Heading di dalam tooltip */
.tooltip-content h2 {
  font-size: 16px !important;
  color: #0ff47e !important;
  font-weight: bold;
}

/* Text di dalam tooltip */
.tooltip-content p {
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  line-height: 1.4;
}

/* Efek muncul saat hover */
.tooltip-wrapper:hover .tooltip-content {
  opacity: 1;
  visibility: visible;
}

.tooltip-wrapper:hover .tooltip-icon {
  background-color: rgba(15, 244, 126, 0.231372549);
}

/*.tooltip-icon.package {*/
/*  display: inline-block;*/
/*  position: absolute;*/
/*  cursor: pointer;*/
/*  margin-left: -15px;*/
/*  z-index: 1000 !important;*/
  /* Ensure tooltip is above other elements */
/*}*/

/* Icon style with circle background */
/*.icon-img.package {*/
/*  display: inline-block;*/
/*  width: 20px;*/
/*  height: 20px;*/
/*  background-color: rgba(15, 244, 126, 0.231372549);*/
  /* Circle background color */
/*  border-radius: 50%;*/
  /* Circle shape */
/*  color: #0ff47e;*/
  /* Icon color */
/*  font-size: 12px;*/
/*  text-align: center;*/
/*  line-height: 20px;*/
  /* Vertically center text */
/*  cursor: pointer;*/
/*  position: relative;*/
/*}*/

/* Tooltip text */
/*.tooltip-text.package {*/
/*  display: none;*/
/*  position: absolute;*/
/*  top: -90px;*/
/*  left: -100px !important;*/
/*  background-color: #fff;*/
  /* White background */
/*  color: #333;*/
  /* Dark text color */
/*  padding: 15px;*/
  /* Padding around text */
/*  border-radius: 8px;*/
  /* Rounded border */
/*  font-size: 12px;*/
/*  margin-top: 8px;*/
/*  font-weight: 500 !important;*/
/*  z-index: 1000 !important;*/
/*  width: 250px;*/
/*  box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;*/
  /* Optional: Shadow for tooltip */
  /* Set a maximum width for long text */
/*  white-space: normal;*/
  /* Allows text to wrap onto the next line */
/*  word-wrap: break-word;*/
/*}*/

/*.tooltip-text.package h1 {*/
/*  font-size: 16px;*/
/*  font-weight: bold;*/
/*  margin-bottom: 10px;*/
/*  color: #0ff47e;*/
/*}*/

/* Show tooltip on hover */
/*.tooltip-icon.package:hover .tooltip-text.package {*/
/*  display: block;*/
/*}*/

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  width: 100%;
  height: auto;
  display: block;
}

.product-card h3 {
  font-size: 20px;
  margin: 15px 20px 5px;
  color: #fff;
  font-weight: bold;
}

.product-card .badge {
  background: linear-gradient(90deg, #2447f9, #8a8ff9);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 12px;
  margin: 0 20px 15px;
  display: inline-block;
}

.product-card .product-details {
  display: flex;
  align-items: center;
  padding: 0 20px 20px;
}

.product-card .author-image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.product-card h4 {
  font-size: 14px;
  color: #555;
}

/* Price Tag Styles */
.price-tag {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 8px 12px;
  border-radius: 10px;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.old-price {
  text-decoration: line-through;
  color: #f65d6d;
  font-weight: 600;
  margin-right: 5px;
  animation: blink 1s infinite;
}

.old-price.detail {
  text-decoration: line-through;
  color: #f65d6d;
  font-weight: 600;
  margin-right: 5px;
  animation: blink 1s infinite;
}

.old-price.checkout {
  text-decoration: line-through;
  color: #f65d6d;
  font-weight: 600;
  margin-right: 5px;
  animation: blink 1s infinite;
}

.old-price.course {
  text-decoration: line-through;
  color: #f65d6d;
  font-weight: 600;
  margin-right: 5px;
  animation: blink 1s infinite;
}

.new-price {
  font-weight: bold;
  color: rgb(255, 255, 255);
}

/* Responsive for smaller screens */
@media (max-width: 992px) {
  .product-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .product-section {
    padding: 0 10px;
  }
  .product-section.get-free {
    padding: 40px 10px;
  }
  .title-products-header {
    margin-top: 50px;
  }
}
@media (max-width: 768px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 576px) {
  .product-grid {
    grid-template-columns: 1fr;
  }
}
.tools-section {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  text-align: center;
  margin-top: -60px;
}

/* Title and Description */
.project-info {
  margin-bottom: 50px;
  text-align: left;
  padding: 0 70px;
}

.project-title {
  font-size: 30px;
  color: #fff;
  font-weight: bold;
  padding: 0 25px;
}

.project-description {
  font-size: 20px;
  color: #333;
}

/* Card Container - Scrolling Effect */
.project-carousel {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 30px;
}

.card-container {
  display: flex;
  justify-content: flex-start;
  animation: scroll-left 20s linear infinite;
  /* Horizontal Scrolling Animation */
  white-space: nowrap;
  /* Ensure cards stay in one row */
}

.card-image {
  width: 100px;
  /* Set a fixed width for the image */
  height: auto;
  /* Maintain aspect ratio */
  padding: 10px;
  /* Padding around image */
  border-radius: 10px;
  /* Rounded corners for image */
}

.card-container {
  display: flex;
  justify-content: flex-start;
  animation: scroll-left 20s linear infinite;
  /* Horizontal Scrolling Animation */
  white-space: nowrap;
  /* Ensure cards stay in one row */
}

/* Horizontal Scrolling Animation */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* Second Row with Different Scroll Behavior (Reverse Scroll) */
.project-carousel.reverse .card-container {
  animation: scroll-right 25s linear infinite;
  /* Slower, opposite direction */
}

@keyframes scroll-right {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
.tool-card {
  display: flex;
  align-items: center;
  border-radius: 10px;
  background-color: #1E1E1E;
  border: 2px solid transparent;
  width: calc(30.333% - 20px);
  padding: 25px 25px;
  /* Agar ada 3 card per baris */
  box-sizing: border-box;
  margin-right: 20px;
}

.tool-card:hover {
  border-color: #2447f9;
  /* Ganti warna border saat hover */
  transition: all 0.4s;
}

.tools-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 1.5rem 0;
}

.tool-card.course {
  display: flex;
  align-items: center;
  border-radius: 10px;
  background-color: #1E1E1E;
  border: 2px solid transparent;
  padding: 20px;
  min-width: 250px;
  flex: 0 0 auto;
  box-sizing: border-box;
  transition: all 0.4s;
  cursor: pointer;
}

.tool-card.course:hover {
  border-color: #2447f9;
  transform: translateY(-5px);
}

.tool-image {
  width: 60px;
  /* Lebar gambar */
  height: auto;
  border-radius: 10px;
  margin-right: 15px;
}

.tool-info {
  display: flex;
  flex-direction: column;
  margin-bottom: -20px;
}

.tool-title {
  margin: 0;
  text-align: left;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
}

.tool-title.course {
  margin: 0;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.tool-description {
  margin-top: 5px;
  text-align: left;
  font-size: 14px;
  color: #666;
}

@media (min-width: 820px) {
  .project-title {
    margin-left: -25px;
  }
}
@media (min-width: 800px) {
  .project-title {
    margin-left: -25px;
  }
}
@media (max-width: 991px) {
  .tools-section {
    margin-top: 0;
  }
  .project-title {
    padding: 0 10px;
  }
  .tool-card {
    width: calc(50% - 20px);
    /* Tampilkan 2 card per baris pada tablet */
  }
  .tool-info {
    margin-bottom: -20px;
  }
  .tool-image {
    width: 70px;
    /* Sesuaikan ukuran gambar pada tablet */
  }
  .tool-title {
    font-size: 0.9em;
    /* Sesuaikan ukuran teks pada tablet */
    padding-bottom: 5px;
  }
  .tool-description {
    margin-top: 0;
    font-size: 0.7em;
    /* Sesuaikan ukuran teks pada tablet */
  }
}
/* Responsif untuk Tablet (768px ke bawah) */
@media (max-width: 768px) {
  .category-cars-section {
    padding: 0 30px;
  }
  .cars-container {
    padding: 0 20px;
  }
  .tool-card {
    width: calc(50% - 20px);
    /* Tampilkan 2 card per baris pada tablet */
  }
  .tool-info {
    margin-bottom: -20px;
  }
  .tool-image {
    width: 70px;
    /* Sesuaikan ukuran gambar pada tablet */
  }
  .tool-title {
    font-size: 0.9em;
    /* Sesuaikan ukuran teks pada tablet */
    padding-bottom: 5px;
  }
  .tool-description {
    margin-top: 0;
    font-size: 0.7em;
    /* Sesuaikan ukuran teks pada tablet */
  }
}
/* Responsif untuk Mobile (480px ke bawah) */
@media (max-width: 480px) {
  .category-cars-section {
    padding: 0 15px;
  }
  .tool-card {
    width: 100%;
    /* Tampilkan 1 card per baris pada mobile */
    margin-bottom: 20px;
    /* Beri ruang antar card */
  }
  .tool-image {
    width: 60px;
    /* Sesuaikan ukuran gambar pada mobile */
  }
  .tool-title {
    font-size: 0.85em;
    /* Sesuaikan ukuran teks pada mobile */
  }
  .tool-description {
    font-size: 0.65em;
    /* Sesuaikan ukuran teks pada mobile */
  }
}
/* Responsive adjustments for mobile */
@media (max-width: 768px) {
  .project-title {
    font-size: 28px;
  }
  .project-description {
    font-size: 16px;
  }
  .card {
    width: 250px;
  }
  .project-info {
    padding: 0 40px;
    margin-top: -50px;
  }
}
.project-carousel:hover .card-container {
  animation-play-state: paused;
  /* Pause the animation */
}

/* Detail Products Section Styles */
.detail-products {
  padding: 110px 0;
}

.detail-products .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.detail-products .badge {
  background: linear-gradient(90deg, #2447f9, #8a8ff9);
  color: #fff;
  font-size: 14px;
  padding: 5px 15px;
  border-radius: 20px;
  display: inline-block;
  margin-bottom: 15px;
}

.detail-products h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #fff;
  font-weight: bold;
}

.main-image-card {
  background-color: transparent;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 40px;
}

/*.product-full-image {*/
/*  width: 100%;*/
/*  height: auto;*/
/*}*/

/* Floating Effect - Base Styles */
.product-full-image {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  will-change: transform, width, opacity, position;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating Effect - Active State */
.product-full-image.floating {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 400px;
  height: auto;
  z-index: 999;
  transform: translateY(0);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  opacity: 0.95;
  transition: all 0.5s cubic-bezier(0.2, 0, 0.4, 1);
}

/* Entry animation for floating state */
.product-full-image.floating {
  animation: floatIn 0.4s cubic-bezier(0.2, 0, 0.4, 1);
}

@keyframes floatIn {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 0.95;
  }
}
/* Exit animation when returning to normal */
.product-full-image.reset {
  position: static;
  width: 100%;
  transform: scale(1);
  opacity: 1;
  box-shadow: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add hover effect for better UI feedback */
.product-full-image.floating:hover {
  opacity: 1;
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.row {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  /* Selaraskan item di bagian atas */
}

.col-8 {
  flex-basis: 66.66%;
  /* Agar kartu kiri mengambil 8 kolom */
}

.col-4 {
  flex-basis: 33.33%;
  /* Agar kartu kanan mengambil 4 kolom */
}

.left-card {
  background-color: #1E1E1E;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 25px;
  overflow: hidden;
}

.right-card {
  background-color: #1E1E1E;
  border-radius: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 25px;
  margin-top: -100px;
  border: 2px solid;
  margin-left: auto;
  border-color: #2447f9;
  /* Agar menempel ke kanan */
  width: 100%;
  /* Lebar penuh sesuai kolomnya */
  max-width: 100%;
}

.desc-right-card {
  color: #d9d9d9;
}

.divider-right-card {
  color: #fff;
}

.left-card h2 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #fff;
  font-weight: bold;
}

.right-card h2 {
  font-size: 30px;
  margin-bottom: 15px;
  color: #fff;
  font-weight: bold;
}

.left-card p {
  font-size: 16px;
  color: #d9d9d9;
  line-height: 1.6;
  margin-bottom: 20px;
}

.tools-list {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  /* Membungkus elemen agar tetap berada dalam baris saat space tidak cukup */
}

.tools-list img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  /* Menjaga proporsi gambar agar tidak terpotong */
}

.right-card .feature-list {
  margin-bottom: 20px;
}

.feature-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.feature-item img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}

.feature-item p {
  font-size: 14px;
  color: #d9d9d9;
}

.btn-checkout {
  width: 100%;
  padding: 15px;
  background-color: #2447f9;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-checkout:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .detail-products {
    margin: 0 8px;
  }
  .detail-products h1 {
    font-size: 26px;
  }
  .product-full-image.floating {
        display: none;
  }
  .row {
    flex-direction: column;
  }
  .col-8,
  .col-4 {
    flex-basis: 100%;
  }
  .right-card {
    margin-top: 0;
  }
  .right-card h2 {
    font-size: 26px;
  }
}
/* Container for the entire section */
.checkout-container {
  display: flex;
  justify-content: space-between;
  padding: 0 150px;
  margin-bottom: 150px;
  margin-top: 150px;
}

.content-checkout-left {
  position: relative;
  transition: top 0.7s ease;
}

.details-checkout {
  background-color: #1e1e1e;
  padding: 20px;
  height: 100%;
  margin-top: -30px;
  border-radius: 0 0 20px 20px;
}

.meta-detail-checkout {
  margin-top: 20px;
}

.checkout-left,
.checkout-right {
  width: 48%;
}

.checkout-left h2 {
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}

/* Left column content */
.product-image-checkout {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 10px;
}

.product-image-checkout.course {
  width: 100%;
  border-radius: 20px;
  margin-bottom: 10px;
  /*margin-top: -260px;*/
}

.title_products {
  margin-top: 10px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.badge {
  background: linear-gradient(90deg, #2447f9, #8a8ff9);
  color: white;
  padding: 5px 10px;
  display: inline-block;
  margin-top: 10px;
}

.profile-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 15px;
}

.profile-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 10px;
}

.profile-name {
  font-size: 16px;
  color: #fff;
  margin-right: auto;
}

.price {
  font-size: 30px;
  color: #2447f9;
  font-weight: bold;
  text-align: right;
  margin-left: auto;
}

/* Right column content */
.checkout-card {
  padding: 25px;
  background-color: #101010;
  margin-top: 10px;
  border: 3px dashed;
  border-radius: 20px;
  border-color: #1E1E1E;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
}

.checkout-card p {
  color: #d9d9d9;
  font-weight: 500;
}

.checkout-card .promo-code {
  display: flex;
  justify-content: start;
  align-items: center;
}

.checkout-card .promo-code input {
  width: 400px;
  padding: 10px 20px;
  border-radius: 50px;
  border: 1px solid;
  border-color: #525252;
  color: #fff;
  outline: none;
  background-color: #191919;
  font-size: 16px;
  margin-right: -40px;
  z-index: 3;
}

.checkout-card .promo-code button {
  padding: 10px 20px;
  border-radius: 50%;
  border: none;
  background-color: transparent;
  color: white;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  z-index: 4;
}

.checkout-card .promo-code button i {
  font-size: 18px;
  margin-left: -20px;
  color: #525252;
}

.checkout-card .promo-code input:focus {
  box-shadow: 0 0 0 0.25rem rgba(36, 71, 249, 0.4);
  transition: all 0.4s;
}

.checkout-card h3 {
  margin-bottom: 25px;
  color: #fff;
  font-weight: bold;
  font-size: 20px;
}

.header-special-promo {
  font-size: 16px !important;
  color: #17b837 !important;
  /* Menambahkan bayangan */
}

.patungan-explanation {
  display: flex;
  /* Menjadikan elemen di dalamnya sejajar horizontal */
  align-items: center;
  /* Membuat elemen sejajar secara vertikal */
  gap: 12px;
  /* Memberi jarak antar elemen */
  background-color: #1e1e1e;
  /* Warna background */
  padding: 16px;
  /* Jarak dalam elemen */
  border-radius: 8px;
  margin-bottom: 25px;
  /* Membuat sudut elemen melengkung */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Menambahkan bayangan lembut */
}

.patungan-img {
  width: 50px;
  /* Ukuran lebar gambar */
  height: 50px;
  /* Ukuran tinggi gambar */
  -o-object-fit: contain;
     object-fit: contain;
  /* Menjaga proporsi gambar */
}

.patungan-content {
  display: flex;
  flex-direction: column;
}

.patungan-title {
  font-size: 16px !important;
  font-weight: bold;
  color: #fff;
  margin-bottom: 4px;
}

.patungan-desc {
  font-size: 14px;
  font-weight: 200 !important;
  color: #555;
  margin: 0;
}

/* Responsive Email Participant Styling */
.email-participant-container {
  position: relative;
  margin-bottom: 1rem;
  width: 100%;
}

.email-participant-input {
  width: 50%;
  padding: 0.75rem;
  padding-right: 2.5rem;
  font-size: 16px;
  /* Prevents auto-zoom on iOS */
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.current-user-email-container {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}

.current-user-email-input {
  width: 100%;
  padding-right: 2.5rem;
  padding: 24px 20px;
  border-radius: 50px;
  border: 1px solid;
  border-color: #525252;
  color: #fff;
  outline: none;
  background-color: #191919 !important;
  font-size: 16px;
  margin-right: -40px;
  cursor: not-allowed;
}

.current-user-email-icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  color: #28a745;
}

.email-participant-icon {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  z-index: 10;
}

.email-participant-icon.failed {
  position: absolute;
  top: 35%;
  right: 0.75rem;
  transform: translateY(-50%);
  width: 1.25rem;
  height: 1.25rem;
  z-index: 10;
}

.email-participant-error {
  color: #dc3545;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

/* Patungan Explanation Responsive */
.patungan-explanation {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.patungan-img {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}

.patungan-content {
  flex-grow: 1;
}

/* Mobile-specific adjustments */
@media (max-width: 576px) {
  .checkout-right {
    padding: 0;
  }
  .product-image-checkout.course {
    width: 100%;
    border-radius: 20px;
    margin-bottom: 10px;
    /*margin-top: -170px;*/
  }
  .patungan-explanation {
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
  .patungan-img {
    width: 2.5rem;
    height: 2.5rem;
  }
  .email-participant-input {
    font-size: 16px;
    /* Prevents auto-zoom on iOS */
    padding: 0.625rem;
  }
  .email-participant-icon {
    width: 1rem;
    height: 1rem;
    right: 0.5rem;
  }
  .patungan-note p {
    font-size: 0.875rem;
  }
}
/* Accessibility and interaction improvements */
.email-participant-input:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.email-participant-input.is-valid {
  border-color: #28a745;
}

.email-participant-input.is-invalid {
  border-color: #dc3545;
}

/* Additional styling for consistent look */
.patungan-info .promo-code {
  margin-bottom: 0.5rem;
}

/* Checkout info layout */
.checkout-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.checkout-item {
  display: flex;
  justify-content: space-between;
}

.checkout-item.added {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}

.checkout-item h4 {
  margin: 0;
  color: #d9d9d9;
  font-size: 18px;
}

.checkout-item .text-green {
  color: rgba(7, 225, 36, 0.7568627451);
}

.total .text-blue {
  color: #2447f9;
}

.total h4 {
  font-weight: bold;
}

/* Button styling */
.btn-rounded {
  width: 100%;
  border-radius: 30px;
  padding: 15px;
  margin-top: 30px;
  font-weight: 700;
  background-color: #2447f9;
  color: white;
  font-size: 18px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.btn-rounded:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}

/* Untuk profil (gambar dan nama) */
.profile-info {
  display: flex;
  align-items: center;
}

/* Responsive for tablet (width up to 768px) */
@media (max-width: 992px) {
  .checkout-section {
    padding: 8px;
  }
  .checkout-container {
    flex-direction: column;
    padding: 0 50px;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .checkout-left,
  .checkout-right {
    width: 100%;
    margin-bottom: 10px;
  }
  .profile-section {
    flex-direction: row;
    align-items: center;
  }
  .profile-info {
    display: flex;
    align-items: center;
  }
  .profile-img {
    width: 30px;
    /* Perbesar gambar di tablet */
    height: 30px;
  }
  .price {
    font-size: 28px;
    margin-left: 0;
    text-align: left;
  }
  #scrolling-card {
    position: relative;
    /* Change to relative for normal flow */
    margin: 0 auto;
    /* Center the card if needed */
    width: 100%;
    top: 0 !important;
    /* Ensure it takes full width on smaller screens */
    max-width: 100%;
  }
  #scrolling-card-check {
    position: relative;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    /* Smooth easing with slightly longer duration */
    will-change: transform, position, top;
    /* Optimize performance */
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
  }
}
/* Responsive for mobile (width up to 480px) */
@media (max-width: 480px) {
  .checkout-container {
    padding: 0 20px;
    margin-top: 80px;
    margin-bottom: 70px;
  }
  .checkout-left h2,
  .checkout-right h3 {
    font-size: 18px;
  }
  .title_products {
    font-size: 18px;
  }
  .price {
    font-size: 24px;
  }
  .checkout-card h3 {
    font-size: 20px;
  }
  .checkout-item h4 {
    font-size: 14px;
  }
  .btn-rounded {
    font-size: 16px;
    padding: 8px;
  }
}
/* Promo Banner Styles */
.promo-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg,
            rgba(255, 105, 180, 0.8) 0%,
            /* Pink */
            rgba(147, 51, 234, 0.8) 50%,
            /* Purple */
            rgba(32, 28, 243, 0.8) 100%
            /* Blue */
        );
    /* Warna hitam dengan transparansi */
    backdrop-filter: blur(10px);
    color: white;
    padding: 20px 50px;
    position: relative;
    z-index: 1000;
    width: 100%;
}

.promo-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promo-img {
  width: auto;
  height: 70px;
  -o-object-fit: cover;
     object-fit: cover;
}

.promo-text {
  font-size: 16px;
  text-align: center;
  margin-bottom: -1px;
  padding: 0 30px;
  font-weight: 700;
  line-height: 1.5;
}

.promo-button {
  background-color: #2447f9;
  color: white;
  padding: 10px 20px;
  border: none;
  font-weight: bold;
  border-radius: 50px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.promo-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}

/* Responsive Design */
@media (max-width: 768px) {
  .promo-banner {
    flex-wrap: wrap;
    text-align: center;
  }
  .promo-content {
    justify-content: center;
    margin-bottom: 10px;
  }
  .promo-button {
    display: none;
  }
}
@media (max-width: 480px) {
  .promo-text {
    font-size: 14px;
  }
  .promo-img {
    width: 40px;
    height: 40px;
  }
  .promo-button {
    display: none;
  }
}
.terms-condition {
  display: flex;
  align-items: center;
  margin-top: 15px;
  /* Space between payment and terms section */
}

.terms-condition input[type=radio] {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  accent-color: #2447f9;
  /* Blue circle color for radio button */
  border-radius: 50%;
  /* Makes the radio button circular */
  cursor: pointer;
}

.terms-condition p {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #d9d9d9;
}

.terms-condition p a {
  text-decoration: none;
  font-weight: bold;
  color: #2447f9;
  /* Link color */
  cursor: pointer;
}

#terms-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.terms-card {
  width: 1000px important;
  /* Pastikan ini menggantikan aturan lain */
  max-width: 100% !important;
  border-radius: 50px !important;
  overflow: hidden;
  border: none;
  background-color: #fff;
  display: grid;
  padding: 20px;
  padding-left: 30px;
  padding-right: 30px;
  height: 550px !important;
}

.terms-content {
  padding: 20px;
  overflow-y: auto;
  max-height: 500px;
  /* Limits the height of the scrollable area */
  margin-top: 10px;
  /* Hilangkan scrollbar */
  scrollbar-width: none;
  /* Firefox */
}

/* Hilangkan scrollbar di WebKit (Chrome, Safari) */
.terms-content::-webkit-scrollbar {
  display: none;
}

.terms-content h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
}

.subtitle-primary {
  font-size: 14px;
  text-align: center;
}

.terms-content p {
  margin-bottom: 1em;
  line-height: 1.5;
}

.list-terms {
  margin-top: 30px !important;
}

.text-left-terms {
  margin-bottom: 40px !important;
}

.text-left-terms h2 {
  text-align: left !important;
}

/* For tablet devices (screen width less than or equal to 768px) */
@media (max-width: 768px) {
  .terms-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    /* Adjust height for better responsiveness */
    margin-top: -40px;
  }
  .terms-image {
    display: none;
    /* Hide the image on tablets and smaller devices */
  }
  .terms-content {
    padding: 20px;
    justify-content: flex-start;
    /* Adjust padding and content alignment for smaller screens */
  }
  .rounded-input {
    padding: 15px;
    /* Adjust input padding for smaller screens */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    width: 100%;
    /* Full width buttons on mobile/tablet */
    margin: 10px 0;
    /* Add margin between buttons */
  }
  .close-button-popup {
    display: none;
  }
}
@media (min-width: 769px) {
  .terms-card {
    width: 800px;
    border-radius: 35px;
    overflow: hidden;
    border: none;
    margin-top: 100px;
    height: 550px;
    background-color: white;
    display: grid;
    margin: 60px;
  }
}
@media (min-width: 800px) and (max-width: 834px) {
  .close-button-popup {
    display: none;
  }
}
/* For mobile devices (screen width less than or equal to 576px) */
@media (max-width: 576px) {
  .terms-card {
    width: 90%;
    /* Make the card narrower for small screens */
    height: auto;
    padding: 20px;
    /* Adjust margin for mobile */
  }
  .terms-content {
    padding: 15px;
    /* Reduce padding on mobile */
  }
  .rounded-input {
    padding: 12px;
    /* Further reduce input padding for mobile */
  }
  .btn-login,
  .btn-register {
    padding: 10px;
    font-size: 14px;
    /* Adjust button font size */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    margin: 8px 0;
    /* Tighter spacing between buttons */
  }
}
.redirect-notif {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  text-align: center;
  background: linear-gradient(to right, #101010);
  padding: 20px;
}

.icon-container {
  margin-bottom: 20px;
}

.icon-container img {
  width: 200px;
  height: auto;
  margin: 20px;
}

/* Card Styles */
.well-card {
  background: linear-gradient(to right, #151515, #1d2d79);
  border-radius: 0 50px 0 50px;
  padding: 40px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-width: 500px;
  width: 100%;
}

.icon-wrapper {
  margin-bottom: 20px;
}

.icon-image-card-well {
  width: 50px !important;
}

.title-well {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 20px;
  color: #fff;
}

/* Booking Code Input Styles */
.booking-code-input {
  position: relative;
  margin-bottom: 20px;
}

.input-icon-well {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.input-field.well-done {
  width: 100%;
  padding: 15px 15px 15px 175px;
  /* Padding kiri secukupnya untuk memberi ruang bagi placeholder */
  border-radius: 30px;
  background-color: #151515;
  border: 1px solid #333;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  outline: none;
}

.input-field.well-done::-moz-placeholder {
  color: #999;
}

.input-field.well-done::placeholder {
  color: #999;
}

.floating-placeholder {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #999;
  pointer-events: none;
  transition: 0.2s ease all;
}

/* Saat input memiliki nilai, pindahkan placeholder */
.input-field.well-done:not(:-moz-placeholder-shown) + .floating-placeholder {
  top: 5px;
  left: 55px;
  font-size: 12px;
  color: #333;
}
.input-field.well-done:not(:placeholder-shown) + .floating-placeholder,
.input-field.well-done:focus + .floating-placeholder {
  top: 5px;
  left: 55px;
  font-size: 12px;
  color: #333;
}

/* Geser value ke sebelah placeholder */
.input-field.well-done {
  text-align: left;
  /* Tetap kiri */
}

/* Description Text */
.description-well {
  font-size: 16px;
  color: #d9d9d9;
  margin-bottom: 30px;
}

/* Button Styles */
.btn-full-width {
  display: block;
  width: 100%;
  padding: 15px;
  background-color: #2447f9;
  color: white;
  border: none;
  border-radius: 30px;
  font-size: 18px;
  cursor: pointer;
  font-weight: bold;
}

.btn-full-width:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}

@media (max-width: 768px) {
  h1 {
    font-size: 20px;
  }
  .notification-card {
    width: 100%;
    padding: 15px;
  }
}
.head-tips {
  max-width: 750px;
  margin: 120px 0 0 80px;
  text-align: left;
}

.header-tips h1 {
  font-size: 2rem;
  margin-bottom: 5px;
  text-align: left;
  color: #fff;
  font-weight: bold;
}

.header-tips p {
  font-size: 1rem;
  color: #d9d9d9;
  text-align: left;
}

.view-count {
  display: flex;
  align-items: center;
  color: #ffffff;
  gap: 4px;
}

.search-box {
  display: flex;
  gap: 10px;
  margin: 20px 0;
}

.search-box input {
  flex: 1;
  padding: 13px;
  border-radius: 25px;
  border: 1px solid #525252;
  background-color: #191919;
  color: #fff;
  outline: none;
  /* outline: none; */
}

.search-box input:focus {
  box-shadow: 0 0 0 0.25rem rgba(36, 71, 249, 0.4);
  transition: all 0.4s;
}

.search-box button {
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  font-weight: bold;
  cursor: pointer;
  background-color: #2447f9;
  color: white;
  font-size: 1rem;
}

.search-box button.search:hover {
  box-shadow: 0 0 0 0.25rem rgba(36, 71, 249, 0.4);
  transition: all 0.4s;
}

.search-box button.reset:hover {
  box-shadow: 0 0 0 0.25rem rgba(249, 61, 36, 0.4);
  transition: all 0.4s;
}

.search-box button.reset {
  background-color: #dc3545;
}

.category-wrapper {
  position: relative;
}

.category-list {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  padding: 10px 0;
  white-space: nowrap;
  scrollbar-width: none;
  mask-image: linear-gradient(to right, transparent, white 5%, white 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, white 5%, white 90%, transparent);
}

.category-list a {
  text-decoration: none;
  padding: 8px 15px;
  background-color: rgba(36, 71, 249, 0.4);
  color: white;
  border-radius: 20px;
  font-size: 0.9rem;
  display: inline-block;
}

.category-list a.active {
  background-color: #2447f9;
}

.category-list a:hover {
  background-color: #2447f9;
  transition: all 0.4s;
}

.tips-item {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 20px;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.tips-item img {
  width: 190px;
  height: 130px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}

.tips-content {
  flex: 1;
}

.tips-content h2 {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  margin: 0 0 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tips-content p {
  font-size: 16px;
  color: #666;
  font-family: "Georgia", sans-serif;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.divider-tips {
  color: #333;
}

.round-pagination {
  display: flex;
  justify-content: start;
  align-items: start;
  gap: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.round-pagination ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  gap: 10px;
}

.round-pagination li {
  display: inline;
}

.round-pagination a {
  text-decoration: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 50%;
  background: #e5e9f2;
  color: #333;
  font-weight: bold;
  display: inline-block;
}

.round-pagination a:hover {
  box-shadow: 0 0 0 0.25rem rgba(36, 71, 249, 0.4);
  transition: all 0.4s;
}

.round-pagination a.active {
  background: #2447f9;
  color: white;
}

.round-pagination a.active:hover {
  box-shadow: 0 0 0 0.25rem rgba(36, 71, 249, 0.4);
  transition: all 0.4s;
}

.round-pagination .dots {
  padding: 8px 12px;
  color: #999;
  font-weight: bold;
}

@media (max-width: 1024px) {
  .head-tips {
    margin: 80px 20px 0;
    max-width: 100%;
  }
  .search-box {
    flex-direction: column;
  }
  .search-box input {
    width: 100%;
  }
  .search-box button {
    width: 100%;
    text-align: center;
  }
  .category-list {
    gap: 10px;
  }
  .tips-item {
    margin-bottom: -20px;
  }
  .tips-item img {
    width: 125px;
    height: 90px;
  }
  .tips-content h2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}
@media (max-width: 768px) {
  .head-tips {
    margin: 120px 15px 0;
  }
  .search-box {
    gap: 5px;
  }
  .category-list {
    gap: 8px;
  }
  .tips-item {
    flex-direction: column;
    /* Stack image and content vertically */
    align-items: flex-start;
    /* Align items to the start */
    margin-bottom: 8px;
    /* Adjust margin */
    padding: 10px;
    width: 100%;
    /* Ensure full width */
    box-sizing: border-box;
    /* Include padding in width calculation */
  }
  .tips-item img {
    width: 100%;
    /* Full width image */
    height: auto;
    /* Maintain aspect ratio */
    margin-bottom: 10px;
    /* Space between image and content */
    border-radius: 20px;
    max-height: 250px;
    /* Prevent extremely tall images */
    -o-object-fit: cover;
       object-fit: cover;
  }
  .tips-content {
    width: 100%;
    /* Ensure full width */
    overflow: hidden;
    /* Prevent horizontal overflow */
    word-break: break-word;
    /* Additional overflow protection */
  }
  .tips-content h2 {
    font-size: 18px;
    word-wrap: break-word;
    /* Wrap long words */
    overflow-wrap: break-word;
    /* Another method to prevent overflow */
  }
  .tips-content p {
    font-size: 14px;
    word-wrap: break-word;
    /* Wrap long words */
    overflow-wrap: break-word;
    /* Another method to prevent overflow */
  }
  .round-pagination {
    justify-content: center;
  }
  .round-pagination a {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 14px;
  }
}
/* Additional mobile-friendly adjustments for smaller screens */
@media (max-width: 480px) {
  .tips-item {
    padding: 5px;
  }
  .tips-content h2 {
    font-size: 16px;
  }
  .tips-content p {
    font-size: 13px;
  }
  /* Ensure scrollbar is hidden on mobile */
  .category-list {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }
  .category-list::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, and Opera */
  }
}
.container-tutorial-content {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  height: 100vh;
  /* Pastikan seluruh tinggi viewport dipakai */
  margin: auto;
  margin-top: 0;
  /* Hilangkan margin agar sesuai viewport */
  padding: 20px;
  overflow: hidden;
  /* Mencegah scrolling container utama */
}

.tutorial-content {
  flex: 3;
  padding: 20px;
  border-radius: 10px;
  max-height: 100vh;
  /* Tentukan tinggi maksimum */
  overflow-y: auto;
  scrollbar-width: none;
  /* Tambahkan scrolling */
}

.tutorial-header {
  margin-top: 50px;
}

.tutorial-header h1 {
  font-size: 2rem;
  color: #fff;
  font-weight: bold;
  margin-bottom: 10px;
}

.tutorial-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0;
  margin-bottom: 10px;
}

.published {
  margin-bottom: 0;
  color: #fff;
}

.tutorial-meta img {
  width: 24px;
  height: 24px;
}

.tutorial-image img {
  max-width: 100%;
  border-radius: 30px;
}

.content.font-georgia {
  font-family: "Georgia", serif;
  color: #d9d9d9;
  font-size: 20px;
  line-height: 1.6;
  margin-top: 25px;
}

.content.font-georgia img {
  max-width: 100%;
  width: auto;
  height: auto;
  font-size: 13px;
  border-radius: 20px;
  display: block;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
  max-height: 400px;
  /* Sesuaikan tinggi maksimal */
}

.content.font-georgia pre {
  background-color: #1e1e1e;
  /* Warna latar belakang mirip code editor */
  color: #ffffff;
  /* Warna teks agar kontras */
  padding: 15px;
  border-radius: 8px;
  overflow-x: auto;
  /* Agar bisa di-scroll jika terlalu panjang */
  font-family: "Courier New", monospace;
  /* Gunakan font monospace */
  white-space: pre;
  /* Mencegah kode terpotong atau dipadatkan */
}

.content.font-georgia code {
  font-size: 14px;
  font-family: "Courier New", monospace;
  display: block;
  line-height: 1.5;
  /* Menambah keterbacaan */
  word-wrap: break-word;
  /* Mencegah teks keluar layar */
}

.content.font-georgia h1,
.content.font-georgia h2,
.content.font-georgia h3,
.content.font-georgia h4,
.content.font-georgia h5,
.content.font-georgia h6 {
  font-weight: bold;
}

.content.font-georgia a {
  color: #2447f9;
  cursor: pointer;
  text-decoration: none;
}

.sidebar-category {
  flex: 0.75;
  border-left: 5px solid #2447f9;
  padding: 20px;
  border-radius: 10px;
  margin-left: 20px;
  max-height: 100vh;
  /* Tentukan tinggi maksimum */
  overflow-y: auto;
  scrollbar-width: none;
  /* Tambahkan scrolling */
}

.category__list {
  margin-top: 50px;
  padding-left: 50px;
  margin-right: 0;
}

/* .content-list-category {
                padding: 0 0 0 15px;
            } */
.sidebar-category img {
  display: block;
  width: 170px;
  margin: 0 auto 20px;
}

.sidebar-category h2 {
  text-align: start;
  color: #fff;
  margin-top: 50px;
  font-size: 20px;
  margin-bottom: 15px;
}

.sidebar-category ul {
  list-style: none;
  padding: 0;
}

.sidebar-category li {
  margin-bottom: 10px;
}

.sidebar-category a {
  text-decoration: none;
  color: #d9d9d9;
}

.other-articel {
  margin-top: 50px;
  margin-bottom: -10px;
  color: #fff;
}

.header-other {
  font-size: 24px;
  margin-bottom: -15px;
  font-weight: bold;
}

.header-other.editor {
  color: #fff;
  margin-top: 35px;
  font-size: 24px;
  margin-bottom: -10px;
  font-weight: bold;
}

.tips-item.other {
  margin-left: -10px;
}

/* Container utama */
.content-editor {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  padding-left: 0;
  border-radius: 10px;
  max-width: 600px;
  margin: 20px 0;
  /* Menghapus auto centering */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Avatar styling */
.editor-avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
  border: 2px solid #2447f9;
}

/* Info penulis */
.editor-info {
  display: flex;
  flex-direction: column;
}

.editor-name {
  font-size: 1.2rem;
  font-weight: bold;
  color: #fff;
}

.editor-description {
  font-size: 0.9rem;
  color: #666;
}

/* Responsive untuk mobile */
@media (max-width: 480px) {
  .content-editor {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px;
  }
  .editor-avatar {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 992px) {
  /* Untuk Tablet dan Mobile */
  .container-tutorial-content {
    flex-direction: column;
    height: 100vh;
    padding: 15px;
  }
  .tutorial-content {
    flex: 1;
    max-width: 100%;
    height: 100vh;
    padding: 15px;
  }
  .sidebar-category {
    display: none;
    /* Sembunyikan sidebar pada mobile dan tablet */
  }
  .tutorial-header {
    margin-top: 20px;
  }
  .tutorial-header h1 {
    font-size: 1.8rem;
    text-align: center;
  }
  .tutorial-meta {
    justify-content: center;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  .tutorial-image img {
    border-radius: 20px;
  }
  .content.font-georgia {
    font-size: 18px;
    margin-top: 15px;
    text-align: justify;
  }
}
@media (max-width: 576px) {
  /* Untuk Mobile */
  .tutorial-header h1 {
    font-size: 1.5rem;
    text-align: center;
  }
  .tutorial-meta {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .tutorial-content {
    padding: 10px;
    font-size: 16px;
  }
  .content.font-georgia {
    font-size: 16px;
    line-height: 1.5;
  }
}
/* Floating WhatsApp Button */
.floating-whatsapp {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: #1cca42;
  color: white;
  padding: 10px 15px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  z-index: 10 !important;
}

.floating-whatsapp h4 {
  font-size: 14px;
  margin-bottom: 0;
}

.floating-whatsapp:hover {
  background-color: #17b837;
}

.floating-whatsapp img {
  width: 24px;
  height: 24px;
}

.floating-popup {
  position: fixed;
  bottom: 80px;
  right: 20px;
  width: 300px;
  max-height: 70vh;
  /* Batasi tinggi maksimum agar tidak melebihi layar */
  background: white;
  border-radius: 30px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease-in-out;
  z-index: 100;
  padding-bottom: 60px;
}

.floating-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px;
  background: #fff;
  color: #000;
}

.floating-header img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.floating-message {
  background: #f5f5f5;
  padding: 30px;
  flex-grow: 1;
  overflow-y: auto;
  /* Tambahkan scroll jika konten terlalu panjang */
}

.message-container {
  position: relative;
  background: white;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 12px;
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  margin-left: -5px;
  /* Make space for the bubble tail */
}

.message-container::before {
  content: "";
  position: absolute;
  left: -10px;
  /* Position the tail outside the bubble */
  top: 10px;
  /* Position from the top */
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-right: 10px solid white;
  /* Create triangle pointing left */
}

.message-container strong {
  color: #333;
}

.button-message-container {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: center;
  padding: 15px;
  background: white;
  border-radius: 0 0 30px 30px;
  /* Menyamakan dengan border popup */
}

.button-message-container a {
  display: inline-block;
  padding: 10px 15px;
  font-size: 12px;
  background: #1cca42;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: bold;
  transition: background 0.3s ease-in-out;
}

.button-message-container a:hover {
  background: #17b837;
}

.floating-close {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #1cca42;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  display: none;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  z-index: 100;
}

.floating-close img {
  width: 24px;
  height: 24px;
}

.footer {
  background: linear-gradient(135deg, #181818 0%);
  color: white;
  padding: 4rem 2rem 2rem;
  position: relative;
  overflow: hidden;
  margin-top: 100px;
}

.footer-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 24px;
  background-size: cover;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.footer-column h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 3px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.footer-column:hover h3::after {
  width: 100%;
}

.footer-column ul li a:hover {
  color: white;
  transform: translateX(5px);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-column li {
  margin-bottom: 0.8rem;
}
.footer-column a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  position: relative;
  padding-left: 0;
  /* Remove any default padding */
}
.footer-column a:hover {
  color: #ffffff;
}
.footer-column h3 {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  position: relative;
  display: inline-block;
  padding-left: 0;
  /* Ensure h3 aligns with list items */
}
.footer-column img {
  width: 170px;
  margin-bottom: 20px;
}

.newsletter-form {
  position: relative;
  margin-top: 1rem;
}

.newsletter-form input {
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  padding: 12px 20px;
  width: 100%;
  color: white;
  outline: none;
  transition: all 0.3s ease;
}

.newsletter-form input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.newsletter-form input:focus {
  background-color: rgba(255, 255, 255, 0.2);
  border-color: white;
}

.newsletter-form button {
  position: absolute;
  right: 5px;
  top: 5px;
  background: white;
  color: #2e3192;
  border: none;
  border-radius: 30px;
  padding: 7px 15px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.3s ease;
}

.newsletter-form button:hover {
  background: #eaf8ff;
  transform: scale(1.05);
}

.social-icons {
  display: flex;
  gap: 15px;
  margin-top: 1.5rem;
}

.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  background-color: white;
  color: #2447F9;
  transform: translateY(-5px);
}

.social-icons .tooltip-trigger {
  position: relative;
}

.social-icons .tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin-bottom: 8px;
}

.social-icons .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.social-icons .tooltip-trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.footer-logo-container {
  width: 100%;
  padding: 2rem 0;
  text-align: center;
  margin-top: 3rem;
}
.footer-logo-container .footer-bottom-logo {
  width: 100%;
  max-width: 1200px;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.footer-logo-container .footer-bottom-logo:hover {
  opacity: 1;
}

.footer-bottom {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
  color: white;
  text-decoration: none;
}

@media (max-width: 768px) {
  .footer {
    padding: 3rem 1.5rem 1.5rem;
  }
  .footer-content {
    grid-template-columns: 1fr;
  }
}
.register {
  min-height: 100vh;
  width: 100%;
  background-color: #101010;
}
.register .register-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  min-height: 100vh;
}
.register .register-container .register-left {
  grid-column: span 4;
  background-image: url("../images/login.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.register .register-container .register-right {
  grid-column: span 6;
  padding: 2rem 4rem;
  background-color: #101010;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.register .register-container .register-right .logo-container {
  margin-bottom: 2rem;
}
.register .register-container .register-right .logo-container .logo {
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
}
.register .register-container .register-right .register-header {
  margin-bottom: 2rem;
}
.register .register-container .register-right .register-header h2 {
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  margin-bottom: 0.5rem;
}
.register .register-container .register-right .register-header p {
  color: #d9d9d9;
  font-size: 1rem;
}
.register .register-container .register-right .register-card {
  background-color: #1E1E1E;
  border-radius: 30px;
  padding: 2rem;
}
.register .register-container .register-right .register-card .register-form .form-group {
  margin-bottom: 1.5rem;
}
.register .register-container .register-right .register-card .register-form .form-group .form-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.5rem;
}
.register .register-container .register-right .register-card .register-form .form-group .form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #525252;
  color: #fff;
  background-color: #1e1e1e;
  border-radius: 20px;
  font-size: 1rem;
  transition: all 0.3s ease;
}
.register .register-container .register-right .register-card .register-form .form-group .form-input:focus {
  outline: none;
  border-color: #2447F9;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(36, 71, 249, 0.1);
}
.register .register-container .register-right .register-card .register-form .form-group .form-input::-moz-placeholder {
  color: #525252;
}
.register .register-container .register-right .register-card .register-form .form-group .form-input::placeholder {
  color: #525252;
}
.register .register-container .register-right .register-card .register-form .btn-register {
  width: 100%;
  padding: 0.75rem;
  background-color: #2447F9;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-weight: bold;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.register .register-container .register-right .register-card .register-form .btn-register:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}
.register .register-container .register-right .register-card .register-form .btn-register.login {
  width: 100%;
  padding: 0.75rem;
  background-color: #101010;
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-weight: bold;
  margin-bottom: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}
.register .register-container .register-right .register-card .register-form .btn-register.login:hover {
  background-color: #d9d9d9;
  box-shadow: 0 0 0 0.25rem rgba(221, 221, 221, 0.231372549) !important;
  color: #333;
  transition: all 0.4s;
}
.register .register-container .register-right .register-card .register-form .btn-login {
  width: 100%;
  padding: 0.75rem;
  background-color: #E5E9F2;
  color: #374151;
  border: none;
  border-radius: 9999px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}
.register .register-container .register-right .register-card .register-form .btn-login:hover {
  background-color: #d4dbea;
  transform: translateY(-1px);
}

@media screen and (max-width: 1024px) {
  .register .register-container .register-right {
    padding: 2rem;
  }
}
@media screen and (max-width: 768px) {
  .register .register-container {
    grid-template-columns: 1fr;
  }
  .register .register-container .register-left {
    display: none;
  }
  .register .register-container .register-right {
    grid-column: span 12;
    padding: 1.5rem;
  }
  .register .register-container .register-right .register-header {
    text-align: center;
  }
  .register .register-container .register-right .register-header h2 {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 480px) {
  .register .register-container .register-right {
    padding: 1rem;
  }
  .register .register-container .register-right .logo-container {
    text-align: center;
  }
  .register .register-container .register-right .register-header h2 {
    font-size: 1.5rem;
  }
  .register .register-container .register-right .register-card {
    padding: 1.5rem;
  }
}
.close-button-popup {
  position: absolute;
  top: 80px;
  /* Adjusts distance from top of the card */
  right: 250px;
  /* Adjusts distance from right side of the card */
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #F4F6F8;
  color: #333;
  border: none;
  font-size: 24px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, color 0.3s;
  z-index: 1002;
  /* Ensure button is above other elements */
}

/* Hover effect for close button */
.close-button-popup:hover {
  box-shadow: 0 0 0 0.25rem rgba(221, 221, 221, 0.231372549) !important;
  transition: all 0.4s;
  /* Changes icon color on hover */
}

#login-popup {
  display: none;
  /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1001;
}

.login-card {
  width: 1000px;
  border-radius: 50px !important;
  overflow: hidden;
  border: none;
  margin-top: 100px;
  height: 550px !important;
  background-color: #1e1e1e !important;
  display: grid;
}

.card-form-login {
  background-color: #1e1e1e !important;
  border-radius: 20px;
  padding: 30px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 50px;
  /* Adds a shadow to create depth */
}

.login-image {
  background-image: url("../images/login.webp") !important;
  background-size: cover;
  background-position: center;
  height: 100%;
  margin-right: 60px;
  /* Full height of the parent grid item */
  width: 35%;
  /* Ensure full width of the grid column */
}

.logo-img-login {
  width: 50%;
  height: 50%;
  margin-bottom: 20px;
}

.title-login {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 20px;
}

.label-password {
  color: #fff;
}

.label-email {
  color: #fff;
}

.desc-login {
  margin-bottom: 30px;
}

.login-content {
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-content .form-group label {
  font-weight: 700;
}

.rounded-input {
  border-radius: 20px;
  border: 1px solid #525252;
  padding: 25px;
  background-color: #1e1e1e !important;
}

.rounded-input:hover {
  background-color: #1e1e1e !important;
}

.rounded-input:focus {
  outline: none;
  border-color: #2447F9;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(36, 71, 249, 0.1);
}

.divider-login-popup {
  color: #525252;
}

.forgot-password {
  display: block;
  text-align: right;
  margin-bottom: 15px;
  text-decoration: none !important;
  color: #999aa4;
}

.forgot-password:hover {
  font-weight: 500;
  color: #999aa4;
}

.btn-login {
  display: block;
  margin: 20px;
}

.action-buttons {
  display: flex;
  flex-direction: column;
}

.login-button,
.register-button {
  padding: 12px;
  background-color: #2447f9;
  /* Adjust button colors */
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}

.login-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
}

.register-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(221, 221, 221, 0.231372549) !important;
  transition: all 0.4s;
}

.btn-dark.google {
  background-color: #34364a;
  padding: 12px;
  /* Adjust button colors */
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  /* To align icon and text properly */
  align-items: center;
  /* Center icon and text vertically */
  justify-content: center;
  /* Center the content inside the button */
}

.google-icon {
  width: 20px;
  /* Adjust size of the icon */
  height: auto;
  margin-right: 10px;
  /* Spacing between the icon and text */
}

.btn-dark.google:hover {
  box-shadow: 0 0 0 0.25rem rgba(83, 85, 107, 0.2666666667) !important;
  transition: all 0.4s;
}

.register-button {
  background-color: #ddd;
  /* Adjust register button color */
  color: #666;
}

/* For tablet devices (screen width less than or equal to 768px) */
@media (max-width: 768px) {
  .login-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    /* Adjust height for better responsiveness */
    margin-top: -40px;
  }
  .login-image {
    display: none;
    /* Hide the image on tablets and smaller devices */
  }
  .login-content {
    padding: 20px;
    justify-content: flex-start;
    /* Adjust padding and content alignment for smaller screens */
  }
  .rounded-input {
    padding: 15px;
    /* Adjust input padding for smaller screens */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    width: 100%;
    /* Full width buttons on mobile/tablet */
    margin: 10px 0;
    /* Add margin between buttons */
  }
  .close-button-popup {
    display: none;
  }
}
@media (min-width: 769px) {
  .login-card {
    width: 800px;
    border-radius: 35px;
    overflow: hidden;
    border: none;
    margin-top: 100px;
    height: 550px;
    background-color: white;
    display: grid;
    margin: 60px;
  }
}
@media (min-width: 800px) and (max-width: 834px) {
  .close-button-popup {
    display: none;
  }
}
/* For mobile devices (screen width less than or equal to 576px) */
@media (max-width: 576px) {
  .login-card {
    width: 90%;
    /* Make the card narrower for small screens */
    height: auto;
    padding: 20px;
    /* Adjust margin for mobile */
  }
  .login-content {
    padding: 15px;
    /* Reduce padding on mobile */
  }
  .rounded-input {
    padding: 12px;
    /* Further reduce input padding for mobile */
  }
  .btn-login,
  .btn-register {
    padding: 10px;
    font-size: 14px;
    /* Adjust button font size */
  }
  .action-buttons .login-button,
  .action-buttons .register-button {
    margin: 8px 0;
    /* Tighter spacing between buttons */
  }
}
/* CSS untuk Pagination */
.pagination-container {
  margin-top: 2rem;
  display: flex;
  justify-content: end;
}

/* Untuk tema Bootstrap */
.pagination-container nav {
  display: flex;
  justify-content: end;
}

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

.pagination-container .page-item {
  margin: 0 0.25rem;
}

.pagination-container .page-link {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  background-color: #1E1E1E;
  color: #d9d9d9;
  border: 1px solid #1E1E1E;
  transition: all 0.2s ease;
}

.page-item.disabled .page-link {
  background-color: rgba(30, 30, 30, 0.5803921569);
  border-color: rgba(30, 30, 30, 0.5803921569);
}

.pagination-container .page-item.active .page-link {
  background-color: #2447f9;
  color: white;
  border-color: #2447f9;
}

.pagination-container .page-link:hover {
  border-color: #2447f9;
}

.small.text-muted {
  display: none;
}

/* Loading indicator */
.loading-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 4px;
  background: linear-gradient(to right, #007bff, #2447f9);
  animation: loading-bar 2s infinite;
}

@keyframes loading-bar {
  0% {
    width: 0;
  }
  50% {
    width: 50%;
  }
  100% {
    width: 100%;
  }
}
/* Spinner */
.spinner {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* Mobile Fixed Pagination */
@media (max-width: 768px) {
  /* Tetapkan fixed bottom bar untuk pagination pada mobile */
  .pagination-container.mobile-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #121212;
    margin: 0;
    padding: 10px 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
    justify-content: center;
  }
  .pagination-container.mobile-fixed nav {
    justify-content: center;
    width: 100%;
  }
  /* Tampilkan hanya previous, current, dan next pada mobile */
  .pagination-container.mobile-fixed .page-item:not(:first-child):not(:last-child):not(.active) {
    display: none;
  }
  /* Memperbesar tombol prev/next pada mobile untuk lebih mudah diklik */
  .pagination-container.mobile-fixed .page-item:first-child .page-link,
  .pagination-container.mobile-fixed .page-item:last-child .page-link {
    padding: 0.75rem 1.25rem;
    font-weight: bold;
  }
}/*# sourceMappingURL=main.css.map */
/* Telegram Banner Styles */
.telegram-banner {
  margin-top: 50px;
  background: linear-gradient(135deg, #0088cc, #005f92);
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 10px 20px rgba(0, 136, 204, 0.2);
  overflow: hidden;
  position: relative;
}

.telegram-banner::before {
  content: "";
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.telegram-banner::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 250px;
  height: 250px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  z-index: 0;
}

.telegram-banner-content {
  display: flex;
  align-items: center;
  padding: 20px 30px;
  position: relative;
  z-index: 1;
}

.telegram-icon {
  flex: 0 0 70px;
}

.telegram-icon svg {
  width: 70px;
  height: 70px;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
  animation: pulse 2s infinite;
}

.telegram-text {
  flex: 1;
  padding: 0 30px;
  color: white;
}

.telegram-text h3 {
  font-size: 24px;
  margin: 0 0 8px 0;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.telegram-text p {
  font-size: 16px;
  margin: 0;
  opacity: 0.9;
}

.telegram-action {
  flex: 0 0 auto;
}

.telegram-btn {
  display: inline-block;
  background-color: white;
  color: #0088cc;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 50px;
  text-decoration: none;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.telegram-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);
  background-color: #f0f8ff;
}

/* Animation */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .telegram-banner {
    margin-top: 100px;
  }
  .telegram-banner-content {
    flex-direction: column;
    text-align: center;
    padding: 20px 15px;
  }
  .telegram-icon {
    margin-bottom: 15px;
  }
  .telegram-text {
    padding: 0 10px 15px;
  }
}
/* Filter and Search Styles */
.filter-search-container {
  background: linear-gradient(135deg, #1e1e1e, #2447f9);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.filter-search-container::before {
  content: "";
  position: absolute;
  height: 200px;
  width: 200px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
  top: -100px;
  right: -100px;
  border-radius: 50%;
}

/* Search Box */
.search-box {
  margin-bottom: 20px;
}

.search-input-container {
  position: relative;
  max-width: 100%;
}

.search-input {
  width: 100%;
  padding: 16px 20px 16px 50px;
  border-radius: 50px;
  border: 2px solid #ced4da;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
  background-color: white;
}

.search-input:focus {
  outline: none;
  border-color: #FF6B6B;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #6c757d;
}

/* Category Filters */
.category-filter {
  margin-top: 5px;
}

.filter-label {
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 16px;
  color: #fff;
  display: flex;
  align-items: center;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}

.category-pill {
  padding: 8px 16px;
  border-radius: 50px;
  background-color: white;
  border: 2px solid #dee2e6;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-pill:hover {
  border-color: #2447f9;
  color: #2447f9;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.category-pill.active {
  background-color: #2447f9;
  color: white;
  border-color: #2447f9;
  /* box-shadow: 0 4px 8px rgba(255, 107, 107, 0.25); */
  box-shadow: 0 4px 8px rgba(36, 72, 249, 0.5176470588);
}

.clear-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  color: #6c757d;
  font-size: 14px;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.clear-filters:hover {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.05);
}

.clear-filters svg {
  width: 16px;
  height: 16px;
}

/* Results Status */
.results-status {
  margin-bottom: 20px;
}

.filter-applied {
  font-size: 14px;
  color: #6c757d;
  background-color: #f8f9fa;
  padding: 8px 16px;
  border-radius: 8px;
  display: inline-block;
}

/* No Products Display */
.no-products {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px;
  background-color: #f8f9fa;
  border-radius: 12px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
}

.no-results-icon {
  width: 60px;
  height: 60px;
  color: #6c757d;
  margin-bottom: 15px;
}

.no-products p {
  font-size: 18px;
  color: #495057;
  margin-bottom: 15px;
}

.try-again-btn {
  padding: 10px 20px;
  background-color: #FF6B6B;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.try-again-btn:hover {
  background-color: #ff5252;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(255, 107, 107, 0.25);
}

/* Animation for active states */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(255, 107, 107, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 107, 107, 0);
  }
}
.category-pill.active {
  animation: pulse 1.5s infinite;
}

/* Responsive styles */
@media (max-width: 768px) {
  .filter-search-container {
    padding: 15px;
  }
  .category-pills {
    gap: 8px;
  }
  .category-pill {
    padding: 6px 12px;
    font-size: 13px;
  }
}/*# sourceMappingURL=main.css.map */
.product-card-placeholder {
  position: relative;
  overflow: hidden;
  background: #1E1E1E;
}

.placeholder-price-tag {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.placeholder-text {
  width: 80px;
  height: 20px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

.placeholder-image {
  width: 100%;
  height: 200px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

.placeholder-title {
  height: 25px;
  width: 60%;
  margin: 10px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

.placeholder-badge {
  height: 25px;
  width: 100px;
  margin: 10px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

.placeholder-author {
  display: flex;
  align-items: center;
  padding: 10px;
}

.placeholder-author-image {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  margin-right: 10px;
}

.placeholder-author-name {
  height: 20px;
  width: 100px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}/*# sourceMappingURL=main.css.map */
@keyframes btnprimary {
  0% {
    box-shadow: 0 0 0 0 rgba(36, 71, 249, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(36, 71, 249, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(36, 71, 249, 0);
  }
}
.btn-checkout {
  animation: btnprimary 1.5s infinite;
}
.play-circle {
  animation: btnprimary 1.5s infinite;
}
.promo-button {
  animation: btnprimary 1.5s infinite;
}
.category-list a.active {
  animation: btnprimary 1.5s infinite;
}
.btn-rounded {
    animation: btnprimary 1.5s infinite;
}
.pagination-container .page-item.active .page-link {
    animation: btnprimary 1.5s infinite;
}
.round-pagination a.active {
    animation: btnprimary 1.5s infinite;
}
.continue-learning-btn {
  animation: btnprimary 1.5s infinite;
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 50px;
}

.post-section {
  padding: 60px 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.card__container {
  width: 300px;
  margin: 20px;
  margin-bottom: -30px;
  position: relative;
}

.card__container img {
  width: 115%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 20px;
}

.card-content {
  background-color: #1E1E1E;
  border-radius: 0 20px 20px 20px;
  padding: 20px;
  margin-top: -20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  left: 0;
  right: 80px !important;
  width: 105%;
}

.card-content h3 {
  margin: 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-content p {
  color: #777;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  margin-top: 10px;
}

.author-info {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.author-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.author-details {
  display: flex;
  flex-direction: column;
}

.author-details span {
  color: #777;
  font-size: 11px !important;
}

span.author__name {
  color: #fff;
  font-weight: 600;
}

.button-container {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  /* Jarak antara post terakhir dan tombol */
}

.read-more-btn {
  display: inline-block;
  background-color: #2447f9;
  /* Warna mencolok */
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  /* Rounded */
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.read-more-btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  color: #fff;
  text-decoration: none;
  transition: all 0.4s;
}

.read-more-btn {
  animation: btnprimary 1.5s infinite;
}

.card-grid a {
  text-decoration: none;
  cursor: pointer;
}

.card-link {
  text-decoration: none;
}

.card__container {
  transition: transform 0.2s ease-in-out;
}

.card__container:hover {
  transform: scale(1.05);
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .card-grid {
    gap: 10px;
    padding: 0 15px;
  }
  .card-link {
    width: calc(50% - 30px);
  }
  .card__container {
    max-width: 450px;
  }
  .card__container img {
    height: auto;
  }
  .card-content h3 {
    font-size: 16px;
  }
  .card-content p {
    font-size: 12px;
  }
  .card__container img {
    height: auto;
  }
  .title-products-header.post {
    margin-left: 20px;
  }
}
/* Mobile Responsiveness */
@media screen and (max-width: 768px) {
  .card-grid {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 0 15px;
  }
  .title-products-header.post {
    margin-left: 20px;
  }
  .card__container {
    width: 90%;
    max-width: 400px;
    margin: 10px 0;
  }
  .card__container img {
    width: 100%;
    height: 250px;
  }
  .card-content {
    width: 95%;
    right: 0 !important;
    left: 0;
  }
  .post-section {
    padding: 0 25px;
  }
  .read-more-btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  .button-container {
    margin-top: 40px;
  }
}
/* Small Mobile Devices */
@media screen and (max-width: 480px) {
  .card__container {
    width: 100%;
    margin: 15px 0;
  }
  .card__container img {
    height: 200px;
  }
  .card-content h3 {
    font-size: 14px;
  }
  .card-content p {
    font-size: 11px;
  }
  .author-info img {
    width: 35px;
    height: 35px;
  }
  .read-more-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}
/* Card Placeholder Styles */
.card-grid.loading {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 0 40px;
  overflow: hidden;
  /* Prevent horizontal overflow */
  width: 100%;
  /* Ensure full width */
}

.card-placeholder {
  width: 300px;
  margin: 20px 0;
  margin-bottom: -30px;
  position: relative;
  animation: pulse 1.5s infinite;
  overflow: hidden;
  /* Prevent internal overflow */
}

.placeholder-image {
  width: 100%;
  /* Changed from 115% */
  height: 200px;
  background-color: #2c2c2c;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
  /* Ensure it doesn't exceed container */
}

.placeholder-content {
  background-color: #1E1E1E;
  border-radius: 0 20px 20px 20px;
  padding: 20px;
  margin-top: -20px;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  /* Changed from 105% */
  max-width: 100%;
  /* Prevent overflow */
  box-sizing: border-box;
  /* Include padding in width calculation */
}

.placeholder-title {
  height: 16px;
  background-color: #2c2c2c;
  margin-bottom: 10px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  width: 70%;
  max-width: 100%;
}

.placeholder-text {
  height: 12px;
  background-color: #2c2c2c;
  margin-bottom: 5px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.placeholder-text:last-child {
  width: 85%;
}

.placeholder-author {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.placeholder-avatar {
  width: 40px;
  height: 40px;
  background-color: #2c2c2c;
  border-radius: 50%;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
}

.placeholder-author-details {
  display: flex;
  flex-direction: column;
}

.placeholder-author-name {
  height: 11px;
  width: 100px;
  background-color: #2c2c2c;
  margin-bottom: 5px;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

.placeholder-author-date {
  height: 11px;
  width: 80px;
  background-color: #2c2c2c;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  max-width: 100%;
}

/* Shimmer Animation */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}
/* Add shimmer effect to placeholders */
.placeholder-image::before,
.placeholder-title::before,
.placeholder-text::before,
.placeholder-avatar::before,
.placeholder-author-name::before,
.placeholder-author-date::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0));
  animation: shimmer 2s infinite;
}

/* Responsive Adjustments */
@media screen and (max-width: 1024px) {
  .card-placeholder {
    width: calc(50% - 40px);
    max-width: 350px;
    margin: 20px 10px;
  }
}
@media screen and (max-width: 768px) {
  .card-grid.loading {
    flex-direction: column;
    align-items: center;
    padding: 0 30px;
  }
  .card-placeholder {
    width: 90%;
    max-width: 400px;
    margin: 20px 0;
  }
  .placeholder-image {
    width: 100%;
    height: 250px;
  }
}
@media screen and (max-width: 480px) {
  .card-grid.loading {
    padding: 0 15px;
  }
  .card-placeholder {
    width: 100%;
    margin: 15px 0;
  }
  .placeholder-image {
    height: 200px;
  }
  .placeholder-title,
  .placeholder-text {
    height: 14px;
  }
  .placeholder-avatar {
    width: 35px;
    height: 35px;
  }
}/*# sourceMappingURL=main.css.map */
/* Course Section Styles */
.product-section.course {
  padding: 60px 0;
}

.product-grid.course a {
  text-decoration: none;
}

.product-section.course .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.product-grid.course {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.product-card.course {
  background-color: #1E1E1E;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.course-image-container {
  position: relative;
  overflow: hidden;
}

.product-card.course .product-title.course {
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  cursor: pointer;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: all 0.3s ease;
  height: -moz-fit-content;
  height: fit-content;
  min-height: 1.2em;
}

.product-card.course .product-title.course:hover {
  -webkit-line-clamp: unset;
  height: auto;
}

.product-card.course:hover {
  transform: translateY(-5px);
}

.product-image.course {
  width: 100%;
  height: auto;
  display: block;
}

/* Play button overlay */
.play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.play-circle {
  width: 60px;
  height: 60px;
  background-color: #2447f9;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  transform: translateY(100px) scale(0.8);
  /* Mulai dari bawah dengan scale kecil */
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Easing yang lebih smooth */
}

.play-circle i {
  font-size: 24px;
  margin-left: 2px;
  /* Sedikit offset untuk centering icon play */
}

/* Hover effects */
.course-image-container:hover .play-button-overlay {
  opacity: 1;
}

.course-image-container:hover .play-circle {
  transform: translateY(0) scale(1);
  /* Slide up ke center dan scale normal */
}

/* Optional: Tambahan efek shadow untuk depth */
.play-circle:hover {
  box-shadow: 0 8px 25px rgba(36, 71, 249, 0.4);
  transform: translateY(-2px) scale(1.05);
  /* Slight lift on button hover */
}

/* Video Modal Styles */
.video-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.video-modal-content {
  position: relative;
  width: 80%;
  max-width: 900px;
  background-color: #1E1E1E;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.video-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  background-color: #151515;
  border-bottom: 1px solid #333;
}

.video-modal-title {
  color: white;
  font-size: 18px;
  font-weight: bold;
  margin: 0;
}

.video-modal-close {
  background: none;
  border: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  transition: color 0.3s ease;
}

.video-modal-close:hover {
  color: white;
}

.video-modal-body {
  padding: 0;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.product-card.course h3 {
  font-size: 20px;
  margin: 15px 20px 5px;
  color: #fff;
  font-weight: bold;
}

.product-card.course .badge.course {
  background: linear-gradient(90deg, #2447f9, #8a8ff9);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 12px;
  margin: 0 20px 15px;
  display: inline-block;
}

.product-card.course .product-details.course {
  display: flex;
  padding: 15px 20px;
}
.product-card.course .product-details.course .course-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.product-card.course .product-details.course .course-stats .stats-left {
  display: flex;
  gap: 15px;
}
.product-card.course .product-details.course .course-stats .stats-left span {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}
.product-card.course .product-details.course .course-stats .stats-left span i {
  margin-right: 5px;
  color: linear-gradient(90deg, #2447f9, #8a8ff9);
}
.product-card.course .product-details.course .course-stats .stats-right .level-indicator {
  display: flex;
  align-items: center;
  gap: 3px;
}
.product-card.course .product-details.course .course-stats .stats-right .level-indicator .level-dot {
  width: 18px;
  height: 18px;
  -o-object-fit: cover;
     object-fit: cover;
}
.product-card.course .product-details.course .course-stats .stats-right .level-indicator .level-dot.active {
  filter: brightness(1);
}
.product-card.course .product-details.course .course-stats .stats-right .level-indicator .level-dot:not(.active) {
  filter: brightness(0.7);
}
.product-card.course .product-details.course .course-stats .stats-right .level-indicator .level-text {
  margin-left: 8px;
  color: #4CAF50;
  font-size: 14px;
  font-weight: 500;
}

.level-tooltip-container {
  position: relative;
  display: inline-block;
}
.level-tooltip-container .level-tooltip {
  visibility: hidden;
  position: fixed;
  bottom: auto;
  left: 70%;
  transform: translate(-50%, -100%);
  background: linear-gradient(135deg, #2447f9 0%, #8a8ff9 100%);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 4px 15px rgba(36, 71, 249, 0.2);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 9999;
  pointer-events: none;
}
.level-tooltip-container .level-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 90%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #2447f9 transparent transparent transparent;
}
.level-tooltip-container:hover .level-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, calc(-100% - 10px));
}

.product-card.course .level-indicator {
  position: relative;
  z-index: 1;
}

.product-card.course .author-image.course {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.product-card.course h4 {
  font-size: 14px;
  color: #555;
}

/* Price Tag Styles */
.price-tag.course {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  color: #fff;
  font-size: 16px;
  padding: 8px 12px;
  z-index: 1;
  border-radius: 10px;
}

@media (max-width: 992px) {
  .product-grid.course {
    grid-template-columns: repeat(3, 1fr);
  }
  .product-section.course {
    padding: 0 10px;
  }
  .title-products-header {
    margin-top: 50px;
  }
}
@media (max-width: 768px) {
  .product-grid.course {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-modal-content {
    width: 95%;
  }
  .play-button-overlay {
    opacity: 1;
  }
  .play-circle {
    width: 50px;
    height: 50px;
    transform: scale(1);
  }
  .play-circle i {
    font-size: 20px;
  }
}
@media (max-width: 576px) {
  .product-grid.course {
    grid-template-columns: 1fr;
  }
}
/* Course Detail Page Styles */
.course-detail-header {
  padding: 120px 0 60px;
  background-color: #101010;
  color: #fff;
  margin-top: 55px;
}

/* Course Title Section */
.course-title-container {
  margin-bottom: 30px;
}

.course-title {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #fff;
}

.course-subtitle {
  font-size: 18px;
  color: #ccc;
  max-width: 700px;
  margin: 0 auto;
}

/* Course Meta Info */
.course-meta-info {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 40px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #ccc;
}

.meta-item strong {
    font-weight: 600;
}

.meta-icon {
  width: 20px;
  height: 20px;
}

/* Course Content Container */
.course-content-container {
  margin-bottom: 30px;
  margin-top: 70px;
}

/* Video Thumbnail */
.course-thumbnail-container {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.course-thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
}

.play-trailer-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background-color: #2447f9;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(36, 71, 249, 0.5);
}

.play-trailer-btn:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 30px rgba(36, 71, 249, 0.7);
}

/* Course Lessons Card */
.course-lessons-card {
  background-color: #1E1E1E;
  border-radius: 20px;
  padding: 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.lessons-count {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
  color: #fff;
}

.lessons-count span {
  font-weight: 600;
}

.total-duration {
  color: #ccc;
  font-weight: normal;
}

.current-lesson {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #252525;
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 15px;
}

.lesson-play-btn {
  width: 40px;
  height: 40px;
  background-color: #2447f9;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.play-icon {
  width: 22px;
  height: 22px;
}

.lesson-info {
  flex-grow: 1;
}

.lesson-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
}

.lesson-duration {
  font-size: 14px;
  color: #ccc;
}

.continue-learning-btn {
  width: 100%;
  padding: 15px;
  background-color: #2447f9;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  border-radius: 30px;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.continue-learning-btn:hover {
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.2509803922) !important;
  transition: all 0.4s;
  color: #fff;
  text-decoration: none;
}

/* Course Tabs */
.course-tabs-container {
  margin-bottom: 50px;
}

.course-tabs {
  display: flex;
  justify-content: flex-start;
  border-radius: 50px;
  background-color: transparent;
  padding: 5px;
  margin-bottom: 30px;
  overflow: hidden;
}

.course-tabs .nav-link {
  color: #ccc;
  border-radius: 50px;
  padding: 12px 25px;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.course-tabs .nav-link:hover {
  color: #fff;
}

.course-tabs .nav-link.active {
  background-color: #2447f9;
  color: #fff !important;
}

.tab-content {
  background-color: #1E1E1E;
  border-radius: 20px;
  padding: 30px;
}

/* Tab Content Styles */
.overview-content h3,
.curriculum-content h3,
.instructor-content h3 {
  color: #fff;
  margin-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

.overview-content p {
  color: #ccc;
  line-height: 1.6;
  margin-bottom: 25px;
}

.features-list {
  list-style: none;
  padding: 0;
}

.features-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
  color: #ccc;
}

.features-list li i {
  color: #2447f9;
}

/* Accordion Styles */
.accordion {
  margin-top: 20px;
}

.accordion-item {
  background-color: #252525;
  border: none;
  border-radius: 15px !important;
  margin-bottom: 15px;
  overflow: hidden;
}

.accordion-button {
  background-color: #252525;
  color: #fff;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 15px !important;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: rgba(89, 91, 103, 0.0509803922);
  color: white;
}

.accordion-button::after {
  margin-left: 15px;
  background-size: 16px;
}

.section-title {
  font-weight: 600;
  flex-grow: 1;
}

.section-meta {
  font-size: 14px;
  color: #ccc;
  margin-left: 15px;
}

.accordion-button:not(.collapsed) .section-meta {
  color: rgba(255, 255, 255, 0.8);
}

.accordion-body {
  background-color: #1E1E1E;
  padding: 20px;
}

.lesson-list {
  list-style: none;
  padding: 0;
}

.lesson-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px;
  border-bottom: 1px solid #333;
}

.lesson-item:last-child {
  border-bottom: none;
}

.lesson-icon {
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}

.lesson-icon img {
  width: 20px;
  height: 20px;
}

.lesson-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
}

.lesson-name {
  color: #ccc;
  font-weight: 500;
}

.lesson-duration {
  color: #999;
  font-size: 14px;
}

/* Instructor Tab */
.instructor-profile {
  display: flex;
  gap: 30px;
}

.instructor-image {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.instructor-info {
  flex-grow: 1;
}

.instructor-name {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #fff;
}

.instructor-title {
  color: #2447f9;
  font-weight: 500;
  margin-bottom: 15px;
}

.instructor-bio {
  color: #ccc;
  line-height: 1.6;
}

/* Reviews Tab */
.reviews-summary {
  display: flex;
  gap: 50px;
}

.rating-summary {
  text-align: center;
}

.rating-summary h3 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #fff;
}

.stars {
  color: #ffb400;
  font-size: 20px;
  margin-bottom: 10px;
}

.reviews-breakdown {
  flex-grow: 1;
}

.review-bar {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.review-bar span {
  width: 60px;
  color: #ccc;
}

.review-bar .progress {
  flex-grow: 1;
  height: 8px;
  background-color: #333;
  border-radius: 4px;
}

.review-bar .progress-bar {
  background-color: #2447f9;
  border-radius: 4px;
}

.rounded-video {
  border-radius: 20px !important;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  overflow: hidden;
}

.video-embed-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
}

.ic-tooltip-course {
  display: flex;
  gap: 15px;
}

.ic-tooltip-course a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
  text-decoration: none;
}

.ic-tooltip-course.product a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: transparent;
  border-radius: 50%;
  color: white;
  transition: all 0.3s ease;
  text-decoration: none;
}

.ic-tooltip-course a:hover {
  background-color: #2447F9;
  color: #fff;
  transform: translateY(-5px);
}

.ic-tooltip-course.product a:hover {
  background-color: transparent;
  color: #fff;
  transform: translateY(-5px);
}

.ic-tooltip-course .tooltip-trigger {
  position: relative;
}

.ic-tooltip-course .tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin-bottom: 8px;
}

.ic-tooltip-course .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

.ic-tooltip-course .tooltip-trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

@media (min-width: 992px) {
  .video-column {
    width: 66.66666667%;
    flex: 0 0 auto;
  }
  .lessons-column {
    width: 33.33333333%;
    flex: 0 0 auto;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .course-lessons-card {
    margin-top: 30px;
    /* Ubah nilai sesuai kebutuhan */
  }
  .course-content-container {
        margin-bottom: 20px;
  }
}
/* Mobile Styles - Apply below 768px (typical mobile breakpoint) */
@media (max-width: 767px) {
  .course-detail-header {
    padding: 0 10px !important;
  }
  .course-detail-header {
    margin-top: 100px;
  }
  /* 1. Ensure video column is at the top (already set by Bootstrap order, but we can reinforce) */
  .video-column {
    order: 1;
    margin-bottom: 10px;
  }
  /* 2. Hide the lessons column */
  .lessons-column {
    display: none;
  }
  /* 3. Change course title container to left-aligned instead of center */
  .course-title-container {
    text-align: left;
    margin-bottom: -35px !important;
  }
  .course-title {
    font-size: 28px;
    /* Smaller font for mobile */
  }
  .course-subtitle {
    margin: 0;
    /* Remove auto margin that was centering content */
  }
  .course-content-container {
    margin-bottom: 0;
  }
  /* 4. Make tabs scrollable horizontally */
  .course-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding-bottom: 10px;
    /* Add padding to show scrollbar */
    width: 100%;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
  }
  .course-tabs .nav-item {
    flex: 0 0 auto;
  }
  /* 5. Reorganize section meta and lesson duration to be below their respective titles */
  .accordion-button {
    flex-direction: column;
    align-items: flex-start;
  }
  .section-title {
    margin-bottom: 5px;
    width: 100%;
  }
  .section-meta {
    margin-left: 0;
  }
  .lesson-details {
    flex-direction: column;
    align-items: flex-start;
  }
  .lesson-name {
    margin-bottom: 5px;
  }
  /* Additional mobile optimizations */
  .course-detail-header {
    padding: 80px 0 40px;
    /* Reduced padding for mobile */
  }
  .course-meta-info {
    display: none;
  }
  .tab-content {
    padding: 20px;
    /* Smaller padding in tab content */
  }
  .video-embed-container {
    margin-bottom: 20px;
  }
  /* Adjust accordion spacing */
  .accordion-button {
    padding: 15px;
  }
  /* Optimize instructor profile section */
  .instructor-profile {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  .instructor-info {
    text-align: center;
  }
  /* Optimize reviews section */
  .reviews-summary {
    flex-direction: column;
    gap: 30px;
  }
  /* Fixed checkout container at bottom of screen */
  .mobile-checkout-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #101010;
    padding: 20px;
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  /* Price container with real price and discount */
  .price-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    margin-right: auto;
  }
  .price-real.joined-badge {
    background: linear-gradient(135deg, #110843, #16a34a);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
    animation: pulse 2s infinite;
    white-space: nowrap;
    display: inline-block;
  }
  .price-discount {
    font-size: 16px;
    text-decoration: line-through;
    color: #ff5252;
    font-weight: 500;
    position: relative;
    animation: blink 1.5s infinite;
  }
  /* Blinking animation for discount price */
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      opacity: 1;
    }
  }
  /* Checkout button with rounded style */
  .checkout-button {
    background-color: #2447f9;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 25px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(36, 71, 249, 0.4);
  }
  .checkout-button:hover,
  .checkout-button:active {
    background-color: #1a38c8;
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(36, 71, 249, 0.5);
  }
  /* Hide container when scrolling down */
  .mobile-checkout-hidden {
    transform: translateY(100%);
  }
}
@media (min-width: 768px) {
  .mobile-checkout-container {
    display: none;
  }
}
.course-detail-header .header-primary {
  font-weight: 700;
  font-size: 32px;
  line-height: 48px;
}

.course-detail-header .subtitle-primary {
  font-weight: 300;
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
}

.right-card.course {
  margin-top: 0;
}

@media (max-width: 767px) {
  .course-pricing {
    display: none;
  }
  #pricing {
    display: none;
  }
}
.video-container-checkout {
  width: 100%;
  border-radius: 15px;
  overflow: hidden;
  /*margin-bottom: 15px;*/
  position: relative;
  padding-top: 56.25%;
  /* 16:9 Aspect Ratio */
}

.video-checkout {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 8px;
}/*# sourceMappingURL=main.css.map */

.tabs-container-free {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.tab-button {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  background: #1a1a1a;
  color: #e4e4e4;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-button.active {
  background: #2447f9;
  color: white;
  animation: btnprimary 1.5s infinite;
}

.empty-state {
  color: #fff;
}/*# sourceMappingURL=main.css.map */

.terms-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  margin-top: 80px;
}

.terms-header {
  text-align: center;
  margin-bottom: 4rem;
  position: relative;
}

.terms-header h1 {
  font-size: 3.5rem;
  color: #2447F9;
  margin-bottom: 1rem;
  font-family: "Playfair Display", serif;
  font-weight: bold;
}

.terms-header p {
  font-size: 1.2rem;
  opacity: 0.8;
  color: #e0e0e0;
}

.terms-section {
  background: #1e1e1e;
  border-radius: 15px;
  padding: 2rem;
  margin-bottom: 2rem;
  border: 1px solid #2d2d2d;
  transition: transform 0.3s ease;
}

.terms-section:hover {
  transform: translateY(-5px);
}

.terms-section h2 {
  color: #fff;
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #2d2d2d;
  padding-bottom: 0.5rem;
}

.terms-section p {
  margin-bottom: 1rem;
  color: #e0e0e0;
}

.terms-section ul {
  list-style-type: none;
  padding-left: 0;
  color: #e0e0e0;
}

.terms-section ul li {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.terms-section ul li::before {
  content: "•";
  color: #2447F9;
  position: absolute;
  left: 0;
  font-weight: bold;
}

.highlight-box {
  background: rgba(114, 137, 218, 0.1);
  border-left: 4px solid #2447F9;
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 0 10px 10px 0;
}

.terms-footer {
  margin-top: 3rem;
  padding: 1.5rem;
  border-top: 1px solid var(--border-color);
  text-align: center;
}

.terms-footer .update-info {
  color: #888;
  font-size: 0.9rem;
  font-style: italic;
}

@media (max-width: 768px) {
  .terms-container {
    padding: 1rem;
  }
  .terms-header h1 {
    font-size: 2.5rem;
  }
}/*# sourceMappingURL=main.css.map */

.joined-badge {
  background: linear-gradient(135deg, #110843, #16a34a);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 4px rgba(34, 197, 94, 0.2);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

.faq-section {
  margin-top: 150px;
  color: #f1f1f1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.faq-container {
  width: 100%;
  overflow: hidden !important;
  max-width: 800px;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
}

.faq-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #2447F9, #ff69b4);
  -webkit-background-clip: text;
  background-clip: text;
  font-weight: 700;
  color: transparent;
  position: relative;
  display: inline-block;
}

.faq-header h1::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 4px;
  background: linear-gradient(45deg, #2447F9, #ff69b4);
  border-radius: 2px;
}

.faq-header p {
  color: #b3b3b3;
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  margin-top: 1.5rem;
}

.faq-container {
  margin-bottom: 3rem;
}

.faq-item {
  background-color: #1e1e1e;
  margin-bottom: 1rem;
  border-radius: 12px;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease;
}

.faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(36, 72, 249, 0.2392156863), 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.faq-question {
  padding: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  font-size: 1.1rem;
  position: relative;
  z-index: 1;
}

.faq-question::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(to bottom, #2447F9, #ff69b4);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.faq-item.active .faq-question::before {
  opacity: 1;
}

.faq-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background-color: transparent;
  color: #2447F9;
  font-size: 1.5rem;
  cursor: pointer;
  width: 24px;
  height: 24px;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  color: #b3b3b3;
  line-height: 1.6;
  transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  padding: 0 1.5rem 1.5rem;
}

.faq-answer p {
  margin-bottom: 1rem;
}

.faq-answer p:last-child {
  margin-bottom: 0;
}

.glow {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #2447F9 0%, rgba(138, 43, 226, 0) 70%);
  opacity: 0.3;
  filter: blur(40px);
  z-index: -1;
  animation: float 10s ease-in-out infinite;
}

.glow:nth-child(2) {
  top: auto;
  bottom: -150px;
  left: auto;
  right: -100px;
  background: radial-gradient(circle, #ff69b4 0%, rgba(255, 105, 180, 0) 70%);
  animation-delay: -5s;
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(40px, 20px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@media (max-width: 768px) {
  .faq-container {
    padding: 0;
  }
  .faq-header h1 {
    font-size: 2rem;
  }
  .faq-question {
    padding: 1.2rem;
    font-size: 1rem;
  }
}/*# sourceMappingURL=main.css.map */
/* Card Styles */
.product-card.course-placeholder {
  background-color: #1E1E1E;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: transform 0.3s ease;
}

.product-card.course-placeholder:hover {
  transform: translateY(-5px);
}

/* Placeholder Styles */
.course-image-container-placeholder {
  position: relative;
  overflow: hidden;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 Aspect Ratio */
  background-color: #2a2a2a;
}

.image-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(145deg, #272727, #212121);
}

.image-placeholder::after {
  content: "";
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid #3a3a3a;
  border-top-color: #2447f9;
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Title Placeholder */
.title-placeholder {
  height: 20px;
  background: linear-gradient(90deg, #2a2a2a 0%, #333333 50%, #2a2a2a 100%);
  border-radius: 4px;
  margin: 15px 20px 10px;
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
}

/* Badge Placeholder */
.badge-placeholder {
  width: 80px;
  height: 16px;
  background: linear-gradient(90deg, #2447f9 0%, #8a8ff9 100%);
  border-radius: 12px;
  margin: 0 20px 15px;
  opacity: 0.7;
}

/* Details Placeholder */
.details-placeholder {
  display: flex;
  justify-content: space-between;
  padding: 15px 20px;
}

.stats-left-placeholder {
  display: flex;
  gap: 15px;
}

.stat-placeholder {
  height: 14px;
  width: 60px;
  background: linear-gradient(90deg, #2a2a2a 0%, #333333 50%, #2a2a2a 100%);
  border-radius: 4px;
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
}

.stats-right-placeholder {
  display: flex;
  align-items: center;
  gap: 3px;
}

.level-dot-placeholder {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #3a3a3a;
}

.level-dot-placeholder.active {
  background: linear-gradient(90deg, #2447f9 0%, #8a8ff9 100%);
}

/* Price Tag Placeholder */
.price-tag-placeholder {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  width: 80px;
  height: 30px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.price-inner-placeholder {
  width: 60%;
  height: 14px;
  background: linear-gradient(90deg, #ffffff 0%, #bbbbbb 50%, #ffffff 100%);
  border-radius: 4px;
  animation: shimmer 1.5s infinite linear;
  background-size: 200% 100%;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}/*# sourceMappingURL=main.css.map */

.promo-header {
  transition: all 0.3s ease;
}

.promo-header .fa-chevron-down {
  transition: transform 0.3s ease;
}

.promo-header[aria-expanded=false] .fa-chevron-down {
  transform: rotate(-180deg);
}

.collapse {
  transition: all 0.3s ease;
}/*# sourceMappingURL=main.css.map */

/* Image Grid Section */
.image-grid {
  border-color: #fff;
  padding-bottom: 20px;
  /* Added bottom padding for spacing */
}

.image-grid.products {
  margin-top: 30px;
  border-color: #fff;
  /* Added bottom padding for spacing */
}

.image-grid h2 {
  font-size: 24px;
  color: #fff;
}

.scroll-container {
  position: relative;
  display: flex;
  align-items: center;
}

.grid-images::-webkit-scrollbar {
  display: none;
  /* Hides the scrollbar in WebKit browsers */
}

.grid-images {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  /* Enable horizontal scrolling */
  padding: 10px 0;
  /* Optional: Add padding to top and bottom */
  scroll-behavior: smooth;
  /* Smooth scrolling */
  flex-grow: 1;
  /* Allow it to take up remaining space */
}

.grid-images img {
  width: 150px;
  height: 100px;
  border-radius: 15px;
  -o-object-fit: cover;
  object-fit: cover;
  flex-shrink: 0;
  /* Prevent images from shrinking */
  cursor: pointer;
  transition: transform 0.3s ease;
  /* Smooth scale effect */
}

.grid-images img:hover {
  transform: scale(1.05);
  /* Slightly enlarge on hover */
}

.scroll-button {
  background-color: #f0f0f0;
  border: none;
  border-radius: 50%;
  padding: 10px;
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
}

.scroll-button.left {
  left: 0;
  width: 45px;
  height: 45px;
  background-color: #2447f9;
  color: #fff;
}

.scroll-button.right {
  right: 0;
  width: 45px;
  height: 45px;
  background-color: #2447f9;
  color: #fff;
}

.scroll-button:hover {
  box-shadow: 0 0 0 0.25rem rgba(193, 216, 250, 0.2509803922) !important;
  transition: all 0.4s;
}

.scroll-button:focus {
  outline: none;
}

/* Modal styles */
.modal-img {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1000;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.8);
  /* Black w/ opacity */
}

.modal-content-img {
  margin: auto;
  display: block;
  width: auto;
  height: 500px;
  margin: auto;
  background-color: #101010;
  /* Center horizontally */
  padding: 20px;
  border-radius: 40px;
  /* Rounded corners */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  /* Optional: Add shadow */
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@media (max-width: 992px) {
  .image-grid img {
    height: 100px;
    /* Smaller images for mobile */
  }
  .scroll-button.left,
  .scroll-button.right {
    width: 35px;
    height: 35px;
    /* Smaller scroll buttons */
  }
  .modal-content-img {
    width: 90%;
    height: auto;
    /* Modal adapts to screen size */
  }
}
@media (max-width: 576px) {
  .grid-images img {
    width: 130px;
    height: 80px;
  }
  .image-grid img {
    height: 90px;
    /* Smaller images for mobile */
  }
  .modal-content-img {
    width: 100%;
    padding: 10px;
    /* Modal adapts to mobile screens */
  }
}/*# sourceMappingURL=main.css.map */