.worker4-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px; /* Space between image and text */
    margin: 50px 0;
    padding: 20px;
    position: relative; /* Enables precise positioning */
}

.image4-container {
    position: relative; /* For layering the overlay image on top of the background image */
    width: 45%; /* Adjust as needed */
    height: auto; /* Maintain proportions */
    overflow: hidden; /* Prevent images from spilling out */
    border-color: white;
    left: 50%;
}

.background4-image {
    width: 100%; /* Ensure it fills the container */
    height: 100%; /* Maintain aspect ratio */
    object-fit: cover; /* Ensures proper scaling of the image */
    opacity: 0.8; /* Optional: Makes the overlay stand out more */
    border-radius: 50px;
    z-index: 0;
    object-fit: cover;
    transform: scale(1.5);
}

.overlay4-image {
    position: absolute;
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Precisely center */
    width: 80%; /* Adjust size of the overlay */
    height: 500px;
    border: 2px solid #FFFFFF;
    z-index: 2;
    object-fit: cover;
}

.name4-container {
    position: absolute;
    top: 20%; /* Adjust to position the name on the background */
    left: 30%; /* Position slightly inward */
    background-color: white;
    padding: 10px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add depth */
    font-size: 24px;
    font-weight: 400;
    color: #FF6F61; /* Highlighted color */
    z-index: 10; /* Ensure the name is above everything */
}

.description4-container {
    position: relative;
    flex: 1; /* Take up remaining space */
    padding: 20px;
    background-color: #D3E0CD; /* Light green background */
    z-index: 1;
    right: 40%;
}

.description4-container p {
    padding-right: 20%;
    padding-top: 30%;
    padding-bottom: 10%;
    margin: 0;
    font-size: 18px;
    color: #333;
    line-height: 1.6;
    z-index: 4;
    top: 20%;
}

.worker4-section {
    width: 100%;
    background-image: url('/slike/krugovifinalabd.png');
    padding: 55px;
}
@media (min-width: 200px) and (max-width: 499px){
    .image4-container {
        position: relative; /* For layering the overlay image on top of the background image */
        width: 40%; /* Adjust as needed */
        height: auto; /* Maintain proportions */
        overflow: hidden; /* Prevent images from spilling out */
        border-color: white;
        left: 15%;
    }
    
    .background4-image {
        width: 100%; /* Ensure it fills the container */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Ensures proper scaling of the image */
        opacity: 0.8; /* Optional: Makes the overlay stand out more */
        border-radius: 50px;
        z-index: 0;
        object-fit: cover;
        transform: scale(1.5);
    }
    
    .overlay4-image {
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Precisely center */
        width: 85%; /* Adjust size of the overlay */
        height: 100px;
        border: 2px solid #FFFFFF;
        z-index: 2;
        object-fit: cover;
    }
    
    .name4-container {
        position: absolute;
        top: 20%; /* Adjust to position the name on the background */
        left: 45%; /* Position slightly inward */
        background-color: white;
        padding: 10px 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add depth */
        font-size: 4px;
        font-weight: 400;
        color: #FF6F61; /* Highlighted color */
        z-index: 10; /* Ensure the name is above everything */
        width: 40%;
        height: auto;
    }
    
    .description4-container {
        flex: 1; /* Take up remaining space */
        
        background-color: #D3E0CD; /* Light green background */
        z-index: 1;
        left: 1%;
    }
    
    .description4-container p {

        margin: 0;
        font-size: 4px;
        color: #333;
        line-height: 1.6;
        z-index: 4;
    }
}
@media (min-width: 500px) and (max-width: 767px){
    .image4-container {
        position: relative; /* For layering the overlay image on top of the background image */
        width: 40%; /* Adjust as needed */
        height: auto; /* Maintain proportions */
        overflow: hidden; /* Prevent images from spilling out */
        border-color: white;
        left: 15%;
    }
    
    .background4-image {
        width: 100%; /* Ensure it fills the container */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Ensures proper scaling of the image */
        opacity: 0.8; /* Optional: Makes the overlay stand out more */
        border-radius: 50px;
        z-index: 0;
        object-fit: cover;
        transform: scale(1.5);
    }
    
    .overlay4-image {
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Precisely center */
        width: 85%; /* Adjust size of the overlay */
        height: 150px;
        border: 2px solid #FFFFFF;
        z-index: 2;
        object-fit: cover;
    }
    
    .name4-container {
        position: absolute;
        top: 20%; /* Adjust to position the name on the background */
        left: 45%; /* Position slightly inward */
        background-color: white;
        padding: 10px 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add depth */
        font-size: 10px;
        font-weight: 400;
        color: #FF6F61; /* Highlighted color */
        z-index: 10; /* Ensure the name is above everything */
        width: 35%;
        height: auto;
    }
    
    .description4-container {
        flex: 1; /* Take up remaining space */
        
        background-color: #D3E0CD; /* Light green background */
        z-index: 1;
        left: 10%;
    }
    
    .description4-container p {

        margin: 0;
        font-size: 6px;
        color: #333;
        line-height: 1.6;
        z-index: 4;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .image4-container {
        position: relative; /* For layering the overlay image on top of the background image */
        width: 40%; /* Adjust as needed */
        height: auto; /* Maintain proportions */
        overflow: hidden; /* Prevent images from spilling out */
        border-color: white;
        left: 15%;
    }
    
    .background4-image {
        width: 100%; /* Ensure it fills the container */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Ensures proper scaling of the image */
        opacity: 0.8; /* Optional: Makes the overlay stand out more */
        border-radius: 50px;
        z-index: 0;
        object-fit: cover;
        transform: scale(1.5);
    }
    
    .overlay4-image {
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Precisely center */
        width: 65%; /* Adjust size of the overlay */
        height: 200px;
        border: 2px solid #FFFFFF;
        z-index: 2;
        object-fit: cover;
    }
    
    .name4-container {
        position: absolute;
        top: 15%; /* Adjust to position the name on the background */
        left: 50%; /* Position slightly inward */
        background-color: white;
        padding: 10px 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add depth */
        font-size: 14px;
        font-weight: 400;
        color: #FF6F61; /* Highlighted color */
        z-index: 10; /* Ensure the name is above everything */
        width: 30%;
        height: auto;
    }
    
    .description4-container {
        flex: 1; /* Take up remaining space */
        padding: 20px;
        background-color: #D3E0CD; /* Light green background */
        z-index: 1;
        left: 10%;
    }
    
    .description4-container p {
        padding-top: 35%;
        padding-left: 20%;
        padding-bottom: 10%;
        margin: 0;
        font-size: 14px;
        color: #333;
        line-height: 1.6;
        z-index: 4;
    }
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px) {
    .image4-container {
        position: relative; /* For layering the overlay image on top of the background image */
        width: 45%; /* Adjust as needed */
        height: auto; /* Maintain proportions */
        overflow: hidden; /* Prevent images from spilling out */
        border-color: white;
        left: 15%;
    }
    
    .background4-image {
        width: 100%; /* Ensure it fills the container */
        height: 100%; /* Maintain aspect ratio */
        object-fit: cover; /* Ensures proper scaling of the image */
        opacity: 0.8; /* Optional: Makes the overlay stand out more */
        border-radius: 50px;
        z-index: 0;
        object-fit: cover;
        transform: scale(1.5);
    }
    
    .overlay4-image {
        position: absolute;
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Precisely center */
        width: 70%; /* Adjust size of the overlay */
        height: 350px;
        border: 2px solid #FFFFFF;
        z-index: 2;
        object-fit: cover;
    }
    
    .name4-container {
        position: absolute;
        top: 20%; /* Adjust to position the name on the background */
        left: 50%; /* Position slightly inward */
        background-color: white;
        padding: 10px 15px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add depth */
        font-size: 22px;
        font-weight: 400;
        color: #FF6F61; /* Highlighted color */
        z-index: 10; /* Ensure the name is above everything */
    }
    
    .description4-container {
        flex: 1; /* Take up remaining space */
        padding: 20px;
        background-color: #D3E0CD; /* Light green background */
        z-index: 1;
        left: 10%;
    }
    
    .description4-container p {
        padding-top: 35%;
        padding-left: 20%;
        padding-bottom: 10%;
        margin: 0;
        font-size: 16px;
        color: #333;
        line-height: 1.6;
        z-index: 4;
    }
}