.about-section {
position: relative;
width: 100%;
background-color: white;
padding-top: 7rem;
padding-right: 2rem;
padding-left: 2rem;
padding-bottom: 9rem;
display: flex;
flex-direction: column;
justify-content: center;
overflow: visible; z-index: 1;
} .about-logo-icon {
display: flex;
justify-content: center;
margin-bottom: 2rem;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
flex-shrink: 0;
}
.about-logo-icon img {
max-width: 60px;
height: auto;
} .about-container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
flex: 1;
overflow: visible;
} .about-image {
width: 100%;
height: 100%;
max-height: 70vh;
opacity: 0;
transform: translateX(0px) !important;
animation: slideInLeft 1s ease-out 0.3s forwards;
}
.about-img,
.about-image img {
width: 100%;
height: 100%;
object-fit: cover;
} .about-content {
padding: 4rem;
opacity: 0;
transform: translateY(65px) !important;
animation: slideInRight 1s ease-out 0.3s forwards;
overflow-y: auto;
background-color: var(--color-light); } .about-title {
font-family: var(--font-serif, 'Libre Bodoni', serif);
font-size: 2.5rem;
font-weight: 400;
font-style: italic;
color: var(--color-primary);
margin: 0;
white-space: pre-line;
} .about-text {
font-family: var(--font-sans, 'Karla', sans-serif);
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-dark);
margin: 3rem 0;
opacity: 0.9;
} .about-link {
font-family: var(--font-serif, 'Libre Bodoni', serif);
font-size: 1.75rem;
font-style: italic;
color: var(--color-secondary);
text-decoration: none;
display: inline-block;
position: relative;
transition: all 0.3s ease;
font-weight: 400;
}
.about-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 2px;
background: var(--color-secondary);
opacity: 0;
transform: scaleX(0);
transform-origin: left;
transition: all 0.3s ease;
}
.about-link:hover {
color: var(--color-primary);
}
.about-link:hover::after {
opacity: 1;
transform: scaleX(1);
}  .about-section:nth-of-type(1) .about-image {
transform: translateY(-40px);
}
.about-section:nth-of-type(1) .about-content {
transform: translateY(40px);
} .about-section:nth-of-type(2) {
z-index: 2;
}
.about-section:nth-of-type(2) .about-image {
transform: translateY(-60px);
}
.about-section:nth-of-type(2) .about-content {
transform: translateY(80px);
} .about-section:nth-of-type(3) {
margin-top: -100px;
z-index: 3;
}
.about-section:nth-of-type(3) .about-image {
transform: translateY(-30px);
}
.about-section:nth-of-type(3) .about-content {
transform: translateY(50px);
}
.about-section:hover {
z-index: 10;
} @keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideInLeft {
from { opacity: 0; transform: translateX(-30px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
from { opacity: 0; transform: translateX(30px); }
to { opacity: 1; transform: translateX(0); }
} @media (max-width: 1024px) {
.about-section {
padding: 7rem 1.5rem;
margin-top: 0 !important;
}
.about-container {
gap: 3rem;
}
.about-title {
font-size: 2rem;
}
.about-text {
font-size: 1rem;
}
.about-link {
font-size: 1.5rem;
}
.about-section .about-image,
.about-section .about-content {
transform: translateY(0) !important;
}
}
@media (max-width: 768px) {
.about-section {
padding: 3rem 1rem;
max-height: none;
}
.about-logo-icon {
margin-bottom: 2rem;
}
.about-logo-icon img {
max-width: 50px;
}
.about-container {
grid-template-columns: 1fr;
gap: 2rem;
overflow: visible;
}
.about-image {
min-height: 350px;
max-height: none;
transform: translateY(0);
animation: fadeIn 1s ease-out 0.3s forwards;
}
.about-content {
padding: 1rem;
transform: translateY(0);
animation: fadeIn 1s ease-out 0.5s forwards;
overflow-y: visible;
max-height: none;
}
.about-title {
font-size: 1.75rem;
margin-bottom: 1.5rem;
}
.about-text {
font-size: 0.95rem;
margin-bottom: 2rem;
}
.about-link {
font-size: 1.35rem;
}
}
@media (max-width: 480px) {
.about-section {
padding: 2.5rem 1rem;
max-height: none;
}
.about-logo-icon img {
max-width: 40px;
}
.about-image {
min-height: 300px;
max-height: none;
}
.about-title {
font-size: 1.5rem;
}
.about-text {
font-size: 0.9rem;
line-height: 1.7;
}
.about-link {
font-size: 1.2rem;
}
}