.section.benefits > .container {padding-top: 0.7rem;color: #9CA3AF; } .section.benefits > .container h1, .section.benefits > .container .h1 {max-width: 30rem;margin-left: auto;margin-right: auto;line-height: 1.25;margin-bottom: -0.1rem;color: var(--white);-webkit-text-fill-color: var(--white); } .section.benefits > .container h2, .section.benefits > .container .h2 {font-size: 2.4905rem;text-align: center;text-transform: uppercase;margin-bottom: 1.7rem;color: var(--primary);background: linear-gradient(90deg, #009DFF 0%, #0067FF 52.4%, #00D7FF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent; } .section.benefits > .container p {line-height: 1.65;text-align: center;max-width: 54.5rem;margin-left: auto;margin-right: auto;margin-bottom: 3rem; } .section.benefits > .container .row-card {max-width: 65.8rem;margin-left: auto;margin-right: auto; } .section.benefits > .container .player {margin-top: 1.15rem;max-width: 64rem;margin-left: auto;margin-right: auto;border-radius: 0.8rem;border: 1px solid rgba(0, 212, 255, 0.2);aspect-ratio: 1280/530;position: relative;display: flex;align-items: center;justify-content: center;margin-bottom: 1.55rem; } .section.benefits > .container .player .video {border-radius: 0.8rem;position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover; } .section.benefits > .container .player .btn {border-radius: 0.8rem;position: absolute;inset: auto;width: auto;height: auto;display: flex;align-items: center;justify-content: center;padding: 0;box-shadow: none !important;z-index: 2; } .section.benefits > .container .player .btn span {border-radius: 10rem;padding: 0.5rem;display: flex;align-items: center;justify-content: center;background: linear-gradient(90deg, #22D3EE 0%, #2563EB 100%);box-shadow: 0 0 2.0315rem 0 rgba(0, 212, 255, 0.8);border: 0; } .section.benefits > .container .player .btn span svg {margin: 0;width: 3.3rem;height: auto;position: relative; } .section.benefits > .container .player .btn span.active {display: none; } .section.benefits > .container .player .btn span.active svg {top: 0.05rem; } .section.benefits > .container .player .btn span.inactive {display: block; } .section.benefits > .container .player .btn span.inactive svg {left: 0.15rem;top: 0.05rem; } .section.benefits > .container .player.active .btn {opacity: 0;transition: opacity 0.25s; } .section.benefits > .container .player.active .btn span.active {display: block; } .section.benefits > .container .player.active .btn span.inactive {display: none; } .section.benefits > .container .player.active:hover .btn {opacity: 1; }