html {max-width: 100vw;}
body {max-width: 100vw;position: relative;}




/* {
    max-width: 100%;
    box-sizing: border-box;
}*/



.custom-primary-bg {background-color: #1ba499;}
.custom-primary-text {color: #1ba499;}
.custom-primary-border {border-color: #1ba499;}
.custom-btn-primary {background-color: #1ba499;border-color: #1ba499;color: white;}
.custom-btn-primary:hover {background-color: #158b82;border-color: #158b82;color: white;}
.custom-btn-outline {border: 2px solid #1ba499;color: #1ba499;background: transparent;}
.custom-btn-outline:hover {background-color: #1ba499;color: white;}
.custom-card {transition: transform 0.3s ease, box-shadow 0.3s ease;}
.custom-card:hover {transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);}
.custom-icon-box {width: 60px;height: 60px;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-size: 24px;margin: 0 auto 1rem;}
.badge-custom {background-color: #00388f !important;color: white;}
.custom-price-tag {position: absolute;top: 15px;right: 5px;}
.custom-section-title {position: relative;margin-bottom: 3rem;}
.custom-section-title::after {content: '';position: absolute;bottom: -10px;left: 50%;transform: translateX(-50%);width: 60px;height: 3px;background: #1ba499;}
.jumbotron.jumbotron-fluid.custom-primary-bg.text-white.mb-0 {height: 600px;}
h1.display-3.font-weight-bold {margin-top: -50px;color: #00388f;font-size: 45px !important;}
.row.justify-content-center.jimny {margin-top: 300px;}
.view-btn {background: linear-gradient(45deg, #ff6b6b, #ee5a6f);border: none;padding: 8px 20px;border-radius: 25px;color: white;text-decoration: none;transition: transform 0.2s ease;display: inline-block;}
.view-btn:hover {transform: scale(1.05);color: white;text-decoration: none;}
.filter-buttons {text-align: center;margin-bottom: 40px;}
.filter-btn {background: rgba(255, 255, 255, 0.2);border: 2px solid rgba(255, 255, 255, 0.3);color: white;margin: 5px;padding: 10px 25px;border-radius: 30px;transition: all 0.3s ease;backdrop-filter: blur(10px);}
.filter-btn:hover,
.filter-btn.active {background: rgba(255, 255, 255, 0.3);border-color: rgba(255, 255, 255, 0.5);color: white;transform: translateY(-2px);}
.stat-item {background: rgba(255, 255, 255, 0.1);backdrop-filter: blur(10px);border-radius: 15px;padding: 25px;margin-bottom: 20px;transition: transform 0.3s ease;}
.stat-item:hover {transform: translateY(-5px);}
.stat-number {font-size: 2.5rem;font-weight: 700;margin-bottom: 10px;color: #ffd700;}
.stat-label {font-size: 1.1rem;opacity: 0.9;}
.jimny-card {background: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);transition: all 0.3s ease;margin-bottom: 2rem;border: 1px solid #e9ecef;}
.jimny-card:hover {transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}
.jimny-card-image {width: 100%;object-fit: cover;display: block;}
.jimny-card-body {padding: 10px;text-align: center;background: #fff;}
.jimny-logo {width: 221px;height: 100px;object-fit: contain;margin: 0 auto 0 auto;display: block;text-align: center !important;}
.jimny-price {font-size: 1.25rem;font-weight: 600;color: #17a2b8;margin-bottom: 1.5rem;letter-spacing: 0.5px;}
.jimny-btn {background: #fff;border: 2px solid #333;color: #333;padding: 0.75rem 2rem;font-size: 0.875rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;border-radius: 0;transition: all 0.3s ease;width: 100%;max-width: 220px;}
.jimny-btn:hover {background: #333;color: #fff;border-color: #333;transform: translateY(-2px);}
.jimny-btn:focus {box-shadow: 0 0 0 3px rgba(51, 51, 51, 0.2);}
.jimny-btn:active {transform: translateY(0);}
.rentals-section {padding: 80px 0;background-color: white;}
.section-title {font-size: 3.5rem;font-weight: 800;color: #000;text-align: center;margin-bottom: 20px;letter-spacing: -1px;text-transform: uppercase;}
.section-subtitle {font-size: 1.2rem;color: #6c757d;text-align: center;margin-bottom: 80px;font-weight: 400;}
.step-container {text-align: center;padding: 40px 20px;position: relative;}
.step-icon {width: 120px;height: 120px;border: 3px solid #00388f;border-radius: 20px;display: flex;align-items: center;justify-content: center;margin: 0 auto 30px;background-color: white;transition: all 0.3s ease;}
.step-icon:hover {transform: translateY(-5px);box-shadow: 0 10px 25px rgba(0, 56, 143, 0.15);}
.step-icon i {font-size: 2.5rem;color: #00388f;}
.step-title {font-size: 1.5rem;font-weight: 700;color: #00388f;margin-bottom: 15px;text-transform: uppercase;letter-spacing: 1px;}
.step-description {font-size: 1rem;color: #000;line-height: 1.6;max-width: 280px;margin: 0 auto;}
.step-number {position: absolute;top: -10px;right: -10px;width: 40px;height: 40px;background-color: #00388f;color: white;border-radius: 50%;display: flex;align-items: center;justify-content: center;font-weight: 700;font-size: 1.2rem;box-shadow: 0 4px 10px rgba(0, 56, 143, 0.3);}
.step-container .step-icon {position: relative;}
.card .card-header {background-color: #1ba499;color: #fff;cursor: default;}
.card-header:hover {    /* background-color: #179786; */;}
.card-header h5 {margin: 0;}
img.card-img-top {height: 350px;object-fit: cover;object-position: center;border-radius: 20px;}
.gallery-container {    /* padding-top: 40px; */padding-bottom: 40px;}
.gallery-title {text-align: center;margin-bottom: 40px;font-weight: 700;}
.gallery-card {overflow: hidden;border-radius: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease;}
.gallery-card:hover {transform: scale(1.03);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);}
.gallery-img-wrapper {width: 100%;height: 250px;overflow: hidden;}
.gallery-img {width: 100%;height: 100%;object-fit: cover;}
.hero-section {background: radial-gradient(ellipse at top left, rgba(27, 164, 153, 0.9) 0%, transparent 50%),
        radial-gradient(ellipse at bottom right, rgba(0, 123, 255, 0.8) 0%, transparent 50%),
        linear-gradient(135deg, #1ba499 0%, rgba(0, 123, 255, 0.7) 25%, rgba(27, 164, 153, 0.6) 50%, rgba(0, 123, 255, 0.5) 75%, rgba(27, 164, 153, 0.4) 100%),
        url('https://image.blob.ix.co.za/Banner/124579/3/124579-3-8426-116-iX-Suzuki-Auto-SA_web_OEM_SM15472_150524-112191-1-116-1920x1080-3-1920x1080.jpg');background-size: cover, cover, cover, cover;background-position: center, center, center, center;background-attachment: fixed;position: relative;    /* min-height: 100vh; */display: flex;align-items: center;}
.hero-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient(circle at 20% 20%, rgba(27, 164, 153, 0.6) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(0, 123, 255, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 50% 10%, rgba(27, 164, 153, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 30% 70%, rgba(0, 123, 255, 0.3) 0%, transparent 45%),
        linear-gradient(45deg, rgba(27, 164, 153, 0.8) 0%, rgba(0, 123, 255, 0.6) 25%, rgba(27, 164, 153, 0.4) 50%, rgba(0, 123, 255, 0.5) 75%, rgba(27, 164, 153, 0.3) 100%);z-index: 1;}
.hero-content {position: relative;z-index: 2;}
.welcome-block {background: rgba(255, 255, 255, 0.95);border-radius: 20px;    /* padding: 1rem 1rem; */margin-bottom: 2rem;box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.2);transform: translateY(0);transition: all 0.3s ease;}
.welcome-block:hover {transform: translateY(-5px);box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);}
.welcome-block h1 {color: #1ba499;font-weight: 800;text-shadow: none;margin-bottom: 8px;margin-top: 8px;font-size: 45px !important;font-size: clamp(2rem, 5vw, 3.5rem);}
.welcome-subtitle {color: #333;font-size: 1.2rem;margin-bottom: 0;}
.car-block {background: rgba(255, 255, 255, 0.95);border-radius: 15px;padding: 10px;margin-bottom: 1.5rem;box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);backdrop-filter: blur(10px);border: 2px solid rgba(255, 255, 255, 0.2);transition: all 0.3s ease;height: 100%;margin-top: -20px;}
.car-block:hover {transform: translateY(-3px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);border-color: #1ba499;}
.car-image {width: 100%;    /* height: 300px; */object-fit: cover;border-radius: 10px;margin-bottom: 1rem;transition: transform 0.3s ease;}
.car-block:hover .car-image {transform: scale(1.05);}
.car-logo {height: 60px;width: auto;margin-bottom: 1rem;}
.car-price {color: #1ba499;font-weight: 700;font-size: 23px;margin-bottom: 1rem;}
.btn-car-more {background: transparent;color: #1ba499;border: 2px solid #1ba499;border-radius: 25px;padding: 0.75rem 1.5rem;font-weight: 600;text-transform: uppercase;letter-spacing: 1px;transition: all 0.3s ease;}
.btn-car-more:hover {background: #1ba499;color: white;transform: translateY(-2px);box-shadow: 0 10px 20px rgba(27, 164, 153, 0.3);}
.blocks-container {max-width: 1200px;margin: 0 auto;}
i.fas.fa-arrow-left.fa-fw {color: black;}
i.fas.fa-arrow-right.fa-fw {color: black;}
.jimny-logo-text {display: inline-block;background: url('https://image.blob.ix.co.za/LayoutImage/324/2/324-2-Suzuki20Jimny20Logan20Mark-2-221x100.png') no-repeat center center;background-size: contain;width: 200px;height: 80px;text-indent: -9999px;vertical-align: middle;    /* margin: 0 10px; */;}
a.btn.custom-btn-primary.mr-2 {border-radius: 0px !important;}
.custom-hover-header:hover {background-color: black !important;cursor: pointer;}
.custom-hover-header:hover h5 {color: #1ba499 !important;}
.row.equipment {margin-left: 0px;margin-right: 0px;}
.popup-container.pop-up-equipment {display: none;position: fixed;top: 80px;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.85);z-index: 1050;overflow-y: auto;color: black;}
.popup-container.pop-up-equipment .popup-content {padding: 2rem;margin: 5% auto;background: #222;border-radius: 5px;max-height: 90vh;overflow-y: auto;}
.popup-container.pop-up-equipment .close-btn {position: absolute;top: 1rem;right: 1rem;font-size: 2rem;color: white;cursor: pointer;}

@media (min-width: 1280px) {
body {}
.custom-price-tag {position: absolute;top: 37px;right: 145px;}
.card .card-header {background-color: #1ba499;color: #fff;cursor: default;padding: 14px;}}

@media (min-width: 992px) {
body {}
.step-container:not(:last-child)::after {content: '';position: absolute;top: 50%;right: -15px;width: 30px;height: 2px;background-color: #00388f;transform: translateY(-50%);z-index: 1;}
.popup-container.pop-up-equipment {display: none !important;}}

@media (max-width: 1440px) {
body {}
.z-wrapper section {padding: 30px 0;}}

@media (max-width: 1024px) {
body {}
.custom-price-tag {position: absolute;top: 38px;right: 95px;}
.card .card-header {background-color: #1ba499;color: #fff;cursor: default;padding: 15px;}
.makeDifference .overlayText {margin-top: 8px;}}

@media (max-width: 991px) {
body {}
.section-title {font-size: 2.8rem;}
.step-container {margin-bottom: 40px;}}

@media (max-width: 834px) {
body {}
.custom-price-tag {position: absolute;top: 38px;right: 330px;}
.col-lg-6.col-md-12.col-sm-12.j-5door {margin-top: 25px;}
.row.justify-content-center.jimny {margin-top: 300px;}}

@media (max-width: 768px) {
body {}
.filter-btn {padding: 8px 18px;font-size: 0.9rem;}
.custom-price-tag {position: absolute;top: 32px;right: 10px;}
.hero-section {background-attachment: scroll;min-height: 100vh;}
.welcome-block {padding: 2rem 1.5rem;margin-bottom: 1.5rem;}
.car-block {margin-bottom: 1.5rem;}
.car-image {height: 250px;}
.car-logo {height: 50px;}
.jimny-logo-text {width: 100px;height: 50px;margin: 0 8px;}}

@media (max-width: 767px) {
body {}
.jimny-card-image {height: 300px;}
.jimny-card-body {padding: 1.5rem;}
.jimny-logo {width: 180px;height: 80px;}
.jimny-price {font-size: 1.1rem;}
.jimny-btn {padding: 0.6rem 1.5rem;font-size: 0.8rem;}}

@media (max-width: 576px) {
.contact ul li:not(:nth-last-child(-n+2)) {display: none;}
.contact li a {display: flex;flex-direction: row-reverse;align-items: center;}
.contact li {margin: 0 0 1rem 0;}
.contact  li a i {padding: 0 .75rem 0 0;}
.contact li {width: 100%;}
body {}
.section-title {font-size: 2.2rem;}
.step-icon {width: 100px;height: 100px;}
.step-icon i {font-size: 2rem;}
.rentals-section {padding: 60px 0;}
.welcome-block {padding: 1.5rem 1rem;}
.car-block {padding: 1rem;}
.car-image {height: 250px;}
.welcome-subtitle {font-size: 1rem;}
.jimny-logo-text {width: 150px;height: 80px;        /* margin: 0 5px; */;}
.welcome-block h1 {color: #1ba499;font-weight: 800;text-shadow: none;        /* margin-bottom: 1rem; */font-size: 35px !important;font-size: clamp(2rem, 5vw, 3.5rem);}}

@media (max-width: 575px) {
section.jimnyCopy .container {width: 100%;}
.inner h1 {font-size: 24px !important;}
.jimny-container {padding: 2rem 0;}
.jimny-card-image {height: 250px;}
.jimny-logo {width: 160px;height: 70px;margin-bottom: 1rem;}
.jimny-price {font-size: 1rem;margin-bottom: 1rem;}
.btn-group-vertical.btn-group-lg.d-md-none {margin-top: -100px;}}

@media only screen and (max-width: 480px) {
body {}
h1.display-3.font-weight-bold.mb-4 {margin-top: -10px;font-size: 35px !important;color: white;}
.row.justify-content-center.jimny {margin-top: 250px;}
.custom-price-tag {position: absolute;top: 32px;right: 10px;}
.btn-group-vertical.btn-group-lg.d-md-none {margin-top: -100px;}}

@media only screen and (max-width: 402px) {
h1.display-3.font-weight-bold {margin-top: -25px;font-size: 45px !important;font-size: 34px!important;}}

@media only screen and (max-width: 393px) {
.car-image {height: 210px;}}

@media only screen and (max-width: 375px) {
h1.display-3.font-weight-bold.mb-4 {margin-top: -10px;font-size: 30px!important;color: white;}
.row.justify-content-center.jimny {margin-top: 265px;}
.custom-price-tag {position: absolute;top: 32px;right: 10px;}
.btn-group-vertical.btn-group-lg.d-md-none {margin-top: -100px;}}
.welcome-block {padding: 1rem 1rem;margin-top: 20px;margin-bottom: 40px;}






}@media (max-width: 360px) {
.car-image {height: 210px;}
.welcome-block {padding: 1rem 1rem;margin-top: 20px;margin-bottom: 40px;}}

@keyframes fadeInUp {
from {opacity: 0;transform: translateY(30px);}
to {opacity: 1;transform: translateY(0);}}
.welcome-block,
.car-block {animation: fadeInUp 0.8s ease forwards;}
.car-block:nth-child(2) {animation-delay: 0.2s;}
.car-block:nth-child(3) {animation-delay: 0.4s;}
.navbar-nav .dropdown-menu {max-width: none !important;box-sizing: content-box !important;}
section.jimnyCopy .brand-header {z-index: 9999999999;}

@media (max-width:1280px) {
p.lead.mb-5 {padding: 0 1rem;margin-bottom: 0 !important;}
.row.justify-content-center.jimny {margin-top: 10rem;}
.jimnyCopy .accordion label {color: #000;}}

@media (max-width: 835px) {
.row.justify-content-center.jimny {margin-top: 2rem;}}
section.rentals-section.bg-secondary {padding-bottom: 0;}

@media (max-width:480px) {
.swiperButtons .btn {max-width: 100%;}}