/* .inbx-midhding {
  font-family: "ProximaNova SemiBold";
} */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: black white;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
  color: #fff;
}
a {
  color: inherit;
}
.header {
  padding-block: 20px;
}
.header .header_text {
  font-size: 24px;
  color: #000;
}
.hero_section {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: max(550px, calc(100svh - 250px));
  color: #fff;
  position: relative;
}
.hero_section .overlay {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgb(0 0 0 / 25%);
}
.hero_grid {
  display: grid;
  grid-template-rows: 1fr auto;
  height: 100%;
  z-index: 2;
  position: relative;
}
.hero_grid .hero_top {
  display: flex;
  align-items: center;
}
.hero_grid .hero_top .container > * {
  color: #fff;
  max-width: 60%;
}
.hero_grid .hero_top .container h1 {
  font-size: 42px;
  font-family: "ProximaNova Light";
  text-transform: uppercase;
}
.hero_grid .hero_top .container h3 {
  font-size: 22px;
  text-align: justify;
  font-weight: 400;
  margin-top: 30px;
}
.hero_grid .hero_bottom {
  background-color: rgb(0 0 0 / 50%);
  padding: 22px 0 20px 0;
}
.hero_grid .hero_bottom .container {
  display: flex;
  justify-content: center;
}
.hero_grid .hero_bottom .hero_logo_block {
  display: flex;
  flex-direction: column;
  border-right: 1px solid #fff;
  padding-inline: 75px;
  align-items: center;
  gap: 15px;
}
.hero_grid .hero_bottom .hero_logo_block:first-child {
  padding-left: 0;
}
.hero_grid .hero_bottom .hero_logo_block:last-child {
  border-right: none;
  padding-right: 0;
}
.hero_grid .hero_bottom .hero_logo_block img {
  max-width: 50px;
}
.hero_grid .hero_bottom .hero_logo_block span {
  color: #fff;
  font-size: 18px;
  white-space: nowrap;
}

.product_card_con {
  background-repeat: no-repeat;
  background-size: auto 1000px;
  background-position: left center;
}
.product_card_con .container {
  margin: 60px auto;
  display: flex;
  flex-direction: column;
  gap: 50px;
  color: #000;
}
.product_card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "card_left card_right_upper"
    "card_left card_right";
  gap: 0 30px;
  padding: 30px 30px;
  border-radius: 20px;
  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  grid-template-rows: auto 1fr;
  background-color: #fff;
}
.product_card_left {
  grid-area: card_left;
}
.product_card_left a {
  display: flex;
  justify-content: center;
  height: fit-content;
}
.product_card_right_upper {
  grid-area: card_right_upper;
}
.product_card_right {
  grid-area: card_right;
}
.product_card_left img {
  max-width: 75%;
  aspect-ratio: 8 / 9;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
    rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
  /* box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 12px; */
}
.product_subheading {
  color: rgb(0 0 0 / 60%);
  font-size: 14px;
  margin: 5px 0 0 0;
}
.product_rating {
  margin: 15px 0 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rating_badge {
  background-color: rgb(0 0 0 / 80%);
  color: #fff;
  padding: 6px 12px 5px 12px;
  border-radius: 20px;
}
.product_rating .star_con {
  display: flex;
  align-items: center;
  gap: 10px;
}
.product_rating .star_con span {
  text-decoration: underline;
  text-underline-offset: 3px;
  color: rgb(0 0 0 / 50%);
}
.product_heading {
  padding-right: 120px;
}
.product_card .tab_con {
  display: flex;
  flex-direction: column;
  margin: 20px 0 20px 0;
}
.product_card .tab_upper {
  display: flex;
  gap: 10px;
}
.product_card .tab_button {
  padding: 7px 15px 7px 15px;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid rgb(0 0 0 / 30%);
  outline: none;
  border-radius: 30px;
  font-weight: 600;
  color: rgb(0 0 0 / 70%);
  transition: all 0.2s;
  font-size: 15px;
}
.product_card .tab_button.active {
  color: #fff;
  border: 1px solid transparent;
}
.product_card .tab_upper .tab_button:nth-child(1).active {
  background-color: rgba(0, 214, 120, 255);
}
.product_card .tab_upper .tab_button:nth-child(2).active {
  background-color: red;
}
.product_card .tab_content {
  display: none;
  padding: 15px 15px 15px 45px;
  margin-top: 10px;
  background-color: rgb(0 0 0 / 5%);
  border-radius: 16px;
  flex-direction: column;
  gap: 12px;
}
.product_card .tab_content.active {
  display: flex;
}
.pros_tab li,
.cons_tab li {
  position: relative;
}
.pros_tab li::before {
  content: "";
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM16.7682 9.64018C17.1218 9.21591 17.0645 8.58534 16.6402 8.23178C16.2159 7.87821 15.5853 7.93554 15.2318 8.35982L11.6338 12.6774C11.2871 13.0934 11.0922 13.3238 10.9366 13.4653L10.9306 13.4707L10.9242 13.4659C10.7564 13.339 10.5415 13.1272 10.1585 12.7443L8.70711 11.2929C8.31658 10.9024 7.68342 10.9024 7.29289 11.2929C6.90237 11.6834 6.90237 12.3166 7.29289 12.7071L8.74428 14.1585L8.78511 14.1993L8.78512 14.1993C9.11161 14.526 9.4257 14.8402 9.71794 15.0611C10.0453 15.3087 10.474 15.5415 11.0234 15.5165C11.5728 15.4916 11.9787 15.221 12.2823 14.9448C12.5534 14.6983 12.8377 14.3569 13.1333 14.0021L13.1333 14.0021L13.1703 13.9577L16.7682 9.64018Z" fill="%2300d678"></path></g></svg>');
  width: 20px;
  height: 20px;
  position: absolute;
  left: -28px;
  top: 0;
}
.cons_tab li::before {
  content: "";
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM8.29289 8.29289C8.68342 7.90237 9.31658 7.90237 9.70711 8.29289L12 10.5858L14.2929 8.29289C14.6834 7.90237 15.3166 7.90237 15.7071 8.29289C16.0976 8.68342 16.0976 9.31658 15.7071 9.70711L13.4142 12L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L12 13.4142L9.70711 15.7071C9.31658 16.0976 8.68342 16.0976 8.29289 15.7071C7.90237 15.3166 7.90237 14.6834 8.29289 14.2929L10.5858 12L8.29289 9.70711C7.90237 9.31658 7.90237 8.68342 8.29289 8.29289Z" fill="%23ff0000"></path></g></svg>');
  width: 20px;
  height: 20px;
  position: absolute;
  left: -28px;
  top: 0;
}
.product_accordion .accordion_title {
  font-size: 18px;
  border-bottom: 1px solid rgb(0 0 0 / 30%);
  margin-bottom: 12px;
  padding-bottom: 8px;
  cursor: pointer;
  text-transform: uppercase;
  position: relative;
}
.product_accordion .accordion_title::before {
  content: "";
  position: absolute;
  top: 0px;
  right: 5px;
  width: 26px;
  height: 26px;
  transform: rotate(0deg);
  transition: transform 0.35s;
  background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M5.70711 9.71069C5.31658 10.1012 5.31658 10.7344 5.70711 11.1249L10.5993 16.0123C11.3805 16.7927 12.6463 16.7924 13.4271 16.0117L18.3174 11.1213C18.708 10.7308 18.708 10.0976 18.3174 9.70708C17.9269 9.31655 17.2937 9.31655 16.9032 9.70708L12.7176 13.8927C12.3271 14.2833 11.6939 14.2832 11.3034 13.8927L7.12132 9.71069C6.7308 9.32016 6.09763 9.32016 5.70711 9.71069Z" fill="%230F0F0F"></path></g></svg>');
}
.product_accordion.opened .accordion_title::before {
  transform: rotate(180deg);
}
.product_accordion .accordion_desc {
  max-height: 0;
  overflow-y: scroll;
  transition: max-height 0.3s linear;
  scrollbar-width: thin;
  scrollbar-color: black white;
}
.product_accordion.opened .accordion_desc {
  max-height: 180px;
}
.product_accordion .accordion_desc p {
  margin-bottom: 15px;
}
.product_card .product_link {
  background-color: #fcee21;
  border-radius: 20px;
  padding: 8px 18px 7px 18px;
  border: none;
  font-size: 16px;
  margin: 15px auto 0 auto;
  display: block;
  width: fit-content;
}
.ranking_tag {
  position: absolute;
  top: 55px;
  left: 0;
  background-color: #fbb03b;
  color: rgb(0 0 0 / 70%);
  padding: 6px 15px 5px 5px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
.rating_tag {
  position: absolute;
  top: 0;
  right: 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fcee21;
  border-bottom-left-radius: 1000px;
  border-bottom-right-radius: 1000px;
  padding: 0 10px 20px 10px;
  width: 105px;
}
.rating_tag .digits {
  font-size: 30px;
  font-family: "ProximaNova light";
}
.author_section {
  background-color: rgb(0 0 0 / 5%);
  padding: 30px 0;
  color: #000;
}
.author_section .auther_upper_con {
  display: grid;
  grid-template-columns: 1fr 150px;
  margin-bottom: 25px;
}
.author_section .auther_upper_con .image_con img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  max-width: 130px;
  border: 1px solid rgb(0 0 0 / 10%);
}
.author_section .auther_upper_con .main_heading {
  font-size: 32px;
  text-transform: uppercase;
  font-family: "ProximaNova Bold";
  text-align: center;
  text-wrap-style: balance;
  margin-bottom: 10px;
  color: rgb(0 0 0 / 70%);
}
.author_section .auther_upper_con .text_badge {
  font-size: 30px;
  text-transform: uppercase;
  background-color: rgb(0 0 0 / 80%);
  color: #fff;
  width: fit-content;
  margin-inline: auto;
  padding: 5px 15px 4px 15px;
  border-radius: 30px;
}
.auther_bottom_con p:nth-child(1) {
  margin-bottom: 15px;
}
.auther_bottom_con p {
  text-align: justify;
  text-align-last: center;
  line-height: 1.3;
  font-size: 17px;
}
.review_section {
  display: grid;
  grid-template-columns: 4fr 7fr;
  margin: -60px auto -50px auto;
  max-width: 1400px;
  color: #000;
}
.review_section .review_con {
  padding: 85px 20px 60px 0;
  margin: 0 0 0 -90px;
  overflow: hidden;
  z-index: 2;
}
.review_section .review_con .icon_con {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  padding: 0 0 0 30px;
}
.review_section .review_con .icon_con img {
  max-width: 85px;
  border-radius: 50%;
  background-color: rgb(0 0 0 / 5%);
  padding: 8px;
  margin: 0 auto;
}
.review_section .review_con .icon_con .icon_title {
  margin: 10px 0 0 0;
  text-align: center;
}
.review_section .review_con .icon_con .icon_title span {
  background-color: lightblue;
  padding: 2px 5px;
}
.review_section .review_con .icon_con .icon_block {
  flex: 1;
  max-width: 150px;
}
.review_section .review_con > h4 {
  font-size: 26px;
  color: rgb(0 0 0 / 70%);
  margin-bottom: 20px;
  padding: 0 0 0 30px;
}
.review_section .review_slider {
  margin: 0 0 0 -10px;
}
.review_slider .swiper-slide {
  border: 1px solid rgb(0 0 0 / 50%);
  border-radius: 12px;
  padding: 30px 15px;
  min-height: 290px;
}
.review_slider .stars {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.review_slider .stars::before {
  background: linear-gradient(
    90deg,
    rgb(77 77 77) var(--percent),
    rgb(77 77 77 / 25%) var(--percent)
  );
  -webkit-background-clip: text;
}
.review_slider .review_title {
  text-align: center;
  font-weight: 600;
  margin-bottom: 5px;
}
.review_slider .review_desc {
  text-align: center;
  color: rgb(0 0 0 / 70%);
  font-size: 15px;
  margin-bottom: 10px;
}
.review_slider .review_name {
  text-align: center;
  font-weight: 600;
  margin-bottom: 10px;
}
.review_slider .review_verified {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: rgb(0 0 0 / 60%);
}
.review_slider .review_verified img {
  max-width: 18px;
}
.review_section .image_con {
  z-index: 3;
}
footer {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0% 100%;
  padding: 50px 0 30px 0;
  position: relative;
  z-index: 1;
  color: #000;
}
footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff, #ffffff00 100%);
}
footer .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgb(0 0 0 / 25%);
}
footer .container {
  z-index: 3;
  position: relative;
}
.footer_btn {
  margin-bottom: 300px;
  background-color: #fcee21;
  text-transform: uppercase;
  font-size: 22px;
  border: none;
  padding: 9px 25px 7px 25px;
  border-radius: 40px;
  margin-inline: auto;
  display: block;
  z-index: 3;
  position: relative;
  width: fit-content;
}
.footer_update_txt {
  text-align: center;
  color: #ffffffc2;
  margin: 20px 0 0 0;
}

/* modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9;
}
.modal .modal_con {
  position: relative;
  margin: auto;
  border-radius: 12px;
  background: white;
  width: 100%;
  max-width: 600px;
  height: fit-content;
  padding: 0 2px 20px 0;
  color: #000;
}
.modal .close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 32px;
  cursor: pointer;
  width: auto;
  line-height: 1;
}
.modal_con h4 {
  border-bottom: 1px solid rgb(0 0 0 / 10%);
  padding: 15px 20px 15px 20px;
  font-weight: 400;
  font-size: 18px;
  background-color: rgb(0 0 0 / 5%);
}
.modal_content {
  padding: 20px 20px 0 20px;
  max-height: 500px;
  overflow-x: hidden;
  overflow-y: auto;
}
.modal_content a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 500;
}
.modal_content ul {
  margin-bottom: 15px;
}
.modal_content ul li {
  margin-bottom: 10px;
  list-style: inside;
  color: rgb(0 0 0 / 70%);
}
.modal_content .primary_para {
  margin-bottom: 15px;
  font-size: 16px;
  color: rgb(0 0 0 / 70%);
}
.modal_content .heading_para {
  margin: 10px 0 5px 0;
  font-family: "ProximaNova Bold";
}
.modal_content .no_margin_bottom {
  margin-bottom: 0;
}

@media screen and (max-width: 1024px) {
  .hero_grid .hero_bottom .hero_logo_block {
    padding-inline: 40px;
  }
}
@media screen and (max-width: 900px) {
  .product_card_left img {
    max-width: 100%;
  }
  .product_card {
    grid-template-columns: 0.7fr 1fr;
  }
  .review_section {
    margin: -30px auto -50px auto;
  }
  .review_section .review_con {
    margin: 0 0 0 -60px;
  }
  .hero_grid .hero_top .container > * {
    max-width: 80%;
  }
}

@media screen and (max-width: 800px) {
  .hero_grid .hero_bottom .hero_logo_block {
    padding-inline: 20px;
  }
  .hero_grid .hero_bottom .hero_logo_block span {
    font-size: 16px;
  }
  .review_slider .swiper-slide {
    min-height: 275px;
    transition: transform 0.3s;
  }
}
@media screen and (max-width: 768px) {
  .product_card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "card_right_upper"
      "card_left"
      "card_right";
  }
  .product_card_left img {
    max-width: 50%;
  }
  .ranking_tag {
    top: 150px;
  }
  .author_section .auther_upper_con {
    grid-template-columns: 1fr;
  }
  .author_section .auther_upper_con .text_con {
    order: 2;
  }
  .author_section .auther_upper_con .image_con img {
    margin: 0 auto 20px auto;
  }
  .review_section {
    grid-template-columns: 1fr;
    margin: 30px auto -50px auto;
  }
  .review_section .image_con img {
    max-width: 300px;
    margin-inline: auto;
  }
  .review_section .review_con {
    margin: 0;
    padding: 25px 0px 60px 0px;
  }
  .review_section .review_con .icon_con {
    padding: 0 20px;
  }
  .review_section .review_slider {
    margin: 0;
  }
  .review_section .review_con > h4 {
    text-align: center;
    font-size: 20px;
    padding: 0;
  }
  .hero_grid .hero_top .container > * {
    max-width: none;
  }
  .hero_grid .hero_top .container h1 {
    text-align: center;
    font-size: 36px;
  }
  .hero_grid .hero_top .container h3 {
    text-align-last: center;
    font-size: 20px;
  }
  .modal .modal_con {
    width: calc(100% - 20px);
  }
  .review_section .swiper-slide-prev,
  .review_section .swiper-slide-next {
    transform: scale(0.9) translateZ(0) !important;
  }
  .product_rating {
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 600px) {
  .product_card_left img {
    max-width: none;
  }
  .hero_grid .hero_top .container h1 {
    font-size: 22px;
    text-wrap: balance;
  }
  .hero_grid .hero_top .container h3 {
    font-size: 15px;
    text-align: center;
  }
  .container {
    padding-inline: 10px;
  }
  .header .header_text {
    text-align: center;
    font-size: 20px;
  }
  .hero_grid .hero_bottom .hero_logo_block:first-child {
    padding-left: 20px;
    position: relative;
  }
  .hero_grid .hero_bottom .hero_logo_block:first-child::before,
  .hero_grid .hero_bottom .hero_logo_block:nth-child(2)::before {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 0;
    height: 1px;
    width: calc(100% - 10px);
    background-color: #fff;
  }
  .hero_grid .hero_bottom .hero_logo_block:nth-child(2)::before {
    right: 0;
    left: auto;
  }
  .hero_grid .hero_bottom .hero_logo_block:nth-child(2) {
    border-right: none;
    position: relative;
  }
  .hero_grid .hero_bottom .hero_logo_block:last-child {
    padding-right: 20px;
  }
  .hero_grid .hero_bottom .container {
    flex-wrap: wrap;
    row-gap: 20px;
  }
  .hero_grid .hero_bottom .hero_logo_block {
    width: 50%;
    gap: 5px;
  }
  .hero_grid .hero_bottom .hero_logo_block span {
    font-size: 13px;
  }
  .hero_grid .hero_bottom .hero_logo_block img {
    max-width: 30px;
  }
  .hero_grid .hero_bottom {
    padding: 12px 0 10px 0;
  }
  .rating_tag {
    right: 15px;
    font-size: 12px;
    width: 77px;
  }
  .rating_tag .digits {
    font-size: 20px;
  }
  .product_card {
    padding: 20px 15px;
  }
  .rating_badge {
    font-size: 12px;
  }
  .product_rating .star_con {
    gap: 5px;
  }
  .product_rating .star_con span {
    font-size: 14px;
  }
  .product_heading {
    padding-right: 90px;
    font-size: 20px;
  }
  .ranking_tag {
    top: 125px;
  }
  .author_section .auther_upper_con .main_heading {
    font-size: 24px;
  }
  .author_section .auther_upper_con .text_badge {
    font-size: 22px;
  }
  .author_section .auther_upper_con .image_con img {
    max-width: 100px;
  }
  .review_section .review_con .icon_con img {
    max-width: 60px;
  }
  .review_section .review_con .icon_con .icon_title {
    font-size: 14px;
  }
  .footer_btn {
    font-size: 18px;
    margin-bottom: 150px;
  }
  .review_slider .swiper-slide {
    min-height: 285px;
  }
  .footer-logo-txt {
    font-size: 18px;
  }
  .nav_footer {
    gap: 10px;
  }
  .nav_footer li {
    text-align: center;
    margin: 0;
    color: rgb(255 255 255 / 80%);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 14px;
  }
  footer {
    background-position: 50% 0%;
  }
  .hero_section {
    height: 400px;
    background-position: 30% 0%;
  }
  .product_card_con .container {
    margin: 30px auto 60px auto;
  }
}
@media screen and (max-width: 400px) {
  .author_section .auther_upper_con .main_heading {
    font-size: 22px;
  }
  .author_section .auther_upper_con .text_badge {
    font-size: 20px;
  }
  .nav_footer li {
    font-size: 13px;
  }
  .nav_footer {
    gap: 8px;
  }
}