/* ---------- MOBILE FIRST: Up to 768px ---------- */
@media (max-width: 768px) {
    .profile-img-container {
        height: 300px;
    }

    .mobilemargin {
        margin: 20px 0;
    }

    .mobile_hide {
        display: none;
    }

    .mobile_opacity_zero {
        opacity: 0;
    }

    .profile-name {
        font-size: 1.5rem;
    }

    .logo_group img {
        height: 50px !important;
    }

    .web_font_l {
        font-size: 0.8rem;
        line-height: 1;
    }

    .page-header,
    .contact-header,
    .profile-header,
    .registration-header,
    .cta-section {
        padding: 30px 0;
    }

    .hero-section {
        padding: 45px 0;
    }

    .section-title {
        font-size: 1.5rem;
    }
}

/* ---------- Extra small (phones <576px) ---------- */
@media (max-width: 575.98px) {
    .login-right {
        padding: 30px 20px;
    }

    .login-container {
        padding: 10px;
    }
}

/* ---------- Small to Medium (tablets <768px) ---------- */
@media (max-width: 767.98px) {
    .timeline::after {
        left: 31px;
    }

    .timeline-step {
        width: 100%;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-step::after {
        left: 21px;
    }

    .left,
    .right {
        left: 0;
        text-align: left;
    }

    .story-modal .couple-image {
        height: 200px;
    }
}

/* ---------- Medium devices (≥768px) ---------- */
@media (min-width: 768px) {
    .web_hide {
        display: none;
    }

    .web_center {
        margin: 0 auto;
    }

    .web_font_l {
        font-size: 1.3rem;
        line-height: 1.2;
    }
}

/* ---------- Medium to Large devices (≤992px) ---------- */
@media (max-width: 991.98px) {
    .filter-toggle {
        display: block;
    }

    .filter-sidebar {
        display: none;
    }

    .filter-sidebar.show {
        display: block;
    }

    .login-left {
        display: none;
    }

    .login-right {
        padding: 40px;
    }
}