:root{
    --main-color: lab(61.12% 10.87 36.99);
}
.navbar-nav{
    gap: 20px;
    margin-right: 50px;
  
}
.navbar{
    background: #ffff;
    border-radius:12px;
    box-shadow:0 4px 10px rgba(0,0,0,0.08)
}
.nav-link:active{
    color: black;
}
.hero-img{
max-width: 80%;
border: 50px;
}
.hero h1{
    font-size: 50px;
}
.hero p{
    font-size: 24px;
}
.hero h4{
    font-size: 30px;
}
.btn{
    background-color: var(--main-color);
    transition: transform 0.3s ease;
}
.btn:hover{
    background-color:none;
    border: 2px  solid var(--main-color);
    transform: scale(1.1);
 

}
.service{
background-color: #fff;
border-radius: 16px;
padding: 24px;
box-shadow:  0 8px 10px var(--main-color)  ;
}
.service:hover{
    transform: scale(1.1);
}
.card-img-top{
    height: 300px;
    width: 100%;
}
.card1{
 transition: transform 0.3s ease;   
}
.card1:hover{
    box-shadow:  0 8px 10px var(--main-color)  ;
    transform: scale(1.1);
}
input:focus, textarea:focus, select:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--main-color) !important;
    border-color: var(--main-color);
    border: none;
}
nav-link:active{
    color: black;
}
.nav-link.active {
    color: #000 !important;  
    font-weight: bold;
}