/******************************************
************ Main Body Styles *************
******************************************/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');

html, body {
    margin: 0;
    padding: 0;
    position: relative;
}

body {
	font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
}

/* White link */
.link-white:link, .link-white:visited, .link-white:hover, .link-white:active {
    color: #fff;
}

/* Black link */
.link-black:link, .link-black:visited, .link-black:hover, .link-black:active {
    color: #000;
}

/* Blue link */
.link-blue:link, .link-blue:visited, .link-blue:hover, .link-blue:active {
    color: #0e1736;
}


header {
    background-color: #FFFFFF;
    Height:120px;
}


b {
    display: inline; /* Ensures the <b> tag is treated as an inline element */
}

ul li {
    margin: 0;
    padding: 0;
    align-self: flex-start;
}

H1, H2, H3 {
    margin-top: 0;
    padding-top: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.div_HeaderText {
    font-family: 'Open Sans', sans-serif;
    font-size: 2.3em; /* Twice as large as standard H1 */
}


.column-set {
    display: flex; /* Use flexbox for layout */
    width: 95%; /* 80% of the width of the parent div */
    margin: 0 auto; /* Center the column set */
    margin-top: 20px; /* Add a bottom margin of 20px */
    font-family: 'Poppins', sans-serif; /* Set the font to Poppins */
    text-align: left; /* Center the text */
    padding-right: 20px; /* Add some padding to the right side */
}

.column-set .left-column {
    flex: 0 0 33%; /* 33% of the width of the container */
    min-width: 300px; /* Set a minimum width of 200px */
    border-right: 1px solid lightgrey; /* Add a faint, grey 1px line */
    padding-right: 10px; /* Add 10px of padding to the right side */
    font-size: 1.2em; /* We may override this in-line */
}
.column-set .right-column {
    flex: 0 0 67%; /* 67% of the width of the container */
    padding-left: 20px; /* Add some padding to the left of the right column */
    font-size: 1.2em; /* We may override this in-line */
}

.column-set .large-column {
    flex: 0 0 100%; /* 100% of the width of the container */
}


/******************************************
********** Navigation Styles **************
******************************************/
nav {
	text-align: right;
	width: 100%;
}

/******************************************
************* Menu Styles *****************
******************************************/
.menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Center the menu */
    position: relative; /* Required for z-index to take effect */
    z-index: 1000; /* Adjust this value as needed */
    border-radius: 4px; /* Add rounded corners to the menu */
    top:60px;
    right:60px;
}

.menu li {
    display: inline-block;
    border-radius: 4px; /* Add rounded corners to each list item */
    position: relative; /* Add this line */
}

.menu li a, .menu li ul li a {
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    color: #333;
    transition: background-color 0.3s ease, border-bottom 0.3s ease; /* Transition for smooth effects */
    border-radius: 4px; /* Add rounded corners to each link */
    text-align: left; /* Align text to the left */
}

.menu li a {
    font-size: 150%; /* Double the base font size */
}

.menu li a:hover {
    background-color: #c8c8d8; /* Gentle highlight color */
    border-bottom: 1px black;
}

.menu li > ul {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border-radius: 4px; /* Add rounded corners to the dropdown */
    border: 1px solid grey; /* Add a 1px grey border */
    left: 20px; /* Move the dropdown 20px to the right of the parent menu item */
    z-index: 1001; /* Add this line */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */    
}

.menu li:hover > ul {
    display: block;
}

.menu li ul li {
    display: block;
    border-radius: 4px; /* Add rounded corners to each dropdown list item */
}

.menu li ul li a {
    font-size: 100%; /* Adjust as needed */
    border-radius: 4px; /* Add rounded corners to each dropdown link */
    white-space: nowrap; /* Prevent text from wrapping */
    padding: 10px 15px 0px 5px; /* Top and bottom padding 10px, right padding 15px, left padding 5px */
}




/******************************************
************* Content Slide ***************
******************************************/

#div_SlideContent { 
    flex: 0 0 80%;
    position: relative;
    overflow: hidden;
    width: 100%;
    /*height: 50vh;*/
    height:500px;
    font-size: 1.2em;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 2s;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;	
}

.overlay_1 {
    position: absolute;
	width: 400px; /* Your fixed width */
    height: auto; /* Height scales with content */
	left: 75%;
    top: 60%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
	flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
	padding:18px;
}

.overlay_2 {
    position: absolute;
	width: 550px; /* Your fixed width */
    height: auto; /* Height scales with content */
	left: 25%;
    top: 34%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
	flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
	padding:18px;
	font-size: 1.2em;
}

.overlay_3 {
    position: absolute;
	width: 450px; /* Your fixed width */
    height: auto; /* Height scales with content */
	left: 75%;
    top: 34%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
	flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
	padding:18px;
}

.overlay_4 {
    position: absolute;
	width: 550px; /* Your fixed width */
    height: auto; /* Height scales with content */
	left: 25%;
    top: 60%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
	flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
	padding:18px;
	font-size: 1.2em;
}

.overlay_5 {
    position: absolute;
	width: 50%; /* Your fixed width */
    height: 80%; /* Height scales with content */
	left: 70%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
	flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
	padding:18px;
}

.overlay_5 h4, .overlay_5 ul {
    margin-top: 0;
    margin-bottom: 0;
}

.overlay_generic {
    position: absolute; /* Position it absolutely within its parent */
    top: 50%; /* Center it vertically */
    left: 70%; /* Offset it to the right */
    transform: translate(-50%, -50%); /* This is necessary to perfectly center the div */
    width: 40%; /* Your fixed width */
    min-width: 200px; /* Minimum width */
    min-height: 200px; /* Minimum height */
    height: auto; /* Height scales with content */
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
    padding: 18px;
    overflow: hidden; /* Hide content that overflows the div */
}

.overlay_generic_middle {
    position: absolute;
    width: 560px;
    height: 300px;
    left: 50%;
    top: 380px;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 15px;
    padding:12px;
}

.overlay_generic_datacompanies {
    position: absolute;
    width: 660px;
    height: 670px;
    left: 50%;
    top: 380px;
    transform: translate(-50%, -20%);
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: 15px;
    padding:12px;
}
.overlay_title {
    position: relative;
	width: 260px; /* Your fixed width */
    height: 20px; /* Height scales with content */
	left: 20px;
    top: 20px;
    background-color: rgba(0, 0, 0, 0.7); /* Translucent grey */
    color: white;
    display: flex;
	flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border-radius: 15px; /* Adjust as needed */
	padding:12px;
}




.slide.current {
    opacity: 1;
}

#prev, #next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.5);
    border: none;
    font-size: 2em;
    padding: 10px;
}

#prev {
    left: 10px;
}

#next {
    right: 10px;
}


/******************************************
************* Other Content ***************
******************************************/


#div_Content {
    flex-grow: 1;
    width: 100%;
    text-align: center;
    margin-top: 20px; /* Add a top margin of 20px */
}

.image-banner {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 300px;
    width: auto;
}
.image-banner-tall {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    height: 500px;
    width: auto;
}

/******************************************
************* Modal Footer ****************
******************************************/


#div_Footer {
    flex: 0 0 300px;
    width: 100%;
    height: 300px;
}

/******************************************
************* Footer ****************
******************************************/


footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
    margin-top: 25px;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    margin: 15px auto 0;
    padding: 0 15px;
}

.footer-section {
    flex: 1;
    padding:5px;
}

.footer-section h3 {
    margin-bottom: 15px;
}

.footer-section p, .footer-section a {
    margin-bottom: 10px;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
}



/******************************************
************* Modal Login Form*************
******************************************/


.modal {
    display: none; 
    position: fixed; 
    z-index: 1; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content {
    background-color: #fefefe;
    background-image: url('images/bg_AI_Face_1.jpg');
    color:#000;
    margin: 15% auto; 
    padding: 20px;
    border: 1px solid #888;
    width: 500px; 
    height: 300px;
    padding:0;
    font-family: 'Inconsolata', monospace; /* Use Inconsolata font, fall back to monospace if not available */
    font-size: 1.1em;
    font-weight: bold; 
    
}
.modal-content .modal-header {
    background-color: #aaaaff; /* Dark blue background */
    height: 30px; /* Adjust as needed */
    width: 100%; /* Full width */
}

/* Add padding to other children of .modal-content */
.modal-content > :not(.modal-header) {
    padding: 20px; /* Adjust as needed */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}


#button_ModalLogin:hover {
    background-color: #ddd;
}

#button_ModalLogin:active {
    background-color: #bbb;
}

#modal-link-container {
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px;
    z-index: 2000; /* Ensure this is on top of everything else but below the button */
}

#button_ModalLogin {
    width: 210px;
    height: 30px;
    right:100px;
    padding: 0; /* Remove padding */
	border: 1px solid black; /* Add a 1px black border */
    background-color: #b9cfef;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex; /* Use flexbox to center the text */
    justify-content: center; /* Center the text horizontally */
    align-items: center; /* Center the text vertically */
    box-sizing: border-box; /* Include border and padding in width and height */
    z-index: 2001; /* Ensure this is on top of everything, including the modal container */
}