/* Root Variables */
:root {
    --white: #FFFFFF;
    --black: #000000;
    --gray: #7F7F7F;
    --light-gray: #F5F5F5;
    --teal-green: #15A99D;
    --dark-teal: #12827D;
    --soft-black: #1C1C1C;
}

/* Global Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--white);
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    color: var(--soft-black);
    margin-bottom: 15px;
}

h1 { font-size: 42px !important; color: var(--teal-green) !important; }
h2 { font-size: 34px !important; color: var(--black) !important; }
h3 { font-size: 28px !important; color: var(--dark-teal) !important; }
h4 { font-size: 22px !important; color: var(--teal-green) !important; }
h5 { font-size: 18px !important; color: var(--gray) !important; }
h6 { font-size: 16px !important; color: var(--gray) !important; }


.bg-teal-green{
    background-color:var(--teal-green);
}


/* Text & Links */
p, span, a, li, label, input, textarea, button {
    font-family: 'Inter', sans-serif;
    color: var(--gray);
}

a {
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

a:hover {
    color: var(--teal-green);
}


div h3 del {
  opacity: 0.4;
}


<!-- CSS to Disable Upload Box -->
.disabled-overlay {
    pointer-events: none;
    opacity: 0.5;
}


/* Base Button Styles */
.btn {
    padding: 6px 12px; /* Compact padding for btn-sm */
    font-size: 14px; /* Smaller font for btn-sm */
    border-radius: 8px; /* Rounded corners */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease; /* Smooth hover effect */
}

/* My Account Button - Green */
.btn-account {
    background-color: var(--teal-green);
    color: var(--white);
    border: 1px solid var(--teal-green);
}

.btn-account:hover {
    background-color: var(--dark-teal);
    color: var(--white);
    border-color: var(--dark-teal);
}

/* Logout Button - White with Green Border */
.btn-logout {
    background-color: var(--white);
    color: var(--teal-green);
    border: 1px solid var(--teal-green);
}

.btn-logout:hover {
    background-color: var(--light-gray);
    color: var(--dark-teal);
    border-color: var(--dark-teal);
}

/* Login Button - Green Outline */
.btn-login {
    background-color: var(--white);
    color: var(--teal-green);
    border: 1px solid var(--teal-green);
}

.btn-login:hover {
    background-color: var(--teal-green);
    color: var(--white);
    border-color: var(--teal-green);
}

/* Icon Spacing */
.btn i {
    margin-right: 6px; /* Space between icon and text */
}



/* Uppy Upload Box */
#uppy-container {
    justify-content: center;
    align-items: center;
    width: 85%; /* Increase width */
    max-width: 900px; /* Prevent excessive stretching */
    min-height: 400px; /* Balanced height */
    margin: auto;
}

/* Ensure Uppy Dashboard Fits Properly */
.uppy-Dashboard {
    width: 100% !important;
    max-width: 900px !important;
    height: auto !important;
    min-height: 400px !important;
    border-radius: 8px;
}

/* Make Dropzone UI More Readable */
.uppy-Dashboard-inner {
    width: 100% !important;
    min-height: 400px !important;
}

.uppy-Dashboard-dropFilesHereHint {
    font-size: 16px;
    padding: 15px;
}

/* Adjust Browse Button */
.uppy-Dashboard-browse {
    font-size: 14px;
    padding: 10px 15px;
}

/* Privacy Disclaimer */
.privacy-disclaimer {
    font-size: 12px;
    color: var(--gray);
    text-align: center;
    margin-top: 10px;
}


/* Privacy Icon Styling */
.privacy-disclaimer img {
    width: 33px; /* Properly scaled */
    height: auto; /* Maintain aspect ratio */
    vertical-align: middle;
    margin-right: 5px;
}

/* Change Text Color on Hover */
.privacy-disclaimer a {
    color: var(--gray);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.privacy-disclaimer a:hover {
    color: var(--teal-green);
}

#uploaded-files-result {
    width: 80%;
    margin: 0 auto;
}

/* Optimize button sizes */
.uppy-Dashboard-browse {
    font-size: 14px;
    padding: 10px 15px;
}


#uploaded-files-result .blursection {
    filter: blur(5px);
    pointer-events: none;
    transition: filter 0.5s ease-in-out;
}

#uploaded-files-result.active .blursection {
    filter: none;
    pointer-events: auto;
}


.add-to-phone-btn {
    background-color: var(--teal-green) !important;
    border-color: var(--teal-green) !important;
	border-radius: 2rem !important;
}
.add-to-phone-btn:hover {
    background-color: #1e7e6c !important; /* Darker teal for hover, adjust as needed */
    border-color: #1e7e6c !important;
	border-radius: 2rem !important;
}


/* Buttons */

a.btn.btn-success {
      background-color: var(--teal-green);
    color: var(--white);
    border-color: var(--teal-green);
    border: 0;
    border-radius: 2rem; 
    padding: 8px 19px;
    font-size: 1.2rem;
}





.button {
    font-family: 'Inter', sans-serif;
    background-color: var(--teal-green);
    color: var(--white);
    padding: 12px 20px;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease-in-out;
}

.button:hover {
    background-color: var(--dark-teal);
}

.button:focus {
    outline: 3px solid rgba(21, 169, 157, 0.5);
}


.uppy-size--md .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
    padding: 13px 22px;
    width: auto;
	background-color: var(--teal-green) !important;
    color: var(--white) !important;
    border: 1px solid var(--teal-green) !important;
	border-radius: 2rem;
}


/* Form Inputs */
input, textarea {
    font-family: 'Inter', sans-serif;
    padding: 10px;
    border: 1px solid var(--gray);
    border-radius: 6px;
    width: 100%;
}

input:focus, textarea:focus {
    border-color: var(--teal-green);
    outline: none;
    box-shadow: 0 0 5px rgba(21, 169, 157, 0.3);
}

/* Hero Section */
.hero-section {
    text-align: center;
    padding: 60px 20px;
}

.hero-section h1 {
    color: var(--black);
    font-size: 40px;
    font-weight: 700;
}

.hero-section p {
    color: var(--gray);
    font-size: 18px;
}

/* Counters */
.counter-section {
    background: var(--light-gray);
    padding: 50px 0;
}

.counter-box {
    text-align: center;
    padding: 20px;
}

.counter-box .count {
    font-size: 32px;
    font-weight: 700;
    color: var(--black);
}

.counter-box .text {
    font-size: 18px;
    color: var(--gray);
}

/* Feature Cards */

/* Feature Card Heading */
.card-title {
    color: var(--teal-green) !important; /* Ensures all card titles are teal green */
    font-weight: 600;
}

/* Feature Card Border */
.border-teal-green {
    border: 2px solid var(--teal-green); /* Adds a teal border to feature cards */
    border-radius: 8px;
}



.feature {
    background: var(--white);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease-in-out;
}

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

.feature-body img {
    max-width: 94px; /* Ensures a consistent max size */
    height: auto; /* Maintains original aspect ratio */
    margin-bottom: 10px; /* Provides spacing between icon and heading */
}

.feature h5 {
    font-size: 20px;
    font-weight: 700;
}

.feature p {
    font-size: 15px;
}


/* Who Can Use - Card Heading */
.user-card h5 {
    color: var(--teal-green) !important; /* Keep headings in teal green */
    font-weight: 600;
}

/* Who Can Use - Card Border & Shadow */
.user-card {
    border: 1px solid var(--light-gray) !important; /* Very light gray border */
    border-radius: 8px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */
    transition: all 0.3s ease-in-out;
}

/* Who Can Use - Hover Effect */
.user-card:hover {
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08); /* Slightly stronger shadow on hover */
}


/* Icon Styling */
.who-can-use-icon {
    max-width: 75px; /* Increased for better visibility */
    height: auto; /* Maintains aspect ratio */
    flex-shrink: 0;
}

/* Content Styling */
.who-can-use-card .content h5 {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
}

.who-can-use-card .content p {
    font-size: 14px;
    color: var(--gray);
    margin: 0;
}




/* Override Bootstrap default FAQ accordion styles */
.accordion {
    border: none !important;
}

/* Default collapsed button */
.accordion-button {
    color: var(--black) !important; /* Default text color */
    background-color: var(--white) !important; /* Default background */
    border: 1px solid rgba(21, 169, 157, 0.3) !important; /* Light teal border */
    border-radius: 5px !important; /* Smooth corners */
    padding: 12px 16px !important; /* Better spacing */
    font-weight: 600 !important;
    transition: all 0.3s ease-in-out !important;
}

/* Active (expanded) button - Teal Green Instead of Blue */
.accordion-button:not(.collapsed) {
    color: var(--white) !important; /* White text */
    background-color: var(--teal-green) !important; /* Teal green active background */
    border-color: var(--dark-teal) !important; /* Darker green border */
    box-shadow: 0 2px 8px rgba(21, 169, 157, 0.3) !important; /* Softer shadow */
}

/* Inactive state */
.accordion-button.collapsed {
    color: var(--black) !important; /* Keep text black */
    background-color: var(--white) !important; /* Keep it neutral */
    border-color: rgba(21, 169, 157, 0.3) !important;
}

/* Hover effect */
.accordion-button:hover {
    background-color: var(--light-gray) !important; /* Subtle hover */
    color: var(--teal-green) !important;
}

/* Accordion item */
.accordion-item {
    border: 1px solid rgba(21, 169, 157, 0.3) !important;
    border-radius: 5px !important;
    margin-bottom: 8px !important;
    overflow: hidden !important; /* Ensures border-radius applies properly */
    box-shadow: 0px 2px 5px rgba(21, 169, 157, 0.1) !important; /* Softer, subtle shadow */
}

/* Accordion body */
.accordion-body {
    background-color: var(--white) !important;
    padding: 15px !important;
    color: var(--gray) !important;
    font-size: 15px !important;
}

/* Remove default focus glow */
.accordion-button:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* Icons (Chevron Up/Down) */
.accordion-button::after {
    /*content: "\f107" !important; */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    transition: transform 0.3s ease-in-out !important;
    color: var(--teal-green) !important; /* Ensure icon remains green */
}

/* Rotate icon when accordion is active */
.accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
    color: var(--white) !important; /* White icon when active */
}







/* Reviews Section */
.review {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
}

.review:hover {
    transform: translateY(-3px);
}

/* Avatar Styling */
.review-avatar {
    width: 70px;
    height: 70px;
    object-fit: cover; /* Ensures image doesn't stretch */
    border-radius: 50%;
}

/* Name Styling */
.review h6 {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
}

/* Title Styling */
.review .text-secondary {
    font-size: 14px;
    color: var(--gray);
}

/* Review Text */
.review p {
    font-size: 14px;
    color: var(--gray);
    margin: 0;
}


/* Step Number Styling */
.step {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: var(--teal-green);
    color: var(--white);
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Step Icon Styling */
.scan-step-icon {
    width: 70px;  /* Increased size for better visibility */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 10px;
}

/* Card Styling */
.card {
    background: var(--white);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease-in-out;
}

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

/* Card Title */
.card-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--black);
}

/* Card Text */
.card-text {
    font-size: 14px;
    color: var(--gray);
}


/* Footer Styles */
.footer {
    background-color: var(--soft-black);
    color: var(--white);
    padding: 50px 0;
}

/* Footer Headings */
.footer h4 {
    font-size: 18px;
    font-weight: 600;
    color: var(--teal-green); /* Brand color */
    margin-bottom: 15px;
}

/* Footer Lists */
.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer ul li a {
    color: var(--gray);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.footer ul li a:hover {
    color: var(--teal-green);
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    font-size: 14px;
    color: var(--gray);
}

.footer-bottom a {
    color: var(--teal-green);
    text-decoration: none;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

/* Social Icons */
.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-social a {
    display: inline-block;
}

.footer-icon {
    width: 22px;
    height: 22px;
    transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out;
}

.footer-icon:hover {
    opacity: 0.7;
    transform: scale(1.1);
}

/* Footer Links */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

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

.footer-links a {
    color: var(--gray);
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

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


/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply animations */
.fade-in {
    animation: fadeInUp 0.5s ease-in-out;
}


/* Mobile Optimization */
@media screen and (max-width: 1920px) {
    #uppy-container {
        max-width: 95%;
    }

    .uppy-Dashboard {
        max-width: 100% !important;
        min-height: 450px; /* Slightly smaller for mobile */
    }

    .uppy-Dashboard-inner {
        min-height: 450px;
    }

    .uppy-Dashboard-dropFilesHereHint {
        font-size: 14px;
        padding: 15px;
    }

    .uppy-Dashboard-browse {
        font-size: 12px;
        padding: 8px 12px;
    }
}

@media (max-width: 768px) {
    #uploaded-files-result {
        width: auto;
    }
    
        .blursection {
        margin-left: 0 !important; /* Remove offset */
    }
	
	    .uppy-Dashboard-inner {
        height: 350px !important; /* Reduce height */
        width: 100% !important; /* Make it responsive */
    }
}

@media (max-width: 767.98px) {
    .details-container {
        gap: 1rem;
    }
    .detail-row {
        display: flex;
        flex-direction: column;
        text-align: left;
    }
    .detail-row strong {
        margin-bottom: 0.25rem;
    }
}

.header-menu li {
    list-style:none;
}

.header-menu li a {
    list-style:none;
    color:black;
}

.header-menu li a:hover {
    list-style:none;
    color:var(--teal-green);
}

.header-menu a{
        padding:0.7rem 1rem;
        text-decoration:none;

}

.header-menu .current_page_item a {
        color: var(--dark-teal) !important; /* Change to your preferred hover color */

}

.btn-login,
.btn-account{
    color: white;
    border-radius: 2rem;
    background-color: var(--dark-teal);
}

.btn-logout{
        color: var(--dark-teal);

}

.btn-custom{
    background-color: var(--teal-green);
    color: var(--white);
    border-color: var(--teal-green);
    border: 0;
    border-radius: 2rem; 
    padding: 8px 19px;
    font-size: 1.2rem;
}



.business-card-img,
.business-card-details {
    border: 1px solid #e9ecef;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 0.75rem;
}

.business-card-img img {
    border-radius: 0.5rem;
}

.table-borderless th,
.table-borderless td {
    padding: 0.5rem 0;
    vertical-align: top;
}

.table-borderless th {
    color: #6c757d; /* Bootstrap muted text */
    font-weight: bold;
    width: 120px;
    text-align: left;
}

.table-borderless td {
    color: #212529; /* Bootstrap dark text */
    word-wrap: break-word;
    padding-left: 1rem;
}

.table-borderless td i {
    margin-right: 0.5rem;
}

.add-to-phone-btn {
    background-color: var(--teal-green) !important;
    border-color: var(--teal-green) !important;
    padding: 0.375rem 1rem;
    font-size: 0.875rem;
}

.add-to-phone-btn:hover {
    background-color: #1e7e6c !important; /* Darker teal, adjust as needed */
    border-color: #1e7e6c !important;
}



div p a {
  color: var(--teal-green);
}

span.text-primary {
  color: var(--teal-green) !important;
}

ul li a {
  color: var(--teal-green);
}




@media (max-width: 767.98px) {
    .row.align-items-start {
        flex-direction: column;
    }
    .col-md-3,
    .col-md-9 {
        width: 100%;
    }
    .business-card-img,
    .business-card-details {
        margin-bottom: 1rem;
    }
    .table-borderless th {
        width: auto;
        padding-left: 0;
    }
    .table-borderless td {
        padding-left: 0.5rem;
    }
}

/* Hamburger Menu Animation */
.toggler-icon {
    width: 30px;
    height: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: relative;
}

.toggler-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
}

/* Opened (X) State */
.navbar-toggler.open .toggler-icon span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

.navbar-toggler.open .toggler-icon span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler.open .toggler-icon span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}