@import url(https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap);
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Bold.woff2') format('woff2'),
       url('../fonts/Aeonik-Bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

body {
  background-color: #052D38; /* Match your preloader background */
}

.front {margin-left: 41px; } 
.text_colour{color: black; }
.text_colour2{color: black; }
.text_colour3{color: white; }
.inner-navigation{background-color: transparent; }
.pic_padding {
    padding-right: 10px; 
    padding-left: 10px; 
    padding-top: 10px;
    padding-bottom: 0px;
    }

/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
    padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
    top: 0;
    bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
    padding: 10%;
}

.parallax2{
    z-index: +1000;
    position:relative;
}
body {
font-family: 'Quicksand', sans-serif !important;
}

header.header {
    background-color: #052D38 !important;
    padding-top: 10px;
    padding-bottom: 10px;
    min-height:120px; /* Adjust this value as needed */
}

/* --- Makes Header Text Readable --- */
.header .inner-nav .menu-item-span {
    color: white;
}

header.header .inner-brand img {
    width: 80px; /* Adjust this value to make it bigger or smaller */
    height: auto !important;
    max-width: none !important;
    margin-left: 30px; /* <-- Add this line */
}

h1, h2, h3, strong {
  font-family: 'Aeonik', sans-serif;
  font-weight: bold; /* or 700 */
}

header.header .inner-nav .menu-item-span {
    font-family: 'Aeonik', sans-serif; /* Use your new font */
    font-size: 16px;                  /* Adjust this value as needed */
    font-weight: 700;                 /* We'll use the bold version */
    text-transform: none; /* Displays text as written in HTML */
    letter-spacing: 1px;              /* Adds a little space between letters */
    color:white;
    transition: color 0.3s ease; /* <-- ADD THIS LINE */
}

header.header .inner-nav a:hover .menu-item-span {
    color: #49929E; /* A slightly faded white for a subtle effect */
}

/* --- Header Layout & Vertical Alignment --- */
header.header .container-fluid {
    display: flex !important;
    align-items: flex-end !important;  /* This is the current setting */
    justify-content: space-between;
    height: 100%;
    min-height: inherit;
    padding-bottom: 16px;
}

/* --- Reset Template's Old Vertical Alignment --- */
header.header .inner-nav > ul > li > a > .menu-item-span {
    transform: none;      /* Remove the transform */
    position: static;     /* Remove the relative positioning */
    top: auto;            /* Remove the 'top' offset */
    display: inline;      /* Revert from 'block' to default 'inline' */
}

.inner-navigation {
    position: absolute;
    height: 25%;
    float: left;
    right: 15px;
    left: 15px;
    text-align: center;
}

header.header .inner-nav li a::after {
    display: none !important;
}

/* --- Sign In Link Color --- */
.login-link a .menu-item-span {
    color: #FFBC00 !important;
}

.login-link {
    margin-left: auto; /* This auto margin consumes all available space, pushing it right */
}

header.header .container-fluid {
    display: flex;
    justify-content: space-between; /* Pushes left, center, and right apart */
    align-items: center;            /* Vertically centers everything */
}

/* 1. Removes the vertical line separator */
.extra-nav > ul > li:first-child {
    border-left: none !important;
}

/* This adds space to the right of the link. */
.extra-nav .login-link {
    margin-right: 30px; /* Adjust this value for more/less space */
}

/* This styles the font for the "Sign In" link. */
.extra-nav .login-link a .menu-item-span {
    font-family: 'Aeonik', sans-serif; /* Use your new font */
    font-size: 16px;                  /* Adjust this value as needed */
    font-weight: 700;  
    position: relative; /* Add this */
    top: 70px;           /* Add this and adjust the value */

}

/* 1. Make the container AND the list fill the header's height */
.extra-nav, .extra-nav ul {
    height: 100%;
}

/* 2. Vertically center the link within the now-tall list */
.extra-nav ul {
    display: flex;
    align-items: center;
}

/*
====================================================
--- NEW HERO SECTION STYLES ---
====================================================
*/



/* The container for the text and button */
.hero-content {
      max-width: 600px; /* Prevents text from getting too wide */
}

/* The main "Invetics" headline */
.hero-headline {
    font-family: 'Aeonik', sans-serif;
    font-size: 8rem; /* Large font size */
    font-weight: 700;
    color: #FFBC00; /* Gold/yellow color from your screenshot */
    margin: 0;
}

/* The subheadline text */
.hero-subheadline {
    font-family: Aeonik, sans-serif;
    font-size: 3rem;
    color: #ffffff;
    line-height: 1.2; /* Tightens the space between lines of text */
    margin-top: 1.0; /* Adjust this to control space below "Invetics" */
    padding: 0 7px;
    /*margin: 0.5rem 0 1.5rem 0; /* Adds spacing around the text */
}

/* The "Learn More" button */
.hero-button {
    background-color: #FFBC00; /* Gold/yellow background */
    color: #052D38;            /* Dark text color */
    border: none;
    border-radius: 0px;       /* Slightly rounded corners */
    padding: 20px 24px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    margin-top: 20px;     /* Moves button down */
    margin-left: 8px;    /* Moves button to the right */
}

.hero-button:hover {
    background-color: #f2b200; /* Slightly darker gold on hover */
    color: #052D38;
}

.hero-button2 {
    background-color: #FFBC00; /* Gold/yellow background */
    color: #052D38;            /* Dark text color */
    border: none;
    border-radius: 0px;       /* Slightly rounded corners */
    padding: 20px 24px;
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s ease;
    margin-top: 20px;     /* Moves button down */
    margin-left: 2px;    /* Moves button to the right */
}

.hero-button2:hover {
    background-color: #f2b200; /* Slightly darker gold on hover */
    color: #052D38;
}

.hero-section {
    display: flex;
    align-items: center;
    min-height: 100vh;
    padding: 0 37px;
    color: white;

    /* This is the line to change */
    background-image: url('../assets/images/waves.jpg');
    
    
    background-size: cover;
    background-position: center;
}

.login-block,
.login-block input,
.login-block button {
    font-family: 'Aeonik', sans-serif !important;
    /* This font-weight is required because your @font-face rule specifically defines the 'bold' version of Aeonik */
    font-weight: bold !important; 
}

.login-block::placeholder {
    font-family: 'Aeonik', sans-serif !important;
    font-weight: bold !important;
    opacity: 1; /* Overrides Firefox's default lower opacity for placeholders */
}

.login-block ::-webkit-input-placeholder {
    font-family: 'Aeonik', sans-serif !important;
    font-weight: bold !important;
}

.login-block :-ms-input-placeholder {
    font-family: 'Aeonik', sans-serif !important;
    font-weight: bold !important;
}

.login-light,
.login-light input,
.login-light button {
    font-family: 'Quicksand', sans-serif !important;
    /* This font-weight is required because your @font-face rule specifically defines the 'bold' version of Aeonik */

}


/*
====================================================
--- NEW FEATURES SECTION STYLES (Simple Bootstrap) ---
====================================================
*/
.features-wrapper {
    margin-top: 5rem;
}

.feature-row {
    margin-bottom: 6rem;
}

.feature-number {
    font-family: 'Aeonik', sans-serif;
    font-weight: 700;
    font-size: 10rem; /* Adjusted size for column layout */
    color: #49929E;;
    line-height: 1;
}

.feature-title {
    font-family: 'Aeonik', sans-serif;
    font-size: 2.5rem; /* Adjusted size for column layout */
    font-weight: 500;
    color: #49929E;
    line-height: 1.25;
}

.feature-description {
    font-family: 'Aeonik', sans-serif;
    font-size: 1.5rem; /* Adjusted size for column layout */
    font-weight: 500;
    color: #49929E;
    line-height: 1.25;
}

.feature-row--reverse .feature-title {
    text-align: left; /* Ensure text is left-aligned in reversed row */
}

.feature-description {
    font-family: 'Aeonik', sans-serif;
    font-size: 1.2rem; /* Adjusted size for column layout */
    font-weight: 500;
    color: #49929E;
    line-height: 1.25;
    /*
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
    */
}



.content-wrapper {
  padding-left: 42px !important;
  padding-right: 42px !important;
}

.feature-image {
  border: 2px solid #49929e;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.feature-block {
  padding-top: 2rem;
  padding-bottom: 4rem;
  border-bottom: 2px solid #49929e;
}

/* This removes the border from the very last block so there isn't an extra line at the end */
.feature-block:last-child {
  border-bottom: none;
}

/* Sets the background color for the entire footer */
.footer {
  background-color: #000000; /* Your dark brand color */
}

/* Changes the color of the text and links inside the footer to be readable */
.footer h6, .footer p, .footer a, .footer font {
  color: #adb5bd; /* A light gray for text */
}

/* Makes links brighter when you hover over them */
.footer a:hover {
  color: #ffffff; /* White on hover */
}

.faq-links li a {
    font-family: 'Aeonik', sans-serif;
    font-size: 16px;   
}



/* --- New About Section Styles --- */

.about-section {
  background-color: #052D38; /* The dark teal background */
  padding: 6rem 0; /* Adds vertical space to the top and bottom */
  color: #ced4da;  /* Default text color (light gray) */
}

.about-section .about-headline {
  font-family: 'Aeonik', sans-serif;
  font-size: 3.5rem;
  font-weight: bold;
  color: #FFBC00; /* Gold color for the main headline */
  margin-bottom: 1.5rem;
}

.about-section .about-subheadline {
  font-family: 'Aeonik', sans-serif;
  font-size: 1.75rem;
  font-weight: 500;
  color: #49929e; /* White for the subheadline */
  margin-bottom: 2.5rem;
  line-height: 1.4;
}

.about-section p {
  font-family: 'Aeonik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
}



/* --- Icon Section Styles --- */

.icon-section {
  background-color: #49929e; /* Dark Teal Background */
  padding: 5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top border */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Subtle bottom border */
}

.icon-section-headline {
  font-family: 'Aeonik', sans-serif;
  color: #ffffff;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.5;
  text-align: left; 
}

.icon-section .icon-box span {
  font-size: 10rem; /* Icon size */
  color: #ffffff;
  margin-bottom: 2rem;
  display: inline-block;
}

.icon-section .icon-box h6 {
  font-family: 'Aeonik', sans-serif;
  color: #ffffff;
  font-weight: 500;
  font-size: 1.2rem;
  text-transform: none; /* In case other h6 styles have this */
}

/* --- Simple Headline Section Styles --- */

.headline-section {
  background-color: #052d38;
  padding: 6rem 0;
}

.headline-section h1 {
  font-family: 'Aeonik', sans-serif;
  font-size: 4rem;
  font-weight: bold;
  color: #FFBC00; /* Gold color */
}


/* Style the new headline */
.features-main-headline {
  font-family: 'Aeonik', sans-serif;
  font-size: 3.5rem;
  font-weight: bold;
  color: #FFBC00; /* Gold color */
  margin-bottom: 4rem; /* Adds space between the headline and the first feature block */
}

.headline-background {
 background-color: #052D38; /* Dark teal background */
 padding: 3rem 0; /* Adjust vertical padding as needed */
}