:root {
    --primary-color: #007bff;
    --primary-color-hover: #0056b3;
    --secondary-color: #6c757d;
    --background-color: #fff;
    --body-text-color: #444;
    --text-color: #444;
    --text-color-light: #555;
    --heading-color: #5247ca;
    --card-background-color: #fff;
    --border-color: rgba(0,0,0,.125);
    --input-background-color: #f9f9f9;
    --input-border-color: #ced4da;
    --danger-color: #dc3545;
    --danger-background-color: #f8d7da;
    --success-color: #28a745;
    --gradient-start: #6a11cb;
    --gradient-end: #2575fc;
    --gradient-text-start: #0056b3;
    --gradient-text-middle1: #440a9c;
    --gradient-text-middle2: #a62c64;
    --gradient-text-end: #b0590e;
    --dot-color: #ddd;
    --animated-caption-color: #004085;
    --hover-background-color-light: #e2e6ea;
    --active-background-color-light: #e9ecef;
}

.dark-mode {
    --primary-color: #0f3460;
    --primary-color-hover: #2a628f;
    --secondary-color: #6c757d;
    --background-color: #1a1a2e;
    --body-text-color: #dcdcdc;
    --text-color: #dcdcdc;
    --text-color-light: #a0a0a0;
    --heading-color: #e94560;
    --card-background-color: #16213e;
    --border-color: #2a628f;
    --input-background-color: #0f3460;
    --input-border-color: #2a628f;
    --danger-color: #ff8a80;
    --danger-background-color: #5c2b29;
    --success-color: #81c784;
    --gradient-start: #6a11cb;
    --gradient-end: #2575fc;
    --gradient-text-start: #007bff;
    --gradient-text-middle1: #440a9c;
    --gradient-text-middle2: #a62c64;
    --gradient-text-end: #007bff;
    --dot-color: var(--border-color);
    --animated-caption-color: var(--primary-color);
    --hover-background-color-dark: #2a2a2a; /* Darker hover background */
    --active-background-color-dark: #3a3a3a; /* Darker active background */
}

.dark-mode .hero {
    background: var(--background-color);
}

/* Custom CSS for layout and styling (without Bootstrap) *//* site.custom.css */

/* --- General Resets and Base Styles --- */
body {
    font-family: 'Poppins', sans-serif; /* Assumed from _Layout.cshtml */
    color: var(--body-text-color);
    background-color: var(--background-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Utility Classes (Replacing common Bootstrap utilities) --- */
.text-center { text-align: center; }
.text-primary { color: var(--primary-color); } /* Assumed primary color */
.mb-4 { margin-bottom: 1.5rem; } /* 24px */
.mb-5 { margin-bottom: 3rem; }  /* 48px */
.mt-5 { margin-top: 3rem; }   /* 48px */
.py-5 { padding-top: 3rem; padding-bottom: 3rem; } /* 48px */
.h-100 { height: 100%; } /* For card-like elements */
.lead { font-size: 1.25rem; font-weight: 300; } /* Larger, lighter text */
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075)!important; } /* Small shadow */
.rounded { border-radius: .25rem!important; } /* Standard border-radius */
.mx-auto { margin-left: auto; margin-right: auto; } /* Center block element */

/* --- Page Structure --- */
.contact-page-section {
    padding: 3rem 0; /* py-5 equivalent */
}

.page-container {
    max-width: 1200px; /* Equivalent to Bootstrap's container max-width */
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px; /* Equivalent to Bootstrap's container padding */
    padding-right: 15px;
}

.page-title {
    text-align: center;
    margin-bottom: 1.5rem; /* mb-4 equivalent */
    font-size: 2.5rem; /* h1 size */
    color: var(--heading-color);
}

.page-description {
    text-align: center;
    margin-bottom: 3rem; /* mb-5 equivalent */
    font-size: 1.25rem; /* lead equivalent */
    color: var(--text-color-light);
}

/* --- Main Content Layout (Form & Details/Map) --- */
.contact-main-content {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
    margin-left: -15px; /* Compensate for column padding */
    margin-right: -15px; /* Compensate for column padding */
    justify-content: center; /* Center content when not full width */
}

.contact-form-wrapper,
.contact-details-map-wrapper {
    flex: 0 0 100%; /* Default to full width on small screens */
    max-width: 100%;
    padding-left: 15px; /* Column padding */
    padding-right: 15px;
    margin-bottom: 1.5rem; /* mb-4 equivalent */
    box-sizing: border-box; /* Include padding in width calculation */
}

@media (min-width: 992px) { /* Equivalent to Bootstrap's lg breakpoint */
    .contact-form-wrapper,
    .contact-details-map-wrapper {
        flex: 0 0 50%; /* 50% width on large screens */
        max-width: 50%;
    }
}

/* --- Card Styling --- */
.contact-card {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color); /* Default card border */
    border-radius: .25rem; /* rounded equivalent */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); /* shadow-sm equivalent */
    padding: 1.5rem; /* card-body padding */
    height: 100%; /* h-100 equivalent */
    box-sizing: border-box; /* Include padding in height calculation */
}

.card-heading {
    font-size: 1.5rem; /* h4 equivalent */
    margin-bottom: 1rem; /* mb-3 equivalent */
    color: var(--heading-color);
}

/* --- Form Styling --- */
.contact-form .form-group {
    margin-bottom: 1rem; /* mb-3 equivalent */
}

.contact-form .form-label {
    display: inline-block;
    margin-bottom: .5rem; /* form-label equivalent */
    font-weight: bold;
}

.contact-form .form-input {
    display: block;
    width: 100%;
    padding: .375rem .75rem; /* form-control padding */
    font-size: 1rem;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--input-background-color);
    background-clip: padding-box;
    border: 1px solid var(--input-border-color);
    border-radius: .25rem; /* form-control border-radius */
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    box-sizing: border-box; /* Include padding and border in width */
}

.contact-form .form-input:focus {
    color: var(--text-color);
    background-color: var(--input-background-color);
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25);
}

.contact-form textarea.form-input {
    min-height: calc(1.5em + .75rem + 2px * 5); /* Adjust for rows="5" */
    resize: vertical; /* Allow vertical resizing */
}

.submit-button {
    display: inline-block;
    font-weight: 400;
    color: #fff;
    background-color: var(--primary-color); /* btn-primary color */
    border: 1px solid var(--primary-color);
    padding: .5rem 1rem; /* btn-lg padding */
    font-size: 1.25rem; /* btn-lg font-size */
    line-height: 1.5;
    border-radius: .3rem; /* btn-lg border-radius */
    cursor: pointer;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none; /* Ensure no underline */
}

.submit-button:hover {
    color: #fff;
    background-color: var(--primary-color-hover); /* Darker blue on hover */
    border-color: var(--primary-color-hover);
}

/* --- Contact Info Block --- */
.contact-info-block {
    margin-bottom: 1.5rem; /* mb-3 equivalent */
}

.contact-info-item {
    display: flex; /* For icon and text alignment */
    align-items: flex-start; /* Align text to top if wrapping */
    margin-bottom: .5rem; /* mb-1 equivalent */
    color: var(--text-color-light);
    font-size: 1rem;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    font-size: 1.1rem; /* Adjust icon size */
    margin-right: .5rem; /* me-2 equivalent */
    flex-shrink: 0; /* Prevent icon from shrinking */
    width: 1.2rem; /* Fixed width for icon alignment */
    text-align: center;
    color: var(--primary-color); /* text-primary equivalent */
}

.contact-info-item strong {
    font-weight: bold;
}

/* --- Map Embed --- */
.map-embed {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio (height / width * 100) */
    height: 0;
    overflow: hidden;
    margin-bottom: 1.5rem; /* Equivalent to mb-3 from original <div class="mb-3"> */
}

.map-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: .25rem; /* rounded equivalent */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); /* shadow-sm equivalent */
}

/* --- FAQ Section --- */
.faq-section {
    margin-top: 3rem; /* mt-5 equivalent */
}

.faq-heading {
    margin-bottom: 1rem; /* mb-3 equivalent */
    text-align: center;
    font-size: 2rem; /* h2 size */
    color: var(--heading-color);
}

.accordion-container {
    max-width: 800px; /* col-lg-10 mx-auto approximate width */
    margin-left: auto;
    margin-right: auto;
}

.accordion-item {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color);
    border-radius: .25rem;
    margin-bottom: 10px; /* Space between items */
    overflow: hidden; /* For border-radius on content */
}

.accordion-title {
    margin-bottom: 0; /* Remove default h2 margin */
    display: flex; /* Use flex to align button */
}

.accordion-button {
    display: block; /* Full width */
    width: 100%;
    padding: 1rem 1.25rem; /* accordion-button padding */
    font-size: 1.1rem;
    font-weight: 500;
    text-align: left;
    background-color: var(--input-background-color); /* Light background for button */
    border: none;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--heading-color);
}

.accordion-button:hover {
    background-color: var(--hover-background-color-light);
}

/* For expanded state (requires JS to add/remove 'active' class) */
.accordion-button.active {
    background-color: var(--active-background-color-light);
    border-bottom-color: transparent;
}

.accordion-content {
    display: none; /* Hidden by default */
    padding: 0 1.25rem; /* accordion-body padding */
    overflow: hidden; /* For slide effect */
    transition: max-height 0.3s ease-out, padding 0.3s ease-out; /* Smooth transition */
}

.accordion-content.active {
    display: block; /* Show when active */
}

.accordion-body {
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: var(--text-color-light);
    font-size: 1rem;
}

/* --- Pricing Page Specific Styles --- */
.pricing-page-section {
    padding: 3rem 0;
}

.pricing-page-section .pricing-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between cards */
    margin-top: 3rem; /* Equivalent to mt-5 */
    margin-bottom: 3rem;
}

.pricing-page-section .pricing-card {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color);
    border-radius: .25rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
    text-align: center;
    padding-bottom: 1.5rem; /* Ensure space for button */
    display: flex; /* For internal layout */
    flex-direction: column; /* Stack header, body, button */
    width: 100%; /* Default to full width on small screens */
    max-width: 300px; /* Max width for each card */
    box-sizing: border-box; /* Include padding/border in width */
}

@media (min-width: 768px) { /* Approximate md breakpoint */
    .pricing-page-section .pricing-card {
        flex: 0 0 calc(50% - 15px); /* Two cards per row */
        max-width: calc(50% - 15px);
    }
}

@media (min-width: 992px) { .pricing-page-section .pricing-card {
        flex: 0 0 calc(33.333% - 20px); /* Three cards per row */
        max-width: calc(33.333% - 20px);
    }
}

.pricing-page-section .pricing-card.professional-plan {
    border-color: var(--primary-color); /* Primary color border for professional plan */
}

.pricing-page-section .pricing-card-header {
    background-color: var(--primary-color); /* bg-primary equivalent */
    color: #fff; /* text-white equivalent */
    padding: 1rem;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    margin-bottom: 0;
}

.pricing-page-section .plan-title {
    font-size: 1.25rem; /* h4 equivalent */
    margin: 0;
    font-weight: 400; /* font-weight-normal */
}

.pricing-page-section .pricing-card-body {
    padding: 1.5rem;
    flex-grow: 1; /* Allow body to grow and push button down */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pricing-page-section .price-display {
    font-size: 2.5rem; /* h1 equivalent */
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.pricing-page-section .price-period {
    font-size: 80%; /* small equivalent */
    color: var(--secondary-color); /* text-muted equivalent */
}

.pricing-page-section .feature-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    flex-grow: 1; /* Allow list to grow */
}

.pricing-page-section .feature-list li {
    margin-bottom: .5rem;
    font-size: 1rem;
    color: var(--text-color-light);
}

.pricing-page-section .feature-list li:last-child {
    margin-bottom: 0;
}

/* --- Button Styles (General) --- */
.pricing-page-section .choose-plan-button,
.pricing-page-section .action-button {
    display: block; /* Full width for block buttons */
    width: 100%;
    padding: .8rem 1.25rem; /* btn-lg padding */
    font-size: 1.25rem; /* btn-lg font-size */
    line-height: 1.5;
    border-radius: .3rem;
    cursor: pointer;
    text-align: center;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
    font-weight: 400;
}

/* Primary Button */
.pricing-page-section .primary-button {
    color: #fff;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.pricing-page-section .primary-button:hover {
    background-color: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
}

/* Outline Button */
.pricing-page-section .outline-button {
    color: var(--primary-color);
    background-color: transparent;
    border: 1px solid var(--primary-color);
}

.pricing-page-section .outline-button:hover {
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Success Button (for Get a Custom Quote) */
.pricing-page-section .success-button {
    color: #fff;
    background-color: var(--success-color); /* btn-success equivalent */
    border: 1px solid var(--success-color);
    padding: .8rem 1.5rem; /* Adjust padding for custom quote button */
    font-size: 1.25rem; /* btn-lg font-size */
    display: inline-block; /* For centering */
    width: auto; /* Override block display */
}

.pricing-page-section .success-button:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
}

/* --- Custom Solution Section --- */
.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin-top: 3rem; /* my-5 equivalent */
    margin-bottom: 3rem;
}

.custom-solution-section {
    max-width: 800px; /* col-md-8 mx-auto equivalent */
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-top: 3rem; /* mt-5 equivalent */
    margin-bottom: 3rem;
}

.section-heading {
    font-size: 2rem; /* h2 equivalent */
    margin-bottom: 1rem; /* mb-3 equivalent */
    color: var(--heading-color);
}

.section-description {
    font-size: 1.25rem; /* lead equivalent */
    margin-bottom: 1.5rem;
    color: var(--text-color-light);
}

.pricing-page-section .custom-solution-section .action-button {
    width: auto; /* Override full width to be inline-block */
    display: inline-block;
}
.contact-page-section,
.pricing-page-section {
    padding-top: 90px; /* Increased adjustment for fixed navbar height */
}
/* --- Card Header/Body Styling --- */
.card-header-custom {
    background-color: var(--input-background-color); /* Light background */
    padding: 1rem 1.5rem; /* Padding for header */
    border-bottom: 1px solid var(--border-color); /* Separator */
    border-top-left-radius: .25rem; /* Match card radius */
    border-top-right-radius: .25rem; /* Match card radius */
    margin-bottom: 0; /* No margin below header */
}

.card-header-custom:not(:first-child) {
    border-top: none; /* Remove top border if not the first header in a card */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.card-body-custom {
    padding: 1.5rem; /* Padding for body */
    flex-grow: 1; /* Allow body to grow in flex container */
}

/* Adjust card-heading within header */
.card-header-custom .card-heading {
    margin-top: 0;
    margin-bottom: 0; /* Remove default margin from heading within header */
    font-size: 1.25rem; /* Slightly smaller heading in header */
}

/* --- ERP Page Specific Styles --- */
.erp-page-section {
    padding-top: 90px; /* Adjust for fixed navbar height, consistent with contact/pricing */
    padding-bottom: 3rem;
}

.feature-block-section {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.feature-block {
    display: flex;
    flex-wrap: wrap; /* Allows stacking on smaller screens */
    align-items: center; /* Vertically align content */
    margin-bottom: 3rem; /* Space between blocks */
}

.feature-block:last-of-type {
    margin-bottom: 0;
}

.feature-block-content,
.feature-block-image {
    flex: 0 0 100%; /* Default to full width on small screens */
    max-width: 100%;
    padding: 15px; /* Spacing within the block */
    box-sizing: border-box;
}

@media (min-width: 768px) { /* Approximate md breakpoint */
    .feature-block-content,
    .feature-block-image {
        flex: 0 0 50%; /* 50% width on medium and large screens */
        max-width: 50%;
    }

    .feature-block.reverse-order {
        flex-direction: row-reverse; /* Swap order for image/text */
    }
}

.feature-heading {
    font-size: 1.8rem; /* h2/h4 equivalent */
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.feature-block-content p {
    margin-bottom: 1rem;
    color: var(--text-color-light);
    line-height: 1.6;
}

.feature-block-content ul {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.feature-block-content ul li {
    margin-bottom: .5rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-color-light);
}

.feature-block-content ul li:last-child {
    margin-bottom: 0;
}

.feature-block-content ul li::before {
    content: "\f00c"; /* Font Awesome check icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--success-color); /* Green checkmark */
    position: absolute;
    left: 0;
    top: 0;
}

.responsive-image {
    max-width: 100%;
    height: auto;
    display: block; /* Remove extra space below image */
    border-radius: .25rem; /* rounded equivalent */
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075); /* shadow-sm equivalent */
}

.solution-links-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.solution-links-list li {
    margin-bottom: .5rem;
}

.solution-links-list li a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.solution-links-list li a:hover {
    color: var(--primary-color-hover);
    text-decoration: underline;
}

/* --- Call to Action Section --- */
.call-to-action-section {
    text-align: center;
    margin-top: 3rem;
    padding: 2rem;
    background-color: var(--input-background-color);
    border-radius: .25rem;
    box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}

.cta-text {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--heading-color);
    font-weight: bold;
}
/* --- Login Page Specific Styles --- */
.login-container {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px 40px;
    box-sizing: border-box; /* Ensure padding is included in height */
    padding-top: 40px;
}

.login-card {
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    max-width: 900px;
    width: 100%;
    background: var(--card-background-color);
}

.login-branding {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 45%;
    box-sizing: border-box; /* Include padding in width */
}

.login-branding .logo {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.login-branding .logo .brand {
    color: #fff;
}

.login-branding .logo .plus {
    color: #c8ff00; /* A bright accent color */
}

.login-branding p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.login-form-wrapper {
    padding: 50px;
    width: 55%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box; /* Include padding in width */
}

.login-form-wrapper h2 {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--heading-color);
}

.login-form-wrapper .form-group { /* Use login-form-wrapper for specificity */
    position: relative;
    margin-bottom: 25px;
}

.login-form-wrapper .form-control { /* Use login-form-wrapper for specificity */
    height: 50px;
    border-radius: 25px;
    padding: 0 25px 0 60px;
    border: 1px solid var(--input-border-color);
    background: var(--input-background-color);
    transition: all 0.3s ease;
    width: 100%; /* Ensure it takes full width */
    box-sizing: border-box; /* Include padding in width */
}

.login-form-wrapper .form-control:focus {
    box-shadow: 0 0 10px rgba(106, 17, 203, 0.2);
    border-color: var(--gradient-start);
    background: var(--card-background-color);
}

.login-form-wrapper .form-group .input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--text-color-light);
    transition: color 0.3s ease;
}

.login-form-wrapper .form-control:focus + .input-icon {
    color: var(--gradient-start);
}

.btn-login {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box; /* Include padding in width */
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.login-form-wrapper .links a { /* Specificity for links within form wrapper */
    color: var(--gradient-start);
    text-decoration: none;
    font-weight: 500;
}

.login-form-wrapper .links a:hover {
    color: #4a0a8f; /* A darker shade of the default link color */
    text-decoration: underline;
}

.login-form-wrapper .footer-links { /* Specificity for footer links within form wrapper */
    text-align: center;
    margin-top: 20px;
}

.custom-alert.danger { /* Custom alert style */
    background-color: var(--danger-background-color);
    color: var(--danger-color);
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--danger-color);
    border-radius: .25rem;
}

.text-danger-custom { /* Custom text danger style */
    color: var(--danger-color); /* Bootstrap's red */
    font-size: 0.875em; /* Smaller font size for validation */
    display: block; /* Ensure it appears on its own line */
    margin-top: 0.25rem; /* Small margin above */
}

.ml-2-custom { /* Custom margin left */
    margin-left: .5rem; /* 8px */
}
@media (max-width: 768px) {
    .login-card {
        flex-direction: column;
    }
    .login-branding, .login-form-wrapper {
        width: 100%;
    }
    .login-branding {
        padding: 30px;
    }
    .login-form-wrapper {
        padding: 30px;
    }
    .login-container {
        padding: 30px 20px; /* Adjust for mobile view */
        min-height: auto; /* Allow height to adjust */
    }
}
.mt-3-custom {
    margin-top: 1rem; /* 16px */
}
/* --- Signup Page Specific Styles --- */
.signup-page-background { /* Custom class for specific background on body */
    background-color: #ffffff33!important;
}
.signup-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    box-sizing: border-box;
    padding-top: 90px; /* Adjust for navbar */
    padding-bottom: 90px; /* Adjust for footer */
}
.signup-card {
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    display: flex;
    max-width: 1100px;
    width: 100%;
    background: var(--card-background-color);
    margin-top: 43px;
}
.signup-branding {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 40%;
    box-sizing: border-box;
}
.signup-branding .logo {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.signup-branding .logo .brand {
    color: #fff;
}

.signup-branding .logo .plus {
    color: #c8ff00; /* A bright accent color */
}

.signup-branding p {
    font-size: 1.1rem;
    line-height: 1.6;
}

.signup-form-wrapper {
    padding: 50px;
    width: 60%;
    box-sizing: border-box;
}
.signup-form-wrapper h2 {
    font-weight: 600;
    font-size: 2rem;
    margin-bottom: 30px;
    color: var(--heading-color);
}
.signup-form-wrapper .form-control { /* Specificity for inputs within form wrapper */
    height: 50px; /* Consistent with login page */
    border-radius: 25px;
    padding: 0 25px 0 60px; /* Consistent with login page */
    border: 1px solid var(--input-border-color);
    background: var(--input-background-color); /* Consistent with login page */
    transition: all 0.3s ease; /* Added to match login page */
    width: 100%; /* Ensure full width */
    box-sizing: border-box;
}

.signup-form-wrapper select.form-control { /* Specificity for select within form wrapper */
    /* Inherits styling from .signup-form-wrapper .form-control */
    /* All padding should come from the general .signup-form-wrapper .form-control rule */
}

.signup-form-wrapper select.form-control:focus {
    border-color: var(--gradient-start);
    box-shadow: 0 0 10px rgba(106, 17, 203, 0.2);
}
.btn-signup {
    background: linear-gradient(45deg, var(--gradient-start), var(--gradient-end));
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}
.login-link {
    text-align: center;
    margin-top: 20px;
}

/* Custom grid for form-row and col equivalent */
.form-grid-row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px; /* Adjust for column padding */
    margin-right: -10px; /* Adjust for column padding */
}

.form-grid-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
    margin-bottom: 1rem; /* Spacing between columns when stacked */
}

@media (min-width: 768px) { /* md breakpoint for columns */
    .form-grid-col {
        flex: 0 0 50%; /* Two columns */
        max-width: 50%;
        margin-bottom: 0; /* No margin when side-by-side */
    }
}
.form-grid-row .form-group {
    margin-bottom: 0; /* Remove default margin for groups inside grid */
}

.mt-4-custom { /* Custom margin top for signup button */
    margin-top: 1.5rem; /* 24px */
}
@media (max-width: 768px) {
    .signup-card {
        flex-direction: column;
    }
    .signup-branding, .signup-form-wrapper {
        width: 100%;
        padding: 30px; /* Adjust padding for mobile */
    }
    .signup-container {
        padding: 30px 20px; /* Adjust container padding for mobile */
        min-height: auto; /* Allow height to adjust */
    }
}
.signup-form-wrapper .form-group {
    position: relative; /* Crucial for absolute positioning of input-icon */
    margin-bottom: 25px; /* Consistent spacing with login page */
}
.signup-form-wrapper hr {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.signup-form-wrapper .form-group .input-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: var(--text-color-light);
    transition: color 0.3s ease;
}

.signup-form-wrapper .form-control:focus + .input-icon {
    color: var(--gradient-start);
}

/* --- Styles from ForgetPassword.cshtml --- */
.password-reset-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: var(--input-background-color);
    padding-top: 120px; /* Added for navbar overlap */
    padding-bottom: 25px; /* Add some padding at the bottom for aesthetic */
}

@media (max-width: 768px) {
    .password-reset-container {
        padding: 30px 20px; /* Adjust padding for mobile view */
        min-height: auto; /* Allow height to adjust */
        align-items: flex-start; /* Align to top on mobile */
    }

    .password-reset-card {
        padding: 25px; /* Smaller padding on mobile */
    }
}

.password-reset-card {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    background-color: var(--card-background-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.password-reset-card .brand-logo {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.password-reset-card .brand-logo .brand {
    color: var(--heading-color);
}

.password-reset-card .brand-logo .plus {
    color: var(--primary-color);
}

.password-reset-card h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.password-reset-card .subtitle {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
}

.form-group {
    position: relative;
    margin-bottom: 20px;
}

.form-group .form-control {
    height: 50px;
    padding-left: 50px;
    border-radius: 8px;
    border: 1px solid var(--input-border-color);
    transition: border-color 0.3s ease;
}

.form-group .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.input-wrapper {
    position: relative;
}

.input-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-color);
    font-size: 1.1rem;
}

.field-validation-error {
    color: var(--danger-color);
    font-size: 0.875em;
    margin-top: 0.25rem;
    display: block;
}

.btn-primary {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--primary-color);
    border: none;
    transition: background-color 0.3s ease;
}

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

.back-to-login {
    margin-top: 20px;
    font-size: 0.9rem;
}

.back-to-login a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.back-to-login a:hover {
    text-decoration: underline;
}

/* --- Styles from EmailConfirmation.cshtml --- */
.email-confirmation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: var(--input-background-color);
    padding-top: 120px; /* Added for navbar overlap */
    padding-bottom: 25px; /* Add some padding at the bottom for aesthetic */
}

@media (max-width: 768px) {
    .email-confirmation-container {
        padding: 30px 20px; /* Adjust padding for mobile view */
        min-height: auto; /* Allow height to adjust */
        align-items: flex-start; /* Align to top on mobile */
    }

    .email-confirmation-card {
        padding: 25px; /* Smaller padding on mobile */
    }
}

.email-confirmation-card {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    background-color: var(--card-background-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.email-confirmation-card .brand-logo {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.email-confirmation-card .brand-logo .brand {
    color: var(--heading-color);
}

.email-confirmation-card .brand-logo .plus {
    color: var(--primary-color);
}

.email-confirmation-card h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.email-confirmation-card .subtitle {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
}

/* --- Styles from ForgetPasswordOTP.cshtml --- */
.otp-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    background-color: var(--input-background-color);
    padding-top: 120px; /* Added for navbar overlap */
    padding-bottom: 25px; /* Add some padding at the bottom for aesthetic */
}

@media (max-width: 768px) {
    .otp-container {
        padding: 30px 20px; /* Adjust padding for mobile view */
        min-height: auto; /* Allow height to adjust */
        align-items: flex-start; /* Align to top on mobile */
    }

    .otp-card {
        padding: 25px; /* Smaller padding on mobile */
    }
}

.otp-card {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    background-color: var(--card-background-color);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.otp-card .brand-logo {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.otp-card .brand-logo .brand {
    color: var(--heading-color);
}

.otp-card .brand-logo .plus {
    color: var(--primary-color);
}

.otp-card h2 {
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--heading-color);
}

.otp-card .subtitle {
    font-size: 1rem;
    color: var(--secondary-color);
    margin-bottom: 30px;
}
/* --- Styles from Index.cshtml --- */
.animated-gradient {
    background: linear-gradient(to right, var(--gradient-text-start), var(--gradient-text-middle1), var(--gradient-text-middle2), var(--gradient-text-end), var(--gradient-text-start));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% auto;
    animation: gradient-animation 5s linear infinite;
}

@@keyframes gradient-animation {
    to {
        background-position: -200% center;
    }
}
.animated-gradient span span {
    display: inline-block; /* Ensure proper rendering for nested spans with text-fill-color */
}
/* General Layout */

.container-fluid {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

section {
    padding: 80px 0; /* Increased padding */
}

.section-title {
    font-size: 2.8rem; /* Increased font size */
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px; /* Increased margin */
    color: var(--heading-color); /* Darker color for headings */
}

.section-subtitle {
    font-size: 1.2rem; /* Increased font size */
    text-align: center;
    margin-bottom: 50px; /* Increased margin */
    color: var(--text-color); /* Even deeper font color */
}

.hero-subtitle .bold-subtitle-text {
    font-weight: 700;
    color: var(--heading-color); /* Deeper font color */
}

/* Hero Section */
.hero {
    position: relative;
    background: linear-gradient(to right, rgba(0, 123, 255, 0.05), rgba(0, 86, 179, 0.05));
    padding: 100px 0; /* Increased padding */
    min-height: 70vh; /* Fixed height for the hero section */
}

/* Features Section */
.feature-card {
    background-color: var(--card-background-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    text-decoration: none; /* No underline for links */
}

    .feature-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 25px rgba(0,0,0,0.1);
        background-color: var(--input-background-color);
        text-decoration: none !important; /* Force no underline on hover */
    }
@* 
.feature-icon i {
    color: var(--primary-color);
} *@

/* Pricing Section */
.pricing-card {
    background-color: var(--card-background-color);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid var(--border-color);
}

    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 35px rgba(0,0,0,0.1);
    }

    .pricing-card.popular {
        border-color: var(--primary-color);
        transform: scale(1.05);
    }

    .pricing-card .btn-outline:hover {
        background-color: var(--primary-color-hover);
        color: #fff;
    }

/* Testimonials */
.testimonial {
    transition: opacity 0.5s ease-in-out;
}

/* Testimonials Section */
.testimonial-slider .slider-controls {
    margin-top: 20px;
}

.testimonial-slider .dots .dot {
    background-color: var(--dot-color);
    transition: background-color 0.3s ease;
}

    .testimonial-slider .dots .dot.active {
        background-color: var(--primary-color);
    }

.testimonial-slider .prev, .testimonial-slider .next {
    background-color: var(--primary-color);
    color: #fff;
}

    .testimonial-slider .prev:hover, .testimonial-slider .next:hover {
        background-color: var(--primary-color-hover);
    }


/* Contact Section Styling */
.contact {
    padding: 80px 0;
    background-color: var(--input-background-color); /* Light background for the section */
}

    .contact .container-fluid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px; /* Space between content and map */
        justify-content: center;
        align-items: flex-start;
    }

.contact-content {
    flex: 1;
    min-width: 300px; /* Minimum width for form */
    max-width: 500px; /* Max width for form */
    background-color: var(--card-background-color);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

    .contact-content .section-title,
    .contact-content .section-subtitle {
        text-align: left; /* Align text left within the card */
        margin-left: 0;
        margin-right: 0;
    }

.form-group {
    margin-bottom: 20px;
    position: relative;
}

    .form-group input,
    .form-group textarea {
        width: 100%;
        padding: 12px 15px 12px 45px; /* Adjust padding for icon */
        border: 1px solid var(--input-border-color);
        border-radius: 5px;
        font-size: 1rem;
        transition: border-color 0.3s ease;
    }

                .form-group textarea:focus {
                    border-color: var(--primary-color);
                    outline: none;
                    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
                }
        
                .form-group input.is-invalid,
                .form-group textarea.is-invalid {
                    border-color: var(--danger-color);
                }
        
                .form-group input.is-invalid:focus,
                .form-group textarea.is-invalid:focus {
                    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
                }
.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondary-color);
}

.form-group textarea.input-icon ~ textarea { /* Adjust icon for textarea to align top */
    padding-top: 10px;
    padding-bottom: 10px;
    min-height: 120px;
}

/* Button Styling */
.btn-primary {
    display: inline-block;
    background-color: var(--primary-color);
    color: #fff;
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Ensure no underline for links */
}

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

.map-container {
    flex: 1;
    min-width: 300px;
    max-width: 600px; /* Max width for map and info */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .map-container iframe {
        width: 100%;
        height: 400px;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

.contact-info {
    background-color: var(--card-background-color);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .info-item:last-child {
        margin-bottom: 0;
    }

    .info-item i {
        font-size: 1.5rem;
        color: var(--primary-color);
        margin-right: 15px;
        width: 30px; /* Fixed width for icon alignment */
        text-align: center;
    }

    .info-item p {
        margin: 0;
        font-size: 1rem;
        color: var(--heading-color);
    }

/* Hero section button */
.cta-buttons {
    display: flex;
    justify-content: center; /* Center the buttons horizontally */
    gap: 15px; /* Space between buttons */
}

.cta-buttons .btn-primary, .cta-buttons .btn-secondary {
    display: inline-flex; /* Use inline-flex for alignment */
    flex: 1; /* Make buttons take equal width */
    max-width: fit-content; /* Prevent buttons from growing excessively */
    align-items: center; /* Vertically center content */
    justify-content: center; /* Horizontally center content */
    height: 50px; /* Set a fixed height */
    padding: 0 30px; /* Adjust padding to be horizontal only */
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.cta-buttons .btn-primary {
    background-color: var(--primary-color);
    color: #fff;
    border: 1px solid var(--primary-color);
}

    .cta-buttons .btn-primary:hover {
        background-color: var(--primary-color-hover);
        border-color: var(--primary-color-hover);
    }

.cta-buttons .btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

                            .cta-buttons .btn-secondary:hover {

                                background-color: var(--primary-color);

                                color: #fff;

                            }

                

                        .txt-rotate > .wrap {

                            border-right: 0.08em solid #666;

                        }

    

            .slideshow-image {

                position: absolute;

                top: 0;

                left: 0;

                width: 100%;

                height: 100%;

                opacity: 0;

                transition: opacity 1s ease-in-out;

            }

    

            .slideshow-image.active {

                opacity: 1;

            }

    

            .hero-image {

                position: relative;

                height: 500px; /* Adjust as needed */

            }

.feature-item-compact {
    background-color: var(--card-background-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    min-height: 100px; /* Ensure consistent height */
    text-decoration: none !important; /* Force no underline */
}
.feature-item-compact:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    background-color: var(--input-background-color); /* Light gray background on hover */
    color: var(--primary-color-hover) !important; /* Ensure text color changes on hover */
    text-decoration: none !important; /* Ensure no underline on hover */
}
.feature-item-compact .feature-icon {
    display: flex; /* Make icon container a flex item */
    align-items: center; /* Vertically align icon */
    height: 100%; /* Ensure icon container takes full height if needed */
}
.feature-item-compact .feature-icon i {
    font-size: 1.8rem; /* Slightly larger icon */
    color: var(--primary-color);
}
.feature-item-compact h3 {
    display: flex; /* Make h3 a flex item */
    align-items: center; /* Vertically align text */
    margin-bottom: 0; /* Ensure no extra margin */
    flex-grow: 1; /* Allow text to take available space */
    text-align: left; /* Align text to the left */
}

.solution-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Smaller min-width for more items */
    gap: 15px; /* Reduced gap */
}
.solution-grid .feature-card {
    padding: 20px 15px; /* Reduced padding for smaller cards */
}
.solution-grid .feature-card .feature-icon {
    font-size: 1.2rem; /* Smaller icon size */
    width: 60px; /* Smaller icon container */
    height: 60px;
    margin-bottom: 15px; /* Adjusted margin */
}
.solution-grid .feature-card h3 {
    font-size: 1rem; /* Smaller heading text */
}
.solution-grid .feature-card {
    text-decoration: none; /* No underline for links */
}
.solution-grid .feature-card:hover {
    text-decoration: none !important; /* Force no underline on hover */
    background-color: #e6f2ff; /* Light blue background on hover */
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2); /* Subtle blue shadow */
    color: var(--primary-color); /* Primary blue text color */
    transform: none; /* Remove lift effect */
}
.solution-grid .feature-card:hover .feature-icon {
    background-color: var(--primary-color); /* Icon background to primary blue */
    color: white; /* Icon color to white */
}

#animated-caption .wrap {
    color: var(--animated-caption-color); /* Deep blue color */
    font-weight: bold;
    font-size: 1.5em; /* Larger font size */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* Subtle text shadow */
}
@media (max-width: 768px) {
    .cta-buttons .btn-primary, .cta-buttons .btn-secondary {
        display: block;
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }
}/* --- Styles from _Layout.cshtml --- */
ul li {
    display: inline-block;
}

/* Flex layout for navbar container */
.glass-nav .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px 20px;
}

/* Group left and center */
.language-switcher,
.logo,
.nav-links {
    display: flex;
    align-items: center;
}

    /* Space between nav items */
    .nav-links li {
        margin: 0 10px;
        list-style: none;
    }

/* Ensure nav-links list stays in row */
.nav-links {
    display: flex;
    flex: 1;
    justify-content: center;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
}

/* Auth buttons stay on right */
.auth-buttons {
    display: flex;
    gap: 10px;
    white-space: nowrap;
}

    /* Buttons themselves */
    .auth-buttons .btn {
        padding: 6px 14px;
        border-radius: 20px;
        font-weight: bold;
        background-color: rgba(206, 205, 247, 0.4);
        transition: all 0.3s ease;
        border: 1px solid transparent;
        text-decoration: none;
        font-size: 14px;
    }

/* Optional: Adjust button spacing on very small screens */
@@media (max-width: 480px) {
    .auth-buttons .btn {
        padding: 5px 10px;
        font-size: 13px;
    }
}

.logo a, .logo a:hover {
    text-decoration: none;
}
/* --- Theme Switcher --- */
.theme-switcher {
    margin-left: 15px;
}

.theme-btn {
    background: none;
    border: none;
    color: var(--text-color);
    cursor: pointer;
    font-size: 1.2rem;
}.dark-mode .accordion-button:hover {
    background-color: var(--hover-background-color-dark);
}

.dark-mode .accordion-button.active {
    background-color: var(--active-background-color-dark);
}
.dark-mode .bg-light {
    background-color: var(--card-background-color) !important;
}
.dark-mode .clients,
.dark-mode .features,
.dark-mode .team,
.dark-mode .pricing {
    background: var(--background-color) !important;
}

.dark-mode .pricing-card,
.dark-mode .team-member,
.dark-mode .testimonial {
    background: var(--card-background-color);
}
.dark-mode .glass-nav.scrolled {
    background: rgba(15, 52, 96, 0.9); /* A dark blue transparent background */
}

.dark-mode .glass-nav.scrolled .brand,
.dark-mode .glass-nav.scrolled .plus,
.dark-mode .glass-nav.scrolled .nav-links a,
.dark-mode .glass-nav.scrolled .mobile-menu-btn {
    color: var(--text-color);
}
.dark-mode .glass-nav {
    background: rgba(15, 52, 96, 0.8); /* A dark blue transparent background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark-mode .brand,
.dark-mode .plus,
.dark-mode .nav-links a,
.dark-mode .mobile-menu-btn {
    color: var(--text-color);
}
.feature-card h3 {
    color: var(--heading-color);
}
.dark-mode .form-group input,
.dark-mode .form-group textarea {
    color: var(--text-color);
    background-color: var(--input-background-color);
    border-color: var(--input-border-color);
}
.dark-mode .testimonial {
    color: var(--text-color);
}