/* 
 * Custom optimized CSS to replace image loading in owl carousel
 * This replaces the owl.video.play.png reference with a CSS-based play button
 */

/* Fix for owl carousel video play icon */
.owl-carousel .owl-video-play-icon {
    background: none !important;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    width: 80px;
    height: 80px;
    position: relative;
    z-index: 1;
}

.owl-carousel .owl-video-play-icon:before {
    content: '';
    border-style: solid;
    border-width: 15px 0 15px 25px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
}

/* Additional optimization for any background images that could be replaced with CSS */
.gradient-pink {
    background: #e1199e;
    background: linear-gradient(60deg, #e1199e 0%, #6a14d1 100%);
}

.gradient-pink-2 {
    background: #f77ffe;
    background: linear-gradient(90deg, #f77ffe 0%, #f73caa 100%);
}

.gradient-yellow {
    background: #ffa03e;
    background: linear-gradient(to left bottom, #ff8b3a, #ffa03e, #ffb445, #ffc750, #ffda5f);
}

.gradient-blue {
    background: #453bc6;
    background: linear-gradient(60deg, #453bc6 0%, #2d80fd 100%);
}

.gradient-blue-2 {
    background: #486afe;
    background: linear-gradient(-134deg, #486afe 0%, #66cdff 100%);
}

.gradient-blue-3 {
    background: #6691ff;
    background: linear-gradient(120deg, #6691ff 0%, #66d1ff 100%);
}

.gradient-blue-4 {
    background: #6384ff;
    background: linear-gradient(40deg, #6384ff 0%, #10f2df 100%);
}

/* Simplified CSS for preloader animation */
.sit-preview-preloader {
    background-color: #333333;
    position: relative;
    display: block;
}

.sit-preview-preloader:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}