/*
Theme Name: Nexus Architecture
Author: Your Name
Version: 1.0
Description: Simple CSS version of Nexus Architecture
*/

:root {
	--nexus-navy: #212d3b;
	--nexus-steel: #5d7d9a;
	--nexus-red: #c3272b;
	--nexus-orange: #f35e2f;
	--nexus-peach: #f98c5f;
	--white: #ffffff;
	--nav-width: 200px; 
	--transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

body {
	font-family: 'Plus Jakarta Sans', sans-serif;
	margin: 0;
    padding: 0;
	overflow-x: hidden;
}

html {
	scroll-behavior: smooth;
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5rem;
}

/* === Sections === */
/* section {
	padding: 7rem 0;
} */

.section-tag {
	display: inline-block;
	padding: 0.375rem 1.25rem;
	background: rgba(243, 94, 47, 0.1);
	color: var(--nexus-orange);
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	margin-bottom: 1rem;
}

.grid {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.grid-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.grid-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid-4 {
		grid-template-columns: repeat(4, 1fr);
	}
}



/* ============
 * == Header == 
 * ============ */

/* 1. Page Content Offset */
.main-content-offset {
    margin-left: 0 !important; /* Margin hata di */
    width: 100% !important;
    position: relative;
}

/* 2. Main Navbar Bar */
.vertical-navbar {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    width: var(--nav-width) !important;
    background: rgba(255, 255, 255, 0.05) !important;
	backdrop-filter: blur(3px); 
    z-index: 99999 !important; /* Hero se upar */
    transition: 0.5s ease;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
}

/* Jab scroll ho tab border ka color bhi badal sakte hain (optional) */
.vertical-navbar.navbar-dark-links {
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* Navbar Scrolled State (White Background & Navy Links) */
    background: #ffffff !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.nav-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; 
    align-items: flex-start;
    padding: 0 !important;
}

/* 3. Logo Fix */
.nav-logo-container {
    width: 100%;
    display: flex;
    justify-content: flex-start; 
    padding: 40px 30px; 
    margin-bottom: 20px !important;
    position: relative;
}

.nav-logo-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 40px; 
    height: 1px;
    background: rgba(255, 255, 255, 0.2); 
    transition: var(--transition);
}

.nav-logo img {
    width: 120px !important; /* Lamba logo hai isliye width badha di */
    height: auto !important;
    display: block;
    filter: none !important; /* Brand colors ko original rakha */
    transition: all 0.4s ease;
    /* Agar image ka background white hai toh use mix karne ke liye niche wali line (Optional) */
    mix-blend-mode: multiply; 
}

.nav-logo:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.vertical-navbar.navbar-dark-links .nav-logo-container::after {
    background: rgba(33, 45, 59, 0.1);
}

/* Logo color fix when scrolled */
.vertical-navbar.navbar-scrolled .nav-logo img {
    filter: brightness(1) invert(0);
}

/* 4. Horizontal Links stacked Vertically */
.nav-links-container {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Gap ko thoda maintain kiya taaki lines ke liye jagah bane */
    width: 100%;
}

.nav-link-item {
    color: #ffffff !important; 
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    opacity: 0.8;
    transition: all 0.4s ease;
    white-space: nowrap;
    padding-left: 12px !important;
    position: relative; /* Line positioning ke liye zaroori */
    padding-bottom: 10px; /* Text aur line ke beech ka gap */
	transition: color 0.4s ease, background 0.4s ease, width 0.4s ease, opacity 0.4s ease !important;
}

.nav-link-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px; /* Text ke alignment ke hisab se */
    width: 35px; /* Line ki lambai */
    height: 1px;
    background: rgba(255, 255, 255, 0.2); /* Hero state mein light white */
    transition: var(--transition);
}

.nav-link-item.active-link,
.vertical-navbar.navbar-dark-links .nav-link-item.active-link {
    color: #f35e2f !important;
    opacity: 1 !important;
}

.nav-link-item.active-link::after {
    background: #f35e2f !important;
    width: 45px !important; 
}

/* Links: Jab Hero Section scroll ho jaye (Dark Color) */
.vertical-navbar.navbar-dark-links .nav-link-item {
    color: #212d3b !important; /* Nexus Navy (Dark) */
}

/* Scrolled state link color */
.vertical-navbar.navbar-scrolled .nav-link-item {
    color: #212d3b !important; /* Change to Navy */
}

.nav-link-item:hover {
    opacity: 1;
    color: #f35e2f !important; /* Hover par Nexus Orange */
    padding-left: 5px; /* Halka sa animation */
}

.nav-link-item:hover::after,
.submenu-link:hover::after {
    background: #f35e2f !important;
    width: 45px; /* Hover par line thodi badi hogi */
}

/* =========================================
   == Navbar Hover Logic Fix (Dark State) ==
   ========================================= */

/* 1. Main Nav Items Hover (Force Orange even in Dark State) */
.nav-link-item:hover,
.vertical-navbar.navbar-dark-links .nav-link-item:hover,
.vertical-navbar.navbar-scrolled .nav-link-item:hover {
    color: #f35e2f !important; /* Nexus Orange */
    opacity: 1 !important;
    padding-left: 5px; /* Halka movement */
}

/* 2. Main Nav Item Underline Hover (Force Orange) */
.nav-link-item:hover::after,
.vertical-navbar.navbar-dark-links .nav-link-item:hover::after {
    background: #f35e2f !important;
    width: 45px !important; /* Line badi ho jayegi */
}

/* 3. Submenu Items Hover (Force Orange even in Dark State) */
.submenu-link:hover,
.vertical-navbar.navbar-dark-links .submenu-link:hover {
    color: #f35e2f !important; /* Nexus Orange */
    opacity: 1 !important;
    padding-left: 5px;
}

/* 4. Submenu Item Underline Hover (Force Orange) */
.submenu-link:hover::after,
.vertical-navbar.navbar-dark-links .submenu-link:hover::after {
    background: #f35e2f !important;
    width: 30px !important; /* Submenu line choti se thodi badi */
}

/* 5. Arrow color change on Hover in Dark State */
.nav-item-with-submenu:hover .dropdown-arrow,
.vertical-navbar.navbar-dark-links .nav-item-with-submenu:hover .dropdown-arrow {
    color: #f35e2f !important;
    border-color: #f35e2f !important;
}

/* --- Clean Up (Purane important rules ko support karne ke liye) --- */
/* Ye ensure karega ki jab mouse hatai toh dark blue wapas aa jaye */
.vertical-navbar.navbar-dark-links .nav-link-item:not(:hover) {
    color: #212d3b !important;
}
.vertical-navbar.navbar-dark-links .submenu-link:not(:hover) {
    color: #212d3b !important;
}

/* Force Orange Color for Text AND Line when Active */
/* Yeh rule transparent aur dark dono states mein kaam karega */
.vertical-navbar .nav-links-container .nav-link-item.active-link,
.vertical-navbar.navbar-dark-links .nav-links-container .nav-link-item.active-link {
    color: #f35e2f !important; /* Font color Orange */
    opacity: 1 !important;
    padding-left: 5px; /* Halka sa active movement */
}

/* Divider Line for Active Link */
.vertical-navbar .nav-links-container .nav-link-item.active-link::after,
.vertical-navbar.navbar-dark-links .nav-links-container .nav-link-item.active-link::after {
    background: #f35e2f !important; /* Line color Orange */
    width: 45px !important; /* Line ki lambai badh jayegi */
    opacity: 1 !important;
}

/* Responsive Fix for Mobile */
@media (max-width: 1024px) {
    /* Mobile/Tablet par navbar ko solid color dena behtar hota hai 
       kyunki content mix ho sakta hai */
    .vertical-navbar {
        width: 200px !important;
    }
    .main-content-offset {
        margin-left: 200px !important;
        width: calc(100% - 200px) !important;
    }
}

@media (max-width: 768px) {
    /* Mobile par sidebar aksar hide karke hamburger use kiya jata hai, 
       filhal width choti kar raha hoon */
    .vertical-navbar {
        width: 160px !important;
    }
    .main-content-offset {
        margin-left: 0 !important;
        width: 100% !important;
    }
}
/* ===================
   == Submenu Logic ==
   =================== */

.nav-item-with-submenu {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Arrow Styling */
.dropdown-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor; /* Text color automatic pick karega */
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg); /* Downward arrow */
    margin-left: 10px;
    margin-bottom: 3px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Parent Item Hover Effects */
.nav-item-with-submenu:hover .dropdown-arrow {
    transform: rotate(-135deg); /* Upward arrow on hover */
    color: #f35e2f !important;
}

.nav-item-with-submenu:hover .nav-link-item {
    color: #f35e2f !important;
}

/* Submenu container: Default Hidden */
.nav-submenu {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 20px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Custom ease-out expo curve for high-end feel */
    transition: max-height 0.6s cubic-bezier(0.19, 1, 0.22, 1), 
                opacity 0.4s ease, 
                margin 0.4s ease;
    margin-top: 0;
}

.nav-item-with-submenu:hover .nav-submenu {
    max-height: 200px;
    opacity: 1;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Submenu link appearance */
.submenu-link {
    text-decoration: none !important;
    color: #ffffff !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    opacity: 0;
    transform: translateX(-15px); /* Left mein shifted */
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    padding-bottom: 6px;
}

.submenu-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Shuruat mein line ki width 0 */
    height: 1px;
    background: currentColor;
    transition: width 0.5s ease 0.3s; /* Delay taaki text ke baad line dikhe */
}

.nav-item-with-submenu:hover .submenu-link::after {
    width: 20px; /* Reveal line on parent hover */
}

/* Navbar Dark State logic for Arrow */
.vertical-navbar.navbar-dark-links .dropdown-arrow {
    border-color: #212d3b;
}

.nav-item-with-submenu:hover .submenu-link {
    opacity: 0.6;
    transform: translateX(0); /* Wapas apni jagah par aayega */
}

/* Staggered Delay: Ek ke baad ek link aane ke liye */
.nav-item-with-submenu:hover .submenu-link:nth-child(1) { transition-delay: 0.1s; }
.nav-item-with-submenu:hover .submenu-link:nth-child(2) { transition-delay: 0.2s; }


vertical-navbar.navbar-dark-links .nav-link-item::after,
.vertical-navbar.navbar-dark-links .submenu-link::after {
    background: rgba(33, 45, 59, 0.1); /* Dark Navy color with transparency */
}

/* Scrolled State for Submenu (Dark Color) */
.vertical-navbar.navbar-dark-links .submenu-link {
    color: #212d3b !important; /* Navy Blue */
}

.submenu-link:hover {
    opacity: 1;
    color: #f35e2f !important; /* Nexus Orange */
    padding-left: 5px;
}

/* =========================================
   == FONT-BASED LOGO (ANDS Style) ==
   ========================================= */

.text-logo {
    display: flex;
    align-items: baseline; /* Text ko line par align karne ke liye */
    text-decoration: none !important;
    font-family: 'Plus Jakarta Sans', sans-serif; /* Aapki site ka main font */
    letter-spacing: -2px; /* Letters ko paas lane ke liye taaki logo jaisa lage */
    transition: var(--transition);
}

/* "un" part (Bold and Blue) */
.text-logo .un {
    font-size: 58px; /* Size adjust kar sakte hain */
    font-weight: 800; /* Ekdum Bold */
    color: #006699; /* Aapke logo ka blue shade */
    line-height: 1;
}

/* "ds" part (Thin and Grey) */
.text-logo .ds {
    font-size: 42px;
    font-weight: 500; /* Regular/Thin weight */
    color: #666666; /* Grey color */
    line-height: 1;
}

/* Hover Effect */
.text-logo:hover {
    opacity: 0.8;
    transform: translateX(3px);
}

/* --- Sidebar Integration Fix --- */
.nav-logo-container {
    width: 100%;
    display: flex;
    justify-content: flex-start; 
    padding: 40px 30px; 
    margin-bottom: 20px !important;
    position: relative;
}

/* Logo ke niche ki wo architectural line */
.nav-logo-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 40px; 
    height: 1px;
    background: rgba(255, 255, 255, 0.2); 
    transition: var(--transition);
}

/* Jab page scroll ho tab line ka color change ho */
.vertical-navbar.navbar-dark-links .nav-logo-container::after {
    background: rgba(33, 45, 59, 0.1);
}

/* =========================================
   == MOBILE & TABLET RESPONSIVE FIXES ==
   ========================================= */

/* Hamburger Icon Styling */
.menu-toggle {
    display: none; /* Desktop par hide */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
}
.menu-toggle span {
    width: 25px;
    height: 2px;
    background: #212d3b;
    transition: 0.3s;
}

@media (max-width: 1024px) {
    /* 1. Main Offset Reset */
    .main-content-offset {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 2. Navbar Transformation (Vertical to Horizontal) */
    .vertical-navbar {
        width: 100% !important;
        height: 80px !important;
        background: #ffffff !important;
        flex-direction: row !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(0,0,0,0.05) !important;
        box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        overflow: visible !important; /* Ye zaroori hai taaki menu bahar nikal sake */
    }

    .nav-wrapper {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100%;
        padding: 20px 20px !important;
    }

    .nav-top-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .nav-logo-container {
        margin-bottom: 0 !important; /* Margin khatam */
        padding: 0 !important;
    }
    .nav-logo-container::after { display: none; }
	
    .nav-logo img { width: 100px !important; mix-blend-mode: multiply; }

    .menu-toggle { display: flex !important; z-index: 1000001; }

    /* 3. Mobile Menu Drawer (Hidden by default) */
    .nav-links-container {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important; 
        width: 60% !important; 
        height: 100vh !important;
        background: #ffffff !important;
        z-index: 1000000 !important;
        display: flex !important;
        flex-direction: column !important;
        padding: 40px 20px !important; /* Logo ke niche se start */
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1) !important;
        box-shadow: 15px 0 50px rgba(0,0,0,0.1);
		margin-top: 0;
		visibility: hidden;
    }

    /* Jab JS 'active' class add kare tab menu dikhe */
	body.menu-open .nav-links-container {
        left: 0 !important;
        visibility: visible !important;
    }
	
	.nav-links-container.active {
        left: 0 !important; /* Screen ke andar aa jayega */
        box-shadow: 20px 0 50px rgba(0,0,0,0.1);
    }

    .nav-link-item {
        color: #212d3b !important;
        font-size: 11px !important; /* Mobile readable font */
        font-weight: 700 !important;
        padding: 15px 0 !important;
        opacity: 1 !important;
    }

    .nav-link-item::after { display: none; } /* Mobile par lines ki zaroorat nahi */

    /* Submenu Mobile Fix */
    .nav-submenu {
        padding-left: 20px;
        background: #f8fafc;
        border-radius: 10px;
    }
	
    .submenu-link { color: #212d3b !important; font-size: 10px !important; }
    
    /* 4. Hero Text Overlay Mobile Fix */
    .hero-text-overlay {
        left: 20px !important;
        bottom: 60px !important;
        width: calc(100% - 40px);
    }
    .hero-text-overlay h1 { font-size: 40px !important; }

    /* 5. Grid Fixes */
    .grid-2, .grid-3, .grid-4, .stats-grid, .people-grid, .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
	
	body.menu-open .nav-links-container,
    .nav-links-container.active {
        left: 0 !important; /* Slide in to screen */
        visibility: visible !important;
    }
	
	 .menu-toggle {
        display: flex !important;
        z-index: 1000001 !important; /* Menu drawer se bhi upar */
        position: relative;
    }

    /* Hamburger Animation to X */
    .menu-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); background: #212d3b; }
    .menu-toggle.open span:nth-child(2) { opacity: 0; }
    .menu-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); background: #212d3b; }
	
}



/* -------------------
 *  NEW FOOTER DESIGN
 * ------------------- */
.main-footer {
	background: #1a232e;
	/* Deep dark navy from image */
	padding: 5rem 0 2rem;
	color: #94a3b8;
	font-size: 0.85rem;
}

.footer-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1.5fr;
	/* 4 Columns */
	gap: 3rem;
	padding-bottom: 4rem;
}

/* Brand Column */
.footer-logo {
	font-size: 1.8rem;
	font-weight: 900;
	font-style: italic;
	color: white;
	margin-bottom: 1.5rem;
	letter-spacing: -1px;
}

.footer-logo span {
	color: var(--nexus-orange);
	font-style: normal;
	font-size: 1.2rem;
	margin-left: 5px;
	letter-spacing: 1px;
}

.footer-desc {
	line-height: 1.8;
	margin-bottom: 2rem;
	max-width: 300px;
}

.social-links {
	display: flex;
	gap: 0.8rem;
}

.social-box {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: 0.3s;
	font-size: 1.2rem;
}

.social-box:hover {
	background: var(--nexus-orange);
	transform: translateY(-3px);
}

/* Titles */
.footer-col h4 {
	color: white;
	font-size: 0.75rem;
	letter-spacing: 2px;
	margin-bottom: 2rem;
	font-weight: 900;
}

/* Links List */
.footer-links {
	list-style: none;
	padding: 0;
}

.footer-links li {
	margin-bottom: 1rem;
}

.footer-links a {
	color: #94a3b8;
	text-decoration: none;
	transition: 0.3s;
}

.footer-links a:hover {
	color: white;
	padding-left: 5px;
}

/* Contact Info */
.contact-info {
	list-style: none;
	padding: 0;
}

.contact-info li {
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	gap: 12px;
}

.contact-info .icon {
	font-size: 1.1rem;
}

/* Footer Bottom Bar */
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	padding-top: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	letter-spacing: 2px;
	font-weight: 700;
	font-size: 0.65rem;
}

.bottom-nav a {
	color: #475569;
	text-decoration: none;
	margin-left: 2rem;
	transition: 0.3s;
}

.bottom-nav a:hover {
	color: var(--nexus-orange);
}

/* Mobile Responsive */
@media (max-width: 992px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.footer-grid {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.footer-bottom {
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
	}
}

.social-links {
	display: flex;
	gap: 12px;
}

.social-box {
	width: 45px;
	height: 45px;
	background: #ffffff !important;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	border: none !important;
}

/* Icons Size */
.social-box i {
	font-size: 1.3rem;
}

/* Instagram Color */
.social-box.insta i {
	color: #E4405F;
}

/* Facebook Color */
.social-box.fb i {
	color: #1877F2;
}

/* X (Twitter) Color */
.social-box.x-com i {
	color: #000000;
}

/* YouTube Color */
.social-box.yt i {
	color: #FF0000;
}

/* Hover Effect */
.social-box:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(255, 255, 255, 0.2);
	background: #f8f8f8 !important;
}

/* Utility */
.rounded-xl {
	border-radius: 1.5rem;
}

.shadow-2xl {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.italic {
	font-style: italic;
}



/* ================================
   == Scroll Hero Section Design ==
   ================================ */
.scroll-hero-wrapper { 
	position: relative;
    width: 100%;
    background: #fff;
}

.sticky-hero-container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    overflow: hidden;
	z-index: 1;
}

.hero-image-layer {
	position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.15); 
    transition: opacity 1.2s ease-in-out, transform 1.8s ease-out, visibility 1.2s;
}

.hero-image-layer.active { 
	opacity: 1;
    visibility: visible;
    transform: scale(1); /* Smoothly zoom out to normal */
}

.about-section, 
.stats-section, 
.testimonials-section, 
.services-section, 
.portfolio-section, 
.process-section,
.main-footer {
    margin-left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width)) !important;
    position: relative;
    z-index: 2;
}

/* Stats section Navy hai toh uska background navy rahega */
.stats-section, .main-footer {
    background: var(--nexus-navy) !important;
}

/* Content inside each slide */
.hero-content-inner {
    position: absolute;
    bottom: 10%;
    left: 210px;
    color: white;
    z-index: 10;
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out 0.4s; /* Text thoda ruk kar aayega */
}

.hero-image-layer.active .hero-content-inner {
    opacity: 1;
    transform: translateY(0);
}

.hero-content-inner h1 {
    font-size: clamp(40px, 7vw, 90px);
    font-weight: 900;
    line-height: 0.9;
    margin: 0;
    letter-spacing: -3px;
}

.hero-content-inner p {
    font-size: 1.2rem;
    margin-top: 20px;
    font-style: italic;
    opacity: 0.8;
}

.hero-text-overlay {
    position: absolute;
    bottom: 80px;
    left: calc(var(--nav-width) + 40px); 
    color: white;
    z-index: 10;
}

.hero-text-overlay h1 { 
	font-size: clamp(40px, 8vw, 85px); 
	font-weight: 900; 
	line-height: 0.9; 
	margin: 0; 
	letter-spacing: -3px;
}

.hero-text-overlay p { 
	font-size: 18px; 
	margin-top: 20px; 
	font-style: italic; 
	opacity: 0.8; 
}

.scroll-trigger { 
	height: 100vh; 
	pointer-events: none;
	position: relative;
    z-index: 5;
}

.hero-scroll-btn {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.mouse-icon {
    width: 26px;
    height: 42px;
    border: 2px solid white;
    border-radius: 20px;
    position: relative;
}

.wheel {
    width: 4px;
    height: 8px;
    background: white;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    animation: scrollWheel 2s infinite;
}

.arrow-down {
    width: 10px;
    height: 10px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    transform: rotate(45deg);
    animation: arrowBounce 2s infinite;
}

@keyframes scrollWheel {
    0% { opacity: 1; top: 6px; }
    100% { opacity: 0; top: 20px; }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0) rotate(45deg); opacity: 0.5; }
    50% { transform: translateY(5px) rotate(45deg); opacity: 1; }
}

.hero-scroll-btn:hover {
    transform: translateX(-50%) translateY(-5px);
}

/* ============================
 * === PORTFOLIO (Grid fix) ===
 * ============================ */
.portfolio-section {
	padding: 50px 0 80px;
	background-color: #ffffff;
}

.portfolio-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Header Section */
.portfolio-header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 50px;
	gap: 32px;
}

@media (min-width: 768px) {
	.portfolio-header {
		flex-direction: row;
	}
}

.gallery-tag {
	color: var(--nexus-orange);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 12px;
	margin-bottom: 16px;
}

.main-title {
	font-size: 3rem;
	/* 4xl on md */
	font-weight: 900;
	color: var(--nexus-navy);
	line-height: 1.2;
	margin: 0;
}

.subtitle {
	color: var(--nexus-steel);
	font-size: 1.25rem;
	margin-top: 16px;
	font-weight: 500;
}

.view-all-btn {
	background-color: var(--nexus-navy);
	color: white;
	padding: 16px 40px;
	border-radius: 9999px;
	font-weight: 900;
	border: none;
	cursor: pointer;
	box-shadow: 0 20px 25px -5px rgba(33, 45, 59, 0.2);
	transition: all 0.3s ease;
}

.view-all-btn:hover {
	background-color: var(--nexus-orange);
	transform: translateY(-4px);
}

/* Portfolio Grid */
.portfolio-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr); 
	gap: 40px;
}

@media (min-width: 768px) {
	.portfolio-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Card Styling */
.portfolio-card {
	position: relative;
	height: 500px;
	border-radius: 40px;
	/* 2.5rem */
	overflow: hidden;
	background-color: var(--nexus-navy);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.card-img {	
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.9;
	transition: transform 1s ease, opacity 0.5s ease;
}

.portfolio-card:hover .card-img {
	transform: scale(1.1);
	opacity: 1;
}

/* Gradient Overlay */
.card-gradient {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, var(--nexus-navy), rgba(33, 45, 59, 0.2), transparent);
	opacity: 0.6;
	transition: opacity 0.5s ease;
}

.portfolio-card:hover .card-gradient {
	opacity: 0.9;
}

/* Card Content Area */
.card-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 48px;
	transform: translateY(16px);
	transition: transform 0.5s ease;
}

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

.featured-tag {
	color: var(--nexus-peach);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
	margin-bottom: 12px;
	opacity: 0;
	transition: opacity 0.5s ease;
	transition-delay: 0.1s;
}

.portfolio-card:hover .featured-tag {
	opacity: 1;
}

.project-name {
	font-size: 2.25rem;
	font-weight: 900;
	color: white;
	margin-bottom: 24px;
    line-height: 1.1;
}

/* Case Study Link */
.case-study-link {
	display: flex;
	align-items: center;
	gap: 16px;
	color: white;
	font-weight: 700;
}

.arrow-circle {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.case-study-link:hover .arrow-circle {
	background-color: var(--nexus-orange);
	border-color: var(--nexus-orange);
}

.link-text {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 12px;
}

/* Top Right Badge */
.category-badge {
	position: absolute;
	top: 32px;
	right: 32px;
	background-color: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	color: white;
	padding: 6px 16px;
	border-radius: 9999px;
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.25em;
}

/* =========================================
   == TABLET VIEW (768px to 1024px) ==
   ========================================= */
@media (max-width: 1024px) {
    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr); /* 2x2 Grid */
        gap: 20px;
    }

    .portfolio-card {
        height: auto !important; /* Fixed height hataya */
        aspect-ratio: 1 / 1; /* Card ko SQUARE banane ke liye */
        border-radius: 30px; /* Thoda chota radius tablet ke liye */
    }

    .card-content {
        padding: 30px !important; /* Spacing kam ki */
    }

    .project-name {
        font-size: 1.5rem; /* Text size chota kiya square card ke liye */
        margin-bottom: 10px;
    }

    .link-text {
        font-size: 10px;
    }

    .arrow-circle {
        width: 35px;
        height: 35px;
    }
}

/* =========================================
   == MOBILE VIEW (Below 768px) ==
   ========================================= */
@media (max-width: 767px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* 1x4 Grid (Single column) */
        gap: 20px;
    }

    .portfolio-card {
        height: auto !important;
        aspect-ratio: 1 / 1; /* Mobile par bhi SQUARE */
        border-radius: 25px;
    }

    .portfolio-header {
        align-items: flex-start; /* Title aur button stack align */
        text-align: left;
    }

    .main-title {
        font-size: 2.2rem;
    }

    .project-name {
        font-size: 1.25rem; /* Mobile par aur chota text taaki overflow na ho */
    }

    .card-content {
        padding: 20px !important;
    }
}


/* =============================
 * == About Section Specifics ==
 * =============================*/
.about-section {
	padding: 70px 0;
	background: white;
}

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

.about-img-container {
	position: relative;
}

.main-about-img {
	width: 100%;
	border-radius: 30px;
	box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.experience-badge {
	position: absolute;
	bottom: -30px;
	right: 30px;
	background: var(--nexus-navy);
	padding: 30px;
	border-radius: 20px;
	text-align: center;
	color: white;
}

.experience-badge .num {
	color: var(--nexus-orange);
	font-size: 2.5rem;
	font-weight: 900;
	display: block;
}

.experience-badge .txt {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--nexus-steel);
}

.about-content .tag {
	color: var(--nexus-orange);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 3px;
}

.about-content h2 {
	font-size: 4rem;
	font-weight: 900;
	margin: 20px 0;
	letter-spacing: -1px;
	line-height: 65px;
}

.about-content .italic-block {
	border-left: 5px solid var(--nexus-red);
	padding-left: 25px;
	font-style: italic;
	font-size: 1.2rem;
	color: var(--nexus-navy);
	margin-bottom: 30px;
}

/* =========================================
   == ABOUT SECTION RESPONSIVE FIXES ==
   ========================================= */

/* --- Tablet View (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr; /* Image upar, Text niche */
        gap: 50px;
        text-align: left;
    }

    .about-content h2 {
        font-size: 3rem; /* Text thoda chota kiya */
        line-height: 1.2;
        margin: 15px 0;
    }

    .about-content .italic-block {
        font-size: 1.1rem;
        padding-left: 20px;
    }

    .main-about-img {
        max-height: 450px; /* Tablet par image bahut lambi na dikhe */
        object-fit: cover;
    }
}

/* --- Mobile View (max-width: 767px) --- */
@media (max-width: 767px) {
    .about-section {
        padding: 60px 0; /* Padding kam ki */
    }

    .about-grid {
        gap: 35px;
    }

    .about-content h2 {
        font-size: 2.2rem; /* Mobile ke liye optimized size */
        line-height: 1.1;
    }

    .about-content .italic-block {
        font-size: 1rem;
        padding-left: 15px;
        margin-bottom: 20px;
    }

    .about-content p {
        font-size: 0.95rem; /* Body text readable size */
        line-height: 1.6;
    }

    .about-content .tag {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .main-about-img {
        border-radius: 20px; /* Chota radius mobile par better lagta hai */
        max-height: 350px;
    }
    
    /* Learn more link spacing */
    .about-content a {
        margin-top: 20px !important;
        font-size: 14px;
    }
}

/* =========================================
   == People Section Design (3x1 Grid) ==
   ========================================= */
.home .people-section {
    padding: 100px 0;
    background: #ffffff;
	margin-left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width)) !important;
}

.home .people-section .section-title {
    font-size: clamp(2rem, 5vw, 3rem); /* Fluid font size */
    font-weight: 900;
    color: var(--nexus-navy);
}

.home .people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 40px !important;
    margin-top: 50px;
}

.home .person-card {
    position: relative;
    transition: var(--transition);
}

.people-section .tag{
	color: var(--nexus-orange);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 3px;
}
.home .person-img-wrapper {
    width: 100%;
    aspect-ratio: 4/5; /* Architectural portrait ratio */
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.home .person-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
}

.home .person-card:hover .person-img-wrapper img {
    filter: grayscale(0%); /* Hover par original color */
    transform: scale(1.05);
}

.person-meta h3 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--nexus-navy);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.person-meta .designation {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--nexus-orange);
    letter-spacing: 2px;
    margin-bottom: 15px;
}

.short-bio {
    font-size: 14px;
    color: var(--nexus-steel);
    line-height: 1.6;
    max-width: 90%;
}


/* --- TABLET/LAPTOP VIEW (1024px - 769px) --- */
@media (max-width: 1024px) {
    .home .people-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* Laptop/Tablet: 2x2 */
        gap: 30px !important;
    }
    
    .person-meta h3 {
        font-size: 1.3rem !important; /* Chota heading size */
    }
}

/* --- MOBILE VIEW (768px and below) --- */
@media (max-width: 768px) {
    .home .people-section {
        margin-left: 0 !important;
        width: 100% !important;
        padding: 60px 20px;
    }

    .home .people-grid {
        grid-template-columns: 1fr !important; /* Mobile: 1x3 (Stacked) */
        gap: 50px !important;
    }

    /* Mobile Text Size Adjustments */
    .person-meta h3 {
        font-size: 1.25rem !important;
        margin-bottom: 8px;
    }

    .person-meta .designation {
        font-size: 10px !important;
        letter-spacing: 1.5px !important;
    }

    .short-bio {
        font-size: 13px !important;
        line-height: 1.5;
        max-width: 100%;
    }

    .home .person-img-wrapper {
        margin-bottom: 20px;
        border-radius: 15px;
    }
}

/* Common Card Styling */
.home .person-card {
    position: relative;
    transition: var(--transition);
}

.home .person-img-wrapper {
    width: 100%;
    aspect-ratio: 4/5;
    background: #f1f5f9;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.home .person-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s ease;
}

.home .person-card:hover .person-img-wrapper img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.person-meta h3 {
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--nexus-navy);
    letter-spacing: -0.5px;
}

.person-meta .designation {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--nexus-orange);
    letter-spacing: 2px;
}



/* =========================================
   == Contact Section Design ==
   ========================================= */
.contact-section {
    padding: 50px 0;
    background: #ffffff;
    margin-left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width)) !important;
    overflow: hidden;
    position: relative;
}

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

.contact-section .section-title {
    font-size: clamp(2.2rem, 5vw, 3.5rem) !important;
    line-height: 1.1;
    margin: 20px 0;
}


/* Left Column Styling */
.contact-info-content .tag {
    color: var(--nexus-orange);
	font-weight: 900;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 3px;
}

.contact-details-list {
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.contact-item label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--nexus-steel);
    font-weight: 800;
    margin-bottom: 10px;
}

.contact-item p {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--nexus-navy);
}

.contact-link {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--nexus-navy);
    text-decoration: none;
    transition: 0.3s;
    display: inline-block;
}

.contact-link:hover {
    color: var(--nexus-orange);
    transform: translateX(5px);
}

.wa-link {
    color: #25D366; /* WhatsApp Green */
}

/* Right Column: Social Links Grid */
.social-links-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 5;
}

.big-social-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 30px;
    background: #f8fafc;
    border-radius: 20px;
    text-decoration: none;
    transition: 0.4s;
    border: 1px solid #f1f5f9;
}

.big-social-item:hover {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    transform: translateY(-5px);
    border-color: var(--nexus-orange);
}

.social-icon {
    font-size: 2rem;
    color: var(--nexus-navy);
}

.social-text span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--nexus-steel);
}

.social-text p {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--nexus-navy);
}

/* Background Large Text */
.contact-bg-text {
    position: absolute;
    right: -50px;
    bottom: -20px;
    font-size: 12rem;
    font-weight: 900;
    color: rgba(33, 45, 59, 0.03);
    pointer-events: none;
    z-index: 1;
}

/* Intro Text Styling */
.contact-intro-text {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #64748b; /* Slate grey */
    margin: 25px 0 40px 0;
    max-width: 480px;
    font-weight: 500;
}

/* Bottom Collaboration Note */
.collaboration-note {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #f1f5f9;
}

.collaboration-note p {
    font-size: 0.9rem;
    color: var(--nexus-steel);
    font-style: italic;
    line-height: 1.6;
}

/* Social Column Header */
.social-header-text {
    margin-bottom: 35px;
    padding-left: 10px;
}

.social-header-text h3 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--nexus-navy);
    margin-bottom: 10px;
}

.social-header-text p {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.6;
}

/* --- Tablet View (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .contact-section {
        margin-left: var(--nav-width) !important;
        width: calc(100% - var(--nav-width)) !important;
        padding: 80px 40px;
    }

    .contact-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 60px;
    }

    .contact-info-content {
        max-width: 600px;
    }

    /* Background text ko thoda chota karein taaki overlap na ho */
    .contact-bg-text {
        font-size: 8rem;
        right: -20px;
        bottom: 0;
    }
}

/* --- Mobile View (max-width: 768px) --- */
@media (max-width: 768px) {
    .contact-section {
        margin-left: 0 !important; /* Sidebar margin remove */
        width: 100% !important;
        padding: 60px 20px;
    }

    .contact-grid {
        gap: 50px;
    }

    /* Text Adjustments */
    .contact-intro-text {
        font-size: 1rem;
        margin: 20px 0 30px 0;
    }

    .contact-link {
        font-size: 1.1rem; /* Mobile par email/phone bahut bada na dikhe */
        word-break: break-word; /* Email lambi ho toh break ho jaye */
    }

    .contact-details-list {
        gap: 25px;
    }

    .contact-item p {
        font-size: 1rem;
    }

    /* Social Media Cards Mobile Fix */
    .big-social-item {
        padding: 20px;
        gap: 15px;
    }

    .social-icon {
        font-size: 1.5rem;
    }

    .social-text p {
        font-size: 1rem;
    }

    /* Background large text ko mobile par hide karna behtar hai 
       kyunki ye layout kharab kar sakta hai */
    .contact-bg-text {
        display: none; 
    }

    .collaboration-note {
        margin-top: 30px;
    }
}

/* Specific fix for high-resolution small screens */
@media (max-width: 480px) {
    .contact-section .section-title {
        font-size: 1.8rem !important;
    }
    
    .contact-link {
        font-size: 1rem;
    }
}



/* ==============================
 * === Portfolio Page Styling ===
 * ============================== */

/* Ensure the wrapper starts after the navbar */
.page-template-template-portfolio .portfolio-page-wrapper,
.page-template-template-portfolio .main-footer {
    margin-left: var(--nav-width) !important; /* Navbar width ke barabar gap */
    width: calc(100% - var(--nav-width)) !important; /* Bachi hui screen width */
    position: relative;
    background: #ffffff; /* Page background white */
}

/* Footer color fix for Portfolio Page */
.page-template-template-portfolio .main-footer {
    background: #1a232e !important; /* Footer dark navy hi rahega */
}

/* Portfolio Hero Padding (Spacing for Title) */
.page-template-template-portfolio .portfolio-hero {
    padding: 100px 60px 60px 60px; /* Top, Right, Bottom, Left spacing */
}

/* Portfolio Grid Spacing */
.page-template-template-portfolio .portfolio-grid-section {
    padding: 0 40px 100px 40px; /* Grid ke side mein thodi jagah */
}

/* Force Dark Navbar on Portfolio Template */
.page-template-template-portfolio .vertical-navbar {
    background: #ffffff !important; /* Page load hote hi white background */
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.page-template-template-portfolio .nav-link-item {
    color: #212d3b !important; /* Hamesha Navy links */
    opacity: 1 !important;
}

.page-template-template-portfolio .nav-logo img {
    filter: none !important; /* Logo original color mein */
}

.page-template-template-portfolio .portfolio-page-wrapper {
    background-color: #ffffff;
    overflow-x: hidden; /* Horizontal scroll prevent karne ke liye */
    width: 100%;
}


.portfolio-container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
}

/* Header Section */
.portfolio-hero {
	padding: 120px 0 80px 0;
}

.portfolio-header-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 60px;
}

.page-template-template-portfolio .title-side h1 {
    font-size: clamp(2.5rem, 6vw, 5rem); /* Mobile: 2.5rem, Desktop: 5rem */
    font-weight: 900;
    color: #212d3b;
    line-height: 1.1;
    letter-spacing: -2px;
}

.desc-side {
	max-width: 500px;
}

.desc-side p {
	font-size: 1.25rem;
	color: #475569;
	/* Slate 600 */
	line-height: 1.6;
	font-style: italic;
	font-weight: 500;
}

/* Portfolio Grid - Exact 3 Columns */
.grid-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	width: 100%;
}

.portfolio-grid-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.project-image-box {
	width: 100%;
	height: 100%;
}

.project-image-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}

/* Overlay Styling */
.project-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 40%);
	display: flex;
	align-items: flex-end;
	padding: 25px;
	opacity: 1;
}

.project-title {
	color: #ffffff;
	font-size: 1.25rem;
	font-weight: 800;
	margin: 0;
	text-transform: uppercase;
    letter-spacing: 1px;
}

/* Hover Effect */
.portfolio-grid-item:hover img {
	transform: scale(1.08);
}

.portfolio-grid-item:hover .project-overlay {
	background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 50%);
}

/* =========================================
   == Force Dark Sidebar on Portfolio Page ==
   ========================================= */

/* 1. Navbar Background */
.page-template-template-portfolio .vertical-navbar {
    background: #ffffff !important; 
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important;
}

/* 2. Main Links AND Submenu Links (Dark Color) */
.page-template-template-portfolio .nav-link-item,
.page-template-template-portfolio .submenu-link {
    color: #212d3b !important; /* Nexus Navy */
    opacity: 0.7 !important;
}

/* 3. Divider Lines (Link ke niche wali lines) ko Dark karein */
.page-template-template-portfolio .nav-link-item::after,
.page-template-template-portfolio .submenu-link::after,
.page-template-template-portfolio .nav-logo-container::after {
    background: rgba(33, 45, 59, 0.1) !important; /* Dark thin lines */
}

/* 4. Dropdown Arrow (FIRM ke baaju wala) */
.page-template-template-portfolio .dropdown-arrow {
    border-color: #212d3b !important;
}

/* 5. Hover Effect (Orange hamesha visible rahega) */
.page-template-template-portfolio .nav-link-item:hover,
.page-template-template-portfolio .submenu-link:hover {
    color: #f35e2f !important;
}

/* 6. Active Link on Portfolio Page */
.page-template-template-portfolio .nav-link-item.active-link {
    color: #f35e2f !important;
}

/* --- TABLET VIEW (max-width: 1024px) --- */
@media (max-width: 1024px) {
    /* Navbar offset adjustment */
    .page-template-template-portfolio .portfolio-page-wrapper,
    .page-template-template-portfolio .main-footer {
        margin-left: 0 !important; /* Sidebar offset reset */
        width: 100% !important;
    }

    .portfolio-container {
        padding: 0 30px;
    }

    .portfolio-hero {
        padding: 60px 0 40px 0;
    }

    .portfolio-header-flex {
        flex-direction: column; /* Stack Title and Desc */
        gap: 20px;
    }

    /* GRID: 2*2 for Tablet */
    .grid-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }

    .desc-side {
        max-width: 100%;
    }
}

/* --- MOBILE VIEW (max-width: 768px) --- */
@media (max-width: 768px) {
    .portfolio-container {
        padding: 0;
    }

    .portfolio-hero {
        padding: 40px 0 30px 0;
    }

    .title-side h1 {
        letter-spacing: -1px;
    }

    .desc-side p {
        font-size: 1.1rem;
        line-height: 1.5;
    }

    /* GRID: 1*4 for Mobile */
    .grid-container {
        grid-template-columns: 1fr !important; /* Stacked */
        gap: 20px;
    }

    .portfolio-grid-item {
        aspect-ratio: 1 / 1; /* Mobile par card SQUARE rahega */
    }

    .project-title {
        font-size: 1.1rem; /* Chota text mobile ke liye */
    }

    /* Horizontal scroll fix: Ensure images don't overflow */
    .project-image-box img {
        width: 100%;
    }
}

/* 4. Footer Adjustment for Portfolio Page */
@media (max-width: 1024px) {
    .page-template-template-portfolio .main-footer {
        margin-left: 0 !important;
        width: 100% !important;
        text-align: center;
    }
}


/* ===============================
 * === Old Project Detail Page ===
 * =============================== */

.single-projects .main-content-offset {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Base Layout */
.project-detail-page {
	background-color: var(--surface);
	font-family: 'Plus Jakarta Sans', sans-serif;
	color: var(--on-surface);
}

.container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 2rem;
}

.container-narrow {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Hero Section */
.single-projects .project-hero {
    width: 100vw !important;
    height: 100vh !important; /* Force Full Screen */
    margin-left: 0 !important;
    position: relative;
    z-index: 1;
    display: flex !important;
    align-items: flex-end !important; /* Content ko niche rakhne ke liye */
    overflow: hidden;
}

.single-projects .hero-bg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1;
}

.single-projects .hero-bg img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Image stretch nahi hogi */
    opacity: 1 !important;        /* Image ko visible karein */
    visibility: visible !important;
    display: block !important;
}

.single-projects .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4); /* Thoda dark taaki white text dikhe */
    z-index: 2;
}

.single-projects .hero-content-wrapper {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    /* Navbar ki width (260px) + Extra gap (20px) */
    padding-left: calc(var(--nav-width) + 20px) !important;
    padding-right: 40px;
    padding-bottom: 80px; /* Bottom se gap */
}

.hero-flex {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 150px;
}

.category-tag {
	background: #ffdbd0;
	color: #5f1900;
	padding: 0.25rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	display: inline-block;
	margin-bottom: 1rem;
}

.single-projects .hero-title {
    font-size: clamp(2.5rem, 7vw, 6rem) !important; /* Mobile par 2.5rem, Desktop par 6rem tak */
    line-height: 1;
    letter-spacing: -2px;
	color: #fff;
}

.hero-right {
	color: rgba(255, 255, 255, 0.8);
	border-left: 1px solid rgba(255, 255, 255, 0.2);
	padding-left: 1.5rem;
}

.location-text {
	display: block;
	font-size: 1.25rem;
	color: white;
	font-weight: 600;
}

.style-text {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.single-projects .intro-quote,
.single-projects .details-grid-section,
.single-projects .content-block,
.single-projects .cta-section,
.single-projects .main-footer {
    margin-left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width)) !important;
    background: #ffffff;
    position: relative;
}

/* Intro Quote */
.intro-quote {
	padding: 8rem 0;
}

.single-projects .quote-text {
    font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
    line-height: 1.3;
}

.accent-line {
	width: 6rem;
	height: 4px;
	background: var(--primary);
	margin-top: 3rem;
}

/* Details Grid */
.details-grid-section {
	padding-bottom: 8rem;
}

.single-projects .details-card {
    background: #f8f8f8 !important;
    padding: 60px !important;
    border-radius: 20px !important;
    margin-top: -40px; /* Halka sa overlap effect */
}

/* .details-card {
	background: #f3f3f3;
	border-radius: 1rem;
	padding: 4rem;
} */

.single-projects .details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* .details-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 2rem;
} */

.detail-item label {
	display: block;
	font-size: 0.6rem;
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-weight: 700;
	color: var(--outline);
	margin-bottom: 1rem;
}

.detail-item p {
	font-size: 1.25rem;
	font-weight: 700;
	font-family: 'Plus Jakarta Sans';
	margin: 0;
}

/* Content Blocks */
.content-block {
	padding-bottom: 8rem;
}

.grid-2 {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 4rem;
}

.grid-2-rev {
	display: grid;
	grid-template-columns: 7fr 5fr;
	gap: 4rem;
	align-items: center;
}

.small-heading {
	text-transform: uppercase;
	letter-spacing: 0.4em;
	color: var(--primary);
	font-size: 0.75rem;
	font-weight: 800;
	margin-bottom: 1.5rem;
}

.single-projects .big-heading {
    font-size: clamp(1.8rem, 4vw, 3rem) !important;
    line-height: 1.1;
}

.rich-text p {
	font-size: 1.1rem;
	line-height: 1.7;
	color: #596060;
	margin-bottom: 1.5rem;
}

.image-side img {
	width: 100%;
	height: 450px;
	object-fit: cover;
	border-radius: 0.5rem;
}

/* --- TABLET VIEW (max-width: 1024px) --- */
@media (max-width: 1024px) {
    
    /* 1. Global Reset: Content ko navbar ki width se azaad karein */
    .single-projects .main-content-offset {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 2. Sabhi sections ki margin 0 karein aur padding set karein */
    .single-projects .intro-quote,
    .single-projects .details-grid-section,
    .single-projects .content-block,
    .single-projects .cta-section,
    .single-projects .main-footer {
        margin-left: 0 !important; /* Yahan 120px ko 0 kar diya */
        width: 100% !important;     /* Width ko 100% kar diya */
        padding-left: 30px !important;  /* Side se thodi jagah */
        padding-right: 30px !important;
    }

    /* 3. Hero Content Position Fix */
    .single-projects .hero-content-wrapper {
        padding-left: 30px !important; /* Navbar width offset hata diya */
        padding-bottom: 50px;
        width: 100%;
    }

    /* 4. Details Grid Adjustments */
    .single-projects .details-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    .single-projects .details-card {
        padding: 30px !important;
    }
}

/* Responsive */
/* --- 4. MOBILE VIEW (max-width: 768px) --- */
@media (max-width: 768px) {
    .single-projects .intro-quote,
    .single-projects .details-grid-section,
    .single-projects .content-block,
    .single-projects .cta-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Hero Section Fix */
    .single-projects .project-hero {
        height: 70vh !important; /* Mobile par 100vh lamba ho jata hai */
    }

    .single-projects .hero-flex {
        flex-direction: column;
        align-items: flex-start;
        padding-bottom: 40px;
    }

    .single-projects .hero-content-wrapper {
        padding-left: 20px !important;
    }

    .single-projects .hero-right {
        border-left: none;
        padding-left: 0;
        margin-top: 15px;
    }

    /* Meta Grid: 2 columns or 1 for Mobile */
    .single-projects .details-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px;
    }

    /* Content Blocks (Narrative/Sustainable): Stack Image and Text */
    .single-projects .grid-2 {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }

    .single-projects .text-side {
        order: 2; /* Text niche aayega */
    }

    .single-projects .image-side {
        order: 1; /* Image upar aayegi */
    }

    .single-projects .image-side img {
        height: 300px !important; /* Mobile image height */
    }

    /* Spacing between blocks */
    .single-projects .content-block {
        padding-bottom: 60px;
    }
}

/* --- 5. Fix for very small screens (max-width: 480px) --- */
@media (max-width: 480px) {
    .single-projects .details-grid {
        grid-template-columns: 1fr !important; /* Everything stacked */
		gap: 20px;
    }
}



/* =========================================
   == About Page Template CSS (Fixed Dimensions) ==
   ========================================= */

/* Offset Logic for Sidebar Alignment */
.page-template-template-about .about-page-wrapper,
.page-template-template-about .main-footer {
	margin-left: var(--nav-width) !important;
	width: calc(100% - var(--nav-width)) !important;
	background: #ffffff;
	overflow: hidden;
}

.bio-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #44474c;
    margin-bottom: 15px;
}

/* Typography Sync */
.display-lg {
    font-size: clamp(1.8rem, 4vw, 3rem) !important; /* Mobile: 1.8rem, Desktop: 3rem */
    line-height: 1.2;
    font-weight: 700;
}


.headline-md {
    font-size: clamp(1.8rem, 4vw, 2rem) !important; /* Mobile: 1.8rem, Desktop: 3rem */
    line-height: 1.2;
    font-weight: 700;	
	margin-bottom: 5px;
}

.label-sm {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
	margin-bottom: 10px;
	color: #8894a6;
}

.body-lg {
    font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.6;
	color: var(--nexus-navy);
	margin-bottom: 24px;
}

/* Hero Section About */
.about-hero {
	position: relative;
	height: 700px;
	display: flex;
	align-items: center;
	padding: 0 64px;
	overflow: hidden;
	background: #000;
}

.about-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.5;
}

.about-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #ffffff, transparent);
	z-index: 1;
}

.about-hero-content {
	position: relative;
	z-index: 2;
	max-width: 900px;
}

.est-tag {
	background: var(--nexus-orange);
	color: white;
	padding: 4px 12px;
	display: inline-block;
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 16px;
}

.accent-line-orange {
	width: 100px;
	height: 2px;
	background: var(--nexus-orange);
	margin-top: 32px;
}

/* Narrative */
.studio-narrative {
	padding: 80px 64px;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 32px;
	border-bottom: 1px solid #eee;
}

.narrative-label {
	color: var(--nexus-steel);
}

/* Philosophy */
.philosophy-section {
	padding: 80px 64px;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid #e2e8f0; /* Halka grey border poore grid ke liye */
    background: #ffffff;
    margin-top: 50px;
}

.philosophy-card {
    padding: 60px 45px; /* Spacing jaisi image mein hai */
    border-right: 1px solid #e2e8f0; /* Sirf right side mein partition line */
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: background 0.3s ease;
}

.philosophy-card.no-border {
    border-right: none;
}

.philosophy-card:hover {
	background: #f8faff;
}

.icon-display {
    font-size: 42px !important; /* Icon ka size */
    color: #f35e2f !important; /* Nexus Orange Color */
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 40; /* Thin look ke liye */
    margin-bottom: 10px;
}

.philosophy-card .headline-md {
    font-size: 26px;
    font-weight: 800;
    color: #212d3b; /* Nexus Navy */
    letter-spacing: -0.5px;
    margin: 0;
}

.philosophy-card .caption {
    font-size: 17px;
    line-height: 1.7;
    color: #475569; /* Slate-600 color */
    margin: 0;
    font-weight: 400;
}

/* Responsive Fix for Mobile */
@media (max-width: 992px) {
    .philosophy-grid {
        grid-template-columns: 1fr; /* Mobile par ek ke niche ek */
    }
    .philosophy-card {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
    }
}

/* People Section */
.page-template-template-about .people-section {
	padding: 80px 64px;
	background: #fafafa;
}

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

.page-template-template-about .principal-profile {
    display: grid;
    grid-template-columns: 450px 1fr;
    gap: 60px;
    margin-top: 60px;
    align-items: start;
}

.profile-img-container {
	aspect-ratio: 4/5;
	overflow: hidden;
}

.profile-img-container img {
    height: 560px;
	width: 100%;
    border-radius: 20px;
    transition: 0.5s;
	object-fit: cover; 
    object-position: center;
}

.profile-img-container:hover img {
	filter: grayscale(0);
}

.highlight-orange {
    color: var(--nexus-orange) !important;
    font-weight: 800;
    margin-bottom: 10px;
    display: block;
}

.experience-stats {
	display: flex;
	gap: 40px;
	border-top: 1px solid #eee;
	padding-top: 30px;
	margin-top: 30px;
}

.para-md{
	line-height: 1.625;
}
/* Team Grid */
.page-template-template-about .team-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 80px;
    border-top: 1px solid #eee;
    padding-top: 60px;
}

.page-template-template-about .team-member-card {
    background: #f8fafc;
    padding: 25px; /* Padding thodi kam ki compact look ke liye */
    border-radius: 25px;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: row !important; /* Side-by-side layout */
    align-items: center; /* Image aur text ko vertically center karne ke liye */
    gap: 30px; /* Image aur Text ke bich ka gap */
}

.team-member-card:hover {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

.page-template-template-about .member-image-wrapper {
    flex: 0 0 33.33%; /* Fix width to 2/6 parts */
    max-width: 33.33%;
    width: auto;
    aspect-ratio: 1 / 1;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 0 !important; /* Bottom margin hataya kyunki ab side mein hai */
    background: #e2e8f0;
}

.page-template-template-about .member-info {
    flex: 0 0 66.66%; /* Fix width to 4/6 parts */
    padding: 0;
}

.member-image-wrapper img {
    width: 100%;
    height: 100% !important; /* Wrapper ke barabar square height */
    object-fit: cover;       /* Image stretch nahi hogi, properly crop hogi */
    object-position: center; /* Face ko center mein rakhne ke liye */
    transition: all 0.6s ease;
}


/* Hover Effect: Pure card par mouse le jane se image color hogi */
.team-member-card:hover {
    background: #ffffff;
    box-shadow: 0 20px 50px rgba(33, 45, 59, 0.08);
    transform: translateY(-5px);
}

.team-member-card:hover .member-image-wrapper img {
    filter: grayscale(0%); /* Full Color on hover */
    transform: scale(1.05); /* Halka zoom */
}

.team-member-card .member-info {
    padding: 0 10px;
}

.member-desc {
    font-size: 0.9rem; 
    line-height: 1.5;
    color: #596060;
    margin-top: 10px;
}

/* --- TABLET / LAPTOP VIEW (max-width: 1024px) --- */
@media (max-width: 1024px) {
    .page-template-template-about .about-page-wrapper,
    .page-template-template-about .main-footer {
        margin-left: 0 !important; /* Sidebar space removed */
        width: 100% !important;
        padding-top: 80px; /* Top Navbar space */
    }

    /* Padding for all sections inside About */
    .about-hero, .studio-narrative, .philosophy-section, .people-section {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }

    .studio-narrative {
        grid-template-columns: 1fr !important; /* Stack Narrative */
        gap: 20px;
    }

    .philosophy-grid {
        grid-template-columns: repeat(2, 1fr) !important; /* 2 columns on tablet */
    }

    .principal-profile {
        grid-template-columns: 1fr !important; /* Image upar, Bio niche */
        gap: 40px;
    }

    .profile-img-container {
        max-width: 400px; /* Prevent image from being too large */
        margin: 0 auto;
		object-fit: cover; 
    	object-position: center;
    }
	
	.profile-img-container img {
		height: 405px;
	}
}

/* --- MOBILE VIEW (max-width: 768px) --- */
@media (max-width: 768px) {
    .about-hero, .studio-narrative, .philosophy-section, .people-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .about-hero {
        height: 500px !important; /* Mobile hero height */
    }

    .philosophy-grid {
        grid-template-columns: 1fr !important; /* Stack cards */
    }

    .philosophy-card {
        border-right: none !important;
        border-bottom: 1px solid #eee;
        padding: 40px 20px !important;
    }
	
	.profile-img-container img {
		height: auto;
		width: 300px;
	}

    .team-grid {
        grid-template-columns: 1fr !important; /* Stack team members */
        gap: 30px;
    }

    .page-template-template-about .team-member-card {
        flex-direction: column !important; /* Mobile par wapas upar-niche */
        text-align: center;
        padding: 20px;
    }

    .page-template-template-about .member-image-wrapper {
        flex: 0 0 100%;
        max-width: 200px; /* Mobile par image choti rakhi */
        margin: 0 auto 20px auto !important;
    }
	
	.page-template-template-about .member-info {
        flex: 0 0 100%;
    }

    .experience-stats {
        flex-direction: column;
        gap: 20px;
    }
	
	.profile-img-container{
		object-fit: cover; 
    	object-position: center;
	}
}

/* == Force Dark Sidebar on About Page == */

/* 1. Navbar Background ko White/Frosted banayein */
.page-template-template-about .vertical-navbar {
    background: #ffffff !important; /* About page par hamesha white background */
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    backdrop-filter: none !important; /* Blur ki zaroorat nahi white par */
}

/* 2. Main Links ko Dark Blue (Navy) karein */
.page-template-template-about .nav-link-item {
    color: #212d3b !important; /* Nexus Navy */
    opacity: 1 !important;
}

/* 3. Submenu Links ko bhi Dark Blue karein */
.page-template-template-about .submenu-link {
    color: #212d3b !important;
    opacity: 0.7 !important;
}

/* 4. Dividers (Link ke niche wali lines) ko Dark karein */
.page-template-template-about .nav-link-item::after,
.page-template-template-about .submenu-link::after,
.page-template-template-about .nav-logo-container::after {
    background: rgba(33, 45, 59, 0.1) !important; /* Dark thin lines */
}

/* 5. Dropdown Arrow ko Dark karein */
.page-template-template-about .dropdown-arrow {
    border-color: #212d3b !important;
}

/* 6. Hover Effect: Orange hamesha kaam karega */
.page-template-template-about .nav-link-item:hover,
.page-template-template-about .submenu-link:hover {
    color: #f35e2f !important;
}

/* == FINAL MOBILE OFFSET REMOVAL (1024px and below) ==*/

@media (max-width: 1024px) {
    /* 1. Reset Global Wrapper */
    .main-content-offset {
        margin-left: 0 !important;
        width: 100% !important;
    }

    /* 2. Sabhi individual sections ki margin 0 karein */
    /* Yeh list aapke saare sections ko cover karti hai */
    .about-section, 
    .stats-section, 
    .services-section, 
    .portfolio-section, 
    .home .people-section,
    .contact-section,
    .main-footer,
    .portfolio-page-wrapper,
    .about-page-wrapper,
    .intro-quote,
    .details-grid-section,
    .content-block,
    .cta-section {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 20px !important;  /* Halka sa gap sides mein taaki text chipke nahi */
        padding-right: 20px !important;
    }

    /* 3. Container width ko full karein */
    .container {
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    /* 4. Hero Overlay Fix (Mobile par navbar ke piche na jaye) */
    .hero-text-overlay, .hero-content-inner {
        left: 20px !important;
        width: calc(100% - 40px) !important;
    }
	
	.view-all-btn {
		
	}
}


/* =====================================================================
   == VARADA PROJECT CUSTOM STYLING / NEW PROJECT DETAIL PAGE STYLING ==
   ===================================================================== */
.project-custom-layout,
.scroll-hero-wrapper,
.hero-varada {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.project-custom-layout {
    margin-left: var(--nav-width) !important; /* Sidebar ki width ke barabar margin */
    width: calc(100% - var(--nav-width)) !important; /* Bachi hui width */
    margin-top: 0 !important;
}

.page-template-template-varada .project-content-body,
.page-template-template-varada .main-footer {
    margin-left: var(--nav-width) !important;
    width: calc(100% - var(--nav-width)) !important;
    background: #ffffff;
    position: relative;
    z-index: 2;
}

/* Offset for Sidebar */
.project-custom-layout section,
.project-custom-layout main {
/* 	margin-left: var(--nav-width);
	width: calc(100% - var(--nav-width)); */
	background: #ffffff;
	margin-top: 100px;
}

.hero-varada {
    margin-left: 0 !important; /* Kyunki parent (layout) mein margin hai, yahan 0 rahega */
    width: 100% !important; /* Viewport width (100vw) ki jagah 100% karein */
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

.hero-bg-varada {
    position: absolute;
    inset: 0;
    background-image: url('https://unds.in/wp-content/uploads/2026/06/varada-08-scaled.jpg');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.hero-content-varada {
	position: relative;
	z-index: 10;
	color: white;
	margin-top: 270px;
}

.project-content-body {
    width: 100% !important;
    margin-left: 0 !important; /* Kyunki wrapper already offsetted hai */
    background: #ffffff;
    position: relative;
    z-index: 2;
}

/* 12 Column Grid Fix */
.grid-12-varada {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 32px;
}

.overview-text-varada {
	grid-column: span 7;
}

.overview-info-varada {
    grid-column: 9 / span 4;
    display: flex;
    flex-direction: column;
}

.info-stack {
    display: flex;
    flex-direction: column;
}

.info-item {
    margin-bottom: 5px;
}

/* Labels: Small, Red, Spaced-out */
.label-caps.red-text {
    color: var(--nexus-red) !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin-bottom: 10px !important;
    display: block;
}

.label-caps.red-text.team-label{
	font-size: 13px !important;
}

/* Values: Large, Bold, Navy */
.overview-info-varada .headline-md {
    color: var(--nexus-navy) !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    line-height: 1.2;
}

/* Bottom Grid for Landscape/Architects */
.info-row-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* Center mein auto space divider ke liye */
    align-items: start;
    gap: 20px;
}

.team-item {
    display: flex;
    flex-direction: column;
}

.small-label {
    font-size: 10px !important;
    margin-bottom: 8px !important;
    color: var(--nexus-red) !important;
}

/* Center Vertical Line */
.vertical-divider-line {
    width: 1px;
    height: 50px;
    background: rgba(195, 39, 43, 0.15); /* Nexus Red with low opacity */
    align-self: center;
}

/* Team Text */
.caption-bold {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--nexus-navy);
    line-height: 1.3;
}

.caption-bold {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: var(--nexus-navy);
    margin-top: 5px;
}

.team-section-wrapper {
    margin-top: 20px;
}

.team-main-label {
    font-size: 13px !important;
    margin-bottom: 15px !important;
    letter-spacing: 3px !important;
    opacity: 0.9;
}

/* The Highlight Box */
.team-highlight-box {
    background: #fdfdfd; /* Halka sa off-white */
    border: 1px solid #f0f0f0; /* Soft border */
    padding: 25px;
    border-radius: 15px;
    transition: all 0.3s ease;
}

.team-highlight-box:hover {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    border-color: var(--nexus-orange); /* Hover par orange border */
}


/* Gallery Logic */
.gallery-grid-varada {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 20px;
	grid-auto-rows: 250px;
}

.gallery-item.col-8 {
	grid-column: span 8;
}

.gallery-item.col-4 {
	grid-column: span 4;
}

.gallery-item.row-2 {
	grid-row: span 2;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 10px;
	transition: 0.5s;
}

.gallery-item:hover img {
	transform: scale(1.03);
}

/* Elements */
.nexus-line-red {
	display: block;
	width: 50px;
	height: 2px;
	background: var(--nexus-red);
	margin-bottom: 20px;
}

.vertical-bar-red {
	width: 4px;
	height: 50px;
	background: var(--nexus-red);
	flex-shrink: 0;
}

.title-with-bar {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

.thin-divider-grad {
    height: 1px;
    width: 100%;
    background: rgba(195, 39, 43, 0.15); /* Halka red color solid line */
    margin: 30px 0 !important;
}


/* Concept Card */
.concept-grid-varada {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 80px;
	align-items: center;
}

.concept-dark-card {
	background: var(--nexus-navy);
	padding: 50px;
	color: white;
	position: relative;
	border-radius: 5px;
}

.concept-border-box {
	position: absolute;
	top: -30px;
	left: -30px;
	width: 150px;
	height: 150px;
	border: 1px solid rgba(195, 39, 43, 0.3);
	z-index: -1;
}

.point-item {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

.point-item span {
	color: var(--nexus-red);
	font-weight: 900;
	font-size: 1.2rem;
}

.center-head-varada {
    text-align: center;
    margin-bottom: 80px; /* Spacing below title */
}

.center-head-varada .headline-lg {
    font-size: 32px !important;
    font-weight: 800;
    color: var(--nexus-navy);
}

.short-divider-red {
    width: 60px;
    height: 4px;
    background: var(--nexus-red);
    margin: 15px auto 0;
    border-radius: 10px;
}

/* Grid setup for 3 columns */
.metrics-grid-varada {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
	margin-bottom: 50px;
    margin-bottom: 80px;
}

/* Individual Card Styling */
.metric-card {
    background: #ffffff;
    border: 1px solid #eef2f6; /* Halka grey border */
    padding: 50px 35px;
    text-align: center;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    height: 100%;
}

.metric-card:hover {
    transform: translateY(-8px);
    border-color: var(--nexus-orange);
    box-shadow: 0 15px 40px rgba(243, 94, 47, 0.1);
}

.metric-card h2 {
    font-size: 22px !important;
    font-weight: 800;
    color: var(--nexus-navy);
    margin-bottom: 15px !important;
}

.metric-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin: 0;
}

/* Icon, Title & Description Styling */
.metric-icon {
    font-size: 42px !important;
    color: var(--nexus-navy);
    margin-bottom: 25px;
    font-variation-settings: 'wght' 300; /* Minimalist thin icons */
}

.metric-title {
    font-size: 22px !important;
    font-weight: 800;
    color: var(--nexus-navy);
    margin-bottom: 15px !important;
}

.metric-desc {
    font-size: 15px !important;
    line-height: 1.7;
    color: var(--slate-grey);
    margin: 0;
}

/* --- RESPONSIVE FIXES --- */
@media (max-width: 1024px) {
    .overview-info-varada {
        grid-column: span 12; /* Full width on tablet */
        margin-top: 40px;
    }

    .info-row-grid {
        grid-template-columns: 1fr 1fr;
    }

    .project-custom-layout {
        margin-left: 0 !important;
        width: 100% !important;
    }

	.project-custom-layout section,
	.project-custom-layout main {
		margin-left: 0 !important;
		width: 100% !important;
	}
	
	.hero-varada {
        height: 70vh; /* Mobile par thodi kam height */
    }

	.hero-content-varada {
		padding-left: 20px !important;
	}

	.grid-12-varada,
	.concept-grid-varada {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.overview-text-varada,
	.overview-info-varada {
		grid-column: span 1;
	}

	.gallery-grid-varada {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: auto;
	}

	.gallery-item.col-8,
	.gallery-item.col-4 {
		grid-column: span 1;
	}
	
	.metrics-grid-varada {
        grid-template-columns: repeat(2, 1fr); /* 2 per row */
        gap: 20px;
    }
    
    .metric-card {
        padding: 40px 30px;
    }
}

@media (max-width: 768px) {
    .metrics-grid-varada {
        grid-template-columns: 1fr; /* Stacked */
    }
    
    .center-head-varada {
        margin-bottom: 40px;
    }

    .metric-card {
        padding: 40px 20px;
    }

    .center-head-varada .headline-lg {
        font-size: 26px !important;
    }
    .info-row-grid {
        grid-template-columns: 1fr; /* Stacked on mobile */
        text-align: left;
    }
    
    .vertical-divider-line {
        width: 40px; /* Horizontal line on mobile */
        height: 1px;
        margin: 10px 0;
    }
    
    .team-highlight-box {
        padding: 20px;
    }
}

@media (max-width: 600px) {

	.gallery-grid-varada,
	.metrics-grid-varada {
		grid-template-columns: 1fr;
	}

	.display-lg {
		font-size: 32px;
		line-height: 1.2;
	}

	.py-section-varada {
		padding: 60px 20px;
	}
}

/* =========================================
   == Sidebar Components Global Dark Blue ==
   ========================================= */

/* 1. Sabhi Links aur Arrows ko Dark Blue (Nexus Navy) karein */
.single-projects .vertical-navbar .nav-link-item,
.single-projects .vertical-navbar .submenu-link,
.single-projects .vertical-navbar .dropdown-arrow,
.page-template-template-varada .vertical-navbar .nav-link-item,
.page-template-template-varada .vertical-navbar .submenu-link,
.page-template-template-varada .vertical-navbar .dropdown-arrow {
    color: #212d3b !important; /* Nexus Navy */
    border-color: #212d3b !important;
    opacity: 1 !important;
}

/* 2. Divider Lines (Link ke niche aur Logo ke niche) ko bhi Dark Blue karein */
.single-projects .vertical-navbar .nav-link-item::after,
.page-template-template-varada .vertical-navbar .nav-link-item::after,
.single-projects .vertical-navbar .nav-logo-container::after,
.page-template-template-varada .vertical-navbar .nav-logo-container::after {
    background: rgba(33, 45, 59, 0.2) !important; /* Navy with slight transparency */
}

/* 3. Logo ko original color mein rakhein (Koi filter nahi) */
.single-projects .vertical-navbar .nav-logo img,
.page-template-template-varada .vertical-navbar .nav-logo img {
    filter: none !important;
}

/* 4. Hover Effect: Hover karne par Orange ho jaye (Branding ke liye) */
.nav-link-item:hover,
.submenu-link:hover {
    color: #f35e2f !important;
}

/* --- Sidebar Background Logic --- */
/* Agar aap chahte hain ki background hamesha WHITE rahe: */
.single-projects .vertical-navbar,
.page-template-template-varada .vertical-navbar {
    background: #ffffff !important;
    border-right: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 2px 0 15px rgba(0,0,0,0.03);
}

/* Margin Fix: Ensure content doesn't overlap sidebar on Desktop */
@media (min-width: 1025px) {
/*     .single-projects .project-content-body, */
    .page-template-template-varada .project-content-body {
        margin-left: var(--nav-width) !important;
        width: calc(100% - var(--nav-width)) !important;
    }
}

/* Tablet / Mobile Fix for Offset */
@media (max-width: 1024px) {
    .page-template-template-varada .project-content-body,
    .page-template-template-varada .main-footer {
        margin-left: 0 !important;
        width: 100% !important;
    }
    .page-template-template-varada .project-content-body {
        margin-left: 0 !important;
        width: 100% !important;
    }
}