.contact-page {
min-height: 100vh;
display: flex;
align-items: center;
padding: 6rem 2rem;
@media (max-width: 768px) {
padding: 6rem 1.5rem;
}
}
.contact-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
@media (max-width: 968px) {
grid-template-columns: 1fr;
gap: 3rem;
}
} .contact-info {
h1 {
font-size: clamp(3.5rem, 7vw, 5rem);
font-weight: 800;
line-height: 1;
color: var(--color-white);
margin-bottom: 1.5rem;
.highlight {
text-decoration: underline;
text-decoration-color: rgba(255, 255, 255, 0.4);
text-underline-offset: 6px;
}
}
}
.contact-label {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.15em;
color: var(--color-white);
background: rgba(255, 255, 255, 0.15);
padding: 0.5rem 1rem;
border-radius: var(--radius-full);
margin-bottom: 1.5rem;
}
.contact-description {
font-size: 1.15rem;
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
margin-bottom: 2.5rem;
}
.contact-benefits {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
li {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-white);
}
.material-symbols-outlined {
font-size: 22px;
color: var(--color-white);
opacity: 0.7;
}
} .contact-form-wrapper {
@media (max-width: 968px) {
max-width: 500px;
margin: 0 auto;
width: 100%;
}
}
.contact-form-card {
background: var(--color-white);
padding: 2.5rem;
border-radius: var(--radius-lg);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
@media (max-width: 768px) {
padding: 2rem 1.5rem;
}
}