<style>
    /* MAIN CONTAINER - Grid and overall size scaled down by 50% */
    .khoubourat-achievements-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 10px; /* Halved from 20px */
        max-width: 400px; /* Halved from 800px */
        margin: 10px auto;
        font-family: 'Open Sans', sans-serif;
        color: #333;
    }

    /* INDIVIDUAL BOXES - Padding, borders, and minimum height halved */
    .khoubourat-box {
        background-color: #fff;
        border: 1px solid #016075; /* Halved from 2px */
        border-radius: 4px; /* Halved from 8px */
        padding: 15px; /* Halved from 30px */
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        box-shadow: 0 2px 3px rgba(0,0,0,0.1); /* Slightly softer shadow for smaller box */
        min-height: 100px; /* Halved from 200px */
    }

    /* TITLE TEXT STYLE - Font size halved */
    .khoubourat-box-title {
        font-size: 0.6rem; /* Halved from 1.2rem */
        font-weight: 700;
        margin-top: 8px;
        margin-bottom: 5px;
    }

    /* SUBTITLE/DESCRIPTION STYLE - Font size halved */
    .khoubourat-box-subtitle {
        font-size: 0.45rem; /* Halved from 0.9rem */
        color: #666;
        margin-bottom: 10px;
    }

    /* BIG NUMBERS STYLE - Font size halved */
    .khoubourat-number {
        font-size: 1.5rem; /* Halved from 3rem */
        font-weight: 800;
        color: #016075; 
        margin: 0;
        line-height: 1;
    }

    /* SPECIFIC STYLING FOR THE LOCATIONS LIST */
    .khoubourat-locations-list {
        list-style-type: none;
        padding: 0;
        margin: 0;
        width: 100%;
        font-size: 0.45rem; /* Halved from 0.95rem */
    }

    .khoubourat-locations-list li {
        margin-bottom: 3px;
    }

    /* ICON STYLE - Size halved and updated for easy image swapping */
    .khoubourat-icon {
        width: 30px; /* Halved from 60px */
        height: 30px; /* Halved from 60px */
        object-fit: contain; /* Ensures your custom uploaded images fit perfectly */
    }

    /* Mobile Responsiveness - Stacks to a single column on very small screens */
    @media (max-width: 400px) {
        .khoubourat-achievements-container {
            grid-template-columns: 1fr;
            grid-template-rows: repeat(4, 1fr);
        }
    }
</style>

<div class="khoubourat-achievements-container">
    
    <!-- Box 1: Career Guidance -->
    <div class="khoubourat-box">
        <!-- TO CHANGE ICON: Replace the URL inside src="..." below -->
        <img class="khoubourat-icon" src="https://img.icons8.com/ios-filled/50/016075/compass.png" alt="Guidance Icon">
        
        <div class="khoubourat-box-title">Career Guidance</div>
        <p class="khoubourat-number">768</p>
    </div>

    <!-- Box 2: Training Attendees -->
    <div class="khoubourat-box">
        <!-- TO CHANGE ICON: Replace the URL inside src="..." below -->
        <img class="khoubourat-icon" src="https://img.icons8.com/ios-filled/50/016075/conference-background-selected.png" alt="Training Icon">
        
        <div class="khoubourat-box-title">Training Attendees</div>
        <p class="khoubourat-number">606</p>
    </div>

    <!-- Box 3: Job Placements -->
    <div class="khoubourat-box">
        <!-- TO CHANGE ICON: Replace the URL inside src="..." below -->
        <img class="khoubourat-icon" src="https://img.icons8.com/ios-filled/50/016075/portfolio.png" alt="Jobs Icon">
        
        <div class="khoubourat-box-title">Job Placements</div>
        <ul class="khoubourat-locations-list">
            <li><strong>Beirut:</strong> 311</li>
            <li><strong>Tripoli:</strong> 194</li>
            <li><strong>Bekaa:</strong> 59</li>
            <li><strong>Saida:</strong> 120</li>
        </ul>
    </div>

    <!-- Box 4: CV Database -->
    <div class="khoubourat-box">
        <!-- TO CHANGE ICON: Replace the URL inside src="..." below -->
        <img class="khoubourat-icon" src="https://img.icons8.com/ios-filled/50/016075/resume.png" alt="CV Icon">
        
        <div class="khoubourat-box-title">CV Database</div>
        <p class="khoubourat-box-subtitle">(on recruitment website)</p>
        <p class="khoubourat-number">4,500</p>
    </div>
</div>