html, body{background-color:#1A1E3B;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;}
@font-face {

    font-family: 'Satoshi'; /* Assign a name to your font */

    src: url('../Fonts/WEB/fonts/Satoshi-Black.ttf'); /* Path to your font file */
    src: url("../Fonts/WEB/fonts/Satoshi-Regular.ttf");
    src: url("../Fonts/WEB/fonts/Satoshi-Bold.ttf");

}
.content-center {
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .logo{width: 155px;margin-bottom: 20px;}
h6, h5, h4{color: #fff;}
h1{color: #CE8B3C;font-weight: 700;font-family: 'Satoshi', sans-serif;font-size: 48px; }
.card-body{
    border: 1px solid #FFFFFF6E;
    background: linear-gradient(154.88deg, rgba(255, 255, 255, 0.17) 7.78%, rgba(255, 255, 255, 0.0782) 84.04%);
    border-radius: 10px;
}
.card{background-color: transparent;margin: 35px 0px 35px 0px;}
.large-text{color: rgba(184, 189, 224, 1);font-family: 'Lato';}
.pshorttext{color: #CE8B3C;font-style: italic;font-family: 'Lato';}
.subscription {
    position: relative;
    width: 100%;
  }
  .subscription .submit-email {
    position: absolute;
    top: 2px;
    right: 3px;
    height: calc(100% - 12px);
    width: 100px;
    border: none;
    border-radius: 60px;
    outline: none;
    margin: 5px;
    padding: 0 20px;
    cursor: pointer;
    background: rgba(206, 139, 60, 1);
    color: #FFFFFF;
    transition: width .35s ease-in-out,
      background .35s ease-in-out;
  }
  
  
  .subscription .submit-email .before-submit,
  .subscription .submit-email .after-submit {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 40px;
    transition: visibility .35s ease-in-out,
      opacity .35s ease-in-out;
  }
  
  .subscription.done .submit-email .before-submit,
  .subscription:not(.done) .submit-email .after-submit {
    visibility: hidden;
    opacity: 0;
  }
  
  .subscription .submit-email .after-submit {
    transition-delay: .35s;
  }
  
  .subscription:not(.done) .submit-email .before-submit,
  .subscription.done .submit-email .after-submit {
    visibility: visible;
    opacity: 1;
  }

  .add-email{border-radius: 25px;padding: 15px;}
  @media screen and (max-width:600px) {
    .content-center {
        display: contents !important;
    }
      .maincontainer{padding-top: 30px !important;}
  }
  .img-bac{background-image: url(../images/main.svg);background-repeat: no-repeat;background-size: 400px;}
  .bg-wrapper {
    /*width: auto; */
    /* min-width: 180px; */
    /* height: 400px; */
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    z-index: 1;
    border-radius: 50;
    perspective: 1000;
    transform-style: preserve-3d;
  }
 .bg-wrapper:not(:last-child) {
    margin-right: 2.5rem;
    margin-bottom: 2.5rem;
  }
  .bg-wrapper:after {
    content: "";
    position: absolute;
    top: 40px;
    left: 50%;
    width: 85%;
    height: 85%;
    z-index: -1;
    transform: translateZ(-170px) translateX(-45%);
    filter: blur(32px);
    border-radius: 50%;
    background-color: rgba(36, 41, 80, 1);
  }
.bounce {
	position: absolute;
	animation: bounce 4s infinite;
	-webkit-animation: bounce 4s infinite;
	-moz-animation: bounce 4s infinite;
	-o-animation: bounce 4s infinite;
}
 
@-webkit-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}	
	40% {-webkit-transform: translateY(-30px);}
	60% {-webkit-transform: translateY(-15px);}
}
 
@-moz-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
	40% {-moz-transform: translateY(-30px);}
	60% {-moz-transform: translateY(-15px);}
}
 
@-o-keyframes bounce {
	0%, 20%, 50%, 80%, 100% {-o-transform: translateY(0);}
	40% {-o-transform: translateY(-30px);}
	60% {-o-transform: translateY(-15px);}
}
@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(0px);}
	60% {transform: translateY(-15px);}
}