/*!
* PT. IMAJIKU CIPTA MEDIA
* Copyright 2019-2024 IMAJIKU.
*/

/* =Main Variables Styles
------------------------------------------------------------ */
:root {

    /*color body text*/
    --color-text-1: #FFFFFF;
    --color-text-2: #B5B5B5;

    /*color main/identity 1*/
    --color-1: #FFAAAA;
    /*color main/identity 2*/
    --color-2: #FF5B5B;
    /*color main/identity 3*/
    --color-3: #343f52;

    /*color button*/
    --color-button-1: #FFD60A;
    --color-button-2: #E0B700;

    /*Font Family 1 main*/
    --font-family-1: 'Satoshi-Variable', sans-serif;

    /*Font Family 2*/
    --font-family-2: 'lato', sans-serif;

    /*Font Family 3*/
    --font-family-3: 'Roboto Mono', sans-serif;

    /*default color palette*/
    --white: #ffffff;
    --black: #1B1C1F;
    --red: #D90429;
    --red-dark: #650000;
    --orange: #FF5400;
    --orange-dark: #E65100;
    --yellow: #FFD60A;
    --yellow-dark: #E0B700;
    --green: #52B788;
    --green-dark: #2D6A4F;
    --blue: #0466C8;
    --blue-dark: #023E8A;
    --purple: #9D4EDD;
    --purple-dark: #5A189A;
    --pink: #FF7096;
    --pink-dark: #FF477E;
    --brown: #BC8A5F;
    --brown-dark: #603808;
    --turquoise: #02C39A;
    --turquoise-dark: #16697A;
    --grey: #f2f2f2;

    /*default pastel color palette*/
    --pastel-white: #ffffff;
    --pastel-black: #353535;
    --pastel-red: #FEC8C1;
    --pastel-red-dark: #FA99A0;
    --pastel-orange: #FFDEC3;
    --pastel-orange-dark: #FFB98A;
    --pastel-yellow: #FFFBB5;
    --pastel-yellow-dark: #FFF95B;
    --pastel-green: #D3FAC7;
    --pastel-green-dark: #8DF292;
    --pastel-blue: #EDFBFE;
    --pastel-blue-dark: #7DE2F7;
    --pastel-purple: #FBE4FF;
    --pastel-purple-dark: #E0AAFF;
    --pastel-pink: #FFE5EC;
    --pastel-pink-dark: #FFAFCC;
    --pastel-brown: #EED7C5;
    --pastel-brown-dark: #E7BC91;
    --pastel-turquoise: #DFFDFF;
    --pastel-turquoise-dark: #9AF6E7;
    --pastel-grey: #e6e6e6;

    /*default grey color palette*/
    --grey-50: #f7f7f7;
    --grey-100: #f2f2f2;
    --grey-200: #ececec;
    --grey-300: #e6e6e6;
    --grey-400: #d9d9d9;
    --grey-500: #B5B5B5;
    --grey-600: #919191;
    --grey-700: #6D6D6D;
    --grey-800: #484848;
    --grey-900: #2B2B2B;

    /*default color social network*/
    --color-facebook: #3b5998;
    --color-twitter: #00aced;
    --color-instagram: #517fa4;
    --color-pinterest: #cb2027;
    --color-youtube: #b00000;
    --color-google: #4285f4;
    --color-googleplus: #db4437;
    --color-telegram: #0088cc;
    --color-whatsapp: #25d366;
    --color-spotify: #1ed760;
    --color-discord: #5865f2;
    --color-tiktok: #010101;
    --color-linkedln: #0a66c2;

}

/* =CSS RESET : reset default browser style
-------------------------------------------------------------*/
html,
body {
    background-color: var(--white);
    scroll-behavior: smooth;
    /* 	position: relative; */
}

body {
    color: var(--white);
    font-size: 1rem;
    font-family: var(--font-family-1);
    font-weight: 400;
    line-height: 1.5;
    overflow-x: hidden;
    background-color: #000000;
}

figure {
    margin: 0;
    width: 100%;
    height: 100%;
}

/* =FONT-FAMILY
------------------------------------------------------------ */
/*NOTE : contert extention .otf from https://www.font2web.com*/

/*@font-face {
	font-family: 'MyWebFont';
	src: url('../fonts/webfont.eot');
	src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/webfont.woff2') format('woff2'),
	url('../fonts/webfont.woff') format('woff'),
	url('../fonts/webfont.ttf')  format('truetype'),
	url('../fonts/webfont.svg#svgFontName') format('svg');
}*/

/* =HYPERLINK
------------------------------------------------------------ */
a {
    color: var(--color-button-1);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

a:link {
    color: var(--color-button-1);
    text-decoration: none;
}

a:visited {
    color: var(--color-button-1);
    text-decoration: none;
}

a:hover {
    color: var(--color-button-2);
    text-decoration: none;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

a:hover,
a:active {
    outline: none;
}

a:focus,
a:focus-visible {
    outline: none;
}

:focus {
    outline: none;
}

/* =COLOR PALETTE SYSTEM
------------------------------------------------------------ */
/*color Palettes*/
.clr-white {
    color: var(--white) !important;
}

.clr-black {
    color: var(--black) !important;
}

.clr-red {
    color: var(--red) !important;
}

.clr-red-dark {
    color: var(--red-dark) !important;
}

.clr-orange {
    color: var(--orange) !important;
}

.clr-orange-dark {
    color: var(--orange-dark) !important;
}

.clr-yellow {
    color: var(--yellow) !important;
}

.clr-yellow-dark {
    color: var(--yellow-dark) !important;
}

.clr-green {
    color: var(--green) !important;
}

.clr-green-dark {
    color: var(--green-dark) !important;
}

.clr-blue {
    color: var(--blue) !important;
}

.clr-blue-dark {
    color: var(--blue-dark) !important;
}

.clr-purple {
    color: var(--purple) !important;
}

.clr-purple-dark {
    color: var(--purple-dark) !important;
}

.clr-pink {
    color: var(--pink) !important;
}

.clr-pink-dark {
    color: var(--pink-dark) !important;
}

.clr-brown {
    color: var(--brown) !important;
}

.clr-brown-dark {
    color: var(--brown-dark) !important;
}

.clr-turquoise {
    color: var(--turquoise) !important;
}

.clr-turquoise-dark {
    color: var(--turquoise-dark) !important;
}

.clr-grey {
    color: var(--grey) !important;
}

.clr-grey-50 {
    color: var(--grey-50) !important;
}

.clr-grey-100 {
    color: var(--grey-100) !important;
}

.clr-grey-200 {
    color: var(--grey-200) !important;
}

.clr-grey-300 {
    color: var(--grey-300) !important;
}

.clr-grey-400 {
    color: var(--grey-400) !important;
}

.clr-grey-500 {
    color: var(--grey-500) !important;
}

.clr-grey-600 {
    color: var(--grey-600) !important;
}

.clr-grey-700 {
    color: var(--grey-700) !important;
}

.clr-grey-800 {
    color: var(--grey-800) !important;
}

.clr-grey-900 {
    color: var(--grey-900) !important;
}

/*Pastel Color Palettes*/
.clr-pastel-white {
    color: var(--pastel-white) !important;
}

.clr-pastel-black {
    color: var(--pastel-black) !important;
}

.clr-pastel-red {
    color: var(--pastel-red) !important;
}

.clr-pastel-red-dark {
    color: var(--pastel-red-dark) !important;
}

.clr-pastel-orange {
    color: var(--pastel-orange) !important;
}

.clr-pastel-orange-dark {
    color: var(--pastel-orange-dark) !important;
}

.clr-pastel-yellow {
    color: var(--pastel-yellow) !important;
}

.clr-pastel-yellow-dark {
    color: var(--pastel-yellow-dark) !important;
}

.clr-pastel-green {
    color: var(--pastel-green) !important;
}

.clr-pastel-green-dark {
    color: var(--pastel-green-dark) !important;
}

.clr-pastel-blue {
    color: var(--pastel-blue) !important;
}

.clr-pastel-blue-dark {
    color: var(--pastel-blue-dark) !important;
}

.clr-pastel-purple {
    color: var(--pastel-purple) !important;
}

.clr-pastel-purple-dark {
    color: var(--pastel-purple-dark) !important;
}

.clr-pastel-pink {
    color: var(--pastel-pink) !important;
}

.clr-pastel-pink-dark {
    color: var(--pastel-pink-dark) !important;
}

.clr-pastel-brown {
    color: var(--pastel-brown) !important;
}

.clr-pastel-brown-dark {
    color: var(--pastel-brown-dark) !important;
}

.clr-pastel-turquoise {
    color: var(--pastel-turquoise) !important;
}

.clr-pastel-turquoise-dark {
    color: var(--pastel-turquoise-dark) !important;
}

.clr-pastel-grey {
    color: var(--pastel-grey) !important;
}

/*Color background Palettes*/
.bg-clr-white {
    background-color: var(--white) !important;
}

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

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

.bg-clr-red-dark {
    background-color: var(--red-dark) !important;
}

.bg-clr-orange {
    background-color: var(--orange) !important;
}

.bg-clr-orange-dark {
    background-color: var(--orange-dark) !important;
}

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

.bg-clr-yellow-dark {
    background-color: var(--yellow-dark) !important;
}

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

.bg-clr-green-dark {
    background-color: var(--green-dark) !important;
}

.bg-clr-blue {
    background-color: var(--blue) !important;
}

.bg-clr-blue-dark {
    background-color: var(--blue-dark) !important;
}

.bg-clr-purple {
    background-color: var(--purple) !important;
}

.bg-clr-purple-dark {
    background-color: var(--purple-dark) !important;
}

.bg-clr-pink {
    background-color: var(--pink) !important;
}

.bg-clr-pink-dark {
    background-color: var(--pink-dark) !important;
}

.bg-clr-brown {
    background-color: var(--brown) !important;
}

.bg-clr-brown-dark {
    background-color: var(--brown-dark) !important;
}

.bg-clr-turquoise {
    background-color: var(--turquoise) !important;
}

.bg-clr-turquoise-dark {
    background-color: var(--turquoise-dark) !important;
}

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

.bg-clr-grey-50 {
    background-color: var(--grey-50) !important;
}

.bg-clr-grey-100 {
    background-color: var(--grey-100) !important;
}

.bg-clr-grey-200 {
    background-color: var(--grey-200) !important;
}

.bg-clr-grey-300 {
    background-color: var(--grey-300) !important;
}

.bg-clr-grey-400 {
    background-color: var(--grey-400) !important;
}

.bg-clr-grey-500 {
    background-color: var(--grey-500) !important;
}

.bg-clr-grey-600 {
    background-color: var(--grey-600) !important;
}

.bg-clr-grey-700 {
    background-color: var(--grey-700) !important;
}

.bg-clr-grey-800 {
    background-color: var(--grey-800) !important;
}

.bg-clr-grey-900 {
    background-color: var(--grey-900) !important;
}

/*Pastel Color background Palettes*/
.bg-clr-pastel-white {
    background-color: var(--pastel-white) !important;
}

.bg-clr-pastel-black {
    background-color: var(--pastel-black) !important;
}

.bg-clr-pastel-red {
    background-color: var(--pastel-red) !important;
}

.bg-clr-pastel-red-dark {
    background-color: var(--pastel-red-dark) !important;
}

.bg-clr-pastel-orange {
    background-color: var(--pastel-orange) !important;
}

.bg-clr-pastel-orange-dark {
    background-color: var(--pastel-orange-dark) !important;
}

.bg-clr-pastel-yellow {
    background-color: var(--pastel-yellow) !important;
}

.bg-clr-pastel-yellow-dark {
    background-color: var(--pastel-yellow-dark) !important;
}

.bg-clr-pastel-green {
    background-color: var(--pastel-green) !important;
}

.bg-clr-pastel-green-dark {
    background-color: var(--pastel-green-dark) !important;
}

.bg-clr-pastel-blue {
    background-color: var(--pastel-blue) !important;
}

.bg-clr-pastel-blue-dark {
    background-color: var(--pastel-blue-dark) !important;
}

.bg-clr-pastel-purple {
    background-color: var(--pastel-purple) !important;
}

.bg-clr-pastel-purple-dark {
    background-color: var(--pastel-purple-dark) !important;
}

.bg-clr-pastel-pink {
    background-color: var(--pastel-pink) !important;
}

.bg-clr-pastel-pink-dark {
    background-color: var(--pastel-pink-dark) !important;
}

.bg-clr-pastel-brown {
    background-color: var(--pastel-brown) !important;
}

.bg-clr-pastel-brown-dark {
    background-color: var(--pastel-brown-dark) !important;
}

.bg-clr-pastel-turquoise {
    background-color: var(--pastel-turquoise) !important;
}

.bg-clr-pastel-turquoise-dark {
    background-color: var(--pastel-turquoise-dark) !important;
}

.bg-clr-pastel-grey {
    background-color: var(--pastel-grey) !important;
}

/*color icon social network*/
.clr-facebook {
    color: var(--color-facebook);
}

.clr-twitter {
    color: var(--color-twitter);
}

.clr-instagram {
    color: var(--color-instagram);
}

.clr-pinterest {
    color: var(--color-pinterest);
}

.clr-youtube {
    color: var(--color-youtube);
}

.clr-google {
    color: var(--color-google);
}

.clr-googleplus {
    color: var(--color-googleplus);
}

.clr-telegram {
    color: var(--color-telegram);
}

.clr-whatsapp {
    color: var(--color-whatsapp);
}

.clr-spotify {
    color: var(--color-spotify);
}

.clr-discord {
    color: var(--color-discord);
}

.clr-tiktok {
    color: var(--color-tiktok);
}

.clr-linkedln {
    color: var(--color-linkedln);
}

/*background color icon social network*/
.bg-clr-facebook {
    background-color: var(--color-facebook);
}

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

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

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

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

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

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

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

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

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

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

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

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

/* =TITLE
-------------------------------------------------------------*/
.section-title {
    display: block;
    position: relative;
    width: 100%;
    background-color: var(--white);
    padding: 3rem 0 3rem;
}

.title-page-box {
    display: block;
    position: relative;
    width: 100%;
}

/*Title Primary*/
.title-primary {
    position: relative;
    font-family: var(--font-family-1);
}

.title-primary h1 {
    font-size: 40px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-primary h2 {
    font-size: 32px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-primary h3 {
    font-size: 24px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-primary h4 {
    font-size: 18px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-primary h5 {
    font-size: 18px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-primary h6 {
    font-size: 16px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-primary p {
    font-size: 16px;
    color: var(--color-secondary);
    font-weight: 400;
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

/*Title Primary*/
.title-secondary {
    position: relative;
    font-family: var(--font-family-1);
}

.title-secondary h1,
.title-secondary h2 {
    font-size: 28px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-secondary h3 {
    font-size: 24px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-secondary h4 {
    font-size: 20px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-secondary h5,
.title-secondary h6 {
    font-size: 16px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-secondary p {
    font-size: 16px;
    color: var(--color-secondary);
    font-weight: 400;
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

/*Title Primary*/
.title-dashboard {
    position: relative;
    font-family: var(--font-family-1);
}

.title-dashboard h1,
.title-dashboard h2,
.title-dashboard h3 {
    font-size: 22px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-dashboard h4,
.title-dashboard h5 {
    font-size: 18px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-dashboard h6 {
    font-size: 16px;
    color: var(--color-text-1);
    font-weight: 600;
    font-family: var(--font-family-1);
}

.title-dashboard p {
    font-size: 16px;
    color: var(--color-secondary);
    font-weight: 400;
    font-family: var(--font-family-1);
    margin-bottom: 0;
}

/*title with line*/
.title-primary .lines {
    position: relative;
    display: block;
    margin: 15px auto 15px 0;
    width: 50px;
    border-bottom: 2px solid #333333;
    z-index: 1;
}

.title-primary.text-center .lines {
    margin: 15px auto;
}

.title-primary.text-end .lines {
    margin: 15px 0 15px auto;
}

.underline {
    text-decoration: underline !important;
    text-decoration-color: var(--color-text-1) !important;
}

.strikethrough {
    font-weight: 400 !important;
    line-height: 1 !important;
    text-decoration: line-through !important;
    text-decoration-color: var(--color-text-1) !important;
}

.link-underlined {
    display: inline;
    position: relative;
    border: none;
    cursor: pointer;
}

.link-underlined::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 3px;
    width: 100%;
    height: 2px;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(159, 4, 38, 1) 45%, rgba(159, 4, 38, 0.3) 55%);
    background-size: 220% 100%;
    background-position: 100% 50%;
    transition: all 0.6s ease-in-out;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
}

.link-underlined:hover::before {
    background-position: 0% 50%;
}

/* =LIST
------------------------------------------------------------ */
.list-mjk-unstyled {
    padding: 0;
    margin-top: 0;
    margin-bottom: 1rem;
    list-style: none;
}

.list-mjk-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-mjk-inline li:not(:last-child) {
    margin: 0 10px 10px 0;
}

.list-style-circle {
    list-style-type: circle;
}

.list-style-square {
    list-style-type: square;
}

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

/*list with icon*/
.list-mjk-icon {
    padding: 0;
    margin: 0;
    list-style: none;
}

.list-mjk-icon-item {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
}

.list-mjk-icon-item-img {
    min-width: 30px;
}

.list-mjk-icon-item-img i {}

.list-mjk-icon-item p {
    margin-bottom: 0;
}

/*list with icon custom style*/
.list-style-icon {
    list-style: none;
    padding: 0;
}

.list-style-icon li {
    position: relative;
    padding-left: 30px;
}

.list-style-icon li::before {
    content: "\f144";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--red);
    width: 30px;
}

/*list contact if left icon & right text*/
.list-textbetween {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0;
    margin: 0;
    list-style: none;
    width: 100%;
}

.textbetween {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    line-height: 1;
}

.textbetween i {
    line-height: 1;
}

/* List table text / form text / data form text */
.form-text-group-box {
    position: relative;
    display: block;
}

.form-text-group-box ul {
    padding: 0;
    margin-top: 0;
    list-style: none;
}

.form-text-group {
    margin-bottom: 0;
}

.form-text-group .form-text-label {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.5;
}

.form-text-group .form-text-label label {
    display: inline-block;
    margin: 0;
    line-height: 1.5;
}

.form-text-group .form-text-label span {
    display: inline-block;
    margin: 0;
    line-height: 1.5;
}

.form-text-group .form-text-desc {
    padding-top: 2px;
    padding-bottom: 2px;
    line-height: 1.5;
}

.form-text-group .form-text-desc p {
    display: inline-block;
    margin: 0;
    line-height: 1.5;
}