:root{

--accent:#2e6b46;
--bg:#ebebeb;

--card:#ffffff;

--shadow:rgba(0,0,0,0.08);
--hoverShadow:rgba(0,0,0,0.25);

--text:#2b2b2b;
--hoverText:#ffffff;

}


/* PAGE BASE */

html,body{
height:100%;
overflow-x:hidden;
overflow-y:auto;
}

body{
background:var(--bg);
font-family:Arial, Helvetica, sans-serif;
color:var(--text);
}



/* MAIN CONTACT SECTION */

.contact{

max-width:1100px;

min-height:calc(100vh - 140px);

margin:40px auto 0;

padding:20px 80px;

text-align:center;

position:relative;

display:flex;
flex-direction:column;
justify-content:center;

}



/* INTRO */

.contact-intro{
margin-bottom:40px;
}

.contact-intro h1{
font-size:25px;
margin-bottom:15px;
}

.contact-intro p{
color:#555;
font-size:15px;
line-height:1.6;
}



/* GRID */

.contact-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:15px;

margin-bottom:30px;

}



/* CARD */

.contact-card{

background:var(--card);

padding:15px;

border-radius:12px;

text-decoration:none;

color:var(--text);

transition:.35s;

box-shadow:0 10px 10px var(--shadow);

cursor:pointer;

user-select:none;

}

.contact-card *{
cursor:pointer;
user-select:none;
}



/* ICON */

.contact-icon{
width:40px;
margin-bottom:15px;
}



/* CARD TEXT */

.contact-card h3{
font-size:18px;
font-weight:600;
}

.contact-card p{
font-size:15px;
line-height:1.6;
}

.contact-card span{
font-size:14px;
color:#666;
}



/* HOVER EFFECT */

.contact-card:hover{

transform:scale(1.06);

background:var(--accent);

color:var(--hoverText);

z-index:10;

position:relative;

box-shadow:0 35px 80px var(--hoverShadow);

}



/* LOCATION */

.location{
margin-top:10px;
}

.location h2{
font-size:24px;
margin-bottom:8px;
}

.location p{
color:#555;
font-size:17px;
}



/* SCREEN DIM EFFECT */

.contact::before{

content:"";

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,0.25);

opacity:0;

pointer-events:none;

transition:opacity .35s ease;

z-index:5;

}



/* ACTIVATE DIM */

.contact:has(.contact-card:hover)::before{
opacity:.7;
}



















































/* MOBILE */

@media(max-width:800px){

.contact{
padding:20px 40px;
margin-bottom:80px;
}

.contact-intro{
margin-top:290px;
margin-bottom:40px;
}

hr{
border:none;
border-top:1px solid #c7c7c7;
margin:75px 0;
}
.contact-grid{
grid-template-columns:1fr;
}
/* Move footer up only on contact page */

footer{
margin-top:-25px;
}
/* Move footer up only on contact page */

body:has(.contact) footer{
margin-top:-40px;
}
}