:root{
	--primary:#0d2c6c;
	--secondary:#ff6a00;
	--dark:#101828;
	--text:#475467;
	--light:#f6f8fb;
	--border:#e5e7eb;
	--white:#ffffff;
}

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

html{
	scroll-behavior:smooth;
}

body{
	font-family:'Segoe UI',Arial,sans-serif;
	line-height:1.7;
	color:var(--text);
	background:#fff;
}

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

.navbar{
	background:rgba(255,255,255,.94);
	backdrop-filter:blur(12px);
	-webkit-backdrop-filter:blur(12px);
	box-shadow:0 4px 25px rgba(15,23,42,.08);
	padding:8px 0;
	z-index:9999;
}

.navbar-brand{
	padding:0;
}

.navbar-brand img{
	height:68px;
	width:auto;
	object-fit:contain;
	display:block;
}

.navbar-toggler{
	border:1px solid #d9dee7;
	padding:7px 10px;
	box-shadow:none !important;
}

.navbar-toggler-icon{
	background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280,0,0,.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-nav{
	align-items:center;
	gap:8px;
}

.nav-link{
	color:var(--dark) !important;
	font-size:16px !important;
	font-weight:600;
	padding:12px 14px !important;
	position:relative;
	transition:.3s ease;
}

.nav-link::after{
	content:"";
	position:absolute;
	left:14px;
	right:14px;
	bottom:4px;
	height:2px;
	background:var(--secondary);
	transform:scaleX(0);
	transform-origin:center;
	transition:.3s ease;
}

.nav-link:hover{
	color:var(--secondary) !important;
}

.nav-link:hover::after{
	transform:scaleX(1);
}

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

.hero{
	position:relative;
	min-height:720px;
	display:flex;
	align-items:center;
	background:
	linear-gradient(
		90deg,
		rgba(7,22,53,.92) 0%,
		rgba(13,44,108,.82) 48%,
		rgba(13,44,108,.55) 100%
	),
	url('../img/abc.jpg') center/cover no-repeat;
	color:#fff;
	overflow:hidden;
}

.hero::after{
	content:"";
	position:absolute;
	width:220px;
	height:220px;
	border:1px solid rgba(255,255,255,.12);
	right:7%;
	bottom:-90px;
	border-radius:50%;
}

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

.hero h1{
	max-width:850px;
	margin:0 auto;
	font-size:clamp(34px,5vw,64px);
	line-height:1.12;
	font-weight:800;
	letter-spacing:-1px;
}

.hero p{
	max-width:780px;
	margin-left:auto;
	margin-right:auto;
	font-size:18px;
	color:rgba(255,255,255,.88);
}

.hero p strong{
	color:#fff;
}

.btn-brand{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	background:var(--secondary);
	color:#fff;
	border:2px solid var(--secondary);
	padding:13px 28px;
	border-radius:4px;
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	transition:.3s ease;
}

.btn-brand:hover{
	background:transparent;
	color:#fff;
	border-color:#fff;
	transform:translateY(-2px);
}

.btn-brand-2{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	background:var(--secondary);
	color:#fff;
	border:2px solid var(--secondary);
	padding:13px 28px;
	border-radius:4px;
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	transition:.3s ease;
}

.btn-brand-2:hover{
	background:transparent;
	color:var(--secondary);
	border-color:3px solid var(--secondary);
	transform:translateY(-2px);
}

/* ========================================
   SECTION COMMON
======================================== */

section{
	scroll-margin-top:90px;
}

.py-5{
	padding-top:90px !important;
	padding-bottom:90px !important;
}

.section-title{
	color:var(--primary);
	font-size:38px;
	font-weight:800;
	line-height:1.2;
	margin-bottom:18px;
	position:relative;
}

.section-title::after{
	content:"";
	display:block;
	width:55px;
	height:3px;
	background:var(--secondary);
	margin:14px auto 0;
}

section p{
	color:var(--text);
}

.bg-light{
	background:var(--light) !important;
}

/* ========================================
   ABOUT
======================================== */

#about p{
	max-width:940px;
	margin-left:auto;
	margin-right:auto;
	font-size:17px;
	line-height:1.9;
}

#about strong{
	color:var(--primary);
}

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

#services{
	background:var(--light) !important;
}

.card{
	height:100%;
	border:1px solid var(--border);
	border-radius:8px;
	background:#fff;
	padding:32px 25px !important;
	box-shadow:0 8px 30px rgba(16,24,40,.05);
	transition:.35s ease;
	position:relative;
	overflow:hidden;
}

.card::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:4px;
	height:0;
	background:var(--secondary);
	transition:.35s ease;
}

.card:hover{
	transform:translateY(-8px);
	box-shadow:0 18px 45px rgba(16,24,40,.11);
	border-color:rgba(13,44,108,.12);
}

.card:hover::before{
	height:100%;
}

.card i{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:65px;
	height:65px;
	border-radius:50%;
	background:rgba(255,106,0,.09);
	color:var(--secondary) !important;
	margin-bottom:18px;
	transition:.35s ease;
}

.card:hover i{
	background:var(--primary);
	color:#fff !important;
	transform:rotate(-5deg);
}

.card h6{
	color:var(--primary);
	font-size:18px;
	font-weight:700;
	margin-bottom:10px;
}

.card p{
	margin-bottom:0;
	font-size:14px;
	color:#667085;
}

/* ========================================
   TECHNICAL CAPABILITIES
======================================== */

#technical{
	background:#fff;
}

#technical .row{
	margin-top:45px !important;
}

#technical .col-md-4{
	padding:28px;
	border:1px solid var(--border);
	background:#fff;
	min-height:250px;
	transition:.3s ease;
}

#technical .col-md-4:hover{
	box-shadow:0 15px 35px rgba(16,24,40,.08);
	transform:translateY(-4px);
}

#technical h5{
	color:var(--primary);
	font-size:20px;
	font-weight:750;
	margin-bottom:20px;
}

#technical ul{
	list-style:none;
	padding-left:0;
	margin-bottom:0;
}

#technical li{
	position:relative;
	padding-left:24px;
	margin-bottom:11px;
	color:#667085;
	font-size:15px;
}

#technical li::before{
	content:"";
	position:absolute;
	left:0;
	top:10px;
	width:7px;
	height:7px;
	background:var(--secondary);
	border-radius:50%;
}

/* ========================================
   PROJECT EXPERIENCE
======================================== */

#technical + section{
	background:
		linear-gradient(
			135deg,
			var(--primary),
			#071a46
		) !important;
	color:#fff;
}

#technical + section .section-title{
	color:#fff;
}

#technical + section .section-title::after{
	margin-left:auto;
	margin-right:auto;
}

#technical + section p{
	color:rgba(255,255,255,.85);
	font-size:20px;
	line-height:2;
}

#technical + section strong{
	color:#fff;
}

/* ========================================
   INDUSTRIES
======================================== */

#technical + section + section{
	background:#fff;
}

#technical + section + section p{
	font-size:18px;
	color:var(--primary);
	font-weight:600;
	max-width:850px;
	margin-left:auto;
	margin-right:auto;
}

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

#contact{
	background:var(--light) !important;
}

#contact .row{
	align-items:stretch;
}

#contact .col-md-6:first-child{
	padding:40px;
	display:flex;
	flex-direction:column;
	justify-content:center;
	text-align:left;
}

#contact .col-md-6:first-child .section-title{
	text-align:left;
}

#contact .col-md-6:first-child .section-title::after{
	margin-left:0;
	margin-right:0;
}

#contact .col-md-6:first-child p{
	font-size:16px;
	margin-bottom:12px;
}

#contact .col-md-6:first-child p i{
	width:30px;
	color:var(--secondary);
}

#contact .col-md-6:first-child .btn{
	align-self:flex-start;
}

/* ========================================
   ENQUIRY FORM
======================================== */

#contact .col-md-6.border{
	background:#fff;
	border:1px solid var(--border) !important;
	border-radius:8px !important;
	padding:35px !important;
	box-shadow:0 12px 40px rgba(16,24,40,.07);
}

#enquiryForm h3{
	color:var(--primary);
	font-size:26px;
	font-weight:800;
	margin-bottom:8px;
}

.form-label{
	font-size:14px;
	font-weight:600;
	color:var(--dark);
	margin-bottom:6px;
}

.form-control,
.form-select{
	border:1px solid #d0d5dd;
	border-radius:4px;
	min-height:46px;
	font-size:14px;
	padding:10px 13px;
	box-shadow:none !important;
	transition:.25s ease;
}

.form-control:focus,
.form-select:focus{
	border-color:var(--primary);
	box-shadow:0 0 0 3px rgba(13,44,108,.08) !important;
}

textarea.form-control{
	resize:vertical;
}

.form-check-label{
	font-size:13px;
	color:#667085;
}

#enquiryForm .btn-primary{
	background:var(--primary);
	border-color:var(--primary);
	border-radius:4px;
	padding:11px 24px;
	font-weight:600;
}

#enquiryForm .btn-primary:hover{
	background:var(--secondary);
	border-color:var(--secondary);
}

/* ========================================
   WHATSAPP
======================================== */

.whatsapp{
	position:fixed;
	width:58px;
	height:58px;
	bottom:22px;
	right:22px;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#25D366;
	color:#fff;
	border-radius:50%;
	font-size:25px;
	text-decoration:none;
	z-index:99999;
	box-shadow:0 10px 25px rgba(37,211,102,.30);
	transition:.3s ease;
}

.whatsapp:hover{
	color:#fff;
	transform:scale(1.08);
}

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

footer{
	background:#071a46;
	color:rgba(255,255,255,.75);
	padding:24px 15px;
}

footer p{
	margin:0;
	font-size:14px;
}

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

@media(max-width:991px){

	.navbar-brand img{
		height:58px;
	}

	.navbar-collapse{
		background:#fff;
		margin-top:10px;
		padding:12px;
		border-radius:8px;
		box-shadow:0 12px 30px rgba(16,24,40,.10);
	}

	.navbar-nav{
		align-items:stretch;
		gap:0;
	}

	.nav-link{
		padding:12px 8px !important;
	}

	.nav-link::after{
		display:none;
	}

	.hero{
		min-height:640px;
	}

	.hero h1{
		max-width:700px;
	}

	#contact .col-md-6:first-child{
		padding:20px 0 40px;
	}

	#contact .col-md-6:first-child .section-title{
		text-align:center;
	}

	#contact .col-md-6:first-child .section-title::after{
		margin-left:auto;
		margin-right:auto;
	}

	#contact .col-md-6:first-child{
		text-align:center;
	}

	#contact .col-md-6:first-child .btn{
		align-self:center;
	}
}

@media(max-width:767px){

	.py-5{
		padding-top:60px !important;
		padding-bottom:60px !important;
	}

	.navbar-brand img{
		height:52px;
		max-width:180px;
	}

	.hero{
		min-height:620px;
		padding:120px 18px 80px;
		background-position:center;
	}

	.hero h1{
		font-size:32px;
		letter-spacing:-.5px;
	}

	.hero p{
		font-size:15px;
	}

	.btn-brand{
		padding:12px 22px;
		font-size:14px;
	}

	.section-title{
		font-size:29px;
	}

	.card{
		padding:28px 20px !important;
	}

	#technical .col-md-4{
		min-height:auto;
		padding:25px 20px;
	}

	#technical + section p{
		font-size:17px;
	}

	#technical + section + section p{
		font-size:16px;
		line-height:1.8;
	}

	#contact .col-md-6.border{
		padding:22px !important;
	}

	#enquiryForm h3{
		font-size:23px;
	}

	.whatsapp{
		width:54px;
		height:54px;
		right:16px;
		bottom:16px;
		font-size:23px;
	}
}

@media(max-width:400px){

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

	.hero{
		min-height:590px;
	}

	.navbar-brand img{
		height:48px;
	}
}

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

.industry-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid #e8e8e8;
	box-shadow: 0 8px 30px rgba(13, 44, 108, 0.08);
	transition: all 0.4s ease;
	height: 100%;
	position: relative;
}


/* Hover */
.industry-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 18px 45px rgba(13, 44, 108, 0.16);
}


/* =========================================
   IMAGE
========================================= */

.industry-image {
	overflow: hidden;
	position: relative;
}


.industry-image img {
	width: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}


/* Image zoom */
.industry-card:hover .industry-image img {
	transform: scale(1.08);
}


/* Image overlay */
.industry-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		transparent 50%,
		rgba(13, 44, 108, 0.25)
	);
	pointer-events: none;
}


/* =========================================
   CARD CONTENT
========================================= */

.industry-content {
	padding: 30px 28px 25px;
	position: relative;
}


/* =========================================
   ICON
========================================= */

.industry-icon {
	width: 58px;
	height: 58px;
	background: var(--primary);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 23px;
	margin-top: -58px;
	margin-bottom: 20px;
	position: relative;
	z-index: 2;
	border: 5px solid #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12);
	transition: all 0.3s ease;
}


.industry-card:hover .industry-icon {
	background: var(--secondary);
	transform: rotate(5deg);
}


/* =========================================
   TITLE
========================================= */

.industry-content h3 {
	color: var(--primary);
	font-size: 21px;
	font-weight: 700;
	margin-bottom: 12px;
	line-height: 1.3;
}


/* =========================================
   DESCRIPTION
========================================= */

.industry-content p {
	color: #666;
	font-size: 15px;
	line-height: 1.7;
	margin-bottom: 20px;
}


/* =========================================
   LINK
========================================= */

.industry-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--secondary);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: all 0.3s ease;
}


.industry-link i {
	transition: transform 0.3s ease;
}


.industry-link:hover {
	color: var(--primary);
}


.industry-link:hover i {
	transform: translateX(5px);
}