/*
Theme Name: Qi
Theme URI: https://qodeinteractive.com/qi-theme
Description: Qi theme is the latest free offering developed by Qode Interactive, winners of multiple awards and accolades in the fields of web design and development and one of bestselling WordPress theme creators. We approached Qi the same way we do when we develop premium themes - this means that the theme features comprehensive modules for your portfolio, shop, blog, a beautiful selection of contemporary premade inner page templates great for a wide array of purposes, and all the options and functionalities you may ever need to set up a professional website the easy way. Qi theme features 100 beautifully designed starter sites for all types of modern websites. Alongside stunningly designed websites for all types of businesses including spa, beauty salon, medical, SaaS, marketing, gym, and dentist websites, just to name a few, Qi also has a huge collection of sites great for personal uses. Do you wish to create a new CV or a resume, or perhaps you are a restaurant owner, a videographer or an SEO expert? Or maybe you’re just looking for a captivating yet simple way to announce your wedding? Whatever it might be, Qi has you covered! Top all this off with the authentic design style that Qode Interactive collective is known for, and you get a true creative powerhouse that’s fast, reliable and comes with virtually limitless customization options!
Author: Qode Interactive
Author URI: https://qodeinteractive.com
Text Domain: qi
Version: 1.0.7
Requires at least: 5.0
Tested up to: 5.9
Requires PHP: 5.6
Tags: food-and-drink, e-commerce, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, featured-images, custom-logo, custom-menu, footer-widgets, post-formats, full-width-template, sticky-post, threaded-comments, translation-ready, editor-style
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

body {
  font-family: 'Roboto', sans-serif;
}
/* header */

.header {
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.header ul {
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  background-color: #fff;
}

.header li a {
  display: block;
  padding: 20px 20px;
  border-right: 1px solid #f4f4f4;
  text-decoration: none;
}

.header li a:hover,
.header .menu-btn:hover {
  background-color: #f4f4f4;
}

.header .logo {
  display: block;
  float: left;
  font-size: 2em;
  padding: 10px 20px;
  text-decoration: none;
}

/* menu */

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height .2s ease-out;
}

/* menu icon */

.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 20px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  background: #333;
  display: block;
  height: 2px;
  position: relative;
  transition: background .2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: #333;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  transition: all .2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;
}

.header .menu-icon .navicon:after {
  top: -5px;
}

/* menu btn */

.header .menu-btn {
  display: none;
}

.header .menu-btn:checked ~ .menu {
  max-height: 280px;
}

.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
}

.header .menu-btn:checked ~ .menu-icon .navicon:before {
  transform: rotate(-45deg);
}

.header .menu-btn:checked ~ .menu-icon .navicon:after {
  transform: rotate(45deg);
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
  top: 0;
}

/* 48em = 768px */

@media (min-width: 48em) {
  .header li {
    float: left;
  }
  .header li a {
    padding: 20px 30px;
  }
  .header .menu {
    clear: none;
    float: right;
    max-height: none;
  }
  .header .menu-icon {
    display: none;
  }
}

.hero {
    display: block;
    width: 100%;
    height: 90vh;
    background-image: url(/wp-includes/images/main.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.hero .container {
    max-width: 69.375rem;
    margin: 0 auto;
}

.hero-text {
    padding-top: 25vh;
    padding-left: 10vw;
}

.h1 {
    font-size: 48px;
    font-weight: 600;
    color: #fff;
    line-height: 50px;
}

.inner-hero {
    color: #fff;
    font-weight: 400;
    font-size: 24px;
    margin: 20px 0;
    max-width: 700px;
    line-height: 26px;
}

.hero .button {
    margin-top: 10px;
}

.button {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    background: #8BC041;
    padding: 14px 42px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
    border: 2px solid #8BC041;
    cursor: pointer;
}

.button:hover {
    background: #8BC041;
    transition: 0.2s;
}

.header_line {
  display: flex;
  justify-content: space-between;
  padding: 2px 30px;
  font-size: 12px;
  color: #333;
  background-color: #fff;
  width: 100%;
  border-bottom: 1px solid #f4f4f4;
}

.container-header {
  width: 100%;
  background: #fff;
}

.container {
  width: 100%;
}

.section {
  max-width: 1140px;
  margin: 0 auto;
}


.carousel-container {
  border-radius: 0px;
  overflow: hidden;
  max-width: 1140px;
  position: relative;
  margin: auto;
  z-index: 0;
}

/* Hide the images by default */
.mySlides {
  display: none;
}
.mySlides img {
  display: block;
  width: 100%;
}

/* image gradient overlay [optional] */
/*  .mySlides::after {
  content: "";
  position: absolute;
  inset: 0;
    background-image: linear-gradient(-45deg, rgba(110, 0, 255, .1), rgba(70, 0, 255, .2));
} */

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: auto;
  padding: 20px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  border-radius: 0 8px 8px 0;
  background: rgba(173, 216, 230, 0.1);
  user-select: none;
}
.next {
  right: 0;
  border-radius: 8px 0 0 8px;
}
.prev:hover,
.next:hover {
  background-color: rgba(173, 216, 230, 0.3);
}

/* Caption text */
.text {
  color: #f2f2f2;
  background-color: rgba(139, 192, 65, 0.6);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  font-size: 20px;
  padding: 8px 12px;
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
}

/* Number text (1/3 etc) */
.number {
  color: #f2f2f2;
  font-size: 16px;
  background-color: rgba(173, 216, 230, 0.15);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  padding: 8px 12px;
  position: absolute;
  top: 10px;
  left: 10px;
}
.dots-container {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translate(-50%);
}

/* The dots/bullets/indicators */
.dots {
  cursor: pointer;
  height: 14px;
  width: 14px;
  margin: 0 4px;
  background-color: rgba(173, 216, 230, 0.2);
  backdrop-filter: blur(2px);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.active,
.dots:hover {
  background-color: rgba(173, 216, 230, 0.8);
}

/* transition animation */
.animate {
  -webkit-animation-name: animate;
  -webkit-animation-duration: 1s;
  animation-name: animate;
  animation-duration: 2s;
}

@keyframes animate {
  from {
    transform: scale(1.1) rotateY(10deg);
  }
  to {
    transform: scale(1) rotateY(0deg);
  }
}


.product-flex {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.product {
  width: 30%;
  text-align: center;
  border-radius: 3px;
  padding: 10px 15px;
}

.product-title {
  font-size: 22px;
  color: #000;
  font-weight: 600;
  padding: 10px 0;
}

.product-descr {
  font-size: 14px;
  color: #000;
}

.product-price {
  font-size: 24px;
  color: #000;
  font-weight: 500;
  padding: 10px 0;
}

.product-available {
  font-size: 12px;
  color: #10af23;
  padding: 10px 0;
}

.orange {
  color: #e8a401;
}

.purpur {
  color: #8BC041;
}

.product-button {
	color: #8BC041;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    padding: 14px 42px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
    border: 2px solid #8BC041;
}

.product-button:hover {
    background: #8BC041;
    transition: 0.2s;
    color: #fff;
    cursor: pointer;
}

.btn-7 {
	padding: 4px 16px;
	font-size: 14px;
}

.section h2 {
  margin: 100px 0 60px 0;
}

.footer {
  background-color: #363636;
  width: 100%;
}

.footer-flex {
  display: flex;
  padding: 40px 0;
  justify-content: space-between;
}

.footer-left {
  color: #dadada;
  font-size: 13px;
  width: 40%;
  line-height: 18px;
}

.footer-left ul li {
  margin-left: 15px;
}

.footer h3 {
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  font-weight: 500;
  margin: 0 0 10px 0;
}

.footer-center {
  color: #dadada;
  font-size: 13px;
  width: 20%;
  line-height: 18px;
}

.footer-center i {
  margin-right: 8px;
  font-size: 18px;
}

.footer-center div {
  margin-bottom: 10px;
}

.footer-right {
  width: 20%;
}

input[type=text] {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 5px 0;
    padding: 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    font-weight: inherit;
    color: #dadada;
    background-color: transparent;
    border: 1px solid #dadada;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
}

.modal input[type=text],
.modal input[type=tel],
.modal input[type=email] {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 5px 0;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: inherit;
    color: #333;
    background-color: transparent;
    border: 1px solid #a3a3a3;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
    font-weight: 400;
}

.modal input[type=text]:focus,
.modal input[type=tel]:focus,
.modal input[type=email]:focus {
    border: 1px solid #8BC041;
    color: #333;
}

textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 5px 0;
    padding: 4px;
    font-family: inherit;
    font-size: 13px;
    line-height: 20px;
    font-weight: inherit;
    color: #dadada;
    background-color: transparent;
    border: 1px solid #dadada;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
}

.modal textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0 0 5px 0;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: inherit;
    color: #333;
    background-color: transparent;
    border: 1px solid #a3a3a3;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
    font-weight: 400;
}

.modal textarea:focus {
	border: 1px solid #8BC041;
}

.modal input[type=submit] {
    color: #8BC041;
    font-size: 16px;
    font-weight: 600;
    background: transparent;
    padding: 14px 42px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
    border: 2px solid #8BC041;
    margin: 0 auto;
}

.modal input[type=submit]:hover {
    background: #8BC041;
    transition: 0.2s;
    color: #fff;
    cursor: pointer;
}

.footer-right input[type=text],
.footer-right input[type=tel] {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0;
    padding: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: inherit;
    color: #a3a3a3;
    background-color: transparent;
    border: 1px solid #a3a3a3;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
    font-weight: 400;
}

.footer-right input[type=text]:focus,
.footer-right input[type=tel]:focus {
    border: 1px solid #8BC041;
    color: #fff;
}


.footer-right textarea {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: top;
    margin: 0;
    padding: 8px;
    font-family: inherit;
    font-size: 14px;
    line-height: 20px;
    font-weight: inherit;
    color: #a3a3a3;
    background-color: transparent;
    border: 1px solid #a3a3a3;
    border-radius: 0;
    box-sizing: border-box;
    outline: 0;
    cursor: pointer;
    transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out;
    font-weight: 400;
   	height: 70px;
}

.footer-right textarea:focus {
	border: 1px solid #8BC041;
	color: #fff;
}

.footer-right input[type=submit] {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    background: #8BC041;
    padding: 5px 16px;
    border-radius: 3px;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
    border: 2px solid #8BC041;
    margin: 0 auto;
}

.footer-right input[type=submit]:hover {
    background: #8BC041;
    transition: 0.2s;
}

.footer-right .wpcf7 form.sent .wpcf7-response-output {
    color: #fff;
}

.footer-right p {
	margin: 0;
}

.footer-right label {
	margin: 0;
	display: flex;
}

.form-product {
	font-size: 18px;
	font-weight: 600;
}

.form-price {
	font-size: 13px;
	color: #10af23;
}

.form-price.orange {
	color: #e8a401;
}

.copyright-line {
  background-color: #8BC041;
  color: #fff;
  padding: 4px 0;
  font-size: 12px;
}

.product:hover {
  -webkit-box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.15);
  -moz-box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.15);
  box-shadow: 2px 2px 3px 1px rgba(0,0,0,0.15);
  transition: 0.2s;
}

.none:hover {
  box-shadow: none;
}

a:hover {
  text-decoration: none;
  color: #8BC041;
  transition: 0.2s;
}

.footer-center a {
  color: #dadada;
}

.footer-center a:hover {
  text-decoration: none;
  color: #8BC041;
  transition: 0.2s;
}

.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.backdrop {
  position: absolute;
  background-color: black;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.32s ease-out;
}

.content {
  background-color: white;
  z-index: 2;
  border-radius: 5px;
  padding: 20px;
  position: relative;
  top: 100%;
  transition: top 0.23s ease-out;
}

.content form {
  margin-top: 10px;
  text-align: center;
}

.modal.active {
  pointer-events: auto;
}

.modal.active > .backdrop {
  opacity: 0.6;
}

.modal.active > .content {
  top: 0%;
}

.close {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 20px;
  cursor: pointer;
}

.spec-flex {
  display: flex;
  justify-content: space-between;
}

.spec-flex img {
  padding-right: 30px;
}

.obmezhennya {
  color: #8BC041;
}



@media (max-width: 528px) {
  .header_line {
    display: none;
  }

  .header {
    display: block;
  }

  .h1 {
    font-size: 28px;
    line-height: 32px;
  }

  .hero-text {
    padding-top: 20vh;
    padding-left: 40px;
  }

  .inner-hero {
    font-size: 20px;
  }

  .product-flex {
    flex-wrap: wrap;
  }

  .product {
    width: 100%;
  }

  .footer-flex {
    flex-wrap: wrap;
  }

  .footer-left {
    width: 100%;
  }

  .footer-center {
    color: #dadada;
    font-size: 13px;
    width: 100%;
    line-height: 18px;
  }

  .footer-right {
    width: 100%;
  }

  .button {
    padding: 12px 22px;
  }

  .section h2 {
    margin: 60px 0 60px 0;
  }

  h2 {
    font-size: 30px;
  }

  .text {
    display: none;
  }

  .product-button {
    padding: 12px 22px;
  }

  .footer-flex {
    padding: 40px 40px;
  }

  .copyright-line {
    padding: 4px 40px;
  }

  .footer-left {
    margin-bottom: 30px;
  }

  .footer-center {
    margin-bottom: 30px;
  }

  .spec-flex {
  	flex-wrap: wrap;
  	padding: 20px;
  }

  .spec-flex img {
  	padding-right: 0px;
}

}

.cf7sr-g-recaptcha {
	margin-bottom: 10px;
}