.process-section {
position: relative;
width: 100%;
max-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
padding: 7rem 2rem 7rem 2rem;
padding-top: 14rem;
z-index: 50;
} .process-background {
position: absolute;
top: 0%;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
will-change: transform;
}
.process-bg-image {
width: 100%;
height: 100%;
object-fit: cover;
} .process-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
z-index: 2;
} .process-content {
position: relative;
z-index: 100;
width: 100%;
max-width: 900px;
margin: 0 auto;
text-align: center;
display: flex;
flex-direction: column;
gap: 2rem;
transform: translateY(-20vh);
margin-bottom: -39vh;
} .process-logo-icon {
display: flex;
justify-content: center;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
.process-logo-icon img {
max-width: 60px;
height: auto;
} .process-title {
text-align: center;
font-family: var(--font-serif, 'Libre Bodoni', serif);
font-size: 2rem;
font-weight: 700;
color: var(--color-secondary);
text-transform: uppercase;
margin: 0;
margin-top: 2rem;
opacity: 0;
animation: fadeInUp 1s ease-out 0.2s forwards;
} .process-text {
background-color: rgba(255, 255, 255, 0);
padding: 40px;
font-family: var(--font-sans);
font-size: 1.125rem;
line-height: 1.9;
color: var(--color-dark);
opacity: 0;
animation: fadeInUp 1s ease-out 0.4s forwards;
overflow-y: auto;
margin-bottom: 6rem;
margin-left: auto;
margin-right: auto;
max-width: 1100px;
width: 100%;
box-sizing: border-box;
} .process-text::-webkit-scrollbar {
width: 6px;
}
.process-text::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
}
.process-text::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
border-radius: 3px;
}
.process-text::-webkit-scrollbar-thumb:hover {
background: rgba(255, 255, 255, 0.5);
} @keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @media (max-width: 1024px) {
.process-section {
padding: 3rem 1.5rem;
padding-top: 8rem;
max-height: none;
min-height: auto;
}
.process-content {
max-width: 100%;
gap: 1.75rem;
transform: none;
margin-bottom: 0;
}
.process-title {
font-size: 1.75rem;
margin-top: 1rem;
}
.process-text {
font-size: 1.05rem;
max-height: none;
max-width: 700px;
margin-bottom: 2rem;
padding: 25px;
}
}
@media (max-width: 768px) {
.process-section {
padding: 3rem 1rem;
padding-top: 6rem;
min-height: auto;
}
.process-content {
max-width: 100%;
gap: 1.5rem;
transform: none;
margin-bottom: 0;
}
.process-logo-icon img {
max-width: 50px;
}
.process-title {
font-size: 1.5rem;
letter-spacing: 0.1em;
margin-top: 1rem;
}
.process-text {
font-size: 1rem;
line-height: 1.8;
max-width: 100%;
margin-bottom: 2rem;
padding: 20px;
}
}
@media (max-width: 480px) {
.process-section {
padding: 2.5rem 0.75rem;
padding-top: 5rem;
min-height: auto;
}
.process-content {
gap: 1.25rem;
transform: none;
margin-bottom: 0;
}
.process-logo-icon img {
max-width: 40px;
}
.process-title {
font-size: 1.25rem;
letter-spacing: 0.08em;
margin-top: 0.5rem;
}
.process-text {
font-size: 0.95rem;
line-height: 1.75;
max-width: 100%;
margin-bottom: 1.5rem;
padding: 15px 10px;
}
}