/**
 * Custom Elementor Widgets CSS
 * 
 * This file contains common styles for all custom widgets.
 * Widget-specific styles are now in separate files in the widgets/ directory.
 */

/* ==========================================
   COMMON WIDGET STYLES
   ========================================== */

/* Common animation classes */
.cew-animate-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: all 0.6s ease;
}

.cew-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Common hover effects */
.cew-image-hover {
    transform: scale(1.05);
}

.cew-btn-hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.cew-term-hover {
    opacity: 0.8;
    background-color: rgba(255, 0, 0, 0.2);
}

.cew-icon-hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* Common responsive utilities */
.cew-mobile-layout {
    /* Mobile-specific adjustments */
}

/* Common accessibility styles */
.cew-widget [role="button"] {
    cursor: pointer;
}

.cew-widget [role="img"] {
    display: inline-block;
}

/* Common container styles */
.cew-container {
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding: 0 15px; */
}

/* Common row and column layout */
.cew-row {
    display: flex;
    flex-wrap: wrap;
    /* margin: 0 -15px; */
}

.cew-col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
    /* padding: 0 15px; */
}

/* Common responsive breakpoints */
@media (max-width: 991px) {
    .cew-col-lg-6 {
        flex: 0 0 100%;
        max-width: 100%;
        /* margin-bottom: 30px; */
    }
}

@media (max-width: 767px) {
    .cew-container {
        /* padding: 0 10px; */
        padding: 0;
    }
}

@media (max-width: 575px) {
    .cew-container {
        /* padding: 0 5px; */
        padding: 0;
    }
}