html {
  scroll-behavior: smooth;
}
.gradient-background{
    /* background-image: linear-gradient(90deg, #99b0e5, #0a69e0, #03216a); */
    /* background-image: linear-gradient(135deg, oklch(25% .12 263) 0%, oklch(42% .18 263) 50%, oklch(55% .2 258) 100%) */
    
    background-image: linear-gradient(155deg, rgba(210, 288, 255, 0.7) 0%, rgba(1, 65, 173, 0.9) 35%,  rgba(6, 16, 51, 0.7) 100%), 
    url('/resources/northern-tires-truck.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 46% 50%;
    
}
.tire-img{
    background-image: linear-gradient(180deg, rgba(210, 288, 255, 0.2) 0%, rgba(1, 65, 173, 0.7) 90%,  rgba(6, 16, 51, 0.9) 100%), 
    url('/resources/tire.jpg');
    background-size: cover;
}
.light-button-gradient{
    background-image: linear-gradient(135deg, #2080ff, #1141ad);

}
.button-gradient{
    background-image: linear-gradient(135deg, #1141ad, #061033);

}
.primary-gradient-text {
    background-image: linear-gradient(135deg, #fff 0%, #2080ff, #fff);

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text{
    background: linear-gradient(135deg, #1141ad, #061033);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.service-card{
    background: #FFF;
}
.service-card:hover .icon-box{
    transform: rotate(15deg);
}
.service-card:hover{
    transform: translateY(-6px);
}
.arrow-button:hover .arrow-icon{
    transform: translateX(4px);
}
input{
    background:#FFF;
}
#navbar.scrolled {
  background-color: #FFF; /* New color on scroll */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#navbar.scrolled .nav-text{
    color:#000;
}
#drawer.open{
    display: block;
    position:fixed;
    width: 100%;
}
#drawer{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    background: #fff;
    width: 0;
    height: 100vh;
}
.animated-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0); /* Hide by default */
  transform-origin: bottom right;
  transition: transform 0.3s ease-out; /* Create smooth animation */
}

.animated-link:hover::after {
  transform: scaleX(1); /* Show on hover */
  transform-origin: bottom left;
}