:root {
    /* Brand Colors */
    --primary: #1375e4;
    --secondary: #3b82f6;
    --accent: #0c81a2;
    /* Backgrounds */
    --bg-body: #0f172a;
    --bg-dark: #000000;
    --bg-l-dark: #1f1f1f;
    --light: #ffffff;
    --gt-bg-ffffff: #ffffff;
    --bg-surface: #1e293b;
    --bg-hover: #334155;
    --gt-bg-0F172A: #0f172a;
    /* Text Colors */
    --text-light-primary: #f9fafb;
    --text-light-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-dark: #000000;
    --text-light-dark: #333333;
    --gt-text-626466: #626466;
    /* Borders & Dividers */
    --border-color: #334155;
    /* Feedback States */
    --error: #f87171;
    --warning: #fbbf24;
    --success: #34d399;
    --info: #60a5fa;
    /* Buttons */
    --btn-primary-bg: var(--primary);
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: var(--secondary);
    --btn-secondary-text: #ffffff;
    --btn-surface-bg: #374151;
    --btn-surface-text: #f9fafb;
    --gt-text-ffc200: #ffc200;
}

/* Default (Blue Theme) */
.color-filter {
    --primary: #1375e4;
    --secondary: #3b82f6;
    --accent: #0c81a2;
    --bg-body: #0f172a;
    --bg-light-primary: rgba(18, 117, 228, 0.1);
    --text-dark: #000000;
    --text-light-dark: #333333;
    --border-color: #334155;
    --border-light-color: #b3d4f7;
}

/* Default (Blue Theme) */
.color-filter.blue {
    --primary: #1375e4;
    --secondary: #3b82f6;
    --accent: #0c81a2;
    --bg-body: #0f172a;
    --bg-light-primary: rgba(18, 117, 228, 0.1);
    --text-dark: #000000;
    --text-light-dark: #333333;
    --border-color: #334155;
    --border-light-color: #b3d4f7;
}

/* Yellow Theme */
.color-filter.yellow {
    --primary: #facc15; /* main yellow */
    --secondary: #fbbf24; /* soft amber */
    --accent: #d97706; /* darker amber */
    --bg-body: #422006; /* deep brown base */
    --bg-light-primary: rgba(250, 204, 21, 0.1);
    --text-dark: #000000;
    --text-light-dark: #333333;
    --border-color: #78350f;
    --border-light-color: #fde68a;
}

/* Red Theme */
.color-filter.red {
    --primary: #ef4444; /* main red */
    --secondary: #f87171; /* soft red */
    --accent: #b91c1c; /* darker red */
    --bg-body: #450a0a; /* deep crimson base */
    --bg-light-primary: rgba(239, 68, 68, 0.1);
    --text-dark: #000000;
    --text-light-dark: #333333;
    --border-color: #7f1d1d;
    --border-light-color: #fecaca;
}

/* Green Theme */
.color-filter.green {
    --primary: #22c55e; /* main green */
    --secondary: #4ade80; /* soft lime green */
    --accent: #15803d; /* darker green */
    --bg-body: #052e16; /* deep forest base */
    --bg-light-primary: rgba(34, 197, 94, 0.1);
    --text-dark: #000000;
    --text-light-dark: #333333;
    --border-color: #14532d;
    --border-light-color: #bbf7d0;
}

/*  Blue Theme */
.color-filter.blue {
    --primary: #1375e4;
    --secondary: #3b82f6;
    --accent: #0c81a2;
    --bg-body: #0f172a;
    --bg-light-gray: #fbfcfd;
    --text-dark: #000000;
    --text-light-dark: #333333;
    --border-color: #334155;
    --border-light-color: #a7cdf4;
}

body {
    font-family: "Inter", "Roboto", sans-serif;
    background-color: var(--bg-dark);
    color: var(--text-light-secondary);
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

/* -classes- */
.text-primary {
    color: var(--primary) !important;
}
.text-light-primary {
    color: var(--text-light-primary);
}
.text-secondary {
    color: var(--secondary) !important;
}
.text-light-secondary {
    color: var(--text-light-secondary) !important;
}
.w-md-auto{
    width: auto;
}

/* Start Background */
.gt-bg-0F172A {
    background: var(--gt-bg-0F172A);
}
/* End Background */

.rouded-8px {
    border-radius: 12px;
}
.rouded-12px {
    border-radius: 12px;
}
.fs-14px {
    font-size: 14px;
}
.fs-16px {
    font-size: 16px;
}
.fs-18px {
    font-size: 18px;
}
.fs-20px {
    font-size: 20px;
}
.fs-24px {
    font-size: 24px;
}
.change-fs-18px-16px {
    font-size: 18px;
}
.change-fs-20px-16px {
    font-size: 20px;
}
.change-fs-20px-18px {
    font-size: 20px;
}
.lh-normal{
    line-height: normal;
}
/* -Start-font-weight- */
.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}
/* -End-font-weight- */
a {
    text-decoration: none;
    color: var(--text-light-secondary);
}

/* Start Height Width */
.hw-24px{
    width: 24px;
    height: 24px;
    min-width: 24px;
    min-height: 24px;
}
.hw-32px{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
}
.hw-35px{
    width: 35px;
    height: 35px;
    min-width: 35px;
    min-height: 35px;
}
.hw-40px{
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
}
.hw-55px{
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
}
.hw-60px{
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
}
.h-80-w-70px{
    width: 80px;
    height: 70px;
    min-width: 80px;
    min-height: 70px;
}
.hw-140px{
    width: 140px;
    height: 140px;
    min-width: 140px;
    min-height: 140px;
}
.max-w-800px{
    max-width: 800px;
}
.max-w-1000px{
    max-width: 1000px;
}
.max-w-450px{
    max-width: 450px;
}
.rounded-8{
    border-radius: 8px;
}
.rounded-12{
    border-radius: 12px;
}
/* Start Cursor */
.cursor-pointer {
    cursor: pointer;
}
/* End Cursor */

/* Start Height Width */
.min-w-250{
    min-width: 250px !important;
}
.min-h-auto{
    min-height: auto !important;
}
/* End Height Width */

/* Buttons */
.btn {
    min-height: 46px;
    align-content: center;
}
.btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    border-radius: 8px;
    font-weight: 500;
    padding: 8px 20px;
}
.btn-primary:hover {
    background-color: var(--secondary);
    border-color: var(--secondary);
}
.btn-light {
    background-color: var(--bg-surface);
    color: var(--primary);
    border-radius: 8px;
    font-weight: 500;
}
.btn-outline-primary {
    color: var(--secondary);
    border-color: var(--secondary);
    color: var(--dark);
    border-color: var(--dark);
    padding: 8px 20px;
    font-weight: 500;
    border-radius: 8px;
}
.btn-outline-primary:hover{
    background-color: var(--primary);
}
.see-more-btn {
    color: var(--secondary);
    font-size: 18px;
}
.see-more-btn:hover {
    color: var(--accent);
}
/* -------- */

.section-s1padding {
    padding-top: 70px;
    padding-bottom: 70px;
}
.section-title-s1 h2 {
    font-size: 38px;
    color: var(--text-light-primary);
}
.section-title-s1 p {
    font-size: 18px;
    color: var(--text-light-secondary);
}
.card {
    background: var(--bg-surface);
    color: inherit;
}

.form-control {
    box-shadow: none !important;
}
.input-field-s3 {
    min-height: 46px;
    border-radius: 8px;
}
.text-danger.error{
    font-size: 14px;
    margin-top: 4px;
}

/* Navbar Styles */
.navbar {
    background-color: var(--bg-body);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 999;
    border-bottom: 1px solid #334155;
}
.navbar-nav .nav-link {
    color: var(--text-light-secondary) !important;
    font-weight: 500;
    transition: color 0.3s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

/* Side Menu (mobile) */
.side-menu {
    position: fixed;
    top: 0;
    right: -100%;
    overflow-y: auto;
    height: 100%;
    width: 260px;
    background: var(--bg-l-dark);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    /* transform: translateX(100%); */
    transition: 0.35s ease-in-out;
    z-index: 1050;
    padding: 2rem 1rem;
}
.side-menu.open {
    /* transform: translateX(0); */
    right: 0;
}
.side-menu .navbar-nav {
    flex-direction: column;
    margin-top: 2rem;
}
.side-menu .navbar-nav {
    gap: 8px;
}

/* Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease-in-out, visibility 0.35s ease-in-out;
}
.menu-overlay.show {
    opacity: 1;
    visibility: visible;
}
.navbar .profile-image{
    border: 1px solid var(--primary);
    border-radius: 50%;
}
.navbar .profile-image img{
    border-radius: 50%;
}
.navbar  .dropdown-menu.dropdown-s1{
    width: 300px;
    margin-top: 22px;
    -webkit-border-radius: .5rem;
    border-radius: .5rem;
    -webkit-animation: fade-in-bottom .3s;
    animation: fade-in-bottom .3s;
}
/* -End-Header-section- */

/* ----Start-main-content---- */

/* -Start-hero-section- */
.hero-section-s1 {
    /* background: linear-gradient(135deg, rgba(248, 249, 250, 0.9) 0%, rgba(233, 236, 239, 0.9) 100%); */
    background-color: var(--bg-body);
    padding: 80px 0px 140px;
    position: relative;
}
.hero-title {
    font-weight: 800;
    font-size: 48px;
    margin-bottom: 18px;
    color: var(--text-light-primary);
    line-height: 1.2;
}
.nav-logo img{
    width: 100%;
    height: 100%;
    max-width: 160px;
    max-height: 40px;
}
.hero-subtitle {
    font-size: 18px;
    color: var(--text-light-secondary);
    line-height: 1.6;
    font-weight: 400;
}
.hero-image-container {
    position: relative;
    perspective: 1000px;
}
.hero-image {
    max-width: 580px;
    width: 100%;
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 25px 50px rgba(71, 78, 226, 0.15);
    transform: perspective(1000px) rotateY(-10deg);
    transition: all 0.5s ease;
    border: 1px solid var(--border-color);
}
.hero-image:hover {
    transform: perspective(1000px) rotateY(0deg);
}
.feature-item {
    display: flex;
    align-items: center;
}
.hero-section-s1 .feature-s1icon {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    color: white;
    padding: 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 14px;
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
}
.trusted-by {
    font-size: 0.9rem;
    color: #6b7280;
    margin-top: 40px;
}
.client-logos {
    display: flex;
    align-items: center;
    gap: 25px;
    margin-top: 15px;
    flex-wrap: wrap;
}
.client-logo {
    height: 30px;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    filter: grayscale(100%);
}
.client-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}
.wave-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 70px;
}
.wave-divider .shape-fill {
    fill: #000000;
}
.hero-slider-content{
    margin-bottom: 32px;
}
.template-img img{
    object-fit: cover;
    width: 100%;
}
/* End-hero-section */

/* --Start-how-it-works-section */
.info-card-s1 {
    background: var(--bg-surface);
    color: var(--text-light-primary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    transition: all 0.3s ease;
    height: 100%;
}
.info-card-s1:hover {
    background: var(--bg-hover);
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}
.info-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary);
}
.info-card-s1 .main-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
}
.info-card-s1 .sub-title {
    color: var(--text-light-secondary);
    font-size: 16px;
}
/* --End-how-it-works-section */

/* -Start-feature-cards-section- */
.feature-card-s1 {
    background: var(--bg-surface);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    transition: all 0.3s ease;
    color: var(--text-light-primary);
    height: 100%;
}
.feature-card-s1:hover {
    /* background: var(--bg-hover); */
    background-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}
.feature-card-s1:hover .feature-icon {
    background-color: var(--bg-surface);
}
.feature-icon {
    border-radius: 12px;
    background-color: var(--primary);
    padding: 12px;
    height: 52px;
    width: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.feature-card-s1 .main-title {
    font-weight: 600;
    color: var(--text-light-primary);
}
.feature-card-s1 .sub-title {
    font-size: 0.95rem;
    color: var(--text-light-secondary);
}
/* -End-feature-cards-section- */

/* -Start-stats-banner-section- */
.stats-section {
    background-color: var(--bg-body);
}
.stat-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.stat-card .main-title {
    color: var(--text-light-primary);
}
.stat-card .sub-title {
    color: var(--text-light-secondary);
}
/* .stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.3);
} */
.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--bg-surface);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-icon i {
    font-size: 28px;
}
/* -End-stats-banner-section- */

/* -Start-why-choose-us-section- */
.why-card {
    /* background: var(--bg-surface); */
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.why-card:hover {
    /* background: var(--bg-hover); */
    border: 2px solid var(--border-color);
    transform: translateY(-6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.why-icon i {
    color: var(--primary);
}
/* -End-why-choose-us-section- */

/* Start Testimonial Section */

/* End Testimonial Section */

/* -Start-FAQs-section- */
.faq-section-s1 .accordion-flush .accordion-item {
    background-color: var(--bg-surface);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}
.faq-section-s1 .accordion-flush .accordion-item:not(:last-child) {
    margin-bottom: 24px;
}
.faq-section-s1 .accordion-flush .accordion-item .accordion-button {
    background-color: var(--bg-surface);
    color: var(--text-light-primary);
    border-radius: 8px;
    font-weight: 500;
}
.border-s1{
    border: 1px solid #ffffff2b;
}
.faq-section-s1 .accordion-button:focus {
    box-shadow: none;
}
.faq-section-s1 .accordion-button:not(.collapsed){
    box-shadow: none;
}
.faq-section-s1 .accordion-button::after {
    background-image: url(../images/faq-down.svg);
}
.faq-section-s1 .accordion-body {
    color: var(--text-light-secondary);
}
/* -End-FAQs-section- */

/* -Start-cta-banner-section- */
.cta-banner-section {
    position: relative;
    /* background-color: var(--bg-body); */
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
    /* border-top: 2px dashed var(--border-color); */
}
.cta-banner-section .wave-divider {
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
/* .cta-banner-section .wave-divider svg{
  transform: rotate(180deg);
} */
.cta-banner-section .wave-divider .shape-fill {
    fill: var(--bg-body);
}
.cta-content {
    padding-bottom: 70px;
}
/* -End-cta-banner-section- */

/* --Start-generate-invoice-page- */
.invoice-content {
    background-color: white;
    border-top: 12px solid var(--border-color);
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    position: relative;
}

.invoice-content input:focus-visible,
.invoice-content textarea:focus-visible {
    outline: none;
}
.invoice-content .see-more-btn {
    font-size: 14px;
}
.invoice-content .remove-btn {
    box-shadow: none;
}
.invoice-content .btn-outline-primary {
    border: 1px solid var(--border-color);
    color: var(--text-light-dark);
}
.invoice-content .btn-outline-primary:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--text-light-primary);
}
/* -Invoice-input-field- */

.invoice-content .form-control:focus {
    box-shadow: none;
    background-color: transparent;
    color: var(--text-dark);
}
.invoice-content input::-webkit-outer-spin-button,
.invoice-content input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.invoice-content input[type="number"] {
    -moz-appearance: textfield;
}
.input-field-s1 {
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid var(--border-color);
    padding: 5px 7px;
    color: var(--text-dark);
    font-size: 14px;
    background: var(--gt-bg-ffffff);
}
.input-field-s1:hover {
    border-color: var(--primary);
}
.input-field-s1::placeholder {
    color: var(--gt-text-626466);
}
.input-field-s2 {
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    padding: 5px 7px;
    color: var(--text-dark);
    font-size: 14px;
    width: 100%;
    background: var(--gt-bg-ffffff);
}
.input-field-s2:hover {
    /* background-color: var(--bg-light-gray); */
    border-color: var(--primary);
}
.input-field-s2::placeholder {
    color: var(--gt-text-626466);
}
.input-field-date {
    border: 1px dashed var(--border-color);
    padding: 4px 6px;
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 14px;
}
/* -Invoice-logo-upload- */
.upload-area-s1 {
    border: 1px dashed var(--border-color);
    display: flex;
    justify-self: end;
    border-radius: 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    width: 100%;
    max-height: 100px;
    min-height: 100px;
}
.upload-area-s1 .upload-input {
    width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .upload-area-s1 .upload-view {
    width: 100%;
} */
.upload-area-s1 .upload-view {
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.upload-area-s1 .upload-view img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #fff;
}
.upload-area-s1:hover {
    border-color: var(--primary);
    background-color: #efefef;
}
.logo-upload-input {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
}
/* -invoice-table- */
.invoice-content .invoice-table-s1 thead tr th {
    background-color: var(--bg-body);
    color: var(--text-light-primary);
    font-weight: 600;
}
.invoice-content .invoice-table-s1 tbody tr{
    border-bottom: 1px solid black;
}
.invoice-content .invoice-table-s1 tbody tr td{
    border: none;
}
.invoice-content .invoice-table-s1 .input-field-s2 {
    min-width: 54px;
}
.invoice-content .invoice-table-s1.table tr td {
    background-color: var(--gt-bg-ffffff);
}

/* -Invoice-calc-content- */
.invoice-content .input-calc-content {
    padding: 12px 24px;
    background-color: #f7f9fa;
    border-radius: 4px;
    border: 1px solid #eff2f5;
}
.invoice-content .input-calc-content span {
    color: var(--text-light-dark);
}
.invoice-content .input-calc-content p {
    color: var(--text-dark);
    font-weight: 500;
}
.invoice-content .signature-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.invoice-content canvas {
    background-color: #fff;
    cursor: crosshair;
}
.invoice-content .controls {
    margin-top: 10px;
}
.invoice-content button {
    padding: 8px 15px;
    margin: 0 5px;
    cursor: pointer;
}
.invoice-content .remove-row{
    padding: 8px 12px;
}

.invoice-content .info-add-btn {
    position: relative;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    display: flex;
    justify-content: start;
    align-items: center;
}
.invoice-content .info-add-btn i {
    font-size: 18px;
    color: var(--primary);
    padding-right: 6px;
}
.invoice-content .add-detail-card {
    position: relative;
    border: 1px solid var(--border-light-color);
    border-radius: 4px;
    background-color: var(--bg-light-primary);
}
.invoice-content .add-detail-card ul li::marker {
    color: var(--text-dark);
}
.invoice-content .add-note-card textarea {
    padding: 16px 46px 16px 16px !important;
}
.invoice-content .add-detail-card .remove-card {
    position: absolute;
    right: 10px;
    top: 14px;
    padding: 5px 10px;
}

.invoice-content .filter-bar {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 8px;
    position: static;
    bottom: 20px;
    background-color: var(--light);
}
@media (max-width:768px) {
    .invoice-content .filter-bar {
        position: static;
    }
}
.invoice-content .filter-bar .color-btn {
    padding: 10px;
    min-height: auto;
}
.invoice-content .filter-bar .select-color-content {
    border: 1px dashed #eff2f5;
    border-radius: 8px;
    background-color: #fbfcfd;
}
.invoice-content .filter-bar .select-color-content .btn-blue {
    background-color: #1375e4;
}
.invoice-content .filter-bar .select-color-content .btn-red {
    background-color: #ef4444;
}
.invoice-content .filter-bar .select-color-content .btn-green {
    background-color: #22c55e;
}
.invoice-content .filter-bar .select-color-content .btn-yellow {
    background-color: #facc15;
}

/* -Invoice-select-2- */
.select2-dropdown.forminput-s1select2-dropdown {
    border: 1px dashed var(--primary);
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--single{
    border: 1px dashed var(--primary);
}
.select2-results__option--selectable {
    color: var(--text-light-dark);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 3px;
}
.invoice-content .select2-container--default .select2-selection--single {
    background-color: #fff;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    padding: 5px 19px 5px 7px;
    height: 32px;
}
.invoice-content .select2-container--default .select2-selection--single:hover {
    border-color: var(--primary);
}

.invoice-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #6a6a6a;
    line-height: 19px;
    font-size: 15px;
    padding: 0px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--gt-bg-ffffff);
}
.select2-container--open .select2-dropdown--below{
    border-top: none !important;
}
.select2-container--open .select2-dropdown--above{
    border-bottom: none !important;
}

/* -Modal- */
/* --End-generate-invoice-page- */

/* -Start-preview-invoice-section- */
table {
    color: var(--text-dark);
}
.color-filter {
    --gt-bg-s1: #accdff;
    --gt-bg-s2: #f0f6ff;
    --gt-bg-s3: #f9f9f9;
    --gt-text-primary: #4a90e2;
    --gt-text-s1: #333333;
    --gt-text-s2: #333333;
    --gt-border: #ddd;
    --gt-primary-border: #4a90e2;
}
.abcd{
    color: var(--gt-primary-border);
}
.color-filter.blue {
    --gt-bg-s1: #accdff;
    --gt-bg-s2: #f0f6ff;
    --gt-bg-s3: #f9f9f9;
    --gt-text-primary: #4a90e2;
    --gt-text-s1: #333333;
    --gt-text-s2: #333333;
    --gt-border: #ddd;
    --gt-primary-border: #4a90e2;
}
.color-filter.pink {
    --gt-bg-s1: #ff6b6b;
    --gt-bg-s2: #fff5f5;
    --gt-bg-s3: #f9f9f9;
    --gt-text-primary: #ff6b6b;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #ff6b6b;
}
.color-filter.green {
    --gt-bg-s1: #4caf50;
    --gt-bg-s2: #e8f5e9;
    --gt-bg-s3: #f9f9f9;
    --gt-text-primary: #2e7d32;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #4caf50;
}
.color-filter.purple {
    --gt-bg-s1: #7b1fa2;
    --gt-bg-s2: #f3e5f5;
    --gt-bg-s3: #f3e5f5;
    --gt-text-primary: #4a148c;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #4a148c;
}
.color-filter.navyBlue {
    --gt-bg-s1: #34495e;
    --gt-bg-s2: #ecf0f1;
    --gt-bg-s3: #ecf0f1;
    --gt-text-primary: #34495e;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ecf0f1;
    --gt-primary-border: #34495e;
}
.color-filter.orange {
    --gt-bg-s1: #f89406;
    --gt-bg-s2: #fff2e0;
    --gt-bg-s3: #fcc270;
    --gt-text-primary: #f89406;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #f89406;
}
.color-filter.darkBlue{
    --gt-bg-s1: #005a9c;
    --gt-bg-s2: #d6e0ed;
    --gt-bg-s3: #f2f2f2;
    --gt-text-primary: #005a9c;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #7aa0bd;
}
.color-filter.teal {
    --gt-bg-s1: #00bfa5;
    --gt-bg-s2: #e0f7f5;
    --gt-bg-s3: #f9f9f9;
    --gt-text-primary: #00bfa5;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #00bfa5;
}
/* .color-filter.skyBlue {
    --gt-bg-s1: #2d89ef;
    --gt-bg-s2: #eaf3ff;
    --gt-bg-s3: #f2f2f2;
    --gt-text-primary: #2d89ef;
    --gt-text-s1: #333333;
    --gt-text-s2: #ffffff;
    --gt-border: #ddd;
    --gt-primary-border: #2d89ef;
} */
.color-filter.amber {
    --gt-bg-s1: #bf6400;       /* Deep burnt orange */
    --gt-bg-s2: #ffe9d6;       /* Soft light background */
    --gt-bg-s3: #f9f9f9;       /* Neutral background */
    --gt-text-primary: #bf6400; /* Primary text color */
    --gt-text-s1: #333333;     /* Dark text */
    --gt-text-s2: #ffffff;     /* Light text */
    --gt-border: #ddd;         /* Default border */
    --gt-primary-border: #bf6400; /* Highlight border */
}
.color-filter.yellow {
    --gt-bg-s1: #f2c719;
    --gt-bg-s2: #fff8e1;
    --gt-bg-s3: #f2f2f2;
    /* --gt-bg-s2: #2c3e50;
    --gt-bg-s3: #f4cd30;     */
    --gt-text-primary: #f2c719;
    --gt-text-s1: #333333;
    --gt-text-s2: #333333;
    --gt-border: #ddd;
    --gt-primary-border: #f1c40d;
}
.filter-bar-s1 {
    border-radius: 0px 0px 12px 12px;
    position: sticky;
    bottom: 20px;
    background-color: var(--gt-bg-ffffff);
    width: 100%;
    max-width: 794px;
}
.filter-bar-s1 .color-btn {
    padding: 12px;
    min-height: auto;
}
@media (max-width:768px) {
    .invoice-content .filter-bar-s1 {
        position: static;
    }
    .filter-bar-s1 .color-btn {
        padding: 10px;
        min-height: auto;
    }
}
.filter-bar-s1 .select-color-content {
    border: 1px dashed #eff2f5;
    border-radius: 8px;
    background-color: #fbfcfd;
}
.filter-bar-s1 .select-color-content .color-btn{
    border-radius: 4px;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-blue {
    background-color: #4a90e2;
}
.filter-bar-s1 .select-color-content .btn-blue:active, .filter-bar-s1 .select-color-content .btn-blue:focus{
    outline-offset: 2px;
    outline: 1px solid #4a90e2;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-pink {
    background-color: #ffd1d1;
}
.filter-bar-s1 .select-color-content .btn-pink:active, .filter-bar-s1 .select-color-content .btn-pink:focus{
    outline-offset: 2px;
    outline: 1px solid #ffd1d1;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-green {
    background-color: #4caf50;
}
.filter-bar-s1 .select-color-content .btn-green:active, .filter-bar-s1 .select-color-content .btn-green:focus{
    outline-offset: 2px;
    outline: 1px solid #4caf50;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-purple {
    background-color: #7b1fa2;
}
.filter-bar-s1 .select-color-content .btn-purple:active, .filter-bar-s1 .select-color-content .btn-purple:focus{
    outline-offset: 2px;
    outline: 1px solid #7b1fa2;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-navyBlue {
    background-color: #34495e;
}
.filter-bar-s1 .select-color-content .btn-navyBlue:active, .filter-bar-s1 .select-color-content .btn-navyBlue:focus{
    outline-offset: 2px;
    outline: 1px solid #34495e;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-orange {
    background-color: #f89406;
}
.filter-bar-s1 .select-color-content .btn-orange:active, .filter-bar-s1 .select-color-content .btn-orange:focus{
    outline-offset: 2px;
    outline: 1px solid #f89406;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-darkBlue {
    background-color: #005a9c;
}
.filter-bar-s1 .select-color-content .btn-darkBlue:active, .filter-bar-s1 .select-color-content .btn-darkBlue:focus{
    outline-offset: 2px;
    outline: 1px solid #005a9c;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-teal {
    background-color: #00bfa5;
}
.filter-bar-s1 .select-color-content .btn-teal:active, .filter-bar-s1 .select-color-content .btn-teal:focus{
    outline-offset: 2px;
    outline: 1px solid #00bfa5;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-amber {
    background-color: #bf6400;
}
.filter-bar-s1 .select-color-content .btn-amber:active, .filter-bar-s1 .select-color-content .btn-amber:focus{
    outline-offset: 2px;
    outline: 1px solid #bf6400;
    border: none;
}
.filter-bar-s1 .select-color-content .btn-yellow {
    background-color: #f2c719;
}
.filter-bar-s1 .select-color-content .btn-yellow:active, .filter-bar-s1 .select-color-content .btn-yellow:focus{
    outline-offset: 2px;
    outline: 1px solid #f2c719;
    border: none;
}
/* -End-preview-invoice-section- */

/* -Start-footer-section- */
.footer {
    background: var(--bg-body);
    color: var(--text-light-secondary);
    padding: 60px 0 20px;
}
.footer h5 {
    color: var(--text-light-primary);
    font-weight: 600;
    font-size: 1.1rem;
}
.footer a {
    color: var(--text-light-secondary);
    text-decoration: none;
    display: block;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}
.footer a:hover {
    color: var(--primary);
}
.footer .social-icons a {
    font-size: 1.2rem;
    margin-right: 12px;
    color: var(--light);
    transition: color 0.3s ease;
}
.footer .social-icons a:hover {
    color: var(--primary);
}
.footer-bottom {
    border-top: 1px solid var(--border-color);
    margin-top: 40px;
    padding-top: 15px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}
/* -End-footer-section- */

/* Start Legal */
.legal-s1acrd .legal-s1card-main {
    color: var(--text-light-primary);
}
/* End Legal */

.user-profile-card .profile-image {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 50%;
    background-color: #212529;
    position: relative;
    border: 1px solid #4a5058;
    cursor: pointer; /* make clickable */
}
.user-profile-card .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.profile-image .profile-photo-edit {
    position: absolute;
    right: 10px;
    left: auto;
    bottom: 6px;
    cursor: pointer;
}
.profile-image .profile-photo-edit span {
    padding: 4px 6px;
    border-radius: 50% !important;
}

/* Start Auth Page */
.auth-divider {
    display: flex;
    align-items: center;
    /* margin: 25px 0; */
    color: var(--text-muted);
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: var(--border-color);
}
.auth-divider span {
    padding: 0 15px;
    font-size: 14px;
}
.btn-google {
    background-color: var(--bg-surface);
    color: var(--text-light-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.btn-google:hover {
    background-color: var(--bg-hover);
    color: var(--text-light-primary);
}
.auth-pass-inputgroup input[type="text"] + .btn i:before {
    content: "\f070";
}

.cs-1particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}
.cs-1particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    animation: float 6s infinite ease-in-out;
}
@keyframes float {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.8;
    }
}
/* End Auth Page */

/* Start About Us Page */
.stats-s1container {
    display: flex;
    gap: 20px;
    margin-top: 28px;
}
.stat-s1item {
    text-align: center;
    flex: 1;
}
.stat-s1number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
}
.stat-s1label {
    color: var(--text-light-secondary);
    font-size: 0.9rem;
}
.value-card {
    background: var(--bg-surface);
    border-radius: 12px;
    padding: 30px;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
    height: 100%;
}
.value-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.value-icon {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    color: var(--text-light-primary);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 24px;
}
/* End About Us Page */


/* Start Rating Star */
.starability-basic {
    display: block;
    position: relative;
    width: 150px;
    /* min-height: 60px; */
    padding: 0;
    border: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
  }

  .starability-basic > input {
    position: absolute;
    margin-right: -100%;
    opacity: 0;
  }

  .starability-basic > input:checked ~ label,
  .starability-basic > input:focus ~ label {
    background-position: 0 0;
  }

  .starability-basic > input:checked + label,
  .starability-basic > input:focus + label {
    background-position: 0 -30px;
  }

  .starability-basic > input[disabled]:hover + label {
    cursor: default;
  }

  .starability-basic > input:not([disabled]):hover ~ label {
    background-position: 0 0;
  }

  .starability-basic > input:not([disabled]):hover + label {
    background-position: 0 -30px;
  }

  .starability-basic > input:not([disabled]):hover + label::before {
    opacity: 1;
  }

  .starability-basic > input:focus + label {
    /* outline: 1px dotted #999; */
  }

  .starability-basic .starability-focus-ring {
    position: absolute;
    left: 0;
    width: 100%;
    height: 30px;
    outline: 2px dotted #999;
    pointer-events: none;
    opacity: 0;
  }

  .starability-basic > #no-rate:focus ~ .starability-focus-ring {
    opacity: 1;
  }

  .starability-basic > label {
    position: relative;
    display: inline-block;
    float: left;
    width: 30px;
    height: 30px;
    font-size: 0.1em;
    color: transparent;
    cursor: pointer;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-position: 0 -30px;
  }

  .starability-basic > label::before {
    content: '';
    position: absolute;
    display: block;
    height: 30px;
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAA8CAMAAABGivqtAAAAxlBMVEUAAACZmZn2viTHuJ72viOampqampr1viSampr3vySampqdnZ34wiX1vSSampr1vSOZmZmampr1viT2vSOampr2viT2viSampr2viSampr2vyX4vyWbm5v3vSSdnZ32wSadnZ36wCWcnJyZmZn/wSr/2ySampr2vSP2viSZmZn2vSSZmZn2vST2viSampr2viSbm5ubm5uZmZn1vSSampqbm5v2vSWampqampr3vSf5wiT5vyagoKD/xCmkpKT/yCSZmZn1vSO4V2dEAAAAQHRSTlMA+vsG9fO6uqdgRSIi7+3q39XVqZWVgnJyX09HPDw1NTAwKRkYB+jh3L6+srKijY2Ef2lpYllZUU5CKigWFQ4Oneh1twAAAZlJREFUOMuV0mdzAiEQBmDgWq4YTWIvKRqT2Htv8P//VJCTGfYQZnw/3fJ4tyO76KE0m1b2fZu+U/pu4QGlA7N+Up5PIz9d+cmkbSrSNr9seT3GKeNYIyeO5j16S28exY5suK0U/QKmmeCCX6xs22hJLVkitMImxCvEs8EG3SCRCN/ViFPqnq5epIzZ07QJJvkM9Tkz1xnkmXbfSvR7f4H8AtXBkLGj74mMvjM1+VHZpAZ4LM4K/LBWEI9jwP71v1ZEQ6dyvQMf8A/1pmdZnKce/VH1iIsdte4U8VEtY23xOujxtFpWDgKbfjD2YeEhY0OzfjGeLyO/XfnNpAcmcjDwKOXRfU1IyiTRyEkaiz67pb9oJHJb9vVqKfgjLBPyF5Sq9T0KmSUhQmtiQrJGPHVi0DoSabj31G2gW3buHd0pY85lNdcCk8xlNDPXMuSyNiwl+theIb9C7RLIpKvviYy+M6H8qGwSAp6Is19+GP6KxwnggJ/kq6Jht5rnRQA4z9zyRRaXssvyqp5I6Vutv0vkpJaJtnjpz/8B19ytIayazLoAAAAASUVORK5CYII=");
    background-position: 0 30px;
    pointer-events: none;
    opacity: 0;
  }

  .starability-basic > label:nth-of-type(5)::before {
    width: 120px;
    left: -120px;
  }

  .starability-basic > label:nth-of-type(4)::before {
    width: 90px;
    left: -90px;
  }

  .starability-basic > label:nth-of-type(3)::before {
    width: 60px;
    left: -60px;
  }

  .starability-basic > label:nth-of-type(2)::before {
    width: 30px;
    left: -30px;
  }

  .starability-basic > label:nth-of-type(1)::before {
    width: 0px;
    left: 0px;
  }

  @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi) {
    .starability-basic > label {
      background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAB4CAMAAACZ62E6AAABAlBMVEUAAACZmZmampr2vSObm5v/yiufn5+ampr1viP1viSZmZn2viOZmZmampqampr2viSampqampqcnJz5vyScnJz3wSf/wyn/xiujo6Oqqqr/0C/1vSOampr2viP2viOampr2viP2vST2viOampqampqampr1vyP3viSampr2vyT4vyX3viSbm5ubm5v5wCT8xSmgoKCampqampr3vyb2wiWenp72viOampqZmZmampr2viP2viP1viSampqbm5v2vyT3viObm5v4vyadnZ34wSSbm5v2viSZmZn2viP2vST2viP2viT1viOZmZn2viT2viX3viT3vyb2vyOZmZn1vSOZmZlNN+fKAAAAVHRSTlMA9uz4PQwS8O7r5+fTw4yMelw2MB0dFRELBgbS+/Hfu7uxqKWdg4N7ZmZMPi8pKRgPs0w7Nhb14drKw6Gck21tXkNDIyMZ1rDLycTBtaqVknlfV0sGP8ZwAAADW0lEQVRYw9zWvYqDQBSG4TPDoCAqKhYKQgoVLFaIgZCkiCBBUqVazv3fyu4aEXWdM85Uy779A+LP58AfTQgw73AwtxFiZIwbxMbUfuB3H4b49YNfZrbGodoI52+cm9hH9sbZwwAXOFbo2zjDsSzWxnecuuvaM8MpdtbEPs7y9azF5phZWrjERaWOPdpLbB81cICrgv3W4mvMLbU6RmFQeA5u5HhFEEbHLdWLsMxvHJXxW16Goh+ZqPyny1Az5j79SsCJoWHsBNAxQ9sNF26bWFuMC8v1LY+mmeTadjaqtaNnnXoxWBcde1nNWnzdb68xrOqvu22/MTzuPutujpJ122NvluSb8tTWk85CclDZQwLS0oa2TQpEKacsJy0kSJaQOKJxROKKxhWJ7zS+k9ijsUdim8Y2ZWNUFBP4pMKfOv8onX9WrsI5gd3VVLXtatxcuU0znGUHCUAS2DgrS6mT6hTzrXEjfIZj5Dk2xKkihqm4wKlQfQRqalhUP9UHo3FIPAG/Et44JVLsDDf0JHmB3OEByOwZES8hSAsviGjBdh3ylh6plmMnW4IyAUVJWcE/76vTell1EIaiMBwIAcWBA9GC0lIdKFXQQUsHVVCklN7ojf3+z3JOxYqK2TH555+K6CJJQtRbr9XtDmCnjH0AX9Va8J+liIMvDtRsCk2pEs6hKVexR2g7KuDihwt5a9MfprY0fkLXU9ZmFLpoJolN6GXKWWfZx0tHCocwKJSxC22ItYUEjmBUJHFjfYz1xQxlfaLiZsBExq2IPtbkNbLtOwwuGgjTLkH43mYtSzam7+1Bsr3nm5uExBQUozEh9V7N7uvmwZcqdpm0C6vJW63bZEuXtbrV2zpDzhrpYLBWMnY1mjV7JWFtMio7zbWniWFxvHnWm1yGxXmOPXP+L3YV2ysjnNhaZNeMcHPvuL27BMnVMaujljBAYyje4niH4g2ONyh+4PiB4gOODyjWcKxh1gZBNoJjEY4R/BLhF4IDEQ4QPBoEoyxH4+bxrUsHyxwxQlg0WHXqYifVLmo67cKY/UtaXFxBV26TLjuHrkp8BPJTMij1xQejdkgO24nf7dBOCRcbzQuNOR9Qs64GzzrfQa8It2oFAA6Zrga9xEeq1KHmLUHIiCAWInsg1x/MLqkMsItF8QAAAABJRU5ErkJggg==");
      background-size: 30px auto;
    }
  }
  .swiper-pagination-bullet{
    background-color: var(--gt-bg-ffffff);
  }
  .swiper-wrapper.customer-swiper{
    margin-bottom: 32px !important;
  }
  .swiper-pagination-bullet-active{
    background-color: var(--primary);
  }
  .news-banner-s2 {
    max-height: 220px;
    height: 100%;
}
.swiper-slide .card {
    height: 100%;
    display: flex;
}
.swiper-slide .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.review-card {
    min-height: 230px;
}

.gallery-card {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  border-radius: 0px;
}
.gallery-card:hover {
  /* transform: translateY(-6px); */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.gallery-card img {
  transition: transform 0.5s ease;
}
.gallery-card:hover img {
  transform: scale(1.08);
}
.gallery-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-swiper-btn::after {
    font-size: 44px;
    font-weight: 700;
    color: var(--primary);
}
@media (max-width:768px) {
    .gallery-swiper-btn::after {
        font-size: 32px;
    }
}


.invoice-step-card {
    background: var(--bg-surface);
    border: none;
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
}
.invoice-step-card:hover {
    background: var(--bg-hover);
    border-color: var(--primary);
    transform: translateY(-3px);
}

.icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    font-size: 20px;
}
.blog-banner img{
    width: 100%;
    height: 100%;
    max-height: 800px;
}


.rating-s1 {
    display: flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 0.1rem;
    --stroke: #C7CCC7;
    --fill:   #FFA534;
}
.rating-s1 input {
    appearance: unset;
}
.rating-s1 label {
    cursor: pointer;
}
.rating-s1 svg {
    width: 2.5rem;
    height: 2.5rem;
    overflow: visible;
    fill: transparent;
    stroke: var(--stroke);
    stroke-linejoin: bevel;
    stroke-dasharray: 6;
    animation: idle 4s linear infinite;
    transition: stroke 0.2s, fill 0.5s;
    stroke-width: 0.1em;
}
@keyframes idle {
    from { stroke-dashoffset: 24; }
}
.rating-s1 label:hover svg {
    stroke: var(--fill);
}
.rating-s1 input:checked ~ label svg {
    transition: 0s;
    animation: idle 4s linear infinite, yippee 0.5s backwards;
    fill: var(--fill);
    stroke: var(--fill);
    stroke-opacity: 0;
    stroke-dasharray: 0;
    stroke-linejoin: miter;
    stroke-width: 8px;
}
.gt-text-ffc200{
    color: var(--gt-text-ffc200);
}
@keyframes yippee {
    0% {
        transform: scale(1);
        fill-opacity: 0;
        stroke-opacity: 1;
        stroke: var(--stroke);
        stroke-dasharray: 10;
        stroke-width: 1px;
        stroke-linejoin: bevel;
    }
    30% {
        transform: scale(0);
        fill-opacity: 0;
    }
    30.1% {
        stroke: var(--fill);
        stroke-dasharray: 0;
        stroke-linejoin: miter;
        stroke-width: 8px;
    }
    60% {
        transform: scale(1.2);
        fill: var(--fill);
    }
}