*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    /* overflow-x: hidden; */
    /* overflow-y: hidden; */
}
body{
    overflow-x: hidden;
}
:root {
    --light-color:#f0f2f5ea;
    --dark-color:#3D81db;
    --text-color:#a9aaac;
    --blue-color:#2A60B7;
    --daark-color:#4991ee;
}
#navbarClose{
    color: rgb(104, 103, 103);
}
.logo{
    padding: 30px;
    width: 100%;
background-color: white;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar-expand{
    width: 100%;
    padding: 20px 20px;
    background-color: white !important;
    align-items: center !important;
}
.fluid{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-brand{
    color: rgb(6, 72, 214) !important;
    font-size: 30px !important;
    font-weight: 600 !important;
}
.navbar-collapse{
    justify-content: space-between;
    flex-grow: 0;
}
.bar{
    display: none;
    
}
#bar-icon{
    font-size: x-large;
    color: var(--text-color);
}

.navbalinks {
    width: 100%;
    height: 100vh;
    float: right;
    display: none;
    background-color: #e6e7e7ea;
    line-height: 30px;
    position: absolute;
    z-index: 1;
    border-radius: 10px;
  }

#page-link {
    color: rgb(2, 2, 2);
    text-decoration: none;
    font-size: large;
    margin-left: 20px;
}
.pages-detail{
    width: 70%;
    height: 88.3vh;
    background-color: white;
    padding: 20px 30px;
}
 .pages-link{
    border-bottom: 1px solid rgb(209, 209, 209);
    padding: 20px 0px;
 }
 .pageslink{
    border-bottom: 1px solid rgb(209, 209, 209);
    padding: 20px 15px;
 }
.fa-heat{
    color: black;
}

.heart{
    margin-left: 20px;
    margin-top: 10px;
    width: 40px;
    height: 40px;
    padding: 5px;
    border-radius: 30px;
    border-style: solid;
    border-color: #f0eeee;
    background-color: white;
}
.bell{
    margin-left: 10px;
    margin-top: 10px;
    width: 40px;
    height: 40px;
    padding: 4px;
    border-radius: 30px;
    border-style: solid;
    border-color: #f0eeee;
    background-color: white;
    position: relative;
}
.dott{
    width: 10px;
    height: 9px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    right: 3px;
    top: -2px;
}
.gear{
    margin-left: 10px;
    margin-top: 10px;
    width: 40px;
    height: 40px;
    padding: 3px;
    border-radius: 30px;
    border-style: solid;
    border-color: #f0eeee;
    background-color: white;
    
}

.profile{
    margin-left: 10px;
    width: 40px;
    border-radius: 30px;
    background-color: cornflowerblue;
    background-image:-webkit-linear-gradient(blue lightblue);
}
.main-container{
    background-color:var(--light-color);
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}
.payment-form{
    width: 100%;
}
.child-container{
    width: 100%;

}
.billing{
    border-radius: 5px;
    background-color: white;
    width: 100%;
    padding: 15px;
}
.h-5{
    font-size:20px;
letter-spacing: -1px;
}
.p-1{
    font-size: small;
    color: var(--text-color);
    margin:-9px -4px;
}
.p-2{
    text-align: right;
    font-size: small;
    color: var(--text-color);
    /* margin-top: -35px; */
}
.address-city{
    /* display: flex;
    justify-content: space-between; */
    width: 100%;
    gap: 20px;
}
.width{
    width: 100%;
}
.name-1{
    display: flex;
    justify-content: space-between;
   column-gap: 10px;
    width: 100%;
    padding-top: 20px;
}
.phone-number{
    display: flex;
    justify-content: space-between;
   column-gap: 10px;
    width: 100%;
    padding-top: 20px;
}
h6{
    font-size: small;
}
.input{
width: 100%; 
/* height: 35px; */
border-radius: 5px;
border: none;
outline: none;
padding: 5px 10px;
font-size:medium;
background-color: var(--light-color);
color: var(--text-color);
}
.rental-info{
    border-radius: 5px;
    background-color: white;
    margin-top: 20px;
    width:100%;
    padding: 15px;
}
.pick-up{
    font-size: medium;
    letter-spacing: -0.5px;
    font-weight: 500;
    padding-top: 20px;
}
.phonenumber{
    width: 100%;
}
.name-2{
    margin-top: 20px;
    display: flex;
    justify-content:space-between ;
    width: 100%;
    gap: 20px;
}
.h-6{
    margin-top: -30px;
}
.pickup{
    font-size: medium;
    letter-spacing: -0.5px;
    font-weight: 500;
}
.sele{
    border: none;
    outline: none;
    background-color: var(--light-color);
    border-radius: 5px;
    color: var(--text-color);
    width: 100%;
    font-size: medium;
    padding: 10px 10px;
}
.Locations{
    width: 100%;
}
.p-1-2{
    color: black;
    font-size: medium;
}
.radio-1{
    margin-top: 30px;
}
.payment-method{
    border-radius: 5px;
    background-color: white;
    margin-top: 20px;
    width: 100%;
    padding: 15px;
}
.card-detail{
    margin-top: 20px;
    padding: 15px 20px;
    background-color: var(--light-color);
    width: 100%;
    border-radius: 5px;
}
.Card-1{
    font-size: large;
    font-weight: 600;
}
.visa{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.rad-cla{
    width: 100%;
}
.visa-{
    display: flex;
    justify-content: end;
}
.visa-img{
    width: 50%;
    background-color: var(--light-color);
    border-radius: 10px;
}
.address-city-1{
    margin-top: 20px;
    /* display: flex;
    justify-content: space-between; */
    width: 100%;
    gap: 20px;
}
.input-1{
    width: 100%; 
    /* height: 35px; */
    border-radius: 5px;
    border: none;
    outline: none;
    padding: 10px 20px;
    font-size: small;
    background-color: white;
    color: var(--text-color);
    }
.account{
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    background-color: var(--light-color);
    align-items: center;
    width:100%;
    margin-top: 20px;
    padding: 15px 20px;
} 
.pay{
    width: 100%;
}  
.PayPal{
font-size: medium;
font-weight: 600;
} 
.pay-pal{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}

.account-1{
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    background-color: var(--light-color);
    align-items: center;
    width: 100%;
    margin-top: 20px;
    padding: 3px 20px;
} 
.Bitcoin{
    font-size: medium;
    font-weight: 600;
}
.bit-coin{
    width: 50%;
    display: flex;
    justify-content: flex-end;
}
.confirmation{
    
        border-radius: 5px;
        background-color: white;
        margin-top: 20px;
        width:100%;
        padding: 15px;
   
}
.h-p{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 30px;
}
.h-3{
font-weight: 600;
}
.read{
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    padding: 10px 20px;
    gap: 20px;
    background-color: var(--light-color);
}

.privacy{
    width: 100%;
    border-radius: 5px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    padding: 10px 20px;
    gap: 20px;
    background-color: var(--light-color);
}
.red-pri{
    margin-top: 20px;
}
.rent{
    margin-top: 30px;
    width: 25%;
    /* height: 50px; */
    border-radius: 10px;
    border: none;
    outline: none;
    display: flex;
    justify-content: center;
    padding: 20px 0px ;
    background-color: var(--daark-color);
    color: white;
}
.now{
    color: white;
    text-decoration: none;
    font-weight: 550;
    font-size: 100%;
}
.h-4{
    margin-top: 20px;
    font-size: medium;
    font-weight: 700;
}
.p-4{
    margin-left: -25px;
    margin-top: -25px;
    font-size: small;
    color: var(--text-color);
}
.mini-container{
    width: 80%;
}
.rental-summary{
    width:100%;
    background-color: white;
    border-radius: 5px;
    padding: 20px;
    font-size: 12px;
    color: var(--text-color);
}

.h-4-1{
    color: black;
    font-size:22px;
    font-weight: 700;
}
.p-3{
    margin-left: -15px;
}
.nissan-review{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.nissan-car{
    width: 30%;
    /* height: 80px; */
    padding: 25px 10px;
    background-color: var(--daark-color);
    border-radius: 5px;
}
.nisan-car{
width: 100%;
}
.h-4-2{
    color: black;
    font-weight: 700;
    font-size: large;
}
#icon{
    font-size: large;
    color:rgb(206, 204, 204);
}
#icons{
    font-size: large;
}
.subtotal{
    display: flex;
    justify-content: space-between;
    border-top: 1px solid ghostwhite;
    margin-top: 35px;
    padding: 30px 0px;
    font-size: 15px;
}
.dollar{
    color: black;
    font-weight: 600;
    font-size: medium;
}
.tax{
    display: flex;
    justify-content: space-between;
    width: 100%;
   margin-top: -20px;
    font-size: 15px;
}
.apply{
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    background-color: var(--light-color);
    margin: 20px 0px;
    padding: 10px 20px;
}
.promo-code{
    width: 100%;
    background-color: var(--light-color);
    border: none;
    outline: none;
}
.nows{
    text-align: right;
    width: 30%;
    color: black;
    font-weight: 620;
    font-size: small;
}
.total-price{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 10px 0px;
}
.h-5-1{
    color: black;
    letter-spacing: -1px;
    font-size: large;
    font-weight: 600px;
}

.footer-detail{
    padding: 50px 20px;
    padding-left: 60px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.p-1-3{
    margin-top: 20px;
    width: 100%;
    font-size: small;
    color: var(--text-color);
}

.footer-page{
    display: flex;
    justify-content: space-between;
    width: 40%;
    gap: 10px;
    
}

.links{
    width: 100%;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
}
.foter-link{
    text-decoration: none;
    font-size: small;
    color: var(--text-color);
    line-height: 30px;
}
.h7{
    display: flex;
align-items: center;
margin:0px 40px;
gap: 3px;
}
.h6{
    margin-top: 3px;
    font-size: small;
    font-weight: 640;
}
.copywrite{
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--light-color);
    padding: 20px 1px;
}
.policy{
    width: 250px;
    display: flex;
    justify-content: space-between;
}
#topBtn{
    display:none;
    position:fixed;
    bottom: 100px;
    z-index:99;
   margin-left: 97%;
   font-size: small;
   color: #000000;
   text-align: center;
   text-decoration: none;
   font-weight: 600;
   width: 20px;
   animation: topanimate;
   animation-duration: 1s ;
   animation-iteration-count: infinite;
   animation-delay: 5s;
}
@keyframes topanimate {
    0%   {height: 10px;}
    25%  {height: 15px;}
    50%  {height: 0px;}
    100% {height: 0px;}
}

@media only screen and (max-width:900px) {
    
    .main-container{
       flex-direction: column-reverse;
    }
    .mini-container{
        width: 100%;
    }
    .input{
        font-size: small;
        color: var(--text-color);
    }
    .sele{
        font-size: small;
    }
.footer-detail{
    flex-direction: column;
}
.footer-page{
    width: 70%;
    justify-content: space-between;
    align-self: center;
}
#topBtn{
    margin-left: 90%;
 
 }

}

@media only screen and (max-width:496px) {
    .logo{
        padding: 19px 20px;
    }
    .navbar-expand{
        padding: 10px 20px;
    }
    .nav-item{
        display: none;
    }
    .bar{
        display: block;
    }
    .name-1{
        flex-direction: column;
        row-gap: 20px;
    }
    .phone-number{
        flex-direction: column;
        row-gap: 20px;
    }
    .input{
        font-size: x-small;
    }
    .p-1{
        font-size: x-small;
    }
    .sele{
        font-size: x-small;
    }
    .input-1{
        font-size: x-small;
    }
    .visa-img{
        width: 50%;
        object-fit: contain;
    }
    .pay-pal{
        width: 70%;
    }
    .bit-coin{
        width: 70%;
    }
   .read{
    padding: 10px 5px;
   }
    .privacy{
        padding: 10px 5px;
    }
    .Bitoin{
        font-size: small;
    }
    .now{
        font-size: small;
    }
    .footer-detail{
        padding: 30px 20px;
    }
    .footer-page{
        width: 100%;
    }
    .nows{
    font-size: x-small;
    }
    .h-4-1{
        font-size: medium;
    }
    .h-4-2{
        font-size: small;
    }
.visa-img{
    width: 60%;
}
#icon{
    font-size:small;
}
#icons{
    font-size: small;
}
.revi{
    font-size: x-small;
}
.p-9{
    font-size: x-small;
}
.dollar{
    font-size: small;
}
.copywrite{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

}