.boxes {
    height: 32px;
    width: 32px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    margin-top: 32px;
    -webkit-transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
}
.boxes .box {
    width: 32px;
    height: 32px;
    top: 0px;
    left: 0;
    position: absolute;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}



.boxes .box:nth-child(1) {
    -webkit-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-animation: box1 1s linear infinite;
    animation: box1 1s linear infinite;
}
.boxes .box:nth-child(2) {
    -webkit-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-animation: box2 1s linear infinite;
    animation: box2 1s linear infinite;
}
.boxes .box:nth-child(3) {
    -webkit-transform: translate(100%, 100%);
    transform: translate(100%, 100%);
    -webkit-animation: box3 1s linear infinite;
    animation: box3 1s linear infinite;
}
.boxes .box:nth-child(4) {
    -webkit-transform: translate(200%, 0);
    transform: translate(200%, 0);
    -webkit-animation: box4 1s linear infinite;
    animation: box4 1s linear infinite;
}



.boxes .box > div {
    background: #5C8DF6;
    --translateZ: 15.5px;
    --rotateY: 0deg;
    --rotateX: 0deg;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #5C8DF6;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    -webkit-transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
    transform: rotateY(var(--rotateY)) rotateX(var(--rotateX)) translateZ(var(--translateZ));
}

.boxes .box > div:nth-child(1) {
    top: 0;
    left: 0;
    background: rgb(255, 209, 1);
}
.boxes .box > div:nth-child(2) {
    background: rgb(72,75,230);
    right: 0;
    --rotateY: 90deg;
}
.boxes .box > div:nth-child(3) {
    background: rgb(230,64,177);
    --rotateX: -90deg;
}
.boxes .box > div:nth-child(4) {
    background: #DBE3F4;
    top: 0;
    left: 0;
    --translateZ: -90px;
}





@keyframes box1 {
    0%,
    50% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(200%, 0);
    }
}

@keyframes box2 {
    0%{
        transform: translate(0, 100%);
    }
    50% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}

@keyframes box3 {
    0%,
    50% {
        transform: translate(100%, 100%);
    }
    100% {
        transform: translate(0, 100%);
    }
}

@keyframes box4 {
    0%{
        transform: translate(200%, 0);
    }
    50% {
        transform: translate(200%, 100%);
    }
    100% {
        transform: translate(100%, 100%);
    }
}








.pre-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #222;
    z-index: 9999;
    min-height: 100vh;
    font-family: Roboto, Arial;
    color: #ADAFB6;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgb(249, 251, 255);
  }
  
  .load-icon { 
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }




html, body{
    overflow-x: hidden;
}

.navbar-brand{
    padding-top: 10px;
    font-family: 'Montserrat';
    font-weight: 600;
    color: rgb(43,34,89);
    text-decoration: none;
}

.logo{
    margin-top: -5px;
    margin-right: 4px;
}

.navbar-nav{
    margin-top: 10px;
    font-family: 'Montserrat';
    font-size: 13px;
    font-weight: 600;
}

.nav-link{
    color: white;
    margin-right: 20px;
}

.nav-link:hover{
    color: rgba(255, 255, 255, 0.445);
    margin-right: 20px;
}


.menu{
    border: none;
    background: rgba(72,75,230);
    width: 50px;
    height: 50px;
    font-size: 20px;
    color: rgb(255, 255, 255);
    margin-right: 20px;
    border-radius: 50px;
}

/* ==== on mobile ==== */
@media (max-width: 600px) {
    
    
    
    .pc{
        display: none;
    }
    .refandres{
        font-family: 'Montserrat';
        margin-left: 20px;
        margin-right: 20px;
    }
    .menu{
        margin-top: 5px;
        border: none;
        background: none;
        font-size: 25px;
        color: rgb(160, 168, 175);
        font-weight: 300;
    }
    .navbar{
        padding-top: 20px;
        padding-left: 25px;
        padding-right: 20px;
    }
    
    .navbar-toggler{
        height: 40px;
        width: 55px;
        padding-right: 15px;
        border: none;
    }
    .main-text{
        padding-top: 120px;
        font-family: 'Montserrat';
    }

    .main-text button{
        border: none;
        background: rgb(72,75,230);
        width: 160px;
        height: 40px;
        border-radius: 50px;
        font-family: 'Montserrat';
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: white;
        margin-top: -25px;
    }

    .main-text h3{
        font-size: 32px;
        font-weight: 800;
        line-height: 33px;
        color: rgb(38, 29, 86);
    }

    .doc-img{
        width: 120px;
        padding-top: 40px;
        margin-bottom: -100px;
    }

    .mob-cen{
        text-align: center;
    }
    .min-menu{
        padding-top: 230px;
        padding-bottom: 200px;
        width: 100%;
        margin: auto;
        font-size: 28px;
        font-family: 'Montserrat';
    }
    .min-menu button{
        background: rgb(160, 168, 175);
        width: 200px;
        background-color:rgb(72,75,230);
        font-weight: 700;
        border: none;
        color: rgb(255, 255, 255);
        border-radius: 50px;
        font-size: 18px;
        height: 50px
    }

    .payment-card1{
    
        padding-bottom:  20px;
        background: rgb(255, 255, 255);
        box-shadow: 0 0 10px 0 rgb(228, 231, 233);
        margin-bottom: 20px;
        
    }
    .payment-card2{
        padding-bottom:  20px;
        background: white;
        box-shadow: 0 0 10px 0 rgb(228, 231, 233);
    }
    

  }



  /* ==== on pc ==== */
@media (min-width: 600px) {

    .payment-card1{
    
        padding-bottom:  20px;
        background: rgb(255, 255, 255);
        box-shadow: 0 0 10px 0 rgb(228, 231, 233);
        margin-left: 200px;
        margin-right: 5%;
        
    }
    .payment-card2{
        padding-bottom:  20px;
        background: white;
        box-shadow: 0 0 10px 0 rgb(228, 231, 233);
        margin-right: 200px;
        margin-left: 5%;
    }

    
    .min-menu button{
        background: rgb(160, 168, 175);
        width: 200px;
        background-color:rgb(72,75,230);
        font-weight: 700;
        border: none;
        color: rgb(255, 255, 255);
        border-radius: 50px;
        font-size: 18px;
        height: 50px
    }

    .min-menu{
        padding-top: 130px;
        padding-bottom: 200px;
        width: 50%;
        margin: auto;
        font-size: 40px;
        font-family: 'Montserrat';
    }
    .get-in{
        padding-left: 130px;
        padding-right: 130px;
    }
    .mobile{
        display: none;
    }
    .main-text{
        padding-top: 180px;
        font-family: 'Montserrat';
    }

    .main-text button{
        border: none;
        background: rgb(72,75,230);
        width: 160px;
        height: 40px;
        border-radius: 50px;
        font-family: 'Montserrat';
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.5px;
        color: white;
    }

    .main-text h3{
        font-size: 50px;
        font-weight: 700;
        line-height: 45px;
        color: rgb(38, 29, 86);
    }

    .navbar{
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 40px;
        font-family: 'Montserrat';
    }
    
    .navbar-toggler{
        height: 40px;
        width: 55px;
        padding-right: 15px;
        border: none;
    }


    .main{
        background-image: url('../imgs/bgmain.png');
        background-size: cover;
        height: 700px;
    }
  

    .getstarted{
        margin-top: -30px;
        border-radius: 50px;
        width: 120px;
        height: 40px;
        border: solid white 2px;
        background: transparent;
        color: white;
        font-size: 13px;
        font-weight: 600;
        transition: 0.5s;
    }

    .getstarted:hover{
        margin-top: -30px;
        border-radius: 50px;
        width: 120px;
        height: 40px;
        border: solid white 2px;
        background: transparent;
        background-color: white;
        color: rgb(72,75,230);
        font-size: 13px;
        font-weight: 600;
    }





}


/* =====  on screen size 110% zoom ====== */
@media (max-width: 1300px) {
    .navbar-nav{
        margin-top: 10px;
        font-family: 'Montserrat';
        font-size: 12px;
        font-weight: 600;
    }
    
    .navbar{
        padding-top: 20px;
        padding-left: 40px;
        padding-right: 0px;
        font-family: 'Montserrat';
    }
    .navbar-toggler{
            height: 40px;
            width: 55px;
            padding-right: 15px;
            border: none;
        }
    .getstarted{
            margin-top: -30px;
            border-radius: 50px;
            width: 110px;
            height: 35px;
            border: solid white 2px;
            background: transparent;
            color: white;
            font-size: 12px;
            font-weight: 600;
        }
        
}




/* =====  hide nav-links zoom ====== */
@media (max-width: 1218px) {
    #Pcmenu{
        display: none;
    }

    .main{
        background: rgb(255, 255, 255);
        height: 720px;
    }

    .menu{
        display: all;
    }
}

@media (min-width: 1218px) {

    .menu{
        display: none;
    }

}



.three-rows{
    font-family: 'Montserrat';
    margin-bottom: 120px;
}

.three-rows h4{
    font-weight: 700;
    color: rgb(38, 29, 86);
    font-size: 17px;
}

.three-rows p{
    color: rgb(128, 133, 146);
    font-size: 15px;
}


.asin-refresh{
    font-family: 'montserrat';
    padding-bottom: 200px;
}

.asin-refresh h3{
    font-weight:600;
    font-size: 40px;
    color: rgb(43,34,89);
    margin-bottom: 20px;
}

.asin-refresh p{
    margin-bottom: 20px;
    color: rgb(160, 168, 175);
    font-family: 'Montserrat';
}

.asin-refresh button{
    border: none;
    background: rgb(72,75,230);
    width: 160px;
    height: 40px;
    border-radius: 50px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: white;
}




.asin-restart{
    font-family: 'montserrat';
    padding-bottom: 200px;
    padding-top: 200px;
}

.asin-restart h3{
    font-weight:600;
    font-size: 40px;
    color: rgb(43,34,89);
    margin-bottom: 20px;
}

.asin-restart p{
    margin-bottom: 20px;
    color: rgb(160, 168, 175);
    font-family: 'Montserrat';
}

.asin-restart button{
    border: none;
    background: rgb(72,75,230);
    width: 160px;
    height: 40px;
    border-radius: 50px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: white;
    margin-bottom: 40px;
}



.yellowbg button{
    width: 50px;
    height: 50px;
    border: none;
    background: rgb(255, 209, 1);
    border-radius: 50px;
    margin-left: -230px;
}

.yellowbg h3{
    margin-top: -40px;
    font-weight: 700;
    color: rgb(38, 29, 86);
    font-family: 'Montserrat';
    margin-bottom: 80px;
}

.fourlister p{
    margin-top: 25px;
    font-family: 'Montserrat';
    font-size: 13px;
    color: rgb(160, 168, 175);
}



.refandres{
    font-family: 'Montserrat';
}


.refandres h4{
    font-family: 'Montserrat';
    font-weight: 700;
    color: rgb(38, 29, 86);
}


.refandres p{
    font-family: 'Montserrat';
    color: rgb(160, 168, 175);
    font-size: 14px;
}



.refbtn{
    background: rgb(255, 209, 1);
    height: 40px;
    width: 130px;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}

.resbtn{
    background: rgb(72,75,230);
    height: 40px;
    width: 130px;
    border: none;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    color: white;
}



.social{
    background-color: rgb(245, 245 , 247);
    padding-top: 55px;
    padding-bottom: 55px;
}

.social i{
    color: rgb(193, 196, 205);
    font-size: 30px;
    transition: 0.5s;
}

.soc{
    width: 400px;
}

.social i:hover{
    color: rgb(128, 133, 146);
    font-size: 32px;
}

.footer{
    padding-top: 50px;
    padding-bottom: 30px;
    font-family: 'Montserrat';
}

.footer1 h4{
    font-weight: 600;
    font-size: 19px;
    padding-left: 10px;
    padding-top: 4px;
    color: rgb(38, 29, 86);
}

.footer1 p{
    font-size: 15px;
    color: rgb(160, 168, 175);
    margin-top: 10px;
    font-weight: 500;
    
}


.footer1 h5{
    font-size: 15px;
    color: rgb(38, 29, 86);
    font-weight: 400;
}



.footer2 p{
    font-size: 13px;
    color: rgb(128, 133, 146);
    margin-top: 10px;
    font-weight: 300;
    
}






.group 			  { 
    position:relative; 
    margin-bottom:45px; 
  }
  input 				{
    font-size:18px;
    padding:10px 10px 10px 5px;
    display:block;
    width:300px;
    border:none;
    border-bottom:1px solid rgb(160, 168, 175);
    background: transparent;
  }
  input:focus 		{ outline:none; }
  
  /* LABEL ======================================= */
  label 				 {
    color:#999; 
    font-size:18px;
    font-weight:normal;
    position:absolute;
    pointer-events:none;
    left:15px;
    top:10px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  
  /* active state */
  input:focus ~ label, input:valid ~ label 		{
    top:-20px;
    font-size:14px;
    color:#5264AE;
  }
  
  /* BOTTOM BARS ================================= */
  .bar 	{ position:relative; display:block; width:300px; }
  .bar:before, .bar:after 	{
    content:'';
    height:2px; 
    width:0;
    bottom:1px; 
    position:absolute;
    background:rgb(72,75,230); 
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
  }
  .bar:before {
    left:50%;
  }
  .bar:after {
    right:50%; 
  }
  
  /* active state */
  input:focus ~ .bar:before, input:focus ~ .bar:after {
    width:50%;
  }
  
  /* HIGHLIGHTER ================================== */
  .highlight {
    position:absolute;
    height:60%; 
    width:100px; 
    top:25%; 
    left:0;
    pointer-events:none;
    opacity:0.5;
  }
  
  /* active state */
  input:focus ~ .highlight {
    -webkit-animation:inputHighlighter 0.3s ease;
    -moz-animation:inputHighlighter 0.3s ease;
    animation:inputHighlighter 0.3s ease;
  }
  
  /* ANIMATIONS ================ */
  @-webkit-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @-moz-keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }
  @keyframes inputHighlighter {
      from { background:#5264AE; }
    to 	{ width:0; background:transparent; }
  }





  .blu-btn{
    border: none;
    background: rgb(72,75,230);
    width: 160px;
    height: 40px;
    border-radius: 50px;
    font-family: 'Montserrat';
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: white;
    margin-top: -25px;
  }


  .contact{
      padding-top: 60px;
      padding-left: 30px;
      padding-right: 30px;
  }








  .title{
      font-size: 30px;
      font-family: 'Montserrat';
      font-weight: 700;
      color: rgb(43,34,89);
  }



.footer1 a{
    color: rgb(128, 133, 146);
    
}

.footer1 i{
    font-size: 20px;
    margin-right: 20px;
}

.footer1{
    margin-top: 15px;
}

.para{
    font-family: 'Montserrat';
    color: rgb(128, 133, 146);
}










.main-menu{
    position: fixed;
    background: rgb(255, 255, 255);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transition: 2s;
}

.close-btn{
    float: right;
    width: 50px;
    height: 50px;
    font-family: 'Montserrat';
    font-weight: 500;
    font-size: 20px;
    color: white;
    background: rgb(72,75,230);
    border: none;
    border-bottom-left-radius: 20px;
    box-shadow: 0 0 10px 0 rgb(207, 207, 207);
}




.title2{
    margin-top: 10px;
    font-size: 17px;
    font-family: 'Montserrat';
    font-weight: 700;
    color: rgb(38, 29, 86);
}


.fourlister2 p{
    margin-top: 10px;
    font-family: 'Montserrat';
    font-size: 13px;
    color: rgb(160, 168, 175);
}






.payment-card1 h3{
    font-family: 'Montserrat';
    font-size: 20px;
    font-weight: 700;
    padding-top: 15px;
    color: rgb(43,34,89);
}

.payment-card1 sup{
    font-family: 'Montserrat';
    font-size: 29px;
    font-weight: 500;
    color: #14eebb;
    
}


.ps1{
    font-family: 'Montserrat';
    font-size: 12px
}

.ps2{
    font-family: 'Montserrat';
    font-size: 17px
}


.payment-card2 h3{
    font-family: 'Montserrat';
    font-size: 20px;
    font-weight: 700;
    padding-top: 15px;
    color: rgb(43,34,89);
}



.text-s{
    color: rgb(255, 209, 1);
}


.buy-btn-1{
    border: none;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 700;
    background-color: rgb(255, 209, 1);
    width: 100%;
    height: 40px;
    border-radius: 50px;
    color: white;
}






.payment-card2 h3{
    font-family: 'Montserrat';
    font-size: 20px;
    font-weight: 700;
    padding-top: 15px;
    color: rgb(43,34,89);
}

.payment-card2 sup{
    font-family: 'Montserrat';
    font-size: 29px;
    font-weight: 500;
    color: #14eebb;
    
}


.ps2{
    font-family: 'Montserrat';
    font-size: 12px
}

.ps2{
    font-family: 'Montserrat';
    font-size: 17px
}


.payment-card2 h3{
    font-family: 'Montserrat';
    font-size: 20px;
    font-weight: 700;
    padding-top: 15px;
    color: rgb(43,34,89);
}



.text-s2{
    color: rgb(72,75,230);
}


.buy-btn-2{
    border: none;
    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 700;
    background-color: rgb(72,75,230);
    width: 100%;
    height: 40px;
    border-radius: 50px;
    color: white;
    cursor: pointer;
}