:root,
[data-bs-theme=light] {
    --bs-blue: #0d6efd;
    --bs-dark-blue: #0a58ca;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-black: #000;
    --bs-primary: #0d6efd;
    --bs-secondary: #6c757d;
    --bs-success: #02c27a;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #fc185a;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;

    --bs-success-rgb: 2, 194, 122;
    --bs-danger-rgb: 252, 24, 90;
    --bs-heading-color: #474747;
    --bs-body-color: #5b6166;
    --bs-orange-rgb: rgb(253, 126, 20);
}


[data-bs-theme=dark] {
    color-scheme: dark;
    --bs-body-color: #dee2e6;
    --bs-body-color-rgb: 222, 226, 230;
    --bs-body-bg: #212529;
    --bs-body-bg-2: #181c1f;
    --bs-body-bg-rgb: 33, 37, 41;
    --bs-emphasis-color: #fff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-secondary-color: rgba(222, 226, 230, 0.75);
    --bs-secondary-color-rgb: 222, 226, 230;
    --bs-secondary-bg: #343a40;
    --bs-secondary-bg-rgb: 52, 58, 64;
    --bs-tertiary-color: rgba(222, 226, 230, 0.5);
    --bs-tertiary-color-rgb: 222, 226, 230;
    --bs-tertiary-bg: #2b3035;
    --bs-tertiary-bg-rgb: 43, 48, 53;
    --bs-primary-text-emphasis: #6ea8fe;
    --bs-secondary-text-emphasis: #a7acb1;
    --bs-success-text-emphasis: #75b798;
    --bs-info-text-emphasis: #6edff6;
    --bs-warning-text-emphasis: #ffda6a;
    --bs-danger-text-emphasis: #ea868f;
    --bs-light-text-emphasis: #f8f9fa;
    --bs-dark-text-emphasis: #dee2e6;
    --bs-primary-bg-subtle: #031633;
    --bs-secondary-bg-subtle: #161719;
    --bs-success-bg-subtle: #051b11;
    --bs-info-bg-subtle: #032830;
    --bs-warning-bg-subtle: #332701;
    --bs-danger-bg-subtle: #2c0b0e;
    --bs-light-bg-subtle: #343a40;
    --bs-dark-bg-subtle: #1a1d20;
    --bs-primary-border-subtle: #084298;
    --bs-secondary-border-subtle: #41464b;
    --bs-success-border-subtle: #0f5132;
    --bs-info-border-subtle: #087990;
    --bs-warning-border-subtle: #997404;
    --bs-danger-border-subtle: #842029;
    --bs-light-border-subtle: #495057;
    --bs-dark-border-subtle: #343a40;
    --bs-heading-color: inherit;
    --bs-link-color: #6ea8fe;
    --bs-link-hover-color: #8bb9fe;
    --bs-link-color-rgb: 110, 168, 254;
    --bs-link-hover-color-rgb: 139, 185, 254;
    --bs-code-color: #e685b5;
    --bs-border-color: #495057;
    --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
    --bs-form-valid-color: #75b798;
    --bs-form-valid-border-color: #75b798;
    --bs-form-invalid-color: #ea868f;
    --bs-form-invalid-border-color: #ea868f;
    --bs-border-color-transparent: rgba(255, 255, 255, 0.0);
}


.dropdown-item:focus,
.dropdown-item:hover {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg)
}

/* background colors */
.brand-blue {
    color: #031768 !important;
}

.bg-danger {
    background-color: #fc185a;
}

.bg-success {
    background-color: #02c27a;
}

.bg-voilet {
    background-color: #5a4eba;
}

.bg-dark-blue {
    background-color: var(--bs-dark-blue);
}

.bg-cyne {
    background-color: var(--bs-cyan);
}

.bg-indigo {
    background-color: var(--bs-indigo);
}

.bg-purple {
    background-color: var(--bs-purple);
}

.bg-orange {
    background-color: #fd7e14;
}

.bg-orange-light {
    background-color: rgba(253, 125, 20, 0.1);
}

.bg-red {
    background-color: var(--bs-red);
}

.bg-pink {
    background-color: var(--bs-pink);
}

.bg-pinterest {
    background-color: #E60023 !important;
}

.bg-facebook {
    background-color: #0866FF !important;
}

.bg-linkedin {
    background-color: #0072b1 !important;
}

.bg-whatsapp {
    background-color: #25d366 !important;
}

.text-orange {
    color: #fd7e14;
}

.bg-none {
    background-image: none;
}

/* gradient colors */

.bg-grd-primary {
    background-image: linear-gradient(310deg, #7928ca, #ff0080) !important;
}

.bg-grd-success {
    background-image: linear-gradient(310deg, #17ad37, #98ec2d) !important;
}

.bg-grd-danger {
    background: linear-gradient(310deg, #ee0979, #ff6a00) !important;
}

.bg-grd-info {
    background-image: linear-gradient(310deg, #00c6fb 0%, #005bea 100%) !important;
}

.bg-grd-warning {
    background: linear-gradient(310deg, #f7971e, #ffd200) !important;
}

.bg-grd-voilet {
    background: linear-gradient(310deg, #3494e6, #ec6ead) !important;
}

.bg-grd-royal {
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
}

.bg-grd-branding {
    background-image: linear-gradient(#2af598 0%, #009efd 100%) !important;
}

.bg-grd-deep-blue {
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%) !important;
}


/* components */

.card {
    margin-bottom: 1.5rem;
    /* box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); */
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    border: 0;
}

.card-header {
    background-color: transparent;
}

/* gradient buttons */

.btn-grd,
.btn-grd:hover,

.btn-grd {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--button-text-color);
    border-radius: var(--button-border-radius);
    /* padding: var(--button-padding); */
}

.btn-grd:hover {
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.btn-grd:focus {
    color: #fff !important;
    width: max-content;
}

.btn-grd-primary {

    background-image: linear-gradient(310deg, #7928ca, #ff0080) !important;
}

.btn-the-primary {
    background: linear-gradient(310deg, var(--primary-color), var(--secondary-color)) !important;
    color: #fff;
    border: none;
    box-shadow: 0 4px 15px rgba(1, 85, 183, 0.4);
    transition: all 0.3s ease-in-out;
    padding: 0.4rem 0.8rem;
    /* Adjust padding for compactness */
    display: inline-flex !important;
    /* Adjust size to content */
    align-items: center;
    gap: 0.5rem;
}

.btn-the-primary:hover {
    background-image: linear-gradient(310deg, #013785, #0155b7, #0177f7) !important;
    box-shadow: 0 6px 20px rgba(1, 55, 133, 0.6);
    transform: scale(1.05);
    color: #fff;
}

.btn-grd-success {
    background-image: linear-gradient(310deg, #17ad37, #98ec2d) !important;
}

.btn-grd-danger {
    background-image: linear-gradient(310deg, #ee0979, #ff6a00) !important;
}

.btn-grd-info {
    background-image: linear-gradient(310deg, #00c6fb 0%, #005bea 100%) !important;
}

.btn-grd-warning {
    background-image: linear-gradient(310deg, #f76e1e, #ffc400) !important;
}

.btn-grd-voilet {
    background-image: linear-gradient(310deg, #3494e6, #ec6ead) !important;
}

.btn-grd-royal {
    background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%) !important;
}

.btn-grd-branding {
    background-image: linear-gradient(#2af598 0%, #009efd 100%) !important;
}

.btn-grd-deep-blue {
    background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%) !important;
}



.btn {
    -webkit-tap-highlight-color: transparent;
    transform: translateY(0);
    --bs-btn-font-weight: 500;
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: #fc185a;
    --bs-btn-border-color: #fc185a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #ef0e4e;
    --bs-btn-hover-border-color: #ef0e4e;
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #ef0e4e;
    --bs-btn-active-border-color: #ef0e4e;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #fc185a;
    --bs-btn-disabled-border-color: #fc185a
}

.btn-inverse-danger {
    --bs-btn-color: #fc185a;
    --bs-btn-bg: rgb(252 24 90 / 10%);
    --bs-btn-border-color: rgb(252 24 90 / 0%);
    --bs-btn-hover-color: #fc185a;
    --bs-btn-hover-bg: rgb(252 24 90 / 20%);
    --bs-btn-hover-border-color: rgb(239 14 78 / 0%);
    --bs-btn-focus-shadow-rgb: 225, 83, 97;
    --bs-btn-active-color: #fc185a;
    --bs-btn-active-bg: rgb(252 24 90 / 20%);
    --bs-btn-active-border-color: rgb(252 24 90 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #fc185a;
    --bs-btn-disabled-border-color: #fc185a;
}

.btn-outline-danger {
    --bs-btn-color: #fc185a;
    --bs-btn-border-color: #fc185a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #fc185a;
    --bs-btn-hover-border-color: #fc185a;
    --bs-btn-focus-shadow-rgb: 220, 53, 69;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #fc185a;
    --bs-btn-active-border-color: #fc185a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fc185a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #fc185a;
    --bs-gradient: none
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: #02c27a;
    --bs-btn-border-color: #02c27a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #04a96c;
    --bs-btn-hover-border-color: #04a96c;
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #04a96c;
    --bs-btn-active-border-color: #04a96c;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #02c27a;
    --bs-btn-disabled-border-color: #198754
}

.btn-inverse-success {
    --bs-btn-color: #02c27a;
    --bs-btn-bg: rgb(2 194 122 / 10%);
    --bs-btn-border-color: rgb(2 194 122 / 0%);
    --bs-btn-hover-color: #02c27a;
    --bs-btn-hover-bg: rgb(2 194 122 / 20%);
    --bs-btn-hover-border-color: rgb(2 194 122 / 0%);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #02c27a;
    --bs-btn-active-bg: rgb(2 194 122 / 20%);
    --bs-btn-active-border-color: rgb(2 194 122 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #02c27a;
    --bs-btn-disabled-border-color: #198754;
}

.btn-outline-success {
    --bs-btn-color: #02c27a;
    --bs-btn-border-color: #02c27a;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #02c27a;
    --bs-btn-hover-border-color: #02c27a;
    --bs-btn-focus-shadow-rgb: 25, 135, 84;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #02c27a;
    --bs-btn-active-border-color: #02c27a;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #02c27a;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #02c27a;
    --bs-gradient: none
}

.btn-inverse-primary {
    --bs-btn-color: #0d6efd;
    --bs-btn-bg: rgb(13 110 253 / 10%);
    --bs-btn-border-color: rgb(13 110 253 / 0%);
    --bs-btn-hover-color: #0d6efd;
    --bs-btn-hover-bg: rgb(13 110 253 / 20%);
    --bs-btn-hover-border-color: rgb(13 110 253 / 0%);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #0d6efd;
    --bs-btn-active-bg: rgb(13 110 253 / 20%);
    --bs-btn-active-border-color: rgb(13 110 253 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

.btn-inverse-info {
    --bs-btn-color: #0dcaf0;
    --bs-btn-bg: rgb(13 202 240 / 10%);
    --bs-btn-border-color: rgb(13 202 240 / 0%);
    --bs-btn-hover-color: #0dcaf0;
    --bs-btn-hover-bg: rgb(13 202 240 / 20%);
    --bs-btn-hover-border-color: rgb(13 202 240 / 0%);
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #0dcaf0;
    --bs-btn-active-bg: rgb(13 202 240 / 20%);
    --bs-btn-active-border-color: rgb(13 202 240 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0;
}

.btn-inverse-warning {
    --bs-btn-color: #ffc107;
    --bs-btn-bg: rgb(255 193 7 / 10%);
    --bs-btn-border-color: rgb(255 193 7 / 0%);
    --bs-btn-hover-color: #ffc107;
    --bs-btn-hover-bg: rgb(255 193 7 / 20%);
    --bs-btn-hover-border-color: rgb(255 193 7 / 0%);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #ffc107;
    --bs-btn-active-bg: rgb(255 193 7 / 20%);
    --bs-btn-active-border-color: rgb(255 193 7 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #ffc107;
    --bs-btn-disabled-bg: #ffc107;
    --bs-btn-disabled-border-color: #ffc107;
}

.btn-inverse-dark {
    --bs-btn-color: #212529;
    --bs-btn-bg: rgb(33 37 41 / 10%);
    --bs-btn-border-color: rgb(33 37 41 / 0%);
    --bs-btn-hover-color: #212529;
    --bs-btn-hover-bg: rgb(33 37 41 / 20%);
    --bs-btn-hover-border-color: rgb(33 37 41 / 0%);
    --bs-btn-focus-shadow-rgb: 66, 70, 73;
    --bs-btn-active-color: #212529;
    --bs-btn-active-bg: rgb(33 37 41 / 20%);
    --bs-btn-active-border-color: rgb(33 37 41 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #212529;
    --bs-btn-disabled-bg: #212529;
    --bs-btn-disabled-border-color: #212529;
}

.btn-inverse-secondary {
    --bs-btn-color: #6c757d;
    --bs-btn-bg: rgb(108 117 125 / 10%);
    --bs-btn-border-color: rgb(108 117 125 / 0%);
    --bs-btn-hover-color: #6c757d;
    --bs-btn-hover-bg: rgb(108 117 125 / 20%);
    --bs-btn-hover-border-color: rgb(108 117 125 / 0%);
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #6c757d;
    --bs-btn-active-bg: rgb(108 117 125 / 20%);
    --bs-btn-active-border-color: rgb(108 117 125 / 0%);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}


.btn-filter,
.btn-filter:hover,
.btn-filter:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color)
}


.nav-danger.nav-tabs .nav-link.active {

    color: #f41127;

    border-color: #f41127 #f41127 var(--bs-border-color-transparent)
}


.nav-success.nav-tabs .nav-link.active {

    color: #17a00e;

    border-color: #17a00e #17a00e var(--bs-border-color-transparent)
}



.nav-warning.nav-tabs .nav-link.active {

    color: #ffc107;

    border-color: #ffc107 #ffc107 var(--bs-border-color-transparent)
}



.nav-pills-danger.nav-pills .nav-link.active {

    color: #fff;

    background-color: var(--bs-danger)
}



.nav-pills-success.nav-pills .nav-link.active {

    color: #fff;

    background-color: var(--bs-success)
}



.nav-pills-warning.nav-pills .nav-link.active {
    color: #000;
    background-color: var(--bs-warning)
}

.nav-tabs .nav-link {
    color: var(--bs-body-color);
}

.nav-pills .nav-link {
    color: var(--bs-body-color);
}


/* checkboxes */

.form-check-success .form-check-input:checked {
    background-color: #15ca20;
    border-color: #15ca20
}

.form-check-success .form-check-input[type=checkbox]:indeterminate {
    background-color: #15ca20;
    border-color: #15ca20;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-success .form-check-input:focus {
    border-color: #15ca20;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(21, 202, 33, 0.25)
}



.form-check-danger .form-check-input:checked {
    background-color: #fd3550;
    border-color: #fd3550
}

.form-check-danger .form-check-input[type=checkbox]:indeterminate {
    background-color: #fd3550;
    border-color: #fd3550;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-danger .form-check-input:focus {
    border-color: #fd3550;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(253, 53, 80, 0.25)
}



.form-check-warning .form-check-input:checked {
    background-color: #ffc107;
    border-color: #ffc107
}

.form-check-warning .form-check-input[type=checkbox]:indeterminate {
    background-color: #ffc107;
    border-color: #ffc107;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-warning .form-check-input:focus {
    border-color: #ffc107;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(255, 193, 7, 0.25)
}



.form-check-dark .form-check-input:checked {
    background-color: #212529;
    border-color: #212529
}

.form-check-dark .form-check-input[type=checkbox]:indeterminate {
    background-color: #212529;
    border-color: #212529;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-dark .form-check-input:focus {
    border-color: #212529;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(33, 37, 41, 0.25)
}


.form-check-secondary .form-check-input:checked {
    background-color: #6c757d;
    border-color: #6c757d
}

.form-check-secondary .form-check-input[type=checkbox]:indeterminate {
    background-color: #6c757d;
    border-color: #6c757d;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-secondary .form-check-input:focus {
    border-color: #6c757d;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(108, 117, 125, 0.25)
}



.form-check-info .form-check-input:checked {
    background-color: #0dcaf0;
    border-color: #0dcaf0
}

.form-check-info .form-check-input[type=checkbox]:indeterminate {
    background-color: #0dcaf0;
    border-color: #0dcaf0;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e")
}


.form-check-info .form-check-input:focus {
    border-color: #0dcaf0;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(13, 202, 240, 0.25)
}

.input-icon .form-control {
    padding-left: 2.5rem;
}

.input-icon span {
    font-size: 16px;
    left: 15px;
}

/*
.material-icons-outlined {
	line-height: inherit;
} */

.input-group-text {
    background-color: transparent;
}

.price-amount {
    font-size: 50px;
}

.font-20 {
    font-size: 20px;
}

.font-13 {
    font-size: 13px;
}

.font-12 {
    font-size: 12px;
}

.static-image {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

.dynamic-container {
    height: fit-content;
}


.wh-64 {
    width: 64px;
    height: 64px;
}

.tooltip-text {
    display: none;
    margin-top: 10px;
    color: #6c757d;
    text-align: center;
    padding: 12px;
    border-radius: 8px;
    background-color: transparent;
    /* Set background to transparent */
    box-shadow: none;
    /* Remove the box shadow */
    width: 80%;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    font-size: 14px;
    /* Adjust font size */
    line-height: 1.5;
    /* Adjust line height */
    border: none;
    /* Remove the border */
}


.circle {
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background-color: hsl(0, 0%, 100%);
    /* White background for the circle */
    color: #007bff;
    /* Blue text color */
    font-weight: bold;
    font-size: 18px;
    border: 2px solid #007bff;
    /* Blue border */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    /* Optional shadow for better appearance */
}


.bg-fixed-cover {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
}




.static-image {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

.dynamic-container {
    height: fit-content;
}


.wh-64 {
    width: 64px;
    height: 64px;
}

.content {
    display: none;
}

/* Display the active tab content */
.content.active {
    display: block;
}

/* Add styles to highlight the active tab */
.tab-item {
    cursor: pointer;
    /* Change cursor to pointer when hovering over the tab */
    list-style: none;
    /* Remove bullet points */
}

.tab-item.bg-primary {
    background-color: #007bff !important;
}

.tab-item.text-white {
    color: white !important;
}

.tab-item.fw-bold {
    font-weight: bold;
}

/* Optional: Remove underline on links */
.tab-item a {
    text-decoration: none;
}


.carousel-inner {
    max-height: 400px;
    /* Fixed height for the carousel */
    overflow: hidden;
    /* Hides any overflow from images */
    background-color: transparent;
    /* Ensures the box is transparent */
}

.carousel-inner img {
    width: 100%;
    /* Images take full width */
    height: 100%;
    /* Ensures images fit the height */
    object-fit: cover;
    /* Prevents distortion while filling the box */
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: none;
    /* No additional styling required for light theme */
}

.carousel {
    box-shadow: none;
    /* Removes any shadow */
    border: none;
    /* Ensures no border */
    padding: 0;
    /* Removes any internal padding */
    background-color: transparent;
    /* Ensures no background */
}

.image-hover-container {
    position: relative;
    display: inline-block;
    /* Ensures the image is contained */
    overflow: hidden;
    /* Prevents overflow when the image zooms */
    border-radius: 8px;
    /* Adds rounded corners */
}

.hover-effect {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Smooth transitions */
    border-radius: 8px;
    /* Match the container's border radius */
}

.image-hover-container:hover .hover-effect {
    transform: scale(1.1);
    /* Zoom in on hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    /* Add shadow effect */
}

.hover-effect.hover {
    transform: scale(1.05);
    /* Apply the hover zoom-in effect */
    filter: brightness(1.1);
    /* Apply brightness increase */
}

/* Global CSS Variables (Already Defined) */
:root {
    --primary-color: #004a99;
    --secondary-color: #00aaff;
    --button-text-color: #ffffff;
    --background-color: #f8f9fa;
    --heading-font-size: 2.5rem;
    --paragraph-font-size: 1.2rem;
    --spacing-small: 10px;
    --spacing-medium: 20px;
    --spacing-large: 30px;
    --spacing-xlarge: 50px;
    --button-border-radius: 5px;
    --button-padding: 10px 20px;
    --animation-duration: 1.5s;
    --animation-ease: ease-out;
}

/* Slide-Up Animation */
.banner-content {
    opacity: 0;
    transform: translateY(50px);
    animation: slide-up var(--animation-duration) var(--animation-ease) forwards;
}

/* Keyframe for slide-up effect */
@keyframes slide-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 768px) {
    #home {
        background-attachment: scroll;
        /* Background scrolls with the content */
    }
}

/* Banner Section Heading */
h6 {
    font-size: 1rem;
    color: var(--primary-color);
    text-transform: uppercase;
    margin-bottom: var(--spacing-small);
}

h2 {
    font-size: var(--heading-font-size);
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: var(--spacing-medium);
}

h1 {
    font-size: var(--heading-font-size);
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: var(--spacing-medium);
}

/* Global Paragraph Styling */
p {
    color: black;
    font-size: calc(var(--paragraph-font-size) - 3px);
    /* Reduce font size by 1px */
    margin-bottom: var(--spacing-large);
    /* Consistent spacing at the bottom */
}

li {
    color: black;
    font-size: calc(var(--paragraph-font-size) - 3px);
    /* Reduce font size by 1px */

}


/* Button Styling */


/* Image Carousel Styling */
.carousel-inner .carousel-item img {
    transition: transform 0.3s ease;
}

.carousel-inner .carousel-item img:hover {
    transform: scale(1.05);
}

/* Apply hover effect on the text and images */
.banner-content,
#imageCarousel .carousel-item {
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Hover effect for the banner content */
.banner-content:hover {
    transform: translateY(-10px);
    /* Slightly lift the content on hover */
}

/* Hover effect for images in carousel */
#imageCarousel .carousel-item:hover {
    opacity: 0.8;
    /* Fade the image on hover */
    transform: scale(1.05);
    /* Scale the image slightly on hover */
}

/* Add smooth scrolling effect for the row on scroll */
.row[data-aos="fade-up"] {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.row[data-aos="fade-up"].aos-animate {
    opacity: 1;
}

/* Apply a slower fade-in effect */
.banner-content,
#imageCarousel .carousel-item {
    opacity: 0;
    transform: translateY(20px);
    /* Start with a little downward offset */
    transition: opacity 3s ease, transform 3s ease;
    /* Slow down the animation */
}

.banner-content.aos-animate,
#imageCarousel .carousel-item.aos-animate {
    opacity: 1;
    transform: translateY(0);
    /* Move to the original position */
}

/* Initial State - Content hidden until scrolled into view */
#taxPlanningSection {
    opacity: 0;
    transform: translateY(20px);
    /* Initial state slightly shifted down */
    transition: opacity 1s ease, transform 1s ease;
    /* Animation duration */
}

/* Hover Effect: This will apply when the section comes into view */
#taxPlanningSection.lazy-load:hover {
    opacity: 1;
    transform: translateY(0);
    /* Move to the original position */
}

/* Optional: Add a fade-in effect when the section comes into view */
#taxPlanningSection.lazy-load {
    opacity: 1;
    transform: translateY(0);
}

#tax-solutions-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* Loaded state */
#tax-solutions-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Hover effect for cards */
.card-body {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-body:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Icons animation */
.material-icons-outlined {
    transition: color 0.3s ease;
}

.card-body:hover .material-icons-outlined {
    color: var(--primary-color);
    /* Icon color change on hover */
}

#itr-steps-section {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

/* Loaded state */
#itr-steps-section.loaded {
    opacity: 1;
    transform: translateY(0);
}

/* Hover effect for image */
.hover-effect:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* Hover effect for cards */
.nav-pills .nav-link {
    transition: color 0.3s ease, transform 0.3s ease;
}

.nav-pills .nav-link:hover {
    transform: scale(1.1);
    color: #007bff;
}

/* Icon color change and text styling */
.bi-check2 {
    color: #007bff;
}

.lazyload {
    background: url('path/to/loading-spinner.gif') center center no-repeat;
    background-size: 30px;
}

.lazyload.loaded {
    opacity: 1;
}

.carousel-hover {
    transition: transform 0.3s ease;
}

.carousel-hover:hover {
    transform: scale(1.05);
}

/* Custom rounded style for carousel images */
.carousel-item img {
    border-radius: 15px;
    /* Adjust the radius as needed */
}

/* Optionally add a box-shadow for a more polished look */
.carousel-item img.carousel-hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.carousel-item img.carousel-hover:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Optimize the styles by removing redundant code and improving clarity */

/* General Tab Styles */
.tab-item {
    font-weight: bold;
}

.tab-item.bg-primary {
    background-image: linear-gradient(310deg, #0155b7, #0177f7, #013785) !important;
    color: #fff;
    box-shadow: 0 4px 15px rgba(1, 85, 183, 0.4);
}

.tab-item.bg-white {
    background-color: white;
    color: #333;
}

.tab-item.text-dark {
    color: #333;
}

/* Flexbox Layout for Clients Section */
.clients .card-container {
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.clients .clients-shops .item {
    display: flex;
    justify-content: center;
}

.clients img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.clients img:hover {
    transform: scale(1.1);
}

.clients .profile-info h4 {
    font-size: 1.2rem;
    color: #0066cc;
    /* Primary color */
}

.clients .profile-info .job-title {
    font-size: 0.9rem;
    color: #777;
}

.clients .review .rating {
    color: #FFD700;
    /* Gold color for rating */
}

.clients .review p {
    font-size: 1rem;
    color: #333;
}

.clients .owl-carousel .owl-nav,
.clients .owl-carousel .owl-dots {
    display: none;
}

/* Profile Card Styles */
.card-container {
    padding: 16px;
    max-width: 300px;
    min-height: 400px;
    background: #f9f9f9;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    border-radius: 12px;
    text-align: center;
}

.card-container img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    padding: 4px;
    background: #fff;
}

.card-container .profile-info h4 {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
}

.card-container .profile-info p {
    font-family: 'Roboto', sans-serif;
    color: #555;
    margin-bottom: 12px;
}

.card-container .profile-info p:last-child {
    color: #777;
    font-size: 13px;
    margin-bottom: 0;
}

/* Review Section Styles */
.review {
    color: #777;
    font-size: 13px;
    margin-top: 12px;
}

.review .rating {
    color: #ffcc00;
    font-size: 14px;
    margin-right: 5px;
}

/* Owl Carousel Navigation */
.owl-carousel .owl-nav {
    display: none;
}

/* Hover Effects */
.image-hover-container img {
    transform: scale(1);
    transition: transform 0.6s ease-in-out;
}

.image-hover-container img:hover {
    transform: scale(1.1);
}

.image-hover-container img.animate-hover {
    transform: scale(1.1);
    transition: transform 0.6s ease-in-out;
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {
    .clients-shops .item {
        padding: 8px;
    }

    .card-container {
        max-width: 260px;
    }
}



.custom-progress-container {
    position: relative;
}

.custom-progress {
    display: flex;
    align-items: center;
    position: relative;
}

.custom-progress-step {
    text-align: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.custom-progress-circle {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #fff;
    border: 2px solid var(--primary-color);
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    color: var(--primary-color);
    margin-bottom: 10px;
    transition: all 0.3s ease-in-out;
}

.custom-progress-step.active .custom-progress-circle {
    background-color: var(--primary-color);
    color: #fff;
}

.custom-progress-label {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: var(--primary-color);
}

.custom-progress-line {
    flex: 1;
    height: 2px;
    background-color: #ddd;
    position: relative;
}

.custom-progress-bar {
    height: 2px;
    background-color: var(--primary-color);
    width: 0;
    transition: width 0.5s ease-in-out;
}

.custom-progress-step.active~.custom-progress-bar {
    width: 100%;
}

.step-box {
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.step-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


.btn-primary {
    background: linear-gradient(90deg, #007bff, #6610f2);
    border: none;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
    transition: background 0.3s, transform 0.3s;
}

.btn-outline-primary:hover {
    background: #007bff;
    color: #fff;
    transform: translateY(-2px);
}

.prev-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

.step-icon-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.image-container {
    max-width: 100%;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    /* Optional, for rounded corners */
}

.card {
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%;
}

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

.bi {
    font-size: 1.5rem;
}

/* Ensure the inactive tab background color is light gray */
.tab-inactive {
    background-color: #f8f9fa !important;
    /* Light gray background */
    color: #212529 !important;
    /* Dark text */
}

/* Ensure active tab has a visible background and white text */
.tab-active {
    background-color: #007bff !important;
    /* Blue background for active tab */
    color: #fff !important;
    /* White text */
}

.card:hover {
    transform: scale(1.05);
    transition: all 0.3s ease-in-out;
}

.card.no-scale:hover {
    transform: none !important;
}

.icon-container {
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    /* Ensures all cards have equal height */
}

.card-content h5 {
    margin-bottom: 0.5rem;
    /* Reduce gap below the heading */
}

.card-content button {
    margin-top: 0.5rem;
    /* Reduce gap above the button */
}

.card-fluid {
       min-height: auto !important; /* override any fixed min-height */
    height: auto !important;
    display: block !important; /* prevent flex stretch */
}



    .bg-gradient-primary {
        background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
    }
    .accordion-button:not(.collapsed) {
        color: #4e54c8;
        background-color: rgba(78, 84, 200, 0.1);
    }
    /* .btn-outline-primary {
        transition: all 0.3s;
    }
    .btn-outline-primary:hover {
        background: linear-gradient(135deg, rgba(78, 84, 200, 0.1) 0%, rgba(143, 148, 251, 0.1) 100%);
    } */