/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
/*	font-family: Arial, Avenir, Calibri, Verdana, Geneva, sans-serif;*/
	font-family: Calibri, Verdana, Arial, Avenir, Geneva, sans-serif;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}/* End of Mayerweb reset tool */


/* Header */
.main_img_and_h1 {
	font-size: 22px;
	text-align:center;
}

header {
/*  background-color: #333;*/
	background-color: #F6F6F6;
	color: #fff;
/*	padding: 1rem;*/
}
#top_area {
/*	height: 70px;*/
	padding: 1rem;
	margin-left: auto;
	max-width: 1200px; /* Set the max width of the content */
/*	max-width: 900px; *//* Set the max width of the content */
	margin-right: auto;
}
@media only screen and (min-width: 769px) {
	.header-logo-position {
	    display: flex;
	    justify-content: left;
		margin-left: 55px;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
@media only screen and (max-width: 768px) {
	.header-logo-position {
		display: flex;
		justify-content: center;
		margin-top: 10px;
		margin-bottom: 10px;
	}
}
.header-logo {
	width: 150px; /* Adjust the width of your logo */
	height: auto; /* Maintain aspect ratio */
}



/* Make the image container take up the full width of the screen */
.image-home-wide {
	width: 100%;
/*  height: 100vh; *//* Set the container's height to full viewport height */
	height: 280px;
	background-image: url("../images/europe/finland/katajanokka-left.jpg"); /* Replace with the path to your image */
	background-size: cover; /* Make the image cover the entire container */
	background-position: center; /* Center the image within the container */
	background-repeat: no-repeat; /* Prevent the image from repeating */

    display: flex; /* to center the headline texts vertically */
    align-items: center; /* to center the headline texts vertically */
    justify-content: center; /* to center the headline texts vertically */
}

/* Style the text that will overlay the image */
.text-image-home-wide {
  position: absolute; /* Set the text container to absolute positioning */
/*  top: 28%; *//* Position the top of the container at the vertical center */
/*  top: 20%; *//* Position the top of the container at the vertical center */
/*  top: 280px; /* Position the top of the container at the vertical center */
/*  left: 50%; /* Position the left of the container at the horizontal center */
/*  transform: translate(-50%, -50%); /* Center the container exactly on the image */
/*  background-color: rgba(255, 255, 255, 0.8); *//* Optional: Add a semi-transparent background for better text readability */
  padding: 10px;
  text-align: center;
}

/* Style the heading and paragraph inside the text container */
.text-image-home-wide h1 {
  margin: 0;
  font-size: 36px;
  font-weight:bold;
}

.text-image-home-wide p {
  margin: 0;
  font-size: 26px;
  margin-top: 10px;
}




/* Main Content */
main {
  padding: 1rem;
  max-width: 1200px; /* Set the max width of the content */
/*  max-width: 900px; *//* Set the max width of the content */
  margin: 0 auto; /* Center the content */
}

.main_h1 {
	font-size: 22px;
	text-align:center;
	margin-top: 10px;
	margin-bottom: 15px;
}

/* Text above 8boxes */
.text-above-8boxes h1 {
  margin: 0;
  font-size: 24px;
  color: #333333;
}
.text-above-8boxes p {
  margin: 0;
  font-size: 14px;
  margin-top: 10px;
  color: gray;
}



.path-url {
	margin-left: 7px;
	color: #333333;
	font-size: 14px;
}
.path-url-text {
	text-decoration: none;
	color: #333333
}



/* Text Boxes Section */
#text-boxes {
  display: flex;
  flex-wrap: nowrap; /* Prevent boxes from wrapping to a new line */
  justify-content: flex-start; /* Start flex items from the left */
  max-width: 1200px; /* Set the maximum width for boxes on normal screens */
/*  max-width: 900px; *//* Set the maximum width for boxes on normal screens */
  margin: 0 auto; /* Center the boxes on normal screens */
}
/* Adjust the size for mobile screens */
.box8 {
  min-width: 270px; /* Set the minimum width of each box */
/*  min-width: 200px; *//* Set the minimum width of each box */
  flex: 0 0 270px; /* Set a fixed width for each box */
/*  flex: 0 0 200px; *//* Set a fixed width for each box */
  height: 270px; /* Set the height of each box */
/*  height: 200px; *//* Set the height of each box */
/*  background-color: #f0f0f0;*/
  background-color: #ffffff;
/*  margin: 5px;*/
/*  margin: 8px;*/
  margin: 10px;
  display: flex;
/*  align-items: center;*/ /* Makes the content to be centered */
  justify-content: center;
  font-size: 15px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

  /* Adjust the size for mobile screens */
  @media only screen and (max-width: 768px) {
    min-width: 100px;
/*    min-width: 100px;*/
    flex: 0 0 270px;
/*    flex: 0 0 200px;*/
    height: 270px;
/*    height: 200px;*/
  }
}

@media only screen and (max-width: 768px) {
	/* Stylish scrollbar on mobile */
	#text-boxes {
		overflow-x: auto;
	}
	/* Webkit-based browsers (Chrome, Safari) scrollbar */
	#text-boxes::-webkit-scrollbar {
		width: 6px; /* Set the width of the scrollbar */
	}
	#text-boxes::-webkit-scrollbar-thumb {
		background-color: #888; /* Color of the scrollbar thumb */
		border-radius: 3px; /* Rounded corners for the scrollbar thumb */
	}
	/* Firefox scrollbar */
	#text-boxes {
		scrollbar-width: thin; /* Set the width of the scrollbar */
		scrollbar-color: #888 #f0f0f0; /* Color of the scrollbar thumb and track */
	}

	/* box8 1st box content for mobile */ /* MOBILE */
	.box8-onemobile-container-vertical {
		display: flex;
		flex-direction: column; /* Stack items vertically */
	}
	/* MOBILE Vertical boxes */
	.box8-onemobile-item-vertical {
	}
	/* MOBILE Image on the box8 1st pic */
	.box8-onemobile-item1 {
/*		width: 200px;*/
		width: 270px;
/*		height: 100px;*/
		height: 135px;
		background-image: url("../images/europe/finland/sauna-snow-tiny.jpg"); /* Set your image URL */
		background-size: cover;
		background-position: center;
	}
	/* MOBILE To place some padding around the text */
	.box8-onemobile-item2 {
		padding-top: 10px;
		padding-right: 10px;
		padding-left: 10px;
	}
}
/* Responsive Styles */
@media only screen and (min-width: 769px) {
	#text-boxes {
		/* Use Flexbox to have a maximum of four boxes per row */
		flex-wrap: wrap;
		justify-content: flex-start;
		align-content: flex-start;
		/* to have more line hight on desktop */
		line-height: 1.3;
	}
	/* First box with double width */
	.box8:first-child {
/*		flex: 0 0 416px; *//* Double the width of the first box */
		flex: 0 0 562px; /* Double the width of the first box */
	}

	/* box8 first image on desktop */ /* DEKTOP */
	.box8-onedesktop-image-container {
		position: relative;
/*		width: 416px; *//* Set your desired width */
		width: 562px; /* Set your desired width */
/*		height: 200px; *//* Set your desired height */
		height: 270px; /* Set your desired height */
	}
	/* Style the image with background image */ /* DEKTOP */
	.box8-onedesktop-image-with-overlay {
/*		width: 416px;*/
		width: 562px;
/*		height: 200px;*/
		height: 270px;
		background-image: url("../images/europe/finland/sauna-snow.jpg"); /* Set your image URL */
		background-size: cover;
		background-position: center;
	}	
	/* Style the transparent text overlay */ /* DEKTOP */
	.box8-onedesktop-text-overlay {
		position: absolute;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5); /* Adjust the alpha value for transparency */
		color: #fff;
		width: 50%; /* Adjust the width of the transparent box */
		height: 100%; /* Match the height of the image container */
		display: flex;
/*		align-items: center;*/
		justify-content: center;
	}
	/* Style the text within the overlay */ /* DEKTOP */
	.box8-onedesktop-text-overlay p {
		margin: 0;
		padding-top: 10px;
		padding-right: 10px;
		padding-left: 10px;
	}


	/* first box8 text styling on desktop */
	.box8-first-container-vertical {
		display: flex;
		flex-direction: column; /* Stack items vertically */
	}
	.box8-first-item-vertical {
	}
	.bold8-first {
		color: white;
		font-weight: bold;
/*		text-align: center;*/
	}
	.desc8-first {
		color: white;
/*		text-align: center;*/
	}
}
@media only screen and (max-width: 768px) {
	.bold8-first {
		color: black;
		font-weight: bold;
	}
}
.bold8-home {
	font-weight: bold;
}



/* box8 content */
.box8-container-vertical {
/*	display: grid;*/
/*	grid-template-rows: auto 1fr; *//* First row takes content's height, the rest distributes the remaining height */
	display: flex;
	flex-direction: column; /* Stack items vertically */
/*	align-items: flex-start; *//* Align items to the start (top) of the container */
}
.box8-item-vertical {
}
.box8-item2 {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
}



/* Footer */
/*footer {*/
/*	background-color: #333;*/
/*	color: #fff;*/
/*	text-align: center;*/
/*  padding: 1rem;*/
/*	padding-top: 150px;*/
/*	padding-bottom: 150px;*/
/*}*/

/* Style the footer container */
.stylish-footer {
  background-color: #333; /* Dark background color */
/*	color: #fff; *//* Text color */
	color: #CCCCCC; /* Text color */
/*  padding: 20px 0;*/
	padding-top: 90px;
	padding-bottom: 70px;
}

/* Center the footer content horizontally */
.footer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 15px;
}

/* Style the footer logo */
.footer-logo {
	width: 150px; /* Adjust the width of your logo */
	height: auto; /* Maintain aspect ratio */
	margin-right: 20px;
	margin-top: 50px;
}

.footer-logo-position {
	display: flex;
	justify-content: center;
}

/* Style the footer links */
.footer-links a {
	color: #CCCCCC; /* Text color */
	text-decoration: none;
	margin: 0 10px;
}

/* Apply hover effect to links */
.footer-links a:hover {
  color: #aaa;
}
.copyrightline {
	display: flex;
	justify-content: center;
	font-size: 14px;
	margin-top: 50pX;
}

/* Text to show normal on box text while hover*/
.invisible-link {
	text-decoration: none;
	color: black;
}