:root
{
	--muted: #556380;
	--bordercolour: #d3e0ea;
	--greentext: #e0000b; /*0e8c41;*/
	
}
body
{
	font-family: Inter;
	color: #0e1e47;
	background-color: #f4f9fd;
}
h1, h2, h3, h4, h5, h6
{
	font-family: Plus Jakarta Sans;
}
.btn
{
	font-weight: 500;
}
.btn-light
{
	background-color: #f4f9fd;
}
.btn-light:hover, .btn-light:active, .btn-light.active, .btn-light:focus
{
	background-color: #e6f0f8 !important;
	border-color: #e6f0f8 !important;
}
.btn:active, .btn.active
{
	translate: 0 1px;
}
.btn-success
{
	background-color: #0069e0;
	border-color: #0069e0;
	color: white; /*#f7fef8;*/
}
.btn-success:hover
{
	background-color: #2282f0cc; /*#f0222ccc;*/ /*#0e8c41cc;*/
	border-color: #2282f0; /*#f0222c00;*/ /*#0e8c4100;*/
}
.btn-success:active
{
	background-color: #0751a6 !important; /*#a6070f*/ /*#0e8c41cc;*/
	border-color: #0751a6 !important; /*#a6070f*/ /*#0e8c4100;*/
}

header
{
	background-color: #f4f9fdcc;
	border-bottom: 1.5px solid var(--bordercolour);
}
header > div
{
	height: 64px;
	width: 1152px;
	max-width: 100%;
	backdrop-filter: blur(12px);
}
header a
{
	text-decoration: none;
}
nav a
{
	color: #6c757d;
	margin: 0px 12px;
	text-decoration: none;
	font-size: 14px;
	transition-duration: 0.25s;
}
nav a:hover
{
	color: #0e1e47;
}

.cover
{
	background-image: linear-gradient(#f4f9fd88, #f4f9fddd, #f4f9fdff), url("https://www.flogen.org/sips2026/images/riobg.png");
	min-height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center 50%;
	border-bottom: 1.5px solid var(--bordercolour);
}
.cover > div
{
	padding: 160px 24px;
	width: 1152px;
	max-width: 100%;
}
.cover > div > div
{
	width: 672px;
	max-width: 100%;
}
.cover .tag
{
	background-color: white;
	border: 1px solid var(--bordercolour);
	color: var(--muted);
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 500;
}
.cover .circle
{
	height: 6px;
	width: 6px;
	background-color: #0e8c41; /*#f4ce23;*/
}
.cover h1
{
	font-size: 60px;
	font-weight: bold;
	margin: 24px 0 0 0;
}
.cover p
{
	font-size: 18px;
	color: var(--muted);
	margin: 20px 0 0 0;
	line-height: 1.625;
}
.cover dl
{
	margin: 32px 0 0 0;
	gap: 16px 32px;
}
.cover dl .desc
{
	word-wrap: nowrap;
}
.cover dd
{
	font-weight: 600;
	font-size: 14px;
	margin-left: 10px;
	margin-bottom: 0px;
}
.cover svg
{
	color: var(--greentext);
}
.cover .buttons
{
	margin-top: 40px;
	gap: 12px;
}
.cover .btn
{
	border-radius: 8px;
	padding: 0px 10px;
	height: 36px;
	font-weight: 500;
}
.cover .smallp
{
	margin-top: 16px;
	font-size: 12px;
	color: var(--muted);
}

#video
{
	background-color: #e1f5e44d;
	text-align: center;
}
#video > div, #pricing > div
{
	padding: 96px 24px;
}
#video > div > div, #speakers > div > .descdiv, #pricing > div > .descdiv
{
	max-width: 672px;
}
#video p, #speakers p, #venue p, #pricing p
{
	color: var(--muted);
	margin-top: 16px;
}
#video .green, #speakers .green, #venue .green, #pricing .green
{
	color: var(--greentext);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0;
}
#video h2, #speakers h2, #venue h2, #pricing h2
{
	font-size: 36px;
	font-weight: bold;
	margin: 12px 0 0 0;
}
#video iframe
{
	width: 766.4px;
	height: auto;
	max-width: 100%;
	border-radius: 8px;
	margin-top: 48px;
	aspect-ratio: 16 / 9;
}

#video, #speakers, #pricing, #venue
{
	border-bottom: 1.5px solid var(--bordercolour);
}
#speakers > div, #venue > div
{
	width: 1152px;
	max-width: 100%;
	padding: 112px 24px;
}
#speakers p
{
	margin-bottom: 0;
}
#speakers .carddiv
{
	margin: 48px 0 20px 0;
}
#speakers .speakercard
{
	/*width: 258px;*/
	width: 100%;
	border-radius: 15px;
	border: 1px solid var(--bordercolour);
}
#speakers .cardimg
{
	overflow: hidden;
	border-radius: 14px 14px 0 0;
}
#speakers .cardimg img
{
	aspect-ratio: 4 / 5;
	border-radius: 14px 14px 0 0;
	width: 100%;
	object-fit: cover;
	transition-duration: 0.5s;
}
#speakers .cardimg img:hover
{
	transform: scale(1.05);
}
#speakers div:has(> .carddesc)
{
	background-color: white;
	border-radius: 14px;
}
#speakers .carddesc
{
	padding: 20px;
}
#speakers .carddesc h3
{
	font-size: 16px;
	font-weight: 600;
}
#speakers .carddesc p
{
	font-size: 14px;
	margin: 4px 0 0 0;
}
.slick-track
{
	display: flex !important;
}
.slick-slide
{
	height: inherit !important;
}
.slick-prev
{
	left: 25px;
	z-index: 1;
}
.slick-next
{
	right: 25px;
}

#pricing > div
{
	width: 1152px;
	max-width: 100%;
}
#pricing .pricerow
{
	margin-top: 16px;
}
#pricing .pricerow .col .pricecard
{
	background-color: white;
	border-radius: 18px;
	border: 1px solid var(--bordercolour);
	padding: 32px;
	text-align: left;
	height: 100%;
}
#pricing h3
{
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 0;
}
#pricing .eligibility
{
	color: var(--greentext);
	font-style: italic;
	font-size: 14px;
	text-decoration: none;
	font-weight: 500;
}
#pricing .eligibility:hover, #pricing .eligibility:active, #pricing .eligibility:focus
{
	text-decoration: underline;
}
#pricing .catheading
{
	gap: 4px 8px;
}
#pricing p
{
	margin: 16px 0 0 0;
}
#pricing .reqs
{
	font-size: 14px;
}
#pricing .price
{
	font-family: Plus Jakarta Sans;
	font-weight: bold;
	font-size: 36px;
}
#pricing a.toggleoptions
{
	color: var(--greentext);
	text-decoration: none;
	font-size: 14px;
	margin-top: 20px;
	font-weight: 500;
}
#pricing a.toggleoptions:hover, #pricing a.toggleoptions:active
{
	text-decoration: underline;
}
#pricing .dateselectdiv
{
	margin: 48px 0 0 0;
}
#pricing .dateselect
{
	padding: 6px;
	border: 1px solid var(--bordercolour);
	border-radius: 14px;
	background-color: white;
	max-width: 768px;
	width: 100%;
}
#pricing .dateselect .row
{
	width: 100%;
}
#pricing div[role="tablist"] button
{
	border-radius: 10px;
	background-color: white;
	color: var(--muted);
	border: 0px;
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 600;
}
#pricing div[role="tablist"] button:hover
{
	background-color: #e1f5e4;
	color: #0e1e47;
	translate: 0px;
}
#pricing div[role="tablist"] button.active
{
	background-color: var(--greentext);
	color: #f7fef8;
	translate: 0px;
}
#pricing .pricelist
{
	margin: 20px 0 0 0;
}
#pricing .catrow:not(:first-child)
{
	padding-top: 12px;
}
#pricing .catrow:not(:last-child)
{
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bordercolour);
}
#pricing .catrow span:first-child
{
	font-size: 14px;
	color: var(--muted);
}
#pricing .catrow span:last-child
{
	font-size: 18px;
	font-weight: bold;
	font-family: Plus Jakarta Sans;
	
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum"; 
}
#pricing a:has(.regbtn)
{
	text-decoration: none;
}
#pricing .regbtn
{
	gap: 6px;
	border-radius: 10px;
	padding-inline: 10px;
	height: 36px;
}
#pricing .regdiv
{
	max-width: 672px;
	margin-top: 56px;
}
#pricing .regdiv p
{
	font-size: 14px;
	margin: 16px 0 0 0;
}

#venue
{
	background-color: #e1f5e44d;
}
#venue img
{
	border: 1px solid var(--bordercolour);
	border-radius: 18px;
	max-width: 100%;
	aspect-ratio: 4 / 3;
}
#venue p.hotelname
{
	color: #0e1e47;
	margin: 8px 0 0 0;
	font-family: Plus Jakarta Sans;
	font-size: 18px;
	font-weight: 600;
}
#venue .iconlist
{
	gap: 20px;
	margin: 32px 0 0 0;
	width: 100%;
}
#venue .iconitem
{
	gap: 16px;
}
#venue .iconcontainer
{
	background-color: #e1f5e4;
	color: #0e8c41;
	border-radius: 10px;
	height: 40px;
	width: 40px;
}
#venue h3
{
	font-size: 14px;
	font-weight: 600;
	margin: 0;
}
#venue .iconlist p, #venue .address p
{
	font-size: 14px;
	margin-top: 2px;
	margin-bottom: 0;
}
#venue .address
{
	margin-top: 20px;
}

footer
{
	color: var(--muted);
}
footer > div
{
	width: 1152px;
	max-width: 100%;
	padding: 40px 24px;
	gap: 24px;
}
footer .info
{
	font-size: 14px;
	gap: 10px;
}
footer .copyright
{
	font-size: 12px;
	gap: 8px;
}
footer img
{
	height: 32px;
}
footer .copyright img
{
	height: 16px;
	width: auto;
}

#modal .modal-dialog
{
	width: 800px;
	max-width: 95dvw;
}
#modal .modal-content
{
	height: 730px;
	max-height: 92.5dvh;
	border-radius: 11px;
	border: 0;
	background-color: transparent;
}
#modal .modal-content > div
{
	height: 100%;
	width: 100%;
}
#modal .btn-close
{
	position: absolute;
	top: 15px;
	right: 15px;
}
#modal .imgdiv
{
	background-image: linear-gradient(155deg, #f4f9fddd, #f4f9fdaa, #f4f9fd77, #f4f9fd33, #f4f9fd00), url("https://www.flogen.org/sips2026/images/riobg3.jpg");
	/*height: 100%;*/
	width: 45%;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	border-radius: 10px 0 0 10px;
}
#modal .imgdiv img
{
	width: 225px;
	max-width: 100%;
}
#modal .imgdiv img:first-child
{
	width: 250px;
}
#modal .formdiv
{
	/*height: 100%;*/
	width: 55%;
	border-radius: 0 10px 10px 0;
	overflow-y: auto;
	background-color: white;
}
#modal .btmcaption
{
	font-size: 12px;
	color: white;
}
#modal h5
{
	font-weight: bold;
	color: #29468f;
}
#modal .required
{
	color: #e0000b !important;
}
#modal h4
{
	font-weight: bold;
}
#modal form > label
{
	font-weight: bold;
}
#modal form label
{
	font-size: 14px;
}
#modal form input, #modal form select
{
	font-size: 14px;
}
#modal .desc
{
	font-size: 14px;
}
#modal small
{
	font-size: 10px;
}
#modal .iconrow
{
	color: white;
}
#modal .iconrow .iconlabel
{
	font-size: 12px;
}
#modal .points h6
{
	letter-spacing: 0.2em;
	margin: 0px;
	font-weight: 500;
	color: #29468f;
}
#modal .imgdiv hr
{
	border: 2px solid #e0000b;
	opacity: 1;
	width: 25%;
}
#modal form .input-group-text
{
	background-color: white;
	border-right: 0;
	padding: 0px;
}
#modal form input[type="text"], #modal form input[type="email"]
{
	border-left: 0;
}

@media (max-width: 992px)
{
	.cover h1
	{
		font-size: 48px;
	}
	.cover > div
	{
		padding: 128px 24px;
	}
}
@media (max-width: 576px)
{
	.cover h1
	{
		font-size: 36px;
	}
	.cover > div
	{
		padding: 96px 16px;
	}
	.cover p
	{
		font-size: 16px;
	}
	.buttons
	{
		flex-direction: column;
	}
	.buttons button
	{
		width: 100%;
	}
	#video h2, #speakers h2, #venue h2, #pricing h2
	{
		font-size: 30px;
	}
	#modal .modal-content
	{
		overflow-y: auto;
	}
	#modal .imgdiv
	{
		width: 100%;
		border-radius: 10px 10px 0 0;
	}
	#modal .formdiv
	{
		width: 100%;
		border-radius: 0 0 10px 10px;
		overflow-y: visible;
	}
	/*#modal div:has(small)
	{
		margin-bottom: 24px;
	}*/
}