/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root{--bs-info-rgb:136,255,221;--padding:50px}
body{font-size:18px;font-family:Poppins,sans-serif;line-height:1.3;color:#00236d;font-weight:500}
.text-caveat{font-family:Caveat,cursive;font-optical-sizing:auto;font-weight:700;font-style:normal;font-size:4rem}
.h2,h2{font-size:3rem;font-weight:600;line-height:1}
.h3,h3{font-size:2.5rem;font-weight:600;line-height:1}
.fs-xxl{font-size:10rem;font-weight:700;line-height:.85}
.fs-xl{font-size:6.5rem;font-weight:700;line-height:.85}
.text-yellow{color:#fcef3a}
.pt-100{padding-top:calc(var(--padding) * 2)}
.pb-100{padding-bottom:calc(var(--padding) * 2)}
.pt-50{padding-top:calc(var(--padding) * 1)}
.pb-50{padding-bottom:calc(var(--padding) * 1)}
.yellow-icon { height: 100px;}
.highlights-clip {}
.highlights-clip img {height: 250px;margin-bottom: 1rem;max-width: 100%;object-fit: contain;object-position: bottom;}
.highlights-clip.reduce img {width: 80%;margin-top: 1rem;margin-bottom: 0;}
.float-anim { animation: float var(--timedur) infinite forwards; position: absolute; display: inline-block; padding-left: 20px; }
@media (max-width:768px){
	.text-caveat { font-size: 2.5rem;}
	.h2,h2{font-size:2.5rem}
	.h3,h3{font-size: 1.8rem;}
	.pt-100{padding-top:calc(var(--padding) * 0.875)}
	.pb-100{padding-bottom:calc(var(--padding) * 0.875)}
	.pt-50{padding-top:calc(var(--padding) * .5)}
	.pb-50{padding-bottom:calc(var(--padding) * .5)}
	.yellow-icon {width: 23%;height: auto;object-fit: contain;background: rgb(0 0 0 / 30%);border-radius: 100px;aspect-ratio: 1/1;padding: .65rem;}
	.highlights-clip img { height: 150px;}
	.highlights-clip.reduce img { height: 100px;}
	.float-anim { padding-left: 0;}
}
@keyframes float {
	0% {transform: translate(-50%, -10px);}
	50% {transform: translate(-50%, -30px);}
	100% {transform: translate(-50%, -10px);}
}

/*--------------------------------------------------------------
# Bootstrap Overwrite
--------------------------------------------------------------*/
.btn{--bs-btn-padding-x:35px;--bs-btn-padding-y:3px}
.btn-primary{--bs-btn-color:#ffffff;--bs-btn-bg:#01236d;--bs-btn-border-color:#01236d}
.form-control,.form-select{border-width:1px;border-color:#00bec7;border-radius:6px;color:#00bec7}
.form-control:focus{color:#00bec7;box-shadow:0 0 0 .25rem rgb(0 190 199 / 25%)}
input.form-control::placeholder{color:#00bec7;opacity:.5}
@media (max-width:768px){
	.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{--bs-gutter-x: 3rem;}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.hero { background-image: url(../img/hero-bg.webp); background-repeat: no-repeat; background-size: cover; aspect-ratio: 16/9; position: relative; background-position: center bottom; overflow: hidden;}
.hero:after {content: ""; display: block; position: absolute; width: 100%; height: 20%; left: 0; bottom: 0; background: linear-gradient(0deg,rgba(0, 190, 199, 1) 0%, rgba(0, 190, 199, 0) 90%);}
.hero-slogan { margin-top: 100px;}
.chairpicking {position: absolute;right: 0;bottom:10%;width: 40%; animation-name:putChair;animation-duration:3s;}
@keyframes putChair{
	from{ bottom: 100%;right: -15%;}
	to{bottom:10%;right: 0;}
}
@media (max-width:768px){
	.hero {aspect-ratio: 16/12;}
	.hero-slogan { margin-top: 30px;}
}

/*--------------------------------------------------------------
# Section
--------------------------------------------------------------*/
main{background-color:#00bec7}
section:last-child{padding-bottom:100px}
@media (max-width:768px){
	section{padding-top:50px}
	section:last-child{padding-bottom:50px}
}

/*--------------------------------------------------------------
# Participating Projects
--------------------------------------------------------------*/
.projects.card {border: 0;overflow: hidden;align-items: center;--bs-border-radius: 10px;}
.projects.card:hover .card-img-top { transform: scale(1.1); transition: 1s;}
.projects.card .title {font-size: 18px;color: #00a7b6;line-height: 1.3;font-weight: 600;display: flex;justify-content: center;align-items: center;height: 72px;padding: 0 12px;flex-direction: column;}
.projects.card .btn {--bs-btn-padding-x: 15px;}
.projects.card .card-img-top {aspect-ratio: 7/5;border-radius: 0; transition: 1s;}
.projects.card .project-url { text-decoration: none;}
@media (max-width:768px){
	.projects.card .title { font-size: 16px;}
	.projects.card .card-img-top {aspect-ratio: 5/4;}
}



/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/
.form{background:#fff;border-radius:30px;padding:40px 100px}
.form .form-inner{width: 70%;margin:auto}
.form .form-check{font-size:12px;color:#00bec7}
.form .form-check label{position:relative}
.form .form-check label input:checked[type=checkbox]{background-color:#00bec7;border-color:#00bec7;background-image:url('../img/checked.svg')}
.form .form-check label input[type=checkbox]{width:1.3em;height:1.3em;vertical-align:top;background-color:#fff;background-repeat:no-repeat;background-position:center;background-size:contain;border:1px solid rgb(0 190 199 / 75%);-webkit-appearance:none;-moz-appearance:none;color-adjust:exact;position:absolute;left:-20px;border-radius:4px}
#registration{color:#00236d}
.extra-sm{font-size:12px;text-align:center}

/* Custom Dropdown Select */
.select-dropdown{position:relative}
.select-dropdown__button::focus{outline:0}
.select-dropdown__button .zmdi-chevron-down{position:absolute;right:10px;top:12px}
.dropdown__list{position:absolute;display:block;left:0;right:0;max-height:300px;overflow:auto;padding:0;list-style-type:none;opacity:0;pointer-events:none;z-index:2;animation-name:fadeInDown;animation-duration:.4s}
.dropdown__list.active{opacity:1;pointer-events:auto;animation-name:fadeInUp;animation-duration:.4s;animation-fill-mode:both;-webkit-animation-duration:.4s;-webkit-animation-fill-mode:both;-webkit-animation-name:fadeInUp;border:1px solid #00bec7;border-radius:6px;box-shadow:0 5px 12px 2px rgba(0,0,0,.15)}
.dropdown__list-item{display:block;list-style-type:none;padding:10px 15px;background:#fff;border-top:1px solid #e6e6e6;font-size:85%;line-height:1.4;cursor:pointer}
.dropdown__list-item:hover{background-color:#e1e1ff}
.dropdown__list::-webkit-scrollbar {width: 10px;}
.dropdown__list::-webkit-scrollbar-track {background: transparent; }
.dropdown__list::-webkit-scrollbar-thumb {background: #888; }
.dropdown__list::-webkit-scrollbar-thumb:hover {background: #555; }
@keyframes fadeInUp{
	from{transform:translate3d(0,30px,0)}
	to{transform:translate3d(0,5px,0);opacity:1}
}
@keyframes fadeInDown{
	from{transform:translate3d(0,0,0);opacity:1}
	to{transform:translate3d(0,30px,0);opacity:0}
}
@media (max-width:768px){
	.form {padding:40px 30px;}
	.form .form-inner { width: 100%;}
	.form .form-check{white-space:wrap}
	.form h3 {font-size: 1.6rem;}
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-bg {height: 30px;display:flex;width:100%;justify-content:center;align-items:center;}
.footer-bg .bg-tri { height: 100%;}
.footer-bg:after,.footer-bg:before{content:"";width: 100%;height: 100%;border-top: 3px solid #fff;border-bottom: 3px solid #fff;}
.footer-bg:before {background: #2e2d8c;}
.footer-bg:after {background: #00a7b6;}