/* Ruqaba brand overrides on top of the base theme stylesheet. */

:root {
    /* #7A7A7A on #0D0D0D is ~4.3:1; this grey clears WCAG AA for body text. */
    --text-color: #A3A3A3;
}

/* ScrollSmoother used to clip decorative overflow (rotated marquee, edge
   shapes). Native scroll does not, so keep the page from growing sideways. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.page-wrapper {
    max-width: 100%;
    overflow-x: hidden;
}

.service-section .container,
.service-section .row,
.sec-title {
    max-width: 100%;
    min-width: 0;
}

/* The brand mark is square, unlike the wide logo the base theme ships with,
   so every logo slot needs an explicit height cap. */
.main-header .main-box .logo img,
.sticky-header .logo img,
.mobile-menu .nav-logo img,
.footer-logo img {
    width: auto;
    max-height: 54px;
}

.sticky-header .logo img,
.mobile-menu .nav-logo img {
    max-height: 42px;
}

.footer-logo img {
    max-height: 64px;
}

/* The mark is a transparent PNG sitting straight on the page background; a warm
   glow ties it to the accent colour so it reads as part of the header rather
   than a pasted-in tile. */
.main-header .main-box .logo img,
.sticky-header .logo img,
.footer-logo img {
    filter: drop-shadow(0 0 18px rgba(var(--theme-color1-rgb), 0.35));
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), filter 0.45s ease;
}

.main-header .main-box .logo a:hover img,
.sticky-header .logo a:hover img,
.footer-logo a:hover img {
    filter: drop-shadow(0 0 26px rgba(var(--theme-color1-rgb), 0.6));
    transform: translateY(-2px) scale(1.04);
}

/* Hero --------------------------------------------------------------------- */

.hero-1 {
    align-items: center;
    display: flex;
    min-height: 100vh;
    min-height: 100svh;
    padding: 170px 0 90px;
}

/* svh rather than vh so the mobile browser chrome collapsing does not leave the
   hero taller than the screen. min-height keeps it growable if the copy wraps
   past a full screen. */
@media (max-width: 991.98px) {
    .hero-1 {
        padding: 130px 0 70px;
    }
}

@media (max-width: 575.98px) {
    .hero-1 {
        padding: 120px 0 60px;
    }
}

.hero-1 .hero-video {
    background: #000;
    overflow: hidden;
    z-index: 0;
}

.hero-1 .hero-video video,
.hero-1 .hero-bg-video {
    display: block;
    filter: none;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.hero-1 .container {
    width: 100%;
}

/* The section below the hero is pulled up 35px on a solid black background,
   which painted a band across the bottom of the hero and stopped it reading as
   a clean full-screen panel. */
.hero-1 + .feature-section-2 {
    margin-top: 0;
}

/* Showreel ----------------------------------------------------------------- */

.video-image .showreel-media {
    border-radius: 40px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.showreel {
    cursor: pointer;
}

/* The stock overlay fades to solid brand orange, which buried the showreel now
   that the clip itself is the orange logo animation. A dark scrim with only a
   hint of accent keeps the heading readable and matches the rest of the page. */
.showreel::before {
    background: linear-gradient(
        180deg,
        rgba(13, 13, 13, 0) 18%,
        rgba(var(--theme-color1-rgb), 0.1) 55%,
        rgba(13, 13, 13, 0.9) 95%
    );
}

.showreel::after {
    background: rgba(255, 255, 255, 0.04);
}

/* The gradient wash and the soft white disc exist to keep the overlaid heading
   readable; once playback starts they only get in the way. */
.showreel::before,
.showreel::after,
.showreel .content .title {
    transition: opacity 0.5s ease;
}

.showreel.is-playing::before,
.showreel.is-playing::after,
.showreel.is-playing .content .title {
    opacity: 0;
    pointer-events: none;
}

.showreel .play-now {
    background: none;
    border: 0;
    padding: 0;
}

.showreel .play-now .icon {
    display: block;
    text-align: center;
}

.showreel.is-playing .play-now .icon::before {
    content: "\f04c";
}

.showreel.is-playing .play-now {
    opacity: 0;
}

.showreel.is-playing:hover .play-now {
    opacity: 1;
}

.showreel .play-now {
    transition: opacity 0.4s ease;
}

/* Quote modal ------------------------------------------------------------ */

.quote-modal .modal-content {
    background: var(--theme-color2);
    border: 1px solid var(--border-color2-rgba);
    border-radius: 16px;
    color: var(--theme-color-white);
}

.quote-modal .modal-header {
    border-bottom: 1px solid var(--border-color2-rgba);
    padding: 24px 30px;
}

.quote-modal .modal-body {
    padding: 30px;
}

.quote-modal .modal-title {
    color: var(--theme-color-white);
    font-size: 24px;
    font-weight: 500;
}

.quote-modal .modal-subtitle {
    color: var(--text-color);
    font-size: 15px;
    margin: 0;
}

.quote-modal .btn-close {
    filter: invert(1) grayscale(1);
    opacity: 0.6;
}

.quote-modal .btn-close:hover {
    opacity: 1;
}

.quote-modal label {
    color: var(--theme-color-white);
    display: block;
    font-size: 15px;
    margin-bottom: 10px;
}

.quote-modal .form-clt input,
.quote-modal .form-clt textarea,
.quote-modal .form-clt select {
    background: transparent;
    border: 1px solid var(--border-color2-rgba);
    border-radius: 8px;
    color: var(--theme-color-white);
    outline: none;
    padding: 16px 20px;
    width: 100%;
}

.quote-modal .form-clt textarea {
    min-height: 130px;
    resize: vertical;
}

.quote-modal .form-clt input::placeholder,
.quote-modal .form-clt textarea::placeholder {
    color: var(--text-color);
}

.quote-modal .form-clt input:focus,
.quote-modal .form-clt textarea:focus,
.quote-modal .form-clt select:focus {
    border-color: var(--theme-color1);
}

.quote-modal .form-clt .nice-select {
    background: transparent;
    border: 1px solid var(--border-color2-rgba);
    border-radius: 8px;
    color: var(--theme-color-white);
    height: auto;
    line-height: 1.6;
    padding: 16px 40px 16px 20px;
    width: 100%;
}

.quote-modal .form-clt .nice-select .list {
    background: var(--theme-color3);
    color: var(--theme-color-white);
    width: 100%;
}

.quote-modal .form-clt .nice-select .option:hover,
.quote-modal .form-clt .nice-select .option.focus,
.quote-modal .form-clt .nice-select .option.selected.focus {
    background: rgba(var(--theme-color1-rgb), 0.15);
}

/* Inline form validation -------------------------------------------------- */

.field-error {
    color: #ff6b6b;
    display: block;
    font-size: 14px;
    margin-top: 8px;
}

.form-clt.has-error input,
.form-clt.has-error textarea,
.form-clt.has-error select,
.form-clt.has-error .nice-select {
    border-color: #ff6b6b;
}

.form-feedback {
    border-radius: 8px;
    display: none;
    font-size: 15px;
    margin-bottom: 24px;
    padding: 16px 20px;
}

.form-feedback.is-visible {
    display: block;
}

.form-feedback.is-success {
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
}

.form-feedback.is-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #ff8b8b;
}

/* Toasts ------------------------------------------------------------------- */

#site-toasts {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: fixed;
    right: 24px;
    top: 110px;
    z-index: 2000;
}

.site-toast {
    background: var(--theme-color2);
    border: 1px solid var(--border-color2-rgba);
    border-left: 3px solid #22c55e;
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45);
    color: var(--theme-color-white);
    font-size: 15px;
    line-height: 1.6;
    max-width: 360px;
    opacity: 0;
    padding: 16px 20px;
    transform: translateY(-10px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.site-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.site-toast.is-error {
    border-left-color: #ef4444;
}

@media (max-width: 575.98px) {
    #site-toasts {
        left: 16px;
        right: 16px;
    }

    .site-toast {
        max-width: none;
    }
}

/* Portfolio ---------------------------------------------------------------- */

/* Every thumbnail is the same box: column width × 4:3. The photo is cropped
   to cover so mixed portrait/landscape art cannot change the card size. */
.project-section .row > [class*="col-"],
.project-section-3 .row > [class*="col-"],
.project-filter-grid > [class*="col-"] {
    display: flex;
}

.project-block {
    width: 100%;
}

.project-block .inner-block {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.project-block .image-block,
.project-block-three .image-block {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.project-block .image-block img,
.project-block .image-block .hover-img,
.project-block-three .image-block img {
    display: block;
    height: 100%;
    inset: 0;
    max-height: none;
    max-width: none;
    object-fit: cover;
    object-position: center;
    position: absolute !important;
    width: 100%;
}

.project-gallery-item {
    display: block;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
}

.project-gallery-item img {
    display: block;
    transition: transform 0.5s ease;
    width: 100%;
}

.project-gallery-item:hover img {
    transform: scale(1.05);
}

/* Team --------------------------------------------------------------------- */

/* Team photos fall back to a shared avatar, which is transparent art rather
   than a photograph, so it needs breathing room instead of a cover crop. */
.team-block .image-block {
    aspect-ratio: 1 / 1;
    background: var(--theme-color3);
}

.team-block .image-block img {
    height: 100%;
    object-fit: contain;
    padding: 20px;
    width: 100%;
}

/* Portfolio filter --------------------------------------------------------- */

.project-filter-grid .mix.is-filtered-out {
    display: none !important;
}

.featured-products .filters li {
    border-radius: 6px;
    color: var(--text-color);
}

.featured-products .filters li:before {
    background-color: var(--theme-color1);
}

/* Pricing ------------------------------------------------------------------ */

.pricing-block .pricing-description {
    color: var(--text-color);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 22px;
}

.pricing-block .price sub {
    bottom: 0;
    font-size: 16px;
}

.pricing-list li.excluded {
    opacity: 0.4;
    text-decoration: line-through;
}

/* Services page ------------------------------------------------------------ */

.services-details .service-details-image {
    border-radius: 12px;
    overflow: hidden;
}

.services-details .service-details-image img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.addon-price {
    color: var(--theme-color1);
    font-size: 18px;
    font-weight: 500;
    margin-top: 18px;
}

/* Project detail ----------------------------------------------------------- */

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-tags span {
    border: 1px solid var(--border-color2-rgba);
    border-radius: 40px;
    color: var(--text-color);
    font-size: 14px;
    padding: 8px 20px;
}

/* Contact page ------------------------------------------------------------- */

/* The shared form partial ships with the home page's boxed treatment; on the
   contact page it sits directly on the section background instead. */
.contact-form-plain {
    background: transparent;
    border: 0;
    padding: 0;
}

.contact-details__right .social-icon a {
    align-items: center;
    border: 1px solid var(--border-color2-rgba);
    border-radius: 50%;
    color: var(--theme-color-white);
    display: inline-flex;
    height: 44px;
    justify-content: center;
    margin-right: 10px;
    transition: all 0.4s ease;
    width: 44px;
}

.contact-details__right .social-icon a:hover {
    background: var(--theme-color1);
    border-color: var(--theme-color1);
}

.map-section .map {
    border: 0;
    display: block;
    filter: grayscale(1) invert(0.92) contrast(0.9);
    height: 500px;
}

/* About section ------------------------------------------------------------ */

/* The base theme paired this thumbnail with a pre-cropped asset and only
   constrained it below 1400px, so full-size photography blew the row apart on
   desktop. Lock the box at every width and let the counter take the rest. */
.about-content .about-thumb-items {
    align-items: stretch;
    gap: 20px;
}

.about-content .about-thumb-items .thumb1 {
    border-radius: 26px;
    flex: 0 0 230px;
    height: 190px;
    overflow: hidden;
}

.about-content .about-thumb-items .thumb1 img {
    border-radius: 26px;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.about-content .about-thumb-items .content {
    flex: 1 1 auto;
}

@media (max-width: 1199.98px) {
    .about-content .about-thumb-items .thumb1 {
        flex: 0 0 auto;
        height: 190px;
        width: 100%;
    }
}

/* The masked art panel is a fixed 750px while the column beside it grows with
   its copy; matching them keeps the two halves visually level. */
@media (min-width: 1200px) {
    .about-section .row > [class*="col-"] {
        display: flex;
    }

    .about-section .about-image-1,
    .about-section .about-content {
        width: 100%;
    }

    .about-image-1 {
        height: auto;
        min-height: 640px;
    }
}

/* Values / award list ------------------------------------------------------ */

/* Animating padding relayouts and re-wraps every row on each frame, which is
   what made this list stutter. Slide the two halves with transforms instead so
   the hover stays on the compositor. */
.award-block-two .list-item,
.award-block-three .list-item {
    padding-left: 30px;
    padding-right: 30px;
    transition: none;
}

.award-block-two .list-item:hover,
.award-block-two .list-item.active,
.award-block-three .list-item:hover,
.award-block-three .list-item.active {
    padding-left: 30px;
    padding-right: 30px;
}

.award-block-two .list-item .content-box,
.award-block-two .list-item .title-box,
.award-block-two .list-item .right-text,
.award-block-three .list-item .content-box,
.award-block-three .list-item .title-box,
.award-block-three .list-item .right-text {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.award-block-two .list-item:hover .title-box,
.award-block-three .list-item:hover .title-box {
    transform: translateX(14px);
}

.award-block-two .list-item:hover .right-text,
.award-block-three .list-item:hover .right-text {
    transform: translateX(-14px);
}

.award-block-two .list-item::after,
.award-block-three .list-item::after {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.award-block-two .list-item .right-text .text {
    max-width: 420px;
}

/* Generic hover easing ----------------------------------------------------- */

/* Several theme blocks ship with default `ease` timing that snaps at the end of
   the curve; a single expo-out easing makes every card feel the same. */
.service-block-one .inner-block,
.feature-block .inner-block,
.working-block-one .inner-block,
.team-block .inner-box,
.project-block .inner-box,
.pricing-block .inner-box,
.faq-block-one .title-box,
.choose-us-content-1 .feature-box .inner-box {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        background-color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

/* Selects ------------------------------------------------------------------ */

/* nice-select renders its own light-themed widget, which clashed badly with the
   dark underlined inputs it sits next to. */
.contact-form-box .nice-select,
.contact-form-style-1 .nice-select,
.form-clt .nice-select {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0;
    color: #fff;
    float: none;
    font-size: 16px;
    font-weight: 400;
    height: auto;
    line-height: 1.5;
    padding: 0 30px 27px 0;
    transition: border-color 0.4s ease;
    width: 100%;
}

.contact-form-box .nice-select:hover,
.contact-form-box .nice-select.open,
.contact-form-box .nice-select:focus,
.form-clt .nice-select:hover,
.form-clt .nice-select.open,
.form-clt .nice-select:focus {
    border-color: var(--theme-color1);
}

.contact-form-box .nice-select::after,
.form-clt .nice-select::after {
    border-color: var(--theme-color1);
    height: 7px;
    right: 6px;
    top: 42%;
    width: 7px;
}

.contact-form-box .nice-select .list,
.form-clt .nice-select .list {
    background-color: var(--theme-color3, #16181d);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    color: #fff;
    margin-top: 6px;
    max-height: 280px;
    overflow-y: auto;
    width: 100%;
}

.contact-form-box .nice-select .option,
.form-clt .nice-select .option {
    color: #fff;
    line-height: 42px;
    min-height: 42px;
    padding-left: 18px;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.contact-form-box .nice-select .option:hover,
.contact-form-box .nice-select .option.focus,
.contact-form-box .nice-select .option.selected.focus,
.form-clt .nice-select .option:hover,
.form-clt .nice-select .option.focus,
.form-clt .nice-select .option.selected.focus {
    background-color: rgba(var(--theme-color1-rgb), 0.16);
    color: var(--theme-color1);
}

/* The placeholder entry is a value-less prompt, not a real choice. */
.nice-select .option[data-value=""] {
    color: rgba(255, 255, 255, 0.55);
}

/* The quote modal keeps the boxed input treatment used elsewhere in the modal. */
.quote-modal .form-clt .nice-select {
    border: 1px solid var(--border-color2-rgba);
    border-radius: 8px;
    padding: 16px 40px 16px 20px;
}

.quote-modal .form-clt .nice-select::after {
    right: 20px;
}

/* Scroll performance ------------------------------------------------------- */

.marquee-two,
.tm-gsap-animate-circle,
[data-speed] {
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .tm-gsap-animate-circle,
    .ani-circle,
    .float-bob-y,
    .agency-orbit-ring {
        animation: none !important;
    }
}

/* Header actions ----------------------------------------------------------- */

/* Logo left, nav centre-left, Let's Talk + quote + hamburger grouped on the
   far right so they sit next to each other on every breakpoint. */
.header-style-one .main-box .nav-outer {
    justify-content: flex-start;
    gap: 40px;
}

.header-1 .header-actions {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 14px;
    margin-left: auto;
    position: relative;
    white-space: nowrap;
    z-index: 2;
}

.header-1 .contact-btn {
    height: 48px;
    line-height: 48px;
}

.header-1 .header-actions .quote-toggler {
    align-items: center;
    background-color: var(--theme-color1);
    border: 0;
    border-radius: 50%;
    color: #fff;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 48px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: all 0.4s ease-in-out;
    width: 48px;
}

.header-1 .header-actions .quote-toggler:hover {
    background-color: #fff;
    color: var(--theme-color2);
}

.header-1 .header-actions .mobile-nav-toggler,
.sticky-header .mobile-nav-toggler {
    align-items: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 5px;
    height: 48px;
    justify-content: center;
    margin-left: 2px;
    min-width: 48px;
    padding: 0;
    position: relative;
    width: 48px;
}

.header-1 .mobile-nav-toggler span,
.sticky-header .mobile-nav-toggler span {
    background: #fff;
    display: block;
    flex-shrink: 0;
    height: 2px;
    left: auto;
    margin: 0;
    position: static;
    right: auto;
    top: auto;
    transform: none;
    width: 22px;
}

.header-1 .mobile-nav-toggler span:first-child,
.header-1 .mobile-nav-toggler span:nth-child(2),
.header-1 .mobile-nav-toggler span:last-child,
.sticky-header .mobile-nav-toggler span:first-child,
.sticky-header .mobile-nav-toggler span:nth-child(2),
.sticky-header .mobile-nav-toggler span:last-child {
    bottom: auto;
    left: auto;
    margin: 0;
    right: auto;
    top: auto;
    transform: none;
    width: 22px;
}

.sticky-header .nav-outer {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 24px;
    justify-content: flex-end;
}

.sticky-header .header-actions {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-left: 0;
}

.sticky-header .contact-btn {
    background-color: var(--theme-color1);
    border-radius: 40px;
    color: #fff;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    padding: 0 18px;
    transition: all 0.4s ease-in-out;
}

.sticky-header .contact-btn:hover {
    background-color: #fff;
    color: var(--theme-color2);
}

@media only screen and (min-width: 1024px) {
    .sticky-header .mobile-nav-toggler {
        display: block;
    }
}

@media only screen and (max-width: 1023px) {
    .header-1 .contact-btn {
        display: inline-block;
        font-size: 13px;
        padding: 0 14px;
    }

    .header-1 .header-actions {
        gap: 10px;
    }
}

@media (max-width: 419.98px) {
    .header-1 .header-actions .quote-toggler {
        display: none;
    }
}

/* Hero video --------------------------------------------------------------- */

.hero-1 .hero-video {
    overflow: hidden;
    z-index: 0;
}

.hero-1 .hero-video::after {
    content: none;
}

.about-image-1 picture,
.choose-us-image-1 picture,
.contact-section .contact-image picture,
.about-thumb-items .thumb1 picture {
    display: block;
    height: 100%;
    width: 100%;
}

/* Section titles: SplitText wraps chars in divs. Those must stay inline so
   letters do not stack, but the line wrappers must remain block or the whole
   heading becomes one unbreakable strip that blows out the layout. */
.sec-title .title {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
}

.split-line,
.sec-title .title .split-line {
    display: block;
    overflow: hidden;
    white-space: normal;
}

.sec-title .title .split-line div {
    display: inline-block;
}

/* Portfolio hover ---------------------------------------------------------- */

.project-block .inner-block .content-block,
.project-block .inner-block .image-block .arrow-icon {
    display: none !important;
}

.project-block a.image-block {
    cursor: pointer;
    text-decoration: none;
}

.project-block .image-block::after {
    background: rgba(13, 13, 13, 0.45);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 2;
}

.project-block .inner-block .image-block .hover-img,
.project-block .inner-block .image-block .hover-img:first-child,
.project-block .inner-block .image-block .hover-img:nth-child(2) {
    filter: brightness(0.4) saturate(0.75) blur(0);
    height: 100%;
    inset: 0;
    object-fit: cover;
    object-position: center;
    opacity: 1;
    position: absolute !important;
    transform: scale(1);
    width: 100%;
}

.project-block .inner-block:hover .image-block::after {
    opacity: 0;
}

.project-block .inner-block:hover .image-block .hover-img,
.project-block .inner-block:hover .image-block .hover-img:first-child,
.project-block .inner-block:hover .image-block .hover-img:nth-child(2) {
    filter: brightness(1) saturate(1) blur(0);
    opacity: 1;
    transform: scale(1.05);
}

/* Marquee ------------------------------------------------------------------ */

.marquee-two .text i {
    color: currentColor;
    flex-shrink: 0;
    font-size: 22px;
    opacity: 0.9;
}

.marquee-section.style-2 .text i {
    color: #fff;
}

.marquee-section.style-3 .text i {
    color: var(--theme-color1);
}

/* Agency orbit (replaces the CAD / industrial work-process graphic) -------- */

.agency-orbit {
    height: 280px;
    margin: 0 auto;
    position: relative;
    width: 280px;
}

.agency-orbit-ring {
    border: 1px dashed rgba(250, 133, 19, 0.35);
    border-radius: 50%;
    inset: 18px;
    position: absolute;
}

.agency-orbit-core {
    align-items: center;
    background: rgba(250, 133, 19, 0.12);
    border: 1px solid rgba(250, 133, 19, 0.45);
    border-radius: 50%;
    box-shadow: 0 0 40px rgba(250, 133, 19, 0.18);
    color: var(--theme-color1);
    display: flex;
    font-size: 32px;
    height: 88px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 88px;
}

.agency-orbit-icon {
    align-items: center;
    background: var(--theme-color3, #16181d);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #fff;
    display: flex;
    font-size: 16px;
    height: 48px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: rotate(calc(var(--i) * 60deg)) translate(116px) rotate(calc(var(--i) * -60deg));
    width: 48px;
}

.agency-orbit-icon i {
    color: var(--theme-color1);
}

/* Lighthouse a11y / CLS ---------------------------------------------------- */

.skip-link {
    background: var(--theme-color1);
    clip-path: inset(50%);
    color: #111;
    font-weight: 600;
    height: 1px;
    left: 16px;
    overflow: hidden;
    padding: 12px 20px;
    position: absolute;
    top: 16px;
    white-space: nowrap;
    width: 1px;
    z-index: 100000;
}

.skip-link:focus {
    clip-path: none;
    height: auto;
    overflow: visible;
    width: auto;
}

.mobile-menu button.close-btn {
    background: transparent;
    border: 0;
    min-height: 48px;
    min-width: 48px;
    padding: 0;
}

.service-block-one .inner-block .content-box {
    transform: none;
}

.service-block-one .inner-block .content-box .arrow-link {
    opacity: 1;
    visibility: visible;
}

.feature-block .inner-block .content-box .title,
.service-block-one .inner-block .content-box .title,
.working-block-one .inner-block .content-box .title,
.choose-us-content-1 .feature-box .title,
.about-section .service-block-one .title {
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    line-height: var(--line-height-heading);
}

.back-to-top {
    min-height: 48px;
    min-width: 48px;
}