/* import ttf font */
@font-face {
    font-family: 'Noto Sans';
    font-style: normal;
    font-weight: 400;
    src: url('IBMPlexSerif-light.ttf') format('truetype');
}

*{
    color: var(--brand-white);

}
img{
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
a{
    color: var(--brand-white) !important;
}
h1{
 font-family: "IBMPlexSerif-light" !important;
 color: var(--brand-cyan) !important;
}
h2{
    color: #FF7A18 !important;
}
h3,p{
    color: var(--brand-white) !important;
}
.card,
.card h3,
.card p,
.card a{
    color: var(--brand-black) !important;
}
.card{
    background-color: var(--brand-white);
}
.header{
    background: var(--brand-navy);
    background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-dark-teal) 50%, var(--brand-navy) 100%);
}
html::before {
   
        content: "";
    position: static;
    inset: 0;
    z-index: -1;
    padding: var(--animated-border-size);
    border-radius: inherit;
    background: conic-gradient(
        from var(--animated-border-angle),
        var(--brand-teal),
        var(--brand-white),
        var(--brand-orange),
        var(--brand-white),
        var(--brand-teal)
    );
    mask: linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: add;
    animation: border-animation 1.4s linear infinite;
    pointer-events: none;
}

:root{
    --brand-orange: #FF6500;
    --brand-orange-accent: #FF7A18;
    --brand-cyan-glow: #20D5D2;
    --brand-teal: #35C9B5;
    --brand-cyan: #00CFE8;
    --brand-navy: #03171D;
    --brand-dark-teal: #08272C;
    --brand-black: #050B0D;
    --brand-white: #F5F4EF;
    --brand-silver: #C5D0D1;
    --primary-color: var(--brand-orange);
    --secondary-color: var(--brand-dark-teal);
    --success-color: var(--brand-teal);
    --danger-color: var(--brand-orange);
    --warning-color: var(--brand-orange-accent);
    --info-color: var(--brand-cyan);
    --light-color: var(--brand-white);
    --dark-color: var(--brand-black);
}




.header {
    width: 100%;
    height: 50%;
    text-align: center;
    font-size: 2rem;
    margin-top: 2rem;
   
    
    border-radius: 50px;
   padding-top: 50px;
   padding-bottom: 50px;
}




.animated-border2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: var(--animated-border-size);
    border-radius: inherit;
    background: conic-gradient(
        from var(--animated-border-angle),
        var(--brand-teal),
        var(--brand-white),
        var(--brand-orange),
        var(--brand-white),
        var(--brand-teal)
    );
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: add;
    animation: border-animation 1.4s linear infinite;
    pointer-events: none;
}
@property --animated-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes border-animation {
    to {
        --animated-border-angle: 360deg;
    }
}

.logo {
    position: relative;
    z-index: 1;
}

.char {
    display: inline-block;
    text-shadow: 0 0 18px rgb(255 255 255 / 22%);
}

@keyframes pulse {
    0%, 100% {
        opacity: .76;
        transform: translateY(0);
    }

    50% {
        opacity: 1;
        transform: translateY(-4px);
    }
}

.body {
    width: 100%;
    height: 100pc;
    color: var(--brand-white);
    font-size: 1rem;
    text-align: center;
    margin-top: 2rem;
    background-color: var(--brand-dark-teal);
    border: 1px solid var(--brand-dark-teal);
    border-radius: 10px;

}
.text{
    margin-top: 100px;
}

wc-service-card {
    display: block;
    min-height: 100%;
}

.nexus-card {
    background: transparent;
    border: 1px solid rgb(245 244 239 / 24%);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgb(5 11 13 / 25%);
    display: grid;
    gap: 1rem;
    min-height: 330px;
    padding: 1.1rem;
}

.nexus-card__visual {
    background:
        linear-gradient(135deg, rgb(53 201 181 / 32%), transparent 42%),
        linear-gradient(90deg, rgb(245 244 239 / 18%), transparent 58%),
        linear-gradient(145deg, rgb(255 101 0 / 28%), transparent 72%),
        transparent;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 8px;
    min-height: 142px;
    position: relative;
}

.nexus-card__visual::after {
    background: transparent;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 8px;
    bottom: 1rem;
    content: "";
    height: 44px;
    position: absolute;
    right: 1rem;
    width: 52%;
}

.nexus-card__caption,
.nexus-card li {
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: .78rem;
    font-weight: 800;
    padding: .42rem .58rem;
    width: fit-content;
}

.nexus-card h3 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0;
}

.nexus-card p {
    color: #fff;
    line-height: 1.6;
    margin: 0;
}

.nexus-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link.active {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
}