body{
    font-family: 'Manrope', sans-serif;
}

#home{
    background-color: #10100f;
}
nav a{
    font-weight: 600;
}
nav a:hover{
border-bottom: 2px solid orange;
}
.margin-top-tool{
 margin-top:5rem;
}

.colorful-btn{
    background-color: #F00C57;
    color:white;
    width: 200px;
   
}

.hbtn {
    position: relative;
    box-sizing: border-box;
    display: inline-block;
    overflow: hidden;
    padding: 8px 20px;
    margin: 0px 3px 6px;
    text-align: center;
    border: 2px solid rgb(255, 255, 255);
    text-decoration: none;
    color: rgb(255, 255, 255);
    white-space: nowrap;
    z-index: 0;
} 


.hbtn i {
    padding-right: 8px;
} 


.hb-fill-right::before {
    position: absolute;
    content: "";
    background: rgb(255, 255, 255);
    transition-duration: 0.3s;
    z-index: -1;
    inset: 0px auto auto 0px;
    width: 0px;
    height: 100%;
    opacity: 1;
} 


.hb-fill-right:hover::before {
    width: 100%;
    height: 100%;
    opacity: 1;
} 


.hb-fill-right:hover {
    color: rgb(0, 0, 0);
    background: rgb(255, 255, 255);
    transition: color 0.3s ease 0s, background 0s ease 0.3s;
} 



/*----------------------- Featured Bikes Section----------------------------
----------------------------------------------------------------------------- */
.hr-sizing{
    padding: .1rem;
    width: 90px;
    background-color:#E76F51;
    border:1px solid #E76F51;
}
.grayscale img{
filter: grayscale(100%);
}
/*----------------------- Latest Bike Section--------------------------------
-------------------------------------------------------------------------------*/
.border-btn{
    border:1px solid #E76F51;
    border-radius: 5px;
}


/*-------------------------------- Service Section -----------------------------*/
.serviceDiv{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin: 50px;
    
}

.serviceDiv div{
margin: 20px;
background-color: #f1f0f036;
padding: 15px;
border-radius: 20px 40px 60px;
transition: background-color 2s;

}

.serviceDiv div:hover{
    margin: 20px;
    background-color: #F9004D;
    padding: 15px;
    transform: scale(2, 0.5);
    color:white;
    
    }


/*----------------------- Client Voice section--------------------------------
-------------------------------------------------------------------------------*/
.common-title-color{
    color:#E76F51;
}
.client-info{
    width:320px;
    border:1px solid rgb(247, 227, 227);
}

/*----------------------- Model Section--------------------------------
-------------------------------------------------------------------------------*/
.model-img{
transition: width 2s ;
}
.model-img:hover{
    transform: scale(1.2);
    
}
/*------------------------- footer section -----------------------------------------
-----------------------------------------------------------------------------------*/
footer a{
    text-decoration: none;
    color:white;
}
footer a:hover{
    color:honeydew
}


/* ------------------------------------Responsive Part -------------------------
--------------------------------------------------------------------------------*/
@media only screen and (max-width:850px) {
    nav{
        text-align: center;
    }
   
    nav ul li a{
        color:white;
    }
    nav ul li a:hover{
        background-color: #f1f0f036;
        border-bottom: 3px solid rgb(43, 30, 7); ;
        border-radius: 7px;
        }
        .serviceHeading h1,p{
            width: 90%;
            
        }
        .serviceDiv{
            display: grid;
            grid-template-columns: repeat(1,1fr);
            margin: 50px;
            
        }
}