:root {
    --header-height: 80px; /* Set the default header height here */
    --header-padding: 5px;
    --header-total: calc(var(--header-height) + 2*var(--header-padding));
    --section-padding-top: 100px;
    --section-padding-bottom: 80px;
    --color-background-blue: #EEFAFF;
    --color-background-white: #f4f4f4;
    --color-light-blue: #EEFAFF;
    --color-light-dark-blue: #B8E1FF;
    --color-dark-blue: #030726;
    --color-light-orange: #FFB133;
    --color-medium-orange: #FF9210;
    --color-dark-orange: #FF7300;
    --color-dark-blue-transparent: 3, 7, 38;
    --color-dark-medium-blue: #004CF5;
    --color-dark-light-blue: #0080FF ;
    --color-dark-dark-blue: #022b9c;
    --general-color: var(--color-dark-light-blue);
    --hover-color: var(--color-dark-medium-blue);

}

html, body {
    margin: 0;
    padding: 0;
    background-color: var(--color-dark-blue); /* Set the background color of the body */
    color: var(--color-light-blue); /* Set text color to white for the entire page */
    font-family: 'Poppins', Arial, sans-serif; /* Use Arial font for general text */
    height: 100%;
    z-index: -4;
}

h1 {
    font-size: 40px;
}


/* Black header bar container */
#header {
    background-color: rgba(var(--color-dark-blue-transparent), 0.9); /* 60% transparency */ /* Set the background color of the header bar to black */
    display: flex;
    justify-content: space-between; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    padding: var(--header-padding) 0px; /* Increase right padding */
    /*position: relative;*/
    position: fixed; /* Set the header to a fixed position */
    width: 100%; /* Take up the full width of the viewport */
    top: 0; /* Position at the top of the viewport */
    z-index: 3; /* Set higher z-index to ensure it's above the video */
    height: var(--header-height); /* Use the custom property for header height */
}

/* Logo container */
#logo-container {
    margin-left: 30px;
    display: flex;
    align-items: center; /* Vertically center the content */
}

/* Logo */
#logo {
    width: 170px; /* Slightly reduce the logo size */
    height: auto; /* Maintain aspect ratio */
    margin-right: 10px; /* Add spacing between logo and text */
}

/* Navigation bar */
#navbar ul{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Display navigation links horizontally */
}

#navbar ul li {
    margin-right: 50px; /* Adjust the spacing as needed */
    text-transform: uppercase; /* Transform text to uppercase */
}

/* Change the color of the navigation links to white */
#navbar ul li a {
    font-size: 18px; /* Increase font size */
    color: var(--color-light-blue); /* Set text color to white */
    text-decoration: none; /* Remove underlines from the links */
    position: relative;
    transition: color 0.3s;
}

/* Add an underline on hover */
#navbar ul li a:hover::before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /*border-bottom: 2px solid #66ccff;*/
    transition: left 0.3s;
}

/* Hover effect */
#navbar ul li a:hover {
    color: var(--general-color); /* Change text color on hover */
}

.main-nav-list {
list-style: none;
display: flex;
align-items: center;
}

/* MOBILE */
.btn-mobile-nav {
border: none;
background: none;
cursor: pointer;

display: none;
}

.icon-mobile-nav {
height: 3rem;
width: 3rem;
color: var(--color-light-blue);
margin-right: 20px;
}

.icon-mobile-nav:hover {
    color: var(--general-color); /* Change text color on hover */
}

.icon-mobile-nav[name="close-outline"] {
    display: none;
}


/* Video container */
#video-container {
    position: relative;
    margin-top: var(--header-total);
    width: 100%;
    height: calc(100vh - var(--header-total)); /* Adjust height based on viewport height minus header height */
    overflow: hidden;
    z-index: 1; /* Set lower z-index to ensure it's below the header bar */
}

#video {
    position: relative;
    top:0;
    left: 0;
    width: 100%;
    height: 100%; /* Set video height to 100% of the container */
    object-fit: cover;
}

/* Text in the bottom right corner of the video */
#bottom-text {
    position: absolute;
    left: calc(10% + 20px);
    font-weight: 600;
    bottom: 20px; /* Maintain the bottom padding */
    right: 60px; /* Increase the right padding */
    font-size: 40px; /* Maintain the font size */
    color: var(--color-light-blue); /* Set text color to white */
    z-index: 2; /* Set higher z-index to ensure it's above the video */
}

/**************************/
/* About Section */
/**************************/
#about-section {
    background-color: var(--color-light-blue); /* Set the background color of the section */
    padding: 0 40px; /* Add padding to the section */
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    position: relative; /* Add relative positioning */
    z-index: 2; /* Set higher z-index to ensure it's above the video */
    color: var(--color-dark-blue); /* Set text color to black */
}

#about-title {
    text-align: center;
    padding-bottom: 3.0rem;
    font-weight: 600;
}

.container {
    /* 1140px */
    max-width: 120rem;
    padding: 0 3.2rem;
    margin: 0 auto;
}

.grid {
    display: grid;
    column-gap: 6.4rem;
    row-gap: 9.6rem;

    /* margin-bottom: 9.6rem; */
}

.grid:not(:last-child) {
    margin-bottom: 9.6rem;
}

.grid--2-cols {
    grid-template-columns: repeat(2, 1fr);
}

.grid--center-v {
    align-items: center;
}

.step-description {
    font-size: 1.5rem;
    line-height: 1.8;
}

.heading-tertiary {
    font-size: 1.8rem;
}

.step-img-box {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;
}

.step-img-box::before,
.step-img-box::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.step-img-box::before {
    width: 60%;
    /* height: 60%; */

    /* 60% of parent's width */
    padding-bottom: 60%;
    z-index: -2;
}

.step-img-box::after {
    width: 45%;
    padding-bottom: 45%;
    z-index: -1;
}

.step-img {
width: 90%;
/* z-index: 10; */
}
.step-img-logo {
    width: 60%;
}


/* APPLICATIONS SECTION */

#applications-section {
    background-color: var(--color-dark-blue); /* Set the background color of the section */
    padding: 0 40px; /* Add padding to the section */
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    position: relative; /* Add relative positioning */
    z-index: 2; /* Set higher z-index to ensure it's above the video */
    text-align: center; /* Center align text within the section */
    color: var(--color-light-blue); /* Set text color to black */
}

#applications-title {
    padding-bottom: 3.0rem;
}

#applications-content {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow team members to wrap to the next row */
    margin: 30px; /* Add spacing around each team member */
}

#applications-container {
    margin: 10px; /* Add spacing around each team member */
    background-color: var(--color-dark-blue);
    border-radius: 10px;
    padding: 45px;
    border: 1px solid var(--general-color);
    width: 20%;
    transition: all 0.3s ease-in-out; /* Add a transition for smooth scaling */

}

/* Zoom effect on hover */
#applications-container:hover {
    transform: scale(1.05); /* Zoom in the image */
    box-shadow: 0 6px 19px 0 rgba(0,0,0,0.2);
}

#applications-icon {
    padding-bottom: 15px;
    padding-top: 15px;
    font-size: 40px;
    width: 55px;

}
#applications-text {
    font-size: 25px;
}



/* CSS for the team section */
#team-section {
    background-color: var(--color-background-white); /* Set the background color for the section */
    padding: 0 10%; /* Add padding to the section */
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    text-align: center; /* Center-align content */
}

#team-title{
    padding-bottom: 2.5rem;
}

#team-list {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allow team members to wrap to the next row */
}

#team-member {
    margin: 20px 5%; /* Add spacing around each team member */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #f4f4f4;
    border-radius: 10%;
    /*border: 3px solid #333;*/
}



.name {
    margin-top: 20px; /* Add spacing between the photo and position text */
    font-weight: bold; /* Make the position text bold */
    color: #333; /* Set the text color for the position */
    font-size: 20px;
}

#position {
    color: #333; /* Set the text color for the position */
    width: 200px;
    line-height: 1.8;
}

/* CSS for the blue circle border */
#circle-border {
    width: 150px; /* Set the fixed width of the circle */
    height: 150px; /* Set the fixed height of the circle */
    background-color: #0077B5; /* Blue color for the circle */
    border: 3px solid #0077B5; /* Add a border around the photo */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden;

}

/* CSS for the team member image inside the circle */
#team-member img {
    width: 100%; /* Make the image fill the circle */
    height: auto;
    border-radius: 50%; /* Make it a circle */
    transform-origin: center center; /* Set the transform origin to the center of the image */
    transition: transform 0.3s; /* Add a transition for smooth scaling */
}

/* Zoom effect on hover */
#team-member img:hover {
    transform:scale(1.1); /* Zoom in the image */
}

#linkedin-members {
    background-color:#333;
    border-radius:6px;
    color:#f4f4f4;
    font:bold 35px Arial, Helvetica, sans-serif;
    height:40px;
    margin-top:20px;
    margin-bottom:20px;
    width:40px;
    transition: color 0.3s;
}

#linkedin-members:hover{
    background-color:#0077B5;
}

.slide-in-on-scroll {
    transform: translateY(100px); /* Start below the viewport */
    opacity: 0; /* Initially hidden */
    transition: transform 0.5s, opacity 0.5s;
}

 /* NEWS SECTION */
/*--------------------------------
# SLIDER
--------------------------------*/

#swiper-section {

position: relative;
height: 80%;
}

#news-title{
    position: absolute;
    top: 60px;
    left: calc(10% + 20px); /* Increase the right padding */
    color: var(--color-light-blue); /* Set text color to white */
    font-size: 40px;
    text-align: center;
    font-weight: 500;
    z-index: 2;
}

#slide-content {
margin: 0 calc(10% + 20px);
}

.slide-text{
font-size: 35px;
padding-bottom: 25px;
font-weight:normal;
}

.swiper {
width: 100%;
height: 100%;
}

.swiper-slide {
text-align: left;
font-size: 18px;
display: flex;
justify-content: left;
align-items: center;
background-color: rgb(3, 7, 38, 0.6);
background-blend-mode: darken;
}

.swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}

.swiper-button-next{
color: var(--general-color);
}

.swiper-button-prev{
color: var(--general-color);
}

.swiper-pagination{
--swiper-navigation-color: #fff; 
--swiper-pagination-color: #fff;
margin-bottom: 20px;

}

.slide-1{
background-image: url("../images/banners/earth_photo_1.jpg");
background-size: cover;
}

.slide-2{
background-image: url("../images/banners/earth_photo_2.jpg");
background-size: cover;
}

.slide-3{
background-image: url("../images/banners/earth_photo_3.jpg");
background-size: cover;
}


/* PARTNERS SECTION */

#partners-section {
    background-color: var(--color-light-blue); /* Set the background color of the section */
    padding: 0 15%; /* Add padding to the section */
    padding-top: var(--section-padding-top);
    padding-bottom: var(--section-padding-bottom);
    position: relative; /* Add relative positioning */
    z-index: 2; /* Set higher z-index to ensure it's above the video */
    text-align: center; /* Center align text within the section */
    color: var(--color-dark-blue); /* Set text color to black */
}

#partners-title {
    padding-bottom: 3.0rem;
}

#partners-content {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    flex-wrap: wrap; /* Allow team members to wrap to the next row */
}

#partners-container {
    margin: calc(10px + 5%); /* Add spacing around each team member */
}
#partners-img {
    height: 40px;
    width: 200px;
    object-fit: contain;
}


/*--------------------------------
# FOOTER
--------------------------------*/
/* Footer styles */
#footer-contact {
    background-color: var(--color-dark-blue); /* Set the background color for the footer */
    color: var(--color-light-blue); /* Text color for the footer */
    align-items: center;
    padding: 0 10px; /* Add padding to the footer */
    padding-top: var(--section-padding-top);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #232535;
}

#footer-title {
    margin-bottom: 50px;
}

/* LinkedIn icon */
.linkedin-icon {
    font-size: 24px;
    margin-right: 10px;
    color: var(--color-medium-blue); /* LinkedIn brand color */
}

#idLinkedInIcon{
    background-color: var(--color-dark-blue);
    border-radius:6px;
    color:var(--color-light-blue);
    font:bold 35px;
    height:40px;
    margin-top:20px;
    margin-bottom:20px;
    width:40px;
    transition: color 0.3s;}

#idLinkedInIcon:hover{
    /*background-color: var(--color-light-blue);*/
    color: var(--color-light-dark-blue);}



#contact-form{
    margin: 50px;
}

#message{
    width: 100%;
    padding: 10px;
}

        /* CSS for styling the contact form */
.form-group {
    margin-bottom: 20px; /* Add vertical spacing between form groups */
}

label {
    display: block; /* Make labels take full width */
}

#name-index, #email-index, #message-index {
    width: 100%; /* Make input fields and textarea take full width */
    padding: 10px; /* Add padding for better appearance */
    border: 1px solid var(--color-light-blue); /* Add a border for input fields */
    border-radius: 4px; /* Add rounded corners to input fields */
}

.button {
    display: inline-block;
    width: auto; /* Reset width for submit button */
    padding: 10px 20px; /* Add padding to submit button */
    background-color: var(--general-color); /* Customize button background color */
    color: var(--color-light-blue); /* Customize button text color */
    font-weight: 500;
    border: none; /* Remove button border */
    border-radius: 4px; /* Add rounded corners to button */
    cursor: pointer; /* Add cursor pointer on hover */
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    text-decoration: none;
    font: inherit;
}

.button:hover{
    background-color: var(--hover-color);
    /*transform: scale(1.05);*/ /* Limit the width of the image */
}
  
#footer {
    background-color: var(--color-dark-blue); /* Set the background color for the footer */
    color: var(--color-light-blue); /* Text color for the footer */
    align-items: center;
    padding: 0 10px; /* Add padding to the footer */
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
}

#footer-logo-left {
    width: 60px;
}