/* ================= SECTION ================= */

.contact {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 120px 9%;
}

/* ================= CONTAINER ================= */

.container {
max-width: 1100px;
margin: auto;
text-align: center;
}

/* ================= HEADING ================= */

.section-heading {
font-size: clamp(2.6rem, 5vw, 4rem);
margin-bottom: 18px;

background: linear-gradient(
90deg,
#fff,
#a3c9a8,
#6f8f72,
#fff
);

background-size: 200%;
background-clip: text;
color: transparent;

animation: headingGlow 8s linear infinite;

text-shadow:
0 0 10px rgba(163,201,168,.4),
0 0 40px rgba(47,93,80,.7);
}

@keyframes headingGlow {
0% { background-position: 0%; }
100% { background-position: 200%; }
}

.section-subtext {
color: #bbb;
margin-bottom: 60px;
}

/* ================= GRID ================= */

.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}

/* ================= INFO ================= */

.contact-info {
display: flex;
flex-direction: column;
gap: 20px;
}

.info-card {
position: relative;
overflow: hidden;

background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;

padding: 25px;

backdrop-filter: blur(10px);

box-shadow: 0 10px 30px rgba(0,0,0,0.5);

transition: 0.3s ease;
}

/* LIGHT SWEEP */

.info-card::before {
content: "";
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;

background: linear-gradient(
120deg,
transparent,
rgba(111,143,114,0.2),
transparent
);

transition: 0.6s;
}

.info-card:hover::before {
left: 100%;
}

/* HOVER */

.info-card:hover {
transform: translateY(-8px) scale(1.03);

background: rgba(111,143,114,0.15);

box-shadow:
0 0 25px rgba(111,143,114,.5),
0 20px 60px rgba(0,0,0,0.9);
}

/* ICON */

.info-card i {
font-size: 30px;
color: #6f8f72;
margin-bottom: 10px;
}

/* TEXT */

.info-card h3 {
font-size: 1.6rem;
}

.info-card p {
color: #bbb;
}

/* ================= FORM ================= */

.contact-form {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;

padding: 30px;

display: flex;
flex-direction: column;
gap: 15px;

backdrop-filter: blur(10px);

box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* INPUTS */

.contact-form input,
.contact-form textarea {
padding: 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,.1);

background: rgba(0,0,0,.4);
color: white;
font-size: 1rem;

transition: 0.3s;
}

.contact-form input:focus,
.contact-form textarea:focus {
outline: none;
border-color: #6f8f72;
box-shadow: 0 0 10px rgba(111,143,114,.4);
}

/* BUTTON */

.btn {
padding: 12px;
border-radius: 30px;
border: 2px solid #6f8f72;

color: #6f8f72;
background: transparent;

cursor: pointer;
transition: 0.3s;
}

.btn:hover {
background: #6f8f72;
color: #0f1a17;

box-shadow:
0 0 20px #6f8f72,
0 0 40px rgba(111,143,114,.6);
}

/* ================= RESPONSIVE ================= */

@media (max-width: 768px) {

.contact-grid {
grid-template-columns: 1fr;
}

.section-heading {
font-size: 3rem;
}

}