/* =========== © 2025 Centroarts.com - https://oxy.games =========== */

:root {
    --ha-height: 440px;
}
@media (min-width: 1200px) {
    :root {
        --ha-height: 800px;
    }
}
@media (min-width: 1600px) {
    :root {
        --ha-height: 1044px;
    }
}

/* About Img */
.hero-about {
    --imask: url(../images/icons/oxy.svg);
    content: ""; position: relative;
    background-color: #2c124e;
    mask-size: auto 114%; -webkit-mask-size: auto 114%;
    mask-position: center; -webkit-mask-position: center;
    mask-repeat: repeat-x; -webkit-mask-repeat: repeat-x;
    mask-image: var(--imask); -webkit-mask-image: var(--imask);
}
.hero-about .cover { height: var(--ha-height); }
.hero-about .cover::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(180deg,hsla(var(--c-body),0),hsl(var(--c-body))); }

.sect-about .wrp + .wrp { margin-top: var(--sect-gap-m); }

.hero-about + .sect { margin-top: calc(var(--ha-height)/-4); }


/* Servius */
.about-serv {
    --grid-gap: 0;
    --grid-cols: 2;
    display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-cols), 1fr);
    position: relative;
}
.aserv-item { position: relative; }

.servius-flag, .aserv-item .im { display: block; width: 48px; height: 48px; margin-bottom: 24px; border-radius: 50%; }
.servius-flag img { display: inherit; width: inherit; height: inherit; }
.servius-logo { display: block; padding: 8px 0; }
.servius-logo svg { max-width: 100%; height: auto; fill: currentColor; }

.aserv-item .im { --im-size: 48px; background-color: hsl(var(--c-primary1)); }

.aserv-item a { color: hsl(var(--c-primary2)) !important; }
.aserv-item a:hover { color: hsl(var(--c-primary3)) !important; }

@media (min-width: 768px) {
    .about-serv { --grid-cols: 3; }
    .aserv-item { padding: 24px; }
}
@media (min-width: 992px) {
    .aserv-item::after, .about-serv::after {
        content: ""; width: 1px; position: absolute; inset: 0;
        background-image: linear-gradient(180deg,hsla(var(--c-primary1),0) 0%, hsla(var(--c-primary1),0.3) 50%, hsla(var(--c-primary1),0) 100%);
    }

    .about-serv::after { right: auto; }
    .aserv-item::after { left: auto; }
    .aserv-item { padding: 40px; }
}
@media (max-width: 991px) {
    .sect-about { text-align: center; }
    .servius-flag, .aserv-item .im { margin-left: auto; margin-right: auto; }
}
@media (max-width: 767px) {
    .aserv-item:first-child { grid-column: auto/span var(--grid-cols); padding-bottom: 40px; }
    .aserv-item:not(:first-child) { padding: 0 8px; padding-top: 40px; }
    .aserv-item:first-child::after {
        content: ""; height: 1px; position: absolute; inset: 0; top: auto;
        background-image: linear-gradient(90deg,hsla(var(--c-primary1),0) 0%, hsla(var(--c-primary1),0.3) 50%, hsla(var(--c-primary1),0) 100%);
    }
}

/* believe blocks */
.believe-group {
    --grid-gap: 8px;
    --grid-cols: 4;
}
.believe-group-list {
    display: grid; gap: var(--grid-gap); grid-template-columns: repeat(var(--grid-cols), 1fr);
}
@media (min-width: 576px) {
    .believe-group { --grid-gap: 16px; }
}
@media (min-width: 1200px) {
    .believe-group {
        --grid-gap: 32px;
        --grid-cols: 4;
    }
}
@media (max-width: 991px) {
    .sect-believe .sect-intro + .sect-cont { margin-top: var(--p-wrp); }
    .believe-group { padding-left: 0; padding-right: 0; }
    .believe-group-list {
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        padding-left: var(--p-wrp); padding-right: var(--p-wrp);
    }
    .believe-group-list::-webkit-scrollbar { display: none; }
    .believe-item { min-width: 320px; }
}
@media (max-width: 399px) {
    .believe-item {
        min-width: calc(100vw - var(--p-wrp)* 2);
    }
}
.believe-item {
    --believe-pad: 28px;
    --g-rd: 300px;
    position: relative; z-index: 1; border-radius: var(--rd-block); overflow: hidden; text-align: center;
    background-image: linear-gradient(0deg,hsla(var(--c-block),0),hsl(var(--c-block)));
    padding-bottom: var(--believe-pad);
}
.believe-item .desc, .believe-item .title { padding-left: var(--believe-pad); padding-right: var(--believe-pad); }
.believe-item-icon { display: flex; justify-content: center; }
.believe-item-icon svg { display: block; max-width: 100%; height: auto; }

.believe-item-icon svg path { transition: transform .3s ease; }

.believe-item:hover .believe-item-icon svg path:nth-child(1) {
    transform: translateX(3%);
}
.believe-item:hover .believe-item-icon svg path:nth-child(3) {
    transform: translateX(-3%);
}

.believe-item::after, .believe-item::before {
    content: ""; display: block; position: absolute; z-index: -1;
    left: calc(50% - var(--g-rd)); top: calc(50% - var(--g-rd));
    width: calc(var(--g-rd)*2); aspect-ratio: 1/1;
    transition: transform .5s ease, opacity .2s ease;
    opacity: 0; pointer-events: none;
}
.believe-item::after {
    transform: translate(-60%, -40%);
    background-image: radial-gradient(closest-side, hsla(var(--c-primary1), 0.3) 0%, hsla(var(--c-primary1), 0) 100%);
}
.believe-item::before {
    transform: translate(60%, 40%);
    background-image: radial-gradient(closest-side, hsla(var(--c-second1), 0.3) 0%, hsla(var(--c-second1), 0) 100%);
}
.believe-item:hover::after {
    transform: translate(-25%, -25%); opacity: 1;
}
.believe-item:hover::before {
    transform: translate(25%, 25%); opacity: 1;
}

/* Block CTR */
@media (max-width: 399px) {
    .sect-block-ctr .wrp { padding-left: 0; padding-right: 0; }
}
.block-ctr {
    --g-rd: 500px;
    position: relative; z-index: 1; border-radius: var(--rd-block); overflow: hidden;
    padding-top: var(--sect-gap-md); padding-bottom: var(--sect-gap-md);
    background-color: hsla(var(--c-primary1), 0.2);
}
.block-ctr::after {
    content: ""; display: block; position: absolute; z-index: -1;
    left: calc(50% - var(--g-rd)); top: calc(50% - var(--g-rd));
    width: calc(var(--g-rd)*2); aspect-ratio: 1/1;
    background-image: radial-gradient(closest-side, hsla(var(--c-primary1), 1) 0%, hsla(var(--c-primary1), 0) 100%);
    transition: opacity .2s ease; opacity: .2; pointer-events: none;
}
.block-ctr:hover::after { opacity: .32; }