body {
    font-family: 'Kanit', sans-serif;
    color: #010400;
}

.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
}

.navbar-brand {
    font-weight: 800;
    color: #010400;
    font-size: 24px;
}

.container {
    max-width: 1430px;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
    font-weight: 700;
}

.btn {
    border-radius: 0;
    font-weight: 700;
}

.diamond {
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
    opacity: 70%;
}

.bg-primary {
    background-color: #2f80ed !important;
}

.bg-secondary {
    background-color: #9b51e0 !important;
}

.bg-warning {
    background-color: #f2c94c !important;
}

.bg-dark {
    background-color: #010400 !important;
}

.border-primary {
    border-color: #2f80ed !important;
}

.border-secondary {
    border-color: #9b51e0 !important;
}

.border-warning {
    border-color: #f2c94c !important;
}

.border-2 {
    border-width: 2px !important;
}

.hero-content-wrapper {
    position: relative;
    z-index: 2;
}

.hero-image {
    width: 100%;
    height: 95vh;
}

.hero-content-background {
    width: 30vh; 
    height: 60vh; 
    position: absolute;
    top: -110px; 
    right: 0; 
    z-index: -1;
}

.lead {
    font-size: 18px;
}

footer {
    color: white;
}

.d-xl-block {
    display: none !important;
}

.hero-background-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

@media only screen and (min-width: 770px) {
    .hero-content-background {
        width: 40vh;
        right: -24px;
    }
}

@media only screen and (min-width: 992px) {
    h1, h2 {
        font-size: 72px;
    }

    h3 {
        font-size: 48px;
    }

    #hero {
        height: 100vh;
    }
}

@media only screen and (min-width: 1600px) {
    .d-xl-block {
        display: block !important;
    }
}

@media only screen and (min-width: 2000px) {
    .hero-content-background {
        width: 30vh;
        height: 40vh;
    }

    #hero, .hero-image {
        height: 60vh;
    }
}