/*
 * Accessibility
 */

/* The first thing a keyboard user reaches: a link past the menu, shown only while it has focus. */
.skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 100000;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--dark);
    font-weight: 600;
    color: var(--white);
    transform: translateY(-200%);
}

.skip-link:focus {
    color: var(--white);
    transform: none;
}

/* The page content receives focus from the skip link; it needs no outline of its own. */
#main-content:focus {
    outline: none;
}

/* The theme removes focus outlines. This restores one for keyboard use only, so mouse clicks stay as designed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--theme) !important;
    outline-offset: 2px;
}

/* On the purple hero and dark footer the theme colour would not show. */
.header-1:not(.sticky):not(.style-2) a:focus-visible,
.header-1:not(.sticky):not(.style-2) button:focus-visible,
.footer-section a:focus-visible,
.footer-section button:focus-visible,
.footer-section input:focus-visible {
    outline-color: var(--theme2) !important;
}

/* The menu button is a real button now; it keeps the look it had as a plain element. */
.header-main .sidebar__toggle {
    line-height: 1;
}

/* People who ask their device for less motion get a still page. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }

    /* Elements that fade in on scroll are simply shown. */
    .wow {
        visibility: visible !important;
    }
}

/*
 * Page banner headings can now be a long title (a blog post, a service). They wrap
 * in the middle of the banner instead of running under the artwork at its sides.
 */
.breadcrumb-wrapper .page-heading h1 {
    max-width: 860px;
    margin-right: auto;
    margin-left: auto;
    text-wrap: balance;
}

/* The spam-trap field of the contact forms: out of sight and out of the tab order. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
 * Images carry width and height attributes so the page does not jump while they load.
 * Without this, an image narrowed by its container would keep its full height.
 */
img {
    height: auto;
}

.post-cat li i {
    color: var(--theme);
    margin-right: 6px;
}

/*
 * Colours chosen on the Appearance screen of the admin panel.
 * The variables are declared in main.css and set, when changed, on the <html> tag.
 */

/* Links in text take the link colour; a heading that is a link stays the heading colour. */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: var(--header);
}

/* On inner pages the menu bar is a bar of its own from the start, not only once the page is scrolled. */
.header-1.style-2 {
    background-color: var(--header-bg);
}

/* Shapes drawn in the page itself (the fill and stroke attributes are the fallback). */
.theme-fill {
    fill: var(--theme);
}

.theme-stroke {
    stroke: var(--theme);
}

/*
 * Sections with background artwork: the artwork is blended over one of these colours
 * (see tinted_background() in the site helper), so it follows the colour when it changes.
 */
.bg-cover.on-primary {
    background-color: var(--theme);
}

.bg-cover.on-tint {
    background-color: var(--bg);
}

/*
 * Home page: the two scrolling "The best solution" ribbons under the hero.
 * A white ribbon tilted one way crosses a lime ribbon tilted the other, and the
 * pair sits over the bottom edge of the hero. Sizes are in em so that changing
 * the font size at a breakpoint scales the ribbons and their overlap together.
 */
.marquee-section-1 {
    position: relative;
    /* Above the hero picture and text (8 and 9), below the sticky header (99). */
    z-index: 10;
    /*
     * Room for the tilted ends, which the hidden overflow would otherwise cut off.
     * The wider the screen, the further the ends swing, so the room grows with it.
     */
    padding: calc(30px + 2vw) 0 calc(20px + 3vw);
    /*
     * Pulled up over the hero by the top padding plus 16px: just enough that the
     * ribbons hide the hero's bottom edge all the way across without covering its text.
     */
    margin-top: calc(-46px - 2vw);
    overflow: hidden;
    font-size: 36px;
}

.marquee-section-1 .mycustom-marque {
    position: relative;
    /* Wider than the page so tilting never exposes the ends of a ribbon. */
    width: 110%;
    margin-left: -5%;
}

.marquee-section-1 .mycustom-marque.style-2 {
    z-index: 2;
    border-top: 1px solid var(--header);
    border-bottom: 1px solid var(--header);
    background-color: var(--white);
    transform: rotate(1.7deg);
}

.marquee-section-1 .mycustom-marque.style-3 {
    z-index: 1;
    /* Overlaps the white ribbon so the two cross instead of stacking. */
    margin-top: -1.75em;
    background-color: var(--theme2);
    transform: rotate(-2.8deg);
}

.marquee-section-1 .scrolling-wrap {
    gap: 0;
    padding: 0.7em 0;
    background-color: transparent;
}

.marquee-section-1 .scrolling-wrap .comm {
    gap: 1.1em;
    /* The trailing space belongs to the group, so the loop restarts without a jump. */
    padding-right: 1.1em;
    animation-duration: 45s;
}

/* The lime ribbon runs the other way. */
.marquee-section-1 .style-3 .scrolling-wrap .comm {
    animation-direction: reverse;
}

.marquee-section-1 .scrolling-wrap .comm .cmn-textslide {
    display: flex;
    align-items: center;
    gap: 0.7em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.3;
    color: var(--header);
}

.marquee-section-1 .cmn-textslide img {
    width: 1.15em;
    height: 1.15em;
}

@media (max-width: 1199px) {
    .marquee-section-1 {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .marquee-section-1 {
        font-size: 20px;
    }

    /* A narrow screen tilts the ribbons too little to cross, so the lime one sits lower and stays readable. */
    .marquee-section-1 .mycustom-marque.style-3 {
        margin-top: -0.6em;
    }
}

/*
 * Images uploaded in the admin panel can be any size; keep them to the size the design uses.
 * width and height stay automatic so an image is scaled down in proportion: its width and
 * height attributes would otherwise pin one side while the limit shrinks the other.
 */
.service-box-items .icon img {
    width: auto;
    max-width: 60px;
    height: auto;
    max-height: 60px;
}

.pricing-box-items .pricing-header .icon img {
    width: auto;
    max-width: 76px;
    height: auto;
    max-height: 76px;
}

.pricing-box-items .pricing-header p {
    margin-top: 12px;
    padding-right: 90px;
    color: var(--white);
    opacity: 0.8;
}

/* Home page project boxes: the sideways title is cut short rather than running over the number below it. */
.case-study-wrapper .main-box .box .title-items h3 {
    max-width: 225px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Project progress bars fill to the percentage set in the admin panel. */
.project-details-wrapper .project-details-content .progress-wrap .pro-items .progress-value {
    animation-name: progress-to;
}

@keyframes progress-to {
    from {
        width: 0;
    }

    to {
        width: var(--progress, 0%);
    }
}

/* Previous/next project are links, sized like the buttons the design used. */
.slider-button a.cmn-prev,
.slider-button a.cmn-next {
    display: inline-block;
}

/* Team, testimonial and "Stay Connected" pictures uploaded in the admin panel keep the shape the design uses. */
.team-card-items .team-image img {
    aspect-ratio: 338 / 375;
    object-fit: cover;
}

.cta-wrapper .cta-img img {
    width: auto;
    max-width: 321px;
    height: auto;
    max-height: 291px;
}

.testimonial-wrapper-3 .testimonial-content .client-info .client-img img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

/* Home page testimonials: the customer's photo in a circle, or their initial when they have no photo. */
.testimonial-box-items .testimonial-img > img {
    width: 102px;
    height: 102px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-box-items .testimonial-initial {
    width: 110px;
    height: 110px;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: 800;
    color: var(--theme);
}

/* Blog images uploaded in the admin panel are cropped to the shape each spot in the design uses. */
.news-box-items .news-image img {
    aspect-ratio: 338 / 241;
    object-fit: cover;
}

.news-standard-wrapper .news-standard-items .thumb img {
    aspect-ratio: 710 / 430;
    object-fit: cover;
}

.news-details-wrapper .news-post-details .single-news-post .post-content .details-image img {
    aspect-ratio: 370 / 269;
    object-fit: cover;
}

.main-sidebar .single-sidebar-widget .recent-post-area .recent-items .recent-thumb img {
    width: 78px;
    height: 79px;
    object-fit: cover;
}

.footer-widgets-wrapper .single-footer-widget .recent-post-area .recent-post-items .thumb {
    flex-shrink: 0;
}

.footer-widgets-wrapper .single-footer-widget .recent-post-area .recent-post-items .thumb img {
    object-fit: cover;
}

.blog-filter-note {
    margin-bottom: 10px;
}

.blog-filter-note a {
    margin-left: 6px;
    font-weight: 600;
    color: var(--theme);
}

/* Terms & Conditions and Privacy Policy */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-content h3 {
    margin: 40px 0 15px;
    font-size: 24px;
}

.legal-content p,
.legal-content ul {
    margin-bottom: 15px;
}

.legal-content ul {
    padding-left: 20px;
    list-style: disc;
}

.legal-content li {
    margin-bottom: 8px;
}

.legal-content a {
    color: var(--theme);
}

.legal-content .legal-updated {
    font-weight: 600;
    color: var(--header);
}

.form-message {
    margin-top: 16px;
    font-weight: 600;
}

.form-message:empty {
    display: none;
}

.form-message.success {
    color: #16a34a;
}

.form-message.error {
    color: #dc2626;
}

.preloader .animation-preloader .txt-loading.is-wide {
    font-size: clamp(1.35rem, 4.6vw, 3rem);
}

.preloader .animation-preloader .txt-loading .letter-gap {
    display: inline-block;
    width: 0.28em;
}

.preloader .animation-preloader .txt-loading .letters-loading[data-text-preloader]::before {
    animation-delay: var(--letter-delay, 0s);
}
git