/* "14 years of experience" + video section (front.components.experience-video-section).
   Moved to right after the hero on the homepage so this trust/experience
   story is the first thing visitors see after the slider. Light "statement"
   section (giant navy/green numeral + bold caption) — kept light rather than
   a full navy background so it doesn't collide with the navy Memberships
   section immediately below it. */
.marinex-experience-section {
    position: relative;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 100px;
    background: #f8fafc;
}
@media (max-width: 767.98px) {
    .marinex-experience-section {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}

/* Large "///" watermark bleeding off the section corner, rendered as a soft
   dark tint (brightness(0) + low opacity) since the section background is
   light — matches the .marinex-watermark--light convention used elsewhere. */
.marinex-experience-section::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 420px;
    height: calc(420px * 97 / 300);
    background-image: url('/storage/images/white-logo-pattern.webp');
    background-repeat: no-repeat;
    background-size: contain;
    filter: brightness(0);
    opacity: 0.05;
    transform: rotate(10deg);
    pointer-events: none;
}

/* ---- Giant stat treatment (replaces the plain h2 fallback heading) ---- */
.marinex-experience-stat {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 18px;
}
.marinex-experience-stat-number {
    font-size: 120px;
    font-weight: 800;
    line-height: 0.85;
    color: #0f3450;
    letter-spacing: -2px;
}
.marinex-experience-stat-label {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #00772d;
    padding-bottom: 10px;
}
@media (max-width: 767.98px) {
    .marinex-experience-stat-number {
        font-size: 76px;
    }
    .marinex-experience-stat-label {
        font-size: 15px;
        padding-bottom: 4px;
    }
}
.marinex-experience-text {
    color: #475569;
    font-size: 16px;
    line-height: 1.65;
}

.marinex-experience-video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    overflow: hidden;
    background: #0f3450;
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.marinex-experience-video-wrapper iframe,
.marinex-experience-video-wrapper video.marinex-experience-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    background: #000;
}

.marinex-experience-video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, #123a5c 0%, #00a1e4 160%);
    overflow: hidden;
}

.marinex-experience-play-btn {
    position: relative;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}
.marinex-experience-video-wrapper:hover .marinex-experience-play-btn {
    transform: scale(1.06);
}
.marinex-experience-play-btn svg {
    margin-left: 4px; /* optical centering of the triangle */
}

.marinex-experience-soon-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #ffffff;
}
.marinex-experience-soon-badge .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #00a1e4;
}