.at-7aab992b-wrapper {
position: relative;
max-width: 1200px;
margin: 0 auto;
display: flex;
padding: 0;
}
.at-7aab992b-line {
position: absolute;
left: 50%; top: 0;
bottom: 0;
width: 2px;
background-color: rgba(255, 255, 255, 0.2);
transform: translateX(-50%);
z-index: 1;
}
.at-7aab992b-line-inner {
width: 100%;
height: 0;
background-color: #ffffff; }
.at-7aab992b-steps {
width: 100%;
display: flex;
flex-direction: column;
gap: 80px;
z-index: 2;
position: relative;
}
.at-7aab992b-step {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
position: relative;
}
.at-7aab992b-image {
width: 42%;
}
.at-7aab992b-image img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
background: #fff;
min-height: 200px;
}
.at-7aab992b-image-placeholder {
width: 100%;
height: 250px;
background: #ffffff;
}
.at-7aab992b-marker-area {
width: 16%;
position: relative;
display: flex;
justify-content: center;
margin-top: 20px;
}
.at-7aab992b-step-marker {
width: 12px;
height: 12px;
background-color: #ffffff;
border-radius: 50%;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
z-index: 3;
}
.at-7aab992b-step-branch-wrapper {
position: absolute;
top: 5px;
left: 50%;
width: 8vw; height: 2px;
z-index: 2;
}
.at-7aab992b-step-branch {
width: calc(100% - 15px); height: 100%;
background-color: #ffffff;
transform-origin: left center;
transform: scaleX(0);
transition: transform 0.6s ease;
}
.at-7aab992b-step.is-branch-visible .at-7aab992b-step-branch {
transform: scaleX(1);
}
.at-7aab992b-text {
width: 42%;
padding-left: 20px;
}
.at-7aab992b-text-inner {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease 0.3s, transform 0.6s ease 0.3s;
}
.at-7aab992b-step.is-visible .at-7aab992b-text-inner {
opacity: 1;
transform: translateY(0);
}
.at-7aab992b-heading {
font-size: 24px;
margin: 0 0 15px 0;
font-family: monospace, sans-serif;
color: #ffffff;
line-height: 1.2;
}
.at-7aab992b-content {
font-size: 15px;
line-height: 1.7;
font-family: monospace, sans-serif;
color: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
.at-7aab992b-step {
flex-direction: column;
align-items: center;
}
.at-7aab992b-line {
left: 20px;
}
.at-7aab992b-image {
width: 100%;
padding-left: 40px;
}
.at-7aab992b-marker-area {
position: absolute;
left: 20px;
top: 0;
width: 0;
margin-top: 0;
}
.at-7aab992b-text {
width: 100%;
padding-left: 40px;
margin-top: 20px;
}
.at-7aab992b-step-branch-wrapper,
.at-7aab992b-step-branch {
display: none;
}
}