#showcase-section {
    width: 100%;
    max-width: 1200px;
    margin: 150px auto 120px auto;
    text-align: center;
    padding: 0 20px;
}

.showcase-icon i {
    font-size: 40px;
    color: #0084ff;

    opacity: 0;
    display: inline-block;

    transform: translateY(25px) rotate(0deg);

    animation: 
        iconAppear 1.2s ease forwards,
        iconFloatTilt 3.5s ease-in-out infinite 1.2s;
}

@keyframes iconAppear {
    0% {
        opacity: 0;
        transform: translateY(25px) rotate(0deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes iconFloatTilt {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-12px) rotate(12deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

.showcase-title {
    font-size: 3rem;
    font-weight: 700;
    color: white;
    margin-top: 20px;
    margin-bottom: 8px;
}

.showcase-subtitle {
    font-size: 1.2rem;
    color: #bdbdbd;
    margin-bottom: 45px;
}

.showcase-video-wrapper {
    width: 100%;
    padding: 0;
    border-radius: 20px;

    background: rgba(20,20,20,0.35);
    border: 1px solid rgba(80,80,80,0.35);
    backdrop-filter: blur(6px);
}

.showcase-video-wrapper iframe {
    width: 100%;
    height: 600px;
    border-radius: 20px;
    display: block;
}


@media (max-width: 768px) {
    .showcase-video-wrapper iframe {
        height: 240px;
    }

    .showcase-title {
        font-size: 2.3rem;
    }

    .showcase-subtitle {
        font-size: 1.05rem;
    }

    .showcase-icon i {
        font-size: 55px;
    }
}