/*
Theme Name: Averiware Custom Theme
Author: Naren
Description: Custom WordPress theme converted from HTML for Averiware.
Version: 1.0
*/

        :root {
            --primary: #0056b3;
			--primary-blue: #0056b3;
            --secondary: #00d084;
            --dark: #1a202c;
            --navy: #0f172a;
            --light-bg: #f8fafc;
            --text-main: #4a5568;
            --accent-orange: #ff8c38;
            --transition: all 0.3s ease;
			--soft-bg: #f8fafc;
            --dark-navy: #0f172a;
            --accent-blue: #3b82f6;
			--text-main: #4a5568;
			--dark-navy: #0f172a;
            --bg-light: #f8fafc;
			--success-green: #10b981;
			--text-slate: #64748b;
			--light-bg: #f1f5f9;
			--brand-blue: #0056b3;
			--border-light: #e2e8f0;
			--soft-blue: #f0f7ff;
        }

        * { box-sizing: border-box; }
        body { font-family: 'DM Sans', sans-serif; margin: 0; color: var(--text-main); background-color: #fff; line-height: 1.6; }

        /* --- Utility & Nav --- */
        .utility-bar { background: var(--navy); padding: 8px 10%; display: flex; justify-content: flex-end; font-size: 13px; gap: 20px; }
        .utility-bar a { color: #FFFF; text-decoration: none; }
		.utility-bar a:hover { color: var(--primary); }
        header { position: sticky; top: 0; background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,0.05); z-index: 1000; }
        nav { display: flex; justify-content: space-between; align-items: center; padding: 0px 8%; }
        .logo { font-size: 26px; font-weight: 700; color: var(--primary); text-decoration: none; }
        .nav-links { display: flex; list-style: none; gap: 30px; align-items: center; margin: 0; }
        .nav-links a { text-decoration: none; color: var(--dark); font-weight: 500; font-size: 15px; }

        /* --- Hero Section --- */
        .hero { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); padding: 100px 10%; display: flex; align-items: center; gap: 60px; color: #fff; }
        .hero-text { flex: 1; }
        .hero-text h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 24px; color: #fff; }
        .hero-text h1 span { color: #38bdf8; }
        .hero-text p { font-size: 1.2rem; color: #94a3b8; margin-bottom: 30px; }
        
        .btn { padding: 12px 24px; border-radius: 6px; font-weight: 600; text-decoration: none; display: inline-block; transition: var(--transition); }
        .btn-primary { background: var(--primary); color: #fff !important; }
        .btn-outline { border: 0px solid #fff; color: #fff !important; margin-left: 15px; display: inline-flex; align-items: center; gap: 10px; }

        .hero-visual { flex: 1; }
        .device-container { background: #334155; padding: 5px; border-radius: 15px; box-shadow: 0 25px 50px rgba(0,0,0,0.5); }
        .device-inner-frame { background: #475569; padding: 15px; border-radius: 8px; }
        .slider-window { background: white; border-radius: 5px; overflow: hidden; position: relative;}
        .slides { display: flex; width: 300%; transition: transform 0.6s ease-in-out; }
        .slide { flex: 0 0 33.333%;}
        .slide img { width: 100%; height: auto; object-fit: cover; display: block; }

        /* --- Stats --- */
        .stats-container { display: flex; justify-content: center; gap: 40px; padding: 60px 10% 20px 10%; background: #f1f5f9; }
        .stat-card { text-align: center; flex: 1; }
        .stat-value { font-size: 2.5rem; font-weight: 800; color: var(--primary); margin-bottom: 5px; }
        .stat-label { font-size: 14px; font-weight: 600; color: #64748b; text-transform: uppercase; }

        /* --- 6-Column Solution Grid --- */
        .section-padding { padding: 80px 10%; }
		.container { max-width: 1200px; margin: 0 auto; }
        .section-header { text-align: center; max-width: 800px; margin: 0 auto 50px auto; }
        .section-header h2 { font-size: 36px; color: #0A2463; font-weight: 800; margin-bottom: 15px; }
        
        .feature-grid-boxed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .feature-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 20px; padding: 30px; transition: all 0.4s ease; display: flex; flex-direction: column; }
        .feature-card:hover { transform: translateY(-12px); border-color: var(--primary); box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12); }
        .card-content h3 { margin: 0 0 12px 0; font-size: 22px; color: var(--dark); }
        .card-content p { font-size: 15px; color: #64748b; margin-bottom: 20px; }
        .card-content ul { list-style: none; padding: 0; margin: 0 0 25px 0; }
        .card-content li { font-size: 14px; color: #475569; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        .card-content li i { color: var(--secondary); font-size: 14px; }
        .btn-text { margin-top: auto; color: var(--primary); font-weight: 700; text-decoration: none; font-size: 16px; }

        /* --- Pricing --- */
        .pricing-section { padding: 80px 10%; background: #f8fafc; text-align: center; }
        .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 50px; }
        .price-card { background: #fff; padding: 60px 40px; border-radius: 24px; border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
        .price-card.popular { background: var(--navy); color: #fff; transform: scale(1.02); border: none; box-shadow: 0 20px 40px rgba(15,23,42,0.2); }
        .price-value { font-size: 52px; font-weight: 800; margin: 10px 0; }
        .price-features { list-style: none; padding: 0; margin: 30px 0; text-align: left; border-top: 1px solid #e2e8f0; }
        .popular .price-features { border-top: 1px solid #334155; }
        .price-features li { padding: 12px 0; border-bottom: 1px solid #e2e8f0; font-size: 15px; }
        .popular .price-features li { border-bottom: 1px solid #334155; color: #cbd5e0; }
        .btn-orange { background: var(--accent-orange); color: #fff !important; padding: 16px; border-radius: 12px; font-weight: 700; text-decoration: none; margin-top: auto; }

        /* --- Trust Bar --- */
        .trust-bar { padding: 60px 10%; text-align: center; background: #fff; border-top: 1px solid #e2e8f0; }
        .trust-bar p { font-size: 20px; font-weight: 900; color: #004494; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 40px; }
        .logos { display: flex; justify-content: center; align-items: center; gap: 60px; flex-wrap: wrap; }
        .logos img { max-height: 45px; opacity: 0.8; }

        /* --- Final CTA --- */
        .final-cta { background: linear-gradient(135deg, #ff8c38 0%, #ffab70 100%); padding: 80px 10%; text-align: center; color: #fff; }
        .final-cta h2 { font-size: 42px; font-weight: 800; margin-bottom: 20px; color:#fff; }
        .btn-white { background: #fff; color: var(--accent-orange) !important; padding: 18px 40px; border-radius: 12px; font-weight: 700; text-decoration: none; display: inline-block; }

        /* --- Footer --- */
        footer { background: var(--navy); color: #fff; padding: 60px 10% 20px 10%; }
        .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-bottom: 40px; }
        .footer-col h4 { color: var(--secondary); margin-bottom: 20px; }
        .footer-col a { display: block; color: #cbd5e0; text-decoration: none; margin-bottom: 10px; font-size: 14px; }

        @media (max-width: 992px) {
            .feature-grid-boxed, .pricing-grid, .footer-grid { grid-template-columns: 1fr 1fr; }
            .hero { flex-direction: column; text-align: center; }
        }
		
		/* --- Professional Mega-Menu Style --- */
		.nav-links li { position: relative; }

		
		.nav-links li:hover .dropdown-menu {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
		}

		.dropdown-item {
			display: flex;
			align-items: flex-start;
			gap: 15px;
			padding: 15px;
			text-decoration: none !important;
			border-radius: 8px;
			transition: var(--transition);
		}

		.dropdown-item:hover {
			background: #f8fafc;
		}

		.dropdown-item i {
			margin-top: 4px;
			font-size: 18px;
			color: var(--primary);
			background: #eff6ff;
			padding: 10px;
			border-radius: 8px;
		}

		.dropdown-content .title {
			display: block;
			font-weight: 700;
			color: var(--dark);
			font-size: 15px;
			margin-bottom: 2px;
		}

		.dropdown-content .desc {
			display: block;
			font-size: 12px;
			color: #64748b;
			line-height: 1.4;
			font-weight: 400;
		}
		
		/* Container for all 4 cards */
		.benefit-card {
			background: #ffffff;
			padding: 30px 20px;
			border-radius: 20px;
			border: 1px solid #e2e8f0;
			transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Smooth pop effect */
			height: 100%;
			display: flex;
			flex-direction: column;
			position: relative;
			overflow: hidden;
		}

		/* Hover Effect: Lift, Glow, and Border */
		.benefit-card:hover {
			transform: translateY(-10px); /* Lifts the card */
			background: #ffffff;
			border-color: #0056b3; /* Your primary blue */
			box-shadow: 0 20px 40px rgba(0, 86, 179, 0.1); /* Soft blue glow */
		}

		/* Subtle icon animation on hover */
		.benefit-card:hover .benefit-icon {
			transform: scale(1.2) rotate(5deg);
			transition: 0.3s ease;
		}

		.benefit-icon {
			font-size: 32px;
			margin-bottom: 10px;
			display: inline-block;
		}

		.benefit-card h3 {
			font-size: 18px;
			color: #0f172a;
			margin-bottom: 8px;
			font-weight: 700;
		}

		.benefit-sub {
			font-size: 12px;
			color: #0056b3;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 0.5px;
			margin-bottom: 12px;
		}

		.benefit-card p:last-child {
			font-size: 14px;
			color: #475569;
			line-height: 1.5;
		}

		/* Responsive fix: stack them on mobile/tablets */
		@media (max-width: 1024px) {
			div[style*="grid-template-columns"] {
				grid-template-columns: repeat(2, 1fr) !important; /* 2x2 on tablets */
			}
		}

		@media (max-width: 600px) {
			div[style*="grid-template-columns"] {
				grid-template-columns: 1fr !important; /* Stacked on mobile */
			}
		}
		
		/* Tab Navigation - Matching Site Palette */
		.cluster-nav {
			display: flex;
			justify-content: center;
			border-bottom: 2px solid #ffff;
			margin-bottom: 30px;
			gap: 20px;
			flex-wrap: wrap;
		}

		.cluster-tab {
			background: none;
			border: none;
			padding: 15px 25px;
			font-size: 16px;
			font-weight: 600;
			color: var(--text-main);
			cursor: pointer;
			position: relative;
			transition: var(--transition);
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.cluster-tab i { 
			font-size: 16px; 
			color: #94a3b8; 
		}

		.cluster-tab.active {
			color: var(--primary);
		}

		.cluster-tab.active i {
			color: var(--primary);
		}

		/* Accent Underline matching your buttons/pricing highlights */
		.cluster-tab.active::after {
			content: "";
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 100%;
			height: 3px;
			background: var(--primary);
			border-radius: 10px;
		}

		/* Detail Content Area */
		.detail-container {
			background: #ffffff;
			border-radius: 24px;
			padding: 50px;
			box-shadow: 0 10px 40px rgba(0,0,0,0.04);
			border: 2px solid #0056b3;
		}

		.cluster-content { display: none; }
		.cluster-content.active { display: block; animation: fadeIn 0.4s ease; }

		.detail-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
			gap: 40px;
		}

		.detail-item h3 {
			font-family: 'Crimson Pro', serif;
			font-size: 22px;
			color: var(--dark);
			margin-bottom: 15px;
			border-left: 4px solid var(--secondary); /* Small accent bar on left */
			padding-left: 15px;
		}

		.detail-item p {
			font-size: 15px;
			color: var(--text-main);
			line-height: 1.7;
		}

		@keyframes fadeIn {
			from { opacity: 0; transform: translateY(10px); }
			to { opacity: 1; transform: translateY(0); }
		}
		
		/* Mega Menu Box */
		.dropdown-menu.mega-menu {
			position: absolute;
			top: 100%;
			left: 50%;
			width: 650px; /* Standard width for 3 columns */
			padding: 30px;
			left: 50%;
			transform: translateX(-50%);
			background: #ffffff;
			border-radius: 12px;
			box-shadow: 0 20px 50px rgba(0,0,0,0.12);
			border: 1px solid #e2e8f0;
			opacity: 0;
			visibility: hidden;
			transition: var(--transition);
			z-index: 1000;

		}

		.mega-menu-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 25px;
		}

		.mega-column {
			display: flex;
			flex-direction: column;
		}

		.column-title {
			font-size: 11px;
			font-weight: 800;
			color: #0056b3;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 15px;
			padding-bottom: 8px;
			border-bottom: 1px solid #f1f5f9;
		}

		/* Icon box like your screenshot */
		.icon-box {
			flex-shrink: 0;
			width: 32px;
			height: 32px;
			min-width: 42px; /* Prevents shrinking */
			background: #f0f7ff; 
			border-radius: 6px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			transition: all 0.3s ease;
		}

		.icon-box i {
			color: #0056b3;
			font-size: 14px;
		}

		.dropdown-item {
			display: flex !important;
			align-items: center;
			padding: 8px 10px !important;
			border-radius: 6px;
			margin-bottom: 2px;
			transition: all 0.2s ease;
		}

		.dropdown-item:hover {
			background: #f8fafc;
			transform: translateX(4px); /* Subtle slide like modern SaaS */
		}

		/* Text Styling - strictly 1-2 lines */
		.dropdown-item .title {
			font-size: 14px;
			font-weight: 600;
			color: #1e293b;
			line-height: 1.2;
			display: block;
		}

		/* Optional hover state for icon */
		.dropdown-item:hover .icon-box {
			background: #0056b3;
		}
		.dropdown-item:hover .icon-box i {
			color: #ffffff;
		}
		
		.trust-section {
			padding: 80px 5%;
			background: #ffffff;
			text-align: center;
		}

		.trust-title {
			font-size: 25px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			color: #0A2463; /* Professional slate gray */
			margin-bottom: 50px;
		}

		.logo-grid {
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 30px;
			flex-wrap: wrap;
		}

		.logo-card {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px 40px;
			background: #ffffff;
			border: 0px solid #f1f5f9; /* Extremely light border */
			border-radius: 12px;
			transition: all 0.3s ease;
			min-width: 200px;
			height: 100px;
		}

		/* Hover effect: Subtle shadow and lift */
		.logo-card:hover {
			border-color: #e2e8f0;
			box-shadow: 0 10px 25px rgba(0,0,0,0.05);
			transform: translateY(-5px);
		}

		.logo-card img {
			max-height: 50px;
			max-width: 100%;
			object-fit: contain;
			/* Removed grayscale filter to keep original colors */
		}

		/* Mobile responsiveness */
		@media (max-width: 768px) {
			.logo-grid { gap: 15px; }
			.logo-card { min-width: 150px; padding: 15px 25px; }
		}
		
		/* Ensure the Industries menu aligns with your existing Solutions menu */
		.nav-links li:hover .mega-menu {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
		}

		/* Icon box styling to match your brand blue */
		.icon-box {
			background: #f0f7ff;
			transition: all 0.3s ease;
		}

		.dropdown-item:hover .icon-box {
			background: #0056b3; /* Your primary blue */
		}

		.dropdown-item:hover .icon-box i {
			color: #ffffff;
		}

		.dropdown-item .title {
			transition: color 0.2s ease;
		}

		.dropdown-item:hover .title {
			color: #0056b3;
		}
		
				
		/* 1. CRM HERO SECTION (Full-Bleed Right) */
        .crm-hero {
            background-color: var(--dark-navy);
            min-height: 85vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .hero-flex { display: flex; width: 100%; align-items: center; }

        .hero-content {
            flex: 1;
            padding-left: 8%;
            padding-right: 5%;
            color: #ffffff;
            z-index: 2;
        }

        .badge {
            background: var(--accent-blue);
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 13px;
            font-weight: 700;
            text-transform: uppercase;
            display: inline-block;
            margin-bottom: 20px;
        }

        .hero-content h1 {
            font-family: 'Crimson Pro', serif;
            font-size: 52px;
            line-height: 1.1;
            margin-bottom: 25px;
        }

        .hero-content p {
            font-size: 18px;
            color: #94a3b8;
            line-height: 1.7;
            margin-bottom: 40px;
            max-width: 550px;
        }

        .hero-image-container {
            flex: 1.3;
            height: 85vh;
            display: flex;
            justify-content: flex-end;
			padding-right: 0; 
			overflow: hidden;
			position: relative;
        }
		
		.hero-image-container::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 100px;
			height: 100%;
			background: linear-gradient(to right, transparent, var(--dark-navy));
			pointer-events: none;
		}

        .hero-image-container img {
            width: auto;
            height: 80%;
			max-width: 100%;
            object-fit: Contain;
            object-position: left Center;
            border-radius: 40px 0 0 40px;
            box-shadow: -20px 0 60px rgba(0,0,0,0.4);
            align-self: center;
            border-left: 1px solid rgba(255,255,255,0.1);
        }
		
		/* 2. INTRO SECTION */
        .intro-section {
            padding: 100px 15%;
            text-align: center;
            background: #ffffff;
        }

        .intro-section h2 {
            font-family: 'Crimson Pro', serif;
            font-size: 36px;
            color: #0A2463;
            margin-bottom: 20px;
        }

        .intro-section p {
            font-size: 18px;
            line-height: 1.8;
            color: #64748b;
        }
		
		.btn-primary {
            background: var(--accent-blue);
            color: white;
            padding: 16px 36px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 700;
            display: inline-block;
        }
		
		/* MODIFIED HERO SECTION */
        .app-hero {
            background: #000; /* Solid black background like your reference */
            display: flex;
            min-height: 600px; /* Adjust height as needed */
            align-items: stretch; /* Makes children full height */
            overflow: hidden;
        }

        .hero-text { 
            flex: 1; 
            padding: 80px 5% 80px 8%; /* Extra padding on the left */
            display: flex;
            flex-direction: column;
            justify-content: center;
            color: #38bdf8;
        }

        .hero-text h1 { 
            font-family: 'Inter', sans-serif; /* Cleaner font for this specific style */
            font-weight: 800;
            font-size: 48px; 
            line-height: 1.1; 
            margin-bottom: 24px; 
            letter-spacing: -1px;
        }

        .hero-text p { 
            font-size: 18px; 
            color: #cbd5e1; 
            margin-bottom: 35px; 
            max-width: 800px;
        }
        
        /* FULL IMAGE SIDE */
        .hero-image-side { 
            flex: 1; 
            position: relative;
            background-size: cover;
            background-position: center;
            /* Creates the rounded corner effect on the left side of the image */
            border-top-left-radius: 60px; 
            border-bottom-left-radius: 60px;
        }

        /* Buttons */
        .cta-button {
            background: white;
            color: black;
            padding: 14px 28px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 700;
            display: inline-block;
            width: fit-content;
            transition: 0.3s;
        }
        .cta-button:hover { background: #e2e8f0; }
		
		/* App Store Style Buttons */
        .app-badge-group { display: flex; gap: 15px; margin-top: 20px; }
        .app-badge { background: #000; color: white; padding: 10px 20px; border-radius: 8px; border: 5px solid #0056b3; display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 14px; }
		
		/* Rest of your styling... */
        .intro-container { padding: 80px 8%; background: white; }
        .highlight-box {
            background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
            border-left: 6px solid var(--accent-blue);
            border-radius: 24px;
            padding: 50px;
            display: flex;
            gap: 50px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.03);
            align-items: center;
        }
        .highlight-box h2 { font-family: 'Crimson Pro', serif; font-size: 36px; margin: 0; flex: 1; color: var(--dark-navy); }
        .highlight-box .desc { flex: 2; border-left: 1px solid #e2e8f0; padding-left: 50px; }
		
		/* 3. FEATURE CATEGORIES */
        .features-section { padding: 80px 8%; background: var(--bg-light); }
        .category-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .category-card {
            background: white;
            padding: 40px;
            border-radius: 24px;
            border: 1px solid #e2e8f0;
            transition: 0.3s;
        }
        .category-card:hover { transform: translateY(-5px); border-color: var(--accent-blue); }
        .category-card i { font-size: 28px; color: var(--accent-blue); margin-bottom: 20px; display: block; }
        .category-card h3 { font-size: 22px; margin-bottom: 20px; border-bottom: 2px solid var(--bg-light); padding-bottom: 10px; }
        
        .feature-item { margin-bottom: 15px; font-size: 15px; }
        .feature-item strong { display: block; color: var(--dark-navy); margin-bottom: 4px; }
        .feature-item span { color: #64748b; font-size: 14px; display: block; }
		
		/* 1. HERO SECTION */
        .pos-hero {
            background-color: var(--dark-navy);
            min-height: 85vh;
            display: flex;
            align-items: center;
            overflow: hidden;
            position: relative;
        }

        .hero-flex { display: flex; width: 100%; align-items: center; }

        .hero-content {
            flex: 1;
            padding: 0 8%;
            color: #ffffff;
            z-index: 2;
        }

        .hero-content h1 {
            font-family: 'Crimson Pro', serif;
            font-size: 52px;
            line-height: 1.1;
            margin-bottom: 20px;
        }

        .hero-content p {
            font-size: 18px;
            color: #94a3b8;
            margin-bottom: 35px;
            max-width: 550px;
        }

        .hero-btns { display: flex; gap: 25px; align-items: center; }

        .btn-primary {
            background: var(--accent-blue);
            color: white;
            padding: 16px 35px;
            border-radius: 8px;
            text-decoration: none;
            font-weight: 700;
            transition: 0.3s;
        }
		
		.btn-primary:hover {
            background: var(--primary-blue);
            transform: translateY(-2px);
        }
		
		.btn-video-link {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
            text-decoration: none;
            font-weight: 600;
        }

        .play-icon {
            width: 44px;
            height: 44px;
            background: rgba(255,255,255,0.1);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: 0.3s;
        }

        .btn-video-link:hover .play-icon {
            background: var(--accent-blue);
            border-color: var(--accent-blue);
        }

        .btn-video {
            display: flex;
            align-items: center;
            gap: 12px;
            color: white;
            text-decoration: none;
            font-weight: 600;
            transition: 0.3s;
        }

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

        .btn-video:hover .play-circle { background: var(--accent-blue); border-color: var(--accent-blue); }

        .hero-image-container {
            flex: 1.3;
			height: 85vh;
			display: flex;
			align-items: center;
			justify-content: flex-start; /* Keeps it snug against the text side */
			padding-right: 0; 
			overflow: hidden;
			position: relative;
        }

        .hero-image-container img {
			width: auto;            /* Allows the image to keep its natural width */
			height: 80%;           /* Scale based on height so it doesn't hit the top/bottom */
			max-width: 100%;       /* Allows it to slightly "bleed" off the right if screen is small */
			object-fit: contain;   /* IMPORTANT: This ensures the whole image is visible */
			object-position: left center;
			border-radius: 40px 0 0 40px;
			box-shadow: -20px 0 60px rgba(0,0,0,0.4);
			border-left: 1px solid rgba(255,255,255,0.1);
		}
		
		.hero-image-container::after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			width: 100px;
			height: 100%;
			background: linear-gradient(to right, transparent, var(--dark-navy));
			pointer-events: none;
		}
		
		/* 2. DEFINITION SECTION */
        .pos-intro {
			padding: 80px 10%;
			background: #ffffff;
		}

		.intro-highlight-box {
			background: #f8fafc; /* Very light slate */
			border-radius: 24px;
			padding: 60px;
			border: 1px solid #e2e8f0;
			position: relative;
			max-width: 1000px;
			margin: 0 auto;
			text-align: left; /* Left align for readability */
			display: flex;
			gap: 40px;
			align-items: center;
		}

		.intro-text-content h2 {
			font-family: 'Crimson Pro', serif;
			font-size: 32px;
			color: var(--dark-navy);
			margin-bottom: 20px;
		}

		.intro-icon {
			font-size: 50px;
			color: var(--accent-blue);
			opacity: 0.5;
		}
		
		/* 1. HERO SECTION */
        .portal-hero {
            background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.85)), 
                        url('/wp-content/themes/Averiware-custom-theme/images/SelfService-Banner.jpg');
            background-size: cover;
            background-position: center;
            padding: 140px 8%;
            text-align: center;
            color: white;
        }
        .portal-hero h1 { font-family: 'Crimson Pro', serif; font-size: 54px; margin-bottom: 20px; }
        .portal-hero p { font-size: 20px; max-width: 850px; margin: 0 auto 40px; color: #cbd5e1; }
		
		/* 2. SPLIT INFO SECTION */
        .info-split {
            display: flex;
            align-items: center;
            padding: 100px 8%;
            gap: 80px;
            background: #fff;
        }
        .info-text { flex: 1; }
        .info-image { flex: 1; position: relative; }
        .info-image img { 
            width: 100%; 
            border-radius: 24px; 
            box-shadow: 0 30px 60px rgba(0,0,0,0.12); 
            border: 1px solid #e2e8f0;
        }
        .info-text h2 { font-family: 'Crimson Pro', serif; font-size: 40px; color: var(--dark-navy); margin-bottom: 25px; }
        .info-text p { font-size: 18px; color: var(--text-slate); margin-bottom: 20px; }

        /* 3. FEATURE GRID */
        .features-section { padding: 100px 8%; background-color: var(--bg-light); }
        .features-header { text-align: center; margin-bottom: 60px; }
        .features-grid { 
            display: grid; 
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
            gap: 25px; 
        }

        /* Digital Tablet Style Cards */
        .portal-card {
            background: #ffffff;
            padding: 35px;
            border-radius: 20px;
            border: 1px solid #e2e8f0;
            position: relative;
            transition: all 0.4s ease;
        }
        .portal-card::before {
            content: ''; position: absolute; top: 25%; left: 0; width: 4px; height: 50%;
            background: var(--accent-blue); opacity: 0.2; transition: 0.3s;
        }
        .portal-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); border-color: var(--accent-blue); }
        .portal-card:hover::before { opacity: 1; height: 70%; top: 15%; }

        .icon-circle {
            width: 50px; height: 50px; background: #eff6ff; color: var(--accent-blue);
            display: flex; align-items: center; justify-content: center;
            border-radius: 12px; font-size: 20px; margin-bottom: 20px;
        }
        .portal-card h3 { font-family: 'Crimson Pro', serif; font-size: 22px; color: var(--dark-navy); margin-bottom: 12px; }
        .portal-card p { font-size: 14px; color: var(--text-slate); margin: 0; }

        @media (max-width: 992px) {
            .info-split { flex-direction: column; text-align: center; padding: 60px 5%; }
            .portal-hero h1 { font-size: 38px; }
		}
		
		/* --- FEATURE GRID --- */
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
        .card { padding: 40px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; transition: 0.3s; }
        .card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
        .card i { font-size: 32px; color: var(--primary); margin-bottom: 20px; }
		
		/* --- FINAL CTA --- */
        .cta-banner { 
            background: linear-gradient(135deg, var(--primary) 0%, #003d80 100%); 
            color: white; text-align: center; padding: 80px 10%; 
        }
        .btn-secondary { 
            background: #ff8c38; color: white; padding: 18px 40px; 
            border-radius: 8px; text-decoration: none; font-weight: 800; font-size: 18px;
            display: inline-block; margin-top: 20px;
        }

        ul { list-style: none; padding: 0; }
        li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; font-size: 15px; }
        li i { color: #10b981; }
		
		/* --- INDUSTRY BENEFITS SECTION --- */
        .benefits-section { background: var(--dark); color: white; }
        .benefit-item { display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start; }
        .benefit-icon { background: rgba(255,255,255,0.1); padding: 15px; border-radius: 50%; color: var(--secondary); }
		
		/* --- SOLUTION LINKS --- */
        .solution-links { background: var(--light); text-align: center; }
        .btn-outline-ws { 
            padding: 12px 25px; border: 2px solid var(--primary); color: var(--primary); 
            text-decoration: none; border-radius: 6px; font-weight: 700; transition: 0.3s;
            display: inline-block; margin: 10px;
        }
		.btn-outline-ws:hover { background: var(--primary); color: white; }
        
		
	/* ============================================
	   SERVICE COMPANY PAGE
	   ============================================ */

	/* --- HERO SECTION --- */
	.service-hero {
		position: relative;
		display: block;
		background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8));, 
					url('/wp-content/themes/Averiware-custom-theme/images/Service-Companies_Banner.png');
		background-size: cover;
		background-position: center;
		background-attachment: scroll;
		color: white;
		padding: 140px 0;
		text-align: center;
		min-height: 400px;
		z-index: 1;
	}

	.service-hero h1 { font-size: 3rem; margin-bottom: 20px; color: white; }
	.service-hero p  { font-size: 1.2rem; max-width: 700px; margin: 0 auto; opacity: 0.9; }

	/* --- INTEGRATION HUB --- */
	.hub-section { background: var(--light-bg); text-align: center; }
	.bento-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
		gap: 20px;
		margin-top: 40px;
	}
	.bento-item {
		background: white;
		padding: 30px;
		border-radius: 12px;
		box-shadow: 0 4px 6px rgba(0,0,0,0.05);
		border-top: 4px solid var(--primary);
	}
	.bento-item i  { font-size: 24px; color: var(--primary); margin-bottom: 15px; display: block; }
	.bento-item h4 { margin: 0; font-weight: 700; color: var(--dark); }

	/* --- FEATURE ROWS --- */
	.feature-row {
		display: flex;
		align-items: center;
		gap: 60px;
		flex-wrap: wrap;
		margin-bottom: 100px;
	}
	.feature-row:nth-child(even) { flex-direction: row-reverse; }
	.feature-text  { flex: 1; min-width: 300px; }
	.feature-image { flex: 1; min-width: 300px; position: relative; }
	.feature-image img {
		width: 100%;
		border-radius: 20px;
		box-shadow: 0 20px 40px rgba(0,0,0,0.1);
	}

	/* --- CHECK LIST --- */
	.check-list { list-style: none !important; padding: 0 !important; margin-top: 20px; }
	.check-list li {
		margin-bottom: 12px !important;
		display: flex !important;
		align-items: center !important;
		gap: 10px !important;
		font-size: 15px;
		color: #475569;
	}
	.check-list li i { color: #10b981 !important; font-size: 16px; }

	/* --- FINAL CTA --- */
	.service-final-cta {
		background: var(--primary);
		color: white;
		text-align: center;
		padding: 60px 20px;
		border-radius: 20px;
		margin-bottom: 80px;
	}
	.service-final-cta h2 { color: white; font-size: 2rem; margin-bottom: 15px; }
	.service-final-cta p  { opacity: 0.9; margin-bottom: 5px; }

	.btn-orange {
		background: var(--accent-orange);
		color: white !important;
		padding: 16px 40px;
		border-radius: 8px;
		text-decoration: none;
		font-weight: 800;
		display: inline-block;
		margin-top: 25px;
		transition: 0.3s;
	}
	.btn-orange:hover { transform: scale(1.05); background: #e67d2e; }

	/* --- SERVICE PAGE RESPONSIVE --- */
	@media (max-width: 768px) {
		.feature-row,
		.feature-row:nth-child(even) { flex-direction: column; }
		.service-hero h1 { font-size: 2rem; }
		.bento-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================
	   Professional Service PAGE
	   ============================================ */
	   
	 /* --- HERO SECTION --- */
	.hero-PS {
		position: relative;
		display: block;
		background: linear-gradient(rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.8)), 
					url('/wp-content/themes/Averiware-custom-theme/images/Professional-Services-Banner.jpg');
		background-size: cover;
		background-position: center;
		background-attachment: scroll;
		color: white;
		padding: 140px 0;
		text-align: center;
		min-height: 400px;
		z-index: 1;
	}
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
        .card { padding: 40px; background: white; border: 1px solid #e2e8f0; border-radius: 12px; transition: 0.3s; }
        .card:hover { transform: translateY(-10px); border-color: var(--primary); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
        .card i { font-size: 32px; color: var(--primary); margin-bottom: 20px; }
        
        .benefits { background: var(--dark); color: white; }
        .benefit-item { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 20px;}
        
        .btn-secondary { 
            background: #ff8c38; color: white; padding: 18px 40px; 
            border-radius: 8px; text-decoration: none; font-weight: 800; display: inline-block;
        }

        ul { list-style: none; padding: 0; }
        li { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
        li i { color: #10b981; }
		
/* ============================================
	   Field service Provider PAGE
	   ============================================ */
	  /* ALTERNATING SECTIONS */
        .feature-row-FSP {
            padding: 100px 8%;
            display: flex;
            align-items: center;
            gap: 80px;
            max-width: 1800px;
            margin: 0 auto;
        }
		
		.feature-row-FSP:nth-child(even) { flex-direction: row-reverse; }
        .feature-row-FSP:nth-child(odd) { background-color: white; }
        .feature-row-FSP:nth-child(even) { background-color: var(--bg-light); }

        .feature-text { flex: 1; }
        .feature-text i { font-size: 32px; color: var(--accent-blue); margin-bottom: 20px; }
        .feature-text h2 { font-family: 'Crimson Pro', serif; font-size: 42px; margin-bottom: 20px; }
        .feature-text p { font-size: 18px; color: var(--text-slate); margin-bottom: 25px; }
		
		/* Hover effect: Subtle 3D tilt */
        .feature-row-FSP:hover .img-wrapper {
            transform: translateY(-10px) rotateX(2deg) rotateY(-2deg);
        }
	  
	  /* CENTERED INTRO */
        .service-intro { padding: 100px 10%; text-align: center; background: white; }
        .service-intro h2 { font-family: 'Crimson Pro', serif; font-size: 42px; color: var(--dark-navy); margin-bottom: 25px; }
        .service-intro p { font-size: 19px; color: var(--text-slate); max-width: 900px; margin: 0 auto; }

/* ============================================
	   Micro Market PAGE
	   ============================================ */
		
		/* 1. SPLIT HERO SECTION */
        .pantry-hero {
            display: flex;
            align-items: center;
            padding: 120px 8%;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            gap: 60px;
            min-height: 50vh;
        }

        .hero-content { flex: 1; }
        .hero-content h1 { 
            font-family: 'Crimson Pro', serif; 
            font-size: 48px; 
            line-height: 1.2; 
            margin-bottom: 20px; 
            color: #FFFF;
        }
        .hero-content p { font-size: 19px; color: #FFFF; margin-bottom: 35px; max-width: 550px; }

        .btn-group { display: flex; gap: 15px; }
        .btn-primary { 
            background: #0056b3; color: white; padding: 16px 32px; 
            border-radius: 8px; text-decoration: none; font-weight: 700; transition: 0.3s;
        }
        .btn-video { 
            background: white; color: #0056b3; padding: 16px 32px; 
            border-radius: 8px; text-decoration: none; font-weight: 700; 
            border: 1px solid #0056b3; transition: 0.3s;
            display: flex; align-items: center; gap: 10px;
        }
        .btn-video:hover { background: var(--soft-blue); }

        .hero-visual { flex: 1.2; position: relative; }
        .hero-visual img { 
            width: 100%; border-radius: 24px; 
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); 
            border: 8px solid white;
        }

        /* 2. INTRO SECTION */
        .intro-section { padding: 100px 15%; text-align: center; background: white; }
        .intro-section h2 { font-family: 'Crimson Pro', serif; font-size: 36px; margin-bottom: 25px; color: #0056b3; }
        .intro-section p { font-size: 18px; text-align: Left; color: var(--text-slate); margin-bottom: 20px; }

        /* 3. KEY FEATURES GRID (Modern Cards) */
        .features-grid {
            padding: 80px 8%;
            background-color: #f8fafc;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .feature-card {
            background: white;
            padding: 40px;
            border-radius: 20px;
            border: 1px solid var(--border-light);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            border-color: var(--brand-blue);
            box-shadow: 0 15px 30px rgba(0,0,0,0.05);
        }

        .feature-card i { 
            font-size: 24px; color: var(--brand-blue); 
            background: var(--soft-blue); padding: 15px; 
            border-radius: 12px; margin-bottom: 20px; display: inline-block;
        }

        .feature-card h4 { font-size: 20px; margin-bottom: 12px; color: var(--dark-navy); }
        .feature-card p { font-size: 15px; color: var(--text-slate); margin: 0; }

        @media (max-width: 992px) {
            .pantry-hero { flex-direction: column; text-align: center; padding-top: 60px; }
            .hero-content p { margin-left: auto; margin-right: auto; }
            .btn-group { justify-content: center; }
        }
		
		/* Premium Hover Animations */
		.op-card {
			background: white;
			padding: 50px 40px;
			border-radius: 24px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.03);
			border: 1px solid #f1f5f9;
			position: relative;
			transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
		}

		.op-card:hover {
			transform: translateY(-12px);
			box-shadow: 0 30px 60px rgba(15, 23, 42, 0.1) !important;
			border-color: #3b82f6 !important;
		}

		.feature-tag {
			text-transform: uppercase;
			letter-spacing: 2px;
			font-weight: 700;
			font-size: 13px;
			display: block;
			margin-bottom: 12px;
		}

		.styled-list li {
			display: flex;
			align-items: center;
			margin-bottom: 18px;
			font-weight: 600;
			color: #0f172a;
		}

		.styled-list i {
			color: #10b981;
			font-size: 20px;
			margin-right: 15px;
		}

/* ============================================
	   ERP Essentials Guide PAGE
	   ============================================ */
	   
	   /* --- MODERN HERO --- */
        .hero-banner {
            /* Use the filename you uploaded */
			background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), 
						url('/wp-content/themes/Averiware-custom-theme/images/ERPEssentialsGuide.jpg');
			
			/* Background sizing properties */
			background-size: cover;
			background-position: center;
			background-attachment: scroll; /* Use 'fixed' for a parallax effect */
			
			/* Layout properties */
			min-height: 500px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 60px 20px;
			color: #ffffff;
		}

        .hero-banner h1 { font-size: 3.5rem; font-weight: 800; margin: 0; letter-spacing: -1px; }
        .hero-banner p { font-size: 1.25rem; opacity: 0.8; margin-top: 20px; }

        /* --- LAYOUT STRUCTURE --- */
        .main-wrapper {
            max-width: 1200px;
            margin: -80px auto 100px;
            display: grid;
            grid-template-columns: 280px 1fr;
            gap: 40px;
            padding: 0 20px;
        }

        /* --- STICKY SIDEBAR --- */
        .sidebar {
            position: sticky;
            top: 40px;
            height: fit-content;
            background: var(--light-bg);
            padding: 30px;
            border-radius: 16px;
            border: 1px solid var(--border);
        }

        .sidebar h5 { font-weight: 800; text-transform: uppercase; font-size: 12px; margin-bottom: 20px; color: var(--primary); }
        .sidebar a { display: block; text-decoration: none; color: var(--text); margin-bottom: 15px; font-weight: 600; font-size: 14px; transition: 0.3s; }
        .sidebar a:hover { color: var(--primary); transform: translateX(5px); }

        /* --- CONTENT AREA --- */
        .content-card {
            background: white;
            padding: 60px;
            border-radius: 20px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border);
        }

        h2 { font-size: 2rem; font-weight: 800; color: var(--dark); margin-top: 50px; }
        p { line-height: 1.8; font-size: 1.1rem; }

        /* --- BENTO GRID FOR PILLARS --- */
        .pillar-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin: 40px 0;
        }

        .pillar-card {
            padding: 30px;
            border-radius: 16px;
            background: var(--light-bg);
            border: 1px solid var(--border);
            transition: 0.3s;
        }

        .pillar-card:hover { border-color: var(--primary); background: #fff; transform: translateY(-5px); }
        .pillar-card i { font-size: 24px; color: var(--primary); margin-bottom: 15px; display: block; }
        .pillar-card h4 { margin: 0 0 10px; font-weight: 800; }

        /* --- VIDEO WRAPPER --- */
        .video-box {
            margin: 40px 0;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            position: relative;
            padding-bottom: 56.25%;
            height: 0;
        }
        .video-box iframe { position: absolute; top:0; left:0; width:100%; height:100%; }

        /* --- CTA SECTION --- */
        .guide-cta {
            background: linear-gradient(135deg, var(--primary) 0%, #003366 100%);
            border-radius: 16px;
            padding: 40px;
            color: white;
            text-align: center;
            margin-top: 60px;
        }

        .btn-cta {
            background: var(--secondary);
            color: white;
            padding: 15px 35px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 800;
            display: inline-block;
            margin-top: 20px;
            box-shadow: 0 10px 20px rgba(255, 140, 56, 0.3);
        }

        @media (max-width: 992px) {
            .main-wrapper { grid-template-columns: 1fr; }
            .sidebar { display: none; }
        }
		
/* ============================================
	   Support PAGE
	   ============================================ */
	   
	   /* 1. SEARCH HERO */
        .support-hero {
			/* Use the filename you uploaded */
			background: linear-gradient(rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.7)), 
						url('/wp-content/themes/Averiware-custom-theme/images/HelpSupport.jpg');
			
			/* Background sizing properties */
			background-size: cover;
			background-position: center;
			background-attachment: scroll; /* Use 'fixed' for a parallax effect */
			
			/* Layout properties */
			min-height: 500px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			padding: 60px 20px;
			color: #ffffff;
		}
        .support-hero h1 { font-size: 42px; font-weight: 800; margin-bottom: 20px; }
        .search-container {
            max-width: 600px;
            margin: 0 auto;
            position: relative;
        }
        .search-container input {
            width: 100%;
            padding: 18px 25px 18px 60px;
            border-radius: 50px;
            border: none;
            font-size: 17px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
        }
        .search-container i {
            position: absolute;
            left: 25px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--slate);
            font-size: 20px;
        }

        /* 2. CATEGORY GRID */
        .support-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
            padding: 60px 8%;
            max-width: 1200px;
            margin: 0 auto;
        }
        .support-card {
            border: 1px solid #e2e8f0;
            padding: 30px;
            border-radius: 16px;
            text-align: center;
            transition: 0.3s;
            text-decoration: none;
            color: inherit;
        }
        .support-card:hover {
            border-color: var(--primary);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transform: translateY(-5px);
        }
        .support-card i { font-size: 32px; color: var(--primary); margin-bottom: 15px; }
        .support-card h3 { font-size: 20px; margin-bottom: 10px; }
        .support-card p { color: var(--slate); font-size: 14px; margin: 0; }

        /* 3. CONTACT STRIP */
        .contact-strip {
            background-color: #0f172a;
            padding: 60px 8%;
            text-align: center;
        }
        .contact-options {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            flex-wrap: wrap;
        }
        .contact-method {
            background: white;
            padding: 25px;
            border-radius: 12px;
            min-width: 220px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
        }
        .btn-contact {
            display: inline-block;
            margin-top: 10px;
            color: var(--primary);
            font-weight: 700;
            text-decoration: none;
            font-size: 14px;
        }

        /* 4. SPLIT FORM & FAQ SECTION */
        .split-section {
            display: grid;
            grid-template-columns: 1.4fr 1fr; /* Form is wider, FAQ is narrower sidebar */
            gap: 50px;
            padding: 80px 8%;
            max-width: 1600px;
            margin: 0 auto;
        }

        /* FORM STYLES */
        .support-form-container {
            background: linear-gradient(135deg, #ff8c38 0%, #ffab70 100%);
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.04);
            border: 1px solid #f1f5f9;
        }
        .support-form-container h2 { margin-top: 0; margin-bottom: 25px; font-size: 28px; }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
        .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
        .form-group.full-width { grid-column: span 2; }
        .form-group label { font-weight: 600; font-size: 13px; color: var(--dark); }
        .form-group input, .form-group select, .form-group textarea {
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-family: inherit;
        }
        .btn-submit {
            background: var(--primary);
            color: white;
            border: none;
            padding: 16px;
            border-radius: 8px;
            font-weight: 700;
            cursor: pointer;
            width: 100%;
            transition: 0.3s;
        }

        /* FAQ STYLES (Moving to Right) */
        .faq-sidebar h2 { margin-top: 0; margin-bottom: 25px; font-size: 28px; }
        .faq-item {
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 18px;
            margin-bottom: 15px;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: 0.2s;
        }
        .faq-item:hover { border-color: var(--primary); background: #f0f7ff; }
        .faq-item h4 { margin: 0; font-size: 15px; color: var(--dark); line-height: 1.4; padding-right: 10px; }
        .faq-item i { color: var(--slate); font-size: 12px; }

        @media (max-width: 992px) {
            .support-grid { grid-template-columns: 1fr; }
            .split-section { grid-template-columns: 1fr; }
            .form-grid { grid-template-columns: 1fr; }
            .form-group.full-width { grid-column: span 1; }
        }
		
/* ============================================
	   Book-Demo PAGE
	   ============================================ */
	   
	   /* Demo Page Specifics */
        .demo-hero { 
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); 
            padding: 80px 10%; 
            color: white; 
            text-align: center;
        }
        
        .demo-container { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
            gap: 60px; 
            padding: 80px 10%; 
            background: #fff;
        }

        .form-card { 
            background: white; 
            padding: 40px; 
            border-radius: 20px; 
            box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
            border: 1px solid #e2e8f0;
        }

        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; margin-bottom: 8px; font-weight: 600; color: var(--dark); }
        .form-group input, .form-group select, .form-group textarea { 
            width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-family: inherit; 
        }

        .btn-submit { 
            background: #0056b3; 
            color: white; 
            width: 100%; 
            padding: 16px; 
            border: none; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 16px; 
            cursor: pointer;
            transition: 0.3s;
        }
        .btn-submit:hover { background: #e67622; transform: translateY(-2px); }

        .benefits-side h2 { color: var(--dark); font-size: 32px; margin-bottom: 20px; }
        .benefit-item { display: flex; gap: 15px; margin-bottom: 25px; }
        .benefit-item i { color: #ff8c38; font-size: 20px; margin-top: 5px; }
        
        /* Footer remains same as index.html */
        footer { background: var(--dark); color: #fff; padding: 60px 10% 20px; }
		
		/* Style for the date and time icons */
		.form-group label i {
			color: #0056b3;
			margin-right: 5px;
		}

		/* Modern styling for the date input */
		input[type="date"] {
			cursor: pointer;
			background-color: #fff;
			color: var(--dark);
			font-weight: 500;
		}

		/* Hover effect for form elements */
		.form-group input:focus, .form-group select:focus {
			outline: none;
			border-color: var(--primary);
			box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
		}
		
/* ============================================
	   Plan and Pricing PAGE
	   ============================================ */
	   
	   		/* Premium Hover Animations */
		.op-card {
			background: white;
			padding: 50px 40px;
			border-radius: 24px;
			box-shadow: 0 4px 20px rgba(0,0,0,0.03);
			border: 1px solid #f1f5f9;
			position: relative;
			transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
		}

		.op-card:hover {
			transform: translateY(-12px);
			box-shadow: 0 30px 60px rgba(15, 23, 42, 0.1) !important;
			border-color: #3b82f6 !important;
		}

		.feature-tag {
			text-transform: uppercase;
			letter-spacing: 2px;
			font-weight: 700;
			font-size: 13px;
			display: block;
			margin-bottom: 12px;
		}

		.styled-list li {
			display: flex;
			align-items: center;
			margin-bottom: 18px;
			font-weight: 600;
			color: #0f172a;
		}

		.styled-list i {
			color: #10b981;
			font-size: 20px;
			margin-right: 15px;
		}
		
		/* 1. The Container for the Icon and Popover */
		.info-wrapper {
			position: relative;
			display: inline-flex;
			align-items: center;
			cursor: pointer;
			vertical-align: middle;
			text-transform: none; /* Keeps popover text from being all-caps */
			letter-spacing: normal;
		}

		/* 2. The (i) Icon Styling */
		.info-icon {
			color: #94a3b8;
			font-size: 14px;
			margin-left: 8px;
			transition: color 0.2s ease;
		}

		.info-wrapper:hover .info-icon {
			color: #3b82f6; /* Turns blue on hover */
		}

		/* 3. The Detail Box (Hidden by Default) */
		.feature-detail-box {
			visibility: hidden;
			opacity: 0;
			width: 380px; /* Wider for multi-paragraph ERP details */
			background-color: #ffffff;
			color: #1e293b;
			border-radius: 12px;
			padding: 24px;
			position: absolute;
			z-index: 100;
			bottom: 140%; /* Positioned above the header */
			left: 0;
			box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
			border: 1px solid #e2e8f0;
			transition: all 0.3s ease;
			pointer-events: none; /* Prevents the box from blocking mouse movement */
		}

		/* 4. Show the box on Hover */
		.info-wrapper:hover .feature-detail-box {
			visibility: visible;
			opacity: 1;
			bottom: 125%; /* Slight slide-up animation */
		}

		/* 5. The Decorative Arrow at the bottom of the box */
		.feature-detail-box::after {
			content: "";
			position: absolute;
			top: 100%;
			left: 15px;
			border-width: 8px;
			border-style: solid;
			border-color: #ffffff transparent transparent transparent;
		}

		/* 6. Internal Text Styling */
		.feature-detail-box h4 {
			margin: 0 0 12px 0;
			font-size: 16px;
			color: #0f172a;
			font-weight: 700;
		}

		.feature-detail-box p {
			font-size: 14px;
			line-height: 1.6;
			margin-bottom: 12px;
			color: #475569;
		}

		.feature-detail-box p:last-child {
			margin-bottom: 0;
		}
		
		/*div:hover {
			border-color: #3b82f6 !important;
			transform: translateY(-5px);
			box-shadow: 0 20px 40px rgba(0,0,0,0.1);
		}*/
		
		/* --- Final CTA --- */
        .final-cta { background: linear-gradient(135deg, #ff8c38 0%, #ffab70 100%); padding: 80px 10%; text-align: center; color: #fff; }
        .final-cta h2 { font-size: 42px; font-weight: 800; margin-bottom: 20px; color:#fff; }
        .btn-white { background: #fff; color: var(--accent-orange) !important; padding: 18px 40px; border-radius: 12px; font-weight: 700; text-decoration: none; display: inline-block; }
		
		.section-header {
			text-align: center;
			max-width: 700px;
			margin: 0 auto 60px auto; /* Centered with space below */
			padding-top: 50px;
			outline: none; /* Removes the focus box */
			border: none;  /* Ensures no border is triggered */
			box-shadow: none !important; /* Forces the shadow from image_378ddf to disappear */
		}

		.section-label {
			display: inline-block;
			background: rgba(59, 130, 246, 0.1); /* Light blue tint */
			color: #3b82f6;
			padding: 6px 16px;
			border-radius: 50px;
			font-size: 13px;
			font-weight: 700;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin-bottom: 15px;
		}

		.section-header h2 {
			font-family: 'Crimson Pro', serif;
			font-size: 42px;
			color: #0f172a;
			margin-bottom: 15px;
			line-height: 1.2;
		}

		.section-header p {
			font-size: 18px;
			color: #64748b;
			line-height: 1.6;
		}
		
/* ============================================
	   Subscription PAGE
	   ============================================ */
	   /* --- Watch Overview Button Style --- */
		.btn-outline {
			padding: 12px 24px;
			border-radius: 6px;
			font-weight: 600;
			text-decoration: none;
			transition: var(--transition);
			display: inline-flex;
			align-items: center;
			gap: 10px;
			border: 2px solid #ffffff; /* White border to pop on dark background */
			color: #ffffff !important;
			margin-left: 15px; /* Space between buttons */
		}

		.btn-outline:hover {
			background: rgba(255, 255, 255, 0.1);
			transform: translateY(-2px);
		}

		.btn-outline i {
			font-size: 18px;
		}

		/* Ensure buttons stack nicely on mobile */
		@media (max-width: 480px) {
			.cta-group {
				display: flex;
				flex-direction: column;
				gap: 15px;
			}
			.btn-outline {
				margin-left: 0;
			}
		}
		
		/* --- Pricing Section (Refined Style) --- */
		.pricing-section {
			padding: 50px 10%;
			background-color: #f8fafc;
			text-align: center;
		}
		
		/* Target the "Choose Your Perfect Plan" Heading */
		.pricing-section .section-header h2 {
			color: #0A2463;         /* Change to your desired color (e.g., Deep Navy) */
			font-size: 42px;        /* Change the size (e.g., 3rem or 42px) */
			font-weight: 800;       /* Makes it extra bold */
			margin-bottom: 10px;
		}

		/* Target the sub-text below the heading */
		.pricing-section .section-header p {
			color: #64748b;         /* Change to your desired color (e.g., Slate Gray) */
			font-size: 20px;        /* Change the size */
			max-width: 900px;       /* Keeps the text from stretching too wide */
			margin: 0 auto;         /* Centers the text block */
		}
		.pricing-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
			gap: 20px;
			align-items: stretch;
			margin-top: 50px;
		}

		.price-card {
			background: #fff;
			padding: 60px 40px;
			border-radius: 24px;
			border: 1px solid #e2e8f0;
			display: flex;
			flex-direction: column;
			transition: transform 0.3s ease;
		}

		/* Middle Card - Navy Style */
		.price-card.popular {
			background: #0f172a; /* Deep Navy */
			color: #ffffff;
			transform: scale(1.02);
			border: none;
			box-shadow: 0 20px 40px rgba(15, 23, 42, 0.2);
		}

		.price-card h3 {
			font-size: 24px;
			margin-bottom: 15px;
			font-weight: 700;
		}

		.price-value {
			font-size: 52px;
			font-weight: 800;
			margin: 10px 0;
		}

		.price-user-info {
			font-size: 14px;
			color: #64748b;
			margin-bottom: 40px;
		}

		.popular .price-user-info {
			color: #94a3b8;
		}

		.price-features {
			list-style: none;
			padding: 0;
			margin: 0 0 50px 0;
			text-align: left;
			border-top: 1px solid #e2e8f0;
		}

		.popular .price-features {
			border-top: 1px solid #334155;
		}

		.price-features li {
			padding: 15px 0;
			border-bottom: 1px solid #e2e8f0;
			font-size: 15px;
			color: #475569;
		}

		.popular .price-features li {
			border-bottom: 1px solid #334155;
			color: #cbd5e0;
		}

		/* Orange Button Style */
		.btn-orange {
			background: #ff8c38; /* Vibrant Orange */
			color: #fff !important;
			padding: 16px 32px;
			border-radius: 12px;
			font-weight: 700;
			text-decoration: none;
			transition: 0.3s;
			margin-top: auto;
		}

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

		.popular-badge {
			background: #ff8c38;
			color: white;
			padding: 6px 18px;
			border-radius: 100px;
			font-size: 12px;
			font-weight: 700;
			display: inline-block;
			margin: -30px auto 20px auto;
		}
		
		#features-header
		.section-header h2 {
			font-size: 30px;    /* Change size here */
			color: #0A2463;     /* Change color here (Deep Navy) */
			font-weight: 800;   /* Extra bold look */
			margin-bottom: 15px;
		}
		
		/* --- Final CTA Section --- */
		.final-cta {
			background: linear-gradient(135deg, #ff8c38 0%, #ffab70 100%);
			padding: 80px 10%;
			text-align: center;
			color: #ffffff;
		}

		.final-cta h2 {
			font-size: 42px;
			font-weight: 800;
			margin-bottom: 20px;
			color: #ffffff;
		}

		.final-cta p {
			font-size: 18px;
			max-width: 700px;
			margin: 0 auto 40px auto;
			opacity: 0.9;
		}

		.btn-white {
			background: #ffffff;
			color: #ff8c38 !important;
			padding: 18px 40px;
			border-radius: 12px;
			font-weight: 700;
			text-decoration: none;
			font-size: 18px;
			transition: var(--transition);
			display: inline-block;
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
		}

		.btn-white:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px rgba(0,0,0,0.15);
			background: #f8fafc;
		}
		
		/* Keep borders ONLY for the 'Everything you need' section */
		.feature-grid-boxed .feature-card {
			background: #ffffff;
			border: 1px solid #e2e8f0; /* The "box" border */
			border-radius: 20px;
			padding: 30px;
			box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
			transition: all 0.4s ease;
		}

		.feature-grid-boxed .feature-card:hover {
			transform: translateY(-12px);
			border-color: #0056b3; /* Brand blue on hover */
			box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.12);
		}

		/* Ensure other sections (like Stats) stay borderless */
		.stat-card {
			background: transparent;
			border: none;
			box-shadow: none;
		}
	   
	   /* Progress Bar */
        .setup-progress {
            background: #fff;
            padding: 20px 10%;
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #e2e8f0;
        }
        .step { display: flex; align-items: center; gap: 10px; color: var(--slate); font-weight: 600; font-size: 14px; }
        .step.active { color: var(--primary); }
        .step.active i { background: var(--primary); color: #fff; }
        .step i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-size: 12px; font-style: normal; }

        .main-container {
            display: grid;
            grid-template-columns: 1.5fr 1fr;
            gap: 40px;
            padding: 60px 10%;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Account Details Form */
        .card { background: #fff; padding: 40px; border-radius: 16px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e2e8f0; }
        .card h2 { margin-top: 0; font-size: 24px; margin-bottom: 30px; }
        
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
        .field { display: flex; flex-direction: column; gap: 8px; }
        label { font-size: 14px; font-weight: 600; color: var(--dark); }
        input, select { padding: 12px; border: 1px solid #cbd5e1; border-radius: 8px; font-size: 15px; }
        input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0,86,179,0.1); }

        /* Order Summary Column */
        .summary-card { background: var(--dark); color: #fff; padding: 30px; border-radius: 16px; height: fit-content; position: sticky; top: 20px; }
        .plan-badge { background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 100px; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
        .price-row { display: flex; justify-content: space-between; margin: 20px 0; padding-top: 20px; border-top: 1px solid #334155; }
        
        .btn-complete { 
            background: var(--secondary); 
            color: #fff; 
            width: 100%; 
            padding: 18px; 
            border: none; 
            border-radius: 12px; 
            font-weight: 700; 
            font-size: 16px; 
            cursor: pointer; 
            margin-top: 20px;
            transition: 0.3s;
        }
        .btn-complete:hover { background: #e67622; transform: translateY(-2px); }

        .trust-icons { display: flex; justify-content: center; gap: 20px; margin-top: 20px; opacity: 0.6; filter: grayscale(1); }
        
        @media (max-width: 992px) {
            .main-container { grid-template-columns: 1fr; }
            .summary-card { order: -1; }
        }
		
		.plan-btn {
			flex: 1;
			padding: 15px;
			border: 2px solid #e2e8f0;
			background: #fff;
			border-radius: 12px;
			cursor: pointer;
			font-weight: 700;
			transition: all 0.3s ease;
			color: var(--slate);
		}

		.plan-btn.active {
			border-color: var(--primary);
			background: #eff6ff;
			color: var(--primary);
			box-shadow: 0 4px 12px rgba(0, 86, 179, 0.1);
		}

		.plan-btn:hover:not(.active) {
			border-color: #cbd5e1;
		}
		
/* ============================================
	   Privacy Policy PAGE
	   ============================================ */
	   
	   /* Layout Styling */
		.policy-container {
			display: flex;
			max-width: 1200px;
			margin: 50px auto;
			gap: 40px;
			padding: 0 20px;
		}

		/* Sticky Sidebar */
		.policy-sidebar {
			flex: 1;
			position: sticky;
			top: 100px;
			height: fit-content;
			border-right: 1px solid #e2e8f0;
			padding-right: 20px;
		}

		.policy-sidebar ul {
			list-style: none;
			padding: 0;
		}

		.policy-sidebar li a {
			display: block;
			padding: 10px 0;
			color: #64748b;
			text-decoration: none;
			font-size: 14px;
			transition: color 0.3s;
		}

		.policy-sidebar li a:hover {
			color: #3b82f6;
		}

		/* Main Content Area */
		.policy-content {
			flex: 3;
			line-height: 1.8;
			color: #334155;
		}

		.policy-content h1 { font-size: 36px; margin-bottom: 10px; color: #0f172a; }
		.policy-content h2 { font-size: 24px; margin-top: 40px; margin-bottom: 20px; color: #1e293b; border-bottom: 1px solid #f1f5f9; padding-bottom: 10px; }
		.policy-content p { margin-bottom: 20px; }
		.policy-content ul { margin-bottom: 20px; padding-left: 20px; }
		
/* ============================================
	   Book Demo PAGE
	   ============================================ */
	   
	   <style>
		/* Modern Layout Logic */
		.demo-container {
			display: flex;
			max-width: 1200px;
			margin: -60px auto 80px auto; /* Pulls cards up into the hero */
			gap: 50px;
			padding: 0 20px;
			align-items: flex-start;
		}

		.benefits-side { flex: 1; }
		.sticky-content { position: sticky; top: 40px; }

		.form-column { flex: 1.2; }

		/* Benefit Item Styling */
		.benefit-item {
			display: flex;
			gap: 20px;
			margin-bottom: 30px;
		}
		.icon-box {
			padding: 15px;
			border-radius: 12px;
			height: fit-content;
			font-size: 24px;
			width: 55px;
			text-align: center;
		}
		.icon-box.blue { background: #eff6ff; color: #0056b3; }
		.icon-box.orange { background: #fff7ed; color: #ff8c38; }
		.icon-box.green { background: #f0fdf4; color: #00d084; }

		.benefit-item strong { display: block; color: #0f172a; font-size: 18px; margin-bottom: 5px; }
		.benefit-item span { color: #475569; line-height: 1.5; font-size: 15px; }

		/* Contact Card Styling */
		.contact-info-card {
			background: #f8fafc;
			padding: 25px;
			border-radius: 16px;
			border: 1px solid #e2e8f0;
			margin-top: 40px;
		}
		.contact-info-card h3 { color: #0f172a; font-size: 18px; margin-bottom: 15px; }
		.contact-links { display: flex; flex-direction: column; gap: 12px; }
		.c-link { display: flex; align-items: center; gap: 12px; color: #475569; font-size: 14px; }
		.c-link i { color: #0056b3; font-size: 14px; width: 15px; }
		.c-link a { text-decoration: none; color: inherit; font-weight: 600; }

		/* Calendly Card */
		.form-card {
			background: white;
			border-radius: 20px;
			box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
			border: 1px solid #e2e8f0;
			overflow: hidden;
		}

		@media (max-width: 992px) {
			.demo-container { flex-direction: column; margin-top: 20px; }
			.sticky-content { position: static; }
			.form-column { width: 100%; }
		}
		/*Blog page Style from here */
	
		/* Submenu Styling */
		.dropdown-content {
			/*display: none; /* Hidden by default */
			/*position: absolute;
			background-color: var(--primary); /* Matches your deep blue theme */
			/* min-width: 180px;
			box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
			z-index: 1000;
			border-top: 3px solid var(--accent); Adds a nice gold accent bar
			padding: 0;
			list-style: none;
			border-radius: 0 0 5px 5px; */
		}

		/* Individual Submenu Links */
		.dropdown-content li a {
			color: white;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
			font-size: 0.95rem;
			text-align: left;
			transition: background 0.3s;
		}

		/* Hover Effect for Submenu Items */
		.dropdown-content li a:hover {
			background-color: rgba(255, 255, 255, 0.1);
			color: var(--accent);
		}

		/* Show the dropdown on hover */
		.dropdown:hover .dropdown-content {
			display: block;
		}

		/* Keep the parent link gold when hovering over the menu */
		.dropdown:hover .dropbtn {
			color: var(--accent);
		}
		
		/* Blog Header */
        .blog-header {
            background: var(--primary);
            padding: 4rem 5% 6rem;
            text-align: center;
            color: var(--white);
        }
        .blog-header h1 { font-size: 2.5rem; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; }
        .blog-header p { opacity: 0.8; max-width: 600px; margin: 0 auto; }

        /* Search & Filters */
        .blog-nav {
            background: var(--white);
            width: 90%;
            max-width: 1200px;
            margin: -2.5rem auto 3rem;
            padding: 1.5rem 2rem;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }
		.filter-tags {display: flex;}
		.search-box{
 		display: flex;
			align-items: flex-end;
			justify-content: right;
			margin-left: 28%;
		}

        .filter-tags a {
            text-decoration: none;
            color: var(--grey);
            font-size: 0.85rem;
            font-weight: 600;
            margin-right: 1.5rem;
            transition: 0.3s;
        }
        .filter-tags a:hover, .filter-tags a.active { color: var(--primary); border-bottom: 2px solid var(--accent); }
        .search-box { position: relative; }
        .search-box input { padding: 0.6rem 1rem 0.6rem 2.5rem; border: 1px solid #ddd; border-radius: 20px; outline: none; width: 250px; }
        .search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--grey); }

        /* Featured Post */
        .container { max-width: 1200px; margin: 0 auto; padding: 0 5%; }
        .featured-card {
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            background: var(--white);
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 4rem;
            box-shadow: 0 15px 40px rgba(0,0,0,0.05);
        }
        .featured-img { background: url('https://images.unsplash.com/photo-1557597774-9d273605dfa9?auto=format&fit=crop&q=80&w=1000') center/cover; min-height: 350px; }
        .featured-content { padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
        .category-tag { color: var(--accent); font-weight: 800; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; display: block; }
        .featured-content h2 { font-size: 2rem; color: var(--primary); line-height: 1.2; margin-bottom: 1rem; }
        .featured-content p { color: var(--grey); margin-bottom: 1.5rem; }

        /* Blog Grid */
        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;
            margin-bottom: 5rem;
        }
        .post-card {
            background: var(--white);
            border-radius: 8px;
            overflow: hidden;
            transition: 0.3s;
            border: 1px solid #eee;
        }
        .post-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .post-img { height: 180px; background-size: cover; background-position: center; }
        .post-body { padding: 1.5rem; }
        .post-date { font-size: 0.8rem; color: #999; margin-bottom: 0.5rem; display: block; }
        .post-body h3 { font-size: 1.25rem; color: var(--primary); margin-bottom: 0.8rem; line-height: 1.4; }
        .post-body p { font-size: 0.95rem; color: var(--grey); margin-bottom: 1.5rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
        .read-more { font-weight: 700; color: var(--secondary); text-decoration: none; font-size: 0.9rem; }
        .read-more i { margin-left: 5px; transition: 0.3s; }
        .read-more:hover i { transform: translateX(5px); }

        /* Newsletter Section */
        .newsletter { background: var(--dark); color: var(--white); padding: 5rem 5%; text-align: center; border-radius: 12px; margin-bottom: 5rem; }
        .newsletter h2 { font-size: 2rem; margin-bottom: 1rem; }
        .newsletter p { opacity: 0.7; margin-bottom: 2rem; }
        .newsletter-form { display: flex; justify-content: center; gap: 0.5rem; max-width: 500px; margin: 0 auto; }
        .newsletter-form input { flex: 1; padding: 0.8rem 1.5rem; border-radius: 4px; border: none; }
        .newsletter-form button { background: var(--accent); color: var(--primary); border: none; padding: 0.8rem 2rem; font-weight: 700; border-radius: 4px; cursor: pointer; }

        /* Footer */
        footer {
            background: var(--dark);
            color: var(--white);
            padding: 4rem 10% 2rem;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .footer-logo { font-size: 1.5rem; font-weight: 800; margin-bottom: 1rem; }
        .footer-links ul { list-style: none; }
        .footer-links li { margin-bottom: 0.8rem; }
        .footer-links a { color: #ccc; text-decoration: none; font-size: 0.9rem; }

        @media (max-width: 768px) {
            .nav-links { display: none; }
            .hero h1 { font-size: 2rem; }
            .footer-grid { grid-template-columns: 1fr; }
        }
		.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

.blog-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: 0.3s;
}

.blog-card:hover {
    transform: translateY(-5px);
}

.blog-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.blog-content {
    padding: 15px;
}

.blog-content h3 {
    font-size: 18px;
    margin-bottom: 10px;
}
/* -- HERO ------------------------------------------------------------------- */
.blog-hero {
    background-color: #0a1628;
    color: #ffffff;
    text-align: center;
    padding: 70px 20px 50px;
}

.blog-hero-inner {
    max-width: 700px;
    margin: 0 auto;
}

.blog-hero h1 {
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 14px;
    color: #ffffff;
}

.blog-hero p {
    font-size: 1.05rem;
    color: #a0aec0;
    line-height: 1.6;
}

/* -- FILTER TABS ------------------------------------------------------------ */
.blog-filter-tabs {
    background-color: #0a1628;
    padding: 0 20px 30px;
    text-align: center;
}

.blog-filter-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 900px;
    margin: 0 auto;
}

.filter-tab {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 4px;
    font-size: 0.88rem;
    font-weight: 500;
    text-decoration: none;
    color: #a0aec0;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.filter-tab:hover {
    color: #ffffff;
    border-color: rgba(255,255,255,0.3);
}

.filter-tab.active {
    color: #ffffff;
    background-color: #1a2e4a;
    border-color: #2d4a6e;
}

/* -- POSTS SECTION WRAPPER -------------------------------------------------- */
.blog-posts-section {
    background-color: #ffffff;
    padding: 60px 20px 80px;
}

.blog-posts-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* -- FEATURED POST (first / hero post) ------------------------------------- */
.blog-featured-post {
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.post-category-badge {
    display: inline-block;
    background-color: #1a2e4a;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 4px 10px;
    border-radius: 3px;
    margin-bottom: 14px;
}

.featured-post-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 14px;
    line-height: 1.3;
}

.featured-post-title a {
    color: inherit;
    text-decoration: none;
}

.featured-post-title a:hover {
    color: #2b6cb0;
}

.featured-post-excerpt {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.7;
    margin-bottom: 18px;
}

.post-meta {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 20px;
}

.meta-sep {
    margin: 0 6px;
}

.btn-read-full {
    display: inline-block;
    background-color: #1a2e4a;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 22px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-read-full:hover {
    background-color: #2b6cb0;
    color: #ffffff;
}

/* -- SECONDARY POSTS GRID --------------------------------------------------- */
.blog-secondary-posts {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.blog-post-card {
    border-bottom: 1px solid #e2e8f0;
    padding: 28px 0;
}

.blog-post-card:last-child {
    border-bottom: none;
}

.post-card-date {
    font-size: 0.82rem;
    color: #718096;
    margin-bottom: 8px;
}

.post-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a202c;
    margin-bottom: 10px;
    line-height: 1.4;
}

.post-card-title a {
    color: inherit;
    text-decoration: none;
}

.post-card-title a:hover {
    color: #2b6cb0;
}

.post-card-excerpt {
    font-size: 0.95rem;
    color: #4a5568;
    line-height: 1.6;
    margin-bottom: 12px;
}

.post-card-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #2b6cb0;
    text-decoration: none;
}

.post-card-link:hover {
    text-decoration: underline;
}

/* -- NO POSTS MESSAGE ------------------------------------------------------- */
.no-posts-message {
    text-align: center;
    color: #718096;
    font-size: 1rem;
    padding: 40px 0;
}

/* -- NEWSLETTER / STAY INFORMED -------------------------------------------- */
.blog-newsletter {
    background-color: #f7fafc;
    padding: 60px 20px;
    text-align: center;
    border-top: 1px solid #e2e8f0;
}

.blog-newsletter-inner {
    max-width: 500px;
    margin: 0 auto;
}

.blog-newsletter h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a202c;
    margin-bottom: 10px;
}

.blog-newsletter p {
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 24px;
    line-height: 1.6;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.newsletter-form input[type="email"] {
    flex: 1;
    min-width: 220px;
    max-width: 320px;
    padding: 10px 14px;
    border: 1px solid #cbd5e0;
    border-radius: 4px;
    font-size: 0.9rem;
    outline: none;
}

.newsletter-form input[type="email"]:focus {
    border-color: #2b6cb0;
}

.newsletter-form button {
    background-color: #1a2e4a;
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 22px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.newsletter-form button:hover {
    background-color: #2b6cb0;
}

/* -- RESPONSIVE ------------------------------------------------------------- */
@media (max-width: 640px) {
    .blog-hero h1 {
        font-size: 1.8rem;
    }

    .featured-post-title {
        font-size: 1.4rem;
    }

    .filter-tab {
        padding: 6px 14px;
        font-size: 0.82rem;
    }
}

	</style>
	<script type="text/javascript" src="https://assets.calendly.com/assets/external/widget.js" async></script>
	
		<style>
		.hw-card:hover {
			transform: translateY(-15px);
			border-color: #3b82f6 !important;
			box-shadow: 0 40px 70px rgba(15, 23, 42, 0.08) !important;
		}
	</style>