/*
Name: 			custom.css
Written by: 	http://www.shayvillestudio.com
Theme Version:	1
*/

.clearfix { clear: both;}

.bg-intro-01 { background-image: url(../img/slides/bg_banner_intro.jpg);}
.bg-intro-02 { background-image: url(../img/slides/bg_banner_intro2.jpg);}
.bg-intro-03 { background-image: url(../img/slides/bg_banner_intro3.jpg);}

.bg-banner-services { background-image: url(../img/bg_services.jpg);}
.bg-banner-testimoni { background-image: url(../img/bg_testimoni.jpg);}
.bg-banner-footer { background-image: url(../img/bg_footer.jpg);}

.bg-banner-nilai { background-image: url(../img/bg_nilai.jpg);}

.bg-banner-teras1 { background-image: url(../img/bg_teras1.jpg);}
.bg-banner-teras2 { background-image: url(../img/bg_teras2.jpg);}
.bg-banner-teras3 { background-image: url(../img/bg_teras3.jpg);}

.bg-carta-aliran-permohonan { background-image: url(../img/carta_aliran_permohon.jpg);}
.bg-carta-aliran-dana { background-image: url(../img/carta_aliran_dana.jpg); background-size:cover; height: 900px;}

.bg-pendaftaran-peribadi { background-image: url(../img/bg_login_user.jpg); height: 600px;}
.bg-pendaftaran-pembekal { background-image: url(../img/bg_login_vendor.jpg); height: 600px;}

@media (max-width: 575px) {

	.bg-intro-01 { background-image: url(../img/slides/bg_banner_intro_m.jpg);}
    .bg-intro-02 { background-image: url(../img/slides/bg_banner_intro2_m.jpg);}
    .bg-intro-03 { background-image: url(../img/slides/bg_banner_intro3_m.jpg);}

    .bg-banner-services { background-image: url(../img/bg_services_m.jpg);}
    .bg-banner-testimoni { background-image: url(../img/bg_testimoni_m.jpg);}
    .bg-banner-footer { background-image: url(../img/bg_footer_m.jpg);}

    .bg-banner-nilai { background-image: url(../img/bg_nilai_m.jpg); background-position: bottom;}

    .bg-banner-teras1 { background-image: url(../img/bg_teras1_m.jpg);}
    .bg-banner-teras2 { background-image: url(../img/bg_teras2_m.jpg);}
    .bg-banner-teras3 { background-image: url(../img/bg_teras3_m.jpg);}

    .bg-carta-aliran-permohonan { background-image: url(../img/carta_aliran_permohon_m.jpg);}
    .bg-carta-aliran-dana { background-image: url(../img/carta_aliran_dana.jpg); background-size:contain; height: 500px;}

    .bg-pendaftaran-peribadi { background-image: url(../img/bg_login_user.jpg); background-position: top; height: 400px;}
    .bg-pendaftaran-pembekal { background-image: url(../img/bg_login_vendor.jpg); background-position: top; height: 400px;}

}


/*
* Carousel
*/
.custom-carousel-box-shadow-1 {
    position: relative;
}

.custom-carousel-box-shadow-1:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 65%;
    height: 0px;
    box-shadow: 0 40px 40px 120px rgba(0, 0, 0, 0.03);
    transform: translate3d(-50%, -50%, 0);
    z-index: 0;
}

.custom-dots-style-1 .owl-dots,
.custom-dots-style-2 .owl-dots {
    margin-top: 30px !important;
}

.custom-dots-style-1 .owl-dots .owl-dot > span,
.custom-dots-style-2 .owl-dots .owl-dot > span {
    background: #ffffff !important;
    transition: ease all 300ms;
}

.custom-dots-style-1 .owl-dots .owl-dot.active > span,
.custom-dots-style-2 .owl-dots .owl-dot.active > span {
    background: var(--secondary) !important;
    width: 18px;
}

@media (max-width: 991px) {
    .custom-dots-style-2 .owl-dots {
            transform: translate3d(0, -50px, 0);
    }
}

.custom-carousel-vertical-center-items .owl-stage {
    display: flex;
    align-items: center;
}

.custom-nav-style-1 .owl-nav {
    left: 50%;
    width: 105%;
    transform: translate3d(-50%, -50%, 0);
}

.owl-carousel.carousel-center-active-item .owl-item {
    opacity: 0.4;
}

/*
* Carousel Slider Navigation
*/
[data-carousel-navigate] {
	cursor: pointer;
}

[data-carousel-navigate] p {
	line-height: 26px !important;
}

@media (min-width: 992px) {
	[data-carousel-navigate].active:before {
			content: "";
			position: absolute;
			display: block;
			top: 0;
			left: 0;
			height: 3px;
			width: 100%;
	}
}

[data-carousel-navigate]:hover h4,
[data-carousel-navigate].active h4 {
	color: var(--secondary) !important;
	/* border: 4px solid var(--primary); */
}

[data-carousel-navigate]:hover:before,
[data-carousel-navigate].active:before {
	background-color: var(--secondary) !important;
	
}