@import url("./bts.css");

:root {
  --kw-green-1: #557F86;
  --kw-green-2: #ACC8CC;
  --kw-green-3: #D8EBEE;
  --kw-white: #FFFFFF;
  --kw-black: #000000;

  --bs-body-font-size: 16px;
  --bs-body-color: #557F86;

  /*--bs-breakpoint-xs: 0;*/
  /*--bs-breakpoint-sm: 768px;*/
  /*--bs-breakpoint-md: 768px;*/
  /*--bs-breakpoint-lg: 1313px;*/
  /*--bs-breakpoint-xl: 1313px;*/
  /*--bs-breakpoint-xxl: 1313px;*/
}

body {
  font-family: "Jost", sans-serif;
  color: var(--kw-green-1);
}

a {
  text-decoration: none;
  color: var(--kw-green-1)
}

#foto {
  display: block;
  /*position: absolute;*/
  /*top: 20px;*/
  /*left: calc(35% + 80px);*/
  max-height: 700px;
}

.left-slogan {
  padding-top: 18rem;
}
.main-title {
  min-height: 675px;
  /*padding-top: 8rem;*/
}

.main-bg {
  background: linear-gradient(to right, #fff, #fff 50%, var(--kw-green-2) 50.01%, var(--kw-green-2) 100%);
}

h1 {
  text-transform: uppercase;
  margin-top: 50px;
  font-size: 1.625rem;
  line-height: 2.343rem;
  font-weight: 400;
}

h2 {
  font-size: 2.25rem;
  line-height: 3.037rem;
  font-weight: 700;
  margin-bottom: 2rem;
  max-width: 33rem;
}

h4 {
  color: var(--kw-white);
  font-size: 2.75rem;
  line-height: 3rem;
  margin-bottom: 5rem;
}

h5 {
  text-transform: uppercase;
}

h6 {
  margin-top: 4rem;
  margin-bottom: 1.25rem;
  font-size: 2.25rem;
  line-height: 3.25rem;
  color: var(--kw-green-2);
  font-weight: 600;
}

h6 + p {
  font-size: 1.125rem;
  line-height: 1.625rem;
  color: var(--kw-black);
  font-weight: 500;
  margin-bottom: 1.5rem;
}

ul.main-menu li {
  display: inline-block;
  text-transform: uppercase;
  margin-left: 2rem;
  margin-top: 50px;
  transition-property: border-bottom-color;
  transition-duration: 1s;
  border-bottom: 3px solid transparent;
}

ul.main-menu li:hover {
  border-bottom: 3px solid var(--kw-green-1);
  transition-property: border-bottom-color;
  transition-duration: 1s;
}

ul.main-menu li a {
  color: white;
  text-decoration: none;
  font-size: 1.0625rem;
  font-weight: 600;

}


#kontakt:target {
  outline: 4px solid var(--kw-green-1);
}
.services h5 {
  margin-top: 0.5rem;
  font-weight: 600;
}

.services h5, .services li {
  font-size: 1.3125rem;
  line-height: 1.9rem;
}

.services li {
  list-style-type: none;
  text-indent: 0;
}
.services li::before {
  content: '•';
  font-size: 16px; /* Adjust the size of the dot */
  vertical-align: middle;
  margin-right: 8px;
  margin-left: -14px; /* Adjust spacing to align with the list */
}



.contact {
  margin-top: 3rem;
  gap: 0;
}
.contact-all {
  background-color: var(--kw-green-3);
  padding: 2rem 8rem 7rem;
}
.contact-all h6 {
    font-size: 3.4375rem;
    line-height: 5rem;
    font-weight: 600;
    color: white;
}


.div-map {
  background-image: url('/img/map.png');
  background-repeat: no-repeat;
  background-size: cover;
}


footer {
  padding-top: 2rem;
  margin-bottom: 4rem;
}

#o-mnie {
  margin-top: -10rem;
  margin-bottom: 2.5rem;
}
#o-mnie   h4 {
  font-size: 2.25rem;
  color: var(--kw-green-1) !important;
  margin-bottom: 2rem;
}
#o-mnie  h5 {
  font-size: 1.5rem;
  text-transform: none;
}


.o-mnie p {
  padding-right: 2rem;
  font-size: 1.125rem;
  margin-bottom: 1.25rem;
}

.cennik {
  color: var(--kw-green-3);


}
.cennik h5 {
  font-size: 3.5375rem;
  line-height: 4.125rem;
  font-weight: 600;
  text-transform: none;
}

.cennik p {
  margin-top: 1rem;
  font-weight: 400;
  margin-bottom: 1rem;
}
.cennik p strong {
  font-weight: 700;
}



.cennik > div {
  margin-top: -12rem;
  padding: 6rem;
  background-color: var(--kw-green-1);
}

.bg-3 {
  background-color: var(--kw-green-3);
  padding: 3rem 6rem;
}

svg {
  background-color: var(--kw-green-2);
  z-index: -100000;
  position: absolute;
  top: 0;
  left: 60%;
  overflow: hidden;
}


/* Middle */
@media screen and (max-width: 1320px) {
  .bg-3 {
    padding: 3rem 0.5rem;
  }

  h1 {
    text-align: center;
  }

  div.container {
    --img-size: 300px;

    background-position: 50% 262px;
    background-size: var(--img-size);
  }

  div.container ul.main-menu {
    padding-left: 0;
  }
    div.container ul.main-menu li {
        margin: 50px 0.5rem 1rem 0.5rem;
      }


  div.container .main-title {
      min-height: auto;
      margin-top: 1.125rem;
      padding-top: 0;
      text-align: center;
    }
  div.container .left-slogan {
      padding-top: 10rem;
      text-align: left;
      padding-left: 3rem;
    }
  div.container h2 {
      line-height: 110%;
    }

  div.container  #foto {
      position: initial;
      padding-bottom: 0;
      display: block;
      top: 0;
    }

  div.container svg {
      top: 0;
      right: 0;
    }

  div.container .contact .contact-all {
      padding-left: 2rem;
      padding-right: 2rem;
    }

  div.container footer.row {
    margin-bottom: 4rem;
    margin-top: 4rem;
  }
  div.container footer.row > div {
        text-align: center !important;
        margin-top: 1rem;
      }
    }



/* Small */
@media screen and (max-width: 992px) {
  #foto {
    margin: auto;
    max-width: 95vw !important;
  }
  .left-slogan {
    padding-top: 0 !important;
    padding-left: 0 !important;
  }
  #foto {
    border-bottom: 4px solid var(--kw-green-2);
  }
  h2 {
    text-align: center;
    width: 100%;
    max-width: 100%;
  }
  svg {
    left: 0;
    width: 100%;
  }
  .main-menu li a {
    color: var(--kw-green-1) !important;
  }
  h2 {
    margin-top: 2rem;
  }
  .cennik > div {
      margin-top: 0;
      padding: 2rem;
    }


  #o-mnie {
    margin-top: 3rem;
  }
  #o-mnie h4 {
    margin-bottom: 2rem;
  }

  .o-mnie p {
    padding-right: 0;
  }
}