.benefits-wrapper {
width: 100%;
padding: 0;
margin: 0;
}
.benefits-wrapper .container {
margin: 0 auto;
}
.benefits-wrapper .benefits-title {
font-weight: 700;
font-size: 38px;
line-height: 56px;
letter-spacing: 0px;
color: var(--secondary-color);
margin: 0;
}
.benefits-wrapper .benefits-grid {
display: flex;
justify-content: center;
gap: 20px;
}
.benefits-wrapper .benefit-card {
width: calc(100% - 20px);
background: var(--secondary-color);
padding: 30px;
border-radius: 10px;
height: calc(250px - 30px);
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid var(--secondary-color);
}
.benefits-wrapper .benefit-card:hover{
background: var(--white-color);
transition: .2s ease-in-out;
}
.benefits-wrapper .benefit-card:hover .benefit-card-title,
.benefits-wrapper .benefit-card:hover .benefit-card-content{
color: var(--secondary-color)
}
.benefits-wrapper .benefit-card .benefit-card-top {
display: flex;
justify-content: space-between;
align-items: center;
}
.benefits-wrapper .benefit-card-title {
font-weight: 700;
font-size: 24px;
line-height: 35px;
color: var(--white-color);
}
.benefits-wrapper .benefit-card-content {
font-weight: 400;
font-size: 17px;
line-height: 32px;
color: var(--white-color);
}
.benefits-wrapper .benefit-card-content p {
margin-top: 0;
}
.benefits-wrapper .top-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 40px;
}
.benefits-wrapper .top-head a {
font-weight: 500;
font-size: 17px;
line-height: 32px;
letter-spacing: 0px;
color: var(--secondary-color);
position: relative;
padding-right: 30px;
}
.benefits-wrapper .top-head a::after {
content: "";
position: absolute;
right: 0px;
width: 20px;
height: 20px;
background-image: url(https://rinxs.nl/wp-content/uploads/2025/07/right-blue.svg);
background-repeat: no-repeat;
background-position: center;
background-size: 19px;
top: 6px;
transition: transform 0.3s ease;
}
.benefits-wrapper .top-head a:hover::after {
transform: translateX(4px);
transition: transform 0.3s ease;
}
.benefits-wrapper .bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.benefits-wrapper .bottom-content {
font-weight: 400;
font-size: 17px;
line-height: 32px;
color: var(--secondary-color);
}
.benefits-wrapper .bottom-content a {
border: 1px solid var(--secondary-color);
color: var(--secondary-color);
padding: 14px 30px;
border-radius: 50px;
font-weight: 500;
font-size: 17px;
line-height: 32px;
letter-spacing: 0px;
}
.benefits-wrapper .bottom-content a:hover{
background: var(--secondary-color);
color: var(--white-color);
transition: .2s ease-in-out;
}
@media (max-width: 1400px) {
.benefits-wrapper .benefit-card-image {
width: 100%;
}
.benefits-wrapper .benefits-grid {
gap: 20px;
}
}
@media (max-width: 1315px) {
.benefits-wrapper .benefits-grid {
flex-wrap: wrap;
justify-content: left;
}
.benefits-wrapper .benefit-card {
width: calc(50% - 80px);
}
.benefits-wrapper .benefit-card-content p br {
display: none;
}
.benefit-card-icon{
height: 40px;
}
.benefit-card-icon img{
width: 40px;
height: 40px;
}
}
@media (max-width: 850px){
.benefits-wrapper .benefit-card-title{
font-size: 20px;
line-height: 100%;
}
}
@media (max-width: 790px) {
.benefits-wrapper .benefits-grid {
justify-content: space-between;
}
.benefits-wrapper .benefit-card {
width: calc(100% - 60px);
height: 100%;
}
.benefits-wrapper .benefit-card-title {
width: 100%;
}
.benefit-card-icon{
height: 30px;
}
.benefit-card-icon img{
width: 30px;
height: 30px;
}
.benefits-wrapper .benefit-card .benefit-card-top{
margin-bottom: 15px;
}
.benefits-wrapper .bottom-content,
.benefits-wrapper .top-head{
flex-wrap: wrap;
}
}
@media (max-width: 726px) {
.benefits-wrapper .bottom-content {
margin-top: 20px;
}
.benefits-wrapper .top-head{
margin-bottom: 30px;
}
}
@media (max-width: 680px){
.benefits-wrapper .benefits-title{
font-size: 32px;
line-height: 100%;
width: 100%;
margin-bottom: 20px;
}
}