/****** Desktop ******/
/****** Font Face ******/
@font-face { font-family: 'slick'; src: url(../fonts/slick.ttf); }
@font-face { font-family: 'Open Sans'; font-weight: 300; src: url(../fonts/OpenSans-Light.ttf); }
@font-face { font-family: 'Open Sans'; font-weight: 400; src: url(../fonts/OpenSans-Regular.ttf); }
@font-face { font-family: 'Open Sans'; font-weight: 500; src: url(../fonts/OpenSans-Semibold.ttf); }
@font-face { font-family: 'Open Sans'; font-weight: 600; src: url(../fonts/OpenSans-Bold.ttf); }
/*-------------------------------------------*/

/****** * ******/
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; font-weight: 500; }
a, p { font-family: 'Open Sans', sans-serif; font-weight: 400; }
a, button { outline: none; }
ul li, ol li { list-style-type: none; }
/*-------------------------------------------*/

/****** Header / Menu ******/
.pinjaman-top-bar { background: #000000; }
ul.pk-menu { display: none; }
.header-left img { width: 35%; }
.header-right { text-align: right; }
.header-right a { color: #ffffff; font-size: 16px; font-weight: bold; text-transform: uppercase; }
.pinjaman-desktop-menu { position: relative; }
.desktop-menu { background: #0000005e; padding: 1rem 0; position: absolute; z-index: 1; }
.desktop-menu ul { margin: 0; text-align: center; }
.desktop-menu ul li { display: inline-block; margin: 0 1rem; }
.desktop-menu ul li a { color: #ffffff; font-size: 14px; font-weight: bold; text-transform: uppercase; }
.desktop-menu ul li a.active { background: #ffffff; color: #000000; padding: 5px; }
/*-------------------------------------------*/

/****** Slider ******/
.pinjaman-slide { background-image: url(../images/pinjaman-koperasi-misi-2.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; height: 600px; }
.#myVideo { width: 100%; }
/*-------------------------------------------*/

/****** Short Desc / Gov Depart / Bank ******/
.short-desc { background: #000000; text-align: center; }
.short-desc h2 { color: #ffffff; font-size: 28px; font-weight: bold; padding: 1rem 0; margin: 0; }
.all-brand { padding: 1rem 0; text-align: center; }
.all-brand > div { margin: 0 auto; }
/*-------------------------------------------*/

/****** About Us ******/
.aboutus-bg { background: #e1fffd; padding: 2rem 0; }
.aboutus-logo img { margin: auto; width: 90%; }
.aboutus-logo-p p { font-size: 15px; line-height: 1.5; }
p.about-contact { font-weight: 500; }
p.about-contact a { font-weight: 500; }
/*-------------------------------------------*/

/****** Our Mission ******/
.mission-bg { background: linear-gradient(to top, #00000073, #00000073), url(../images/pinjaman-koperasi-misi.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 2rem 0; }
.mission-title h2 { color: #ffffff; font-size: 60px; font-weight: 600; text-transform: uppercase; }
.mission-title h3 { color: #ffffff; font-size: 25px; font-weight: 600; text-transform: uppercase; }
.mission-desc p { color: #ffffff; font-size: 15px; font-weight: 500; line-height: 1.5; margin-bottom: 10px; }
/*-------------------------------------------*/

/****** Apply Now ******/
.apply-bg { background: linear-gradient(to left, #000000, #000000, #ffffff8c), url(../images/pinjaman_koperasi_semak_kelayakan-1.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; padding: 2rem 0; text-align: center; }
.apply-now { text-align: center; }
.button-8 { border: 2px solid #a71515; border-radius: 30px; box-sizing: border-box; cursor: pointer; margin: auto; overflow: hidden; padding: 0 2rem; position: relative; text-align: center; width: 30% }
a .button-8 p { color: #fff; font-family: 'Open Sans', sans-serif; font-size: 20px; font-weight: 700; line-height: 50px; margin: 0; position: relative; transition: all .3s ease; text-transform: uppercase; z-index: 2; }
.eff-8 { border: 70px solid #a71515; box-sizing: border-box; left: 0; position: absolute; right: 0; transition: all .3s ease; top: 0; z-index: 1; }
.button-8:hover { border: 2px solid #ffffff; }
.button-8:hover .eff-8 { border: 0px solid #ffffff; }
.button-8:hover a { color :#ffffff; }
.payslip { background: #e4fefd; text-align: center; }
.payslip h2 { font-size: 28px; font-weight: bold; padding: 1rem 0; margin: 0; }
/*-------------------------------------------*/

/****** Information ******/
.information { padding: 2rem 0; }
.info-title > a:focus, .info-title > a[aria-selected='true'] { background: #a71515; color: #ffffff; font-size: 18px; font-weight: 700; }
.info-title > a:hover { background: #a71515; color: #ffffff; }
.info-title a { color: #000000; font-size: 18px; font-weight: 700; }
.info-content { border: 1px solid #e6e6e6; }
.info-panel h5 { font-size: 18px; font-weight: 600; margin-bottom: 10px; }
.info-panel p { font-size: 15px; }
.info-panel p a { font-weight: 600; }
.info-panel ol li { list-style-type: decimal; }
.info-panel ul li { list-style-type: lower-latin; margin-bottom: 5px; }
.info-panel ul li p { margin-bottom: 5px; }
/*-------------------------------------------*/

/****** Brand Details ******/
.brand-details-bg { padding: 2rem 0; }
.brand-bg { background: #e6ffffb5; margin-bottom: 1rem; padding: 10px 5px; }
.brand-title h2 { font-weight: bold; text-align: left; }
.brand-details img { float: left; }
.kobeta-details { text-align: center; }
.kobeta-details img { float: none; }
.brand-details p { font-size: 15px; line-height: 1.5; }
.kobeta-details p { font-size: 15px; line-height: 1.5; margin-bottom: 10px; text-align: left; }
.brand-details ul li { list-style-type: disc; }
.kobeta-details ul li { list-style-type: disc; text-align: left; }
.brand-details ul li p { margin-bottom: 7px; }
.brand-apply { background: #77777736; padding: 20px 0; }
.kobeta-bg-blue { background: #e8fcff78; padding: 10px; }
.kobeta-bg-grey { background: #cccccc2e; padding: 10px; }
.pbb-details { padding: 0; }
/*-------------------------------------------*/

/****** Contact Form ******/
.submittion-form { padding: 2rem 0; }
.contact-form h2 { text-align: center; }
form h3 { margin-bottom: 1rem; text-align: center; }
label { display: inline-block; margin: auto; padding: 0 10px; width: 49.7%; }
label p, .message p { font-size: 16px; margin-bottom: 5px; }
.document { width: auto; }
.submit { text-align: center; }
.submit input { background: #cccccc; cursor: pointer; font-weight: bold; padding: 10px 20px; text-transform: uppercase; }
.contact-form-payslip { margin-bottom: 2rem; }
.contact-form-payslip .payslip h2 { font-size: 20px; }
.summited-file input { border: 1px solid #cccccc; cursor: pointer; margin-bottom: 5px; padding: 10px; }
/*-------------------------------------------*/

/****** Thank You ******/
.thank-you-slide { height: 400px; }
.thank-you { padding: 3rem 0 5rem; text-align: center; }
/*-------------------------------------------*/

/****** Privacy Policy ******/
.privacy p a { font-weight: bold; }
/*-------------------------------------------*/

/****** Footer ******/
footer { background: #000000; text-align: center; }
footer p, footer a { color: #ffffff; font-size: 14px; font-weight: bold; margin-bottom: 0;  text-transform: uppercase; }
.footer-bg { background: #000000; padding: 1rem 0; }
.site-maps ul li { display: inline-block; width: 40%; }
.site-maps ul li a p, .contact p { color: #FFFFFF; font-size: 16px; font-weight: bold; margin-bottom: 15px; }
.contact ul li p { text-transform: uppercase; }
.contact ul, .pp ul { margin: 0; text-align: center; }
.contact ul li, .pp ul li { padding: 0 5px; }
.contact ul li p a, .pp ul li p a { color: #ffffff; font-size: 16px; font-weight: bold; }
p.whatsapp a { background: #25D366; border-radius: 5px; padding: 5px 10px; text-transform: uppercase; }
footer div p { padding: 15px 0; }
/*-------------------------------------------*/

/****** tawaran ******/
.content {  
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  padding: 10px;
}
/*-------------------------------------------*/

/****** Responsive ******/
@media screen and (min-width: 40em) {
    .title-bar { display: none; }
}

@media screen and (max-width: 1023px) {
    .pinjaman-slide { height: 450px; }
    .header-left img { width: 40%; }
    .desktop-menu ul li a { font-size: 16px; }
    .short-desc h2, .payslip h2 { font-size: 20px; }
    .site-maps ul { margin: 0; text-align: center; }
    .site-maps ul li { margin: 0 5px; width: auto; }
    .contact ul li, .pp ul li { display: inline-block; }
}

@media screen and (max-width: 991px) {
    .header-left img { width: 50% }
    .header-right a, .desktop-menu ul li a { font-size: 14px; }
    .desktop-menu ul li { margin: 0 5px; }
    .brand-details-bg { padding: 2rem 10px; }
}

@media screen and (max-width: 800px) {
    .button-8 { width: 40% }
    .button-8 a { font-size: 16px; }
}

@media screen and (max-width: 639px) {
    ul.pk-menu li a.active { background: #ffffff; color: #000000; }
    .pinjaman-top-bar { display: none; }
    ul.pk-menu { display: block; }
    .desktop-menu { display: none; }
    .title-bar-title img { width: 15%; }
    .mobile-hamburger-menu { text-align: right; }
    .mobile-menu { position: relative; }
    ul.pk-menu { background: #000000d9; height: 35vh; margin: 0; padding: 2rem 10px; position: absolute; text-align: center; width: 100%; z-index: 1; }
    ul.pk-menu li { padding: 5px 0; }
    ul.pk-menu li a { color: #ffffff; font-size: 20px; font-weight: bold; padding: 5px 10px; text-transform: uppercase; }
    .pinjaman-slide { height: 300px; }
    .short-desc h2, .payslip h2 { font-size: 14px; padding: 10px 0; }
    .aboutus-logo { display: none; }
}

@media screen and (max-width: 500px) {
    ul.pk-menu { height: 65vh; padding: 4rem 10px; }
    .pinjaman-slide { height: 250px; }
    .button-8 { width: 80%; }
    .site-maps ul li a p, .contact p, .contact ul li p a, .pp ul li p a, footer p, footer a { font-size: 12px; }
}

#myVideo { 
    width: 100%; 

}

#myBtn {
  width: 200px;
  font-size: 18px;
  padding: 10px;
  border: none;
  background: #000;
  color: #fff;
  cursor: pointer;
}

#myBtn:hover {
  background: #ddd;
  color: black;
}