body {
    font-family: var(--font);
    font-size: 22px;
    background-color: #000000;
    overflow-x: hidden;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.header {
    position: relative;
    top: 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header>.new {
    background: #65656573;
    padding: 0.45vh 2vh;
    border-radius: 6vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1vh;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px 3px;
    animation: glowClassNew 1s ease-in-out infinite alternate;
}

.header>.new>.type {
    background: #65656573;
    color: #fff;
    padding: 0.5vh 1vh;
    border-radius: 6vh;
    font-size: 1.5vh;
}

.header>.new>span {
    color: #fff;
    font-size: 1.5vh;
}

.header>.title {
    color: #fff;
    font-size: 11vh;
    text-align: center;
    width: 53%;
    font-weight: 900;
    font-size: 7vh;
    margin: 2vh 0;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.header>.description {
    color: #fff;
    text-align: center;
    width: 50%;
}

.containers {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15vw;
    margin-top: 40vw;
    overflow: hidden;
}

.newest {
    display: flex;
    gap: 10vh;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 8vh 10vh;
}

.newest>span {
    color: #fff;
    font-size: 4vh;
    font-weight: 900;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.newest>.left {
    display: flex;
    gap: 2vh;
    flex-direction: column;
    align-items: flex-start;
}

.newest>.left>.text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.newest>.left>.text>.title {
    color: #fff;
    font-size: 5vh;
    font-family: var(--geist);
    font-weight: 900;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.newest>.left>.text>.description {
    color: #fff;
    font-size: 2vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.newest>.right>.shadow {
    background-image: url('../images/assist/shadow-1.webp');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 71vh;
    height: 39.5vh;
    border-radius: 2vh;
    position: absolute;
    top: -32px;
    left: -59px;
    z-index: -1;
    transition: all 0.5s ease-in-out;
}

.newest>.right>img {
    width: 60vh;
    border-radius: 2vh;
    transition: all 0.5s ease-in-out;
}

.newest>.right:hover img {
    transform: scale(1.1);
}

.newest>.right:hover .shadow {
    transform: scale(1.1);
}

.services {
    display: flex;
    gap: 10vh;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 3vh 10vh;
}

.services>.services-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1vh;
}

.services>.services-container>.service-large {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: stretch;
    gap: 2vh;
}

.services>.services-container>.service-double {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-direction: row;
    align-items: center;
    gap: 2vh;
    justify-content: center;
}

.service-box {
    display: flex;
    flex-direction: row;
    height: 25vh;
    align-items: center;
    gap: 1vh;
    width: 100%;
    padding: 3vh;
    background-color: rgba(6, 6, 6, 1);
    border-radius: 2vh;
    border: 1px solid rgba(65, 65, 65, 1);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px 3px;
}

.service-box>.left {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
    gap: 1vh;
}

.service-box>.left>.top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.7vh;
}

.service-box>.left>.top>i {
    color: #fff;
    font-size: 3vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.service-box>.left>.top>span {
    color: #fff;
    font-size: 3vh;
    font-weight: 900;
    font-family: var(--geist);
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.service-box>.left>.top>.new {
    color: #000000;
    font-size: 1.4vh;
    font-weight: 700;
    padding: 0.5vh 1vh;
    background-color: #FF7B25;
    border-radius: 15vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.service-box>.left>.center {
    color: #fff;
    font-size: 1.5vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.service-box>.left>.bottom {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 1vh;
}

.service-box>.right {
    display: flex;
    flex-direction: row;
    gap: 1vh;
    justify-content: center;
    align-items: center;
    max-height: 100%;
    transition: all 0.5s ease-in-out;
}

.service-box>.right>div {
    transition: all 0.5s ease-in-out;
}

.service-box>.right:hover {
    animation: glowClassService 0.5s ease-in-out infinite alternate;
}


.ai {
    display: flex;
    gap: 10vh;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 10vh;
}

.ai>.left {
    display: flex;
    gap: 2vh;
    flex-direction: column;
    align-items: flex-start;
}

.ai>.left>.text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.ai>.left>.text>.title {
    color: #fff;
    font-size: 5vh;
    font-family: var(--geist);
    font-weight: 900;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.ai>.left>.text>.description {
    color: #fff;
    font-size: 2vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.ai>.right>div {
    width: 60vh;
    border-radius: 4vh;
    transition: all 0.5s ease-in-out;
    transform: scale(0.8) translateX(-125px);
}

.ai>.right:hover div {
    transform: rotate3d(2, -3, 0, 30deg) translateX(-150px) scale(0.9);
}

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

.static>.text {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.static>.text>.title {
    color: #fff;
    font-size: 2vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.static>.text>.description {
    color: #fff;
    font-size: 9vh;
    font-family: var(--geist);
    font-weight: 900;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.static>.numbers {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 2vh;
}

.static>.numbers>.number {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 37vh;
    gap: 0.5vh;
    justify-content: flex-end;
}

.static>.numbers>.number>.top {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5vh;
}

.static>.numbers>.number>.top>.count {
    color: #ffffff;
    font-size: 6vh;
    font-family: var(--geist);
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.static>.numbers>.number>.top>.plus {
    font-size: 6vh;
    font-family: var(--geist);
    font-weight: 900;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
}

.static>.numbers>.number>.bottom {
    color: #fff;
    font-size: 1.5vh;
    display: flex;
    height: 100%;
    max-height: 29vh;
    width: 25vh;
    text-shadow: rgba(0, 0, 0, 0.35) 0px 0px 20px;
    align-items: flex-start;
    justify-content: center;
}

.static>.numbers>.number>.bottom>.text {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2vh;
}

.orange {
    background: linear-gradient(180deg, #FF7B25 0%, rgba(0, 0, 0, 0) 85%);
}

.green {
    background: linear-gradient(180deg, #25FF46 0%, rgba(0, 0, 0, 0) 85%);
}

.blue {
    background: linear-gradient(180deg, #2563FF 0%, rgba(0, 0, 0, 0) 85%);
}

.purple {
    background: linear-gradient(180deg, #8E25FF 0%, rgba(0, 0, 0, 0) 85%);
}

.orange-text {
    color: #FF7B25;
}

.green-text {
    color: #25FF46;
}

.blue-text {
    color: #2563FF;
}

.purple-text {
    color: #8E25FF;
}