body {
min-height: 100dvh;
background: #FCFCFC;
color: #080807;
}
.hidden {
display: none;
} .contact-header .pages a::after {
background: #080807;
}
.contact-header .form_button {
background: #080807;
color: #FCFCFC;
}
.contact-header .form_button:hover {
background: #080807;
}
.contact-header .burger-menu span {
background: #080807;
}
.logo-link {
display: inline-block;
} .contact-main {
padding: 80px 0;
}
.contact-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 120px;
} .contact-title {
color: #575644; font-family: "Gill Sans", sans-serif;
font-size: 110px;
font-weight: 700;
margin-bottom: 50px;
letter-spacing: 5.5px;
}
.contact-subtitle {
margin-bottom: 60px;
}
.contact-subtitle p {
font-size: 30px;
letter-spacing: 1.5px;
} .contact-form {
max-width: 600px;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 30px;
}
.form-group {
display: flex;
flex-direction: column;
}
.form-group.full-width {
margin-bottom: 30px;
}
.form-group label {
font-family: "Gill Sans", sans-serif;
font-size: 14px;
font-weight: 400;
margin-bottom: 8px;
}
.form-group input,
.form-group textarea {
background: transparent;
border: none;
border-bottom: 1px solid #D4D4D4;
padding: 8px 0;
font-family: "Gill Sans", sans-serif;
font-size: 16px;
transition: all 0.3s ease;
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: #C4C4C4;
font-size: 16px;
}
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-bottom-color: #080807;
}
.form-group textarea {
resize: vertical;
min-height: 100px;
} .submit-btn {
background: transparent;
border: 1px solid #080807;
border-radius: 30px;
padding: 12px 40px;
font-family: "Gill Sans", sans-serif;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 20px;
color: #080807;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.submit-btn:hover {
background: #080807;
color: #FCFCFC;
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
} .submit-btn.sending,
.submit-btn.success,
.submit-btn.error {
color: #fff !important;
} .contact-info {
padding-top: 20px;
}
.info-block {
margin-bottom: 90px;
}
.info-block h3 {
font-family: "Gill Sans";
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.info-block p {
font-family: Inter;
font-size: 18px;
font-weight: 400;
padding-top: 20px;
color: #878585;
}
.info-block a {
text-decoration: none;
transition: color 0.3s ease;
}
.info-block a:hover {
color: #080807;
} .notification {
position: fixed;
top: 20px;
right: 20px;
padding: 15px 25px;
color: white;
border-radius: 5px;
z-index: 10000;
animation: slideIn 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.notification.success {
background: #4CAF50;
}
.notification.error {
background: #f44336;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slideOut {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
} @media (max-width: 1200px) {
.contact-content {
gap: 80px;
}
.contact-title {
font-size: 60px;
}
}
@media (max-width: 1024px) {
.contact-content {
grid-template-columns: 1fr;
gap: 60px;
}
.contact-title {
font-size: 56px;
}
.contact-info {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
padding-top: 0;
}
}
@media (max-width: 768px) {
.contact-main {
padding: 50px 0;
}
.hidden {
display: block;
padding-bottom: 80px;
}
.mobile_bigger {
color: #575644;
font-size: 30px !important;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-bottom: 17px;
}
.contact-title {
font-size: 40px;
margin-bottom: 30px;
letter-spacing: unset;
}
.contact-subtitle {
margin-bottom: 40px;
}
.contact-subtitle p {
font-size: 19px;
}
.form-row {
grid-template-columns: 1fr;
gap: 20px;
}
.contact-info {
grid-template-columns: 1fr;
}
.info-block {
margin-bottom: 30px;
} .contact-header .burger-menu span {
background: #080807;
} .contact-header {
border-bottom: none;
}
}
@media (max-width: 480px) {
.form-group label {
font-size: 15px;
}
.form-group input,
.form-group textarea,
.form-group input::placeholder,
.form-group textarea::placeholder {
font-size: 30px;
}
.submit-btn {
padding: 10px 23px;
font-size: 15px;
}
.info-block h3 {
font-size: 28px;
}
.info-block p {
font-size: 19px;
}
.notification {
right: 10px;
left: 10px;
width: auto;
}
}