/*Link Undangan Style */
@-webkit-keyframes lazyload {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@keyframes lazyload {
  0% {
    background-position: -468px 0;
  }

  100% {
    background-position: 468px 0;
  }
}

@-webkit-keyframes move-forever {
  0% {
    -webkit-transform: translate3d(-90px, 0, 0);
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
  }
}

@keyframes move-forever {
  0% {
    -webkit-transform: translate3d(-90px, 0, 0);
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(85px, 0, 0);
    transform: translate3d(85px, 0, 0);
  }
}

/*S

/* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track
::-webkit-scrollbar-track {
background: #f1f1f1;
}*/
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 9px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

body {
  font-size: 10pt;
}

body .lazyload {
  background-repeat: no-repeat;
  -webkit-animation-name: lazyload;
  animation-name: lazyload;
  background-color: #ffff;
  background-image: -webkit-gradient(linear, left top, right top, from(#fefefe), color-stop(20%, #faf8f8), color-stop(40%, #fefefe), to(#fefefe));
  background-image: linear-gradient(to right, #fefefe 0%, #faf8f8 20%, #fefefe 40%, #fefefe 100%);
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.shadow-inset {
  box-shadow: 1px 1px 5px inset rgb(0 0 0 / 18%) !important;
}

.waves {
  position: relative;
  width: 100%;
  height: 15vh;
  margin-bottom: -7px;
  /*Fix for safari gap*/
  min-height: 69px;
  max-height: 69px;
}

/* Animation */
.parallax>use {
  -webkit-animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}

.parallax>use:nth-child(1) {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
  -webkit-animation-duration: 7s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  -webkit-animation-delay: -3s;
  animation-delay: -3s;
  -webkit-animation-duration: 10s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
  -webkit-animation-duration: 13s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  -webkit-animation-delay: -5s;
  animation-delay: -5s;
  -webkit-animation-duration: 20s;
  animation-duration: 20s;
}

.btn-link {
  padding: 0;
  text-decoration: none;
  color: #255479;
  font-weight: 600;
}

h1 {
  font-size: 23pt;
}

h2 {
  margin: 37px 9px;
  color: #5a185f;
  font-family: 'Roboto';
  font-size: 25px;
  font-weight: bold;
}

.underline {
  position: relative;
}

.underline::after {
  content: '';
  position: absolute;
  width: 55px;
  height: 5px;
  border-radius: 9px;
  background-color: #db94ff;
  bottom: -19px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

a {
  text-decoration: none;
  color: #255479;
  font-weight: 600;
}

svg:not(.waves) {
  width: 24px;
  height: 24px;
}

/* svg:not(.waves) path {
  fill: #673ab7;
} */

section {
  display: block;
  padding: 19px 0;
}

.card {
  padding-bottom: 19px;
  border-radius: 3px;
  margin: 9px;
  border: none;
}

.row>* {
  padding-left: 5px;
  padding-right: 5px;
}

.box-shadow {
  -webkit-box-shadow: 1px 1px 7px #c9c3c3;
  box-shadow: 1px 1px 7px #c9c3c3;
}

.form-control {
  border-radius: 19px;
  -webkit-box-shadow: 1px 1px 5px #cccaca;
  box-shadow: 1px 1px 5px #cccaca;
  border: none;
}

.pagination {
  font-size: 9pt;
}

.container.class-crush * {
  position: absolute;
}

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

.btn-primary {
  background-color: #234c5d;
  border-color: #234c5d;
}

#total-visitor,
#total-unique-visitor {
  font-size: 39px;
  font-weight: bold;
}

.bradius {
  border-radius: 17px;
}

.scallop-up {
  height: 99px;
  width: 100%;
  background: -webkit-gradient(radial, 50% 100%, 10, 50% 100%, 40, from(#ffffff), color-stop(.49, #ffffff), color-stop(.51, #cce2e4), to(#cde3e4));
  -webkit-background-size: 69px 100%
}

.bg-white-opacity {
  background-color: #ffffffb8 !important
}

body img.lazyload {
  background-repeat: no-repeat;
  background: transparent;
  -webkit-animation-name: lazyload;
  animation-name: lazyload;
  background-image: linear-gradient(to right, #fefefefa 0%, #faf8f8 20%, #fefefe7a 40%, #fefefe00 100%);
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear
}


nav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #ffffffed;
  -webkit-box-shadow: 1px 1px 5px #e2e2e2;
  box-shadow: 1px 1px 5px #e2e2e2;
  z-index: 1;
  -webkit-transition: top .9s;
  transition: top .9s;
}

nav.hide {
  /*top:-99px;*/
}

nav .container {
  -ms-flex-line-pack: center;
  align-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

nav .container ul.d-flex {
  margin: 0;
}

nav .container ul li {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  padding: 0 2px;
}

nav .my-brand {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: left;
  font-size: 15pt;
  margin-bottom: 0;
  font-weight: 900;
}

nav .nav-menu {
  position: fixed;
  bottom: 3px;
  left: 0;
  width: calc(100% - 14px);
  overflow-x: auto;
  background-color: #fbfbfbeb;
  -webkit-box-shadow: 3px -2px 5px #79797942, 3px 2px 5px #79797942;
  box-shadow: 3px -2px 5px #79797942, 3px 2px 5px #79797942;
  font-family: 'Roboto';
  margin: 3px 7px;
  border-radius: 3rem;
}

nav .nav-menu ul {
  -ms-flex-pack: distribute;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}

nav .nav-menu ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 9px 5px;
  font-size: 8pt;
  font-weight: 400;
}

nav .nav-menu ul li a svg {
  color: #7786af;
  width: 15px;
  height: 15px;
}

nav .nav-menu ul li a svg path {
  fill: #50638bbd;
}

nav .nav-menu ul li.active {
  background-color: #ad8d6317;
  -webkit-box-shadow: inset 0px 1px 4px 4px #e9e9e95c, -1px -1px 7px #ede7e175;
  box-shadow: inset 0px 1px 4px 4px #e9e9e95c, -1px -1px 7px #ede7e175;
  border-bottom: 2px solid #d8bec7;
}

nav .nav-menu ul li.active a {
  color: #b98d89;
}

nav .nav-menu ul li.active a svg path {
  fill: #db94ff;
}

nav .nav-login {
  font-size: 11pt;
}

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

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

.banner .caption-banner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  text-align: right;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.banner .caption-banner *:not(.btn):not(.fa) {
  width: 100%;
}

.banner .caption-banner .btn {
  font-size: 9pt;
}

#layanan {
  background-image: -webkit-gradient(linear, left bottom, left top, from(#e0c4f3), to(#fdeaf691));
  background-image: linear-gradient(360deg, #e0c4f3, #fdeaf691);
}

#layanan .card {
  border-radius: 17px;
}

#layanan .card-title {
  border-bottom: 2px dashed #dcb1b1;
  padding-bottom: 19px;
  font-size: 19pt;
  color: #4f5a60;
}

#layanan img {
  width: 99px;
  height: auto;
  margin: 19px auto;
}

#paket .card {
  border-radius: 17px;
}

#paket ol {
  list-style: none;
  text-align: center;
  padding: 0;
}

#paket ol li {
  margin: 5px;
}

#paket .img-paket {
  width: 77px;
  margin: auto;
}

#paket .btn {
  font-size: 9pt;
}

#kelebihan .list-group {
  list-style: decimal inside;
  padding: 19px;
}

#kelebihan .list-group li.list-group-item {
  border: none;
  display: list-item;
  font-size: 14pt;
  line-height: 1.1;
  padding: 5px;
}

#kelebihan .list-group li.list-group-item::marker {
  font-size: 29pt;
  font-weight: 600;
  color: #5a185f;
}


#template .card {
  border-radius: 19px;
  overflow: hidden;
}

#template .card-title {
  font-family: 'Roboto';
  border-radius: 19px;
  color: #4f5a60;
}

#linkundangan {
  padding: 33px;
}

#linkundangan h2 {
  margin-bottom: 53px;
  font-family: 'Roboto';
}

#kontak,
#tentang {
  padding-top: 69px;
}

footer {
  text-align: center;
  padding: 69px 9px;
  background-color: #10121c;
  color: white;
  font-family: unset;
}

footer a {
  color: white;
}

footer .sosmed a {
  font-size: 15pt;
  color: white;
  margin: 3px 3px 17px;
  padding: 9px;
  border-radius: 50%;
  background-color: #181b26;
  width: 49px;
  height: 49px;
}

@media (min-width: 768px) {
  body {
    font-size: 12pt;
  }

  h1 {
    font-size: 37pt;
  }

  h2 {
    font-size: 39px;
  }

  .waves {
    height: 69px;
    min-height: 69px;
  }

  nav {
    background-color: white;
  }

  nav .my-brand {
    -webkit-box-flex: unset;
    -ms-flex: unset;
    flex: unset;
    text-align: unset;
    font-size: 23px;
    margin-bottom: initial;
  }

  nav .nav-menu {
    position: static;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background-color: inherit;
    padding: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;
    border-bottom: none;
  }

  nav .nav-menu ul {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  nav .nav-menu ul li {
    display: list-item;
    padding: 0 9px;
  }

  nav .nav-menu ul li a {
    padding: 0 3px;
    font-size: 12pt;
    font-weight: 600;
  }

  nav .nav-menu ul li a svg {
    display: none;
  }

  nav .nav-menu ul li.active {
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
  }

  nav .nav-menu ul li.active a {
    font-weight: 600;
    font-size: 13pt;
  }

  .banner .caption-banner p {
    font-size: 17pt;
  }

  .banner .caption-banner .btn {
    font-size: 14pt;
  }

  #paket .btn {
    font-size: 14pt;
  }

  footer {
    padding-bottom: 19px;
  }
}

/*# sourceMappingURL=script.css.map */

/* =========================================================
   HUNTER CUAN CATALOG UI
   ========================================================= */

:root {
  --hc-red: #e50920;
  --hc-red-dark: #b90719;
  --hc-black: #17181c;
  --hc-text: #292a2e;
  --hc-muted: #777a80;
  --hc-bg: #faf9f7;
  --hc-white: #ffffff;
  --hc-line: #e9e6e1;
  --hc-soft: #f4f1ed;
  --hc-shadow: 0 15px 45px rgba(0, 0, 0, .07);
}


/* =========================================================
   GLOBAL
   ========================================================= */

html {
  scroll-behavior: smooth;
}

body.catalog-page {
  background: var(--hc-bg);
  color: var(--hc-text);
  overflow-x: hidden;
}

body.catalog-page a {
  transition:
    color .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}


/* =========================================================
   NAVBAR
   ========================================================= */

.catalog-navbar {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;

  width: 100%;

  z-index: 1030;

  background: rgba(255, 255, 255, .94) !important;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom:
    1px solid rgba(0, 0, 0, .06);

  box-shadow:
    0 5px 25px rgba(0, 0, 0, .04);

  transition:
    transform .3s ease;
}

.catalog-navbar.hide {
  transform: translateY(-110%);
}

.catalog-navbar .lu-navbar {
  min-height: 72px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding-top: 9px;
  padding-bottom: 9px;
}


/* LOGO */

.catalog-brand {
  display: flex;
  align-items: center;

  gap: 11px;

  color: var(--hc-black);

  min-width: 0;
}

.catalog-logo {
  width: 53px;
  height: 53px;

  object-fit: contain;

  display: block;
}

.catalog-brand-text {
  display: flex;
  flex-direction: column;

  line-height: 1.1;
}

.catalog-brand-text strong {
  font-size: 15px;

  font-weight: 900;

  letter-spacing: .13em;
}

.catalog-brand-text span {
  margin-top: 5px;

  color: var(--hc-muted);

  font-size: 9px;

  letter-spacing: .08em;

  text-transform: uppercase;
}


/* NAV RIGHT */

.catalog-nav-right {
  display: flex;

  align-items: center;

  gap: 22px;
}

.catalog-nav-link {
  color: var(--hc-black);

  font-size: 13px;

  font-weight: 700;

  text-decoration: none;
}

.catalog-nav-link:hover {
  color: var(--hc-red);
}

.catalog-login {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  padding: 9px 15px;

  border:
    1px solid var(--hc-line);

  border-radius: 999px;

  background: white;

  color: var(--hc-black);

  font-size: 12px;

  font-weight: 800;
}

.catalog-login:hover {
  color: var(--hc-red);

  border-color: var(--hc-red);

  transform: translateY(-1px);
}

.catalog-login img {
  width: 18px !important;
  height: 18px !important;
}


/* =========================================================
   HERO
   ========================================================= */

.catalog-hero {
  position: relative;

  min-height: 620px;

  padding:
    120px 0 75px;

  overflow: hidden;

  background:
    radial-gradient(circle at 78% 25%,
      rgba(229, 9, 32, .09),
      transparent 27%),
    radial-gradient(circle at 18% 80%,
      rgba(0, 0, 0, .05),
      transparent 28%),
    linear-gradient(135deg,
      #faf9f7 0%,
      #ffffff 55%,
      #f4efec 100%);
}


/* PATTERN */

.hero-pattern {
  position: absolute;

  inset: 0;

  opacity: .45;

  background-image:
    radial-gradient(rgba(23, 24, 28, .12) 1px,
      transparent 1px);

  background-size:
    25px 25px;

  mask-image:
    linear-gradient(to bottom,
      #000,
      transparent 90%);

  -webkit-mask-image:
    linear-gradient(to bottom,
      #000,
      transparent 90%);

  animation:
    hcPatternMove 24s linear infinite;
}

@keyframes hcPatternMove {

  0% {
    transform:
      translate3d(0, 0, 0);
  }

  100% {
    transform:
      translate3d(25px, 25px, 0);
  }

}


/* HERO CONTENT */

.hero-content {
  position: relative;

  z-index: 2;

  max-width: 590px;

  padding:
    20px 0;
}

.hero-label,
.section-label {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: var(--hc-red);

  font-size: 10px;

  font-weight: 900;

  letter-spacing: .18em;

  text-transform: uppercase;
}

.hero-label::before,
.section-label::before {
  content: "";

  width: 27px;

  height: 2px;

  background:
    currentColor;
}

.hero-content h1 {
  margin:
    18px 0;

  color:
    var(--hc-black);

  font-size:
    clamp(43px, 5.4vw, 72px);

  line-height:
    .98;

  letter-spacing:
    -.045em;

  font-weight:
    900;
}

.hero-content h1 span {
  display: block;

  color:
    var(--hc-red);
}

.hero-content p {
  max-width: 500px;

  margin:
    0 0 28px;

  color:
    var(--hc-muted);

  font-size:
    16px;

  line-height:
    1.75;
}


/* HERO BUTTONS */

.hero-buttons {
  display: flex;

  align-items: center;

  gap: 18px;

  flex-wrap: wrap;
}

.hero-btn-primary {
  min-height: 49px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  padding:
    0 22px;

  border-radius:
    999px;

  background:
    var(--hc-red);

  border:
    1px solid var(--hc-red);

  color:
    #fff !important;

  font-size:
    13px;

  font-weight:
    800;

  text-decoration:
    none;

  box-shadow:
    0 12px 25px rgba(229, 9, 32, .18);
}

.hero-btn-primary:hover {
  background:
    var(--hc-red-dark);

  border-color:
    var(--hc-red-dark);

  transform:
    translateY(-2px);
}

.hero-btn-secondary {
  color:
    var(--hc-black);

  font-size:
    13px;

  font-weight:
    800;

  text-decoration:
    none;
}

.hero-btn-secondary:hover {
  color:
    var(--hc-red);
}


/* HERO IMAGE */

.hero-preview {
  position: relative;

  z-index: 2;

  width:
    min(100%, 450px);

  margin:
    0 auto;

  padding:
    15px;
}

.hero-preview::before,
.hero-preview::after {
  content: "";

  position: absolute;

  border:
    1px solid rgba(229, 9, 32, .13);

  border-radius:
    50%;
}

.hero-preview::before {
  width: 310px;
  height: 310px;

  top: 35px;
  right: 10px;
}

.hero-preview::after {
  width: 430px;
  height: 430px;

  top: -25px;
  right: -55px;
}

.hero-slide-image {
  position: relative;

  z-index: 3;

  width: auto !important;

  max-width:
    min(270px, 75vw) !important;

  max-height:
    475px;

  object-fit:
    contain;

  border-radius:
    20px;

  background:
    #fff;

  box-shadow:
    0 25px 65px rgba(0, 0, 0, .15);
}

.hero-bottom {
  position: absolute;

  left: -5%;
  right: -5%;

  bottom: -45px;

  height: 90px;

  background:
    var(--hc-bg);

  border-radius:
    50% 50% 0 0 / 100% 100% 0 0;
}


/* =========================================================
   VISITOR
   ========================================================= */

.visitor-section {
  padding:
    30px 0 50px;

  background:
    var(--hc-bg);
}

.visitor-box {
  max-width:
    900px;

  margin:
    0 auto;

  padding:
    30px;

  background:
    #fff;

  border:
    1px solid var(--hc-line);

  border-radius:
    23px;

  box-shadow:
    var(--hc-shadow);
}

.visitor-heading {
  text-align:
    center;

  margin-bottom:
    24px;
}

.visitor-heading h2 {
  margin:
    9px 0 5px;

  font-size:
    clamp(23px, 3vw, 31px);

  font-weight:
    800;

  letter-spacing:
    -.025em;
}

.visitor-heading p {
  margin:
    0;

  color:
    var(--hc-muted);

  font-size:
    13px;
}

.visitor-stat {
  min-height:
    115px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    17px;

  border:
    1px solid var(--hc-line);

  border-radius:
    17px;

  background:
    #fcfbfa;
}

.visitor-icon {
  width:
    40px;

  height:
    40px;

  flex:
    0 0 40px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    12px;

  color:
    var(--hc-red);

  background:
    rgba(229, 9, 32, .07);
}

.visitor-stat strong {
  display:
    block;

  color:
    var(--hc-black);

  font-size:
    30px;

  line-height:
    1;
}

.visitor-stat span {
  display:
    block;

  margin-top:
    5px;

  color:
    var(--hc-muted);

  font-size:
    10px;
}


/* =========================================================
   CATALOG HEADER
   ========================================================= */

.catalog-section {
  padding:
    20px 0 80px;

  background:
    radial-gradient(circle at 8% 5%,
      rgba(229, 9, 32, .045),
      transparent 23%),
    var(--hc-bg);
}

.catalog-heading {
  max-width:
    750px;

  margin:
    0 auto;

  padding:
    20px 30px 35px;

  text-align:
    center;
}

.catalog-heading h2 {
  margin:
    11px 0 10px;

  color:
    var(--hc-black);

  font-size:
    clamp(31px, 4vw, 46px);

  line-height:
    1.08;

  letter-spacing:
    -.04em;

  font-weight:
    900;
}

.catalog-heading h2 span {
  color:
    var(--hc-red);
}

.catalog-heading p {
  max-width:
    650px;

  margin:
    0 auto;

  color:
    var(--hc-muted);

  font-size:
    14px;

  line-height:
    1.75;
}


/* =========================================================
   KATALOG DARI script-landingpage.js ASLI
   ========================================================= */

/* Container */

#linkundangan-template {
  width:
    100%;

  max-width:
    1200px;

  margin:
    0 auto;
}


/* Section */

#linkundangan-template .linkundangan {
  background:
    transparent !important;
}

#linkundangan-template .catalog {
  background:
    transparent !important;

  color:
    var(--hc-text);
}


/* Judul bawaan */

#linkundangan-template #customtheme>h2,
#linkundangan-template #template>h2,
#linkundangan-template #listpreset>h2 {
  color:
    var(--hc-black) !important;

  font-weight:
    800 !important;

  letter-spacing:
    -.025em;
}

#linkundangan-template .remark {
  color:
    var(--hc-muted) !important;

  font-size:
    13px;
}


/* =========================================================
   TEMPLATE CARD
   ========================================================= */

#linkundangan-template .listtemplate>div,
#linkundangan-template .listcustomdesign>div,
#linkundangan-template .listpreset>div {
  margin-bottom:
    12px;
}


#linkundangan-template .listtemplate>div>div,
#linkundangan-template .listcustomdesign>div>div,
#linkundangan-template .listpreset>div>div {
  border-radius:
    19px !important;
}


/* Card */

#linkundangan-template .card {
  overflow:
    hidden;

  margin:
    0 !important;

  padding-bottom:
    0 !important;

  border:
    1px solid var(--hc-line) !important;

  border-radius:
    19px !important;

  background:
    #fff !important;

  box-shadow:
    0 7px 25px rgba(0, 0, 0, .055) !important;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

#linkundangan-template .card:hover {
  transform:
    translateY(-5px);

  border-color:
    #ddd8d2 !important;

  box-shadow:
    0 20px 42px rgba(0, 0, 0, .11) !important;
}


/* Thumbnail */

#linkundangan-template .card-img-top {
  display:
    block;

  width:
    100% !important;

  height:
    auto;

  border:
    0 !important;

  border-radius:
    0 !important;

  transition:
    transform .45s ease;
}

#linkundangan-template .card:hover .card-img-top {
  transform:
    scale(1.025);
}


/* Header */

#linkundangan-template .card-header {
  padding:
    13px 14px 7px !important;

  border:
    0 !important;

  background:
    #fff !important;
}


/* Title */

#linkundangan-template .card-title {
  padding:
    0 !important;

  color:
    var(--hc-black) !important;

  font-size:
    14px !important;

  line-height:
    1.4;

  font-weight:
    800 !important;
}


/* Description */

#linkundangan-template .card-body {
  padding:
    5px 14px 12px !important;
}

#linkundangan-template .card-text {
  margin:
    0 !important;

  color:
    var(--hc-muted);

  font-size:
    11px;

  line-height:
    1.55;

  display:
    -webkit-box;

  -webkit-box-orient:
    vertical;

  -webkit-line-clamp:
    2;

  overflow:
    hidden;
}


/* Footer */

#linkundangan-template .card-footer {
  border:
    0 !important;

  border-top:
    1px solid var(--hc-line) !important;

  background:
    #fff !important;
}


/* Button area */

#linkundangan-template .card-footer>div {
  display:
    flex !important;

  align-items:
    stretch;

  justify-content:
    stretch !important;
}


/* Semua tombol */

#linkundangan-template .card-footer a {
  flex:
    1;

  display:
    flex !important;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  min-height:
    42px;

  padding:
    8px !important;

  color:
    var(--hc-black) !important;

  font-size:
    11px !important;

  font-weight:
    800;

  text-decoration:
    none;

  border:
    0 !important;
}

#linkundangan-template .card-footer a:hover {
  color:
    var(--hc-red) !important;

  background:
    #faf8f6;
}


/* Tombol pesan */

#linkundangan-template .card-footer a:last-child {
  color:
    #fff !important;

  background:
    var(--hc-red);

  border-radius:
    0;
}

#linkundangan-template .card-footer a:last-child:hover {
  color:
    #fff !important;

  background:
    var(--hc-red-dark);
}


/* Icon */

#linkundangan-template .card-footer svg {
  width:
    19px !important;

  height:
    19px !important;
}


/* =========================================================
   BUTTON BAWAAN KATALOG
   ========================================================= */

#linkundangan-template .btn-primary {
  background:
    var(--hc-red) !important;

  border-color:
    var(--hc-red) !important;

  color:
    #fff !important;

  font-weight:
    800;
}

#linkundangan-template .btn-secondary {
  background:
    #fff !important;

  border:
    1px solid var(--hc-line) !important;

  color:
    var(--hc-black) !important;

  font-weight:
    800;
}

#linkundangan-template .btn {
  border-radius:
    999px !important;

  font-size:
    11px;
}


/* =========================================================
   MODAL KATEGORI
   ========================================================= */

#modalTemplateKategori .modal-content {
  overflow:
    hidden;

  border:
    0;

  border-radius:
    20px;

  box-shadow:
    0 25px 70px rgba(0, 0, 0, .18);
}

#modalTemplateKategori .modal-header {
  padding:
    18px 20px;

  border-bottom:
    1px solid var(--hc-line);
}

#modalTemplateKategori .modal-title {
  font-weight:
    800;
}

#modalTemplateKategori .modal-body {
  padding:
    20px;
}

#modalTemplateKategori .form-control {
  height:
    45px;

  border:
    1px solid var(--hc-line);

  box-shadow:
    none;

  border-radius:
    12px;
}

#modalTemplateKategori .modal-footer {
  border-top:
    1px solid var(--hc-line);
}

#modalTemplateKategori #btn-filter {
  min-width:
    100px;

  background:
    var(--hc-red);

  border:
    0;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.benefits-section {
  position:
    relative;

  overflow:
    hidden;

  padding:
    100px 0 75px;

  color:
    #fff;

  background:
    var(--hc-black);
}

.benefits-pattern {
  position:
    absolute;

  inset:
    0;

  opacity:
    .18;

  background-image:
    radial-gradient(rgba(255, 255, 255, .18) 1px,
      transparent 1px);

  background-size:
    25px 25px;
}

.benefits-heading {
  position:
    relative;

  z-index:
    2;

  max-width:
    700px;

  margin:
    0 auto 40px;

  text-align:
    center;
}

.benefits-heading .section-label {
  color:
    #ff5264;
}

.benefits-heading h2 {
  margin:
    11px 0;

  color:
    #fff;

  font-size:
    clamp(30px, 4vw, 44px);

  line-height:
    1.1;

  letter-spacing:
    -.04em;

  font-weight:
    900;
}

.benefits-heading h2 span {
  color:
    #ff5264;
}

.benefits-heading p {
  margin:
    0;

  color:
    #aeb1b7;

  font-size:
    14px;

  line-height:
    1.7;
}


/* Benefit card */

.benefit-card {
  position:
    relative;

  height:
    100%;

  padding:
    28px 24px;

  border:
    1px solid rgba(255, 255, 255, .10);

  border-radius:
    20px;

  background:
    rgba(255, 255, 255, .045);

  transition:
    transform .25s ease,
    background .25s ease;
}

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

  background:
    rgba(255, 255, 255, .075);
}

.benefit-number {
  position:
    absolute;

  top:
    18px;

  right:
    20px;

  color:
    rgba(255, 255, 255, .25);

  font-size:
    11px;

  font-weight:
    900;

  letter-spacing:
    .1em;
}

.benefit-card img {
  width:
    75px !important;

  height:
    75px !important;

  object-fit:
    contain;

  margin-bottom:
    18px;

  filter:
    grayscale(1) brightness(0) invert(1);

  opacity:
    .9;
}

.benefit-card h3 {
  margin:
    0 0 8px;

  color:
    #fff;

  font-size:
    17px;

  font-weight:
    800;
}

.benefit-card p {
  margin:
    0;

  color:
    #aeb1b7;

  font-size:
    13px;

  line-height:
    1.7;
}


/* Brand */

.brand-bottom {
  position:
    relative;

  z-index:
    2;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  margin-top:
    65px;
}

.brand-bottom img {
  width:
    95px;

  height:
    95px;

  object-fit:
    contain;

  margin-bottom:
    10px;
}

.brand-bottom strong {
  color:
    #fff;

  font-size:
    27px;

  letter-spacing:
    .12em;
}

.brand-bottom span {
  margin-top:
    5px;

  color:
    #898c93;

  font-size:
    10px;

  letter-spacing:
    .12em;

  text-transform:
    uppercase;
}


/* =========================================================
   FOOTER
   ========================================================= */

.catalog-footer {
  padding:
    30px 0 35px;

  color:
    #989ba2;

  background:
    #101115;
}

.footer-main {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;
}

.footer-title {
  color:
    #fff;

  font-size:
    14px;

  letter-spacing:
    .13em;
}

.footer-main p {
  margin:
    6px 0 0;

  font-size:
    11px;
}

.footer-link {
  color:
    #fff;

  font-size:
    12px;

  font-weight:
    800;

  text-decoration:
    none;
}

.footer-link:hover {
  color:
    #ff5264;
}

.footer-line {
  width:
    100%;

  height:
    1px;

  margin:
    22px 0;

  background:
    rgba(255, 255, 255, .08);
}

.footer-bottom {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  font-size:
    10px;
}

.footer-bottom a {
  color:
    #fff;
}

.footer-bottom img {
  width:
    14px;

  height:
    14px;

  vertical-align:
    -2px;
}


/* =========================================================
   FLOATING PRICE
   ========================================================= */

.floating-price {
  position:
    fixed;

  left:
    0;

  top:
    50%;

  z-index:
    1000;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  padding:
    11px 13px;

  color:
    #fff;

  background:
    var(--hc-black);

  border-radius:
    0 13px 13px 0;

  box-shadow:
    0 10px 25px rgba(0, 0, 0, .14);

  transform:
    translateY(-50%);
}

.floating-price span {
  color:
    #aaaeb4;

  font-size:
    9px;
}

.floating-price strong {
  color:
    #fff;

  font-size:
    15px;

  line-height:
    1.2;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.floating-whatsapp {
  position:
    fixed;

  right:
    18px;

  bottom:
    20px;

  z-index:
    1001;

  text-align:
    right;
}

.floating-whatsapp p {
  display:
    inline-block;

  margin:
    0 0 6px;

  padding:
    5px 9px;

  color:
    var(--hc-black);

  background:
    #fff;

  border:
    1px solid var(--hc-line);

  border-radius:
    12px;

  font-size:
    10px;

  box-shadow:
    0 5px 20px rgba(0, 0, 0, .09);
}

.floating-whatsapp a {
  display:
    inline-block;
}

.floating-whatsapp svg {
  width:
    50px;

  height:
    50px;

  filter:
    drop-shadow(0 8px 16px rgba(0, 0, 0, .18));

  transition:
    transform .2s ease;
}

.floating-whatsapp svg:hover {
  transform:
    scale(1.08);
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 991.98px) {

  .catalog-navbar .lu-navbar {
    min-height:
      64px;
  }

  .catalog-logo {
    width:
      46px;

    height:
      46px;
  }

  .catalog-brand-text strong {
    font-size:
      13px;
  }

  .catalog-brand-text span {
    font-size:
      8px;
  }

  .catalog-nav-right {
    gap:
      10px;
  }

  .catalog-nav-link {
    display:
      none;
  }

  .catalog-hero {
    min-height:
      auto;

    padding:
      100px 0 70px;
  }

  .hero-content {
    max-width:
      650px;

    margin:
      0 auto;

    text-align:
      center;
  }

  .hero-label {
    justify-content:
      center;
  }

  .hero-content h1 {
    font-size:
      clamp(42px, 9vw, 60px);
  }

  .hero-content p {
    margin-left:
      auto;

    margin-right:
      auto;

    font-size:
      15px;
  }

  .hero-buttons {
    justify-content:
      center;
  }

  .hero-preview {
    margin-top:
      25px;
  }

  .hero-slide-image {
    max-height:
      390px;
  }

  .hero-preview::before {
    width:
      260px;

    height:
      260px;

    right:
      50%;

    transform:
      translateX(50%);
  }

  .hero-preview::after {
    width:
      350px;

    height:
      350px;

    right:
      50%;

    transform:
      translateX(50%);
  }

  .catalog-heading {
    padding-top:
      20px;
  }

  .benefits-section {
    padding-top:
      85px;
  }

}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 575.98px) {

  .catalog-navbar .lu-navbar {
    padding-left:
      14px;

    padding-right:
      14px;
  }

  .catalog-logo {
    width:
      43px;

    height:
      43px;
  }

  .catalog-brand-text span {
    display:
      none;
  }

  .catalog-brand-text strong {
    font-size:
      12px;

    letter-spacing:
      .1em;
  }

  .catalog-login {
    padding:
      8px 11px;

    font-size:
      10px;
  }

  .catalog-login img {
    width:
      16px !important;

    height:
      16px !important;
  }


  .catalog-hero {
    padding:
      88px 0 60px;
  }

  .hero-content h1 {
    font-size:
      40px;
  }

  .hero-content p {
    font-size:
      14px;
  }

  .hero-buttons {
    gap:
      11px;
  }

  .hero-btn-primary {
    min-height:
      46px;

    padding:
      0 18px;

    font-size:
      12px;
  }

  .hero-btn-secondary {
    width:
      100%;

    font-size:
      12px;
  }

  .hero-preview {
    padding:
      5px;
  }

  .hero-slide-image {
    max-width:
      230px !important;

    max-height:
      340px;
  }


  .visitor-section {
    padding:
      15px 0 35px;
  }

  .visitor-box {
    padding:
      20px 12px;

    border-radius:
      18px;
  }

  .visitor-heading h2 {
    font-size:
      23px;
  }

  .visitor-heading p {
    font-size:
      11px;
  }

  .visitor-stat {
    min-height:
      100px;

    padding:
      11px;

    gap:
      9px;
  }

  .visitor-icon {
    width:
      32px;

    height:
      32px;

    flex-basis:
      32px;
  }

  .visitor-stat strong {
    font-size:
      25px;
  }

  .visitor-stat span {
    font-size:
      8px;
  }


  .catalog-section {
    padding-bottom:
      55px;
  }

  .catalog-heading {
    padding:
      10px 12px 30px;
  }

  .catalog-heading h2 {
    font-size:
      31px;
  }

  .catalog-heading p {
    font-size:
      12px;
  }


  /* Card katalog mobile */

  #linkundangan-template .listtemplate>div,
  #linkundangan-template .listcustomdesign>div,
  #linkundangan-template .listpreset>div {
    padding-left:
      4px !important;

    padding-right:
      4px !important;
  }

  #linkundangan-template .card {
    border-radius:
      15px !important;
  }

  #linkundangan-template .card-header {
    padding:
      10px 9px 5px !important;
  }

  #linkundangan-template .card-title {
    font-size:
      11px !important;
  }

  #linkundangan-template .card-body {
    padding:
      3px 9px 9px !important;
  }

  #linkundangan-template .card-text {
    font-size:
      8px;

    line-height:
      1.45;
  }

  #linkundangan-template .card-footer a {
    min-height:
      34px;

    padding:
      5px 3px !important;

    font-size:
      8px !important;
  }

  #linkundangan-template .card-footer svg {
    width:
      15px !important;

    height:
      15px !important;
  }

  #linkundangan-template .btn {
    font-size:
      9px;
  }


  .benefits-section {
    padding:
      75px 0 55px;
  }

  .benefits-heading {
    margin-bottom:
      28px;
  }

  .benefits-heading h2 {
    font-size:
      29px;
  }

  .benefits-heading p {
    font-size:
      12px;
  }

  .benefit-card {
    padding:
      23px 19px;
  }

  .benefit-card img {
    width:
      65px !important;

    height:
      65px !important;
  }

  .benefit-card h3 {
    font-size:
      16px;
  }

  .benefit-card p {
    font-size:
      12px;
  }

  .brand-bottom {
    margin-top:
      45px;
  }

  .brand-bottom img {
    width:
      75px;

    height:
      75px;
  }

  .brand-bottom strong {
    font-size:
      21px;
  }


  .footer-main,
  .footer-bottom {
    align-items:
      flex-start;

    flex-direction:
      column;
  }

  .footer-bottom {
    gap:
      9px;
  }


  .floating-price {
    top:
      auto;

    bottom:
      15px;

    transform:
      none;

    padding:
      8px 10px;

    border-radius:
      0 10px 10px 0;
  }

  .floating-price span {
    font-size:
      8px;
  }

  .floating-price strong {
    font-size:
      12px;
  }

  .floating-whatsapp {
    right:
      11px;

    bottom:
      15px;
  }

  .floating-whatsapp p {
    display:
      none;
  }

  .floating-whatsapp svg {
    width:
      45px;

    height:
      45px;
  }

}


/* =========================================================
   REDUCE MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior:
      auto;
  }

  .hero-pattern {
    animation:
      none;
  }

  * {
    transition-duration:
      .01ms !important;
  }

}