.streaming-section{min-height: 87dvh;padding: 9rem 7rem 3.5rem 7rem;background: linear-gradient( 302deg, rgb(108 41 116 / 48%) 0%, rgba(65, 88, 136, 0.95) 50%, rgba(92, 125, 185, 0.95) 100% );position: relative;z-index: 2;overflow: hidden;opacity: 1 !important;animation: none !important} .streaming-section::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at 20% 20%, rgba(103, 178, 223, 0.1) 0%, transparent 50% ), radial-gradient( circle at 80% 80%, rgba(188, 143, 243, 0.1) 0%, transparent 50% );pointer-events: none} .streaming-content{margin: 0 auto} .streaming-section h2{font-size: clamp(2rem, 4vw, 3rem);margin-bottom: 3rem;color: var(--color-light);font-weight: 500;position: relative;display: inline-block;letter-spacing: 0.05em} .streaming-section h2::after{content: "";position: absolute;width: 100%;height: 2px;bottom: -0.5rem;left: 0;background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%)} .streaming-grid{width: 100%;margin: 0 auto;padding: 0.6rem 0} .video-section{display: grid;grid-template-columns: repeat(3, 1fr);gap: 2rem;width: 100%} .streaming-item{background: rgba(228, 184, 231, 0.05);padding: 2rem;border-radius: 1rem;border: 1px solid rgba(228, 184, 231, 0.1);transition: all 0.3s ease;backdrop-filter: blur(10px);position: relative;overflow: hidden} .streaming-item::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at top right, rgba(173, 216, 230, 0.15), transparent 60% ), radial-gradient( circle at bottom left, rgba(188, 143, 243, 0.1), transparent 60% );pointer-events: none} .streaming-item:hover{transform: translateY(-5px);background: rgba(228, 184, 231, 0.08);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2)} .video-container{position: relative;width: 100%;padding-bottom: 56.25%;height: 0;overflow: hidden;border-radius: 0.8rem;background: #000;margin-bottom: 1rem;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);transition: all 0.4s ease} .video-container:hover{transform: scale(1.02);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2)} .video-container iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 0.8rem;border: 2px solid rgba(173, 216, 230, 0.1)} .video-thumbnail{cursor: pointer;display: flex;align-items: center;justify-content: center} .video-thumbnail img{width: 100%;height: 100%;object-fit: cover;border-radius: 0.8rem;transition: transform 0.3s ease} .video-thumbnail:hover img{transform: scale(1.02)} .play-button{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 68px;height: 48px;background-color: rgba(33, 33, 33, 0.8);border: none;border-radius: 8px;cursor: pointer;color: white;font-size: 24px;transition: all 0.3s ease;z-index: 2} .play-button:hover{background-color: rgb(230, 33, 23);transform: translate(-50%, -50%) scale(1.1)} .video-description{display: flex;flex-direction: column;position: relative} .video-description h3{font-size: 1.9rem;color: var(--color-accent);margin-bottom: 1.5rem;font-weight: 500;position: absolute;line-height: 1.3;top: 0} .video-description p{font-size: 1.1rem;color: var(--color-light);line-height: 1.6;margin-top: 6rem;max-width: 90%} @media (max-width: 1280px){.video-section{grid-template-columns: repeat(2, 1fr)} } @media (max-width: 1105px){.streaming-section{padding: 9rem 5rem 3.5rem 7rem} } @media (max-width: 1024px){.streaming-section{padding: 2.2rem 2rem 2rem 2rem} .streaming-section h2{text-align: center;margin-left: auto;margin-right: auto;display: block;width: 100%;margin-top: 1rem} .streaming-section h2::after{left: 50%;transform: translateX(-50%);width: 16rem} .streaming-content{padding: 0 0rem} .video-section{grid-template-columns: 1fr} .streaming-item:hover{background: linear-gradient( 135deg, rgba(28, 35, 65, 0.7) 0%, rgba(45, 55, 90, 0.8) 50%, rgba(55, 65, 110, 0.7) 100% );transform: none;box-shadow: 0 0px 0px rgba(0, 0, 0, 0.25), 0 0px 0px rgba(0, 0, 0, 0.15), 0 0 0px rgba(173, 216, 230, 0.1);border: 1px solid rgba(173, 216, 230, 0.15)} } @media (max-width: 768px){.streaming-section{padding: 2.7rem 2rem 2rem 2rem} .streaming-item{padding: 1.5rem} .section-title{font-size: 1.75rem} } @media (max-width: 648px){.streaming-content{padding: 0rem} .streaming-grid{padding: 0rem} } @media (max-width: 468px){.streaming-section{padding: 3.6rem 2rem 2rem 2rem} }