html, body {
    background-color: #0b0b0b;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* Section Styles */
#banner {
    width: 100%;
}
#our-services{
    width: 100%;
}
#our-process {
    width: 100%;
}
#contact-us {
    width: 100%;
}
#core-values {
    width: 100%;
    background-color: #181818;
    overflow: hidden;
}
.cu-bg {
    width: 100%;
    background-image: url('../images/contact-section-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}
header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
    background-color: #000000bc;
    padding: 16px;
}
.header-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
/* Animation */
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rotating {
    -webkit-animation: rotating 200s linear infinite;
    -moz-animation: rotating 200s linear infinite;
    -ms-animation: rotating 200s linear infinite;
    -o-animation: rotating 200s linear infinite;
    animation: rotating 200s linear infinite;
    animation-timing-function: linear;
}
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(1.1);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}
.pulse {
    animation: pulse 1s infinite;
    animation-timing-function: linear;
}

/* Branding */
#brand-logo {
    object-fit: contain;
    cursor: pointer;
}

/* Components */
#menu-bar {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 24px;
}
#menu-bar li {
    list-style: none;   
}
#menu-bar li a {
    display: block;
    letter-spacing: .5px;
    text-decoration: none;
    color: #ffffff;
    font-weight: medium;
    margin: 16px 0;
    transition: all ease-in-out .3s;
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
}
#menu-bar li a:hover {
    border-bottom-color: #ffffff;
}
#btn-contact-us {
    background-color: #ff6600;
    color: #ffffff;
    font-weight: bold;
    letter-spacing: .6px;
    border: none;
    border-radius: 4px;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.5s;
}
#btn-contact-us:hover {
    background-color: #aa4400;
}
.section-header-text-v1 {
    width: fit-content;
    display: flex;
    align-items: center;
    margin: 0 auto;
}
#os-sshtv1 {
    /* background-color: rgb(0, 81, 255); */
    /* padding: 16px 0; */
}
#os-sshtv1-img {
    display: block;
    margin: 0 auto;
    object-fit: contain;
    width: 32px;
    height: 32px;
}
.section-header-text-v1 img {
    object-fit: contain;
}
.section-headline h1 {
    color: #ffffff;
    font-size: 24px;
    letter-spacing: .5px;
    font-weight: 600;
    text-align: center;
    margin: 0;
}
.section-headline p {
    color: #ffffff;
    font-size: 16px;
    letter-spacing: .5px;
    font-weight: 500;
    text-align: center;
    margin: 0;
}
.section-header-text-v1 p {
    color: #ffffff;
}
.section-sub-heading-text-v1 {
    color: #ffffff;
    text-align: center;
}
.quote {
    font-weight: bold !important;
}
#btn-view-contact-details {
    display: block;
    border: none;
    letter-spacing: .5px;
    border-radius: 6px;
    cursor: pointer;
    transition: all ease-in-out 0.3s;
}
#btn-view-contact-details:hover {
    background-color: #cdcdcd;
}
.btn-service-nav {
    background-color: transparent;
    border: none;
    color: #ffffff;
    display: flex;
    gap: 10px;
    align-items: center;
    letter-spacing: .6px;
    cursor: pointer;
}
.btn-service-nav img {
    transform: scaleY(-1);
    width: 20px;
    height: 20px;
    object-fit: contain;
}
#btn-messenger-holder {
    width: 100%;
    display: flex;
    justify-content: right;
}
#btn-messenger {
    margin-top: 16px;
    border: none;
    padding: 6px 14px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    letter-spacing: .2px;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
}
#btn-messenger:hover {
    background-color: #ffffff;
    border-bottom-color: #1877F2;
}
#btn-send-message {
    margin-top: 10px;
    padding: 16px;
    font-size: 14px;
    letter-spacing: .4px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all ease-in-out 0.2s;
    border-bottom: 3px solid transparent;
}
#btn-send-message:hover {
    background-color: #ffffff;
    border-bottom-color: #ff6600;
}
.dotted-hr {
    border: none; /* Removes the default solid line */
    border-top: 1px solid #ffffff; /* Adds a 3px dotted top border with a dark color */
    height: 0; /* Ensures the element has no height of its own, only the border is visible */
    width: 100%; /* Sets the width to 50% of its container */
    border-radius: 50px;
    margin: 50px 0;
}

/* Hero Styles */
#hero-section {
    display: block;
    padding-top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 527px;
    margin: 0 auto;
    position: relative;
}
#hero-background {
    position: absolute;
    object-fit: contain;
}
#heroes {
    display: flex;
    align-items: center;
    position: absolute;
}
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.h-icon {
    display: flex;
    align-items: center;
    gap: 10px;
}
.h-icon img {
    object-fit: contain;
}
.h-text {
    text-align: center;
    color: #ffffff;
    letter-spacing: .5px;
    font-size: 14px;
    font-weight: bold;
}
#hero-cta {
    margin: 36px auto 0 auto;
    display: flex;
    align-items: center;
}
#hero-tagline {
    color: #ffffff;
    letter-spacing: .2px;
}
#hero-tagline p {
    margin: 0;
    letter-spacing: .5px;
    line-height: 20px;
}
.btn-cta {
    font-weight: medium;
    letter-spacing: .2px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background-color: #595959;
    color: #ffffff;
    transition: background-color 0.5s;
}
.btn-cta:hover {
    background-color: #ff6600;
}

/* Services */
.client-references {
    margin: 0 auto;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 16px;
    width: fit-content;
    background-color: rgb(0, 81, 255);
}
.service-row {
    width: fit-content;
    margin: 0 auto;
    display: flex;
    gap: 8px;
}
.service-row:first-child {
    margin-top: 0 !important;
}
.service-row {
    margin-top: 8px;
}
.service-category h1 {
    color: #ffffff;
    letter-spacing: .2px;
}
.service-card {
    background-color: #141414;
    border-radius: 2px;
    border: none;
}
.vsc {
    transition: all ease-in-out .3s;
    border: 1px solid #ffffff74;
    cursor: help;
    border-radius: 5px;
}
.vsc:hover {
    background-color: #000000;
    border-color: #ff6600;
}
.sc-hidden {
    background-color: transparent !important;
}
.service-card img {
    object-fit: contain;
}
.service-card p {
    color: #ffffff;
    letter-spacing: .6px;
}
.s-p-text {
    font-weight: 100;
    line-height: 20px;
    font-size: 14px;
}
.s-p-text b {
    font-weight: bold !important;
    color: #ff6600;
}
.service-card ul {
    margin-top: 20px;
    margin-bottom: 0;
    padding-left: 24px;
}
.service-card ul li {
    color: #ffffff;
}
.service-card ul li p {
    line-height: 20px;
    font-size: 14px;
    margin: 0;
}
.service-card ul li p b {
    font-weight: bold !important;
    color: #ff6600;
}
#our-services-cta {
    margin: 48px auto 0 auto;
    width: fit-content;
    display: flex;
    gap: 8px;
}
#our-services-cta button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #ffffff;
    background-color: #000000;
    letter-spacing: .5px;
    font-weight: medium;
    font-size: 14px;
    border: none;
    padding: 16px;
    cursor: pointer;
    transition: border-bottom-color 0.5s;
    border-bottom: 0.5px solid transparent;
}
#our-services-cta button:hover {
    border-bottom-color: white;
}

/* Process */
#process-tagline {
    width: fit-content;
    background-color: #171717;
    border-radius: 6px;
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0 auto;
}
#process-tagline img {
    object-fit: contain;
}
#process-tagline p {
    color: #ffffff;
    letter-spacing: .5px;
}
.process-section {
    display: block;
    width: 100%;
}
.ps-img {
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.ps-header-text {
    color: #ffffff;
    text-align: center;
    font-weight: 750;
    letter-spacing: .4px;
    line-height: 20px;
    margin: 0;
    margin-top: 16px;
}
.ps-tagline-text {
    color: #ffffff;
    text-align: center;
    font-weight: lighter;
    letter-spacing: .4px;
    line-height: 20px;
    margin: 0;
    margin-top: 16px;
}
.processes {
    padding: 64px 0;
    display: flex;
    align-items: center;
    width: fit-content;
    margin: 0 auto;
}
.process-card {
    border: 2px solid #ffffff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 16px 16px 22px 16px;
    transition: all ease-in-out .3s;
    cursor: help;
}
.process-card:hover {
    background-color: #000000;
    border-color: #ff6600;
}
.process-no {
    color: #ffffff;
    font-weight: bolder;
    font-size: 32px;
    letter-spacing: .4px;
    line-height: 24px;
}
.process-card img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    margin: 24px auto 0 auto;
}
.pc-header-text {
    display: block;
    width: 160px;
    color: #ffffff;
    text-align: center;
    letter-spacing: .5px;
    line-height: 20px;
    margin: 24px auto 0 auto;
}
.pc-body-text {
    display: block;
    width: 160px;
    color: #ffffff;
    text-align: center;
    font-size: 12.5px;
    line-height: 20px;
    letter-spacing: .5px;
    font-weight: lighter;
    margin: 12px auto 12px auto;
}
.ps-next {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
#techstack-marquee {
    margin: 64px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 280px;
    position: relative;
    z-index: 1;
}
#techstack-marquee .bg-img {
    width: 280px;
    height: 280px;
    object-fit: contain;
    position: absolute;
    z-index: 1;
}
#stack-marquee {
    position: relative;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    background-color: #1C1C1C70;
}
#stack-marquee img {
    object-fit: contain;
    transition: all ease-in-out .2s;
    cursor: pointer;
}
#stack-marquee img:hover {
    width: 120px; height: 120px;
}
.op-cta {
    display: flex;
    justify-content: center;
    gap: 16px;
}

/* Contact Us */
#cu-holder {
    display: flex;
    margin: 0 auto;
    width: fit-content;
}
.cu-card-2 {
    display: flex;
    justify-content: center;
}
.cu-header {
    display: flex;
    align-items: center;
}
.cu-heading p {
    color: #ffffff;
    margin: 0;
}
.cu-header-text {
    font-size: 14px;
    letter-spacing: .4px;
}
.cu-sub-header-text {
    font-size: 40px;
    font-weight: bold;
}
.cucrd {
    /* background-color: #00000065; */
    background-color: #000000bc;
    padding: 16px;
    border-radius: 6px;
}
.cucrd:first-child {
    margin-bottom: 16px;
}
.cucrd p {
    color: #ffffff;
    margin: 0;
}
.cucrd ul {
    padding-left: 24px;
    margin: 0;
}
.cucrd li {
    color: #ffffff;
}
.cucrd li p {
    line-height: 28px;
    font-size: 14px;
    font-weight: lighter;
    letter-spacing: .4px;
}
.cucrd-header-text {
    font-weight: 750;
    font-size: 18px;
    letter-spacing: .4px;
    padding-bottom: 16px;
}
.cucrd-sub-header-text {
    line-height: 28px;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: .4px;
}
.occ {
    display: flex;
    align-items: center;
    gap: 10px;
}
.occ p {
    font-size: 14px;
    letter-spacing: .4px;
}
.occ-2 {
    margin-top: 12px;
}
.cf-field {
    max-height: 180px;
}
.cf-field input {
    padding: 12px;
    font-family: "Outfit", sans-serif;
    background-color: #ffffffda;
    border-radius: 4px;
    border: none;
    margin-bottom: 10px;
    color: #1f1f1f;
}
.cf-field input::placeholder {
    color: #1f1f1f;
}
.cf-field textarea {
    padding: 12px;
    resize: none;
    font-family: "Outfit", sans-serif;
    background-color: #ffffffda;
    border-radius: 4px;
    border: none;
    color: #1f1f1f;
}
.cf-field textarea::placeholder {
    color: #1f1f1f;
}

/* Core Values */
#cv-holder {
    position: absolute;
    display: flex;
    justify-content: space-between;
}
#cv-bg {
    position: absolute;
    object-fit: contain;
    opacity: .30;
}
.cv-header {
    display: flex;
    align-items: center;
    gap: 12px;
}
.cv-header p {
    color: #ffffff;
    font-size: 28px;
    letter-spacing: .5px;
    line-height: 36px;
    font-weight: bolder;
    margin: 0;
}
.cv-sub-heading-text {
    color: #ffffff;
    letter-spacing: .2px;
    font-weight: bold;
}
.cv-body-text {
    display: block;
    text-align: start;
    letter-spacing: .2px;
    line-height: 24px;
    color: #ffffff;
}
.cv-info p {
    color: #ffffff;
    margin: 0;
    line-height: 22px;
    letter-spacing: .4px;
}
.cv-message {
    background-color: #40404055;
    border-radius: 6px;
}
.cv-message p {
    margin: 0;
    color: #ffffff;
}
.cvm-header-text {
    letter-spacing: .2px;
    font-weight: bold;
}
.cvm-body-text {
    margin-top: 24px !important;
    letter-spacing: .2px;
    line-height: 24px;
}
.cvm-footmark {
    display: flex;
    justify-content: right;
    width: 100%;
}
.cvm-footmark img {
    transform-origin: center; /* Pivot from the center */
    animation: stutter-spin 2s steps(4) infinite; /* Key: steps(4) for chunked movement */
}

@keyframes stutter-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Footer */
#footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}
#footer-logo {
    cursor: pointer;
}
.f-holder {
    width: 100%;
    display: flex;
    justify-content: right;
}
.footer-menu {
    width: fit-content;
}
.footer-menu h2 {
    color: #ffffff;
    font-size: 20px;
    letter-spacing: .2px;
    font-weight: 500;
}
.f-menu {
    display: flex;
    gap: 24px;
}
.fm-card {
    display: flex;
    flex-direction: column;
}
.fm-card a {
    color: #ffffff;
    text-decoration: none;
    font-size: 12px;
    letter-spacing: .2px;
    margin-bottom: 8px;
}
.fm-card a:hover {
    text-decoration: underline;
}
#copyright-text {
    color: #ffffff;
    display: block;
    width: 100%;
    text-align: left;
    font-size: 12px;
    letter-spacing: .2px;
    margin-top: 50px;
}