@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{box-sizing: border-box;margin: 0;padding: 0;background: #f4f4f4}
html{font-family: "Exo 2", sans-serif;scroll-behavior: smooth}
.flex{display: flex;justify-content: center}
.pixel{width: 1400px}
.pc{display: initial}
.mobil{display: none}
.beyaz{display: none}
nav{background: #1d1f46;height: 85px;border-bottom: 2px solid #de2a1d;position: fixed;width: 100%;z-index: 1000}
.space{height: 85px}
.navbar-container{display: flex;justify-content: space-between;}
.navbar-container .logo{width: auto;height: 85px;display: flex;justify-content: start;align-items: center;}
.navbar-container .logo img{width: 120px;}
.navbar-container .list{width: auto;}
.navbar-container .list ul{margin: 0;padding: 0;display: flex;justify-content: end; align-items: center;height: 85px}
.navbar-container .list ul li{margin: 0 10px;color: #f4f4f4;font-weight: 800}
.navbar-container .list ul li a{color: #f4f4f4;font-weight: 500;font-size: 20px}
.navbar-container .right{background: #f4f4f4;width: 30%;display: flex;height: 85px}
.navbar-container .right .search{width: 145px;display: flex;justify-content: center;align-items: center;}
.navbar-container .right .search img{width: 35px;cursor: pointer;padding: 20px}
.navbar-container .right .search form{position: absolute;width: 300px;background: #f4f4f4;padding: 15px 10px;bottom: -189px;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;}
.navbar-container .right .search form label{font-size: 16px}
.navbar-container .right .search form button{    width: 100%;height: 35px;border: none;background: #09242d;color: #78c406;font-size: 20px;letter-spacing: 8px;font-weight: 500;cursor: pointer;}
.navbar-container .right .search form input{width: 97%;height: 40px;margin: 10px 0;font-size: 15px;background: none;outline: none;border: 1px solid;padding: 0 5px}
.navbar-container .right .test{width: 100%;background: #78c406;display: flex;justify-content: center;align-items: center;}
.navbar-container .right .test img.drift{width: 50px;position: absolute;opacity: 0;animation: fadeCycle 3s infinite;}
.navbar-container .right .test img.drift:nth-child(1) {animation-delay: 0s;}
.navbar-container .right .test img.drift:nth-child(2) {animation-delay: 0.5s;}
.navbar-container .right .test img.drift:nth-child(3) {animation-delay: 1s;}
.navbar-container .right .test img.drift:nth-child(4) {animation-delay: 1.5s;}
.navbar-container .right .test img.drift:nth-child(5) {animation-delay: 2s;}
.navbar-container .right .test img.drift:nth-child(6) {animation-delay: 2.5s;}
@keyframes fadeCycle {
    0%, 19.11% {opacity: 1;}
    19.12%, 100% {opacity: 0;}
}
.yan-menu{
    width: 145px;
    height: 85px;
    display: none;
}
.yan-menu a{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: 100%;
}
.yan-menu img{width: 50px;}
.message{background: #00ff39;padding: 10px;color: #4b4b4b;}
.alert{padding: 10px;background: red;color: white;}
.menu{
    top: 0;
    right: 0;
    width: 100%;
    transform: scaleX(0);
    transform-origin: right;
    position: fixed;
    background: rgba(0,0,0,0.7);
    z-index: 100;
    height: 100vh;
    opacity: 1;
    transition: transform 0.7s cubic-bezier(.74,-0.03,.83,.67), opacity 0.7s cubic-bezier(.74,-0.03,.83,.67);
    display: flex;
    justify-content: end;
    overflow: hidden;
}
.menu.active{
    transform: scaleX(1);
}
.menu-bg{width: 30%;background: #f4f4f4;text-align: center;font-size: 1.3em;height: 100vh;}
.menu-open{ transform: scaleX(1); opacity: 1; }
#menu-btn-second, #menu-btn-second2{cursor: pointer;}
.yan-nav{
    display: flex;
    align-items: center;
    justify-content: start;
    margin-top: 25px;
    position: relative;
}
.yan-nav a#menu-btn-second2{
    background: #de2a1b;
    width: 35%;
    height: 55px;
    position: absolute;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    top: -26px;
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0 100%);
}
.yan-nav h1{font-size: 18px;font-weight: 500;color: #f4f4f4;margin-left: 40px;}
.yan-nav img{width: 35px;margin: 10px;}
.yan-nav i{color: #fff;font-size: 30px;}
.menu ul{display: block;padding: 20px 0px;}
.menu ul li{
    width: 100%;
    margin: 0px;
    font-weight: 300;
    text-align: start;
    border-bottom: 1px solid #d9dbda;
    padding: 15px 20px;
    text-transform: uppercase;
    font-size: 20px;
}
.menu ul li a{color: #09242d;}


.navbar-container .right .test h1{    color: white;font-size: 20px;margin: 20px 0;font-weight: 400;}
ul{list-style: none}
a{text-decoration: none}

/* Scrollbar genişliğini ayarlar */
::-webkit-scrollbar {
    width: 12px;
}

/* Scrollbar arkaplan rengi */
::-webkit-scrollbar-track {
    background-color: #f4f4f4;
}

/* Scrollbar sürükleme kısmının rengi */
::-webkit-scrollbar-thumb {
    background-color: #1d1f45;
    border-bottom-left-radius: 20px;
}

/* Hover durumunda scroll renkleri */
::-webkit-scrollbar-thumb:hover {
    background-color: #dc2a1b;
}


.slider{width: 100%;height: auto}
.slider-container{width: 100%;}
.slider-containers{display: none}
.slider-container img{width: 100%;;object-fit: cover}

.tarz{width: 100%;height: 50vh;background: #f4f4f4;padding: 20px 0;position: relative}
.tarz-title{width: 100%;text-align: center}
.tarz-title h1{margin: 0;padding: 0;letter-spacing: 35px;font-size: 40px;font-weight: 400}

.tarz-title span {
    display: inline-block;
    position: relative;
    animation: slideDown 0.3s forwards;
    opacity: 0;
}

@keyframes slideDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.tarz-container{width: 100%;height: 85%;}
.tarz-container a{height: 100%;display: flex;align-items: center;justify-content: center}
.tarz-container a img{width: 35vh}
.tarz img.left-arrow{position: absolute;left: 15px;top: 48%;z-index: 0}
.tarz img.right-arrow{position: absolute;right: 15px;top: 48%;z-index: 0}
.tarz-select{width: 100%;display: flex;justify-content: center;}
.tarz-select h1{
    margin: 0;
    width: 250px;
    background: #78c406;
    text-align: center;
    color: #09242d;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 5px;
    padding: 5px;
}

.green-card{height: 70vh;background: #78c406;border-top: 2px solid #09242d}

.logos{width: 100%;height: 200px;display: flex;align-items: center;justify-content: center}
.logos-container{height: auto;width: 1100px;}
.logos-container.alt{height: 200px;width: 100%;}
.logos-container a{margin: 0 50px;height: 100%;display: flex;justify-content: center;align-items: center}
.logos-container a img{width: 120px;filter: grayscale(1);opacity: 0.5;}
.logos-container a img.top-logos{width: 120px;filter: grayscale(0);opacity: 1;}
.logos-container a:hover img{filter: grayscale(0);opacity: 1;}




.bottom-nav{display: none}

/*MARKA*/

.all-marka{width: 100%;height: 72vh;background: #f4f4f4;}
.all-marka-container{display: flex;align-items: center;justify-content: space-between}
.all-marka-col-1{width: 30%;height: 72vh;position: relative}
.all-marka-bg{position: absolute;z-index: 0;height: 100%;clip-path: polygon(0 0, 100% 0%, 75% 100%, 0 100%);width: 100%;}
.all-marka-col-1 .all-marka-title{padding: 25px;position: relative}
.all-marka-col-1 .all-marka-title img{width: 175px;height: 85px;object-fit: contain}
.all-marka-motor{position: relative;text-align: end}
.all-marka-motor img{width: 80vh}
.all-marka-col-1 .all{width: 100%;position: relative;top: -25px;}
.all-marka-col-1 .all a{display: flex;justify-content: center;align-items: center;color: #f4f4f4;}
.all-marka-col-1 .all a h1{font-size: 25px;font-weight: 600}
.all-marka-col-1 .all a img{margin: 0 20px}

.all-marka-col-2{width: 60%;}
.all-marka-slider{padding: 0 20px;height: auto;}
.all-marka-slider a{color: #57574e}
.all-marka-slider a h1{display: flex;font-size: 17px; justify-content: center;margin: 0;}
.all-marka-col-2 img{width: 27vh;margin: 0 10px;height: 150px;object-fit: contain}

/*MARKA*/

.green-card{display: flex;align-items: center;}
.green-moto{width: 50%;display: flex;justify-content: center}
.green-moto img{width: 70%}
.green-text{width: 40%;}
.green-text h1{font-size: 25px;color: #f4f4f4;font-weight: 600;font-style: italic}
.green-text p{font-size: 19px;color: #f4f4f4;font-weight: 400;line-height: 1.3}

/*MODEL*/

.all-model{margin: 50px 0}
.model-logo{margin: 20px 0}
.model-filter form{display: flex;width: 100%;justify-content: space-between}
.filter-card{width: 19.5%;background: #78c406;display: flex;align-items: center}
.filter-card h1{text-align: center;width: 100%;font-size: 20px;color: white;font-weight: 500;}
.filter-card input{width: 80%;background: none;padding: 0;margin: 0;border: none;outline: none;height: 60px;text-align: end;color: white;font-size: 20px;font-weight: 500}
.filter-card img{width: 17px;margin: 0 0 0 10px}
.model-filter button{background: none;border: none;cursor: pointer}
.filter-card input::placeholder{color: white;font-size: 20px;font-weight: 500}

.model-card-all{width: 100%;display: flex;flex-wrap: wrap;}
.model-card{width: 350px;margin: 100px 0;}
.model-card-in{width: 250px;background: #ebecec;border-radius: 40px;position: relative}
.model-card-head{position: relative;top: -43px;left: 0}
.model-card-head img{width: 94%;position: absolute;right: 0;}
.model-card-head h1{ position: absolute;top: 30px;color: white;font-size: 16px;right: 15px;font-weight: 600;}
.model-motor-image{position: relative;z-index: 1}
.model-motor-image img{ width: 360px;margin-top: 70px;}
.model-motor-info{display: flex;justify-content: center;}
.model-hr-line{width: 100%;height: 1px;margin: 10px 0 0 0}
.model-motor-info span{font-size: 17px;color: black;font-weight: 600;margin: 0;padding: 0}
.model-motor-info hr{margin: 0 10px;border-right: 2px solid}
.model-detay-buton h1{color: black;text-align: center;font-size: 16px;padding: 15px 0;margin: 0;font-weight: 600;}

.model-card-head img.all-model-logo{    width: 80px;top: 35px;right: 10px;}
.compare-card{background: none;width: 38px;padding: 0 5px;border-radius: 20px;display: flex;align-items: center;overflow: hidden;transition: 0.5s ease-in-out;position: absolute;top: 0;cursor: pointer}
.compare-card img{width: 40px;margin: 0;position: relative;z-index: 1}
.compare-card span{margin: 0 5px;font-size: 13px;font-weight: 600;position: relative;left: -50px;transition: 0.1s ease-in-out;opacity: 0}
.compare-card:hover span{margin: 0 5px;font-size: 13px;font-weight: 600;position: relative;left: 0;transition: 0.3s ease-in-out;opacity: 1}
.compare-card:hover{width: fit-content;transition: 0.5s ease-in-out;background: white}
/*MODEL*/

/*SINGLE*/

.single-title{ width: 55%;height: 72vh;position: relative;display: flex;align-items: center;}
.single-title-container{width: 100%}
.model-title h1{font-size: 55px}
.single-title-hr{width: 100%;height: 1px;border-top: 1px solid black;margin: 50px 0}
.model-color h2{font-size: 25px}
.select-color{margin: 40px 0; display: flex}
.color-circle{width: 135px;height: 90px;display: flex;justify-content: center;align-items: center;margin: 0 25px 0 0}
.color-circle img{width: 135px;transition: 0.2s ease-in-out}
.color-circle:hover img{width: 145px; transition: 0.2s ease-in-out}
.motor-info{width: 100%;padding: 10px 0;height: 120px;background: #f4f4f4;}
.motor-info-card{display: flex;justify-content: center;align-items: center;height: 100%;width: 100%;}
.motor-card{font-size: 30px;font-weight: 600;letter-spacing: -1px;}
.motor-info-hr{margin: 0 40px;width: 1px;height: 65px;border-right: 1px solid;}

.single-buttons{position: absolute;bottom: 0;left: -15px;display: flex;}
.buton-card{margin: 0 -8px 0 0;padding: 10px 55px;clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%)}
.buton-card span{color: white;font-size: 20px;font-style: italic;font-weight: 500;}
.buton-card a{ display: flex;align-items: center;}
.buton-card img{width: 35px;margin: 0 15px 0 0;}

.singles{background: #f4f4f4}
.single-galeri{width: 100%;}
.galeri-card{width: 24%;margin:0 1px;height: 325px;}
.galeri-card img{width: 100%;height: 100%;object-fit: cover}
.single-full-hr{width: 100%;background: #f4f4f4;}
.full-hr{width: 24%;clip-path: polygon(0 0, 95% 0, 100% 100%, 0% 100%);height: 55px;display: flex;justify-content: center;align-items: center}
.full-down-hr{width: 24%;clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%);height: 55px;display: flex;justify-content: center;align-items: center}
.single-full-hr h1{margin: 0;color: white;font-size: 25px;font-weight: 600}
.singles{position: relative;}
.singles img.left-arrow{position: absolute;left: 15px;top: 48%;z-index: 1}
.singles img.right-arrow{position: absolute;right: 15px;top: 48%;z-index: 1}

.teknik{background: #f4f4f4}
.teknik-wrapper{padding: 30px}
.teknik-info li{display: flex;align-items: center;background: #e4e2e2;border-bottom: 5px solid #f4f4f4}
.teknik-info li h1{width: 20%;font-size: 22px;font-weight: 600;text-align: end;padding: 0 20px}
.teknik-info li h2{font-size: 20px;font-weight: 300;width: 65%; padding: 30px 20px; margin: 0; border-left: 5px solid #f4f4f4}
.teknik-hr{border-left: 5px solid #f4f4f4;width: 1px;height: 85px;margin: 0 20px}

.order-model{background: #f4f4f4}
.order-title{background: #f4f4f4;display: flex;justify-content: center;}
.order-title h1{margin: 0;padding: 10px 55px;clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);color: white;font-size: 25px;text-align: center;}

.order-model-container{padding: 40px 0}

/*SINGLE*/

/*SERVICE*/

.service-container{position: relative;}
.service-slider img{width: 100%;position: relative;z-index: 1;}
.service-slider-bg{    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0 100%);width: 25%; background: #6dcbb0; position: absolute;left: 0;top: 0;height: 60vh;}
.service-slider{position: relative;margin-top: 75px}
.service-slider-text{width: 100%;height: 100%;background: rgba(9,36,45,0.8);position: absolute;top: 0;left: 0;z-index: 1;display: flex;justify-content: center;align-items: center}
.service-slider-text h1{color: #fff;font-size: 6vh;letter-spacing: 40px;text-shadow: 3px 3px 6px black;}


.form-card{padding: 50px 100px;}
.flex .form-group{display: flex;width: 100%;flex-wrap: wrap}
.form-group{margin: 15px 5px;}
.form-control{height: 45px;padding: 0 5px;font-size: 18px}
.form-group span, label{color: #09242d;margin: 15px 0;font-size: 20px}
.form button{width: 350px; padding: 15px 20px;color: #fff;background: #09242d;clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);border: none;transition: 0.2s ease-in-out;    font-size: 18px;letter-spacing: 3px;}
.form button:hover{background: #78c406;}
.form-card p{font-size: 20px;font-style: italic;font-weight: 300;letter-spacing: 0.4px;line-height: 27px;color: #09242d;}
.onay{display: none;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
/*SERVICE*/


/*FOOTER*/

footer{background: #1d1f46;}
.footer-image{display: flex;justify-content: center; margin: 50px 0}
.footer-image img{width: 200px}
.footer-map{display: flex; justify-content: space-between;margin-top: 30px;flex-wrap: wrap}
.footer-col{width: 250px; margin: 20px 0}
.footer-col.cont{width: 400px}
.footer-col .footer-alt-title{color: #e3e3e3;font-size: 18px;border-bottom: 1px solid #5d5d5d;padding: 10px 0}
.footer-col ul{padding-inline-start: 0}
.footer-col ul li a{color: #e7e7e7;letter-spacing: 1.2px;font-size: 15px;font-weight: 300;}
.footer-col ul li{margin: 7px 0}
.footer-col ul li i{color: #e3e3e3; margin: 0 10px 0 0}
.social{margin: 30px 0;width: 100%;}
.social .pos{position: absolute;right: 0}
footer .social-container{display: flex;justify-content: start;width: 100%;padding: 20px 0; position: relative; width: 100%}
footer .social-card a{width: 150px;display: flex;align-items: center;margin: 0 30px 0 0}
footer .social-card i{font-size: 20px;color: #e3e3e3}
footer .social-card h1{font-weight: 400;font-size: 18px;margin: 0 10px; color:#e3e3e3 }
.social h1{color: #e3e3e3;font-size: 14px;font-weight: 300;margin: 0}

/*FOOTER*/

.menu ul form{display: none}

@media (max-width: 1250px){
    .logos{height: 150px;border-top: 2px solid white}
    .logos.mb .logos-container{padding: 0 20px}
    .logos-container{width: 100%}
    .menu-bg{width: 50%;}
    .pixel{width: 94%}
    .slider{height: auto}
    .slider-container{height: auto}
    .slider-container img{height: auto;}
    .navbar-container .list{display: none}
    .navbar-container .right{width: 50%}
    .tarz{padding: 20px 0 0 0 }
    .yan-menu{height: 75px;display: initial}
    .all-model{margin: 15px 0;}
    .filter-card input{height: 45px}
    .model-card-all{justify-content: center}
    .filter-card img{width: 15px}
    .all-marka{height: 40vh}
    .all-marka-col-1{width: 40%;height: 40vh}
    .all-marka-col-2{width: 50%}
    .all-marka-motor{right: -50px}
    .all-marka-motor img{width: 390px;height: 240px;object-fit: contain}
    .all-marka-col-1 .all{top: -20px;width: 75%}
    .all-marka-col-1 .all a h1{font-size: 20px}
    .all-marka-col-1 .all a img{margin: 15px;width: 20px}
    .single-title{height: 40vh;flex-wrap: wrap;width: 52%}
    .model-title h1{font-size: 35px}
    .single-title-hr{margin: 20px 0}
    .single-buttons{position: relative;bottom: -10px}
    .buton-card{padding: 10px 20px;margin: 0 -5px 0 0;}
    .buton-card img{width: 25px}
    .buton-card span{font-size: 13px;}
    .model-color h2{font-size: 18px}
    .select-color{    margin: 0px 0 40px;}
    .color-circle{width: 90px;margin: 0 5px 0 0}
    .color-circle img{width: 90px}
    .color-circle:hover img{width: 90px}
    .motor-card{font-size: 20px;letter-spacing: 0}
    .full-hr{height: 40px}
    .single-full-hr h1{font-size: 18px}
    .full-down-hr{height: 40px}
    .galeri-card{width: 33%;height: 300px}
    .teknik-wrapper{padding: 30px 10px}
    .teknik-wrapper ul{margin: 0;padding: 0}
    .teknik-info li h1{font-size: 18px}
    .teknik-info li h2{font-size: 17px;padding: 20px}
    .all-marka-col-1 .all-marka-title img{width: 120px;height: auto}
    .order-title h1{width: 300px;font-size: 20px}
    .service-slider-bg{height: 30vh}
    .form-control{height: 40px}
    .form-card p{font-size: 18px}
    .form-card h1{font-size: 20px}
    .form-group span, label{font-size: 18px}
    .form-control{font-size: 17px}
    .form button{padding: 10px 15px}

    .social-card{margin: 0 0 20px}
    footer .social-container{flex-wrap: wrap;padding: 20px 10px 50px}
    .footer-map{padding: 0 10px}
    footer .social-container{width: fit-content;}
    .social .pos{position: relative}
}
@media (max-width: 500px){
    .green-card{
        height: auto;
        padding: 50px 0;
        flex-wrap: wrap;
        justify-content: center;
    }
    .navbar-container .logo img{width: 95px}
    .green-moto{width: 100%;justify-content: center}
    .green-text{width: 85%;margin: 35px 0;}
    .green-moto img{width: 85%}
    .logos-container a img.top-logos{width: 100px}

    .slider{height: auto}

    .menu ul form{display: initial}
    .menu ul form input{ width: 92%;height: 35px;margin-bottom: 5px;font-size: 15px}
    .menu ul form button{ width: 93%;background: #09242d;border: none;height: 35px;letter-spacing: 7px;font-size: 17px;color: #78c406;margin: 10px 0}

    .slider-containers{width: 100%; height: 100vh;position: absolute;overflow: hidden;display: none}
    .slider-containers img{height: 100vh;width: 100%;position: absolute;top: 0;width: 100%;object-fit: cover}
    .slider-containers img.slider-bg{top: 0;left: 0}
    .slider-containers img.slider-zemin{top: 0;left: 0}
    .slider-containers img.slider-motor{top: 0;left: 0}
    .slider-containers img.slider-motorange{top: 0;left: 0}
    .slider-containers img.slider-rx{top: 0;left: 0}
    .slider-containers img.slider-125{top: 0;left: 0}
    .slider-containers img.slider2-rsv4{top: 40px;left: 0}
    .slider-containers img.slider2-factory{top: 40px;left: 0}


    .all-model{margin: 50px 0;}
    .pc{display: none}
    nav{height: 75px}
    .navbar-container .logo{height: 75px;}
    .navbar-container .right{height: 75px;width: 20%}

    .menu-bg{width: 100%;}
    .menu ul{padding: 30px 0}
    .yan-nav{margin-top: 30px}
    .space{height: 75px}
    .navbar-container .right .search img{width: 28px;filter: brightness(0.5);}
    .navbar-container .right .search{background: #78c406;display: none}
    .navbar-container .right .test{display: none}
    .tarz-title h1{
        letter-spacing: 10px;
        font-size: 3.5vh;
    }
    .logos.mb{height: 85px}

    .logos{height: 120px}
    .logos-container{padding: 0;height: 100%}
    .logos-container a{margin: 0 15px}
    .logos-container a img{width: 100px}
    .tarz-container a{width: 100%}
    .model-card-all{justify-content: space-between}
    .model-card {width: 48%;margin: 30px 0;}
    .model-card-in {width: 100%;}
    .model-card-head {top: -2.3rem;}
    .model-card-head img{width: 85%}
    .model-card-head img.all-model-logo {width: 50px;top: 25px;}
    .compare-card{width: 40px;padding: 0}
    .model-motor-image .compare-card img{width: 20px;margin: 0}
    .model-motor-image img{width: 100%;margin: 70px 0 45px 0}
    .model-motor-info span{font-size: 13px;}
    .model-card-in{border-radius: 20px}
    .model-card-head img{width: 95%}
    .model-motor-image img{margin: 60px 0 25px 0}
    .model-motor-info hr{margin: 0 7px;border-right: 1px solid;}
    .model-hr-line.red {border-bottom: 2px solid #e31b21;margin: 10px 0 0 0;}
    .model-detay-buton h1{font-size: 13px}
    .model-filter{display: none}
    .compare-card span{left: 0;opacity: 1;margin: 0 5px;font-size: 7px}
    .compare-card{width: fit-content;background: white}
    .model-card-head h1{top: 23px;font-size: 13px}
    .all-marka-motor img{height: 225px}
    .bottom-nav{
        display: flex;
        position: fixed;
        bottom: 5px;
        left: 0;
        z-index: 1000;
        height: 55px;
        width: 100%;
        transition: 1s ease;
    }

    .bottom-hr{width: 0;height: 40px;border-right: 1px solid #cbcbcb }
    .bottom-list{width: 18%; height: 100%; display: flex; justify-content: center; align-items: center; }
    .bottom-list.test{background: #de2a1b;width: 28%;border-radius: 50px;height: 40px;}
    .bottom-list.test i{color: white}
    .nav-container{background: #f4f4f4;width: 98%; border-radius: 40px;box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
    .nav-list{
        width: 95%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-top-right-radius: 50px;
        padding: 0 10px;
    }
    .nav-list a{text-align: center;}
    .nav-list h2{color: #09242d;font-size: 11px;font-weight: 400;margin: 0;padding: 0;letter-spacing: -0.3px;}

    .all-marka-bg{width: 65%}
    .all-marka-col-1 .all-marka-title img{width: 90px}
    .all-marka{height: auto}
    .all-marka-container{flex-wrap: wrap}
    .all-marka-col-1{width: 100%;height: auto}
    .all-marka-motor{right: 0}
    .all-marka-col-1 .all{top: 0;width: 55%}
    .all-marka-col-2{width: 100%;padding: 10px 0}
    .all-marka-slider{padding: 0}
    .all-marka-slider a h1{display: flex;justify-content: center;margin: 0;padding: 0px;text-align: center}
    .all-marka-col-2 a{width: 50%}
    .all-marka-col-2 img{width: 100%}
    .all-marka-col-1 .all a h1{font-size: 16px}
    .all-marka-col-1 .all a img{margin: 0 15px;width: 15px}
    .all-marka-col-2 a{padding: 0 0 10px 0}
    .single-title{width: 100%;padding: 0 15px}
    .buton-card{margin: 0 1px 0 0;     clip-path: none; text-align: center}
    .single-buttons{left: 0}
    .buton-card img{margin: 0 5px 0 0}
    .select-color{margin: 0}
    .motor-info{display: flex;justify-content: center}
    .motor-info-card{width: 92%}
    .motor-card{width: 25%;text-align: center}
    .motor-info-hr{margin: 0 15px;height: 40px}
    .full-hr{width: 52%}
    .single-full-hr h1{font-size: 17px}
    .full-down-hr{width: 52%}
    .galeri-card{width: 70%}
    .teknik-info li h1{font-size: 16px;width: 25%;padding: 0 10px}
    .teknik-info li h2{font-size: 15px;width: 55%}
    .order-title h1{width: 70%;font-size: 17px;clip-path: none;}
    .order-model-container{padding: 15px}
    .service-slider img{height: 200px;object-fit: cover}
    .service-slider-text{height: 200px}
    .service-slider-text h1{font-size: 4.5vh;letter-spacing: 30px;text-align: center;line-height: 1.6}
    .form-card{padding: 10px 10px 20px 10px}
    .form-group{margin: 5px}
    .form-card .flex{flex-wrap: wrap}
    .form button{font-size: 17px}
    .form-group span, label{font-size: 17px}
}
@media (max-width: 391px){
    .model-motor-info hr{margin: 0 7px}
    .model-card-head h1{top: 15px;font-size: 12px;right: 10px}
    .model-motor-info span{font-size: 12px}
    .model-detay-buton h1{font-size: 12px}
    .model-card-head {top: -2rem;}
}
@media (max-width: 375px){
    .model-card-head {top: -1.8rem;}
}