.saasify-template-root {
    min-height: 100vh;
    overflow-x: clip;
    background: #fff;
    color: var(--tj-color-text-body);
    font-family: var(--tj-ff-body);
}

.saasify-template-root,
.saasify-template-root * {
    box-sizing: border-box;
}

.saasify-template-root section[id] {
    scroll-margin-top: 96px;
}

.saasify-template-root .sx-skip-link {
    position: fixed;
    left: 1rem;
    top: -5rem;
    z-index: 10000;
    padding: 0.75rem 1rem;
    border-radius: 0.4rem;
    color: #fff;
    background: #8c1538;
    transition: top 0.2s ease;
}

.saasify-template-root .sx-skip-link:focus {
    top: 1rem;
}

.saasify-template-root .sx-hero-background,
.saasify-template-root .sx-footer-background {
    background-image: url("/saasify-template/assets/images/banner/bg-group-3.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.saasify-template-root .tj-header-area {
    background-color: #fff;
    box-shadow: 0 8px 30px rgba(140, 21, 56, 0.06);
}

.saasify-template-root .tj-canva-icon button,
.saasify-template-root .offcanvas-icon button {
    border: 0;
    background: transparent;
}

.saasify-template-root .tj-canva-icon .menu-button {
    cursor: pointer;
    display: block;
    width: 35px;
    padding: 0;
}

.saasify-template-root .tj-canva-icon .menu-button span {
    display: block;
    width: 35px;
    height: 2px;
    margin: 8px 0;
    margin-left: auto;
    background: var(--tj-color-gradient-1);
    transition: 0.4s;
}

.saasify-template-root .offcanvas-icon button {
    color: #fff;
    cursor: pointer;
    font-size: 28px;
}

.saasify-template-root .tj-overlay-canvas {
    border: 0;
    cursor: pointer;
}

.saasify-template-root .mobile-navbar-menu .mean-nav ul {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.saasify-template-root .mobile-navbar-menu .mean-nav > ul {
    padding-left: 0;
}

.saasify-template-root .sx-team-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(270px, 1fr);
    gap: 24px;
    overflow-x: auto;
    padding: 24px 8px 42px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}

.saasify-template-root .sx-team-grid .tj-team-item {
    min-width: 0;
    scroll-snap-align: start;
}

.saasify-template-root .tj-team-item .team-image-box img {
    width: 100%;
    object-fit: contain;
}

.saasify-template-root .sx-form-status {
    margin: 22px 0 0;
    color: #8c1538;
    font-weight: 700;
}

.saasify-template-root .sx-subscribe-status {
    display: block;
    margin-top: 12px;
    color: #8c1538;
    font-weight: 700;
}

.saasify-template-root .saasify-scroll-top {
    display: block;
    text-decoration: none;
}

.saasify-template-root .saasify-scroll-top-icon {
    display: flex;
}

.saasify-template-root .tj-contact-box textarea {
    resize: vertical;
}

.saasify-template-root h1:focus {
    outline: none;
}

@media (max-width: 991px) {
    .saasify-template-root .tj-header-area {
        padding: 16px 0;
    }

    .saasify-template-root .sx-team-grid {
        grid-auto-columns: minmax(260px, 70%);
    }
}

@media (max-width: 575px) {
    .saasify-template-root .tj-offcanvas-area {
        width: min(88vw, 360px);
        right: -100%;
        padding: 26px 22px;
    }

    .saasify-template-root .canvas_expanded .tj-offcanvas-area {
        right: 0;
    }

    .saasify-template-root .sx-team-grid {
        grid-auto-columns: 92%;
    }

    .saasify-template-root .footer-subcribe-top .tj-subcribe-box {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saasify-template-root *,
    .saasify-template-root *::before,
    .saasify-template-root *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}