/* 1. FONT INTEGRATION (AXIFORMA) */
@font-face {
	font-family: 'Axiforma';
	src: url('../fonts/Axiforma-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
}

@font-face {
	font-family: 'Axiforma';
	src: url('../fonts/Axiforma-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: 'Axiforma';
	src: url('../fonts/Axiforma-SemiBold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
}

@font-face {
	font-family: 'Axiforma';
	src: url('../fonts/Axiforma-SemiBold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
}


@font-face {
	font-family: 'Axiforma';
	src: url('../fonts/Axiforma-SemiBold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}

@font-face {
	font-family: 'Axiforma';
	src: url('../fonts/Axiforma-SemiBold.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
}


@font-face {
	font-family: 'glory';
	src: url('../fonts/Gilroy-Heavy.ttf') format('truetype');

	font-style: normal;
}


@font-face {
	font-family: 'glory-M';
	src: url('../fonts/Axiforma-Medium.ttf') format('truetype');

	font-style: normal;
}

@font-face {
	font-family: 'glory-extra-bold';
	src: url('../fonts/Gilroy-ExtraBold.ttf') format('truetype');

	font-style: normal;
}

/* ❌ REMOVE THIS */
html,
body {
	max-width: 100vw !important;
	overflow-x: hidden !important;
}

/* 2. ROOT VARIABLES & GLOBAL STYLES */
:root {
	--primary-color: #051031;
	--brand-green: #006837;
	--dark-blue: #000c2d;
	--light-bg: #ebebeb;
	--white: #ffffff;
}



body {
	font-family: 'Axiforma', sans-serif;
	margin: 0;
	padding: 0;
	background-color: var(--white);
	color: var(--primary-color);
}

h1 {
	font-family: 'glory';
	font-size: 68px;
	font-weight: 900;
	text-transform: uppercase;
	background: linear-gradient(0deg, #051031 0%, #002699 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}


h3 {
	font-family: 'glory';
	font-size: 68px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--white);
	
}


.experience {
	font-family: 'glory';
	font-size: 30px;
	font-weight: 900;
	text-transform: uppercase;
	color: var(--white);
}

.paraghraph{
	font-family: 'glory-extra-bold';
	font-size: 20px;
	color: var(--white);
}
p {
	font-size: 15px;
	font-family: 'glory-M';
}

button.primarybtn {
	padding: 10px 20px;
	border: none;
	background: var(--primary-color);
	border-radius: 100px;
	color: white;
}
/* Section Wrapper: Background color ke liye */
.page-section {
    width: 100%;
    padding: 40px 20px; /* Upar-neeche ki space */
    background-color: #f8f9fa; /* Light grey background */
}

/* Container: Content ko fix width mein rakhne ke liye */
.main-container {
    
    margin: 0 auto;
    padding: 20px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
	background: linear-gradient(0deg, #051031 0%, #002699 100%);
	border-radius: 10px;
	height: 150px;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
}

/* Breadcrumb Styling */
.breadcrumb-nav {
    margin-top: 15px;
}
.bi-list::before {
    content: "\f479";
    font-size: 17px;
}
.custom-breadcrumb {
    list-style: none;
    display: flex;
    font-family: 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #555;
}

.custom-breadcrumb li+li::before {
    content: "/";
    padding: 0 8px;
}

/* Page Title Styling */
.page-title {
    font-size: 28px;
    font-weight: 900;
    color: white !important; /* Professional Dark Blue/Grey */
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
	font-family: 'glory';
  
}

/* Flip Card Animation Logic */
.flip-card {
    background-color: transparent;
    perspective: 1000px;
    height: 350px; /* Card ki height */
    margin-bottom: 30px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 15px;
}

.flip-card-front {
    z-index: 2;
}

.flip-card-back {
    transform: rotateY(180deg);
    background: var(--primary-gradient); /* Dark mode gradient */
}

/* Ensure your original classes keep their look */
.flip-card .card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--card-bg); /* Theme compatible */
    border: 1px solid var(--border-color);
    border-radius: 15px;
}

.flip-card-back .card-body {
    background-color: transparent !important; /* Back side should show gradient */
    border: none;
}

.flip-card-back .paraghraph {
    color: #fff !important;
}

/* sticky nav bar */
/* --- Navbar Base State --- */
.navbar-custom {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9990;
	background: #ffffff;
	transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	padding: 20px 0;
	/* Shuru mein thori bari navbar */
}





 .locator-section {
            display: flex;
            height: 85vh;
            max-width: 1300px;
            margin: 40px auto;
            background: #fff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 15px 35px rgba(0,0,0,0.15);
        }

        /* Sidebar Styling */
        .branch-sidebar {
            width: 380px;
            display: flex;
            flex-direction: column;
            border-right: 1px solid #eee;
            background: #fff;
            z-index: 10;
        }

        .sidebar-header {
            padding: 30px 20px;
            background: var(--primary-grad);
            color: #fff;
            text-align: center;
        }

        .sidebar-header h2 { margin: 0; font-size: 24px; letter-spacing: 1px; }

        #branch-list {
            flex-grow: 1;
            overflow-y: auto;
        }

        .branch-item {
            padding: 20px;
            border-bottom: 1px solid #f1f1f1;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .branch-item:hover { background: #fdfdfd; padding-left: 25px; }

        .branch-item.active {
            background: #f0f7ff;
            border-left: 6px solid var(--accent);
        }

        .branch-item h3 { margin: 0 0 8px 0; font-size: 17px; color: #1e3c72; }
        .branch-item p { margin: 0; font-size: 13.5px; color: #555; line-height: 1.6; }
        .branch-item .tel { color: var(--accent); font-weight: bold; margin-top: 5px; display: block; }
        
   
.accounts-mini-box span {
    display: inline-block;
    transition: all 0.3s ease;
    font-variant-numeric: tabular-nums; /* Numbers ko move honay se rokta hai */
}

/* Jab number change ho to ye effect aayega */
.counter-glow {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

.accounts-mini-box {
    /* Aapka existing box style yahan rahega */
    display: flex;
    align-items: center;
    justify-content: center;
}


        /* Map Styling */
        #map-container {
            flex-grow: 1;
            height: 100%;
            background: #e5e3df;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .locator-section { flex-direction: column; height: auto; margin: 15px; border-radius: 10px; }
            .branch-sidebar { width: 100%; height: 350px; }
            #map-container { height: 450px; }
        }













/* --- Scroll hone ke baad wala Look (Sticky State) --- */
.navbar-scrolled {
	padding: 10px 0;
	/* Scroll par navbar patli ho jayegi */
	background: rgba(255, 255, 255, 0.9) !important;
	/* Halka transparent */
	backdrop-filter: blur(10px) !important;
	/* Premium Glass Effect */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}

/* Navbar logo ki height scroll par control karne ke liye */
.navbar-scrolled .navbar-brand img {
	height: 40px;
	/* Logo thora chota ho jaye */
	transition: 0.3s;
}

/* --- Content Offset --- */
/* Zaroori: Navbar fixed hai toh niche wala content iske piche na chhupay */
body {
	padding-top: 90px;
}

/* Dropdown ki position fix (Sticky ke sath align rahe) */
.nav-item-wrapper:hover .custom-dropdown {
	top: 100%;
}

/* sticky nav bar */
form.account-opening-form {
	background: #051031;
	border-radius: 19px;
}

/* 3. HEADER & NAVIGATION */
.navbar-custom {
	background-color: var(--light-bg);
	padding: 10px 2%;
	border-bottom: 1px solid #ddd;
}

.navbar-container {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	width: 100%;
}

.desktop-nav {
	display: flex;
	justify-content: center;
	gap: 30px;
}

.navbar-brand img {
	height: 70px;
	width: auto;
}

.nav-link-custom {
	font-family: 'Axiforma', sans-serif;
	font-size: 13px;
	/* As per Figma */
	font-weight: 500;
	/* As per Figma Medium */
	color: var(--primary-color) !important;
	line-height: 100%;
	letter-spacing: 0%;
	text-decoration: none;
	transition: 0.3s;
	white-space: nowrap;
	display: inline-block;
	text-transform: capitalize;
}

.nav-link-custom:hover {
	color: var(--brand-green) !important;
}


/* Container Flexbox */
.desktop-nav {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	z-index:9999;
}

/* Wrapper for Dropdown Logic */
.nav-item-wrapper {
	position: relative;
}

/* Base Link Style */
.nav-link-custom {
	text-decoration: none;
	color: #051031;
	/* Theme Dark Blue */

	font-family: 'glory-M', sans-serif;
	transition: 0.3s;
	display: flex;
	align-items: center;
}

/* Dropdown Menu (Hidden by Default) */
.custom-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	min-width: 260px;
	list-style: none;
	padding: 15px 0;
	margin: 0;
	border-radius: 12px;
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
	opacity: 0;
	visibility: hidden;
	transform: translateY(15px);
	transition: all 0.3s ease-in-out;
	z-index: 999;
}

/* Hover State */
.nav-item-wrapper:hover .custom-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Dropdown Items */
.custom-dropdown li a {
	display: block;
	padding: 10px 25px;
	color: #051031;
	text-decoration: none;
	font-size: 14px;
	transition: 0.2s;
}

.custom-dropdown li a:hover {
	background: #f8f9fa;
	color: #002699;
	/* Theme Blue */
	padding-left: 30px;
	/* Halka sa animation shift */
}

/* Chevron Rotation on Hover */
.nav-item-wrapper:hover .bi-chevron-down {
	transform: rotate(180deg);
	transition: 0.3s;
}

/* --- Main Navigation Wrapper --- */
.nav-item-wrapper {
	position: relative;
	display: inline-block;
}

/* --- Dropdown Styling --- */
.custom-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: #fff;
	list-style: none;
	padding: 10px 0;
	margin: 0;
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
	border-top: 3px solid #1e3c72;
	/* Dark Blue theme */
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s ease;
	z-index: 999;
}

/* --- Hover Effect to Show Dropdown --- */
.nav-item-wrapper:hover .custom-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.custom-dropdown li {
	position: relative;
}

.custom-dropdown li a {
	display: flex;
	align-items: center;
	padding: 10px 20px;
	color: #333;
	text-decoration: none;
	font-size: 14px;
	transition: 0.2s;
}

.custom-dropdown li a:hover {
	background: #f8f9fa;
	color: #1e3c72;
	padding-left: 25px;
}

/* --- Nested Sub-menu (Profile Pages) --- */
.submenu {
	position: absolute;
	top: 0;
	left: 100%;
	/* Side mein khulega */
	min-width: 250px;
	background: #fff;
	list-style: none;
	padding: 10px 0;
	margin: 0;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	border-left: 2px solid #1e3c72;
	opacity: 0;
	visibility: hidden;
	transform: translateX(10px);
	transition: all 0.3s ease;
}

/* --- Show Profile Sub-menu on Hover --- */
.has-submenu:hover>.submenu {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

/* Icon rotation for detail */
.has-submenu i {
	font-size: 10px;
}


/* mobile drop down */
/* Mobile Main Links */
.mobile-nav-link {
	text-decoration: none;
	color: #051031;
	font-size: 18px;
	font-weight: 500;
	padding: 12px 0;
	border-bottom: 1px solid #f1f1f1;
	display: block;
	transition: 0.3s;
}

/* Sub-links (Dropdown ke andar) */
.mobile-nav-sublink {
	display: block;
	text-decoration: none;
	color: #666;
	font-size: 15px;
	padding: 10px 0;
	border-left: 2px solid #002699;
	/* Side line for hierarchy */
	padding-left: 15px;
	margin-bottom: 5px;
	transition: 0.3s;
}

.mobile-nav-sublink:hover {
	color: #002699;
	padding-left: 20px;
}

/* Rotate arrow when open */
.mobile-nav-link[aria-expanded="true"] i {
	transform: rotate(180deg);
	transition: 0.3s;
}

/* Button Pill (For Bottom) */
.btn-pill {
	background: #051031;
	color: white;
	border-radius: 50px;
	display: block;
	text-decoration: none;
	transition: 0.3s;
}

.btn-pill:hover {
	background: #002699;
}

/* mobile drop down */


.btn-pill {

	border-radius: 10px;
	padding: 7px 8px;
	font-size: 11px;
	font-weight: 500;

	text-decoration: none;

	display: inline-block;
	transition: all 0.2s ease;
	font-family: 'Axiforma', sans-serif;
	background: linear-gradient(180deg, #051031 0%, #002699 100%);
	color: #fff;
	border: 2px double white !important;
}

.btn-pill:hover {
	transform: translate(-1px, -1px);
	/* box-shadow: 2px 2px 0px var(--brand-green); */
	background: var(--primary-color);
	color: var(--white);
}

.btn-action-square {
	background: var(--light-bg);
	border: 2px solid var(--primary-color);
	border-radius: 15px;
	padding: 8px 10px;
	font-size: 12px;
	color: var(--primary-color);
	font-weight: 700;
	text-decoration: none;
	/* box-shadow: 4px 4px 0px var(--primary-color); */
	transition: 0.2s;
	font-family: 'Axiforma', sans-serif;
}

.btn-action-square:hover {
	background: var(--primary-color);
	color: var(--white);
	transform: scale(1.03);
}

/* 5. TICKER BAR (Modern Way) */
.ticker-container {
	background: var(--primary-color);
	color: var(--white);
	padding: 10px 0;
	font-size: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
	/* Bahar ka data hide karne ke liye */
	white-space: nowrap;
	position: relative;
}

.ticker-wrapper {
	display: inline-block;
	padding-left: 100%;
	/* Shuruat screen ke bahar se ho */
	animation: ticker-move 60s linear infinite;
	/* 20s speed control karta hai */
}

.ticker-item {
	display: inline-block;
	padding-right: 50px;
	/* Items ke darmiyan gap */
}

.green-val {
	color: #00d084;
	font-weight: bold;
}


.market-question {
	background-image: url('../images/home-page-images/market-question.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	height: 150px;
	border-radius: 10px;
}

.darsonlog-whysection img {
	width: 80%;
}

.question-text {
	text-align: center;
}

.hero-section {
	background-image: url('../images/home-page-images/herobackgroundimage.png');

	/* Full cover background */
	background-size: cover;

	/* Center image */
	background-position: center center;

	/* Repeat na ho */
	background-repeat: no-repeat;

	/* Content alignment */
	display: flex;
	align-items: center;

	/* Overlay ke liye */
	position: relative;
}


/* Slider Laptop Frame */
/* --- MacBook Main Screen Bezel --- */
.figma-laptop-box {
	background: #000;
	/* MacBook ka classic black bezel */
	border: 12px solid #0a0a0a;
	border-bottom: 0;
	/* Niche wala border hataya taake lip fit ho sake */
	border-radius: 18px 18px 0 0;
	/* Upar se round, niche se sharp */
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	/* Screen edge highlight */
	position: relative;
	width: 100%;
	z-index: 2;
}

/* --- MacBook Pro Bottom Base (The Lip) --- */
/* Is section ko figma-laptop-box ke foran baad HTML mein daalna hai */
/* --- Modified MacBook Pro Keyboard Base (The Body) --- */
.macbook-bottom-lip {
	/* Base key height update, now it includes keyboard space */
	height: 40px;
	/* Slightly taller for keyboard view */
	background: linear-gradient(to bottom, #bdc3c7, #95a5a6, #7f8c8d);
	border-radius: 0 0 120px 120px / 0 0 18px 18px;
	/* MacBook base curve */
	position: relative;
	display: flex;
	align-items: top;
	/* Text ko top se align karein key area tak */
	justify-content: center;
	box-shadow:
		0 15px 35px rgba(0, 0, 0, 0.3),
		/* External Shadow */
		inset 0 2px 2px rgba(255, 255, 255, 0.4);
	/* Inner base edge */
	border-top: 1px solid #666;
	margin-top: -2px;
	/* Smooth transition from screen to base */
	z-index: 5;
	transition: all 0.3s ease;
	/* For screen interactions */
	overflow: visible;
	/* elements outside the lip are okay */
}

/* MacBook Pro Text on Bottom Bezel */
.macbook-bottom-lip::after {
	content: "MacBook Pro";
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
	font-size: 9px;
	color: #444;
	letter-spacing: 0.5px;
	font-weight: 500;
	margin-top: 6px;
	/* Position text on bezel */
}

/* --- Realistic Keyboard Layout Base --- */
/* Ye element screen ke niche keyboard row banayega */
.macbook-bottom-lip::before {
	content: "";
	position: absolute;
	top: 25px;
	/* Offset from bezel text */
	left: 20px;
	right: 20px;
	height: 12px;
	background: #1a1a1a;
	/* Darker keyboard base */
	border-radius: 2px;
	/* Simulate multiple keys using linear gradient 'gaps' */
	background-image:
		repeating-linear-gradient(90deg, #111 0, #111 2px, #333 2px, #333 3px, #1a1a1a 3px, #1a1a1a 12px),
		/* Side margins */
		linear-gradient(to bottom, #111, #333);
	background-size: 100% 100%, 100% 100%;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.9;
	z-index: 10;
}

/* --- Large Realistic Trackpad --- */
/* Keyboard se niche aur base ke center mein trackpad area */
.macbook-bottom-lip div#trackpad {
	position: absolute;
	bottom: -15px;
	/* Stick out from the very bottom edge */
	left: 50%;
	transform: translateX(-50%);
	width: 250px;
	height: 30px;
	background: linear-gradient(to bottom, #a0a0a0, #b0b0b0);
	border: 1px solid #777;
	border-radius: 6px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
	opacity: 0.8;
	z-index: 20;
}

/* Small detail: the click sound indent */
.macbook-bottom-lip div#trackpad::after {
	content: "";
	position: absolute;
	bottom: 2px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 2px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 2px;
}


/* --- Wrapper for Depth --- */
.macbook-wrapper {
	perspective: 1200px;
	/* Depth control */
	width: 800px;
	margin: 60px auto;
	position: relative;
}

/* --- Screen (Top Part) --- */
.figma-laptop-box {
	background: #000;
	border: 12px solid #1a1a1a;
	border-radius: 20px 20px 0 0;
	width: 100%;
	transform: rotateX(-10deg);
	/* Screen ko halka sa peeche tilt kiya */
	transform-origin: bottom;
	z-index: 2;
	position: relative;
	box-shadow: 0 40px 60px rgba(0, 0, 0, 0.3);
}

/* --- Keyboard Deck (Tilted towards you) --- */
.macbook-bottom-lip {
	height: 250px;
	/* Base ko bara kiya */
	background: linear-gradient(135deg, #d1d1d1, #999);
	border-radius: 0 0 25px 25px;
	margin-top: -15px;
	/* Screen ke sath overlap */
	transform: rotateX(60deg);
	/* Yahan se tumhari taraf jhuka hai */
	transform-origin: top;
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	border-top: 1px solid #777;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- Keys & Trackpad Area --- */
.macbook-bottom-lip::before {
	content: "";
	width: 85%;
	height: 150px;
	background: #111;
	margin-top: 20px;
	border-radius: 6px;
	/* Grid of keys */
	background-image: linear-gradient(90deg, #333 1px, transparent 1px),
		linear-gradient(0deg, #333 1px, transparent 1px);
	background-size: 25px 25px;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
	.macbook-bottom-lip {
		height: 30px;
		border-radius: 0 0 8px 8px;
	}

	.macbook-bottom-lip::before {
		/* Keyboard */
		display: none;
		/* Mobile pe keyboard complexity gandi lagegi */
	}

	.macbook-bottom-lip div#trackpad {
		display: none;
		/* Mobile trackpad also hide */
	}
}


/* --- 1. Main Wrapper --- */
.mbp-mockup-wrapper {
	width: 100% !important;
	max-width: 1280px;
	margin: 20px auto;
	position: relative;
	display: block;
}

/* Container for Aspect Ratio */
.mbp-container {
	position: relative;
	width: 100%;
	padding-top: 58.6%;
	/* MacBook Pro precise shape */
	margin: 0 auto;
	box-sizing: border-box;
}

/* --- 2. Laptop Screen (Bezel) --- */
.mbp-display {
	position: absolute;
	top: 0;
	left: 9.35%;
	right: 9.35%;
	width: 81.3%;
	height: 94%;
	/* Screen height adjusted to meet keyboard */
	margin: 0 auto;
	background-image: radial-gradient(#cfd0d1, #adadae);
	border: 1px solid #e5e7e9;
	border-radius: 1.8vw 1.8vw 0 0;
	z-index: 1;
	overflow: hidden;
}

.mbp-display .display-edge {
	width: 99.4%;
	height: 99.4%;
	margin: 0.3% auto;
	background-color: #262626;
	border-radius: 1.6vw 1.6vw 0 0;
	position: relative;
}

.mbp-display .display-edge .bezel {
	width: 100%;
	height: 100%;
	background-color: #010101;
	position: relative;
}

/* --- 3. THE FIX: Display Frame (Slider Area) --- */
.mbp-display .display-edge .bezel .display-frame {
	position: absolute;
	top: 3.5%;
	bottom: 0;
	/* Space khatam karne ke liye bottom 0 kiya */
	left: 1.5%;
	right: 1.5%;
	width: auto;
	height: 93% !important;
	/* Image ko bottom bezel tak stretch karne ke liye */
	background-color: #000;
	overflow: hidden;
	z-index: 5;
}

/* --- 4. Slider Items & Images Force-Fit --- */
/* Ye lines slider ko poori screen cover karne par majboor karti hain */
#heroSlider,
.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-item,
.item {
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.slider-full-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	/* Image realistic tareeqe se fit hogi, stretch nahi hogi */
	display: block;
}

/* --- 5. Branding & Bottom Lip --- */
.below-display {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 5%;
	background-color: #111;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 6;
}

.macbookpro {
	width: 8%;
	height: 12px;
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 145 20' %3E%3Cpath fill='%23D8D8DA' d='M0.5 0.6h2.67L9.6 16.23h0.08L16.11 0.6h2.67v18.55h-2.16V4.81h-1.05l2.51-3.7l-7.46 18.04H8.66L1.21 1.11 l2.51 3.7H2.66v14.33H0.5V0.6z M23.23 18.9c-0.67-0.33-1.19-0.81-1.56-1.41s-0.56-1.32-0.56-2.12v-0.03c0-1.14 0.42-2.05 1.27-2.73 c0.85-0.68 2.04-1.07 3.57-1.15l4.95-0.28v1.74l-4.69 0.28c-0.89 0.05-1.58 0.27-2.08 0.64c-0.49 0.38-0.74 0.88-0.74 1.5v0.03 c0 0.64 0.24 1.15 0.73 1.53s1.13 0.57 1.93 0.57c0.7 0 1.34-0.15 1.9-0.44c0.56-0.29 1.01-0.7 1.34-1.21 c0.33-0.51 0.49-1.09 0.49-1.74v-3.95c0-0.81-0.26-1.45-0.76-1.92c-0.51-0.47-1.23-0.7-2.17-0.7c-0.86 0-1.55 0.19-2.08 0.56 c-0.53 0.37-0.85 0.86-0.98 1.46l-0.03 0.12h-2.16l0.01-0.14c0.07-0.74 0.32-1.41 0.75-2.01s1.03-1.08 1.79-1.43 c0.76-0.36 1.67-0.53 2.71-0.53c1.05 0 1.96 0.18 2.73 0.54c0.77 0.36 1.36 0.87 1.78 1.52c0.42 0.66 0.63 1.43 0.63 2.32v9.24 h-2.24v-2.17h-0.05c-0.26 0.49-0.6 0.91-1.03 1.28c-0.43 0.36-0.91 0.65-1.45 0.85c-0.54 0.2-1.1 0.3-1.7 0.3 C24.67 19.4 23.9 19.24 23.23 18.9z M37.12 18.55c-0.93-0.57-1.65-1.38-2.15-2.42c-0.51-1.04-0.76-2.27-0.76-3.68v-0.01 c0-1.41 0.26-2.63 0.77-3.66s1.23-1.84 2.16-2.4c0.93-0.57 2.01-0.85 3.24-0.85c1.11 0 2.07 0.22 2.87 0.65 c0.8 0.43 1.43 0.99 1.88 1.68c0.46 0.69 0.73 1.41 0.83 2.17l0.01 0.1h-2.19l-0.03-0.1c-0.16-0.67-0.52-1.26-1.07-1.76 S41.36 7.5 40.38 7.5c-0.77 0-1.45 0.2-2.03 0.61c-0.58 0.41-1.04 0.98-1.36 1.72c-0.33 0.74-0.49 1.62-0.49 2.63v0.01 c0 1.04 0.17 1.92 0.49 2.66c0.33 0.74 0.79 1.3 1.38 1.7c0.59 0.39 1.27 0.59 2.04 0.59c0.92 0 1.66-0.23 2.23-0.7 c0.57-0.47 0.95-1.07 1.14-1.82l0.03-0.1H46l-0.01 0.09c-0.12 0.85-0.43 1.61-0.93 2.3c-0.5 0.68-1.15 1.22-1.94 1.62 c-0.79 0.4-1.7 0.6-2.71 0.6C39.15 19.4 38.05 19.12 37.12 18.55z M48.4 0.6h2.31v18.55H48.4V0.6z M49.56 17.1h5.5 c1.39 0 2.44-0.28 3.17-0.83c0.72-0.55 1.09-1.36 1.09-2.42v-0.03c0-0.72-0.17-1.32-0.5-1.8s-0.83-0.84-1.5-1.08 c-0.66-0.24-1.49-0.36-2.47-0.36h-5.28V8.59h4.63c1.37 0 2.42-0.27 3.14-0.8c0.72-0.53 1.09-1.3 1.09-2.3V5.47 c0-0.92-0.3-1.62-0.91-2.1c-0.61-0.48-1.47-0.73-2.6-0.73h-5.35V0.6h5.88c1.06 0 1.99 0.19 2.79 0.58c0.8 0.39 1.42 0.93 1.86 1.62 c0.45 0.69 0.67 1.5 0.67 2.43v0.03c0 0.64-0.15 1.26-0.44 1.84c-0.29 0.58-0.69 1.07-1.2 1.47c-0.51 0.4-1.08 0.65-1.72 0.74v0.05 c0.89 0.1 1.66 0.36 2.3 0.77c0.64 0.41 1.14 0.94 1.48 1.59c0.34 0.65 0.51 1.38 0.51 2.2v0.03c0 1.09-0.25 2.02-0.75 2.8 c-0.5 0.78-1.22 1.37-2.15 1.79c-0.93 0.42-2.06 0.62-3.38 0.62h-5.85V17.1z M66.26 18.56c-0.93-0.57-1.65-1.37-2.17-2.41 c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68c0.52-1.03 1.24-1.83 2.17-2.39c0.93-0.56 2.01-0.84 3.23-0.84 c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39c0.52 1.03 0.78 2.26 0.78 3.68v0.03c0 1.42-0.26 2.65-0.78 3.69 c-0.52 1.04-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85S67.19 19.12 66.26 18.56z M71.57 16.84 c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03c0-1.05-0.16-1.94-0.48-2.67s-0.78-1.3-1.36-1.68 C70.97 7.69 70.29 7.5 69.5 7.5c-0.77 0-1.45 0.19-2.04 0.59c-0.59 0.39-1.04 0.95-1.37 1.68c-0.33 0.73-0.49 1.62-0.49 2.67v0.03 c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7c0.59 0.39 1.27 0.59 2.06 0.59S71 17.23 71.57 16.84z M80.24 18.56 c-0.93-0.57-1.65-1.37-2.17-2.41c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68c0.52-1.03 1.24-1.83 2.17-2.39 c0.93-0.56 2.01-0.84 3.23-0.84c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39c0.52 1.03 0.78 2.26 0.78 3.68v0.03 c0 1.42-0.26 2.65-0.78 3.69c-0.52 1.04-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85C82.25 19.4 81.17 19.12 80.24 18.56z M85.55 16.84c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03c0-1.05-0.16-1.94-0.48-2.67 c-0.32-0.74-0.78-1.3-1.36-1.68c-0.59-0.39-1.27-0.58-2.06-0.58c-0.77 0-1.45 0.19-2.04 0.59c-0.59 0.39-1.04 0.95-1.37 1.68 c-0.33 0.73-0.49 1.62-0.49 2.67v0.03c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7c0.59 0.39 1.27 0.59 2.06 0.59 S84.97 17.23 85.55 16.84z M92.1 0.6h2.24v18.55H92.1V0.6z M93.83 11.68h0.55l5.86-5.9h2.71l-6.34 6.31h-0.18l-2.61 2.49V11.68z M95.45 12.76l1.49-1.49l6.2 7.88h-2.6L95.45 12.76z M110.44 0.6h2.31v18.55h-2.31V0.6z M111.6 10.47h4.86 c1.33 0 2.36-0.35 3.09-1.04c0.73-0.69 1.09-1.64 1.09-2.86V6.55c0-1.23-0.36-2.18-1.09-2.87c-0.73-0.69-1.76-1.03-3.09-1.03h-4.86 V0.6h5.45c1.17 0 2.19 0.25 3.09 0.75c0.89 0.5 1.59 1.19 2.1 2.08S123 5.35 123 6.52v0.03c0 1.17-0.26 2.21-0.76 3.11 s-1.21 1.6-2.1 2.11c-0.89 0.51-1.92 0.76-3.09 0.76h-5.45V10.47z M125.31 5.78h2.24v2.26h0.05c0.22-0.77 0.61-1.38 1.16-1.84 s1.2-0.68 1.95-0.68c0.2 0 0.37 0.01 0.53 0.03c0.16 0.02 0.28 0.04 0.37 0.06v2.17c-0.09-0.03-0.24-0.06-0.46-0.09 s-0.46-0.04-0.74-0.04c-0.57 0-1.08 0.13-1.51 0.39c-0.43 0.26-0.77 0.63-1 1.11c-0.24 0.48-0.35 1.07-0.35 1.74v8.25h-2.24V5.78z M135.07 18.56c-0.93-0.57-1.65-1.37-2.17-2.41c-0.52-1.04-0.78-2.27-0.78-3.68v-0.03c0-1.42 0.26-2.65 0.78-3.68 c0.52-1.03 1.24-1.83 2.17-2.39c0.93-0.56 2.01-0.84 3.23-0.84c1.23 0 2.32 0.28 3.25 0.84c0.93 0.56 1.65 1.36 2.17 2.39 c0.52 1.03 0.78 2.26 0.78 3.68v0.03c0 1.42-0.26 2.65-0.78 3.69s-1.24 1.84-2.17 2.4c-0.93 0.57-2.01 0.85-3.24 0.85 S136 19.12 135.07 18.56z M140.38 16.84c0.58-0.39 1.03-0.96 1.35-1.7c0.32-0.74 0.48-1.63 0.48-2.68v-0.03 c0-1.05-0.16-1.94-0.48-2.67c-0.32-0.74-0.78-1.3-1.36-1.68c-0.59-0.39-1.27-0.58-2.06-0.58c-0.77 0-1.45 0.19-2.04 0.59 c-0.59 0.39-1.04 0.95-1.37 1.68c-0.33 0.73-0.49 1.62-0.49 2.67v0.03c0 1.05 0.16 1.94 0.49 2.68c0.33 0.74 0.78 1.31 1.37 1.7 c0.59 0.39 1.27 0.59 2.06 0.59S139.8 17.23 140.38 16.84z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


.mbp-keyboard {
	width: 99.75%;
	height: 7.6%;
	margin: 0 auto;
	position: absolute;
	bottom: 0px;
	left: 0;
	right: 0;
	z-index: 100;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.mbp-keyboard .front {
	/* 	opacity:0; */
	width: 100%;
	height: 37.25%;
	position: absolute;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 0;
	background: linear-gradient(90deg, #68696b 0%, #757678 .15%, #a0a1a3 .3%, #cccdcf .5%, #e7e8ea .8%, #e8e9eb 1%, #dfe0e2 1.25%, #d1d2d4 1.5%, #adaeb0 2%, #a4a5a7 3%, #bbbdbf 4%, #e1e1e3 8%, #eaebed 15%, #e9eaec 25%, #e9eaec 75%, #eaebed 85%, #e1e1e3 92%, #bbbdbf 96%, #a4a5a7 97%, #adaeb0 98%, #d1d2d4 98.5%, #dfe0e2 98.75%, #e8e9eb 99%, #e7e8ea 99.2%, #cccdcf 99.5%, #a0a1a3 99.7%, #757678 99.85%, #68696b 100%);
	z-index: 100;
	border-radius: 1px;
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

.mbp-keyboard .opener-left {
	position: relative;
	width: 6.917%;
	height: 65.5%;
	z-index: 101;
	border-radius: 0 0 0 20px;
	background-color: #c1c2c6;
	background: linear-gradient(180deg, rgba(195, 198, 200, 0.5) 0%, rgba(199, 200, 204, 0.5) 60%, rgba(115, 125, 130, 0.4) 100%), radial-gradient(circle at right, rgba(189, 190, 193, 0.5) 0%, rgba(189, 190, 193, 0.5) 50%, rgba(166, 169, 172, 0.5) 80%, rgba(30, 34, 40, 0.75) 100%);
	background-blend-mode: darken;
}

.mbp-keyboard .opener-right {
	position: relative;
	width: 6.917%;
	height: 65.5%;
	z-index: 101;
	border-radius: 0 0 20px 0;
	background-color: #c1c2c6;
	background: linear-gradient(180deg, rgba(195, 198, 200, 0.5) 0%, rgba(199, 200, 204, 0.5) 60%, rgba(115, 125, 130, 0.4) 100%), radial-gradient(circle at left, rgba(189, 190, 193, 0.5) 0%, rgba(189, 190, 193, 0.5) 50%, rgba(166, 169, 172, 0.5) 80%, rgba(30, 34, 40, 0.75) 100%);
	background-blend-mode: darken;
}

.mbp-keyboard .bottom-left {
	display: block;
	position: relative;
	width: 50%;
	height: 58%;
	top: 10%;
	z-index: 99;
	background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
	border-bottom-left-radius: 25% 60%;
}

.mbp-keyboard .bottom-right {
	display: block;
	position: relative;
	width: 50%;
	height: 58%;
	top: 10%;
	z-index: 99;
	background: linear-gradient(180deg, #e5e6e9 0%, #909193 65%, #4e4f51 90%, #323234 96%, #29292b 100%);
	border-bottom-right-radius: 25% 60%;
}

.mbp-shadow {
	width: 95%;
	height: 60%;
	display: flex;
	justify-content: center
}

.mbp-shadow .shadow-left {
	display: block;
	position: relative;
	width: 50%;
	height: 100%;
	top: 10%;
	z-index: 90;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
	filter: blur(2px);
	background-blend-mode: multiply;
	border-top-left-radius: 20% 90%;
}

.mbp-shadow .shadow-right {
	display: block;
	position: relative;
	width: 50%;
	height: 100%;
	top: 10%;
	z-index: 90;
	background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(8, 11, 17, .85) 2.5%, rgba(29, 32, 36, .4) 15%, rgba(255, 255, 255, 0) 50%);
	filter: blur(2px);
	background-blend-mode: multiply;
	border-top-right-radius: 20% 90%;
}


/* Text Side Styling */
.text-side {
	position: relative;
	z-index: 10;
}

.hero-title {
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.5rem);
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 25px;
}

.view-more-btn {
	border: 2px solid #ffc107;
	color: #fff;
	padding: 10px 40px;
	border-radius: 50px;
	text-decoration: none;
	font-weight: 600;
	display: inline-block;
}

/* --- Owl Dots ko indicators jaisa banane ke liye --- */
.owl-dots {
	position: absolute;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.owl-dot span {
	width: 30px !important;
	height: 5px !important;
	background: rgba(255, 255, 255, 0.5) !important;
	display: block;
}

.owl-dot.active span {
	background: #fff !important;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 991px) {
	.slider-content-box {
		height: 400px;
		background-size: cover;
		background-position: center;
		margin-top: 0;
	}

	.text-side {
		text-align: center;
		padding-top: 60px;
	}

	.slider-logo {
		left: 50%;
		transform: translateX(-50%);
	}
}

.owl-theme .owl-dots .owl-dot span {
	width: 10px !important;
	height: 10px !important;
	margin: 5px 0px;
	background: #D6D6D6;
	display: block;
	-webkit-backface-visibility: visible;
	transition: opacity .2s ease;
	border-radius: 30px;
}


/* MacBook Specific Improvements */
.display-frame {
	position: absolute;
	top: 0;
	bottom: 5% !important;
	/* Lip area chhor kar */
	left: 0;
	right: 0;
	overflow: hidden;
	z-index: 5;
}

/* Status Bar Overlay */
.mac-status-bar {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 26px;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 12px;
	color: #fff;
	font-size: 11px;
	font-weight: 500;
	z-index: 99;
	/* Slider ke upar */
	border-bottom: 0.5px solid rgba(255, 255, 255, 0.1);
}

.mac-status-bar .left-icons,
.mac-status-bar .right-icons {
	display: flex;
	align-items: center;
	gap: 12px;
}

.mac-status-bar i {
	font-size: 13px;
}

/* Force Images to cover screen behind bar */
#heroSlider,
.owl-stage-outer,
.owl-stage,
.owl-item,
.item {
	height: 100% !important;
}

.slider-full-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Existing Mockup Styles ... (Baqi aapka purana CSS) */


/* Phone Mockup */


/* Phone Background Container */
/* Phone Frame Setup */
.darson-phone-wrapper {
	position: relative;
	max-width: 390px;
	margin: 0 auto;
	width: 100%;
}

.phone-frame-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ❌ THE FIX: Inner Screen content is confined here */
.phone-inner-screen {
	position: absolute;
	/* In percentages to scale with the image */
	top: 13.5%;
	left: 8.5%;
	right: 8.5%;
	bottom: 8.5%;

	background-color: transparent;
	/* or black if needed */
	overflow: hidden;
	/* Prevent overflow */
	display: flex;
	flex-direction: column;
}

/* 1. Header Area Styling */
.phone-header {
	background-color: #00301a;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	height: 10%;
	/* Percentage based for scaling */
}

.header-logo-side img {
	height: clamp(20px, 3vh, 30px);
}

.menu-btn-icon {
	background: transparent;
	border: none;
	color: #ffc107;
	font-size: 1.2rem;
}

/* 2. Scrollable Content Fixing Overflow */
.phone-scrollable-content {
	flex: 1;
	overflow-y: auto;
	/* Force vertical scroll only */
	overflow-x: hidden;
	/* Absolutely no horizontal scroll */

	padding-top: 50px;
	height: 100%;
	/* Fixed height to force internal scroll */
	display: flex;
	flex-direction: column;
	justify-content: center;
}


/* Hide Scrollbar */
.phone-scrollable-content::-webkit-scrollbar {
	display: none;
}

.phone-scrollable-content {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

/* Content Styling */
.darson-form-title {
	font-weight: 800;
	font-size: 1.2rem;

}

.darson-input {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 0.85rem;
	padding: 12px 14px;
	margin-bottom: 14px !important;

}

/* Buttons */
.btn-darson-green {
	background-color: transparent;
	color: #fff;
	border-radius: 10px;
	border: 1px solid white;
	font-family: 'Axiforma';
	font-weight: 300 !important;
	font-size: 14px;

}

.btn-darson-black {
	background: linear-gradient(180deg, #051031 0%, #002699 100%);
	color: #fff;
	border-radius: 10px;
	border: none;
	padding: 14px !important;
	font-size: 14px;
	font-family: 'Axiforma';
	font-weight: 300 !important;
	border: 2px double white !important;

}

.btn-darson-black:hover {
	background: linear-gradient(180deg, #002699 0%, #051031 100%);
	color: #fff;
	border-radius: 10px;
	border: none;

}


.btn-darson-main-btn {
	background: linear-gradient(180deg, #051031 0%, #002699 100%);
	color: #fff;
	border: 2px double white !important;
	padding: 14px 50px !important;
	font-size: 14px;
	font-family: 'Axiforma';
	font-weight: 300 !important;
	border-radius: 100px;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;

}

.btn-darson-main-btn:hover {
	background: linear-gradient(180deg, #002699 0%, #051031 100%);
	color: #fff;

	border: 2px double white !important;

}


/* Hover Effect */
.btn-darson-green:hover {
	background-color: black;
	color: white;
}

/* -------------------------------
   RESPONSIVE SCALING FIX
   ------------------------------- */
@media (max-width: 480px) {
	.darson-phone-wrapper {
		max-width: auto;
	}

	.phone-inner-screen {
		top: 18%;
		left: 8%;
		right: 8%;
		bottom: 8%;
	}

	.phone-scrollable-content {
		padding: 10px 8px;
	}

	.darson-form-title {
		font-size: 1rem;
	}

	/* .darson-input {
        font-size: 0.75rem;
        padding: 6px 10px;
        margin-bottom: 5px !important;
    } */
	.btn-darson-green,
	.btn-darson-black {
		font-size: 0.8rem;
	}
}


/* why darson css */

.bgcircle {
	position: relative;
	width: 100vh;
	height: 100vh;
	/* background: var(--primary-color); */
	background: linear-gradient(180deg, #002699 0%, #051031 100%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	margin-left: -80px;


}


.content-whydarson h2 {
	color: white;
	font-size: 60px;
	text-transform: uppercase;
	font-family: 'Axiforma';
	font-weight: 900;
}

.content-whydarson p {
	color: white;
	font-size: 15px;
	font-family: 'Axiforma';

}


.content-whydarson.px-5 {
	padding-left: 180px !important;
	padding-right: 83px !important;
}


.darsonlog-whysection {
	position: absolute;
	top: 0;
	right: 0;
}

.right-circle-why-darson-parent {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.span-circle {
	width: 80%;
	height: 80vh;
	background: linear-gradient(180deg, #002699 0%, #051031 100%);
	border-radius: 50%;
	position: absolute;
	top: 3%;
	right: -10%;
	z-index: -1;

}

#whydarson {
	display: flex;
	justify-content: center;
	align-items: center;
}

@media screen and (min-width: 1024px) and (max-width: 1600px) {

	.proce-tree-text-second {
		margin-top: 2% !important;
		margin-right: 10% !important;
	}


	/* .proce-tree-text-one {
    margin-top: 6% !important;
    margin-right: 15% !important;
} */


	.bgcircle {
		position: relative;
		width: auto;
		height: auto;
		background: var(--primary-color);

		border-radius: 0%;
		margin-left: 0px;
	}

	.content-whydarson.px-5 {
		padding: 50px !important;
	}

	.darsonlog-whysection {
		position: absolute;
		top: -50px;
		right: -50px;
	}

	.span-circle {
		width: 50%;
		height: 50vh;
		background: var(--primary-color);
		border-radius: 50%;
		position: absolute;
		top: 66%;
		right: -10%;
		z-index: -1;
	}

	.span-circle {
		width: 73%;
		height: 59vh;
		background: var(--primary-color);
		border-radius: 50%;
		position: absolute;
		top: 16%;
		right: -10%;
		z-index: -1;
	}


	img#investiment-img {
		width: 23% !important;
		position: absolute;
		left: 24% !important;
		bottom: 59% !important;
		z-index: 999;
	}

	.process-tree-section p {
		font-size: 13px !important;
	}


	img#growth-img {
		position: absolute;
		right: 21% !important;
		top: 0% !important;
		width: 20% !important;
		z-index: 999;
	}

	img#support-img {
		position: absolute;
		right: 20% !important;
		bottom: 50% !important;
		width: 20% !important;
		z-index: 999;
	}

	/* img#invest-line-img {
    position: absolute;
    top: 29% !important;
    left: 21% !important;
    width: 20% !important;
}

img#root-line-img {
    position: absolute;
    bottom: 49% !important;
    left: 20% !important;
    width: 30% !important;
} */

	img#invest-line-img {
		position: absolute;
		top: 30% !important;
		/* Thoda adjust kiya */
		left: 22% !important;
		width: 18% !important;
		/* Width ko fix rakha */
		transform: translate(-10%, -10%);
		/* Fine-tuning ke liye */
	}

	img#root-line-img {
		position: absolute;
		bottom: 45% !important;
		left: 18% !important;
		width: 28% !important;
		transform: translate(-5%, 5%);
	}
}


@media (max-width: 991px) {
	.hero-whydarson {
		background-color: var(--primary-color);
	}

	#whydarson {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.bgcircle {
		width: auto;
		height: auto;
		border-radius: 1%;
		margin-left: 0px;
		overflow-x: hidden;
	}

	.darsonlog-whysection {
		display: none;
	}

	.content-whydarson.px-5 {
		padding-top: 30px;
		padding-bottom: 30px;
		padding-left: 15px !important;
		padding-right: 15px !important;
	}

	.span-circle {
		width: 100%;
		height: 63vh;
		background: var(--primary-color);
		border-radius: 50%;
		position: absolute;
		top: 15%;
		right: -10%;
		z-index: -1;
	}


}


/* why darson css end */


.step-section {
	position: relative;
}

section.accountsetupbg {
	margin-top: -14%;
}

.setup-text {
	position: absolute;
	top: 60%;
	width: stretch;
	margin: auto;
}

.deposite-your-payment {
	margin-top: -20%;
}


.get-payment {
	margin-top: -23%;
}

button.click-account {
	padding: 10px 20px;
	border: none;
	border-radius: 100px;
}

/* Account Opening End */


/* Product & Services */
img.img-fluid.bullish {
	/* height: 80vh; */
}

img.img-fluid.bearish {
	/* height: 80vh; */
	float: right;
}


.contain-fluid.p-0.bull-container {
	margin-top: -6%;
	position: relative;
	z-index: -1;
}

/* Product & Services End */

.card-body {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

	border-radius: 10%;
	color: white;
	font-weight: 500;
	font-size: 20px;
}

.container.four-card {
	margin-top: -10%;
}


/* Process Tree */
.process-tree-section {

	position: relative;

}

.proce-tree-text-one {
	margin-top: 20%;

}

.proce-tree-text-second {
	margin-top: 10%;

}

.process-tree-section p {

	font-family: 'glory-M';
	font-size: 14px;

}

img#growth-img {
	position: absolute;
	right: 23%;
	top: 0%;
	width: 15%;
	z-index: 999;
}

img#investiment-img {
	position: absolute;
	left: 25%;
	bottom: 50%;
	width: 22%;
	z-index: 999;
}

img#support-img {
	position: absolute;
	right: 19%;
	bottom: 45%;
	width: 15%;
	z-index: 999;
}


img#root-line-img {
	position: absolute;
	bottom: 36% !important;
	left: 25% !important;
	width: 26%;
}


img#invest-line-img {
	position: absolute;
	top: 27% !important;
	left: 24% !important;
	width: 15%;

}

img#growth-line-new-img {
	position: absolute;
	top: 10%;
	right: 25%;
	width: 13%;
}

img#support-line-img {
	position: absolute;
	right: 25%;
	bottom: 50%;
	width: 12%;
}

/* Process Tree End */


.span-tree-heading {
	font-size: 83px;
	font-family: 'glory';
	text-transform: uppercase;
	background: linear-gradient(0deg, #051031 0%, #002699 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}


/* Tree for Mobile and Tablet */
.process-tree-for-mobile-tablet {
	background-image: url('../images/home-page-images/tree-new.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;

}

.card.shadow.p-1.p-4.mb-4 {
	background: #ffffff85;
}

/*  */


/* Account form css */


/* Sentiment Polling section */
/* --- SECTION WRAPPER --- */

.sp-section-wrapper {
	width: 100%;
}

.BIGBULL img {
	transform: scale(1.5);
	margin-left: -100px;
}

@media (max-width: 768px) {
	.BIGBULL img {
		display: none;
	}
}

/* --- HEADING PILL --- */
.sp-heading-pill {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

	padding: 35px 60px;
	border-radius: 26px;
	display: inline-block;
	align-self: center;
}

.sp-main-title {

	color: #ffffff;
	font-weight: 900;
	font-family: 'glory';
	font-size: 60px;
	letter-spacing: 1px;

}

/* --- DIVIDER --- */
.sp-section-divider {
	width: 100%;
	height: 3px;
	background-color: #1a2a47;
	margin-left: 5px;
}

/* --- MAIN CARD --- */
.sp-poll-main-card {
	width: 100%;
	min-height: 450px;
	/* Tall height jesa aap ne kaha */
	background-image: url('../images/home-page-images/bg.png');
	/* Card ke background ki image */
	background-size: cover;
	background-position: center;
	border-radius: 40px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
	background-color: #1a2a47bd;
}

.sp-question-text {
	color: #ffffff;
	font-weight: 800;
	font-size: clamp(1.1rem, 2.5vw, 1.8rem);
	text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.8);
	max-width: 85%;
}

/* --- PURE IMAGE BUTTONS --- */
.sp-image-btn {
	border: none;
	width: 180px;
	/* Buttons ka size */
	height: 80px;
	border-radius: 20px;
	cursor: pointer;
	background-size: contain;
	/* Ya 'cover' agar image poori fit karni ho */
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.sp-image-btn:hover {
	transform: scale(1.08);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

/* Bull Button Background */
.sp-btn-bull-bg {
	background-color: #00a650c2;
	/* Green fallback */
	background-image: url('../images/home-page-images/bull.png');
	/* Yahan bull wali image ka path dein */
}

/* Bear Button Background */
.sp-btn-bear-bg {
	background-color: #ff0000b6;
	/* Red fallback */
	background-image: url('../images/home-page-images/bear.png');
	/* Yahan bear wali image ka path dein */
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
	.sp-heading-pill {
		margin: -350px auto 15px auto;
		padding: 25px 40px !important;
	}

	.sp-section-divider {
		width: 90%;
		margin: 0 auto 20px auto;
	}

	.sp-image-btn {
		width: 140px;
		height: 65px;
	}

	.sp-poll-main-card {
		min-height: 380px;
		border-radius: 30px;

	}

	.sp-main-title {
		font-size: 36px !important;
		letter-spacing: 0.5px !important;
		text-align: center;
	}

}

@media (max-width: 786px) {

	.sp-section-wrapper {
		width: 100%;
		margin-bottom: -333px !important;
	}

}

@media (max-width: 1024px) {
	.sp-section-wrapper {
		width: 100%;
		margin-bottom: -133px;
	}


	.sp-main-title {
		color: #ffffff;
		font-weight: 900;
		font-family: 'glory';
		font-size: 35px;
		letter-spacing: 1px;
	}

}


@media (max-width: 1399px) {

	.sp-heading-pill {
		padding: 25px 40px !important;
		border-radius: 20px;
	}

	.sp-main-title {
		font-size: 45px !important;
	}


}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
	.sp-heading-pill {
		padding: 25px 40px !important;
		border-radius: 20px;
	}

	.sp-main-title {
		font-size: 42px !important;
	}
}

/* Mobile (≤786px) */
@media (max-width: 786px) {
	.sp-heading-pill {
		padding: 18px 20px !important;
		border-radius: 16px !important;
		width: 100%;
		/* full width pill */
	}


	.sp-main-title {
		font-size: 36px !important;
		letter-spacing: 0.5px !important;
		text-align: center;
	}

}

/* Sentiment Polling section */


/* form section */


/* 3rd last section */


/* Section 3 Specific Styles */

@media (max-width: 768px) {
	.section3rd {
		margin-top: -350px;
		align-items: center;

	}

	.section3-wrapper img {
		width: 495px;
		max-width: 475px;
		height: auto;
	}


	.section3rdform {
		align-items: center;
	}
}


@media (max-width: 1399px) {


	.section3-main-title {
		font-size: 40px !important;
		text-align: center;
	}

}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
	.section3-main-title {
		color: #0b1e3b;
		font-weight: 900;
		font-family: 'glory';
		text-transform: uppercase;
		font-size: 45px !important;
		text-align: center;
	}
}

/* Mobile (786px) */
@media (max-width: 786px) {
	.section3-main-title {
		font-size: clamp(7vw);
		text-align: center;
		/* optional */
	}
}

.section3-main-title {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-weight: 900;
	font-family: 'glory';
	text-transform: uppercase;
	font-size: 65px;
	text-align: center;
}

.section3-card-container {
	background-color: transparent;
	border: 3px solid #1a2a47;
	border-radius: 40px;
	padding: 3rem 2rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Input Fields Style */
input.section3-input-style {
	background-color: #323d52 !important;
	/* Image wala dark blue/grey color */
	border: none !important;
	border-radius: 50px !important;
	padding: 28px 25px !important;
	color: #ffffff !important;
	font-size: 1rem;
	transition: all 0.3s ease;
}

input.section3-input-style::placeholder {
	color: #b0bec5;
	font-size: 0.9rem;
}

input.section3-input-style:focus {
	background-color: #3d4a63 !important;
	box-shadow: 0 0 8px rgba(50, 61, 82, 0.4) !important;
	outline: none;
}

/* Submit Button Style */
.section3-btn-submit {
	border-radius: 50px !important;
	padding: 10px 70px !important;
	font-weight: 700 !important;
	border: 2px solid #1a2a47 !important;
	color: #1a2a47 !important;
	background-color: transparent !important;
	transition: 0.3s ease !important;
}

.section3-btn-submit:hover {
	background-color: #1a2a47 !important;
	color: #ffffff !important;
}

/* Responsive Fixes */
@media (max-width: 768px) {
	.section3-card-container {
		padding: 2rem 1.5rem;
		border-radius: 30px;
	}

	.section3-btn-submit {
		width: 100%;
		/* Mobile par button full width ho jayega */
	}
}

.accounts-mini {
	margin-top: 20px;
}

/* Smaller Heading */
.accounts-mini-title {
	font-size: 28px;
	font-weight: 1200;
	color: #2f3854;
	margin-bottom: 12px;
	font-family: 'glory';
	font-style: italic;
}

/* Smaller Box */
.accounts-mini-box {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

	border-radius: 18px;
	padding: 18px 20px;
	display: inline-block;
	min-width: 220px;

}


.accounts-mini-box {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

	border-radius: 23px;
	padding: 25px 20px;
	display: inline-block;
	min-width: 456px;
}


/* Number */
.accounts-mini-box span {
	color: #fff;
	font-size: 44px;
	font-weight: 800;
	font-style: italic;
	font-family: 'glory';
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.accounts-mini-title {
		font-size: 32px;
	}

	.accounts-mini-box {
		min-width: 450px;
		padding: 25px;
	}

	.accounts-mini-box span {
		font-size: 34px;
	}
}

/* form section */


/* footer */
.footer-main {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

	color: #ffffff;
	padding: 5% 0% 18% 0%;
	position: relative;
	overflow: hidden;
	border-top-left-radius: 50px;
	/* As seen in image */
	border-top-right-radius: 50px;
	/* width: 98%;
            margin-left :20px; */
}

.scroll-social-panel {
    display: flex;
    gap: 12px;
    
    align-content: space-around;
    justify-content: center;
    flex-direction: column;
    position: fixed;
    right: 2.5%;
    background: #DDBF5A;
    padding: 20px 10px;
    border-radius: 10px;
    z-index: 99;
}
.scroll-social-panel a {
	background: #ffffff;
	color: #00051d;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	text-decoration: none;
	font-size: 16px;
}

.fixed-position {
    position: fixed;
    bottom: 3%;
    right: 2%;
}

/* 3 Column Grid Layout */
.footer-grid {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.2fr 0.8fr 1.2fr;
	gap: 50px;
	position: relative;
	z-index: 10;
}

/* Column 1: Logo & Basic Info */
.col-info .logo-wrap {
	margin-bottom: 25px;
	display: flex;
	justify-content: space-around;
}


.tagline {
	font-size: 13px;
	line-height: 1.8;
	color: #d1d1d1;
	margin-bottom: 25px;
	max-width: 380px;
}

.social-icons {
	display: flex;
	gap: 12px;
	margin-bottom: 30px;
	align-content: space-around;
	justify-content: center;
}

.social-icons a {
	background: #ffffff;
	color: #00051d;
	width: 35px;
	height: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	text-decoration: none;
	font-size: 16px;
}

.address-box {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	font-size: 11px;
	color: #9da3af;
}

.address-box strong {
	color: #fff;
	display: block;
	margin-bottom: 5px;
}

/* Column 2: Navigation Links */
.col-links {
	display: flex;
	gap: 27px;
	margin-top: 107px;
	justify-content: flex-start;
	align-content: space-around;
	flex-direction: column;
	flex-wrap: wrap;
	padding-right: 65px;
}

* .col-links a {
	color: #e2b74a;
	/* Golden color from image */
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	transition: 0.3s;
}

.col-links a:hover {
	color: #ffffff;
	padding-left: 5px;
}

/* Column 3: Pill Buttons */
.col-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	align-content: center;
	margin-top: 70px;
}

.left-col,
.right-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pill-btn {
	border: 3px solid #ffffff;
	border-radius: 10px;
	padding: 10px 5px;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
	transition: 0.3s ease;
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

}

.pill-btn:hover {
	background: #fff;
	color: #00051d;
}

.full-width-btn {
	grid-column: span 1;
}

/* Background Giant Text - DARSON */
.bg-text-watermark {
	position: absolute;
	bottom: -50px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 14vw;
	font-weight: 900;
	color: transparent;
	-webkit-text-stroke: 1.1px rgb(252, 252, 252);
	letter-spacing: -5px;
	white-space: nowrap;
	z-index: 1;
	pointer-events: none;
	text-transform: uppercase;
	font-family: 'glory';
}


/* --- RESPONSIVE SETTINGS --- */
@media (max-width: 768px) {

	.footer-main {
		width: 100%;
		margin: 0;
		padding: 30px 20px 100px;
		border-radius: 25px 25px 0 0;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 25px;
		text-align: left;
		/* 🔥 main change */
	}

	/* LOGO */
	.logo-wrap {
		justify-content: flex-start !important;
	}

	.logo-wrap img {
		width: 170px;
	}

	/* TAGLINE */
	.tagline {
		font-size: 13px;
		line-height: 1.6;
		margin: 10px 0 20px;
		max-width: 100%;
		color: #cbd5e1;
		text-align: left;
	}

	/* SOCIAL ICONS */
	.social-icons {
		justify-content: flex-start;
	}

	/* ADDRESS */
	.address-box {
		grid-template-columns: 1fr;
		gap: 15px;
		font-size: 12px;
		line-height: 1.5;
		text-align: left;
	}

	/* LINKS */
	.col-links {
		margin-top: 10px;
		padding: 0;
		gap: 10px;
		align-items: flex-start;
		align-content: flex-start;
	}

	.col-links a {
		font-size: 14px;
	}

	/* BUTTONS */
	.col-btns {
		grid-template-columns: 1fr;
		margin-top: 15px;
		gap: 10px;
	}

	.pill-btn {
		width: fit-content;
		padding: 10px 14px;
		font-size: 12px;
		text-align: left;
		/* 🔥 important */
		display: none;
	}

	.right-col {
		margin-top: 8px;
		display: none;


	}

	/* WATERMARK */
	.bg-text-watermark {
		font-size: 55px;
		bottom: 10px;
		opacity: 0.15;
	}
}

/* HIDE BY DEFAULT */
.ff-col-btns-mobile {
	display: none;
}


/* MOBILE */
@media (max-width: 768px) {

	.ff-col-btns-mobile {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-top: 20px;
	}


	.ff-col-btns-mobile .ff-pill-btn {
		transition: 0.3s ease;
	}

	/* ACTIVE STATE (mobile click effect 🔥) */
	.ff-col-btns-mobile .ff-pill-btn:active {
		background: #fff;
		color: #00051d;
	}


	/* BUTTON STYLE */
	.ff-col-btns-mobile .ff-pill-btn {
		padding: 12px 8px;
		border: 1.5px solid #ffffff;
		border-radius: 50px;
		color: #ffffff;
		text-decoration: none;
		font-size: 12px;
		text-align: center;
		background: transparent;
	}

	/* LAST BUTTON CENTER */
	.ff-col-btns-mobile .ff-pill-btn:last-child {
		grid-column: 1 / 3;
	}

}

/* footer */

@media (max-width: 768px) {
	.section3rd {
		margin-top: -350px;
		align-items: center;

	}

	.section3-wrapper img {
		width: 495px;
		max-width: 475px;
		height: auto;
	}


	.section3rdform {
		align-items: center;
	}
}


@media (max-width: 1399px) {


	.section3-main-title {
		font-size: 40px !important;
		text-align: center;
	}

}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
	.section3-main-title {
		color: #0b1e3b;
		font-weight: 900;
		font-family: 'glory';
		text-transform: uppercase;
		font-size: 45px !important;
		text-align: center;
	}
}

/* Mobile (786px) */
@media (max-width: 786px) {
	.section3-main-title {
		font-size: clamp(7vw);
		text-align: center;
		/* optional */
	}
}

.section3-main-title {
	color: #0b1e3b;
	font-weight: 900;
	font-family: 'glory';
	text-transform: uppercase;
	font-size: 65px;
	text-align: center;
}

.section3-card-container {
	background-color: transparent;
	border: 3px solid #1a2a47;
	border-radius: 40px;
	padding: 3rem 2rem;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

/* Input Fields Style */
input.section3-input-style {
	background: linear-gradient(0deg, #051031 0%, #002699 100%);

	border: none !important;
	border-radius: 50px !important;
	padding: 28px 25px !important;
	color: #ffffff !important;
	font-size: 1rem;
	transition: all 0.3s ease;
}

input.section3-input-style::placeholder {
	color: #b0bec5;
	font-size: 0.9rem;
}

input.section3-input-style:focus {
	background-color: #3d4a63 !important;
	box-shadow: 0 0 8px rgba(50, 61, 82, 0.4) !important;
	outline: none;
}

/* Submit Button Style */
.section3-btn-submit {
	border-radius: 50px !important;
	padding: 10px 70px !important;
	font-weight: 700 !important;
	border: 2px solid #1a2a47 !important;
	color: #1a2a47 !important;
	background-color: transparent !important;
	transition: 0.3s ease !important;
}

.section3-btn-submit:hover {
	background-color: #1a2a47 !important;
	color: #ffffff !important;
}

/* Responsive Fixes */
@media (max-width: 768px) {
	.section3-card-container {
		padding: 2rem 1.5rem;
		border-radius: 30px;
	}

	.section3-btn-submit {
		width: 100%;
		/* Mobile par button full width ho jayega */
	}
}

/* Account form css end */


#map {
	width: 100%;
	height: 100vh;
	/* Full screen map */
	position: relative;
}

/* Marker Popup Styling */
.mapboxgl-popup-content {
	border-radius: 12px;
	padding: 15px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.popup-title {
	font-weight: bold;
	font-size: 16px;
	margin-bottom: 5px;
	color: #020b20;
	/* Dark Navy from your previous designs */
}

.popup-desc {
	font-size: 14px;
	color: #555;
}


/* preloader */
/* --- Video Preloader Styling --- */
#video-preloader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #000;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	transition: opacity 0.8s ease, visibility 0.8s ease;
}

#fightVideo {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	/* ❌ THE FIX: Video proportional rahegi bina stretch hue */
	object-fit: cover;
}

/* Hide Scrollbar during loading */
body.loading-active {
	overflow: hidden;
}

/* --- Content Hidden Initially --- */
.main-site-content {
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.content-visible {
	opacity: 1;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	#fightVideo {
		object-fit: contain;
		/* Mobile par poori video frame mein dikhegi */
	}
}

/* preloader end */


/* Animation Keyframes */
@keyframes ticker-move {
	0% {
		transform: translateX(0);
	}

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

/* Pause on Hover (Optional) */
.ticker-container:hover .ticker-wrapper {
	animation-play-state: paused;
}

/* 6. SECONDARY ACTIONS & SEARCH */
.secondary-bar {
	background: #f8f9fa;
	padding: 20px 2%;

}

.btn-questionair a {
	text-decoration: none;

	padding: 10px 40px;
	color: white;
	border-radius: 100px;
	background: #262626b8;
	margin-right:10px;
}


span.question-question-text {
	font-size: 23px;
	color: white;
	font-family: 'glory';
	text-transform: uppercase;
	text-decoration: underline;
}


.search-wrapper {
	position: relative;
	min-width: 160px;
}

.search-wrapper input {
    background: var(--light-bg);
    border: 2px solid var(--primary-color);
    border-radius: 15px;
    padding: 8px;
    width: 100%;
    /* font-weight: 500; */
    /* box-shadow: 4px 4px 0px var(--primary-color); */
    font-family: 'Axiforma', sans-serif;
    color: var(--primary-color);
    font-size: 12px;
}

.search-wrapper i {
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	color: var(--primary-color);
}

/* 7. MOBILE OFF-CANVAS STYLING */
.offcanvas {
	background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 100%);
	border-left: 5px solid var(--brand-green);
	font-family: 'Axiforma', sans-serif;
}

.offcanvas-header {
	border-bottom: 1px solid #eee;
	background: var(--light-bg);
}

.mobile-nav-link {
	font-size: 15px;
	font-weight: 500;
	color: var(--primary-color);
	padding: 12px 20px;
	border-radius: 10px;
	display: block;
	text-decoration: none;
	margin-bottom: 5px;
	transition: 0.3s;
	font-family: 'Axiforma', sans-serif;
}

.mobile-nav-link:hover {
	background: var(--brand-green);
	color: var(--white) !important;
	padding-left: 30px;
}

/* 8. RESPONSIVE STYLES (SAB SE NEECHE) */
@media (max-width: 1199px) {

	/*.desktop-nav,*/
	/*.desktop-btns {*/
	/*	display: none !important;*/
	/*}*/

	.navbar-container {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}

	.span-circle {
		width: 0;
		height: 0;
	}
}


@media (max-width: 767px) {


	nav.breadcrumb-nav {
    margin: auto !important;}
	.custom-breadcrumb {
	margin-top: 10px;
	}
	.page-title {
		font-size: 20px;
		margin: auto;
	}



	.deposite-your-payment {
		margin-top: 0%;}
.span-circle{
	display: none;}
	.mac-status-bar {
		height: 16px !important;
	}

	span.question-question-text {
		font-size: 16px;
	}

	.btn-questionair a {
		padding: 6px 20px;
		margin: 10px
	}

	.l-a-d {
		margin-top: 0%;
	}

	.get-payment {
		margin-top: 0%;
	}

	.span-tree-heading {
		font-size: 40px;

	}
}


@media (max-width: 1440px) {
	.proce-tree-text-second {
		margin-top: 0% !important;
		margin-right: 0% !important;
	}

	img#support-line-img {
		width: 14% !important;
	}

	.proce-tree-text-one {
		margin-top: 6% !important;
		margin-right: 0% !important;
	}

	.span-circle {
		width: 97% !important;
		height: 60vh !important;
		background: var(--primary-color);
		border-radius: 50%;
		position: absolute;
		top: 16%;
		right: -10%;
		z-index: -1;
	}

}


#tree12 {
	background-image: url('../images/home-page-images/Group\ 27.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

}


div#tree {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ticker-container {
    background: #131722; /* TradingView Dark Theme */
    overflow: hidden;
    width: 100%;
    padding: 12px 0;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #2a2e39;
    /* Hardware acceleration for the container */
    contain: paint;
    position: relative;
    box-sizing: border-box;
}

/* 2. Wrapper - Blur & Jump Fix */
#ticker-target {
    display: inline-flex;
    white-space: nowrap;
    width: max-content;
    will-change: transform; /* Browser ko pehle batata hai ke move hona hai */
    transform: translateZ(0); /* 3D transform force karta hai GPU use karne ko */
    backface-visibility: hidden;
    perspective: 1000px;
    -webkit-font-smoothing: antialiased; /* Text sharpness ke liye */
    -moz-osx-font-smoothing: grayscale;
}

/* 3. Animation Logic - Slow & Smooth */
.ticker-animate {
    /* Agar 1000s abhi bhi chahiye to sahi hai, 
       lekin smooth slow speed ke liye 250s-400s ideal hai */
    animation: ticker-scroll 1200s linear infinite; 
}

@keyframes ticker-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Hover par pause */
.ticker-animate:hover {
    animation-play-state: paused;
}

/* 4. Ticker Item - Sharp Text Styling */
.ticker-item {
    padding: 0 40px;
    display: flex;
    align-items: center;
    /* Font selection jo digital screens par sharp lagti hai */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-weight: 600; /* Medium Bold taake blur na ho */
    font-size: 16px;
    border-right: 1px solid #363a45;
    white-space: nowrap;
    /* Item level par bhi acceleration taake letters shake na karein */
    transform: translateZ(0);
}

/* Text Colors */
.s-symbol { color: #ffffff; margin-right: 12px; }
.s-price { color: #d1d4dc; margin-right: 12px; }
.s-up { color: #089981; text-shadow: 0 0 1px rgba(8, 153, 129, 0.2); } /* Green */
.s-down { color: #f23645; text-shadow: 0 0 1px rgba(242, 54, 69, 0.2); } /* Red */

/* Responsive adjustment */
@media (max-width: 768px) {
    .ticker-item { font-size: 14px; padding: 0 25px; }
}


.uan-text {
    font-size: 11px;
    color: #444;
    white-space: nowrap;
    text-align: center;
}



/* Pehle default hide rakhein (Mobile ke liye) */
.desktop-nav {
    display: none;
}

/* 1024px aur usse bari screens par menu dikhayen */
@media (min-width: 1024px) {
    .desktop-nav {
        display: flex !important; /* Force display on 1024px and above */
        gap: 15px;
        align-items: center;
    }
    
    

    /* Toggler ko 1024px par hide kar dein */
    .navbar-toggler {
        display: none !important;
    }
}

/* Links ki spacing aur size adjust karein taake 1024px par fit aayein */
@media (min-width: 1024px) and (max-width: 1250px) {
    .nav-link-custom {
        font-size: 11px !important;
        padding: 0 4px !important;
    }
    .navbar-container {
        padding: 0 10px;
    }
    
    .darson-input {
        font-size: 0.75rem !important;
        padding: 9px 14px !important;
}
}




/* PSX LIVE Button Styling */
.btn-psx-live {
    
   
    color: #fff !important;
   
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
   
    transition: 0.3s ease;
}

/* Blinking Red Dot */
.live-indicator-dot {
    width: 8px;
    height: 8px;
    background-color: #ff0000;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 8px #ff0000;
    animation: psx-pulse 1.5s infinite;
}

@keyframes psx-pulse {
    0% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1); }
}




/*div#px-live-btn {*/
/*    position: absolute;*/
/*    top: 50%;           */
/*    left: 0%;          */
/*    transform: translate(-50%, -50%);*/
/*}*/

/* Container jo mockup ke frame ke andar hai */
.display-frame {
    position: relative;
    overflow: hidden;
}

/* Main background wrapper - height auto hogi mockup ke hisab se */
.slider-main-content {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 100%; /* Mockup ki height ke mutabiq adjust karein */
    display: flex;
    align-items: center;
    z-index: 1;
}

/* Content layer over overlay */
.container-fluid {
    position: relative;
    z-index: 5;
   
}

.hero-text-block, .hero-right-icon, .hero-btn-contact {
    pointer-events: auto !important; /* Clicks enable karne ke liye */
}

/* Text Styling */
.hero-title {
    color: #ffffff;
    font-weight: bold;
    font-size: clamp(16px, 4vw, 50px);
    margin-bottom: 5px;
    line-height: 1.1;
    font-family: 'glory';
    cursor : pointer;
}

.hero-desc {
   color: #ffffff;
    font-size: clamp(10px, 2vw, 16px);
     cursor : pointer;
    max-width: 90%;
    font-family: 'glory-M';
    margin: 15px 0px;
}

/* Right Side Icon Size */
.hero-right-icon {
    max-width: 120px; /* Yellow icon ka size control karne ke liye */
    width: 100%;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}

/* Button */
.hero-btn-contact {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid #FFDF74;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 50px;
    font-weight: bold;
    /*font-size: clamp(10px, 1.2vw, 13px);*/
    background: rgb(128 115 8 / 20%);
    transition: 0.3s;
    font-size:16px;
}

.hero-btn-contact:hover {
    background: #a8a306;
    /*box-shadow: 0 0 10px #FF0004;*/
}
.hero-right-icon {
    position: absolute;
    bottom: 10%;
    right: 2%;
    /* Animation settings */
    animation: bubbleZoom 4s ease-in-out infinite;
    transform-origin: center;
    /* Taake animation smooth chale */
    will-change: transform; 
}

@keyframes bubbleZoom {
    0% {
        transform: scale(1) translateY(0px);
    }
    50% {
        transform: scale(1.1) translateY(-15px); /* Zoom in aur thoda upar (bubbling) */
    }
    100% {
        transform: scale(1) translateY(0px);
    }
}

/* --- Responsive Adjustments for 1024px and Mobile --- */
@media (max-width: 1024px) {
   
    .hero-right-icon { max-width: 90px; }
}