.values-section {
position: relative;
width: 100%;
background-color: var(--color-light);
padding: 7rem 2rem;
display: flex;
flex-direction: column;
align-items: center;
} .values-logo-icon {
display: flex;
justify-content: center;
margin-bottom: 2rem;
opacity: 0;
animation: fadeIn 1s ease-out forwards;
}
.values-logo-icon img {
max-width: 60px;
height: auto;
} .values-container {
max-width: 1400px;
margin: 0 auto;
width: 100%;
display: flex;
flex-direction: column;
} .values-title {
font-family: var(--font-serif, 'Libre Bodoni', serif);
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
text-align: center;
margin-bottom: 3rem;
opacity: 0;
animation: fadeInUp 1s ease-out 0.2s forwards;
} .values-grid {
margin: 50px auto;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
opacity: 0;
animation: fadeInUp 1s ease-out 0.4s forwards;
} .value-item {
display: flex;
flex-direction: column;
gap: 1rem;
text-align: center;
opacity: 0;
transform: translateY(20px);
animation: fadeInUp 1s ease-out forwards;
} .value-icon {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 0.5rem;
}
.value-icon svg {
width: 3rem;
height: 3rem;
color: var(--color-primary);
transition: all 0.3s ease;
}
.value-item:hover .value-icon svg {
color: var(--color-secondary);
transform: scale(1.1);
} .value-title {
font-family: var(--font-display, 'Prompt', sans-serif);
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
} .value-description {
font-family: var(--font-sans, 'Karla', sans-serif);
font-size: 1rem;
line-height: 1.8;
color: var(--color-dark);
opacity: 0.85;
margin: 0;
} @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) {
.values-section {
padding: 3rem 1.5rem;
}
.values-container {
gap: 2.5rem;
}
.values-title {
font-size: 2.5rem;
}
.values-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2.5rem;
}
.value-icon svg {
width: 2.5rem;
height: 2.5rem;
}
.value-title {
font-size: 1.3rem;
}
.value-description {
font-size: 0.95rem;
}
}
@media (max-width: 768px) {
.values-section {
padding: 3rem 1rem;
}
.values-logo-icon img {
max-width: 50px;
}
.values-container {
gap: 2rem;
}
.values-title {
font-size: 2rem;
}
.values-grid {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.value-icon svg {
width: 2.5rem;
height: 2.5rem;
}
.value-title {
font-size: 1.25rem;
}
.value-description {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.values-section {
padding: 2.5rem 1rem;
}
.values-logo-icon img {
max-width: 40px;
}
.values-container {
gap: 1.75rem;
}
.values-title {
font-size: 1.75rem;
}
.values-grid {
gap: 2rem;
}
.value-icon svg {
width: 2rem;
height: 2rem;
}
.value-title {
font-size: 1.1rem;
}
.value-description {
font-size: 0.85rem;
line-height: 1.7;
}
}