/*
Theme Name: MLDesign
Theme URI: http://evoweb.com.my/
Author: Evoweb
Author URI: http://evoweb.com.my/
Description: MLDesign is based on customize styling, bootstrap and jQuery.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: mldesign
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

MLDesign is based on customize styling, bootstrap and jQuery.
*/
@font-face {
    font-family: 'KozGoPr6N';
    src: url(fonts/KozGoPr6N-Regular.otf) format('opentype');
}
@font-face {
    font-family: 'RedHatDisplay';
    src: url(fonts/RedHatDisplay.ttf) format('truetype');
}
:root {
    --primary-white: #FAFAFA;
    --primary-grey: #BABABA;
    --primary-black: #000;
    --font-KozGoPr6N: 'KozGoPr6N';
    --font-RedHatDisplay: 'RedHatDisplay';
    --fw-extra-light: 200;
    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semi-bold: 600;
    --fw-bold: 700;
    --fw-extra-bold: 800;
    --fw-black: 900;
}
* {
    box-sizing: border-box;
    position: relative;
}
html, body {
    padding: 0;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    color: var(--primary-white);
    background: var(--primary-black);
    font-family: var(--font-RedHatDisplay);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.1em;
}
#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.site-main {
    flex: 1;
}
h1, h2, h3, h4, h5, h6, p, a, span, li, input, textarea, select {
    margin-bottom: 0;
    color: var(--primary-white);
}
h1, h2, h3, h4, h5, h6 {
    letter-spacing: 0.2em;
}
h1 > a, h1 > span, h2 > a, h2 > span, h3 > a, h3 > span, h4 > a, h4 > span, h5 > a, h5 > span, h6 > a, h6 > span, a > span, button > span {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    color: inherit;
}
a:hover {
    color: var(--primary-grey)
}
h1 > a, h2 > a, h3 > a, h4 > a, h5 > a, h6 > a {
    text-decoration: none;
}
.text-white {
    color: var(--primary-white);
}
.text-grey {
    color: var(--primary-grey);
}
.font-KozGoPr6N {
    font-family: var(--font-KozGoPr6N);
}
.font-RedHatDisplay {
    font-family: var(--font-RedHatDisplay);
}
.fw-extra-light {
    font-weight: var(--fw-extra-light);
}
.fw-light {
    font-weight: var(--fw-light);
}
.fw-regular {
    font-weight: var(--fw-regular);
}
.fw-medium {
    font-weight: var(--fw-medium);
}
.fw-semi-bold {
    font-weight: var(--fw-semi-bold);
}
.fw-bold {
    font-weight: var(--fw-bold);
}
.fw-extra-bold {
    font-weight: var(--fw-extra-bold);
}
.fw-black {
    font-weight: var(--fw-black);
}
.ms-auto, .mx-auto {
    margin-left: auto;
}
.h-auto {
    height: auto;
}
.h-100 {
    height: 100%;
}
.btn {
    position: relative;
}
.btn, .btn:hover, .btn:focus, .btn:visited, .accordion-button, .accordion-button:hover, .accordion-button:focus, .accordion-button:visited {
    box-shadow: none;
    border: none;
}
.btn.btn-outline {
    padding: 0;
    border: none;
	color: var(--primary-white);
}
.btn.btn-outline::after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 1px;
    left: 0;
    bottom: -1px;
    background: var(--primary-white);
	transform-origin: center left;
	transition: all 0.35s ease;
}
.btn.btn-outline:hover::after {
	width: 100%;
}
.btn:hover {
    opacity: 0.85;
}
.btn.btn-box {
    padding: 16px 20px;
    border: 1px solid var(--primary-white);
    color: var(--primary-white);
    line-height: 1;
    border-radius: 0;
}
.btn.btn-box.active {
    pointer-events: none;
}
.btn.btn-box.active, .btn.btn-box:hover {
    background: var(--primary-white);
    color: var(--primary-black);
}
.btn.btn-box:hover {
    opacity: 0.85;
}
.divider {
    position: relative;
    width: 100%;
    height: 1px;
    padding: 25px 0;
}
.divider.size-lg {
    padding: 70px 0;
}
.divider::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    background: var(--primary-white);
    width: 100%;
    height: 1px;
    transform: translateY(-50%);
}
.swiper {
	padding-bottom: 2px;
}
.flex-section-row {
    gap: 50px;
}
#masthead {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 101;
    transition: all 0.3s ease;
}
#masthead, .home.scrolled #masthead {
    background: var(--primary-black);
}
.home #masthead {
    background: linear-gradient(0deg, transparent, rgba(0,0,0,0.4) );
}
.navbar .navbar-inner {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
}
.navbar .navbar-nav .nav-link sup {
    color: var(--primary-grey);
}
.navbar .navbar-nav .nav-link {
    display: block;
    padding: 0;
    color: var(--primary-white);
    font-weight: var(--fw-regular);
}
.navbar .navbar-nav .nav-item .nav-link::after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 1px;
    background: var(--primary-white);
    left: 50%;
    bottom: -1px;
    transform: translate(-50%, 0);
    opacity: 0;
    visibility: hidden;
    transform-origin: center center;
    transition: all 0.3s ease;
}
.navbar .navbar-nav .nav-item.site-logo .nav-link::after {
    display: none;
}
.navbar .navbar-nav .menu-item.current-menu-item .nav-link {
    pointer-events: none;
}
.navbar .navbar-nav .nav-link:hover::after, .navbar .navbar-nav .menu-item.current-menu-item .nav-link::after {
    width: 100%;
    opacity: 1;
    visibility: visible;
}
.hamburger .hamburger-inner, .hamburger .hamburger-inner:after, .hamburger .hamburger-inner:before, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner:after, .hamburger.is-active .hamburger-inner:before {
    background: var(--primary-white);
}
.navbar .navbar-toggler {
    padding: 0;
}
.navbar .navbar-toggler, .navbar .navbar-toggler:hover, .navbar .navbar-toggler:focus, .navbar .navbar-toggler:visited {
    border: none;
    outline: none;
    box-shadow: none;
}
.archive-title sup, .navbar .nav-item > a > sup {
    font-size: 12px;
    position: absolute;
    left: 100%;
    top: 10px;
    transform: translateX(3px);
}
.navbar .nav-item > a > sup {
    top: 4px;
}
.listing-page {
    padding: 50px 0;
}
.listing-page.listing-awards {
    padding-top: 30px;
}
.listing-page.listing-awards .listing-header {
    padding-top: 20px;
}
.country-list .country-name {
    color: var(--primary-white);
}
form label, .wpcf7-form label {
    margin-bottom: 0;
}
.input-control, input, input.input-control, textarea, textarea.input-control, select, select.input-control, .intl-tel-input .country-list {
    background: var(--primary-black);
}
.input-control, input, input.input-control, textarea, textarea.input-control, select, select.input-control {
    display: block;
    width: 100%;
    padding: 16px 0px;
    border: none;
    outline: none;
    box-shadow: none;
    border-bottom: 1px solid var(--primary-white);
    resize: none;
}
.wp-form-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 30px;
}
.wp-form-row.wp-form-fields {
    margin-bottom: 30px;
}
.wp-form-group, .wp-form-group label {
    display: block;
    width: 100%;
}
.wpcf7-form button[type="submit"], .wpcf7-form .btn.btn-submit {
    padding: 0;
    color: #fff;
}
.wpcf7-form button[type="submit"]::before, .wpcf7-form .btn.btn-submit::before {
    content: '';
    display: block;
    position: absolute;
    bottom: -1px;
    left: 0;
    background: var(--primary-white);
    width: 100%;
    height: 1px;
}
.single .backdrop::before {
	content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
	background: linear-gradient(90deg, rgba(0,0,0,.8), rgba(0,0,0,0));
}
#colophon {
    padding: 70px 0 110px;
    background: var(--primary-black);
}
.footer-columns {
    border-top: 1px solid var(--primary-white);
}
.footer-columns > div:not(:last-child) {
    padding: 70px 0 50px;
}
.footer-columns .wp-block-column h5 {
    font-size: 13px;
    line-height: 21px;
}
.footer-columns .wp-block-column .wp-block-heading {
    font-weight: var(--fw-medium);
}
.footer-columns .copyright {
    font-size: 13px;
    line-height: 25px;
}
.footer-columns .wp-block-separator {
    background: var(--primary-white);
    opacity: 1;
}
.footer-columns .wp-block-columns {
    width: 100%;
}
.footer-columns .wp-block-column {
    flex: 1;
}
#colophon .wp-block-buttons .wp-block-button {
    position: relative;
    padding-bottom: 16px;
}
#colophon .wp-block-buttons .wp-block-button::before, #colophon .wp-block-buttons .wp-block-button::after {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--primary-white);
    transform: translateY(-50%);
}
#colophon .wp-block-buttons .wp-block-button::after {
    height: 3px;
    width: 50%;
}
#colophon .wp-block-buttons .wp-block-button:first-child a {
    font-size: 22px;
    line-height: 24px;
    white-space: nowrap;
}
#colophon .wp-block-buttons .wp-block-button a {
    padding: 0;
    border: none;
    font-weight: var(--fw-medium);
    text-transform: uppercase;
}
#colophon .wp-block-buttons .wp-block-button a, #colophon .wp-block-buttons .wp-block-button a:hover, .footer-columns .wp-block-column a, .footer-columns .wp-block-column a:hover {
    color: var(--primary-white);
}
#colophon .wp-block-buttons .wp-block-button a:hover, .footer-columns .wp-block-column a:hover {
    opacity: 0.85;
}
.footer-columns .wp-block-column h2:not(:last-child), .footer-columns .wp-block-column h3:not(:last-child), .footer-columns .wp-block-column h4:not(:last-child), .footer-columns .wp-block-column h5:not(:last-child), .footer-columns .wp-block-column h6:not(:last-child), .footer-columns .wp-block-column p:not(:last-child), #colophon .wp-block-buttons .wp-block-button:not(:last-child) {
    margin-bottom: 25px;
}
.footer-columns .wp-block-column .wp-block-image figure {
    max-width: 320px;
}
.philosophy-accordion .accordion-item {
    border-bottom: 1px solid var(--primary-white);
}
.accordion-button {
    color: var(--primary-grey);
    font-size: 18px;
    line-height: 21px;
}
.accordion-button:hover, .accordion-button.active, .accordion-button:not(.collapsed) {
    color: var(--primary-white);
}
#our-philosophy .divider+.text-editor {
    padding-top: 30px;
}
.text-editor > h1, .text-editor > h2, .text-editor > h3, .text-editor > h4, .text-editor > h5, .text-editor > h6 {
	margin-bottom: 3rem;
}
.loading {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.35);
    z-index: 2;
}
.loader {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    --c:no-repeat linear-gradient(var(--primary-black) 0 0);
    background: var(--c),var(--c),var(--c),var(--c);
    background-size: 21px 21px;
    animation: l5 1.5s infinite cubic-bezier(0.3,1,0,1);
}
@keyframes l5 {
   0%   {background-position: 0    0,100% 0   ,100% 100%,0 100%}
   33%  {background-position: 0    0,100% 0   ,100% 100%,0 100%;width:60px;height: 60px}
   66%  {background-position: 100% 0,100% 100%,0    100%,0 0   ;width:60px;height: 60px}
   100% {background-position: 100% 0,100% 100%,0    100%,0 0   }
}
ol {
    counter-reset: pointer;
    padding-left: 33px;
    list-style: none;
}
ol li {
    counter-increment: pointer;
}
ol li::before {
    content: counter(pointer) " / ";
    position: absolute;
    top: 0;
    left: -38px;
    width: 33px;
    text-align: right;
}
ol li:not(:last-child) {
    margin-bottom: 16px;
}