/*CSS STYLES - UON GLOBAL WEBSITE - UON Solutions Behaviour View*/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap');

/*CSS RESETS*/
* {
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	outline: none;
	border: none;
	list-style: none;
	scroll-behavior: smooth;
	text-rendering: optimizeLegibility;
}

*::before,
*::after {
	box-sizing: border-box;
}

/*VARIABLES*/
:root {
	--background-color: #FFFFFF;
	--color-text-1: #3A4A5B; /*Grey Normal*/
	--color-text-2: #607B8B; /*Grey Light*/
	--color-text-3: #F26722; /*Orange Normal*/
	--color-text-4: #F58C58; /*Orange Light*/
	--color-element-1: #F26722; /*Orange*/
	--color-element-2: #798F9D; /*Grey Border*/
	--color-element-3: rgb(226, 75, 0); /*Orange on Hover*/
	--color-element-4: #EDEFF0; /*Grey Shadow*/
	--color-element-5: #FEF2EA; /*Orange Shadow*/
	--transition: all 0.3s ease-in-out;
	/*-- text-main-normal color-text-1 : #3A4A5B;*/ /*Grey Normal*/
	/*-- text-main-light color-text-2 : rgb(96, 123, 139); *//*Light Gray*/
	/*-- text-nav: color-text-3 #F58C58 ;*/ /*Orange*/
	/*-- border-color-1 color-element-2 : rgba(96,123,139,.6)*/ ; /*Gray*/
	/*-- elements-colour-1 color-text-3 : rgb(242, 103, 34);*/ /*Orange*/
	/*-- elements-colour-1-hover color-element-3 : rgb(226, 75, 0);*/ /*Orange*/
	/*-- text-highlight-1 color-text-3 : #F58C58;*/ /*Orange Text*/
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 2rem;
}





/****************************************************************************************START SECTION 1A - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************START SECTION 1A - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************START SECTION 1A - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************START SECTION 1A - HEADER - NAV BAR - DESKTOP*/

/*[1.1] HEADER NAV BAR DESKTOP CONTAINER*/
.header {
	width: 92vw;
	min-height: 4rem;
	margin: 0 auto 0;
	overflow: hidden;
}

/*[1.1A] HEADER NAV BAR DESKTOP*/
.header .navbar-desktop {
	width: 92vw;
	display: flex;
	min-height: 4rem;
	align-items: center;
	flex-wrap: wrap;
	align-content: center;
	justify-content: space-evenly;
	position: fixed;
	z-index: 1;
	background-color: rgba(256,256,256, .9);
	border-bottom: 1.6px solid var(--color-element-2);
}

/*[1.2A] HIDE HEADER NAV BAR MOBILE*/
.header .navbar-mobile {
	display: none;
}

/*[1.3A] HEADER NAV BAR DESKTOP LOGO*/
.header .navbar-desktop .nav-logo {
	background-image: url('../elements/Top Nav Bar/UON Logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	min-width: 7rem;
	max-width: 7rem;
	height: 2rem;
	cursor: pointer;
}

/*[1.4A] ANIMATE HEADER NAV BAR DESKTOP*/
.header .navbar-desktop .nav-logo:hover {
	background-image: url('../elements/Top Nav Bar/UON Logo.svg');
}

/****************************************************************************************START TOP NAV MENU - DESKTOP*/

/*[1.5A] HEADER NAV BAR MENU DESKTOP*/
.header .navbar-desktop .nav-menu {
	display: flex;
	align-content: space-around;
	flex-wrap: wrap;
}

/*[1.6A] HEADER NAV BAR MENU ITEMS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item {
	margin-left: 1rem;
	margin-right: 1rem;
}

/*[1.7A] HEADER NAV BAR MENU LINKS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link {
	color: var(--color-text-1);
	font-size: .8rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/
}

/*[1.8A] HEADER NAV BAR MENU LINKS ACTIVE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link.active {
	color: var(--color-text-3);
}

/*[1.9A] ANIMAGE HEADER NAV BAR MENU ITEMS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link:hover {
	color: var(--color-text-3);
}

/*[1.10A] STYLE ANIMATION HEADER NAV BAR MENU LINKS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link:after {
	content: "";
	background-color: var(--color-text-3);
	width: 0;
	height: .125rem;
	border-radius: 50px;
	position: absolute;
	left: 0;
	bottom: -.2rem;
	transition: width 200ms ease-in;
}

/*[1.11A] ANIMATE HEADER NAV BAR MENU LINKS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link:hover:after {
	width: 100%;
}

/*[1.12A] HEADER NAV BAR MENU LINK ARROW DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link .navlink-arrow {
	margin-left: 1.125rem;
	font-size: .5rem;
	font-weight: 900;
	transform: rotate(0deg);
	transition: transform .3s;
}

/*[1.13A] ANIMATE HEADER NAV BAR MENU LINK ARROW DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-link:hover .navlink-arrow {
	transform: rotate(90deg);
}

/****************************************************************************************END TOP NAV MENU - DESKTOP*/
/****************************************************************************************START TOP NAV BAR DEMO BUTTON - DESKTOP*/

/*[1.14A] HEADER NAV BAR DEMO BUTTON DESKTOP*/
.header .navbar-desktop #btn-demo {
	display: inline-block;
	width: 8rem;
	height: 2.08rem;
	color: white;
	background-color: var(--color-element-1);
	border-radius: 9px;
	font-weight: 400;
	font-size: .8rem;
	cursor: pointer;
	padding-left: 1rem;
	transition: background-color .3s, padding-left .3s;
}

/*[1.15A] HEADER NAV BAR DEMO BUTTON ARROW DESKTOP*/
.header .navbar-desktop #btn-demo > i {
	visibility: hidden;
	font-weight: 600;
	margin-left: .5rem;
	transform: translateX(-.5rem);
	transition: transform .3s, margin-left .3s;
}

/*[1.16A] ANIMATE HEADER NAV BAR DEMO BUTTON ARROW DESKTOP*/
.header .navbar-desktop #btn-demo:hover > i {
	transform: translateX(.3rem);
	visibility: visible;
	margin-left: .6rem;
}

/*[1.17A] ANIMATE HEADER NAV BAR DEMO BUTTON DESKTOP*/
.header .navbar-desktop #btn-demo:hover {
	background-color: var(--color-element-3);
	padding-left: 0;
	padding-right: 0;
}

/****************************************************************************************END TOP NAV BAR DEMO BUTTON - DESKTOP*/
/****************************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/

/*[1.18A] HEADER NAV BAR DROP DOWN SERVICES DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services {
	position: absolute;
	left: 0rem;
	width: 92vw;
	min-height: 25rem;
	visibility: hidden;
	opacity: 0;
	border-bottom: 1.5px solid var(--color-element-2);
	padding-bottom: 2.5rem;
	background: var(--color-element-1);
	padding-right: 4rem;
	padding-left: 4rem;
	top: 0rem;
	transition: visibility .2s, opacity 0s,background 0s, top .4s;
}

/*[1.19A] HIDE HEADER NAV BAR DROP DOWN SERVICES DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-services {
	display: none;
}

/*[1.20A] SHOW NAV BAR DROP DOWN SERVICES DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-services:checked ~ .nav-desktop-dropdown-services {
	visibility: visible;
	opacity: 1;
	background: #FFF;
	top: 4.5rem;
}

/*[1.21A] HEADER NAV BAR DROP DOWN SERVICES CARDS CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .container-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
	gap: 4rem;
	padding-top: 4rem;
	justify-items: space-between;
	align-items: center;
	width: 100%;
}

/****************************************************************************************START DROP DOWN MENU CARD - DESKTOP - SERVICES*/

/*[1.22A] HEADER NAV BAR DROP DOWN SERVICES CARDS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card {
	box-shadow: 0 10px 20px 0 var(--color-element-4);
	border-radius: 15px;
	width: 14rem;
	min-height: 18rem;
	cursor: pointer;
	background: white;
	transition: transform .3s, box-shadow .3s;
}

/*[1.23A] ANIMATE HEADER NAV BAR DROP DOWN SERVICES CARDS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
	transform: translateY(-.5rem);
}

/*[1.24A] HEADER NAV BAR DROP DOWN SERVICES HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services h3 {
	font-weight: 700;
	font-size: 2rem;
	color: var(--color-text-1);
	margin-top: 2rem;
}

/*[1.25A] HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div {
	display: flex;
	justify-content: space-between;
	padding-bottom: 2rem;
	max-height: 6.250rem;
	margin-bottom: 1rem;
}

/*[1.26A] HEADER NAV BAR DROP DOWN SERVICES IMAGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > img {
	padding-top: 1.5rem;
	padding-left: 1.5rem;
	width: 40%;
	height:40%;
}

/*[1.27A] STYLE HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > i {
	padding-top: 1rem;
	padding-right: 1.250rem;
	font-size: 1.250rem;
	color: var(--color-text-2);
	visibility: hidden;
	transition: all .3s;
}

/*[1.28A] HEADER NAV BAR DROP DOWN SERVICES HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > h4 {
	font-size: 1.250rem;
	font-weight: 600;
	color: var(--color-text-2);
	text-align: center;
	padding-bottom: .9rem;
}

/*[1.29A] HEADER NAV BAR DROP DOWN SERVICES TEXT DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > p {
	font-size: .9rem;
	font-weight: 400;
	color: var(--color-text-2);
	text-align: center;
	line-height: 1.8rem;
	padding-left: .6rem;
	padding-right: .6rem;
}

/*[1.30A] ANIMATE HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card:hover div > i {
	visibility: visible;
	transform: translateX(.5rem);
}

/****************************************************************************************END DROP DOWN MENU CARD - DESKTOP - SERVICES*/
/****************************************************************************************END TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/
/****************************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SOLUTIONS*/

/*[1.31A] HEADER NAV BAR DROP DOWN SOLUTIONS CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions {
	position: absolute;
	left: 0rem;
	width: 92vw;
	opacity: 0;
	visibility: hidden;
	min-height: 18.128rem;
	border-bottom: 1.5px solid var(--color-element-2);
	padding-bottom: 2rem;
	padding-top: 2rem;
	background: var(--color-element-1);
	top: 0rem;
	transition: visibility .2s, opacity 0s, background 0s, top .4s;
}

/*[1.32A] HEADER NAV BAR DROP DOWN SOLUTIONS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-solutions {
	display: none;
}

/*[1.33A] SHOW HEADER NAV BAR DROP DOWN SOLUTIONS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-solutions:checked ~ .nav-desktop-dropdown-solutions {
	visibility: visible;
	opacity: 1;
	background: #FFF;
	top: 4.5rem;
}

/*[1.34A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop {
	width: 92vw;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-items: center;
	border-bottom: 1.5px solid var(--color-element-2);
}

/*[1.35A] HIDE HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS RADIO DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .radio-nav {
	display: none;
}

/*[1.36A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin-bottom: 2rem;
}

/*[1.37A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .lbl-nav-tabs {
	cursor: pointer;
}

/*[1.38A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .lbl-nav-tabs:hover {
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0.5rem 0.8rem #00000080;
	border-left:  6px solid white;
}

/*[1.39A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab {
	display: grid;
	grid-template-areas:
		'lbl-tabs-image lbl-tabs-h1 lbl-tabs-icon'
		'lbl-tabs-image lbl-tabs-h2 lbl-tabs-icon';
	padding: .8rem 1.2rem;
	grid-column-gap: 1rem;
	justify-content: end;
	align-items: center;
}

/*[1.40A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB IMAGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab img {
	filter: grayscale(100%);
	width: 2rem;
	grid-area: lbl-tabs-image;
}

/*[1.41A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB IMAGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab:hover img {
	filter: grayscale(0%);
}

/*[1.42A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB HEADING 1 DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab h1 {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-text-1);
	grid-area: lbl-tabs-h1;
}

/*[1.43A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB HEADING 2 DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab h2 {
	font-size: .9rem;
	font-weight: normal;
	color: var(--color-text-1);
	grid-area: lbl-tabs-h2;
}

/*[1.44A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB ICON DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab i {
	grid-area: lbl-tabs-icon;
	font-size: .8rem;
	font-weight: 900;
	transform: translateX(-1.5rem);
	visibility: hidden;
	transition: transform .5s;
}

/*[1.45A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB ICON DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab:hover > i {
	visibility: visible;
	transform: translateX(0rem);
}

/*[1.46A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav {
	overflow: hidden;
	animation: fadein .8s;
	display: inline-flex;
	justify-content: flex-start;
	align-items: center;
	flex-direction: row;
	width: 50%;
}

/*[1.47A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS DESKTOP*/
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*[1.48A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav {
	display: none;
}

/*[1.49A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents {
	width: 90%;
}

/*[1.50A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents h1 {
	color: var(--color-text-1);
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: 1rem;
}

/*[1.51A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS HEADING HIGHLIGHTS DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents h1 .text-highlight-1 {
	color: var(--color-text-3);
}

/*[1.52A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS HEADING DETAIL DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents p {
	color: var(--color-text-1);
	font-size: clamp(0.7rem, 0.6143rem + 0.1786vw, 0.9rem);
	font-weight: normal;
	line-height: 1.5em;
	margin-bottom: 0.5rem;
}

/*[1.53A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards {
	display: flex;
	justify-content: space-between;
	padding-top: 1rem;
	padding-left: 0.5rem;
	align-items: center;
}

/*[1.54A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS BLANK CARD DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards #blank-card {
	visibility: hidden;
}

/*[1.55A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div {
	position: relative;
	max-width: 45%;
	min-height: 45%;
	margin-top: .9rem;
	margin-bottom: .9rem;
}

/*[1.56A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div > img {
	width: 100%;
}

/*[1.57A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card {
	box-shadow: 0 5px 20px 0 var(--color-element-4);
	border-radius: 15px;
	min-width: 7.5rem;
	max-width: 7.5rem;
	min-height: 9.5rem;
	max-height: 10rem;
	margin-bottom: .9rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: transform .3s;
}

/*[1.58A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
	transform: translateY(-.5rem);
}

/*[1.59A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/*[1.60A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER IMAGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div > img {
	width: 100%;
	margin-left: 0.5rem;
}

/*[1.61A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div > i {
	font-size: 0.8rem;
	color: var(--color-text-2);
	visibility: hidden;
	transition: transform .3s;
}

/*[1.62A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card:hover div > i {
	visibility: visible;
	transform: translateX(.5rem);
}

/*[1.63A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card h4 {
	color: var(--color-text-1);
	font-weight: 600;
	font-size: .9rem;
	margin-top: .5rem;
	margin-bottom: .5rem;
}

/*[1.64A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER SUMMARY DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card p {
	color: var(--color-text-2);
	font-weight: 400;
	font-size: .6rem;
	padding-left: .6rem;
	padding-right: .6rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
	text-align: center;
}

/*[1.65A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .text {
	display: grid;
	grid-template-areas:
	 'panel-content-text-counter panel-content-text';
	color: var(--color-text-1);
	padding-bottom: 1rem;
	min-width: 15rem;
	max-width: 15rem;
	justify-content: start;
	align-items: flex-start;
}

/*[1.66A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .text h1 {
	grid-area: panel-content-text-counter;
	font-size: 1.2rem;
	color: var(--color-text-1);
	font-weight: 500;
	margin-right: 1rem;
}

/*[1.67A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT SUB HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .text h2 {
	grid-area: panel-content-text;
	font-size: .9rem;
	color: var(--color-text-1);
	font-weight: normal;
	line-height: 1.5rem;
}

/*[1.68A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING IN ROW FORM DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .row {
	display: flex;
	flex-direction: row;
}

/*[1.69A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS TEXT IN ROW FORM DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .text-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

/*[1.70A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range {
	max-width: 60vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-top: 1rem;
	margin-bottom: 0rem;
	padding-top: 0rem;
	padding-bottom: 0rem;
}

/*[1.71A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE IMAGE CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .image-box {
	width: 50%;	
	text-align: initial;
}

/*[1.72A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE IMAGE DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .image-box img {
	width: 50%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
}

/*[1.73A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE TEXT CONTAINER DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .text-box {
	width: 50%;
}

/*[1.74A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE TEXT HEADING DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .text-box h2 {
	color: var(--color-text-1);
	font-size: clamp(0.9rem, 0.8357rem + 0.3214vw, 1.35rem);
	font-weight: 700;	
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}

/*[1.75A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE TEXT DETAIL DESKTOP*/
.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .text-box p {
	color: var(--color-text-2);
	font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem);
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
	font-weight: normal;
}

/*[1.76A] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS DESKTOP*/
#radio-nav-desktop-1:checked ~ .tabs-nav #lbl-nav-tab-1,
#radio-nav-desktop-2:checked ~ .tabs-nav #lbl-nav-tab-2,
#radio-nav-desktop-3:checked ~ .tabs-nav #lbl-nav-tab-3,
#radio-nav-desktop-4:checked ~ .tabs-nav #lbl-nav-tab-4 {
	border-left:  6px solid var(--color-element-1);
	box-shadow: 0 5px 20px 0 var(--color-element-4);
}

/*[1.77A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS DESKTOP*/
#radio-nav-desktop-1:checked ~ .tabs-nav #lbl-nav-tab-1 * i,
#radio-nav-desktop-2:checked ~ .tabs-nav #lbl-nav-tab-2 * i,
#radio-nav-desktop-3:checked ~ .tabs-nav #lbl-nav-tab-3 * i,
#radio-nav-desktop-4:checked ~ .tabs-nav #lbl-nav-tab-4 * i{
	visibility: visible;
	transform: translateX(0rem);
}

/*[1.78A] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR PANELS DESKTOP*/
#radio-nav-desktop-1:checked ~ * #panel-nav-1,
#radio-nav-desktop-2:checked ~ * #panel-nav-2,
#radio-nav-desktop-3:checked ~ * #panel-nav-3,
#radio-nav-desktop-4:checked ~ * #panel-nav-4 {
	display: block;
}

/****************************************************************************************END TOP NAV BAR DROP DOWN MENU - DESKTOP - SOLUTIONS*/

/****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/






/****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/
/****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/
/****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/
/****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/

/*[1.1B] HEADER NAV BAR MOBILE CONTAINER*/
.header .navbar-mobile {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	padding-left: 1rem;
	padding-right: 1rem;
	display: none;
	align-items: center;
	justify-content: space-between;
	z-index: 1000;
	background-color: rgba(256,256,256, .9);
	border-bottom: 1.6px solid var(--color-element-2);
}

/*[1.2B] HIDE HEADER NAV BAR DESKTOP*/
.header .navbar-desktop {
	display: flex;
}

/*[1.3B] HEADER NAV BAR MOBILE LOG*/
.header .navbar-mobile .nav-logo {
	background-image: url('../elements/Top Nav Bar/UON Logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	min-width: 5rem;
	max-width: 5rem;
	height: 1.8rem;
	cursor: pointer;
}

/*[1.4B] ANIMATE HEADER NAV BAR MOBILE LOGO*/
.header .navbar-mobile .nav-logo:hover {
	background-image: url('../elements/Top Nav Bar/UON Logo.svg');
}

/****************************************************************************************START HAMBURGER MENU*/
/*[1.5B] HIDE HEADER NAV BAR MOBILE HAMBURGER ICON CHECKBOX*/
.header .navbar-mobile #check-nav-mobile {
	display: none;
}

/*[1.6B] HEADER NAV BAR MOBILE HAMBURGER ICON CONTAINER*/
#nav-mobile-icon {
  width: 30px;
  height: 45px;
  position: relative;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
}

/*[1.7B] HEADER NAV BAR MOBILE HAMBURGER ICON*/
#nav-mobile-icon span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: var(--color-text-1);;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/*[1.8B] HEADER NAV BAR MOBILE HAMBURGER ICON LINE 1*/
#nav-mobile-icon span:nth-child(1) {
  top: 12px;
}

/*[1.9B] HEADER NAV BAR MOBILE HAMBURGER ICON LINE 2*/
#nav-mobile-icon span:nth-child(2),#nav-mobile-icon span:nth-child(3) {
  top: 24px;
}

/*[1.10B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 1 POSITION*/
#nav-mobile-icon.open span:nth-child(1) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/*[1.11B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 1 POSITION*/
#nav-mobile-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
   top: 18px;
}

/*[1.12B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 2 ANGLE*/
#nav-mobile-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
   top: 18px;
}

/*[1.13B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 2 ANGLE*/
#nav-mobile-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/****************************************************************************************END HAMBURGER MENU*/
/****************************************************************************************START TOP NAV MENU - MOBILE*/

/*[1.14B] CREATE AND HIDE HEADER NAV BAR MOBILE CONTAINER*/
.header .navbar-mobile .nav-menu {
	position: absolute;
	height: 100vh;
	top: 100%;
	left: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 1.2rem;
	padding-top: 1.2rem;
	background-color: white;
	z-index: 1000;
	border-top: 1.6px solid var(--color-element-2);
	width: 0vw;
	transition: width 0.4s;
}

/*[1.15B] HIDE HEADER NAV BAR MENU ITEMS MOBILE NAV ITEMS*/
.header .navbar-mobile .nav-menu .nav-item {
	position: relative;
	display: none;
	transition: display 0.4s;
}

/*[1.16B] SHOW HEADER NAV BAR MOBILE*/
.header .navbar-mobile #check-nav-mobile:checked ~ .nav-menu {
	width: 100vw;
}

/*[1.17B] SHOW HEADER NAV BAR MOBILE*/
.header .navbar-mobile #check-nav-mobile:checked ~ .nav-menu .nav-item {
	display: block;
}

/*[1.18B] HEADER NAV BAR MENU LINKS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-link {
	color: var(--color-text-1);
	font-size: 1.2rem;
	font-weight: 600;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/
}

/*[1.19B] HEADER NAV BAR MENU LINKS ACTIVE MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-link.active {
	color: var(--color-text-3);
}

/*[1.20B] ANIMAGE HEADER NAV BAR MENU ITEMS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-link:hover {
	color: var(--color-text-3);
}

/*[1.21B] HEADER NAV BAR MENU LINK ARROW MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-link .navlink-arrow {
	margin-left: .8rem;
	font-size: .8rem;
	font-weight: 900;
	transform: rotate(0deg);
	transition: transform .3s;
}

/*[1.22B] ANIMATE HEADER NAV BAR MENU LINK ARROW MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-link:hover .navlink-arrow {
	transform: rotate(90deg);
}

/****************************************************************************************END TOP NAV MENU - MOBILE*/
/****************************************************************************************START TOP NAV BAR DEMO BUTTON - MOBILE*/

/*[1.23B] HEADER NAV BAR DEMO BUTTON MOBILE*/
.header .navbar-mobile #btn-demo {
	display: inline-block;
	width: 6rem;
	height: 1.8rem;
	color: white;
	background-color: var(--color-element-1);
	border-radius: 7px;
	font-weight: 400;
	font-size: .7rem;
	cursor: pointer;
	transition: background-color .3s, padding-left .3s;
}

/*[1.24B] ANIMATE HEADER NAV BAR DEMO BUTTON MOBILE*/
.header .navbar-mobile #btn-demo:hover {
	background-color: var(--color-element-3);
	padding-left: 0;
	padding-right: 0;
}

/****************************************************************************************END TOP NAV BAR DEMO BUTTON - MOBILE*/
/****************************************************************************************START TOP NAV BAR DROP DOWN MENU - MOBILE - SERVICES*/

/*[1.25B] HEADER NAV BAR DROP DOWN SERVICES MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services {
	position: relative;
	width: 100%;
	height: 0rem;
	opacity: 0;
	visibility: hidden;
	background: var(--color-element-1);
	top: 0rem;
	transition: visibility .2s, opacity 0s, background 0s, top .4s;
}

/*[1.26B] HIDE HEADER NAV BAR DROP DOWN SERVICES MOBILE*/
.header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-services {
	display: none;
}

/*[1.27B] SHOW NAV BAR DROP DOWN SERVICES MOBILE*/
.header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-services:checked ~ .nav-mobile-dropdown-services,
.header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-services:focus-within ~ .nav-mobile-dropdown-services {
	visibility: visible;
	opacity: 1;
	background: #FFF;
	height: 20rem;
}

/*[1.28B] HEADER NAV BAR DROP DOWN SERVICES CARDS CONTAINER MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .container-cards {
	display: flex;
	flex-direction: row;
	padding-top: 0rem;
	width: 100%;
	margin-bottom: 2rem;
}

/*[1.29B] HEADER NAV BAR DROP DOWN SERVICES CARDS CONTAINER MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .slick-slider .slick-track {
	padding-bottom: 3rem;
}
/****************************************************************************************START DROP DOWN MENU CARD - MOBILE - SERVICES*/

/*[1.30B] HEADER NAV BAR DROP DOWN SERVICES CARDS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card {
	box-shadow: 0 10px 20px 0 var(--color-element-4);
	border-radius: 15px;
	width: 14rem;
	height: 18rem;
	cursor: pointer;
	background: white;
	transition: transform .3s, box-shadow .3s;
	margin-top: 1rem;
/*	margin-left: 1.125rem;
	margin-right: 1.125rem;*/
	margin: 0 auto;
}

/*[1.32B] ANIMATE HEADER NAV BAR DROP DOWN SERVICES CARDS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
	transform: translateY(-.5rem);
}

/*[1.33B] HEADER NAV BAR DROP DOWN SERVICES HEADING MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services h3 {
	font-weight: 700;
	font-size: 1.6rem;
	color: var(--color-text-1);
	margin-top: 1rem;
}

/*[1.34B] HEADER NAV BAR DROP DOWN SERVICES ARROW MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card div {
	display: flex;
	justify-content: space-between;
	padding-bottom: 1rem;
	max-height: 4rem;
	margin-bottom: 2rem;
}

/*[1.35B] HEADER NAV BAR DROP DOWN SERVICES IMAGE MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card div > img {
	padding-top: 1.125rem;
	padding-left: 1.125rem;
	width: 40%;
	height:40%;
}

/*[1.36B] STYLE HEADER NAV BAR DROP DOWN SERVICES ARROW MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card div > i {
	padding-top: 1rem;
	padding-right: 1.250rem;
	font-size: 1.125rem;
	color: var(--color-text-2);
	visibility: hidden;
	transition: all .3s;
}

/*[1.37B] HEADER NAV BAR DROP DOWN SERVICES HEADING MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card > h4 {
	font-size: 1.250rem;
	font-weight: 600;
	color: var(--color-text-2);
	text-align: center;
	padding-bottom: .8rem;
}

/*[1.38B] HEADER NAV BAR DROP DOWN SERVICES TEXT MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card > p {
	font-size: 1rem;
	font-weight: 400;
	color: var(--color-text-2);
	text-align: center;
	line-height: 1.6rem;
	padding-left: .6rem;
	padding-right: .6rem;
}

/*[1.39B] ANIMATE HEADER NAV BAR DROP DOWN SERVICES ARROW MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card:hover div > i {
	visibility: visible;
	transform: translateX(.5rem);
}

/****************************************************************************************END DROP DOWN MENU CARD - MOBILE - SERVICES*/
/****************************************************************************************END TOP NAV BAR DROP DOWN MENU - MOBILE - SERVICES*/
/****************************************************************************************START TOP NAV BAR DROP DOWN MENU - MOBILE - SOLUTIONS*/

/*[1.40B] HEADER NAV BAR DROP DOWN SOLUTIONS CONTAINER MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions {
	position: relative;
	width: 100%;
	height: 0rem;
	opacity: 0;
	visibility: hidden;
	background: var(--color-element-1);
	top: 0rem;
	transition: visibility .2s, opacity 0s, background 0s, top .4s;
}

/*[1.41B] HEADER NAV BAR DROP DOWN SOLUTIONS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-solutions {
	display: none;
}

/*[1.42B] SHOW HEADER NAV BAR DROP DOWN SOLUTIONS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-solutions:checked ~ .nav-mobile-dropdown-solutions,
.header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-solutions:focus-within ~ .nav-mobile-dropdown-solutions  {
	visibility: visible;
	opacity: 1;
	background: #FFF;
	height: 20.5rem;
}

/*[1.43B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile {
	width: 100vw;
	position: relative;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
}

/*[1.44B] HIDE HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS RADIO MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .radio-nav {
	display: none;
}

/*[1.45B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	align-items: flext-start;
}

/*[1.46B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav .lbl-nav-tabs {
	cursor: pointer;
	padding-bottom: 0.2rem;
}

/*[1.47B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav .lbl-nav-tabs:hover {
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0.5rem 0.8rem #00000080;
	border-bottom:  4px solid white;
}

/*[1.48B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB HEADING 1 MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav .tab h1 {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-1);
	padding-left: 0.9rem;
	padding-right: 0.9rem;
}

/*[1.49B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav {
	overflow: hidden;
	animation: fadein .8s;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: row;
	width: 100%;
}

/*[1.50B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS MOBILE*/
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*[1.51B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav {
	display: none;
}

/*[1.52B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents {
	width: 100%;
}

/*[1.53B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CONTAINER MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards {
	display: flex;
	justify-content: center;
	padding-top: 0rem;
	align-items: center;
	gap: .1rem;
	column-gap: 3rem;
	flex-wrap: wrap;
}

/*[1.54B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS BLANK CARD MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards #blank-card {
	visibility: hidden;
}

/*[1.55B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE CONTAINER MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div {
	position: relative;
	max-width: 45%;
	min-height: 45%;
	margin-top: .9rem;
	margin-bottom: .9rem;
}

/*[1.56B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div > img {
	width: 100%;
}

/*[1.57B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card {
	box-shadow: 0 2px 20px 0 var(--color-element-4);
	border-radius: 15px;
	min-width: 7rem;
	max-width: 7rem;
	min-height: 9rem;
	max-height: 9rem;
	margin-bottom: .8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	transition: transform .3s;
}

/*[1.58B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
	transform: translateY(-.5rem);
}

/*[1.59B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}

/*[1.60B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER IMAGE MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div > img {
	width: 100%;
	margin-left: 0.5rem;
}

/*[1.61B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div > i {
	font-size: 0.8rem;
	color: var(--color-text-2);
	visibility: hidden;
	transition: transform .3s;
}

/*[1.62B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card:hover div > i {
	visibility: visible;
	transform: translateX(.5rem);
}

/*[1.63B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER HEADING MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card h4 {
	color: var(--color-text-1);
	font-weight: 600;
	font-size: .9rem;
/*	margin-top: .5rem;*/
	margin-bottom: .5rem;
}

/*[1.64B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER SUMMARY MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card p {
	color: var(--color-text-2);
	font-weight: 400;
	font-size: .6rem;
	padding-left: .4rem;
	padding-right: .4rem;
	margin-bottom: .9rem;
	flex-wrap: wrap;
	text-align: center;
}

/*[1.65B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .text {
	display: grid;
	grid-template-areas:
	 'panel-content-text-counter panel-content-text';
	color: var(--color-text-1);
	padding-bottom: 1rem;
	min-width: 15rem;
	max-width: 15rem;
	justify-content: start;
	align-items: flex-start;
}

/*[1.66B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .text h1 {
	grid-area: panel-content-text-counter;
	font-size: 1.2rem;
	color: var(--color-text-1);
	font-weight: 500;
	margin-right: 1rem;
}

/*[1.67B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT SUB HEADING MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .text h2 {
	grid-area: panel-content-text;
	font-size: .9rem;
	color: var(--color-text-1);
	font-weight: normal;
	line-height: 1.5rem;
}

/*[1.68B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING IN ROW FORM MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .row {
	display: flex;
	flex-direction: row;
}

/*[1.69B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS TEXT IN ROW FORM MOBILE*/
.header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .text-row {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
}

/*[1.70B] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS MOBILE*/
#radio-nav-mobile-1:checked ~ .tabs-nav #lbl-nav-tab-1,
#radio-nav-mobile-2:checked ~ .tabs-nav #lbl-nav-tab-2,
#radio-nav-mobile-3:checked ~ .tabs-nav #lbl-nav-tab-3,
#radio-nav-mobile-4:checked ~ .tabs-nav #lbl-nav-tab-4 {
	border-bottom:  4px solid var(--color-element-1);
	box-shadow: 0 5px 20px 0 var(--color-element-4);
}

/*[1.71B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS MOBILE*/
#radio-nav-mobile-1:checked ~ .tabs-nav #lbl-nav-tab-1 * i,
#radio-nav-mobile-2:checked ~ .tabs-nav #lbl-nav-tab-2 * i,
#radio-nav-mobile-3:checked ~ .tabs-nav #lbl-nav-tab-3 * i,
#radio-nav-mobile-4:checked ~ .tabs-nav #lbl-nav-tab-4 * i{
	visibility: visible;
	transform: translateX(0rem);
}

/*[1.72B] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR PANELS MOBILE*/
#radio-nav-mobile-1:checked ~ * #panel-nav-mobile-1,
#radio-nav-mobile-2:checked ~ * #panel-nav-mobile-2,
#radio-nav-mobile-3:checked ~ * #panel-nav-mobile-3,
#radio-nav-mobile-4:checked ~ * #panel-nav-mobile-4 {
	display: block;
}
/****************************************************************************************END TOP NAV BAR DROP DOWN MENU - MOBILE - SOLUTIONS*/

/****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/
/****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/
/****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/
/****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/






/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
/****************************************************************************************START SECTION 2 - MAIN - INTRO*/

/*[2.1] INTRO CONTAINER*/
main .intro {
	max-width: 82vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding-bottom: 1rem;
}

/*[2.2] INTRO IMAGE CONTAINER*/
main .intro .image-box {
	width: 50%;
}

/*[2.3] INTRO IMAGE*/
main .intro .image-box img {
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/*[2.4] INTRO TEXT CONTAINER MOBILE*/
main .intro .text-box-mobile {
	display: none;
}

/*[2.5] INTRO TEXT CONTAINER DESKTOP*/
main .intro .text-box-desktop {
	width: 50%;
	padding-right: 5rem;
}

/*[2.6] INTRO TEXT HEADING DESKTOP*/
/*main .intro .text-box-desktop h1 {
	color: var(--color-text-1);
	font-size: clamp(1rem, 0.5714rem + 2.1429vw, 4rem);
	font-weight: 600;
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}*/

/*[2.7] INTRO TEXT SUBHEADING DESKTOP*/
main .intro .text-box-desktop h2 {
	color: var(--color-text-2);
	font-size: clamp(0.8rem, 0.6286rem + 0.8571vw, 2rem);
	font-weight: 600;
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}

/*[2.8] INTRO TEXT DETAIL DESKTOP*/
/*main .intro .text-box-desktop p {
	width: fit-content;
	color: var(--color-text-2);
	font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem);
	font-weight: normal;
	line-height: 1.5rem;
	padding-bottom: 5rem;
	/ *border-bottom: 2px solid var(--color-element-2);* /
}*/

/*[2.9] INTRO TEXT CONTAINER MOBILE*/
main .intro .text-box-mobile {
	width: 100%;
	padding-right: 0rem;
}

/*[2.10] INTRO TEXT HEADING MOBILE*/
main .intro .text-box-mobile h1 {
	color: var(--color-text-1);
	font-size: clamp(1rem, 0.5714rem + 2.1429vw, 4rem);
	font-weight: 600;
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}

/*[2.11] INTRO TEXT SUBHEADING MOBILE*/
main .intro .text-box-mobile h2 {
	color: var(--color-text-2);
	font-size: clamp(0.8rem, 0.6286rem + 0.8571vw, 2rem);
	font-weight: 600;
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}

/****************************************************************************************END SECTION 2 - MAIN - INTRO*/
/****************************************************************************************END SECTION 2 - MAIN - INTRO*/
/****************************************************************************************END SECTION 2 - MAIN - INTRO*/
/****************************************************************************************END SECTION 2 - MAIN - INTRO*/






/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/

h1 {
	font-size: 54px;
	color: #3A4A5B;
	font-weight: 700;
	line-height: 1em;
	margin-top: 32px !important;
	margin-bottom: 32px !important;
}
h2 {
	font-size: 48px;
	color: #3A4A5B;
	font-weight: 700;
	line-height: 1em;
	margin-top: 10px;
	margin-bottom: 30px;
}
h3 {
	font-size: 32px;
	color: #3A4A5B;
	font-weight: 700;
	line-height: 1em;
	margin-top: 10px;
	margin-bottom: 30px;
}
h4 {
	font-size: 28px;
	color: #607B8B;
	font-weight: 400;
	line-height: 1em;
	margin-top: 10px;
	margin-bottom: 30px;
    padding-bottom: 0px !important;
}
h5 {
	font-size: 24px;
	color: #3A4A5B;
	font-weight: 700;
	line-height: 1em;
	margin-top: 10px;
	margin-bottom: 30px;
}
h6 {
	font-size: 20px;
	color: #607B8B;
	font-weight: 600;
	line-height: 1em;
	margin-top: 10px;
	margin-bottom: 14px;
}
p {
	font-size: 16px;
	color: #607B8B;
	font-weight: Normal;
	line-height: 1.8em;
	margin-top: 0px;
	margin-bottom: 25px;
}

/*[3.1] CONTENT 1 CONTAINER*/
main .content-1 {
	max-width: 75vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	padding-bottom: 1rem;
}

/*[3.2] CONTENT 1 TEXT CONTAINER*/
main .content-1 .text-box {
	width: 40%;
	padding-right: 2rem;
}

/*[3.3] CONTENT 1 TEXT HEADING*/
main .content-1 .text-box h2 {
	color: var(--color-text-1);
	font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem);
	font-weight: 600;
	padding-bottom: clamp(1.2rem, 1.1143rem + 0.4286vw, 1.8rem);	
}

/*[3.4] CONTENT 1 TEXT DETAIL*/
main .content-1 .text-box li {
	color: var(--color-text-1);
	font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem);
	font-weight: 400;
	line-height: clamp(1.2rem, 1.1143rem + 0.4286vw, 1.8rem);	
}

/*[3.5] CONTENT 1 TEXT DETAIL*/
main .content-1 .text-box li {
	color: var(--color-text-3);
	font-size: .8rem;
	font-weight: 700;
	display: flex;
	align-items: baseline;
	margin-bottom: 1rem;
}

/*[3.6] CONTENT 1 TEXT DETAIL*/
main .content-1 .text-box li .li-text {
	color: #607B8B;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.8em;
    margin-left: 1.6rem;
    margin-top: 0px;
}

/*[3.7] CONTENT 1 IMAGE CONTAINER*/
main .content-1 .image-box {
	width: 60%;
}

/*[3.8] CONTENT 1 IMAGE*/
main .content-1 .image-box img {
	width: 100%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
}

/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/






/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/

/*[4.1] CONTENT 2*/
main .content-2-carousel {
	width: 82vw;
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	/*border-bottom: 3px solid var(--color-element-4);*/
}

/*[4.2] CONTENT 2*/
main .content-2-carousel .heading {
	margin: 0 auto;
	text-align: center;
	width: 100%;
	margin-top: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
	margin-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}

/*[4.3] CONTENT 2*/
main .content-2-carousel .heading h2 {
	color: var(--color-text-1);
	font-size: clamp(0.8rem, 0.6286rem + 0.8571vw, 2rem);
	font-weight: 600;
	margin-bottom: 4rem;
}

/*[4.4] CONTENT 2 SLIDER CONTAINER*/
.slick-slider {
	width: 82vw;
	margin: 0 auto;
	margin-bottom: 5rem;
}

/*[4.5] CONTENT 2 SLIDER CONTAINER LIST*/
.slick-slider .slick-track,.slick-slider .slick-list {
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin: 0 auto;
	text-align: center;
}

/*[4.6] CONTENT 2 SLIDER CURRENT CARD*/
.slick-active {
	opacity: 1;
	filter: grayscale(0%);
}

/*[4.7] CONTENT 2 SLIDER CURRENT CARD*/
.slick-slide + .slick-current {
	opacity: 1;
	filter: grayscale(0%);
}

/*[4.8] CONTENT 2 SLIDER PREV NEXT CARD*/
.slick-slide {
	margin-top: 0;
	margin-bottom:0;
	margin-left: clamp(4rem, 3.4286rem + 2.8571vw, 8rem);
	margin-right: clamp(4rem, 3.4286rem + 2.8571vw, 8rem);
	border: none;
	outline: none;
	min-width: 25rem;
	max-width: 30rem;
	max-height: 30rem;
	cursor: pointer;
	text-align: center;
	opacity: .2;
	filter: grayscale(90%);
}

/*[4.9] CONTENT 2 SLIDER CARD HEADING*/
.slick-slide h2 {
	font-size: clamp(0.8rem, 0.6286rem + 0.8571vw, 2rem);
	font-weight: normal;
	line-height: 2rem;
}

/*[4.10] CONTENT 2 SLIDER CARD HEADING*/
.slick-slide h2 .text-highlight-1 {
	color: var(--color-text-3);
}

/*[4.11] CONTENT 2 SLIDER CARD HEADING HIGHLIGHTS*/
.slick-slide h2 .text-highlight {
	color: var(--color-text-3);
	font-weight: 600;
}

/*[4.12] CONTENT 2 SLIDER ARROW PREV CONTAINER*/
.slick-prev {
	z-index: 100;
	left: clamp(10rem, 14.2857rem + -8.9286vw, 0rem);
}

/*[4.13] CONTENT 2 SLIDER ARROW PREV*/
.slick-prev:before {
	z-index: 100;
	display: inline-block;
	border-right: 10px solid var(--color-text-2);
	border-bottom: 10px solid var(--color-text-2);
	transform: rotate(-225deg);
	opacity: 1;
	position: absolute;
	top: 0rem;
	left: clamp(-5rem, -17.8571rem + 26.7857vw, 25rem);
}

/*[4.14] CONTENT 2 SLIDER ARROW NEXT CONTAINER*/
.slick-next {
	z-index: 100;
	right: clamp(10rem, 14.2857rem + -8.9286vw, 0rem);
}

/*[4.15] CONTENT 2 SLIDER ARROW NEXT*/
.slick-next:before {
	z-index: 100;
	display: inline-block;
	border-right: 10px solid var(--color-text-2);
	border-bottom: 10px solid var(--color-text-2);
	transform: rotate(315deg);
	opacity: 1;
	position: absolute;
	top: 0rem;
	right: clamp(-5rem, -17.8571rem + 26.7857vw, 25rem);
}

/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/






/****************************************************************************************START SECTION 5 - MAIN - VIEW OFFERS CARDS*/
/****************************************************************************************START SECTION 5 - MAIN - VIEW OFFERS CARDS*/
/****************************************************************************************START SECTION 5 - MAIN - VIEW OFFERS CARDS*/
/****************************************************************************************START SECTION 5 - MAIN - VIEW OFFERS CARDS*/

/*[5.1] MAIN VIEW OFFERS CARDS CONTAINER*/
main .view-offers-cards {
	width: 60vw;
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
    border-bottom: 3px solid var(--color-element-4);
}

/*[5.2] MAIN VIEW OFFERS CARDS CONTAINER HEADING*/
main .view-offers-cards > h1 {
	color: var(--color-text-1);
	font-size: clamp(1.5rem, 1.0714rem + 0.8929vw, 2.5rem);
	font-weight: 600;
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
	text-align: center;
}

/*[5.3] MAIN VIEW OFFERS CARDS CONTAINER FOR CARDS*/
main .view-offers-cards .container-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 2rem;
    max-width: 900px;
    margin: 0px auto;
	margin-top: 3rem;
    margin-bottom: 5rem;
}

/*[5.4] MAIN VIEW OFFERS CARDS CARD*/
main .view-offers-cards .container-cards .card {
	width: 19rem;
	height: 8rem;
	box-shadow: 0 5px 20px 0 var(--color-element-4);
	border-radius: 15px;
	cursor: pointer;
	background: white;
	transition: transform .3s, box-shadow .2s;
}

/*[5.5] ANIMATE MAIN VIEW OFFERS CARDS CARD*/
main .view-offers-cards .container-cards .card:hover {
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
}

/*[5.6] MAIN VIEW OFFERS CARDS CARD IMAGE*/
main .view-offers-cards .container-cards .card {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding-left: 2rem;
	padding-right: 2rem;
	gap: 2rem;
}

/*[5.7] MAIN VIEW OFFERS CARDS CARD IMAGE*/
main .view-offers-cards .container-cards .card img {
	width: 3rem;
	height: 3rem;
}

/*[5.8] MAIN VIEW OFFERS CARDS CARD TEXT*/
main .view-offers-cards .container-cards .card h5 {
	color: #3a4a5b;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
}

/*[5.9] MAIN VIEW OFFERS CARDS CARD TEXT*/
/*main .view-offers-cards .container-cards .card p {
	color: var(--color-text-2);
	font-size: .9rem;
	font-weight: normal;
	line-height: 1.6rem;
}*/

/****************************************************************************************END SECTION 5 - MAIN - VIEW OFFERS CARDS*/
/****************************************************************************************END SECTION 5 - MAIN - VIEW OFFERS CARDS*/
/****************************************************************************************END SECTION 5 - MAIN - VIEW OFFERS CARDS*/
/****************************************************************************************END SECTION 5 - MAIN - VIEW OFFERS CARDS*/






/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/

/*[6.1] PRODUCTS CONTAINER*/
main .products {
	max-width: 75vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-top: 6rem;
	margin-bottom: 6rem;
}

/*[6.2] PRODUCTS IMAGE CONTAINER*/
main .products .image-box {
	width: 50%;	
	text-align: initial;
	padding-left: 1rem;
}

/*[6.3] PRODUCTS IMAGE*/
main .products .image-box img {
	width: 66%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;	
}

/*[6.4] PRODUCTS TEXT CONTAINER*/
main .products .text-box {
	width: 50%;
}

/*[6.5A] PRODUCTS TEXT HEADING*/
main .products .text-box h1 {
	color: var(--color-text-1);
	font-size: clamp(1rem, 0.8571rem + 0.7143vw, 2rem);
	font-weight: 700;	
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
	display: none;
}

/*[6.5B] PRODUCTS TEXT HEADING*/
main .products .text-box h2 {
	color: var(--color-text-1);
	font-size: clamp(0.9rem, 0.8357rem + 0.3214vw, 1.35rem);
	font-weight: 700;	
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
}

/*[6.6] PRODUCTS TEXT DETAIL*/
main .products .text-box p {
	width: fit-content;
	color: var(--color-text-2);
	font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem);
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
	font-weight: normal;
}

/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/






/****************************************************************************************START SECTION 7 - MAIN - SOLUTIONS CARDS*/
/****************************************************************************************START SECTION 7 - MAIN - SOLUTIONS CARDS*/
/****************************************************************************************START SECTION 7 - MAIN - SOLUTIONS CARDS*/
/****************************************************************************************START SECTION 7 - MAIN - SOLUTIONS CARDS*/

/*[7.1A] SOLUTIONS CARDS CONTAINER*/
main .solutions-cards-container {
	width: 92vw;
	background: white;
	padding-bottom: 2.5rem;
	transition: all .5s ease;
	margin: 0 auto 0;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

/*[7.1B] SOLUTIONS CARDS CONTAINER HEADING*/
main .solutions-cards-container h1 {
	color: var(--color-text-1);
	font-size: clamp(1.5rem, 1.0714rem + 0.8929vw, 2.5rem);
	font-weight: 600;
	padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
	text-align: center;	
}
main .solutions-cards-container h3 {
    color: var(--color-text-2);
    font-size: 1.250rem;
    font-weight: 600;
    padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem);
    text-align: center;
}
main .solutions-cards-container h3 span,
main .solutions-cards-container h6 span {
    color: var(--color-text-3);
}

/*[7.2] SOLUTIONS CARDS*/
main .solutions-cards-container .container-cards {
	display: grid;
	justify-items: center;
	grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
	grid-gap: .3rem;
	padding-top: 3.125rem;
}

/*[7.3] SOLUTIONS CARDS*/
main .solutions-cards-container .container-cards .nav-card {
	box-shadow: 0 10px 20px 0 var(--color-element-4);
	border-radius: 15px;
	width: 7.5rem;
	height: 10rem;
	cursor: pointer;
	background: white;
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: all .3s;
}

/*[7.4] ANIMATE SOLUTIONS CARDS*/
main .solutions-cards-container .container-cards .nav-card:hover {
	/*box-shadow: 0 20px 40px 0 var(--elements-colour-shadow);*/
	box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset;
	transform: translateY(-.5rem);
}

/*[7.5] SOLUTIONS CARDS DISPLAY*/
main .solutions-cards-container .container-cards .nav-card div {
	display: flex;
	justify-content: space-between;
	padding-bottom: .6rem;
}

/*[7.6] SOLUTIONS CARDS IMAGE*/
main .solutions-cards-container .container-cards .nav-card div > img {
	width: 3.438rem;
	height: 4.125rem;
}

/*[7.7] SOLUTIONS CARDS ARROW*/
main .solutions-cards-container .container-cards .nav-card > i {
	margin-left: 3.5rem;
	font-size: .8rem;
	color: var(--color-text-2);
	visibility: hidden;
	transition: all .5s ease-in ease-out;
	transform: translateY(.5rem);
}

/*[7.8] SOLUTIONS CARDS TEXT HEADING*/
main .solutions-cards-container .container-cards .nav-card > h4 {
	font-size: .8rem;
	font-weight: 700;
	color: var(--color-text-2);
	text-align: center;
    margin-bottom: 0px !important;
    padding-bottom: 0.5rem !important;
}

/*[7.9] SOLUTIONS CARDS TEXT DETAIL*/
main .solutions-cards-container .container-cards .nav-card > p {
	font-size: .66rem;
	font-weight: 600;
	color: var(--color-text-2);
	text-align: center;
	line-height: .8rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}

/*[7.10] SHOW SOLUTIONS CARDS ARROW ON HOVER*/
main .solutions-cards-container .container-cards .nav-card:hover > i {
	visibility: visible;
	transform: translate(1em,.5rem);
}

/****************************************************************************************END SECTION 7 - MAIN - SOLUTIONS CARDS*/
/****************************************************************************************END SECTION 7 - MAIN - SOLUTIONS CARDS*/
/****************************************************************************************END SECTION 7 - MAIN - SOLUTIONS CARDS*/
/****************************************************************************************END SECTION 7 - MAIN - SOLUTIONS CARDS*/






/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/

/*[8.1] DEMO CONTAINER*/
main .arrange-demo {
	width: 92vw;
	height: 8rem;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	align-items: center;
	margin-top: 5rem;
	margin-bottom: 2rem;
	flex-wrap: wrap;
	gap: clamp(2rem, 1.1429rem + 4.2857vw, 8rem);
}

/*[8.2] STYLE DEMO BUTTON */
main .arrange-demo #btn-demo-main {
	width: clamp(8rem, 7.3571rem + 3.2143vw, 12.5rem);
	height: clamp(2.4rem, 2.2071rem + 0.9643vw, 3.75rem);
	color: white;
	background-color: var(--color-text-3);
	border-radius: 12px;
	font-weight: 500;
	font-size: clamp(0.8rem, 0.7429rem + 0.2857vw, 1.2rem);
	cursor: pointer;
	padding-left: clamp(1.1rem, 1.0786rem + 0.1071vw, 1.25rem);
	transition: background-color .3s, padding-left .3s;
}


/*[8.3] HIDE DEMO BUTTON ARROW*/
main .arrange-demo #btn-demo-main > i {
	visibility: hidden;
	font-size: clamp(0.8rem, 0.7714rem + 0.1429vw, 1rem);
	transform: translateX(-1.2rem);
	transition: transform .3s, margin-left .3s;
}

/*[8.4] ANIMATE DEMO BUTTON */
main .arrange-demo #btn-demo-main:hover {
	background-color: var(--color-element-3);
}

/*[8.5] SHOW DEMO BUTTON ARROW */
main .arrange-demo #btn-demo-main:hover > i {
	transform: translateX(.5rem);
	visibility: visible;
}

/*[8.6] SHOW DEMO BUTTON ARROW */
main .arrange-demo #btn-demo-main:hover {
	padding-left: 0;
	padding-right: 0;
}

/*[8.7] STYLE SECTION TEXT*/
main .arrange-demo h4 {
	color: var(--color-text-2);
	font-weight: 700;
	font-size: clamp(1rem, 0.9143rem + 0.4286vw, 1.6rem);
}

/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/






/****************************************************************************************START SECTION 9 - FOOTER*/
/****************************************************************************************START SECTION 9 - FOOTER*/
/****************************************************************************************START SECTION 9 - FOOTER*/
/****************************************************************************************START SECTION 9 - FOOTER*/

/*[9.1] FOOTER CONTAINER*/
.footer {
	margin: 0 auto;
	margin-top: 1rem;
	padding-top: 2rem;
	width: 92vw;
	border-top: 1.6px solid var(--color-element-2);
	padding-bottom: 2rem;
}

/*[9.2] FOOTER LIST ITEMS SPACING*/
.footer .list-container {
	width: 79%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin: 0 auto;
}

/*[9.3] FOOTER LIST*/
.footer .list-container .list {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	line-height: clamp(1.8rem, 1.7714rem + 0.1429vw, 2rem);
}

/*[9.4] FOOTER LIST HEADING*/
.footer .list-container .list h3 {
	color: var(--color-text-1);
	font-weight: 700;
	font-size: clamp(1.2rem, 1.1929rem + 0.0357vw, 1.25rem);
	font-family: SourceSansPro-Bold, "Source Sans Pro";
    margin: 0px 0px 4px 0px;
}

/*[9.5] FOOTER LIST LINKS*/
.footer .list-container .list a {
	color: var(--color-text-2);
	font-weight: 600;
	font-size: .9rem;
	font-family: SourceSansPro-SemiBold, "Source Sans Pro";
	position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/
}

/*[9.6] FOOTER LIST ACTIVE PAGE*/
.footer .list-container .list a.active {
	color: var(--color-text-3);
}

/*[9.7] FOOTER LIST BLANK SPACE*/
.footer .list-container .list .blank-content {
	visibility: hidden;
}

/*[9.8] FOOTER LIST SOCIAL ICONS*/
.footer .list-container .list .social-icons i {
	color: var(--color-text-2);
	margin-right: .6rem;
	font-size: clamp(1rem, 0.9786rem + 0.1071vw, 1.15rem);
	position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/
	transition: color .2s;
}

/*[9.9] FOOTER LOGO*/
.footer .nav-logo {
	background-image: url('../elements/Top Nav Bar/UON Logo.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: clamp(7rem, 6.8571rem + 0.7143vw, 8rem);
	height: clamp(2rem, 2rem + 0vw, 2rem);
	cursor: pointer;
	position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/
}

/*[9.10a] FOOTER NAV MENU ITEMS LINKS*/
.footer .list-container .footer-nav-link:after {
	content: "";
	background-color: var(--color-text-3);
	width: 0;
	height: .125rem;
	border-radius: 50px;
	position: absolute;
	left: auto;
	transition: width 200ms ease-in;
	display: flex;
}

/*[9.10b] ANIMATE FOOTER NAV MENU ITEMS LINKS*/
.footer .list-container .footer-nav-link:hover:after {
	width: 100%;
}

/*[9.11] FOOTER NAV MENU LINKS NESTED*/
.footer .link-nested {
	display: inline-block;
	position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/
}

/*[9.12] ANIMATE FOOTER NAV MENU ITEMS SOCIAL LINKS*/
.footer .list-container .list .social-icons i:hover {
	color: var(--color-text-3);
	transform: scale(1.2);
}

/****************************************************************************************END SECTION 9 - FOOTER*/
/****************************************************************************************END SECTION 9 - FOOTER*/
/****************************************************************************************END SECTION 9 - FOOTER*/
/****************************************************************************************END SECTION 9 - FOOTER*/






/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/
/****************************************************************************************BEGIN RESPONSIVE DESIGN*/





/****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/

	/************************************************************************************START RESPONSIVE DESIGN - 1366px*/
	@media (max-width: 1366px) {

		/**********************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/
		
		/*[1.19] STYLE TOP NAV BAR DROP DOWN MENU*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services {
			padding-left: 0rem;
		}

		/*[1.21] STYLE TOP NAV BAR DROP DOWN MENU*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .container-cards {
			gap: 5rem;
			padding-top: 3rem;
		}
		/**********************************************************************************END TOP NAV BAR DROP DOWN MENU - -DESKTOP - SERVICES*/
	}
	/************************************************************************************END RESPONSIVE DESIGN - 1366px*/

	/************************************************************************************START RESPONSIVE DESIGN - 1024px*/
	@media (max-width: 1024px) {

		/**********************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/

		/*[1.19] STYLE TOP NAV BAR DROP DOWN MENU*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services {
			padding-right: 2rem;
			padding-left: 0rem;
		}


		/*[1.21] STYLE TOP NAV BAR DROP DOWN MENU*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .container-cards {
			gap: 4rem;
			padding-top: 2rem;
		}

		/**********************************************************************************START DROP DOWN MENU CARD - DESKTOP - SERVICES*/

		/*[1.22] STYLE TOP NAV BAR DROP DOWN MENU CARD*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card {
			width: 11.5rem;
			min-height: 16rem;
			max-height: 16rem;
		}

		/*[1.24] STYLE TOP NAV BAR DROP DOWN MENU HEADINGS*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services h3 {
			margin-top: .5rem;
		}

		/*[1.25] ANIMATE TOP NAV BAR DROP DOWN MENU CARD ARROW*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div {
			max-height: 5rem;
			margin-bottom: 0rem;
		}

		/*[1.26] ANIMATE TOP NAV BAR DROP DOWN MENU CARD ARROW*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > img {
			padding-top: 1rem;

		}

		/*[1.27] ANIMATE TOP NAV BAR DROP DOWN MENU CARD ARROW*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > i {
			padding-top: .9rem;
			padding-right: 1.150rem;
			font-size: 1.150rem;
		}

		/*[1.28] STYLE TOP NAV BAR DROP DOWN MENU CARD TEXT*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > h4 {
			font-size: 1.08rem;
			padding-bottom: .6rem;
		}

		/*[1.29] STYLE TOP NAV BAR DROP DOWN MENU CARD TEXT*/
		.header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > p {
			font-size: .8rem;
			line-height: 1.5rem;
			padding-left: .6rem;
			padding-right: .6rem;
		}

		/**********************************************************************************END DROP DOWN MENU CARD - DESKTOP - SERVICES*/
		/**********************************************************************************END TOP NAV BAR DROP DOWN MENU - -DESKTOP - SERVICES*/
	}
	/************************************************************************************END RESPONSIVE DESIGN - 1024px*/

	/**************************************************************************************START RESPONSIVE DESIGN - 768px*/
	/**************************************************************************************START RESPONSIVE DESIGN - 768px*/
	/**************************************************************************************START RESPONSIVE DESIGN - 768px*/
	/**************************************************************************************START RESPONSIVE DESIGN - 768px*/
	
	@media (max-width: 768px) {

		/*[1.1B] HEADER NAV BAR MOBILE CONTAINER*/
		.header .navbar-mobile {
			position: fixed;
			top: 0;
			right: 0;
			left: 0;
			padding-left: 1rem;
			padding-right: 1rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 1000;
			background-color: rgba(256,256,256, .9);
			border-bottom: 1.6px solid var(--color-element-2);
		}

		/*[1.2B] HIDE HEADER NAV BAR DESKTOP*/
		.header .navbar-desktop {
			display: none;
		}
	}

	/**************************************************************************************END RESPONSIVE DESIGN - 768px*/
	/**************************************************************************************END RESPONSIVE DESIGN - 768px*/
	/**************************************************************************************END RESPONSIVE DESIGN - 768px*/
	/**************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/
/****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/





/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
/****************************************************************************************START SECTION 2 - MAIN - INTRO*/
	
	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 768px) {
		/*[2.1] INTRO CONTAINER*/
		main .intro {
			flex-direction: column;
			margin-top: 1rem;
		}

		/*[2.2] INTRO IMAGE CONTAINER*/
		main .intro .image-box {
			width: 100%;
		}

		/*[2.4] INTRO TEXT CONTAINER MOBILE*/
		main .intro .text-box-mobile {
			display: block;
		}

		/*[2.5] INTRO TEXT CONTAINER DESKTOP*/
		main .intro .text-box-desktop {
			width: 100%;
			padding-right: 0rem;
		}

		/*[2.6] INTRO TEXT HEADING DESKTOP*/
		main .intro .text-box-desktop h1 {
			display: none;
		}

		/*[2.7] INTRO TEXT SUBHEADING DESKTOP*/
		main .intro .text-box-desktop h2 {
			display: none;
		}

		/*[2.8] INTRO TEXT DETAIL DESKTOP*/
		main .intro .text-box-desktop p {
			padding-bottom: 2rem;
		}

		/*[2.9] INTRO TEXT CONTAINER MOBILE*/
		main .intro .text-box-mobile {
			width: 100%;
			padding-right: 0rem;
		}

		/*[2.10] INTRO TEXT HEADING MOBILE*/
		main .intro .text-box-mobile h1 {
			color: var(--color-text-1);
			font-size: clamp(1rem, 0.5714rem + 2.1429vw, 4rem);
			font-weight: 600;
			padding-bottom: 1rem;
		}

		/*[2.11] INTRO TEXT SUBHEADING MOBILE*/
		main .intro .text-box-mobile h2 {
			padding-bottom: 1.5rem
		}		
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 2 - MAIN - INTRO*/
/****************************************************************************************END SECTION 2 - MAIN - INTRO*/
/****************************************************************************************END SECTION 2 - MAIN - INTRO*/
/****************************************************************************************END SECTION 2 - MAIN - INTRO*/





/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************START SECTION 3 - MAIN - CONTENT 1*/
	
	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 768px) {
		/*[3.1] CONTENT 1 CONTAINER*/
		main .content-1 {
			flex-direction: column-reverse;
			width: 92vw;
			margin-top: 0rem;
		}

		/*[3.2] CONTENT 1 TEXT CONTAINER*/
		main .content-1 .text-box {
			width: 90%;
			padding-right: 0rem;
		}

		/*[3.3] CONTENT 1 TEXT HEADING*/
		main .content-1 .text-box h2 {
			padding-bottom: 1.2rem;
		}


		/*[3.5] CONTENT 1 IMAGE CONTAINER*/
		main .content-1 .image-box {
			width: 100%;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/
/****************************************************************************************END SECTION 3 - MAIN - CONTENT 1*/





/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************START SECTION 4 - MAIN - CONTENT 2*/
	
	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 768px) {
		/*[4.1] CONTENT 2*/
		main .content-2-carousel {
			width: 92vw;
			margin-bottom: 4rem;
		}

		/*[4.4] CONTENT 2 SLIDER CONTAINER*/
		.slick-slider {
			width: 75vw;
			margin-bottom: 4rem;
		}

		/*[4.7] CONTENT 2 SLIDER PREV NEXT CARD*/
		.slick-slide {
			min-width: 16rem;
			max-width: 16rem;
		}

		/*[4.10A] CONTENT 2 SLIDER ARROW PREV CONTAINER*/
		.slick-prev {
		  left: 10rem;
		}

		/*[4.10B] CONTENT 2 SLIDER ARROW PREV*/
		.slick-prev:before {
			left: -12rem;
		}

		/*[4.11A] CONTENT 2 SLIDER ARROW NEXT CONTAINER*/
		.slick-next {
		  right: 10rem;
		}

		/*[4.11B] CONTENT 2 SLIDER ARROW NEXT*/
		.slick-next:before {
			right: -12rem;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/
/****************************************************************************************END SECTION 4 - MAIN - CONTENT 2*/





/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************START SECTION 6 - MAIN - PRODUCTS*/
	
	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 767px) {
		/*[6.1] PRODUCTS CONTAINER*/
		main .products {
			flex-direction: column;
			max-width: 82vw;
			padding-top: 2rem;
			padding-bottom: 2rem;
		}

		/*[6.2] PRODUCTS IMAGE CONTAINER*/
		main .products .image-box {
			width: 100%;	
			text-align: center;
			padding-left: 0rem;
			padding-bottom: 2rem;
		}

		/*[6.3] PRODUCTS IMAGE*/
		main .products .image-box img {
			width: 90%;
		}

		/*[6.4] PRODUCTS TEXT CONTAINER*/
		main .products .text-box {
			width: 100%;
		}

		/*[6.5A] PRODUCTS TEXT HEADING*/
		main .products .text-box h1 {
			color: var(--color-text-1);
			font-size: 1.5rem;
			font-weight: 700;	
			padding-bottom: 1rem;
			display: block;
		}

		/*[6.5B] PRODUCTS TEXT HEADING*/
		main .products .text-box h2 {
			color: var(--color-text-2);
			font-weight: normal;	
			padding-bottom: 1rem;
		}

		/*[6.6] PRODUCTS TEXT DETAIL*/
		main .products .text-box p {
			padding-bottom: 1rem;
			font-weight: normal;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/
/****************************************************************************************END SECTION 6 - MAIN - PRODUCTS*/





/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/

	/************************************************************************************START RESPONSIVE DESIGN - 1024px*/
	@media (max-width: 1024px) {

		/*[8.3] HIDE DEMO BUTTON ARROW*/
		main .arrange-demo #btn-demo-main > i {
			visibility: hidden;
			transform: translateX(-.5rem);
			font-size: .8rem;
		}

		/*[8.5] SHOW DEMO BUTTON ARROW */
		main .arrange-demo #btn-demo-main:hover > i {
			transform: translateX(.4rem);
			margin-left: .4rem;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 1024px*/

/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/





/****************************************************************************************START SECTION 9 - FOOTER*/
/****************************************************************************************START SECTION 9 - FOOTER*/
/****************************************************************************************START SECTION 9 - FOOTER*/
/****************************************************************************************START SECTION 9 - FOOTER*/

	/************************************************************************************START RESPONSIVE DESIGN - GREATER 1920px*/
	@media (min-width: 1920px) {
		/*[9.2] SPACE OUT EACH MENU LIST*/
		.footer .list-container {
			width: 70%;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - GREATER 1920px*/

	/************************************************************************************START RESPONSIVE DESIGN - 1024px*/
	@media (max-width: 1024px) {
		/*[9.2] SPACE OUT EACH MENU LIST*/
		.footer .list-container {
			width: 92%;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 1024px*/

	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 768px) {
		/*[9.2] FOOTER LIST ITEMS SPACING*/
		.footer .list-container {
			flex-direction: column;
			gap: 2rem;
		}

		/*[9.3] FOOTER LIST*/
		.footer .list-container .list {
			line-height: 2rem;
		}

		/*[9.4] FOOTER LIST HEADING*/
		/*.footer .list-container .list h3 {
			font-size: 1.6rem;
			font-weight: 600;
		}*/

		/*[9.5] FOOTER LIST LINKS*/
		/*.footer .list-container .list a {
			font-size: 1.12rem;
		}*/

		/*[9.7] FOOTER LIST BLANK SPACE*/
		.footer .list-container .list .blank-content {
			display: none;
		}

		/*[9.8] FOOTER LIST SOCIAL ICONS*/
		.footer .list-container .list .social-icons i {
			margin-right: 2rem;
			font-size: 2rem;
			margin-top: 2rem;
		}

		/*[9.9] FOOTER LOGO*/
		.footer .nav-logo {
			margin-bottom: .6rem;
		}

		/*[9.12] ANIMATE FOOTER NAV MENU ITEMS SOCIAL LINKS*/
		.footer .list-container .list .social-icons i:hover,
		.footer .list-container .list .social-icons i:focus-within {
			transform: scale(1.2);
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 9 - FOOTER*/
/****************************************************************************************END SECTION 9 - FOOTER*/
/****************************************************************************************END SECTION 9 - FOOTER*/
/****************************************************************************************END SECTION 9 - FOOTER*/



/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/
/****************************************************************************************END RESPONSIVE DESIGN*/


/*WEBSITE BUILD AND POWERED BY Krishan.Naidoo912@gmail.com and Mark.Davies@uon.global - March 2022*/

/* Back to top button css */
#back-to-top-btn {
	display: none;
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 26px;
	width: 50px;
	height: 50px;
	background-color: #fff;
	color: #F26722;
	cursor: pointer;
	outline: none;
	border: 3px solid #F26722;
	border-radius: 50%;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
	transition-property: background-color, color;
  }
  #back-to-top-btn:hover, #back-to-top-btn:focus {
	background-color: #F26722;
	color: #fff;  
  }
  
  @media(max-width: 992px) {
	.container { padding: 20px 100px; }
	#back-to-top-btn { font-size: 22px; width: 40px; height: 40px; bottom: 15px; right: 15px; }
  }
  @media(max-width:768px) {
	body { font-size: 16px; }
	.container { padding: 10px 50px; }
	h1 { font-size: 26px; }
	h2 { font-size: 22px; }
	hr { margin: 30px 0; }
	#back-to-top-btn { font-size: 18px; width: 32px; height: 32px; bottom: 6px; right: 6px; }
  }
  
  /* Animations */
  .btnEntrance {
	animation-duration: 0.5s;
	animation-fill-mode: both;
	animation-name: btnEntrance;
  }
  /* fadeInUp */
  @keyframes btnEntrance {
	from {
	  opacity: 0;
	  transform: translate3d(0, 100%, 0);
	}
	to {
	  opacity: 1;
	  transform: translate3d(0, 0, 0);
	}
  }
  
  .btnExit {
	animation-duration: 0.25s;
	animation-fill-mode: both;  
	animation-name: btnExit;
  }
  
  /* fadeOutDown */
  @keyframes btnExit {
	from {
	  opacity: 1;
	}
	to {
	  opacity: 0;
	  transform: translate3d(0, 100%, 0);
	}
  }