:root {
    --primary-blue: #036CE1;
    --dark-bg: #010101;
    --light-bg: #F2F2F2;
    --white: #FFFFFF;
    --font-family-base: 'Open Sans';
}

@import url('stats.css');

body {
    font-family: var(--font-family-base);
    background-color: var(--dark-bg);
    color: var(--white);
    overflow-x: hidden;
    /* Prevent horizontal scroll */
}

/* Custom file font inclusion if needed, otherwise Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');

/* Navbar Styling */
.navbar {
    background-color: var(--dark-bg);
    padding: 25px 80px;
    /* As per Figma specific dimensions */
    height: 110px;
    transition: all 0.3s ease;
}

.navbar-brand img {
    height: 40px;
    /* Adjust based on actual logo */
    width: auto;
}

.navbar-brand span {
    color: var(--white);
    font-weight: 700;
    font-size: 24px;
}

.navbar-brand span .blue-text {
    color: var(--primary-blue);
}

.nav-link {
    color: var(--white) !important;
    font-weight: 400;
    /* Regular */
    font-size: 16px;
    line-height: 100%;
    /* Explicit line-height */
    letter-spacing: -0.3px;
    /* As per spec */
    margin-left: 15px;
    margin-right: 15px;
    position: relative;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--primary-blue) !important;
}

.btn-primary-custom {
    background-color: var(--primary-blue);
    border: none;
    color: var(--white);
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-primary-custom:hover {
    background-color: #0256b3;
    /* Darker shade of blue */
}

/* Mobile Responsive Adjustments */
@media (max-width: 991.98px) {
    .navbar {
        padding: 15px 20px;
        height: auto;
    }

    .navbar-collapse {
        background-color: var(--dark-bg);
        padding: 20px;
        border-radius: 0 0 10px 10px;
    }

    .nav-link {
        margin: 10px 0;
    }
}

/* Hero Section Styling */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 700px;
    display: flex;
    align-items: center;
    color: var(--white);
    margin-top: -110px;
    /* Counteract the main padding-top to make it full screen behind navbar if desired, or adjust */
    padding-top: 110px;
    /* Add padding back to content so it's not hidden behind navbar */
}

/* Overlay for better text readability */
.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    /* Adjust opacity as needed */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.hero-title {
    font-family: 'Space Grotesk';
    font-size: 64px;
    font-weight: 700;
    line-height: 1.08;
    /* 108% */
    margin-bottom: 20px;
}

.hero-subtitle {
    font-family: 'Open Sans';
    font-size: 24px;
    font-weight: 400;
    line-height: 1.6;
    /* 160% */
    margin-bottom: 40px;
    margin-top: 20px;
}

.hero-buttons .btn {
    margin: 0 10px;
    min-width: 160px;
}

.btn-outline-light-custom {
    border: 2px solid var(--white);
    color: var(--white);
    padding: 10px 25px;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
    background: transparent;
}

.btn-outline-light-custom:hover {
    background-color: var(--white);
    color: var(--dark-bg);
}

/* What is VehicleVue Section */
.about-section {
    padding: 50px 0;
    background-color: var(--white);
    color: var(--dark-bg);
}

.about-label {
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
    color: #555;
    /* Or a specific grey from design if known, usually refined later */
}

.about-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 48px;
    line-height: 60px;
    margin-bottom: 30px;
}

.about-text {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 18px;
    line-height: 32px;
    margin-bottom: 20px;
}

.image-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}

.grid-img-main {
    grid-column: 1 / span 2;
    width: 83%;
    border-radius: 8px;
    /* Assuming slight rounded corners */
    height: auto;
    object-fit: cover;
    margin-left: auto;
}

.grid-img-sub {
    width: 100%;
    border-radius: 8px;
    height: 100%;
    object-fit: cover;
    max-height: 200px;
    /* Adjust based on aspect ratio */
}

/* Vertical Text Decoration */
.vertical-decoration-wrapper {
    position: relative;
    /* padding-left: 60px; Removed padding as we are using margin on image now, or keeping it?
       User's screenshot doesn't show the wrapper styles, but using negative left on text implies 
       it might be positioned relative to the wrapper edge. 
       If I keep padding, -58px is relative to the padded content box? No, absolute is relative to padding box.
       Let's keep the wrapper simple. */
}

.vertical-text {
    position: absolute;
    left: -58px;
    /* Adjust based on exact positioning needs */
    top: 31%;
    transform: translateY(-50%) rotate(-90deg);
    font-family: 'Open Sans';
    font-weight: 700;
    font-size: 50px;
    letter-spacing: 0;
    white-space: nowrap;
    user-select: none;
    pointer-events: none;
    z-index: 10;
}

.v-text-vehicle {
    color: #010101;
    opacity: 0.13;
}

.v-text-vue {
    background: linear-gradient(180deg, #24B5F8 0%, #066DE2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.3;
}


/* Ensure Owl Carousel items are equal height */
.owl-carousel .owl-stage {
    display: flex;
    padding-bottom: 20px;
    /* Add space for shadow/margin to prevent clipping */
}

.owl-carousel .owl-item {
    display: flex;
    flex: 1 0 auto;
    height: 100%;
    /* Ensure item takes full height of stage */
}

/* Testimonial Section */
.testimonial-section {
    padding: 50px 0;
    background-color: var(--white) !important;
    /* Force white background */
    color: var(--dark-bg);
    /* Default text color for section */
}

.testimonial-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 0;
    color: var(--dark-bg);
}

.testimonial-stats {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #666;
    margin-bottom: 0;
}

.testimonial-card {
    background: #fff;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 30px;
    margin: 0;
    /* Use owl carousel margin option instead */
    width: 100%;
    height: 100%;
    /* Stretch to fill owl-item */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    /* Ensure padding doesn't add to width */
}

.testimonial-card .stars {
    margin-bottom: 20px;
    display: flex;
    gap: 5px;
}

.testimonial-card .stars img {
    width: 16px !important;
    /* Adjusted size for star image */
    height: auto;
}

.testimonial-card .quote {
    font-family: 'Open Sans';
    font-size: 18px;
    line-height: 28px;
    color: #010101;
    margin-bottom: 30px;
    font-style: normal;
    letter-spacing: 0px;
}

.author-info {
    display: flex;
    align-items: center;
}

.author-info img {
    width: 48px !important;
    /* Fixed small size */
    height: 48px !important;
    border-radius: 50% !important;
    /* Circle */
    object-fit: cover;
    margin-right: 15px;
}

.author-info h5 {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 2px;
    color: var(--dark-bg);
}

.author-info span {
    font-family: 'Open Sans';
    font-size: 14px;
    color: #666;
    display: block;
    /* Ensure it wraps if needed */
}

.check-reviews-link {
    color: #000;
    text-decoration: none;
}

/* FAQ Section */
.faq-section {
    padding: 50px 0;
    background-color: var(--white) !important;
    /* Force white background */
    color: var(--dark-bg);
}

.faq-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 56px;
    line-height: 1.1;
    color: var(--dark-bg);
    margin-bottom: 20px;
}

.accordion-item {
    background-color: #F8F8F8 !important;
    /* Lighter gray */
    border: none !important;
    border-radius: 8px !important;
    margin-bottom: 10px;
    overflow: hidden;
}

.accordion-button {
    background-color: #F8F8F8 !important;
    color: var(--dark-bg) !important;
    font-family: 'Open Sans';
    font-weight: 500;
    font-size: 16px;
    padding: 20px 25px;
    box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
    background-color: #F8F8F8 !important;
    color: var(--dark-bg) !important;
}

.accordion-body {
    background-color: #F8F8F8 !important;
    padding: 0 25px 20px 25px;
    color: #666;
    font-family: 'Open Sans';
    font-size: 16px;
    line-height: 1.6;
}

/* Custom Accordion Icon using Plus and Times characters for simplicity/reliability or SVG if preferred. 
   Using pseudo-elements for custom icons.
*/
.accordion-button::after {
    background-image: none !important;
    /* Remove default bootstrap icon */
    content: "+";
    font-family: 'Space Grotesk';
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
    text-align: center;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    color: var(--dark-bg);
}

.accordion-button:not(.collapsed)::after {
    content: "×";
    /* Times symbol */
    font-size: 28px;
    transform: translateY(-50%) rotate(0deg);
}

.play-btn::after {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid var(--primary-blue);
    margin-left: 4px;
    /* Optical adjustment */
}

.play-btn:hover {
    background-color: var(--white);
    border-color: var(--primary-blue);
}



/* Stats Section */
.stats-section {
    padding: 50px 0;
    background-color: var(--dark-bg);
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.stats-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--white);
}

.stats-text {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #ccc;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 500px;
}

.stat-item {
    margin-bottom: 30px;
}

.stat-number {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    margin-bottom: 5px;
    background: linear-gradient(90deg, #24B5F8 0%, #066DE2 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-family: 'Open Sans';
    font-size: 14px;
    line-height: 1.4;
    color: #fff;
}

.video-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
}

.video-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background-color: var(--white);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    z-index: 5;
}

/* App in Action Section */

.app-action-section {
    padding: 50px 0;
    background-color: var(--white);
}

.action-banner {
    background-color: var(--dark-bg);
    border-radius: 24px;
    padding: 60px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.action-content {
    flex: 1;
    /* Take remaining space */
    padding-right: 50px;
    z-index: 2;
}

.action-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    color: var(--white);
    margin-bottom: 20px;
    line-height: 1.2;
}

.action-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #ccc;
    margin-bottom: 40px;
    line-height: 1.6;
}

.action-image-wrapper {
    flex: 0 0 500px;
    /* Fixed width for image area */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    z-index: 2;
}

.action-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Background elements if needed, or simple dark bg */

@media (max-width: 991px) {
    .action-banner {
        flex-direction: column;
        padding: 40px;
        text-align: center;
    }

    .action-content {
        padding-right: 0;
        margin-bottom: 40px;
    }

    .action-image-wrapper {
        flex: none;
        width: 100%;
    }
}

/* Features Section */
.features-section {
    padding: 50px 0;
    background-color: #F8F9FA;
    /* Light background for contrast */
}

.feature-header {
    margin-bottom: 60px;
}

.feature-tag {
    font-family: 'Open Sans';
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
    display: inline-block;
    color: #555;
    background: transparent;
}

.feature-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 20px;
    color: var(--dark-bg);
}

.feature-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    max-width: 600px;
    margin-bottom: 0;
    color: #555;
    /* Fixed visibility against light background */
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.feature-card {
    background-color: var(--white);
    border-radius: 20px;
    padding: 40px 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    /* Soft shadow */
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    /* align-items: center;  Usually center aligned but let's check design. Text seems left aligned in some, center in others? 
       Image 1 shows images inside. */
    overflow: hidden;
}

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

.feature-image-wrapper {
    margin-bottom: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 12px;
    /* background: #f0f0f0;  placeholder background? */
}

.feature-image-wrapper img {
    max-width: 100%;
    height: auto;
    /* max-height: 250px;  Prevent too tall */
    object-fit: contain;
}

.feature-card h3 {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 15px;
    color: var(--dark-bg);
}

.feature-card p {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Grid Spanning */
.span-2 {
    grid-column: span 2;
}

/* Responsive Grid */
@media (max-width: 991px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .span-2 {
        grid-column: span 2;
    }
}

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

    .span-2 {
        grid-column: auto;
    }
}

/* App in Action Section */
.app-action-section {
    padding: 50px 0;
    background-color: var(--white);
}

.action-banner {
    background-color: #1a1a1a;
    border-radius: 20px;
    display: flex;
    overflow: hidden;
    position: relative;
    padding: 0;
    /* padding controlled by children */
    /* Ensure it takes full width of container */
    width: 100%;
}

.action-content {
    padding: 80px 60px;
    /* Increased padding for better spacing */
    flex: 0 0 55%;
    /* Fixed width for text content (55%) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--white);
    z-index: 2;
}

.action-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 20px;
}

.action-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #ccc;
    max-width: 500px;
}

.action-image-wrapper {
    flex: 0 0 45%;
    /* Fixed width for image content (45%) */
    position: relative;
    padding: 20px 20px 20px 0;
    /* Add padding top/bottom/right, no left */
    display: flex;
    align-items: center;
    /* Center image vertically */
    justify-content: center;
}

.action-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    /* Normal flow inside wrapper */
    border-radius: 12px;
    /* Slight rounding for image itself */
}

/* Responsive Action Banner */
@media (max-width: 991px) {
    .action-banner {
        flex-direction: column;
    }

    .action-content {
        padding: 40px;
        flex: auto;
    }

    .action-image-wrapper {
        padding: 0 40px 40px 40px;
        flex: auto;
        min-height: auto;
    }

    .action-image-wrapper img {
        height: auto;
        min-height: 300px;
    }
}

/* Get in Touch Section */
.contact-section {
    padding: 50px 0;
    background-color: var(--white);
}

.contact-wrapper {
    background-color: var(--dark-bg);
    border-radius: 24px;
    padding: 80px 60px;
    position: relative;
    overflow: hidden;
    color: var(--white);
}

.contact-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 50%;
    height: 100%;
    background-image: url('../images/getintoouchbg.png');
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    opacity: 0.1;
    z-index: 0;
    pointer-events: none;
}

.contact-wrapper .row {
    position: relative;
    z-index: 1;
}

.contact-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 48px;
    margin-bottom: 20px;
    color: var(--white);
    line-height: 1.2;
}

.contact-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #ccc;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 450px;
}

.contact-info .info-item {
    margin-bottom: 25px;
}

.contact-info .info-label {
    display: block;
    font-family: 'Open Sans';
    font-size: 14px;
    color: #888;
    margin-bottom: 5px;
}

.contact-info .info-value {
    font-family: 'Space Grotesk';
    font-size: 20px;
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
}

.contact-info .info-value:hover {
    color: var(--primary-blue);
}

.contact-form .form-control {
    background-color: #222;
    border: 1px solid #333;
    border-radius: 12px;
    color: #fff;
    padding: 15px 20px;
    font-family: 'Open Sans';
    font-size: 16px;
    margin-bottom: 15px;
}

.contact-form .form-control::placeholder {
    color: #666;
}

.contact-form .form-control:focus {
    background-color: #2a2a2a;
    border-color: var(--primary-blue);
    box-shadow: none;
    outline: none;
    color: #fff;
}

.contact-btn {
    background-color: var(--primary-blue);
    border: none;
    border-radius: 8px;
    padding: 14px 30px;
    font-family: 'Open Sans';
    font-weight: 600;
    font-size: 16px;
    color: var(--white);
    transition: background-color 0.3s;
    width: auto;
    display: inline-flex;
    align-items: center;
}

.contact-btn:hover {
    background-color: #0056b3;
}

@media (max-width: 991px) {
    .contact-wrapper {
        padding: 40px;
        text-align: center;
    }

    .contact-wrapper::before {
        width: 100%;
        background-position: center;
        opacity: 0.1;
    }

    .contact-desc {
        margin: 0 auto 40px;
    }
}

/* Footer Section */
.footer-section {
    background-color: var(--dark-bg);
    color: var(--white);
    padding: 80px 0 40px;
    font-family: 'Open Sans';
}

.footer-brand {
    display: inline-block;
    margin-bottom: 5px;
}

.footer-logo {
    height: 40px;
    width: auto;
}

.brand-tagline {
    font-size: 10px;
    letter-spacing: 1px;
    color: #ccc;
    text-transform: uppercase;
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    white-space: nowrap;
}

.brand-tagline::before,
.brand-tagline::after {
    content: "";
    height: 1px;
    width: 20px;
    background-color: #555;
    margin: 0 10px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    margin-right: 10px;
    text-decoration: none;
    transition: opacity 0.3s;
    background-color: var(--primary-blue);
    color: var(--dark-bg);
    font-size: 18px;
}

.social-links a:hover {
    opacity: 0.8;
}

.footer-heading {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 25px;
    color: var(--white);
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-links a {
    color: #999;
    text-decoration: none;
    font-size: 15px;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--white);
}

.app-buttons {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.app-btn img {
    height: 45px;
    width: auto;
}

.legal-text {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 12px;
    line-height: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 30px;
}

.copyright-text {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
}

.msg-link {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.msg-link:hover {
    color: var(--white);
}

/* Pricing Page Styles */

/* Pricing Hero */
.pricing-hero {
    /* Assuming a generic banner or reusing a hero image with overlay */
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/mainbanner.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--white);
    text-align: center;
    margin-top: 76px;
    /* Offset for fixed header */
}

.pricing-hero-title {
    font-family: 'Space Grotesk';
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 20px;
}

.pricing-hero .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.pricing-hero .breadcrumb-item,
.pricing-hero .breadcrumb-item a {
    color: #ccc;
    font-size: 16px;
    text-decoration: none;
}

.pricing-hero .breadcrumb-item.active {
    color: var(--white);
    font-weight: 600;
}

.pricing-hero .breadcrumb-item+.breadcrumb-item::before {
    color: #ccc;
}

/* Pricing Plans Section */
.pricing-plans-section {
    padding: 80px 0;
    background-color: var(--white);
}

.section-title {
    font-family: 'Darker Grotesque';
    font-size: 48px;
    font-weight: 700;
    color: #12141D;
    line-height: 60px;
    letter-spacing: 0;
    margin-bottom: 15px;
}

.section-subtitle {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 18px;
    line-height: 30px;
    color: #12141D;
    max-width: 600px;
    margin: 0 auto;
}

.pricing-card {
    background-color: #F8F9FA;
    /* Light gray for basic/standard */
    border-radius: 8px;
    padding: 50px 30px;
    text-align: center;
    transition: transform 0.3s;
    height: 100%;
    margin-top: 20px;
}

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

.pricing-card.premium {
    background-color: #1A1A1A;
    /* Dark background for premium */
    color: var(--white);
    transform: scale(1.05);
    /* Slightly larger */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.plan-name {
    font-family: 'Space Grotesk';
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
    color: #333;
}

.pricing-card.premium .plan-name {
    color: #ccc;
}

.plan-price {
    font-family: 'Space Grotesk';
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--dark-bg);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    line-height: 1;
}

.pricing-card.premium .plan-price {
    color: var(--white);
}

.plan-price sup {
    font-size: 24px;
    margin-right: 5px;
    top: 5px;
}

.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 40px;
}

.plan-features li {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 16px;
    line-height: 35px;
    color: #18181B;
    margin-bottom: 0;
    /* Removing bottom margin as line-height handles spacing */
}

.pricing-card.premium .plan-features li {
    color: #ccc;
}

.btn-outline-custom {
    color: var(--dark-bg);
    background-color: var(--white);
    border: none;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.btn-outline-custom:hover {
    background-color: #e2e6ea;
    color: var(--dark-bg);
}

/* Premium Button overrides */
.pricing-card.premium .btn-primary-custom {
    width: 100%;
    border-radius: 5px;
}

/* Mobile Responsive Adjustments for Hero */
@media (max-width: 768px) {
    .hero-title {
        font-size: 36px !important;
        line-height: 1.2;
        text-align: center;
    }

    .hero-subtitle {
        font-size: 18px;
        text-align: center;
    }

    .about-title {
        font-size: 32px;
        line-height: 1.2;
        text-align: center;
    }

    .stats-title {
        font-size: 32px;
        line-height: 1.2;
        text-align: center;
    }

    .faq-title {
        font-size: 32px;
        line-height: 1.2;
        text-align: center;
    }

    .stats-desc {
        text-align: center;
    }

    .stat-item {
        text-align: center;
    }

    .testimonial-title,
    .testimonial-stats,
    .testimonial-text {
        text-align: center;
    }

    .feature-tag,
    .about-label {
        text-align: center;
        display: block;
    }

    .grid-img-main {
        width: 100%;
    }
}

/* Footer Responsive Adjustments (lg breakpoint) */
@media (max-width: 991.98px) {
    .footer-section {
        text-align: center;
    }

    .footer-logo {
        margin-bottom: 20px;
    }

    .social-links {
        justify-content: center;
        margin-bottom: 30px;
    }

    .footer-brand {
        display: block;
        /* Ensure logo centers if it's inline */
    }

    .app-buttons {
        justify-content: center;
    }

    .footer-bottom .text-md-end {
        text-align: center !important;
    }

    .footer-bottom .col-md-6 {
        margin-bottom: 10px;
    }

    .footer-bottom .col-md-6 {
        margin-bottom: 10px;
    }
}

/* Testimonials Page Styles */
.testimonials-hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('../images/innerbanner.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: var(--white);
    text-align: center;
    margin-top: 76px;
    /* Offset for fixed header */
}

/* Breadcrumb fixes for dark background */
.testimonials-hero .breadcrumb-item,
.testimonials-hero .breadcrumb-item a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-family: 'Open Sans';
}

.testimonials-hero .breadcrumb-item.active {
    color: #fff !important;
}

.testimonials-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

.testimonials-hero .breadcrumb-item a:hover {
    color: #fff !important;
}

.testimonials-page-section {
    padding: 80px 0;
    background-color: #FAFAFA;
    /* Slightly off-white for page bg */
}

/* Intro specific styles */
.testimonial-header-stat {
    text-align: left;
}

.stat-big {
    font-family: 'Space Grotesk';
    font-size: 56px;
    font-weight: 700;
    color: var(--dark-bg);
    line-height: 1;
    margin-top: 10px;
}

.stat-sub {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

.stars-row img {
    width: 14px;
    height: auto;
}

.avatars-row {
    display: flex;
}

.avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-right: -10px;
    /* Overlap effect */
    object-fit: cover;
}

.avatar-small:last-child {
    margin-right: 0;
}

/* Ensure cards on this page match but maybe wider text */
.testimonials-page-section .testimonial-card {
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
}

@media (max-width: 991px) {
    .testimonial-header-text {
        text-align: left !important;
        margin-top: 20px;
    }

    .section-subtitle.ms-auto {
        margin-left: 0 !important;
    }
}

/* Share Experience Section */
.share-experience-section {
    padding: 80px 0;
    background-color: #F2F2F2;
    /* Light gray background from design */
}

.experience-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    color: var(--dark-bg);
    margin-bottom: 20px;
    line-height: 1.2;
}

.experience-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    max-width: 450px;
}

.experience-form .custom-input {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #333;
    box-shadow: none;
}

.experience-form .custom-input:focus {
    box-shadow: 0 0 0 2px rgba(36, 181, 248, 0.2);
}

.experience-form textarea.custom-input {
    resize: none;
}

/* Contact Page Styles */
.contact-page-section {
    padding: 80px 0;
    background-color: var(--white);
}

.contact-page-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    color: var(--dark-bg);
    margin-bottom: 20px;
}

.contact-page-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #666;
    margin-bottom: 40px;
    max-width: 400px;
}

.contact-info-block {
    margin-bottom: 30px;
}

.contact-info-block label {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 16px;
    color: #999;
    display: block;
    margin-bottom: 5px;
}

.contact-info-block p,
.contact-info-block a {
    font-family: 'Open Sans';
    font-size: 18px;
    color: var(--dark-bg);
    margin-bottom: 0;
    text-decoration: none;
    font-weight: 600;
}

.contact-input {
    background-color: #FAFAFA;
    /* Light gray for inputs */
    border: none;
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 14px;
    font-family: 'Open Sans';
    color: #333;
    box-shadow: none;
}

.contact-input:focus {
    box-shadow: 0 0 0 2px rgba(36, 181, 248, 0.2);
    background-color: #fff;
}

.map-wrapper iframe {
    border-radius: 12px;
    /* filter: grayscale(100%); */
    /* Optional: matches the clean aesthetic */
}

/* Features Page Styles */
.features-hero-section {
    padding: 120px 0 80px;
    background-color: var(--white);
    /* Offset handled by padding */
}

.features-hero-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 56px;
    line-height: 1.1;
    color: var(--dark-bg);
    margin-bottom: 25px;
}

.features-hero-desc {
    font-family: 'Open Sans';
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 35px;
    max-width: 500px;
}

.core-features-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 40px;
    color: var(--white);
    margin-bottom: 30px;
}

.feature-block {
    padding: 80px 0;
}

.feature-block-dark {
    background-color: #1A1A1A;
    color: var(--white);
}

.feature-block-light {
    background-color: #FAFAFA;
    color: var(--dark-bg);
}

.feature-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 20px;
    color: #fff;
    margin-bottom: 20px;
}

.number-pink {
    background-color: #D47FA6;
}

.number-blue {
    background-color: #BBE0FF;
    color: #000;
}

.feature-block-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 32px;
    margin-bottom: 20px;
}

.feature-block-desc {
    font-family: 'Open Sans';
    font-size: 16px;
    line-height: 1.6;
    opacity: 0.8;
    margin-bottom: 30px;
}

.text-dark {
    color: var(--dark-bg) !important;
}

.text-dark-muted {
    color: #555 !important;
    opacity: 1;
}

.feature-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-pill {
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #0d6efd;
    /* Blue border for dark mode */
    color: #0d6efd;
    /* Blue text for dark mode */
    font-family: 'Open Sans';
    font-size: 13px;
    /* Slightly larger for readability */
    font-weight: 600;
    text-transform: capitalize;
    /* Title case as per screenshot */
    background-color: rgba(13, 110, 253, 0.1);
    /* Subtle blue tint */
}

/* Case Studies Styles */
.partners-section {
    padding: 80px 0;
    background-color: var(--white);
}

.partner-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 20px;
    color: var(--dark-bg);
}

.partners-grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    opacity: 0.7;
}

.partner-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo img {
    max-height: 40px;
    /* Adjust based on preference */
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.partner-logo:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.case-studies-section {
    padding: 80px 0;
    background-color: var(--white);
}

.case-study-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    /* transition: transform 0.3s ease; */
}

/* .case-study-card:hover {
    transform: translateY(-5px);
} */

.card-img-wrapper {
    height: 240px;
    overflow: hidden;
    border-radius: 12px;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.case-study-card .card-body {
    padding: 20px 0;
}

.case-study-card .card-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 18px;
    /* Updated from 20px */
    line-height: 18px;
    /* Added line-height */
    margin-bottom: 15px;
    color: #010101;
    /* Updated color */
}

.case-study-card .card-text {
    font-family: 'Open Sans';
    font-weight: 400;
    font-size: 16px;
    color: #010101;
    /* Updated from #666 */
    line-height: 24px;
    /* Explicit line-height */
    margin-bottom: 25px;
}

.case-study-card .card-meta {
    font-family: 'Open Sans';
    font-size: 14px;
    color: #555;
    display: flex;
    justify-content: space-between;
}

.case-study-card .card-meta a {
    color: #0d6efd;
    text-decoration: none;
    font-weight: 600;
}

.feature-img-mobile {
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

@media (max-width: 991px) {
    .features-hero-title {
        font-size: 40px;
    }

    .feature-block-title {
        font-size: 28px;
    }

    .feature-block .row.flex-row-reverse {
        flex-direction: row !important;
        /* Stack normally on mobile */
    }

    .feature-img-mobile {
        margin-bottom: 30px;
    }

    .offset-lg-1 {
        margin-left: 0;
    }
}

/* Section Divider */
/* Section Divider */
.section-divider {
    line-height: 0;
    width: 100%;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    background-color: var(--white);
    /* Ensure background is explicit */
}

.section-divider img {
    display: block;
    width: 100%;
    height: auto;
}

/* Specific adjustment for Stats Section to separate it from divider if needed */
.stats-section {
    padding-top: 100px;
    /* Increase from default if it feels tight */
}

/* Case Study Detail Page Styles */
body.case-study-page {
    background-color: #FFFFFF !important;
    color: #010101 !important;
}

.case-study-content-wrapper {
    background-color: #FFFFFF !important;
    position: relative;
    z-index: 10;
    color: #010101 !important;
}

.case-detail-header .case-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 36px;
    margin-bottom: 20px;
    color: var(--dark-bg);
}

.meta-row-top {
    font-family: 'Open Sans';
    font-size: 14px;
    color: #010101;
    font-weight: 600;
}

.meta-industry a {
    color: #24B5F8;
    text-decoration: none;
}

.meta-grid-row {
    font-family: 'Space Grotesk';
    color: #010101;
    font-size: 16px;
}

.meta-divider {
    border-top: 1px solid #ddd;
    opacity: 1;
}

.case-intro {
    font-family: 'Open Sans';
    font-size: 16px;
    line-height: 1.6;
    color: #333;
}

.block-title {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 20px;
    color: var(--dark-bg);
}

.block-text {
    font-family: 'Open Sans';
    font-size: 16px;
    line-height: 1.6;
    color: #555;
    margin-bottom: 20px;
}

.highlight-text {
    color: #24B5F8;
    font-weight: 600;
    font-family: 'Open Sans';
}

.challenge-list {
    list-style: none;
    padding-left: 0;
}

.challenge-list li {
    font-family: 'Open Sans';
    font-size: 16px;
    color: #333;
    margin-bottom: 12px;
    position: relative;
    padding-left: 20px;
}

.challenge-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #000;
    font-weight: bold;
}

.block-img-wrapper img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Results Stat Cards */
.result-stat-card {
    background: #fff;
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 12px;
    height: 100%;
}

.result-stat-card .stat-val {
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 32px;
    color: #24B5F8 !important;
    /* Force distinct blue */
    margin-bottom: 5px;
}

.result-stat-card .stat-desc {
    font-family: 'Open Sans';
    font-size: 13px;
    color: #010101;
    font-weight: 600;
    line-height: 1.4;
}

/* Popup Modal */

.demo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.demo-modal {
    background: #fff;
    width: 900px;
    max-width: 95%;
    display: flex;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.demo-left {
    width: 35%;
}

.demo-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.demo-right {
    width: 65%;
    padding: 40px;
}

.demo-right h2 {
    margin-bottom: 10px;
    color: #000;
    font-family: 'Space Grotesk';
    font-weight: 700;
    font-size: 28px;
}

.demo-right p {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    font-family: 'Open Sans';
    font-weight: 400;
}

.demo-right input,
.demo-right textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
}

.demo-right textarea {
    resize: none;
    height: 100px;
}

.demo-submit {
    background: #0d6efd;
    color: #fff;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.demo-close {
    position: absolute;
    top: 12px;
    right: 15px;
    font-size: 22px;
    border: none;
    background: none;
    cursor: pointer;
}

.demo-form {
    width: 100%;
}

/* First row: Name + Email */
.form-row {
    display: flex;
    gap: 15px;
}

.form-row input {
    flex: 1;
}

/* All inputs */
.demo-form input,
.demo-form textarea {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Textarea height */
.demo-form textarea {
    resize: none;
    height: 120px;
}

/* Button */
.demo-submit {
    background: #0d6efd;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
}

/* 📱 Mobile responsive */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
}

.author-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    text-transform: uppercase;
    margin-right: 15px;
}

.pricing-plans-section .plan-price {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
}

.pricing-plans-section .plan-price .currency {
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.pricing-plans-section .plan-price .amount {
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
}

.pricing-plans-section .plan-price small {
    font-size: 14px;
    margin-left: 4px;
}