html{
    scroll-behavior:smooth;
}
body{
    margin:0;
    padding:0;
    background: black;
    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scroll-behavior:smooth;
    overflow-x:hidden;
}
/*----------nav-----------*/
nav{
    display:flex;
    direction:rtl;
    justify-content:space-between;
    align-items: center;
    width:80%;
    z-index: 1;
    position:absolute;
    top:30px;
    background: rgba(238, 235, 235, 0.5);
    color:rgb(210, 204, 204);
    left:50px;
    border-radius:25px;
    
   
}
.nav-items{
    display:flex;
    gap:30px;
    align-items:center;
    list-style: none;
    margin-left:15px;
    
}
.nav-item a{
    text-decoration:none;
    color:rgb(243, 240, 236);
    display:inline-block;


}
.nav-item a:hover{
    transform:scale(1.25)
}
.logo{
    width:20%;
    height:80px;
    background-image: url("/static/images/logo.png");
    background-position: center;
    background-size:contain;
    background-repeat: no-repeat;
}
.logo span{
    color:white
}
.login-icons{
    display:none;
    direction:ltr;
}
.login-btn {
    display:flex;
    align-items: center;
    gap:10px;
    opacity:0.5;
    border:1px solid white;
    border-radius: 15px;
    width:120px;
    margin:5px;
    height:40px;
}
.login-btn button{
    text-decoration: none;
    color:white;
    margin:5px;
    background: transparent;
    border:none;
}

.login-ar{
    display:flex;
    align-items:center;
    margin:2px;
}
.lang-box{
    position:relative;
    z-index: 2;
}

.login-ar{
    display:flex;
    align-items:center;
    gap:5px;
    cursor:pointer;
}

.lang-menu{
    position:absolute;
    top:40px;
    right:0;
    background:rgb(63, 62, 62);
    padding:10px;
    border-radius:10px;

    display:none;
}

.lang-menu p{
    margin:5px 0;
    cursor:pointer;
    user-select: none;
}
/*-------------الجزء الخاص بالhero-----------*/
.hero-section{
    margin:0;
    padding:0;
    position: relative;
    width:100%;
    height:70vh;
    background-image: 
    linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
    url("/static/images/carpage.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size:cover;
    direction:rtl;
    display:flex;
    flex-direction: column;
    gap:50px;
    align-items:right;

}
.title{
    color:white;
    margin-top:180px;
    margin-right:25px;
    margin-bottom:0;
    font-size:50px;
    padding-bottom:0;
    
    font-weight:bold;
}
.sub-title{
    color:white;
    line-height:1.8;
    width:20%;
    position:relative;
    top:-50px;
    right:20px
}
.hero-section h5{
    color:white;
    position:relative;
    top:-50px;
    right:25px;

}
/*------sidebar--------*/
aside{
    background-image: radial-gradient(rgb(0, 0, 0,0.5),rgb(70, 68, 68,0.5),rgb(163, 159, 159,0.5));
    border-radius:15px;
    color:white;
    position: sticky;
}
.search-title{
    display:flex;
    align-items: center;
    gap:10px;
    margin:5px;
    padding:0;
}
.search-for-car{
    margin-right:15px;
}
.search-bar{
    display: flex;
    align-items: center;
    border:1px solid rgb(214, 206, 191);
    width:78%;
    border-radius: 10px;
}
.search-bar input{
    border:none;
    outline:none;
    background:none;
}
.search-bar label{
    opacity: 0.2;
}

.types input{
    display: none;
}
.types label{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}
.brands input{
    display: none;
}
.brands label{
    display: flex;
    align-items: center;
    gap:10px;
    cursor:pointer
}
.number-chair input{
    display: none;    
}
.number-chair label{
    display: flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}
.moves input{
    display: none;    
}
.moves label{
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
}

.custom-radio{
    width:18px;
    height:18px;
    border:2px solid black;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.3s;
}

.types input:checked + label .custom-radio{
    background:black;
}

.types input:checked + label .custom-radio::after{
    content:"✔";
    color:white;
    font-size:14px;
}
.brands input:checked +label .custom-radio{
    background: black;
}
.brands input:checked +label .custom-radio::after{
    content:"✔";
    color:white;
    font-size:14px;
}
.number-chair input:checked +label .custom-radio{
    background:black;
}
.number-chair input:checked +label .custom-radio::after{
    content:"✔";
    color:white;
    font-size:14px;
}
.moves input:checked +label .custom-radio{
    background:black;

}
.moves input:checked +label .custom-radio::after{
    content:"✔";
    color:white;
    font-size:14px;
}
input[type="range"]{
    width:300px;
    accent-color:black;
    width:80%;
    direction: ltr;
}
.prices{
    display: flex;
    gap:150px;
    opacity: 0.2;
    direction: ltr;
    align-items: center;
    margin-left:50px
}
.type-car, .brand-car, .number-chair, .move-trans{
    display: flex;
    flex-direction: column;
    gap:5px
}
.search-btn{
    background: black;
    color:white;
    width:60%;
    height:30px;
    border-radius: 15px;
    margin: 10px;
    padding: 5px;
}
.search-btn:hover{
    background: rgb(11, 10, 10);
    transform: scale(1.02);
    font-size: 15px;
}
/*-----cards-------*/
.content{
    display:grid;
    grid-template-columns: 280px 1fr;
    gap:30px;
    margin:50px;
    direction: rtl;
    
}
.cards-content{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 30px;
}
.car-card{
    width:275px;
    flex-shrink: 0;
    padding: 15px;
    border-radius: 20px;
    color:white;
    border:1px solid #6ba6e6;
    height:500px;
    padding:15px;
    overflow: hidden;
    color:aliceblue;
    box-shadow: 5px -5px 5px 2px rgb(82, 81, 81), -5px 5px 5px 1px rgb(82, 81, 81) ;
    background-image: radial-gradient(black,rgb(49, 47, 47));
    direction: rtl;
    
}


.car-card img{
    width: 350px;
    height: 300px;
    object-fit: cover;
    position: relative;
    top:-20px;
    left: 75px;
}

.car-card h3{
    font-size: 18px;
    padding-top:0;
    margin-top:0;
    text-align: center;
}

.car-card p{
    font-size: 14px;
}
.prop{
    display:flex;
    align-items:center;
    justify-content: space-between;
    direction: ltr;
}
.book-content{
    display:flex;
    align-items: center;
    justify-content: space-between;
}
.book-btn{
    text-decoration: none;
    width:45%;
    height:40px;
    background: #007BFF;
    font-size:20px;
    color:black;
    border-radius:15px;
    display:flex;
    align-items: center;
    justify-content: center;
}
.book-btn:hover{
    background:#0f5fb4;
    transform:scale(1.02)
}

/*------------footer--------*/
footer{
    background:black;
    position:relative;
    bottom:-30px;
    
}
.foot{
    display: flex;
    direction:rtl;

}
.card-foot{
    width:35%;
    color:aliceblue;
    border-left:1px solid rgb(36, 35, 35);
    direction:rtl;
    text-align: center;
    margin:0;
    padding:0;
}

.card-foot h2{
    position:relative;
    top:-60px;
}
.about p{
    line-height: 1.8;
}
.connect h4{
    display:flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}
.eshtrak{
    display:flex;
    align-items:center;
    justify-content: center;
    border:1px solid rgb(141, 138, 138);
    border-radius:25px;
    width:60%;
    margin-right:70px;
}
.eshtrak input{
    border:none;
    outline: none;
    background:transparent;
    width:100%;
    padding:10px;
    color:white
}

.eshtrak .input-btn{
    width:80px;
    background: #007BFF;
    color:black;
    margin-left:1px;
    border-radius: 25px;
}
.foot-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
.foot-icons i{
    margin:5px;
    display:flex;
    align-items:center;
    justify-content:center;

    width:35px;
    height:35px;

    border-radius:50%;
    border:1px solid white;
}
.foot-icons i:hover{
    transform:scale(1.02);
    background:#007BFF;
}
.links{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.links a{
    text-decoration: none;
    color:aliceblue;
    
}
.nav-list-icon{
    display: none;
}
.popup-nav{
    display: none;
}
/*----------------responsive-----------*/
@media (max-width: 1024px) {
    nav {
        width: 90%;
        left: 20px;
        flex-wrap: wrap;
        gap: 10px;
        padding: 8px 12px;
    }
 
    .nav-items {
        gap: 15px;
        flex-wrap: wrap;
    }
 
    .title {
        font-size: 38px;
        margin-top: 150px;
    }
 
    .sub-title {
        width: 35%;
    }
 
    .content {
        grid-template-columns: 220px 1fr;
        margin: 30px;
        gap: 20px;
    }
 
    .car-card {
        width: 100%;
    }
 
    .car-card img {
        width: 100%;
        left: 0;
    }
 
    .foot {
        flex-wrap: wrap;
    }
 
    .card-foot {
        width: 50%;
    }
 
    .prices {
        gap: 60px;
    }
 
    .eshtrak {
        margin-right: 20px;
        width: 80%;
    }
}

 
/* ---------- Mobile: max 768px ---------- */
@media (max-width: 768px) {

    .nav-list-icon{
        display: block;
        position:relative;
        color:white;
        z-index: 2;
        
    }
    
    .flex-listnav{
        display: flex;
        align-items: center;
        direction: ltr;
        background: rgba(251, 250, 250, 0.5);
        justify-content: space-between;
    }
    .navListLogo{
        background-image: url("/static/images/logo.png");
        width:100%;
        height:50px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
        position:relative;
        right:39%;
    }
    nav {
        display: none;
    }
    .popup-nav{
        display:none;
        background: rgba(8, 8, 8);
        color:rgb(210, 204, 204);
        width:30%;
        height:500px;
        position: fixed;
        z-index: 9999;
        right:0;

        
    }
    .popup-nav ul{
        list-style: none;
        display:flex;
        flex-direction: column;
        align-items:end;
        justify-content: center;
        gap:50px;
        
    }
    .popup-nav ul li a{
        color:rgb(248, 244, 235);
        text-decoration: none;
        font-weight:bold;
        margin:5px;
        display:inline-block;
    }
    .popup-nav.show{
        display:block;
    }
    .title {
        font-size: 28px;
        margin-top: 130px;
        margin-right: 15px;
    }
 
    .sub-title {
        width: 80%;
        right: 15px;
        font-size: 13px;
    }
 
    .hero-section h5 {
        right: 15px;
        font-size: 13px;
    }
 
    .content {
        grid-template-columns: 1fr;
        margin: 20px 15px;
        gap: 20px;
    }
 
    aside {
        position: static;
    }
 
    .search-bar {
        width: 90%;
    }
 
    .prices {
        gap: 30px;
        margin-left: 20px;
    }
 
    .car-card {
        width: 90%;
        height: auto;
        min-height: 480px;
    }
 
    .car-card img {
        width: 100%;
        left: 0;
        height: 220px;
    }
 
    .cards-content {
        grid-template-columns: 1fr;
    }
 
    .foot {
        flex-direction: column;
    }
 
    .card-foot {
        width: 100%;
        border-left: none;
        border-bottom: 1px solid rgb(36, 35, 35);
        padding-bottom: 20px;
        margin-bottom: 10px;
    }
 
    .card-foot h2 {
        top: 0;
        margin-top: 20px;
    }
 
    .eshtrak {
        width: 85%;
        margin: 0 auto;
    }
}
 
/* ---------- Small Mobile: max 480px ---------- */
@media (max-width: 480px) {
    nav {
        left: 10px;
        width: calc(100% - 20px);
    }
 
    .nav-items {
        gap: 8px;
    }
 
    .nav-item a {
        font-size: 13px;
    }
 
    .title {
        font-size: 22px;
        margin-top: 160px;
    }
 
    .sub-title {
        width: 90%;
        font-size: 12px;
    }
 
    .content {
        margin: 15px 10px;
    }
 
    .car-card img {
        height: 180px;
    }
 
    .book-btn {
        font-size: 15px;
        height: 35px;
    }
 
    .search-btn {
        width: 80%;
    }
 
    .card-foot {
        width: 100%;
    }
 
    .eshtrak {
        width: 95%;
        margin: 0 auto;
    }
 
    .foot-icons i {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
}