@font-face{
     font-family: "PROXON";
     src: url("./fonts/PROXON.ttf")
}
 body{
     font-family: 'Poppins', sans-serif;
     scroll-behavior: smooth;
}
 body{
    /*background:#444;
    */
}

.sec3DeskP,.sec3 p{font-family: 'Poppins', sans-serif;}
.hide{display:none !important}
 body {
     display: flex;
     min-height: 100vh;
     flex-direction: column;
     overflow-x: hidden;
}
 main {
     flex: 1 0 auto;
}
 nav{
     max-width: 100%;
     margin: auto;
     text-align: center;
     z-index: 2;
}
 .loginOrSignupContainer{
     display: inline-flex;
     flex-direction: column;
         min-height: 117px;
     align-items: center;
         padding: 2px;
     background: #fff;
     border-radius: 10px;    min-width: 112px;box-shadow: -2px 3px 20px 5px rgb(255 255 255 / 70%)
}
.loginOrSignupContainer a{margin:5px;padding:0px;font-size:100%}

 .nav-item a{
    border-width: 5px;
    border: 5px solid transparent;
    border-image-slice: 1;
}
 .nav-item a:hover,.nav-item a:focus, .active.purple, .alwaysActive.purple{
     border-image-source: linear-gradient(0deg, rgba(25,46,89,1) 25%, rgba(142,47,251,1) 75%);
}
 .navPad{
     padding:.35rem;
}

 .login, .signup{
     line-height: normal;
}
 .login{
     color:#fff;
}

 .navMenuItem{
   font-size: 20px;
   letter-spacing: 1px;
   font-weight: 600;
}


 .nav-item span{
     margin-top: .5em;
     color: #000 !important;
}
 .nav-item a{
     margin-top:.5em;
}
 @media(max-width:1375px){
     .navMenuItem{
         font-size:18px;
    }
}

 @media(max-width:992px){
     nav{
         background: linear-gradient(0deg, rgba(255,255,255,0.5) 25%, rgba(255,255,255,1) 75%);
    }
     .navLogoContainer{
         display: none;
    }
     .loginOrSignupContainer{
         background: transparent;
    }
     .navMenuItem{
         background:transparent;
    }
     .active.purple{
         background: rgba(223, 196, 255, 0.623) 75%;
    }
}



/*new nav*/
nav{font-family: 'Poppins' ,sans-serif}
nav{z-index: 99;}
nav{width:100%}
@media (min-width: 992px){
.nav-container{position:relative}
.back-nav{width:100%;position: absolute;bottom:0px}
.back-nav path{fill:url(#back-nav-grad)}


.navbar{padding:0px}

.nav-logo-li{position: relative;}
.nav-logo-li img{    width: 100%;
position: absolute;
left: 50%;
transform: translate(-50%, 0px);}
.desktop-nav-cont,.nav-logo-li{display: inline-flex;
    width: 33%;}
.desktop-nav-cont:nth-child(1){justify-content: flex-end;}
    .nav-logo-li{    max-width: 300px;}
  nav{z-index: 99;}
  .whiteWave {
      position: absolute;
      top: 0px;
  }

  .navbar-nav{margin:0px auto;width:100%;    padding: 5px;
    justify-content: center;    background-image: url(images/back-nav.svg);
  background-size: 100% 108px;
  background-repeat: no-repeat;
      height: 108px;
  }


}
@media (max-width: 991px){
.nav-logo-li{display: none}


.navbar{width: 100%;
  padding: 0px;
  justify-content: center;
  background-image: url(images/back-nav.svg);
  background-size: 100% 65px;
  background-repeat: no-repeat;
  height: 65px;}
  .collapse.show{background: white;    position: relative;
  box-shadow: 0px -20px 10px 12px white;
  z-index: -1;}
}

/*Section 1 START*/
.sec1 .fadeBoxContainer{    bottom: 200px;
    position: absolute;
    z-index: 999;
    color: white;    font-size: 19px;}




 .sec1{
     height: calc(100vh + 100px);
    /*was 90vh*/
     background: url("images/back1.jpg");
     /* background: url("images/back1v2.jpg"); */
     background-size: cover;
     background-position: center;
}


 .whiteWave{
     width: 100%;
     min-height: 158px;
     z-index: 3;
}
 .mediaContainer{
     position: relative;
     height: 100%;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     z-index: 1;
}
 .astronaughtImage{
     display: block;
     margin: auto;
     margin-bottom: -5%;
     width: 95vmin;
    /*was 47vw*/
     z-index: 2;
}


 .spaceSpots{
     position: absolute;
     z-index: 1;
     max-width: 100vw;
     min-width: 700px;
     opacity: 1;
}
 .astroHeading{
     position: absolute;
     width: 100%;
     top: 11%;
     text-align: center;
     z-index: 1;
     font-size: 11vw;
     font-family: PROXON;
     color: #fff;
}

 .bgVid{
     position: absolute;
     z-index: 0;
     width: auto;
     min-height: 100%;
     min-width: 100vw;
}
 .mouseScrollImg{
     display: block;
     width: 37px;
     margin: 0 auto;
     -webkit-animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
     animation: slide-top 2s cubic-bezier(0.250, 0.460, 0.450, 0.940) infinite alternate;
     z-index: 2;
     position: absolute;
     bottom: 4%;
     width: 100%;
     height: 5em;
}
 @-webkit-keyframes slide-top {
     0% {
         -webkit-transform: translateY(20px);
         transform: translateY(20px);
    }
     100% {
         -webkit-transform: translateY(-20px);
         transform: translateY(-20px);
    }
}
 @keyframes slide-top {
     0% {
         -webkit-transform: translateY(20px);
         transform: translateY(20px);
    }
     100% {
         -webkit-transform: translateY(-20px);
         transform: translateY(-20px);
    }
}
 .fadeBoxContainer{
      font-size: 24px;
       height: fit-content;
       align-self: center;
}

.fancytext{font-size: 175%;font-family: 'PROXON';
     align-self : center;}


     #home .blueFadeBox:before {
         content: 'BEST Affiliate Network for Nutra';
         position: absolute;
         top: -90px;
         text-align: center;
         left: -80px;
         width: 600px;
         font-family: 'PROXON';
         font-size: 47px;
         line-height: 45px;
         text-shadow: 3px -4px 4px black, 3px -4px 4px black;
     }


     .blueFadeBox ul{list-style-type: none;    padding: 0px;margin:10px 0px}
     .blueFadeBox ul li{    font-size: 21px;display: flex;
         align-items: center;}
     .blueFadeBox ul li img{width:20px;margin-right:10px}
     @media(max-width:725px){
        #home .blueFadeBox:before{
         position: absolute;
         top: -57px;
         text-align: center;
         left: 0px;
         width: 100%;
         font-size: 22px;
         line-height: 25px;
        }
        .blueFadeBox ul li{font-size:16px}
    }
 .rotatedText{
 background: -webkit-linear-gradient(#79b8ff, #050511);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
 transform: rotate(
270deg
);
 width: min-content;
 height: min-content;
 left: -201px;
 position: absolute;
 font-size: 57px;
 line-height: 1;
 font-family: 'PROXON';
 align-self: center;
}
 .blueFadeBox{
 position:relative;
     padding: 1em;
     background: rgb(7,42,80);
     background: linear-gradient(90deg, rgba(7,42,80,1) 0%, rgba(7,42,80,0.90) 75%, rgba(7,42,80,0.1) 100%);
     box-shadow: -10px 0px 10px #000;
        max-width: 555px;
}
 @media(max-width:1179px){
     .fadeBoxContainer{

         margin: auto;
    }
}
 @media(max-width:992px){
     .whiteWave{
         display: none;
    }
     .rotatedText{
         transform: none;
    }
    #home .rotatedText{display:none}
     .blueFadeBox{
         box-shadow: none;
    }
}
 @media(max-width:718px){


     .fadeBoxContainer{
         width: 80%;
         min-width: 320px;
         top: 0px;
         min-width: 296px;
    }
 .sec6 .fadeBoxContainer{width: auto;}

     .blueFadeBox{
         min-width: 320px;
         background: linear-gradient(90deg, rgba(7,42,80,.8) 0%, rgba(7,42,80,0.70) 75%, rgba(7,42,80,0.1) 100%);
    }
}
 .sectionFade{
     position: absolute;
     top: 0;
     background: #333;
     height: 120px;
     width: 100%;
}
 .sec1 .sectionFade{
     background: rgb(51,51,51);
     background: linear-gradient(0deg, rgb(11 27 63) 21%, rgba(255,255,255,0) 71%);
     position: absolute;
     top: 100%;
     z-index: 1;
}

@media(max-width:725px){
.mouseScrollImg{display: none}
   .sec1{height: 100%;}
   .astronaughtImage{width:100%;    margin-bottom: 0;}
   .astroHeading{    top: 65px;
}
.mediaContainer{min-height: 910px;}
.sectionFade{display:none}
}

/*Section 1 End*/
/*Section 2 START*/
 .sec2{
   position: relative;
       background: url(images/back2.jpg);
       padding: 100px 0px;
       background-size: cover;
       background-position-y: center;
       background-position-x: center;
       background-repeat: no-repeat;
}
 .formContainer{
     position: relative;
     background: #fff;
     width: max-content;
     margin: auto;
     padding: 2em;
     border-radius: 21px;
}
 .formContainer>h1{
     font-weight: 900;
     font-family: 'Poppins' ,sans-serif
}
@media(max-width:992px){
  #login h1{font-size:1.6rem}
  .formContainer {
    width: 95%;
}
}


 #login-form{
     display: flex;
     flex-direction: column;
     margin: auto;
}
 #login-form input, #login-form button, #login-form a{

     background: transparent;
     border-radius: 100px;
     border: none;
}
 #login-form input:focus{
     outline: none;
}
 .unameContainer:focus-within, .passContainer:focus-within{
     border: 2px solid #00abe1;
}
 #login-form a{
     margin: 0;
     background: none;
     margin: .3em;
     height: 1.6em;
     line-height: 1.6em;
     color: #000;
}
 #login-form button.login{
     background: #01aae3;
}
 #login-form button.login:hover{
     background: #047fa9 !important;
}
 #login-form button .password{
     border: 2px solid #00a9e2;
}
 #login-form .register{
     border: 2px solid #000;
     font-size: x-large;
     height: 2.2em;
}
 #login-form button{
     font-size: x-large;
     height: 2.2em;
}
 .username{
     width: 100%;
}
 .passContainer{
     align-items: center;
     max-width: 100%;
     background: #e8e8e8;
     border-radius: 21px;
}
 .passInp{
     width: 100%;
     margin: 0 !important;
     background: none;
}
 .forgotPass{
     max-width: 20%;
     line-height: 2em;
     border-left: 1px solid #000 !important;
     border-radius: 0 !important;
     padding: 0 5px;
}
 .register{
     background: #fff;
     border: 2px solid #000 !important;
}
 .register:hover{
     background: #eef !important;
}
 form .login:hover{
     background: #01aad1 !important;
}
 .unameContainer, .passContainer{
     align-items: center;
     background: #e8e8e8;
     border-radius: 21px;
     border: 2px solid transparent;
     margin: 10px 0;
     border-radius: 100px;
     padding: 5px;
}
 .unameContainer input, .passContainer input{
     height: 40px;
     padding: 0px 10px;
}
 .mailIcon, .lockIcon,.phoneIcon, .skypeIcon{
   font-size: 18px;
       position: relative;
}
 .lockIcon{
     max-width: 46%;
}
 .mailIconBox, .passIconBox{
     min-width: 43px;
     min-height: 43px;
     border-radius: 100%;
     display: flex;
     justify-content: center;
}
 .mailIconBox{
     background: #fff;
}
 .passIconBox{
     background: #01aae3;
     margin-left: 5px;
}
 .transpContainer{
     position: absolute;
     width: 90%;
     bottom: -14px;
     left: 5%;
     background: #ffffff90;
     height: 30px;
     border-radius: 0 0 21px 21px;
}
 .sec2 .textContainer{
     justify-content: center;
     width: 80%;
     margin: 5em auto 0 auto;
}
 .sec2 .textBoxInner{
 background: #fff;
 width: 25%;
 margin: 10px;
 padding: 23px;
 display: flex;
 position: relative;
 text-align: center;
 font-size: 19px;
 justify-content: center;
 align-content: center;
 align-items: center;
}
@media(max-width:992px){
     .sec2 .textBoxInner{
     width: 100%;
     }
}

 .textBoxInner>.number{
     position: absolute;
     left: 34%;
     top: -15%;
     color: #fff;
     background: #01aae3;
     width: 34%;
}
 .fancyNumberBox{
     border: 4px solid #00a9e0;
}
 .fancyNumberBox::after{
     content: " ";
     position: absolute;
     bottom: -5.6%;
     width: 90%;
     height: 4%;
     background: #a4adbc;
     left: 5%;
     z-index: 0;
}
@media(max-width:725px){
#login .textBoxInner {min-height:130px}
}
 .star{
     position: absolute;
     height: 4vh;
     width: 3vw;
     z-index: 1;
}
 .star1{
     right: 10%;
     top: -2%;
}
 .star2{
     top: 39%;
     left: 13%;
}
 .star3{
     bottom: 32%;
     right: 20%;
     width: 2.8vw;
}
 .sec2 .sectionFade{
     background: rgb(255,255,255);
     background: linear-gradient(
0deg
, rgba(255,255,255,0) 0%, rgb(11 27 63) 71%);
}
 @media(max-width:992px){
     .formContainer{
         padding: 1em;
    }
     #login-form{
         padding: 0;
    }

}
 @media(max-width:600px){
     .formContainer{
         width:95%;
    }
}
/*Section 2 End*/
/*Section 3 START*/
 .sec3{
     background: url("images/back3.jpg");
     padding: 100px 0px;
     background-size: cover;
     background-position-y: center;
     background-position-x: center;
     background-repeat: no-repeat;
}
 .rocketContainer{
     justify-content: space-between;
     width: 80%;
     margin: auto;
     min-width: 320px;
     color:#fff;
     background: rgb(0 0 0 / 52%);
     border-radius: 20px;
     padding: 20px;
}
 .infoCol{
     justify-content: space-between;
     width:33%
}



    @media(max-width:1200px){
        .infoCol{
            width: 47%;
       }
    }
@media(max-width:992px){
    .infoCol{
        width:100%;
   }
}

 .imageCol{
     width: 33%;
}
 .sec3RocketImg{
 position: absolute;
     /* width: 382px; */
     bottom: -28%;
     left: 50%;
     transform: translate(-50%, 0px);
}
 .sec3Logo {
     position: absolute;
     top: -30px;
     left: 50%;
     transform: translate(-50%, 0px);
     width: 300px;
     margin: auto;
}
 .pubImg, .advImg{
     width: 70px;
     height: 70px;
     object-fit: contain;
}
 .advContainer, .pubContainer{
     display: flex;
         justify-content: space-between;
     align-items: center;
     margin: 1em 0;
     gap: 10px;
}
 .advContainer{
     text-align: right;
}
 .pubContainer{
     flex-direction: row-reverse;
     text-align: left;
}
 .sec3 p{
     margin:0;
     font-size: 23px;
     max-width: fit-content;
}

 .sec3 .register{
     margin-top: 2rem !important;
     background: transparent;
     color: #fff;
     border: 2px solid #fff !important;
     border-radius: 15px;
     font-size: 1.5em;
     text-align: center;
     width: fit-content;
     margin: auto;
     padding: 5px 20px;
}
 .sec3 .register:hover{
     color:#000;
     background: #eee !important;
     text-decoration: none;
}
 .infoCol h3{
     font-weight: 900;
     font-size: 1.5rem;
}
 .advHeading, .pubHeading{
     margin: 10px auto;
}
 @media(min-width:993px){
 .advText11{display:block;}
 .advText1{display:none;}
     .pubHeading{
         border-right: 5px solid #05c1ff;
         padding-right: 10px;
    }
     .advHeading{
         border-left: 5px solid #05c1ff;
         padding-left: 10px;
    }
}
@media(max-width:992px){
.advText1{display:block;}
.advText11{display:none;}
}

 @media(max-width:1450px){
     .imageCol{
         display: none !important;
    }
     .advContainer{
         text-align: right;
    }
     .pubContainer{
         text-align: left;
    }
}
 @media(max-width:992px){
     .rocketContainer{
         min-width: 310px;
         width: 80%;
    }
     .sec3DeskP{
         margin-top: 100px;
    }
     .sec3 p{
         max-width: 320px;
    }
     .advContainer, .pubContainer {
         flex-direction: row;
    }
     .pubContainer {
         text-align: left;
    }
     .advContainer, .pubContainer{
         margin: .5em 0;
    }
}
@media(max-width:600px){
    .rocketContainer{
        min-width: auto;
        width:100%
      }
}
@media(max-width:992px){
 .sec3 p{font-size:18px}
 .pubImg, .advImg {
    width: 60px;
    height: 60px;}
    .advContainer,.pubContainer {
    text-align: left !important;
    justify-content: start !important;
}
}

/*Section 3 End*/
/*Section 4 START*/
 .sec4{
   /* background: url(images/back4.jpg);
       height: 100vh; */
       background-size: cover;
       color: #fff;
       background-position-y: center;
       background-position-x: center;
       background-repeat: no-repeat;
       background-color: #0b254a;
}
 .sec4 h4, .sec5 h4,  .sec7 h4 {
     font-size: 286%;
     font-weight: 900;
}




 .sec4ImgBox img{
     max-width: 140px;
}
 .sec4 .container{
     font-size: 165%;
     text-align: center;
     line-height: 1.7;
     position:relative;
     z-index: 99
}
@media(max-width:992px){
.sec4 h4, .sec5 h4{
    font-size: 200%;
}
.sec4 .container{
    font-size: 120%;
    }
}

 .blueText{
     color:#0393c8;
}
 @media(min-width:993px){
     .sec4{
         background-position: center;
    }
}
/*Section 4 End*/
/*Section 5 START*/
 .sec5{
     color: #fff;
     background: #0b254a;
}
 .chartImg{
    /* position: absolute;
     top:0;
     z-index:-1;
     */
}
 .sec5HeaderContainer{
     position: absolute;
     width: 100%;
     top: 0;
}
/*Section 5 End*/
/*Section 6 START*/
 .sec6{
     background: url("images/back6.jpg");
     background-size: cover;
         background-repeat: no-repeat;
         background-position-x: center;
         background-color: #092248;
         color: #fff;
         height: 1200px;
         display: flex;
         justify-content: flex-end;
         align-content: center;
         padding-right: 12%;
}
.sec6 .fadeBoxContainer{   position:relative;}
 .sec6 .rotatedText{
 left: -265px;
     font-size: 78px;
      background: -webkit-linear-gradient(#79b8ff, #050511);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
 .sec6 .blueFadeBox{
     background: rgb(6 16 41 / 81%);
     padding-bottom:2em;
     box-shadow: none;
}
 .sec6 .blueFadeBox h4{
     font-weight: bold;
     font-size: 139%;
}

 @media(max-width:992px){
 .sec6 .blueFadeBox h4{    margin-top: -136px;
    width: 200px;}
 .sec6 .blueFadeBox{width:90%;margin:0px auto;padding-bottom:0px;}
 .sec6{padding-right:0px}
     .sec6 .rotatedText{display: none;
         margin-right: -7%;
         font-size: 175%;
    }

}
 @media(max-width:718px){
     .blueFadeBox{
         min-width: 300px;
    }
}
/*Section 6 End*/
/*Section 7 START*/
.sec7{
    background: url(images/back7.jpg);
    padding: 70px 0px;
    background-size: cover;
    background-position-y: center;
    background-position-x: center;
    background-repeat: no-repeat;
    color: #fff;
    -moz-box-shadow: inset 10px 0px 80px 60px #0b254a;
    -webkit-box-shadow: inset 10px 0px 80px 60px #0b254a;
    box-shadow: inset 10px 0px 80px 60px #0b254a;
}
.eventsContainer {
    justify-content: center;
    width: 75%;
    margin: auto;
    min-width: 320px;
    color: #fff;
    padding: 20px;
}
.infoColEvent{
     justify-content: center;
     padding: 0 10px;
}
.sec7EventImg {
    max-width: 400px;
    width: 100%;
    margin: auto;
}
.eventsContainer h3 {
    text-align: center;
    margin: 30px 0 15px;
    font-weight: 600;
    font-size: 24px;
}
.sec7 .container{
    text-align: center;
    line-height: 0.5;
    position: relative;
    z-index: 99;
    font-size: 20px;
}
.info-event-box {
    height: 156px;
}
.sec7 h4 {
    text-transform: uppercase;
}
@media(max-width:992px){
    .infoColEvent {
        width: 100%;
    }
    .infoColEvent:first-child {
        margin-top: 0;
    }
    .sec7EventImg {
        margin: auto;
    }
    .eventsContainer h3 {
        margin: 20px 0 15px;
    }
    .sec7 h4 {
        font-size: 200%;
    }
}
@media (max-width: 499px) {
    .eventsContainer h3 {
        margin: 20px 0 10px;
    }
}
@media (max-width: 375px) {
    .sec7 h4 span {
        font-size: 115%;
    }
}
/*Section 7 End*/
/*Footer START*/
 footer{
     background-color:#061123;
}
 footer>img{
     height: 16vh;
}
 .footLogoCOntainer img{
     max-height: 185px;
}
 .footerItem{
         width: 300px;
}
 .footerLinksContainer{
     justify-content: space-evenly;
}
 .contacts{
     color:#03a9e3;
}
 .blueLineBox, .blueLineBox2{
     font-size: 15px;
     font-weight: bold;
     border-left: 1px solid #00b0ec;
}
 .contactBlueLine{
     padding-left:2rem;
}

 .blueLineBox>div{
     position: relative;
}
 .blueLineBox>div::before{
     content: " ";
     position: absolute;
     bottom: 9%;
     width: 4%;
     height: 30px;
     background: #00b0ec;
     left: -8%;
     z-index: 0;
}
 .info, .infoHeader, .contactsHeader{
     color:#fff;
}
 .infoHeader{
     font-weight:bold;
}
 .yellowSquare::before{
     content: " ";
     position: absolute;
     top: 10%;
     width: 4%;
     height: 40px;
     background: #ffff01;
     left: -38px;
     z-index: 0;
}

 .icon-textBox{
     display: flex;
     height: 1.4em;
     line-height: 128%;
     margin-top:.5rem;
}
 .icon-textBox img{
   margin-left: -12px;
   margin-right: 18px;
   width: 25px;
   height: 25px;
   object-fit: contain;
}


/* .skypeIcon{
     font-size: 100%;
}
 */
 @media(max-width:768px){
     .footerItem{
         margin: auto;
             width: 100%;
    }
     .icon-textBox img{
         margin-left: 0;
    }
     .callIcon img{
         margin-left: 0;
    }
}
 canvas{
     display:block;
     vertical-align:bottom;
}
/* ---- particles.js container ---- */
 #particles-js{
     width: 100%;
     height: 100%;
     position:absolute;
     background-color: #161629;
     background-image: url('');
     background-size: cover;
     background-position: 50% 50%;
     background-repeat: no-repeat;
}