@font-face {
font-family:'dilemma-sans';
src:url('../fonts/dilemma-sans-bold.otf') format('opentype');
font-style:normal;
}

@font-face {
font-family:'Courier Prime';
src:url('../fonts/Courier Prime.ttf') format('truetype');
font-style:normal;
}

/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'dilemma-sans';
width:100%;
}

/* HEADER */

header{
height:13vh;
display:flex;
align-items:center;
justify-content:center;
padding:1rem;
background:#212c1c;
}

.site-logo{
width:8vw;
}

/* HERO SECTION */

.main-hero{
position:relative;
height:90vh;
width:100%;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:#f4f1df;
}

/* Desktop Image */

.hero-desktop-bg{
background-size:cover;
background-position:center;
width:100%;
height:100%;
}

/* Mobile Image */

.hero-mobile-bg{
display:none;
background-size:cover;
background-position:center;
width:100%;
height:100%;
}

/* Center Content */

.hero-text{
position:absolute;
z-index:2;
text-align:center;
color:#fff;
padding:2rem;
width:90%;
}

.hero-text h1{
font-size:clamp(2rem,4vw,3rem);
margin-bottom:1rem;
color:#000;
}

.hero-text p{
font-size:1.4rem;
margin-bottom:1.5rem;
color:#000;
font-family:'Courier Prime';
}

.hero-text button{
padding:0.9em 1.7em;
font-size:1.3rem;
border:1px solid black;
border-radius:0em;
background:#f4f1df;
color:#000;
cursor:pointer;
font-weight:bold;
}

/* FEATURES SECTION */

.info-section{
width:100%;
padding:8vh 5vw;
background:#f9fafb;
}

.info-container{
display:flex;
justify-content:center;
gap:3vw;
max-width:90vw;
margin:0 auto;
}

.info-card{
background:#ffffff;
border-radius:1.5rem;
padding:3rem 2rem;
text-align:center;
width:30%;
box-shadow:0 1.5rem 3rem rgba(0,0,0,0.06);
transition:transform 0.3s ease;
}

.info-card:hover{
transform:translateY(-0.5rem);
}

.icon-wrapper{
width:5rem;
height:5rem;
margin:0 auto 2rem;
border-radius:1.2rem;
background:#f3f4f6;
display:flex;
align-items:center;
justify-content:center;
}

.icon-wrapper img{
width:2.2rem;
height:2.2rem;
}

.info-card h3{
font-size:1.4rem;
margin-bottom:1rem;
color:#111827;
}

.info-card p{
font-size:1rem;
line-height:1.6em;
color:#6b7280;
}

/* FOOTER */

footer{
height:7vh;
display:flex;
align-items:center;
justify-content:center;
font-size:0.9rem;
background:#000;
}

footer a{
color:#fff;
text-decoration:none;
}

/* RESPONSIVE */

@media (max-width:768px){

.main-hero{
height:85vh;
}

.hero-desktop-bg{
display:none;
}

.hero-text{
padding:0.8rem;
width:100%;
}

.hero-mobile-bg{
display:block;
}

.site-logo{
width:31vw;
}

.hero-text h1{
font-size:clamp(2.3rem,4vw,3rem);
}

.hero-text p{
font-size:1.5rem;
margin-bottom:1.3rem;
}

.hero-text button{
padding:0.9em 1.5em;
font-size:1.3rem;
}

.info-container{
flex-direction:column;
gap:4vh;
}

.info-card{
width:100%;
}

}