@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

body {
	padding-top: 35px;
}

.header-logo {
	background: rgb(236,236,236);
	/* background: linear-gradient(rgba(255,255,255,1) 25%, rgba(90,220,250,1) 100%); */
	height: auto;
	display:flex;
	/* overflow: auto; */
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	/* flex-wrap:wrap; */
	font-size: 1em;
	margin-top: 0em;
}

/* .header-text {
	font-family: 'Montserrat';
	font-weight: 400;
	letter-spacing: 0.2em;
	color: white;
	font-size: 3em;
	margin-bottom: 0;

} */

.logo{
	flex-basis: 45rem;
	min-width: 45rem;
	height: auto;
	align-self:center;
}

@media screen and (max-width: 800px) {
	.header-logo {
		background: rgb(255,255,255);
		background: linear-gradient(rgba(255,255,255,1) 25%, rgba(90,220,250,1) 100%);
		height: auto;
		display:flex;
		overflow: auto;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
		/* flex-wrap:wrap; */
		font-size: 1em;
		margin-top: 3em;
	}
	.logo {
		display: block;
		width: 100%;
		min-width: auto;
		flex-basis: auto;
		height: auto;
		align-self:center;
		margin-bottom: 3em;
	}
}
.logo-text{
	align-self:center;
}

.topnav {
	overflow: hidden;
	background-color: rgb(250, 250, 250);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 9999;
	box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .topnav a.active {
	background-color: transparent;
	color: #113c75;
	border-bottom: 3px solid #5adcfa;
	font-weight: 600;
  }
  
  .topnav a {
	float: left;
	color: #113c75;
	text-align: center;
	padding: 10px 14px;
	text-decoration: none;
	font-size: 15px;
	border-bottom: 3px solid transparent;
	transition: border-color 0.2s ease, background-color 0.2s ease;
  }

  /* Hide the link that should open and close the topnav on small screens */
.topnav .visible-phone {
  display: none;
}
  
  .topnav a:hover, .dropdown:hover .dropbtn {
	background-color: rgba(17, 60, 117, 0.06);
	color: #113c75;
	border-bottom: 3px solid #113c75;
  }
   /* Dropdown container - needed to position the dropdown content */
.dropdown {
	float: left;
	overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the topnav */
  .dropdown .dropbtn {
	font-size: 17px;
	border: none;
	outline: none;
	color: #113c75;
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
	display: none;
	position: absolute;
	background-color: rgb(250, 250, 250);
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
  }
  
  /* Style the links inside the dropdown */
  .dropdown-content a {
	float: none;
	color: #113c75;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
	text-align: left;
  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
	background-color: rgb(16, 86, 151);
	color: rgb(173, 228, 241);
  }
  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
	display: block;
  }

  /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 800px) {
	.topnav a:not(:first-child), .dropdown .dropbtn {
	  display: none;
	}
	.topnav a.visible-phone {
	  float: right;
	  display: block;
	}
  }
  
   /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 800px) {
	.topnav.responsive {position: fixed;}
	.topnav.responsive a.visible-phone {
	  position: absolute;
	  right: 0;
	  top: 0;
	}
	.topnav.responsive a {
	  float: none;
	  display: block;
	  text-align: left;
	}
	.topnav.responsive .dropdown {float: none;}
	.topnav.responsive .dropdown-content {position: relative;}
	.topnav.responsive .dropdown .dropbtn {
	  display: block;
	  width: 100%;
	  text-align: left;
	}
  }

.panelists {
	background: rgb(255,255,255);
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
}

.panelist-box{
	width: 90%;
	height: 40vh;
	object-fit: cover;
	object-position: center;
}

@media screen and (max-width: 800px) {
	.panelist-box{
		width: 90%;
		height: 20vh;
		object-fit: cover;
		object-position: center;
	}
  }

.subcomittee-container {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex-wrap: wrap;
	max-width: 1200px;
	justify-content: center;
	background: rgb(255,255,255);
	gap: 4px;
}

.flex-item {
	display:flex;
	align-items: center;
	flex-basis: 22%;
	line-height: 25px;
	margin: 10px;
	padding: 5px;
	overflow: hidden;
}

.flex-item img{
    flex-grow:0;
    flex-shrink:0;
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: 20% 0;
    border-radius: 50%;
}

.description-text {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-align:left;
	margin: 20px;
	font-size: medium;
}

@media (max-width: 800px) {
	.flex-item {
		display:block;
		width: auto;
		align-items: center;	
		flex-basis: 30%;
		line-height: 25px;
		margin: 14px;
		padding: 5px;
		overflow: hidden;
	}

	.flex-item img{
		flex-grow:0;
		flex-shrink:0;
		width: 80px;
		height: 80px;
		object-fit: cover;
		object-position: 20% 0;
		border-radius: 50%;
		vertical-align: top;		
	}

	.description-text {
	  display: flex;
	  flex-wrap: wrap;
	  flex-direction: column;
	  justify-content: center;
	  text-align:left;
	  font-size: small;
	  padding-left: 0;
	  float: left;
	}
}
  

.workshop-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-align-items: center;
	align-items: center;
	flex-wrap: wrap;
	min-width: 300px;
	max-width: 1200px;
	justify-content: space-even;
	background: rgb(255,255,255);
}

.flex-workshopitem {
	display:flex;
	align-items: center;		
	flex-basis: 55%;
	line-height: 25px;
	margin: 14px;
	padding: 5px;
	overflow: hidden;
}

.flex-workshopitem img{
    flex-grow:0;
    flex-shrink:0;
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: 20% 0;
    border-radius: 50%;
}


.flex-workshopfullitem {
	display:flex;
	align-items: center;		
	flex-basis: 30%;
	line-height: 25px;
	margin: 14px;
	padding: 5px;
	overflow: hidden;
}

.flex-workshopfullitem img{
    flex-grow:0;
    flex-shrink:0;
    width: 80px;
    height: 80px;
    object-fit: cover;
    object-position: 20% 0;
    border-radius: 50%;
}

@media (max-width: 800px) {
	.flex-workshopfullitem{
		display:block;
		align-items: normal;	
		flex-basis: 50%;
		line-height: 25px;
		margin: 14px;
		padding: 5px;
		overflow: hidden;
	}

	.flex-workshopfullitem img{
		flex-grow:0;
		flex-shrink:0;
		width: 80px;
		height: 80px;
		object-fit: cover;
		object-position: 20% 0;
		border-radius: 50%;
		vertical-align: top;		
	}
}

.subcomittee-box {
	height: auto;
	width: auto;
}

.worklife-box {
	flex-basis: 30%;
	align-items: left;
	flex-grow: 0;
}

.career-box {
	flex-basis: 25%;
	flex-grow: 0;
}

#register-link {
	font-family: 'Montserrat';
	font-weight: 1000;
	font-size: 1.5em;
	color: black;
	border-bottom: 4px solid rgba(139, 0, 0, 0);
	-o-transition: 0.5s;
  	-ms-transition: 0.5s;
  	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	transition: 0.5s ease-in-out;
}

#bhgText {
	background-color: pink;
	height: 10em;
  	margin-bottom: 10em;
}

#box {
        background-color: yellow;
}

#reg-link {
	margin-bottom: 1.5em;
	justify-content: center;
	align-items: center;
}


#register-link:hover {
	text-decoration: none;
	border-bottom: 2px solid rgba(139, 0, 0, 1);
}

.text-parent {
	width:100%;
	height:10vh;
	margin-top: 3em;
	margin-bottom: 50vh;
	font-size: large
}

.textera-parent {
	width:100%;
	height:40vh;
	margin-top: 1em;
	margin-bottom: 40vh;
	font-size: medium
}

#worklife-person {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-weight: bold;
}

#worklife-job {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-style: italic;
}

#worklife-bio {
	transition: 1s color;
	color: #000000;
	font-size: large;
}

#career-person {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-weight: bold;
}

#career-job {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-style: italic;
}

#career-bio {
	transition: 1s color;
	color: #000000;
	font-size: large;
}


@media (max-width: 800px) {
	.text-parent {
		width:100%;
		height:50vh;
		margin-top: 3em;
		margin-bottom: 50vh;
		font-size: small
	}
	
	#career-person {
		transition: 1s color;
		color: #000000;
		font-size: medium;
		font-weight: bold;
	}

	#career-job {
		transition: 1s color;
		color: #000000;
		font-size: medium;
		font-style: italic;
	}

	#career-bio {
		transition: 1s color;
		color: #000000;
		font-size: x-small;
	}
}

#mri-person {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-weight: bold;
}

#mri-job {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-style: italic;
}

#mri-bio {
	transition: 1s color;
	color: #000000;
	font-size: large;
}

#era-person {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-weight: bold;
}

#era-job {
	transition: 1s color;
	color: #000000;
	font-size: x-large;
	font-style: italic;
}

#era-bio {
	transition: 1s color;
	color: #000000;
	font-size: large;
}

/* Sponsors & Friends section */
.sponsors-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 2em;
	max-width: 900px;
	margin: 1.5em auto;
}

.sponsor-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	padding: 1.5em 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sponsor-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.sponsor-card img {
	max-height: 80px;
	width: auto;
	max-width: 260px;
	object-fit: contain;
}

.sponsor-card.primary {
	padding: 2em 3em;
}

.sponsor-card.primary img {
	max-height: 110px;
	max-width: 340px;
}

.friends-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 1.2em;
	max-width: 1000px;
	margin: 1.5em auto;
}

.friend-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 8px rgba(0,0,0,0.06);
	padding: 1em 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.friend-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

.friend-card img {
	max-height: 55px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.section-divider {
	width: 80px;
	height: 3px;
	background: linear-gradient(90deg, #113c75, #5adcfa);
	border: none;
	border-radius: 2px;
	margin: 2em auto;
}

@media (max-width: 800px) {
	.sponsor-card.primary img {
		max-height: 70px;
		max-width: 220px;
	}
	.sponsor-card img {
		max-height: 55px;
		max-width: 180px;
	}
	.friend-card img {
		max-height: 40px;
		max-width: 140px;
	}
	.sponsors-grid, .friends-grid {
		gap: 1em;
	}
}

/* ── Register buttons ── */
.register-btn {
	display: inline-block;
	padding: 14px 40px;
	background: linear-gradient(135deg, #113c75, #1a6fb5, #5adcfa);
	color: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.4em;
	text-decoration: none !important;
	border-radius: 50px;
	box-shadow: 0 4px 16px rgba(17, 60, 117, 0.3);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	letter-spacing: 0.03em;
}

.register-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(17, 60, 117, 0.4);
	color: #fff !important;
}

.register-btn-secondary {
	display: inline-block;
	padding: 10px 28px;
	background: linear-gradient(135deg, #113c75, #1a6fb5);
	color: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 1.1em;
	text-decoration: none !important;
	border-radius: 50px;
	box-shadow: 0 3px 12px rgba(17, 60, 117, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.register-btn-secondary:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 18px rgba(17, 60, 117, 0.35);
	color: #fff !important;
}

/* ── Event details list ── */
.event-details-list {
	list-style: none;
	padding: 0;
	margin: 1.5em auto;
	max-width: 700px;
	text-align: left;
}

.event-details-list li {
	display: flex;
	align-items: flex-start;
	gap: 0.8em;
	padding: 0.8em 0;
	border-bottom: 1px solid rgba(0,0,0,0.06);
	line-height: 1.6;
}

.event-details-list li:last-child {
	border-bottom: none;
}

.event-details-list .detail-icon {
	color: #113c75;
	font-size: 1.1em;
	min-width: 1.4em;
	text-align: center;
	margin-top: 3px;
}

.event-details-list .detail-label {
	font-weight: 700;
	color: #113c75;
}

/* ── Suggest a Project button ── */
.suggest-project-btn {
	display: inline-block;
	padding: 14px 32px;
	background: linear-gradient(135deg, #5adcfa, #113c75);
	color: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 0.95em;
	text-decoration: none !important;
	border-radius: 50px;
	box-shadow: 0 4px 16px rgba(90, 220, 250, 0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	letter-spacing: 0.02em;
}

.suggest-project-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(90, 220, 250, 0.45);
	color: #fff !important;
}

.suggest-project-btn i {
	margin-right: 0.3em;
}

/* ── Hotel cards ── */
.hotel-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	max-width: 900px;
	margin: 1.5em auto;
}

.hotel-card {
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 1px 8px rgba(0,0,0,0.06);
	padding: 0.7em 1.2em;
	display: flex;
	align-items: center;
	gap: 0.7em;
	color: #333;
	font-weight: 500;
	flex: 0 1 auto;
}

.hotel-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #113c75;
	color: #fff;
	font-weight: 700;
	font-size: 0.85em;
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.hotel-grid {
		flex-direction: column;
		align-items: stretch;
	}
	.hotel-card {
		width: 100%;
	}
}

/* ── Section spacing & transitions ── */
section.main {
	padding-top: 0;
	padding-bottom: 0;
}

h2 {
	font-weight: 700 !important;
}

section.main + section.main {
	border-top: 3px solid transparent;
	border-image: linear-gradient(90deg, transparent, #5adcfa, transparent) 1;
}

/* ── Footer upgrade ── */
#footer {
	background: #0d2d5a;
	color: #c8dff5;
	padding: 3em 0 2em;
}

#footer h2 {
	color: #fff;
	margin-bottom: 1.2em;
}

.footer-contact-list {
	list-style: none;
	padding: 0;
	margin: 0 auto 2em;
	max-width: 480px;
	text-align: left;
}

.footer-contact-list li {
	display: flex;
	align-items: center;
	gap: 0.8em;
	padding: 0.7em 0;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	font-size: 1em;
}

.footer-contact-list li:last-child {
	border-bottom: none;
}

.footer-contact-list .contact-icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(90, 220, 250, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1em;
	color: #5adcfa;
}

.footer-contact-list .contact-label {
	font-weight: 600;
	color: #fff;
	margin-right: 0.4em;
}

.footer-contact-list a {
	color: #5adcfa;
	text-decoration: none;
	transition: color 0.2s;
}

.footer-contact-list a:hover {
	color: #fff;
	text-decoration: underline;
}

#footer .copyright {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 1.5em;
	margin-top: 1em;
	color: rgba(255,255,255,0.5);
}

#footer .copyright a {
	color: rgba(255,255,255,0.6);
}

/* ── Mobile nav overlay ── */
.nav-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 9998;
}

.nav-overlay.active {
	display: block;
}

@media screen and (max-width: 800px) {
	.topnav.responsive {
		background: rgba(250, 250, 250, 0.98);
		box-shadow: 0 4px 20px rgba(0,0,0,0.15);
	}
}

/* ── Leads wider cards ── */
.leads-container .flex-item {
	flex-basis: 42%;
}

/* ── Placeholder images subtle treatment ── */
.flex-item img[src*="person101"] {
	opacity: 0.55;
	border: 2px dashed #c0c0c0;
}

/* ── Map responsive container ── */
.map-responsive {
	position: relative;
	overflow: hidden;
	padding-bottom: 56.25%;
	height: 0;
	max-width: 600px;
	margin: 1em auto;
}

.map-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}