/* body {
  background-image: url("../img/background-wide.png");
  background-color: #1c2731;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover; 
  background-attachment: fixed; 
} */

/* ========= LANDING CONTENT ========= */
#mainHeader {
  transition: background 0.3s ease, backdrop-filter 0.3s ease,
    box-shadow 0.3s ease;
}

.hero {
  background-image: url("../img/undangan.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: white;
}

.hero-body {
  flex-grow: 1;
  flex-shrink: 0;
  padding: 3rem 1.5rem;
}

.hero.is-large {
   min-height: 100vh;
   padding-bottom: 25vh;
}

@media (max-width: 768px) {
  .hero {
   background-attachment: scroll !important;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: top center;
  }
}
/* ========= END OFLANDING CONTENT ========= */

/* ========= COUNTDOWN ========= */
#hitungmundur {
  list-style: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

#hitungmundur li:not(.separator) { /* EACH BOX */
  width: 110px;
  height: 110px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(191, 202, 227, 0.3);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#hitungmundur span { /* NUMBER */
  margin-top: 12px;
  font-size: 40px !important;
  font-weight: 700;
  font-family: "Montserrat", sans-serif;
  color: rgb(191, 202, 227);
  line-height: 1;
}

#hitungmundur p { /* LABEL */
  font-size: 16px !important;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgb(240, 233, 235);
}

#hitungmundur .separator { /* SEPARATOR (:) */
  font-size: 40px;
  font-weight: bold;
  color: rgb(191, 202, 227);
  line-height: 1;
}

@media (max-width: 768px) {
  #hitungmundur li:not(.separator) {
    width: 80px;
    height: 80px;
  }
  #hitungmundur span {
    font-size: 28px !important;
  }
  #hitungmundur p {
    font-size: 12px !important;
  }
}

#hitungmundur li:not(.separator) {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#hitungmundur li:not(.separator):hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}
/* ========= END OF COUNTDOWN ========= */

/* ========= HEADER  */
.transparent-header {
  background: rgba(255, 255, 255, 0.15) !important;
  /* backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); */
  box-shadow: none;
}

.solid-header {
  background: #ffffff !important;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

header {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Navbar toggler color switch */
.transparent-header .toggler-icon {
  background-color: #ffffff !important;
}

.transparent-header .navbar-toggler-icon {
  filter: invert(1) brightness(2);
}

.solid-header .toggler-icon {
  background-color: #06476a !important;
}

.solid-header .navbar-toggler-icon {
  filter: none;
}

.navbar-brand span {
  color: #06476a;
  font-weight: 600;
}

/* Base link style */
.nav-link.nav-link-custom {
  position: relative;
  display: inline-block;
  font-weight: 400;
  color: #06476a;
  padding-bottom: 6px;
  transition: all 0.25s ease;
}

.nav-link.nav-link-custom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #06476a;
  transition: width 0.25s ease;
}

.transparent-header .nav-link.nav-link-custom::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: #fff;
  transition: width 0.25s ease;
}

/* Hover effect */
.nav-link.nav-link-custom:hover {
  font-weight: 600;
  color: #06476a !important;
}

.transparent-header .nav-link.nav-link-custom:hover {
  font-weight: 600;
  color: #fff !important;
}

/* Animate underline */
@media screen and (max-width: 992px) {
  .nav-link.nav-link-custom:hover::before {
    /* width: 100%; */
    width: 25px;
  }
}

@media screen and (min-width: 992px) {
  .nav-link.nav-link-custom:hover::before {
    /* width: 100%; */
    margin-left: 10px;
    width: 25px;
  }
}

.navbar-collapse.collapse.show{
  backdrop-filter: blur(10px);
  border-radius: 10px;
}

.transparent-header .navbar-brand span,
.transparent-header .nav-link,
.transparent-header .raker-nav-title {
  color: #fff !important;
}

/* .transparent-header .navbar-brand img {
  filter: brightness(0) invert(1);
} */

.transparent-header .navbar-brand img.logo-dm {
  content: url("../img/logo-daya-white.svg");
}

.transparent-header .navbar-brand img.dm-juara {
  content: url("../img/logo-dm-juara-white.webp");
}

@media (max-width: 375px) {
  img.logo-dm, img.dm-juara{
    width: 100px;
  }
}
@media (min-width: 375px) {
  img.logo-dm, img.dm-juara{
    width: 120px;
  }
}

/* base style */
.navbar-toggler {
  border: none;
  padding: 0.25rem 0.5rem;
}
.navbar-toggler:focus {
  box-shadow: none;
}

.toggler-icon {
  width: 25px;
  height: 3px;
  background-color: #ffffff;
  display: block;
  transition: all 0.3s ease;
  border-radius: 2px;
  margin: 5px 0;
}

/* when expanded */
.navbar-toggler[aria-expanded="true"] .top-bar {
  transform: rotate(45deg);
  transform-origin: 10% 10%;
}

.navbar-toggler[aria-expanded="true"] .middle-bar {
  opacity: 0;
}

.navbar-toggler[aria-expanded="true"] .bottom-bar {
  transform: rotate(-45deg);
  transform-origin: 10% 90%;
}


/* ========= END OF HEADER ========= */

/* ========= PRELOADER ========= */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.12); }
  28%  { transform: scale(1); }
  42%  { transform: scale(1.12); }
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}

.heartbeat {
  animation: heartbeat 2s ease-in-out infinite;
  transform-origin: center;
}

.preloader-wrapper {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  background: url(../img/undangan.webp) no-repeat center;
  /* background: linear-gradient(rgb(28 39 49 / 0%), #1c2731),
    rgb(28 39 49) url(../img/inv-background.webp) no-repeat center; */
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.preloader-wrapper .preloader {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 120px;
}

body.preloader-site {
  overflow: hidden;
}
/* ========= END OF PRELOADER ========= */

/* ========= PROGRESS SCROLL ON TOP ========= */
#scrollTopBtn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: conic-gradient(
        #06476a 0deg,
        #06476a var(--progress),
        #ddd var(--progress),
        #ddd 360deg
    );
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
}

#scrollTopBtn::before {
    content: "";
    position: absolute;
    inset: 4px;
    background: #fff;
    border-radius: 50%;
    z-index: 1;
}

#scrollTopBtn.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#scrollTopBtn i {
    position: relative;
    z-index: 2;
    font-size: 18px;
    color: #06476a;
}
/* ========= END OF PROGRESS SCROLL ON TOP ========= */

/* ========= FOOTER ========= */
.end-invitation{
  background-image: url("../img/undangan.webp");
  background-size: cover; 
  background-position: center;
  background-repeat: no-repeat;
  /* background-attachment: fixed; */
  height: 100vh;
  width: 100%;
}

.bg-footer{
  background: #02151C;
}
/* ========= END OF FOOTER ========= */

.text-color-primary {
  color: #06476a;
}

.bg-color-primary {
  background: linear-gradient(to right, #06476a 0%, #0779b6 100%);
}

.br-10 {
  border-radius: 10px;
}

.card-shadow-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}