/* MOBILE MOBILE MOBILE MOBILE VERSION
        FONT & UTIL SETTINGS ______
                ___________________________ */

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

  .hidemediaDSK {

    display: none;
  }
}

.showClass {
  display: grid;
}

.invisiFormM {
  display: none;
}

.BTftOfitWh32 {
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 2rem, 3rem);
  color: #ffffff;
  line-height: 0.9em;
}

/* SPECIALTY FONTS SPECIALTY FONTS - TITLE SHADOW GLOW SELLING POINTS ETC ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬*/
.ftOF34Sh {
  /*Shadow Font for Body Text Only*/

  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0.2em 0.2em 0.8rem #0e0e0e;
}

.ftOf34Tsh {
  /* Shadow Font Title base WHITE */
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #ffffff;
  line-height: 1.5;
  text-shadow: 0.2em 0.2em 0.8rem #0e0e0e;
}

/* TITLE FONTS _________________________________________________________________________*/
.ftPointTitleB {
  /* Shadow Font Title base WHITE */
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #ffffff;
  line-height: 3.5rem;
  text-shadow: 0.2em 0.2em 0.9rem rgba(1, 1, 1, 0.7);
  letter-spacing: 0.2rem;
  word-spacing: 0.1rem;
}

.ftPointTitleA {
  /* selling point title font */
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #ffffff;
  line-height: 1.5;
  text-shadow: 0.2em 0.2em 0.8rem #0e0e0e;
}

.ftPointTitleBlur {

  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.5rem;
  text-shadow: 0.2em 0.2em 0.8rem #0e0e0e;
  filter: blur(.1rem);
  font-weight: 800;
  word-spacing: .55rem;
  letter-spacing: .15rem;
  font-size: 2.5rem;
  white-space: nowrap;
}

/* BODY FONTS _________________________________________________________________________*/
.ftPointBodyA {
  /* selling point title font ALT */
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.3rem;
  letter-spacing: 0.2rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
  text-shadow: 0.5em 0.2em 1rem #7ccce7;
}

.ftPointBodyB {
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: rgba(255, 255, 255, 1);
  line-height: 1.5;
  text-shadow: 0.2em 0.2em 0.8rem rgba(1, 1, 1, 1);
  letter-spacing: .1rem;
}

.ftPointBodyC {
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: rgba(255, 255, 255, .8);
  line-height: 1.5;
  text-shadow: 0.2em 0.2em 0.8rem rgba(1, 1, 1, .7);
}

/* END OF END OF SPECIALTY FONTS SPECIALTY FONTS - TITLE SHADOW GLOW SELLING POINTS ETC - END OF 
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ */

/*  CARD FONTS ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬*/
.lCardftOF34sh {
  /*Shadow Font for Body Text Only*/

  font-family: "Xoutfit" sans-serif;
  font-weight: 600;
  font-size: 2rem;
  color: #ffffff;
  line-height: 1.3;
  text-shadow: 0.2em 0.2em 0.8rem #0e0e0e;
}

.lCardftOF34Tsh {
  /* Shadow Font Title base WHITE */
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #ffffff;
  line-height: 1.5;
  text-shadow: 0.2em 0.2em 0.8rem #0e0e0e;
}

.lCardftOF34TshB {
  /* Shadow Font Title base WHITE */
  font-family: "Xoutfit" sans-serif;
  font-weight: 700;
  font-size: 2.1rem;
  color: #ffffff;
  line-height: 3.5rem;
  text-shadow: 0.2em 0.2em 0.9rem rgba(1, 1, 1, 0.7);
  letter-spacing: 0.1rem;
  word-spacing: 0.1rem;
}

/*  CARD FONTS END_▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬*/

/* FOOTER FONTS _________________________________________*/
.ftFootOF30 {
  font-family: "Xoutfit" sans-serif;
  font-weight: 500;
  font-size: clamp(0.5rem, 0.9rem, 2rem);
  color: #ffffff;
  line-height: 1;
}

/* FOOTER FONTS END_________________________________________*/

.ftOfTitlePi {
  /* Font Title base PINK */
  font-family: "Xoutfit" sans-serif;
  font-weight: 600;
  font-size: 2rem;
  color: #ea15cf;
  line-height: 1.5;
}

.ftOfTitleWHI {
  /* Font Title base WHITE */
  font-family: "Xoutfit" sans-serif;
  font-weight: 600;
  font-size: 2.2rem;
  color: #ffffff;
  line-height: 1.5;
}

.ftOfitWh38 {
  /* Font  base WHITE */
  font-family: "Xoutfit";
  font-weight: 600;
  font-size: 2rem;
  color: rgba(255, 255, 255, 1);
  line-height: 1.2;
}

/* FONTS END MOBILE ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* GRID SETTINGS BELOW MOBILE ╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬
╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬ */

/*Base Grid Container Below MOBILE ═══════════════════════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════
*/
.gridWrapperMOB {
  display: grid;
  grid-auto-columns: auto-fit;
  grid-auto-rows: auto auto auto auto auto;
  /* grid-template-rows: 15% 15% auto auto auto auto auto;
  grid-template-columns: auto-fit; 
     justify-content:stretch;
                       align-content:stretch; */
  gap: 0.5rem;
}


/* Old gridWrapper to be depecated and replaced with new gridWrapperHdrMOB for header section only. */

.gridWrapper {
  display: grid;
  grid-auto-columns: auto-fit;
  grid-auto-rows: auto auto auto auto auto;
  /* grid-template-rows: 15% 15% auto auto auto auto auto;
  grid-template-columns: auto-fit; 
     justify-content:stretch;
                       align-content:stretch; */
  gap: 0.5rem;
}

/* Old gridwrapper to be depecated and replaced with new gridwrapperHdrMOB for header section only. */


/*------------------Base Grid Container For Header Below MOBILE MOBILE -----------*/
     
   .gridWrapperHdrMOB {
      display:grid;
      grid-auto-columns:1fr 1fr 1fr;
      grid-auto-rows:auto;
      /* grid-template-rows: 15% 15% auto auto auto auto auto;
      grid-template-columns: auto-fit;
         justify-content:stretch;
                           align-content:stretch; */
      gap:0.5rem;
    }
    /*Base Grid Container Below END END END END MOBILE ═══════════════════════════════════════════════════════════
══════════════════════════════════════════════════════════════════════════════════
     


/* Grid Section Classes BELOW
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■                
                    */
 /* HEADER GRID CLASSES BELOW MOBILE _____________________________________________________________*/

        .LgrdHeaderMob {
      display: grid;
      position: absolute;
      grid-area: 1 / 1 / 1 / 1;
      top: 1%;
        left: 1%;
        margin-left: 4%;
      z-index:77;
      align-self: stretch;
          justify-self: start;

    }
          .RgrdHeaderMob {
      display:grid;
      position: relative;
      grid-area: 1 / 3 / 1 / 3;
      top: 1%;
        left: 0%;
        justify-self: end;

      text-align: center;
      text-transform: uppercase;
    }

    /* HEADER GRID CLASSES END MOBILE _____________________________________________________________*/

  .grdHeroMain {
  position: relative;
  grid-area: 1 / 1 / 1 / 2;

  margin-top: 10%;
  /*      justify-self: stretch;
                           align-self: stretch; */
}

.grdFmMOB {
  display: grid;
  position: absolute;

  grid-area: 1 / 1 / 2 / 4;
  top: 30%;
  left: -1%;
  justify-self: center;
  width: 100%;

  z-index: 35;

  /*      justify-self: stretch;
                           align-self: stretch; */
}

.grdHeroMid {
  position: absolute;
  grid-area: 1 / 1 / 2 / 1;
  top: 1%;

  align-self: start;

  text-align: center;
  text-transform: uppercase;
}


/* CARD GRID SETTINGS ════════════════════════════════════════════════════*/
.grdLftCard {
  position: relative;
  grid-area: 1 / 1 / 1 / 1;
  align-self: center;
}

.grdRtCard {
  position: relative;
  grid-area: 2 / 1 / 2 / 1;
  align-self: stretch;
}

.grdCtrCard {
  position: relative;
  grid-area: 4 / 1 / 5 / 1;
  align-self: stretch;
}

/* CARD GRID SETTINGS END ══════════════════════════════════════════════════════*/

/* FOOTER GRID SETTINGS ══════════════════════════════════════════════════════*/
.grdFootCard {
  position: relative;
  grid-area: 5 / 1 / 5 / 1;
  align-self: start;
}

/* FOOTER GRID SETTINGS END ══════════════════════════════════════════════════════*/

/* GRID SETTINGS END ╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬
╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬╬ */

/* SECTION FORMAT & GRP BELOW ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ 
 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.fmFmtMOB {
  position: absolute;

  top: 2%;
  right: 1%;
  padding: 1%;
  z-index: 30;
}

.heroMainFmt {
  position: relative;
  top: 7%;
  z-index: 1;
  justify-content: center;
}

.heroMidFmt {
  top: 8%;
  padding: 4%;
  z-index: 1;
  justify-content: center;
  filter: blur(0.05rem);
}

/* *****************  CARD formatting BELOW
              ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
              __________________________________________________________________________
                  */
.lftCardFmt {
  position: relative;
  top: 6%;
  z-index: 42;
  justify-content: center;
  padding: 2%;
  width: 97%;
  justify-self: center;
  

}

.rtCardFmt {
  position: relative;
  top: 5%;
  z-index: 41;
  justify-content: center;
  padding: 2%;
  width: 97%;
  justify-self: center;
}

.CtrCardFmt {
  position: relative;
  top: 5%;
  z-index: 41;
  justify-content: center;
  padding: 2%;
  width: 97%;
  justify-self: center;
}

.lftCardWrapper {
  text-align: center;
  background-image: var(--imgBkMobCardRocket);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0rem 1rem 1rem 1rem rgba(0, 0, 0, 0.4);
  z-index: 25;
}

.rtCardWrapper {
  text-align: center;
  background-image: var(--imgMobCardRocket);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  box-shadow: 0rem 1rem 1rem 1rem rgba(0, 0, 0, 0.4);
  z-index: 25;
}

/* Card Formatting END_■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* FOOTER Formatting _■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/
.footCardFmt {
  position: relative;
  top: 5%;
  z-index: 41;
  justify-content: center;
  padding: 2%;
  width: 97%;
  justify-self: center;
}

.footCardWrapper {
  text-align: center;

  z-index: 25;
}

/* FOOTER Formatting END _■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■*/

/* SECTION FORMAT & GRP END ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
    ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒*/

/* Glowing Effects start here ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.cdEffects {
  /* Add shadows to create the "card" effect */
  box-shadow: 0rem 1rem 1rem 1rem rgba(0, 0, 0, 0.4);
  transition: 0.3s;
}

.cdEffects:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.4);
}

.glowEffects {
  -webkit-box-shadow: 0px 0px 105px 45px rgba(98, 46, 255, 0.9);
  -moz-box-shadow: 0px 0px 105px 45px rgba(98, 46, 255, 0.9);
  box-shadow: 0px 0px 105px 45px rgba(98, 46, 255, 0.9);
}

.glowEffectsPi {
  -webkit-box-shadow: 0px 0px 105px 45px rgba(255, 46, 245, 0.7);
  -moz-box-shadow: 0px 0px 45px 25px rgba(255, 46, 245, 0.8);
  box-shadow: 0px 0px 45px 25px rgba(255, 46, 245, 0.6);
}

/* Glowing Effects END here ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

/* FORM FORMATTING FORM FORMATTING FORM FORMATTING ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
            ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
            ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
            ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */

.fmTxtInput {
  font-family: "Xoutfit" sans-serif;
  font-weight: 500;
  margin-top: 1%;
  margin-left: 1%;
  align-content: left;

  font-size: var(--baseFontSize15);
  background: #35354b;
  color: #ffffff;
}