.parallax-embroidery {
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 🟢 lower min width for tiny screens */
    place-items: center;
    padding: 0 20px; /* 🟢 adds space on very small screens */
}

.parallax-bg {
    background: url('https://allstitchesrepair.com/img/IMG_0425.png') center/cover no-repeat;
    position: absolute;
    top: -20%;
    left: 0;
    width: 100%;
    height: 140%;
    z-index: 0;
    transform: translateZ(-1px) scale(1.3);
    filter: blur(6px) brightness(0.6);
}

.parallax-container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    padding: 20px;
}

.parallax-card {
    display: grid;
    grid-template-columns: 45% 55%; /* 🟢 replaces flex split */
    background: rgba(255,255,255,0.92);
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
    transform: translateY(40px);
    opacity: 0;
    animation: fadeUp 1.2s ease forwards;
    align-items: stretch; /* ensures even column heights */
}

/* === Image Side === */
.card-image {
    overflow: hidden;
}

    .card-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.1);
        transition: transform 0.6s ease;
    }

.parallax-card:hover .card-image img {
    transform: scale(1.2) rotate(-2deg);
}

/* === Content Side === */
.card-content {
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: slideIn 1.2s ease forwards 0.3s;
}

    .card-content h2 {
        font-size: 2.6rem;
        margin-bottom: 20px;
        color: #2B8A8A;
    }

    .card-content p {
        font-size: 1.2rem;
        line-height: 1.8;
        color: #333;
        margin-bottom: 30px;
    }



/* === Animations === */
@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(60px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ===========================
   📱 Responsive Design
   =========================== */

/* Tablet (below 792px) */
@media (max-width: 792px) {
    .parallax-embroidery {
        height: auto;
        padding: 60px 0;
    }

    .parallax-card {
        grid-template-columns: 1fr; /* 🟢 stack image + content */
        transform: none;
        animation: none;
        opacity: 1;
        box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    }

    .card-image {
        max-height: 360px;
    }

    .card-content {
        padding: 30px 40px;
        text-align: center;
        align-items: center;
    }

        .card-content h2 {
            font-size: 2.2rem;
        }

        .card-content p {
            font-size: 1rem;
            line-height: 1.6;
            max-width: 90%;
        }

 
}

/* Mobile (below 600px) */
@media (max-width: 600px) {
    .parallax-embroidery {
        height: auto;
        padding: 40px 0;
    }

    .parallax-bg {
        filter: blur(4px) brightness(0.55);
        transform: none;
    }

    .parallax-card {
        grid-template-columns: 1fr; /* stack content */
        /*max-width: 90%;*/ /* 🟢 ensures padding on tiny screens */
    }

    .card-image img {
        width: 100%;
        height: auto;
    }

    .card-content {
        padding: 20px;
        text-align: center;
        align-items: center;
    }

        .card-content h2 {
            font-size: 1.8rem;
            margin-bottom: 14px;
        }

        .card-content p {
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 24px;
        }

 
}
/* Responsive */
@media (max-width: 480px) {
    .card-content h2 {
        font-size: clamp(1.2rem, 6vw, 3.6rem) !important;
    }

    .card-content p {
        font-size: clamp(0.95rem, 5vw, 3.6rem);
    }
}