/* Text */
    .xl\:text-67{
        font-size: 67px;
        font-weight: 700;
        line-height: 140%;   
    }
    .xl\:text-\[67px\]{
        font-size: 67px;
        line-height: 1;
    }
    .xl\:text-52{
        font-size: 52px;   
    }
    .xl\:text-2{
        font-size: 1.5rem;
        line-height: 3rem;
    }
    .xl\:text-3{
        font-size: 48px;
        line-height: 60px;
    }
    .xl\:text-4{
        font-size: 36px;
        line-height: 40px;
    }
    .xl\:text-p{
        font-size: 20px;
        line-height: 32px;
    }
    .xl\:body-small{
        font-size: 16px;
        line-height: 28px;
    }
    .xl\:text-72{
        font-size: 72px;
        line-height: 84px;
    }
    .xl\:text-\[85\]{
        font-size: .85rem;
    }
/* Line Height */
    .line-height-normal{
      line-height: normal;  
    }
    .line-height-78{
        line-height: 78px;
    }
    .line-height-96{
        line-height: 96px;
    }
/* Block Text */
    .block-text{
        padding: 24px 5.5px;
        background-color: #ffffff;
        color: #3880be;
        border-radius: 8px;
    }
    .block-text-green{
        background: linear-gradient(180deg, #9EFF00 6.8%, #53A9BE 91.74%);
        color: #fff;
        border-radius: 26px;
        padding: 1rem .5rem;
        transform: rotate(357deg);
        transform-origin: center bottom;
        display: inline-block;
    }
    .block-text-blue{
        background-color: #fff;
        color: #264079;
        border-radius: 8px;
        padding: 24px;
        display: inline-block;
    }
/* Background */
    .bg-green{
        background-color: #5BBC4C;
    }
/* Hover - Background */
    .hover\:bg-red-dark:hover{
        background-color: #E32A2D;  
    }
/* Color */
    .text-white{
        color: #fff;
    }
    .text-green{
        color: #5BBC4C;
    }
    .text-light-green{
        color: #96DB61; 
    }
    .text-gray{
        color: #6B7280;
    }
    .text-logout{
        color: #EB3243;  
    }
    .text-blue{
        color: #264079;
    }
    .text-red-dark{
        color: #E32A2D;
    }
/* Hover - Text */
    .hover\:text-blue:hover{
        color: #2B3E77;
    }
/* Display */
.xl\:d-inline-block{
    display: inline-block;
}
.xl\:d-table{
    display: table;
}
/* Border */
.ring-red-dark{
  --tw-ring-opacity: 1;
  --tw-ring-color: #E32A2D;
}
/* Absolute */
    /* Top */
    .xl\:-top-1{
        top: -1rem;   
    }
    .xl\:-top-1-5{
        top: -1.5rem;   
    }
    .xl\:-top-2{
        top: -2rem;   
    }
    .xl\:-top-3{
        top: -3rem;   
    }
    .xl\:-top-4{
        top: -4rem;   
    }
    .xl\:-top-5{
        top: -5rem;   
    }
    .xl\:-top-5-5{
        top: -5.5rem;
    }
    .xl\:-top-7{
        top: -7rem;   
    }
    .xl\:-top-10{
        top: -10rem;   
    }
    .xl\:-top-22{
        top: -22rem;   
    }
    .xl\:top-0{
        top: 0;
    }
    .xl\:top-2{
        top: 2rem;
    }
    .xl\:top-3{
        top: 3rem;
    }
    .xl\:top-4{
        top: 4rem;
    }
    .xl\:top-5{
        top: 5rem;
    }
    .xl\:top-9{
        top: 9rem;
    }
    .top-18{
        top: 18rem;   
    }
    .xl\:top-\[50\%\]{
        top: 50%;
    }
    
    /* Right */
    .xl\:-right-1{
      right: -1rem;  
    }
    .xl\:-right-2{
        right: -2rem;
    }
    .-right-3rem{
        right: -3rem;
    }
    .xl\:-right-13-5{
        right: -13.5rem;
    }
    .-right-23rem{
        right: -23rem;
    }
    .xl\:right-0{
        right: 0;
    }
    .xl\:right-8{
        right: 8rem;
    }
    .xl\:right-10{
        right: 10rem;
    }
    .xl\:-right-5{
        right: -5rem;
    }
    .xl\:-right-13{
        right: -13rem;
    }
    .xl\:-right-15{
        right: -15rem;
    }
    .xl\:-right-16{
        right: -16rem;
    }
    .xl\:-right-18{
        right: -18rem;
    }
    .xl\:-right-28-5{
        right: -28.5rem;
    }
    .xl\:-right-32{
        right: -32rem;
    }
    .xl\:right-3{
        right: 3rem;
    }
    .xl\:right-41{
        right: 41rem;
    }
    .xl\:right-48{
        right: 48rem;
    }
    /* Left */
    .xl\:-left-2{
        left: -2rem;
    }
    .xl\:-left-4{
        left: -4rem;
    }
    .xl\:-left-6rem{
        left: -6rem;
    }
    .xl\:-left-8rem{
        left: -8rem;
    }
    .xl\:-left-9{
        left: -9rem;
    }
    .xl\:-left-10{
        left: -10rem;
    }
    .xl\:-left-11{
        left: -11rem;
    }
    .xl\:-left-13{
        left: -13rem;
    }
    .xl\:-left-15{
        left: -15rem;
    }
    .xl\:-left-16{
        left: -16rem;
    }
    .xl\:-left-23{
        left: -23rem;
    }
    .xl\:-left-25{
        left: -25rem;
    }
    .xl\:-left-32{
        left: -32rem;
    }
    .xl\:left-0{
        left: 0;
    }
    .xl\:left-5{
        left: 5rem;
    }
    .xl\:left-9{
        left: 9rem;
    }
    .xl\:left-11{
        left: 11rem;
    }
    .xl\:left-41{
        left: 41rem;
    }
    .xl\:left-48{
        left: 48rem;
    }
    /* Bottom */
    .xl\:-bottom-2{
        bottom: -2rem;
    }
    .xl\:-bottom-3{
        bottom: -3rem; 
    }
    .xl\:-bottom-4{
        bottom: -4rem; 
    }
    .-bottom-5{
        bottom: -5rem;
    }
    .xl\:-bottom-5{
        bottom: -5rem;
    }
    .xl\:-bottom-6{
        bottom: -6rem;
    }
    .xl\:-bottom-7{
        bottom: -7rem;
    }
    .-bottom-16{
         bottom: -4rem;   
    }
    .-bottom-15{
        bottom: -15rem;   
    }
    .-bottom-16rem{
        bottom: -16rem;   
    }
    .xl\:-bottom-9{
        bottom: -9rem; 
    }
    .xl\:-bottom-15{
        bottom: -15rem;   
    }
    .xl\:-bottom-16{
        bottom: -16rem;   
    }
    .xl\:-bottom-18{
        bottom: -18rem;
    }
    .xl\:-bottom-19{
        bottom: -19rem;
    }
    .xl\:-bottom-\[20rem\]{
        bottom: -20rem;
    }
    .xl\:-bottom-30{
        bottom: -30rem;
    }
    .xl\:-bottom-30\.5{
        bottom: -30.5rem;
    }
    .xl\:bottom-0{
        bottom: 0rem;   
    }
    .xl\:bottom-2{
        bottom: 2rem;
    }
    .bottom-5{
        bottom: 5rem;
    }
    .xl\:bottom-5{
        bottom: 5rem;   
    }
    .xl\:bottom-6{
        bottom: 6rem;
    }
    .xl\:bottom-\[47\%\]{
        bottom: 47%;
    }

/* z-index */
.-z-1{
    z-index: -1;
}
.xl\:-z-1{
    z-index: -1;
}
.xl\:z-0{
    z-index: 0;
}
.xl\:z-1{
    z-index: 1;
}
.z-1{
    z-index: 1;
}
.z-2{
    z-index: 2;
}

/* Align */
.items-center{
    align-content: center;   
}

/* Gap */
.gap-0-5{
    gap: .5rem;
}
.gap-0\.5{
    gap: .5rem;
}
.gap-2{
    gap: 2rem;
}
.gap-4px{
    gap:4px;
}
.gap-17{
    gap:4.5rem;
}
.gap-\[76px\]{
    gap: 7.6px;
}
.xl\:gap-0-5{
    gap: 0.5rem;   
}
.xl\:gap-1-5{
    gap: 1.5rem;   
}
.xl\:gap-3{
    gap: 3rem;   
}
.xl\:gap\[35px\]{
    gap: 35px;
}
.xl\:gap\[40px\]{
    gap: 40px;
}

/* Margin */
    /* Top */
    .-mt-5{
        margin-top: -5rem;
    }
    .xl\:mt-0\.5{
        margin-top: .5rem;
    }
    .xl\:mt-1{
        margin-top: 1rem;
    }
    .xl\:mt-1\.5{
        margin-top: 1.5rem;
    }
    .xl\:mt-2{
        margin-top: 2rem;
    }
    .xl\:mt-3{
        margin-top: 3rem;
    }
    .xl\:mt-5{
        margin-top: 5rem;
    }
    .xl\:mt-6{
        margin-top: 6rem;
    }
    .mt-6{
        margin-top: 6rem;
    }
    .xl\:mt-10{
        margin-top: 10rem; 
    }
    .xl\:mt\[35px\]{
        margin-top: 35px;
    }
    /* Bottom */
    .-mb-5{
        margin-bottom: -5rem;
    }
    .xl\:mb-0\.5{
        margin-bottom: 0.5rem;
    }
    .xl\:mb-1{
        margin-bottom: 1rem;   
    }
    .mb-3{
        margin-bottom: 3rem;
    }
    .xl\:mb-1-5{
        margin-bottom: 1.5rem;
    }
    .xl\:mb-1\.5{
        margin-bottom: 1.5rem;
    }
    .xl\:mb-2\.5{
        margin-bottom: 2.5rem;
    }
    .xl\:mb-3{
        margin-bottom: 3rem;
    }
    .xl\:mb-4{
        margin-bottom: 4rem;
    }
    .xl\:mb-5{
        margin-bottom: 5rem;
    }
    .xl\:mb-6{
        margin-bottom: 6rem;
    }
    .xl\:mb-16{
        margin-bottom: 16rem;
    }
    .xl\:mb\[8px\]{
        margin-bottom: 8px;
    }
    .xl\:mb\[12px\]{
        margin-bottom: 12px;
    }
    .xl\:mb\[48px\]{
        margin-bottom: 48px;
    }
    /* Right */
    .xl\:mr-auto{
        margin-right: auto;
    }
    .-mr-5{
        margin-right: -5rem;
    }
    /* Left */
    .xl\:ml-auto{
        margin-left: auto;
    }
    .-ml-5{
        margin-left: -5rem;
    }
    .xl\:ml-3{
        margin-left: 3rem;   
    }
    /* Y */
    .xl\:my-1\.5{
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    /* X */
    .xl\:mx-auto{
        margin-right: auto;
        margin-left: auto;
    }
/* Padding */
.xl\:p-1-5{
    padding: 1.5rem;   
}
.xl\:p-3{
    padding: 3rem;   
}
.xl\:py-256{
    padding-top: 256px;
    padding-bottom: 256px;
}
.xl\:py\[24px\]px\[48px\]{
    padding: 24px 48px;
}
    /* Padding - Top */
    .xl\:pt\[24px\]{
        padding-top: 24px;
    }
    .xl\:pt-6{
        padding-top: 6rem;   
    }
    .xl\:pt-7{
        padding-top: 7rem;   
    }
    .xl\:pt-10{
        padding-top: 10rem;   
    }
    .xl\:pt-12{
        padding-top: 12rem;   
    }
    .xl\:pt-13{
        padding-top: 13rem;   
    }
    .xl\:pt-25{
        padding-top: 25rem;
    }
    /* Padding - Bottom */
    .xl\:pb\[24px\]{
        padding-bottom: 24px;
    }
    .xl\:pb-1{
        padding-bottom: 1rem;
    }
    .xl\:pb-3{
        padding-bottom: 3rem;
    }
    .xl\:pb-6{
        padding-bottom: 6rem;
    }
    .xl\:pb-10{
        padding-bottom: 10rem;
    }
    .xl\:pb-20{
        padding-bottom: 20rem;
    }
    /* Padding - Left */
    .xl\:pl\[49px\]{
        padding-left: 49px;
    }
    /* Padding - Y */
    .xl\:py-1\.5{
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
    .xl\:py-2{
        padding-top: 2rem;
        padding-bottom: 2rem;
    }
    .xl\:py-3{
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
    .xl\:py-\[5px\]{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    /* Padding - X */
    .xl\:px-1\.5{
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    .xl\:px-2{
        padding-left: 2rem;
        padding-right: 2rem;
    }
    .xl\:px-2\.3{
        padding-left: 2.3rem;
        padding-right: 2.3rem;
    }
    .xl\:px-3{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    .xl\:px-3\.5{
        padding-left: 3.5rem;
        padding-right: 3.5rem;
    }
    .xl\:px-3\.75{
        padding-left: 3.75rem;
        padding-right: 3.75rem;
    }
    .xl\:px-4\.3{
        padding-left: 4.3rem;
        padding-right: 4.3rem;
    }
    .xl\:px-\[10px\]{
        padding-left: 10px;
        padding-right: 10px;
    }
/* Height */
.h-32{
    height: 32px;
}
.xl\:h-\[24px\]{
    height: 24px;
}
.xl\:h-\[272px\]{
    height: 272px;
}
.xl\:h-\[289px\]{
    height: 289px;
}
.h-\[320px\]{
    height: 320px;
}
.xl\:h-auto{
    height: auto;
}
.xl\:h-\[12px\]{
    height: 12px;
}
.xl\:h-\[515px\]{
    height: 515px;
}
.xl\:h-\[562px\]{
    height: 562px;
}
    /* Min - Height*/
    .xl\:min-h-\[694px\]{
        min-height: 694px;
    }
    .xl\:min-h-\[726px\]{
        min-height: 726px;
    }
    .xl\:min-h-\[805px\]{
        min-height: 805px;
    }
    .min-h-\[950px\]{
        min-height: 950px; 
    }
    .xl\:min-h-70{
        min-height: 70rem;
    }
    .xl\:min-h-100{
        min-height: 100rem;
    }
    /* Max - Hieght */
    .xl\:max-h-\[146px\]{
        max-height: 146px;
    }
    .xl\:max-h-\[150px\]{
        max-height: 150px;
    }
    .xl\:max-h\[315px\]{
        max-height: 315px;
    }
    .xl\:max-h\[426px\]{
        max-height: 426px;
    }

/* Width */
.width-normal{
    width: -webkit-fill-available;    
}
.xl\:w-\[12px\]{
    width: 12px;  
}
.xl\:w-\[555px\]{
    width: 555px;  
}
.w-32{
    width: 32px;  
}
.w-1\/3{
   width: 30%; 
}
.w-2\/3{
   width: 70%;
}
.w-100{
   width: 100%; 
}
.xl\:w-100{
   width: 100%; 
}
.w-\[153px\]{
    width: 153px;
}
.w-\[207px\]{
    width: 207px;
}
.w-\[227px\]{
    width: 227px;
}
.w-\[264px\]{
    width: 264px;
}
.w-\[270px\]{
    width: 270px;   
}
.w-\[338px\]{
    width: 338px;
}
.w-\[552px\]{
    width: 552px;
}
.w-\[523px\]{
    width: 523px;
}
.w-\[836px\]{
    width: 836px;
}
.w-\[61\%\]{
    width: 61%;
}
.w-103-5{
    width: 103.5%;
}
    /* Max Width */
    .xl\:max-w-fit{
        max-width: fit-content;  
    }
    .xl\:max-w\[9px\]{
        max-width: 9px;
    }
    .xl\:max-w\[20px\]{
        max-width: 20px;
    }
    .xl\:max-w\[21px\]{
        max-width: 21px;
    }
    .xl\:max-w\[23px\]{
        max-width: 23px;
    }
    .xl\:max-w-\[54px\]{
        max-width: 54px;
    }
    .xl\:max-w-\[66px\]{
        max-width: 66px;
    }
    .xl\:max-w\[96px\]{
        max-width: 96px;
    }
    .xl\:max-w-\[110px\]{
        max-width: 110px;
    }
    .xl\:max-w-\[114px\]{
        max-width: 114px;
    }
    .xl\:max-w\[122px\]{
        max-width: 122px;
    }
    .xl\:max-w\[130px\]{
        max-width: 130px;
    }
    .xl\:max-w-\[145px\]{
        max-width: 145px;
    }
    .xl\:max-w\[150px\]{
        max-width: 150px;
    }
    .xl\:max-w-\[156px\]{
        max-width: 156px;
    }
    .xl\:max-w\[173px\]{
        max-width: 173px;
    }
    .xl\:max-w\[200px\]{
        max-width: 200px;
    }
    .xl\:max-w\[225px\]{
        max-width: 225px;
    }
    .xl\:max-w\[216px\]{
        max-width: 216px;
    }
    .xl\:max-w-\[235px\]{
        max-width: 235px;
    }
    .xl\:max-w\[239px\]{
        max-width: 225px;
    }
    .xl\:max-w\[250px\]{
        max-width: 250px;
    }
    .xl\:max-w\[255px\]{
        max-width: 255px;
    }
    .xl\:max-w\[260px\]{
        max-width: 260px;
    }
    .xl\:max-w\[272px\]{
        max-width: 272px;
    }
    .xl\:max-w\[380px\]{
        max-width: 380px;
    }
    .xl\:max-w-\[425px\]{
        max-width: 425px;
    }
    .xl\:max-w\[604px\]{
        max-width: 604px;
    }
    .xl\:max-w-\[684px\]{
        max-width: 684px;
    }
    .xl\:max-w-\[1200px\]{
        max-width: 1200px;
    }
    .xl\:max-w\[445px\]{
        max-width: 445px;
    }
    .xl\:max-w-\[552px\]{
        max-width: 552px;
    }
    .xl\:max-w-\[543px\]{
        max-width: 543px;
    }
    .xl\:max-w\[544px\]{
        max-width: 544px;
    }
    .xl\:max-\[570px\]{
        max-width: 570px;
    }
    .xl\:max-w\[628px\]{
        max-width: 628px;
    }
    .xl\:max-w-\[772px\]{
        max-width: 772px;
    }
    .xl\:max-w\[790px\]{
        max-width: 790px;
    }
    .xl\:max-w\[1009px\]{
        max-width: 1009px;
    }
    .xl\:max-w-\[1076px\]{
        max-width: 1076px;
    }
    .xl\:max-w-\[1200px\]{
        max-width: 1200px;
    }
    .xl\:max-w-\[1201px\]{
        max-width: 1201px;
    }
    .xl\:max-w-13{
        max-width: 13rem;
    }
    .xl\:max-w-30{
        max-width: 30rem;
    }
    .xl\:max-w-54{
        max-width: 54rem;
    }
    .xl\:max-w-75{
        max-width: 75rem;
    }
    .xl\:max-\[82rem\]{
        max-width: 82rem;
    }
    /* Min Width */
    .xl\:min-w\[153px\]{
        min-width: 153px;
    }
    .xl\:min-w\[345px\]{
        min-width: 345px;
    }
    .xl\:min-w-\[368px\]{
        min-width: 368px;
    }
    .xl\:min-w\[544px\]{
        min-width: 544px;
    }
    
/* Background - Image */
.bg-cloud{
    background-image: url('../img/cloud-background.webp');
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
}

/* Background - Gradient */
.gradient-text{
    background: linear-gradient(210.76deg, #97DF20 12.35%, #53A9BE 79.29%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-from-\[\#86E43E\]-to-\[\#44AAC1\]{
    background: linear-gradient(180.91deg, #86E43E 25%, #44AAC1 75%);
}
.gradient-from-\[\#86E43E\]-to-\[\#44AAC1\]-2{
    background: linear-gradient(184.76deg, #86E43E -67.17%, #44AAC1 97.27%);
}
.gradient-from-\[\#46ADC1\]-to-\[\#2775B8\]{
    background: linear-gradient(180deg, #46ADC1 75%, #2775B8 100%);
}
.gradient-from-\[\#2775B8\]-to-\[\#46ADC1\]{
    background: linear-gradient(180deg, #2775B8 10%, #46ADC1 100%);
}
.gradient-from-\[\#2775B8\]-to-\[\#C7EBFF\]{
    background: linear-gradient(180deg, #2775B8 25.63%, #C7EBFF 100%);
}
.gradient-from-\[\#2775B8\]-to-\[\#C7EBFF\]-2{
    background: linear-gradient(180deg, #2775B8 35.36%, #C7EBFF 100%);
}
.gradient-from-\[\#9EFF00\]-to-\[\#53A9BE\]{
    background: linear-gradient(170.7deg, #9EFF00 -85.03%, #53A9BE 89.03%);
}

.gradient-border::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 1rem; /* sama dengan elemen utama */
  padding: 3px; /* tebal border */
  background: linear-gradient(210.85deg, #9EFF00 6.8%, #53A9BE 91.74%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: 1;
}

/* Border */
.xl\:border-\[1px\]{
    border: 1px solid;
}
.border-t-2{
 border-top-width: 2px;
}
.border-b-3{
  border-bottom-width: 3px;
}
.border-s-4{
  border-inline-start-width: 4px;
}

.border-\[\#EFEFEF\]{
  --tw-border-opacity: 1;
  border-color: #EFEFEF;
}
.border-\[\#00A919\]{
  --tw-border-opacity: 1;
  border-color: #00A919;
}
.border-\[\#0808081A\]{
  --tw-border-opacity: 1;
  border-color: #0808081A;
}

/* Inset */
.-start-4\.2 {
    inset-inline-start: -4.2rem;
}

/* Radius */
.xl\:rounded-0\.5{
    border-radius: .5rem;
}
.xl\:rounded-05{
    border-radius: .5rem;
}
.rounded-tg-1-2{
    border-top-left-radius: 1.2rem;
    border-top-right-radius: 1.2rem;
}
.xl\:rounded\[24px\]{
    border-radius: 24px;
}
.xl\:rounded-1\.5{
    border-radius: 1.5rem;
}
.xl\:rounded-tr-3xl{
  border-top-right-radius: 1.5rem
}
.xl\:rounded-br-3xl{
  border-bottom-right-radius: 1.5rem
}
.xl\:rounded-tl-3xl{
  border-top-left-radius: 1.5rem
}
.xl\:rounded-bl-3xl{
  border-bottom-left-radius: 1.5rem
}

/* Color */
.green-300{
    color: #A5D971;
}
.gray-700{
    color: #A1A1A1;
}

/* Shadow */
.shadow-primary{
    box-shadow: 0px 4px 200px 0px #5BBC4C66, inset 0px 0px 14px 0px #BBCCFFB2;
}

/* Text */
.text-20{
    font-size: 20px;
}

/* Button */
.btn-primary{
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    border-radius: 48px;
    padding: 18px 24px;
    background-color: #264079;
    color: #fff;
}
.btn-grey{
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    border-radius: 48px;
    padding: 18px 24px;
    background-color: #A1A1A1;
    color: #fff;
}
.btn-green{
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    border-radius: 48px;
    padding: 18px 24px;
    background-color: #5BBC4C;
    color: #fff;
}
.btn-light{
    font-weight: 600;
    font-size: 18px;
    line-height: 18px;
    border-radius: 48px;
    padding: 18px 24px;
    background-color: #fff;
    color: #264079;
}
.btn-green-inline{
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
    border-radius: 48px;
    border: 2px solid #5BBC4C;
    padding: 16px 22px;
    background-color: transparent;
    color: #5BBC4C;
}
.btn-green-inline:hover{
    background-color: #5BBC4C;
    color: #fff;
}

/* Background */
.bg-mountain{
    display: block;
    width: 100%;
    height: 228px;
    background-image: url(../img/bg-mountain-revamp.webp);
    background-repeat: round;
    position: absolute;
}
/* Background */
    .xl\:bg-size-cover{
        background-size: cover;
    }

/* Background Color */
.bg-green\[\#5BBC4C\]{
    background-color: #5BBC4C;
}

/* Image - Object Fit*/
.xl\:object-inherit{
    object-fit: inherit;
}
.xl\:object-cover{
    object-fit: cover;
}

/* Test Pribadi */
.test-item .test-item-content {
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
    padding: 6rem 3rem;
}

/* Test Pribadi - Footer */
.test-pribadi-flip{
    height: 140px;
    border-bottom-left-radius: 1.5rem;
    background-image: url(../img/bg-test-pribadi-footer.webp);
    background-repeat: repeat-x;
    background-size: cover;
}

/* Ellipsis */
.one-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1; /* Specifies the maximum number of lines to display */
  -webkit-box-orient: vertical;
}
.two-line-ellipsis {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Specifies the maximum number of lines to display */
  -webkit-box-orient: vertical;
}

/* Header */
#header a#dropdownHoverButton::after{
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.43 8.512a.75.75 0 0 1 1.058-.081L12 14.012l6.512-5.581a.75.75 0 0 1 .976 1.138l-7 6a.75.75 0 0 1-.976 0l-7-6a.75.75 0 0 1-.081-1.057' clip-rule='evenodd'/%3E%3C/svg%3E");
    font-size: 1.25rem;
}
#header #dropdownHoverButton2::after{
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='black' fill-rule='evenodd' d='M4.43 8.512a.75.75 0 0 1 1.058-.081L12 14.012l6.512-5.581a.75.75 0 0 1 .976 1.138l-7 6a.75.75 0 0 1-.976 0l-7-6a.75.75 0 0 1-.081-1.057' clip-rule='evenodd'/%3E%3C/svg%3E");
    font-size: 1rem;
}

/* Challenge - Tab */
.tab_challenge{
    border-bottom: 3px solid #FFFFFF;
    background: #FFFFFF;
    padding: 24px;
    border-radius: 48px;
    width: 649px;
    max-height: 92px;
}
.tab_challenge button{
    min-width: 179px;
    max-height: 44px;
    padding: 8px 16px;
    border-radius: 24px;
}
.tab_challenge-item{
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    color: #264079;
}
.tab_challenge-item.active{
    color: #fff;
    background: #5BBC4C;
}
.list_challenge{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  /*transition: opacity 0.4s ease;*/
}
.list_challenge.active{
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* Tab - Profile */
.tab_profile-item{
    display: flex;
    justify-content: center;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: 0%;
    padding: .5rem 5rem;
}
.tab_profile-item.active{
    color: #fff;
    background: #5BBC4C;
}
.list_profile{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  /*transition: opacity 0.4s ease;*/
}
.list_profile.active{
  opacity: 1;
  visibility: visible;
  position: relative;
}

/* Brightness */
.brightness-0-7{
    filter: brightness(0.7);
}

/* About */
.timeline_section{
    /*overflow-y: scroll;*/
    /*scroll-timeline-name: --timeline;*/
    /*scroll-timeline-axis: block;*/
    /*height: 100vh;*/
}
.timeline_section:after{
    content: "";
    width: 4px;
    height: 100%;
    border-radius: 4px;
    background: #FFFFFF;
    position: absolute;
    top: 15%;
    left: 0;
    z-index: 1;
}
.timeline_dot{
    position: absolute;
    left: -2rem;
    top: 45%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    border: 10px solid #2775b8;
    box-shadow: 0 2px 8px rgba(79, 140, 255, 0.14);
    z-index: 3;
    transition: border 0.3s;
}
.timeline-mask {
    position: absolute;
    left: -1rem;
    top: 55%;
    width: 4px;
    height: 0;
    background-color: #96DB61;
    border-radius: 4px;
    z-index: 2;
    animation: grow linear forwards;
    animation-timeline: --timeline;
}

@keyframes grow {
  to {
    height: calc(100% - 40px);
  }
}

.card_pilar{
    max-width: 270px;
    min-height: 326px;
    background-color: #fff;
    border-radius: 24px;
    padding: 27px 12px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pin{
    width: 29px;
    position: absolute;
    top: -1rem;
    left: 0;
    right: 0;
    margin-inline: auto;
}

/* Profile - Historical Point*/
.historical_points:before{
    content: '';
    height: 4rem;
    width: .5rem;
    background-color: #fff;
    position: absolute;
    z-index: 1;
    display: block;
    left: -0.3rem;
}

/* Article Index - Pagination */
.article_pagination-container .ia-pagination ul li{
    display: flex;
    background-color: #FFFFFF;
    color: #5BBC4C;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 64px;
    height: 64px;
    border-radius: .5rem;
    transition: .4s;
}
.article_pagination-container .ia-pagination ul li a{
    color: #5BBC4C;
}
.article_pagination-container .ia-pagination ul li.active a{
    color: #FFFFFF;
}
.article_pagination-container .ia-pagination ul li.active{
    background-color: #5BBC4C;
    color: #FFFFFF;
}

/* Responsive Breakpoints*/
/* Dekstop - 1024px */
    @media (max-width: 1024px){
        /* Display */
        .lg\:block{
            display: block;
        }
        
        /* Padding */
        .lg\:px-3{
          padding-left: 2.5rem;
          padding-right: 2.5rem;
        }
        
        /* Planet */
        .planet-container, .planet-container .day, .planet-container .night, .planet-container .clouds, .planet-container .inner-shadow{
            width: 450px;
            height: 450px;
        }
    }
/* Desktop - 960px */
    @media (max-width: 960px){
        /* Text */
        .md\:text-2xl{
            font-size: 72px;
            line-height: 100%;
        }
        .md\:text-48{
            font-size: 48px;
        }
        .md\:text-48-60{
            font-size: 48px;
            line-height: 60px;
        }
        .md\:text-36{
            font-size: 36px;
            line-height: 48px;
        }
        .md\:text-24{
            font-size: 24px;
            line-height: 40px;
        }
        .md\:text-20{
            font-size: 20px;
            line-height: 24px;
        }
        .md\:text-18{
            font-size: 18px;
            line-height: 30px;
        }
        .md\:text-2-5xl{
            font-size: 2.5rem;
        }
        .md\:text\[62px\]{
            font-size: 62px;
            line-height: 74px;
        }
        .md\:text-3xl{
            font-size: 60px;
            line-height: 100%;
        }
        
        /* Line Height */
        .md\:line-height-6{
            line-height: 6rem;
        }
        .md\:line-height\[100px\]{
            line-height: 100px;
        }
        
        /* Align */
        .md\:text-center{
          text-align: center;  
        }
        
        /* Display */
        .md\:block{
            display: block;
        }
        .md\:d-webkit{
            display: -webkit-box;
        }
        .md\:hidden{
            display: none;
        }
        .md\:d-table{
            display: table;
        }
        
        /* Z- Index */
        .md\:z-0{
            z-index: 0;
        }
        .md\:z-1{
            z-index: 1;
        }
        .md\:z-2{
            z-index: 2;
        }
        
        /* Flex */
        .md-9\:flex{
          display: flex;
        }
        .md\:flex-rows{
            flex-direction: row;
        }
        .md\:flex-column{
            flex-direction: column;
        }
        .md\:items-center{
            align-items: center;
        }
        .md\:justify-start{
            justify-content: start;
        }
        .md\:justify-center{
            justify-content: center;
        }
        .md\:justify-between{
            justify-content: space-between;
        }
        .md\:items-center{
            align-items: center;
        }
        .md\:items-anchor-center{
            align-items: anchor-center;
        }
        .md\:flex-wrap{
          flex-wrap: wrap;
        }
        
        /* Grid */
        .md\:9-grid{
            display: grid;
        }
        .md\:9-grid-cols-2{
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .md\:col-span-2{
            grid-column: span 2 / span 2;  
        }
        
        /* Gap */
        .md\:gap-1{
            gap: 1rem;
        }
        .md\:gap-1\.5{
            gap: 1.5rem;
        }
        .md\:gap-2{
            gap: 2rem;
        }
        .md\:gap-3{
            gap: 3rem;
        }
        .md\:gap-12{
            gap: 8rem;
        }
        .md\:gap-16{
            gap: 16rem;  
        }
        .md\:gap-24{
          gap: 6rem;
        }
        
        /* Order */
        .md\:order-0{
            order: 0;
        }
        .md\:order-1{
            order: 1
        }
        
        /* Overflow */
        .md\:overflow-scroll{
            overflow-x: scroll;   
        }
        
        /* Width */
        .md\:w-\[121px\]{
            width: 121px;
        }
        .md\:w-\[124px\]{
            width: 124px;
        }
        .md\:w-\[175px\]{
            width: 175px;
        }
        .md\:w-\[256px\]{
            width: 256px;
        }
        .md\:w-\[379px\]{
            width: 379px;
        }
        .md\:w-\[600px\]{
            width: 600px;
        }
        .md\:w-\[628px\]{
            width: 628px;
        }
        .md\:w-\[569px\]{
            width: 569px;
        }
        .md\:w-\[754px\]{
            width: 754px;
        }
        .md\:w-\[800px\]{
            width: 800px;
        }
        .md\:w-100{
            width: 100%;
        }
        .md\:w-webkit{
            width: -webkit-fill-available;
        }
        .md\:w-content{
            width: max-content;
        }
        /* Max - Width */
        .md\:max-w-\[90\%\]{
            max-width: 90%;
        }
        .md\:max-w-\[66px\]{
            max-width: 66px;
        }
        .md\:max-w\[100px\]{
            max-width: 100px;
        }
        .md\:max-w\[115px\]{
            max-width: 115px;
        }
        .md\:max-w\[130px\]{
            max-width: 130px;
        }
        .md\:max-w-\[143px\]{
            max-width: 143px;
        }
        .md\:max-w\[148px\]{
            max-width: 148px;
        }
        .md\:max-w\[186px\]{
            max-width: 186px;
        }
        .md\:max-w\[192px\]{
            max-width: 192px;
        }
        .md\:max-w\[200px\]{
            max-width: 200px;
        }
        .md\:max-w\[218px\]{
            max-width: 218px;
        }
        .md\:max-w\[264px\]{
            max-width: 264px;
        }
        .md\:max-w\[305px\]{
            max-width: 305px;
        }
        .md\:max-w\[677px\]{
            max-width: 677px;
        }
        .md\:max-w\[683px\]{
            max-width: 683px;
        }
        .md\:max-w\[754px\]{
            max-width: 754px;
        }
        .md\:max-w\[763px\]{
            max-width: 763px;
        }
        .md\:max-w-\[790px\]{
            max-width: 790px;
        }
        .md\:max-w-5{
            max-width: 5rem;
        }
        .md\:max-w-8{
            max-width: 8rem;
        }
        .md\:max-w-7{
            max-width: 7rem;
        }
        .md\:max-w-10{
            max-width: 10rem;
        }
        .md\:max-w-12{
            max-width: 14rem;
        }
        .md\:max-w-20{
            max-width: 20rem;
        }
        .md\:max-w-28{
            max-width: 28rem;
        }
        .md\:max-w-34{
            max-width: 34rem;
        }
        .md\:max-w-60{
            max-width: 80%;
        }
        .md\:max-w-100{
            max-width: 100%;
        }
        .md\:max-w-4xl{
            max-width: 40rem;
        }
        .md\:max-w-webkit{
            max-width: -webkit-fill-available;
        }
        /* Min - Width */
        .md\:min-w-\[320px\]{
            min-width: 320px;
        }
        .md\:min-w-auto{
            min-width: auto;
        }
        
        /* Height */
        /* Min - Hieght */
        .md\:min-h-3{
            min-height: 3rem;
        }
        .md\:min-h-40{
            min-height: 40rem;
        }
        .md\:min-h-\[694px\]{
            min-height: 694px;   
        }
        .md\:min-h\[754px\]{
            min-height: 754px;   
        }
        .md\:min-h-\[872px\]{
            min-height: 872px;
        }
        .md\:min-h-\[983px\]{
            min-height: 983px;
        }
        .md\:min-h-\[1000px\]{
            min-height: 1000px;
        }
        .md\:min-h-\[1255px\]{
            min-height: 1255px;
        }
        
        /* Absolute */
        /* Top */
        .md\:top-\[50\%\]{
            top: 50%;
        }
        .md\:t-0{
            top: 0rem;
        }
        .md\:top-0{
            top: 0rem;
        }
        .md\:top-1{
            top: 1rem;
        }
        .md\:top-2{
            top: 2rem;
        }
        .md\:top-3{
            top: 3rem;
        }
        .md\:top-4\.5{
            top: 4.5rem;
        }
        .md\:top-5{
            top: 5rem;
        }
        .md\:pt-5{
            top: 5rem;
        }
        .md\:top-7{
            top: 7rem;
        }
        .md\:t-36{
            top: 36rem;
        }
        .md\:-top-2{
            top: -2rem;   
        }
        .md\:-top-3{
            top: -3rem;   
        }
        .-md\:t-3{
            top: -3rem;
        }
        .-md\:t-2{
            top: -2rem;
        }
        .-md\:t-35{
            top: -3.5rem;
        }
        .md\:-top-5{
            top: -5rem;
        }
        .-md\:t-7{
            top: -7rem;
        }
        .md\:-top-7{
            top: -7rem;
        }
        .-md\:t-10{
            top: -10rem;
        }
        .md\:-top-9{
            top: -9rem;
        }
        
        /* Bottom */
        .md\:-b-1px{
            bottom: -1px;    
        }
        .md\:-bottom-1{
            bottom: -1rem;
        }
        .md\:-bottom-2{
            bottom: -2rem;    
        }
        .-md\:b-2{
            bottom: -2.25rem;
        }
        .md\:-bottom-6{
            bottom: -6rem;   
        }
        .md\:-bottom-6\.5{
            bottom: -6.5rem;   
        }
        .md\:-bottom-9{
            bottom: -9rem;   
        }
        .-md\:b-10{
            bottom: -10rem;
        }
        .md\:-bottom-18{
            bottom: -18rem;
        }
        .md\:-b-19{
            bottom: -19rem;
        }
        .md\:-b-20{
            bottom: -20rem;
        }
        .md\:b-4{
            bottom: 4rem;
        }
        .md\:bottom-5{
            bottom: 5rem;
        }
        .md\:bottom-6{
            bottom: 6rem;
        }
        
        /* Right */
        .md\:r-0{
            right: 0rem;   
        }
        .md\:right-0{
            right: 0rem;   
        }
        .md\:right-2{
            right: 2rem;
        }
        .md\:right-4{
            right: 4rem;
        }
        .md\:r-5{
            right: 5rem;   
        }
        .md\:right-5{
            right: 5rem;
        }
        .md\:right-5\.5{
            right: 5.5rem;
        }
        .md\:r-8{
            right: 8rem;   
        }
        .md\:right-10{
            right: 10rem;   
        }
        .md\:right-30{
            right: 30rem;
        }
            /* Negatif */
            .md\:-right-1{
                right: -1rem;
            }
            .md\:-right-2{
                right: -2rem;
            }
            .md\:-right-3{
                right: -3rem;
            }
            .md\:-right-4{
                right: -4rem;
            }
            .md\:-right-7{
                right: -7rem;  
            }
            .-md\:r-9{
                right: -9rem;
            }
        
        /* Left */
        .md\:left-0{
            left: 0;
        }
        .md\:left-2{
            left: 2rem;
        }
        .md\:left-3{
            left: 3rem;
        }
        .md\:left-4{
            left: 4rem;
        }
        .md\:left-6{
            left: 6rem;
        }
        .md\:left-10{
            left: 10rem;
        }
        .md\:left-16{
            left: 16rem;
        }
        .md\:left-18{
            left: 18rem;
        }
        .md\:l-24{
            left: 24rem;
        }
        .md\:left-30{
            left: 30rem;
        }
            /* Negatif */
            .md\:-left-1{
                left: -1rem;
            }
            .md\:-left-2{
                left: -2rem;    
            }
            .-md\:l-3{
                left: -3rem;   
            }
            .md\:-left-3{
                left: -3rem;    
            }
            .md\:-left-4{
                left: -4rem;
            }
            .md\:-left-5{
                left: -5rem;
            }
            .md\:-left-7{
                left: -7rem;  
            }
            .md\:-left-8{
                left: -8rem;  
            }
            .-md\:left-95{
                left: -9.5rem;
            }
        
        /* Margin */
        .md\:mt-2-mx-auto-mb-0{
            margin: 2rem auto 0rem;   
        }
            /* Margin - Top */
            .md\:mt-1{
                margin-top: 1rem;
            }
            .md\:mt-3{
                margin-top: 3rem;
            }
            .md\:mt-5{
                margin-top: 5rem;
            }
            .md\:mt-6{
                margin-top: 6rem;
            }
            .md\:mt-7{
                margin-top: 7rem;
            }
            .md\:mt-8{
                margin-top: 8rem;
            }
            /* Margin - Bottom */
            .md\:mb-0{
              margin-bottom: 0rem;
            }
            .md\:mb-2{
              margin-bottom: 2rem;
            }
            .md\:mb-3{
              margin-bottom: 3rem;
            }
            .md\:mb-12{
              margin-bottom: 3rem;
            }
            .md\:mb-4{
                margin-bottom: 3rem;
            }
            .md\:mb-6{
                margin-bottom: 6rem;
            }
            .md\:mb-10{
                margin-bottom: 10rem;
            }
            /* Margin - Right */
            .md\:mr-0{
                margin-right: 0rem;
            }
            .md\:mr-3{
                margin-right: 3rem;
            }
            .md\:-mr-4{
                margin-right: -4rem;
            }
            .md\:-mr-8{
                margin-right: -8rem;
            }
            /* Margin - Left */
            .md\:ml-0{
                margin-left: 0rem;   
            }
            .md\:ml-3{
                margin-left: 3rem;
            }
            .md\:-ml-8{
                margin-left: -8rem;   
            }
            /* Margin - X */
            .md\:mx-auto{
                margin-right: auto;
                margin-left: auto;
            }
        
        /* Padding */
        .md\:p\[24px\]{
            padding: 24px;
        }
        .md\:p-3{
            padding: 3rem!important;
        }
        .md\:p-5202{
            padding: 5rem 2.25rem 0rem 2.25rem;
        }
            /* Padding - Top */
            .md\:pt-0{
                padding-top: 0rem;
            }
            .md\:pt-1{
                padding-top: 1rem;
            }
            .md\:pt-3{
                padding-top: 3rem;
            }
            .md\:pt-3{
                padding-top: 5rem;
            }
            .md\:pt-7{
                padding-top: 7rem;
            }
            .md\:pt-10{
                padding-top: 10rem;
            }
            .md\:pt-14{
                padding-top: 14rem;
            }
            .md\:pt-30{
                padding-top: 4.5rem;
            }
            /* Padding - Bottom */
            .md\:pb-0{
                padding-bottom: 0rem;
            }
            .md\:pb-1{
                padding-bottom: 1rem;
            }
            .md\:pb-2{
                padding-bottom: 2rem;
            }
            .md\:pb-3{
                padding-bottom: 3rem;
            }
            .md\:pb-7{
                padding-bottom: 7rem;
            }
            .md\:pb-8{
                padding-bottom: 8rem;
            }
            /* Padding - Right */
            .md\:pr-0{
                padding-right: 0rem;
            }
            .md\:pr-1-5{
                padding-right: 1.5rem;
            }
            .md\:pr-2{
                padding-right: 2rem;
            }
            .md\:pr-6{
                padding-right: 6rem;
            }
            /* Padding - Left */
            .md\:pl-0{
                padding-left: 0rem;
            }
            .md\:pl-1-5{
                padding-left: 1.5rem;
            }
            .md\:pl-2{
                padding-left: 2rem;
            }
            .md\:pl-6{
                padding-left: 6rem;
            }
            /* Padding - Y */
            .md\:py-0{
                padding-top: 0rem;
                padding-bottom: 0rem;
            }
            .md\:py-5{
                padding: 5rem 0;
            }
            /* Padding - X */
            .md\:px-1\.5{
                padding-right: 1.5rem;
                padding-left: 1.5rem;
            }
            .md\:px-2{
                padding-right: 2rem;
                padding-left: 2rem;
            }
            .md\:px-2\.5{
                padding-right: 2.5rem;
                padding-left: 2.5rem;
            }
            .md\:px-3{
                padding-left: 3rem;
                padding-right: 3rem;
            }
            
        /* margin - inline */
        .md\:ms-0\.5{
            margin-inline-start: 0.5rem;
        }
            
        /* Radius */
        .md\:rounded-tl-0{
            border-top-left-radius: 0rem;
        }
        .md\:rounded-tl-3xl{
            border-top-left-radius: 1.5rem;
        }
        .md\:rounded-br-0{
            border-bottom-right-radius: 0rem;
        }
        .md\:rounded-br-3xl{
            border-bottom-right-radius: 1.5rem;
        }
        
        /* Rotate */
        .md\:rotate-\[10deg\]{
            --tw-rotate: 10deg;
           transform: translate(var(--tw-translate-x), 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))}
        }
        .md\:-rotate-\[10deg\]{
            --tw-rotate: -10deg;
           transform: translate(var(--tw-translate-x), 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))}
        }
        
        /* Planet */
        .planet-container, .planet-container .day, .planet-container .night, .planet-container .clouds, .planet-container .inner-shadow{
            width: 484px;
            height: 484px;
        }
        .planet-container.warga-asri, .planet-container.warga-asri .day, .planet-container.warga-asri .night, .planet-container.warga-asri .clouds, .planet-container.warga-asri .inner-shadow{
            width: 357px;
            height: 357px;
        }
        /* Mountain */
        .bg-mountain{
            background-repeat: repeat;
        }
        
        /* Background */
        .md\:bg-size-contain{
            background-size: contain;
        }
        
        /* About - Timeline */
        .timeline_section:after{
            height: 90%;
        }
        
        /* Profile - Tab */
        .tab_profile-item{
            padding: .5rem 3rem;
        }
    }
    
/* Tablet - 768px */
    @media (max-width: 768px){
        /* Text */
        .md\:text-3xl{
            font-size: 72px;
            line-height: 100%;
        }
        /* Align */
        .md\:text-center{
            text-align: center;
        }
        /* Padding */
        .md\:pt-40{
            padding-top: 8rem;
        }
        .md\:px-3{
            padding-left: 2.5rem;
            padding-right: 2.5rem;
        }
    }
    
/* Mobile - 500px */
    @media (max-width: 500px){
        /* Text */
        .sm\:text-2xl{
            font-size: 40px;
        }
        .sm\:text-2xl-52px{
            font-size: 40px;
            line-height: 52px;
        }
        .sm\:text-48-60px{
            font-size: 48px;
            line-height: 60px;
        }
        .sm\:text-3xl{
            font-size: 28px;
        }
        .sm\:text-3xl-52px{
            font-size: 28px;
            line-height: 52px;
        }
        .sm\:text-3xl-40px{
            font-size: 28px;
            line-height: 40px;
        }
        .sm\:text-2{
            font-size: 2rem;
        }
        .sm\:text-18-30px{
            font-size: 18px;
            line-height: 30px;
        }
        .sm\:text-24{
            font-size: 24px;
            line-height: 100%;
        }
        .sm\:text-20{
            font-size: 20px;
            line-height: 32px;
        }
        .sm\:text-16{
            font-size: 16px;
        }
        .sm\:text-16-28px{
            font-size: 16px;
            line-height: 28px;
        }
        .sm\:text-14{
            font-size: 14px;
        }
        /* Line Height */
        .sm\:line-height\[68px\]{
            line-height: 68px;   
        }
        /* Align */
        .sm\:text-center{
            text-align: center;
        }
        /* Display */
        .sm\:hidden{
            display: none;
        }
        .sm\:block{
            display: block;
        }
        /* Position */
        .sm\:relative{
            position: relative;   
        }
        /* Justify */
        .sm\:justify-center{
            justify-content: center;
        }
        .sm\:items-start{
            align-items: start;
        }
        .sm\:item-center{
            align-items: center;   
        }
        /* Flex */
        .sm\:flex{
            display: flex;   
        }
        .sm\:inline-flex{
            display: inline-flex;   
        }
        .sm\:flex-wrap{
            flex-wrap: wrap;   
        }
        .sm\:flex-col{
            flex-direction: column;
        }
        /* Grid */
        .sm\:grid{
            display: grid;
        }
        .sm\:9-grid-cols-1{
            grid-template-columns: repeat(1, minmax(0, 1fr));
        }
        /* Gap */
        .sm\:gap-0{
            gap: 0;
        }
        .sm\:gap-1{
            gap: 1rem;
        }
        .sm\:gap-1\.5{
            gap: 1.5rem;
        }
        .sm\:gap-2{
            gap: 2rem;
        }
        .sm\:gap-4{
            gap: 4rem;
        }
        .sm\:gap\[17px\]{
            gap: 17px;
        }
        /* Overflow */
        .sm\:overflow-scroll{
            overflow: scroll;
        }
        /* z-index */
        .sm\:z-1{
            z-index: 1;   
        }
        .sm\:z-2{
            z-index: 2;   
        }
        .sm\:z-10{
            z-index: 10;   
        }
        /* Width */
        .sm\:w-2{
            width: 2rem;
        }
        .sm\:w-9{
            width: 9rem;
        }
        .sm\:w\[24px\]{
            width: 24px;
        }
        .sm\:w\[56px\]{
            width: 56px;
        }
        .sm\:w\[71px\]{
            width: 71px;
        }
        .sm\:w\[78px\]{
            width: 78px;
        }
        .sm\:w-106{
            width: 106px;
        }
        .sm\:w-160{
            width: 160px;
        }
        .sm\:w-167{
            width: 167px;
        }
        .sm\:w-173{
            width: 173px;
        }
        .sm\:w-\[289px\]{
            width: 289px;
        }
        .sm\:w-\[327px\]{
            width: 327px;
        }
        .sm\:w-95{
            width: 95%;
        }
        .sm\:w-100{
            width: 100%;
        }
        .sm\:w-max-content{
            width: max-content;
        }
        /* Max - Width */
        .sm\:max-w-2{
            max-width: 2rem;
        }
        .sm\:max-w-2-5{
            max-width: 2.5rem;
        }
        .sm\:max-w-3{
            max-width: 3rem;
        }
        .sm\:max-w-4{
            max-width: 4rem;
        }
        .sm\:max-w-9{
            width: 9rem;
        }
        .sm\:max-w-10{
            max-width: 10rem;
        }
        .sm\:max-w-15{
            max-width: 15rem;
        }
        .sm\:max-w-4xl{
            max-width: 20rem;
        }
        .sm\:max-w\[23rem\]{
            max-width: 23rem;
        }
        .sm\:max-w-60{
            width: 60px;
        }
        .sm\:max-w-106{
            max-width: 106px;
        }
        .sm\:max-w-120{
            max-width: 120px;
        }
        .sm\:max-w-90{
            max-width: 90%;
        }
        .sm\:max-w-100{
            max-width: 100%;
        }
        .sm\:max-w-\[60px\]{
            max-width: 60px;
        }
        .sm\:max-w\[68px\]{
            max-width: 68px;
        }
        .sm\:max-w\[69px\]{
            max-width: 69px;
        }
        .sm\:max-w\[70px\]{
            max-width: 70px;
        }
        .sm\:max-w\[73px\]{
            max-width: 73px;
        }
        .sm\:max-w\[80px\]{
            max-width: 80px;
        }
        .sm\:max-w\[81px\]{
            max-width: 81px;
        }
        .sm\:max-w\[100px\]{
            max-width: 100px;
        }
        .sm\:max-w\[106px\]{
            max-width: 106px;
        }
        .sm\:max-w\[107px\]{
            max-width: 107px;
        }
        .sm\:max-w\[122px\]{
            max-width: 122px;
        }
        .sm\:max-w\[129px\]{
            max-width: 129px;
        }
        .sm\:max-w\[176px\]{
            max-width: 176px;
        }
        .sm\:max-w\[177px\]{
            max-width: 177px;
        }
        .sm\:max-w\[200px\]{
            max-width: 200px;
        }
        .sm\:max-w\[214px\]{
            max-width: 214px;
        }
        .sm\:max-w\[300px\]{
            max-width: 300px;
        }
        .sm\:max-w\[308px\]{
            max-width: 308px;
        }
        .sm\:max-w\[327px\]{
            max-width: 327px;
        }
        .sm\:max-w\[390px\]{
            max-width: 390px;
        }
        .sm\:max-w-fit{
            max-width: fit-content;
        }
        /* Min - Width */
        .sm\:min-w\[50px\]{
            min-width: 50px;
        }
        .sm\:min-w-\[141px\]{
            min-width: 141px;
        }
        .sm\:min-w-\[181px\]{
            min-width: 181px;
        }
        /* Height */
        .sm\:h-\[50px\]{
            height: 50px!important;
        }
        .sm\:h-\[240px\]{
            height: 240px;
        }
        .sm\:h-2{
            height: 2rem;   
        }
        .sm\:h-5{
            height: 5rem;   
        }
        .sm\:h-9{
            height: 9rem;   
        }
        .sm\:h-11{
            height: 11rem;   
        }
            /* Max -Height */
            .sm\:max-h\[43px\]{
                max-height: 43px;
            }
            .sm\:max-h\[92px\]{
                max-height: 92px;
            }
            /* Min -Height */
            .sm\:min-h-15{
                min-height: 15rem;
            }
            .sm\:min-h-\[207px\]{
                min-height: 207px;
            }
            .sm\:min-h\[516px\]{
                min-height: 516px;
            }
            .sm\:min-h\[555px\]{
                min-height: 555px;
            }
            .sm\:min-h-\[553px\]{
                min-height: 553px;
            }
            .sm\:min-h\[694px\]{
                min-height: 694px;
            }
            .sm\:min-h-\[750px\]{
                min-height: 750px;
            }
            .sm\:min-h-\[777px\]{
                min-height: 777px;
            }
            .sm\:min-h-\[800px\]{
                min-height: 800px;
            }
            .sm\:min-h-\[1150px\] {
                min-height: 1150px;
            }
        /* Absolute */
        /* Top */
        .sm\:-top-1\.5{
            top: -1.5rem;
        }
        .sm\:-top-2{
            top: -2rem;
        }
        .sm\:-top-4{
            top: -4rem;
        }
        .sm\:-top-5{
            top: -5rem;
        }
        .sm\:-top-7{
            top: -7rem;
        }
        .sm\:-top-8{
            top: -8rem;
        }
        .sm\:top-0{
            top: 0rem;
        }
        .sm\:top-1{
            top: 1rem;
        }
        .sm\:top-5{
            top: 5rem;
        }
        .sm\:top-8{
            top: 8rem;
        }
        .sm\:top-15{
            top: 15rem;
        }
        .sm\:top-40{
            top: 40rem;
        }
        .sm\:top-auto{
            top: auto;
        }
        /* Bottom */
        .sm\:bottom-0{
            bottom: 0rem;
        }
        .sm\:bottom-1{
            bottom: 1rem;
        }
        .sm\:bottom-3{
            bottom: 3rem;
        }
        .sm\:bottom-5{
            bottom: 5rem;
        }
        .sm\:-bottom-1-25{
            bottom: -1.25rem;
        }
        .sm\:-bottom-2{
            bottom: -2rem;
        }
        .sm\:-bottom-2-5{
            bottom: -2.5rem;
        }
        .sm\:-bottom-3{
            bottom: -3rem;   
        }
        .sm\:-bottom-5{
            bottom: -5rem;   
        }
        .sm\:-bottom-10{
            bottom: -10rem;   
        }
        .sm\:-bottom-21{
            bottom: -21rem;
        }
        /* Left */
        .sm\:-left-1-5{
            left: -1.5rem;   
        }
        .sm\:-left-1{
            left: -1rem;   
        }
        .sm\:-left-2{
            left: -2rem;   
        }
        .sm\:-left-5{
            left: -5rem;   
        }
        .sm\:-left-6{
            left: -6rem;   
        }
        .sm\:left\[8px\]{
            left: 8px;
        }
        .sm\:left-0{
            left: 0rem;   
        }
        .sm\:left-1{
            left: 1rem;   
        }
        .sm\:left-1-5{
            left: 1.5rem;   
        }
        .sm\:left-2{
            left: 2rem;   
        }
        .sm\:left-10{
            left: 10rem;
        }
        .sm\:left-16{
            left: 16rem;
        }
        /* Right */
        .sm\:-right-1{
            right: -1rem;   
        }
        .sm\:-right-1-5{
            right: -1.5rem;   
        }
        .sm\:-right-5{
            right: -5rem;   
        }
        .sm\:-right-2{
            right: -2rem;   
        }
        .sm\:-right-3{
            right: -3rem;   
        }
        .sm\:-right-3-5{
            right: -3.5rem;   
        }
        .sm\:-right-4{
            right: -4rem;   
        }
        .sm\:right-0{
            right: 0rem;  
        }        
        .sm\:right-0-5{
            right: .5rem;  
        }
        .sm\:right-1{
            right: 1rem;   
        }
        .sm\:right-2{
            right: 2rem;   
        }
        .sm\:right-16{
            right: 16rem;   
        }
        /* Start - Inline */
        .sm\:-start-2\.6{
            inset-inline-start: -2.6rem;
        }
        /* Margin - Inline */
        .sm\:ms-1\.5{
            margin-inline-start: 1.5rem;
        }
        /* Margin */
        .sm\:mt-5-mx2{
            margin: -5rem 2rem 0rem;
        }
            /* Margin - Right */
            .sm\:-mr-2-2{
                margin-right: -2.2rem;   
            }
            .sm\:-mr-2-5{
                margin-right: -2.5rem;   
            }
            .sm\:-mr-5{
                margin-right: -5rem;   
            }
            .sm\:mr-0{
                margin-right: 0rem;
            }
            .sm\:mr-1{
                margin-right: 1rem;
            }
            .sm\:mr-2{
                margin-right: 2rem;
            }
            /* Margin - Left */
            .sm\:-ml-2-2{
                margin-left: -2.2rem;   
            }
            .sm\:-ml-5{
                margin-left: -5rem;   
            }
            .sm\:ml-2{
                margin-left: 2rem;   
            }
            /* Margin - Top */
            .sm\:mt-0{
                margin-top: 0rem;   
            }
            .sm\:mt-1{
                margin-top: 1rem;   
            }
            .sm\:mt-3{
                margin-top: 3rem;   
            }
            .sm\:mt-10{
                margin-top: 10rem;   
            }
            .sm\:mt-24{
                margin-top: 24px;
            }
            .sm\:mt-24-5{
                margin-top: 24.5px;
            }
            /* Margin - Bottom */
            .sm\:mb-0{
                margin-bottom: 0rem;   
            }
            .sm\:mb-1{
                margin-bottom: 1rem;   
            }
            .sm\:mb-1-5{
                margin-bottom: 1.5rem;   
            }
            .sm\:mb-2{
                margin-bottom: 2rem;
            }
            .sm\:mb-3{
                margin-bottom: 3rem;
            }
            .sm\:mb-4{
                margin-bottom: 4rem;
            }
            .sm\:mb-6{
                margin-bottom: 6rem;
            }
            .sm\:mb-8{
                margin-bottom: 8rem;
            }
            .sm\:-mb-2{
                margin-bottom: -2rem;   
            }
            .sm\:-mb-4{
                margin-bottom: -4rem;
            }
            /* Margin - X */
            .sm\:mx-auto{
                margin-left: auto;
                margin-right: auto;
            }
        /* Padding - Inline */
        .sm\:pe-0{
            padding-inline-end: 0rem;
        }
        /* Padding */
        .sm\:p-0{
            padding: 0rem;
        }
        .sm\:p-0-5{
            padding: .5rem;
        }
        .sm\:p-1{
            padding: 1rem;
        }
        .sm\:p-1-5{
            padding: 1.5rem;
        }
        .sm\:p-1\.5{
            padding: 1.5rem;
        }
        .sm\:py-5-px-1{
            padding: 5rem 1rem; 
        }
        .sm\:pt-5-pb-10{
            padding: 5rem 0rem 10rem 0rem;
        }
            /* Padding - Top*/
            .sm\:pt-0{
                padding-top: 0rem;
            }
            .sm\:pt-1{
                padding-top: 1rem;
            }
            .sm\:pt-2-5{
                padding-top: 2.5rem;
            }
            .sm\:pt-3{
                padding-top: 3rem;
            }
            .sm\:pt-4{
                padding-top: 4rem;
            }
            .sm\:pt-5{
                padding-top: 5rem;
            }
            .sm\:pt-6{
                padding-top: 6rem;
            }
            .sm\:pt-8{
                padding-top: 8rem;   
            }
            .sm\:pt-10{
                padding-top: 10rem;   
            }
            /* Padding - Bottom*/
            .sm\:pb-1{
                padding-bottom: 1rem;
            }
            .sm\:pb-3{
                padding-bottom: 3rem;
            }
            .sm\:pb-4{
                padding-bottom: 4rem;
            }
            .sm\:pb-6{
                padding-bottom: 6rem;
            }
            /* Padding - Left */
            .sm\:pl-0{
                padding-left: 0rem;
            }
            .sm\:pl-1{
                padding-left: 1rem;
            }
            .sm\:pl-1-5{
                padding-left: 1.5rem;
            }
            .sm\:pl-2{
                padding-left: 2rem;
            }
            .sm\:pl\[24px\]{
                padding-left: 24px;
            }
            /* Padding - Right */
            .sm\:pr-0{
                padding-right: 0rem;
            }
            .sm\:pr-1{
                padding-right: 1rem;
            }
            .sm\:pr-2{
                padding-right: 2rem;
            }
            /* Padding - X */
            .sm\:px-0{
                padding-left: 0rem;
                padding-right: 0rem;
            }
            .sm\:px-0\.5{
                padding-right: 0.5rem;
                padding-left: 0.5rem;
            }
            .sm\:px-1-5{
                padding: 0 1.5rem;
            }
            .sm\:px-1\.5{
                padding-left: 1.5rem!important;
                padding-right: 1.5rem!important;
            }
            .sm\:px-1{
                padding-left: 1rem;
                padding-right: 1rem;
            }
            .sm\:px-2{
                padding-left: 2rem;
                padding-right: 2rem;
            }
            /* Padding - Y */
            .sm\:py-0\.5{
                padding-top: .5rem;
                padding-bottom: .5rem;
            }
            .sm\:py-2{
                padding-top: 3rem;
                padding-bottom: 3rem;
            }
            .sm\:py-3{
                padding-top: 3rem;
                padding-bottom: 3rem;
            }
        
        /* Planet */
        .planet-container, 
        .planet-container .day, 
        .planet-container .night, 
        .planet-container .clouds, 
        .planet-container .inner-shadow{
            width: 277px!important;
            height: 276px!important;
        }
        
        /* Mountain */
        .bg-mountain{
            height: 195px;
        }
        
        /* Challenge */
        .test-item .test-item-content{
            padding: 6rem 2rem;
        }
        
        /* About - Timeline */
        .timeline_section:after{
            left: 1rem;   
        }
        .timeline-mask{
            left: 0rem;   
        }
        .timeline_dot{
            left: -1rem;
        }
        
        /* Profile - History*/
        .historical_points:before{
            height: 5.5rem;
        }
        
        /* Ellipsis Text */
        .sm\:ellipsis-3{
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
        }
        
        /* Article Index - Pagination */
        .article_pagination-container .ia-pagination{
            overflow-x: scroll;
        }
        .article_pagination-container .ia-pagination ul{
            gap: .5rem;
            display: inline-flex;   
        }
    }