.navigation {
background-color: var(--white);
}
.navigation .sub-service-navigation {
padding-top: clamp(60px, 12rem, 120px);
padding-bottom: clamp(60px, 12rem, 120px);
}
.navigation .sub-service-navigation a {
transition: 0.5s ease;
font-size: clamp(12px, 3.6rem, 36px);
line-height: 1.1;
}
.navigation .sub-service-navigation a:hover {
color: var(--primary-color);
}
.navigation .sub-service-navigation .next-button svg {
margin-left: clamp(15px, 3rem, 30px);
width: clamp(25px, 5rem, 50px);
}
.navigation .sub-service-navigation .previous-button svg {
margin-right: clamp(15px, 3rem, 30px);
width: clamp(25px, 5rem, 50px);
}
.navigation .sub-service-navigation a:hover svg path {
stroke: var(--primary-color);
}
.navigation .sub-service-navigation .next-button:hover svg {
transform: rotate(-45deg);
}
.navigation .sub-service-navigation .previous-button:hover svg {
transform: rotate(45deg);
}
@media (max-width: 550px) {
.navigation .sub-service-navigation a {
font-size: 2.5rem;
}
.navigation .sub-service-navigation .previous-button svg {
width: 4rem;
margin-right: 2rem;
}
.navigation .sub-service-navigation .next-button svg {
width: 4rem;
margin-left: 2rem;
}
.navigation .sub-service-navigation {
padding-top: 8rem;
padding-bottom: 8rem;
}
}