@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #364d59;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #52565e;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #db162f;
  --accent-color-rgb: 219, 22, 47;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --accent-color-hover: #db162f;
  --accent-color-dark: #c71930;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

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

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f4f7f6;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

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

body {
  font-family: "Inter", sans-serif;
}

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

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

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

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

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

.header {
  --background-color: rgba(255, 255, 255, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 20px 0;
  transition: all 0.5s;
  z-index: 997;
}
.wa-admin-header-btn:hover {
  color: #25d366 !important;
}
.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(255, 255, 255, 1);
  --heading-color: #3c3c3c;
  --nav-color: #3c3c3c;
  --nav-hover-color: #3c3c3c;
  padding: 0;
}

@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

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

  .navmenu li {
    position: relative;
  }

  .navmenu > ul > li {
    white-space: nowrap;
    padding: 15px 14px;
  }

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

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 14px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    /* text-transform: uppercase; */
  }

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

  .navmenu > ul > li > a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover > a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

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

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

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

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

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

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

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

@media (max-width: 1199px) {
  section,
  .section {
    scroll-margin-top: 76px;
  }
}
@media (max-width: 767.98px) {
  section,
  .section {
    padding: 40px 0 !important;
  }
}

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

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
@media (min-width: 576px) {
  .hero .info h2,
  .hero-page .info h2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 45px !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .hero .info h2,
  .hero-page .info h2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 45px !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .hero .info h2,
  .hero-page .info h2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 45px !important;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .hero .info h2,
  .hero-page .info h2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 45px !important;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .hero .info h2,
  .hero-page .info h2 {
    margin-bottom: 30px;
    padding-bottom: 15px;
    font-size: 56px !important;
  }
}

.hero {
  width: 100%;
  min-height: 85vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
}
.hero-page {
  width: 100%;
  min-height: 50vh;
  position: relative;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* overflow: hidden; */
}

.hero .info,
.hero-page .info {
  position: relative;
  inset: 0;
  z-index: 3;
  padding: 140px 0 60px 0;
}

@media (max-width: 768px), (max-height: 480px) {
  .hero .info,
  .hero-page .info {
    padding: 100px 50px 60px 50px;
  }
}

.hero .info h2,
.hero-page .info h2 {
  margin-bottom: 30px;
  padding-bottom: 15px;
  font-size: 45px;
  font-weight: 700;
  position: relative;
}

.hero .info h2:after,
.hero-page .info h2:after {
  content: "";
  position: absolute;
  display: block;
  width: 80px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

@media (max-width: 768px) {
  .hero .info h2,
  .hero-page .info h2 {
    font-size: 36px;
  }
}

.hero .info p,
.hero-page .info p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  /* font-size: 16px; */
}

.hero .info .btn-get-started,
.hero-page .info .btn-get-started {
  color: var(--contrast-color);
  font-family: var(--heading-font);
  font-weight: 500;
  /* font-size: 16px; */
  letter-spacing: 1px;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 50px;
  transition: 0.5s;
  margin: 10px;
  border: 2px solid var(--accent-color);
}

.hero .info .btn-get-started:hover,
.hero-page .info .btn-get-started:hover {
  /* background: var(--accent-color); */
}

.hero .carousel,
.hero-page .carousel {
  inset: 0;
  position: absolute;
  overflow: hidden;
  z-index: 0;
}

.hero .carousel-item,
.hero-page .carousel-item {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  transition-duration: 0.4s;
}

.hero .carousel-item img,
.hero-page .carousel-item img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero .carousel-item::before,
.hero-page .carousel-item::before {
  content: "";
  background-color: color-mix(
    in srgb,
    var(--background-color),
    transparent 20%
  );
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero .carousel-control-prev,
.hero-page .carousel-control-prev {
  justify-content: start;
}

@media (min-width: 640px) {
  .hero .carousel-control-prev,
  .hero-page .carousel-control-prev {
    padding-left: 15px;
  }
}

.hero .carousel-control-next,
.hero-page .carousel-control-next {
  justify-content: end;
}

@media (min-width: 640px) {
  .hero .carousel-control-next,
  .hero-page .carousel-control-next {
    padding-right: 15px;
  }
}

.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon,
.hero-page .carousel-control-next-icon,
.hero-page .carousel-control-prev-icon {
  background: none;
  font-size: 26px;
  line-height: 0;
  background: color-mix(in srgb, var(--default-color), transparent 80%);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-radius: 50px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero .carousel-control-prev,
.hero .carousel-control-next,
.hero-page .carousel-control-prev,
.hero-page .carousel-control-next {
  z-index: 3;
  transition: 0.3s;
}

.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus,
.hero-page .carousel-control-prev:focus,
.hero-page .carousel-control-next:focus {
  opacity: 0.5;
}

.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover,
.hero-page .carousel-control-prev:hover,
.hero-page .carousel-control-next:hover {
  opacity: 0.9;
}

/*--------------------------------------------------------------
# Get Started Hero Section - index home
--------------------------------------------------------------*/
.get-started .content {
  padding: 30px 0;
}

.get-started .content h3 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 25px;
  padding-bottom: 25px;
  position: relative;
}

.get-started .content h3:after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 4px;
  background: var(--accent-color);
  left: 0;
  bottom: 0;
}

.get-started .content p {
  /* font-size: 14px; */
}

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

@media (max-width: 575px) {
  .get-started .php-email-form {
    padding: 20px;
  }
}

.get-started .php-email-form h3 {
  /* font-size: 14px; */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.get-started .php-email-form p {
  /* font-size: 14px; */
  margin-bottom: 20px;
}

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

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

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

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

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

/*--------------------------------------------------------------
#  Floating Boxes Hero Section - index home
--------------------------------------------------------------*/

.hero .floating-boxes {
  position: relative;
  inset: 0;
  z-index: 3;
  /* padding: 140px 0 60px 0; */
  transform: translateY(75%);
}

.floating-boxes-2 {
  z-index: 3;
  /* padding: 140px 0 60px 0; */
  transform: translateY(-50%);
}

.floating-boxes-2 a {
  color: var(--nav-dropdown-color);
}

.floating-boxes-2 a:hover {
  color: var(--accent-color);
}

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

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

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

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

/*--------------------------------------------------------------
# Latest News Section - index home
--------------------------------------------------------------*/
.img-latest-news-index-1 {
  border-bottom-left-radius: 2rem !important;
  border-top-left-radius: 2rem !important;
  border-top-right-radius: 0 !important;
}
@media (max-width: 767.98px) {
  .img-latest-news-index-1 {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 2rem !important;
    border-bottom-left-radius: 0 !important;
  }
}

/*--------------------------------------------------------------
# Supplier Banner Section - index home
--------------------------------------------------------------*/
.supplier-banner-left {
  border-bottom-left-radius: 2rem !important;
  border-top-left-radius: 2rem !important;
  border-top-right-radius: 0 !important;
}
@media (max-width: 767.98px) {
  .supplier-banner-left {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}
@media (max-width: 991.98px) {
  .supplier-banner-left {
    border-top-left-radius: 2rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
}

/*--------------------------------------------------------------
# Achievement Section - index home
--------------------------------------------------------------*/
@media (min-width: 576px) {
  .achievement-title {
    font-size: 16px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .achievement-title {
    font-size: 16px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .achievement-title {
    font-size: 16px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .achievement-title {
    font-size: 18px;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  .achievement-title {
    font-size: 20px;
  }
}

/*--------------------------------------------------------------
# Product Section - index home
--------------------------------------------------------------*/

.index-card-adp-header {
  background-image: url("../img/img-adp-header.jpg");
}

.index-card-besi-header {
  background-image: url("../img/img-besi-header.jpg");
}
/* .product-card {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  height: 400px;
  cursor: pointer;
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.product-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  z-index: 1;
  transition: background-color 0.4s ease;
}

.product-card:hover img {
  transform: scale(1.2);
}

.product-card:hover::before {
  background-color: rgba(219, 22, 47, 0.55);
}

.product-card.red::before {
  background-color: rgba(198, 40, 40, 0.75);
}

.product-card.red:hover::before {
  background-color: rgba(198, 40, 40, 0.9);
}

.product-title {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.product-sub-title {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  z-index: 2;
  font-size: 14px;
  color: #fff;
}

.arrow {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 2;
  font-size: 24px;
  color: #fff;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.product-card:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}
@media (max-width: 767.98px) {
  .product-card {
    height: 250px;
  }
} */

.product-card:hover .overlay {
  background-color: rgba(153, 0, 20, 0.55);
}
.product-card {
  position: relative;
  height: 400px;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
}

/*.product-card-1:hover {*/
/*  background-color: var(--accent-color);*/
/*}*/


.product-card-1 {
  position: relative;
  background: #fff;          /* bg awal PUTIH */
  overflow: hidden;
  transition: all ease-in-out 0.3s;
}

/* layer gradient */
.product-card-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    357deg,
    rgba(219, 22, 47, 1) 0%,
    rgba(227, 0, 30, 1) 100%
  );
  opacity: 0;
  transition: opacity 0.7s ease;
  z-index: 0;
}

/* hover fade-in */
.product-card-1:hover::after {
  opacity: 1;
}

/* hover */
.product-card-1:hover {
  transform: translateY(-10px);
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
}

/* isi card tetap di atas */
.product-card-1 > * {
  position: relative;
  z-index: 1;
}

.product-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.product-card:hover img {
  transform: scale(1.2);
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 2;
}

.product-title {
  /* font-size: 16px; */
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}

.product-sub-title {
  /* font-size: 14px; */
  color: #fff;
  margin-top: 0.5rem;
  line-height: 1.4;
}

.arrow {
  margin-top: auto;
  font-size: 24px;
  color: #fff;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.product-card:hover .arrow {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 767.98px) {
  .product-card {
    height: 250px;
  }
}
.owl-nav {
  position: absolute !important;
  top: -15px !important;
  width: 100% !important;
}

.owl-prev {
  position: absolute !important;
  left: 0 !important;
  font-size: 2rem !important;
  color: #ffffff !important;
  padding: 0px 10px 0px 10px !important;
}

.owl-next {
  position: absolute !important;
  right: 0 !important;
  font-size: 2rem !important;
  color: #ffffff !important;
  padding: 0px 10px 0px 10px !important;
}

/*--------------------------------------------------------------
# General Setting
--------------------------------------------------------------*/
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  body {
    font-size: 14px !important;
  }
  .btn-accent {
    font-size: 14px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  body {
    font-size: 14px !important;
  }
  .btn-accent {
    font-size: 14px;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body {
    font-size: 14px !important;
  }
  .btn-accent {
    font-size: 14px;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  body {
    font-size: 14px !important;
  }
  .btn-accent {
    font-size: 14px;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  body {
    font-size: 16px !important;
  }
  .btn-accent {
    font-size: 16px;
  }
}

.text-decoration-underline-hover:hover {
  text-decoration: underline !important;
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}
.text-default-color,
.header-color {
  color: var(--default-color);
}
.bg-dark-accent {
  background-color: var(--accent-color-dark);
}

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

.btn-accent {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-color-dark);
  --bs-btn-hover-border-color: #b02a37;
  --bs-btn-focus-shadow-rgb: 225, 83, 97;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #b02a37;
  --bs-btn-active-border-color: #a52834;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--accent-color);
  --bs-btn-disabled-border-color: var(--accent-color);
  transition: all 0.3s ease;
}

.btn-outline-accent {
  --bs-btn-color: var(--accent-color);
  --bs-btn-border-color: var(--accent-color);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--accent-color);
  --bs-btn-hover-border-color: var(--accent-color);
  --bs-btn-focus-shadow-rgb: 220, 53, 69;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--accent-color);
  --bs-btn-active-border-color: var(--accent-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--accent-color);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--accent-color);
  --bs-gradient: none;
}

.border-accent {
  --bs-border-opacity: 1;
  border-color: rgba(
    var(--accent-color-rgb),
    var(--bs-border-opacity)
  ) !important;
}

.text-accent {
  --bs-text-opacity: 1;
  color: rgba(var(--accent-color-rgb), var(--bs-text-opacity)) !important;
}

.background-center {
  background-position: center;
}
.background-cover {
  background-size: cover;
}

.box-shadow {
  /* box-shadow: 0px 4px 6px rgba(3, 7, 18, 0.01),
    0px 18px 22px rgba(3, 7, 18, 0.03), 0px 40px 50px rgba(3, 7, 18, 0.2); */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.01), 0px 3px 6px rgba(0, 0, 0, 0.02),
    0px 7px 14px rgba(0, 0, 0, 0.02), 0px 13px 26px rgba(0, 0, 0, 0.03),
    0px 20px 40px rgba(0, 0, 0, 0.04);
}

.box-shadow-hover:hover {
  /* box-shadow: 0px 4px 6px rgba(3, 7, 18, 0.01),
    0px 18px 22px rgba(3, 7, 18, 0.03), 0px 40px 50px rgba(3, 7, 18, 0.1); */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.01), 0px 3px 6px rgba(0, 0, 0, 0.02),
    0px 7px 14px rgba(0, 0, 0, 0.02), 0px 13px 26px rgba(0, 0, 0, 0.03),
    0px 20px 40px rgba(0, 0, 0, 0.04);
}

.text-shadow {
  text-shadow: 0px 10px 20px rgba(0,0,0,0.9);
}

.breadcrumb {
  --bs-breadcrumb-padding-x: 0;
  --bs-breadcrumb-padding-y: 0;
  --bs-breadcrumb-margin-bottom: 1rem;
  --bs-breadcrumb-bg: ;
  --bs-breadcrumb-border-radius: ;
  --bs-breadcrumb-divider-color: var(--bs-secondary-color);
  --bs-breadcrumb-item-padding-x: 0.5rem;
  --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
  display: flex;
  flex-wrap: wrap;
  padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
  margin-bottom: var(--bs-breadcrumb-margin-bottom);
  font-size: var(--bs-breadcrumb-font-size);
  list-style: none;
  background-color: var(--bs-breadcrumb-bg);
  border-radius: var(--bs-breadcrumb-border-radius);
}

.breadcrumb-item + .breadcrumb-item {
  padding-left: var(--bs-breadcrumb-item-padding-x);
}
.breadcrumb-item + .breadcrumb-item::before {
  float: left;
  padding-right: var(--bs-breadcrumb-item-padding-x);
  color: var(--contrast-color);
  content: var(--bs-breadcrumb-divider, "/")
    /* rtl: var(--bs-breadcrumb-divider, "/") */;
}
.breadcrumb-item.active {
  color: var(--accent-color);
}

.custom-tooltip {
  --bs-tooltip-bg: var(--bs-white);
  --bs-tooltip-color: var(--accent-color);
}

.grad-btn-outline {
  --x: 50%;
  --y: 50%;
  /* position: relative; */
  /* padding: 0.9rem 1.5rem; */
  /* border: none; */
  /* border-radius: 14px; */
  /* color: #fff; */
  /* font-size: 1rem;
  font-weight: 600; */
  cursor: pointer;

  /* transition: transform .2s ease, box-shadow .2s ease; */
}
.grad-btn-outline:hover {
  color: #ffffff !important;
  /* transform: translateY(-2px) !important; */
  /* box-shadow: 0 8px 24px rgba(252, 12, 12, 0.35); */

  background: radial-gradient(circle at var(--x) var(--y), #fc213f, #db162f);
}

.error-title-404 {
  font-size: 20rem;
  font-weight: 700;
  color: var(--accent-color);
}

/* The Modal (background) */
.achievement-image-modal {
  display: none; /* default hidden */
  position: fixed;
  z-index: 998;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
}

/* Modal Content (image) */
.achievement-image-modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 900px;
}

/* Add Animation */
.achievement-image-modal-content {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
  }
  to {
    -webkit-transform: scale(1);
  }
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* The Close Button */
.close-achievement-image-modal {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
  .achievement-image-modal-content {
    width: 100%;
  }
}
.achievement-img {
  cursor: pointer;
}

/*--------------------------------------------------------------
# Aftersales Section - index home
--------------------------------------------------------------*/
.img-aftersales-index {
  border-bottom-right-radius: 2rem !important;
  border-top-right-radius: 2rem !important;
  border-top-left-radius: 0 !important;
}
@media (max-width: 991.98px) {
  .img-aftersales-index {
    border-top-right-radius: 2rem !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 2rem !important;
  }
}

/*--------------------------------------------------------------
# Social Media Section - index home
--------------------------------------------------------------*/
.sosmed-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  height: 300px;
  color: white;
  text-align: center;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.sosmed-card:hover {
  transform: scale(1.05);
  /* https://smoothshadows.com/#djEsMSwzLDAuMDQsNTAsNDAsMCwjMDMwNzEyLCNmM2Y0ZjYsI2ZmZmZmZiwy */
  /* box-shadow: 0px 4px 6px rgba(3, 7, 18, 0.01),
    0px 18px 22px rgba(3, 7, 18, 0.03), 0px 40px 50px rgba(3, 7, 18, 0.2); */
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.01), 0px 3px 6px rgba(0, 0, 0, 0.02),
    0px 7px 14px rgba(0, 0, 0, 0.02), 0px 13px 26px rgba(0, 0, 0, 0.03),
    0px 20px 40px rgba(0, 0, 0, 0.04);
}

.sosmed-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.sosmed-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.sosmed-yt-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* background: rgba(0, 0, 0, 0.5); */
  background: linear-gradient(
    355deg,
    rgba(87, 0, 0, 1) 0%,
    rgba(100, 4, 4, 0.42) 70%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.sosmed-tiktok-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  /* background: rgba(0, 0, 0, 0.5); */
  background: linear-gradient(355deg, rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 70%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.sosmed-ig-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    123deg,
    rgba(161, 103, 20, 0.4) 0%,
    rgba(146, 12, 12, 0.5) 50%,
    rgba(131, 58, 180, 0.9) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease;
}

.sosmed-card:hover .sosmed-overlay {
  background: rgba(0, 0, 0, 0.3);
}

.sosmed-card:hover .sosmed-yt-overlay {
  /* background: rgba(0, 0, 0, 0.3); */
  background: linear-gradient(
    355deg,
    rgba(8, 8, 8, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 70%
  );
}

.sosmed-card:hover .sosmed-tiktok-overlay {
  /* background: rgba(0, 0, 0, 0.3); */
  background: linear-gradient(
    355deg,
    rgba(8, 8, 8, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 70%
  );
}

.sosmed-card:hover .sosmed-ig-overlay {
  /* background: rgba(0, 0, 0, 0.3); */
  background: linear-gradient(
    355deg,
    rgba(8, 8, 8, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 70%
  );
}

.sosmed-card:hover .sosmed-yt-overlay img {
  opacity: 0.1;
  transition: background 0.3s ease;
}

.sosmed-card:hover .sosmed-tiktok-overlay img {
  opacity: 0.1;
  transition: background 0.3s ease;
}

.sosmed-card:hover .sosmed-ig-overlay img {
  opacity: 0.1;
  transition: background 0.3s ease;
}

.sosmed-overlay img,
.sosmed-tiktok-overlay img,
.sosmed-ig-overlay img,
.sosmed-yt-overlay img {
  width: 90px;
  margin-bottom: 2rem;
}

.sosmed-overlay h4,
.sosmed-tiktok-overlay h4,
.sosmed-ig-overlay h4,
.sosmed-yt-overlay h4 {
  font-weight: bold;
  text-transform: uppercase;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 20px;
  color: black;
  text-decoration: none;
  box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.1);
  transition: transform 0.2s ease;
}
.social-icon:hover {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Contact Us Section - index home
--------------------------------------------------------------*/
.card-contact-us {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.card-contact-us:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
}

/*--------------------------------------------------------------
# Products page
--------------------------------------------------------------*/
.products {
  transition: all ease-in-out 0.3s;
}
.products:hover {
  border-color: #fff;
  box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
  transform: translateY(-10px);
}

.product-lightbox {
  transition: all 0.5s ease;
}
.product-lightbox:hover .product-icon {
  transform: translateX(5px);
  transition: all 0.5s ease;
}
/*--------------------------------------------------------------
# Team page
--------------------------------------------------------------*/

.team-overlay {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 15px;
  color: #fff;
  /* background: linear-gradient(to top, rgba(220, 0, 0, 0.9), rgba(220, 0, 0, 0)); */
  background: linear-gradient(
    0deg,
    rgba(219, 22, 47, 0.9) 0%,
    rgba(219, 22, 47, 0.7) 40%,
    rgba(219, 22, 47, 0) 100%
  );
}

.team-overlay .name {
  font-size: 1.1em;
  font-weight: bold;
}

.team-overlay .designation {
  font-size: 0.9em;
  opacity: 0.9;
}

.team-card,
.team-card img,
.team-card .team-overlay {
  transition: 0.6s;
}

.team-card:hover {
  box-shadow: 0px 1px 1px rgba(3, 7, 18, 0.01), 0px 4px 4px rgba(3, 7, 18, 0.03),
    0px 10px 9px rgba(3, 7, 18, 0.04), 0px 18px 16px rgba(3, 7, 18, 0.05),
    0px 28px 24px rgba(3, 7, 18, 0.07), 0px 40px 35px rgba(3, 7, 18, 0.08);
}

.team-card:hover img {
  transform: scale(1.05);
}

.team-card:hover .team-overlay {
  padding-top: 40px;
  padding-bottom: 40px;
  transform: scale(1.05) translateY(6.5%);
  background: linear-gradient(
    0deg,
    rgba(219, 22, 47, 0.9) 0%,
    rgba(219, 22, 47, 0.7) 50%,
    rgba(219, 22, 47, 0) 100%
  );
}

/*--------------------------------------------------------------
# Gallery - SPL PEDULI page
--------------------------------------------------------------*/

.container-iframe {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%;
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/*--------------------------------------------------------------
# News - page
--------------------------------------------------------------*/
.input-group:focus-within .input-group-text {
  border-top: 1px solid #db162f !important;
  border-bottom: 1px solid #db162f !important;
  border-left: 1px solid #db162f !important;
  border-right: 0 !important;
}

.input-group:focus-within .search-news-input {
  border-top: 1px solid #db162f !important;
  border-right: 1px solid #db162f !important;
  border-bottom: 1px solid #db162f !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

.search-autocomplete {
  z-index: 996;
}

.search-list {
  max-height: 300px;
}

.latest-news-card-item-content {
  margin-top: 15rem;
}
.top-latest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transition: transform 0.6s ease;
  z-index: 0; /* gambar di belakang */
}
.top-latest-card:hover::before {
  transform: scale(1.2);
}

.top-latest-card .card-body {
  position: relative;
  z-index: 2; /* konten di atas */
}

.top-latest-card .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
}

.top-latest-card:hover .overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: 1;
}