.animated-bg {
    display: block;
    font-size: 52px;
    overflow: hidden;
    color: transparent;
  }

  .animated-bg::before,
  .animated-bg::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: ".";
    mix-blend-mode: screen;
    animation: 44s -27s move infinite ease-in-out alternate;
  }

  .animated-bg::before {
    text-shadow: 1.9998029831em -0.0763451701em 7px #D02A2F, 1.3872129266em 0.594793197em 7px #00A0DF, 2.433065709em 1.7550220636em 7px #592C82, 1.8803295034em 1.0221925833em 7px #D02A2F, 0.7940459842em -0.1925078716em 7px #592C82, 2.2582600786em 0.1369423915em 7px #592C82, -0.4656205413em 1.1654087333em 7px #592C82, -0.091214852em 2.4301961962em 7px #D02A2F, 1.1998172371em 0.287252582em 7px #00A0DF, 1.9729662789em -0.0453149639em 7px #00A0DF, 0.3069943517em 0.4054152951em 7px #D02A2F, 1.6638609356em 2.1211770098em 7px #592C82, 0.6578371586em 0.2800560359em 7px #592C82, -0.3526488757em 1.7817008879em 7px #00A0DF, 2.277763442em 1.8781321692em 7px #592C82, -0.1297899904em -0.4754388338em 7px #592C82, 0.0949289187em 1.1004327667em 7px #D02A2F, -0.2977261019em 0.7919023499em 7px #00A0DF, 0.6811169342em 1.1163273014em 7px #D02A2F, 1.2029874903em 1.2223959674em 7px #00A0DF, 1.3877085679em 2.2974534431em 7px #00A0DF, 0.4568744499em 0.6959810571em 7px #D02A2F, 0.4209994761em 0.5071952386em 7px #592C82, 1.4560467185em 1.158925115em 7px #D02A2F, 2.1645086661em 0.7726802348em 7px #592C82, 2.4816730545em 0.5869709549em 7px #592C82, 1.9478838098em 2.1075573249em 7px #00A0DF, 1.1614331344em 2.3878110342em 7px #D02A2F, 1.3113413007em 1.001431258em 7px #D02A2F, 2.2162134666em 1.3919048791em 7px #D02A2F, -0.205952451em 1.1828253184em 7px #592C82, 0.5760157556em 0.7885771129em 7px #592C82, 2.2868825179em 1.6152778456em 7px #D02A2F, 1.9656214055em 2.2422119873em 7px #D02A2F, 1.6954597804em 0.9128410544em 7px #592C82, 1.9612083961em 1.2950153136em 7px #592C82, 1.1161213489em -0.3035134002em 7px #00A0DF, -0.115753289em -0.0771953109em 7px #592C82, 0.3381908703em 1.4749140843em 7px #D02A2F, 1.205186553em 2.0890267425em 7px #00A0DF, 0.5672373604em -0.157698556em 7px #00A0DF;
    animation-duration: 44s;
    animation-delay: -27s;
  }

  .animated-bg::after {
    text-shadow: -0.4727370865em 1.4582360908em 7px #D02A2F, 2.1402962269em 2.3006564607em 7px #00A0DF, 1.0032082401em 0.6629205101em 7px #00A0DF, 1.1964473058em -0.136822452em 7px #D02A2F, 1.9476972384em -0.2174605539em 7px #D02A2F, 1.7508185492em 1.112190821em 7px #592C82, 1.7298154303em 2.0471156393em 7px #00A0DF, 1.2669455209em 0.668033895em 7px #00A0DF, 2.1294767757em 2.0623161521em 7px #00A0DF, 0.0254656835em 0.6328582266em 7px #592C82, 1.9632807764em 1.6620391435em 7px #00A0DF, 2.2427844645em 0.1032290545em 7px #00A0DF, 2.4760087635em -0.3074443837em 7px #00A0DF, -0.295531042em 1.934329443em 7px #592C82, 1.284803593em 2.2314599916em 7px #D02A2F, 2.0165093164em -0.0444547826em 7px #592C82, 0.1126930004em 0.3373715905em 7px #D02A2F, 0.2972862832em 0.4342859995em 7px #00A0DF, 1.7983755762em 2.4312889342em 7px #592C82, 0.8383515871em 1.6149343374em 7px #D02A2F, 0.8245742152em 2.2788935901em 7px #592C82, 1.1003577766em 1.238732997em 7px #00A0DF, 0.3503874625em 1.6558915047em 7px #D02A2F, 1.6019367117em 0.9686860192em 7px #592C82, 1.8483201431em 1.8363441329em 7px #D02A2F, 0.0510904798em 2.2407957994em 7px #00A0DF, 0.3727288591em 0.4960316991em 7px #592C82, 1.5569092914em 2.0027394589em 7px #D02A2F, 1.4358734185em 2.0823605259em 7px #592C82, 0.2372287898em 0.8779032339em 7px #D02A2F, 1.0021563901em -0.48323807em 7px #D02A2F, -0.1780558357em 0.7192278916em 7px #592C82, 1.4513965424em 1.839904283em 7px #D02A2F, 1.3416888577em 1.8673081186em 7px #00A0DF, 1.851515301em 0.4269327669em 7px #00A0DF, 0.2447564592em 0.3599355126em 7px #592C82, 0.1606186058em 0.722902642em 7px #D02A2F, 1.5033582182em 0.9274078097em 7px #592C82, 2.1048898815em 1.2029262347em 7px #D02A2F, 2.0138443558em 1.0946556308em 7px #D02A2F, -0.4099471331em 1.9482406046em 7px #D02A2F;
    animation-duration: 43s;
    animation-delay: -32s;
  }

  @keyframes move {
    from {
      transform: rotate(0deg) scale(12) translateX(-20px);
    }
    to {
      transform: rotate(360deg) scale(18) translateX(20px);
    }
  }
  /* BETTER TIMES */
  @font-face {
    font-family: "Better Times";
    src: url("../assets/fonts/better-times/BetterTimes.woff2") format("woff2"), url("../assets/fonts/better-times/BetterTimes.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  /* DM SANS */
  @font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../assets/fonts/dm-sans/DMSans-Regular.ttf") format("truetype");
  }
  @font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../assets/fonts/dm-sans/DMSans-Bold.ttf") format("truetype");
  }
  /* MACKLIN
  Macklin Text Medium
  Macklin Text Medium Italic
  Macklin Text Bold
  Macklin Text Bold Italic
  */
  @font-face {
    font-family: "Macklin Display";
    src: url("../assets/fonts/macklin/MacklinDisplay-Regular.eot");
    src: url("../assets/fonts/macklin/MacklinDisplay-Regular.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/macklin/MacklinDisplay-Regular.woff2") format("woff2"), url("../assets/fonts/macklin/MacklinDisplay-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Macklin Display";
    src: url("../assets/fonts/macklin/MacklinDisplay-Medium.woff2") format("woff2"), url("../assets/fonts/macklin/MacklinDisplay-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Macklin Display";
    src: url("../assets/fonts/macklin/MacklinDisplay-MediumIt.woff2") format("woff2"), url("../assets/fonts/macklin/MacklinDisplay-MediumIt.woff") format("woff");
    font-weight: 500;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Macklin Display";
    src: url("../assets/fonts/macklin/MacklinDisplay-Bold.woff2") format("woff2"), url("../assets/fonts/macklin/MacklinDisplay-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Macklin Display";
    src: url("../assets/fonts/macklin/MacklinDisplay-BoldIt.woff2") format("woff2"), url("../assets/fonts/macklin/MacklinDisplay-BoldIt.woff") format("woff");
    font-weight: 700;
    font-style: italic;
    font-display: swap;
  }
  /* TELLUMO */
  @font-face {
    font-family: "Tellumo";
    src: url("../assets/fonts/tellumo/Tellumo.eot");
    src: url("../assets/fonts/tellumo/Tellumo.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/tellumo/Tellumo.woff2") format("woff2"), url("../assets/fonts/tellumo/Tellumo.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Tellumo";
    src: url("../assets/fonts/tellumo/Tellumo-Medium.eot");
    src: url("../assets/fonts/tellumo/Tellumo-Medium.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/tellumo/Tellumo-Medium.woff2") format("woff2"), url("../assets/fonts/tellumo/Tellumo-Medium.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Tellumo";
    src: url("../assets/fonts/tellumo/Tellumo-Bold.eot");
    src: url("../assets/fonts/tellumo/Tellumo-Bold.eot?#iefix") format("embedded-opentype"), url("../assets/fonts/tellumo/Tellumo-Bold.woff2") format("woff2"), url("../assets/fonts/tellumo/Tellumo-Bold.woff") format("woff");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  .arrow-down {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transform: translateX(-50%);
  }

  .pre-footer-marketing-banner-animated-background {
    background: linear-gradient(-45deg, #592c82, #00a0df);
    background-size: 400% 400%;
    animation: gradient 10s ease infinite;
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  #product-detail-page .background-image {
    background-image: url("../assets/product-detail-page/product-detail-hero-bg.jpg");
  }

  @media screen and (min-width: 1024px) {
    #contact-page #contact-form {
      background-image: url("../assets/contact/diamondslockup1.png"), url("../assets/contact/diamondslockup2.png");
      background-position: 0 -80px, 100% 110%;
      background-repeat: no-repeat, no-repeat;
      background-size: 284px, 330px;
    }
  }

  .animated-bg {
    display: block;
    font-size: 52px;
    overflow: hidden;
    color: transparent;
  }

  .animated-bg::before,
  .animated-bg::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 3em;
    height: 3em;
    content: ".";
    mix-blend-mode: screen;
    animation: 44s -27s move infinite ease-in-out alternate;
  }

  .animated-bg::before {
    text-shadow: 2.4161047549em 1.4836741343em 7px #592C82, 1.1308477398em 1.6668968906em 7px #592C82, 1.837058356em 1.576615493em 7px #592C82, 1.3152435972em 1.6813565376em 7px #00A0DF, 1.5647851302em -0.0993977003em 7px #00A0DF, 1.777092979em 0.3630601591em 7px #D02A2F, 0.7623213712em 2.3243814187em 7px #592C82, 0.108562175em 1.1402696405em 7px #592C82, 0.3389761956em 0.6843138662em 7px #D02A2F, 2.245668485em 1.8240637164em 7px #592C82, 1.5473081774em 0.4552247552em 7px #592C82, 2.4629598842em 1.0499808214em 7px #592C82, -0.3702564309em 0.0334720522em 7px #D02A2F, 2.491054947em 1.2468681613em 7px #00A0DF, 2.4646638296em 0.1507394092em 7px #00A0DF, 0.1482447347em 0.5130927946em 7px #00A0DF, 1.9199805479em 0.7036571197em 7px #00A0DF, 0.0461531115em 2.4930285151em 7px #D02A2F, 1.9365574714em -0.2170460478em 7px #592C82, -0.1395007444em 0.0586132242em 7px #592C82, -0.2042578595em 1.0136547137em 7px #00A0DF, 0.0752719076em 0.3117924016em 7px #592C82, 1.3889965167em 2.4784163137em 7px #592C82, 2.3208305206em 0.4390522796em 7px #00A0DF, 1.0383463907em 0.5119714464em 7px #D02A2F, 0.9780091561em 1.3304459806em 7px #00A0DF, 0.5711263405em 1.0060618941em 7px #00A0DF, 1.9925699545em 2.3778531708em 7px #00A0DF, 0.2259503392em 1.1318960985em 7px #D02A2F, 0.3544351697em 0.3101873957em 7px #D02A2F, 0.5686247492em -0.3660965908em 7px #D02A2F, -0.2177332296em 1.3294881209em 7px #592C82, -0.1123782235em 0.5878234365em 7px #592C82, 0.073690431em 1.781666932em 7px #00A0DF, 2.0985665084em -0.4557058762em 7px #D02A2F, 1.4839690947em 1.4875662411em 7px #D02A2F, -0.3361725798em 1.3153500298em 7px #D02A2F, 2.3431087921em 0.5910867375em 7px #00A0DF, 1.8501866613em 1.5912457184em 7px #592C82, 0.1497605876em 2.1562284587em 7px #592C82, -0.091502157em 2.4058047473em 7px #D02A2F;
    animation-duration: 44s;
    animation-delay: -27s;
  }

  .animated-bg::after {
    text-shadow: 0.004128443em -0.3790806106em 7px #00A0DF, 0.1955303107em 0.5837268434em 7px #592C82, 1.6819527793em 0.3312767286em 7px #592C82, 0.0067357174em 1.1419471632em 7px #D02A2F, 0.9750608078em 2.4160828023em 7px #592C82, 0.4073617419em -0.3687149413em 7px #D02A2F, 0.7187865343em -0.129553591em 7px #00A0DF, 0.2238064514em 1.7678268015em 7px #592C82, 0.0421335079em 2.3588654187em 7px #00A0DF, 1.413403858em 0.4744838521em 7px #00A0DF, 1.9395849247em 2.2192000357em 7px #592C82, 0.8159301481em 2.017640602em 7px #592C82, 1.4910919186em 0.3361407879em 7px #00A0DF, 1.6998010386em 0.5343118654em 7px #592C82, 1.7004349722em 1.5808176251em 7px #D02A2F, -0.1854081195em 0.0345832945em 7px #D02A2F, 2.3361867431em 0.5193251058em 7px #592C82, 1.4062635465em -0.2375038394em 7px #00A0DF, 1.7270759674em 0.5857705593em 7px #D02A2F, 1.7329596873em -0.1609843076em 7px #592C82, 2.316367616em -0.333480502em 7px #592C82, 1.8247586159em 1.7827980312em 7px #D02A2F, -0.0289111308em 1.3936186665em 7px #00A0DF, 0.662839079em 2.0513486023em 7px #00A0DF, 0.920367629em 2.0153408564em 7px #00A0DF, 0.4340162637em 2.0616625962em 7px #D02A2F, 0.2335043949em 0.7111419312em 7px #00A0DF, 0.1232842829em -0.1208524394em 7px #00A0DF, 2.0417039921em 1.089281033em 7px #D02A2F, -0.4804707582em 0.8413356276em 7px #592C82, 0.3404528638em 0.324337152em 7px #00A0DF, 0.9898874954em 2.1316321278em 7px #00A0DF, 0.3624628178em 2.0481915213em 7px #00A0DF, 0.521383423em 1.9404618798em 7px #D02A2F, -0.1445572778em 2.4339603612em 7px #D02A2F, -0.4024456029em 2.2686250669em 7px #D02A2F, 1.5236149378em 0.1958668242em 7px #D02A2F, 0.9899031878em 2.4281230666em 7px #00A0DF, 1.1493236241em 0.9995360163em 7px #592C82, 1.2660694189em 1.8923483068em 7px #592C82, -0.0932637161em 1.9169929342em 7px #D02A2F;
    animation-duration: 43s;
    animation-delay: -32s;
  }

  @keyframes move {
    from {
      transform: rotate(0deg) scale(12) translateX(-20px);
    }
    to {
      transform: rotate(360deg) scale(18) translateX(20px);
    }
  }

  .lg\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .md\:px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .px-24 {
    padding-left: 6rem;
    padding-right: 6rem;
  }

  .sm\:items-center {
    align-items: center;
  }

  .min-w-\[285px\] {
    min-width: 285px;
  }

  @media (min-width: 960px) {
    .lg\:items-start {
      align-items: flex-start;
    }
  }

  @media (min-width: 1280px) {
    .xl\:px-24 {
      padding-left: 8rem;
      padding-right: 8rem;
    }
  }

  @media (min-width: 1400px) and (max-width: 1536px) {
    .xl\:px-24 {
      padding-left: 10rem;
      padding-right: 10rem;
    }
  }

  @media (min-width: 1537px) {
    .xxl\:px-40 {
      padding-left: 22rem;
      padding-right: 22rem;
    }
  }