@import url('fonts.css');
@import url('../dist/bootstrap/css/bootstrap.min.css');
@import url('../dist/owlcarousel/css/owl.theme.default.min.css');
@import url('../dist/owlcarousel/css/owl.carousel.min.css');
:root { --primary-font: 'Open Sans', sans-serif, Arial, Helvetica; --yellow: #eec756; --light-yellow: #ffd667; --off-white: #fff9e5; --gray: #181818; --gray-1: #0a0a0a; --light-gray: #8b8b8b; --light-gray-1: #8f8f8f;  }
body { background-color: var(--bs-black); color: var(--bs-white); font-family: var(--primary-font); font-weight: 400; overflow-x: hidden; position: relative; }
a { color: var(--blue); }
a, a:hover { text-decoration: none; }
a:focus { outline: none; }
*:focus { outline: none; }
button:active, button:focus, .btn:active, .btn:focus { box-shadow: none !important; outline: none !important; }
.img-responsive, .navbar-brand > img { display: inline-block; }
img { display: inline-block; height: auto; max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--yellow); font-family: var(--primary-font); font-weight: 700; text-transform: capitalize; }
h2 { font-size: 23px; }
p, li { color: var(--bs-white); font: 400 14px/1.5 var(--primary-font); overflow-wrap: break-word; word-wrap: break-word; }
.clearfix { clear: both; margin: 0px; padding: 0px; }

.navbar { background-color: var(--bs-black); border-bottom: 1px solid var(--light-yellow); }
.navbar .navbar-nav .nav-link { color: var(--yellow); margin-left: 35px; text-transform: capitalize; }
.navbar .btn-warning { font-size: 14px; line-height: 18px; margin-left: 10px !important; text-transform: capitalize; width: 115px; }
.flag img { margin-left: 10px; }

.offcanvas { display: none; }

.banner { background: url("../images/gold_bg.jpg") no-repeat right top / contain; clear: both; padding: 5% 0px 8%; width: 100%; }
.banner h1 { font-size: 27px; margin-top: 5px; text-transform: uppercase; }
.banner h1 span { color: var(--bs-white); font-size: 26px; }
.banner p { color: var(--off-white); text-transform: uppercase; }
.banner .btn { font-weight: 800; line-height: 26px; width: 145px; }

.btn-warning { background: rgb(167,128,24); background: linear-gradient(90deg, rgba(167,128,24,1) 0%, rgba(255,214,103,1) 50%, rgba(167,128,24,1) 100%); border-color: var(--light-yellow); border-radius: 30px; color: var(--bs-black); font-size: 16px; font-weight: 800; text-transform: uppercase; }

.about h4 { font-weight: 21px; text-transform: uppercase; }
.about ul { list-style: none; margin: 0px 0px; padding: 0px; }
.about ul li { background: url("../images/dash.png") no-repeat left 10px; padding-left: 15px; }
.about hr { border-color: var(--yellow); opacity: 1; }

.tier { background-color: var(--gray); border: 1px solid var(--yellow); border-radius: 17px; clear: both; font-size: 13px; padding: 30px 30px; width: 100%; }
.tier h4 { color: var(--bs-white); font-size: 17px; font-weight: 700; line-height: 17px; text-transform: uppercase; }
.tier h4 span { color: var(--light-gray); font-size: 13px; font-weight: 600; text-transform: capitalize; }
.tier .col-2 { color: var(--yellow); }
.tier .row:nth-child(even) .col-6 { color: var(--yellow); }

.feature { clear: both; padding: 5% 7%; text-align: center; width: 100%; }
.feature p { font-size: 17px; font-weight: 600; margin-top: 1rem; text-transform: uppercase; }
.feature .col:nth-child(2n+2) p { color: var(--yellow); }

.map { clear: both; padding: 20px 0px 5%; text-align: center; width: 100%; }
.map h2 { text-transform: uppercase; }
.map p { font-weight: 600; text-transform: uppercase; }

.partner { background-color: var(--gray); clear: both; padding: 3% 0px; text-align: center; width: 100%; }
.partner h2 { text-transform: uppercase; }

.contact { background: url("../images/cnt_bg.jpg") no-repeat center top / cover; clear: both; padding: 5% 0px; width: 100%; }
.contact h2 { text-transform: uppercase; }
.contact p { font-weight: 600; text-transform: uppercase; }
.contact .form-label { color: var(--bs-white); font: 400 14px var(--primary-font); }
.contact .form-control { color: var(--bs-black); font: 400 14px var(--primary-font); line-height: 36px; }
.contact textarea.form-control { height: 95px; }
.contact .btn-primary { background: rgb(167,128,24); background: linear-gradient(90deg, rgba(167,128,24,1) 0%, rgba(255,214,103,1) 50%, rgba(167,128,24,1) 100%); border: none; color: var(--bs-black); font-size: 16px; font-weight: 600; line-height: 36px; text-transform: capitalize; }

.copy { background: rgb(167,128,24); background: linear-gradient(90deg, rgba(167,128,24,1) 0%, rgba(255,214,103,1) 50%, rgba(167,128,24,1) 100%); clear: both; color: var(--bs-black); font-size: 14px; font-weight: 600; padding: 5px 12px; text-align: center; width: 100%; }

.wrapper { background: url("../images/log_bg.jpg") no-repeat top center / 100%; clear: both; height: 100%; min-height: 100vh; width: 100%; }
.signin { background-color: #0a0a0a; border-radius: 15px; clear: both; margin-top: 20%; padding: 40px 50px; width: 100%; }
.signin p { font-size: 15px; font-weight: 600; text-transform: capitalize; }
.signin p span { color: var(--yellow); }
.signin .form-control { background-color: var(--gray-1); border-color: var(--yellow); color: var(--bs-white); font: 400 15px var(--primary-font); line-height: 24px; text-indent: 15px; }
.signin .form-control::placeholder { color: var(--light-gray-1); }
.signin .form-control:focus, .signin .form-check-input:focus { box-shadow: none; }
.signin .form-check-label { color: var(--light-gray-1); font: 400 15px var(--primary-font); }
.signin .form-check-input { background-color: var(--gray-1); border-color: var(--yellow); }
.signin .form-check-input:checked { background-color: var(--gray-1); border-color: var(--yellow); }
.signin .btn-primary { background: rgb(167,128,24); background: linear-gradient(90deg, rgba(167,128,24,1) 0%, rgba(255,214,103,1) 50%, rgba(167,128,24,1) 100%); border: none; color: var(--bs-black); font-size: 15px; font-weight: 600; line-height: 26px; text-transform: capitalize; }

.testimonial { clear: both; padding: 5% 0px; width: 100% }
.owl-carousel .owl-stage-outer { padding: 4% 0px; }
.owl-carousel .owl-item img { margin: 0px auto; width: 57px; }
.testimonial .item { padding: 25px 12px; text-align: center; height: 215px; width: 270px; }
.testimonial .item h5 { color: var(--yellow); font-size: 12px; font-weight: 600; }
.testimonial .item p { font-size: 11px; font-weight: 600; }
.owl-carousel .owl-item { background-color: #121212; border-radius: 20px; -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); transition: all 0.3s ease-in-out; }
.owl-carousel .owl-item.center { background-color: #585858; border-radius: 20px; -webkit-transform: scale3d(1.3, 1.3, 1); transform: scale3d(1.3, 1.3, 1); z-index: 1; }
.owl-theme .owl-dots .owl-dot span { background-color: #121212; border: 2px solid #121212; }
.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #ffffff; border: 2px solid #121212; }

/*-------------------
    Media Query
---------------------------*/

@media only screen and (max-width: 767px) {
    .wrapper{background: url("../images/aseanmap3.png") no-repeat top center / 100%; }
    h2 { font-size: 16px; }
    p, li { font-size: 11px; }
    .navbar-brand { margin: 0px auto; max-width: 88px; }
    .navbar .btn { font-size: 12px; line-height: 15px; margin: 0px !important; width: 75px }
    .navbar .navbar-nav .nav-link { margin: 0px; }
    .navbar-toggler .navbar-toggler-icon { background-image: url("../images/toggler.png"); }
    .offcanvas { background-color: var(--bs-black); display: block; width: 100%; }
    .offcanvas.offcanvas-start{ max-width: 100%; width: 100%; }
    .offcanvas img { max-width: 130px;; }
    .offcanvas-header { display: block; text-align: center; }
    .offcanvas-header .btn-close { border: 1px solid var(--bs-white); border-radius: 100%; filter: brightness(0) invert(1); position: absolute; right: 25px; top: 25px; z-index: 1; }
    .offcanvas-body ul { list-style: none; margin: 0; padding: 0; }
    .offcanvas-body ul li { border-bottom: 1px solid var(--yellow); text-align: center; }
    .offcanvas-body ul li a { color: var(--bs-white); display: block; font-size: 15px; font-weight: 700; padding:1rem .5rem; text-transform: uppercase; }
    .offcanvas-body .dropdown { position: relative; width: 160px; }
    .offcanvas-body .dropdown img { margin-right: 5px; width: 20px; }
    .offcanvas-body .btn-outline { background-color: var(--bs-black); border: 1px solid var(--yellow); color: var(--bs-white); font-size: 15px; padding: 1rem .5rem; text-transform: uppercase; width: 100%!important; }
    .offcanvas-body .dropdown-menu li:last-child { border: inherit; }
    .offcanvas-body .dropdown-item { color: var(--bs-black); padding: .5rem .5rem; text-align: left; }
    .flag img { margin-left: 5px; }
    .banner { background: url("../images/ban_sm_bg.jpg") no-repeat top center / 100%; text-align: center; }
    .banner h1 { font-size: 15px; }
    .banner h1 span { font-size: 15px; }
    .banner p { font-size: 11px; }
    .banner .btn { font-size: 12px; line-height: 15px; width: 95px }
    .about .col-auto { margin: 0px auto 15px; }
    .about .col { flex-basis: auto; }
    .about h4 { font-size: 15px; text-align: center; }
    .about .text-end { text-align: center !important; }
    .about .btn { font-size: 12px; }
    .tier { font-size: 11px; }
    .feature .col { flex: auto; width: 50%; }
    .feature p { font-size: 11px; }
    .contact { background: url("../images/cnt_sm_bg.jpg") no-repeat top center / 100% 100%; }
    .contact .form-label { font-size: 11px; }
    .contact .form-control { line-height: 20px; }
    .contact p, .contact .mb-3 { margin-bottom: .275rem !important; }
    .contact textarea.form-control { height: 70px; }
    .signin { margin-top: 60%; }
    .owl-carousel .owl-item.center { -webkit-transform: scale3d(1.0, 1.0, 1); transform: scale3d(1.0, 1.0, 1); }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .navbar-brand { margin: 0px auto; max-width: 88px; }
    .navbar .btn { font-size: 12px; line-height: 15px; margin: 0px !important; width: 75px }
    .navbar .navbar-nav .nav-link { margin: 0px; }
    .navbar-toggler .navbar-toggler-icon { background-image: url("../images/toggler.png"); }
    .offcanvas { background-color: var(--bs-black); display: block; width: 100%; }
    .offcanvas.offcanvas-start{ max-width: 100%; width: 100%; }
    .offcanvas img { max-width: 130px;; }
    .offcanvas-header { display: block; text-align: center; }
    .offcanvas-header .btn-close { border: 1px solid var(--bs-white); border-radius: 100%; filter: brightness(0) invert(1); position: absolute; right: 25px; top: 25px; z-index: 1; }
    .offcanvas-body ul { list-style: none; margin: 0; padding: 0; }
    .offcanvas-body ul li { border-bottom: 1px solid var(--yellow); text-align: center; }
    .offcanvas-body ul li a { color: var(--bs-white); display: block; font-size: 15px; font-weight: 700; padding:1rem .5rem; text-transform: uppercase; }
    .offcanvas-body .dropdown { position: relative; width: 160px; }
    .offcanvas-body .dropdown img { margin-right: 5px; width: 20px; }
    .offcanvas-body .btn-outline { background-color: var(--bs-black); border: 1px solid var(--yellow); color: var(--bs-white); font-size: 15px; padding: 1rem .5rem; text-transform: uppercase; width: 100%!important; }
    .offcanvas-body .dropdown-menu li:last-child { border: inherit; }
    .offcanvas-body .dropdown-item { color: var(--bs-black); padding: .5rem .5rem; text-align: left; }
    .banner { background-size: 427px; }
    .feature { padding: 5% 0% }
    .feature p { font-size: 14px; }
    .contact { background-size: 100% 100%; }
    .signin { padding: 20px 15px; }
}

@media only screen and (min-width: 992px) and (max-width: 1180px) {
    .navbar .navbar-nav .nav-link { margin-left: 20px; }
    .feature p { font-size: 14px; }
    .contact { background-size: 100% 100%; }
    .signin { padding: 35px 25px; }
}