/* Right Side Image Container */
.right-container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px; /* Padding for spacing */
}

/* Image Wrapper for Creating Gallery/Carousel Effect */
.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px; /* Smooth rounded edges for all images */
   /* box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Add depth with box-shadow */
    transition: transform 0.5s ease;
}

/* Large Image - Custom size and cutting design */
.large-image {
    width: 65%;  /* This image takes more space */
    height: 350px; /* Fixed height for large image */
    border-radius: 5px; /* Slightly more rounded edges */
    position: relative;
    overflow: hidden;
    /*box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); */
}

/* Small Image - Custom size and cutting design */
.small-image {
    width: 30%;  /* This image is smaller */
    height: 250px; /* Fixed height for small image */
    border-radius: 15px; /* Rounded edges for small image */
    position: relative;
    overflow: hidden;
}

/* Cutting Effect on Images: Diagonal cut for design */
.large-image .image-item {
    object-fit: cover;
    width: 100%;
    height: 100%;
    /* clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%); /* Diagonal cutting effect */
    transition: transform 0.5s ease;
}

/* Smaller Image with Circular Cut Effect */
.small-image .image-item {
    object-fit: cover;
    width: 100%;
    height: 100%;
   /* border-radius: 3% 43% 3% 3%; /* Circular border effect for the smaller image */
    transition: transform 0.5s ease;
}

/* Hover Effect for Image Wrappers */
.image-wrapper:hover {
    transform: scale(1.05); /* Slight zoom effect for both images */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Increased shadow on hover */
}

/* Hover Effect for Images */
.image-wrapper:hover .image-item {
    transform: scale(1.1);  /* Slight zoom-in effect on image */
}

/* Fade-In Effect when images appear */
.image-item {
    opacity: 1 !important; /* Ensure images stay visible after the fade-in */
    animation: fadeInEffect 1s ease-out; /* Smooth fade-in effect */
    visibility: visible; /* Ensure visibility after animation */
}

/* Keyframe for Fade-in Effect */
@keyframes fadeInEffect {
    from {
        opacity: 0;
        transform: translateY(50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
    .right-container {
        flex-direction: column;
        align-items: center;
    }

    /* Large image style for small screen */
    .large-image {
        width: 90%;
        height: auto;
    }

    /* Small image style for small screen */
    .small-image {
        width: 90%;
        height: 200px; /* Adjust height */
        margin-top: 20px; /* Add space between images */
    }

    /* Smooth transition on hover for mobile */
    .image-item {
        transition: transform 0.3s ease-in-out;
    }
}