.beps-cta-card {
position: relative;
display: flex;
flex-direction: column;
min-height: 260px;
padding: 28px;
border-radius: 24px;
overflow: hidden;
box-sizing: border-box;
text-decoration: none;
background-color: #CBDDE4; transition: transform 0.3s ease, box-shadow 0.3s ease;
}
a.beps-cta-card,
a.beps-cta-card:hover,
a.beps-cta-card:focus {
text-decoration: none;
} .beps-cta-card--image {
background-color: #141436;
}
.beps-cta-media {
position: absolute;
inset: 0;
z-index: 0;
}
.beps-cta-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
} .beps-cta-media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(20, 20, 54, 0.55) 0%, rgba(20, 20, 54, 0) 60%);
pointer-events: none;
} .beps-cta-badge {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
align-self: flex-start; padding: 8px 16px;
border-radius: 50px;
background-color: #FCD774;
color: #141436;
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
} .beps-cta-card--color .beps-cta-badge {
background-color: #ffffff;
} .beps-cta-content {
position: relative;
z-index: 1;
} .beps-cta-card--image .beps-cta-content {
margin-top: auto;
} .beps-cta-card--color .beps-cta-content {
margin-top: 22px;
} .beps-cta-title-row {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0;
max-width: 100%;
}
.beps-cta-title {
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.beps-cta-card--image .beps-cta-title { color: #ffffff; }
.beps-cta-card--color .beps-cta-title { color: #141436; } .beps-cta-arrow {
display: inline-flex;
flex-shrink: 0;
font-size: 0.95em; transition: transform 0.3s ease;
}
.beps-cta-card--image .beps-cta-arrow { color: #FCD774; }
.beps-cta-card--color .beps-cta-arrow { color: #141436; } .beps-cta-desc {
margin: 8px 0 0;
font-size: 15px;
line-height: 1.5;
}
.beps-cta-card--image .beps-cta-desc { color: rgba(255, 255, 255, 0.85); }
.beps-cta-card--color .beps-cta-desc { color: #3A3A55; } .beps-cta-card:hover .beps-cta-arrow {
transform: translate(3px, -3px);
}
.beps-cta-hover-zoom:hover .beps-cta-media img {
transform: scale(1.06);
}
.beps-cta-hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}