/* ----------------------------------------------------------------
	Canvas: SAAS 2
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------
	FONTS
---------------------------------------------------------------------------- */

:root {
    --cnvs-themecolor: #FF7124; /* -- CHANGED BY ME --*/
    --cnvs-themecolor-rgb: 199, 111, 1; /* -- CHANGED BY ME --*/
    --cnvs-gradient-color: linear-gradient(to right, #006181, #006181); /* -- CHANGED BY ME --*/

    --cnvs-body-image: none; /* url('/assets/images/new/blur-bg.png');*/

    --cnvs-saas-color-1: #006181; /* -- CHANGED BY ME --*/
    --cnvs-saas-color-1-rgb: 0, 97, 129; /* -- CHANGED BY ME --*/
    --cnvs-saas-color-2: #00AAB7; /* -- CHANGED BY ME --*/
    --cnvs-saas-color-2-rgb: 0, 170, 183;
    --cnvs-saas-color-3: #7F949D; /* -- ADDED BY ME --*/
    --cnvs-saas-color-3-rgb: 127, 148, 157;
    --cnvs-saas-color-4: #F8B300; /* -- ADDED BY ME --*/
    --cnvs-saas-color-4-rgb: 248, 179, 0;
    --cnvs-heading-block-font-color: var(--cnvs-saas-color-1);
    --cnvs-heading-color: var(--cnvs-saas-color-1);

    --cnvs-font-size-h1: 2.75rem;
    --cnvs-font-size-h2: 2rem;
    --cnvs-font-size-h3: 1.75rem;
    --cnvs-font-size-h4: 1.5rem;
    --cnvs-font-size-h5: 1rem;
    --cnvs-font-size-h6: 0.875rem;
    --cnvs-section-padding: 6rem;
    --bs-body-font-size: 1.125rem;


    --cnvs-primary-font: 'Verdana', sans-serif; /* -- CHANGED BY ME --*/
    --cnvs-body-font: 'Verdana', sans-serif; /* -- CHANGED BY ME --*/
    --cnvs-menu-font: 'Verdana', sans-serif; /* -- ADDED BY ME (menu-font)--*/
    --cnvs-secondary-font: 'Verdana', sans-serif; /* -- CHANGED BY ME --*/
    --cnvs-other-font: 'Verdana', sans-serif; /* -- CHANGED BY ME --*/
    --cnvs-button-font: 'Verdana', sans-serif; /* -- ADDED BY ME (menu-font)--*/

    --cnvs-slider-arrow-color: var(--cnvs-contrast-300);
    --cnvs-slider-arrows-bg-color: transparent;
    --cnvs-slider-arrows-bg-hover-color: var(--cnvs-slider-arrows-bg-color);
    --cnvs-slider-arrows-size: 34px;
    --cnvs-canvas-slider-dots-size: 0.725rem;
    --cnvs-card-rounded: 20px;
}

:root,
h1, h2, h3, h4, h5, h6 {
    color: var(--cnvs-saas-color-1);
}

.primary-color {
    color: var(--cnvs-themecolor);
}

.secondary-color {
    color: var(--cnvs-themecolor);
}


i {
    color: var(--cnvs-themecolor);
}

::selection {
    background-color: var(--cnvs-saas-color-2);
    color: #000000;
}

#logo a .logo-default {
    display: flex;
    max-width: 360px;
    margin: 10px auto;
    height: 45px;
    max-height: 50px;
}

.button {
    font-family: var(--cnvs-button-font);
}

.menu-item:hover > .menu-link {
    color: var(--cnvs-themecolor);
}

.dark .menu-container > .menu-item > .menu-link div::after,
.menu-container > .menu-item > .menu-link div::after,
.button-link::after {
    background-color: var(--cnvs-themecolor);
    -webkit-mask: url(/assets/business/images/border-white.svg) no-repeat center / contain;
    mask: url(/assets/business/images/border-white.svg) no-repeat center / contain;
    background-image: none;
}

.menu-item.current > .menu-link {
    color: var(--cnvs-saas-color-1);
}

/*
 * Zapewnia, że link wewnątrz .fbox-content (używany w elementach "boxy details")
 * jest zawsze przyklejony do dołu, niezależnie od wysokości kontenera.
 * Działa w połączeniu z klasami .d-flex i .flex-column na rodzicu.
*/

.fbox-content .button-link {
    margin-top: auto;
}

/* ------------- ADDED BY ME | END ------------------*/

.not-dark {
    --cnvs-heading-color: var(--cnvs-contrast-1000);
}

.fw-bolder {
    font-weight: 800 !important;
}

.rounded-xxl {
    border-radius: var(--cnvs-card-rounded);
}

.gradient-color {
    background-image: var(--cnvs-gradient-color) !important;
}

.gradient-text {
    font-family: var(--cnvs-secondary-font);
    padding: 0 5px;
    font-size: 120%;
}

.cnvs-bg-color-1 {
    background-color: var(--cnvs-saas-color-1) !important;
}

.cnvs-bg-color-2 {
    background-color: var(--cnvs-saas-color-2) !important;
}

/* ------------- ADDED BY ME | START ------------------*/

.cnvs-bg-color-3 {
    background-color: var(--cnvs-saas-color-3) !important;
}

.cnvs-bg-color-4 {
    background-color: var(--cnvs-saas-color-4) !important;
}

/* ------------- ADDED BY ME | END ------------------*/


#header {
    --cnvs-primary-menu-font-size: 1.125rem;
    --cnvs-primary-menu-tt: none;
    --cnvs-primary-menu-ls: 0;
    --cnvs-primary-menu-padding-x: 20px;
    --cnvs-primary-menu-font-weight: 600; /* -- CHANGED BY ME (600)--*/
    --cnvs-primary-menu-font: var(--cnvs-menu-font); /* -- CHANGED BY ME (menu-font)--*/
    background-color: #FFFFFF; /* -- ADDED BY ME --*/
}

#wrapper {
    background: var(--cnvs-body-bg);
    background-image: var(--cnvs-body-image);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
}


/* Swiper Tabs */

.swiper-pagination-progress {
    --cnvs-swiper-bar-size: 2px;
    --cnvs-swiper-bar-color: var(--cnvs-contrast-200);
    --cnvs-swiper-bar-active-color: var(--cnvs-contrast-1000);
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: auto;
    border-radius: 0;
    opacity: 1;
    margin: 0px;
    background-color: transparent;
}

.swiper-pagination-progress .swiper-pagination-bar,
.swiper-pagination-progress .swiper-pagination-bar-active {
    position: absolute;
    bottom: 0;
    border-radius: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--cnvs-swiper-bar-size);
    margin: 0px;
    background-color: var(--cnvs-swiper-bar-color);
}

.swiper-pagination-progress .swiper-pagination-bar-active {
    z-index: 2;
    width: 0%;
    background-color: var(--cnvs-swiper-bar-active-color);
}

.active .swiper-pagination-progress .swiper-pagination-bar-active {
    animation-name: swiperbarAnim;
    animation-duration: 5s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: forwards;
}

@keyframes swiperbarAnim {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.swiper-tab-link {
    --swiper-tab-title: #AAA;
    --swiper-tab-content: ;
    counter-increment: step-counter;
    position: relative;
    overflow: hidden;
    margin-bottom: 5px;
    padding: 20px 0;
    cursor: pointer;
}

.swiper-tab-link::before {
    content: "";
    position: relative;
    display: inline-block;
    font-size: 26px;
    font-weight: 600;
    min-width: 50px;
    margin-right: 5px;
    color: var(--swiper-tab-title);
    font-family: monospace;
    line-height: 1;
}

.swiper-tab-link .swiper-tab-title {
    display: inline-block;
    color: var(--swiper-tab-title);
    margin-bottom: 0;
    font-size: calc(1.275rem + 0.3vw);
}

.swiper-tab-link .swiper-tab-content {
    margin-bottom: 0;
    padding-top: 10px;
    margin-left: 5px;
    line-height: 0;
    opacity: 0;
    vertical-align: middle;
    font-size: 1rem;
    transition: line-height 0.6s cubic-bezier(.4, 0, .2, 1), opacity .1s .1s cubic-bezier(.4, 0, .2, 1);
}

@media (min-width: 768px) {
    .swiper-tab-link .swiper-tab-content {
        margin-left: 60px;
    }
}

/* ------------- ADDED BY ME | START ------------------*/
@media (max-width: 768px) {
    #logo a .logo-default {
        display: flex;
        max-width: 360px;
        margin: 10px auto;
        height: 35px;
        max-height: 45px;
    }
}

/* ------------- ADDED BY ME | END ------------------*/

.swiper-tab-link.active .swiper-tab-content {
    opacity: .8;
    line-height: var(--cnvs-line-height-content);
    transition: line-height 0.5s cubic-bezier(.4, 0, .2, 1), opacity .15s .15s cubic-bezier(.4, 0, .2, 1);
}

.swiper-tab-link.active {
    --swiper-tab-title: #000;
}

.back-shadow {
    ---cnvs-back-shadow-size: 5px;
    ---cnvs-back-shadow-bg: var(--cnvs-contrast-1000);
    ---cnvs-back-shadow-color: var(--cnvs-contrast-0);
    position: relative;
    background-color: var(---cnvs-back-shadow-color);
    border: 1px solid var(---cnvs-back-shadow-bg);
    margin-left: var(---cnvs-back-shadow-size);
    margin-bottom: var(---cnvs-back-shadow-size);
    box-shadow: calc(-1 * var(---cnvs-back-shadow-size)) var(---cnvs-back-shadow-size) 0 var(---cnvs-back-shadow-bg);
}


.pricing-bg {
    position: absolute;
    left: 0;
    top: 0;
    transform: scale(120%);
    z-index: -1;
    opacity: 0.4;
    object-fit: cover;
    width: 100%;
}

.pts-left,
.pts-right {
    font-weight: 600 !important;
}


.toggle {
    --cnvs-toggle-base-color: var(--cnvs-heading-color);
    --cnvs-toggle-font-size: 1.125rem;
    --cnvs-toggle-title-color: var(--cnvs-heading-color);
    --cnvs-toggle-content-padding: 1.5rem 1.75rem;
    margin: 0 0 30px 0;
}

.toggle-header {
    border-radius: var(--cnvs-card-rounded);
    font-weight: 600;
    background-color: #FFFFFF; /* -- ADDED BY ME --*/
}

.toggle-content {
    padding: 1.5rem 0;
    padding-bottom: .75rem;
    opacity: .8;
    margin-bottom: 0;
}

.toggle-closed {
    transition: .2s;
    opacity: .2;
}

.toggle-active .toggle-closed {
    display: block;
    transform: rotate(45deg);
    opacity: 1;
}

.pricing-tenure-switcher .btn-group {
    background-color: var(--cnvs-contrast-200);
    padding: 6px;
}

.pricing-tenure-switcher .btn-group .btn {
    --bs-btn-border-width: 0;
    --bs-btn-padding-x: 1.25rem;
    --bs-btn-padding-y: 0.425rem;
    --bs-btn-font-size: var(--bs-body-font-size);
    --bs-btn-font-weight: 500;
    border-radius: var(--bs-border-radius-pill) !important;
}

.pricing-tenure-switcher .btn-check:checked + .btn {
    background-color: var(--cnvs-contrast-900);
    color: #FFF;
}

.article ul {
    list-style-type: none; /* Usuwa domyślne znaczniki listy (kropki) */
    padding-left: 0; /* Usuwa domyślne wcięcie listy */
    margin-left: 2em; /* Dodaje większe wcięcie od lewej strony */
}

.article li::before {
    content: "\2713"; /* Kod Unicode dla znaku zaznaczenia (✓) */
    color: var(--cnvs-saas-color-1); /* Używa twojej zdefiniowanej zmiennej koloru */
    display: inline-block; /* Pozwala na ustawienie szerokości i wysokości (potrzebne do ewentualnego pozycjonowania) */
    width: 1em; /* Ustawia szerokość, aby znak nie nachodził na tekst */
    margin-right: 0.5em; /* Dodaje odstęp między ikoną a tekstem */
    text-align: center; /* Centruje znak wewnątrz jego obszaru */
}

.bg-overlay-bg {
    --cnvs-bg-overlay-bg-opacity: 0.5;
}

.article-cms ul {
    padding-left: 20px;
}

.copyright-links a {
    color: var(--bs-body-color);
    border: none;
    font-size: var(--cnvs-font-size-small);
}

.fbox-plain .fbox-icon i, .fbox-plain .fbox-icon img {
    color: var(--cnvs-featured-box-font-color);
}

.dotted-bg:before {
    content: "";
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 100%;
    background-size: 12px 12px;
    background-position: center;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(rgba(var(--cnvs-saas-color-1-rgb), 0.3) 14%, transparent 14%);
    -webkit-mask-image: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 75%);
    mask-image: radial-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 75%);
    z-index: 0;
}

.widget > h4 {
    margin-bottom: var(--cnvs-widget-title-margin);
    font-size: var(--cnvs-widget-title-font-size);
    font-weight: var(--cnvs-widget-title-font-weight);
    letter-spacing: var(--cnvs-widget-title-letter-spacing);
    text-transform: var(--cnvs-widget-title-text-transform);
}

.widget_links li {
    display: flex;
    padding: 0.25rem 0;
    font-size: 1rem;
    color: var(--cnvs-contrast-800);
}

.widget_links li a {
    display: inline-block;
    padding: 0 0.25rem 0 0.75rem;
    border: none !important;
    font-size: 1rem;
}

.widget {
    --cnvs-widget-border: 1px solid rgba(var(--cnvs-contrast-rgb), 0.1);
    --cnvs-widget-margin: 3rem;
    --cnvs-widget-title-margin: 1.5rem;
    --cnvs-widget-title-font-size: 0.9325rem;
    --cnvs-widget-title-font-weight: 600;
    --cnvs-widget-title-letter-spacing: 1px;
    --cnvs-widget-title-text-transform: uppercase;
    position: relative;
    margin-top: var(--cnvs-widget-margin);
}

.bg-color-main {
    background-color: rgba(var(--cnvs-themecolor-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-color-1 {
    background-color: rgba(var(--cnvs-saas-color-1-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-color-2 {
    background-color: rgba(var(--cnvs-saas-color-2-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-color-3 {
    background-color: rgba(var(--cnvs-saas-color-3-rgb), var(--bs-bg-opacity, 1)) !important;
}

.bg-color-4 {
    background-color: rgba(var(--cnvs-saas-color-4-rgb), var(--bs-bg-opacity, 1)) !important;
}

.color-main {
    color: var(--cnvs-themecolor) !important;
}

.color-1 {
    color: var(--cnvs-saas-color-1) !important;
}

.color-2 {
    color: var(--cnvs-saas-color-2) !important;
}

.color-3 {
    color: var(--cnvs-saas-color-3) !important;
}

.color-4 {
    color: var(--cnvs-saas-color-4) !important;
}

.mt-6 {
    margin-top: 6rem !important;
}

.mt-7 {
    margin-top: 9rem !important;
}

.mt-8 {
    margin-top: 12rem !important;
}

.mt-9 {
    margin-top: 15rem !important;
}

.mb-6 {
    margin-bottom: 6rem !important;
}

.mb-7 {
    margin-bottom: 9rem !important;
}

.mb-8 {
    margin-bottom: 12rem !important;
}

.mb-9 {
    margin-bottom: 15rem !important;
}

.my-6 {
    margin-top: 6rem !important;
    margin-bottom: 6rem !important;
}

.my-7 {
    margin-top: 9rem !important;
    margin-bottom: 9rem !important;
}

.my-8 {
    margin-top: 12rem !important;
    margin-bottom: 12rem !important;
}

.my-9 {
    margin-top: 15rem !important;
    margin-bottom: 15rem !important;
}


.slider-layered-background {
    position: relative;
    isolation: isolate; /* Tworzy nowy kontekst stosu, aby z-index pseudo-elementów działał poprawnie */
}

/* Warstwa z gradientem (na samym dole) */
.slider-layered-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(70, 193, 176, 0.17));
    z-index: -2; /* Umieszcza gradient za obrazkiem */
}

/* Warstwa z obrazkiem (w środku) */
.slider-layered-background::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--slider-bg-image);
    background-repeat: no-repeat;
    background-position: 90% 100%;
    background-size: auto 100%;
    z-index: -1; /* Umieszcza obrazek nad gradientem, ale pod treścią */
}

blockquote {
    color: #737373;
    font-style: italic;
    font-size: var(--cnvs-font-size-body);
    line-height: var(--cnvs-line-height-content);
}

@media (max-width: 767px) {
    .auth-box {
        padding: 5px !important;
    }
}

@media (max-width: 767px) {
    .card-header.border-light.justify-content-between {
        flex-direction: column;
        align-items: stretch !important;
    }

    .card-header.border-light.justify-content-between > .d-flex {
        width: 100%;
        margin-bottom: 1rem; /* Dodaje odstęp między sekcją wyszukiwania a filtrami */
    }

    .card-header.border-light.justify-content-between > .d-flex:last-child {
        margin-bottom: 0;
    }

    .card-header .app-search {
        flex-grow: 1; /* Pozwala elementom app-search rosnąć i zajmować dostępną przestrzeń */
    }
}