.mockup-offer-modal {
        display: none;
        position: fixed;
        z-index: 999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        animation: fadeInMockup 0.3s ease-out;
        overflow-y: auto;
    }

    @keyframes fadeInMockup {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .mockup-offer-modal.show {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mockup-offer-modal-content {
        background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%);
        border-radius: 20px;
        width: 50%;
        max-width: 450px;
        min-width: 300px;
        max-height: 75vh;
        height: auto;
        overflow: hidden;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
        animation: slideUpMockup 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        position: relative;
    }

    @keyframes slideUpMockup {
        from {
            transform: translateY(40px) translateZ(0);
            opacity: 0;
        }

        to {
            transform: translateY(0) translateZ(0);
            opacity: 1;
        }
    }

    .mockup-offer-close {
        position: absolute;
        top: 15px;
        right: 15px;
        background: rgba(10, 219, 205, 0.15);
        border: none;
        font-size: 32px;
        color: #0ADBCD;
        cursor: pointer;
        padding: 0;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: all 200ms ease;
        z-index: 10;
    }

    .mockup-offer-close:hover {
        background: rgba(10, 219, 205, 0.25);
        transform: rotate(90deg);
    }

    .mockup-offer-image-container {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: linear-gradient(135deg, #0ADBCD 0%, #00a89e 100%);
    }

    .mockup-offer-image {
        width: 100%;
        height: auto;
        display: block;
        object-fit: cover;
    }

    .mockup-offer-content {
        text-align: center;
    }

    .mockup-offer-title {
        font-family: "Young Serif", serif;
        font-size: 28px;
        color: #1a1a1a;
        margin: 0;
        padding: 15px 20px;
        font-weight: 400;
        line-height: 1.4;
    }

    .mockup-offer-buttons {
        display: flex;
        gap: 0;
        flex-direction: row;
        width: 100%;
    }

    .mockup-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 16px;
        border: none;
        border-radius: 0;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 250ms ease;
        font-family: "Roboto", sans-serif;
        flex: 1;
        line-height: 1;
        white-space: nowrap;
    }

    .mockup-btn-icon {
        font-size: 13px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .mockup-btn-contact {
        background: linear-gradient(135deg, #0ADBCD 0%, #00a89e 100%);
        color: white;
    }

    .mockup-btn-contact:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(10, 219, 205, 0.3);
    }

    .mockup-btn-contact:active {
        transform: translateY(0);
    }

    .mockup-btn-whatsapp {
        background: linear-gradient(135deg, #25D366 0%, #20ba58 100%);
        color: white;
        border: 2px solid transparent;
    }

    .mockup-btn-whatsapp:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(37, 211, 102, 0.3);
    }

    .mockup-btn-whatsapp:active {
        transform: translateY(0);
    }

    /* Responsive Design */
    @media (max-width: 1200px) {
        .mockup-offer-modal-content {
            width: 55%;
            max-width: 420px;
        }
    }

    @media (max-width: 992px) {
        .mockup-offer-modal-content {
            width: 60%;
            max-width: 400px;
        }

        .mockup-offer-title {
            font-size: 24px;
            margin: 0;
            padding: 12px 18px;
        }

        .mockup-btn {
            padding: 8px 15px;
            font-size: 12px;
            line-height: 1;
        }

        .mockup-btn-icon {
            font-size: 12px;
        }
    }

    @media (max-width: 768px) {
        .mockup-offer-modal-content {
            width: 70%;
            max-width: 380px;
            min-width: 280px;
        }

        .mockup-offer-title {
            font-size: 22px;
            margin: 0;
            padding: 12px 16px;
        }

        .mockup-btn {
            padding: 8px 15px;
            font-size: 12px;
            line-height: 1;
        }

        .mockup-btn-icon {
            font-size: 12px;
        }

        .mockup-offer-close {
            top: 10px;
            right: 10px;
            width: 36px;
            height: 36px;
            font-size: 28px;
        }
    }

    @media (max-width: 600px) {
        .mockup-offer-modal-content {
            width: 85%;
            max-width: 100%;
            min-width: auto;
        }

        .mockup-offer-title {
            font-size: 20px;
            margin: 0;
            padding: 10px 14px;
        }

        .mockup-btn {
            padding: 7px 14px;
            font-size: 11px;
            line-height: 1;
        }

        .mockup-btn-icon {
            font-size: 11px;
        }
    }

    @media (max-width: 480px) {
        .mockup-offer-modal-content {
            width: 90%;
        }

        .mockup-offer-title {
            font-size: 18px;
            margin: 0;
            padding: 8px 12px;
        }

        .mockup-btn {
            padding: 6px 12px;
            font-size: 10px;
            line-height: 1;
        }

        .mockup-btn-icon {
            font-size: 10px;
        }
    }