/* =======================
GLOBAL RESET
======================= */

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

html,body{
overflow-x:hidden;
}

body{
display:flex;
flex-direction:column;
font-family:"Inter",sans-serif;
background:#ffffff;
}


/* =======================
TYPOGRAPHY
======================= */

h1{
font-family:"DM Serif Display",serif;
font-weight:400;
letter-spacing:.3px;
line-height:1.15;
margin-bottom:20px;
}

h2{
font-family:"DM Serif Display",serif;
font-weight:400;
letter-spacing:.25px;
line-height:1.2;
margin-bottom:14px;
}

h3{
font-family:"DM Serif Display",serif;
font-weight:400;
letter-spacing:.2px;
line-height:1.25;
margin-bottom:10px;
}


/* =======================
NAVBAR
======================= */

nav{
background:#000;
position:sticky;
top:0;
z-index:9999;
}

nav ul{
display:flex;
align-items:center;
gap:30px;
list-style:none;
padding:18px 40px;
}

.brand{
margin-right:auto;
}

.brand img{
height:70px;
}

/* NAV ITEMS */

.nav-item{
font-size:15px;
font-weight:600;
color:#fff;
position:relative;
}

.nav-item a{
color:inherit;
text-decoration:none;
display:flex;
align-items:center;
}

.nav-item a:hover{
color:#e5e7eb;
}

.active{
border-bottom:2px solid #fff;
}


/* =======================
DROPDOWN
======================= */

.dropdown{
position:relative;
}

.arrow{
margin-left:6px;
font-size:12px;
transition:transform .3s ease;
}

.dropdown-menu{

position:absolute;
top:100%;
left:0;

background:#000;

list-style:none;

min-width:260px;

padding:8px 0;

border-radius:6px;

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

opacity:0;
visibility:hidden;

transform:translateY(10px);

transition:all .25s ease;

z-index:999;

display:block;
}

.dropdown-menu li{
display:block;
width:100%;
}

.dropdown-menu li a{

display:block;

padding:12px 20px;

font-size:13px;

color:#fff;

white-space:nowrap;
}

.dropdown-menu li a:hover{
background:rgba(255,255,255,.12);
}

.dropdown:hover .dropdown-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.dropdown:hover .arrow{
transform:rotate(180deg);
}


/* =======================
PAGE CONTAINER
======================= */

.container{
max-width:1100px;
margin:auto;
padding-bottom:60px;
}


/* =======================
PAGE HEADING
======================= */

.services-heading{
text-align:center;
padding:50px 20px 20px;
}

.services-heading h1{
font-family:"DM Serif Display",serif;
font-size:44px;
color:#111111;
line-height:1.15;
letter-spacing:.3px;
margin-bottom:12px;
}


/* =======================
EXPERTISE BLOCKS
======================= */

.expertise-block{

display:grid;
grid-template-columns:1fr 1fr;
gap:40px;

align-items:center;

margin:50px 0;

padding:0 20px;

}

.expertise-block a{
text-decoration:none;
color:inherit;
}


/* =======================
TEXT
======================= */

.exp-text h2{
font-family:"DM Serif Display",serif;
font-size:28px;
color:#111111;
margin-bottom:14px;
letter-spacing:.2px;
}

.exp-text p{
font-size:16px;
color:#444;
line-height:1.85;
}


/* =======================
IMAGE SIZE FIX
======================= */

.exp-image{
width:100%;
height:340px;
overflow:hidden;
border-radius:12px;
}

.exp-image img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
border-radius:12px;
box-shadow:0 18px 40px rgba(0,0,0,.12);
}


/* =======================
FADE ANIMATION
======================= */

.fade{
opacity:0;
transform:translateY(20px);
animation:fadeIn .9s ease forwards;
}

@keyframes fadeIn{
to{
opacity:1;
transform:translateY(0);
}
}


/* =======================
MOBILE FIX (IMPORTANT)
======================= */

@media(max-width:820px){

.expertise-block{
grid-template-columns:1fr;

/* FORCE TEXT ABOVE IMAGE */
display:flex;
flex-direction:column;
}

.exp-text{
order:1;
}

.exp-image{
order:2;
}

.exp-image{
height:280px;
}

}


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

.site-footer{
background:#000;
color:#fff;
text-align:center;
padding:35px 20px;
}

.site-footer p{
font-size:14px;
opacity:.9;
}


/* =========================
RESPONSIVE DESIGN
========================= */

@media (max-width: 900px){

.services-heading h1{
font-size:34px;
}

.exp-text h2{
font-size:24px;
}

}

@media (max-width: 600px){

.services-heading h1{
font-size:28px;
}

.exp-text h2{
font-size:22px;
}

.exp-text p{
font-size:15px;
}

}

@media (max-width: 420px){

.services-heading h1{
font-size:24px;
}

.exp-text h2{
font-size:20px;
}

.brand img{
height:45px;
}

.nav-list{
padding:12px;
}

}