/* -=-=-=-=-=-=-=-= FONTS =-=-=-=-=-=-=-=- */

/* EXAMPLE */
@font-face {
	font-family: "Bahnschrift-SC";
	src: url(https://gitlab.igem.org/2024/eth-zurich/-/blob/main/static/fonts/BAHNSCHRIFT.TTF) format('truetype');
	font-weight: normal;
	font-style: normal;
	font-stretch: semi-condensed;
}

@font-face {
	font-family: "Bahnschrift";
	src: url(https://gitlab.igem.org/2024/eth-zurich/-/blob/main/static/fonts/BAHNSCHRIFT.TTF) format('truetype');
	font-weight: medium;
	font-style: normal;
}

@font-face {
	font-family: "Montserrat";
	src: url(https://static.igem.wiki/teams/5356/general/montserrat-regular.woff) format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Montserrat";
	src: url(https://static.igem.wiki/teams/5356/general/montserrat-bold.woff) format("woff");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Robofan";
	src: url(https://static.igem.wiki/teams/5356/general/robofan.woff2) format("woff2");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Falling Sky";
	src: url(https://static.igem.wiki/teams/5356/general/fallingsky-jkwk.woff2) format("woff2");
	font-weight: 200;
	font-style: normal;
}

@font-face {
	font-family: "Falling Sky";
	src: url(https://static.igem.wiki/teams/5356/general/fallingskybold-zeml.woff2) format("woff2");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "Falling Sky";
	src: url(https://static.igem.wiki/teams/5356/general/fallingskyboldoblique.woff2) format("woff2");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: "Falling Sky";
	src: url(https://static.igem.wiki/teams/5356/general/fallingskycondensedoblique.woff2) format("woff2");
	font-weight: normal;
	font-style: italic;
}

/* -=-=-=-=-=-= END FONTS =-=-=-=-=-=-=-=- */


/* -=-=-=-=-=-=- COLORS =-=-=-=-=-=-=- */

:root {

	/* red colors */
	--main-red: #ff396c;
	--dark-red: #c12600;

	/* blue colors */
	--main-blue: #464cc5;
	--mid-blue: #34399e;
	--dark-blue: #232677;
	--light-blue: #b2cff9;
	--bg-bluegray: #596891;
	--bg-darkblue: #000028;


	/* green colors */
	--light-green: #3fde5f;
	--dark-green: #00ac38;

	/* yellow colors */
	--light-yellow: rgb(249, 250, 186);
	--mid-light-yellow: rgb(248, 245, 148);
	--mid-yellow: rgb(243, 226, 71);
	--mid-dark-yellow: rgb(231, 198, 49);
	--dark-yellow: rgb(201, 155, 18);

	/* white colors */
	--main-white: #fffffb;
	--mid-white: #e8e8ef;
	--mid-grey: #c3c3ce;


	--components-color: var(--mid-dark-violet);

	/* -=-=-=-=-=-=-=-= SIZES =-=-=-=-=-=-=-=- */

	--small: 0.9vw;
	--mid-small: 1.13vw;
	--mid: 1.3vw;
	--mid-big: 1.45vw;
	--big: 1.7vw;

}

/* -=-=-= END COLORS, SIZES =-=-=-=-=- */


html,
body {
	max-width: 100vw;
	overflow-x: hidden;
}

body {
	/* padding: 2.5vw; */
	background-color: var(--main-white);
	color: var(--bg-darkblue);
	font-family: "Montserrat";
	/*"";*/
	font-size: var(--mid-small);
}

h2,
h3,
h4,
h5,
h6,
.lead {
	font-family: "Falling Sky";
}

p {
	line-height: 1.9;
}

/* SCROLL */
.lenis.lenis-smooth {
	scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

.lenis.lenis-scrolling iframe {
	pointer-events: none;
}

.reveal {
	font-kerning: none;
	font-weight: 300;
	color: var(--main-white)
}

/* PAGES */
.container-darkblue {
	padding: 24px;
	background-color: var(--bg-darkblue);
	color: var(--main-white);
	border-width: 18px;
	border-color: var(--bg-bluegray);
	border-radius: 36px;
	font-weight: 300;
}

.container-blue {
	padding: 24px;
	background-color: var(--main-blue);
	color: var(--main-white);
	border-width: 18px;
	border-color: var(--light-blue);
	border-radius: 36px;
	font-weight: 300;
}

/* ALIGN */
.left-aligned {
	margin-left: auto;
}

/* BACKGROUND */
.bg-dark {
	background-color: var(--bg-darkblue) !important;
}

.bg-hero {
	background-color: var(--bg-darkblue);
	padding-right: 24px;
	padding-left: 24px;
	border-radius: 36px;
	border-width: 18px;
	border-color: var(--main-blue);
	align-items: center;
	justify-content: center;
}


.bg-header {

	min-height: 800px;
	background-image: url('https://static.igem.wiki/teams/5356/general/dotbg-mixblue-header-darker.svg');
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-repeat: repeat-x;
	font-family: "Robofan";
}

.bg-lightblue {
	background-image: url('https://static.igem.wiki/teams/5356/general/vhm-1725094686.svg');
	width: 100vw;
	/* Full width of the viewport */
	padding: 0;
	/* Removes any internal padding */
	margin: 0;
	/* Optional: ensures no margin */
	background-size: cover;
	background-repeat: repeat-x;
}

.bg-green {
	background-color: var(--light-blue);
	background-image: url('https://static.igem.wiki/teams/5356/general/vhm-1725101586.svg');
	padding: 0px;
	background-size: cover;
	background-repeat: repeat-x;
}

.bg-darkblue-conclude {
	background-color: var(--dark-green);
	color: var(--main-white);
	background-image: url('https://static.igem.wiki/teams/5356/general/vhm-1725103070.svg');
	padding: 0px;
	background-size: cover;
	background-repeat: repeat-x;
}

/* TEXT */
.justify-text {
	text-align: justify;
	text-justify: inter-word;
}

/* FIGURE */
figure {
	display: block;
	max-width: 60%;
	align-items: center;
	align-content: center;
}

figure img {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
	border-radius: 18px;
	border-width: 12px;
	border-color: var(--bg-bluegray);
	align-items: center;
	align-content: center;
	padding: 12px;

}

/* SLIDER */
.sponsor-feature {
	background-color: var(--main-white);
	padding: 20px;
	margin: 5px 0;
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-ms-transition: all 0.5s;
	-o-transition: all 0.5s;
	min-height: 150px !important;
}

.sponsor-feature:hover {
	z-index: 100;
	box-shadow: 1px 1px 15px var(--mid-grey), -1px -1px 15px #ffffff;
}

.sponsor-feature img {
	width: 100%;
}

#id-sponsors .carousel {
	margin-bottom: 10px;
}

#id-sponsors .item {
	padding-bottom: 10px;
}

/* FROSTED GLASS */
.frosted-navbar {
	display: flex;
	position: absolute;
	align-items: center;
	justify-content: center;
	position: fixed;
	/*max-width: 50vw;*/
	width: 100%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	background-color: rgba(23, 24, 37, .75) !important;
	box-shadow: inset 0 0 0 1px hsla(0, 0%, 100%, .1), 0 2px 8px rgba(0, 0, 0, .3);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	/*border-radius: 50px;*/
	/*margin: 20px;*/
	padding: auto auto;
	/* top and bottom | left and right */
}

.bibliography {
	font-size: 1rem;
	font-family: 'Montserrat', sans-serif;
	margin: 0 20px;
}

.bibliography a {
	color: var(--main-white);
}

.frosted-navbar .container-fluid {
	padding: 0 15px;
}

.frosted-navbar .navbar-toggler {
	order: 2;
	margin-left: auto;
}

.frosted-navbar .navbar-nav {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	pointer-events: all;
	list-style: none;
}

.frosted-navbar .nav-item {
	margin: 0;
	position: relative;
}

.frosted-navbar .nav-link {
	display: inline-block;
	color: rgba(255, 255, 255, 0.5) !important;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-ms-border-radius: 20px;
	-o-border-radius: 20px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	padding: 6px 0;
	margin: -4px 0;
}

.frosted-navbar .nav-link:hover {
	color: #ffffff !important;
	/* Full white on hover */
	background-color: rgba(102, 102, 102, 0.8);
}

.frosted-navbar .dropdown-toggle::after {
	vertical-align: middle;
}

.frosted-navbar .dropdown-menu {
	background-color: rgba(60, 66, 72, 0.9);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-ms-border-radius: 15px;
	-o-border-radius: 15px;
}

.frosted-navbar .dropdown-item {
	color: rgba(255, 255, 255, 0.8);
	background-color: rgba(201, 202, 202, 0.13);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
}

.frosted-navbar .dropdown-item:hover,
.frosted-navbar .dropdown-item:focus {
	background-color: rgba(102, 102, 102, 0.8);
	color: #ffffff;
}

/* CALLOUT */
.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid #b2cff9;
	border-left-width: 0.25rem;
	border-radius: 0.25rem;
}

.bd-callout h4 {
	margin-bottom: 0.25rem;
}

.bd-callout p:last-child {
	margin-bottom: 0;
}

.bd-callout code {
	border-radius: 0.25rem;
}

.bd-callout+.bd-callout {
	margin-top: -0.25rem;
}

.bd-callout-info {
	border-left-color: #5bc0de;
}

.bd-callout-warning {
	border-left-color: #f0ad4e;
}

.bd-callout-danger {
	border-left-color: #d9534f;
}

/* footer */
footer h {
	font-family: "Montserrat";
}

footer a {
	color: white;
	font-weight: bold;
	text-decoration: none;
}

footer a:hover {
	color: white;
	text-decoration: underline;
}

/* MOBLIE @media (max-width: 768px) */
@media (max-width: 990px) {
	.frosted-navbar {
		overscroll-behavior: auto contain;
		max-width: 100vw;
		width: 100vw;
		left: 0;
		margin: 0;
		border: none;
		border-radius: 0;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-moz-transform: translateX(0px);
		-ms-transform: translateX(0px);
		-o-transform: translateX(0px);
	}



	.frosted-navbar .navbar-nav {
		width: 100%;
		padding: 0;
	}

	.frosted-navbar .nav-item {
		width: 100%;
		position: relative;
		padding: 8px 8px;
		margin: 2px 0;
		border-radius: 8px;
		transition: background-color 0.3s ease;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		-ms-border-radius: 8px;
		-o-border-radius: 8px;
	}

	.frosted-navbar .nav-item:hover,
	.frosted-navbar .nav-item:focus {
		background-color: rgba(255, 255, 255, 0.1);
		color: #ffffff !important;
	}

	.frosted-navbar .nav-link {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.frosted-navbar .nav-link:hover {
		background: transparent;
	}

	.frosted-navbar .dropdown-menu {
		position: static;
		width: 100%;
		background: transparent;
		border: none;
		box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
	}

	.frosted-navbar .dropdown-item {
		padding: 10px 20px;
	}

	.frosted-navbar .navbar-nav,
	.frosted-navbar .dropdown-menu {
		max-height: 80vh;
		overflow-y: auto;
		scrollbar-width: thin;
	}

}

@media (max-width: 575px) {
	.sponsor-feature img {
		min-width: 35vw !important;
	}
}

/*protocol details*/
summary {
	display: list-item;
	cursor: pointer;
	justify-content: space-between;
	padding: 10px 15px;
	font-weight: bold;
}

details {
	background-color: var(--main-white);
	border-radius: 5px;
	color: var(--bg-darkblue);
}

.details--main {
	color: var(--main-white);
	background-color: var(--bg-darkblue);
	background: linear-gradient(45deg, var(--bg-darkblue) 0%, var(--main-blue) 100%);
	border-radius: 5px;
	margin: 1em;
	transition: all 0.5s ease;
	position: relative;
}

/* Overlay over .details--main that fades away when hovering .details-main */
.details--main::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	background: linear-gradient(45deg, var(--main-blue) 0%, var(--light-blue) 100%);
	transition: all 0.5s ease;
	pointer-events: none;
	z-index: 1;
	border-radius: 5px;
}

.details--main:hover::after,
.details--main[open]::after {
	opacity: 0;
}

.details--main>summary {
	z-index: 2;
	position: relative;
}

.details--sub {
	padding: 0 1em 0em 1em;
	border-radius: 0;
	transition: all 0.5s ease;
}

.details--sub[open] {
	padding: 0 1em 1em 1em;
}

.details--sub:hover {
	background-color: var(--light-blue);
	/*color: var(--main-blue);*/
}

.detail__inside {
	margin-left: 0.5em;
	background-color: var(--mid-white);
	padding: 1em;
	border-radius: 5px;
}

.details--image {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.button {
	background-color: var(--main-blue);
	color: var(--main-white);
	background-image: linear-gradient(45deg, var(--bg-darkblue) 0%, var(--main-blue) 100%);
	border-radius: 5px;
	margin: 1em 0.2em;
	padding: 0.5em 1em;
	font-weight: bold;
	text-decoration: none;
	cursor: pointer;
	display: block;
}

.button:hover {
	background-image: linear-gradient(45deg, var(--main-blue) 0%, var(--light-blue) 100%);
	transition: background-image 0.5s ease;
	color: var(--main-white);
}

html {
	scroll-behavior: smooth;
}

/* TABLE on protocol*/
.tg {
	border-collapse: collapse;
	border-spacing: 0;
}

.tg td {
	border-style: solid;
	border-width: 1px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	overflow: hidden;
	padding: 10px 5px;
	word-break: normal;
}

.tg th {
	border-style: solid;
	border-width: 1px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	overflow: hidden;
	padding: 10px 5px;
	word-break: normal;
}

.tg .tg-0thz {
	border-color: inherit;
	font-weight: bold;
	text-align: left;
	vertical-align: bottom
}

.tg .tg-za14 {
	border-color: inherit;
	text-align: left;
	vertical-align: bottom
}

.tg .tg-7zrl {
	text-align: left;
	vertical-align: bottom
}

/*PAGE TITLE*/

.page-title {
	margin: auto;
	font-size: max(2.5vw, 2.5rem);
	font-family: "Robofan";
}

.page-subtitle {
	margin: auto;
	font-size: max(1.5vw, 1.5rem);
	font-family: "Robofan";
}

/*image details*/

.image-details {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.titled-image {
	position: relative;
	text-align: center;
	color: white;
	background-image: linear-gradient(45deg, var(--bg-darkblue) 0%, var(--main-blue) 100%);
	border-radius: 5px;
}

.titled-image h2 {
	position: absolute;
	font-size: medium;
	bottom: 0.8em;
	left: 2em;
}

/* LOGO CHANGE ON HOME PAGE
#logo-changing {
     url(https://static.igem.wiki/teams/5356/general/logo-dark.png);
    width: 75vw;
}

@media all and (max-width: 799px) {
    #logo-changing {
        background-image: url(https://static.igem.wiki/teams/5356/general/logo-dark-mobile.png);
        width: 75vw;
    }
}
*/

/* For the fade in effect */
.fade-in {
	opacity: 0;
	transition: opacity 2s ease-out;
}

.fade-in.show {
	opacity: 1;
	transform: translateY(0);
	/* Bring it back to original position */
}

.dont-fade-in {
	opacity: inherit !important;
	transition: opacity 2s ease-out;
}

/* For the zoomable images */
.image-container {
	position: relative;
	overflow: hidden;
	border: 2px solid white;
	border-radius: 12px;
	height: auto; /* Allow the container's height to adjust */
	aspect-ratio: auto; /* Ignore the fixed aspect ratio */
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
}

.image-container img {
	width: 100%; /* Ensure the image spans the full width of the container */
	height: auto; /* Allow the height to scale proportionally */
	transition: transform 0.4s ease, border 0.3s ease-in-out;
	cursor: zoom-in; /* Change cursor to zoom-in */
	position: relative; /* Adjust positioning */
}

.image-container img:hover {
	border: 25px solid transparent;
}

/* Text overlay */
.image-container .hover-text {
	position: absolute;
	bottom: 10px;
	/* Adjust position from bottom */
	right: 15px;
	/* Adjust position from right */
	background-color: rgba(0, 0, 0, 0.6);
	/* Semi-transparent background */
	color: white;
	padding: 5px 10px;
	font-size: 14px;
	border-radius: 5px;
	opacity: 0;
	transition: opacity 0.3s ease;
	/* Smooth fade-in effect */
}

.image-container:hover .hover-text {
	opacity: 1;
	/* Show text on hover */
}

.image-container.zoomed .hover-text {
	opacity: 0;
	/* Hide text when zoomed */
	display: none;
	/* Fully hide text */
}



/* Container for the slideshow and dots */
.slideshow-wrapper {
	position: relative;
}

/* Slideshow container */
.slideshow-container {
	position: relative;
	height: 80vh;
	/* Use viewport height for responsiveness DETERMINED BY MEDIA RN*/
	max-width: 100%;
	/* Ensures the container uses the full width */
	background-color: lightgrey;
	/* Light grey background */
	padding: 20px;
	/* Optional: adds some padding around the slideshow */
	border-radius: 10px;
	/* Optional: adds rounded corners */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	/* Optional: adds a subtle shadow */
	overflow: hidden;
	/* Prevents images from sticking out */
	margin-left: 30px;
	/* Add left margin */
	margin-right: 30px;
	/* Add right margin */
	display: flex;
	/* Enable Flexbox */
	align-items: center;
	/* Center items vertically */
	justify-content: center;
	/* Center items horizontally */
}

@media (max-width: 600px) {
	.slideshow-container {
		height: 40vh;
		/* Smaller height on smaller screens */
	}
}

@media (min-width: 601px) and (max-width: 1200px) {
	.slideshow-container {
		height: 70vh;
		/* Medium height on medium screens */
	}
}

@media (min-width: 1201px) {
	.slideshow-container {
		height: 80vh;
		/* Larger height on larger screens */
	}
}

.mySlides {
	display: none;
	/* Hide slides by default */
}

/* Slideshow images */
.slideshow-container img {
	width: auto;
	/* Allows the width to adjust based on the aspect ratio */
	max-width: 600px;
	/* Sets a maximum width for images */
	height: 100%;
	/* Forces images to fit the container height */
	display: block;
	/* Ensures images are displayed as block elements */
	margin: 0 auto;
	/* Centers the images */
}

.image-title {
	position: relative;
	margin-top: 3%;
	left: 50%;
	transform: translateX(-50%);
	/* Center it */
	background-color: rgba(0, 0, 0, 0.5);
	/* Semi-transparent background */
	color: white;
	/* Text color */
	padding: 3px 7px;
	/* Padding around the text */
	border-radius: 7px;
	/* Rounded corners */
}

.prev,
.next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	color: white;
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	border-radius: 3px;
	transform: translateY(-50%);
}

.prev {
	left: 10px;
	/* Position left button */
}

.next {
	right: 10px;
	/* Position right button */
}

/* Fade animation */
.fade {
	animation: fade 5s;
	/* Adjust duration as needed */
}

@keyframes fade {
	from {
		opacity: 0.4
	}

	to {
		opacity: 1
	}
}

/* Styling for the dots */
.dots {
	text-align: center;
	margin-top: 10px;
}

.dot {
	height: 15px;
	width: 15px;
	margin: 0 2px;
	background-color: #bbb;
	/* Default color for dots */
	border-radius: 50%;
	display: inline-block;
	transition: background-color 0.6s ease;
	/* Smooth transition */
}

.row.row-no-gutter {
	margin: 0
}

.limit-height {
	height: 90vh;
	min-width: auto;
	position: relative;
}

.container-fluid.full-width {
	padding-left: 0;
	padding-right: 0;
	overflow-x: hidden;
}

/* The active dot (highlighted) */
.active {
	background-color: #717171;
	/* Active dot color */
}




/* Container for the title */
.titleTanais-container {
	display: flex;
	justify-content: center;
	/* Centers horizontally */
	align-items: center;
	/* Centers vertically */
	height: 50vh;
	/* Full viewport height */
	text-align: center;
	/* Ensures text is centered within the h1 */
}

/* Styling the title */
.main-titleTanais {
	font-family: 'Montserrat';
	/* Choose a classy font */
	font-size: 2em;
	color: #2c3e50;
	/* Stylish dark color */
	text-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3);
	letter-spacing: 1px;
	/* Add some space between letters */
	/* Adjust to your desired size */
	/*font-weight: bold;*/
	margin: 10;
	/* Removes default margin */
	padding: 0;
	/* Removes padding */
	line-height: 1.5;
	/* Increase line height for better readability */
}


/* Creates a container for the NOT zoomable images */
.unzoomable-image-container {
	position: relative;
	width: auto;
	max-width: 90%;
	/*height: 62vh;*/
	max-height: 80%;
	overflow: hidden;
	border: 1px solid #686868;
	margin: 5px auto 25px auto;
	border-radius: 8px;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

.unzoomable-image-container img {
	width: 100%;
	/* Fill container width */
	height: 100%;
	/* Fill container height */
	object-fit: contain;
	/* Maintain aspect ratio without stretching */
	transition: transform 0.4s ease, border 0.3s ease-in-out;
	cursor: zoom-in;
	/* Change cursor to zoom-in */
	position: absolute;
	/* Allow movement */
	border-radius: 8px;
	border: 5px solid transparent;
}

/* For the main text background and container */
.main-text-background {
	flex: 1;
	/* border-radius: 10px;
	border: 2px solid white;
	border-radius: 5px; */
	padding: 1rem;
}

.carousel-inner {
	border-radius: 10px;
}

.carousel-inner p {
	text-shadow: 0 0 1rem rgb(0, 0, 0);
}

.carousel-item {
	width: 100%;
	height: 100%;
}

.carousel-image {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
}

/* For the left side navigation title bar */
.content-container {
	display: flex;
}

.nav-sidebar {
	width: 10%;
	/* Sidebar width */
	position: relative;
	/* Allows child elements to be positioned relative to this div */
	height: auto;
	padding-top: 5%;
	margin-left: 2%;
}

.nav-titles-wrapper {
	transition: top 0.2s;
	/* Smooth transition */
	width: 100%;
}

.nav-title {
	cursor: pointer;
	margin: 0 3px 15px 0px;
	padding: 4px;
	box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	background-color: rgba(23, 24, 37, .75);
	/* Light background for titles */
	transition: background-color 0.3s;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.5);
	text-align: end;
}

.nav-title:hover {
	background-color: #ced4da;
	/* Darker on hover */
}

.nav-progress-bar {
	height: 5px;
	background: linear-gradient(90deg, #007bff, #00d4ff);
	/* Gradient color */
	width: 0%;
	/* Start with 0 width */
	transition: width 0.3s;
	/* Animate width */
	border-radius: 5px;
	/* Rounded edges */
}

.stickyContents {
	position: fixed;
	top: 9vh;
	/* Adjust this value to place it where you want */
	width: 10%;
}

.section {
	margin-top: 80px;
}

/* Ajust size for mobile devices */
@media (max-width: 800px) {
	p {
		font-size: 1.2rem;
		/* Adjust this size as needed */
	}

	li {
		font-size: 1.1rem;
		/* Adjust this size as needed */
	}

	figcaption {
		font-size: 1.1rem;
		/* Adjust this size as needed */
	}

	.nav-title {
		font-size: 0.9rem;
		/* Adjust this size as needed */
	}
}


h1 {
	font-family: 'Montserrat', serif;
	/* Choose a classy font */
	color: #2c3e50;
	/* Stylish dark color */
	letter-spacing: 1px;
	/* Add some space between letters */
	margin-left: 2.5em;
	/* Adds space to the left of the title */
	margin-right: 2.5em;
	/* Adds space to the right of the title */
	line-height: 1.5;
	/* Adds 1.5x the normal line spacing */
}


/* For team page */

.team-member-photo {
	max-height: 60vh;
	padding: 30px
}

/* For safety page */

h1-safety {
	font-family: 'Montserrat', serif;
	/* Choose a classy font */
	color: #2c3e50;
	/* Stylish dark color */
	letter-spacing: 1px;
	/* Add some space between letters */
	margin-left: 0em;
	/* Adds space to the left of the title */
	margin-right: 2.5em;
	/* Adds space to the right of the title */
	line-height: 1.5;
	/* Adds 1.5x the normal line spacing */
	font-size: 36px;
}

/* for HP page */

h3-hp {
	font-family: 'Montserrat', serif;
	/* Choose a classy font */
	font-size: 1.6em;
	/* Increase font size */
	color: #2c3e50;
	/* Stylish dark color */
	letter-spacing: 1px;
	text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.3);
	/* Add some space between letters */
	margin-top: 10px;
	/* Add margin above */
	margin-bottom: 10px;
	/* Add margin below */
	line-height: 1.5;
	/* Increase line height for better readability */
	text-align: initial;
}

h2-safety {
	font-family: 'Montserrat', serif;
	color: #2c3e50;
	letter-spacing: 1px;
	line-height: 1.5;
	font-size: 1.6em;
	text-shadow: 0px 0.5px 0.5px rgba(0, 0, 0, 0.3);
	border: 1px solid #2c3e50;
	text-align: center;
	display: grid;
	border-radius: 3px;
	box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
	padding: 10px;
	margin-bottom: 25px;
  }


/* For contributions */


h2-contribution {
	font-family: 'Montserrat', serif;
	font-weight: bold;
	/* Choose a classy font */
	font-size: 32px;
	/* Increase font size */
	color: #2c3e50;
	/* Stylish dark color */
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	text-align: center;
	/* Center the text */
	letter-spacing: 1px;
	/* Add some space between letters */
	border-bottom: 1.5px solid #2c3e50;
	/* Add a stylish bottom border */
	padding-bottom: 10px;
	/* Add space below the text */
	margin-top: 20px;
	/* Add margin above */
	margin-bottom: 30px;
	/* Add margin below */
	line-height: 1.5;
	/* Increase line height for better readability */
}

/* Box under the quote*/
.text-centered-box {
	background-color: #2465ff4d;
	border-radius: 20px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
	padding: 5rem;
}

.text-centered-box-mint {
	background-color: #D3EEEA;
	border-radius: 20px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
	padding: 5rem;
}

.text-centered-box-yellow {
	background-color: #F0E2B6;
	border-radius: 20px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
	padding: 5rem;
}

.text-centered-box-red {
	background-color: #F9E0DE;
	border-radius: 20px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
	padding: 5rem;
}

.text-centered-box-small {
	background-color: rgba(133, 163, 199, 0.3);
	border-radius: 20px;
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
	margin: 1rem;
	margin-right: 7em;
}

.text-centered-box p {
	margin-top: 2rem;
	margin-bottom: 0;
}

.text-centered-box-mint p {
	margin-top: 2rem;
	margin-bottom: 0;
}

.text-centered-box-red p {
	margin-top: 2rem;
	margin-bottom: 0;
}

.text-centered-box-yellow p {
	margin-top: 2rem;
	margin-bottom: 0;
}

/* For the quote */
/* center the blockquote in the page */
.blockquote-wrapper {
	display: flex;
	padding: 5rem 0;
	background: white;
}

/* Blockquote main style */
.blockquote {
	position: relative;
	font-family: 'Barlow Condensed', sans-serif;
	margin: 80px auto;
	align-self: center;
}

/* Blockquote header */
.blockquote p {
	font-family: 'Times New Roman', 'Abril Fatface', cursive;
	position: relative;
	/* for pseudos */
	color: #2465ff;
	font-size: 2.8rem;
	font-weight: normal;
	font-style: italic;
	line-height: 1;
	margin: 0;
	border: 2px solid;
	border-radius: 20px;
	padding: 25px;
}

/* Blockquote right double quotes */
.blockquote p:after {
	content: "";
	position: absolute;
	border: 2px solid #2465ff;
	border-radius: 0 50px 0 0;
	width: 60px;
	height: 60px;
	bottom: -60px;
	left: 50px;
	border-bottom: none;
	border-left: none;
	z-index: 3;
}

/* a rectangle that hides a line of the main quote bottom border*/
.blockquote p:before {
	content: "";
	position: absolute;
	width: 80px;
	border: 2px solid white;
	/* Change this color if the background of the quote changes*/
	bottom: -3px;
	left: 50px;
	z-index: 2;
}

/* the line that goes down and is bent */
.blockquote h4 {
	position: relative;
	color: #525252;
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.2;
	margin: 0;
	padding-top: 15px;
	z-index: 1;
	margin-left: 150px;
	padding-left: 12px;
}

.blockquote h4:first-letter {
	margin-left: -12px;
}

.find-out-more {
	text-align: center;
	margin-bottom: 3rem;
}

.find-out-more h3 {
	margin: 3rem;
}


.find-out-more a {
	color: rgb(109, 104, 104);
	font-weight: bold;
	text-decoration: none;
	border: 3px solid rgb(109, 104, 104);
	border-radius: 5px;
	padding: 1rem;
	display: inline-block;
	margin: 0.5rem;
}

.socialmedia-contact {
	font-size: var(--small);
}

hr {
	margin: 5rem 0;
}

.diseases-subtitle {
	font-style: italic;
	font-size: --mid;
}

h2 {
	font-family: 'Montserrat', serif;
	/* Choose a classy font */
	font-size: 2em;
	/* Increase font size */
	color: #2c3e50;
	/* Stylish dark color */
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	text-align: center;
	/* Center the text */
	letter-spacing: 1px;
	/* Add some space between letters */
	border-bottom: 1.5px solid #2c3e50;
	/* Add a stylish bottom border */
	padding-bottom: 10px;
	/* Add space below the text */
	margin-top: 20px;
	/* Add margin above */
	margin-bottom: 30px;
	/* Add margin below */
	line-height: 1.5;
	/* Increase line height for better readability */
}

h3 {
	font-family: 'Montserrat', serif;
	/* Choose a classy font */
	font-size: 1.5em;
	/* Increase font size */
	color: #2c3e50;
	/* Stylish dark color */
	text-align: left;
	/* Center the text */
	font-weight: 500;
	text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.3);
	/* Adds shadow */
	letter-spacing: 0.7px;
	/* Add some space between letters */
	margin-top: 30px;
	/* Add margin above */
	margin-bottom: 30px;
	/* Add margin below */
	line-height: 1.5;
	/* Increase line height for better readability */
}

h4 {
	font-family: 'Montserrat', serif;
	/* Choose a classy font */
	font-size: 1.3em;
	/* Increase font size */
	color: #2c3e50;
	/* Stylish dark color */
	text-align: left;
	/* Center the text */
	font-weight: 500;
	/* Adds shadow */
	letter-spacing: 0.7px;
	/* Add some space between letters */
	margin-top: 20px;
	/* Add margin above */
	margin-bottom: 10px;
	/* Add margin below */
	line-height: 1.5;
	/* Increase line height for better readability */
}

/* For the bubbles */
.bubble-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* Center the bubbles horizontally */
	align-items: center;
	/* Center the bubbles vertically */
	gap: 30px;
	/* Space between bubbles */
}

.bubble {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 12em;
	/* Fixed width for circles */
	height: 12em;
	/* Fixed height for circles */
	background-color: #f0f0f0;
	/* Background color */
	border-radius: 35%;
	/* Make it circular 50% */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	/* Optional shadow for depth */
	text-align: center;
	/* Center text */
	transition: transform 0.3s;
	/* Add a transition effect */
}

.bubble:hover {
	transform: scale(1.05);
	/* Scale effect on hover */
}

.icon-bubble {
	margin-bottom:10px;
	/* Space between icon and text */
}

.bubble p {
	color: #333;
	font-weight: bold;
	/* Text color */
	margin-left: 15px;
	margin-right: 15px;
}

.svg-inline--fa {
	color: #007BFF;
	/* Icon color */
	height: 40px;
	width: 40px;
	margin-top: 15px;
}

.vertical-line {
	width: 1px;
	/* Width of the vertical line */
	background-color: #908f8f;
	/* Color of the line */
	height: 100px;
	/* Height of the line (should match the bubble's height) */
	align-self: center;
	/* Center the line vertically */
}



/* Primer table */

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 20px;
}

th,
td {
	padding: 6px;
	text-align: left;
	border: 1px solid rgb(220 213 213);
}

th {
	background-color: #f2f2f2;
	font-size: 10px;
	font-family: "Montserrat";
	font-weight: normal;
}

th.name {
    font-weight: bold;
	display: block;
	background-color: #c6d0dd;
}

th.sequence {
	max-height: 3.5em; /* Set the visible height */
    overflow-y: auto; /* Add vertical scroll */
    display: block; /* Makes height work properly for cell content */
}

.category0 {
	background-color: #4ba8fa;
	/* A light blue for categories */
	font-size: 14px;
	font-family: "Montserrat";
	text-align: center;
	font-weight: bold;
}

.category1 {
	background-color: #5ea4f875;
	font-size: 12px;
	font-family: "Montserrat";
	text-align: center;
	font-weight: bold;
}

.category2 {
	background-color: #b3bdc7;
	font-size: 10px;
	font-family: "Montserrat";
	text-align: center;
	font-style: italic;
}


tr:hover {
	background-color: #f1f1f1;
}

/* For the side by side text and image */
.side-by-side {
	display: grid;
	grid-template-columns: 3fr 2fr;
	/* 3/5 for text, 2/5 for the image */
	gap: 25px;
	/* Space between text and image */
	height: 100%;
	/* Ensures height consistency */
}

.side-by-side figcaption {
	margin: 12px 15px 0 15px;
	/* Space between image and caption */
	text-align: justify;
	/* Centers caption text */
}

.sidebyside-img {
	max-width: 100%;
	/* Image takes full width available */
	border: 0px solid #686868; /* put it to 0, I prefer without */
	border-radius: 7px;
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.3);
}

.sidebyside-img img {
	max-width: 100%;
	/* Maintain aspect ratio */
	height: auto;
	/* Keep image height responsive */
	object-fit: contain;
	/* Maintains aspect ratio without cutting */
	border-radius: 12px;
	transition: transform 0.4s ease, border 0.3s ease-in-out;
	cursor: zoom-in;
	border: 5px solid transparent;
	margin: auto;
}

.weeks-notebook h2 {
	font-size: 2rem;
}

.weeks-notebook p {
	font-size: 1.5rem;
	line-height: 120%;
}

.weeks-notebook-date {
	opacity: 0.5;
	font-style: italic;
}

.weeks-notebook-date::after {
	content: " · ";
}

.tecan {
	background-color: #00ff7047;
	padding: 0.24rem;
	border-radius: 9px;
	mix-blend-mode: darken;
	line-height: 1.6rem;
}


/* For the tooltip  */
/* This is the text that activates the tooltip on hover*/
.tooltip-underline {
	text-decoration: underline dotted;
	/* Adds an underline to the text */
	color: #6464d0;
	text-underline-offset: 4px;
}

/* This is the actual tooltip text*/
.tooltip {
	font-size: 1.1rem;
	/* Change font size */
}

/* This is the actual tooltip background*/
.tooltip-inner {
	max-width: 300px;
	background-color: #000545;
	border-radius: .55rem;
}

.infocircle {
	font-size: 0.75em;
}

/* For text over the images*/
.text-over-image{
	display: grid;
	text-align: center;
	padding-bottom: 10px;
}

/* Adding contributor*/
.contributor-box {
	background-color: #f5f5f5; /* Light grey */
    color: #000; /* Black text */
    padding: 1.5em;
    margin: 3em;
	font-size: 15px;
    font-family: Arial, sans-serif;
    box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); /* Optional shadow */
}

.contributor-box h3 {
    margin-top: 0; /* No top margin for the header */
	color: #000;
	font-size: 20px;
	font-family: Arial, sans-serif;
	font-weight: semibold;
}

li {
  line-height: 1.8; /* Adjust line spacing; 1.8 = 180% of font size */
  margin-bottom: 10px;
	margin-right: 80px;
	margin-left: 50px;

}