/*
Theme Name: wp-webpack2024
Author: the Indeling team
Author URI: https://indeling.ru/
Description: Built on a solidly designed foundation, Twenty Twenty-Two embraces the idea that everyone deserves a truly unique website. The theme’s subtle styles are inspired by the diversity and versatility of birds: its typography is lightweight yet strong, its color palette is drawn from nature, and its layout elements sit gently on the page. The true richness of Twenty Twenty-Two lies in its opportunity for customization. The theme is built to take advantage of the Site Editor features introduced in WordPress 5.9, which means that colors, typography, and the layout of every single page on your site can be customized to suit your vision. It also includes dozens of block patterns, opening the door to a wide range of professionally designed layouts in just a few clicks. Whether you’re building a single-page website, a blog, a business website, or a portfolio, Twenty Twenty-Two will help you create a site that is uniquely yours.
Requires at least: 5.9
Requires PHP: 7.2+
Version: 2.0
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, style-variations, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

html {
    margin: 0 !important;
}

p, span, li, div {
  font-family: "Montserrat", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body{
  background: rgb(19 115 66 / 96%);
  margin: 0;
  background-image: linear-gradient(rgb(0 0 0 / 37%), rgb(0 0 0 / 0%));
  min-height: 100vh;
	overflow-x: hidden;
}

header {
  height: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 12vw !important;
  max-width: -webkit-fill-available;
  width: 76vw;
  margin-top: 30px;
}

.home header {
  position: absolute;
}

wrapper .main span {
  color: #c5c5c5;
  font-size: 20px;
  line-height: 2em;
}

a:active {
  color: rgb(38 143 90 / 96%);
}
 
a{
  text-decoration: none;
  color: rgb(119 233 175 / 96%);
}

.blog p, .post p, span, .post-excerpt, li{
  color: #c5c5c5;
  font-size: 18px;
  line-height: 1.5em;
}

.offer p {
  color: #c5c5c5;
  font-size: 16px;
  line-height: 1em;
}

h1 {
  color: rgb(90 247 167 / 96%);
  font-size: 68px;
  text-align: center;
  margin: 0;
  background: linear-gradient(184deg, #9bffccf5, #3ef99af5, #9bffccf5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 2px 2px 5px rgb(0 0 0 / 43%);
}

/* h1 {
  color: #ebebeb;
  font-size: 54px;
} */

h2 {
  color: rgb(90 247 167 / 96%);
  font-size: 34px;
  text-align: center;
}

h3 {
  color: rgb(90 247 167 / 96%);
  font-size: 34px;
  text-align: center;
}

.main .title {
  justify-content: center;
  display: flex;
}

.header-container {
  width: -webkit-fill-available;
  display: flex;
  align-items: center;
  background: #252d264d;
  padding: 2em;
	z-index: 1;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  border: 1px solid #cdcdcd24;
	justify-content: space-between;
}

.main-navigation {
  display: flex;
  align-items: center;
}

.main-navigation ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  margin: 0 10px;
}

.main-navigation a {
  text-decoration: none;
  color: #ffffff;
  font-size: 19px;
}

/* Стили для мобильного меню */
.burger-menu {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 25px;
  height: 20px;
  cursor: pointer;
}

.burger-menu div {
  width: 25px;
  height: 3px;
  background-color: rgb(90 247 167 / 96%);
}

.mobile-menu {
  flex-direction: column;
  position: absolute;
  top: 60px;
  right: 20px;
  display: none;
  width: 200px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background: #252d264d;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  border: 1px solid #cdcdcd24;
}

.mobile-menu ul {
  flex-direction: column;
  padding: 0;
}

.mobile-menu li {
  margin: 10px 0;
  text-align: center;
}

.no-bullets {
  list-style: none;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-item {
  margin: 0.5em 0;
}

.blog .container#post-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  display: grid;
  grid-column-gap: 3em;
  grid-row-gap: 3em;
}

.offer .img {
  text-align: center;
}

.offer .img img {
  max-height: 105px;
}

img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

.rang img {
  max-width: 35px;
}

.offers-block .offer {
  background: #252d264d;
  padding: 2em;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  border: 1px solid #cdcdcd24;
  text-align: center;
}

.offers-block .offers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
}

footer .main {
  padding: 2em 0;
}

footer .ct-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

button {
  cursor: pointer;
  background-color: rgb(0 245 121 / 26%);
  padding: 1.5vh 3.5vw;
  color: #e9e9e9;
  border-radius: 5px;
  backdrop-filter: blur(7px);
  border: 1px solid #cdcdcd24;
}

.home section.main {
  height: 100vh;
   background-image: linear-gradient(rgb(0 0 0 / 37%), rgb(0 0 0 / 0%)); 
  background-repeat: repeat-x;
  background-position-x: 250px;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
  align-items: center;
  margin-bottom: 5em;
}

.blog section.blog {
  min-height: 60vh;
}

li::marker {
  color: rgb(90 247 167 / 96%);
}

.home section.info {
  margin: 5em 0;
}

.home section.blog {
  margin: 5em 0 0;
}

section.faq .accordion {
  grid-template-columns: repeat(auto-fill, minmax(150px, 19.6vw));
  display: grid;
  grid-column-gap: 3vh;
  grid-row-gap: 3em;
}

.site-logo span {
  color: rgb(119 233 175 / 96%);
  font-size: 24px;
}

body section {
  display: block;
  padding: 0 12vw !important;
}

.post-excerpt {
  margin: 18px 0;
}

.blog button {
  margin-top: 4em;
}

footer p {
  color: #b5b5b5;
}

.post-item {
  display: flex;
  padding: 1em;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #252d264d;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  border: 1px solid #cdcdcd24;
}

.info.info-section-9 .info_block.info-block-9-3, .info.info-section-9 .info_block.info-block-9-4, .info.info-section-9 .info_block.info-block-9-5 {
    border: 2px solid #22208ba6;
    border-radius: 20px;
    box-shadow: 0px 0px 17px #1d237f94;
    padding: 1em;
    flex: 3;
    min-width: 375px;
}

.info.info-section-9 .left.one {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

.info_block.info-block-9-2 {
    width: 100%;
}

.info .container {
  border: 0.3em solid rgb(90 247 167 / 26%);
  border-radius: 1.5em;
  padding: 1em;
  backdrop-filter: blur(7px);
}

.home section.main::before {
  content: "";
  position: absolute;
  width: -webkit-fill-available;
  background: url('https://nzpokiesgames.com/wp-content/uploads/2025/01/IMG_6221.png') no-repeat center / contain;
  z-index: -1;
  height: -webkit-fill-available;
}

.blurred-background {
  background: #252d264d;
  padding: 2em;
  border-radius: 30px;
  backdrop-filter: blur(7px);
  border: 1px solid #cdcdcd24;
}

.blog .blurred-background, .single-post .blurred-background {
  margin: 2em 0;
}

.custom-image.image1::before {
  content: "";
  position: fixed;
  width: 45em;
  height: 100%;
  background: url(https://nzpokiesgames.com/wp-content/uploads/2025/01/IMG_6220.webp) no-repeat center / contain;
  top: 9em;
  left: -11em;
  z-index: -3;
}

.custom-image.image2::before {
  content: "";
  position: fixed;
  width: 46em;
  height: 100%;
  background: url(https://nzpokiesgames.com/wp-content/uploads/2025/01/IMG_6222.webp) no-repeat center / contain;
  top: -13em;
  right: -10em;
  z-index: -3;
}

.single-post .post.post-blok .container {
  border: 0.3em solid rgb(90 247 167 / 26%);
  border-radius: 1.5em;
  padding: 1em;
  backdrop-filter: blur(7px);
  margin-bottom: 3em;
}



@media (max-width: 1470px) {
  section.faq .accordion {
    grid-row-gap: 1em;
  }
}

@media (max-width: 1370px) {
  h1 {
    font-size: 58px;
  }
}

@media (max-width: 1270px) {
  wrapper .main span {
    font-size: 18px;
  }

  h1 {
    font-size: 54px;
  }
}

@media (max-width: 1260px) {

}

@media (max-width: 1160px) {

}

@media (max-width: 1110px) {
  .offers-block .offers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1024px) {
  .custom-image.image1::before {
    max-width: 29em;
    top: 14em;
    left: -7em;
  }

  .custom-image.image2::before {
    width: 31em;
    right: -6em;
  }
}

@media (max-width: 997px) {
    .info.info-section-9 .info_block.info-block-9-3, .info.info-section-9 .info_block.info-block-9-4, .info.info-section-9 .info_block.info-block-9-5 {
        min-width: fit-content;
    }
}
@media (max-width: 986px) {
  .blog .container#post-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    display: grid;
    grid-column-gap: 2em;
    grid-row-gap: 2em;
  }
}



@media (max-width: 864px) {
  .offers-block .offers {
      grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 850px) {
  wrapper .main span {
    font-size: 16px;
  } 

  h1 {
    font-size: 46px;
  }

  .blog p, .post p, span, .post-excerpt, li {
    font-size: 16px;
  }

  .home section.info {
    margin: 3em 0;
  }

  h3 {
    font-size: 22px;
  }
  h2 {
    font-size: 30px;
  }
}

/* Показ меню для мобильных устройств */
@media (max-width: 768px) {
  .main-navigation {
    display: none;
  }

  .header-container {
    justify-content: space-between;
  }

  .burger-menu {
    display: flex;
  }

  .mobile-menu.active {
    display: flex;
  }

  .custom-image.image1::before {
      max-width: 22em;
      top: 16em;
      left: -6em;
  }

  .custom-image.image2::before {
    width: 30em;
    right: -9em;
  }

}

@media (max-width: 665px) {
  h1 {
    font-size: 35px;
  }
}

@media (max-width: 640px) {
  .blog .container#post-container {
      grid-template-columns: repeat(1, minmax(0, 1fr));
      display: grid;
      grid-row-gap: 3em;
  }

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

@media (max-width: 580px) {
  .blog p, .post p, span, .post-excerpt, li {
    font-size: 14px;
  }

  h1 {
        font-size: 30px;
  }

  h2 {
    font-size: 27px;
  }

  h3 {
    font-size: 20px;
  }
}

@media (max-width: 540px) {

  wrapper .main span {
    line-height: 1.5em;
  }

}

@media (max-width: 500px) {
  .offers-block .offers {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}