/* ============================================
  			 DESIGN SYSTEM – VARIABLES
			============================================ */
		:root {
			--brand: #0174BB;
			--brand-dark: #015d96;
			--brand-light: #e8f4fd;
			--brand-glow: rgba(1, 116, 187, 0.15);
			--accent: #00aaff;
			--bg: #ffffff;
			--bg2: #f5f9fd;
			--bg3: #eaf3fb;
			--surface: #ffffff;
			--nav-bg: #ffffff;
			--topbar-bg: #f0f7fd;
			--border: #daeaf7;
			--text: #1a2535;
			--text2: #3d5166;
			--muted: #66788b;
			--shadow: rgba(1, 116, 187, 0.12);
			--mega-bg: #ffffff;
			--mega-border: #daeaf7;
			--item-hover: #f0f7fd;
			--font-head: 'Outfit', sans-serif;
			--font-body: 'Nunito Sans', sans-serif;
		}
		/* width */
::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #F5F3EE; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #3380ed; 
  border-radius: 15px;
  border: 0.2px solid white;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

		::selection {
			background-color: #00b7ff;
			/* highlight color */
			color: #000000;
			/* text color */
		}

		[data-theme="dark"] {
			--bg: #080f1c;
			--bg2: #0d1629;
			--bg3: #111e35;
			--surface: #0d1629;
			--nav-bg: #080f1c;
			--topbar-bg: #060c17;
			--border: rgba(255, 255, 255, 0.07);
			--text: #e2eaf5;
			--text2: #a8bdd0;
			--muted: #66788b;
			--shadow: rgba(0, 0, 0, 0.5);
			--mega-bg: #0d1629;
			--mega-border: rgba(255, 255, 255, 0.07);
			--item-hover: rgba(1, 116, 187, 0.15);
		}

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

		html {
			scroll-behavior: smooth
		}

		body {
			font-family: var(--font-body);
			background: var(--bg2);
			color: var(--text);
			transition: background .3s, color .3s
		}

		a {
			text-decoration: none;
			color: inherit
		}

		ul {
			list-style: none
		}

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

		/* ============================================
   STICKY HEADER
============================================ */
		#site-header {
			position: sticky;
			top: 0;
			z-index: 9000;
			width: 100%;
			background: var(--nav-bg);
			transition: background .3s, box-shadow .3s
		}

		#site-header.scrolled {
			box-shadow: 0 4px 30px var(--shadow)
		}

		/* TOP BAR */
		.top-bar {
			background: var(--nav-bg);
			border-bottom: 1px solid var(--border);
			height: 36px;
			overflow: hidden;
			display: flex;
			align-items: center;
			padding: 0 32px;
			justify-content: space-between;
			font-size: 12px;
			transition: height .35s ease, opacity .35s ease, padding .35s ease, border-color .35s ease, background .3s;
			opacity: 1
		}

		#site-header.scrolled .top-bar {
			height: 0;
			opacity: 0;
			padding-top: 0;
			padding-bottom: 0;
			border-bottom-color: transparent
		}

		.top-bar-left {
			display: flex;
			align-items: center;
			gap: 20px;
			color: var(--muted)
		}

		.top-bar-left span {
			display: flex;
			align-items: center;
			gap: 5px
		}

		.top-bar-left i {
			color: var(--brand);
			font-size: 11px
		}

		.top-bar-left a {
			color: var(--muted);
			transition: color .2s
		}

		.top-bar-left a:hover {
			color: var(--brand)
		}

		.top-bar-right {
			display: flex;
			align-items: center
		}

		.top-bar-right a {
			color: var(--muted);
			font-size: 11.5px;
			padding: 0 11px;
			border-right: 1px solid var(--border);
			transition: color .2s;
			white-space: nowrap
		}

		.top-bar-right a:last-child {
			border-right: 0
		}

		.top-bar-right a:hover {
			color: var(--brand)
		}

		/* MARQUEE */
		.marquee-bar {
			background: var(--brand);
			height: 32px;
			display: flex;
			align-items: center;
			overflow: hidden;
			position: relative
		}

		.marquee-bar::before,
		.marquee-bar::after {
			content: '';
			position: absolute;
			top: 0;
			bottom: 0;
			width: 60px;
			z-index: 2;
			pointer-events: none
		}

		.marquee-bar::before {
			left: 0;
			background: linear-gradient(90deg, var(--brand), transparent)
		}

		.marquee-bar::after {
			right: 0;
			background: linear-gradient(-90deg, var(--brand), transparent)
		}

		.marquee-track {
			display: flex;
			white-space: nowrap;
			animation: mScroll 24s linear infinite
		}

		.marquee-bar:hover .marquee-track {
			animation-play-state: paused
		}

		@keyframes mScroll {
			0% {
				transform: translateX(0)
			}

			100% {
				transform: translateX(-50%)
			}
		}

		.marquee-item {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-size: 12px;
			color: rgba(255, 255, 255, 0.9);
			padding: 0 28px;
			font-family: var(--font-body)
		}

		.marquee-item a {
			color: #ffe46b;
			font-weight: 700;
			transition: color .2s
		}

		.marquee-item a:hover {
			color: #fff
		}

		.msep {
			color: rgba(255, 255, 255, 0.3);
			margin: 0 6px
		}

		/* MAIN NAV */
		.main-nav {
			height: 68px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 32px;
			background: var(--nav-bg);
			border-bottom: 1px solid var(--border);
			transition: background .3s, border-color .3s;
			position: relative
		}

		.nav-logo {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			margin-right: 36px
		}

		.nav-logo img {
			height: 44px;
			width: auto;
			object-fit: contain
		}

		.nav-menu {
			display: flex;
			align-items: center;
			flex: 1;
			min-width: 0
		}

		.nav-item {
			position: relative
		}

		.nav-link {
			display: flex;
			align-items: center;
			gap: 4px;
			padding: 0 15px;
			height: 68px;
			color: var(--text2);
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 600;
			letter-spacing: .3px;
			transition: color .2s;
			position: relative;
			white-space: nowrap
		}

		.nav-link::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			right: 50%;
			height: 3px;
			background: var(--brand);
			border-radius: 3px 3px 0 0;
			transition: left .25s, right .25s
		}

		.nav-item:hover>.nav-link,
		.nav-item:focus-within>.nav-link {
			color: var(--brand)
		}

		.nav-item:hover>.nav-link::after,
		.nav-item:focus-within>.nav-link::after {
			left: 12%;
			right: 12%
		}

		.nav-link .chev {
			font-size: 9px;
			color: var(--muted);
			transition: transform .2s, color .2s
		}

		.nav-item:hover>.nav-link .chev,
		.nav-item:focus-within>.nav-link .chev {
			transform: rotate(180deg);
			color: var(--brand)
		}

		.nav-right {
			margin-left: auto;
			display: flex;
			align-items: center;
			gap: 10px;
			flex-shrink: 0
		}


		.btn-demo {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			padding: 9px 22px;
			background: var(--brand);
			color: #fff;
			font-family: var(--font-head);
			font-size: 13.5px;
			font-weight: 700;
			border-radius: 8px;
			border: none;
			cursor: pointer;
			transition: background .2s, box-shadow .25s, transform .15s;
			box-shadow: 0 4px 18px rgba(1, 116, 187, 0.3);
			white-space: nowrap
		}

		.btn-demo:hover {
			background: var(--brand-dark);
			transform: translateY(-1px);
			color: #fff
		}

		 /* Headings inside mega menus (as separate "boxes") */
        .mega-col ul li.menu-heading {
            list-style: none;
            margin: 10px 0 6px;
            padding: 7px 10px;
            border-radius: 10px;
            border: 1px solid var(--border);
            background: var(--brand-light);
            color: var(--brand-dark);
            font-family: var(--font-head);
            font-size: 11px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 1.2px;
        }


		/* MEGA / SIMPLE DROPDOWNS */
		.mega-wrap,
		.mega-wrap1,
		.mega-wrap2 {
			position: absolute;
			top: calc(100% + 1px);
			width: max-content;
			max-width: min(960px, 95vw);
			background: var(--mega-bg);
			border: 1px solid var(--mega-border);
			border-radius: 0 0 16px 16px;
			box-shadow: 0 20px 60px var(--shadow);
			opacity: 0;
			visibility: hidden;
			transition: opacity .22s, transform .22s, visibility .22s;
			pointer-events: none;
			z-index: 9999;
			overflow: hidden
		}

		.mega-wrap {
			left: 208%;
			min-width: 720px;
			transform: translateX(-50%) translateY(8px)
		}

		.mega-wrap1 {
			left: 50%;
			min-width: 520px;
			transform: translateX(-50%) translateY(8px)
		}

		.mega-wrap2 {
			right: -450px;
			left: auto;
			min-width: 620px;
			transform: translateY(8px)
		}

		.nav-item:hover>.mega-wrap,
		.nav-item:focus-within>.mega-wrap {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
			pointer-events: all
		}

		.nav-item:hover>.mega-wrap1,
		.nav-item:focus-within>.mega-wrap1 {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
			pointer-events: all
		}

		.nav-item:hover>.mega-wrap2,
		.nav-item:focus-within>.mega-wrap2 {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			pointer-events: all
		}

		.mega-inner {
			display: flex
		}

		.mega-sidebar {
			width: 220px;
			flex-shrink: 0;
			background: var(--brand);
			padding: 28px 20px;
			display: flex;
			flex-direction: column;
			gap: 4px
		}

		.mega-sidebar-title {
			font-family: var(--font-head);
			font-size: 13px;
			font-weight: 700;
			color: rgba(255, 255, 255, 0.6);
			letter-spacing: 1.5px;
			text-transform: uppercase;
			margin-bottom: 12px;
			padding-bottom: 10px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.2)
		}

		.mega-sidebar p {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.75);
			line-height: 1.6;
			margin-bottom: 16px
		}

		.mega-sidebar-link {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 12px;
			font-size: 13px;
			color: rgba(255, 255, 255, 0.85);
			font-family: var(--font-body);
			border-radius: 8px;
			transition: background .18s, color .18s
		}

		.mega-sidebar-link i {
			font-size: 12px;
			opacity: .7
		}

		.mega-sidebar-link:hover {
			background: rgba(255, 255, 255, 0.15);
			color: #fff
		}

		.mega-sidebar-cta {
			margin-top: auto;
			padding-top: 16px;
			border-top: 1px solid rgba(255, 255, 255, 0.2)
		}

		.mega-sidebar-cta a {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			padding: 9px 14px;
			background: #fff;
			color: var(--brand);
			font-family: var(--font-head);
			font-size: 12px;
			font-weight: 700;
			border-radius: 6px;
			transition: background .2s
		}

		.mega-sidebar-cta a:hover {
			background: #e8f4fd
		}

		.mega-cols {
			flex: 1;
			padding: 24px 28px;
			display: flex;
			flex-wrap: wrap
		}

		.mega-col {
			flex: 1;
			min-width: 160px;
			padding: 0 16px
		}

		.mega-col+.mega-col {
			border-left: 1px solid var(--mega-border)
		}

		.mega-col-title {
			display: flex;
			align-items: center;
			gap: 8px;
			font-family: var(--font-head);
			font-size: 13px;
			font-weight: 700;
			color: var(--brand);
			margin-bottom: 14px;
			padding-bottom: 10px;
			border-bottom: 2px solid var(--brand-light)
		}

		[data-theme="dark"] .mega-col-title {
			border-bottom-color: rgba(1, 116, 187, 0.25)
		}

		.mega-col ul {
			display: flex;
			flex-direction: column;
			gap: 2px
		}

		.mega-col ul li a {
			display: flex;
			align-items: center;
			gap: 7px;
			padding: 7px 10px;
			font-size: 12.5px;
			color: var(--text2);
			font-family: var(--font-body);
			border-radius: 6px;
			transition: background .15s, color .15s, padding-left .15s
		}

		.mega-col ul li a:hover {
			background: var(--item-hover);
			color: var(--brand);
			padding-left: 14px
		}

		.mega-col ul li a i {
			font-size: 10px;
			color: var(--muted);
			flex-shrink: 0
		}

		.mega-col ul li a:hover i {
			color: var(--brand)
		}

		.mega-divider {
			font-size: 10px;
			font-family: var(--font-head);
			text-transform: uppercase;
			letter-spacing: 1.5px;

			padding: 10px 10px 4px;
			pointer-events: none;
			color: #015d96;
			font-weight: 800;
		}

		.simple-drop {
			position: absolute;
			top: calc(100% + 1px);
			left: 0;
			min-width: 240px;
			background: var(--mega-bg);
			border: 1px solid var(--mega-border);
			border-radius: 0 0 12px 12px;
			box-shadow: 0 16px 40px var(--shadow);
			opacity: 0;
			visibility: hidden;
			transform: translateY(6px);
			transition: opacity .2s, transform .2s, visibility .2s;
			pointer-events: none;
			z-index: 9999;
			overflow: hidden
		}

		.nav-item:hover>.simple-drop,
		.nav-item:focus-within>.simple-drop {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			pointer-events: all
		}

		.simple-drop li a {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 11px 18px;
			font-size: 12.5px;
			color: var(--text2);
			font-family: var(--font-body);
			border-bottom: 1px solid var(--mega-border);
			transition: background .15s, color .15s, padding-left .15s
		}

		.simple-drop li:last-child a {
			border-bottom: 0
		}

		.simple-drop li a:hover {
			background: var(--item-hover);
			color: var(--brand);
			padding-left: 24px
		}

		/* HAMBURGER */
		.hamburger {
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 5px;
			background: none;
			border: none;
			cursor: pointer;
			padding: 6px;
			margin-left: 8px;
			width: 42px;
			height: 42px;
			border-radius: 10px;
			transition: background .2s ease
		}

		.hamburger:hover {
			background: var(--brand-light)
		}

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

		.hamburger span {
			display: block;
			width: 24px;
			height: 2px;
			background: var(--text);
			border-radius: 2px;
			transition: transform .3s, opacity .3s, width .3s
		}

		.hamburger.open span:nth-child(1) {
			transform: translateY(7px) rotate(45deg)
		}

		.hamburger.open span:nth-child(2) {
			opacity: 0;
			width: 0
		}

		.hamburger.open span:nth-child(3) {
			transform: translateY(-7px) rotate(-45deg)
		}

		/* MOBILE DRAWER */
		.mob-drawer {
			display: block;
			position: fixed;
			top: 0;
			right: -100%;
			bottom: 0;
			width: min(340px, 92vw);
			background: var(--surface);
			z-index: 99998;
			overflow-y: auto;
			transition: right .35s cubic-bezier(.4, 0, .2, 1);
			border-left: 1px solid var(--border);
			padding-bottom: 50px;
			visibility: hidden
		}

		.mob-drawer.open {
			right: 0;
			visibility: visible
		}

		.mob-overlay {
			display: block;
			position: fixed;
			inset: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 99997;
			opacity: 0;
			transition: opacity .3s;
			pointer-events: none
		}

		.mob-overlay.open {
			opacity: 1;
			pointer-events: all
		}

		.mob-head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 14px 18px;
			border-bottom: 1px solid var(--border);
			position: sticky;
			top: 0;
			background: var(--surface);
			z-index: 2
		}

		.mob-close {
			background: none;
			border: none;
			color: var(--text);
			font-size: 20px;
			cursor: pointer;
			padding: 4px
		}

		.mob-nav {
			padding: 6px 0
		}

		.mob-item {
			border-bottom: 1px solid var(--border)
		}

		.mob-link {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 13px 18px;
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 600;
			color: var(--text);
			cursor: pointer;
			transition: color .2s
		}

		.mob-link:hover {
			color: var(--brand)
		}

		.mob-link .chev {
			font-size: 10px;
			color: var(--muted);
			transition: transform .3s
		}

		.mob-link.active .chev {
			transform: rotate(90deg);
			color: var(--brand)
		}

		.mob-sub {
			display: none;
			background: var(--bg2);
			padding: 4px 0
		}

		.mob-sub.open {
			display: block
		}

		.mob-sub a {
			display: block;
			padding: 9px 34px;
			font-size: 12.5px;
			color: var(--muted);
			font-family: var(--font-body);
			border-bottom: 1px solid var(--border);
			transition: color .2s, background .15s
		}

		.mob-sub a:last-of-type {
			border-bottom: 0
		}

		.mob-sub a:hover {
			color: var(--brand);
			background: var(--item-hover)
		}

		.mob-sub-label {
			display: block;
			padding: 8px 18px 3px;
			font-size: 10px;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			color: var(--brand);
			font-family: var(--font-head)
		}

		.mob-cta {
			padding: 18px 18px 0
		}

		.mob-cta .btn-demo {
			width: 100%;
			justify-content: center;
			font-size: 14px;
			padding: 12px
		}

		.mob-contact {
			padding: 18px 18px 0;
			font-size: 12px;
			color: var(--muted);
			display: flex;
			flex-direction: column;
			gap: 8px
		}

		.mob-contact span {
			display: flex;
			align-items: center;
			gap: 7px
		}

		.mob-contact i {
			color: var(--brand)
		}

		/* ============================================
   HERO SECTION
============================================ */
		.hero {
			position: relative;
			min-height: 88vh;
			background: linear-gradient(135deg, #080f1c 0%, #0b1a30 60%, #0c2240 100%);
			display: flex;
			align-items: center;
			overflow: hidden;
			padding: 60px 32px;
		}

		[data-theme="light"] .hero {
			background: linear-gradient(135deg, #0b1e3d 0%, #0174BB 60%, #0095d9 100%)
		}

		.hero-bg-circles {
			position: absolute;
			inset: 0;
			overflow: hidden;
			pointer-events: none
		}

		.hero-bg-circles span {
			position: absolute;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.04);
			border: 1px solid rgba(255, 255, 255, 0.06)
		}

		.hero-bg-circles span:nth-child(1) {
			width: 400px;
			height: 400px;
			top: -100px;
			right: -100px
		}

		.hero-bg-circles span:nth-child(2) {
			width: 260px;
			height: 260px;
			bottom: 60px;
			right: 200px;
			background: rgba(1, 116, 187, 0.12)
		}

		.hero-bg-circles span:nth-child(3) {
			width: 140px;
			height: 140px;
			top: 40%;
			left: 5%
		}

		.hero-inner {
			max-width: 1280px;
			margin: 0 auto;
			width: 100%;
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 60px;
			align-items: center
		}

		.hero-badge {
			display: inline-flex;
			align-items: center;
			gap: 7px;
			background: rgba(255, 193, 7, 0.15);
			border: 1px solid rgba(255, 193, 7, 0.4);
			color: #ffe46b;
			font-family: var(--font-head);
			font-size: 12px;
			font-weight: 600;
			letter-spacing: 1px;
			text-transform: uppercase;
			padding: 6px 14px;
			border-radius: 30px;
			margin-bottom: 20px
		}

		.hero-badge i {
			font-size: 10px
		}

		.hero-slider-wrap {
			position: relative;
			width: 100%;
			overflow: hidden;
		}

		.hero-content {
			display: none;
			animation: slideIn 0.8s ease-out forwards;
		}

		.hero-content.active {
			display: block;
		}

		@keyframes slideIn {
			from {
				opacity: 0;
				transform: translateX(30px);
			}

			to {
				opacity: 1;
				transform: translateX(0);
			}
		}

		.hero h1 {
			font-family: var(--font-head);
			font-size: clamp(30px, 4vw, 54px);
			font-weight: 900;
			color: #fff;
			line-height: 1.1;
			margin-bottom: 18px;
			letter-spacing: -0.5px
		}

		.hero h1 em {
			font-style: normal;
			color: #ffe46b
		}

		.hero h1 .brand-color {
			color: #4dcbff
		}

		.hero-sub {
			font-size: 16px;
			color: rgba(255, 255, 255, 0.75);
			line-height: 1.7;
			margin-bottom: 30px;
			max-width: 520px
		}

		.hero-stats {
			display: flex;
			gap: 28px;
			margin-bottom: 36px;
			flex-wrap: wrap
		}

		.hero-stat {
			text-align: center
		}

		.hero-stat strong {
			display: block;
			font-family: var(--font-head);
			font-size: 26px;
			font-weight: 800;
			color: #fff;
			line-height: 1
		}

		.hero-stat span {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.6);
			letter-spacing: .5px
		}

		.hero-stat-div {
			width: 1px;
			background: rgba(255, 255, 255, 0.15);
			align-self: stretch
		}

		.hero-btns {
			display: flex;
			gap: 12px;
			flex-wrap: wrap
		}

		.btn-primary-hero {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 13px 28px;
			background: var(--brand);
			color: #fff;
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			border-radius: 8px;
			transition: background .2s, transform .15s, box-shadow .2s;
			box-shadow: 0 4px 20px rgba(1, 116, 187, 0.4)
		}

		.btn-primary-hero:hover {
			background: var(--brand-dark);
			transform: translateY(-2px);
			color: #fff;
			box-shadow: 0 8px 30px rgba(1, 116, 187, 0.5)
		}

		.btn-secondary-hero {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 13px 28px;
			background: transparent;
			color: #fff;
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			border-radius: 8px;
			border: 2px solid rgba(255, 255, 255, 0.35);
			transition: background .2s, border-color .2s
		}

		.btn-secondary-hero:hover {
			background: rgba(255, 255, 255, 0.1);
			border-color: rgba(255, 255, 255, 0.7);
			color: #fff
		}

		/* Hero right – course cards */
		.hero-cards {
			display: flex;
			flex-direction: column;
			gap: 14px
		}

		.hero-card {
			background: rgba(255, 255, 255, 0.07);
			backdrop-filter: blur(10px);
			border: 1px solid rgba(255, 255, 255, 0.12);
			border-radius: 14px;
			padding: 18px 20px;
			display: flex;
			align-items: center;
			gap: 14px;
			transition: background .2s, border-color .2s, transform .2s
		}

		.hero-card:hover {
			background: rgba(255, 255, 255, 0.12);
			border-color: rgba(1, 116, 187, 0.5);
			transform: translateX(4px)
		}

		.hero-card-icon {
			width: 44px;
			height: 44px;
			border-radius: 10px;
			background: var(--brand);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 18px;
			color: #fff;
			flex-shrink: 0
		}

		.hero-card-text h4 {
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			color: #fff;
			margin-bottom: 3px
		}

		.hero-card-text p {
			font-size: 12px;
			color: rgba(255, 255, 255, 0.6)
		}

		.hero-card-arrow {
			margin-left: auto;
			color: rgba(255, 255, 255, 0.3);
			font-size: 12px;
			transition: color .2s, transform .2s
		}

		.hero-card:hover .hero-card-arrow {
			color: #fff;
			transform: translateX(3px)
		}

		/* ============================================
   SECTION UTILITIES
============================================ */
		.section-wrap {
			max-width: 1280px;
			margin: 0 auto;
			padding: 0 32px
		}

		.section-head {
			text-align: center;
			margin-bottom: 48px
		}

		.section-label {
			display: inline-block;
			font-family: var(--font-head);
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--brand);
			background: var(--brand-light);
			padding: 5px 14px;
			border-radius: 30px;
			margin-bottom: 14px
		}

		[data-theme="dark"] .section-label {
			background: rgba(1, 116, 187, 0.15);
			color: #4db8ff
		}

		.section-head h2 {
			font-family: var(--font-head);
			font-size: clamp(24px, 3.5vw, 38px);
			font-weight: 800;
			color: var(--text);
			line-height: 1.2;
			margin-bottom: 12px
		}

		.section-head h2 span {
			color: var(--brand)
		}

		.section-head p {
			font-size: 15px;
			color: var(--muted);
			max-width: 560px;
			margin: 0 auto;
			line-height: 1.7
		}

		/* ============================================
   STATS BAR
============================================ */
		.stats-bar {
			background: var(--brand);
			padding: 36px 32px
		}

		.stats-inner {
			max-width: 1400px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 0;
			text-align: center
		}

		.stat-item {
			padding: 10px 20px;
			border-right: 1px solid rgba(255, 255, 255, 0.2)
		}

		.stat-item:last-child {
			border-right: 0
		}

		.stat-item strong {
			display: block;
			font-family: var(--font-head);
			font-size: 36px;
			font-weight: 900;
			color: #fff;
			line-height: 1
		}

		.stat-item span {
			font-size: 13px;
			color: rgba(255, 255, 255, 0.8);
			margin-top: 4px;
			display: block
		}

		/* ============================================
   ABOUT SECTION
============================================ */
		.about-section {
			padding: 80px 0;
			background: var(--bg)
		}

		.about-grid {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 64px;
			align-items: center
		}

		.about-imgs {
			position: relative
		}

		.about-img-main {
			border-radius: 16px;
			overflow: hidden;
			box-shadow: 0 20px 60px var(--shadow)
		}

		.about-img-main img {
			width: 100%;
			height: 360px;
			object-fit: cover
		}

		.about-img-badge {
			position: absolute;
			bottom: -20px;
			right: -20px;
			background: var(--brand);
			color: #fff;
			padding: 20px 24px;
			border-radius: 14px;
			text-align: center;
			box-shadow: 0 8px 30px rgba(1, 116, 187, 0.4)
		}

		.about-img-badge strong {
			display: block;
			font-family: var(--font-head);
			font-size: 28px;
			font-weight: 900
		}

		.about-img-badge span {
			font-size: 12px;
			opacity: .85
		}



		.about-text h2 {
			font-family: var(--font-head);
			font-size: clamp(22px, 3vw, 36px);
			font-weight: 800;
			color: var(--text);
			line-height: 1.2;
			margin-bottom: 16px
		}

		.about-text h2 span {
			color: var(--brand)
		}

		.about-text p {
			font-size: 14px;
			color: var(--muted);
			line-height: 1.8;
			margin-bottom: 14px
		}

		.about-features {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;
			margin-top: 24px
		}

		.about-feat {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 13.5px;
			color: var(--text2);
			font-weight: 600
		}

		.about-feat i {
			color: var(--brand);
			font-size: 14px;
			flex-shrink: 0
		}

		/* ============================================
   COURSES GRID
============================================ */
		.courses-section {
			padding: 80px 0;
			background: var(--bg2)
		}

		.courses-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px
		}

		.course-card {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 16px;
			overflow: hidden;
			transition: box-shadow .25s, transform .2s, border-color .2s
		}

		.course-card:hover {
			box-shadow: 0 16px 48px var(--shadow);
			transform: translateY(-4px);
			border-color: var(--brand)
		}

		.course-card-img {
			height: 180px;
			background: linear-gradient(135deg, #0174BB, #0095d9);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48px;
			color: rgba(255, 255, 255, 0.4);
			position: relative;
			overflow: hidden
		}

		.course-card-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			inset: 0
		}

		.course-card-img .course-tag {
			position: absolute;
			top: 12px;
			left: 12px;
			background: var(--brand);
			color: #fff;
			font-family: var(--font-head);
			font-size: 11px;
			font-weight: 700;
			letter-spacing: .5px;
			padding: 4px 10px;
			border-radius: 20px
		}

		.course-card-body {
			padding: 20px
		}

		.course-card-body h3 {
			font-family: var(--font-head);
			font-size: 16px;
			font-weight: 700;
			color: var(--text);
			margin-bottom: 8px;
			line-height: 1.3
		}

		.course-card-body p {
			font-size: 13px;
			color: var(--muted);
			line-height: 1.65;
			margin-bottom: 16px
		}

		.course-card-meta {
			display: flex;
			gap: 16px;
			margin-bottom: 16px
		}

		.course-meta-item {
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: 12px;
			color: var(--muted)
		}

		.course-meta-item i {
			color: var(--brand);
			font-size: 11px
		}

		.course-card-link {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			font-family: var(--font-head);
			font-size: 13px;
			font-weight: 700;
			color: var(--brand);
			transition: gap .2s
		}

		.course-card-link:hover {
			gap: 10px
		}

		/* ============================================
   DEMO BOOKING BANNER
============================================ */
		.demo-banner {
			padding: 64px 32px;
			background: linear-gradient(135deg, var(--brand), #0095d9);
			position: relative;
			overflow: hidden
		}

		.demo-banner::before {
			content: '';
			position: absolute;
			width: 400px;
			height: 400px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.05);
			top: -150px;
			right: -100px
		}

		.demo-banner::after {
			content: '';
			position: absolute;
			width: 200px;
			height: 200px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.05);
			bottom: -80px;
			left: 10%
		}

		.demo-banner-inner {
			max-width: 1280px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 32px;
			flex-wrap: wrap;
			position: relative;
			z-index: 1
		}

		.demo-banner-text h2 {
			font-family: var(--font-head);
			font-size: clamp(22px, 3vw, 34px);
			font-weight: 800;
			color: #fff;
			margin-bottom: 8px
		}

		.demo-banner-text p {
			font-size: 15px;
			color: rgba(255, 255, 255, 0.8)
		}

		.demo-banner-btns {
			display: flex;
			gap: 12px;
			flex-wrap: wrap
		}

		.btn-white {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 13px 28px;
			background: #fff;
			color: var(--brand);
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			border-radius: 8px;
			transition: background .2s, transform .15s
		}

		.btn-white:hover {
			background: #e8f4fd;
			transform: translateY(-2px)
		}

		.btn-outline-white {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			padding: 13px 28px;
			background: transparent;
			color: #fff;
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			border-radius: 8px;
			border: 2px solid rgba(255, 255, 255, 0.5);
			transition: background .2s
		}

		.btn-outline-white:hover {
			background: rgba(255, 255, 255, 0.15);
			color: #fff
		}

		/* ============================================
   WHY CRYPTUS
============================================ */
		.why-section {
			padding: 80px 0;
			background: var(--bg)
		}

		.why-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px
		}

		.why-card {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 16px;
			padding: 28px;
			transition: box-shadow .2s, border-color .2s, transform .2s
		}

		.why-card:hover {
			box-shadow: 0 12px 40px var(--shadow);
			border-color: var(--brand);
			transform: translateY(-3px)
		}

		.why-icon {
			width: 52px;
			height: 52px;
			border-radius: 12px;
			background: var(--brand-light);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 22px;
			color: var(--brand);
			margin-bottom: 18px;
			transition: background .2s
		}

		[data-theme="dark"] .why-icon {
			background: rgba(1, 116, 187, 0.18)
		}

		.why-card:hover .why-icon {
			background: var(--brand);
			color: #fff
		}

		.why-card h3 {
			font-family: var(--font-head);
			font-size: 16px;
			font-weight: 700;
			color: var(--text);
			margin-bottom: 10px
		}

		.why-card p {
			font-size: 13.5px;
			color: var(--muted);
			line-height: 1.7
		}

		/* ============================================
   INTERNSHIP BAND
============================================ */
		.internship-band {
			background: var(--bg3);
			border-top: 1px solid var(--border);
			border-bottom: 1px solid var(--border);
			padding: 32px
		}

		[data-theme="dark"] .internship-band {
			background: var(--bg3)
		}

		.internship-inner {
			max-width: 1280px;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 24px;
			flex-wrap: wrap
		}

		.internship-left h3 {
			font-family: var(--font-head);
			font-size: 22px;
			font-weight: 800;
			color: var(--text);
			margin-bottom: 4px
		}

		.internship-left p {
			font-size: 13px;
			color: var(--muted)
		}

		.internship-items {
			display: flex;
			gap: 32px;
			flex-wrap: wrap
		}

		.intern-item {
			text-align: center
		}

		.intern-item strong {
			display: block;
			font-family: var(--font-head);
			font-size: 22px;
			font-weight: 800;
			color: var(--brand)
		}

		.intern-item span {
			font-size: 12px;
			color: var(--muted)
		}

		/* ============================================
   TESTIMONIALS
============================================ */
		.testimonials-section {
			padding: 80px 0;
			background: var(--bg2)
		}

		.testimonials-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 24px
		}

		.testimonial-card {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 16px;
			padding: 24px;
			transition: box-shadow .2s, border-color .2s
		}

		.testimonial-card:hover {
			box-shadow: 0 12px 40px var(--shadow);
			border-color: var(--brand)
		}

		.testimonial-stars {
			color: #f59e0b;
			font-size: 13px;
			margin-bottom: 14px
		}

		.testimonial-text {
			font-size: 13.5px;
			color: var(--text2);
			line-height: 1.75;
			margin-bottom: 18px;
			font-style: italic
		}

		.testimonial-author {
			display: flex;
			align-items: center;
			gap: 12px
		}

		.testimonial-avatar {
			width: 42px;
			height: 42px;
			border-radius: 50%;
			background: var(--brand);
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: var(--font-head);
			font-size: 16px;
			font-weight: 700;
			color: #fff;
			flex-shrink: 0
		}

		.testimonial-name {
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			color: var(--text)
		}

		.testimonial-role {
			font-size: 12px;
			color: var(--muted)
		}

		/* ============================================
   FOOTER
============================================ */
		.site-footer {
			background: var(--surface);
			border-top: 1px solid var(--border);
			transition: background .3s, border-color .3s
		}

		.footer-franchise {
			background: var(--brand);
			padding: 10px 32px;
			text-align: center;
			font-size: 12.5px;
			color: rgba(255, 255, 255, 0.88);
			font-family: var(--font-body)
		}

		.footer-franchise a {
			color: #ffe46b;
			font-weight: 700;
			transition: color .2s
		}

		.footer-franchise a:hover {
			color: #fff
		}

		.footer-main {
			max-width: 1280px;
			margin: 0 auto;
			padding: 56px 32px 44px;
			display: grid;
			grid-template-columns: 1.3fr 1.1fr 1fr 1.4fr;
			gap: 44px
		}

		.footer-col h3 {
			font-family: var(--font-head);
			font-size: 14px;
			font-weight: 700;
			color: var(--text);
			letter-spacing: .4px;
			margin-bottom: 18px;
			padding-bottom: 10px;
			position: relative;
			display: inline-block
		}

		.footer-col h3::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 2px;
			background: var(--brand);
			border-radius: 2px
		}

		.footer-col ul {
			display: flex;
			flex-direction: column;
			gap: 9px
		}

		.footer-col ul li a {
			font-size: 13px;
			color: var(--muted);
			display: flex;
			align-items: center;
			gap: 8px;
			transition: color .18s, padding-left .18s
		}

		.footer-col ul li a::before {
			content: '';
			width: 5px;
			height: 5px;
			border-radius: 50%;
			background: var(--brand);
			flex-shrink: 0;
			opacity: .4;
			transition: opacity .18s
		}

		.footer-col ul li a:hover {
			color: var(--brand);
			padding-left: 4px
		}

		.footer-col ul li a:hover::before {
			opacity: 1
		}

		.footer-logo {
			display: flex;
			align-items: center;
			margin-bottom: 16px
		}

		.footer-logo img {
			height: 44px;
			width: auto;
			object-fit: contain
		}

		.footer-brand-desc {
			font-size: 13px;
			color: var(--muted);
			line-height: 1.75;
			margin-bottom: 22px;
			max-width: 265px
		}

		.footer-social {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			margin-bottom: 24px
		}

		.footer-social a {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			border: 1.5px solid var(--border);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			color: var(--muted);
			transition: background .2s, border-color .2s, color .2s, transform .2s
		}

		.footer-social a:hover {
			background: var(--brand);
			border-color: var(--brand);
			color: #fff;
			transform: translateY(-2px)
		}

		.footer-trust img {
			max-width: 180px;
			height: auto;
			opacity: .8;
			filter: grayscale(15%);
			transition: opacity .2s, filter .2s
		}

		[data-theme="dark"] .footer-trust img {
			filter: brightness(.75) grayscale(10%)
		}

		.footer-trust img:hover {
			opacity: 1;
			filter: none
		}

		.footer-contact-list {
			display: flex;
			flex-direction: column;
			gap: 14px
		}

		.footer-contact-item {
			display: flex;
			gap: 11px;
			align-items: flex-start
		}

		.fc-icon {
			width: 34px;
			height: 34px;
			border-radius: 8px;
			background: var(--brand-light);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			font-size: 13px;
			color: var(--brand);
			transition: background .2s, color .2s
		}

		[data-theme="dark"] .fc-icon {
			background: rgba(1, 116, 187, 0.18)
		}

		.footer-contact-item:hover .fc-icon {
			background: var(--brand);
			color: #fff
		}

		.fc-text {
			font-size: 12.5px;
			color: var(--muted);
			line-height: 1.65
		}

		.fc-text strong {
			color: var(--text);
			font-size: 13px;
			display: block;
			margin-bottom: 2px
		}

		.fc-text a {
			color: var(--muted);
			transition: color .2s
		}

		.fc-text a:hover {
			color: var(--brand)
		}

		.footer-divider {
			border: none;
			border-top: 1px solid var(--border);
			margin: 0 32px;
			transition: border-color .3s
		}

		.footer-bottom {
			max-width: 1280px;
			margin: 0 auto;
			padding: 18px 32px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 16px;
			flex-wrap: wrap
		}

		.footer-copy {
			font-size: 12.5px;
			color: var(--muted)
		}

		.footer-copy span {
			color: var(--brand);
			font-weight: 700
		}

		.footer-bottom-links {
			display: flex;
			gap: 20px
		}

		.footer-bottom-links a {
			font-size: 12px;
			color: var(--muted);
			transition: color .2s
		}

		.footer-bottom-links a:hover {
			color: var(--brand)
		}

		/* ============================================
   WHATSAPP FLOAT
============================================ */
		.wa-float {
			position: fixed;
			bottom: 24px;
			left: 24px;
			z-index: 9998
		}

		.wa-btn {
			width: 56px;
			height: 56px;
			border-radius: 50%;
			background: #25D366;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 26px;
			box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
			cursor: pointer;
			transition: transform .2s, box-shadow .2s
		}

		.wa-btn:hover {
			transform: scale(1.1);
			box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5)
		}

		/* ============================================
   BACK TO TOP
============================================ */
		.back-top {
			position: fixed;
			bottom: 24px;
			right: 24px;
			z-index: 9997;
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: var(--brand);
			color: #fff;
			font-size: 18px;
			display: none;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			box-shadow: 0 4px 16px rgba(1, 116, 187, 0.35);
			transition: background .2s, transform .2s
		}

		.back-top.show {
			display: flex
		}

		.back-top:hover {
			background: var(--brand-dark);
			transform: translateY(-2px)
		}

		/* ============================================
   RESPONSIVE
============================================ */
		@media(max-width:1100px) {
			.nav-link {
				padding: 0 10px;
				font-size: 13px
			}

			.nav-logo {
				margin-right: 20px
			}

			.hero-inner {
				gap: 36px
			}

			.courses-grid {
				grid-template-columns: repeat(2, 1fr)
			}

			.why-grid {
				grid-template-columns: repeat(2, 1fr)
			}

			.footer-main {
				grid-template-columns: 1fr 1fr;
				gap: 36px
			}
		}

		@media(max-width:1200px) {
			.top-bar {
				padding: 0 20px
			}

			.top-bar-left {
				gap: 12px
			}

			.top-bar-right a {
				padding: 0 8px;
				font-size: 11px
			}

			.main-nav {
				padding: 0 20px
			}

			.nav-logo {
				margin-right: 18px
			}

			.nav-link {
				padding: 0 11px;
				font-size: 13px
			}

			.top-bar-left a {
				display: none
			}

			.top-bar-left a:last-child,
			.top-bar-left a:nth-last-child(1) {
				display: block
			}
		}

		@media(max-width:960px) {

			.marquee-bar {
                display: none !important;
            }
            #site-header.scrolled .top-bar {
                height: 36px !important;
                opacity: 1 !important;
            }

			.stats-bar {
			display: none;
		}

			
			.nav-menu {
				display: none
			}

			.nav-right .btn-demo {
				display: none
			}

			.hamburger {
				display: flex
			}

			.nav-right {
				gap: 8px
			}

			.main-nav {
				padding: 0 18px
			}

			.top-bar-right a {
				display: none
			}

			.top-bar-right a:last-child,
			.top-bar-right a:nth-last-child(2) {
				display: block
			}

			.hero-inner {
				grid-template-columns: 1fr
			}

			.hero-cards {
				display: none
			}

			.about-grid {
				grid-template-columns: 1fr
			}

			.about-imgs {
				display: none
			}

			.testimonials-grid {
				grid-template-columns: repeat(2, 1fr)
			}

			.stats-inner {
				grid-template-columns: repeat(2, 1fr)
			}

			.stat-item {
				border-right: 0;
				border-bottom: 1px solid rgba(255, 255, 255, 0.2)
			}

			.stat-item:nth-child(2n) {
				border-right: 0
			}
		}

		@media(max-width:640px) {
			.hero {
				padding: 48px 20px;
				min-height: auto
			}

			.stats-bar {
			display: none;
		}

			.courses-grid {
				grid-template-columns: 1fr
			}

			.why-grid {
				grid-template-columns: 1fr
			}

			.testimonials-grid {
				grid-template-columns: 1fr
			}

			.footer-main {
				grid-template-columns: 1fr;
				padding: 36px 20px 28px
			}

			.footer-franchise {
				padding: 10px 16px;
				font-size: 12px
			}

			.footer-divider {
				margin: 0 20px
			}

			.footer-bottom {
				padding: 16px 20px;
				flex-direction: column;
				align-items: flex-start
			}

			.footer-bottom-links {
				flex-wrap: wrap;
				gap: 12px
			}

			.top-bar-left span:not(:first-child) {
				display: none
			}

			.top-bar-left span:first-child {
				font-size: 11px
			}

			.main-nav {
				height: 60px;
				padding: 0 16px
			}

			.top-bar {
				padding: 0 16px
			}

			.marquee-bar {
				height: 30px
			}

			.nav-logo img {
				height: 32px
			}

			.section-wrap {
				padding: 0 20px
			}

			.demo-banner {
				padding: 40px 20px
			}

			.demo-banner-inner {
				flex-direction: column;
				align-items: flex-start
			}

			.about-section,
			.courses-section,
			.why-section,
			.testimonials-section {
				padding: 56px 0
			}

			.stats-inner {
				grid-template-columns: 1fr 1fr
			}
		}


		/* RECOGNITION MARQUEE */

		#marquee-section {
			width: 100%;
			background: #ffffff;
			padding: 40px 0;
			border-bottom: 1px solid var(--border);
			display: flex;
			justify-content: center;
		}

		#cyber-marquee {
			width: 100%;
			max-width: 1400px;
			display: flex;
			justify-content: center;
		}

		.cyber-track {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			gap: 50px;
			padding: 0 20px;
		}

		.cyber-icon {
			height: 60px;
			width: auto;
			object-fit: contain;

			transition: all 0.3s ease;
		}

		.cyber-icon:hover {
			filter: grayscale(0%) opacity(1);
			transform: scale(1.05);
		}

		@media (max-width: 768px) {
			.cyber-icon {
				height: 40px;
			}

			.cyber-track {
				gap: 18px;
			}

			#marquee-section {
				padding: 30px 0;
			}
		}

		/* WEBSITE & APP Development */



		.dev-card-hover {
			position: relative;
			overflow: hidden;
			z-index: 1;
		}

		.dev-card-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			opacity: 0;
			transition: opacity 0.3s ease, transform 0.4s ease;
			z-index: -1;
			pointer-events: none;
			border-radius: inherit;
		}

		.dev-card-hover:hover .dev-card-bg {
			opacity: 0.12;
			transform: scale(1.05);
		}


		/* TRAINING HOME IMPRESSIONS */



		.training-card {
			position: relative;
			border-radius: 16px;
			overflow: hidden;
			display: block;
			min-height: 280px;
			color: #fff;
			text-decoration: none;
			box-shadow: 0 10px 30px var(--shadow);
		}

		.training-card-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			transition: transform 0.5s ease;
			z-index: 1;
		}

		.training-card-overlay {
			position: absolute;
			inset: 0;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
			z-index: 2;
			transition: background 0.3s ease;
		}

		.training-card-content {
			position: absolute;
			inset: 0;
			z-index: 3;
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			padding: 32px 24px;
			transition: transform 0.3s ease;
		}

		.training-card-content h2 {
			font-family: var(--font-head);
			font-size: 26px;
			font-weight: 700;
			color: #fff;
			margin: 0 0 16px 0;
			transform: translateY(20px);
			transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.training-card-btn {
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			font-weight: 700;
			color: #ffe46b;
			text-transform: uppercase;
			letter-spacing: 1px;
			opacity: 0;
			transform: translateY(20px);
			transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		}

		.training-card:hover .training-card-bg {
			transform: scale(1.1);
		}

		.training-card:hover .training-card-overlay {
			background: linear-gradient(to top, rgba(1, 116, 187, 0.95) 0%, rgba(1, 116, 187, 0.6) 50%, rgba(0, 0, 0, 0.3) 100%);
		}

		.training-card:hover .training-card-content h2 {
			transform: translateY(0);
		}

		.training-card:hover .training-card-btn {
			opacity: 1;
			transform: translateY(0);
			color: #fff;
		}

		.popular_img_main {
			padding: 60px 0;
			background: var(--bg2);
			overflow: hidden;
			position: relative;
			border-top: 1px solid var(--border);
		}

		.popular_img_main h3 {
			text-align: center;
			font-family: var(--font-head);
			font-size: 28px;
			font-weight: 700;
			margin-bottom: 40px;
			color: var(--text);
		}

		/* GALLERY */
		.gallery-marquee-container {
			display: flex;
			width: 100vw;
			margin-left: calc(-50vw + 50%);
			overflow: hidden;
			position: relative;
		}

		.gallery-marquee-content {
			display: flex;
			gap: 15px;
			padding: 10px 0;
			animation: scrollGallery 40s linear infinite;
			width: max-content;
		}

		.gallery-marquee-container:hover .gallery-marquee-content {
			animation-play-state: paused;
		}

		.gallery-marquee-content a,
		.gallery-marquee-content div {
			flex: 0 0 auto;
		}

		.gallery-marquee-content img {
			height: 220px;
			width: auto;
			border-radius: 8px;
			object-fit: cover;
			display: block;
			box-shadow: 0 4px 12px var(--shadow);
			transition: transform 0.3s;
		}

		.gallery-marquee-content img:hover {
			transform: scale(1.02);
		}

		@keyframes scrollGallery {
			0% {
				transform: translateX(0);
			}

			100% {
				transform: translateX(calc(-50% - 7.5px));
			}
		}

		.ph_btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 12px 28px;
			background: var(--brand);
			color: #fff;
			font-family: var(--font-head);
			font-size: 15px;
			font-weight: 700;
			border-radius: 8px;
			box-shadow: 0 4px 18px rgba(1, 116, 187, 0.3);
			transition: background 0.3s, transform 0.2s;
			margin: 40px auto 0;
			text-decoration: none;
		}

		.ph_btn:hover {
			background: var(--brand-dark);
			transform: translateY(-2px);
			color: #fff;
		}


		/* FAQ */


		.faq-section {
			background: var(--bg2);
			padding: 80px 0;
			border-top: 1px solid var(--border);
		}

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

		.faq-head {
			text-align: center;
			margin-bottom: 50px;
		}

		.faq-head h2 {
			font-family: var(--font-head);
			font-size: 36px;
			color: var(--text);
			margin-bottom: 12px;
		}

		.faq-head h2 span {
			color: var(--brand);
		}

		.faq-head p {
			color: var(--text2);
			font-size: 16px;
		}

		.faq-flex-grid {
			display: flex;
			flex-wrap: wrap;
			gap: 20px;
			align-items: flex-start;
		}

		.faq-col {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 16px;
			min-width: 320px;
		}

		.faq-item {
			background: var(--surface);
			border: 1px solid var(--border);
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
			overflow: hidden;
		}

		.faq-item details {
			width: 100%;
		}

		.faq-item summary {
			padding: 24px;
			font-family: var(--font-head);
			font-size: 17px;
			font-weight: 600;
			color: var(--text);
			cursor: pointer;
			list-style: none;
			display: flex;
			justify-content: space-between;
			align-items: center;
			user-select: none;
			transition: background 0.2s;
		}

		.faq-item summary::-webkit-details-marker {
			display: none;
		}

		.faq-item summary::after {
			content: '\f107';
			font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif;
			font-weight: 900;
			color: var(--brand);
			transition: transform 0.3s ease;
		}

		.faq-item details[open] summary::after {
			transform: rotate(180deg);
		}

		.faq-item details[open] summary {
			background: rgba(1, 116, 187, 0.03);
			border-bottom: 1px solid var(--border);
		}

		.faq-content {
			padding: 24px;
			color: var(--text2);
			line-height: 1.6;
			font-size: 14.5px;
		}

		@media (max-width: 768px) {
			.faq-head h2 {
				font-size: 28px;
			}

			.faq-item summary {
				font-size: 15.5px;
				padding: 18px;
			}

			.faq-content {
				padding: 18px;
				font-size: 14px;
			}
		}



		/* ===== BOOK DEMO POPUP ===== */
		.popup-overlay {
			position: fixed;
			inset: 0;
			background: rgba(10, 20, 40, 0.6);
			backdrop-filter: blur(6px);
			-webkit-backdrop-filter: blur(6px);
			z-index: 99999;
			display: flex;
			align-items: center;
			justify-content: center;
			opacity: 0;
			pointer-events: none;
			transition: opacity .3s
		}

		.popup-overlay.active {
			opacity: 1;
			pointer-events: all
		}

		.popup-box {
			background: #fff;
			border-radius: 16px;
			width: min(480px, 94vw);
			padding: 36px 32px 28px;
			position: relative;
			transform: translateY(24px) scale(.97);
			transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .3s;
			opacity: 0;
			box-shadow: 0 24px 64px rgba(1, 116, 187, 0.18)
		}

		.popup-overlay.active .popup-box {
			transform: translateY(0) scale(1);
			opacity: 1
		}

		.popup-close {
			position: absolute;
			top: 14px;
			right: 16px;
			background: none;
			border: none;
			font-size: 20px;
			cursor: pointer;
			color: #6b87a2;
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 50%;
			transition: background .18s
		}

		.popup-close:hover {
			background: #f0f7fd;
			color: #0174BB
		}

		.popup-badge {
			display: inline-flex;
			align-items: center;
			gap: 6px;
			background: #e8f4fd;
			color: #0174BB;
			font-size: 11.5px;
			font-weight: 700;
			padding: 4px 12px;
			border-radius: 20px;
			margin-bottom: 12px;
			letter-spacing: .4px
		}

		.popup-title {
			font-size: 22px;
			font-weight: 800;
			color: #1a2535;
			margin-bottom: 4px;
			font-family: 'Outfit', sans-serif
		}

		.popup-sub {
			font-size: 13px;
			color: #6b87a2;
			margin-bottom: 22px
		}

		.pf-group {
			margin-bottom: 14px
		}

		.pf-group label {
			display: block;
			font-size: 12.5px;
			font-weight: 700;
			color: #3d5166;
			margin-bottom: 5px;
			letter-spacing: .2px
		}

		.pf-group input,
		.pf-group select {
			width: 100%;
			height: 42px;
			border: 1.5px solid #daeaf7;
			border-radius: 8px;
			padding: 0 13px;
			font-size: 13.5px;
			color: #1a2535;
			outline: none;
			transition: border-color .2s, box-shadow .2s;
			background: #fff;
			font-family: 'Nunito Sans', sans-serif
		}

		.pf-group input:focus {
			border-color: #0174BB;
			box-shadow: 0 0 0 3px rgba(1, 116, 187, .12)
		}

		.captcha-row {
			display: flex;
			align-items: center;
			gap: 12px;
			margin-bottom: 18px
		}

		.captcha-box {
			background: #f5f9fd;
			border: 1.5px solid #daeaf7;
			border-radius: 8px;
			padding: 10px 16px;
			font-size: 15px;
			font-weight: 800;
			font-family: monospace;
			letter-spacing: 6px;
			color: #0174BB;
			user-select: none;
			min-width: 110px;
			text-align: center
		}

		.captcha-refresh {
			background: none;
			border: none;
			cursor: pointer;
			color: #0174BB;
			font-size: 16px;
			padding: 6px;
			border-radius: 6px;
			transition: background .18s
		}

		.captcha-refresh:hover {
			background: #e8f4fd
		}

		.btn-submit {
			width: 100%;
			height: 46px;
			background: #0174BB;
			color: #fff;
			border: none;
			border-radius: 10px;
			font-size: 14.5px;
			font-weight: 800;
			font-family: 'Outfit', sans-serif;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			transition: background .2s, transform .15s, box-shadow .2s;
			box-shadow: 0 4px 18px rgba(1, 116, 187, .3)
		}

		.btn-submit:hover {
			background: #015d96;
			box-shadow: 0 6px 26px rgba(1, 116, 187, .45);
			transform: translateY(-1px)
		}

		.popup-note {
			text-align: center;
			font-size: 11.5px;
			color: #6b87a2;
			margin-top: 12px
		}

		.success-msg {
			display: none;
			text-align: center;
			padding: 20px 0 10px
		}

		.success-msg .s-icon {
			width: 56px;
			height: 56px;
			background: #e8f4fd;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto 14px;
			font-size: 22px;
			color: #0174BB
		}

		.success-msg h3 {
			font-size: 18px;
			font-weight: 800;
			color: #1a2535;
			margin-bottom: 6px;
			font-family: 'Outfit', sans-serif
		}

		.success-msg p {
			font-size: 13px;
			color: #6b87a2
		}

		.err {
			border-color: #e24b4a !important;
			box-shadow: 0 0 0 3px rgba(226, 75, 74, .1) !important
		}

		.err-msg {
			font-size: 11.5px;
			color: #e24b4a;
			margin-top: 3px
		}