/*
Theme Name: Porto Child
Theme URI: https://www.portotheme.com/wordpress/porto
Author: P-THEMES
Author URI: https://www.portotheme.com/
Description: Porto Responsive WordPress + eCommerce Theme.
Version: 1.1
Template: porto
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
*/

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

/** carousel **/
.custom-carousel {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 400px;
  -webkit-perspective: 500px;
  perspective: 500px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}
.custom-carousel .custom-carousel-item {
  display: none;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}
.custom-carousel .custom-carousel-item > img {
  width: 100%;
}

/** swiper**/
.swiper-slide {
  align-self: center;
  display: flex;
  justify-content: center;
}
.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -133px;
}
.swiper-container {
  overflow: hidden;
}
body {
  margin: 0;
}
#certify {
  position: relative;
  width: 100%;
  margin: 0 auto;
  height: 100vh;
  background-image: url("./assets/img/black-slider-bg.png");
  background-size: cover;
}

#certify .swiper-slide {
  width: 30vw;
  height: 31vw;
  max-width: 600px;
  max-height: 600px;
  transition: all 2s;
  -webkit-transition: all 2s;
  -moz-transition: all 2s;
  -ms-transition: all 2s;
  -o-transition: all 2s;
}
#certify .swiper-slide img {
  margin: 0 auto;
}
#certify .swiper-wrapper {
  margin-top: -1vw;
}

#certify .swiper-slide .featured-jump {
  transition: all 1.5s;
  opacity: 0;
  position: absolute;
  left: 32%;
  bottom: -4vw;
  width: 154px;
  height: 48px;
  font-size: 14px;
}

.btn-light {
    background-color: #292929 !important;
    border-color: #4c4c4c #4c4c4c #4c4c4c !important;
    color: #f8cc8b !important;
}

.featured-jump-text {
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#certify .swiper-slide .featured-bettow {
  display: none;
  position: absolute;
  left: 0;
  bottom: -10%;
  width: 100%;
  text-align: center;
  color: #999;
  font-family: "Montserrat Light";
  font-size: 2vw;
}

#certify .swiper-button-prev {
  width: 45px;
  height: 45px;
  left: 29px;
  background-size: 80px 80px;
  top: 47%;
  background-image: none;
}

#certify .swiper-button-next {
  width: 45px;
  height: 45px;
  right: 29px;
  background-image: none;
  background-size: 80px 80px;
  top: 47%;
}
#certify .swiper-button-prev:active {
  transition: all 0.3s ease;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

#certify .swiper-button-next:active {
  transition: all 0.3s ease;
  transform: scale(0.8);
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.swiper-button-next,
.swiper-button-prev {
  color: rgba(195, 160, 125, 1) !important;
}
.swiper-container.swiper-container-horizontal {
  margin: 0 40px;
  height: 100vh;
}
.shop-btn {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

/* .banner-neo .elementor-container {
  background-image: url("https://neohookah.com/wp-content/themes/porto-child/assets/img/slide-website-finale-1349-643.png");
  background-size: contain;
} */

@media (max-width: 1000px) {
  #certify .swiper-slide {
    width: 64vw;
    height: 65vw;
    min-width: 0;
    min-height: 0;
  }
  #certify {
    height: 60vh;
    background-image: url("https://neohookah.com/wp-content/uploads/2022/10/black-slider-bg-mobile.png");
  }
  .banner-neo .elementor-container .porto-ibanner-img {
    display: none !important;
  }
  .banner-neo .elementor-container {
    background-image: url("https://neohookah.com/wp-content/uploads/2023/02/neo-hookah-mobile-3.jpg");
    background-size: contain;
  }

  .swiper-container.swiper-container-horizontal {
    margin: 0 40px;
    height: 60vh;
  }

  #certify .swiper-slide img {
    margin: 0 auto;
  }
  #certify .swiper-container {
    overflow: visible;
  }
  #certify .swiper-button-prev {
    display: none;
  }
  #certify .swiper-button-next {
    display: none;
  }
  #certify .swiper-slide .featured-bettow {
    display: none !important;
  }
  #certify .swiper-slide .featured-jump {
    left: 32%;
    height: 13%;
    bottom: -11vw;
    width: 113px;
    font-size: 13px !important;
  }
  .btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 104px;
  }
}

/* 媒体查询 */
@media (min-width: 1920px) {
  .btn-banner-wrapper .elementor-widget-wrap {
    margin-bottom: 6vw !important;
  }
  #certify .swiper-slide {
    width: 440px;
    height: 440px;
  }
  #certify .swiper-slide .featured-jump {
  }
  #certify .swiper-slide .featured-bettow {
    font-size: 40px;
  }
  #certify {
    padding: 0;
  }
  #certify .swiper-slide .featured-jump {
    bottom: -5vw;
    left: 37%;
  }
  .btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -132px;
  }
  .swiper-button-next,
  .swiper-button-prev {
    top: 50% !important;
  }
  .swiper-container.swiper-container-horizontal {
    height: 100vh;
    margin-top: -100px;
  }
  #certify .swiper-slide img {
    margin: 0 auto;
    height: 500px;
    width: 500px;
  }
}
.btn-banner-wrapper .elementor-widget-wrap {
  margin-bottom: 3vw;
}
/* (1920x1080) Full HD Display */
@media screen and (max-width: 1920px) {
}

/** **/

.header-top.hidden-for-sm {
  z-index: 9999 !important;
}

.popup-server {
  background-color: rgba(37, 43, 52, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0 20px;
  z-index: 10000;
  text-align: center;
  visibility: visible;
  opacity: 0;
}

.popup-modal {
  background-color: white;
  border-radius: 15px;
  width: 718px;
  height: 467px;
  margin: 50px auto;
  margin-top: 50px;
  margin-top: 50px;
  margin-top: 50px;
  padding: 0px;
  margin-top: 8%;
}

.popup-container {
  position: relative;
}

.age-wrapper h3 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 32px;
  color: #19294c;
  margin-bottom: 58px;
}
.radio-item {
  position: relative;
}
.radio-item input[type="radio"] {
  display: none;
}

.radio-item label:before {
  content: " ";
  display: inline-block;
  position: relative;
  top: 3px;
  margin: 0 5px 0 0;
  width: 16px;
  height: 16px;
  border-radius: 11px;
  border: 2px solid rgba(195, 160, 125, 1);
  background-color: transparent;
}

.radio-item input[type="radio"]:checked + label:after {
  border-radius: 11px;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 9px;
  left: 5px;
  content: " ";
  display: block;
  background: rgba(195, 160, 125, 1);
}
.radio-item input[type="radio"]:checked + label {
  color: rgba(195, 160, 125, 1);
}
.radio-item label {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0.1em;
  color: rgba(22, 22, 22, 0.8);
}
.radio-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 68px;
}

.connect-wrapper h1 {
  font-family: "Poppins" !important;
  font-style: normal !important;
  font-weight: 600 !important;
  font-size: 25px !important;
  line-height: 32px !important;
  text-transform: capitalize !important;
  color: #19294c;
  margin-bottom: 11px;
}
.connect-wrapper {
  margin-top: 58px;
}

.radio-item .btn-borders.btn-primary:hover,
.radio-item .btn-borders.btn-primary:focus {
  background: white !important;
  border-color: var(--porto-primary-color, #ccc) !important;
  color: var(--porto-primary-color, #ccc) !important;
}

.radio-item a {
  width: 170px;
  height: 49px !important;
  font-size: 17px !important;
  padding: 11px 1px !important;
}

.connect-wrapper h3 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 32px;
  color: #19294c;
  margin-top: -8px;
}
.box-line {
  border-left: 1px solid rgba(194, 202, 213, 1);
  height: 69px;
  margin-top: -6px;
}

.connects-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 10px;
}
.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-size: 13px;
  line-height: 32px;
  cursor: pointer;
  text-decoration: none !important;
}
.logo-item:hover {
  text-decoration: none !important;
}
.popup-logo img {
  margin-top: -33px;
}
.popup-container::before {
  content: "";
  position: absolute;
  width: 714px;
  height: 8px;
  left: 2px;
  top: 0px;
  background: #1d2127;
  border-radius: 15px 15px 0px 0px;
}

.disabled h1,
.disabled h3,
.disabled svg path:first-child,
.disabled .website-div,
.disabled .website-div:hover,
.disabled .fb-div,
.disabled .fb-div:hover,
.disabled .insta-div,
.disabled .insta-div:hover {
  color: rgba(194, 202, 213, 1) !important;
  fill: rgba(194, 202, 213, 1) !important;
  pointer-events: none;
}

.website-div,
.website-div:hover {
  color: rgba(195, 160, 125, 1);
}

.fb-div,
.fb-div:hover {
  color: rgba(15, 74, 188, 1);
}

.insta-div,
.insta-div:hover {
  color: rgba(205, 37, 138, 1);
}

.website-logo,
.fb-logo,
.insta-logo {
  background: none;
  border-radius: 8px;
  padding: 11px;
  width: 62px;
  height: 56px;
  margin-bottom: -14px;
}

.logo-item:hover .website-logo {
  background: #f5ede4;
}

.logo-item:hover .fb-logo {
  background: rgba(237, 243, 255, 1);
}

.logo-item:hover .insta-logo {
  background: rgba(255, 244, 251, 1);
}

.age-wrapper {
  margin-top: -8px;
}

@media only screen and (max-width: 900px) {
  .radio-wrapper {
    flex-direction: column;
    gap: 34px;
  }

  .popup-container::before {
    width: 98.5%;
  }

  .popup-modal {
    width: 100%;
    height: 546px;
    margin-top: 39%;
  }

  .popup-container {
    padding: 0px 32px;
  }
  .connect-wrapper h1 {
    font-size: 20px !important;
  }
  .radio-item label::before {
    width: 33px;
    height: 33px;
    border-radius: 50%;
  }

  .radio-item input[type="radio"]:checked + label::after {
    border-radius: 11px;
    width: 13px;
    height: 13px;
    position: absolute;
    top: 20px;
    left: 9.5px;
  }

  .popup-logo img {
    margin-top: -12px;
    width: 160px;
    margin-bottom: -16px;
  }

  .connect-wrapper h3 {
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    font-size: 3.8vw;
  }
  .age-wrapper h3 {
    font-size: 4vw;
    margin-bottom: 39px;
    margin-top: 14px;
  }
  .radio-item label::before {
    content: " ";
    display: inline-block;
    position: relative;
    top: 10px;
  }
  /** banner**/
  .banner-image {
    right: 0% !important;
    top: 43% !important;
    padding: 0 !important;
    width: 100%;
  }

  .banner-txt {
    margin-top: 207px;
  }

  .ban-img {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .banner-txt .porto-ibanner-layer:first-child {
    width: 93%;
  }

  .banner-txt h2,
  #b-t2 h3 {
    font-size: 2em !important;
  }
  .banner-txt h2 {
    font-family: "Segoe Script", "Savoye LET";
  }

  #b-t3 h3 {
    font-size: 5em !important;
  }

  .pay-container {
    width: 100%;
    height: 40% !important;
    margin-bottom: -23px;
  }
}

/** custom css **/