:root,
.not-dark {
    --cnvs-themecolor-rgb: 170, 170, 170;
    --cnvs-primary-font: 'Inter', sans-serif;
    --cnvs-body-font: var(--cnvs-primary-font)
}

#header {
    --cnvs-primary-menu-font-size: 1.125rem;
    --cnvs-primary-menu-font-weight: 400;
    --cnvs-primary-menu-tt: none;
    --cnvs-primary-menu-ls: 0;
    --cnvs-primary-menu-hover-color: #000
}


.bg-light-yellow {
    background-color: #f9e4b4 !important
}

.magnetic-hover {
    transition: all .3s linear
}

.magnetic-hover>span,
.magnetic-hover>div {
    pointer-events: none;
    transition: all .1s linear
}

.ticker-wrap .ticker .ticker-item {
    color: #fff;
    font-size: 15vw;
    font-weight: 500;
    letter-spacing: -10px;
    font-size: max(9em, 13vw)
}

.section-works .work-item .ticker-wrap {
    --cnvs-ticker-duration: 180s;
    opacity: 0
}

.section-works .work-item:hover .ticker-wrap {
    opacity: 1
}

.section-works .ticker-wrap .ticker-item {
    font-size: 7vw;
    font-weight: 500;
    letter-spacing: 0;
    font-size: max(5em, 7vw)
}

.cnvs-cursor {
    --cnvs-cursor-bg: #FFF;
    --cnvs-cursor-action-bg: #FFF;
    --cnvs-cursor-opacity: 1;
    --cnvs-cursor-action-opacity: 1;
    --cnvs-cursor-size: .5rem;
    mix-blend-mode: difference
}

.text-fill-effect {
    --cnvs-text-fill-placeholder: rgba(var(--cnvs-contrast-rgb), 0.1);
    --cnvs-text-fill-color: linear-gradient(to right, var(--cnvs-contrast-1000), var(--cnvs-contrast-1000));
    -webkit-text-fill-color: var(--cnvs-text-fill-placeholder);
    position: relative;
    background-image: var(--cnvs-text-fill-color);
    background-size: calc(var(--cnvs-scroll-start) * 100%) 100%;
    background-repeat: no-repeat
}

.text-splitter.scroll-detect span {
    opacity: calc(0.1 + (1 * var(--cnvs-scroll-percent)));
    transform: rotateX(20deg);
    transition: all .3s ease;
    transition-delay: 0s
}

.text-splitter.scroll-detect.scroll-detect-inview span {
    transform: rotateX(0);
    transition-delay: calc(.04s * var(--cnvs-split-index))
}

.d-grid {
    display: -ms-grid;
    display: grid;
    grid-auto-columns: 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    -ms-grid-rows: auto auto auto;
    grid-template-rows: auto auto auto
}

.d-grid .grid-item-1,
.d-grid .grid-item-2,
.d-grid .grid-item-3 {
    display: flex;
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.d-grid .grid-item-1 {
    height: 400px;
    grid-column-start: 1;
    -ms-grid-column: 1;
    grid-column-end: 6;
    -ms-grid-column-span: 3;
    grid-row-start: 1;
    -ms-grid-row: 1;
    grid-row-end: 4;
    -ms-grid-row-span: 3
}

.d-grid .grid-item-2 {
    height: 200px;
    grid-column-start: 5;
    -ms-grid-row: 2;
    grid-column-end: 9;
    -ms-grid-column-span: 3;
    -ms-grid-row-span: 1;
    grid-row-start: 2;
    -ms-grid-row-align: center;
    grid-row-end: 3;
    align-self: center;
    justify-self: center;
    -ms-grid-column-align: center
}

.d-grid .grid-item-3 {
    height: 200px;
    -ms-grid-row: 3;
    grid-row-start: 3;
    grid-column-start: 6;
    -ms-grid-column-span: 3;
    grid-column-end: 9;
    -ms-grid-row-span: 1;
    grid-row-end: 4;
    -ms-grid-row-align: start;
    align-self: start;
    -ms-grid-column-align: center
}

@media(min-width:992px) {
    .section-bg {
        margin-top: -100px
    }

    .d-grid .grid-item-1 {
        height: auto;
        grid-column-end: 4
    }

    .d-grid .grid-item-2 {
        height: 300px;
        grid-column-start: 4;
        -ms-grid-row: 2;
        grid-column-end: 7
    }

    .d-grid .grid-item-3 {
        height: 200px
    }
}

.img-hover-block {
    z-index: 0
}

.hover-reveal {
    position: fixed;
    width: 240px;
    height: 160px;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 1
}

.hover-reveal__inner,
.hover-reveal__img {
    width: 100%;
    height: 100%;
    position: relative
}

.hover-reveal__img {
    background-size: cover;
    background-position: 50% 50%
}

.device-up-lg .section-blogs-lists>li {
    counter-increment: step-counter
}

.device-up-lg .section-blogs-lists>li>a::before {
    content: "0" counter(step-counter)'.';
    position: absolute;
    left: -1.25rem;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: var(--cnvs-primary-font);
    color: rgba(var(--cnvs-contrast-rgb), .2);
    line-height: 1
}

.device-up-lg .section-blogs-lists>li>a {
    padding-left: 10px
}

.device-up-lg .dark .section-blogs-lists>li>a:hover h3 {
    color: var(--bs-warning)
}

.device-down-lg .ls-n1,
.device-down-lg .ls-n2,
.device-down-lg .ls-n3,
.device-down-lg .ls-n4 {
    letter-spacing: 0 !important
}

.section-features ul {
    list-style: none
}

.section-features ul li::before {
    content: "\2022";
    position: relative;
    display: inline-block;
    width: 1.125rem;
    font-weight: 700;
    color: var(--bs-warning);
    top: -1px
}

.device-down-lg .cnvs-cursor {
    display: none
}