:root{

--green:#07583f;
--navy:#08263d;
--gold:#d4a72c;

}


*{

margin:0;
padding:0;
box-sizing:border-box;

}


body{

font-family:
"Inter",
Arial,
sans-serif;

color:#333;

}


.site-header{

position:absolute;
top:0;
left:0;
width:100%;
padding:25px 7%;
display:flex;
justify-content:space-between;
align-items:center;
z-index:10;

background:rgba(0,0,0,.25);

}


.logo{

font-size:24px;
font-weight:800;
color:white;

}


.logo span{

display:block;
font-size:11px;
letter-spacing:3px;
color:#e5c35b;

}


nav ul{

display:flex;
gap:25px;
list-style:none;

}


nav a{

color:white;
text-decoration:none;
font-weight:600;

}


.support{

background:#d4a72c;
padding:14px 25px;
border-radius:5px;

}



/* HERO */


.hero{

height:100vh;
min-height:650px;

background:

linear-gradient(
90deg,
rgba(0,30,25,.9),
rgba(0,30,25,.4)
),

url("../images/hero.jpg");


background-size:cover;
background-position:center;


display:flex;
align-items:center;

padding:0 8%;

}



.hero-content{

max-width:800px;
color:white;

}


.hero h1{

font-size:65px;
line-height:1.1;
margin-bottom:25px;

}


.hero p{

font-size:20px;
line-height:1.7;
margin-bottom:35px;

}



.hero a{

display:inline-block;
padding:16px 35px;
margin-right:15px;
background:var(--gold);
color:black;
text-decoration:none;
font-weight:bold;
border-radius:5px;

}



/* SECTIONS */


.about,
.skills{

padding:100px 8%;

}



.about h2,
.skills h2{

font-size:42px;
color:var(--navy);
margin-bottom:25px;

}



.skills{

background:#f7f8f5;

}



.cards{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;

}


.cards div{

background:white;
padding:35px;
border-radius:15px;
box-shadow:0 10px 30px rgba(0,0,0,.08);

}


.cards h3{

color:var(--green);
margin-bottom:15px;

}



footer{

background:var(--navy);
color:white;
padding:50px;
text-align:center;

}




@media(max-width:900px){


.hero h1{

font-size:40px;

}


.cards{

grid-template-columns:1fr;

}


nav{

display:none;

}


}