@charset "ISO-8859-1";

.phys2ai-mode {
	background-image: url('../images/core/background-phys2ai-mobile.png');
	background-attachment: scroll;
	background-repeat: repeat-y;
	background-size: 100% auto;
	background-size: 640px 2580px;
	background-position: top left;
}

/* General Body Adjustments */
body {
	font-family: 'Roboto', sans-serif; /* Updated to Roboto with fallback */
	margin: 0;
	padding: 0;
	background-color: #f9f9f9;
}

/* Header Styling */
.header {
	display: flex;
	flex-direction: column; /* Stack the logo and nav vertically */
	align-items: center;
	padding: 10px 0;
}

/* Preserve aspect ratio of the logo */
.header img {
	width: auto; /* Automatically adjusts width based on height */
	height: 140px; /* Set a maximum height for the logo */
	max-width: 100%; /* Prevent it from exceeding the screen width */
	object-fit: contain; /* Ensure aspect ratio is maintained */
}

/* Adjust navigation for small screens */
.header nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center; /* Ensures vertical centering */
	text-align: center;
	gap: 10px;
	width: 90%;
}

/* Ensure links are evenly distributed in rows */
.header nav a {
	flex: 1 1 calc(33.333% - 10px);
	/* Makes sure they form evenly spaced columns */
	text-align: center;
	padding: 8px 0;
	font-size: 0.9em;
}

/* Expertise Banners */
.expertise-banner {
	display: flex;
	flex-direction: column; /* Stack items vertically */
	justify-content: center; /* Center items in the last row */
	gap: 20px;
	margin: 20px auto;
	width: 90%;
}

/* Services Page */
.services-banner {
	display: flex;
	flex-direction: column; /* Stack service boxes vertically */
	gap: 15px;
	margin: 20px auto;
	width: 90%;
}

.service-box {
	flex: none; /* No flex resizing */
	text-align: center;
	padding: 15px;
	border-radius: 10px;
	background: #f8f8f8;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

.service-box h2 {
	font-size: 1.2em;
	margin-bottom: 8px;
}

.service-box p {
	font-size: 1em;
}

/* Ensure expertise categories take full width on mobile */
.expertise-category {
	flex: none; /* Disable flex behavior that was adjusting width */
	width: 90%; /* Ensures full-width but with slight margins */
	max-width: 100%; /* Prevents shrinking */
	margin: 0 auto; /* Centers each box */
	transition: transform 0.3s ease-in-out;
	background: #f8f8f8;
	text-align: center;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* Fix image sizing for better proportions */
.expertise-category img {
	width: 100%; /* Ensure images fill the container */
	height: auto; /* Maintain aspect ratio */
	object-fit: contain; /* Prevents cropping */
	max-height: 300px; /* Adjust based on preference */
}

.expertise-link {
	text-decoration: none; /* Removes underline */
	color: inherit; /* Keeps text color unchanged */
	/* 		display: block; Ensures the entire box is clickable */
	display: flex;
	/* Makes the link behave like a block and work with flexbox */
}

.expertise-link:hover {
	cursor: pointer;
}

.expertise-category:hover {
	transform: scale(1.05); /* Adds a hover effect */
}

/* Mobile-specific clickable indicators */
.main-banner-link {
    position: relative;
    transition: all 0.3s ease;
}

.main-banner-link h1 {
    color: #0066cc; /* Standard hyperlink blue */
    transition: color 0.3s ease;
}

.main-banner-link:active h1 {
    color: #004499; /* Darker blue on tap */
}

.main-banner-link:active {
    transform: scale(0.98);
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.2);
}


.team-container {
	display: flex;
	flex-direction: column; /* Stack vertically */
	text-align: center; /* Center align on mobile */
}

.team-headshot-frame {
	margin: 0 auto 0px auto; /* Center and add space below */
}

.team-headshot {
	width: 100px; /* Smaller width for mobile */
}

.team-text-frame {
	text-align: left; /* Reset text alignment for readability */
}

/* Footer Styling */
.footer {
	font-size: 0.9em;
	text-align: center;
	padding: 10px 0;
}

.responsive-image {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 0 10px;
	/* No horizontal centering needed, just spacing below */
}

.full-width-banner-image {
	width: 100%;
	height: auto;
	display: block;
	margin: 0 0 10px;
	/* Spans full width while maintaining aspect ratio */
}

.equation {
    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;
}

.heading-with-logo {
    display: flex;
    flex-direction: column;
    align-items: left;
}
.comsol-logo {
    width: 202px; /* Adjust size as needed for mobile */
    margin-top: 10px;
}