body{font-family: poppins;}
html, body {
overflow-x: hidden !important;
}
h1 img{
margin-left: 10px;
}
.active-link{ color:red}
.back-button-container {
position:absolute; /* Fixed position to stay at the top */
top: 40px;
left: 0;
width: 100%;
padding: 10px; /* Padding around the button */
/* Ensure it's above other content */
}
.back-button {
text-decoration: none;
color: #333; /* Text color of the button */
font-weight: bold;
padding: 8px 12px;
border: 1px solid white !important; /* Border style */
border-radius: 4px; /* Rounded corners */
}
.back-button:hover {
background-color: #333; /* Background color on hover */
color: white !important; /* Text color on hover */
}
#think{
margin-left: 210px !important;
}
@media only screen and (max-width:497px){
#think{
margin-left: 30px !important;
font-size: 0.8rem;
}
h6{
font-size:1rem !important;
}
}
@media only screen and (min-width:497px) and (max-width:797px){
#think{
margin-left: 30px !important;
}
}
@media only screen and (max-width:767px){
.nav_login{
margin-left:40px !important;
font-weight: normal !important;
}
}
@media only screen and (min-width:325px) and (max-width:376px){
#menu_sp_vulcanizer{
background-color:white;padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;
width:10.4rem !important;
display: inline-block;
margin:1em 0.1em !important;
}
.nav_login,.nav_signup{
font-weight: normal !important;
display: none! important;
}
}
#loading-image{
width:90px;
height: 90px;
margin: 120px 180px;
}
.categoryName{
text-transform: capitalize;
font-size: 13px;
}
#head_popular{
background-color: rgba(0,70,90,0.8) !important;
color: white;
padding: 15px !important;
}
/*--------------------------------------------------------------
# pagination buttons
--------------------------------------------------------------*/
#page_num{
text-decoration: none;
color:black;
margin-right:8px;
}
.btn-success{
background-color: white;
box-shadow:0px 0px 2px rgba(0,70,90,0.7);
border:none;
padding: 8px;
color: rgba(0,70,90,0.9) !important;
cursor: pointer;
}
.prev,.next{
background-color: white;
box-shadow:0px 0px 2px rgba(0,70,90,0.7);
border:none;
padding:6px;
font-weight: bold;
cursor: pointer;
font-size:18px;
}
.prev:focus,.prev:hover,.next:hover,.next:focus{
color: white !important;
box-shadow:0px 0px 2px rgba(0,70,90,0.7);
border:none;
padding:8px;
cursor: pointer;
}
.btn-success:hover,.btn-success:focus{
background-color: rgba(0,70,90,0.7);
box-shadow:0px 0px 2px rgba(0,70,90,0.7);
border:none;
padding: 5px;
color: white !important;
}
.active-button{
background: rgba(0,70,90,0.7);
color:white !important;
padding: 8px;
}
/*--------------------------------------------------------------
# service vendors categories
--------------------------------------------------------------*/
#mechanic img, #vulcanizer img{
width: 190px;
height: 160px;
}
#mechanic{
padding: 20px;
}
#mechanic h6, #vulcanizer h6{
font-weight: bold !important;
font-size: 14px;
}
@media only screen and (max-width:498px){
#mechanic h6, #vulcanizer h6{
font-weight: bold !important;
font-size: 23px !important;
}
}
#vulcanizer{
padding: 20px;
}
#see_all{
font-size: 12px;
color:white;
}
#home_verified{
position: absolute;
bottom:110px;
right:50px;
}
#verified{
background-color: green;
color: white;
font-size: 11px;
padding: 0px 9px;
margin-left:-5px;
border-radius: 15px;
z-index: -1;
}
.fa-check{
color: white;
background-color: green;
border-radius: 50%;
border:1px solid transparent;
z-index: 100;
font-size: 21px;
margin-top: 15px;
}
#sp_name, #sp_name a {
color:black;
font-size: 14px;
text-transform: capitalize;
}
@media only screen and (max-width:497px){
#sp_name, #sp_name a {
color:black;
font-size: 15px;
text-transform: capitalize;
}
.categoryName{
text-transform: capitalize;
font-size: 16px;
}
}
#sp_location, #sp_location a{
font-weight: bold;
font-size: 14px;
color: black;
}
@media only screen and (max-width:497px){
#sp_location, #sp_location a{
font-weight: bold;
font-size: 15px;
color: black;
}
}
#sp_speciality, #sp_speciality a{
font-size: 12px;
color: black;
}
@media only screen and (max-width:497px){
#sp_speciality, #sp_speciality a{
font-size: 12px;
color: black;
}
}
#menu_sp_vulcanizer{
position: relative;
display: inline-block;
width: 240px;
margin-right:18px;
margin-left: 10px;
margin-bottom: 20px;
padding:10px;
border:1px solid rgba(0,0,0,0.3);
}
#menu_sp_vulcanizer img{
object-fit:cover;
height: 200px;
width: 100%;
}
@media only screen and (min-width:300px) and (max-width:325px){
#menu_sp_vulcanizer{
width:9rem !important;
display: inline-block;
margin:1em 0.15em !important;
}
}
@media only screen and (min-width:366px) and (max-width:403px){
#menu_sp_vulcanizer{
width:10rem !important;
display: inline-block;
margin:1em 0.10em !important;
}
}
@media only screen and (min-width:416px) and (max-width:430px){
#menu_sp_vulcanizer{
width:12rem !important;
display: inline-block;
margin:1em 0.10em !important;
}
}
@media only screen and (min-width:430px) and (max-width:498px){
#menu_sp_vulcanizer{
width:10rem !important;
display: inline-block;
margin:1em 0.15em !important;
}
}
@media only screen and (min-width:325px) and (max-width:376px){
#menu_sp_vulcanizer{
background-color:white;padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 5px;
width:10rem !important;
display: inline-block;
margin:1em 0.3em !important;
text-transform:capitalize;
}
.nav_login,.nav_signup{
margin-left:40px !important;
font-weight: normal !important;
display:none !important;
}
}
@media only screen and (min-width:377px) and (max-width:390px){
#menu_sp_vulcanizer{
background-color:white;padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;
width:10.3rem !important;
display: inline-block;
margin:1em 0.2em !important;
}
.nav_login,.nav_signup{
margin-left:40px !important;
font-weight: normal !important;
display:none !important;
}
}
@media only screen and (min-width:400px) and (max-width:414px){
#menu_sp_vulcanizer{
background-color:white;padding-bottom: 8px;margin-bottom:50px;border:1px solid rgba(0,70,90,0.2);
padding: 1px;
width:11.6rem !important;
display: inline-block;
margin:1em 0.15em !important;
}
.nav_login,.nav_signup{
margin-left:40px !important;
font-weight: normal !important;
display:none !important;
}
}
@media only screen and (max-width:497px){
#menu_sp_vulcanizer img{
object-fit:cover;
height: 160px;
width: 100%;
padding: 3px;
}
.nav_login,.nav_signup{
margin-left:40px !important;
font-weight: normal !important;
display:none !important;
}
}
@media only screen and (min-width:497px) and (max-width:767px){
#menu_sp_vulcanizer img{
object-fit:cover;
height: 160px;
width: 190px;
}
#menu_sp_vulcanizer{
position: relative;
display: inline-block;
margin-right:11px;
margin-left:16px;
margin-bottom: 20px;
word-break: break-all;
word-wrap: break-word;
padding: 3px;
}
#sp_speciality, #sp_speciality a{
font-size: 10px;
color: black;
}
}
#menu_sp a{
color: black;
}
/*--------------------------------------------------------------
# navigation
--------------------------------------------------------------*/
.nav_signup{
font-weight: normal !important;
border:1px solid none;
border-left:1px solid white;
border-left-color: rgba(192,192,192,1);
margin-left:0px;
}
.nav_login{
font-weight: normal !important;
margin-left:80px;
}
/*--------------------------------------------------------------
background picture
--------------------------------------------------------------*/
#main_service_provider h6{color: white;font-weight: bold;}
#main_service_provider{
background-image: url(../../assets/icons/rectangle_28.png);
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
.menu_service_provider select{
font-size: 14px;
background-color: rgba(0,0,0,0.1);
color: white;
}
.menu_service_provider {
padding: 30px;
background-color: rgba(192,192,192,0.1);
margin-top: 10px;
border:1px solid white;
border-radius: 8px;
}
.menu_service_provider .btn-primary{
font-size: 12px;
color: white;
}
/*--------------------------------------------------------------
# navigation search bar
--------------------------------------------------------------*/
#input_search{
font-size: 12px;
border:1px solid transparent;
font-weight: normal;
background-color: rgba(192,192,192,0.5);
border-radius: 12px;
width: 390px !important;
}
#search_page{
margin-left: -350px;
}
@media screen only and (max-width:497px){
#menu_sp {
font-size:21px !important;
}
}
#menu_sp{
margin-right: 25px;
position: relative;
}
.service_providers{
width: 100%;
font-size: 13px !important;
text-align: center;
}
#menu_sp img{
width: 150px;
height: 150px;
border-radius: 50%;
}
@media only screen and (max-width:767px){
#menu_sp img{
width: 150px;
height: 150px;
border-radius: 50%;
}
.menu_service_provider select{font-size:17px;}
}
/*--------------------------------------------------------------
# flickity
--------------------------------------------------------------*/
.flickity-page-dots{
bottom: -35px;
display: none;
}
.flickity-page-dots .dot{
width:100px !important;
height: 6px;
margin: 0 !important;
border-radius: 0 !important;
display: none;
}
@media only screen and (max-width:767px){
.flickity-page-dots .dot{
width:40px !important;
height: 4px;
margin: 0 !important;
border-radius: 0 !important;
display: none;
}
}
.flickity-page-dots .dot.is-selected{
background-color:rgba(255,165,50,1);
display: none;
}
/*--------------------------------------------------------------
# navigation bar mobile
--------------------------------------------------------------*/
@media only screen and (max-width:1200px){
.button_navigation{
font-size:12px;
cursor: pointer;
color:black;
padding:5px 0px;
margin-right:10px !important;
font-weight: bold;
}
}
/*--------------------------------------------------------------
# navigation bar
--------------------------------------------------------------*/
.button_navigation{
font-family:poppins;
float:left;
font-size:13px;
cursor: pointer;
color:black;
padding:8px 1px;
margin-right:32px;
font-weight: bold;
}
@media only screen and (max-width:1200px){
.button_navigation{
display: none;
}
}
.button_navigation:hover{
opacity: 0.8;
text-decoration: none;
}
.nav-container{
width: 100%;
margin-top: 30px;
/*display: flex;
align-items: center;
justify-content: space-between;*/ }
/*--------------------------------------------------------------
# anchor category
--------------------------------------------------------------*/
.category{
margin:17px 10px;
margin-right: 10px;
font-size: 12px;
border:1px solid rgba(0,0,0,0.2);
padding: 2px 10px;
border-radius: 15px;
text-transform: capitalize;
color: black;
text-decoration: none;
}
@media only screen and (max-width:480px){
.category{
margin-right:5px;
font-size: 12px;
border:1px solid rgba(0,0,0,0.2);
padding: 2px 10px;
border-radius: 15px;
text-transform: capitalize;
color: black;
text-decoration: none;
}
}
.category:hover{
background-color: skyblue;
color:white;
text-decoration: none;
transition: 0.3s ease-in-out;
}
.category nth-child(3){
background-color: rgba(192,192,192,0.4);
}
/*--------------------------------------------------------------
# navigation bar img
--------------------------------------------------------------*/
.button_navigation img{
width: 20px;
height: 18px;
}
/*--------------------------------------------------------------
# navigation search bar
--------------------------------------------------------------*/
#input_search{
font-size: 12px;
border:1px solid transparent;
font-weight: normal;
background-color: rgba(192,192,192,0.5);
border-radius: 12px;
width: 310px;
}
/*--------------------------------------------------------------
# navigation search bar button
--------------------------------------------------------------*/
#btn-search{
font-size: 10px;
border-radius:0px 13px 13px 0px;
margin-left: -80px;
padding: 7px 8px;
position: relative;
z-index: 9;
color: white !important;
display:;
}
/*--------------------------------------------------------------
# flickity
--------------------------------------------------------------*/
#menu figure img{
width: 100%;
height:110px;
}
#menu{
margin-left: 10px;
margin-right: 10px;
}
.carousel .flickity-prev-next-button {
display: none;
}
.carousel .flickity-prev-next-button {
display: none;
}
.flickity-button:disabled {
}
.menu .flickity-prev-next-button {
display: block;
width:25px;
height:25px;
}
.menu .flickity-page-dots{
display: block;
}
.menu .flickity-page-dots .dot{
width: 12px;
height: 12px;
opacity: 1;
background: transparent;
border: 2px solid white;
}
.menu .flickity-page-dots .dot.is-selected{
background-color: white;
}
@media only screen and (max-width:497px){
.menu .flickity-prev-next-button.previous {
left:-3px;
}
.menu .flickity-prev-next-button.next {
right:-3px;
}
.menu .flickity-prev-next-button {
display: block;
width:25px;
height:25px;
}
.menu .flickity-page-dots{
bottom: 0px;
display: inline-block;
}
.menu .flickity-page-dots .dot{
width: 12px;
height: 12px;
opacity: 1;
background: transparent;
border: 2px solid white;
}
.menu .flickity-page-dots .dot.is-selected{
background-color: white;
}
}
@media only screen and (min-width:497px) and (max-width:767px){
.menu .flickity-page-dots{
bottom: 35px;
display: inline-block;
}
.menu .flickity-page-dots .dot{
width: 10px;
height: 10px;
opacity: 1;
background: transparent;
border: 2px solid white;
}
.menu .flickity-page-dots .dot.is-selected{
background-color: white;
}
.menu{
overflow-x: hidden;
width: 100%;
margin-top: 15px;
}
.menu .flickity-prev-next-button.previous {
left:0;
}
.menu .flickity-prev-next-button.next {
right:0;
}
}
/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.footer h6{
font-weight: bold;
font-size: 15px;
margin-bottom: 10px;
}
.footer p{
font-size: 14px;
}
.footer{
padding: 10px 20px;
background-color: rgba(192,192,192,0.5);
}
.footer img{
width: 140px;
}
.footer button{
font-size: 13px;
border:1px solid transparent;
background-color: rgba(0,0,0,0.6);
color: white;
margin-bottom: 8px;
}
.footer{
margin-top: 30px;
}