
.main-menu-mobile, .sv-widget, .header-options {display: none;}
.innerHeader {background-color: #000;}
.main-header #nav-toggler.collapsed {border-color: transparent;background-color: transparent;border-radius: 0;}
.main-header #nav-toggler:after, .main-header #nav-toggler:before {background-color: #ffffff;content: '';height: 2px;margin-top: 1.5rem;position: absolute;top: 0;transition-delay: 0s;width: 26px;}
.main-header #nav-toggler.collapsed:before {animation: .3s forwards uncrossTopBar;}
.main-header #nav-toggler.collapsed:after {animation: .3s forwards uncrossBottomBar;margin-top: 15px;}
.main-header #nav-toggler:after {content: "\f00d";font-family: "Font Awesome 5 Free";font-weight: 600;color: #ffffff;font-size: 30px;margin-top: 0;background-color: transparent;}
.main-header #nav-toggler.collapsed:after {content: '';background-color: #ffffff;}
.main-header #nav-toggler:before {background-color: transparent;}
.main-header #nav-toggler.collapsed:before {background-color: #ffffff;}
.main-header #nav-toggler {display: none;background: 0 0;border: 0;border-radius: 50%;color: #fff;display: -ms-flexbox;-ms-flex-direction: column;flex-direction: column;height: 45px;min-width: 45px;padding: 0;position: relative;transition: border-color .3s .12s;order: 1;line-height: unset;}
.navbar-light .navbar-toggler {border: 0;position: relative;display: none;}
.navbar-light .navbar-brand {display: none;}
.mm_mbl-logo span {font-size: 24px;color: #fff;font-family: 'TOYOTADISPLAYBOLD';}
.main-menu-mobile .mm_mbl-logo .logo svg {margin-bottom: 20px;}
.bg-dark {background-color: #000000 !important;}
.socials li:nth-child(2) {margin-top: 1rem;width: 100%;font-weight: bold;    /*pointer-events: none;*/;}
.socials ul li:nth-child(n+3) {margin: 0 1rem 0 0;padding-: 1rem;}
.new-model-shape.tab-pane:before {top: 10px;}
div#newModelTabContentBAIC {margin-top: 2rem;}
input[type="checkbox"] {accent-color: #000;}
.bootstrap-datetimepicker-widget table td.active, .bootstrap-datetimepicker-widget table td.active:hover {background-color: #000;}
.select2-container--default .select2-results__option--highlighted[aria-selected] {background-color: #bf0100;color: #000;}
.new-model-shape.tab-pane:before {top: 10px;}
.socials li:nth-child(2) {width: unset;margin: 0 1rem 0 0;}
div#newModelTabContentBAIC {margin-top: 2rem;}
.copyright a {pointer-events: none;font-size: .8rem;}
.select2-container--default .select2-results__option--highlighted[aria-selected], .custom-control-input:checked~.custom-control-label::before {background-color: #adb5bd;border-color: #adb5bd;color: #000;}
.btn.focus, .btn:focus {box-shadow: none !important;}
button.btn.btn-danger.btn-sm.float-right {margin-bottom: 8px;}
.form-control:focus {border-color: unset !important;box-shadow: none;}
div#widget-new-model-search-NewModels {margin-bottom: 2rem;}
.btn-outline-info {color: #000000;border-color: #000000;}
.btn-outline-info:hover, .btn-outline-info:not(:disabled):not(.disabled):active {background-color: #000000;border-color: #000000;}
.btn:focus {box-shadow: none;outline: none;}
button:focus {outline: none;}
.btn {border-radius: 0;}
.btn .badge {border: 1px solid #000;}
.form-group.row {margin: 0 auto 1rem;}
.btn-primary, .show>.btn-danger.dropdown-toggle, .btn-primary:not(:disabled):not(.disabled):active {background-color: #000;border-color: #000;}
.btn-primary:hover {background-color: transparent;color: #000;border-color: #000;}
.btn-secondary, .btn-danger:hover, .btn-danger, .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active,.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show>.btn-secondary.dropdown-toggle {color: #fff;background-color: #007f4c;border-color: #007f4c;}
.btn-secondary:hover, .btn-danger:hover {color: #000;background-color: transparent;border-color: #000;}
.btn-light, .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show>.btn-light.dropdown-toggle {color: #212529;background-color: #ffffff;border-color: #000000;}
.hero-copy .btn {padding: 10px 40px;font-family: 'Arial';font-size: 18px;}
.container.formSection.py-3 {margin-top: -5rem;}
.form-container .card-header {background-color: #007f4c;color: #fff;}
.text-danger {color: #adb5bd !important;}
.btn-info, .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show>.btn-info.dropdown-toggle {color: #000;background-color: #adb5bd;border-color: #adb5bd;}
.btn-info:hover {color: #000;background-color: transparent;border-color: #000;}
div#specials div#specials-filter-Specials {display: none;}
div#specials .border-dark.border-bottom.py-2.m-auto {border-bottom: 0 !important;}
.custom-control-input:focus~.custom-control-label::before {box-shadow: none;}
.custom-control-input:focus:not(:checked)~.custom-control-label::before {border-color: #615f5e;}
form .btn-danger, form .btn-danger:not(:disabled):not(.disabled):active, #special-nav-tab-content-Specials .btn-primary {background-color: #adb5bd;border-color: #adb5bd;color: #000;}
form .btn-danger:hover, #special-nav-tab-content-Specials .btn-primary:hover {background-color: transparent;border-color: #000;color: #000;}
form .btn-primary {background-color: #007f4c;color: #fff;border-color: #007f4c;}
form .btn-primary:hover {background-color: transparent;color: #007f4c;border-color: #007f4c;}
div#special-nav-tab-content-Specials .card .row.no-gutters {align-items: center;}
.btn, div#special-nav-tab-content-Specials h5.card-title {font-family: 'Arial';}
div#special-nav-tab-content-Specials .text-danger {color: #007f4c !important;}
.contactInfo .info-details {color: #8d8d8d;}
.ContactInfo .card-body {padding: 1.25rem 0;}
.contactvw.vwCopy.vwBrand .brandLinks {margin-bottom: 1rem;}
.hero-copy .btn-primary {background-color: #007f4c;color: #fff;border-color: #007f4c;}
.hero-copy .btn-primary:hover {background-color: transparent;color: #fff;border-color: #007f4c;}
.page-item.active .page-link {background-color: #007f4c;border-color: #007f4c;}
.page-link {color: #000000;}
.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle {background-color: #007f4c;border-color: #007f4c;}
div#vehicle_search_area_VS .d-flex.pt-2.pt-sm-1.pt-md-0.mb-2 {flex-direction: column;}
div#DepartmentFilterButtons {width: 100% !important;}
div#vehicle_search_area_VS .d-flex.pt-2.pt-sm-1.pt-md-0.mb-2 a.align-self-center.small {align-self: flex-start !important;margin-top: 5px;}
.vs-wishlist-icon-item {color: #ffffff !important;}
div div#vehicleBar_FinanceButton .btn.btn-primary {padding: 4.8px !important;}
.btn-secondary:hover .vs-wishlist-icon-item {color: #000 !important;}
.text-primary {color: #007f4c !important;}
.border-primary {border-color: #007f4c !important;}
.inner .image-rotator-display a {pointer-events: none;}
#widget-forms-Service #form-Service > div:nth-child(2) {padding: 0;}
.hero-copy .btn:hover {color: #000;border-color: #adb5bd;background-color: #adb5bd;}
#tab_display {border-bottom: 2px solid #007f4c;display: flex;flex-wrap: wrap;padding-left: 0;margin-bottom: 1rem;}
#tab_display .nav-item {margin-right: 5px;}
#tab_display .nav-link {border: none;border-bottom: 3px solid transparent;color: #000;font-weight: 500;padding: 10px 20px;background: transparent;transition: all 0.3s ease;border-radius: 0;}
#tab_display .nav-link:hover {color: #007f4c;border-bottom: 3px solid #007f4c;background-color: rgba(0, 127, 76, 0.05);}
#tab_display .nav-link.active {color: #007f4c;border-bottom: 3px solid #007f4c;background-color: #fff;}
div#tab_display .nav-tabs {border: 0;}
.inner .article-detail {margin: 0;}
.article-tile .article-date {color: #007f4c;}
.article-widget .card {border-radius: 0;}
.article-widget .card:hover {box-shadow: 0 1px 10px -6px rgba(0, 0, 0, .2);border-bottom: 1px solid #000;}
.article-widget .card {border-radius: 0;padding: 30px;border-bottom: 1px solid transparent;box-shadow: 0 1px 27px -3px rgba(0, 0, 0, .2);max-width: 500px;width: 100%;}
.offer-card {overflow: hidden;border-radius: 10px;box-shadow: 0 1px 27px -3px rgba(0, 0, 0, .2);transition: .3s;}
.offer-card:hover {transform: translateY(-7px);}
.btn-offer-overlay {position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);background-color: #007f4c;color: #fff;padding: 10px 20px;transition: background-color 0.3s ease, transform 0.3s ease;}
.btn-offer-overlay:hover {background-color: #adb5bd;text-decoration: none;color: #000;border-color: #adb5bd;}
.about-timetable .row .card:nth-child(2n) .card-body:hover {border-color: #007f4c;}
.inner .out {background-color: #93cd3f!important;border-color: #511b5f!important;color: #fff !important;}
.ix-system-link, .col-md-12 ul i {display: none;}
.ix-system-terms {padding: 2rem 10rem !important;}
div#consent-container, #divRenderBody > div > div:nth-child(5) {padding: 2rem 10rem 0;}
.article-tile .article-title {font-size: 1rem;font-weight: 600;}
.article-tile img {max-height: 300px;object-fit: contain;margin: 0 auto;}
.article-summary {margin-top: 1rem;}
div#specials-tile-container-Specials button#searchElement, div#specials-tile-container-Specials button.btn.btn-default.btn-sm.text-center.bg-dark.text-white.mr-2 {width: 250px !important;}
div#widget-article-tile-HatfieldCareers {margin-top: 5rem;}
.dropdown-item.active, .dropdown-item:active, .navbar-nav .dropdown-item:focus {background-color: #007f4c !important;color: #fff !important;}
.header-nav .nav-item:last-child .dropdown-menu {background-color: #ffffff;border: 1px solid #e0e0e0;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);padding: 10px 0;min-width: max-content;z-index: 1000;border-radius: 0;margin-left: -4rem;}
.navbar-nav .dropdown-item {display: block;padding: 10px 20px;color: #333333;font-size: 15px;font-weight: 500;text-decoration: none;transition: background-color 0.3s ease, color 0.3s ease;}
.navbar-nav .dropdown-item:hover {background-color: #f2f2f2;color: #007f4c;text-decoration: none;outline: none;}
.navbar-nav .dropdown-menu.show {display: block;}
.navbar-nav .dropdown.show .dropdown-toggle::after {content: "";border-bottom: .3em solid;border-right: .3em solid transparent;border-top: 0;border-left: .3em solid transparent;}
.display-list .bg-secondary {background-color: #007f4c !important;}
.display-list .card {border-radius: 0;}
div#vehicle_search_area_VS .button-group {background-color: transparent !important;}
div#no-spec .special-result-enquire-button, div#so .special-result-enquire-button , div#do .special-result-enquire-button, div#hau .special-result-enquire-button, div#po .special-result-enquire-button {background-color: #007f4c !important;border-color: #007f4c !important;color: #fff !important;}
div#no-spec, div#hau, div#do, div#po, div#so {height: 100% !important;}
div#no-spec .card.nms-list-tile.mt-3, div#do .card.nms-list-tile.mt-3 , div#hau .card.nms-list-tile.mt-3, div#so .card.nms-list-tile.mt-3, div#po .card.nms-list-tile.mt-3 {min-height: 670px;overflow: hidden;}
div#no-spec #widget-specials-tiles-Specials .card-body.mainBody .special-result-enquire-button.btn-primary, div#so #widget-specials-tiles-Specials .card-body.mainBody .special-result-enquire-button.btn-primary, div#po #widget-specials-tiles-Specials .card-body.mainBody .special-result-enquire-button.btn-primary, div#hau #widget-specials-tiles-Specials .card-body.mainBody .special-result-enquire-button.btn-primary, div#do #widget-specials-tiles-Specials .card-body.mainBody .special-result-enquire-button.btn-primary {z-index: 2;box-shadow: none !important;margin-bottom: 2.5rem !important;}
div#no-spec div#special-nav-tab-content-Specials .mainBody h5.card-title, div#so div#special-nav-tab-content-Specials .mainBody h5.card-title, div#po div#special-nav-tab-content-Specials .mainBody h5.card-title, div#hau div#special-nav-tab-content-Specials .mainBody h5.card-title, div#do div#special-nav-tab-content-Specials .mainBody h5.card-title {font-size: 1rem;padding: 1rem 0 0 !important;}
div#no-spec .modal-header.flex-row, div#po .modal-header.flex-row, div#so .modal-header.flex-row, div#po .modal-header.flex-row, div#hau .modal-header.flex-row, div#do.modal-header.flex-row {justify-content: space-around;padding: 1rem 0;}
div#no-spec .modal-header.flex-row button, div#so .modal-header.flex-row button, div#po .modal-header.flex-row button, div#hau .modal-header.flex-row button, div#do .modal-header.flex-row button {background-color: unset !important;color: #000 !important;}
div#no-spec .modal-header .d-flex.flex-wrap.text-center, div#so .modal-header .d-flex.flex-wrap.text-center, div#po .modal-header .d-flex.flex-wrap.text-center, div#hau .modal-header .d-flex.flex-wrap.text-center, div#do .modal-header .d-flex.flex-wrap.text-center {font-weight: 700;font-size: 20px;}
div#no-spec p.h6, div#hau p.h6, div#po p.h6, div#hau p.h6, div#do p.h6, div#so p.h6 {margin-bottom: 0;}
div#no-spec .modal-header .text-right, div#so .modal-header .text-right, div#hau .modal-header .text-right, div#po .modal-header .text-right, div#hau .modal-header .text-right, div#do .modal-header .text-right {display: flex;align-items: center;padding-right: 1rem;}
div#no-spec .close, div#hau .close, div#do .close, div#po .close, div#so .close {font-size: 1rem;}
div#no-spec .modal-header.flex-row button p b, div#so .modal-header.flex-row button p b, div#po .modal-header.flex-row button p b, div#hau .modal-header.flex-row button p b, div#do .modal-header.flex-row button p b {font-size: 1rem;}
.btn-primary:hover span.multiselect-selected-text.text-white, .btn-primary:hover .multiselect::after {color: #000 !important;}
.multiselect::after {color: #fff;}
.multiselect-container > li > a > label {font-size: 14px;}
.aboutUs .hero-section {background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)), url('https://image.blob.ix.co.za/LayoutImage/329/2/329-2-Untitled-1-2-1920x1080.png');background-size: cover;background-position: center center;background-attachment: fixed;color: white;padding: 100px 0;position: relative;overflow: hidden;}
.aboutUs .hero-section::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.5"></path></pattern></defs><rect width="100" height="100" fill="url(%23grid)"></rect></svg>');opacity: 0.2;}
.aboutUs .hero-content {position: relative;z-index: 2;}
.aboutUs .award-badge {background: #007f4c;color: white;padding: 15px 25px;font-weight: bold;display: inline-block;margin-bottom: 20px;box-shadow: 0 4px 15px rgba(0, 127, 76, 0.3);border-radius: 0;}
.aboutUs .section-title {font-size: 2.5rem;font-weight: 700;margin-bottom: 1rem;color: #000000;position: relative;}
.aboutUs .section-title::after {content: '';position: absolute;bottom: -10px;left: 0;width: 60px;height: 4px;background: #007f4c;border-radius: 2px;display: none;}
.aboutUs .values-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 30px;margin-top: 50px;}
.aboutUs .value-card {background: white;border-radius: 15px;padding: 40px 30px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;border-top: 4px solid #007f4c;}
.aboutUs .value-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);}
.aboutUs .value-icon {width: 70px;height: 70px;background: linear-gradient(135deg, #007f4c, #00a05a);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-bottom: 25px;color: white;font-size: 30px;}
.aboutUs .value-title {font-size: 1.5rem;font-weight: 700;color: #000000;margin-bottom: 15px;}
.aboutUs .value-description {color: #6c757d;line-height: 1.7;}
.aboutUs .stats-section {background: #f8f9fa;padding: 80px 0;}
.aboutUs .stat-item {text-align: center;padding: 20px;}
.aboutUs .stat-number {font-size: 3rem;font-weight: 800;color: #007f4c;display: block;}
.aboutUs .stat-label {font-size: 1.1rem;color: #6c757d;font-weight: 600;}
.aboutUs .vision-section {padding: 80px 0;background: white;}
.aboutUs .vision-content {max-width: 800px;margin: 0 auto;text-align: center;}
.aboutUs .vision-text {font-size: 1.2rem;line-height: 1.8;color: #6c757d;margin-bottom: 30px;}
.aboutUs .highlight-text {color: #007f4c;font-weight: 600;}
.aboutUs .credentials {background: #000000;color: white;padding: 30px 0;}
.aboutUs .credential-item {text-align: center;padding: 15px;font-size: 0.9rem;}
.aboutUs .btn-primary-custom {background: #007f4c;border: none;padding: 12px 30px;font-weight: 600;transition: all 0.3s ease;color: #fff;border-radius: 0;}
.aboutUs .btn-primary-custom:hover {background: #00a05a;transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 127, 76, 0.3);}
.hero-copy .btn-rate, .hero-copy .btn-comp {color: #fff !important;}
#widget-review-Hatfield .review-comment {max-height: 6em;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;transition: max-height 0.3s ease;position: relative;}
#widget-review-Hatfield .review-comment.expanded {max-height: max-content;-webkit-line-clamp: unset;}
#widget-review-Hatfield .read-more-toggle {display: inline-block;color: #007f4c;cursor: pointer;font-weight: bold;margin: 0 0 1rem;}
#widget-review-Hatfield .card-text.row.d-flex.mt-auto {margin-top: 0 !important;}
div#specials-tile-container-Specials div#dropDownMenu {border-bottom: 5px solid transparent;box-shadow: 0 1px 27px -3px rgba(0, 0, 0, .4);background-color: transparent !important;border-radius: 10px;}
button.btn.btn-default.btn-sm.w-100.text-left.pl-1.bg-white {font-family: ArialNew;background-color: #f1f3f5 !important;}
div#specials-tile-container-Specials button#searchElement {background-color: #007f4c !important;}
div#specials-tile-container-Specials button#searchElement:hover {background-color: transparent !important;border: 1px solid #007f4c;color: #007f4c !important;}
div#specials-tile-container-Specials button.btn.btn-default.btn-sm.text-center.bg-dark.text-white.mr-2 {background-color: #000000 !important;border: 1px solid #000000;color: #ffffff !important;}
div#specials-tile-container-Specials button.btn.btn-default.btn-sm.text-center.bg-dark.text-white.mr-2:hover {background-color: transparent !important;border: 1px solid #000000;color: #000 !important;}
div#dropDownMenu .bg-secondary {background: transparent !important;}
#dealerDropDown a {color: #000;}
#dealerDropDown .badge-secondary {background-color: #000000;}
#dealerDropDown input[type="checkbox"] {accent-color: #007f4c;}
p.text-dis {color: #007f4c;border-left: 3px solid #007f4c;background-color: rgba(0, 127, 76, 0.05);padding: 1rem;}
.form-label-group input:not(:placeholder-shown) ~ label {color: #000;}
div#widget-specials-tiles-Specials .dropdown-menu {max-height: 150px;overflow-y: auto;transform: translate3d(4px, 25px, 0px) !important;}
div#no-spec div#categoryDropDown, div#no-spec div#dealerDropDown, div#no-spec div#priceFromDropDown, div#no-spec div#priceToDropDown {display: none;}
div#do div#specialTypeDropDown, div#do div#makeDropDown, div#do div#categoryDropDown, div#do div#priceFromDropDown, div#do  div#priceToDropDown {display: none;}
div#hau div#specialTypeDropDown, div#hau div#makeDropDown, div#hau div#categoryDropDown, div#hau div#priceFromDropDown, div#hau  div#priceToDropDown {display: none;}
div#po div#specialTypeDropDown, div#po div#makeDropDown, div#po div#categoryDropDown, div#po div#priceFromDropDown, div#po  div#priceToDropDown {display: none;}
div#so div#specialTypeDropDown, div#so div#makeDropDown, div#so div#categoryDropDown, div#so div#priceFromDropDown, div#so div#priceToDropDown {display: none;}
.page-link:focus {box-shadow: none;}
.page-link:hover {color: #007f4c;}
.iframeInner .embed-responsive {margin-top: -10rem;}
div#vehicle_search_area_VS {margin-top: 1rem;}
.special-section a:hover {color: #fff;font-weight: 200;}
div#po .card.nms-list-tile.mt-3 {min-height: 720px;}
.brandInner .brandSection .ourBrands {padding-bottom: 0;}
.special-section.container a {color: #fff;font-weight: 600;}
.special-section.container a:hover {color: #007f4c;}
.pillars .grid-hover-content {position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);color: #fff;opacity: 0;visibility: hidden;display: flex;align-items: center;justify-content: center;padding: 1rem;text-align: center;font-size: 1rem;transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;}
.pillars .grid-item:hover .grid-hover-content {opacity: 1;visibility: visible;}






/*video*/
body, html {height: 100%;}
.background-container {position: relative;height: 100vh;overflow: hidden;}
.background-video,
.background-image img {position: absolute;width: 100%;height: 100%;object-fit: cover;top: 0;left: 0;opacity: 0;transition: opacity 1.2s ease-in-out;}
.visible {opacity: 1;}
.background-image img {z-index: 1;opacity: 1; /* always visible */;}
.background-video.visible {z-index: 2;opacity: 1;}
.background-video {z-index: 2;opacity: 0;}

@media (max-width: 768px) {
.background-video {display: none !important;}
.background-image img {display: block !important;opacity: 1;}}
.brand-carousel.swiper-container,
.brand-carousel .swiper-wrapper,
.brand-carousel .swiper-slide {all: unset !important;}
