/*CSS STYLES FOR: UON GLOBAL WEBSITE - HOME PAGE*/

@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'); /*checked*/
	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 (Hover State).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 (Hover State).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: 18rem;
}

/*[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;
}

/*[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 - GLOBE*/
/****************************************************************************************START SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************START SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************START SECTION 2 - MAIN - GLOBE*/

/*[2.1] CONTENT-1 CONTAINER*/
main .content-1 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	height: 100%;
	width: 100%;
	text-align: center;
	margin-top: 2rem;
	margin-bottom: 5rem;
}



/*[2.2] CONTENT-1 IMAGE CONTAINER*/
main .content-1 .image-container {
	width: 70%;
	height: 70%;
}

/*[2.3] CONTENT-1 ADJUST IMAGE TO CONTAINER*/
	/* main .content-1 .image-container video {
} */

/*[2.4] CONTENT-1 ANIMATE GLOBE IMAGE*/
@keyframes zoom-in-zoom-out {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.05, 1.05);
  }
  100% {
    transform: scale(1, 1);
  }
}

/*[2.5] CONTENT-1 HEADING*/
main .content-1 .text-container h1 {
	font-size: 54px;
	color: #3A4A5B;
	font-weight: 700;
	margin-top: 32px;
	margin-bottom: 32px;
	line-height: 1em;
}

.services h2, 
main .content-1 .text-container h2 {
	font-weight: 700;
	font-size: 48px;
	text-align: center;
	color: #3A4A5B;
	margin-top: 10px;
	margin-bottom: 32px;
	line-height: 1em;
}

.text-container h3 {
	font-weight: 700;
	font-size: 32px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 30px;
	color: #3A4A5B;
	line-height: 1em;
}

.services h4,
.text-container h4 {
	font-weight: 400;
	font-size: 28px;
	text-align: center;
	margin-top: 10px;
	margin-bottom: 30px;
	color: #607B8B;
	line-height: 1em;
}

h6 {
	font-weight: 600;
	font-size: 20px;
	margin-top: 10px;
	margin-bottom: 14px;
	color: #607B8B;
	line-height: 1em;
}

.heading-text{
	color: #3A4A5B;
	font-weight: 400;
	font-size: 1.2rem;
	margin-top: 2rem;
	margin-bottom: 0.9rem;
	margin-left: 2rem;
	margin-right: 2rem;
}


/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/






/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/

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

/*[3.2] CONTENT-2 CONTAINER TO HOLD RESIZED IMAGE*/
main .content-2 .image-container {
	width: 55%;
}

/*[3.3] SHOW CONTENT-2 IMAGE FOR DESKTOP*/
main .content-2 .image-container #content-2-image-desktop {
	display: block;
}

/*[3.4] HIDE CONTENT-2 IMAGE FOR MOBILE*/
main .content-2 .image-container #content-2-image-mobile {
	display: none;
}

/*[3.5] CONTENT-2 RESIZE IMAGE AND MOVE TO LEFT*/
main .content-2 .image-container img {
	width: 100%;
	position: relative;
	padding-top: 1rem;
/*	transform: translateX(-13.5rem); *//*MOVE IMAGE OUT OF SCREEN TO THE LEFT*/
}

/*[3.6] CONTENT-2 TEXT CONTAINER*/
main .content-2 .text-container  {
	width: 45%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding-top: 7rem;
	padding-bottom: 7rem;
	padding-left: 2rem;
}

/*[3.7] CONTENT-2 TEXT DETAIL*/
main .content-2 .text-container p {
	color: var(--color-text-1);
	font-size: clamp(1.375rem, 0.9657rem + 0.1465vw, 1.2rem);
	font-weight: 400;
	position: absolute;
	left: 50%;
	padding-right: 9rem;

}

/*[3.8] CONTENT-2 TEXT DETAIL*/
main .content-2 .text-container p .text-highlight-1 {
	color: var(--color-text-3);
}

/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/






/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/

/*[4.1]*/
main .services {
	width: 92vw;
	color: var(--color-text-1);
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
}

/*[4.2]*/
main .container-services h1 {
	font-weight: 700;
	font-size: clamp(3.375rem, 1.8571rem + 0.7143vw, 3rem);
	text-align: center;
	margin-bottom: 4rem;
}

/*[4.3]*/
main .container-services h3 {
	font-weight: 400;
	font-size: clamp(1.6rem, 0.9657rem + 0.1465vw, 1.2rem);
	text-align: center;
	margin-bottom: 4rem;
	color: var(--color-text-2);
	padding-left: 20rem;
	padding-right: 20rem;
}

/****************************************************************************************START UON SERVICES CARDS*/
/*[4.3] STYLE SERVICES CARD BOX*/
main .container-services .container-services-cards {
	display: grid;
	justify-items: center;
	align-items: center;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	grid-gap: 2.5rem;
}

/*[4.4] STYLE SERVICES CARD*/
main .container-services .container-services-cards .services-card {
	box-shadow: 0 5px 20px 0 var(--color-element-4);
	border-radius: 15px;
	width:22rem;
	height: 25rem;
	cursor: pointer;
	background: white;
	transition: transform .6s;
}

/*[4.5] ANIMAGE SERVICES CARD*/
main .container-services .container-services-cards .services-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;
}

/*[4.6] ANIMAGE SERVICES CARD*/
main .container-services .container-services-cards .services-card:hover {
	transform: translateY(-.5rem);
}

/*[4.7] STYLE SERVICES CARD*/
main .container-services .container-services-cards .services-card div {
	display: flex;
	justify-content: space-between;
	padding-bottom: 2rem;
}

/*[4.8] STYLE SERVICES CARD*/
main .services .container-services-cards .services-card div {
	max-height: 5.250rem;
	margin-bottom: 6rem;
}

/*[4.9] STYLE SERVICES CARD IMG*/
main .services .container-services-cards .services-card div > img {
	padding-top: 1.5rem;
	padding-left: 1.5rem;
	width: 40%;
	height: 40%;
}

/*[4.10] STYLE SERVICES CARD arrow*/
main .container-services .container-services-cards .services-card div > i {
	padding-top: 1rem;
	padding-right: 2rem;
	font-size: 1.250rem;
	color: var(--color-text-2);
	visibility: hidden;
	transition: all .3s;
}

/*[4.11] STYLE SERVICES CARD TEXT*/
main .container-services .container-services-cards .services-card > h4 {
	font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem);
	font-weight: 600;
	color: var(--color-text-1);
	text-align: center;
	padding-bottom: 1.9rem;
}

/*[4.12] STYLE SERVICES CARD TEXT*/
main .container-services .container-services-cards .services-card > p {
	font-size: clamp(1.375rem, 0.7714rem + 0.1429vw, 1rem);
	font-weight: 400;
	color: var(--color-text-2);
	text-align: center;
	line-height: 1.8rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
}

/*[4.13] ANIMATE SERVICES CARD ARROW*/
main .container-services .container-services-cards .services-card:hover div > i {
	visibility: visible;
	transform: translateX(.5em);
}

/****************************************************************************************END SERVICES CARD*/

/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/






/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/

/*[5.1] CONTENT 4 CONTAINER*/
main .product-range {
	max-width: 50vw;
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	text-align: center;
}

/*[5.2] CONTENT 4 IMAGE CONTAINER*/
main .product-range .image-box {
	width: 100%;	
	text-align: center;
	padding-left: 1rem;
}

/*[5.3] CONTENT 4 IMAGE*/
main .product-range .image-box img {
	width: 66%;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding-top: 2rem;
	padding-bottom: 2rem;	
}

/*[5.4] CONTENT 4 TEXT CONTAINER*/
main .product-range .text-box {
	width: 100%;
}

/*[5.5A] CONTENT 4 TEXT HEADING*/
main .product-range .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;
}

/*[5.5B] CONTENT 4 TEXT HEADING*/
main .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);
}

/*[5.6] CONTENT 4 TEXT DETAIL*/
main .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;
}

/****************************************************************************************START SECTION 5 - END - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - END - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - END - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - END - PRODUCT RANGE*/






/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/

/*[6.1A] SHOW SOLUTIONS DESKTOP CONTAINER*/
main .solutions-desktop {
	width: 75vw;
	margin: 0 auto;
	margin-top: 5rem;
	margin-bottom: 5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

/*[6.1B] HIDE SOLUTIONS MOBILE CONTAINER*/
main .solutions-mobile {
	display: none;
}

/*[6.2] SOLUTIONS DESKTOP CONTAINER HEADING*/
main .solutions-desktop h1 {
	color: var(--color-text-1);
	font-size: clamp(2rem, 1.7857rem + 0.4464vw, 2.5rem);
	font-weight: 700;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center;
}

/*[6.2] SOLUTIONS DESKTOP CONTAINER HEADING*/
main .solutions-desktop h2 {
	color: var(--color-text-1);
	font-size: clamp(1.1rem, 1.0828rem + 0.0732vw, 1.2rem);
	font-weight: 700;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center;
}

/*[6.2] SOLUTIONS DESKTOP CONTAINER HEADING*/
main .solutions-desktop h3 {
	color: var(--color-text-1);
	font-size: clamp(1rem, 0.9657rem + 0.1465vw, 1.2rem);
	font-weight: normal;
	margin-top: 1rem;
	margin-bottom: 1rem;
	text-align: center;
	line-height: 1.6rem;
}

/*[6.3] SOLUTIONS DESKTOP TABS AND PANELS CONTAINER*/
main .solutions-desktop .tabs-panels-container {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 auto;
	margin-top: 2.5rem;
	width: 92vw;
	flex-wrap: wrap;
}

/*[6.4] SOLUTIONS DESKTOP TABS AND PANELS CONTAINER RADIO BUTTON*/
main .solutions-desktop .tabs-panels-container .radio {
	display: none;
}

/*[6.5] SOLUTIONS DESKTOP TABS*/
main .solutions-desktop .tabs-panels-container .tabs {
	display: flex;
	justify-content: space-evenly;
/*	margin-bottom: 2rem;*/
	width: 75%;
}

/*[6.6] SOLUTIONS DESKTOP TABS LABELS*/
main .solutions-desktop .tabs-panels-container .tabs .lbl-tabs {
	width: 25%;
	cursor: pointer;
	display: inline-block;
}

/*[6.7] ANIMATE SOLUTIONS DESKTOP TABS LABELS*/
main .solutions-desktop .tabs-panels-container .tabs .lbl-tabs:hover {
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0.5rem 0.8rem #00000080;
}

/*[6.8] SOLUTIONS DESKTOP TABS TAB*/
main .solutions-desktop .tabs-panels-container .tabs .tab {
	display: grid;
	grid-template-areas:
		'lbl-tabs-image lbl-tabs-h1'
		'lbl-tabs-image lbl-tabs-h2';
	padding: 1.5rem 1.5rem;
	grid-column-gap: 0.5rem;
	align-items: center;
}

/*[6.9] SOLUTIONS DESKTOP TABS TAB IMAGE*/
main .solutions-desktop .tabs-panels-container .tabs .tab img {
	filter: grayscale(100%);
	min-width: 1.5rem;
	grid-area: lbl-tabs-image;
}

/*[6.10] ANIMATE SOLUTIONS DESKTOP TABS TAB IMAGE*/
main .solutions-desktop .tabs-panels-container .tabs .tab:hover img {
	filter: grayscale(0%);
}

/*[6.11] SOLUTIONS DESKTOP TABS TAB HEADING 1*/
main .solutions-desktop .tabs-panels-container .tabs .tab h1 {
	font-size: clamp(1.5rem, 1.2857rem + 0.4464vw, 2rem);
	font-weight: 600;
	color: var(--color-text-1);
	grid-area: lbl-tabs-h1;
	margin-top: 0rem;
	margin-bottom: 0rem;
}

/*[6.12] SOLUTIONS DESKTOP TABS TAB HEADING 2*/
main .solutions-desktop .tabs-panels-container .tabs .tab h2 {
	font-size: clamp(1rem, 0.9143rem + 0.1786vw, 1.2rem);
	font-weight: normal;
	color: var(--color-text-1);
	grid-area: lbl-tabs-h2;
	margin-top: 0rem;
	margin-bottom: 0rem;
}

/*[6.13] SOLUTIONS DESKTOP PANELS*/
main .solutions-desktop .tabs-panels-container .panels {
	margin-top: 2rem;
/*	overflow: hidden;*/
	animation: fadein .8s;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
/*	flex-direction: column;*/
}

/*[6.14] ANIMATE SOLUTIONS DESKTOP PANELS*/
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*[6.15] SOLUTIONS DESKTOP PANELS PANEL*/
main .solutions-desktop .tabs-panels-container .panels .panel {
	width: 80%;
	display: none;
/*	margin-left: 0;*/
}

/*[6.16] SOLUTIONS DESKTOP PANELS PANEL HEADING 1*/
main .solutions-desktop .tabs-panels-container .panels .panel h1 {
	color: var(--color-text-1);
	font-size: clamp(1.4rem, 1.2286rem + 0.3571vw, 1.8rem);
	font-weight: 600;
	margin-bottom: 1rem;
	text-align: initial;
}

/*[6.17] HIGHLIGHT SOLUTIONS DESKTOP PANELS HEADING 1*/
main .solutions-desktop .tabs-panels-container .panels .panel h1 .text-highlight-1 {
	color: var(--color-text-3);
}

/*[6.18] SOLUTIONS DESKTOP PANELS TEXT*/
main .solutions-desktop .tabs-panels-container .panels .panel p {
	color: var(--color-text-1);
	font-size: clamp(1rem, 0.9143rem + 0.1786vw, 1.2rem);
	font-weight: normal;
	line-height: 1.5rem;
}

/*[6.19] SOLUTIONS DESKTOP PANELS CONTENTS CONTAINER*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents {
	display: flex;
	justify-content: space-evenly;
	width: 100%;
	margin-top: 1rem;
}

/*[6.20] */
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}

/*[6.21] SOLUTIONS DESKTOP PANELS CONTENT WITH POINTS IN ROW*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .row {
	display: flex;
	align-items: center;
	flex-direction: row;
	justify-content: flex-start;
	column-gap: 10rem;
}

/*[6.22] SOLUTIONS DESKTOP PANELS CONTENT WITH POINTS IN ROW TEXT*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .row .text-row .text {
	min-width: 20rem;
	max-width: 30rem;
}

/*[6.23] SOLUTIONS DESKTOP PANELS CONTENT CARD IMAGE CONTAINER*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card .image-container-solutions {
	position: relative;
	max-width: 34%;
	min-height: 34%;
	margin-bottom: 1rem;
}

/*[6.24] SOLUTIONS DESKTOP PANELS CONTENT CARD IMAGE*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card .image-container-solutions img {
	max-width: 100%;
	max-height: 100%;
	margin-top: 40%;
}

/*[6.25A] SOLUTIONS DESKTOP PANELS CONTENT CARD*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 5px 20px 0 var(--color-element-4);
	border-radius: 15px;
	min-width: 15rem;
	max-width: 15rem;
	margin-bottom: 2rem;
	min-height: 20rem;
	transition: transform .5s;
}

/*[6.25B] SOLUTIONS DESKTOP PANELS CONTENT CARD*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .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);	
}

/*[6.26] ANIMATE SOLUTIONS DESKTOP PANELS CONTENT CARD HEADING*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card h4 {
	color: var(--color-text-1);
	font-weight: 600;
	font-size: clamp(1.2rem, 1.1143rem + 0.1786vw, 1.4rem);
	margin-bottom: .9rem;
	text-align: center;
}

/*[6.27] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card p {
	color: var(--color-text-2);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.0571rem + 0.0893vw, 1.2rem);
	line-height: 1.6rem;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 1.6rem;
	flex-wrap: wrap;
	text-align: center;
}

/*[6.28] SOLUTIONS DESKTOP PANELS CONTENT CARD LEARN MORE BUTTON*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card .btn-learnMore {
	background: var(--color-element-1);
	color: white;
	border-radius: 10px;
	width: 8.128rem;
	height: 2.188rem;
	font-size: .8rem;
	margin-bottom: 2rem;
}

/*[6.29] SOLUTIONS DESKTOP PANELS CONTENT CARD LEARN MORE BUTTON ARROW*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card .btn-learnMore > i {
	visibility: hidden;
	margin-left: 0;
	transition: visibility .4s, transform .4s, margin-left .4s;
}

/*[6.30] ANIMATE SOLUTIONS DESKTOP PANELS CONTENT CARD LEARN MORE BUTTON*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card .btn-learnMore:hover {
	background: var(--color-element-3);
}

/*[6.31] ANIMATE SOLUTIONS DESKTOP PANELS CONTENT CARD LEARN MORE BUTTON ARROW*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .card .btn-learnMore:hover > i {
	transform: translateX(11px);
	visibility: visible;
	margin-left: 1rem;
}

/*[6.32] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .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;
}

/*[6.33] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT HEADING 1*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .text h1 {
	grid-area: panel-content-text-counter;
	font-size: 1.2rem;
	color: var(--color-text-1);
	font-weight: 500;
	margin-right: 1rem;
}

/*[6.34] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT HEADING 2*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .text h2 {
	grid-area: panel-content-text;
	font-size: .9rem;
	color: var(--color-text-1);
	font-weight: normal;
	line-height: 1.5rem;
	text-align: initial;
}

/*[6.34] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT HEADING 2*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .text h5 {
	font-weight: normal;
}

/*[6.35] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT IN ROW*/
main .solutions-desktop .tabs-panels-container .panels .panel .contents .content .row {
	display: flex;
	flex-direction: row;
}

/*[6.36] SOLUTIONS DESKTOP PANELS CONTENT CARD TEXT IN ROW DISPLAY*/
main .text-row {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/*[6.37] TOGGLE SOLUTIONS DESKTOP TABS*/
#radio-1:checked ~ .tabs #lbl-tab-1,
#radio-2:checked ~ .tabs #lbl-tab-2,
#radio-3:checked ~ .tabs #lbl-tab-3,
#radio-4:checked ~ .tabs #lbl-tab-4 {
	border-left:  6px solid var(--color-element-3);
	box-shadow: 0 5px 20px 0 var(--color-element-4);
}

/*[6.38] TOGGLE SOLUTIONS DESKTOP PANELS*/
#radio-1:checked ~ * #panel-1,
#radio-2:checked ~ * #panel-2,
#radio-3:checked ~ * #panel-3,
#radio-4:checked ~ * #panel-4 {
	display: block;
}

/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/




/****************************************************************************************START SECTION 6B - MAIN - SOLUTIONS MOBILE*/
/****************************************************************************************START SECTION 6B - MAIN - SOLUTIONS MOBILE*/
/****************************************************************************************START SECTION 6B - MAIN - SOLUTIONS MOBILE*/
/****************************************************************************************START SECTION 6B - MAIN - SOLUTIONS MOBILE*/

/*[6.1B] SHOW SOLUTIONS DESKTOP*/
main .solutions-desktop {
	width: 75vw;
	margin: 0 auto;
	margin-top: 3rem;
	margin-bottom: 3rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

/*[6.2B] HIDE SOLUTIONS MOBILE CONTAINER*/
main .solutions-mobile {
	width: 92vw;
	margin: 0 auto;
	margin-top: 2rem;
	display: none;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
/*	text-align: center;*/
}

/*[6.3B] SOLUTIONS DESKTOP CONTAINER HEADING 1*/
main .solutions-mobile h1 {
	color: var(--color-text-1);
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
}

/*[6.4B] SOLUTIONS MOBILE CONTAINER HEADING 2*/
main .solutions-mobile h2 {
	color: var(--color-text-1);
	font-size: 1.5rem;
	font-weight: 700;
	text-align: center;
}

/*[6.5B] SOLUTIONS MOBILE PANELS*/
#panel-mobile-1, #panel-mobile-2, #panel-mobile-3,#panel-mobile-4 {
	display: none;
}

/*[6.6B] SOLUTIONS MOBILE TABS AND PANELS CONTAINER*/
main .solutions-mobile .tabs-panels-container {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	justify-content: space-between;
	margin: 0 auto;
	margin-top: 2.5rem;
	width: 92vw;
}

/*[6.7B] SOLUTIONS MOBILE TABS*/
main .solutions-mobile .tabs-panels-container .tabs-menu {
	display: flex;
	justify-content: space-around;
	column-gap: 1rem;
	margin-bottom: 2rem;
}

/*[6.8B] SOLUTIONS MOBILE TABS HEADING*/
main .solutions-mobile .tabs-panels-container .tabs-menu h2 {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--color-text-1);
}


/*[6.9B] SOLUTIONS MOBILE TABS AND PANELS CONTAINER RADIO BUTTON*/
main .solutions-mobile .tabs-panels-container .radio {
	display: none;
}

/*[6.10B] SOLUTIONS MOBILE TABS*/
main .solutions-mobile .tabs-panels-container .tabs {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	margin-bottom: 2rem;
	width: 92vw;
	gap: 1rem;
}

/*[6.11B] SOLUTIONS MOBILE TABS LABELS*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs {
	width: 100%;
	cursor: pointer;
	display: inline-block;
}

/*[6.7] ANIMATE SOLUTIONS MOBILE TABS LABELS*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs:hover {
	border-radius: 5px 5px 0 0;
	box-shadow: 0 0.5rem 0.8rem #00000080;
}

/*[6.8] SOLUTIONS MOBILE TABS TAB*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs .tab {
	display: grid;
	grid-template-areas:
		'lbl-tabs-image lbl-tabs-h1 lbl-tabs-arrow';
	padding: 0.6rem 1rem;
	grid-column-gap: 0.4rem;
	align-items: center;
/*	justify-content: start;*/
	justify-items: center;
}

/*[6.9] SOLUTIONS MOBILE TABS TAB IMAGE*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs .tab img {
	filter: grayscale(100%);
	min-width: 1.5rem;
	grid-area: lbl-tabs-image;
}

/*[6.10] ANIMATE SOLUTIONS MOBILE TABS TAB IMAGE*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs .tab:hover img {
	filter: grayscale(0%);
}

/*[6.11] SOLUTIONS MOBILE TABS TAB HEADING 1*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs .tab h1 {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-text-1);
	grid-area: lbl-tabs-h1;
}

/*[6.12] SOLUTIONS MOBILE TABS TAB ARROW 1*/
main .solutions-mobile .tabs-panels-container .tabs .lbl-tabs .tab i {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--color-text-1);
	grid-area: lbl-tabs-arrow;
	transform: rotate(90deg);
}

/*[6.13] SOLUTIONS MOBILE PANELS*/
main .solutions-mobile .tabs-panels-container .tabs .panel {
	margin-top: 1.5rem;
	overflow: hidden;
	animation: fadein .8s;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	flex-direction: column;
}

/*[6.14] ANIMATE SOLUTIONS MOBILE PANELS*/
@keyframes fadein {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*[6.15] SOLUTIONS MOBILE PANELS PANEL*/
main .solutions-mobile .tabs-panels-container .tabs .panel {
	width: 100%;
	display: none;
}

/*[6.16] SOLUTIONS MOBILE PANELS PANEL HEADING 1*/
main .solutions-mobile .tabs-panels-container .tabs .panel h1 {
	color: var(--color-text-1);
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1rem;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

/*[6.16] SOLUTIONS MOBILE PANELS PANEL HEADING 1*/
main .solutions-mobile .tabs-panels-container .tabs .panel h5 {
	font-weight: normal;
	margin-top: 2rem;
}


/*[5.17] HIGHLIGHT SOLUTIONS MOBILE PANELS HEADING 1*/
main .solutions-mobile .tabs-panels-container .tabs .panel h1 .text-highlight-1 {
	color: var(--color-element-1);
}

/*[6.18] SOLUTIONS MOBILE PANELS TEXT*/
main .solutions-mobile .tabs-panels-container .tabs .panel p {
	color: var(--color-text-1);
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.5rem;
	text-align: left;
}

/*[6.19] SOLUTIONS MOBILE PANELS CONTENTS CONTAINER*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: space-evenly;
	width: 100%;
	margin-top: 1rem;
}

/*[6.20] */
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/*[6.21] SOLUTIONS MOBILE PANELS CONTENT WITH POINTS IN ROW*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .row {
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: flex-start;
	column-gap: 0rem;
}

/*[6.22] SOLUTIONS MOBILE PANELS CONTENT WITH POINTS IN ROW TEXT*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .row .text-row .text {
	min-width: 20rem;
	max-width: 30rem;
}

/*[6.23] SOLUTIONS MOBILE PANELS CONTENT CARD IMAGE CONTAINER*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card .image-container-solutions {
	position: relative;
	max-width: 34%;
	min-height: 34%;
	margin-bottom: 1rem;
}

/*[6.24] SOLUTIONS MOBILE PANELS CONTENT CARD IMAGE*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card .image-container-solutions img {
	max-width: 100%;
	max-height: 100%;
	margin-top: 40%;
}

/*[6.25A] SOLUTIONS MOBILE PANELS CONTENT CARD*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 5px 20px 0 var(--color-element-4);
	border-radius: 15px;
	min-width: 15rem;
	max-width: 15rem;
	margin-bottom: 2rem;
	min-height: 20rem;
}

/*[6.25B] SOLUTIONS MOBILE PANELS CONTENT CARD*/
main .solutions-mobile .tabs-panels-container .panels .panel .contents .content .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);	
}

/*[6.26] SOLUTIONS MOBILE PANELS CONTENT CARD HEADING*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card h4 {
	color: var(--color-text-1);
	font-weight: 600;
	font-size: clamp(1.2rem, 1.1143rem + 0.1786vw, 1.4rem);
	margin-bottom: .9rem;
	text-align: center;
}

/*[6.27] SOLUTIONS MOBILE PANELS CONTENT CARD TEXT*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card p {
	color: var(--color-text-2);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.0571rem + 0.0893vw, 1.2rem);
	line-height: 1.6rem;
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 1.6rem;
	flex-wrap: wrap;
	text-align: center;
}

/*[6.28] SOLUTIONS MOBILE PANELS CONTENT CARD LEARN MORE BUTTON*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card .btn-learnMore {
	background: var(--color-element-1);
	color: white;
	border-radius: 10px;
	width: 8.128rem;
	height: 2.188rem;
	font-size: .8rem;
	margin-bottom: 2rem;
}

/*[6.29] SOLUTIONS MOBILE PANELS CONTENT CARD LEARN MORE BUTTON ARROW*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card .btn-learnMore > i {
	visibility: hidden;
	margin-left: 0;
	transition: visibility .4s, transform .4s, margin-left .4s;
}

/*[6.30] ANIMATE SOLUTIONS MOBILE PANELS CONTENT CARD LEARN MORE BUTTON*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card .btn-learnMore:hover {
	background-color: var(--color-element-3);
}

/*[6.31] ANIMATE SOLUTIONS MOBILE PANELS CONTENT CARD LEARN MORE BUTTON ARROW*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .card .btn-learnMore:hover > i {
	transform: translateX(11px);
	visibility: visible;
	margin-left: 1rem;
}

/*[6.32] SOLUTIONS MOBILE PANELS CONTENT CARD TEXT*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .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;
}

/*[6.33] SOLUTIONS MOBILE PANELS CONTENT CARD TEXT HEADING 1*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .text h1 {
	grid-area: panel-content-text-counter;
	font-size: 1.2rem;
	color: var(--color-text-1);
	font-weight: 500;
	margin-right: 1rem;
}

/*[6.34] SOLUTIONS MOBILE PANELS CONTENT CARD TEXT HEADING 2*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .text h2 {
	grid-area: panel-content-text;
	font-size: .9rem;
	color: var(--color-text-1);
	font-weight: normal;
	line-height: 1.5rem;
	text-align: initial;
}

/*[6.35] SOLUTIONS MOBILE PANELS CONTENT CARD TEXT IN ROW*/
main .solutions-mobile .tabs-panels-container .tabs .panel .contents .content .row {
	display: flex;
	flex-direction: row;
}

/*[6.36] SOLUTIONS MOBILE PANELS CONTENT CARD TEXT IN ROW DISPLAY*/
main .text-row {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

/*[6.37] TOGGLE SOLUTIONS MOBILE TABS*/
#radio-mobile-1:checked ~ .tabs #lbl-tab-mobile-1,
#radio-mobile-2:checked ~ .tabs #lbl-tab-mobile-2,
#radio-mobile-3:checked ~ .tabs #lbl-tab-mobile-3,
#radio-mobile-4:checked ~ .tabs #lbl-tab-mobile-4 {
	border-left:  8px solid var(--color-element-1);
	box-shadow: 0 5px 20px 0 var(--color-element-4);
}

/*[6.38] TOGGLE SOLUTIONS MOBILE PANELS*/
#radio-mobile-1:checked ~ * #panel-mobile-1,
#radio-mobile-2:checked ~ * #panel-mobile-2,
#radio-mobile-3:checked ~ * #panel-mobile-3,
#radio-mobile-4:checked ~ * #panel-mobile-4 {
	display: block;
}

/*[6.38] TOGGLE SOLUTIONS MOBILE PANELS*/
#radio-mobile-1:checked ~ * #lbl-tab-menu-mobile-1 h2,
#radio-mobile-2:checked ~ * #lbl-tab-menu-mobile-2 h2,
#radio-mobile-3:checked ~ * #lbl-tab-menu-mobile-3 h2,
#radio-mobile-4:checked ~ * #lbl-tab-menu-mobile-4 h2 {
	color: var(--color-text-3);
	text-decoration: underline;
}

/****************************************************************************************END SECTION 6B - MAIN - SOLUTIONS MOBILE*/
/****************************************************************************************END SECTION 6B - MAIN - SOLUTIONS MOBILE*/
/****************************************************************************************END SECTION 6B - MAIN - SOLUTIONS MOBILE*/
/****************************************************************************************END SECTION 6B - MAIN - SOLUTIONS MOBILE*/






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

/*[7.1]*/
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);
}

/*[7.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-element-1);
	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;
}

/*[7.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;
}

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

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

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

/*[7.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 7 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 7 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 7 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 7 - MAIN - ARRANGE A DEMO*/






/****************************************************************************************START SECTION 8 - FOOTER*/
/****************************************************************************************START SECTION 8 - FOOTER*/
/****************************************************************************************START SECTION 8 - FOOTER*/
/****************************************************************************************START SECTION 8 - FOOTER*/

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

/*[8.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;
}

/*[8.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);
}

/*[8.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";
}

/*[8.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*/
}

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

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

/*[8.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;
}

/*[8.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*/
}

/*[8.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;
}

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

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

/*[8.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 8 - FOOTER*/
/****************************************************************************************END SECTION 8 - FOOTER*/
/****************************************************************************************END SECTION 8 - FOOTER*/
/****************************************************************************************END SECTION 8 - 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 - GLOBE*/
/****************************************************************************************START SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************START SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************START SECTION 2 - MAIN - GLOBE*/
	
	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
		@media (max-width: 768px) {
			/*[2.2] CONTENT-1 IMAGE CONTAINER*/
			main .content-1 .image-container {
				width: 100%;
				height: 100%;
			}

			/*[2.5] CONTENT-1 HEADING*/
			:-webkit-any(article, aside, nav, section) h1 {
		    font-size: 1.2rem;
		    padding-left: 2rem;
		    padding-right: 2rem;
			}
		}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/
/****************************************************************************************END SECTION 2 - MAIN - GLOBE*/






/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************START SECTION 3 - MAIN - DESCRIPTION*/

	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 768px) {
		/*[3.1] CONTENT-2 CONTAINER*/
		main .content-2 {
			flex-direction: column;
		}

		/*[3.2]* CONTENT-2 CONTAINER TO HOLD RESIZED IMAGE*/
		main .content-2 .image-container {
			width: 100%;
		}

		/*[3.3] SHOW CONTENT-2 IMAGE FOR DESKTOP*/
		main .content-2 .image-container #content-2-image-desktop {
			display: none;
		}

		/*[3.4] HIDE CONTENT-2 IMAGE FOR MOBILE*/
		main .content-2 .image-container #content-2-image-mobile {
			display: block;
		}

		/*[3.6] CONTENT-2 TEXT CONTAINER*/
		main .content-2 .text-container  {
			width: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}

		/*[3.8] CONTENT-2 TEXT DETAIL*/
		main .content-2 .text-container p {
			font-size: 1rem;
			position: relative;
			left: initial;
			padding-left: 3rem;
			padding-right: 3rem;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

	/************************************************************************************START RESPONSIVE DESIGN - GREATER 1440px*/
	@media(min-width: 1441px) {

		/*[3.3] CONTENT-2 RESIZE IMAGE AND MOVE TO LEFT*/
		main .content-2 .image-container img {
			width: 90%;
		}

		/*[3.6] CONTENT-2 TEXT DETAIL*/
		main .content-2 .text-container p {
			font-size: 1.29rem;
			padding-right: 15rem;
		}
	/************************************************************************************END RESPONSIVE DESIGN - GREATER 1440px*/
}
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/
/****************************************************************************************END SECTION 3 - MAIN - DESCRIPTION*/






/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************START SECTION 4 - MAIN - UON SERVICES*/

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

		/****************************************************************************************START UON SERVICES CARDS*/

		/*[4.10] STYLE SERVICES CARD arrow*/
		main .container-services .container-services-cards .services-card div > i {
			padding-top: 1rem;
			padding-right: 2rem;
			visibility: visible;
		}

		/*[4.11] STYLE SERVICES CARD TEXT*/
		main .container-services .container-services-cards .services-card > h4 {
			font-size: 1rem;
		}

		/*[4.13] ANIMATE SERVICES CARD ARROW*/
		main .container-services .container-services-cards .services-card:hover div > i {
			visibility: visible;
			transform: translateX(.5em);
		}
		/****************************************************************************************END SERVICES CARD*/
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

	/************************************************************************************START RESPONSIVE DESIGN - 1366px*/
	@media (max-width: 1366px) {
		/*[4.6]*/
		main .container-services h1 {
			font-size: 2rem;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 1366px*/

	/************************************************************************************START RESPONSIVE DESIGN - 1024px*/
	@media (max-width: 1024px) {
		/*[4.3]*/
		main .container-services h3 {
			padding-left: 2rem;
			padding-right: 2rem;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 1024px*/

/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/
/****************************************************************************************END SECTION 4 - MAIN - UON SERVICES*/





/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************START SECTION 5 - MAIN - PRODUCT RANGE*/

	/************************************************************************************START RESPONSIVE DESIGN - 768px*/
	@media (max-width: 768px) {
		/*[5.1] CONTENT 4 CONTAINER*/
		main .product-range {
			flex-direction: column;
			max-width: 82vw;
			padding-top: 2rem;
			padding-bottom: 2rem;
			text-align: center;
		}

		/*[5.2] CONTENT 4 IMAGE CONTAINER*/
		main .product-range .image-box {
			width: 100%;	
			text-align: center;
			padding-left: 0rem;
			padding-bottom: 2rem;
		}

		/*[5.3] CONTENT 4 IMAGE*/
		main .product-range .image-box img {
			width: 90%;
		}

		/*[5.4] CONTENT 4 TEXT CONTAINER*/
		main .product-range .text-box {
			width: 100%;
			text-align: center;
		}

		/*[5.5A] CONTENT 4 TEXT HEADING*/
		main .product-range .text-box h1 {
			display: none;
		}

		/*[5.5B] CONTENT 4 TEXT HEADING*/
		main .product-range .text-box h2 {
			color: var(--color-text-2);
			font-weight: 700;
			padding-bottom: 1rem;
			text-align: center;
		}

		/*[5.6] CONTENT 4 TEXT DETAIL*/
		main .product-range .text-box p {
			padding-bottom: 1rem;
			font-weight: normal;
			text-align: center;
		}
	}
	/************************************************************************************END RESPONSIVE DESIGN - 768px*/

/****************************************************************************************END SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************END SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************END SECTION 5 - MAIN - PRODUCT RANGE*/
/****************************************************************************************END SECTION 5 - MAIN - PRODUCT RANGE*/






/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************START SECTION 6A - MAIN - SOLUTIONS DESKTOP*/

	/************************************************************************************START RESPONSIVE DESIGN - 275px*/
		@media (min-width: 275px) {

			/*[6.1A] SHOW SOLUTIONS MOBILE CONTAINER*/
			main .solutions-desktop {
				display: none;
			}

			/*[6.1B] HIDE SOLUTIONS MOBILE CONTAINER*/
			main .solutions-mobile {
				display: block;
			}
		}
	/************************************************************************************END RESPONSIVE DESIGN - 1024px*/

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

			/*[6.1A] SHOW SOLUTIONS MOBILE CONTAINER*/
			main .solutions-desktop {
				display: flex;
			}

			/*[6.1B] HIDE SOLUTIONS MOBILE CONTAINER*/
			main .solutions-mobile {
				display: none;
			}
		}
	/************************************************************************************END RESPONSIVE DESIGN - 1024px*/

/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/
/****************************************************************************************END SECTION 6A - MAIN - SOLUTIONS DESKTOP*/






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

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

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

		/*[7.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 7 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 7 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 7 - MAIN - ARRANGE A DEMO*/
/****************************************************************************************END SECTION 7 - MAIN - ARRANGE A DEMO*/






/****************************************************************************************START SECTION 8 - FOOTER*/
/****************************************************************************************START SECTION 8 - FOOTER*/
/****************************************************************************************START SECTION 8 - FOOTER*/
/****************************************************************************************START SECTION 8 - FOOTER*/

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

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

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

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

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

		/*[8.5] FOOTER LIST LINKS*/
		/*.footer .list-container .list a {
			font-size: 1.12rem;
		}
*/
		/*[8.7] FOOTER LIST BLANK SPACE*/
		.footer .list-container .list .blank-content {
			display: none;
		}

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

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

		/*[8.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);
		}
	}

	/*Added*/
	.text-UON-Orange
{
	color: #F26722;

}

.text-highlight-2
{
	
	color: black;
}

@media (max-width: 810px )
{
	main .content-2 .text-container  {
		width: 45%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 15rem;
		padding-bottom: 16rem;
		padding-left: 2rem;
	}
}

@media (max-width: 700px )
{
	main .content-2 .text-container  {
		width: 45%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 1rem;
		padding-bottom: 2rem;
		padding-left: 3rem;

	}
}

@media (max-width: 500px )
{
	main .content-2 .text-container  {
		width: 45%;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 1rem;
		padding-bottom: 2rem;
		padding-right: 16rem;
	}
}

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

/****************************************************************************************END SECTION 8 - FOOTER*/
/****************************************************************************************END SECTION 8 - FOOTER*/
/****************************************************************************************END SECTION 8 - FOOTER*/
/****************************************************************************************END SECTION 8 - 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);
	}
  }

  main .services .container-cards {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
	padding-top: 2rem;
	width: 100%;
}

/*[1.22A] HEADER NAV BAR DROP DOWN SERVICES CARDS DESKTOP*/
main .services .container-cards .nav-card {
	box-shadow: 0 10px 20px 0 var(--color-element-4);
	border-radius: 15px;
	width: 16rem;
	min-height: 22rem;
	cursor: pointer;
	background: white;
	transition: transform .3s, box-shadow .3s;
}

/*[1.23A] ANIMATE HEADER NAV BAR DROP DOWN SERVICES CARDS DESKTOP*/
main .services .container-cards .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*/
main .services h1 {
	font-weight: 700;
	font-size: 2rem;
	color: var(--color-text-1);
	margin-top: 2rem;
	text-align: center;
}

/*[1.25A] HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/
main .services .container-cards .nav-card div {
	/*display: flex;*/
	justify-content: space-between;
	padding-bottom: 2rem;
	max-height: 6.250rem;
	margin-bottom: 1rem;
	width: 100%;
    display: block;
    text-align: center;
}

/*[1.26A] HEADER NAV BAR DROP DOWN SERVICES IMAGE DESKTOP*/
main .services .container-cards .nav-card div > img {
	padding-top: 1.5rem;
	/*padding-left: 1.5rem;*/
	width: 40%;
	height:40%;
	text-align: center;
    margin: auto;
    max-width: 80px;
    padding-left: 0px;
}

/*[1.27A] STYLE HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/
main .services .container-cards .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;
	padding-right: 0px;
    float: right;
    width: 0px;
    position: relative;
    right: 30px;
}

/*[1.28A] HEADER NAV BAR DROP DOWN SERVICES HEADING DESKTOP*/
main .services .container-cards .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*/
main .services .container-cards .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*/
main .services .container-cards .nav-card:hover div > i {
	visibility: visible;
	transform: translateX(.5rem);
}
.whitespace
{
	margin-top: 20px;
}



.team-section{
	float: left;
	position: relative;
	background: #FFFFFF;
	z-index: 1;
	width: 100%;
	margin: 0;
	padding: 0;
	height: 100%;
	font-size: 13px;
	text-align: center;
	font-family: "Roboto";
	margin-bottom: 90px;
}
.swiper-container {
	width: 100%;
	height: 100%;
}
.listing-carousel-button{
	position: absolute;
	top: 50%;
	width: 80px;
	height: 50px;
	line-height: 50px;
	margin-top: -25px;
	z-index: 100;
	cursor: pointer;
	background: #F26722;
	box-shadow: 0 9px 26px rgba(58, 87,135,0.45);
	transition: all 200ms linear;
	outline: none;
}
.listing-carousel-button.listing-carousel-button-next{
	right: -30px;
	padding-right: 20px;
	border-radius: 60px 0 0 60px;
}
.listing-carousel-button.listing-carousel-button-prev{
	left: -30px;
	padding-left: 20px;
	border-radius: 0 60px 60px 0;
}
.listing-carousel-button.listing-carousel-button-next:hover{
	right: -15px;
	background: rgba(6,27,65,0.4);
}
.listing-carousel-button.listing-carousel-button-prev:hover{
	left: -15px;
	background: rgba(6,27,65,0.4);
}
.testi-item {
	transition: all .3s ease-in-out;
	transform: scale(0.9);
	opacity: 0.3;
}
.testimonials-text {
	padding: 5rem 4.375rem 4.375rem;
	overflow:hidden;
	background: #FFFFFF;
	border: 1ps solid #f1f1f1;
	border-radius: 0.625rem;
	transition: all .3s ease-in-out;
	font-size: 1.2rem;
	font-weight: 450;
	color: #607B8B;
	width: 21.875rem;
	height: 22.75rem;
}

.testimonials-text span{
color:#F26722;
}

.testimonials-text-after{
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	position: absolute;
	color: #ccc;
	font-size: 35px;
	transition: all 400ms linear;
	bottom: 25px;
	right: 30px;
}
.testimonials-text-before{
	font-style: normal;
	font-weight: normal;
	text-decoration: inherit;
	position: absolute;
	color: #ccc;
	font-size: 35px;
	transition: all 400ms linear;
	top: 25px;
	left: 30px;
}
.testimonials-avatar h3{
	font-weight: 600;
	color: #3A4A5B;
	font-size: 28px;
}
.testimonials-avatar h4{
	 font-weight:400;
	 font-size:18px;
	 padding-top:6px;
	 color:#607B8B;;
}
.testimonials-carousel .swiper-slide{
	padding: 30px 0;
}	 
.testi-avatar{
	position: absolute;
	left: 31%;
	top: 30px;
	width: 90px;
	height: 90px;
	margin-left: -45px;
	z-index: 20;
}
.testi-avatar img{
	width: 230px;
	height: 230px;
	float: left;
	clip-path: polygon(60% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}


.swiper-slide-active .testimonials-text {
	background: #ffff ;
	
}



.swiper-slide-active .testi-item{
	transform: scale(1.0);
	opacity: 1;
	z-index: 100;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.5); 

}
.tc-pagination{
	float: left;
	margin-top: 10px;
	width: 100% !important;
	margin-top: 30px;

}

.tc-pagination_wrap {
	position: absolute;
	bottom: -40px;
	left: 0;
	width: 100%;
    
}
.tc-pagination2{
	float: none;
	display: inline-block;
	padding: 14px 0;
	background: #fff;
	border-radius: 30px;
	min-width: 250px;
	border-bottom: 0;

    
}
.tc-pagination .swiper-pagination-bullet, .tc-pagination2.swiper-pagination-bullet{
	background: #F26722;
	margin:0 2px;
	width: 10px;
	height: 10px;
	transition: all 300ms ease-in-out;
	display: inline-block;
}


/*Queries*/
 @media (max-width: 1022px )
{
    .testi-avatar
    {
        left: 43%;
    }
}

@media (max-width: 790px )
{
    .testi-avatar
    {
        left: 42%;
    }
}

@media (max-width: 522px )
{
    .testi-avatar
    {
        left: 38%;
    }
}

@media (max-width: 390px )
{
    .testi-avatar
    {
        left: 34%;

    }

	.swiper-pagination-bullet
	{
		display: none;
	}
}

@media (max-width: 270px )
{
    .testi-avatar
    {
        left: 30%;
    }
}

@media (max-width: 230px )
{
    .testi-avatar
    {
        left: 23%;
    }
}


.hexagon {
	position: relative;
	display: inline-block;
	width: 7.5rem;
	height: 7.5rem;
	padding-left: 5.625rem;
	padding-right: 5.625rem;
	margin-left: 8rem;
	/*padding-top: 15rem;*/
  }
  .hexagon .hexagon-shape {
	position: absolute;
	top: -90px;
	left: -60px;
	overflow: hidden;
	display: inline-block;
	margin: 58px 0;
	width: 540px;
	height: 348px;
	-webkit-transform: rotate(-30deg) skewX(30deg) scale(0.5);
	-moz-transform: rotate(-30deg) skewX(30deg) scale(0.5);
	-ms-transform: rotate(-30deg) skewX(30deg) scale(0.5);
	-o-transform: rotate(-30deg) skewX(30deg) scale(0.5);
	transform: rotate(-30deg) skewX(30deg) scale(0.48);
	border-radius: 15%;
  }
  .hexagon .hexagon-shape *,
  .hexagon .hexagon-shape *:before {
	display: block;
	overflow: hidden;
	width: inherit;
	height: inherit;
	border-radius: inherit;
  }
  .hexagon .hexagon-shape .hexagon-shape-inner {
	-webkit-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	-moz-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	-ms-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	-o-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	opacity: 1;
  }
  .hexagon .hexagon-shape:first-child .hexagon-shape-inner:before,
  .hexagon .hexagon-shape .hexagon-shape-inner-2 {
	-webkit-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	-moz-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	-ms-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	-o-transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	transform: skewX(-30deg) rotate(60deg) skewX(30deg);
	background: #F26722;
	content: '';
  }
  .hexagon .hexagon-content {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	text-align: center;
	line-height: 1.5;
  }
  .hexagon h4 {
    font-size: 1.6rem;
    font-weight: bold;
    align-items: center;
    -webkit-font-smoothing: antialiased;
  }
  .hexagon .hexagon-content .content-title {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 70px;
	padding-left: 11rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-title-1 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 11.5rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-text-1 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 90px;
	padding-left: 9.6rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-title-2 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 12.7rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-text-2 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 90px;
	padding-left: 9.6rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-title-3 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 11.7rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-text-3 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 90px;
	padding-left: 10.2rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-title-4 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 11.3rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-text-4 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 90px;
	padding-left: 10.8rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-title-5 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 80px;
	padding-left: 10.8rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  .hexagon .hexagon-content .content-text-5 {
	font-size: 1.6rem;
	font-weight: bold;
	padding-top: 90px;
	padding-left: 11.2rem;
	align-items: center;
	-webkit-font-smoothing: antialiased;
  }
  
  
  .title-text{
  color: #3A4A5B !important;
  font-weight: 400 !important;
  }
  .hexagon .hexagon-content .content-sub {
	color: #9f9fa0;
  }
  .hexagon.hexagon-with-border .hexagon-shape.content-panel {
	-webkit-transform: rotate(-30deg) skewX(30deg) scale(.46);
	-moz-transform: rotate(-30deg) skewX(30deg) scale(0.46);
	-ms-transform: rotate(-30deg) skewX(30deg) scale(0.46);
	-o-transform: rotate(-30deg) skewX(30deg) scale(0.46);
	transform: rotate(-30deg) skewX(30deg) scale(0.46);
  }
  .hexagon.hexagon-with-border .hexagon-shape.content-panel:first-child .hexagon-shape-inner:before,
  .hexagon.hexagon-with-border .hexagon-shape.content-panel .hexagon-shape-inner-2 {
	background: #fff;
  }
  .hexagon.hexagon-button {
	cursor: pointer;
  }
  .hexagon.hexagon-button .content-title {
	font-size: 56px;
	color: #fff;
	padding-top: 0;
  }
  .hexagon.info .hexagon-shape:first-child .hexagon-shape-inner:before,
  .hexagon.info .hexagon-shape-inner-2 {
	background: #F26722;
  }
  .hexagon.info .hexagon-shape.content-panel:first-child .hexagon-shape-inner:before,
  .hexagon.info .hexagon-shape.content-panel .hexagon-shape-inner-2 {
	background: #eef9fe;
  }
  .hexagon.info .content-title {
	color: #F26722;
  }

.hexagon-section {
    margin: 0px auto;
    max-width: 1000px;
}
.hexagon-v2 {
    position: relative;
    float: left;
    width: 200px;
    margin-bottom: 20px;
}
	.hexagon-v2 .hexagon-shape-w-text {
		background: url("../elements/Home page/rounded hexagon.svg") top center no-repeat;
		background-size: contain;
		width: 100%;
		height: 180px;
		text-align: center;
		padding-top: 65px;
	}
	.hexagon-v2 h2 {
		font-weight: 700;
		font-size: 2.5rem;
		color: var(--color-text-1);
		text-align: center;
	}
	.hexagon-v2 .title-text {
		font-size: 28px;
		padding-top: 0px;
		align-items: center;
		line-height: 1em;
		margin-top: 10px;
		margin-bottom: 30px;
		-webkit-font-smoothing: antialiased;
	}

  @media(max-width:1429px) {
	.text-container h1{
		font-size: 3vw !important;
	  }
  .text-container h2{
	font-size: 2vw !important;
  }
}

  @media(max-width:1000px) {
	.text-container h1{
		font-size: 3.5vw !important;
	  }
  .text-container h2{
	font-size: 2vw !important;
  }
}

@media(max-width:800px) {
	.text-container h2{
		font-size: 3.5vw !important;
	  }
	}

@media(max-width:700px) {
	.text-container h1{
		font-size: 3.5vw !important;
		margin-left: 1rem;
	  }

	.text-container h2{
	  font-size: 3.6vw !important;
	}
  }

@media(max-width:397px) {
	.text-container h1{
		font-size: 3.5vw !important;
	  }

	.text-container h2{
	  font-size: 3.6vw !important;
	}
  }

  
  @media(max-width:1622px) {
	.testimonials-text {
		margin-left: -1.2rem;
	}
  }

  @media(max-width:1470px) {
	.testimonials-text {
		margin-left: -1.4rem;
	}
  }

  @media(max-width:1370px) {
	.testimonials-text {
		margin-left: -2rem;
	}
  }

  @media(max-width:1270px) {
	.testimonials-text {
		margin-left: -4rem;
	}
  }

   @media(max-width:1022px) {
	.testimonials-text {
		margin-left: 21rem;
	}
  }

  @media(max-width:950px) {
	.testimonials-text {
		margin-left: 18rem;
	}
  }

  @media(max-width:850px) {
	.testimonials-text {
		margin-left: 15rem;
	}
  }

  @media(max-width:750px) {
	.testimonials-text {
		margin-left: 13rem;
	}
  }
  

  @media(max-width:650px) {
	.testimonials-text {
		margin-left: 10rem;
	}
  }

  @media(max-width:550px) {
	.testimonials-text {
		margin-left: 6rem;
	}
  }

  @media(max-width:450px) {
	.testimonials-text {
		margin-left: 2.7rem;
	}
  }

  @media(max-width:400px) {
	.testimonials-text {
		margin-left: 1.8rem;
	}
  }


  @media(max-width:360px) {
	.testimonials-text {
		margin-left: 1rem;
	}
  }

  /* @media(max-width:350px) {
	.testimonials-text {
		margin-left: 0rem;
	}
  } */

  @media(max-width:1800px) {
	.hexagon {
		margin-left: 7rem !important;
	}
  }

  @media(max-width:1700px) {
	.hexagon {
		margin-left: 6rem !important;
	}
  }

  @media(max-width:1600px) {
	.hexagon {
		margin-left: 5rem !important;
	}
  }

  @media(max-width:1500px) {
	.hexagon {
		margin-left: 4rem !important;
	}
  }

@media(max-width:1440px) {
	#back-to-top-btn {
		right: 60px;
	}
}
  @media(max-width:1350px) {
	.hexagon {
		margin-left: 2.4rem !important;
		padding-left: 4rem;
	}
  }

  @media(max-width:1200px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 3rem;
	}
  }

  @media(max-width:1100px) {
	.hexagon {
		margin-left: 3.5rem !important;
		padding-left: 10rem;
	}
  }

  @media(max-width:1030px) {
	.hexagon {
		margin-left: 2.5rem !important;
		padding-left: 10rem;
		padding-right: 5rem;
	}
  }

  @media(max-width:940px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 10rem;
		padding-right: 4rem;
	}
  }

  @media(max-width:880px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 10rem;
		padding-right: 2rem;
	}
  }
  @media(max-width:830px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 2.4rem;
		padding-right: 9rem;
		right: 1rem;
	}
  }

  @media(max-width:800px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		right: 2.5rem;
	}
  }

  @media(max-width:720px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		right: 3.8rem;
	}
  }
  @media(max-width:768px) {
	main .content-1 .text-container h2 {
		padding-left: 5rem;
		padding-right: 5rem;
	}
	.hexagon-section {
		max-width: 600px;
	}
	#back-to-top-btn {
		transform: scale(1.25) !important;
		bottom: 20px;
	}
  }
  @media(max-width:750px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		right: 4.8rem;
	}
  }

  @media(max-width:670px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		right: 7.8rem;
	}
  }

  @media(max-width:600px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		right: 1.8rem;
	}
  }

  @media(max-width:550px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		left: -4rem;
	}
  }

  @media(max-width:500px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 1.4rem;
		padding-right: 9rem;
		left: -5rem;
	}
  }

  @media(max-width:470px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 12rem;
		padding-right: 2rem;
		left: 0rem;
	}
  }

  @media(max-width:440px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 12rem;
		padding-right: 2rem;
		left: -2rem;
	}
  }
  @media(max-width:425px) {
	.text-container h3 {
		font-size: 28px;
	}
	.hexagon-section {
		max-width: 400px;
	}
	main .content-1 .image-container video {
		width: 100%;
	}
  }
@media(max-width:375px) {
	.hexagon-v2 {
		float: none;
		margin: 0px auto;
	}
	.text-container h3 {
		font-size: 30px;
	}
}
  @media(max-width:370px) {
	.hexagon {
		margin-left: 2rem !important;
		padding-left: 10rem;
		padding-right: 5rem;
		left: -3.5rem;
	}
  }

  .services h1{
	font-size: 3rem !important;
  }