/* =========================
   GLOBAL THEME
   ========================= */

/* Colors */
:root {
	--clr-bg-dark: #0a1b3f;          /* navy blue dark */
	--clr-bg-darker: #07132c;
	--clr-accent: #7CFF9A;           /* light green accent */
	--clr-accent-soft: rgba(124,255,154,0.15);
	--clr-text-light: #ffffff;
	--clr-text-muted: #94a3b8;
	--radius-xl: 1.25rem;
	--radius-lg: 1rem;
	--radius-md: .75rem;
	--radius-sm: .5rem;
	--shadow-card: 0 20px 40px rgba(0,0,0,.2);
	--shadow-soft: 0 10px 24px rgba(0,0,0,.12);
	--section-pad-y: 80px;
	--section-pad-y-mobile: 60px;
}

/* Typography */
body {
	font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	font-size: 16px;
	color: #1e293b;
	line-height: 1.6;
	scroll-behavior: smooth;
	background-color: #fff;
}

/* Headlines use Rajdhani for bold industrial feel */
h1,h2,h3,h4,h5,h6,
.brand-name,
.section-title .title {
	font-family: "Rajdhani", Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #0a1b3f;
}

.text-primary { color: #0a1b3f !important; }

.text-accent {
	color: var(--clr-accent) !important;
}

/* Small helper text */
.smalltext,
.small-text {
	font-size: .9rem;
	line-height: 1.4;
}

/* Section padding */
.section-padding {
	padding-top: var(--section-pad-y);
	padding-bottom: var(--section-pad-y);
}
@media(max-width:767px){
	.section-padding {
		padding-top: var(--section-pad-y-mobile);
		padding-bottom: var(--section-pad-y-mobile);
	}
}

/* Light alternate background */
.bg-light-alt {
	background-color: #f8fafc;
}

/* Accent button */
.btn-accent {
	background-color: var(--clr-accent);
	border: 0;
	box-shadow: 0 10px 20px rgba(124,255,154,.4);
	transition: all .25s ease;
}
.btn-accent:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 16px 32px rgba(124,255,154,.45);
}

/* =========================
   TOP BAR
   ========================= */
.top-bar {
	background: var(--clr-bg-dark);
	font-size: .85rem;
}
.top-bar i {
	color: var(--clr-accent);
}

/* =========================
   NAVBAR
   ========================= */
#mainNav {
	background-color: var(--clr-bg-dark);
}
.navbar-brand .brand-name {
	color: var(--clr-accent);
	font-size: 1.25rem;
	line-height: 1.2;
}
.navbar-brand .tagline {
	color: #fff;
	font-size: .7rem;
	letter-spacing: .05em;
}
.navbar-nav .nav-link {
	color: #fff;
	font-weight: 500;
	padding: .5rem 1rem;
	position: relative;
	font-size: .9rem;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
	color: var(--clr-accent);
}
.navbar-nav .nav-link::after {
	content:"";
	position:absolute;
	left:1rem;
	right:1rem;
	bottom:-4px;
	height:2px;
	background:var(--clr-accent);
	border-radius:2px;
	opacity:0;
	transform:scaleX(0);
	transition:all .25s ease;
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
	opacity:1;
	transform:scaleX(1);
}

/* Mobile call button in nav */
.call-btn {
	font-size: .8rem;
}

/* Navbar toggler */
.navbar-toggler:focus {
	box-shadow: 0 0 0 .25rem rgba(124,255,154,.4);
}

/* =========================
   HERO CAROUSEL
   ========================= */
.hero-carousel {
	position: relative;
}
.hero-slide-bg {
	min-height: 70vh;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
@media(max-width:767px){
	.hero-slide-bg {
		min-height: 65vh;
	}
}
.carousel-caption {
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: 20%;
	text-shadow: 0 20px 40px rgba(0,0,0,.8);
	max-width: 600px;
}
.hero-heading {
	font-size: clamp(1.8rem,2.2vw,2.5rem);
	color: #fff;
	line-height: 1.15;
	margin-bottom: .75rem;
}
.hero-text {
	color: #fff;
	font-size: .95rem;
	max-width: 480px;
	margin-bottom:1.25rem;
}
.overlay-gradient {
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, rgb(77 90 118 / 18%) 0%, rgb(53 69 104 / 31%) 60%, rgba(0, 0, 0, 0) 100%);
}
.carousel-indicators [data-bs-target] {
	width:10px;
	height:10px;
	border-radius:50%;
	border:0;
	background-color:rgba(255,255,255,.5);
}
.carousel-indicators .active {
	background-color:var(--clr-accent);
}

/* =========================
   SECTION TITLES
   ========================= */
.section-title .title {
	font-size: 2rem;
}
.section-title .title span {
	color: var(--clr-accent);
}
.b-line {
	width:60px;
	height:4px;
	background:var(--clr-accent);
	border-radius:2px;
	position:relative;
}
.b-line.l-left {
	margin-left:0;
}
.b-line-light {
	background: var(--clr-accent);
}
.section-title p {
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	font-size:.9rem;
}

/* =========================
   ABOUT SECTION
   ========================= */
#about .sub-heading {
	color: var(--clr-bg-dark);
	font-weight:600;
	font-size:1rem;
}
.about-img-wrap {
	position:relative;
	display:inline-block;
}
.about-main-img {
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
}
.floating-badge {
	position:absolute;
	left:10px;
	bottom:10px;
	background:var(--clr-bg-dark);
	color:#fff;
	padding:.6rem .9rem;
	border-radius: var(--radius-lg);
	font-size:.8rem;
	font-weight:500;
	box-shadow:0 12px 24px rgba(0,0,0,.4);
	border:1px solid rgba(124,255,154,.4);
}
.floating-badge i {
	color:var(--clr-accent);
}
.shape-bubble {
	position:absolute;
	right:-20px;
	top:-20px;
	width:70px;
	height:70px;
	background:var(--clr-accent-soft);
	border:2px solid var(--clr-accent);
	border-radius:20px;
	box-shadow:0 20px 40px rgba(124,255,154,.4);
	animation:bubbleFloat 4s ease-in-out infinite;
}
@keyframes bubbleFloat {
	0%,100% { transform:translateY(0); }
	50% { transform:translateY(-8px); }
}

.contact-mini .contact-icon {
	width:44px;
	height:44px;
	min-width:44px;
	border-radius:var(--radius-md);
	background:var(--clr-bg-dark);
	color:var(--clr-accent);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.1rem;
	box-shadow:0 12px 24px rgba(0,0,0,.4);
}

/* =========================
   SERVICES
   ========================= */
.service-card {
	background:#fff;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	overflow:hidden;
	transition: all .25s ease;
	border:1px solid rgba(10,27,63,.05);
}
.service-card:hover {
	transform:translateY(-4px);
	box-shadow:0 24px 48px rgba(0,0,0,.16);
}
.service-img img {
	width:100%;
	height:220px;
	object-fit:cover;
	display:block;
}
.service-body {
	padding:1.25rem 1.25rem 1rem;
}
.service-body h3 {
	font-size:1.1rem;
	color:var(--clr-bg-dark);
	margin-bottom:.5rem;
}
.service-body p {
	font-size:.9rem;
	color:#475569;
	min-height:60px;
}
.service-link {
	display:inline-flex;
	align-items:center;
	font-size:.9rem;
	font-weight:600;
	color:var(--clr-bg-dark);
	text-decoration:none;
	position:relative;
}
.service-link i {
	font-size:1.2rem;
}
.service-link:hover {
	color:var(--clr-accent);
}

/* =========================
   WHY CHOOSE US
   ========================= */
#why {
	background: var(--clr-bg-dark);
	position:relative;
}
.why-overlay {
	position:absolute;
	inset:0;
	background: radial-gradient(circle at 20% 20%, rgba(124,255,154,.15) 0%, rgba(10,27,63,0) 60%);
}
#why .section-title .title span {
	color: var(--clr-accent);
}
.why-list .why-icon {
	width:44px;
	height:44px;
	min-width:44px;
	border-radius: var(--radius-md);
	background: rgba(124,255,154,.12);
	color: var(--clr-accent);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1rem;
	margin-right:1rem;
	border:1px solid rgba(124,255,154,.4);
	box-shadow:0 16px 32px rgba(0,0,0,.6);
}

/* stats */
.stats-grid .stats-card {
	background:var(--clr-bg-darker);
	border-radius:var(--radius-lg);
	padding:1.25rem .75rem;
	box-shadow:0 20px 40px rgba(0,0,0,.7);
	border:1px solid rgba(124,255,154,.2);
}
.stats-value {
	font-family: "Rajdhani", sans-serif;
	font-weight:700;
	font-size:1.8rem;
	line-height:1.1;
	color:var(--clr-accent);
}
.stats-label {
	font-size:.8rem;
	color:#fff;
	opacity:.8;
}

/* =========================
   ACHIEVEMENTS
   ========================= */
.achv-card {
	background:#fff;
	border-radius:var(--radius-lg);
	padding:1.5rem 1rem;
	border:1px solid rgba(10,27,63,.07);
	transition:all .25s ease;
}
.achv-card:hover {
	box-shadow:0 24px 48px rgba(0,0,0,.12);
	transform:translateY(-4px);
}
.achv-icon {
	font-size:2rem;
	color:var(--clr-bg-dark);
}
.achv-number {
	font-size:1.5rem;
	font-weight:700;
	color:var(--clr-bg-dark);
	margin-bottom:.25rem;
	font-family:"Rajdhani",sans-serif;
}
.achv-label {
	font-size:.9rem;
	color:#475569;
	margin-bottom:0;
}

/* =========================
   GALLERY
   ========================= */
.gallery-card {
	position:relative;
	overflow:hidden;
	border-radius:var(--radius-md);
	cursor:pointer;
}
.gallery-img {
	width:100%;
	height:200px;
	object-fit:cover;
	transition:all .4s ease;
	border-radius:var(--radius-md);
}
.gallery-card:hover .gallery-img {
	transform:scale(1.07);
	box-shadow:0 24px 48px rgba(0,0,0,.35);
}


/* ---- Lightbox styles ---- */
.lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	padding: 1rem;
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease;
}

.lightbox-overlay.active {
	opacity: 1;
	visibility: visible;
}

.lightbox-content {
	position: relative;
	max-width: 90vw;
	max-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lightbox-content img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
	border-radius: .5rem;
	box-shadow: 0 30px 60px rgba(0,0,0,.8);
	border: 2px solid rgba(124,255,154,.4); /* matches your accent */
	background-color: #000;
}

.lightbox-close {
	position: absolute;
	top: -2.5rem;
	right: 0;
	background: var(--clr-accent, #7CFF9A);
	color: #000;
	border: 0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 20px 40px rgba(0,0,0,.6);
	cursor: pointer;
}

@media(max-width: 576px){
	.lightbox-close {
		top: -2rem;
		right: -0.5rem;
	}
}

/* =========================
   CONTACT
   ========================= */
.contact-card,
.contact-info {
	background:#fff;
	border:1px solid rgba(10,27,63,.07);
}
.contact-card h4,
.contact-info h4 {
	font-size:1.1rem;
}
.form-control,
.form-select {
	border-radius: var(--radius-md);
	border:1px solid #cbd5e1;
	padding:.75rem 1rem;
	font-size:.9rem;
}
.form-control:focus,
.form-select:focus {
	border-color:var(--clr-accent);
	box-shadow:0 0 0 .25rem rgba(124,255,154,.4);
}
.info-icon {
	width:42px;
	height:42px;
	min-width:42px;
	border-radius:var(--radius-md);
	background:var(--clr-bg-dark);
	color:var(--clr-accent);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1rem;
	box-shadow:0 16px 32px rgba(0,0,0,.4);
}
.contact-info h5 {
	color:var(--clr-bg-dark);
	font-size:.95rem;
}
.contact-info a,
.contact-info p {
	font-size:.9rem;
	color:#1e293b;
}

/* =========================
   MAP
   ========================= */
.map-wrapper .ratio {
	border:0;
}
.map-wrapper iframe {
	border:0;
	filter: grayscale(10%) contrast(1.1) brightness(.95);
}

/* =========================
   FOOTER
   ========================= */
.footer-area {
	background: var(--clr-bg-darker);
	font-size:.9rem;
	position:relative;
}
.footer-area::before{
	content:"";
	position:absolute;
	inset:0;
	background: radial-gradient(circle at 10% 10%, rgba(124,255,154,.15) 0%, rgba(7,19,44,0) 60%);
}
.footer-head {
	color:var(--clr-accent);
	font-size:1.1rem;
	font-family:"Rajdhani",sans-serif;
}
.footer-text {
	color:#cbd5e1;
	font-size:.9rem;
	line-height:1.5;
}
.footer-links li {
	margin-bottom:.5rem;
}
.footer-links a {
	color:#fff;
	text-decoration:none;
	font-size:.9rem;
	display:inline-flex;
	align-items:flex-start;
	line-height:1.4;
}
.footer-links a i {
	color:var(--clr-accent);
	font-size:.8rem;
	margin-right:.4rem;
	margin-top:.2rem;
}
.footer-links a:hover {
	color:var(--clr-accent);
}
.footer-contact li {
	color:#fff;
}
.footer-contact i {
	color:var(--clr-accent);
}
.footer-divider {
	border-color:rgba(255,255,255,.1);
}
.footer-area .smalltext {
	color:#94a3b8;
	font-size:.8rem;
}

/* =========================
   FLOAT CALL BUTTON (MOBILE)
   ========================= */
.float-call-btn {
	position:fixed;
	right:16px;
	bottom:16px;
	z-index:999;
	background:var(--clr-accent);
	color:#000;
	width:52px;
	height:52px;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:1.3rem;
	box-shadow:0 20px 40px rgba(0,0,0,.4);
	text-decoration:none;
	animation:pulse 2s infinite;
}
@keyframes pulse {
	0% { box-shadow:0 0 0 0 rgba(124,255,154,.6); }
	70% { box-shadow:0 0 0 20px rgba(124,255,154,0); }
	100% { box-shadow:0 0 0 0 rgba(124,255,154,0); }
}
@media(min-width:992px){
	.float-call-btn { display:none; }
}

/* =========================
   SCROLL ANIMATIONS (simple fade/slide)
   ========================= */
.reveal {
	opacity:0;
	transform:translateY(30px);
	transition:all .7s cubic-bezier(.16,1,.3,1);
}
.reveal.reveal-visible{
	opacity:1;
	transform:none;
}


/* =========================
   FLOATING CONTACT BUTTONS
   ========================= */

.fab-wrapper {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 11000;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Base button style */
.fab-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;

	min-width: 52px;
	height: 52px;
	padding: 0 14px;

	border-radius: 999px;
	border: 2px solid rgba(124,255,154,.6);
	box-shadow: 0 24px 48px rgba(0,0,0,.6);

	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	color: #000;
	background-color: var(--clr-accent, #7CFF9A);

	animation: fabPulse 2s infinite;
	transition: all .25s ease;
}

/* Icon (left) */
.fab-btn i {
	font-size: 1.2rem;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Label text */
.fab-label {
	font-size: .8rem;
	font-weight: 600;
	color: #000;
	white-space: nowrap;
}

/* Hover / desktop micro interaction */
.fab-btn:hover {
	transform: translateY(-2px) scale(1.03);
	box-shadow: 0 32px 60px rgba(0,0,0,.75);
}

/* --- Variant: CALL --- */
.fab-call {
	background-color: var(--clr-accent, #7CFF9A);
	color: #000;
	border-color: rgba(124,255,154,.6);
}
.fab-call i {
	color:#000;
}

/* --- Variant: WHATSAPP --- */
.fab-whatsapp {
	background-color: #25D366;
	border-color: rgba(255,255,255,.4);
	color: #fff;
}
.fab-whatsapp .fab-label {
	color: #fff;
}
.fab-whatsapp i {
	color: #fff;
}

/* Pulse glow animation */
@keyframes fabPulse {
	0% {
		box-shadow: 0 0 0 0 rgba(124,255,154,.55), 0 24px 48px rgba(0,0,0,.6);
	}
	70% {
		box-shadow: 0 0 0 18px rgba(124,255,154,0), 0 24px 48px rgba(0,0,0,.6);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(124,255,154,0), 0 24px 48px rgba(0,0,0,.6);
	}
}

/* ---------------------------------
   MOBILE EXPERIENCE (super important)
   --------------------------------- */

/* On small screens:
   - Make it a bottom dock, 2 buttons side by side, full thumb width
   - Raise it a bit above screen edge for safe area and navbars
*/
@media (max-width: 576px) {

	.fab-wrapper {
		left: 0;
		right: 0;
		bottom: 12px;
		padding: 0 12px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		pointer-events: none; /* so only buttons are clickable, wrapper itself isn't blocking page */
	}

	.fab-btn {
		flex: 1 1 auto;
		min-width: auto;
		height: 48px;
		padding: 0 12px;
		border-radius: 999px;
		font-size: .9rem;
		justify-content: center;
		pointer-events: auto; /* make button clickable again */
		box-shadow: 0 16px 32px rgba(0,0,0,.7);
	}

	.fab-btn i {
		font-size: 1.1rem;
	}

	.fab-label {
		font-size: .8rem;
	}

	/* Softer pulse on mobile so it doesn't look too loud */
	@keyframes fabPulse {
		0% {
			box-shadow: 0 0 0 0 rgba(124,255,154,.45), 0 16px 32px rgba(0,0,0,.7);
		}
		70% {
			box-shadow: 0 0 0 14px rgba(124,255,154,0), 0 16px 32px rgba(0,0,0,.7);
		}
		100% {
			box-shadow: 0 0 0 0 rgba(124,255,154,0), 0 16px 32px rgba(0,0,0,.7);
		}
	}
}

/* Hide your old single .float-call-btn bubble on all screens now,
   since we have a better version */
.float-call-btn {
	display: none !important;
}




/* ===== Utility tweaks ===== */
#achievements .achv-card,
#service .service-card,
#gallery .gallery-card,
#why .stats-card,
#contact .contact-card,
#contact .contact-info,
#about .about-img-wrap,
#about .contact-mini > div {
	/* start hidden for scroll reveal */
}

@media(max-width:1022px)
{
    .mb-ds-nn1{
        display:none!important;
    }
}

@media(max-width:420px)
{
    .mb-ds-nn2{
        display:none!important;
    }
    .mb-tx-cntr{
        text-align:center;
        justify-content: center;
        width: 100%;
    }
}