:root {
    --primary-white: #ffffff;
    --primary-white-hover: #4B4B4B;
    --primary-orange: #F15E2B;
    --primary-orange-opacity: rgba(241, 94, 43, 0.12);
    --primary-teal: #008080;
    --primary-teal-opacity: #0E2D2D;
    --primary-black: #0F0F0F;
    --secondary-black: #111111;
    --tertiary-black: #222222;
    --primary-grey: #616161;
    --padding-s: 12px;
    --padding-m: 16px;
    --padding-l: 20px;
    --padding-xl: 40px;
    --padding-xxl: 60px;
    --radius-tiny: 8px;
    --radius-small: 12px;
    --radius-medium: 20px;
    --radius-large: 40px;
    --radius-full: 1000px;
    --breakpoint-md: 768px;
    --breakpoint-sm: 400px;
    --font-primary: 'Gilroy';
}

@font-face {
    font-family: 'Gilroy';
    src: url('../../font/Gilroy-Regular.ttf') format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../../font/Gilroy-Semibold.ttf') format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: 'Gilroy';
    src: url('../../font/Gilroy-Bold.ttf') format("truetype");
    font-weight: 700;
}

button:hover {
    cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p, a, span, label, button, input, textarea, li, div {
    color: var(--primary-white);
    margin: 0px;
    font-family: 'Gilroy';
}

    h1, h1 span {
        font-size: 5.125rem; /* 82px */
        font-weight: 600;
        line-height: 5rem; /* 80px */
    }

        h1 span {
            color: var(--primary-orange);
        }

    h2, h2 span {
        font-size: 3.25rem; /* 52px */
        line-height: 4.225rem; /* 67.6px */
        font-weight: 600;
    }

    h3, h3 span {
        font-size: 2.625rem; /* 42px */
        font-weight: 600;
        line-height: 3.4125rem; /* 54.6px */
    }

h4 {
    font-size: 2.375rem; /* 38px */
    font-weight: 600;
    line-height: 3.0875rem;
}

h5 {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    line-height: 130%;
}

h6, h6 span {
    font-size: 1.125rem; /* 18px */
    font-weight: 600;
    line-height: 1.125rem
}

span {
    font-size: 3.25rem; /* 52px */
    line-height: 4.225rem; /* 67.6px */
    color: var(--primary-teal);
    font-style: italic;
}

p, a, li {
    font-size: 0.875rem; /* 14px */
    line-height: 1.1375rem; /* 18.2px */
}

.paragraph-small {
    font-size: 0.75rem;
    font-weight: 600;
    font-style: italic;
    line-height: 1.25rem;
}

.contact-us-rte a {
    color: #FFF;
    font-size: 20px;
    line-height: 130%;
}

.general-rte tbody {
    border-color: #AAA;
}

.general-rte td {
    color: #AAA;
    padding: 5px;
}

.general-rte li {
    color: #AAA;
    font-size: 1.125rem;
    line-height: 1.8rem;
}

.general-rte a {
    font-size: 1.125rem;
    line-height: 1.8rem;
    text-decoration: underline;
}

.general-rte img, .blog-inner-page-block .general-rte img {
    width: fit-content;
    padding-right: 5px;
}


.hero-title, .hero-title span {
    font-size: 5.125rem; /* 82px */
    font-weight: 600;
    line-height: 5rem; /* 80px */
}

.nav-menu-item a {
    font-size: 1.125rem; /* 18px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem; /* 18px */
    transition: 0.3s
}

    .nav-menu-item a:hover {
        color: var(--primary-orange);
    }

button:hover, a:hover {
    cursor: pointer;
}

.card-paragraph-text {
    color: #FFF;
    font-family: Gilroy;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.3rem; /* 20.8px */
}

a {
    text-decoration: none;
}

.link-icon {
    background: var(--primary-orange);
    width: 62px;
    height: 62px;
    border-radius: var(--radius-full);
    margin-top: 36px;
}

body {
    background-color: var(--primary-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-behavior: smooth;
    cursor: default;
    margin: 0;
}


.flex-end {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
    gap: var(--padding-xxl);
}

section {
    margin-top: 140px;
    max-width: 1280px;
    width: calc(100% - 120px);
    display: flex;
    flex-direction: column;
}

.container {
    width: calc(100% - 40px);
}

.block {
    max-width: 100%;
    margin-bottom: 60px;
}

.btn-primary, .btn-secondary, .btn-primary-orange, .btn-secondary-grey {
    display: flex;
    justify-content: center;
    gap: 8px;
    font-size: 1rem; /* 16px */
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem; /* 18px */
    padding: var(--padding-s) 30px;
    border-radius: 30px;
    color: var(--primary-white);
    border: 1px solid transparent;
    transition: 0.3s;
}

.btn-primary {
    background: var(--primary-teal);
    transition: 0.3s;
}

    .btn-primary:hover {
        border: 1px solid var(--primary-teal);
        background: var(--primary-teal-opacity);
    }

    .btn-primary:focus {
        background: transparent;
    }

.btn-secondary {
    color: var(--primary-black);
    background: var(--primary-white);
    transition: 0.3s;
}

    .btn-secondary:hover {
        border: 1px solid var(--primary-white);
        background: var(--primary-white-hover);
        color: var(--primary-white);
    }

    .btn-secondary:focus {
        background: transparent;
        color: var(--primary-white);
    }

.btn-secondary-grey {
    background-color: #1C1C1C;
}

.btn-primary-orange {
    background-color: var(--primary-orange);
    transition: 0.3s;
}

    .btn-primary-orange:hover {
        border: 1px solid var(--primary-orange);
        background-color: var(--primary-orange-opacity);
    }

    .btn-primary-orange:focus {
        background-color: transparent;
    }

.rte {
    padding-top: 24px;
    margin-bottom: 24px;
}

.small-title {
    font-family: var(--font-primary);
    font-size: 1rem; /* 16px */
    font-weight: 700;
    line-height: 1.375rem; /* 22px */
    letter-spacing: 0.1em;
    text-align: left;
    color: var(--primary-orange);
    text-transform: uppercase;
    padding-bottom: 22px;
}

nav {
    width: calc(100% - 40px);
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 1100;
    margin: var(--padding-l);
}

.nav-container {
    margin: var(--padding-l);
}

.nav-block {
    max-width: 100%;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    padding: var(--padding-l);
    background-color: var(--primary-black);
    border-radius: 1000px;
    align-items: center;
}

.nav-logo-container {
    width: 196px;
    height: 42px;
    object-fit: cover;
}

.logo-mobile {
    display: none;
}

.logo-default {
    display: block;
}

.nav-logo-container img {
    width: 100%;
    height: 42px;
    object-fit: cover;
}

.nav-menu-container {
    display: flex;
    flex-direction: row;
    gap: var(--padding-xl);
}

    .nav-menu-container .active {
        color: var(--primary-orange);
    }

    .nav-menu-container .btn-primary {
        min-width: 125px;
        align-items: center;
    }

.nav-menu-item {
    display: flex;
    gap: 24px;
    align-items: center;
    flex-wrap: wrap;
}

    .nav-menu-item a .link-icon {
        display: none;
        width: 36px;
        height: 36px;
        margin-top: 0px;
    }

.nav-text {
    font-family: Gilroy-SemiBold;
    font-size: 18px;
    font-weight: 400;
    line-height: 18px;
    text-align: center;
}

    .nav-text.active {
        font-family: Gilroy-SemiBold;
        font-size: 18px;
        font-weight: 400;
        line-height: 18px;
        text-align: center;
    }

.burger-menu {
    display: none;
    cursor: pointer;
}

    .burger-menu img {
        width: 32px;
        height: 32px;
    }

.hero-section {
    margin: var(--padding-l);
    margin-bottom: 0;
    width: calc(100% - 40px);
    max-width: none;
}

.hero-container {
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    align-items: center;
    border-radius: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    max-width: none;
}

.hero-container-alt .hero-block {
    display: flex;
    flex-direction: row;
    margin-top: 220px;
}

    .hero-container-alt .hero-block .hero-image-container {
        max-width: 380px;
        max-height: 280px;
    }

        .hero-container-alt .hero-block .hero-image-container img {
            height: 100%;
        }

.CTA-hero {
    height: 790px;
}

.hero-container img {
    border-radius: var(--radius-large);
    width: inherit;
    object-fit: cover;
    max-height: 750px;
}

.general-hero-container img {
    border-radius: var(--radius-large);
    width: inherit;
    height: 430px;
    object-fit: cover;
}

.general-hero-container .fullstack-hero-body-blog {
    padding-bottom: 0px;
}

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

.hero-block {
    width: 100%;
    display: flex;
    gap: var(--padding-xxl);
    flex-direction: column;
    z-index: 1;
    align-items: center;
    text-align: center;
}

.hero-content-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 781px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.fullstack-hero-body {
    font-family: var(--font-primary);
    font-size: 1.125rem; /* 18px */
    line-height: 1.875rem; /* 30px */
    text-align: center;
    padding-bottom: var(--padding-xxl);
}

.title-content-block {
    max-width: 100%;
    margin-bottom: 60px;
}

    .title-content-block h2 {
        width: 440px;
    }

    .title-content-block p {
        padding-top: var(--padding-s);
    }

.client-logo-section {
    width: 100%;
}

.client-logo-container {
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
    align-items: center;
    overflow: hidden;
}

.client-logo-block {
    display: flex;
    max-width: 100%;
    width: 90%;
}

.client-track {
    width: max-content;
    gap: var(--padding-xl);
    display: flex;
    align-content: center;
    flex-wrap: nowrap;
    list-style: none;
}

.client-logo {
    display: flex;
    justify-content: center;
}

    .client-logo img {
        max-height: 48px;
        max-width: auto;
    }

@keyframes move {
    to {
        transform: translate(calc(-50% - 20px));
    }
}

.core-values-block {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.core-value-cards {
    display: flex;
    flex-direction: column;
    gap: 80px;
    padding: var(--padding-xl);
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: 12px 144px 12px 12px;
    transition: 0.3s;
    position: relative;
}

    .core-value-cards .link-icon {
        position: absolute;
        margin: 0px;
        right: 0px;
        top: 0px;
        opacity: 0;
        transition: 0.3s;
    }

        .core-value-cards .link-icon img {
            padding: 16px;
        }

    .core-value-cards:hover {
        background-color: var(--primary-teal);
    }

        .core-value-cards:hover .link-icon {
            opacity: 1;
        }

        .core-value-cards:hover .core-values-cards-title .core-values-cards-image-container {
            background-color: var(--primary-black);
        }

    .core-value-cards .core-values-cards-title .core-values-cards-image-container img {
        filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(3776%) hue-rotate(346deg) brightness(97%) contrast(105%);
    }

    .core-value-cards:hover .core-values-cards-title .core-values-cards-image-container img {
        filter: brightness(0) saturate(100%) invert(100%);
    }

.core-values-cards-title {
    display: flex;
    flex-direction: column;
    gap: var(--padding-s)
}

    .core-values-cards-title .core-values-cards-image-container {
        padding: var(--padding-s);
        background-color: var(--primary-orange-opacity);
        border-radius: var(--radius-tiny);
        max-height: 32px;
        max-width: 32px;
    }

        .core-values-cards-title .core-values-cards-image-container img {
            width: 32px;
            height: 32px;
        }

.key-service-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding-l);
}

.key-service-card {
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
    background-color: var(--secondary-black);
    padding: 20px 46.67px 40px 46.67px;
    border: 1px solid var(--tertiary-black);
    border-radius: 24px;
    transition: 0.3s;
    align-items: center;
    position: relative;
}

    .key-service-card .link-icon {
        position: absolute;
        margin: 0px;
        right: 0px;
        top: 0px;
        opacity: 0;
        transition: 0.3s;
    }

    .key-service-card:hover {
        background-color: var(--primary-teal);
        border-radius: 24px 100px;
    }

    .key-service-card .link-icon img {
        padding: 16px;
    }

    .key-service-card:hover .link-icon {
        opacity: 1;
    }

    .key-service-card .key-service-cards-image-container {
        padding: var(--padding-s);
        background-color: var(--primary-orange-opacity);
        border-radius: var(--radius-tiny);
        max-height: 32px;
        max-width: 32px;
    }

    .key-service-card:hover .key-service-cards-image-container {
        background-color: var(--primary-black);
    }

    .key-service-card .key-service-cards-image-container img {
        filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(3776%) hue-rotate(346deg) brightness(97%) contrast(105%);
    }

    .key-service-card:hover .key-service-cards-image-container img {
        filter: brightness(0) saturate(100%) invert(100%);
    }

.key-service-cards-title {
    display: flex;
    flex-direction: column;
    gap: var(--padding-s);
    align-items: center;
    text-align: center;
}

.key-service-card p {
    text-align: center;
}

.related-projects-container {
    display: flex;
}

.portfolio-container {
    padding: 20px;
    border-radius: 40px;
    border: 1px;
    border-style: solid;
    border-color: var(--tertiary-black);
    background: var(--secondary-black);
}

.portfolio-block {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--padding-xl);
    align-items: center;
}

    .portfolio-block img {
        overflow: hidden;
        max-width: 600px;
        max-height: 600px;
        width: 100%;
    }

.portfolio-content-spacing {
    display: flex;
    flex-direction: column;
    gap: var(--padding-s);
    max-width: 361px;
}

.portfolio-results {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

    .portfolio-results .card {
        flex: content;
        width: auto;
        padding: 80px 30px;
    }

.portfolio-project-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--padding-l)
}

    .portfolio-project-container .portfolio-project-card {
        display: flex;
        flex-direction: column;
        gap: var(--padding-s);
        transition: 0.3s;
        align-items: center;
        height: 280px;
    }

    .portfolio-project-container .portfolio-project-image-container {
        width: 100%;
        height: 100%;
        position: relative;
        background: var(--tertiary-black);
        border-radius: var(--radius-medium);
    }

    .portfolio-project-container .portfolio-project-card:nth-child(2) {
        grid-row: 1/3;
        grid-column: 2/4;
        height: 580px;
    }

    .portfolio-project-container .portfolio-project-card img {
        height: 100%;
        width: 100%;
        object-fit: cover;
        border-radius: var(--radius-medium)
    }

    .portfolio-project-container .portfolio-project-card .portfolio-project-title {
        position: absolute;
        padding: 20px 30px;
        background-color: var(--primary-black);
        border-radius: var(--radius-large);
        bottom: 12px;
        right: 12px;
        left: 12px;
        opacity: 0;
        transition: 0.3s;
        display: flex;
        gap: var(--padding-m);
        align-items: center;
        font-size: 1.125rem;
        line-height: 1.4625rem;
        justify-content: space-between;
    }

    .portfolio-project-container .portfolio-project-card:hover .portfolio-project-title {
        opacity: 1;
    }

    .portfolio-project-container .portfolio-project-card .portfolio-project-title .link-icon {
        margin-top: 0px;
    }

        .portfolio-project-container .portfolio-project-card .portfolio-project-title .link-icon img {
            height: 30px;
            width: 30px;
            padding: 16px;
        }

.load-more-spacing {
    margin-top: var(--padding-xxl);
}

.projectVideo {
    display: flex;
    justify-content: center
}

    .projectVideo video {
        width: 100%;
        height: 670px;
        border-radius: 40px;
    }

.video__wrapper {
    margin: 20px 0;
    display: inline-block;
    position: relative;
    width: 100%;
}

video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    max-width: 100%;
    display: inline-block;
    vertical-align: top;
}

.video__play-button {
    margin: 0;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background-color: rgba(0,0,0,0.8);
    -webkit-appearance: none;
    z-index: 2;
    transition: all 200ms ease-in-out;
    border-radius: 39px
}

.video__play-button-icon {
    transition: all 200ms ease-in-out;
}

.video__play-button-icon--play polygon {
    transform-origin: 50% 50%;
    transition: all 200ms ease-in-out;
}

.video__play-button-icon--play:hover polygon {
    transform: scale(1.5);
}

.video__play-button[data-button-state="pause"] .video__play-button-icon--pause {
    display: none;
}

.video__play-button[data-button-state="play"] .video__play-button-icon--play {
    display: none;
}

.video__play-button[data-button-state="play"] .video__play-button-icon {
    opacity: 0;
}

.video__play-button[data-button-state="play"]:hover .video__play-button-icon {
    opacity: 1;
}

.video__play-button[data-button-state="play"] {
    background-color: rgba(0,0,0,0);
}

    .video__play-button[data-button-state="play"]:hover {
        background-color: rgba(0,0,0,.4);
    }

.video__fullscreen-button {
    margin: 0;
    padding: 0;
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 0;
    -webkit-appearance: none;
    z-index: 3;
    transition: all 200ms ease-in-out;
}

.video__fullscreen-icon {
    padding: 10px;
    display: block;
    vertical-align: top;
    color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all 200ms ease-in-out;
}

.video__wrapper[data-state="pause"] .video__fullscreen-icon,
.video__wrapper[data-state="play"]:hover .video__fullscreen-icon {
    opacity: 1;
    visibility: visible;
}

.video__fullscreen-icon polygon {
    fill: currentColor;
}

.related-protfolio-team-container .card-image-container {
    max-width: 240px;
    min-width: 240px;
    max-height: 240px;
    min-height: 240px;
}

    .related-protfolio-team-container .card-image-container:nth-child(2) {
        border-radius: 20px 144px;
        overflow: hidden;
    }

    .related-protfolio-team-container .card-image-container img {
        width: 100%;
        height: 100%;
    }

.full-width-carousel-container {
    margin-bottom: 80px;
}

    .full-width-carousel-container .carousel-block {
        position: relative;
    }

        .full-width-carousel-container .carousel-block .carousel-dots {
            justify-content: center;
            display: flex;
            position: absolute;
            width: 100%;
            bottom: var(--padding-l);
        }

        .full-width-carousel-container .carousel-block img {
            width: 100%;
            height: 670px;
            object-fit: contain;
            border-radius: var(--radius-large);
        }

.carousel-dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    border: none;
}

    .carousel-dot .active {
        background: var(--primary-orange);
    }

.carousel-card {
    border-radius: 40px 144px 40px 40px;
    border: 1px solid #222;
    background: #111;
    display: flex;
    align-items: center;
    gap: 60px;
    overflow: hidden;
    padding: 20px;
}

    .carousel-card .four-image-content {
        max-width: 400px;
        width: 100%;
        padding: var(--padding-l);
    }

        .carousel-card .four-image-content ul li {
            font-size: 0.875rem;
            line-height: 1.1375rem;
            padding-bottom: var(--padding-s);
        }

.four-image-content-orange h2 {
    color: var(--primary-orange);
}

.four-image-content .cta-btn-container {
    margin-top: 60px;
}

.cta-btn-container-alt {
    padding-top: var(--padding-xl);
}

.carousel-dots-container {
    justify-content: center;
    display: flex;
    position: absolute;
    width: 50%;
    bottom: var(--padding-xl);
}

.carousel-dot-block {
    padding: 8px;
}

    .carousel-dot-block .active {
        background: var(--primary-orange);
    }

.carousel-card h2 {
    color: var(--primary-teal);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 38px;
}

.carousel-card-heading h2 {
    color: var(--primary-orange);
}

.carousel-card-img {
    width: 600px;
    max-height: 600px;
    height: 600px;
    border-radius: 40px;
}

    .carousel-card-img img {
        max-width: 600px;
        height: 100%;
        border-radius: var(--padding-xl);
        width: 100%;
        object-fit: cover;
    }

.testimonial-content, .testimonial-btn-container {
    display: flex;
    justify-content: center;
}

.testimonial-btn-container {
    justify-content: space-between;
    padding-top: 120px;
}

    .testimonial-btn-container button {
        background-color: transparent;
        border: none;
        border-top: 4px solid #222;
        padding: 24px;
        color: #FFF;
        flex: 1;
        transition: 0.3s;
    }

        .testimonial-btn-container button:hover, .tablinks.active {
            border-top: 4px solid #F15E2B;
        }

.testimonial-content img {
    height: 52px;
}

#quoteFormContainer {
    margin-top: 100px;
    display: flex;
    justify-content: center;
}

.quote-dropdown-options {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    width: 100%;
    max-width: 230px;
    background-color: var(--primary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-medium);
    z-index: 10;
    overflow-y: auto;
    max-height: 350px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding-left: 0px;
}

    .quote-dropdown-options.active {
        display: flex;
        flex-direction: column;
    }

    .quote-dropdown-options li {
        list-style: none;
    }

.quote-dropdown-button {
    display: flex;
    align-items: center;
    padding: 12px 12px 10px 25px;
    cursor: pointer;
    border: 1px solid #222;
    background-color: #0F0F0F;
    border-radius: var(--radius-full);
    min-width: 230px;
    width: 100%;
    justify-content: space-between;
    max-height: 42px;
}

    .quote-dropdown-button span {
        font-size: 1rem;
        font-style: normal;
        line-height: 0.6rem;
        color: #AAA;
    }

    .quote-dropdown-button:focus {
        border: 1px solid var(--primary-teal);
        outline: none;
    }

.quote-dropdown-options.active + .quote-dropdown-button {
    border-color: var(--primary-teal);
}

.testimonial-content-quotation1 {
    height: revert-layer;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-self: stretch;
}

.testimonial-content-quotation2 {
    height: revert-layer;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-self: stretch;
}

.testimonial-quote-container {
    text-align: center;
    max-width: 700px;
    padding: 52px 0;
}

.testimonial-quote p {
    font-size: 1.5rem;
    line-height: 1.95rem;
}

.testimonial-content:nth-child(1) {
    display: flex;
}

.testimonial-content {
    display: none;
}

.insights-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding-l)
}

.insights-block {
    max-width: 100%;
    margin-bottom: 60px;
}

.insights-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding-l)
}

.insights-cards {
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-small);
    overflow: hidden;
    transition: 0.3s;
}

    .insights-cards:hover {
        background-color: var(--primary-teal);
    }

    .insights-cards:nth-child(1) {
        grid-column: 1 / span 3;
        border-radius: 12px 144px 12px 12px;
    }

    .insights-cards:nth-child(2) {
        border-radius: 144px 12px 12px 12px;
    }

    .insights-cards:nth-child(4) {
        border-radius: 12px 144px 12px 12px;
    }

    .insights-cards img {
        height: 300px;
        width: 100%;
        object-fit: cover;
    }

.insights-cards-title {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px 20px 20px;
}

    .insights-cards-title .link-icon img {
        width: 30px;
        height: 30px;
        padding: 16px;
    }

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.faq-cards img {
    padding: var(--padding-s);
    border-radius: var(--radius-full);
}

.faq-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.FAQ-RTE hr, .FAQ-RTE tbody {
    border-color: #ffffff;
}

.FAQ-RTE td {
    color: #ffffff;
    padding: 5px;
}

.accordion {
    cursor: pointer;
    transition: 0.4s;
}

    .accordion img {
        height: 24px;
    }

.faq-icon {
    height: 48px;
    border-radius: 1000px;
    background-color: var(--primary-orange);
}

.faq-cards .active .faq-icon {
    background-color: #0F0F0F;
}

.faq-active {
    display: block;
}

.faq-inactive {
    display: none;
}

.allPaths {
    fill: #008080;
    fill-opacity: 0.1;
    stroke: #F15E2B;
    stroke-width: 0.3px;
}

.location-group {
    position: relative;
}

.text-block {
    visibility: hidden;
    pointer-events: none;
}

.location-group:hover .text-block {
    visibility: visible;
}

.hover-info {
    background-color: var(--primary-orange);
    padding: var(--padding-l);
    border-radius: 24px 24px 0px 24px;
}

    .hover-info p {
        font-size: 0.625rem;
        font-style: italic;
        font-weight: 600;
        line-height: 0.8125rem;
    }

.panel {
    display: none;
    overflow: hidden;
    padding-bottom: 24px;
}

.faq-cards {
    overflow: hidden;
    gap: 24px;
    padding: 20px;
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-large);
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}

    .faq-cards:hover {
        background: var(--primary-teal);
    }

    .faq-cards.active {
        background-color: var(--primary-teal);
    }

.cta-container {
    height: 371px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    width: 100%;
    border-radius: var(--radius-large);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.cta-title {
    max-width: 408px;
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
}

.cta-title-02 {
    padding-bottom: var(--padding-xl);
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
}

.cta-title h2 {
    margin: 0px;
}

.cta-title p {
    padding-bottom: var(--padding-xl);
}

.cta-background-image {
    position: absolute;
    z-index: 0;
    height: 371px;
    max-width: 1160px;
    overflow: hidden;
    display: block;
    object-fit: cover;
    width: 100vw;
    border-radius: var(--radius-large);
}

.cta-block {
    height: 371px;
    overflow: hidden;
    display: block;
    object-fit: cover;
    border-radius: var(--radius-large);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cta-image-block {
    max-width: 1160px;
    overflow: hidden;
    display: flex;
    object-fit: cover;
    width: 100vw;
    border-radius: var(--radius-large);
    border-radius: 40px;
    border: 1px solid #222;
    background: #111;
    align-items: center;
    justify-content: space-between;
}

.cta-content-container {
    display: flex;
    flex-direction: column;
    object-fit: cover;
    overflow: hidden;
    padding-left: 20px;
    height: inherit;
    justify-content: center;
}

.cta-image-block .cta-title {
    max-width: inherit;
}

.cta-btn-container {
    display: flex;
    gap: var(--padding-s)
}

footer {
    max-width: 1280px;
    width: calc(100% - 120px);
    justify-content: center;
    margin-top: 200px;
    display: flex;
    overflow: hidden;
}

.footer-container {
    flex-direction: column;
    flex: 1;
    display: flex;
}

.footer-link-container {
    justify-content: center;
    align-self: stretch;
    align-items: center;
    padding-bottom: 52px;
    display: flex;
}

.footer-first-block {
    flex: 1;
    justify-content: space-between;
    display: flex;
}

.footer-logo-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1;
    max-width: 461px;
    margin-right: 40px;
}

.footer-submit {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

    .footer-submit .footer-link-title {
        padding-bottom: var(--padding-s);
    }

    .footer-submit button {
        max-width: 133px;
    }

.footer-brand {
    height: 60px;
}

    .footer-brand img {
        object-fit: cover;
        height: inherit;
    }

.footer-link-block {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex: 1;
    justify-content: space-between;
    max-width: 100%;
    display: flex;
}

.footer-link-title {
    font-size: 1.375rem; /* 22px */
    font-weight: 600;
    line-height: 1.25rem; /* 20px */
    color: var(--primary-teal);
    padding-bottom: var(--padding-xl);
}

.footer-link, .footer-link p {
    font-size: 1.125rem; /* 18px */
    font-weight: 400;
    line-height: 1.4625rem; /* 23.4px */
    color: var(--primary-white);
    padding-bottom: var(--padding-m);
    text-align: left;
    display: flex;
    flex-direction: column;
}

.footer-address-container {
    max-width: 300px;
    margin-right: 40px;
}

.footer-address-container-block {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    flex-direction: row;
    width: 80%;
}

.footer-image-box {
    width: 244px;
    object-fit: cover;
    border-radius: var(--radius-small);
    color: var(--primary-white);
    font-family: 'Gilroy';
}

    .footer-image-box span {
        font-size: 0.75rem; /* 12px */
        line-height: 1.1375rem;
        color: var(--primary-white);
        font-style: normal;
        color: #AAA;
    }

    .footer-image-box svg {
        filter: invert(66%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(91%) contrast(88%);
    }

    .footer-image-box a {
        background: var(--tertiary-black);
        border-radius: var(--radius-small);
    }

.footer-address-logo-location {
    display: flex;
    gap: 8px;
    align-items: center;
}

    .footer-address-logo-location p {
        font-weight: 600;
    }

.company {
    max-width: fit-content;
}

.follow-us {
    width: min-content;
}

    .follow-us img {
        width: 244px;
        height: 140px;
        object-fit: cover;
        border-radius: var(--radius-small);
    }

.footer-icon-container {
    border-top: 1px solid var(--tertiary-black);
    justify-content: end;
    align-self: stretch;
    padding-top: 32px;
    padding-bottom: var(--padding-xxl);
    display: flex;
    gap: var(--padding-s);
    margin-top: 32px;
    justify-content: space-between;
}

    .footer-icon-container img {
        height: 32px;
        width: 32px;
    }

.footer-link-box {
    margin-right: 0;
    padding-right: 0;
}

.footer-submit p {
    padding-bottom: 0px;
}

.footer-submit input {
    box-sizing: border-box;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.125rem;
    margin: 0px;
}

    .footer-submit input:focus {
        border: 1px solid var(--primary-teal);
        outline: none;
    }

textarea {
    border-radius: 1000px;
    border: 1px;
    border-style: solid;
    border-color: var(--tertiary-black);
    background-color: var(--secondary-black);
    padding: 12px 30px 10px 30px;
    max-height: 40px;
    max-width: 100%;
    font-size: 1rem; /* 16px */
    font-weight: 400;
    line-height: 1.125rem; /* 18px */
    text-align: left;
    color: var(--primary-grey);
    overflow: hidden;
    resize: none;
}

hr {
    border-color: var(--tertiary-black);
    margin: 32px 0px;
}

.core-values-container {
    display: flex;
    flex-direction: column;
}

.card-container {
    display: flex;
    gap: 20px;
}

.card img {
    max-height: 115px;
    margin-bottom: 20px;
}

.card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: var(--padding-xl) var(--padding-l);
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: 24px;
    width: 300px;
    align-self: stretch;
    align-content: center;
    text-align: center;
}

.job-listing-responsabilities-cards {
    display: grid;
    grid-template-columns: repeat( 2, 1fr);
    gap: var(--padding-l);
}

    .job-listing-responsabilities-cards .card {
        width: 100%;
        padding: 0px;
    }

        .job-listing-responsabilities-cards .card p {
            padding: 30px;
            text-align: left;
        }

.load-more {
    display: flex;
    justify-content: center;
    width: 100%;
    align-self: center;
}

.testimonial-dots-container {
    display: none;
}

.qualities-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

    .qualities-cards .card {
        width: auto;
        text-align: center;
        padding: var(--padding-xl) var(--padding-l);
        transition: 0.3s;
    }

        .qualities-cards .card:hover {
            background: var(--primary-teal);
            border-radius: 24px 144px 24px 24px;
        }

        .qualities-cards .card .card-title img {
            filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(3776%) hue-rotate(346deg) brightness(97%) contrast(105%);
        }

        .qualities-cards .card:hover .card-title img {
            filter: brightness(0) saturate(100%) invert(100%);
        }

.quote-name {
    text-align: center;
    margin-top: 60px;
}

    .quote-name h3 {
        color: var(--primary-orange);
    }

    .quote-name p {
        color: #555555;
    }

.roles-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

    .roles-cards .card {
        width: auto;
        color: var(--primary-orange);
        transition: 0.3s;
        align-items: center;
    }

.orange-hover:hover {
    background: var(--primary-orange);
    border-radius: 24px 144px;
    color: var(--primary-white);
}

.roles-cards h5 {
    font-size: 24px;
    margin-bottom: 12px;
}

.role-card .card-text {
    max-width: 280px;
}


.job-cards .card {
    text-align: start;
    gap: var(--padding-l);
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 350px;
}

.job-cards:nth-child(1) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.job-cards .card .orange-heading {
    align-items: center;
    display: flex;
    gap: 4px;
    padding-top: 4px;
}

.job-cards .card .job-body {
    color: #989898;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    padding-top: 36px;
}

.tab-headers {
    display: flex;
    border-bottom: 1px solid var(--tertiary-black);
}

.tab-dropdown-container {
    display: none;
}

.tab-link {
    padding: 12px 80px;
    cursor: pointer;
    border-radius: 20px 20px 0px 0px;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
    border: 1px solid var(--tertiary-black);
    background: var(--primary-black);
    color: #989898;
}

.tablinks p {
    color: #555555;
    padding-top: 8px;
}

.tab-link.active {
    background-color: var(--primary-white);
    color: var(--primary-black);
    border: none;
}

.tablinks.active h5 {
    color: var(--primary-orange);
}

.tab-content {
    margin-top: var(--padding-xxl);
}

.tab-pane {
    display: none;
}

    .tab-pane .job-cards a {
        display: flex;
        width: fit-content;
        align-items: flex-start;
        gap: 8px;
    }

    .tab-pane .job-cards img {
        margin-bottom: 0px;
        width: 20px;
        height: 20px;
    }

.job-cards .card .card-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.careers-testimnonials-carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.careers-testimnonials-carousel-wrapper {
    display: flex;
    flex-direction: row;
    transition: transform 0.5s ease-in-out;
    gap: var(--padding-l);
    margin: 0 auto;
}

.careers-testimnonials-carousel-item {
    flex: 0 0 calc((100% / 3) - 20px);
    box-sizing: border-box;
    background: #111;
    border-radius: 10px;
    border: 1px solid var(--tertiary-black);
}

    .careers-testimnonials-carousel-item .card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        box-sizing: border-box;
        height: 100%;
        width: auto;
        background-color: none;
        border: none;
        border-radius: 0px;
    }

    .careers-testimnonials-carousel-item img {
        height: 48px;
    }

.carousel-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
}

.carousel-btn {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%;
    display: none;
}

.careers-testimnonials-carousel-container .carousel-dots {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.carousel-dots {
    text-align: center;
    margin-top: 20px;
}

.carousel-dot {
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: gray;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: inline-block;
}

    .carousel-dot.active {
        background: var(--primary-orange);
    }

.author-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .author-info img {
        max-width: 38px;
        width: 100%;
        max-height: 38px;
        height: 100%;
        object-fit: cover;
        margin-bottom: 14px;
        border-radius: 8px;
    }

    .author-info p {
        margin-top: 4px;
        color: #555;
        font-size: 10px;
        font-weight: 400;
    }

.job-details-card-container .carousel-card {
    border-radius: 40px 144px 40px 40px;
}

    .job-details-card-container .carousel-card .carousel-card-img {
        border-radius: 40px 144px 40px 40px;
        overflow: hidden;
    }

.custom-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-button {
    display: flex;
    align-items: center;
    padding: 12px 12px 10px 25px;
    cursor: pointer;
    border: 1px solid var(--primary-teal);
    background-color: var(--primary-black);
    border-radius: var(--radius-full);
    min-width: 230px;
    width: 100%;
    justify-content: space-between;
}

    .dropdown-button span {
        font-size: 1.125rem;
        font-weight: 400;
        line-height: 1.75rem;
        font-style: normal;
        color: var(--primary-white);
    }

    .dropdown-button .dropdown-icon {
        line-height: normal;
    }

.dropdown-options {
    position: absolute;
    flex-direction: column;
    display: none;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--primary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-medium);
    z-index: 10;
    overflow: scroll;
    overflow-x: hidden;
    max-height: 350px;
}

.dropdown-item {
    margin: 8px;
    font-family: 'Gilroy';
    padding: 8px 22px;
    cursor: pointer;
    color: var(--primary-white);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.125rem;
    text-transform: capitalize;
    background: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: 24px;
    text-align: left;
    transition: 0.3s;
}

    .dropdown-item:hover {
        background-color: var(--primary-teal);
    }

@media (max-width: 1024px) {
    nav {
        max-width: 100%;
        width: 100%;
        margin: 0px;
    }

    .hero-section {
        margin: 10px;
        width: calc(100% - 20px);
    }

    .logo-mobile {
        display: block;
    }

    .nav-logo-container {
        height: 54px;
        width: 54px;
    }

        .nav-logo-container img {
            height: 54px;
            width: 54px;
        }

    .nav-container {
        margin: 0px;
        width: 100%;
        height: 100%;
    }

    .nav-menu-container {
        display: none;
    }

    .nav-menu-active {
        height: 81vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .nav-controller {
        justify-content: space-between;
        display: flex;
        width: 100%;
        padding-bottom: 25px;
    }

    .nav-block {
        display: flex;
        flex-direction: column;
        background-color: var(--primary-black);
        border-radius: 0px;
        gap: 27px;
        padding: 25px;
        background-color: transparent;
        justify-content: normal;
        align-items: inherit;
    }

    .bg-active {
        background-color: var(--primary-black);
        height: 100vh;
    }

    .nav-menu-item {
        flex-direction: column;
        z-index: 1000;
        width: 100%;
        align-items: flex-start;
        gap: var(--padding-s);
    }

        .nav-menu-item a {
            font-size: 32px;
            line-height: 41.6px;
            border-bottom: 1px solid var(--primary-grey);
            padding-bottom: var(--padding-s);
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .nav-menu-item a .link-icon {
                display: block;
            }

                .nav-menu-item a .link-icon img {
                    width: 16px;
                    height: 16px;
                    padding: 10px;
                }

    .nav-menu-container .btn-primary {
        border-radius: 144px 12px;
        margin-bottom: var(--padding-xl);
        margin-top: auto;
        padding: 32px 24px;
    }

    .nav-menu-container .active {
        border-bottom: 1px solid var(--primary-white);
    }

    .burger-menu {
        display: block;
        padding: var(--padding-s);
        background-color: var(--primary-teal);
        border-radius: var(--radius-full);
        max-width: 32px;
        max-height: 32px;
    }

    .burger-visible {
        display: block;
    }

    .burger-hidden {
        display: none;
    }

    section {
        max-width: 1024px;
        width: calc(100% - 70px);
        margin-top: 100px;
        margin-right: 35px;
        margin-left: 35px;
    }

    .core-values-block {
        grid-template-columns: repeat(2, 1fr);
    }

    .key-service-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-cards:nth-child(1) {
        grid-column: 1 / span 2
    }

    .insights-cards:nth-child(3) {
        border-radius: 12px 144px 12px 12px
    }

    .insights-cards:nth-child(4) {
        grid-column: 1 / span 2;
    }

    .qualities-cards {
        grid-template-columns: repeat(2, 1fr)
    }

    .roles-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .job-cards:nth-child(1) {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-logo-block {
        justify-content: flex-start;
        gap: var(--padding-xl);
    }

    .footer-link-block {
        flex-wrap: wrap;
    }

    .portfolio-project-container {
        grid-template-columns: repeat(2, 1fr);
    }

        .portfolio-project-container .portfolio-project-card:nth-child(2) {
            grid-row: 1/2;
            grid-column: 2/2;
            height: 280px;
        }

        .portfolio-project-container .portfolio-project-card .portfolio-project-title {
            opacity: 1;
        }

            .portfolio-project-container .portfolio-project-card .portfolio-project-title h5 {
                font-size: 14px
            }

    .careers-testimnonials-carousel-item {
        flex: 0 0 calc((100% / 2) - 20px);
    }

        .careers-testimnonials-carousel-item p {
            font-size: 1.25rem;
        }

        .careers-testimnonials-carousel-item img {
            height: 32px;
        }

    .portfolio-results {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 762px) {

    h1, h1 span {
        font-size: 2.5rem;
        line-height: 3.25rem;
    }

    h2, h2 span {
        font-size: 2.375rem; /* 38px */
        line-height: 3.088rem; /* 49.4px */
    }

    h3, h3 span {
        font-size: 1.625rem; /* 26px */
        line-height: 2.1125rem; /* 33.8px */
    }

    h5 {
        font-size: 1.25rem; /* 24px */
        line-height: 1.775rem; /* 38px */
    }

    span {
        font-size: 2.375rem; /* 20px */
        line-height: 3.088rem; /* 49.4px */
    }

    .small-title {
        font-size: 0.75rem; /* 12px */
        line-height: 1.375rem; /* 22px */
        letter-spacing: 0.075rem; /* 1.2px */
    }

    p, a {
        font-size: 0.875rem; /* 14px */
        line-height: 1.1375rem; /* 15.6px */
    }

    .hero-title, .hero-title span {
        font-size: 2.5rem; /* 40px */
        line-height: 3.25rem; /* 52px */
    }

    .fullstack-hero-body {
        display: none;
    }

    .title-content-block h2 {
        max-width: 320px;
        width: auto;
    }

    .footer-brand {
        align-self: center;
    }

    .CTA-hero {
        height: 652px;
    }

        .CTA-hero .hero-content-container {
            position: relative;
            max-width: 100%;
            height: 100%;
            margin-left: 20px;
            margin-right: 20px;
        }

            .CTA-hero .hero-content-container .hero-btn {
                position: absolute;
                bottom: -36px;
                height: 45px;
                padding: 10px;
                align-content: center;
                background-color: var(--primary-black);
                border-radius: var(--radius-large);
            }

    .client-track {
        gap: 32px;
    }

    .client-logo img {
        max-height: var(--padding-xl);
    }

    .details-page-hero-container .hero-block {
        margin-top: 104px;
    }

    .hero-container-alt .hero-block .hero-image-container {
        display: none;
    }

    .details-page-hero-container .hero-content-container {
        margin: 0px 35px;
    }

    .core-values-block {
        grid-template-columns: repeat(1, 1fr);
    }

    .core-value-cards {
        gap: var(--padding-xl);
    }

    .key-service-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .key-service-card {
        padding: 20px 20px 40px 20px;
    }


    .key-service-cards-title {
        gap: var(--padding-s);
    }

    .carousel-card-img {
        width: 100%;
        height: 300px;
    }

        .carousel-card-img img {
            max-width: 100%;
            height: 100%;
        }

    .carousel-card {
        flex-direction: column;
        padding: 10px;
        gap: var(--padding-l);
        align-items: flex-start;
        border-radius: var(--radius-large);
    }

        .carousel-card .four-image-content {
            max-width: fit-content;
            text-align: left;
        }

    .carousel-dots-container {
        bottom: auto;
        width: 100%;
        top: 276px;
    }

    .testimonial-content {
        justify-content: space-between;
    }

    .testimonial-btn-container {
        justify-content: space-between;
        padding-top: var(--padding-xxl);
    }

        .testimonial-btn-container button {
            position: relative;
            display: block;
            height: 4px;
            overflow: hidden;
            padding: 0px;
        }

    .panel {
        padding: 0px;
    }

    .four-image-content .cta-btn-container {
        flex-direction: row;
    }

        .four-image-content .cta-btn-container a, .four-image-content .cta-btn-container button {
            width: 100%;
        }

    .tablinks.active {
        height: auto;
        min-width: 250px;
    }

    .job-cards:nth-child(1) {
        grid-template-columns: repeat(2, 1fr);
    }

    .insights-content {
        grid-template-columns: repeat(1, auto);
    }

    .insights-cards:nth-child(1), .insights-cards:nth-child(4) {
        grid-column: 1 / span 1
    }

    .insights-cards {
        grid-column: 1 / span 1
    }

    .qualities-cards {
        grid-template-columns: repeat(1, 1fr)
    }

    .roles-cards {
        grid-template-columns: repeat(1, 1fr);
    }

    .job-cards:nth-child(1) {
        grid-template-columns: repeat(1, 1fr);
    }

    .testimonial-dots-container {
        display: block;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .tab-dropdown-container {
        display: block;
        position: relative;
        width: auto;
        max-width: 100%;
        margin: 20px 0;
        cursor: pointer;
    }

    .dropdown-wrapper {
        position: relative;
    }

    #dropdownButton {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 8px 8px 30px;
        cursor: pointer;
        background-color: var(--secondary-black);
        color: var(--primary-white);
        border: 1px solid var(--primary-teal);
        border-radius: var(--radius-full);
        transition: 0.3s;
    }

        #dropdownButton .selected-category {
            font-size: 1rem;
            font-weight: 600;
            font-style: normal;
            line-height: 1.125rem;
            color: var(--primary-orange);
        }

    .dropdown-menu {
        position: absolute;
        flex-direction: column;
        display: none;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--primary-black);
        border: 1px solid var(--tertiary-black);
        border-radius: var(--radius-medium);
        z-index: 10;
    }

    .dropdown-icon {
        padding: var(--padding-s);
        background: var(--primary-teal);
        border-radius: var(--radius-full);
        line-height: normal;
        font-size: xx-small;
    }

        .dropdown-icon img {
            width: 24px;
            height: 24px;
        }

    .tab-headers {
        display: none;
    }

    .portfolio-project-container {
        display: flex;
        flex-direction: column;
    }

    .related-projects-container {
        flex-direction: column;
    }

    footer {
        max-width: 1024px;
        width: calc(100% - 70px);
    }

    .footer-first-block {
        flex-direction: column;
        gap: var(--padding-xl);
    }

    .footer-submit button {
        max-width: 100%;
    }

    .footer-logo-block {
        max-width: 100%;
        gap: var(--padding-xl);
        margin-right: 0px;
    }

    .footer-submit {
        gap: 8px;
    }

    .footer-link-title {
        padding-bottom: 32px;
    }

    .footer-link-box {
        min-width: auto;
    }

    .footer-icon-container {
        justify-content: center;
        padding-top: var(--padding-s);
        margin-top: var(--padding-xxl);
    }

    .footer-image-box {
        display: flex;
        flex-direction: column;
        gap: var(--padding-s);
    }

    .load-more button {
        width: 100%;
    }
}

@media (max-height: 762px) {

    .nav-block {
        gap: var(--padding-l);
    }

    .nav-controller {
        padding-bottom: var(--padding-l);
    }

    .nav-menu-item a {
        font-size: 24px;
        padding-bottom: 8px;
    }

        .nav-menu-item a .link-icon {
            height: 30px;
            width: 30px;
        }

            .nav-menu-item a .link-icon img {
                width: 16px;
                height: 16px;
                padding: 6px;
            }
}

@media (max-width: 480px) {

    .fullstack-hero-body {
        font-size: 1.25rem;
        font-weight: 400;
        max-width: 500px;
        line-height: 1.625rem;
    }

    .small-title {
        font-size: 0.875rem; /* 14px */
    }

    .navbar-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

        .navbar-menu.active {
            display: flex;
        }

    .navbar-toggle {
        display: block;
    }

    .client-logo {
        max-height: 40px;
    }

    .core-values-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .cta-container {
        height: 400px;
    }

        .cta-container .cta-block {
            height: 400px;
        }

    .cta-content-container {
        padding: 0px 30px;
        text-align: left;
    }

    .job-cards {
        flex-direction: column;
    }

        .job-cards .card {
            width: auto;
        }

    .job-listing-responsabilities-cards {
        grid-template-columns: repeat( 1, 1fr);
    }

    .job-cards:nth-child(1) {
        grid-template-columns: repeat(1, 1fr);
    }

    .orange-hover:hover {
        border-radius: 24px 120px;
    }

    .related-protfolio-team-container .card-image-container {
        min-width: 100%;
    }

    .portfolio-results {
        grid-template-columns: repeat(1, 1fr);
    }
}

/*About use Page*/
.general-hero-container {
    margin: var(--padding-l);
    margin-bottom: 0;
}

    .general-hero-container .hero-block {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .general-hero-container .hero-content-container {
        margin-top: -180px;
        border-radius: 144px;
        background: #0F0F0F;
        padding: 40px;
        transform: translate(0, -10%);
        min-height: 200px;
        margin-left: 35px;
        margin-right: 35px;
    }

        .general-hero-container .hero-content-container p {
            padding-bottom: 0px;
        }

.hero-image-container {
    height: 430px;
    width: 100%;
}

.world-map {
    width: 100%;
    height: 100%;
}

.location-dot {
    fill: var(--primary-orange);
    cursor: pointer;
}

.tooltip {
    position: absolute;
    background-color: var(--primary-orange);
    color: var(--primary-white);
    padding: var(--padding-l);
    border-radius: 0px 24px 24px 24px;
    white-space: nowrap;
    display: none;
    pointer-events: none;
    z-index: 1000;
    gap: 4px;
    flex-direction: column;
}

.tooltip-location {
    font-size: 0.750rem;
    font-style: normal;
    font-weight: 600;
    line-height: 0.8125rem;
}

.tooltip-business {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.625rem;
}

.team-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.team-card {
    border-radius: 12px 144px 12px 12px;
    border: 1px solid #222;
    background-color: var(--primary-black);
    width: 100%;
    transition: 0.3s;
}

    .team-card:nth-child(2), .team-card:nth-child(2) .team-card-image {
        border-radius: 144px 12px 12px 12px;
    }

    .team-card:nth-child(3), .team-card:nth-child(3) .team-card-image {
        border-radius: 144px 12px 12px 12px;
    }

.team-card-image {
    max-height: 450px;
    overflow: hidden;
    border-radius: 12px 144px 12px 12px;
    background-color: var(--tertiary-black);
}

    .team-card-image img {
        width: 100%;
        object-fit: cover;
        max-height: 450px;
    }

.radius-right {
    border-radius: 12px 144px 0px 0px;
}

.radius-left {
    border-radius: 144px 12px 0px 0px;
}

.team-card-social-media {
    display: flex;
    gap: 12px;
    margin-top: var(--padding-xl);
}

.team-card-content {
    padding: 20px;
    padding-top: 24px;
}

.team-card-social-media img {
    width: 32px;
    height: 32px;
}

.paragraph-content-block p {
    font-size: 1.25rem; /* 20px */
    font-weight: 400;
    max-width: 500px;
    line-height: 1.625rem; /* 26px */
}

.team-card-text h5 {
    color: var(--primary-teal);
    font-family: Gilroy;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    font-style: italic;
    padding-bottom: 4px;
}

.team-card-text h4 {
    padding-bottom: 24px;
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.25rem; /* 83.333% */
}

.team-card-text h6 {
    font-size: 1rem;
    line-height: 1.3rem;
}

.image-container {
    align-self: center;
    max-width: 467px;
    max-height: 467px;
}

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

.box-container img {
    width: 72px;
    height: 72px;
    border-radius: 20px;
}

.column-flex-container {
    display: flex;
    justify-content: space-around;
    padding-top: 120px;
    gap: var(--padding-xxl);
}

.column-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.box-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.principles-container {
    text-align: center;
    gap: var(--padding-s);
}

    .principles-container h5 {
        color: var(--primary-teal);
    }

    .principles-container h2 {
        padding-bottom: 5px;
    }

.principles-container-image-container {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background-color: var(--primary-orange-opacity);
}

    .principles-container-image-container img {
        width: 36px;
        height: 36px;
        padding: 18px;
        filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(3776%) hue-rotate(346deg) brightness(97%) contrast(105%);
    }

.four-image-card:nth-child(1) {
    border-radius: 144px 12px 12px 12px;
    ;
    border: 1px solid #222;
}

.four-image-card {
    display: flex;
    align-items: center;
    gap: 24px;
    border-radius: 12px 144px 12px 12px;
    border: 1px solid #222;
    background: var(--primary-black);
    overflow: hidden;
    height: 300px;
    transition: 0.3s;
}

    .four-image-card:nth-child(2) {
        border-radius: 12px 144px 12px 12px;
    }

    .four-image-card:nth-child(3) {
        border-radius: 12px 12px 12px 144px;
    }


    .four-image-card:nth-child(4) {
        border-radius: 12px 12px 144px 12px;
    }


.four-image-content {
    padding-right: 20px;
}

    .four-image-content p {
        padding-top: 24px;
    }

.four-card-img {
    display: flex;
    width: 100%;
    height: 100%;
}

    .four-card-img img {
        max-width: 300px;
        width: 100%;
        max-height: 300px;
        object-fit: cover;
    }

.four-image-content {
    width: 100%;
    padding: var(--padding-l);
}

@media (max-width: 1024px) {
    .four-image-card {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
    }

    .four-card-img {
        width: 100%;
        max-width: 100%;
    }

        .four-card-img img {
            max-width: 100%;
            min-width: auto;
        }

    .four-image-content {
        width: auto;
        padding-left: var(--padding-l);
        padding-bottom: var(--padding-l);
    }

    .four-image-card:nth-child(1) {
        border-radius: 144px 12px 12px 12px;
    }

    .four-image-card:nth-child(3) {
        border-radius: 144px 12px 12px 12px;
    }

    .four-image-card:nth-child(4) {
        border-radius: 12px 144px 12px 12px;
    }
}

@media (max-width: 762px) {

    .general-hero-container {
        margin: 10px;
    }

    .container {
        width: calc(100% - 20px);
    }

    .general-hero-container .hero-content-container {
        border-radius: 80px;
        min-width: auto;
        padding: var(--padding-l);
        min-height: 176px;
        width: auto;
    }

        .general-hero-container .hero-content-container p {
            display: block;
            padding-bottom: 0px;
        }

    .map-container {
        height: 400px;
        width: 100vw;
        align-self: center;
    }

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

    .flex-end {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--padding-l);
    }

    .column-flex-container {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        gap: 72px;
    }

    .column-container {
        grid-template-columns: 1fr;
    }

    .principles-container {
        width: 200px;
    }

    .team-container {
        grid-template-columns: 1fr;
    }

    .team-card:nth-child(3), .team-card:nth-child(3) .team-card-image {
        border-radius: 12px 144px 12px 12px;
    }

    .team-card:nth-child(4), .team-card:nth-child(4) .team-card-image {
        border-radius: 144px 12px 12px 12px;
    }

    .careers-testimnonials-carousel-item {
        flex: 0 0 100%;
    }

    .careers-testimnonials-carousel-wrapper {
        width: 100%;
        gap: 0px;
    }
}

@media (max-width: 480px) {

    .team-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .principles-container {
        width: 240px;
    }
}

/*SERVICE PAGE*/

.cta-container-center-aligned {
    border-radius: 40px;
    padding: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    min-height: 370px;
    height: fit-content;
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
}

    .cta-container-center-aligned .cta-title, .cta-container-center-aligned .cta-btn-container {
        width: 50%;
        max-width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

/*    SERVICE details PAGE*/

.details-page-hero-container {
    width: auto;
    margin-left: 0px;
    margin-right: 0px;
}

    .details-page-hero-container h1 {
        font-weight: 600;
    }

    .details-page-hero-container .hero-block {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        margin-bottom: 20px;
    }

    .details-page-hero-container .hero-image-container {
        flex: 1;
    }

    .details-page-hero-container .small-title {
        text-align: center;
    }

    .details-page-hero-container .hero-content-container {
        flex: 2;
    }

.cloud-service-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

    .cloud-service-container .full-width-card-container .carousel-card:nth-child(even) {
        border-radius: 40px 40px 40px 144px;
    }

.full-width-card {
    border-radius: 40px 144px 40px 40px;
    border: 1px solid #222;
    background: var(--secondary-black);
    max-height: 640px;
    display: flex;
    align-items: center;
    gap: 60px;
    overflow: hidden;
    padding: 20px;
}

.full-width-card-container {
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
}

.full-width-card:nth-child(2) {
    border-radius: 40px 40px 40px 144px;
}

    .full-width-card:nth-child(2) img {
        border-radius: 40px 40px 40px 144px;
    }

.full-width-card img {
    max-width: 600px;
    max-height: 600px;
    border-radius: 40px 144px 40px 40px;
}

.full-width-card h2 {
    color: var(--primary-orange);
    font-size: 1.5rem; /* 24px */
    font-weight: 500;
    line-height: 38px; /* 158.333% */
}

.full-width-card .four-image-content {
    max-width: 360px;
}

/*CONTACT US*/
.error-message {
    color: #CE2121;
    font-size: 0.9em;
    margin-bottom: 24px;
    margin-top: -20px;
}

.contact-form-container {
    margin-top: 100px;
    display: flex;
    gap: var(--padding-xxl);
}

.contact-form, .contact-info {
    width: 50%;
}

.contact-form {
    padding: 32px;
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: 40px;
    display: flex;
    flex-direction: column;
}

    .contact-form form input, .contact-form form textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 1rem;
        font-style: normal;
        font-weight: 400;
        line-height: 1.125rem;
    }

        .contact-form form input:focus, .contact-form form textarea:focus {
            border: 1px solid var(--primary-teal);
            outline: none;
        }

    .contact-form form textarea {
        min-height: 238px;
        color: #AAA;
        border-radius: var(--radius-medium);
    }

.contact-info .title-content-block p {
    padding-top: 24px;
}

.contact-info-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-cards {
    display: flex;
    padding: 20px;
    padding-left: 0;
    gap: var(--padding-s);
}

    .contact-cards h5 {
        color: var(--primary-teal);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        line-height: 1.1375rem;
    }

.contact-cards {
    color: #FFF;
    font-size: 20px;
    line-height: 130%; /* 26px */
}

    .contact-cards .core-values-cards-title {
        gap: var(--padding-s);
    }

.contact-us-rte p {
    font-size: 20px;
    line-height: 130%; /* 26px */
}

.form-submit-confirmation {
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    gap: var(--padding-l);
    justify-content: center;
    border-radius: var(--radius-large);
    border: 1px solid var(--primary-teal);
    background: var(--primary-teal-opacity);
    padding: 60px 120px;
    height: 320px;
    width: 50%;
}

    .form-submit-confirmation .form-submit-icon-container {
        align-self: center;
    }

    .form-submit-confirmation .form-submit-title {
        display: flex;
        flex-direction: column;
        gap: 4px;
        text-align: center;
        color: var(--primary-teal);
    }

        .form-submit-confirmation .form-submit-title p {
            font-size: 1.125rem;
            line-height: 1.875rem;
        }

.form-submit-confirmation-container {
    display: flex;
    justify-content: center;
}

/*QUOTATION*/
.quotation-form {
    padding: 32px;
    background: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-large);
    max-width: 610px;
    width: 100%;
    align-self: center;
}

.quotation-title-container {
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
    text-align: center;
}

.quote-question-container {
    display: flex;
    flex-direction: column;
    gap: var(--padding-s);
    margin-top: 32px;
    margin-bottom: 60px;
}

.quote-question-container-small {
    display: flex;
    flex-direction: column;
    gap: var(--padding-s);
    margin-top: 32px;
    margin-bottom: var(--padding-l);
}

    .quote-question-container-small label {
        font-size: 1.5rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.95rem;
    }

.quotation-container {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xl);
}

.quotation-question-block {
    display: flex;
    flex-direction: column;
}

    .quotation-question-block .error-message {
        margin-bottom: 0px;
        margin-top: 12px;
    }

    .quotation-question-block input {
        margin-top: var(--padding-l);
        margin-bottom: 0px;
    }

.input-row {
    display: flex;
    width: 100%;
    gap: var(--padding-s);
}

.input-row-column {
    display: flex;
    justify-content: space-between;
    gap: var(--padding-s);
    width: 100%;
}

    .input-row-column .input-column {
        flex: 1;
    }

        .input-row-column .input-column input {
            width: 100%;
            box-sizing: border-box;
        }

            .input-row-column .input-column input:focus {
                border: 1px solid var(--primary-teal);
                outline: none;
            }

.timeline-currency {
    width: 100%;
}

    .timeline-currency input {
        width: 100%;
        box-sizing: border-box;
    }

.input-row textarea, .input-row input {
    width: 100%;
    margin: 0px;
    -webkit-appearance: none;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.125rem;
}

.input-row textarea {
    height: 120px;
    max-height: 120px;
    border-radius: var(--radius-large);
}

    .input-row textarea:focus, .input-row input:focus {
        border: 1px solid var(--primary-teal);
        outline: none;
    }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

input[type="radio"] {
    display: none;
}

    input[type="radio"] + label {
        display: inline-block;
        width: 28px;
        height: 28px;
        border: 1px solid #373737;
        border-radius: 50%;
        background-color: transparent;
        cursor: pointer;
        transition: 0.3s;
        position: relative;
    }

        input[type="radio"] + label:hover {
            border-color: var(--primary-orange);
        }

    input[type="radio"]:checked + label {
        background-color: var(--primary-orange);
        border-color: var(--primary-orange);
    }

.quotation-question-title label {
    margin-right: 10px;
}

.quotation-question-title {
    display: flex;
    align-items: center;
}

    .quotation-question-title label {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.125rem;
    }

    .quotation-question-title p {
        padding-top: var(--padding-s);
    }

.quotation-question-title-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: var(--padding-l);
    border-radius: 32px;
    background-color: var(--primary-black);
}

    .quotation-question-title-grid label, .quotation-question-title-grid h6 {
        margin-bottom: 0px;
        margin-left: auto;
        margin-right: auto;
        line-height: normal;
    }

        .quotation-question-title-grid label:nth-child(1) {
            margin: 0px;
        }

.quotation-next-btn {
    width: 100%;
    margin-top: 120px;
    margin-bottom: 16px;
}

.quotation-navigation-list {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 100%;
    height: auto;
    justify-content: center;
}

    .quotation-navigation-list span {
        width: 20px;
        height: 8px;
        border-radius: var(--radius-large);
        background: var(--primary-white);
        transition: background 0.3s ease;
    }

    .quotation-navigation-list button.active {
        width: 30px;
        background: var(--primary-orange);
    }

    .quotation-navigation-list span.completed {
        background: var(--primary-orange);
        opacity: 0.7;
    }

    .quotation-navigation-list a {
        display: inline-block;
        width: 20px;
        height: 8px;
        background-color: #222222;
        text-align: center;
        line-height: 40px;
        border-radius: var(--radius-full);
    }

        .quotation-navigation-list a.active {
            background-color: var(--primary-white);
            width: 30px;
        }

/*job listing styling*/
.search-container {
    margin-bottom: var(--padding-xxl);
    max-width: 500px;
    width: 100%;
    padding: 0.5rem 0.5rem 0.5rem 1.875rem;
    align-items: center;
    background-color: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-full);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-self: center;
}

    .search-container input[type="text"], .search-container input[type="email"] {
        font-size: 1rem;
        width: 70%;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
        background: transparent;
        border: none;
        color: var(--primary-white);
        padding: 0px;
        margin: 0px;
    }

    .search-container button {
        display: flex;
        padding: 0.75rem 1.875rem 0.625rem 1.875rem;
        justify-content: flex-end;
        align-items: center;
        color: var(--primary-white);
        gap: 0.5rem;
        border-radius: 1.875rem;
        background: #008080;
        border: 1px solid transparent;
        cursor: pointer;
    }

.suggestions {
    display: none;
    position: absolute;
    top: 120%;
    left: 0;
    max-height: 150px;
    width: inherit;
    overflow-y: auto;
    z-index: 10;
    flex-direction: column;
    background: var(--primary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: var(--radius-medium);
}


.suggestion-item {
    font-family: Gilroy;
    margin: 8px;
    padding: 8px 22px;
    cursor: pointer;
    color: var(--primary-white);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.125rem;
    background: var(--secondary-black);
    border: 1px solid var(--tertiary-black);
    border-radius: 24px;
    transition: 0.3s;
}

    .suggestion-item:hover {
        background-color: var(--primary-teal);
    }

.job-listing-cta .cta-image-block {
    max-width: 100%;
}

    .job-listing-cta .cta-image-block .cta-content-container {
        padding-left: var(--padding-xl);
    }

    .job-listing-cta .cta-image-block .cta-image-container {
        height: 100%;
        min-width: 50%
    }

        .job-listing-cta .cta-image-block .cta-image-container img {
            width: 100%;
            height: 100%;
        }

    .job-listing-cta .cta-image-block .cta-content-container .cta-btn-container {
        padding-top: var(--padding-xl);
    }

@media (max-width: 1024px) {
    .job-listing-cta .cta-image-block .cta-content-container .cta-btn-container {
        flex-direction: column;
    }
}

@media (max-width: 762px) {

    .input-row-reverse {
        flex-direction: column;
    }

        .input-row-reverse input {
            width: 100%;
        }

    .quote-dropdown-options {
        min-width: 230px;
        max-width: none;
        height: 230px;
    }

    .cloud-service-container .full-width-card-container .carousel-card:nth-child(even) {
        border-radius: var(--radius-large);
    }

    .quotation-form {
        max-width: auto;
        width: auto;
    }

    .full-width-card-container {
        gap: var(--padding-xl);
    }

    .contact-form-container {
        flex-direction: column-reverse;
    }

    .contact-form, .contact-info {
        width: inherit;
    }

    .job-listing-cta {
        height: fit-content;
    }

        .job-listing-cta .cta-image-block {
            flex-direction: column-reverse;
            border: none;
            background: none;
            text-align: center;
            gap: 24px;
        }

            .job-listing-cta .cta-image-block .cta-content-container {
                padding: 0px;
            }

            .job-listing-cta .cta-image-block .cta-content-containe .cta-title {
                gap: var(--padding-xl);
            }

            .job-listing-cta .cta-image-block .cta-content-container .cta-btn-container {
                align-items: center;
            }

    .cta-title-02, .cta-title {
        max-width: 100%;
    }

    .cta-btn-container {
        flex-direction: column;
        align-items: center;
    }

        .cta-btn-container a {
            width: 100%;
            max-width: 260px;
            text-align: center;
        }

    .cta-container-center-aligned {
        flex-direction: column;
        justify-content: center;
    }

        .cta-container-center-aligned .cta-title {
            margin-bottom: var(--padding-l);
        }

        .cta-container-center-aligned .cta-title, .cta-container-center-aligned .cta-btn-container {
            width: 100%;
            max-width: 100%;
            text-align: center;
        }

            .cta-container-center-aligned .cta-btn-container button {
                width: 240px
            }

        .cta-container-center-aligned .cta-btn-container {
            flex-direction: column;
        }

    .job-listing-cta .cta-image-block {
        flex-direction: column-reverse;
    }

        .job-listing-cta .cta-image-block .cta-image-container img {
            border-radius: 24px;
        }

    .form-submit-confirmation {
        padding: 60px 40px;
        width: auto;
    }

    .quote-question-container-small label {
        font-size: 1.125rem;
    }
}

/*    form styling*/
input {
    border-radius: 1000px;
    border: 1px solid #222;
    background: #0F0F0F;
    color: #AAA;
    padding: 12px 30px 10px 30px;
    margin-top: 12px;
    margin-bottom: 24px;
}

label {
    font-size: 24px;
    line-height: 18px; /* 75% */
    margin-bottom: 12px;
    font-weight: 600;
}

input[type=submit] {
    border-radius: 30px;
    background: var(--primary-teal);
    color: #FFF;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    transition: 0.3s;
    cursor: pointer;
}

    input[type=submit]:hover {
        background: var(--primary-teal-opacity);
        border: 1px solid var(--primary-teal);
    }

    input[type=submit]:focus {
        background: transparent;
        border: 1px solid var(--primary-teal);
    }

textarea {
    border-radius: 1000px;
    border: 1px solid #222;
    background: #0F0F0F;
    color: #AAA;
    padding: 12px 30px 10px 30px;
    margin-top: 12px;
    margin-bottom: 24px;
}

    textarea::placeholder, input::value {
        color: #AAA;
        font-family: Gilroy;
        font-size: 16px;
    }

/*    portfolio page*/
.journey-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 100px;
    align-self: stretch;
}

.journey-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    align-self: stretch;
    text-align: center;
}

.journey-cards-title {
    max-width: 800px;
    padding: var(--padding-xl)
}

    .journey-cards-title h5 {
        padding-bottom: 24px;
    }

    .journey-cards-title p {
        padding-top: 24px;
    }

.journey-container img {
    height: 670px;
    object-fit: cover;
    width: 100%;
    border-radius: var(--radius-large);
}

.center {
    display: inline-flex;
    padding: 40px 0px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
}

    .center .small-title {
        padding-bottom: 0;
    }

    .center h2 {
        text-align: center;
    }

.share-icons h4 {
    color: #2F2F2F;
    text-align: center;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 22px; /* 137.5% */
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.social-icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    align-self: stretch;
    margin-bottom: 16px;
}

    .social-icons img {
        width: 32px;
        height: 32px;
    }

.project-info-card-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--padding-l);
    padding-bottom: 80px;
}

    .project-info-card-container .project-info-card {
        text-align: left;
        width: auto;
        display: flex;
        padding: 20px;
        align-items: center;
        gap: 12px;
        flex: 1 0 0;
        flex-direction: row;
    }

        .project-info-card-container .project-info-card .core-values-cards-title:nth-child(2) {
            height: 56px;
            gap: initial;
        }

        .project-info-card-container .project-info-card .core-values-cards-title p {
            font-size: 0.875rem;
            font-style: normal;
            font-weight: 600;
            line-height: 1.1375rem;
            text-transform: uppercase;
            color: var(--primary-teal);
        }

.project-details-hero-image {
    width: 100%;
}

    .project-details-hero-image img {
        width: 100%;
        height: 670px;
        overflow: hidden;
        object-fit: cover;
        border-radius: var(--radius-large);
        margin-bottom: 80px;
    }

.project-info-card img {
    margin: 0;
}

.core-values-container {
    margin-top: 80px;
}

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.image-display {
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

    .image-display .title-content-block {
        min-width: 362px;
        margin-bottom: 0px;
        align-self: center;
    }

        .image-display .title-content-block h2 {
            width: auto;
        }

.image-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
}

.card-image-container {
    box-sizing: border-box;
    flex: 1 1 calc(33.33% - 20px);
    max-width: calc(33.33% - 20px);
    min-width: 180px;
    min-height: 200px;
    max-height: 240px;
}

    .card-image-container a img {
        height: 100%;
        width: 100%;
    }

.image-cards img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

    .image-cards img:nth-child(1) {
        border-radius: 20px 20px 20px 144px
    }

    .image-cards img:nth-child(2) {
        border-radius: 20px 144px 20px 144px
    }

    .image-cards img:nth-child(3) {
        border-radius: 20px 144px 20px 20px
    }

.press-kit-image {
    align-self: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

    .press-kit-image img {
        height: auto;
    }

.press-kit-carousel-card .carousel-card .carousel-card-img {
    width: auto;
    height: auto;
}

    .press-kit-carousel-card .carousel-card .carousel-card-img img {
        max-width: 743px;
    }

.press-kit-carousel-card .carousel-card:nth-child(2n) {
    flex-direction: row-reverse;
    justify-content: space-between;
    border-radius: 40px 40px 40px 144px;
}

    .press-kit-carousel-card .carousel-card:nth-child(2n) img {
        border-radius: 40px 40px 40px 144px;
    }

.press-banner-image img {
    height: 1017px;
    flex-shrink: 0;
}

.press-buttons {
    width: 100%;
    border-top: 1px solid #222;
    border-bottom: 1px solid #222;
    padding: 24px 0;
}

.press-team-memebers p {
    text-align: left;
    padding-bottom: 24px;
}

.press-memebers {
    display: flex;
    gap: 56px;
    margin-top: 24px;
}

.press-post .content, .press-post .content .small-title {
    text-align: center;
}

.press-post-content {
    border-radius: 12px;
    border: 1px solid #222;
    background: #111;
    display: flex;
    padding: 48px;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0px var(--padding-xl);
    text-align: left;
}

.press-post .content {
    border-radius: 144px;
    background: #0F0F0F;
    padding: 40px;
    width: calc(100% - 280px);
    min-width: 300px;
    max-height: 200px;
    z-index: 1;
    margin: 0 140px;
}

.press-post-content .small-title, .press-post-content h1 {
    padding-bottom: 15px;
}

.press-post .hero-image-container {
    margin-top: -180px;
}

.press-post-body p {
    color: #AAA;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.875rem;
    text-align: left;
}

.press-post-body h3 {
    color: #AAA;
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.875rem;
}

.press-post-body figure {
    margin: 0px;
}

.press-post-body img {
    height: 420px;
    width: 100%;
    object-fit: cover;
}

.press-kit-btn-container {
    display: flex;
    justify-content: center;
    padding-top: var(--padding-xxl);
}

.four-image-content-alt h3 {
    color: var(--primary-orange);
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 2.375rem;
}

.four-image-content-alt p {
    font-size: 0.875rem;
    line-height: 1.1375rem;
    padding-top: var(--padding-s);
}

.press-post-container {
    display: flex;
    flex-direction: column;
    gap: 200px;
}

    .press-post-container .general-hero-container {
        margin-left: 0px;
        margin-right: 0px;
    }

@media (max-width: 1024px) {
    .card-image-container {
        max-width: 50%;
    }

    .project-info-card-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .press-kit-image img {
        width: 100%;
    }

    .image-display .image-cards {
        width: 700px;
    }
}

@media (max-width: 762px) {
    .full-width-card {
        flex-direction: column;
        max-height: fit-content;
        gap: var(--padding-xl);
        padding: 10px;
        align-items: flex-start;
    }

    .four-card-img {
        width: 100%;
    }

    .full-width-card img {
        max-width: inherit;
    }

    .press-kit-carousel-card .carousel-card:nth-child(even), .press-kit-carousel-card .carousel-card:nth-child(even) .carousel-card-img img {
        flex-direction: column;
        border-radius: 24px;
    }

    .press-kit-carousel-card .carousel-card:nth-child(odd), .press-kit-carousel-card .carousel-card:nth-child(odd) .carousel-card-img img {
        flex-direction: column;
        border-radius: 24px;
    }

    .full-width-card:nth-child(2) {
        border-radius: 144px 40px 40px 40px;
    }

    .full-width-card .four-image-content {
        max-width: fit-content;
    }

    .four-image-content h2 {
        padding-top: var(--padding-s);
    }

    .four-image-content p {
        padding-top: var(--padding-s);
    }

    .full-width-card:nth-child(2) img {
        border-radius: 144px 40px 40px 40px;
    }

    .image-display {
        flex-direction: column;
    }

        .image-display .image-cards {
            width: 100%;
        }

    .journey-cards {
        gap: var(--padding-xl);
    }

    .journey-cards-title {
        padding: var(--padding-l);
    }

        .journey-cards-title h5 {
            padding-bottom: var(--padding-s);
        }

    .journey-container img {
        height: 514px;
    }

    .project-info-card-container {
        grid-template-columns: repeat(1, 1fr);
    }

    .press-post .cta-btn-container, .press-kit-btn-container {
        width: 100%;
    }

        .press-post .cta-btn-container a, .press-kit-btn-container a {
            width: calc(100% - 70px);
        }
}

@media (max-width: 480px) {

    .image-cards {
        flex-direction: column;
    }

    .card-image-container {
        min-width: 100%;
    }

    .press-post-content {
        padding: 48px var(--padding-l);
        margin: 0px 25px;
    }

    .press-kit-btn-container {
        flex-direction: column;
        width: 100%;
    }

    .press-post .cta-btn-container {
        flex-direction: column;
        width: 100%;
    }

    .press-memebers {
        flex-direction: column;
    }

    .cta-container, .cta-container .cta-block {
        height: fit-content;
        padding: 60px 0px;
    }

    .cta-btn-container a {
        width: calc(100% - 70px)
    }
}

/*BLOG*/
.team-related-blog-card {
    padding: 20px;
    border: 1px solid var(--tertiary-black);
    background: var(--secondary-black);
    border-radius: 24px 144px 24px 24px;
    display: flex;
    flex-direction: column;
}

    .team-related-blog-card .team-card-image {
        border-radius: 24px 144px 24px 24px;
        height: 100%;
    }

        .team-related-blog-card .team-card-image img {
            border-radius: 24px 144px 24px 24px;
            height: 100%;
        }

    .team-related-blog-card .team-card-text h4 {
        padding-top: var(--padding-s)
    }

.filter-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 100px;
}

    .filter-section hr {
        margin: 0px;
    }

    .filter-section .filter-select, .filter-section input {
        padding: 12px 25px 12px 10px;
        border: 1px solid var(--primary-teal);
        border-radius: var(--radius-large);
        background: transparent;
        color: var(--primary-white);
        font-family: Gilroy-SemiBold;
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 600;
        line-height: 1.75rem;
        max-height: 50px;
        margin: 0px;
    }

        .filter-section .filter-select option {
            color: var(--primary-white);
            background-color: var(--primary-black);
            border: 1px solid var(--primary-teal);
        }

            .filter-section .filter-select option:hover {
                background-color: var(--primary-teal);
            }

.filter-categories {
    display: flex;
    gap: var(--padding-m);
}

.active-filters {
    display: flex;
    gap: var(--padding-m);
}

.filter-chip {
    display: flex;
    gap: 10px;
    padding: 0px var(--padding-s);
    width: fit-content;
    align-items: center;
    background-color: var(--primary-teal);
    border-radius: var(--radius-large);
    color: var(--primary-white);
    text-align: left;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.75rem;
    height: 37px;
}

    .filter-chip a {
        padding: 2px 7px;
        border-radius: var(--radius-full);
        background-color: var(--primary-white);
        color: var(--primary-teal);
        font-size: 0.875rem;
        line-height: normal;
        align-self: center;
    }


.blog-page-card-container .carousel-card {
    border-radius: var(--radius-large);
}

.reverse-card-container .carousel-card:nth-child(even) {
    flex-direction: row-reverse;
    justify-content: space-between;
    border-radius: var(--radius-large);
}

.blog-post-page-heading-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: left;
    margin-top: 100px;
}

.blog-inner-page-content {
    display: flex;
    flex-direction: row;
    gap: 50px;
}

    .blog-inner-page-content .blog-social-icons a, .blog-inner-page-content .likes-views img {
        display: flex;
        flex-direction: column;
        width: 32px;
        height: 32px;
        padding-bottom: 12px;
        filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(3776%) hue-rotate(346deg) brightness(97%) contrast(105%);
    }

.likes-views {
    display: flex;
    flex-direction: column;
    width: 32px;
    gap: 32px;
}

    .likes-views .likes-views-item {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

        .likes-views .likes-views-item img {
            width: 24px;
            height: 24px;
            padding: 0px;
            gap: 8px;
        }

.blog-inner-page-block {
    display: flex;
    flex-direction: column;
    gap: var(--padding-xl);
    width: 100%;
}

    .blog-inner-page-block img {
        width: 100%;
        height: 418px;
        object-fit: cover;
        border-radius: 25px;
    }

.blog-inner-page-block-content {
    display: flex;
    flex-direction: column;
    gap: var(--padding-l);
}

    .blog-inner-page-block-content p, .blog-post-page-heading-container .intro-paragraph {
        color: #AAA;
        font-size: 1.125rem;
        line-height: 1.8rem;
    }

.author-details {
    color: var(--primary-teal);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.375rem;
    letter-spacing: 0.0875rem;
    text-transform: uppercase;
}

.blog-inner-page-block-content h5, .blog-inner-page-block-content h4 {
    color: var(--primary-white);
    padding-top: var(--padding-xl);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
}

.blog-inner-page-block-content img {
    margin: 24px 0px;
}

.blog-cta-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--padding-xl);
}

    .blog-cta-container .search-container {
        margin: 0px;
        max-width: 430px;
    }

.subscribe-form input:focus {
    border: 1px solid var(--primary-teal);
    outline: none;
}

@media (max-width: 1024px) {
    .blog-cta-container {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 762px) {
    .reverse-card-container .carousel-card:nth-child(even) {
        flex-direction: column;
    }

    .blog-inner-page-content {
        gap: var(--padding-s);
    }

    .blog-inner-page-block img {
        height: 260px;
    }

    .filter-section {
        margin-bottom: 50px;
    }

    .filter-categories {
        flex-direction: column;
    }
}

@media (max-width: 762px) {
    .team-related-blog-card .team-card-image {
        max-height: 300px
    }

        .team-related-blog-card .team-card-image img {
            max-height: 300px
        }
}

/**umb_name:orange heading*/
.orange-heading {
    color: var(--primary-orange);
}

/**umb_name:Teal Heading*/
.teal-heading {
    color: var(--primary-teal);
}

.grey-text {
    color: #AAA;
}

.hidden {
    display: none;
}