body {
    background-color: rgb(50,50,50);
    margin: 0; 
    overflow-x: hidden; 
    padding: 0;
    font-family: sans-serif;
    color: #fff;
    background-image: 
        linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.8) 70%, #000 100%),
        url("bg.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
    opacity: 0;
    animation: dropDown 1s ease-out forwards;
    height: 100%;
}

hr {
    border: none;
    margin: 0; 
    width: 100%; 
    border-top: 2px solid black;
}

.name {
    padding-left: 10px;
    color: rgb(255, 255, 255);
    font-size: 40px;
    align-items: center;
    text-decoration: none;
}

.navbar_right {
    margin-left: auto;
    gap: 20px;
    align-items: center;
    margin-right: 15px;
    display: inline-flex;
}

.navbar {
    position: fixed;
    color: white;
    display: flex;
    align-items: center;
    gap: 5px;
    height:55px;
    width: 100%;
    padding: 10px;
    background-color: rgb(50,50,50);
    z-index: 9999;
}




.dropdown {
    position: relative;
    display: inline-block;
    border-radius: 20px;

}

.dropdown_content {
    display: none; 
    position: absolute;
    background-color: rgb(50, 50, 50); 
    min-width: 120px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5); 
    overflow: hidden; 
    z-index: 100;
    top: 100%; 
    border-radius: 20px;
    left: 0;
}

.dropdown_content a {
    color: white; 
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    border-radius: 20px;
    font-family: sans-serif;
    font-size: 16px;
}

.dropdown_content a:hover {
    background-color: #222; 
}

.dropdown:hover .dropdown_content {
    display: block;
}

.dropbtn {
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    font-size: 20px;
    margin-top: 8px;
    background-color: rgb(50, 50, 50);
}

.dropbtn:hover{
    background-color: rgb(100,100,100);
}



.search {
    width: 170px;
    border: 2px;
    margin-top: 10px;
    height: 30px;
    border-radius: 30px;
    transition: width 0.3s ease-in-out;
}

.search:focus {
    width: 230px;
}

.search_1{
    border-radius: 30px;
    border: 2px;
    background-color: rgb(50,50,50);
    color: white;
    width: 50px;
    height: 30px;
    margin-top: 10px;
}

.cart {
    background-color: #ffdd00;
    border-radius: 30px;
    border: 2px;
    font-size: 20px;
    /* width: 70px; */
    height: 30px;
    margin-top: 10px;
    text-decoration: none;
    text-align: center;
    padding: 0 8px;
    padding-top: 8px;
    color: black;
}





.image_wrap {
    position: relative; 
    display: block; 
    width: 100%;
    margin: 0; 
}

.overlay_text {
    position: absolute;
    top: 50%;
    left: 5%; 
    transform: translateY(-50%); 
    color: white;
    text-align: left; 
    width: auto;
    z-index: 10; 
}



.top {
    position: relative;
    margin-left: 40px;
    font-size: 30px;
    line-height: 0.8;
}

@keyframes dropDown {
    0% {
        /* Start 100 pixels above its normal position */
        transform: translateY(-100px); 
        opacity: 0;
    }
    100% {
        /* End exactly at its normal, default position */
        transform: translateY(0); 
        opacity: 1;
    }
}

.top h2 {
    background-image: linear-gradient(to right, rgb(121, 121, 121), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold; 
    margin-bottom: 0;
    font-size: 70px;
    -webkit-text-stroke: 2px black;
    margin-top: 100px;
}

.top h1 {
    background-image: linear-gradient(to right, rgb(255, 81, 0), #ffdd00);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: bold; 
    padding-left: 30px;
    font-size: 100px;
    -webkit-text-stroke: 2px black;
}

.overlay {
    display: block;
    width: 100%;
    height: auto;
}

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

.browse{
    margin-left: 50px;
    font-size: 25px;
    color: rgb(255, 187, 0);
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    -webkit-text-stroke: 2px rgb(50, 50, 50);
}


.box{
    margin-top: 20px;
    padding-top: 30px;
    border: 5px solid black;
    width: 215px;
    text-align: center;
    margin-left: 25px;
    gap: 10px;
    margin-right: 0;
    background-color: rgb(100,100,100);
    border-radius: 40px;
    height: 200px;
    color: rgb(200, 200, 200);
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}

.box:hover{
    border: 5px solid rgb(255, 196, 0);
    background-color: rgba(255, 166, 0, 0.5);
    color: white;
    align-items: center;
    transform: scale(1.1);
}

.box a{
    text-decoration: none;
    color: rgb(200, 200, 200);
}

.box img{
    align-items: center;
    width: 100px;
    height: auto;
}


.container{
    display: flex;
    justify-content: center; /* Centers the entire group of boxes on the page */
    align-items: center;     /* Keeps them vertically aligned if heights vary */
    flex-wrap: wrap;
}




.featured{
    font-size: 35px;
    padding-left: 40px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    -webkit-text-stroke: 2px black;
}

.box_1{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 10px;

}
.vehicles_box{
    overflow: hidden;
    flex-direction: column;
    width:28%;
    height: auto;
    margin-left: 40px;
    margin-top: 40px;
    display: flexbox;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid black;
    border-radius: 20px;
    position: relative;
    align-items: center;
}

.vehicles_box img{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    width: 100%;
    height: 200px;
    transition: transform 0.3s ease-in-out;
}

.vehicles_box p{
    padding-left: 10px;
    padding-right:10px;
    color: rgb(175,175,175);
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}

.vehicles_box h2{
    padding-left: 10px;
    padding-right:10px;
    margin: 0;
    padding-bottom: 10px;
}

.vehicles_box h3{
    padding-left: 10px;
    padding-right:10px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}


.vehicles_box img:hover{
    transform: scale(1.1);
}

hr{
    width: auto;
    margin: 10px;
    border: 2px solid white;
}


.cart_1{
    margin-left: 10px;
    color: #000;
    margin-right: 20px;
    width: 80px;
    background-color: rgb(255, 255, 0,0.8);
    align-items: center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 20px;
}
.view{
    color: #000;
    width: 80px;
    background-color: rgba(255, 128, 0);
    align-items: center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    border: 2px solid rgb(255, 255, 255);
    border-radius: 10px;
    cursor: pointer;
    margin-bottom: 20px;
    margin-left: 10px;
}
.footer{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: 10px;
}

.footer_box{
    overflow: hidden;
    flex-direction: column;
    width:20%;
    height: auto;
    margin-left: 40px;
    margin-top: 40px;
    display: flex;
    background-color: rgba(0,0,0);
    border: 2px solid rgb(255, 255, 255);
    border-radius: 20px;
    transition: transform 0.3s ease-in-out;
}

.footer_box:hover{
    transform: scale(1.1);
}

.footer_box h2{
    margin-bottom: 0;
    padding-left: 20px;
    padding-right:20px;
}

.footer_box h1{
    padding-top: 20px;
    margin: 0;
    font-size: 50px;
    padding-left: 10px;
    padding-right:10px;
}

.footer_box p{
    padding-left: 20px;
    padding-right:20px;
}

.footer_text{
    -webkit-text-stroke: 2px black;
    width: 100%;
    text-align: center;
    font-size: 35px;
    color: rgb(211, 211, 79);
}


.bot{
    text-align: center;
    margin-left: 50px;
}


.page-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    margin: 0;
}

.cart-container {
    color: black;
    flex: 1; 
    padding-top: 80px;
    padding-left: 20px;
}

.bot_1 {
    background-color: #000000; 
    color: #ffffff; 
    text-align: center;
    padding: 20px;
}

.abt{
    margin-left: 20px;
}

.abt h1{
    margin-left: 20px;
    color: black;
}
.abt h2{
    margin-left: 20px;
    color: rgb(150,150,150);
}

.abt p{
    margin-left: 20px;
    color: white;
}

.abt ul li{
    color: white;
}

.browse_1{
    padding-top: 10px;
}