/* Global Resets & Base Styles */
body {
    margin: 0;
    font-family: 'Poppins', sans-serif; /* Font from reference site */
    line-height: 1.6;
    color: #333;
    background-color: #fff;
}

/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');

.ewm-section {
    padding: 80px 0;
    overflow: hidden; /* Contain animations */
}

.ewm-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Section Header */
.ewm-section-header {
    text-align: center;
    margin-bottom: 50px;
}

.ewm-pre-title {
    color: #2E7D32; /* Green from image */
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ewm-main-title {
    color: #1E2022; /* Dark text */
    font-size: 2.8em; /* Adjust to match */
    font-weight: 700; /* Bold */
    line-height: 1.3;
    margin: 0;
}

/* Main Grid Layout */
.ewm-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns, adjust ratio if needed (e.g., 0.9fr 1.1fr) */
    gap: 40px; /* Gap between columns */
}

/* Left Column */
.ewm-left-column {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between image and text block */
}

.ewm-image-top-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.ewm-image-top-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 768 / 512; /* Maintain aspect ratio of provided image */
    object-fit: cover;
}

.ewm-left-text-content {
    padding-top: 10px; /* Small padding if needed */
}

.ewm-left-text-title-wrapper {
    position: relative;
    padding-left: 20px; /* Space for the orange border */
    margin-bottom: 15px;
}

.ewm-title-orange-border {
    position: absolute;
    left: 0;
    top: 5px; /* Adjust vertical alignment */
    bottom: 5px; /* Adjust vertical alignment */
    width: 5px; /* Thickness of the border */
    background-color: #F57C00; /* Orange color */
    border-radius: 3px;
}

.ewm-left-text-title-wrapper h3 {
    font-size: 1.6em; /* Adjust to match */
    font-weight: 700;
    color: #2E7D32;
    line-height: 1.4;
    margin: 0;
}

.ewm-left-description {
    color: #555D66;
    font-size: 0.95em;
    margin-bottom: 30px;
    line-height: 1.7;
}

.ewm-features-container {
    display: flex;
    gap: 25px; /* Space between feature items */
}

.ewm-feature-item {
    flex: 1; /* Distribute space equally */
}

.ewm-feature-icon {
    background-color: #2E7D32; /* Light green background for icon */
    color: #f1f1f1; /* Dark green icon color */
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    margin-bottom: 15px;
}

.ewm-feature-item h4 {
    font-size: 1.1em;
    font-weight: 700;
    color: #1E2022;
    margin-top: 0;
    margin-bottom: 8px;
}

.ewm-feature-item p {
    font-size: 0.85em;
    color: #555D66;
    margin: 0;
    line-height: 1.6;
}

/* Right Column */
.ewm-right-column {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Space between steps and bottom image */
}

.ewm-steps-container {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Space between step items */
}

.ewm-step-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Align text to top, number to top */
    padding-bottom: 20px; /* Space for underline */
    border-bottom: 1px solid #E0E0E0; /* Light gray underline */
}
.ewm-step-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ewm-step-text-content {
    flex-grow: 1;
}

.ewm-step-text-content h4 {
    font-size: 1.2em; /* Adjust to match */
    font-weight: 700;
    color: #1E2022;
    margin-top: 0;
    margin-bottom: 8px;
}

.ewm-step-text-content p {
    font-size: 0.9em;
    color: #555D66;
    margin: 0;
    line-height: 1.6;
    padding-right: 20px; /* Space before the number */
}

.ewm-step-number {
    font-size: 2.5em; /* Large number */
    font-weight: 700; /* Bold */
    color: #2E7D32; /* Green color */
    line-height: 1; /* Align better with text */
    margin-left: 20px; /* Space from text */
}

.ewm-image-bottom-wrapper {
    border-radius: 12px;
    overflow: hidden;
    position: relative; /* For the overlay card */
    background-image: url('https://kits.krakenbox.net/breno/wp-content/uploads/sites/12/2025/03/excavator-working-at-a-plastic-recycling-factory-QK3GJBH-768x512.jpg');
    background-size: cover;
    background-position: center;
    min-height: 280px; /* Adjust to fit content or desired height */
    display: flex; /* To help position overlay if needed */
    align-items: flex-end; /* Align overlay to bottom */
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    margin-top: 40px;
    min-height: 370px;
}

.ewm-image-overlay-card {
    background-color: #EF6C00; /* Orange overlay */
    color: white;
    padding: 20px 25px;
    width: 60%; /* Adjust width of overlay */
    margin-left: auto; /* Push to the right */
    margin-right: 0;
    margin-bottom: 20px; /* Position from bottom */
    margin-right: 20px; /* Position from right */
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* No right border radius based on image */
    position: absolute; /* More precise positioning */
    bottom: -20px;
    right: -20px; /* Stick to right edge of parent before margin */
    box-shadow: -5px 5px 15px rgba(0,0,0,0.2);
}

.ewm-image-overlay-card p {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    line-height: 2.5;
}


/* Animation Base & Trigger */
.anim-on-scroll {
    opacity: 0;
    transform: translateY(30px); /* Default starting position for fade-up */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.anim-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}


@media (max-width: 768px) {
    .ewm-section {
        padding: 40px 0;
    }
    .ewm-main-title {
        font-size: 2em; /* التصغير الذي قمت به سابقًا */
    }
    .ewm-main-grid {
        grid-template-columns: 1fr; /* Stack columns */
        gap: 30px; /* الفجوة الرأسية بين العمودين عند التكديس */
    }
    .ewm-right-column {
        margin-top: 0; /* إزالة الهامش العلوي عند التكديس لأنه يوجد gap */
    }
    .ewm-left-text-title-wrapper h3 {
        font-size: 1.3em;
    }
    .ewm-features-container {
        flex-direction: column; /* Stack feature items */
        gap: 20px;
    }
    .ewm-feature-item {
        text-align: center; /* توسيط محتوى الميزة */
    }
    .ewm-feature-icon {
        margin-left: auto;
        margin-right: auto;
    }
    .ewm-step-item {
        align-items: center; /* تحسين محاذاة الرقم مع النص للموبايل */
    }
    .ewm-step-text-content p {
        padding-right: 10px;
    }
    .ewm-step-number {
        font-size: 1.8em;
        margin-left: 10px;
    }
    .ewm-image-bottom-wrapper {
        min-height: 220px; /* تقليل الارتفاع الأدنى أكثر */
        margin-top: 20px;
        /* نجعل البطاقة تأخذ مساحة داخل حاوية الصورة بدلاً من التراكب المطلق */
        display: block; /* أو flex مع flex-direction: column إذا أردت تحكمًا أكبر */
        padding-bottom: 0; /* إذا كانت البطاقة ستكون جزءًا من التدفق */
    }
    .ewm-image-overlay-card {
        position: relative; /* العودة إلى التدفق الطبيعي */
        width: 180px; /* تأخذ العرض المتاح ناقص الهوامش */
        bottom: -83px;
        right: -190px;
        margin: 20px; /* هوامش حول البطاقة داخل حاوية الصورة */
        /* border-radius: 10px; */
        border-bottom-left-radius: 0;
        text-align: center; /* توسيط النص داخل البطاقة */
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
        font-size: 16px;
    }
    .ewm-image-overlay-card p {
        font-size: 15px; /* تصغير إضافي لخط البطاقة */
        line-height: 1.7;
    }
}