/* =========================================================
GOOGLE FONTS
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

/* =========================================================
ROOT VARIABLES
========================================================= */
:root {
	/* Fonts */
	--primary-font-family: "Oswald", sans-serif;
	--secondary-font-family: "Roboto", sans-serif;

	/* Global Colors */
	--nav-color: #0B4043;
	--heading-color: #494949;

	/* ===== HERO COLORS ===== */
	--hero-bg: #0b0b0b;
	--hero-text: #ffffff;
	--hero-text-muted: #cfcfcf;
	--hero-text-light: #aaa;

	--overlay-dark: rgba(11, 11, 11, 0.85);
	--overlay-mid: rgba(11, 11, 11, 0.7);
	--overlay-light: rgba(11, 11, 11, 0.3);

	--accent-primary: #F4D376;
	--accent-secondary: #F4D320;
	--accent-tagline: #F4D320;

	--border-muted: #666;
}

/* =========================================================
BASE / RESET
========================================================= */
html, body{
	overflow-x: hidden;
}
body,
.ui-widget {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #000;
	font-family: var(--secondary-font-family);
}

img {
	max-width: 100%;
	height: auto;
}

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

button {
	cursor: pointer;
	outline: none;
}

/* =========================================================
TYPOGRAPHY
========================================================= */
h1, h2, h3, h4, h5,
.title,
.section_title,
.hero-title,
.hero-tagline {
	font-family: var(--primary-font-family);
}

p,
a,
li,
label {
	font-family: var(--secondary-font-family);
}

h1, h2 {
	color: var(--heading-color);
}

p {
	font-size: 16px;
	line-height: 24px;
}

a {
	color: #000;
	text-decoration: none;
	outline: none;
}

a:hover,
a:focus,
a:active {
	color: var(--nav-color);
}

/* =========================================================
TITLES & TEXT BLOCKS
========================================================= */
.title {
	font-size: 64px;
	font-weight: 700;
	line-height: 80px;
	color: #fff;
}

.title-top {
	font-family: var(--primary-font-family);
	font-size: 24px;
	line-height: 33px;
	color: #fff;
}

.section_title {
	font-size: 40px;
	font-weight: 700;
	line-height: 54px;
	color: #1E1E1E;
}

.section_paragraph {
	font-size: 18px;
	line-height: 28px;
}

/* =========================================================
LIST STYLE
========================================================= */
.list-disc li {
	position: relative;
	padding: 7px 0;
}

.list-disc li::before {
	content: '';
	width: 8px;
	height: 8px;
	background: #000;
	position: absolute;
	left: -4%;
	top: 25%;
	border-radius: 50%;
}

/* =========================================================
BUTTONS
========================================================= */
.banner-btn .kc_button,
.cbtn .kc_button,
.ff-btn-submit,
input[type="submit"],
button[type="submit"],
.btn {
	font-family: var(--primary-font-family);
	padding: 10px 25px;
	font-size: 14px;
	letter-spacing: 2px;
	font-weight: 600;
	transition: all .3s ease;
}

.banner-btn .kc_button {
	background: #fff;
	color: var(--nav-color);
	border: 1px solid #00457B;
}

.banner-btn .kc_button:hover {
	background: var(--nav-color);
	color: #fff;
}

.cbtn .kc_button {
	background: var(--nav-color);
	color: #fff;
}

/* =========================================================
HEADER / NAV
========================================================= */
.main-menu {
	position: fixed;
	width: 100%;
	top: 0;
	background: #f3f3f3;
	z-index: 1000;
}

.header-bottom .nav-link {
	font-size: 16px;
	color: #1E1E1E;
}

.header-bottom .nav-link:hover {
	color: var(--nav-color);
}

/* =========================================================
FORMS
========================================================= */
label {
	width: 100%;
	font-size: 18px;
	font-weight: 300;
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	border: 1px solid #DADADA;
	box-shadow: 4px 4px 14px rgba(0,0,0,0.15);
	outline: none;
	font-family: var(--secondary-font-family);
}

textarea {
	max-height: 8rem;
	margin-top: 20px;
}

/* =========================================================
FOOTER
========================================================= */
footer.custom-footer {
	background: var(--nav-color);
	padding: 70px 0 50px;
}

.footer-widget a {
	font-size: 16px;
	margin-bottom: 8px;
	color: #fff;
}
.footer-widget a:hover {
	opacity: 0.9;
}
.footer-bottom p {
	color: #fff;
	opacity: 0.7;
}

/* =========================================================
BLOG
========================================================= */
.blog-template {
	padding: 80px 0;
}

.single-blog {
	padding: 60px 0;
}

/* =========================================================
===== HERO SECTION =====
========================================================= */
.hero {
	position: relative;
	overflow: hidden;
	display: flex;
	padding: 120px 0px 60px;
	align-items: center;
	color: var(--hero-text);
	background: var(--hero-bg);
}

.hero-bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 1;
}
.hero-content {
	padding: 120px 0px 0px;
}
.hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.overlay {
	position: absolute;
	inset: 0;
}

.overlay-top {
	background: linear-gradient(
		to top,
		var(--hero-bg) 0%,
		var(--overlay-mid) 40%,
		var(--overlay-light) 100%
	);
}

.overlay-side {
	background: linear-gradient(
		to right,
		var(--overlay-dark) 0%,
		transparent 70%
	);
}

.hero-content {
	position: relative;
	z-index: 2;
}
.hero-bg{
	height: 600px;
}
.hero-text {
	max-width: 650px;
}

.hero-tagline {
	letter-spacing: 4px;
	font-size: 14px;
	margin-bottom: 16px;
	color: var(--accent-tagline);
}

.hero-title {
	font-size: clamp(42px, 6vw, 90px);
	line-height: 1;
	color: #fff;
	font-weight: 700;
	margin-bottom: 24px;
}

.hero-title span {
	background: linear-gradient(
		90deg,
		var(--accent-primary),
		var(--accent-secondary)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.hero-desc {
	font-size: 16px;
	max-width: 520px;
	line-height: 1.7;
	color: var(--hero-text-muted);
	margin-bottom: 32px;
	font-family: var(--secondary-font-family);
}

.hero-buttons {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	outline: none;
}

.btn-primary {
	background: linear-gradient(
		90deg,
		var(--accent-primary),
		var(--accent-secondary)
	);
	color: #000;
	outline: none;
	border: none;
	border-radius: 8px;
}
.btn-outline {
	border: 1px solid var(--border-muted);
	color: var(--hero-text);
}
.btn-outline:hover, .btn-primary:hover {
	box-shadow: 0 0 30px var(--accent-tagline);
}
.btn-primary:hover{
	color: #000;
}
/* =========================================================
STATS
========================================================= */
.hero-stats {
	margin-top: 80px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	max-width: 520px;
}

.stat h3 {
	font-size: 36px;
	font-weight: 700;
	background: linear-gradient(
		90deg,
		var(--accent-primary),
		var(--accent-secondary)
	);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.stat p {
	font-size: 13px;
	color: var(--hero-text-light);
}
#why-us{
	background: #000;
	padding: 80px 0px;
}
#why-us p{
	color: #fff;
}
#why-us .why-subtitle{
	color: var(--accent-tagline);
}
/* =========================================================
ANIMATIONS
========================================================= */
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
	from { opacity: 0; transform: translateX(-30px); }
	to { opacity: 1; transform: translateX(0); }
}

/* =========================================================
FOOTER – REACT STYLE DESIGN
========================================================= */
.footer-react {
	border-top: 1px solid rgba(255,255,255,0.12);
	padding: 40px 0 20px;
	background-color: #0b0b0b;
}

.footer-react .container {
	max-width: 1200px;
	margin: auto;
	padding: 0 20px;
}

/* Layout */
.footer-react-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.social-icon a{
	color: #fff;
	font-size: 32px;
}
/* Desktop */
@media (min-width: 768px) {
	.footer-react-inner {
		flex-direction: row;
	}
}

/* =========================================================
BRAND LOGO
========================================================= */
.footer-brand {
	font-family: var(--primary-font-family);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-decoration: none;
	display: flex;
	gap: 4px;
}

.text-gradient-fire {
	background: #fff;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.text-foreground {
	color: #ffffff;
}

/* =========================================================
FOOTER NAV LINKS
========================================================= */
.footer-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.footer-nav a {
	font-family: var(--primary-font-family);
	font-size: 11px;
	letter-spacing: 0.18em;
	color: #9ca3af;
	text-decoration: none;
	transition: color 0.3s ease;
}

.footer-nav a:hover {
	color: #ff512f;
}

/* =========================================================
COPYRIGHT
========================================================= */
.footer-copy {
	font-family: var(--secondary-font-family);
	font-size: 14px;
	letter-spacing: 0.05em;
	color: #fff;
	text-align: center;
	margin: 0px;
}

@media (min-width: 768px) {
	.footer-copy {
		/* 		text-align: right; */
	}
}

/* =========================================================
NAVBAR – REACT STYLE (WORDPRESS HEADER)
========================================================= */
.header-wrapper {
	position: relative;
	z-index: 1000;
	background: #000;
}

/* Main navbar */
.main-menu {
	background: transparent !important;
	padding: 0;
	height: 100%;
	max-height: 160px;
}
.header.scrolled .main-menu,
.header.scrolled .site-logo img{
	max-height: 75px;
}
.header.scrolled .main-menu{
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

}
/* Navbar height */
.main-menu .navbar {
	min-height: 64px;
}

@media (min-width: 768px) {
	.main-menu .navbar {
		min-height: 80px;
	}
}

/* =========================================================
BRAND / LOGO
========================================================= */
.navbar-brand {
	font-family: var(--primary-font-family);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.18em;
	display: flex;
	align-items: center;
}

/* Gradient brand text (fallback if no image) */
.navbar-brand span {
	background: linear-gradient(90deg, #ff512f, #dd2476);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/* HEADER WRAPPER */
.header {
	position: relative;
	z-index: 999;
}

/* INNER FLEX */
.header-inner {
	width: 100%;
	height: 80px;
	position: relative;
	display: flex;
	align-items: center;
}

/* LOGO CENTER */
.site-logo {
	position: absolute;
	left: 50%;
	top: 10px;
	transform: translateX(-50%);
	transition: all 0.4s ease;
}

/* LOGO IMAGE SIZE */
.site-logo img {
	height: 100%;
	max-height: 125px;
}

/* MENU INITIAL STATE */
.menu-wrap {
	margin-left: auto;
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: all 0.4s ease;
}
#bs4navbar{
	opacity: 0;
}

/* AFTER SCROLL */
.header.scrolled .site-logo {
	left: 75px;
	max-height: 75px;
	transform: translateX(0);
}
.header.scrolled #bs4navbar{
	opacity: 1;
}
.header.scrolled .menu-wrap {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* MENU ITEM ANIMATION */
.header.scrolled .navbar-nav li {
	animation: fadeSlide 0.4s ease forwards;
}

@keyframes fadeSlide {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* MOBILE FIX */
@media (max-width: 991px) {
	.site-logo {
		left: 14px;
		transform: translateX(0);
		position: relative;
	}

	.menu-wrap {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* =========================================================
DESKTOP MENU
========================================================= */
.menu-contain {
	margin-left: auto;
}

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

/* Nav links */
.navbar-nav .nav-link {
	font-family: var(--primary-font-family);
	font-size: 14px;
	letter-spacing: 0.18em;
	color: #9ca3af !important;
	padding: 0 !important;
	transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
	color: var(--accent-tagline) !important;
}

/* =========================================================
CTA BUTTON (GET A QUOTE)
========================================================= */
.navbar-nav .menu-item:last-child .nav-link {
	/* 	background: linear-gradient(90deg, #ff512f, #dd2476); */
	color: #000 !important;
	padding: 10px 24px !important;
	font-size: 14px;
	border-radius: 4px;
	letter-spacing: 0.16em;
	transition: box-shadow 0.3s ease;
}

.navbar-nav .menu-item:last-child .nav-link:hover {
	box-shadow: 0 0 25px rgba(255, 81, 47, 0.6);
}

/* =========================================================
MOBILE TOGGLE (HAMBURGER)
========================================================= */
.navbar-toggler {
	border: none;
	outline: none;
	box-shadow: none;
	padding: 0;
}

.navbar-toggler span {
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	margin: 5px 0;
	transition: all 0.4s ease;
}

/* Toggle animation */
.navbar-toggler[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.navbar-toggler[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* =========================================================
SERVICES SECTION – REACT STYLE
========================================================= */
.services-section {
	/* 	padding: 120px 0; */
	background: #0b0b0b;
}

.services-header {
	text-align: center;
	margin-bottom: 80px;
}

.services-subtitle {
	font-family: var(--primary-font-family);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--accent-tagline);
	padding: 12px 0px;
	text-align:center;
}

.services-title {
	font-family: var(--primary-font-family);
	font-size: 48px;
	font-weight: 700;
	color: #ffffff;
	text-align:center;
	margin-bottom: 20px;
}
.services-desc {
	font-size: 16px;
	text-align: center;
	line-height: 1.7;
	color: var(--hero-text-muted);
	margin-bottom: 52px;
	font-family: var(--secondary-font-family);
}
/* =========================================================
GRID
========================================================= */
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

/* =========================================================
SERVICE CARD
========================================================= */

.service-card {
	background: #111111;
	border: 1px solid rgba(255,255,255,0.08);
	padding: 32px;
	border-radius: 8px;
	transition: all 0.4s ease;
}

.service-card:hover {
	border-color: var(--accent-secondary);
	transform: translateY(-6px);
}
.service-icon {
	font-size: 36px;
	color: var(--accent-primary);
	margin-bottom: 20px;
	transition: transform 0.3s ease;
}

.service-card:hover .service-icon {
	transform: scale(1.15);
}

.service-card h3 {
	font-family: var(--primary-font-family);
	font-size: 20px;
	margin-bottom: 12px;
	color: #ffffff;
}

.service-card p {
	font-family: var(--secondary-font-family);
	font-size: 14px;
	line-height: 1.7;
	color: #9ca3af;
}
.fluentform .ff_force_hide{
	display: flex !important;
}
/* =========================================================
FEATURE IMAGE
========================================================= */
.services-feature {
	position: relative;
	margin-top: 120px;
	overflow: hidden;
}

.services-feature img {
	width: 100%;
	height: 320px;
	object-fit: cover;
}

.services-feature-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.5);
}

.services-feature-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	font-family: var(--primary-font-family);
	font-size: 48px;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
}
.services-feature-text a{
	color: #000;
}
/* =========================================================
GALLERY SECTION – REACT STYLE
========================================================= */
.gallery-section {
	padding: 120px 0;
	background: #0f0f0f;
}

.gallery-header {
	margin-bottom: 80px;
}

.gallery-text p {
	font-family: var(--primary-font-family);
	font-size: 13px;
	letter-spacing: 0.3em;
	color: var(--accent-primary);
	margin: 12px 0px;
}

.gallery-title {
	font-family: var(--primary-font-family);
	font-size: 48px;
	font-weight: 700;
	color: #ffffff;
	text-align: center;
}

.gallery-text h3 {
	font-family: var(--primary-font-family);
	font-size: 48px;
	font-weight: 700;
	color: #ffffff;
}

.gallery-carousel .owl-stage {
	display: flex;
}

.owl-next span, .owl-prev span{
	font-size: 50px;
}

.gallery-carousel .owl-item {
	padding: 0 15px;
}

.gallery-carousel .owl-nav {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 20px;
}

.gallery-carousel .owl-nav button {
	width: 45px;
	height: 45px;
	border-radius: 50%;
	background: #111 !important;
	color: #fff !important;
	font-size: 20px;
}

/* =========================================================
🔥 REQUIRED FIX (ADDED – DO NOT REMOVE)
========================================================= */
.gallery-carousel .carousel-item {
	display: flex;
}

.gallery-carousel .carousel-item > .gallery-item {
	flex: 0 0 auto;
	width: 100%;
}

.gallery-carousel .carousel-item > .gallery-item:not(:last-child) {
	margin-right: 24px;
}

/* =========================================================
CONTACT SECTION
========================================================= */
.contact-section {
	padding: 120px 0;
	background: var(--card, #0f0f0f);
	color: #fff;
}

.contact-header {
	text-align: center;
	margin-bottom: 80px;
}

.contact-subtitle {
	letter-spacing: 0.3em;
	font-size: 12px;
	color: var(--accent-tagline);
	margin-bottom: 10px;
}

.contact-title {
	font-size: 48px;
	font-weight: 700;
}

.contact-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
}

/* LEFT SIDE */
.contact-desc {
	color: #aaa;
	line-height: 1.8;
	margin-bottom: 30px;
}

.contact-item {
	display: flex;
	gap: 14px;
	margin-bottom: 16px;
	font-size: 20px;
}
h2.widgettitle{
	margin-bottom: 12px;
}
h2.widgettitle, 
.menu-primary-menu-container ul {
	text-align: left;
}
.contact-item p{
	text-align: left;
	color: #fff;
}
.map-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 ratio */
	height: 0;
}

.map-container iframe {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 0;
}
.contact-item .icon {
	color: var(--accent-tagline);
}

/* =========================================================
FLUENT FORM STYLING
========================================================= */
.contact-form .ff-el-group {
	margin-bottom: 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
	width: 100%;
	background: #000 !important;
	border: 1px solid #333 !important;
	padding: 14px 16px !important;
	color: #fff !important;
	font-size: 14px;
	transition: border-color 0.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #777;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
	border-color: var(--primary, #ff6a00) !important;
	outline: none !important;
}

/* Two-column layout for name & email */
.contact-form .ff-el-group:nth-child(1),
.contact-form .ff-el-group:nth-child(2) {
	width: 48%;
	display: inline-block;
}

/* Submit Button */
.contact-form button {
	width: 100%;
	background: linear-gradient(90deg, var(--accent-tagline), var(--accent-primary));
	color: #000;
	padding: 16px;
	font-weight: 700;
	letter-spacing: 0.15em;
	border: none;
	cursor: pointer;
	transition: box-shadow 0.3s;
}

.contact-form button:hover {
	box-shadow: 0 0 30px rgba(255, 106, 0, 0.6);
}

/* =========================================================
CONTACT INFO (ADDRESS / DETAILS)
========================================================= */
#contact .contact-info {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

#contact .contact-desc {
	font-size: 15px;
	line-height: 1.9;
	color: #9a9a9a;
	max-width: 480px;
}

/* Each info row */
#contact .contact-item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	font-size: 14px;
	color: #e5e5e5;
}

/* Icon circle */
#contact .contact-item .icon {
	width: 36px;
	height: 36px;
	min-width: 36px;
	border-radius: 50%;
	background: rgba(255, 106, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--accent-tagline);
	font-size: 16px;
}

/* Text */
#contact .contact-item span {
	line-height: 1.6;
}

/* Hover effect */
#contact .contact-item:hover .icon {
	background: rgba(255, 106, 0, 0.25);
}

/* =========================================================
FLUENT FORM – CONTACT FORM STYLE
========================================================= */
#contact .ff-el-form-control,
#contact .ff-el-form-control input,
#contact .ff-el-form-control select,
#contact .ff-el-form-control textarea {
	width: 100%;
	border: 1px solid #2b2b2b !important;
	padding: 14px 16px !important;
	font-size: 14px;
	color: #fff !important;
	box-shadow: none !important;
}

/* Placeholder */
#contact input::placeholder,
#contact textarea::placeholder {
	color: #777 !important;
}

/* Focus state */
#contact input:focus,
#contact select:focus,
#contact textarea:focus {
	border-color: var(--accent-tagline) !important;
	outline: none !important;
}

/* Remove Fluent default bg */
#contact .ff-el-input--content,
#contact .ff-el-select,
#contact .ff-el-textarea {
	/* 	background: transparent !important; */
}

/* Two column (Name + Email) */
#contact .ff-el-group:nth-child(1),
#contact .ff-el-group:nth-child(2) {
	width: 100%;
	display: inline-block;
}

/* Submit Button */
#contact .ff-btn-submit {
	width: 100%;
	padding: 16px;
	font-size: 13px;
	letter-spacing: 0.2em;
	font-weight: 700;
	background: linear-gradient(90deg, var(--accent-tagline), var(--accent-primary));
	color: #000 !important;
	border: none;
	transition: box-shadow 0.3s ease;
}

#contact .ff-btn-submit:hover {
	box-shadow: 0 0 30px rgba(255, 106, 0, 0.6);
}

/* Error messages */
#contact .ff-el-is-error input,
#contact .ff-el-is-error textarea {
	border-color: #ff3b3b !important;
}

#contact .error.text-danger {
	color: #ff3b3b !important;
	font-size: 12px;
}

/* Success message */
#contact .ff-message-success {
	background: #0f0f0f;
	border: 1px solid #1f1f1f;
	color: #4cff9a;
	padding: 20px;
	margin-top: 20px;
}

/* =========================================================
ABOUT SECTION – FIXED
========================================================= */
.about-section {
	padding: 120px 0;
	background: #000;
}

.about-section .container {
	/* 	max-width: 1200px; */
	margin: 0 auto;
	padding: 0 16px;
}

/* GRID */
.about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

/* =========================================================
LEFT CONTENT
========================================================= */
.about-content {
	max-width: 560px;
}

.about-subtitle {
	font-size: 12px;
	letter-spacing: 0.3em;
	color: var(--accent-tagline);
	margin-bottom: 12px;
	text-transform: uppercase;
}

.about-title {
	font-size: 48px;
	font-weight: 700;
	margin-bottom: 24px;
	line-height: 1.15;
}

.about-text {
	font-size: 15px;
	color: #fff;
	line-height: 1.9;
	margin-bottom: 24px;
}

/* =========================================================
FEATURE LIST
========================================================= */
.about-features {
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 12px;
}

.feature-item {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #e5e5e5;
}

.feature-icon {
	font-size: 18px;
	color: var(--primary, #ff6a00);
}

/* =========================================================
RIGHT TIMELINE
========================================================= */
.about-timeline {
	width: 100%;
}

.timeline-box {
	position: relative;
	padding: 48px;
	border-radius: 12px;
	background:
		linear-gradient(#111, #111) padding-box,
		linear-gradient(90deg, var(--accent-tagline), var(--accent-primary)) border-box;
	border: 1px solid transparent;
	transition: box-shadow 0.35s ease, transform 0.35s ease;

}

.timeline-box:hover {
	box-shadow:
		0 20px 40px rgba(0, 0, 0, 0.16),
		0 0 30px rgba(255, 106, 0, 0.135);
	transform: translateY(-4px);
}


.timeline-item {
	display: flex;
	gap: 28px;
	margin-bottom: 36px;
}

.timeline-item:last-child {
	margin-bottom: 0;
}

.timeline-year {
	font-size: 28px;
	font-weight: 700;
	background: linear-gradient(90deg,var(--accent-tagline),var(--accent-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	flex-shrink: 0;
}

/* TIMELINE TEXT */
.timeline-content {
	display: flex;
	flex-direction: column;
}

.timeline-content p {
	font-size: 14px;
	color: #9a9a9a;
	line-height: 1.7;
	margin: 0;
}

.timeline-line {
	height: 1px;
	background: #fff;
	margin-bottom: 10px;
	transform-origin: left;
	transform: scaleX(0);
	animation: lineExpand 0.8s ease-out forwards;
}
li.btn-primary.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-17{
	background: unset;
}
li.btn-primary.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-17:hover{
	box-shadow: none;
}
/* Different widths */
.timeline-item:nth-child(1) .timeline-line { width: 40%; }
.timeline-item:nth-child(2) .timeline-line { width: 55%; }
.timeline-item:nth-child(3) .timeline-line { width: 70%; }
.timeline-item:nth-child(4) .timeline-line { width: 90%; }

@keyframes lineExpand {
	to {
		transform: scaleX(1);
	}
}


/* =========================================================
ALL MEDIA QUERIES COMBINED
========================================================= */

/* Mobile Menu */
@media (max-width: 991px) {
	.navbar-collapse {
		background: #0b0b0b;
		border-top: 1px solid rgba(255,255,255,0.12);
		padding: 20px 0;
	}

	.navbar-nav {
		gap: 20px;
		text-align: center;
	}

	.navbar-nav .nav-link {
		font-size: 16px;
	}

	.navbar-nav .menu-item:last-child .nav-link {
		display: inline-block;
	}
}

/* Desktop Styles */
@media (min-width: 768px) {
	.footer-react-inner {
		flex-direction: row;
	}

	.footer-copy {
		/* 		text-align: right; */
	}

	.main-menu .navbar {
		min-height: 80px;
	}
}

/* Tablet & Mobile Layouts */
@media (max-width: 992px) {
	.contact-grid {
		grid-template-columns: 1fr;
	}

	.about-grid {
		grid-template-columns: 1fr;
		gap: 60px;
	}
}

@media (max-width: 991px) {
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	#bs4navbar{
		opacity: 1;
	}
}

@media (max-width: 767px) {
	.footer-copies{
		flex-direction: column-reverse;	
		gap: 0px !important;
	}
	h2.widgettitle{
		margin: 12px 0px;
	}
	ul.social-icon{
		justify-content: start !important;
		width: 100%;
		padding: 12px 0px;
	}
	.main-menu, .site-logo img{
		max-height: 75px;
	}
	.why-box, .service-card, .flex-box, .service-content, .about-content,
	.hero-content {
		padding: 16px !important;
	}
	#why-us{
		padding: 0px;
	}
	#why-us .why-left {
		padding: 16px;
	}
	.hero-bg{
		height: 400px;
	}
	.site-logo img, .header.scrolled .site-logo{
		left: 14px;

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

	.services-feature-text {
		font-size: 28px;
	}

	.gallery-title {
		font-size: 32px;
	}

	.gallery-text h3 {
		font-size: 18px;
	}
}

@media (max-width: 768px) {
	.hero-stats {
		grid-template-columns: 1fr;
		padding: 16px;
	}
	.services-section{
		padding: 80px 0px 0px;
	}
	.about-section, .gallery-section{
		padding: 80px 0px; 
	}
	.service-row{
		margin-bottom: 80px !important;
	}
	.hero-buttons {
		flex-direction: column;
		gap: 0px;
	}

	.title {
		font-size: 32px;
		line-height: 46px;
	}

	.section_title {
		font-size: 32px;
	}

	.about-title {
		font-size: 36px;
	}

	.timeline-box {
		padding: 32px;
	}

	#contact .contact-desc {
		max-width: 100%;
	}
}

@media (max-width: 640px) {
	.contact-form .ff-el-group:nth-child(1),
	.contact-form .ff-el-group:nth-child(2) {
		width: 100%;
	}

	#contact .ff-el-group:nth-child(1),
	#contact .ff-el-group:nth-child(2) {
		width: 100%;
	}
}

/* Gallery Specific Breakpoints */
@media only screen and (min-width: 768px) and (max-width: 991px) {
	.gallery-carousel .carousel-item {
		flex: 0 0 50%;
	}
	.header.scrolled a.navbar-brand.site-logo {
		left: 0px;
	}
	.hero-bg{
		height: 500px;
	}
}


@media (max-width: 767px) {
	.gallery-carousel .carousel-item {
		flex: 0 0 100%;
	}
}