.primary-hero-container { width: 100%; height: 100vh; display: flex; align-items: center; position: relative; }
.primary-hero-media { width: 100%; height: 100%; position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.phm-inside { width: 100%; height: 100%; position: relative; border-radius: 0; background-color: var(--views-green); transform-origin: bottom center; }
.phm-inside img { width: 100%; height: 100%; object-fit: cover; }
.phm-inside:before { content: ''; width: 100%; height: 100%; z-index: 1; background: linear-gradient(180deg, #0c371e, #000); opacity: .4; position: absolute; inset: 0; }
.primary-hero-container .container { position: relative; z-index: 5; }
.phm-background-wrapper { position: absolute; left: -30px; top: 0; width: calc(100% + 60px); height: 100%; background: var(--views-green); border-radius: 32px 32px 0 0; overflow: hidden; }
.phm-background-wrapper .isMedia { position: relative; width: 100%; height: 100%; transform-origin: bottom center; }
.phm-background-wrapper iframe { width: 105%; left: 50%; height: 115%; object-fit: cover; aspect-ratio: auto; position: absolute; top: 50%; transform: translate(-50%, -50%); min-width: 100vw; min-height: 56.25vw; height: 100vh; width: 177.78vh; }
.phm-background-wrapper video { width: 100%; height: 100%; object-fit: cover; }
.primary-hero-bg { background: var(--views-green); position: absolute; width: 100%; height: 100%; left: 0; top: 0; ; z-index: 0; }
.primary-hero-content h1 { font-size: 68px; line-height: 80px; margin-bottom: 0; color: var(--views-white); text-wrap: balance; }
.line { display: block; overflow: hidden; }
.line-inner { display: block; will-change: transform; }
.oo-svg { position: relative; display: inline-block; width: auto; height: auto; margin: 0; vertical-align: top; }
.oo-svg .oo-text { display: inline-block; width: 100%; text-align: center; animation: textFadeOut 0.5s forwards; animation-delay: 1.25s; }
.oo-svg svg { position: absolute; width: 100%; height: 100%; opacity: 0; animation: symbolFadeIn 0.75s forwards; animation-delay: 1.25s; top: 50%; left: 50%; transform: translate(-50%, -50%); margin-top: 11%; }
@keyframes textFadeOut {
 to { opacity: 0; transform: scale(0.9); }
 }
@keyframes symbolFadeIn {
 to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
 }
/* ====================================================== 
! Extra large devices (large desktops, less than 1600px)
====================================================== */
@media (max-width:1599.98px) {
 .primary-hero-content h1 { font-size: 58px; line-height: 68px; }
 }
/* ========================================== 
! Large devices (desktops, less than 1200px)
=========================================== */
@media (max-width:1199.98px) {
 .primary-hero-content h1 { font-size: 58px; line-height: 68px; }
 }
/*==========================================
! Medium devices (tablets, less than 992px)
========================================== */
@media (max-width:991.98px) {
 }
/* =================================================  
! Small devices (landscape phones, less than 768px)
================================================= */
@media (max-width:767.98px) {
 .primary-hero-content h1 { font-size: 38px; line-height: 48px; }
 }
/* ======================================================
! Extra small devices (portrait phones, less than 576px)
====================================================== */
@media (max-width:575.98px) {
 }
