.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 15px; /* optional rounded corners */
}

.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video {
    position: relative;
    height: 90vh;
    overflow: hidden;
}
.hero-video-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 0;
}
.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}
.hero-video .container {
    position: relative;
    z-index: 2;
}
/* Hero typography */
.hero-title{
    font-weight: 900;                 /* very bold */
    line-height: 1.05;
    letter-spacing: .02em;
    /* Responsive size: min 2.5rem, scales with viewport, caps at 5.5rem */
    font-size: clamp(2.5rem, 4vw + 1rem, 5.5rem);
}
.hero-subtitle{
    color: rgba(255,255,255,.95);
    font-weight: 700;                 /* bold */
    line-height: 1.35;
    /* Responsive size: min 1.125rem, scales, caps at 2rem */
    font-size: clamp(1.125rem, 1.25vw + 1rem, 2rem);
}

/* optional: subtle glow to improve readability on bright footage */
.hero-title, .hero-subtitle{
    text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.text-color { color: #31e65b; }
.btn-main {
    background: #31e65b;
    color: #111;
    border: none;
    padding: .75rem 1.25rem;
    font-weight: 600;
}
.btn-main:hover { background: #28c94d; color: #fff; }

/* Flip card core */
.flip-card {
    perspective: 1000px;              /* enables 3D feel */
    height: 100%;
}
.flip-card-inner {
    position: relative;
    width: 100%;
    min-height: 340px;                /* set a height for both sides */
    transition: transform .6s ease;
    transform-style: preserve-3d;
    border-radius: .75rem;            /* match your card rounding */
}
.flip-card:hover .flip-card-inner,
.flip-card.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: .75rem;
    overflow: hidden;
}

/* Front inherits your .card styling */
.flip-card-front {
    z-index: 2;
}

/* Back shows image */
.flip-card-back {
    transform: rotateY(180deg);
    display: flex;
    align-items: stretch;
    background: #000;
}
.flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Optional: keep the link clickable without flipping on click */
.flip-card-front a { position: relative; z-index: 3; }