/*
Theme Name: Envo Royal
Theme URI: https://envothemes.com/envo-royal-free-wp-theme/
Author: EnvoThemes
Author URI: https://envothemes.com/
Description: Envo Royal is a fast, clean, lightweight, customizable and modern-looking free responsive multipurpose WordPress theme. Suitable for blog, creative, portfolio or business website and WooCommerce storefront. Theme supports popular page builders like Elementor, Beaver Builder, SiteOrigin, Thrive Architect, Divi, Brizy, Visual Composer, Gutenberg etc. Envo Royal comes with unique WooCommerce Features and it is compatible with YITH WooCommerce Wishlist, YITH WooCommerce Compare, WooCommerce Variation Swatches and other popular plugins. The theme is SEO friendly, WPML and RTL ready. Documentation: https://envothemes.com/docs/envo-royal/ Theme demos ready to import: https://envothemes.com/envo-royal-free-wp-theme/#demos
Version: 1.0.14
Tested up to: 6.9
Requires PHP: 5.6
License: GNU General Public License v3.0 or later
License URI: https://www.gnu.org/licenses/gpl.html
Tags: one-column, two-columns, full-width-template, right-sidebar, custom-background, custom-menu, custom-header, editor-style, featured-images, translation-ready, custom-logo, threaded-comments, footer-widgets, rtl-language-support, blog, e-commerce
Text Domain: envo-royal
*/

@font-face{
font-family: 'House Condensed';
src: url('fonts/house-sans-condensed-black-italic.otf');
src: url('fonts/house-sans-condensed-black-italic.otf?#iefix') format('embedded-opentype'),
url('fonts/house-sans-condensed-black-italic.otf') format('truetype');
font-weight: normal;
font-style: normal;
}

a img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

a img.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

a img.alignnone {
    margin: 5px 20px 20px 0;
}

a img.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

a, a:active, a:focus, a:hover {
    color: #103255;
    text-decoration: none;
}

a.comment-reply-link {
    border: 1px solid #ccc;
    padding: 10px 20px;
}

a.comment-reply-link, button, input#submit, input[type="submit"], .btn-default {
    -webkit-transition: all 0.3s ease-in-out;
    background-color: transparent;
    border-radius: 2px;
    border: 1px solid;
    box-shadow: none;
    color: #000;
    font-size: 14px;
    font-weight: 400;
    padding: 10px 25px;
    transition: all 0.3s ease-in-out;
}

a.post-edit-link,
.entry-footer,
nav.navigation.post-navigation{
    display: none;
}

a:active {
    border-bottom: none;
}

a:focus, .dropdown-toggle:focus {
    outline: none;
}

article {
    clear: none;
    margin-bottom: 30px;
}

article.content-article:nth-of-type(2n+1) {
    clear: both;
}

body {
    color: #404040;
    font-family: 'Montserrat', "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    padding: 0;
    word-wrap: break-word;
}

button#place_order {
    border-radius: 5px;
    display: inline-block;
    float: none;
    font-size: 19px;
    margin-bottom: 20px;
    margin-top: 20px;
    margin: 0 auto;
    padding: 15px;
    width: 100%;
}

button.dgwt-wcas-search-submit, button.dgwt-wcas-search-submit:hover {
    background: initial;
}

button.header-search-button {
    background-color: #e8ca67;
    border-radius: 0;
    border: none;
    color: inherit;
    font-size: 20px;
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    position: absolute;
    right: 0;
    top: 0;
    width: 42px;
}

button.header-search-button .la {
    color: #fff;
}

cite.fn {
    font-weight: bold;
}

div.aligncenter, .aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

embed, iframe {
    max-width: 100%;
}

fieldset {
    border: 2px solid #e5e5e5;
    margin: 5px 2px 15px 2px;
    padding: 0.35em 0.625em 0.75em;
}

form.search-form label {
    display: block;
    width: 100%;
}

form.search-form, form.woocommerce-product-search {
    position: relative;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -.02em;
    word-wrap: break-word;
}

h1,
h1.site-title,
.site-title {
    margin: 0;
	font-family: 'House Condensed';
}

h1.site-title a, .site-title a {
    color: #2b2b2b;
    font-size: 34px;
    font-weight: 800;
    line-height: 48px;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
    word-wrap: break-word;
	font-family: 'House Condensed';
}

.single-title {
    font-size: calc(2vw + 2vh);
    margin: 0;
	font-family: 'House Condensed';
}

.single h1 {
    margin: 0 0 10px 0;
}

html {
    -ms-overflow-x: hidden;
    overflow-x: hidden;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

img {
    height: auto;
    max-width: 100%;
}

img.alignnone {
    height: auto;
    max-width: 96%;
    width: auto;
}

input, textarea {
    background-color: #fff;
    border-radius: 0;
    color: #464a4c;
    padding: 8px;
}

.site-heading-sidebar {
    display: inline-flex;
}

.header-search-form input.header-search-input {
    background-color: transparent;
    border-radius: 0;
    border-radius: 0px;
    border: none;
    display: inline-block;
    float: left;
    height: 40px;
    padding-left: 15px;
    position: relative;
    right: 0px;
    width: 60%;
}

input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], textarea {
    -webkit-border-radius: 3px;
    background-image: -webkit-linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0));
    border-radius: 3px;
    border: 1px solid #bbb;
    display: block;
    width: 100%;
}

input[type="search"].search-field::-webkit-input-placeholder {
    color: #5b5b5b;
}

input[type="search"].search-field:focus::-webkit-input-placeholder {
    color: #545454;
    padding: 20px 0 0 0;
}

legend {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-bottom: 0;
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    padding: 0;
    white-space: normal;
    width: auto;
}

li.menu-item-has-children a.envo-categories-menu-first {
    min-width: 200px;
    padding-left: 45px;
    padding-right: 45px;
    width: 100%;
}

li.menu-item-has-children a.envo-categories-menu-first:before {
    content: "\f550";
    font-family: "Line Awesome Free";
    font-size: 15px;
    font-weight: 900;
    left: 0;
    margin-left: 20px;
    position: absolute;
    right: auto;
}

nav a, #site-navigation {
    -webkit-transition: all 0.3s ease;
    border-radius: 0;
    color: #2b2b2b;
    transition: all 0.3s ease;
}

nav.navigation.pagination {
    clear: both;
    margin: 20px 0;
    text-align: center;
    width: 100%;
}

nav.navigation.pagination .current {
    background-color: transparent;
    color: #fff;
}

nav.navigation.pagination .current, nav.navigation.pagination .nav-links a {
    border-radius: 0;
    border: 1px solid #b5b5b5;
    border: none;
    padding: 5px 10px;
    position: relative;
    z-index: 1;
}

nav.navigation.post-navigation {
    clear: both;
    width: 100%;
}

select {
    color: #000;
    max-width: 100%;
    padding: 5px;
}

select.header-search-select {
    background-color: #fff;
    border: none;
    border-left: 1px solid #ececec;
    display: inline-block;
    float: left;
    height: 40px;
    width: 40%;
}

span.comments-meta i {
    margin-left: 5px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

td, th {
    padding: 6px;
}

th {
    font-weight: bold;
}

#content-footer-section {
    background-color: #808080;
    clear: both;
    color: #ffffff;
    padding: 15px;
}

#content-footer-section .comments-meta, #content-footer-section .comments-meta a, #content-footer-section .posted-date {
    color: #cacaca;
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    position: relative;
}

#content-footer-section .news-item h2 a {
    color: #fff;
    font-weight: 400;
}

#content-footer-section .widget-title h3 {
    color: #fff;
}

#content-footer-section .widget.col-md-3 {
    margin: 1%;
}

#respond .comment-form-author {
    padding-right: 5%;
}

#respond .comment-form-author, #respond .comment-form-email {
    float: left;
    width: 50%;
}

#respond .comment-form-url, #respond input#url {
    float: left;
    width: 100%;
}

#respond input[type="checkbox"], #respond input[type="radio"] {
    float: left;
    margin-right: 10px;
    width: auto;
}

#second-site-navigation {
    background-color: #ffffff;
    border-bottom: 1px solid #f6f6f6;
    border-left: none;
    border-radius: 0;
    border-right: none;
    border-top: none;
}

#sidebar {
    display: inline-block;
    max-width: 100%;
}

#site-navigation {
    background-color: transparent;
    border: none;
    min-height: 50px;
}

#site-navigation .container {
    position: relative;
}

#theme-menu-second .navbar-nav > li > a {
    font-weight: 400;
}

#theme-menu-second li.menu-item-has-children>a:before {
    display: none;
}

.aligncenter {
    display: block;
    margin: 5px auto 5px auto;
}

.alignleft {
    float: left;
    margin: 5px 20px 20px 0;
}

.alignnone {
    margin: 5px 20px 20px 0;
}

.alignright {
    float: right;
    margin: 5px 0 20px 20px;
}

.page .article-meta {
    display: none;
}

.archive-item .article-meta {
    align-items: center;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}

.archive-page-header h1 {
    margin: 0;
    padding-bottom: 25px;
}

.author-meta a {
    font-size: 15px;
    margin-left: 0px;
    margin-right: 20px;
    font-style: italic;
}

.author-meta-by {
    font-size: 80%;
    font-style: italic;
    position: relative;
}

.bypostauthor, .sticky {
}

.cat-links a, .cat-links span, .posted-date, .tags-links span {
    color: #404040;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    position: relative;
}

.cat-links, .tags-links {
    display: inline-block;
    margin-bottom: 5px;
    width: 100%;
}

.checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"], .radio input[type="radio"], .radio-inline input[type="radio"] {
    margin-left: 0;
    position: relative;
}

.checkbox, .radio {
    display: inline-block;
}

.comment-body {
    margin-bottom: 40px;
}

.comment-body a, .single-entry-summary a, .textwidget a {
    text-decoration: underline;
}

.comment-form #comment {
    width: 100%;
}

.comment-meta.commentmetadata {
    font-size: 12px;
    font-style: italic;
    margin: 10px 0;
}

.commentlist li {
    list-style-type: none;
}

.comments-meta {
    color: #404040;
    display: inline-block;
    font-size: 15px;
    font-style: italic;
    font-weight: 400;
    padding: 0 8px;
    position: relative;
    z-index: 5;
}

.comments-meta, .posted-date {
    margin-right: 20px;
}

.content-date-comments {
    display: inline-block;
}

.dropdown-menu .menu-description {
    display: inline;
    left: 0;
    margin: 5px;
    position: relative;
    top: -2px;
}

.dropdown-menu .menu-description:after {
    display: none;
}

.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
    background-color: #e8ca67;
}

.dropdown-menu > li > a {
    border-bottom: 0;
    padding: 5px 20px 5px 10px;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    -moz-border-radius: 6px 0 6px 6px;
    -webkit-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
    left: -100%;
    margin-left: 10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

.dropdown-submenu>.dropdown-menu {
    -moz-border-radius: 0 6px 6px;
    -webkit-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
    left: 100%;
    margin-left: -1px;
    margin-top: -6px;
    top: 0;
}

.dropdown-submenu>a:after {
    border-color: transparent;
    border-left-color: #ccc;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    content: " ";
    display: block;
    float: right;
    height: 0;
    margin-right: -10px;
    margin-top: 5px;
    width: 0;
}

.entry-footer, .single-entry-summary {
    clear: both;
    margin-top: 15px;
    width: 100%;
}

.error-template {
    padding-bottom: 60px;
}

.featured-thumbnail {
    position: relative;
    width: 100%;
}

.featured-thumbnail img {
    text-align: center;
    width: 100%;
}

.footer-credits {
    background-color: #111215;
    clear: both;
}

.footer-credits-text {
    color: #fff;
    padding: 20px 0;
}

.gallery-caption {
    font-weight: bold;
}

.header-right {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    min-width: max-content;
    padding-left: 20px;
    position: relative;
}

.header-right.menu-button {
    max-width: 34px;
}

.header-search-form {
    background-color: #fff;
    border-color: #e8ca67;
    border-radius: 0;
    border: 1px solid;
    display: inline-block;
    float: left;
    height: 42px;
    padding-right: 42px;
    position: relative;
    width: 100%;
}

.heading-row {
    align-items: center;
    display: flex !important;
    float: none;
    position: relative;
}

.homepage-area .widget {
    margin: 0;
    padding: 0;
}

.inner-wrapper {
    display: block;
    margin-bottom: 15px;
}

.main-container {
    background-color: #fff;
}

.container {
    width: 1220px;
}

.main-content {
    float: left;
    width: 100%;
}

.main-menu {
    position: relative;
    z-index: 97;
}

.main-menu .container {
    align-items: center;
    display: flex;
    float: none;
    position: relative;
}

.menu-cats-on, .menu-right-on, .search-on {
    width: 100%;
}

.menu-description {
    background: #e8ca67;
    border-radius: 1px;
    bottom: 100%;
    color: #fff;
    display: inline-table;
    font-size: 9px;
    font-weight: 700;
    left: calc(100% - 25px);
    line-height: 10px;
    line-height: normal;
    margin: 0px 3px -15px 3px;
    overflow-wrap: unset;
    padding: 2px 4px;
    position: absolute;
    width: max-content;
    word-break: keep-all;
    z-index: 9;
}

.menu-description:after {
    border-left: 0px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #e8ca67;
    bottom: -4px;
    content: '';
    height: 0;
    left: 3px;
    position: absolute;
    width: 0;
}

.menu-heading {
    flex-grow: 1;
}

.mobile-heading .site-branding-logo img {
    max-height: 50px;
}

.nav-links {
    clear: both;
    display: block;
    float: left;
    margin-bottom: 15px;
    width: 100%;
}

.nav-links .nav-title {
    position: relative;
}

.nav-next .fa {
    margin-left: 5px;
}

.nav-previous .fa {
    margin-right: 5px;
}

.nav-subtitle {
    background: transparent;
    color: initial;
    display: block;
    font-size: 13px;
    opacity: 0.8;
    text-transform: uppercase;
}

.navbar {
    margin-bottom: 0;
}

.navbar-default .navbar-nav > li > a {
    color: #103255;
}

.navbar a[href$="x.com"],.navbar a[href$="/feed/"], .navbar a[href*="dribbble.com"], .navbar a[href*="facebook.com"], .navbar a[href*="flickr.com"], .navbar a[href*="foursquare.com"], .navbar a[href*="instagram.com"], .navbar a[href*="linkedin.com"], .navbar a[href*="mailto:"], .navbar a[href*="pinterest.com"], .navbar a[href*="plus.google.com"], .navbar a[href*="reddit.com"], .navbar a[href*="tumblr.com"], .navbar a[href*="twitch.tv"], .navbar a[href*="twitter.com"], .navbar a[href*="vimeo.com"], .navbar a[href*="vk.com"], .navbar a[href*="wordpress.com"], .navbar a[href*="wordpress.org"], .navbar a[href*="youtube.com"] {
    font-size: 20px;
    min-width: 30px;
    padding-left: 7px;
    padding-right: 7px;
    text-indent: -9999px;
    white-space: normal;
}

.navbar a[href$="/feed/"]:after {
    color: #ff9900;
    content: "\f09e";
    font-family: "Line Awesome free";
}

.navbar a[href$="/feed/"]:after, .navbar a[href*="dribbble.com"]:after, .navbar a[href*="facebook.com"]:after, .navbar a[href*="flickr.com"]:after, .navbar a[href*="foursquare.com"]:after, .navbar a[href*="instagram.com"]:after, .navbar a[href*="linkedin.com"]:after, .navbar a[href*="mailto:"]:after, .navbar a[href*="pinterest.com"]:after, .navbar a[href*="plus.google.com"]:after, .navbar a[href*="reddit.com"]:after, .navbar a[href*="tumblr.com"]:after, .navbar a[href*="twitch.tv"]:after, .navbar a[href*="twitter.com"]:after, .navbar a[href*="vimeo.com"]:after, .navbar a[href*="vk.com"]:after, .navbar a[href*="wordpress.com"]:after, .navbar a[href*="wordpress.org"]:after, .navbar a[href*="youtube.com"]:after {
    display: block;
    float: left;
    font-family: "Line Awesome Brands";
    font-weight: 900;
    position: relative;
    text-indent: 0;
}
.navbar a[href$="x.com"]:after{
    content: "";
    display: block;
    float: left;
    position: relative;
    text-indent: 0;
    background-image: url("data:image/svg+xml,%3Csvg class='the-icon' aria-labelledby='the-twitter-x-icon' role='img' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.095479,10.316482L22.286354,1h-1.940718l-7.115352,8.087682L7.551414,1H1l8.589488,12.231093L1,23h1.940717 l7.509372-8.542861L16.448587,23H23L14.095479,10.316482z M11.436522,13.338465l-0.871624-1.218704l-6.924311-9.68815h2.981339 l5.58978,7.82155l0.867949,1.218704l7.26506,10.166271h-2.981339L11.436522,13.338465z'/%3E%3C/svg%3E");
    background-repeat: no-repeat no-repeat;
    background-position: center center;
    background-size: cover;
    width: 12px;
    height: 12px;
    top: 4px;
}
.navbar a[href*="dribbble.com"]:after {
    color: #ea4c89;
    content: "\f17d";
}

.navbar a[href*="facebook.com"]:after {
    color: #3b5998;
    content: "\f09a";
}

.navbar a[href*="flickr.com"]:after {
    color: #ff0084;
    content: "\f16e";
}

.navbar a[href*="foursquare.com"]:after {
    color: #0072b1;
    content: "\f180";
}

.navbar a[href*="instagram.com"]:after {
    color: #517fa4;
    content: "\f16d";
}

.navbar a[href*="linkedin.com"]:after {
    color: #007bb6;
    content: "\f0e1";
}

.navbar a[href*="mailto:"]:after {
    color: #2b2b2b;
    content: "\f658";
    font-family: "Line Awesome free";
}

.navbar a[href*="pinterest.com"]:after {
    color: #cb2027;
    content: "\f231";
}

.navbar a[href*="reddit.com"]:after {
    content: "\f281";
}

.navbar a[href*="tumblr.com"]:after {
    color: #32506d;
    content: "\f173";
}

.navbar a[href*="twitch.tv"]:after {
    color: #6441a5;
    content: "\f1e8";
}

.navbar a[href*="twitter.com"]:after {
    color: #00aced;
    content: "\f099";
}

.navbar a[href*="vimeo.com"]:after {
    color: #aad450;
    content: "\f194";
}

.navbar a[href*="vk.com"]:after {
    color: #4a76a8;
    content: "\f189";
}

.navbar a[href*="wordpress.com"]:after, .navbar a[href*="wordpress.org"]:after {
    color: #0073aa;
    content: "\f19a";
}

.navbar a[href*="youtube.com"]:after {
    color: #bb0000;
    content: "\f167";
}

.navbar-collapse {
    padding-left: 0;
    padding-right: 0;
}

.navbar-inverse .navbar-toggle .icon-bar {
    background-color: #ccc;
}

.navbar-nav > li > a {
    border-bottom: 0;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    max-height: 50px;
    vertical-align: middle;
}

.navbar-nav > li > a.envo-categories-menu-first {
    border-radius: 0;
    color: #fff;
    margin-left: 0;
    margin-right: 0;
}

.navbar-nav li.fa {
    display: block;
    position: relative;
}

.navbar-nav.envo-categories-menu {
    background-color: #e8ca67;
}

.navbar-toggle {
    border: 1px solid #ccc;
}

.news-item {
    margin-bottom: 10px;
}

.news-item h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 10px;
    margin-top: 20px;
}

.news-item h2 a {
    color: #404040;
    font-size: 30px;
    font-weight: 500;
}

.news-item.layout-two h2 {
    font-size: 18px;
}

.news-item:hover img {
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
    opacity: 1;
}

.news-thumb {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    clear: both;
    margin-bottom: 20px;
    text-align: center;
    width: 100%;
}

.one-news-section .news-item h2 {
    font-size: 28px;
    margin-top: 10px;
}

.page h1.single-title {
    margin-bottom: 15px;
    margin-top: 10px;
}

.page-area {
    padding-top: 90px;
}

.page-header {
    margin: 20px 0;
    text-align: center;
    width: 100%;
    border-bottom: none;
}

.page-header a {
    border-bottom: 0;
    color: #2b2b2b;
}

.post-excerpt {
    clear: both;
    display: block;
    font-size: 14px;
    font-weight: 400;
}

.post-navigation .nav-next {
    float: right;
    text-align: right;
    width: 50%;
}

.post-navigation .nav-previous {
    float: left;
    text-align: left;
    width: 50%;
}

.reply {
    margin: 20px 0;
}

.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    clip: rect(1px,1px,1px,1px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.6);
    clip-path: none;
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: bold;
    height: auto;
    left: 10px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.search-field {
    border-radius: 3px;
    border: 1px solid #e2e2e2;
    padding-right: 90px;
    width: 100%;
}

.search-submit, .woocommerce-product-search button {
    bottom: 2px;
    line-height: 18px;
    position: absolute;
    right: 2px;
    top: 2px;
}

.shrink .header-heading-shrink {
    flex-grow: 1;
}

.shrink .header-right {
    max-width: max-content;
}

.shrink .menu-heading {
    flex-grow: 0;
}

.single-content.row {
    margin-bottom: 60px;
}

.single-footer.row {
    clear: both;
}

.single-head {
    clear: both;
    margin-bottom: 10px;
    position: relative;
}

.single-page-header {
    color: #fff;
    font-size: 44px;
    font-weight: 700;
}

.site-branding-logo a {
    border: none;
    position: relative;
    z-index: 99;
}

.site-branding-logo img {
    width: auto;
}

.site-branding-logo, .site-branding-text {
    float: left;
    margin-bottom: 0;
    text-align: left;
}

.site-branding-text {
    position: relative;
    z-index: 99;
}

.site-description {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    margin: 0;
    position: relative;
}

.site-header {
    background-color: #fff;
    padding: 0 0;
    position: relative;
    z-index: 98;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
	box-shadow: 0 3px 5px #55555533;
}

.site-heading {
    padding: 3px 0 3px 5px;
}

.site-branding-logo {
    width: 100%;
    max-width: 170px;
}

.top_video {
    margin: -32px 0 0 0;
}

.heading-row .site-heading {
    display: flex;
    align-items: center;
}

.header-woonav:not(.woo-on) .heading-row.row, .header-woonav:not(.woo-on) .heading-row .site-heading {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.site-heading-sidebar .widget {
    float: left;
    font-size: 80%;
    margin-bottom: 5px;
    margin-left: 15px;
}

.site-heading-sidebar .widget:first-of-type {
    margin-left: 0;
}

.site-heading-sidebar p {
    margin-bottom: 0;
}

.size-auto, .size-full, .size-large, .size-medium, .size-thumbnail {
    height: auto;
    max-width: 100%;
}

.space-right {
    margin-right: 15px;
}

.tagcloud a {
    border: 1px solid;
    display: inline-block;
    font-size: 15px !important;
    margin-bottom: 5px;
    padding: 0px 6px;
}

.tags-links a {
    color: #404040;
    font-size: 14px;
    font-style: italic;
    margin-right: 8px;
    opacity: 0.9;
    position: relative;
}

.taxonomy-description {
    margin-bottom: 20px;
}

.top-header {
    position: relative;
    height: 75vh;
    background-color: #3c3c3c;
	display: none;
}

.single-image {
    overflow: hidden;
    position: relative;
    height: 75vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.bg-single-image {
    overflow: hidden;
    position: relative;
    height: 75vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

.single-image:after {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
}

.header-title {
    position: absolute;
    top: 55%;
    text-align: center;
    padding: 15px;
    color: #fff;
    left: 50%;
    -webkit-transform: translate(-50%, -55%);
    -moz-transform: translate(-50%, -55%);
    -ms-transform: translate(-50%, -55%);
    -o-transform: translate(-50%, -55%);
    transform: translate(-50%, -55%);
}

.header-title .posted-date, .header-title .author-meta-by, .header-title .comments-meta {
    color: #fff;
    opacity: 1;
}

.top-header .site-branding-text, .top-header .site-branding-logo {
    text-align: center;
    float: none;
}

.header-site-title {
    font-size: 46px;
    font-size: calc(3vw + 2vh);
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 800;
}

@keyframes grow{
    0% { transform: translateX(-50%) translateY(-50%) scale(1)}
    50% { transform: translateX(-50%) translateY(-50%) scale(1.2)}
}

#header-image-arrow {
    position: relative;
    margin-top: 30px;
    margin-bottom: 15px;
    width: 100%;
    height: 50px;
}
#header-image-arrow a span:hover {
    opacity: 0.7;
}
#header-image-arrow a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 38px;
    height: 38px;
    margin-left: -19px;
    border: 1px solid #fff;
    border-radius: 100%;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#header-image-arrow a span::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: '';
    width: 16px;
    height: 16px;
    margin: -12px 0 0 -8px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-sizing: border-box;
}
#header-image-arrow a span::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    content: '';
    width: 38px;
    height: 38px;
    box-shadow: 0 0 0 0 rgba(255,255,255,.1);
    border-radius: 100%;
    opacity: 0;
    -webkit-animation: arrow 3s infinite;
    animation: arrow 3s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes arrow {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    60% {
        box-shadow: 0 0 0 60px rgba(255,255,255,.1);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}




/* ==========================================================================
   MOTOART LOGISTICS - ARCHIVE CORE FIXED GRID MODULE (style.css)
   ========================================================================== */

/* 1. Reset Native Flex Layout Rails */
.archive .row {
    display: block;
    width: 100%;
}

/* 2. Target Actual Parent Container to Establish a Strict 3-Column Corporate Grid */
.archive .row > .col-md-12 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Locks structural 3-column rail alignment */
    gap: 40px 30px !important; /* Balanced gap distribution track */
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* 3. FIX: Protect Archive Title Area from Grid Wrapping */
.archive header.archive-page-header.text-center {
    grid-column: 1 / 4 !important; /* Forces the category headline to stretch full-width independently */
    width: 100% !important;
    margin: 0;
    float: none !important;
    display: block !important;
}

.archive h1.page-title {
    text-align: left;
}

/* 4. Individual Product Article Cards Structural Layout */
.archive .content-article.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    background: #F8FAFC; /* Premium light gray technical pedestal */
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive .content-article.col-md-6:hover {
    background: #FFFFFF;
    border-color: rgba(0, 163, 173, 0.3); /* Smooth brand Marine Teal border trace */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(17, 18, 21, 0.04);
}

/* 5. Secure Whole Image Display inside Container (object-fit: contain) */
.archive .news-thumb {
    width: 100% !important;
    height: 270px !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 0 !important;
    padding: 0 20px;
}

.archive .news-thumb a,
.archive .news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Displays entire vehicle profile without any cropping */
    display: block !important;
    background-color: #FFFFFF !important;
}

/* 6. Typography Matrix Padding & Text Setup */
.archive .single-head,
.archive .post-excerpt {
    padding: 0 24px !important;
}

.archive .single-head {
    padding-top: 24px !important;
    margin-bottom: 8px !important;
}

.archive .entry-title,
.archive .entry-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #111215 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
}

.archive .post-excerpt p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important; /* Clear native margins to inject the button spacer */
    text-align: justify;
}



/* 8. Pure out all unnecessary Retail/Blog Metadata Noise */
.archive .post-meta,
.archive .article-meta,
.archive .time,
.archive .entry-meta,
.archive header.archive-page-header .description {
    display: none !important; /* Erases dates, author links, and toggle tags */
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 & 3 (Tablets & Smartphones Fluid Grid Re-routing)
   ========================================================================== */
@media (max-width: 1024px) {
    .archive .row > .col-md-12 {
        grid-template-columns: repeat(2, 1fr) !important; /* Splits tracks to 2 columns for tablet screens */
        gap: 24px !important;
    }
    
    .archive header.archive-page-header.text-center {
        grid-column: 1 / 3 !important;
    }
}

@media (max-width: 768px) {
    .archive .row > .col-md-12 {
        grid-template-columns: 1fr !important; /* Cascades into single-column vertical stack flow */
        gap: 20px !important;
    }
    
    .archive header.archive-page-header.text-center {
        grid-column: 1 / 2 !important;
        margin-bottom: 25px !important;
    }
    
    .archive .content-article.col-md-6 {
        max-width: 400px;
        margin: 0 auto !important;
    }
    
    .archive .news-thumb {
        height: 180px !important;
    }
}


/* ==========================================================================
   MOTOART LOGISTICS - REAL B2B CTA BUTTON FOR POLYLANG TRACK (style.css)
   ========================================================================== */

.mal-archive-cta-btn {
    display: block;
    margin: 15px 24px 10px 24px; /* Pins the button strictly to the card bottom */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
    color: #103255;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 12px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card hover proximity trigger: contour shifts to brand Racing Orange */
.archive .content-article.col-md-6:hover .mal-archive-cta-btn {
    border-color: #103255;
    background-color: #103255;
    background: #103255;
    color: #fff;
    transition: 0.3s;
}

/* Individual button direct hover state: full monochrome fill inversion */
.mal-archive-cta-btn:hover {
    background-color: #103255;
    border-color: #103255;
    color: #FFFFFF;
}









.single-image img {
    position: absolute;
    height: auto;
    left: 50%;
    max-width: 1000%;
    min-height: 100%;
    width: auto;
    top: 50%;
    -ms-transform: translateX(-50%) translateY(-50%) scale(1);
    -moz-transform: translateX(-50%) translateY(-50%) scale(1);
    -webkit-transform: translateX(-50%) translateY(-50%) scale(1);
    transform: translateX(-50%) translateY(-50%) scale(1);
    -webkit-animation: grow 30s linear 10ms infinite;
    animation: grow 30s linear 10ms infinite;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.top-bar-section {
    background-color: #fff;
    border-bottom: 1px solid #f6f6f6;
    color: #334142;
    font-size: 14px;
    padding: 5px 0;
    position: relative;
    z-index: 98;
    display: flex;
}

.top-bar-section .widget, .top-bar-section p {
    margin-bottom: 0;
}

.top-bar-section .widget:nth-child(3n) {
    text-align: right;
}

.top-bar-section .widget:nth-child(3n-1) {
    text-align: center;
}

.transparent-header .top-header {
    top: -71px;
} 

.updated:not(.published) {
    display: none;
}

.widget {
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    margin-bottom: 20px;
    position: relative;
    word-wrap: break-word;
}

.widget li > ul {
    padding-left: 15px;
}

.widget ul {
    list-style-type: none;
    padding-left: 0;
}

.widget ul li {
    border-bottom: 1px solid rgba(0,0,0,0.08);
    margin: 4px 0px 0px;
    padding: 0px 0px 4px;
}

.widget ul li:last-child {
    border-bottom: none;
}

.widget-title {
    clear: both;
    display: block;
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 5px;
    position: relative;
    text-align: left;
    text-transform: uppercase;
    width: 100%;
}

.wp-caption {
    background: #fff;
    border: 1px solid #f0f0f0;
    max-width: 96%;
    padding: 5px 3px 10px;
    text-align: center;
}

.wp-caption img {
    border: 0 none;
    height: auto;
    margin: 0;
    max-width: 98.5%;
    padding: 0;
    width: auto;
}

.wp-caption p.wp-caption-text {
    color: #2b2b2b;
    font-size: 13px;
    line-height: 17px;
    margin: 0;
    padding: 10px 0 0 0;
}

.wp-caption.alignleft {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignnone {
    margin: 5px 20px 20px 0;
}

.wp-caption.alignright {
    margin: 5px 0 20px 20px;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showup {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    a.cart-contents i.la, .header-cart i, .header-compare i, .header-my-account i, .header-search i, .header-search-icon i, .header-wishlist i {
        font-size: 22px;
        margin-right: 0;
    }

    #menu-categories-menu {
        display: none;
    }

    #menu-categories-menu.dropdown-menu.open {
        display: block;
        position: relative;
        width: 100%;
    }

    #site-navigation {
        height: 0;
        min-height: 0 !important;
        opacity: 0;
        visibility: hidden;
    }

    #theme-menu {
        overflow: hidden;
        z-index: 99999;
    }

    #theme-menu-second .nav > li {
        display: inline-block;
    }

    #theme-menu-second .navbar-right, .header-search-form {
        text-align: center;
    }

    .admin-bar.hc-nav-open {
        margin-top: -46px;
    }

    .admin-bar.hc-nav-open:not(.shrink-header) .hc-offcanvas-nav.nav-open[class*='hc-nav-'] div.nav-container {
        margin-top: 46px;
    }

    .dropdown-menu {
        -webkit-box-shadow: none;
        border-radius: 0;
        border: none;
        box-shadow: none;
        display: block;
        float: none;
        font-size: initial;
        left: auto;
        list-style: none;
        margin: 0;
        min-width: auto;
        padding: 0;
        position: inherit;
        text-align: none;
        top: auto;
    }

    .hc-nav-trigger {
        top: 1px;
        width: 20px;
    }

    .hc-nav-trigger span {
        width: 20px;
    }

    .hc-nav-trigger span,
	.hc-nav-trigger span:after,
	.hc-nav-trigger span:before {
        background-color: #5c5c5c;
        height: 2px;
    }

    .hc-nav-trigger span::after {
        bottom: -6px;
    }

    .hc-nav-trigger span::before {
        top: -6px;
    }

    .hc-offcanvas-nav .nav-close-button span::before {
        margin-left: -6px;
    }

    .head-form.visible-xs {
        padding: 15px;
        position: absolute;
        top: 100%;
        width: 100%;
        z-index: 9;
    }

    .header-compare, .header-my-account, .header-search, .header-search-icon i, .header-wishlist {
        padding-right: 3px !important;
    }

    .header-right {
        flex-grow: 1;
        padding-right: 15px;
    }

    .header-search-form {
        font-size: 14px;
    }

    .header-search-form, .navbar-nav.envo-categories-menu, .navbar-right {
        width: 100% !important;
    }

    .header-woonav:not(.woo-on) #second-site-navigation, 
    .header-woonav #second-site-navigation:not(.menu-right-on):not(.menu-cats-on) {
        display: none;
    }

    .heading-row {
        flex-wrap: wrap;
    }

    .js-loaded #site-navigation {
        opacity: 1;
        visibility: visible;
    }

    .main-menu .container {
        display: block !important;
    }

    .menu-button {
        float: right;
        height: 24px;
        margin-left: 10px;
        width: 24px;
    }

    .menu-item .menu-description {
        background: #e8ca67;
        border-radius: 1px;
        color: #fff;
        display: inline;
        font-size: 9px;
        font-weight: 700;
        left: inherit;
        line-height: 10px;
        line-height: normal;
        margin: 0 3px;
        margin: 0 5px;
        padding: 2px 4px;
        position: relative;
        top: -3px;
    }

    .menu-item .menu-description:after {
        display: none;
    }

    .mobile-canvas {
        float: left;
    }

    .navbar-default .navbar-brand {
        margin-right: -50px;
    }

    .navbar-nav.envo-categories-menu {
        margin-left: 0px;
    }

    .top-bar-section .widget {
        text-align: center !important;
    }
}

@media (min-width: 600px) and (max-width: 782px) {
    .admin-bar #theme-menu {
        top: 46px;
    }
}

@media (min-width: 768px) {
    li li ul.dropdown-menu {
        left: 100%;
        top: 0;
    }

    li.menu-item-has-children > a {
        padding-right: 25px;
    }

    li.menu-item-has-children>a.dropdown-item:before {
        right: 6px;
    }

    li.menu-item-has-children>a:before {
        content: "\f107";
        font-family: "Line Awesome Free";
        font-size: 15px;
        font-weight: 900;
        margin-left: 10px;
        position: absolute;
        right: 2px;
    }

    ul li ul li.menu-item-has-children>a:before {
        content: "\f105";
    }

    #site-navigation .container {
        padding-left: 0;
        padding-right: 0;
    }

    .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        max-width: 100vw;
        width: auto;
    }

    .alignfull img {
        width: 100vw;
    }

    .alignwide {
        margin-left: calc(25% - 25vw);
        margin-right: calc(25% - 25vw);
        max-width: 100vw;
        width: auto;
    }

    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
    }

    .header-heading-shrink .navbar-right {
        margin-right: 0px;
    }

    .header-search-widget {
        width: 75%;
    }
    
    .heading-row .site-heading {
        overflow: hidden;
    }

    .menu-item-has-children li.fa:before {
        top: 6px !important;
    }

    .navbar-center {
        text-align: center;
        width: 100%;
    }

    .navbar-center > li {
        display: inline-block;
        float: none;
    }

    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover {
        background-color: transparent;
    }

    .navbar-default .navbar-nav > .active a:focus, .navbar-default .navbar-nav > .open a:focus {
        background-color: #fff;
        color: #666;
        outline: none;
    }

    .navbar-nav > li > a {
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }

    .navbar-nav li:hover > .dropdown-menu {
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        -webkit-transition: all 0.5s ease-in-out;
        border-radius: 0;
        opacity: 1;
        transition: all 0.5s ease-in-out;
        visibility: visible;
    }

    .navbar-right li li ul.dropdown-menu {
        left: auto;
        right: 100%;
    }

    .open > .dropdown-menu {
        height: auto;
        opacity: 1;
        visibility: visible;
    }

    .shrink .header-search-widget {
        display: none;
    }

    .wp-block-group__inner-container {
        margin: auto;
        max-width: 85.7143rem;
    }
}
[data-tooltip] {
    cursor: pointer;
    position: relative;
    z-index: 999;
}

[data-tooltip]:after {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000;
    border-top: 5px solid hsla(0,0%,20%,0.9);
    bottom: 85%;
    content: " ";
    font-size: 0;
    left: 50%;
    line-height: 0;
    position: absolute;
    transform: translate(-50%,0);
    width: 0;
    z-index: 999;
}

[data-tooltip]:after, [data-tooltip]:before {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

[data-tooltip]:before {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    background-color: #000;
    background-color: hsla(0,0%,20%,0.9);
    border-radius: 3px;
    bottom: 85%;
    color: #fff;
    content: attr(data-tooltip);
    font-size: 12px;
    left: 50%;
    line-height: 1.1;
    margin-bottom: 5px;
    padding: 4px;
    position: absolute;
    text-align: center;
    transform: translate(-50%,0);
    width: max-content;
    z-index: 999;
}

[data-tooltip]:hover:after, [data-tooltip]:hover:before {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
    opacity: 1;
    visibility: visible;
}
.bgst {
	height: 500px;
	background: url(/wp-content/uploads/2026/06/dkmd6523.jpg);
	background-size: cover;
	background-position: center;
}
.bgst_we {
	background: url(/wp-content/uploads/2026/06/dkmd6523.jpg);
    background-size: cover;
    background-position: 100% 30%;
}
.bgst_service {
	background: url(/wp-content/uploads/2026/06/dkmd6523.jpg);
    background-size: cover;
    background-position: 100% 30%;
}
#trading {
    margin: 50px 0 0 0;
}
#logistics {
	margin: 50px 0;
}
.homebanners {
	padding: 120px 0 100px;
}
.hbn_1 {
    background: url(/wp-content/uploads/2026/05/15342.webp.jpg);
    background-size: cover;
    background-position: 100% 42%;
}
.hbn_2 {
    background: url(/wp-content/uploads/2026/05/1423.webp.jpg);
    background-size: cover;
    background-position: 100% 80%;
}
.hbn_3 {
    background: url(/wp-content/uploads/2026/05/18545.jpg);
    background-size: cover;
    background-position: 100% 29%;
}
.hbn_4 {
    background: url(/wp-content/uploads/2026/05/16565.jpg);
    background-size: cover;
    background-position: 100% 51%;
}
.hbn_5 {
    background: url(/wp-content/uploads/2026/05/1841.jpg);
    background-size: cover;
    background-position: 100% 56%;
}
.homebanners h2 {
	max-width: 900px;
    text-shadow: 1px 1px 1px #333;
	color: #fff;
    font-size: 35px;
    letter-spacing: 0.2px;
    font-style: italic;
}
.homebanners p {
	margin: 0 0 0 0;
	color: #fff;
    max-width: 800px;
    text-shadow: 0.5px 0.5px 1px #444;
    font-size: 16px;
}
.hbn_links {
	margin: 0 0 0 0;
}
.hbn_links .hlink_1 a {
	background: #e8ca67;
	border: 1px solid #e8ca67;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	transition: 0.3s;
    border-radius: 0;
    padding: 15px 25px;
    box-shadow: 2px 2px 5px #333;
    letter-spacing: 0.2px;
    text-shadow: 0.5px 0.5px 1px #777;
}
.hbn_links .hlink_1 a:hover {
	transition: 0.3s;
	background: transparent;
}
.hbn_links .hlink_2 a {
	transition: 0.3s;
	background: transparent;
	border: 1px solid #00A3AD;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 600;
	transition: 0.3s;
    border-radius: 0;
    padding: 15px 25px;
    box-shadow: 2px 2px 5px #333;
    letter-spacing: 0.2px;
    text-shadow: 0.5px 0.5px 1px #444;
}
.hbn_links .hlink_2 a:hover {
	transition: 0.3s;
	background: #00A3AD;
}
.navbar-default .navbar-nav > .active > a {
    color: #e8ca67;
}
.navbar-default .navbar-nav > li > a:hover {
    color: #103255;
}
.dropdown-menu {
    left: 0 !important;
    min-width: 180px;
    background-color: #111215;
}
.dropdown-menu > li > a {
    color: #fff;
	font-weight: 500;
}


/* ==========================================================================
   MOTOART LOGISTICS - ABOUT US TYPOGRAPHY & ADVANTAGES GRID (style.css)
   ========================================================================== */

/* Universal Structural Reset for WordPress Page Templates */
.mal-about-upper-block, .mal-about-lower-block {
    width: 100%;
    position: relative;
    background-color: #111215; /* Base matte dark anthracite from design manual */
    color: #F8FAFC;
    overflow: hidden;
}

.mal-about-upper-block {
    padding-top: 100px;
    padding-bottom: 35px;
}

/* Strategic Header Alignment Nodes */
.mal-about-header-group {
    max-width: 800px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mal-about-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #00A3AD; /* Marine Teal core accent color token */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.mal-about-main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #F8FAFC;
    margin-bottom: 16px;
}

div.wpforms-container-full .wpforms-field.wpforms-field-checkbox ul li input+label {
    font-size: 13px;
	text-transform: initial;
}

.mal-about-lead-statement {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 16px;
    color: #64748B; /* Soft slate readability text gray */
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}

/* 3-Column Core B2B Advantages Grid Mechanics */
.mal-about-advantages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.mal-about-adv-card {
    background-color: rgba(22, 26, 33, 0.5); /* Semi-transparent hardware layer texture */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-about-adv-card:hover {
    border-color: rgba(255, 59, 0, 0.3); /* Target highlight shifts to Racing Orange */
    transform: translateY(-3px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Circle Icon Background Rails aligned with BRP Brand Color Palette tokens */
.mal-about-adv-card .mal-adv-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 24px;
    transition: all 0.4s ease;
}

.mal-adv-icon-wrapper.mal-icon-orange { background-color: rgba(255, 59, 0, 0.1); color: #e8ca67; } /* Ski-Doo Racing Orange */
.mal-adv-icon-wrapper.mal-icon-teal   { background-color: rgba(0, 163, 173, 0.1); color: #00A3AD; } /* Sea-Doo Marine Teal */
.mal-adv-icon-wrapper.mal-icon-dark   { background-color: rgba(255, 255, 255, 0.03); color: #F8FAFC; }

.mal-about-adv-card:hover .mal-adv-icon-wrapper.mal-icon-orange { background-color: #e8ca67; color: #FFFFFF; }
.mal-about-adv-card:hover .mal-adv-icon-wrapper.mal-icon-teal   { background-color: #00A3AD; color: #FFFFFF; }

.mal-adv-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #F8FAFC;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.mal-adv-card-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}
/* ==========================================================================
   MOTOART LOGISTICS - ABOUT US LOWER BLOCK & RESPONSIVE MATRIX (style.css)
   ========================================================================== */

.mal-about-lower-block {
    padding-top: 40px;
    padding-bottom: 100px;
}

/* 1. Two-Column Asymmetric Layout Matrix Configuration */
.mal-about-split-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 60px;
    align-items: center;
}

.mal-about-text-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mal-about-side-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 29px;
    font-weight: 600;
    text-transform: uppercase;
    color: #F8FAFC;
    margin-bottom: 20px;
    letter-spacing: 0;
}

.mal-about-body-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    color: #64748B;
    line-height: 1.7;
    margin-bottom: 18px;
    text-align: justify;
}

.mal-about-body-text:last-of-type {
    margin-bottom: 30px;
}

/* Hardcoded Infrastructure Features Bullet System */
.mal-about-infrastructure-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    width: 100%;
}

.mal-about-infrastructure-list li {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #F8FAFC;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    line-height: 1.5;
}

.mal-about-infrastructure-list li i {
    color: #00A3AD; /* Connected to Marine Teal token */
    font-size: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* 2. Right Side Content: Abstract High-Tech Data Counter Boxes */
.mal-about-counter-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.mal-counter-card {
    background-color: rgba(22, 26, 33, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mal-counter-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 38px;
    font-weight: 700;
    color: #e8ca67; /* Connected to Racing Orange token */
    line-height: 1;
    margin-bottom: 6px;
    letter-spacing: -0.02em;
}

.mal-counter-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #F8FAFC;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.mal-counter-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 (Laptops and Tablets Grid Reconfiguration)
   ========================================================================== */
@media (max-width: 1024px) {
    .mal-about-upper-block { padding-top: 80px; padding-bottom: 40px; }
    .mal-about-lower-block { padding-bottom: 80px; }
    .mal-about-header-group { margin-bottom: 40px; }
    
    .mal-about-advantages-grid {
        grid-template-columns: repeat(2, 1fr); /* Splits key areas track into 2-Column layout shift */
        gap: 24px;
    }
    
    /* Force the third card to stretch full width in tablet stack for design balance */
    .mal-about-advantages-grid .mal-about-adv-card:nth-child(3) {
        grid-column: 1 / 3;
    }
    
    .mal-about-split-layout {
        gap: 40px;
    }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Strict Vertical Cascade Stack)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-about-upper-block { padding-top: 60px; padding-bottom: 30px; }
    .mal-about-lower-block { padding-top: 20px; padding-bottom: 60px; }
    
    .mal-about-header-group {
        align-items: center;
        text-align: center;
        margin-bottom: 35px;
    }
    
    .mal-about-meta-tag { align-self: center; margin-bottom: 16px; }
    .mal-about-lead-statement { text-align: center; font-size: 14px; }
    
    /* Collapse to absolute single column flow */
    .mal-about-advantages-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .mal-about-advantages-grid .mal-about-adv-card:nth-child(3) {
        grid-column: auto;
    }
    
    .mal-about-adv-card {
        padding: 30px 20px;
        align-items: center;
        text-align: center;
    }
    
    .mal-about-adv-card .mal-adv-icon-wrapper { margin-bottom: 16px; }
    .mal-adv-card-text { text-align: center; font-size: 13px; }
    
    /* Lower block shift layout setup */
    .mal-about-split-layout {
        grid-template-columns: 1fr;
        gap: 45px;
    }
    
    .mal-about-side-title { text-align: center; width: 100%; }
    .mal-about-body-text { text-align: center; font-size: 13px; }
    
    .mal-about-infrastructure-list li {
        text-align: left;
        font-size: 13px;
    }
    
    .mal-counter-card {
        padding: 24px 20px;
        align-items: center;
        text-align: center;
    }
    
    .mal-counter-desc { text-align: center; font-size: 12px; }
}

/* ==========================================================================
   INTERNAL PAGES OVERRIDE: LIGHT CANVAS & DEEP CONTRAST ENHANCEMENT (PART 1)
   ========================================================================== */

/* 1. Global Reset of Internal Section Canvas to Pure White Layout */
.mal-about-upper-block, 
.mal-about-lower-block {
    background-color: #FFFFFF; /* Rigid pure white base layer as per layout shift directive */
    color: #111215; /* High-contrast matte dark anthracite for superior readability */
}

/* Safety adjustment for header spacing on light interfaces */
.mal-about-upper-block {
    padding-top: 15px;
}

/* 2. Strategic Header Area Contrast Calibration */
.mal-about-meta-tag {
    background-color: #F8FAFC; /* Light gray technical status badge pod */
    border-color: #E2E8F0;
    color: #00A3AD; /* Retains crisp brand Marine Teal identity link */
}

.mal-about-main-title {
    color: #111215; /* Monolithic headline re-painted to solid dark */
}

.mal-about-lead-statement {
    color: #475569; /* Balanced deep slate gray for primary introductory blocks */
}

/* 3. Core Advantages Grid Light Mode Re-mapping */
.mal-about-adv-card {
    background-color: #F8FAFC; /* Clean off-white surface card structure */
    border-color: #E2E8F0;
}

/* Subtle micro-shadow injection on hover for light matrix layouts */
.mal-about-adv-card:hover {
    background-color: #FFFFFF;
    border-color: rgba(255, 59, 0, 0.4); /* Sharp Racing Orange hover signal transition */
    box-shadow: 0 15px 35px rgba(17, 18, 21, 0.05);
}

/* Icon backgrounds adjustment to stand clear on light slate surface */
.mal-adv-icon-wrapper.mal-icon-orange { background-color: rgba(255, 59, 0, 0.06); color: #e8ca67; }
.mal-adv-icon-wrapper.mal-icon-teal   { background-color: rgba(0, 163, 173, 0.06); color: #00A3AD; }
.mal-adv-icon-wrapper.mal-icon-dark   { background-color: #E2E8F0; color: #111215; }

.mal-adv-card-title {
    color: #111215;
}

.mal-adv-card-text {
    color: #475569;
}

/* ==========================================================================
   INTERNAL PAGES OVERRIDE: LIGHT CANVAS & DEEP CONTRAST ENHANCEMENT (PART 2)
   ========================================================================== */

/* 1. Lower Split Tier Typography Matrix Calibration */
.mal-about-side-title {
    color: #111215; /* Re-painted to crisp dark slate */
}

.mal-about-body-text {
    color: #475569; /* Deep slate gray for extended text readability */
}

/* Hardcoded Infrastructure Features Bullet System Adaptation */
.mal-about-infrastructure-list li {
    color: #111215; /* Dark typography shift for list entries */
}

.mal-about-infrastructure-list li i {
    color: #00A3AD; /* Remains linked to bright brand Marine Teal token */
}

/* 2. Right Side Content: Clean Counters Grid Configuration */
.mal-counter-card {
    background-color: #F8FAFC; /* Light gray technical canvas layer */
    border-color: #E2E8F0;
}

.mal-counter-card:hover {
    background-color: #FFFFFF;
    border-color: #00A3AD;
    box-shadow: 0 12px 30px rgba(17, 18, 21, 0.04);
}

.mal-counter-num {
    color: #e8ca67; /* Retains sharp brand Racing Orange accent alignment */
}

.mal-counter-label {
    color: #111215; /* Title re-painted to solid deep dark */
}

.mal-counter-desc {
    color: #475569; /* Soft text gray description readability */
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Light Mode Layout Alignment)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-about-infrastructure-list li {
        color: #111215;
    }
}



/* ==========================================================================
   MOTOART LOGISTICS - SERVICES GRID ARCHITECTURE (style.css)
   ========================================================================== */

/* Universal Light Mode Layout Foundations for Services Template */
.mal-services-upper-block,
.mal-services-lower-block {
    width: 100%;
    position: relative;
    background-color: #FFFFFF; /* Pure white interior canvas as per light mode manual */
    color: #111215;
    overflow: hidden;
}

.mal-services-upper-block {
    padding-top: 25px;
    padding-bottom: 50px;
}

/* 1. Symmetric Two-Column Grid Framework */
.mal-services-split-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
}

/* Mirror layout swap trigger for the second section block */
.mal-services-split-grid.mal-grid-reverse {
    grid-template-columns: 0.9fr 1.1fr;
}

/* 2. Content Left/Right Text Rails Components */
.mal-services-content-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mal-services-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #00A3AD; /* Connected to Marine Teal token */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.mal-services-main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #111215;
    margin-bottom: 20px;
}

.mal-services-lead-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    color: #475569; /* Deep slate gray for optimal contrast */
    line-height: 1.65;
    margin-bottom: 40px;
    text-align: justify;
}

/* 3. Detailed Logistics Capability Cards Layout */
.mal-service-detail-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    margin-bottom: 30px;
    width: 100%;
}

.mal-service-detail-card:last-of-type {
    margin-bottom: 0;
}

/* Circular Pod Controls mapped with BRP Accent variables */
.mal-service-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.mal-service-icon-box.mal-highlight-orange { background-color: rgba(255, 59, 0, 0.06); color: #e8ca67; } /* Ski-Doo Orange */
.mal-service-icon-box.mal-highlight-teal   { background-color: rgba(0, 163, 173, 0.06); color: #00A3AD; } /* Sea-Doo Teal */
.mal-service-icon-box.mal-highlight-dark   { background-color: #E2E8F0; color: #111215; }

.mal-service-text-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mal-service-inner-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    letter-spacing: -0.01em;
}

.mal-service-inner-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}

/* Inline text highlighter token for corridors (Houston, Bishkek, Almaty) */
.mal-text-accent {
    color: #111215;
    font-weight: 700;
    border-bottom: 1.5px solid #e8ca67; /* Subtle underlining trace */
}

/* 4. Adaptive Corporate Image Container Box Layout */
.mal-services-visual-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.mal-services-image-frame {
    width: 100%;
    background-color: #F8FAFC; /* Light gray technical pedestal under image */
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(17, 18, 21, 0.02);
}

.mal-services-graphics {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    filter: grayscale(0.1);
    transition: all 0.4s ease;
}

.mal-services-image-frame:hover .mal-services-graphics {
    filter: grayscale(0); /* Light interactive proactivation on mouse proximity */
}

/* ==========================================================================
   MOTOART LOGISTICS - SERVICES LOWER BLOCK & RESPONSIVE MATRIX (style.css)
   ========================================================================== */

.mal-services-lower-block {
    padding-top: 50px;
    padding-bottom: 100px;
}

/* 1. Responsive Grid Structural Reconfiguration Framework */

/* Active color shift for inner highlight borders inside the second block */
.mal-services-lower-block .mal-text-accent {
    border-bottom-color: #00A3AD; /* Connects to Marine Teal track inside section 2 */
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 (Laptops and Tablets Layout Sizing Grid)
   ========================================================================== */
@media (max-width: 1024px) {
    .mal-services-upper-block { padding-top: 80px; padding-bottom: 40px; }
    .mal-services-lower-block { padding-top: 40px; padding-bottom: 80px; }
    
    /* Compresses the layout gap for medium browser viewports */
    .mal-services-split-grid,
    .mal-services-split-grid.mal-grid-reverse {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .mal-services-main-title { font-size: 32px; }
    .mal-services-lead-text { margin-bottom: 30px; }
    .mal-services-image-frame { padding: 12px; }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Fluid Stack Transformation)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-services-upper-block { padding-top: 60px; padding-bottom: 30px; }
    .mal-services-lower-block { padding-top: 30px; padding-bottom: 60px; }
    
    /* Collapses everything to absolute 1-column rail flow stack */
    .mal-services-split-grid,
    .mal-services-split-grid.mal-grid-reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    /* Forces visual graphics elements to position below text on mobile displays */
    .mal-services-split-grid.mal-grid-reverse .mal-services-visual-side {
        order: 1;
    }
    
    .mal-services-content-side {
        align-items: center;
        text-align: center;
    }
    
    .mal-services-badge { align-self: center; margin-bottom: 16px; }
    .mal-services-main-title { text-align: center; font-size: 24px; }
    .mal-services-lead-text { text-align: center; font-size: 14px; margin-bottom: 35px; }
    
    /* Detailed services cards inner smartphone re-alignment */
    .mal-service-detail-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 16px;
    }
    
    .mal-service-text-box {
        align-items: center;
        text-align: center;
    }
    
    .mal-service-inner-title { font-size: 15px; text-align: center; }
    .mal-service-inner-desc { text-align: center; font-size: 13px; }
    
    .mal-services-image-frame {
        max-width: 440px;
        margin: 0 auto;
        padding: 10px;
    }
}



/* ==========================================================================
   MOTOART LOGISTICS - AUCTIONS PLATFORMS GRID MODULE (style.css)
   ========================================================================== */

/* Base Spatial Setups for Auctions Page Templates */
.mal-auctions-upper-block,
.mal-auctions-lower-block {
    width: 100%;
    position: relative;
    background-color: #FFFFFF; /* Pure white interior canvas */
    color: #111215;
    overflow: hidden;
}

.mal-auctions-upper-block {
    padding-top: 25px;
    padding-bottom: 50px;
}

/* Strategic Header Text Alignment Nodes */
.mal-auctions-header-group {
    max-width: 800px;
    margin-bottom: 65px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mal-auctions-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #00A3AD; /* Linked to Marine Teal variable token */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.mal-auctions-main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 4.5vw, 46px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
}

.mal-auctions-lead-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    color: #475569; /* Deep contrast text slate */
    line-height: 1.65;
    margin-bottom: 0;
    text-align: justify;
}

/* 3-Column Automotive Grid Layout Matrix */
.mal-auctions-platforms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.mal-auction-platform-card {
    background-color: #F8FAFC; /* Light gray technical canvas card layout */
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-auction-platform-card:hover {
    background-color: #FFFFFF;
    border-color: rgba(0, 163, 173, 0.4); /* Highlight shift to Marine Teal */
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(17, 18, 21, 0.04);
}

/* Stylized Logo Placeholder Area for Branding Text Labels */
.mal-platform-logo-box {
    background-color: #111215; /* Contrasting brand dark pedestal label */
    padding: 10px 20px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.mal-brand-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #FFFFFF;
}

.mal-auction-platform-card:nth-child(2) .mal-platform-logo-box {
    background: #103255;
}

.mal-platform-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 12px;
}

.mal-platform-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: justify;
}

.mal-platform-cta-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111215;
    background-color: transparent;
    border: 1px solid #111215;
    border-radius: 4px;
    padding: 12px 24px;
    width: 100%;
    cursor: pointer;
    margin-top: auto;
    transition: all 0.3s ease;
    text-align: center;
}

.mal-platform-cta-btn:hover {
    background-color: #111215;
    color: #FFFFFF;
}


/* ==========================================================================
   MOTOART LOGISTICS - INDUSTRIAL EQUIPMENT & TIMELINE MATRIX (style.css)
   ========================================================================== */

.mal-auctions-lower-block {
    padding-top: 20px;
    padding-bottom: 100px;
}

/* 1. Heavy Industrial Platforms Grid Layout */
.mal-industrial-section-title-group {
    max-width: 760px;
    margin-bottom: 50px;
}

.mal-auctions-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 12px;
}

.mal-auctions-section-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
}

.mal-industrial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 80px;
    width: 100%;
}

.mal-industrial-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 30px;
}

.mal-industrial-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 30px;
    transition: 0.2s;
}

.mal-industrial-item:hover {
    transition: 0.2s;
    margin: -5px auto 5px;
}

.tocattech {
	display: block;
    border: 1px solid #e8ca67;
    width: 100%;
    border-radius: 4px;
    text-align: center;
    margin: 20px auto 0;
    padding: 10px 0;
    font-weight: 600;
    transition: 0.2s;
}

.tocattech:hover {
    transition: 0.2s;
    color: #fff;
    background: #e8ca67;
}

.mal-industrial-item .mal-ind-icon {
    font-size: 24px;
    color: #e8ca67; /* Connected to Racing Orange token */
    background-color: rgba(255, 59, 0, 0.06);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.mal-industrial-item:nth-child(2) .mal-ind-icon {
    color: #00A3AD; /* Connected to Marine Teal token */
    background-color: rgba(0, 163, 173, 0.06);
}

.mal-industrial-item:nth-child(3) .mal-ind-icon {
    color: #103255; /* Connected to Marine Teal token */
    background-color: rgba(0, 163, 173, 0.06);
}

.mal-industrial-item h4 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 8px;
}

.mal-industrial-item p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 0;
}

/* 2. Dynamic Step-by-Step Human Guide Rail (Horizontal Timeline) */
.mal-steps-guide-container {
    width: 100%;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 50px 40px;
}

.mal-steps-main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 45px;
    text-align: center;
    letter-spacing: -0.01em;
}

.mal-steps-timeline-rail {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    position: relative;
}

.mal-timeline-step-node {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
}

.mal-step-counter-badge {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #FFFFFF;
    background-color: #111215;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.mal-timeline-step-node h5 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 8px;
}

.mal-timeline-step-node p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 (Laptops and Tablets Layout Scaling)
   ========================================================================== */
@media (max-width: 1024px) {
    .mal-auctions-upper-block { padding-top: 80px; padding-bottom: 40px; }
    .mal-auctions-lower-block { padding-top: 40px; padding-bottom: 80px; }
    .mal-auctions-header-group { margin-bottom: 40px; }
    
    .mal-auctions-platforms-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .mal-auctions-platforms-grid .mal-auction-platform-card:nth-child(3) {
        grid-column: 1 / 3; /* Centers the third card inside tablet viewports */
    }
    
    .mal-industrial-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        margin-bottom: 60px;
    }
    
    .mal-industrial-grid .mal-industrial-item:nth-child(3) {
        grid-column: 1 / 3;
    }
    
    .mal-steps-timeline-rail {
        grid-template-columns: 1fr; /* Timeline re-orients early to clean row cascade */
        gap: 30px;
    }
    
    .mal-steps-guide-container { padding: 40px 30px; }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Fluid Stack Transformation)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-auctions-upper-block { padding-top: 60px; padding-bottom: 30px; }
    .mal-auctions-lower-block { padding-top: 30px; padding-bottom: 60px; }
    
    .mal-auctions-header-group {
        align-items: center;
        text-align: center;
        margin-bottom: 35px;
    }
    
    .mal-auctions-badge { align-self: center; margin-bottom: 16px; }
    .mal-auctions-main-title { text-align: center; font-size: 24px; }
    .mal-auctions-lead-text { text-align: center; font-size: 14px; }
    
    /* Collapse automotive platforms grid to absolute single row cascade */
    .mal-auctions-platforms-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .mal-auctions-platforms-grid .mal-auction-platform-card:nth-child(3) {
        grid-column: auto;
    }
    
    .mal-auction-platform-card {
        padding: 30px 20px;
        align-items: center;
        text-align: center;
    }
    
    .mal-platform-desc { text-align: center; font-size: 13px; margin-bottom: 24px; }
    .mal-platform-cta-btn { width: 100%; }
    
    /* Collapse industrial platforms grid layout */
    .mal-industrial-section-title-group { text-align: center; margin-bottom: 35px; }
    .mal-auctions-section-title { font-size: 20px; text-align: center; }
    .mal-auctions-section-subtitle { text-align: center; font-size: 13px; }
    
    .mal-industrial-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 45px;
    }
    
    .mal-industrial-grid .mal-industrial-item:nth-child(3) {
        grid-column: auto;
    }
    
    .mal-industrial-item {
        padding: 24px 20px;
        align-items: center;
        text-align: center;
    }
    
    .mal-industrial-item .mal-ind-icon { margin-bottom: 16px; }
    .mal-industrial-item p { text-align: center; font-size: 12.5px; }
    
    /* Timeline smartphone re-alignment setup */
    .mal-steps-guide-container { padding: 35px 20px; }
    .mal-steps-main-title { font-size: 16px; margin-bottom: 35px; }
    
    .mal-timeline-step-node {
        align-items: center;
        text-align: center;
    }
    
    .mal-step-counter-badge { margin-bottom: 12px; }
    .mal-timeline-step-node h5 { font-size: 14px; text-align: center; }
    .mal-timeline-step-node p { text-align: center; font-size: 12.5px; }
}


/* ==========================================================================
   MOTOART LOGISTICS - CONTACTS INFRASTRUCTURE MATRIX (style.css)
   ========================================================================== */

/* Layout Foundations for Contacts Page Templates */
.mal-contacts-upper-block,
.mal-contacts-lower-block {
    width: 100%;
    position: relative;
    background-color: #FFFFFF; /* Pure white interior canvas */
    color: #111215;
    overflow: hidden;
}

.mal-contacts-upper-block {
    padding-top: 25px;
    padding-bottom: 20px;
}

/* 1. Symmetric Two-Column Grid Setup */
.mal-contacts-master-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 70px;
    align-items: center;
}

.mal-contacts-info-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.mal-contacts-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    color: #00A3AD; /* Linked to Marine Teal token */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 24px;
}

.mal-contacts-main-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(26px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    color: #111215;
    margin-bottom: 20px;
}

.mal-contacts-lead-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 15.5px;
    color: #475569; /* Optimal contrast slate gray */
    line-height: 1.65;
    margin-bottom: 35px;
    text-align: justify;
}

/* 2. Rigid Legal Parameters Matrix Layout */
.mal-contacts-data-matrix {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid #E2E8F0;
    background-color: #F8FAFC;
    border-radius: 6px;
    padding: 10px 24px;
}

.mal-contacts-matrix-row {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    border-bottom: 1px dashed #E2E8F0;
}

.mal-contacts-matrix-row:last-child {
    border-bottom: none;
}

.mal-matrix-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #00A3AD; /* Marine Teal accent */
    letter-spacing: 0.05em;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mal-matrix-label i {
    font-size: 12px;
    width: 14px;
    text-align: center;
}

.mal-matrix-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #111215;
    line-height: 1.5;
}

/* 3. Interactive Maps Pedestal Box Frame */
.mal-contacts-map-side {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.mal-contacts-map-container {
    width: 100%;
    height: 400px;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 10px 30px rgba(17, 18, 21, 0.02);
}

.mal-map-placeholder-layer {
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #64748B;
}

.mal-map-placeholder-layer i {
    font-size: 36px;
    color: #00A3AD;
}

.mal-map-placeholder-layer span {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* ==========================================================================
   MOTOART LOGISTICS - COMMUNICATIONS CHANNELS & RESPONSIVE MATRIX (style.css)
   ========================================================================== */

.mal-contacts-lower-block {
    padding-top: 50px;
    padding-bottom: 100px;
}

/* 1. 3-Column Channels Sizing Grid Layout */
.mal-contacts-hub-title-group {
    margin-bottom: 30px;
}

.mal-contacts-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 3.5vw, 32px);
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 12px;
}

.mal-contacts-section-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
}

.mal-communication-rail-grid {
    display: grid;
    gap: 30px;
    margin-bottom: 60px;
    width: 100%;
}

.mal-channel-link-card {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-channel-link-card:hover {
    background-color: #FFFFFF;
    border-color: #00A3AD; /* Linked to Marine Teal core token */
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(17, 18, 21, 0.03);
}

/* Circular Icon Pods with custom background rails for communication vectors */
.mal-channel-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 24px;
}

.mal-channel-icon.mal-chan-phone    { background-color: rgba(255, 59, 0, 0.06); color: #e8ca67; } /* Racing Orange */
.mal-channel-icon.mal-chan-whatsapp { background-color: rgba(37, 211, 102, 0.08); color: #25D366; } /* WhatsApp Green */
.mal-channel-icon.mal-chan-telegram { background-color: rgba(34, 158, 217, 0.08); color: #229ED9; } /* Telegram Blue */

.mal-channel-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 10px;
}

.mal-channel-card-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 24px;
    text-align: justify;
}

/* Action Trigger Buttons for links */
.mal-channel-trigger-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #111215;
    text-decoration: none;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 12px 24px;
    border-radius: 4px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: auto; /* Forces structural linear alignment anchor */
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-channel-link-card:hover .mal-channel-trigger-btn {
    background-color: #111215; /* Inverted corporate fill on hover */
    border-color: #111215;
    color: #FFFFFF;
}

/* 2. Lower Compliance Notice Block */
.mal-contacts-compliance-footer {
    width: 100%;
    border-top: 1px solid #E2E8F0;
    padding-top: 35px;
}

.mal-contacts-compliance-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    color: #64748B;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}

.mal-contacts-compliance-text i {
    color: #00A3AD;
    margin-right: 6px;
}

.mal-text-dark-bold {
    color: #111215;
    font-weight: 700;
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 (Laptops and Tablets Layout Split)
   ========================================================================== */
@media (max-width: 1024px) {
    .mal-contacts-upper-block { padding-top: 80px; padding-bottom: 40px; }
    .mal-contacts-lower-block { padding-top: 40px; padding-bottom: 80px; }
    
    .mal-contacts-master-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    
    .mal-contacts-main-title { font-size: 32px; }
    .mal-contacts-lead-text { margin-bottom: 24px; }
    .mal-contacts-map-container { height: 340px; padding: 12px; }
    
    .mal-communication-rail-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    /* Forces Telegram box card to center width on medium viewports layout */
    .mal-communication-rail-grid .mal-channel-link-card:nth-child(3) {
        grid-column: 1 / 3;
    }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Fluid Stack Reconfiguration)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-contacts-upper-block { padding-top: 60px; padding-bottom: 30px; }
    .mal-contacts-lower-block { padding-top: 30px; padding-bottom: 60px; }
    
    .mal-contacts-master-grid {
        grid-template-columns: 1fr; /* Rigid stack to absolute single column flow */
        gap: 40px;
    }
    

	
    .mal-contacts-map-side {
        order: 1;
    }
    
    .mal-contacts-info-side {
        align-items: center;
        text-align: center;
    }
    
    .mal-contacts-badge { align-self: center; margin-bottom: 16px; }
    .mal-contacts-main-title { text-align: center; font-size: 24px; }
    .mal-contacts-lead-text { text-align: center; font-size: 14px; margin-bottom: 30px; }
    
    .mal-contacts-data-matrix { padding: 10px 16px; }
    .mal-matrix-label { justify-content: center; text-align: center; }
    .mal-matrix-value { text-align: center; font-size: 13px; }
    .mal-contacts-map-container { height: 280px; padding: 10px; max-width: 440px; margin: 0 auto; }
    
    /* Lower hub communication grid compression */
    .mal-contacts-hub-title-group { text-align: center; margin-bottom: 35px; }
    .mal-contacts-section-title { font-size: 20px; text-align: center; }
    .mal-contacts-section-subtitle { text-align: center; font-size: 13px; }
    
    .mal-communication-rail-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 45px;
    }
    
    .mal-communication-rail-grid .mal-channel-link-card:nth-child(3) {
        grid-column: auto;
    }
    
    .mal-channel-link-card {
        padding: 30px 20px;
        align-items: center;
        text-align: center;
    }
    
    .mal-channel-icon { margin-bottom: 16px; }
    .mal-channel-card-text { text-align: center; font-size: 12.5px; margin-bottom: 20px; }
    .mal-channel-trigger-btn { width: 100%; }
    .mal-contacts-compliance-text { text-align: center; font-size: 12.5px; }
}


/* ==========================================================================
   CONTACTS RE-VISUALIZATION: GRAPHICS INFRASTRUCTURE REPLACEMENT (style.css)
   ========================================================================== */

/* 1. Decommission Old Fixed Map Pedestal Sizing Rules */
.mal-contacts-map-container, 
.mal-map-placeholder-layer {
    display: none; /* Safely purges old map rendering pipelines */
}

/* 2. Deploy Premium Corporate Image Container Frame Layout */
.mal-contacts-image-wrapper-frame {
    width: 100%;
    background-color: #F8FAFC; /* Light gray technical pedestal under image asset */
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 16px;
    position: relative;
    box-shadow: 0 10px 30px rgba(17, 18, 21, 0.02);
    overflow: hidden;
}

.mal-contacts-hero-graphics {
    width: 100%;
    height: auto;
    max-height: 440px; /* Secure comfortable layout bounding heights */
    object-fit: cover;
    display: block;
    border-radius: 4px;
    filter: grayscale(0.1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* High-tech micro-overlay tracking badge */
.mal-graphics-status-tag {
    position: absolute;
    top: 30px;
    right: 30px;
    background-color: #111215;
    color: #FFFFFF;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.mal-graphics-status-tag i {
    color: #00A3AD; /* Crisp link to Marine Teal accent */
}

/* Interactive Hover Sync Transformation */
.mal-contacts-image-wrapper-frame:hover .mal-contacts-hero-graphics {
    filter: grayscale(0);
    transform: scale(1.02);
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Visual Frame Compression)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-contacts-image-wrapper-frame {
        max-width: 440px;
        margin: 0 auto;
        padding: 10px;
    }
    
    .mal-contacts-hero-graphics {
        max-height: 280px; /* Optimal bounding box for vertical mobile viewports */
    }
    
    .mal-graphics-status-tag {
        top: 22px;
        right: 22px;
    }
}



/* ==========================================================================
   MOTOART LOGISTICS - ENTERPRISE FOOTER MASTER GRID CONFIGURATION (style.css)
   ========================================================================== */

.mal-core-footer {
    width: 100%;
    background-color: #F8FAFC; /* Clean light gray canvas layer from our light manual */
    border-top: 1px solid #E2E8F0;
    padding: 70px 0 50px 0;
    position: relative;
    z-index: 100;
	margin-top: 50px;
}

/* 4-Column Asymmetric Master Grid Sync (3 Equal Trust Columns + 1 Extended Branding Column) */
.mal-footer-master-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) 1.2fr;
    gap: 40px;
    align-items: stretch;
}

/* 1. Left Side: Trust Columns Configuration with Technical Separators */
.mal-footer-trust-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    position: relative;
    padding-right: 20px;
}

/* Technical Wireframe Vertical Separator Lines */
.mal-footer-trust-col::after {
    content: '';
    position: absolute;
    top: 10px;
    right: -20px;
    width: 1px;
    height: 80%; /* Proportional height allocation */
    background-color: #CBD5E1; /* Clean soft slate gray separator line */
}

.gr_req {
	line-height: 3 !important;
    margin-left: 15px;
}
	
.gr_req a {
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 9px 10px !important;
    transition: 0.2s;
}

.gr_req a:hover {
    transition: 0.2s;
    background: #103255 !important;
    color: #fff !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success]>.wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #1032550d !important;
    border: 1px solid #103255 !important;
}

/* Exclude separator line from the third column to prevent overlap with branding zone */
.mal-footer-master-grid > .mal-footer-trust-col:nth-child(3)::after {
    display: none;
}

/* Icon Box Sizing and Color Control with Font Awesome 6.2.1 support */
.mal-footer-icon-box {
    font-size: 28px; /* Clean thin style */
    color: #111215;
    margin-bottom: 20px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-footer-trust-col:hover .mal-footer-icon-box {
    color: #e8ca67; /* Connected to Racing Orange token */
    transform: translateY(-2px);
}

.mal-footer-col-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 12px;
    letter-spacing: 0.05em;
}

.mal-footer-col-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: justify;
}
/* ==========================================================================
   MOTOART LOGISTICS - FOOTER BRANDING, LEGAL TAGS & RESPONSIVE MATRIX
   ========================================================================== */

/* 1. Right Side: Extended Branding Column Layout */
.mal-footer-branding-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.mal-footer-brand-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #111215;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.mal-footer-brand-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 2. Integrated B2B Legal Links Tags System (Privacy, Terms, Disclaimer) */
.mal-footer-legal-tags-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
    width: 100%;
}

.mal-footer-legal-tag {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: #475569;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 6px 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-footer-legal-tag:hover {
    color: #103255; /* Connected to brand Marine Teal */
    border-color: #103255;
    transform: translateY(-1px);
}

/* 3. Communication Vector Links Infrastructure */
.mal-footer-communication-vectors {
    display: flex;
    gap: 12px;
    margin-bottom: 25px;
}

.mal-vector-link-node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-vector-link-node:hover {
    color: #FFFFFF;
    background-color: #111215; /* Inverted solid fill on hover */
    border-color: #111215;
}

/* 4. Copyright Operational Footer Note */
.mal-footer-copyright-notice {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 11px;
    color: #64748B;
    margin-top: auto; /* Forces copyright stamp to lock at absolute base line */
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 (Laptops and Tablets Grid Split)
   ========================================================================== */
@media (max-width: 1024px) {
    .mal-core-footer {
        padding: 50px 0 40px 0;
    }
    
    .mal-footer-master-grid {
        grid-template-columns: repeat(2, 1fr); /* Split matrix to balanced 2x2 grid */
        gap: 40px 30px;
    }
    
    .mal-footer-trust-col {
        padding-right: 0;
    }
    
    /* Suppress vertical separator lines for 2-column layer architecture */
    .mal-footer-trust-col::after {
        display: none;
    }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Fluid Stack Transformation)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-footer-master-grid {
        grid-template-columns: 1fr; /* Rigid stack shift to linear cascade */
        gap: 35px;
    }
    
    .mal-footer-trust-col, .mal-footer-branding-col {
        align-items: center;
        text-align: center;
    }
    
    .mal-footer-icon-box {
        margin-bottom: 12px;
        font-size: 26px;
    }
    
    .mal-footer-col-title {
        margin-bottom: 8px;
    }
    
    .mal-footer-brand-desc {
        text-align: center;
    }
    
    .mal-footer-legal-tags-rail {
        justify-content: center; /* Balanced text centering for smartphones navigation */
    }
    
    .mal-footer-communication-vectors {
        justify-content: center;
    }
    
    .mal-footer-copyright-notice {
        margin-top: 10px;
    }
}

.footslink {
    color: #64748B;
}


    /* ==========================================================================
       MOTOART LOGISTICS - AUTONOMOUS ELEMENTOR CTA BOX STYLES
       ========================================================================== */

    /* Core Outer Block Shield */
    .mal-elementor-cta-wrapper {
        width: 100%;
        padding: 0 0;
        background-color: #FFFFFF; /* Pure white canvas integration */
    }

    /* Inner Framework Box with soft slate border and technical background */
    .mal-elementor-cta-box {
        background-color: #F8FAFC; /* Clean technical pedestal gray */
        border: 1px solid #E2E8F0;
        border-radius: 0;
        padding: 40px;
        display: grid;
        grid-template-columns: 1.3fr 0.7fr; /* Grid split for info and button */
        gap: 40px;
        align-items: center;
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Tactical Brand Highlight Shift to Racing Orange */
    .mal-elementor-cta-box:hover {
        border-color: #ccc;
        box-shadow: 0 15px 35px rgba(17, 18, 21, 0.03);
    }

    /* Content Layout Alignment */
    .mal-elementor-cta-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .mal-elementor-cta-title {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 20px;
        font-weight: 700;
        text-transform: uppercase;
        color: #111215;
        margin-bottom: 12px;
        letter-spacing: -0.01em;
    }

    .mal-elementor-cta-desc {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13.5px;
        color: #475569; /* Deep contrast slate text gray */
        line-height: 1.6;
        margin-bottom: 0;
        text-align: justify;
    }

    /* Action Trigger Button Mechanics */
    .mal-elementor-cta-action {
        display: flex;
        justify-content: flex-end;
        width: 100%;
    }

    .mal-elementor-whatsapp-trigger {
        font-family: 'Space Grotesk', sans-serif;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #FFFFFF;
        background-color: #111215; /* Monolithic dark button */
        border: 1px solid #111215;
        text-decoration: none;
        padding: 14px 32px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        white-space: nowrap;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

 .mal-elementor-whatsapp-trigger:hover {
        background-color: #103255;
        border-color: #103255;
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 8px 20px #10325529;
    }

    .mal-elementor-whatsapp-trigger i {
        font-size: 16px;
    }

    /* ==========================================================================
       ADAPTIVE MATRIX LAYER 2 (Tablets Layout Scaling Frame)
       ========================================================================== */
    @media (max-width: 1024px) {
        .mal-elementor-cta-box {
            grid-template-columns: 1.1fr 0.9fr;
            gap: 30px;
            padding: 35px 30px;
        }
        
        .mal-elementor-cta-title { font-size: 18px; }
    }

    /* ==========================================================================
       ADAPTIVE MATRIX LAYER 3 (Smartphones Fluid Stack Transformation)
       ========================================================================== */
    @media (max-width: 768px) {
        .mal-elementor-cta-box {
            grid-template-columns: 1fr; /* Rigid collapse to 1-Column vertical stack */
            gap: 24px;
            padding: 30px 20px;
        }

        .mal-elementor-cta-info {
            align-items: center;
            text-align: center;
        }

        .mal-elementor-cta-title { text-align: center; font-size: 16px; }
        .mal-elementor-cta-desc { text-align: center; font-size: 13px; }

        .mal-elementor-cta-action {
            justify-content: center;
        }

        .mal-elementor-whatsapp-trigger {
            width: 100%; /* Full-width mobile trigger action link button */
            justify-content: center;
        }
    }

td ul {
    list-style: none;
}

/* ==========================================================================
   MOTOART LOGISTICS - RELATED PRODUCTS RANDOM INJECTOR ENGINE (style.css)
   ========================================================================== */

.mal-related-products-section {
    width: 100%;
    position: relative;
    background-color: #FFFFFF; /* Pure white interior canvas */
    border-top: 1px solid #E2E8F0;
    padding: 80px 0 100px 0;
}

/* Strategic Section Header Group */
.mal-related-header-group {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 50px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mal-related-section-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.mal-related-section-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13.5px;
    color: #64748B;
    line-height: 1.5;
}

/* 4-Column Rigid Grid Matrix Sync */
.mal-related-grid-matrix {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

/* Individual Product Node Configuration */
.mal-related-product-card {
    background-color: #F8FAFC; /* Light gray technical pedestal */
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.mal-related-product-card:hover {
    background-color: #FFFFFF;
    border-color: rgba(255, 59, 0, 0.3); /* Tactical shift to brand Racing Orange */
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(17, 18, 21, 0.04);
}

/* Fixed Image Bounding Frame with Proportional Safety */
.mal-related-card-image-box {
    width: 100%;
    height: 180px;
    background-color: #F1F5F9;
    border-bottom: 1px solid #E2E8F0;
    position: relative;
    overflow: hidden;
}

.mal-related-card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(0.1);
    transition: all 0.4s ease;
}

.mal-related-product-card:hover .mal-related-card-thumb {
    filter: grayscale(0);
    transform: scale(1.03);
}

/* Technical Placeholder Layer if Thumbnail is Empty */
.mal-thumb-placeholder-layer {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #94A3B8;
}

.mal-thumb-placeholder-layer i {
    font-size: 24px;
}

/* Content Matrix Padding Tracking */
.mal-related-card-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mal-related-card-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    color: #111215;
    margin-bottom: 8px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.mal-related-card-excerpt {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12.5px;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Target Trigger Navigation Buttons Aligned Globally */
.mal-related-card-link-btn {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #111215;
    text-decoration: none;
    border: 1px solid #E2E8F0;
    background-color: #FFFFFF;
    padding: 10px 16px;
    border-radius: 4px;
    text-align: center;
    margin-top: auto; /* Pin target nodes strictly to identical horizontal line */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.mal-related-product-card:hover .mal-related-card-link-btn {
    background-color: #111215;
    border-color: #111215;
    color: #FFFFFF;
}

.mal-related-card-link-btn i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.mal-related-card-link-btn:hover i {
    transform: translateX(3px); /* Interactive micro-arrow nudge */
}


:root {
  --navy-deep: #0B2545;
  --navy-medium: #134074;
  --gold-liquid: #D4AF37;
  --gold-hover: #AA8717;
  --white-pure: #FFFFFF;
  --zinc-light: #F4F5F6;
  --slate-dark: #1F2421;
  --shadow-subtle: 0 10px 30px rgba(11, 37, 69, 0.08);
  --shadow-strong: 0 20px 40px rgba(11, 37, 69, 0.15);
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-ultra: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.logistics-graphic-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 40px;
  perspective: 1200px;
  width: 100%;
}

.freight-laser-grid {
  position: absolute;
  width: 120%;
  height: 120%;
  background-size: 25px 25px;
  background-image: 
    linear-gradient(to right, rgba(214, 175, 55, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214, 175, 55, 0.04) 1px, transparent 1px);
  z-index: 1;
  pointer-events: none;
  transform: translateZ(-50px);
}

.interactive-shipping-container {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: transparent;
  z-index: 2;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}

.container-svg-model {
  display: block;
  width: 100%;
  height: auto;
  transform-style: preserve-3d;
  transition: var(--transition-ultra);
}

.freight-tier {
  cursor: pointer;
  transform-style: preserve-3d;
  transition: var(--transition-smooth);
}

.tier-bg {
  transition: var(--transition-smooth);
}

.cargo-boxes rect {
  transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
              fill 0.4s ease, 
              opacity 0.4s ease;
  transform-origin: center;
}

.tier-indicator {
  transition: var(--transition-ultra);
}

.tier-lock {
  transition: var(--transition-smooth);
}

/* --- DETAILED INTERACTION CODES --- */

.logistics-graphic-container:hover .interactive-shipping-container {
  transform: rotateY(-18deg) rotateX(6deg) translateZ(30px);
  filter: drop-shadow(0 30px 50px rgba(11, 37, 69, 0.25));
}

.freight-tier:hover {
  transform: translateZ(15px);
}

.freight-tier:hover .tier-bg {
  fill: rgba(214, 175, 55, 0.08) !important;
  stroke: var(--gold-liquid) !important;
  stroke-dasharray: none !important;
  stroke-width: 2.5px !important;
  filter: drop-shadow(0 0 8px rgba(214, 175, 55, 0.4));
}

.freight-tier:hover .cargo-boxes rect {
  fill: url(#cargo-gold-glow) !important;
  opacity: 1 !important;
  transform: scale(1.05);
}

.freight-tier:hover .tier-indicator {
  fill: var(--gold-liquid) !important;
  stroke: var(--white-pure) !important;
  stroke-width: 1.5px !important;
  transform: scale(1.2) translateZ(5px);
}

.freight-tier:hover .tier-lock {
  fill: var(--navy-deep) !important;
}

/* --- TECHNICAL MARKERS CONFIGURATION --- */

.corner-spec {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--gold-liquid);
  z-index: 3;
  opacity: 0.3;
  transition: var(--transition-ultra);
}

.corner-tl { top: -10px; left: -10px; border-right: none; border-bottom: none; }
.corner-tr { top: -10px; right: -10px; border-left: none; border-bottom: none; }
.corner-bl { bottom: -10px; left: -10px; border-right: none; border-top: none; }
.corner-br { bottom: -10px; right: -10px; border-left: none; border-top: none; }

.logistics-graphic-container:hover .corner-spec {
  opacity: 1;
  width: 24px;
  height: 24px;
  border-color: var(--gold-hover);
}

/* --- VOLUMETRIC GRID SHINE EFFECT --- */

.logistics-graphic-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right, 
    transparent 0%, 
    rgba(214, 175, 55, 0.08) 50%, 
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
  z-index: 4;
}

.logistics-graphic-container:hover::after {
  left: 150%;
  transition: left 1.5s ease-in-out;
}

/* --- MOBILE RESPONSIVE ADAPTABILITY --- */

@media (max-width: 1024px) {
  .logistics-graphic-container {
    width: 100%;
    max-width: 400px;
    margin: 40px auto 0 auto;
    padding: 20px;
  }
  .container {
        width: 1000px;
    }
  .logistics-graphic-container:hover .interactive-shipping-container {
    transform: rotateY(-10deg) rotateX(3deg) translateZ(10px);
  }
}

@media (max-width: 480px) {
  .logistics-graphic-container {
    max-width: 320px;
  }
  
  .corner-spec {
    width: 10px;
    height: 10px;
  }
}

/* --- MODAL INFRASTRUCTURE BACKDROP --- */
.modal-overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(6, 21, 39, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Active State triggered by JavaScript */
.modal-overlay-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* --- MODAL WINDOW WRAPPER --- */
.modal-window-wrapper {
  background-color: var(--white-pure);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  border-radius: 6px;
  border-top: 5px solid var(--gold-liquid);
  box-shadow: 0 30px 60px rgba(6, 21, 39, 0.3);
  position: relative;
  padding: 50px 45px 40px 45px;
  overflow-y: auto;
  transform: scale(0.9) translateY(30px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
}

.modal-overlay-backdrop.is-active .modal-window-wrapper {
  transform: scale(1) translateY(0);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--zinc-light);
  transition: var(--transition-smooth);
  font-size: 0;
}

.modal-close-btn:hover {
  color: var(--navy-deep);
  background-color: rgba(214, 175, 55, 0.15);
  transform: rotate(90deg);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0;
}

.close-icon-svg {
  display: block;
}

/* --- MODAL HEADER CONTENT --- */
.modal-header-block {
  margin-bottom: 35px;
  text-align: left;
}

.modal-meta-tag {
    display: inline-block;
    color: var(--gold-liquid);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0;
}

.modal-header-block h2 {
  font-size: 30px;
  color: var(--navy-deep);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 15px;
}

.modal-header-block p {
    font-size: 14px;
    line-height: 1.55;
    color: #555c65;
    margin: 0 0 -25px 0;
}

.wpforms-container .wpforms-field,
.wp-core-ui div.wpforms-container .wpforms-field {
    padding: 10px 0 !important;
}

.modal-wpforms-carrier {
  width: 100%;
  margin-bottom: 30px;
}

/* CSS Override for WPForms internal padding when rendering inside modal */
.modal-wpforms-carrier .wpforms-container {
  padding: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Temporary visual alignment utility for development */
.wpforms-placeholder-notice {
  padding: 20px;
  background-color: var(--zinc-light);
  border: 1px dashed #d5dadf;
  border-radius: 4px;
  text-align: center;
  font-size: 13px;
  color: var(--navy-medium);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: none; /* Hide this when actual WPForms is active */
}

/* --- MODAL SECURITY FOOTER --- */
.modal-footer-security {
  margin-top: auto;
  padding-top: 25px;
  border-top: 1px solid rgba(19, 64, 116, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  color: #7f8c8d;
}

.modal-footer-security svg {
  color: var(--navy-medium);
  flex-shrink: 0;
}

.modal-footer-security span {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 500;
}

/* --- RESPONSIVE MODAL ADAPTABILITY --- */
@media (max-width: 768px) {
  .modal-window-wrapper {
    padding: 40px 25px 30px 25px;
    max-height: 95vh;
  }

  .modal-header-block h2 {
    font-size: 24px;
  }
  
  .modal-header-block {
    margin-bottom: 25px;
  }
}



:root {
  --navy-deep: #0B2545;
  --navy-medium: #134074;
  --gold-liquid: #D4AF37;
  --gold-hover: #AA8717;
  --slate-dark: #1F2421;
  --zinc-light: #F4F5F6;
  --white-pure: #FFFFFF;
  --shadow-subtle: 0 10px 30px rgba(11, 37, 69, 0.08);
  --shadow-strong: 0 20px 40px rgba(11, 37, 69, 0.15);
  --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home .section-meta {
  color: var(--gold-liquid);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.home h2 {
  font-size: 38px;
  color: var(--navy-deep);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 25px;
}

/* --- TRADING PILLARS SECTION --- */
.trading-pillars {
  background-color: var(--white-pure);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 50px;
}

.pillar-item {
  padding: 40px;
  border-radius: 4px;
  border-top: 4px solid var(--navy-deep);
  transition: var(--transition-smooth);
}

.pillar-item:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-strong);
  border-top-color: var(--gold-liquid);
}

.pillar-icon {
  font-size: 36px;
  margin-bottom: 25px;
}

.pillar-item h3 {
  font-size: 22px;
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 15px;
}

.pillar-item p {
  font-size: 15px;
  line-height: 1.6;
  color: #555c65;
}

.card-visual {
  width: 80px;
  height: 80px;
  background-color: #F4F5F6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card-visual svg {
  width: 48px;
  height: 48px;
  display: block;
  transition: transform 0.3s ease;
}

.catalog-card:hover .card-visual svg {
  transform: scale(1.1);
}


/* --- CATALOG SHOWCASE SECTION --- */
.home .catalog-showcase {
  background: #fff;
}

.home .section-subtitle {
  font-size: 17px;
  color: #555c65;
  max-width: 700px;
  margin-bottom: 50px;
}

.home .catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.home .catalog-card {
  background-color: var(--white-pure);
  border: 1px solid rgba(19, 64, 116, 0.08);
  border-radius: 4px;
  display: flex;
  padding: 35px;
  gap: 25px;
  transition: var(--transition-smooth);
}

.home .catalog-card:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-strong);
}

.home .card-visual {
  font-size: 45px;
  background-color: var(--zinc-light);
  width: 80px;
  height: 80px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.home .card-body {
  display: flex;
  flex-direction: column;
}

.home .card-body h3 {
  font-size: 20px;
  color: var(--navy-deep);
  margin-bottom: 10px;
  font-weight: 700;
}

.home .card-body p {
  font-size: 14px;
  line-height: 1.5;
  color: #555c65;
  margin-bottom: 20px;
}

.home .card-moq {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--gold-liquid);
  letter-spacing: 0.5px;
  margin-top: auto;
}

/* --- FREIGHT ENGINEERING SECTION --- */
.freight-engineering {
  background-color: var(--white-pure);
  overflow: hidden;
}

.logistics-wrapper {
  display: flex;
  align-items: center;
  gap: 80px;
}

.logistics-content {
  flex: 1;
}

.logistics-content p {
  font-size: 16px;
  line-height: 1.6;
  color: #555c65;
  margin-bottom: 20px;
}

.logistics-metrics {
  display: flex;
  gap: 40px;
  margin-top: 35px;
}

.home .metric-box {
  display: flex;
  flex-direction: column;
  border-left: 3px solid var(--gold-liquid);
  padding-left: 20px;
}

.metric-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-deep);
}

.metric-desc {
  font-size: 13px;
  color: #555c65;
}

.logistics-graphic {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
}

.home .container-box {
  width: 320px;
  height: 240px;
  background-color: var(--navy-deep);
  border-radius: 4px;
  position: relative;
  border: 4px solid var(--navy-medium);
  box-shadow: var(--shadow-strong);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 15px;
}

.home .box-layer {
  height: 30%;
  background-color: rgba(212, 175, 55, 0.15);
  border: 2px dashed var(--gold-liquid);
  border-radius: 2px;
  position: relative;
  transition: var(--transition-smooth);
}

.home .container-box:hover .box-layer {
  background-color: rgba(212, 175, 55, 0.3);
  transform: scaleX(1.03);
}
/* --- B2B RFQ ENGINE SECTION --- */
.home .rfq-engine {
  background: linear-gradient(135deg, var(--navy-deep) 0%, #061527 100%);
  color: var(--white-pure);
  border-radius: 5px;
}

.rfq-form-wrapper {
  display: flex;
  gap: 80px;
  align-items: flex-start;
  padding: 20px 25px;
}

.rfq-info {
  flex: 1;
}

.rfq-info h2 {
  color: var(--white-pure);
}

.rfq-info p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
}

.home .direct-email-card {
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 25px;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.home .direct-email-card span {
  font-size: 13px;
  color: var(--gold-liquid);
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}

.home .direct-email-card a {
  font-size: 22px;
  color: var(--white-pure);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition-smooth);
}

.home .direct-email-card a:hover {
  color: var(--gold-liquid);
}

.home .actual-form {
  flex: 1.2;
  background-color: var(--white-pure);
  padding: 45px;
  border-radius: 4px;
  box-shadow: var(--shadow-strong);
  color: var(--slate-dark);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 25px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.home label {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  text-transform: uppercase;
}

.home input, .home select, .home textarea {
  padding: 14px;
  border: 1px solid #d5dadf;
  border-radius: 4px;
  font-size: 15px;
  font-family: var(--font-main);
  transition: var(--transition-smooth);
  width: 100%;
}

.home input:focus, .home select:focus, .home textarea:focus {
  outline: none;
  border-color: var(--navy-medium);
  box-shadow: 0 0 0 4px rgba(19, 64, 116, 0.1);
}

.home .form-submit-btn {
  background-color: var(--gold-liquid);
  color: var(--navy-deep);
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: var(--transition-smooth);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.home .form-submit-btn:hover {
  background-color: var(--gold-hover);
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

/* --- INTERNATIONAL COMPLIANCE SECTION --- */
.legal-compliance {
  background-color: var(--zinc-light);
}

.compliance-layout {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.compliance-badge {
  display: inline-block;
  background-color: var(--navy-deep);
  color: var(--white-pure);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.compliance-layout p {
  font-size: 16px;
  line-height: 1.6;
  color: #555c65;
  margin-bottom: 50px;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  text-align: left;
}

.compliance-item {
  background-color: var(--white-pure);
  padding: 30px;
  border-radius: 4px;
  box-shadow: var(--shadow-subtle);
}

.comp-icon {
  font-size: 28px;
  display: block;
  margin-bottom: 15px;
}

.compliance-item h4 {
  font-size: 16px;
  color: var(--navy-deep);
  font-weight: 700;
  margin-bottom: 10px;
}

.compliance-item p {
  font-size: 13px;
  line-height: 1.5;
  color: #555c65;
  margin-bottom: 0;
}

/* --- ADVANCED RESPONSIVE GRID LAYOUTS --- */
@media (max-width: 1200px) {
  .pillars-grid { gap: 25px; }
}

@media (max-width: 1024px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 30px; }
  .home .catalog-grid { grid-template-columns: 1fr; }
  .logistics-wrapper { flex-direction: column; gap: 50px; }
  .home .rfq-form-wrapper { flex-direction: column; gap: 50px; }
}

@media (max-width: 768px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .actual-form { padding: 25px; }
  .compliance-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 (Laptops and Tablets Grid Down-scaling)
   ========================================================================== */
@media (max-width: 1024px) {
    .mal-related-products-section { padding: 60px 0 80px 0; }
    .mal-related-header-group { margin-bottom: 40px; }
    
    .mal-related-grid-matrix {
        grid-template-columns: repeat(2, 1fr); /* Split tracks to balanced 2-Column shift */
        gap: 20px;
    }
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 3 (Smartphones Strict Vertical Cascade Stack)
   ========================================================================== */
@media (max-width: 768px) {
    .mal-related-products-section { padding: 50px 0 60px 0; }
    .mal-related-header-group { margin-bottom: 35px; }
    
    .mal-related-grid-matrix {
        grid-template-columns: 1fr; /* Rigid stack collapse into 1-Column rail */
        gap: 20px;
    }
    
    .mal-related-product-card {
        max-width: 400px;
        margin: 0 auto;
        width: 100%;
    }
    
    .mal-related-card-image-box { height: 200px; } /* Enhanced box proportions for touchscreen devices */
}




/* ==========================================================================
   MOTOART LOGISTICS - ARCHIVE CORE FIXED GRID MODULE (style.css)
   ========================================================================== */

/* 1. Reset Native Flex Layout Rails */
.archive .row {
    display: block;
    width: 100%;
}

/* 2. Target Actual Parent Container to Establish a Strict 3-Column Corporate Grid */
.archive .row > .col-md-12 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Locks structural 3-column rail alignment */
    gap: 40px 30px !important; /* Balanced gap distribution track */
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* 3. FIX: Protect Archive Title Area from Grid Wrapping */
.archive header.archive-page-header.text-center {
    grid-column: 1 / 4 !important; /* Forces the category headline to stretch full-width independently */
    width: 100% !important;
    margin: 0;
    float: none !important;
    display: block !important;
}

.archive h1.page-title {
    text-align: left;
}

/* 4. Individual Product Article Cards Structural Layout */
.archive .content-article.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    background: #F8FAFC; /* Premium light gray technical pedestal */
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive .content-article.col-md-6:hover {
    background: #FFFFFF;
    border-color: rgba(0, 163, 173, 0.3); /* Smooth brand Marine Teal border trace */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(17, 18, 21, 0.04);
}

/* 5. Secure Whole Image Display inside Container (object-fit: contain) */
.archive .news-thumb {
    width: 100% !important;
    height: 270px !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 0 !important;
    padding: 0 20px;
}

.archive .news-thumb a,
.archive .news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Displays entire vehicle profile without any cropping */
    display: block !important;
    background-color: #FFFFFF !important;
}

/* 6. Typography Matrix Padding & Text Setup */
.archive .single-head,
.archive .post-excerpt {
    padding: 0 24px !important;
}

.archive .single-head {
    padding-top: 24px !important;
    margin-bottom: 8px !important;
}

.archive .entry-title,
.archive .entry-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #111215 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
}

.archive .post-excerpt p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important; /* Clear native margins to inject the button spacer */
    text-align: justify;
}



/* 8. Pure out all unnecessary Retail/Blog Metadata Noise */
.archive .post-meta,
.archive .article-meta,
.archive .time,
.archive .entry-meta,
.archive header.archive-page-header .description {
    display: none !important; /* Erases dates, author links, and toggle tags */
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 & 3 (Tablets & Smartphones Fluid Grid Re-routing)
   ========================================================================== */
@media (max-width: 1024px) {
    .archive .row > .col-md-12 {
        grid-template-columns: repeat(2, 1fr) !important; /* Splits tracks to 2 columns for tablet screens */
        gap: 24px !important;
    }
    
    .archive header.archive-page-header.text-center {
        grid-column: 1 / 3 !important;
    }
}

@media (max-width: 768px) {
    .archive .row > .col-md-12 {
        grid-template-columns: 1fr !important; /* Cascades into single-column vertical stack flow */
        gap: 20px !important;
    }
    
    .archive header.archive-page-header.text-center {
        grid-column: 1 / 2 !important;
        margin-bottom: 25px !important;
    }
    
    .archive .content-article.col-md-6 {
        max-width: 400px;
        margin: 0 auto !important;
    }
    
    .archive .news-thumb {
        height: 180px !important;
    }
}


    .mal-sticky-whatsapp-rail {
        position: fixed;
        top: 50%; /* Holds the button anchor line strictly at center viewport heights */
        right: 0;
        transform: translateY(-50%); /* Counter-balances top spacing anchor rules */
        z-index: 999999; /* Higher layer values over elementor canvas blocks */
    }

    .mal-sticky-whatsapp-trigger {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: #25D366; /* Official WhatsApp Brand Identity Green */
        border: 1px solid #25D366;
        color: #FFFFFF;
        text-decoration: none;
        padding: 12px 24px;
        border-radius: 6px 6px 0 0; /* Corner geometry profiles for border clamping */
        font-family: 'Space Grotesk', sans-serif;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        white-space: nowrap;
        
        /* Strict vertical hardware-accelerated text rotation alignment */
        transform: rotate(-90deg) translateY(100%);
        transform-origin: bottom right;
        
        will-change: background-color, border-color, box-shadow;
        transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                    box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    /* Proximity hover state transitions */
    .mal-sticky-whatsapp-trigger:hover {
        background-color: #128C7E; /* Deep official darker WhatsApp emerald color track */
        border-color: #128C7E;
        color: #FFFFFF;
        box-shadow: -5px 0 25px rgba(37, 211, 102, 0.25);
    }

    /* Icon layout re-rotation safety */
    .mal-sticky-whatsapp-trigger i {
        font-size: 16px;
        transform: rotate(90deg); /* Re-aligns individual icon position profile */
        display: inline-block;
    }

    /* ==========================================================================
       ADAPTIVE MOBILE VIEWPORT RE-ROUTING PROTECTION
       ========================================================================== */
    @media (max-width: 768px) {
        .mal-sticky-whatsapp-rail {
            top: auto;
            bottom: 120px; /* Safely moves button above standard smartphone browser navigation tab bars */
            transform: none;
        }
        
        .mal-sticky-whatsapp-trigger {
            padding: 10px 18px;
            font-size: 11px;
        }
    }

.podzrec {
	font-family: 'Space Grotesk', sans-serif; font-size: 22px;
	text-transform: uppercase; margin-bottom: 35px; color: #111215; letter-spacing: -0.01em;
}

@media (max-width: 1024px) {
.site-branding-logo {
    max-width: 250px;
}
.podzrec {
	font-size: 20px;
}	
.homebanners h2 {
    max-width: 850px;
    font-size: 30px;
}
.homebanners p {
    max-width: 750px;
    font-size: 16px;
}
.container {
        width: 1000px;
    }
	
}

.wpforms-container {
  flex: 1.2;
  background-color: var(--white-pure) !important;
  padding: 45px !important;
  border-radius: 4px !important;
  box-shadow: var(--shadow-strong) !important;
}

.wpforms-form .wpforms-field-label {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--navy-deep) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px;
  margin-bottom: 8px !important;
}

.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form select,
.wpforms-form textarea {
  padding: 5px 5px 5px 10px !important;
  border: 1px solid #d5dadf !important;
  border-radius: 4px !important;
  font-size: 15px !important;
  font-family: var(--font-main) !important;
  transition: var(--transition-smooth) !important;
  background-color: var(--white-pure) !important;
  color: var(--slate-dark) !important;
  width: 100% !important;
}

.wpforms-form input:focus, 
.wpforms-form select:focus, 
.wpforms-form textarea:focus {
  outline: none !important;
  border-color: var(--navy-medium) !important;
  box-shadow: 0 0 0 4px rgba(19, 64, 116, 0.1) !important;
}

.wpforms-form .wpforms-submit {
  background-color: var(--gold-liquid) !important;
  color: var(--navy-deep) !important;
  border: none !important;
  padding: 13px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border-radius: 4px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: var(--transition-smooth) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.wpforms-form .wpforms-submit:hover {
  background-color: var(--gold-hover) !important;
  box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2) !important;
}


/* ==========================================================================
   MOTOART LOGISTICS - REAL B2B CTA BUTTON FOR POLYLANG TRACK (style.css)
   ========================================================================== */

.mal-archive-cta-btn {
    display: block;
    margin: 15px 24px 10px 24px; /* Pins the button strictly to the card bottom */
    font-family: 'Space Grotesk', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.05em;
    color: #111215;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    padding: 12px;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Card hover proximity trigger: contour shifts to brand Racing Orange */
.archive .content-article.col-md-6:hover .mal-archive-cta-btn {
    border-color: #e8ca67;
    background-color: #e8ca67;
    background: #e8ca67;
    color: #fff;
    transition: 0.3s;
}

/* Individual button direct hover state: full monochrome fill inversion */
.mal-archive-cta-btn:hover {
    background-color: #e8ca67;
    border-color: #e8ca67;
    color: #FFFFFF;
}



/* ==========================================================================
   MOTOART LOGISTICS - ARCHIVE CORE FIXED GRID MODULE (style.css)
   ========================================================================== */

/* 1. Reset Native Flex Layout Rails */
.archive .row {
    display: block;
    width: 100%;
}

/* 2. Target Actual Parent Container to Establish a Strict 3-Column Corporate Grid */
.archive .row > .col-md-12 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* Locks structural 3-column rail alignment */
    gap: 40px 30px !important; /* Balanced gap distribution track */
    width: 100% !important;
    float: none !important;
    padding: 0 !important;
}

/* 3. FIX: Protect Archive Title Area from Grid Wrapping */
.archive header.archive-page-header.text-center {
    grid-column: 1 / 4 !important; /* Forces the category headline to stretch full-width independently */
    width: 100% !important;
    margin: 0;
    float: none !important;
    display: block !important;
}

.archive h1.page-title {
    text-align: left;
}

/* 4. Individual Product Article Cards Structural Layout */
.archive .content-article.col-md-6 {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    background: #F8FAFC; /* Premium light gray technical pedestal */
    border: 1px solid #E2E8F0;
    border-radius: 6px;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.archive .content-article.col-md-6:hover {
    background: #FFFFFF;
    border-color: rgba(0, 163, 173, 0.3); /* Smooth brand Marine Teal border trace */
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(17, 18, 21, 0.04);
}

/* 5. Secure Whole Image Display inside Container (object-fit: contain) */
.archive .news-thumb {
    width: 100% !important;
    height: 270px !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E2E8F0;
    margin-bottom: 0 !important;
    padding: 0 20px;
}

.archive .news-thumb a,
.archive .news-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important; /* Displays entire vehicle profile without any cropping */
    display: block !important;
    background-color: #FFFFFF !important;
}

/* 6. Typography Matrix Padding & Text Setup */
.archive .single-head,
.archive .post-excerpt {
    padding: 0 24px !important;
}

.archive .single-head {
    padding-top: 24px !important;
    margin-bottom: 8px !important;
}

.archive .entry-title,
.archive .entry-title a {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 16px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #111215 !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em;
}

.archive .post-excerpt p {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important; /* Clear native margins to inject the button spacer */
    text-align: justify;
}



/* 8. Pure out all unnecessary Retail/Blog Metadata Noise */
.archive .post-meta,
.archive .article-meta,
.archive .time,
.archive .entry-meta,
.archive header.archive-page-header .description {
    display: none !important; /* Erases dates, author links, and toggle tags */
}

/* ==========================================================================
   ADAPTIVE MATRIX LAYER 2 & 3 (Tablets & Smartphones Fluid Grid Re-routing)
   ========================================================================== */
@media (max-width: 1024px) {
    .archive .row > .col-md-12 {
        grid-template-columns: repeat(2, 1fr) !important; /* Splits tracks to 2 columns for tablet screens */
        gap: 24px !important;
    }
    
    .archive header.archive-page-header.text-center {
        grid-column: 1 / 3 !important;
    }
	.container {
    	width: 100%;
		max-width: 100%;
	}
	.home h2 {
		font-size: 30px;
	}
	.gr_req {
    line-height: 2 !important;
    margin-left: 10px;
	}
	.wpforms-form .wpforms-submit {
    padding: 13px 0 !important;
    font-size: 14px !important;
	}
}

@media (max-width: 768px) {
    .archive .row > .col-md-12 {
        grid-template-columns: 1fr !important; /* Cascades into single-column vertical stack flow */
        gap: 20px !important;
    }
    
    .archive header.archive-page-header.text-center {
        grid-column: 1 / 2 !important;
        margin-bottom: 25px !important;
    }
    
    .archive .content-article.col-md-6 {
        max-width: 400px;
        margin: 0 auto !important;
    }
    
    .archive .news-thumb {
        height: 180px !important;
    }
	.gr_req {
    line-height: 2 !important;
    margin-left: 0;
	}
}









/* Smartphone fluid responsive adjustment matrix layer */
@media (max-width: 768px) {
    .mal-archive-cta-btn {
        margin: 24px 20px;
        padding: 14px;
        font-size: 12px;
    }
}


@media (max-width: 1366px) {
.dropdown-menu  {
    left: unset !important;
    right: 0;
    min-width: 150px;
    background-color: #111215;
}
.site-branding-logo {
    width: 100%;
    max-width: 150px;
}
.top_video {
    margin: -38px 0 0 0;
}
.wpforms-form .wpforms-submit {
    padding: 13px 0 !important;
    font-size: 15px !important;
}
	
	
}


/* ==========================================================================
   MOTOART LOGISTICS - FINAL ARCHIVE MOBILE FIELD OVERRIDE (style.css)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. FIX: Expand Global Archive Container to Prevent Inner Shrinking */
    .archive .container.main-container,
    .archive #site-content .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;  /* Standard exact fields for mobile screens */
        padding-right: 15px !important; /* Balanced symmetry alignment */
        margin: 0 auto !important;
    }

    /* 2. FIX: Reset the Main Structural Grid Carrier Layout */
    .archive .row {
        display: block !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. FIX: Center and Balance the Actual Parent Wrapper Column */
    .archive .row > .col-md-12 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important; /* Clears hidden theme indentation paddings */
        float: none !important; /* Erases float bugs causing left shift gap */
        margin: 0 auto !important;
    }

    /* 4. Product Article Cards Flawless Centering Framework */
    .archive .content-article.col-md-6 {
        display: flex !important;
        flex-direction: column !important;
        flex: none !important;
        width: 100% !important; /* Force expands card body to maximum screen boundaries */
        max-width: 100% !important;
        margin: 0 0 30px 0 !important; /* Beautiful spacing trace below the card block */
        padding: 0 !important;
        float: none !important;
        height: auto !important;
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    /* 5. Marine Asset Display Image Window Bounds Calibration */
    .archive .news-thumb {
        height: 240px !important; /* Enhanced proportional layout target window */
        width: 100% !important;
        background-color: #FFFFFF !important;
        margin-bottom: 0 !important;
    }

    .archive .news-thumb a,
    .archive .news-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Displays complete boat layout profiles */
        display: block !important;
    }

    /* 6. Typography Content Matrix Fine Alignment */
    .archive .single-head {
        padding: 24px 20px 0 20px !important;
        text-align: center !important;
    }

    .archive .entry-title,
    .archive .entry-title a {
        font-family: 'Space Grotesk', sans-serif !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
        color: #111215 !important;
        text-align: center !important;
    }

    .archive .post-excerpt {
        padding: 12px 20px 0 20px !important;
        text-align: center !important;
    }

    .archive .post-excerpt p {
        font-family: 'Plus Jakarta Sans', sans-serif !important;
        font-size: 13.5px !important;
        color: #475569 !important;
        line-height: 1.6 !important;
        text-align: center !important;
        margin-bottom: 0 !important;
}
.heading-row.row {
    align-items: center;
    display: flex !important;
    float: none;
    position: relative;
}
.homebanners h2 {
    max-width: 700px;
    font-size: 28px;
}
.homebanners p {
    max-width: 700px;
    font-size: 15px;
}
	
}

#compliance {
    padding: 50px 0;
    margin: 50px 0 20px;
    border-radius: 5px;
}


@media (max-width: 500px) {
.site-branding-logo {
    max-width: 120px;
}
.wpforms-container {
    padding: 10px !important;
}
.wpforms-form .wpforms-submit {
    padding: 13px 0 !important;
    font-size: 13px !important;
}
h1, .h1 {
    font-size: 25px;
}	
.site-header {
    padding: 0 0 0;
    position: fixed;
    z-index: 98;
    height: 42px;
    top: 0;
    left: 0;
    width: 100%;
}
.hc-nav-trigger span,
.hc-nav-trigger span:after,
.hc-nav-trigger span:before {
    height: 2px;
}	
.hc-offcanvas-nav li:not(.custom-content) a,
.hc-offcanvas-nav li:not(.custom-content) a:hover {
    color: #535050 !important;
}	
.podzrec {
	font-size: 20px;
	text-transform: initial;
}
.homebanners h2 {
    max-width: 100%;
    font-size: 24px;
}	
.homebanners {
    padding: 80px 10px 70px 15px;
}
.homebanners p {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.3;
}	
.hbn_links .hlink_1 a,
.hbn_links .hlink_2 a {
    font-size: 13px;
    padding: 10px 15px;
}	
.hbn_links .hlink_2 {
	margin: 10px 0 0 0;
}
.home .rfq-form-wrapper {
    gap: 40px;
}
.compliance-layout p {
    font-size: 14px;
    line-height: 1.5;
    color: #555c65;
    margin-bottom: 50px;
}
.home h2 {
   font-size: 23px;
}
.rfq-form-wrapper {
    display: flex;
    align-items: normal;
    padding: 20px 20px;
}	
.rfq-info p {
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 25px;
}	
.home .direct-email-card a {
    font-size: 18px;
    font-weight: 600;
}	
.home .direct-email-card span {
    font-size: 13px;
    color: var(--gold-liquid);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 5px;
}
	
	
	
}