@font-face {
    font-family: myFont1;
    src: url(/font/Rubik-Medium.ttf);
}
:root {
    --rgba-primary-bg-color: 77, 1, 1;
    --rgba-primary: 115, 102, 255;
    --rgba-secondary: 30, 166, 236;
    --rgba-success: 25, 135,84;
    --rgba-danger: 220, 53, 69;
    --rgba-warning: 255, 193, 7;


    --rgba-red-high: 242, 35, 35;
    --rgba-red: 23, 0, 0;
    --rgba-coklat: 47, 31, 31;
    --rgba-white: 255, 255, 255;
    --rgba-black: 0, 0, 0;
    background: #000000;
    --primary-color: rgba(var(--rgba-primary));
    --secondary-color: rgba(var(--rgba-secondary));
    --success-color: rgba(var(--rgba-success));
    --danger-color: rgba(var(--rgba-danger));
    --warning-color: rgba(var(--rgba-warning));
    --white-color: rgba(var(--rgba-white), 0.6);
    --black-color: rgba(var(--rgba-black));;
    --red-color: rgba(var(--rgba-red));
    --red-high-color: rgba(var(--rgba-red-high));

    --coklat-color: rgba(var(--rgba-coklat));
    --border-primary: 1px solid #374558;

    --bg-primary-gradient: radial-gradient(circle, rgba(var(--rgba-primary), 0.2) 0%, rgba(var(--rgba-primary-bg-color))100%);
    --bg-box-primary: #262932;

    --shadow-primary: -3px 5px 5px rgba(var(--rgba-black), 0.5);
}
*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
*::-webkit-scrollbar-track {
    background-color: rgba(var(--rgba-primary), 0.2);
}
*::-webkit-scrollbar-thumb {
    background-color: var(--black-color);
    border-radius: 6px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(var(--rgba-primary), 0.5);
}
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
a {
    /* width: 100%; */
    text-decoration: none;
    color: var(--white-color);
}
ol,ul {
    list-style: none;
    margin: 0;
    padding: 0
}
body {
    width: 100%;
    /* background: rgba(var(--rgba-black)); */
    color: var(--white-color);
    scroll-behavior: smooth;
    position: relative;
    overflow-x: hidden;
}

h1,h2{
    font-size: 26px;
}
svg {
    height: 20px;
    width: 20px;
    stroke: var(--coklat-color);
}


button, input, optgroup, select, textarea {
    padding: 0;
    line-height: inherit;
    color: inherit;
    border: transparent;
}
button, input, optgroup, select, textarea {
    /* font-family: myFont1; */
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button {
    background-color: transparent;
    color: inherit;
    border-width: 0;
    padding: 0;
    cursor: pointer;
}
button,select {
    text-transform: none
}
button {
    background-color: transparent;
    color: inherit;
    border-width: 0;
    padding: 0;
    cursor: pointer;
}
button,select {
    text-transform: none
}

#mobileMenu a {
    font-size: 18px;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
}

.flexcenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flexbetween {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.flexstart {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.flexend {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

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

.radius-4 {
    border-radius: 4px;
}
.radius-3 {
    border-radius: 3px;
}
#editor {
    height: 1000px;
  }
  .ql-font-roboto {
    font-family: 'Roboto', sans-serif;
}

.ql-font-poppins {
    font-family: 'Poppins', sans-serif;
}

.pointer-events-none {
    pointer-events: none
}

.visible {
    visibility: visible
}

.invisible {
    visibility: hidden
}

.static {
    position: static
}

.fixed {
    position: fixed
}

.absolute {
    position: absolute
}

.relative {
    position: relative
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

.top-0 {
    top: 0
}

.top-4 {
    top: 4px
}

.top-7 {
    top: 1.75rem
}

.top-8 {
    top: 8px
}

.top-12 {
    top: 12px
}

.top-16 {
    top: 16px
}

.top-20 {
    top: 20px
}

.top-24 {
    top: 24px
}

.top-32 {
    top: 32px
}

.top-40 {
    top: 40px
}

.top-45 {
    top: 45px
}

.top-72 {
    top: 72px
}

.top-130 {
    top: 130px
}

.-top-8 {
    top: -8px
}

.-top-16 {
    top: -16px
}

.top-1\/2 {
    top: 50%
}

.top-full {
    top: 100%
}

.right-0 {
    right: 0
}

.right-4 {
    right: 4px
}

.right-8 {
    right: 8px
}

.right-10 {
    right: 10px
}

.right-12 {
    right: 12px
}

.right-14 {
    right: 3.5rem
}

.right-16 {
    right: 16px
}

.right-20 {
    right: 20px
}

.right-24 {
    right: 24px
}

.right-32 {
    right: 32px
}

.right-64 {
    right: 64px
}

.-right-4 {
    right: -4px
}

.-right-8 {
    right: -8px
}

.-right-16 {
    right: -16px
}

.bottom-0 {
    bottom: 0
}

.bottom-16 {
    bottom: 16px
}

.bottom-24 {
    bottom: 24px
}

.bottom-50 {
    bottom: 50px
}

.bottom-64 {
    bottom: 64px
}

.-bottom-4 {
    bottom: -4px
}

.-bottom-8 {
    bottom: -8px
}

.-bottom-24 {
    bottom: -24px
}

.left-0 {
    left: 0
}

.left-3 {
    left: .75rem
}

.left-6 {
    left: 6px
}

.left-16 {
    left: 16px
}

.left-32 {
    left: 32px
}

.left-35 {
    left: 35px
}

.-left-8 {
    left: -8px
}

.-left-24 {
    left: -24px
}

.left-1\/2 {
    left: 50%
}

.-left-1\/2 {
    left: -50%
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.-z-2 {
    z-index: -2
}

.col-span-1 {
    grid-column: span 1/span 1
}

.col-span-2 {
    grid-column: span 2/span 2
}

.m-0 {
    margin: 0
}

.m-24 {
    margin: 24px
}

.m-32 {
    margin: 32px
}

.m-auto {
    margin: auto
}

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

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

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

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

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

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

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

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

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

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

.my-8 {
    margin-top: 8px;
    margin-bottom: 8px
}

.my-12 {
    margin-top: 12px;
    margin-bottom: 12px
}

.my-16 {
    margin-top: 16px;
    margin-bottom: 16px
}

.my-24 {
    margin-top: 24px;
    margin-bottom: 24px
}

.my-32 {
    margin-top: 32px;
    margin-bottom: 32px
}

.mt-2 {
    margin-top: 2px
}

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

.mt-4 {
    margin-top: 4px
}

.mt-5 {
    margin-top: 5px;
}

.mt-6 {
    margin-top: 6px
}

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

.mt-8 {
    margin-top: 8px
}

.mt-10 {
    margin-top: 10px
}

.mt-12 {
    margin-top: 12px
}

.mt-16 {
    margin-top: 16px
}

.mt-20 {
    margin-top: 20px
}

.mt-24 {
    margin-top: 24px
}

.mt-26 {
    margin-top: 26px
}

.mt-32 {
    margin-top: 32px
}

.mt-48 {
    margin-top: 48px
}

.mt-64 {
    margin-top: 64px
}
.mt-90 {
    margin-top: 90px
}
.mt-100 {
    margin-top: 100px
}

.mt-120 {
    margin-top: 120px
}

.mt-178 {
    margin-top: 178px
}

.mt-3\.5 {
    margin-top: .875rem
}

.-mt-8 {
    margin-top: -8px
}

.-mt-32 {
    margin-top: -32px
}

.mr-2 {
    margin-right: 2px
}

.mr-4 {
    margin-right: 4px
}

.mr-6 {
    margin-right: 6px
}

.mr-8 {
    margin-right: 8px
}

.mr-10 {
    margin-right: 10px
}

.mr-12 {
    margin-right: 12px
}

.mr-16 {
    margin-right: 16px
}

.mr-24 {
    margin-right: 24px
}
.mr-32 {
    margin-right: 32px
}

.-mr-4 {
    margin-right: -4px
}

.mb-0 {
    margin-bottom: 0
}

.mb-2 {
    margin-bottom: 2px
}
.mb-3 {
    margin-bottom: 3px
}
.mb-4 {
    margin-bottom: 4px
}
.mb-5 {
    margin-bottom: 5px
}

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

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

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

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

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

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

.mb-32 {
    margin-bottom: 32px
}
.mb-40 {
    margin-bottom: 40px
}
.mb-48 {
    margin-bottom: 48px
}

.mb-0\.5 {
    margin-bottom: .125rem
}

.mb-p30 {
    margin-bottom: 30px
}

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

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

.ml-0 {
    margin-left: 0
}

.ml-2 {
    margin-left: 2px
}

.ml-3 {
    margin-left: .75rem
}

.ml-4 {
    margin-left: 4px
}

.ml-6 {
    margin-left: 6px
}

.ml-8 {
    margin-left: 8px
}

.ml-10 {
    margin-left: 10px
}

.ml-12 {
    margin-left: 12px
}

.ml-16 {
    margin-left: 16px
}

.ml-20 {
    margin-left: 20px
}

.ml-24 {
    margin-left: 24px
}

.ml-32 {
    margin-left: 32px
}

.ml-auto {
    margin-left: auto
}

.ml-0\.5 {
    margin-left: .125rem
}

.-ml-8 {
    margin-left: -8px
}

.-ml-24 {
    margin-left: -24px
}

.first\:mt-24:first-child {
    margin-top: 24px
}

.last\:mr-0:last-child {
    margin-right: 0
}
/* .last:mb-0 */
.last\:mb-0:last-child {
    margin-bottom: 0
}
/* last:-mb-0 */
.last\:-mb-0:last-child {
    margin-bottom: 0
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

.flex {
    display: flex;
}

.inline-flex {
    display: inline-flex;
}

.table {
    display: table;
}

.grid {
    display: grid;
}


.h-3 {
    height: .75rem;
}

.h-5 {
    height: 1.25rem;
}

.h-12 {
    height: 12px;
}

.h-16 {
    height: 16px;
}

.h-20 {
    height: 20px;
}

.h-24 {
    height: 24px;
}

.h-26 {
    height: 26px
}

.h-30 {
    height: 30px
}
.h-32 {
    height: 32px
}

.h-34 {
    height: 34px;
}

.h-36 {
    height: 36px;
}

.h-40 {
    height: 40px
}

.h-45 {
    height: 45px
}

.h-48 {
    height: 48px
}

.h-50 {
    height: 50px
}

.h-60 {
    height: 60px
}

.h-64 {
    height: 64px
}

.h-80 {
    height: 80px
}

.h-100 {
    height: 100px
}

.h-178 {
    height: 178px
}

.h-200 {
    height: 200px
}

.h-250 {
    height: 250px
}

.h-640 {
    height: 640px
}

.h-auto {
    height: auto
}

.h-px {
    height: 1px
}

.h-full {
    height: 100%
}

.h-screen {
    height: 100vh
}

.max-h-200 {
    max-height: 200px
}

.w-3 {
    width: .75rem
}

.w-9 {
    width: 2.25rem
}

.w-16 {
    width: 16px
}

.w-20 {
    width: 20px
}

.w-24 {
    width: 24px
}

.w-26 {
    width: 26px
}

.w-28 {
    width: 7rem
}

.w-32 {
    width: 32px
}

.w-36 {
    width: 36px
}

.w-40 {
    width: 40px
}

.w-44 {
    width: 11rem
}

.w-45 {
    width: 45px
}

.w-48 {
    width: 48px
}

.w-64 {
    width: 64px
}


.w-80 {
    width: 80px
}

.w-90 {
    width: 90px
}

.w-100 {
    width: 100px
}

.w-120 {
    width: 120px
}

.w-130 {
    width: 130px
}

.w-155 {
    width: 155px
}

.w-165 {
    width: 165px
}

.w-174 {
    width: 174px
}

.w-178 {
    width: 178px
}

.w-200 {
    width: 200px
}

.w-250 {
    width: 250px
}

.w-340 {
    width: 340px
}
.w-400 {
    width: 400px
}
.w-440 {
    width: 440px
}

.w-600 {
    width: 600px
}

.w-700 {
    width: 700px
}

.w-747 {
    width: 747px
}

.w-800 {
    width: 800px
}

.w-1\/2 {
    width: 50%
}

.w-2\/3 {
    width: 66.666667%
}

.w-1\/4 {
    width: 25%
}

.w-2\/4 {
    width: 50%
}

.w-3\/4 {
    width: 75%
}

.w-1\/5 {
    width: 20%
}

.w-2\/5 {
    width: 40%
}

.w-3\/5 {
    width: 60%
}

.w-4\/5 {
    width: 80%
}

.w-5\/6 {
    width: 83.333333%
}

.w-9\/12 {
    width: 75%
}

.w-11\/12 {
    width: 91.666667%
}

.w-full {
    width: 100%
}

.w-max {
    width: -moz-max-content;
    width: max-content
}

.max-w-full {
    max-width: 100%
}

.flex-1 {
    flex: 1 1 0%
}

.flex-shrink-0 {
    flex-shrink: 0
}

.flex-shrink {
    flex-shrink: 1
}

.flex-grow-0 {
    flex-grow: 0
}



.cursor-auto {
    cursor: auto
}

.cursor-default {
    cursor: default
}

.cursor-pointer {
    cursor: pointer
}

.cursor-text {
    cursor: text
}

.cursor-not-allowed {
    cursor: not-allowed
}

.cursor-grab {
    cursor: grab
}

.select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.resize {
    resize: both
}

.list-disc {
    list-style-type: disc
}

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

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

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

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

.grid-cols-customdomain {
    grid-template-columns: 70px 2fr 2fr
}

.flex-row {
    flex-direction: row
}

.flex-col {
    flex-direction: column
}

.flex-wrap {
    flex-wrap: wrap
}

.content-center {
    align-content: center
}

.items-center {
    align-items: center
}

.justify-end {
    justify-content: flex-end
}

.justify-center {
    justify-content: center
}

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

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

.gap-0 {
    gap: 0
}
.gap-3 {
    gap: 3px
}
.gap-5 {
    gap: 5px
}

.gap-6 {
    gap: 6px
}

.gap-8 {
    gap: 8px
}

.gap-10 {
    gap: 10px
}

.gap-12 {
    gap: 12px
}

.gap-16 {
    gap: 16px
}
.gap-22 {
    gap: 22px
}
.gap-32 {
    gap: 32px
}
.gap-36 {
    gap: 36px
}
.gap-x-3 {
    -moz-column-gap: .75rem;
    column-gap: .75rem
}

.gap-x-12 {
    -moz-column-gap: 12px;
    column-gap: 12px
}

.gap-x-16 {
    -moz-column-gap: 16px;
    column-gap: 16px
}

.gap-x-24 {
    -moz-column-gap: 24px;
    column-gap: 24px
}

.gap-x-32 {
    -moz-column-gap: 32px;
    column-gap: 32px
}

.gap-y-24 {
    row-gap: 24px
}

/* .space-y-24>:not([hidden])~:not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(24px * var(--tw-space-y-reverse))
} */

.overflow-auto {
    overflow: auto
}

.overflow-hidden {
    overflow: hidden;
    overflow-x: hidden; 
    overflow-y: hidden;
}

.overflow-visible {
    overflow: visible
}

.overflow-scroll {
    overflow: scroll
}

.overflow-x-auto {
    overflow-x: auto
}

.overflow-y-auto {
    overflow-y: auto
}

.overflow-x-hidden {
    overflow-x: hidden
}
.overflow-y-hidden {
    overflow-y: hidden
}
.overflow-x-scroll {
    overflow-x: scroll
}

.overflow-y-scroll {
    overflow-y: scroll
}

.truncate {
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap
}

.break-all {
    word-break: break-all
}

.rounded-6 {
    border-radius: 6px
}

.rounded-12 {
    border-radius: 12px
}
.rounded-25 {
    border-radius: 25px
}
.rounded-52 {
    border-radius: 52px
}

.rounded-sm {
    border-radius: 4px
}

.rounded {
    border-radius: .25rem
}

.rounded-md {
    border-radius: 8px
}

.rounded-lg {
    border-radius: .5rem
}

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

.rounded-xs {
    border-radius: 2px
}
.rounded-0 {
    border-radius: 0px
}
.rounded-r-sm {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.rounded-l-sm {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

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

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

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

.border {
    border-width: 1px
}

.border-t-1 {
    border-top-width: 1px
}

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

.border-t {
    border-top-width: 1px
}

.border-r {
    border-right-width: 1px
}

.border-b-1 {
    border-bottom-width: 1px
}

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

.border-b {
    border-bottom-width: 1px
}

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

.border-l {
    border-left-width: 1px
}

.border-solid {
    border-style: solid
}

.border-dashed {
    border-style: dashed
}

.border-none {
    border-style: none
}

.border-transparent {
    border-color: transparent
}

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.object-center {
    -o-object-position: center;
    object-position: center
}

.p-0 {
    padding: 0
}

.p-1 {
    padding: 1px
}

.p-2 {
    padding: 2px
}

.p-4 {
    padding: 4px
}

.p-6 {
    padding: 6px
}

.p-8 {
    padding: 8px
}

.p-10 {
    padding: 10px
}

.p-12 {
    padding: 12px
}

.p-16 {
    padding: 16px
}

.p-22 {
    padding: 22px
}

.p-24 {
    padding: 24px
}

.p-32 {
    padding: 32px
}
.p-30 {
    padding: 30px
}
.p-48 {
    padding: 48px
}

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

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

.px-4 {
    padding-left: 4px;
    padding-right: 4px
}

.px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem
}

.px-6 {
    padding-left: 6px;
    padding-right: 6px
}

.px-7 {
    padding-left: 1.75rem;
    padding-right: 1.75rem
}

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

.px-10 {
    padding-left: 10px;
    padding-right: 10px
}

.px-11 {
    padding-left: 2.75rem;
    padding-right: 2.75rem
}

.px-12 {
    padding-left: 12px;
    padding-right: 12px
}

.px-14 {
    padding-left: 3.5rem;
    padding-right: 3.5rem
}

.px-16 {
    padding-left: 16px;
    padding-right: 16px
}

.px-20 {
    padding-left: 20px;
    padding-right: 20px
}

.px-22 {
    padding-left: 22px;
    padding-right: 22px
}

.px-24 {
    padding-left: 24px;
    padding-right: 24px
}

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

.px-35 {
    padding-left: 35px;
    padding-right: 35px
}

.px-40 {
    padding-left: 40px;
    padding-right: 40px
}

.px-48 {
    padding-left: 48px;
    padding-right: 48px
}

.px-64 {
    padding-left: 64px;
    padding-right: 64px
}

.py-0 {
    padding-top: 0;
    padding-bottom: 0
}

.py-2 {
    padding-top: 2px;
    padding-bottom: 2px
}

.py-4 {
    padding-top: 4px;
    padding-bottom: 4px
}

.py-6 {
    padding-top: 6px;
    padding-bottom: 6px
}

.py-8 {
    padding-top: 8px;
    padding-bottom: 8px
}

.py-10 {
    padding-top: 10px;
    padding-bottom: 10px
}

.py-12 {
    padding-top: 12px;
    padding-bottom: 12px
}

.py-16 {
    padding-top: 16px;
    padding-bottom: 16px
}

.py-20 {
    padding-top: 20px;
    padding-bottom: 20px
}

.py-24 {
    padding-top: 24px;
    padding-bottom: 24px
}

.py-32 {
    padding-top: 32px;
    padding-bottom: 32px
}

.py-45 {
    padding-top: 45px;
    padding-bottom: 45px
}

.py-64 {
    padding-top: 64px;
    padding-bottom: 64px
}

.py-0\.5 {
    padding-top: .125rem;
    padding-bottom: .125rem
}

.pt-0 {
    padding-top: 0
}

.pt-2 {
    padding-top: 2px
}

.pt-4 {
    padding-top: 4px
}
.pt-5 {
    padding-top: 5px
}

.pt-7 {
    padding-top: 1.75rem
}

.pt-8 {
    padding-top: 8px
}

.pt-12 {
    padding-top: 12px
}

.pt-16 {
    padding-top: 16px
}

.pt-20 {
    padding-top: 20px
}

.pt-24 {
    padding-top: 24px
}

.pt-32 {
    padding-top: 32px
}

.pt-34 {
    padding-top: 34px
}

.pt-36 {
    padding-top: 36px
}

.pt-40 {
    padding-top: 40px
}

.pt-50 {
    padding-top: 50px
}

.pr-1 {
    padding-right: 1px
}

.pr-4 {
    padding-right: 4px
}

.pr-6 {
    padding-right: 6px
}

.pr-8 {
    padding-right: 8px
}

.pr-10 {
    padding-right: 10px
}

.pr-16 {
    padding-right: 16px
}

.pr-20 {
    padding-right: 20px
}

.pr-24 {
    padding-right: 24px
}

.pr-32 {
    padding-right: 32px
}

.pr-48 {
    padding-right: 48px
}

.pr-64 {
    padding-right: 64px
}

.pr-72 {
    padding-right: 72px
}
.pr-100 {
    padding-right: 100px
}
.pr-116 {
    padding-right: 116px
}
.pr-1\.5 {
    padding-right: .375rem
}

.pb-0 {
    padding-bottom: 0
}

.pb-2 {
    padding-bottom: 2px
}

.pb-4 {
    padding-bottom: 4px
}

.pb-6 {
    padding-bottom: 6px
}

.pb-8 {
    padding-bottom: 8px
}

.pb-10 {
    padding-bottom: 10px
}

.pb-12 {
    padding-bottom: 12px
}

.pb-16 {
    padding-bottom: 16px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-24 {
    padding-bottom: 24px
}

.pb-32 {
    padding-bottom: 32px
}

.pb-34 {
    padding-bottom: 34px
}

.pb-40 {
    padding-bottom: 40px
}

.pb-48 {
    padding-bottom: 48px
}
.pb-68 {
    padding-bottom: 68px
}

.pb-72 {
    padding-bottom: 72px
}

.pb-80 {
    padding-bottom: 80px
}

.pl-1 {
    padding-left: 1px
}

.pl-4 {
    padding-left: 4px
}

.pl-5 {
    padding-left: 1.25rem
}

.pl-6 {
    padding-left: 6px
}

.pl-10 {
    padding-left: 10px
}

.pl-12 {
    padding-left: 12px
}

.pl-16 {
    padding-left: 16px
}

.pl-24 {
    padding-left: 24px
}

.pl-32 {
    padding-left: 32px
}

.pl-90 {
    padding-left: 90px
}

.pl-190 {
    padding-left: 190px
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.font-inter {
    font-family: Inter,sans-serif
}

.text-8 {
    font-size: 8px
}

.text-10 {
    font-size: 10px
}

.text-12 {
    font-size: 12px
}

.text-14 {
    font-size: 14px
}

.text-16 {
    font-size: 16px
}

.text-18 {
    font-size: 18px
}

.text-20 {
    font-size: 20px
}

.text-22 {
    font-size: 22px
}

.text-24 {
    font-size: 24px
}

.text-28 {
    font-size: 28px
}

.text-30 {
    font-size: 30px
}

.text-32 {
    font-size: 32px
}

.text-48 {
    font-size: 48px
}

.text-64 {
    font-size: 64px
}

.text-xs {
    font-size: .75rem;
    line-height: 1rem
}

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

.font-light {
    font-weight: 300
}

.font-normal {
    font-weight: 400
}

.font-medium {
    font-weight: 500
}

.font-semibold {
    font-weight: 600
}

.font-bold {
    font-weight: 700
}

.uppercase {
    text-transform: uppercase
}

.capitalize {
    text-transform: capitalize
}

.italic {
    font-style: italic
}
.transform {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-rotate: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))
}
.sec_groupmain{
    width: 1600px;
    height: 100vh;
    border-width: 1px;
    margin: auto;
    overflow-x: hidden;
    height: auto;
}
.top_icon {
    padding: 10px;
    color: white;
    z-index: 9999;
    font-weight: bold;
    font-size: 20px;
    display: none;
}
.side_top {
    width: 55px;
    height: 55px;
    border-radius: 40px;
    background: linear-gradient(360deg, #481212 0%, #730808 100%);
}
.side_top svg {
    width: 24px;
    height: 30px;
    margin: auto;
    stroke: #FFFFFF;

}
.sec_main_konten {
    height: max-content;
    min-height: 100vh;
    background: rgba(var(--rgba-red));
    padding-top: 97px;
    /* transition: opacity 0.5s ease; */
    /* transition: all 1s linear; */
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-50px);
    transition: all 0.8s ease-out;
  }
  
  .fade-in-down.show {
    opacity: 1;
    transform: translateY(0);
  }
  .menu_website {
    width: 80%;
    padding: 0px 8px;
  }

  :root {
    --duration: 30s;
    --min-width: max-content;
}

.container-website {
    /* display: flex;
    flex-direction: row;
    white-space: nowrap;
    min-width: var(--min-width);
    animation: scroll var(--duration) linear infinite; */
    transition: transform 0.4s ease;
}

.sub-section_info {
    background: transparent !important;
    animation: scrollInfo 40s linear infinite ;
}

@keyframes scrollInfo {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-220%);
    }
  }
@keyframes scroll {
    50% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

.sec_top_navbar {
    width: 1600px;
    margin: auto;
    position: absolute;
    z-index: 50;
}

.my-background {
    background: linear-gradient(0deg, #0D0D0D 0%, #410000 100%);
}

.empty-grid {
    display: block;
    text-align: center;
    padding: 40px;
}

.background-redmore {
    background: linear-gradient(180deg, #430000 0%, #430000 100%);
}

.sub_pasweb {
    width: 100%;
    height: 100%;
    min-height: 540px;
    border-radius: 6px;
    /* border: 3px solid; */
}
.sub_pasweb img{
    width: 100%;
    height: 624.71px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.logo_section{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 70px;
}

@keyframes borderAnimation {
    to {
        background-position: 200% center;
    }
}

.background-syair {
    background: linear-gradient(0deg, #7C0404 0%, #4C0303 100%);
    /* height: 100vh; */
}
/* .border-animation {
            border: 4px solid transparent;
            background: 
                linear-gradient(0deg, #7C0404 0%, #4C0303 100%) padding-box,
                linear-gradient(90deg, 
                #f6caca,
                #ffd8a8,
                #fff3b0,
                #c8e6c9,
                #b2ebf2,
                #bbdefb,
                #e1bee7,
                #f6caca
            ) border-box;
            
            background-origin: border-box;
            background-clip: padding-box, border-box;
        
            animation: borderAnimation 4s linear infinite;
            background-size: 200% auto;
} */
/* background: linear-gradient(90deg, #FF7979, #C43030, #FF7979); */
.sub_consyair {
    width: 100%;
    border-bottom-width: 3px;
    border-radius: 8px;
    border-bottom: 3px solid #850505;
    background: #6d0000;

}
    .img_wrapper {
        position: relative;
        display: inline-block;
        width: 100%;
        height: 74px;
        overflow: hidden;
    }
  
  
    .img_wrapper img.logo_img {
        width: 100%;
        height: 100%;
        display: block;
        border: 3px solid transparent;
      }
  
  .img_wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    box-sizing: border-box;
    border: 2px solid transparent;
    animation: borderTrail 1s cubic-bezier(0.25, 0.1, 1, 0.66) infinite;
  }
  @keyframes borderTrail {
    0% {
        border-color: transparent;
      border-bottom-color: #FF0000;
      transform: scaleX(0);
      transform-origin: left bottom;

    }
  
    25% {
        border-color: transparent;
      border-bottom-color: #FF0000;
      transform: scaleX(1);
      transform-origin: left bottom;
    }
  
    26% {
        border-color: transparent;
      border-right-color: #FF0000;
      transform: scaleY(0);
      transform-origin: right bottom;

    }
  
    50% {
        border-color: transparent;
      border-right-color: #FF0000;
      transform: scaleY(1);
      transform-origin: right bottom;

    }
  
    51% {
        border-color: transparent;
      border-top-color: #FF0000;
      transform: scaleX(0);
      transform-origin: right top;

    }
  
    75% {
        border-color: transparent;
      border-top-color: #FF0000;
      transform: scaleX(1);
      transform-origin: right top;

    }
  
    76% {
        border-color: transparent;
      border-left-color: #FF0000;
      transform: scaleY(0);
      transform-origin: left top;

    }
  
    100% {
        border-color: transparent; 
      border-left-color: #FF0000;
      transform: scaleY(1);
      transform-origin: left top;

    }
  }
  
  
.sub_consyair img{
    width: 100%;
    height: 180px;
}
.section_info {
    width: 100%;
    border-radius: 6px;
    border-width: 1px;
    border: 1px solid #850505;
    Height: 50px;
}
.section_info div:first-child {
    background: linear-gradient(90deg, #3D0101 0%, #6D0505 100%);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.section_info div:nth-child(2) {
    background: linear-gradient(90deg, #6C0606 0%, #7D0000 50%, #621212 100%);
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;

}
.section_info svg {
    width: 24px;
    height: 24px;
}
.judul_syair {
    width: 100%;
    border-radius: 6px;
    border-width: 1px;
    background: #4B0000;
    border: 1px solid #850505;
    min-Height: 65px;
    padding: 0px 20px;
}
.main_container_syair {
    border-radius: 16px;
    border-width: 1px;
    padding: 20px;
    background: #4B0000;
    border: 1px solid #850505;
    min-height: 80vh;
}
.container_syair {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.container_pasweb {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 15px;
    padding-bottom: 15px;
}
.content_body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 20px 250px;
}
.pagination {
    display: flex;
    align-items: center;
    gap: 5px;
}
.pagination a {
    width: fit-content;
}
.pagincenter {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}
.pagincenter a {
    font-size: 15px;
    padding: 12px 23px;
    border-radius: 6px;
    outline: none;
    border: none;
    cursor: pointer;
    font-family: 'myFont1';
    letter-spacing: 1px;
    border: 1px solid transparent;
    text-transform: capitalize;
    transition: all 0.3s ease;
}
.pagincenter a:hover {
    text-decoration: none;
    --tw-bg-opacity: 1;
    background: rgba(var(--rgba-red-high), var(--tw-bg-opacity));
}

.pagination button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
.pagination button {
    display: flex;
    gap: 5px;
    align-items: center;
}
.sec_botton {
    height: 46px;
    border-width: 2px;
    font-family: 'myFont1';
    letter-spacing: 1px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
    cursor: pointer;
    outline: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 15px;
}
.list_form {
    font-size: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;

}
.menu_search{
    width: 100%;
}
.menu_search input{
    border-radius: 6px;
    border-width: 1px;
    background: #4B0000;
    border: 1px solid #850505
}
input {
    width: 100%;
    padding: 15px 10px 15px 20px;
    background: rgba(var(--rgba-white));
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
    transition: all 0.3s ease;
    cursor: pointer;
}
.sec_label {
    padding: 7px;
    border: var(--border-primary);
    text-transform: capitalize;
}
#arrowIcon1 svg{
    margin-top: 6px;
}
.tombol_pasaran {
    font-size: 20px;
    line-height: 100%;
    color: #FFC8C8;
    width: 100%;
    padding: 0px 12px;
    border-radius: 4px;

}
.sub-content_body {
    display: grid;
    grid-template-columns: 3fr 1fr;
    align-items: start;
}
.list_pasaran {
    border-bottom-width: 1px;
    padding: 20px;
    border-bottom: 1px solid #850505
}

.menu_pasaran {
    font-size: 20px;
    line-height: 100%;
    width: 100%;
    padding: 0px 12px;
    height: 35px;
    align-content: center;
}
#menuToggle, #menuClose {
    width: 40px;
    height: 40px;
    border: 2px solid #45060699;
    background: linear-gradient(360deg, #481212 0%, #730808 100%);
    border-radius: 4px;
}
#menuToggle svg,#menuClose svg {
    width: 25px;
    height: 38px;
    stroke: #D9D9D9;
    transition: all 0.3s ease-in-out;
}
.subsec_navbar_menu {
    width: 100%;
    height: 110px;
    border-radius: 16px;
    border-width: 1px;
    background: #4B0000;
    border: 1px solid #850505
}
.dot-bullet {
    width: 10px;
    height: 10px;
    border-radius: 33px;
    border-width: 0.5px;
    background: linear-gradient(180deg, #C40808 0%, #500000 100%);
    border: 0.5px solid #FF000080;
    margin-top: 8px;
}
.subsec_navbar_menu svg {
    width: 30px;
    height: 40px;
    fill: #D9D9D9;
}
.menu_redmore {
    font-weight: bold;
    line-height: 150%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    bottom: 8px;
}
.menu_redmore div {
    width: 250px;
    height: 50px;
}
.menu_redmore h2 {
    font-size: 30px;
}
.menu_redmore span {
    font-size: 16px;
}
.menu_navbar {
    width: 150px;
    height: 93px;
    line-height: 100%;
    font-size: 16px;
}
.menu_navbar_mobile {
    height: max-content;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 18px;
}

.sub_menu_nav {
    width: 200px;
    height: 80px;
    border-radius: 12px;
    border-width: 0.5px;
    background: linear-gradient(180deg, #5C0000 0%, #310101 100%);
    border: 0.5px solid #850505;
    padding: 10px 18px;
}
.sub_menu_nav img{
    width: 100%;
    height: 100%;
}
.scroll-read-more {
    width: 40px;
    height: 40px;
    left: 52%;
    top: 0;
}
.scroll-read-more svg {
    width: 40px;
    height: 40px;
    padding: 5px;
}
.sub-section_navbar {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.title_main_content {
    padding: 0 35px;
}
.title_main {
    font-weight: bold;
    line-height: 150%;
    line-height: 1.4;
}
.title_main h1 {
    font-size: 100%;
}
.title_main_content h1 {
    font-size: 40px;
    display: inline;
}
.title_tanggal {
    font-weight: 400;
    font-size: 16px;
    line-height: 114.99999999999999%;
    color: #FFFFFF;
}

.navbar_menu {
    border-bottom: 4px solid #6E0F0F
}

.background-title {
    background: linear-gradient(180deg, #C43030 0%, #FF7979 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
.footerimg {
    box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.15), 
    0 0 0 1px rgba(0, 0, 0, 0.1),  
    inset 0 1px 1px rgba(255, 255, 255, 0.2); 
  border-radius: 8px; /* opsional */
}
.footerimg img {
    margin-left: -30px;
    width: 324px;
    height: 100px;
}
.loginpart img {

    width: 200px;
    height: 80px;
}
.scroll-container {
    scroll-behavior: smooth;
}
.scroll-container::-webkit-scrollbar {
    display: none;
}
.scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.sub_logo_section{
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 9999;
}
.menu_navbar::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 3px;
    background: #FF0000;
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: center;
  }
  
  .menu_navbar:hover::after {
    transform: scaleX(1);
  }

#footer {
    display: grid;
    align-items: center;
    grid-template-columns: 330px 1fr minmax(0, 1fr);
    grid-template-rows: 1fr 40px;
    gap: 16px;

}
.footer {
    position: fixed;
    width: 100%;
    height: 235px;
    bottom: 0;
    padding: 10px 20px 10px 60px;
    background: linear-gradient(0deg, #200202 0%, #410000 100%);
    border-top: 4px solid #A60000A1;
}
.footercopy {
    height: 40px;
    grid-column: 1 / span 3;
    font-size: 14px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.4), inset 0 1px rgba(255, 255, 255, 0.1);
}

.footerlist h3 {
    box-shadow: 0 0 1px 1px rgb(0 0 0 / 10%), inset 0 1px rgb(255 255 255 / 5%);
    padding: 5px 0;
    padding-left: 10px;
    font-size: 20px;
    margin: 15px 0 10px 0;
}
.listfootgame {
    display: flex;
    text-align: left;
    font-size: 20px;
    color: #ffffff9f;
    padding-left: 10px;
    line-height: 20px;
    flex-direction: column;
    height: 100px;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 12px;
    column-gap: 35px;
}
.listfootgame a span {
    color: #9f9f9f9f;
    font-size: 13px;
}

.listfootgame span {
    cursor: pointer;
}
.listfootgame .fa-comment-dots {
    margin-right: 5px;
}
.footer span {
    font-size: 15px;
}
.bg-coklat {
    --tw-bg-opacity: 1;
    background: rgba(var(--rgba-coklat), var(--tw-bg-opacity));
}
.bg-red-high {
    --tw-bg-opacity: 1;
    background: rgba(var(--rgba-red-high), var(--tw-bg-opacity));
}
.hover\:bg-red:hover {
    background: linear-gradient(180deg, #C51414 0%, #310101 100%);
}
.hover\:bg-red-high:hover {
    background: #F22323;
}
.hover\:bg-red-gradient:hover {
    background: linear-gradient(180deg, #D02B2B 0%, #6A1616 100%);
}
.selected-bg-red {
    background: linear-gradient(180deg, #C51414 0%, #310101 100%);
}
.hover\:select-bottom {
    position: relative;
}
  
  .hover\:select-bottom::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: #e90505;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
  }
  
  .hover\:select-bottom:hover::after {
    transform: scaleX(1);
  }

.selected {
    background: #890707;
}
.selected-nav {
    background: #590E0E;
}

.bg-red-200 {
    --tw-bg-opacity: 1;
    background: #420A0A;
}
.bg-red {

    --tw-bg-opacity: 1;
    background: rgba(var(--rgba-red), var(--tw-bg-opacity));
}
.bg-black {
    --tw-bg-opacity: 1;
    background: rgba(var(--rgba-black), var(--tw-bg-opacity));
}
.hover\:text-white:hover {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity))
}
.text-white {
    --tw-text-opacity: 1;
    color: rgba(255,255,255,var(--tw-text-opacity))
}
.rotate-0 {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}
.rotate-90 {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}
#tanggalInput,#dropdownToggle4  {
    min-width: 110px;
}

.hidden {
    display: none !important;
}
/* .container_pasweb > * {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    transition: all 1s ease-in-out;
} */
/* .container_pasweb:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  } */
.break-text {
    word-break: break-all;
    overflow-wrap: break-word;
}

.navbar_menu_mobile {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #200000;
    width: 85%;
    display: none;
    flex-direction: column;
    height: 100vh;
    z-index: 999;
    transform: translateX(-100%); 
    transition: transform 0.3s ease;
}

.limit-one-line-1 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.4;
}

.limit-one-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

#dropdownMenu1.show {
    display: flex !important;
}

.judul_pasaran {
    width: 100%;
    padding: 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    background: #970C0C;
    margin: 10px 0;
}

.judul_pasaran h3{
    font-weight: 100;
    font-size: 10px;
    line-height: 114.99999999999999%;
}

.judul_pasaran h2{
    font-weight: 700;
    font-size: 12px;
    line-height: 114.99999999999999%;
}

.judul_pasaran span{
    font-weight: 100;
    font-size: 8px;
    line-height: 114.99999999999999%;
}

.dropdownMenu {
    position: absolute;
    top: 100%; 
    left: 0; 
    width: -webkit-fill-available;
    background: #0D0D0D;
    display: none;
    flex-direction: column;
    text-align: left;
    z-index: 99;
    padding: 10px;
}

#dropdownMenu1,#dropdownMenu4 {
    max-height: 300px; 
    overflow-y: auto;
}

#dropdownMenu1 {
    width: 300px;
}

#dropdownMenu4 {
    width: 100%;
}

.block-md-hidden,
.hidden-md-block {
    display: none;
}

.subsec_navbar_menu  span {
    font-size: 22px;
}

.footer > * {
    overflow: hidden; 
  }

@media screen and (min-width: 771px) {
    .md-hidden {
        display: none;
    }
    .menu_navbar_mobile {
        width: 0%;
    }
    .hidden-md-block {
        display: block;
    }
}

  @media screen and (min-width: 770px) {

    .dropdownMenu-pasaran {
        display: flex !important;
        position: static;
        background-color: transparent;
    }
    header.navbarlogin-fix {
        height: 90px;
        position: fixed;
        top: 0;
        z-index: 50;
        animation: fadeInDown 1s ease;
    }
    header.navbarlogin-fix .top_icon {
        display: flex;
    }
}

@media screen and (max-width: 770px) {

    .navbar_menu_mobile {
        display: none;
    }
    .navbar_menu_mobile.show {
        display: flex;
        flex-direction: column;
        transform: translateX(0); 
    }
    body.menu-open {
        overflow: hidden;
    }
    .sec_groupmain.dimmed {
        opacity: 0.3;
        pointer-events: none;
        transition: opacity 0.3s ease;
    }
    
}

@media screen and (max-width: 1600px) {

    .sec_top_navbar,  .sec_groupmain , header.navbarlogin-fix{
        width: 100% !important;
    }
    /* .title_main_content h1 {
        font-size: 40px !important;
        display: inline;
    } */
    .container_syair {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        gap: 15px;
    }
}

@media screen and (max-width: 1200px) {
    .sub_logo_section {
        width: 50% !important;
    }
    .logo_section  {
        width: 100% !important;
    }
    .title_main_content {
        padding: 0;
    }
    .menu_navbar {
        height: 65px;
        width: 130% !important;
    }
    .sec_main_konten {
        padding-top: 150px;
    }
    .content_body {
        padding: 20px;
    }
    .footer {
        position: unset;
    }
    .navbar_menu {
        height: 150px;
        padding-top: 80px;
    }
    .logo_section {
        top: 30%;
    }
    #footer {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        justify-items: center;
        align-items: start;
        height: auto;
        padding: 10px 20px;
    }
    .listfootgame {
        flex-wrap: nowrap;
        height: max-content;
    }
    .list_pasaran {
        padding: 20px 0;
    }
    .footerimg {
        grid-column: 1 / span 2;
        text-align: center;
    }
    .footerlist {
        grid-column: span 1;
    }
    .title_main_content h1 {
        font-size: 32px;
    }
    .judul_syair, .main_container_syair  > div:first-child > div:nth-child(2), .subsec_navbar_menu  span {
        font-size: 18px;
    }
    .footercopy {
        grid-column: span 2;
        /* padding-bottom: 20px; */
    }
    .footerlist h3 {
        padding-left: 0px !important;
    }
    .scroll-left-pasaranfoot,  .scroll-right-pasaranfoot{
        display: none;
    }
    .section_info  span {
        font-size: 12px;
    }
}

@media screen and (max-width: 912px) {
    .container_syair {
        gap: 10px;
        padding: 15px;
    }
}

@media screen and (max-width: 770px) {

    .sec_main_konten {
        padding-top: 80px;
    }
    .logo_section {
        position: unset;
        transform: unset;
    }
    .sub-content_body {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .navbar_menu {
        height: 80px;
        padding: 10px 20px;
    }
    .menu_links, .sidebar{
        display: none;
    }
    .subsec_navbar_menu {
        background: unset;
        border: 0;
        height: 60px;
    }
    .subsec_navbar_menu > div:first-child {
        display: none;
    }
    .main_container_syair  > div:first-child > div:nth-child(2) {
        font-size: 14px;
    }
    .menu_website {
        padding: 0px;
        width: 100%;
    }
    .container_syair {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        gap: 20px;
    }
    .sub_consyair > div:first-child > div:nth-child(1),
    .sub_consyair > div:first-child > div:nth-child(3) {
        padding: 0;
    }
    .block-md-hidden {
        display: block;
    }
    .sub_menu_nav {
        width: 100px;
        height: 40px;
        border-radius: 6px;
        border: 0;
        border-bottom-width: 4px;
    }
    .container-website {
        gap: 18px;
    }
    .main_container_syair {
        border-radius: 0px;
        border-width: 0px;
        padding: 0px;
        background: unset;
        border: 0px;
    }
    .container_syair {
        padding: 0px;
    }
    .container_pasweb {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
        padding-bottom: 0;
    }
    .sub_pasweb img {
        width: 100%;
        height: 267px;
    }
    .sub_pasweb {
        min-height: 0;
    } 
    .menu_navbar {
        border-radius: 0px;
        height: 43px;
        width: 100%;
        font-size: 18px;
        text-align: left;
        padding: 0px 25px;
        width: 100% !important;
    }
    .menu_navbar::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: #850505;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.5s ease;
      }
      .menu_nav-pasaran {
        text-align: left;
        width: 100% !important;
        padding: 5px;
        font-size: 100%;
        border: var(--border-primary);
    }
    .logo_section_mobile {
        position: unset;
        width: 100% !important;
        transform: unset;
        height: 93px;
    }
    #footer { 
        justify-items: normal;
    }
    .top_icon {
        padding: 0;
        font-size: 15px;
        gap: 5px;
    }
    .side_top {
        width: 40px;
        height: 40px;
    }
    .side_top svg {
        width: 20px;
        height: 20px;
    }
    .readhide {
        display: none;
    }
    #dropdownMenu2.show  {
        display: flex !important;
        flex-direction: column;
    }
    #dropdownMenu3.show  {
        display: flex !important;
        flex-direction: column;
    }
    .dropdownMenu.show  {
        display: flex !important;
    }
    #dropdownToggle2,#dropdownToggle3,#dropdownToggle4 {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }
    #dropdownMenu2, #dropdownMenu3 {
        padding: 0 20px;
        gap: 3px;
    }
    .pagincenter a {
        font-size: 12px;
        padding: 8px 12px;
        border-radius: 50%;
        letter-spacing: 0px;
    }
    .pagination button span, .scroll-right-pasaran, .scroll-left-pasaran {
        display: none;
    }
    .pagination button  {
        padding: 8px 13px;
        border-radius: 50%;
        border: 0px solid transparent;
    }   
    .title_main_content {
        padding-bottom: 20px;
    }
    .title_main_content > div:nth-child(1){
       display: flex;
       align-items: center;
       flex-direction: column;
    }
    .title_main_content div:nth-child(1) > div:first-child > div:nth-child(1) {
        display: none;
    }
    .title_tanggal {
        margin: 8px;
    }
    .title_main_content div:nth-child(2) > div:first-child {
       font-size: 80%;
       margin: 8px;
    }
    .title_main_content  div:nth-child(2) {
        padding: 0px;
        padding-bottom: 5px;
        text-align: center;
    }
    .title_main_content  h1 {
        font-size: 30px !important;
    }
    .footer {
        padding: 10px 10px 10px 20px;
    }
    .footerlist {
        grid-column: 1 / span 2;

    }
    .menu_redmore h2 {
        font-size: 22px;
    }
    .menu_redmore span {
        font-size: 14px;
    }
    .content_body {
        padding: 10px;
    }
}

@media screen and (max-width: 430px) {
    .menu_redmore h2 {
        font-size: 18px;
    }
    .menu_redmore span {
        font-size: 10px;
    }
    .menu_redmore div {
        width: 200px;
        height: 50px;
    }
}
@media screen and (max-width: 376px) {
    .container_pasweb {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
    .menu_redmore div {
        width: 100%;
        min-width: 160px ;
        padding: 12px 30px;
    }
}
@keyframes fadeInDown {
    from {
      opacity: 0;
      -webkit-transform: translate3d(0, -100%, 0);
      transform: translate3d(0, -100%, 0);
    }
  
    to {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }