/* 	SQE webpage CSS ver 0.5
	Date: 2025-06-10 @ 15:40
*/


/* Extra small devices (phones, 991px and down) */
@media only screen and (max-width: 991px) {
	html {
		--logo_height: 80px;
		--logo_bottom_padding: 0px;
		--content_top_margin: 25px;
		--logo_total_height: calc(var(--logo_height) + var(--logo_bottom_padding));
		--content_start: calc(var(--logo_height) + var(--logo_bottom_padding) + var(--content_top_margin));
		--content_neg_start: calc(-1*(var(--logo_height) + var(--logo_bottom_padding) + var(--content_top_margin)));
		--main_and_logo_width: 90%;
		--footer_height: 14px;
		--map_and_contact_form_width: 300px;
		scroll-behavior: smooth;
	}

	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding-top: 0px;
		/*background-color: #f4f4f4;*/
		color: #333;
	}

	header {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding-bottom: var(--logo_bottom_padding);
		position: fixed; 
		top: 0; 
		width: 100%; 
		height: var(--logo_height);
		z-index: 3; 
		background-color: white;
		padding-left: 0px;
	}


	header .logo {
		width: auto;
		max-width: 80%;
		height: auto;
		max-height: var(--logo_height);
		object-fit: contain;
	}

	nav {
		background-color: rgb(5, 120, 100);
		overflow: hidden;
		position: fixed; 
		top: var(--logo_total_height);
		width: 100%; 
		z-index: 2;
		font-size: 1em;
		padding-top: 0pt
	}

	nav ul {
		list-style-type: none;
		margin: 0px;
		padding: 0px;
		display: none;
		justify-content: center;
	}

	nav ul li {
		margin: 0px;
	}

	nav ul li a {
		text-decoration: none;
		color: white;
		font-weight: bold;
		padding: 0;
		transition: color 0.5s;
	}

	nav ul li a:hover {
		color: black;
	}

	main {
		width: var(--main_and_logo_width);
		padding-top: var(--content_start);
		padding-bottom: calc(var(--footer_height) + 30px);
		margin: 0px auto; 
		line-height: 1.3;
	}

	section {
		margin-bottom: 0;
		padding-top: var(--content_start);
		margin-top: var(--content_neg_start);	
	}
	
	h2 {
		color: rgb(5, 120, 100);
	}

	img {
		width: 100%;
	}
	
	#img_absorber {
		width: 100%;
	}
	
	#img_about_and_services {
		width: 100%;
	}
	
	#map_iframe {
		width: var(--map_and_contact_form_width);
		height: 300px;
	}

	input {
		width: var(--map_and_contact_form_width);
	}
	
	textarea {
		width: var(--map_and_contact_form_width);
		max-width: var(--map_and_contact_form_width);
		min-width: var(--map_and_contact_form_width);
	}

	footer {
		background-color: rgb(5, 120, 100);
		color: white;
		text-align: center;
		padding: calc(var(--footer_height) / 2);
		font-size: 0.5em;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
	
	.menu-toggle {
		position: absolute;
		right: 0px;
		display: block;
		background-color: rgb(5, 120, 100);
		color: white;
		padding: var(--content_top_margin) calc(var(--content_top_margin) + 10px);
		font-size: 1.5em;
		cursor: pointer;
		text-align: right;
	}

	.mobile-nav ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		background-color: rgb(5, 120, 100);
		display: none;
		flex-direction: column;
	}

	.mobile-nav ul li {
		border-top: 1px solid #fff;
	}

	.mobile-nav ul li a {
		display: block;
		padding: 10px;
		color: white;
		text-decoration: none;
	}

	.mobile-nav ul li a:hover {
		background-color: #004d40;
	}

	.mobile-nav ul.show {
		display: flex;
	}

	.hidden {
		display: none;
	}
	
}


/* NOT SERVED YET */
/* Small devices (portrait tablets and large phones, 600px and up) */
	/*@media only screen and (min-width: 600px) {...} */
/* Medium devices (landscape tablets, 768px and up) */
	/*@media only screen and (min-width: 768px) {...}*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	html {
		--logo_height: 120px;
		--logo_bottom_padding: 20px;
		--content_top_margin: 60px;
		--logo_total_height: calc(var(--logo_height) + var(--logo_bottom_padding));
		--content_start: calc(var(--logo_height) + var(--logo_bottom_padding) + var(--content_top_margin));
		--content_neg_start: calc(-1*(var(--logo_height) + var(--logo_bottom_padding) + var(--content_top_margin)));
		--main_and_logo_width: 80%;
		--footer_height: 20px;
		--map_and_contact_form_width: 600px;
		scroll-behavior: smooth;
	}

	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding-top: 0px;
		background-color: #f4f4f4;
		color: #333;
	}

	header {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding-bottom: var(--logo_bottom_padding);
		position: fixed; 
		top: 0; 
		width: 100%; 
		height: var(--logo_height);
		z-index: 3; 
		background-color: white;
		padding-left: calc(var(--main_and_logo_width)/2 - 350px);
	}

	header .logo {
		max-width: 300px;
	}

	nav {
		background-color: rgb(5, 120, 100);
		overflow: hidden;
		position: fixed; 
		top: var(--logo_total_height);
		width: 100%; 
		z-index: 2; 
	}

	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 15px 5px 15px;
		display: flex;
		justify-content: center;
	}

	nav ul li {
		margin: 0 20px;
	}

	nav ul li a {
		text-decoration: none;
		color: white;
		font-weight: bold;
		padding: 10px 15px;
		transition: color 0.9s;
	}

	nav ul li a:hover {
		color: black;
	}
	
	.menu-toggle {
		display: none;
	}

	.mobile-nav {
		display: none;
	}

	main {
		width: var(--main_and_logo_width);
		padding-top: var(--content_start);
		padding-bottom: calc(var(--footer_height) + 40px);
		margin: 0px auto; 
		line-height: 1.3;
	}

	section {
		margin-bottom: 0;
		padding-top: var(--content_start);
		margin-top: var(--content_neg_start);
	}

	h2 {
		color: rgb(5, 120, 100);
	}

	img {
		width: 100%;
	}
	
	#img_absorber {
		float: right; 
		width: 400px;
	}
	
	#img_about_and_services {
		float: right; 
		width: 500px;
	}
	
	#map_iframe {
		width: var(--map_and_contact_form_width);
		height: 450px;
	}
	
	input {
		width: var(--map_and_contact_form_width);
	}
	
	textarea {
		width: var(--map_and_contact_form_width);
		max-width: var(--map_and_contact_form_width);
		min-width: var(--map_and_contact_form_width);
	}

	footer {
		background-color: rgb(5, 120, 100);
		color: white;
		text-align: center;
		padding: calc(var(--footer_height) / 2);
		font-size: 0.8em;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	html {
		--logo_height: 120px;
		--logo_bottom_padding: 20px;
		--content_top_margin: 60px;
		--logo_total_height: calc(var(--logo_height) + var(--logo_bottom_padding));
		--content_start: calc(var(--logo_height) + var(--logo_bottom_padding) + var(--content_top_margin));
		--content_neg_start: calc(-1*(var(--logo_height) + var(--logo_bottom_padding) + var(--content_top_margin)));
		--main_and_logo_width: 50%;
		--footer_height: 20px;
		--map_and_contact_form_width: 600px;
		scroll-behavior: smooth;
	}

	body {
		font-family: Arial, sans-serif;
		margin: 0;
		padding-top: 0px;
		background-color: #f4f4f4;
		color: #333;
	}

	header {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		padding-bottom: var(--logo_bottom_padding);
		position: fixed; 
		top: 0; 
		width: 100%; 
		height: var(--logo_height);
		z-index: 3; 
		background-color: white;
		padding-left: calc(var(--main_and_logo_width)/2 - 25px);
	}

	header .logo {
		max-width: 300px;
	}

	nav {
		background-color: rgb(5, 120, 100);
		overflow: hidden;
		position: fixed; 
		top: var(--logo_total_height);
		width: 100%; 
		z-index: 2; 
	}

	nav ul {
		list-style-type: none;
		margin: 0;
		padding: 15px 5px 15px;
		display: flex;
		justify-content: center;
	}

	nav ul li {
		margin: 0 15px;
	}

	nav ul li a {
		text-decoration: none;
		color: white;
		font-weight: bold;
		padding: 10px 15px;
		transition: color 0.9s;
	}

	nav ul li a:hover {
		color: black;
	}
	
	
	.menu-toggle {
		display: none;
	}

	.mobile-nav {
		display: none;
	}

	main {
		width: var(--main_and_logo_width);
		padding-top: var(--content_start);
		padding-bottom: calc(var(--footer_height) + 40px);
		margin: 0px auto; 
		line-height: 1.3;
	}

	section {
		margin-bottom: 0;
		padding-top: var(--content_start);
		margin-top: var(--content_neg_start);
	}

	h2 {
		color: rgb(5, 120, 100);
	}

	img {
		width: 100%;
	}
	
	#img_absorber {
		float: right; 
		width: 400px;
	}
	
	#img_about_and_services {
		float: right; 
		width: 500px;
	}	
	
	#map_iframe {
		width: var(--map_and_contact_form_width);
		height: 450px;
	}

	input {
		width: var(--map_and_contact_form_width);
	}	
	textarea {
		width: var(--map_and_contact_form_width);
		max-width: var(--map_and_contact_form_width);
		min-width: var(--map_and_contact_form_width);
	}

	footer {
		background-color: rgb(5, 120, 100);
		color: white;
		text-align: center;
		padding: calc(var(--footer_height) / 2);
		font-size: 0.8em;
		position: fixed;
		width: 100%;
		bottom: 0;
	}
}