/* ==================================================================
   Last Resort Development — VICE background FX + design refinements
   Loaded AFTER the theme css (store.css) so the theme stays intact.
   Vice City / GTA VI mood: sunset horizon, palms, neon skyline glow.
   ================================================================== */

/* ---------- 1. animated background layer -------------------------- */
.lr-fx {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.lr-fx canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* drifting sunset blooms behind the particles */
.lr-fx::before {
  content: "";
  position: absolute;
  inset: -22%;
  background:
    radial-gradient(40% 30% at 16% 20%, rgb(164 107 255 / 0.34), transparent 68%),
    radial-gradient(34% 26% at 84% 22%, rgb(255 61 154 / 0.28), transparent 70%),
    radial-gradient(48% 34% at 50% 92%, rgb(255 113 124 / 0.30), transparent 72%),
    radial-gradient(26% 20% at 72% 64%, rgb(56 224 208 / 0.14), transparent 72%);
  filter: blur(8px);
}

/* film grain scanlines + vignette on top of the particles */
.lr-fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom,
      rgb(255 255 255 / 0.028) 0 1px,
      transparent 1px 3px),
    radial-gradient(120% 90% at 50% 42%, transparent 46%, rgb(5 4 14 / 0.55) 100%);
}

/* slow light beam sweeping across the page */
.lr-fx-sweep {
  position: absolute;
  top: -30%;
  left: -35%;
  width: 45%;
  height: 160%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgb(255 61 154 / 0.06) 42%,
    rgb(255 217 138 / 0.14) 50%,
    rgb(164 107 255 / 0.07) 58%,
    transparent 100%);
  filter: blur(16px);
  transform: rotate(9deg);
}

/* ---------- 1b. sunset horizon: glow + perspective grid ----------- */
.lr-fx-horizon {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -2px;
  height: 40vh;
  background:
    linear-gradient(to top,
      rgb(255 61 154 / 0.22) 0%,
      rgb(233 99 199 / 0.12) 30%,
      transparent 76%),
    repeating-linear-gradient(to right,
      rgb(255 61 154 / 0.13) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom,
      rgb(255 217 138 / 0.10) 0 1px, transparent 1px 46px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 86%);
  mask-image: linear-gradient(to top, #000 0%, transparent 86%);
}

/* the setting sun, low on the horizon, with art-deco slats */
.lr-fx-sun {
  position: absolute;
  left: 50%;
  bottom: -22vh;
  width: clamp(420px, 58vw, 900px);
  aspect-ratio: 5 / 2;
  translate: -50% 0;
  border-radius: 999px 999px 0 0;
  background: radial-gradient(120% 200% at 50% 100%,
    rgb(255 246 220 / 0.50) 0%,
    rgb(255 198 136 / 0.40) 30%,
    rgb(255 96 150 / 0.28) 58%,
    rgb(164 107 255 / 0.12) 80%,
    transparent 92%);
  -webkit-mask-image:
    repeating-linear-gradient(to bottom, #000 0 15px, transparent 15px 25px),
    linear-gradient(to top, #000 26%, transparent 94%);
  -webkit-mask-composite: source-in;
  mask-image:
    repeating-linear-gradient(to bottom, #000 0 15px, transparent 15px 25px),
    linear-gradient(to top, #000 26%, transparent 94%);
  mask-composite: intersect;
  filter: blur(1.5px);
  opacity: 0.85;
}

/* palm silhouettes framing the bottom of the viewport */
.lr-fx-palms {
  position: absolute;
  inset: auto 0 0 0;
  height: 46vh;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300'%3E%3Cg fill='%23050410'%3E%3Cpath d='M66 300 C60 214 58 148 68 100 L84 100 C76 152 78 226 88 300 Z'/%3E%3Cpath d='M75 96 C52 96 28 98 2 108 C26 82 54 82 75 96 Z'/%3E%3Cpath d='M75 96 C50 78 24 70 -2 68 C24 58 54 74 75 96 Z'/%3E%3Cpath d='M75 96 C62 70 46 44 24 24 C52 40 70 68 75 96 Z'/%3E%3Cpath d='M75 96 C78 66 74 34 86 6 C94 38 92 68 75 96 Z'/%3E%3Cpath d='M75 96 C92 68 116 46 146 34 C122 56 96 70 75 96 Z'/%3E%3Cpath d='M75 96 C98 80 126 78 152 86 C126 92 98 88 75 96 Z'/%3E%3Cpath d='M75 96 C98 100 122 112 138 134 C114 112 96 104 75 96 Z'/%3E%3Ccircle cx='70' cy='104' r='5'/%3E%3Ccircle cx='82' cy='106' r='5'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='300' viewBox='0 0 150 300'%3E%3Cg fill='%23050410' transform='scale(-1,1) translate(-150,0)'%3E%3Cpath d='M66 300 C60 214 58 148 68 100 L84 100 C76 152 78 226 88 300 Z'/%3E%3Cpath d='M75 96 C52 96 28 98 2 108 C26 82 54 82 75 96 Z'/%3E%3Cpath d='M75 96 C50 78 24 70 -2 68 C24 58 54 74 75 96 Z'/%3E%3Cpath d='M75 96 C62 70 46 44 24 24 C52 40 70 68 75 96 Z'/%3E%3Cpath d='M75 96 C78 66 74 34 86 6 C94 38 92 68 75 96 Z'/%3E%3Cpath d='M75 96 C92 68 116 46 146 34 C122 56 96 70 75 96 Z'/%3E%3Cpath d='M75 96 C98 80 126 78 152 86 C126 92 98 88 75 96 Z'/%3E%3Cpath d='M75 96 C98 100 122 112 138 134 C114 112 96 104 75 96 Z'/%3E%3Ccircle cx='70' cy='104' r='5'/%3E%3Ccircle cx='82' cy='106' r='5'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left -26px bottom -14px, right -22px bottom -10px;
  background-size: auto 46vh, auto 36vh;
  opacity: 0.92;
  transform-origin: bottom center;
}

@media (max-width: 720px) {
  .lr-fx-palms { background-size: auto 30vh, auto 24vh; opacity: 0.8; }
  .lr-fx-sun { bottom: 8vh; }
}

/* keep the real page above the fx layer */
.site { position: relative; z-index: 1; }

/* ---------- 2. global polish -------------------------------------- */
html { scroll-behavior: smooth; }

::selection { background: rgb(255 61 154 / 0.32); color: #fff; }

* { scrollbar-color: rgb(255 61 154 / 0.45) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgb(255 255 255 / 0.03); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(rgb(255 217 138 / 0.6), rgb(255 61 154 / 0.6), rgb(164 107 255 / 0.6));
  border-radius: 10px;
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid rgb(255 61 154 / 0.85);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. header + navigation -------------------------------- */
.site-header-inner,
.site-navigation .menu {
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

.site-navigation .navigation-list a {
  position: relative;
  transition: color 0.22s ease, text-shadow 0.22s ease;
}

.site-navigation .navigation-list a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ffd98a, #ff3d9a, #a46bff);
  box-shadow: 0 0 12px rgb(255 61 154 / 0.8);
  transition: left 0.26s ease, right 0.26s ease;
}

.site-navigation .navigation-list a:hover::after,
.site-navigation .navigation-list .active > a::after,
.site-navigation .navigation-list a.link-active::after {
  left: 0;
  right: 0;
}

.site-navigation .navigation-list a:hover {
  color: #fff;
  text-shadow: 0 0 16px rgb(255 61 154 / 0.7);
}

/* ---------- 4. hero ----------------------------------------------- */
.lr-hero { position: relative; overflow: hidden; }

/* chrome / sunset shimmer on the headline, GTA VI style */
.lr-hero-title {
  background: linear-gradient(100deg,
    #ffffff 8%, #ffe9c2 22%, #ff9fc4 38%, #ffffff 52%, #c8b4ff 70%, #ffe9c2 84%, #ffffff 96%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgb(255 61 154 / 0.35));
}

.lr-hero-compact .lr-hero-sub { max-width: 62ch; margin-inline: auto; }

/* thin light line travelling across the hero panel */
.lr-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffd98a, #ff3d9a, #a46bff, transparent);
  opacity: 0.75;
}

/* ---------- 5. buttons -------------------------------------------- */
.lr-cta,
.btn-primary,
.btn-secondary {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.lr-cta::after,
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.5), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.lr-cta:hover::after,
.btn-primary:hover::after { left: 130%; }

.lr-cta:hover,
.btn-primary:hover,
.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgb(255 61 154 / 0.32), 0 0 0 1px rgb(255 61 154 / 0.3);
}

.lr-cta:active,
.btn-primary:active { transform: translateY(0); }

/* ---------- 6. usp strip ------------------------------------------ */
.lr-usp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

.lr-usp > * {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.24s ease, background-color 0.24s ease;
}

.lr-usp > *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(#ffd98a, #ff3d9a, #a46bff);
  transform: scaleY(0.25);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.lr-usp > *:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / 0.45); }
.lr-usp > *:hover::before { transform: scaleY(1); }

/* ---------- 7. section heads -------------------------------------- */
.lr-shelf-head { position: relative; }

.lr-shelf-count {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 14px;
  border: 1px solid rgb(255 217 138 / 0.4);
  border-radius: 999px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(255 226 178 / 0.95);
  background: rgb(255 217 138 / 0.07);
}

/* ---------- 8. product grid + cards ------------------------------- */
.lr-shelf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}

.lr-shelf-grid .store-product {
  position: relative;
  isolation: isolate;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.28s ease;
}

/* animated sunset frame revealed on hover */
.lr-shelf-grid .store-product::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, #ffd98a, #ff3d9a 45%, #a46bff 75%, #ffd98a);
  background-size: 220% 220%;
  opacity: 0;
  transition: opacity 0.28s ease;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.lr-shelf-grid .store-product:hover,
.lr-shelf-grid .store-product:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.55), 0 0 30px rgb(255 61 154 / 0.2);
}

.lr-shelf-grid .store-product:hover::before,
.lr-shelf-grid .store-product:focus-within::before { opacity: 1; }

.store-product .image-link,
.store-product .image {
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1), filter 0.35s ease;
}

.store-product:hover .image {
  transform: scale(1.06);
  filter: saturate(1.18) brightness(1.06);
}

.store-product .product-title { transition: color 0.2s ease, text-shadow 0.2s ease; }
.store-product:hover .product-title { color: #fff; text-shadow: 0 0 18px rgb(255 61 154 / 0.55); }

.store-product .price { transition: text-shadow 0.24s ease; }
.store-product:hover .price { text-shadow: 0 0 16px rgb(255 217 138 / 0.5); }

.store-product .discount { opacity: 0.75; }

/* loading skeleton shown until the shelf script injects the cards */
[data-lr-loading] {
  position: relative;
  min-height: 180px;
}

[data-lr-loading]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 0%,
    rgb(255 61 154 / 0.08) 45%,
    rgb(255 217 138 / 0.14) 50%,
    rgb(164 107 255 / 0.08) 55%,
    transparent 100%);
  background-size: 220% 100%;
  border: 1px solid rgb(173 181 255 / 0.12);
  border-radius: 8px;
}

/* ---------- 9. reduced motion ------------------------------------
   The animated backdrop is the identity of this store, so it is never
   switched off here — it is slowed right down instead, and only the
   abrupt, attention-grabbing motion is removed.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .lr-fx canvas { opacity: 1; animation: none; }

}

/* ==================================================================
   STILL MODE — every decorative layer is now painted once and frozen.
   The particle canvas and the light sweep are removed entirely.
   ================================================================== */
.lr-fx canvas,
.lr-fx-sweep { display: none !important; }

/* soft, motionless sunset blooms */
.lr-fx::before { opacity: 0.9; }
.lr-fx::after { opacity: 0.28; }

/* art-deco sun: sits low, calm, behind the content */
.lr-fx-sun {
  bottom: -24vh;
  opacity: 0.62;
  filter: blur(0.3px);
}

/* horizon grid: static perspective floor */
.lr-fx-horizon {
  opacity: 0.4;
  transform: none;
}

/* palm silhouettes, framing the page corners */
.lr-fx-palms {
  opacity: 0.8;
  rotate: none;
  transform: none;
  filter: blur(0.2px);
}

/* headings and rules keep their neon, they just stop pulsing */
.lr-section-title,
.lr-hero-title { filter: none; }
.lr-hero-title { background-position: 0 0; }

@media (max-width: 900px) {
  .lr-fx-sun { bottom: -18vh; opacity: 0.5; }
  .lr-fx-palms { opacity: 0.55; }
}


/* ==================================================================
   MOTION SCALE + THE HOVER STATES THAT WERE MISSING
   ------------------------------------------------------------------
   This file is loaded after store.css, so it gets the last word on
   timing. Everything interactive now shares one curve and one
   duration scale: 340ms for the normal case, 520ms for the slow
   things (image zoom, glow, light sweep) and 220ms for a press, so
   the store still answers instantly to a click. Hover only - nothing
   in here plays by itself.
   ================================================================== */

:root {
  --lr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --lr-dur-fast: 220ms;
  --lr-dur: 340ms;
  --lr-dur-slow: 520ms;
}

a,
button,
input,
select,
textarea,
.btn-primary,
.btn-secondary,
.btn-tertiary,
.lr-cta,
.site-title a,
.lr-brandmark,
.site-header .info,
.site-header .info .action,
.site-navigation .navigation-list a,
.site-navigation .navigation-list a::after,
.store-product,
.store-product .product-title a,
.store-product .price,
.lr-shelf-grid .store-product,
.site-home-categories .category,
.lr-usp > *,
.lr-usp > *::before,
.lr-badge,
.lr-off,
.lr-shelf-count,
.lr-rule,
.site-footer a,
.site-footer-inner .we-accept li,
.site-footer-inner .we-accept img,
.quantity-field .adjust,
.quantity-field .open-basket,
.lr-toolbar .lr-field input,
.lr-toolbar .lr-field select {
  transition-duration: var(--lr-dur) !important;
  transition-timing-function: var(--lr-ease) !important;
}

/* the deliberately slow ones */
.btn-primary::after,
.lr-cta::after,
.store-product .image,
.store-product .image img,
.store-product img,
.lr-shelf-grid .store-product .image {
  transition-duration: var(--lr-dur-slow) !important;
  transition-timing-function: var(--lr-ease) !important;
}

/* a press should never feel laggy */
.btn-primary:active,
.btn-secondary:active,
.btn-tertiary:active,
.lr-cta:active,
.quantity-field .adjust:active,
.store-product:active {
  transition-duration: var(--lr-dur-fast) !important;
}

/* ---- search field and sort select: they had no hover at all ----- */
.lr-toolbar .lr-field input:hover,
.lr-toolbar .lr-field select:hover {
  border-color: rgb(255 61 154 / 0.42);
  background-color: rgb(255 255 255 / 0.05);
}

/* ---- quantity stepper ------------------------------------------- */
.quantity-field .adjust:hover {
  color: #fff;
  border-color: rgb(255 61 154 / 0.5);
  background-color: rgb(255 61 154 / 0.12);
}

/* ---- server / Discord chips in the header ----------------------- */
.site-header .info:hover {
  border-color: rgb(255 61 154 / 0.45);
  background-color: rgb(255 255 255 / 0.07);
  translate: 0 -1px;
}
.site-header .info:hover .action { color: var(--vice-gold); }

/* ---- payment icons in the footer -------------------------------- */
.site-footer-inner .we-accept li:hover img { opacity: 1; }

/* ---- the title of a hovered card follows the card --------------- */
.store-product:hover .product-title a { color: var(--vice-pink); }

/* ---- tags answer the card hover instead of sitting there dead --- */
.store-product:hover .lr-badge-sale,
.store-product:hover .lr-off {
  border-color: rgb(255 199 106 / 0.75);
  box-shadow: 0 0 18px -4px rgb(255 199 106 / 0.4);
}
.store-product:hover .lr-badge-free {
  border-color: rgb(96 240 214 / 0.75);
  box-shadow: 0 0 18px -4px rgb(96 240 214 / 0.4);
}

/* ---- landing brandmark ------------------------------------------ */
.lr-brandmark:hover { filter: drop-shadow(0 0 30px rgb(255 61 154 / 0.3)); }


/* ---- the toolbar select has no wrapper class -------------------- */
.lr-toolbar input:hover,
.lr-toolbar select:hover {
  border-color: rgb(255 61 154 / 0.42);
  background-color: rgb(255 255 255 / 0.05);
}

/* ==================================================================
   REDUCED MOTION HAS THE FINAL SAY
   ------------------------------------------------------------------
   The motion scale above uses !important, which outranks a plain
   "*" reset, so the same selector list is repeated here - last in
   the last stylesheet - to make sure a visitor who asks their system
   for less motion really gets a static store.
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
  a,
  button,
  input,
  select,
  textarea,
  .btn-primary,
  .btn-secondary,
  .btn-tertiary,
  .lr-cta,
  .btn-primary::after,
  .lr-cta::after,
  .site-title a,
  .lr-brandmark,
  .site-header .info,
  .site-header .info .action,
  .site-navigation .navigation-list a,
  .site-navigation .navigation-list a::after,
  .store-product,
  .store-product .image,
  .store-product .image img,
  .store-product img,
  .store-product .product-title a,
  .store-product .price,
  .lr-shelf-grid .store-product,
  .lr-shelf-grid .store-product .image,
  .site-home-categories .category,
  .lr-usp > *,
  .lr-usp > *::before,
  .lr-badge,
  .lr-off,
  .lr-shelf-count,
  .lr-rule,
  .site-footer a,
  .site-footer-inner .we-accept li,
  .site-footer-inner .we-accept img,
  .quantity-field .adjust,
  .quantity-field .open-basket,
  .lr-toolbar input,
  .lr-toolbar select,
  *,
  *::before,
  *::after {
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}


/* ==================================================================
   HANDS OFF THE TEBEX CHECKOUT
   ------------------------------------------------------------------
   Tebex.js fades its checkout lightbox in and only builds the
   payment iframe once the opacity transition fires transitionend.
   A global motion reset therefore does not just remove an animation,
   it breaks "Proceed to checkout" completely - the spinner spins
   forever. These rules are class-based, so they outrank any "*"
   reset even when that reset uses !important, and they are outside
   the reduced-motion query on purpose: this transition is not
   decoration, it is part of the checkout handshake.
   ================================================================== */

.tebex-js-lightbox,
.tebex-js-lightbox__holder,
.tebex-js-lightbox * {
  transition-property: opacity !important;
  transition-duration: 300ms !important;
  transition-delay: 0ms !important;
  transition-timing-function: ease !important;
}

.tebex-js-lightbox--visible .tebex-js-spinner {
  animation-duration: 1s !important;
  animation-iteration-count: infinite !important;
}


/* =================================================================
   THREE CARDS PER ROW
   -----------------------------------------------------------------
   lr-fx.css is loaded after store.css, and the .lr-shelf-grid rule
   further up this file (repeat(auto-fill, minmax(240px, 1fr))) was
   still handing the landing shelf five 240px columns - too small to
   read the cover art. The track count is explicit here too, so the
   landing shelf and the category listing agree: 1, then 2, then 3,
   and it stops at three on desktop.
   ================================================================= */
.store-products-images,
.lr-shelf-grid {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .store-products-images,
  .lr-shelf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .store-products-images,
  .lr-shelf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

body {
  position: relative;
}

.lr-fx-palms {
  opacity: 0.42;
  -webkit-mask-image: linear-gradient(to top, #000 40%, transparent 100%);
  mask-image: linear-gradient(to top, #000 40%, transparent 100%);
}

.lr-fx-palms.lr-fx-palms-detached {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  pointer-events: none;
}

.site-footer {
  margin-top: 220px;
}