:root {
 --btTheme:#e12f92;
 --whiteColor:#fff;
 --fontFamily:"Sniglet", sans-serif;;
}
*{margin: 0;padding: 0;}
html,body{font-size: 18px; font-family: "Montserrat", sans-serif; color: #000; letter-spacing: 0.5px;}
img{height: auto;}
a{text-decoration: none;}
header{background: #fff; padding: 10px 0; position: sticky;  top: 0; z-index: 999; border-bottom: 1px solid #ddd;}
ul{padding-left: 0;}
ul,li{margin-bottom: 0; list-style: none;}
nav ul li{list-style: none;}
nav ul li a{color: #000; display: block; padding: 15px 25px;font-family: var(--fontFamily); font-size: 18px; text-decoration:none; line-height:1;  position:relative;  z-index:1;  text-align: center;   -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-image: linear-gradient( to right, #23abd4, #23abd4 50%,  #000 50%);  background-size: 200% 100%;  background-position: -100%;   transition: all 0.3s ease-in-out;}
nav ul li a:before{display:block;content:''; width:0;height:2px; bottom:5px; left:0;bottom:-3px; z-index:0; position:absolute; background:#23abd4; transition: all 0.3s ease-in-out;}
nav ul li a:hover{background-position: 0%;}
nav ul li a:hover:before{width: 100%;}
nav ul li a.startBtn:before{display: none;}
nav ul li a.startBtn, .btnprimary, .btnTheme{overflow: hidden; background: var(--btTheme);; color: #fff;border-radius:20px; -webkit-text-fill-color:inherit; transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
nav ul li a.startBtn:after, .btnprimary:after, .btnTheme:after{content: "";position: absolute;top: 0; left: 100%;width: 100%;height: 100%; background: #23abd4; transition: .5s; z-index: 2;}
nav ul li a.startBtn:hover:after, .btnprimary:hover:after, .btnTheme:hover:after{left:0;}
nav ul li a span, .btnprimary span, .btnTheme span{position: relative;z-index: 3;}
nav ul li a.startBtn:hover{ border-radius: 10px; }
.homeTitle{font-family: var(--fontFamily); font-size: 38px; position: relative; }
.homeWelcome{padding: 60px 0;}
.homeWelcome p{font-size: 22px; font-weight: 300;}
.btnprimary{display: inline-block; padding:12px 30px; font-size: 18px; position: relative; font-family: var(--fontFamily);}
.btnprimary:hover{color: #fff;}
.rocketIcon img, .animationStar img{width: 80px;}
.rocketIcon {display: inline-block; position: absolute;  bottom: 56px;  left: -31px;  animation: moveLeftRight 2s infinite ease-in-out;}
.animationStar { display: inline-block;  position: absolute;  top: 0px;  left: -11px;  animation: moveUpDown 1.5s infinite ease-in-out;}
.btnTheme{position: relative;}
.pinkbg {
  background: #e12f92!important;
}


@keyframes moveLeftRight {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

@keyframes moveUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.animationHome{position: absolute; width: auto;}
.animationStar1 {left:-0px; top:-120px;  animation: floatUp 1.2s infinite ease-in-out;}

.animationStar2 {right: -50px; top:-150px; animation: floatDown 1.5s infinite ease-in-out;}

.animationStar3 {bottom: -60px;left:0px; animation: floatDiagonal1 2s infinite ease-in-out;}

.animationStar4 {bottom: 50%;right:-70px;  animation: floatDiagonal2 2.2s infinite ease-in-out;}

/* Animations */
@keyframes floatUp {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes floatDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(10px); }
  100% { transform: translateY(0); }
}

@keyframes floatDiagonal1 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(10px, -10px); }
  100% { transform: translate(0, 0); }
}

@keyframes floatDiagonal2 {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(-10px, 10px); }
  100% { transform: translate(0, 0); }
}
.howToWorkHome{padding: 80px 0; background: #5896c1; color: #fff; overflow: hidden;}
.howToWorkHome .iconBlock{display:inline-block; background: #fff; border-radius:100%; padding: 25px; width: 200px; height: 200px;}
.roundTitle{font-size: 22px; font-family: var(--fontFamily);}
.howToWorkHome p{font-size: 16px;}
.howToWorkHome .worksRound{padding: 0 25px;}
.homeBeoforeAfter{background: #feeedf; padding: 60px 0;}
.homeBeoforeAfter p{color: var(--btTheme);; font-size: 18px;}

.homeBeoforeAfter .afterTitle{font-size: 24px; font-family: var(--fontFamily);}
.homeBeoforeAfter .card{padding:25px 8vh; border-radius:25px;}
.imgBlockafter img{height: 50vh; }
.roundBlock img{width: 50px;}
.roundBlock.round1 img{ animation: zoom1 1.5s infinite ease-in-out;}
@keyframes zoom1 { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); }}

.roundBlock.round2 img{  animation: zoom2 3s infinite ease-in-out;}
@keyframes zoom2 { 0%, 100% { transform: scale(1); }  50%      { transform: scale(1.15); }}


.roundBlock.round3 img{  animation: zoom2 4s infinite ease-in-out;}
@keyframes zoom3 { 0%, 100% { transform: scale(1); }  50%      { transform: scale(1.5); }}


.roundBlock.round4 img{ animation: zoom4 2.5s infinite ease-in-out;}
@keyframes zoom4 { 0%, 100% { transform: scale(1.2); } 50% { transform: scale(0.9); }
}
.homeTesimonial{background: var(--btTheme);; padding: 60px 0; color: #fff;}
.tesTopText{font-size: 22px; font-family: var(--fontFamily);}
.homeTesimonial .card{color: #000; border-radius:20px; padding: 30px; line-height: 28px; font-size: 18px; font-weight: 300;}
.homeTesimonial .card .testTitle{color: var(--btTheme); font-family: var(--fontFamily); font-size: 24px;}
.homeTesimonial .card .testIcon img{width: 70px;}
.homeTesimonial .card .testIcon{position: absolute; top:-25px; right:20px;}
.homeTesimonial ul{margin:0 -15px;}
.homeTesimonial ul li{padding: 0 15px; position: relative;}
.icon1 {
  animation: rotate60 2s infinite ease-in-out;
}
@keyframes rotate60 {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(45deg); }
}

.icon2 {
  animation: bounceRotate60 2.5s infinite ease-in-out;
}
@keyframes bounceRotate60 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(60deg); }
}

.icon3 {
  animation: flipX60 3s infinite ease-in-out;
}
@keyframes flipX60 {
 0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-15px) rotate(90deg); }
}

footer{background: #feeedf; padding: 50px 0;}
footer h4{font-size: 24px; color: var(--btTheme); font-family: var(--fontFamily);}
footer .ftpNav li{margin-bottom: 14px;}
footer .ftpNav a{color: #000;  text-decoration:none; line-height:1;  position:relative;  z-index:1;    -webkit-background-clip: text;  -webkit-text-fill-color: transparent; background-image: linear-gradient( to right, #23abd4, #23abd4 50%,  #000 50%);  background-size: 200% 100%;  background-position: -100%;   transition: all 0.3s ease-in-out;  display: block;}
footer .ftpNav a:hover{background-position: 0%; padding-left:6px;}
footer .ftpNav img{float: left; height: 40px; width: 40px }
footer .ftpNav li div{float: left; width: calc(100% - 50px); }
.ftpSocialIcon a{width: 60px; height: 58px; display: inline-block; margin-right: 10px;}
.ftpSocialIcon a.faceBook{background: url(../images/socialIcons.png)left top no-repeat;}
.ftpSocialIcon a.faceBook:hover{background: url(../images/socialIcons.png)left bottom no-repeat;}
.ftpSocialIcon a.instragram{background: url(../images/socialIcons.png)right top no-repeat;}
.ftpSocialIcon a.instragram:hover{background: url(../images/socialIcons.png)right bottom no-repeat;}
@media(max-width:990px){ 
.howToWorkHome .worksRound{padding: 0;}
nav  {padding: 0;  margin: 0;  width: 100%;  height: 100vh; top:0; background-color: #fff;  left: -100%;  position: fixed;  -webkit-transition: all .5s ease-in-out;  -moz-transition: all .5s ease-in-out;   -o-transition: all .5s ease-in-out;    transition: all .5s ease-in-out; opacity:0; z-index: -9999; visibility:hidden; background: #fff;}
nav.showMainNav { visibility: visible; opacity: 1; z-index: 99999; left:0; top:0; }
nav .navHeader { padding: 10px 0;}
nav .navHeader .btnNavToggle {z-index: 99;  height: 48px;   display: inline-block;  text-align: center;   border: none;  position: absolute;  right: 14px;  top: 15px;}
nav ul li {  width: 100%;  border-top: 1px solid #ddd;}
.logo{display: flex; justify-content: space-between;} 
.logo .logoW{width: 80px;} 
.btnNavToggle {background: none; border:none;} 
nav ul li a.startBtn{margin-top: 15px;} 
nav ul{padding: 0 15px;}
nav ul li a{padding: 20px;}
/*nav end here*/  
.homeTitle{font-size: 32px;}
.homeWelcome p, .homeBeoforeAfter .afterTitle, .homeTesimonial .card{font-size: 18px;}
.homeTesimonial .card{line-height: 28px;}
.howToWorkHome .iconBlock{width: 150px; height: 150px;}
.animationStar1, .animationStar3{left:-60px;}
.animationStar4{right:-63px;}
.imgBlockafter img{height: auto; }
    .mobileLogin{display: flex; align-items: center;}
    .mobileLogin .startBtn {overflow: hidden;  background: var(--btTheme);  color: #fff;  border-radius: 20px; padding: 12px 20px;
  font-family: var(--fontFamily);  font-size: 16px; margin-right: 10px;}
  .mobileLogin .dropdown-menu{ padding: 10px;}
  .mobileLogin .dropdown-menu a{ color: #000; font-size: 16px;}


}
@media(max-width:766px){ 
    .overFlowHidden{overflow-x: auto;}
    .homeTesimonial .card{font-size: 18px; line-height: 26px; padding: 15px;}
    .homeTitle{font-size: 24px;}
    .homeWelcome p, .homeBeoforeAfter .afterTitle, .homeTesimonial .card, .tesTopText, .footer .ftpNav a, footer .ftpNav li, .copyText, .homeBeoforeAfter p {font-size: 16px;}
    .animationStar1, .animationStar3{left:-10px}
    .animationStar2, .animationStar4{right:0;}
    .overFlowHidden{display: block; overflow-x: auto;  scrollbar-width: none;    -ms-overflow-style: none;}
    .overFlowHidden::-webkit-scrollbar { display: none;}
    .homeBeoforeAfter .card{padding: 25px 20px;}
    .animationStar4{bottom: 0%;}
       .homeTesimonial ul{margin: 0 -5px; width: 250%;}
    .homeTesimonial ul li{padding: 0 5px;}
    .roundTitle{font-size: 18px;}
    .imgBlockafter img{height: 40vh;}

 
}



.color-palette {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
  flex-wrap: wrap;
}

.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border 0.2s;
}

.color-swatch.selected {
  border-color: #000;
}
.draggableBlock canvas{width: 100% !important; height:auto !important;}