/**
 * ***************************************************************
 *   Website Name: ARDUniverse | Ashari Rasyid
 *   Description:  Website Official ARD Universe
 *   Author: Ashari Rasyid
 *   Version: 0.1
 *   Created: ARDUniverse
 * ****************************************************************
 *
 * @format
 */

/*------------------------------------------------------------------
[Table of contents]

1.  Template default CSS
	1.1	Variables
	1.2	Mixins
	1.3	Flexbox
	1.4	Reset
2.  Helper Css
3.  Header Section
4.  Hero Section
5.  Track Section
6.  Countdown Section
7.  Team Section
8.  Contact
9.  Footer Style
10. Album Pustaka
-------------------------------------------------------------------*/

/*----------------------------------------*/

/* Template default CSS
/*----------------------------------------*/

html,
body {
  height: 100%;
  /* font-family: "Now Regular"; */
  font-family: "Jost", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: #111111;
  font-weight: 400;
  font-family: "Jost", sans-serif;
  /* font-family: "Rajdhani", sans-serif; */
  font-family: "Jost", sans-serif;
}

h1 {
  font-size: 70px;
}

h2 {
  font-size: 36px;
}

h3 {
  font-size: 30px;
}

h4 {
  font-size: 24px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 16px;
}

p {
  font-size: 15px;
  /* font-family: "Now Regular"; */
  font-family: "Jost", sans-serif;
  color: #444444;
  font-weight: 400;
  line-height: 26px;
  margin: 0 0 15px 0;
}

.quill-content {
  color: #444444;
  font-family: "Jost", sans-serif;
  font-weight: 400;
  line-height: 26px;
}

.quill-content p {
  color: inherit;
  font-weight: 400;
  margin: 0 0 15px 0;
}

.quill-content strong,
.quill-content b {
  font-weight: 700;
}

.quill-content em,
.quill-content i {
  font-style: italic;
}

.quill-content ul,
.quill-content ol {
  padding-left: 1.35rem;
  margin: 0 0 15px 0;
}

.quill-content li {
  margin-bottom: 6px;
}

.quill-content .ql-align-center {
  text-align: center;
}

.quill-content .ql-align-right {
  text-align: right;
}

.quill-content .ql-align-justify {
  text-align: justify;
}

img {
  max-width: 100%;
}

input:focus,
select:focus,
button:focus,
textarea:focus {
  outline: none;
}

a:hover,
a:focus {
  text-decoration: none;
  outline: none;
  color: #ffffff;
}

ul,
ol {
  padding: 0;
  margin: 0;
}

/*---------------------
  Helper CSS
-----------------------*/

.section-title {
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.section-title.center-title {
  text-align: center;
}

.section-title h2 {
  font-size: 42px;
  color: #111111;
  font-weight: 700;
  text-transform: uppercase;
}

.section-title h1 {
  font-size: 100px;
  color: #f2f2f2;
  font-family: "Rockville Solid Regular";
  position: absolute;
  left: 0;
  top: -45px;
  width: 100%;
  z-index: -1;
}

.set-bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.spad {
  padding-top: 100px;
  padding-bottom: 100px;
}

.text-white h1,
.text-white h2,
.text-white h3,
.text-white h4,
.text-white h5,
.text-white h6,
.text-white p,
.text-white span,
.text-white li,
.text-white a {
  color: #fff;
}

/* buttons */

.primary-btn {
  display: inline-block;
  font-size: 15px;
  text-transform: uppercase;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 14px 25px 12px;
  color: #ffffff;
  background: #5c00ce;
  letter-spacing: 2px;
  border-radius: 5px;
}

.primary-btn:hover {
  display: inline-block;
  font-size: 15px;
  text-transform: uppercase;
  padding: 14px 25px 12px;
  color: #5c00ce;
  background: rgb(247, 247, 247);
  letter-spacing: 2px;
  border-radius: 5px;
  transition: ease-out 0.3s;
  -webkit-transition: ease-out 0.3s;
  -moz-transition: ease-out 0.3s;
  -ms-transition: ease-out 0.3s;
  -o-transition: ease-out 0.3s;
}

.primary-btn.border-btn {
  background: transparent;
  border: 2px solid #5c00ce;
  color: #111111;
}

.primary-btn.border-btn:hover {
  background: #5c00ce;
  color: white;
  transition: ease-out 0.3s;
  -webkit-transition: ease-out 0.3s;
  -moz-transition: ease-out 0.3s;
  -ms-transition: ease-out 0.3s;
  -o-transition: ease-out 0.3s;
}

.site-btn {
  font-size: 15px;
  color: #ffffff;
  background: #5c00ce;
  font-weight: 700;
  letter-spacing: 2px;
  border: none;
  text-transform: uppercase;
  display: inline-block;
  padding: 14px 30px;
  width: 100%;
}

/* Preloder */
#preloder {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999999;
  background: #000000;
  display: grid;
  place-items: center;
}

/* From Uiverse.io by marcelodolza - logo adapted to website upload */
.loader {
  --size: clamp(760px, 45vw, 160px);
  --duration: 2.5s;
  --logo-color: grey;
  --background: linear-gradient(
    0deg,
    rgb(30 27 109 / 20%) 0%,
    rgb(137 76 161 / 20%) 100%
  );
  height: var(--size);
  aspect-ratio: 1;
  position: relative;
  pointer-events: none;
  max-width: 82vw;
  max-height: 82vw;
}

.loader .box {
  position: absolute;
  background: var(--background);
  border-radius: 50%;
  box-shadow:
    rgba(0, 0, 0, 0.5) 0px 10px 10px 0,
    inset rgba(205, 155, 255, 0.5) 0px 5px 10px -7px;
  animation: ripple var(--duration) infinite ease-in-out;
  inset: var(--inset);
  animation-delay: calc(var(--i) * 0.15s);
  z-index: calc(var(--i) * -1);
  pointer-events: all;
  transition: all 0.3s ease;
}

.loader .box:last-child {
  filter: blur(30px);
}

.loader .box:not(:last-child):hover {
  filter: brightness(2.5) blur(5px);
}

.loader .logo {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: 23%;
}

.loader .logo img {
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.8);
  animation: color-change var(--duration) infinite ease-in-out;
}

@media (max-width: 1199px) {
  .loader {
    --size: clamp(470px, 58vw, 620px);
    max-width: 88vw;
    max-height: 88vw;
  }
}

@media (max-width: 768px) {
  .loader {
    --size: clamp(560px, 82vw, 900px);
    max-width: 90vw;
    max-height: 90vw;
  }

  .loader .logo {
    padding: 24%;
  }
}

@media (max-width: 480px) {
  .loader {
    --size: min(92vw, 880px);
  }

  .loader .logo {
    padding: 25%;
  }
}

@keyframes ripple {
  0% {
    transform: scale(1);
    box-shadow:
      rgba(0, 0, 0, 0.5) 0px 10px 10px 0,
      inset rgba(205, 155, 255, 0.5) 0px 5px 10px -7px;
  }
  65% {
    transform: scale(1.4);
    box-shadow: rgba(0, 0, 0, 0) 0px 0 0 0;
  }
  100% {
    transform: scale(1);
    box-shadow:
      rgba(0, 0, 0, 0.5) 0px 10px 10px 0,
      inset rgba(205, 155, 255, 0.5) 0px 5px 10px -7px;
  }
}

@keyframes color-change {
  0% {
    opacity: 0.72;
    filter: grayscale(1) brightness(0.8);
  }
  50% {
    opacity: 1;
    filter: grayscale(0) brightness(1.7);
  }
  100% {
    opacity: 0.72;
    filter: grayscale(1) brightness(0.8);
  }
}

/*---------------------
  Header
-----------------------*/

.header {
  background: rgba(42, 1, 74, 0.5);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
}

.header.header--normal {
  position: relative;
  background: #290849;
}

.header__logo {
  padding: 20px 0 25px;
}

.header__logo a {
  display: inline-block;
}

.header__nav {
  text-align: right;
}

.header__menu {
  padding: 31px 0 27px;
  display: inline-block;
  margin-right: 40px;
}

.header__menu ul li {
  list-style: none;
  display: inline-block;
  margin-right: 45px;
  position: relative;
}

.header__menu ul li.active a:after {
  opacity: 1;
}

.header__menu ul li:hover a:after {
  opacity: 1;
}

.header__menu ul li:hover .dropdown {
  top: 34px;
  opacity: 1;
  visibility: visible;
}

.header__menu ul li:last-child {
  margin-right: 0;
}

.header__menu ul li .dropdown {
  position: absolute;
  left: 0;
  top: 56px;
  width: 150px;
  background: #290849;
  text-align: left;
  padding: 2px 0;
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.header__menu ul li .dropdown li {
  display: block;
  margin-right: 0;
}

.header__menu ul li .dropdown li a {
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
  padding: 8px 20px;
  text-transform: capitalize;
}

.header__menu ul li .dropdown li a:hover {
  font-size: 14px;
  background-color: #5c00ce;
  transition: all 0.2s;
  font-weight: 400;
  padding: 8px 20px;
  text-transform: capitalize;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
}

.header__menu ul li .dropdown li a:after {
  display: none;
}

.header__menu ul li a {
  font-size: 15px;
  text-transform: uppercase;
  color: #ffffff;
  display: block;
  padding: 6px 0;
  position: relative;
}

.header__menu ul li a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all, 0.5s;
  -o-transition: all, 0.5s;
  transition: all, 0.5s;
  opacity: 0;
}

.header__right__social {
  display: inline-block;
  margin-left: 50px;
}

.header__right__social a {
  display: inline-block;
  font-size: 16px;
  color: #ffffff;
  margin-right: 15px;
}

.header__right__social a:hover {
  display: inline-block;
  font-size: 16px;
  color: #8c14c0;
  margin-right: 15px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.header__right__social a:last-child {
  margin-right: 0;
}

.slicknav_menu {
  display: none;
}

/*---------------------
  Hero
-----------------------*/

.hero {
  padding-top: 400px;
  padding-bottom: 295px;
  position: relative;
}

.hero__text {
  text-align: center;
}

.hero__text span {
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.hero__text h1 {
  font-size: 110px;
  font-family: "Rockville Solid Regular";
  color: #ffffff;
  margin-bottom: 20px;
  margin-top: 22px;
}

.hero__text p {
  color: #ffffff;
  margin-bottom: 20px;
}

.hero__text .play-btn {
  font-size: 26px;
  color: #5c00ce;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
  line-height: 90px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.hero__text .play-btn:hover {
  font-size: 26px;
  color: #5c00ce;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background: #5c00ce;
  display: inline-block;
  line-height: 90px;
  text-align: center;
  position: relative;
  z-index: 1;
  -webkit-transition: background-color 1s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;
}

.hero__text .play-btn i {
  position: relative;
  top: 2px;
  left: 2px;
}

.hero__text .play-btn:after {
  position: absolute;
  left: 15px;
  top: 15px;
  height: 60px;
  width: 60px;
  background: #ffffff;
  border-radius: 50%;
  content: "";
  z-index: -1;
}

.linear__icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  margin-left: -16px;
  -webkit-animation: mymove 0.5s infinite alternate;
  animation: mymove 0.5s infinite alternate;
}

.linear__icon i {
  font-size: 50px;
  color: #5c00ce;
}

@-webkit-keyframes mymove {
  0% {
    bottom: 0;
  }

  100% {
    bottom: -10px;
  }
}

@keyframes mymove {
  0% {
    bottom: 0;
  }

  100% {
    bottom: -10px;
  }
}

/*---------------------
  Popup Modals
-----------------------*/

/* Overlay */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

/* Box konten */
.popup-content {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  position: relative;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

/* Saat aktif → animasi muncul */
.popup-overlay.show .popup-content {
  opacity: 1;
  transform: scale(1);
}

/* Tombol close */
.popup-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
  color: #5c00ce;
  font-weight: bold;
}

/* Saat muncul */
.popup-overlay.show .popup-content {
  opacity: 1;
  transform: scale(1);
  transition: all 0.4s ease;
}

/* Saat menghilang */
.popup-overlay.hide .popup-content {
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s ease;
}

/* Responsif Popup */
@media (max-width: 768px) {
  .popup-content {
    max-width: 320px;
    padding: 20px;
    font-size: 14px;
  }

  .popup-close {
    font-size: 20px;
    top: 8px;
    right: 10px;
  }
}

@media (max-width: 480px) {
  .popup-content {
    max-width: 280px;
    padding: 15px;
    font-size: 13px;
  }

  .popup-close {
    font-size: 18px;
    top: 6px;
    right: 8px;
  }
}

/*---------------------
  Events
-----------------------*/

.event {
  padding-bottom: 60px;
}

.event .section-title {
  margin-bottom: 10px;
  position: relative;
}

.event .section-title:after {
  position: absolute;
  right: 46px;
  top: 25px;
  height: 2px;
  width: 775px;
  background: rgba(225, 225, 225, 0.3);
  content: "";
  z-index: -1;
}

.event__slider .col-lg-4 {
  max-width: 100%;
}

.event__slider.owl-carousel .owl-stage-outer {
  padding-top: 30px;
  padding-bottom: 40px;
}

.event__slider.owl-carousel .owl-nav {
  position: absolute;
  top: 50%;
  /* posisi di tengah vertikal */
  left: 0;
  width: 100%;
  /* full lebar slider */
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
  /* biar background nav gak ngeblok konten */
}

.event__slider.owl-carousel .owl-nav button {
  pointer-events: all;
  /* panah tetap bisa diklik */
  font-size: 22px;
  color: #fff !important;
  background: #5c00ce !important;
  opacity: 0.9;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s;
}

.event__slider.owl-carousel .owl-nav button:hover {
  opacity: 1;
  transform: scale(1.1);
}

.event__slider.owl-carousel .owl-nav button:last-child {
  margin-right: 0;
}

.event__item {
  -webkit-box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
  box-shadow: 0px 3px 15px rgba(22, 41, 124, 0.1);
}

.event__item__pic {
  height: 360px;
  position: relative;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.event__item__pic .tag-date {
  position: absolute;
  left: 0;
  bottom: -21px;
  width: 100%;
  text-align: center;
}

.event__item__pic .tag-date span {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  background: #5c00ce;
  padding: 8px 8px 9px 10px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.event__item__text .tag-date span a {
  font-size: 15px;
  color: #5c00ce;
  display: inline-block;
  background: rgb(247, 247, 247);
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.event__item__text .tag-date span a:hover {
  font-size: 15px;
  color: #ffffff;
  display: inline-block;
  background: #5c00ce;
  margin-top: 10px;
  padding: 3px 8px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
}

.event__item__text {
  text-align: center;
  padding: 45px 10px 25px;
}

.event__item__text h4 {
  font-size: 26px;
  font-weight: 700;
  color: #111111;
  margin-bottom: 10px;
}

.event__item__text p {
  color: #888888;
  margin-bottom: 0;
}

.event__item__text p i {
  color: #5c00ce;
  margin-right: 8px;
  font-size: 17px;
}

.label-new {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #5c00ce;
  /* merah */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 2;
}


/*---------------------
  Track
-----------------------*/

.track {
  padding-top: 120px;
  padding-bottom: 40px;
  overflow: hidden;
}

.track .section-title {
  margin-bottom: 105px;
}

.track__content {
  height: 502px;
  overflow-y: auto;
}

.track__all {
  text-align: right;
  margin-bottom: 100px;
}

.jp-play {
  position: relative;
  height: 50px;
  width: 50px;
  background: transparent;
  border: 2px solid #e1e1e1;
  border-radius: 50%;
}

.jp-play:after {
  position: absolute;
  display: block;
  left: 17px;
  top: 12px;
  width: 16px;
  height: 20px;
  background: url(../img/play-default.png);
  content: "";
}

.jp-state-playing .jp-play {
  background: #5c00ce !important;
  border-color: #5c00ce !important;
}

.jp-state-playing .jp-play:after {
  background: url(../img/pause.png) !important;
  left: 15px;
  top: 12px;
}

.jp-audio .jp-play:focus {
  background: #5c00ce !important;
  border-color: #5c00ce !important;
}

.jp-audio .jp-play:focus:after {
  background: url(../img/play.png);
}

.jp-seek-bar>div {
  height: 5px;
  background: #e1e1e1;
  cursor: pointer;
  width: 245px;
}

.player_bars {
  width: 350px;
  display: table;
  padding-left: 50px;
  position: relative;
  padding-top: 25px;
  float: left;
  margin-right: 30px;
}

.jp-play-bar {
  position: relative;
  height: 100%;
  background: #5c00ce;
  overflow: visible !important;
}

.jp-current-time {
  font-size: 15px;
  color: #111111;
  position: absolute;
  left: -50px;
  top: -9px;
}

.jp-duration {
  font-size: 15px;
  color: #111111;
  position: absolute;
  right: 0;
  top: 16px;
}

.player_controls_box {
  width: 50px;
  float: left;
  margin-right: 20px;
}

.jp-mute {
  font-size: 18px;
  border: none;
  background: none;
  color: #111111;
  position: absolute;
  left: 0;
  top: 13px;
}

.jp-volume-bar {
  height: 5px;
  width: 70px;
  background: #e1e1e1;
  cursor: pointer;
}

.jp-volume-bar-value {
  background: #5c00ce;
  height: 100%;
}

.jp-volume-controls {
  position: relative;
  width: 95px;
  float: left;
  padding-left: 30px;
  padding-top: 25px;
}

.single_player_container {
  overflow: hidden;
  margin-bottom: 40px;
}

.single_player_container:last-child {
  margin-bottom: 0;
}

.single_player_container h4 {
  font-size: 26px;
  color: #111111;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.track__pic {
  position: relative;
  z-index: 1;
}

.track__pic:after {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  content: "";
  z-index: -1;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

.track__pic img {
  position: relative;
  top: -50px;
  width: calc(100% - 40px);
  margin-left: 40px;
  height: 502px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
}

/*---------------------
  Youtube
-----------------------*/

.youtube {
  padding-bottom: 50px;
}

.youtube .section-title {
  text-align: center;
}

.youtube .section-title h1 {
  font-size: 90px;
}

.youtube__item {
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  margin-bottom: 30px;
}

.youtube__item:hover {
  -webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
  box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.youtube__item__pic {
  height: 200px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.youtube__item__pic .play-btn {
  font-size: 16px;
  color: #5c00ce;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  display: inline-block;
  line-height: 60px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.youtube__item__pic .play-btn:hover {
  font-size: 16px;
  color: #5c00ce;
  height: 60px;
  width: 60px;
  border-radius: 50%;
  background: #5c00ce;
  display: inline-block;
  line-height: 60px;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.youtube__item__pic .play-btn i {
  position: relative;
  top: 2px;
  left: 2px;
}

.youtube__item__pic .play-btn:after {
  position: absolute;
  left: 10px;
  top: 10px;
  height: 40px;
  width: 40px;
  background: #ffffff;
  border-radius: 50%;
  content: "";
  z-index: -1;
}

.youtube__item__text {
  padding: 25px 30px 20px 20px;
  background: #ffffff;
}

.youtube__item__text h4 {
  font-size: 26px;
  color: #111111;
  line-height: 34px;
  font-weight: 700;
}

/*---------------------
  Countdown
-----------------------*/

.countdown {
  padding-bottom: 560px;
}

.countdown.countdown--page {
  padding-top: 150px;
  padding-bottom: 150px;
}

.countdown__text {
  text-align: center;
  margin-bottom: 36px;
}

.countdown__text h1 {
  font-size: 90px;
  color: #ffffff;
  font-family: "Rockville Solid Regular";
  color: #ffffff;
  margin-bottom: 25px;
}

.countdown__text h4 {
  font-size: 26px;
  font-family: "Now Regular";
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 4px;
}

.buy__tickets {
  text-align: center;
}

#countdown {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 15px;
}

#countdown h2 {
  color: white;
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  text-shadow:
    -2px -2px 0 #5c00ce,
    2px -2px 0 #5c00ce,
    -2px 2px 0 #5c00ce,
    2px 2px 0 #5c00ce;
  /* outline ungu */
}

/* Countdown wrapper */
#countdown {
  display: flex;
  flex-wrap: wrap;
  /* biar kalau sempit turun ke bawah */
  gap: 10px;
  justify-content: center;
  /* rata tengah */
  align-items: center;
  margin-top: 20px;
}

/* Box countdown */
#countdown .time-box {
  background: #5c00ce;
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  min-width: 90px;
  text-align: center;

  box-shadow: 0 4px 15px rgba(92, 0, 206, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.3);
}

#countdown .time-box span {
  display: block;
  font-size: 32px;
  font-weight: bold;
}

#countdown .time-box small {
  font-size: 14px;
  opacity: 0.8;
}

/* Responsive untuk HP */
@media (max-width: 768px) {
  #countdown .time-box {
    min-width: 70px;
    padding: 10px 12px;
  }

  #countdown .time-box span {
    font-size: 24px;
  }

  #countdown .time-box small {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  #countdown {
    gap: 6px;
  }

  #countdown .time-box {
    min-width: 60px;
    padding: 8px 10px;
  }

  #countdown .time-box span {
    font-size: 20px;
  }

  #countdown .time-box small {
    font-size: 11px;
  }
}

/*---------------------
  Discography
-----------------------*/

.discography {
  padding-bottom: 40px;
  padding-top: 70px;
  overflow: hidden;
}

.discography .section-title {
  margin-bottom: 90px;
}

.discography__item {
  margin-bottom: 45px;
  -webkit-box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
  box-shadow: 0px 5px 10px rgba(22, 41, 124, 0.1);
}

.discography__item__pic img {
  min-width: 100%;
}

.discography__item__text {
  padding: 25px 30px 35px;
  text-align: center;
}

.discography__item__text span {
  font-size: 18px;
  color: #5c00ce;
  font-weight: 700;
}

.discography__item__text h4 {
  font-size: 22px;
  text-transform: uppercase;
  color: #111111;
  margin-top: 10px;
  margin-bottom: 25px;
}

.discography__item__text a {
  display: inline-block;
  margin-right: 10px;
}

.discography__item__text a:last-child {
  margin-right: 0;
}

.pagination__links {
  text-align: center;
  padding-top: 10px;
}

.pagination__links.blog__pagination {
  text-align: left;
}

.pagination__links a {
  display: inline-block;
  font-size: 15px;
  color: #111111;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: #f2f2f2;
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
  margin-right: 6px;
  margin-bottom: 5px;
  padding: 14px 22px 12px;
}

.pagination__links a:last-child {
  margin-right: 0;
}

.pagination__links a:hover {
  background: #290849;
  color: #ffffff;
}

/*---------------------
  Footer
-----------------------*/

.footer {
  padding-top: 300px;
  padding-bottom: 60px;
  margin-top: -547px;
  height: 549px;
}

.footer.footer--normal {
  margin-top: 0;
}

.footer__address {
  margin-bottom: 50px;
}

.footer__address ul li {
  list-style: none;
  padding-left: 70px;
  position: relative;
  margin-bottom: 30px;
}

.footer__address ul li:last-child {
  margin-bottom: 0;
}

.footer__address ul li i {
  font-size: 18px;
  color: #5c00ce;
  height: 50px;
  width: 50px;
  background: #ffffff;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}

.footer__address ul li p {
  color: #ffffff;
  opacity: 0.7;
  margin-bottom: 8px;
}

.footer__address ul li h6 {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
}

.footer__social {
  text-align: center;
  position: relative;
  margin-bottom: 50px;
}

.footer__social::before {
  position: absolute;
  left: -46px;
  top: 3px;
  width: 1px;
  height: 130px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}

.footer__social::after {
  position: absolute;
  right: -50px;
  top: 3px;
  width: 1px;
  height: 130px;
  background: rgba(255, 255, 255, 0.2);
  content: "";
}

.footer__social h2 {
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 25px;
}

.footer__social .footer__social__links a {
  font-size: 18px;
  color: #5c00ce;
  height: 50px;
  width: 50px;
  background: #ffffff;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
}

.footer__social .footer__social__links a:hover {
  font-size: 18px;
  color: white;
  height: 50px;
  width: 50px;
  background: #5c00ce;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  margin-right: 10px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.footer__social .footer__social__links a:last-child {
  margin-right: 0;
}

.footer__websites {
  margin-bottom: 50px;
}

/*.footer__newslatter {*/
/*  margin-bottom: 50px;*/
/*}*/

/*.footer__newslatter h4 {*/
/*  font-size: 26px;*/
/*  color: #ffffff;*/
/*  font-weight: 700;*/
/*  margin-bottom: 30px;*/
/*}*/

/*.footer__newslatter form {*/
/*  position: relative;*/
/*}*/

/*.footer__newslatter form input {*/
/*  height: 50px;*/
/*  font-size: 15px;*/
/*  color: #ffffff;*/
/*  width: 100%;*/
/*  background: transparent;*/
/*  border: 1px solid rgba(255, 255, 255, 0.2);*/
/*  padding-left: 20px;*/
/*}*/

/*.footer__newslatter form input::-webkit-input-placeholder {*/
/*  color: #ffffff;*/
/*}*/

/*.footer__newslatter form input::-moz-placeholder {*/
/*  color: #ffffff;*/
/*}*/

/*.footer__newslatter form input:-ms-input-placeholder {*/
/*  color: #ffffff;*/
/*}*/

/*.footer__newslatter form input::-ms-input-placeholder {*/
/*  color: #ffffff;*/
/*}*/

/*.footer__newslatter form input::placeholder {*/
/*  color: #ffffff;*/
/*}*/

/*.footer__newslatter form button {*/
/*  font-size: 18px;*/
/*  color: #5c00ce;*/
/*  position: absolute;*/
/*  right: 0;*/
/*  top: 0;*/
/*  height: 100%;*/
/*  padding: 0 16px;*/
/*  background: #ffffff;*/
/*  border: none;*/
/*}*/

.footer__copyright__text {
  text-align: center;
}

.footer__copyright__text p {
  color: #ffffff;
}

.footer__copyright__text a {
  color: #999999;
  text-decoration: underline;
}

.footer__copyright__text a:hover {
  color: #5c00ce;
}

.footer__copyright__text i {
  color: #c11;
}

/*---------------------
  Breadcrumb
-----------------------*/

.breadcrumb-option {
  padding-top: 35px;
}

.breadcrumb__links a {
  font-size: 15px;
  color: #111111;
  margin-right: 18px;
  display: inline-block;
  position: relative;
}

.breadcrumb__links a:after {
  position: absolute;
  right: -14px;
  top: 0;
  content: "|";
  color: #888888;
}

.breadcrumb__links a i {
  margin-right: 5px;
}

.breadcrumb__links span {
  font-size: 15px;
  color: #888888;
  display: inline-block;
}

/*---------------------
  About
-----------------------*/

.about {
  padding-top: 0;
}

.about.about--page {
  padding-top: 80px;
  padding-bottom: 80px;
}

.about.about--page .section-title {
  margin-bottom: 28px;
}

.about.about--page .section-title h2 {
  line-height: 55px;
}

.about.about--page .about__text {
  padding-top: 15px;
}

.about.about--page .about__text p {
  color: #111111;
}

.about__text {
  padding-top: 110px;
}

.about__text p {
  margin-bottom: 35px;
}

/*---------------------
  Skills
-----------------------*/

.skills {
  padding-bottom: 0;
  padding-top: 80px;
}

.skills__content {
  background: #5c00ce;
  height: 550px;
  padding: 100px 70px 60px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.skills__content .section-title h2 {
  color: #ffffff;
}

.skills__content .section-title h1 {
  color: #ffffff;
  opacity: 0.1;
  text-align: center;
}

.skills__content p {
  color: #ffffff;
  margin-bottom: 32px;
}

.skill__bar__item {
  margin-bottom: 20px;
}

.skill__bar__item p {
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 10px;
}

.skill__bar__item .barfiller {
  width: 100%;
  height: 5px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  margin-bottom: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.skill__bar__item .barfiller .tip {
  margin-top: -32px;
  padding: 0;
  font-size: 15px;
  color: #fff;
  background: transparent;
}

.skill__bar__item .barfiller .tip:after {
  display: none;
}

.skills__video {
  height: 550px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.skills__video .play-btn {
  font-size: 26px;
  color: #5c00ce;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background: rgba(117, 31, 221, 0.3);
  display: inline-block;
  line-height: 90px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.skills__video .play-btn i {
  position: relative;
  top: 2px;
  left: 2px;
}

.skills__video .play-btn:after {
  position: absolute;
  left: 15px;
  top: 15px;
  height: 60px;
  width: 60px;
  background: #ffffff;
  border-radius: 50%;
  content: "";
  z-index: -1;
}

/*---------------------
  About Pic
-----------------------*/

.about-pic {
  overflow: hidden;
}

.about-pic .container-fluid {
  padding-right: 0;
}

.about-pic img {
  min-width: 100%;
  margin-bottom: 10px;
  padding-right: 10px;
}

/*---------------------
  About Services
-----------------------*/

.about-services {
  padding-bottom: 50px;
}

.about-services .section-title {
  margin-bottom: 60px;
}

.about__services__item {
  -webkit-transition: all, 0.3s;
  -o-transition: all, 0.3s;
  transition: all, 0.3s;
}

.about__services__item:hover {
  -webkit-box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
  box-shadow: 0px 3px 30px rgba(22, 41, 124, 0.1);
}

.about__services__item__pic {
  height: 240px;
  position: relative;
}

.about__services__item__pic .icon {
  height: 50px;
  width: 50px;
  background: #5c00ce;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -25px;
}

.about__services__item__text {
  text-align: center;
  padding: 50px 10px 30px;
}

.about__services__item__text h4 {
  font-size: 26px;
  color: #111111;
  font-weight: 700;
  margin-bottom: 12px;
}

.about__services__item__text p {
  margin-bottom: 0;
}

/*---------------------
  Feature
-----------------------*/

.feature {
  padding-bottom: 70px;
}

.feature.feature--about .section-title span {
  color: #0071e4;
}

.feature.feature--about .feature__item {
  background: #f5f5f5;
}

.feature.feature--about .feature__item h5 {
  color: #111111;
}

.feature__text {
  padding-top: 80px;
}

.feature__text .section-title {
  margin-bottom: 20px;
}

.feature__text p {
  margin-bottom: 26px;
}

.feature__item {
  background: #0c2b4b;
  text-align: center;
  padding: 40px 10px 35px;
  margin-bottom: 30px;
}

.feature__item.right-column {
  margin-top: 120px;
}

.feature__item h5 {
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  margin-top: 25px;
}

/*---------------------
  Tours
-----------------------*/

.tours {
  padding-top: 80px;
  padding-bottom: 60px;
}

.tours__item__text {
  padding-right: 30px;
  margin-bottom: 100px;
}

.tours__item__text.tours__item__text--right {
  padding-left: 30px;
  padding-right: 0;
}

.tours__item__text h2 {
  font-size: 42px;
  color: #111111;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.tours__item__text .tours__text__widget {
  overflow: hidden;
  border-bottom: 2px solid #f2f2f2;
  padding-bottom: 38px;
}

.tours__item__text .tours__text__widget ul {
  float: left;
}

.tours__item__text .tours__text__widget ul li {
  list-style: none;
  font-size: 15px;
  color: #111111;
  padding-left: 35px;
  position: relative;
  margin-bottom: 10px;
}

.tours__item__text .tours__text__widget ul li:last-child {
  margin-bottom: 0;
}

.tours__item__text .tours__text__widget ul li i {
  color: #5c00ce;
  position: absolute;
  left: 0;
  top: 3px;
}

.tours__item__text .tours__text__widget ul li span {
  display: inline-block;
  padding-right: 8px;
  position: relative;
  margin-right: 5px;
}

.tours__item__text .tours__text__widget ul li span:last-child {
  padding-right: 0;
  margin-right: 0;
}

.tours__item__text .tours__text__widget ul li span:last-child:after {
  display: none;
}

.tours__item__text .tours__text__widget ul li span:after {
  position: absolute;
  right: 0;
  top: 0;
  content: "|";
}

.tours__item__text .tours__text__widget .price {
  font-size: 18px;
  color: #ffffff;
  font-weight: 700;
  display: inline-block;
  padding: 14px 25px 12px 30px;
  background: #5c00ce;
  float: right;
}

.tours__item__text .tours__text__desc {
  padding-top: 40px;
  margin-bottom: 65px;
}

.tours__item__text .tours__text__desc p {
  color: #111111;
  margin-bottom: 20px;
}

.tours__item__text .tours__text__desc p:last-child {
  margin-bottom: 0;
}

.tours__item__pic {
  position: relative;
  z-index: 1;
  padding-right: 50px;
  margin-bottom: 110px;
  padding-left: 30px;
}

.tours__item__pic.tours__item__pic--left {
  padding-left: 50px;
  padding-right: 0;
}

.tours__item__pic.tours__item__pic--left:after {
  left: 0;
}

.tours__item__pic.tours__item__pic--last {
  margin-bottom: 0;
}

.tours__item__pic:after {
  position: absolute;
  left: 50px;
  top: -50px;
  width: calc(100% - 50px);
  height: 100%;
  border: 20px solid rgba(9, 53, 247, 0.1);
  content: "";
  z-index: -1;
}

.tours__item__pic img {
  min-width: 100%;
}


/*---------------------
  Videos
-----------------------*/

.videos {
  padding-bottom: 90px;
}

.videos .section-title {
  margin-bottom: 70px;
}

.videos__large__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  height: 585px;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.videos__large__item.set-bg {
  background-image: url('https://i.ytimg.com/vi/srPmUorSUp8/maxresdefault.jpg');
}

.videos__large__item .play-btn {
  height: 50px;
  width: 50px;
  background: #5c00ce;
  border-radius: 50%;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  display: inline-block;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.videos__large__item .play-btn:hover {
  background: #ffffff;
  color: #5c00ce;
  transition: all 0.3s;
}

.videos__large__item__text {
  background: rgba(7, 14, 38, 0.7);
  padding: 25px 30px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

.videos__large__item__text h4 {
  color: #ffffff;
  font-weight: 700;
}

.videos__large__item__text ul li {
  font-size: 13px;
  list-style: none;
  display: inline-block;
  margin-right: 18px;
  color: #ffffff;
  position: relative;
}

.videos__large__item__text ul li:after {
  position: absolute;
  right: -12px;
  top: 2px;
  height: 17px;
  width: 1px;
  background: #ffffff;
  content: "";
}

.videos__large__item__text ul li:last-child {
  margin-right: 0;
}

.videos__large__item__text ul li:last-child:after {
  display: none;
}

@media (max-width: 768px) {
  .videos__large__item {
    height: 50vh;
  }
}

.videos__slider {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.videos__slider .item {
  flex: 1 1 calc(25% - 10px);
  /* Menyesuaikan ukuran item dan jarak */
  box-sizing: border-box;
  position: relative;
  margin: 0 10px;
  /* Jarak horizontal antara item */
}

.videos__slider .item:not(:last-child) {
  margin-right: 10px;
  /* Menambahkan jarak hanya di sebelah kanan item */
}

.videos__slider .videos__item__pic {
  height: 0;
  padding-bottom: 56.25%;
  position: relative;
  overflow: hidden;
  width: 100%;
}

.videos__slider .videos__item__pic img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.videos__slider .play-btn-video {
  height: 40px;
  width: 40px;
  background: #5c00ce;
  border-radius: 50%;
  font-size: 14px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
}

.videos__slider .play-btn-video:hover {
  background: #ffffff;
  color: #5c00ce;
  transition: all 0.3s;
}

.videos__slider .videos__item__text {
  padding-top: 10px;
}

.videos__slider .videos__item__text h5 {
  color: #111111;
  font-weight: 700;
  line-height: 26px;
  margin-bottom: 5px;
}

.videos__slider .videos__item__text ul li {
  font-size: 13px;
  list-style: none;
  display: inline-block;
  margin-right: 18px;
  color: #5c00ce;
  position: relative;
}

.videos__slider .videos__item__text ul li:after {
  position: absolute;
  right: -12px;
  top: 2px;
  height: 17px;
  width: 1px;
  background: #888888;
  content: "";
}

.videos__slider .videos__item__text ul li:last-child {
  margin-right: 0;
  color: #888888;
}

.videos__slider .videos__item__text ul li:last-child:after {
  display: none;
}

.videos__slider.owl-carousel .owl-nav button {
  font-size: 18px;
  color: #888888;
  height: 50px;
  width: 25px;
  background: #ffffff;
  line-height: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.videos__slider.owl-carousel .owl-nav button.owl-prev {
  left: 15px;
}

.videos__slider.owl-carousel .owl-nav button.owl-next {
  right: 15px;
}

@media (max-width: 768px) {
  .videos__slider .item {
    flex: 1 1 calc(50% - 10px);
  }

  .videos__slider.owl-carousel .owl-nav button {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .videos__slider .item {
    flex: 1 1 100%;
  }
}

.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.video-overlay iframe {
  width: 64.3vw;
  height: 84vh;
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 768px) {
  .video-overlay iframe {
    width: 93vw;
    height: 25vh;
  }
}

.video-overlay .close-btn {
  position: absolute;
  top: 20px;
  right: 170px;
  font-size: 28px;
  color: #ffffff;
  cursor: pointer;
}

@media (max-width: 768px) {
  .video-overlay .close-btn {
    right: 20px;
  }
}

/* Owl Carousel Navigation Buttons */
.owl-nav {
  position: absolute;
  top: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  z-index: 10;
  /* Pastikan tombol navigasi berada di atas konten lain */
}

.owl-prev,
.owl-next {
  background: white;
  /* Latar belakang putih */
  border-radius: 50%;
  /* Membuat tombol bulat */
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5c00ce;
  /* Warna ikon */
  font-size: 24px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  /* Efek bayangan */
  z-index: 10;
  cursor: pointer;
  /* Menambahkan pointer cursor */
}

.owl-prev:hover,
.owl-next:hover {
  background: #f0f0f0;
  /* Warna latar belakang saat hover */
  color: #5c00ce;
  /* Warna ikon saat hover */
  transition: background 0.3s, color 0.3s;
  /* Efek transisi */
}

.owl-prev {
  left: 10px;
}

.owl-next {
  right: 10px;
}

@media (max-width: 768px) {
  .videos__slider.owl-carousel .owl-nav button {
    width: 40px;
    height: 40px;
  }
}

/* Mengatur gap pada carousel */
.owl-carousel .owl-item {
  padding: 0 10px;
  /* Jarak horizontal pada item carousel */
}

.button-yt {
  text-align: center;
  margin-top: 50px;
}


/*---------------------
    Blog
-----------------------*/

.blog {
  padding-bottom: 60px;
}

.blog .section-title {
  margin-bottom: 80px;
}

.blog__large {
  margin-bottom: 45px;
  -webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
  box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
  margin-bottom: 50px;
}

.blog__large__pic {
  height: 370px;
  position: relative;
}

.blog__large__pic a {
  font-size: 16px;
  height: 40px;
  width: 40px;
  background: rgba(245, 245, 245, 0.3);
  border-radius: 50%;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.blog__large__pic a:hover {
  font-size: 16px;
  height: 40px;
  width: 40px;
  background: white;
  border-radius: 50%;
  color: #5c00ce;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.blog__large__text {
  background: #ffffff;
  text-align: center;
  padding: 30px 40px 0;
}

.blog__large__text span {
  font-size: 13px;
  text-transform: uppercase;
  color: #5c00ce;
}

.blog__large__text h4 {
  color: #111111;
  font-weight: 700;
  line-height: 31px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.blog__large__text p {
  margin-bottom: 40px;
}

.blog__large__widget {
  border-top: 1px solid #f2f2f2;
  padding: 15px 0 20px;
  text-align: left;
  margin: 0 30px;
}

.blog__large__widget .right__widget {
  text-align: right;
}

.blog__large__widget ul li {
  font-size: 13px;
  color: #888888;
  display: inline-block;
  list-style: none;
  margin-right: 20px;
  position: relative;
}

.blog__large__widget ul li span {
  color: #111111;
}

.blog__large__widget ul li:after {
  position: absolute;
  right: -14px;
  top: -2px;
  content: "|";
}

.blog__large__widget ul li:last-child {
  margin-right: 0;
}

.blog__large__widget ul li:last-child:after {
  display: none;
}

.blog__item {
  -webkit-box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
  box-shadow: 0px 3px 10px rgba(22, 41, 124, 0.1);
  margin-bottom: 50px;
}

.blog__item__pic img {
  min-width: 100%;
}

.blog__item__text {
  text-align: center;
  background: #ffffff;
  padding: 20px 20px 25px;
}

.blog__item__text span {
  font-size: 13px;
  text-transform: uppercase;
  color: #5c00ce;
}

.blog__item__text h5 {
  color: #111111;
  font-weight: 700;
  line-height: 26px;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 12px;
}

.blog__item__text ul li {
  font-size: 13px;
  color: #888888;
  display: inline-block;
  list-style: none;
  margin-right: 20px;
  position: relative;
}

.blog__item__text ul li span {
  color: #111111;
}

.blog__item__text ul li:after {
  position: absolute;
  right: -14px;
  top: -2px;
  content: "|";
}

.blog__item__text ul li:last-child {
  margin-right: 0;
}

.blog__item__text ul li:last-child:after {
  display: none;
}

/*---------------------
  Blog Sidebar
-----------------------*/

.blog__sidebar__item {
  text-align: center;
  margin-bottom: 65px;
}

.blog__sidebar__item:last-child {
  margin-bottom: 0;
}

.blog__sidebar__item form input {
  height: 50px;
  font-size: 15px;
  color: #444444;
  padding-left: 20px;
  border: 1px solid #e1e1e1;
  width: 100%;
  margin-bottom: 20px;
}

.blog__sidebar__item form input::-webkit-input-placeholder {
  color: #444444;
}

.blog__sidebar__item form input::-moz-placeholder {
  color: #444444;
}

.blog__sidebar__item form input:-ms-input-placeholder {
  color: #444444;
}

.blog__sidebar__item form input::-ms-input-placeholder {
  color: #444444;
}

.blog__sidebar__item form input::placeholder {
  color: #444444;
}

.blog__sidebar__title {
  text-align: center;
  margin-bottom: 35px;
}

.blog__sidebar__title h4 {
  color: #111111;
  font-weight: 700;
  position: relative;
  padding-bottom: 20px;
}

.blog__sidebar__title h4::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #e1e1e1;
  content: "";
  margin: 0 auto;
}

.blog__sidebar__social a {
  display: inline-block;
  font-size: 18px;
  color: #111111;
  width: 50px;
  height: 50px;
  background: #f2f2f2;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  margin-right: 6px;
  margin-bottom: 5px;
}

.blog__sidebar__social a:hover {
  display: inline-block;
  font-size: 18px;
  color: #f2f2f2;
  width: 50px;
  height: 50px;
  background: #111111;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  margin-right: 6px;
  margin-bottom: 5px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
}

.blog__sidebar__social a:last-child {
  margin-right: 6px;
}

.recent__item {
  display: block;
  overflow: hidden;
  margin-bottom: 20px;
  text-align: left;
}

.recent__item__pic {
  float: left;
  margin-right: 25px;
}

.recent__item__text {
  overflow: hidden;
}

.recent__item__text h6 {
  color: #111111;
  line-height: 25px;
  font-weight: 700;
  text-align: start;
}

.recent__item__text span {
  font-size: 13px;
  color: #888888;
}

/*---------------------
  Blog Details
-----------------------*/

.blog-details {
  padding-bottom: 60px;
  padding-top: 70px;
}

.blog__details__item {
  margin-bottom: 32px;
}

.blog__details__item__pic {
  height: 385px;
  position: relative;
}

.blog__details__item__pic a {
  font-size: 16px;
  height: 40px;
  width: 40px;
  background: rgba(245, 245, 245, 0.3);
  border-radius: 50%;
  color: #ffffff;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: 12px;
  bottom: 12px;
}

.blog__details__item__text {
  background: #ffffff;
  padding-top: 30px;
}

.blog__details__item__text span {
  font-size: 13px;
  text-transform: uppercase;
  color: #5c00ce;
}

.blog__details__item__text h3 {
  color: #111111;
  font-weight: 700;
  line-height: 31px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.blog__details__item__text p {
  margin-bottom: 40px;
}

.blog__details__item__widget {
  border-top: 1px solid #f2f2f2;
  padding-top: 15px;
  text-align: left;
}

.blog__details__item__widget ul li {
  font-size: 13px;
  color: #888888;
  display: inline-block;
  list-style: none;
  margin-right: 20px;
  position: relative;
}

.blog__details__item__widget ul li span {
  color: #111111;
}

.blog__details__item__widget ul li:after {
  position: absolute;
  right: -14px;
  top: -2px;
  content: "|";
}

.blog__details__item__widget ul li:last-child {
  margin-right: 0;
}

.blog__details__item__widget ul li:last-child:after {
  display: none;
}

.blog__details__desc {
  margin-bottom: 54px;
}

.blog__details__desc p {
  margin-bottom: 20px;
}

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

.blog__details__quote {
  border: 1px solid #e1e1e1;
  padding: 35px 40px 35px 40px;
  position: relative;
  margin-bottom: 35px;
}

.blog__details__quote p {
  font-size: 18px;
  color: #111111;
  line-height: 31px;
}

.blog__details__quote h6 {
  font-size: 15px;
  color: #888888;
  text-transform: uppercase;
}

.blog__details__quote i {
  font-size: 36px;
  color: #5c00ce;
  position: absolute;
  right: 40px;
  bottom: 35px;
}

.blog__details__tags {
  padding-top: 20px;
  margin-bottom: 60px;
}

.blog__details__tags a {
  display: inline-block;
  font-size: 15px;
  color: #444444;
  padding: 12px 20px 10px;
  background: #f5f5f5;
  margin-right: 10px;
}

.blog__details__tags a:last-child {
  margin-right: 0;
}

.blog__details__option {
  margin-bottom: 60px;
}

.blog__option__btn {
  display: block;
  overflow: hidden;
}

.blog__option__btn.blog__option__btn--next {
  text-align: right;
}

.blog__option__btn.blog__option__btn--next .option__btn__name i {
  margin-right: 0;
  margin-left: 6px;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item {
  overflow: hidden;
}

.blog__option__btn.blog__option__btn--next .blog__option__btn__item .blog__option__btn__pic {
  float: right;
  margin-right: 0;
  margin-left: 30px;
}

.blog__option__btn .option__btn__name {
  font-size: 15px;
  color: #444444;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 25px;
}

.blog__option__btn .option__btn__name i {
  font-size: 18px;
  font-weight: 700;
  margin-right: 6px;
}

.blog__option__btn__pic {
  float: left;
  margin-right: 26px;
}

.blog__option__btn__text {
  overflow: hidden;
}

.blog__option__btn__text h6 {
  color: #111111;
  font-weight: 700;
  line-height: 21px;
}

.blog__option__btn__text span {
  color: #888888;
  font-size: 13px;
}

.blog__details__services {
  margin-bottom: 30px;
}

.blog__details__services__title,
.blog__details__form__title {
  text-align: center;
  margin-bottom: 30px;
}

.blog__details__services__title h4,
.blog__details__form__title h4 {
  color: #111111;
  font-weight: 700;
  position: relative;
  padding-bottom: 20px;
  font-size: 26px;
}

.blog__details__services__title h4::before,
.blog__details__form__title h4::before {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  width: 70px;
  background: #e1e1e1;
  content: "";
  margin: 0 auto;
}

.blog__details__services__item {
  -webkit-box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
  box-shadow: 0px 5px 15px rgba(0, 61, 85, 0.07);
  margin-bottom: 30px;
}

.blog__details__services__item__pic img {
  min-width: 100%;
}

.blog__details__services__item__text {
  padding: 15px 20px 10px;
}

.blog__details__services__item__text h6 a {
  font-size: 17px;
  color: #111111;
  font-weight: 700;
  line-height: 22px;
}

.blog__details__services__item__text span {
  color: #888888;
  font-size: 13px;
}

.blog__details__form form .input__list,
.contact__form form .input__list {
  margin-right: -20px;
  overflow: hidden;
}

.blog__details__form form .input__list input,
.contact__form form .input__list input {
  height: 50px;
  font-size: 13px;
  color: #666666;
  padding-left: 20px;
  border: 1px solid #e1e1e1;
  width: calc(33.33% - 20px);
  margin-bottom: 20px;
  margin-right: 16px;
}

.blog__details__form form .input__list input::-webkit-input-placeholder,
.contact__form form .input__list input::-webkit-input-placeholder {
  color: #666666;
}

.blog__details__form form .input__list input::-moz-placeholder,
.contact__form form .input__list input::-moz-placeholder {
  color: #666666;
}

.blog__details__form form .input__list input:-ms-input-placeholder,
.contact__form form .input__list input:-ms-input-placeholder {
  color: #666666;
}

.blog__details__form form .input__list input::-ms-input-placeholder,
.contact__form form .input__list input::-ms-input-placeholder {
  color: #666666;
}

.blog__details__form form .input__list input::placeholder,
.contact__form form .input__list input::placeholder {
  color: #666666;
}

.blog__details__form form textarea,
.contact__form form textarea {
  height: 120px;
  font-size: 13px;
  color: #666666;
  padding-left: 20px;
  padding-top: 12px;
  border: 1px solid #e1e1e1;
  width: 100%;
  margin-bottom: 14px;
  resize: none;
}

.blog__details__form form textarea::-webkit-input-placeholder,
.contact__form form textarea::-webkit-input-placeholder {
  color: #666666;
}

.blog__details__form form textarea::-moz-placeholder,
.contact__form form textarea::-moz-placeholder {
  color: #666666;
}

.blog__details__form form textarea:-ms-input-placeholder,
.contact__form form textarea:-ms-input-placeholder {
  color: #666666;
}

.blog__details__form form textarea::-ms-input-placeholder,
.contact__form form textarea::-ms-input-placeholder {
  color: #666666;
}

.blog__details__form form textarea::placeholder,
.contact__form form textarea::placeholder {
  color: #666666;
}

/*---------------------
  Map
-----------------------*/

.map {
  height: 585px;
  margin-top: 60px;
}

.map iframe {
  width: 100%;
}

/*---------------------
  Contact
-----------------------*/

.contact {
  padding-top: 70px;
  padding-bottom: 50px;
}

.contact__address .section-title {
  margin-bottom: 10px;
}

.contact__address .section-title h2 {
  text-transform: none;
}

.contact__address p {
  margin-bottom: 34px;
}

.contact__address ul li {
  list-style: none;
  padding-left: 100px;
  position: relative;
  margin-bottom: 30px;
}

.contact__address ul li:last-child {
  margin-bottom: 0;
}

.contact__address ul li i {
  font-size: 30px;
  height: 70px;
  width: 70px;
  background: #f5f5f5;
  border-radius: 50%;
  line-height: 70px;
  text-align: center;
  color: #5c00ce;
  position: absolute;
  left: 0;
  top: -4px;
}

.contact__address ul li h5 {
  font-size: 20px;
  color: #111111;
  font-weight: 700;
  margin-bottom: 10px;
}

.contact__address ul li p {
  margin-bottom: 0;
}

.contact__address ul li span {
  font-size: 15px;
  color: #111111;
  display: inline-block;
  margin-right: 25px;
  position: relative;
}

.contact__address ul li span:after {
  position: absolute;
  right: -20px;
  top: -1px;
  content: ".";
  font-size: 39px;
  line-height: 0;
  border-radius: 50%;
}

.contact__address ul li span:last-child {
  margin-right: 0;
}

.contact__address ul li span:last-child:after {
  display: none;
}

.contact__form .section-title {
  margin-bottom: 10px;
}

.contact__form .section-title h2 {
  text-transform: none;
}

.contact__form p {
  margin-bottom: 34px;
}

/*---------------------
  ALBUM PUSTAKA
-----------------------*/

section h6 {
  text-align: center;
  margin-top: 20px;
  color: black;
  font-size: 25px;
}

.container .box-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px 9%;
  background: #28084931;
}

.container .box-container.active {
  padding-bottom: 150px;
}

.container .box-container .box {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 5px 10px #28084976;
  padding: 15px;
  cursor: pointer;
}

.container .box-container .box .image {
  height: 400px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
}

.container .box-container .box .image:hover {
  height: 400px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  -ms-transition: 0.2s linear;
  -o-transition: 0.2s linear;
}

.container .box-container .box .image img {
  height: 400px;
  width: 100%;
  object-fit: cover;
}

.container .box-container .box .image .play {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  display: none;
}

.container .box-container .box:hover .image .play {
  display: flex;
}

.container .box-container .box .image .play i {
  font-size: 100px;
  color: #fff;
}

.container .box-container .box .content {
  padding-top: 15px;
}

.container .box-container .box .content h3 {
  font-size: 20px;
  color: #333;
}

.container .box-container .box .content h4 {
  font-size: 15px;
  margin-top: 3px;
  color: #00000057;
}

.container .box-container .box .content h5 {
  font-size: 12px;
  margin-top: 3px;
  color: #00000057;
  text-align: end;
}

.music-player {
  position: fixed;
  bottom: -125px;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 1000;
}

.music-player.active {
  bottom: 0;
}

.music-player .music-title {
  font-size: 25px;
  margin-bottom: 5px;
  border-top: 3px solid #290849;
  border-bottom: 1px solid #333;
  text-align: center;
  color: black;
  padding: 10px;
}

.music-player audio {
  width: 100%;
}

.music-player audio::-webkit-media-controls-enclosure {
  border-radius: 0;
  background: #fff;
}

.music-player #close-player {
  position: absolute;
  top: -50px;
  right: 5px;
  height: 50px;
  width: 55px;
  line-height: 50px;
  cursor: pointer;
  font-size: 30px;
  color: #333;
  background: #fff;
  border: 3px solid #290849;
  border-bottom: none;
  text-align: center;
}

/*--------------------------------- Responsive Media Quaries -----------------------------*/

@media only screen and (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

/* Medium Device = 1200px */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .header__menu ul li {
    margin-right: 18px;
  }

  .header__menu {
    margin-right: 30px;
  }

  .service__item {
    padding: 40px 30px 30px 40px;
  }

  .skills__content {
    padding: 60px 40px 40px;
  }

  .discography__item__text a {
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }
}

/* Tablet Device = 768px */

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .header__right__social {
    display: none;
  }

  .header__menu {
    margin-right: 0;
  }

  .header__menu ul li {
    margin-right: 14px;
  }

  .event .section-title:after {
    width: 560px;
  }

  .track__all {
    text-align: left;
    margin-bottom: 60px;
  }

  .track__content {
    margin-bottom: 120px;
  }

  .track__pic img {
    height: auto;
  }

  .footer {
    height: auto;
  }

  .about.about--page .about__text {
    padding-top: 30px;
  }

  .discography__item__text a {
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .contact__address {
    margin-bottom: 40px;
  }

  .footer__social::before {
    display: none;
  }

  .footer__social::after {
    display: none;
  }

  .tours__item__pic {
    margin-bottom: 50px;
  }

  .tours__item__text {
    padding-right: 0;
  }

  .countdown {
    padding-bottom: 776px;
  }

  .footer {
    margin-top: -740px;
    background-position: top 0 left 19%;
  }
}

/* Wide Mobile = 480px */

@media only screen and (max-width: 767px) {
  .hero {
    padding-top: 190px;
    padding-bottom: 200px;
  }

  .event .section-title:after {
    display: none;
  }

  .track__all {
    text-align: left;
    margin-bottom: 60px;
  }

  .track__content {
    margin-bottom: 120px;
  }

  .track .p-0 {
    padding: 0 15px !important;
  }

  .track__pic img {
    height: auto;
  }

  .discography__item__text a {
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }

  .blog__sidebar {
    padding-top: 50px;
  }

  .contact__address {
    margin-bottom: 40px;
  }

  .footer {
    height: auto;
  }

  .footer__social::before {
    display: none;
  }

  .footer__social::after {
    display: none;
  }

  .player_bars {
    width: 240px;
    margin-right: 20px;
  }

  .jp-seek-bar>div {
    width: 140px;
  }

  .countdown__item {
    margin-right: 0;
    margin-bottom: 30px;
    width: 50%;
    float: left;
  }

  .footer__social {
    text-align: left;
  }

  .skills__content {
    height: auto;
  }

  .about.about--page .about__text {
    padding-top: 30px;
  }

  .tours__item__pic {
    margin-bottom: 50px;
  }

  .blog__large__widget ul {
    text-align: center;
  }

  .blog__large__widget .right__widget {
    text-align: center;
  }

  .blog__option__btn {
    margin-bottom: 30px;
  }

  .blog__details__form form .input__list,
  .contact__form form .input__list {
    margin-right: 0;
    overflow: visible;
  }

  .blog__details__form form .input__list input,
  .contact__form form .input__list input {
    width: 100%;
    margin-right: 0;
  }

  .header__nav {
    display: none;
  }

  .header .container {
    position: relative;
  }

  .slicknav_btn {
    position: absolute;
    right: 15px;
    top: 60px;
    margin: 0;
    border-radius: 5px;
    padding: px 15px;
    float: none;
    background: #5c00ce;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
  }

  .slicknav_nav {
    position: absolute;
    left: 0;
    top: 145px;
    background: #290849;
    width: 100%;
  }

  .slicknav_menu {
    background: transparent;
    padding: 0;
    display: block;
  }

  .slicknav_nav ul {
    margin: 0;
    padding: 5px 0;
  }

  .slicknav_nav .slicknav_row,
  .slicknav_nav a {
    padding: 10px 28px;
    margin: 0;
  }

  .slicknav_nav a:hover {
    border-radius: 0;
    background: white;
    color: #5c00ce;
  }

  .slicknav_nav .slicknav_row:hover {
    border-radius: 0;
    background: white;
    color: #5c00ce;
  }

  .service__item {
    height: auto;
  }

  .tours__item__text {
    padding-right: 0;
  }

  .countdown {
    padding-bottom: 940px;
  }

  .footer {
    margin-top: -940px;
    background-position: top 0 left 19%;
  }
}

/* Small Device = 320px */

@media only screen and (max-width: 479px) {
  .section-title h1 {
    top: -40px;
    font-size: 79px;
    line-height: 0.8;
  }

  .hero__text h1 {
    font-size: 70px;
  }

  .videos {
    padding-bottom: 0;
  }

  .countdown__text h1 {
    font-size: 50px;
  }

  .single_player_container h4 {
    font-size: 16px;
  }

  .player_bars {
    width: 150px;
    margin-right: 10px;
  }

  .player_controls_box {
    margin-right: 10px;
  }

  .jp-volume-controls {
    width: 68px;
    padding-left: 23px;
  }

  .jp-volume-bar {
    width: 42px;
  }

  .jp-seek-bar>div {
    width: 55px;
  }

  .service__item {
    height: auto;
    padding: 40px 40px 40px 40px;
  }

  .skills__content {
    height: auto;
    padding: 80px 25px 40px;
  }

  .tours__item__text .tours__text__widget ul {
    float: none;
    margin-bottom: 30px;
  }

  .tours__item__text .tours__text__widget .price {
    float: none;
  }

  .tours__item__pic {
    padding-left: 0;
  }

  .tours__item__text.tours__item__text--right {
    padding-left: 0;
  }

  .blog__large__text {
    padding: 30px 20px 0;
  }

  .blog__large__widget {
    margin: 0;
  }

  .blog__details__tags a {
    margin-bottom: 10px;
  }

  .countdown {
    padding-bottom: 980px;
  }

  .footer {
    margin-top: -970px;
    background-position: top 0 left 19%;
  }
}