:root {
    --first: #03776C;
    --second: #5DDAB2;
    --gold: #ffd700;
    --gold-light: #ffee7f;
    --gold-dark: #ffcc00;
    --silver: #c0c0c0;
    --silver-light: #dcdcdc;
    --silver-dark: #acacac;
}

@font-face {
    font-family: "Garet Heavy";
    src: url('../../layouts/fonts/Garet-Heavy.otf');
}

.font-garet {
    font-family: "Garet Heavy" !important;
}

.font-league-spartan {
    font-family: "League Spartan" !important;
}

@media (min-width: 992px) {
    .navbar.nav-light.nav-sticky {
        background: hsla(0,0%,100%,.9) !important;
        box-shadow: 0 20px 20px rgba(0,0,0,.06) !important;
    }

    .navbar.nav-light.nav-sticky::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        backdrop-filter: blur(5px);
    }
}

@media (min-width: 992px) {
    .navbar.nav-light .navbar-nav .nav-item .nav-link {
        color: #fff !important;
    }
    
    .navbar.nav-light.nav-sticky .nav-item .nav-link {
        color: #24272c !important;
    }
}

@media (max-width: 991px) {
    .navbar {
        background: hsla(0,0%,100%,.9) !important;
        box-shadow: 0 20px 20px rgba(0,0,0,.06) !important;
        backdrop-filter: blur(5px);
    }

    .navbar.nav-sticky::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        backdrop-filter: blur(5px);
    }

    /* hilangkan swiper */
    .swiper-slider-hero .swiper-container .swiper-button-prev, .swiper-slider-hero .swiper-container .swiper-button-next {
        display: none !important;
    }
}

.navbar-expand-lg .navbar-collapse a.btn {
    margin-bottom: 12px !important;
}

@media (min-width: 992px) {
.navbar-expand-lg .navbar-collapse a.btn {
    margin-bottom: 0px !important;
}
}

* {
    font-family: 'Comfortaa', sans-serif !important;
}

.navbar .navbar-nav .nav-item:active .nav-link, .navbar .navbar-nav .nav-item.active .nav-link {
    color: var(--first) !important;
}

.navbar .navbar-nav .nav-item .nav-link {
    font-size: 16px;
    text-transform: none !important;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
    text-decoration: underline !important;
}

@media (min-width: 992px) {
    .navbar.nav-light.nav-sticky .nav-item .nav-link:hover, 
    .navbar.nav-light.nav-sticky .nav-item .nav-link.active, 
    .navbar.nav-light.nav-sticky .nav-item .nav-link:active {
        color: var(--first) !important;
    }
}

.bg-overlay {
    background-color: rgba(22,28,45, 0.5) !important;
}

.swiper-slider-hero .swiper-container .swiper-button-prev:hover, .swiper-slider-hero .swiper-container .swiper-button-next:hover {
    background: var(--first) !important;
    border-color: var(--first) !important;
}

.btn-primary {
    background-color: var(--first) !important;
    border: 1px solid var(--first) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.focus {
    background-color: var(--second) !important;
    border: 1px solid var(--second) !important;
    /* color: #24272c !important; */
}

.btn-soft-primary {
    color: var(--second) !important;
    background-color: rgba(93, 218, 178, 0.1) !important;
    border-color: 1px solid rgba(93, 218, 178, 0.1) !important;
}

.btn-soft-primary:hover, .btn-soft-primary:focus, .btn-soft-primary:active, .btn-soft-primary.active, .btn-soft-primary.focus {
    background-color: var(--second) !important;
    border-color: var(--second) !important;
    /* color: #24272c !important; */
}

.text-primary {
    color: var(--first) !important;
}

.back-to-top {
    background: var(--first) !important;
}

.social-icon li a:hover {
    background-color: var(--second) !important;
    border-color: var(--second) !important;
}

.form-control:focus {
    border-color: var(--first) !important;
}

.table-primary tr th {
    border-color: #cce8e2 !important;
    background-color: #cce8e2 !important;
    color: var(--first) !important;
    border-radius: 20px 20px 0px 0px !important;
}

.table tbody tr td {
    font-size: 15px !important;
}

/* CUSTOM */

.border-gold {
    border-color: var(--gold) !important;
}

.border-silver {
    border-color: var(--silver) !important;
}

.my-radius {
    border-radius: 30px !important;
}

.my-hover {
    transform: translateY(0px);
    transition: all .3s ease-in-out;
}

.my-hover:hover {
    transform: translateY(-10px);
}

.my-button {
    background-color: transparent !important;
    border: 1px solid #FFF !important;
    color: #FFF !important;
}

.my-button:hover {
    border: 1px solid var(--second) !important;
    color: #FFF !important;
    box-shadow: none !important;
}

.my-bolder {
    font-weight: 800 !important;
}

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

.text-silver {
    /* color: #c0c0c0 !important; */
    /* background: linear-gradient(to bottom, #c0c0c0 80%, #fff 20%) !important; */
    background: linear-gradient(45deg, var(--silver) 0 60%, var(--silver-light) 70% 80%, var(--silver) 80% 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.text-gold {
    /* color: #ffd700 !important; */
    background: linear-gradient(45deg, var(--gold) 0 60%, var(--gold-light) 70% 80%, var(--gold) 80% 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

.my-btn-gold {
    background: var(--gold) !important;
    border: 1px solid var(--gold) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.my-btn-gold:hover {
    background: var(--gold-dark)  !important;
    border: 1px solid var(--gold-dark)  !important;
    color: #fff !important;
    /* background: linear-gradient(45deg, #ffd700 0 30%, #ffee7f 30% 50%, #ffd700 50% 100%) !important; */
    /* border: 1px solid #ffd700 !important; */
    /* color: #24272c !important; */
}

.my-btn-silver {
    background: var(--silver) !important;
    border: 1px solid var(--silver) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.my-btn-silver:hover {
    background: var(--silver-dark)  !important;
    border: 1px solid var(--silver-dark)  !important;
    color: #fff !important;
    /* background: linear-gradient(45deg, #ffd700 0 30%, #ffee7f 30% 50%, #ffd700 50% 100%) !important; */
    /* border: 1px solid #ffd700 !important; */
    /* color: #24272c !important; */
}

/* p.text-muted {
    font-size: 18px;
} */

body {
    font-size: 18px !important;
}