/*======================================
Theme Name: OUTBOXED THEME
Description: A Divi child theme created by the folks at Outboxed Digital Marketing Solutions. Visit us on https://outbox.co.za/
Version: 2024.0313
Author: OUTBOXED
Author URI: https://outbox.co.za/
Template: Divi
======================================*/


/* You can add your own CSS styles here. Use !important to overwrite styles if needed. */


/* 
Hide ReCaptcha badge
Ad text from https://stackoverflow.com/questions/44543157/how-to-hide-the-google-invisible-recaptcha-badge
 */

.grecaptcha-badge { 
    visibility: hidden !important;
}

/* scrollbar formatting */

::-webkit-scrollbar {
  width: 15px;
  height: 0px;
}
::-webkit-scrollbar-button {
	background: #ffffff;
	width: 0px;
  height: 0px;
}

::-webkit-scrollbar-button:hover {
	background: #ffffff;
}

::-webkit-scrollbar-button:active {
	background: #ffffff;
}

::-webkit-scrollbar-thumb {
  background: #4D4D4D;
  border: 5px solid #ffffff;
  border-radius: 50px;
}
::-webkit-scrollbar-thumb:hover {
  background: #4D4D4D;
}
::-webkit-scrollbar-thumb:active {
  background: #4D4D4D;
}
::-webkit-scrollbar-track {
  background: #ffffff;
  border: 5px solid #ffffff;
  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #ffffff;
}
::-webkit-scrollbar-track:active {
  background: #ffffff;
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* Blur menu bar */

#main-header, #top-header, #main-header .sub-menu {
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}

/* Stop heading words from breaking on mobile */
h1, h2, h3, h4, h5, h6, .nobreakwords {
    overflow-wrap: normal!important;
}

/* Style back to top */
.et_pb_scroll_top.et-pb-icon {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.3s;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

.et_pb_scroll_top.et-pb-icon:hover {
    color: #000000;
    background: rgba(255, 255, 255, 0.5);
}

.et_pb_scroll_top:before {
content: "6";
}

/* floating fun, sourced from https://www.geeksforgeeks.org/css-floating-animation/ */

.floating { 
    animation-name: floating;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;

}
 
@keyframes floating {
    0% { transform: translate(0,  0px); }
    50%  { transform: translate(0, 15px); }
    100%   { transform: translate(0, -0px); }   
}

/* Change open mobile hamburger to an X */

.mobile_nav.opened .mobile_menu_bar:before {
    content: "\4d";
}