/* =========================
1 RESET
========================= */

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

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
color:inherit;
}

ul{
list-style:none;
}

/* =========================
2 VARIABLES
========================= */

:root{

--color_bg:#0f172a;
--color_text:#ffffff;

--color_primary:#16a34a;
--color_primary_dark:#15803d;

--color_dark_1:#0b1220;
--color_dark_2:#0f172a;

--color_light:#ffffff;
--color_muted:#cbd5e1;

--space_1:4px;
--space_2:8px;
--space_3:16px;
--space_4:24px;
--space_5:32px;
--space_6:48px;
--space_7:64px;

--radius_sm:6px;
--radius_md:12px;

}

/* =========================
3 BASE
========================= */

html{
scroll-behavior:smooth;
}

body{

font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
background:var(--color_bg);
color:var(--color_text);
font-size:16px;
line-height:1.6;

}

h1{
font-size:clamp(34px,6vw,54px);
line-height:1.1;
}

h2{
font-size:clamp(26px,4vw,36px);
text-align:center;

color:#111827;
}

h3{
font-size:20px;
}

p{
color:var(--color_muted);
}

/* =========================
4 LAYOUT
========================= */

.container{

width:100%;
max-width:1200px;

margin-left:auto;
margin-right:auto;

padding-left:var(--space_3);
padding-right:var(--space_3);

}

.section{
padding-top:var(--space_7);
padding-bottom:var(--space_7);
}

/* =========================
5 BUTTONS
========================= */

.btn_primary{

display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 24px;

border-radius:var(--radius_md);

background:var(--color_primary);
color:#fff;

font-weight:600;

}

.btn_primary:hover{
background:var(--color_primary_dark);
}

.btn_secondary{

display:inline-flex;
align-items:center;
justify-content:center;

padding:14px 24px;

border-radius:var(--radius_md);

border:1px solid var(--color_primary);

color:var(--color_primary);

font-weight:600;

}

/* =========================
6 SERVICE HEADER
========================= */

.service_header{

position:fixed;
top:0;
left:0;

width:100%;
z-index:40;

background:rgba(0,0,0,0.55);

}

.service_header_inner{

display:flex;
justify-content:space-between;
align-items:center;

padding:14px 20px;

background:linear-gradient(
90deg,
rgba(0,0,0,1)20%,
rgba(0,0,0,0.6)65%,
rgba(0,0,0,0.25)100%
);

}

.service_logo{
height:54px;
}

.service_menu_toggle{

display:flex;
flex-direction:column;
gap:4px;

background:none;
border:none;

}

.service_menu_toggle span{

width:22px;
height:2px;

background:#ffffff;

}

/* =========================
7 DRAWER MENU
========================= */

.drawer_menu{

	position:fixed;
	
	top:72;
	right:20px;
	
	width:240px;
	/*height:100%;*/
	
	background: #0b1220;
	border-radius: 12px;
	
	padding: 20px;
	display: none;
	
	/*transition:0.25s;*/
	
	box-shadow: 0 20px 40px rgba(0,0,0,0.4);
	
	z-index:50;

}

.drawer_menu.active{
	/*right:0;*/
	display: block;
}

.drawer_menu a{
	
	display:block;
	
	font-size:15px;
	
	/*margin-bottom:18px;*/
	padding: 10px 0;
	
	color:#ffffff;
	border-bottom: 1px solid rgba(255,255,255,0.06);

}

.drawer_menu a:last-child {
	border: none;
}

.drawer_menu a:hover {
	color: var(--color_primary);
}

/* =========================
BREADCRUMBS
========================= */

.breadcrumbs{

	background:linear-gradient(
		180deg,
		rgba(0,0,0,0.95)0%,
		rgba(11,18,32,0.75)60%,
		rgba(11,18,32,0)100%
	);
	
	background: #000000;
	
	margin-top: 80px;
	
	padding: 5px 10px 0px;
	
	font-size:13px;
	
	color:#cbd5e1;

}

.breadcrumbs a{
color:#cbd5e1;
}

.breadcrumbs span{
margin:0 2px;
}

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

/*.service_hero{

position:relative;

background:url('/assets/images/hero-background-dark.jpg') center right/cover no-repeat;

padding-top:80px;
padding-bottom:80px;

}

.service_hero::before{

	content:"";
	
	position:absolute;
	inset:0;
	
	background:linear-gradient(
		90deg,
		rgba(11,18,32,0.95)0%,
		rgba(11,18,32,0.7)40%,
		rgba(11,18,32,0.2)100%
	);

}



.service_hero_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0,0,0,0.95) 0%,
        rgba(0,0,0,0.5) 3%,
        rgba(11,18,32,0.1) 10%
    );
}

.service_hero .container{
	position:relative;
	z-index:2;
}

.service_hero_subtitle{

	font-size:18px;
	
	max-width:520px;
	
	margin-top:20px;
	margin-bottom:30px;

}

.service_hero_cta{

	display:flex;
	flex-wrap:wrap;
	
	gap:12px;

}*/

/* =========================
HERO SECONDARY CTA
========================= */

.btn_link{
	display:inline-flex;
	align-items:center;	
	gap: 6px;
	font-weight:500;
	color:#e2e8f0;
	margin-left: 10px;
}

.btn_link:hover{
	color:#ffffff;
}

/* =========================
10 PROOF
========================= */

.service_proof_section{

	background:var(--color_dark_2);
	
	padding:40px 0;
	
	border-top:1px solid rgba(255,255,255,0.08);
	border-bottom:1px solid rgba(255,255,255,0.08);

}

.service_proof_grid{

	display:grid;
	
	grid-template-columns:repeat(3,1fr);
	
	text-align:center;

}

.service_proof_item{

	font-size:16px;
	
	color:var(--color_muted);

}

/* =========================
SECTION TITLES
========================= */

/*.service_problem h2,
.service_solution h2,
.service_cta_section h2{

text-align:center;

color:#111827;

margin-bottom:30px;

}*/

/* =========================
11 PROBLEM
========================= */

.service_problem{

	background:#ffffff;
	
	color:#111827;
	
	padding:40px 0;

}

.service_problem_list{

display:grid;

gap:20px;

margin-top:40px;

}

.service_problem_card{

background:#0f172a url('/assets/images/hero-background-dark.jpg') center right/cover no-repeat;

color:#ffffff;

padding:26px;

border-radius:var(--radius_md);

}

/* =========================
12 SOLUTION
========================= */

.service_solution{

background:#ffffff;

padding:40px 0;

}

.service_solution_grid{

display:grid;

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

gap:20px;

margin-top:40px;

}

.service_solution_item{

background:#0f172a;

color:#ffffff;

padding:20px;

border-radius:var(--radius_sm);

text-align:center;

}

/* =========================
13 CTA
========================= */

.service_cta_section{

background:var(--color_dark_2);

text-align:center;

padding:70px 0;

}

.service_cta_section h2{

color: #ffffff;

}

.service_cta_buttons{

margin-top:30px;

display:flex;
justify-content:center;

gap:12px;

flex-wrap:wrap;

}

/* =========================
STICKY CTA
========================= */

.mobile_cta{
	display: none;
	position:fixed;
	
	bottom:0;
	left:0;
	right:0;
	
	/*display:flex;*/
	
	z-index:60;

}

.mobile_cta a{

	flex:1;
	
	text-align:center;
	
	padding:16px;
	
	font-weight:600;

}

.mobile_cta .mobile_btn_primary{
	border-radius:0;
}

.mobile_cta .mobile_btn_secondary{

	background:#000;
	
	color:#fff;
	
	border-radius:0;

}



/* =========================
14 SERVICE PROCESS
========================= */

.service_process{
    background:#ffffff;
    padding:70px 0;
}

.service_process h2{
    text-align:center;
    color:#111827;
    margin-bottom:40px;
}

.process_steps{
    display:grid;
    gap:24px;
}

.process_step{
    position:relative;
    background:#0f172a;
    color:#ffffff;
    padding:28px 24px 24px 24px;
    border-radius:12px;
}

.process_number{
    position:absolute;
    top:-12px;
    left:20px;
    background:#16a34a;
    color:#ffffff;
    font-weight:700;
    font-size:14px;
    padding:6px 10px;
    border-radius:6px;
}

.process_step h3{
    margin-bottom:10px;
}

.process_step p{
    color:#cbd5e1;
    font-size:15px;
}

/* =========================
15 SERVICE CASES
========================= */

.service_cases{
    background:#ffffff;
    padding:70px 0;
}

.service_cases h2{
    text-align:center;
    color:#111827;
    margin-bottom:40px;
}

.cases_grid{
    display:grid;
    gap:28px;
}

.case_card{
    background:#ffffff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #e5e7eb;
    transition:0.25s;
}

.case_card:hover{
    transform:translateY(-6px);
    box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.case_image img{
    width:100%;
    height:180px;
    object-fit:cover;
}

.case_content{
    padding:24px;
}

.case_category{
    font-size:12px;
    font-weight:600;
    color:#22c55e;
    margin-bottom:8px;
}

.case_content h3{
    font-size:18px;
    color:#111827;
    margin-bottom:10px;
}

.case_content p{
    font-size:14px;
    color:#6b7280;
    margin-bottom:16px;
}

.case_result{
    font-size:13px;
    font-weight:600;
    color:#111827;
}

/* =========================
16 SERVICE FAQ
========================= */

.service_faq{
    background:#ffffff;
    padding:70px 0;
}

.service_faq h2{
    text-align:center;
    color:#111827;
    margin-bottom:40px;
}

.faq_list{
    display:grid;
    gap:20px;
}

.faq_item{
    background:#0f172a;
    color:#ffffff;
    padding:24px;
    border-radius:12px;
}

.faq_item h3{
    font-size:16px;
    margin-bottom:10px;
}

.faq_item p{
    font-size:15px;
    color:#cbd5e1;
}