/*
Theme Name: caze-theme
Text Domain: caze-theme
Version: 1.0.0
*/

:root {
    --primary-red: #E63946;
    --primary-blue: #1D3557;
    --accent-blue: #457B9D;
    --dark-bg: #ffffff;
    --text-white: #1D3557;
    --text-gray: #5e687a;
    --font-main: 'Outfit', sans-serif;
    --section-bg: #f8f9fb;
    --card-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
    --border-light: 1px solid #f0f2f5;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /* Typography Scale */
    --fs-h1: 3rem;
    --fs-h2: 2.25rem;
    --fs-h3: 1.5rem;
    --fs-body: 1rem;

    /* Design Tokens */
    --logo-gradient: linear-gradient(90deg, #E63946, #1D3557);
}

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

body {
    font-family: var(--font-main);
    background-color: var(--dark-bg);
    color: var(--text-white);
    overflow-x: hidden;
    /* Prevent flash during page transitions */
    opacity: 1;
    transition: none;
}

p {
    text-align: justify;
    text-justify: inter-word;
}

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

/* Top Bar Styles */
.top-bar {
    background: #ffffff;
    /* Solid White */
    padding: 8px 0;
    font-size: 0.9rem;
    color: var(--primary-blue);
    border-bottom: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 20px;
    z-index: 1001;
    display: flex;
    align-items: center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    /* Ensure immediate visibility */
    opacity: 1;
    visibility: visible;
}

.top-bar-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 25px;
    width: 100%;
    padding: 0 40px;
}

.top-bar-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.top-bar-links a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    font-weight: 500;
}

.top-bar-links a:hover {
    color: var(--primary-red);
}

.top-bar-links i {
    font-size: 1rem;
}

.book-demo-btn {
    background: var(--primary-red);
    color: white !important;
    padding: 8px 15px;
    border-radius: 50px;
    /* Pill shape matching nav */
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
    /* Prevent wrapping */
}

.book-demo-btn:hover {
    background: #c92a35;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
}

/* Header */
header {
    padding: 15px 0;
    position: fixed;
    width: 100%;
    top: 20px;
    z-index: 1000;
    background: #ffffff;
    /* Solid White */
    border-bottom: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    /* Ensure immediate visibility */
    opacity: 1;
    visibility: visible;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    /* Important for absolute positioning of nav */
}

.logo {
    flex: 0 0 auto;
    /* Align left */
}

/* Navigation Centered */
nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}

/* Ensure mobile menu support doesn't break */
@media (max-width: 1024px) {
    nav {
        position: fixed;
        /* Revert for mobile sidebar */
        left: -100%;
        transform: none;
        /* ... existing mobile styles will handle the rest ... */
    }
}


.header-cta {
    margin-left: auto;
    /* Push to right if strictly flex */
    /* Or if nav is absolute, this just sits naturally on the right as the next flex item? 
       No, if nav is absolute, logo and button are the flex items. 
       Logo is first. Button is last. justify-content: space-between handles it.
    */
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(90deg, var(--primary-red), var(--primary-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo img {
    max-height: 50px;
    width: auto;
    display: block;
}

/* HIDE MOBILE ELEMENTS ON DESKTOP */
.mobile-menu-btn,
.mobile-sidebar-overlay,
.mobile-sidebar-menu {
    display: none;
}

/* Navigation with pill-shaped container */
.main-navigation>ul {
    display: flex;
    list-style: none;
    gap: 12px;
    /* Increased gap for wider look */
    background: var(--primary-blue);
    /* Dark Blue pill background */
    padding: 10px 22px;
    /* Increased internal padding as requested */
    border-radius: 50px;
    align-items: center;
}

.main-navigation ul>li>a,
.dropdown-parent>a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 6px 18px;
    /* Reduced padding for sleeker look */
    border-radius: 50px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    position: relative;
    white-space: nowrap;
}

.main-navigation ul>li>a:hover,
.dropdown-parent>a:hover {
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

/* Active/Selected state with red background - Desktop Only */
.main-navigation ul>li>a.active,
.main-navigation .dropdown-parent>a.active {
    background: var(--primary-red);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);
}

/* Dropdown Styles */
.dropdown-parent {
    position: relative;
}



.main-navigation .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    /* Push down slightly but tighter */
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-blue);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 15px;
    min-width: 200px;
    display: flex;
    /* Always layout, toggle visibility */
    flex-direction: column;
    gap: 10px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    list-style: none;
    /* Reset list style */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    /* Delay visibility hide */
    align-items: flex-start;
    /* Ensure items start from left */
}

.dropdown-menu li {
    padding: 0;
    width: 100%;
}

.main-navigation .dropdown-menu a {
    display: block;
    width: 100%;
    padding: 10px 15px;
    color: #ffffff;
    white-space: nowrap;
    border-radius: 5px;
    font-size: 0.9rem;
    text-align: left;
    /* Explicit left align */
    transition: all 0.3s ease;
}

.dropdown-menu a:hover {
    background: rgba(230, 57, 70, 0.1);
    color: var(--primary-red);
}

/* Bridge the gap between parent and dropdown */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.dropdown-parent:hover>.dropdown-menu {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    /* Immediate show */
}

/* Nested Dropdown Styling */
.dropdown-submenu {
    position: relative;
    width: 100%;
    /* Ensure li takes full width so hover works well */
}

/* CSS for Desktop Manual Toggle */
/* Reset the previous bridge since we are using click now */
.dropdown-submenu>.dropdown-menu::before {
    display: none;
}

/* Hide default hover behavior for nested menus on desktop */
@media (min-width: 1025px) {
    .dropdown-submenu:hover>.dropdown-menu {
        display: none;
        opacity: 0;
    }
}

/* Base style for the toggle icon container */
.dropdown-submenu {
    position: relative;
    display: flex;
    /* Align link and arrow */
    align-items: center;
    justify-content: space-between;
    /* Space out link and arrow */
    padding-right: 10px;
    /* Space for the arrow */
}

/* Ensure the link takes available space but leaves room for arrow */
.dropdown-submenu>a {
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    /* Forces left alignment */
    align-items: center;
    padding-right: 10px;
    /* Space between text and arrow area */
    text-align: left;
    /* Fallback */
}

/* Style the toggle button */
.desktop-submenu-toggle {
    cursor: pointer;
    padding: 5px 10px;
    color: var(--text-gray);
    transition: transform 0.3s ease, color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.desktop-submenu-toggle:hover {
    color: var(--primary-red);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
}

/* Active state: Show menu */
.dropdown-submenu.manual-active>.dropdown-menu {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: -10px;
    left: 100%;
    margin-left: 0;
    transform: translateX(0);
}

/* Rotate arrow when active */
.dropdown-submenu.manual-active>.desktop-submenu-toggle {
    transform: rotate(90deg);
    color: var(--primary-red);
}

/* Arrow for submenu - remove the old CSS 'after' content as we use real icon now */
.dropdown-submenu>a::after {
    display: none;
}

/* Hero Section - Standardized for all pages */
.hero-section {
    position: relative;
    min-height: 80vh;
    /* Standardized height */
    display: flex;
    align-items: center;
    padding: 120px 0 20px 0;
    /* Increased top padding for header space, reduced bottom padding */
    overflow: hidden;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* Background Effects */
.background-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.glow-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.15;
}

.red-blob {
    width: 500px;
    height: 500px;
    background: var(--primary-red);
    top: -100px;
    left: -100px;
    animation: drift 10s infinite alternate ease-in-out;
}

.blue-blob {
    width: 600px;
    height: 600px;
    background: var(--primary-blue);
    bottom: -150px;
    right: -100px;
    animation: drift 12s infinite alternate-reverse ease-in-out;
}

@keyframes drift {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(30px, 30px);
    }
}

/* Robot Image */
.hero-image-col {
    display: flex;
    justify-content: center;
    perspective: 1000px;
    /* Add depth for 3D effects */
    z-index: 10;
}

.robot-container {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

/* Page Hero Robot - Standardized for all pages */
.floating-robot,
.page-hero-robot {
    max-width: 100%;
    height: auto;
    width: 400px;
    /* Unified size for all pages */
    filter: drop-shadow(0 0 20px rgba(230, 57, 70, 0.2));
    animation: cazie-glow 4s ease-in-out infinite;
    display: block;
    margin-left: auto;
    /* 3D Properties */
    transform-style: preserve-3d;
    will-change: transform, filter;
}

@keyframes cazie-glow {
    0% {
        filter: drop-shadow(0 0 15px rgba(230, 57, 70, 0.2));
        transform: translateY(0) scale(1);
    }

    50% {
        filter: drop-shadow(0 0 40px rgba(230, 57, 70, 0.5));
        transform: translateY(-15px) scale(1.02);
    }

    100% {
        filter: drop-shadow(0 0 15px rgba(230, 57, 70, 0.2));
        transform: translateY(0) scale(1);
    }
}

/* Text Content */
.hero-text-col {
    text-align: left;
}

.main-heading {
    font-size: var(--fs-h1);
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .main-heading {
        font-size: 2.8rem;
    }
}

@media (max-width: 480px) {
    .main-heading {
        font-size: 2.2rem;
    }
}

.gradient-text {
    background: linear-gradient(90deg, var(--primary-blue), #3d5a80);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.sub-heading {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-red);
    margin-bottom: 25px;
    letter-spacing: 0.5px;
}

.highlight {
    color: #D4A017;
    /* Darker Gold for better contrast on white background */
    font-weight: 700;
}

.description {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 40px;
    max-width: 100%;
    line-height: 1.6;
}

/* Buttons */
.cta-group {
    display: flex;
    gap: 20px;
}

.btn {
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    /* More enterprise compact */
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.btn-primary {
    background: linear-gradient(90deg, var(--primary-red), #ff6b6b);
    color: white;
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.6);
}

.btn-secondary {
    background: rgba(29, 53, 87, 0.05);
    color: var(--primary-blue);
    border: 1px solid rgba(29, 53, 87, 0.1);
    backdrop-filter: blur(5px);
}

.btn-secondary:hover {
    background: rgba(29, 53, 87, 0.1);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 1024px) {

    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 50px;
    }

    .hero-image-col {
        order: -1;
        /* Keep robot on top on mobile? Or bottom? usually image top is good */
    }

    .hero-text-col {
        text-align: center;
        padding: 0 20px;
    }

    .description {
        margin-left: auto;
        margin-right: auto;
    }

    .cta-group {
        justify-content: center;
    }

    .main-heading {
        font-size: 2.5rem;
    }

    /* Mobile Header Layout */
    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 0 20px;
    }

    /* Logo on Left */
    .logo {
        position: relative;
        left: auto;
        transform: none;
        z-index: 10;
    }

    .logo img {
        max-height: 40px;
    }

    /* Hide desktop navigation on mobile */
    .main-navigation {
        display: none !important;
    }

    /* Hide Book Demo Button on mobile header */
    .header-cta {
        display: none !important;
    }

    /* Mobile Menu Button - Right Side */
    .mobile-menu-btn {
        display: block;
        margin-left: auto;
        background: var(--primary-blue);
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 20px;
        font-size: 0.9rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        z-index: 10;
        position: relative;
    }

    .mobile-menu-btn:hover {
        background: #152a47;
    }

    /* Mobile Sidebar Overlay */
    .mobile-sidebar-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 2000;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    .mobile-sidebar-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile Sidebar Menu - White Theme */
    .mobile-sidebar-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 280px;
        height: 100%;
        background: #ffffff;
        z-index: 2001;
        transition: right 0.3s ease;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .mobile-sidebar-menu.active {
        right: 0;
    }

    /* Sidebar Header - White theme */
    /* Sidebar Header - White theme */
    .mobile-sidebar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        border-bottom: 1px solid #f0f0f0;
        background: #ffffff;
        position: relative;
        z-index: 10;
    }

    .mobile-sidebar-header .sidebar-logo {
        color: var(--primary-blue);
        font-size: 0.95rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
    }

    .mobile-sidebar-header .sidebar-logo img {
        max-height: 30px;
        display: block;
        margin-right: 10px;
    }

    .mobile-close-btn {
        background: transparent;
        color: var(--primary-blue);
        border: 1px solid rgba(29, 53, 87, 0.2);
        padding: 6px 16px;
        border-radius: 4px;
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .mobile-close-btn:hover {
        background: rgba(29, 53, 87, 0.05);
        border-color: var(--primary-blue);
    }

    /* Sidebar Navigation - Force layout reset */
    .mobile-sidebar-nav {
        flex: 1;
        padding: 20px 0;
        display: block !important;
        position: relative !important;
        /* Reset absolute positioning from global nav */
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        z-index: 5;
    }

    .mobile-sidebar-nav ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        display: block !important;
        position: static !important;
        width: 100% !important;
    }

    .mobile-sidebar-nav>ul>li {
        margin: 0;
        width: 100%;
    }

    .mobile-sidebar-nav>ul>li>a,
    .mobile-sidebar-nav>ul>li>a.nav-link {
        display: block;
        padding: 14px 25px;
        color: var(--primary-blue);
        text-decoration: none;
        font-size: 1rem;
        font-weight: 500;
        transition: all 0.3s ease;
        border-left: 4px solid transparent;
        border-radius: 0 !important;
        background: transparent !important;
    }

    .mobile-sidebar-nav>ul>li>a:hover,
    .mobile-sidebar-nav>ul>li>a.nav-link:hover {
        background: #f8f9fa !important;
        color: var(--primary-red);
    }

    .mobile-sidebar-nav>ul>li>a.active,
    .mobile-sidebar-nav>ul>li>a.nav-link.active {
        background: rgba(230, 57, 70, 0.05) !important;
        color: var(--primary-red) !important;
        border-left-color: var(--primary-red);
        font-weight: 700;
    }

    /* Submenu Styles */
    /* Submenu Styles */
    .mobile-sidebar-nav .has-submenu {
        position: relative;
    }

    /* Remove the old pseudo-element arrow */
    .mobile-sidebar-nav .has-submenu>a::after {
        content: none;
    }

    /* Style the new separate arrow */
    .submenu-arrow {
        position: absolute;
        top: 14px;
        /* Align with text padding */
        right: 25px;
        font-size: 1.4rem;
        line-height: 1;
        transition: transform 0.3s ease;
        color: var(--primary-blue);
        opacity: 0.5;
        cursor: pointer;
        padding: 0 10px;
        /* Increase hit area */
        z-index: 10;
        font-family: var(--font-main);
        /* Ensure consistency if arrow is text */
    }

    .mobile-sidebar-nav .has-submenu.open>.submenu-arrow {
        transform: rotate(90deg);
    }

    /* --- AGGRESSIVE RESET FOR MOBILE SUBMENUS --- */
    .mobile-sidebar-nav ul.submenu {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
        background: #fafafa !important;
        box-shadow: none !important;
        backdrop-filter: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    .mobile-sidebar-nav .has-submenu.open>ul.submenu {
        max-height: 2000px !important;
    }

    .mobile-sidebar-nav .submenu li {
        width: 100% !important;
        display: block !important;
    }

    /* Precise Hierarchical Indentation (2-space increments) */
    /* Level 0: 25px (default) */

    /* Level 1: 45px (2 spaces in) */
    .mobile-sidebar-nav .submenu li a,
    .mobile-sidebar-nav .submenu li a.nav-link {
        display: block !important;
        padding: 12px 25px 12px 45px !important;
        color: var(--text-gray) !important;
        text-decoration: none !important;
        font-size: 0.95rem !important;
        background: transparent !important;
        border: none !important;
    }

    /* Level 2: 65px (4 spaces in) */
    .mobile-sidebar-nav .nested .submenu li a,
    .mobile-sidebar-nav .nested .submenu li a.nav-link {
        padding-left: 65px !important;
    }

    /* Target direct toggles at any sub-level to ensure they keep indentation */
    .mobile-sidebar-nav .submenu .has-submenu>a {
        padding-left: 45px !important;
    }

    /* Sidebar Footer with Book Demo Button */
    .mobile-sidebar-footer {
        padding: 25px 20px;
        border-top: 1px solid #f0f0f0;
        margin-top: auto;
        background: #ffffff;
        position: relative;
        z-index: 10;
    }

    .sidebar-book-demo {
        display: block;
        width: 100%;
        text-align: center;
        background: var(--primary-red);
        color: white !important;
        padding: 14px 20px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 700;
        font-size: 1rem;
        transition: all 0.3s ease;
        box-shadow: 0 4px 12px rgba(230, 57, 70, 0.2);
    }

    .sidebar-book-demo:hover {
        background: #d63341;
        transform: translateY(-2px);
        box-shadow: 0 6px 15px rgba(230, 57, 70, 0.3);
    }

    /* Remove bottom navigation completely */
    .mobile-bottom-nav {
        display: none !important;
    }

    /* Remove extra padding from body */
    body {
        padding-bottom: 0;
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }
}

/* Desktop - Hide Mobile Bottom Nav */
@media (min-width: 1025px) {
    .mobile-bottom-nav {
        display: none;
    }

    body {
        padding-bottom: 0;
    }
}

/* Feature Cards Section */
.features-section {
    padding: 60px 0;
    position: relative;
    z-index: 10;
}

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

.feature-card {
    background: #ffffff;
    border: var(--border-light);
    border-radius: var(--radius-md);
    padding: 30px 25px;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(29, 53, 87, 0.03), transparent);
    transform: translateX(-100%);
    transition: 0.6s;
}

.feature-card:hover::before {
    transform: translateX(100%);
}

.feature-card:hover {
    transform: translateY(-10px);
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Icon Styles */
.icon-wrapper {
    width: 70px;
    height: 70px;
    margin: 0 auto 25px;
    background: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.icon-wrapper svg {
    width: 32px;
    height: 32px;
    color: var(--primary-red);
    transition: all 0.4s ease;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: var(--text-white);
}

.feature-card p {
    color: var(--text-gray);
    line-height: 1.6;
    font-size: 1rem;
}

/* Gala Animations / Glow Types */
.red-glow svg {
    transition: color 0.3s ease;
}

.blue-glow svg {
    transition: color 0.3s ease;
}

.gold-glow svg {
    transition: color 0.3s ease;
}

/* Hover States - Unified Red Glow for All */
.feature-card:hover .red-glow,
.feature-card:hover .gold-glow,
.feature-card:hover .blue-glow {
    background: transparent;
    box-shadow: 0 0 30px rgba(230, 57, 70, 0.4);
}

.feature-card:hover .red-glow svg,
.feature-card:hover .gold-glow svg,
.feature-card:hover .blue-glow svg {
    color: var(--primary-red);
}

.feature-card:hover {
    border-color: rgba(230, 57, 70, 0.5);
    box-shadow: 0 10px 40px -10px rgba(230, 57, 70, 0.3);
}

/* Vision Section */
.vision-section {
    position: relative;
    padding: 40px 0;
    background-color: var(--dark-bg);
    overflow: hidden;
}

.vision-container {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 60px;
    position: relative;
}

.vision-text-col {
    z-index: 10;
}

.vision-heading {
    font-size: var(--fs-h2);
    font-weight: 700;
    margin-bottom: 30px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vision-description p {
    font-size: 1.25rem;
    color: var(--text-gray);
    line-height: 1.8;
    margin-bottom: 20px;
}

.vision-description strong {
    color: var(--primary-red);
}

.vision-image-col {
    perspective: 1200px;
    display: flex;
    justify-content: center;
}

.vision-robot-wrapper {
    position: relative;
    width: 100%;
    max-width: 500px;
    transform-style: preserve-3d;
}

.vision-robot-3d {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.2));
    animation: visionRobot3D 10s ease-in-out infinite;
    position: relative;
    z-index: 5;
    transform-style: preserve-3d;
}

.red-shade-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(230, 57, 70, 0.15) 0%, rgba(230, 57, 70, 0) 70%);
    filter: blur(60px);
    z-index: 1;
    border-radius: 50%;
    animation: glowPulse 6s infinite alternate ease-in-out;
}

/* Animations */
@keyframes visionRobot3D {
    0% {
        transform: translateY(0) rotateY(-5deg) rotateX(2deg);
    }

    25% {
        transform: translateY(-20px) rotateY(10deg) rotateX(-5deg);
    }

    50% {
        transform: translateY(0) rotateY(-10deg) rotateX(5deg);
    }

    75% {
        transform: translateY(20px) rotateY(5deg) rotateX(-2deg);
    }

    100% {
        transform: translateY(0) rotateY(-5deg) rotateX(2deg);
    }
}

@keyframes glowPulse {
    0% {
        opacity: 0.4;
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

/* Entrance Animations */
.animate-left {
    opacity: 0;
    transform: translateX(-80px);
}

/* Trigger for demo */
.vision-section:hover .animate-left,
.vision-section .animate-left {
    opacity: 1;
    transform: translateX(0);
    transition: all 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.vision-heading.animate-left {
    transition-delay: 0.1s;
}

.vision-description.animate-left {
    transition-delay: 0.3s;
}

/* Responsive Vision */
@media (max-width: 1024px) {
    .vision-container {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 50px;
    }

    .vision-text-col {
        order: 2;
    }

    .vision-image-col {
        order: 1;
    }

    .vision-description p {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }
}


/* Products Section */
.products-section {
    padding: 60px 0;
    background: #ffffff;
    position: relative;
}

.section-heading-centered {
    text-align: center;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-gradient-text {
    background: var(--logo-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* Products Grid Layout Redesign */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}



/* Big Tiles for CostSense & HireSense (Row 1) */
.products-grid .new-product-card:nth-child(1),
.products-grid .new-product-card:nth-child(2) {
    min-height: 480px;
}

/* Smaller Vertical Tiles for AISense & SecuritySense (Row 2) */
.products-grid .new-product-card:nth-child(3),
.products-grid .new-product-card:nth-child(4) {
    min-height: 320px;
}

.demo-cta-container {
    text-align: center;
    margin-top: 50px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px;
}

.demo-cta-btn {
    display: inline-block;
    width: auto;
    padding: 12px 35px;
    background: linear-gradient(90deg, var(--primary-red), #ff4d6d);
    color: white;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 10px 30px rgba(230, 57, 70, 0.3);
}

.demo-cta-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(230, 57, 70, 0.5);
    filter: brightness(1.1);
}

@media (max-width: 1024px) {
    .products-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    /* Reset min-heights for mobile accordion view */
    .products-grid .new-product-card:nth-child(1),
    .products-grid .new-product-card:nth-child(2),
    .products-grid .new-product-card:nth-child(3),
    .products-grid .new-product-card:nth-child(4) {
        min-height: auto;
        height: auto;
    }
}

/* New Product Card */
.new-product-card {
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    padding: 30px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.new-product-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
    border-color: rgba(230, 57, 70, 0.2);
}

.card-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header & Icon */
.product-icon-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.product-icon-wrapper {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    background: transparent !important;
    /* Force remove box background */
    padding: 0;
}

/* Glow Backgrounds */
.red-glow-bg {
    background: rgba(230, 57, 70, 0.1);
}

.blue-glow-bg {
    background: rgba(29, 53, 87, 0.1);
}

.gold-glow-bg {
    background: rgba(212, 160, 23, 0.1);
}

.new-product-card:hover .red-glow-bg {
    background: var(--primary-red);
}

.new-product-card:hover .blue-glow-bg {
    background: var(--accent-blue);
}

.new-product-card:hover .gold-glow-bg {
    background: #d4a017;
}

/* Icon SVG / Image */
.product-icon {
    width: 65px;
    /* Increased size significantly */
    height: 65px;
    object-fit: contain;
    transition: all 0.4s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

/* Glow Effects on Logo itself (Drop Shadow) instead of Box Background */
/* Glow Effects on Logo itself (Drop Shadow) instead of Box Background */

/* Default */

.blue-glow-bg .product-icon {
    color: var(--accent-blue);
}

.gold-glow-bg .product-icon {
    color: #d4a017;
}

/* Filter for image logos to turn white on hover if needed, or stick to auto brightness for contrast */
/* Glow Effects on Logo itself (Drop Shadow) instead of Box Background */
/* Glow Effects on Logo itself (Drop Shadow) instead of Box Background */

/* Default */

/* Removed hover brightness/invert filters as per user request */
.new-product-card:hover .product-icon {
    transform: scale(1.05);
    /* Keep subtle scale or remove entirely? I'll keep subtle scale for interactivity feedback */
}

/* Typography */
.new-product-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-blue);
    margin: 0;
}

.product-value-prop {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-gray);
    margin-bottom: 25px;
    line-height: 1.4;
    min-height: 3.2em;
    /* Ensure alignment */
}

/* Bullet Points */
.product-bullets {
    list-style: none;
    margin-bottom: 30px;
    padding: 0;
    flex-grow: 1;
}

.product-bullets li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    color: #5e687a;
    line-height: 1.5;
}

.product-bullets li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--primary-red);
    font-size: 1.2rem;
    top: -2px;
}

/* CTA */
.card-footer {
    margin-top: auto;
}

.new-explore-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    border: 1px solid var(--primary-blue);
    border-radius: 10px;
    color: var(--primary-blue);
    text-decoration: none;
    transition: all 0.3s ease;
}

.new-product-card:hover .new-explore-btn {
    background: var(--primary-blue);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(29, 53, 87, 0.15);
}

.arrow {
    transition: transform 0.3s ease;
}

.new-product-card:hover .arrow {
    transform: translateX(5px);
}

/* Mobile Interaction (Toggle/Stack) */
@media (max-width: 1024px) {

    .product-bullets,
    .card-footer {
        display: none;
        /* Hidden by default on mobile for accordion feel */
    }

    .new-product-card.expanded .product-bullets,
    .new-product-card.expanded .card-footer {
        display: block;
        /* Show on expanded */
        animation: slideInDown 0.3s ease-out;
    }

    .new-product-card::after {
        content: '+';
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 1.5rem;
        color: var(--text-gray);
        transition: transform 0.3s ease;
    }

    .new-product-card.expanded::after {
        transform: rotate(45deg);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .product-content-grid {
        grid-template-columns: 1fr;
        gap: 60px;
        text-align: center;
    }

    .product-header {
        text-align: center;
        border-left: none;
        border-bottom: 3px solid var(--primary-red);
        display: block;
        padding-left: 0;
        padding-bottom: 20px;
    }



    .product-features-list {
        text-align: left;
        max-width: 700px;
        margin: 0 auto;
    }

    .product-card {
        padding: 40px 25px;
    }
}

/* Contact Section */
.contact-section {
    padding: 60px 0;
    background-color: var(--dark-bg);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 60px 40px;
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.05);
    animation: contactFadeIn 1.5s ease-out;
}

@keyframes contactFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.contact-description {
    font-size: 1.1rem;
    color: var(--text-gray);
    margin-bottom: 40px;
    line-height: 1.6;
}

.btn-contact {
    display: inline-block;
    padding: 16px 36px;
    border: 2px solid var(--primary-blue);
    border-radius: 50px;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-contact:hover {
    background: var(--primary-blue);
    color: #ffffff;
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(29, 53, 87, 0.2);
}

/* Page Specific Styles Refinement */
.what-is-section {
    padding: 60px 0;
    background: var(--dark-bg);
}

.section-heading-left {
    text-align: left;
    font-size: var(--fs-h2);
    font-weight: 700;
    margin-bottom: 30px;
    background: linear-gradient(90deg, var(--primary-blue), var(--accent-blue));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.what-is-description {
    font-size: var(--fs-body);
    color: var(--text-gray);
    line-height: 1.8;
    max-width: 100%;
}

.detailed-features {
    padding: 50px 0 100px;
    background: var(--dark-bg);
}

.features-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
}

.detailed-card {
    background: #ffffff;
    border: var(--border-light);
    border-radius: var(--radius-md);
    padding: 30px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: var(--card-shadow);
}

.detailed-card:hover {
    transform: translateY(-8px);
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.07);
    border-color: #eef0f3;
}

.card-icon {
    width: 60px;
    height: 60px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.card-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 1.5;
}

.detailed-card h3 {
    font-size: 1.35rem;
    color: var(--text-white);
    margin-bottom: 15px;
    font-weight: 600;
}

.detailed-card p {
    font-size: 1rem;
    color: var(--text-gray);
    line-height: 1.6;
}

/* Icon Colors */
.card-icon.red-icon {
    background: rgba(230, 57, 70, 0.1);
    color: var(--primary-red);
}

.detailed-card:hover .card-icon.red-icon {
    background: var(--primary-red);
    color: white;
    box-shadow: 0 5px 20px rgba(230, 57, 70, 0.4);
}

.card-icon.blue-icon {
    background: rgba(29, 53, 87, 0.3);
    color: var(--accent-blue);
}

.detailed-card:hover .card-icon.blue-icon {
    background: var(--accent-blue);
    color: white;
    box-shadow: 0 5px 20px rgba(69, 123, 157, 0.4);
}

.card-icon.gold-icon {
    background: rgba(255, 218, 68, 0.1);
    color: #D4A017;
}

.detailed-card:hover .card-icon.gold-icon {
    background: #D4A017;
    color: var(--dark-bg);
    box-shadow: 0 5px 20px rgba(255, 218, 68, 0.4);
}

@media (max-width: 768px) {
    .section-heading-left {
        font-size: 2.2rem;
    }

    .features-grid-cards {
        grid-template-columns: 1fr;
    }
}

/* Staggered Redesign Use Cases - Moderne Layout */
.use-cases-section-v2 {
    padding: 60px 0;
    background: #ffffff;
    overflow: hidden;
}

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

.use-case-row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 60px;
}

.use-case-row:last-child {
    margin-bottom: 0;
}

.use-case-row.row-reverse {
    flex-direction: row-reverse;
}

.use-case-image-col {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-wrapper {
    position: relative;
    width: 100%;
    max-width: 320px;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 auto;
    /* Center the image */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.use-case-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.5s ease;
}

.use-case-row:hover .use-case-img {
    transform: scale(1.02);
}

.use-case-text-col {
    flex: 1;
}

.use-case-tag {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(230, 57, 70, 0.1);
    color: var(--primary-red);
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.use-case-text-col h3 {
    font-size: 2rem;
    color: var(--primary-blue);
    margin-bottom: 10px;
    line-height: 1.2;
    font-weight: 700;
}

.use-case-text-col p {
    font-size: 1.05rem;
    color: var(--text-gray);
    line-height: 1.7;
}

/* Animations for Scroll Reveal */
[data-aos="fade-right"] {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 0.8s ease-out;
}

[data-aos="fade-left"] {
    opacity: 0;
    transform: translateX(40px);
    transition: all 0.8s ease-out;
}

.aos-animate [data-aos="fade-right"],
.aos-animate [data-aos="fade-left"],
.aos-animate[data-aos="fade-right"],
.aos-animate[data-aos="fade-left"] {
    opacity: 1;
    transform: translateX(0);
}

@media (max-width: 968px) {

    .use-case-row,
    .use-case-row.row-reverse {
        flex-direction: column;
        gap: 40px;
        gap: 30px;
        margin-bottom: 40px;
        text-align: center;
    }

    .use-case-text-col h3 {
        font-size: 1.8rem;
    }

    .image-wrapper {
        max-width: 100%;
    }
}



/* Why Caze CostSense Section */
.why-us-section {
    padding: 50px 0;
    background: var(--dark-bg);
}

.why-us-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.why-card {
    background: #f8f9fa;
    /* Light card as per reference, or dark? User said "match site theme". sticking to existing dark theme for consistency but maybe lighter distinct look? */
    /* Wait, user said "like given image" (which is white cards). But also "match site theme". 
       I will make them dark but distinct. */
    background: rgba(255, 255, 255, 0.95);
    color: var(--dark-bg);
    /* Dark text for light cards */
    padding: 35px;
    border-radius: 20px;
    /* Rounded corners as per image */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    position: relative;
    overflow: hidden;
    border-bottom-right-radius: 50px;
    /* Stylized corner as per some modern designs, or keep standard */
}

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

.why-icon {
    margin-bottom: 20px;
    color: var(--primary-blue);
    width: 40px;
    height: 40px;
}

.why-icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.why-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--primary-blue);
}

.why-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a5568;
}

/* AIsense Feature Cards (White Theme) */
.detailed-card.white-theme {
    background: #ffffff;
    color: var(--primary-blue);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    /* Rounded corners as per image */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.detailed-card.white-theme:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-red);
    /* Subtle interactive hint */
}

.detailed-card.white-theme h3 {
    color: var(--primary-blue);
    font-weight: 700;
}

.detailed-card.white-theme p {
    color: #4a5568;
    /* Darker gray for readability on white */
}

/* Buttons */
.why-us-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 40px;
}

.btn-primary-outline {
    padding: 12px 30px;
    border: 2px solid var(--primary-blue);
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    border-radius: 5px;
}

.btn-primary-outline:hover {
    background: var(--primary-blue);
    color: #ffffff;
}

.btn-secondary-outline {
    padding: 12px 30px;
    border: 2px solid var(--primary-red);
    color: var(--primary-red);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s;
    border-radius: 5px;
}

.btn-secondary-outline:hover {
    background: var(--primary-red);
    color: #ffffff;
}

/* Override for dark theme if sticking to light cards */
/* The user asked for "match site theme", but "like given image". Given image has white cards.
/* EXPLORE SOLUTIONS GRID */
.explore-solutions-section {
    padding: 60px 0;
    /* Use dark background to contrast with main content */
    background: var(--dark-bg);
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.solution-card {
    background: #ffffff;
    border: var(--border-light);
    border-radius: var(--radius-md);
    padding: 28px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--card-shadow);
}

.solution-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: var(--accent-blue);
    background: #ffffff;
}

/* Wide card spanning full width */
.solution-card.wide-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(29, 53, 87, 0.05), rgba(230, 57, 70, 0.05));
}

.solution-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.solution-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.solution-icon svg {
    width: 28px;
    height: 28px;
    stroke-width: 2;
}

.solution-icon.red-bg {
    background: linear-gradient(135deg, var(--primary-red), #ff6b6b);
}

.solution-icon.blue-bg {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
}

.solution-card h3 {
    font-size: 1.3rem;
    color: var(--text-white);
    margin: 0;
    font-weight: 700;
}

.solution-card p {
    color: #4a5568;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Footer-like CTA styling */
.aisense-footer-cta {
    margin-top: 60px;
    text-align: center;
    background: #f8f9fb;
    padding: 40px;
    border-radius: 20px;
    border: 1px solid #eef0f3;
}

.aisense-footer-cta p {
    font-size: 1.05rem;
    color: #4a5568;
    max-width: 800px;
    margin: 0 auto;
    font-style: italic;
    line-height: 1.8;
}

/* Professional Footer */
.site-footer {
    background: #0d1b2a;
    /* Deep, high-contrast dark blue */
    color: #e0e1dd;
    padding: 60px 0 0;
    font-family: var(--font-main);
}

.footer-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 30px;
    padding-bottom: 60px;
}

@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 50px;
    }
}


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

.footer-logo img {
    max-height: 50px;
    margin-bottom: 25px;
    filter: brightness(0) invert(1);
    /* Make logo white for dark theme */
}

@media (max-width: 580px) {
    .footer-logo {
        display: flex;
        justify-content: center;
    }
}

.footer-about {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #a2aebb;
    max-width: 280px;
    text-align: left;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.social-links a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-links a:hover {
    background: var(--primary-red);
    color: #ffffff;
    transform: translateY(-5px) rotate(8deg);
    box-shadow: 0 8px 20px rgba(230, 57, 70, 0.4);
    border-color: var(--primary-red);
}

@media (max-width: 580px) {
    .footer-about {
        margin: 0 auto;
        text-align: center;
        /* Ensure text is centered too */
    }

    .social-links {
        justify-content: center;
    }
}

.footer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

.footer-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2px;
    background: var(--primary-red);
}

@media (max-width: 580px) {
    .footer-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    color: #a2aebb;
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.footer-col ul li a:hover {
    color: #ffffff;
    padding-left: 8px;
}

.footer-col ul li a::before {
    content: '→';
    position: absolute;
    left: -15px;
    opacity: 0;
    transition: all 0.3s ease;
}

.footer-col ul li a:hover::before {
    opacity: 1;
    left: -5px;
}

.footer-bottom {
    background: rgba(0, 0, 0, 0.2);
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
    font-size: 0.85rem;
    color: #778da9;
}

/* 3D Scroll Reveal for Footer Content */
.footer-col {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-col.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation for footer columns */
.footer-col:nth-child(1) {
    transition-delay: 0.1s;
}

.footer-col:nth-child(2) {
    transition-delay: 0.2s;
}

.footer-col:nth-child(3) {
    transition-delay: 0.3s;
}

.footer-col:nth-child(4) {
    transition-delay: 0.4s;
}

.footer-col:nth-child(5) {
    transition-delay: 0.5s;
}

.footer-map-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #a2aebb;
    text-decoration: none;
    transition: all 0.3s ease;
}

.footer-map-link:hover {
    color: #ffffff;
}

.footer-map-link i {
    color: var(--primary-red);
    font-size: 1.2rem;
}

.footer-map-img {
    margin-top: 15px;
    width: 100%;
    max-width: 250px;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    display: block;
}

.footer-map-img:hover {
    border-color: var(--primary-red);
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2);
}

/* Utility Classes for Spacing */
.mb-5 {
    margin-bottom: 3rem !important;
}

.mt-5 {
    margin-top: 3rem !important;
}

.mb-10 {
    margin-bottom: 8rem !important;
}

/* RedTeamAI & CodeSecAI & AISense Sub-pages Image Sizing */
.redteamai-page .image-wrapper,
.codesecai-page .image-wrapper,
.hiresense-page .image-wrapper,
.bizconai-page .image-wrapper,
.cargocontainerai-page .image-wrapper,
.metproai-page .image-wrapper,
.docsense-page .image-wrapper,
.websense-page .image-wrapper {
    max-width: 350px;
    margin: 0 auto;
}

/* Ensure alternating alignment looks good with smaller images */
.redteamai-page .use-case-row .use-case-image-col,
.codesecai-page .use-case-row .use-case-image-col,
.hiresense-page .use-case-row .use-case-image-col,
.bizconai-page .use-case-row .use-case-image-col,
.cargocontainerai-page .use-case-row .use-case-image-col,
.metproai-page .use-case-row .use-case-image-col,
.docsense-page .use-case-row .use-case-image-col,
.websense-page .use-case-row .use-case-image-col {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure alternating alignment looks good with smaller images */
.redteamai-page .use-case-row .use-case-image-col {
    display: flex;
    justify-content: center;
    /* Center images in their column */
    align-items: center;
}

/* AireSense Specific Styles */
/* AireSense Specific Styles */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Force 4 columns */
    gap: 25px;
    margin-bottom: 40px;
}

/* Responsive adjustment for stats grid */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Ensure features grid also follows 4 columns if requested */
.hiresense-page .features-grid-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Reverted to 3 columns as per request */
    gap: 25px;
    margin-top: 30px;
}

@media (max-width: 992px) {
    .hiresense-page .features-grid-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .hiresense-page .features-grid-cards {
        grid-template-columns: 1fr;
    }
}


.stat-card {
    text-align: center;
    padding: 40px 25px !important;
    border-radius: 12px;
    background: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Highlighted by default */
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}

/* Gradient Top Border Effect */
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    /* Center start */
    transform: translateX(-50%);
    width: 0%;
    /* Hidden initially */
    height: 5px;
    background: linear-gradient(90deg, var(--primary-blue), var(--primary-red));
    z-index: 2;
    transition: width 0.4s ease;
    /* Animate width */
}

/* Show border on hover */
.stat-card:hover::before {
    width: 100%;
}

.stat-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 15px;
    line-height: 1;
    background: -webkit-linear-gradient(45deg, var(--primary-blue), var(--primary-red));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 1.1rem;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Enhanced Hover Effects for Cards */
.hover-effect {
    transition: all 0.3s ease;
    cursor: default;
}

.hover-effect:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Image Scale Effect */
.hover-scale .image-wrapper {
    overflow: hidden;
    border-radius: 10px;
}

.hover-scale .image-wrapper img {
    transition: transform 0.5s ease;
}

.hover-scale:hover .image-wrapper img {
    transform: scale(1.05);
}

/* Center CTA Group */
.cta-group-center {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* CTA Section for Product Pages */
.cta-section {
    padding: 60px 0;
    text-align: center;
    background: #f8fafc;
    /* Light background to distinguish from footer and white sections */
    border-top: 1px solid #e2e8f0;
}

.cta-section p {
    font-size: 1.1rem;
    color: #2d3748;
    max-width: 800px;
    margin: 0 auto 35px;
    line-height: 1.7;
    font-weight: 500;
}

/* Solution Logo Styles (Matched to Home Page Product Cards) */
.solution-logo-container {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
    margin-bottom: 0;
}

.solution-logo {
    width: 65px;
    height: 65px;
    object-fit: contain;
    transition: all 0.4s ease;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.solution-card:hover .solution-logo {
    transform: scale(1.05);
}

.solution-header {
    display: flex;
    align-items: center;
    gap: 20px;
    /* Increased gap to match home page */
    margin-bottom: 20px;
}

/* Solution Explore Button */
.solution-explore-btn {
    display: inline-flex;
    align-items: center;
    color: var(--primary-blue);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 15px;
    transition: all 0.3s ease;
}

.solution-explore-btn .arrow {
    margin-left: 8px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.solution-card:hover .solution-explore-btn {
    color: var(--primary-red);
}

.solution-card:hover .solution-explore-btn .arrow {
    transform: translateX(5px);
}

/* Wide card footer adjustment */
.solution-card.wide-card {
    display: flex;
    flex-direction: column;
}

/* News Grid Layout */
.news-grid-section {
    padding: 60px 0;
    background-color: var(--section-bg);
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
}

.news-item {
    background: #ffffff;
    border-radius: var(--radius-md);
    padding: 25px 20px;
    box-shadow: var(--card-shadow);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.news-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border-color: rgba(230, 57, 70, 0.2);
}

.news-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-red), var(--primary-blue));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.news-item:hover::before {
    opacity: 1;
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.news-date-badge {
    background: rgba(29, 53, 87, 0.05);
    color: var(--primary-blue);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 700;
}

.news-source {
    color: #0077b5;
    /* LinkedIn Color */
    font-size: 1.2rem;
}

.news-item h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: var(--text-white);
    line-height: 1.4;
}

.news-item p {
    color: var(--text-gray);
    margin-bottom: 15px;
    line-height: 1.6;
}

.news-footer {
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding-top: 20px;
}

.news-link-btn {
    display: inline-flex;
    align-items: center;
    color: var(--primary-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
    gap: 8px;
}

.news-link-btn:hover {
    color: var(--primary-red);
}

.news-link-btn i {
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr;
    }
}

/* Contact Page Styles */
.contact-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    padding: 180px 0 100px;
    /* More top padding for header */
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
    margin-bottom: -50px;
    /* Overlap effect */
}

/* Digital Rain / Tech Background Effect for Contact Hero */
.contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.9)),
        repeating-linear-gradient(transparent, transparent 50px, rgba(69, 123, 157, 0.1) 50px, rgba(69, 123, 157, 0.1) 51px),
        repeating-linear-gradient(90deg, transparent, transparent 50px, rgba(69, 123, 157, 0.1) 50px, rgba(69, 123, 157, 0.1) 51px);
    background-size: 100% 100%, 100px 100px, 100px 100px;
    z-index: 0;
}

.contact-hero h1 {
    position: relative;
    z-index: 2;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 0;
    background: linear-gradient(90deg, #ffffff, #94a3b8);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.contact-form-section {
    padding: 0 0 60px;
    background: #f8fafc;
    position: relative;
    z-index: 10;
}

.contact-form-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 50px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* Gentle shadow */
    border: 1px solid #e2e8f0;
}

.contact-form-container h2 {
    color: var(--primary-blue);
    font-size: 1.5rem;
    margin-bottom: 30px;
    font-weight: 600;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width {
    grid-column: span 2;
}

.form-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
}

.form-group input,
.form-group textarea {
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 0.95rem;
    color: #334155;
    background: #ffffff;
    transition: border-color 0.3s, box-shadow 0.3s;
    font-family: var(--font-main);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-blue);
    box-shadow: 0 0 0 3px rgba(29, 53, 87, 0.1);
}

.form-group textarea {
    resize: vertical;
}

.checkbox-group {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}

.checkbox-group input[type="checkbox"] {
    margin-top: 4px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.checkbox-group label {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.5;
}

.checkbox-group a {
    color: var(--primary-blue);
    text-decoration: underline;
}

.submit-btn {
    background: #0ea5e9;
    /* Bright blue for CTA */
    color: white;
    border: none;
    padding: 12px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    justify-self: start;
    margin-top: 10px;
}

.submit-btn:hover {
    background: #0284c7;
}

@media (max-width: 768px) {
    .contact-form {
        grid-template-columns: 1fr;
    }

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

    .contact-form-container {
        padding: 30px 20px;
        margin: 0 20px;
    }
}

/* --- Header Alignment and Top Bar Refinement --- */

/* Force Top Bar items to the right endpoint of the container */
.top-bar-container {
    justify-content: flex-end;
}

/* Fix for specific pages where mobile-menu-toggle exists */
@media (min-width: 1025px) {

    /* Ensure toggle button never takes space or shows up on desktop */
    .mobile-menu-toggle,
    .mobile-menu-btn {
        display: none !important;
    }

    /* Hide Mobile Bottom Nav on Desktop */
    .mobile-bottom-nav {
        display: none !important;
    }

    body {
        padding-bottom: 0;
    }
}

/* --- CTA Buttons & Outline Button Style --- */
.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-primary-outline {
    background: transparent;
    color: var(--primary-red);
    border: 2px solid var(--primary-red);
    padding: 10px 26px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary-outline:hover {
    background: var(--primary-red);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(230, 57, 70, 0.3);
}

/* --- HireSense Enquiry Page Styles --- */
.enquiry-hero {
    background: #ffffff;
    /* White background like home page */
    padding: 120px 0 60px 0;
    position: relative;
    overflow: hidden;
    color: var(--primary-blue);
}

.enquiry-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: 30px;
    position: relative;
    z-index: 10;
}

.enquiry-logo-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.enquiry-logo {
    width: 200px;
    height: auto;
    filter: none;
    animation: cazie-glow 4s ease-in-out infinite;
}

.enquiry-logo-text {
    font-size: 1.4rem;
    font-weight: 700;
    white-space: nowrap;
}

.enquiry-title-side {
    text-align: center;
}

.enquiry-bot-side {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

.enquiry-bot-img {
    width: 250px;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.1));
    animation: cazie-glow 4s ease-in-out infinite;
}

.enquiry-title {
    font-size: 3rem;
    font-weight: 800;
    margin: 0;
}

.enquiry-form-section {
    padding: 80px 0;
    background: transparent;
    position: relative;
    z-index: 20;
}

.container-narrow {
    max-width: 800px !important;
}

.enquiry-card {
    background: #ffffff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 20;
}

.enquiry-intro {
    text-align: center;
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.6;
    font-size: 1rem;
}

/* WPForms Theme Integration */
.wpforms-container-custom .wpforms-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.wpforms-container-custom .wpforms-field {
    padding: 0;
}

.wpforms-container-custom .wpforms-field-label {
    margin-bottom: 8px;
    font-weight: 600;
}

.wpforms-container-custom .wpforms-submit-container {
    padding: 0 !important;
    margin-top: 20px;
    text-align: center;
}

.wpforms-container-custom button.wpforms-submit {
    background: var(--primary-red) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 40px !important;
    border-radius: 30px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.wpforms-container-custom button.wpforms-submit:hover {
    background: #b91c1c !important;
    /* Darker red */
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 57, 70, 0.3);
}

@media (max-width: 992px) {
    .enquiry-hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .enquiry-logo-side,
    .enquiry-title-side,
    .enquiry-bot-side {
        text-align: center;
        justify-content: center;
    }

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

    .enquiry-card {
        padding: 25px;
    }

    .enquiry-logo {
        width: 180px;
    }

    .enquiry-bot-img {
        width: 180px;
    }
}

/* Global Button Link Fix */
a:has(button),
a.btn,
a[class*="btn"],
a[class*="button"],
.new-explore-btn,
.demo-cta-btn,
.solution-explore-btn,
.solution-explore-btn span {
    text-decoration: none !important;
}