@keyframes upnabove {from {opacity: 0;transform: translateY(211%) rotateZ(10deg) skewY(25deg);}to {opacity: 1;transform: translateY(0%) rotateZ(0deg) skewY(0deg);}}
@keyframes upnabove2 {from {opacity: 0;transform: translateY(80%) ;}to {opacity: 1;transform: translateY(0%) ;}}
.ani1 {overflow: hidden;opacity: 0;display: inline-block;transform: translateY(211%) rotateZ(10deg) skewY(25deg);animation: upnabove 1.2s ease-out forwards;}
.ani2{overflow: hidden;opacity: 0;display: inline-block;transform: translateY(80%);animation: upnabove2 0.5s ease-out forwards;}
@keyframes aboutBannerAnim {from{opacity: 0;transform: translateY(30%) ;}to {opacity: 1;transform: translateY(0%) ;}}
.BannerAnimate{opacity: 0;display: block;transform: translateY(30%) ;animation: aboutBannerAnim 0.8s ease-out forwards;}
@keyframes hand{0% {opacity: 0;transform: translateY(120%) rotateZ(-10deg) skewY(25deg);}20% {opacity: 1;transform: translateY(0%) rotateZ(10deg) skewY(0deg);}40% {
opacity: 1;transform: translateY(0%) rotateZ(0deg) skewY(0deg);}60% {opacity: 1;transform: translateY(0%) rotateZ(10deg) skewY(0deg);}100% {opacity: 1;transform: translateY(0%) rotateZ(0deg) skewY(0deg);}}
#hand {position: absolute;right: -35px;top: -47px;}
.handImg {opacity: 0;animation: hand 2s ease-in-out forwards;transform: translateY(120%) rotateZ(-20deg) skewY(25deg);}
@keyframes number {from{transform: translateY(0%);}to{transform: translateY(-83.33%);}}
.animate{animation: number 0.7s ease-in-out forwards;}
@keyframes opace{from {opacity: 0;}to{opacity: 1;}}
.opacify{animation: opace 1s ease-in-out forwards;}
#percent{position: absolute;font-size: 84px;top: -220px;}
#percent-vybe{position: absolute;font-size: 84px;top: -140px;}
.span1,.span2,.span3,.span4,.span5{display: inline-block;}
@keyframes uthao{from{opacity: 0;}to{opacity: 1;}}
@keyframes afteranimated{from{opacity: 0;transform: translateY(80%);}to{transform: translateY(0%);opacity: 1;}}
@keyframes scrollAnim {0%{width: 10px;}50%{width: 50px;}100%{width: 5px;}}
.animater{opacity: 0;}
.letters{animation: uthao 0.8s ease-in-out forwards;}
.afterAnimater{opacity: 0;transform: translateY(80%);animation: afteranimated 0.8s ease-in-out forwards;}
@media only screen and (max-width: 1900px) {#percent {position: absolute;font-size: 69px;top: -141px;}}
@media only screen  and (max-width: 1600px) {#percent {position: absolute;font-size: 57px;top: -110px;}#percent-vybe {position: absolute;font-size: 57px;top: -110px;}}
@media (max-width: 979px) {#hand {position: absolute;right: -50px;top: 0px;}.handImg {width: 70%;}#percent{position: absolute;font-size: 36px;top: -65px;}#percent-vybe{position: absolute;font-size: 36px;top: -65px;}}
@media only screen and (max-width: 1365px) {#imageIn {padding-bottom: 134px;}} 
#imageIn{padding-bottom: 70px;}
.flickity-button{display: none;}
.flickity-slider{transform: translateX(0);}
.carousel .carousel-cell img{padding: 10px;background: #e9e9e9;border-radius: 4px;margin-right: 40px;}
.flickity-page-dots{display: none;}
@keyframes homeUps{from{opacity: 0.9;transform: translate3d(0,18%,-25px); }to{opacity: 1;transform: translate3d(0%, 0%, 0);}}
@keyframes suttleUps{from{opacity: 0.9;transform: translate3d(0,100px,-25px); }to{opacity: 1;transform: translate3d(0, 0px, 0);}}
@keyframes bounce {0%, 20%, 50%, 80%, 100% {transform: translateY(0);}40% {transform: translateY(-50%);}60% {transform: translateY(-25%);}}
.bounce{display: inline-block;animation: bounce 2s infinite;}
.homeUp{animation: homeUps 0.9s ease-in-out forwards;}
.suttleUps{animation: suttleUps 0.9s ease-in-out forwards;}
.tele1,.tele2,.tele3{opacity: 0.9;transform: translate3d(0,18%,-25px); }


html[data-color="white"]{background-color: #ffffff !important;}
html[data-color="white"].letsTalk{color: #000000 !important;}
html[data-color="black"]{background-color: #000000 !important;}
html[data-color="#a8dc37"]{background-color: #a8dc37 !important;}
html[data-color="#9dcadb"]{background-color: #9dcadb !important;}
html[data-color="#f98e77"]{background-color: #f98e77 !important;}
html[data-color="#0f3051"]{background-color: #0f3051 !important;}
html[data-color="#e3c9a9"]{background-color: #e3c9a9 !important;}



/* newly added css by rohit */
html[data-color="#281d4c"]{background-color: #281d4c !important;}
html[data-color="#FE9A04"]{background-color: #FE9A04 !important;}


.white{color: #000000 !important;transition: color linear 0.8s;}
.black{color: #ffffff !important;transition: color linear 0.8s;}
.whitebfr{color: #000000 !important;transition: color linear 0.8s;}
.whitebfr::before{background-color: #000000 !important;transition: all linear 0.8s;}
.blackbfr{color: #ffffff !important;transition: color linear 0.8s;}
.blackbfr::before{background-color: #ffffff !important;transition: all linear 0.8s;}
#whitetalk{color: #000000 !important;transition: all linear 0.8s;border-bottom: 2px solid #000000;}
#blacktalk{color: #ffffff !important;transition: all linear 0.8s;}


html{transition: all ease-in-out 0.7s;}


@keyframes upp{0%{transform: translateY(0%);}50%{transform: translateY(-20%);}100%{transform: translateY(0%);}}
.letsanim{display: inline-block;transform: translateY(0%);}.letsTalk:hover>.letsanim{animation: upp 0.5s ease-in-out forwards;}
.blacker{background-color: black;}


@keyframes fadeUp {from {transform: translateY(40%);}to {transform: translateY(0px);opacity: 1}}
@keyframes fadeInDown {0% {transform: translateY(0px);}100% {opacity: 0;transform: translateY(40%);}} 
.el1 .el2 .el3 .el4 .el5{transition: all 0.8s;}
.In {opacity: 0;animation-duration: 0.8s;animation-fill-mode: both;animation-timing-function: ease-out;-webkit-animation-duration: 0.8s;-webkit-animation-fill-mode: both;animation-name: fadeUp;-webkit-animation-name: fadeUp;}
.Down {opacity: 1;animation-duration: 0.8s;animation-fill-mode: both;animation-timing-function: ease-in;-webkit-animation-duration: 0.8s;-webkit-animation-fill-mode: both; animation-name: fadeInDown;}
.main:hover ~ .cursor{display: block !important;}
@keyframes fadeInUp {from {transform: translate3d(0,40px,0)}to {transform: translate3d(0,0,0);opacity: 1}}
@-webkit-keyframes fadeInUp {from {transform: translate3d(0,40px,0)}to {transform: translate3d(0,0,0);opacity: 1}}
.animated {animation-duration: 1s;animation-fill-mode: both;-webkit-animation-duration: 1s;-webkit-animation-fill-mode: both}
.animatedFadeInUp {opacity: 0}
.fadeInUp {opacity: 0;animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}
.cursor {display: none;position: absolute;height: 35px;width: 35px;background-color: #ffffff;box-shadow:  0 0 10px  rgba(255,255,255,0.6);border: solid 0.1px #555;justify-content: center;align-items: center;background-image: url(/assets/images/arrow.png);border-radius: 50%;background-repeat: no-repeat;background-position: center;pointer-events: none;transform: translate(-50%,-50%);transition: 0.5s;}
.main:hover ~ .cursor{display: block !important;}
.cursor.visible{opacity: 1;transition: opacity ease 0.5s;}
.cursor.not-visible{opacity: 0;transition: opacity ease 0.5s;}
.cursor.rotate{transform: rotate(180deg);transition: transform ease 0.5s;}
.cursor.rotateback{transform: rotate(0deg);transition: transform ease 0.5s;}
.testimonial1, .testimonial2, .testimonial3, .testimonial4 {opacity:0;}
#carousel{display: block;overflow: hidden;}
#sticker{position: sticky;top: 0px;}
.no-fancy{text-decoration: none;color: inherit}
#pagevalue{display: none;}
#noBg{background: transparent;}
@keyframes procanim {from {transform: translateY(100%) scale(1);}to {transform: translateY(-1%) scale(1);}}
.processAnim{display: inline-block;transform: translateY(100%) scale(1) ;animation: procanim 0.8s ease-out forwards;}
.tile1,.tile2,.tile3,.imej1,.imej2,.imej3,.imej4,.imej5,.imej6,.imej7{opacity: 0.9;transform: translate3d(0,100px,-25px);}
.tile1{animation-delay: 0.4s;}
.tile3,.imej3,.imej4,.imej6{animation-delay: 0.2s;}
.hidthen{visibility: hidden;}
#lunges{position: absolute;width: 100vh;}
.numero{position: sticky;top:40%;font-size: 65px;font-family: "Pelita Grande Std Regular";color: rgb(255, 255, 255);width:10%;margin-bottom:-65px;}
.ecstra{position: sticky;top:0px;padding-bottom:20px;}
@media only screen and (max-width: 800px){.numero{background: black;width: 100%;top:40px;}.ecstra{padding-top:20px;background: black;}}
.accord  svg{transform: rotateZ(45deg);transition: all 0.4s;}
.accordrem  svg{transform: rotateZ(0deg) ;transition: all 0.4s;}
@keyframes brandUp{0%{opacity:0.125;transform: translate3d(0px,5px,0);}35%{opacity:0.125;transform: translate3d(2px,6px,0);}100%{opacity:1;transform: none;}}
@keyframes brandDown{0%{opacity:1;transform: none;}85%{opacity:0.125;transform: translate3d(2px,5px,0);}100%{opacity:0.125;transform: translate3d(2px,5px,0);}}
.initialOpacity{display: inline-block;will-change: opacity, transform;opacity: 0.125;transition: all 0.3s;transform: translate3d(0px,5px,0);}
.brandUp{animation: brandUp 1s ease-out forwards;}
.brandDown{transform:none;opacity:1;animation: brandDown 1s ease-out forwards;}
#lottie-player{width: auto;height: auto;}
.transition-fade {transition: 1.5s ease-in-out;transition: 0.7s ease-in-out;opacity: 1;}
@keyframes bubbler{0%{transform: scale(0) translateY(0);opacity:1;}50%{opacity:1;}80%{transform: scale(30) translateY(-20%);opacity: 1;}100%{transform:scale(0) translateY(-20%);opacity:0;}}
.stag{animation: bubbler 1.2s ease-in-out forwards;}
.stagrev{animation: bubbler 0.9s ease-in-out reverse;}
#bubble{position:absolute;right:-85px;top:-88px;background-color: black;border-color: rgb(1, 1, 1);border-width: 2px;height:200px;width:200px;border-radius: 100px;opacity:1;transform: scale(0) translateY(0);}
@keyframes menu{from {transform: translateY(10%);}to {transform: translateY(0%);}}
.animation-menu{transform: translateY(10%);animation: menu 1.2s ease-out forwards;}
.hidden-overflow{overflow: hidden;}
@keyframes hidden1{from{overflow: hidden;transform: translateY(100%);}to{transform: translateY(-5%);overflow: visible;}}
@keyframes hidden2{0%{opacity: 0;transform: translateX(15%);}50%{opacity: 1;}100%{opacity: 1;transform: translateX(0%);}}
@keyframes hidden3{0%{opacity: 0;transform: translateX(15%);}50%{opacity: 1;}100%{opacity: 1;transform: translateX(0%);}}
.hidden{transform: translateY(100%);display: inline-block;}
.hidden2{opacity: 0;transform: translateX(15%);}
.hidden3{opacity: 0;transform: translateX(15%);}
.hideBfr{transform: translateY(100%);animation: hidden1 0.5s ease-out forwards}
.hideBfr2{transform: translateY(100%);animation: hidden2 0.3s ease-out forwards}
.hideBfr3{transform: translateY(100%);animation: hidden3 0.3s ease-out forwards}
.opacityBfr{opacity: 0;transition-delay: 2.2s;transition: all 0.3s ease-out;}
.opacityAftr{animation:opace 1s 2.5s ease-out forwards;}
@keyframes r1{from{transform: rotate(0deg);}to{transform: rotate(43deg) translateX(1.5px) translateY(-2px);}}
.c1{transform-origin: top left;animation:r1 .3s  ease-out forwards;}
@keyframes r2{from{transform: rotate(0deg);}to{transform: rotate(-43deg) translateX(1.5px) translateY(2.5px);}}
.c2{transform-origin: bottom left;animation:r2 .3s  ease-out forwards;}
#not{display: none;}
.absolute{position: absolute;right:0;}
.eyedee{z-index:12;right:25px;}
body::-webkit-scrollbar {width: 0.4rem;}
body::-webkit-scrollbar-track {box-shadow: none;}
body::-webkit-scrollbar-thumb {background-color: darkgrey;outline: 1px solid slategrey;border-radius: 2px;}
#colblack{background-color: white;transition: all ease-in-out 0.7s;}
#colwhite{background-color: black;transition: all ease-in-out 0.7s;}
#party{
    position: fixed;
}
.contact-form-section .input-box input.error {
    border-bottom: 2px solid red;
    /* background: #fee; */
}
div.budget-box.error {
    border-bottom: 2px solid red;
    /* background: #fee; */
}
div.looking-box.error {
    border-bottom: 2px solid red;
    /* background: #fee; */
}
 
div.input-field-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
}
.none{
    display: none;
}
div.budget-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
}
div.looking-box label.error {
    color: red;
    font-size: 1rem;
    text-align: right;
    width: 100%;
}
.thank-you{
    position: fixed;
    top: 10%;
    right: 1%;
    background-color: #42a5f5;
    padding: 20px 25px 20px 25px;
    border-radius: 10px;
    border: 1px solid #42a5f5;
    z-index: 12;
    display: flex;
    flex-direction: row;
    align-items: center;
    transform: translateX(120%);
}
@keyframes thanks{
    0%{
        transform: translateX(120%);
    }
    10%,20%,30%{transform: translateX(0%); }
    50%{
        transform: translateX(0%); 
    }
    80%,100%{
        transform: translateX(120%);
    }
}

.thanks-anim{
    transform: translateX(120%);
    animation: thanks 15s ease-in-out;
}
.thank-you p{
    
    margin-left:15px;
    font-size:20px;
    color: #fff;
}