@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&family=Fredoka:wght@400;500;600;700&display=swap');

:root {
    --bg: #080015;
    --bg2: #140028;

    --purple: #7c4dff;
    --pink: #ff4fd8;
    --blue: #42c8ff;
    --green: #52ff9a;
    --yellow: #ffd93d;
    --red: #ff5757;

    --card: #1a1033;
    --white: #fff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Fredoka', sans-serif;
    color: #fff;
    overflow-x: hidden;

    background:
        radial-gradient(circle at top left, #3b136d 0%, transparent 30%),
        radial-gradient(circle at bottom right, #00305f 0%, transparent 30%),
        linear-gradient(180deg, var(--bg), var(--bg2));

    min-height: 100vh;
}

body::before {
    content: "";

    position: fixed;
    inset: 0;

    background-image:
        radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);

    background-size: 35px 35px;

    opacity: .25;

    pointer-events: none;

    animation: starsMove 80s linear infinite;
}

@keyframes starsMove {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-200px);
    }
}

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #12091f;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(180deg,
            var(--pink),
            var(--purple),
            var(--blue));

    border-radius: 20px;
}

.logo_idabkids {
    margin-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1px;
    margin-bottom: 60px;
    transform-style: preserve-3d;
    animation: floatLogo 5s ease-in-out infinite;
}

@keyframes floatLogo {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-8px);
    }
}

.logo_idabkids span {
    font-family: 'Baloo 2', cursive;
    font-size: 62px;
    font-weight: 700;
    line-height: 1;

    text-shadow:
        0 4px 0 rgba(0, 0, 0, .25),
        0 10px 25px rgba(0, 0, 0, .35),
        0 0 20px rgba(255, 255, 255, .15);
}

.logo_idabkids span:nth-child(2) {
    color: #ff2f2f;
    font-weight: 800;
    font-size: 72px;
}

.logo_idabkids span:nth-child(3) {
    color: #ff2f2f;
    font-weight: 800;
    font-size: 72px;
}

.logo_idabkids span:nth-child(4) {
    color: #ff2f2f;
    font-weight: 800;
    font-size: 72px;
}

.logo_idabkids span:nth-child(5) {
    color: #ff2f2f;
    font-weight: 800;
    font-size: 72px;
}

.logo_idabkids span:nth-child(6) {
    color: #ffb300;
}

.logo_idabkids span:nth-child(7) {
    color: #9b59ff;
}

.logo_idabkids span:nth-child(8) {
    color: #34c759;
}

.logo_idabkids span:nth-child(9) {
    color: #42a5ff;
}

.ico-idabkids {
    position: relative;
    background: #fff;
    border-radius: 50%;
    width: 58px;
    height: 58px;
    margin-right: 10px;
    box-shadow: 0 5px 0 rgba(0, 0, 0, .25), 0 10px 20px rgba(0, 0, 0, .25);
    border: 4px solid #fff;
}

.ico-idabkids img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 50px;
    filter:
        brightness(0) saturate(100%) invert(16%) sepia(95%) saturate(7481%) hue-rotate(357deg) brightness(103%) contrast(118%);
}


.ico-idabkids {
    width: 88px;
    height: 88px;

    border-radius: 50%;

    background:
        linear-gradient(145deg, #ffffff, #cfcfcf);

    position: relative;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .4),
        0 0 30px rgba(87, 212, 255, .45);

    animation: spinGlow 8s linear infinite;
}

@keyframes spinGlow {
    0% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, .4),
            0 0 30px rgba(87, 212, 255, .45);
    }

    50% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, .4),
            0 0 45px rgba(255, 79, 216, .65);
    }

    100% {
        box-shadow:
            0 10px 30px rgba(0, 0, 0, .4),
            0 0 30px rgba(87, 212, 255, .45);
    }
}

.ico-idabkids img {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
}

.hero {
    width: 100%;
    max-width: 1400px;

    margin: 10px auto 0;

    padding: 0 20px;
}

.player-wrapper {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 40px;

    aspect-ratio: 16/9;

    border: 3px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 20px 60px rgba(0, 0, 0, .5),
        0 0 40px rgba(124, 77, 255, .2);

    background: #000;
}

.player-wrapper::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .08),
            transparent);

    z-index: 2;

    pointer-events: none;
}

#player,
#player iframe {
    width: 100% !important;
    height: 100% !important;
    border: none;
}

.section {
    max-width: 1450px;

    margin: auto;

    padding: 50px 20px 100px;
}

.row {
    position: relative;
    margin-bottom: 60px;
}

.row h2 {
    font-family: 'Baloo 2', cursive;

    font-size: 38px;

    margin-bottom: 18px;

    color: #fff;

    text-shadow:
        0 4px 15px rgba(0, 0, 0, .4);
}

.row-scroll {
    display: flex;
    gap: 20px;

    overflow-x: auto;

    scroll-behavior: smooth;

    padding: 15px 5px 20px;
}

.row-scroll::-webkit-scrollbar {
    display: none;
}

.card {
    min-width: 290px;

    position: relative;

    overflow: hidden;

    border-radius: 28px;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    background:
        linear-gradient(180deg,
            rgba(255, 255, 255, .1),
            rgba(255, 255, 255, .03));

    backdrop-filter: blur(15px);

    border:
        2px solid rgba(255, 255, 255, .08);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .35);

    isolation: isolate;
}

.card::before {
    content: "";

    position: absolute;
    inset: -2px;

    border-radius: inherit;

    background:
        linear-gradient(135deg,
            var(--purple),
            var(--pink),
            var(--blue));

    opacity: .9;

    z-index: -2;
}

.card::after {
    content: "";

    position: absolute;
    inset: 2px;

    border-radius: inherit;

    background:
        linear-gradient(180deg,
            #13091f,
            #1a1033);

    z-index: -1;
}

.card:hover {
    transform:
        translateY(-12px) scale(1.05);

    box-shadow:
        0 30px 60px rgba(0, 0, 0, .45),
        0 0 35px rgba(124, 77, 255, .4);
}

.card.active {
    transform: scale(1.08);

    box-shadow:
        0 0 40px rgba(255, 217, 61, .7);
}

.card img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;

    transition:
        transform .3s ease,
        opacity .25s ease;
}

.card:hover img {
    transform: scale(1.08);
}

.card iframe {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;

    pointer-events: none;

    border: none;
}

.card:hover iframe {
    opacity: 1;
}

.card:hover img {
    opacity: 0;
}

.card-title {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    padding: 16px;

    font-size: 15px;
    font-weight: 600;

    background:
        linear-gradient(to top,
            rgba(0, 0, 0, .95),
            transparent);
}

.scroll-btn {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    z-index: 50;

    cursor: pointer;

    color: #fff;

    font-size: 28px;

    backdrop-filter: blur(10px);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .18),
            rgba(255, 255, 255, .05));

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .35);

    opacity: 0;

    transition: .25s;
}

.row:hover .scroll-btn {
    opacity: 1;
}

.scroll-btn:hover {
    transform:
        translateY(-50%) scale(1.1);

    box-shadow:
        0 0 30px rgba(124, 77, 255, .45);
}

.scroll-left {
    left: -10px;
}

.scroll-right {
    right: -10px;
}

.fullscreen-btn,
.share-btn {
    position: absolute;

    bottom: 15px;

    width: 55px;
    height: 55px;

    border: none;
    border-radius: 18px;

    z-index: 40;

    color: #fff;

    font-size: 20px;

    cursor: pointer;

    backdrop-filter: blur(10px);

    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, .18),
            rgba(255, 255, 255, .05));

    transition: .25s;
}

.fullscreen-btn:hover,
.share-btn:hover {
    transform: scale(1.1);

    box-shadow:
        0 0 25px rgba(255, 79, 216, .5);
}

.fullscreen-btn {
    right: 15px;
}

.share-btn {
    right: 80px;
}

@media(max-width:900px) {

    .logo {
        margin-left: 15px;
    }

    .logo span {
        font-size: 42px;
    }

    .ico-idabkids {
        width: 58px;
        height: 58px;
    }

    .ico-idabkids img {
        width: 48px;
    }

    .row h2 {
        font-size: 28px;
    }

    .card {
        min-width: 220px;
    }

    .scroll-btn {
        display: none;
    }

    .player-wrapper {
        border-radius: 24px;
    }
}

@media(max-width:520px) {

    .logo span {
        font-size: 32px;
    }

    .hero {
        padding: 0 12px;
    }

    .section {
        padding: 30px 12px 100px;
    }

    .row {
        margin-bottom: 40px;
    }

    .row h2 {
        font-size: 24px;
    }

    .card {
        min-width: 180px;
        border-radius: 22px;
    }

    .card-title {
        font-size: 12px;
        padding: 10px;
    }

    .fullscreen-btn,
    .share-btn {
        width: 45px;
        height: 45px;

        border-radius: 14px;

        font-size: 16px;
    }

    .share-btn {
        right: 65px;
    }
}