body {
	font-family: 'Myriad Pro', sans-serif;
    background-color: #000; /* radial-gradient(circle at center, #3a3a3a 0%, #111 100%);*/
    color: #fff;
    line-height: 1.5; /* text line spacing a bit taller */
	
	/* Fixed radial gradient */
    background-image: radial-gradient(circle, #3a3a3a, #111);
    background-size: 100% 100vh; /* Size of each gradient */
    background-attachment: fixed; /* Keeps the background fixed while scrolling */

	display: flex;
	flex-direction: column;
	/* align-items: center; */
	min-height: 100vh;
	}

.header { /* Contains the top-bar, the navbar and the logo-container */
	  display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5em 0em;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 10;
	
}

.section-bar {
	  background-color: #333132;
    width: 100%;
    padding:1em;
}

.logo-container img {
	height: 4em; /* Adjust as needed */
  margin: 0em 0em 0em clamp(1em,4vw,4em);
}

#language-options {
    font-size: 1rem;
  position: absolute;
  z-index: 2;
  top: 8em;
  }

 
a.language-option {
	color: #D2691E;
	text-decoration: none;
	margin: 0 0.5em;
  }

a.language-option {
	text-decoration: underline;
	}

.menu-container {
	flex-grow: 2;
	display: flex;
	justify-content: center;
    /* word-break: break-word; */
	}

/* Basic styling for the dropdown menu */
.dropdown {
	position: relative;
	display: inline-block;
}

.menu-link {
  background-color: revert;
  color: white;
  padding: 0.5em;
  text-decoration: none;
}

.menu-link:hover, .dropdown:hover .menu-link {
  background-color: #444;
}


.dropdown-content {
	display: none;
	position: absolute;
	right: 0; /* Aligns the dropdown to the right of the nav-item */
	background-color: #444; 	/* Dropdown background */
	min-width: 14em;
	box-shadow: 0em 0.5em 1em 0em rgba(0,0,0,0.5); /* Subtle shadow for depth */
	z-index: 1;
	}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown-content a {/* Items for each menu item */
	color: white; 	/* Orange for links */
	padding: 1em 1em;
	text-decoration: none;
	display: block;
	}

.dropdown-content a:hover {/* Items for each menu item (Hover)*/
	  background-color: #555; /* Even lighter grey for hover */
	  color: #ffffff;
  }

.dropdown button { /* Menu items*/
	background: none;
	border: none;
	color: #fff; 		/* White text for buttons */
	cursor: pointer;
	padding: 0.25em 0.5em; /* Padding to match the 'Donate' button size */
  }

.dropdown button:hover {/* Menu items (Hover)*/
  text-decoration: underline;
  }

.right-buttons {
    display: flex;
    align-items: center;
    /* Aligns the "Donate" and "Languages" buttons to the right */
}

.button-highlight {
	background-color: #e75625; 	/* Orange background to make it stand out */
	padding: 0.5em 1em;
	color: #fff; 				/* White text */
	/* border: none; */
	border-radius: 0.5em;
	font-weight: bold;
	/* text-decoration: none; */
	/* display: inline-block; */
	cursor: pointer;
	box-shadow: 0 0.1em 0.2em rgba(0,0,0,0.3); 	/* Add shadow for a more pronounced effect */
	/* transition: background-color 0.3s ease; /* Smooth transition for hover effect */ 
	/*padding: 5px 10px;*/
	}

.button-donate:hover {
	background-color: #ff5722; /* Lighter orange on hover */
	}  
.button-donate {
	background-color: #555; /* Lighter orange on hover */
	}

.hero {
	display: flex;
    justify-content: space-between;
    align-items: center;
    /* padding: 150px 50px 50px 50px; */
    min-height: 80vh;
	  position: relative;
    flex-wrap: wrap;
    column-gap: 5%;
	/* Sets up the hero section layout with flexbox */

	/*text-align: center;
	margin: 10px 0; 	/* Space above and below the content section /
  padding: 0 clamp(5%,10px,100px);*/
    margin: 0em 2%;
}

.hero .content-hero h1 {
    font-size: 300%;
    color: #FF5B2E;
    max-width: 600px;
}

.network-diagram {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width:40%;
    top: 50%;
    position: absolute;
    width: max(min(100%,700px),50%);
    /* border: 2px solid #fff; /\* Add a temporary border to visualize it *\/ */
    /* Centers the network diagram image on the left */
}

.network-diagram img {
    /* max-width: 100%; */
    height: auto;
    position: absolute;
    width: 100%;
    /* padding: 0px 50px 0px 50px; */
	/* Makes the network diagram image responsive */
}

.content-hero {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    /* Aligns the content (text box) to the right */
}

.content-hero-text-box {
    background-color: rgba(0, 0, 0, 0.7); /* Black with 50% transparency */
    padding: 50px; /* Increased padding for a larger box */
    border-radius: 20px;
    max-width: 700px; /* Increased max-width to make the box wider */
	/* margin-right: 150px; /\* Adds space to the right of the text box *\/ */
	word-wrap: break-word; /* Ensure text wraps within the box */
}

.info .highlight {
    color: #FF5B2E;
    font-weight: bold;
	font-size: 125%;
}

.content-info {
    /* background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */ 
    border-radius: 20px;
    /* max-width: 800px; /* Increased max-width to make the box wider */ 
	/* margin-right: 150px; /\* Adds space to the right of the text box *\/ */
	  word-wrap: break-word; /* Ensure text wraps within the box */
}

.content-info h1 {
    padding: 0em 5%;
}

/* Four nodes*/
.fournodes {
	display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 90px 2% 0px 2%;
    min-height: 80vh;
	  position: relative;
    flex-wrap: wrap-reverse;
    column-gap: 3%;
}

.fournodes .content-fournodes h1 {
    font-size: 300%;
    color: #FF5B2E;
    max-width: 600px;
}

.title-fournodes {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    /* Aligns the content (text box) to the right */
    margin-bottom: 3em;
}

.title-fournodes h1 {
    font-size: 175%;
    color: #FF5B2E;
    max-width: 600px;
}

.content-fournodes {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    /* Aligns the content (text box) to the right */
}

.content-section {
	text-align: center;
	margin: 10px 0; 	/* Space above and below the content section */
	padding: 0 clamp(5%,10px,100px);
	}
	
.content-alternate {
    background-color: black;
	}

.content-section h1 {
	font-size: 2.5em; 	/* Large font for the statement */
	color: #e75625; 	/* Orange text color */
	}

.content-section h2 {
	font-size: 1.8em; 	/* Large font for the statement */
	color: #e75625; 	/* Orange text color */
	}

.content-alternate h2 {
    margin-top: 50px;
    color: white;
    text-align: left;
	}

.content-section p {
	text-align: initial;
	color: #ffffff; 	/* White color for paragraph text */
	margin-bottom: 20px;
	}

.intext-link {
	color: #e75625; /* Orange color for the 'Learn More' link */
	text-decoration: none;
  }

.intext-link:hover {
	text-decoration: underline; /* Underline on hover for link */
	}

.content-box { /* on all pages except main */
    background-color: #f4f4f4; /* Light background color */
    color: #000; /* Dark text color */
    padding: 50px;
    border-radius: 8px;
    width: 80%;
    max-width: 800px;
    margin: 40px auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	/* opacity: 0.9; */
	position: relative;
  }

.content-box.wide { /* on all pages except main */
    max-width: 1200px;
}

.content-box h1 {
    margin-top: 5;
	color: #e75625;
	text-shadow: 1px 1px #333132;
  }

.content-box p {
	margin-top: 5;
    line-height: 2;
	color: #333132;
	text-align: justify;
	text-justify: inter-word;
  }

.content-box + .footer {
    margin-top: auto;
  }

.contact-item {
    display: flex;
    align-items: center;
    margin: 10px 0;
  }

.content-item {
    /* margin: 1em 0em; */
    padding: 0.5em 0em;
}

 .content-item img {
    /* margin-right: 10px; */
    width: 1.3em; 
    height: auto;
 }

 .content-item label {
     width:7em;
     display: inline-block;
 }

 .content-item.error {
     color: #e75625;
 }
 .content-item.error {
     display: none;
 }
 .content-item.error.active {
     display: inherit;
 }

.content-box ul {
	color: #333132;
    list-style-type: disc; /* Use disc as the bullet point */
    padding-left: 20px; /* Indent the list */
  }

.content-box ul ul {
	color: #333132;
    list-style-type: circle; /* Second-order bullet points */
    padding-left: 20px; /* Further indent the second-order list */
  }
  
.content-box ul li {
    margin: 15px 0; /* Space between list items */
  }

.button {
    background-color: #333; /* Dark grey background */
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
  }

.next-button {
    float:right;
    clear: right;
  }

 .button:hover {
    background-color: #555; /* Lighter grey on hover */
  }

  .columns {
    display: flex;
    justify-content: space-between;
	  width: 100%;
  }

  .column {
    width: 49%; 
  }

  .secondary-title {
    font-size: 1.25em;
    font-weight: bold;
    margin-top: 20px;
    color: #444;
  }

  .tertiary-title {
    font-size: 1em;
    font-weight: bold;
    margin-top: 15px;
    color: #666;
  }

  .frame-container{
      display: flex;
      width: 100%;
  }
  .frame {
	    max-width: 1060px;
      margin-top: 30px;
	    margin-left: auto; 				/* Center the frame horizontally */
	    margin-right: auto; 				/* Center the frame horizontally */
      --cutoff: calc(540px - 100vw); /*cutoff for when all diamonds are vertical */
      --padd: min(max(var(--cutoff),0px),1px); /* turn cutoff into 0px,1px */
      margin-bottom: calc(170px + 570 * var(--padd)); /* 450px step when all diamonds are vertical */
	}
  .frame::before {
      content: "";
      width: 175px;
      float: left;
      height: 150%;
      shape-outside: repeating-linear-gradient(#0000 0 340px, #000 0 350px);
      backgroun-color: #fff;
}

.diamond-positioner {
    width: 350px;
    height: 200px;
    position:relative;
    display: inline-block;
}

.diamond-container {
	width: 250px; 				/* Adjust the size of each diamond */
	height: 250px; 				/* Adjust the size of each diamond */
	overflow: hidden; 			/* Ensures the image outside the container is not shown */
	transform: rotate(45deg) translateX(71px); 	/* Rotate the container to form a diamond shape */
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	box-shadow: 0 0 0 rgba(0,0,0,0);
	/* position: relative; */
	cursor: pointer;
	/* margin: 15px; 				/\* Space between diamonds *\/ */
	/* margin-left: 75px; 			/\* Half the width of the diamond to overlap *\/ */
	position: absolute; 		/* Absolute positioning to allow controlled overlap */
	display: flex; 				/* To center the image inside the container */
	justify-content: center; 	/* Center horizontally */
	align-items: center; 		/* Center vertically */
	border-radius: 15%; 		/* Adjust this value to change the roundness of the corners */
	}

/* Shift all diamonds right and down */
.diamond-container {
	  /* top: 100px; /\* Shift down *\/ */
	}

.diamond-container:hover {
	transform: rotate(45deg) translateX(71px) scale(1.3);
	box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
	z-index: 10;
	}

.diamond-container img {
	transform: rotate(-45deg) scale(1) translateY(-20%) translateX(-5%); 	/* Rotate the image back to its original orientation */
	transition: transform 3s ease;
	max-width: 400%;
	display: block;
	/* width: 140%; /* Adjust size to cover the diamond fully */ */
	height: auto;
	position: absolute;
	/* left: -20%; /* Centering the image within the rotated container */ */
	/* top: -20%;	 */
	}

/* Shift every second diamond down */

/* Unique initial zoom and position levels for each diamond */
img.georeferencing {
	transform: rotate(-25deg) scale(1.3) translateY(-50px) translateX(50px); 
	}
img.juliana {
	transform: rotate(-45deg) scale(0.64) translateX(120px) translateY(80px); 
	}
img.territory {
	transform: rotate(-45deg) scale(1) translateX(110px) translateY(40px); 
	}
img.timeline {
	transform: rotate(-45deg) scale(0.8) translateX(200px) translateY(70px); 
	}
img.crops {
	transform: rotate(-45deg) scale(1.5); 
	}	

.diamond-positioner:hover img.georeferencing {
	transform: rotate(-45deg) scale(0.6) rotate(-25deg) translateX(150px);
	}
.diamond-positioner:hover img.juliana {
	transform: rotate(-45deg) scale(0.75) translateX(-130px) translateY(110px);
	}
.diamond-positioner:hover img.territory {
	transform: rotate(-45deg) scale(0.45) translateX(110px) translateY(-40px);
	}
.diamond-positioner:hover img.timeline {
	transform: rotate(-45deg) scale(1.3) translateX(-280px) translateY(130px);
	}
.diamond-positioner:hover img.crops {
	transform: rotate(-45deg) scale(0.6) translateX(90px) translateY(50px);
	}


.milestones {
}

.title-milestones {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Aligns the content (text box) to the right */
}

.title-milestones h1 {
    font-size: 175%;
    color: #fff;
    /* max-width: 600px; */
}

.content-milestones-text-box {
    background-color: rgba(0, 0, 0, 0.5); /* Black with 50% transparency */
    padding: 2em; /* Increased padding for a larger box */
    border-radius: 20px;
    /* max-width: 900px; /* Increased max-width to make the box wider */ 
	/* margin-right: 130px; /* Adds space to the right of the text box */ 
	  word-wrap: break-word; /* Ensure text wraps within the box */
    width:80%;
    text-align: center;
}

div.milestone {
    display: flex;
    flex-direction: row;
    padding-left:10%;
    padding-right:10%;
    margin-top:40px;
    margin-bottom:40px;
}

div.milestone.toggle span.intext-link {
	cursor: pointer;
}

.milestone-box {
    flex: 1 1 70%;
    background-color: #333132;
    padding: 20px;
	  border-radius: 20px; 		/* Adjust this value to change the roundness of the corners */
    /* padding-bottom:60px; */
    padding-bottom:12vw;
    align-self: end;
}

.milestone:hover .milestone-box {
}

img.milestone {
    pointer-events: none;
    flex: 1 1 clamp(200px,100%,500px);;
    width: clamp(200px,100%,500px);
    align-self: end;
    margin-bottom: 7px;
}
img.milestone.right {
    margin-left:clamp(-350px,-57.5%,-200px);
    margin-right:clamp(-12.5px,-2.5%,-10px);
}
img.milestone.left {
    margin-right:clamp(-350px,-57.5%,-200px);
    margin-left:clamp(-12.5px,-2.5%,-10px);
    z-index:2;
}


.rtl {
    direction: rtl;
}

.right-image {
    float: right;
}
.left-image {
    float: left;
}
.float-image {
    width: 50%;
    padding: 10px;
}
.float-image img {
    width: 100%;
}

.float-image:hover img {
    box-shadow: 0px 4px 16px 0px rgba(0,0,0,0.5); /* Subtle shadow for depth */
}

.right-image:hover img {
    width: 200%;
    transform: translate(-50%,0);
    /* transform: translate(50%,50%) scale(2.5) translate(-50%,-16.66%); */
}

.left-image:hover img {
    transform: translate(-50%,50%) scale(2.5) translate(+50%,-16.66%);
}

.text-link {
  /* background-color: #000; */
  color: white;
  padding: 10px;
  text-decoration: none;
  /* display: block; */
  /* border-radius: 8px; */
  margin: 30px 0px;
}

.donate-bar {
	font-size: 2.5em;
	padding: 40px 0px;
	text-align: center;
}

.support-container {
    /* background-color: #333132; /* Dark background */ 
    color: #fff; /* White text color */
    text-align: center;
    padding: 40px 20px;
    margin-bottom: 60px;
	/* border-radius: 20px; 		/* Adjust this value to change the roundness of the corners */ 
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
	width: 100%;
	position: relative;
    align-self: center;
  }

  .support-container h2 {
    font-size: 2em; /* Big text */
    margin-bottom: 20px;
  }

  .support-button {
    background-color: #e75625;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 125%;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block;
  }

 .support-button:hover {
    background-color: #d63e2c;
  }

.footer {
	width: 100%;
	background-color: #333;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 00px;
	/* position: absolute; */
	/* bottom: 0; */
	}

.footer .footer-menu {
	/* display: flex; */
	}

.footer .footer-menu a {
	color: white;
	text-decoration: none;
	margin: 0 10px;
	}

.footer .footer-menu a:hover {
	text-decoration: underline;
	}

.footer .logo {
	height: 40px;
	}

.footer .footer-logo {
	height: 100px;
	margin-left: auto;
	}
	
.footer .copyright {
	font-size: 75%;
	color: #ccc;
	text-align: center;
	flex: 1;
	}

.cookie-banner {
    display: block;
	  background-color: #d09; /* Black background for the page */
    color: #fff;
	  cursor: pointer;
    position: fixed;
    bottom:0px;
    width: 100%;
    line-height: 1.8;
}
.cookie-content {
    padding: 20px;
}

.fontscale08 {
    font-size: 80%;
}
.fontscale11 {
    font-size: 110%;
}

/* Circle animation */

.circleanim {
	display: flex;
    /* justify-content: space-between; */
    align-items: center;
  /*   padding: 40px 750px 0px 200px; */
    min-height: 50vh;
	  /* position: relative; */
    flex-wrap: wrap-reverse;
}
.circleanim>a {
    display: flex;
    flex: 1;
    justify-content: center;
}
.circleanim a img {
    padding: 5em 5em;
}

.circleanim h1 {
    padding: 5%;
    color: #fff;
    max-width: 600px;
    flex: 1;
}