﻿html,body {
	font-family: Arial, Helvetica, Verdana, sans-serif !important;
}

h1,h2,h3,h4,h5,h6 {
	font-family: Arial, Helvetica, Verdana, sans-serif !important;
}

.w3-content {
	max-width: 1336px !important;
}

#body-gradient {
	background-image: linear-gradient(
		#8D9092 10%,   /* start color stops at 10% */
		#5B5F66 45%,   /* middle color at 50% */
		#5B5F66 55%,   /* middle color at 50% */
		#8D9092 90%    /* end color starts at 90% */
		);
	background-attachment: fixed;
	background-size: 100% 100vh;
	background-repeat: no-repeat;
}

#top {
	margin-top: 20px;
	margin-bottom: 20px;
}

#header {
	padding: 24px 24px 12px 24px!important
}

#header img {
	width:100%;
	max-height:100px;
}

.address {
	font-size:24px !important;
}
	
.grey-background {
	padding: 32px 32px 16px 32px;
}

.text-panel {
	padding: 48px 32px;
}

.text-panel h2 {
	line-height: 1em;
}

.read-more {
	padding: 0px 0px 0px 0px !important;
}

html {
	scroll-behavior: smooth;
}

.modal-dialogue {
	overflow-y: initial !important;
}

.modal-body {
	height: 65vh;
	overflow-y: auto;
}

.modal-text-panel {
	padding: 5px 0px 15px 0px;
}

#footer {
	background-color: #5B5F66;
	color: #ffffff;
}

#footer a {
	text-decoration: none;
}

#footer a:hover {
	color: #cdcdcd;
	text-decoration: underline;
}

.ja-flags {
	padding: 16px 32px 0px 32px;
}

.ja-flag {
	margin: 10px;
}

.flex-equal {
	display: flex;
	flex-wrap: wrap;
	gap: 16px; /* Optional: spacing between columns */
}

.flex-col {
	flex: 1 1 100%;
	display: flex;
}

@media (min-width: 1150px) {
	.flex-col {
		flex: 1 1 48%; /* Side by side on large screens */
	}
}

.flex-inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.inner-split {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
}

.left-third {
	flex: 0 0 33%;
	max-width: 33%;
}

.right-twothird {
	flex: 0 0 66%;
	max-width: 66%;
	padding: 20px;
}

.logo img {
	width: 80%;
	max-height: 175px;
	max-width: 250px;
	object-fit: contain;
}

.sustainable {
	padding: 24px 96px !important;
	background-color:#1b945d;
}

.division-strapline {
	font-size: 30px !important;
}

@media (max-width: 1336px) { /* Remove Top and Bottom Gap for Tablet/Mobile */

	#top {
		margin-top: 0px;
		margin-bottom: 0px;
	}
	
}

@media (max-width: 1149px) { /* Mobile and Tablet */

	.address {
		font-size:18px !important;
	}
	
	.flex-equal {
		display: flex;
		flex-wrap: wrap;
		gap: 0px; /* Remove gap between columns when stacking */
	}

	.logo img {
		width: 100%;
		max-width: 180px;
		max-height: 170px;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	#footer a {
		text-decoration: underline;
	}
	
	.sustainable {
		padding: 24px 32px !important;
	}
	
}

@media (max-width: 600px) { /* Mobile Only */
	.inner-split {
		flex-direction: column;
	}

	.left-third,
	.right-twothird {
		flex: none;
		max-width: 100%;
		width: 100%;
		text-align: center;
		margin: 0;
		padding: 0;
	}

	.left-third {
		text-align: center;
	}

	.right-twothird {
		padding-top: 10px;
	}

	.logo img {
		width: 100%;
		max-width: 150px;
		max-height: 130px;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
}
