@import url('https://fonts.googleapis.com/css2?family=Cabin:ital@1&family=Golos+Text&family=League+Gothic&family=Lemon&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin:ital@1&family=Golos+Text&family=Josefin+Sans:ital@1&family=League+Gothic&family=Lemon&display=swap');
/* Global */
@font-face {
  font-family: 'Josefin Sans', sans-serif;
  src: url('https://apps.enterprisys.co.id/fonts/Josefin.ttf');
}

*{
  font-family: 'Josefin Sans', sans-serif;
}

p{
  color: black;
}

.intro-right, .intro-left, .label-intro, .title-intro {
  display: none;
}

.section{
  font-family: Josefin, cursive;
  color:#833BEC;
  display: none;
}

.show {
  display: block !important;
}

.hide {
  display: none;
}

.prev, .next{
  border: none;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  background-color: white;
  /* font-size: 25px; */
  font-weight: 900;
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev:active, .next:active{
  height: 40px;
  width: 40px;
}

.prev-news, .next-news{
  border: none;
  background-color: transparent;
  font-size: 15px;
  color: #ad4adf;
}

.prev:hover, .next:hover, .prev-news:hover, .next-news:hover{
  color: #7841d8;
}
.slick-disabled, .slick-disabled:hover{
  color: #ddd;
}

.custom-dots{
  display: flex;
  list-style:none;
  align-items: center;
  justify-content: center;
  margin:0;
  padding: 0 10px;
}

.custom-dots > li{
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
  background-color: #f0f0f0;
  border-radius: 5px;
  font-weight: 700;
}

.custom-dots > li:hover{
  background-color: #ad4adf;
  cursor: pointer;
}

.custom-dots > .slick-active{
  background-color: #920bd5;
  cursor: pointer;
  color: white;
}
/* End Global */



/* Navbar */
.navbar{
  backdrop-filter: blur(8px);
}
.navbar-collapse{
  margin: 20px 0;
}

.nav-item{
  /* color: #666666 !important; */
  margin-left: .2rem;
  margin-right: .2rem;
  align-items: center;
  justify-content: center;
  /* display: flex; */
  margin-top: 2px;
  margin-bottom: 2px;
}

.nav-item.active{
  background: #7841d8 ;
  border-radius: 10px;
}

.nav-item.active > .nav-link{
  color: white !important;
  justify-content: center;
  align-items: center;
  display: flex;
}


.nav-item:hover{
  background-color: #8766c0;
  color: white !important;
  border-radius: 10px;
}

.nav-item:hover > .nav-link{
  color: white !important;
}

.dropdown-item{
  color: black !important;
}

.btn-sign{
  background-color: black;
  color: #fff;
  font-size: .8rem;
  padding: 6px 10px;
}

.btn-sign:hover{
  background-color: #fff;
  color: #000;
  border: solid 1px #000;
}

.notification-bell{
    color: #666666;
    align-items: center;
    justify-content: center;
}
.notification-bell:hover{
  color: rgb(43, 42, 42);
}

.sign-bell{
  margin-top: 20px;
  align-items: center;
  justify-content: center;
}


.notification-bell, .btn-sign{
  font-size: 1rem;
}

/* End Navbar */

/* Introduction */

.introduction{
  background: linear-gradient(180deg, #ffffff 40%, #818dff9e 70%);
}

.box{
  width: 80vw;
  height: 150px;
  background-color: #FFBE0B;
  border-radius: 10px;
  margin-top: 20px;
}


.box > span > h1{
  font-size: 30px;
}
.box > span > h3{
  font-size: 20px;
}
/* End Introduction */

/* Service */
.service{
  background: linear-gradient(180deg, #818dff9e 80%, #a8b5f5 100%);
}

.service-data{
  height: 100px;
  width:100px;
  margin-left: 10px;
  margin-right: 10px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #804cdb6b;
}

.service-item-1, .service-item-2, .service-item-3 {
  display: none;
}

.service-text{
  color: #7841d8;
  font-size: .8rem;
  font-weight: bolder;
}
/* End Service */

/* Slider */
.slider{
  background: linear-gradient(180deg, #a8b5f5 80%, #334397 30%);
  display: none;
}
/* End Slider */

/* Birthday */
.birthday{
  background: linear-gradient(180deg, #334397 0%, #abb6f5 100%);
  /* display: none; */
}

.birthday-container {
  display: none;
}

.birthday-user > h1{
  font-size: 4rem;
  padding-bottom: 20px;
}

.birthday-user > h5{
  font-size: 1rem;
  font-weight: bolder;
}

.birthday-user > p{
  font-size: .9rem;
}

.birthday-carousel::-webkit-scrollbar {
  display: none;
}
.birthday-carousel.no-transition {
  scroll-behavior: auto;
}
.birthday-carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.birthday-carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.birthday-carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}
.birthday-carousel .card {
  scroll-snap-align: start;
  height: 290px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
  border-radius: 8px;
}
.card .img {
  background: #8B53FF;
  height: 148px;
  width: 148px;
  border-radius: 50%;
}
.img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 10px solid #fff;
}

.birthday-content h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.birthday-carousel .card span {
  color: #6A6D78;
  font-size: 1.31rem;
}

.birthday-content{
  height: 300px;
  background-color: #eee;
  border-radius: 10px;
}


.birthday-wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}
.birthday-wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
  z-index: 99;
}
.birthday-wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.birthday-wrapper i:first-child{
  left: -22px;
}
.birthday-wrapper i:last-child{
  right: -22px;
}
.birthday-wrapper .birthday-carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 1) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  border-radius: 8px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
/* End Birthday */

/* News */
.news{
  background: linear-gradient(180deg, #abb6f5 0%, #F0B3FA 53.60360360360361%);
  /* display: none; */
}

.news-card{
  border-radius: 10px;
  background-color: #eeeffd;
  padding: 15px;
}


.news-title{
  /* font-family: sans-serif; */
  color: #8338EC;
}


.news-truncate{
  color: #505050;
}

.slick-disabled{
  display: none !important;
}

.row-1, .row-2{
  text-align: center;
}

.news-wrapper {
  max-width: 1100px;
  width: 100%;
  position: relative;
}

.news-wrapper i {
  top: 50%;
  height: 50px;
  width: 50px;
  cursor: pointer;
  font-size: 1.25rem;
  position: absolute;
  text-align: center;
  line-height: 50px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.23);
  transform: translateY(-50%);
  transition: transform 0.1s linear;
  z-index: 99;
}
.news-wrapper i:active{
  transform: translateY(-50%) scale(0.85);
}
.news-wrapper i:first-child{
  left: -22px;
}
.news-wrapper i:last-child{
  right: -22px;
}

.news-wrapper .news-carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% / 3) - 12px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 16px;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

#left-news{
  margin-left: 15px;
}

#right-news{
  margin-right: 15px;
}
.news-carousel::-webkit-scrollbar {
  display: none;
}
.news-carousel.no-transition {
  scroll-behavior: auto;
}
.news-carousel.dragging {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
.news-carousel.dragging .card {
  cursor: grab;
  user-select: none;
}
.news-carousel .card {
  border: none;
}

.news-carousel :where(.card, .img) {
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-card{
  min-height: 500px;
  overflow: hidden;
}

.news-carousel .card {
  scroll-snap-align: start;
  height: 420px;
  list-style: none;
  background: #fff;
  cursor: pointer;
  padding-bottom: 15px;
  flex-direction: column;
}
.news-carousel .card .img {
  background: #8B53FF;
  height: 148px;
  width: 148px;
  border-radius: 50%;
}
.card .img img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid #fff;
  margin: 4px;
}
.news-carousel .card h2 {
  font-weight: 500;
  font-size: 1.56rem;
  margin: 30px 0 5px;
}
.news-carousel .card span {
  color: #6A6D78;
  font-size: 1.31rem;
}
/* End News */

/* Activity Gallery */
.gellery{
  background: linear-gradient(180deg, #F0B3FA 0%, #e9d9fd 100%);
}

.galery-wrapper, .galery-name {
  display: none;
}
/* End Gallery */

/* Faqs */
.faq{
  background: linear-gradient(180deg, #e9d9fd 0%, #f5f5f5 46.846846846846844%);
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  border: 1px solid #d703e5 !important;
  background: #a72aa3 !important;
}


.faq-name, .faq-wrapper {
  display: none;
}
/* End Faqs */

/* Footer */
.footer{
  background-color: #f5f5f5;
}

.footer-data{
  font-size: .8rem;
}
/* End Footer */


/* Tablet Portrait */
@media only screen and (min-width: 600px) {
  
  /* Birthday */
  .birthday-wrapper .birthday-carousel{
    grid-auto-columns: calc((100% / 2) - 12px);
  }
  /* Birthday End */
}
/* Table Landscape */
@media only screen and (min-width: 768px) {
  
  /* Birthday */
  .birthday-wrapper .birthday-carousel{
    grid-auto-columns: calc((100% / 3) - 12px);
  }

  /* Birthday End */
}

.no-data{
  position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 0 solid rgba(0,0,0,.125);
    border-radius: 1rem;
   background-color: rgba(255,255,255, 0);
}

/* .gallery-image{
  border: #000 solid 2px;
} */

/* Laptop */
@media only screen and (min-width: 992px) {
  /* Navbar */
  
  .navbar-collapse{
    margin: 0;
  }
  .nav-item{
    display: block;
    margin-left: .2rem;
    margin-right: .2rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  .sign-bell{
    margin-top: 0;
  }

  .btn-sign{
    font-size: .8rem;
    padding: 6px 10px;
  }

  .notification-bell{
    font-size: .8rem;
  }

  /* Introduction */
  .introduction{
    min-height: calc(100vh - 56px);
  }
  
  .box{
    width: 55vw;
    background-color: #FFBE0B;
    border-radius: 10px;
    margin-top: 65px;
    margin-bottom: 40px;
  }

  .box > span > h1{
    font-size: 45px;
  }
  .box > span > h3{
    font-size: 35px;
  }

  .introduction-text{
    min-height: calc(100vh - 250px - 56px);
  }
  /* End Introduction */
  
  /* Service */
  .service-data{
    height: 100px;
    width:100px;
    margin-left: 40px;
    margin-right: 40px;
  }
  /* End Service */

  /* News */
  .row-1{
    text-align:left;
  }

  .row-2{
    text-align:right;
  }
  /* End News */

  /* Birthday */
  /* Birthday End */
}