body{

margin:0;

font-family:Arial,sans-serif;

background:#111111;

color:white;

}

header{

display:flex;

justify-content:space-between;

align-items:center;

padding:25px 60px;

}




nav a{

color:white;

text-decoration:none;

margin-left:30px;

}

.hero{

height:80vh;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

padding:20px;
background-image:
linear-gradient(
rgba(0,0,0,0.45),
rgba(0,0,0,0.55)
),

url("hero-banner.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

}

.hero h1{

font-size:55px;

max-width:900px;

}

.hero p{

font-size:22px;

margin:20px 0;

}

button{

background:#C8A24A;

border:none;

padding:15px 35px;

border-radius:8px;

font-size:18px;

cursor:pointer;

}
.about{

padding:100px 15%;

text-align:center;

background:#181818;

}

.about h2{

font-size:45px;

color:#C8A24A;

margin-bottom:30px;

}

.about p{

font-size:22px;

line-height:1.8;

max-width:900px;

margin:auto;

}
.services{

padding:100px 10%;

text-align:center;

}

.services h2{

font-size:45px;

color:#C8A24A;

margin-bottom:50px;

}

.services-grid{

display:flex;

gap:30px;

justify-content:center;

flex-wrap:wrap;

}

.service-card{

background:#181818;

padding:40px;

width:300px;

border-radius:15px;

}

.service-card h3{

font-size:28px;

}

.service-card p{

font-size:18px;

line-height:1.6;

}
.solutions{

padding:100px 10%;

text-align:center;

background:#181818;

}

.solutions h2{

font-size:45px;

color:#C8A24A;

margin-bottom:50px;

}

.solutions-grid{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.solution-box{

background:#111111;

padding:25px 35px;

border-radius:12px;

font-size:22px;

min-width:280px;

}
.work{

padding:100px 10%;

text-align:center;

}

.work h2{

font-size:45px;

color:#C8A24A;

margin-bottom:50px;

}

.work-grid{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.work-card{

background:#181818;

padding:35px;

width:230px;

border-radius:15px;

}

.number{

font-size:50px;

font-weight:bold;

color:#C8A24A;

}

.work-card h3{

font-size:28px;

margin:15px 0;

}

.work-card p{

font-size:18px;

line-height:1.6;

}
.recognition{

padding:100px 15%;

text-align:center;

background:#181818;

}

.recognition h2{

font-size:45px;

color:#C8A24A;

margin-bottom:30px;

}

.recognition p{

font-size:22px;

line-height:1.8;

max-width:900px;

margin:auto;

}
.contact{

padding:100px 10%;

text-align:center;

}

.contact h2{

font-size:45px;

color:#C8A24A;

margin-bottom:20px;

}

.contact p{

font-size:22px;

margin-bottom:40px;

}

.contact-info{

display:flex;

justify-content:center;

gap:25px;

flex-wrap:wrap;

}

.contact-info div{

background:#181818;

padding:20px 30px;

border-radius:12px;

font-size:20px;

}
.logo{
font-size:36px;
font-weight:700;
letter-spacing:3px;
color:#C8A24A;
font-family:Arial,sans-serif;
}
.work{

padding:100px 10%;

text-align:center;

}

.work h2{

font-size:42px;

margin-bottom:50px;

color:#C8A24A;

}

.work-grid{

    display:grid;

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

    gap: 100px;

    width:700px;

    margin:50px auto;

}


.work-card{

background:#151515;

padding:20px;

border-radius:18px;

}

.work-card img{

width:100%;

height:300px;

object-fit:cover;

border-radius:15px;

}

.work-card h3{

margin-top:20px;

font-size:22px;

}
.banner{

width:100%;

height:500px;

margin:80px 0;

background-image:url("hero-banner.jpeg");

background-size:cover;

background-position:center;

background-repeat:no-repeat;

border-radius:20px;

}