/*
 Theme Name:   Divi Child
 Theme URI:    http://cooldesign.co.za
 Description:  A Child Theme built for Divi
 Author:       Cool Design Digital Agency
 Author URI:   http://cooldesign.co.za
 Template:     Divi
 Version:      1
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/
/* =========================================================================================== 
  THE REFINERY
/* ===========================================================================================
/* GENERAL STYLING

/* LINK UNDERLINE ON HOVER
================================================================= */
.link-hover-underline a:hover {
	border-bottom: solid 2px;
}

/* VERTICALLY ALIGN A COLUMN - FROM DIVI SPACE
================================================================= */
.col-vertical-align { 
    display: flex; 
    flex-direction: column; 
    justify-content: center;
} 

/* OPENING HOURS STYLING
================================================================= */ 
.open-hours { display: flex; }

.oh-dots {
  flex-grow: 1;
  border-bottom: none;
  margin: 0 4px 4px;
}

/* PREVENT DIVI DISPLAY ALT-TEXT ON LIGHTBOX IMAGES
================================================================= */
.mfp-bottom-bar {
	display: none;
/*	visibility: hidden; */
}

/* BLURB - CLOSE GAP BETWEEN IMAGE AND HEADLINE
================================================================= */
.et_pb_blurb .et_pb_main_blurb_image {
	margin-bottom: -10px;
}

/* IMAGE ZOOM ON HOVER - FOR MANAGEMENT TEAAM PHOTOS
* ================================================================= */
/* constrain the overflow */
.image-zoom-1 {      
	overflow:hidden;     
	max-width:870px;
	max-height: 580px;
}
.image-zoom-1 img {
	transition: transform .8s cubic-bezier(.05,0.2,.1,1);	
	-moz-transition: transform .8s cubic-bezier(.05,0.2,.1,1);	
	-webkit-transition: transform .8s cubic-bezier(.05,0.2,.1,1);
}
  
.image-zoom-1 img:hover{
	transform:scale(1.10);
	-moz-transform: scale(1.10);
	-webkit-transform:scale(1.10);
}

/* TREATMENTS PAGE - SECTION TITLES
================================================================= */
.section-title:after {
	content: "";
	display: block;
	position: absolute;
	border-top: 8px solid;
/*	border-top-color:#000000; */
	border-top-color:#161616; 
	border-right: 5px solid transparent;
	border-left: 5px solid transparent;
/*	bottom: -5px; */
	left: 50%;
	width: 0;
	height: 0;
	margin-left: -5px; 
}

/* ===========================================================================================
/* GALLERY STYLING
/* ===========================================================================================
/* DISABLE DIVI GALLERY SLIDE IN EFFECT
================================================================= */
.et_pb_gallery_item {
	-webkit-animation: none !important;
	-moz-animation: none !important;
	-o-animation: none !important;
	-ms-animation: none !important;
	animation: none !important;
}

/* HIDE THE GALLERY TITLE ON SLIDE SHOWS TOO
================================================================= */
.et_pb_gallery_title, .mfp-gallery .mfp-title {
  	display: none;
}

/* MAKE CLOSE 'X' PERMANENTLY VISIBLE AND BIGGER ON LIGHTBOX IMAGES
================================================================== */
button.mfp-close	{
	opacity: 1 !important;
	color: white !important;
}
.mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close {
	font-size: 35px !important;
	line-height: 1em !important;
	font-weight: bold;	
}

/* DO THE SAME ON THE PRIVACY POLICY POPUP
------------------------------------------------------------------ */
.da-close	{
	background-color: #eee !important;
	font-size: 30px !important;
	margin-top: 10px;
	margin-right: 20px;
		padding: 4px;
	border: solid 1px #000;
	border-radius: 50%;
}

/* ===========================================================================================
   BULLET STYLES
/* ===========================================================================================
/* BULLET LIST WITH 10PX SPACE BETEEN BULLET ROWS (without affecting bullet line-height)
================================================================= */
/* For Desktops */
@media only screen and ( min-width: 1101px ) { 
	ul.spaced-list li {
		padding-bottom: 10px;
		padding-left: 5px;
	}
}

/* For Tablets and Phones */
@media only screen and ( max-width: 1100px ) { 
	ul.spaced-list li {
		padding-bottom: 30px;
		padding-left: 5px;		
	}
}

/* BULLET LIST WITH 5 PIXEL SPACE BETWEEN BULLET AND TEXT ON EACH ROW
================================================================= */
ul.padding-left-five li {
	padding-left: 5px;
}

/* SQUARE BLUE BULLET IMAGE
================================================================= */
.blue-bullet {
	list-style-image: url("/wp-content/uploads/2025/05/bullet-blue.png");
	padding-left: 10px;
}

/* SQUARE RED BULLET IMAGE
================================================================= */
.red-bullet {
	list-style-image: url("/wp-content/uploads/2025/05/bullet-red.png");
	padding-left: 10px;
}

/* ===========================================================================================
   BUTTON STYLES
/* ===========================================================================================
/* Scroll to Top button
================================================================= */
.et_pb_scroll_top.et-pb-icon {
	background: #2c3338; /* button red */
} 

/* ===========================================================================================
   BUTTON STYLES
/* ===========================================================================================
/* BROWN-GREY BUTTON
================================================================= */
.button-brown {
	background:#edeae7;
	border: solid 1px #cecac8;
	border-radius: 50px;
	text-align:center;
	color: #333;
	padding: 5px 50px 7px 50px !important;
	font-size: 15px !important;
	font-weight: bold !important;
	position: relative;
	cursor: pointer;
}

.button-brown:hover {
	background-color: #d6d2cf;
	text-decoration: none !important;
}

/* BLUE ROUNDED BUTTON
================================================================= */
.button-rounded-blue {
	background-color: #084c97; /* Header Blue */
	border: none;
	border-radius: 50px;
	box-shadow: none;
	color: #fff !important;
/*	font-size: 14px; */
	letter-spacing: 1px;
	font-weight: 600;
	cursor: pointer;
	padding: 6px 36px 8px 36px;
	width: auto;
}

.button-rounded-red:hover {
	background: #052882; /* darker blue */
	color: #fff;
	text-decoration: none !important;
}

/* RED FORM-CLOSE BUTTON
================================================================= */
.button-red {
	background-color: #ffffff; /* white */
	color: #c7172a;  /* wwx red */
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	border: solid 2px #c7172a;  /* wwx red */
	border-radius: 50px;
	cursor: pointer;
	padding: 20px 28px;
	width: auto;
}

.button-red:hover {
	background: #c7172a;  /* wwx red */
	color: #ffffff;
	text-decoration: none !important;
}

/* BUTTONS ALONGSIDE ONE ANOTHER
================================================================== */
.button-inline .et_pb_button_module_wrapper {
display: inline-block !important;
/* padding-bottom: 20px; */
margin: 0 10px 0 0;
}

/* ===========================================================================================
   HEADER STYLES
/* ===========================================================================================
/* Add a SHADOW below the main header
------------------------------------------------------- 
#main-header { 
	-webkit-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
	-moz-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
	box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24);
}

/* Add a SHADOW to the Fixed Header too
------------------------------------------------------- 
#main-header.et-fixed-header { 
	-webkit-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
	-moz-box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
	box-shadow: 0px 9px 20px 2px rgba(0,0,0,0.24)!important;
}


/* ===========================================================================================
   BOTH MENU STYLES 
/* ===========================================================================================
/* Switch to hamburger menu on tablets
------------------------------------------------------- 
@media only screen and (max-width:1024px) {
	#et_mobile_nav_menu {
		display: block;
	}
	#top-menu-nav {
		display: none;
	}
	.et_header_style_left .mobile_menu_bar {
		padding-bottom: 50px;
	}
}

/* ===========================================================================================
   MAIN MENU STYLES - REGULAR WORDPRESS TYPE (#TOP-MENU)
/* ===========================================================================================
/* Change the spacing between Menu, Logo and Bottom of the Header Bar
---------------------------------------------------------------------- 
.et_header_style_centered #main-header div#et-top-navigation {
	padding-top: 5px;
	bottom: 7px;
}

/* Position dropdown lower while keeping it connected 
#top-menu li ul {
	top: 100% !important;
	margin-top: 0px !important;
}

/* Make the top border of the dropdown thinner to match the animated underline */
#top-menu li ul {
	border-top: 2px solid #666 !important;
}
	
/* Increase sub-menu width - this is the sub-menu text width
------------------------------------------------------- */
#top-menu li li a {
	padding: 3px 20px; 
/*	width: 360px;   /* was 210px */
	width: 300px;
}

/* Sub-menu background width
------------------------------------------------------- */
.nav li ul  {
/*	width: 400px; */
	width: 300px;
}

/* ===========================================================================================
/* MOBILE MENU
==============================================================================================
/* MOBILE MENU - HANBURGER WHITE ON BLACK BACKGROUND
================================================================= */
.mobile_menu_bar:before {
	background-color: #084c97;   /*  header blue  */
	padding: 2px 2px 2px 2px;
	color: #fff!important;    /*  white  */
}

/* 'MENU' TEXT ALONGSIDE HAMBURGER - FOR MENU IN THEME BUILDER
================================================================= */
.et_mobile_nav_menu:before {
    content: 'MENU  ';
    font-size: 18px;
    position: float !important;
	padding-top: 4px;
	padding-right: 6px;
	/*    top: 4px;
    right: 40px; */
    color: #ffffff;
	font-weight: 600;
}

/* MOBILE HEADER - PAINT A 5-PIXEL WWX RED BORDER ABOVE
================================================================= */
@media all and (max-width: 1150px) {
	#main-header {
		border-top: 5px solid #ca242b !important; 
	}
}

/* =========================================================================================== */
/* BLOG CUSTOMISATION */

/* LEFT FEATURED BLOG THUMBNAIL ON INDEX PAGE
================================================================= */
@media only screen and ( min-width: 800px ) {
	.bbb-blog-list a img  {
    	float: left;
	    width: 35%;
	    padding-right: 20px;
	    vertical-align: bottom; 
	    padding-bottom: 30px;
	}
} 

/* LIFT HEADLINE UP ON DESKTOP INDEX PAGE - TABLET REMAINS NORMAL
================================================================= */
@media only screen and ( min-width: 800px ) {
	.bbb-blog-list .entry-title { 
		 margin-top: -25px;
	}
}

/* LIFT HEADLINE UP A SMALL AMOUNT ON PHONE INDEX PAGE & ADD SPACE BELOW
================================================================= */
@media only screen and ( max-width: 767px ) {
	.bbb-blog-list .entry-title { 
		 margin-top: -15px;
		margin-bottom: 10px;
	}
}


/* PAGINATION ON INDEX PAGE - MAKE BOLDER
================================================================= */
.pagination {
	font-weight: bold;
}

/* Change MORE link to a button
----------------------------------------------------------------- */
.bbb-blog-list a.more-link {
    clear: both;
    display: inline-block;
    position: relative;
    background: #084c97;  /* header blue  */
    font-size: 16px;
    color: #ffffff;
    max-width: 100%;
    padding: 5px 20px;
	border-radius: 50px;
    text-align: center;
    margin-top: 10px;
    text-transform: capitalize;
    letter-spacing: 1px;
}

.bbb-recent-news a.more-link  {
    clear: both;
    display: inline-block;
    position: relative;
    background: #084c97;  /* header blue  */
    font-size: 14px;
    color: #ffffff;
    max-width: 100%;
    padding: 5px 20px;
	border-radius: 50px;
    text-align: center;
    margin-top: 10px;
    text-transform: capitalize;
    letter-spacing: 1px;
	
}

.bbb-blog-list a.more-link:hover,
.bbb-recent-news a.more-link  {
	background-color: #052882; /* darker blue */
}

/* Vertically align blog title on INDEX page
----------------------------------------------------------------- */ 
.et_pb_post h2 a, .entry-title {
	vertical-align: top !important;
}

/* BOLD PREVIOUS POSTS WIDGET TITLE
================================================================= */
.widgettitle  {
	font-weight: bold;
}

/* PROVIDE A FIXED WIDTH CONTAINER FOR THE FIRST PHOTO IN A BLOG
================================================================= */
.blog-photo-container  {	
	padding: 0 20px 20px 0;
}

@media only screen and (min-width: 1149px) { 
	.blog-photo-container  {
		width: 520px;
		height: 320px;
		float: left;
	}
	
/* resize images */
	.blog-photo-container img {
    	width: 100%;
   		height: auto;
	}
} 


/* BLOG WP-PAGENAVI STYLING
================================================================= */
/* Center the pagination */
.wp-pagenavi { text-align:center; }

/* Add a border */
.wp-pagenavi span, .wp-pagenavi a, .wp-pagenavi :last-child { 
    border: 1px solid #bbb !important; 
    padding: 6px 12px; 
    margin: 0;  
}
.wp-pagenavi span, .wp-pagenavi a { border-right: none !important; }

/* Style the default text */
.wp-pagenavi span, .wp-pagenavi a { 
    font-weight: bold !important; 
	background-color: #f6f6f6 !important;
    color: #666 !important;   /* old color: #999  */
}

/* Style the current / hovered page link */
.wp-pagenavi span.current,
.wp-pagenavi a:hover { 
    color: #fff !important;  /* old color: #666  */
    background-color: #084c97 !important;  /* header blue  */
}

/* Style the page count text */
.wp-pagenavi :first-child { color: #666 !important; }

/* Add text to the "next" link */
.wp-pagenavi .nextpostslink:before { content: 'Next '; }
.wp-pagenavi .previouspostslink:after { content: ' Prev'; }

/* NEWS SIDEBAR WIDGET SPACING - SEARCH & 'SEE ALL NEWS ...' BUTTON
================================================================= */
#search-2 {
	margin-bottom: 30px;
	border: solid 1px #999;
}

#custom_html-2  {
	margin-bottom: 30px;
}

/* ===========================================================================================
   PRICE LIST STYLING
/* ===========================================================================================
/* Price list option 1
================================================================= */ 
#price-list ul{
	list-style:none;
	padding-left: 0;
	margin-left: 0;
}

#price-list li{
	line-height:1.4em;
	padding: 0px 0 0px 0;
/*	border-bottom:1px dotted #555555; */
  	overflow:hidden; 
}

#price-list li ln2{
	font-size: 13px;
	font-weight: 600;
}	

#price-list li prc{
	padding-left: 5px;
	float: right;
	font-size: 18px !important;
}

/* Price list option 2
================================================================= */ 
#price-list2 ul{
	list-style:none;
	padding-left: 0;
	margin-left: 0;
}

#price-list2 li{
	line-height:1.4em;
	padding: 0px 0 0px 0;
	border-bottom:1px dotted #555555; 
  	overflow:hidden; 
}

#price-list2 li ln2{
	font-size: 13px;
	font-weight: 600;
}	

#price-list2 li prc{
	padding-left: 5px;
	float: right;
	font-size: 18px !important;
}

/* ===========================================================================================
   GRAVITY FORMS CUSTOMISATION
/* ===========================================================================================
/* GRAVITY FORMS - FIELD STYLING
=================================================================
 User #gform_wrapper_1 for specific forms 
 User .gform_wrapper for all forms 
*/

body .gform_wrapper .gform_body .gform_fields .gfield input[type="text"],
body .gform_wrapper .gform_body .gform_fields .gfield input[type="email"], 
body .gform_wrapper .gform_body .gform_fields .gfield input[type="tel"], 
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	background: #ffffff;
	border: solid 1px #999999;
	border-radius: 0px;
	color: #000 !important;
	opacity: 1.0;
	font-weight: 500;
	padding: 10px 15px !important;
/*	box-shadow: 1px 1px 3px #d2d2d2; */
}

/* Make Placeholder text darker
----------------------------------------------------------------- */
body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder] {
  color: #000;
  font-weight: 400;
  opacity: 0.5; 
}

/* GRAVITY FORMS - 'SEND MESSAGE' BUTTON STYLING 
================================================================= 
body .gform_wrapper .gform_footer input[type=submit] { 
	width: 98.5%;
} 
*/

body .gform_wrapper .gform_footer input[type=submit] { 
/*	float: right; */
	color: #333; /* black text */
	background: #edeae7; /* button brown */
	border: solid 1px #cecac8;
	border-radius: 50px;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 1px;
/*	padding: 12px 23px; standard size button */
	padding: 5px 26px 8px 26px;
	cursor: pointer;
/*	height: 35px; 
	min-width: 150px; 
	-webkit-box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.34);
	-moz-box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.34);
	box-shadow: 0px 12px 18px -6px rgba(0,0,0,0.34);
*/	
	-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}

/* Change to a darker brown ON HOVER
----------------------------------------------------------------- */
body .gform_wrapper .gform_footer input:hover[type=submit] {
	background: #d6d2cf; /* darker brown */
}