body { background:#0f1216; color:#e6e6e6; }




/* Scrollbar */
::-webkit-scrollbar {
    width: 5px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-primary);
}

   .rainbow-header .container{
                  max-width: 100% !important;
    padding: 0 5% !important;
    max-height: 70px !important;
    min-height: auto;
    }
   .formy-box .card{    height: auto;
    padding-bottom: 5vh;}
   .right-half{padding: 0 5% !important;
    height: 100vh;
    vertical-align: middle;
    justify-content: center;
    display: flex;
    position: relative;}
   .right-half h2, .h2{    font-size: 5.5vh; padding:0 12%;}
   .container-fluid{padding-right: var(--bs-gutter-x, 0rem);
    padding-left: var(--bs-gutter-x, 0rem);}
    .card {    background: #ffffff00;
    border: 0 solid #222a33;
    border-radius: 1.5rem;
    padding: 0rem 0rem;}
    .subby{font-size:15px; font-weight: 200;}
    .form-side{         background: #fff;
    height: auto;
    position: relative;
    width: 100%;
    padding-top: 65px;
    transition:
ease-in-out;
    margin-bottom: 0;
    /* padding-left: 5%; */
    /* padding-right: 5%; */
    margin-top: 0;
    padding-bottom: 8%;
    min-height: 100vh;
    padding: 100px 10% 2% 10%;}
    .vid_containy_2{display: none;}
    .active-light-mode .logo-dark{display: block;}
    .active-light-mode .logo-light{display:none;}
    .active-light-mode .wizard-nav{background: #292929;}
    .vid-side{ display: block !important;    WIDTH: 100%;float: right;}
    .active-light-mode .form-side{background:#111111ed !important; transition: ease-in-out;}
    .active-light-mode #memberForm .form-label{ color: #ffffff !important;}
    .active-light-mode .subby{color:#ffffff;}
    .terms { border: 1px solid #eee;
    padding: 3% 10%;
    background: #fbfbfb;}
    .toast_notification{position: fixed;left:40%; top:90px; color: #3EB75E}
    .terms input[type=checkbox] ~ label, input[type=radio] ~ label {    color: #0d6efd;
    font-size: 13px;
    width: 100%;
    text-align: left;}
    #submitBtn{
        width: 100%;
    /*padding: 8% 2%;*/
    margin: 0;
    background: #3c97ff;
    font-size: 13px;
    min-width: 110px;}
    #reviewBtn{
        background: #eee;
    font-size: 12px;
    color: #777;
    padding: 2% 5%;
    width: 100%;}
.formy .form-select{height:30px !important;font-size: 13px;}
    .float-left{float:left;padding: 0;}
    .float-right{float:right;}

    .help {
    color: #9aa4af;
    text-align: left;
    margin-top: 1rem;}
    .req { color:#ff6b6b; margin-left:4px; }
    .step { display:none; }
    .step.active { display:block; }
    .progress { height: 6px; background:#0f141a; margin-bottom: 3rem;}
    .progress-bar { background:#8b5cf6; }
    .wizard-nav .btn {
        min-width: 110px;
        min-width: 110px;
        padding: 1rem;
        font-size: 14px;
    }
    .step .help{ font-size:12px;}
    .form-control{    height: 30px;     font-size: 13px;line-height: 1.8;color: #888888;}
    .wizard-nav{
        padding: 1rem 2%;
    width: 50%;
    position: fixed;
    bottom: 0;
    left: 0;
        right: 0;
        z-index: 99;
    border-top: 1px solid #98989824;
    background: #fff;}

    .help-box{max-height: 150px; overflow:auto; text-align:left;}
    #prevBtn{float: left;}
    #nextBtn{float: right;}
    .mini-max{max-width: 450px; margin: auto; width:100%;}
    #memberForm .col-md-6{ padding: 2% 1%;}
    .formy-box{  max-width: 400px !important;
    height: auto;
    margin: 0 auto 8rem !important;;}
    .margin_none{margin: 0 !important;}
    .formy-box .mb-4 {
    margin-bottom: 1rem !important;}
    #memberForm .rainbow-section-gap {
            padding:4vw 0% !important;
    }

    .invalid-feedback {
    font-size: 12px;
    text-align: left;
}
    .formy .card-body{padding:0rem 0rem;}
    .formy .button_groupy{text-align: center;}
    .form-window .col-lg-6 {padding: 0 !important; width:50%;}

    .formy .form-window .container{    MARGIN: 0;
    width: 100%;
    max-width: 1920PX;padding: 0 0 0%;display: contents; min-height: fit-content;position: relative;}
    .formy .rainbow-brand-area{padding:4.5vw 0 0!important;}
    .form-window{margin-top:0vw;}
    .vid_containy{
        max-width: 420px;
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 0 2vh;
    }

    #memberForm .form-label {
    margin-bottom: 0.5rem;
    color: #444;
    text-align: left;
    width: 100%;
    font-size: 13px}

    input[placeholder]{
            font-size: 13px;
    color: #999;
    }
textarea.form-control{min-height:100px;}
    .formy-container{height: 100%;
    overflow: hidden;

        scrollbar-gutter: stable both-edges;
            scrollbar-width: thin;
            padding-bottom: 10%;
        max-width: 450px;
    margin: auto;
        padding-right: 2rem;
    }

    .formy-container:hover{ height: 100%;
overflow-y: visible;
    max-height: 62vh;}

    .formy_title{     /* max-width: 400px !important; */
    margin: auto;
    padding: 2% 2% 0 !important;max-width: 450px;
    margin: auto;}

    .vid-side {

    float: right;
    margin-top: 65px;

        margin:180px auto 0;}

    @media only screen and (max-width: 993px) {
        .vid-side {
            WIDTH: 100%;
            float: right;
            padding:0 5%;
        }
    }

@media only screen and (max-width: 768px){


}
   @media only screen and (max-width: 600px){
.home .rainbow-header.sticky{display: none;}
       .section-title .subtitle {margin-bottom: 25px;}
       .termy{ padding: 0 0% !important;}
       .termy h1, .h2 {padding-left: 0 !important;}
       .termy .text-muted{padding: 0 0% !important;}
       #terms .p-4{padding-left: 0 !important; padding-right: 0 !important;}
        #privacy .p-4{padding-left: 0 !important; padding-right: 0 !important;}
       .termy h1, .h2 {font-size: 3rem;margin-top: 10rem;}

       .toast_notification {
    position: fixed;
    /* left: 40%; */
    top: 70px;
    color: #3EB75E;
    width: 95%;}

       .get_started .icon-circle {position: absolute; top:0; right:0;}
.form-window .col-lg-6{width:100%;}

       .grecaptcha-badge{
           display: none !important;}
      button.view-modal {margin-right: -6vh !important; }
       .form-side{width: 100%; min-height: fit-content; overflow-y: hidden; left:0;    padding: 20% 2%;}
       .vid-side{display: none;}
       .vid_containy_2{display: block; margin: auto; padding:5% 13%;}
        .h2{font-size: 3.75vh;}
        .formy .card-body{padding: 0rem 6%;}
         .formy-container{ max-height: fit-content;margin-bottom: 2rem;}
         .wizard-nav {
    padding: 2rem 5%;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    border-top: 1px solid #eee;}
         .right-half{display: none;}
         .formy-box{    margin: 0 auto 10rem !important;}
         .step{    height: auto;position: relative;}
.formy .form-window .container{ padding:0 0 5rem !important; height: auto;  margin-bottom: 0 !important;}
.formy-container:hover {max-height: fit-content;}
.my_switcher {display: none;}
.rainbow-back-top{display: none;}

   /*------------GETTING STARTED UNDER 600PX--------------------------------------*/
           .get_started .help{width: 100%;}
           .get-wiz-big, .container {padding: 0 2% !important;}
           .get_started .get_wiz .p-5 {padding: 3rem 1rem !important;}
           .get_started section {padding-top: 0 !important;}
           .get_started .mini-max{
               position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                z-index: 8;
                background: #333 !important;
                border-radius: 0 !important;
                padding: 3% 5% !important;}
       .get_started section {
        margin-bottom: 10vh;}
       .frosty {
    padding: 3rem 2rem 1rem !important;}
       .get_started #prevBtn {
    height: 50px;}

   }
/*------------END - - GETTING STARTED UNDER 600PX--------------------------------------*/
        @media only screen and (max-width: 1024px){
           .container {
               max-width: 100%;
               padding: 0 5%;
           }
            .formy_title {
                padding: 3% 10% 0;
                margin: 0;}

         }

.thankyou main{min-height: auto;    padding: 0 5%;}

   .thank_container {

      color: #e6e6e6;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      text-align: center;
      font-family: 'Inter', sans-serif;
    }
    .thank-box {
      background: #161d24;
      border: 1px solid #222a33;
      border-radius: 1rem;
      padding: 3rem 2rem;
      max-width: 500px;
      box-shadow: 0 0 30px rgba(0,0,0,0.4);
    }
    .thank-box .theme-gradient {
      background: linear-gradient(90deg,#8b5cf6,#06b6d4);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .thank-box .btn-main {
         background: linear-gradient(90deg, #8b5cf6, #06b6d4);
    border: none;
    color: white;
    font-weight: 300;
    border-radius: 14px;
    padding: 0.6rem 1.6rem;
    height: 50px;
    line-height: 3.5rem;
    font-size: 15px;
            position: relative;
    overflow: hidden;
        width:90%;
    }

/*-----------------------------------GETTING STARTED -----------------------------*/
    .get_started .wizard-steps { display:none; }
    .get_started .wizard-steps.active { display:block; }
    .get_started .icon-circle { width:48px; height:48px; border-radius:999px; display:grid; place-items:center; }
    .get_started .step-bullets li {
        margin-bottom: 0rem;
    color: #fff;
    margin-top: 0px;}
    .get_started .mini-help { font-size:1.5rem; opacity:.85; }
    .get_started .copy-note { font-size:.85rem; opacity:.8; }
    .get_started .shadow-soft { box-shadow: 0 12px 30px rgba(0,0,0,.12); }
    .get_started .progress { height:8px; }
    .get_started .req-check { transform:scale(1.1); }
    /* Button alignment */
    .get_started .card-cta .btn { min-width: 170px; }
    .get_started .mini-max {
    max-width: 100%;
    margin: auto;
    width: 100%;
    background: rgba(0, 0, 0, 0.2); padding: 2%; border-radius: 8px;}
    /* Use theme “btn-default” look-and-feel consistently */
    .get_started .btn-default-outline { background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff; }
    .get_started .btn-default-outline:hover { border-color:#fff; color:#fff;}
    .get_started section{}
    .get_wiz{margin:auto;}
    .get-wiz-big{    margin: 0rem auto;
    padding: 0 5%; min-height: auto;}
    .get_started .toast_notification{
        position: fixed;
    left: 40%;
    top: 0;
    color: #3EB75E;
    display: inline-table;}
    .get_started .header-default.header-transparent{top:0;    position: static;}
    .get_started #prevBtn {
    float: left;
    padding: 2% 5%;
    border-radius: 6px;}
    .get_started p{margin: 0 0 10px; font-size: 14px;}
    .get_started ul {}
    .get_started h2,.h2{    font-size: 3.5rem;}
.get_started .form-check{padding-left:2px;margin-top: 1.5rem !important;}
        .frosty{background: #ffffff0d;
    border-radius: 12px;padding: 3rem 3rem 2rem !important;}
        .get_started .wizard-steps .gap-2{gap:1rem !important;}
        .progress_mini{    font-size: 0.94rem !important;
    /* position: absolute; */
    right: 5%;
    text-align: right;
    width: 100%;
    margin-top: 10px;}
        .get_started .form-check-label{color: aquamarine;}
        .copy-btn{    font-size: 1.4rem;
    text-transform: lowercase;
    font-weight: 100;}
        .get_started .list-unstyled .gap-2{gap: 2rem !important;    font-size: 15px; color: #fff;}

        .get_started .page-wrapper{overflow-y: auto; height: 100vh;}
        .get_started .get_wiz .p-5{padding: 3rem 5rem ;}

        .toast-body {
    padding: 0.75rem;
    word-wrap: break-word;
    text-align: center;
    font-size: 12px;
    margin: auto;
    width: 100%;
        color: #ffffff;
        }
        .toast{background: #059dff;}

        .thank-box .btn-main img{    position: absolute;
    top: 0;
    right: 0;
    width: 50px;}

        .active-light-mode .step-bullets li{color: #333 !important;}
         .active-light-mode  .form-check-label{color: #00b679;}
         .active-light-mode .mini-max{background: rgb(0 0 0 / 6%) !important;}
         .active-light-mode #prevBtn{color: #999; border-color: #ccc;}


         /*------------------------TERMS AND CONDITIONS-------------------------*/

.termy{        padding: 0 5%;
    max-width: 1400px;
    margin: 70px auto;
    width: 100%;}

.termy p{    color: #333;
    font-size: 14px;}
.termy .accordion-body{
    padding: 3% 5% 3%;
}
.termy .accordion-button{
    font-size: 13px;
    padding: 2% 4%;
    text-transform: uppercase;
        font-weight: 700;
}
.termy .accordion-button:hover{color: #0c63e4;}
.termy .lead{color: #6c757d !important;}
.termy .alert-warning{font-size: 13px;padding: 1% 2%;}
.termy .alert-info{font-size:13px;padding: 1% 2%;}
.termy h6, .h6{    color: #222;
    font-weight: 700;
    margin-top: 0% !important;
    background: #eee;
    padding: 1% 0;
    font-size: 14px;}
.termy ul li{
        font-size: 14px !important;
}
.termy .text-muted{
        color: #6c757d !important;
    text-align: left;
    padding: 0 3%;
}

.termy h1, .h2{
    text-align: left;
    padding-left: 3%;
    font-size: 4rem;
}

.list-unstyled li:hover{
    color: #0a58ca;
}

.get_started .icon-circle img{width:38px; height: 38px; }
.get_started .icon-circle{background: #fff; height:50px; width: 50px;background: #fff !important; overflow: hidden;}
a.btn-default:hover{cursor: pointer;}

/*--------------------------MODAL SHARE------------------------ */

.email {
  background: #DEDBDF;
  border-radius: 16px;
  height: 32px;
  overflow: hidden;
  position: relative;
  width: 162px;
  -webkit-tap-highlight-color: transparent;
  transition: width 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    height 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    box-shadow 300ms cubic-bezier(0.4, 0.0, 0.2, 1),
    border-radius 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.email:not(.expand) {
  cursor: pointer;
}
.email:not(.expand):hover {
  background: #C2C0C2;
}
.from {
  position: absolute;
  transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.from-contents {
  display: flex;
  flex-direction: row;
  transform-origin: 0 0;
  transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.to {
  opacity: 0;
  position: absolute;
  transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.to-contents {
  transform: scale(.55);
  transform-origin: 0 0;
  transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.avatar {
  border-radius: 12px;
  height: 24px;
  left: 6px;
  position: relative;
  top: 4px;
  width: 24px;
}
.name {
  font-size: 14px;
  line-height: 32px;
  margin-left: 10px;
}
.top {
  background: #6422EB;
  display: flex;
  flex-direction: row;
  height: 70px;
  transition: height 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
  width: 300px;
}
.avatar-large {
  border-radius: 21px;
  height: 42px;
  margin-left: 12px;
  position: relative;
  top: 14px;
  width: 42px;
}
.name-large {
  color: #efd8ef;
  font-size: 16px;
  line-height: 70px;
  margin-left: 20px;
}
.x-touch {
  align-items: center;
  align-self: center;
  cursor: pointer;
  display: flex;
  height: 50px;
  justify-content: center;
  margin-left: auto;
  width: 50px;
}
.x {
  background: #BA87F9;
  border-radius: 10px;
  height: 20px;
  position: relative;
  width: 20px;
}
.x-touch:hover .x {
  background: #CB9AFB;
}
.line1 {
  background: #6422EB;
  height: 12px;
  position: absolute;
  transform: translateX(9px) translateY(4px) rotate(45deg);
  width: 2px;
}
.line2 {
  background: #6422EB;
  height: 12px;
  position: absolute;
  transform: translateX(9px) translateY(4px) rotate(-45deg);
  width: 2px;
}
.bottom {
  background: #FFF;
  color:  #444247;
  font-size: 14px;
  height: 200px;
  padding-top: 5px;
  width: 300px;
}

.twitter {
  margin-left: 16px;
  height: 30px;
  position: relative;
  top: 0px;
  width: 30px;
}
.medium {
  height: 30px;
  margin-left: 16px;
  position: relative;
  width: 30px;
}


.email.expand {
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 6px 6px rgba(0,0,0,0.16);
  height: 200px;
  width: 300px;
}
.expand .from {
  opacity: 0;
  transition: opacity 100ms cubic-bezier(0.4, 0.0, 1, 1);
}
.expand .from-contents {
  transform: scale(1.91);
}
.expand .to {
  opacity: 1;
  transition: opacity 200ms 100ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.expand .to-contents {
  transform: scale(1);}




/*********======================================NEW_POPUP_MODLE===================================**************************/

.view-modal, .popup{
  position: absolute;

}
button{
  outline: none;
  cursor: pointer;
  font-weight: 500;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: background 0.1s linear, border-color 0.1s linear, color 0.1s linear;
}
.view-modal{
  /*top: 20%;*/
  /*left: 90%;*/
  color: #e8e4ee;
  font-weight: bold;
  font-size: 18px;
  padding: 10px 25px;
  background: rgb(113, 5, 156);
  transform: translate(-50%, -50%);
}
.popup{
  background:rgb(0 0 0 / 75%);
  padding: 5vw;
  border-radius: 0px;
  top: 0;
  max-width: none;
  width: 100%;
    height: 100vh;
    max-height: 100%;
    overflow: hidden;
  opacity: 0;
  pointer-events: none;
  box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
  /*transform: translate(-50%, -50%) scale(1.2);*/
  transition: top 0s 0.2s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
    position: fixed;
}
.popup.show{
  /*top: 50%;*/
  /*left: 50%;*/
  opacity: 1;
  pointer-events: auto;
  /*transform:translate(-50%, -50%) scale(1);*/
  transition: top 0s 0s ease-in-out,
              opacity 0.2s 0s ease-in-out,
              transform 0.2s 0s ease-in-out;
        z-index: 99;
    position: fixed;

}
.popup :is(header, .icons, .field){
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.popup header{
  padding-bottom: 15px;
  border-bottom: 1px solid #ebedf9;
}
header span{
  font-size: 21px;
  font-weight: 600;
    color: #444;
}
header .close, .icons a{
  display: flex;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  transition: all 0.3s ease-in-out;
}
header .close{
  color: #878787;
  font-size: 17px;
  background: #f3f3f3;
  height: 33px;
  width: 33px;
  cursor: pointer;
}
header .close:hover{
  background: #ebedf9;
}
.popup .content{
  margin: 20px 0;
}
.popup .icons{
  margin: 15px 0 20px 0;
    padding: 0;
}

.popup .field input{font-size: 14px;}

button.view-modal{width: auto;
    right: 0%;
    min-width: 100px;
margin-right: 3VH;}

.content p{
  font-size: 15px;
}
.content .icons a{
  height: 50px;
  width: 50px;
  font-size: 20px;
  text-decoration: none;
  border: 1px solid transparent;
}
.icons a i{
  transition: transform 0.3s ease-in-out;
}
.icons a:nth-child(1){
  color: #1877F2;
  border-color: #b7d4fb;
}
.icons a:nth-child(1):hover{
  background: #1877F2;
}
.icons a:nth-child(2){
  color: #46C1F6;
  border-color: #b6e7fc;
}
.icons a:nth-child(2):hover{
  background: #46C1F6;
}
.icons a:nth-child(3){
  color: #e1306c;
  border-color: #f5bccf;
}
.icons a:nth-child(3):hover{
  background: #e1306c;
}
.icons a:nth-child(4){
  color: #25D366;
  border-color: #bef4d2;
}
.icons a:nth-child(4):hover{
  background: #25D366;
}
.icons a:nth-child(5){
  color: #0088cc;
  border-color: #b3e6ff;
}
.icons a:nth-child(5):hover{
  background: #0088cc;
}
.icons a:hover{
  color: #fff;
  border-color: transparent;
}
.icons a:hover i{
  transform: scale(1.2);
}
.content .field{
  margin: 12px 0 -5px 0;
  height: 45px;
  border-radius: 4px;
  padding: 0 5px;
  border: 1px solid #757171;
}
.field.active{
  border-color: #7d2ae8;
}
.field i{
  width: 50px;
  font-size: 18px;
  text-align: center;
    color: #333;
}
.field.active i{
  color: #7d2ae8;
}
.field input{
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  font-size: 15px;
}
.field button{
  color: #fff;
  padding: 5px 18px;
  background: #7d2ae8;
}
.field button:hover{
  background: #8d39fa;
}

.popup-content{
    max-width: 380px;
    background: #ffffff;
    max-height: 500px;
    border-radius: 10px;
    margin: auto;
    padding: 25px;
}

.getapp{display: block !important;}