:root {
    --black: #000000;

    --white: #FBFAF4;

    --light: #F0DCC4;

    --blue: #0081FF;
    --cyan: #14FCEF;
    --green: #57CF63;
    --orange: #FF981A;
    --purple: #9140F0;
    --red: #961A1E;
    --yellow: #D3CF58;
    --grey: #B4B4B4;

    --container-padding: 1.5rem;
    --container-gutter: 1.5rem;

    --font-weight-bold: 700;
    --font-weight-semi-bold: 600;
    --font-weight-medium: 400;
    --font-weight-regular: 200;

    --line-height-title: 110%;
    --line-height-text: 150%;

    --letter-spacing: 0.02rem;

    --heading-1: 5rem;
    --heading-2: 4rem;
    --heading-3: 3rem;
    --heading-4: 2.25rem;
    --heading-5: 1.5rem;
    --heading-6: 1.25rem;
    --text-28: 1.75rem;
    --text-24: 1.5rem;
    --text-20: 1.25rem;
    --text-18: 1.125rem;
    --text-16: 1rem;
    --text-14: 0.875rem;
    --text-12: 0.75rem;

    --spacing-128: 8rem;
    --spacing-80: 5rem;
    --spacing-64: 4rem;
    --spacing-40: 2.5rem;
    --spacing-28: 1.75rem;
    --spacing-24: 1.5rem;
    --spacing-18: 1.125rem;
    --spacing-16: 1rem;
    --spacing-12: 0.75rem;
    --spacing-8: 0.5rem;

    --border-radius: 6249.9375rem;
    --border-radius-24: 1.5rem;
    --border-radius-16: 1rem;

}

@font-face {
    font-family: 'Serif-Gothic';
    src: url('../assets/fonts/itc-serif-gothic-lt-black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'Microgramma';
    src: url('../assets/fonts/microgramma/microgramma-d-extended-bold.otf') format('truetype');
}

@font-face {
    font-family: 'Microgramma-Normal';
    src: url('../assets/fonts/microgramma/microgrammanormal.ttf') format('truetype');
}


@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Inter';
    src: url('../assets/fonts/Inter/Inter-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}


.font-microgamma{
    font-family: 'Microgramma' !important;
    line-height: var(--line-height-text);
}

.font-microgamma-normal{
    font-family: 'Microgramma-Normal' !important;
}

.font-inter{
    font-family: 'Inter' !important;
    line-height: var(--line-height-text);
    text-transform: inherit !important;
    font-weight: 400 !important;
}

.font-inter b {
    font-weight: 700;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
    background-color: var(--black);
    /* font-family: 'Manrope'; */
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: 3rem;
    padding-bottom: 2rem;
}

img {
    -webkit-user-drag: none;
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

/* Colors */

.bg-white {
    background-color: var(--white);
}

.bg-black {
    background-color: var(--black);
}

.bg-yellow {
    background-color: var(--yellow);
}

.bg-green {
    background-color: var(--green);
}

.bg-grey {
    background-color: var(--grey);
}

.bg-red {
    background-color: var(--red);
}

.text-blue {
    color: var(--blue);
}

.text-orange {
    color: var(--orange);
}

.text-black {
    color: var(--black-100);
}

.text-black-p {
    color: var(--black-100);
    opacity: 0.8;
}

.text-white {
    color: var(--white-100);
}

.text-yellow {
    color: var(--yellow);
}

.text-red {
    color: var(--red);
}

.opacity-8 {
    opacity: 0.8;
}

.opacity-5 {
    opacity: 0.5;
}

/* Colors */

a {
    text-decoration: underline;
    color: var(--red);
    overflow-wrap: break-word !important; 
}

p{
    font-family: 'Microgramma' !important;
    font-size: var(--text-16);
    text-transform: uppercase;
}




a:hover {
    color: inherit;
}

.nav-link {
    color: var(--white) !important;
}

.nav-link:hover {
    color: var(--blue) !important;
}

/* Gap */
.gap-80 {
    gap: var(--spacing-80);
}

.gap-64 {
    gap: var(--spacing-64);
}

.gap-40 {
    gap: var(--spacing-40);
}

.gap-28 {
    gap: var(--spacing-28);
}

.gap-24 {
    gap: var(--spacing-24);
}

.gap-16 {
    gap: var(--spacing-16);
}

.gap-12 {
    gap: var(--spacing-12);
}

.gap-8 {
    gap: var(--spacing-8);
}

.border-black{
    border: solid var(--black) !important;
}

/* Gap */

/* Padding */
.p-40 {
    padding-right: var(--spacing-40);
    padding-left: var(--spacing-40);
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
}

.p-24 {
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
    padding-top: var(--container-padding);
    padding-bottom: var(--container-padding);
}

.p-12 {
    padding-right: var(--spacing-12);
    padding-left: var(--spacing-12);
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
}

.px-8 {
    padding-right: var(--spacing-8);
    padding-left: var(--spacing-8);
}

.px-24 {
    padding-right: var(--container-padding);
    padding-left: var(--container-padding);
}

.px-40 {
    padding-right: var(--spacing-40);
    padding-left: var(--spacing-40);
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
}

.pt-24 {
    padding-top: var(--spacing-24);
}

.pt-40 {
    padding-top: var(--spacing-40);
}

.pr-8 {
    padding-right: var(--spacing-8);
}

.pr-64 {
    padding-right: var(--spacing-64);
}


.py-16 {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
}

.py-24 {
    padding-top: var(--spacing-24);
    padding-bottom: var(--spacing-24);
}

.py-40 {
    padding-top: var(--spacing-40);
    padding-bottom: var(--spacing-40);
}

.py-80 {
    padding-top: var(--spacing-80);
    padding-bottom: var(--spacing-80);
}

.pb-16 {
    padding-bottom: var(--spacing-16);
}

.pb-40 {
    padding-bottom: var(--spacing-40);
}

.pb-80 {
    padding-bottom: var(--spacing-80);
}

.py-128 {
    padding-top: var(--spacing-128);
    padding-bottom: var(--spacing-128);
}

.px-80 {
    padding-left: var(--spacing-80);
    padding-right: var(--spacing-80);
}

.px-128 {
    padding-left: var(--spacing-128);
    padding-right: var(--spacing-128);
}

/* Padding */

/* Margin */
.mt-16 {
    margin-top: var(--spacing-16);
}

.mt-24 {
    margin-top: var(--spacing-24);
}

.my-40 {
    margin-top: var(--spacing-40);
    margin-bottom: var(--spacing-40);
}

/* Margin */


/* Font */

.font-bold {
    font-weight: var(--font-weight-bold);
}

.font-semi-bold {
    font-weight: var(--font-weight-semi-bold);
}

.font-semi-medium {
    font-weight: var(--font-weight-medium);
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

h1 {
    margin-bottom: 0 !important;
    font-family: 'Serif-Gothic';
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing);
    font-size: var(--heading-1);
    text-transform: uppercase;
}

h2 {
    margin-bottom: 0 !important;
    font-family: 'Serif-Gothic';
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing);
    font-size: var(--heading-2);
    text-transform: uppercase;
}

h3 {
    margin-bottom: 0 !important;
    font-family: 'Serif-Gothic';
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing);
    font-size: var(--heading-3);
    text-transform: uppercase;
}


h4 {
    margin-bottom: 0 !important;
    font-family: 'Serif-Gothic';
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing);
    font-size: var(--heading-4);
    text-transform: uppercase;
}

h5 {
    margin-bottom: 0 !important;
    font-family: 'Serif-Gothic';
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing);
    font-size: var(--heading-5);
    text-transform: uppercase;
}

h6 {
    margin-bottom: 0 !important;
    font-family: 'Serif-Gothic';
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-title);
    letter-spacing: var(--letter-spacing);
    font-size: var(--heading-6);
    text-transform: uppercase;
}

p {
    margin-bottom: 0 !important;
    font-family: 'Microgamma';
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-text);
    letter-spacing: var(--letter-spacing);
    font-size: var(--text-16);
}

.text-28 {
    font-size: var(--text-28);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight-regular);
}

.text-24 {
    font-size: var(--text-24);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight-regular);
}

.text-18 {
    font-size: var(--text-18);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight-regular);
}

.text-16 {
    font-size: var(--text-16);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight-regular);
}

.text-14 {
    font-size: var(--text-16);
    letter-spacing: var(--letter-spacing);
    font-weight: var(--font-weight-regular);
}

/* Font */


/* Float */

.float-right {
    float: right;
}

/* Float */

/* Text Align */

.txt-algn-center {
    text-align: center;
}

/* Text Align */

.line-height-110{
    --line-height-title: 110% !important;
}

.line-height-150{
    --line-height-title: 150% !important;
}

.border-radius-24 {
    border-radius: var(--spacing-24);
}

.bg-body {
    background-image: url('../assets/images/bg-body-top.webp'), url('../assets/images/bg-body-bottom.webp');
    background-repeat: no-repeat, repeat;
    background-size: contain;
}



.divider{
    margin-top: 5rem;
}

.container-fluid{
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.p-content{
    padding-right: 3rem !important;
    padding-left: 3rem !important;
    padding-top: 5rem;
    padding-bottom: 5rem;
}


.marquee {
    overflow: hidden;
    width: 100%;
    margin-top: 10vh !important;
  }
  
  .marquee-content {
    display: flex;
    animation: scrolling 10s linear infinite;
  }
  
  .marquee-item {
    flex: 0 0 32vw; /* Default for desktop */
    margin: 0 1vw;
  }
  
  .marquee-item img {
    display: block;
    width: 100%;
  }

  /* Animation for scrolling */
@keyframes scrolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-144vw); } /* Adjust based on flex-basis (16vw * number of items + margins) */
  }

.content-about {
    position: relative;
    width: 100%;
}

#header{
    height: 100vh;
}

.card-panduan-content-left{
    height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.card-panduan-content-right{
    height: 22rem;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.img-loket {
    width: 50%;
}

.img-panduan {
    width: 50%;
}

.card-kontak-content{
    height: 14rem !important;
}

.img-serigala{
    height: 46.875rem;
}

.btn-primary{
    border-radius: 0;
    background-color: var(--red);
    border: none;
    padding-right: 1rem;
    padding-left: 1rem;
    font-family: 'Microgramma';
}

.btn-primary:hover{
    background-color: var(--red);
}

.btn-submit{
    border-radius: 0;
    background-color: var(--red);
    color: var(--white);
    border: none;
    padding-right: 1rem;
    padding-left: 1rem;
    font-family: 'Microgramma';
}

.btn-submit:hover{
    background-color: var(--red);
}

.icon-point{
    height: 4rem;
}

.button-ticket{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    border: 4px solid #000000;
    border-radius: 12px;
    box-shadow:8px 8px #000000;
    background-color: var(--green);
    color: #000000;
    height: 8rem;
    width: 40%;
}

.button-ticket:hover{
    background-color: var(--red);
    color: var(--white);
}

.nav-logo{
    height: 2rem;
}

.card-tnc{
    height: 60rem;
    overflow: scroll;
}

.card-tnc-submission{
    height: auto;
}

.card-submission{
    background-color: var(--red);
    height: 28.125rem;
    border: .25rem solid black;
}

.card-head-submission{
    height: 13.75rem !important;
}

.img-submission{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.par-submission{
    height: 51%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-direction: column;
}

.text-submission{
    display: flex;
    align-items: flex-start;
    color: var(--white);
    font-size: var(--text-18);
}

.btn-submission{
    border-radius: 0;
    background-color: var(--yellow);
    border: none;
    padding-right: 1rem;
    padding-left: 1rem;
    font-family: 'Microgramma';
}

.btn-submission:hover{
    background-color: var(--yellow);
}

.img-banner{
    height: 100%;
    object-fit: contain;
}

li{
    padding-bottom: 1rem;
}



/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {

    body {
        overflow-x: hidden;
        background-color: var(--black);
        padding: 1rem;
    }

    .p-content{
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    .divider{
        margin-top: 2.5rem;
    }
    

    h2 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--heading-5);
        text-transform: uppercase;
    }

    h4 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--heading-5) !important;
        text-transform: uppercase;
    }

    h5 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-16) !important;
        text-transform: uppercase;
    }

    h6 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-14) !important;
        text-transform: uppercase;
    }

    .p-5{
        padding: 1rem !important;
    }

    .card-panduan-content-left{
        height: 20rem !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .card-panduan-content-right{
        height: auto !important;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .border-panduan {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }
    
    .card-kontak-content{
        height: auto !important;
    }

    .img-serigala{
        height: auto !important;
    }

    p{
        font-family: 'Microgramma' !important;
        font-size: var(--text-12);
    }

    .text-kontak{
        font-size: var(--text-16);
    }

    .marquee {
        margin-top: 22vh !important;
      }
      

    .marquee-item {
        flex: 0 0 100vw; /* Smaller items for large screens */
        margin: 0 1vw;
      }
    
      @keyframes scrolling {
        0% { transform: translateX(0); }
        100% { transform: translateX(-200vw); } /* Adjust the scroll range */
      }
      
    .nav-logo{
        height: 1.5rem !important;
    }

    .nav-logo-seringai{
        height: 2rem !important;
    }

    .tnc-title{
        font-size: var(--text-18) !important;
    }

    .tnc-title-2{
        font-size: var(--text-16) !important;
    }

    .mt-4{
        margin-top: .5rem !important;
    }

    .text-14{
        font-size: var(--text-12);
    }


    .text-header{
        width: 100%;
        margin-top: 25vh !important;
    }
    
    .img-loket {
        width: 75%;
    }

    .img-panduan {
        width: 75% !important;
    }

    .border-panduan h6{
        text-align: center !important;
    }

    .button-ticket{
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        text-decoration: none;
        border: 4px solid #000000;
        border-radius: 12px;
        box-shadow:8px 8px #000000;
        background-color: var(--green);
        color: #000000;
        height: 5rem;
        width: 90%;
    }

    .btn-submit{
        border-radius: 0;
        background-color: var(--red);
        color: var(--white);
        border: none;
        padding-right: 1rem;
        padding-left: 1rem;
        font-family: 'Microgramma';
        width: 90px;
        font-size: 8px;
    }

    /* .card-submission{
        background-color: var(--red);
        height: auto;
        border: .25rem solid black;
    }
    
    .card-head-submission{
        height: auto !important;
    }

    .img-submission{
        width: 100%;
        height: auto !important;
        object-fit: cover;
    }
    .btn-submission {
        margin-top: 2rem !important;
        font-size: var(--text-14) !important;
    }

    .img-banner{
        height: auto;
        object-fit: contain;
    } */
}

/* // X-Large devices (large desktops, 1200px and up) */
@media (min-width: 576px) and (max-width: 767px) {

    .p-content{
        padding-left: 2rem !important;
        padding-right: 2rem !important;
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .divider{
        margin-top: 3rem;
    }

    h2 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--heading-4);
        text-transform: uppercase;
    }

    h4 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-18) !important;
        text-transform: uppercase;
    }

    h6 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-14) !important;
        text-transform: uppercase;
    }

    h5 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-18) !important;
        text-transform: uppercase;
    }

    .img-serigala{
        height: 24rem !important;
    }

    .marquee {
        overflow: hidden;
        display: block;
        position: absolute;
        bottom: 2%;
    }

    .text-header{
        margin-top: 20vh !important;
    }

    .border-panduan {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }

    .img-loket {
        width: 75%;
    }

    .card-panduan-content-left{
        height: 23rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .card-panduan-content-right{
        height: 23rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .border-panduan h6{
        text-align: center !important;
    }

    .marquee-item {
        flex: 0 0 100vw; /* Smaller items for large screens */
        margin: 0 1vw;
    }
    
    @keyframes scrolling {
        0% { transform: translateX(0); }
        100% { transform: translateX(-200vw); } /* Adjust the scroll range */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {

    h2 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--heading-4);
        text-transform: uppercase;
    }

    h4 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-24) !important;
        text-transform: uppercase;
    }

    h6 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-14) !important;
        text-transform: uppercase;
    }

    h5 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-18) !important;
        text-transform: uppercase;
    }

    p{
        font-family: 'Microgramma' !important;
        font-size: var(--text-12);
    }

    .text-14{
        font-size: var(--text-12);
    }

    .img-loket {
        width: 50%;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }

    .border-panduan {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }

    .card-panduan-content-left{
        height: 20rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .card-panduan-content-right{
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .border-panduan h6{
        text-align: center !important;
    }

    .card-kontak-content{
        height: 16rem !important;
    }

    .text-header{
        width: 100%;
        margin-top: 25vh !important;
    }

    .marquee {
        margin-top: 15vh !important;
    }

    .marquee-item {
        flex: 0 0 80vw; /* Smaller items for large screens */
        margin: 0 1vw;
    }
    
    @keyframes scrolling {
        0% { transform: translateX(0); }
        100% { transform: translateX(-200vw); } /* Adjust the scroll range */
    }

    .button-ticket{
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        text-decoration: none;
        border: 4px solid #000000;
        border-radius: 12px;
        box-shadow:8px 8px #000000;
        background-color: var(--green);
        color: #000000;
        height: 6rem;
        width: 60%;
    }

}

@media (min-width: 1024px) and (max-width: 1279px) {

    h2 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--heading-4);
        text-transform: uppercase;
    }
    
    h4 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-24) !important;
        text-transform: uppercase;
    }

    h6 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-14) !important;
        text-transform: uppercase;
    }

    h5 {
        margin-bottom: 0 !important;
        font-family: 'Serif-Gothic';
        font-weight: var(--font-weight-bold);
        line-height: var(--line-height-title);
        letter-spacing: var(--letter-spacing);
        font-size: var(--text-18) !important;
        text-transform: uppercase;
    }

    p{
        font-family: 'Microgramma' !important;
        font-size: var(--text-12);
    }

    .text-14{
        font-size: var(--text-12);
    }

    .img-loket {
        width: 75%;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }

    .border-panduan {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }

    .card-panduan-content-left{
        height: 25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .card-panduan-content-right{
        height: 25rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .border-panduan h6{
        text-align: center !important;
    }

    .text-header{
        width: 100%;
        margin-top: 25vh !important;
    }

    .marquee {
        margin-top: 10vh !important;
    }

    .marquee-item {
        flex: 0 0 70vw; /* Smaller items for large screens */
        margin: 0 1vw;
    }
    
    @keyframes scrolling {
        0% { transform: translateX(0); }
        100% { transform: translateX(-200vw); } /* Adjust the scroll range */
    }

    .button-ticket{
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: bold;
        text-decoration: none;
        border: 4px solid #000000;
        border-radius: 12px;
        box-shadow:8px 8px #000000;
        background-color: var(--green);
        color: #000000;
        height: 6rem;
        width: 60%;
    }
}

@media (min-width: 1280px) and (max-width: 1428px) {
    .marquee {
        overflow: hidden;
        display: block;
        position: absolute;
        bottom: 2%;
        margin-left: 2rem;
    }

    .text-header{
        width: 80%;
        margin: 0 auto; 
        margin-top: 16vh !important;
    }

    .border-panduan {
        display: flex;
        /* flex-direction: column; */
        align-items: start;
    }

    .img-panduan {
        height: 9rem;
        width: 100%;
        object-fit: contain;
    }

}


@media (min-width: 1440px) {
    .text-header{
        width: 80%;
        margin: 0 auto; 
        margin-top: 18vh !important;
    }
    
    .img-panduan {
        height: 9rem;
        object-fit: contain;
    }

    .text-header{
        margin-top: 16vh !important;
    }
}