@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #758E89;
    --sec-color: #3B4A48;
    --text-color: #EBEFEE;
    --number-color: #323D3C;
    --font-primary: 14px;
    --font-base: "Saira", sans-serif;
}

body {
    font-family: var(--font-base) !important;
}

.wrapper {
    position: relative;
    overflow: hidden;
    /* height: 100dvh;
    width: 100%;
    background-color: var(--primary-color); */
    /* scroll-behavior: smooth; */
}

.main-header {
    position: absolute;
    width: 100%;
    z-index: 100;
    top: 64px;
    padding: 0 64px 0;
    /* background: red; */
    height: 50px;
    animation-name: transform-header;
    animation-duration: 1s;
    transition: all .3s ease-in-out;
}

.main-header.main-header-sticky {
    position: fixed;
    top: 0;
    padding: 20px;
    height: 90px;
    background: var(--number-color);
    box-shadow: var(--number-color) 0px 3px 8px;
}

.main-header.blog-header {
    position: fixed;
    top: 0;
    padding: 20px;
    height: 90px;
    background: var(--number-color);
    box-shadow: var(--number-color) 0px 3px 8px;
}

@keyframes transform-header {
    from {
        transform: translateY(-200%);
    }

    to {
        transform: translateY(0);
    }
}

header nav {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
}

header nav .logo a {
    cursor: pointer;
    width: 145px;
    display: block;
    height: 50px;
}

header nav .logo a img {
    width: 100%;
}

header nav .nav-menu {
    display: flex;
    gap: 20px;
    list-style: none;
}

header nav .nav-menu li a {
    color: var(--text-color);
    text-decoration: none;
    position: relative;
    padding-bottom: 5px;
    transition: color .3s ease-in-out, font-weight .3s ease-in-out;
    font-size: var(--font-primary);
    cursor: pointer;
}

header nav .nav-menu li a:hover {
    color: white;
    font-weight: 600;
}

header nav .nav-menu li a::before {
    position: absolute;
    content: '';
    height: 1px;
    width: 100%;
    /* background-color: var(--text-color); */
    transition: background-color .3s ease-in-out;
    bottom: 0;
}

header nav .nav-menu li a:hover:before {
    background-color: var(--text-color);
}

header nav .btn-nav {
    height: 100%;
    width: 204px;
}

header nav .btn-nav button {
    height: 100%;
    width: 100%;
    border: none;
    font-size: var(--font-primary);
    background-color: var(--sec-color);
    color: var(--text-color);
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--number-color) 0px 3px 8px;
    font-family: var(--font-base);
}

header nav .btn-nav button::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    transition: background-color .3s ease-in-out, width .3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;

}

header nav .btn-nav button:hover::before {
    content: 'get contact';
    color: var(--number-color);
    background-color: white;
    width: 100%;
}

header nav .btn-hamburger {
    width: 62px;
    height: 100%;
}

header nav .btn-hamburger button {
    width: 100%;
    height: 100%;
    display: flex;
    border: 1px solid var(--sec-color) !important;
    cursor: pointer;
}

header nav .btn-hamburger button img {
    height: 100%;
}


header nav .menu-responsive {
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100dvh;
    background-color: var(--number-color);
    transition: all .3s ease-in-out;
}

header nav .menu-responsive .menu-responsive-title {
    height: 62px;
    border-bottom: 1px solid var(--sec-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color);
    padding-left: 20px;
}

header nav .menu-responsive .menu-responsive-title button {
    width: 62px;
    height: 100%;
    background-color: var(--sec-color);
    border: none;

}

header nav .menu-responsive .menu-responsive-body {
    height: calc(100dvh - 62px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

}

header nav .menu-responsive .menu-responsive-body .menu-responsive-item {
    margin-left: 20px;
    list-style: none;
}

header nav .menu-responsive .menu-responsive-body .menu-responsive-item li a {
    display: flex;
    text-decoration: none;
    color: var(--text-color);
    padding: 16px 0;
    border-bottom: 1px solid var(--sec-color);
}

header nav .menu-responsive .menu-responsive-body .btn-nav-responsive {
    margin: 20px;
    display: flex;
}

header nav .menu-responsive .menu-responsive-body .btn-nav-responsive button {
    width: 100%;
    padding: 15px;
    background: var(--sec-color);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    color: var(--text-color);
    text-transform: uppercase;
    font-family: var(--font-base);

}

/* --------------------------------------------style home page----------------------------------- */
.home-container {
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.home-container .bg-shape-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 227px;
    display: flex;
    z-index: 11;
    animation-name: shape-all;
    animation-duration: 1s;
}


.home-container .bg-shape-left img {
    height: 100%;
    width: 100%;
}

.home-container .bg-shape-center {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    z-index: 10;
    animation-name: shape-all;
    animation-duration: 1s;
}

@keyframes shape-all {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.home-container .bg-shape-center img {
    width: 100%;
    height: 100%;
}


.home-container .car-title {
    position: absolute;
    left: 133px;
    top: -30%;
    transform: translateY(-30%);
    color: var(--text-color);
    transition: transform 2s ease-in-out, left 2s ease-in-out, top 2s ease-in-out;
    z-index: 15;
}

.home-container .car-title.active-car-title {
    left: 133px;
    top: 30%;
    transform: translateY(-30%);
}


.home-container .car-title.active-car-title-responsive {
    left: 20px;
    top: 20%;
    transform: translateY(-20%);
}

.home-container .car-title.out-car-title {
    left: -100%;
    top: 30%;
    transform: translateY(-30%);
}

.home-container .car-title.out-car-title-responsive {
    left: -100%;
    top: 20%;
    transform: translateY(-20%);
}



.home-container .car-title h1 {
    font-size: 68px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.home-container .car-title p {
    font-size: var(--font-primary);
    display: flex;
    gap: 10px;
    margin-left: 20px;
}

.home-container .car-title .btn button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 36px;
    background: var(--number-color);
    border: none;
    gap: 5px;
    margin-top: 20px;
    color: var(--text-color);
    font-family: var(--font-base);
}

.home-container .home-banner-index {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 13;
    animation-name: animation-home-banner-index;
    animation-duration: 2s;
}


@keyframes animation-home-banner-index {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.home-container .home-banner-index .number-position {
    display: flex;
    align-items: end;
    gap: 20px;
    height: 95px;
}

.home-container .home-banner-index .number-position .number-position-left {
    position: relative;
    height: 100%;
    width: 82px;
    overflow: hidden;
}

.home-container .home-banner-index .number-position .number-position-left h1 {
    /* 758E89 */
    color: #758e8937;
    font-size: 60px;
}

.home-container .home-banner-index .number-position .number-position-left h1 .number-position-index {
    position: absolute;
    transform: translateY(100%);
    transition: transform 2s ease-in-out;
    z-index: 2;
}

.home-container .home-banner-index .number-position .number-position-left h1 .number-position-index.active-number-position-index {
    transform: translateY(0);
}

.home-container .home-banner-index .number-position .number-position-left h1 .number-position-index.out-number-position-index {
    transform: translateY(-100%);
}

.home-container .home-banner-index .number-position .number-position-right {
    color: #758e8937;
    height: 100%;
    display: flex;
    align-items: center;
}

.home-container .home-banner-index .number-position .number-position-right span {
    font-size: 22px;
    margin-top: 22px;
}

.home-container .home-banner-index .position-btn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
}

.home-container .home-banner-index .position-btn .btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    background-color: var(--text-color);
    padding: 10px;
    border: none;

}

.home-container .home-banner-index .position-btn .btn.btn-active-box-shadow {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.home-container .car-position {
    position: absolute;
    bottom: 20%;
    left: 102px;
    height: 228px;
    transform: translateY(-10%);
    color: #839A95;
    z-index: 14;
    animation-name: animation-position;
    animation-duration: 2s;
}


@keyframes animation-position {
    from {
        transform: translateX(-120%);
    }

    to {
        transform: translateX(0);
    }
}

.home-container .car-position .car-position-number-all {
    position: relative;
    width: 100%;
    height: 100%;
    width: 235px;
    overflow: hidden;
}

.home-container .car-position .car-position-number-all h1 {
    font-size: 190px;
    /* position: relative; */
    /* overflow: hidden; */
}

.home-container .car-position .car-position-number-all h1 .car-position-number {
    position: absolute;
    transform: translateY(100%);
    transition: transform 2s ease-in-out;
    z-index: 2;
}

.home-container .car-position .car-position-number-all h1 .car-position-number.active-car-position-number {
    transform: translateY(0);
}

.home-container .car-position .car-position-number-all h1 .car-position-number.out-car-position-number {
    transform: translateY(-100%);

}



.home-container .car-image {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 50%;
    height: 60%;
    display: flex;
    /* overflow: hidden; */
    z-index: 14;
}

.home-container .car-image img {
    position: absolute;
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    transform: translateX(200%);
    transition: transform 2s ease-in-out, bottom 2s ease-in-out;
}


.home-container .car-image img.active {
    transform: translateX(0);
    bottom: 0;
}

.home-container .car-image img.out {
    bottom: -500%;
    transform: translateX(0);
}


.home-container .car-info {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 1s ease-in-out;
    z-index: 15;
    display: flex;
    animation-name: transform-info;
    animation-duration: 1s;
}

@keyframes transform-info {
    from {
        left: 50%;
        transform: translate(-50%, 100%);
    }

    to {
        left: 50%;
        transform: translate(-50%, 0);
    }
}

.home-container .car-info.active-car-info {
    opacity: 1;
}

.home-container .car-info.out-car-info {
    opacity: 0;
}

.home-container .car-info .car-info-card {
    text-align: center;
    padding: 0 20px;
    position: relative;
    border-left: 1px solid #323d3c24;
    color: var(--number-color);
}

.home-container .car-info .car-info-card:last-child {
    border-right: 1px solid #323d3c24;
}

.home-container .car-sub {
    position: absolute;
    right: 64px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 15;
    animation-name: transform-sub;
    animation-duration: 2s;
}

@keyframes transform-sub {
    from {
        top: 50%;
        transform: translate(120%, -50%);
    }

    to {
        top: 50%;
        transform: translate(0, -50%);
    }
}

.home-container .car-sub .car-sub-items {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 3px
}

.home-container .car-sub .car-sub-items .car-sub-item {
    padding: 10px;
    background-color: var(--text-color);
    transition: background-color 1s ease-in-out;
    cursor: pointer;
    width: 100%;

}

.home-container .car-sub .car-sub-items .car-sub-item.active-car-sub-item {
    background-color: var(--primary-color);
}

.home-container .car-sub .car-sub-items .car-sub-item.out-car-sub-item {
    background-color: var(--text-color);
}

.home-container .car-sub .car-sub-items .car-sub-item .car-sub-image-number {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: #fff; */
    color: var(--number-color);
}

.home-container .car-sub .car-sub-items .car-sub-item.active-car-sub-item .car-sub-image-number h1 {
    color: var(--text-color);
}

.home-container .car-sub .car-sub-items .car-sub-item .car-sub-image-number h1 {
    font-weight: 300;
}

.home-container .car-sub .car-sub-items .car-sub-item .car-sub-image {
    width: 0;
    height: 100%;
    transition: width 1s ease-in-out;
}

.home-container .car-sub .car-sub-items .car-sub-item.active-car-sub-item .car-sub-image {
    width: 100%;
    height: 100%;
}

.home-container .car-sub .car-sub-items .car-sub-item.out-car-sub-item .car-sub-image {
    width: 0;
    height: 100%;
}

.home-container .car-sub .car-sub-items .car-sub-item .car-sub-image img {
    width: 100%;
    display: flex;
    height: 100%;
}


.scroll-down {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 12;
    width: 227px;
    height: 110px;
    background-color: var(--number-color);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: var(--text-color);
    animation-name: transform-scroll;
    animation-duration: 1s;
    border: none;
    cursor: pointer;
    font-size: var(--font-primary);
    text-decoration: none;
}

@keyframes transform-scroll {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


.home-container .home-banner-btn-all {
    position: absolute;
    right: 64px;
    bottom: 50px;
    z-index: 15;
    border-left: 1px solid #323d3c24;
    border-right: 1px solid #323d3c24;
    padding: 0 3px;
    animation-name: anime-vehicles-detail-banner-btn-all;
    z-index: 13;
    animation-duration: 2s;
}


.home-container .home-banner-btn-all .hover-effect {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    color: var(--number-color);
    font-size: var(--font-primary);
    overflow: hidden;
    background-color: transparent;
    border: none;
    z-index: 1;
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: var(--font-base);
}

.home-container .home-banner-btn-all .hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--sec-color);
    z-index: -1;
    transition: all 0.4s ease;
}

.home-container .home-banner-btn-all .hover-effect:hover {
    color: var(--text-color);
}

.home-container .home-banner-btn-all .hover-effect:hover img {
    filter: invert(1);
}

.home-container .home-banner-btn-all .hover-effect:hover::before {
    left: 0;
}

/* ---------------------------------------About page Style-------------------------------------------- */
.about-container {
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.about-container .about-bg-shape-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 227px;
    height: 188px;
    animation-name: shape-all;
    animation-duration: 1s;
    z-index: 11;
}

.about-container .about-bg-shape-left img {
    width: 100%;
    height: 100%;
}


.about-container .about-bg-shape-center {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    animation-name: shape-all;
    animation-duration: 1s;
    z-index: 10;
}

.about-container .about-bg-shape-center img {
    width: 100%;
}

.about-container .about-banner-detail {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 64px;
    width: 550px;
    z-index: 13;
    display: flex;
    flex-direction: column;
    gap: 20px;
    animation-name: anime-about-banner-detail;
    animation-duration: 2s;
}

.about-container .about-banner-detail p {
    font-size: 16px;
    color: var(--number-color);
}

.about-container .about-banner-detail h1 {
    font-size: 46px;
    color: var(--number-color);
}

.about-container .about-banner-img {
    width: 690px;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    z-index: 13;
    animation-name: about-banner-img;
    animation-duration: 2s;
}

.about-container .about-banner-img img {
    width: 100%;
}

.about-section-1 {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.about-section-1 .about-section-left {
    background-color: var(--number-color);
    color: var(--text-color);
    padding: 0 128px;
    display: flex;
    flex-direction: column;
    gap: 45px;
    /* align-items: center; */
    justify-content: center;
}

.about-section-1 .about-section-left p {
    font-size: var(--font-primary);
}

.about-section-1 .about-section-right {
    width: 100%;
    position: relative;
}

.about-section-1 .about-section-right .about-section-right-top {
    height: 40%;
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: end;
}

.about-section-1 .about-section-right .about-section-right-top h1 {
    margin-right: 64px;
    font-size: 46px;
    color: var(--text-color);
    font-weight: 300;
}

.about-section-1 .about-section-right .about-section-right-img {
    height: 60%;
    width: 100%;
    position: relative;
    display: flex;
}

.about-section-1 .about-section-right .about-section-right-img img {
    width: 75%;
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);

}

.about-section-2 {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
    padding: 0 128px;
}

.about-section-2 h1 {
    font-size: 46px;
    color: var(--number-color);
    font-weight: 300;
    margin-bottom: 10px;
}

.about-section-2 .about-section-2-title {
    width: 60%;
    font-size: var(--font-primary);
    color: var(--number-color);
}

.about-section-2 .about-cards {
    margin-top: 50px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.about-section-2 .about-cards .about-card {
    background-color: var(--primary-color);
    padding: 30px 25px;
    color: var(--text-color);
}

.about-section-2 .about-cards .about-card h4 {
    margin-bottom: 20px;
    font-weight: 500;
}

.about-section-2 .about-cards .about-card p {
    font-weight: 100;
}

.about-section-3 {
    height: 100vh;
    width: 100%;
    background-image: url('../img/about-bg-01.svg');
    background-repeat: no-repeat;
    background-position: center;
    /* background-attachment: fixed; */
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-section-3 .about-section-detail-3 {
    width: 50%;
    text-align: center;
    color: var(--text-color);
}

.about-section-3 .about-section-detail-3 h1 {
    font-size: 52px;
    font-weight: 300;
    margin-bottom: 20px;
}

.about-section-3 .about-section-detail-3 p {
    font-weight: 100;
}


.about-section-3 form {
    margin-top: 60px;
    display: flex;
    justify-content: center;
}

.about-section-3 form .form-ground {
    width: 50%;
    display: grid;
    grid-template-columns: 59px 1fr 85px;
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 20px;
    align-items: center;
}

.about-section-3 form .form-ground label {
    font-weight: 100;
    font-size: var(--font-primary);
}

.about-section-3 form .form-ground input[type='text'] {
    background-color: transparent;
    font-size: var(--font-primary);
    color: var(--text-color);
    outline: none;
    font-weight: 100;
    border: none;
    padding: 8px 0;
}

.about-section-3 form .form-ground button {
    padding: 8px 0;
    font-size: 16px;
    background-color: transparent;
    border: none;
    font-weight: 500;
    font-family: var(--font-base);
    color: var(--text-color);
    border-left: 1px solid var(--text-color);
    border-right: 1px solid var(--text-color);
    text-transform: uppercase;
    cursor: pointer;

}


/* -----------------------------------------style blog page--------------------------------------- */
.blog-container {
    overflow: hidden;
}

.blog-banner {
    height: 40vh;
    width: 100%;
    position: relative;
}

.blog-banner .blog-banner-bg-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 227px;
    height: 100%;
    background-color: var(--number-color);
    animation-name: shape-all;
    animation-duration: 2s;
}

.blog-banner .blog-banner-bg-center {
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
    width: 100%;
    text-align: center;
    animation-name: shape-all;
    animation-duration: 2s;
}

.blog-banner .blog-banner-bg-center .blog-banner-text {
    margin-bottom: 50px;
    color: var(--text-color);
}

.blog-banner .blog-banner-bg-center .blog-banner-text p {
    font-weight: 100;
}

.blog-banner .blog-banner-bg-center .blog-banner-text h1 {
    font-size: 46px;
}

.blog-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--text-color);
    height: 66px;
    animation-name: anime-blog-teb;
    animation-duration: 2s;
    border: 1px solid #323d3c24;
}

.blog-tabs .blog-tabs-items {
    display: flex;
    width: 55%;
    justify-content: space-between;
    height: 100%;
}

.blog-tabs-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all .3s ease-in-out;
    border: 1px solid #323d3c24;
}

.blog-tabs-item:hover {
    background-color: var(--number-color);
}

.blog-tabs-item:hover h3 {
    color: var(--text-color);
}

.blog-tabs-btn-prev,
.blog-tabs-btn-next {
    display: flex;
    height: 100%;
    padding: 20px;
}

.blog-tabs-btn-prev {
    border-right: 1px solid #323d3c24;
}

.blog-tabs-btn-next {
    border-left: 1px solid #323d3c24;
}

.blog-tabs-item h3 {
    font-size: var(--font-primary);
    color: var(--number-color);
    text-transform: uppercase;
    font-weight: 500;
}

.blog-tabs-item.active {
    background-color: var(--number-color);
}

.blog-tabs-item.active h3 {
    color: var(--text-color);
}

.blog-container .blog-description {
    margin: 10% 15% 0 15%;
    background-color: var(--text-color);
    animation-name: anime-blog-details;
    animation-duration: 2s;
}

.blog-container .blog-description .blog-description-content {
    padding: 96px;
}

.blog-container .blog-description .blog-description-content-header {
    text-align: center;
    color: var(--number-color);
}

.blog-container .blog-description .blog-description-content-header .blog-description-content-header-title {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
}

.blog-container .blog-description .blog-description-content-header .blog-description-content-header-title p {
    background-color: var(--primary-color);
    padding: 3px 10px;
    border-radius: 25px;
    color: var(--text-color);
}

.blog-container .blog-description .blog-description-content-header .blog-description-content-header-title span {
    color: var(--primary-color);
    font-size: var(--font-primary);
}

.blog-container .blog-description .blog-description-content-header h1 {
    font-size: 46px;
    font-weight: 400;
    margin: 10px 0;
}

.blog-container .blog-description .blog-description-content .blog-description-content-body-item {
    margin: 20px 0;
}

.blog-container .blog-description .blog-description-content .blog-description-content-body-item .blog-description-content-body-item-imgs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.blog-container .blog-description .blog-description-content .blog-description-content-body-item .blog-description-content-body-item-imgs .blog-description-content-body-item-img {
    width: 100%;
    display: flex;
}

.blog-container .blog-description .blog-description-content .blog-description-content-body-item .blog-description-content-body-item-imgs .blog-description-content-body-item-img img {
    width: 100%;
}

.blog-container .blog-description .blog-description-content .blog-description-content-body-item .blog-description-content-body-item-imgs .blog-description-content-body-item-1 {
    grid-row: 1/3;
}

.blog-container .blog-description .blog-description-content .blog-description-content-body-item h2 {
    margin-bottom: 10px;
    font-weight: 500;
    font-size: 20px;
}

.blog-description-content-body-item-imgs-2 {
    margin-bottom: 20px;
}

.blog-description-content-body-item-imgs-2,
.blog-description-content-body-item-imgs-2 .blog-description-content-body-item-img,
.blog-description-content-body-item-imgs-2 .blog-description-content-body-item-img img {
    width: 100%;
}

.blog-description-content-body-item-imgs-2 .blog-description-content-body-item-img.blog-description-content-body-item-video {
    position: relative;
    cursor: pointer;
}


.blog-description-content-body-item-imgs-2 .blog-description-content-body-item-img.blog-description-content-body-item-video .blog-description-body-item-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
}

@keyframes anime-blog-teb {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.blog-container .blog-details {
    padding: 50px 100px;
    animation-name: anime-blog-details;
    animation-duration: 2s;
}

.blog-container .blog-details .blog-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.blog-container .blog-details .blog-cards .blog-card {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    width: 100%;
    text-decoration: none;
}

.blog-container .blog-details .blog-cards .blog-card .blog-card-img {
    display: flex;
}

.blog-container .blog-details .blog-cards .blog-card .blog-card-img,
.blog-container .blog-details .blog-cards .blog-card .blog-card-img img {
    width: 100%;
}


.blog-container .blog-details .blog-cards .blog-card .blog-card-detail {
    padding: 20px;
    color: var(--number-color);
}

.blog-container .blog-details .blog-cards .blog-card .blog-card-detail .blog-card-detail-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-container .blog-details .blog-cards .blog-card .blog-card-detail .blog-card-detail-title h4 {
    font-weight: 600;
}

.blog-container .blog-details .blog-cards .blog-card .blog-card-detail .blog-card-detail-title p {
    color: var(--primary-color);
    font-size: var(--font-primary);
}


.blog-container .blog-related {
    margin: 50px 15% 100px 15%;
}

.blog-container .blog-related .blog-related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}


.blog-container .blog-related .blog-related-header h1 {
    font-weight: 300;
    font-size: 24px;
}

.blog-container .blog-related .blog-related-header .blog-related-view-all {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding: 0 20px;
    border-right: 1px solid var(--text-color);
    border-left: 1px solid var(--text-color);
}

.blog-container .blog-related .blog-related-header .blog-related-view-all p {
    font-size: var(--font-primary);
}

.blog-container .blog-related .blog-related-header .blog-related-view-all span {
    display: flex;
}

.blog-container .blog-related .blog-related-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
}

.blog-container .blog-related .blog-related-cards .blog-related-card {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
}


.blog-container .blog-related .blog-related-cards .blog-related-card,
.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-img,
.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-img img {
    width: 100%;
}

.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-img {
    display: flex;
}


.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-detail {
    padding: 20px;
    color: var(--number-color);
}

.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-detail-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-detail-title h4 {
    font-weight: 600;
}

.blog-container .blog-related .blog-related-cards .blog-related-card .blog-related-card-detail-title p {
    color: var(--primary-color);
    font-size: var(--font-primary);
}


/* ------------------------------------------style vehicles--------------------------------------- */

.vehicles-container {
    overflow: hidden;
}

.vehicles-banner {
    height: 40vh;
    width: 100%;
    position: relative;
}

.vehicles-banner .vehicles-banner-bg-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 227px;
    height: 100%;
    background-color: var(--number-color);
    animation-name: shape-all;
    animation-duration: 2s;
}

.vehicles-banner .vehicles-banner-bg-center {
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
    width: 100%;
    text-align: center;
    animation-name: shape-all;
    animation-duration: 2s;
}

.vehicles-banner .vehicles-banner-bg-center .vehicles-banner-text {
    margin-bottom: 50px;
    color: var(--text-color);
}

.vehicles-banner .vehicles-banner-bg-center .vehicles-banner-text p {
    font-weight: 100;
}

.vehicles-banner .vehicles-banner-bg-center .vehicles-banner-text h1 {
    font-size: 46px;
}

.vehicles-container .vehicles-details {
    padding: 60px;
    display: grid;
    grid-template-columns: 15% 1fr;
    gap: 20px;
}

.vehicles-container .vehicles-details .vehicles-details-left {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    border: 1px solid var(--text-color);
    animation-name: anime-vehicles-details-left;
    animation-duration: 2s;
    height: fit-content;
}

@keyframes anime-vehicles-details-left {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-box {
    border-bottom: 1px solid var(--text-color);
    padding: 20px;
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-box h5 {
    font-size: var(--font-primary);
    font-weight: 500;
    margin-bottom: 5px;
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-box .input-box {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-box .input-box input[type='text'] {
    width: 100%;
    padding: 5px 10px;
    text-align: center;
    border: 1px solid var(--text-color);
    color: var(--number-color);
    font-weight: 500;
    font-family: var(--font-base);
    outline-color: var(--primary-color);
    outline-width: 1px;
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-button-box {
    height: 54px;
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-button-box button {
    height: 100%;
    width: 100%;
    cursor: pointer;
    border: none;
    background-color: var(--primary-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: var(--font-primary);
    transition: background-color .3s ease-in;
}

.vehicles-container .vehicles-details .vehicles-details-left .vehicles-details-left-fitter-button-box button:hover {
    background-color: var(--sec-color);
}

.vehicles-container .vehicles-details-right {
    width: 100%;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search {
    display: grid;
    grid-template-columns: 1fr 13%;
    gap: 5px;
    align-items: center;
    animation-name: anime-vehicles-details-left-search;
    animation-duration: 2s;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .btn-fitter {
    padding: 9px 0;
    border: 1px solid var(--text-color);
}

.vehicles-responsive-sort {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    height: 100dvh;
    background: var(--number-color);
    width: 100%;
    transition: all .3s ease-in-out;
}

.vehicles-responsive-fitter {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 100;
    height: 100dvh;
    background: var(--number-color);
    width: 100%;
    transition: all .3s ease-in-out;
}

.vehicles-responsive-sort .vehicles-responsive-sort-title {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
    padding-left: 20px;
    border-bottom: 1px solid var(--sec-color);
}

.vehicles-responsive-fitter .vehicles-responsive-sort-title {
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-color);
    padding-left: 20px;
    border-bottom: 1px solid var(--sec-color);
}

.vehicles-responsive-sort .vehicles-responsive-sort-title p {
    text-transform: uppercase;
}

.vehicles-responsive-fitter .vehicles-responsive-sort-title p {
    text-transform: uppercase;
}

.vehicles-responsive-sort .vehicles-responsive-sort-title button {
    width: 62px;
    height: 100%;
    background: var(--sec-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.vehicles-responsive-fitter .vehicles-responsive-sort-title button {
    width: 62px;
    height: 100%;
    background: var(--sec-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

.vehicles-responsive-sort .vehicles-responsive-sort-body .vehicles-details-left-fitter-box {
    padding: 20px;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom: 20px solid var(--sec-color);
}

.vehicles-responsive-fitter .vehicles-responsive-sort-body .vehicles-details-left-fitter-box {
    padding: 20px;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-bottom: 20px solid var(--sec-color);
}

.vehicles-responsive-sort .vehicles-responsive-sort-body .vehicles-details-left-fitter-box:nth-child(3) {
    border: none;
}

.vehicles-responsive-fitter .vehicles-responsive-sort-body .vehicles-details-left-fitter-box:nth-child(1) {
    border: none;
}


.vehicles-responsive-sort .vehicles-responsive-sort-body .vehicles-details-left-fitter-box .input-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.vehicles-responsive-sort .vehicles-responsive-sort-body .vehicles-details-left-fitter-box .input-box input[type='number'] {
    text-align: center;
    padding: 15px 0;
    width: 100%;
    background: transparent;
    border: 1px solid var(--sec-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 18px;
    outline: 1px solid var(--primary-color);
}

.vehicles-responsive-sort .vehicles-responsive-sort-body .vehicles-details-left-fitter-button-box button {
    width: 100%;
    padding: 20px 0;
    background: var(--primary-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 18px;
    border: none;
}


.vehicles-responsive-fitter .vehicles-responsive-sort-body .vehicles-details-left-fitter-button-box button {
    width: 100%;
    padding: 20px 0;
    background: var(--primary-color);
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 18px;
    border: none;
}

.vehicles-responsive-sort .vehicles-responsive-sort-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 62px);
}

.vehicles-responsive-fitter .vehicles-responsive-sort-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 62px);
}

.vehicles-responsive-fitter .vehicles-responsive-sort-body .vehicles-details-left-fitter-box .input-radio-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sec-color);
    font-size: 18px;
}

@keyframes anime-vehicles-details-left-search {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-input {
    position: relative;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-input,
.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-input input[type='text'] {
    width: 100%;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-input input[type='text'] {
    padding: 15px 10px 15px 50px;
    border: 1px solid var(--text-color);
    outline-color: var(--primary-color);
    font-size: var(--font-primary);
    color: var(--number-color);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-input img {
    position: absolute;
    top: 50%;
    left: 13px;
    transform: translate(0, -50%);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-select {
    width: 100%;
    position: relative;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-select select {
    width: 100%;
    padding: 15px 0 15px 15px;
    border: 1px solid var(--text-color);
    font-family: var(--font-base);
    background-color: var(--text-color);
    appearance: none;
    /* Removes default arrow */
    -webkit-appearance: none;
    /* Safari/Chrome */
    -moz-appearance: none;
    /* Firefox */
    cursor: pointer;
    color: var(--number-color);
}

/* Custom styles for the dropdown options */
.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-select select:focus {
    outline-color: var(--primary-color);
    outline-width: 1px;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-search .vehicles-details-right-search-select img {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
    animation-name: anime-blog-details;
    animation-duration: 2s;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card {
    width: 100%;
    /* //323D3C */
    border: 1px solid #323d3c24;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background-color .3s ease-in-out;
    text-decoration: none;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 20px 0 20px;
    color: var(--number-color);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-header h1 {
    font-weight: 300;
    text-transform: uppercase;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-header .vehicles-details-right-card-header-right {
    display: flex;
    gap: 5px;
    align-items: end;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-header .vehicles-details-right-card-header-right p {
    font-size: var(--font-primary);
    font-weight: 400;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-header .vehicles-details-right-card-header-right span {
    font-size: 24px;
    font-weight: 600;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-img {
    width: 100%;
    display: flex;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-img img {
    width: 100%;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-body {
    padding: 20px;
    border-top: 1px solid #323d3c24;
    color: var(--number-color);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-body h1 {
    font-size: 18px;
    font-weight: 500;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-body .vehicles-details-right-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-primary);
    margin-top: 5px;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-body .vehicles-details-right-card-footer .vehicles-details-right-card-footer-specifications {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-body .vehicles-details-right-card-footer .vehicles-details-right-card-footer-specifications p {
    padding-right: 10px;
    border-right: 2px solid var(--number-color);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .vehicles-details-right-card-body .vehicles-details-right-card-footer .vehicles-details-right-card-footer-specifications span {
    font-weight: 600;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .btn {
    padding: 20px;
    position: absolute;
    width: 100%;
    bottom: -100%;
    left: 0;
    transition: bottom .3s ease-in-out;
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card .btn button {
    background-color: var(--sec-color);
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 15px;
    justify-content: center;
    color: var(--text-color);
    text-transform: uppercase;
    width: 100%;
    border: none;
    cursor: pointer;
    font-family: var(--font-base);

}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card:hover {
    background-color: var(--text-color);
}

.vehicles-container .vehicles-details-right .vehicles-details-right-cards .vehicles-details-right-card:hover .btn {
    bottom: 0;
}


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.pagination a {
    color: var(--number-color);
    padding: 8px 16px;
    text-decoration: none;
    border: 1px solid var(--text-color);
    display: flex;
}

.pagination a.active {
    background-color: var(--sec-color);
    color: var(--text-color);
    border: 1px solid var(--number-color);
}

.pagination a:hover:not(.active) {
    background-color: var(--primary-color);
}

.pagination a:first-child {
    margin-right: 10px;
}

.pagination a:last-child {
    margin-left: 10px;
}



/* ---------------------------------------style vehicles detail----------------------------------- */

.vehicles-detail-container {
    height: 100dvh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.vehicles-detail-banner {
    height: 50vh;
    width: 100%;
}

.vehicles-detail-banner .vehicles-detail-banner-bg-left {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 227px;
    height: 50vh;
    background-color: var(--number-color);
    animation-name: shape-all;
    animation-duration: 2s;
}

.vehicles-detail-banner .vehicles-detail-banner-bg-center {
    background-color: var(--primary-color);
    display: flex;
    justify-content: center;
    align-items: end;
    height: 100%;
    width: 100%;
    text-align: center;
    animation-name: shape-all;
    animation-duration: 2s;
}

.vehicles-detail-container .vehicles-detail-banner-description {
    position: absolute;
    top: 40%;
    left: 64px;
    transform: translateY(-40%);
    z-index: 12;
    width: 413px;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    animation-name: anime-vehicles-detail-banner-description;
    animation-duration: 2s;
}

.vehicles-detail-container .vehicles-detail-banner-description h1 {
    font-size: 56px;
}

.vehicles-detail-container .vehicles-detail-banner-description p {
    font-size: 18px;
    font-weight: 100;
}

.vehicles-detail-container .vehicles-detail-banner-description h6 {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    font-weight: 300;
    margin-left: 10px;
    text-transform: capitalize;
}

.vehicles-detail-container .vehicles-detail-banner-description h6 span {
    font-weight: 400;
}

.vehicles-detail-container .vehicles-detail-banner-description button {
    margin-top: 90px;
    width: 50%;
    padding: 15px 0;
    border: none;
    font-size: var(--font-primary);
    background-color: var(--sec-color);
    color: var(--text-color);
    text-transform: uppercase;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    box-shadow: var(--number-color) 0px 1px 8px;
    font-family: var(--font-base);
}


.vehicles-detail-container .vehicles-detail-banner-description button::before {
    content: '';
    position: absolute;
    height: 100%;
    width: 0;
    top: 0;
    left: 0;
    transition: background-color .3s ease-in-out, width .3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;

}

.vehicles-detail-container .vehicles-detail-banner-description button:hover::before {
    content: 'GET A QUOTE';
    color: var(--number-color);
    background-color: white;
    width: 100%;
}

.vehicles-detail-container .vehicles-detail-banner-car-image {
    position: absolute;
    bottom: 50%;
    right: 50%;
    transform: translate(50%, 50%);
    width: 50%;
    height: 60%;
    display: flex;
    /* overflow: hidden; */
    z-index: 14;
    animation-name: anime-vehicles-detail-banner-car-image;
    animation-duration: 2s;
}

@keyframes anime-vehicles-detail-banner-car-image {
    from {
        top: 50%;
        right: 50%;
        transform: translate(200%, -50%);
    }

    to {
        top: 50%;
        right: 50%;
        transform: translate(50%, -50%);
    }
}

.vehicles-detail-container .vehicles-detail-banner-car-image img {
    /* position: absolute; */
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    transition: transform 2s ease-in-out, bottom 2s ease-in-out;
}


.vehicles-detail-container .vehicles-detail-banner-car-info {
    position: absolute;
    left: 50%;
    bottom: 50px;
    transform: translateX(-50%);
    transition: opacity 1s ease-in-out;
    z-index: 15;
    display: flex;
    animation-name: anime-vehicles-detail-banner-car-info;
    animation-duration: 2s;
}

@keyframes anime-vehicles-detail-banner-car-info {
    from {
        left: 50%;
        transform: translate(-50%, 200%);
    }

    to {
        left: 50%;
        transform: translate(-50%, 0);
    }
}

.vehicles-detail-container .vehicles-detail-banner-car-info .vehicles-detail-banner-car-info-card {
    text-align: center;
    padding: 0 20px;
    position: relative;
    border-left: 1px solid #323d3c24;
    color: var(--number-color);
}

.vehicles-detail-container .vehicles-detail-banner-car-info .vehicles-detail-banner-car-info-card:last-child {
    border-right: 1px solid #323d3c24;
}


.vehicles-detail-container .vehicles-detail-banner-btn-all {
    position: absolute;
    right: 64px;
    bottom: 50px;
    z-index: 15;
    border-left: 1px solid #323d3c24;
    border-right: 1px solid #323d3c24;
    padding: 0 3px;
    animation-name: anime-vehicles-detail-banner-btn-all;
    animation-duration: 2s;
}

@keyframes anime-vehicles-detail-banner-btn-all {
    from {
        transform: translateY(200%);
    }

    to {
        transform: translateY(0);
    }
}

.vehicles-detail-container .vehicles-detail-banner-btn-all .hover-effect {
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 10px 20px;
    color: var(--number-color);
    font-size: var(--font-primary);
    overflow: hidden;
    background-color: transparent;
    border: none;
    z-index: 1;
    cursor: pointer;
    transition: all 0.4s ease;
    font-family: var(--font-base);
}

.vehicles-detail-container .vehicles-detail-banner-btn-all .hover-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background-color: var(--sec-color);
    z-index: -1;
    transition: all 0.4s ease;
}

.vehicles-detail-container .vehicles-detail-banner-btn-all .hover-effect:hover {
    color: var(--text-color);
}

.vehicles-detail-container .vehicles-detail-banner-btn-all .hover-effect:hover img {
    filter: invert(1);
}

.vehicles-detail-container .vehicles-detail-banner-btn-all .hover-effect:hover::before {
    left: 0;
}

.vehicles-section-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    width: 100%;
}

.vehicles-section-1 .vehicles-section-1-left {
    position: relative;
}

.vehicles-section-1 .vehicles-section-1-left .vehicles-section-1-left-title {
    height: 55vh;
    width: 100%;
    background-color: var(--primary-color);
    display: flex;
    align-items: end;
    padding-left: 64px;
    padding-bottom: 64px;
}

.vehicles-section-1 .vehicles-section-1-left .vehicles-section-1-left-title h1 {
    font-size: 56px;
    color: var(--text-color);
    font-weight: 300;
    width: 50%;
}

.vehicles-section-1 .vehicles-section-1-left .vehicles-section-1-left-img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 75%;
    display: flex;
}

.vehicles-section-1 .vehicles-section-1-left .vehicles-section-1-left-img img {
    width: 100%;
}

.vehicles-section-1 .vehicles-section-1-right {
    background-color: var(--number-color);
    color: var(--text-color);
    height: 100%;
    position: relative;
    padding: 0 150px 40px 150px;
    display: flex;
    align-items: end;
}

.vehicles-section-1 .vehicles-section-1-right .vehicles-section-1-right-title {
    position: absolute;
    top: 25%;
    left: -20%;
    width: 510px;
    font-weight: 200;
}

.vehicles-section-1 .vehicles-section-1-right .vehicles-section-1-right-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vehicles-section-1 .vehicles-section-1-right .vehicles-section-1-right-footer p {
    font-weight: 200;
    margin-bottom: 20px;
}

.vehicles-section-1 .vehicles-section-1-right .vehicles-section-1-right-footer span {
    position: relative;
    padding-left: 20px;
}

.vehicles-section-1 .vehicles-section-1-right .vehicles-section-1-right-footer span::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\2758';
    height: 100%;
}

.vehicles-section-2 {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.vehicles-section-2 .vehicles-section-2-left {
    height: 100%;
    width: 100%;
    background-color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicles-section-2 .vehicles-section-2-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 70px;
    color: var(--number-color);
}

.vehicles-section-2 .vehicles-section-2-right .vehicles-section-2-right-text {
    width: 70%;
}

.vehicles-section-2 .vehicles-section-2-right .vehicles-section-2-right-text h1 {
    font-size: 46px;
    font-weight: 300;
}

.vehicles-section-2 .vehicles-section-2-right .vehicles-section-2-right-text p {
    margin: 20px 0;
    font-weight: 400;

}

.vehicles-section-2 .vehicles-section-2-right .vehicles-section-2-right-text span {
    font-weight: 500;
    display: flex;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.vehicles-section-2 .vehicles-section-2-right .vehicles-section-2-right-text span::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\2759';
    height: 100%;
}

.vehicles-section-2 .vehicles-section-2-left img {
    width: 100%;
}


.vehicles-section-3 {
    height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.vehicles-section-3 .vehicles-section-3-right {
    height: 100%;
    width: 100%;
    background-color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicles-section-3 .vehicles-section-3-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 206px;
    color: var(--number-color);
}

.vehicles-section-3 .vehicles-section-3-right .vehicles-section-3-right-img {
    width: 70%;
    display: flex;
}

.vehicles-section-3 .vehicles-section-3-right .vehicles-section-3-right-img img {
    width: 100%;
}

.vehicles-section-3 .vehicles-section-3-left .vehicles-section-3-left-text {
    width: 70%;
}

.vehicles-section-3 .vehicles-section-3-left .vehicles-section-3-left-text h1 {
    font-size: 46px;
    font-weight: 300;
}

.vehicles-section-3 .vehicles-section-3-left .vehicles-section-3-left-text p {
    margin: 20px 0;
    font-weight: 400;

}

.vehicles-section-3 .vehicles-section-3-left .vehicles-section-3-left-text span {
    font-weight: 500;
    display: flex;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}

.vehicles-section-3 .vehicles-section-3-left .vehicles-section-3-left-text span::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\2759';
    height: 100%;
}

.vehicles-section-4 {
    background-color: var(--number-color);
    color: var(--text-color);
    padding: 200px;
}

.vehicles-section-4 .vehicles-section-4-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.vehicles-section-4 .vehicles-section-4-header h1 {
    font-size: 46px;
    font-weight: 300;
}

.vehicles-section-4 .vehicles-section-4-header p {
    font-weight: 300;
    font-size: 16px;
}


.vehicles-section-4 .vehicles-section-4-detail {
    padding: 30px 0;
    border-top: 1px solid var(--primary-color);
}

.vehicles-section-4 .vehicles-section-4-detail h4 {
    font-weight: 500;
    margin-bottom: 10px;
}

.vehicles-section-4 .vehicles-section-4-detail .vehicles-section-4-detail-items {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.vehicles-section-4 .vehicles-section-4-detail .vehicles-section-4-detail-items .vehicles-section-4-detail-item p,
.vehicles-section-4 .vehicles-section-4-detail .vehicles-section-4-detail-items .vehicles-section-4-detail-item span {
    padding-left: 15px;
}

.vehicles-section-4 .vehicles-section-4-detail .vehicles-section-4-detail-items .vehicles-section-4-detail-item span {
    text-transform: uppercase;
}

.vehicles-section-4 .vehicles-section-4-detail .vehicles-section-4-detail-items .vehicles-section-4-detail-item p {
    font-weight: 100;
    position: relative;
}

.vehicles-section-4 .vehicles-section-4-detail .vehicles-section-4-detail-items .vehicles-section-4-detail-item p::before {
    position: absolute;
    top: 0;
    left: 0;
    content: '\2758';
    height: 100%;
}

.vehicles-section-5 {
    display: grid;
    grid-template-columns: .5fr 1fr;
    padding: 128px;
    gap: 128px;
}



.vehicles-section-5 .vehicles-section-5-left {
    width: 100%;
}

.vehicles-section-5 .vehicles-section-5-left .vehicles-section-5-left-header {
    margin-bottom: 96px;
    color: var(--number-color);
}

.vehicles-section-5 .vehicles-section-5-left .vehicles-section-5-left-header h1 {
    font-size: 46px;
    font-weight: 300;
}

/* -----------------------------------------------------form Style--------------------------------- */
.form-section-5 {
    display: flex;
    flex-direction: column;
    gap: 15px;
    color: var(--number-color);
}

.form-section-5 .input-group {
    display: flex;
    flex-direction: column;
}

.form-section-5 .input-group .model {
    text-transform: uppercase;
    color: #323d3c83;
}

.form-section-5 .input-group .select-input {
    position: relative;
    width: 100%;
}

.form-section-5 .input-group.select .select-wrapper {
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid var(--text-color);
    font-family: var(--font-base);
    appearance: none;
    /* Removes default arrow */
    -webkit-appearance: none;
    /* Safari/Chrome */
    -moz-appearance: none;
    /* Firefox */
    cursor: pointer;
    color: var(--number-color);
    padding-bottom: 10px;
    width: 100%;
}

.form-section-5 .input-group.select .select-wrapper:focus {
    outline: none;
    border-bottom: 1px solid var(--number-color);
}

.form-section-5 .input-group.select img {
    width: 25px;
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
}

.form-section-5 .input-group input[type='text'] {
    padding: 5px 0;
    border: none;
    border-bottom: 1px solid var(--text-color);
    outline: none;
    font-family: var(--font-base);
}

.form-section-5 .input-group.btn {
    margin-top: 25px;
}

.form-section-5 .input-group.btn input[type='submit'] {
    padding: 10px 20px;
    background-color: var(--sec-color);
    border: none;
    text-transform: uppercase;
    font-family: var(--font-base);
    color: var(--text-color);
    cursor: pointer;
    width: 40%;
}

/* ----------------------------------------------------- end form Style--------------------------------- */



.vehicles-section-5 .vehicles-section-5-right {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vehicles-section-5 .vehicles-section-5-right .vehicles-section-5-right-img {
    width: 100%;
    display: flex;
}

.vehicles-section-5 .vehicles-section-5-right .vehicles-section-5-right-img img {
    width: 100%;
}


.vehicles-section-6 {
    padding: 256px;
    background-color: var(--text-color);
    color: var(--number-color);
}

.vehicles-section-6 .vehicles-section-5-header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 56px;
}

.vehicles-section-6 .vehicles-section-5-header h1 {
    font-size: 46px;
    font-weight: 300;
}

.vehicles-section-6 .vehicles-section-5-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card {
    transition: all .3s ease-in-out;
    border: 1px solid #323d3c24;
    cursor: pointer;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card:hover {
    background-color: #DBE1E0;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-header {
    width: 100%;
    padding: 32px;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-header .vehicles-section-5-card-header-img {
    width: 100%;
    display: flex;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-header .vehicles-section-5-card-header-img img {
    width: 100%;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-header h1 {
    font-size: 26px;
    font-weight: 300;
    text-align: center;
    margin-top: 24px;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-item {
    padding: 24px;
    border-top: 1px solid #323d3c24;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-item p {
    font-size: 16px;
    font-weight: 300;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-item span {
    font-weight: 400;
    font-size: 16px;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-item-btn {
    width: 100%;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card .vehicles-section-5-card-item-btn button {
    width: 100%;
    padding: 15px 0;
    background-color: var(--primary-color);
    border: none;
    cursor: pointer;
    font-family: var(--font-base);
    color: var(--text-color);
    transition: all .3s ease-in-out;
}

.vehicles-section-6 .vehicles-section-5-cards .vehicles-section-5-card:hover .vehicles-section-5-card-item-btn button {
    background-color: var(--sec-color);
}

/* -----------------------------------------style contact ---------------------------------------- */

.contact-container {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.contact-container .contact-header {
    position: absolute;
    top: 64px;
    padding: 0 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    animation-name: anime-contact-header;
    animation-duration: 2s;
    z-index: 11;
}

@keyframes anime-contact-header {
    from {
        transform: translateY(-200%);
    }

    to {
        transform: translateY(0);
    }
}

.contact-container .contact-header .contact-header-btn {
    border-left: 1px solid var(--primary-color);
    border-right: 1px solid var(--primary-color);
    padding: 0 5px;
}

.contact-container .contact-header .contact-header-btn .btn-back {
    display: flex;
    padding: 5px 10px;

}

.contact-container .contact-header .logo {
    width: 145px;
    display: flex;
    height: 50px;
}

.contact-container .contact-left {
    background-color: var(--number-color);
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 124px;
    animation-name: transform-header;
    animation-duration: 1s;
    position: relative;
    z-index: 10;
}

.contact-container .contact-left .contact-left-detail {
    animation-name: anime-contact-medial;
    animation-duration: 3s;
    position: relative;
    z-index: 12;
}

.contact-container .contact-left .contact-left-detail .contact-left-detail-header {
    margin-bottom: 56px;
}

.contact-container .contact-left .contact-left-detail .contact-left-detail-header h1 {
    font-size: 46px;
    font-weight: 300;
}


.contact-container .contact-left .contact-left-detail .contact-left-detail-medial {
    display: grid;
    grid-template-columns: 64px 1fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

@keyframes anime-contact-medial {
    from {
        transform: translateX(-200%);
    }

    to {
        transform: translateX(0);
    }
}

.contact-container .contact-left .contact-left-detail .contact-left-detail-medial .icon {
    display: flex;
    height: 100%;
    width: 100%;
    background-color: var(--sec-color);
    align-items: center;
    justify-content: center;
}

.contact-container .contact-left .contact-left-detail .contact-left-detail-medial .contact-left-detail-medial-info h3 {
    font-size: 18px;
    font-weight: 500;
}

.contact-container .contact-left .contact-left-detail .contact-left-detail-medial .contact-left-detail-medial-info p {
    font-size: var(--font-primary);
    font-weight: 300;
}

.contact-container .contact-left .contact-left-detail .contact-left-detail-medial .contact-left-detail-medial-info a {
    font-size: var(--font-primary);
    font-weight: 300;
    color: var(--text-color);
    text-decoration: none;
}

.contact-container .contact-right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 124px;
}

.contact-container .contact-right .contact-right-form {
    animation-name: anime-contact-right-form;
    animation-duration: 3s;
}

@keyframes anime-contact-right-form {
    from {
        transform: translateX(200%);
    }

    to {
        transform: translateX(0);
    }
}




/* -----------------------------------------style footer----------------------------------------- */
/* footer {} */

footer .nav-footer {
    width: 100%;
    background-color: var(--sec-color);
    display: flex;
    justify-content: space-between;
    padding: 48px 256px;
}

footer .nav-footer .footer-logo {
    width: 145px;
    cursor: pointer;
}

footer .nav-footer .footer-logo img {
    width: 100%;
}

footer .nav-footer .footer-links {
    display: flex;
    gap: 80px;
}

footer .nav-footer .footer-links .footer-link {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer .nav-footer .footer-links .footer-link a {
    color: var(--text-color);
    font-weight: 300;
    text-transform: uppercase;
    text-decoration: none;
    font-size: var(--font-primary);

}

footer .footer-description {
    display: flex;
    padding: 24px 256px;
    align-items: center;
    justify-content: space-between;
    background-color: var(--number-color);
    color: var(--text-color);
    font-weight: 100;
}

footer .footer-description p {
    display: flex;
    align-items: center;
    gap: 3px;
}

footer .footer-description p img {
    width: 55px;
}



@keyframes anime-vehicles-detail-banner-description {
    from {
        top: 40%;
        transform: translate(-100%, -40%);
    }

    to {
        top: 40%;
        transform: translate(0, -40%);
    }
}

@keyframes anime-blog-details {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


@keyframes about-banner-img {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}


@keyframes anime-about-banner-detail {
    from {
        top: 50%;
        transform: translate(-200%, -50%);
    }

    to {
        top: 50%;
        transform: translate(0, -50%);
    }
}

@keyframes shape-all {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}