/* RESET */

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

html,body{
width:100%;
height:100%;
overflow-x:hidden;
}

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


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

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

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

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


/* NAVBAR */

.navbar{
width:100%;
background:#000;
position:sticky;
top:0;
z-index:9999;
}

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

.brand{
margin-right:auto;
}

.brand img{
height:70px;
}

.nav-item{
color:#fff;
font-weight:600;
}

.nav-item a{
color:inherit;
text-decoration:none;
}

.nav-item.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;
padding:8px 0;
min-width:260px;
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;
}

.dropdown-menu li a{
display:block;
padding:12px 20px;
font-size:13px;
color:#fff;
}

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

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

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


/* MAIN */

.container{
flex:1;
width:100%;
max-width:1200px;
margin:auto;
padding-bottom:60px;
}


/* HERO */

.service-hero{
margin:60px 0 30px;
padding:0 20px;
}

.service-hero h1{
font-family:"DM Serif Display",serif;
font-size:44px;
line-height:1.15;
letter-spacing:.3px;
margin-bottom:10px;
color:#111;
}

.service-hero h2{
font-size:24px;
font-weight:500;
color:#555;
margin-bottom:18px;
}


/* CONTENT */

.service-content{
padding:0 20px;
}

.service-content p{
font-size:17px;
line-height:1.9;
color:#444;
margin-bottom:18px;
}


/* IMPORTANT HEADING */

.section-heading{
font-family:"DM Serif Display",serif;
font-size:30px;
line-height:1.2;
letter-spacing:.25px;
margin-top:32px;
margin-bottom:16px;
color:#111;
}


/* KPI GRID */

.kpi-grid{
margin:35px 0 45px;
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:nowrap;
}


/* KPI ITEM */

.kpi-item{
text-align:center;
width:140px;
position:relative;
cursor:pointer;
}

.kpi-item img{
width:130px;
height:130px;
object-fit:cover;
border-radius:20%;
box-shadow:0 10px 25px rgba(0,0,0,.18);
transition:transform .3s ease;
}

.kpi-item:hover img{
transform:scale(1.06);
}

.kpi-item span{
display:block;
margin-top:10px;
font-size:14px;
font-weight:500;
color:#111;
}


/* TOOLTIP */

.kpi-item::after{

content:attr(data-tooltip);

position:absolute;

bottom:140%;
left:50%;

transform:translateX(-50%);

background:#111;

color:#fff;

padding:8px 12px;

border-radius:6px;

font-size:12px;

white-space:nowrap;

opacity:0;

pointer-events:none;

transition:opacity .3s ease,transform .3s ease;

}

.kpi-item:hover::after{
opacity:1;
transform:translateX(-50%) translateY(-4px);
}


/* FOOTER */

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



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

/* Large laptops */
@media (max-width: 1200px){

.container,
.service-content,
.service-hero,
.about-wrapper{
max-width: 95%;
}

}


/* Tablets */
@media (max-width: 900px){

.nav-list{
gap:20px;
padding:16px 20px;
}

.brand img{
height:55px;
}

.service-hero h1{
font-size:34px;
}

.service-hero h2{
font-size:18px;
}

.fm-grid{
grid-template-columns:1fr;
}

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

.about-wrapper{
flex-direction:column;
align-items:center;
text-align:center;
}

.about-photo{
margin-top:20px;
}

}


/* Mobile phones */
@media (max-width: 600px){

.nav-list{
flex-wrap:wrap;
gap:12px;
padding:14px 16px;
}

.brand img{
height:50px;
}

.service-hero{
margin:35px auto 20px;
}

.service-hero h1{
font-size:28px;
}

.service-hero h2{
font-size:16px;
}

.service-content p{
font-size:15px;
}

.container{
padding:0 15px;
}

.fm-card{
padding:20px;
}

.goal-list{
flex-direction:column;
}

.goal-item{
width:100%;
text-align:center;
}

.kpi-grid{
flex-wrap:wrap;
justify-content:center;
gap:15px;
}

.expertise-block{
gap:25px;
}

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

}


/* Small phones */
@media (max-width: 420px){

.service-hero h1{
font-size:24px;
}

.service-hero h2{
font-size:15px;
}

.brand img{
height:45px;
}

.nav-list{
padding:12px;
}

}

/* =========================
MOBILE TEXT ALIGNMENT FIX
(only for service pages)
========================= */

@media (max-width:768px){

/* Fix container alignment */
.container{
padding-left:20px !important;
padding-right:20px !important;
}

/* Fix hero section alignment */
.service-hero{
padding-left:20px !important;
padding-right:20px !important;
}

/* Ensure heading aligns properly */
.service-hero h1{
margin-left:0 !important;
padding-left:0 !important;
text-align:left !important;
}

/* Fix tagline alignment */
.service-hero h2{
margin-left:0 !important;
padding-left:0 !important;
text-align:left !important;
}

/* Fix paragraph alignment */
.service-content{
padding-left:20px !important;
padding-right:20px !important;
}

}
/* =========================
MOBILE HEADING ALIGN FIX (FINAL)
========================= */

@media (max-width:768px){

/* FORCE LEFT ALIGN FOR HERO */
.service-hero{
text-align:left !important;
}

/* Heading */
.service-hero h1{
text-align:left !important;
margin-left:0 !important;
}

/* Tagline */
.service-hero h2{
text-align:left !important;
margin-left:0 !important;
}

/* Ensure content lines up perfectly */
.service-content{
padding-left:20px !important;
padding-right:20px !important;
}

}

@media (max-width: 480px) {

.service-hero h1,
.service-hero h2,
.service-content {
  text-align: left;
}

}