@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLGT9Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* devanagari */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z11lFc-K.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1JlFc-K.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v24/pxiByp8kv8JHgFVrLCz7Z1xlFQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'ClashDisplay-Regular';
  src: url('../fonts/ClashDisplay-Regular.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Regular.woff') format('woff'),
       url('../fonts/ClashDisplay-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Medium';
  src: url('../fonts/ClashDisplay-Medium.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Medium.woff') format('woff'),
       url('../fonts/ClashDisplay-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Semibold';
  src: url('../fonts/ClashDisplay-Semibold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Semibold.woff') format('woff'),
       url('../fonts/ClashDisplay-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Bold';
  src: url('../fonts/ClashDisplay-Bold.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Bold.woff') format('woff'),
       url('../fonts/ClashDisplay-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'ClashDisplay-Variable';
  src: url('../fonts/ClashDisplay-Variable.woff2') format('woff2'),
       url('../fonts/ClashDisplay-Variable.woff') format('woff'),
       url('../fonts/ClashDisplay-Variable.ttf') format('truetype');
  font-weight: 200 700;
  font-display: swap;
  font-style: normal;
}


body {
    background-color: #0F0B0A;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    width: 100vw;            
    max-width: 100vw;         
    touch-action: pan-y;       
}

::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #0F0B0A;
}

::-webkit-scrollbar-thumb {
  background-color: #F36214;
  border-radius: 6px;
  border: 2px solid #0F0B0A;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #F36214 #0F0B0A;
  box-sizing: border-box;
}

  @media (max-width: 768px) {
    ::-webkit-scrollbar {
      display: none;
    }

    ::-webkit-scrollbar-track {
      display: none;
    }

    ::-webkit-scrollbar-thumb {
      display: none;
    }

    * {
      scrollbar-color: #f3621400 #0F0B0A00;
    }
  }

div#toast-container {
  font-family: 'ClashDisplay-Regular';
}
.button {
  cursor: pointer;
}

/* From Uiverse.io by 00Kubi */ 
.neon-checkbox {
  --primary: #00ffaa;
  --primary-dark: #00cc88;
  --primary-light: #88ffdd;
  --size: 30px;
  position: relative;
  width: var(--size);
  height: var(--size);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.neon-checkbox input {
  display: none;
}

.neon-checkbox__frame {
  position: relative;
  width: 100%;
  height: 100%;
}

.neon-checkbox__box {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 4px;
  border: 2px solid var(--primary-dark);
  transition: all 0.4s ease;
}

.neon-checkbox__check-container {
  position: absolute;
  inset: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neon-checkbox__check {
  width: 80%;
  height: 80%;
  fill: none;
  stroke: var(--primary);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  transform-origin: center;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.neon-checkbox__glow {
  position: absolute;
  inset: -2px;
  border-radius: 6px;
  background: var(--primary);
  opacity: 0;
  filter: blur(8px);
  transform: scale(1.2);
  transition: all 0.4s ease;
}

.neon-checkbox__borders {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  overflow: hidden;
}

.neon-checkbox__borders span {
  position: absolute;
  width: 40px;
  height: 1px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.neon-checkbox__borders span:nth-child(1) {
  top: 0;
  left: -100%;
  animation: borderFlow1 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow2 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(3) {
  bottom: 0;
  right: -100%;
  animation: borderFlow3 2s linear infinite;
}

.neon-checkbox__borders span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 1px;
  height: 40px;
  animation: borderFlow4 2s linear infinite;
}

.neon-checkbox__particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--primary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  top: 50%;
  left: 50%;
  box-shadow: 0 0 6px var(--primary);
}

.neon-checkbox__rings {
  position: absolute;
  inset: -20px;
  pointer-events: none;
}

.neon-checkbox__rings .ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--primary);
  opacity: 0;
  transform: scale(0);
}

.neon-checkbox__sparks span {
  position: absolute;
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, var(--primary), transparent);
  opacity: 0;
}

/* Hover Effects */
.neon-checkbox:hover .neon-checkbox__box {
  border-color: var(--primary);
  transform: scale(1.05);
}

/* Checked State */
.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__box {
  border-color: var(--primary);
  background: rgba(0, 255, 170, 0.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__check {
  stroke-dashoffset: 0;
  transform: scale(1.1);
}

.neon-checkbox input:checked ~ .neon-checkbox__frame .neon-checkbox__glow {
  opacity: 0.2;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__borders
  span {
  opacity: 1;
}

/* Particle Animations */
.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__particles
  span {
  animation: particleExplosion 0.6s ease-out forwards;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__rings
  .ring {
  animation: ringPulse 0.6s ease-out forwards;
}

.neon-checkbox
  input:checked
  ~ .neon-checkbox__frame
  .neon-checkbox__sparks
  span {
  animation: sparkFlash 0.6s ease-out forwards;
}

/* Animations */
@keyframes borderFlow1 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}

@keyframes borderFlow2 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(200%);
  }
}

@keyframes borderFlow3 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}

@keyframes borderFlow4 {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200%);
  }
}

@keyframes particleExplosion {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translate(
        calc(-50% + var(--x, 20px)),
        calc(-50% + var(--y, 20px))
      )
      scale(0);
    opacity: 0;
  }
}

@keyframes ringPulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes sparkFlash {
  0% {
    transform: rotate(var(--r, 0deg)) translateX(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: rotate(var(--r, 0deg)) translateX(30px) scale(0);
    opacity: 0;
  }
}

/* Particle Positions */
.neon-checkbox__particles span:nth-child(1) {
  --x: 25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(2) {
  --x: -25px;
  --y: -25px;
}
.neon-checkbox__particles span:nth-child(3) {
  --x: 25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(4) {
  --x: -25px;
  --y: 25px;
}
.neon-checkbox__particles span:nth-child(5) {
  --x: 35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(6) {
  --x: -35px;
  --y: 0px;
}
.neon-checkbox__particles span:nth-child(7) {
  --x: 0px;
  --y: 35px;
}
.neon-checkbox__particles span:nth-child(8) {
  --x: 0px;
  --y: -35px;
}
.neon-checkbox__particles span:nth-child(9) {
  --x: 20px;
  --y: -30px;
}
.neon-checkbox__particles span:nth-child(10) {
  --x: -20px;
  --y: 30px;
}
.neon-checkbox__particles span:nth-child(11) {
  --x: 30px;
  --y: 20px;
}
.neon-checkbox__particles span:nth-child(12) {
  --x: -30px;
  --y: -20px;
}

/* Spark Rotations */
.neon-checkbox__sparks span:nth-child(1) {
  --r: 0deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(2) {
  --r: 90deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(3) {
  --r: 180deg;
  top: 50%;
  left: 50%;
}
.neon-checkbox__sparks span:nth-child(4) {
  --r: 270deg;
  top: 50%;
  left: 50%;
}

/* Ring Delays */
.neon-checkbox__rings .ring:nth-child(1) {
  animation-delay: 0s;
}
.neon-checkbox__rings .ring:nth-child(2) {
  animation-delay: 0.1s;
}
.neon-checkbox__rings .ring:nth-child(3) {
  animation-delay: 0.2s;
}



    #loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #0F0B0A;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      z-index: 9999;
      transition: opacity 0.5s ease, transform 3s ease-in-out;
      box-shadow: #0F0B0A 1px;
    }

    #loading-screen img {
      width: 60px;
      height: auto;
      animation: pulse 2s ease-in-out infinite;
    }

    @keyframes pulse {
      0%, 100% {
        transform: scale(1);
        opacity: 1;
      }
      50% {
        transform: scale(1.1);
        opacity: 0.85;
      }
    }

  #loading-screen.hidden {
    opacity: 0;
    pointer-events: none;
  }

    #main-content {
      display: none;
      opacity: 0;
      transition: opacity 1s ease 0.5s;
    }

    #main-content.visible {
      display: block;
      opacity: 1;
    }

.switch {
 --secondary-container: #3a4b39;
 --primary: #84da89;
 font-size: 17px;
 position: relative;
 display: inline-block;
 width: 2.8em;
 height: 1.4em;
 margin-top: 8px;
}

.switch input {
 display: none;
 opacity: 0;
 width: 0;
 height: 0;
}

.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #313033;
 transition: .2s;
 border-radius: 30px;
}

.slider:before {
 position: absolute;
 content: "";
 height: 1em;
 width: 1em;
 border-radius: 20px;
 left: 0.2em;
 bottom: 0.2em;
 background-color: #aeaaae;
 transition: .4s;
}

input:checked + .slider::before {
 background-color: var(--primary);
}

input:checked + .slider {
 background-color: var(--secondary-container);
}

input:focus + .slider {
 box-shadow: 0 0 1px var(--secondary-container);
}

input:checked + .slider:before {
 transform: translateX(1.4em);
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.spinner {
  width: 25px;
  height: 25px;
  border: 3px solid rgba(255, 255, 255, 0.2); /* delikatne, półprzezroczyste tło */
  border-top: 3px solid #ffffff; /* biały top do kontrastu */
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none; /* domyślnie ukryty */
}

.spinner.show {
  display: block;
}
.contact {
  margin: 100px 296px;

  h1 {
    font-family: ClashDisplay-Semibold;
    font-weight: 600;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;
  }

  span {
    color: #F36214;
  }

  p {
    font-family: ClashDisplay-Regular;
    font-weight: 400;
    font-size: 21px;
    line-height: 100%;
    letter-spacing: 1px;
    color: #945833;
    margin: 0 0 50px 0;
  }

  .contact-flex {
    display: flex;
    flex-direction: row;
  }

  .mailform {
    border-radius: 51px;
    border: 1px solid #F36214;
    background: #1B120E;
    padding: 40px;
    margin-right: 30px;

    h1 {
      margin-bottom: 45px;
    }

    .box,
    .flex-box {
      width: 100%;

      h3 {
        font-family: ClashDisplay-Regular;
        font-weight: 400;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 1px;
        color: #fff;
        margin: 0 0 5px 0;
      }

      input {
        background-color: #150D0A;
        color: #945833;
        border-radius: 73px;
        height: 42px;
        padding: 2px 20px;
        outline: 0;
        border: 0;
        font-size: 18px;
        margin-bottom: 17px;
        width: calc(100% - 40px);

        &::placeholder {
          color: #945833;
        }
      }

      textarea {
        background-color: #150D0A;
        color: #945833;
        border-radius: 23px;
        height: 190px;
        padding: 10px 20px;
        outline: 0;
        border: 0;
        font-size: 16px;
        margin-bottom: 17px;
        width: calc(100% - 40px);
        font-family: ClashDisplay-Regular;
        font-weight: 400;
        line-height: 100%;
        letter-spacing: 1px;

        &::placeholder {
          color: #945833;
        }
      }
    }

    .flex {
      display: flex;
      align-items: center;
      width: 100%;

      .flex-box:nth-child(1) {
        margin-right: 20px;
      }
    }
  }

  .checkbox {
    display: flex;
    align-items: stretch;

    .neon-checkbox {
      --primary: #b66330;
      --primary-dark: #663c22;
      --primary-light: #d36c2c;
      --size: 20px;
      margin-right: 10px;
    }

    p {
      font-family: ClashDisplay-Regular;
      font-weight: 400;
      font-size: 12px;
      line-height: 100%;
      letter-spacing: 1px;
      color: #fff;
      width: 100%;
      margin: 0;
    }
  }

  .button {
    margin-top: 25px;
    border-radius: 43px;
    padding: 12px 24px;
    gap: 4px;
    background: #F36214;
    transition: 0.2s ease-in-out;
    cursor: pointer;

    &:hover {
      background: #be5820;
    }

    p {
      margin: 0;
      color: #fff;
      font-family: ClashDisplay-Semibold;
      font-weight: 600;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 1px;
      text-align: center;
    }
  }

  .discord {
    background: linear-gradient(194.44deg, #FF5900 0%, #963B0B 100%);
    border: 1px solid #FFC088;
    border-radius: 24px;
    padding: 35px 10px;

    .logo {
      margin-bottom: 35px;
      width: 100%;
      text-align: center;
    }

    .graphic {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-end;

      img {
        display: block;
        height: auto;
      }

      .button {
        position: absolute;
        width: 60%;
        bottom: 10px;
        border-radius: 43px;
        padding: 12px 24px;
        gap: 4px;
        background-color: #ffffff;
        cursor: pointer;
        z-index: 1;
        transition: 0.2s ease-in-out;

        &:hover {
          background-color: #b6b6b6;
        }

        p {
          font-family: ClashDisplay-Semibold;
          font-weight: 600;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0;
          text-align: center;
          color: #F36214;
        }
      }
    }
  }

  /* === responsiveness === */

  @media screen and (max-width: 768px) {
    margin: 50px 20px;

    h1 {
      font-size: 28px;
      text-align: center;
    }

    p {
      font-size: 14px;
      text-align: center;
      margin-bottom: 30px;
    }

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

    .mailform {
      margin-right: 0;
      padding: 30px 20px;
      border-radius: 30px;

      .flex {
        flex-direction: column;

        .flex-box:nth-child(1) {
          margin-right: 0;
          margin-bottom: 20px;
        }
      }

      .box input,
      .flex-box input,
      .box textarea {
        width: 100%;
      }
    }

    .discord {
      margin-top: 30px;
      padding: 25px 10px;
      border-radius: 20px;

      .button {
        width: 100%;
        position: static;
        margin-top: 20px;
      }
    }
  }

  @media screen and (min-width: 769px) and (max-width: 1024px) {
    margin: 80px 60px;

    h1 {
      font-size: 32px;
    }

    p {
      font-size: 15px;
      margin-bottom: 40px;
    }

    .contact-flex {
      flex-direction: row;
    }

    .mailform {
      margin-right: 20px;
      padding: 35px 30px;
      border-radius: 40px;

      .flex {
        flex-direction: row;

        .flex-box:nth-child(1) {
          margin-right: 15px;
        }
      }

      .box input,
      .flex-box input,
      .box textarea {
        width: calc(100% - 40px);
      }
    }

    .discord {
      padding: 30px 15px;
      border-radius: 24px;

      .button {
        width: 70%;
        position: absolute;
        bottom: 10px;
      }
    }
  }

  @media screen and (min-width: 2500px) {
    margin: 120px 400px;

    h1 {
      font-size: 40px;
    }

    p {
      font-size: 18px;
      margin-bottom: 60px;
    }

    .mailform {
      padding: 50px;
      border-radius: 60px;
      margin-right: 50px;

      .flex-box:nth-child(1) {
        margin-right: 30px;
      }

      .box input,
      .flex-box input,
      .box textarea {
        width: calc(100% - 40px);
        font-size: 20px;
      }
    }

    .discord {
      padding: 40px 30px;
      border-radius: 30px;

      .button {
        width: 60%;
        bottom: 10px;
      }
    }
  }
}

@media screen and (max-width: 400px) {
  .contact {
    margin: 40px 12px;

    h1 {
      font-size: 24px;
    }

    p {
      font-size: 13px;
      margin-bottom: 25px;
    }

    .mailform {
      padding: 25px 15px;
      border-radius: 24px;

      .flex {
        flex-direction: column;

        .flex-box:nth-child(1) {
          margin-right: 0;
          margin-bottom: 15px;
        }
      }

      .box input,
      .flex-box input,
      .box textarea {
        width: 100%;
        font-size: 15px;
        padding: 8px 16px;
      }
    }

    .checkbox {
      align-items: flex-start;

      p {
        font-size: 11px;
      }
    }

    .button {
      width: 100%;
      padding: 10px 16px;

      p {
        font-size: 15px;
      }
    }

    .discord {
      margin-top: 25px;
      padding: 20px 10px;
      border-radius: 18px;

      .button {
        width: 100%;
        position: static;
        margin-top: 15px;

        p {
          font-size: 15px;
        }
      }
    }
  }
}

@media screen and (min-width: 401px) and (max-width: 440px) {
  .contact {
    margin: 45px 16px;

    h1 {
      font-size: 26px;
    }

    p {
      font-size: 13.5px;
      margin-bottom: 28px;
    }

    .mailform {
      padding: 28px 18px;
      border-radius: 28px;

      .flex {
        flex-direction: column;

        .flex-box:nth-child(1) {
          margin-right: 0;
          margin-bottom: 18px;
        }
      }

      .box input,
      .flex-box input,
      .box textarea {
        width: 100%;
        font-size: 16px;
        padding: 9px 18px;
      }
    }

    .checkbox p {
      font-size: 11.5px;
    }

    .button {
      width: 100%;
      padding: 11px 18px;

      p {
        font-size: 15.5px;
      }
    }

    .discord {
      margin-top: 28px;
      padding: 23px 12px;
      border-radius: 20px;

      .button {
        width: 100%;
        position: static;
        margin-top: 18px;

        p {
          font-size: 15.5px;
        }
      }
    }
  }
}
  .faq {
  margin: 100px 296px;

  h1 {
    font-family: ClashDisplay-Semibold;
    font-weight: 600;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 1px;
    color: #fff;
    margin: 0;

    span {
      color: #F36214;
    }
  }

  p {
    font-family: Poppins;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #945833;
    margin: 0 0 50px 0;
  }

  .question {
    border: 1px solid #945833;
    padding: 20px 30px;
    border-radius: 15px;
    margin-bottom: 20px;
    cursor: pointer;

    .flex {
      display: flex;
      align-items: center;
      justify-content: space-between;

      h2 {
        margin: 0;
        font-family: ClashDisplay-Medium;
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
        letter-spacing: 1px;
        color: #ffffff;
      }
    }

    p {
      margin: 15px 0 0 0;
      font-family: Poppins;
      font-weight: 400;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: middle;
      color: #945833;
    }
    span {
      color: #F36214;
    }
  }

  /* --- Mobile (max-width: 768px) --- */
  @media screen and (max-width: 768px) {
    margin: 50px 20px;

    h1 {
      font-size: 28px;
      text-align: center;
    }

    p {
      margin-top: 5px;
      font-size: 14px;
      text-align: center;
      margin-bottom: 30px;
    }

    .question {
      padding: 15px 20px;

      .flex h2 {
        font-size: 14px;
      }

      p {
        font-size: 14px;
        margin-top: 10px;
      }
    }
  }

  /* --- Tablets (min-width: 769px and max-width: 1024px) --- */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    margin: 80px 60px;

    h1 {
      font-size: 32px;
    }

    p {
      font-size: 15px;
      margin-bottom: 40px;
    }

    .question {
      padding: 18px 25px;

      .flex h2 {
        font-size: 15px;
      }

      p {
        font-size: 15px;
        margin-top: 12px;
      }
    }
  }

  /* --- Monitors 2k and above (min-width: 2500px) --- */
  @media screen and (min-width: 2500px) {
    margin: 120px 400px;

    h1 {
      font-size: 40px;
    }

    p {
      font-size: 18px;
      margin-bottom: 60px;
    }

    .question {
      padding: 25px 40px;

      .flex h2 {
        font-size: 18px;
      }

      p {
        font-size: 18px;
        margin-top: 20px;
      }
    }
  }
}

@media screen and (max-width: 400px) {
  .faq {
    margin: 40px 12px;

    h1 {
      font-size: 24px;
      text-align: center;

      span {
        /* zachowujemy kolor */
        color: #F36214;
      }
    }

    p {
      font-size: 13px;
      margin-bottom: 25px;
      text-align: center;
    }

    .question {
      padding: 12px 15px;
      border-radius: 12px;
      margin-bottom: 15px;

      .flex h2 {
        font-size: 13px;
      }

      p {
        font-size: 13px;
        margin-top: 8px;
      }
    }
  }
}

@media screen and (min-width: 401px) and (max-width: 440px) {
  .faq {
    margin: 45px 16px;

    h1 {
      font-size: 26px;
      text-align: center;

      span {
        color: #F36214;
      }
    }

    p {
      font-size: 14px;
      margin-bottom: 28px;
      text-align: center;
    }

    .question {
      padding: 14px 18px;
      border-radius: 14px;
      margin-bottom: 18px;

      .flex h2 {
        font-size: 14px;
      }

      p {
        font-size: 14px;
        margin-top: 9px;
      }
    }
  }
}
.feedback {
  margin: 100px 296px;

  h1 {
    font-family: ClashDisplay-Semibold;
    font-weight: 600;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #fff;
    margin: 0;

    span {
      color: #F36214;
    }
  }

  p {
    font-family: Poppins;
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #945833;
    margin: 0 0 50px 0;
  }

  .opinions {
    display: flex;
    align-items: stretch;
    justify-content: space-between;

    .opinion {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      border: 0.5px solid #945833;
      padding: 25px;
      z-index: 1;
      width: 32.5%;
      height: calc(100% + -5px);

      &:nth-child(1),
      &:nth-child(2) {
        margin-right: 30px;
      }
      p {
        margin:0;
      }

      .flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;

        .user {
          display: flex;
          align-items: center;

          .icon {
            margin-right: 5px;

            img {
              width: 28px;
              height: 28px;
              border-radius: 50px;
            }
          }

          p {
            font-family: ClashDisplay-Medium;
            font-weight: 500;
            font-size: 16px;
            line-height: 100%;
            letter-spacing: 1px;
            text-align: center;
            color: #fff;
            margin: 0;
          }
        }
      }

      .line {
        border: 1px solid #945833;
      }

      p {
        margin-top: 15px;
        font-family: Poppins;
        font-weight: 400;
        font-size: 14px;
        line-height: 183%;
        letter-spacing: 0;
        color: #945833;
      }

      .dc {
        display: inline-block;
        background-color: #23233f;
        color: #91a4fa;
        padding: 0 1px;
        border-radius: 4px;
        font-weight: 500;
        font-family: 'gg sans', 'Noto Sans', sans-serif;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
          background-color: #5865f2;
          color: #f9faff;
        }
      }

      .glow {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) translateY(50%);
        width: 70%;
        height: 100%;
        background: radial-gradient(50% 50% at 50% 50%, rgba(243, 98, 20, 0.18) 0%, rgba(10, 13, 25, 0) 100%);
        border-radius: 50%;
        z-index: 0;
        pointer-events: none;
      }
    }
  }

  .counter {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 15px;

    p {
      font-family: ClashDisplay-Semibold;
      font-weight: 600;
      font-size: 16px;
      line-height: 100%;
      letter-spacing: 1px;
      color: #fff;
      margin: 0 20px 0 0;

      span {
        color: #F36214;
      }
    }

    .icon {
      margin-left: -15px;
      overflow: hidden;
      border-radius: 50%;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
    }
  }

  /* --- Mobile (max-width: 768px) --- */
  @media screen and (max-width: 768px) {
    margin: 50px 20px;

    h1 {
      text-align: center;
    }

    p {
      margin-top: 5px;
      text-align: center;
    }

    .opinions {
      flex-direction: column;

      .opinion {
        width: 100%;
        margin-right: 0 !important;
        margin-bottom: 20px;
        padding: 20px;

        .flex .user p {
          font-size: 14px;
        }

        p {
          font-size: 14px;
          line-height: 18px;
        }
      }
    }

    .counter {
      justify-content: center;
      margin-top: 0;

      p {
        font-size: 14px;
        margin-right: 10px;
      }

      .icon {
        width: 30px;
        height: 30px;
        margin-left: -10px;
      }
    }
  }

  /* --- Tablets (min-width: 769px and max-width: 1024px) --- */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    margin: 80px 60px;

    .opinions {
      flex-wrap: wrap;

      .opinion {
        width: 48%;
        margin-right: 20px;
        margin-bottom: 20px;

        &:nth-child(2) {
          margin-right: 0;
        }

        .flex .user p {
          font-size: 15px;
        }

        p {
          font-size: 14px;
          line-height: 18px;
        }
      }
    }

    .counter {
      p {
        font-size: 15px;
        margin-right: 15px;
      }

      .icon {
        width: 35px;
        height: 35px;
        margin-left: -12px;
      }
    }
  }

  /* --- Monitors 2k and above (min-width: 2500px) --- */
  @media screen and (min-width: 2500px) {
    margin: 120px 400px;

    .opinions {
      .opinion {
        width: 30%;
        padding: 30px;
        border-width: 1px;

        .flex .user p {
          font-size: 18px;
        }

        p {
          font-size: 14px;
          line-height: 20px;
        }
      }
    }

    .counter {
      p {
        font-size: 18px;
        margin-right: 25px;
      }

      .icon {
        width: 45px;
        height: 45px;
        margin-left: -18px;
      }
    }
  }
}

.glide__slides {
  display: flex;
  align-items: stretch;
}

.glide__slide {
  height: auto !important;
  display: flex;
  align-items: stretch;
}

.opinion {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #ff7a18;
  background: radial-gradient(circle at bottom, rgba(255,122,24,0.1), transparent);
}

@media screen and (max-width: 400px) {
  .feedback {
    margin: 40px 12px;

    h1 {
      font-size: 24px;
      text-align: center;

      span {
        color: #F36214;
      }
    }

    p {
      font-size: 13px;
      margin-bottom: 25px;
      text-align: center;
    }

    .opinions {
      flex-direction: column;

      .opinion {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 15px;
        padding: 15px;
        border-radius: 16px;
        height: auto !important;

        .flex .user p {
          font-size: 13px;
        }

        p {
          font-size: 13px;
          line-height: 18px;
          margin-top: 10px;
        }

        .dc {
          font-size: 12px;
          padding: 0 4px;
        }

        .glow {
          width: 60%;
        }
      }
    }

    .counter {
      justify-content: center;
      margin-top: 10px;

      p {
        font-size: 13px;
        margin-right: 10px;

        span {
          color: #F36214;
        }
      }

      .icon {
        width: 28px;
        height: 28px;
        margin-left: -12px;
      }
    }
  }
}

@media screen and (min-width: 401px) and (max-width: 440px) {
  .feedback {
    margin: 45px 16px;

    h1 {
      font-size: 26px;
      text-align: center;

      span {
        color: #F36214;
      }
    }

    p {
      font-size: 14px;
      margin-bottom: 28px;
      text-align: center;
    }

    .opinions {
      flex-direction: column;

      .opinion {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 18px;
        padding: 18px;
        border-radius: 20px;
        height: auto !important;

        .flex .user p {
          font-size: 14px;
        }

        p {
          font-size: 14px;
          line-height: 20px;
          margin-top: 12px;
        }

        .dc {
          font-size: 13px;
          padding: 0 6px;
        }

        .glow {
          width: 65%;
        }
      }
    }

    .counter {
      justify-content: center;
      margin-top: 12px;

      p {
        font-size: 14px;
        margin-right: 12px;

        span {
          color: #F36214;
        }
      }

      .icon {
        width: 30px;
        height: 30px;
        margin-left: -14px;
      }
    }
  }
}
.footer {
    margin: 100px 296px 20px;

    .footer-box {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;

        .flex {
            display: flex;
        }

        .logo {
            img {
                width: 432px;
            }
        }

        p {
            font-family: ClashDisplay-Regular;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #945833;
            width: 375px;
        }

        .socials {
            margin-top: 20px;
            display: flex;

            .social {
                margin-right: 25px;
                cursor: pointer;
                transition: 0.2s ease-in-out;

                &:hover {
                    filter: contrast(0.6);
                }
            }
        }

        .nawigacja {
            width: 150px;

            &:nth-child(1) {
                margin-right: 40px;
            }

            h2 {
                font-family: ClashDisplay-Medium;
                font-weight: 500;
                font-size: 18px;
                line-height: 24px;
                text-transform: uppercase;
                color: #F36214;
                margin: 0 0 10px 0;
            }

            p {
                font-family: ClashDisplay-Regular;
                font-weight: 400;
                font-size: 14px;
                line-height: 24px;
                color: #945833;
                margin: 0 0 7px 0;
                cursor: pointer;

                &:hover {
                    color: #b18163;
                }
            }
        }
    }

    .line {
        margin: 25px 0 20px 0;
        border: 1px solid #945833;
    }

    .down {
        display: flex;
        justify-content: space-between;
        align-items: center;

        p {
            font-family: ClashDisplay-Regular;
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            color: #945833;
            margin: 0;
        }
    }

    /* === responsiveness === */
    /* Mobile */
    @media screen and (max-width: 768px) {
        margin: 50px 20px 20px;

        .footer-box {
            flex-direction: column;
            align-items: center;

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

            .logo {
                text-align: center;

                img {
                    width: 250px;
                    margin-bottom: 20px;
                }
            }

            p {
                width: 100%;
                text-align: center;
                margin-bottom: 20px;
                font-size: 12px;
                line-height: 18px;
            }

            .socials {
                justify-content: center;
                margin: 10px 0;

                .social {
                    margin-right: 15px;
                }
            }

            .nawigacja {
                width: 100%;
                margin-bottom: 20px;
                text-align: center;

                &:nth-child(1) {
                    margin-right: 0;
                }
            }
        }

        .line {
            margin: 20px 0;
        }

        .down {
            flex-direction: column;
            text-align: center;
            gap: 10px;
        }
    }

    /* Tablets */
    @media screen and (min-width: 769px) and (max-width: 1024px) {
        margin: 80px 60px 20px;

        .footer-box {
            flex-wrap: wrap;
            justify-content: space-around;

            .flex {
                flex-direction: column;
                align-items: flex-start;
                margin-bottom: 30px;
            }

            .logo {
                img {
                    width: 320px;
                }
            }

            p {
                width: 100%;
                max-width: 320px;
                font-size: 13px;
                line-height: 19px;
                margin-bottom: 20px;
            }

            .socials {
                margin-top: 10px;
                justify-content: flex-start;

                .social {
                    margin-right: 20px;
                }
            }

            .nawigacja {
                width: 140px;
                margin-bottom: 30px;

                &:nth-child(1) {
                    margin-right: 30px;
                }
            }
        }

        .line {
            margin: 25px 0 20px 0;
        }

        .down {
            justify-content: space-between;
        }
    }

    /* Monitors 2k and above */
    @media screen and (min-width: 2500px) {
        margin: 120px 400px 20px;

        .footer-box {
            .logo {
                img {
                    width: 500px;
                }
            }

            p {
                width: 400px;
                font-size: 16px;
                line-height: 22px;
            }

            .socials {
                .social {
                    margin-right: 30px;
                }
            }

            .nawigacja {
                width: 160px;

                &:nth-child(1) {
                    margin-right: 50px;
                }
            }
        }

        .down {
            p {
                font-size: 16px;
            }
        }
    }
}

.header {
  margin: 0 296px;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .left-side {
    .add-on {
      display: flex;
      align-items: center;
      background: linear-gradient(360deg, rgba(243, 98, 20, 0.15) 0%, rgba(243, 98, 20, 0) 100%);
      border: 1px solid #F36214;
      border-radius: 45px;
      padding: 5px 20px;
      gap: 7px;
      width: 290px;
      height: 30px;
      margin-bottom: 17px;

      p {
        color: #F36214;
        font-family: ClashDisplay-Medium;
        font-weight: 500;
        font-size: 16px;
        line-height: 100%;
      }
    }

    h2 {
      width: 672px;
      font-family: 'ClashDisplay-Bold';
      font-weight: 700;
      font-size: 42px;
      line-height: 52px;
      color: #FFFFFF;
      margin: 0;
    }

    .infos {
      display: flex;
      align-items: center;

      .info {
        display: flex;
        align-items: center;

        .icon {
          width: 12px;
          height: 18px;
          color: #F36214;
          margin-right: 8px;
        }

        p {
          font-family: 'ClashDisplay-Medium';
          font-weight: 500;
          font-size: 16px;
          line-height: 20px;
          color: #945833;
          margin-right: 12px;
        }
      }
    }

    .buttons {
      display: flex;
      align-items: center;

      p {
        font-family: 'ClashDisplay-Semibold';
        font-weight: 600;
        font-size: 16px;
        line-height: 20px;
        text-align: center;
        letter-spacing: 1.2px;
        color: #FFFFFF;
      }

      .button-1,
      .button-2 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 40px;
        border-radius: 16px;
        gap: 4px;
        cursor: pointer;
        transition: 0.2s ease-in-out;
      }

      .button-1 {
        background: #F36214;
        margin-right: 15px;

        &:hover {
          background: #9e4414;
        }
      }

      .button-2 {
        border: 1px solid #FFFFFF;

        &:hover {
          border-color: #b3b3b3;
          background: #acacac1a;
        }
      }
    }
  }

  .glow-wrapper {
    height: 0;
    overflow: hidden;

    .glow {
      overflow: hidden;
      position: absolute;
      width: 1561px;
      height: 1561px;
      left: -243px;
      top: -725px;
      background: radial-gradient(50% 50% at 50% 50%, #42281A 0%, rgba(15, 11, 10, 0) 100%);
      z-index: -1;
      pointer-events: none;
      animation: pulse 45s infinite ease-in-out;
    }
  }

  /* MOBILE */
  @media screen and (max-width: 768px) {
    margin: 0 40px;
    flex-direction: column;
    height: auto;

    .left-side {
      width: 100%;
      flex-direction: column;
      align-items: center;
      margin: 15vh 0 20vh;

      .add-on {
        width: auto;
        padding: 0 20px;
        height: auto;
        flex-wrap: wrap;

        p {
          margin: 9px 0;
        }
      }

      h2 {
        width: 100%;
        font-size: 28px;
        line-height: 36px;
        text-align: center;
      }

      .infos {
        align-items: flex-start;
        gap: 8px;
        margin: 0 0 5px;

        .info p {
          font-size: 12px;
        }
      }

      .buttons {
        align-items: stretch;
        width: 100%;
        gap: 10px;

        .button-1,
        .button-2 {
          width: 100%;
          padding: 9px 15px;
          margin-right: 0;
        }

        p {
          font-size: 14px;
        }
      }
    }
    .glow {
      display: none;
    }
    .image {
      display: none;
    }
  }

  /* TABLET */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    margin: 0 80px;
    height: auto;
    padding: 60px 0;

    .left-side {
      width: 60%;

      h2 {
        font-size: 36px;
        line-height: 44px;
        width: 100%;
      }

      .add-on {
        width: 250px;
        padding: 5px 15px;
      }

      .infos .info p {
        font-size: 15px;
      }

      .buttons {
        gap: 12px;

        .button-1,
        .button-2 {
          padding: 0 30px;
          font-size: 15px;
        }
      }
    }

    .image {
      width: 40%;

      img {
        max-width: 350px;
        height: auto;
      }
    }
  }

  /* ULTRA WIDE */
  @media screen and (min-width: 2500px) {
    margin: 0 400px;
    height: 80vh;

    .left-side {
      h2 {
        font-size: 48px;
        line-height: 56px;
        width: 720px;
      }

      .add-on {
        width: 320px;
        padding: 5px 25px;
      }

      .infos .info p {
        font-size: 18px;
      }

      .buttons .button-1,
      .buttons .button-2 {
        padding: 0 50px;
        font-size: 18px;
      }
    }

    .glow-wrapper .glow {
      width: 1800px;
      height: 1800px;
      left: -300px;
      top: -800px;
    }

    .image img {
      max-width: 500px;
      height: auto;
    }
  }
}


/* === DESKTOP NAVBAR === */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  color: #fff;
  margin: 0 296px;
}

.navbar .nav-flex {
  display: flex;
  align-items: center;
}

.navbar .logo {
  width: 198px;
  height: 44px;
}

.navbar .line {
  border: 1px solid #945833;
  height: 41px;
  margin: 0 25px 0 65px;
}

.navbar .hrefs {
  display: flex;
  width: 405px;
  height: 20px;
  gap: 32px;
}

.navbar .href {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.navbar .href .arrow {
  width: 11px;
  height: 8px;
}

.navbar .href p {
  font-family: ClashDisplay-Medium;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  color: #945833;
  margin: 0;
  transition: 0.2s ease-in-out;
}

.navbar .href p:hover {
  color: #cfc1b8;
  filter: opacity(0.7);
}

.navbar .href p.active {
  color: #fff !important;
}

.navbar .language {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 30px;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

.navbar .language:hover {
  filter: opacity(0.7);
}

.navbar .language .arrow {
  width: 11px;
  height: 8px;
}

.navbar .language .flag {
  display: flex;
  flex-direction: column;
  width: 29px;
  height: 21px;
}

.navbar .language .flag .white {
  height: 50%;
  background-color: #fff;
  border-radius: 3px 3px 0 0;
}

.navbar .language .flag .red {
  height: 50%;
  background-color: #ff0000;
  border-radius: 0 0 3px 3px;
}

.navbar .panel-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 40px;
  gap: 4px;
  background: #f36214;
  border-radius: 43px;
  margin-right: 25px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

.navbar .panel-button:hover {
  background-color: #9e4414;
}

.navbar .panel-button p {
  font-family: ClashDisplay-Semibold;
  font-weight: 400;
  font-size: 15px;
  line-height: 100%;
  color: #fff;
  margin: 0;
}

.navbar .panel-button .icon {
  width: 20px;
  height: 20px;
}

.navbar .basket {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

.navbar .basket:hover {
  filter: opacity(0.7);
}

.navbar .basket .icon {
  width: 20.3px;
  height: 21.25px;
  margin-right: 4px;
}

.navbar .basket p {
  font-family: ClashDisplay-Medium;
  font-weight: 500;
  font-size: 11px;
  line-height: 100%;
  color: #f36214;
  margin: 0;
}

/* === MOBILE NAVBAR - HIDDEN BY DEFAULT === */
.mobile-navbar {
  display: none;
  width: 100%;
  position: relative;
  z-index: 1000;
}

.mobile-navbar .flexmenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px;
}

.mobile-navbar .logo {
  width: 150px;
  height: auto;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

.hamburger span {
  display: block;
  height: 3px;
  width: 100%;
  background: #945833;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

#mobileMenu {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(7px);
  z-index: 999;
  padding: 10px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: solid 1px #ffffff;
  border-radius: 4%;
}

#mobileMenu.show {
  display: flex;
  animation: fadeIn 0.3s ease-in-out forwards;
}

#mobileMenu .href {
  padding: 15px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

#mobileMenu .href:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#mobileMenu .href p {
  color: white;
  margin: 0;
  font-size: 16px;
  font-family: ClashDisplay-Regular;
  text-align: center;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* === RESPONSIVENESS === */
@media screen and (max-width: 1024px) {
  .navbar {
    display: none;
  }

  .mobile-navbar {
    display: block;
  }
}

/* Ukryj mobile navbar i hamburger na desktopie */
@media screen and (min-width: 1025px) {
  .mobile-navbar,
  .hamburger {
    display: none !important;
  }
}
.pricing {
  margin: 100px 296px;

  h1 {
    font-family: ClashDisplay-Semibold;
    font-size: 36px;
    line-height: 100%;
    letter-spacing: 0%;
    color: #fff;

    span {
      color: #F36214;
    }
  }

  .options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .change {
      display: flex;
      align-items: center;
      background-color: #22150E;
      border-radius: 53px;
      padding: 8px;
      gap: 16px;

      .section {
        display: flex;
        align-items: center;
        border-radius: 53px;
        padding: 0 29px;
        background-color: transparent;
        gap: 6px;
        cursor: pointer;
        transition: 0.2s ease-in-out;
        height: 50px;

        h2 {
          font-family: Poppins;
          font-weight: 500;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0;
          color: #fff;
          margin: 0;
        }

        &:hover {
          background: #F36214;

          svg path {
            fill: #ffffff;
          }
          &:not(:first-child) svg {
            filter: brightness(0) invert(1);
          }
        }
      }

      .active {
        background: #F36214;

        svg path {
          fill: #ffffff;
        }
        &:not(:first-child) svg {
          filter: brightness(0) invert(1);
        }
      }
    }
  }

  .offer {
    margin-top: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .inside {
      width: 32%;
      border-radius: 30px;
      padding: 30px 30px;
      margin-top: 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &.border {
        border: 2px solid #FFC21B;
      }

      .maintext {
        display: flex;
        align-items: center;

        h1 {
          font-family: ClashDisplay-Semibold;
          font-weight: 600;
          font-size: 22px;
          line-height: 32px;
          letter-spacing: 1px;
          color: #fff;
        }
        img {
          width: 32px;
          height: 32px;
          margin-right: 7px;
        }
      }

      h2 {
        margin: 0;
        font-family: ClashDisplay-Semibold;
        font-weight: 600;
        font-size: 37.89px;
        line-height: 46.63px;
        letter-spacing: 1px;
        color: #fff;
      }

      span {
        margin: 0;
        font-family: ClashDisplay-Regular;
        font-weight: 400;
        font-size: 16px;
        line-height: 46.63px;
        letter-spacing: 1px;
        color: #fff;
      }

      p {
        margin: 0 0 15px 0;
        font-family: Poppins;
        font-weight: 400;
        font-size: 16px;
        line-height: 26px;
        letter-spacing: 0%;
        color: #fff;
      }

      .info {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        p {
          margin: 0;
        }
        img {
          margin-right: 15px;
        }
      }

      .button {
        margin-top: 20px;
        border-radius: 50px;
        padding: 17px 69px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.2s ease-in-out;
        cursor: pointer;

        p {
          font-family: ClashDisplay-Semibold;
          font-weight: 600;
          font-size: 18px;
          line-height: 100%;
          letter-spacing: 1px;
          margin: 0;
          color: #F36214;
        }

        &:hover {
          background-color: #c9c9c9;
        }
      }
    }
  }

  .nooffer {
    font-family: ClashDisplay-Medium;
    font-weight: 500;
    font-size: 17px;
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #f31414;
    margin-top: 30px;
    width: 100%;
  }

  /* --- Mobile (max-width: 768px) --- */
  @media screen and (max-width: 768px) {
    margin: 50px 20px;

    h1 {
      font-size: 28px;
      text-align: center;
    }

    .options {
      flex-direction: column;
      gap: 5px;
      justify-content: center;
      margin-bottom: 20px;

      .change {
        padding: 8px 12px;
        gap: 10px;
        justify-content: center;

        .section {
          padding: 0 8px;
          height: 35px;
          font-size: 14px;

          h2 {
            font-size: 13px;
            letter-spacing: 0;
          }
        }
      }
    }

    .offer {
      flex-direction: column;
      gap: 25px;
      align-items: center;

      .inside {
        width: 90%;
        padding: 25px 20px;
        margin-top: 0;

        h2 {
          font-size: 30px;
          line-height: 38px;
        }

        .button {
          padding: 15px 40px;

          p {
            font-size: 16px;
          }
        }
      }
    }
  }

  /* --- Tablets (min-width: 769px and max-width: 1024px) --- */
  @media screen and (min-width: 769px) and (max-width: 1024px) {
    margin: 80px 60px;

    h1 {
      font-size: 32px;
    }

    .options {
      gap: 20px;

      .change {
        .section {
          padding: 0 20px;
          height: 45px;
          font-size: 15px;
        }
      }
    }

    .offer {
      gap: 20px;

      .inside {
        width: 48%;
        padding: 28px 25px;

        h2 {
          font-size: 34px;
        }

        .button {
          padding: 16px 55px;

          p {
            font-size: 17px;
          }
        }
      }
    }
  }

  /* --- Monitors 2k and above (min-width: 2500px) --- */
  @media screen and (min-width: 2500px) {
    margin: 120px 400px;

    h1 {
      font-size: 40px;
    }

    .options {
      gap: 30px;

      .change {
        .section {
          padding: 0 35px;
          height: 55px;
          font-size: 18px;
        }
      }
    }

    .offer {
      gap: 30px;

      .inside {
        width: 30%;
        padding: 35px 40px;

        h2 {
          font-size: 40px;
        }

        .button {
          padding: 20px 75px;

          p {
            font-size: 20px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 400px) {
  .pricing {
    margin: 40px 10px;

    h1 {
      font-size: 24px;
      text-align: center;
    }

    .options {
      flex-direction: column;
      gap: 8px;
      margin-bottom: 15px;

      .change {
        padding: 6px 10px;
        gap: 8px;
        justify-content: center;

        .section {
          padding: 0 6px;
          height: 30px;

          h2 {
            font-size: 12px;
          }
        }
      }
    }

    .offer {
      flex-direction: column;
      gap: 20px;
      align-items: center;

      .inside {
        width: 100%;
        padding: 20px 15px;
        margin-top: 0;

        h2 {
          font-size: 24px;
          line-height: 32px;
        }

        .button {
          padding: 12px 30px;

          p {
            font-size: 14px;
          }
        }
      }
    }

    .nooffer {
      font-size: 14px;
      margin-top: 20px;
    }
  }
}

@media screen and (min-width: 401px) and (max-width: 440px) {
  .pricing {
    margin: 45px 12px;

    h1 {
      font-size: 26px;
      text-align: center;
    }

    .options {
      flex-direction: column;
      gap: 10px;
      margin-bottom: 18px;

      .change {
        padding: 7px 12px;
        gap: 10px;
        justify-content: center;

        .section {
          padding: 0 8px;
          height: 32px;

          h2 {
            font-size: 13px;
          }
        }
      }
    }

    .offer {
      flex-direction: column;
      gap: 22px;
      align-items: center;

      .inside {
        width: 95%;
        padding: 22px 18px;
        margin-top: 0;

        h2 {
          font-size: 26px;
          line-height: 34px;
        }

        .button {
          padding: 14px 35px;

          p {
            font-size: 15px;
          }
        }
      }
    }

    .nooffer {
      font-size: 15px;
      margin-top: 22px;
    }
  }
}
.whyus {
  width: 100%;

  .inside {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 160px;
    border-radius: 35px;
    padding: 27px 35px;
    background: linear-gradient(0deg, rgba(243, 98, 20, 0.15), transparent 57.4%);
    z-index: 1;
    flex-wrap: wrap;

    &::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 35px;
      padding: 2px;
      background: linear-gradient(0deg, #F36214, transparent);
      mask: linear-gradient(#fff, #fff) content-box, linear-gradient(#fff, #fff);
      mask-composite: exclude;
      z-index: -1;
    }

    .atut {
      flex: 1 1 25%;
      box-sizing: border-box;
      padding: 0 15px;

      .flex {
        display: flex;
        align-items: center;

        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #351D13;
          border-radius: 100px;
          width: 53px;
          height: 53px;
        }
      }

      h3 {
        -webkit-text-stroke: 1px #572b19;
        font-family: Poppins;
        font-size: 36px;
        margin: 0;
        line-height: 100%;
        letter-spacing: 0%;
        color: transparent;
      }

      h2 {
        margin-top: 20px;
        margin-bottom: 10px;
        font-family: Poppins;
        font-size: 18px;
        line-height: 100%;
        letter-spacing: 0%;
        color: #fff;
      }

      p {
        margin-top: 0;
        font-family: Poppins;
        font-weight: 400;
        font-size: 16px;
        line-height: 21px;
        letter-spacing: 0%;
        color: #945833;
        width: 100%;
      }
    }
  }

  /* --- Mobile Styles --- */
  @media screen and (max-width: 768px) {
    .inside {
      flex-direction: column;
      margin: 0 15px;
      padding: 0;
      border-radius: 20px;

      .atut {
        margin-bottom: 25px;
        text-align: center;

        .flex {
          justify-content: center;

          .icon {
            width: 45px;
            height: 45px;
          }
        }

        h3 {
          font-size: 28px;
          -webkit-text-stroke-width: 0.8px;
        }

        h2 {
          font-size: 14px;
        }

        p {
          font-size: 11px;
          max-width: 300px;
          margin-left: auto;
          margin-right: auto;
        }
      }
    }
  }
}