/* ---------------------------------------------------
Google Fonts
--------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

.montserrat-<uniquifier> {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

.roboto-<uniquifier> {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

.montserrat-600 {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.roboto-regular {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 23px;
}

.roboto-sm {
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 14px;
}





.bg-green    {
    background-color: #6cc82a !important;
    color: #fff !important;
}
a.bg-green:hover,
a.bg-green:focus,
button.bg-green:hover,
button.bg-green:focus    {
    background-color: #62b725 !important;
    color: #fff !important;
}

.bg-navy    {
    background-color: #003061 !important;
    color: #fff !important;
}
a.bg-navy:hover,
a.bg-navy:focus,
button.bg-navy:hover,
button.bg-navy:focus    {
    background-color: #084482 !important;
    color: #fff !important;
}

.bg-lights    {
    background-color: #efefef !important;
    color: #333 !important;
}
a.bg-lights:hover,
a.bg-lights:focus,
button.bg-lights:hover,
button.bg-lights:focus    {
    background-color: #eaeaea !important;
    color: #333 !important;
}

.text-navy  {
    color: #003061 !important;
}

.text-green  {
    color: #6cc82a !important;
}


/* ---------------------------------------------------
HERO AREA (persis seperti desain)
--------------------------------------------------- */
.hero-box {
    background: dodgerblue;
    background: url(../img/header-img-03.png) top center no-repeat;
    background-size: 100% 100%;
    height: 574px;
}
.hero-box-2 {
    background: dodgerblue;
    background: url(../img/header-img-04.png) top center no-repeat;
    background-size: 100% 100%;
    height: 574px;
}

/* ---------------------------------------------------
CONTENT
--------------------------------------------------- */
.section-title {
    color: #333;
    font-size: 20px;
}

.text-justify   {
    text-align: justify;
}


/* ---------------------------------------------------
CONTACT
--------------------------------------------------- */
.contact-section {
    background: dodgerblue;
}

.phone-number {
    font-size: 34px;
}

/* ---------------------------------------------------
RESPONSIVE
--------------------------------------------------- */
@media (max-width: 992px) {
    .overlay-diagonal {
        display: none;
    }
    .hero-image {
        border-radius: 0 0 22px 22px;
        margin-top: 20px;
    }
    .hero-year {
        font-size: 48px;
    }
    .hero-title {
        font-size: 32px;
    }
}

@media (max-width: 556px) {
    .hero-box {
        background: dodgerblue;
        background: url(../img/header-img-03.png) top center no-repeat;
        background-size: 100% 100%;
        height: 180px;
    }
    .hero-box-2 {
        background: dodgerblue;
        background: url(../img/header-img-04.png) top center no-repeat;
        background-size: 100% 100%;
        height: 180px;
    }
    h1.display-1 {
        font-size: 24px;
    }
    h1.display-2 {
        font-size: 22px;
        margin-top: 15px;
    }
    .roboto-regular {
        font-size: 18px !important;
    }
}