@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap');

/* Bootstrap defaults */
.btn-danger {
    background-color: var(--bs-primary);
}
pre {
    color: #fff;
    white-space: pre-wrap;
    font-family: 'Arimo', serif, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.cursor-pointer {
    cursor: pointer;
}
.cursor-zoomin {
    cursor: zoom-in;
}

/* SWIPER STUFF */
.scroll-swiper::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: transparent;
}
.scroll-swiper::-webkit-scrollbar {
    border-radius: 0 10px 10px 0;
    width: 12px;
    background-color: white;
}
.scroll-swiper::-webkit-scrollbar-thumb {
    border-radius: 10px;
    border-radius: 0 10px 10px 0;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: var(--bs-primary);
}

html, body {
    scroll-padding-top: 100px;
    position: relative;
    /* height: 100%; */
}
::-moz-selection { /* Code for Firefox */
  color: white;
  background: black;
}
::selection {
  color: white;
  background: black;
}
body {
    background: #F8F8F8; 
    font-family: "Arimo", serif, Helvetica Neue, Helvetica, Arial, sans-serif;
    /*font-size: 14px;*/
    /* color: #000; */
    margin: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
    font-family: "Arimo", serif, Helvetica Neue, Helvetica, Arial, sans-serif;
    color: var(--bs-primary) !important;
}
h1.text-light, h2.text-light, h3.text-light, h4.text-light, h5.text-light, h6.text-light {
    text-shadow: none;
}
a {
    color: #000;
}
a:hover {
    color: #222;
}
.bg-custom {
    background-color: #f8cd33;
}
.bg-custom {
    background-color: #ffffff;
}
.text-shadow {
    text-shadow: 1px 1px 2px black;
}
.navbar {
    -webkit-transition: .3s;
       -moz-transition: .3s;
        -ms-transition: .3s;
         -o-transition: .3s;
            transition: .3s;
}
.navbar .nav-link {
    font-weight: 500;
}
.navbar.transparent {
    background-color: #FFF;
}
.navbar.transparent .nav-link {
    color: var(--bs-primary) !important;
}
.navbar.shrink {
    background-color: #ffffff !important;
    box-shadow: 5px 1px 6px #294568;
}
.navbar.shrink .nav-link {
    color: #000000 !important;
}

@media screen and (max-width: 991px) {
    .navbar.transparent .navbar-collapse {
        background-color: #e1e7ee !important;
        box-shadow: 5px 1px 6px #29456852;
        border-radius: 4px;
    }
    .navbar.transparent .navbar-collapse .nav-link {
        color: #212529 !important;
    }
}
.anchor-border {
    border-top: 50px solid transparent;
}

/* OTHER CUSTOMIZATIONS */
/*.form-control {
    background-color: #212529;
    border: 1px solid #5b6162;
    color: #fff;
    border-radius: 11px;
    padding: 10px 20px;
}
.form-control:focus {
    background-color: #212529;
    color: #fff;
}
.form-control::placeholder {
    color: #fff !important;
}*/
.hero-image {
    max-width: 100%;
}

@media screen and (max-width: 991px) {
    .anchor-border {
        border-top: 25px solid transparent;
    }
    .cover-button {
        display: block;
        width: 100%;
        font-size: 14px;
        box-sizing: border-box;
        padding: 5px 20px 5px 20px;
    }
}


.bg-cover {
    position: absolute;
    display: flex;
    height: 80vh;
    right: 10%;
    z-index: -1;
}
.teh-category-card {
    border: none !important;
    transition: .3s;
    cursor: pointer;
}
.teh-category-card img {
    width: 100%;
    height: auto;
    scale: 0.9;
    transition: .3s;
    z-index: 10;
    position: relative;
}
.teh-category-card:hover img {
    scale: 1;
}

.teh-model-card, .teh-model-card img {
    transition: .3s;
}
.teh-model-card:hover {
    cursor: pointer;
}
.teh-model-card:hover img {
    scale: 1.1;
}
.specials-table {
    font-size: .8rem;
}

#models table {
  border: transparent;
  border-color: transparent;
} 
@media screen and (max-width: 991px) {
    .teh-category-card img {
        width: 100%;
        height: auto;
        scale: 1;
        transition: .3s;
        z-index: 10;
        position: relative;
    }
    .teh-category-card:hover img {
        scale: 1;
    }
}

.about-card {
    min-height: 500px;
    background-image: url('/static/media/xgma/about.jpg');
    background-size: cover;
    background-position-y: center;
}
.about-card2 {
    min-height: 500px;
    background-image: url('/static/media/xgma/content_Image3_XCMG_Mining_Solution_Package_At_The_Mine_Site_.jpg');
    background-size: cover;
    background-position-y: center;
}
.about-hero-image {
    background-image: url('/static/media/xgma/bg2.jpg');
    background-size: cover;
    background-position-y: center;
}

.instagram-share-button {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f09433', endColorstr='#bc1888',GradientType=1 );
}

@media screen and (max-width: 991px) {
    .delivery-card {
        background-position-x: 50%;
    }
    .delivery-card .overlay {
        width: 100%;
    }
}



.swiper-hero {
    padding-top: 70px;
    overflow: hidden;
}
.swiper-hero, .swiper-hero .swiper-wrapper {
    width: 100vw;
    /* height: 100vh; */
}
.swiper-hero .overlay {
    position: absolute;
    min-width: 320px;
    max-width: 760px;
    padding: 20px;
/*    border: 1px solid #e1e7ee;*/
    border-radius: 3px;
/*    background-color: #00000087;*/
    bottom: 56%;
    left: 7%;
    z-index: 3;
}
.swiper-hero .overlay-1, .swiper-hero .overlay-2 {
    top: 20%;
}
.swiper-hero .overlay .btn {
    width: 266px;
    padding: 10px 0;
}
.swiper-hero .overlay2 {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    mix-blend-mode: screen;
    opacity: 0.2;
}
/*.swiper-hero .overlay2-1 {
    mix-blend-mode: screen;
    opacity: 0.2;
}
.swiper-hero .overlay2-2 {
    mix-blend-mode: screen;
    opacity: 0.4;
}
.swiper-hero .overlay2-3 {
    mix-blend-mode: screen;
    opacity: 0.2;
}*/
 .swiper-hero .overlay3 { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     background-color: #353e4230; 
 } 
.swiper-hero-image {
    overflow: hidden;
    height: 100%;
    width: auto;
}
.swiper-hero-image img {
    width: 100%;
    height: inherit;
    object-fit: cover;
    object-position: bottom;
}
.swiper-pagination-bullet {
    background: var(--bs-primary);
    width: 12px;
    height: 12px;
    border-radius: 3px;
    opacity: 1;
    transition: 0.3s ease;
}
.swiper-pagination-bullet-active {
    background: var(--bs-primary);
    width: 4rem;
    height: 12px;
    border-radius: 3px;
}
.slider-controls {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
}
.swiper-button-prev {
    left: 2rem;
}
.swiper-button-next {
    right: 2rem;
}
.swiper-button-prev, .swiper-button-next {
    background: #000;
    border-radius: 0;
    width: 3.5rem;
    height: 3.5rem;
    margin-top: -3.4rem;
}
.swiper-button-prev:after, .swiper-button-next:after {
    font-size: 25px;
}
.swiper-container {
    width: 100%;
    height: 100%;
}
.swiper-slide {
    font-size: 18px;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.swiper-slide-thumb-active {
    background: rgb(26, 28, 34);
    border: 5px solid #0d0e11;
    border-top: 0;
}
@media screen and (max-width: 991px) {
    .swiper-hero .overlay {
        width: 100%;
        bottom: auto;
        top: 7%;
        left: 0;
    }
    .swiper-hero-image {
        height: 100vh !important;
    }
    .swiper-hero-image img {
        width: 100%;
        min-width: auto;
        min-height: auto;
    }
    .swiper-button-prev, .swiper-button-next {
        display: none;
    }
}


.car-model-navbar {
    box-shadow: 0px 2px 5px #0f1113;
}
.car-model-navbar a {
    color: #fff;
}
.car-model-navbar a:hover {
    color: #999;
}
.model-hero {
    position: relative;
    max-height: 100vh;
    overflow: hidden;
}
.model-hero, .swiper-hero .swiper-wrapper {
    width: 100vw;
    /* height: 100vh; */
}
.model-hero .overlay {
    position: absolute;
    min-width: 320px;
    padding: 20px;
    /* border: 1px solid #e0e0e245; */
    border-radius: 16px;
    /* background-color: #21252985; */
    bottom: 60%;
    left: 7%;
    z-index: 3;
}
.model-hero-image {
    width: inherit;
}
.model-hero-image img {
    min-width: 100%;
    min-height: 100vh;
}

.car-color-image {
    width: 70%;
    height: 320px;
    background-size: cover;
    background-position: center 62%;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all 0.3s ease-in-out 0s;
}

@media screen and (max-width: 991px) {
    .model-hero .overlay {
        width: 100%;
        border: 1px solid #ffffff70;
        border-radius: 16px;
        background-color: #00000060;
        bottom: 6%;
        left: 0;
    }
    .model-hero-image img {
        width: 100%;
        min-width: auto;
        min-height: auto;
    }
    .car-color-image {
        width: 100%;
        height: 230px;
    }
}


#info svg {
    margin: 12px 0;
}



.phone {
    position:fixed;
    width:45px;
    height:45px;
    bottom:17px;
    left:17px;
    background-color:var(--bs-primary);
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
    cursor: pointer;
}
.phone svg {
    width: 31px;
    height: 31px;
    margin-bottom: 5px;
}
.phone:hover {
    color: white;
}


.whatsapp {
    position:fixed;
    width:45px;
    height:45px;
    bottom:17px;
    right:17px;
    background-color:#075E54;
    color:#FFF;
    border-radius:50px;
    text-align:center;
    font-size:30px;
    z-index:100;
    cursor: pointer;
}
.whatsapp svg {
    width: 31px;
    height: 31px;
    margin-bottom: 5px;
}
.whatsapp:hover {
    color: white;
}
.ringanimation {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 4px;
    left: 4px;
    background: transparent;
    border: 2px solid #e2dfdf;
    z-index: 9;
    box-sizing: border-box;
    border-radius: 100%;
    animation: ringanimation;
    animation-iteration-count: infinite;
    animation-duration: 1.2s;
    width: 37px;
    height: 37px;
    border: 1px solid #5e6368;
    opacity: 0.1;
}
.ringanimation1 {
    animation-delay: .6s;
}
.ringanimation2 {
    animation-delay: .8s;
}
.ringanimation3 {
    animation-delay: 1s;
}

@keyframes ringanimation {
    0% {
        opacity:0.2;
        transform:scale(1)
    }
    100% {
        opacity:0.1;
        transform:scale(1.7)
    }
}




footer {
    background-image: url('/media/xgma/bgfooter.png');
    background-size: cover;
    color: #fff;
}
footer a {
    color: #fff;
}