/* -----------------------------------------------------------------------------------

01. Typography style
02. Preloader style
03. Owl-Theme Custom style
04. Section style
05. Navbar style
06. Header style
07. Slider style
08. Slider style (Inner Page Slider)
09. Parallax Header style
10. Kenburns SlideShow style
11. Slider Grid Background
12. Video Background style
13. Car Features style
14. Banner Header style
15. About style
16. Team style
17. Team-Single style
18. Cars 1 style
19. Cars 2 style
20. Cars 3 style
21. Cars 4 style
22. Car Details style
23. Car Types 1 style
24. Car Types 2 style
25. Car Types 3 style
26. Car Types 4 style
27. Services Box style
28. Services 1 style
29. Services 2 style
30. Process style
31. Testimonials style
32. Process Number style
33. Gallery Image style
34. Video Gallery style
35. Video Popup style
36. Accordion Box (for Faqs) style
37. Price style
38. Clients style
39. Booking style
40. Blog 1 style
41. Blog 2 style
42. Blog 3 style
43. Post style
44. Contact style
45. Contact Box style
46. 404 style
47. Button style
48. LetsTalk style
49. App style
50. Footer style
51. toTop Button style
52. Responsive style
53. Overlay Effect Bg image style
54. Modal Popup style
 
----------------------------------------------------------------------------------- */


/* ======= Typography style ======= */
html,
body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    word-wrap: break-word;
}

body {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.95em;
    color: #555;
    overflow-x: hidden !important;
}

p {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.95em;
    color: #555;
    margin-bottom: 15px;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 35px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 21px;
}

h5 {
    font-size: 17px;
}

h6 {
    font-size: 14px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    line-height: 1.5em;
    margin: 0 0 15px 0;
    color: #1b1b1b;
}

img {
    width: 100%;
    height: auto;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

span,
a,
a:hover {
    display: inline-block;
    text-decoration: none;
    color: inherit;
}

b {
    font-weight: 700;
    color: #1b1b1b;
}

/* text field */
button,
input,
optgroup,
select,
textarea {
    font-family: 'Outfit', sans-serif;
}

input[type="password"]:focus,
input[type="email"]:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus,
textarea:focus {
    outline: none;
}

input[type="password"],
input[type="email"],
input[type="text"],
input[type="file"],
textarea {
    max-width: 100%;
    margin-bottom: 15px;
    padding: 18.5px 20px;
    height: auto;
    background-color: #fff;
    -webkit-box-shadow: none;
    box-shadow: none;
    display: block;
    width: 100%;
    line-height: 1.5em;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    background-image: none;
    border: none;
    border-radius: 30px;
}

input[type="submit"],
input[type="reset"],
input[type="button"],
button {
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    line-height: 1.95em;
    -webkit-transition: background-color .15s ease-out;
    transition: background-color .15s ease-out;
    background: #1b1b1b;
    border: none;
}

input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
button:hover {
    color: #555;
    border: none;
}

select {
    padding: 10px;
    border-radius: 5px;
}

textarea:focus,
textarea:active,
textarea::placeholder {
    color: #555;
}

table,
th,
tr,
td {
    border: 0px solid #555;
}

th,
tr,
td {
    padding: 10px;
}

input[type="radio"],
input[type="checkbox"] {
    display: inline;
}

/* submit and alert success  */
input[type="submit"] {
    display: inline-block;
    height: auto;
    padding: 19px 35px;
    border: none;
    border-radius: 0;
    background-color: #f5b754;
    -webkit-transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
    transition: border-color 400ms ease, color 400ms ease, background-color 400ms ease;
    color: #1b1b1b;
    line-height: 20px;
    font-weight: 300;
    text-align: center;
    font-size: 14px;
    border-radius: 30px;
}

input[type="submit"]:hover {
    border: none;
    background-color: #1b1b1b;
    color: #fff;
}

.alert-success {
    background: transparent;
    color: #555;
    border: 1px solid #f5b754;
    border-radius: 20px;
}

/* placeholder */
::-webkit-input-placeholder {
    color: #555;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

:-moz-placeholder {
    color: #555;
}

::-moz-placeholder {
    color: #555;
    opacity: 1;
}

:-ms-input-placeholder {
    color: #555;
}

/* Important */
.bg-position-top {
    background-position: top;
}

.bg-position-center {
    background-position: center;
}

.bg-position-bottom {
    background-position: bottom;
}

.o-hidden {
    overflow: hidden;
}

.position-re {
    position: relative;
}

.full-width {
    width: 100%;
}

.bg-img {
    background-size: cover;
    background-repeat: no-repeat;
}

.bg-fixed {
    background-attachment: fixed;
}

.bg-gray {
    background-color: #f2f2f2;
}

.bg-white {
    background-color: #fff;
}

.bg-yellow {
    background-color: #f5b754;
}

.txt-dark {
    color: #1b1b1b;
}

.pattern {
    background-repeat: repeat;
    background-size: auto;
}

.bold {
    font-weight: 700;
}

.count {
    font-family: 'Outfit', sans-serif;
}

.valign {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.v-middle {
    position: absolute;
    width: 100%;
    top: 50%;
    /*    left: 0;*/
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
    z-index: 9;
}

.v-middle2 {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

.v-bottom {
    position: absolute;
    width: 100%;
    bottom: 5%;
    left: 0;
    -webkit-transform: translate(0%, -5%);
    transform: translate(0%, -5%);
    z-index: 9;
}

.js .animate-box {
    opacity: 0;
}

:root {
    scroll-behavior: auto;
}

.position-relative {
    position: relative !important;
}

.bp-bottom {
    background-position: bottom;
}

.bp-top {
    background-position: top;
}

.bp-center {
    background-position: center;
}

.icon-bg {
    background: #fff !important;
}

hr {
    margin-top: 5px;
    margin-bottom: 15px;
    border: 0;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-30 {
    margin-top: 30px !important;
}

.mt-45 {
    margin-top: 45px !important;
}

.mt-60 {
    margin-top: 60px !important;
}

.mt-90 {
    margin-top: 90px !important;
}

.mt--120 {
    margin-top: -120px !important;
}

.mb-0 {
    margin-bottom: 0 !important;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-45 {
    margin-bottom: 45px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-90 {
    margin-bottom: 90px !important;
}

.mb-120 {
    margin-bottom: 120px !important;
}

.pt-60 {
    padding-top: 60px !important;
}

.pb-0 {
    padding-bottom: 0 !important;
}

.no-padding {
    padding: 0 !important;
}

.ml-30 {
    margin-left: 30px !important;
}

.mr-10 {
    margin-right: 10px !important;
}

.mr-15 {
    margin-right: 15px !important;
}

/* list */
.list {
    position: relative;
    display: block;
}

.list li {
    position: relative;
    display: flex;
    align-items: center;
}

.list li+li {
    margin-top: 10px;
}

.list-icon {
    display: grid;
}

.list-icon span {
    font-size: 11px;
    color: #1b1b1b;
    background-color: #f2f2f2;
    text-align: center;
    padding: 15px;
    border-radius: 100%;
}

.list-text {
    margin-left: 15px;
}

.list-text p {
    font-size: 14px;
    margin: 0;
    color: #555;
}

/* vertical line */
.line-vr-section {
    position: relative;
    margin: -25px auto;
    border: 0;
    border-left: 1px solid;
    border-color: #f5b754;
    width: 2px;
    height: 50px;
    z-index: 10;
    opacity: 1;
}


/* ======= Preloader style ======= */
.preloader-bg,
#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    z-index: 10000009;
}

#preloader {
    display: table;
    table-layout: fixed;
}

#preloader-status {
    display: table-cell;
    vertical-align: middle;
}

.preloader-position {
    position: relative;
    margin: 0 auto;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
}

.loader {
    position: relative;
    width: 70px;
    height: 70px;
    left: 50%;
    top: auto;
    margin-left: -22px;
    margin-top: 1px;
    -webkit-animation: rotate 1s infinite linear;
    -moz-animation: rotate 1s infinite linear;
    -ms-animation: rotate 1s infinite linear;
    -o-animation: rotate 1s infinite linear;
    animation: rotate 1s infinite linear;
    border: 1px solid rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

.loader span {
    position: absolute;
    width: 70px;
    height: 70px;
    top: -1px;
    left: -1px;
    border: 1px solid transparent;
    border-top: 1px solid #f5b754;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


/* ======= Owl-Theme Custom style ======= */
.owl-theme .owl-nav.disabled+.owl-dots {
    margin-top: 10px;
    line-height: .7;
    display: block;
}

.owl-theme .owl-dots .owl-dot span {
    width: 15px;
    height: 15px;
    margin: 0 3px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #999;
}

.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: #f5b754;
    border: 1px solid #f5b754;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    outline: none;
}

.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    background: transparent;
}

/* owl-nav next and prev */
.owl-nav {
    position: absolute;
    bottom: 5%;
    right: 12%;
}

.owl-prev {
    float: left;
}

.owl-next {
    float: right;
}

/* owl-theme owl-nav */
.owl-theme .owl-nav {
    position: absolute !important;
    top: 45% !important;
    bottom: auto !important;
    width: 100%
}

.owl-theme .owl-nav {
    position: relative;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.owl-theme .owl-prev,
.owl-theme .owl-prev {
    left: 10px !important
}

.owl-theme .owl-next {
    right: 10px !important
}

.owl-theme .owl-prev>span,
.owl-theme .owl-next>span {
    position: absolute;
    line-height: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.owl-theme .owl-nav [class*=owl-] {
    width: 50px;
    height: 50px;
    line-height: 45px;
    background: #f5b754;
    border-radius: 0;
    color: #1b1b1b;
    font-size: 10px;
    margin-right: 30px;
    margin-left: 30px;
    cursor: pointer;
    border: 1px solid #f5b754;
    transition: all 0.2s ease-in-out;
    transform: scale(1.0);
    border-radius: 100%;
}

.owl-theme .owl-nav [class*=owl-]:hover {
    background: #fff;
    border: 1px solid #fff;
    color: #06182d;
}

.owl-theme .owl-nav {
    top: 35% !important;
}

.owl-theme .owl-nav [class*=owl-] {
    opacity: 0;
}

.owl-theme:hover .owl-nav [class*=owl-] {
    opacity: 1;
}


/* ======= Section style ======= */
.section-padding {
    padding: 120px 0;
}

section.contact.section-padding {
    padding-top: 40px;
}

.section-title {
    font-size: 35px;
    font-family: 'Outfit', sans-serif;
    color: #1b1b1b;
    position: relative;
    margin-bottom: 15px;
    line-height: 1.25em;
    font-weight: 700;
}

[data-overlay-dark] .section-title span,
.section-title span {
    color: #f5b754;
}

.section-title.white {
    color: #fff;
}

.section-title.black {
    color: #1b1b1b;
}

.section-subtitle {
    font-size: 10px;
    line-height: 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: #f5b754;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.section-subtitle.white {
    color: #fff;
}


/* ======= Navbar style ======= */
.navbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    background: transparent;
    z-index: 99;
    padding-right: 0;
    padding-left: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 100px;
    border: none;
}

.navbar .container {
    border: none;
}

.nav-scroll .container {
    border: none;
}

.navbar-toggler-icon {
    background-image: none;
}

.navbar .navbar-toggler-icon,
.navbar .icon-bar {
    color: #fff;
}

.navbar .navbar-nav .nav-link {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin: 1px;
    -webkit-transition: all .4s;
    transition: all .4s;
    padding-right: 9px;
    padding-left: 9px;
}

.navbar .navbar-nav .nav-link.nav-color {
    color: #1b1b1b;
}

.navbar .navbar-nav .nav-link:hover {
    color: #f5b754;
}

.navbar .navbar-nav .nav-link:hover i {
    color: #f5b754;
}

.navbar .navbar-nav .active {
    color: #f5b754 !important;
}

.navbar .navbar-nav .active i {
    color: #f5b754;
}

.nav-scroll {
    background: #fff;
    padding: 0 0 0 0;
    position: fixed;
    top: -100px;
    left: 0;
    width: 100%;
    -webkit-transition: -webkit-transform .5s;
    transition: -webkit-transform .5s;
    transition: transform .5s;
    transition: transform .5s, -webkit-transform .5s;
    -webkit-transform: translateY(100px);
    transform: translateY(100px);
    border: none;
    -webkit-box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
    box-shadow: 0px 5px 15px rgb(15 36 84 / 5%);
}

.nav-scroll .navbar-toggler-icon,
.nav-scroll .icon-bar {
    color: #1b1b1b;
}

.nav-scroll .navbar-nav .nav-link {
    color: #1b1b1b;
}

.nav-scroll .navbar-nav .active {
    color: #f5b754;
}

.nav-scroll .navbar-nav .logo {
    padding: 15px 0;
    color: #fff;
}

.nav-scroll .logo-img {
    width: 260px;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15));
}

.nav-scroll .logo-img {
    margin-bottom: 0px;
}

.nav-scroll .logo-wrapper .logo h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 30px;
    font-weight: 700;
    display: block;
    width: 100%;
    position: relative;
    color: #1b1b1b;
    margin-bottom: 0;
    padding: 0;
    line-height: 1.25em;

}

.nav-scroll .logo-wrapper .logo span {
    color: #f5b754;
}

.nav-scroll .logo-wrapper {}

.logo-wrapper {
    float: left;
}

.logo-wrapper .logo h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 28px;
    font-weight: 700;
    display: block;
    width: 100%;
    position: relative;
    color: #fff;
    margin-bottom: 0;
    padding: 0;
    line-height: 1.25em;
    text-transform: uppercase;
}

.logo-wrapper .logo h2 span {
    color: #f5b754;
}

.logo {
    padding: 0;
}

.logo-img {
    width: 260px;
    text-align: center;
    image-rendering: -webkit-optimize-contrast;
    filter: drop-shadow(0px 2px 6px rgba(0, 0, 0, 0.25));
    transition: all 0.3s ease;
}

.dropdown .nav-link i {
    padding-left: 0px;
    font-size: 8px;
    color: #fff;
}

.nav-scroll .dropdown .nav-link i {
    color: #555;
}

.nav-scroll .navbar-nav .active i {
    color: #f5b754;
}

.navbar .dropdown-menu .dropdown-item {
    padding: 7px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #1b1b1b;
    position: relative;
    background-color: transparent;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.navbar .dropdown-menu .dropdown-item span {
    display: block;
    cursor: pointer;
}

.navbar .dropdown-menu .dropdown-item i {
    padding: 13px 0 0 5px;
    font-size: 8px;
    float: right;
    color: #1b1b1b;
}

.navbar .dropdown-menu .dropdown-item.active i {
    color: #f5b754;
}

.navbar .dropdown-menu .dropdown:hover>.dropdown-item,
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:hover {
    color: #f5b754;
}

.navbar .dropdown-toggle::after {
    display: none;
}

.navbar .dropdown-menu {
    box-shadow: 0 16px 50px rgb(27 27 27 / 7%);
}

.navbar .dropdown-menu li:last-child {
    border-bottom: none;
}

/* li hover */
.navbar .dropdown-menu li {
    position: relative;
    display: block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.navbar .dropdown-menu li:hover {
    padding-left: 5px;
}

.navbar .dropdown-menu .dropdown-menu.pull-left {
    top: 0;
    left: auto;
    right: 100%;
}

/* navbar-right */
.navbar .navbar-right {
    position: relative;
    display: flex;
    align-items: center;
}

.navbar .navbar-right .wrap {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 5;
    margin-left: 20px;
}

.navbar .navbar-right .wrap .icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    background-color: transparent;
    border-radius: 50%;
    font-size: 21px;
    color: #fff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    border: 1px solid #f5b754;
}

.nav-scroll .navbar-right .wrap .icon {
    color: #1b1b1b;
}

.navbar .navbar-right .wrap .icon:hover {
    background-color: #f5b754;
    color: #1b1b1b;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.navbar .navbar-right .wrap .text {
    margin-left: 10px;
    top: 3px;
    position: relative;
}

.navbar .navbar-right .wrap .text p {
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    margin-bottom: 4px;
}

.navbar .navbar-right .wrap .text h5 {
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
    color: #fff;
    margin-bottom: 5px;
}

.navbar .navbar-right .wrap .text h5 a {
    color: #fff;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.navbar .navbar-right .wrap .text h5 a:hover {
    color: #f5b754;
}

.nav-scroll .navbar-right .wrap .text p,
.nav-scroll .navbar-right .wrap .text h5,
.nav-scroll .navbar-right .wrap .text h5 a {
    color: #1b1b1b;
}

/* Navbar Media Query */
@media screen and (min-width: 992px) {
    .navbar .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        width: 210px;
        padding: 15px 25px;
        border-radius: 20px;
        border: 0;
        background-color: #fff;
        -webkit-transition: all .3s;
        transition: all .3s;
    }

    .navbar .dropdown-menu .dropdown-menu {
        left: calc(100% + 10px);
        top: -12px;
        right: auto;
        min-width: 210px;
        transform: translateY(0);
    }

    .navbar .dropdown:hover>.dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

@media screen and (max-width: 991px) {
    .navbar {
        padding-left: 0px;
        padding-right: 0px;
        background: transparent;
        padding-top: 0px;
        padding-bottom: 0px;
        height: 85px;
    }

    .nav-scroll {
        background: #fff;
    }

    .logo-wrapper {
        float: left;
        padding: 28.5px 15px;
    }

    .nav-scroll .logo-wrapper {
        padding: 28.5px 15px;
        background-color: transparent;
    }

    .nav-scroll .logo-img {
        width: 130px;
    }

    .navbar .logo {
        text-align: left;
        margin-left: 0px;
    }

    .nav-scroll .logo {}

    .logo-img {
        margin-bottom: 0px;
        width: 130px;
        padding: 0;
    }

    .navbar button {
        margin-right: 0px;
        outline: none !important;
        background: transparent;
        margin-top: 10px;
        border: none;
    }

    .navbar button:hover {
        background: transparent;
    }

    .navbar button:active,
    .navbar button:focus,
    .navbar button:hover {
        background: transparent;
        outline: none;
        color: transparent !important;
    }

    .navbar .container {
        max-width: 100%;
        padding: 0;
    }

    .navbar .nav-link {
        margin: 0px auto !important;
    }

    .navbar .navbar-nav .nav-link {
        color: #1b1b1b;
    }

    .nav-scroll .navbar-collapse .nav-link {
        color: #1b1b1b !important;
    }

    .nav-scroll .navbar-collapse .active {
        color: #f5b754 !important;
    }

    .navbar .dropdown-menu .dropdown-item {
        color: #1b1b1b;
        padding: 0 15px;
        font-size: 14px;
        line-height: 40px;
    }

    .navbar .dropdown-menu .dropdown-item.dropdown-toggle {
        font-weight: 300;
    }

    .navbar .dropdown-submenu .dropdown-toggle::after {
        right: 15px;
        font-size: 10px;
    }

    .navbar .dropdown-submenu:hover>.dropdown-toggle::after {
        transform: rotate(0deg);
    }

    .navbar .dropdown-submenu .dropdown-toggle.show::after {
        transform: rotate(90deg);
    }

    .navbar .dropdown-menu {
        border: none;
        padding: 0;
        border-radius: 0;
        margin: 0;
        background: #fff;
        box-shadow: none;
    }

    .navbar .dropdown-submenu .dropdown-menu {
        margin: 0;
        padding: 0 0 0 20px;
    }

    .navbar .dropdown-menu li a {
        padding: 0 15px;
    }

    .navbar .navbar-nav .nav-link {
        padding-right: 0px;
        padding-left: 0px;
    }

    .navbar .navbar-nav {
        padding: 20px;
    }

    .navbar .navbar-collapse {
        /* Sized to its own nav-link content (capped at the viewport so it
           still scrolls instead of overflowing on very short screens),
           not stretched to the bottom of the screen — a slightly
           see-through panel that sits under the 85px bar. */
        max-height: calc(100vh - 85px);
        overflow: auto;
        background: rgba(255, 255, 255, 0.94);
        text-align: left;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
    }

    .dropdown .nav-link i {
        color: rgba(0, 0, 0, 0.5);
    }

    .nav-scroll .dropdown .nav-link i {
        color: rgba(0, 0, 0, 0.5);
    }

    .nav-scroll .dropdown .nav-link.active i {
        color: #f5b754;
    }

    .navbar .dropdown-menu .dropdown-item i {
        color: #1b1b1b;
    }

    .navbar .navbar-right {
        display: none;
    }
}


/* ======= Header style ======= */
.header {
    height: 100vh;
    overflow: hidden;
}

.header .caption .o-hidden {
    display: inline-block;
}

.header .caption h6 {
    position: relative;
    font-size: 12px;
    font-weight: 300;
    color: #f5b754;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 0px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.header .caption h1 {
    position: relative;
    font-size: 90px;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff;
    line-height: 1em;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    display: inline-grid;
}

.header .caption h1 span {
    color: #f5b754;
}

.header .caption h2 {
    position: relative;
    font-size: 60px;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff;
    line-height: 1.25em;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    display: inline-grid;
}

.header .caption h2 span {
    color: #f5b754;
}

.header .caption h5 {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: #fff;
    margin: 10px 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.header .caption h5 span {
    display: inline-block;
    font-weight: 700;
    font-size: 21px;
    color: #f5b754;
    margin-left: 20px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.header .caption h5 span i {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.header .caption .button-1,
.header .caption .button-2 {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
    margin-right: 15px;
    margin-bottom: 15px;
    font-size: 14px;
}

.header .car-features {
    -webkit-animation-delay: .9s;
    animation-delay: .9s;
}

/* ======= Slider style ======= */
.slider-fade .owl-item {
    height: 100vh;
    position: relative;
}

.slider-fade .item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.slider-fade .item .caption {
    z-index: 9;

    position: relative;
    top: 50%;
    -webkit-transform: translate(0%, -50%);
    transform: translate(0%, -50%);
}

/* owl-theme owl-dots */
.slider-fade .owl-theme .owl-dots {
    position: absolute;
    bottom: 4vh;
    width: 100%;
}

.slider-fade .owl-theme .owl-dots .owl-dot span {
    border: 1px solid #fff;
}

.slider-fade .owl-theme .owl-dots .owl-dot.active span,
.slider-fade .owl-theme .owl-dots .owl-dot:hover span {
    background: #f5b754;
    border: 1px solid #f5b754;
}

/* owl-theme owl-nav */
.slider-fade .owl-theme .owl-nav {
    position: absolute !important;
    top: 45% !important;
    bottom: auto !important;
    width: 100%
}

.slider-fade .owl-theme .owl-nav {
    position: relative;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.slider-fade .owl-theme .owl-prev,
.slider-fade .owl-theme .owl-prev {
    left: 10px !important
}

.slider-fade .owl-theme .owl-next {
    right: 10px !important
}

.slider-fade .owl-theme .owl-prev>span,
.slider-fade .owl-theme .owl-next>span {
    position: absolute;
    line-height: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.slider-fade .owl-theme .owl-nav [class*=owl-] {
    width: 50px;
    height: 50px;
    line-height: 43px;
    background: #f5b754;
    border-radius: 100%;
    color: #1b1b1b;
    font-size: 10px;
    margin-right: 30px;
    margin-left: 30px;
    cursor: pointer;
    border: 1px solid #f5b754;
    transition: all 0.2s ease-in-out;
    transform: scale(1.0);
}

.slider-fade .owl-theme .owl-nav [class*=owl-]:hover {
    background: #fff;
    border: 1px solid #fff;
    color: #1b1b1b;
}

.slider-fade .owl-theme .owl-nav {
    top: 40% !important;
}

.slider-fade .owl-theme .owl-nav [class*=owl-] {
    opacity: 0;
}

.slider-fade .owl-theme:hover .owl-nav [class*=owl-] {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .slider-fade .owl-theme .owl-nav {
        display: none;
    }
}


/* ======= Slider style (Inner Page Slider) ======= */
.slider .owl-item {
    height: 100vh;
    position: relative;
}

.slider .item {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.slider .item .caption {
    z-index: 9;
}

/* owl-dots for slider */
.slider .owl-theme .owl-dots {
    position: absolute;
    /* width: 100%; */
    bottom: 5%;
    left: 12%;
}


/* ======= Parallax Header style ======= */
.parallax-header {
    min-height: 100vh;
    background-position: center;
}

.parallax-header.full-height {
    min-height: 100vh;
    background-position: center;
}

.parallax-header .caption {
    position: relative;
}

.parallax-header[data-overlay-dark] h6,
.parallax-header h6 {
    position: relative;
    font-size: 12px;
    font-weight: 300;
    color: #f5b754;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 5px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.parallax-header[data-overlay-dark] h1,
.parallax-header h1 {
    position: relative;
    font-size: 90px;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff;
    line-height: 1em;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    display: inline-grid;
}

.parallax-header h5 {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: #fff;
    margin: 15px 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.parallax-header h5 span {
    display: inline-block;
    font-weight: 700;
    font-size: 21px;
    color: #f5b754;
    margin-left: 20px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.parallax-header h5 span i {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.parallax-header[data-overlay-dark] p,
.parallax-header p {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

.parallax-header .button-1,
.parallax-header .button-2 {
    font-size: 14px;
}


/* ======= Parallax Header 2 style ======= */
.parallax-header2 {
    min-height: 100vh;
    background-position: center;
}

.parallax-header2 .item {
    position: relative;
    display: block;
    z-index: 1;
}

.parallax-header2 .item .head {
    position: relative;
    display: block;
    background-color: rgba(245, 183, 84, 0.9);
    margin: 0 auto;
    text-align: center;
    padding: 40px 15px;
    border-radius: 15px 15px 0 15px;
}

.parallax-header2 .item .head .subtitle {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%) rotate(-5deg);
    background-color: #ff0000;
    padding: 7px 25px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 300;
    line-height: 25px;
    color: #fff;
    margin-bottom: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.parallax-header2 .item .head .title {
    font-family: 'Outfit', sans-serif;
    font-size: 60px;
    font-weight: 800;
    line-height: 60px;
    color: #1b1b1b;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.parallax-header2 .item .head .shape {
    position: absolute;
    right: 0;
    bottom: -30px;
    border-color: transparent rgba(245, 183, 84, 0.9) transparent transparent;
    border-style: solid;
    border-width: 0px 45px 30px 0px;
    width: 0px;
    height: 0px;
    border-radius: 0 0 5px 0;
}

.parallax-header2 .item .cont {
    position: relative;
    display: block;
    padding-top: 90px;
}

.parallax-header2 .item .cont .list {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.parallax-header2 .item .cont .list .icon {
    position: relative;
    display: inline-block;
}

.parallax-header2 .item .cont .list .icon span {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 14px;
    color: #000;
    background-color: rgba(245, 183, 84, 0.8);
    border-radius: 50%;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.parallax-header2 .item .cont .list .icon span:hover {
    background-color: #fff;
    color: #000;
}

.parallax-header2 .item .cont .list .text {
    margin-left: 15px;
    font-size: 18px;
    font-weight: 300;
    line-height: 30px;
    color: #fff;
    margin-bottom: 0;
}

.bottom-fadex {
    content: "";
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(1800deg, #1b1b1b 0%, rgba(27, 27, 27, 0) 70%);
}

.topmargin-60 {
    margin-top: 60px;
}

@media screen and (max-width: 991px) {
    .parallax-header .topmargin-60 {
        margin-top: 30px;
    }

    .parallax-header2 .item .head {
        padding: 20px 15px;
    }

    .parallax-header2 .item .head .subtitle p {
        font-size: 12px;
    }

    .parallax-header2 .item .head .title {
        font-size: 40px;
    }

    .parallax-header2 .item .cont {
        position: relative;
        display: block;
        padding-top: 60px;
    }

    .parallax-header2 .item .cont .list {
        margin-bottom: 10px;
    }

    .parallax-header2 .item .cont .list .icon span {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 11px;
    }

    .parallax-header2 .item .cont .list .text {
        font-size: 14px;
    }
}



/* ===== Kenburns SlideShow style ===== */
.kenburns-section {
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 100vh;
}

.kenburns-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -5;
    background: #1b1b1b;
}

.kenburns-inner {
    position: relative;
    z-index: 15;
}

.kenburns-inner .caption {
    position: relative;
}

.kenburns-inner .caption h6 {
    position: relative;
    font-size: 12px;
    font-weight: 300;
    color: #f5b754;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 5px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.kenburns-inner .caption h1 {
    position: relative;
    font-size: 90px;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff;
    line-height: 1em;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    display: inline-grid;
}

.kenburns-inner .caption h5 {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: #fff;
    margin: 15px 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.kenburns-inner .caption h5 span {
    display: inline-block;
    font-weight: 700;
    font-size: 21px;
    color: #f5b754;
    margin-left: 20px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.kenburns-inner .caption h5 span i {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.kenburns-inner .caption[data-overlay-dark] p {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

#kenburnsSliderContainer .vegas-overlay {
    outline: none;
}

@media screen and (max-width: 767px) {
    .kenburns-inner .caption h6 {
        font-size: 12px;
    }

    .kenburns-inner .caption h1 {
        font-size: 42px;
    }

    .kenburns-inner .caption {
        text-align: center;
    }
}



/* ======= Slider Grid Background ======= */
.slider-grid-bg {
    min-height: 100vh;
    background-size: cover;
    background-position: 50%;
    position: relative;
    overflow: hidden;
}

.slider-grid-bg .grid-img {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    position: fixed;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    transform: scale(1);
    transition: transform 5s, opacity .35s;
    opacity: 0;
    display: block;
}

.slider-grid-bg .grid-img.grid-img-active {
    opacity: 1;
    transform: scale(1.09);
}

.slider-grid-bg .content {
    position: relative;
    z-index: 2;
    margin-top: 60px !important;
}

.slider-grid-bg .content .item {
    margin-bottom: 30px;
    display: -ms-flexbox;
    display: flex;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}

.slider-grid-bg .content .item:hover {
    transform: translateY(-5px);
}

.slider-grid-bg .content .item .grid-con {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    transition: all .3s;
    background: transparent;
    position: relative;
    border-radius: 6px;
    padding: 30px;
    background: #fff;
}

.slider-grid-bg .content .item .grid-con.grid-con-active,
.slider-grid-bg .content .item .grid-con:hover {
    background: #f5b754;
}

.slider-grid-bg .content .item .grid-con img {
    width: 20px;
}

.slider-grid-bg .content .item .grid-con .arrow {
    position: absolute;
    right: 30px;
    z-index: 3;
    font-size: 17px;
    color: #1b1b1b;
    text-align: center;
    line-height: 12px;
}

.slider-grid-bg .content .item .grid-con:hover .arrow,
.slider-grid-bg .content .item .grid-con.grid-con-active .arrow {
    color: #1b1b1b;
}

.slider-grid-bg .text {}

.slider-grid-bg .text .subtitle {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 300;
    color: #f5b754;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.slider-grid-bg .text .title {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 1.2em;
    color: #1b1b1b;
    margin-top: 5px;
    margin-bottom: 5px;
}

.slider-grid-bg .content .item .grid-con:hover .subtitle,
.slider-grid-bg .content .item .grid-con.grid-con-active .subtitle {
    color: #1b1b1b;
}

.slider-grid-bg .content .item .grid-con:hover .title,
.slider-grid-bg .content .item .grid-con.grid-con-active .title {
    color: #1b1b1b;
}

/* =======  Video Background style  ======= */
.video-fullscreen-wrap {
    height: 100vh;
    overflow: hidden;
}

.video-fullscreen-video {
    height: 100%;
}

.video-fullscreen-wrap video {
    width: 100vw;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.video-fullscreen-wrap .video-fullscreen-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: right;
}

.video-lauch-wrapper {
    border: none;
    background: none;
    width: 100%;
    padding: 0;
}

.position-relative {
    position: relative !important;
}

.video-fullscreen-wrap h6 {
    position: relative;
    font-size: 12px;
    font-weight: 300;
    color: #f5b754;
    text-transform: uppercase;
    letter-spacing: 6px;
    margin-bottom: 5px;
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.video-fullscreen-wrap h1 {
    position: relative;
    font-size: 90px;
    font-weight: 700;
    margin-bottom: 0;
    color: #fff;
    line-height: 1em;
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
    display: inline-grid;
}

.video-fullscreen-wrap h5 {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 300;
    color: #fff;
    margin: 15px 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.video-fullscreen-wrap h5 span {
    display: inline-block;
    font-weight: 700;
    font-size: 21px;
    color: #f5b754;
    margin-left: 20px;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.video-fullscreen-wrap h5 span i {
    font-style: normal;
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    color: #fff;
    letter-spacing: 0;
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.video-fullscreen-wrap[data-overlay-dark] p {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
}

.video-fullscreen-wrap .button-1,
.video-fullscreen-wrap .button-2 {
    font-size: 14px;
}


/* ======= Car Features style ======= */
.car-features {
    position: relative;
    padding: 0;
    background: #fff;
    border-radius: 20px;
}

.car-features .wrapp {
    padding: 40px;
}

.car-features .wrapp .features {
    padding: 15px 0;
    display: grid;
    grid-template-columns: 70% 30%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.car-features .wrapp .features:last-child {
    border: none;
}

.car-features .wrapp .features span {
    color: #1b1b1b;
}

.car-features .wrapp .features span i {
    color: #1b1b1b;
    margin-right: 10px;
    font-size: 14px;
    background: #f5b754;
    padding: 10px;
    border-radius: 100%;
}

.car-features .wrapp .features p {
    margin-bottom: 0px;
    color: #1b1b1b;
    text-align: right;
}

@media screen and (max-width: 991px) {
    .car-features {
        display: none;
    }
}

/* ======= Banner Header style ======= */
.banner-header {
    height: 70vh;
    background-position: center;
}

.banner-header.middle-height {
    min-height: 80vh;
}

.banner-header.full-height {
    min-height: 100vh;
}

.banner-header[data-overlay-dark] h6,
.banner-header h6 {
    font-size: 10px;
    line-height: 10px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    color: #f5b754;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
    z-index: 1;
    text-transform: uppercase;
    letter-spacing: 6px;
}

.banner-header h1 {
    font-size: 42px;
    color: #1b1b1b;
    position: relative;
    line-height: 1.25em;
    margin-bottom: 0;
}

.banner-header h1 span {
    color: #f5b754;
}

.banner-header p {
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
    color: #1b1b1b;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.banner-header .post-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 0;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #fff;
    font-size: 14px;
    margin-bottom: 15px;
}

.banner-header .post-wrapper a {
    color: #f5b754;
    font-size: 14px;
    font-weight: 300;
}

.banner-header .post-wrapper .divider {
    width: 20px;
    height: 1px;
    margin-right: 15px;
    margin-left: 15px;
    background-color: #f5b754;
}

@media screen and (max-width: 991px) {
    .banner-header h1 {
        font-size: 42px;
    }
}


/* ======= About style ======= */
.about {
    position: relative;
}

.about .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
}

.about .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.about .item:hover img {
    transform: scale(1.05);
}

.about .item .title {
    position: absolute;
    top: 0px;
    padding: 30px;
}

.about .item .title h4 {
    color: #fff;
    font-size: 21px;
    text-transform: uppercase;
}

.about .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 0 40px 0 0;
}

.about .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.about .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.about .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.about .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.about .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.about .item .curv-butn .icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 21px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    background: #f5b754;
    border-radius: 100%;
}

.about .item:hover .curv-butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}


/* ======= Team style ======= */
.team {
    position: relative;
}

.team .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
}

.team .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
    isolation: isolate;
}

.team .item:hover img {
    transform: scale(1.05);
}

.team .item .title {
    position: absolute;
    bottom: 0;
    padding: 0;
    z-index: 1;
    left: 110px;
}

.team .item .title h4 {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 0;
}

.team .item .title h6 {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 300;
    font-size: 14px;
    margin-bottom: 20px;
}

.team .item .butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 0 40px 0 0;
    z-index: 2;
}

.team .item .butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.team .item .butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.team .item .butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.team .item .butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.team .item .butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.team .item .butn .icon {
    width: 60px;
    height: 60px;
    font-size: 17px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    background-color: #f5b754;
    border-radius: 100%;
    line-height: 60px;
}

.team .item:hover .butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}


/* ======= Team-Single style ======= */
.team-single h6 {
    font-size: 21px;
    color: #1b1b1b;
}

/* img */
.team-single .team-img img:hover {
    transform: scale(0.99);
}

.team-single .team-img {
    position: relative;
}

.team-single .team-img .img img {
    position: relative;
    z-index: 2;
}

/* team-single list */
.team-single .list {
    position: relative;
    display: block;
}

.team-single .list li {
    position: relative;
    display: flex;
    align-items: center;
}

.team-single .list li+li {
    margin-top: 10px;
}

.team-single .list-icon {
    align-items: center;
    background: #f2f2f2;
    border-radius: 100%;
}

.team-single .list-icon span {
    font-size: 10px;
    color: #1b1b1b;
    background-color: transparent;
}

.team-single .list-text {
    margin-left: 15px;
}

.team-single .list-text p {
    font-size: 14px;
    margin: 0;
    color: #555;
}

/* team-single details */
.team-single .wrapper {
    position: relative;
}

.team-single .wrapper .cont {
    width: 100%;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 10px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.team-single .wrapper .cont .coll {
    width: auto;
    max-width: auto;
}

.team-single .wrapper .cont .coll h6 {
    font-size: 14px;
    font-weight: 300;
    line-height: 1em;
    white-space: normal;
    margin: 0;
    color: #1b1b1b;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0;
}

.team-single .wrapper .cont .coll h5 {
    font-size: 14px;
    font-weight: 300;
    white-space: normal;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
    transition: color .3s;
    color: #1b1b1b;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0;
}

/* team-single social */
.team-single .wrapper .cont .coll .social-icon {
    text-align: center;
    margin-bottom: 0px;
}

.team-single .wrapper .cont .coll .social-icon a {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #f2f2f2;
    color: #1b1b1b;
    border-radius: 0;
    margin-right: 5px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    background: #f2f2f2;
    border-radius: 100%;
}

.team-single .wrapper .cont .coll .social-icon a:hover {
    border: 1px solid #f5b754;
    background: #f5b754;
    color: #1b1b1b;
}

.team-single .wrapper .cont .coll p {
    color: #555;
}

/* team-single link */
.team-single .wrapper p a {
    background: linear-gradient(to bottom, #f5b754 0%, #f5b754 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1px 1px;
    color: #1b1b1b;
    text-decoration: none;
    transition: background-size .1s;
}

.team-single .wrapper p a:hover {
    color: #f5b754;
}

/* team-single tabs */
.team-single .cont .simpl-bord.nav-tabs {
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #f5b754;
    ;
}

.team-single .cont .simpl-bord .nav-item {
    margin-right: 30px;
}

.team-single .cont .simpl-bord .nav-item:last-of-type {
    margin-right: 0;
}

.team-single .cont .simpl-bord .nav-link {
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent !important;
    font-weight: 700;
    cursor: pointer;
    color: #1b1b1b;
    font-size: 14px;
    font-family: 'Outfit', sans-serif;
}

.team-single .cont .simpl-bord .nav-link.active {
    font-weight: 700;
    color: #f5b754;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
}

.team-single .tab-content p {
    color: #555;
}


/* ======= Cars 1 style ======= */
.cars1 {
    position: relative;
    overflow: hidden;
}

.cars1 .cars1-carousel {
    position: relative;
    display: block;
    max-width: 800px;
    margin: 0 auto;
}

.cars1 .cars1-carousel.owl-carousel .owl-stage-outer {
    overflow: visible;
    padding: 0px 0px 0px;
}

.cars1 .item {
    position: relative;
    display: block;
    margin-bottom: 15px;
}

.cars1 .item .img {
    position: relative;
    display: block;
    overflow: hidden;
    z-index: 1;
    border-radius: 20px;

    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.cars1 .item:hover img {
    transform: scale(1.05);
}

.cars1 .item .con {
    position: relative;
    display: block;
    background-color: #f2f2f2;
    padding: 30px 25px;
    margin-top: -55px;
    margin-left: 25px;
    margin-right: 25px;
    overflow: hidden;
    transition: all 500ms ease;
    z-index: 2;
    visibility: visible;
    opacity: 0;
    border-radius: 20px;
}

.cars1 .item .con.opacity-1 {
    opacity: 0;
}

.cars1 .item .con.active {
    visibility: visible;
    opacity: 1;
}

.cars1 .item .con .title,
.cars1 .item .con .title a {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    margin-bottom: 0px;
    color: #1b1b1b;
    font-weight: 700;
    line-height: 1.2em;
    transition: all 500ms ease;
}

.cars1 .item .con .details {
    font-size: 14px;
    color: #555;
    margin-bottom: 0;
    margin-right: 10px;
    transition: all 500ms ease;
}

.cars1 .item .con .details span {
    margin-right: 10px;
}

.cars1 .item .con .details span i {
    color: #f5b754;
    margin-right: 2px;
    font-style: normal;
}

/* book */
.cars1 .item .con .book {
    text-align: -webkit-right;
    margin-top: 1px;
}

.cars1 .item .con .book .btn {
    margin: 0;
    background: #f5b754;
    padding: 14px 21px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    border-radius: 30px;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 14px;
}

.cars1 .item .con .book .btn:hover {
    background: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
}

.cars1 .item .con .book>div {
    display: table-cell;
    vertical-align: middle;
}

.cars1 .item .con .book>div:nth-child(2) {
    padding-left: 15px;
    padding-right: 0;
    font-size: 14px;
    line-height: 1.2em;
}

.cars1 .item .con .book>div>span {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
    color: #555;
}

.cars1 .item .con .book .price {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    line-height: 1.2em;
    color: #f5b754;
    font-weight: 700;
}

/* owl nav */
.owl-item.active .item .con {
    visibility: visible;
    opacity: 1;
}

.cars1 .owl-theme .owl-nav {
    position: absolute !important;
    top: 45% !important;
    bottom: auto !important;
    width: 100%
}

.cars1 .owl-theme .owl-nav {
    position: relative;
    position: absolute;
    bottom: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.cars1 .owl-theme .owl-prev,
.cars1 .owl-theme .owl-prev {
    left: 10px !important
}

.cars1 .owl-theme .owl-next {
    right: 10px !important
}

.cars1 .owl-theme .owl-prev,
.cars1 .owl-theme .owl-next {
    color: #fff;
    position: absolute !important;
    top: 50%;
    padding: 0;
    height: 50px;
    width: 50px;
    border-radius: 0%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    line-height: 0;
    text-align: center;
    font-size: 14px
}

.cars1 .owl-theme .owl-prev>span,
.cars1 .owl-theme .owl-next>span {
    position: absolute;
    line-height: 0;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}

.cars1 .owl-carousel .owl-nav button.owl-next,
.cars1 .owl-carousel .owl-nav button.owl-prev {
    outline: none;
}

.cars1 .owl-theme .owl-nav [class*=owl-] {
    width: 55px;
    height: 55px;
    line-height: 58px;
    background: #f5b754;
    border-radius: 100%;
    color: #1b1b1b;
    font-size: 10px;
    margin-right: 5px;
    margin-left: 5px;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease-in-out;
    transform: scale(1.0);
}

.cars1 .owl-theme .owl-nav [class*=owl-]:hover {
    background: #1b1b1b;
    color: #fff;
}

.cars1 .owl-theme .owl-nav {
    top: 35% !important;
}

.cars1 .owl-theme .owl-nav [class*=owl-] {
    opacity: 0;
}

.cars1 .owl-theme:hover .owl-nav [class*=owl-] {
    opacity: 1;
}

@media screen and (max-width: 991px) {
    .cars1 .item .con {
        padding: 30px 20px;
        margin: 0;
    }

    .order2 {
        -webkit-box-ordinal-group: 3 !important;
        -ms-flex-order: 2 !important;
        order: 2 !important;
    }

    .order1 {
        -webkit-box-ordinal-group: 2 !important;
        -ms-flex-order: 1 !important;
        order: 1 !important;
    }

    .cars1 .item .con .book {
        text-align: left;
        margin-top: 3px;
    }

    .cars1-carousel {
        overflow: hidden;
    }

    .cars1 .owl-theme .owl-nav {
        display: none;
    }
}


/* ======= Cars 2 style ======= */
.cars2 {
    position: relative;
}

.cars2 .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
}

.cars2 .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.cars2 .item:hover img {
    transform: scale(1.05);
}

.cars2 .item .title {
    position: absolute;
    bottom: 0px;
    padding: 0 20px 25px 110px;
    width: 100%;
    text-align: right;
}

.cars2 .item .title h6 {
    color: #f5b754;
    font-size: 10px;
    line-height: 10px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cars2 .item .title h4 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 5px;
}

.cars2 .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 0 45px 0 0;
}

.cars2 .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.cars2 .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.cars2 .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.cars2 .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.cars2 .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.cars2 .item .curv-butn .icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    border-radius: 100%;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    background: #f5b754;
}

.cars2 .item:hover .curv-butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}

/* show and hidden class */
.cars2 .item .curv-butn .icon i {
    font-weight: 300;
    font-style: normal;

}

.cars2 .item .curv-butn .icon i span {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    line-height: 15px;
    vertical-align: middle;
    font-size: 16px;
    color: #1b1b1b;
}

.cars2 .item .curv-butn .icon i span i {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
    color: #1b1b1b;
}

.cars2 .item:hover .curv-butn .icon i.icon-show,
.cars2 .item .curv-butn .icon i.icon-hidden {
    display: none;
}

.cars2 .item:hover .curv-butn .icon i.icon-hidden {
    display: inline;
    width: 60px;
    height: 60px;
    line-height: 65px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
}

/* details */
.cars2 .item .title .details {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    transition: all 500ms ease;
}

.cars2 .item .title .details span {
    margin-right: 10px;
}

.cars2 .item .title .details span i {
    color: #f5b754;
    margin-right: 2px;
    font-style: normal;
}

.cars2 .item .title .details span:last-child {
    margin-right: 0px;
}


/* ======= Cars 3 style ======= */
.cars3 {
    position: relative;
}

.cars3 .item {
    position: relative;
    margin-bottom: 15px;
}

.cars3 .item:hover .img .arrow {
    background-color: #f5b754;
    border: 1px solid #f5b754;
    color: #1b1b1b;
}

.cars3 .item .img {
    position: relative;
    border-radius: 0 20px 20px 20px;
    overflow: hidden;
    display: block;
    isolation: isolate;
}

.cars3 .item .img::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.3;
}

.cars3 .item .img {
    overflow: hidden;
}

.cars3 .item .img img {
    width: 100%;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.cars3 .item:hover .img img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.cars3 .item .img .arrow {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: transparent;
    font-size: 14px;
    color: #fff;
    border: 1px solid #fff;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 10;
}

.cars3 .item .info {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 30px;
    color: #fff;
}

.cars3 .item .info .title {
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    margin-bottom: 5px;
}

.cars3 .item .info .title a {
    color: #fff;
}

.cars3 .item .info .details {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0;
    margin-right: 10px;
    transition: all 500ms ease;
}

.cars3 .item .info .details span {
    margin-right: 10px;
}

.cars3 .item .info .details span i {
    color: #f5b754;
    margin-right: 2px;
    font-style: normal;
}

.cars3 .item .project-date {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    border-radius: 0 0 20px 0;
    z-index: 1;
    background: #fff !important;
}

.cars3 .item .project-date .br {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
}

.cars3 .item .project-date .br-left-top {
    position: absolute;
    top: 0px;
    right: -20px;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    line-height: 1;
}

.cars3 .item .project-date .br-left-top svg {
    width: 20px;
    height: 20px;
}

.cars3 .item .project-date .br-right-bottom {
    position: absolute;
    bottom: -20px;
    left: 0px;
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    line-height: 1;
}

.cars3 .item .project-date .br-right-bottom svg {
    width: 20px;
    height: 20px;
}

.cars3 .item .project-date .year {
    height: 50px;
    line-height: 20px;
    font-size: 21px;
    font-weight: 700;
    color: #f5b754;
    margin: 0;
    padding: 0;
}

.cars3 .item .project-date .year span {
    color: #555;
    font-size: 14px;
    font-weight: 300;
    display: block;
}


/* ======= Cars 4 style ======= */
.cars4 {
    position: relative;
}

.cars4 h3 {
    color: #fff;
    font-size: 21px;
}

/* sidebar */
.cars4 .sidebar-list {
    position: relative;
    display: block;
    padding: 0;
    background: #f2f2f2;
    border-radius: 20px;
    margin-top: -240px;
    z-index: 9;
}

.cars4 .sidebar-list .search {
    position: relative;
    background-color: #f5b754;
    padding: 30px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.cars4 .sidebar-list .search form {
    position: relative;
}

.cars4 .sidebar-list .search form input {
    width: 100%;
    padding: 19.5px 15px;
    border: 0;
    background: #fff;
    margin-bottom: 0;
    border: none;
    color: #1b1b1b;
}

.cars4 .sidebar-list .search form input::placeholder {
    color: #1b1b1b;
}

.cars4 .sidebar-list .search form button {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #1b1b1b;
    color: #f5b754;
    border: 0;
    cursor: pointer;
    border-radius: 100%;
    outline: none;
    transform: rotate(0);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.cars4 .sidebar-list:hover .search form button {
    background-color: #f5b754;
    color: #1b1b1b;
    outline: none;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

.cars4 .sidebar-list .item {
    padding: 30px;
}

.cars4 .sidebar-list .item h5 {
    color: #1b1b1b;
    font-size: 17px;
}

.cars4 .sidebar-list .item .filter-radio-group {
    margin-bottom: 30px;
}

.cars4 .sidebar-list .item .filter-radio-group:last-child {
    margin-bottom: 0px;
}

.cars4 .sidebar-list .item .filter-radio-group div {
    margin-bottom: 5px;
}

.cars4 .sidebar-list .item .filter-radio-group div:last-child {
    margin-bottom: 0;
}

.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:checked,
.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}

.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:checked+label,
.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:not(:checked)+label {
    position: relative;
    padding-left: 21px;
    cursor: pointer;
    line-height: 12px;
    display: inline-block;
    color: #1b1b1b;
}

.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:checked+label:before,
.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:not(:checked)+label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0px;
    width: 14px;
    height: 14px;
    border: 1px solid #f5b754;
    border-radius: 100%;
    background: transparent;
}

.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:checked+label:after,
.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:not(:checked)+label:after {
    content: "\e64c";
    font-family: 'themify';
    width: 14px;
    height: 14px;
    background: #f5b754;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    font-size: 8px;
    line-height: 16px;
    text-align: center;
    color: #1b1b1b;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:not(:checked)+label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

.cars4 .sidebar-list .item .filter-radio-group [type="radio"]:checked+label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

/*  car listing */
.cars4 .car-list {
    position: relative;
}

.cars4 .car-list .item {}

.cars4 .car-list .item figure {
    margin: 0;
    position: relative;
    width: 100%;
    margin-left: auto;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    isolation: isolate;
}

.cars4 .car-list .item figure img {
    -webkit-transition: all .5s;
    transition: all .5s;
}

.cars4 .car-list .item:hover figure img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-filter: brightness(70%);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.cars4 .car-list .item h3 {
    font-size: 21px;
    margin-bottom: 10px;
    color: #1b1b1b;
}

.cars4 .car-list .item p {
    margin-bottom: 15px;
    color: #1b1b1b;
}

.cars4 .car-list .item .content {
    width: 100%;
    padding: 30px;
    background: #f2f2f2;
    border-radius: 0 0 20px 20px;
}

.cars4 .car-list .item .content .cont {
    vertical-align: middle;
}

.cars4 .car-list .item .content .cont .features {
    padding: 5px 0;
    display: grid;
    grid-template-columns: 50% 50%;
}

.cars4 .car-list .item .content .cont .features span {
    color: #555;
}

.cars4 .car-list .item .content .cont .features span i {
    color: #f5b754;
    margin-right: 10px;
    font-size: 14px;
}

.cars4 .car-list .item .content .cont .features p {
    margin-bottom: 0px;
    color: #555;
    text-align: right;
}

.cars4 .car-list .item .content .cont .book {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    align-items: center;
}

.cars4 .car-list .item .content .cont .book>div {
    display: table-cell;
    vertical-align: middle;
    padding-right: 15px
}

.cars4 .car-list .item .content .cont .book>div:nth-child(2) {
    padding-left: 15px;
    padding-right: 0;
    font-size: 15px;
    line-height: 1.2em;
}

.cars4 .car-list .item .content .cont .book>div>span {
    display: block;
    margin-bottom: 0;
    font-size: 14px;
}

.cars4 .car-list .item .content .cont .book .price {
    font-size: 21px;
    line-height: 1.2em;
    color: #f5b754;
    font-weight: 700;
}

.cars4 .car-list .item .content .cont .book .price span {
    font-size: 14px;
    font-weight: 300;
    color: #555;
    margin-bottom: 0;
}


/* ======= Car Details style ======= */
.car-details {
    position: relative;
}

.car-details h3 {
    color: #1b1b1b;
    font-size: 21px;
}

.car-details .sidebar-car {
    position: relative;
    display: block;
    padding: 0;
    background: #f2f2f2;
    border-radius: 20px;
    margin-top: -225px;
    z-index: 9;
}

.car-details .sidebar-car .title {
    position: relative;
    background-color: #f5b754;
    padding: 35px 30px 25px 30px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.car-details .sidebar-car .title h4 {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    line-height: 1.2em;
    color: #1b1b1b;
    font-weight: 700;
    margin: 0;
}

.car-details .sidebar-car .title h4>span {
    font-family: 'Outfit', sans-serif;
    margin-bottom: 0;
    font-size: 14px;
    color: #1b1b1b;
    font-weight: 300;
}

.car-details .sidebar-car .item {
    padding: 30px;
}

.car-details .sidebar-car .item .features {
    padding: 15px 0;
    display: grid;
    grid-template-columns: 50% 50%;
}

.car-details .sidebar-car .item .features span {
    color: #555;
}

.car-details .sidebar-car .item .features span i {
    color: #f5b754;
    margin-right: 10px;
    font-size: 14px;
    background: #333;
    padding: 10px;
    border-radius: 100%;
}

.car-details .sidebar-car .item .features p {
    margin-bottom: 0px;
    color: #555;
    text-align: right;
}

/* double button */
.btn-double {
    position: relative;
    text-align: center;
    margin: 10px 0;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
}

.btn-double:before {
    content: attr(data-grouptype);
    color: #fff;
    font-weight: 300;
    display: block;
    font-size: 12px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background: #333;
    position: absolute;
    left: 50%;
    top: 15px;
    margin-left: -28px;
    line-height: 28px;
    text-align: center
}

.btn-double>a+a {
    margin-left: 0px;
}

.btn-double>a {
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    transition: color .3s ease;
}

.btn-double>a span {
    font-size: 17px;
    margin-right: 2px;
}

.btn-double>a:nth-of-type(1) {
    background: #f5b754;
    color: #1b1b1b;
    border-radius: 30px 0 0 30px;
    padding: 15px 27px;
}

.btn-double>a:nth-of-type(1):hover {
    background: #1b1b1b;
    color: #fff;
}

.btn-double>a:nth-of-type(2) {
    background: #f5b754;
    color: #1b1b1b;
    border-radius: 0 30px 30px 0;
    padding: 15px 27px;
}

.btn-double>a:nth-of-type(2):hover {
    background: #1b1b1b;
    color: #fff;
}


/* ======= Car Types 1 style ======= */
.car-types1 {
    position: relative;
}

.car-types1 .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
}

.car-types1 .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.car-types1 .item:hover img {
    transform: scale(1.05);
}

.car-types1 .item .title {
    position: absolute;
    top: 0px;
    padding: 30px;
}

.car-types1 .item .title h4 {
    color: #fff;
    font-size: 21px;
}

.car-types1 .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 0 40px 0 0;
}

.car-types1 .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.car-types1 .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.car-types1 .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.car-types1 .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.car-types1 .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.car-types1 .item .curv-butn .icon {
    width: 60px;
    height: 60px;
    font-size: 14px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    background: #f5b754;
    border-radius: 100%;
    line-height: 60px;
}

.car-types1 .item:hover .curv-butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}


/* ======= Car Types 2 Style ======= */
.car-types2 {
    position: relative;
}

.car-types2 .container {
    position: relative;
}

.car-types2 .item {
    background: #f2f2f2;
    padding: 40px 15px;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    line-height: 1;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
}

.car-types2 .item span {
    font-size: 75px;
    color: #f5b754;
    line-height: 0.5em;
    margin-bottom: 0px;
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
}

.car-types2 .item h6 {
    font-size: 14px;
    font-weight: 300;
    color: #1b1b1b;
    margin-bottom: 0;
}

.car-types2 .item .bg-icon {
    position: absolute;
    opacity: 0.02;
    z-index: -1;
    bottom: -75px;
    left: 75px;
}

.car-types2 .item .bg-icon span {
    font-size: 240px;
    color: #000;
}

.car-types2 .item:hover {
    background-color: #f5b754;
    -webkit-transition: .5s;
    transition: .5s;
    overflow: hidden;
}

.car-types2 .item:hover span,
.car-types2 .item:hover h6 {
    color: #1b1b1b;
    -webkit-transition: .5s;
    transition: .5s;

}

.car-types2 .item:hover .bg-icon {
    opacity: 0.1;
    color: #1b1b1b;
    -webkit-transition: .5s;
    transition: .5s;
}

.mt--80 {
    margin-top: -80px;
}


/* ======= Car Types 3 style ======= */
.car-types3 {
    position: relative;
}

.car-types3 .item {
    position: relative;
    padding: 45px 40px 0 40px;
    border-radius: 20px 20px 20px 0;
    background: #f2f2f2;
    z-index: 2;
    margin-bottom: 15px;
}

.car-types3 .item .text h5 {
    border-radius: 20px;
    color: #1b1b1b;
    font-size: 21px;
}

.car-types3 .item .text p {
    font-family: "Outfit", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    margin-bottom: 25px;
}

.car-types3 .item .icon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: -40px;
}

.car-types3 .item .icon .icon-w {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f5b754;
    font-family: "Outfit", sans-serif;
    color: #1b1b1b;
    text-align: center;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.car-types3 .item:hover .icon .icon-w {
    background: #1b1b1b;
    color: #fff;
    transition: background-color 300ms ease, transform 300ms ease, color 300ms ease;
}

.car-types3 .item .icon .icon-w i {
    overflow: hidden;
    background-color: transparent;
    font-style: normal;
    color: #1b1b1b;
    font-weight: normal;
    font-size: 50px;
}

.car-types3 .item:hover .icon .icon-w i {
    background: transparent;
    color: #1b1b1b;
    transition: background-color 300ms ease, transform 300ms ease, color 300ms ease;
}

.car-types3 .item:hover .icon .icon-w i.icon-show,
.car-types3 .item .icon .icon-w i.icon-hidden {
    display: none;
}

.car-types3 .item:hover .icon .icon-w i.icon-hidden {
    display: inline;
    width: 70px;
    height: 70px;
    line-height: 75px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
}

.car-types3 .item .icon .icon-curv {
    position: relative;
    padding: 15px;
    border-radius: 0 45px 0 0;
    background: #fff;
    height: 100px;
    width: 100px;

}

.car-types3 .item .icon .icon-curv .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.car-types3 .item .icon .icon-curv .shap-left-top {
    position: absolute;
    top: -23px;
    left: -4px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.car-types3 .item .icon .icon-curv .shap-left-top svg {
    width: 24px;
    height: 20px;
}

.car-types3 .item .icon .icon-curv .shap-right-bottom {
    position: absolute;
    bottom: -3px;
    right: -22px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.car-types3 .item .icon .icon-curv .shap-right-bottom svg {
    width: 24px;
    height: 24px;
}


/* ======= Car Types 4 style ======= */
.car-types4 {
    position: relative;
}

.car-types4 .item {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.car-types4 .item .img {
    -webkit-transition: all .5s;
    transition: all .5s;
    overflow: hidden;
    border-radius: 20px 20px 20px 0;
    isolation: isolate;
}

.car-types4 .item .img:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.car-types4 .item .img img {
    -webkit-transition: all .5s;
    transition: all .5s;
}

.car-types4 .item .info {
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: unset;
    text-align: center;
    transform: translate(-50%, -50%);
    width: 100%;
}

.car-types4 .item .info .title {
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 0;
    color: #fff;
    transform: scale(2);
    opacity: 0;
    transition: .5s;
}

.car-types4 .item .info .subtitle {
    font-weight: 300;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 6px;
    color: #f5b754;
    transform: scale(1.2);
    opacity: 0;
    transition: .4s;
}

.car-types4 .item:hover .info .title {
    opacity: .9;
    transform: scale(1);
}

.car-types4 .item:hover .info .subtitle {
    opacity: .8;
    transform: scale(1);
}

.car-types4 .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 0 40px 0 0;
}

.car-types4 .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.car-types4 .item .curv-butn .icon i {
    font-size: 14px;
    font-weight: 300;
    font-style: normal;
}

.car-types4 .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.car-types4 .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.car-types4 .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.car-types4 .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.car-types4 .item .curv-butn .icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    background: #f5b754;
    border-radius: 100%;
}

.car-types4 .item:hover .curv-butn .icon {
    background: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}


/* ======= Services Box style ======= */
.services-box {
    position: relative;
}

.services-box .container {
    position: relative;
    z-index: 2;
}

.services-box .item {
    background: #f2f2f2;
    padding: 40px;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    line-height: 1;
    text-align: left;
    overflow: hidden;
    transition: background-color 300ms ease, transform 300ms ease, color 300ms ease;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    border-radius: 20px;
}

.services-box .item.active {
    background: #f5b754;
}

.services-box .item:hover {
    background: #f5b754;
    transform: translate3d(0px, -15px, 0.01px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.services-box .item h5 {
    font-size: 21px;
    color: #1b1b1b;
}

.services-box .item.active h5 {
    color: #1b1b1b
}

.services-box .item:hover h5 {
    color: #1b1b1b;
    -webkit-transition: .5s;
    transition: .5s;
}

.services-box .item p {
    color: #555;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
}

.services-box .item.active p {
    color: #1b1b1b;
}

.services-box .item:hover p {
    color: #1b1b1b;
}

.services-box .item span {
    font-size: 21px;
    color: #f5b754;
    line-height: 1;
    margin-bottom: 15px;
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
    width: 70px;
    height: 70px;
    line-height: 70px;
    background: #333;
    border-radius: 100%;
    text-align: center;
}

.services-box .item.active span {
    color: #f5b754;
    background: #1b1b1b;
}

.services-box .item:hover span {
    color: #fff;
    background: #1b1b1b;
}

.services-box .item i {
    font-size: 17px;
    font-weight: 700;
    color: #f5b754;
    line-height: 1;
    margin-bottom: 15px;
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
    width: 70px;
    height: 70px;
    line-height: 70px;
    background: #333;
    border-radius: 100%;
    text-align: center;
    font-style: normal;
}

.services-box .item.active i {
    color: #f5b754;
    background: #1b1b1b;
}

.services-box .item:hover i {
    color: #fff;
    background: #1b1b1b;
}

.services-box .item .numb {
    font-size: 120px;
    position: absolute;
    bottom: -25px;
    right: -10px;
    color: rgba(0, 0, 0, 0.3);
    opacity: .2;
}

.services-box .item.active .numb {
    color: rgba(255, 255, 255, 0.5);
}

.services-box .item:hover .numb {
    color: rgba(255, 255, 255, 0.5);
}


/* ======= Services 1 style ======= */
.services1 {
    position: relative;
    overflow: hidden;
}

.services1 .item {
    position: relative;
    padding: 50px 40px 0 40px;
    border-radius: 20px 20px 20px 0;
    background: #f2f2f2;
    z-index: 2;
    margin-bottom: 15px;
}

.services1 .item .text h5 {
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 21px;
}

.services1 .item .text p {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.95em;
    color: #555;
    margin-bottom: 20px;
}

.services1 .item .numb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: -40px;
}

.services1 .item .numb .number {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #222;
    font-family: 'Outfit', sans-serif;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
}

.services1 .item:hover .numb .number {
    background: #f5b754;
    color: #1b1b1b;
    transition: background-color 300ms ease, transform 300ms ease, color 300ms ease;
}

.services1 .item .numb .numb-curv {
    position: relative;
    padding: 15px;
    border-radius: 0 40px 0 0;
    background: #fff;
    height: 90px;
    width: 90px;
}

.services1 .item .numb .numb-curv .shap-left-top {
    position: absolute;
    top: -23px;
    left: -4px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.services1 .item .numb .numb-curv .shap-left-top svg {
    width: 24px;
    height: 20px;
}

.services1 .item .numb .numb-curv .shap-right-bottom {
    position: absolute;
    bottom: -2px;
    right: -22px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.services1 .item .numb .numb-curv .shap-right-bottom svg {
    width: 24px;
    height: 24px;
}

.services1 p span {
    background-color: #333;
    color: #fff;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    align-items: middle;
    margin-right: 10px;
    font-size: 10px;
}


/* ======= Services 2 style ======= */
.services2 {
    position: relative;
}

.services2 .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
}

.services2 .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.services2 .item:hover img {
    transform: scale(1.05);
}

.services2 .item .title {
    position: absolute;
    bottom: 0px;
    padding: 30px 15px 30px 110px;
    width: 100%;
    text-align: right;
}

.services2 .item .title h4 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 0;
    text-align: left;
}

.services2 .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 0 40px 0 0;
}

.services2 .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

/* show and hidden class */
.services2 .item .curv-butn .icon {
    font-size: 15px;
    font-weight: 700;
    font-style: normal;

}

.services2 .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.services2 .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.services2 .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.services2 .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.services2 .item .curv-butn .icon {
    width: 60px;
    height: 60px;
    line-height: 60px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    background: #f5b754;
    border-radius: 100%;
}

.services2 .item:hover .curv-butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}


/* ======= Service Details style ======= */
.service-details {
    position: relative;
}

.service-details h3 {
    color: #1b1b1b;
    font-size: 21px;
}

.service-details .sidebar-page {
    position: relative;
    display: block;
    padding: 0;
    background: #f2f2f2;
    border-radius: 20px;
    margin-top: -215.5px;
    z-index: 9;
}

.service-details .sidebar-page .title {
    position: relative;
    background-color: #f5b754;
    padding: 35px 30px;
    border-radius: 20px 20px 0 0;
    text-align: center;
}

.service-details .sidebar-page .title h4 {
    font-size: 21px;
    line-height: 1.2em;
    color: #1b1b1b;
    margin: 0;
}

.service-details .sidebar-page .title h4>span {
    margin-bottom: 0;
    font-size: 14px;
    color: #1b1b1b;
    font-weight: 400;
}

.service-details .sidebar-page .item {
    padding: 40px 30px;
}

.service-details .sidebar-page .item .features {
    grid-template-columns: 50% 50%;
    border-radius: 15px;
    padding: 15px 20px;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.service-details .sidebar-page .item .features span {
    color: #1b1b1b;
}

.service-details .sidebar-page .item .features span i {
    color: #f5b754;
    margin-right: 15px;
    font-size: 11px;
}

.service-details .sidebar-page .item .features p {
    margin-bottom: 0px;
    color: #fff;
    text-align: right;
}

.service-details .sidebar-page .item .features:hover span i,
.service-details .sidebar-page .item .features.active span i {
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.service-details .sidebar-page .item .features:hover,
.service-details .sidebar-page .item .features.active {
    background: #f5b754;
    color: #1b1b1b;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    border-radius: 15px;
}

.service-details .sidebar-page .item .features:hover span i,
.service-details .sidebar-page .item .features.active span i {
    color: #1b1b1b;
}

.service-details .sidebar-page .item .features:hover span,
.service-details .sidebar-page .item .features.active span {
    color: #1b1b1b;
}


/* ======= Process style ======= */
.process {
    position: relative;
    overflow: hidden;
}

.process .item {
    position: relative;
    padding: 60px 40px 0 40px;
    border-radius: 20px 20px 20px 0;
    background: #f2f2f2;
    z-index: 2
}

.process .item .text h5 {
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 21px;
}

.process .item .text p {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.95em;
    color: #555;
    margin-bottom: 20px;
}

.process .item .numb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: -40px;
}

.process .item .numb .number {
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background-color: #f2f2f2;
    font-family: 'Outfit', sans-serif;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 14px;
    text-align: center;
    border: 1px solid #f2f2f2;
}

.process .item .numb .numb-curv {
    position: relative;
    padding: 15px;
    border-radius: 0 40px 0 0;
    background: #fff;
}

.process .item .numb .numb-curv .shap-left-top {
    position: absolute;
    top: -23px;
    left: -4px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.process .item .numb .numb-curv .shap-left-top svg {
    width: 24px;
    height: 20px;
}

.process .item .numb .numb-curv .shap-right-bottom {
    position: absolute;
    bottom: -2px;
    right: -22px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.process .item .numb .numb-curv .shap-right-bottom svg {
    width: 24px;
    height: 24px;
}

.process p span {
    background-color: #f5b754;
    color: #1b1b1b;
    border-radius: 100%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    align-items: middle;
    margin-right: 10px;
    font-size: 10px;
}


/* ======= Process Number style  ======= */
.process-number {
    position: relative;
}

.process-number .item {
    position: relative;
    background-color: #f5b754;
    padding: 60px 0 60px 30px;
    border-radius: 20px;
    border: none;
    width: 100%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    overflow: hidden;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -ms-transition: all .25s ease-in-out;
    -o-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
    z-index: 1;
}

.process-number .item:hover {
    background-color: #f2f2f2;
    transform: translateY(-20px);
}

.process-number .item .con {
    position: relative;
    padding-right: 60px;
}

.process-number .item .con .no {
    position: absolute;
    font-size: 240px;
    font-weight: 900;
    color: #1b1b1b;
    text-align: right;
    top: -40px;
    width: 100%;
    line-height: 1;
    right: -20px;
}

.process-number .item .con h5 {
    font-size: 21px;
    color: #1b1b1b;
}

.process-number .item .con p {
    color: #222;
    margin-bottom: 0px;
}

.process-number .item:hover .con .no {
    color: rgba(0, 0, 0, 0.1);
    opacity: .5;
}

.process-number .item:hover .con h5 {
    color: #1b1b1b;
}

.process-number .item:hover .con p {
    color: #222;
}


/* ======= Testimonials style ======= */
.testimonials {
    position: relative;
    overflow: hidden;
}

.testimonials .item {
    position: relative;
    padding: 40px 40px 0px;
    border-radius: 20px 20px 20px 0;
    background: #f2f2f2;
}

.testimonials .item .stars {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 20px 10px 20px;
    border-radius: 0 0 0 20px;
    color: #f5b754;
    background: #fff;
}

.testimonials .item .stars i {
    font-size: 10px;
}

.testimonials .item .stars .shap-left-top {
    position: absolute;
    top: -2px;
    left: -20px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.testimonials .item .stars .shap-left-top svg {
    width: 24px;
    height: 24px;
}

.testimonials .item .stars .shap-right-bottom {
    position: absolute;
    bottom: -25px;
    right: -2px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.testimonials .item .stars .shap-right-bottom svg {
    width: 24px;
    height: 24px;
}

.testimonials .item i.fa-quote-left {
    color: #f5b754;
    font-size: 45px;
    margin-bottom: 10px;
}

.testimonials .item .text h5 {
    border-radius: 20px;
    font-family: 'Outfit', sans-serif;
    color: #f5b754;
    font-weight: 700;
    font-size: 14px;
}

.testimonials .item .text p {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.95em;
    color: #555;
    margin-bottom: 15px;
}

.testimonials .item .info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: -40px;
}

.testimonials .item .info .img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.testimonials .item .info .img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.testimonials .item .info h6 {
    font-family: 'Outfit', sans-serif;
    color: #1b1b1b;
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 0;
}

.testimonials .item .info p {
    font-family: 'Outfit', sans-serif;
    font-size: 12px;
    font-weight: 300;
    line-height: 1.5em;
    color: #555;
    margin-bottom: 0;
}

.testimonials .item .img-curv {
    position: relative;
    padding: 15px;
    border-radius: 0 40px 0 0;
    background: #fff;
}

.testimonials .item .img-curv .shap-left-top {
    position: absolute;
    top: -23px;
    left: -4px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.testimonials .item .img-curv .shap-left-top svg {
    width: 24px;
    height: 20px;
}

.testimonials .item .img-curv .shap-right-bottom {
    position: absolute;
    bottom: -2px;
    right: -22px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.testimonials .item .img-curv .shap-right-bottom svg {
    width: 24px;
    height: 24px;
}


/* =======  Gallery Image style  ======= */
.gallery-filter {
    width: 100%;
    padding-bottom: 30px;
    padding-left: 0px;
    position: relative;
}

.gallery-filter li {
    font-family: 'Outfit', sans-serif;
    font-size: 17px;
    font-weight: 700;
    margin-right: 15px;
    display: inline-block;
    cursor: pointer;
    color: #1b1b1b;
}

.gallery-filter li:last-child {
    margin-right: 0;
}

.gallery-filter li.active {
    color: #f5b754;
    content: "";
    left: 0;
    bottom: -4px;
    border-bottom: 1px solid #f5b754;
    -webkit-transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
    -o-transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}

.gallery-filter li:hover {
    color: #f5b754;
}

.gallery-item-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    -webkit-background-size: cover;
    background-size: cover;
    -webkit-clip-path: inset(0 0 0 0);
    clip-path: inset(0 0 0 0);
    -webkit-transition: all 1.25s cubic-bezier(.01, .71, .26, .94);
    -moz-transition: all 1.25s cubic-bezier(.01, .71, .26, .94);
    transition: all 1.25s cubic-bezier(.01, .71, .26, .94);
    border-radius: 7px;
}

.gallery-box {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    /* align-items: center; */
    cursor: pointer;
    /* text-align: center; */
    border-radius: 20px;
    isolation: isolate;
}

.gallery-box .gallery-img {
    position: relative;
    overflow: hidden;
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
}

.gallery-box .gallery-img:after {
    content: " ";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.27s cubic-bezier(0.3, 0.1, 0.58, 1);
    overflow: hidden;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.gallery-box .gallery-img>img {
    transition: all 0.3s cubic-bezier(0.3, 0.1, 0.58, 1);
    border-radius: 0;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.gallery-box:hover .gallery-img>img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.gallery-box .gallery-detail {
    position: absolute;
    opacity: 0;
    transform: translateX(-20px);
    transition: 700ms cubic-bezier(0.17, 0.67, 0, 1.01);
    padding: 30px 20px;
    bottom: 0;
}

.gallery-box .gallery-detail h4 {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    margin-bottom: 0;
}

.gallery-box .gallery-detail p {
    color: #f5b754;
    margin-bottom: 0;
}

.gallery-box:hover .gallery-detail {
    opacity: 1;
    transform: translateX(0px);
}

/* magnific popup custom */
.mfp-counter {
    display: none;
}

.mfp-figure button {
    border: 0px solid transparent;
}

button.mfp-close,
button.mfp-arrow {
    border: 0px solid transparent;
    background: transparent;
}

.mfp-bg,
body.mfp-zoom-out-cur {
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
}


/* ======= Video Gallery style ======= */
.vid-icon {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
}

.vid-icon:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.09, 1.09);
    transform: scale(1.09, 1.09);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.video-gallery-button {
    position: relative;
    margin: auto;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    z-index: 4;
    margin-right: 20px;
    float: left;
}

.video-gallery-polygon {
    z-index: 2;
    padding-right: 5px;
    display: inline-block;
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #f5b754;
    border-radius: 50%;
    color: #1b1b1b;
    padding: 12px 11px 12px 13px;
    line-height: 0;
    box-shadow: 0px 0px 0px 5px rgb(255 255 255 / 10%);
}

.video-gallery-polygon:hover {
    background: #1b1b1b;
    color: #f5b754;
}

.video-gallery-polygon {
    font-size: 21px;
}

.video-gallery {
    position: relative;
}

.video-gallery .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 30px;
    isolation: isolate;
}

.video-gallery .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.video-gallery .item:hover img {
    transform: scale(1.05);
}

.video-gallery .item .title {
    position: absolute;
    top: 0px;
    padding: 30px;
}

.video-gallery .item .title h4 {
    color: #fff;
    font-size: 21px;
    text-transform: uppercase;
}

.video-gallery .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    line-height: 90px;
    text-align: center;
    border-radius: 0 40px 0 0;
}

.video-gallery .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.video-gallery .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.video-gallery .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.video-gallery .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -24px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.video-gallery .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.video-gallery .item .curv-butn .icon {
    width: 60px;
    height: 60px;
    font-size: 21px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    background-color: #f5b754;
    border-radius: 100%;
    line-height: 60px;
}

.video-gallery .item:hover .curv-butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}


/* ======= Video Popup style ======= */
.play-button {
    position: relative;
    margin: auto;
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    z-index: 4;
}

.play-button svg {
    position: absolute;
    width: 100%;
    height: 100%;
}

.polygon {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 90px;
    font-size: 30px;
    z-index: 2;
}

.play-button svg.circle-fill {
    z-index: 1;
    stroke-dasharray: 322;
    stroke-dashoffset: 322;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.play-button:hover svg.circle-fill {
    stroke-dashoffset: 38.5;
}

.play-button svg.circle-track {
    z-index: 0;
}

.video-wrapper {}

.video-wrapper .vid {
    position: relative;
    z-index: 8;
}

.video-wrapper .vid .vid-butn:hover .icon {
    color: #f5b754;
}

.video-wrapper .vid .vid-butn:hover .icon:before {
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
}

.video-wrapper .vid .vid-butn .icon {
    color: #fff;
    width: 100px;
    height: 100px;
    border: none;
    border-radius: 50%;
    line-height: 105px;
    text-align: center;
    font-size: 35px;
    position: relative;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}

.video-wrapper .vid .vid-butn .icon:after {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    border: 1px solid #f5b754;
    border-radius: 50%;
    z-index: -1;
}

.video-wrapper .vid .vid-butn .icon:before {
    content: '';
    position: absolute;
    top: 5px;
    bottom: 5px;
    right: 5px;
    left: 5px;
    background: transparent;
    border-radius: 50%;
    z-index: -1;
    -webkit-transition: all 0.5s cubic-bezier(1, 0, 0, 1);
    -o-transition: all 0.5s cubic-bezier(1, 0, 0, 1);
    transition: all 0.5s cubic-bezier(1, 0, 0, 1);
}


/* ======= Accordion Box (for Faqs) style ======= */
.accordion-box {
    position: relative;
    padding: 0px;
}

.accordion-box .block {
    position: relative;
    background: #f2f2f2;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 20px;
}

.accordion-box .block.active-block {}

.accordion-box .block:last-child {
    margin-bottom: 0;
}

.accordion-box .block .acc-btn {
    position: relative;
    font-size: 14px;
    line-height: 14px;
    font-weight: 700;
    cursor: pointer;
    padding: 30px;
    padding-right: 60px;
    color: #1b1b1b;
    transition: all 500ms ease;
    font-family: 'Outfit', sans-serif;
}

.accordion-box .block .acc-btn .count {
    color: #f5b754;
    padding-right: 5px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
}

.accordion-box .block .acc-btn.active .count {
    color: #1b1b1b;
}

.accordion-box .block .acc-btn:before {
    position: absolute;
    right: 35px;
    top: 24px;
    height: 30px;
    font-size: 11px;
    color: #f5b754;
    line-height: 30px;
    content: "\e649";
    font-family: "themify";
    transition: all 500ms ease;
}

.accordion-box .block .acc-btn.active {
    background-color: #f5b754;
    color: #1b1b1b;
}

.accordion-box .block .acc-btn.active:before {
    color: #1b1b1b;
    font-family: "themify";
    content: "\e64b";
}

.accordion-box .block .acc-content {
    position: relative;
    display: none;
}

.accordion-box .block .content {
    position: relative;
    padding: 30px;
    color: #1b1b1b;
    border-radius: 0px 0px 20px 20px;
}

.accordion-box .block .acc-content.current {
    display: block;
}

.accordion-box .block .content .text {
    display: block;
    position: relative;
    top: 0px;
    color: #555;
}

/* Services page FAQ — 2 independent columns instead of one single column.
   Deliberately flex (two separate stacked lists), not a CSS grid: a grid
   keeps both columns' ROWS the same height, so expanding one item was
   stretching its row-mate's box down to match — even "align-items: start"
   only stopped the row-mate's own box from stretching, the row itself (and
   the gap before the next one) was still as tall as the open item. Two
   independent flex columns don't share rows at all, so opening an item in
   one column can never move anything in the other. */
.faq-columns {
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.faq-column {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 767px) {
    .faq-columns {
        flex-direction: column;
    }
}

/* Blog listing (templates/core/blog.html). */
.blog-listing-title {
    margin-bottom: 15px;
    font-size: 42px;
    color: #1b1b1b;
}

.blog-listing-desc {
    max-width: 700px;
    margin-bottom: 40px;
    color: #555;
}

.blog-listing-count {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ececec;
    font-size: 20px;
    color: #1b1b1b;
}

/* Same card "shell" as the Cars page (.cars-grid .item in
   custom-overrides.css) — white box, border, permanent soft shadow that
   deepens on hover. No overflow:hidden on the card itself (it would clip
   that hover shadow); corners are rounded by .blog-card-img/-body instead,
   same trick as .cars-grid .item .img/.con. */
/* Bootstrap's ".row" is a flex container with the default "align-items:
   stretch", so every ".col-*" in a row already matches the tallest
   sibling's height — this just needs to fill that height instead of only
   its own content's, so every card in a row ends up the same size
   regardless of how much text each post has. */
.blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(27, 27, 27, .14);
    transition: transform .22s ease, box-shadow .22s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(27, 27, 27, .22);
}

/* "aspect-ratio" instead of a fixed pixel height — a fixed height crops
   more aggressively the narrower the card gets (mobile's single-column
   card is much narrower than a desktop 4-per-row one, but was still forced
   into the same 240px height, so "object-fit: cover" had to zoom in much
   further to fill it). A ratio scales with the card's own width instead,
   so the crop looks the same at any screen size. */
.blog-card-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 18px 20px 20px;
    border-radius: 0 0 16px 16px;
}

/* Same small tinted-pill shape as the Cars page's ".car-cat" type badge
   (custom-overrides.css) — just one fixed colour, since blog categories
   are free-text (admin-entered), not a fixed set like car types. */
.blog-card-category {
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 14px;
    padding: 2px 8px;
    background: #faecd2;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .5px;
    line-height: 1.5;
    text-transform: uppercase;
    color: #c9922e;
}

/* "min-height: 2 lines" so a short title still reserves the same space a
   2-line one would — without it a 1-line title would leave every card in
   the row a different height instead of lining up. */
.blog-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.8em;
    margin-bottom: 12px;
    color: #1b1b1b;
    line-height: 1.4em;
    transition: color .2s ease;
}

/* Same gold accent the rest of the template uses on hover (buttons, category
   pill, icons — #f5b754). */
.blog-card:hover .blog-card-title {
    color: #f5b754;
}

.blog-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3.4em;
    margin-bottom: 18px;
    color: #555;
    font-size: 14px;
    line-height: 1.7em;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #ececec;
    font-size: 13px;
    color: #8b8b8b;
}

.blog-card-meta i {
    margin-right: 6px;
    color: #f5b754;
}

/* Blog post detail (templates/core/single.html). */
.blog-post-title {
    margin: 18px 0;
    font-size: 36px;
    color: #1b1b1b;
}

.blog-post-meta {
    justify-content: flex-start;
    gap: 25px;
    padding-top: 0;
    border-top: none;
    margin-bottom: 35px;
}

.blog-post-img {
    display: block;
    width: 100%;
    height: 700px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 10px 26px rgba(27, 27, 27, .14);
}

@media (max-width: 767px) {
    .blog-post-img {
        height: 260px;
    }
}

/* Blog post page: the FAQ heading's gap from the post body above it. Its
   own class (not the shared "mt-60" utility) so only this page changes. */
.blog-faq-head {
    margin-top: 10px;
}

.blog-faq-title {
    margin-bottom: 8px;
    font-size: 32px;
    font-weight: 700;
    color: #1b1b1b;
}

.blog-faq-subtitle {
    color: #777;
    font-size: 16px;
}


/* ======= Price style  ======= */
.price .item {
    padding: 60px 45px;
    border-radius: 20px;
    background: #f2f2f2;
    position: relative;
    overflow: hidden;
}

.price .item h3 {
    font-family: 'Outfit', sans-serif;
    color: #1b1b1b;
    font-weight: 700;
    font-size: 24px;
    line-height: 1.25em;
}

.price .item h3 span {
    font-weight: 300;
    font-size: 10px;
    display: block;
    color: #f5b754;
    text-transform: uppercase;
    letter-spacing: 3px;
}

.price .item p {
    font-size: 14px;
    font-weight: 300;
    color: #555;
    margin-bottom: 0;
}

.price .item ul {
    margin: 0;
    padding-left: 15px;
}

.price .item li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.price .item li:after {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: calc(50% - 5px);
}

.price .item .dot-list li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 10px;
}

.price .item .dot-list li:before {
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    background: #f5b754;
}

.price .item .dot-list li:last-of-type {
    margin-bottom: 0;
}

/* arrow */
.price .item .rmore {
    position: absolute;
    top: -15px;
    right: -15px;
    background: #fff;
    padding: 15px;
    border-radius: 0 0 0 45px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    opacity: 0;
}

.price .item .rmore .arrow {
    width: 70px;
    height: 70px;
    line-height: 70px;
    border: 1px solid #f5b754;
    background: #f5b754;
    border-radius: 50%;
    text-align: center;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    font-size: 21px;
    color: #1b1b1b;
    font-weight: 700;
    display: inline-flex;
    justify-content: center;
}

.price .item .rmore .arrow span {
    color: #1b1b1b;
    font-size: 14px;
    display: inline-block;
    font-weight: 500;
    align-self: flex-start;
    margin-right: 2px;
}

/* arrow hover */
.price .item:hover .rmore {
    opacity: 1;
    top: 0px;
    right: 0px;
}

.price .item .rmore:hover .arrow {
    border: 1px solid #1b1b1b;
    background: #1b1b1b;
    color: #fff;
}

.price .item .rmore:hover .arrow span {
    color: #fff;
}

/* active */
.price .item .rmore.active {
    opacity: 1;
    top: 0px;
    right: 0px;
}

.price .item .rmore .arrow.active {
    background: #f5b754;
}

.price .item .rmore .arrow.active i {
    color: #1b1b1b;
}

/* border */
.price .item .rmore .br-left-top {
    position: absolute;
    top: 0;
    left: -20px;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    line-height: 1;
}

.price .item .rmore .br-left-top svg {
    width: 20px;
    height: 20px;
}

.price .item .rmore .br-right-bottom {
    position: absolute;
    bottom: -20px;
    right: 0;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    line-height: 1;
}

.price .item .rmore .br-right-bottom svg {
    width: 20px;
    height: 20px;
}


/* ======= Clients style ======= */
.clients {
    background: #f2f2f2;
}

.clients .owl-carousel {
    margin: 20px 0;
}

.clients .clients-logo {
    opacity: 1;
    line-height: 0;
}

.clients .clients-logo:hover {
    opacity: 1;
}

.clients img {
    -webkit-filter: none;
    filter: none;
}

.clients img:hover {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: all .5s;
    transition: all .5s;
}


/* ======= Booking style ======= */
.booking-wrapper {
    position: absolute;
    left: 0;
    width: 100%;
    bottom: 5%;
    z-index: 5;
}

.booking2-wrapper {
    position: relative;
    margin-bottom: 40px;
}

.booking-inner {
    position: relative;
    border-radius: 0;
}

.form1 {
    display: block;
    padding: 0;
    position: relative;
}

.form1.brdr {
    padding: 15px 15px 0 15px;
    background: #fff;
    border-radius: 60px;
}

.form1 label {
    display: none;
}

.form1 .col1 {
    float: left;
    width: 17%;
}

.form1 .col2 {
    float: left;
    width: 17%;
}

.form1 .col3 {
    float: left;
    width: 15%;
}

.form1 .c1 {
    border-right: 1px solid #f2f2f2;
    height: 60px;
    margin-bottom: 15px;
}

.form1 .c2 {
    border-right: 0px solid #f2f2f2;
    height: 60px;
    margin-bottom: 15px;
}

.form1 .c3 {
    border-right: 1px solid #f2f2f2;
    height: 60px;
    margin-bottom: 15px;
}

.form1 .c4 {
    border-right: 1px solid #f2f2f2;
    height: 60px;
    margin-bottom: 15px;
}

.form1 .c5 {
    border-right: 1px solid #f2f2f2;
    height: 60px;
    margin-bottom: 15px;
}

.ui-datepicker .ui-datepicker-header {
    background: #f5b754;
    border: #f5b754;
    color: #fff;
}

.ui-datepicker {
    font-size: 14px;
    color: #555;
    background: #fff;
    z-index: 9999 !important;
    border: 1px solid #f2f2f2;
    border-radius: 0px;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
    border: 1px solid #f2f2f2;
    background: transparent;
    color: #555;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
    border: 1px solid #f5b754;
    background: #f5b754;
    font-weight: normal;
    color: #1b1b1b;
}

.ui-datepicker .ui-datepicker-prev:after {
    font-size: 10px;
    content: "\e64a";
    font-family: "themify";
    color: #1b1b1b;
}

.ui-datepicker .ui-datepicker-next:before {
    font-size: 10px;
    content: "\e649";
    font-family: "themify";
    color: #1b1b1b;
    float: right;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: transparent;
    border: 1px solid transparent;
}

.booking-button {
    display: block;
    padding: 0;
    border: none;
    margin: 0;
    width: 100%;
    background: #f5b754;
    color: #1b1b1b;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    text-decoration: none;
    line-height: 60px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-out;
    font-weight: 300;
    border-radius: 30px;
}

.booking-button:hover {
    background: #1b1b1b;
    color: #fff;
}

.booking-button:focus {
    outline: none;
}

.input1_inner {
    position: relative;
    position: relative;
}

.input1_inner:after {
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    top: 24px;
    pointer-events: none;
    content: "\e6b6";
    font-family: "themify";
    font-size: 11px;
    color: #f5b754;
    line-height: 1;
    z-index: 99999;
}

.input1_inner input {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #555;
    padding: 15px 20px;
    background: #fff;
    border: none;
    box-shadow: none;
    border-radius: 30px;
    line-height: 28px;
}

.input1_inner input::placeholder {
    font-size: 14px;
    color: #555;
    !important;
}

.input1_inner input:focus {
    outline: none;
    box-shadow: none;
    background: #fff;
    color: #555;
    !important;
}

.select1_wrapper {
    margin-bottom: 0;
}

.select1_inner {
    position: relative;
}

.select1_inner:after {
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    top: 24px;
    pointer-events: none;
    content: "\e64b";
    font-family: "themify";
    font-size: 10px;
    color: #f5b754;
    font-weight: normal;
    line-height: 15px;
}

.select2 {
    width: 100%;
    background: #fff;
    margin-bottom: 15px;
    /*    border: 1px solid transparent;*/
    border-radius: 30px;
}

.input1_wrapper {
    margin-bottom: 15px;
}

.select2 *:focus {
    outline: none !important;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 500px;
}

.select2-container--default .select2-selection--single {
    background: none;
    border-radius: 0;
    border: none;
    height: auto;
}

.selection {
    display: inline-flex;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    font-size: 14px;
    line-height: 28px;
    padding: 15px 20px;
    color: #555
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.select2-dropdown {
    background: none;
    border-radius: 0;
    z-index: 99999;
    min-width: 0px;
    border: none;
}

.select2-container--open .select2-dropdown--above {
    border-bottom: 1px solid #f2f2f2;
}

.select2-container--open .select2-dropdown--below {
    border-top: 1px solid #f2f2f2;
}

.select2-results__option {
    padding: 10px 30px;
    background: #fff;
    font-size: 14px;
    line-height: 20px;
    color: #555;
    border-top: 1px solid #f2f2f2;
    text-align: center;
}

.select2-results__option:first-child {
    border-top: none;
}

.small .select2-results__option {
    padding-left: 0;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background: #f5b754;
    color: #1b1b1b;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #f5b754;
    color: #1b1b1b;
}

/* responsive */
@media (max-width: 1259.98px) {
    .booking2-wrapper {
        margin-bottom: 30px;
    }
}

@media (max-width: 991.98px) {
    .booking2-wrapper {
        margin-bottom: 40px;
    }

    .form1 .col1 {
        width: 50%;
        border-bottom: 1px solid #222;
    }

    .form1 .c2 {
        border-right: none;
    }

    .form1 .col2 {
        width: 25%;
    }

    .form1 .col3 {
        width: 25%;
    }

    .booking-wrapper {
        position: relative;
        bottom: auto;
        padding: 30px 0;
    }
}

@media (max-width: 767.98px) {
    .form1 .col1 {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #f2f2f2;
    }

    .form1 .col2 {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #f2f2f2;
    }

    .form1 .col3 {
        width: 100%;
        border-right: 0;
    }

    .booking-button:after {
        background: none;
    }
}

/* booking form */
.booking-box {
    position: relative;
    background: #f2f2f2;
    padding: 60px 40px;
    margin-bottom: -60px;
    border-radius: 20px;
}

.booking-box .head-box h6 {
    font-size: 10px;
    font-weight: 700;
    color: #f5b754;
    position: relative;
    letter-spacing: 3px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.booking-box .head-box h4 {
    font-size: 35px;
    margin-bottom: 30px;
    color: #fff;
    line-height: 1em;
    font-weight: 700;
}

.booking-box .head-box h4 span {
    color: #222;
}

@media screen and (max-width: 991px) {
    .booking-box {
        margin-bottom: 90px;
        margin-bottom: 0px;
        padding: 35px 20px;
    }
}



/* ======= Blog 1 style ======= */
.blog1 {
    position: relative;
    overflow: hidden;
}

.blog1 .item {
    margin-bottom: 15px;
}

.blog1 .item .img {
    overflow: hidden;
    border-radius: 20px;
    isolation: isolate;
}

.blog1 .item .img img {
    width: 100%;
    border-radius: 3px 3px 0 0;
    -webkit-transition: all 1s;
    transition: all 1s;
}

.blog1 .item:hover .img img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog1 .item .wrapper {
    background-color: #f2f2f2;
    padding: 0.1px 30px 40px 30px;
    margin: -45px 20px 0 20px;
    position: relative;
    z-index: 1;
    border-radius: 20px;
    transition: all ease 0.4s;
}

.blog1 .item .wrapper .date {
    margin: -20px 0 20px 0;
}

.blog1 .item .wrapper .date a {
    display: inline-block;
    font-size: 12px;
    padding: 14px 21px;
    line-height: 1;
    background-color: #f5b754;
    color: #1b1b1b;
    border-radius: 7px;
}

.blog1 .item .wrapper .date a:hover {
    background-color: #1b1b1b;
    color: #fff;
}

.blog1 .item .wrapper .con {
    overflow: hidden;
    position: relative;
    transition: all ease 0.4s;
    padding-bottom: 0;
}

.blog1 .item .wrapper .con .category {
    margin: 0 0 15px 0;
}

.blog1 .item .wrapper .con .category a {
    color: #555;
    display: inline-block;
    font-size: 12px;
    margin-right: 12px;
}

.blog1 .item .wrapper .con .category a i {
    transition: all ease 0.4s;
    color: #f5b754;
    margin-right: 5px;
    font-size: 12px;
}

.blog1 .item .wrapper .con .text {
    font-family: 'Outfit', sans-serif;
    font-size: 21px;
    color: #1b1b1b;
    font-weight: 700;
    margin: 0;
    line-height: 1.5em;
}

.blog1 .item .wrapper .con .icon-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translateX(60px);
    opacity: 0;
    visibility: hidden;
    display: inline-block;
    padding: 0;
    width: 55px;
    height: 55px;
    line-height: 58px;
    font-size: 14px;
    background-color: #f5b754;
    border: 1px solid #f5b754;
    color: #1b1b1b;
    text-align: center;
    border-radius: 50%;
    transition: all ease 0.4s;
}

.blog1 .item .wrapper .con .icon-btn:hover {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
}

.blog1 .item:hover .wrapper {
    margin-top: -104px;
    background-color: #f2f2f2;
    border-color: transparent;
}

.blog1 .item:hover .wrapper .con {
    padding-bottom: 70px;
}

.blog1 .item:hover .wrapper .con .category a {
    color: #555;
}

.blog1 .item:hover .wrapper .con .category a i {
    color: #f5b754;
}

.blog1 .item:hover .wrapper .con .category a:hover {
    color: #f5b754;
}

.blog1 .item:hover .wrapper .con .text a {
    color: #1b1b1b;
}

.blog1 .item:hover .wrapper .con .text a:hover {
    color: #1b1b1b;
}

.blog1 .item:hover .wrapper .con .icon-btn {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}


/* ======= Blog 2 style ======= */
.blog2 {
    position: relative;
}

.blog2 .item {
    position: relative;
    border-radius: 20px 20px 20px 0;
    overflow: hidden;
    margin-bottom: 15px;
    isolation: isolate;
}

.blog2 .item img {
    width: 100%;
    transform: scale(1);
    transition: transform 500ms ease;
}

.blog2 .item:hover img {
    transform: scale(1.05);
}

.blog2 .item .title {
    position: absolute;
    bottom: 0px;
    padding: 0 20px 25px 110px;
    width: 100%;
    text-align: right;
}

.blog2 .item .title h6 {
    color: #f5b754;
    font-size: 10px;
    line-height: 10px;
    font-weight: 300;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.blog2 .item .title h4 {
    color: #fff;
    font-size: 21px;
    margin-bottom: 0;
}

.blog2 .item .curv-butn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    border-radius: 0 45px 0 0;
}

.blog2 .item .curv-butn .vid {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 100%;
    background: transparent;
    color: #fff;
}

.blog2 .item .curv-butn .br-left-top {
    position: absolute;
    top: -24px;
    left: -1px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.blog2 .item .curv-butn .br-left-top svg {
    width: 24px;
    height: 24px;
}

.blog2 .item .curv-butn .br-right-bottom {
    position: absolute;
    bottom: -1px;
    right: -23px;
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
    line-height: 1;
}

.blog2 .item .curv-butn .br-right-bottom svg {
    width: 24px;
    height: 24px;
}

.blog2 .item .curv-butn .icon {
    width: 70px;
    height: 70px;
    line-height: 70px;
    font-size: 14px;
    color: #1b1b1b;
    border: 1px solid #f5b754;
    border-radius: 100%;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    background: #f5b754;
}

.blog2 .item:hover .curv-butn .icon {
    background-color: #1b1b1b;
    border: 1px solid #1b1b1b;
    color: #fff;
    border-radius: 100%;
}

/* show and hidden class */
.blog2 .item .curv-butn .icon i {
    font-weight: 300;
    font-style: normal;

}

.blog2 .item .curv-butn .icon i span {
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    line-height: 15px;
    vertical-align: middle;
    font-size: 21px;
}

.blog2 .item .curv-butn .icon i span i {
    font-family: "Outfit", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12px;
}

.blog2 .item:hover .curv-butn .icon i.icon-show,
.blog2 .item .curv-butn .icon i.icon-hidden {
    display: none;
}

.blog2 .item:hover .curv-butn .icon i.icon-hidden {
    display: inline;
    width: 60px;
    height: 60px;
    line-height: 65px;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    font-size: 14px;
    vertical-align: middle;
}


/* ======= Blog 3 style ======= */
.blog3 .item {
    margin-bottom: 30px;
}

.blog3 .post-img {
    position: relative;
    overflow: hidden;
    border-radius: 20px 20px 0 0;
    isolation: isolate;
}

.blog3 .post-img:hover img {
    -webkit-filter: none;
    filter: none;
    -webkit-transform: scale(1.05, 1.05);
    transform: scale(1.05, 1.05);
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

.blog3 .post-img a {
    display: block;
}

.blog3 .post-img img {
    -webkit-transition: all .5s;
    transition: all .5s;
}

.blog3 .post-cont {
    padding: 40px;
    border-radius: 0 0 20px 20px;
    background: #f2f2f2;
}

.blog3 .post-cont .tag {
    display: block;
    font-size: 14px;
    color: #f5b754;
    margin-bottom: 0px;
}

.blog3 .post-cont h5,
.blog3 .post-cont h5 a {
    color: #1b1b1b;
    font-size: 28px;
    line-height: 1.25em;
}

.blog3 .post-cont .category a {
    margin-right: 5px;
    position: relative;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 15px;
    color: #1b1b1b;
    display: inline-block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    letter-spacing: 0;
}

.blog3 .post-cont .category a:hover {
    color: #f5b754;
}

.blog3 .post-cont .category a:before {
    position: absolute;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #f5b754;
    content: "";
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
}

.blog3 .post-cont .category a:last-child {
    margin-right: 15px;
}

.blog3 .post-cont .category a:last-child:after {
    display: none;
}

.blog3 .post-cont .calendar a {
    margin-right: 5px;
    position: relative;
    font-size: 12px;
    font-weight: 300;
    margin-bottom: 15px;
    color: #555;
    display: inline-block;
    -webkit-transition: all 500ms ease;
    transition: all 500ms ease;
    letter-spacing: 0;
}

.blog3 .post-cont .calendar a:hover {
    color: #1b1b1b;
}

/* blog3 sidebar */
.blog3-sidebar .widget {
    background: #f2f2f2;
    padding: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 20px;
    border: none;
}

.blog3-sidebar .widget ul {
    margin-bottom: 0;
    padding: 0;
}

.blog3-sidebar .widget ul li {
    font-size: 14px;
    line-height: 1.5em;
    margin-bottom: 15px;
}

.blog3-sidebar .widget ul li a {
    color: #555;
}

.blog3-sidebar .widget ul li a.active {
    color: #555;
}

.blog3-sidebar .widget ul li a:hover {
    color: #f5b754;
}

.blog3-sidebar .widget ul li:last-child {
    margin-bottom: 0;
}

.blog3-sidebar .widget ul li i {
    font-size: 9px;
    margin-right: 10px;
}

.blog3-sidebar .widget .recent li {
    display: block;
    overflow: hidden;
}

.blog3-sidebar .widget .recent .thum {
    width: 130px;
    overflow: hidden;
    float: left;
    border-radius: 5px;
}

.blog3-sidebar .widget .recent a {
    display: block;
    margin-left: 145px;
}

.blog3-sidebar .widget-title {
    margin-bottom: 15px;
}

.blog3-sidebar .widget-title h6 {
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-size: 21px;
    line-height: 1.95em;
    margin-bottom: 15px;
    color: #1b1b1b;
}

.blog3-sidebar .search form {
    position: relative;
}

.blog3-sidebar .search form input {
    width: 100%;
    padding: 19.5px 15px;
    border: 0;
    background: #fff;
    margin-bottom: 0;
    border: none;
    color: #555;
}

.blog3-sidebar .search form input::placeholder {
    color: #555;
}

.blog3-sidebar .search form button {
    position: absolute;
    right: 5px;
    top: 5px;
    background-color: #f5b754;
    color: #1b1b1b;
    border: 0;
    cursor: pointer;
    border-radius: 100%;
    outline: none;
    transform: rotate(0);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
    width: 50px;
    height: 50px;
    line-height: 50px;
}

.blog3-sidebar:hover .search form button {
    background-color: #1b1b1b;
    color: #fff;
    outline: none;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

.blog3-sidebar .tags li {
    margin: 4px !important;
    padding: 7px 21px;
    background-color: #f5b754;
    color: #1b1b1b;
    float: left;
    border-radius: 20px;
}

.blog3-sidebar ul.tags li a {
    font-size: 12px;
    color: #1b1b1b;
}

.blog3-sidebar ul.tags li:hover,
.blog3-sidebar ul.tags li:hover a {
    background-color: #1b1b1b;
    color: #fff;
}


/* ======= Post style ======= */
.post {
    position: relative;
}

.post h4 {
    font-size: 30px;
    margin-bottom: 15px;
    color: #fff;
}

.post h4 span {
    color: #f5b754;
}

.post .form-box {
    background: transparent;
}

.post .form-box h5 {
    font-size: 21px;
    color: #1b1b1b;
}

.post .section {}

.post .section h6 {
    font-size: 17px;
    color: #1b1b1b;
}

.post .section h6 span {
    font-size: 12px;
    color: #555;
    font-weight: 300;
    font-family: 'Outfit', sans-serif;
    letter-spacing: 0;
    display: block;
    text-transform: none;
}

.post .section .wrap {
    display: flex;
    margin-bottom: 60px;
}

.post .section .wrap .user {
    margin-right: 20px;
    flex: 0 0 auto;
}

.post .section .wrap .user img {
    border-radius: 100%;
    width: 90px;
    border: 1px solid #ececec;
    padding: 4px;
}

.post .section .wrap .cont {}

.post .section .wrap .cont .repay {
    font-size: 10px;
    color: #fff;
    margin: 0;
    font-weight: 300;
}

.post .section .wrap .cont a.repay:hover {
    color: #f5b754;
}

/* pagination */
.pagination-wrap {
    padding: 0;
    margin: 0;
}

.pagination-wrap li {
    display: inline-block;
    margin: 0 5px;
}

.pagination-wrap li a {
    background: #f2f2f2;
    display: inline-block;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #1b1b1b;
    font-weight: 300;
    border: 1px solid #f2f2f2;
    border-radius: 100%;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}

.pagination-wrap li a i {
    font-size: 11px;
}

.pagination-wrap li a:hover {
    opacity: 1;
    text-decoration: none;
    background: #f5b754;
    border: 1px solid #f5b754;
    color: #1b1b1b;
    transform: translate3d(0px, -6px, 0.01px);
}

.pagination-wrap li a.active {
    background-color: #f5b754;
    border: 1px solid #f5b754;
    color: #1b1b1b;
}

@media screen and (max-width: 768px) {
    .pagination-wrap {
        padding: 0;
        margin: 0;
        text-align: center;
    }
}

/* pagination row: page numbers centred, "Show N per page" on the right */
.pagination-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

.per-page {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #6b6b6b;
}

.per-page-select {
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23f5b754' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    color: #1b1b1b;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 38px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .2s, box-shadow .2s;
}

.per-page-select:hover {
    border-color: #d8d8d8;
}

.per-page-select:focus {
    outline: none;
    border-color: #f5b754;
    box-shadow: 0 0 0 3px rgba(245, 183, 84, .18);
}

@media (max-width: 991px) {
    .pagination-bar {
        flex-direction: column;
        gap: 18px;
    }

    .per-page {
        position: static;
        transform: none;
        justify-content: center;
    }
}

/* prev/next post */
.post-prev-next {
    padding: 45px 0;
    border: none;
    border-top: 1px solid #fff;
    background-color: #fff;
}

@media (max-width: 576px) {
    .post-prev-next {
        text-align: center;
    }

    .post-prev-next-left {
        margin-bottom: 10px;
    }
}

.post-prev-next a {
    display: inline-block;
    font-size: 14px;
    color: #555;
    line-height: 1em;
}

.post-prev-next a i {
    font-size: 28px;
    color: #f5b754;
}

.post-prev-next a i:hover,
.post-prev-next a:hover {
    color: #f5b754;
}

.post-prev-next .post-prev-next-left a i {
    margin-right: 5px;
    font-size: 13px;
}

.post-prev-next .post-prev-next-right a i {
    font-size: 13px;
    margin-left: 0;
    margin-left: 5px;
}


/* ======= Contact style ======= */
.contact p {
    color: #555;
    margin-top: 10px;
    margin-bottom: 10px;
}

.contact p b {
    color: #1b1b1b;
    font-weight: 700;
}

.contact h5 {
    color: #1b1b1b;
    font-size: 21px;
    text-align: center;
    margin-bottom: 20px;
}

.contact .con {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    color: #555;
    text-decoration: none;
}

.contact .con .icon {
    width: 50px;
    height: 50px;
    line-height: 50px;
    margin-right: 15px;
    margin-bottom: 15px;
    border-radius: 100%;
    border: 1px solid #f5b754;
    text-align: center;
    background: transparent;
    font-size: 21px;
    color: #fff;
}

.contact .con .icon .img {
    border-radius: 0;
    border: 1px solid #f5b754;
}

.contact .con .icon img {
    background: transparent;
    padding: 13px;
}

.contact .con .text {
    color: #555;
    line-height: 1.5em;
}

/* contact form */
.contact .form-box {}


.contact .form-box input[type="text"],
.contact .form-box input[type="email"],
.contact .form-box input[type="tel"],
.contact .form-box textarea {
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #f6f6f7;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.contact .form-box input[type="text"]:hover,
.contact .form-box input[type="email"]:hover,
.contact .form-box input[type="tel"]:hover,
.contact .form-box textarea:hover {
    border-color: #d8d8d8;
    background: #fff;
}

.contact .form-box input[type="text"]:focus,
.contact .form-box input[type="email"]:focus,
.contact .form-box input[type="tel"]:focus,
.contact .form-box textarea:focus {
    border-color: #f5b754;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 183, 84, .18);
}

.contact .form-box textarea {
    min-height: 140px;
    resize: vertical;
}

/* Phone: country flag + dial code dropdown (intl-tel-input) — reskinned to
   match this form's boxed inputs above instead of the plugin's own
   bordered-rectangle default look. The plugin measures the flag/code chip
   itself and sets "padding-left" on the input inline via JS (contact.html),
   so that one side is left out of the "padding" shorthand below on purpose —
   the inline style already wins over it. */
.contact .form-box .iti {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.contact .form-box .iti__tel-input {
    width: 100%;
    margin-bottom: 15px;
    padding: 18.5px 20px;
    height: auto;
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #f6f6f7;
    box-shadow: none;
    display: block;
    line-height: 1.5em;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: #555;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.contact .form-box .iti__tel-input:hover {
    border-color: #d8d8d8;
    background: #fff;
}

.contact .form-box .iti__tel-input:focus {
    outline: none;
    border-color: #f5b754;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 183, 84, .18);
}

.contact .form-box .iti__selected-country {
    border-radius: 12px 0 0 12px;
    padding-left: 18px;
}

.contact .form-box .iti__selected-country:hover,
.contact .form-box .iti__selected-country:focus {
    background-color: #f2f2f2;
}

.contact .form-box .iti__selected-dial-code {
    color: #555;
    font-size: 14px;
}

.contact .form-box .iti__country-list {
    border-radius: 14px;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}

.contact .form-box .has-error .iti__tel-input {
    margin-bottom: 4px;
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .15);
}

/* Server-side validation errors (core/views.py ContactMessageCreateView),
   rendered inline by the AJAX submit handler — same look as the booking
   modal's ".field-error"/".has-error". */
.contact .form-box .has-error input,
.contact .form-box .has-error textarea {
    margin-bottom: 4px;
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .15);
}

.contact .form-box .field-error {
    margin: 0 0 14px 4px;
    color: #dc3545;
    font-size: 12px;
}

/* Services — Rental Plans (Daily/Weekly/Monthly tabs + price table). */
.plan-tab {
    display: block;
    width: 100%;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 20px;
    padding: 35px 30px;
    text-align: left;
    cursor: pointer;
    transition: background-color 300ms ease, border-color 300ms ease, transform 300ms ease;
}

.plan-tab:hover {
    border-color: #f5b754;
    transform: translateY(-6px);
}

.plan-tab.active {
    background: #f5b754;
    border-color: #f5b754;
}

.plan-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin-bottom: 15px;
    border-radius: 100%;
    border: 1px solid #1b1b1b;
    font-size: 20px;
    color: #1b1b1b;
}

.plan-tab.active .plan-tab-icon {
    border-color: #1b1b1b;
    background: #1b1b1b;
    color: #f5b754;
}

.plan-tab h5 {
    margin-bottom: 8px;
    color: #1b1b1b;
}

.plan-tab p {
    margin: 0;
    color: #555;
    font-size: 14px;
}

.plan-table-heading {
    margin-bottom: 25px;
}

.plan-price-table {
    border: 1px solid #ececec;
    border-radius: 20px;
    overflow: hidden;
}

.plan-price-table table {
    width: 100%;
    border-collapse: collapse;
}

.plan-price-table thead {
    background: #f6f6f7;
}

.plan-price-table th {
    padding: 18px 30px;
    text-align: left;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: #1b1b1b;
}

/* Columns: # / Model / Daily / Weekly / Monthly — only the three price
   columns (3rd onward) are right-aligned; # and Model stay left. */
.plan-price-table th:nth-child(n+3),
.plan-price-table td:nth-child(n+3) {
    text-align: right;
}

.plan-price-table td {
    padding: 18px 30px;
    border-top: 1px solid #ececec;
    font-size: 14px;
    color: #1b1b1b;
}

.plan-price-table th:first-child,
.plan-price-table td:first-child {
    width: 1%;
    padding-right: 0;
    color: #9a9a9a;
    white-space: nowrap;
}

.plan-price-table td:nth-child(2) a {
    color: #d99a2b;
    font-weight: 600;
}

.plan-price-table td:nth-child(2) a:hover {
    color: #f5b754;
}

/* Services — plan long-form intro (RentalPlanContent, admin-authored raw
   HTML, rendered "|safe" in templates/core/services.html) shown above the
   price table. Plain h2/h3/p/ul/ol/strong — scope everything to
   ".plan-content" so it can't leak onto (or be leaked onto by) any other
   heading/list on the page. */
.plan-content {
    margin-bottom: 45px;
}

.plan-content>*:first-child {
    margin-top: 0;
}

.plan-content h1,
.plan-content h2 {
    margin: 40px 0 16px;
    font-size: 26px;
    font-weight: 700;
    color: #1b1b1b;
}

.plan-content h3 {
    margin: 28px 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: #1b1b1b;
}

.plan-content p {
    margin: 0 0 16px;
    color: #555;
    line-height: 1.8em;
}

.plan-content strong {
    color: #1b1b1b;
}

.plan-content ul,
.plan-content ol {
    margin: 0 0 16px;
    padding-left: 20px;
    color: #555;
}

/* The theme's global "* { list-style: none }" reset (style.css, near the
   top) sets list-style directly on every <li>, not just inherits it — an
   own declaration always beats an inherited one, so "list-style: disc" on
   ".plan-content ul" alone never reaches the <li>. Set it on the <li>
   itself instead. */
.plan-content ul li {
    list-style: disc;
    margin-bottom: 8px;
    line-height: 1.7em;
}

.plan-content ol li {
    list-style: decimal;
    margin-bottom: 8px;
    line-height: 1.7em;
}

/* opening-hours list */
.opening-hours ul {
    margin: 0;
    padding: 0;
    margin-bottom: 30px;
    width: 320px;
}

.opening-hours ul li .tit,
.opening-hours ul li .dots,
.opening-hours ul li span {
    display: table-cell;
    white-space: nowrap;
}

.opening-hours ul li {
    margin-bottom: 15px;
    font-size: 14px;
}

.opening-hours ul li:last-of-type {
    margin-bottom: 0;
}

.opening-hours ul li span {
    white-space: nowrap;
    padding-left: 10px;
    color: #555;
}

.opening-hours ul li .tit {
    padding-right: 10px;
    color: #555;
}

.opening-hours ul li .dots {
    height: 4px;
    width: 100%;
    border-bottom: 2px dashed #202020;
    position: relative;
    top: -7px;
}

.google-map {
    width: 100%;
    height: 340px;
    overflow: hidden;
    border-radius: 20px;
}


/* ======= Contact Box style ======= */
.contact-box {
    position: relative;
    margin-bottom: 0px;
    margin-top: -100px;
}

.contact-box .container {
    position: relative;
    z-index: 2;
}

.contact-box .item {
    background: #fff;
    padding: 60px 30px;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
    line-height: 1;
    text-align: left;
    overflow: hidden;
    transition: background-color 300ms ease, transform 300ms ease, color 300ms ease;
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    border-radius: 20px;
}

.contact-box .item.active {
    background: #f5b754;
}

.contact-box .item:hover {
    background: #f5b754;
    transform: translate3d(0px, -15px, 0.01px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;

}

.contact-box .item h5 {
    font-size: 21px;
    color: #1b1b1b;
    margin-bottom: 0px;
}

.contact-box .item.active h5 {
    color: #1b1b1b
}

.contact-box .item:hover h5 {
    color: #1b1b1b;
    -webkit-transition: .5s;
    transition: .5s;
}

.contact-box .item p {
    color: #555;
    font-size: 14px;
    font-weight: 300;
    margin-bottom: 0;
}

.contact-box .item.active p {
    color: #1b1b1b;
}

.contact-box .item:hover p {
    color: #1b1b1b;
}

.contact-box .item span {
    font-size: 35px;
    color: #f5b754;
    line-height: 1;
    margin-bottom: 15px;
    display: inline-block;
    -webkit-transition: .5s;
    transition: .5s;
}

.contact-box .item.active span {
    color: #1b1b1b;
}

.contact-box .item:hover span {
    color: #1b1b1b;
}

.contact-box .item i.numb {
    font-size: 120px;
    position: absolute;
    bottom: -20px;
    right: -20px;
    color: rgba(0, 0, 0, 0.15);
    opacity: .2;
}

.contact-box .item.active i.numb {
    color: rgba(0, 0, 0, 0.2);
}

.contact-box .item:hover .numb {
    color: rgba(0, 0, 0, 0.2);
}

/* Only one gold card at a time: clicking a card selects it (custom.js
   moves .active there), and while pointing at another card the selected
   one goes back to white, so the hovered card is the only gold one. */
.contact-box .item {
    cursor: pointer;
}

.contact-box .row:has(.item:hover) .item.active:not(:hover) {
    background: #fff;
}

.contact-box .row:has(.item:hover) .item.active:not(:hover) p {
    color: #555;
}

.contact-box .row:has(.item:hover) .item.active:not(:hover) span {
    color: #f5b754;
}

.contact-box .row:has(.item:hover) .item.active:not(:hover) i.numb {
    color: rgba(0, 0, 0, 0.15);
}


/* ======= 404 style ======= */
.not-found h1 {
    font-size: 200px;
    line-height: 180px;
    color: #f2f2f2;
}

.not-found h3 {
    color: #1b1b1b;
    font-size: 21px;
    line-height: 1.25em;
}

.not-found p {
    color: #555;
}

.not-found .search-form {
    position: relative;
    max-width: 520px;
    margin: 20px auto 0;
}

.not-found .search-form form {
    position: relative;
}

.not-found .search-form .form-group {
    position: relative;
    margin: 0;
}

.not-found .search-form .form-group input[type="text"],
.not-found .search-form .form-group input[type="search"],
.not-found .search-form .form-group input[type="email"] {
    position: relative;
    width: 100%;
    line-height: 30px;
    padding: 10px 100px 10px 20px;
    height: 60px;
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    background: transparent;
    color: #1b1b1b;
    border-radius: 0px;
    border: 1px solid #f5b754;
    transition: all 300ms ease;
    border-radius: 30px;
}

.not-found .search-form .form-group input[type="text"]:focus,
.not-found .search-form .form-group input[type="email"]:focus,
.not-found .search-form .form-group input[type="search"]:focus {
    border-color: #f5b754;
}

.not-found .search-form .form-group input::-webkit-input-placeholder {
    color: #555;
}

.not-found .search-form .form-group input[type="search"]:focus {
    color: #555;
}

.not-found .search-form .form-group .search-button {
    position: absolute;
    right: 5px;
    top: 5px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    background: none;
    color: #1b1b1b;
    background: #f5b754;
    border-radius: 100%;
    outline: none;
    transform: rotate(0);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

.not-found .search-form .form-group .search-button span {
    vertical-align: middle;
    outline: none;
}

.not-found .search-form:hover .form-group .search-button {
    background: #1b1b1b;
    color: #fff;
    outline: none;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

/* bottom fade */
.bottom-fade {
    width: 100%;
    top: 41%;
    height: 60%;
    float: left;
    position: absolute;
    background: linear-gradient(to top, #000000 0%, rgba(0, 0, 0, 0.738) 19%, rgba(0, 0, 0, 0.541) 34%, rgba(0, 0, 0, 0.382) 47%, rgba(0, 0, 0, 0.278) 56.5%, rgba(0, 0, 0, 0.194) 65%, rgba(0, 0, 0, 0.126) 73%, rgba(0, 0, 0, 0.075) 80.2%, rgba(0, 0, 0, 0.042) 86.1%, rgba(0, 0, 0, 0.021) 91%, rgba(0, 0, 0, 0.008) 95.2%, rgba(0, 0, 0, 0.002) 98.2%, transparent 100%);
}

/* ======= Button style ======= */
/* button 1 */
.button-1 {
    display: inline-block;
    height: auto;
    padding: 14px 42px;
    border: 1px solid #f5b754;
    border-radius: 30px;
    background-color: #f5b754;
    color: #1b1b1b;
    font-weight: 300;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}

[data-overlay-dark] .button-1 span,
.button-1 span {
    font-size: 10px;
    margin-left: 5px;
    color: #1b1b1b;
}

[data-overlay-dark] .button-1 i,
.button-1 i {
    font-style: normal;
    font-size: 14px;
    padding-right: 5px;
    color: #1b1b1b;
}

.button-1:hover {
    border: 1px solid #fff;
    background-color: #fff;
    color: #1b1b1b;
    transform: translate3d(0px, -6px, 0.01px);
}

.button-1:hover span {
    color: #1b1b1b;
}

/* button 2 */
.button-2 {
    display: inline-block;
    height: auto;
    padding: 14px 42px;
    border: 1px solid #fff;
    border-radius: 30px;
    background-color: transparent;
    color: #fff;
    font-weight: 300;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}

[data-overlay-dark] .button-2 span,
.button-2 span {
    font-size: 10px;
    margin-left: 5px;
    color: #fff;
}

[data-overlay-dark] .button-2 i,
.button-2 i {
    font-style: normal;
    font-size: 14px;
    padding-right: 5px;
    color: #fff;
}

.button-2:hover {
    border: 1px solid #f5b754;
    background-color: #f5b754;
    color: #1b1b1b;
    transform: translate3d(0px, -6px, 0.01px);
}

.button-2:hover i,
.button-2:hover span {
    color: #1b1b1b;
}

/* button 3 */
.button-3 {
    display: inline-block;
    height: auto;
    padding: 14px 42px;
    border: 1px solid #1b1b1b;
    border-radius: 30px;
    background-color: #1b1b1b;
    color: #fff;
    font-weight: 300;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}

[data-overlay-dark] .button-3 span,
.button-3 span {
    font-size: 14px;
    margin-left: 5px;
    color: #fff;
}

.button-3:hover {
    border: 1px solid #fff;
    background-color: #fff;
    color: #1b1b1b;
    transform: translate3d(0px, -6px, 0.01px);
}

.button-3:hover span {
    color: #1b1b1b;
}

/* button 3 */
.button-4 {
    display: inline-block;
    height: auto;
    padding: 14px 42px;
    border: 1px solid #f5b754;
    border-radius: 30px;
    background-color: #f5b754;
    color: #1b1b1b;
    font-weight: 300;
    text-align: center;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    transition: border-color 300ms ease, transform 300ms ease, background-color 300ms ease, color 300ms ease;
    transform-style: preserve-3d;
}

[data-overlay-dark] .button-4 span,
.button-4 span {
    font-size: 10px;
    margin-left: 5px;
    color: #1b1b1b;
}

.button-4:hover {
    border: 1px solid #1b1b1b;
    background-color: #1b1b1b;
    color: #fff;
    transform: translate3d(0px, -6px, 0.01px);
}

.button-4:hover span {
    color: #fff;
}

/* ======= LetsTalk style ======= */
.lets-talk {
    position: relative;
}

.lets-talk .wrap {
    position: relative;
    background: #fff;
    padding: 45px 30px;
    overflow: hidden;
    z-index: 1;
}

.lets-talk[data-overlay-dark] h6,
.lets-talk h6 {
    display: inline-block;
    text-transform: uppercase;
    font-size: 10px;
    color: #f5b754;
    margin-bottom: 10px;
    font-weight: 300;
    letter-spacing: 6px;
}

.lets-talk[data-overlay-dark] h5,
.lets-talk h5 {
    font-size: 35px;
    color: #fff;
    line-height: 1em;
}

.lets-talk[data-overlay-dark] p,
.lets-talk p {
    font-size: 14px;
    color: #fff;
    line-height: 1.5em;
}


/* ======= App style ======= */
.app {
    position: relative;
}

.app .item {
    background: #f5b754;
    border-radius: 20px;
    padding: 60px 60px 0px 60px;
}

.app .item[data-overlay-dark] h6,
.app .item h6 {
    display: inline-block;
    text-transform: uppercase;
    font-size: 10px;
    color: #1b1b1b;
    margin-bottom: 10px;
    font-weight: 300;
    letter-spacing: 6px;
}

.app .item[data-overlay-dark] h5,
.app .item h3 {
    font-size: 35px;
    color: #1b1b1b;
    line-height: 1.2em;
}

.app .item[data-overlay-dark] p,
.app .item p {
    font-size: 14px;
    color: #1b1b1b;
    line-height: 1.5em;
}

.app .item img {
    position: relative;
    display: block;
}

@media screen and (max-width: 991px) {
    .app .item {
        padding: 30px 30px 0px 30px;
    }
}


/* ======= Footer style ======= */
.footer {
    background-color: #1b1b1b;
}

.footer-logo {
    width: 130px;
    margin-bottom: 15px;
}

.footer-logo h2 {
    font-family: 'Outfit', sans-serif;
    font-size: 30px;
    font-weight: 700;
    display: flex;
    width: 100%;
    position: relative;
    color: #fff;
    margin-bottom: 0;
    padding: 0;
    line-height: 1.25em;

}

.footer-logo h2 span {
    color: #f5b754;
}

.footer .widget .widget-title {
    font-size: 21px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}

/* first footer */
.first-footer {
    padding: 45px 0 0 0;
}

/* Footer alignment model
   --------------------------------------------------------------------------
   Contact bar : [ logo ] [ Call us     ] [ Write to us  ] [ Address      ]
   Columns row : [ ---- ] [ Quick Links ] [ Our Services ] [ Get in Touch ]
   Both rows use the SAME grid (--footer-grid), so each icon starts exactly
   above its column heading: Call us -> Quick Links, Write to us -> Our
   Services, Address -> Get in Touch. */
.footer {
    --footer-grid: 360px repeat(3, minmax(0, 1fr));
    --footer-grid-gap: 32px;
}

/* smaller laptops: a touch less logo space and a wider Address column, so
   "Rigga Business Centre, Office 3001" stays on one line */
@media (max-width: 1399px) {
    .footer {
        --footer-grid: 300px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
    }
}

.first-footer-inner {
    display: grid;
    grid-template-columns: var(--footer-grid);
    column-gap: var(--footer-grid-gap);
    align-items: center;
    margin-bottom: 30px;
}

.footer-brand {
    display: flex;
    align-items: center;
    line-height: 0;
}

.footer-brand img {
    width: 85px;
    height: auto;
    object-fit: contain;
}

/* drop the card + wrapper boxes so the 3 items become direct grid children
   of .first-footer-inner, in one row with the logo */
.first-footer-inner .links.dark.footer-contact-links,
.first-footer-inner .footer-contact-links-wrapper {
    display: contents;
}

.first-footer-inner .footer-contact-link-wrapper {
    min-width: 0;
}

.first-footer-inner .footer-contact-links-divider {
    display: none;
}

/* the address building line may wrap in the narrower columns */
.first-footer-inner .footer-address-link .addr-building {
    white-space: normal;
}

/* same grid for the columns below */
.second-footer>.row {
    --bs-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
    display: grid;
    grid-template-columns: var(--footer-grid);
    column-gap: var(--footer-grid-gap);
    align-items: start;
}

/* empty first cell under the logo */
.second-footer>.row::before {
    content: "";
}

.second-footer>.row>[class*="col-"] {
    min-width: 0;
    max-width: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
}

/* footer icon */
.icon-footer {
    width: 60px;
    max-height: 60px;
    min-height: 60px;
    min-width: 60px;
    background-color: #f5b754;
    color: #1b1b1b;
    font-size: 21px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #f5b754;
    border-radius: 100%;
}

.icon-footer i {
    width: 100%;
    text-align: center;
}

/* footer link */
.links.dark {
    background-color: transparent;
    border: 1px solid #222;
    box-shadow: none;
    border-radius: 0px;
}

.links.dark.footer-contact-links {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 30px;
    padding: 20px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    border-radius: 20px;
}

.footer-contact-links-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 1032px;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.footer-contact-links-divider {
    width: 1px;
    min-height: 100%;
    margin-right: 20px;
    margin-left: 20px;
    background-color: #222;
}

.footer-contact-link-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    color: #1b1b1b;
    text-decoration: none;
}

.image-wrapper.footer-contact-link-icon {
    margin-right: 15px;
}

.footer-contact-link-wrapper h6 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 2px;
    font-weight: 700;
}

.footer-contact-link-wrapper p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13.5px;
    margin-bottom: 0px;
    line-height: 1.35;
}

.footer-contact-link-text {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.footer-contact-link-text:hover {
    color: #f5b754;
}

.footer-address-text {
    margin-bottom: 0;
}

.footer-address-link {
    display: block;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.footer-address-link:hover,
.footer-touch-addr:hover {
    color: #f5b754;
    cursor: pointer;
}

/* both address lines styled like the email/phone value next to them */
.footer-address-link .addr-building,
.footer-address-link .addr-city {
    display: block;
    white-space: nowrap;
}

/* plain text (not a link) — same colour, indent and gold dot as the
   phone/email links above it in "Get in Touch" */
.footer-touch-addr {
    display: block;
    position: relative;
    padding-left: 15px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
    transition: color 0.2s ease;
}

.footer-touch-addr:after {
    width: 6px;
    height: 6px;
    content: "";
    background: #f5b754;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 9px;
}

.footer-touch-addr .addr-touch-line1 {
    display: block;
    color: inherit;
}

.footer-touch-addr .addr-touch-line2 {
    display: block;
    color: inherit;
}

/* second footer */
.second-footer {
    border-bottom: 1px solid #222;
}

.second-footer .widget-area .widget {
    padding: 38px 0;
}

.second-footer .widget-area .widget p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    margin-bottom: 18px;
}

/* footer social row */
.footer-social ul {
    margin: 0;
    padding: 0;
}

.footer-social li {
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 0 6px 0 0;
}

/* social icons in the copyright bar */
.copyright-social ul {
    text-align: right;
}

.copyright-social li {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 13px;
    margin: 0 0 0 8px;
    border: 0;
    background: transparent;
    overflow: hidden;
}

/* brand-coloured social icons */
.copyright-social li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.copyright-social li:hover {
    background: transparent;
}

.copyright-social li a:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

.copyright-social a[aria-label="WhatsApp"] {
    background: #25D366;
}

.copyright-social a[aria-label="Instagram"] {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.copyright-social a[aria-label="Facebook"] {
    background: #1877F2;
}

.copyright-social a[aria-label="TikTok"] {
    background: #010101;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.copyright-social a[aria-label="YouTube"] {
    background: #FF0000;
}

@media (max-width: 991px) {
    .second-footer .widget-area .widget {
        padding: 26px 0;
    }
}

@media (max-width: 767px) {
    .copyright-social ul {
        text-align: center;
        margin-top: 14px;
    }

    .copyright-social li {
        margin: 0 4px;
    }
}

@media (max-width: 991px) {
    .first-footer-inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: normal;
        gap: 24px;
    }

    .first-footer-inner .footer-contact-link-wrapper {
        flex: 0 0 auto;
    }

    /* logo stacks above the bar again, so drop the alignment layout
       and restore the normal Bootstrap row/column behaviour */
    .second-footer>.row {
        --bs-gutter-x: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: normal;
        gap: 0;
        padding-left: 0;
    }

    .second-footer>.row::before {
        display: none;
    }

    .second-footer>.row>[class*="col-"] {
        flex: 0 0 auto;
        width: 50%;
        max-width: 50%;
        padding-left: calc(var(--bs-gutter-x) * .5);
        padding-right: calc(var(--bs-gutter-x) * .5);
    }
}

@media (max-width: 575px) {
    .second-footer>.row>[class*="col-"] {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {
    .first-footer {
        padding-top: 40px;
    }

    .first-footer-inner .footer-brand {
        align-self: center;
    }

    .links.dark.footer-contact-links {
        flex-direction: column;
        gap: 18px;
        padding: 24px 20px;
    }

    .footer-contact-links-wrapper {
        flex-direction: column;
        gap: 18px;
    }

    .first-footer-inner .footer-contact-link-wrapper {
        flex: 0 0 auto;
    }

    .footer-contact-links-divider {
        display: none;
    }

    .second-footer .widget-area .widget {
        padding: 20px 0;
    }
}

/* usefull links */
.footer .usful-links ul {
    margin: 0;
    padding: 0;
}

.footer .usful-links ul li {
    margin-bottom: 5px;
}

.footer .usful-links ul li:hover {
    color: #f5b754;
}

.footer .usful-links ul li i {
    font-size: 7px;
    margin-right: 3px;
}

.footer .usful-links ul li a {
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding-left: 15px;
}

.footer .usful-links ul li a:after {
    width: 6px;
    height: 6px;
    content: "";
    background: #f5b754;
    border-radius: 50%;
    display: block;
    position: absolute;
    left: 0;
    top: 12px;
}

.footer .usful-links ul li a:hover {
    color: #f5b754;
}

/* bottom footer */
.copyright {
    padding-top: 24px;
    padding-bottom: 24px;
}

.copyright p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
}

.copyright p a {
    background: linear-gradient(to bottom, #f5b754 0%, #f5b754 100%);
    background-position: 0 100%;
    background-repeat: repeat-x;
    background-size: 1px 1px;
    color: #fff;
    text-decoration: none;
    transition: background-size .2s;
}

.copyright p a:hover {
    color: #fff;
}

/* "Privacy Policy" link after the copyright line (partials/footer.html) */
.copyright p a.footer-privacy-link {
    margin-left: 12px;
}

/* social icons */
.social-icons li {
    display: inline-block;
    border: none;
    z-index: 1;
    position: relative;
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 14px;
    background: transparent;
    color: #fff;
    font-weight: 300;
    border-radius: 0;
    margin-right: 5px;
    -webkit-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
    border: 1px solid #f5b754;
    border-radius: 100%;
}

.social-icons li:hover {
    background: #f5b754;
    color: #1b1b1b;
}

/* newsletter */
.widget-newsletter {
    position: relative;
}

.widget-newsletter input {
    height: 60px;
    width: 100%;
    border: none;
    background: transparent;
    font-size: 14px;
    color: #fff;
    outline: none;
    padding: 0 90px 0 20px;
    border: 1px solid #f5b754;
    border-radius: 30px;
}

.widget-newsletter button {
    height: 50px;
    width: 50px;
    border: none;
    background: #f5b754;
    font-size: 14px;
    font-weight: 700;
    color: #1b1b1b;
    outline: none;
    padding: 0px 16px;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    top: 5px;
    right: 5px;
    border-radius: 100%;
    line-height: 55px;
    outline: none;
    transform: rotate(0);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

.widget-newsletter input::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.widget-newsletter:hover button {
    background: #fff;
    color: #1b1b1b;
    outline: none;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.7s linear;
    -o-transition: all 0.7s linear;
    transition: all 0.7s linear;
}

@media screen and (max-width: 767px) {
    .footer-contact-links-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .footer-contact-links-divider {
        width: auto;
        min-height: 1px;
        margin: 20px 0px;
    }
}


/* ======= toTop Button style ======= */
.progress-wrap {
    position: fixed;
    bottom: 30px;
    right: 30px;
    height: 55px;
    width: 55px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap.active-progress {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

.progress-wrap::after {
    position: absolute;
    font-family: 'themify';
    content: '\e627';
    text-align: center;
    line-height: 55px;
    font-size: 10px;
    font-weight: normal;
    left: 0;
    top: 0;
    height: 55px;
    width: 55px;
    cursor: pointer;
    display: block;
    z-index: 1;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap svg path {
    fill: none;
}

.progress-wrap svg.progress-circle path {
    stroke: #f5b754;
    stroke-width: 2;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 400ms linear;
    -o-transition: all 400ms linear;
    transition: all 400ms linear;
}

.progress-wrap::after {
    color: #f5b754;
}

.progress-wrap svg.progress-circle path {
    stroke: #f5b754;
}


/* ======= Responsive style ======= */
@media (min-width: 1200px) {
    .container {
        max-width: 1500px !important;
    }
}

@media screen and (max-width: 991px) {
    .bg-fixed {
        background-attachment: scroll !important;
    }

    .header {
        background-attachment: scroll !important;
        background-position: 50% 0% !important;
    }

    .header .caption h1 {
        font-size: 42px;
    }

    .header .caption h2 {
        font-size: 42px;
    }

    .kenburns-inner .caption h1 {
        font-size: 42px;
    }

    .banner-header h6 {
        font-size: 10px;
    }

    .parallax-header h6 {
        font-size: 10px;
    }

    .parallax-header[data-overlay-dark] h1,
    .parallax-header h1 {
        font-size: 42px;
    }

    .section-title {
        font-size: 35px;
    }

    .section-subtitle {
        font-size: 10px;
    }

    .section-subtitle {
        font-size: 10px;
    }

    .process .item h5 {
        font-size: 21px;
    }

    .video-fullscreen-wrap h6 {
        font-size: 12px;
    }

    .video-fullscreen-wrap h1 {
        font-size: 42px;
    }

    .footer .widget .widget-title {
        font-size: 21px;
    }

    .not-found h1 {
        font-size: 150px;
        line-height: 150px;
    }

    .footer-bottom .footer-social {
        float: left;
    }

    .form1.brdr {
        border-radius: 20px;
    }

    .car-details .sidebar-car {
        margin-top: 30px;
    }

    .blog2 .post-cont {
        padding: 30px 15px;
    }
}


/* ======= Overlay Effect Bg image style ======= */
[data-overlay-dark] {
    position: relative;
}

[data-overlay-dark] .container {
    position: relative;
    z-index: 2;
}

[data-overlay-dark]:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

[data-overlay-dark]:before {
    background: #000;
}

[data-overlay-dark] h1,
[data-overlay-dark] h2,
[data-overlay-dark] h3,
[data-overlay-dark] h4,
[data-overlay-dark] h5,
[data-overlay-dark] h6,
[data-overlay-dark] span {
    color: #fff;
}

[data-overlay-dark] p {
    color: #555;
}

[data-overlay-dark="0"]:before {
    opacity: 0;
}

[data-overlay-dark="1"]:before {
    opacity: 0.1;
}

[data-overlay-dark="2"]:before {
    opacity: 0.2;
}

[data-overlay-dark="3"]:before {
    opacity: 0.3;
}

[data-overlay-dark="4"]:before {
    opacity: 0.4;
}

[data-overlay-dark="5"]:before {
    opacity: 0.5;
}

[data-overlay-dark="6"]:before {
    opacity: 0.6;
}

[data-overlay-dark="7"]:before {
    opacity: 0.7;
}

[data-overlay-dark="8"]:before {
    opacity: 0.8;
}

[data-overlay-dark="9"]:before {
    opacity: 0.9;
}

[data-overlay-dark="10"]:before {
    opacity: 1;
}

/* ======= Modal Popup style ======= */
.modal-content {
    position: relative;
    border-radius: 20px;
    border: none;
}

.modal-header {
    background: #f5b754;
    border: none;
    padding: 25px 30px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

.modal-body {
    background: #f2f2f2;
    padding: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
}

.modal-body .booking-box {
    margin-bottom: 0;
    padding: 22px 35px 35px;
}

@media screen and (max-width: 991px) {
    .modal-body .booking-box {
        padding: 16px 18px 25px;
    }
}

.modal-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #1b1b1b;
}

.modal-body .input1_inner input {
    position: relative;
    z-index: 99999;
}

.modal-header .btn-close:focus,
.modal-header .btn-close:active {
    outline: none;
    box-shadow: none;
}

/* ==========================================================================
   Cars page (templates/core/cars.html)
   No hero banner: translucent dark navbar in both states (top + on scroll)
   ========================================================================== */
.navbar:not(.nav-scroll) {
    position: relative;
    background: rgba(18, 18, 18, .68);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

/* scrolled (sticky) navbar — same frosted-dark look instead of solid white */
.navbar.nav-scroll {
    background: rgba(18, 18, 18, .72);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.navbar.nav-scroll .navbar-nav .nav-link,
.navbar.nav-scroll .navbar-right .wrap .text p,
.navbar.nav-scroll .navbar-right .wrap .text h5,
.navbar.nav-scroll .navbar-right .wrap .text h5 a,
.navbar.nav-scroll .navbar-right .wrap .icon,
.navbar.nav-scroll .navbar-toggler-icon,
.navbar.nav-scroll .navbar-toggler-icon i {
    color: #fff;
}

.navbar.nav-scroll .navbar-nav .active,
.navbar.nav-scroll .navbar-nav .nav-link:hover {
    color: #f5b754;
}

/* tighten the whitespace above the filter (banner + divider were removed) */
.cars1.cars-grid.section-padding {
    padding-top: 40px;
}

/* Brand strip – match the original template: one clean, evenly-sized row.
   Logos are normalised transparent PNGs, so no blend tricks are needed. */

.clients .owl-carousel {
    margin: 0;
}

.clients .clients-logo,
.clients .clients-logo a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 115px;
}

.clients .clients-logo img {
    width: auto;
    max-width: 150px;
    max-height: 76px;
    object-fit: contain;
    transition: filter .4s ease;
}

/* theme's original hover: logo turns greyscale */
.clients .clients-logo img:hover {
    filter: grayscale(100%);
}

/* ===== Filter bar – clean, attractive card ===== */
.cars1 .car-filter {
    margin-bottom: 55px;
}

.cars1 .car-filter .filter-form {
    background: #fff;
    border: 1px solid #e6e6e6;
    box-shadow: 0 18px 44px rgba(27, 27, 27, .12);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr 150px;
    align-items: stretch;
    gap: 12px;
}

/* each cell is a flex box so its single control fills the row height exactly */
.cars1 .car-filter .filter-field {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: stretch;
}

.cars1 .car-filter .filter-field>* {
    width: 100%;
}

/* every control is exactly the same height */
.cars1 .car-filter .select2-container--default .select2-selection--single,
.cars1 .car-filter .filter-text,
.cars1 .car-filter .range-field,
.cars1 .car-filter .filter-button {
    height: 56px !important;
    box-sizing: border-box;
}

/* select2 pill look — matches the light-grey card "details" area */
.cars1 .car-filter .select2-container,
.cars1 .car-filter .select2 {
    width: 100% !important;
    display: block;
    margin: 0 !important;
    /* theme puts .select2 { margin-bottom:15px } on the container too */
}

/* theme sets .selection { display: inline-flex } which shrinks the box – undo it */
.cars1 .car-filter .select2-container .selection {
    display: block;
    width: 100%;
}

.cars1 .car-filter .select2-container--default .select2-selection--single {
    width: 100%;
    background: #f6f6f7 !important;
    border: 1px solid #ececec !important;
    border-radius: 12px !important;
    height: 56px !important;
    display: block;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.cars1 .car-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #1b1b1b;
    font-weight: 400;
    padding: 0 34px 0 18px !important;
    line-height: 54px !important;
}

.cars1 .car-filter .select2-selection__rendered .brand-opt {
    display: inline-flex;
    vertical-align: middle;
}

/* Car Name — free text input, same pill look */
.cars1 .car-filter .filter-text {
    width: 100%;
    height: 56px;
    margin: 0;
    /* theme adds margin-bottom:15px to inputs */
    border: 1px solid #ececec;
    border-radius: 12px;
    background: #f6f6f7;
    padding: 0 18px;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    color: #1b1b1b;
    line-height: 54px;
    transition: border-color .2s, background .2s, box-shadow .2s;
}

.cars1 .car-filter .filter-text::placeholder {
    color: #8b8b8b;
}

.cars1 .car-filter .filter-text:hover {
    border-color: #d8d8d8;
    background: #fff;
}

.cars1 .car-filter .filter-text:focus {
    outline: none;
    border-color: #f5b754;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(245, 183, 84, .18);
}

.cars1 .car-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: block !important;
    height: 54px;
    top: 0;
    right: 14px;
}

.cars1 .car-filter .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #f5b754 transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-left: -5px !important;
}

.cars1 .car-filter .select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #f5b754 transparent !important;
    border-width: 0 5px 6px 5px !important;
}

.cars1 .car-filter .select2-container--default .select2-selection--single:hover {
    border-color: #d8d8d8 !important;
    background: #fff !important;
}

.cars1 .car-filter .select2-container--open .select2-selection--single,
.cars1 .car-filter .select2-container--focus .select2-selection--single {
    border-color: #f5b754 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(245, 183, 84, .18) !important;
}

/* brand option with logo */
.brand-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1;
}

.brand-opt .brand-opt-logo {
    width: 55px;
    height: 26px;
    object-fit: contain;
    flex: 0 0 26px;
}

.select2-results__option .brand-opt {
    padding: 2px 0;
}

/* price range field */
.cars1 .car-filter .range-field {
    background: #f6f6f7;
    border: 1px solid #ececec;
    border-radius: 12px;
    height: 56px;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
}

.cars1 .car-filter .range-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    line-height: 1;
    color: #8b8b8b;
}

.cars1 .car-filter .range-head .range-values {
    color: #1b1b1b;
    font-weight: 600;
}

.cars1 .car-filter .range-slider {
    position: relative;
    height: 18px;
}

.cars1 .car-filter .range-track,
.cars1 .car-filter .range-fill {
    position: absolute;
    top: 50%;
    height: 4px;
    transform: translateY(-50%);
    border-radius: 2px;
}

.cars1 .car-filter .range-track {
    left: 0;
    right: 0;
    background: #e2e2e2;
}

.cars1 .car-filter .range-fill {
    background: #f5b754;
}

.cars1 .car-filter .range-slider input[type=range] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.cars1 .car-filter .range-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #f5b754;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.cars1 .car-filter .range-slider input[type=range]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #f5b754;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    cursor: pointer;
}

.cars1 .car-filter .range-slider input[type=range]::-moz-range-track {
    background: none;
}

/* submit button */
.cars1 .car-filter .filter-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #f7c064 0%, #f2ad3f 100%);
    color: #1b1b1b;
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(242, 173, 63, .3);
    transition: all .2s ease;
}

.cars1 .car-filter .filter-button:hover {
    background: #1b1b1b;
    color: #fff;
    box-shadow: 0 8px 18px rgba(27, 27, 27, .22);
    transform: translateY(-2px);
}

/* clear / cancel — a clearly visible pill under the form */
.cars1 .car-filter .filter-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
}

.cars1 .car-filter .filter-reset {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border: 1px solid #e0e0e0;
    border-radius: 30px;
    background: #f5b854;
    color: #1b1b1b;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 500;
    transition: all .2s ease;
}

.cars1 .car-filter .filter-reset i {
    font-size: 11px;
    color: #f5b754;
}

.cars1 .car-filter .filter-reset:hover {
    border-color: #1b1b1b;
    background: #1b1b1b;
    color: #fff;
}

.cars1 .car-filter .filter-reset:hover i {
    color: #fff;
}

@media (max-width: 991px) {
    .cars1 .car-filter .filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .cars1 .car-filter .filter-field.filter-submit {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .cars1 .car-filter .filter-form {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Car details page (templates/core/car-details.html)
   Navbar styling is shared with the Cars page rules above
   ========================================================================== */

.car-details.section-padding {
    padding-top: 60px;
}

/* car heading (was in the removed banner) */
.car-details .car-head {
    margin-bottom: 22px;
}

.car-details .car-head h6 {
    color: #f5b754;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 8px;
}

.car-details .car-head h1 {
    color: #1b1b1b;
    font-size: 40px;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}

/* single car image above "General Information" */
.car-details .car-hero-img {
    margin-bottom: 45px;
    border-radius: 18px;
    overflow: hidden;
}

.car-details .car-hero-img img {
    width: 100%;
    height: 440px;
    object-fit: cover;
    display: block;
}

/* details card sits next to the image, aligned to the top */
.car-details .sidebar-car {
    margin-top: 0;
}

@media (max-width: 991px) {
    .car-details .car-head h1 {
        font-size: 30px;
    }

    .car-details .car-hero-img img {
        height: 300px;
    }

    /* "Image Gallery" heading: ~31px visible space above (from the main
       image) and below (to the gallery), same as the card/FAQ gaps */
    .car-details .car-hero-img {
        margin-bottom: 23px;
    }

    .car-details .car-hero-img + .row h3 {
        margin-bottom: 26.5px;
    }

    /* FAQs -> "Related Cars" and "You May Also Like" -> first card:
       same ~31px visible gap */
    .car-details.section-padding:has(+ .related-cars) {
        padding-bottom: 19px;
    }

    .related-cars .col-md-12.mb-30 {
        margin-bottom: 12.5px !important;
    }

    /* last related-car card -> footer: ~60px (carousel already leaves
       15px under the card for its shadow) */
    .related-cars.section-padding {
        padding-bottom: 45px;
    }

    /* ~31px visible from the gallery thumbnails down to the card, same
       as the card-to-FAQ-heading gap below it */
    .car-details .sidebar-car {
        margin-top: 21px;
    }
}


/* ======= Floating WhatsApp button (templates/base.html, every page) =======
   Sits above the "back to top" circle in the bottom-right corner. */
.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 95px;
    z-index: 101;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    transition: transform .25s ease, background .25s ease;
}

.whatsapp-float:hover,
.whatsapp-float:focus {
    /* "display" repeated here: the theme's "span, a, a:hover" rule sets
       inline-block on hover, which knocked the icon out of the centre */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1da851;
    color: #fff;
    transform: scale(1.08);
}

@media (max-width: 575px) {
    .whatsapp-float {
        right: 20px;
        bottom: 95px;
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
}


/* ======= Booking modal: rental calculation card =======
   Shown by static/js/custom.js once Pick Up and Return Date are picked;
   the car's daily rate, name, and image come from the button's data attributes. */
.rental-summary {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    padding: 10px 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
    border: 1px solid #ebd9b5;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(200, 164, 92, 0.12);
    animation: rentalSummaryFadeIn 0.3s ease-out;
}

@keyframes rentalSummaryFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rental-summary.is-visible {
    display: flex;
}

/* Car thumbnail and name */
.rental-summary-car {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1 1 auto;
}

.rental-summary-thumb-wrap {
    flex-shrink: 0;
    width: 86px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #111;
    border: 1px solid #ebd9b5;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.rental-summary-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rental-summary-car-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.rental-summary-badge {
    font-size: 9px;
    font-weight: 700;
    color: #c8a45c;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.rental-summary-car-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #1b1b1b;
    margin: 0;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Divider between car info and stats */
.rental-summary-main-sep {
    width: 1px;
    height: 40px;
    background: #e5d7b5;
    flex-shrink: 0;
}

/* Calculation stats */
.rental-summary-stats {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
}

.rental-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 2px 14px;
}

.rental-summary-sep {
    width: 1px;
    height: 28px;
    background: #e5d7b5;
    flex-shrink: 0;
}

.rental-summary-label {
    font-size: 10px;
    color: #888;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.rental-summary-value {
    font-size: 14px;
    color: #1b1b1b;
    font-weight: 600;
    white-space: nowrap;
}

.rental-summary-total {
    color: #c8a45c;
    font-size: 16px;
    font-weight: 700;
}

/* stacked (car on top, stats below) until the modal gets its wide
   desktop size at 992px — below that it's only ~500px wide, too narrow
   for car + three stats side by side */
@media screen and (max-width: 991px) {
    .rental-summary {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px 14px;
    }
    .rental-summary-main-sep {
        display: none;
    }
    .rental-summary-car {
        padding-bottom: 8px;
        border-bottom: 1px solid #f0e2c8;
    }
    .rental-summary-thumb-wrap {
        width: 76px;
        height: 50px;
    }
    .rental-summary-car-title {
        font-size: 14px;
    }
    .rental-summary-stats {
        justify-content: space-around;
        width: 100%;
    }
    .rental-summary-item {
        padding: 2px 6px;
    }
}



/* ======= Home: Google Reviews ======= */
.greviews {
    background: #f7f7f7;
}

/* same 60px as the bottom of the "Cars By Type" section above, top and
   bottom alike, instead of .section-padding's 120px */
.greviews.section-padding {
    padding: 60px 0;
}

/* rating summary bar: G + 4.9 ★★★★★ "Based on N reviews" | Write a Review */
.greviews-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 18px 26px;
    background: #fff;
    border: 1px solid #ebd9b5;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.greviews-summary-score {
    display: flex;
    align-items: center;
    gap: 16px;
}

.greviews-google-g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #eee;
    font-family: Arial, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #4285f4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.greviews-summary-top {
    display: flex;
    align-items: center;
    gap: 10px;
}

.greviews-summary-rating {
    font-family: 'Outfit', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    color: #1b1b1b;
}

.greviews-stars {
    color: #f5b754;
    font-size: 15px;
    letter-spacing: 2px;
}

.greviews-summary-count {
    margin-top: 4px;
    font-size: 13px;
    color: #777;
}

.greviews-write-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 30px;
    background: #f5b754;
    color: #1b1b1b;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.greviews-write-btn:hover {
    background: #1b1b1b;
    color: #f5b754;
}

/* review cards */
.greviews-carousel .owl-stage {
    display: flex;
}

.greviews-carousel .owl-item {
    display: flex;
}

.greview-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 26px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #eee;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.greview-card-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.greviews-carousel .owl-item img.greview-avatar,
.greview-avatar {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

.greview-avatar-initial {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1b1b1b;
    color: #f5b754;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
}

.greview-author {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.greview-author-name {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #1b1b1b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.greview-author-name:hover {
    color: #f5b754;
}

.greview-when {
    font-size: 12px;
    color: #999;
}

.greview-card-g {
    width: 30px;
    height: 30px;
    font-size: 16px;
    box-shadow: none;
}

.greview-card-stars {
    margin: 16px 0 10px;
    font-size: 13px;
}

/* long reviews: first 6 lines only, so every card stays the same height */
.greview-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.greviews-carousel.owl-theme .owl-dots {
    margin-top: 24px;
}

.greviews-carousel.owl-theme .owl-dots .owl-dot.active span,
.greviews-carousel.owl-theme .owl-dots .owl-dot:hover span {
    background: #f5b754;
}

.greviews-attribution {
    margin: 18px 0 0;
    text-align: center;
    font-size: 12px;
    color: #999;
}

.greviews-attribution a {
    color: #c8a45c;
}

@media (max-width: 575px) {
    .greviews-summary {
        flex-direction: column;
        text-align: center;
        padding: 18px;
    }

    .greviews-write-btn {
        width: 100%;
        justify-content: center;
    }
}

/* footer: Google rating badge under the logo */
.footer-rating {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 20px;
    padding: 14px 16px;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    width: fit-content;
}

.footer-rating-g {
    width: 36px;
    height: 36px;
    font-size: 19px;
    box-shadow: none;
}

.footer-rating-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footer-rating-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-rating-score {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.footer-rating-stars {
    font-size: 12px;
}

.footer-rating-count {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

.footer .footer-rating-link {
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #f5b754;
    transition: color 0.2s ease;
}

.footer .footer-rating-link:hover {
    color: #fff;
}

.footer-rating-link i {
    font-size: 11px;
    margin-left: 4px;
}

/* logo + badge in one grid cell */
.footer-brand-col {
    position: relative;
    min-width: 0;
}

/* desktop: badge hangs below the logo into the empty cell under it, so
   the contact row keeps its height and the columns don't move down.
   The cell stretches to the full contact-row height, so "top: 100%" is the
   row's bottom; + 30px (.first-footer-inner margin) + 38px (widget top
   padding) puts the badge on the same line as the Quick Links heading. */
@media (min-width: 1200px) {
    .footer-brand-col {
        align-self: stretch;
    }

    .footer-brand-col .footer-rating {
        position: absolute;
        top: 100%;
        left: 20px;
        margin-top: 68px;
    }
}

/* tablet: logo sits in a narrow centred column — badge hangs below it,
   compact and stacked, into the empty cell under the logo (same idea as
   desktop, so the link columns don't get pushed down) */
@media (min-width: 768px) and (max-width: 1199px) {
    /* cell stretches to the contact row's full height, so "top: 100%" is
       the row's bottom; + 30px (.first-footer-inner margin) + the widget's
       top padding (26px below 992px, 38px above) lines the badge up with
       the Quick Links heading — same idea as desktop */
    .footer-brand-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
    }

    .footer-brand-col .footer-rating {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        width: 124px;
        margin-top: 56px;
        padding: 12px 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
    }

    .footer-brand-col .footer-rating-g {
        display: none;
    }

    .footer-brand-col .footer-rating-body {
        align-items: center;
    }

    .footer-brand-col .footer-rating-top {
        flex-direction: column;
        gap: 4px;
    }

    .footer-brand-col .footer-rating-count {
        font-size: 11px;
        line-height: 1.4;
    }

    .footer .footer-brand-col .footer-rating-link {
        font-size: 12px;
        white-space: nowrap;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .footer-brand-col .footer-rating {
        margin-top: 68px;
    }
}

/* phones: everything stacked and centred — badge right under the logo */
@media (max-width: 767px) {
    .footer-brand-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        align-self: center;
    }

    .footer-brand-col .footer-rating {
        margin-top: 16px;
    }

    /* custom-overrides.css gives the logo a desktop left padding (20px on
       the link, 5px on the text) — in this centred stack it shoved the
       logo right of the icons below; drop it so all share one centre line */
    .footer .first-footer-inner .footer-brand,
    .footer .first-footer-inner .footer-brand .logo-text {
        padding-left: 0;
    }
}


/* ======= Website chatbot (templates/partials/chatbot.html) =======
   Bottom-left corner — the right side already has WhatsApp + back-to-top. */
.chatbot-toggle {
    position: fixed;
    left: 30px;
    bottom: 30px;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: #f5b754;
    color: #1b1b1b;
    font-size: 24px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.25s ease;
}

.chatbot-toggle:hover {
    transform: scale(1.08);
}

.chatbot-toggle-close,
.chatbot.is-open .chatbot-toggle-open {
    display: none;
}

.chatbot.is-open .chatbot-toggle-close {
    display: inline;
}

.chatbot-panel {
    position: fixed;
    left: 30px;
    bottom: 100px;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    width: 370px;
    height: 520px;
    max-height: calc(100vh - 130px);
    border-radius: 18px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.chatbot-panel[hidden] {
    display: none;
}

.chatbot-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #1b1b1b;
}

.chatbot-header-logo {
    width: 38px;
    height: 38px;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid rgba(223, 177, 98, 0.4);
    object-fit: contain;
}

.chatbot-header-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.chatbot-header-title {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

.chatbot-header-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.6);
}

.chatbot-new {
    flex-shrink: 0;
    padding: 5px 10px;
    border: 1px solid #f5b754;
    border-radius: 20px;
    background: transparent;
    color: #f5b754;
    font-size: 11px;
    cursor: pointer;
}

.chatbot-new:hover {
    background: #f5b754;
    color: #1b1b1b;
}

.chatbot-messages {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    overflow-y: auto;
    background: #f7f7f7;
}

.chatbot-msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.5;
    word-wrap: break-word;
}

.chatbot-msg-bot {
    align-self: flex-start;
    background: #fff;
    color: #333;
    border: 1px solid #eee;
    border-bottom-left-radius: 4px;
}

.chatbot-msg-bot a {
    color: #c8a45c;
    text-decoration: underline;
    word-break: break-all;
}

.chatbot-msg-user {
    align-self: flex-end;
    background: #f5b754;
    color: #1b1b1b;
    border-bottom-right-radius: 4px;
}

/* "typing" bubble: three dots bouncing one after another */
.chatbot-msg.is-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 14px 16px;
}

.chatbot-msg.is-typing span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #c8a45c;
    animation: chatbotTyping 1.2s ease-in-out infinite;
}

.chatbot-msg.is-typing span:nth-child(2) {
    animation-delay: 0.15s;
}

.chatbot-msg.is-typing span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chatbotTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .chatbot-msg.is-typing span {
        animation: none;
        opacity: 0.7;
    }
}

.chatbot-form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #eee;
    background: #fff;
}

/* grows with the text (chatbot.js fitInput) up to ~5 lines, then scrolls */
.chatbot-form textarea {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    max-height: 120px;
    margin: 0;
    padding: 11px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 22px;
    background: #f7f7f7;
    font-size: 14px;
    line-height: 20px;
    resize: none;
    overflow-y: auto;
}

.chatbot-form button {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #1b1b1b;
    color: #f5b754;
    cursor: pointer;
}

@media (max-width: 575px) {
    .chatbot-toggle {
        left: 20px;
        bottom: 20px;
        width: 52px;
        height: 52px;
        font-size: 21px;
    }

    .chatbot-panel {
        left: 12px;
        right: 12px;
        bottom: 84px;
        width: auto;
        height: calc(100vh - 110px);
    }
}


/* ======= Home banner: "Video featured" slide =======
   Fills the slide like the photo did; under the dark overlay (z-index 1)
   and the caption (z-index 9). */
.slider-fade .item .hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Tablets (768–991px): the banner is a fixed 400px tall there
   (custom-overrides.css), ~2.5:1 at this width — "cover" then cut a 16:9
   video top and bottom and zoomed it in. With a video in the banner, size
   the banner 16:9 instead so the video shows whole, at its own shape. */
@media (min-width: 768px) and (max-width: 991px) {
    .header.slider-fade:has(.hero-video),
    .header.slider-fade:has(.hero-video) .owl-item {
        height: 56.25vw;
    }
}

/* chatbot: picture cards under a reply (static/js/chatbot.js addCarCards) */
.chatbot-cars {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-self: flex-start;
    width: 85%;
}

.chatbot-car {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px;
    border: 1px solid #eee;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.chatbot-car:hover {
    /* "display" repeated here: the theme's "span, a, a:hover" rule sets
       inline-block on hover, which pushed the name and price under the photo */
    display: flex;
    border-color: #f5b754;
}

.chatbot-car img,
.chatbot-car-noimg {
    flex-shrink: 0;
    width: 86px;
    height: 58px;
    border-radius: 8px;
    object-fit: cover;
    background: #1b1b1b;
}

.chatbot-car-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5b754;
}

.chatbot-car-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chatbot-car-name {
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    color: #1b1b1b;
}

.chatbot-car-price {
    font-size: 13px;
    font-weight: 600;
    color: #c8a45c;
}

.chatbot-car-price small {
    font-weight: 400;
    color: #999;
}

/* Dynasty Prestige orbit logo (templates/partials/dp-orbit-logo.html) */
.dp-orbit-logo {
  width: 56px;
  height: 56px;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
}

.dp-logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 50%;
  filter: drop-shadow(0 0 3px #c99b32);
}

.dp-orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .dp-orbit animateMotion {
    animation: none;
  }
}

/* Logo text (templates/partials/dp-logo-text.html) - next to the orbit logo
   in the header and footer */
/* :hover too - the theme's global "a:hover { display: inline-block }"
   would otherwise drop the text under the logo on hover */
.footer-logo-link,
.footer-logo-link:hover {
  display: inline-flex;
  align-items: center;
  gap: 11px;
}

.dp-logo-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}

.dp-logo-name {
  font-family: 'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 3px;
  white-space: nowrap;
  background: linear-gradient(110deg, #d4a017 0%, #f5c542 38%, #fffbe8 50%, #f5c542 62%, #d4a017 100%);
  background-size: 250% auto;
  background-position: 120% center;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.dp-logo-sub {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 7px;
}

.dp-logo-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 197, 66, 0.25) 0%, #f5c542 40%, #fffbe8 50%, #f5c542 60%, #f5c542 100%);
  background-size: 250% 100%;
  transform-origin: right center;
}

.dp-logo-line:last-child {
  background: linear-gradient(90deg, #f5c542 0%, #f5c542 40%, #fffbe8 50%, #f5c542 60%, rgba(245, 197, 66, 0.25) 100%);
  background-size: 250% 100%;
  transform-origin: left center;
}

.dp-logo-city {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 6px;
  margin-right: -6px;
  color: #ffffff;
}

/* Header: the navbar is grey, not black like the footer, so the same gold
   reads duller there - a brighter gold + a soft dark halo for contrast. */
.logo-wrapper .dp-logo-name {
  background-image: linear-gradient(110deg, #f2b705 0%, #ffd23f 38%, #fffbe8 50%, #ffd23f 62%, #f2b705 100%);
}

.logo-wrapper .dp-logo-line {
  background-image: linear-gradient(90deg, rgba(255, 210, 63, 0.35) 0%, #ffd23f 40%, #fffbe8 50%, #ffd23f 60%, #ffd23f 100%);
}

.logo-wrapper .dp-logo-line:last-child {
  background-image: linear-gradient(90deg, #ffd23f 0%, #ffd23f 40%, #fffbe8 50%, #ffd23f 60%, rgba(255, 210, 63, 0.35) 100%);
}

@keyframes dpGoldGlowHeader {
  0%, 100% { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 0 rgba(255, 210, 63, 0)); }
  50% { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 7px rgba(255, 210, 63, 0.7)); }
}

@keyframes dpTextShine {
  0% { background-position: 120% center; }
  60%, 100% { background-position: -20% center; }
}

@keyframes dpLineShine {
  0% { background-position: 120% 0; }
  60%, 100% { background-position: -20% 0; }
}

@keyframes dpGoldGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(245, 197, 66, 0)); }
  50% { filter: drop-shadow(0 0 6px rgba(245, 197, 66, 0.6)); }
}

@keyframes dpWhiteGlow {
  0%, 100% { text-shadow: 0 0 0 rgba(255, 255, 255, 0); }
  50% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.75); }
}

@keyframes dpLineGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes dpFadeUp {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 991px) {
  .dp-logo-name {
    font-size: 15px;
    letter-spacing: 2px;
  }

  .dp-logo-city {
    font-size: 9px;
    letter-spacing: 4px;
    margin-right: -4px;
  }

  .dp-logo-sub {
    margin-top: 5px;
  }
}

/* Mobile + tablet + small laptop footer: name under the logo - below 1200px
   the footer's logo column is too narrow for logo + name side by side.
   (The header keeps them side by side - stacked, they don't fit in the
   85px mobile navbar.) */
@media (max-width: 1199px) {
  .footer-logo-link,
  .footer-logo-link:hover {
    flex-direction: column;
    /* matches the contact cards' icon -> "Call us" spacing (12px box gap
       + the h6's half line-height) */
    gap: 15px;
  }
}

/* 992-1199px: the footer's logo column is only 120px wide */
@media (min-width: 992px) and (max-width: 1199px) {
  .footer-logo-link .dp-logo-name {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .footer-logo-link .dp-logo-city {
    font-size: 7px;
    letter-spacing: 2px;
    margin-right: -2px;
  }
}

/* tablet: the footer's logo column is narrow next to the 3 contact cards */
@media (min-width: 768px) and (max-width: 991px) {
  .footer-logo-link .dp-logo-name {
    font-size: 11px;
    letter-spacing: 1px;
  }

  .footer-logo-link .dp-logo-city {
    font-size: 8px;
    letter-spacing: 3px;
    margin-right: -3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dp-logo-name,
  .logo-wrapper .dp-logo-name,
  .dp-logo-line,
  .dp-logo-city {
    animation: none;
  }
}

/* Real car logo (templates/partials/dp-realcar-logo.html). Positions are % of
   the base image, so it scales to any width. */
.dp-realcar-logo {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.dp-realcar-logo .dp-rc-base {
  display: block;
  width: 100%;
  height: auto;
}

/* the star spins in place like a wheel (wrapper spins, img glows);
   origin = the star's own centre, a bit below its box centre */
.dp-realcar-logo .dp-rc-star-orbit {
  position: absolute;
  left: 21.93%;
  top: 2.1%;
  width: 8.3%;
  transform-origin: 49.1% 53.7%;
  animation: dpStarSpin 6s linear infinite;
}

.dp-realcar-logo .dp-rc-star {
  display: block;
  width: 100%;
  height: auto;
  animation: dpStarTwinkle 1.4s ease-in-out infinite;
}

.dp-realcar-logo .dp-rc-light {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  mix-blend-mode: screen;
}

/* headlight - white/blue glow */
.dp-realcar-logo .dp-rc-head {
  left: 37.61%;
  top: 51.06%;
  width: 6.76%;
  height: 12.52%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 1) 0%, rgba(210, 235, 255, 0.75) 25%, rgba(160, 205, 255, 0.25) 50%, transparent 70%);
  animation: dpLightBlink 1.6s ease-in-out infinite;
}

/* tail-light - red glow */
.dp-realcar-logo .dp-rc-tail {
  left: 97.68%;
  top: 42.84%;
  width: 5.26%;
  height: 14.79%;
  background: radial-gradient(ellipse at center, rgba(255, 90, 90, 1) 0%, rgba(255, 20, 20, 0.7) 30%, rgba(255, 0, 0, 0.2) 55%, transparent 70%);
  animation: dpLightBlink 1.6s ease-in-out infinite;
}

/* side indicator - amber, on/off like a real turn signal */
.dp-realcar-logo .dp-rc-ind {
  left: 96.04%;
  top: 52.71%;
  width: 5.26%;
  height: 7.97%;
  background: radial-gradient(ellipse at center, rgba(255, 200, 60, 1) 0%, rgba(255, 150, 0, 0.75) 35%, rgba(255, 120, 0, 0.2) 55%, transparent 70%);
  animation: dpIndicatorBlink 1s steps(1, end) infinite;
}

/* wheels: cut-out round layers that turn slowly over the static car.
   The car faces left, so driving forward turns them anticlockwise. */
.dp-realcar-logo .dp-rc-wheel {
  position: absolute;
  width: 9.313%;
  height: auto;
  animation: dpWheelTurn 4s linear infinite;
}

.dp-realcar-logo .dp-rc-wheel-front {
  left: 42.224%;
  top: 47.797%;
}

.dp-realcar-logo .dp-rc-wheel-rear {
  left: 84.075%;
  top: 47.483%;
}

/* indicator on the side mirror - amber, in step with the rear indicator */
.dp-realcar-logo .dp-rc-mirror {
  left: 58.09%;
  top: 34.97%;
  width: 3.5%;
  height: 6.5%;
  background: radial-gradient(ellipse at center, rgba(255, 205, 70, 1) 0%, rgba(255, 150, 0, 0.8) 35%, rgba(255, 120, 0, 0.2) 55%, transparent 70%);
  animation: dpIndicatorBlink 1s steps(1, end) infinite;
}

@keyframes dpWheelTurn {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

@keyframes dpStarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* clear blink: dims right down, then flashes bright with a strong gold glow */
@keyframes dpStarTwinkle {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 3px rgba(255, 215, 90, 0.7)); }
  35% { opacity: 0.15; filter: drop-shadow(0 0 0 rgba(255, 215, 90, 0)); }
  55% { opacity: 1; filter: drop-shadow(0 0 12px rgba(255, 230, 130, 1)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.9)) brightness(1.45); }
  75% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255, 215, 90, 0.8)); }
}

@keyframes dpLightBlink {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes dpIndicatorBlink {
  0% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .dp-realcar-logo .dp-rc-star-orbit,
  .dp-realcar-logo .dp-rc-star,
  .dp-realcar-logo .dp-rc-wheel,
  .dp-realcar-logo .dp-rc-light {
    animation: none;
  }
}

/* Real car logo as the site logo: header + footer sizes */
/* header logo = same size as the footer logo at every breakpoint;
   lifted 6px above the menu's centre line */
.logo-wrapper .dp-realcar-logo {
  width: 240px;
  transform: translateY(-6px);
}

@media (min-width: 992px) and (max-width: 1199px) {
  .logo-wrapper .dp-realcar-logo {
    width: 200px;
  }
}

.footer-logo-link .dp-realcar-logo {
  width: 240px;
}

@media (max-width: 1199px) {
  /* 992-1199 and tablets: the footer's logo column is only ~120px wide */
  .footer-logo-link .dp-realcar-logo {
    width: 118px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .logo-wrapper .dp-realcar-logo {
    width: 170px;
  }
}

@media (max-width: 767px) {
  .logo-wrapper .dp-realcar-logo {
    width: 200px;
  }
}

/* tablet + mobile: the logo already sits 5px high here (wrapper padding),
   so -1px gives the same 6px lift as desktop */
@media (max-width: 991px) {
  .logo-wrapper .dp-realcar-logo {
    transform: translateY(-1px);
  }
}

@media (max-width: 767px) {
  .footer-logo-link .dp-realcar-logo {
    width: 200px;
  }
}

/* Desktop footer: the logo (80px) is taller than the contact icons (60px);
   lift it so it sits centred on the icons' row. translateY keeps the layout. */
@media (min-width: 1200px) {
  .footer-logo-link .dp-realcar-logo {
    transform: translateY(-20px);
  }
}

/* 992-1199px footer: the logo column is only 120px, but there's ~100px of
   free space before the first contact card's content - let the logo use it. */
@media (min-width: 992px) and (max-width: 1199px) {
  /* start at the column's left edge instead of centring (centring a logo
     wider than its column pushed it off-screen on the left) */
  .footer-brand-col {
    align-items: flex-start;
  }

  .footer-logo-link,
  .footer-logo-link:hover {
    align-items: flex-start;
  }

  .footer-logo-link .dp-realcar-logo {
    width: 200px;
    transform: translateY(-4px);
  }
}

/* 768-991px footer: same narrow 120px logo column; the first contact card's
   text starts at ~203px, so a 170px logo still leaves a 20px gap. */
@media (min-width: 768px) and (max-width: 991px) {
  .footer-brand-col {
    align-items: flex-start;
  }

  .footer-logo-link,
  .footer-logo-link:hover {
    align-items: flex-start;
  }

  .footer-logo-link .dp-realcar-logo {
    width: 170px;
  }
}

/* Shield logo (img/dynasty-prestige-shield.png, cut from Dynasty_Prestige_Logo.png)
   in the header and footer. Sized by height; the shield is ~0.9 as wide as tall. */
.dp-shield-logo {
  display: block;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.logo-wrapper .dp-shield-logo {
  height: 62px;
}

.footer-logo-link .dp-shield-logo {
  height: 62px;
}

@media (max-width: 991px) {
  .logo-wrapper .dp-shield-logo {
    height: 50px;
  }
}

@media (max-width: 767px) {
  /* same size as on tablet (60px, the contact icons' size) */
  .footer-logo-link .dp-shield-logo {
    height: 60px;
  }
}

/* shield + text: centre on the menu row (tablet/mobile header) and on the
   contact icons (768-1199 footer, where the name sits under the shield) */
@media (max-width: 991px) {
  .logo-wrapper .logo {
    position: relative;
    top: 5px;
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .footer-logo-link {
    position: relative;
    top: -21px;
  }
}

/* 768-1199 footer: shield centred above the name (the column stays left-aligned) */
@media (min-width: 768px) and (max-width: 1199px) {
  .footer-logo-link,
  .footer-logo-link:hover {
    align-items: center;
  }
}

/* 768-1199 footer: lay the logo out like the contact cards - a 60px shield
   level with the 60px icons, the name level with the cards' titles */
@media (min-width: 768px) and (max-width: 1199px) {
  .footer-logo-link {
    top: 0;
  }

  .footer-logo-link .dp-shield-logo {
    height: 60px;
  }

  .footer-logo-link,
  .footer-logo-link:hover {
    gap: 17px;
  }
}

/* shield a little wider than its file's ratio (~12%) */
.dp-shield-logo {
  object-fit: fill;
}

.logo-wrapper .dp-shield-logo,
.footer-logo-link .dp-shield-logo {
  width: 58px;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .footer-logo-link .dp-shield-logo {
    width: 57px;
  }
}

@media (max-width: 991px) {
  .logo-wrapper .dp-shield-logo {
    width: 47px;
  }
}

@media (max-width: 767px) {
  .footer-logo-link .dp-shield-logo {
    width: 57px;
  }
}

/* name + lines: the same flat gold as the footer's round contact icons (#f5b754) */
.dp-logo-name,
.logo-wrapper .dp-logo-name {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #f5b754;
  -webkit-text-fill-color: #f5b754;
}

.dp-logo-line,
.dp-logo-line:last-child,
.logo-wrapper .dp-logo-line,
.logo-wrapper .dp-logo-line:last-child {
  background: #f5b754;
}