/*!
 * Copyright (c) 2023 Liber8 Holding (Pty) Ltd
 * 
 * This file is part of a web application developed by Liber8 Holding (Pty) Ltd.
 * Unauthorized copying of this file, via any medium is strictly prohibited.
 * Proprietary and confidential.
 * 
 * For more information, contact Liber8 Holding (Pty) Ltd at web@liber8.co.za.
 */
:root {
	
  /* Opaque Colors */
  --system-color-1000: #0F1417;
  --system-color-900: #253038;
  --system-color-800: #36454f;
  --system-color-700: #445864;
  --system-color-600: #546c7a;
  --system-color-500: #607a8c;
  --system-color-400: #788e9d;
  --system-color-300: #8fa2af;
  --system-color-200: #afbdc6;
  --system-color-100: #ced7dd;
  --system-color-50: #ebeff2;
  --system-color-25: #F2F5F7;
  --system-color-0: #FFFFFF;

  /* Liquid Colors */
  --system-liquid-color-1000: rgba(15, 20, 23, 0.95);
  --system-liquid-color-900: rgba(37, 48, 56, 0.95);
  --system-liquid-color-800: rgba(54, 69, 79, 0.95);
  --system-liquid-color-700: rgba(68, 88, 100, 0.95);
  --system-liquid-color-600: rgba(84, 108, 122, 0.95);
  --system-liquid-color-500: rgba(96, 122, 140, 0.95);
  --system-liquid-color-400: rgba(120, 142, 157, 0.95);
  --system-liquid-color-300: rgba(143, 162, 175, 0.95);
  --system-liquid-color-200: rgba(175, 189, 198, 0.95);
  --system-liquid-color-100: rgba(206, 215, 221, 0.95);
  --system-liquid-color-50: rgba(235, 239, 242, 0.95);
  --system-liquid-color-0: rgba(255, 255, 255, 0.95);

  /* System Titlebars */
  --system-titlebars-bg: #253038;
  --system-titlebars-text: #FFFFFF;

  /* System Options */
  --system-options-bg: rgba(37, 48, 56, 0.95);
  --system-options-text: #FFFFFF;
  --system-options-hover: rgba(53, 69, 80, 0.95);

  /* System Shadows */
  --system-box-shadow: 0.01em 0.08em 0.5em #00000045;
  --system-borders: 0.01em solid #00000045;

  /* Basic Colors */
  --system-color-white: #FFFFFF;
  --system-color-black: #000000;
}


body{
	overflow-x: hidden;
	background-color: var(--system-color-25);
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
	padding: 0!important;
	margin: 0;
}

/*MENU CONTENT*/

.menu-content {
    display: none;
    padding: 10px;
    text-decoration: none;
    color: black;
	width: 200px;
	height: 200px;
	z-index: 2;
	flex-flow: column;
}

.menu-content a{
	text-decoration: none;
	color: white!important;
}

.burger-menu {
    display: none!important;
    cursor: pointer;
}

.menu-content-btn{
	color: rgba(255,255,255,1.00);
	width: 100%;
	padding: 0.2em 0.5em;
	border-bottom: 0.01em solid white;
}

.menu-content-btn:hover{
	cursor: pointer;
	background-color: teal;
}

/*NAVBAR*/

.navbar{
			display: flex;
			flex-flow: row;
			padding: 0.5em;
			border: var(--system-borders);
			width: 95vw;
			height: 7vh;
			background-color: rgba(255,255,255,0.9);
			border-radius: 0.3em;
			margin-top: 1vh;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			position: fixed;
			top: 0;
			z-index: 1;
		}
		
		.navbar .logo{
			height: 70%; 
		  	width: auto; 
		  	object-fit: contain;
		}
		
		.navbar .btn{
			color: rgba(255,255,255,1.00);
			border-radius: 0.5em;
			background-color: rgba(53,151,62,1.00);
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 0.5em;
			height: 70%; 
		  	width: auto;
			flex-flow: row;
			gap:1em;
			text-decoration: none;
		}
		
		.navbar .btn:hover{
			cursor: pointer;
			background-color: rgba(89,185,98,1.00);
		}


/*INTRO*/

	.intro{
		width: 100%;
		min-height: 100vh;
		background-image: url("../images/intro-banner.jpg");
		background-size: cover;
		background-position: center;
		display: flex;
		flex-flow: column;
		padding: 5em;
		box-sizing: border-box;
		background-attachment: fixed;
		justify-content: center;
	}
	
	.intro  .intro-text{
		font-weight: bold;
		font-size: 26px;
    	line-height: 1.5;
	}
	
	.intro .intro-paragraph{
		width: 50vw;
		margin-top: 5vh;

	}
	
	.intro-paragraph strong{
		color: rgba(38,152,29,1.00);
	}


	.products{
		display: flex;
		width: 100%;
		min-height: 100vh;
		justify-content: flex-start;
		flex-flow: row;
		box-sizing: border-box;
	}




/*PRODUCTS*/

.product-section{
	display: flex;
	flex: 1;
	flex-flow: column;
}

.product-navbar{
			padding: 0.5em;
			background-color: rgba(22,27,42,1.00);
			color: rgba(255,255,255,1.00);
			margin: 0.5em;
			display: flex;
			gap:0.5em;
			flex-flow: row;
			font-size: 16px;
			border-radius:0.3em;
		}
		
		.product-navbar .product-navbar-btn{
			display: flex;
			justify-content: center;
			align-items: center;
			border-right: 0.01em solid #4e6096;
			padding: 0.2em 0.5em;
		}
		
		.product-navbar .product-navbar-btn:hover{
			background-color: rgba(20,81,28,1.00);
			cursor: pointer;
		}

	.product-badges{
		flex:1;
		display: flex;
		flex-flow: column;
		gap:5vh;
		padding: 2em;
		
	}
	
	.product-info{
		flex:1;
		display: flex;
		background-image: url(../images/product-default.jpg);
		background-size: cover;
	}
	
	.product-badges .badges-holder{
		width: 100%;
		display: flex;
		flex-flow: row;
		justify-content: space-between;
	}
	
	.badges-holder .badge{
		width: fit-content;
		display: flex;
		flex-flow: column;
		gap:0.5em;
		justify-content: center;
		align-items: center;
		
	}
	
	
	
	.badges-holder .badge .title{
		
		font-weight: bold;
		font-size: 0.7em;
		max-width: 4vw;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		white-space: nowrap;
		
	}
	
	.badges-holder .badge .icon{
		min-width: 3em;
   		min-height: 3em;
		width: 4vw;
		height: 4vw;
		background-color: rgb(66,110,153);
		font-weight: bold;
		border:0.3em solid var(--system-color-300);
		border-radius: 0.5em;
		color: rgba(255,255,255,1.00);
		display: flex;
		justify-content: center;
		align-items: center;
		transition: transform 0.5s ease;
	}
	
	.badges-holder .badge .icon:hover{
		background-color: var(--system-color-600);
		cursor: pointer;
		transform: scale(1.2);
		
	}

/*PRODUCT*/

	.product{
		padding: 1em;
		margin: 1em;
		border-radius: 0.5em;
		width: 100%;
		height: auto;
		display: flex;
		overflow-x: hidden;
		flex-flow: column;
		gap:1em;
	}
	
	.product-banner img{
		width: 100%;
	}
	
	.product-title{
		font-size: 3vh;
	}
	
	.product-desc{

	}
	
	.product-desc strong{
		color: rgba(41,145,64,1.00);
	}
	
	.product-desc{
		list-style: circle;
	}
	
	.product-desc ul li{
		margin-bottom: 1em;
	}




/*CONTACT*/

.contact{	
		display: flex;
		width: 100%;
		min-height: 100vh;
		justify-content: flex-start;
		flex-flow: row;
		box-sizing: border-box;
		background-color: rgba(255,255,255,1.00);
	}
	
	
	
	
.contact-options{
		flex: 1;
		padding: 2em;
		display: flex;
		flex-flow: column;
		gap:0.8em;
		box-sizing: border-box;
		
	}
	
.contact-options .contact-intro{
		padding: 1em;
		font-style: italic;

		
	}
	
.contact-options .contact-intro strong{
		color: rgba(179,115,0,1.00);
	}
	
	
.contact-options .btn{
		width: 100%;
		border-radius: 0 0.5em 0 0.5em;
		background-color: rgba(179,115,0,1.00);
		color: rgb(255 255 255);
		padding: 0.8em;
		box-sizing: border-box;
		transition: transform 0.5s ease;
	}
	
	.contact-options .btn:hover{
		cursor: pointer;
		filter: brightness(120%);
	}
	
	.contact-options .title-text{
		font-size: 4vh;
		font-weight: bold;
		color: rgba(179,115,0,1.00);
	}
	
	
	
	.contact-context{
		flex: 1;
		display: flex;
		background-image: url(../images/contact-us.jpg);
		background-size: cover;

	}

.contact-context .contact-item{
	
		padding: 1em;
		margin: 1em;
		border-radius: 0.5em;
		width: 100%;
		height: auto;
		display: flex;
		overflow-x: hidden;
		flex-flow: column;
		gap:1em;
	
}

	.contact-context .contact-banner img{
		width: 100%;
	}
	
	.contact-title{
		font-size: 3vh;
	}
	

@media (max-width: 600px) {
	
	.intro  .intro-text{
		font-weight: bold;
		font-size: 20px;
    	line-height: 1.2;
	}
	
  .products, .intro, .contact {
    flex-flow: column;
  }
	
	.product-info{
		order: 2;
	}
	
	.product-navbar{
		
		font-size: 12px;
		
	}
	
	.navbar .btn{
		padding: 0.5em 1em;
		height: 50%;
		font-size: 12px;
	}
	
	.burger-menu {
        display: block!important;
    }

    .menu-content {
        display: none;
    }
	
	.product-navbar-btn{
		display: none!important;
	}
	

}