/*
Theme Name: Porto
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive Wordpress + eCommerce Theme.
Version: 6.3.2
License: Commercial
License URI: http://themeforest.net/licenses/regular_extended
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
Text Domain: porto
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/

/* fonts */
@font-face {
  font-family: "Gilroy-Regular";
  src: url("./fonts/hairboss/Gilroy-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Gilroy-Medium";
  src: url("./fonts/hairboss/Gilroy-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}
@font-face {
  font-family: "Intro-BoltAlt";
  src: url("./fonts/hairboss/Intro\ W01\ Bold\ Alt.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
}

/* global */
.bypostauthor {
  display: block;
}

.font-gilroy-reg {
  font-family: Gilroy-regular, sans-serif;
}
.padd-0 a {
  padding: 0;
}
.font-intro-bold {
  font-family: "Intro-BoltAlt";
}

.primary-btn a,
.primary-btn button {
  font-family: "Gilroy-Regular";
  border-bottom: 1px dashed #f25900;
  padding: 0;
  font-weight: 600 !important;
  position: relative;
}

/* header */
.no-breadcrumbs .main-content {
  padding-top: 0;
  padding-bottom: 0;
}
#header .header-main .container {
  max-width: 1430px;
}
#menu-main-menu .menu-item {
  margin-right: 15px !important;
  margin-left: 15px !important;
  border-bottom: 1px dashed transparent;
}
#menu-main-menu .menu-item a {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* #menu-main-menu .menu-item:hover {
  border-bottom: 1px dashed #f25900;
} */
.mega-menu.menu-hover-line:not(:hover) > li.menu-item.active > a:before {
  opacity: 0 !important;
}
.mega-menu > li.menu-item.active,
.mega-menu > li.menu-item:hover {
  border-bottom: 1px dashed #f25900 !important;
}
.mega-menu.menu-hover-line > li.menu-item > a:before {
  display: none !important;
}
#nav-panel .mobile-nav-wrap {
  background-color: #151515;
}
#nav-panel .accordion-menu li {
  border-bottom: none !important;
}
#nav-panel .accordion-menu > li.menu-item > a,
#nav-panel .accordion-menu > li.menu-item > .arrow {
  color: #fff;
}

/* #header .header-main.sticky > div{
  background-color: transparent !important;
} */
#header .header-row.container {
  background-color: #000;
}

/* offer */

#offer {
  position: relative;
}

.offer__link.primary-btn a,
.offer__link.primary-btn button,
.offer-pres__link.primary-btn a,
.offer-pres__link.primary-btn button {
  padding-right: 40px;
  text-align: left;
}
.primary-btn button:focus,
.primary-btn a:focus {
  box-shadow: none;
}
.lazer-link.primary-btn a,
.lazer-link.primary-btn button {
  padding-right: 52px;
}

.offer__link.primary-btn a::after,
.offer-pres__link.primary-btn a::after,
.lazer-link.primary-btn a::after,
.offer__link.primary-btn button::after,
.offer-pres__link.primary-btn button::after,
.lazer-link.primary-btn button::after {
  content: "";
  position: absolute;
  right: 0;
}

.offer__link.primary-btn a::after,
.offer__link.primary-btn button::after {
  top: 6px;
  background-image: url("./images/hairboss/cart-icon.png");
  width: 29px;
  height: 29px;
}
.offer-pres__link.primary-btn a::after,
.offer-pres__link.primary-btn button::after {
  top: 11px;
  background-image: url("./images/hairboss/arrow-right-icon.png");
  width: 21px;
  height: 21px;
}

.lazer-link.primary-btn a::after,
.lazer-link.primary-btn button::after {
  top: 5px;
  background-image: url("./images/hairboss/lazer-icon.png");
  width: 41px;
  height: 31px;
}
#garantie .lazer-link.primary-btn a::after,
#garantie .lazer-link.primary-btn button::after {
  background-image: url("./images/hairboss/lazer-icon-light.png");
}

.offer__top {
  min-height: 800px;
  height: 100%;
}
.offer_bgimg.vc_custom_1654586562218 {
  height: 100%;
  max-height: 840px;
  background-position: bottom right -100px !important;
  background-size: cover;
}

.offer__content {
  z-index: 10;
}
#offer .offer__imgbox {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  max-height: 700px;
}
#offer__xfest.offer__xfest {
  margin-bottom: 20px !important;
}
#offer__title.offer__title {
  line-height: 40px !important;
  margin-bottom: 20px !important;
}
#offer__text.offer__text {
  font-size: 16px !important;
  line-height: 26px !important;
}
#offer__link.offer__link a {
  font-size: 25px !important;
}

/* offer media */
@media (max-width: 1400px) {
  .offer_bgimg.vc_custom_1654586562218 {
    background-position: bottom right -200px !important;
    width: 700px;
  }
}

/* features */

.features__list {
  position: relative !important;
}
.features__box-imgleft {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  z-index: 10;

  width: 700px;
}
.features__box-imgleftline {
  position: absolute;
  bottom: -200px;
  left: -350px;
  height: 910px;
  width: 422px;
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 5;
}

/*offer-pres*/

/* about-hair */
#about-hair {
  background-image: url("./images/hairboss/abouthair-bgbottom.png");
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat;
}
.about-hair__table {
  text-transform: uppercase;
  font-weight: 600;
}
.abouthair__bottom {
  position: relative;
}
.abouthair-girl {
  position: absolute;
  right: 0;
  top: -290px;
  height: 648px;
  max-width: 750px;
  width: 750px;
}
.abouthair-girl img {
  max-width: 750px;
  width: 750px;
  height: 100%;
}

/* two-features and threewave-lazer */
.tf-tl {
  position: relative;
}
.tf-tl::after {
  content: "";
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;

  background-image: url("./images/hairboss/line-right-bg.png");
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 337px;
  height: 886px;
}
/* two-features */
#two-features {
  position: relative;
}
.tf-image {
  position: relative;
}
.tf-image::before {
  position: absolute;
  bottom: 0;
  left: 21px;
  width: 100%;
  height: 14px;
  content: "";
  background-image: url("./images/hairboss/tf-img-1-line.png");
  /* top: 40px;
  left: -160px;
  width: 770px;
  max-width: 800px;
  height: auto; */
}
.tf-phones {
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: end;
  left: -160px;
}

/* threewave-lazer */
.threewave-lazer {
  position: relative;
}
.threewave-lazer::before,
.threewave-lazer::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
}
.threewave-lazer::before {
  background-image: url("./images/hairboss/line-left-bg.png");

  background-image: url(./images/hairboss/line-left-bg.png);
  bottom: 0px;
  left: 0;
  width: 608px;
  height: 363px;
}

.threewave__item-title {
  border-bottom: 4px solid #f25900;
  width: 100%;
}
.threewave__box-leftimg,
.threewave__box-rightimg {
  position: relative;
}
.threewave__box-leftimg::after,
.threewave__box-rightimg::after {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
}
.threewave__box-leftimg::after {
  background-image: url("./images/hairboss/oline-left.png");
  background-position: 48% 41%;
  left: 68%;
  background-size: contain;
  width: 53%;
}
.threewave__box-rightimg::after {
  background-image: url("./images/hairboss/oline-right.png");
  background-position: 8% 33%;
  left: 52%;
}

.threewave__box-leftimg::before,
.threewave__box-rightimg::before {
  position: absolute;
  background-color: #f25900;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  z-index: 10;
}
.threewave__box-leftimg::before {
  background-color: #f25900;
  background-position: 90% 41%;
  left: 40%;
  top: 37%;
}
.threewave__box-rightimg::before {
  background-position: 8% 33%;
  left: 50%;
  top: 25%;
}

.threewave__box-leftimg > div::before,
.threewave__box-rightimg > div::before {
  position: absolute;
  background-color: #f25900;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  content: "";
  width: 20px;
  height: 20px;
  background-repeat: no-repeat;
  z-index: 10;
}
.threewave__box-leftimg > div::before {
  left: 66%;
  top: 46%;
}
.threewave__box-rightimg > div::before {
  left: 32%;
  top: 46%;
}

/* complectation */
.comp__item-img {
  width: 100%;
  height: 170px;
}

/* certificates */
.cert__item-img {
  width: 100%;
  height: 140px;
}
/* footer */
.footer__social {
  justify-content: space-between;
  width: 102px;
  margin-left: auto;
  margin-right: 0px;
}
#footer .footer__consult-text a {
  color: #fff !important;
}
#footer .footer__box-item {
  width: 30px !important;
  height: 30px !important;
}
#footer-menu .menu-item {
  border: none;
  margin-right: 15px;
  padding: 0px 30px 0px 15px;
}
#footer-menu .menu-item.active a {
  color: #777777 !important;
}
#footer-menu .menu-item:first-child {
  margin-right: 20px;
}
#footer-menu .menu-item::before {
  display: none;
}
#menu-footer-menu {
  border: none;
  display: flex;
  flex-wrap: wrap;
}
#menu-footer-menu .menu-item a {
  font-size: 14px;
  line-height: 32px;
}
#footer__bottom {
  position: relative;
}
#footer__bottom::after {
  content: "";
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 10px;
  left: -125px;
  background-color: #333333;
}

.popup-form-wrap {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 55px 20px 20px;
  z-index: 10000;
  text-align: center;
  max-width: 430px;
}

.overlay-form {
  display: none;
  width: 100vw;
  height: 100vh;
  position: fixed;
  background-color: #00000080;
  left: 0;
  top: 0;
  z-index: 9999;
  /* max-width: 700px; */
}
.form-title {
  color: #000;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
}
.form-input {
  width: 100%;
  margin-bottom: 20px;
}
.form-input input {
  width: 100%;
  font-size: 22px;
  line-height: 32px;
}
.close-form {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background: #f25900;
  border-radius: 0 0 0 4px;
  transition: all 0.2s;
  cursor: pointer;
}
.close-form:hover {
  background: #000;
  transition: 0.2s;
}
.form-submit-btn {
  width: 100%;
  color: #fff;
  font-size: 22px;
}
.form-submit-btn:hover {
  background-color: #d95306;
  color: #fff;
}
.wpcf7 form.sent .wpcf7-response-output {
  color: #46b450;
}
/*max-width: 425 offer*/

@media (max-width: 425px) {
  #header.sticky-header .header-main,
  .fixed-header #header.sticky-header .header-main {
    background-color: transparent !important;
  }

  .title {
    font-size: 30px !important;
    line-height: 40px !important;
  }
  .offer__top.vc_custom_1654664181966 {
    min-height: 910px;
    padding-top: 80px !important;
  }
  #offer__text.offer__text {
    font-size: 14px !important;
    line-height: 22px !important;
  }
  #offer__title.offer__title {
    font-size: 24px !important;
    line-height: 30px !important;
    margin-bottom: 15px !important;
  }
  .offer__xfest {
    margin-bottom: 30px;
  }
  .primary-btn {
    text-align: center !important;
  }
  .primary-btn a,
  .primary-btn button {
    font-size: 17px !important;
    text-align: left;
  }
  #offer .offer__imgbox {
    position: absolute;
    bottom: 20px;
    right: 0px;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 460px;
    background-position: center right -190px !important;
  }
  .offer__link.primary-btn a,
  .offer__link.primary-btn button {
    padding-right: 5px;
  }
  .offer__link.primary-btn a::after,
  .offer__link.primary-btn button::after {
    top: 2px;
    width: 17px;
    height: 17px;
    background-size: contain;
  }
  .offer__link.primary-btn a,
  .offer-pres__link.primary-btn a,
  .offer__link.primary-btn button,
  .offer-pres__link.primary-btn button {
    padding-right: 22px;
  }

  /* .offer__bottom */
  #offer__bottom-title-1,
  #offer__bottom-title-2 {
    text-align: center !important;
    margin-bottom: 10px !important;
  }
  #offer__bottom-title-1 {
    text-align: center !important;
  }
  #offer__bottom-text-1,
  #offer__bottom-text-2 {
    margin-bottom: 10px !important;
    text-align: center;
  }
  .offer__bottom-img-1,
  .offer__bottom-img-2 {
    max-width: 200px;
    margin: 0 auto;
  }
  #offer-pres .title {
    margin-bottom: 30px !important;
    padding-bottom: 0px !important;
  }
  #offer-pres .offer-pres__img {
    margin-bottom: 30px !important;
  }
  #offer-pres .offer-pres__img-right img {
    height: 100%;
    max-width: 200px;
    margin: 0 auto;
  }
  #offer-pres .offer-pres__img-right > div {
    display: flex;
    justify-content: center;
  }
  .offer-pres__link.primary-btn {
    text-align: left !important;
  }
  .offer-pres__link.primary-btn a,
  .offer-pres__link.primary-btn button {
    text-align: left !important;
    padding-right: 25px !important;
  }

  .offer-pres__link.primary-btn a::after,
  .offer-pres__link.primary-btn button::after {
    top: 3px;
    width: 17px;
    height: 17px;
    background-size: contain;
  }

  /* features */
  #features {
    padding-top: 50px !important;
  }
  #features__title {
    margin-bottom: 10px;
  }
  .features__box-imgleft {
    display: none;
  }

  #features .features__item {
    margin-bottom: 20px !important;
  }
  #features .features__list {
    padding-top: 10px !important;
    padding-bottom: 50px !important;
  }
  #features__box-title {
    padding: 0 20px !important;
    margin-bottom: 0 !important;
  }
  #features .features__box-list {
    padding-bottom: 0px !important;
  }

  /* two-features and threewave-lazer */
  #two-features {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .threewave__item-title {
    font-size: 28px !important;
    line-height: 35px !important;
    margin-top: 20px;
  }
  .tf-image {
    width: 260px;
  }
  .tf-image::before {
    left: 9px !important;
    width: 251px !important;
    height: 6px !important;
  }

  /* about-hair */
  #about-hair {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  #about-hair .about-hair__content > div {
    padding-top: 0 !important;
  }
  #about-hair .about-hair__content-del {
    z-index: 20;
  }
  #about-hair .abouthair-girl {
    height: 100% !important;
    top: -215px;
  }
  #about-hair .abouthair__box-girl {
    height: 0 !important;
  }
  #about-hair .title {
    margin-bottom: 20px !important;
  }
  #about-hair .about-hair__img-left {
    max-width: 200px;
    display: flex;
    margin: 0 auto 30px !important;
    width: 100%;
  }
  #about-hair h3 {
    margin-bottom: 10px !important;
  }
  #about-hair p {
    line-height: 28px !important;
    font-weight: 400 !important;
  }
  #about-hair .abouthair__bottom {
    padding-top: 50px !important;
    height: 100% !important;
  }
  #about-hair .abouthair__bottom p {
    font-size: 22px !important;
    line-height: 30px !important;
    margin-bottom: 10px !important;
    max-width: 260px !important;
  }
  .abouthair-girl img {
    max-width: 300px !important;
    width: 750px !important;
    height: 100% !important;
  }
  .lazer-link.primary-btn a,
  .lazer-link.primary-btn button {
    padding-right: 30px;
  }
  .lazer-link.primary-btn a::after,
  .lazer-link.primary-btn button::after {
    top: 0px;
    background-image: url(./images/hairboss/lazer-icon.png);
    width: 26px;
    height: 20px;
    background-size: contain;
  }
  .abouthair-girl {
    right: -10px;
    top: -125px;
    height: 100%;
  }
  .abouthair__bottom > div {
    z-index: 10;
  }
  .tf-phones {
    bottom: 345px !important;
    left: 100px !important;
  }

  .tf-phones img {
    max-width: 270px !important;
  }

  #two-features .tf-title-1 {
    margin-bottom: 20px !important;
    margin-top: 20px !important;
  }
  #two-features .two-features__first-box > div {
    display: flex;
    flex-direction: column-reverse;
    padding-bottom: 70px;
  }
  #threewave-lazer {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  .tf-tl::after {
    width: 100px;
    height: 510px;
  }
  .threewave-lazer::before {
    height: 120px;
  }
  #threewave-lazer .threewave-lazer__text {
    font-size: 22px !important;
    line-height: 30px !important;
  }
  #threewave-lazer .threewave-lazer__item-text {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: 400 !important;
  }
  #threewave-lazer .threewave__box-leftimg,
  #threewave-lazer .threewave__box-rightimg {
    width: 170px !important;
    margin-left: 0 !important;
    margin: 0 auto !important;
  }
  #threewave-lazer .threewave__box-rightimg > div > div {
    margin: 0 !important;
  }
  #threewave-lazer .threewave-lazer__box-item-2 {
    flex-direction: column-reverse;
    margin-top: 30px !important;
  }
  .threewave__box-leftimg::before,
  .threewave__box-leftimg::after,
  .threewave__box-leftimg > div::before,
  .threewave__box-rightimg::before,
  .threewave__box-rightimg::after,
  .threewave__box-rightimg > div::before {
    display: none;
  }

  #complectation {
   padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  #garantie {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
  #garantie .garantie__text {
    font-size: 22px !important;
    line-height: 30px !important;
    margin-bottom: 10px !important;
  }
  #garantie .lazer-link {
    text-align: left !important;
  }
  #certification {
    margin-top: 50px !important;
    margin-bottom: 50px !important;
  }
  #certification .certification__inner > div {
    padding-top: 0;
  }
  #certification .title {
    font-size: 28px !important;
    line-height: 36px !important;
    margin-bottom: 10px !important;
  }

  #footer {
    padding-top: 50px !important;
  }
  #footer .title {
    margin-bottom: 20px !important;
  }
  #footer .footer__contacts-item {
    margin-bottom: 20px !important;
  }
  #footer__bottom {
    margin-top: 20px !important;
  }
  #footer .footer__contacts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  #footer .footer__contacts-item {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  #footer .footer__contacts-title {
    font-size: 20px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }
  #footer .footer__contacts-address {
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
  }
  #footer .footer__contacts-phone {
    font-size: 16px !important;
  }
  #menu-footer-menu {
    flex-direction: column;
    align-items: center;
  }
  .footer__social {
    margin: 0 auto !important;
    width: 150px !important;
  }
  .footer__consult-text,
  .footer__consult-phone {
    text-align: center !important;
  }
  #footer .logo {
    display: flex !important;
    justify-content: center !important;
  }
  #footer-menu .menu-item,
  #footer-menu .menu-item:first-child {
    padding: 0;
    margin: 0;
  }
  #footer__bottom::after {
    width: 90%;
    height: 1px;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
  }
  #footer .footer__contacts-list .footer__contacts-item > div {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  #footer .footer__contacts-address {
    text-align: center !important;
  }
  .popup-form-wrap {
    padding: 50px 15px 15px;
    width: 95%;
  }
  .form-title {
    font-size: 24px;
    margin-bottom: 20px;
    line-height: 30px;
  }
  .form-input input {
    font-size: 20px;
    line-height: 30px;
  }
  .form-submit-btn {
    font-size: 20px;
  }
  .succes-submit__title {
    font-size: 30px !important;
    line-height: 36px !important;
    margin-bottom: 10px;
  }
  .succes-submit__link {
    font-size: 24px !important;
  }
}