/*================================================
MAIN SLIDER CSS
==================================================*/

.ma-slider-area {
    position: relative;
    height: 56%;
    /* margin-top: 3rem; */
}

.slide-item-1 {
    background: url(../images/cars/slider-1.jpg);
}

.slide-item-2 {
    background: url(../images/cars/slider-2.jpg);
}

.ma-main-slide {
    background-color: var(--font-color-seconday);
    background-position: center center;
    background-size: cover;
    /* height: 640px; */
    height: 432px;
}

.slider-content-holder {
    width: 100%;
    text-align: center
}

.slider-text {
    width: 60%;
    text-align: left;
}

.ma-main-caption {
    display: table;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.58) none repeat scroll 0 0;
}

.ma-caption-cell {
    /* display: table-cell; */
    vertical-align: middle;
    text-align: left;
    /* padding-top: 4rem; */
    transform: translateY(32%);
}

.slider-text h2 {
    color: var(--light-color);
    font-size: 2.6rem;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, .004);
    text-transform: capitalize;
    letter-spacing: 3px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-family: "Poppins", sans-serif;
}

.slider-text h2 span {
    color: var(--light-color);
    font-style: italic;
    font-weight: 600
}

.slider-text p {
    color: var(--light-color);
    font-size: 26px;
    letter-spacing: 2px;
    margin-bottom: 15px;
    text-transform: capitalize;
}

.ma-slide .owl-nav>.owl-prev {
    visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(.83, .8, .11, .64) 0s;
    transition: all 0.2s cubic-bezier(.83, .8, .11, .64) 0s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.ma-slide:hover .owl-nav>.owl-prev {
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    left: 30px
}

.ma-slide .owl-nav>.owl-next {
    visibility: hidden;
    -webkit-transition: all 0.2s cubic-bezier(.83, .8, .11, .64) 0s;
    transition: all 0.2s cubic-bezier(.83, .8, .11, .64) 0s;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.ma-slide:hover .owl-nav>.owl-next {
    visibility: visible;
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    right: 30px
}

.ma-slide .owl-prev {
    left: -30px;
    position: absolute;
    top: 45%;
}

.ma-slide .owl-next {
    right: -30px;
    position: absolute;
    top: 45%;
}


/*================================================
FIND AREA CSS
==================================================*/

.ma-find-area {
    margin-top: -75px;
}

.find-box {
    background: var(--light-color) url(../images/find-box-bg.png) no-repeat scroll 0 0;
    padding: 30px;
    position: relative;
    z-index: 999;
    box-shadow: 3px 0 29px rgba(0, 0, 0, 0.26);
}

.find-text {
    margin-top: 32px;
}

.find-text h3 {
    color: var(--light-color);
    font-size: 33px;
    font-weight: 600;
    text-transform: capitalize;
    font-family: "Poppins", sans-serif;
    line-height: 40px;
}

.find-form p input {
    width: 100%;
    border: 2px solid var(--bd-light);
    padding: 5px 10px;
    height: 45px;
    color: #111;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s
}

.find-form p input:focus {
    border: 2px solid var(--bg-seconday)
}

.find-form .nice-select {
    width: 100%;
    border: 2px solid var(--bd-light);
    height: 45px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    border-radius: 0
}

.find-form .nice-select .list {
    top: 100%;
    left: 0px;
    margin: 0px;
    min-width: 100%;
    border-radius: 0px;
}

.find-form form p {
    margin: 15px 0;
}

.datepicker {
    z-index: 9999
}

.datepicker {
    border: 2px solid var(--bd-light);
    margin-top: -5px;
}

.datepicker .cell.day.selected,
.datepicker .cell.month.selected,
.datepicker .cell.year.selected,
.datepicker .cell.decade.selected {
    background: var(--bg-third) none repeat scroll 0 0;
    color: var(--light-color);
}

.datepicker .cell.day:hover,
.datepicker .cell.month:hover,
.datepicker .cell.year:hover,
.datepicker .cell.decade:hover {
    background: var(--bg-third) none repeat scroll 0 0;
    color: var(--light-color);
}

.popover.clockpicker-popover.bottom.clockpicker-align-left {
    border: 2px solid var(--bd-light);
}

.text-primary,
.clockpicker-popover .popover-title {
    color: var(--bg-seconday);
}

.datepicker .row.header a {
    margin: 0 3px;
    cursor: pointer;
    display: block;
    text-align: center;
    width: 100%;
}

.datepicker .day {
    font-size: 14px;
    text-align: center
}

.popover-title span {
    color: var(--bg-seconday)
}

.popover-title .text-primary {
    color: #111 !important
}

.clockpicker input {
    font-size: 14px;
    color: #7c8a97
}

.clockpicker input:focus {
    box-shadow: 0 0 0 rgba(0, 123, 255, 0.25);
    border: 2px solid var(--bd-light);
    border-radius: 0
}


/*================================================
ABOUT AREA CSS
==================================================*/

.about-left h4 {
    font-size: 20px;
    color: var(--bg-seconday);
    margin-bottom: 10px;
    display: block;
    font-weight: 500;
    text-transform: capitalize;
    font-family: "Rubik", sans-serif
}

.about-left h2 {
    font-size: 40px;
    color: var(--font-h-color);
    letter-spacing: 1px;
    margin-bottom: 15px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    display: inline-block;
    text-transform: capitalize;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.about-list ul {
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    margin-top: 10px;
}

.about-list ul li {
    margin: 5px 0
}

.about-list ul li i {
    margin-right: 7px;
    width: 20px;
    height: 20px;
    text-align: center;
    border-radius: 2px;
    background: var(--bg-seconday) none repeat scroll 0 0;
    color: var(--light-color);
    line-height: 20px;
    font-size: 12px;
}

.signature-left {
    width: 190px;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 3px solid var(--bd-light);
}

.signature-right h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--font-h-color);
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.about-right {
    margin-top: 30px;
}

/*================================================
Services AREA CSS
==================================================*/
.services-area {
    background: #fbfbfd none repeat scroll 0 0;
}

.services-area .service-heading {
    margin: 0 auto;
    text-align: center;
}

/*================================================
15 - HOT OFFERS AREA CSS
==================================================*/
#offerTab {
    text-align: center;
    width: 100%;
    display: block;
    border: medium none;
    margin: 30px 0
}

#offerTab li {
    display: inline-block;
    margin: 0 5px;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    border: medium none
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border: medium none
}

.nav-tabs .nav-link {
    border: medium none
}

#offerTab li.nav-item a.nav-link,
#offerTab li.nav-item a.nav-link.active {
    display: inline-block;
    text-transform: uppercase;
    padding: 7px 25px;
    font-weight: 500;
    color: var(--light-color);
    font-size: 14px;
    position: relative;
    z-index: 1;
}

#offerTab li.nav-item a.nav-link:after {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    background: #020202 none repeat scroll 0 0;
    z-index: -1;
    -webkit-transform: skew(40deg);
    transform: skew(40deg);
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s
}

#offerTab li.nav-item a.nav-link:hover:after {
    background: var(--bg-seconday) none repeat scroll 0 0;
    -webkit-transform: skew(-40deg);
    transform: skew(-40deg);
}

#offerTab li.nav-item a.nav-link.active:after {
    position: absolute;
    content: "";
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    z-index: -1;
    -webkit-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: var(--bg-seconday) none repeat scroll 0 0;
    -webkit-transform: skew(-40deg);
    transform: skew(-40deg);
}

.single-offers {
    text-align: center;
    padding: 20px;
    border: 3px solid var(--bd-light);
    margin-top: 30px;
}

.offer-image {
    width: 235px;
    margin: 0 auto;
    display: block;
}

.offer-image img {
    width: 100%;
}

.offer-text {
    margin-top: 20px
}

.offer-text h3 {
    font-size: 23px;
    color: var(--font-h-color);
    letter-spacing: 1px;
    margin-bottom: 10px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    display: inline-block;
    text-transform: capitalize;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.offer-text h4 {
    color: #020202;
    font-size: 18px;
    text-transform: capitalize;
    margin-top: 8px;
}

.offer-text h4 span {
    text-transform: capitalize;
    color: var(--bg-seconday);
    font-size: 16px;
}

.offer-action {
    text-align: center;
    background: #020202 none repeat scroll 0 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    margin: 25px auto 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.offer-action a {
    display: inline-block;
    text-transform: uppercase;
    padding: 7px 15px;
    font-weight: 500;
    color: var(--light-color);
    font-size: 14px;
    width: 47%;
}

.offer-action:after {
    position: absolute;
    content: "";
    width: 66%;
    height: 100%;
    background: var(--bg-seconday) none repeat scroll 0 0;
    right: -36px;
    z-index: -1;
    -webkit-transform: skewX(40deg);
    transform: skewX(40deg);
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.offer-action:hover {
    background: var(--bg-seconday) none repeat scroll 0 0;
}

.offer-action:hover:after {
    background: #020202 none repeat scroll 0 0;
}

.offer-text ul {
    text-align: center;
    margin-top: 10px;
}

.offer-text ul li {
    display: inline-block;
    font-size: 14px;
    margin: 0 3px;
}

.offer-text ul li i {
    margin-right: 5px;
    color: var(--bg-seconday)
}


/*================================================
16 - TESTIMONIAL AREA CSS
==================================================*/

.ma-testimonial-area {
    position: relative;
    background: url(../img/promo_bg.jpg) no-repeat fixed 0 0/cover;
    z-index: 1;
    padding-bottom: 100px
}

.ma-testimonial-area:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    z-index: -1;
}

.ma-testimonial-area .site-heading h2 {
    color: var(--light-color)
}

.single-testimonial {
    background: var(--light-color) none repeat scroll 0 0;
    padding: 30px;
    margin-top: 30px
}

.testimonial-text {
    position: relative;
}

.testimonial-text:after {
    position: absolute;
    content: "\f10e";
    color: var(--font-h-color);
    font-size: 80px;
    font-family: Fontawesome;
    top: 34%;
    left: 35%;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}

.testimonial-meta {
    margin-top: 30px;
}

.client-image {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    float: left;
}

.client-image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
}

.client-info h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--font-h-color);
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.client-info {
    overflow: hidden;
}

.client-info p {
    color: var(--bg-seconday);
}

.testimonial-slider .owl-dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: -40px
}

.testimonial-slider .owl-dots .owl-dot {
    display: inline-block;
}

.testimonial-slider .owl-dots .owl-dot span {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    background: var(--light-color) none repeat scroll 0 0;
    border-radius: 0;
    display: block;
    height: 12px;
    margin: 5px 3px 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 7px;
}

.testimonial-slider .owl-dots .owl-dot.active span,
.testimonial-slider .owl-dots .owl-dot:hover span {
    background: var(--bg-seconday) none repeat scroll 0 0;
}

/*================================================
TESTIMONIAL AREA CSS
==================================================*/

.ma-testimonial-area {
    position: relative;
    background: url(../images/promo_bg.jpg) no-repeat fixed 0 0/cover;
    z-index: 1;
    padding-bottom: 100px;
}

.ma-testimonial-area:after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8) none repeat scroll 0 0;
    z-index: -1;
}

.ma-testimonial-area .site-heading h2 {
    color: var(--light-color)
}

.single-testimonial {
    background: var(--light-color) none repeat scroll 0 0;
    padding: 30px;
    margin-top: 30px
}

.testimonial-text {
    position: relative;
}

.testimonial-text:after {
    position: absolute;
    content: "\f10e";
    color: var(--font-h-color);
    font-size: 80px;
    font-family: Fontawesome;
    top: 34%;
    left: 35%;
    opacity: 0.1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
}

.testimonial-meta {
    margin-top: 30px;
}

.client-image {
    width: 60px;
    height: 60px;
    margin-right: 20px;
    float: left;
}

.client-image img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50%;
}

.client-info h3 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    color: var(--font-h-color);
    font-size: 20px;
    text-transform: capitalize;
    margin-bottom: 5px;
}

.client-info {
    overflow: hidden;
}

.client-info p {
    color: var(--bg-seconday);
}

.testimonial-slider .owl-dots {
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: -40px
}

.testimonial-slider .owl-dots .owl-dot {
    display: inline-block;
}

.testimonial-slider .owl-dots .owl-dot span {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    background: var(--light-color) none repeat scroll 0 0;
    border-radius: 0;
    display: block;
    height: 12px;
    margin: 5px 3px 0;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    width: 7px;
}

.testimonial-slider .owl-dots .owl-dot.active span,
.testimonial-slider .owl-dots .owl-dot:hover span {
    background: var(--bg-seconday) none repeat scroll 0 0;
}

/*================================================
BLOG AREA CSS
==================================================*/

.single-blog {
    border: 3px solid var(--bd-light);
    margin-top: 30px
}

.blog-text {
    padding: 15px 20px;
}

.blog-text h3 {
    font-size: 18px;
    color: var(--font-h-color);
    letter-spacing: 1px;
    margin-bottom: 15px;
    -webkit-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    display: inline-block;
    text-transform: capitalize;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.blog-text h3 a {
    color: var(--font-h-color);
}

.blog-text h3 a:hover {
    color: var(--bg-seconday)
}

.blog-meta-home {
    padding-top: 15px;
    border-top: 3px solid var(--bd-light);
}

.blog-image img {
    width: 100%
}

.blog-meta-home {
    padding-top: 15px;
    border-top: 3px solid var(--bd-light);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.blog-meta-left {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.blog-meta-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

.blog-meta-right p {
    margin-left: 15px;
}

.blog-meta-right p i {
    margin-right: 5px;
    color: var(--bg-seconday)
}

.ma-blog-page-area {
    padding-top: 40px
}

.blog-page-left .blog-text h3 {
    font-size: 24px
}

.blog-text ul {
    margin-bottom: 20px;
}

.blog-text ul li {
    display: inline-block;
    margin-right: 10px;
}

.blog-text ul li i {
    margin-right: 5px;
    color: var(--bg-seconday);
}

.blog-text ul li a {
    color: #111;
}

.blog-text a.ma-btn {
    color: var(--bg-seconday)
}

.blog-text a.ma-btn:hover {
    color: var(--light-color);
}

.blog-text a.ma-btn {
    color: var(--bg-seconday);
    margin: 20px 0 0 0;
}

.blog-page-right .sidebar-widget {
    margin-top: 30px;
    margin-bottom: 0
}

.blog-page-right .recent-text h4 {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 1px;
}

.single-offers {
    padding: 30px;
    background: #fff;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    border-radius: 10px;
    margin-bottom: 30px;
    transition: all 0.3s ease;
    height: 100%;
}

.single-offers:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.ratings {
    color: #ffc107;
}

.designation {
    color: #666;
    font-size: 14px;
    display: block;
    margin-top: 5px;
}

.rounded-circle {
    border: 3px solid #f8f9fa;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    margin-bottom: 20px;
    object-fit: cover;
}

.testimonial-text {
    color: #666;
    font-style: italic;
    line-height: 1.6;
    margin: 20px 0;
    min-height: 120px;
}

.offer-text h4 {
    color: #333;
    margin-bottom: 5px;
}