.contact-section {
display: flex;
width: 100%;
min-height: 800px;
background-color: #2b2a6b; overflow: hidden;
} .contact-image-col {
width: 50%;
position: relative; }
.contact-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.6s ease-in-out;
}
.img-hover {
opacity: 0; } .contact-section:hover .img-original {
opacity: 0;
}
.contact-section:hover .img-hover {
opacity: 1;
} .contact-form-col {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
padding: 80px 5%;
}
.contact-form-inner {
width: 100%;
max-width: 580px; color: #ffffff;
}
.contact-header {
text-align: center;
margin-bottom: 40px;
}
.feather-icon {
width: 24px;
margin-bottom: 15px;
}
.contact-title {
font-family: 'Cormorant Garamond', serif;
font-size: 64px;
font-weight: 400;
margin: 0 0 15px 0;
letter-spacing: 0.02em;
}
.contact-desc {
font-family: 'General Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
margin: 0;
} .dazel-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.form-row-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.input-group label {
font-family: 'General Sans', sans-serif;
font-size: 14px;
color: #ffffff;
}
.req {
color: #ff5e5e; }
.input-group input,
.input-group textarea {
width: 100%;
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 8px;
padding: 14px 16px;
color: #ffffff;
font-family: 'General Sans', sans-serif;
font-size: 15px;
transition: border-color 0.3s;
}
.input-group input::placeholder,
.input-group textarea::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.input-group input:focus,
.input-group textarea:focus {
outline: none;
border-color: #ffffff;
} .btn-send-form {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
height: 56px;
background: transparent;
border: 1px solid #ffffff;
border-radius: 50px;
color: #ffffff;
font-family: 'Cormorant Garamond', serif;
font-size: 20px;
font-weight: 500;
cursor: pointer;
margin-top: 10px;
transition: background-color 0.3s, color 0.3s;
}
.btn-send-form:hover {
background-color: #ffffff;
color: #2b2a6b;
} .form-response {
text-align: center;
font-family: 'General Sans', sans-serif;
font-size: 14px;
margin-top: 10px;
min-height: 20px;
}
.res-success { color: #4ade80; }
.res-error { color: #f87171; } @media (max-width: 1023px) {
.contact-section {
flex-direction: column;
}
.contact-image-col {
width: 100%;
height: 500px; }
.contact-form-col {
width: 100%;
padding: 60px 20px;
}
.form-row-2 {
grid-template-columns: 1fr; }
.contact-title {
font-size: 48px;
}
}