* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --whiteBackground: #fff;
  --whiteText: #fff;
  --darkText: rgba(20, 46, 44);
  --lightGray: rgba(244, 245, 246);
  --gray: rgba(222, 226, 227);
  --lightGreen: rgba(21, 80, 81);
  --deepGreen: rgba(21, 80, 81);
  --navDeepGreen: rgba(21, 80, 81);
  --deepGreenFooter: rgba(21, 80, 81);
  --accentGreen: rgba(54, 97, 80);
  --gold: rgba(206, 172, 33);
  --decorativeFont: 'Playfair Display SC', serif;
  --titleFont: 'Playfair Display', serif;
  --smallFont: 1rem;
}

.large-font {
  --smallFont: 1.5rem;
}

.enable-color {
  font-size: 2rem;
}

.dark-mode {
  --whiteBackground: #252525;
  --whiteText: yellow;
  --darkText: yellow;
  --lightGray: #3a3838;
  --gray: #252525;
  --lightGreen: #252525;
  --deepGreen: #252525;
  --deepGreenFooter: #3a3838;
  --navDeepGreen: yellow;
  --accentGreen: yellow;
  --gold: yellow;
}


html,
body {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: var(--smallFont);
  overflow-x: hidden;
  color: var(--darkText);
}

@media screen and (min-width: 320px) {
  body {
    background-color: var(--whiteBackground);
  }

  main {
    background-color: var(--whiteBackground);
  }

  .logo {
    display: none;
  }

  .logo-phone {
    width: 2rem;
    cursor: pointer;
  }

  nav {
    width: 100%;
    display: flex;
    align-items: center;
    position: fixed;
    height: 10vh;
    left: 0;
    right: 0;
    top: 0;
    padding: 0 2rem;
    background-color: var(--lightGray);
    z-index: 999;
  }

  .nav-links {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    position: absolute;
    right: 0px;
    height: 90vh;
    top: 10vh;
    padding: 3rem 0;
    width: 100%;
    background-color: var(--lightGray);
    transform: translateX(100%);

  }

  .nav-links li {
    list-style: none;
  }

  .nav-links li a {
    text-decoration: none;
    z-index: 9999;
    color: var(--navDeepGreen);
    font-size: 1rem;
  }

  .nav-icons ul {
    display: flex;
    list-style: none;
    gap: 3rem;
  }
  .ig-menu {
   width: 2rem !important;
    height: auto;
  }
   .fb-menu {
    width: 2rem !important;
    height: auto;
   }

  .ukr-flag {
    width: 2rem;
  }

  .contrast-btn {
    border: none;
    color: var(--darkText);
    background-color: transparent;
    cursor: pointer;
  }

  .contrast-btn i {
    font-size: 1.2rem;
    margin-left: .5rem;
  }

  .font-btn {
    font-weight: 400;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--darkText);
  }

  .big-a {
    font-size: 1.2rem;
  }

  .burger {
    position: absolute;
    right: 2rem;
    z-index: 99999;
  }

  .burger div {
    width: 28px;
    height: 2px;
    background-color: var(--navDeepGreen);
    margin: 5px;
    transition: all 0.3s ease;
    align-items: flex-end;
  }

  .nav-active {
    transform: translateX(0%);
    transition: transform 0.5s ease-in;
  }

  @keyframes navLinkSlide {
    from {
      opacity: 0;
      transform: translateX(50px);
    }

    to {
      opacity: 1;
      transform: translateX(0px)
    }
  }

  header {
    height: 100vh;
    width: 100%;
    background-image: url(images/banner.jpg);
    background-size: cover;
    background-position: 10% 50%;
    position: relative;

  }

  .header-container {
    position: absolute;
    width: 95%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--gold);
  }

  .header-container h1 {
    text-transform: uppercase;
    font-size: 3.5rem;
    font-weight: 400;
    font-family: var(--decorativeFont)
  }

  .header-container p {
    font-family: 'Julius Sans One', sans-serif;
    font-size: 1rem;
    margin-bottom: 3rem;
  }

  .header-button a {
    text-decoration: none;
    color: var(--whiteText);
    border: var(--whiteText) 1px solid;
    padding: .5rem 1rem;
    cursor: pointer;
  }

  .header-button a:hover {
    border: var(--whiteText) 3px solid;
  }

  main {
    padding: 2rem 1rem;
  }

  .section-1 {
    width: 100%;
  }

  .intro {
    margin: 3rem 0;
    line-height: 1.6rem;
  }

  .section-1 h1 {
    margin: 2rem;
    font-weight: 400;
  }

  .aktualnosci-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 350px));
    /*grid-gap: 1rem;*/
    justify-content: center;
  }

  .card {
    height: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5rem;
  }

  .card-2 {
    height: 1000px;
  }

  .card-3 {
    height: 1000px;
  }

  .card-5 {
    height: 1000px;
  }

  .card-6 {
    height: 1000px;
  }

  .card-7 {
    height: 1000px;
  }

  .card-8 {
    height: 1000px;
  }

  .card-9 {
    height: 1000px;
  }

  .card-10 {
    height: 1000px;
  }

  .card-11 {
    height: 1000px;
  }

  .card-12 {
    height: 1000px;
  }
  .card-13 {
    height: 1000px;
  }
  .card-14 {
    height: 1000px;
  }
  .card-15 {
      height: 1000px;
  }
  .card-15-2 {
      height: 1000px;
  }
    .card-16 {
      height: 1000px;
    }
  
   .card-17 {
       height: 1000px;
   }
     .card-18 {
       height: 1000px;
     }
     .card-19 {
       height: 1000px;
     }
.card-20 {
       height: 1000px;
     }
.card-21 {
       height: 1000px;
     }


  .img-box {
    width: 300px;
    height: 220px;
    position: relative;
  }

  .img1 {
    background-image: url(images/img-1.jpg);
    background-size: cover;
    background-position: center;
  }

  .img2 {
    background-image: url(images/img-3.jpg);
    background-size: cover;
    background-position: center;
  }

  .img3 {
    background-image: url(images/img-4.jpg);
    background-size: cover;
    background-position: center;
  }

  .img4 {
    background-image: url(images/img-10.jpg);
    background-size: cover;
    background-position: center;
    animation: slide 50s infinite;
  }

  @keyframes slide {
    25% {
      background-image: url(images/img-12.jpg);
    }

    50% {
      background-image: url(images/img-13.jpg);
    }

    75% {
      background-image: url(images/img-10.jpg);
    }

    100% {
      background-image: url(images/img-12.jpg);
    }
  }

  .img5 {
    background-image: url(images/img-14.jpg);
    background-size: cover;
    background-position: center;
    animation: 50s infinite;
    animation-name: animation2;
  }

  @keyframes animation2 {
    25% {
      background-image: url(images/img-15.jpg);
    }

    50% {
      background-image: url(images/img-16.jpg);
    }

    75% {
      background-image: url(images/img-14.jpg);
    }

    100% {
      background-image: url(images/img-15.jpg);
    }
  }

  .img6 {
    background-image: url(images/img-17.jpg);
    background-size: cover;
    background-position: center;
  }

  .img7 {
    background-image: url(images/logo-6.png);
    background-size: cover;
    background-position: center;
    animation: 50s infinite;
    animation-name: animation3;
  }

  @keyframes animation3 {
    25% {
      background-image: url(images/logo-7.png);
    }

    50% {
      background-image: url(images/logo-6.png);
    }

    75% {
      background-image: url(images/logo-7.png);
    }

    100% {
      background-image: url(images/logo-6.png);
    }
  }

  .img8 {
    background-image: url(images/logo-4.png);
    background-size: cover;
    background-position: center;
  }

  .img9 {
    background-image: url(images/img-19.jpeg);
    background-size: cover;
    background-position: 80% 80%;
  }

  .img10 {
    background-image: url(images/img-20.jpeg);
    background-size: cover;
    background-position: center;
    animation: 50s infinite;
    animation-name: animation4;
  }

  @keyframes animation4 {
    25% {
      background-image: url(images/img-18.jpeg);
    }

    50% {
      background-image: url(images/img-20.jpeg);
    }

    75% {
      background-image: url(images/img-18.jpeg);
    }

    100% {
      background-image: url(images/img-20.jpeg);
    }
  }

  .img11-1 {
    background-image: url(images/img-21.png);
    background-position: center;
    background-size: cover;
    width: 90%;
    height: 100%;
  }

  .img12 {
    background-image: url(images/img-23.jpg);
    background-size: cover;
    background-position: center;
    animation: 50s infinite;
    animation-name: animation5;
  }

  @keyframes animation5 {
    25% {
      background-image: url(images/img-22.jpg);
    }

    50% {
      background-image: url(images/img-23.jpg);
    }

    75% {
      background-image: url(images/img-22.jpg);
    }

    100% {
      background-image: url(images/img-23.jpg);
    }
  }

  .img14 {
    background-image: url(images/logo-4.png);
    background-size: cover;
    background-position: center;
    animation: 50s infinite;
    animation-name: animation7;
  }

  @keyframes animation7 {
    25% {
      background-image: url(images/logo-2.png);
    }

    50% {
      background-image: url(images/logo-5.png);
    }

    75% {
      background-image: url(images/logo-3.png);
    }

    100% {
      background-image: url(images/logo-1.png);
    }
  }

  .img15 {
      background-image: url(images/plakat.jpg);
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
     /* width: 40%;
      height: 50%;*/
  }
  .img-box {
    width: 300px;
    height: 220px;
    position: relative;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

  .img15-2 {
    background-image: url(images/img-31.png);
    background-size: cover;
    background-position: center;
  }

    .img16 {
      background-image: url(images/img-28.png);
      background-size: cover;
      background-position: center;
      animation: 50s infinite;
      animation-name: animation8;
    }
  
    @keyframes animation8 {
      25% {
        background-image: url(images/img-29.png);
      }
  
      50% {
        background-image: url(images/img-28.png);
      }
  
      75% {
        background-image: url(images/img-29.png);
      }
  
      100% {
        background-image: url(images/img-28.png);
      }
    }

  .img17 {
      background-image: url(images/img-24.jpeg);
      background-size: cover;
      background-position: center;
      animation: 50s infinite;
      animation-name: animation9;
  }

  @keyframes animation9 {
      25% {
          background-image: url(images/img-25.jpeg);
      }

      50% {
          background-image: url(images/img-26.jpeg);
      }

      75% {
          background-image: url(images/img-27.jpeg);
      }

      100% {
          background-image: url(images/img-24.jpeg);
      }
  }

.img18 {
  background-image: url(images/img-30.jpg);
  background-size: cover;
  background-position: center;
}
.img19 {
  background-image: url(images/img-32.jpg);
  background-size: contain;
  background-position: center;
   background-repeat: no-repeat;
}
.img20 {
  background-image: url(images/img-33.jpg);
  background-size: contain;
  background-position: center;
   background-repeat: no-repeat;
}
.img21 {
  background-image: url(images/img-34.jpg);
  background-size: contain;
  background-position: center;
   background-repeat: no-repeat;
}

	.img22 {
    background-image: url(images/img-29.png);
    background-size: cover;
    background-position: center;
  }

  .card-text {
    padding: 1rem .5rem;
    line-height: 1.6rem;
  }

  .card-text hr {
    border: none;
    height: 1px;
    background-color: var(--accentGreen);
    margin: .5rem 0;
    width: 3rem;
  }

  .art-date {
    font-size: .85rem;
    color: var(--accentGreen);
  }

  .art-date .title {
    text-transform: uppercase;
  }

  .section-2 hr {
    width: 100%;
    border: none;
    height: 1px;
    background-color: var(--lightGray);
  }

  .section-2 p {
    margin: 3rem 1rem;
    font-size: .85rem;
    line-height: 1.6rem;
  }

  .logos-wrapper {
    width: 100vw;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 150px));
    grid-template-rows: repeat(auto-fit, minmax(50px, 150px));
    grid-gap: 10px;
    justify-content: center;
    align-items: center;
  }

  .logo-img {
    height: 100px;
  }

  .logo-img img {
    width: 100%;
    object-fit: cover;
  }

  footer {
    width: 100%;
    background-color: var(--deepGreenFooter);
    color: var(--whiteText);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .footer-links-flex {
    display: flex;
  }

  .footer-links li {
    list-style: none;
    margin: .5rem;
  }

  .footer-links li a {
    text-decoration: none;
    color: var(--whiteText);
  }

  footer p {
    font-weight: 300;
    margin-bottom: .5rem;
  }
}

@media screen and (min-width: 700px) {
  nav {
    height: 12vh;
    justify-content: space-between;
  }

  .logo {
    display: inline;
    width: 8rem;
    cursor: pointer;
  }

  .logo-phone {
    display: none;
  }

  .burger {
    display: none;
  }

  .nav-links {
    all: unset;
  }

  .nav-links {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 70%;
  }

  .nav-links li {
    opacity: 1;
  }

  .nav-links li a {
    font-size: 1rem;
  }

  .nav-links li a:hover {
    color: var(--gold);
  }

  .nav-links li button:hover {
    color: var(--gold);
  }

  .nav-icons ul {
    gap: .5rem;
  }

  header {
    background-position: 50% 30%;
  }

  .intro {
    margin: 4rem 6rem;
  }

  .section-2 p {
    margin: 4rem 6rem;
  }
  .card {
    height: auto;  

}
}

@media screen and (min-width: 1000px) {
  .nav-links {
    width: 60%;
  }

  .nav-icons ul {
    gap: 1rem;
  }

  .header-container h1 {
    font-size: 5rem;
  }

  .header-container p {
    font-size: 2rem;
  }

  .header-button a {
    font-size: 1.5rem;
    padding: .5rem 1rem;
    cursor: pointer;
  }

  .section-1 h1 {
    margin-left: 6rem;
  }
  .card {
      height: auto;
 }

}