.container {
margin: 0 auto;
max-width: 1200px;
}
.title {
text-align: center;
}
.subtitle {
text-align: center;
color: #cccccc;
font-size: 1rem;
margin-bottom: 60px;
}
.timeline {
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
margin: 80px auto 60px;
max-width: 900px;
padding: 0 50px;
}
.timeline-line {
position: absolute;
top: 90%;
left: 80px;
right: 80px;
height: 2px;
background-color: #444444;
z-index: 1;
}
.timeline-step {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
z-index: 2;
cursor: pointer;
transition: transform 0.3s ease;
}
.timeline-step:hover {
transform: translateY(-5px);
}
.icon-wrapper {
margin-bottom: 15px;
}
.icon {
width: 60px;
height: 60px;
color: var(--gold);
transition: all 0.3s ease;
}
.timeline-step:hover .icon {
transform: scale(1.1);
}
.timeline-dot {
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #ffffff;
border: 3px solid #444444;
transition: all 0.3s ease;
}
.timeline-dot.active {
background-color: var(--gold);
border-color: var(--gold);
}
.timeline-step:hover .timeline-dot {
border-color: var(--gold);
transform: scale(1.2);
}
.card-container {
position: relative;
max-width: 570px;
margin: 0 auto;
}
.card {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 4rem 3rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.card::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: url(//malikmotorosoktatas.hu/wp-content/uploads/card-bg-black-stretch.svg);
background-size: 100% 100%;
background-position: center;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sard:hover::after {
transform: translateY(-20px);
}
.card.active {
opacity: 1;
visibility: visible;
position: relative;
left: 0;
transform: none;
}
.card-header {
margin-bottom: 20px;
}
.card-icon {
width: 60px;
height: 60px;
color: var(--gold);
}
.card-title {
color: #ffffff;
}
.card-description {
color: #cccccc;
margin-bottom: 25px;
}
.card-arrows {
position: absolute;
bottom: 30px;
right: 30px;
font-size: 2rem;
color: var(--red);
opacity: 0.6;
}
.card-button {
margin-top: 1.1rem;
}
@media only screen and (max-width: 1240px) {
.icon {
width: 50px;
height: 50px;
}
.card-title {
margin-bottom: 0.5rem;
}
.card-container {
position: relative;
}
}
@media (max-width: 768px) {
.title {
font-size: 1.8rem;
letter-spacing: 2px;
}
.timeline {
padding: 0 20px;
margin: 60px auto 40px;
max-width: 100%;
}
.timeline-line {
left: 40px;
right: 40px;
}
.icon {
width: 35px;
height: 35px;
}
.timeline-dot {
width: 12px;
height: 12px;
}
.card-container {
max-width: 420px;
}
.card {
padding: 2rem 2.5rem;
}
.card-icon {
width: 45px;
height: 45px;
}
.card-description {
font-size: 0.9rem;
}
.card-button {
padding: 10px 20px;
font-size: 16px;
margin-top: 0;
}
}