style.css

body{
    margin: 0%;
    padding: 0%;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    color: #002f34;
}

/*============== NavBar============== */
/* .col{
    border: 2px solid black;
} */
.header{
    background-color: #f7f8f9;
    box-shadow: 0 0 0px grey;
    position: sticky;
    top: 0%;
    z-index: 1;
}

.first-nav-img{
    width: 40px;
    margin: 10px auto;
    float: left ;
}
.Motors{
    /* border: 2px solid black; */
    margin: 20px auto;
}
.Motors i{
    color: #002f34;
}
.Motors i:hover{
    color: #6896fc;
}
.Motors a{
    text-decoration: none;
    display: flex;   
}
.Motors a p{
    margin-left: 10%;
    font-size: 12px;
    font-weight: bold;
    color: #002f34;
}
.Motors a p:hover{
    color: #6896fc;
}

.property{
    /* border: 2px solid black; */
    margin: 20px auto;
}
.property i{
    color: #002f34;
    margin-top: -5px;
}
.property i:hover{
    color: #6896fc;
}
.property a{
    text-decoration: none;
    display: flex;   
}
.property a p{
    margin-left: 10%;
    font-size: 12px;
    font-weight: bold;
    color: #002f34;
}
.property a p:hover{
    color: #6896fc;
}

.olxlogo{ 
 width: 60px;
 height: 50px;
 margin: 0px auto;
 float: left !important;
}

.select input{
    background-image: url("./images/angle-down-solid.svg");
    background-repeat: no-repeat;
    background-position: 95% 50%;
    background-size: 20px 20px;
    height: 50px;
    border-radius: 6px ;
}

.search_box{
    display: flex;
}

.search_box i{
    background-color: #002f34;
    color: white;
    border-radius: 0 6px 6px 0;
    cursor: pointer;
    height: 50px;
    width: 55px;
    padding: 18px 0px 0px 17px;

}
.searchclass{
    width: 100%;
    height: 50px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #002f34;
    border-radius: 6px 0px 0px 6px;
}
.login{
    margin:  15px auto;
}
.login a{
    color: #002f34 ;
    font-size: 18px;
    font-weight: bold;
}

.login a:hover{
    color: #002f34 ;
    text-decoration: none;
}
.selling_page{
    height: 50px;
    width: 100px;
    margin-top: 5px;
    margin-left: 15px;
    /* border: 2px solid black; */
}
.selling_page p{
    margin-top: -3px !important;
    margin-left: 5px !important;
    color: #002f34;
    font-weight: bold;
}
.selling_page button{
    width: 100%;
    height: 100%;
    border-style:solid ;
    border-width: 5px;
    border-top-color: #23e5db;
    border-left-color: #ffce32;
    border-right-color: #3a77ff;
    border-bottom-color: #3a40ff;
    font-size: 15px;
    cursor: pointer;
    border-radius: 40px;
    background-color: white;
    color: #002f34;
    display: flex;
    padding: 12px 0px 0px 19px;
}

/* .col{
    border: 2px solid black;
} */
.categories{
    background-color: white;
    box-shadow: 0 0 2px grey;
}
.nav-item{
    display: inline-block;
    color: #002f34;
    font-size: 14px;
    margin: 2% 0% 1% 1%;
    /* border: 2px solid black; */
}
#nav-link{
    font-weight: bold;
    color: #002f34;
}
.nav-item:hover{
    color: #00a49f;
}
/* .navbar{
    float: right;
    margin-left: 10% !important;
    display: none;s
} */
/* .toogle{
    display: none !important;
} */


@media screen and (min-width: 500px) {
    .toogle{
        display: none !important;
    }
    .collapse{
        display: block !important;
    }
}
@media screen and (min-width: 200px) {
    .toogle{
        display: line !important;
    }
}
/* ===========products=========== */

.card{
    margin-left: 15px;
    width: 250px !important;
    cursor: pointer;
}

.card-div{
    width: 111.5%;
    height: 160px !important;
    margin-left: -13px;
    background-color: #222;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-top: -1vh;
    
}
.card-text{
    float: left;
}
.card-title{
    display: inline-block;
}

.cardimg{
   height: 100%;
   max-width: 80%;
   min-width: 50%;
   display: block;
   margin: 0px auto;
}
.button{
    /* border: 2px solid black; */
    display: flex;
    justify-content: center;
    margin-top: 2%;
   
}
.button button{
    background-color: white;
    height: 45px;
    width: 100px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    color: #002f34;
    font-size: 16px;
    border-color: #002f34;
    border-radius: 5px;
}
.button button:hover{
    border: 4px solid #002f34;
}
/* ============footer=========== */

.footer1{
    background-color: #f7f8f9;
    margin-top: 2%;
}
.footerimg img{
    width: 100%;
    height: 100%;
}
.footercontent h2{
    color: #002f34;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    font-size: 1.5rem !important;
}
.footercontent P{
    color: #002f34;
    font-family: 'Roboto', sans-serif;
    font-size: 1rem !important;
    text-align: left !important;
}
.footerapp p{
    color: #002f34;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    text-align: left !important;
    
}
.footerapp img{
    width: 30%;
    cursor: pointer;
    margin-top: 10px;
    margin-bottom: 20px;
}

.footer2{
    background-color: #ebeeef; 
    /* height: 180px; */
}
.footer2content{
    color: #002f34;
    font-family: 'Roboto', sans-serif;
}
.footer2content h5{
   font-size: 16px;
   font-weight: bolder;
}
.footer2content p{
    font-size: 14px;
    margin-bottom: 1% !important;
    color: #0b363b8b;
    display: flex;
    text-align: left !important;
 }
 .footer2content p:hover{
   color: #002f34;
   cursor: pointer;
 }
.footerappimg{
    width: 5% !important;
}
.footerappimg2{
    margin-top: 20px;
    width: 30%;
    cursor: pointer;
    margin-bottom: 10px;
}
.footerapp2 p{
    font-weight: bold;
    color: #002f34;
    display: flex;
    /* text-align: left !important; */
    /* float: left !important; */
    /* border: 2px solid black; */
}
.footer3{
    background-color: #002f34;
    height: 50px;
    color: white;
}
.col p{
    text-align: right;
    margin: 0.5%;
    font-size: 14px;
}
/* ===============Login page============ */
#bodylogin{
    display: flex;
    justify-content: center;
    background-color: #03363c;
}
#login{
    display: inline-block;
    justify-content: center;
    margin-top: 5%;
    width: 70vh;
    height: 80vh;
    background-color: white ;
    border-radius: 5px;
}
#img img{
    margin-left: 33%;
    margin-top: 6%;
    width: 30%;
    height: 17%;
}
#heading h3{
    color: rgba(3, 51, 56, 0.827);
    text-align: center;
    font-size: 5vh !important;
    font-weight: bold !important;
    margin-top: 2%;
}

#heading p{
    color: rgba(3, 51, 56, 0.827);
    text-align: center;
    font-size: 3vh;
    margin-top: -5%;
}
#opt{
    display: inline-block;
    justify-content: center;
}
.option{
    display: inline-block;
    width: 70%;
    height: 6vh !important;
    border: 2px solid #04484fdb;
    border-radius: 4px;
    /* font-size: 16px; */
    text-align: center;
    font-weight: bold;
    color: #03363cee;
    margin-top: 2%;
    margin-left: 14%;
    cursor: pointer;
}
.option:hover{
    border: 4px solid #04484fdb;
    font-weight: bolder;
}
table{
    margin:  auto;
    font-size: 2vh;
    width: 90%;
    height: 6vh !important;


}
.col1{
    width: 10%;
}
.col1 i{
    /* width: 10%;
    height: 10%; */
    font-size: 2.5vh;
}
.title{
    font-size: 2.5vh;
    color: #002f34da;
}

/* .option p{
    margin-top: 2.5% !important;
    display: flex;
    justify-content: center;
    margin-left: -15%;
    font-size: 2vh;
} */
.option i{
    /* padding-right: 4vh; */
    color: rgba(255, 0, 0, 0.671)
}
.Face i{
    /* padding-right: 3vh; */
    color: rgba(21, 0, 255, 0.671)
}
/* .Face p{
    margin-left: -5vh;
} */

.Email i{ 
    /* padding-right: 5vh; */
    color: #04484fdb;
}
/* .Email p{ 
    margin-left: -8vh;
} */
.Phone i{
    color: #04484fdb;
}
.policy{
    display: flex;
    justify-content: center;
    text-align: center;
    margin-top: 2%;
}
.policy p{
    font-size: 2vh;
    color: rgba(3, 51, 56, 0.827);
}
.blue{
    color: #3a68ff;
}
.blue:hover{
    cursor: pointer;
}
/* ================Login-Email============= */
#bodyemail{
    display: flex;
    justify-content: center;
    background-color: #03363c;
}
#email{
    display: inline-block;
    justify-content: center;
    margin-top: 7%;
    width: 70vh;
    height: 70vh;
    background-color: white ;
    border-radius: 5px;
}
#img1 img{
    margin-left: 38%;
    margin-top: 10%;
    width: 20%;
    height: 12%;
}
#heading h3{
    text-align: center;
    color: rgba(3, 51, 56, 0.958);
    font-size: 5vh !important;
}
#Email{
    display: flex;
    justify-content: center;
}
#Email input {
    width: 80%;
    height: 8vh;
    border-radius: 5px;
    padding-left: 5%;
    font-size: 4vh;
    border: 2px solid #002f34;
}
#Email input:hover{
    border-color: rgb(10, 131, 140);
}

#Email button {
    width: 87%;
    height: 8vh;
    border-radius: 5px;
    font-size: 5vh;
    margin-top: 10%;
    background-color: #002f34;
    color: white;
}
#Email button:hover{
    width: 88%;
    font-size: 6vh;
}
#pra{
    text-align: center;
    width: 90%;
    margin:auto 5%;
    margin-top: 13%;
}
/* =============passwordcreate=========== */
#bodypass{
    display: flex;
    justify-content: center;
    background-color: #03363c;
}
#pass{
    display: inline-block;
    justify-content: center;
    margin-top: 5%;
    width: 70vh;
    height: 82vh;
    background-color: white ;
    border-radius: 5px;
}
#imgpass img{
    margin-left: 40%;
    margin-top: 3%;
    width: 15%;
    height: 5%;
}
#headingpass h3{
    margin: auto 5%;
    margin-top: 2%;
    font-size: 4.6vh;
    text-align: center;
}

#headingpass p{
    margin: auto 6%;
    margin-top: 2%;
    text-align: center;
    font-size: 2.5vh;
    margin-bottom: 6%;
}

#Pass{
    display: flex;
    justify-content: center;
    
}
#Pass input {
    width: 80%;
    height: 6vh;
    border-radius: 5px;
    padding-left: 5%;
    font-size: 3vh;
    border: 2px solid #002f34;
    margin-top: -1%;
}
#Pass input:hover{
    border-color: rgb(10, 131, 140);
}

#Pass button {
    width: 87%;
    height: 8vh;
    border-radius: 5px;
    font-size: 4vh;
    margin-top: 9%;
    background-color: #002f34;
    color: white;
    padding-top: 0.3vh !important;
}
#Pass button:hover{
    width: 88%;
    font-size: 5vh;
}
#passCon{
    margin: auto 7%;
    margin-top: -2%;
}
#passCon p{
    font-size: 2vh;
}
#prapass{
    text-align: center;
    width: 90%;
    margin:auto 5%;
    margin-top: 6%;

}
#prapass p{
   font-size: 2vh;

}

/* ============passlogin============== */
#bodypasslogin{
    display: flex;
    justify-content: center;
    background-color: #03363c;
}
#passlogin{
    display: inline-block;
    justify-content: center;
    margin-top: 5%;
    width: 70vh;
    height: 75vh;
    background-color: white ;
    border-radius: 5px;
}
#imgpasslogin img{
    margin-left: 40%;
    margin-top: 8%;
    width: 20%;
    height: 9%;
}
#headingpasslogin h3{
    margin: auto 5%;
    margin-top: 5%;
    font-size: 4vh;
    text-align: center;
}

#headingpasslogin p{
    margin: auto 6%;
    margin-top: 4%;
    text-align: center;
    font-size: 3vh;
    margin-bottom: 6%;
}

#Passlogin{
    display: flex;
    justify-content: center;
}
#Passlogin input {
    width: 80%;
    height: 6vh;
    border-radius: 5px;
    padding-left: 5%;
    font-size: 4vh;
    border: 2px solid #002f34;
    margin-top: 1%;
}
#Passlogin input:hover{
    border-color: rgb(10, 131, 140);
}

#Passlogin button {
    width: 87%;
    height: 8vh;
    border-radius: 5px;
    font-size: 5vh;
    margin-top: 8%;
    background-color: #002f34;
    color: white;
}
#Passlogin button:hover{
    width: 88%;
    font-size: 6vh;
}
#prapasslogin{
    text-align: center;
    width: 90%;
    margin:auto 5%;
    margin-top: 11%;

}
#prapasslogin{
    font-size: 2vh;
}

/* ==================products new page================== */
.fullimg{
    width: 100%;
    height: 100vmax;
    /* border: 2px solid black; */
}
.detail{
    display: inline-block;
    width: 100%;
    height: 100vmax;
    /* border: 2px solid black; */
}
.image{
    margin-top: 0.5%;
    width: 100%;
    height: 40%;
    border: 2px solid rgb(25, 25, 25);
    background-color: rgb(15, 14, 14);
    border-radius: 5px;
}
.proImg{
    border-radius: 2px;
    max-width: 90%;
    min-width: 20%;
    height: 39.5vmax;
    display: block;
    margin: auto;
    margin-bottom: 2%;
}
.des{
    margin-top: 5%;
    width: 100%;
    height: 50vh;
    border: 1px solid rgb(185, 183, 183);
    border-radius: 5px;
    
}
.amount{
    margin-top: 1.5%;
    width: 100%;
    height: 20vh;
    border: 1px solid rgb(185, 183, 183);
    border-radius: 5px;
}
@media screen and (min-width: 500px) {
    .amount{
        margin-top: 1.5% !important;
    }
}
@media screen and (min-width: 200px) {
    .amount{
        margin-top: -7vh;
    }
}
.SP{
    margin-top: 5%;
    width: 100%;
    height: 22vh;
    border: 1px solid rgb(185, 183, 183);
    border-radius: 5px;
}
.deshead{
    margin-left: 2%;
    margin-top: 1%;
    color: #002f34;
    font-size: 3vh;
    font-weight: bolder ;
}
.despra{
    margin-left: 2.5% !important;
    margin-top: 1%;
    display: flex;
    color: #002f34;
    font-size: 2.4vh !important;
    
}
.desPra{
    margin-left: 2.5% !important;
    margin-top: -1%;
    color: #002f34;
    text-align: left !important;
    font-size: 2vh !important;
}
.line{
    margin-bottom: -0.5%;
}
.Ahead{
    margin-top: 2% !important;
    margin-left: 4% !important;
    font-size: 4vh !important;
    display: inline-block;
    font-weight: bold;
    color: #002f34;
}
.price{
    color: #002f34 !important;
}
.amount p {
    text-align: left;
    margin-left: 5%;
    font-size: 1.6vh;
    color: #002f34;
}
.head{
    margin-left: 3vh !important;
    font-size: 3vh !important;

}
.Location{
    font-size: 2.2vh !important;
    margin-top: 2vh !important;
}
.sell{
    font-size: 3vh !important;
    font-weight: 600;
}
#chatUser{
    cursor: pointer;
    border-radius: 0.5vh;
    border: 2px solid #002f34;
    width: 80%;
    height: 6vh;
    margin-left: 10%;
    margin-top: 4vh;
    background-color: #002f34;
}
#chatUser p{
    text-align: center;
    font-size: 3vh;
    font-weight: 600;
    color: white;
}
#chatUser:hover{
    background-color: white;
}
#chatUser p:hover{
    color: #002f34;
}
.mapouter {
    position: relative;
    text-align: right;
    width: 90%;
    height: 90%;
    margin-left: 5%;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    width: 90%;
    height: 90%;
    margin-left: 5%;
}

.gmap_iframe {
    height: 88% !important;
}
.map{
    height: 30vh;
}
/* =======addpost======== */
.post{
    background-color: #dbe2e28a;
    text-align: center;
}
.post img{
    width: 8vh;
    height: 6vh;
    float: left;
}
.post h3{
    font-size: 4vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    color: #002f34;
}
.ads{
    /* border: 2px solid black; */
    width: 95%;
    margin:  3vh auto;
}
.ROW{
    /* border: 2px solid black; */
    display: flex;
    margin-top: 1vh;
}
.col1{
    border: 2px solid #002f34;
    border-radius: 5px;
    width: 30% !important;
}
.col1 p{
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    color: #002f34;
    font-size: 2.5vh;
    margin: auto;
    text-align: center;
    margin-top: 2%;
}
.col2{
    width: 70% !important;
    /* border: 2px solid black; */
}
.col2 input{
    width: 95%;
    height: 100%;
    font-size: 3vh;
    margin-left: 2.5%;
    border: 2px solid #002f34;
    border-radius: 5px;
    padding-left: 3%;
    padding-bottom: 1%;
    padding-top: 0.5%;
}

.col3{
    border: 2px solid #002f34;
    border-radius: 5px;
    width: 30% !important;
    height: 22vh;
}
.col3 p{
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    color: #002f34;
    font-size: 2.5vh;
    margin: auto;
    text-align: center;
    margin-top: 2%;
    padding-top: 8vh;

}
.col4{
    width: 70% !important;
    height: 22vh;
    /* border: 2px solid black; */
}
.col4 textarea{
    width: 95%;
    height: 100%;
    font-size: 3vh;
    margin-left: 2.5% ;
    border: 2px solid #002f34;
    border-radius: 5px;
    padding-left: 3%;
    padding-bottom: 1%;
    padding-top: 0.5%;
}
.col4 input{
    width: 95%;
    height: 100%;
    font-size: 3vh;
    margin-left: 2.5% ;
    border: 2px solid #002f34;
    border-radius: 5px;
    padding-left: 3%;
    padding-bottom: 1%;
    padding-top: 0.5%;
}
.PostImage{
    /* border: 2px solid #002f34; */
    width: 66.4% !important;
    height: 22vh;
    border-radius: 5px;
    margin-left: 1.9% !important ;
}
.postimg{
    margin-top: 2vh;
    width: 100% !important;
    margin-left: -0% !important;
    font-size: 2.5vh !important;
} 
.postButton{
    width: 98%;
    height: 5vh;
    border: 2px solid #002f34;
    margin-top: 3vh;
    border-radius: 2vh;
    text-align: center;
    font-size: 3vh;
    font-family: 'Roboto', sans-serif;
    font-weight: bolder;
    color: white;
    background-color: #002f34ef;
}
.postButton:hover{
    border: 2px solid #002f34;
    color: #002f34;
    background-color: white;
}