@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700');

@tailwind base;

@tailwind components;

@tailwind utilities;
body {
  font-family: 'Montserrat', sans-serif;
  background: radial-gradient(
    circle,
    rgba(227, 253, 255, 1) 0%,
    rgba(247, 252, 249, 1) 63%
  );
  /* font-family: 'Noto Sans', sans-serif; */
}
.page-scroll {
  text-transform: none !important;
  font-weight: 600;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
#home,
#produk {
  background-image: url('../assets/img/background_body.png');
}
.navigation.sticky {
  position: fixed;
  background-image: url('../assets/img/background_body.png');
}

.page-scroll.active,
.page-scroll:hover {
  color: #ffffff;
  background: linear-gradient(
    90deg,
    rgba(81, 166, 79, 1) 0%,
    rgba(81, 166, 79, 1) 24%,
    rgba(4, 136, 197, 1) 100%
  );
  border-radius: 10px;
}

.color-theme-green {
  color: #5ca740;
}

.background-color-theme-green {
  background-color: #5ca740;
}

.color-theme-blue {
  color: #0184ca;
}

.background-color-theme-blue {
  background-color: #0184ca;
}

.background-color-theme-gradient {
  background: linear-gradient(
    90deg,
    rgba(81, 166, 79, 1) 0%,
    rgba(81, 166, 79, 1) 24%,
    rgba(4, 136, 197, 1) 100%
  );
}

.flyer {
  border-top-right-radius: 30px;
  position: relative;
}

#profile .flyer.bg-white,
#jaringan .flyer.bg-white {
  min-height: 50px;
}

.flyer-span {
  height: 100%;
  margin-top: -5px;
  margin-left: -5px;
  position: absolute;
}

.motto {
  padding-top: 25px;
  padding-bottom: 0px;
  min-height: 120px;
  border-radius: 15px;
}

.motto_1 {
  background: linear-gradient(
    120deg,
    rgba(209, 231, 218, 1) 0%,
    rgba(206, 229, 221, 1) 100%
  );
}

.motto_2 {
  background: linear-gradient(
    120deg,
    rgba(209, 231, 218, 1) 0%,
    rgba(203, 232, 236, 1) 100%
  );
}

.motto_3 {
  background: linear-gradient(
    120deg,
    rgba(206, 232, 233, 1) 0%,
    rgba(206, 232, 233, 1) 100%
  );
}

.motto_4 {
  background: linear-gradient(
    120deg,
    rgba(203, 231, 242, 1) 0%,
    rgba(203, 231, 242, 1) 100%
  );
}

.motto .bg-light {
  background: #ffffff;
  margin: 15px;
  border-radius: 15px;
  min-height: 160px;
}

#footer {
  background-image: url('../assets/img/footer.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.footer-links {
  line-height: 3rem;
}

#profile {
  background-image: url('../assets/img/profile_background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

#jaringan {
  background-image: url('../assets/img/background_jaringan.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.page-profile .navigation,
.page-jaringan .navigation {
  background-image: url('../assets/img/background_body.png');
  background-color: rgba(255, 255, 255, var(--bg-opacity));
  --bg-opacity: 1;
}

.flyer-banner {
  border-top-right-radius: 30px;
  border-bottom-left-radius: 30px;
  position: relative;
  margin-left: 10px;
  min-height: 50px;
}

.flyer-banner-span {
  height: 100%;
  margin-top: -7px;
  margin-left: -10px;
  position: absolute;
  height: auto;
}

.border-corner {
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.produk .lni-checkmark {
  font-weight: bold;
  font-size: 1.5em;
}

.produk .lni-checkmark.c-1 {
  color: #058ac5;
}

.produk .lni-checkmark.c-2 {
  color: #128eae;
}

.produk .lni-checkmark.c-3 {
  color: #289797;
}

.produk .lni-checkmark.c-4 {
  color: #349a7d;
}

.produk .lni-checkmark.c-5 {
  color: #44a063;
}

.produk .lni-checkmark.c-6 {
  color: #53a74b;
}
.background-color-theme-gradient-light {
  background: linear-gradient(
    42deg,
    rgba(219, 238, 219, 1) 0%,
    rgba(203, 231, 243, 1) 100%
  );
}

@media (min-width: 1024px) {
  .motto {
    min-height: 320px;
  }

  .motto .bg-light {
    min-height: 250px;
  }
}

.bg-tamu {
  background-image: url('../assets/img/tamu/bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.slider-tamu {
  height: 384px;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}