body{scroll-behavior: smooth; background-color: #fff; font-family: "proxima-nova",sans-serif; font-size: 16px; line-height: normal; color: #211D1E;}
#wrapper{background: #fff;}
.d-inline{display: inline-block;}
:root { --sticky-top: 10vh; }

.hummingbird-page .btn{padding: 8px 16px; font-family: "proxima-nova",sans-serif; font-size: 18px; line-height: 24px; font-weight: 500; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;}
.hummingbird-page .btn-white{background: #fff; border: 1px solid #fff !important; color: #2589CA !important;}
.hummingbird-page .btn-white:hover, .hummingbird-page .btn-white:focus{background: #81BBE0; border: 1px solid #81BBE0 !important; color: #fff !important;}
.hummingbird-page .btn-blue{background: #2589CA; border: 1px solid #2589CA !important; color: #fff !important;}
.hummingbird-page .btn-blue:hover, .hummingbird-page .btn-blue:focus{background: #81BBE0; border: 1px solid #81BBE0 !important; color: #fff !important;}

.hero-section{max-width: 815px; padding-top: 160px;}
.hero-title-1{font-size: 100px; line-height: 112px; font-weight: 300; color: #2589CA; font-family: "brandon-grotesque",sans-serif; text-align: center; margin-bottom: 24px;}
.hero-title-2{font-size: 88px; line-height: 112px; font-weight: 300; color: #E71666; font-family: "brandon-grotesque",sans-serif; text-align: center; margin-bottom: 24px; padding: 48px 0 0 130px;}
.hero-img{position: absolute; left: 45%; top: 50%; transform: translate(-50%, -55%);}
.hero-description{padding-top: 40px; max-width: 472px; font-size: 24px; line-height: 32px; color: #1A608D;}
.hero-btn{margin-top: 24px;}
/* timings you can tweak */
.hero-section{
--rise-dur: .6s;          /* each text element duration */
--stagger:  .14s;         /* gap between each text element */
--bird-pop: .7s;          /* bird pop-in duration */
/* bird starts after all text: 3 staggers (title2, desc, button) + a little cushion */
--bird-delay: calc(var(--rise-dur) + var(--stagger) * 3 + .15s);
}

/* initial text state */
.hero-title-1,
.hero-title-2,
.hero-description,
.hero-btn{
opacity: 0;
transform: translateY(24px) scale(.96);
will-change: transform, opacity;
}

/* when section is activated (.in is added by JS below) */
.hero-section.in .hero-title-1{
animation: riseIn var(--rise-dur) cubic-bezier(.2,.8,.2,1) forwards;
}
.hero-section.in .hero-title-2{
animation: riseIn var(--rise-dur) cubic-bezier(.2,.8,.2,1) forwards;
animation-delay: var(--stagger);
}
.hero-section.in .hero-description{
animation: riseIn var(--rise-dur) cubic-bezier(.2,.8,.2,1) forwards;
animation-delay: calc(var(--stagger) * 2);
}
.hero-section.in .hero-btn{
animation: riseIn var(--rise-dur) cubic-bezier(.2,.8,.2,1) forwards;
animation-delay: calc(var(--stagger) * 3);
}

/* bird image – hidden first */
.hero-img{
opacity: 0;
transform: translate(-50%, -55%) scale(.88) rotate(-2deg);
will-change: transform, opacity;
}

/* pop in, then float */
.hero-section.in .hero-img{
animation:
birdPop var(--bird-pop) ease-out var(--bird-delay) forwards,
birdFloat 7s ease-in-out calc(var(--bird-delay) + var(--bird-pop)) infinite;
}

/* keyframes */
@keyframes riseIn{
0%   { opacity:0; transform: translateY(24px) scale(.96); }
100% { opacity:1; transform: translateY(0)    scale(1); }
}

@keyframes birdPop{
0%   { opacity:0; transform: translate(-50%, -55%) scale(.88) rotate(-2deg); }
60%  { opacity:1; transform: translate(-50%, -59%) scale(1.02) rotate(0deg); }
100% { opacity:1; transform: translate(-50%, -55%) scale(1) rotate(0deg); }
}

@keyframes birdFloat{
0%,100% { transform: translate(-50%, -55%) }
50%     { transform: translate(-50%, calc(-55% - 14px)) }
}

/* respect users who prefer less motion */
@media (prefers-reduced-motion: reduce){
.hero-title-1, .hero-title-2, .hero-description, .hero-btn,
.hero-img { animation: none !important; opacity: 1; transform: none !important; }
}



.hero-banner{margin-top: 64px; background: url("../images/new/hummingbird/banner-bg.png") no-repeat center 0;}
.hero-banner-text{padding-top: 370px; padding-bottom: 543px;}
.hero-banner-text-title{font-size: 64px; line-height: 80px; font-weight: 300; font-family: "brandon-grotesque",sans-serif; text-align: center; margin-bottom: 24px;}
.hero-banner-text-description{font-size: 24px; line-height: 32px;}


.feature-section{margin:160px 0;}
.feature-box{max-width:1240px; gap:1rem; padding:0 !important; position:relative;}
.feature-box-title{font-family: "brandon-grotesque",sans-serif; font-size:64px; line-height:80px; font-weight:300; margin-bottom: 24px;}
.feature-box-title,.feature-box-text{max-width:512px; width:100%;}
.feature-box-slide{position:relative; padding-top:220px; min-height:800px; align-content: flex-end;}
.feature-box-text{margin:16px 0; position:relative; padding-left:18px; font-size:18px; line-height:24px; color:#4D4A4B; cursor:pointer;}
.feature-box-text::before{ content:''; display:none; position:absolute; left:0; top:0; width:3px; height:100%; background:linear-gradient(0deg,#2589CA 0%, #3B7BBE 23%, #7459A1 39%, #CF2472 71%, #E71666 90%); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.feature-box-text-title{font-size:24px; line-height:32px; font-weight:700; color: #4D4A4B;}
.feature-box-text-description{display:none;}
.feature-box-text.active{cursor:default;}
.feature-box-text.active::before{display:block;}
.feature-box-text.active .feature-box-text-title{color:#E71666;}
.feature-box-text.active .feature-box-text-description{display:block;}

.feature-box-img{position:absolute; bottom:0; right:0; max-width:600px; width:100%; aspect-ratio:3/4; opacity:0; transform:translate(0,0) scale(1); transition:transform .5s ease, opacity .5s ease, filter .5s ease; border-radius:20px; overflow:hidden;}
.feature-box-img img{width:100%; height:100%; object-fit:cover; border-radius:16px; display:block;}
.feature-box-img.is-main{  opacity:1; z-index:3; transform:translate(0,0) scale(1); }
.feature-box-img.is-next{  opacity:1; z-index:2; transform:translate(12%,0) scale(.86); filter:brightness(.97); }
.feature-box-img.is-next2{ opacity:1; z-index:1; transform:translate(24%,0) scale(.70); filter:brightness(.92); }

.everything-section{padding: 40px 0 88px;}
.everything-section::before, .everything-section::after{content: ''; display: block; position: absolute; background-repeat: no-repeat; background-size: cover; background-position: 0 0;}
.everything-section::before{width: 641px; height: 882px; background-image: url("../images/new/hummingbird/everything-bg-left.png"); bottom: -440px; left: 0;}
.everything-section::after{width: 641px; height: 882px; background-image: url("../images/new/hummingbird/everything-bg-right.png"); bottom: -440px; right: 0;}
.everything-title{max-width: 600px; font-size: 64px; line-height: 80px; font-family: "brandon-grotesque",sans-serif; font-weight: 300; margin-bottom: 80px;}
.everything-row{margin-top: 44px; gap: 44px;}
.everything-img{max-width: 1290px;}

.work-bg{background: url("../images/new/hummingbird/work-bg.png") no-repeat center top;}
.work-box{padding-top: 465px;}
.work-box img{max-width: 100%;}
.work-img-box{margin-left: -36px;}
.work-img{position: absolute;}
.work-img-1{top: 86px; right: 82px; width: 564px; height: 564px; }
.work-img-2{top: 348px; left: 305px; width: 211px; height: 211px; }
.work-img-3{top: 234px; left: 216px; width: 268px; height: 268px;}
.work-img-4{top: 298px; right: 112px; width: 363px; height: 363px;}
.work-move .work-img-1{right: -328px; top: -436px; z-index: 2;}
.work-move .work-img-2{left: 447px; top: -51px;}
.work-move .work-img-3{left: 157px; top: -275px;}
.work-move .work-img-4{right: -516px; top: 117px;}
.work-img{ transition: top .8s ease-out, left .8s ease-out, right .8s ease-out; will-change: top,left,right; }


.gliding-box{background: #2589CA; margin: 200px auto 80px; color: #fff; -moz-border-radius: 999px; -webkit-border-radius: 999px; border-radius: 999px;}
.gliding-box:before{content: ''; position: absolute; bottom: 0; right: -1px; background: url("../images/new/hummingbird/gliding-line.png") no-repeat 0 0; background-size: cover; width: 369px; height: 465px;}
.gliding-text{width: 297px; font-size: 88px; line-height: 112px; font-family: "brandon-grotesque",sans-serif; font-weight: 700; font-style: italic; padding: 72px 0 72px 250px;}
.gliding-img{position: absolute; bottom: 0; right: 150px;}
.gliding-btn{position: absolute; top: 321px; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); transform: translateX(-50%);}


.filler { min-height: 120vh; display: grid; place-items: center; background: #f8f9fa; border-bottom: 1px solid #e5e7eb; }
.filler.footer { background: #fff; border-top: 1px solid #e5e7eb; }
.scrolly { background: #fff; }
.scrolly-inner { display: grid; gap: 3rem; grid-template-columns: 1fr; position: relative; }
.sticky-col { position: sticky; top: var(--sticky-top); align-self: start; padding: 12px 0;}
.section-list .list-group-item { cursor: pointer; position: relative; background-color: transparent !important; border: none !important; border-radius: 0; padding: 0 0 0 18px; margin: 16px 0; float: left; }
.section-list .list-group-item::before{ content:''; display:none; position:absolute; left:0; top:0; width:3px; height:100%; background:linear-gradient(0deg,#2589CA 0%, #3B7BBE 23%, #7459A1 39%, #CF2472 71%, #E71666 90%); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;}
.section-list .desc { display: none; margin-top: .5rem; font-size: 18px; line-height: 24px; color: #4D4A4B; }
.section-list .list-group-item.active::before, .section-list .list-group-item.active .desc { display: block; }
.section-list .list-group-item.active .feature-box-text-title{color:#E71666;}
.image-frame { position: relative; width: 100%; max-width: 600px; aspect-ratio: 3/4; background: #e9ecef; border-radius: 1rem; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); float: right;}
.image-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .35s ease, transform .6s cubic-bezier(.2,.6,.2,1); -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px;}
.image-frame img.active { opacity: 1; transform: scale(1); }
.steps { grid-column: 1 / -1; }
.step { height: 100vh; }
.scrolly .list-group{margin: 0; padding: 0;}
.mobile-none{display: none !important;}

@media screen and (min-width: 1921px) {
.hero-banner{background-size: cover;}
}

@media (min-width: 821px) {
.scrolly-inner { grid-template-columns: 5fr 7fr; }   
.sticky-col { position: sticky; top: var(--sticky-top, 10vh); height: calc(100vh - var(--sticky-top, 10vh)); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; }
.left-col .section-list { margin-top: auto; }
.sticky-col{max-height: 800px; justify-self: end;}
.right-col .image-frame { -ms-flex: 1 1 auto; flex: 1 1 auto; height: 100%; min-height: 0; border-radius: 1rem; overflow: hidden; }
}

@media screen and (max-width: 1560px) {
.work-img-1{width: 500px; height: 500px;}
.work-img-4{width: 300px; height: 300px;}
.work-move .work-img-1{right: -228px;}
.work-move .work-img-4{right: -380px; top: 0;}
.gliding-text{padding-left: 120px;}
}

@media screen and (max-width: 1440px) {
.everything-row{margin-top: 24px; gap: 24px;}
.everything-section::before, .everything-section::after{width: 320px; height: 450px; bottom: -240px;}
.gliding-img img{height: 550px;}
}

@media screen and (max-width: 1400px) {
.hero-banner{background-size: cover;}
.hero-banner-text{padding-top: 200px; padding-bottom: 300px;}
.feature-section{margin: 120px 0;}
.feature-box{padding-right: 24px !important;}
.work-img-box{margin: 0;}
.work-box{padding-top:400px;}
.work-img-1{width:320px; height:320px;}
.work-img-4{width: 250px; height: 250px;}
.work-move .work-img-1{right: -40px; top: -300px;}
.work-move .work-img-4{right: -170px; top: 0;}
.gliding-text{padding-top: 40px; padding-bottom: 40px;}
.gliding-box{margin-top: 120px;}
.gliding-img img{height: 450px;}
}

@media screen and (max-width: 1250px) {
.hero-section{padding-top: 120px;}
.feature-box-title, .feature-box-text{max-width: 450px;}
.feature-box-slide{align-content:normal; min-height: 500px;} 
.feature-box-img{max-width: 450px; top: calc(50% - 45%);}

.gliding-box{display: flex; flex-direction: column; align-items: center; padding: 40px 0 0; border-radius: 99px; margin-top: 80px;}
.gliding-box:before{width: 300px; height: 100%;}
.gliding-text{margin: 0 auto; padding: 0; max-width: 400px; width: 100%; text-align: center; font-size: 64px; line-height: 80px;}
.gliding-img{position: relative; max-width: 350px; width: 100%; right: auto; order: 2; margin-top: 24px;}
.gliding-img img{width: 100%; height: auto;}
.gliding-btn{order: 1; position: relative; top: 0; left: 0; -moz-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0); margin-top: 24px; padding: 8px 24px; font-size: 18px; line-height: 24px; background-color: #fff; color: #2589CA; border-radius: 8px; border: none;}
}

@media (max-width:1249px){
.work-box{padding-top:280px;}
.work-img-box{margin: 0 auto; position: relative; max-width: 850px;}
.work-img-1{width:280px; height:280px; top:40px; right:24px;}
.work-img-2{top:240px; left:140px; width:160px; height:160px;}
.work-img-3{top:160px; left:100px; width:190px; height:190px;}
.work-img-4{top:220px; right:36px; width:180px; height:180px;}
.work-move .work-img-1{top:-220px; right: -20px;}
.work-move .work-img-2{left:360px; top:-20px;}
.work-move .work-img-3{left:150px; top:-160px;}
.work-move .work-img-4{right:-110px; top:42px;}
}

@media screen and (max-width: 1024px) {
.hero-section{padding-top: 80px;}
.hero-title-1{font-size: 64px; line-height: 72px;}
.hero-title-2{font-size: 48px; line-height: 60px; padding: 48px 0 0 40px;}
.hero-img{max-width: 100px; left: 48%;}
.hero-banner-text-title{font-size: 48px; line-height: 60px; }

.feature-section{margin: 80px 0;}
.feature-box-title{font-size: 48px; line-height: 60px;}
.feature-box-slide{padding-top: 0; min-height:550px;}
.feature-box-img{display:none; opacity:1; filter:none; max-width: 350px;}
.feature-box-img.is-main{display:block;}

.everything-section{padding-bottom: 40px;}
.everything-title{font-size: 48px; line-height: 60px; text-align: center; margin-bottom: 40px;}

.sticky-col{padding-top: 24px;}
}

@media screen and (max-width: 991px) {
.work-box{padding-top: 200px;}
.work-img-box{display: flex; max-width: 550px;}
.work-img-1{width: 200px; height: 200px; top: 20px; right: 16px;}
.work-img-2{top: 120px; left: 80px; width: 120px; height: 120px;}
.work-img-3{top: 80px; left: 60px; width: 140px; height: 140px;}
.work-img-4{top: 100px; right: 16px; width: 130px; height: 130px;}
.work-move .work-img-1{top: -160px; right: 0;}
.work-move .work-img-2{left: 240px; top: -10px;}
.work-move .work-img-3{left: 100px; top: -120px;}
.work-move .work-img-4{right: -80px; top: 30px;}
}

@media screen and (max-width: 820px) {
.mobile-block{display: block !important;}
.desktop-none{display: none !important;}
.feature-box-title{text-align: center; margin: 0 auto 24px;}
.feature-box-slide{ min-height: auto; }
.feature-box-item{ margin-top: 32px; display: block}
.feature-box-text{margin: 0 auto 16px;}
.feature-box-text::before, .feature-box-text-description{display: block;}
.feature-box-text-title{font-size: 20px; line-height: 28px; color: #E71666;}
.feature-box-img{ position:relative; top:auto; right:auto; width:100%; margin: 0 auto; max-width: 450px; aspect-ratio:auto; transform:none; filter:none; opacity:1; display:block;}

}

@media screen and (max-width: 768px) {
.hero-banner-text{padding: 60px 0 120px;}
.hero-banner-text-title{font-size: 36px; line-height: 48px;}
.hero-banner-text-description{font-size: 20px; line-height: 28px; max-width: 320px;}
.feature-section{margin: 40px 0;}
.everything-section::before, .everything-section::after{width: 280px; height: 400px; bottom: -200px;}
.everything-title{font-size: 36px; line-height: 48px; text-align: center; margin-bottom: 24px;}
.everything-row{margin-top: 24px; gap: 16px;}
.gliding-box{-moz-border-radius: 24px; -webkit-border-radius: 24px; border-radius: 24px; padding: 24px 16px 0 16px; margin: 40px auto;}
.gliding-box:before{display: none;}

}

@media screen and (max-width: 766px) {
.everything-section::before, .everything-section::after{width: 120px; height: 240px; bottom: -180px;}
.work-bg{background-size: cover;}
.work-box{padding-top: 100px;}
.work-img-box{max-width: 350px; display: block; margin: 0;}
.work-img-1{width: 150px; height: 150px; top: 10px; right: 8px;}
.work-img-2{top: 80px; left: 40px; width: 90px; height: 90px;}
.work-img-3{top: 50px; left: 30px; width: 110px; height: 110px;}
.work-img-4{top: 60px; right: 8px; width: 100px; height: 100px;}
.work-move .work-img-1{top: -120px; right: -80px;}
.work-move .work-img-2{left: 160px; top: -5px;}
.work-move .work-img-3{left: 60px; top: -90px;}
.work-move .work-img-4{right: -130px; top: 20px; }
}

@media screen and (max-width: 500px) {
.hero-title-1{font-size: 48px; line-height: 56px;}
.hero-title-2{font-size: 36px; line-height: 48px; padding: 32px 0 0 30px;}
.hero-description{font-size: 18px; line-height: 24px; max-width: 100%; padding-top: 24px; text-align: center;}
.hero-img{max-width: 60px; left: 47%;}
.everything-row{margin-top: 16px; gap: 12px; flex-wrap: wrap;}
.everything-section::before, .everything-section::after{display: none;}
.work-box{padding-top: 60px;}
.work-img-box{max-width: 300px;}
.work-img-1{width: 100px; height: 100px; top: 10px; right: 6px;}
.work-img-2{top: 60px; left: 30px; width: 60px; height: 60px;}
.work-img-3{top: 40px; left: 20px; width: 80px; height: 80px;}
.work-img-4{top: 50px; right: 6px; width: 70px; height: 70px; }
.work-move .work-img-1{top: -80px; right: -20px;}
.work-move .work-img-2{left: 120px; top: -15px;}
.work-move .work-img-3{left: 40px; top: -60px;}
.work-move .work-img-4{right: -50px; top: 30px;}
.gliding-text{font-size: 42px; line-height: normal;}
}

@media screen and (max-height: 920px){
.feature-box-slide{min-height: 700px;}
.feature-box-img{max-height: 100%;}
}

@media screen and (max-height: 850px){
.feature-box-slide{min-height: 650px;}
}

@media screen and (max-height: 790px){
.feature-box-slide{min-height: 600px;}
}

@media screen and (max-height: 700px){
.section-list .list-group-item{margin: 8px 0;}
}