*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#0d1117;
color:white;
}

nav{

position:fixed;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:18px 70px;

z-index:1000;

transition:.3s;

}

.scrolled{

background:rgba(0,0,0,.92);

backdrop-filter:blur(8px);

}

.logo img{

height:65px;

width:auto;

}

.logo a{
display:block;
line-height:0;
}


nav ul{

display:flex;

gap:35px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:500;

}


.hero{

height:100vh;

background:
linear-gradient(rgba(0,0,0,.60), rgba(0,0,0,.60)),
url("assets/hero-security-dark.jpg");

background-size:cover;

background-position:center;

display:flex;

align-items:center;

padding:0 10%;
position:relative;
}

.hero::after{
	content:"";
	position:absolute;
	inset:0;
	/* slightly brighter overlay to lift the hero image a bit */
	background:linear-gradient(180deg, rgba(6,8,10,0.08), rgba(6,8,10,0.55));
	pointer-events:none;
}

.hero-content{
max-width:750px;
animation:fadeUp 1s ease;
position:relative;
z-index:1;
}

.hero h1{ text-shadow:0 8px 24px rgba(2,6,12,0.6); }

.hero p{ text-shadow:0 4px 12px rgba(2,6,12,0.45); }

.tag{

background:#b10d18;

padding:8px 16px;

border-radius:20px;

display:inline-block;

margin-bottom:25px;
}

.hero h1{

font-size:64px;

line-height:1.1;

margin-bottom:25px;
}

.hero p{

font-size:20px;

opacity:.9;

margin-bottom:35px;
}

.hero-buttons{

display:flex;

gap:20px;
}

.btn-red{

padding:15px 28px;

background:#b10d18;

border-radius:8px;

color:white;

text-decoration:none;
}

.btn-outline{

padding:15px 28px;

border:1px solid white;

border-radius:8px;

text-decoration:none;

color:white;
}

section{

padding:120px 10%;
border-bottom:1px solid rgba(255,255,255,0.02);
}

.container{

max-width:1200px;

margin:auto;
}

.split{

display:grid;

grid-template-columns:2fr 1fr;

gap:50px;
}

/* Home page #about section */
#about h2{
	font-size:28px;
	margin-bottom:18px;
}

/* General section heading style to look less "AI-generated" */
section h2{
	font-size:34px;
	letter-spacing:0.1px;
	margin-bottom:18px;
	color: #ffffff;
}

.section-intro{
	color:rgba(255,255,255,0.88);
	margin-bottom:18px;
	max-width:70ch;
}

#about h3{
	font-size:18px;
	margin-top:18px;
	margin-bottom:10px;
	color:#e6eef8;
}

#about p{
	color:rgba(255,255,255,0.92);
	line-height:1.7;
	margin-bottom:12px;
}

.container.split{
	align-items:start;
	gap:40px;
}

.about-card{
	position:relative;
	background:linear-gradient(180deg, #0f1620, #131922);
	padding:28px;
	border-radius:12px;
	box-shadow:0 6px 18px rgba(2,6,12,0.45);
	border:1px solid rgba(255,255,255,0.03);
}

.about-card ul{
	margin-top:18px;
	padding-left:20px;
}

.about-card li{
	margin-bottom:10px;
	color:rgba(255,255,255,0.9);
}

/* Accent vertical bar on large screens */
.about-card::before{
	content:"";
	display:block;
	width:6px;
	height:100%;
	background:#b10d18;
	border-radius:6px;
	position:absolute;
	left:-18px;
	/* lift the red accent slightly upward */
	top:-8px;
	height:calc(100% + 12px);
}

/* Wrap the split so the ::before positions correctly */
.container.split{ position:relative; }

/* Responsive: stack columns on small screens */
@media (max-width:900px){
	.split{ display:block; }
	.about-card::before{ display:none; }
	.hero h1{ font-size:44px; }
	.page-hero h1{ font-size:36px; }
	.page-hero{ padding-top:110px; padding-bottom:48px; }
	.about-page{ padding:56px 6%; }
	section{ padding:80px 6%; }
	.service{ padding-left:28px; }
	.service::before{ left:12px; }
	.footer-grid{ grid-template-columns:1fr; }
	.site-footer{ padding:36px 6% 28px; }
}

.grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));

gap:25px;

margin-top:50px;
}

.service{

background:#171d25;

padding:35px;

border-radius:18px;

transition:.3s;
}

.service{ position:relative; padding-left:38px; }

.service::before{
	content:"";
	position:absolute;
	left:16px;
	top:16px;
	width:4px;
	height:calc(100% - 32px);
	background:#b10d18;
	border-radius:4px;
	opacity:0.95;
	transform:translateX(-8px);
	transition:transform .22s ease;
}

.service:hover::before{ transform:translateX(0); }

.service h3{ font-size:20px; margin-bottom:10px; color:#fff; font-weight:700; }

.service p{ color:rgba(255,255,255,0.88); line-height:1.6; margin:0; }

#contact p{
margin-bottom:30px;
}

.center{
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
}

/* Site footer — full-width band (not a centered box) */
.site-footer{
	width:100%;
	max-width:none;
	margin:0;
	box-sizing:border-box;
	background:linear-gradient(180deg,#050608,#0c1014);
	color:rgba(255,255,255,0.9);
	padding:56px 10% 32px;
}

.site-footer .container{
	max-width:1200px;
	width:100%;
	margin:0 auto;
	padding:0;
}

.footer-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:28px;
	align-items:start;
	justify-items:stretch;
}

.site-footer h4{ margin-bottom:12px; color:#e6eef8; font-size:16px; }

.site-footer ul{ list-style:none; padding:0; margin:0; }

.site-footer a{ color:rgba(255,255,255,0.86); text-decoration:none; }
.site-footer a:hover{ color:#b10d18; }

.site-footer li{ margin-bottom:8px; }

.footer-contact p{ line-height:1.6; }

.footer-bottom{
	text-align:center;
	margin-top:22px;
	padding-top:18px;
	border-top:1px solid rgba(255,255,255,0.03);
	max-width:1200px;
	margin-left:auto;
	margin-right:auto;
}


@keyframes fadeUp{

from{

opacity:0;
transform:translateY(40px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* Contact tweaks */
#contact p{ color:rgba(255,255,255,0.95); }

/* Contact form + map layout */
.contact-grid{
	display:grid;
	/* expand form column a bit while keeping side spacing (not full width) */
	grid-template-columns:1.6fr 1fr;
	gap:22px;
	align-items:stretch;
	margin-top:22px;
}

.contact-form{ background:#0f1620; padding:22px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); }
.contact-form label{ display:block; margin-bottom:14px; }
.contact-form label span{ display:block; font-size:13px; color:rgba(255,255,255,0.8); margin-bottom:6px; }
.contact-form input,.contact-form textarea{ width:100%; padding:12px 14px; border-radius:8px; border:1px solid rgba(255,255,255,0.06); background:transparent; color:rgba(255,255,255,0.95); }
.contact-form input::placeholder,.contact-form textarea::placeholder{ color:rgba(255,255,255,0.45); }
.form-actions{ display:flex; gap:12px; margin-top:8px; }

.contact-map{ min-height:320px; border-radius:12px; overflow:hidden; box-shadow:0 6px 20px rgba(2,6,12,0.6); border:1px solid rgba(255,255,255,0.03); }

@media(max-width:900px){
	.contact-grid{ grid-template-columns:1fr; }
	.contact-map{ min-height:220px; }
}

.service:hover{ transform:translateY(-6px); background:#1c2630; }

.services-spotlights{ display:flex; flex-direction:column; gap:16px; margin-top:12px; }
.spotlight{ display:flex; gap:20px; align-items:stretch; background:transparent; }
.spotlight .image{ flex:1 1 55%; min-height:420px; overflow:hidden; border-radius:12px; }
.spotlight .image img{ width:100%; height:100%; object-fit:cover; display:block; }
.spotlight .content{ flex:1 1 45%; display:flex; flex-direction:column; justify-content:center; padding:20px 16px; }
.spotlight h3{ font-size:26px; margin-bottom:12px; color:#fff; }
.spotlight p{ color:rgba(255,255,255,0.92); line-height:1.7; margin:0; }


@media(min-width:1200px){
	.spotlight:nth-child(even){ flex-direction:row-reverse; }
}

@media(max-width:1199px){
	.spotlight{ flex-direction:column; }
	.spotlight .image{ min-height:260px; }
	.services-spotlights{ gap:12px; }
	.spotlight{ gap:12px; }
	.spotlight .content{ padding:14px 0; }
}

/* Inner pages (About) */
.page-hero{
	min-height:48vh;
	height:auto;
	padding-top:130px;
	padding-bottom:60px;
}

.page-hero h1{
	font-size:48px;
	line-height:1.15;
	margin-bottom:18px;
}

.page-hero p{
	font-size:18px;
	max-width:65ch;
}

.about-page{
	padding:72px 10%;
}

.about-page h3{
	font-size:18px;
	margin-top:18px;
	margin-bottom:10px;
	color:#e6eef8;
}

.about-page p,
.about-page li{
	color:rgba(255,255,255,0.92);
	line-height:1.7;
}

.about-page p{ margin-bottom:12px; }

.about-page ul{
	margin:12px 0 16px 20px;
}

.about-page .grid{
	margin-top:28px;
}

.about-card h3:not(:first-child){
	margin-top:22px;
}

.about-note{
	margin-top:24px;
	margin-bottom:0;
}

.about-image{
	border-radius:12px;
	overflow:hidden;
	margin-top:20px;
	box-shadow:0 8px 24px rgba(2,6,12,0.5);
}

.about-image img{
	width:100%;
	height:280px;
	object-fit:cover;
	display:block;
}

.about-values{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	gap:16px;
	margin-top:24px;
}

.value-card{
	background:#171d25;
	border:1px solid rgba(255,255,255,0.04);
	border-radius:12px;
	padding:20px;
}

.value-card h4{
	color:#fff;
	margin-bottom:8px;
	font-size:16px;
}

.value-card p{
	margin:0;
	font-size:14px;
	color:rgba(255,255,255,0.88);
}

.hero-buttons--center{
	justify-content:center;
}

nav a.active{
	color:#b10d18;
}

.contact-details{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:20px;
	margin-bottom:28px;
}

.contact-details .about-card p{
	margin-bottom:8px;
}

.contact-details .about-card p a{
	color:rgba(255,255,255,0.92);
	text-decoration:none;
}

.contact-details .about-card p a:hover{
	color:#b10d18;
}

.legal-content h2{
	font-size:20px;
	margin-top:28px;
	margin-bottom:10px;
	color:#e6eef8;
}

.legal-content h2:first-of-type{
	margin-top:8px;
}

.legal-content p,
.legal-content li{
	color:rgba(255,255,255,0.9);
	line-height:1.7;
	margin-bottom:12px;
}

.legal-content a{
	color:rgba(255,255,255,0.92);
}

.legal-content a:hover{
	color:#b10d18;
}

.sitemap-list{
	list-style:none;
	padding:0;
	margin:0 0 20px;
}

.sitemap-list li{
	margin-bottom:10px;
}

.sitemap-list a{
	text-decoration:none;
	font-weight:500;
}