:root {
            --primary: #002d62; /* Police Blue */
            --secondary: #0056b3;
            --accent: #e0a800; /* Gold/Caution accent */
            --dark: #1a1a1a;
            --light: #f4f7f6;
            --white: #ffffff;
			--danger: #d9534f;
			--border: #e1e8ed;
			--forensic: #2c3e50;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }

        body { background-color: var(--light); color: var(--dark); line-height: 1.6; }

        /* Navigation */
        nav {
            background: #FFFF;
            padding: 1rem 5%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .logo { color: var(--white); font-weight: 800; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 1px; }
        .logo span { color: var(--accent); }

        .nav-links { display: flex; list-style: none; gap: 2rem; }
        .nav-links a { color: #002d62; text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: 0.3s; }
        .nav-links a:hover { color: var(--accent); }

        .cta-btn {
            background: var(--accent);
            color: var(--primary) !important;
            padding: 0.6rem 1.2rem;
            border-radius: 4px;
            font-weight: 700 !important;
        }
		
		/* Dropdown Container */
		.dropdown {
			position: relative;
			display: inline-block;
		}

		/* 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);
		}
	
	/*Home page Style from here */

        /* Hero Main Container */
		.hero {
			background: #002d62; /* Solid Police Blue background from your image */
			padding: 6rem 5%;
			min-height: 80vh;
			display: flex;
			align-items: center;
		}

		.hero-container {
			max-width: 1400px;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1.1fr 0.9fr; /* Gives slightly more room to the text */
			gap: 3rem;
			align-items: center;
		}

        .hero h1 { font-size: 3.5rem; margin-bottom: 1rem; text-transform: uppercase; }
        .hero p { font-size: 1.2rem; max-width: 800px; margin-bottom: 2rem; opacity: 0.9; text-align: left; margin-left: 0; }

        /* Trust Bar */
        .trust-bar {
            background: var(--white);
            padding: 2rem 5%;
            display: flex;
            justify-content: space-around;
            text-align: center;
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        }

        .stat h3 { color: var(--primary); font-size: 2rem; }
        .stat p { font-size: 0.8rem; text-transform: uppercase; color: #666; font-weight: bold; }

        /* Features Section */
        .section { padding: 5rem 10%; }
        .section-title { text-align: center; margin-bottom: 3rem; }
        .section-title h2 { color: var(--primary); font-size: 2.5rem; text-transform: uppercase; }
        .section-title div { width: 50px; height: 4px; background: var(--accent); margin: 10px auto; }

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

        .card {
            background: var(--white);
            padding: 2.5rem;
            border-radius: 8px;
            transition: 0.3s;
            border-bottom: 4px solid transparent;
            text-align: center;
        }

        .card:hover { transform: translateY(-10px); box-shadow: 0 10px 30px rgba(0,0,0,0.1); border-color: var(--primary); }
        .card i { font-size: 3rem; color: var(--secondary); margin-bottom: 1.5rem; }
        .card h3 { margin-bottom: 1rem; color: var(--primary); }

        /* DIMS Highlights */
        .dims-suite { background: #eef2f5; }

        /* 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; }
        }
		
		/* Text Formatting */
		.hero-text { text-align: left; color: #ffffff; }
		.hero-text h1 { font-size: 3.5rem; line-height: 1.1; margin-bottom: 1rem; text-transform: uppercase; }
		.hero-text .tagline { color: #e0a800; font-weight: 800; font-size: 1.3rem; text-transform: uppercase; margin-bottom: 1.5rem; letter-spacing: 1px; }
		.hero-text .description { font-size: 1.15rem; opacity: 0.9; margin-bottom: 2.5rem; max-width: 550px; }
		.hero-btns { display: flex; gap: 1.2rem; }

		/* Button Styles */
		.outline-btn { 
			border: 2px solid white; color: white; text-decoration: none; 
			padding: 1rem 2rem; border-radius: 5px; font-weight: 700; transition: 0.3s;
		}
		.outline-btn:hover { background: white; color: #002d62; }

		/* Visual Slider with Glass Effect */
		.hero-visual { position: relative; height: 450px; width: 100%; }
		.slider-frame {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 15px;
			overflow: hidden;
			box-shadow: 0 40px 80px rgba(0,0,0,0.5);
			border: 1px solid rgba(255, 255, 255, 0.2);
			background: rgba(255, 255, 255, 0.05);
			backdrop-filter: blur(8px);
		}

		.slide {
			position: absolute;
			top: 0; left: 0; width: 100%; height: 100%;
			background-size: contain; 
			background-repeat: no-repeat;
			background-position: center;
			opacity: 0;
			transition: opacity 1s ease-in-out;
		}

		.slide.active { opacity: 1; }

		/* Responsive Fix */
		@media (max-width: 968px) {
			.hero-container { grid-template-columns: 1fr; text-align: center; }
			.hero-text { display: flex; flex-direction: column; align-items: center; }
			.hero-visual { height: 320px; margin-top: 2rem; }
		}
		
		.video-btn {
			display: flex;
			align-items: center;
			gap: 10px;
			color: var(--white) !important;
			text-decoration: none;
			font-weight: 700;
			transition: 0.3s;
			padding: 0.6rem 1rem;
			cursor: pointer;
			border:0 !important;
		}

		.video-btn i {
			font-size: 1.8rem;
			color: var(--accent); /* Uses the gold accent from your brand */
		}
		.video-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--white) !important;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s;
    padding: 0.6rem 1rem;
    cursor: pointer;
	border:0 !important;
}


		.video-btn:hover {
			color: var(--accent);
		}

		/* Modal Overlay Styles */
		.video-modal-overlay {
			display: none; 
			position: fixed; 
			top: 0; 
			left: 0; 
			width: 100%; 
			height: 100%; 
			background: rgba(0,0,0,0.9); 
			z-index: 99999; 
			justify-content: center; 
			align-items: center;
		}

		.video-modal-content {
			position: relative; 
			width: 90%; 
			max-width: 900px; 
			box-shadow: 0 0 30px rgba(0,0,0,0.5);
			border-radius: 8px;
			overflow: hidden;
		}

		.close-video {
			position: absolute;
			top: -40px; /* Positioned above the video player */
			right: 0;
			background: var(--accent); /* Uses your gold brand color so it's visible */
			color: var(--primary);
			border: none;
			padding: 5px 15px;
			font-size: 1.2rem;
			font-weight: bold;
			cursor: pointer;
			border-radius: 4px;
			z-index: 100001;
			display: flex;
			align-items: center;
			gap: 5px;
		}

		.close-video:hover {
			background: white;
		}
		
		/*DIMSSuite page Style from here */
		/* Hero Container Spacing */
		.DIMSSuite-hero {
			background: var(--primary); /* Deep blue foundation */
			padding: 6rem 5%;
			display: flex;
			align-items: center;
			text-align: left; /* Ensures all text aligns left */
		}

		.hero-container {
			max-width: 1400px; /* Increased width for 2-column clarity */
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1.1fr 0.9fr; /* Gives slightly more room to the text */
			gap: 3rem;
			align-items: center;
		}

		/* Text & Typography */
		.hero-text h1 { 
			font-size: 3rem; 
			color: #FFFF;
			line-height: 1.1; 
			margin-bottom: 1.5rem; 
			text-align: left; /* Fixes your screenshot's centering issue */
		}

		.tagline { 
			color: var(--accent); 
			font-weight: 800; 
			font-size: 1.2rem; 
			text-transform: uppercase; 
			margin-bottom: 1.5rem; 
			letter-spacing: 1px;
		}

		.description { 
			font-size: 1.1rem;
			color: #FFFF;			
			line-height: 1.6; 
			margin-bottom: 1.5rem; 
			opacity: 0.9;
			max-width: 600px; /* Prevents text from being too long to read */
		}

		/* Button & Visual Styling */
		.hero-btns { display: flex; gap: 1.5rem; margin-top: 2rem; text-align: center }

		.outline-btn {
			border: 2px solid var(--white);
			color: var(--white);
			padding: 1rem 2rem;
			border-radius: 5px;
			text-decoration: none;
			font-weight: bold;
			transition: 0.3s;
		}
		
		.video-frame {
			position: relative;
			width: 100%;
			aspect-ratio: 16 / 9;
			background: #000;
			border-radius: 15px;
			overflow: hidden;
			box-shadow: 0 30px 60px rgba(0,0,0,0.5);
			cursor: pointer;
		}

		.video-frame video {
			display: block;
			object-fit: cover;
		}

		/* Play Button Overlay */
		.play-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			background: rgba(0, 0, 0, 0.2); /* Subtle dark tint */
			transition: background 0.3s;
			z-index: 10;
		}

		.play-button-circle {
			width: 80px;
			height: 80px;
			background: var(--accent); /* Your gold color */
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 0 20px rgba(0,0,0,0.3);
			transition: transform 0.3s;
		}

		.play-button-circle i {
			color: var(--primary); /* Deep blue */
			font-size: 2rem;
			margin-left: 5px; /* Centers the triangle visually */
		}

		.play-overlay:hover .play-button-circle {
			transform: scale(1.1);
		}

		/* Hide play button when video is playing */
		.video-frame.playing .play-overlay {
			opacity: 0;
			pointer-events: none;
		}

		.hero-visual iframe {
			pointer-events: none; /* Prevents users from accidentally clicking into the YouTube interface */
			transform: scale(1.05); /* Slightly zooms to hide any black edges if necessary */
		}

		.hero-visual {
			position: relative;
			height: 450px;
			width: 100%;
		}

		.slider-frame {
			position: relative;
			width: 100%;
			height: 100%;
			border-radius: 15px;
			overflow: hidden;
			box-shadow: 0 30px 60px rgba(0,0,0,0.5);
			border: 1px solid rgba(255,255,255,0.1);
		}

		.slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			opacity: 0; /* Hidden by default */
			background-size: contain; /* Keeps the screenshots from being cropped */
			background-repeat: no-repeat;
			background-position: center;
			opacity: 0;
			transition: opacity 1.5s ease-in-out; /* Smooth cross-fade */
		}

		.slide.active {
			opacity: 1; /* Only the active slide is visible */
			z-index: 2; /* Ensures it sits on top */
		}

        /* Workflow Section */
        .workflow { padding: 5rem 10%; background: var(--light); margin-top: -5rem; border-radius: 50px 50px 0 0; }
        .section-title { text-align: center; margin-bottom: 4rem; }
        .section-title h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-title div { width: 50px; height: 4px; background: var(--accent); margin: 10px auto; }

        .workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
        .workflow-card { background: var(--white); padding: 2rem; border-radius: 12px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; }
        .workflow-card:hover { transform: translateY(-10px); }
        .workflow-card i { font-size: 2.5rem; color: var(--secondary); margin-bottom: 1.5rem; }
        .workflow-card h3 { font-size: 1.1rem; color: var(--primary); margin-bottom: 1rem; }
		
		.container {
			max-width: 1200px; /* Increase this to 1400px or 1600px */
			margin: 0 auto;
			padding: 0 20px;
		}

        /* Modules Section */
        .module-row { display: flex; align-items: center; gap: 4rem; padding: 6rem 10%; }
        .module-row:nth-child(even) { flex-direction: row-reverse; background: #fafafa; }
        .module-text { flex: 1; }
        .module-image { flex: 1; background: #ddd; height: 380px; border-radius: 20px; overflow: hidden; box-shadow: 0 15px 35px rgba(0,0,0,0.1); }
        .module-image img { width: 100%; height: 100%; object-fit: cover; }
        .module-text h2 { color: var(--primary); font-size: 2.2rem; margin-bottom: 1.5rem; line-height: 1.2; }
        .tag { display: inline-block; padding: 5px 12px; background: var(--accent); color: var(--primary); font-weight: 800; font-size: 0.75rem; border-radius: 4px; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; }

        /* Stats Bar */
        .stats { background: var(--primary); color: white; padding: 4rem 10%; display: flex; justify-content: space-around; text-align: center; }
        .stat-item h4 { font-size: 2.8rem; color: var(--accent); margin-bottom: 5px; }
        .stat-item p { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8; }

        /* 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; }
        }
		
		/* ADD THE NEW CSS HERE: */
        .DIMSuite-video-btn {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: var(--primary);
            text-decoration: none;
            font-weight: 700;
            font-size: 0.95rem;
            border: 2px solid var(--primary);
            padding: 0.8rem 1.5rem;
            border-radius: 50px;
            transition: all 0.3s ease;
            margin-top: 10px;
        }

        .video-btn i {
            font-size: 1.2rem;
            color: var(--secondary);
        }

        .video-btn:hover {
            background: var(--primary);
            color: white;
        }

        .video-btn:hover i {
            color: var(--accent);
        }
		
		/* Slider Styling */
		.DIMSuite-slider-container { position: relative; width: 100%; height: 100%; overflow: hidden; }
		.slider { display: flex; width: 100%; height: 100%; transition: opacity 0.5s ease-in-out; }
		.slide { display: none; width: 100%; height: 100%; }
		.slide.active { display: block; animation: fade 0.8s; }
		.slide img { width: 100%; height: 100%; object-fit: cover; }

		/* Arrows */
		.prev, .next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: white; border: none; padding: 15px; cursor: pointer; border-radius: 50%; transition: 0.3s; z-index: 10; }
		.prev { left: 10px; }
		.next { right: 10px; }
		.prev:hover, .next:hover { background: var(--accent); color: var(--primary); }

		/* Dots */
		.dots { position: absolute; bottom: 15px; width: 100%; text-align: center; }
		.dot { height: 12px; width: 12px; margin: 0 5px; background-color: rgba(255,255,255,0.5); border-radius: 50%; display: inline-block; cursor: pointer; transition: 0.3s; }
		.dot.active { background-color: var(--accent); transform: scale(1.2); }

		@keyframes fade { from {opacity: .4} to {opacity: 1} }
		
		/* --- High Importance Highlight for Portal & Share --- */
		.importance-border {
			border: 2px solid var(--accent);
			border-radius: 20px;
			background-color: #fffdf5 !important; /* Subtle gold tint to draw focus */
			box-shadow: 0 10px 30px rgba(224, 168, 0, 0.1);
			margin: 2rem 5% !important; /* Brings the edges in slightly to pop */
		}

		.pulse-highlight {
			background: var(--accent);
			box-shadow: 0 0 0 0 rgba(224, 168, 0, 0.7);
			animation: pulse 2s infinite;
		}

		@keyframes pulse {
			0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 168, 0, 0.7); }
			70% { transform: scale(1); box-shadow: 0 0 0 10px rgba(224, 168, 0, 0); }
			100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(224, 168, 0, 0); }
		}
		
		/* Styling for the embedded video player */
		.module-image video {
			background: #000;
			transition: transform 0.5s ease;
		}

		.module-row:hover .module-image video {
			transform: scale(1.03); /* Subtle zoom when the section is hovered */
		}

		.glow-effect {
			overflow: hidden; /* Keeps the video zoom inside the rounded corners */
			border: 1px solid rgba(224, 168, 0, 0.3);
		}
		
		/* Literature Section Styling */
		.cta-literature {
			padding: 8rem 10%;
			background: linear-gradient(rgba(0,45,98,0.95), rgba(0,45,98,0.95)), 
						url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=1500');
			background-size: cover;
			background-attachment: fixed; /* Parallax effect */
			text-align: center;
			color: white;
		}

		.cta-content h2 {
			font-size: 2.8rem;
			margin-bottom: 1.5rem;
			text-transform: uppercase;
		}

		.cta-content p {
			max-width: 750px;
			margin: 0 auto 2.5rem;
			font-size: 1.15rem;
			opacity: 0.9;
		}

		.cta-btn-large {
			background: var(--accent);
			color: var(--primary);
			padding: 1.2rem 3rem;
			font-size: 1.1rem;
			font-weight: 800;
			text-decoration: none;
			border-radius: 4px;
			display: inline-flex;
			align-items: center;
			gap: 15px;
			transition: all 0.3s ease;
			box-shadow: 0 10px 20px rgba(0,0,0,0.2);
		}

		.cta-btn-large:hover {
			transform: translateY(-3px);
			box-shadow: 0 15px 30px rgba(0,0,0,0.3);
			background: #ffc107; /* Brighter gold on hover */
		}

		.cta-subtext {
			margin-top: 1.5rem !important;
			font-size: 0.85rem !important;
			font-style: italic;
			opacity: 0.7 !important;
		}
		
		.slider-container {
			position: relative;
			width: 100%;
			height: 100%;
			overflow: hidden;
			border-radius: inherit; /* Matches the glow-effect border radius */
		}

		.module-slide {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-size: cover;
			background-position: center;
			opacity: 0;
			transition: opacity 1.2s ease-in-out; /* Smooth cross-fade */
		}

		.module-slide.active {
			opacity: 1;
		}

		/* Dots Styling */
		.slider-dots {
			position: absolute;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
			display: flex;
			gap: 8px;
			z-index: 5;
		}

		.dot {
			width: 10px;
			height: 10px;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 50%;
			transition: 0.3s;
		}

		.dot.active {
			background: var(--accent); /* Your gold color */
			transform: scale(1.2);
		}
		
	/*Interview Rooms page Style from here */
		
		/* Hero */
        .hero {
            background: linear-gradient(rgba(0,45,98,0.85), rgba(0,45,98,0.85)), url('https://images.unsplash.com/photo-1454165833767-027eeea15c3e?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            padding: 8rem 10%;
            color: white;
            text-align: center;
        }
        .hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .hero p { max-width: 800px; margin: 1.5rem auto; font-size: 1.2rem; opacity: 0.9; }

        /* Features Section */
        .features { padding: 5rem 10%; background: var(--light); }
        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-header h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-header div { width: 60px; height: 4px; background: var(--accent); margin: 15px auto; }

        .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
        .feature-card { background: white; padding: 2.5rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.05); transition: 0.3s; }
        .feature-card:hover { transform: translateY(-10px); }
        .feature-card i { font-size: 2.5rem; color: var(--secondary); margin-bottom: 1.5rem; }
        .feature-card h3 { color: var(--primary); margin-bottom: 1rem; }
        .feature-card ul { list-style: none; }
        .feature-card li { margin-bottom: 0.8rem; display: flex; align-items: flex-start; gap: 10px; font-size: 0.95rem; }
        .feature-card li i { font-size: 1rem; color: var(--accent); margin: 0; padding-top: 5px; }

        /* Technical Highlight */
        .tech-row { display: flex; align-items: center; gap: 5rem; padding: 6rem 10%; }
        .tech-row:nth-child(even) { flex-direction: row-reverse; background: #fafafa; }
        .tech-content { flex: 1; }
        .tech-img { flex: 1; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .tech-img img { width: 100%; display: block; }
        .tech-content h2 { color: var(--primary); font-size: 2rem; margin-bottom: 1.5rem; }

        /* Stats Bar */
        .specs-bar { background: var(--primary); color: white; padding: 3rem 10%; display: flex; justify-content: space-around; text-align: center; flex-wrap: wrap; gap: 2rem; }
        .specs-bar div { font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
        .specs-bar i { display: block; font-size: 2rem; color: var(--accent); margin-bottom: 10px; }

        /* 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; }
        }
		
		.comp-container {
			padding: 4rem 0;
			max-width: 1000px;
			margin: 0 auto;
		}

		.comp-table {
			width: 100%;
			border-collapse: separate;
			border-spacing: 0;
			background: white;
			border-radius: 12px;
			overflow: hidden;
			box-shadow: 0 15px 35px rgba(0,0,0,0.05);
		}

		.comp-table th {
			background: #f8f9fa;
			padding: 25px;
			color: var(--primary);
			font-weight: 700;
			text-transform: uppercase;
			font-size: 0.85rem;
			letter-spacing: 1px;
			border-bottom: 2px solid #eee;
		}

		/* Highlight the DIMS Integrated Column */
		.comp-table th.featured-header, 
		.comp-table td.featured-cell {
			background-color: #f0f4f8; /* Very light brand tint */
			border-left: 1px solid #e0e6ed;
			border-right: 1px solid #e0e6ed;
		}

		.comp-table td {
			padding: 20px;
			border-bottom: 1px solid #f0f0f0;
			text-align: center;
			color: #444;
		}

		.comp-table td:first-child {
			text-align: left;
			font-weight: 600;
			color: var(--primary);
			width: 40%;
		}

		/* Icon Styles */
		.icon-yes { color: #2ecc71; font-size: 1.2rem; }
		.icon-no { color: #ccc; font-size: 1.2rem; }
		.badge-limited {
			background: #fff3e0;
			color: #ef6c00;
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 0.8rem;
			font-weight: 600;
		}
		
	/*Storage page Style from here */
	
		/* Hero */
        .hero {
            background: linear-gradient(rgba(0,45,98,0.8), rgba(0,45,98,0.8)), url('https://images.unsplash.com/photo-1550009158-9ebf69173e03?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            padding: 8rem 10%;
            color: white;
            text-align: center;
        }
        .hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .hero p { max-width: 800px; text-align: left; margin-left: 0; font-size: 1.2rem; opacity: 0.9; }

        /* Hardware Categories */
        section { padding: 5rem 10%; }
        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-header h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-header div { width: 50px; height: 4px; background: var(--accent); margin: 15px auto; }

        .hw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
        .hw-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: 0.3s; background: #fff; display: flex; flex-direction: column; }
        .hw-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); border-color: var(--secondary); }
        .hw-img { height: 200px; overflow: hidden; }
        .hw-img img { width: 100%; height: 100%; object-fit: cover; }
        .hw-body { padding: 1.5rem; flex-grow: 1; }
        .hw-tag { font-size: 0.7rem; font-weight: 800; color: var(--secondary); text-transform: uppercase; letter-spacing: 1px; display: block; margin-bottom: 0.5rem; }
        .hw-body h3 { color: var(--primary); margin-bottom: 0.8rem; font-size: 1.3rem; }
        .hw-body p { color: #555; font-size: 0.95rem; margin-bottom: 1.2rem; }
        
        /* Bullet points for specs */
        .spec-list { list-style: none; margin-bottom: 1.5rem; }
        .spec-list li { font-size: 0.85rem; color: #444; margin-bottom: 5px; display: flex; align-items: center; }
        .spec-list li i { color: var(--accent); margin-right: 8px; font-size: 0.9rem; }

        .hw-link { color: var(--secondary); text-decoration: none; font-weight: 700; font-size: 0.85rem; text-transform: uppercase; }

        /* Partnerships */
        .partners { background: var(--light); padding: 4rem 10%; text-align: center; }
        .partner-logos { display: flex; justify-content: center; align-items: center; gap: 4rem; flex-wrap: wrap; margin-top: 2rem; }
        .partner-logos span { font-weight: 900; font-size: 1.6rem; color: #bbb; }

        /* Technical Banner */
        .tech-banner { background: var(--primary); color: white; padding: 4rem 10%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .tech-banner h2 { color: var(--accent); margin-bottom: 1rem; }

        /* 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; }
        }
		
		/* Add this to your <style> section */
		.hw-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
			gap: 2rem;
			align-items: start; /* This prevents other boxes from stretching when one expands */
		}

		/* Optional: Ensure the card has a smooth transition */
		.hw-card {
			height: fit-content;
			transition: all 0.3s ease;
		}
		
		/* Flip Card Container */
		.flip-card {
			background-color: transparent;
			perspective: 1000px;
			height: 100%; /* Match height of other cards */
			min-height: 500px;
		}

		.flip-card-inner {
			position: relative;
			width: 100%;
			height: 100%;
			text-align: left;
			transition: transform 0.6s;
			transform-style: preserve-3d;
		}

		/* The class we will trigger with JS */
		.flip-card.is-flipped .flip-card-inner {
			transform: rotateY(180deg);
		}

		.flip-card-front, .flip-card-back {
			position: absolute;
			width: 100%;
			height: 100%;
			-webkit-backface-visibility: hidden;
			backface-visibility: hidden;
			border: 1px solid var(--border);
			border-radius: 8px;
			overflow: hidden;
		}

		.flip-card-back {
			background-color: var(--primary);
			color: white;
			transform: rotateY(180deg);
			padding: 1.5rem;
		}

		.flip-card-back h3 { color: var(--accent); margin-bottom: 1rem; }
		
		/* Slide Overlay Container */
		.slide-card-container {
			position: relative;
			overflow: hidden; /* Clips the sliding content */
			height: 100%;
		}

		.slide-content {
			position: absolute;
			top: 0;
			left: 100%; /* Hidden to the right */
			width: 100%;
			height: 100%;
			background: var(--primary);
			color: white;
			padding: 1.5rem;
			transition: left 0.4s ease-in-out;
			z-index: 10;
			display: flex;
			flex-direction: column;
		}

		/* Class triggered by JavaScript */
		.slide-content.is-active {
			left: 0;
		}

		.slide-content h3 { color: var(--accent); margin-bottom: 1rem; }
		
		/* Vertical Slide Overlay */
		.vertical-slide-container {
			position: relative;
			overflow: hidden;
			height: 100%;
		}

		.vertical-slide-content {
			position: absolute;
			top: -100%; /* Positioned above the card */
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--primary);
			color: white;
			padding: 1.5rem;
			transition: top 0.5s ease-in-out;
			z-index: 10;
			display: flex;
			flex-direction: column;
		}

		/* Class triggered by JavaScript to slide down */
		.vertical-slide-content.is-active {
			top: 0;
		}

		.vertical-slide-content h3 { color: var(--accent); margin-bottom: 1rem; }
		
		.architecture-grid {
			padding: 6rem 0;
			background-color: #ffffff;
		}

		.table-responsive {
			overflow-x: auto;
			border-radius: 12px;
			box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
			border: 1px solid #eee;
		}

		.comparison-table {
			width: 100%;
			border-collapse: collapse;
			text-align: center;
			background: white;
		}

		/* Header Styling */
		.comparison-table th {
			background-color: var(--primary); /* Your deep blue */
			color: white;
			padding: 20px;
			font-weight: 600;
			text-transform: uppercase;
			letter-spacing: 1px;
			font-size: 0.9rem;
		}

		/* Row Styling */
		.comparison-table td {
			padding: 18px 20px;
			border-bottom: 1px solid #eee;
			color: #444;
			font-size: 0.95rem;
		}

		/* Sticky First Column for better context */
		.sticky-col {
			text-align: left;
			font-weight: 600;
			color: var(--primary);
			background: #fdfdfd;
			position: sticky;
			left: 0;
			z-index: 2;
			border-right: 1px solid #eee;
		}

		/* Zebra Striping */
		.comparison-table tbody tr:nth-child(even) {
			background-color: #f9f9fb;
		}

		/* Hover Effect */
		.comparison-table tbody tr:hover {
			background-color: #f1f4f9;
			transition: 0.3s;
		}

		/* Checkmark and Icon Colors */
		.check-icon { color: #27ae60; font-size: 1.1rem; } /* Professional Green */
		.dash-icon { color: #ccc; }
		.status-tag {
			padding: 4px 12px;
			border-radius: 20px;
			font-size: 0.85rem;
			font-weight: 500;
		}
		
	/*About page Style from here */
	
		/* Hero Section */
        .page-hero {
            background: linear-gradient(rgba(0, 45, 98, 0.9), rgba(0, 45, 98, 0.9)), url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 6rem 5%;
            text-align: center;
        }
        .trust-banner {
            background: var(--accent);
            color: var(--primary);
            padding: 1rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 1.1rem;
            margin-bottom: 2rem;
            display: inline-block;
            border-radius: 4px;
        }
        .page-hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .page-hero p { max-width: 700px; margin: 1rem auto; font-size: 1.1rem; opacity: 0.9; }

        /* Section Styling */
        section { padding: 6rem 10%; }
        .section-title { margin-bottom: 3rem; text-align: center; }
        .section-title h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-title div { width: 60px; height: 4px; background: var(--accent); margin: 10px auto; }

        /* Our Story */
        .story-container { display: flex; gap: 4rem; align-items: center; }
        .story-text { flex: 1; }
        .story-image { flex: 1; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .story-image img { width: 100%; display: block; }

        /* Ownership Card */
        .ownership-section { background: var(--light); text-align: center; }
        .ownership-card {
            background: var(--white);
            padding: 3rem;
            border-radius: 20px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border-top: 5px solid var(--accent);
        }
        .ownership-card i { font-size: 3rem; color: var(--secondary); margin-bottom: 1.5rem; }

        /* Support Section */
        .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; }
        .support-card { padding: 2rem; border: 1px solid #ddd; border-radius: 10px; text-align: center; transition: 0.3s; }
        .support-card:hover { border-color: var(--accent); background: #fdfdfd; }
        .support-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }
        .support-card a { color: var(--secondary); font-weight: 700; text-decoration: none; }

        /* Contact Section */
        .contact-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
        .contact-info h3 { margin-bottom: 1.5rem; color: var(--primary); }
        .info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
        .info-item i { color: var(--accent); font-size: 1.2rem; margin-top: 5px; }
        
        .contact-form { background: var(--white); padding: 2.5rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px; outline: none; }
        .submit-btn { background: var(--primary); color: white; border: none; padding: 1rem 2rem; width: 100%; border-radius: 4px; font-weight: 700; cursor: pointer; transition: 0.3s; }
        .submit-btn:hover { background: var(--secondary); }

        /* 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; }
        }
		
		/* Container must have relative positioning and hidden overflow */
		.doc-card-container {
			position: relative;
			overflow: hidden;
			height: 100%;
			min-height: 300px; /* Ensures enough room for 3 items */
		}

		/* The vertical slide-down overlay */
		.doc-slide-overlay {
			position: absolute;
			top: -100%; 
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--primary);
			color: white;
			padding: 1rem; /* Reduced padding to save space */
			transition: top 0.5s ease-in-out;
			z-index: 10;
			display: flex;
			flex-direction: column;
			text-align: left;
		}

		.doc-slide-overlay.is-active {
			top: 0;
		}

		/* Header style from your image */
		.doc-slide-overlay h4 { 
			color: var(--accent); 
			text-align: center;
			margin-bottom: 1rem; 
			text-transform: uppercase;
			font-size: 0.9rem;
			letter-spacing: 1px;
		}

		.doc-link-list { list-style: none; padding: 0; margin: 0; }
		.doc-link-list li { margin-bottom: 12px; } /* Tightened spacing */

		.doc-link-list a { 
			color: white; 
			text-decoration: none; 
			font-size: 0.85rem; 
			display: flex; 
			align-items: center; 
			gap: 15px; /* Matches the image spacing */
			font-weight: 600;
		}
		
		/* Lock badge on list items */
		  .dims-lock-badge {
			display: inline-flex;
			align-items: center;
			gap: 4px;
			margin-left: auto;
			font-size: .65rem;
			font-weight: 700;
			color: #fbbf24;
			background: rgba(251,191,36,.1);
			border: 1px solid rgba(251,191,36,.3);
			border-radius: 4px;
			padding: 2px 7px;
			white-space: nowrap;
		  }

		  /* ── Modal overlay ── */
		  .dims-otp-overlay {
			display: none;
			position: fixed;
			inset: 0;
			background: rgba(0,0,0,.72);
			z-index: 99999;
			align-items: center;
			justify-content: center;
			padding: 20px;
			backdrop-filter: blur(4px);
		  }
		  .dims-otp-overlay.open {
			display: flex;
		  }

		  /* ── Modal box ── */
		  .dims-otp-modal {
			background: #0f1e35;
			border: 1px solid rgba(255,255,255,.12);
			border-radius: 18px;
			padding: 36px 32px 32px;
			width: 100%;
			max-width: 400px;
			color: #fff;
			position: relative;
			box-shadow: 0 24px 64px rgba(0,0,0,.6);
			animation: dimsModalIn .25s ease;
		  }
		  @keyframes dimsModalIn {
			from { opacity:0; transform:translateY(12px) scale(.97); }
			to   { opacity:1; transform:translateY(0)    scale(1);   }
		  }

		  .dims-otp-close {
			position: absolute;
			top: 14px; right: 18px;
			background: none;
			border: none;
			color: rgba(255,255,255,.4);
			font-size: 1.4rem;
			cursor: pointer;
			line-height: 1;
			transition: color .2s;
		  }
		  .dims-otp-close:hover { color: #fff; }

		  .dims-otp-icon-wrap {
			text-align: center;
			margin-bottom: 16px;
		  }

		  .dims-otp-title {
			font-size: 1.1rem;
			font-weight: 700;
			text-align: center;
			margin-bottom: 10px;
		  }

		  .dims-otp-sub {
			font-size: .82rem;
			color: rgba(255,255,255,.6);
			text-align: center;
			line-height: 1.6;
			margin-bottom: 20px;
		  }
		  .dims-otp-email {
			color: #60a5fa;
			font-style: normal;
			display: block;
			margin-top: 4px;
			font-size: .88rem;
		  }

		  /* Resource chip */
		  .dims-resource-chip {
			display: flex;
			align-items: center;
			gap: 10px;
			background: rgba(255,255,255,.05);
			border: 1px solid rgba(255,255,255,.12);
			border-radius: 10px;
			padding: 11px 16px;
			font-size: .86rem;
			font-weight: 600;
			margin-bottom: 20px;
		  }

		  /* Primary button */
		  .dims-otp-btn {
			width: 100%;
			background: var(--accent, #3b82f6);
			color: #fff;
			border: none;
			border-radius: 10px;
			padding: 13px;
			font-size: .9rem;
			font-weight: 700;
			cursor: pointer;
			transition: opacity .2s, transform .15s;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			margin-bottom: 12px;
			font-family: inherit;
		  }
		  .dims-otp-btn:hover:not(:disabled) {
			opacity: .88;
			transform: translateY(-1px);
		  }
		  .dims-otp-btn:disabled {
			opacity: .35;
			cursor: not-allowed;
			transform: none;
		  }

		  .dims-otp-note {
			font-size: .74rem;
			color: rgba(255,255,255,.4);
			text-align: center;
			line-height: 1.5;
			display: flex;
			align-items: flex-start;
			gap: 6px;
			justify-content: center;
		  }

		  /* ── OTP digit boxes ── */
		  .dims-otp-boxes {
			display: flex;
			gap: 8px;
			justify-content: center;
			margin-bottom: 14px;
		  }
		  .dims-otp-box {
			width: 46px;
			height: 54px;
			border-radius: 10px;
			border: 1.5px solid rgba(255,255,255,.2);
			background: rgba(255,255,255,.05);
			color: #fff;
			font-size: 1.4rem;
			font-weight: 700;
			text-align: center;
			font-family: monospace;
			outline: none;
			transition: border-color .2s, background .2s;
			caret-color: transparent;
		  }
		  .dims-otp-box:focus {
			border-color: var(--accent, #3b82f6);
			background: rgba(255,255,255,.08);
		  }
		  .dims-otp-box.filled {
			border-color: var(--accent, #3b82f6);
		  }

		  /* Status message */
		  .dims-status-msg {
			font-size: .78rem;
			text-align: center;
			min-height: 18px;
			margin-bottom: 10px;
			font-weight: 600;
		  }
		  .dims-status-msg.error   { color: #f87171; }
		  .dims-status-msg.success { color: #4ade80; }
		  .dims-status-msg.info    { color: #93c5fd; }

		  /* Resend row */
		  .dims-resend-row {
			text-align: center;
			font-size: .77rem;
			color: rgba(255,255,255,.4);
			margin-top: 4px;
		  }
		  .dims-resend-btn {
			background: none;
			border: none;
			color: var(--accent, #3b82f6);
			cursor: pointer;
			font-size: .77rem;
			padding: 0;
			font-family: inherit;
		  }
		  .dims-resend-btn:disabled {
			color: rgba(255,255,255,.25);
			cursor: not-allowed;
		  }
		  .dims-timer {
			display: block;
			font-size: .72rem;
			color: rgba(255,255,255,.3);
			margin-top: 4px;
		  }

		  /* Access granted link */
		  .dims-success-check { text-align: center; margin-bottom: 16px; }
		  .dims-access-link {
			display: flex;
			align-items: center;
			gap: 12px;
			background: rgba(255,255,255,.05);
			border: 1px solid rgba(255,255,255,.14);
			border-radius: 10px;
			padding: 13px 16px;
			color: #fff;
			text-decoration: none;
			font-size: .86rem;
			font-weight: 600;
			transition: background .2s;
			margin-bottom: 4px;
		  }
		  .dims-access-link:hover { background: rgba(255,255,255,.1); }

		  /* ── Spinner on send button ── */
		  @keyframes dimsSpin { to { transform: rotate(360deg); } }
		  .dims-spinner {
			display: inline-block;
			width: 16px; height: 16px;
			border: 2px solid rgba(255,255,255,.3);
			border-top-color: #fff;
			border-radius: 50%;
			animation: dimsSpin .7s linear infinite;
			flex-shrink: 0;
		  }
		
	/*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; }
        }
		
	/*ContactSales page Style from here */
	
		/* Hero Section */
        .page-hero {
            background: linear-gradient(rgba(0, 45, 98, 0.9), rgba(0, 45, 98, 0.9)), url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 6rem 5%;
            text-align: center;
        }
        .trust-banner {
            background: var(--accent);
            color: var(--primary);
            padding: 1rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 1.1rem;
            margin-bottom: 2rem;
            display: inline-block;
            border-radius: 4px;
        }
        .page-hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .page-hero p { max-width: 700px; margin: 1rem auto; font-size: 1.1rem; opacity: 0.9; }

        /* Section Styling */
        section { padding: 6rem 10%; }
        .section-title { margin-bottom: 3rem; text-align: center; }
        .section-title h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-title div { width: 60px; height: 4px; background: var(--accent); margin: 10px auto; }

        /* Our Story */
        .story-container { display: flex; gap: 4rem; align-items: center; }
        .story-text { flex: 1; }
        .story-image { flex: 1; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .story-image img { width: 100%; display: block; }

        /* Ownership Card */
        .ownership-section { background: var(--light); text-align: center; }
        .ownership-card {
            background: var(--white);
            padding: 3rem;
            border-radius: 20px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border-top: 5px solid var(--accent);
        }
        .ownership-card i { font-size: 3rem; color: var(--secondary); margin-bottom: 1.5rem; }

        /* Support Section */
        .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; }
        .support-card { padding: 2rem; border: 1px solid #ddd; border-radius: 10px; text-align: center; transition: 0.3s; }
        .support-card:hover { border-color: var(--accent); background: #fdfdfd; }
        .support-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }
        .support-card a { color: var(--secondary); font-weight: 700; text-decoration: none; }

        /* Contact Section */
        .contact-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
        .contact-info h3 { margin-bottom: 1.5rem; color: var(--primary); }
        .info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
        .info-item i { color: var(--accent); font-size: 1.2rem; margin-top: 5px; }
        
        .contact-form { background: var(--white); padding: 2.5rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px; outline: none; }
        .submit-btn { background: var(--primary); color: white; border: none; padding: 1rem 2rem; width: 100%; border-radius: 4px; font-weight: 700; cursor: pointer; transition: 0.3s; }
        .submit-btn:hover { background: var(--secondary); }

        /* 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; }
        }
		
		/* Container must have relative positioning and hidden overflow */
		.doc-card-container {
			position: relative;
			overflow: hidden;
			height: 100%;
			min-height: 300px; /* Ensures enough room for 3 items */
		}

		/* The vertical slide-down overlay */
		.doc-slide-overlay {
			position: absolute;
			top: -100%; 
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--primary);
			color: white;
			padding: 1rem; /* Reduced padding to save space */
			transition: top 0.5s ease-in-out;
			z-index: 10;
			display: flex;
			flex-direction: column;
			text-align: left;
		}

		.doc-slide-overlay.is-active {
			top: 0;
		}

		/* Header style from your image */
		.doc-slide-overlay h4 { 
			color: var(--accent); 
			text-align: center;
			margin-bottom: 1rem; 
			text-transform: uppercase;
			font-size: 0.9rem;
			letter-spacing: 1px;
		}

		.doc-link-list { list-style: none; padding: 0; margin: 0; }
		.doc-link-list li { margin-bottom: 12px; } /* Tightened spacing */

		.doc-link-list a { 
			color: white; 
			text-decoration: none; 
			font-size: 0.85rem; 
			display: flex; 
			align-items: center; 
			gap: 15px; /* Matches the image spacing */
			font-weight: 600;
		}
		
	/*Contactsupport 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);
		}

        /* Hero Section */
        .page-hero {
            background: linear-gradient(rgba(0, 45, 98, 0.9), rgba(0, 45, 98, 0.9)), url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            background-position: center;
            color: white;
            padding: 6rem 5%;
            text-align: center;
        }
        .trust-banner {
            background: var(--accent);
            color: var(--primary);
            padding: 1rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-size: 1.1rem;
            margin-bottom: 2rem;
            display: inline-block;
            border-radius: 4px;
        }
        .page-hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .page-hero p { max-width: 700px; margin: 1rem auto; font-size: 1.1rem; opacity: 0.9; }

        /* Section Styling */
        section { padding: 6rem 10%; }
        .section-title { margin-bottom: 3rem; text-align: center; }
        .section-title h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-title div { width: 60px; height: 4px; background: var(--accent); margin: 10px auto; }

        /* Our Story */
        .story-container { display: flex; gap: 4rem; align-items: center; }
        .story-text { flex: 1; }
        .story-image { flex: 1; border-radius: 15px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.1); }
        .story-image img { width: 100%; display: block; }

        /* Ownership Card */
        .ownership-section { background: var(--light); text-align: center; }
        .ownership-card {
            background: var(--white);
            padding: 3rem;
            border-radius: 20px;
            max-width: 800px;
            margin: 0 auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            border-top: 5px solid var(--accent);
        }
        .ownership-card i { font-size: 3rem; color: var(--secondary); margin-bottom: 1.5rem; }

        /* Support Section */
        .support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-top: 3rem; }
        .support-card { padding: 2rem; border: 1px solid #ddd; border-radius: 10px; text-align: center; transition: 0.3s; }
        .support-card:hover { border-color: var(--accent); background: #fdfdfd; }
        .support-card i { font-size: 2.5rem; color: var(--primary); margin-bottom: 1rem; }
        .support-card a { color: var(--secondary); font-weight: 700; text-decoration: none; }

        /* Contact Section */
        .contact-container { display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem; }
        .contact-info h3 { margin-bottom: 1.5rem; color: var(--primary); }
        .info-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
        .info-item i { color: var(--accent); font-size: 1.2rem; margin-top: 5px; }
        
        .contact-form { background: var(--white); padding: 2.5rem; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 600; font-size: 0.9rem; }
        .form-group input, .form-group textarea, .form-group select { width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px; outline: none; }
        .submit-btn { background: var(--primary); color: white; border: none; padding: 1rem 2rem; width: 100%; border-radius: 4px; font-weight: 700; cursor: pointer; transition: 0.3s; }
        .submit-btn:hover { background: var(--secondary); }

        /* 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; }
        }
		
		/* Container must have relative positioning and hidden overflow */
		.doc-card-container {
			position: relative;
			overflow: hidden;
			height: 100%;
			min-height: 300px; /* Ensures enough room for 3 items */
		}

		/* The vertical slide-down overlay */
		.doc-slide-overlay {
			position: absolute;
			top: -100%; 
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--primary);
			color: white;
			padding: 1rem; /* Reduced padding to save space */
			transition: top 0.5s ease-in-out;
			z-index: 10;
			display: flex;
			flex-direction: column;
			text-align: left;
		}

		.doc-slide-overlay.is-active {
			top: 0;
		}

		/* Header style from your image */
		.doc-slide-overlay h4 { 
			color: var(--accent); 
			text-align: center;
			margin-bottom: 1rem; 
			text-transform: uppercase;
			font-size: 0.9rem;
			letter-spacing: 1px;
		}

		.doc-link-list { list-style: none; padding: 0; margin: 0; }
		.doc-link-list li { margin-bottom: 12px; } /* Tightened spacing */

		.doc-link-list a { 
			color: white; 
			text-decoration: none; 
			font-size: 0.85rem; 
			display: flex; 
			align-items: center; 
			gap: 15px; /* Matches the image spacing */
			font-weight: 600;
		}
		
	/*Get A Demo page Style from here */
	
		/* Dropdown Container */
		.dropdown {
			position: relative;
			display: inline-block;
		}

		/* 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);
		}

        /* Demo Container */
        .demo-wrapper {
            max-width: 1200px;
            margin: 4rem auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 4rem;
            padding: 0 5%;
        }

        /* Left Side: Content */
        .demo-info h1 { font-size: 2.8rem; color: var(--primary); line-height: 1.1; margin-bottom: 1.5rem; }
        .demo-info p { font-size: 1.1rem; color: var(--grey); margin-bottom: 2rem; }

        .feature-list { list-style: none; }
        .feature-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; }
        .feature-item i { color: var(--success); font-size: 1.2rem; margin-top: 5px; }
        .feature-item h4 { color: var(--primary); font-size: 1.1rem; margin-bottom: 2px; }
        .feature-item p { font-size: 0.9rem; margin-bottom: 0; }

        /* Right Side: Form */
        .demo-form-container {
            background: var(--white);
            padding: 3rem;
            border-radius: 12px;
            box-shadow: 0 20px 50px rgba(0,0,0,0.1);
            border-top: 5px solid var(--accent);
        }
        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        .full-width { grid-column: span 2; }

        .form-group { margin-bottom: 1.2rem; }
        .form-group label { display: block; font-size: 0.85rem; font-weight: 700; color: var(--primary); margin-bottom: 0.4rem; text-transform: uppercase; }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%; padding: 0.8rem; border: 1px solid #ddd; border-radius: 4px; outline: none; font-size: 1rem;
        }
        .form-group input:focus { border-color: var(--secondary); }

        .submit-btn {
            background: var(--primary);
            color: white;
            border: none;
            padding: 1.2rem;
            width: 100%;
            border-radius: 4px;
            font-weight: 800;
            font-size: 1rem;
            cursor: pointer;
            transition: 0.3s;
            margin-top: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .submit-btn:hover { background: var(--secondary); transform: translateY(-2px); }

        /* Compliance Bar */
        .compliance-note {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid #eee;
            font-size: 0.8rem;
            color: var(--grey);
        }
        .compliance-note i { font-size: 1.5rem; color: #aaa; }

        /* Timeline Section */
        .process-section { background: var(--white); padding: 5rem 10%; border-top: 1px solid #eee; }
        .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; text-align: center; }
        .process-step { position: relative; }
        .step-num { 
            width: 40px; height: 40px; background: var(--accent); color: var(--primary); 
            border-radius: 50%; display: flex; align-items: center; justify-content: center; 
            font-weight: 800; margin: 0 auto 1.5rem;
        }

        @media (max-width: 992px) {
            .demo-wrapper { grid-template-columns: 1fr; }
            .form-grid { grid-template-columns: 1fr; }
            .full-width { grid-column: span 1; }
            .process-grid { grid-template-columns: 1fr; }
        }
		
	/*Chain Of Custody page Style from here */
	
		/* Dropdown Container */
		.dropdown {
			position: relative;
			display: inline-block;
		}

		/* 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);
		}

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,45,98,0.85), rgba(0,45,98,0.85)), url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            padding: 8rem 10%;
            color: white;
            text-align: center;
        }
        .hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 1rem; }
        .hero p { max-width: 800px; margin: 0 auto; font-size: 1.2rem; opacity: 0.9; }

        /* Mission Critical Banner */
        .alert-banner {
            background: var(--danger);
            color: white;
            text-align: center;
            padding: 1.5rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        /* Features Section */
        section { padding: 5rem 10%; }
        .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 3rem; }
        .card { padding: 2.5rem; border: 1px solid #eee; border-radius: 12px; transition: 0.3s; }
        .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); border-color: var(--accent); }
        .card i { font-size: 2.5rem; color: var(--secondary); margin-bottom: 1.5rem; }
        .card h3 { color: var(--primary); margin-bottom: 1rem; }

        /* Detail Rows */
        .detail-row { display: flex; align-items: center; gap: 5rem; padding: 5rem 10%; }
        .detail-row:nth-child(even) { flex-direction: row-reverse; background: var(--light); }
        .detail-content { flex: 1; }
        .detail-image { flex: 1; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
        .detail-image img { width: 100%; display: block; }

        /* Checklist */
        .checklist { list-style: none; margin-top: 1.5rem; }
        .checklist li { margin-bottom: 1rem; display: flex; gap: 15px; font-weight: 500; }
        .checklist i { color: var(--accent); font-size: 1.2rem; }

        /* 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; }
        }
		
	/*Hybrid Storage page Style from here */
	
		/* Dropdown Container */
		.dropdown {
			position: relative;
			display: inline-block;
		}

		/* 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);
		}

        /* Hero */
        .hero {
            background: linear-gradient(rgba(0,45,98,0.85), rgba(0,45,98,0.85)), url('https://images.unsplash.com/photo-1558494949-ef010cbdcc48?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            padding: 8rem 10%;
            color: white;
            text-align: center;
        }
        .hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .hero p { max-width: 800px; margin: 1.5rem auto; font-size: 1.2rem; opacity: 0.9; text-align: left; margin-left: 0 }

        /* Content Sections */
        section { padding: 5rem 10%; }
        .section-header { text-align: center; margin-bottom: 4rem; }
        .section-header h2 { color: var(--primary); font-size: 2.2rem; text-transform: uppercase; }
        .section-header div { width: 50px; height: 4px; background: var(--accent); margin: 15px auto; }

        .storage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .storage-text h3 { color: var(--secondary); font-size: 1.8rem; margin-bottom: 1.5rem; }
        .storage-text p { margin-bottom: 1rem; color: #444; }

        /* Feature Cards */
        .feature-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; }
        .f-card { background: var(--light); padding: 2.5rem; border-radius: 12px; border-bottom: 4px solid var(--primary); }
        .f-card i { font-size: 2.5rem; color: var(--accent); margin-bottom: 1.5rem; }
        .f-card h4 { margin-bottom: 1rem; color: var(--primary); font-size: 1.3rem; }

        /* Ownership Banner */
        .ownership-banner { background: var(--primary); color: white; padding: 4rem 10%; text-align: center; }
        .ownership-banner h2 { color: var(--accent); margin-bottom: 1.5rem; }

        /* 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; }
        }
		
	/*Dims Mobile page Style from here */
	
		/* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,45,98,0.8), rgba(0,45,98,0.8)), url('https://images.unsplash.com/photo-1512428559087-560fa5ceab42?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            padding: 8rem 10%;
            color: white;
            text-align: center;
        }
        .hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .hero p { max-width: 800px; margin: 1.5rem auto; font-size: 1.2rem; opacity: 0.9; }

        /* Feature Section */
        section { padding: 5rem 10%; }
        .mobile-flex { display: flex; gap: 4rem; align-items: center; margin-bottom: 4rem; }
        .mobile-text { flex: 1.2; }
        .mobile-image { flex: 0.8; text-align: center; }
        .mobile-image img { width: 80%; max-width: 800px; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2)); }

        .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; }
        .f-card { padding: 2rem; background: var(--light); border-radius: 12px; transition: 0.3s; }
        .f-card:hover { transform: translateY(-5px); background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
        .f-card i { font-size: 2rem; color: var(--secondary); margin-bottom: 1rem; }

        /* Special Features */
        .spec-list { list-style: none; margin-top: 2rem; }
        .spec-list li { margin-bottom: 1rem; display: flex; gap: 15px; font-weight: 500; }
        .spec-list i { color: var(--accent); margin-top: 5px; }

        /* Banner */
        .blackout-banner { background: var(--dark); color: white; padding: 4rem 10%; text-align: center; }
        .blackout-banner h2 { color: var(--accent); text-transform: uppercase; margin-bottom: 1rem; }

        /* 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; }
        }
		
	/*CrimeLab 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);
		}

        /* Hero Section */
        .hero {
            background: linear-gradient(rgba(0,45,98,0.9), rgba(0,45,98,0.9)), url('https://images.unsplash.com/photo-1582719471384-894fbb16e074?auto=format&fit=crop&q=80&w=1500');
            background-size: cover;
            padding: 8rem 10%;
            color: white;
            text-align: center;
        }
        .hero h1 { font-size: 3rem; text-transform: uppercase; letter-spacing: 2px; }
        .hero p { max-width: 800px; margin: 1.5rem auto; font-size: 1.2rem; opacity: 0.9; }

        /* Forensic Highlight Section */
        section { padding: 5rem 10%; }
        .forensic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
        .forensic-text h2 { color: var(--primary); margin-bottom: 1.5rem; font-size: 2rem; }
        .forensic-text p { margin-bottom: 1rem; }
        
        .hdr-box {
            background: var(--forensic);
            color: white;
            padding: 2.5rem;
            border-radius: 12px;
            border-left: 5px solid var(--accent);
            margin-top: 2rem;
        }

        /* Tool Grid */
        .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; margin-top: 3rem; }
        .tool-card { padding: 2rem; border: 1px solid #ddd; border-radius: 8px; transition: 0.3s; }
        .tool-card:hover { border-color: var(--secondary); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .tool-card i { font-size: 2rem; color: var(--secondary); margin-bottom: 1rem; }
        .tool-card h4 { margin-bottom: 0.5rem; color: var(--primary); }

        /* List Styling */
        .swgit-list { list-style: none; margin-top: 1.5rem; }
        .swgit-list li { margin-bottom: 0.8rem; display: flex; gap: 10px; align-items: center; }
        .swgit-list i { color: var(--accent); }

        /* 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; }
        }
		
		/* Forensic Image Slider Styling */
		.forensic-slider-container {
			position: relative;
			width: 100%;
			height: 350px;
			border-radius: 12px;
			overflow: hidden;
			margin-bottom: 1.5rem;
			border: 1px solid rgba(255,255,255,0.2);
		}

		.forensic-slider {
			display: flex;
			width: 100%;
			height: 100%;
		}

		.f-slide {
			display: none;
			width: 100%;
			height: 100%;
		}

		.f-slide.active {
			display: block;
			animation: fadeEffect 0.8s;
		}

		.f-slide img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}

		@keyframes fadeEffect {
			from {opacity: 0.4} to {opacity: 1}
		}

		/* Slider Navigation */
		.f-prev, .f-next {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			background: rgba(0,0,0,0.5);
			color: var(--accent);
			border: none;
			padding: 10px;
			cursor: pointer;
			z-index: 5;
			border-radius: 4px;
		}

		.f-next { right: 0; }
		.f-prev { left: 0; }
		
	/*Custom Hardware page Style from here */
	
		/* Hardware Specific Styles */
		.hardware-hero {
			background: linear-gradient(rgba(0, 45, 98, 0.9), rgba(0, 45, 98, 0.9)), url('hardware-bg.jpg');
			background-size: cover;
			background-position: center;
			padding: 8rem 10% 6rem;
			color: white;
			text-align: center;
		}

		.hardware-card {
			background: white;
			border-radius: 12px;
			padding: 2.5rem;
			box-shadow: 0 10px 30px rgba(0,0,0,0.05);
			border-top: 5px solid var(--primary);
			transition: transform 0.3s ease;
			display: flex;
			flex-direction: column;
		}

		.hardware-card:hover {
			transform: translateY(-10px);
		}

		.spec-label {
			font-size: 0.8rem;
			text-transform: uppercase;
			color: #888;
			letter-spacing: 1px;
			margin-top: 1rem;
		}

		.spec-value {
			font-weight: 600;
			color: var(--primary);
			margin-bottom: 0.5rem;
		}

		.hardware-icon {
			font-size: 3rem;
			color: var(--accent);
			margin-bottom: 1.5rem;
		}
		
		/* Desktop: Hide toggle */
		.menu-toggle {
			display: none;
			cursor: pointer;
			font-size: 1.5rem;
			color: var(--primary);
		}

		/* Mobile: Show toggle and style menu */
		@media (max-width: 768px) {
			.menu-toggle {
				display: block;
			}

			.nav-links {
				display: none; /* Hide by default on mobile */
				flex-direction: column;
				position: absolute;
				top: 75px; /* Adjust based on header height */
				left: 0;
				width: 100%;
				background: #fff;
				box-shadow: 0 10px 10px rgba(0,0,0,0.1);
				padding: 20px;
				z-index: 1000;
			}

			/* Show menu when active class is added */
			.nav-links.active {
				display: flex !important;
			}
		}
		
		/* Mobile Responsive Styles */
		@media screen and (max-width: 768px) {
			
			/* 1. Reset Containers */
			.hero, .section, .footer {
				padding: 3rem 5%; /* Reduces large desktop padding */
				height: auto;      /* Prevents items from being cut off */
			}

			/* 2. Stack Grid Columns */
			/* This turns 2 or 3 column layouts into 1 column for phones */
			.hero-container, .grid, .trust-bar {
				display: flex;
				flex-direction: column;
				gap: 2rem;
				text-align: center;
			}

			/* 3. Resize Typography */
			h1 { font-size: 2.2rem !important; }
			h2 { font-size: 1.8rem !important; }
			.hero p { text-align: center; margin: 0 auto 2rem; }

			/* 4. Fix Images and Sliders */
			.hero-visual {
				height: 300px; /* Smaller height for mobile screens */
				order: -1;     /* Moves the image ABOVE the text on mobile */
			}

			/* 5. Navigation Menu Fix */
			.nav-links {
				display: none; /* Hidden until hamburger is clicked */
				flex-direction: column;
				position: absolute;
				top: 70px;
				left: 0;
				width: 100%;
				background: #fff;
				padding: 20px;
				box-shadow: 0 10px 10px rgba(0,0,0,0.1);
			}
			
			.nav-links.active {
				display: flex !important; /* Shown via JavaScript */
			}
		}