@layer framework, injected, resets, utils, connor, zoe, ogulcan;
@import 'bootstrap-style-layer.css'; /* wrapped in an @layer framework */
 
 
 
 
 
 
 
 
:root {
    --bs-primary-rgb: 245, 130, 32;
    --bs-primary-hsl: 28 91.4% 54.3%;
    --bs-primary-hex: #f58220;
    --bs-primary: rgb(245, 130, 32);
    --bs-black-rgb: 15, 15, 23;
    --bs-black-hsl: 240 21.1% 7.5%;
    --bs-black-hex: #0f0f17;
    --bs-black: rgb(15, 15, 23);
    --bs-dark-rgb: 20, 20, 20;
    --bs-dark-hsl: 0 0% 7.8%;
    --bs-dark-hex: #141414;
    --bs-dark: rgb(20, 20, 20);
    --bs-light-rgb: 235, 250, 253;
    --bs-light-hsl: 190 81.8% 95.7%;
    --bs-light-hex: #ebfafd;
    --bs-light: rgb(235, 250, 253);
    --bs-secondary-rgb: 61, 205, 232;
    --bs-secondary-hsl: 189 78.8% 57.5%;
    --bs-secondary-hex: #3dcde8;
    --bs-secondary: rgb(61, 205, 232);
    --bs-body-color-rgb: 51, 51, 51;
    --bs-body-color-hsl: 0 0% 20%;
    --bs-body-color-hex: #333333;
    --bs-body-color: rgb(51, 51, 51);
    --bs-warning-rgb: 245, 130, 32;
    --bs-warning-hsl: 28 91.4% 54.3%;
    --bs-warning-hex: #f58220;
    --bs-warning: rgb(245, 130, 32);
    --bs-light-text-rgb: 167, 151, 151;
    --bs-light-text-hsl: 0 8.3% 62.4%;
    --bs-light-text-hex: #a79797;
    --bs-light-text: rgb(167, 151, 151);
    --header-font: avenir-next-lt-pro, var(--bs-font-sans-serif);
    --bs-body-font-family: avenir-next-lt-pro, var(--bs-font-sans-serif);
    --bs-link-color-rgb: var(--bs-body-color-rgb);
    --bs-link-hover-color-rgb: var(--bs-primary-rgb);
    --bs-heading-color: var(--bs-dark);
    --swiper-navigation-color: var(--bs-primary);
    --space-xs: 25px;
    --space-sm: 50px;
    --space-md: 100px;
    --space-lg: 150px;
    --space-xl: 200px;
    --fz-title-1: 48px;
    --fz-title-2: 30px;
    --fz-title-3: 24px;
    --fz-title-4: 21px;
    --fz-title-5: 18px;
    --fz-title-6: 16px;
    --fz-content-base: var(--fz-title-6);
    --bs-border-radius: 10px;
    font-size: var(--fz-content-base);
}

@media (min-width:768px) {
    :root {
        --fz-title-1: 72px;
    }
}
@layer resets {
    [data-sal] {
        --sal-easing: cubic-bezier(.25, .46, .45, .94);
    }
    body {
        font-family: var(--bs-body-font-family);
        font-weight: 400;
        font-size: var(--fz-content-base);
        line-height: calc(30 / 18);
        overflow-x: hidden;
        & p, li{
            letter-spacing:0.025em;
        }
    }
    h1,
    .h1,
    h2,
    .h2,
    h3,
    .h3,
    h4,
    .h4,
    h5,
    .h5,
    h6,
    .h6,
    .header-font {
        font-family: var(--header-font);
        font-weight: 400;
    }
    h1,
    .h1 {
        font-size: var(--fz-title-1);
        line-height: calc(78 / 72);
    }
    h2,
    .h2 {
        font-size: var(--fz-title-2);
        line-height: calc(42 / 30);
        & b, strong{
            font-weight:500;
        }
    }
    h3,
    .h3 {
        font-size: var(--fz-title-3);
        line-height: calc(36 / 24);
        letter-spacing: 0.025em;
    }
    h4,
    .h4 {
        font-size: var(--fz-title-4);
        line-height: calc(36 / 24);
    }
    h5,
    .h5 {
        font-size: var(--fz-title-5);
        line-height: calc(36 / 21);
    }
    h6,
    .h6 {
        font-size: var(--fz-title-6);
    }
    .display-1{
        font-size: var(--fz-title-1);
        line-height: calc(78 / 72);
        font-weight:600;
    }
    .bg-body-color{
        background-color:var(--bs-body-color);
    }
    .bg-dark, .bg-black{
        --bs-heading-color:#fff;
        color:var(--bs-light-text);
    }
    .text-light{
        --bs-text-opacity: 1;
        color:rgba(var(--bs-light-text-rgb), var(--bs-text-opacity)) !important;
    }
    .btn{
        --bs-btn-padding-x: 1.15rem;
        --bs-btn-border-width: 0px;
        --bs-btn-line-height: 1;
        --bs-btn-font-weight: 400;
        --bs-btn-font-size: 16px;
        --bs-btn-padding-y: .778rem;
        --bs-btn-border-radius: 30px;
        text-transform:uppercase;
        letter-spacing:0.1em;
    }
    .btn-lg{
        --bs-btn-font-size: 18px;
        --bs-btn-padding-y: .973rem;
    }
    .btn-primary {
        --bs-btn-color: #fff;
        --bs-btn-bg: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: var(--bs-primary);
        --bs-btn-hover-bg: #fff;
        --bs-btn-hover-border-color:var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    .btn-outline-primary {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-border-color: var(--bs-primary);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: var(--bs-primary);
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: var(--bs-primary);
        --bs-btn-active-border-color: var(--bs-primary);
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-border-color: var(--bs-primary);
    }
    .btn-white {
        --bs-btn-color: var(--bs-primary);
        --bs-btn-bg: #fff;
        --bs-btn-border-color: #fff;
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: var(--bs-primary);
        --bs-btn-hover-border-color: #fff;
        --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
        --bs-btn-active-color: var(--bs-primary);
        --bs-btn-active-bg: #fff;
        --bs-btn-active-border-color: #fff;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(var(--bs-primary-rgb), 0.125);
        --bs-btn-disabled-color: var(--bs-primary);
        --bs-btn-disabled-bg: #fff;
        --bs-btn-disabled-border-color: #fff;
    }
}

@layer utils {
    img[width][height] {
        content-visibility: auto;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    section{
        padding-block: var(--space-sm);
        @media (min-width:768px){
            padding-block: var(--space-md);
        }
    }
    .text-balance {
        text-wrap: balance;
    }
    .text-pretty {
        text-wrap: pretty;
    }
    .py-xs {
        padding-block: var(--space-xs);
    }
    .pt-xs {
        padding-top: var(--space-xs);
    }
    .pb-xs {
        padding-bottom: var(--space-xs);
    }
    .py-sm {
        padding-block: var(--space-sm);
    }
    .pt-sm {
        padding-top: var(--space-sm);
    }
    .pb-sm {
        padding-bottom: var(--space-sm);
    }
    .py-md {
        padding-block: var(--space-md);
    }
    .pt-md {
        padding-top: var(--space-md);
    }
    .pb-md {
        padding-bottom: var(--space-md);
    }
    .py-lg {
        padding-block: var(--space-lg);
    }
    .pt-lg {
        padding-top: var(--space-lg);
    }
    .pb-lg {
        padding-bottom: var(--space-lg);
    }
    .py-xl {
        padding-block: var(--space-xl);
    }
    .pt-xl {
        padding-top: var(--space-xl);
    }
    .pb-xl {
        padding-bottom: var(--space-xl);
    }
    
    @media (min-width: 576px) {
        .py-xs-mob {
            padding-block: var(--space-xs);
        }
        .pt-xs-mob {
            padding-top: var(--space-xs);
        }
        .pb-xs-mob {
            padding-bottom: var(--space-xs);
        }
        .py-sm-mob {
            padding-block: var(--space-sm);
        }
        .pt-sm-mob {
            padding-top: var(--space-sm);
        }
        .pb-sm-mob {
            padding-bottom: var(--space-sm);
        }
        .py-md-mob {
            padding-block: var(--space-md);
        }
        .pt-md-mob {
            padding-top: var(--space-md);
        }
        .pb-md-mob {
            padding-bottom: var(--space-md);
        }
        .py-lg-mob {
            padding-block: var(--space-lg);
        }
        .pt-lg-mob {
            padding-top: var(--space-lg);
        }
        .pb-lg-mob {
            padding-bottom: var(--space-lg);
        }
        .py-xl-mob {
            padding-block: var(--space-xl);
        }
        .pt-xl-mob {
            padding-top: var(--space-xl);
        }
        .pb-xl-mob {
            padding-bottom: var(--space-xl);
        }
    }
    @media (min-width: 768px) {
        .py-xs-tab {
            padding-block: var(--space-xs);
        }
        .pt-xs-tab {
            padding-top: var(--space-xs);
        }
        .pb-xs-tab {
            padding-bottom: var(--space-xs);
        }
        .py-sm-tab {
            padding-block: var(--space-sm);
        }
        .pt-sm-tab {
            padding-top: var(--space-sm);
        }
        .pb-sm-tab {
            padding-bottom: var(--space-sm);
        }
        .py-md-tab {
            padding-block: var(--space-md);
        }
        .pt-md-tab {
            padding-top: var(--space-md);
        }
        .pb-md-tab {
            padding-bottom: var(--space-md);
        }
        .py-lg-tab {
            padding-block: var(--space-lg);
        }
        .pt-lg-tab {
            padding-top: var(--space-lg);
        }
        .pb-lg-tab {
            padding-bottom: var(--space-lg);
        }
        .py-xl-tab {
            padding-block: var(--space-xl);
        }
        .pt-xl-tab {
            padding-top: var(--space-xl);
        }
        .pb-xl-tab {
            padding-bottom: var(--space-xl);
        }
    }
    @media (min-width: 992px) {
        .py-xs-lap {
            padding-block: var(--space-xs);
        }
        .pt-xs-lap {
            padding-top: var(--space-xs);
        }
        .pb-xs-lap {
            padding-bottom: var(--space-xs);
        }
        .py-sm-lap {
            padding-block: var(--space-sm);
        }
        .pt-sm-lap {
            padding-top: var(--space-sm);
        }
        .pb-sm-lap {
            padding-bottom: var(--space-sm);
        }
        .py-md-lap {
            padding-block: var(--space-md);
        }
        .pt-md-lap {
            padding-top: var(--space-md);
        }
        .pb-md-lap {
            padding-bottom: var(--space-md);
        }
        .py-lg-lap {
            padding-block: var(--space-lg);
        }
        .pt-lg-lap {
            padding-top: var(--space-lg);
        }
        .pb-lg-lap {
            padding-bottom: var(--space-lg);
        }
        .py-xl-lap {
            padding-block: var(--space-xl);
        }
        .pt-xl-lap {
            padding-top: var(--space-xl);
        }
        .pb-xl-lap {
            padding-bottom: var(--space-xl);
        }
    }
    @media (min-width: 1200px) {
        .py-xs-desk {
            padding-block: var(--space-xs);
        }
        .pt-xs-desk {
            padding-top: var(--space-xs);
        }
        .pb-xs-desk {
            padding-bottom: var(--space-xs);
        }
        .py-sm-desk {
            padding-block: var(--space-sm);
        }
        .pt-sm-desk {
            padding-top: var(--space-sm);
        }
        .pb-sm-desk {
            padding-bottom: var(--space-sm);
        }
        .py-md-desk {
            padding-block: var(--space-md);
        }
        .pt-md-desk {
            padding-top: var(--space-md);
        }
        .pb-md-desk {
            padding-bottom: var(--space-md);
        }
        .py-lg-desk {
            padding-block: var(--space-lg);
        }
        .pt-lg-desk {
            padding-top: var(--space-lg);
        }
        .pb-lg-desk {
            padding-bottom: var(--space-lg);
        }
        .py-xl-desk {
            padding-block: var(--space-xl);
        }
        .pt-xl-desk {
            padding-top: var(--space-xl);
        }
        .pb-xl-desk {
            padding-bottom: var(--space-xl);
        }
    }
}
@layer connor {
    
}
@layer zoe {
    .btn-close{
    --bs-btn-close-bg: ;
    --bs-btn-close-color: var(--bs-dark);
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    --bs-btn-close-focus-opacity: .75;
}
.navbar{
    --bs-navbar-brand-padding-y: 0;
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-navbar-active-color: #fff;
    & .navbar-brand{
        &:hover{
            opacity:.5;
        }
        &:focus{
            opacity:.5;
        }
    }
    & .navbar-nav{
        --bs-nav-link-color: #fff;
        --bs-nav-link-font-size: 18px;
        --bs-nav-link-hover-color: #fff;
        --bs-nav-link-padding-y: 0;
        & .dropdown{
            & .dropdown-menu{
                --bs-dropdown-border-radius: 0;
                --bs-dropdown-spacer: 1.35rem;
                --bs-dropdown-border-width: 0;
                --bs-dropdown-bg: #fff;
                --bs-dropdown-link-color: var(--bs-primary);
                --bs-dropdown-link-hover-color: var(--bs-primary);
                --bs-dropdown-link-hover-bg: rgb(249, 239, 229);
                --bs-dropdown-link-active-color: var(--bs-primary);
                --bs-dropdown-link-active-bg: rgb(249, 239, 229);
                --bs-dropdown-font-size: 18px;
                --bs-dropdown-color: var(--bs-dark);
                & .dropdown-item{
                    position:relative;
                    white-space: wrap;
                    & .nav-text{
                        display:block;
                        color:var(--bs-body-color);
                        font-size:16px;
                        @media (min-width:1900px){
                            font-size:var(--bs-dropdown-font-size);
                        }
                    }
                    &:hover{
                        text-decoration: underline;
                    }
                    &:focus{
                        text-decoration: underline;
                    }
                }
                & .nav-title{
                    padding:0 0.75rem;
                    margin-bottom:0;
                    font-weight:500;
                }
                & .container-link{
                    padding:0.75rem;
                }
            }
            &.dropdown-mega{
                & .dropdown-menu{
                    --bs-dropdown-padding-y: 1.5rem;
                    --bs-dropdown-item-padding-x: .75rem;
                    --bs-dropdown-spacer: 0rem;
                    &[data-bs-popper]{
                        right:0;
                        left:0;
                    }
                    & .dropdown-item{
                        &:hover{
                            text-decoration: none;
                            & .main-title{
                                text-decoration: underline;
                            }
                        }
                        &:focus{
                            text-decoration: none;
                            & .main-title{
                                text-decoration: underline;
                            }
                        }
                    }
                    & .blog-box{
                        padding:0 0 0 0.75rem;
                        & .card{
                            --bs-card-border-width: 0;
                            --bs-card-title-spacer-y: 0;
                            --bs-card-bg: var(--bs-dark);
                            --bs-card-title-color: #fff;
                            & img{
                                opacity:.65;
                            }
                            & .card-title{
                                font-size:21px;
                                line-height:1;
                            }
                            &:has(a:hover){
                                --bs-card-bg: var(--bs-primary);
                            }
                            &:has(a:focus){
                                --bs-card-bg: var(--bs-primary);
                            }
                        }
                    }
                }
                & .nav-box{
                    @media (min-width:1200px){
                        padding-right:.75rem;
                    }
                }
            }
        }
    }
    &::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--bs-black);
        border-bottom: 1px solid var(--bs-body-color);
        transition: all 0.25s ease;
        transition-property: transform, border-bottom-color;
    }
    & .nav-link {
        text-transform: uppercase;
        letter-spacing: 0.025em;
        position:relative;
        & .blue-bar {
            height: 1px;
            width: 0;
            background-color: #fff;
            display: block;
            position: absolute;
            bottom: 0;
            transition: width 0.3s ease-in-out;
            @media (min-width: 1200px) {
                width: 0;
                bottom: 0px;
            }
        }
        &.active {
            & .blue-bar {
                width: 100%;
                transition: width 0.3s ease-in-out;
                @media (min-width: 1200px) {
                    width: calc(100% - (2 * var(--bs-navbar-nav-link-padding-x)));
                }
            }
        }
        &.show {
            & .blue-bar {
                width: 100%;
                transition: width 0.3s ease-in-out;
                @media (min-width: 992px) {
                    width: calc(100% - (2 * var(--bs-navbar-nav-link-padding-x)));
                }
            }
        }
        &:hover {
            & .blue-bar {
                width: 100%;
                transition: width 0.3s ease-in-out;
                @media (min-width: 992px) {
                    width: calc(100% - (2 * var(--bs-navbar-nav-link-padding-x)));
                }
            }
        }
        &:focus {
            & .blue-bar {
                width: 100%;
                transition: width 0.3s ease-in-out;
                @media (min-width: 992px) {
                    width: calc(100% - (2 * var(--bs-navbar-nav-link-padding-x)));
                }
            }
        }
    }
    & .sale-nav {
        & .nav-link{
            color:var(--bs-primary);
            & .blue-bar{
                background-color: var(--bs-primary);
            }
        }
    }
    & .navbar-brand {
        & svg {
            height: 80px;
        }
    }
    & .dropdown-toggle::after {
        display: none;
    }
    @media (min-width:1200px) {
        &:not([data-is-stuck="true"]) {
            &::after {
                border-color: transparent;
                transform: translateY(calc(var(--nav-height) * -1));
            }
        }
    }
}
.text-light-text{
    color: var(--bs-light-text);
}
.plain-link{
    color:var(--bs-primary);
    text-decoration:none;
    text-transform: uppercase;
    font-size:21px;
    line-height:32px;
    letter-spacing:.05rem;
    & svg{
        font-size:18px;
        margin-left:2px;
    }
    &:hover{
        text-decoration: underline;
    }
    &:focus{
        text-decoration: underline;
    }
}
.disclaimer{
    font-size:15px;
    font-weight:500;
    letter-spacing:0.05em;
}
.google-play-review{
    color:var(--bs-secondary);
    & p{
        margin-bottom:0;
    }
    & svg{
        height:18px;
        width:auto;
        fill:var(--bs-secondary);
    }
}
.btn.glightbox{
    height:100px;
    width:100px;
    padding-top:33px;
    --bs-btn-font-size: 30px;
    --bs-btn-border-radius: 50%;
}
.app-link-row{
    & a:hover, a:focus{
        opacity:.5;
    }
    & .apple-link:has(button:hover){
        & img{
            opacity:.5;
        }
    }
    & .apple-link:has(button:focus){
        & img{
            opacity:.5;
        }
    }
}
.content{
    & p, li{
        font-size:18px;
    }
    & .top-subtitle{
        text-transform:uppercase;
        margin-bottom:0;
        font-size:16px;
        line-height:28px;
        font-weight:500;
    }
}
.hero-check-list ul{
    padding-left:0;
    margin-bottom:0;
    list-style: none;
    font-size:18px;
    & li{
        padding:8px 0;
        & svg{
            color:var(--bs-secondary);
            margin-right:5px;
        }
    }
}
.screenshot-grid{
    display: grid;
    grid-template-columns: 1fr 2fr;
    position: relative;
    width: 100%;
    overflow:hidden;
    column-gap: 1.5rem;
    grid-template-rows: 25px 1fr;
    & .desktop{
        position: relative;
        z-index: 1;
        grid-column: 1 / span 2;
        grid-row: 1 / span 2;
        @media (min-width:576px){
            grid-column: 2 / span 11;
        }
        @media (min-width:1400px){
            grid-column: 3 / span 11;
        }
    }
    & .mobile{
        position: relative;
        z-index: 2;
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        @media (min-width:576px){
            grid-column: 1 / span 4;
        }
        @media (min-width:1400px){
            grid-column: 2 / span 4;
        }
    }
    @media (min-width: 576px) {
        grid-template-columns: repeat(12, calc((100% / 12) - 1.5rem)) ;
        grid-template-rows: 50px 1fr;
    }
    @media (min-width: 992px) {
        grid-template-rows: 100px 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 1.5rem)) 1fr;
    }
}
header.bg-black{
    & .h3{
        color:var(--bs-light-text);
    }
}
.home-hero-grid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    position: relative;
    width: 100%;
    padding-top:0;
    padding-bottom: 0;
    overflow:hidden;
    background-color:#282728;
    column-gap: 1.5rem;
    & .content{
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        & h1{
            color:#fff;
        }
        & .h3{
            color:var(--bs-light-text);
            margin-bottom:1rem;
        }
        & hr{
            color:var(--bs-light-text);
            margin:1.5rem 0;
        }
        @media (min-width:992px){
            grid-column: 1 / span 6;
            grid-row: 2 / span 1;
        }
        @media (min-width:1200px){
            grid-column: 2 / span 5;
        }
    }
    & .trial-stuff{
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 3 / span 1;
        align-self:center;
        & .disclaimer{
            color:var(--bs-light-text);
            margin-bottom:0;
            margin-top:1.5rem;
        }
        @media (min-width:992px){
            grid-column: 1 / span 6;
            grid-row: 3 / span 1;
        }
        @media (min-width:1200px){
            grid-column: 2 / span 5;
        }
    }
    & .app-links{
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 4 / span 1;
        justify-self: center;
        @media (min-width:992px){
            grid-column: 7 / span 8;
            grid-row: 3 / span 1;
        }
        @media (min-width:1200px){
            grid-column: 7 / span 7;
        }
    }
    & .image{
        position: relative;
        z-index: 1;
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        & img{
            width:100%;
            top:0;
        }
        @media (min-width:992px){
            grid-column: 1 / span 14;
            grid-row: 1 / span 4;
        }
    }
    & .lightbox-btn{
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        align-self:center;
        justify-self: center;
        @media (min-width:992px){
            grid-column: 7 / span 8;
            grid-row: 2 / span 1;
        }
        @media (min-width:1200px){
            grid-column: 7 / span 7;
        }
    }
    & .gradient{
        display:none;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
        background-image: linear-gradient( 0deg, rgb(var(--bs-black-rgb)) 0%, rgba(var(--bs-black-rgb),0) 100%);
        @media (min-width:992px){
            display:block;
            grid-column: 1 / span 14;
            grid-row: 4 / span 1;
        }
    }
    @media (min-width: 992px) {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 1.5rem)) 1fr;
        grid-template-rows: var(--space-xl) 700px 150px var(--space-xl);
    }
    @media (min-width: 1200px) {
        grid-template-rows: var(--space-xl) 600px 100px var(--space-xl);
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-rows: var(--space-xl) 460px 100px var(--space-xl);
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 1.5rem)) 1fr;
    }
}
.text-hero-grid {
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    width: 100%;
    overflow:hidden;
    padding-top: 0;
    padding-bottom: 0;
    & .container-lg {
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self: center;
        padding-block: var(--md);
        @media (min-width:768px) {
            padding-block: 0;
        }
    }
    & .container-xl {
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self: center;
        padding-block: var(--md);
        @media (min-width:768px) {
            padding-block: 0;
        }
    }
    & .container-fluid {
        position: relative;
        z-index: 3;
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        align-self: center;
        padding-block: var(--md);
        @media (min-width:768px) {
            padding-block: 0;
        }
    }
    & .hero-picture {
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        height: 100%;
        width: 100%;
        position: relative;
        z-index: 1;
        top: 0;
        background: #000;
        & .bg-image {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover;
            object-position: center;
            position: relative;
            opacity: .7;
        }
        @media (min-width: 768px) {
            height: 100vh;
        }
    }
    & h1{
        color:#fff;
        & b{
            display:block;
        }
    }
    & h2{
        color:#fff;
    }
    & h3{
        color:#fff;
    }
    & p{
        color:#fff;
    }
    &.cta{
        & .h1{
            font-weight:500 !important;
        }
        & .hero-picture{
            @media (min-width: 768px) {
                height: 700px;
            }
        }
        @media (min-width: 768px) {
            height: 700px;
        }
    }
    &.video-hero{
        & .hero-picture{
            @media (min-width: 768px) {
                height: 700px;
            }
        }
        @media (min-width: 768px) {
            height: 700px;
        }
    }
    &.steps-grid{
        height:700px;
        & .container-xl{
            align-self:start;
            padding-top:var(--space-sm);
            @media (min-width:768px){
                padding-top:var(--space-md);
            }
        }
        & .container-fluid{
            align-self:start;
            padding-top:var(--space-sm);
            @media (min-width:768px){
                padding-top:var(--space-md);
            }
        }
        & .hero-picture{
            height:700px;
            @media (min-width: 768px) {
                height: clamp(1000px, 130vh, 1500px);
            }
        }
        @media (min-width: 768px) {
            height: clamp(1000px, 130vh, 1500px);
        }
        &.step-xl-grid{
            height:800px;
            & .hero-picture{
                height:800px;
                @media (min-width: 768px) {
                    height: clamp(1200px, 130vh, 1500px);
                }
            }
            @media (min-width: 768px) {
                height: clamp(1200px, 130vh, 1500px);
            }
        }
    }
    @media (min-width: 768px) {
        height: 100vh;
    }
}
.icon-stack{
    & p{
        font-size:18px;
    }
    & .title{
        margin-bottom:0;
        color:var(--bs-dark);
        font-weight:500;
    }
    & .icon-circle{
        color:var(--bs-secondary);
        border: 1px solid var(--bs-light-text);
        border-radius:50%;
        height:48px;
        width:48px;
        padding: 13px 12px 0;
        font-size:18px;
        text-align:center;
        align-self:start;
        line-height:1;
        margin-top:5px;
    }
}
.specs-tpl{
    & p{
        font-size:18px;
        margin-bottom:.25rem;
    }
    & .title{
        margin-bottom:0;
        color:var(--bs-dark);
        font-weight:500;
    }
}
.bg-black{
    & .icon-stack{
        & .title{
            color:#fff;
        }
    }
    & .hero-check-list ul{
        color:#fff;
    }
    & .card.icon-cards{
        --bs-card-bg: var(--bs-black);
        --bs-card-title-color: #fff;
        --bs-card-color: var(--bs-light-text);
        &.case-cards{
            & p strong{
                color:var(--bs-secondary);
            }
        }
    }
    & .table.compare-table{
        --bs-table-striped-bg: var(--bs-black);
        --bs-table-bg: #14222c;
        & th{
            color:#fff;
        }
        & thead{
            & th:not(.table-active){
                background-color:var(--bs-black);
            }
        }
        & tbody td ul li svg{
            color:#fff;
        }
    }
}
.stat-tpl{
    text-align: center;
    & p{
        margin-bottom:0
    }
}
.phone-grid{
    display:none;
    @media (min-width:768px){
        display:grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: 50px 45px 80px 2fr 1fr;
        position: relative;
        width: 100%;
        overflow:hidden;
        & .phone-item{
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 2;
            & img{
                width:100%;
            }
            &:first-child{
                grid-column: 1 / span 1;
                grid-row: 3 /span 3;
            }
            &:nth-child(2){
                grid-column: 2 / span 1;
                grid-row: 2 /span 4;
            }
            &:nth-child(3){
                grid-column: 3 / span 1;
                grid-row: 4 /span 2;
            }
            &:nth-child(4){
                grid-column: 4 / span 1;
                grid-row: 1 /span 5;
            }
            &:nth-child(5){
                grid-column: 5 / span 1;
                grid-row: 3 /span 3;
            }
        }
        & .bg-white{
            grid-column: 1 / span 5;
            grid-row: 5 /span 1;
            height: 100%;
            width: 100%;
            position: relative;
            z-index: 1;
        }
    }
}
.side-img-grid{
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    width: 100%;
    overflow:hidden;
    column-gap: 1.5rem;
    row-gap:1.5rem;
    & .img{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        position: relative;
        z-index: 1;
        & img{
            width:100%;
        }
        &.mobile-img{
            justify-self:center;
            & img{
                @media (min-width:768px){
                    width:75%;
                }
                @media (min-width:992px){
                    width:100%;
                }
                @media (min-width:1200px){
                    width:75%;
                }
                @media (min-width:1400px){
                    width:50%;
                }
            }
        }
    }
    & .content{
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        position: relative;
        z-index: 1;
    }
    @media (min-width: 992px) {
        & .content{
            grid-row: 1 / span 1;
            grid-column: 1 / span 7;
        }
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 1.5rem)) 1fr;
        & .img{
            grid-column: 8 / span 7;
        }
    }
    @media (min-width: 1200px) {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 1.5rem)) 1fr;
        & .content{
            grid-column: 2 / span 6;
        }
    }
}
.side-img-section .vstack{
    gap:var(--space-sm);
    .side-img-grid{
        padding-top: 0;
        padding-bottom: 0;
        & .content{
            align-self:center;
        }
        @media (min-width: 992px) {
            &:nth-child(2n+1){
                & .img{
                    grid-column: 1 / span 7;
                }
                & .content{
                    grid-column: 8 / span 7;
                }
            }
            &:nth-child(2n){
                & .img{
                    grid-column: 8 / span 7;
                }
                & .content{
                    grid-column: 1 / span 7;
                }
            }
        }
        @media (min-width: 1400px) {
            &:nth-child(2n+1){
                & .content{
                    grid-column: 8 / span 6;
                }
            }
            &:nth-child(2n){
                & .content{
                    grid-column: 2 / span 6;
                }
            }
        }
    }
    @media (min-width:768px){
        gap:var(--space-md);
    }
}
section.border-top{
    --bs-border-color: rgb(144, 144, 144);
}
.tab-container{
    & .nav-tabs{
        --bs-nav-tabs-border-color: var(--bs-light-text);
        --bs-nav-link-color: #fff;
        --bs-nav-tabs-link-active-color: #fff;
        --bs-nav-tabs-link-active-bg: var(--bs-primary);
        --bs-nav-tabs-link-active-border-color: var(--bs-primary) var(--bs-primary) var(--bs-light-text);
        --bs-nav-tabs-link-hover-border-color: #fff #fff var(--bs-light-text);
        --bs-nav-link-hover-color: var(--bs-primary);
        & .nav-link{
            text-transform:uppercase;
            letter-spacing: 0.1em;
        }
    }
    & .tab-content{
        border:1px solid var(--bs-light-text);
        border-top:none;
        border-radius: 0 0 10px 10px;
        padding:1.25rem .75rem;
        & strong{
            color:var(--bs-secondary);
        }
    }
}
.form-box{
    background:#fff;
    border-radius:10px;
    box-shadow: 10px 10px 50px rgba(126,104,93,.5);
}
.swiper-button-next, .swiper-button-prev{
    background:transparent;
    border:none;
    font-size:40px;
    width:auto;
    height:auto;
    &:after{
        display:none;
    }
    &:hover{
        opacity:.5;
    }
    &:focus{
        opacity:.5;
    }
}
.accordion{
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-color: var(--bs-dark);
    --bs-accordion-btn-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(20, 20, 20)" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>');
    --bs-accordion-btn-active-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="rgb(20, 20, 20)" viewBox="0 0 640 640"><!--!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z"/></svg>');
    --bs-accordion-btn-icon-transform: rotate(-45deg);
    --bs-accordion-active-color: var(--bs-dark);
    --bs-accordion-active-bg: #fff;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
    --bs-accordion-border-color: rgb(144, 144, 144);
    --bs-accordion-btn-padding-x: 0;
    --bs-accordion-body-padding-x: 0;
    & .accordion-item{
        border-left:none;
        border-right:none;
        border-bottom:none;
        border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
        &:first-of-type{
            border-top:none;
        }
        & .accordion-button{
            font-size:18px;
            font-weight:500;
            &:not(.collapsed){
                box-shadow:none;
            }
        }
        & .accordion-body{
            padding-top:0;
            & p, li{
                font-size:18px;
                line-height:28px;
                letter-spacing:0;
            }
        }
    }
    .second-accordion-col{
        @media (max-width:991px){
            & .accordion-item:first-of-type{
                border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
            }
        }
    }
}
.step-tpl{
    position:relative;
    & .orange-step{
        color:#fff;
        background-color:var(--bs-primary);
        border-radius:50%;
        font-size: var(--fz-title-1);
        text-align:center;
        height:100px;
        width:100px;
        line-height:1;
        padding-top:13px;
        margin:0 auto;
        z-index:2;
        position:relative;
    }
    & .orange-line{
        height:4px;
        width:100%;
        background-color: var(--bs-primary);
        position:absolute;
        z-index:1;
        top: 48px;
        right: 50%;
    }
    & .title{
        margin-top: 1.75rem;
        font-weight:500;
    }
    & p{
        font-size:21px;
    }
    & ul{
        padding-left:0;
        margin-bottom:0;
        list-style: none;
        font-size:18px;
        color:#fff;
        & li{
            padding:8px 0;
            & svg{
                color:var(--bs-secondary);
                margin-right:5px;
            }
        }
    }
}
.step-tab-container{
    position:relative;
    & .nav.nav-pills{
        --bs-nav-link-color: var(--bs-primary);
        --bs-nav-link-hover-color: #fff;
        --bs-nav-pills-link-active-bg: var(--bs-primary);
        --bs-nav-pills-border-radius: 30px;
        --bs-nav-link-padding-x: 2.5rem;
        --bs-nav-link-font-size: 18px;
        position:absolute;
        z-index:10;
        top:30px;
        left:0;
        right:0;
        & .nav-link{
            text-transform:uppercase;
            letter-spacing:0.1em;
        }
    }
}
.card.icon-cards{
    --bs-card-title-spacer-y: 0.75rem;
    --bs-card-border-color: var(--bs-light-text);
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.25rem;
    --bs-card-title-color: color:var(--bs-dark);
    &.feature-card{
        --bs-card-spacer-x: 0rem;
        --bs-card-border-width: 0;
        --bs-card-spacer-y: .75rem;
        & .card-body{
            padding-bottom:0;
        }
    }
    &.case-cards{
        & p strong{
            color:var(--bs-primary);
        }
    }
    & .card-title{
        font-weight:500;
        text-align:center;
        font-size:21px;
    }
    & ul{
        padding-left:0;
        margin-bottom:0;
        list-style: none;
        font-size:18px;
        & li{
            padding:8px 0;
            & svg{
                color:var(--bs-secondary);
                margin-right:5px;
            }
        }
    }
    & p{
        font-size:18px;
    }
    & .icon-wrapper{
        width: 94px;
        height: 94px;
        border: 1px solid var(--bs-secondary);
        border-radius: 50%;
        padding:.75rem;
        text-align:center;
        margin:calc(var(--bs-card-spacer-y) * 2) auto 0;
        & svg{
            height:64px;
        }
    }
}
.card.pricing-cards{
    --bs-card-title-spacer-y: 0;
    --bs-card-spacer-x: 1.25rem;
    --bs-card-spacer-y: 1.75rem;
    --bs-card-title-color: color:var(--bs-dark);
    --bs-card-border-width: 0;
    box-shadow: 10px 10px 50px rgba(126,104,93,.2);
    & .card-title{
        font-weight:500;
        font-size:21px;
    }
    & hr{
        margin: 2rem 0 1.5rem;
        opacity:.5;
        color:rgb(144, 144, 144);
    }
    & .price{
        color:var(--bs-primary);
        font-size:var(--fz-title-1);
        letter-spacing: 0;
        line-height:1;
        margin-bottom:.5rem;
    }
    & ul{
        padding-left:0;
        margin-bottom:0;
        list-style: none;
        font-size:18px;
        & li{
            padding:8px 0;
            & svg{
                color:var(--bs-secondary);
                margin-right:5px;
            }
        }
    }
    & p{
        font-size:18px;
    }
}
.white-logo path{
fill:#fff !important;
}
.table.compare-table{
    --bs-table-color: #929292;
    --bs-table-striped-color: #929292;
    --bs-table-striped-bg: #fff;
    --bs-table-bg: var(--bs-light);
    --bs-table-active-color: #fff;
    --bs-table-active-bg: var(--bs-primary);
    --bs-table-border-color: var(--bs-light-text);
    font-weight:500;
    font-size:18px;
    &>:not(caption)>*>*{
        padding: 1.25rem .5rem;
    }
    & .table-active{
        border-color:var(--bs-primary);
    }
    & thead{
        & th{
            text-align:center;
            border:none;
            color:var(--bs-dark);
            font-size:var(--fz-title-4);
            & .toolhound-logo{
                height:61px;
            }
            & .sortly-logo{
                height:40px;
            }
            & .smt-logo{
                height: 64px;
            }
            &.table-active svg{
                height:65px;
            }
        }
        & th:not(.table-active){
            background-color:#fff;
        }
    }
    & tbody{
        & td{
            text-align:Center;
            border:none;
            & ul{
                text-align:left;
                padding-left:0;
                margin-bottom:0;
                list-style: none;
                font-size:18px;
                & li{
                    padding:8px 0;
                    & svg{
                        color:var(--bs-secondary);
                        margin-right:5px;
                    }
                }
            }
            &.active ul li svg{
                color:#fff;
            }
            &:last-child{
                border-right: var(--bs-border-width) solid var(--bs-table-border-color);
            }
        }
        & th{
            color:var(--bs-dark);
            font-weight:500;
            border-right:none;
            border-top:none;
            border-bottom:none;
            border-left: var(--bs-border-width) solid var(--bs-table-border-color);
            vertical-align:middle;
        }
        & tr:first-child{
            & td:not(.table-active){
                border-top: var(--bs-border-width) solid var(--bs-table-border-color);
            }
            & th{
                border-top: var(--bs-border-width) solid var(--bs-table-border-color);
            }
        }
        & tr:last-child{
            & td:not(.table-active){
                border-bottom: var(--bs-border-width) solid var(--bs-table-border-color);
            }
            & th{
                border-bottom: var(--bs-border-width) solid var(--bs-table-border-color);
            }
        }
    }
}
.half-hero-cta{
    background-color: rgb(47, 66, 70);
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
    width: 100%;
    overflow:hidden;
    padding-top: 0;
    padding-bottom: 0;
    column-gap: 1.5rem;
    row-gap:1.5rem;
    & .bkg{
        grid-column: 1 / span 1;
        grid-row: 1 / span 1;
        position: relative;
        z-index: 1;
        & img{
            width:100%;
        }
        @media (min-width:992px){
            grid-column: 1 / span 9;
        }
    }
    & .content{
        grid-column: 1 / span 1;
        grid-row: 2 / span 1;
        position: relative;
        z-index: 3;
        align-self:center;
        & h2{
            color:#fff;
            & b, strong{
                font-weight:800;
            }
        }
        & p, li{
            color:#9bacaf;
        }
        & .disclaimer{
            margin-bottom:1.5rem;
        }
        @media (min-width:992px){
            grid-column: 8 / span 7;
            grid-row: 1 / span 1;
        }
        @media (min-width:1400px){
            grid-column: 8 / span 6;
        }
    }
    & .gradient{
        display:none;
        width: 100%;
        height: 100%;
        position: relative;
        z-index: 2;
        background-image: linear-gradient( -90deg, rgb(47, 66, 70) 50%, rgba(47, 66, 70,0) 100%);
        @media (min-width:992px){
            display:block;
            grid-column: 7 / span 3;
            grid-row: 1 / span 1;
        }
    }
    @media (min-width: 992px) {
        grid-template-columns: 1fr repeat(12, calc((960px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1200px) {
        grid-template-columns: 1fr repeat(12, calc((1140px / 12) - 1.5rem)) 1fr;
    }
    @media (min-width: 1400px) {
        grid-template-columns: 1fr repeat(12, calc((1320px / 12) - 1.5rem)) 1fr;
    }
}
footer{
    padding-top: var(--space-sm);
    padding-bottom:1.5rem;
    background-color:#12121a;
    & .footer-brand{
        &:hover{
            opacity:.5;
        }
        &:focus{
            opacity:.5;
        }
    }
    & .foot-title{
        color:#fff;
        margin-bottom:8px;
        font-weight:500;
        font-size:18px;
    }
    & .footer-link{
        text-decoration:none;
        font-size:18px;
        color:#919191;
        &:hover{
            color:var(--bs-primary);
        }
        &:focus{
            color:var(--bs-primary);
        }
    }
    & p{
        font-size:18px;
        color:#919191;
    }
    & hr{
        opacity:0.302;
        margin:2rem 0;
        color: rgb(144, 144, 144);
    }
    & .copyright{
        font-size:13px;
        line-height:20px;
        margin-bottom:0;
        & a{
            color:#919191;
        }
    }
    & .social-link{
        background-color:#fff;
        border-radius:50%;
        height:34px;
        width:34px;
        font-size:18px;
        color:#12121a;
        text-align:center;
        padding-top:3px;
        &:hover{
            color:var(--bs-primary);
        }
        &:focus{
            color:var(--bs-primary);
        }
    }
}
}
@layer ogulcan{
    
}