/* Responsive Images CSS */

/* Base responsive image styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove any transition effects from images */
img, .company-img, .feature-img {
    transition: none !important;
    transform: none !important;
    animation: none !important;
    box-shadow: none !important;
}

/* Ensure images maintain quality on high-DPI screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Responsive image containers */
.image-container {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Ensure images in dark mode are properly visible */
.dark img:not(.company-img):not([class*="dark:filter"]) {
    filter: brightness(0.95);
}

/* Specific image sizes for different sections */
.hero-image img,
.section-image img {
    width: 100%;
    max-width: 628px;
    height: auto;
    object-fit: contain;
}

/* Ensure images in two-column layouts maintain proper sizing */
.two-column-image {
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: contain;
}

/* Image-Text Section Styles */
.image-text-section {
    display: flex;
    align-items: center;
    margin: 2rem 0;
}

/* Image container in image-text sections */
.image-text-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Images in image-text sections */
.image-text-container img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-width: 628px;
    max-height: 621px;
}

/* Ensure consistent vertical alignment */
.image-text-section .text-content,
.image-text-section .image-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

/* Adjust width proportions for better visual balance */
.image-text-section .text-content {
    width: 60% !important; /* Override the inline width */
    padding: 1.5rem 2rem;
}

.image-text-section .image-content {
    width: 40% !important; /* Override the inline width */
    padding: 1rem;
}

/* For RTL layouts, ensure proper spacing */
[dir="rtl"] .image-text-section .text-content {
    padding-right: 0;
    padding-left: 2rem;
}

/* Mobile-specific image adjustments */
@media (max-width: 768px) {
    .hero-image img,
    .section-image img,
    .image-text-container img {
        max-width: 100%;
    }

    .two-column-image {
        max-width: 100%;
    }

    /* Stack image and text on mobile */
    .image-text-section {
        flex-direction: column;
    }

    /* Ensure proper spacing on mobile */
    .image-text-section .text-content,
    .image-text-section .image-content {
        width: 100% !important; /* Override desktop widths */
        padding: 1rem 0;
    }

    /* Center image on mobile */
    .image-text-section .image-content {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 80%; /* Limit image width on mobile for better appearance */
        margin: 0 auto;
    }

    /* Ensure text is properly centered on mobile */
    .image-text-section .text-content {
        text-align: center;
    }

    /* Adjust button container on mobile */
    .image-text-section .text-content .flex {
        justify-content: center;
    }
}