.contact-hero {
padding: 80px 0;
background: linear-gradient(135deg, var(--color-light-gray) 0%, #f0f2f3 100%);
text-align: center;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
width: 400px;
height: 400px;
border-radius: var(--border-radius-full);
background: rgba(255, 255, 255, 0.3);
top: -200px;
right: -100px;
z-index: 1;
}
&::after {
content: '';
position: absolute;
width: 200px;
height: 200px;
border-radius: var(--border-radius-full);
background: rgba(255, 255, 255, 0.2);
bottom: -100px;
left: -50px;
z-index: 1;
}
.container {
position: relative;
z-index: 2;
}
.contact-hero-content {
max-width: 800px;
margin: 0 auto;
h1 {
font-size: var(--font-size-6xl);
font-weight: 700;
color: var(--color-text);
margin-bottom: var(--spacing-md);
line-height: 1.2;
}
.hero-subtitle {
font-size: var(--font-size-xl);
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
}
}
.contact-main {
padding: 80px 0;
background-color: var(--color-white);
.container {
max-width: 900px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.contact-content {
display: flex;
flex-direction: column;
align-items: center;
}
} .contact-info {
width: 100%;
max-width: 800px;
text-align: center;
h2 {
font-size: var(--font-size-3xl);
color: var(--color-text);
margin-bottom: var(--spacing-lg);
font-weight: 700;
}
> p {
font-size: var(--font-size-lg);
color: var(--color-text-light);
line-height: 1.7;
margin-bottom: var(--spacing-2xl);
}
.contact-details {
margin: 20px 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-lg);
.contact-item {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-xl);
background-color: var(--color-light-gray);
border-radius: var(--border-radius-md);
transition: all 0.3s ease;
text-align: center;
&:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.contact-icon {
flex-shrink: 0;
width: 50px;
height: 50px;
background-color: var(--color-primary);
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
svg {
width: 24px;
height: 24px;
}
}
.contact-text {
flex: 1;
h3 {
font-size: var(--font-size-lg);
color: var(--color-text);
font-weight: 600;
margin: 0;
}
a {
color: var(--color-primary);
text-decoration: none;
font-size: var(--font-size-md);
font-weight: 500;
transition: color 0.3s ease;
&:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
}
p {
color: var(--color-text-light);
font-size: var(--font-size-md);
margin: 0;
line-height: 1.5;
}
}
}
}
.contact-social {
width: 100%;
h3 {
font-size: var(--font-size-xl);
color: var(--color-text);
margin-bottom: var(--spacing-lg);
font-weight: 600;
}
.social-links {
display: flex;
gap: var(--spacing-md);
justify-content: center;
.social-link {
width: 50px;
height: 50px;
border-radius: var(--border-radius-md);
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
color: var(--color-text);
svg {
width: 24px;
height: 24px;
}
&:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
&.instagram {
background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
color: var(--color-white);
}
&.facebook {
background-color: #1877f2;
color: var(--color-white);
}
&.linkedin {
background-color: #0077b5;
color: var(--color-white);
}
}
}
}
} @media (max-width: 992px) {
.contact-hero {
padding: 60px 0;
.contact-hero-content {
h1 {
font-size: var(--font-size-5xl);
}
.hero-subtitle {
font-size: var(--font-size-lg);
}
}
}
.contact-main {
padding: 60px 0;
.contact-content {
padding: 0 var(--spacing-md);
}
}
}
@media (max-width: 768px) {
.contact-hero {
padding: 40px 0;
.contact-hero-content {
h1 {
font-size: var(--font-size-4xl);
}
.hero-subtitle {
font-size: var(--font-size-md);
}
}
}
.contact-main {
padding: 40px 0;
.container {
padding: 0 var(--spacing-md);
}
.contact-grid {
grid-template-columns: 1fr;
}
}
.contact-info {
.contact-details {
grid-template-columns: 1fr;
.contact-item {
padding: var(--spacing-md);
gap: var(--spacing-md);
.contact-icon {
width: 40px;
height: 40px;
svg {
width: 20px;
height: 20px;
}
}
.contact-text h3 {
font-size: var(--font-size-md);
}
}
}
.contact-social .social-links .social-link {
width: 40px;
height: 40px;
svg {
width: 20px;
height: 20px;
}
}
}
}
@media (max-width: 576px) {
.contact-hero {
padding: 30px 0;
&::before,
&::after {
display: none;
}
.contact-hero-content {
h1 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-sm);
}
.hero-subtitle {
font-size: var(--font-size-md);
}
}
}
.contact-main {
padding: 30px 0;
.container {
padding: 0 var(--spacing-sm);
}
.contact-grid {
gap: var(--spacing-lg);
}
}
.contact-info {
h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
> p {
font-size: var(--font-size-md);
margin-bottom: var(--spacing-lg);
}
.contact-details {
gap: var(--spacing-md);
}
.contact-social {
h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-md);
}
.social-links {
gap: var(--spacing-sm);
}
}
}
}
@media (max-width: 480px) {
.contact-hero .contact-hero-content h1 {
font-size: var(--font-size-2xl);
}
.contact-info .contact-details {
.contact-item {
gap: var(--spacing-sm);
.contact-icon {
align-self: center;
}
}
}
}