/*!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */ @font-face {
   font-family: 'SeriouslyNostalgic Fn';
   src:
     url('../fonts/SeriouslyNostalgicFn-Regular.woff2') format('woff2'),
     url('../fonts/SeriouslyNostalgicFn-Regular.otf') format('opentype'),
     url('../fonts/SeriouslyNostalgic-Regular.woff2') format('woff2'),
     url('../fonts/SeriouslyNostalgic-Regular.otf') format('opentype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
 }

 @font-face {
   font-family: 'SeriouslyNostalgic Fn It';
   src:
     url('../fonts/SeriouslyNostalgicFnIt-Reg.otf') format('opentype');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
 }

 html,
 body {
   margin: 0;
   padding: 0;
 }

 header .container-fluid {
   padding: 0 !important;
   margin: 0 auto;
 }

 :root,
 body {
   background-color: #000;
   color: #fff;
   overflow-x: hidden
 }

 header {
   background-image: url(../img/referral/bg-1.webp);
   background-repeat: no-repeat;
   background-position: -90px -180px;
   background-size: cover;
   padding: 40px 0 0 0;

   @media(max-width: 768px) {
     header {
       padding: 10px 0 0 0
     }
   }

   header>div {
     background: linear-gradient(0deg, #080808 0%, rgba(8, 8, 8, 0.2) 65%, rgba(8, 8, 8, 0) 100%);
     min-height: 800px
   }

   @media(max-width: 768px) {
     header>div {
       min-height: 640px
     }
   }

   header .brand-name {
     text-align: center;
   }

   header .brand-name img {
     height: 48px
   }

   @media(max-width: 768px) {
     header .brand-name img {
       height: 32px
     }
   }

   header .brand-description {
     margin: 0 auto;
     padding: 20px 0 20px 0
   }

   header .brand-description h1,
   header .brand-description .h1 {
     font-family: SeriouslyNostalgic Fn, system-ui;
     font-weight: 400;
     font-size: 46px;
     line-height: 50px;
     letter-spacing: 1%;
     text-align: center;
     margin: 0 auto 20px;
   }

   @media(max-width: 768px) {

     header .brand-description h1,
     header .brand-description .h1 {
       font-size: 50px;
       line-height: 56px;
       margin-top: 30px
     }
   }

   header .brand-description h2,
   header .brand-description .h2 {
     font-size: 50px;
     line-height: 60px;
     margin-top: 12px
   }

   header .brand-description h2.text-center {
     font-family: 'SeriouslyNostalgic Fn', system-ui;
     font-weight: 400;
     font-size: 30px;
     line-height: 34px;
     letter-spacing: 1%;
     text-align: center;
     margin-left: 20px;
     margin-right: 20px;
   }

   header .brand-description h2.text-center .italic {
     font-family: 'SeriouslyNostalgic Fn It', system-ui;
     font-weight: 400;
     font-style: italic;
     font-size: 30px;
     line-height: 34px;
     letter-spacing: 1%;
     text-align: center;
   }

   @media(max-width: 768px) {

     header .brand-description h2,
     header .brand-description .h2 {
       font-size: 30px;
       line-height: 34px;
       margin-bottom: 20px;
       margin-top: 0px
     }
   }

   @media(max-width: 768px) {

     header .brand-description h2 br,
     header .brand-description .h2 br {
       display: none
     }
   }

   header .brand-description p {
     font-family: SeriouslyNostalgicFnRegular, system-ui;
     font-size: 40px;
     line-height: 50px
   }

   header .brand-description p.text-center {
     font-family: 'SeriouslyNostalgic Fn', system-ui;
     font-weight: 400;
     font-size: 28px;
     line-height: 32px;
     letter-spacing: 0%;
     text-align: center;
     margin-bottom: 4px;
     margin-top: 100px;
   }

   header .brand-description .featured-logos {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 4px;
     padding: 0 20px;
   }

   header .brand-description .featured-logos img.featured-logo {
     height: 36px;
     margin: 0 12px;
   }

   header .brand-description .featured-logos img.bl-logo {
     width: 80.43px;
     height: 46px;
   }

   header .brand-description .featured-logos img.nytl-logo {
     width: 136.53px;
     height: 18.8px;
   }

   header .brand-description .featured-logos img.cl-logo {
     width: 80.43px;
     height: 46px;
   }

   header .brand-description .featured-logos .separator {
     color: #fff;
     font-size: 17px;
     margin: 0 px;
     line-height: 1;
   }

   @media(max-width: 768px) {
     header .brand-description p {
       font-size: 24px;
       line-height: 28px
     }
   }

   header .referrer-container {
     background-color: #000;
     border-radius: 40px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding: 20px 40px 100px 40px
   }

   @media(max-width: 768px) {
     header .referrer-container {
       padding: 20px 30px 100px 30px;
       margin: 0 -12px 0 -12px
     }
   }

   header .referrer-container h2,
   header .referrer-container .h2 {
     font-family: 'SeriouslyNostalgic Fn', system-ui;
     font-weight: 400;
     font-size: 36px;
     line-height: 40px;
     letter-spacing: 1%;
     text-align: center;
     margin-top: 20px;
   }

   @media(max-width: 768px) {

     header .referrer-container h2,
     header .referrer-container .h2 {
       font-size: 36px;
       line-height: 40px;
       margin-bottom: 10px
     }
   }

   header .referrer-container h2 br,
   header .referrer-container .h2 br {
     display: none
   }

   @media(max-width: 768px) {

     header .referrer-container h2 br,
     header .referrer-container .h2 br {
       display: inline-block
     }
   }

   header .referrer-container p {
     color: #9e9e9e;
     margin-bottom: 0
   }

   header .referrer-container p.invite-text {
     font-family: 'PP Mori', system-ui;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;
     letter-spacing: 0%;
     text-align: center;
     color: #9e9e9e;
     margin-bottom: 0;
   }

   @media(max-width: 768px) {
     header .referrer-container p {
       font-size: 14px;
       line-height: 20px
     }
   }

   header .referrer-container form {
     width: 240px;
     height: 44px;
     background-color: rgba(0, 0, 0, .8);
     border-radius: 12px;
     padding: 20px 20px 20px 20px;
     position: relative;
     margin: 0px auto 0 auto
   }

   header .referrer-container form input {
     background-color: #fff;
     color: #000;
     border: none;
     padding: 12px 60px 12px 20px;
     margin: 0 auto;
     width: 240px;
     height: 44px;
     border-radius: 12px;
     box-sizing: border-box;
     font-family: 'PP Mori', system-ui;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;
     letter-spacing: 0%;
   }

   header .referrer-container form button {
     border: none;
     position: absolute;
     top: 50%;
     right: 20px;
     transform: translateY(-50%);
     background-color: transparent;
   }

   header .referrer-container .download-now-button {
     color: #fff;
     padding: 15px 45px;
     border-radius: 22px;
     width: 200px;
     display: block;
     margin: 20px auto 0;
     background-color: #1078cc;
     text-decoration: none;
     transition: background-color 400ms ease-in-out;
     font-family: 'PP Mori', system-ui;
     font-weight: 400;
     font-size: 14px;
     line-height: 20px;
     letter-spacing: 0%;
     text-align: center;
   }

   header .referrer-container .download-now-button:hover,
   header .referrer-container .download-now-button:active {
     background-color: #242ac2
   }

   header .referrer-container {
     background-color: #000;
     border-radius: 40px;
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
     padding: 40px 40px 480px 40px
   }

   ;

   @media(max-width: 768px) {
     header .referrer-container {
       padding: 10px 30px 150px 30px;
       margin: 0 -12px 0 -12px
     }
   }

header .referrer-container form button svg {
  fill: #000 !important;
}
}