@import url('https://fonts.googleapis.com/css2?family=Inter,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Plus+Jakarta+Sans,wght@1,200..800&display=swap');

body {
  background: linear-gradient(#00588E, #001F31);
  height: 100vh;
}


h2 {
    font: 700 30px/1.21 "Inter", sans-serif;
    letter-spacing: 0.2px;
  }

.can-serve-you {
    padding: 72px 0;
  }
  .can-serve-you .can-serve-you__container {
    max-width: 1080px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__map {
    display: flex;
    justify-content: center;
    width: 525px;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__marketing {
    display: flex;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__logo {
        width: 471px;
        padding-bottom: 100px;
   }

    .can-serve-you .can-serve-you__container .can-serve-you__logo img {
        /*margin-left: -20px;*/
    }

  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__container {
    flex-direction: column;
    align-items: normal;
    gap: 24px;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__container .button-pro {
    font: 700 32px / 1.21 "Plus Jakarta Sans", sans-serif;
    width: 204px;
    height: 73px;
    padding: 10px 20px;
    border-radius: 61px;
    justify-content: space-between;
    gap: 10px;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__container .button-pro img {
    width: 26px;
    height: 26px;
  }




  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__container h2 {
    color: white;
    margin-bottom: 8px;
    margin-top: 0;
    text-align: center;
    font: 700 43px/1.21 "Plus Jakarta Sans", sans-serif;
  }
  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__container h2 span {
    color: #90C1D5;
  }
  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__container h2 span:first-child {
    font: 400 35px/1.21 "Inter", sans-serif;
  }
  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__badge {
    width: fit-content;
    align-self: center;
    padding: 15px 32px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
  }
  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__show {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
  }
  .can-serve-you .can-serve-you__container .can-serve-you__marketing .can-serve-you__show::after {
    display: block;
    transform: scale(1.5);
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='10' viewBox='0 0 11 10' fill='none'%3E%3Cpath d='M5.5 0.9375C6.57744 0.9375 7.61075 1.36551 8.37262 2.12738C9.13449 2.88925 9.5625 3.92256 9.5625 5C9.5625 6.07744 9.13449 7.11075 8.37262 7.87262C7.61075 8.63449 6.57744 9.0625 5.5 9.0625C4.42256 9.0625 3.38925 8.63449 2.62738 7.87262C1.86551 7.11075 1.4375 6.07744 1.4375 5C1.4375 3.92256 1.86551 2.88925 2.62738 2.12738C3.38925 1.36551 4.42256 0.9375 5.5 0.9375ZM5.5 10C6.82608 10 8.09785 9.47322 9.03553 8.53553C9.97322 7.59785 10.5 6.32608 10.5 5C10.5 3.67392 9.97322 2.40215 9.03553 1.46447C8.09785 0.526784 6.82608 0 5.5 0C4.17392 0 2.90215 0.526784 1.96447 1.46447C1.02678 2.40215 0.5 3.67392 0.5 5C0.5 6.32608 1.02678 7.59785 1.96447 8.53553C2.90215 9.47322 4.17392 10 5.5 10ZM4.71875 6.5625C4.45898 6.5625 4.25 6.77148 4.25 7.03125C4.25 7.29102 4.45898 7.5 4.71875 7.5H6.28125C6.54102 7.5 6.75 7.29102 6.75 7.03125C6.75 6.77148 6.54102 6.5625 6.28125 6.5625H6.125V4.84375C6.125 4.58398 5.91602 4.375 5.65625 4.375H4.71875C4.45898 4.375 4.25 4.58398 4.25 4.84375C4.25 5.10352 4.45898 5.3125 4.71875 5.3125H5.1875V6.5625H4.71875ZM5.5 3.75C5.66576 3.75 5.82473 3.68415 5.94194 3.56694C6.05915 3.44973 6.125 3.29076 6.125 3.125C6.125 2.95924 6.05915 2.80027 5.94194 2.68306C5.82473 2.56585 5.66576 2.5 5.5 2.5C5.33424 2.5 5.17527 2.56585 5.05806 2.68306C4.94085 2.80027 4.875 2.95924 4.875 3.125C4.875 3.29076 4.94085 3.44973 5.05806 3.56694C5.17527 3.68415 5.33424 3.75 5.5 3.75Z' fill='black'/%3E%3C/svg%3E");
    filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(64deg) brightness(104%) contrast(102%);
    margin-top: -3px;
    }
  .can-serve-you .can-serve-you__container .can-serve-you__zip-check {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding: 87px 0 213px;
  }
  .can-serve-you .can-serve-you__container .can-serve-you__zip-check label {
    display: block;
    color: #CFDBE0;
    font: 400 16px/1.21 "Plus Jakarta Sans", sans-serif;
    padding-bottom: 10px;
    padding-left: 15px;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__zip-check select, .can-serve-you .can-serve-you__container .can-serve-you__zip-check input {
    color: #FFF;
    background-color: #002A43;
    padding: 10px 40px;
    border-radius: 43px;
    border: none;
    font: 600 60px/1.21 "Plus Jakarta Sans", sans-serif;
    height: 120px;
    border-radius: 74px;
    letter-spacing: 20px;
    position: relative;
    z-index: 2;
  }


  .can-serve-you .can-serve-you__container .can-serve-you__zip-check select, .can-serve-you .can-serve-you__container .can-serve-you__zip-check input::placeholder {
    color: #426A8D;
    opacity: 1; /* Firefox */
  }
  .can-serve-you .can-serve-you__container .can-serve-you__zip-check select {
    appearance: none;
  }

  /*
  .can-serve-you .can-serve-you__container .can-serve-you__zip-check div:nth-child(3) {
    display: flex;
    justify-content: center;
    padding-top: 24px;
  }
  */

  .can-serve-you .can-serve-you__container .can-serve-you__zip-check .can-serve-you__check {
    width: 211px;
  }

  .can-serve-you .can-serve-you__container .can-serve-you__zip-check select,
  .can-serve-you .can-serve-you__container .can-serve-you__zip-check input,
  .can-serve-you .can-serve-you__container .can-serve-you__zip-check button {
    /* width: 163px; */
    }

    .can-serve-you .can-serve-you__container .can-serve-you__zip-check input {
      width: 461px;
      padding: 0 90px;
      box-shadow: inset 0px 9px 16.6px 0px rgba(0, 0, 0, 0.25)
    }

    .can-serve-you .can-serve-you__container .can-serve-you__zip-check input:focus-within {
      outline: none;
    }

    .can-serve-you .can-serve-you__container .can-serve-you__qr {
      display: flex;
      gap: 24px;
      width: 200px;
      position: absolute;
      bottom: 200px;
      right: 100px;
    }

    .can-serve-you .can-serve-you__container .can-serve-you__qr .can-serve-you__container-image {
      background-color: white;
      /* width: ; */
    }

    .can-serve-you .can-serve-you__container .can-serve-you__qr .can-serve-you__container-image svg  {
      width: 100%;
      height: 100%;
    }


  .button-pro {
    border-radius: 61px;
    background-color: #D3004B;
    color: white;
    font: 700 20px/1.21 "Plus Jakarta Sans", sans-serif;
    letter-spacing: 0.2px;
    width: 183px;
  }
  .button-pro:hover, .button-pro:active, .button-pro:focus, .button-pro:focus-within {
    color: white;
    background-color: #D3004B;
  }

  .button-v1 {
    color: #4A95B4;
    font: 700 32px/1.21 "Inter", sans-serif;
    background-color: white;
    padding: 15px 0;
    height: 91px;
    border-radius: 61px;
  }

  #loader {
    display: none;
    border: 2px solid #FFF;
    border-radius: 50%;
    border-top: 4px solid #4A95B4;
    width: 15px;
    height: 15px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.keyboard {
    display: none; /* Ukryj klawiaturę domyślnie */
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    position: absolute;
    margin-left: 45px;
    border-radius: 50px;
    overflow: hidden;
    z-index: 2;
}

.keyboard.active {
    display: grid; /* Pokaż klawiaturę gdy jest aktywna */
}

.key {
   /* -webkit-tap-highlight-color: transparent; */
    font: 700 56px/1.21 "Plus Jakarta Sans", sans-serif;
    color: #fff;
    padding: 15px;
    background-color: #426A8D;
    border: none;
    cursor: pointer;
    text-align: center;
    width: 120px;
    height: 120px;
}

.key:last-child {
  background-color: #90C1D5;
}

.key:hover {
    /* background-color: #ccc; */
}

.accept img, .delete img {
    /* grid-column: span 2; */
    width: 58px;
}

.delete {

}

.overlay {
  display: none; /* Ukryj overlay domyślnie */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #002A43;
  opacity: 0.58;
  z-index: 1;
}

.modal {
    padding: 70px 95px;
    flex-direction: column;
    align-items: center;
}

.modal .logo {
    width: 471px;
    height: 113px;
}

.modal .modal-close {
    align-self: baseline;
}

.modal .logo {
    margin-top: -62px;
    margin-bottom: 90px;
}

.modal h2 {
    font: 700 55px/1.21 "Plus Jakarta Sans", sans-serif;
    color: white;
    margin: 0;
    padding-top: 50px;
}

.modal p {
    font: 400 32px/1.21 "Plus Jakarta Sans", sans-serif;
    color: #90C1D5;
    padding-top: 50px;
    text-align: center;
    max-width: 700px;
    margin: 0;
}

img {
    width: 100%;
}

.modal-open {
    width: fit-content;
    align-self: center;
}


.can-serve-you__true {

}

.can-serve-you__true lord-icon {
  width: 245px;
  height: 245px;

}

.can-serve-you__true .text h2 {
  /* font: 700 56px/1.21 "Plus Jakarta Sans", sans-serif; */
  color: #90C1D5;
}

.can-serve-you__true .text h3 {
  font: 700 40px/1.21 "Plus Jakarta Sans", sans-serif;
  color: white;
  padding-top: 10px;
}

.can-serve-you__true .text h2,
.can-serve-you__true .text h3 {
  text-align: center;
  max-width: 620px;
  margin: 0 auto;
}

.can-serve-you__true .button-v1 {
  padding: 15px 50px;
  width: fit-content;
}

.can-serve-you__true .input {
  display: flex;
  flex-direction: column;
  gap: 50px;
  align-items: center;
}

.can-serve-you__true input {
  width: 600px;
  margin: 0 auto;
  background: none;
  border: none;
  border-bottom: 3px solid rgba(255, 255, 255, 0.23);
  padding: 30px;
  text-align: center;
}

.can-serve-you__true input:nth-child(2) {
  margin: 0;
}


.can-serve-you__true input::placeholder,
.can-serve-you__true input {
  color: white;
  opacity: 1; /* Firefox */
  font: 700 39px/1.21 "Plus Jakarta Sans", sans-serif;
}

.can-serve-you #error-message {
  margin-top: -201px;
}

.error {
  max-width: 600px;
  font: 400 20px/1.21 "Plus Jakarta Sans", sans-serif;
  color: #D3004B;
  padding-top: 10px;
}

.emailForm {
  display: flex;
  /* gap: 50px; */
  padding-top: 75px;
  flex-direction: column;
  align-items: center;
}

.show {
  display: flex!important;
}

video {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}

.qrs {
  padding: 102px;
  display: flex;
  gap: 23px;
  justify-content: center;
}

.qrs img {
  width: 196px;
}

.buttons {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 70px;
}

.footer {
  position: absolute;
  bottom: 0;
  padding: 58px 68px 68px 68px;
  border-top: 1px solid #426A8D;
}

.button-v2 {
  border-radius: 61px;
  border: 2px solid #426A8D;
  padding: 15px 35px;
  background: none;
  color: #4A95B4;
  font: 700 32px/1.21 "Inter", sans-serif;
  height: 91px;
  display: flex;
  gap: 20px;
  align-items: center;
}

[id^=modal] {
  display: none;
  border: 1px solid red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 100%;
  overflow-y: auto;
  }
input[type=checkbox] {
  position: absolute;
  clip: rect(0 0 0 0);
  }

  .hide {
  display: none
}