/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/
@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');
@font-face {
  font-family: 'Idealy';
  src: url('../fonts/Idealy.otf') format('otf'), url('../fonts/Idealy.ttf') format('truetype');;
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
* {-webkit-font-smoothing: antialiased;-webkit-backface-visibility: hidden;}
:root{--bs-primary-rgb:84,73,241; --bs-info-rgb:198, 255, 102; --bs-border-radius-2xl:4rem; --highlight:#6fff12; --highlight-2:#c6ff66;}
body {font-size: 24px;font-family: "Poppins", sans-serif;line-height: 1.3;color: #fff;}
.title { font-size: 58px; line-height: 1;}
.text-justify {text-align: justify;}
.text-highlight { color: var(--highlight);}
.text-highlight-2 { color: var(--highlight-2);}
.bg-highlight-2{ background-color: var(--highlight-2);}
.font-idealy { font-family: "Idealy",sans-serif;}
.text-small { font-size: 12px;}
.pt-xl { padding-top: 5em;}
.pb-xl { padding-bottom: 5em;}
@media (max-width:768px){
	body {font-size: 18px;}
	.title { font-size: 36px;}
	.pt-xl { padding-top: 3em;}
	.pb-xl { padding-bottom: 3em;}
}

/*--------------------------------------------------------------
# Bootstrap Overwrite
--------------------------------------------------------------*/
.btn {--bs-btn-padding-x: 35px;--bs-btn-padding-y:3px}
.btn-info {--bs-btn-color:rgba(var(--bs-primary-rgb),1);--bs-btn-hover-color:rgba(var(--bs-primary-rgb),1); --bs-btn-bg: var(--highlight);--bs-btn-border-color:var(--highlight-2); --bs-btn-hover-bg:var(--highlight-2);--bs-btn-hover-border-color:var(--highlight-2)}
.form-select, .form-control, input {border-width: 3px;border-color: rgba(var(--bs-primary-rgb),1);border-radius: 30px;color: rgba(var(--bs-primary-rgb),1); font-size: 18px; padding: .5em 1em;}
.form-control:focus {color: #5349e8;}
input.form-control::placeholder {color: #5349e8;opacity: 0.5;}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {max-width: 1200px;}
.hash-icon { margin-left: -2em;}
.rounded-2xl {border-radius: var(--bs-border-radius-2xl)!important}
.fs-1 { font-size: calc(1.075rem + 1vw)!important;}
@media (max-width:768px){
	.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {--bs-gutter-x:3.5rem}
	.hash-icon { margin-left: -1em;}
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.traverse-logo { width: 380px; max-width: 100%;}
.paramount-logo, .cathay-logo {max-width: 35%;}
.x-icon {width: 38px; height: 38px;}
@media (max-width:768px){

}


/*--------------------------------------------------------------
# Section
--------------------------------------------------------------*/
main { background-color: #5349e8; background: url(../img/texture-bg.png);}

/*--------------------------------------------------------------
# Hero Banner
--------------------------------------------------------------*/
.hero-banner {display: block;text-align: center;position: relative;margin-bottom: -9%;}
.hero-thumb-wrapper {position: absolute;width: 100%;display: flex;justify-content: space-between;top: 35%; flex-wrap: wrap;}
.hero-family-wrapper { position: relative; display: inline-block;}
.hero-thumb-wrapper .item { width: 11%;}
.hero-thumb-wrapper .item:nth-child(3), .hero-thumb-wrapper .item:nth-child(4) {width: 18%;}

.hero-tiny-1,.hero-tiny-2,.hero-tiny-3,.hero-tiny-4,.hero-tiny-5,.hero-tiny-6,.hero-tiny-7,.hero-tiny-8,.hero-thumb-text { position: absolute; max-width: 100%;}
.hero-thumb { position: relative; width: 100%; }
.hero-thumb-1,.hero-thumb-2,.hero-thumb-3,.hero-thumb-4,.hero-thumb-5, .hero-thumb-6 { max-width: 100%;}
.hero-thumb-3, .hero-thumb-4 { margin-top: 2em; }
.hero-tiny-1 { top: 10%; left: -20%; }
.hero-tiny-2 { top: 79%; left: -50%; }
.hero-tiny-3 { top: 10%; left: -20%; }
.hero-tiny-4 { top: 78%; left: 38%; }
.hero-tiny-5 { top: 43%; left: -19%; }
.hero-tiny-6 { top: 27%; left: 77%; }
.hero-tiny-7 { top: -6%; left: 77%; }
.hero-tiny-8 { top: 65%; left: -14%; }
.hero-thumb-family { }
.hero-thumb-text {left: 5%;top: 74%;}
.hero-thumb-wrapper .window-wrapper {border-radius: 200px; border: 3px solid #c6ff66; padding: 3px; margin: auto; }
.hero-thumb-wrapper .window-wrapper span {border-radius: 200px; border: 3px solid #c6ff66; overflow: hidden; position: relative; display: block;}
.hero-thumb-wrapper .window-wrapper .hero-thumb-window { position: absolute; top: 0; left: 0; max-width: 100%; border-radius: 200px;}
@media (max-width:768px){
	.hero-banner { margin-bottom: 20%; margin-top: 20%;}
	.hero-thumb-wrapper { position: relative;}
	.hero-family-wrapper {position: absolute;top: 10%;left: 0;}
	.hero-thumb-wrapper .item { width: 25%; margin: 0 12.5%;}
	.hero-thumb-wrapper .item:nth-child(3) {margin: 0 10% 0 0;width: 40%;}
	.hero-thumb-wrapper .item:nth-child(4) {margin: 0 0 0 10%;width: 40%;}
	.hero-thumb-3, .hero-thumb-4 { margin-top: 1em; margin-bottom: 1em; }
	.hero-thumb-family { max-width: 80%;}
	.hero-tiny-1,.hero-tiny-2,.hero-tiny-3,.hero-tiny-4,.hero-tiny-5,.hero-tiny-6,.hero-tiny-7,.hero-tiny-8 { max-width: 60%; max-height: 55%;}
	.hero-thumb-text { max-width: 40%;}
}

/*--------------------------------------------------------------
# Floating Animation
--------------------------------------------------------------*/
.floating-animate {animation: floating 3s ease-in-out infinite alternate;}
.hero-thumb-wrapper .item .window-wrapper .hero-thumb-window { animation-name: winopen; animation-duration: 1.5s; animation-iteration-count: 1; animation-fill-mode: forwards;}
.hero-thumb-wrapper .item:nth-child(1) .window-wrapper .hero-thumb-window {  animation-delay: 1s;}
.hero-thumb-wrapper .item:nth-child(2) .window-wrapper .hero-thumb-window {  animation-delay: 1.8s;}
.hero-thumb-wrapper .item:nth-child(5) .window-wrapper .hero-thumb-window {  animation-delay: 2s;}
.hero-thumb-wrapper .item:nth-child(6) .window-wrapper .hero-thumb-window {  animation-delay: 1.3s;}

.hero-thumb-wrapper .item:nth-child(1) .floating-animate:nth-child(2) { animation-duration: 4.5s; animation-delay: 0.2s; }
.hero-thumb-wrapper .item:nth-child(1) .floating-animate:nth-child(3) { animation-duration: 5.1s; animation-delay: 0.8s; }
.hero-thumb-wrapper .item:nth-child(2) .floating-animate:nth-child(2){ animation-duration: 4.1s; animation-delay: 1.5s;}
.hero-thumb-wrapper .item:nth-child(2) .floating-animate:nth-child(3){ animation-duration: 3.8s; animation-delay: 1.3s; }
/* .hero-thumb-wrapper .item:nth-child(3) .floating-animate { animation-duration: 3.8s; animation-delay: 0.8s; } */
/* .hero-thumb-wrapper .item:nth-child(4) .floating-animate { animation-duration: 4.5s; animation-delay: 2.1s; } */
.hero-thumb-wrapper .item:nth-child(5) .floating-animate:nth-child(2){ animation-duration: 5.2s; animation-delay: 1.1s; }
.hero-thumb-wrapper .item:nth-child(5) .floating-animate:nth-child(3){ animation-duration: 4.6s; animation-delay: 1.7s; }
.hero-thumb-wrapper .item:nth-child(6) .floating-animate:nth-child(2){ animation-duration: 6.0s; animation-delay: 0.5s; }
.hero-thumb-wrapper .item:nth-child(6) .floating-animate:nth-child(3){ animation-duration: 4.9s; animation-delay: 0.9s; }
@keyframes floating {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
@keyframes winopen {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}


/*--------------------------------------------------------------
# Own a Home
--------------------------------------------------------------*/
.baggage-carousel {aspect-ratio: 8/9;width: 100%;height: 100%;margin-top: -4em;object-fit: contain; color-space: srgb;  background: transparent !important;outline: none; border: none; }
.earn-miles-icon {max-height: 75px;}
.homeownership-icon { max-height: 230px; object-fit: contain;}
@media (max-width:768px){
	.baggage-carousel {margin-top:0;/* height: 100%; */}
	.homeownership-icon { max-height: 70px;}
}

/*--------------------------------------------------------------
# Traverse Double Miles Bonus
--------------------------------------------------------------*/
.x2-text { position: absolute; left: -30px; top: -18px;}
.participate { margin-top: -1em;}
.participate-title { background-color: var(--highlight-2); border-radius: 100px; display: inline-block; padding: 10px 30px; position: relative; margin-bottom: 0; line-height: 1;}
.participate-icon {max-height: 90px;margin-bottom: 1.5em;}
.participate-flow [class*="col"] { position: relative; font-size: 20px; margin-top: 5em; line-height: 1.5;}
.participate-flow [class*="col"]:not(:first-child)::before {content: url("../img/arrow.svg");width: 30px;height: 30px;display: block;position: absolute;left: -15px;top: 30%}
.participate-flow .numbering {background-color: var(--highlight-2);width: 50px;height: 50px;display: flex;color: rgba(var(--bs-primary-rgb),1);font-size: 37px;font-weight: 700;justify-content: center;align-items: center;border-radius: 50px; margin: 0;}
@media (max-width:768px){
	.x2-text { top: -50px; width: 120px;}
	.participate { margin-top: -3.5em;}
	.participate-title { margin-bottom: 2em;}
	.participate-icon { margin-bottom: 0;}
	.participate-flow [class*="col"] { margin-top: 2em;}
	.participate-flow [class*="col"] p { line-height: 1.35;}
	.participate-flow [class*="col"]:not(:first-child)::before {transform: rotate(90deg);left: calc(50% - 18px);top: -10%;}
	.participate-flow .numbering {margin: auto;font-size: 24px;width: 40px;height: 40px;margin: 1em auto .5em;}
}


/*--------------------------------------------------------------
# Participating Projects
--------------------------------------------------------------*/
.card.projects { background: transparent; border: 0; text-decoration: none;}
.card.projects .card-img-top {border-radius: 3rem;border: 4px solid var(--highlight-2);z-index: 1;aspect-ratio: 1.13/1; object-fit: cover;}
.card.projects .card-body {margin: -3em .6em;padding: 3.5em 1em 0.75em;background-color: var(--highlight-2);border-radius: 3rem;color: rgba(var(--bs-primary-rgb),1);font-weight: bold;line-height: 1;min-height: 165px;display: flex;justify-content: center;align-items: center;}
.card.projects .card-footer {background: transparent; border: 0; margin-top: 3em; color: #fff;}
@media (max-width:768px){
}


/*--------------------------------------------------------------
# Form
--------------------------------------------------------------*/
.traverse-ur-world {background: url(../img/Traverse-Your-World.png) no-repeat center;background-size: contain;padding: 2.6em 2em 0;}
#registration { background: url(../img/form-bg.png) no-repeat center top; padding-top: 4em;}
.form .smiley-icon {position: absolute;right: -50px;bottom: 20px;width: 60px;}
.form p { font-size: 20px;}
.form .form-check {font-size: 13px;font-style: italic;}
.form .form-check label { position: relative;}
.form .form-check label input[type="checkbox" i]  {margin-right: 5px;position: absolute ;top: 2px;left: -20px;}

/* 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;/* margin:0; */padding:0;list-style-type:none;opacity:0;pointer-events:none;/* transform-origin:top left; *//* transform:scale(1,0); *//* transition:all ease-in-out .3s; */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:2px solid #5349e8;border-radius:15px;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;}
@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){
	.traverse-ur-world {padding: 2em 2em .2em; margin: 0 -1em;}
	.traverse-ur-world .title {font-size: 23px;}
	.form .form-check { white-space: wrap;}
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer-bg {background: url(../img/footer-bg-w.png) no-repeat center;background-size: 100% 30px;height: 30px;width: 100%;display: flex;}
.footer-bg:before {content: "";background: url(../img/footer-bg.png) no-repeat center;display: inline-block;background-size: contain;width: 100%;height: 100%;}