/* Navbar logo alignment */
.navbar-brand img {
    vertical-align: middle;
}

/* Hero section full width styling */
.section-hero {
    width: 100vw;
    margin-top: -1.5rem; /* Negative margin to remove gap with navbar */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

/* Keep your existing styles */

.upload-container {
    /* width: 80%; */ /* Remove this, width controlled by grid column now */
    /* margin: 0 auto; */ /* Remove this, centering handled by grid */
    padding: 0; /* Removed padding as it's handled by the column/container */
}

.upload-area {
    border: 2px dashed var(--bs-border-color);
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--bs-body-bg);
    position: relative;
}

.upload-area:hover,
.upload-area:focus {
    border-color: var(--bs-primary);
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.upload-area.dragging {
    border-color: var(--bs-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

/* Adjust table background if needed based on section background */
/* Example: If table is on a light background */
#resultTable {
    background-color: var(--bs-white); /* Or var(--bs-body-bg) */
    color: var(--bs-body-color); /* Use default text color */
}
#resultTable th, #resultTable td {
     border-color: var(--bs-border-color);
 }


/* Adjust lead icon color for dark background */
.section-hero .lead .feature-icon {
    /* If SVGs are single color, you might need filter or different SVGs */
    /* For Bootstrap Icons or font icons, this would work: */
    /* color: var(--bs-primary); */ /* Adjust if primary doesn't contrast well on black */
    filter: brightness(1.5); /* Example: Make SVG brighter if it's dark */
}

/* Remove padding from the old .features-section class if it exists */
/* .features-section { padding: 0; } */ /* Padding now on .section-features */

/* Keep icon circle styles */
.icon-circle {
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    line-height: 1;
}

/* Ensure SVG icons inside circles are visible */
.icon-circle img {
    max-width: 65%; /* Increased from 50% */
    max-height: 65%; /* Increased from 50% */
    display: block;
}



/* Trusted By Section Styles */
.logo-container {
    gap: 2rem; /* Space between logos, and between rows when they wrap */
    /* width: 100%; -- Handled by being inside a Bootstrap column */
    /* padding: 0; margin: 0; -- Defaults are usually fine, or already handled by Bootstrap */
}

.trusted-logo {
    height: 32px;         /* Set your desired consistent height. Adjust e.g., 35px, 45px. */
    width: auto;          /* Allows width to adjust based on aspect ratio and height. */
    object-fit: contain;  /* Ensures logo scales correctly if source is larger, maintains aspect ratio. */
    opacity: 0.75;
    transition: opacity 0.3s ease;
    vertical-align: middle; /* Good for consistent baseline alignment within the flex line. */
    /* NO max-width here to allow logos to achieve the full specified height. */
}

.trusted-logo:hover {
    opacity: 1;
}



/* Feature Icons in Hero Section */
.feature-icon {
    width: 24px; /* Maintain size */
    height: 24px;
    margin-right: 15px;
    vertical-align: -5px;
    /* Ensure visibility on dark background if needed */
    /* filter: invert(1) sepia(1) saturate(5) hue-rotate(175deg); */ /* Example filter to make it blueish */
}


/* Keep video styles */
.video-container {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 8px;
    /* background: var(--bs-dark); No longer needed if section bg is dark */
}
.feature-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Responsive adjustments for features */
@media (max-width: 767px) {
    .section-features .row {
        text-align: center !important;
        /* flex-direction: column; /* Bootstrap handles this */
    }
    .section-features .col-md-2 {
        margin-bottom: 1rem;
        /* order: 1; /* Bootstrap's default order is fine */
    }
    .section-features .col-md-10 {
        text-align: center !important;
         /* order: 2; */
    }
    /* Adjust reversed row text alignment on mobile */
    .section-features .row.flex-md-row-reverse .col-md-10 {
        text-align: center !important;
    }

    .icon-circle {
        width: 60px;
        height: 60px;
    }
}

/* Social Proof Section Styles */
.conversion-counter .counter-number {
    color: var(--bs-primary);
    font-weight: 800;
}

.star-rating {
    font-size: 1.5rem;
    letter-spacing: 0.2rem;
}

.star-rating-large {
    font-size: 2.5rem;
    letter-spacing: 0.3rem;
}

.social-proof-text {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--bs-body-color);
}

.testimonial-card {
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

.testimonial-quote i {
    opacity: 0.7;
}

.testimonial-text {
    font-size: 0.95rem;
    line-height: 1.6;
    font-style: italic;
}

.author-stars {
    font-size: 0.85rem;
}

/* Other styles (about page, founders) remain unchanged */
.about-image, .founders-image {
    max-width: 50%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.bg-pure-black {
  background-color: #000000; /* Pure black */
}
.pricing-card {
    border-radius: 1rem;
    transition: all 0.3s ease;
}
.pricing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.bg-gradient-pro {
    background: linear-gradient(135deg, #ffe680, #ffcc00);
    color: #212529;
}
.most-popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffcc00;
    color: #212529;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 50px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.original-price {
    font-size: 0.9rem;
    color: #888;
}
.discounted-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}
.discounted-price .display-5 {
    font-size: 2.2rem;
}
.discount-tag {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #28a745;
    font-weight: 600;
}