/* Features Section 2 - Tailwind Responsive Image Layout */
.features-section-2 {
    @apply p-0 overflow-hidden;
    background-color: #F9F8EF;
}

.features-section-2-container {
    @apply max-w-full mx-auto p-0 flex items-stretch h-auto;
}

/* Desktop - Left Image */
.features-section-2-left {
    @apply flex-1 flex items-center justify-start;
    min-height: 575px;
}

.features-left-image {
    @apply block object-cover transition-transform duration-300;
    width: 400px;
    height: 575px;
}

/* Desktop - Right Image */
.features-section-2-right {
    @apply flex-1 flex items-center justify-end;
    min-height: 575px;
}

.features-right-image {
    @apply block object-cover transition-transform duration-300;
    width: 400px;
    height: 575px;
}

/* Tablet Styles (1024px and below) */
@media (max-width: 1024px) {
    .features-section-2-left,
    .features-section-2-right {
        min-height: 450px;
    }
    
    .features-left-image,
    .features-right-image {
        width: 320px;
        height: 450px;
    }
}

/* Small Tablet Styles (768px and below) */
@media (max-width: 768px) {
    .features-section-2-container {
        @apply flex-col;
    }
    
    .features-section-2-left,
    .features-section-2-right {
        @apply w-full flex justify-center p-5;
        min-height: auto;
    }
    
    .features-left-image,
    .features-right-image {
        width: 280px;
        height: 350px;
    }
}

/* Mobile Styles (480px and below) - Rotated Images */
@media (max-width: 480px) {
    .features-section-2 {
        @apply py-5;
        background-color: #F9F8EF;
    }
    
    .features-section-2-container {
        @apply flex-col p-0 gap-5;
    }
    
    /* Left image at top - rotated 90 degrees clockwise */
    .features-section-2-left {
        @apply w-full flex justify-center items-center overflow-hidden;
        order: 1;
        height: 200px;
    }
    
    .features-left-image {
        @apply object-cover;
        width: 100%;
        max-width: 100%;
        height: 200px;
        transform: rotate(90deg) scale(1.2);
        transform-origin: center center;
    }
    
    /* Right image at bottom - rotated 90 degrees clockwise */
    .features-section-2-right {
        @apply w-full flex justify-center items-center overflow-hidden;
        order: 2;
        height: 200px;
    }
    
    .features-right-image {
        @apply object-cover;
        width: 100%;
        max-width: 100%;
        height: 200px;
        transform: rotate(90deg) scale(1.2);
        transform-origin: center center;
    }
}