@font-face {
	font-family: Max Sans;
	font-weight: 500;
	font-display: block;
	src: url(MaxSans-Medium.woff2) format("woff2"),url(MaxSans-Medium.woff) format("woff")
}

.max {
    width: 100%;
    height: 120px;
    overflow: hidden;
    display: inline-grid;
    grid-template-columns: 0.45fr 110px 1fr 220px 160px;
    align-items: center;
    position: relative;
    padding: 25px 28px 25px 40px;
    margin: 20px 0 0;
        background: #0d0d0d;
    font-family: Max Sans, TT Commons, sans-serif;
    --sign-height: 70px;
    --gradients-button: radial-gradient(136.12% 140.74% at 99.77% 99.04%, #7d25b0 0%, #452390 20%, #0061ca 80%, #5c9cf0 100%);
    --gb-color-1: #aa4cff;
    --gb-color-2: #3838ff;
    --gb-color-3: #3a89fb;
    --gb-color-4: #630eff;
}
.maxlogo .wrapper {
    height: var(--size);
    width: var(--size);
    filter: blur(7vw);
    animation: svelte-i6ye6i-scaleAnimation 24s linear infinite running;
    transform-origin: center;
    max-width: 90vw;
    aspect-ratio: 1;
    position: absolute;
    top: -30vw;
    left: -5vw;
    opacity: 0.75;
}
.element { width: 50%; height: 50%; border-radius: 50%; position: absolute; animation: svelte-i6ye6i-rotateAnimation 12s linear infinite running }
.element:first-child { background: var(--gb-color-1); top: 25%; left: 0; transform-origin: right }
.element:nth-child(2) { background: var(--gb-color-2); top: 50%; left: 25%; transform-origin: top }
.element:nth-child(3) { background: var(--gb-color-3); top: 25%; left: 50%; transform-origin: left }
.element:last-child { background: var(--gb-color-4); top: 0; left: 25%; transform-origin: bottom }

@keyframes svelte-i6ye6i-scaleAnimation {
    0% { transform: scale(1) }
    50% { transform: scale(.8) }
    to { transform: scale(1) }
}
@keyframes svelte-i6ye6i-rotateAnimation {
    0% { transform: rotate(0) }
    to { transform: rotate(360deg) }
}

.maxlogo-item {
    width: 80px;
    height: 80px;
    overflow: hidden;
    position: absolute;
    top: 12px;
    z-index: 1;
}

.maxheading {
    height: var(--sign-height);
    display: flex;
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    flex-direction: column;
    justify-content: center;
}
.maxdescription {
    height: var(--sign-height);
    display: flex;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    flex-direction: column;
    justify-content: center;
}
.maxdownload, .maxchanel {
    height: var(--sign-height);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.maxchanel .maxbutton { margin-left: 18px; }
.maxbutton {
    padding: 12px 24px;
    height: 64px;
    border-radius: 18px;
    font-size: 16px;
    line-height: 1.15;
    position: relative;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    color: #fff;
    gap: 8px;
    cursor: pointer;
    background: var(--gradients-button);
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.maxbutton:hover {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    color: #ffffff;
}

.maxchanel {position:relative}

@media (min-width: 992px) and (max-width: 1399px) {
    .max { grid-template-columns:0.45fr 100px 1fr 190px 140px; }
    .maxheading { font-size:24px }
    .maxdescription { font-size:18px }
    .maxbutton { padding:8px 18px;height:54px;border-radius:18px;font-size:14px }
}