/* Process Section Image Styling */

.timeline-image {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    transition: all 0.4s ease;
    transform: perspective(1000px) rotateY(0deg);
}

.left-item .timeline-image {
    transform: perspective(1000px) rotateY(-3deg);
}

.right-item .timeline-image {
    transform: perspective(1000px) rotateY(3deg);
}

.timeline-image:hover {
    transform: perspective(1000px) rotateY(0deg) translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18);
}

/* Placeholder styling for the images */
.placeholder-image {
    width: 100%;
    height: 0;
    padding-bottom: 66.67%; /* 3:2 aspect ratio */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Specific images from the images folder */
.booking-image {
    background-image: url('../images/Simple Booking.jpg');
}

.strategy-image {
    background-image: url('../images/Tailored Strategy.jpg');
}

.support-image {
    background-image: url('../images/Continuous Support.jpg');
}

/* Responsive styles */
@media (max-width: 768px) {
    .timeline-image {
        margin-top: 20px;
    }
}