/*
 * main.css
*/

:root {
    --primary-color: #254862;
}

/********************* apply border-box globally to all elements ******/
* {box-sizing: border-box;}

/* Custom CSS */
#headerBannerBar, #footerBannerBar {
	width: 100%;
	background-color: #f8f9fa; /* Adjust this as needed */
}

#contentWrapper {
	max-width: 1000px; /* Fixed width */
	margin: 0 auto; /* Center horizontally */
	padding: 0px;
}

main {
	background-color: #ffffff; /* Adjust as needed */
	padding: 20px;
}


html {
	overflow-y: scroll; /**  ensure the scrollbar is always visible **/
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 	
}

html, body {
	height: 100%; /* Ensures body takes full height */
	margin: 0; /* Remove default margin */
    overflow-x: hidden; /* Prevent horizontal scrolling */
    max-width: 100%;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensures the container takes at least full viewport height */
    margin: 0; /* Remove any default margins */
}
header, main, footer {
	margin: auto;
	width: 1000px;
	padding: 0px 20px 20px 20px;
}

body {
    margin: 0; /* Remove default margin */
    font-size: 18px;
}

.header {
	min-height: 100px;
	position: sticky;
	top: 0;
}

main {
	flex: 1; /* Allows main to grow and fill available space */
    padding-top: 20px; /* Adds space between content and header */
    padding-bottom: 20px; /* Adds space between content and footer */
}
footer {
	min-height: 50px;
	font-size: 16px;
	margin-top: 10px; /* Add space above the footer */
}

/************* id = content: normal text **************************/

#content {
    box-sizing: border-box;
    padding-right: 20px;
    float: left;
}

.newsBox, #content {
    font-size: 18px;
    line-height: 1.5; /* Adjust the line height to see if it helps */
    font-weight: normal;
}

.newsBox .title, #content h1{
    margin: 0px 0px 16px 0;
    font-size: 24px;
	font-weight: bold;
}

#content h2{
    margin-bottom: 14px;
    font-weight: bold;
    font-size: 20px;
}

#content h3{
    font-size: 18px;
}

.hometext {
    font-size: 18px;
	margin: 20px;
}

/* Styling for the FreeZe text */
.hometext .white {
    font-size: 24px;
    margin-left: 10px; /* Space between logo and text */
    color: white; /* Text color */
}

.hometext img {
    margin: 0 20px 20px 0; /* Adds 20px space to the right and bottom */
    float: left; /* Keep the float for left-aligned images */
    max-width: 70%; /* The image will scale down but never exceed 100% of its parent */
    height: auto;    /* Maintain aspect ratio */
}

.hometext img[style*="float:right"] {
    margin: 0 0 20px 20px; /* Adds 20px space to the left and bottom for right-aligned images */
}

/************* class = homeBox: normal text **************************/

.newsBox {
    width: 33%;
    padding: 20px;
}

.newsBox .title {
    margin-bottom: 6px;
    font-weight: bold;
    color: #1A3E5A;
}

/************** header ********************************/

/* Ensure headerBannerBar allows overflow */
#headerBannerBar {
    min-height: 140px;
    background: linear-gradient(to bottom, #203E54 0%, #5a89ac 100px);
    overflow: visible; /* Allow dropdown to extend beyond the header */
    position: sticky; 
	top: 0;
    z-index: 1; /* Make sure it is stacked above pageSlider */
}


/* Make the h1 text inside the headerBannerBar visible and properly sized */
#headerBannerBar h1 {
	font-size: 26px; /* Increase the font size for visibility */
	color: white; /* Set the text color to white */
	margin: 0; /* Remove extra margin */
	padding: 20px 0; /* Add padding for vertical spacing */
}

/************************************ Page Slider *****************************/

/* Style for the banner text */
/* Ensure #pageSlider doesn't interfere with the dropdown /
#pageSlider {
    position: relative; /* Prevent it from overlapping dropdown /
    z-index: 0; /* Make sure it stays behind the dropdown /
    padding-top: 50px; /* Add some space to prevent overlap /
}
*/
#pageSlider a {
    display: block;
    text-align: left; /* Align text to the left */
    font-size: 28px;
    color: white;
    padding: 8 0; /* Adjust padding for vertical space */
    width: 1000px; /* Width of the banner text */
    line-height: 1.3; /* Space between lines */
    text-decoration: none;
    position: absolute;
    transition: opacity 1s;
	z-index: 0; /* Make sure it stays behind the dropdown */
}

/* Indent second line */
#pageSlider a span.second-line {
    display: block;
    text-indent: 200px; /* Indent the second line */
}

/* Show the active banner */
#pageSlider a.show {
    opacity: 1;
    z-index: 500;
}

/* Hide the non-active banners */
#pageSlider a {
    opacity: 0;
    z-index: 1;
    transition: opacity 1s ease-in-out;
}


/************** footer ********************************/

#footerBannerBar {
    height: 40px; /* Set the height of the footer */
    background-color: #203E54; /* Background color */
    color: white; /* Default text color */
    align-items: center; /* Center vertically */
    width: 100%; /* Ensure footer stretches to full width */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
	position: fixed;
	bottom: 0;
    flex-shrink: 0; /* Prevent footer from shrinking */

    display: flex; /* Use flexbox for alignment */
    flex-wrap: wrap; /* Allows the items to wrap to the next line on smaller screens */
    justify-content: center; /* Center items horizontally */
}

#footerBannerBar a {
	color: white; /* Set link color to white */
	text-decoration: none; /* Remove underline */

    padding: 5px 10px; /* Add padding around links to make them easier to tap on mobile */
    font-size: 16px; /* Adjust font size for smaller screens */
    white-space: nowrap; /* Prevent links from breaking in the middle of words */
}

#footerBannerBar a:hover {
	text-decoration: underline; /* Optional: Underline links on hover */
}

/********************************* menu **************************************/ 

/***********************************************************************/
/* https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar2 */

.mynav {
	display: flex;
	/*justify-content: space-between; /* Ensures space between menu and language selector */
	align-items: center;
	font-family: "Raleway", sans-serif; /* Ensures consistent font across menu */
    margin-left: -20px;	
}

.mynav ul {
    list-style: none;
    margin: 0;
    padding: 0;
	z-index: 999; /* hamburger is 1000 */
}
.mynav ul li {
    display: inline-block;
    position: relative;
}

.mynav ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
	color: #FFFFFF;
    transition: background-color 0.3s;
}

.mynav ul li a:hover {
    background-color: #FCAD3F;
}

.mynav ul li ul {
    display: none;
    position: absolute;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
}

.mynav ul li:hover ul {
    display: block;
}

.mynav ul li ul li {
    display: block;
    white-space: nowrap;
}

.mynav ul li ul li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s;
}

.mynav ul li ul li a:hover {
    background-color: #f0f0f0;
}

.mynav-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    top: 100%; /* Position the dropdown below the parent */
    left: 0; /* Align it with the dropdown button */
}


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



/* Active/Pressed menu item styling */
._mynav ul li a.active {
    background-color: #FCAD3F; /* Highlight color lightorange*/
    border-radius: 0px; /* Maintain border radius */
    color: white; /* Text color */
    padding: 10px 20px; /* Add padding to all sides: 10px top/bottom, 20px left/right */
}

/************************** dropdown *****************************/


.dropbtn {
  color: white;
  padding: 16px;
  border: none;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
	background-color: var(--primary-color); /* Use the variable */
    min-width: 200px; /* Adjust the width */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 999; /* Ensure dropdown appears above other elements */
    top: 100%; /* Dropdown starts below the dropdown button */
}

.dropdown-content a {
    padding: 10px 15px; /* Adjust padding */
    background-color: var(--primary-color); /* Use the variable */
    white-space: nowrap; /* Prevent text from wrapping */
    color: white;
}


.dropdown-content a:hover {
	background-color: var(--primary-color); /* Use the variable */
}

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

/* Show the dropdown when hovering */
.dropdown:hover .dropdown-content {
    display: block;
}

/************************** language *****************************/

/* Language selector styling */
.language-select {
	color: white;
	align-items: center;
	margin-left: auto; /* Pushes language selector to the right */
}

.language-select a {
	text-decoration: none;
	color: white;
	padding: 5px 10px;
	font-weight: bold;
}

.language-select a:hover {
	background-color: var(--primary-color); /* Use the variable */	
	border-radius: 4px;
}

.language-select a.active {
    background-color: #FCAD3F; /* Highlight color */
    font-weight: bold;
    border-radius: 3px;
    /*text-decoration: underline; /* Adds underline to the active language */
}


// ************************* form ***********************************

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.formcontainer {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


/*********************** alert **********************************/
/* from bootstrap */

.alert{padding:15px;margin-bottom:20px;border:1px solid transparent;border-radius:4px}.alert h4{margin-top:0;color:inherit}.alert .alert-link{font-weight:700}.alert>p,.alert>ul{margin-bottom:0}.alert>p+p{margin-top:5px}.alert-dismissable,.alert-dismissible{padding-right:35px}.alert-dismissable .close,.alert-dismissible .close{position:relative;top:-2px;right:-21px;color:inherit}.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}.alert-success hr{border-top-color:#c9e2b3}.alert-success .alert-link{color:#2b542c}.alert-info{color:#31708f;background-color:#d9edf7;border-color:#bce8f1}.alert-info hr{border-top-color:#a6e1ec}.alert-info .alert-link{color:#245269}.alert-warning{color:#8a6d3b;background-color:#fcf8e3;border-color:#faebcc}.alert-warning hr{border-top-color:#f7e1b5}.alert-warning .alert-link{color:#66512c}.alert-danger{color:#a94442;background-color:#f2dede;border-color:#ebccd1}.alert-danger hr{border-top-color:#e4b9c0}.alert-danger .alert-link{color:#843534}

.alert {
    font-size: 18px; /* Adjust this value to your preferred size */
}


// ******************************** mail **************************

.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
    padding: 15px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    border-radius: 4px;
}

/* Additional styling for the button and spacing */
.btn-primary {
	width: 150px; /* Widen the button */
	padding: 10px 20px; /* Add padding for better appearance */
}

/* Spacing between the checkbox and the button */
.form-check {
	margin-bottom: 20px; /* Adds space between checkbox and button */
}

code {
	font-size: 18px;
}

/ ******************************** images **************************

/* Ensure images are responsive *
.responsive-img {
    max-width: 80% !important; /* The image will scale down but never exceed 100% of its parent *
    height: auto !important;    /* Maintain aspect ratio *
    margin: 30px 0 !important;  /* Optional: Add some margin for spacing *
}*/


/* ******************************* images **************************
/* Define a class that stacks its elements */


/* ******************************* images **************************
/* textImageContainer für listen wie in getting started
*/

.layoutFix { /* not used at all, but if I remove this line, the stackContainer does not work*/
}

/* Define a class that stacks its elements */
.stackContainer {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start; /* Align children to the start (left) */
    gap: 5px; /* Adjust space between the stacked items */
	overflow: hidden; /* This will clear floats */
}

.stackContainer img {
    max-width: 150px; /* Ensure images are responsive */
    height: auto; /* Keep aspect ratio */
    margin: 2px 0; /* Small space above and below images */
    align-self: flex-start; /* Align image to the left */
}
/* Additional styling for any text elements */
.stackContainer p {
    margin: 0; /* Remove default margin from paragraphs */
    width: 100%; /* Ensure paragraph takes full width */
}

/* *************************************************************** */
/*            FAQ
*/
 #faq {
    margin: 20px 0;
}

.faq-item {
    margin-bottom: 15px; /* Space between FAQ items */
}

.faq-item h3 {
    margin: 0; /* Remove default margin */
    font-size: 1.2em; /* Adjust the font size */
    color: #1A3E5A; /* Customize your color */
}

blockquote {
    margin: 5px 0 5px 0; /* Add some spacing around blockquote */
    padding: 8px 10px 1px 30px; /* Padding inside blockquote */
    background-color: #f0f0f0; /* Light background for contrast */
    /*border-left: 2px solid #FCAD3F; /* Accent color */
    /*font-style: italic; /* Italics for answers */
}



/******************************************************************/
/* Hamburger menu button */
button.hamburger {
	display: none; /* Hidden by default */
}

/*******************************************************************/
/* Video */
.video-wrapper {
    position: relative;
    width: 100%; /* Make the wrapper take up the full width */
    padding-top: 56.25%; /* Maintain a 16:9 aspect ratio (height/width = 9/16 = 0.5625) */
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Full width of the container */
    height: 100%; /* Full height of the container */
    border: none; /* Remove border */
}