/* CSS reset start */
:root {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeSpeed;
   --body-bg: #131415;
   --lighter-bg: #181A1B;
   --footer-bg: #111213;
   --body-txt: hsl(0 0% 51% / 1);
   --heading-txt: #fff;
   --stroke-clr: #26282B;
   --pink: rgba(255, 142, 247, 0.4);
   --blue: rgba(163, 249, 255, 0.4);

   --ff-body: 'Montserrat', sans-serif;
}

@property --gradient-angle {
   syntax: "<angle>";
   initial-value: 0deg;
   inherits: false;
}

::selection {
   color: #0e0e0e;
   background-color: var(--heading-txt);
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after {
   box-sizing: border-box;
}

* {
   margin: 0;
   padding: 0;
   font: inherit;
}

ul[role="list"] {
  list-style: none;
}

html {
   -webkit-text-size-adjust: 100%; /* iOS Safari */
   -moz-text-size-adjust: 100%;    /* Firefox */
   text-size-adjust: 100%;         /* Standard */
}

html:focus-within {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

html,
body {
  height: 100%;
}

body {
   background-color: var(--body-bg);
   overscroll-behavior: none;  /* stops mac overflow scroll*/
   font-family: var(--ff-body);
   font-weight: 500;
}

img,
svg {
  max-width: 100%;
  display: block;
  user-select: none;
}

button,
input,
textarea {
  font: inherit;
}

h1, h2, h3 {
   color: var(--heading-txt);
}

p {
   font-size: 1rem;
   font-weight: 500;
   color: var(--body-txt);
   line-height: 1.5;
}

a,
a:visited {
   text-decoration: none;
   color: var(--body-txt);
   font-weight: 500;
}
/* CSS reset end */

/* custom scrollbar */
::-webkit-scrollbar {
  width: 0.9em;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background-color: var(--body-bg);
}

::-webkit-scrollbar-thumb {
  background-color: var(--body-txt);
  border-radius: 1em;
  border: .25em solid var(--body-bg);
}

/* Utility classes */
main {
   margin-top: 7em;
}

.section {
   margin-top: 10rem;
}

.subpage-section {
   margin-top: 7rem;
}

.container {
   width: min(90%, 75rem);
   margin-inline: auto;
}

.fit {
   width: fit-content;
}

.h-flex-section {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 2rem;
}

.section-heading {
   color: var(--heading-txt);
   font-size: clamp(1.75rem, 1.2727rem + 2.1818vw, 2.5rem);
   font-weight: 800;
   line-height: 1.2;
   text-transform: uppercase;
   margin-bottom: 0.5rem;
}

.text-center {
   text-align: center;
}

/* intro animation */
.intro {
   position: fixed;
   z-index: 99999999;
   left: 0;
   top: 0;
   width: 100%;
   height: 100vh;
   background-color: #161616;
   transition: 1s;   /* Speed of splash screen */
}

.intro-logo-header {
   display: flex;
   position: absolute;
   top: 40%;
   left: 50%;
   transform: translate(-50%, -50%);
   color: var(--heading-txt);
}

.intro-svg {
   width: 1.875rem;
   height: 1.875rem;
}

.intro-logo {
   font-size: 1.5rem;
   position: relative;
   display: inline-block;
   bottom: -1.25rem;
   opacity: 0;
   text-transform: uppercase;
   font-weight: 400;
   flex: 0 0 auto;
}

.intro-logo.active {
   bottom: 0;
   opacity: 1;
   transition: ease-in-out 0.5s;
}

.intro-logo.fade {
   bottom: 150px;
   opacity: 0;
   transition: ease-in-out 0.5s;
}

/* flare */
.flare-container {
   position: absolute;
   top: 0;
   left: 50%;
   z-index: 1;
   transform: translateX(-50%);
   pointer-events: none;
   user-select: none;
}

/* Header */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
  width: min(90%, 75rem);
  margin-inline: auto;
}

.mobile-nav-toggle {
  display: none;
  background: rgba(255, 255, 255, 0.05);
  padding: .8em;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  --button-color-accent: white;
}

.mobile-nav-toggle .line {
  transition: .5s;
  transform-origin: center;
}

.mobile-nav-toggle:hover .line {
  transition: .5s, opacity .3s;
}

.mobile-nav-toggle[aria-expanded="true"] :is(.top, .bottom) {
  y: 50;
}

.mobile-nav-toggle[aria-expanded="true"] .top {
  transform: rotate(-45deg);
}

.mobile-nav-toggle[aria-expanded="true"] .middle {
  opacity: 0;
}

.mobile-nav-toggle[aria-expanded="true"] .bottom {
  transform: rotate(45deg);
}

.mobile-nav-toggle[aria-expanded="true"] {
  --button-color-accent: black;
  background-color: white;
}

.primary-navigation {
   display: flex;
   align-items: center;
   gap: 2.5rem;
}

.nav-logo,
.nav-logo:visited,
.footer-logo,
.footer-logo:visited {
   color: var(--heading-txt);
   display: flex;
   align-items: center;
   font-size: 1.125rem;
   font-weight: 700;
   text-transform: uppercase;
}

.nav-logo-icon {
   margin-right: .5em;
}

.nav-logo span {
   color: var(--heading-txt);
   font-weight: normal;
   letter-spacing: .1rem;
}

ul li {
   list-style: none;
}

li a {
   display: inline-block;
}

a.current {
   position: relative;
   font-weight: 600;
   color: var(--heading-txt);
   pointer-events: none;
}

a.current::before {
   content: '';
   position: absolute;
   bottom: -.7em;
   z-index: 9;
   left: 50%;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--heading-txt);
}

.nav-cta,
.nav-cta:visited {
   color: var(--body-bg);
   background-color: var(--heading-txt);
   font-weight: 700;
   text-transform: uppercase;
   padding: .7em 1em;
   border-radius: 0.625rem;
   letter-spacing: 0.02em;
   position: relative;
}

/* Landing page */

/* left side */
.hero-section {
   margin-top: 8em;
   display: flex;
   justify-content: space-between;
}

.hero-social-proof {
   display: flex;
   align-items: center;
   gap: 0.625rem;
   margin-bottom: .5em;
   overflow: hidden;
}

.stars {
   display: flex;
   gap: 0.25rem;
}

.social-proof-text {
   margin-top: .2em;
}

[data-underline],
[data-underline-white] {
   position: relative;
}

[data-underline="true"]::after,
[data-underline-white="true"]::after {
   position: absolute;
   content: "";
   height: 1px;
   width: 100%;
   left: 0;
   bottom: 0;
   transform: scaleX(1);
   transform-origin: left;
   transition: transform 0.735s cubic-bezier(0.65, 0.05, 0, 1);
}

[data-underline="true"]:hover::after,
[data-underline-white="true"]:hover::after {
   transform: scaleX(0);
   transform-origin: right;
}

[data-underline="true"]::after {
   background-color: var(--body-txt);
}

[data-underline-white="true"]::after {
   background-color: var(--heading-txt);
}

.hero-heading {
   font-size: clamp(1.75rem, 1.2727rem + 2.1818vw, 2.5rem);
   max-width: 20ch;
}

.hero-desc {
   max-width: 450px;
}

.ctas {
   display: inline-flex;
   align-items: center;
   gap: 1rem;
   margin-top: 1.5rem;
}

.primary-cta,
.primary-cta:visited {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
   color: var(--body-bg);
   border-radius: 1em;
   border: 0;
   background-color: white;
   padding: 1em 1.4em;
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 0.02em;
   font-size: clamp(1rem, 0.9219rem + 0.25vw, 1.0625rem);
   cursor: pointer;
   position: relative;
}


.primary-cta::after,
.nav-cta::after {
   content: "";
   position: absolute;
   inset: -0.2rem;
   z-index: -1;
   background: conic-gradient(
      from var(--gradient-angle),
      var(--pink),
      var(--blue),
      var(--blue),
      var(--pink)
   );
   filter: blur(2rem);
   -webkit-filter: blur(2rem);
   animation: rotation 3s linear infinite;
}

@keyframes rotation {
   0% {
      --gradient-angle: 0deg;
   }
   100% {
      --gradient-angle: 360deg;
   }
}

@-webkit-keyframes rotation {
   0% { --gradient-angle: 0deg; }
   100% { --gradient-angle: 360deg; }
}

.primary-cta.secondary-cta,
.primary-cta.secondary-cta:visited {
   background: linear-gradient(0deg, var(--body-bg));
   color: var(--body-txt);
   border: 2px solid var(--stroke-clr);
   position: relative;
   overflow: hidden;
}

.primary-cta.secondary-cta::before,
.primary-cta.secondary-cta:visited::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(0deg, #1B1C1D, #131415);
   opacity: 0;
   transition: opacity 300ms;
}

.primary-cta.secondary-cta:hover::before,
.primary-cta.secondary-cta:hover:visited::before {
   opacity: 1;
}

.secondary-cta svg {
   position: relative;
   z-index: 1;
}

/* nav links and cta hover effect */
.link-wrapper {
   overflow: hidden;
}

.link-inner {
   display: inline-block;
   position: relative;
   transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
   padding-block: 0.1em;
   white-space: nowrap;
}

.link-inner::after {
   content: attr(data-text);
   position: absolute;
   left: 0;
   top: 100%;
   padding-block: 0.1em
}
  
.primary-cta:hover .link-wrapper .link-inner,
.link-wrapper:hover .link-inner,
.nav-cta:hover .link-wrapper .link-inner {
   transform: translateY(-100%);
}

.icon-container {
   background-color: transparent;
   border-radius: 50%;
   width: 25px;
   height: 25px;
   overflow: hidden;
}

.icon-wrapper {
   display: inline-block;
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
}

.icon {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1);
}

.icon.second {
   transform: translate(-100%, 100%);
}

.primary-cta:hover .icon-wrapper .first {
   transform: translate(100%, -100%);
}

.primary-cta:hover .icon-wrapper .second {
   transform: translate(0, 0);
}



/* hero right side */
.hero-right {
   width: min(98%, 450px);
}

.hero-links-container {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   flex-basis: 100%;
}

.link {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   background-color: var(--lighter-bg);
   border: 2px solid var(--stroke-clr);
   border-radius: 1em;
   padding: 1em 1.5em;
   backdrop-filter: blur(5px);
   -webkit-backdrop-filter: blur(5px);
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

.link::after {
   content: '';
   position: absolute;
   z-index: 999;
   left: calc(var(--x) * 1px - 50px);
   top: calc(var(--y) * 1px - 50px);
   width: 100px;
   height: 100px;
   background-image: radial-gradient(#ffffff62, transparent);
   border-radius: 100%;
   filter: blur(30px);
   opacity: 0;
   transition: opacity 0.2s;
}

.link:hover::after {
   opacity: .4;
}

.copy-to-clipboard-container {
   position: fixed;
   left: 50%;
   transform: translate(-50%, -50%);
   bottom: -10vh;
   max-width: 250px;
   padding: .5em 2em;
   margin-inline: auto;
   background-color: var(--heading-txt);
   border-radius: 5em;
   opacity: 0;
   transition: .5s;
}

.copy-to-clipboard-container.active {
   bottom: 0;
   opacity: 1;
}

#copy-to-clipboard {
   color: var(--body-bg);
   font-size: 1rem;
   font-weight: 700;
   text-align: center;
}

.link-text {
   padding-left: 1em;
   width: 80%;
}

.link-title {
   color: var(--heading-txt);
   font-size: 1rem;
   font-weight: 600;
}

.link-url {
   color: var(--body-txt);
   font-size: clamp(0.6875rem, 0.5841rem + 0.5172vw, 0.875rem);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.link-open-icon {
   margin-left: auto;
}

/* stats box */
.stats-wrap {
   display: flex;
   justify-content: space-between;
   gap: 4rem;
   background-color: var(--lighter-bg);
   border-radius: 1rem;
   padding: 2.2em 2.5em;
   width: fit-content;
   margin-inline: auto;
   margin-top: 8em;
}

.stats-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
}

.stats-content span {
   color: var(--heading-txt);
   font-size: 2rem;
   font-weight: 700;
}

.stats-divider {
   width: 1px;
   background-color: #333333;
}


/* skins vi köper */

.sticky-section {
   position: relative;
   height: 190vh; /* Scroll area */
   margin-top: 12rem;
}

.scroll-steps {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
}

.skins-step {
   height: 30vh;
}

.content-wrapper {
   position: sticky;
   top: 50%;
   transform: translateY(-50%);
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
   width: min(90%, 75rem);
   margin-inline: auto;
   margin-top: 30rem;
   margin-bottom: 16rem;
}

.text-content {
   position: absolute;
   bottom: 215px;
}

.text-content.top {
   margin-bottom: 1rem;
}
.text-content.bottom {
   bottom: -20px;
}

.text-list {
   font-size: 2rem;
   padding-inline-start: 1.7rem;
}

.text-list li {
   list-style: disc;
   color: #34373D;
   font-weight: 800;
   margin-bottom: 1rem;
   text-transform: uppercase;
   transition: color 0.3s;
   cursor: pointer;
}

.text-list li:hover {
   color: hsl(220, 3%, 45%);
}

.text-list li.active {
   color: var(--heading-txt);
}

.text-list li:focus-visible {
   outline: 2px solid var(--heading-txt);
   outline-offset: 4px;
   border-radius: 8px;
}

.image-wrapper {
   position: relative;
   width: 500px;
   height: 400px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.image-wrapper::before {
   position: absolute;
   content: "";
   width: 400px;
   aspect-ratio: 1;
   z-index: -1;
   border-radius: 60px;
   background-color: var(--lighter-bg);
   padding: 2em;
}

.weapon-image {
   position: absolute;
   opacity: 0;
   visibility: hidden;
}

.weapon-image:nth-of-type(1) {
   left: -16%;
}
.weapon-image:nth-of-type(2) {
   left: -13%;
}
.weapon-image:nth-of-type(3) {
   left: 5%;
}
.weapon-image:nth-of-type(4) {
   left: 13%;
}

.weapon-image.active {
   opacity: 1;
   visibility: visible;
}

.scroll-message-wrap {
   position: absolute;
   left: -140px;
   bottom: 46px;
   display: flex;
   transform: rotate(-90deg);
   gap: 1.5rem;
}

.scroll-message-arrow {
   transform: rotate(90deg);
   animation: scrollArrow 1s alternate infinite;
}

@keyframes scrollArrow {
   0% {
      transform: translateX(0px) rotate(90deg);
   }
   100% {
      transform: translateX(10px) rotate(90deg);
   }
}

@-webkit-keyframes scrollArrow {
   0% {
      -webkit-transform: translateX(0px) rotate(90deg);
   }
   100% {
      -webkit-transform: translateX(10px) rotate(90deg);
   }
}


/* perks section */
.perks-wrap {
   margin-top: 3em;
   width: 100%;
   padding: 10em 5em;
   background-color: var(--lighter-bg);
   border-radius: 2em;
}

.perks-img-wrap {
   position: relative;
}

.perks-dot {
   position: absolute;
   width: 2.5rem;
   aspect-ratio: 1;
   background-color: var(--heading-txt);
   outline: 3px solid rgba(255, 255, 255, 0.4);
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
   animation: pulse 2s infinite ease-out
}

@keyframes pulse {
   0% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
   }
   50% {
      box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
   }
   100% {
      box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); /* vila */
   }
}

.perks-dot-inner {
   width: 1rem;
   aspect-ratio: 1;
   background-color: #F0770C;
   border-radius: 50%;
   position: relative;
}

.perks-dot-inner::before {
   position: absolute;
   color: var(--heading-txt);
   background-color: rgba(19, 20, 21, 0.8);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border-radius: .5rem;
   padding: 0.65em 0.75em;
   top: 50%;
   transform: translateY(-40%);
   right: 45px;
   font-size: 1.125rem;
   opacity: 0;
   pointer-events: none;
   transition: opacity 250ms, transform 200ms;
}

.perks-dot-1 .perks-dot-inner::before {
   content: "Stickers";
}

.perks-dot-2 .perks-dot-inner::before {
   content: "Floats";
}

.perks-dot-3 .perks-dot-inner::before {
   content: "Patterns";
}

.perks-dot:hover .perks-dot-inner::before {
   opacity: 1;
   transform: translateY(-50%);
}

.perks-dot-1 {
   top: 2%;
   left: 52%;
}
.perks-dot-2 {
   top: 3%;
   left: 73%;
}
.perks-dot-3 {
   bottom: 23%;
   left: 61%;
}


/* footer section */
footer {
   width: 100%;
   background-color: var(--footer-bg);
   padding-top: 6em;
   margin-top: 10em;
}

.footer-row-1 {
   padding-bottom: 3em;
}

.footer-row-2 {
   padding-block: 3em;
}

.footer-socials {
   gap: 1.75rem;
   flex-direction: row;
}

.email-link {
   cursor: pointer;
}

.footer-socials a {
   flex: 0 0 auto;
}

.footer-nav {
   display: flex;
   gap: 2.5rem;
}

.footer-row-3 {
   position: relative;
   top: 225px;
   z-index: 2;
}

/* marquee */
.marquee {
   display: flex;
   column-gap: 7rem;
   width: 100%;
   position: absolute;
   overflow: hidden;
   pointer-events: none;
   user-select: none;
}

.marquee::after {
   position: absolute;
   content: "";
   bottom: 42px;
   left: 0;
   z-index: 9;
   width: 100%;
   height: 2px;
   background-color: #1C1D21;
}

.marquee-content {
   flex: 0 0 auto;
   min-width: 100%;
}

.marquee-content.scroll {
   column-gap: 7em;
}

.marquee-text {
   font-size: 19rem;
   font-weight: 700;
   line-height: 1;
   text-transform: uppercase;
   background-image: linear-gradient(hsl(228 8% 10% / 1), hsl(0 0% 7% / 1));
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.marquee-text .thin {
   font-weight: 500;
}

@keyframes scroll {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(calc(-100% - 7em));
   }
}

.scroll {
   animation: scroll 25s linear infinite;
}
/* end of marquee */

.footer-lower {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 2.5em;
   padding-top: 19em;
   gap: 1rem;
}

.footer-lower-left,
.footer-lower-right {
   display: flex;
   align-items: center;
   gap: 1.125em;
   flex-wrap: wrap;
}

.footer-lower-right {
   row-gap: .5rem;
}

.made-by {
   flex: none;
}

.footer-link {
   color: var(--body-txt);
}

.footer-divider {
  width: 1px;
  height: 18px;
  background-color: #3A3A3A;
}



/* hur det funkar sidan */

.hur-det-funkar-wrap {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   gap: .188rem;
   margin-top: 4rem;
   position: relative;
}

.hur-det-funkar-wrap .column {
   display: flex;
   flex-direction: column;
   flex: 1;
   gap: .188rem;
   position: relative;
}

.background-blur {
   position: absolute;
   z-index: 0;
   width: 300px;
   height: 300px;
   background-image: radial-gradient(white, transparent);
   border-radius: 50%;
   filter: blur(30px);
   -webkit-filter: blur(30px);
   opacity: 0;
   transition: opacity 0.2s;
   pointer-events: none;
}

.hur-det-funkar-wrap:hover .background-blur {
   opacity: .15;
}

.hur-det-funkar-wrap-mobile {
   display: none;
   margin-top: 1rem;
   position: relative;
}

.hur-det-funkar-wrap-mobile .column {
   display: flex;
   flex-direction: column;
   gap: .188rem;
   position: relative;
}

.hur-det-funkar-wrap-mobile .column .step-1,
.hur-det-funkar-wrap-mobile .column .step-2,
.hur-det-funkar-wrap-mobile .column .step-3,
.hur-det-funkar-wrap-mobile .column .step-4 {
   padding: 3em;
}

.hur-det-funkar-wrap .background,
.hur-det-funkar-wrap-mobile .background {
   width: 100%;
   height: 100%;
   background: radial-gradient(circle,rgb(31, 31, 31) 0%, #131415 75%);
   position: absolute;
   inset: 0;
   z-index: -1;
   overflow: hidden;
}

.step-1,
.step-2,
.step-3,
.step-4 {
   padding: 3rem;
   background-color: var(--body-bg);
}

.step-1 {
   padding-bottom: 7em
}
.step-2 {
   padding-top: 15em;
}
.step-3 {
   padding-bottom: 13.55em;
}
.step-4 {
   padding-top: 6em;
}

.left-step {
   padding-top: 5em;
}

.step-number {
   color: var(--heading-txt);
   font-size: 1rem;
   font-weight: 700;
}

.step-heading {
   font-size: 1.5rem;
   font-weight: 800;
   text-transform: uppercase;
   line-height: 1.3;
   max-width: 14ch;
   margin-bottom: .3rem;
   margin-top: .3rem;
}

.column.left .step-heading {
   max-width: none;
}

.column.left div p {
   max-width: 30ch;
}
.column.right div p {
   max-width: 26ch;
}

.cta-wrap {
   display: flex;
   justify-content: center;
   margin-top: 4em;
}

/* om oss sidan */

.about-us-wrap {
   width: fit-content;
}

.about-us-text {
   position: relative;
   max-width: 56ch;
   margin-top: .8em;
   display: block;
}

.about-us-text::before {
   position: absolute;
   content: "";
   left: -65px;
   top: 5px;
   z-index: 1;
   width: 40px;
   height: 28px;
   background-image: url(../images/icons/quote-icon.svg);
   background-repeat: no-repeat;
}

.written-by-wrap {
   display: flex;
   align-items: center;
   gap: .75rem;
   margin-top: 2rem;
   margin-bottom: 3rem;
}

.written-by-wrap img {
   width: 2.5rem;
   height: 2.5rem;
   border-radius: 50%;
}

.written-by-text {
   display: flex;
   flex-direction: column;
   gap: .15rem;
}

.written-by-name {
   display: flex;
   align-items: center;
   gap: .35rem;
}

.written-by-wrap span {
   color: var(--heading-txt);
   font-weight: 700;
   font-size: 1rem;
}

.written-by-wrap p {
   color: var(--body-txt);
}
/* grupper sidan */

.grupper-list {
   margin-top: 3rem;
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
}

.grupper-panel {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1.75rem;
   border: 2px solid var(--stroke-clr);
   border-radius: 0.625rem;
}

.grupper-panel svg {
   flex: 0 0 auto;
}

.grupper-img {
   position: fixed;
   pointer-events: none;
   z-index: 9999;
   max-width: 550px;
   border-radius: 10px;
   opacity: 0;
   transition: opacity 300ms;
}

.grupper-heading {
   font-size: 1.25rem;
   font-weight: 700;
}

.grupper-dot {
   flex: 0 0 auto;
   width: 4px;
   height: 4px;
   border-radius: 50%;
   background-color: var(--body-txt);
}

.grupper-category {
   color: var(--body-txt);
   font-size: 1rem;
   text-transform: uppercase;
}

.grupper-url-icon {
   margin-left: auto;
}


/* faq sidan */

.accordion-section {
   display: flex;
   gap: 4rem;
   margin-top: 3em;
}

.faq-list {
   display: flex;
   flex-direction: column;
   gap: 1rem;
   flex: 1;
}

.accordion-content {
   display: grid;
   grid-template-rows: 0fr;
   transition: grid-template-rows cubic-bezier(.165, .84, .44, 1) 450ms;
}

.accordion-content[aria-hidden="false"] {
   grid-template-rows: 1fr;
}

.accordion-content > div {
   overflow: hidden;
}

.accordion-question {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
}

.accordion-icon {
   color: #4E4E4E;
   transition: color 250ms;
   flex: 0 0 auto;
}

.accordion-answer {
   color: var(--body-txt);
   font-size: 1rem;
   margin-top: .8em;
}

.accordion-item {
   background: var(--body-bg);
   padding: 1.3rem 1.4rem;
   border: 1px solid var(--stroke-clr);
   border-radius: 1rem;
   cursor: pointer;
}

.accordion-item:hover .accordion-icon {
   color: var(--heading-txt);
}

.accordion-trigger {
   color: var(--heading-txt);
   font-size: clamp(1rem, 0.9219rem + 0.25vw, 1.0625rem);
   font-weight: 700;
   text-align: left;
   background: transparent;
   border: 0;
   line-height: 1.5;
   cursor: pointer;
}

.accordion-icon line {
   transform-origin: center center;
   transition: transform .3s;
}

.accordion-trigger[aria-expanded="true"] ~ .accordion-icon line {
   transform: rotate(135deg);
}

.accordion-trigger[aria-expanded="true"] ~ .accordion-icon {
   color: var(--heading-txt);
}


/* kontakt sidan */
.contact-section {
   align-items: start;
}

.fb-link,
.fb-link:visited {
   display: flex;
   gap: .5rem;
   color: var(--heading-txt);
   margin-top: 2rem;
}

.form-container {
   display: flex;
   flex-direction: column;
   align-items: start;
   gap: 2rem;
   margin-top: 2rem;
}

.input-group {
   position: relative;
   width: 100%;
}

.input-group input,
textarea {
   display: block;
   height: 65px;
   width: min(99%, 26rem);
   font-size: 1rem;
   color: #fff;
   padding-inline: 1em;
   padding-top: 1em;
   background: var(--lighter-bg);
   border: none;
   outline: none;
   border-radius: .5rem;
   -webkit-box-shadow: 0 0 0px 100px var(--lighter-bg) inset !important;
   -webkit-text-fill-color: var(--heading-txt);
}

textarea {
   height: 200px;
   padding-top: 1.75em;
   padding-bottom: 1em;
   resize: vertical;
}

.input-group .input-label {
   position: absolute;
   top: 50%;
   left: .75em;
   transform: translateY(-50%);
   font-size: 1rem;
   color: var(--body-txt);
   padding: 0 5px;
   pointer-events: none;
   transition: .3s all ease;
}

.input-group .textarea-label {
   position: absolute;
   top: 1.75em;
   left: .75em;
   transform: translateY(-50%);
   font-size: 1rem;
   color: var(--body-txt);
   padding: 0 5px;
   pointer-events: none;
   transition: .3s;
}

.input-group input:focus ~ label,
.input-group input:not(:placeholder-shown) ~ label,
.input-group textarea:focus ~ label,
.input-group textarea:not(:placeholder-shown) ~ label {
   top: 1.25em;
   font-size: .75rem;
}

.form-message {
   width: min(99%, 26rem)
}

.form-error-container {
   padding: 1.5em 2em;
   margin-top: 1em;
   background-color: rgba(43, 28, 28, .6);
   border-radius: 1.5em;
}

.form-error-container .form-error-title {
   display: flex;
   color: #ff2121;
   font-size: clamp(1rem, 0.9655rem + 0.1724vw, 1.0625rem);
   font-weight: 700;
   margin-bottom: .3em;
}

.form-error-container .form-error-desc {
   color: #C19494;
}

.form-success-container {
   padding: 1.5em 2em;
   margin-top: 1em;
   background-color: rgba(28, 43, 28, .6);
   border-radius: 1.5em;
}

.form-success-container .form-success-title {
   display: flex;
   color: #0fe50f;
   font-size: clamp(1rem, 0.9655rem + 0.1724vw, 1.0625rem);
   font-weight: 700;
   margin-bottom: .3em;
}

.form-success-container .form-success-desc {
   color: #94C194;
}

/* policy */

.back-to-home-btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   background-color: var(--body-bg);
   color: var(--body-txt);
   font-size: 0.875rem;
   font-weight: 500;
   padding: 0.5em 1em .5em .8em;
   border-radius: 3em;
   border: 1px solid var(--stroke-clr);
   margin-bottom: 2em;
   transition: 250ms;
}

.back-to-home-btn:hover {
   background-color: #181a1b;
}

.back-to-home-btn.reverse {
   padding: 1em 1.3em;
   font-size: 1rem;
   margin-top: 2rem;
}

.policy-bold {
   color: white;
   font-size: 1rem;
   font-weight: 700;
   margin-top: 1.5em;
}

.policy-body {
   font-size: 1rem;
}

.policy-list {
   color: var(--body-txt);
   list-style: disc;
   margin-left: 1.5em;
   line-height: 150%;
}

.subpage-hero-content {
   display: flex;
   flex-direction: column;
   align-items: center;
}

/* Media queries */

/* 1200px */
@media (max-width: 75em) {

   .contact-section {
      flex-direction: column-reverse;
   }
}

/* 1080px */
@media (max-width: 67.5em) {

   .primary-navigation {
      display: none;
   }

   .navbar:has(.primary-navigation) {
      width: 100%;
   }

   .nav-logo {
      margin-left: 1.5rem;
   }

   .primary-navigation {
      display: flex;
      position: fixed;
      z-index: 9999;
      inset: 0 0 0 0;
      height: 100svh;
      padding: min(20vh, 6rem) 10vw;
      flex-direction: column;
      align-items: normal;
      background-color: var(--footer-bg);
      gap: 1rem;
      overflow: hidden;

      transform: translateX(100%) !important;
      transition: transform 350ms;
   }

   .primary-navigation[data-visible="true"] {
      transform: translateX(0) !important;
   }

   .mobile-nav-toggle .primary-navigation[data-visible="true"] {
      position: fixed;
   }

   .mobile-nav-toggle-wrap {
      position: relative;
      z-index: 99999;
   }
   .mobile-nav-toggle {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: .3rem;
      position: absolute;
      z-index: 99999;
      top: 1rem;
      right: 1rem;
      cursor: pointer;
      transition: .3s;
      opacity: 1;
   }

   .primary-navigation li a {
      font-size: 1.125rem;
   }

   a.current::before {
      display: none;
   }

   .nav-cta .link-wrapper .link-inner {
      font-size: 1rem;
   }

   .copy-to-clipboard-container {
      width: 100%;
   }

   .hero-section {
      flex-direction: column;
      row-gap: 5rem;
      align-items: center;
   }

   .hero-left {
      display: flex;
      flex-direction: column;
      align-items: center;
   }

   .hero-social-proof {
      justify-content: center;
   }

   .hero-heading,
   .hero-desc {
      text-align: center;
   }

   .content-wrapper {
      top: 56%;
      align-items: flex-start;
      flex-direction: column;
      padding-top: 9rem;
      margin-bottom: -6rem;
      overflow: hidden;
   }

   .text-content.top {
      bottom: 610px;
   }

   .text-content.bottom {
      bottom: 385px;
   }

   .image-wrapper {
      justify-content: flex-start;
   }

   .image-wrapper::before {
      width: 300px;
   }

   .weapon-image {
      scale: .5;
   }
   .weapon-image:nth-of-type(1) {
      left: -22%;
   }
   .weapon-image:nth-of-type(2) {
      left: -20%;
   }
   .weapon-image:nth-of-type(3) {
      left: -8%;
   }
   .weapon-image:nth-of-type(4) {
      left: -6%;
   }

   .perks-dot {
      width: 2rem;
   }

   .perks-dot-inner {
      width: .75rem;
   }

   .accordion-section {
      gap: 2rem;
   }
}

/* 1000px */
@media (max-width: 62.5em) {

   footer {
      margin-top: 5rem;
   }

   .footer-nav {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 1.5rem;
      row-gap: .5rem;
      justify-items: center;
   }
}

/* 970px */
@media (max-width: 60.625em) {

   .contact-left {
      margin-top: 3em;
   }
}

/* 900px */
@media (max-width: 56.25em) {

   .perks-wrap {
      padding: 6em 1em;
   }

   .footer-row-1 .footer-right-col .h-flex-section {
      flex-direction: column;
      gap: 1rem;
   }
}

/* 820px */
@media (max-width: 51.25em) {

   .flare-container {
      width: 100%;
   }

   .stats-wrap {
      flex-direction: column;
      gap: 2.5rem;
      margin-top: 5em;
   }

   .stats-divider {
      width: auto;
      height: 1px;
   }

   .section {
      margin-top: 6em;
   }

   .accordion-section {
      flex-direction: column;
      gap: 1rem;
   }

   .grupper-panel {
      align-items: flex-start;
      flex-direction: column;
   }

   .grupper-dot {
      display: none;
   }
}

/* 768px */
@media (max-width: 48em) {

   .about-us-text::before {
      position: absolute;
      content: "";
      left: 0px;
      top: -100px;
      z-index: -1;
      width: 40px;
      height: 28px;
      background-image: url(../images/icons/quote-icon.svg);
      background-repeat: no-repeat;
   }
}

/* 700px */
@media (max-width: 43.75em) {

   .footer-row-1.h-flex-section,
   .footer-row-2.h-flex-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 3rem;
   }

   .footer-row-2.h-flex-section {
      padding-bottom: 0;
   }

   .footer-nav {
      justify-items: flex-start;
   }

   .footer-right-col .h-flex-section {
      align-items: flex-start;
   }

   .left-col.h-flex-section.footer-socials {
      flex-direction: row;
   }

   .hur-det-funkar-wrap {
      display: none;
   }

   .hur-det-funkar-wrap-mobile {
      display: flex;
      flex-direction: column;
   }

   .hur-det-funkar-wrap .column {
      width: 100%;
   }
}

/* 610px */
@media (max-width: 38.125em) {

   .perks-dot {
      width: 1.25rem;
   }

   .perks-dot-inner {
      width: .5rem;
   }
   
   .about-us-wrap .ctas {
      flex-direction: column;
      align-items: stretch;
   }

   
}

/* 480px */
@media (max-width: 30em) {
   
   .hero-section {
      margin-top: 4em;
   }

   .hero-social-proof {
      flex-direction: column;
      gap: .3rem;
      margin-bottom: 0.7em;
   }

   .hur-det-funkar-wrap-mobile .column .step-1,
   .hur-det-funkar-wrap-mobile .column .step-2,
   .hur-det-funkar-wrap-mobile .column .step-3,
   .hur-det-funkar-wrap-mobile .column .step-4 {
      padding: 3em 1.5em;
   }
}

@media (max-width: 26.875em) {

   .hero-left .ctas {
      flex-direction: column;
   }

   .hero-heading {
      text-wrap: balance;
   }

   .form-error-container,
   .form-success-container {
      padding: 1.5em;
   }
}

@media (max-width: 24.375em) {
   
   .footer-nav {
      grid-template-columns: repeat(2, 1fr)
   }
}

@media (max-width: 21.25em) {

   .image-wrapper::before {
      width: 275px;
   }

   .weapon-image:nth-of-type(2) {
      left: -22%;
   }
   .weapon-image:nth-of-type(3) {
      left: -11%;
   }
   .weapon-image:nth-of-type(4) {
      left: -9%;
   }
}

.custom-cursor {
   position: fixed;
   top: 0;
   left: 0;
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 50%;
   background-color: white;
   -webkit-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 1);
   -moz-box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 1);
   box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 1);
   pointer-events: none;
   z-index: 9999;
   transform: translate(-50%, -50%);
   transition: transform 0.08s ease-out;
}

@media (hover: none), (pointer: coarse) {
   .custom-cursor {
      display: none;
   }

   .hur-det-funkar-wrap:hover .background-blur {
      opacity: 0;
   }

   .primary-cta:hover .link-wrapper .link-inner,
   .link-wrapper:hover .link-inner,
   .nav-cta:hover .link-wrapper .link-inner {
      transform: translateY(0);
   }

   [data-underline="true"]:hover::after,
   [data-underline-white="true"]:hover::after {
      transform: scaleX(1);
      transform-origin: right;
   }
}