/* ============================================================
   ACE SOLUTION AFRICA — MAIN HEADER
============================================================ */


/* ============================================================
   TOP BAR
============================================================ */

.ace-topbar {
	width: 100%;
	background: #fff;
	border-top: 1px solid #222;
	border-bottom: 1px solid #eeeeee;
}

.ace-topbar-inner {
	height: 44px;

	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ace-topbar-links {
	display: flex;
	align-items: center;
	gap: 20px;
}

.ace-topbar-links a {
	color: #333;
	font-size: 14px;
	font-weight: 400;
	text-decoration: none;
    font-family: "Roboto", sans-serif !important; 
	transition: color .2s ease;
}

.ace-topbar-links a:hover {
	color: #7bad59;
	text-decoration: none;
}


/* ============================================================
   MAIN HEADER
============================================================ */

.ace-header {
	position: sticky;
	top: 0;

	width: 100%;

	z-index: 9999;
}


/* ============================================================
   HEADER BACKGROUND
============================================================ */

.ace-main-header {
	width: 100%;

	background: rgba(255, 255, 255, .98);

	border-bottom: 1px solid #eeeeee;

	transition:
		background .25s ease,
		box-shadow .25s ease,
		backdrop-filter .25s ease;
}


/* ============================================================
   SCROLLED HEADER
============================================================ */

.ace-header.is-scrolled .ace-main-header {

	background: rgba(255, 255, 255, .94);

	box-shadow:
		0 8px 30px rgba(0, 0, 0, .08);

	backdrop-filter: blur(12px);
}


/* ============================================================
   MAIN HEADER INNER
============================================================ */

.ace-main-header-inner {

	min-height: 72px;

	display: flex;

	align-items: center;

	width: 100%;

	transition: min-height .25s ease;
}


/* ============================================================
   SCROLLED HEADER HEIGHT
============================================================ */

.ace-header.is-scrolled
.ace-main-header-inner {

	min-height: 64px;
}


/* ============================================================
   LOGO
============================================================ */

.ace-logo {

	flex: 0 0 auto;

	margin-right: 28px;
}


.ace-logo .custom-logo-link {

	display: flex;

	align-items: center;
}


.ace-logo img {

	display: block;

	width: auto;

/* 	max-width: 127px; */

	height: auto;

	transition: max-width .25s ease;
}


/* Smaller logo on scroll */

.ace-header.is-scrolled
.ace-logo img {

/* 	max-width: 115px; */
}


/* Logo fallback */

.ace-logo-placeholder {

	display: block;

	color: #111;

	font-size: 13px;

	line-height: 18px;

	text-align: center;

	text-decoration: none;
}

.ace-logo-placeholder:hover {

	color: #111;

	text-decoration: none;
}


/* ============================================================
   BLOG TOOLS
   CATEGORIES + SEARCH
============================================================ */

.ace-blog-tools {

	flex: 0 0 auto;

	display: flex;

	align-items: center;

	height: 42px;
}


/* ============================================================
   CATEGORY WRAPPER
============================================================ */

.ace-category-wrap {

	position: relative;
}


/* ============================================================
   CATEGORY BUTTON
============================================================ */

.ace-category-toggle {

	display: flex;

	align-items: center;

	gap: 5px;

	height: 42px;

	padding: 10px 14px 10px 0;

	border: 0;

	background: transparent;

	color: #111;

	font-size: 15px;

	font-weight: 600;

	cursor: pointer;

	transition: color .2s ease;
}


.ace-category-toggle:hover {

	color: #5dbb4b;
}


.ace-category-toggle:focus {

	outline: none;
}


/* ============================================================
   CATEGORY CHEVRON
============================================================ */

.ace-chevron {

	font-size: 12px;

	line-height: 1;

	transition: transform .2s ease;
}


.ace-category-wrap.is-open
.ace-chevron {

	transform: rotate(180deg);
}


/* ============================================================
   CATEGORY DROPDOWN
============================================================ */
.ace-category-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    width: 300px;
    padding: 8px;
    background: #fff;
    border: 1px solid #e8ebe7;
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
    z-index: 99999;
    height: 300px;
    overflow-y: auto;
    overflow-x: hidden;

    /* Firefox */
    scrollbar-width: thin;
    scrollbar-color: #63a92e transparent;
}

/* Chrome, Edge, Safari */
.ace-category-menu::-webkit-scrollbar {
    width: 4px;
}

.ace-category-menu::-webkit-scrollbar-track {
    background: transparent;
}

.ace-category-menu::-webkit-scrollbar-thumb {
    background: #63a92e;
    border-radius: 10px;
}

.ace-category-menu::-webkit-scrollbar-thumb:hover {
    background: #f58220;
}


.ace-category-wrap.is-open
.ace-category-menu {

	opacity: 1;

	visibility: visible;

	transform: translateY(0);
}


/* ============================================================
   CATEGORY LINKS
============================================================ */

.ace-category-menu a {

	display: block;

	padding: 10px 12px;

	border-radius: 7px;

	color: #111;

	text-decoration: none;

	transition:
		background .15s ease,
		transform .15s ease;
}


.ace-category-menu a:hover {

	background: #f3f8f1;

	transform: translateX(3px);

	text-decoration: none;
}


/* ============================================================
   CATEGORY NAME
============================================================ */

.ace-cat-name {

	display: block;

	font-size: 14px;

	font-weight: 700;
}


/* ============================================================
   CATEGORY COUNT
============================================================ */

.ace-cat-count {

	display: block;

	margin-top: 2px;

	color: #8b918d;

	font-size: 14px;
}

/* =========================================================
   ACE SOLUTION AFRICA — PREMIUM SCROLLBAR
========================================================= */

::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: #63a92e;
	border-radius: 100px;
	border: 2px solid transparent;
	background-clip: padding-box;
	transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
	background: #f58220;
	border: 2px solid transparent;
	background-clip: padding-box;
}

html {
	scrollbar-width: thin;
	scrollbar-color: #63a92e transparent;
}

/* ============================================================
   EMPTY CATEGORY
============================================================ */

.ace-category-empty {

	display: block;

	padding: 12px;

	color: #888;

	font-size: 15px;
}


/* ============================================================
   SEARCH BUTTON
============================================================ */

.ace-search-trigger {

	display: flex;

	align-items: center;

	gap: 9px;

	height: 42px;

	margin-left: 0;

	padding: 0 0 0 14px;

	border: 0;

	border-left: 1px solid #e7e9e7;

	background: transparent;

	color: #333;

	font-size: 15px;

	cursor: pointer;

	transition: color .2s ease;
}


.ace-search-trigger:hover {

	color: #ee6b08;
}


.ace-search-trigger:focus {

	outline: none;
}


/* ============================================================
   SEARCH ICON
============================================================ */

.ace-search-glass {

	position: relative;

	display: inline-block;

	width: 14px;

	height: 14px;

	border: 2px solid currentColor;

	border-radius: 50%;
}


.ace-search-glass::after {

	content: "";

	position: absolute;

	width: 6px;

	height: 2px;

	right: -5px;

	bottom: -2px;

	background: currentColor;

	border-radius: 2px;

	transform: rotate(45deg);
}


/* ============================================================
   MAIN MENU
============================================================ */

.ace-main-menu {

	display: flex;

	align-items: center;

	margin-left: auto;
}

@media screen and (min-width: 1082px) {

/* ============================================================
   MAX MEGA MENU WRAPPER
============================================================ */

.ace-main-menu #mega-menu-wrap-primary {

	background: transparent !important;
}


/* ============================================================
   MAX MEGA MENU
============================================================ */

.ace-main-menu #mega-menu-wrap-primary
#mega-menu-primary {

	background: transparent !important;
}


/* ============================================================
   MENU ITEMS
============================================================ */

.ace-main-menu #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item {

	margin: 0 3px;
}


/* ============================================================
   MENU LINKS
============================================================ */

.ace-main-menu #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item
> a.mega-menu-link {

	height: 72px !important;

	line-height: 72px !important;
 
	padding: 0 15px !important;

	background: transparent !important;

	color: #111 !important;

	font-size: 16px !important;
	
	text-transform:uppercase !important;

	font-weight: 500 !important;
	
	font-family: "Roboto", sans-serif !important;

	transition:
		color .2s ease,
		background .2s ease;
}


/* ============================================================
   MENU HOVER
============================================================ */

.ace-main-menu #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item
> a.mega-menu-link:hover {

	background: transparent !important;

	color:#7bad59; !important;
}


/* ============================================================
   SCROLLED MENU
============================================================ */

.ace-header.is-scrolled
.ace-main-menu #mega-menu-wrap-primary
#mega-menu-primary > li.mega-menu-item
> a.mega-menu-link {

	height: 64px !important;

	line-height: 64px !important;
}

}
/* ============================================================
   WHATSAPP
============================================================ */

.ace-whatsapp {

	flex: 0 0 auto;

	margin-left: 28px;
}


.ace-whatsapp-link {

	display: flex;

	align-items: center;

	color: #111;

	text-decoration: none;
}


.ace-whatsapp-link:hover {

	color: #111;

	text-decoration: none;
}


/* ============================================================
   WHATSAPP ICON
============================================================ */

.ace-whatsapp-icon {

	width: 44px;

	height: 44px;

	display: flex;

	align-items: center;

	justify-content: center;

	margin-right: 10px;

	border-radius: 50%;

	background: #00c76f;

	color: #fff;

	transition:
		transform .2s ease,
		box-shadow .2s ease;
}


.ace-whatsapp-link:hover
.ace-whatsapp-icon {

	transform: scale(1.05);

	box-shadow:
		0 6px 18px rgba(0, 199, 111, .25);
}


.ace-whatsapp-icon svg {

	width: 30px;

	height: 30px;
}


/* ============================================================
   WHATSAPP TEXT
============================================================ */

.ace-whatsapp-text {

	display: flex;

	flex-direction: column;

	line-height: 1.2;
}


.ace-whatsapp-text small {

	margin-bottom: 3px;

	color: #999;

	font-size: 12px;

	font-weight: 400;
}


.ace-whatsapp-text strong {

	color: #050505;

	font-size: 18px;

	font-weight: 700;

	white-space: nowrap;
}


/* ============================================================
   SEARCH OVERLAY
============================================================ */

.ace-search-overlay {

	position: fixed;

	inset: 0;

	z-index: 999999;

	display: flex;

	align-items: flex-start;

	justify-content: center;

	padding-top: 100px;

	background: rgba(10, 12, 11, .65);

	backdrop-filter: blur(5px);

	opacity: 0;

	visibility: hidden;

	transition:
		opacity .2s ease,
		visibility .2s ease;
}


/* ============================================================
   OPEN SEARCH
============================================================ */

.ace-search-overlay.is-open {

	opacity: 1;

	visibility: visible;
}


/* ============================================================
   SEARCH POPUP
============================================================ */

.ace-search-popup {

	position: relative;

	width: min(720px, calc(100% - 30px));

	padding: 35px;

	background: #fff;

	border-radius: 12px;

	box-shadow:
		0 30px 80px rgba(0, 0, 0, .25);

	transform: translateY(-15px);

	transition: transform .25s ease;
}


/* ============================================================
   SEARCH POPUP OPEN
============================================================ */

.ace-search-overlay.is-open
.ace-search-popup {

	transform: translateY(0);
}


/* ============================================================
   SEARCH CLOSE
============================================================ */

.ace-search-close {

	position: absolute;

	top: 12px;

	right: 12px;

	width: 32px;

	height: 32px;

	border: 0;

	border-radius: 50%;

	background: #f1f3f1;

	color: #222;

	font-size: 22px;

	line-height: 1;

	cursor: pointer;
}


.ace-search-close:hover {

	background: #e7e9e7;
}


.ace-search-close:focus {

	outline: none;
}


/* ============================================================
   SEARCH LABEL
============================================================ */

.ace-search-label {

	display: block;

	margin-bottom: 7px;

	color: #4ca63d;

	font-size: 9px;

	font-weight: 800;

	letter-spacing: 1.5px;
}


/* ============================================================
   SEARCH HEADING
============================================================ */

.ace-search-popup h2 {

	margin: 0 0 20px;

	color: #111;

	font-size: 28px;

	font-weight: 800;
}


/* ============================================================
   SEARCH FORM
============================================================ */

.ace-search-popup form {

	display: flex;

	gap: 7px;

	padding: 5px;

	border: 1px solid #dfe3df;

	border-radius: 8px;
}


/* ============================================================
   SEARCH INPUT
============================================================ */

.ace-search-popup input {

	flex: 1;

	min-width: 0;

	padding: 12px;
	
	color:#000 !important;

	border: 0;

	outline: 0;

	font-size: 14px;
}


/* ============================================================
   SEARCH SUBMIT
============================================================ */

.ace-search-popup form button {

	padding: 0 20px;

	border: 0;

	border-radius: 6px;

	background: #111;

	color: #fff;

	font-size: 11px;

	font-weight: 700;

	cursor: pointer;

	transition: background .2s ease;
}


.ace-search-popup form button:hover {

	background: #ee6b08;
}


/* ============================================================
   ============================================================
   TABLET / MOBILE
   1000PX AND BELOW
   ============================================================
   
   EXACT ORDER:

   LOGO → WHATSAPP → HAMBURGER

   Categories = HIDDEN
   Search     = HIDDEN
   Topbar     = HIDDEN
   ============================================================
============================================================ */
@media (max-width: 1199px) {
	.ace-blog-tools{
		display:none !important;
	}
}

@media (max-width: 1082px) {


	/* ========================================================
	   TOP BAR
	======================================================== */

	.ace-topbar {

		display: none !important;
	}


	/* ========================================================
	   HEADER
	======================================================== */

	.ace-main-header-inner {

		min-height: 65px;

		display: flex;

		align-items: center;
	}


	/* ========================================================
	   LOGO
	======================================================== */

	.ace-logo {

		flex: 0 0 auto;

		margin-right: auto;
	}


	.ace-logo img {

/* 		max-width: 115px; */
	}


	/* ========================================================
	   CATEGORIES + SEARCH
	   COMPLETELY HIDDEN
	======================================================== */

	.ace-blog-tools {

		display: none !important;
	}


	/* ========================================================
	   WHATSAPP
	   SECOND ELEMENT
	======================================================== */

	.ace-whatsapp {

		display: block !important;

		flex: 0 0 auto;

		order: 2;

		margin-left: 15px;
	}


	/* WhatsApp link */

	.ace-whatsapp-link {

		display: flex;

		align-items: center;

		text-decoration: none;
	}


	/* Hide number */

	.ace-whatsapp-text {

		display: none !important;
	}


	/* Icon */

	.ace-whatsapp-icon {

		width: 42px;

		height: 42px;

		margin-right: 0;

		display: flex;

		align-items: center;

		justify-content: center;

		border-radius: 50%;
	}


	.ace-whatsapp-icon svg {

		width: 29px;

		height: 29px;
	}


	/* ========================================================
	   MAX MEGA MENU
	   THIRD ELEMENT
	======================================================== */

	.ace-main-menu {

		display: flex;

		align-items: center;

		flex: 0 0 auto;

		order: 3;

		margin-left: 15px;
	}


	/* Let Max Mega Menu handle the hamburger */

	.ace-main-menu #mega-menu-wrap-primary {

		width: auto !important;

		background: transparent !important;
	}


	/* ========================================================
	   REMOVE DESKTOP MENU DIMENSIONS
	   FROM OUR CUSTOM CSS
	======================================================== */

/* 	.ace-main-menu #mega-menu-wrap-primary
	#mega-menu-primary > li.mega-menu-item
	> a.mega-menu-link {

		height: auto !important;

		line-height: normal !important;
	}
 */

	/* ========================================================
	   SCROLLED MOBILE HEADER
	======================================================== */

	.ace-header.is-scrolled
	.ace-main-header-inner {

		min-height: 60px;
	}


	.ace-header.is-scrolled
	.ace-logo img {

/* 		max-width: 105px; */
	}

}


/* ============================================================
   MOBILE
   767PX AND BELOW
============================================================ */

@media (max-width: 767px) {


	.ace-main-header-inner {

		min-height: 62px;
	}


	.ace-header.is-scrolled
	.ace-main-header-inner {

		min-height: 58px;
	}


	/* Logo */

	.ace-logo img {

		max-width: 100%;
		height:35px !important;
	}


	.ace-header.is-scrolled
	.ace-logo img {

		max-width: 100%;
		height:35px !important;
	}


	/* WhatsApp */

	.ace-whatsapp {

		margin-left: 12px;
	}


	.ace-whatsapp-icon {

		width: 41px;

		height: 41px;
	}


	.ace-whatsapp-icon svg {

		width: 28px;

		height: 28px;
	}


	/* Hamburger */

	.ace-main-menu {

		margin-left: 10px;
	}

}


/* ============================================================
   SMALL PHONES
   575PX AND BELOW
============================================================ */

@media (max-width: 575px) {


	/* ========================================================
	   HEADER
	======================================================== */

	.ace-main-header-inner {

		min-height: 60px;
	}


	.ace-header.is-scrolled
	.ace-main-header-inner {

		min-height: 56px;
	}


	/* ========================================================
	   LOGO
	======================================================== */

	.ace-logo img {

		max-width: 100%;
		height:35px !important;
	}


	.ace-header.is-scrolled
	.ace-logo img {
		max-width: 100%;
		height:35px !important;
	}


	/* ========================================================
	   WHATSAPP
	======================================================== */

	.ace-whatsapp {

		margin-left: 8px;
	}


	.ace-whatsapp-icon {

		width: 39px;

		height: 39px;
	}


	.ace-whatsapp-icon svg {

		width: 26px;

		height: 26px;
	}


	/* ========================================================
	   HAMBURGER
	======================================================== */

	.ace-main-menu {

		margin-left: 9px;
	}


	/* ========================================================
	   SEARCH POPUP
	======================================================== */

	.ace-search-overlay {

		padding-top: 70px;
	}


	.ace-search-popup {

		width: calc(100% - 24px);

		padding: 28px 18px;
	}


	.ace-search-popup h2 {

		font-size: 22px;
	}


	.ace-search-popup form {

		display: block;

		padding: 0;

		border: 0;
	}


	.ace-search-popup input {

		display: block;

		width: 100%;

		height: 46px;
        
		color:#000 !important;

		margin-bottom: 8px;

		padding: 0 12px;

		border: 1px solid #dfe3df;

		border-radius: 7px;
	}


	.ace-search-popup form button {

		width: 100%;

		height: 44px;
	}

}


/* ============================================================
   VERY SMALL PHONES
   380PX AND BELOW
============================================================ */

@media (max-width: 380px) {


	.ace-logo img {

/* 		max-width: 98px; */
	}


	.ace-header.is-scrolled
	.ace-logo img {

/* 		max-width: 92px; */
	}


	.ace-whatsapp-icon {

		width: 37px;

		height: 37px;
	}


	.ace-whatsapp-icon svg {

		width: 24px;

		height: 24px;
	}

}