@font-face {
  font-family: 'Dancing Script';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/dancingscript/v25/If2cXTr6YS-zF4S-kcSWSVi_sxjsohD9F50Ruu7BAyoHTQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/quicksand/v31/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o18E.ttf) format('truetype');
}
::selection {
  color: #000;
  background: #f4efe4;
}
::-moz-selection {
  color: #000;
  background: #f4efe4;
}
a:visited {
  color: #d0c778;
}
a:active {
  color: #d0c778;
}
body {
  margin: 0;
  padding: 0;
  display: grid;
  color: #eaf1f6;
  min-height: 100vh;
  font-family: 'Quicksand', sans-serif;
  grid-template-columns: 1fr;
  background-color: white;
}
body h1,
body h2,
body h3,
body h4,
body h5 {
  font-family: 'Dancing Script', cursive;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.2);
  background: linear-gradient(45deg, #816999, #7429be);
  /* Dodanie gradientu do tła napisu */
  -webkit-background-clip: text;
  /* Ustawienie, aby gradient był widoczny tylko w obszarze tekstu */
  color: transparent;
}
body h1 {
  font-size: 70px;
}
body main {
  min-height: 95vh;
  display: grid;
  grid-template-columns: 20% auto 20%;
  overflow: hidden;
  gap: 0;
}
@media screen and (max-width: 1500px) {
  body main {
    grid-template-columns: 16% 68% 16%;
  }
}
@media screen and (max-width: 1200px) {
  body main {
    grid-template-columns: 1fr;
  }
}
body main .column {
  height: 100%;
}
body main .column-1 {
  background-image: url('../images/left.webp');
  background-attachment: fixed;
  position: relative;
  background-position: center;
}
body main .column-1::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 33%;
  min-height: 100%;
  background: linear-gradient(to right, transparent, black);
  z-index: 1;
  /* Umieść gradient pod elementem block1 */
}
@media screen and (max-width: 1500px) {
  body main .column-1::before {
    width: 16%;
  }
}
@media screen and (max-width: 1200px) {
  body main .column-1::before {
    display: none;
  }
}
body main .column-2 {
  background-color: #000;
}
body main .column-2 .block-1 {
  text-align: center;
  border-bottom: 1px solid #81699950;
  padding-bottom: 20px;
}
body main .column-2 .block-1 p {
  padding: 5px 20px;
  text-indent: 40px;
  text-align: justify;
  font-size: 18px;
}
body main .column-2 .block-1 .container {
  position: relative;
}
body main .column-2 .block-1 .img-gradient {
  width: 100%;
  /* Dostosuj szerokość obrazka według potrzeb */
}
body main .column-2 .block-1 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0));
  /* Gradient 20% od góry i 20% od dołu */
}
body main .column-2 .block-2 {
  text-align: center;
  border-bottom: 1px solid #81699950;
  padding-bottom: 20px;
}
body main .column-2 .block-2 .container {
  position: relative;
}
body main .column-2 .block-2 .img-gradient {
  width: 100%;
  /* Dostosuj szerokość obrazka według potrzeb */
}
body main .column-2 .block-2 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0));
  /* Gradient 20% od góry i 20% od dołu */
}
body main .column-2 .block-2 p {
  padding: 5px 20px;
  text-indent: 40px;
  text-align: justify;
  font-size: 18px;
}
body main .column-2 .block-3 {
  text-align: center;
  border-bottom: 1px solid #81699950;
  padding-bottom: 20px;
}
body main .column-2 .block-3 .container {
  position: relative;
}
body main .column-2 .block-3 .img-gradient {
  width: 100%;
  /* Dostosuj szerokość obrazka według potrzeb */
}
body main .column-2 .block-3 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0));
  /* Gradient 20% od góry i 20% od dołu */
}
body main .column-2 .block-3 p {
  padding: 5px 20px;
  text-indent: 40px;
  text-align: justify;
  font-size: 18px;
}
body main .column-2 .block-4 {
  text-align: center;
  border-bottom: 1px solid #81699950;
  padding-bottom: 20px;
  position: relative;
}
body main .column-2 .block-4 .container {
  position: relative;
}
body main .column-2 .block-4 .img-gradient {
  width: 100%;
  /* Dostosuj szerokość obrazka według potrzeb */
}
body main .column-2 .block-4 .overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0.2) 80%, rgba(0, 0, 0, 0));
  /* Gradient 20% od góry i 20% od dołu */
}
body main .column-2 .block-4 p {
  padding: 5px 20px;
  text-indent: 40px;
  text-align: justify;
  font-size: 18px;
}
body main .column-3 {
  background-image: url('../images/right.webp');
  background-attachment: fixed;
  position: relative;
  background-position: center;
}
body main .column-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 33%;
  min-height: 100%;
  background: linear-gradient(to right, black, transparent);
  z-index: 1;
  /* Umieść gradient pod elementem block1 */
}
@media screen and (max-width: 1500px) {
  body main .column-3::before {
    width: 16%;
  }
}
@media screen and (max-width: 1200px) {
  body main .column-3::before {
    display: none;
  }
}
body footer {
  width: 100%;
  height: 5vh;
  background-color: #000;
  color: #fff;
  font-size: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
  border-top: #e5b02f 1px solid;
}
@media screen and (max-width: 600px) {
  body footer {
    grid-template-columns: repeat(1, 1fr);
    gap: 0px;
  }
}
@media screen and (max-width: 600px) {
  body footer p {
    margin: 0;
  }
}
body footer div {
  display: grid;
  place-items: center;
}
body footer div #company {
  font-weight: bold;
  text-transform: uppercase;
}
body footer #support {
  color: #fff;
}
body footer #support a {
  color: #fff;
  text-decoration: none;
}
/*# sourceMappingURL=style.css.map */