@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


:root {
    /*BACKGROUND COLORS*/
    --bg-color-1: #FDCB01;
    --bg-color-2: #282836;
    --bg-color-3: #1C1B17;
    --bg-color-4: #fff;
    --bg-color-5: #5C5C71;
    --bg-color-6: #41413E;
    --bg-color-7: #F4F4F4;
    --bg-color-8: #F1F1F1;
    --bg-color-9: #D70010;
    --bg-color-10: #484854;
    --bg-color-11: #F2F2F2;
    /*TEXT COLORS*/
    --text-color-1: #fff;
    --text-color-2: #FDCB01;
    --text-color-3: #282836;
    --text-color-4: #B9B7AD;
    --text-color-5: #000;
}

/*RESET*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}
body{
      font-family: 'Poppins', sans-serif !important;
}

html {
    font-size: 14px;
}

body::-webkit-scrollbar {
    width: 6px;
}

body::-webkit-scrollbar-track {
    background: grey;
}

body::-webkit-scrollbar-thumb {
    background: var(--bg-color-1);
}

img {
    width: 100%;
}

a {
    text-decoration: none;
    color: #fff;
}
li{
    list-style:none;
}
 .car-logo{
        color:#FDCB01 !important;
        word-spacing:-8px;
        text-transform:uppercase;
        font-size:30px;color:#fff;
        font-weight:bold;
    }
/* JS classes */

.yellowborder {
    border: 2px solid var(--text-color-2) !important;
}

.setbackground {
    background-color: var(--bg-color-1);
    border: none !important;
}

.submenu-block {
    display: block !important;
}

.mbl {
    text-decoration: underline;
}

.showmenu {
    display: block !important;
}

.hidesub{
    display:none;
}

.shevron-rotate {
    transform: rotate(180deg);
}

.aktif {
    background-color: var(--bg-color-1) !important;
    border: 2px solid #bbb !important;
}

.tips {
    background-color: #bbb !important;
    text-decoration: underline;
    color: var(--text-color-3) !important;
}

.model-2 {
    border: 2px solid var(--bg-color-1) !important;
}

.anime-scroll {
    animation-name: anim;
    animation-duration: 0.5s;
}


.mobile-tips {
    color: var(--text-color-2);
}

/* JS */


/* Animations */

@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes anim {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes anim2 {
    0% {
        bottom: 2%;
    }

    20% {
        bottom: 2.4%;
    }

    40% {
        bottom: 2.8%;
    }

    60% {
        bottom: 3.2%;
    }

    80% {
        bottom: 2.8%;
    }

    100% {
        bottom: 2%;
    }
}

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

    50% {
        -webkit-transform: rotate(360deg) scale(1.2);
        -moz-transform: rotate(360deg) scale(1.2);
    }

    100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
    }
}

@keyframes ball1 {
    0% {
        box-shadow: 30px 0 0 #f8b334;
    }

    50% {
        box-shadow: 0 0 0 #f8b334;
        margin-bottom: 0;
        -webkit-transform: translate(15px, 15px);
        -moz-transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #f8b334;
        margin-bottom: 10px;
    }
}

@keyframes ball2 {
    0% {
        box-shadow: 30px 0 0 #97bf0d;
    }

    50% {
        box-shadow: 0 0 0 #97bf0d;
        margin-top: -20px;
        -webkit-transform: translate(15px, 15px);
        -moz-transform: translate(15px, 15px);
    }

    100% {
        box-shadow: 30px 0 0 #97bf0d;
        margin-top: 0;
    }
}

@keyframes pulse {
    0% {
        transform: translateY(-15px);
    }
}

@keyframes pulse2 {
    0% {
        transform: translateY(-10px);
    }
}

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

    20% {
        transform: rotate(8deg);
    }

    40% {
        transform: rotate(6deg);
    }

    60% {
        transform: rotate(4deg);
    }

    80% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0);
    }
}


/* Animations */


.header-main {
    position: relative;
}

.other-header {
    height: 440px !important;
}

header .header-img{
    width: 100%;
    height: 665px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--bg-color-2);
    position: relative;
    background-attachment: fixed;
}


.left-and-top {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    position: absolute;
    bottom: -5%;
    z-index: 0;
}

header .left-car {
    width: 50%;
    height: 400px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
    background-image: url('../img/topclas5.png');
}

header .right-car {
    width: 50%;
    height: 440px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right;
    background-image: url('../img/blackrange.png');
}

header .header-row .logo {
    width: 173px;
    height: 119px;
    background-size: 90%;
    background-repeat: no-repeat;
    background-position:center;
    background-image: url('../img/logo2.png');
}

.header-row {
    display: flex;
    justify-content: space-between;
}

.burger-menu {
    color: var(--text-color-1);
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
}

.mobile-site-descripton {
    display: none;
    margin-top: 5rem;
}

.mobile-site-descripton p {
    color: var(--text-color-1);
    font-size: 30px;
    font-weight: 600;
    text-align: center;
}

.burger-menu-top {
    display: none;
}

.contact-and-navbar .contact {
    display: flex;
    column-gap: 3rem;
    align-items: center;

}

.contact ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.contact ul li {
    padding: 1rem 0.5rem;
}

.contact a {
    font-size: 18px;
}

.contact ul li a:hover {
    color: var(--text-color-1);
}

.phone-num a {
    text-decoration: underline;
}
.phone-num-top a {
    text-decoration: none;
}

.phone-num i {
    color: var(--text-color-2);
    font-size: 1.4rem;
    margin: 0 0.6rem;
    animation: telanim 1s infinite;
}


.mail a {
    text-decoration: underline;
}

.mail i {
    color: var(--text-color-2);
    font-size: 1.4rem;
    margin: 0 0.6rem;
    animation: telanim 1s infinite;
}

.lang span {
    margin: 0 0.2rem;
}

.lang .active {
    text-decoration: underline;
    color: var(--text-color-2);
}

.lang span {
    color: var(--text-color-1);
    cursor: pointer;
}

.navbar {
    border-top: 1px solid #fff;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.navbar ul {
    list-style: none;
    display: flex;
}

.navbar ul li {
    padding: 2rem 1.2rem;
    position: relative;
}

.navbar ul li a {
    font-size: 18px;
    position: relative;
}

.navbar ul li a:after {
    content: '';
    width: 0;
    height: 1px;
    background-color: var(--bg-color-1);
    margin: auto;
    display: block;
}

.navbar ul li a:before {
    width: 36px;
    height: 36px;
    font-family: FontAwesome;
    content: "\f1b9";
    position: absolute;
    left: -20px;
    font-family: "fontawesome";
    font-size: 15px;
    color: var(--bg-color-1);
    display: none;
}

.navbar ul li a:hover:after {
    width: 100%;
    transition: all 0.3s linear;
}

.navbar ul li a:hover:before {
    display: block;
    transition: all 1s;
}

.navbar ul li a:hover {
    color: var(--text-color-1);
}

.navbar ul li input {
    width: 150px;
    height: 40px;
    background: transparent;
    border-right: none;
    border-top: 2px solid var(--text-color-1);
    border-left: 2px solid var(--text-color-1);
    border-bottom: 2px solid var(--text-color-1);
    outline: none;
    border-radius: 10px 0 0 10px;
    color: var(--bg-color-4);
    padding-left: 0.5rem;
}

.navbar .search-section form {
    display: flex;
}

.navbar .search-section {
    padding: 19px 8px;
}

.navbar .search-section .search-btn {
    width: 50px;
    height: 40px;
    border-left: none;
    border-top: 2px solid var(--text-color-1);
    border-right: 2px solid var(--text-color-1);
    border-bottom: 2px solid var(--text-color-1);
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.navbar .search-section .search-btn i {
    color: var(--bg-color-4);
    font-size: 1.3rem;
    cursor: pointer;
}

.header-img .site-description p {
    width: 100%;
    color: var(--text-color-1);
    text-align: center;
    font-size: 56px;
    font-weight: 600;
    margin-top: 50px;
}

.filters {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.filters .model {
    column-gap: 1rem;
    position: relative;
}

 .model-sec {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100px;
    z-index: 1;
}
.filters .model .model-sec input{
    position: absolute;
    visibility: hidden;
}

.filters .model .model-sec label {
    color: var(--text-color-1);
    font-size: 18px;
}

 .model1 {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    border: 3px solid var(--text-color-5);
    background-color: var(--bg-color-4);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    object-fit: contain;
    cursor: pointer;
}



.model-sec:hover .model1 {
    animation: pulse 1s;
    box-shadow: 0 0 0 2em transparent;
}

.filters .model .model1 img {
    width: 80%;
}

.filters .filter-row {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    position: relative;
    height: 70px;
    background-color: var(--bg-color-4);
    z-index: 1;
}

.filters .filter-row div {
    width: 20%;
    cursor: pointer;
}

.all-model {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-right: 1px solid var(--text-color-2);
    font-size: 16px;
    font-weight: 400;
    height: 100%;
}

.car-model i {
    font-size: 16px;
    color: var(--text-color-2);
    transition: all 0.5s;
}

.car-model {
    position: relative;
}

.car-model .model-submenu {
    position: absolute;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    width: 100% !important;
    background-color: var(--bg-color-4);
    top: 90%;
    left: 0;
    display: none;
    height:300px;
    overflow-y:scroll;
}

.model-submenu p {
    padding-left: 10px;
    position:relative;
    z-index:1;
    cursor:pointer;
}

.select-model label{
    position:relative;
    cursor:pointer;
    z-index:0;
}

.mobi-mark input{
    visibility:hidden;
}

.mobi-mark2 input{
    visibility:hidden;
}

.model-submenu input{
    visibility: hidden;
    position: absolute;
}

.mark-submenu input{
    visibility: hidden;
    position: absolute;
}

.marka1{
    width: 100%;
    font-size: 12px;
}

.model-submenu p:hover {
    background-color: var(--bg-color-1);
}

.car-mark i {
    font-size: 16px;
    color: var(--text-color-2);
    transition: all 0.5s;
}

.car-mark {
    position: relative;
}

.car-mark .mark-submenu {
    position: absolute;
    width: 100% !important;
    background-color: var(--bg-color-4);
    top: 90%;
    left: 0;
    display: none;
}

.mark-submenu p:hover {
    background-color: var(--bg-color-1);
}

.mark-submenu p {
    padding-left: 10px;
    position:relative;
    z-index:1;
}

.mark-submenu label{
   position:relative;
    z-index:0;
}

.min-price {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
    border-right: 1px solid var(--text-color-2);
    font-size: 18px;
    font-weight: 400;
    height: 100%;

}

.focus-span {
    position: absolute;
    z-index: 0;
    transition: all 1s;
    font-size: 16px;
}

.min-price input {
       width: 95%;
    height: 50px;
    border: none;
    padding-left: 8px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
}


.max-price {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
    border-right: 1px solid var(--text-color-2);
    font-size: 18px;
    font-weight: 400;
    height: 100%;
}

.focus-span2 {
    position: absolute;
    z-index: 0;
    transition: all 1s;
    font-size: 16px;
    z-index: 3;
}

.max-price input {
        width: 95%;
    height: 50px;
    border: none;
    padding-left: 8px;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #333;
}

.search-model {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
    height: 100%;
    background-color: #FDCB01;
    border-radius: 0 10px 10px 0;
}

.search-model button {
    width: 100%;
    height: 100%;
    background-color: #FDCB01;
    border: none;
    background: transparent;
}

.scroll-menu-show {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 551511;
    display: none;
}

.scroll-menu {
    width: 100%;
    height: 6rem;
    background-color: var(--bg-color-7);
    display: flex;
    justify-content: center;
    align-items: center;

}

.scroll-menu .scroll-menu-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.scroll-menu-row .logo {
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.scroll-menu-row .logo .sm-text{
    color:#333 !important;
}

.scroll-menu-row .logo img {
    object-fit: contain;
    width:80%;
}

.scroll-menu-row .nav-items {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav-items ul {
    display: flex;
    list-style: none;
    column-gap: 2rem;
    align-items: center;
}

.nav-items a {
    font-size: 18px;
    color: var(--text-color-3);
    position: relative;
}

.nav-items a:after {
    content: '';
    width: 0;
    height: 1px;
    background-color: var(--bg-color-1);
    margin: auto;
    display: block;
}

.nav-items a:before {
    width: 36px;
    height: 36px;
    font-family: FontAwesome;
    content: "\f1b9";
    position: absolute;
    left: 0;
    font-family: "fontawesome";
    font-size: 15px;
    color: var(--bg-color-1);
    left: -20px;
    display: none;
}

.nav-items a:hover:before {
    display: block;
}

.nav-items a:hover:after {
    width: 100%;
    transition: all 0.3s linear;
}

.scroll-menu ul li input {
    width: 150px;
    height: 40px;
    background: transparent;
    border-right: none;
    border-top: 2px solid var(--text-color-3);
    border-left: 2px solid var(--text-color-3);
    border-bottom: 2px solid var(--text-color-3);
    outline: none;
    border-radius: 10px 0 0 10px;
    color: var(--text-color-5);
    padding-left: 0.5rem;
}

.scroll-menu .search-section form {
    display: flex;
}

.scroll-menu .search-section .search-btn {
    width: 50px;
    height: 40px;
    border-left: none;
    border-top: 2px solid var(--text-color-3);
    border-right: 2px solid var(--text-color-3);
    border-bottom: 2px solid var(--text-color-3);
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-menu .search-section .search-btn i {
    color: var(--text-color-3);
    font-size: 1.3rem;
    cursor: pointer;
}

.top-show {
    width: 3.5rem;
    height: 3.5rem;
    position: fixed;
    right: 23px;
    bottom:10%;
    z-index: 5616;
    display: none;
    border-radius: 50%;
    overflow: hidden;
}

.scroll-top-btn {
    width: 50px;
    height: 50px;
     border-radius: 50%;
    background-color: var(--bg-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-top-btn i {
    font-size: 1.5rem;
}

.scroll-top-btn:hover {
    color: var(--text-color-1);
}

  .num{
     width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--bg-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 2%;
    right: 83px;
    z-index: 555;
}
@media(max-width:992px){
  .num{    bottom: 2.6%;
}}
.num i {
    font-size: 1.5rem;
}

.num:hover {
    color: var(--text-color-1);
}

.mobilemenu {
    width: 0;
    height: 0;
    background-color: var(--bg-color-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    top: 0;
    z-index: 5555555;
    left: 0;
    transition: all 0.5s;
    overflow: hidden;
}

.circleopening {
    width: 80% !important;
    height: 100vh !important;
    animation: circleopening 0.5s;
}

@keyframes circleopening {
    0% {
        border-radius: 0 500% 500% 0;
    }

    100% {
        border-radius: 0;
    }
}

.mobile-menu-header {
    width: 95%;
    height: 80px;
    border-bottom: 1px solid var(--text-color-5);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mobile-logo {
    /*width: 20%;*/
    height: 90px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.mobile-logo.car-logo{
    color:#333 !important;
}
.mobile-logo img {
    object-fit: contain;
}

.close-mobile {
    width: 50px;
    font-weight: 600;
    font-size: 2rem;
    cursor: pointer;
}

.mobile-ul {
    list-style: none;
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.mobile-ul .search-section form {
    display: flex;
}

.mobile-ul a {
    color: var(--text-color-5);
    font-size: 1.4rem;
}

.mobile-ul .search-section {
    padding: 19px 8px;
}

 .search-btn {
    width: 50px;
    height: 40px;
    border-left: none;
    border-top: 2px solid var(--text-color-5);
    border-right: 2px solid var(--text-color-5);
    border-bottom: 2px solid var(--text-color-5);
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.mobile-ul .search-section .search-btn i {
    color: var(--bg-color-3);
    font-size: 1.3rem;
    cursor: pointer;
}

.mobile-ul input {
    width: 150px;
    height: 40px;
    background: transparent;
    border-right: none;
    border-top: 2px solid var(--text-color-5);
    border-left: 2px solid var(--text-color-5);
    border-bottom: 2px solid var(--text-color-5);
    outline: none;
    border-radius: 10px 0 0 10px;
    color: var(--text-color-5);
}

.mobile-lang span {
    color: var(--text-color-5);
}

.mobile-footer {
    width: 95%;
    border-top: 1px solid var(--text-color-5);
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.5rem;
}

.mobile-footer a {
    color: var(--text-color-5);
    font-size: 1.5rem;
}


/* //////////////////////////////////////////MAIN///////////////////////////////////////////////////////////////////// */

.burger-background {
    width: 100%;
    height: 100vh;
    background-color: var(--bg-color-3);
    opacity: 0.5;
    position: fixed;
    top: 0;
    z-index: 1;
    display: none;
}

.mobile-btn{
max-width:95%;
height:4rem;
border:none;
background-color:#fdcb01;
color: #000;
font-weight:bold;
font-size:18px;

 }
 
.mobile-filter {
    display: none;
}

.model-mobile {
    width: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.model-mob {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid var(--bg-color-3);
    display: flex;
    align-items: center;
    justify-content: center;
}

.types-mobile {
    display:grid;
    grid-template-columns: 80px 80px 80px;
    column-gap: 1rem;
    cursor: pointer;
}

.model-mob img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.mobile-model {
    width: 95%;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
    background-color: var(--bg-color-11);
}

#mobi-m{
    width:60%;
    font-weight:bold;
}

#mobi-m2{
    width:60%;
    font-weight:bold;
}
.mobile-model span {
    width: 100px;
}

.mobile-date {
    width: 95%;
    height: 4rem;
    background-color: var(--bg-color-11);
}

.mobile-date .mobile-date-1 {
    width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}

.mobile-date-1 input {
    width: 100px;
    height: 2.5rem;
    /* border: 1px solid var(--bg-color-1); */
    outline: none;
    border: none;
}

.mobile-fuel {
    width: 50%;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 400;
}

.fuel-1 {
    border-right: 1px solid var(--bg-color-1);
}

.mobile-search-btn {
    width: 95%;
    height: 4rem;
    background-color: var(--bg-color-1);
}

.mobile-search-btn button {
    border: none;
    width: 100%;
    height: 100%;
    background: transparent;
    color: var(--text-color-1);
    font-size: 18px;
}

/* .mobile-model:hover .mobile-submenu {
    display: block;
} */

.mobile-model i {
    color: var(--text-color-2);
}

.mobile-submenu {
    width: 100%;
    position: absolute;
    background-color: var(--bg-color-11);
    left: 0;
    top: 100%;
    z-index: 1;
    display: none;
}

main .name-rent {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
}

main .name-rent .rent-text {
    width: 30%;
    height: 45px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
}

.rent-text span {
    font-weight: 600;
    font-size: 40px;
    position: absolute;
    z-index: 0;
    bottom: -22%;
    left: 0;
}

main .name-rent .bottom-line {
    width: 15%;
    height: 4px;
    background-color: var(--bg-color-1);
}

.types-rent {
    padding-top:20px;
    column-gap: 100px;
}

.types-rent .type {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 70px;
    cursor: pointer;
}


.type .img-rent {
    object-fit: contain;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 1px solid var(--text-color-5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.type:hover .img-rent {
    animation: pulse2 1s;
    box-shadow: 0 0 0 2em transparent;
}

.type .img-rent img {
    width: 90%;
}

.type span {
    font-weight: 500;
    font-size: 18px;
}


/* ////////////// */
.swiper--blog__wrapper {
    display: flex;
    transition-timing-function: linear !important;
    color: white;
  }
  
  .swiper--blog__slide {
    width: 260px;
    margin-right: 20px;
    flex-grow: 0;
    flex-shrink: 0; 
    flex-basis: auto;
  }
  
/* ////////////// */

.swiper {
    height: 100%;
}

.first-swip {
    width: 260px !important;
}

.swiper-wrapper {
    display: flex;
    justify-content: center;
}

.swiper-pagination-bullet {
    background-color: #FDCB01;
    color: var(--bg-color-1);
    width: 15px;
    height: 15px;
    border-radius: 50%;
}

.swiper-slide {
    background-color: #FDCB01;
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
}



.swiper-slide .car-description {
    width: 100%;
    background-color: var(--bg-color-2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swiper-slide .car-description p {
    text-align: start;
    width: 100%;
    padding-left: 1rem;
    padding-top: 1rem;
    line-height: 5px;
    color: var(--text-color-1);
}

.swiper-slide .car-description .namecar {
    font-weight: 400;
    font-size: 18px;
}

.swiper-slide .car-description .line {
    width: 90%;
    height: 1px;
    background-color: var(--bg-color-5);
}

.swiper-sec {
    height: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    object-fit: cover;
    height: 235px;
}

.propertyes {
    display: flex;
    column-gap: 0.3rem;
}

.propertyes .property {
    border-radius: 10px;
    color: var(--bg-color-5);
    border: 1px solid var(--bg-color-5);
    padding: 0.2rem 0.5rem;
}

.pagination-cars {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10rem;
    overflow: hidden;
}
.pagination-cars .button-wrap{
 width:100%;
}

.pagination-cars button {
    display: inline-block;
    width: 200px;
    height: 50px;
    background-color: var(--bg-color-6);
    color: #fff;
    line-height: 50px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    font-size: 18px;
    border: 0.5px solid var(--bg-color-2);
    overflow: hidden;
    overflow: hidden;
}

.lastbtn {
    border-radius: 0 10px 0 0;
}

.wrap-row {
    width: 100vw;
    border-radius: 10px 10px 0 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.wrap-row button:first-child {
    border-radius: 10px 0 0 0;
}

.wrap-row button:last-child {
    border-radius: 0 10px 0 0;
}

.pagination-cars button.active {
    background-color: var(--bg-color-3);
    border-bottom: 3px solid var(--bg-color-1);
}


.pagination-cars div[class*="content-"] {
    display: none;
}

.pagination-cars div.active {
    display: block;
}

.pagination-cars .content .content-1 {
    width: 100vw;
    height: 520px;
    background-color: var(--bg-color-3);
    position: relative;
}

.content-1 img {
    width: 500px;
    height: 374px;
    position: absolute;
    left: 0;
    bottom: -10%;
    object-fit: contain;
}

.content-1 {
    background-size: 70%;
    background-position: 400px 10px;
    background-repeat: no-repeat;
}

.content-1 .pagination-title {
      color: #fff;
    font-size: 15px;
    line-height: 25px;
    padding: 25px 15px 0 44px;
    text-align: center;
    list-style: none;
    position: relative;
    z-index: 5;
}


.slideshow-container2 {
    max-width: 100%;
    position: relative;
    margin: auto;
}

.prev2,
.next2 {
    visibility: hidden;
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}


.next2 {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.dot2 {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active2,
.dot2:hover {
    background-color: var(--bg-color-1);
}

.fade2 {
    animation-duration: 1.5s;
    animation-name: anime-swip;
}

@keyframes anime-swip {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.mySlides2 {
    width: 100%;
    height: 700px;
}

.big-slide-row {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 1rem;
}

.left-big-cart {
    width: 450px;
    height: 650px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.left-big-img {
    width: 450px;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.big-bron {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    z-index: 1;
    background-color: var(--bg-color-3);
    opacity: 0.7;
    top: -100%;
    left: -100%;
    transition: all 0.9s;
}

.big-bron-btn {
    width: 150px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid var(--bg-color-4);
    color: var(--text-color-1);
    background: transparent;
    font-size: 16px;
}

@keyframes big-bro {
    from {
        width: 0;
        height: 0;
        font-size: 0;
    }

    to {
        width: 150px0;
        height: 50px;
        font-size: 16px;
    }
}

.left-big-cart:hover .big-bron {
    top: 0;
    left: 0;
}

.left-big-cart:hover .big-bron-btn {
    animation-name: big-bro;
    animation-duration: 1.5s;
}

.left-big-img img {
    object-fit: cover;
    width: 450px;
    height: 450px;
}

.left-big-description {
    width: 450px;
    height: 200px;
    background-color: var(--bg-color-2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.line-big {
    width: 90%;
    height: 1px;
    background-color: var(--bg-color-8);
}

.hide-btns {
    width: 95%;
}

.left-big-btns {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
}

.left-big-cart:hover .hide-btns {
    display: none;
}

.left-big-cart:hover .show-btns {
    display: block;
}

.hide-btns .show-btns {
    display: block;
}

.show-btns {
    width: 95%;
    display: none;
}

.left-big-btns-2 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100px;
}

.left-big-btns-2 a {
    width: 100px;
    height: 40px;
    border-right: 1px solid var(--bg-color-8);
    color: var(--bg-color-8);
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 10px;
    padding-right: 15px;
}

.left-big-buttons {
    width: 300px;
    display: flex;
    column-gap: 0.3rem;
}

.left-big-price {
    color: var(--text-color-1);
    font-size: 18px;
    font-weight: 600;
}

.left-big-btns button {
    background: transparent;
    border-radius: 10px;
    border: 1px solid var(--bg-color-8);
    color: var(--bg-color-8);
    font-size: 14px;
    height: 36px;
    width: 80px;
}

.big-name-car {
    width: 90%;
    height: 100px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.big-name-car p {
    color: var(--text-color-1);
    font-size: 20px;
    font-weight: 600;
}

.right-litle-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 2rem;
}

.right-big-carts {
    width: 600px;
    height: 650px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.litle-auto-cart {
    width: 250px;
    height: 300px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.litle-auto-cart:hover .litle-bron {
    top: 0;
    left: 0;
}

.litle-auto-cart:hover .litle-bron-btn {
    animation: litlebron;
    animation-duration: 0.9s;
}

.litle-auto-img {
    width: 250px;
    height: 200px;
    position: relative;
}

.litle-bron {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color-3);
    opacity: 0.7;
    top: -100%;
    left: -100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
}

@keyframes litlebron {
    from {
        width: 0;
        height: 0;
        font-size: 0;
    }

    to {
        width: 130px;
        height: 40px;
        font-size: 16px;
    }
}

.litle-bron-btn {
    width: 130px;
    height: 40px;
    background: transparent;
    border-radius: 10px;
    border: 1px solid var(--bg-color-8);
    font-size: 16px;
    color: var(--text-color-1);
}

.litle-auto-img img {
    object-fit: cover;
    height: 200px;
}

.litle-auto-description {
    width: 250px;
    height: 100px;
    background-color: var(--bg-color-2);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.name-car-litle {
    width: 90%;
    height: 50px;
    display: flex;
    flex-direction: column;

}

.name-car-litle p {
    color: var(--text-color-1);
    font-weight: 500;
    font-size: 14px;
    line-height: 8px;
}

.show-right-btns {
    width: 95%;
}

.right-litle-btns {
    margin-top: 0.5rem;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--bg-color-8);
    justify-content: space-around;
}

.litle-auto-cart:hover .show-right-btns {
    display: none;
}

.litle-auto-cart:hover .show-right-btns-2 {
    display: block;
}

.show-right-btns {
    width: 95%;
}

.show-right-btns-2 {
    width: 95%;
    display: none;
}

.right-litle-btns2 {
    margin-top: 0.5rem;
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--bg-color-8);
    justify-content: space-around;
}

.right-litle-btns2 a {
    color: var(--bg-color-8);
    height: 30px;
    border-right: 1px solid var(--bg-color-8);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 0.3rem;
    column-gap: 0.5rem;
}

.right-litle-btns button {
    background: transparent;
    border-radius: 10px;
    border: 1px solid var(--bg-color-8);
    color: var(--bg-color-8);
    font-size: 10px;
    height: 30px;
    width: 60px;

}

.about-company {
    width: 100%;
    height: 550px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow: hidden;
    position: relative;
}

.about-company .filtering {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: brightness(60%);
}

.company-row {
    margin-top: 4rem;
    display: grid;
    grid-template-columns: 180px 180px 180px;
    justify-content: center;
    column-gap: 10rem;
    row-gap: 2rem;
}

.company-row .frame {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    align-items: center;
    text-align:center;
    width: 180px;
}


.frame img {
    width: 80%;
    height: 50px;
    object-fit: contain;
}

.frame span {
    color: var(--text-color-1);
    font-size: 18px;
    font-weight: 500;
}

.about-company .moved-cars {
    position: relative;
    display: flex;
    justify-content: space-between;
}


.moved-cars .left-move {
    width: 45%;
    height: 280px;
    z-index: 11;

}

.left-move img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.moved-cars .right-move {
    width: 45%;
    height: 280px;
    position: relative;
    z-index: 11;
}

.right-move img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.reveal {
    position: relative;
    transform: translateX(-100%);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateX(0);
    opacity: 1;
}

.reveal2 {
    position: relative;
    transform: translateX(200%);
    opacity: 0;
    transition: 1s all ease;
}

.reveal2.active {
    transform: translateX(0);
    opacity: 1;
}

.reveal4 {
    position: relative;
    transform: translateY(40%);
    opacity: 0;
    transition: 1s all ease;
}

.reveal4.active {
    transform: translateY(0);
    opacity: 1;
}


.video-section .left-image {
    width: 560px;
    height: 380px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.left-image .play {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--bg-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 0 2em transparent;
    animation: play 1s infinite;
    box-shadow: 0 0 0 2em transparent;
}


@keyframes play {
    0% {
        box-shadow: 0 0 0 0 var(--bg-color-1);
    }
}

.play i {

    font-size: 3.5rem;
    color: var(--text-color-1);
}

.video-row {
    column-gap: 2rem;
    align-items: center;
}

.video-section .right-title {
    width: 500px;
}

.right-title p {
    text-align: justify;
    font-weight: 400;
    font-size: 15px;
}

.count-row {
    column-gap: 1rem;
}

.count-row .count {
    width: 270px;
    height: 160px;
    background-color: var(--bg-color-7);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}

.count .count-logo {
    width: 90px;
    height: 90px;
    border: 1px dashed var(--text-color-2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.count-logo .count-img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-color: var(--bg-color-4);
    display: flex;
    justify-content: center;
    align-items: center;
}

.count-img img {
    width: 40px;
    height: 30px;
    object-fit: contain;
}

.count-title {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.count-title p {
    line-height: 10px;
}

.count-title p b {
    font-weight: 600;
    font-size: 30px;
}

.blog-text {
    width: 15% !important;
}

.blog-line {
    width: 9% !important;
}

.blog-row {
   display:grid;
   grid-template-columns: 370px 370px 370px;
    justify-content: start;
    column-gap: 1rem;
}

.blog-row .blog-item {
    width: 370px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.reveal3 {
    position: relative;
    transform: rotateY(-360deg);
    transition: 0.6s all ease;
}

.reveal3.active {
    transform: rotateY(0);
}

.blog-item .blog-image {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.blog-item:hover .blog-after {
    top: 0;
    transition: all 0.5s;
}



.blog-after {
    position: absolute;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color-3);
    opacity: 0.7;
    z-index: 1;
    top: -100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.blog-after a button {
    background: transparent;
    border: 1px solid var(--text-color-1);
    color: var(--text-color-1);
    border-radius: 10px;
    padding: 0.8rem 2rem;
}

.blog-hover:hover {
    border: 1px solid var(--bg-color-1);
    color: var(--text-color-2);
    transition: all 0.5s;
}

.blog-image{
     border-radius: 10px;
}

.blog-image img {
    width: 100%;
    height:300px;
    object-fit: cover;
}

.blog-title p {
    width: 100%;
    text-align: justify;
}

.blog-title a {
    color: var(--text-color-2);
}


.comment-container{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}


.comment-container .mySlides {
    display: none;
}

.comment-container .comment-row {
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 6rem;
    height: 100%;
    animation-name: fade;
    animation-duration: 3s;
}

.slideshow-container {
    width: 100%;
    position: relative;
    background-color: var(--bg-color-8);
   padding:40px 0;
}


.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: var(--text-color-2);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}


.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}


.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
    color: var(--text-color-2);
}


.comment-container .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: var(--bg-color-7);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.comment-container .active2,
.dot:hover {
    background-color: var(--bg-color-1);
}


.fade {
    opacity: 1 !important;
}

.comment-container {
    overflow-x: hidden;
}

.comment-container .comment-item {
    width: 100%;
    height: 380px;
    background-color: var(--bg-color-8);
    display: flex;
    align-items: center;
}

.comment-content {
    background-color: var(--bg-color-4);
    width: 650px;
    border-radius: 10px;
    position: relative;
}

.comment-content p {
    padding: 1rem;
}

.comment-content img {
    position: absolute;
    z-index: 11;
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    left: 3%;
    bottom: -15%;
}

.comment-col {
    width: 500px;
    height: 380px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    column-gap: 1rem;
}

.user-item {
    display: flex;
    align-items: center;
    column-gap: 1rem;
}

.user-item span {
    font-weight: 600;
}

.user-item img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: contain;
}

.comment-col .star img {
    width: 100px;
    height: 30px;
    object-fit: contain;
}


.faq-text {
    width: 10% !important;
}

.faq-line {
    width: 5% !important;
}

.faq-row {
    row-gap: 2rem;
}

button.accordion {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    text-align: left;
    padding: 20px 20px;
    font-size: 18px;
    border-radius: 40px;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    transition: background-color 0.2s linear;
    border: 2px solid var(--bg-color-1);
    position: relative;
}

button.accordion p {
 margin:0 40px 0 0;
}


button.accordion:after {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: FontAwesome;
    content: "\2b";
    font-family: "fontawesome";
    font-size: 15px;
    position: absolute;
    right: 30px;
    top: 15px;
    border: 1px solid var(--bg-color-1);
}

button.accordion.is-open:after {
    content: "\f068";
}

button.accordion:hover,
button.accordion.is-open {
    background-color: #ddd;
}

.accordion-content {
    background-color: white;
    border-left: 1px solid var(--bg-color-1);
    padding: 0 15px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-in-out;
    width: 96%;
    font-size: 18px;
}

.emblem-swipe {
    margin-top: 5rem;
    width: 100%;
    height: 180px;
    background-color: var(--bg-color-7);
    display: flex;
    align-items: center;
}

.model-wrapper {
    display: flex;
    align-items: center;
    column-gap: 2rem;
}

.model-swipe {
    width: 15%;
    height: 86px;
    background-color: var(--bg-color-7);
    animation: scalemodel 4s infinite;
    cursor: pointer;
    display: flex;
    align-items: center;
}

@keyframes scalemodel {
    from {
        transform: scale(1.2);
    }
}

.model-swipe img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* /////////////////////////////////////////About////////////////////////////////////////////////////// */

.about-we {
    height: 70px;
    border-left: 3px solid var(--bg-color-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-we p {
    line-height: 13px;
}

.about-we .title {
    font-weight: 600;
    font-size: 22px;
}

.about-car-section {
    overflow: hidden;
}


.about-car-row  .col-6 {
margin-bottom:20px;
}

.about-car-row {
    align-items: center;
}

.about-car-row .about-left-img img {
    object-fit: contain;
    width:80%;
}

/*.about-right-title {*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    align-items: center;*/
/*    height: 370px;*/
/*}*/

/*.about-right-title p {*/
/*    width: 90%;*/
/*    text-align: justify;*/
/*}*/

/*.about-bottom-img {*/
/*    height: 380px;*/
/*    width: 650px;*/
/*    position: relative;*/
/*}*/


/* /////////////////////////////////////////End about/////////////////////////////////////////////////// */

/* /////////////////////////////////////////CARS//////////////////////////////////////////////////////////// */

.car-filters {
    position: relative;
        z-index: 111111111;
}


.filter-row-1 {
    width: 70%;
    display: flex;
    height: 70px;
    column-gap: 20px;
}

.filter-row-2 {
    width: 90%;
    display: flex;
    justify-content: center;
}


.circle-models {
    height: 100px;
    display: flex;
    column-gap: 1rem;
}

.model-1 {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid var(--bg-color-10);
    cursor: pointer;
}

.myp{
    position: relative;
}

.myp input{
    visibility: hidden;
    position: absolute;
}

.type-model-car {
    width: 70px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.type-model-car span {
    font-weight: 400;
    font-size: 18px;
}


.model-1 img {
    width: 70%;
    height: 70%;
    object-fit: contain;
}

.type-model-car:hover .model-1 {
    animation: pulse 1s;
    box-shadow: 0 0 0 2em transparent;
}

.cars-header {
    border-left: 3px solid var(--bg-color-9) !important;
}

.car-min-price {
    position: relative;
    width: 10%;
    height: 60px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #bbb;
    border-left: 1px solid #bbb;
}

.car-min-price input {
    width: 95%;
    height: 50px;
    border: none;
    border-radius: 10px;
    outline: none;
    font-size: 1rem;
    background: transparent;
    font-size: 1.2rem;

    padding-left: 10px;
    font-size: 14px;
}

.min-pr {
    position: absolute;
    z-index: 0;
    font-weight: 500;
    font-size: 12px;
    padding-left: 0.5rem;
    color: #bbb;
}

.min-azn {
    color: #bbb;
    font-size: 14px;
    padding-right: 0.5rem;
}

.car-max-price {
    position: relative;
    width: 10%;
    height: 60px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #bbb;
}

.car-max-price input {
    width: 95%;
    height: 50px;
    border: none;
    border-radius: 10px;
    outline: none;
    font-size: 1rem;
    background: transparent;
    font-size: 1.2rem;
    padding-left: 10px;
    font-size: 14px;
}

.benzin {
    width: 10%;
    height: 60px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #bbb;
    border-right: 1px solid #bbb;
    cursor: pointer;
    position: relative;
}

.form-radio{
    position: absolute;
    visibility: hidden;
}


.dizel {
    width: 10%;
    height: 60px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #bbb;
    cursor: pointer;
    position: relative;
}

.border-model {
    border-radius: 10px 0 0 10px;
}

.bor-none {
    border-right: none !important;
}

.car-model-2 {
    width: 10%;
    height: 60px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-color-5);
    font-size: 14px;
    border-right: 1px solid #bbb;
    position: relative;
}

.model-submenu-2 {
    width: 100%;
    position: absolute;
    z-index: 1111111111111111111;
    background-color: var(--bg-color-11);
    color: var(--text-color-3);
    font-size: 14px;
    left: 0;
    top: 100%;
    padding-left: 1rem;
    display: none;
    cursor: pointer;
    
}

.model-submenu-3 {
    width: 100%;
    position: absolute;
    z-index: 55;
    background-color: var(--bg-color-11);
    color: var(--text-color-3);
    font-size: 18px;
    top: 100%;
    left: 0;
    padding-left: 1rem;
    display: none;
    cursor: pointer;
}

#myModel:hover .model-submenu-2 {
    display: block;
}

#myMark:hover .model-submenu-3 {
    display: block;
}

.ilmin {
    position: relative;
    width: 10%;
    height: 60px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #bbb;
}

.ilmin input {
    width: 95%;
    height: 50px;
    border-radius: 10px;
    outline: none;
    font-size: 1rem;
    background: transparent;
    font-size: 1.2rem;
    padding-left: 10px;
    font-size: 14px;
    align-items: center;
    justify-content: center;
    border:none;
}

.il-text {
    position: absolute;
    font-size: 14px;
    padding-left: 0.5rem;
    color: #bbb;
}

.il-text-min {
    color: #bbb;
    font-size: 14px;
    padding-right: 0.5rem;
}

.search-car {
    width: 10%;
    height: 60px;
    color: var(--text-color-1);
    font-size: 18px;
    background-color: var(--bg-color-1);
    border: none;
    border-radius: 0 10px 10px 0;
}


.auto-carts {
    display: grid;
    grid-template-columns: 270px 270px 270px 270px;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
    row-gap: 3rem;
    position: relative;
    z-index: 1;
}

.cart-auto {
    width: 100%;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.first-swip:hover {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.4);
}

.brone {
    position: absolute;
    width: 100%;
    height: 250px;
    top: -100%;
    left: -100%;
    background-color: var(--bg-color-3);
    opacity: 0.7;
    transition: all 0.5s;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.brone a button {
    width: 150px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 10px;
    color: var(--text-color-1);
    background: transparent;
    font-size: 16px;
}

.cart-auto:hover .brone-btn {
    animation: brone;
    animation-duration: 0.9s;
}

@keyframes brone {
    from {
        width: 0;
        height: 0;
        font-size: 0;
    }

    to {
        width: 150px;
        height: 50px;
        font-size: 16px;
    }
}

.cart-auto:hover .brone {
    top: 0;
    left: 0;
}

.cart-auto img {
    width: 100%;
    height: 250px;
    object-fit:cover;
}

.cart-auto .auto-description {
    background-color: var(--bg-color-2);
    color: var(--text-color-1);
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auto-description p {
    width: 100%;
    text-align: start;
    padding: 1rem 0 0 1rem;
    line-height: 10px;
    font-size:16px;
}


.auto-line {
    width: 95%;
    height: 2px;
    background-color: var(--bg-color-8);
}

.auto-bottom {
    background-color: var(--bg-color-2);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.9rem;
    border-radius: 0 0 10px 10px;
    height: 50px;
}

.cart-auto:hover .auto-bottom {
    display: none !important;
}

.cart-auto:hover .see-display {
    display: block !important;
}

.see-car {
    background-color: var(--bg-color-2);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1.1rem;
    border-radius: 0 0 10px 10px;
    height: 100%;
}

.see-display {
    height: 50px;
    display: none;
}

.see-car a {
    background: transparent;
    color: var(--bg-color-8);
    border-right: 1px solid var(--bg-color-8);
    margin: 10px 0;
    width: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
}

.auto-bottom button {
    background: transparent;
    color: var(--bg-color-8);
    border-radius: 10px;
    border: none;
    margin: 10px 0;
}

/* .........................Services....................................................... */

.bgbmw {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(60%);
    background-attachment: fixed;
}


.services-row {
    display: grid;
    grid-template-columns: 30% 30% 30%;
    row-gap: 2rem;
    column-gap: 2rem;
    padding-top: 1rem;
    justify-content: center;
}

.service {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--text-color-1);
}

.service p{
    text-align:center;
}

.service-head {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.service-head:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    border-radius: 50%;
    border: 2px dashed var(--bg-color-1);
    animation: spinborder 100s infinite;
}

@keyframes spinborder {

    to {
        transform: rotate(1000deg);
    }
}

.service-inner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #ECECEC;
    display: flex;
    justify-content: center;
    align-items: center;
}

.service-inner img {
    width: 55%;
    height: 55%;
    object-fit: contain;
}

.service-name {
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    color: var(--text-color-1);
}


/* ///////////////////////////////////////CONTACT///////////////////////////////////////////////////////////////////////////// */

.adress a {
    color: var(--text-color-1);
    text-decoration: underline;
}

.adress {
    color: var(--text-color-1);
}

.contact-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    row-gap: 2rem;
}

.contact-form input {
    height: 50px;
    border-radius: 10px;
    border: none;
    outline: none;
    background: transparent;
    border: 1px solid var(--text-color-1);
    color: var(--text-color-1);
    padding-left: 1rem;
    font-size: 16px;
}

.contact-form input::placeholder {
    color: var(--text-color-1);
}

.contact-form textarea::placeholder {
    color: var(--text-color-1);
}

.contact-form label {
    color: var(--text-color-1);
}

.contact-form textarea {
    width: 97%;
    background: transparent;
    padding-left: 1rem;
    padding-top: 10px;
    outline: none;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    border: 1px solid var(--text-color-1);
    color: var(--text-color-1);
}

.contact-item {
    row-gap: 1rem;
}

.contact-form button {
    width: 310px;
    height: 54px;
    background-color: var(--bg-color-1);
    color: var(--text-color-1);
    border: none;
    font-size: 16px;
}



/* /////////////////////////////////////About-car////////////////////////////////////////////////// */



.image-clicked {
    width: 500px;
    height: 500px;
    border-radius: 10px;
     cursor: zoom-in;
    overflow: hidden;
}

.image-clicked img {
    object-fit: cover;
    width:100%;
    height:100%;
}

.other-car-images .swiper {
    margin-top: 4rem;
}

.other-car-images {
    width: 500px;
}

.other-car-images .swiper-slide {
    width: 92px;
    height: 70px;
    border-radius: 0px;
}

.other-car-images img {
    object-fit: contain;
    cursor: pointer;
}

.name-clicked-car {
    font-weight: 600;
    font-size: 20px;
}

.description-clicked-car {
    color: #312E2E;
    font-weight: 400;
    font-size: 14px;
    text-align: justify;
}

.price-clicked-car {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.price-clicked-car p {
    font-weight: 600;
    font-size: 20px;
}

.daily {
    color: var(--text-color-2);
}

.make-bron button {
    width: 235px;
    height: 60px;
    color: var(--text-color-1);
    background-color: var(--bg-color-9);
    border: none;
    font-size: 16px;
    font-weight: 500;
}

.line-clicked {
    height: 1px;
    background-color: var(--bg-color-5);
}

.propertyes-clicked {
    width: 500px;
    height: 240px;
    border-radius: 10px;
    
    background: #F2F2F2;
    overflow: hidden;
}



.property-col {
    width: 250px;
    height: 80px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}

.property-col img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}



.clicked-car-swiper .cart-auto {
    background-color: var(--bg-color-2);
}

#swip2{
    display: none;
}

#swip3{
    display: none;
}

#swip4{
    display: none;
}

.clicked-car-swiper .cart-auto img {
    object-fit: cover;
}

.clicked-car-swiper .cart-auto .auto-bottom button {
    padding: 0.3rem;
}

.clicked-car-swiper .cart-auto .see-car a {
    font-size: 0.9rem;
}

.security-item {
    text-align: justify;
}

/* ///////////////////////////////////////////////////Network////////////////////////////////////////// */


@keyframes draw {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -100;
    }
}

@keyframes drop {
    0% {
        transform: translateY(-300%) scale(.3, 1.8);
        animation-timing-function: cubic-bezier(1, 0, 1, 1);
    }

    70% {
        transform: translateY(0%) scale(1, 1.2);
        animation-timing-function: ease;
    }

    80% {
        transform: translateY(0%) scaleY(.8);
    }

    100% {
        transform: translateY(0%) scaleY(1);
    }
}

#animation {
    position: relative;
    width: 200px;
    height: 174px;
}

#animation-wrapper {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
}


#BigMarker,
#SmallMarker {
    position: absolute;
    width: auto;
    transform: translateY(-300%) scale(.3, 1.8);
    animation-duration: 5s;
    transform-origin: bottom center;
    animation-name: drop;
    animation-fill-mode: forwards;
}

#BigMarker {
    height: 84%;
    left: 0;
    bottom: 0.1%;
}

#SmallMarker {
    height: 56%;
    left: 59%;
    bottom: 31%;

    animation-delay: 1.8s;
}

#MarkerPath,
#MarkerPathOverlay {
    position: absolute;
    height: 35%;
    width: auto;
    bottom: 0;
    left: 32%;
}

#MarkerPathOverlay path {
    stroke-dasharray: 100;
    stroke-dashoffset: 0;
    animation-duration: 2s;
    animation-name: draw;
    animation-timing-function: linear;
    animation-delay: .9s;
    animation-fill-mode: forwards;
}


.network-col1 {
    column-gap: 2rem;
}

.network-col1 p,
h3 {
    text-align: center;
}

.network-adress {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
    justify-content: center;
}

.network-adress a {
    color: var(--text-color-5);
    text-align: center;
}

.map-col {
    width: 90vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.map-col iframe {
    width: 100%;
}

/* ///////////////////////////////////////////////////BRON Et////////////////////////////////////////// */

.giving-1 .giving-title {
    font-size: 18px;
    font-weight: 600;
}

.giving-2 {
    border-radius: 10px;
}

.giving-item {
    height: 60px;
    background-color: #f6f6f6;
    border-right: 1px solid var(--bg-color-1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    position: relative;

}

.giving-item i {
    color: var(--text-color-2);
    transition: all 0.5s;
}

#giveCar {
    border-radius: 10px 0 0 10px;
    padding: 0 15px 0 15px;
}
#giveCar2 {
    padding: 0 15px 0 15px;
}

.giving-item input {
    width: 95%;
    height: 55px;
    background: transparent;
    color: #7b7b7b;
    text-align: center;
    outline: none;
    border: none;
}

.giving-item-submenu {
    position: absolute;
    z-index: 1645;
    width: 100%;
    left: 0;
    top: 100%;
    background-color: #f6f6f6;
    display: none;
}

.giving-item-submenu2 {
    position: absolute;
    z-index: 1645;
    width: 100%;
    left: 0;
    top: 100%;
    background-color: #f6f6f6;
    display: none;
}
.giving-item-submenu label{
    cursor:pointer;
}

.giving-item-submenu p {
    font-size: 14px;
    color: #7b7b7b;
    padding: 5px 10px;
    margin-bottom:0;
    cursor:pointer;
    
    transition:0.5s;
}
.giving-item-submenu p:hover{
    background: #FDCB01;
    color: white;
    transition:0.5s;
}

.giving-item-submenu2 p {
    font-size: 14px;
    color: #7b7b7b;
    padding: 5px 10px;
    margin-bottom:0;
    cursor:pointer;
    transition:0.5s;
}
.giving-item-submenu2 p:hover{
    background: #FDCB01;
    color: white;
    transition:0.5s;
}
.giving-2 .delivery-address{
    padding:0 8px;
}
.giving-2 .delivery-address input{
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: left;
    height: 40px;
    margin-bottom: 10px;
    border-radius: 4px;
    
}

.center-buy {
        font-size: 14px;
    color: #7b7b7b;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    align-items: center;
}

.confirm-btn {
    width: 15%;
    height: 60px;
    background-color: var(--bg-color-1);
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirm-btn button {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 16px;
    color: var(--text-color-1);
    font-weight: 600;
}

.extra-row {
    display: grid;
    grid-template-columns: 270px 270px 270px 270px;
    column-gap: 1rem;
}

.extra-cart {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.extra-img {
    width: 100%;
    height: 270px;
}

.extra-img img {
    object-fit: contain;
}

.extra-bottom {
    width: 100%;
    height: 135px;
    background-color: var(--bg-color-2);
    border-radius: 0 0 10px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.extra-bottom p {
    width: 90%;
    line-height: 14px;
}

.name-extra {
    padding-top: 20px;
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color-1);
}

.price-extra {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color-1);
}

.extra-counter {
    width: 90%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.extra-counter form{
    width:100%;
    display:flex;
    justify-content:space-between;
}

.extra-count {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

.extra-sifaris{
    border:none;
    border-radius:5px;
    color:white;
    font-weight:bold;
    background-color: var(--bg-color-1);
     width: 90px;
}

.extra-count button {
    width: 40px;
    height: 40px;
    border: none;
    background-color: var(--bg-color-1);
    color: var(--text-color-1);
}

.decrement {
    border-radius: 5px 0 0 5px;
}

.increment {
    border-radius: 0 5px 5px 0;
}

.extra-count div {
    width: 40px;
    height: 40px;
    background-color: var(--bg-color-11);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 400;
    padding-left: 15px;
}

.extra-count div input {
    width: 40px;
    height: 100%;
    text-align: center;
    border: none;
    background: transparent;
    outline: none;
}




/*new section*/

.check_main_container{
    column-gap: 80px;
}

.checkout_container{
    width: 300px;
    height: 100vh;
    position: absolute;
    z-index: 111;
    right:2%;
    top: 0;
}

.checkout-inner{
    width: 100%;
    height: 145vh;
    position: relative;
    z-index: 1111;
}

.checkout_fixed{
    width: 100%;
    height: 250px;
    position: sticky;
    top: 20%;
    right: 0;
    display: flex;
    flex-direction: column;
}

.checkout_fixed h3{
    width: 270px;
}

.checkout_property{
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 10px 1px rgb(0 0 0 / 16%);
    border-radius: 5px;
    background-color: var(--bg-color-2);
}

.check_pro_1{
    width: 100%;
    height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5px 0 5px;
    font-size: 14px;
    color: var(--text-color-1);
    padding: 0 10px 0 10px;

}

.btn_checkout{
    width: 100%;
    height: 50px;
    border: none;
    background-color: var(--bg-color-9);
    color: #fff;
    border-radius:  0 0 5px 5px;
    font-weight: bold;
}

/*new section*/


.name-variable {
    font-size: 18px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    row-gap: 1.5rem;
}

.name-variable p{
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.property-variable {
    width: 50%;
    display: flex;
    justify-content: space-between;
}




.active-brone {
    background-color: var(--bg-color-1) !important;
}

.active-brone {
    background-color: var(--bg-color-1) !important;
}

.name-variable button {
    width:90%;
    position: relative;
    height: 40px;
    border: none;
    background-color: var(--bg-color-9);
    color: var(--text-color-1);
    font-size: 16px;
}

.name-variable button input{
    position: absolute;
    visibility: hidden;
}

.name-variable button label{
    width: 100%;
    height: 100%;
    padding-top: 8px;
    cursor:pointer;
}

.pro-1 {
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pro-1 img {
    width: 50%;
    height: 50%;
    object-fit: contain;
}






.data-drive {
    font-size: 30px;
    font-weight: 600;
}

.data-driver-col input {
    width: 100%;
    height: 50px;
    outline: none;
    border-radius: 10px;
    border: none;
    background-color: #f8f8f8;
    padding-left: 10px;
}

.data-driver-col label {
    font-size: 15px;
    font-weight: 500;
    padding-left: 10px;
}

.data-driver-col {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.cash-col {
    width: 35%;
    padding-left: 50px;
}

.submit-end button{
    width:150px;
    height:3.5rem;
    background-color:var(--bg-color-9);
    border:none;
    color:white;
    font-weight:bold;
    font-size:18px;
    border-radius:5px;
}

.type-cashing {
    width: 95%;
    height: 50px;
    border-radius: 10px;
    background-color: var(--bg-color-2);
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 2rem;
}

.type-cashing button {
    width: 160px;
    height: 50px;
    border: none;
    color: var(--text-color-1);
    background-color: var(--bg-color-2);
}

.selected-metod {
    background-color: var(--bg-color-9) !important;
}

.data-cart-title {
    font-size: 18px;
}

.carts {
    display: flex;
    column-gap: 2rem;
}

.visa {
    width: 140px;
    height: 100px;
    cursor: pointer;
}

.active-cart {
    border-radius: 10px;
    border: 1px solid var(--text-color-2);
}

#cashkart {
    width: 85%;
}

.visa img {
    object-fit: contain;
    width: 100%;
    height: 100%;
}

.data-cart-col {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.data-num-col {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.data-cart-col input {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color: #f8f8f8;
    text-align: center;
}

.data-num-col input {
    width: 100%;
    height: 50px;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color: #f8f8f8;
    text-align: center;
}

.submit-data-cart {
    display: flex;
    justify-content: center;
}

.submit-data-cart button {
    width: 100%;
    height: 50px;
    border: none;
    background-color: var(--bg-color-9);
    color: var(--text-color-1);
    border-radius: 10px;
}

.nagd {
    display: none;
}

.nagd p {
    margin-top: 5rem;
    font-size: 16px;
    font-weight: 600;
}


/* blog-inner */

.blog-inner-row{
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: relative;
    column-gap: 3rem;
}

.blog-inner-row p{
    text-align: justify;
    width: 100%;
}

.blog-right{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


.blog-inner-img{
     background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    width:100%;
    height: 250px;
    overflow: hidden;
}

.blog-inner-img img{
    object-fit: contain;
}


footer .foot-ul {
    list-style: none !important;
    padding-left: 0 !important;
}

footer li {
    line-height: 2rem;
}


footer ul a {
    color: var(--bg-color-3);
    position: relative;
    font-size: 18px;
}

footer ul a:hover {
    color: var(--text-color-5);
}

footer ul a:before {
    width: 36px;
    height: 36px;
    font-family: FontAwesome;
    content: "\f1b9";
    position: absolute;
    left: 0;
    font-family: "fontawesome";
    font-size: 15px;
    color: var(--bg-color-1);
    left: -20px;
    display: none;
}

footer ul a:hover:before {
    display: block;
}

footer ul a:after {
    content: '';
    width: 0;
    height: 1px;
    background-color: var(--bg-color-1);
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
}

.contact-ul a:after {
    content: '';
}

.contact-ul a:before {
    content: '';
}

.contact-ul a:hover:after {
    width: 0;
}

footer ul a:hover:after {
    width: 100%;
    transition: all 0.3s linear;
}



footer .faydali {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

footer ul p {
    font-size: 18px;
}

.footer-contact ul {
    list-style: none;
}

.faydali p {
    font-size: 18px;
}

.footer-contact p {
    line-height: 8px;
}

.fh {
    font-size: 18px;
}

footer .company {
    border-top: 1px solid #000;
    position: relative;
}

footer .company-name a {
    color: var(--text-color-3);
    font-weight: 600;
    font-size: 17px;
}

footer .social-icons {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 1rem;
    position: absolute;
    right: 0;
    bottom: 0;
}

.social-icons a:hover {
    transition: all 0.5s;
    color: var(--bg-color-1);
}

footer .social-icons a {
    color: var(--text-color-3);
    font-size: 20px;
}


/* Loader */

.car-road {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: 44454554245245245;
    background-color: var(--bg-color-10);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.load-inner {
    width: 100vw;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    filter: brightness(60%);
    position: absolute;
    top: 0;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: scaleload 2s;
    filter: brightness(60%);
}

@keyframes scaleload {
    from {
        transform: scale(0);
        opacity: 0;
    }

    from {
        transform: scale(1.5);
        opacity: 1;
    }
}

.main-load {
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#loader-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 15;
    overflow: hidden;
}

.loader {
    width: 150px;
    height: 150px;
    border: 1px #fff solid;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
}

.loader .loading {
    font-size: 10px;
    position: absolute;
    width: 100%;
    text-align: center;
    line-height: 14px;
    font-family: 'Century Gothic', sans-serif;
    font-style: italic;
    left: 0;
    top: 50%;
    margin-top: 20px;
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
}

.loader-circle-1 {
    width: 138px;
    height: 138px;
    left: 5px;
    top: 5px;
    border: 1px #fff solid;
    border-radius: 50%;
    position: absolute;
    border-right-color: transparent;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

.loader-circle-2 {
    width: 126px;
    height: 126px;
    left: 5px;
    top: 5px;
    border: 1px transparent solid;
    border-radius: 50%;
    position: absolute;
    border-right-color: #e81512;
    -webkit-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
}

.loader .line {
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
}

.loader .line:nth-child(1) {
    left: 16px;
    top: 50%;
    margin-top: -1px;
}

.loader .line:nth-child(2) {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    left: 33px;
    top: 33px;
}

.loader .line:nth-child(3) {
    top: 16px;
    left: 50%;
    width: 2px;
    height: 10px;
}

.loader .line:nth-child(4) {
    transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    right: 33px;
    top: 33px;
}

.loader .line:nth-child(5) {
    right: 16px;
    top: 50%;
    margin-top: -1px;
}

.loader .line:nth-child(6) {
    transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    right: 33px;
    bottom: 33px;
    background: #e81512;
}

.loader .subline {
    position: absolute;
    width: 3px;
    height: 2px;
    background: #fff;
}

.loader .subline:nth-child(7) {
    transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    left: 21px;
    top: 50px;
}

.loader .subline:nth-child(8) {
    transform: rotate(67.5deg);
    -moz-transform: rotate(67.5deg);
    -webkit-transform: rotate(67.5deg);
    -ms-transform: rotate(67.5deg);
    left: 50px;
    top: 21px;
}

.loader .subline:nth-child(9) {
    transform: rotate(112.5deg);
    -moz-transform: rotate(112.5deg);
    -webkit-transform: rotate(112.5deg);
    -ms-transform: rotate(112.5deg);
    right: 50px;
    top: 21px;
}

.loader .subline:nth-child(10) {
    transform: rotate(157.5deg);
    -moz-transform: rotate(157.5deg);
    -webkit-transform: rotate(157.5deg);
    -ms-transform: rotate(157.5deg);
    right: 21px;
    top: 50px;
}

.loader .subline:nth-child(11) {
    transform: rotate(22.5deg);
    -moz-transform: rotate(22.5deg);
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    right: 20px;
    bottom: 49px;
    background: #e81512;
}

.loader .needle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px #fff solid;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px 0 0 -8px;
    z-index: 1;
    -webkit-animation: pegIt 3s infinite ease-in-out;
    animation: pegIt 3s infinite ease-in-out;
}

.loader .needle:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3.5px 50px 3.5px 0;
    border-color: transparent #e81512 transparent transparent;
    position: absolute;
    right: 50%;
    top: 50%;
    margin: -3.5px 0 0 0;
    border-radius: 0 50% 50% 0;
}

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

    16% {
        transform: rotate(75deg);
    }

    25% {
        transform: rotate(55deg);
    }

    30% {
        transform: rotate(90deg);
    }

    36% {
        transform: rotate(170deg);
    }

    42% {
        transform: rotate(150deg);
    }

    50% {
        transform: rotate(227deg);
    }

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

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

    16% {
        -webkit-transform: rotate(75deg);
    }

    25% {
        -webkit-transform: rotate(55deg);
    }

    30% {
        -webkit-transform: rotate(90deg);
    }

    36% {
        -webkit-transform: rotate(170deg);
    }

    42% {
        -webkit-transform: rotate(150deg);
    }

    50% {
        -webkit-transform: rotate(227deg);
    }

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

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

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

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

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


/* /////////////////////////Tarafic-lights////////////////////////////////////////////// */

.stoplights {
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.stoplight {
    margin: 0 30px 0 30px;
}

.lights {
    padding: 15px 0 15px 0;
    display: flex;
    flex-direction: column;
    height: 250px;
    width: 100px;
    background: black;
    border-radius: 5px;
}

.light {
    margin: auto;
    height: 75px;
    width: 75px;
    border-radius: 100px;
}

.red1,
.red2 {
    background: rgba(255, 0, 0, 1);
    transition: background 0.5s;
}

.red-off {
    background: rgba(255, 0, 0, 0.25);
}

.yellow1,
.yellow2 {
    background: rgba(255, 212, 0, 1);
    transition: background 0.5s;
}

.yellow-off {
    background: rgba(255, 212, 0, 0.25);
}

.green1,
.green2 {
    background: rgba(36, 205, 3, 1);
    transition: background 0.5s;
}

.green-off {
    background: rgba(36, 205, 3, 0.25);
}

.pole {
    height: 200px;
    width: 25px;
    background: #000;
    margin: 0 auto;
}

.hlANmy{
    background-color:#FDCB01 !important;
}