body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#10263f;
background:#ffffff;
line-height:1.6;
}


/* =========================
   NAVIGATION
========================= */

nav{

background:#07182d;

color:white;

padding:25px 8%;

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:10;

}


.logo{

font-size:28px;

font-weight:bold;

letter-spacing:1px;

}


.logo span{

color:#d1a03a;

}


.links{

font-size:16px;

}


.links a{

color:white;

text-decoration:none;

transition:0.3s;

}


.links a:hover{

color:#d1a03a;

}



/* =========================
   HERO
========================= */


.hero{

min-height:560px;

background:

linear-gradient(
90deg,
rgba(7,24,45,0.95),
rgba(7,24,45,0.55)
),

url('images/industry.jpg');


background-size:cover;

background-position:center;

color:white;

padding:80px 8%;

box-sizing:border-box;

display:flex;

align-items:center;

}



.heroText{

max-width:900px;

}


.heroText p{

color:#d1a03a;

letter-spacing:3px;

font-size:14px;

font-weight:bold;

}


h1{

font-size:56px;

line-height:1.15;

margin:25px 0;

}



.heroText span{

font-size:20px;

color:#eeeeee;

}



.button{

display:inline-block;

margin-top:35px;

background:#d1a03a;

color:white;

padding:15px 35px;

text-decoration:none;

font-weight:bold;

transition:0.3s;

}


.button:hover{

background:#b88925;

}



/* =========================
   PROFILE
========================= */


.profile{

padding:90px 8%;

display:grid;

grid-template-columns:300px 1fr 1fr;

gap:50px;

align-items:center;

}



.profile img{

width:280px;

border-radius:6px;

box-shadow:0 15px 40px rgba(0,0,0,0.18);

}



.profile h2{

font-size:38px;

margin-bottom:5px;

}


.profile h3{

color:#d1a03a;

margin-top:0;

}



.profile p{

font-size:17px;

}



/* =========================
   BOXES
========================= */


.boxes{

display:flex;

gap:15px;

}


.boxes div{

border:1px solid #d1a03a;

padding:25px;

background:#fafafa;

min-width:120px;

}


.boxes b{

font-size:28px;

color:#07182d;

}



/* =========================
   SECTIONS
========================= */


.services,
.expertise{

background:#07182d;

color:white;

padding:90px 8%;

}


.services h2,
.expertise h2,
.projects h2,
.contact h2{

font-size:38px;

margin-bottom:40px;

}



/* =========================
   CARDS
========================= */


.cards{

display:grid;

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

gap:25px;

}



details{

border:1px solid #d1a03a;

padding:25px;

background:rgba(255,255,255,0.03);

transition:0.3s;

}



details:hover{

background:rgba(255,255,255,0.08);

}



summary{

cursor:pointer;

font-size:20px;

font-weight:bold;

color:#d1a03a;

}



details p{

font-size:16px;

}



details li{

margin-bottom:8px;

}



/* =========================
   PROJECTS
========================= */


.projects{

padding:90px 8%;

}



.projects p{

font-size:18px;

}



/* =========================
   CONTACT
========================= */


.contact{

padding:90px 8%;

background:#f5f5f5;

}



.contact a{

color:#10263f;

}



/* =========================
   FOOTER
========================= */


footer{

background:#07182d;

color:white;

padding:35px 8%;

text-align:center;

}



/* =========================
   MOBILE
========================= */


@media(max-width:900px){


nav{

flex-direction:column;

gap:20px;

}


h1{

font-size:38px;

}


.profile{

grid-template-columns:1fr;

}


.boxes{

flex-direction:column;

}


.cards{

grid-template-columns:1fr;

}


}