/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media (max-width: 768px) {
    .logo-top {
        top: 20px;
        left: 10px;
        width: 200px;
    }

    .hero::after {
        left: 15px;
        top: 10%;
        width: 3px;
        height: 0%;
    }

    .hero::before {
        top: 26%;
        right: 9.5%;
    }

    .hero h1 {
        font-size: 2.5rem;
        font-weight: 700;
        transition: 0.4s ease;
    }

    .side-label {
        visibility: hidden;
    }

    .steps {
        right: 15px;
    }

    .subtitle {
        font-size: 1.5rem;
        margin-top: 0.5rem;
        margin-left: 9.5rem;
        transition: 0.4s ease;
    }

    .modal-watermark {
        position: absolute;
        left: 25%;
        top: 50%;
        width: 200px;
        transform: translateY(-50%);
        animation: rotateVertical 12s linear infinite;
        opacity: 0.15;
    }

    .layout {
        grid-template-columns: 1fr;
        background: linear-gradient(to bottom, #c8b1ac 0%, #d9d6d1 100%);
    }

    .image-side {
        display: none;
    }

    .content {
        position: relative;
        background-image: url("../img/Image-body.png");
        background-size: cover;
        background-position: center;
        overflow: hidden;
    }

    .content::before {
        content: "";
        position: absolute;
        inset: 0;
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        background: rgba(255, 255, 255, 0.05);
        z-index: 0;
    }

    .content > * {
        position: relative;
        z-index: 1;
    }

    .section {
        grid-template-columns: 1fr;
        padding: 80px 40px;
    }
}