body{
    background-image: url('img/bg.jpg');
    background-size: cover;
    background-position: 0 -250px;
}

.hero-text {
    margin-top: 140px;
    margin-bottom: 20px;
}

.hero-text h1, .hero-text span{
    color: #123C69;
}

.hero-text .fs-5{
    color: #AC3B61;
}

.hero-text p i{
    background-color: #EDC7B7;
    color: #AC3B61;
    padding: 5px;
    border-radius: 20px;
}

#aduan .modal-header, #login .modal-header{
    background-color: #123C69;
    color: #fff;
}

.btn{
    padding: 10px 30px;
    font-weight: 600;
}

.btn-primary {
    background-color: #123C69;
    border: 2px solid#123C69;
}

.btn-outline-secondary{
    color: #123C69;
    border: 2px solid #123C69;
}

.btn:focus,
.btn:hover {
    background-color: #EDC7B7;
    border: 2px solid #123C69;
    transition: 0.5s;
    color: #123C69;
    box-shadow: none;
}

.success-box {
	padding: 20px;
	border: 1px dashed #123C69;
}

.success-box i {
	border-radius: 50%;
	width: 70px;
	height: 70px;
	line-height: 70px;
}

@media only screen and (max-width: 479px) {
    body{
        background-position: 0 -850px;
        background-size: auto;
        background-repeat: no-repeat;
    }
    .logo{
        position: fixed;
        width: 200px;
        left: 10px;
        bottom: 10px;
    }
}

@media only screen and (max-width: 767px) {
    body{
        background-position: 0 -850px;
        background-size: auto;
        background-repeat: no-repeat;
    }
    .logo{
        position: fixed;
        width: 200px;
        left: 10px;
        bottom: 10px;
    }
}