:root {
    --darkblue: #000133;
    --blue: #005CFF;
    --accent : #4A4B6F;
}

*{padding:0; margin:0;}
html{
	font-size:62.5%; /*default font-size is 10px */
    overflow-x: hidden;
    scroll-behavior: smooth;
}
body{ font-family: 'Golos Text', sans-serif; font-weight:400; font-size:2rem; line-height:1.6; color: var(--accent); background: #f8f9fc; }
.header-main { width: 100%; display: block; margin-top: 4.8rem; margin-bottom: 1.2rem;}
.banner-section { width: 100%;}
.banner-section .banner-inr { height: 100%; min-height: calc(100vh - 9.3rem); background-image: url(../images/banner-right-image.png); background-position: right; background-position-y: -7rem;
background-repeat: no-repeat; background-size: 78.8rem;}
.banner-section .banner-inr .left { max-width: 65rem; margin-top: 14rem;}
.banner-section .banner-inr .left .gen-heading { font-weight: 700; font-size: 8rem; line-height: 1.3; color: var(--darkblue);}
.banner-section .banner-inr .left .gen-heading span { color: var(--blue);}
.banner-section .banner-inr .left .sub-bx { max-width: 38rem; margin-top: 6.2rem; margin-left: 20rem; position: relative;}
.banner-section .banner-inr .left .sub-bx .sub-heading { font-size: 3.2rem; line-height: 1.3; color: var(--darkblue);}
.banner-section .banner-inr .left .sub-bx:after { content: ''; width: 23.6rem; height: 10.9rem; position: absolute; right: -11.7rem; top: 120%; background-image: url(../images/curl-banner.svg);
background-size: contain;}
.madfly-section { width: 100%; padding-bottom: 12.8rem; position: relative; }

.madfly-section .top-part { width: 100%;}
.gen-title { font-weight: 600; font-size: 4.8rem; line-height: 1.3; color: var(--darkblue); margin-bottom: 1rem;}
.madfly-section .top-part p { color: var(--accent); padding-right: 15%;}
.madfly-section .bottom-part { margin-top: 6.4rem; display: flex; justify-content: space-between;}
.inner-width { max-width: 111.2rem; margin: auto;}
.madfly-section:after { content: ''; width: 59.2rem; height: 59.2rem; position: absolute; left: -5rem; background: #EBEEFF; filter: blur(12.5rem); bottom: -11rem; z-index: 1;}
.madfly-section .container { z-index: 2; position: relative;}
.madfly-section .bottom-part .content-bx { width: 34rem;  padding-left: 7rem; display:flex; align-items: center;}
.madfly-section .bottom-part .image-bx { width: calc(100% - 34rem);}
.madfly-section .bottom-part .image-bx .vd-back { background: rgba(226, 232, 249, 0.6); padding: 1.6rem; display: block; border-radius: 3.2rem; border: 1px solid #FFFFFF; }
.madfly-section .bottom-part .image-bx .vd-back img {width: 100%;}
.madfly-section .bottom-part .content-bx ul { padding-left: 0; margin-bottom: 0;}
.madfly-section .bottom-part .content-bx ul li { list-style: none; margin-bottom: 3.8rem; color: var(--darkblue);}
.madfly-section .bottom-part .content-bx ul li .image { display: inline-block; margin-right: 1.6rem;}
.madfly-section .bottom-part .content-bx ul li:last-child { margin-bottom: 0;}




.app-section .container { position: relative; z-index: 2;}
.sub-heading { font-size: 3.2rem; line-height: 1.5; font-weight: 400;  color: var(--darkblue); }
.app-section { width: 100%; position: relative;}
.app-section .tp-part .sub-heading { padding-right: 20%;  color: var(--darkblue); }
.app-section .btm-part { margin-top: 18.4rem; display: flex; justify-content: space-between;}
.app-section .btm-part .bg-bx { padding: 1.6rem; background: rgba(226, 232, 249, 0.6);  border: 1px solid #FFFFFF; backdrop-filter: blur(.6rem); border-radius: 4.8rem; max-width: 32.1rem; }
.app-section .btm-part .bg-bx img { width: 100%;}
.app-section .btm-part .bg-bx:nth-child(2) { transform: translateY(-12rem);}
.overlay-bx { width: 100%; min-height: 47rem; background: var(--blue); position: relative; margin-top: -35rem;}
.app-section:before { content: ''; width: 68.5rem; height: 68.5rem; position: absolute; right: 0; background-image: url(../images/event-stroke.svg); background-size: cover;
background-repeat: no-repeat;}


.social-approach { padding-top: 12.8rem; position: relative; width: 100%; overflow: hidden;}
.social-approach .btm-part .left { padding-right: 6rem; margin-top: 6.4rem;}
.social-approach .btm-part { margin-top: 6.4rem;}
.social-approach .btm-part .left ul { margin-top: 3rem; margin-bottom: 0; padding-left: 0;}
.social-approach .btm-part .left ul li { list-style: none; padding-left: 3.5rem; line-height: 1.2; margin-bottom: 3rem; background-image: url(../images/list-tick.svg);
background-repeat: no-repeat; background-position-y: 3px;}

.social-approach:after { content:''; position:absolute; width: 65.2rem; height: 65.2rem; background: #EBEEFF; filter: blur(12.5rem); bottom: -31.5rem; right: 18%;  }
.social-approach .container { position: relative; z-index: 1;}

.fortune-favors { width: 100%; position: relative; padding-top: 12.8rem;}
.fortune-favors .top-part { max-width: 74.1rem; margin-bottom: 1.6rem;}
.fortune-favors .bottom-part { display: flex; flex-wrap: wrap;}
.fortune-favors .bottom-part .left { width: calc(100% - 47.1rem); margin-top: 7.2rem;}
.fortune-favors .bottom-part .right { width: 47.1rem; position: relative;}
.fortune-favors .bottom-part .left p {  line-height: 1.6; margin-bottom: 2.4rem;}
.fortune-favors .bottom-part .left p strong { font-weight: 500; color: var(--darkblue);}

.fortune-favors .bottom-part .right .txt-box { position: relative; background: #FFFFFF; padding: 2.4rem; border-radius: 1.2rem; z-index: 1;}
.fortune-favors .bottom-part .right .txt-box p { margin-bottom: 0;}
.fortune-favors .bottom-part .right:after { width: 30rem; height: 30rem; background: #EBEEFF; filter: blur(7.5rem); position: absolute; content: ''; right: -6rem; top: 0;}

.fortune-favors .bottom-part .right .txt-box:before { content: ''; width: 16.9rem; height: 10.8rem; position: absolute; top: -77%; left: 6rem; background-image: url(../images/arrow-curly-down.svg);
background-repeat: no-repeat; background-size: contain;}

.fortune-favors .other-bx { margin-top: 6.4rem;}
.fortune-favors .other-bx p { margin-bottom: 0; font-size: 2.4rem; text-align: center; color: var(--darkblue);}
.fortune-favors .other-bx { margin-top: 6.4rem; padding: 0 17%;}
.fortune-favors .other-bx p { margin-bottom: 0; font-size: 2.4rem; text-align: center; color: var(--darkblue);}

.trending-section { width: 100%; padding-top: 12.8rem;}
.trending-section .top-part p { padding-right: 13%;}

.trending-section .bottom-part { margin-top: 6.4rem; display: flex; justify-content: space-between; align-items: flex-start;}
.trending-section .bottom-part .cmn-bx { max-width: 25rem; width: 25%; min-height: 17.8rem; display: flex; flex-direction: column; justify-content: center; box-shadow: 0px 2.4rem 4.8rem rgba(29, 33, 38, 0.08);
border-radius: 1.6rem; padding: 3.6rem 3.2rem; position: relative; background: #fff;}
.trending-section .bottom-part .cmn-bx .title-number { font-size: 2.4rem; font-weight: 500;}
.trending-section .bottom-part .cmn-bx .title { font-size: 2.4rem; font-weight: 500; line-height: 1.4; padding-right: 20%;  color: var(--darkblue);}
.title-number.clr1 { color: #7746FB;}
.title-number.clr2 { color: #FB4949;}
.title-number.clr3 { color: #FF9D43;}
.title-number.clr4 { color: #03D0AB;}
.trending-section .bottom-part .cmn-bx:nth-child(2) {  margin-top: 8.6rem;}
.trending-section .bottom-part .cmn-bx:nth-child(3) { margin-top: 17.2rem;}
.trending-section .bottom-part .cmn-bx:nth-child(4) { margin-top: 25.8rem;}


.trending-section .bottom-part .cmn-bx:before { width: 7.2rem; height: 3.7rem; content: ''; position: absolute; background-image: url(../images/trending-arrow.svg); background-repeat: no-repeat;
top: -5.5rem; left: 0; background-size: contain; }
.trending-section .bottom-part .cmn-bx:first-child:before { display: none;}

.common-content-bx { padding-top: 10.4rem; width: 100%;}
.common-content-bx .top-part { margin-bottom: 6.4rem;}
.common-content-bx .top-part .step-txt { color: var(--blue); font-size: 2.4rem; font-weight: 600; line-height: 1.3;}
.gen-title2 { font-weight: 600; font-size: 4rem; color: var(--darkblue); line-height: 1.3;}
.common-content-bx .top-part p { margin-bottom: 0;}

.left-rightsection { padding-top: 12.8rem; position: relative;}
.left-rightsection .tp-part { margin-bottom: 3.2rem;}
.left-rightsection .sub-heading { font-weight: 600; color: var(--darkblue);}

.left-rightsection .image-part .image-bx { background: rgba(226, 232, 249, 0.6); border: 1px solid #FFFFFF; backdrop-filter: blur(.6rem); border-radius: 3.2rem; padding: 1.6rem;
display: block;}
.left-rightsection .image-part { position: relative;}
.left-rightsection .image-part .image-hover-bx { display: inline-block; position: absolute; bottom: -14rem; right: -18rem; z-index: 1;}

.left-rightsection .text-part p { margin-left: 6.7rem; }
.left-rightsection .text-part p:last-child{margin-bottom:0;}

.left-rightsection .image-part .image-bx img { width: 100%; border-radius: 2.4rem;  max-height: 52rem; object-fit: cover;}
.left-rightsection .text-part { display: flex; flex-direction: column; justify-content: center;}
.left-rightsection.alternate-section .text-part p { margin-left: 0; margin-right: 3rem;}

.extra-mr { margin-top: 10rem;}

.common-content-bx.step-4 .top-part { max-width: 41.2rem;}
.common-content-bx.step-4 .bottom-part { max-width: 67.5rem;  padding-top: 10rem;}
.common-content-bx .top-part ul { padding-left: 0; margin-top: 3.2rem;}
.common-content-bx .top-part ul li { list-style: none;}

.common-content-bx .top-part ul { padding-left: 0; margin-top: 3.2rem;}
.common-content-bx .top-part ul li { list-style: none; margin-bottom: 1.5rem;}

.left-rightsection .container { position: relative; z-index: 2;}

.left-rightsection.first-div:after { content: ''; position: absolute; width: 41.6rem; height: 41.6rem; left: 38%; bottom: -27rem; background: #EBEEFF; filter: blur(10rem);}
.left-rightsection.second-div:after { content: ''; position: absolute; width: 35rem; height: 35rem; right: 25rem; bottom: -14rem; background: #EBEEFF; filter: blur(10rem);}
.left-rightsection.third-div:after { content: ''; position: absolute; width: 35rem; height: 35rem; left: 25rem; bottom: -14rem; background: #EBEEFF; filter: blur(10rem);}
.common-content-bx.step-4 .container { position: relative; z-index: 2;}

.expectation-section { margin-top: 16.1rem;}
.expectation-section .top-part { margin-bottom: 6.4rem;}
.expectation-section .top-part p { padding-right: 12%; color: var(--darkblue); }

.expectation-section .bottom-part { display: flex; flex-wrap: wrap; justify-content: space-between;}
.expectation-section .bottom-part .profile-section { max-width: 47.6rem;}
.expectation-section .bottom-part .profile-section .profile-description-bx { display: flex; flex-wrap: wrap;}
.expectation-section .bottom-part .profile-section .profile-description-bx .image-bx { width: 12.8rem;}
.expectation-section .bottom-part .profile-section .profile-description-bx .content-bx { width: calc(100% - 12.8rem); padding-left: 1.6rem;}
.expectation-section .bottom-part .profile-section .profile-description-bx .image-bx img { width: 100%;}
.expectation-section .bottom-part .profile-section .profile-description-bx .content-bx span { display: block;}
.expectation-section .bottom-part .profile-section .profile-description-bx .content-bx .name { color: var(--blue); font-size: 2.4rem; font-weight: 500;}
.expectation-section .bottom-part .profile-section .profile-description-bx .content-bx .designation { line-height: 1.3;}
.expectation-section .bottom-part .profile-section .profile-description-bx .content-bx .experience {font-weight: 500;color: var(--darkblue);margin-top: 1.6rem;}

.expectation-section .bottom-part .profile-section .profile-skills-bx { margin-top: 2.5rem;}
.expectation-section .bottom-part .profile-section .profile-skills-bx .sub-title { display: block; margin-bottom:1rem; color:var(--darkblue)}
.expectation-section .bottom-part .profile-section .profile-skills-bx ul { padding-left: 0;}
.expectation-section .bottom-part .profile-section .profile-skills-bx ul li { list-style: none; display: inline-block; background: #EBF2FF; border-radius: .8rem; padding: .8rem 1.6rem;
margin-right: 1.6rem; margin-bottom: 1.6rem;  font-size: 1.6rem; color: var(--blue); line-height:1.4; }

.portfolio-section { padding-top: 12.8rem; padding-bottom: 5.8rem; position: relative;}
.portfolio-section .top-part { margin-bottom: 6.4rem;}
.portfolio-section .bottom-part .portfolio-item { max-width: 50.8rem;}
.portfolio-section .bottom-part { display: flex; justify-content: space-between;}
.portfolio-section .bottom-part .portfolio-item .image-bx .image { padding: 1.6rem; background: rgba(226, 232, 249, 0.6); border: 1px solid #FFFFFF; backdrop-filter: blur(.6rem);
display: block; border-radius: 2.4rem; margin-bottom: 2.4rem;}
.portfolio-section .bottom-part .portfolio-item .image-bx .image img { width: 100%;}
.portfolio-section .bottom-part .portfolio-item .text-bx .project-title { color: #1D1D1D; font-weight: 600;}
.portfolio-section .bottom-part .portfolio-item .text-bx span { display: block;}
.portfolio-section .bottom-part .portfolio-item .text-bx .project-description { font-size: 1.8rem; color: #1D1D1D;}

.portfolio-section .container { position: relative; z-index: 2;}
.portfolio-section:after { content:''; width: 52rem; height: 52rem; background: #EBEEFF; filter: blur(10rem); position:absolute; bottom: -6rem; left: 0; right: 0; margin: auto;}


.challenges-section { width: 100%; padding-top: 12.8rem;}
.challenges-section .top-part p { padding-right: 12%;}

.challenges-section .bottom-part { margin-top: 6.8rem; display: flex; align-items: flex-start;}
.challenges-section .bottom-part .left { width: 39.2rem; min-height: 29rem; position: sticky; top: 7rem;}
.challenges-section .bottom-part .right { width: calc(100% - 39.2rem); padding-left: 5.9rem;}
.challenges-section .bottom-part .left .item-image { background: rgba(226, 232, 249, 0.6); border: 1px solid #FFFFFF; backdrop-filter: blur(.6rem); border-radius: 3.2rem;
padding: 1.6rem; opacity: 0; transition: all .5s; position: absolute; top: 0; right: 0;  z-index: 1;}
.challenges-section .bottom-part .left .item-image img { width: 100%; border-radius: 2.4rem;}
.challenges-section .bottom-part .left .item-image.active {  opacity: 1;}

.challenges-section .bottom-part .right .item-content { padding-left: 4.8rem; position: relative; padding-bottom: 8rem;}
.challenges-section .bottom-part .right .item-content:before {content: ''; position: absolute; background: var(--blue); border-radius: 100%; top: 1rem; z-index: 1;
width: 3.4rem; height: 3.4rem; border: 0.8rem solid #C6DAFD; outline: none; left: -1.5rem;}
.challenges-section .bottom-part .right .item-content:after { content: ''; position: absolute; left: 0; top: 1rem; height: 100%; width: 2px; background: #C6DAFD;}
.challenges-section .bottom-part .right .item-content:last-child:after { display: none;}

.challenges-section .bottom-part .right .item-content .step-title { font-weight: 500; opacity: .5; font-size: 1.6rem;}
.challenges-section .bottom-part .right .item-content .product-title { font-size: 2.4rem; font-weight: 500; color: var(--darkblue); margin-bottom: 1.6rem;}
.challenges-section .bottom-part .right .item-content p { font-size: 1.8rem; margin-bottom: 1.6rem;}
.challenges-section .bottom-part .right .item-content p:last-child { margin-bottom: 0;}

.challenges-section .bottom-part .left:after { content: ''; position: absolute; width: 35rem; height: 35rem; left: -17rem; background: #EBEEFF; filter: blur(10rem); top: 11rem;}

.reward-system { width: 100%; padding-top: 6.8rem; position: relative;}
.reward-system .sticky { position: sticky; position: -webkit-sticky; top: 0px; min-height: 100vh; width: 100%; padding-top: 6rem; /* background: url(../images/fix-curl-image.svg); background-repeat: no-repeat; background-position: center; background-size: contain; */ }
.reward-system .space-holder { position: relative; width: 100%;}

/*  */
.reward-system .horizontal { position: absolute; height: 58rem; will-change: transform; touch-action: pan-y; bottom: 15rem; margin-top: 6rem;}
.gen-title-2 { color: var(--blue); font-size: 2.4rem; font-weight: 500; display: inline-block;}
.reward-system .bottom-part { margin-top: 7.6rem; }
.reward-system .mobile-screens-part { position: relative; height: 61.1rem; display: flex; background: url(../images/fix-curl-image.svg); background-repeat: no-repeat; background-position-y: 25rem;
background-position-x: 19rem;}
.reward-system .mobile-screens-part .item { position: relative; height: 48.6rem; width: 24.5rem; margin-right:12.8rem;}
.reward-system .mobile-screens-part .item:nth-child(odd) { margin-top: 11.5rem;}
.reward-system .mobile-screens-part .item .image-bx { background: rgba(226, 232, 249, 0.6); border: 1px solid #FFFFFF; backdrop-filter: blur(.6rem); border-radius: 3.2rem;
padding: 1.2rem; display: block;}

.reward-system .container { position: relative; z-index: 2;}
.reward-system:after { content: ''; position: absolute; width: 76.2rem; height: 76.2rem; background: #EBEEFF; filter: blur(20rem); bottom: -27rem; left: 0; right: 0; margin: auto;}
.expectation-section .container { position: relative; z-index: 2;}

.reward-system .mobile-screens-part .item .image-bx img { width: 100%;}

.final-result-section { width: 100%; padding-top: 12.8rem;}
.final-result-section .bottom-section { margin-top: 6.4rem; display: flex; align-items: flex-start; justify-content: space-between;}
.final-result-section .bottom-section .right { min-width: 34.1rem; height: 48.8rem; position: sticky; top: calc(50% - 24.4rem); right: calc(50% - 17rem);}
.final-result-section .bottom-section .left { min-width: 100%;  z-index: 1; }
.final-result-section .bottom-section .right:after { position: absolute; content: ''; width: 74.2rem; height: 37.1rem; bottom: 0;  left: calc(50% - 37.1rem); background-image: url(../images/ellipse-image.svg);
background-repeat: no-repeat; background-size: contain;}
.final-result-section .bottom-section .right .page-section-image { padding: 1.6rem; opacity: 0; transition: all .5s; position: absolute; top: 0; right: 0; z-index: 1;}
.final-result-section .bottom-section .right .page-section-image.active{opacity: 1;}


.cmn-section .content-part { max-width: 30rem;}
.cmn-section .content-part .title { font-weight: 500; font-size: 2.4rem; color: var(--darkblue);}
.cmn-section { opacity: .5;  height: 70rem; display: flex;  padding-top: 4.4rem;}
.cmn-section.active { opacity:1;}
.cmn-section:nth-child(even) {justify-content: flex-end;}

.image-bx.no-bg { padding: 0!important; background: transparent!important; border: none!important; backdrop-filter: none!important;}
.reward-system .mobile-screens-part .item:last-child { height: 55.6rem; width: 30.6rem;}


.madfly-section .bottom-part .image-bx .vd-back video { width: 100%; border-radius: 2.4rem;}
.left-rightsection .image-part .image-bx video { width: 100%; border-radius: 2.4rem;}

.text-highlight { color: var(--blue);}

.coding-pro { width: 100%; display: flex; min-height: 46.6rem; align-items: flex-start; justify-content: space-between; background-image: url(../images/code-pro-bg.svg);
background-repeat: no-repeat; background-position-x: 2rem;}
.coding-pro .sub-bx { max-width: 18.3rem;}
.coding-pro .sub-bx:nth-child(3) { max-width: 16.8rem; margin-top: 7rem;}
.coding-pro .sub-bx:nth-child(4) { max-width: 35.1rem; margin-top: 20rem;}
.coding-pro .sub-bx .image-bx { background: rgba(226, 232, 249, 0.6); border: 1px solid #FFFFFF; backdrop-filter: blur(6px); border-radius: 16px; padding: 8px; display: inline-block; }
.coding-pro .sub-bx .txt-bx { display: block; font-size: 1.6rem; line-height: 1.6; color: var(--darkblue); margin-top: 1.6rem;}
.coding-pro .sub-bx:nth-child(2) { margin-top: 24rem;}
strong { color: var(--darkblue); font-weight: 500;}
.common-content-bx .mr-tp2 { margin-top: -60px;}

.portfolio-section .bottom-part .portfolio-item .text-bx .project-title a { color: #1D1D1D; font-weight: 600; text-decoration: none;}
.coding-pro .sub-bx .image-bx img { border-radius: 8px;}

.custom-wid .image-part { max-width: 62.1rem;}
.custom-wid { justify-content: space-between;}
/*  */
.common-content-bx .mr-tp2 img{ width: 106%; max-width: none;}