/* ==========================================================================
   RETAIL CLOUDS — SITE STYLESHEET (Green Theme)
   Single source of truth for Header, Footer and Home page styles.
   Loaded on every page via: <link rel="stylesheet" href="/css/homePage.css">

   Structure:
     1. CSS Variables (:root)
     2. Base / reset
     3. Navbar & header
     4. Mobile off-canvas menu
     5. Dropdowns / mega menu
     6. Buttons
     7. Chatbox widget
     8. Hero section
     9. Brand strip
    10. Module cards
    11. Hub diagram
    12. Security / "why us" section
    13. Process timeline
    14. CTA banner
    15. Testimonials / feedback carousel
    16. FAQ accordion
    17. Footer
    18. Misc components (modals, badges, utilities)
    19. Scroll-reveal animation hooks
    20. RESPONSIVE — mobile-first, organized by breakpoint
    21. Accessibility (reduced motion / print)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS VARIABLES
   One canonical definition. Previously this was declared three different
   times (header, and twice in this file) with mismatched values and a
   syntax error ("- -primary-color" instead of "--primary-color") that made
   the whole block invalid, which is why colors/spacing/shadows looked
   inconsistent across the site. Every variable actually used anywhere in
   the header/footer/home markup is defined here.
   -------------------------------------------------------------------------- */
:root {
	--primary-color: #7F9A81;
	--primary-dark: #647A66;
	--primary-mid: #A6B8A7;
	--primary-light: #EEF3EE;
	--secondary-color: #556B57;
	--accent-color: #7F9A81;

	--text-color: #2E362F;   /* alias kept for older rules that reference --text-color */
	--text-dark: #2E362F;
	--text-muted: #6E746F;

	--border-soft: #E2EAE3;
	--light-bg: #F8FAF7;

	--transition: .25s ease;
	--border-radius: 12px;
	--box-shadow: 0 12px 30px rgba(127, 154, 129, .12);
}

/* --------------------------------------------------------------------------
   2. BASE / RESET
   -------------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
		Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
		'Helvetica Neue', sans-serif;
	font-weight: 600;
	color: var(--text-color);
	line-height: 1.6;
}

.fs-13 {
	font-size: 13px;
}

.anchor-hover:hover {
	text-decoration: underline !important;
}

.news-item p, .news-item h6, .news-item small {
	word-wrap: break-word;
	white-space: normal;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.focus-visible:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. NAVBAR & HEADER
   -------------------------------------------------------------------------- */
.navbar {
	transition: var(--transition);
	padding-top: .6rem;
	padding-bottom: .6rem;
	background: #ffffff;
	box-shadow: 0 8px 28px rgba(127, 154, 129, .08);
	backdrop-filter: blur(12px);
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	z-index: 1030 !important;
}

/* GLOBAL FIXED-NAVBAR OFFSET
   .navbar is position:fixed, so it's removed from normal document flow and
   reserves no space for itself. Without compensation, every page's content
   renders underneath it. This single rule (loaded on every page via
   homePage.css) reserves that space globally so individual pages never have
   to remember to do it themselves.

   IMPORTANT: --navbar-height is NOT a fixed guess per breakpoint anymore.
   It is set dynamically in JS (see HeaderRetailclouds.jsp) to the navbar's
   *actual* measured offsetHeight, on load/resize and whenever the navbar's
   own size changes (font load, text wrap, zoom, content differences on
   sub-pages, etc). That's what removes the gap/overlap: the padding now
   always matches reality instead of a hardcoded 138/106/88px guess that
   only happened to be right for one exact rendering condition.
   The px fallback below only applies for the split-second before JS runs
   on first paint, or if JS is somehow blocked. */
body {
	padding-top: var(--navbar-height, 138px);
}

.brand-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
}

.brand-icon {
	width: 80px;
	height: 55px;
	object-fit: contain;
	transition: var(--transition);
}

.border-botom {
	border-bottom: 1px solid rgb(255 255 255 / 35%) !important;
}

.brand-name {
	letter-spacing: .3px;
	color: #2E4632;
}

.rd-img {
	width: 400px;
	height: auto;
	object-fit: contain;
}

.nav-link {
	color: #384B39;
	font-weight: 600;
	padding: .9rem 1rem !important;
	transition: var(--transition);
}

.nav-link:hover, .nav-link:focus {
	color: var(--primary-color);
}

.nav-item.dropdown-open > .nav-link {
	color: var(--primary-color) !important;
}

/* --------------------------------------------------------------------------
   4. MOBILE OFF-CANVAS MENU
   -------------------------------------------------------------------------- */
.mobile-menu-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .5);
	z-index: 1040;
	display: none;
}

.mobile-menu-backdrop.show {
	display: block;
}

.mobile-menu-container {
	position: fixed;
	top: 0;
	left: -100%;
	width: 85%;
	max-width: 360px;
	height: 100vh;
	background: #FCFDFC;
	z-index: 1050;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	transition: left .3s ease;
	box-shadow: 2px 0 10px rgba(0, 0, 0, .15);
	padding: 1rem;
	border-right: 1px solid #E7ECE7;
}

.mobile-menu-container.show {
	left: 0;
}

.mobile-menu-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #eee;
	padding-bottom: 1rem;
}

.mobile-close-btn {
	font-size: 1.5rem;
	background: none;
	border: none;
	color: var(--text-color);
	padding: 8px;
	line-height: 1;
}

.mobile-menu-item {
	padding: 12px 0;
	border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-item:last-child {
	border-bottom: none;
}

.mobile-menu-item:hover {
	background: #F4F7F4;
}

.mobile-menu-toggle {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	min-height: 44px; /* touch target */
	background: none;
	border: none;
	text-align: left;
	padding: 0;
	font-weight: 600;
	color: var(--text-color);
}

.mobile-menu-toggle i {
	margin-left: auto;
}

.mobile-submenu {
	padding-left: 1.4rem;
	display: none;
}

.mobile-submenu.show {
	display: block;
}

.mobile-submenu-item {
	padding: 8px 0;
}

.mobile-submenu-link {
	color: #555;
	text-decoration: none;
	font-size: 14px !important;
	display: block;
	padding: 6px 0;
}

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

/* --------------------------------------------------------------------------
   5. DROPDOWNS / MEGA MENU (desktop)
   -------------------------------------------------------------------------- */
.dropdown-toggle::after {
	content: none !important;
}

.nav-item.dropdown {
	position: relative;
}

.dropdown-menu-custom {
	display: none;
	position: absolute;
	right: 0;
	top: 100%;
	background-color: #fff;
	box-shadow: var(--box-shadow);
	min-width: 200px;
	padding: 0;
	z-index: 1002;
	border-radius: 20px;
	overflow: hidden;
	margin-top: 5px;
	border: none;
}

.dropdown-menu-custom li a {
	padding: 10px 16px;
	display: block;
	color: var(--text-color);
	text-decoration: none;
	transition: var(--transition);
}

.dropdown-menu-custom li a:hover {
	background-color: var(--light-bg);
}

.user-menu .dropdown-menu-custom {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.user-menu:hover .dropdown-menu-custom {
	display: block;
	opacity: 1;
	visibility: visible;
}

.fullscreen-dropdown {
	position: absolute;
	left: 0;
	width: 100%;
	box-shadow: 0 18px 45px rgba(127, 154, 129, .14);
	border: 1px solid #e3e6e8;
	overflow-y: auto;
	max-height: 80vh;
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
	z-index: 1001;
	background: linear-gradient(to bottom, #e9edef 0%, #f5f7f8 45%, #ffffff 100%);
	padding: 24px;
	top: 100%;
	border-radius: 0 0 12px 12px;
}

.menu-col {
	padding: 18px;
	border-radius: 18px;
	transition: var(--transition);
}

.menu-col:hover {
	background: #F4F7F4;
}

.menu-col a.menu-title {
	font-size: 16px;
	font-weight: 700;
	color: #334636;
	text-decoration: none;
	display: block;
	margin-bottom: 4px;
}

.menu-col a.menu-title:hover {
	color: var(--primary-color);
}

.menu-col p {
	font-size: 13px;
	color: #7A867A;
	margin-bottom: 2px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   -------------------------------------------------------------------------- */
.demoBtn {
	background: var(--primary-color) !important;
	border: none;
	border-radius: 40px !important;
	padding: 12px 26px;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(127, 154, 129, .18);
	transition: var(--transition);
}

.demoBtn:hover {
	background: var(--primary-dark) !important;
	transform: translateY(-3px);
}

.signInBtn {
	color: #374638;
	font-weight: 600;
	background: none;
	border: none;
}

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

#getDemoBtn, #scheduleMyDemoBtn {
	transition: var(--transition);
}

#getDemoBtn:hover, #scheduleMyDemoBtn:hover {
	transform: scale(1.05);
	cursor: pointer;
}

.btn-primary-green {
	background: var(--primary-color);
	border: none;
	color: #fff;
	border-radius: 8px;
	padding: 13px 26px;
	font-weight: 600;
	transition: var(--transition);
}

.btn-primary-green:hover {
	background: var(--secondary-color);
	color: #fff;
	transform: translateY(-2px);
}

.btn-primary-green:focus {
	outline: 3px solid var(--primary-mid);
	outline-offset: 3px;
}

.btn-outline-green {
	background: #fff;
	border: 1px solid var(--border-soft);
	color: var(--text-dark);
	border-radius: 8px;
	padding: 13px 22px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	transition: var(--transition);
}

.btn-outline-green:hover {
	background: var(--light-bg);
	border-color: var(--primary-color);
	color: var(--secondary-color);
}

.btn-white-green {
	background: #fff;
	color: var(--primary-color);
	font-weight: 700;
	border-radius: 8px;
	padding: 13px 26px;
	border: none;
	transition: var(--transition);
}

.btn-white-green:hover {
	background: var(--primary-light);
	color: var(--primary-dark);
	transform: translateY(-2px);
}

.hero-buttons .btn {
	white-space: nowrap;
}

.form-control:focus, .form-select:focus {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 .2rem rgba(127, 154, 129, .2);
}

.icon-circle {
	background: linear-gradient(135deg, var(--primary-mid), var(--primary-dark));
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: var(--transition);
}

.icon-circle:hover {
	transform: scale(1.1);
}

/* --------------------------------------------------------------------------
   7. CHATBOX WIDGET
   -------------------------------------------------------------------------- */
.chatbox-container-custom {
	position: fixed;
	bottom: 70px;
	right: 20px;
	width: 360px;
	height: 480px;
	max-width: 95vw;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: var(--border-radius);
	z-index: 9999;
	display: none;
	overflow: hidden;
	box-shadow: var(--box-shadow);
}

.chatbox-header {
	font-size: 15px;
	padding: 10px;
	background: var(--primary-color);
	color: #fff;
}

.chatbox-body {
	height: calc(100% - 48px);
	overflow: auto;
	padding: 10px;
	font-size: 14px;
}

.chatbox-toggle-button {
	position: fixed;
	bottom: 10px;
	right: 20px;
	z-index: 9998;
	border-radius: 50px;
	padding: 10px 15px;
	background: var(--primary-color);
	color: black !important;
	border: none;
	transition: var(--transition);
	box-shadow: 0 10px 25px rgba(127, 154, 129, .25);
}

.chatbox-toggle-button:hover {
	background: var(--primary-dark)!important;
	transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   8. HERO SECTION
   -------------------------------------------------------------------------- */
.hero-section-new {
	background: linear-gradient(180deg, var(--light-bg) 0%, #FFFFFF 100%);
	padding: 0 0 40px;
	overflow: hidden;
	min-height: 640px;
	display: flex;
	align-items: center;
}

.eyebrow-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--primary-light);
	color: #000;
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 6px 14px;
	border-radius: 30px;
	margin-bottom: 14px;
}

.section-eyebrow {
	color: var(--primary-color);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	margin-bottom: 6px;
	display: block;
}

.hero-heading {
	font-size: 52px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--text-dark);
}

.hero-heading .accent-line {
	color: var(--primary-dark);
	display: block;
}

.hero-subtext {
	color: var(--text-muted);
	font-size: 17px;
	line-height: 1.7;
	max-width: 480px;
}

.hero-stats {
	display: flex;
	gap: 55px;
	margin-top: 34px;
	flex-wrap: wrap;
}

.hero-stats .stat-num {
	font-size: 26px;
	font-weight: 700;
	color: var(--primary-color);
}

.hero-stats .stat-lbl {
	font-size: 13px;
	color: var(--text-muted);
}

.hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dashboard-mock {
	width: 94% !important;
	max-width: 700px;
	height: auto;
	display: block;
	margin: 0 auto;
}

.hero-visual .phone-float {
	position: absolute;
	right: -6px;
	bottom: -30px;
	filter: drop-shadow(0 12px 24px rgba(127, 154, 129, .18));
}

.hero-badge-strip {
	margin-top: -63px;
	transform: translateX(-180px);
	background: #fff;
	border: 1px solid var(--border-soft);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(127, 154, 129, .10);
	padding: 14px 22px;
	display: flex;
	gap: 18px 30px;
	font-size: 13px;
	font-weight: 600;
	color: var(--text-dark);
}

.hero-badge-strip span i {
	color: var(--primary-color);
	margin-right: 6px;
}

.cards-badge-strip {
	margin-top: 20px;
	transform: none;
	background: #fff;
	border: 1px solid var(--border-soft);
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(127, 154, 129, .10);
	padding: 14px 22px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 18px 30px;
	font-size: 14px !important;
	font-weight: 600;
	color: var(--text-muted);
	width: 100%;
}

.cards-badge-strip span {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cards-badge-strip span i {
	color: var(--primary-color);
	font-size: 26px;
}

.cards-badge-strip small {
	line-height: 16px;
}

/* Float animation for hero visual */
@keyframes floatUpDown {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

.hero-visual img.dashboard-mock {
	animation: floatUpDown 3s ease-in-out infinite;
}

.hero-visual img.phone-float {
	animation: floatUpDown 6s ease-in-out infinite 1.2s;
}

/* --------------------------------------------------------------------------
   9. BRAND STRIP
   -------------------------------------------------------------------------- */
.brand-strip {
	background: var(--light-bg);
	padding: 10px 0;
	text-align: center;
}

.brand-strip .brand-logos {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 18px;
}

.brand-logo-card {
	background: #FCFDFC;
	border: 1px solid var(--border-soft);
	border-radius: 10px;
	width: 142px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 8px;
	transition: transform .25s ease, box-shadow .25s ease;
}

.brand-logo-card img {
	width: 100%;
	object-fit: contain;
	display: block;
}

.brand-logo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(127, 154, 129, .12);
}

/* --------------------------------------------------------------------------
   10. MODULE CARDS
   -------------------------------------------------------------------------- */
.module-card {
	background: transparent;
	border: 1px solid var(--border-soft);
	border-radius: var(--border-radius);
	padding: 22px;
	height: 100%;
	transition: all .35s ease;
	box-shadow: 0 3px 10px rgba(0, 0, 0, .05);
}

.animated-gradient {
	background: linear-gradient(45deg, #ffffff, #eef3ee, #ffffff, #dfe9df);
	background-size: 400% 400%;
	animation: gradientMove 8s ease infinite;
}

@keyframes gradientMove {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.module-card:hover {
	animation: floating 1.5s ease-in-out infinite;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .08), 0 18px 35px rgba(0, 0, 0, .08);
}

@keyframes floating {
	0% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
	100% { transform: translateY(0); }
}

.module-icon-wrap {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
}

.module-icon-wrap i {
	font-size: 24px;
	color: #4F7F5A;
}

.module-card h3 {
	font-size: 16px;
	font-weight: 700;
	color: var(--text-dark);
}

.module-card p {
	font-size: 13.5px;
	color: var(--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   11. HUB DIAGRAM
   -------------------------------------------------------------------------- */
.hub-diagram {
	position: relative;
	width: 100%;
	max-width: 424px;
	aspect-ratio: 1 / 1;
	margin-top: -28%;
	margin-left: 44px;
}

.hub-diagram img {
	transition: transform .4s ease;
}

.hub-diagram img:hover {
	transform: translateY(-12px) scale(1.05);
}

.hub-callout {
	background: var(--primary-light);
	border-radius: var(--border-radius);
	padding: 20px 22px;
	width: 39%;
	margin-left: auto;
	margin-top: -26%;
}

.hub-callout h3 {
	font-size: 20px;
	font-weight: 700;
	color: #000;
	margin-bottom: 4px;
}

.hub-callout p {
	font-size: 14.5px;
	color: var(--text-muted);
	margin-bottom: 6px;
}

.hub-callout a {
	color: var(--primary-color);
	font-weight: 700;
	font-size: 13.5px;
	text-decoration: none;
}

.hub-points {
	list-style: none;
	padding: 0;
	margin: 18px 0 25px;
}

.hub-points li {
	position: relative;
	padding-left: 28px;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--text-muted);
	line-height: 1.5;
}

.hub-points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: #4f8a5b;
	font-weight: 700;
	font-size: 18px;
}

.hub-header {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 15px;
}

.hub-icon {
	width: 58px;
	height: 58px;
	background: #5d8463;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.hub-icon i {
	color: #fff;
	font-size: 28px;
}

/* --------------------------------------------------------------------------
   12. SECURITY / "WHY US" SECTION
   -------------------------------------------------------------------------- */
.security-visual {
	position: relative;
	width: 100%;
	max-width: 450px;
	margin: 0 auto;
	overflow: hidden;
}

.security-visual .shield-center {
	display: block;
	margin: 0 auto;
}

.security-visual img {
	transition: transform .4s ease;
}

.security-visual img:hover {
	transform: translateY(-12px) scale(1.05);
}

.check-list-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 15px;
	color: var(--text-dark);
}

.check-list-item i {
	color: var(--primary-color);
	background: var(--primary-light);
	border-radius: 50%;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	flex-shrink: 0;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   13. PROCESS TIMELINE
   -------------------------------------------------------------------------- */
.process-track {
	position: relative;
	display: flex;
	justify-content: space-between;
	margin-top: 40px;
}

.process-track::before {
	content: "";
	position: absolute;
	top: 30px;
	left: 8%;
	right: 8%;
	height: 0;
	border-top: 2px dashed #cfe1d6;
	z-index: 0;
}

.process-step {
	position: relative;
	z-index: 1;
	text-align: center;
	flex: 1;
	padding: 0 8px;
}

.process-step .step-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--primary-light);
	color: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	margin: 0 auto 14px;
	transition: transform .3s ease, background .3s ease, color .3s ease;
}

.process-step:hover .step-icon {
	background: var(--secondary-color);
	color: #fff;
	transform: scale(1.08);
}

.process-step h4 {
	font-size: 15px;
	font-weight: 700;
	color: var(--text-dark);
	margin-bottom: 4px;
}

.process-step p {
	font-size: 12.5px;
	color: var(--text-muted);
	max-width: 150px;
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   14. CTA BANNER
   -------------------------------------------------------------------------- */
.cta-banner {
	background: var(--primary-color) !important;
	border-radius: 18px;
	padding: 46px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	overflow: hidden;
	position: relative;
}

.cta-banner h2 {
	color: #fff;
	font-size: 26px;
	font-weight: 700;
	margin-bottom: 6px;
}

.cta-banner p {
	color: var(--primary-light);
	margin: 0;
}

.cta-banner .rocket-img {
	filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .15));
}

/* --------------------------------------------------------------------------
   15. TESTIMONIALS / FEEDBACK CAROUSEL
   -------------------------------------------------------------------------- */
.feedback-card {
	max-width: 320px;
	margin: 0 auto;
	border-radius: 16px;
	height: 340px !important;
	transition: transform .35s ease, box-shadow .35s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.feedback-card:hover {
	transform: translateY(-12px);
	box-shadow: 0 18px 30px rgba(0, 0, 0, .15);
	cursor: pointer;
}

.feedback-content {
	padding: 20px 18px;
	text-align: center;
	color: var(--text-muted) !important;
}

.feedback-content h5 {
	margin-bottom: 12px;
}

.feedback-content .text-muted {
	margin-top: 3px;
	margin-bottom: 0;
	font-size: 16px;
}

.feedback-video {
	width: 100%;
	border-radius: 8px;
	margin: 12px 0 8px 0;
}

.owl-carousel .owl-item .feedback-avatar {
	width: 60px;
	height: 60px;
	max-width: 60px;
	min-width: 60px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center;
	display: block;
	margin: 0 auto 16px;
	overflow: hidden;
}

.custom-nav {
	width: 30px;
	height: 26px;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	border: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
	cursor: pointer;
}

.custom-nav i {
	font-size: 18px;
}

.owl-prev.custom-nav {
	left: -25px;
}

.owl-next.custom-nav {
	right: -25px;
}

.icon-circle-static {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--primary-color);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.icon-circle-static i {
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

/* --------------------------------------------------------------------------
   16. FAQ ACCORDION
   -------------------------------------------------------------------------- */
.accordion {
	--bs-accordion-border-width: 0;
	--bs-accordion-border-color: transparent;
}

.accordion-item {
	border: none !important;
	box-shadow: none !important;
}

.accordion-button {
	background-color: var(--primary-light);
	color: #111827;
	font-weight: 600;
	font-size: 16px;
	border-radius: 6px;
	border: none !important;
	box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
	background-color: var(--primary-color);
	color: #ffffff;
	box-shadow: inset 0 -1px 0 var(--bs-accordion-border-color);
}

.accordion-button::after {
	filter: brightness(0);
}

.accordion-button:focus {
	box-shadow: none;
	border-color: transparent;
}

.accordion-collapse {
	border: none !important;
}

.accordion-body {
	color: var(--text-muted);
	font-size: 15px;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   17. FOOTER
   -------------------------------------------------------------------------- */
.footer-new {
	background: var(--light-bg) !important;
	color: #000;
	padding: 45px 0 0;
}

.footer-new h5 {
	color: #000;
	font-weight: 700;
	font-size: 18px;
	margin-bottom: 20px;
}

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

.footer-new ul li {
	margin-bottom: 10px;
}

.footer-new a {
	text-decoration: none;
	font-size: 14px;
	color: #333;
	transition: var(--transition);
}

.footer-new a:hover {
	color: var(--primary-color);
	padding-left: 6px;
}

.footer-new .footer-brand-desc {
	color: #444;
	font-size: 15px;
	line-height: 1.8;
}

.footer-social a {
	width: 30px;
	height: 30px;
	transition: var(--transition);
	border-radius: 50%;
	background: var(--primary-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 8px;
	color: #000 !important;
}

.footer-social a i {
	font-size: 18px;
	line-height: 1;
}

.footer-social a:hover {
	background: var(--primary-color);
	color: #fff !important;
	transform: translateY(-4px);
}

.newsletter-input-group {
	display: flex;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--border-soft);
}

.newsletter-input-group input {
	border: none;
	background: transparent;
	color: var(--text-dark);
	padding: 10px 12px;
	flex: 1;
	font-size: 13px;
}

.newsletter-input-group input::placeholder {
	color: var(--text-muted);
}

.newsletter-input-group button {
	background: var(--primary-color);
	transition: var(--transition);
	border: none;
	color: #fff;
	padding: 0 16px;
}

.newsletter-input-group button:hover {
	background: var(--primary-dark);
}

.footer-bottom-bar {
	border-top: 1px solid rgba(255, 255, 255, .15);
	padding: 14px 0;
	font-size: 12.5px;
	color: #fff;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	background: var(--primary-color);
}

.footer-bottom-bar a {
	color: #fff;
	margin-right: 20px;
	transition: var(--transition);
}

.footer-bottom-bar a:hover {
	color: var(--primary-light);
}

/* --------------------------------------------------------------------------
   18. MISC COMPONENTS
   -------------------------------------------------------------------------- */
.new-badge {
	position: absolute;
	top: 10px;
	right: 12px;
	background: var(--secondary-color);
	color: #fff;
	padding: 3px 10px;
	border-radius: 7px;
	font-size: 11px;
	font-weight: 700;
	font-family: inherit;
	min-width: 42px;
	text-align: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.modal-header {
	display: flex;
	justify-content: flex-end;
}

.close-btn {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
	margin-left: auto;
	flex: 0 0 40px;
}

.close-btn i {
	font-size: 18px;
	line-height: 1;
}

#ContactUs .modal-content {
	height: auto;
}

/* --------------------------------------------------------------------------
   19. SCROLL-REVEAL ANIMATION HOOKS
   (JS toggles .animate-in via IntersectionObserver — unchanged)
   -------------------------------------------------------------------------- */
.feature-card, .zoom-section, .stat-box, .module-card, .process-step {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .6s ease, transform .6s ease;
}

.feature-card.animate-in, .zoom-section.animate-in, .stat-box.animate-in,
.module-card.animate-in, .process-step.animate-in {
	opacity: 1;
	transform: translateY(0);
}

/* ==========================================================================
   20. RESPONSIVE — mobile-first, organized by breakpoint
   Bootstrap 5 breakpoints used throughout: 576 / 768 / 992 / 1200
   ========================================================================== */

/* ---------- ≥1200px : large desktop tweaks ---------- */
@media (min-width: 1200px) {
	.eyebrow-badge {
		font-size: 20px !important;
	}
}

/* ---------- ≥992px : desktop nav / mega-menu behavior ---------- */
@media (min-width: 992px) {
	.dashboard-mock {
		width: 100%;
		max-width: 700px;
	}

	.nav-item.dropdown {
		position: static !important;
	}

	.fullscreen-dropdown {
		position: absolute;
		left: 0;
		width: 100%;
		z-index: 1001;
	}

	.nav-item.dropdown.dropdown-open .fullscreen-dropdown {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.nav-item.dropdown.dropdown-open .nav-link {
		color: var(--primary-color);
	}

	.dropdown-toggle::after {
		transition: transform .3s ease;
		display: inline-block;
		margin-left: .3em;
		content: "";
		border-top: .3em solid;
		border-right: .3em solid transparent;
		border-bottom: 0;
		border-left: .3em solid transparent;
	}

	.navbar-nav.ms-auto {
		gap: 4px;
	}

	.nav-link {
		padding: .5rem .9rem !important;
	}
}

/* ---------- ≤991.98px : tablet & down (off-canvas mobile nav takes over) ---------- */
@media (max-width: 991.98px) {
	.navbar-nav {
		display: none;
	}

	.desktop-only {
		display: none !important;
	}

	.mobile-menu-container {
		display: block;
	}

	.fullscreen-dropdown {
		display: none !important;
	}

	.custom-nav {
		display: none;
	}

	/* Top padding no longer needed here — the global body padding-top
	   (see NAVBAR & HEADER section) now reserves space for the fixed
	   navbar at this breakpoint. */
	.hero-heading {
		font-size: 38px;
	}

	.hero-section-new {
		padding: 0 0 32px;
		min-height: 0;
	}

	.hero-visual {
		margin-top: 30px;
	}

	.hero-visual .phone-float {
		display: none;
	}

	.dashboard-mock {
		width: 100% !important;
		max-width: 560px;
		margin: 0 auto;
	}

	.hero-badge-strip {
		transform: none;
		margin-top: 20px;
	}

	/* Hub diagram */
	.hub-diagram {
		width: 90%;
		max-width: 360px;
		margin: 0 auto;
		display: block;
	}

	.hub-callout {
		width: 80%;
		margin: 20px auto 0;
	}

	/* Security section */
	.security-visual .shield-center {
		max-width: 340px;
	}

	.security-floating-card {
		position: static;
		margin-bottom: 10px;
		display: inline-flex;
	}

	/* Process timeline: stack instead of side-by-side */
	.process-track {
		flex-wrap: wrap;
		row-gap: 30px;
	}

	.process-track::before {
		display: none;
	}

	/* Chatbox */
	.chatbox-container-custom {
		width: 87vw;
		height: 540px;
		right: 10px;
		bottom: 70px;
	}

	.chatbox-toggle-button {
		right: 10px;
		bottom: 10px;
	}
}

/* ---------- ≤767.98px : tablets portrait / large phones ---------- */
@media (max-width: 767.98px) {
	.security-visual .shield-center {
		max-width: 280px;
	}

	.hub-diagram {
		margin-top: -12%;
	}

	.hero-stats {
		gap: 32px;
	}

	.cta-banner {
		padding: 34px 26px;
		text-align: center;
		justify-content: center;
	}

	.footer-bottom-bar {
		justify-content: center;
		text-align: center;
	}
}

/* ---------- ≤575.98px : phones ---------- */
@media (max-width: 575.98px) {
	.container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}

	.brand-icon {
		width: 56px;
		height: 40px;
	}

	.mobile-menu-container {
		width: 82%;
	}

	.chatbox-container-custom {
		height: 65vh;
	}

	.hero-heading {
		font-size: 30px;
	}

	/* Top padding no longer needed here — the global body padding-top
	   (see NAVBAR & HEADER section) now reserves space for the fixed
	   navbar at this breakpoint. */
	.hero-section-new {
		padding: 0 0 24px;
	}

	.hero-stats {
		gap: 24px;
		flex-wrap: wrap;
	}

	.hero-buttons {
		gap: 10px;
	}

	.hero-buttons .btn {
		padding: 11px 14px;
		font-size: 14px;
	}

	.dashboard-mock {
		width: 100% !important;
		max-width: 100%;
		margin: 0 auto;
	}

	.hero-badge-strip {
		display: none !important;
	}

	/* Hub diagram */
	.hub-diagram {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		display: block;
	}

	.hub-callout {
		width: 100%;
		margin: 20px 0 0;
		padding: 16px;
	}

	/* Security section */
	.security-visual .shield-center {
		width: 100%;
		max-width: 360px;
		margin: 0 auto;
	}

	/* Module cards: icon + title on one row, description below */
	.module-card {
		display: grid;
		grid-template-columns: 46px 1fr;
		column-gap: 12px;
	}

	.module-icon-wrap {
		grid-column: 1;
		grid-row: 1;
		margin-bottom: 0;
	}

	.module-card h3 {
		grid-column: 2;
		grid-row: 1;
		margin: 0;
		align-self: center;
	}

	.module-card p {
		grid-column: 1 / -1;
		margin-top: 14px;
	}

	.cta-banner {
		text-align: center;
		justify-content: center;
	}
}

/* ---------- ≤360px : very small phones ---------- */
@media (max-width: 360px) {
	.hero-buttons .btn {
		padding: 10px 10px;
		font-size: 13px;
	}

	.eyebrow-badge {
		font-size: 13px !important;
		padding: 5px 10px;
	}

	.brand-icon {
		width: 48px;
		height: 34px;
	}
}

/* --------------------------------------------------------------------------
   21. ACCESSIBILITY: reduced motion & print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

@media print {
	.navbar, .chatbox-container-custom, .chatbox-toggle-button,
	.mobile-menu-container, .mobile-menu-backdrop {
		display: none !important;
	}
}