/* =========================================
   GLOBAL
========================================= */
html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Montserrat', Arial, sans-serif;
	color: #202124;
	background: #ffffff;
	margin: 0;
}

a {
	text-decoration: none;
}

.section-label {
	display: inline-block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #0d6efd;
	margin-bottom: 15px;
}

.section-title {
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: 20px;
}

.section-subtitle {
	max-width: 700px;
	color: #6c757d;
}


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

.navbar {
	background: rgba(10, 10, 15, 0.94);
	backdrop-filter: blur(10px);
	padding: 16px 0;
	transition: all .3s ease;
}

	.navbar.scrolled {
		padding: 10px 0;
		box-shadow: 0 5px 25px rgba(0,0,0,.15);
	}

.navbar-brand {
	font-size: 23px;
	letter-spacing: -1px;
}

.brand-main {
	color: #ffffff;
}

.brand-accent {
	color: #0d6efd;
}

.nav-link {
	color: rgba(255,255,255,.85) !important;
	font-weight: 500;
	margin-left: 12px;
}

	.nav-link:hover {
		color: #ffffff !important;
	}


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

.hero-section {
	min-height: 100vh;
	position: relative;
	background: linear-gradient( 90deg, rgba(0,0,0,.90), rgba(0,0,0,.55), rgba(0,0,0,.25) ), url('../img/hero-business.jpg') center center / cover no-repeat;
	color: white;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 70% 30%, rgba(13,110,253,.30), transparent 40% );
}

.hero-section .container {
	z-index: 2;
}

.hero-label {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 3px;
	font-weight: 700;
	color: #66a8ff;
	margin-bottom: 20px;
}

.hero-title {
	font-size: clamp(45px, 7vw, 82px);
	line-height: 1.02;
	font-weight: 800;
	letter-spacing: -3px;
	max-width: 900px;
}

	.hero-title span {
		color: #0d6efd;
	}

.hero-text {
	max-width: 720px;
	font-size: 19px;
	line-height: 1.8;
	color: rgba(255,255,255,.82);
	margin: 25px 0 35px;
}

.btn-primary {
	border: none;
	background: #0d6efd;
	padding: 13px 25px;
	font-weight: 600;
}

	.btn-primary:hover {
		background: #0b5ed7;
	}

.hero-features {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
	font-size: 14px;
}

	.hero-features i {
		color: #0d6efd;
		margin-right: 7px;
	}


/* =========================================
   INTRO
========================================= */

.intro-section {
	background: #ffffff;
}

	.intro-section p {
		line-height: 1.8;
	}


/* =========================================
   SERVICES
========================================= */

.services-section {
	background: #f6f8fb;
}

.service-card {
	background: #ffffff;
	height: 100%;
	padding: 35px;
	border-radius: 16px;
	border: 1px solid #e9ecef;
	transition: transform .3s ease, box-shadow .3s ease;
}

	.service-card:hover {
		transform: translateY(-8px);
		box-shadow: 0 20px 50px rgba(0,0,0,.10);
	}

.service-icon {
	width: 65px;
	height: 65px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e9f2ff;
	color: #0d6efd;
	border-radius: 14px;
	font-size: 28px;
	margin-bottom: 25px;
}

.service-card h3 {
	font-size: 23px;
	font-weight: 700;
	margin-bottom: 15px;
}

.service-card p {
	color: #6c757d;
	line-height: 1.7;
}

.service-card ul {
	list-style: none;
	padding: 0;
	margin: 20px 0 0;
}

.service-card li {
	margin-bottom: 9px;
	font-size: 14px;
}

	.service-card li::before {
		content: "V";
		color: #0d6efd;
		font-weight: bold;
		margin-right: 9px;
	}


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

.cta-section {
	background: linear-gradient( 110deg, #0d6efd, #084298 );
	color: white;
	padding: 80px 0;
}

	.cta-section h2 {
		font-size: clamp(32px, 5vw, 52px);
		font-weight: 800;
	}

	.cta-section p {
		max-width: 700px;
		font-size: 17px;
		opacity: .9;
	}


/* =========================================
   PORTFOLIO
========================================= */

.portfolio-section {
	background: #ffffff;
}

.portfolio-card {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	min-height: 360px;
	background: #111;
}

	.portfolio-card img {
		width: 100%;
		height: 360px;
		object-fit: cover;
		transition: transform .5s ease;
	}

	.portfolio-card:hover img {
		transform: scale(1.08);
	}
.service .icon {
	display: block;
	background-image: url('../img/Build_sites.png');
	height: 70px;
	width: 70px;
}
.service .icon {
	display: block;
	background-image: url('../img/Build_sites.png');
	height: 70px;
	width: 70px;
}

.service .icon {
	display: block;
	background-image: url('../img/Build_sites.png');
	height: 70px;
	width: 70px;
}

.service .icon {
	display: block;
	background-image: url('../img/Build_sites.png');
	height: 70px;
	width: 70px;
}

.portfolio-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	color: white;
	background: linear-gradient( transparent, rgba(0,0,0,.85) );
}

	.portfolio-content span {
		font-size: 11px;
		letter-spacing: 2px;
		font-weight: 700;
		color: #66a8ff;
	}

	.portfolio-content h3 {
		font-size: 24px;
		margin: 8px 0 0;
	}


/* =========================================
   WHY US
========================================= */

.why-section {
	background: #f6f8fb;
}

.benefit {
	display: flex;
	gap: 18px;
	padding: 20px 0;
	border-bottom: 1px solid #dee2e6;
}

	.benefit > i {
		color: #0d6efd;
		font-size: 24px;
	}

	.benefit h4 {
		font-size: 19px;
		font-weight: 700;
	}

	.benefit p {
		color: #6c757d;
		margin: 0;
	}


/* =========================================
   PROCESS
========================================= */

.process-section {
	background: #ffffff;
}

.process-card {
	padding: 30px;
	border: 1px solid #e9ecef;
	border-radius: 15px;
	height: 100%;
}

.process-number {
	font-size: 42px;
	font-weight: 800;
	color: #0d6efd;
	margin-bottom: 20px;
}

.process-card h3 {
	font-weight: 700;
}

.process-card p {
	color: #6c757d;
	line-height: 1.7;
}


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

.contact-section {
	background: #f6f8fb;
}

.contact-info {
	margin-top: 35px;
}

	.contact-info > div {
		display: flex;
		align-items: center;
		gap: 18px;
		margin-bottom: 25px;
	}

	.contact-info i {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #e9f2ff;
		color: #0d6efd;
		font-size: 20px;
	}

	.contact-info strong {
		display: block;
		margin-bottom: 3px;
	}

	.contact-info a {
		color: #0d6efd;
	}

.contact-form {
	background: white;
	padding: 40px;
	border-radius: 18px;
	box-shadow: 0 15px 50px rgba(0,0,0,.07);
}

	.contact-form h3 {
		font-weight: 700;
		margin-bottom: 5px;
	}

.form-control,
.form-select {
	min-height: 52px;
	border-radius: 8px;
}

textarea.form-control {
	min-height: 140px;
}

.form-message {
	display: block;
	text-align: center;
	font-weight: 600;
}


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

.footer {
	background: #101114;
	color: white;
	padding: 50px 0 25px;
}

	.footer h4 {
		font-weight: 700;
	}

	.footer p {
		color: #adb5bd;
	}

	.footer a {
		color: #adb5bd;
		margin-left: 20px;
	}

		.footer a:hover {
			color: white;
		}

	.footer hr {
		border-color: rgba(255,255,255,.1);
		margin-top: 35px;
	}

.copyright {
	font-size: 13px;
}


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

@media (max-width: 991px) {

	.hero-title {
		letter-spacing: -2px;
	}

	.hero-features {
		flex-direction: column;
		gap: 10px;
	}

	.navbar-collapse {
		background: #101114;
		padding: 20px;
		margin-top: 15px;
		border-radius: 10px;
	}
}

@media (max-width: 576px) {

	.hero-title {
		font-size: 45px;
	}

	.hero-text {
		font-size: 16px;
	}

	.hero-buttons .btn {
		width: 100%;
		margin-bottom: 10px;
	}

	.contact-form {
		padding: 25px;
	}

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