/*
 * parity.css — Landrick BS5-only classes for the 23 ported landing views
 * (index/ai, blockchain, charity, cleaner, consulting, creative-personal,
 *  crypto-two, finance, freelancer, furniture, gym, it-solution-two,
 *  law-firm, logistics, modern-app, modern-saas, nft, photography,
 *  restaurant, video-studio, videocall, web-programming, yoga).
 *
 * These views were converted from the Bootstrap-5 Landrick "landing" pack,
 * whose page-section classes do not exist in this repo's Bootstrap-4
 * stylesheets (public/css/style.css / bootstrap.min.css / brand.css).
 * This file supplies ONLY those missing classes — global, unprefixed,
 * loaded after style.css and brand.css. Do not move rules into style.css.
 *
 * Donor sources:
 *   - /Users/arionhardison/Desktop/html-landrick-myyc-ai-template/landrick/landing/assets/css/style.min.css   (primary; blue #2f55d4 accent)
 *   - /Users/arionhardison/Desktop/html-landrick-myyc-ai-template/assets/css/style.min.css                    (secondary; indigo #4f46e5 accent — avatar-xl-large, card-overlay, .btn-link.primary only)
 *   - /Users/arionhardison/Desktop/html-landrick-myyc-ai-template/landrick/landing/assets/css/bootstrap.min.css (BS5 utilities .top-0 / .bg-gradient, literalized)
 *
 * Adaptations (matching public/css/brand.css conventions):
 *   - accent hexes (#2f55d4 / #4f46e5)        -> var(--color-primary, #2f55d4)
 *   - rgba(47,85,212,a) / rgba(79,70,229,a)   -> rgba(var(--color-primary-rgb, 47, 85, 212), a)
 *   - darkened hover shade rgb(35.6,67.1,172.4) -> var(--color-primary-darker, #2443ac)
 *   - lightened blob fill rgb(152.7,171.4,233.9) -> rgba(var(--color-primary-rgb, 47, 85, 212), .45)
 *   - var(--bs-gradient)                       -> its BS5 literal value
 *   - unused color-scoped variants (*-secondary/success/info/warning/danger/light/dark/footer/muted, *-50 tints
 *     other than .primary-50) are NOT ported — the views only use the -primary variants.
 *
 * Class inventory (57 from primary donor): about-left, about-right, ai-hero, app-images-bottom, app-images-up, background, background-effect, bg-consulting, bg-gradient-overlay, bg-linear-gradient, bg-linear-gradient-2, bg-linear-gradient-primary, bg-photography, bg-shape, bg-video-studio, bg-video-wrapper, bid-btn, blog-primary, circles, client-image, client-testi, clip-text, clip-text-image, feature-full-bg, feature-primary, filter-border, freelance-hero, heading-lg, icon-color, img-one, img-two, it-home, item-img, link, modern-app-absolute-left, modern-app-absolute-right, modern-app-bg-shape, modern-app-round, modern-saas-absolute-left, modern-saas-absolute-right, mover-minus, nft, nft-creator, nft-image, nft-item, nft-primary, overlay-grid, personal-hero-para, primary-50, read-more, sub-title, team-primary, toggler, user, work-creative, work-primary, zoom-in-out.
 * From secondary donor: avatar-xl-large, card-overlay, primary (.btn-link.primary).
 * BS5 utilities: top-0, bg-gradient.
 * Supplemental (TODO-referenced, markup currently approximates): personal-hero,
 * personal-overlay, bg-linear-gradient-3, bg-linear-gradient-4.
 * Keyframes ported: animate, mover3, slideleft, zoom-in-zoom-out
 * (spinner-animation already exists in style.css).
 *
 * Deliberately NOT in this file:
 *   - mdi/mdi-*, uil/uil-* (covered by materialdesignicons.min.css / line-unicons.css)
 *   - JS/vendor hooks with no donor CSS: lightbox, mfp-image, jarallax, picture-item,
 *     filterCategory, timepicker, start, and the shuffle filter category tokens
 *     (all, branding, designing, development, photography)
 *   - classes absent from BOTH this repo and the donor template (newer-Landrick
 *     drift; listed in the port report): title-dark, title-dark-50, para-dark,
 *     designation, counter-box, counter-head, video-play-icon, mouse-down, faq-ans,
 *     schedule-time, bg-white-50, pb-8, ex-name, image-icon, login-form,
 *     timeline-subtitle, video-solution-cta, wrapper-full, categories-filter,
 *     filter-options, filters-group, filters-group-wrap.
 */

/* ---- .about-left  (used by: consulting) ---- */
.about-left .img-one {
    max-width: 70%;
}

.about-left .img-two {
    position: absolute;
    right: 0;
    bottom: 5%;
    max-width: 250px;
}

/* ---- .about-right  (used by: consulting) ---- */
.about-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: end;
}

.about-right .img-one {
    max-width: 70%;
}

.about-right .img-two {
    position: absolute;
    left: 0;
    bottom: 5%;
    max-width: 250px;
}

/* ---- .ai-hero  (used by: ai) ---- */
@media (max-width:768px) {
    .ai-hero .image img,
    .freelance-hero .bg-shape img {
        max-width: 550px;
    }
}

@media (max-width:767px) {
    .ai-hero .image img,
    .freelance-hero .bg-shape img {
        max-width: 100%;
        height: auto;
    }
}

.ai-hero:after,
.ai-hero:before {
    content: "";
    position: absolute;
    border: 2px dashed rgba(206,212,218,.5);
    border-radius: 50%;
    -webkit-animation: spinner-animation 72s linear infinite;
    animation: spinner-animation 72s linear infinite;
    z-index: -1;
}

.ai-hero:after {
    top: -40px;
    right: -128px;
    height: 576px;
    width: 576px;
}

@media (min-width:1024px) {
    .ai-hero:after {
        top: 0;
    }
}

.ai-hero:before {
    top: -144px;
    right: -224px;
    height: 768px;
    width: 768px;
}

@media (min-width:1024px) {
    .ai-hero:before {
        top: -96px;
    }
}

.ai-hero .image:after {
    content: "";
    position: absolute;
    top: -40px;
    right: 0;
    width: 672px;
    height: 672px;
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .4);
    border-radius: 50%;
    -webkit-filter: blur(100px);
    filter: blur(100px);
    pointer-events: none;
    z-index: -1;
}

@media (min-width:1024px) {
    .ai-hero .image:after {
        top: -96px;
    }
}

/* ---- .app-images-bottom  (used by: web-programming) ---- */
.classic-app-image .app-images-bottom {
    position: absolute;
    bottom: 10px;
    right: 0;
}

/* ---- .app-images-up  (used by: web-programming) ---- */
.classic-app-image .app-images-up {
    position: absolute;
    top: 10px;
    left: 0;
}

/* ---- .background  (used by: consulting) ---- */
@media (max-width:767px) {
    .bg-consulting .background {
        padding: 120px 12px 50px;
        background: #fff;
    }
}

/* ---- .background-effect  (used by: nft) ---- */
.background-effect .circles {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.background-effect .circles li {
    position: absolute;
    display: block;
    -webkit-animation: animate 25s linear infinite;
    animation: animate 25s linear infinite;
    bottom: -150px;
    background: rgba(var(--color-primary-rgb, 47, 85, 212), .15);
}

.background-effect .circles li:nth-child(1),
.background-effect .circles li:nth-child(10),
.background-effect .circles li:nth-child(2),
.background-effect .circles li:nth-child(3),
.background-effect .circles li:nth-child(4),
.background-effect .circles li:nth-child(5),
.background-effect .circles li:nth-child(6),
.background-effect .circles li:nth-child(7),
.background-effect .circles li:nth-child(8),
.background-effect .circles li:nth-child(9) {
    width: 24px;
    height: 24px;
}

.background-effect .circles li:nth-child(1) {
    left: 25%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.background-effect .circles li:nth-child(2) {
    left: 10%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 12s;
    animation-duration: 12s;
}

.background-effect .circles li:nth-child(3) {
    left: 70%;
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.background-effect .circles li:nth-child(4) {
    left: 40%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 18s;
    animation-duration: 18s;
}

.background-effect .circles li:nth-child(5) {
    left: 65%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.background-effect .circles li:nth-child(6) {
    left: 75%;
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

.background-effect .circles li:nth-child(7) {
    left: 35%;
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

.background-effect .circles li:nth-child(8) {
    left: 50%;
    -webkit-animation-delay: 15s;
    animation-delay: 15s;
    -webkit-animation-duration: 45s;
    animation-duration: 45s;
}

.background-effect .circles li:nth-child(9) {
    left: 20%;
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
    -webkit-animation-duration: 35s;
    animation-duration: 35s;
}

.background-effect .circles li:nth-child(10) {
    left: 85%;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    -webkit-animation-duration: 11s;
    animation-duration: 11s;
}

/* ---- .bg-consulting  (used by: consulting) ---- */
.bg-consulting {
    height: 100vh;
    background-size: cover!important;
    -ms-flex-item-align: center;
    align-self: center;
    position: relative!important;
    background-position: center center;
}

@media (max-width:767px) {
    .bg-consulting {
        padding: 0 0 300px;
        height: auto;
    }
}

@media (min-width:768px) {
    .bg-consulting:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
        height: 100%;
        background: #fff;
    }
}

/* ---- .bg-gradient-overlay  (used by: cleaner, gym) ---- */
.bg-gradient-overlay {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(25%,rgba(0,0,0,.3)),color-stop(50%,rgba(0,0,0,.6)),to(black));
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 25%,rgba(0,0,0,.6) 50%,#000 100%);
}

/* ---- .bg-linear-gradient  (used by: photography) ---- */
.bg-linear-gradient {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,0)),color-stop(80%,rgba(0,0,0,.3)),to(black));
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,0) 50%,rgba(0,0,0,.3) 80%,#000 100%);
}

/* ---- .bg-linear-gradient-2  (used by: photography) ---- */
.bg-linear-gradient-2 {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,.3)),color-stop(75%,rgba(0,0,0,.7)),to(black));
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.7) 75%,#000 100%);
}

/* ---- .bg-linear-gradient-primary  (used by: modern-saas) ---- */
.bg-linear-gradient-primary {
    background: -webkit-gradient(linear,left bottom,left top,from(rgba(var(--color-primary-rgb, 47, 85, 212), 0)),color-stop(50%,rgba(var(--color-primary-rgb, 47, 85, 212), .15)),to(rgba(var(--color-primary-rgb, 47, 85, 212), .3)));
    background: linear-gradient(to top,rgba(var(--color-primary-rgb, 47, 85, 212), 0) 0,rgba(var(--color-primary-rgb, 47, 85, 212), .15) 50%,rgba(var(--color-primary-rgb, 47, 85, 212), .3) 100%);
}

/* ---- .bg-photography  (used by: photography) ---- */
.bg-photography {
    height: 100vh;
    background-size: cover!important;
    -ms-flex-item-align: center;
    align-self: center;
    position: relative!important;
    background-position: center center;
}

@media (max-width:767px) {
    .bg-photography {
        padding: 300px 0;
        height: auto;
    }
}

/* ---- .bg-shape  (used by: freelancer) ---- */
.freelance-hero .bg-shape:after {
    opacity: .9;
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg);
}

@media (max-width:767px) {
    .freelance-hero .bg-shape:after {
        bottom: -5rem!important;
        height: 30rem;
    }
}

.freelance-hero .bg-shape:after {
    bottom: 0;
    left: 7rem;
    width: 100rem;
    height: 70rem;
    border-radius: 6rem;
}

@media (max-width:768px) {
    .freelance-hero .bg-shape:after {
        bottom: -10rem;
    }
}

@media (max-width:767px) {
    .freelance-hero .bg-shape:after {
        left: 15rem;
        width: 40rem;
        height: 30rem;
    }
}

.freelance-hero .bg-shape:after {
    -webkit-box-shadow: 0 0 40px rgba(var(--color-primary-rgb, 47, 85, 212), .5);
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb, 47, 85, 212), .5);
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .45);
}

.freelance-hero .bg-shape:after {
    content: " ";
    position: absolute;
    z-index: -1;
}

/* ---- .bg-video-studio  (used by: video-studio) ---- */
.bg-video-studio {
    height: 100vh;
    background-size: cover!important;
    -ms-flex-item-align: center;
    align-self: center;
    position: relative!important;
    background-position: center center;
}

/* ---- .bg-video-wrapper  (used by: video-studio) ---- */
.bg-video-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg-video-wrapper iframe {
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.77vh;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

/* ---- .bid-btn  (used by: nft) ---- */
.nft .bid-btn {
    position: absolute;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    bottom: -100px;
    right: 0;
    left: 0;
}

.nft:hover .bid-btn {
    bottom: 0;
}

/* ---- .blog-primary  (used by: cleaner, gym, it-solution-two, logistics, restaurant, web-programming) ---- */
.blog.blog-primary .tag {
    background: var(--color-primary, #2f55d4)!important;
}

.blog.blog-primary .readmore:hover,
.blog.blog-primary .title:hover {
    color: var(--color-primary, #2f55d4)!important;
}

.blog.blog-primary .link {
    color: var(--color-primary, #2f55d4)!important;
}

/* ---- .circles  (used by: nft) ---- */
/* (all .circles rules already emitted under earlier sections above) */

/* ---- .client-image  (used by: cleaner, gym, it-solution-two, logistics, modern-saas, restaurant, videocall) ---- */
.client-testi .client-image {
    margin-right: 16px;
}

/* ---- .client-testi  (used by: cleaner, gym, it-solution-two, logistics, modern-saas, restaurant, videocall, yoga) ---- */
.client-testi {
    cursor: e-resize;
}

.client-testi .content:before {
    content: "";
    position: absolute;
    top: 30px;
    left: 0;
    margin-left: 13px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: 8px solid #212529;
    border-color: transparent #fff #fff transparent;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    -webkit-box-shadow: 2px 2px 2px -1px rgba(33,37,41,.15);
    box-shadow: 2px 2px 2px -1px rgba(33,37,41,.15);
}

/* ---- .clip-text  (used by: logistics) ---- */
.clip-text {
    font-size: 190px;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.clip-text.clip-text-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width:1024px) {
    .clip-text {
        font-size: 180px;
    }
}

@media (max-width:768px) {
    .clip-text {
        font-size: 135px;
    }
}

@media (max-width:425px) {
    .clip-text {
        font-size: 50px;
    }
}

/* ---- .clip-text-image  (used by: logistics) ---- */
/* (all .clip-text-image rules already emitted under earlier sections above) */

/* ---- .feature-full-bg  (used by: cleaner, gym, logistics, web-programming) ---- */
.features.feature-primary.feature-full-bg .icon-color {
    color: var(--color-primary, #2f55d4)!important;
}

.features.feature-primary.feature-full-bg:hover {
    background-color: var(--color-primary, #2f55d4)!important;
}

.features.feature-full-bg {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.features.feature-full-bg .big-icon {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    opacity: .015;
    font-size: 180px;
}

.features.feature-full-bg:hover {
    -webkit-box-shadow: 0 10px 25px rgba(60,72,88,.15);
    box-shadow: 0 10px 25px rgba(60,72,88,.15);
    color: #fff!important;
}

.features.feature-full-bg:hover .icon-color i,
.features.feature-full-bg:hover .para {
    color: rgba(255,255,255,.5)!important;
}

.features.feature-full-bg:hover .content,
.features.feature-full-bg:hover .icon-color {
    z-index: 2;
}

.features.feature-full-bg:hover .big-icon {
    opacity: .05;
}

.features.feature-full-bg:hover .readmore {
    color: #fff!important;
}

/* ---- .feature-primary  (used by: cleaner, gym, it-solution-two, logistics, modern-saas, nft, photography, restaurant, videocall, web-programming, yoga) ---- */
.features.feature-primary .icon {
    background: rgba(var(--color-primary-rgb, 47, 85, 212), .1);
}

.features.feature-primary .image:before {
    background: linear-gradient(45deg,transparent,rgba(var(--color-primary-rgb, 47, 85, 212), .1));
}

.features.feature-primary .color,
.features.feature-primary .read-more {
    color: var(--color-primary, #2f55d4)!important;
}

.features.feature-primary.feature-clean .icons {
    color: var(--color-primary, #2f55d4)!important;
}

.features.feature-primary.feature-clean .icons i {
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .1);
}

.features.feature-primary.feature-clean .title:hover {
    color: var(--color-primary, #2f55d4)!important;
}

.features.feature-primary.key-feature .icon {
    background: linear-gradient(45deg,transparent,rgba(var(--color-primary-rgb, 47, 85, 212), .15));
    color: var(--color-primary, #2f55d4);
}

.features.feature-primary.course-feature .full-img {
    color: var(--color-primary, #2f55d4)!important;
}

.features.feature-primary.explore-feature:hover .icons,
.features.feature-primary.explore-feature:hover .title {
    color: var(--color-primary, #2f55d4)!important;
}

.features.feature-primary .btn-soft {
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .05)!important;
    border: 1px solid rgba(var(--color-primary-rgb, 47, 85, 212), .05)!important;
    color: var(--color-primary, #2f55d4)!important;
    -webkit-box-shadow: 0 3px 5px 0 rgba(var(--color-primary-rgb, 47, 85, 212), .1);
    box-shadow: 0 3px 5px 0 rgba(var(--color-primary-rgb, 47, 85, 212), .1);
}

.features.feature-primary .btn-soft.active,
.features.feature-primary .btn-soft.focus,
.features.feature-primary .btn-soft:active,
.features.feature-primary .btn-soft:focus,
.features.feature-primary .btn-soft:hover {
    background-color: var(--color-primary, #2f55d4)!important;
    border-color: var(--color-primary, #2f55d4)!important;
    color: #fff!important;
}

.features.feature-primary:hover .image:before {
    background: rgba(var(--color-primary-rgb, 47, 85, 212), .1);
}

/* ---- .filter-border  (used by: gym, restaurant) ---- */
.container-filter.filter-border li {
    color: #8492a6!important;
    border-bottom: 2px solid transparent;
}

.container-filter.filter-border li.active,
.container-filter.filter-border li:hover {
    color: var(--color-primary, #2f55d4)!important;
}

/* ---- .freelance-hero  (used by: freelancer) ---- */
/* (all .freelance-hero rules already emitted under earlier sections above) */

/* ---- .heading-lg  (used by: gym) ---- */
.title-heading .heading.heading-lg {
    font-size: 60px!important;
}

/* ---- .icon-color  (used by: gym, logistics, web-programming) ---- */
/* (all .icon-color rules already emitted under earlier sections above) */

/* ---- .img-one  (used by: consulting) ---- */
/* (all .img-one rules already emitted under earlier sections above) */

/* ---- .img-two  (used by: consulting) ---- */
/* (all .img-two rules already emitted under earlier sections above) */

/* ---- .it-home  (used by: it-solution-two) ---- */
.it-home {
    -webkit-animation: slideleft 30000s infinite linear;
    animation: slideleft 30000s infinite linear;
}

/* ---- .item-img  (used by: nft) ---- */
.nft.nft-item .nft-image .item-img {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.nft:hover .nft-image .item-img {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
}

/* ---- .link  (used by: creative-personal, nft) ---- */
.nft.nft-primary .link {
    color: var(--color-primary, #2f55d4)!important;
}

.work-container.work-primary .link {
    color: var(--color-primary, #2f55d4)!important;
}

/* ---- .modern-app-absolute-left  (used by: modern-app) ---- */
.modern-app-absolute-left,
.modern-app-absolute-right {
    position: absolute;
}

.modern-app-absolute-left {
    bottom: 7%;
    left: -2%;
}

@media (min-width:768px) {
    .modern-app-absolute-left {
        bottom: 20%;
        left: -7%;
    }
}

@media (min-width:1024px) {
    .modern-app-absolute-left {
        left: -10%;
    }
}

/* ---- .modern-app-absolute-right  (used by: modern-app) ---- */
.modern-app-absolute-right {
    top: 7%;
    right: -2%;
}

@media (min-width:768px) {
    .modern-app-absolute-right {
        top: 20%;
        right: -7%;
    }
}

@media (min-width:1024px) {
    .modern-app-absolute-right {
        right: -10%;
    }
}

/* ---- .modern-app-bg-shape  (used by: cleaner, modern-app, web-programming) ---- */
.modern-app-bg-shape:after {
    content: " ";
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: -webkit-gradient(linear,left top,right top,from(rgba(var(--color-primary-rgb, 47, 85, 212), .3)),color-stop(35%,rgba(var(--color-primary-rgb, 47, 85, 212), .5)),to(var(--color-primary, #2f55d4)));
    background: linear-gradient(to right,rgba(var(--color-primary-rgb, 47, 85, 212), .3) 0,rgba(var(--color-primary-rgb, 47, 85, 212), .5) 35%,var(--color-primary, #2f55d4) 100%);
    -webkit-box-shadow: 0 0 40px rgba(var(--color-primary-rgb, 47, 85, 212), .2);
    box-shadow: 0 0 40px rgba(var(--color-primary-rgb, 47, 85, 212), .2);
    z-index: -1;
}

@media (max-width:768px) {
    .modern-app-bg-shape:after {
        width: 400px;
        height: 400px;
    }
}

/* ---- .modern-app-round  (used by: modern-app, web-programming) ---- */
.modern-app-round {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    -webkit-filter: blur(100px);
    filter: blur(100px);
    pointer-events: none;
    z-index: -2;
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .15);
}

.modern-app-round.primary-50 {
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .5)!important;
}

/* ---- .modern-saas-absolute-left  (used by: cleaner, modern-saas) ---- */
.modern-saas-absolute-left,
.modern-saas-absolute-right {
    position: absolute;
}

.modern-saas-absolute-left {
    top: 2%;
    left: -2%;
}

@media (min-width:768px) {
    .modern-saas-absolute-left {
        top: 20%;
        left: -7%;
    }
}

@media (min-width:1024px) {
    .modern-saas-absolute-left {
        left: -10%;
    }
}

/* ---- .modern-saas-absolute-right  (used by: modern-app, modern-saas, web-programming) ---- */
.modern-saas-absolute-right {
    bottom: 2%;
    right: -2%;
}

@media (min-width:768px) {
    .modern-saas-absolute-right {
        bottom: 20%;
        right: -7%;
    }
}

@media (min-width:1024px) {
    .modern-saas-absolute-right {
        right: -10%;
    }
}

/* ---- .mover-minus  (used by: web-programming) ---- */
.mover-minus {
    -webkit-animation: mover3 1s infinite alternate;
    animation: mover3 1s infinite alternate;
}

/* ---- .nft  (used by: nft) ---- */
.nft.nft-primary .read-more:hover,
.nft.nft-primary .title:hover {
    color: var(--color-primary, #2f55d4)!important;
}

.nft.nft-primary .author .name:hover {
    color: var(--color-primary, #2f55d4)!important;
}

.nft.nft-primary .bg-soft {
    background-color: rgba(var(--color-primary-rgb, 47, 85, 212), .1)!important;
    border: 1px solid rgba(var(--color-primary-rgb, 47, 85, 212), .1)!important;
    color: var(--color-primary, #2f55d4)!important;
}

.nft.nft-primary .btn {
    background-color: var(--color-primary, #2f55d4)!important;
    border: 1px solid var(--color-primary, #2f55d4)!important;
    color: #fff!important;
    -webkit-box-shadow: 0 3px 5px 0 rgba(var(--color-primary-rgb, 47, 85, 212), .1);
    box-shadow: 0 3px 5px 0 rgba(var(--color-primary-rgb, 47, 85, 212), .1);
}

.nft.nft-primary .btn.active,
.nft.nft-primary .btn.focus,
.nft.nft-primary .btn:active,
.nft.nft-primary .btn:focus,
.nft.nft-primary .btn:hover {
    background-color: var(--color-primary-darker, #2443ac)!important;
    border-color: var(--color-primary-darker, #2443ac)!important;
    color: #fff!important;
}

.nft.nft-item {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.nft.nft-item .nft-image .overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    background: #212529;
}

.nft.nft-item:hover {
    -webkit-box-shadow: 0 5px 13px rgba(60,72,88,.2)!important;
    box-shadow: 0 5px 13px rgba(60,72,88,.2)!important;
}

.nft.nft-creator {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.nft.nft-creator img {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.nft.nft-creator:hover img {
    height: 90px!important;
    width: 90px!important;
}

.nft:hover .nft-image .overlay {
    opacity: .7;
}

/* ---- .nft-creator  (used by: nft) ---- */
/* (all .nft-creator rules already emitted under earlier sections above) */

/* ---- .nft-image  (used by: nft) ---- */
/* (all .nft-image rules already emitted under earlier sections above) */

/* ---- .nft-item  (used by: nft) ---- */
/* (all .nft-item rules already emitted under earlier sections above) */

/* ---- .nft-primary  (used by: nft) ---- */
/* (all .nft-primary rules already emitted under earlier sections above) */

/* ---- .overlay-grid  (used by: restaurant) ---- */
.work-container .overlay-grid {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.work-container .overlay-grid {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(25%,rgba(0,0,0,.25)),color-stop(50%,rgba(0,0,0,.5)),color-stop(75%,rgba(0,0,0,.75)),to(black));
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.25) 25%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.75) 75%,#000 100%);
}

.work-container.work-creative .overlay-grid {
    -webkit-transform: translateY(500px);
    transform: translateY(500px);
}

.work-container.work-creative:hover .overlay-grid {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* ---- .personal-hero-para  (used by: creative-personal) ---- */
@media (min-width:769px) {
    .personal-hero .personal-hero-para {
        position: absolute;
        top: 50%;
        backdrop-filter: blur(12px);
        background-color: rgba(248,249,250,.5);
        z-index: 1;
        padding: 24px;
    }
}

/* ---- .primary-50  (used by: web-programming) ---- */
/* (all .primary-50 rules already emitted under earlier sections above) */

/* ---- .read-more  (used by: blockchain, logistics, nft) ---- */
/* (all .read-more rules already emitted under earlier sections above) */

/* ---- .sub-title  (used by: creative-personal) ---- */
@media (max-width:768px) {
    .personal-hero .sub-title {
        color: #fff;
    }
}

/* ---- .team-primary  (used by: cleaner, gym, yoga) ---- */
.team.team-primary .name:hover {
    color: var(--color-primary, #2f55d4)!important;
}

/* ---- .toggler  (used by: ai) ---- */
.switcher-pricing .toggler {
    display: inline-block;
    vertical-align: middle;
}

.switcher-pricing .toggler {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    font-weight: 700;
}

/* ---- .user  (used by: charity, cleaner, consulting, finance, furniture, gym, it-solution-two, law-firm, logistics, restaurant, web-programming) ---- */
.blog .author .user,
.blog .teacher .user {
    color: #fff;
}

/* ---- .work-creative  (used by: charity, restaurant) ---- */
.work-container.work-primary.work-creative .work-icon,
.work-container.work-primary.work-modern .work-icon {
    color: var(--color-primary, #2f55d4)!important;
}

.work-container.work-primary.work-creative .work-icon:hover,
.work-container.work-primary.work-modern .work-icon:hover {
    background: var(--color-primary, #2f55d4)!important;
}

.work-container.work-creative .content {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
    overflow: hidden;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    z-index: 1;
}

.work-container.work-creative .content .title {
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.work-container.work-creative:hover .content {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.work-container.work-creative .icons {
    position: absolute;
    z-index: 2;
    opacity: 0;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.work-container.work-creative .icons .work-icon {
    height: 45px;
    width: 45px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.work-container.work-creative .icons .work-icon:hover {
    color: #fff!important;
}

.work-container.work-creative:hover .icons {
    opacity: 1;
}

.work-container.work-creative .icons {
    top: 0;
    right: 0;
}

/* ---- .work-primary  (used by: it-solution-two, photography, restaurant, yoga) ---- */
.work-container.work-primary .title:hover {
    color: var(--color-primary, #2f55d4)!important;
}

.work-container.work-primary .btn {
    background-color: var(--color-primary, #2f55d4)!important;
    border: 1px solid var(--color-primary, #2f55d4)!important;
    color: #fff!important;
    -webkit-box-shadow: 0 3px 5px 0 rgba(var(--color-primary-rgb, 47, 85, 212), .1);
    box-shadow: 0 3px 5px 0 rgba(var(--color-primary-rgb, 47, 85, 212), .1);
}

.work-container.work-primary .btn.active,
.work-container.work-primary .btn.focus,
.work-container.work-primary .btn:active,
.work-container.work-primary .btn:focus,
.work-container.work-primary .btn:hover {
    background-color: var(--color-primary-darker, #2443ac)!important;
    border-color: var(--color-primary-darker, #2443ac)!important;
    color: #fff!important;
}

.work-container.work-primary .bg {
    background-color: var(--color-primary, #2f55d4)!important;
}

/* ---- .zoom-in-out  (used by: modern-app) ---- */
.zoom-in-out {
    -webkit-animation: zoom-in-zoom-out 3s ease-out infinite;
    animation: zoom-in-zoom-out 3s ease-out infinite;
}

/* ======== secondary-donor ports ======== */

/* ---- .avatar-xl-large  (used by: modern-saas) ---- */
.avatar.avatar-xl-large {
    height: 180px;
    width: 180px;
}

/* ---- .card-overlay  (used by: restaurant, yoga) ---- */
.card .card-img .card-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 25%, transparent 35%, rgba(22,28,45,0.9) 100%);
    transition: all 0.5s ease;
}

.card:hover .card-img .card-overlay {
    opacity: 1;
}

/* ---- .primary  (used by: charity, restaurant, yoga — as .btn-link.primary) ---- */
.btn-link.primary {
    padding: 0 !important;
    color: #3c4858;
    position: relative;
}

.btn-link.primary:hover,
.btn-link.primary:focus,
.btn-link.primary:active,
.btn-link.primary.active,
.btn-link.primary.focus,
.btn-link.primary:not(:disabled):not(.disabled):active {
    color: var(--color-primary, #2f55d4) !important;
}

.btn-link.primary:after {
    background-color: var(--color-primary, #2f55d4) !important;
}

/* ======== BS5 bootstrap utilities ======== */

/* ---- .top-0  (used by: web-programming) — BS5 bootstrap utility absent from BS4 ---- */
.top-0 {
    top: 0 !important;
}

/* ---- .bg-gradient  (used by: it-solution-two) — BS5 bootstrap utility; var(--bs-gradient) inlined to its BS5 literal ---- */
.bg-gradient {
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0)) !important;
}

/* ======== supplemental (TODO-referenced) ======== */

/* ---- .personal-hero  (ancestor of .personal-hero-para/.sub-title rules; creative-personal.vue currently omits this wrapper class (see TODO there)) ---- */
.personal-hero:before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -20rem;
    width: 50rem;
    height: 50rem;
    right: 150px;
    left: 0;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--color-primary, #2f55d4);
}

@media (max-width:576px) {
    .personal-hero:before {
        width: 30rem;
        height: 30rem;
        bottom: -10rem;
    }
}

.personal-hero .personal-overlay {
    visibility: hidden !important;
}

@media (max-width:768px) {
    .personal-hero .personal-overlay {
        visibility: visible !important;
    }
}

@media (max-width:768px) {
    .personal-hero .para {
        color: rgba(255,255,255,.5);
    }
}

/* ---- .bg-linear-gradient-3  (referenced by a TODO(parity-fix) in charity.vue (markup currently approximates with an inline gradient)) ---- */
.bg-linear-gradient-3 {
    background: -webkit-gradient(linear,left top,right top,from(black),color-stop(25%,#000),color-stop(50%,rgba(0,0,0,.5)),color-stop(75%,rgba(0,0,0,.25)),to(rgba(0,0,0,0)));
    background: linear-gradient(to right,#000 0,#000 25%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.25) 75%,rgba(0,0,0,0) 100%);
}

/* ---- .bg-linear-gradient-4  (referenced by a TODO(parity-fix) in restaurant.vue (markup currently approximates)) ---- */
.bg-linear-gradient-4 {
    background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),color-stop(25%,rgba(0,0,0,.25)),color-stop(50%,rgba(0,0,0,.5)),color-stop(75%,rgba(0,0,0,.75)),to(black));
    background: linear-gradient(to bottom,rgba(0,0,0,0) 0,rgba(0,0,0,.25) 25%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.75) 75%,#000 100%);
}

/* ======== keyframes ======== */

@-webkit-keyframes slideleft {
    from { background-position:0 }
    to { background-position:90000% }
}

@keyframes slideleft {
    from { background-position:0 }
    to { background-position:90000% }
}

@-webkit-keyframes mover3 {
    0% { -webkit-transform:translateY(0);transform:translateY(0) }
    100% { -webkit-transform:translateY(-5px);transform:translateY(-5px) }
}

@keyframes mover3 {
    0% { -webkit-transform:translateY(0);transform:translateY(0) }
    100% { -webkit-transform:translateY(-5px);transform:translateY(-5px) }
}

@-webkit-keyframes zoom-in-zoom-out {
    0% { -webkit-transform:scale(1,1);transform:scale(1,1) }
    50% { -webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5) }
    100% { -webkit-transform:scale(1,1);transform:scale(1,1) }
}

@keyframes zoom-in-zoom-out {
    0% { -webkit-transform:scale(1,1);transform:scale(1,1) }
    50% { -webkit-transform:scale(1.5,1.5);transform:scale(1.5,1.5) }
    100% { -webkit-transform:scale(1,1);transform:scale(1,1) }
}

@-webkit-keyframes animate {
    0% { -webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);opacity:1;border-radius:10px }
    100% { -webkit-transform:translateY(-1000px) rotate(720deg);transform:translateY(-1000px) rotate(720deg);opacity:0 }
}

@keyframes animate {
    0% { -webkit-transform:translateY(0) rotate(0);transform:translateY(0) rotate(0);opacity:1;border-radius:10px }
    100% { -webkit-transform:translateY(-1000px) rotate(720deg);transform:translateY(-1000px) rotate(720deg);opacity:0 }
}