.hero-section {
    background: linear-gradient(
    rgba(13, 9, 28, 0.85),
    rgba(75, 234, 202, 0.85)
),
            url('../images/sporty-banner.png'); /* adjust path */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 100px 0;
}
/* Apply hero height only on tablets and desktops */
@media (min-width: 768px) {
    .hero-section {
        min-height: 90vh;
    }
}



/* Section 2 */
.protocol-dark-section {
    background-color: #0D091C;
}

.text-accent {
    color: #4BEACA;
}

.feature-box {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(75, 234, 202, 0.15);
    transition: all 0.3s ease;
}

.feature-box:hover {
    background: rgba(75, 234, 202, 0.05);
    border-color: #4BEACA;
}

.protocol-visual {
    background: rgba(75, 234, 202, 0.05);
    border: 1px solid rgba(75, 234, 202, 0.15);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.protocol-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.4s ease;
}

/* subtle interaction */
.protocol-image:hover {
    transform: scale(1.03);
}
/* Pricng Card Of Passport */
.protocol-price{
    background: linear-gradient(
        135deg,
        rgba(75,234,202,0.08),
        rgba(75,234,202,0.02)
    );
    border:1px solid rgba(75,234,202,0.2);
    backdrop-filter: blur(6px);
}

.protocol-price h3{
    font-size:2rem;
}

.btn-accent{
    background:#4BEACA;
    color:#0A2B60;
    font-weight:600;
    border-radius:8px;
    padding:10px 22px;
}

.btn-accent:hover{
    background:#3dd6b6;
    color:#0A2B60;
}
/* Section 3 */
.protocol-light-section {
    background-color: #4BEACA;
}

.step-card {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(13, 9, 28, 0.15);
}

.step-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0D091C;
    letter-spacing: 2px;
}
/* Section 4 */
.protocol-value-section {
    background-color: #0D091C;
}

.text-accent {
    color: #4BEACA;
}

.value-icon {
    width: 12px;
    height: 12px;
    background-color: #4BEACA;
    border-radius: 50%;
    margin-top: 6px;
}

.highlight-box {
    background: rgba(75, 234, 202, 0.05);
    border: 1px solid rgba(75, 234, 202, 0.15);
}