/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 31 2025 | 06:00:46 */
/*
  TITLE:
            KMP Elementor Video Background Controls 
  VERSION:  
            0.1.0
  CREATED:   
            Thursday, 31st July 2025, 8:43:09 am
  AUTHOR:  
            Kingsley Chimezie
            Founder and Lead Developer @ Kingsley Media Productions
  URL:    
            https://kingsley.ie
  REQUIRES:
            - Elementor with video background support
            - cUstom CSS & JS support in your theme or plugin

  Copyright © 2025 - Present, Kingsley Chimezie - Kingsley Media Productions (KMP). All Rights Reserved.
*/ 


.video-control-btn {
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    padding: 0; /* Remove any default padding */
    box-sizing: border-box; /* Ensure consistent sizing */
}

.video-control-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
    color: white; /* Keep icon white on hover */
}

.video-control-btn:active {
    transform: scale(0.95);
    background: rgba(0, 0, 0, 0.9); /* Keep background dark on click */
    color: white; /* Ensure icon stays white */
}

.video-control-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

.video-control-btn svg {
    pointer-events: none;
    display: block; /* Ensure proper alignment */
    margin: 0; /* Remove any margin */
}


/* END Positioning options for desktop - only uncomment one ****************************/

/* Top left */
/*
.video-bg-controls {
    right: auto;
    left: 20px;
}
*/

/* Top right */
.video-bg-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    gap: 10px;
}

/* Bottom left */
/*
.video-bg-controls {
    top: auto;
    bottom: 20px;
    right: auto;
    left: 20px;
}
*/

/* Bottom Center */
/*
.video-bg-controls {
    top: auto;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
}
*/

/* Bottom right */
/* 
.video-bg-controls {
    top: auto;
    bottom: 20px;
    right: 20px;
} 
*/

/* END Positioning options for desktop - only uncomment one ****************************/


/* Mobile responsive */
@media (max-width: 768px) {
    
    .video-control-btn {
        width: 45px;
        height: 45px;
    }
    
    .video-control-btn svg {
        width: 18px;
        height: 18px;
    }
	

    /* END Positioning options for desktop - only uncomment one ****************************/

    /* Top left */
    /*
    .video-bg-controls {
        right: auto;
        left: 20px;
    }
    */

    /* Top right */
    .video-bg-controls {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 10;
        display: flex;
        gap: 10px;
    }

    /* Bottom left */
    /*
    .video-bg-controls {
        top: auto;
        bottom: 20px;
        right: auto;
        left: 20px;
    }
    */

    /* Bottom Center */
    /*
    .video-bg-controls {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
    }
    */

    /* Bottom right */
    /* 
    .video-bg-controls {
        top: auto;
        bottom: 20px;
        right: 20px;
    } 
    */

    /* END Positioning options for desktop - only uncomment one ****************************/
}