/* General */
@font-face {
    font-family: judul;
    src: url(font/ChangaOne-Regular.ttf);
    font-display: swap
}

@font-face {
    font-family: konten;
    src: url(font/BalooThambi2.ttf);
    font-display: swap
}

:root {
    --hijau: #00ccaa;
    --bg_hijau_lighter: #00e3bd;
    --bg_hijau_darker: #00ccaa;
    --kuning: #ffcc00;
    --bg_kuning_lighter: #ffcc00;
    --bg_kuning_darker: #f6b912;
    --dark_blue: #19004f;
    --black: #363636;
    --white: #ffffff;
    --gray: #6e757c;
    --light_yellow: #ffeda5;
    --kuning_own: #f3cc4c;
    --pink_gghype: #ff4e87;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: judul;
}

body {
    font-family: konten;
}

.font_judul {
    font-family: judul !important;
}

.font_konten {
    font-family: konten !important;
}

.material-icons {
    color: var(--dark_blue);
}

.required {
    color: red;
}

form .btn-outline {
    border-color: #007bff;
    color: #007bff;
}

.text_blue {
    color: var(--dark_blue);
}

.text_white {
    color: var(--white);
}

.btn {
    font-family: konten;
}

.btn1 {
    background-color: var(--kuning);
    color: var(--dark_blue);
}

.btn1:hover,
.btn1:active,
.btn1:focus,
.btn1.active {
    background-color: var(--kuning);
    opacity: 90%;
    color: var(--dark_blue);
    /* border: unset; */
}

.btn_pagination {
    background-color: var(--kuning);
    color: var(--dark_blue);
}

.btn_pagination:hover,
.btn_pagination:active,
.btn_pagination:focus,
.btn_pagination.active {
    background-color: var(--hijau);
    opacity: 90%;
    color: var(--dark_blue);
    border: 1px solid var(--white);
}

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

.btn2:hover,
.btn2:active,
.btn2:focus {
    opacity: 90%;
    background-color: var(--white);
    color: var(--dark_blue);
}

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

.btn3:hover {
    opacity: 90%;
    background-color: var(--hijau);
    color: var(--white);
}

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

.btn4:hover {
    opacity: 90%;
    background-color: var(--gray);
    color: var(--white);
}

.section-heading {
    font-family: judul !important;
    color: var(--dark_blue);
}

/* Header */
header.masthead {
    position: relative;
    /* background-image: url("../img/pattern_Satuka_green.png"), linear-gradient(var(--hijau), var(--hijau)); W3C */
    background: url("../img/pattern_Satuka_green.png") repeat right/15%, linear-gradient(to right, var(--bg_hijau_darker), 75%, var(--bg_hijau_lighter));
    color: var(--black);
}

header.masthead .btn-outline {
    color: #41a027;
    border-color: #41a027;
}

.text_1 {
    color: var(--dark_blue);
}

/* Navbar */
/* #mainNav {
    background-color: var(--hijau);
} */

.navbar-toggler {
    color: var(--dark_blue);
}

#mainNav.navbar-shrink {
    color: var(--white);
    border-color: rgba(34, 34, 34, 0.1);
    background-color: var(--hijau);
}

#mainNav.navbar-shrink .navbar-nav>li>a,
#mainNav.navbar-shrink .navbar-nav>li>a:focus {
    color: var(--white);
}

#mainNav .navbar-nav>li>a,
#mainNav .navbar-nav>li>a:focus,
#mainNav .navbar-brand {
    color: var(--black);
}

#mainNav .navbar-brand:hover,
#mainNav .navbar-brand:active {
    opacity: 90%;
    color: var(--black);
}

#mainNav .navbar-nav>li>a.active {
    color: var(--dark_blue) !important;
}

#mainNav {
    font-family: konten;
}

#mainNav .navbar-nav>li>a {
    font-family: konten;
    color: var(--white);
    font-weight: 600;
}

/* Features */

.features {
    background-color: var(--kuning);
}

.feature-item h3 {
    color: var(--dark_blue);
    font-family: konten;
    font-weight: 600;
}

/* Placements */

.owl-item h4 {
    font-family: konten;
    font-weight: 600;
}

.owl-theme .owl-dots .owl-dot span {
    width: 1rem;
    height: 1rem;
    margin: 5px 7px;
    background: transparent;
    border: 3px solid var(--dark_blue);
    display: block;
    -webkit-backface-visibility: visible;
    transition: opacity .2s ease;
    border-radius: 50%;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--dark_blue);
}

/* Company */

#company {
    background-color: var(--hijau);
}

#company span {
    color: var(--white);
}

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

.own_logo {
    background-color: var(--kuning_own);
}

.gghype_logo {
    background-color: var(--pink_gghype);
}

/* Contact */
#contact {
    background: url("../img/pattern_Satuka_yellow.png") repeat right/15%, linear-gradient(to right, var(--bg_kuning_lighter), 65%, var(--bg_kuning_darker)) 100%;
    /* background-color: var(--kuning); */
}

#contact h2 {
    color: var(--dark_blue);
}

/* Footer */

footer {
    color: var(--gray);
    background-color: var(--black);
}

/* Else  */
/* .AreaNavigasiPage .btn-primary:hover,
.AreaNavigasiPage .btn-primary:focus,
.AreaNavigasiPage .btn-primary:not(:disabled):not(.disabled).active,
.AreaNavigasiPage .btn-primary:not(:disabled):not(.disabled):active,
.AreaNavigasiPage .show>.btn-primary.dropdown-toggle {
    background-color: white;
    border-color: white;
    color: black;
} */

/* .AreaNavigasiPage .btn {
    background-color: #fdcb51;
    border-color: #fdcb51;
    color: black;
} */

/* .AreaNavigasiPage .aktifNav {
    background-color: white;
    border-color: white;
} */

.recommended {
    background: var(--white) !important;
    background-color: var(--white) !important;
    color: black;
}

.recommended h4 {
    font-family: konten;
    font-weight: 600;
    color: var(--dark_blue);
}

.recommended a {
    color: var(--dark_blue);
    text-decoration: none;
}

.recommended a.btn {
    font-size: 1.3rem;
}

/* Game play */
.list_game {
    background: var(--white);
    /* background-color: white ; */
    color: var(--black);
}

.gameplay {
    background: var(--hijau);
    /* background-color: white ; */
    color: var(--black);
}

.gameplay a,
.list_game a {
    color: var(--dark_blue);
    text-decoration: none;
}

.gameplay a h4,
.list_game a h4 {
    font-family: konten;
    font-weight: 600;
}

.gameplay h3,
.list_game h3 {
    font-family: konten;
    font-weight: 600;
    color: var(--dark_blue);
}

.package .price>p {
    color: gray;
}

.package .ceklis span {
    color: lime;
}

.package .silang {
    color: gray;
}

.package .silang span {
    color: red;
}

.package .listpackage>div {
    background-color: #fff !important;
    color: black !important;
    border: 1px solid #fff;
}

.placements,
.package {
    background: var(--white) !important;
    background-color: var(--white) !important;
    color: var(--black);
}

.placements a {
    color: var(--dark_blue);
    text-decoration: none;
}

.placements span {
    color: var(--dark_blue);
}

.policy_redirect a {
    color: var(--black);
    text-decoration: underline;
}

.lang_option {
    color: var(--white);
}

.lang_option a {
    color: var(--white);
}

.lang_option a.active2 {
    color: var(--dark_blue);
}

.nav-item {
    color: var(--dark_blue);
}

@media (min-width:1024px) and (orientation:portrait) {}

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

    header.masthead {
        position: relative;
        /* background-image: url("../img/pattern_Satuka_green.png"), linear-gradient(var(--hijau), var(--hijau)); W3C */
        background: url("../img/pattern_Satuka_green.png") repeat right/15%, linear-gradient(to bottom, var(--bg_hijau_darker), 50%, var(--bg_hijau_lighter));
        color: var(--black);
    }

    /*TABLET*/
    #mainNav {
        background-color: var(--kuning);
        color: var(--dark_blue);
    }

    #mainNav.navbar-shrink {
        border-color: rgba(34, 34, 34, 0.1);
        background-color: var(--kuning);
    }

    #mainNav .navbar-nav>li>a,
    #mainNav .navbar-nav>li>a:focus,
    #mainNav.navbar-shrink .navbar-nav>li>a,
    #mainNav.navbar-shrink .navbar-nav>li>a:focus {
        color: var(--dark_blue);
    }

    #contact {
        background: url("../img/pattern_Satuka_yellow.png") repeat right/15%, linear-gradient(to bottom, var(--bg_kuning_lighter), 65%, var(--bg_kuning_darker)) 100%;
        /* background-color: var(--kuning); */
    }
}

@media (max-width:767px) {
    header.masthead {
        position: relative;
        /* background-image: url("../img/pattern_Satuka_green.png"), linear-gradient(var(--hijau), var(--hijau)); W3C */
        background: url("../img/pattern_Satuka_green.png") repeat right/15%, linear-gradient(to bottom, var(--bg_hijau_darker), 50%, var(--bg_hijau_lighter));
        color: var(--black);
    }

    #mainNav {
        background-color: var(--kuning);
    }

    #mainNav.navbar-shrink {
        border-color: rgba(34, 34, 34, 0.1);
        background-color: var(--kuning);
    }

    #mainNav .navbar-nav>li>a,
    #mainNav .navbar-nav>li>a:focus,
    #mainNav.navbar-shrink .navbar-nav>li>a,
    #mainNav.navbar-shrink .navbar-nav>li>a:focus {
        color: var(--dark_blue);
    }

    #contact {
        background: url("../img/pattern_Satuka_yellow.png") repeat right/15%, linear-gradient(to bottom, var(--bg_kuning_lighter), 65%, var(--bg_kuning_darker)) 100%;
        /* background-color: var(--kuning); */
    }
}