:root {
    /* Colors */
    --color-white-1: #fff;
    --color-black-1: #030303;
    --color-lime-1: #CFF85E;

    /* Color with opacity */
    --color-divider-1: #ffffff0f;
    --color-divider-2: #FFFFFF1A;

    /* Background Colors */
    --bg-color-1: #1a1a1a;
    --bg-color-2: #0d0d0d;
    --bg-color-3: #262626;

    /*Gradient Colors*/
    --gradient-color-1: linear-gradient(90deg,
            var(--color-lime-1) 0%,
            #a5d400 100%);
    --gradient-color-2: linear-gradient(90deg,
            var(--color-lime-1) 0%,
            #a5d400 50%,
            var(--color-lime-1) 100%);
    --gradient-size: 200% auto;

    /* Border Radius */
    --border-radius-1: 30px;
    --border-radius-2: 50%;
    --border-radius-3: 100px;
    --border-radius-4: 12px;
    --border-radius-5: 6px;

    /* Transitions */
    --transition-fast: all 0.3s ease-in-out;
    --transition-base: all 0.4s ease-in-out;

    /* Typography */
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-md: 20px;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.6em;
    --line-height-heading: 1.2em;

    /* Z-index layers */
    --z-overlay: 900;
    --z-navbar: 1000;
    --z-burger: 100001;

}

/***** Animation *****/
@keyframes skillmoveobject {
    50% {
        left: 40px;
    }
}

@keyframes teammoveobject {
    50% {
        right: 40px;
    }
}


@keyframes movestyle1 {
    0% {
        transform: translate(0, -25px);
    }

    100% {
        transform: translate(25px, 10px) rotate(20deg);
    }
}

@keyframes movestyle2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(25px, -50px) rotate(-20deg);
    }
}

@keyframes serviceCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(28px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes tabClickPulse {
    0% {
        transform: scale(1);
    }

    35% {
        transform: scale(0.92);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes showCarouselContent {
    to {
        opacity: 1;
        filter: blur(0);
        transform: translateY(0);
    }
}

@keyframes hideCarouselContent {
    to {
        opacity: 0;
        filter: blur(20px);
        transform: translateY(-150px);
    }
}

@keyframes showCarouselImage {
    to {
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: 0;
    }
}

@keyframes hideCarouselImage {
    from {
        width: 100%;
        height: 100%;
        border-radius: 0;
        left: 0;
        bottom: 0;
    }

    to {
        width: 150px;
        height: 220px;
        border-radius: 30px !important;
        left: 50%;
        bottom: 50px;
    }
}

@keyframes showThumbnail {
    to {
        width: 150px;
    }
}

@keyframes transformThumbanil {
    to {
        transform: translateX(0);
    }
}

@keyframes timeRunning {
    to {
        width: 0;
    }
}


/***** End Animation *****/


/***** Common Style *****/
body {
    background: var(--bg-color-2);
    font-family: "Sora", sans-serif;
    position: relative;
}

body.--lock-scroll {
    overflow: hidden;
}

/**
 * Baseline for every image on the site.
 *
 * The design's rules all assume the file has the exact proportions the mock-up
 * used. An image uploaded through the admin does not: a portrait photo in a
 * landscape slot used to stretch its container instead of being cropped by it,
 * and anything wider than its column pushed the page sideways. These two lines
 * mean an image of any size can be dropped in and still lay out sanely — the
 * per-component rules below (width/height 100% + object-fit) then decide how it
 * fills its box, and override `height: auto` wherever the box is fixed.
 */
img {
    max-width: 100%;
    height: auto;
}

/* Never let a media box be stretched by the file inside it. */
figure {
    margin: 0;
    overflow: hidden;
}

.special-btn button,
.special-btn a {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: var(--color-lime-1);
    border-radius: 14px;
    color: var(--color-black-1) !important;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: 1em;
    text-transform: capitalize;
    border: none;
    padding: 15px 56px 15px 24px;
    transition: var(--transition-base);
    overflow: hidden;
    z-index: 1;
    cursor: pointer;
}

.special-btn button::after,
.special-btn a::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0;
    height: 100%;
    background: var(--color-white-1);
    transition: var(--transition-base);
    z-index: -1;
}

.special-btn:hover button::after,
.special-btn:hover a::after {
    right: auto;
    left: 0;
    width: 100%;
}

.special-btn button i,
.special-btn a i {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    background-color: var(--color-white-1);
    color: var(--color-black-1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-md);
    font-weight: 900;
    transition: var(--transition-base);
}

.special-btn:hover button i,
.special-btn:hover a i {
    background-color: var(--color-lime-1);
    color: var(--color-black-1);
}

.gold-word {
    color: var(--color-lime-1) !important;
}

.special-word {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition-base);
}

/* Typewriter caret — see typewriter() in index.js, which adds `--typing` when
   it takes the accent word over and never removes it: the animation loops, so
   the caret belongs there the whole time, blinking through the pause when the
   word sits fully written.

   The caret is a painted box, not a character: `.special-word` fills its text
   with a clipped gradient and `-webkit-text-fill-color: transparent`, so a
   `content: "|"` would inherit that and come out invisible. A background on the
   pseudo-element is painted normally and stays lime.

   Nothing here runs unless the script marks the element, which it never does
   inside the editor or with reduced motion. */
.special-word.--typing::after {
    content: "";
    display: inline-block;
    width: 0.06em;
    min-width: 2px;
    height: 0.82em;
    margin-left: 0.06em;
    vertical-align: -0.08em;
    background-color: var(--color-lime-1);
    border-radius: 1px;
    animation: typewriter-caret 0.9s steps(1, end) infinite;
}

@keyframes typewriter-caret {
    0%,
    50% {
        opacity: 1;
    }

    50.01%,
    100% {
        opacity: 0;
    }
}

.modal-overlay {
    display: none;
    visibility: hidden;
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 1000vh;
    left: 0;
    top: 0;
    z-index: var(--z-overlay);
    background: rgba(0, 0, 0, 0.6);
}

.modal-overlay.--active {
    display: block;
    visibility: visible;
    opacity: 1;
}

.carousel {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.carousel .list .item {
    position: absolute;
    inset: 0 0 0 0;
}

.carousel .list .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(60%);
    border-radius: var(--border-radius-1);
}

.carousel .list .item .content {
    position: absolute;
    top: 20%;
    width: 1140px;
    max-width: 80%;
    left: 50%;
    transform: translateX(-50%);
    padding-right: 30%;
    box-sizing: border-box;
    color: var(--color-white-1);
    text-shadow: 0 5px 10px #0004;
}

.carousel .list .item .content .author {
    font-weight: bold;
    letter-spacing: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.carousel .list .item .content .title,
.carousel .list .item .content .topic {
    font-weight: bold;
    font-size: 5em;
    list-style: 1.3em;
    margin-top: 20px;
    margin-bottom: 20px;
    text-wrap: nowrap;
}

.carousel .list .item .content .topic {
    color: var(--color-lime-1);
}

.carousel .list .item .content .description {
    line-height: 1.6rem;
    margin-top: 20px;
    margin-bottom: 20px;
}

.carousel .list .item .content .buttons {
    display: grid;
    grid-template-columns: repeat(2, 250px);
    grid-template-rows: 1fr;
    gap: 20px;
    margin-top: 20px;
}

.carousel .list .item .content button {
    border: none;
    background: var(--gradient-color-1);
    letter-spacing: 3px;
    font-weight: 500;
    padding: 20px;
    color: var(--color-black-1);
}

.carousel .list .item .content button:last-child {
    background: transparent;
    border: 1px solid var(--color-lime-1);
}

/* thumbnail */

.thumbnail {
    position: absolute;
    bottom: 50px;
    left: 50%;
    width: max-content;
    z-index: 100;
    display: flex;
    gap: 20px;
}

.thumbnail .item {
    width: 150px;
    height: 220px;
    flex-shrink: 0;
    position: relative;
}

.thumbnail .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(60%);
    border-radius: var(--border-radius-1);
}

.thumbnail .item .content {
    position: absolute;
    bottom: 20px;
    left: 5px;
    right: 5px;
    color: var(--color-white-1);
}

.thumbnail .item .content .title {
    font-weight: bold;
    margin-bottom: 3px;
}

/* arrows */

.arrows {
    position: absolute;
    top: 80%;
    right: 52%;
    width: 300px;
    max-width: 30%;
    display: flex;
    gap: 10px;
    align-items: center;
}

.arrows button {
    width: 60px;
    height: 60px;
    border-radius: var(--border-radius-2);
    background: var(--bg-color-3);
    border: none;
    color: var(--color-white-1);
    font-weight: bold;
    font-size: x-large;
    transition: .5s;
    opacity: 0.9;
    z-index: 100;
}

.arrows button:hover {
    opacity: 1;
}

.carousel .list .item:nth-child(1) {
    z-index: 1;
}

.carousel .list .item:nth-child(1) .author,
.carousel .list .item:nth-child(1) .title,
.carousel .list .item:nth-child(1) .topic,
.carousel .list .item:nth-child(1) .description,
.carousel .list .item:nth-child(1) .buttons {
    transform: translateY(50px);
    filter: blur(20px);
    opacity: 0;
    animation: showCarouselContent 0.5s 1 linear forwards;
    margin-top: 20px;
    margin-bottom: 20px;
}

.carousel .list .item:nth-child(1) .title {
    animation-delay: 0.7s;
}

.carousel .list .item:nth-child(1) .topic {
    animation-delay: 0.9s;
}

.carousel .list .item:nth-child(1) .description {
    animation-delay: 1.1s;
}

.carousel .list .item:nth-child(1) .buttons {
    animation-delay: 1.3s;
}

/* effect next click */
.carousel.next .list .item:nth-child(1) img {
    width: 150px;
    height: 220px;
    position: absolute;
    left: 50%;
    bottom: 50px;
    border-radius: var(--border-radius-1);
    animation: showCarouselImage 0.5s linear 1 forwards;
}

.carousel.next .thumbnail .item:nth-last-child(1) {
    width: 0;
    overflow: hidden;
    animation: showThumbnail 0.5s linear 1 forwards;
}

.carousel.next .thumbnail {
    transform: translateX(150px);
    animation: transformThumbanil 0.5s linear 1 forwards;
}

/* effect prev click */
.carousel.prev .list .item:nth-child(2) {
    z-index: 2;
}

.carousel.prev .list .item:nth-child(2) {
    position: absolute;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    animation: hideCarouselImage 0.7s linear 1 forwards;
}

.carousel.prev .thumbnail .item:nth-child(1) {
    width: 0;
    overflow: hidden;
    opacity: 0;
    animation: showThumbnail 0.1s linear 1 forwards;
}

.carousel.prev .list .item:nth-child(2) .author,
.carousel.prev .list .item:nth-child(2) .title,
.carousel.prev .list .item:nth-child(2) .topic,
.carousel.prev .list .item:nth-child(2) .description,
.carousel.prev .list .item:nth-child(2) .buttons {
    animation: hideCarouselContent 0.5s linear 1 forwards;
    z-index: 1;
}

.carousel.next .arrows button,
.carousel.prev .arrows button {
    pointer-events: none;
    cursor: not-allowed;
}

/* time */
.time {
    width: 0%;
    height: 5px;
    background-color: var(--color-lime-1);
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
}

.carousel.next .time,
.carousel.prev .time {
    width: 100%;
    animation: timeRunning 2s linear 1 forwards;
}

/***** End Common Style *****/

/***** Modal/Dialog *****/

.modal-body {
    padding: 0 58px 58px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-dialog {
    max-width: 60%;
}

.modal-content {
    background-color: var(--bg-color-1);
    border-radius: var(--border-radius-1);
    min-height: 600px;
}

.modal-content .modal-header {
    padding: 30px 30px 10px 30px;
    border: unset;
}

.modal-header .btn-close {
    background: none;
    box-shadow: none;
    opacity: 1;
    padding: 0;
    margin: 0;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-2);
    background-color: var(--bg-color-3);
    transition: var(--transition-fast);
}

.modal-header .btn-close:hover {
    background-color: var(--color-lime-1);
}

.modal-header .btn-close i {
    font-size: var(--font-size-base);
    color: var(--color-white-1);
    pointer-events: none;
}

.modal-content .modal-header {
    display: flex;
    justify-content: flex-end;
    padding: 20px 20px 0 20px;
    border: none;
}

.modal-dialog .our-service__header {
    width: 100%;
    margin-bottom: 40px;
    border: unset;
}

.gallery-image-modal .modal-dialog {
    max-width: 80%;
}

.gallery-image-modal .modal-content {
    min-height: unset;
    border: unset;
}

.gallery-image-modal .modal-body {
    padding: 0 30px 30px;
}

.gallery-image-modal .modal-content {
    background: unset;
    height: auto;
}

.gallery-image-modal .modal-header {
    padding-bottom: 20px;
}

.gallery-image-modal .modal-body img {
    width: 100%;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--border-radius-1);
}

.modal-body .gallery {
    height: 100%;
}

.gallery-image-modal .gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    opacity: 0;
    pointer-events: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-2);
    background: var(--color-white-1);
    color: var(--color-black-1);
    cursor: pointer;
    transform: translateY(-50%);
    transition: var(--transition-base);
}

.gallery-image-modal .modal-body:hover .gallery-nav {
    opacity: 1;
    pointer-events: unset;
}

.gallery-image-modal .gallery-nav i {
    color: var(--color-black-1);
    font-size: var(--font-size-md);
    line-height: 1;
}

.gallery-image-modal .gallery-nav:hover {
    background: var(--color-lime-1);
}

.gallery-image-modal .gallery-nav--prev {
    left: 10px;
}

.gallery-image-modal .gallery-nav--next {
    right: 10px;
}

.gallery-image-modal .modal-body:hover .gallery-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.modal-dialog .contact-us-form {
    border: unset;
    background: unset;
    padding: unset;
    height: 100%;
}

.modal-dialog .contact-us-form form {
    height: 100%;
}

.modal-dialog .contact-us__info-list {
    margin-top: unset;
    padding-top: unset;
    border: unset;
}

.modal-dialog .pricing-plan__card-header {
    margin-bottom: 20px;
}

.modal-dialog .our-service__header h2 {
    text-align: start;
    font-size: 30px;
    margin-top: 10px;
}

.modal-dialog textarea {
    min-height: 150px;
}

/***** End Modal/Dialog *****/


/***** Navbar *****/

header {
    position: sticky;
    z-index: var(--z-navbar);
    top: 10px;
    left: 0;
    right: 0;
}

.navbar {
    padding: 20px 30px;
    margin: 20px 20px;
    transition: all 0.3s ease-out;
    background: var(--bg-color-1);
    border-radius: var(--border-radius-1);
    max-height: 115px;
    position: relative;
    border: 1px solid var(--color-divider-1);
}

header.--scrolled {
    top: 0;
}

header.--scrolled .navbar {
    margin: 20px 0px;
    border-radius: unset;
}

/**
 * Bootstrap gives `.navbar > .container-fluid` justify-content: space-between.
 * With three children of very different widths (logo, menu, switcher + CTA) the
 * menu lands wherever the leftovers put it — visibly left of centre. Letting the
 * two outer children share the free space equally pins the menu to the middle
 * regardless of how long the CTA label or the language code is.
 */
.navbar>.container-fluid>.navbar__logo,
.navbar>.container-fluid>.navbar__actions {
    flex: 1 1 0;
    min-width: 0;
}

.navbar>.container-fluid>.navbar__actions {
    justify-content: flex-end;
}

.navbar>.container-fluid>.navbar__menu-list {
    flex: 0 1 auto;
}

.navbar__logo {
    height: 60px;
}

/* width:auto, not 100%: the logo box is now a stretched flex child, and a
   full-width image would sit centred inside it instead of hugging the left. */
.navbar__logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}

.navbar__menu-item {
    margin: 0 5px;
    position: relative;
}

.navbar__menu-item a {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: var(--line-height-heading);
    padding: 14px 10px;
    color: var(--color-white-1);
    text-transform: capitalize;
    text-wrap: nowrap;
    transition: all 0.1s ease-in-out;
}

.navbar__menu-item:hover a {
    color: var(--color-lime-1);
}

.submenu ul {
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    min-width: 220px;
    border-radius: var(--border-radius-4);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    background: var(--bg-color-3);
    border: 1px solid rgba(207, 248, 94, 0.12);
    border-top: 2px solid var(--color-lime-1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.25s ease, transform 0.25s ease, display 0.25s allow-discrete;
    text-align: left;
    flex-direction: column;
    z-index: var(--z-navbar);
}

/* invisible bridge so hover doesn't break when moving mouse from trigger to dropdown */
.submenu ul::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.submenu:hover ul {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

@starting-style {
    .submenu:hover ul {
        opacity: 0;
        transform: translateY(-8px);
    }
}

.submenu ul>li>a {
    display: flex;
    align-items: center;
    color: var(--color-white-1) !important;
    width: 100%;
    padding: 10px 20px !important;
    font-size: 15px;
    font-weight: 400;
    border-left: 2px solid transparent;
    transition: color 0.2s ease, background-color 0.2s ease, padding-left 0.2s ease, border-color 0.2s ease;
}

.submenu ul>li>a:hover,
.submenu ul>li>a:focus {
    color: var(--color-lime-1) !important;
    background-color: rgba(207, 248, 94, 0.06) !important;
    border-left-color: var(--color-lime-1);
    padding-left: 26px !important;
}

.submenu>a>i {
    transition: transform 0.3s ease;
    display: inline-block;
}

.submenu:hover>a>i {
    transform: rotate(180deg);
}

.navbar__burger {
    flex-direction: column;
    justify-content: space-between;
    padding: 10px;
    background: var(--gradient-color-1);
    width: 40px;
    height: 35px;
    border-radius: var(--border-radius-5);
    cursor: pointer;
    z-index: var(--z-burger);
}

.navbar__burger span {
    width: 100%;
    height: 3px;
    background-color: var(--color-black-1);
    border-radius: var(--border-radius-1);
    transition: var(--transition-fast);
    transform-origin: center;
}

.navbar__burger.--active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.navbar__burger.--active span:nth-child(2) {
    opacity: 0;
}

.navbar__burger.--active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/***** End Navbar *****/

/***** Language switcher *****/

.navbar__actions {
    gap: 15px;
}

.lang-switcher {
    position: relative;
}

.lang-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: transparent;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-3);
    color: var(--color-white-1);
    /* reset.css doesn't normalize <button>, so it would fall back to the UA font */
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--transition-fast);
}

.lang-switcher__toggle:hover,
.lang-switcher.--open .lang-switcher__toggle {
    color: var(--color-lime-1);
    border-color: var(--color-lime-1);
}

.lang-switcher__caret {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.lang-switcher.--open .lang-switcher__caret {
    transform: rotate(180deg);
}

.lang-switcher__list {
    display: none;
    opacity: 0;
    transform: translateY(-8px);
    padding: 8px 0;
    margin: 0;
    list-style: none;
    min-width: 180px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    border-radius: var(--border-radius-4);
    background: var(--bg-color-3);
    border: 1px solid rgba(207, 248, 94, 0.12);
    border-top: 2px solid var(--color-lime-1);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: var(--z-navbar);
}

.lang-switcher.--open .lang-switcher__list {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.lang-switcher__link {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 20px;
    color: var(--color-white-1);
    font-size: 15px;
    font-weight: 400;
    border-left: 2px solid transparent;
    transition: var(--transition-fast);
}

.lang-switcher__link:hover,
.lang-switcher__link:focus,
.lang-switcher__link.--active {
    color: var(--color-lime-1);
    background-color: rgba(207, 248, 94, 0.06);
    border-left-color: var(--color-lime-1);
}

.lang-switcher__code {
    font-weight: var(--font-weight-semibold);
    min-width: 26px;
}

.lang-switcher__name {
    opacity: 0.7;
    font-size: var(--font-size-sm);
}

/***** End Language switcher *****/

/***** Home Page *****/


/* banner */
.content {
    margin: 0 20px;
}

.page-banner {
    transition: all 0.3s ease-out;
    background: var(--bg-color-1);
    border-radius: var(--border-radius-1);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-divider-1);
    padding: 100px 0;
    z-index: 1;
    background-image: url(/core/assests/background/page-header-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center -19.35px;
}

.home-content .page-banner {
    border: unset;
    /* home hero has its own artwork; the glow sits in the corners, so it is
       pinned to the section (not the viewport) to keep the corners visible */
    background-image: url(/core/assests/background/home-hero-bg.png);
    background-attachment: scroll;
    background-position: center center;
}

.page-banner video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.page-banner>.container {
    position: relative;
    z-index: 2;
}

.satify-stats {
    max-width: 300px;
    background: var(--bg-color-3);
    border-radius: var(--border-radius-3);
    position: relative;
    border: 1px solid var(--color-divider-1);
    display: flex;
    gap: 10px;
    padding: 10px 20px 10px 15px;
    justify-content: center;
    align-items: center;
}

.satify-stats p {
    color: var(--color-white-1);
    font-size: var(--font-size-sm);
}

.satisfy-client__img {
    max-width: 22px;
    max-height: 22px;
    border-radius: var(--border-radius-2);
    overflow: hidden;
    border: 1px solid var(--color-lime-1);
    margin-left: -5px;
}

.satisfy-client__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-banner__body {
    color: var(--color-white-1);
    max-width: 850px;
}

.page-banner__body h1 {
    font-size: clamp(30px, 5vw, 74px);
    font-weight: var(--font-weight-semibold);
    line-height: clamp(33px, 5.5vw, 81px);
}

.page-banner__body p {
    font-size: clamp(14px, 2vw, 18px);
    font-weight: 400;
    line-height: clamp(22px, 2.5vw, 28px);
}

.page-banner__body h1:hover .special-word {
    background-position: right;
}

.page-banner__slider {
    margin-top: 120px;
}

.page-banner__slider p {
    color: var(--color-white-1);
    text-align: center;
}

.brands-slider-slide {
    height: 50px;
    filter: grayscale(1);
    box-sizing: border-box;
}

.brands-slider-slide:hover {
    border-left: 2px solid var(--color-lime-1);
    border-right: 2px solid var(--color-lime-1);
}

.brands-slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: var(--transition-base);
}

.brands-slider-slide.swiper-slide-active {
    filter: unset;
}

.about-us__content-body-icon {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    border-radius: var(--border-radius-2);
    min-width: 50px;
    max-width: 50px;
    min-height: 50px;
    max-height: 50px;
    padding: 15px;
    transition: var(--transition-base);
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-us__content-body-icon i {
    font-size: 25px;
}

/* Service */

.our-service__header {
    width: 50%;
    margin-bottom: 80px;
    z-index: 1;
}

.our-service__header h3 {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    color: var(--color-white-1);
    margin-bottom: 10px;
    position: relative;
    padding-left: 18px;
}

.our-service__header h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: var(--color-lime-1);
    border-radius: 50%;
    width: 8px;
    height: 8px;
}

.our-service__header h2 {
    font-size: clamp(30px, 2.5vw, 46px);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: -0.02em;
    color: var(--color-white-1);
    text-align: center;
}

.our-service__header h2:hover .special-word {
    background-position: right;
}

/* Desktop: the tabs wrap and stay centred, as the design has them. */
.projects-filter__list {
    flex-wrap: wrap;
    justify-content: center;
}

.our-service__navigation-tab button,
.projects-filter__tab a,
.projects-filter__tab button {
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
    background: var(--bg-color-1);
    border-radius: var(--border-radius-4);
    position: relative;
    border: 1px solid var(--color-divider-1);
    color: var(--color-white-1);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    text-wrap: nowrap;
}

.our-service__navigation-tab.--selected button,
.projects-filter__tab.--selected a,
.projects-filter__tab.--selected button {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
}

.our-service__navigation-tab:active button,
.projects-filter__tab:hover a,
.projects-filter__tab:active a,
.projects-filter__tab:active button {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
}

.our-service__card {
    display: none;
    opacity: 0;
    visibility: hidden;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 80px;
    width: 100%;
    border-radius: var(--border-radius-1);
    border: 1px solid transparent;
    background:
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
}

.our-service__card.--selected {
    display: block;
    opacity: 1;
    visibility: visible;
    animation: serviceCardFadeIn 0.45s ease forwards;
}

.our-service__card.--selected .our-service__card-section-1 {
    animation: serviceCardFadeIn 0.4s ease 0.05s both;
}

.our-service__card.--selected .our-service__card-section-2 {
    animation: serviceCardFadeIn 0.4s ease 0.15s both;
}

.our-service__card.--selected .our-service__card-section-3 {
    animation: serviceCardFadeIn 0.4s ease 0.25s both;
}

.our-service__navigation-tab.--clicked button,
.projects-filter__tab.--clicked button {
    animation: tabClickPulse 0.25s ease;
}

.card-section__icon-box {
    font-size: 30px;
    color: var(--color-white-1);
    padding: 20px;
    background: var(--bg-color-3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 65px;
    height: 65px;
    border-radius: var(--border-radius-2);
}

.our-service__card-section-1,
.our-service__card-section-2,
.our-service__card-section-3 {
    transition: var(--transition-fast);
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.our-service__card-section-1:hover .card-section__icon-box {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
}

.card-section__text-box h3 {
    font-size: var(--font-size-md);
    margin-bottom: 10px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

.card-section__text-box p {
    margin: 0;
    line-height: var(--line-height-body);
    color: var(--color-white-1);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.card-section__list-box ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-section__list-box ul li {
    position: relative;
    line-height: 1.5em;
    margin-bottom: 15px;
    color: var(--color-white-1);
    display: inline-flex;
    gap: 10px;
}

.card-section__list-box ul li:last-child {
    margin-bottom: unset;
}

.card-section__list-box ul li span {
    padding: 5px;
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    max-width: 25px;
    max-height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--border-radius-2);
}

.card-section__list-box ul li span i {
    max-width: 15px;
    max-height: 15px;
    color: var(--color-black-1);
}

.card-section__list-box ul li span .bi::before {
    vertical-align: +.125em;
}

.chart-box {
    background: var(--color-divider-1);
    border: 1px solid var(--color-divider-1);
    border-radius: var(--border-radius-1);
    padding: 30px;
    margin-left: 20px;
}

.chart-box h3 {
    font-size: 30px;
}

.card-section__img-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.card-section__img-box {
    width: 260px;
    height: 150px;
    margin-top: 20px;
    background: var(--color-divider-1);
    border: 1px solid var(--color-divider-1);
    border-radius: var(--border-radius-4);
}

.our-service__quote p {
    color: var(--color-white-1);
    line-height: var(--line-height-body);
}

.our-service__quote p span {
    font-size: var(--font-size-base);
    font-weight: 500;
    display: inline-block;
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
    line-height: var(--line-height-heading);
    padding: 3px 12px;
    border-radius: 99px;
    margin-right: 10px;
    transition: var(--transition-base);
}

.our-service__quote p:hover span {
    background-position: right;
}

.our-service__quote p a {
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-lime-1);
    transition: var(--transition-fast);
}

.our-service__quote p a:hover {
    color: var(--color-white-1);
}

/* Our Feature */

.our-feature__card-container {
    width: 100%;
}

/**
 * The features block carries Swiper's markup at every width, but Swiper itself
 * is only instantiated below 768px (sliderOnMobile in index.js). Above that the
 * wrapper is overridden back into the two-column grid the design asks for —
 * `transform` is forced off because Swiper leaves one behind when it destroys.
 */
@media (min-width: 768px) {
    .our-feature-slider .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        transform: none !important;
    }

    .our-feature-slider .our-feature__slide {
        width: auto !important;
        margin-right: 0 !important;
    }

    /* the lead feature keeps the full row to itself */
    .our-feature-slider .our-feature__slide--lead {
        grid-column: 1 / -1;
    }

    /* nothing to navigate when everything is on screen */
    .our-feature-slider .slider-nav,
    .our-feature-slider .swiper-pagination {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .our-feature-slider .our-feature__slide {
        height: auto;
    }

    /* the arrows sit over the card edges, so give the dots room underneath */
    .our-feature-slider .swiper-pagination {
        margin-top: 30px;
    }
}

/* Latest-blog teasers on the home page: same grid-above / slider-below trick. */
.blog__card-container {
    width: 100%;
}

@media (min-width: 768px) {
    .blog-slider .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        transform: none !important;
    }

    .blog-slider .blog__slide {
        width: auto !important;
        margin-right: 0 !important;
    }

    .blog-slider .slider-nav,
    .blog-slider .swiper-pagination {
        display: none;
    }
}

@media (min-width: 992px) {
    .blog-slider .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767.98px) {
    .blog-slider .swiper-pagination {
        margin-top: 30px;
    }
}

.our-feature__card {
    background: var(--color-divider-1);
    border: 1px solid var(--color-divider-1);
    border-radius: var(--border-radius-1);
    padding: 60px;
}

.our-feature__card-img {
    height: 300px;
}

.our-feature__card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.our-feature__card-text h3 {
    font-size: 30px;
}

.our-feature__card-text:hover .special-word {
    background-position: right;
}

/* home sections */

.home-section {
    position: relative;
    padding: 80px 0 120px 0;
    z-index: 1;
}

/* project categories section

   Replaces the old `.our-projects` carousel of individual projects. The home
   page leads with the KINDS of work now — one card per category, its own cover
   and the live count of published projects in it — and the carousel's job (show
   the portfolio) moved to /projects, which each card links into pre-filtered.

   Built from the design's existing card vocabulary so the two read as one
   system: the same 30px radius, the same lime gradient circle for the corner
   arrow, the same dark label plate. The differences are deliberate — a landscape
   4/3 cover instead of a fixed 450px slide, and the label sits ON the image
   rather than in a detached box, because a grid of six needs less furniture than
   a carousel of four.
   ------------------------------------------------------------------------- */

.project-categories__grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.project-categories__card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--border-radius-1);
    background: var(--bg-color-1);
}

.project-categories__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-base);
}

.project-categories__card:hover img {
    transform: scale(1.08);
}

/* Two stops, not one: the top wash keeps the icon chip readable over a light
   photo, the bottom one carries the title. */
.project-categories__card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(3, 3, 3, 0.55) 0%, rgba(3, 3, 3, 0) 40%),
        linear-gradient(180deg, rgba(3, 3, 3, 0) 40%, rgba(3, 3, 3, 0.9) 100%);
}

.project-categories__card-icon {
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-2);
    border: 1px solid var(--color-divider-2);
    background: rgba(13, 13, 13, 0.6);
    backdrop-filter: blur(6px);
    color: var(--color-lime-1);
    font-size: 20px;
    transition: var(--transition-fast);
}

.project-categories__card:hover .project-categories__card-icon {
    border-color: var(--color-lime-1);
}

/* Slides in from the right on hover — the carousel's arrow dropped in from
   above, which cannot work here because the icon chip owns the top-left. */
.project-categories__card-btn {
    position: absolute;
    top: 24px;
    right: 12px;
    z-index: 2;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-2);
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
    font-size: 26px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.project-categories__card:hover .project-categories__card-btn {
    right: 24px;
    opacity: 1;
    visibility: visible;
}

.project-categories__card-text {
    position: absolute;
    right: 24px;
    bottom: 24px;
    left: 24px;
    z-index: 2;
    display: block;
}

.project-categories__card-count {
    display: block;
    font-size: var(--font-size-sm);
    color: var(--color-lime-1);
    margin-bottom: 8px;
}

.project-categories__card-text h3 {
    font-size: var(--font-size-md);
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
    margin: 0;
    transition: var(--transition-fast);
}

@media (max-width: 991.98px) {
    .project-categories__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 575.98px) {
    .project-categories__grid {
        grid-template-columns: 1fr;
    }

    .project-categories__card {
        aspect-ratio: 3 / 2;
    }

    /* No hover on touch, so the arrow would never appear — show it outright. */
    .project-categories__card-btn {
        right: 20px;
        width: 46px;
        height: 46px;
        font-size: 22px;
        opacity: 1;
        visibility: visible;
    }
}

/* what we do section*/

.what-we-do__box-img img {
    width: 100%;
    height: auto;
    /* aspect-ratio: 1 / 0.848; */
    border-radius: var(--border-radius-1);
}

.what-we-do__box-img {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: var(--border-radius-1);
    border: 1px solid transparent;
    padding: 20px;
    background:
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
}

.what-we-do__box-1,
.what-we-do__box-2 {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.what-we-do__box-item {
    position: relative;
    flex: 1;
    border: 1px solid transparent;
    border-radius: var(--border-radius-1);
    background:
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    gap: 40px;
    padding: 30px;
    overflow: hidden;
}

.what-we-do__box-item h2 {
    font-size: 40px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white-1);
}

.what-we-do__box-text h3 {
    font-size: 24px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

.what-we-do__box-text p {
    margin-top: 15px;
    line-height: var(--line-height-body);
    color: var(--color-white-1);
}

.what-we-do__box-image {
    position: absolute;
    top: -30px;
    right: -30px;
}

.what-we-do__box-image img {
    width: 100%;
    max-width: 200px;
    object-fit: cover;
    animation: movestyle1 7s linear infinite alternate;
}

.what-we-do__img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1.81;
}

.what-we-do__img-box {
    position: relative;
    overflow: hidden;
    height: 100%;
    border-radius: var(--border-radius-1);
}

.what-we-do__img-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 41.17%, rgba(0, 0, 0, 0.80) 100%);
    width: 100%;
    height: 100%;
}

.what-we-do__box-rating {
    margin-bottom: 15px;
}

.what-we-do__box-rating i {
    color: var(--color-lime-1);
    margin-right: 2px;
}

.what-we-do__img-info {
    position: absolute;
    left: 30px;
    bottom: 30px;
    right: 30px;
    z-index: 1;
}

.what-we-do__footer {
    margin-top: 60px;
    text-align: center;
}

.what-we-do__footer p {
    font-size: var(--font-size-base);
    color: var(--color-white-1);
}

.what-we-do__footer p a {
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: var(--color-lime-1);
    transition: var(--transition-fast);
}

.what-we-do__footer p a:hover {
    color: var(--color-white-1);
}

/* Why choose us section */

.why-choose-us {
    width: 100%;
    background-color: var(--bg-color-1);
    border: 1px solid var(--color-divider-2);
    border-radius: 30px;
    margin: 80px auto;
    position: relative;
    background-image: url(../assests/background/why-choose-us-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    padding: 120px 0;
    overflow: hidden;
    z-index: 1;
}

.why-choose-us::before {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../assests/mascot/section-bg-robot-3.png);
    top: -20px;
    right: -20px;
    animation: movestyle1 7s linear infinite alternate;
    z-index: 0;
}

.why-choose-us::after {
    content: '';
    position: absolute;
    width: 200px;
    height: 200px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../assests/mascot/section-bg-robot-1.png);
    bottom: -50px;
    left: -50px;
    z-index: 0;
    animation: movestyle1 7s linear infinite alternate;
}

.why-choose-us .our-service__header {
    width: 100%;
    margin-bottom: 40px;
}

.why-choose-us .our-service__header h2 {
    text-align: start;
    z-index: 1;
}

.why-choose-us .our-service__header p {
    margin-top: 20px;
    margin-bottom: 0;
    line-height: var(--line-height-body);
    color: var(--color-white-1);
}

.why-choose-us .card-section__list-box ul {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

.why-choose-us .card-section__list-box ul li {
    margin-bottom: 20px;
}

.why-choose-us .why-choose-us__img img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1.13;
    object-fit: cover;
}

.why-choose-us .why-choose-us__img {
    position: relative;
    padding-right: 80px;
    margin-left: 40px;
}

.why-choose-us .why-choose-us__img-badge {
    position: absolute;
    top: 40%;
    right: 0;
    width: 100%;
    max-width: 200px;
    background: var(--bg-color-3);
    border-radius: var(--border-radius-4);
    padding: 20px;
    transition: var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.why-choose-us .why-choose-us__img-badge i {
    font-size: 40px;
    color: var(--color-white-1);
}

.why-choose-us .why-choose-us__img-badge h3 {
    font-size: var(--font-size-sm);
    margin-top: 15px;
    color: var(--color-white-1);
    margin: 0;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
}

.why-choose-us .why-choose-us__img-badge:hover {
    background: var(--color-lime-1);
}

.why-choose-us .why-choose-us__img-badge:hover i,
.why-choose-us .why-choose-us__img-badge:hover h3 {
    color: var(--color-black-1);
}

/* Watch our story section */
.watch-story__box {
    height: 100%;
    position: relative;
    width: 100%;
    background-color: var(--bg-color-1);
    background-image: url(../assests/background/why-choose-us-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    padding: 100px 20px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 1;
}

.watch-story .our-service__header {
    width: 100%;
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.watch-story__play {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 70px;
    z-index: 1;
}

.watch-story__play-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 110px;
    border-radius: var(--border-radius-2);
    background: var(--color-lime-1);
    color: var(--color-black-1);
    font-size: 30px;
    transition: var(--transition-base);
}

.watch-story__play-btn::before {
    content: '';
    position: absolute;
    inset: -16px;
    border: 1px dashed var(--color-divider-2);
    border-radius: var(--border-radius-2);
    animation: watchStoryRotate 16s linear infinite;
}

.watch-story__play-btn:hover {
    background: var(--color-white-1);
    transform: scale(1.05);
}

.watch-story__ticker {
    position: relative;
    width: 100%;
    border-top: 1px solid var(--color-divider-2);
    padding-top: 30px;
    z-index: 1;
}

.watch-story__ticker-box {
    position: relative;
    display: flex;
    align-items: center;
    --gap: 40px;
    gap: var(--gap);
    overflow: hidden;
    user-select: none;
}

.watch-story__ticker-content {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--gap);
    min-width: 100%;
    animation: watchStoryScroll 25s linear infinite;
}

.watch-story__ticker-content span {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 36px;
    font-weight: var(--font-weight-bold);
    line-height: 1.2em;
    color: transparent;
    -webkit-text-stroke: 1px var(--color-white-1);
    text-transform: capitalize;
    white-space: nowrap;
}

.watch-story__ticker-content span i {
    font-size: 14px;
    color: var(--color-lime-1);
    -webkit-text-stroke: 0;
}

@keyframes watchStoryRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes watchStoryScroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

/* Pricing plan section */

.pricing-plan__card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid transparent;
    background:
        url(../assests/background/pricing-item-bg.png) center center / cover no-repeat padding-box,
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(150deg, rgba(207, 248, 94, .45), rgba(255, 255, 255, .07) 45%, rgba(3, 3, 3, .8)) border-box;
    border-radius: var(--border-radius-1);
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 36px 32px;
    overflow: hidden;
    transition: var(--transition-base);
}

/* A lime bloom in the corner. The card background photo is flat and dark, so
   nothing pulled the eye to the price; this lights up on hover only, and the
   card's own `overflow: hidden` keeps it inside the rounded corners. */
.pricing-plan__card::after {
    content: '';
    position: absolute;
    top: -130px;
    right: -130px;
    width: 280px;
    height: 280px;
    border-radius: var(--border-radius-2);
    background: radial-gradient(circle, rgba(207, 248, 94, .20) 0%, rgba(207, 248, 94, 0) 70%);
    opacity: 0;
    transition: var(--transition-base);
    pointer-events: none;
}

.pricing-plan__card:hover {
    transform: translateY(-6px);
    background:
        url(../assests/background/pricing-item-bg.png) center center / cover no-repeat padding-box,
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(150deg, var(--color-lime-1), rgba(255, 255, 255, .14) 55%, rgba(3, 3, 3, .8)) border-box;
    box-shadow: 0 24px 60px -30px rgba(207, 248, 94, .38);
}

.pricing-plan__card:hover::after {
    opacity: 1;
}

/* The card used to be a stack of 40px margins: header, price and button each
   pushed 40px of dead space under themselves, so the middle of the card was a
   hole. Tighter, even rhythm instead. Scoped to the card on purpose - the
   unscoped rule above is still what the contact page and the contact modal use,
   and they reuse only the header markup. */
.pricing-plan__card .pricing-plan__card-header {
    margin-bottom: 28px;
}

/* Plan descriptions are one or two lines depending on the plan, and in a grid
   that misalignment cascades: the price, the button and the feature rule all
   sit at a different height in every card. A two-line floor keeps the row
   straight without truncating anyone. */
.pricing-plan__card .pricing-plan__card-tilte p {
    min-height: calc(2 * var(--line-height-body));
    margin-bottom: 0;
}

.pricing-plan__card .pricing-plan__card-price {
    margin-bottom: 22px;
}

.pricing-plan__card .pricing-plan__card-btn {
    margin-bottom: 28px;
}

.pricing-plan__card .pricing-plan__card-header {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.pricing-plan__card-header,
.pricing-plan__card-price,
.pricing-plan__card-btn {
    margin-bottom: 40px;
}

.pricing-plan__card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.pricing-plan__card-icon {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    border-radius: var(--border-radius-2);
    width: 60px;
    height: 60px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-base);
    overflow: hidden;
}

.pricing-plan__card:hover .pricing-plan__card-icon {
    background-position: right center;
}

.pricing-plan__card-icon i {
    font-size: 30px;
    color: var(--color-black-1);
}

.pricing-plan__card-tilte h3 {
    font-size: var(--font-size-md);
    line-height: 1.4em;
    text-transform: capitalize;
    margin-bottom: 10px;
    margin: 0;
    font-weight: var(--font-weight-bold);
    color: var(--color-white-1);
}

.pricing-plan__card-tilte p {
    line-height: var(--line-height-body);
    color: var(--color-white-1);
}

.pricing-plan__card-price h2 {
    font-size: clamp(38px, 3.4vw, 48px);
    font-weight: var(--font-weight-bold);
    letter-spacing: -.02em;
    margin: 0;
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

/* `/one-off` is a unit, not part of the number - it reads as one price only if
   it steps back from it. */
.pricing-plan__card-price sub {
    font-size: var(--font-size-base);
    font-weight: 400;
    bottom: 0;
    margin-left: 4px;
    color: var(--color-white-1);
    opacity: .55;
}

/* The features used to sit in a #0d0d0d panel inset inside the card, which read
   as a second card floating in a hole. A hairline rule ties them to the plan. */
.pricing-plan__card-body {
    background-color: transparent;
    border-radius: 0;
    border-top: 1px solid var(--color-divider-2);
    padding: 26px 0 0;
}

.pricing-plan__card-body-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-white-1);
    opacity: .5;
    margin: 0 0 18px;
}

/* This is the one `.special-btn` on the site rendered without its arrow, so the
   56px of right padding the arrow lives in was empty and the label sat off
   centre. The arrow is in the markup now and the button fills the card. */
.pricing-plan__card-btn a {
    width: 100%;
    justify-content: center;
    padding: 17px 56px;
}

.our-service__header p {
    margin-top: 20px;
    margin-bottom: 0;
    color: var(--color-white-1);
    line-height: var(--line-height-body);
}

.pricing-plan__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pricing-plan__card-icon {
    max-width: 50px;
    max-height: 50px;
}

.swiper-slide {
    height: auto;
}

.swiper-pagination {
    position: relative;
    margin-top: 50px;
    text-align: center;
}

.swiper-pagination .swiper-pagination-bullet {
    position: relative;
    height: 10px;
    width: 10px;
    background: var(--color-divider-2);
    opacity: 1;
    margin: 0 7px !important;
    transition: var(--transition-fast);
}

.swiper-pagination .swiper-pagination-bullet:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 0;
    width: 0;
    border-radius: 50%;
    transition: var(--transition-fast);
}

.swiper-pagination .swiper-pagination-bullet-active {
    background: var(--color-lime-1);
}

.swiper-pagination .swiper-pagination-bullet-active:before {
    border: 1px solid var(--color-lime-1);
    height: 24px;
    width: 24px;
}

/* Side arrows rendered by views/common/_slider_controls.php.
   They float over the edges of the slider, matching the pill/round language the
   rest of the design uses for its icon buttons. */
.slider-nav {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    padding: 0;
    border: 1px solid var(--color-divider-2);
    border-radius: 50%;
    background: rgba(20, 20, 20, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-white-1);
    cursor: pointer;
    transform: translateY(-50%);
    transition: var(--transition-fast);
}

.slider-nav--prev {
    left: 24px;
}

.slider-nav--next {
    right: 24px;
}

.slider-nav i {
    font-size: 22px;
    line-height: 1;
    transition: var(--transition-fast);
}

.slider-nav:hover,
.slider-nav:focus-visible {
    border-color: var(--color-lime-1);
    background: var(--color-lime-1);
    color: var(--color-black-1);
    outline: none;
}

.slider-nav--prev:hover i {
    transform: translateX(-3px);
}

.slider-nav--next:hover i {
    transform: translateX(3px);
}

/* Swiper adds this itself once an end is reached (non-looping sliders) */
.slider-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.slider-nav.swiper-button-disabled:hover {
    border-color: var(--color-divider-2);
    background: rgba(20, 20, 20, 0.72);
    color: var(--color-white-1);
}

.slider-nav.swiper-button-disabled:hover i {
    transform: none;
}

/* The bullets sit in flow under the slides, so the arrows have to clear them:
   half the bullet row plus its margin, taken off the vertical centre. */
.pricing-plan-slider .slider-nav {
    top: calc(50% - 35px);
}

/* Three plans shown two at a time meant the arrows sat on top of the cards and
   the third plan was off screen - the one layout a pricing table must not have,
   since the whole point is comparing them side by side. Grid above 768px,
   slider only where the cards genuinely do not fit; same pattern as the blog
   and feature blocks, and `sliderOnMobile()` in index.js destroys the Swiper
   above the breakpoint so the transforms below are never fighting it. */
@media (min-width: 768px) {
    .pricing-plan-slider .swiper-wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        transform: none !important;
    }

    .pricing-plan-slider .swiper-slide {
        width: auto !important;
        margin-right: 0 !important;
    }

    /* the slider-era hack that left room under the cards */
    .pricing-plan-slider .pricing-plan__card {
        height: 100%;
        margin-bottom: 0;
    }

    .pricing-plan-slider .slider-nav,
    .pricing-plan-slider .swiper-pagination {
        display: none;
    }
}

@media (min-width: 992px) {
    .pricing-plan-slider .swiper-wrapper {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pricing-plan__card:hover {
        transform: none;
    }
}

/* See more section */

.see-more__text {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.see-more__text-left h3 {
    font-size: clamp(28px, 2.5vw, 40px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
    margin-bottom: 12px;
}

.see-more__text-left p {
    color: var(--color-white-1);
    opacity: .7;
    line-height: var(--line-height-body);
    max-width: 600px;
    margin: 0;
}


/* blog section */

.blog__card,
.project-card,
.service-card {
    position: relative;
    min-height: 400px;
    height: 100%;
    margin-bottom: 30px;
    border-radius: var(--border-radius-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.blog__card-img,
.project-card__img,
.service-card__img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.blog__card-img figure,
.project-card__img figure,
.service-card__img figure {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin: 0;
}

.blog__card-img::before,
.project-card__img::before,
.service-card__img::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 20px;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.70) 10%, rgba(0, 0, 0, 0.00) 50%);
    width: 100%;
    height: 100%;
    z-index: 1;
}

.blog__card-img img,
.project-card__img img,
.service-card__img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: 0.6s ease-in-out;
}

.blog__card:hover .blog__card-img img,
.project-card:hover .project-card__img img,
.service-card:hover .service-card__img img {
    transform: scale(1.06);
}

.blog__card-content,
.project-card__content,
.service-card__content {
    position: relative;
    z-index: 2;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog__card-content ul,
.project-card__content ul,
.service-card__content ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog__card-content ul li a,
.blog__card-content ul li span,
.project-card__content ul li a,
.project-card__content ul li span,
.service-card__content ul li a {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-1);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.blog__card-content h2,
.project-card__content h2,
.service-card__content h2 {
    font-size: var(--font-size-md);
    line-height: 1.4em;
    font-weight: var(--font-weight-bold);
    color: var(--color-white-1);
    margin: 0;
}

.blog__read-more i,
.blog__read-more a,
.blog__read-more span,
.project-card__read-more i,
.project-card__read-more a,
.project-card__read-more span,
.service-card__read-more i,
.service-card__read-more a {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    line-height: normal;
    text-transform: capitalize;
    color: var(--color-lime-1);
    padding-right: 10px;
    transition: 0.4s ease-in-out;
}

.blog__read-more,
.project-card__read-more,
.service-card__read-more {
    margin-top: 5px;
}

.blog__card:hover .blog__read-more span,
.blog__card:hover .blog__read-more i,
.project-card:hover .project-card__read-more span,
.project-card:hover .project-card__read-more i,
.service-card__read-more:hover a,
.service-card__read-more:hover i {
    color: var(--color-white-1);
}

/***** End Home Page *****/

/***** Footer *****/

.footer-copyright {
    padding: 40px 0;
    text-align: center;
}

.footer-copyright p {
    margin-bottom: 0;
    line-height: var(--line-height-body);
    font-size: var(--font-size-base);
    color: var(--color-white-1);
    font-weight: 400;
    text-align: center;
}

.footer-box {
    background-image: url(../assests/background/footer-bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 100px 0;
    background-color: var(--bg-color-1);
    border: 1px solid var(--color-divider-2);
    border-radius: 30px;
    margin: 0 20px
}

.footer-box__header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    border-bottom: 1px solid var(--color-divider-1);
    margin-bottom: 60px;
    padding-bottom: 60px;
}

.footer-box__header .footer-box__header-title h2 {
    font-size: 100px;
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    letter-spacing: -0.02em;
    margin-bottom: 0;
    cursor: none;
}

.footer-box__header .footer-box__header-title h2 a {
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition-base);
}

.footer-box__header .footer-box__header-title:hover h2 a {
    background-position: right;
}

.footer-box__header .footer-box__contact h3 {
    color: var(--color-white-1);
    font-weight: var(--font-weight-semibold);
    font-size: 24px;
    margin-bottom: 20px;
    line-height: var(--line-height-heading);
}

.footer-box__header .footer-box__contact h3 a,
.footer-box__header .footer-box__contact h2 a {
    color: inherit;
    transition: var(--transition-base);
}

.footer-box__header .footer-box__contact h3:hover a,
.footer-box__header .footer-box__contact h2:hover a {
    color: var(--color-lime-1);
}

.footer-box__header .footer-box__contact h2 {
    color: var(--color-white-1);
    font-weight: var(--font-weight-semibold);
    font-size: 36px;
    line-height: var(--line-height-heading);
}

.footer-box__logo,
.footer-box__about-content {
    margin-bottom: 40px;
}

.footer-box__logo {
    max-width: 170px;
}

.footer-box__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.footer-box__about-content p {
    margin-bottom: 0;
    line-height: var(--line-height-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--color-white-1);
}

.footer-box__about-links li {
    display: inline-block;
    margin-right: 10px;
}

.footer-box__about-links a {
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-2);
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.footer-box__about-links a i {
    font-size: 18px;
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: var(--transition-base);
}

.footer-box__about-links li:hover a {
    background: var(--color-white-1);
}

/* `space-between` was written for three columns and filled the 9-wide track on
   its own. With the newsletter column gone there are two, and space-between put
   a ~430px hole between them — so the remaining columns hug the right edge
   instead, balancing the about block on the left. */
.footer-box__links-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 30px 6vw;
    margin-left: 3.646vw;
}

.footer-box__links {
    max-width: 43%;
}

@media (max-width: 1199.98px) {
    .footer-box__links-list {
        justify-content: flex-start;
        margin-left: 0;
    }
}

.footer-box__links h3 {
    font-size: var(--font-size-md);
    text-transform: capitalize;
    margin-bottom: 30px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

.footer-box__links li {
    text-transform: capitalize;
    line-height: var(--line-height-body);
    margin-bottom: 16px;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-white-1);
}

.footer-box__links li a {
    color: inherit;
    transition: var(--transition-fast);
}

.footer-box__links li:hover a {
    color: var(--color-lime-1)
}

/***** End Footer *****/


/***** About us Content *****/

/* Banner section*/

.About-us-content .page-banner,
.blog-list-content .page-banner {
    padding: 135px 0px;
}

.page-banner__body .bread-crumbs a {
    color: inherit;
    transition: var(--transition-fast);
}

/* the trail is navigable now — the earlier markup wrapped every crumb, current
   page included, in an <a href=""> that silently reloaded the page */
.page-banner__body .bread-crumbs a:hover,
.page-banner__body .bread-crumbs a:focus-visible {
    color: var(--color-lime-1);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.page-banner__body .bread-crumbs__sep {
    opacity: 0.6;
}

.page-banner__body .bread-crumbs {
    font-size: clamp(18px, 2vw, 22px);
    line-height: clamp(22px, 2.5vw, 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* only the "/" is set smaller — the current-page crumb is a span too now and
   has to match the links beside it */
.page-banner__body .bread-crumbs .bread-crumbs__sep {
    font-size: clamp(14px, 2vw, 21px);
}

/* our-approach section */


.our-approach .our-service__header,
.faq .our-service__header,
.how-it-works .our-service__header {
    width: unset;
}

.our-approach .our-service__header h2,
.faq .our-service__header h2,
.how-it-works .our-service__header h2 {
    text-align: start;
}

.our-approach .our-approuch__card {
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--border-radius-1);
    background:
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.our-approach .our-approuch__card-text {
    margin-bottom: 50px;
    padding: 30px 30px 0px;
}

.our-approach .our-approuch__card-text h3 {
    font-size: var(--font-size-md);
    line-height: 1.4em;
    text-transform: capitalize;
    margin-bottom: 20px;
    font-weight: var(--font-weight-bold);
    color: var(--color-white-1);
}

.our-approach .our-approuch__card-text p {
    line-height: var(--line-height-body);
    margin: 0px;
    font-size: 18px;
    font-weight: 400;
    color: var(--color-white-1);
}

.our-approach .our-approuch__card-img {
    margin-bottom: -10px;
}

.our-approach .card-2 .our-approuch__card-img img {
    border-radius: var(--border-radius-4);
}

.our-approach .card-3 .our-approuch__card-img {
    max-height: 150px;
}

.our-approach .our-approuch__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* How it works section*/

.faq .our-service__header,
.how-it-works .our-service__header {
    width: unset;
    margin-bottom: unset;
}

.how-it-works {
    position: relative;
    z-index: 1;
}

.how-it-works .our-service__header,
.faq .faq__banner {
    position: sticky;
    top: 140px;
}

.how-it-works__card-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.how-it-works__card,
.service-item__card {
    position: relative;
    width: 100%;
    border: 1px solid transparent;
    border-radius: var(--border-radius-1);
    background:
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
    padding: 30px;
    overflow: hidden;
    min-height: 450px;
}

.how-it-works__card {
    min-height: unset;
}

.how-it-works__card-text {
    margin-top: 40px;
    flex: 1;
}

.how-it-works__card-text h3 {
    font-size: var(--font-size-md);
    text-transform: capitalize;
    margin-bottom: 15px;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

.how-it-works__card-text p {
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1.5em;
    color: var(--color-white-1);
}

/* Faq section */

.faq__img {
    border-radius: var(--border-radius-1);
    overflow: hidden;
}

.faq__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.faq .our-service__header {
    margin-bottom: 40px;
}

.accordion {
    gap: 30px;
    display: flex;
    flex-direction: column;
    --bs-accordion-bg: var(--bg-color-1);
    --bs-accordion-border-color: transparent;
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M2 8a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11A.5.5 0 0 1 2 8'/%3e%3c/svg%3e");
}

.accordion .accordion-item {
    position: relative !important;
    border: 1px solid transparent !important;
    border-radius: var(--border-radius-4) !important;
    padding: 0px !important;
    overflow: hidden !important;
}

.accordion .accordion-header {
    margin: 0 !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-heading) !important;
    color: var(--color-white-1) !important;
    margin: 0px !important;
    font-size: 2rem !important;
}

.accordion .accordion-header button {
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    color: var(--color-black-1);
    background-color: var(--gradient-color-1);
    background: var(--gradient-color-1);
    padding: 20px 30px;
    transition: 0.3s ease-in-out;
}

.accordion .accordion-header button.collapsed {
    color: var(--color-white-1);
}

.accordion button:active,
.accordion button:focus {
    outline: none !important;
    box-shadow: none !important;
}

.accordion .accordion-header button.collapsed {
    background: var(--bg-color-1);
}

.accordion .accordion-item .accordion-body {
    background: var(--gradient-color-1);
    color: var(--color-black-1);
    border-top: 1px solid var(--color-divider-2);
    padding: 20px 55px 20px 30px;
    line-height: 1.3;
}

/***** End About us Content *****/
/***** Blog list Content *****/

.blog-list-container,
.project-list-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 60px;
}

.pagination {
    padding: 60px 0;
}

.pagination li a {
    background: var(--bg-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white-1);
    border-radius: var(--border-radius-4);
    line-height: 1em;
    transition: var(--transition-fast);
    font-weight: var(--font-weight-semibold);
    margin: 0 5px;
    width: 45px;
    height: 45px;
}

.pagination li.--active a,
.pagination li:hover a {
    background: var(--color-lime-1);
    color: var(--color-black-1);
}

/* First/last page: the arrow renders as a <span>, not a link, so it keeps the
   shape but neither reacts to hover nor invites a click. */
.pagination li.--disabled span {
    background: var(--bg-color-1);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white-1);
    border-radius: var(--border-radius-4);
    line-height: 1em;
    margin: 0 5px;
    width: 45px;
    height: 45px;
    opacity: 0.35;
    cursor: not-allowed;
}

/***** End Blog list Content *****/
/***** Contact Us content *****/

.contact-us .our-service__header {
    width: unset;
    margin-bottom: unset;
}

.contact-us .our-service__header h2 {
    text-align: start;
}

.contact-us__info-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
    border-top: 1px solid var(--color-divider-2);
    margin-top: 40px;
    padding-top: 40px;
}

.contact-us-content .pricing-plan__card-icon i {
    font-size: 25px;
}

.contact-us__info-hotline {
    background-color: var(--bg-color-1);
    border-radius: var(--border-radius-1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 50px;
    padding: 20px;
}

.contact-us__info-img {
    display: block;
    border-radius: var(--border-radius-1);
    overflow: hidden;
}

.contact-us__info-img img {
    width: 100%;
    max-width: 160px;
    aspect-ratio: 1/0.765;
    object-fit: cover;
}

.contact-us-content .badge {
    position: absolute;
    top: 30%;
    right: -30px;
    border-radius: var(--border-radius-2);
    background: var(--gradient-color-1);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.contact-us-content .badge i {
    font-size: 25px;
}

.contact-us__info-content p {
    margin-bottom: 20px;
    line-height: var(--line-height-body);
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--color-white-1);
}

.contact-us__info-content h3 a {
    color: inherit;
}

.contact-us__info-content h3 {
    font-size: 30px;
    line-height: 1.4em;
    margin: 0;
    font-weight: var(--font-weight-bold);
    color: var(--color-white-1);
}

.contact-us-form {
    background: var(--bg-color-1) url(../assests/background/contact-us.png);
    background-repeat: repeat;
    background-position: center center;
    background-size: cover;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    padding: 20px 40px 40px 40px
}

.form-control {
    font-size: var(--font-size-base);
    font-weight: 400;
    line-height: 1.5em;
    color: var(--color-white-1);
    background: transparent;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-4);
    padding: 17px 20px;
    box-shadow: none;
    outline: none;
}

.form-control::placeholder {
    color: var(--color-white-1);
}

.form-control:focus {
    color: var(--color-white-1);
    background-color: var(--bg-color-1);
    border-color: unset;
    outline: 0;
    box-shadow: unset;
}

.form-group .error {
    margin: 5px;
}

.form-group .error.--active {
    color: red;
}

.google-map-iframe,
.google-map-iframe iframe {
    width: 100%;
    height: 500px;
    border-radius: var(--border-radius-1);
    transition: var(--transition-fast);
}

.google-map-iframe iframe {
    filter: grayscale(100%) brightness(0.7);
}

.google-map-iframe:hover iframe {
    filter: grayscale(0%) brightness(1);
}

.contact-us .pricing-plan__card-header {
    flex-wrap: nowrap;
}

/***** End Contact Us content *****/
/***** Services content *****/

.services-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.service-item__card {
    background:
        linear-gradient(rgba(13, 13, 13, 0.80), rgba(13, 13, 13, 0.80)) padding-box,
        url(../assests/background/page-header-bg.jpg) center center / cover no-repeat padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: var(--transition-base);
}

.service-item__card:hover {
    transform: translateY(-4px);
}

.service-item__card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.service-item__card-header i {
    font-size: 25px;
    color: var(--color-black-1);
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    border-radius: var(--border-radius-2);
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: var(--transition-base);
}

.service-item__card:hover .service-item__card-header i {
    background-position: right;
}

.service-item__read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-1);
    transition: var(--transition-fast);
}

.service-item__read-more i {
    font-size: 18px;
    color: inherit;
    transition: var(--transition-fast);
}

.service-item__card:hover .service-item__read-more {
    color: var(--color-white-1);
}

.service-item__card:hover .service-item__read-more i {
    transform: translate(3px, -3px);
}

.service-item__number {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-lime-1);
    font-family: monospace;
    letter-spacing: 0.05em;
}

.service-item__card .how-it-works__card-text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-item__footer {
    margin-top: auto;
}

.service-item__tags {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--color-divider-2);
    padding-top: 20px;
    margin-top: 20px;
}

.service-item__tags li {
    font-size: var(--font-size-sm);
    color: var(--color-white-1);
    background: var(--bg-color-3);
    border-radius: var(--border-radius-5);
    padding: 6px 14px;
    transition: var(--transition-fast);
}

.service-item__card .service-item__tags li:hover {
    background: var(--color-lime-1);
    color: var(--color-black-1);
}

/***** End Services content *****/
/***** Service Single page *****/

.post-section {
    position: relative;
}

.contact-us-aside {
    border: 1px solid transparent;
    border-radius: var(--border-radius-1);
    background:
        linear-gradient(var(--bg-color-1), var(--bg-color-1)) padding-box,
        linear-gradient(135deg, var(--color-lime-1), var(--color-black-1)) border-box;
    overflow: hidden;
    position: sticky;
    top: 140px;
}

.contact-us-aside__content {
    padding: 30px;
}

.contact-us-aside__image {
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: var(--border-radius-1);
}

.contact-us-aside__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 300px;
}

.contact-us-aside__text-img {
    margin-bottom: 30px;
}

.contact-us-aside__text-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 50px;
    object-position: left;
}

.contact-us-aside__text p {
    line-height: var(--line-height-body);
    margin-bottom: 0;
    font-size: var(--font-size-base);
    font-weight: 400;
    color: var(--color-white-1);
}

.contact-us-aside__contact a {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    line-height: 1em;
    padding: 20px 40px;
    color: var(--color-black-1);
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    transition: var(--transition-fast);
}

.contact-us-aside__contact a:hover {
    background-position: right;
}

.post-content__banner {
    margin-bottom: 40px;
    border-radius: var(--border-radius-1);
    overflow: hidden;
}

.post-content__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 500px;
}

.post-content p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.6rem;
    font-weight: 400;
    color: var(--color-white-1);
}

.post-content__text {
    margin-bottom: 40px;
}

/* The FAQ and the gallery are rendered as siblings of `.post-content`, not
   inside it - they take the container's full width by design. That also put
   them outside `.post-content h2`, so their heading fell back to the browser
   default: black text, and only the `.special-word` half stayed lime. They
   follow the same heading rule now, here and at every breakpoint below. */
.post-content h2,
.post-content__faq h2 {
    font-size: 46px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

.post-content h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    line-height: var(--line-height-heading);
    color: var(--color-white-1);
}

.post-content blockquote {
    background: var(--bg-color-1) url(../assests/background/why-choose-us-bg.png);
    background-repeat: no-repeat;
    background-position: 30px 30px;
    background-size: 45px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    padding: 30px;
    margin-bottom: 30px;
}

.post-content blockquote p {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    line-height: 1.4em;
    color: var(--color-white-1);
    margin-bottom: unset;
}

.post-content blockquote p::before {
    content: "\201C";
    font-size: 21px;
}

.post-content blockquote p::after {
    content: "\201D";
    font-size: 21px;
}

.post-content__text ul {
    padding: 0;
    margin: 20px 0 20px;
    padding-left: 20px;
    list-style: disc;
}

.post-content__text ul li {
    position: relative;
    font-size: var(--font-size-md);
    font-weight: 500;
    line-height: var(--line-height-body);
    color: var(--color-white-1);
    margin-bottom: 15px;
}

.post-content__footer {
    border-top: 1px solid var(--color-divider-2);
    padding-top: 30px;
    margin-top: 30px;
}

.post-content__tags .tag-links {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    color: var(--color-white-1);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.post-content__tags .tag-links a {
    display: inline-block;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: capitalize;
    line-height: 1em;
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    border-radius: var(--border-radius-3);
    color: var(--color-black-1);
    padding: 12px 20px;
    transition: var(--transition-fast);
}

.post-content__tags .tag-links a:hover {
    background-position: right;
}

.post-social-sharing {
    text-align: right;
}

.post-social-sharing ul li {
    display: inline-block;
    margin-right: 10px;
}

.post-social-sharing ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
    border-radius: var(--border-radius-3);
    width: 40px;
    height: 40px;
    transition: var(--transition-fast);
}

.post-social-sharing ul li a:hover {
    background-position: right;
}

.post-social-sharing ul li a i {
    font-size: 18px;
    color: inherit;
}

.post-content h2:hover .special-word,
.post-content__faq h2:hover .special-word {
    background-position: right;
}

.post-content__counter {
    padding: 40px 35px;
    border: 1px solid var(--color-divider-2);
    background: var(--bg-color-1) url(../assests/background/service-item-bg.png) no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: var(--border-radius-1);
}

.post-content__counter-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.post-content__counter-header-no h2 {
    margin-bottom: unset;
}

.post-content__img {
    overflow: hidden;
    height: 100%;
    border-radius: var(--border-radius-1);
}

.post-content__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 200px;
}


.post-content__gallery .post-gallery .swiper-slide {
    height: 300px;
    border-radius: var(--border-radius-1);
    overflow: hidden;
}

.post-content__gallery .post-gallery .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    transition: var(--transition-fast);
}

.post-content__gallery .post-gallery .swiper-slide img:hover {
    transform: scale(1.05);
}

.post-content__gallery .post-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    opacity: 0;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-2);
    background: var(--color-white-1);
    color: var(--color-black-1);
    cursor: pointer;
    transform: translateY(-50%);
    transition: var(--transition-fast);
    pointer-events: none;
    transition: var(--transition-base);
}

.post-content__gallery:hover .post-gallery-nav {
    opacity: 1;
    pointer-events: unset;
}

.post-content__gallery .post-gallery-nav i {
    color: var(--color-black-1);
    font-size: var(--font-size-md);
    line-height: 1;
}

.post-content__gallery .post-gallery-nav:hover {
    background: var(--color-lime-1);
}

.post-content__gallery .post-gallery-nav--prev {
    left: 10px;
}

.post-content__gallery .post-gallery-nav--next {
    right: 10px;
}

.post-content__gallery:hover .post-gallery-nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.post-content .card-section__list-box ul li {
    font-size: var(--font-size-md);
    line-height: 1;
    display: flex;
    align-items: center;
}

.post-content .card-section__list-box ul li span i {
    font-size: var(--font-size-base);
}

.post-content .post-content__strategies-card {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border: 1px solid var(--color-divider-2);
    background: var(--bg-color-1) url(../assests/background/page-category-list-bg.png) no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: var(--border-radius-1);
    padding: 40px;
    margin-top: 40px;
}

.post-content__strategies-item p {
    margin-bottom: unset;
}

.post-content__growth-card {
    border: 1px solid var(--color-divider-2);
    background: var(--bg-color-1) url(../assests/background/service-item-bg.png) no-repeat;
    background-size: cover;
    background-position: center center;
    border-radius: var(--border-radius-1);
    padding: 40px;
}

.post-content__growth-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--color-divider-2);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

.post-content__growth-card-content p {
    margin-bottom: unset;
}

.post-content__growth-img {
    overflow: hidden;
    height: 100%;
    border-radius: var(--border-radius-1);
}

.post-content__growth-img img {
    width: 100%;
    height: 100%;
    min-height: 500px;
    object-fit: cover;
}

.post-content__challenge-img {
    overflow: hidden;
    border-radius: var(--border-radius-1);
    height: 100%;
}

.post-content__challenge-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.post-content__challenge-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    height: 100%;
    padding: 40px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    background: var(--bg-color-1) url(../assests/background/service-item-bg.png) no-repeat;
    background-size: cover;
    background-position: center center;
    color: #fff;
}

.post-content__challenge-content h3 {
    margin-bottom: 0;
}

.post-content__challenge-content p {
    margin-bottom: unset;
    color: #fff;
}

.post-content__challenge-divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-divider-2);
}

.post-content__challenge-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.post-content__challenge-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.post-content__challenge-list li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/***** End Service Single page *****/
/***** Error page *****/

.error-section {
    padding: 160px 0;
}

.error-section .error-section__img {
    min-height: 600px;
    max-height: 600px;
    min-width: 600px;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.error-section .error-section__img img {
    width: 100%;
    max-width: 80%;
    height: 100%;
    object-fit: cover;
}

.error-section .our-service__header {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

/***** End Error page *****/

/***** Project list Page *****/

.blog__card-divider,
.project-card__divider,
.service-card__divider {
    border-top: 2px solid var(--color-divider-1);
    margin: unset;
    opacity: 1;
}

/* Filtering is done by the query now, not by toggling `--selected` in JS, so a
   rendered card is always a card that belongs on the page. Hiding by default
   would leave the list blank if the script ever failed to run. */
.project-card {
    display: flex;
    animation: serviceCardFadeIn 0.45s ease forwards;
}

.project-card .project-card__img {
    animation: serviceCardFadeIn 0.4s ease 0.05s both;
}

.project-card .project-card__content {
    animation: serviceCardFadeIn 0.4s ease 0.15s both;
}

/**
 * The four elements below were in the markup with no styles at all, which is
 * what made the card look broken and behave broken.
 *
 * `.project-card__link` is the case-study destination: an empty <a> laid over
 * the whole card, because an <a> cannot contain the "visit site" <a> and the
 * card needs both. Empty and unstyled it was an inline box of zero size, so
 * there was nothing to click - the card was dead. It has to sit above
 * `.project-card__content` (z-index 2), otherwise the bottom half of the card,
 * where the text is, stays unclickable.
 */
.project-card__link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    border-radius: inherit;
}

/* Above the link layer, so the corner button keeps its own destination. */
.project-card__visit {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-3);
    background: rgba(13, 13, 13, .72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--color-white-1);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    transition: var(--transition-fast);
}

.project-card__visit:hover,
.project-card__visit:focus-visible {
    background: var(--color-lime-1);
    border-color: var(--color-lime-1);
    color: var(--color-black-1);
}

/* `body` sets no colour, so anything without a rule of its own inherited the
   browser default - black text sitting on a dark photo. */
/**
 * The scrim shared with the blog and service cards fades out at 50% of the
 * card's height. That is enough for a title alone, but a project card stacks
 * category, title, result line and tags, and several of these screenshots are
 * bright - the top of that stack ended up on bare photo. Taller and darker
 * here only; the other two cards keep the original.
 */
.project-card__img::before {
    background: linear-gradient(0deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .62) 38%, rgba(0, 0, 0, 0) 78%);
}

/**
 * Project covers are whatever the case study has: a laptop mockup, a phone
 * shot, a wide full-page screenshot. The shared `object-fit: cover` sized them
 * to fill the card, which crops - the mockups lost both their edges.
 *
 * `contain` shows the whole file at any aspect ratio, and the letterboxing that
 * comes with it is given a real panel to sit on rather than a hole in the card.
 * Anchored to the top so a tall image stays clear of the text at the bottom.
 * Scoped to project cards: blog and service covers are photographs chosen to
 * fill their frame, and cropping is right for them.
 */
.project-card__img {
    background-color: var(--bg-color-1);
}

.project-card__img img {
    object-fit: contain;
    object-position: center top;
}

.project-card__result {
    margin: 0;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    color: var(--color-white-1);
    opacity: .85;
}

.project-card__tags li {
    padding: 4px 10px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-3);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-white-1);
    opacity: .8;
}

.service-card {
    display: flex;
}

/***** End Project list Page *****/

/***** Project detail: browser-frame preview *****/

/**
 * `_site_preview.php` and `_project_facts.php` shipped with no stylesheet at
 * all - not one rule for `.site-preview*` or `.project-facts*` anywhere in
 * `web/core/styles/`. The markup and `project-preview.js` were both complete,
 * so the toolbar rendered as bare browser buttons and a blue link.
 *
 * The contract the script expects from here:
 *   - `[data-device]` on the root only changes an attribute; the width of the
 *     frame is CSS's job (--site-preview-width below).
 *   - the viewport needs a CSS `aspect-ratio`, because `fitViewportToShot()`
 *     clears its inline one to hand the ratio back to the stylesheet.
 *   - `.is-active` on a device button and on the load button, `.is-live` on the
 *     root, and the `hidden` attribute on the badge and the hint.
 */
.site-preview {
    --site-preview-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.site-preview__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-preview__devices {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-3);
    background: var(--bg-color-1);
}

.site-preview__device {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: none;
    border-radius: var(--border-radius-3);
    background: transparent;
    color: var(--color-white-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    cursor: pointer;
    opacity: .6;
    transition: var(--transition-fast);
}

.site-preview__device:hover {
    opacity: 1;
}

.site-preview__device.is-active {
    background: var(--color-lime-1);
    color: var(--color-black-1);
    opacity: 1;
}

/* no capture to switch to: the single pill is a label, not a control */
.site-preview__devices--static .site-preview__device {
    cursor: default;
}

.site-preview__actions {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.site-preview__load,
.site-preview__open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-3);
    background: var(--bg-color-1);
    color: var(--color-white-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
}

.site-preview__load:hover,
.site-preview__open:hover,
.site-preview__load.is-active {
    background: var(--color-lime-1);
    border-color: var(--color-lime-1);
    color: var(--color-black-1);
}

/* The stage is the fixed box; the frame inside it is what the device buttons
   resize, so switching to phone shrinks the site, not the section. */
.site-preview__stage {
    display: flex;
    justify-content: center;
    padding: 20px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    background: var(--bg-color-2);
}

.site-preview__frame {
    width: 100%;
    max-width: var(--site-preview-width);
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-4);
    overflow: hidden;
    background: var(--bg-color-1);
}

/* No transition on the frame width: the desktop value is a percentage and the
   device values are lengths, and animating max-width between the two leaves the
   computed value stuck at the percentage - the frame simply never resized. */
.site-preview[data-device="tablet"] {
    --site-preview-width: 820px;
}

.site-preview[data-device="mobile"] {
    --site-preview-width: 390px;
}

.site-preview__chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-divider-2);
    background: var(--bg-color-3);
}

.site-preview__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: var(--border-radius-2);
    background: var(--color-divider-2);
}

.site-preview__address {
    display: flex;
    flex: 1;
    min-width: 0;
    align-items: center;
    gap: 8px;
    margin-left: 6px;
    padding: 6px 14px;
    border-radius: var(--border-radius-3);
    background: var(--bg-color-2);
    color: var(--color-white-1);
    font-size: 13px;
}

.site-preview__address i {
    flex: none;
    opacity: .55;
}

.site-preview__address span {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: .75;
}

.site-preview__badge {
    flex: none;
    padding: 5px 12px;
    border-radius: var(--border-radius-3);
    background: var(--color-lime-1);
    color: var(--color-black-1);
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* the badge and the hint are toggled through the `hidden` attribute, and every
   rule above sets a `display` that would otherwise win over it */
.site-preview [hidden] {
    display: none !important;
}

.site-preview__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--bg-color-2);
}

.site-preview__shot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: object-position 6s ease-in-out;
}

/* a full-page capture is far taller than the frame - the rest of the page
   travels past while the pointer rests on it */
.site-preview__frame:hover .site-preview__shot {
    object-position: bottom center;
}

.site-preview__iframe {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.site-preview.is-live .site-preview__shot {
    display: none;
}

.site-preview__hint {
    margin: 0;
    color: var(--color-white-1);
    opacity: .6;
    font-size: var(--font-size-sm);
    text-align: center;
}

/***** Project detail: fact sheet *****/

.project-facts {
    margin-top: 40px;
    padding: 36px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    background: var(--bg-color-1);
}

.project-facts__title {
    margin: 0 0 26px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-white-1);
}

.project-facts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 26px;
    margin: 0;
}

.project-facts__item {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    border-top: 1px solid var(--color-divider-1);
}

.project-facts__item dt {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--color-white-1);
    opacity: .55;
}

.project-facts__item dt i {
    font-size: 16px;
    color: var(--color-lime-1);
}

.project-facts__item dd {
    margin: 0;
    color: var(--color-white-1);
    line-height: var(--line-height-body);
}

.project-facts__item dd a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-lime-1);
    text-decoration: none;
}

.project-facts__item dd a:hover {
    text-decoration: underline;
}

.project-facts__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.project-facts__tags li {
    padding: 4px 10px;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-3);
    background: rgba(255, 255, 255, .06);
    font-size: 12px;
    line-height: 1.4;
    color: var(--color-white-1);
    opacity: .8;
}

/***** End Project detail *****/
/***** Contact form alerts (ecaterina pattern) *****/

.contact-alert {
    padding: 12px 18px;
    border-radius: var(--border-radius-4, 8px);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    width: 100%;
}

.contact-alert--success {
    background-color: #d1f0e0;
    color: #146c43;
    border: 1px solid #a3d9bb;
}

.contact-alert--error {
    background-color: #fde8e8;
    color: #9b1c1c;
    border: 1px solid #f8b4b4;
}

.form-group .error.--active:empty {
    display: none;
}

/* ==================== EDITMODE OVERRIDES ==================== */
/* `.card-section__list-box ul li span` turns any span into the 25px green
   check-circle. The benefit text is an editable <span> now, so it needs to opt
   out — without this it gets squashed into the circle and the lines overlap. */
.card-section__list-box ul li span.em-list-text {
  padding: 0;
  max-width: none;
  max-height: none;
  display: inline;
  background: none;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

/* Same opt-out for the challenge bullet lists on the project detail page:
   `.post-content__challenge-list li span` makes every span an unshrinkable
   inline-flex (meant for the check icon), which would push the editable text
   span off-screen on narrow viewports. */
.post-content__challenge-list li span.em-list-text {
  display: inline;
  flex-shrink: 1;
}


/***** Price Builder Page *****/

.price-builder {
    max-width: 900px;
    margin: 0 auto;
    padding: 60px 0 140px;
}

.price-builder__topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    margin-top: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.price-builder__back {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: self-start;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--border-radius-2);
    border: 1px solid var(--color-divider-1);
    background: var(--bg-color-1);
    color: var(--color-white-1);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: var(--transition-fast);
}

.price-builder__back:hover {
    background: var(--color-lime-1);
    border-color: var(--color-lime-1);
    color: var(--color-black-1);
}

.price-builder__progress {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}

.price-builder__progress span {
    flex: 1;
    height: 3px;
    border-radius: var(--border-radius-5);
    background: var(--color-divider-2);
    transition: var(--transition-base);
}

.price-builder__progress span.--active,
.price-builder__progress span.--done {
    background: var(--gradient-color-1);
}

.price-builder__body {
    max-width: 600px;
    margin: 0 auto;
}

.price-builder__step {
    display: none;
}

.price-builder__step.--active {
    display: block;
    animation: priceBuilderStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes priceBuilderStepIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.99);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.price-builder__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-lime-1);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 16px;
}

.price-builder__heading {
    color: var(--color-white-1);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-heading);
    margin-bottom: 40px;
}

.price-builder__options {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.price-builder__option {
    display: flex;
    align-items: center;
    gap: 16px;
    line-height: 1.5;
    width: 100%;
    padding: 20px 24px;
    background: var(--bg-color-1);
    border: 1px solid var(--color-divider-1);
    border-radius: var(--border-radius-4);
    color: var(--color-white-1);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    cursor: pointer;
    transition: var(--transition-fast);
}

.price-builder__option i {
    font-size: var(--font-size-md);
    line-height: 1;
    color: var(--color-white-1);
    transition: var(--transition-fast);
}

.price-builder__option:hover {
    border-color: var(--color-lime-1);
    background: var(--bg-color-3);
}

.price-builder__option:active {
    transform: scale(0.99);
}

.price-builder__option.--selected {
    border-color: var(--color-lime-1);
    background: var(--bg-color-3);
}

.price-builder__option.--selected i {
    color: var(--color-lime-1);
}

.price-builder__option--ghost {
    border-style: dashed;
    color: var(--color-white-1);
    opacity: .7;
}

.price-builder__option--ghost:hover,
.price-builder__option--ghost.--selected {
    opacity: 1;
    background: transparent;
    border-color: var(--color-lime-1);
}

.price-builder__continue {
    margin-top: 32px;
}

.price-builder__skip {
    display: block;
    width: 100%;
    margin-top: 24px;
    padding: 0;
    background: none;
    border: none;
    text-align: center;
    color: var(--color-white-1);
    opacity: .5;
    font-family: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: var(--transition-fast);
}

.price-builder__skip:hover {
    opacity: 1;
    color: var(--color-lime-1);
}

.price-builder__heading--tight {
    margin-bottom: 16px;
}

.price-builder__subheading {
    color: var(--color-white-1);
    opacity: .6;
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    margin-bottom: 40px;
}

.price-builder__field {
    margin-bottom: 24px;
}

.price-builder__field .form-control {
    width: 100%;
}

.price-builder__field.--error .form-control {
    border-color: red;
}

.price-builder__field .error {
    display: none;
    margin-top: 10px;
    color: red;
    font-size: var(--font-size-sm);
}

.price-builder__field.--error .error {
    display: block;
}

.price-builder__submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 20px;
    border-radius: var(--border-radius-3);
    border: 1px solid var(--color-divider-2);
    background: var(--bg-color-1);
    color: var(--color-white-1);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: var(--transition-fast);
}

.price-builder__submit:hover {
    background: var(--color-lime-1);
    border-color: var(--color-lime-1);
    color: var(--color-black-1);
}

.price-builder__form-note {
    text-align: center;
    margin: 16px 0 0;
    color: var(--color-white-1);
    opacity: .45;
    font-size: var(--font-size-sm);
}

.price-builder__price {
    color: var(--color-white-1);
    font-size: clamp(34px, 5vw, 48px);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    margin-bottom: 50px;
}

.price-builder__summary {
    display: flex;
    flex-direction: column;
    margin-bottom: 40px;
}

.price-builder__summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--color-divider-1);
}

.price-builder__summary-row:last-child {
    border-bottom: none;
}

.price-builder__summary-label {
    color: var(--color-white-1);
    opacity: .55;
    font-size: var(--font-size-base);
}

.price-builder__summary-value {
    color: var(--color-white-1);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-align: right;
}

.price-builder__disclaimer {
    color: var(--color-white-1);
    opacity: .5;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-body);
    margin-bottom: 30px;
}

.price-builder__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--border-radius-3);
    background: rgba(255, 90, 54, .12);
    color: #ff6b4a;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: normal;
}

/***** End Price Builder Page *****/

/* Estimated price preview on the e-mail step — the same number the summary
   screen shows, so the visitor knows what they are about to get before leaving
   an address. Smaller than the final one, which keeps the breakdown. */
.price-builder__preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 32px;
    padding: 20px 24px;
    border: 1px dashed var(--color-divider-1);
    border-radius: var(--border-radius-4);
    background: var(--bg-color-1);
}

.price-builder__preview-label {
    color: var(--color-white-1);
    opacity: .55;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.price-builder__price--preview {
    margin-bottom: 0;
    font-size: clamp(26px, 3.4vw, 34px);
}
/* Contact details block on the estimate screen: the e-mail carried over from
   the previous step (editable) plus an optional phone number. */
.price-builder__details {
    margin-top: 36px;
    padding-top: 32px;
    border-top: 1px solid var(--color-divider-1);
}

.price-builder__details-title {
    color: var(--color-white-1);
    opacity: .75;
    font-size: var(--font-size-base);
    margin-bottom: 20px;
}

.price-builder__details .price-builder__field {
    margin-bottom: 16px;
}

.price-builder__submit[disabled] {
    opacity: .55;
    cursor: default;
}

.price-builder__submit[disabled]:hover {
    background: var(--bg-color-1);
    border-color: var(--color-divider-2);
    color: var(--color-white-1);
}

.price-builder__submit--ghost {
    margin-top: 16px;
    background: transparent;
}

.price-builder__form-note.--sent {
    color: var(--color-lime-1);
    opacity: 1;
}

.price-builder__form-note.--failed {
    color: #ff6b4a;
    opacity: 1;
}
/***** Grant application (home #grant) *****/

.grant-apply {
    scroll-margin-top: 110px;
}

.grant-apply__card {
    position: relative;
    overflow: hidden;
    padding: 70px 60px;
    background:
        radial-gradient(circle at 0% 0%, rgba(207, 248, 94, 0.14) 0%, rgba(207, 248, 94, 0) 45%),
        radial-gradient(circle at 100% 100%, rgba(207, 248, 94, 0.08) 0%, rgba(207, 248, 94, 0) 40%),
        var(--bg-color-2);
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    z-index: 1;
}

.grant-apply__card::before {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    top: -30px;
    right: -30px;
    background: url(../assests/mascot/section-bg-robot-3.png) center center / cover no-repeat;
    opacity: 0.35;
    animation: movestyle1 7s linear infinite alternate;
    z-index: -1;
    pointer-events: none;
}

.grant-apply .our-service__header {
    width: 100%;
    margin-bottom: 35px;
}

.grant-apply .our-service__header h2 {
    text-align: start;
}

.grant-apply .our-service__header p {
    margin: 20px 0 0;
    line-height: var(--line-height-body);
    color: var(--color-white-1);
    opacity: 0.8;
}

.grant-apply__steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grant-apply__steps li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--color-divider-1);
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-4);
    color: var(--color-white-1);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4em;
    transition: var(--transition-fast);
}

.grant-apply__steps li:hover {
    border-color: var(--color-lime-1);
}

.grant-apply__step-num {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius-2);
    background: var(--gradient-color-2);
    background-size: var(--gradient-size);
    color: var(--color-black-1);
    font-weight: var(--font-weight-bold);
}

.grant-apply__form {
    padding: 40px;
}

.grant-apply__form .form-group {
    margin-bottom: 18px;
}

/* consent checkbox — styled to match the dark inputs */
.grant-apply__consent label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--font-size-sm);
    line-height: 1.5em;
    color: var(--color-white-1);
    opacity: 0.85;
    cursor: pointer;
}

.grant-apply__consent input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-5);
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: var(--transition-fast);
}

.grant-apply__consent input[type="checkbox"]:checked {
    background: var(--color-lime-1);
    border-color: var(--color-lime-1);
}

.grant-apply__consent input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid var(--color-black-1);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.grant-apply__consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-lime-1);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .grant-apply__card {
        padding: 50px 30px;
    }
}

@media (max-width: 575.98px) {
    .grant-apply__card {
        padding: 40px 16px;
        border-radius: var(--border-radius-4);
    }

    .grant-apply__form {
        padding: 24px 16px;
    }

    .grant-apply__steps li {
        padding: 12px 14px;
    }
}

/* grant form dropdowns — same look as the dark inputs, custom arrow */
.grant-apply__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 48px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23CFF85E' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 20px center;
    background-size: 14px;
}

.grant-apply__select:focus {
    background-color: var(--bg-color-1);
}

.grant-apply__select option {
    background-color: var(--bg-color-2);
    color: var(--color-white-1);
}

.grant-apply__consent label a {
    color: var(--color-lime-1);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/***** Privacy policy page *****/

.privacy-policy__body {
    max-width: 860px;
    margin: 0 auto;
    padding: 50px;
    background: var(--bg-color-1);
    border: 1px solid var(--color-divider-2);
    border-radius: var(--border-radius-1);
    color: var(--color-white-1);
}

.privacy-policy__intro {
    font-size: var(--font-size-md);
    line-height: var(--line-height-body);
    margin-bottom: 40px;
}

.privacy-policy__section {
    padding: 28px 0;
    border-top: 1px solid var(--color-divider-2);
}

.privacy-policy__section h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 22px;
    margin-bottom: 14px;
}

.privacy-policy__section h2 .grant-apply__step-num {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
}

.privacy-policy__section p {
    margin: 0;
    line-height: var(--line-height-body);
    opacity: 0.85;
}

.privacy-policy__contact {
    margin-top: 10px;
    padding: 20px 24px;
    border-radius: var(--border-radius-4);
    background: var(--color-divider-1);
    border: 1px solid var(--color-lime-1);
}

.privacy-policy__contact a {
    color: var(--color-lime-1);
}

.privacy-policy__updated {
    margin-top: 24px;
    font-size: var(--font-size-sm);
    opacity: 0.6;
}

@media (max-width: 575.98px) {
    .privacy-policy__body {
        padding: 28px 16px;
        border-radius: var(--border-radius-4);
    }
}

.footer-copyright__link {
    display: inline-block;
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-white-1);
    opacity: 0.6;
    transition: var(--transition-fast);
}

.footer-copyright__link:hover {
    color: var(--color-lime-1);
    opacity: 1;
}