@import url(https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap);
:root {
  --toogle_btn__bg: #ffffff;
  --toogle_btn__color: #333333;
  --toogle_btn__circle__bg: #ffffff;
  --toogle_btn__circle__border: #707070;
  --toogle_btn__selector__bg_gradiend1: #8fd8ff;
  --toogle_btn__selector__bg_gradiend2: #008cd9;
  --toogle_btn__circle__bg_selected: #16db00;
  --toogle_btn__circle__border_selected: #ffffff;
  --toogle_btn__emphasis_percentage_color: #ffffff;
  --toogle_btn__emphasis_bestseller_bg_gradiend1: #ffb95d;
  --toogle_btn__emphasis_bestseller_bg_gradiend2: #ff7c5d;
  --toogle_btn__emphasis_offer_bg_gradiend1: hsl(165, 100%, 50%);
  --toogle_btn__emphasis_offer_bg_gradiend2: #00d9a1;
  --payment_methods__color: #54565E;
  --section_bg: #f5f6fd;
  --header_bg: #fafafa;
  --content_bg: #ffffff;
  --border: #eeeeee;
  --title__color: #333333;
  --method__color: #000000;
  --cash_payment__color: #707070;
  --content__color: #54565E;
  --btn__color: #ffffff;
  --col1__accent: #48b2ec;
  --col1__btn__bg_gradiend1: #8fd8ff;
  --col1__btn__bg_gradiend2: #008cd9;
  --col2__accent: #ff9e5d;
  --col2__btn__bg_gradiend1: #ffb95d;
  --col2__btn__bg_gradiend2: #ff7c5d;
  --col3__accent: #1cd59a;
  --col3__btn__bg_gradiend1: #4ee9d4;
  --col3__btn__bg_gradiend2: #1cd59a;
}

body {
  /*background-color: #f5f6fd;*/
  overflow-x: hidden;
}

.table-title-new{
  padding: 1% 0 2% 0; 
  margin-top: 20px;
  margin-bottom: 10px;
  text-align: center; 
  color: #707070; 
  font-size: 30px; 
  font-weight: 500;
  font-family: Poppins, sans-serif;
}

.tables_section-new {
  font-family: Poppins, sans-serif;
  text-align: center;
  height: 1350px;
}

.toogle_btn_container-new {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 800px;
  height: 70px;
  margin: auto;
  border-radius: 999px;
  background-color: var(--toogle_btn__bg);
  position: relative;
  cursor: pointer;
  box-shadow: 3px 3px 10px #ddd;
  overflow: hidden;
}

.toogle_btn-new {
  width: 45%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  z-index: 0;
  border-right: solid #ddd 1px;
}

.toogle_btn-new:hover {
  box-shadow: 0 0 26px rgba(0, 0, 0, 0.16);
  transition-duration: 0.5s;
}

.toogle_btn_selected-new {
  background: linear-gradient(
    to bottom,
    var(--col1__btn__bg_gradiend1),
    var(--col1__btn__bg_gradiend2)
  );
}

.toogle_btn__right-new {
  border: none;
}

.toogle_circle-new {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--toogle_btn__circle__bg);
  border-style: solid;
  border-width: 2px;
  border-color: var(--toogle_btn__circle__border);
  margin-right: 8px;
}

.toogle_circle_selected-new {
  background-color: var(--toogle_btn__circle__bg_selected);
  border-color: var(--toogle_btn__circle__border_selected);
}

.toogle_text-new {
  font-size: 18px;
  font-weight: 600;
  color: var(--toogle_btn__color);
}

.toogle_text_selected-new {
  color: var(--toogle_btn__bg);
}

.toogle_btn__offer-new,
.toogle_btn__bestseller-new {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50px 50px 0 0;
  height: 16px;
  width: 130px;
  position: absolute;
  bottom: 0;
}

.toogle_btn_selected-new > .toogle_btn__bestseller-new,
.toogle_btn_selected-new > .toogle_btn__offer-new {
  background: var(--toogle_btn__circle__bg);
}

.toogle_btn__bestseller-new {
  background: linear-gradient(
    to bottom,
    var(--toogle_btn__emphasis_bestseller_bg_gradiend1),
    var(--toogle_btn__emphasis_bestseller_bg_gradiend2)
  );
}

.toogle_btn__offer-new {
  background: linear-gradient(
    to bottom,
    var(--toogle_btn__emphasis_offer_bg_gradiend1),
    var(--toogle_btn__emphasis_offer_bg_gradiend2)
  );
}

.toogle_btn__bestseller_text-new,
.toogle_btn__offer_text-new {
  color: var(--toogle_btn__emphasis_percentage_color);
  font-size: 11px;
  font-weight: bold;
}

.toogle_btn_selected-new
  > .toogle_btn__offer-new
  > .toogle_btn__offer_text-new {
  color: var(--toogle_btn__emphasis_offer_bg_gradiend2);
}

.toogle_btn_selected-new
  > .toogle_btn__bestseller-new
  > .toogle_btn__bestseller_text-new {
  color: var(--toogle_btn__emphasis_bestseller_bg_gradiend2);
}

.payment_methods_title-new {
  margin-bottom: 15px;
}

.payment_methods-new {
  color: var(--payment_methods__color);
  font-size: 14px;
  margin: 50px auto;
  display: grid;
  grid-template-columns: repeat(5, auto);
  max-width: 900px;
  gap: 10px;
}

.payment_method_item-new,
.payment_method_title-new {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.payment_method__icon-new {
  height: 50px;
  width: 50px;
  margin-right: 10px;
}

.n3cols__table-new {
  display: grid;
  grid-template-columns: 32% 36% 32%;
  width: 100%;
  max-width: 1199px;
  transition-duration: 0.5s;
  transition-property: transform, opacity;
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  opacity: 1;
  z-index: 2;
}

.hidden-new {
  /* opacity: 0; */
  display: none;
}

.n3cols__table__col-new {
  display: grid;
  grid-template-rows: min-content auto;
  border: 1px solid var(--border);
}

.n3cols__table__col1-new,
.n3cols__table__col3-new {
  margin-top: 60px;
  margin-bottom: 60px;
}

.n3cols__table__col2-new {
  box-shadow: 0 0 23px rgba(0, 0, 0, 0.16);
  z-index: 0;
}

.n3cols__header-new {
  background-color: var(--header_bg);
  padding-top: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.n3cols__title-new {
  color: var(--title__color);
  font-size: 18px;
  font-weight: 300;
}

.n3cols__type-new {
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  margin-top: 2vh;
}

.n3cols__body-new {
  background-color: var(--content_bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px 8px;
}

.n3cols__price_container-new {
  font-weight: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.n3cols__price_small-new {
  font-size: 35px;
}

.n3cols__price_large-new {
  font-size: 86px;
  margin: 0 10px;
  line-height: 1;
}

.n3cols__price_container1-new,
.n3cols__type1-new {
  color: var(--col1__accent);
}

.n3cols__price_container2-new,
.n3cols__type2-new {
  color: var(--col2__accent);
}

.n3cols__price_container3-new,
.n3cols__type3-new {
  color: var(--col3__accent);
}

.n3cols__cash_payment-new {
  color: var(--cash_payment__color);
  font-size: 16px;
  font-weight: 300;
}

.n3cols__content-new {
  color: var(--content__color);
  padding: 30px 0;
  width: 100%;
}

.n3cols__item-new:nth-child(1) {
  border-top: 1px solid var(--border);
}

.n3cols__item-new {
  /* max-height: 23px; */
  border-bottom: 1px solid var(--border);
  padding: 0.2em 0;
}

.n3cols__content1-new,
.n3cols__content3-new {
  font-size: 16px;
}

.n3cols__content2-new {
  font-size: 18px;
}

.n3cols__links-new {
  text-decoration: none;
  width: 95%;
}

.n3cols__button-new {
  color: var(--btn__color);
  line-height: 2.5;
  transition: transform 0.25s;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.n3cols__button-new:hover {
  transform: scale(1.06);
}

.n3cols__button_icon-new {
  margin-right: 10px;
}

.n3cols__button1-new {
  background: linear-gradient(
    to bottom,
    var(--col1__btn__bg_gradiend1),
    var(--col1__btn__bg_gradiend2)
  );
  font-size: 23px;
}

.n3cols__button2-new {
  background: linear-gradient(
    to bottom,
    var(--col2__btn__bg_gradiend1),
    var(--col2__btn__bg_gradiend2)
  );
  font-size: 26px;
}

.n3cols__button3-new {
  background: linear-gradient(
    to bottom,
    var(--col3__btn__bg_gradiend1),
    var(--col3__btn__bg_gradiend2)
  );
  font-size: 23px;
}

.tooltip-new {
  /* position: relative; */
  display: inline-block;
  float: right;
  margin-top: 3px;
}

.tooltip-new img {
  width: 15px;
  height: 15px;
}

/* .tooltip-new[title]:hover
{
  max-width: 300px !important; 
  background-color: #efefef !important;
  color: var(--title__color) !important;
  text-align: justify !important;
  padding: 10px !important;
  border: #ddd solid 1px !important;
  border-radius: 6px !important;
  box-shadow: 3px 5px 8px #ddd !important;

  font-family: Poppins, sans-serif !important;
  font-size: 0.8em !important;
} */

[data-title]:hover:after {
  opacity: 1;
  transition: all 0.1s ease 0.5s;
  visibility: visible;
}
/* box for title text */
[data-title]:after {
  content: attr(data-title);

  /* position for title view box */
  right: 80%;
  bottom: -2.5em;
  position: absolute;

  margin: 0 10px;
  z-index: 99999;
  visibility: hidden;

  /* stilization */
  background-color: #efefef;
  font-family: Poppins, sans-serif;
  font-size: 0.8em;
  color: #000000;
  width: 25vw;
  padding: 1px 5px 2px 5px;
  box-shadow: 1px 1px 3px #222222;
  opacity: 0;
  border: 1px solid #ddd;
}

[data-title] {
  position: relative;
}

.fadeIn-new {
  -webkit-animation: fadeIn-new 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
  animation: fadeIn-new 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53) both;
}

@-webkit-keyframes fadeIn-new {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@keyframes fadeIn-new {
  0% {
    -webkit-filter: blur(12px);
    filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
    filter: blur(0px);
    opacity: 1;
  }
}

@media (max-width: 1199px) {
  
  .tables_section-new {
    font-family: Poppins, sans-serif;
    text-align: center;
    height: 1250px;
  }

  .n3cols__table__col1-new,
  .n3cols__table__col3-new {
    margin-top: 45px;
    margin-bottom: 45px;
  }
  .n3cols__body-new {
    padding: 30px 8px;
  }
  .n3cols__table__col1-new,
  .n3cols__table__col3-new {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  .n3cols__content1-new,
  .n3cols__content3-new {
    font-size: 15px;
  }
  .n3cols__content2-new {
    font-size: 17px;
  }

  .toogle_btn_container-new {
    width: 700px;
    height: 60px;
  }

  .toogle_text-new {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  .payment_method__icon-new {
    height: 25px;
  }
  .payment_methods-new {
    font-size: 12px;
  }
  .payment_method__icon-new {
    width: 35px;
    height: 35px;
  }
  .n3cols__table__col1-new,
  .n3cols__table__col3-new {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .n3cols__header-new {
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .n3cols__type-new {
    font-size: 34px;
  }
  .n3cols__price_small-new {
    font-size: 32px;
  }
  .n3cols__price_large-new {
    font-size: 72px;
  }
  .n3cols__content-new {
    padding: 20px 0;
  }
  .n3cols__button1-new,
  .n3cols__button3-new {
    font-size: 18px;
  }
  .n3cols__button2-new {
    font-size: 20px;
  }

  .tooltip-new img {
    width: 15px;
    height: 15px;
  }

  .tooltip-new .tooltiptext-new {
    width: 250px;
    padding: 10px;
    font-size: 0.7em;
  }

  .toogle_btn_container-new {
    width: 600px;
    height: 60px;
  }

  .toogle_text-new {
    font-size: 15px;
  }
}

@media (max-width: 768px) {
  .tables_section-new{
    height: 1050px;
  }

  .toogle_btn_container-new {
    width: 95%;
    height: 50px;
  }
  .toogle_circle-new {
    width: 10px;
    height: 10px;
    margin-right: 5px;
  }
  .toogle_text-new {
    font-size: 13px;
  }

  .payment_methods-new {
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    gap: 10px;
    max-width: 350px;
  }
  .payment_method_title-new {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .n3cols__table__col1-new,
  .n3cols__table__col3-new {
    margin-top: 25px;
    margin-bottom: 25px;
  }
  .n3cols__type-new {
    font-size: 26px;
  }
  .n3cols__body-new {
    padding: 20px 5px;
  }
  .n3cols__price_small-new {
    font-size: 18px;
  }
  .n3cols__price_large-new {
    font-size: 45px;
    margin: 0 5px;
  }
  .n3cols__cash_payment-new {
    font-size: 13px;
  }
  .n3cols__content1-new,
  .n3cols__content3-new {
    font-size: 9px;
  }
  .n3cols__content2-new {
    font-size: 10px;
  }
  .n3cols__button_icon-new {
    height: 10px;
    margin-right: 3px;
  }
  .n3cols__button1-new,
  .n3cols__button3-new {
    font-size: 12px;
  }
  .n3cols__button2-new {
    font-size: 14px;
  }

  .toogle_btn__bestseller-new,
  .toogle_btn__offer-new {
    width: 115px;
    height: 13px;
  }
  .toogle_btn__bestseller_text-new,
  .toogle_btn__offer_text-new {
    font-size: 8px;
  }

  .tooltip-new img {
    width: 10px;
    height: 10px;
  }

  .tooltip-new .tooltiptext-new {
    width: 190px;
    padding: 10px;
    font-size: 0.65em;
  }
}

@media (max-width: 479px) {

  .tables_section-new{
    height: 320vh;
  }

  .toogle_btn_container-new {
    height: 40px;
    /* width: 400px; */
  }

  .toogle_text-new {
    font-size: 11px;
  }

  .toogle_btn__text_circle-new {
    margin-left: 6px;
  }

  .toogle_circle-new {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-width: 1px;
  }

  .n3cols__table-new {
    grid-template-columns: 100%;
  }
  .n3cols__table__col1-new,
  .n3cols__table__col3-new {
    margin-top: 0;
    margin-bottom: 0;
  }
  .n3cols__header-new {
    padding-top: 5px;
    padding-bottom: 10px;
  }
  .n3cols__type-new {
    font-size: 34px;
  }
  .n3cols__price_small-new {
    font-size: 32px;
  }
  .n3cols__price_large-new {
    font-size: 72px;
  }
  .n3cols__content-new {
    padding: 20px 0;
  }
  .n3cols__content1-new,
  .n3cols__content2-new,
  .n3cols__content3-new {
    font-size: 15px;
  }
  .n3cols__button_icon-new {
    height: 15px;
    margin-right: 10px;
  }
  .n3cols__button1-new,
  .n3cols__button2-new,
  .n3cols__button3-new {
    font-size: 18px;
  }

  .toogle_btn__bestseller-new,
  .toogle_btn__offer-new {
    width: 70px;
    height: 10px;
  }
  .toogle_btn__bestseller_text-new,
  .toogle_btn__offer_text-new {
    font-size: 6px;
    padding-top: 2px;
  }

  [data-title]:after {
    content: attr(data-title);
    width: 75vw;
  }

  .tooltip-new img {
    width: 15px;
    height: 15px;
  }

}

@media (max-width: 379px) {

  .tables_section-new{
    height: 2400px;
  }
}
@media (max-width: 345px) {

  .tables_section-new{
    height: 2600px;
  }
}