.what-we-do-page .hero {
    position: relative;
}
.what-we-do-page .hero-container {
    min-height: calc(60vh);
    display: flex;
    align-items: center;
    justify-content: center;
}
.what-we-do-page .hero-bg {
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 1rem;
}
.what-we-do-page .hero-overlay {
    top: 0;
    left: 0;
    background: linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.9),
        rgba(0, 0, 0, 0.7),
        transparent
    );
    z-index: 2;
    border-radius: 1rem;
}
.what-we-do-page .hero-content {
    z-index: 3;
}
.what-we-do-page .solution-btn {
    background-color: var(--restro-green);
    color: white;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 8px;
}
.what-we-do-page .solution-btn:hover {
    color: white;
    background-color: var(--restro-green);
}
.what-we-do-page .card {
    border-radius: 1rem;
}

.what-we-do-page .cta-container {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
}
.what-we-do-page .cta-bg-img,
.what-we-do-page .cta-bg-img-overlay {
    border-radius: 1rem;
}

/* What we do page end */

/* Tech At Quickly Page Start */
.tech-at-quickly-page .hero {
    position: relative;
}
.tech-at-quickly-page .hero-container {
    min-height: calc(60vh);
    display: flex;
    align-items: center;
}
.tech-at-quickly-page .hero-bg {
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 1rem;
}

.tech-at-quickly-page .hero-overlay {
    top: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.4),
        transparent
    );
    z-index: 2;
    border-radius: 1rem;
}

.tech-at-quickly-page .hero-content {
    z-index: 3;
}
.tech-at-quickly-page .badge {
    background-color: transparent !important;
    border: 1px solid black;
    color: black !important;
}

/* Tech At Quickly Page End */

/* Tech Partner Page Start */
.tech-partner-page .hero {
    position: relative;
}
.tech-partner-page .hero-container {
    /* min-height: calc(60vh); */
    aspect-ratio: 16/6;
    display: flex;
    align-items: center;
}
.tech-partner-page .hero-bg {
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 1rem;
}

.tech-partner-page .hero-overlay {
    top: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.6),
        rgba(0, 0, 0, 0.4),
        transparent
    );
    z-index: 2;
    border-radius: 1rem;
}

.tech-partner-page .hero-content {
    z-index: 3;
}
.tech-partner-page .hero-content .badge {
    background-color: white !important;
    color: black;
    border-radius: 50px;
}
.tech-partner-page .card:has(.infrastructure-icon-wrapper) {
    background-color: #f1f5f9;
    border-width: 2px;
}
/* .tech-partner-page .card:has(.infrastructure-icon-wrapper):hover {
    border: 2px solid #000000;
} */
.tech-partner-page .infrastructure-icon-wrapper {
    background-color: #fafffd;
    color: #000000;
    width: 64px;
    height: 64px;
}

.tech-partner-page .partner-card {
    position: relative;
    overflow: hidden;
    border: 2px solid #dee2e6;
    transition: all 0.3s ease;
}
/* .partner-card:hover {
    box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,.15);
    border-color: #000000;
  } */
.partner-card .card-bg {
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-size: cover;
    background-position: center;
}

.badge-outline-primary {
    border: 1px solid #fff;
    color: #fff;
    background: transparent;
    font-size: 0.8rem;
}

.partner-icon-wrapper img {
    /* background-color: #000000; */
    width: auto;
    height: 40px;
}
.partner-card .badge-secondary {
    background-color: transparent;
    border: 1px solid white;
    color: white;
    padding: 10px;
    border-radius: 50px;
}

.benefit-icon-wrapper {
    background-color: #000000;
    width: 64px;
    height: 64px;
}
.tech-partner-page .card {
    border-radius: 1rem;
}

.tech-partner-page .cta-container {
    min-height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    /* overflow: hidden; */
}
.tech-partner-page .cta-button {
    color: #000000;
}
/* Tech Partner Page End */

@media screen and (max-width: 576px) {
    .partner-icon-wrapper {
        width: 42px;
        height: 42px;
    }
    .benefit-icon-wrapper {
        width: 42px;
        height: 42px;
    }
    .tech-partner-page .infrastructure-icon-wrapper {
        width: 42px;
        height: 42px;
    }
}

/* Become a partner */
.glass-card {
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(6px);
    /* border: 2px solid rgba(255, 255, 255, 0.3); */
    position: relative;
    overflow: hidden;
}
.hero-card {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 90%;
}
.grid-pattern {
    background-image: linear-gradient(
            oklch(97.015% 0.00011 271.152) 0.7px,
            transparent 0.7px
        ),
        linear-gradient(
            90deg,
            oklch(97.015% 0.00011 271.152) 0.7px,
            transparent 0.7px
        );
    background-size: 100px 100px;
}

.product-suite-card {
    transition: 0.3s all ease-in-out;
}
.product-suite-card a {
    color: #000;
}
.link-arrow {
    opacity: 0;
}
.product-suite-card:hover .link-arrow {
    opacity: 1;
}
.product-suite-card:last-child:hover .link-arrow {
    opacity: 0;
}
.product-suite-card:hover {
    scale: 1.05;
}
.product-suite-card:hover a {
    color: #444444;
}
.become-a-partner-page .product-logo {
    height: 45px;
}

.training-badge {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 10px;
}

.partner-colab-card-parent {
    height: 300px;
}

.partner-colab-card {
    height: 100%;
}

.partner-colab-card-img-wrapper {
    z-index: 0;
    width: 100%;
    height: 100%;
}
.partner-colab-card-img-wrapper img {
    transition: 0.3s all ease-in-out;
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.partner-colab-card:hover .partner-colab-card-img-wrapper img {
    scale: 1.05;
}
.partner-colab-card-img-overlay {
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
    top: 0;
}

.partner-colab-card-content {
    z-index: 2;
    top: 0;
}
.partner-chip {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0.3rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    border: 1.5px solid #fff;
    background-color: transparent;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    pointer-events: cursor;
}
.partner-chip:hover {
    background-color: white;
    color: #000;
}
.partner-chip a {
    color: white;
}
.partner-chip:hover a {
    color: black;
}

@media screen and (max-width: 576px) {
    .become-a-partner-hero-img-wrapper {
        height: 300px;
    }
    .hero-card {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
}

@media screen and (min-width: 577px) and (max-width: 768px) {
    .hero-card {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        width: 90%;
    }
}

@keyframes animateBg {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.north-star .hero-section {
    /* min-height: 100vh; */
    position: relative;
    background: #111;
    color: #fff;
    z-index: 0;
}

.north-star .hero-section .animated-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -1;
}

@keyframes animateBg {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.north-star .hero-section .animated-bg span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
        0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
    animation: animate 3s linear infinite;
}
.north-star .hero-section .animated-bg span:nth-child(5) {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--accent-primary) !important;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
        0 0 0 8px rgba(255, 255, 255, 0.1), 0 0 20px rgba(255, 255, 255, 0.1);
    animation: animate 3s linear infinite;
}
.north-star .hero-section .animated-bg span::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, #fff, transparent);
}
.north-star .hero-section .animated-bg span:nth-child(5)::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 1px;
    background: linear-gradient(90deg, var(--accent-primary), transparent);
}
@media screen and (max-width: 768px) {
    .north-star .hero-section .animated-bg span:nth-child(4) {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background: var(--accent-primary) !important;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
            0 0 0 8px rgba(255, 255, 255, 0.1),
            0 0 20px rgba(255, 255, 255, 0.1);
        animation: animate 3s linear infinite;
    }
    .north-star .hero-section .animated-bg span:nth-child(4)::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        height: 1px;
        background: linear-gradient(90deg, var(--accent-primary), transparent);
    }

    .north-star .hero-section .animated-bg span:nth-child(5) {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 4px;
        background: #fff !important;
        border-radius: 50%;
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1),
            0 0 0 8px rgba(255, 255, 255, 0.1),
            0 0 20px rgba(255, 255, 255, 0.1);
        animation: animate 3s linear infinite;
    }
    .north-star .hero-section .animated-bg span:nth-child(5)::before {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 300px;
        height: 1px;
        background: linear-gradient(90deg, #fff, transparent);
    }
}
@keyframes animate {
    0% {
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }
    70% {
        opacity: 1;
    }
    100% {
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
}
.north-star .hero-section .animated-bg span:nth-child(1) {
    top: 0;
    right: 0;
    left: initial;
    animation-delay: -1s;
    animation-duration: 1s;
}
.north-star .hero-section .animated-bg span:nth-child(2) {
    top: 0;
    right: 80px;
    left: initial;
    animation-delay: -2s;
    animation-duration: 3s;
}
.north-star .hero-section .animated-bg span:nth-child(3) {
    top: 80px;
    right: 0px;
    left: initial;
    animation-delay: -3s;
    animation-duration: 2s;
}
.north-star .hero-section .animated-bg span:nth-child(4) {
    top: 0;
    right: 180px;
    left: initial;
    animation-delay: -0.6s;
    animation-duration: 1.5s;
}
.north-star .hero-section .animated-bg span:nth-child(5) {
    top: 0;
    right: 400px;
    left: initial;
    animation-delay: -0.8s;
    animation-duration: 2.5s;
}
.north-star .hero-section .animated-bg span:nth-child(6) {
    top: 0;
    right: 600px;
    left: initial;
    animation-delay: -1s;
    animation-duration: 3s;
}
.north-star .hero-section .animated-bg span:nth-child(7) {
    top: 300px;
    right: 0px;
    left: initial;
    animation-delay: -1.2s;
    animation-duration: 1.75s;
}
.north-star .hero-section .animated-bg span:nth-child(8) {
    top: 0px;
    right: 700px;
    left: initial;
    animation-delay: -1.4s;
    animation-duration: 1.25s;
}
.north-star .hero-section .animated-bg span:nth-child(9) {
    top: 0px;
    right: 1000px;
    left: initial;
    animation-delay: -2.75s;
    animation-duration: 2.25s;
}
.north-star .hero-section .animated-bg span:nth-child(10) {
    top: 0px;
    right: 450px;
    left: initial;
    animation-delay: -3s;
    animation-duration: 2.75s;
}

@media screen and (max-width: 768px) {
    .modern-img-wrapper {
        height: 400px !important;
    }
}
.split-page {
    display: flex;
    height: 100vh;
    width: 100%;
    position: relative;
}

/* Background images layer */
.bg-images {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 0;
}
.bg-left,
.bg-right {
    flex: 1;
    background-size: cover;
    background-position: center;
}
.bg-left {
    background-image: url("public/images/about-landing.jpg"); /* replace */
}
.bg-right {
    background-image: url("public/images/about-landing2.jpg"); /* replace */
}

/* Color halves that hide the images */
.color-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
    background: transparent;
    -webkit-clip-path: circle(0px at center);
    clip-path: circle(0px at center);
    transition: clip-path 0.15s ease-out;
}
.mask-left,
.mask-right {
    flex: 1;
}
.mask-left {
    background: black;
}
.mask-right {
    background: white;
}

/* Text links above everything */
.half-links {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.half-links a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 2.5rem;
    font-weight: bold;
}
.half-links a:first-child {
    color: white;
}
.half-links a:last-child {
    color: black;
}

.spotlight-section {
    min-height: calc(100vh - 70px);
}

.success-wrapper {
    height: calc(100vh - 70px);
}

.spotlight-container {
    position: relative;
    width: 50%;
    overflow: hidden;
}

@media screen and (max-width: 992px) {
    .spotlight-container {
        width: 100%;
    }
}
@keyframes titleZoomIn {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
.spotlight-container .background-image {
    width: 105%;
    height: 105%;
    top: -2.5%;
    left: -2.5%;
    position: absolute;
    transition: transform 0.5s ease-in-out;
    transform: scale(1);
    overflow: hidden;
}

.spotlight-container:hover .background-image {
    transform: scale(1.05);
}

.spotlight-container .title {
    display: block;
    transform: scale(0.5);
    opacity: 0;

    animation: titleZoomIn 0.7s ease-out forwards;
}

.spotlight-container:hover .content-link .fa-long-arrow-alt-left {
    transform: translateX(-20px);
    transition: all 0.3s ease-in-out;
}
.spotlight-container:hover .content-link .fa-long-arrow-alt-right {
    transform: translateX(20px);
    transition: all 0.3s ease-in-out;
}
.background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.content-link {
    position: relative;
    z-index: 20;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.spotlight-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.overlay-primary {
    background-color: rgba(109, 109, 109, 0.7);
}

.overlay-black {
    background-color: rgba(0, 0, 0, 0.9);
}

.cursor {
    width: 40px;
    height: 40px;
    border: 3px solid white;
    border-radius: 50%;
    position: absolute;
    box-shadow: 2px -3px 41px -1px rgba(250, 250, 250, 0.64);
    transition: all 0.1s linear;
    pointer-events: none;
}
.title {
    color: #ffffff;
    /* font-size:50px; */
    letter-spacing: 10px;
    /* position: relative; */
    text-transform: uppercase;
    -webkit-text-stroke: 2px #ffffff;
    text-stroke: 2px #ffffff;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    color: transparent;
    transition: all 0.4s linear;
    /* opacity: 0.3; */
    user-select: none;

    &:hover {
        opacity: 1;
        -webkit-text-fill-color: white;
        text-fill-color: white;

        ~ .cursor {
            transform: scale(1.4);
            mix-blend-mode: difference;
            background: white;
        }
    }
}