/* RESET */

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

body{
font-family:Arial, sans-serif;
background:#111;
color:#fff;
}


/* HEADER */

.header{
background:#000;
padding:15px 0;
}

.nav{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
padding:0 20px;
}

.nav a{
color:#fff;
text-decoration:none;
font-size:14px;
transition:0.2s;
}

.nav a:hover{
color:#ff6a00;
}



/* HERO */

.hero{
position:relative;
width:100%;
}

.hero-img{
width:100%;
height:20vh;
object-fit:cover;
object-position:center 70%;
display:block;
}

.hero-content{
position:absolute;
top:20%;
left:50%;
transform:translateX(-50%);
text-align:center;
width:90%;
}

.hero-content h1{
font-size:clamp(32px,6vw,60px);
margin-bottom:10px;
}

.hero-content p{
font-size:16px;
opacity:0.9;
}



/* CONTACT INFO */

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

.contact-container h2{
margin-bottom:40px;
font-size:28px;
}

.contact-grid{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
}

.contact-card{
background:#1b1b1b;
padding:25px;
border-radius:8px;
width:250px;
transition:0.3s;
}

.contact-card:hover{
transform:translateY(-5px);
background:#222;
}

.contact-card h3{
margin-bottom:10px;
color:#ff6a00;
}



/* SOCIAL */

.social-section{
text-align:center;
padding:40px 20px 80px;
}

.social-section h2{
margin-bottom:30px;
}

.social-links{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}

.social-btn{
display:flex;
align-items:center;
gap:10px;
padding:12px 20px;
background:#1b1b1b;
border-radius:8px;
text-decoration:none;
color:#fff;
transition:0.3s;
}

.social-btn:hover{
background:#ff6a00;
color:#000;
}

.social-btn img{
width:24px;
height:24px;
}
.footer{
    text-align:center;
    padding:30px 0;
    background:black;
    margin-top:80px;
    font-size:14px;
    opacity:0.7;
}