/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme example child theme.
Author: Nick
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


/*================================================================
Remove the black outline when focus on links
=================================================================*/
a:focus {outline: 0 !important;}


/*================================================================
Fonts
=================================================================*/
@font-face {
    font-family: 'Built Titling Bold Italic';
    src: url('fonts/built-titling-bd-it.woff') format('woff'), /* Modern Browsers */
         url('fonts/built-titling-bd-it.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/built-titling-bd-it.svg#svgFontName') format('svg'); /* Legacy iOS */
}


/*================================================================
form
=================================================================*/
.cta-form > .elementor-widget-wrap {box-shadow: 0 0 16px 0 rgba(0,0,0,0.5);}


/*================================================================
menu
=================================================================*/
.menu-language a span {background:#E7547E; color:#fff; padding: 7px 9px 9px 9px; border-radius: 5px;}
.menu-language:hover a span {background:#D10D86;}


/*================================================================
form
=================================================================*/
.free-consultation-form .wpcf7 input[type=text],
.free-consultation-form .wpcf7 select,
.free-consultation-form .wpcf7 textarea {border:none; border-bottom:solid 1px #aaa; padding:5px;}

.free-consultation-form .wpcf7 input[type=submit] {background: #E7547E; transition: all .3s ease;} 
.free-consultation-form .wpcf7 input[type=submit]:hover {background: #D10D86;} 

.free-consultation-form .wpcf7 .enquiry-form > div:not(:last-child) {margin-bottom: 20px;}


/*================================================================
Pics
=================================================================*/
/*
.bg-masthead > .elementor-container { 
    mix-blend-mode: overlay;
    background-repeat: no-repeat;
    background-image:url(https://hexa.my/beta/skillstrooper/wp-content/uploads/2024/02/pic-header.png), url(https://hexa.my/beta/skillstrooper/wp-content/uploads/2024/02/icons-header-footer.svg); 
    background-position: bottom right;

}
.bg-masthead > .elementor-container > .elementor-column {mix-blend-mode: unset;}
*/

#masthead-pic1, #masthead-pic2, #footer-pic1, #footer-pic2,
#program-pic1, #program-pic1b,
#program-pic2, #program-pic2b,
#program-pic3, #program-pic3b,
#program-pic4, #program-pic4b {position: absolute; margin-bottom: 0;}

#masthead-pic1,
#program-pic1, 
#program-pic2, 
#program-pic3, 
#program-pic4 {mix-blend-mode: overlay;}

#masthead-pic1 {width: 35vw; right: 8vw; bottom: 0;}
#masthead-pic2 {width: 50vw; right: 0; bottom: 2vw;}
#footer-pic1 {mix-blend-mode: overlay; width: 41vw; left: 11vw; bottom: 0;}
#footer-pic2 {width: 47vw; left: 8vw; bottom: 2vw;}

#program-pic1, #program-pic1b,
#program-pic2, #program-pic2b,
#program-pic3, #program-pic3b,
#program-pic4, #program-pic4b {right:0; bottom: 0; }


#program-pic1 {width: 229px; right: -10px;}
#program-pic2 {width: 250px; right: 27px;}
#program-pic3 {width: 325px; right: 12px;}
#program-pic4 {width: 235px; right: 8px;}


@media screen and (max-width: 1023px){
    #masthead-pic1 {width: 41vw; right: 10vw; }
    #masthead-pic2 {width: 60vw; right: 0; }
    #footer-pic1 {width: 61vw; left: 21vw;}
    #footer-pic2 {width: 71vw; left: 14vw;}
    #program-pic1 {width: 196px; right: -10px;}
    #program-pic2 {width: 226px; right: -4px;}
    #program-pic3 {width: 281px; right: 2px;}
    #program-pic4 {width: 193px; right: 3px;}
}
@media screen and (max-width: 767px){
    #masthead-pic1 {width: 59vw; right: 5vw; }
    #masthead-pic2 {width: 87vw; right: -8vw; }
    #footer-pic1 {width: 61vw; left: 20vw;}
    #footer-pic2 {width: 71vw; left: 14vw;}
    #program-pic1 {width: 42vw; right: -1vw;}
    #program-pic2 {width: 45vw; right: 4vw;}
    #program-pic3 {width: 54vw; right: 3vw;}
    #program-pic4 {width: 39vw; right: 2vw;}
}



/*================================================================
slick - video slider
=================================================================*/
.slick-wrapper .slick-prev,
.slick-wrapper .slick-next { z-index: 5; width: 40px; height: 40px;} 
.slick-wrapper .slick-prev {left:-40px;}
.slick-wrapper .slick-next {right:-40px;} 
.slick-wrapper .slick-prev:before,
.slick-wrapper .slick-next:before {
    font-family: monospace;
    background: #E7547E;
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    border-radius: 3px;
    width: 40px;
    height: 40px;
}
.slick-wrapper .slick-prev:before {content: "<"; }
.slick-wrapper .slick-next:before {content: ">"; }
.slick-wrapper .slick-prev:hover:before,
.slick-wrapper .slick-next:hover:before {background: #D10D86;} 
@media screen and (max-width: 767px){
    .slick-wrapper .slick-prev,
    .slick-wrapper .slick-next { width: 30px; height: 30px;} 
    .slick-wrapper .slick-prev {left:-20px;}
    .slick-wrapper .slick-next {right:-20px;} 
    .slick-wrapper .slick-prev:before,
    .slick-wrapper .slick-next:before {width: 30px; height: 30px;}
}


/*================================================================
form validation error
=================================================================*/
.wpcf7-form .wpcf7-text.error {border: red solid 1px !important;}
.wpcf7-form label.error {background: #f8eeee; display: block; color: #b31212; padding: 2px 5px; font-size: 12px;}

/*================================================================
form disable before action url changed
=================================================================
.wpcf7-form {opacity: 0.3; pointer-events: none;} */