@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap') @tailwind base;

.container{
  width: 100%
}

@media (min-width: 576px){
  .container{
    max-width: 576px
  }
}

@media (min-width: 768px){
  .container{
    max-width: 768px
  }
}

@media (min-width: 1000px){
  .container{
    max-width: 1000px
  }
}

@media (min-width: 1280px){
  .container{
    max-width: 1280px
  }
}

@media (min-width: 1536px){
  .container{
    max-width: 1536px
  }
}

.fixed{
  position: fixed
}

.m-0{
  margin: 0px
}

.m-auto{
  margin: auto
}

.mx-0{
  margin-left: 0px;
  margin-right: 0px
}

.mx-2{
  margin-left: 0.5rem;
  margin-right: 0.5rem
}

.mx-8{
  margin-left: 2rem;
  margin-right: 2rem
}

.mx-auto{
  margin-left: auto;
  margin-right: auto
}

.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem
}

.mb-0{
  margin-bottom: 0px
}

.mb-5{
  margin-bottom: 1.25rem
}

.mt-1{
  margin-top: 0.25rem
}

.mt-10{
  margin-top: 2.5rem
}

.mt-16{
  margin-top: 4rem
}

.mt-24{
  margin-top: 6rem
}

.mt-3{
  margin-top: 0.75rem
}

.mt-4{
  margin-top: 1rem
}

.mt-5{
  margin-top: 1.25rem
}

.mt-7{
  margin-top: 1.75rem
}

.mt-8{
  margin-top: 2rem
}

.mt-9{
  margin-top: 2.25rem
}

.flex{
  display: flex
}

.grid{
  display: grid
}

.hidden{
  display: none
}

.h-12{
  height: 3rem
}

.h-14{
  height: 3.5rem
}

.h-20{
  height: 5rem
}

.h-32{
  height: 8rem
}

.h-40{
  height: 10rem
}

.h-5{
  height: 1.25rem
}

.h-56{
  height: 14rem
}

.h-64{
  height: 16rem
}

.h-8{
  height: 2rem
}

.h-screen{
  height: 100vh
}

.w-12{
  width: 3rem
}

.w-14{
  width: 3.5rem
}

.w-56{
  width: 14rem
}

.w-64{
  width: 16rem
}

.w-8{
  width: 2rem
}

.w-80{
  width: 20rem
}

.w-\[180px\]{
  width: 180px
}

.w-\[280px\]{
  width: 280px
}

.w-\[80px\]{
  width: 80px
}

.w-full{
  width: 100%
}

.flex-none{
  flex: none
}

.grow{
  flex-grow: 1
}

.basis-1\/3{
  flex-basis: 33.333333%
}

.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr))
}

.grid-cols-5{
  grid-template-columns: repeat(5, minmax(0, 1fr))
}

.flex-row{
  flex-direction: row
}

.flex-col{
  flex-direction: column
}

.flex-col-reverse{
  flex-direction: column-reverse
}

.items-center{
  align-items: center
}

.justify-center{
  justify-content: center
}

.justify-between{
  justify-content: space-between
}

.gap-3{
  gap: 0.75rem
}

.gap-x-2{
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem
}

.overflow-hidden{
  overflow: hidden
}

.rounded-2xl{
  border-radius: 1rem
}

.rounded-full{
  border-radius: 9999px
}

.rounded-md{
  border-radius: 0.375rem
}

.rounded-xl{
  border-radius: 0.75rem
}

.rounded-l-lg{
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem
}

.rounded-t-2xl{
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem
}

.rounded-t-xl{
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem
}

.border-2{
  border-width: 2px
}

.border-4{
  border-width: 4px
}

.border-solid{
  border-style: solid
}

.border-blue-900{
  --tw-border-opacity: 1;
  border-color: rgb(30 58 138 / var(--tw-border-opacity))
}

.bg-biru-gelap{
  --tw-bg-opacity: 1;
  background-color: rgb(36 38 92 / var(--tw-bg-opacity))
}

.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity))
}

.bg-red-400{
  --tw-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--tw-bg-opacity))
}

.bg-slate-50{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity))
}

.bg-tombol{
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 86 / var(--tw-bg-opacity))
}

.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity))
}

.bg-custom{
  background-image: url('./../images/bghp.png')
}

.bg-cover{
  background-size: cover
}

.bg-no-repeat{
  background-repeat: no-repeat
}

.fill-biru-gelap{
  fill: #24265C
}

.p-2{
  padding: 0.5rem
}

.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem
}

.px-32{
  padding-left: 8rem;
  padding-right: 8rem
}

.px-8{
  padding-left: 2rem;
  padding-right: 2rem
}

.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem
}

.pb-6{
  padding-bottom: 1.5rem
}

.text-center{
  text-align: center
}

.text-right{
  text-align: right
}

.font-jakarta{
  font-family: "Plus Jakarta Sans", sans-serif
}

.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem
}

.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem
}

.text-5xl{
  font-size: 3rem;
  line-height: 1
}

.text-\[16px\]{
  font-size: 16px
}

.text-base{
  font-size: 1rem;
  line-height: 1.5rem
}

.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem
}

.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem
}

.font-bold{
  font-weight: 700
}

.font-extrabold{
  font-weight: 800
}

.uppercase{
  text-transform: uppercase
}

.tracking-wide{
  letter-spacing: 0.025em
}

.tracking-widest{
  letter-spacing: 0.1em
}

.text-biru-gelap{
  --tw-text-opacity: 1;
  color: rgb(36 38 92 / var(--tw-text-opacity))
}

.text-black{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity))
}

.text-blue-900{
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity))
}

.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

.no-underline{
  text-decoration-line: none
}

.hover\:bg-biru-gelap:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(36 38 92 / var(--tw-bg-opacity))
}

.hover\:bg-green-600:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity))
}

.hover\:bg-red-500:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity))
}

.hover\:bg-tekan:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(214 209 84 / var(--tw-bg-opacity))
}

.hover\:bg-tombol:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(255 248 86 / var(--tw-bg-opacity))
}

.hover\:text-black:hover{
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity))
}

.hover\:text-white:hover{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity))
}

@media (min-width: 768px){
  .md\:mx-12{
    margin-left: 3rem;
    margin-right: 3rem
  }

  .md\:my-1{
    margin-top: 0.25rem;
    margin-bottom: 0.25rem
  }

  .md\:my-3{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem
  }

  .md\:mb-8{
    margin-bottom: 2rem
  }

  .md\:mt-0{
    margin-top: 0px
  }

  .md\:mt-10{
    margin-top: 2.5rem
  }

  .md\:mt-16{
    margin-top: 4rem
  }

  .md\:mt-20{
    margin-top: 5rem
  }

  .md\:mt-3{
    margin-top: 0.75rem
  }

  .md\:mt-6{
    margin-top: 1.5rem
  }

  .md\:mt-7{
    margin-top: 1.75rem
  }

  .md\:mt-8{
    margin-top: 2rem
  }

  .md\:mt-4{
    margin-top: 1rem
  }

  .md\:mt-24{
    margin-top: 6rem
  }

  .md\:mt-32{
    margin-top: 8rem
  }

  .md\:mt-28{
    margin-top: 7rem
  }

  .md\:block{
    display: block
  }

  .md\:h-10{
    height: 2.5rem
  }

  .md\:h-14{
    height: 3.5rem
  }

  .md\:h-16{
    height: 4rem
  }

  .md\:h-32{
    height: 8rem
  }

  .md\:h-48{
    height: 12rem
  }

  .md\:h-64{
    height: 16rem
  }

  .md\:h-80{
    height: 20rem
  }

  .md\:w-10{
    width: 2.5rem
  }

  .md\:w-14{
    width: 3.5rem
  }

  .md\:w-80{
    width: 20rem
  }

  .md\:w-\[110px\]{
    width: 110px
  }

  .md\:w-\[250px\]{
    width: 250px
  }

  .md\:w-\[400px\]{
    width: 400px
  }

  .md\:w-\[450px\]{
    width: 450px
  }

  .md\:w-\[600px\]{
    width: 600px
  }

  .md\:w-\[720px\]{
    width: 720px
  }

  .md\:grid-cols-7{
    grid-template-columns: repeat(7, minmax(0, 1fr))
  }

  .md\:rounded-3xl{
    border-radius: 1.5rem
  }

  .md\:bg-custom{
    background-image: url('./../images/bgmd.png')
  }

  .md\:p-5{
    padding: 1.25rem
  }

  .md\:px-10{
    padding-left: 2.5rem;
    padding-right: 2.5rem
  }

  .md\:px-12{
    padding-left: 3rem;
    padding-right: 3rem
  }

  .md\:px-16{
    padding-left: 4rem;
    padding-right: 4rem
  }

  .md\:px-56{
    padding-left: 14rem;
    padding-right: 14rem
  }

  .md\:py-4{
    padding-top: 1rem;
    padding-bottom: 1rem
  }

  .md\:pb-10{
    padding-bottom: 2.5rem
  }

  .md\:pb-8{
    padding-bottom: 2rem
  }

  .md\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem
  }

  .md\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem
  }

  .md\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem
  }

  .md\:text-6xl{
    font-size: 3.75rem;
    line-height: 1
  }

  .md\:text-7xl{
    font-size: 4.5rem;
    line-height: 1
  }

  .md\:text-base{
    font-size: 1rem;
    line-height: 1.5rem
  }

  .md\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem
  }

  .md\:text-xl{
    font-size: 1.25rem;
    line-height: 1.75rem
  }
}

@media (min-width: 1000px){
  .lg\:-mx-2{
    margin-left: -0.5rem;
    margin-right: -0.5rem
  }

  .lg\:mx-0{
    margin-left: 0px;
    margin-right: 0px
  }

  .lg\:my-2{
    margin-top: 0.5rem;
    margin-bottom: 0.5rem
  }

  .lg\:mb-10{
    margin-bottom: 2.5rem
  }

  .lg\:mb-5{
    margin-bottom: 1.25rem
  }

  .lg\:mt-10{
    margin-top: 2.5rem
  }

  .lg\:mt-14{
    margin-top: 3.5rem
  }

  .lg\:mt-16{
    margin-top: 4rem
  }

  .lg\:mt-24{
    margin-top: 6rem
  }

  .lg\:mt-4{
    margin-top: 1rem
  }

  .lg\:mt-7{
    margin-top: 1.75rem
  }

  .lg\:mt-2{
    margin-top: 0.5rem
  }

  .lg\:block{
    display: block
  }

  .lg\:inline{
    display: inline
  }

  .lg\:hidden{
    display: none
  }

  .lg\:h-12{
    height: 3rem
  }

  .lg\:h-20{
    height: 5rem
  }

  .lg\:h-32{
    height: 8rem
  }

  .lg\:h-36{
    height: 9rem
  }

  .lg\:h-40{
    height: 10rem
  }

  .lg\:h-52{
    height: 13rem
  }

  .lg\:h-56{
    height: 14rem
  }

  .lg\:h-64{
    height: 16rem
  }

  .lg\:h-72{
    height: 18rem
  }

  .lg\:h-8{
    height: 2rem
  }

  .lg\:h-screen{
    height: 100vh
  }

  .lg\:w-12{
    width: 3rem
  }

  .lg\:w-56{
    width: 14rem
  }

  .lg\:w-8{
    width: 2rem
  }

  .lg\:w-80{
    width: 20rem
  }

  .lg\:w-96{
    width: 24rem
  }

  .lg\:w-\[120px\]{
    width: 120px
  }

  .lg\:w-\[180px\]{
    width: 180px
  }

  .lg\:w-\[350px\]{
    width: 350px
  }

  .lg\:w-\[370px\]{
    width: 370px
  }

  .lg\:w-\[400px\]{
    width: 400px
  }

  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr))
  }

  .lg\:grid-cols-5{
    grid-template-columns: repeat(5, minmax(0, 1fr))
  }

  .lg\:grid-cols-9{
    grid-template-columns: repeat(9, minmax(0, 1fr))
  }

  .lg\:bg-custom{
    background-image: url('./../images/bg.png')
  }

  .lg\:p-4{
    padding: 1rem
  }

  .lg\:px-12{
    padding-left: 3rem;
    padding-right: 3rem
  }

  .lg\:px-16{
    padding-left: 4rem;
    padding-right: 4rem
  }

  .lg\:px-44{
    padding-left: 11rem;
    padding-right: 11rem
  }

  .lg\:py-2{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem
  }

  .lg\:py-3{
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
  }

  .lg\:pb-6{
    padding-bottom: 1.5rem
  }

  .lg\:pb-8{
    padding-bottom: 2rem
  }

  .lg\:text-2xl{
    font-size: 1.5rem;
    line-height: 2rem
  }

  .lg\:text-3xl{
    font-size: 1.875rem;
    line-height: 2.25rem
  }

  .lg\:text-4xl{
    font-size: 2.25rem;
    line-height: 2.5rem
  }

  .lg\:text-5xl{
    font-size: 3rem;
    line-height: 1
  }

  .lg\:text-6xl{
    font-size: 3.75rem;
    line-height: 1
  }

  .lg\:text-base{
    font-size: 1rem;
    line-height: 1.5rem
  }

  .lg\:text-lg{
    font-size: 1.125rem;
    line-height: 1.75rem
  }

  .lg\:text-sm{
    font-size: 0.875rem;
    line-height: 1.25rem
  }
}