﻿/* Text Boxes Section */
#text-boxes-theme {
  display: flex;
/*  flex-wrap: nowrap; *//* Prevent boxes from wrapping to a new line */
  flex-wrap: wrap; /* Let boxes to wrap to a new line */
  justify-content: flex-start; /* Start flex items from the left */
  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 */
.box-theme {
  min-width: 140px; /* Set the minimum width of each box */
  flex: 0 0 140px; /* Set a fixed width for each box */
  height: 140px; /* Set the height of each box */
/*  background-color: #f0f0f0;*/
  background-color: #ECF6F7;
  margin: 6px;
  display: flex;
/*  align-items: center;*/ /* Makes the content to be centered */
  justify-content: center;
  font-size: 12px;

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



/* Responsive Styles */
@media only screen and (min-width: 769px) {
	#text-boxes-theme {
		/* Use Flexbox to have a maximum of four boxes per row */
/*		flex-wrap: wrap;*/
/*		justify-content: flex-start;*/
/*		align-content: flex-start;*/
	}
}



/* box8 content */
.box-theme-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 */
}
.box-theme-item-vertical {
}
.box-theme-item1 {
	margin-top: 10px;
	margin-left:auto;
	margin-right:auto;
}
.box-theme-item2 {
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
}

.bold-theme {
	color: black;
	font-weight:bold;
	text-align: center;
}
.desc-theme {
	color: #333333;
	text-align: center;
}
.desc-theme-line2 {
	padding-left: 60px; /* on hover to make the whole box light up on desktop */
	padding-right: 60px; /* on hover to make the whole box light up on desktop */
}



/* Hover effect on box-theme */
.cool-link-theme {
  transition: background-color 0.3s ease, transform 0.3s ease;
  text-decoration: none;
}
.cool-link-theme:hover {
  background-color: #26BAC9;
}



/* Style for larger screens (desktop) */
.container1-country {
	margin-top: 30px;
	display: flex;
}

.column1-left-country {
  flex: 2; /* Set the left column to 2/3 of the width */
/*  max-width: 600px; *//* Set the maximum width for the left column */
  max-width: 900px; /* Set the maximum width for the left column */
/*  padding: 20px;*/
/*  border: 1px solid #ddd;*/
}

.column1-right-country {
  flex: 1; /* Set the right column to 1/3 of the width */
  max-width: 300px; /* Set the maximum width for the right column */
/*  padding: 20px;*/
/*  border: 1px solid #ddd;*/
}

/* Media query for smaller screens (mobile) */
@media (max-width: 768px) {
	.container1-country {
		flex-direction: column;
	}

	.column1-left-country,
	.column1-right-country {
		flex: 1; /* Equal width for both columns on mobile */
		max-width: none; /* Remove the max-width on mobile */
		border: none;
    padding: 10px;
	}
}



.theme-txt-part {
	margin-top: 50px;
	margin-bottom: 30px;
}
.date-theme {
	color: #666666;
	font-size: 12px;
	margin-top: 5px;
	margin-bottom: 15px;
}
.theme-h1-img-text {
	padding-left: 6px;
	padding-right: 20px;
}
.theme-h1-img-text h1 {
    font-size: 22px;
/*    margin-bottom: 10px;*/
}
.theme-h1-img-text p {
    font-size: 18px;
    line-height: 1.4;
    margin-top: 20px;
    margin-bottom: 20px;
}
.theme-main-text {
	padding-left: 50px;	
	padding-right: 50px;
}
.theme-main-text h2 {
    font-size: 19px;
    margin-bottom: 10px;
}
.theme-main-text p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.image-container-theme {
    max-width: 100%; /* Ensure the container doesn't exceed its parent's width */
    margin: 0 auto; /* Center the container horizontally */
    text-align: center; /* Center the image horizontally */
}

.image-container-theme img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Maintain the image's aspect ratio */
}
.theme-n-info-next {
	text-align: right;
	font-weight:bold;
}
.theme-n-info-next a {
	text-decoration: none;
	color: black;
}
.theme-area-name {
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 6px;
	width: 100%;
}



ul.square-theme {
	list-style-type: square;
}
.info-list-theme {
	line-height: 1.4;
	margin-left: 20px;
	margin-bottom: 20px;
}



.theme-references {
    margin-bottom: 20px;
}
.theme-references p {
	margin-top: 0px;
	margin-bottom: 0px;
}


