/*
Theme Name: Avily Default Child
Theme URI: https://www.avily.co.za/
Template: Divi
Author: Avily Team
Author URI: https://www.avily.co.za/about
Description: Smart. Flexible. Beautiful. Divi is the most powerful theme in our collection.
Version: 4.27.4.1737360752
Updated: 2025-01-20 08:12:32

*/ 

 
/*contact form styling*/  

.hf-button { 
    color: #666666 !important;
    border-width: 0 !important;
    border-radius: 50px;
    font-size: 17px;
	text-transform:uppercase;
    padding: 12px 25px;
    background-color: white !important;
	float:right;
}
.cf-button{ 
    color: white !important;
    border-width: 0 !important;
    border-radius: 50px;
    font-size: 17px;
	text-transform:uppercase;
    padding: 12px 25px;
    background-color: #0077a3 !important;
	float:right;
}
.main-cf input[type=email], .main-cf input[type=tel], .main-cf input[type=text], .main-cf textarea, .home-form input[type=email], .home-form input[type=tel], .home-form input[type=text], .home-form textarea {
    background-color: #fff;
    border: 1px solid #bbb;
    border-radius: 15px;
    padding: 14px 15px;
    color: #999999;
	width:100%;
}

/*change hamburger icon to x when mobile menu is open*/

#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before,
.et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
	content: '\4d';
}


/*adjust the new toggle element which is added via jQuery*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
ul.et_mobile_menu li.page_item_has_children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.page_item_has_children .mobile-toggle {
	width: 44px;
	height: 100%;
	padding: 0px !important;
	max-height: 44px;
	border: none;
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 999;
	background-color: transparent;
}


/*some code to keep everyting positioned properly*/

ul.et_mobile_menu>li.menu-item-has-children,
ul.et_mobile_menu>li.page_item_has_children,
ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.page_item_has_children,
.et-db #et-boc .et-l ul.et_mobile_menu>li.menu-item-has-children .sub-menu li.menu-item-has-children {
	position: relative;
}


/*remove default background color from menu items that have children*/

.et_mobile_menu .menu-item-has-children>a,
.et-db #et-boc .et-l .et_mobile_menu .menu-item-has-children>a {
	background-color: transparent;
}


/*hide the submenu by default*/

ul.et_mobile_menu .menu-item-has-children .sub-menu,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu {
	display: none !important;
	visibility: hidden !important;
}


/*show the submenu when toggled open*/

ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
#main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #et-boc .et-l ul.et_mobile_menu .menu-item-has-children .sub-menu.visible,
.et-db #main-header ul.et_mobile_menu .menu-item-has-children .sub-menu.visible {
	display: block !important;
	visibility: visible !important;
}


/*adjust the toggle icon position and transparency*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle {
	text-align: center;
	opacity: 1;
}


/*submenu toggle icon when closed*/

ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle::after {
	top: 10px;
	position: relative;
	font-family: "ETModules";
	content: '\33';
	color: #1d7b89;
	background: #f0f3f6;
	border-radius: 50%;
	padding: 3px;
}


/*submenu toggle icon when open*/

ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after,
.et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children.dt-open>.mobile-toggle::after {
	content: '\32';
}

/* Restore Divi icon fonts (ETmodules + Font Awesome).
   The inline @font-face rules in each HTML point to wp-content/themes/Divi/...
   paths that were removed during restructure; these overrides add a working
   source list pointing at the local /fonts/ folder so the original glyphs render. */
@font-face {
	font-family: "ETmodules";
	src: url("../fonts/modules.woff") format("woff"),
	     url("../fonts/modules.ttf")  format("truetype"),
	     url("../fonts/modules.svg#ETmodules") format("svg");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "ETModules";
	src: url("../fonts/modules.woff") format("woff"),
	     url("../fonts/modules.ttf")  format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "FontAwesome";
	src: url("../fonts/fa-solid-900.woff2") format("woff2"),
	     url("../fonts/fa-solid-900.woff")  format("woff"),
	     url("../fonts/fa-solid-900.ttf")   format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "Font Awesome 5 Free";
	src: url("../fonts/fa-regular-400.woff2") format("woff2"),
	     url("../fonts/fa-regular-400.woff")  format("woff"),
	     url("../fonts/fa-regular-400.ttf")   format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "Font Awesome 5 Free";
	src: url("../fonts/fa-solid-900.woff2") format("woff2"),
	     url("../fonts/fa-solid-900.woff")  format("woff"),
	     url("../fonts/fa-solid-900.ttf")   format("truetype");
	font-weight: 900;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "Font Awesome 5 Brands";
	src: url("../fonts/fa-brands-400.woff2") format("woff2"),
	     url("../fonts/fa-brands-400.woff")  format("woff"),
	     url("../fonts/fa-brands-400.ttf")   format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

/* Custom review carousel — replaces the third-party Trustindex widget.
   Markup is rendered by the JS block at the bottom of default68b3.js. */
.rev-carousel {
	position: relative;
	padding: 8px 44px;
	box-sizing: border-box;
}
.rev-track {
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 8px 4px 16px;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.rev-track::-webkit-scrollbar { display: none; }

.rev-card {
	flex: 0 0 calc((100% - 48px) / 4);
	min-width: 220px;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(20, 40, 70, 0.08);
	padding: 18px;
	scroll-snap-align: start;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	font-family: inherit;
}

.rev-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.rev-avatar {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 15px;
	overflow: hidden;
	position: relative;
}
.rev-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}
.rev-meta { flex: 1 1 auto; min-width: 0; }
.rev-name {
	font-weight: 600;
	font-size: 14px;
	color: #222;
	line-height: 1.25;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rev-date {
	font-size: 12px;
	color: #888;
	margin-top: 2px;
}
.rev-source {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
}
.rev-source-google::before {
	content: "\f1a0"; /* Font Awesome 5 Brands: Google */
	font-family: "Font Awesome 5 Brands";
	font-weight: 400;
	color: #4285f4;
	font-size: 20px;
	line-height: 1;
}

.rev-stars {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	margin: 0 0 10px;
	font-size: 16px;
	line-height: 1;
}
.rev-star {
	color: #fbbc05;
	letter-spacing: 0;
}
.rev-star.rev-star-off { color: #e0e0e0; }
.rev-check {
	display: inline-flex;
	width: 14px;
	height: 14px;
	margin-left: 6px;
}
.rev-check svg { width: 100%; height: 100%; display: block; }

.rev-text {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: #333;
	flex: 1 1 auto;
}
.rev-toggle {
	margin-top: 8px;
	align-self: flex-start;
	background: none;
	border: 0;
	padding: 0;
	color: #1d7b89;
	font-size: 13px;
	cursor: pointer;
	font-family: inherit;
}
.rev-toggle:hover { text-decoration: underline; }

.rev-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 0;
	background: #fff;
	box-shadow: 0 2px 8px rgba(20, 40, 70, 0.15);
	color: #1d7b89;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.rev-nav:hover { transform: translateY(-50%) scale(1.06); }
.rev-nav[disabled] { opacity: 0.35; cursor: default; }
.rev-prev { left: 0; }
.rev-next { right: 0; }

@media (max-width: 1100px) {
	.rev-card { flex-basis: calc((100% - 32px) / 3); }
}
@media (max-width: 780px) {
	.rev-card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 520px) {
	.rev-carousel { padding: 8px 28px; }
	.rev-card { flex-basis: 88%; min-width: 0; }
	.rev-nav { width: 32px; height: 32px; font-size: 19px; }
}


/*add point on top of the menu submenu dropdown*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu:after {
	position: absolute;
	right: 5%;
	margin-left: -20px;
	top: -14px;
	width: 0;
	height: 0;
	content: '';
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-bottom: 20px solid #ffffff;
}


/*adjust the position of the hamburger menu*/

.mobile_menu_bar {
	position: relative;
	display: block;
	bottom: 10px;
	line-height: 0;
}


/*force the background color and add a rounded border*/

.et_pb_menu_0.et_pb_menu .et_mobile_menu,
.et_pb_menu_0.et_pb_menu .et_mobile_menu ul {
	background-color: #ffffff!important;
	border-radius: 10px;
}

.et_mobile_menu .menu-item-has-children .sub-menu{
display: none !important;
}

.pa-block{
display: block !important;
height: fit-content !important;
padding-top: 0 !important;
margin-top: 0 !important;
padding: 5% !important;
margin-bottom: 0 !important;
margin-top: 0 !important;
}

.et_mobile_menu .menu-item-has-children .pa-submenu{
display: block !important;
}

.opened .et_mobile_menu{
height: fit-content !important;
padding: 5% !important;
}


ul.et_mobile_menu li.menu-item-has-children .mobile-toggle, .et-db #et-boc .et-l ul.et_mobile_menu li.menu-item-has-children .mobile-toggle{
    	    text-align: right;
    	    width: 100%;
    }


/* Prevent horizontal page scroll site-wide.
   Safe here: the header is position:fixed (no position:sticky anywhere),
   so clamping overflow-x on html/body does not break sticky elements. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}