/* General body and typography */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
}

h1, h2, h3 {
    color: #002c5c; /* Dark blue */
    font-weight: 700;
}

h1 {
    font-size: 2.5em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

a {
    color: #20c997; /* Teal */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #17a2b8; /* Cyan */
}

/* Navbar component styles */
.navbar {
 background-color: #002c5c;
 color: #ffffff;
 padding: 1rem 0;
 position: sticky;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 max-width: 1200px;
 margin: 0 auto;
 padding: 0 1.5rem;
}

.navbar .logo {
 font-size: 1.8rem;
 font-weight: 700;
 color: #20c997;
 text-decoration: none;
 flex-grow: 1; /* Allow logo to take up space */
 text-align: left;
}

.navbar .nav-links {
 display: flex;
 gap: 1.5rem;
}

.navbar .nav-links a {
 color: #ffffff;
 text-decoration: none;
 font-weight: 500;
 transition: color 0.3s ease;
}

.navbar .nav-links a:hover {
 color: #20c997;
}

/* Hamburger menu styles */
.hamburger-menu {
 display: none; /* Hidden by default on larger screens */
 flex-direction: column;
 justify-content: space-around;
 width: 30px;
 height: 25px;
 background: transparent;
 border: none;
 cursor: pointer;
 padding: 0;
 z-index: 1001; /* Ensure it's above other elements */
}

/* Research Card Styles */
.research-card-wrapper {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 250px; /* Fixed height for cards */
}

.research-card-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid #20c997; /* Teal border on hover */
}

.research-card-content {
    padding: 24px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.research-card-icon {
    color: #20c997; /* Teal color for icons */
    margin-bottom: 16px;
    width: 40px;
    height: 40px;
}

.research-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #002c5c; /* Dark blue for titles */
    margin-bottom: 8px;
}

.research-card-description {
    font-size: 1rem;
    color: #525252; /* Gray for descriptions */
    line-height: 1.5;
}

/* Add any existing or additional styles below this line */

.hamburger-menu span {
 display: block;
 width: 100%;
 height: 3px;
 background-color: #ffffff;
 border-radius: 3px;
 transition: all 0.3s linear;
 transform-origin: 1px;
}

/* Animation for hamburger icon */
.hamburger-menu.active span:nth-child(1) {
 transform: rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
 opacity: 0;
 transform: translateX(20px);
}

.hamburger-menu.active span:nth-child(3) {
 transform: rotate(-45deg);
}

/* Mobile-specific styles */
@media (max-width: 768px) {
 .navbar .container {
 justify-content: center; /* Center content on mobile */
 position: relative; /* For absolute positioning of menu */
 }

 .navbar .logo {
 text-align: center; /* Center the logo */
 flex-grow: 0; /* Don't let it grow on mobile */
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 }

 .hamburger-menu {
 display: flex; /* Show hamburger on mobile */
 position: absolute;
 right: 1.5rem; /* Position to the right */
 }

 .navbar .nav-links {
 display: none; /* Hide navigation links by default */
 flex-direction: column;
 position: absolute;
 top: 100%; /* Below the navbar */
 left: 0;
 width: 100%;
 background-color: #002c5c; /* Same as navbar background */
 padding: 1rem 0;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
 z-index: 999;
 text-align: center;
 transform: translateY(-100%); /* Start off-screen */
 transition: transform 0.3s ease-in-out;
 }

 .navbar .nav-links.menu-open {
 display: flex; /* Show when menu-open class is active */
 transform: translateY(0); /* Slide in */
 }

 .navbar .nav-links a {
 padding: 0.8rem 1.5rem;
 border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 .navbar .nav-links a:last-child {
 border-bottom: none;
 }
}