:root {
    /* New Color Palette */
    /* --primary-color: #ae071a; */
    --primary-color: #646262;
    --secondary-color: #c1a500;
    --dark-color: #000000;

    /* Supporting Colors */
    --light-gray: #f8f9fa;
    --white: #FFFFFF;
    --shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
    --border-radius: 12px;

    --input-border: #ced4da;
    --input-focus-border: #80bdff;
    --success-color: #28a745;
    --error-color: #dc3545;

}


body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark-color);
    line-height: 1.7;
}

/* --- Header --- */
.navbar {
    transition: all 0.3s ease;
}

.navbar-brand {
    font-weight: 700;
    font-size: 1.5rem;
}

.navbar-brand i {
    color: var(--primary-color);
}

.navbar-brand img {
    max-height: 40px;
}

.nav-link {
    font-weight: 500;
}

/* --- Hero Section --- */
.hero-section {
    background: linear-gradient(rgba(46, 44, 44, 0.8), rgba(68, 67, 67, 0.8)), url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80') no-repeat center center/cover;
    color: var(--white);
    padding: 180px 0 120px;
    text-align: center;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

#countdown-timer {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
}

.timer-box {
    background: rgba(255, 255, 255, 0.1);
    padding: 15px 25px;
    border-radius: var(--border-radius);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.timer-box span {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
}

.timer-box p {
    margin: 0;
    font-size: 0.9rem;
    text-transform: uppercase;
}

#social-proof {
    font-size: 1.2rem;
    font-weight: 500;
    margin: 20px 0 30px;
    padding: 10px 20px;
    background-color: rgba(193, 165, 0, 0.8);
    border-radius: 50px;
    display: inline-block;
}


.btn-primary {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
}

.btn-primary:hover {
    background-color: #8c0515;
    box-shadow: 0 4px 15px rgba(174, 7, 26, 0.4);
}

.btn-secondary {
    background-color: #6c757d;
    color: var(--white);
    border: none;
}

.btn-secondary:hover {
    background-color: #5a6268;
}

.btn-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.btn-link:hover {
    color: #8c0515;
    text-decoration: underline;
}


.btn-primary,
.btn-secondary-themed {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
    border-radius: 50px;
    padding: 15px 40px;
    font-size: 1.2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(193, 165, 0, 0.4);
    color: var(--dark-color);
}

.btn-primary:hover,
.btn-secondary-themed:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(193, 165, 0, 0.6);
    color: var(--dark-color);
}

.trust-icons {
    margin-top: 40px;
}

.trust-icons i {
    font-size: 2rem;
    margin: 0 15px;
    opacity: 0.7;
}

/* --- General Section Styling --- */
.section-title h2 {
    font-weight: 700;
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.section-title .lead {
    max-width: 700px;
    margin: 0 auto 60px;
}

.step-card {
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 30px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
}

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

.step-icon {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

/* --- New Detailed Process Section --- */
.process-step {
    margin-bottom: 4rem;
}

.process-step .process-image {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.process-step .process-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.process-step h3 {
    color: var(--primary-color);
    font-weight: 600;
}

/* --- New Testimonials Section --- */
.testimonials-section {
    background-color: var(--light-gray);
    padding: 80px 0;
}

.testimonial-card {
    background: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    padding: 30px;
    text-align: center;
    height: 100%;
}

.testimonial-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 20px;
    border: 3px solid var(--secondary-color);
}

.testimonial-card blockquote {
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
}

.testimonial-card .author {
    font-weight: 600;
    color: var(--primary-color);
}


/* --- Trust Elements Section --- */
.trust-section {
    background-color: var(--light-gray);
    padding: 80px 0;
    background-image: url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
}

.trust-badge {
    background: var(--white);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    align-items: center;
    gap: 20px;
}

.trust-badge i {
    font-size: 2.5rem;
    color: var(--secondary-color);
}


/* --- Footer --- */
footer {
    background-color: var(--dark-color);
    color: var(--light-gray);
    padding: 60px 0 20px;
}

footer a {
    color: var(--light-gray);
    text-decoration: none;
}

footer a:hover {
    color: var(--white);
    text-decoration: underline;
}

footer .copyright {
    border-top: 1px solid #4d5358;
    padding-top: 20px;
    margin-top: 40px;
}

/* --- Modal & Multi-Step Form --- */
.modal-content {
    border-radius: var(--border-radius);
    border: none;
}

.modal-header {
    background-color: var(--primary-color);
    color: var(--white);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.step-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.step {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--light-gray);
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.step.active,
.step.completed {
    background-color: var(--secondary-color);
    color: var(--dark-color);
}

.connector {
    height: 4px;
    background-color: var(--light-gray);
    flex-grow: 1;
    margin: 0 -5px;
    transition: all 0.3s ease;
}

.connector.active {
    background-color: var(--secondary-color);
}

.application-step {
    display: none;
}

.application-step.active {
    display: block;
}

.btn-submit-final {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.btn-submit-final:hover {
    background-color: #8c0615;
    border-color: #8c0615;
    color: var(--white);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-section h1 {
        font-size: 2.5rem;
    }

    #countdown-timer {
        flex-wrap: wrap;
        gap: 10px;
    }

    .timer-box {
        padding: 10px 15px;
    }

    .timer-box span {
        font-size: 2rem;
    }

    .process-step .row {
        flex-direction: column;
    }

    .process-step .row>div {
        margin-bottom: 2rem;
    }

    .process-step .row.flex-row-reverse {
        flex-direction: column;
    }
}

.form_error,
.formError {
    font-size: 12px;
    color: red !important
}

/* ==================== # Page modal ================== */
.verify-page-modal {
    background: linear-gradient(to right, rgba(41, 192, 41, 0.7), rgba(231, 235, 36, 0.8));
    box-sizing: border-box;

}

.verify-page-modal * {
    box-sizing: border-box;
}

.verify-page-modal .modal-content {
    background: #FFF;
    color: #161616;
    box-shadow: 2px 2px 4px 4px var(--lagos-blue);
    border-radius: 16px;
    max-width: 450px;
}

.verify-page-modal .modal-content .modal-header h4 {
    font-size: 18px;
}

.verify-page-modal .modal-title {
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 170%;
    text-align: center;
    letter-spacing: -0.02em;
    color: #000000;
}

.verify-page-modal .form-container {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    padding: 10px 20px;
}

.verify-page-modal .modal-title-info {
    font-style: normal;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    align-items: center;
    text-align: center;
    letter-spacing: -0.02em;
    color: #292828;
}

.verify-page-modal .text-link {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: var(--lagos-green);
    text-decoration: none;
    cursor: pointer;
}

.verify-page-modal .text-normal {
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.02em;
    color: #141B34;
}

.verify-page-modal .btn-close {
    position: absolute;
    right: 20px;
    top: 20px;
    color: #FFF !important;
}

.verify-page-modal .sx-btn-alt {
    background-color: var(--lagos-blue);
    color: #FFF;
}

.digit6 {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.digit6 input {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 24px;
    border: 2px solid #ccc;
    border-radius: 10px;
    opacity: 0.4;
    padding: 1rem 1rem !important;
    transition: opacity 0.3s, box-shadow 0.3s;
}

/* For Chrome, Safari, Edge, and Opera */
.digit6 input::-webkit-outer-spin-button,
.digit6 input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* For Firefox */
.digit6 input {
    -moz-appearance: textfield;
}

.digit6 input.filled {
    opacity: 1;
    border: 1px solid var(--lagos-blue) !important;
    box-shadow: 0 0 5px 2px rgba(0, 123, 255, 0.5);
    /* Blue shade box-shadow */
}

.area-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 999999;
    left: 0px;
    top: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right, rgba(161, 160, 160, 0.6), rgba(140, 138, 138, 0.6));
    color: #FFF;
    font-size: 40px;
}

.area-overlay .message {
    font-size: 18px;
    font-weight: bold;
}

.block-overlay {
    position: fixed;
    top: 0;
    left: 0;
    /* background-color: rgba(255, 255, 255, 0.7); */
    background: linear-gradient(to right, rgba(160, 236, 89, 0.7), rgba(80, 28, 224, 0.7));
    /* semi-transparent */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
    pointer-events: all;
    text-align: center;
    color: #000000;
}

.block-overlay .fa-spinner {
    margin-bottom: 10px;
}








.form-container {
    background: #fff;
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    margin-top: 20px;
    position: relative;
    overflow: hidden;
    /* To contain absolute positioned elements like success message */
}

#progressbar {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 50px;
    padding: 0;
    list-style-type: none;
}

#progressbar li {
    flex: 1;
    text-align: center;
    position: relative;
    font-weight: 500;
    color: #6c757d;
}

#progressbar li:before {
    content: "";
    line-height: 40px;
    width: 40px;
    height: 40px;
    border: 2px solid #ddd;
    display: block;
    text-align: center;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #fff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    font-family: "Font Awesome 5 Free";
    /* For checkmark icon */
    font-weight: 900;
    color: #ddd;
}

#progressbar li:nth-child(1):before {
    content: "1";
}

#progressbar li:nth-child(2):before {
    content: "2";
}

#progressbar li:nth-child(3):before {
    content: "3";
}

#progressbar li.active:before {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    content: "\f00c";
    /* FontAwesome checkmark */
}

#progressbar li:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: #ddd;
    top: 20px;
    left: -50%;
    z-index: 0;
    transition: all 0.3s ease;
}

#progressbar li:first-child:after {
    content: none;
}

#progressbar li.active {
    color: var(--primary-color);
}

#progressbar li.active+li:after {
    background: var(--primary-color);
}

.form-section {
    display: none;
    padding-top: 20px;
    animation: fadeIn 0.5s ease-in-out;
}

.form-section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--dark-color);
    font-size: 0.95em;
}

.form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    transition: all 0.3s ease;
    font-size: 1em;
    background-color: var(--light-gray);
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(174, 7, 26, 0.25);
    outline: none;
    background-color: var(--white);
}

.form-control.is-invalid {
    border-color: var(--error-color);
    padding-right: calc(1.5em + .75rem);
    /* Space for icon */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(.375em + .1875rem) center;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}

.invalid-feedback {
    color: var(--error-color);
    font-size: 0.85em;
    margin-top: 5px;
    display: block;
}

.btn {
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.05em;
    transition: all 0.3s ease;
    min-width: 120px;
}


.alert {
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: #d1ecf1;
    color: #0c5460;
    font-size: 0.95em;
}

.alert-info {
    background-color: #e2f2ff;
    border-color: #a0d8ff;
    color: #004085;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.alert-danger {
    background-color: #f8d7da;
    border-color: #f5c6cb;
    color: #721c24;
}

.hidden {
    display: none !important;
}

.manual-address-toggle {
    margin-top: -15px;
    margin-bottom: 20px;
    text-align: right;
    font-size: 0.9em;
}

.manual-address-toggle a {
    cursor: pointer;
}

.shares-group {
    border: 1px solid #e9ecef;
    border-radius: var(--border-radius);
    padding: 20px;
    margin-bottom: 20px;
    background-color: #fcfdff;
    position: relative;
}

.shares-group .remove-share {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    z-index: 2;
    border: none;
    color: var(--error-color);
    font-size: 1.2em;
    cursor: pointer;
    transition: color 0.2s ease;
}

.shares-group .remove-share:hover {
    color: #a71d2a;
}

.add-more-shares {
    text-align: right;
    margin-bottom: 20px;
}

.form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
}

/* New Block of Extra CSS */
.page-title {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 30px;
    letter-spacing: -0.5px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 1.8em;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 25px;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 10px;
    display: inline-block;
}

.input-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    font-size: 1.1em;
}

.form-group .input-icon {
    top: 40px;
    /* Adjust for label height */
}

.form-control.with-icon {
    padding-right: 40px;
    /* Make space for the icon */
}

.success-animation {
    text-align: center;
    padding: 50px 20px;
}

.success-animation i {
    font-size: 6em;
    color: var(--success-color);
    margin-bottom: 20px;
    animation: bounceIn 0.8s ease-out;
}

.success-animation h3 {
    font-size: 2em;
    color: var(--dark-color);
    margin-bottom: 15px;
}

.success-animation p {
    font-size: 1.1em;
    color: #6c757d;
}

@keyframes bounceIn {

    0%,
    20%,
    40%,
    60%,
    80%,
    100% {
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
        opacity: 0;
        transform: scale3d(0.3, 0.3, 0.3);
    }

    20% {
        transform: scale3d(1.1, 1.1, 1.1);
    }

    40% {
        transform: scale3d(0.9, 0.9, 0.9);
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03, 1.03, 1.03);
    }

    80% {
        transform: scale3d(0.97, 0.97, 0.97);
    }

    100% {
        opacity: 1;
        transform: scale3d(1, 1, 1);
    }
}

@media (max-width: 768px) {
    body {
        padding: 20px 0;
    }

    .form-container {
        padding: 25px;
    }

    #progressbar li {
        font-size: 0.8em;
    }

    #progressbar li:before {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 0.9em;
    }

    #progressbar li:after {
        top: 15px;
    }

    .page-title {
        font-size: 2em;
    }

    .section-title {
        font-size: 1.5em;
    }

    .btn {
        padding: 10px 20px;
        font-size: 0.95em;
        min-width: unset;
    }
}


/* --- Header Image Section (Replaced Hero) --- */
.header-image-section {
    background-position: top;
    /* Adjusted to better show the abstract financial theme */
    color: var(--white);
    padding: 150px 0 100px;
    text-align: center;
}

.header-image-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.header-image-section p {
    font-size: 1.2rem;
    max-width: 900px;
    margin: 0 auto 30px;
}



/* --- Offer Details Section --- */
.section-title h2 {
    font-weight: 700;
    font-size: 2.8rem;
    margin-bottom: 20px;
    color: var(--primary-color);
}

.section-title .lead {
    max-width: 700px;
    margin: 0 auto 60px;
}

/* Enhanced Offer Card Styling */
.offer-card {
    border: 1px solid #e0e0e0;
    /* Added a subtle border */
    border-radius: var(--border-radius);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    /* Slightly stronger shadow */
    padding: 30px;
    text-align: center;
    height: 100%;
    transition: all 0.3s ease;
    background-color: var(--white);
    margin-bottom: 30px;
    display: flex;
    /* Flexbox for better content alignment */
    flex-direction: column;
    justify-content: space-between;
}

.offer-card:hover {
    transform: translateY(-8px);
    /* More noticeable lift on hover */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    /* Stronger shadow on hover */
}

.offer-card h4 {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 15px;
    /* Added margin */
}

.offer-card p {
    font-size: 1rem;
    color: #555;
    flex-grow: 1;
    /* Allows paragraphs to take available space */
}

/* Enhanced Offer Highlight Styling */
.offer-highlight {
    background-color: var(--primary-color);
    color: var(--white);
    padding: 30px 20px;
    /* Increased padding */
    border-radius: var(--border-radius);
    margin-bottom: 30px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    /* Added shadow for prominence */
}

.offer-highlight h3 {
    font-size: 2.8rem;
    /* Slightly larger */
    font-weight: 700;
    margin-bottom: 10px;
}

.offer-highlight p {
    font-size: 1.3rem;
    /* Slightly larger */
    margin-bottom: 0;
    font-weight: 500;
}

.disclaimer-section {
    background-color: var(--light-gray);
    padding: 60px 0;
    border-top: 1px solid #e0e0e0;
}

.disclaimer-section h3 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 25px;
}

.disclaimer-section p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

.disclaimer-important {
    font-weight: 600;
    color: var(--dark-color);
}

/* Responsive */
@media (max-width: 768px) {
    .header-image-section h1 {
        font-size: 2.5rem;
    }

    .offer-highlight h3 {
        font-size: 2.2rem;
    }
}

/* --- General Accordion Styling --- */
.accordion .card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    /* Ensures border-radius applies to children */
}

.accordion .card-header {
    /* Note: In Bootstrap 5, this is usually .accordion-button */
    background-color: #f8f9fa;
    /* Light background for header */
    border-bottom: 1px solid #e0e0e0;
    padding: 20px 25px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.15rem;
    font-weight: 600;
    color: #333;
    transition: background-color 0.3s ease, color 0.3s ease;
    position: relative;
    /* Needed for positioning the icon */
    border: none;
    /* Remove default button border */
}

.accordion .card-header:hover {
    background-color: #f0f0f0;
    color: var(--primary-color);
    /* Matches your primary brand color */
}

/* Bootstrap 5 specific: when the button is NOT collapsed (i.e., it's open) */
.accordion .card-header:not(.collapsed) {
    background-color: var(--primary-color);
    /* Primary color when expanded */
    color: var(--white);
    border-bottom-color: var(--primary-color);
}

.accordion .card-header .title {
    flex-grow: 1;
    padding-right: 15px;
    /* Space between title and icon */
    text-align: left;
    /* Ensure text aligns left */
}

.accordion .card-header .accicon {
    font-size: 1.3rem;
    transition: transform 0.3s ease;
    color: #888;
    /* Default icon color */
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

/* Icon rotation for Bootstrap 5 */
.accordion .card-header.collapsed .accicon {
    transform: rotate(0deg);
    /* Default state for collapsed */
}

.accordion .card-header:not(.collapsed) .accicon {
    transform: rotate(180deg);
    /* Rotated state when open */
    color: var(--white);
    /* Icon color when expanded */
}


.accordion .card-body {
    /* Note: In Bootstrap 5, this is usually .accordion-body */
    padding: 20px 25px;
    line-height: 1.7;
    color: #555;
    background-color: var(--white);
    /* White background for body */
}

/* Adjustments for the intro paragraph */
.faq-intro-paragraph {
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 40px;
    color: #666;
    font-weight: 500;
}

/* General page section styling */
.faq-section {
    padding: 80px 0;
    /* Add padding for section */
    background-color: var(--light-gray);
    /* Light background for the section */
}


/* --- Imprint Content Styling --- */
.imprint-section {
    padding: 80px 0;
    background-color: var(--light-gray);
    /* Light background for the section */
}

.imprint-content-box {
    background-color: var(--white);
    /* Updated border for a more prominent look */
    border: 3px solid var(--primary-color);
    /* Thicker border using primary color */
    border-radius: var(--border-radius);
    /* Rounded corners */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    /* Slightly stronger shadow */
    padding: 40px;
    /* Increased padding */
    font-size: 1.1rem;
    /* Slightly larger font for readability */
    line-height: 1.8;
    color: #333;
    /* Darker text for better contrast */
    max-width: 800px;
    /* Limit width for better readability */
    margin: 0 auto;
    /* Center the box */
}

.imprint-content-box p {
    margin-bottom: 15px;
    /* Space between paragraphs */
}

.imprint-content-box p b {
    color: var(--dark-color);
    /* Ensure bold text stands out */
}

.imprint-content-box a {
    color: var(--primary-color);
    /* Link color matches primary brand color */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.imprint-content-box a:hover {
    color: var(--secondary-color);
    /* Hover color for links */
    text-decoration: underline;
}

.imprint-content-box .aline {
    margin-bottom: 8px;
    /* Slightly less space for these lines */
}


/* --- Table Responsiveness (Mobile-First) --- */


#shares-table td {
    vertical-align: middle;

}

#shares-table thead th,
#shares-table tfoot td,
#shares-table tfoot {
    background-color: #cfceca !important;

}

/* Hide table headers on small screens */
@media screen and (max-width: 768px) {
    #shares-table thead {
        display: none;
        /* Hides the actual table header */
    }

    #shares-table,
    #shares-table tbody,
    #shares-table tr,
    #shares-table td {
        display: block;
        /* Makes table elements behave like block-level elements */
        width: 100%;
        /* Ensures they take full width */
    }

    #shares-table tr {
        margin-bottom: 1rem;
        border: 1px solid #dee2e6;
        /* Add a border to separate "cards" */
        border-radius: .25rem;
        padding: 0.5rem;
        background-color: #fff;
    }

    #shares-table td {
        text-align: right;
        /* Align content to the right within the "card" */
        padding-left: 50%;
        /* Make space for the pseudo-element label */
        position: relative;
        /* For absolute positioning of pseudo-element */
        border: none;
        /* Remove individual cell borders */
    }

    /* Use pseudo-elements to display column headers as labels */
    #shares-table td::before {
        content: attr(data-label);
        /* Get content from data-label attribute */
        position: absolute;
        left: 0.5rem;
        width: calc(50% - 1rem);
        /* Adjust width for proper alignment */
        padding-right: 10px;
        white-space: nowrap;
        /* Prevent wrapping */
        text-align: left;
        font-weight: bold;
    }

    /* Specific styling for the Actions column */
    #shares-table td:last-child {
        text-align: center;
        /* Center the remove button */
        padding-left: 0;
        /* No label for actions */
    }

    #shares-table tfoot {
        display: block;

    }

    /* Style for Grand Total in Footer */
    #shares-table tfoot tr {
        border: none;
        /* Remove border for the footer row */
        background-color: transparent;
        margin-top: 1rem;
        /* display: flex; */
        /* Use flexbox for footer row */
        /* justify-content: flex-end; */
        /* Push to the right */
        align-items: center;
        padding: 0;
    }

    #shares-table tfoot td {
        text-align: right;
        font-size: 1.1em;
        padding: 0.5rem;
        position: static;
        /* Remove absolute positioning for pseudo-element */
    }

    #shares-table tfoot td:first-child {
        /* Grand Total label */
        font-weight: bold;
        padding-right: 0.5rem;
        text-align: right;
        /* width: auto; */
        flex: 1;
        /* Let content dictate width */
    }


}


/* Hide table headers on small screens */
@media screen and (max-width: 508px) {
    
    #shares-table,
    #shares-table tbody,
    #shares-table tr,
    #shares-table td {
   
        font-size: 14px;
    }

    
    #shares-table td::before {
     
        font-size: 12px !important;
    }

   
}


#shares-table thead th,
#shares-table td::before {
    font-size: 16px;
    font-weight: 500 !important;

}



/* --- Preview Section Specific Styling --- */
#preview-section {
    /* Styles for the main card are in HTML via Bootstrap classes */
    border-color: #393d42;
    /* Border color matching primary */
}

#preview-section .card-header {
    font-weight: 600;
    font-size: 1.25rem;
    padding: 0.75rem 1.25rem;
}

#preview-section .alert-warning {
    border-left: 5px solid #ffc107;
    /* Stronger left border for warning */
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

#preview-section .alert-warning .alert-heading {
    color: #c08d00;
    /* Darker yellow for warning heading */
    font-size: 1.1rem;
}

#preview-section h5 {
    /* Subheadings like "Contracts will be generated for:" */
    font-size: 1.2rem;
    font-weight: 500;
    margin-top: 2rem;
    /* More space above subheadings */
}

.preview-shares-list {
    background-color: #f0f8ff;
    /* Very light blue background for the list */
    padding: 1rem;
    border-radius: .25rem;
    border: 1px dashed #ced4da;
    /* Dashed border for visual separation */
}

.preview-item {
    background-color: #ffffff;
    /* White background for each item */
    padding: 1rem;
    margin-bottom: 0.75rem;
    border: 1px solid #e9ecef;
    border-left: 4px solid #007bff;
    /* Accent border on the left */
    border-radius: .25rem;
    font-size: 0.95rem;
    line-height: 1.6;
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
    /* Subtle shadow */
}

.preview-item strong {
    color: #343a40;
    /* Darker color for share name */
    font-size: 1.1rem;
    display: block;
    /* Ensures name is on its own line */
    margin-bottom: 0.25rem;
}

.preview-item span {
    font-weight: 500;
}

.summary-total {
    background-color: #e2f0fe !important;
    /* Lighter blue for total, important to override bg-light */
    border-color: #a7d9ff !important;
}

.summary-total strong {
    font-size: 1.1rem;
}

.summary-total #preview-grand-total {
    color: #28a745 !important;
    /* Green for total value */
    font-size: 1.6rem !important;
    /* Larger font for emphasis */
    font-weight: 700 !important;
}

/* Signature Pad Styling */
.signature-pad-container {
    border: 2px dashed #007bff !important;
    /* Primary color dashed border */
    background-color: #fdfdfd !important;
    /* Very light background for drawing */
    cursor: crosshair;
    transition: border-color 0.3s ease-in-out;
}

.signature-pad-container:hover {
    border-color: #0056b3 !important;
    /* Darker primary on hover */
}

.signature-pad {
    display: block;
    /* Ensure canvas fills container */
    background-color: transparent;
    /* Keep canvas background transparent to show container bg */
}

/* Icons for buttons if not already styled */
.btn i {
    margin-right: 0.25rem;
}


.adr-banks-section {
    background-color: transparent;
    /* White background for the banks section */
    padding: 60px 0;
    border-radius: 15px;
    /* Rounded corners for the entire section */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Subtle shadow */
    margin-top: 40px;
    /* Space from the top of the hero header */
}

.adr-banks-section h2 {
    font-weight: 700;
    color: #343a40;
    margin-bottom: 40px;
}

.adr-banks-section .card {
    border: none;
    /* Remove default card border */
    border-radius: 15px;
    /* Rounded corners for cards */
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Lighter shadow for individual cards */
    overflow: hidden;
    /* Ensures rounded corners are respected */
}

.adr-banks-section .card:hover {
    transform: translateY(-8px);
    /* Lift effect on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    /* More pronounced shadow on hover */
    background-color: #e9e2b7;
    border: 2px solid  var(--secondary-color);
    /* Slightly darker background on hover */
}

.adr-banks-section .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30px;
}

.adr-banks-section .icon-box {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    background: linear-gradient(45deg, #007bff, #0056b3);
    /* Gradient background for icons */
    color: white;
    /* White icon color */
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.3);
    /* Shadow for icon box */
}

.adr-banks-section .icon-box i {
    font-size: 3.5rem;
    /* Larger icon size */
}

.adr-banks-section .card-title {
    font-weight: 600;
    color: #495057;
    text-align: center;
    font-size: 1.25rem;
}

.adr-banks-section .icon-box img {

    width: 100px;
    /* border-radius: 50%; */
}

/* Responsive adjustments */
@media (max-width: 767.98px) {
    .adr-banks-section {
        padding: 40px 0;
        margin-top: 20px;
    }

    .adr-banks-section h2 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .adr-banks-section .icon-box {
        width: 70px;
        height: 70px;
    }

    .adr-banks-section .icon-box i {
        font-size: 2.5rem;
    }



    .adr-banks-section .card-title {
        font-size: 1.1rem;
    }
}

.pac-container {
    z-index: 99051 !important;
    /* higher than modal (Bootstrap default modal z-index is 1050) */
}