@font-face {
    font-family: 'Arthemis';
    src: url('../fonts/Arthemis.otf') format('opentype'),
         url('../fonts/Arthemis.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/Quicksand-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

.top-right-fixed {
    position: fixed; /* Keeps the image fixed during scrolling */
    top: 0; /* Aligns the image at the top of the viewport */
    right: 0; /* Aligns the image at the right of the viewport */
    width: 150px; /* Set a specific width if necessary */
    height: auto; /* Maintain aspect ratio */
    z-index: 1000; /* Ensures the image stays on top of other content (adjust as necessary) */
    transform: rotate(270deg);
}

body, html {
    margin: 0;
    padding: 0;
    font-family: 'Quicksand', Arial, sans-serif;
    font-size: 16px;
    color: #000;
    background: #f8f8f8;
    min-height: 100vh; /* Ensures the body is at least the height of the viewport */
    background-image: url('../images/Wave3_Resized.png'); /* Adjust path as necessary */
    background-position: center calc(100% + 150px); /* Adjusts the position by shifting it down 50px */
    background-repeat: no-repeat;
    background-size: 100% 100%; /* Automatically adjust width to maintain aspect ratio and set height to 200px */
    background-attachment: fixed; /* Optional, if you want it fixed during scroll */
}

@media (max-width: 767px) {
    body, html {
        background: none;
    }
}

body.home{
    color:rgba(0, 172, 224, 1);
}

body.home h1, body.home h2, body.home h3, body.home h4, body.home h5, body.home h6 {
    color: #E94E77;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Arthemis', sans-serif;
    color:rgba(233, 78, 119, 0.8);
}
h1 {
    font-size: 3.5em; /* 40px if 1em = 16px */
}

h2 {
    font-size: 2.75em; /* 28px */
}

h3 {
    font-size: 2.0em; /* 24px */
}

h4 {
    font-size: 1.33em; /* 21px */
}

h5 {
    font-size: 1em; /* 16px */
}

h6 {
    font-size: 0.83em; /* 13px */
}

a.cta {
    padding: 10px 20px;
    background-color: #E94E77; /* Vibrant red from the image */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    margin: 10px 0px;
}

a.cta:hover {
    background-color: #cb4056; 
}


.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

body.home header, body.home footer {
    background-color: transparent;
    color: #fff;
}
header, footer {
    background-color: transparent;
    color: #000;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-left, .nav-right {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
}

.nav-left li, .nav-right li {
    padding: 0 15px;
}

.logo {
    flex-grow: 1;
    text-align: center;
}

.logo img {
    height: 150px; /* Adjust height as needed */
}

header nav ul li a {
    display: block;
    color: #034074;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
body.home header nav ul li a {
    color: #000;
}

    header nav ul li a.current, header nav ul li a:hover {
	    color: #E94E77;
        text-decoration: underline;
    }

.two-column {
    display: flex;
    flex-wrap: wrap;
    padding: 20px 0;
}

.two-column .column {
    flex: 1 1 50%; /* Each column takes up 50% of the container */
    box-sizing: border-box;
    padding: 10px;
}

.team-section {
    text-align: center;
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.team-header {
    max-width: 960px;
}

.three-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 960px;
}

.three-column .column {
    flex: 1 1 33.33%; /* Each column takes up about one-third */
    box-sizing: border-box;
    padding: 10px;
    min-width: 200px; /* Ensures that the layout does not get too squeezed on smaller screens */
}

.three-column .column img {
    width: 100%;
    height: auto;
}

.two-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 960px;
}

.two-column .column {
    flex: 1 1 50.00%; /* Each column takes up about one-third */
    box-sizing: border-box;
    padding: 10px;
    min-width: 200px; /* Ensures that the layout does not get too squeezed on smaller screens */
}

.two-column .column img {
    width: 100%;
    height: auto;
}

.image-frame {
    background-image: url('../images/Frame1_Resized.png'); /* Frame image */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 20px; /* Adjust padding to fit the frame */
    display: inline-block;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.image-frame img {
    display: block;
    width: 100%; /* Adjust based on the padding and actual image size */
    height: auto;
    position: relative;
    z-index: 1;
}



.bg-image {
    background-size: cover;
    background-position: center;
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {

    nav {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-left, .nav-right {
        width: 100%;
        text-align: center;
        margin: 10px 0; /* Add some spacing */
    }

    .nav-left {
        order: -1; /* Top order on mobile */
    }

    .logo {
        order: 0; /* Middle order on mobile */
        margin: 10px 0; /* Add some spacing */
    }

    .nav-right {
        order: 1; /* Bottom order on mobile */
    }

    /* Center-align the list items */
    .nav-left li, .nav-right li {
        display: inline-block;
        margin: 0 10px; /* Adjust spacing between items */
    }
    
}



footer {
    text-align: center;
    padding: 10px 0;
    margin-top: 400px;
}

@media (max-width: 768px) {
	.container {
		padding-left: 0px;
	}
	footer {
		background-color: transparent;
	    color:rgba(0, 172, 224, 1);
	    margin-top: 0px;
	}
	body.home footer {
	    background-color: transparent;
	    color:rgba(0, 172, 224, 1);
	}
	footer .container {
		text-align: center;
	}
}


.footer-wave {
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size: cover; 
    height: 150px; 
}

/* Product Grid Layout */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Adjust spacing between products */
    justify-content: center;
}

.product {
    flex: 1 1 calc(50% - 20px); /* 2 columns with spacing */
    max-width: calc(50% - 20px);
    box-sizing: border-box;
    text-align: center;
}
	.product a {
		text-decoration:none;
	}

.eael-product-wrap img {
    max-width: 100%; /* Ensure images do not exceed the container's width */
    height: auto; /* Maintain aspect ratio */
    max-height: 300px; /* Set a maximum height for the images */
    object-fit: contain; /* Ensure the entire image fits within the given space */
}

/* Ensure responsive behavior on mobile */
@media (max-width: 768px) {
    .product {
        flex: 1 1 100%; /* Single column on mobile */
        max-width: 100%;
    }
}