/* feedbackexplanation.css - Unique styles for Feedback Explanation Page */
/* Shared styles are inherited from style.css and takeourieltstest.css */

/* Fix: Ensure step pill text is visible above images */
/*
.hero-steps-section .intro-step-pill {
    position: relative;
    z-index: 2;
}


.hero-steps-section .intro-step-image {
    position: relative;
    z-index: 1;
}
*/

/* Desktop: Reduce negative margin to prevent overlap */
@media (min-width: 1025px) {
    .hero-steps-section .intro-step-pill {
        margin-bottom: 10px;
        /* Override the -40px from base CSS */
    }
}

/* Point 4 unique column layout (Feedback Explanation) */
.helps-row.column-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;
    /* margin-bottom 40px removed - structural fix used instead */
}

.helps-text.full-width {
    width: 100%;
    max-width: 800px;
    margin: 60px auto 10px;
    /* Spacing text from images */
    text-align: center;
}

.feedback-images-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    /* Removed extra margin */
    margin-top: 100px;
    /* Requested spacing */
}

/* Stacked Image Logic */
.feedback-stack {
    position: relative;
    width: 600px;
    /* Reduced width to prevent overflow */
    height: 290px;
    /* Reduced height to remove dead space (was 350px) */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Custom Blurred Shadow */
.feedback-shadow {
    content: "";
    position: absolute;
    top: 210px;
    /* Fixed pixel value (was 60%) */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    /* Smaller width */
    height: 120px;
    /* Fixed pixel value (was 35% ~122px) */
    background: rgba(83, 60, 60, 0.46);
    filter: blur(22px);
    z-index: 0;
    border-radius: 0%;
    /* Oval shape */
}

.feedback-bg-img {
    position: absolute;
    width: 100%;
    max-width: 500px;
    /* Limit background width */
    height: auto;
    z-index: 1;
    left: 50%;
    top: 175px;
    /* Fixed pixel value (was 50%) */
    transform: translate(-50%, -50%);
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
    /* box-shadow removed */
}

.feedback-fg-img {
    position: absolute;
    width: 70%;
    /* Increased from 55% */
    max-width: 360px;
    /* Increased from 280px */
    height: auto;
    z-index: 2;
    top: 70px;
    /* Fixed pixel value (was 20%) */
    left: 50%;
    transform: translate(-50%, -50%);
    /* rotate(-5deg);*/
    /* Shadow removed */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .feedback-stack {
        width: 100%;
        height: 250px;
    }

    /* Mobile specific overrides to restore responsive behavior */
    .feedback-shadow {
        top: 75%;
        /* Restore % for mobile */
        height: 35%;
        /* Restore % for mobile */
    }

    .feedback-bg-img {
        max-width: 500px;
        top: 50%;
        /* Restore % for mobile */
    }

    .feedback-fg-img {
        width: 80%;
        /* Increased from 60% */
        max-width: 360px;
        /* Increased from 200px */
        top: 20%;
        /* Restore % for mobile (was 20%) */
    }
}