.classic-blue-background {
    background-color: #0F4C81; /* Pantone Classic Blue */
    color: "#F9F9F9";
    padding: 20px;
}


/* Larger title */
.classic-blue-background span {
    font-size: 40px;
    color: white;
    font-family: Arial, sans-serif;
}

/* Increase font size slightly for the rest of the content */
body {
    font-size: 16px; /* Default for the body text */
}

.column {
    font-size: 16px; /* For text in columns */
}

/* Larger headings */
.about font[size="4"] {
    font-size: 24px; /* Larger font for "About" heading */
}

p {
    font-size: 16px; /* Slightly larger for all paragraphs */
     color:	#4B4F54; /* Pantone Phantom */
}

    img {
    max-width: 100%; /* Ensures the image doesn’t go beyond the container */
    height: auto; /* Keeps the height proportional to the width */
}

/* Link Styling for Pantone Classic Blue and Underlined */
a {
    text-decoration: underline; /* Underline the text */
    color: #0F4C81; /* Pantone Classic Blue */
}

    /* Standard body styling */
    body {
        background-color: #ffffff;
        color: #0F4C81;
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
    }
/* CSS styles for mobile devices */
@media screen and (max-width: 600px) {
		    .column {
		        width: 100% !important;
		        display: block !important;
			text-align: center; /* Center content */
		    }
		    img {
		        max-width: 80%; /* Prevent overflow */
		        height: auto;
		    }
		}
			.about {
				margin-top: 40px; /* Adjust the value based on your preference */
			}
		
/* Navbar styles */
.navbar {
    background-color: #ffffff;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
}

/* Menu container */
.menu {
    display: flex;
    gap: 15px;
}

/* Style for navbar links */
.navbar a {
    color: #0F4C81;
    text-decoration: none;
    font-size: 17px;
    padding: 14px 16px;
}

/* Hamburger icon */
.navbar .icon {
    display: none;
    font-size: 30px;
    cursor: pointer;
}

/* Active section */   
.nav-link.active {
    font-weight: bold;
    border-bottom: 2px solid #0F4C81; /* Optional visual cue */
}

/* Responsive design */
@media screen and (max-width: 600px) {
    .menu {
        display: none; /* Hide menu items by default */
        flex-direction: column;
        width: 100%;
        text-align: center;
    }

    .navbar.responsive .menu {
        display: flex; /* Show menu items when active */
    }

    .navbar .icon {
        display: block;
        background: none;
        border: none;
    }
}

    /* Mobile view styling */
    @media screen and (max-width: 600px) {
        .navbar a.icon {
            display: block;
        }

        /* Initially hide all navbar links in mobile view */
        .navbar a {
            display: none;
        }

        /* Display the links when navbar is in responsive mode */
        .navbar.responsive a {
            display: block;
            width: 100%;
        }

        /* Display menu in mobile view */
       /* Display menu in mobile view */
        .navbar.responsive .menu a {
            display: block;
            text-align: left; /* Align text to the left */
        }
    }

/* Title Styling */
.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

.title-content {
    display: inline-block;
    text-align: center;
    width: auto; /* Prevent stretching */
}

.title-content hr {
    border: 2px solid #0F4C81;
    width: 100%;
    margin: 5px auto 30px;
}

/* Mobile Adjustment (Width <= 768px) */
@media screen and (max-width: 768px) {
    .title-content hr {
        width: 80%; /* Reduced width for mobile */
    }
}

/* Flexbox Layout */
.container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 900px;
    margin: auto;
    flex-wrap: wrap;
}

/* Photo Section */
.photo-container {
    flex: 1;
    max-width: 250px;
    text-align: center;
}

.photo-container img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* About Section */
.about-container {
    flex: 2;
    max-width: 600px;
}

h2 {
    color: #0F4C81;
    font-weight: bold;
}

/* Research Section */
.research-container {
    flex: 2;
    max-width: 1200px;
}


/* 📱 Mobile View: Stack Photo & Text */
@media screen and (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack elements */
        align-items: center; /* Center the content */
        text-align: center;
    }

    .photo-container, 
    .about-container, 
    .research-container {
        max-width: 100%; /* Full width */
    }

    .about-container {
        padding: 0 20px; /* Add some spacing */
    }

    .research-container {
        padding: 0 20px; /* Add some spacing */
    }
}