* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

.top-bar {
  width: 100%;
  height: 40.5px;
  background: #003466;
  color: #ffffff;
  padding: 11px 32px;
}
.menu-icon {
  display: none;
  font-size: 24px;
  border: none;
  cursor: pointer;
}
.side-menu {
  background-color: #faf9f6;
  display: none;
}
.mobile-view {
  display: block;
}

.side-menu ul {
  background-color: #faf9f6;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 246px;
  width: 100%;
  text-align: left;
  position: absolute;
}
.side-menu ul li {
  border-bottom: 1px solid rgb(83, 83, 83);
}
.nav-active {
  display: block;
}
.side1 li {
  border-bottom: 1px solid black;
  line-height: 3;
}
.tb-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.tb-icon p {
  align-items: center;
  margin-right: 9px;
  font-size: 13px;
}
.tb-txt {
  justify-content: space-between;
  font-size: 13px;
  font-weight: bold;
  align-items: center;
  margin-top: 3px;
}
.nav-bar {
  width: 100%;
  height: 129px;
  padding: 19.2px 48px 0px;
  color: #1c1c1c;
  background-color: #faf9f6;
}

.nav1 {
  width: 100%;
  align-items: center;
  justify-content: end;
  display: flex;
}
.nb-logo {
  width: 55%;
  display: flex;
  justify-content: end;
}
.logo {
  width: 7rem;
}
.nb-icons {
  width: 45%;
  display: flex;
  justify-content: end;
}
.nav2 ul {
  display: flex;
  list-style-type: none;
  justify-content: center;
}
.nav2 li {
  margin: 16px;
  font-weight: bold;
}

.nav2-opt {
  display: flex;
}
.nb-icons {
  display: flex;
  margin-left: 2px;
}
.icons {
  margin-left: 2rem;
  font-size: 1.2rem;
}
.nav2-shop,
.nav2-more {
  display: flex;
}
.nav2-icon {
  justify-content: space-between;
}

.main-body {
  width: 100%;
  background-color: #faf9f6;
  color: #1c1c1c;
}
.body {
  width: 100%;
  padding: 48px 30px 64px;
  background-color: #faf9f6;
  color: #1c1c1c;
  display: flex;
}
.body2 {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  width: 100%;
  padding: 48px 30px 64px;
  background-color: #faf9f6;
  color: #1c1c1c;
}
.body3 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 64px 0px;
  background-color: #faf9f6;
  color: #1c1c1c;
  gap: 2.5rem;
}
.body4 {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 64px 0px;
  background-color: #faf9f6;
  color: #1c1c1c;
  gap: 1rem;
}
.line {
  border: 0.1px solid #d4d1d1;
  width: 100%;
  margin: 0;
}
.line2 {
  border: 0.1px solid #d4d1d1;
  width: 95%;
  margin: 0;
}
.line3 {
  border: 0.1px solid #d4d1d1;
  width: 100%;
  margin: 0;
}

.b1 {
  width: 65%;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}
.b1-img {
  display: flex;
  justify-content: space-around;
  padding: 0 5%;
}

.b2 {
  width: 35%;
  display: flex;
  justify-content: center;
}
.b1-img1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 56px;
  height: 200px;
}

.img1 img {
  width: 52.67px;
  display: block;
}

.b1-img2 {
  display: flex;
  justify-content: center;
}
.b1-img2 img {
  width: 70%;
}

.b2-product-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 5px;
}
.title {
  font-size: 34px;
}
.b2-info-block {
  margin-top: 10px;
}
.info-a {
  font-size: 17px;
  line-height: 3.7;
}
h5 br {
  margin-top: 5px;
}
.info-offer {
  margin-top: 10px;
}
.info-b {
  font-size: 17px;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}
.info-c {
  font-size: 18px;
  line-height: 1.5;
}
.b2-ratings {
  display: flex;
}
.stars i {
  color: rgb(244, 219, 0);
}
.review {
  margin-left: 1rem;
}
.price p {
  line-height: 3;
  font-size: 1.5rem;
  font-weight: bold;
  color: #ff871b;
}
.type-hed {
  font-size: 18px;
  line-height: 3;
}
.type1-img img,
.type2-img img {
  width: 60px;
}

.type1-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  border: 3px solid #ff871b;
  border-radius: 6px;
  padding: 8.4px 14px;
  gap: 30px;
}
.type2-content {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  border: 3px solid #acacac;
  color: #000000a6;
  border-radius: 6px;
  padding: 8.4px 14px;
  gap: 30px;
}
.type1-txt1,
.type2-txt2 {
  font-size: 18px;
}
.txt21 p {
  font-size: 12px;
  color: #4d4d4d;
}

.type-container {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.detail-txt {
  font-size: 18px;
  font-weight: 600;
  line-height: 3.5;
}
.detail-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.7rem;
}
.detail-box1 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  border: 3px solid #ff871b;
  border-radius: 6px;
  padding: 12.4px 14px;
  opacity: 1;
}
.detail-box1 p {
  font-size: 18px;
  font-weight: bold;
}
.detail-box2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  color: #595858a6;
  border: 3px solid #acacac;
  border-radius: 6px;
  padding: 12.4px 14px;
  opacity: 1;
  font-weight: bold;
  font-size: 20px;
}
.add-cart {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cart-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14.4px 28px;
  color: white;
  background-color: #ff871b;
  border: none;
  width: 425.6px;
  font-size: 19px;
  font-weight: bold;
}
/*  */
.b1-faqs {
  display: flex;
  flex-direction: column;
  margin-right: 3.2rem;
  margin-left: 2rem;
}
/* .view-faq {
  display: flex;
  position: absolute;
  right: 407px;
  bottom: -66px;
  border: none;
} */
.a1-img img {
  width: 400px;
  margin-bottom: 20px;
  margin-top: 20px;
}
.a1-txt p {
  line-height: 2;
}
.a2 {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  gap: 25px;
  padding: 15px;
}
.a2-1 {
  display: flex;
  gap: 33px;
}
.a2-1-txt p {
  line-height: 2;
}
.a3-1 p {
  margin-top: 10px;
  line-height: 2;
}
.a4-txt {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.a4-1 {
  margin-top: 10px;
  line-height: 1.5;
}

.a5 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.a5-txt i {
  font-size: 8px;
  margin-right: 11px;
  padding-bottom: 8px;
}

.answer {
  display: none;
}

.faq1 {
  padding: 32px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.faq1-1 {
  display: flex;
  justify-content: space-between;
  width: 550px;
}
.faq1-1:hover {
  cursor: pointer;
}
/* .faq1-box {
  display: flex;
  justify-content: space-between;
  width: 550px;
} */
.faq-img img {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.faq-img {
  display: flex;
  justify-content: left;
  gap: 18px;
}
.faq-q {
  font-size: 16px;
  font-weight: bold;
}
.faqs {
  width: 632.4px;
}

.payment-opts ul {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.body2-frames1 {
  display: flex;
  justify-content: space-evenly;
}
.body2-frames2 {
  display: flex;
  justify-content: space-evenly;
}
.frame-img img {
  width: 90%;
}
.body2-hed h2 {
  font-size: 32px;
}

.frame-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.frame-n p {
  font-size: 18px;
  font-weight: bold;
  line-height: 4;
}
.frame-t p {
  font-size: 18px;
  line-height: 2;
}

.body3-hed h2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}

.body3-reviews {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.body3-frame {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}

.stars2 {
  color: rgb(244, 219, 0);
}
.rev-txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.rev-hed p {
  display: flex;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
  line-height: 2rem;
}
.rev-rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  line-height: 1rem;
}
.rev-price p {
  display: flex;
  justify-content: center;
  color: #ff871b;
  font-size: 16px;
  font-weight: bold;
  line-height: 1rem;
}
.rev-img img {
  width: 240px;
}
.rev2-img img {
  width: 250px;
}
.rev3-img img {
  width: 250px;
}
.b4-row {
  background-color: white;
  width: 256px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.body4-rating {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 40rem;
  padding-bottom: 2rem;
}
.rt1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
.stars3 {
  color: rgb(244, 219, 0);
}
.stars3 ul {
  display: flex;
  list-style-type: none;
}
.stars3 li {
  font-size: 24px;
}
.rt2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.8rem;
}
.rt2-btn1 button {
  padding: 6px 12px;
  font-size: 16px;
}
.rt2-btn2 button {
  padding: 5px 8px;
  font-size: 19px;
}
.row-img img {
  width: 256px;
  height: 341px;
}
.row-txt {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 10px;
  gap: 0.5rem;
}
.stars4 {
  color: rgb(244, 219, 0);
}
.stars4 ul {
  display: flex;
  list-style-type: none;
}
.stars4 li {
  font-size: 14px;
}
.row-t-hed p {
  font-size: 16px;
  font-weight: bold;
}
.row-exp p {
  font-size: 14px;
}
.row-t-d p {
  font-size: 11px;
  color: #767676;
}
.b4-box-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.b4-box {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.view-btn {
  display: flex;
  justify-content: center;
}
.view-btn button {
  display: flex;
  justify-content: center;
  background-color: #ff871b;
  color: white;
  outline: 2px solid transparent;
  border: none;
  outline-offset: 0px;
  padding: 14.4px 1.75rem !important;
  font-size: 17px !important;
  font-weight: bold;
}
.body5-hed {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 35px;
  font-weight: bold;
  line-height: 4;
}
.body5 {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0px;
  background-color: #faf9f6;
  color: #1c1c1c;
}
.body5-faqs {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 600px;
  width: 100%;
  margin: auto;
}

.fq {
  display: flex;
  justify-content: space-evenly;

  padding: 24px 0px;
}
.fq-box {
  display: flex;
}

.fq-txt p {
  font-size: 18px;
  font-weight: bold;
}
.b5-line {
  display: flex;
  flex-direction: row;
  border: 0.5px solid #d4d1d1;
}
.body6 {
  max-width: 900px;
  margin: auto;
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: space-around;
  padding: 64px 0px;
  background-color: #faf9f6;
  color: #1c1c1c;
  gap: 2rem;
}
.b6-container {
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
}
.b6-cnt p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 18px;
  line-height: 2;
}
.b6-container h6 {
  font-size: 17px;
  display: flex;
  justify-content: center;
  line-height: 4;
}
.b6-container h1 {
  font-size: 36.9px;
  display: flex;
  justify-content: center;
  line-height: 2.5;
}

.body7 {
  display: flex;
  width: 100%;
  padding: 64px 30px 48px;
  gap: 2rem;
  flex-direction: column;
}
.b7-cnt-txt {
  display: flex;
  justify-content: center;
  line-height: 2;
}
.b7-cnt1 {
  width: 253.72px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.b7-cnt2 {
  width: 253.72px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.b7-cnt3 {
  width: 201.8px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.b7-cnt31,
.b7-cnt41,
.b7-cnt51 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.b7-cnt4 {
  width: 90.16px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.b7-cnt5 {
  width: 127.93px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.h6 {
  font-size: 14px;
  font-weight: bold;
  color: black;
}
.b7-h {
  display: flex;
  flex-direction: row;
  line-height: 2;
}
.b7-list {
  list-style-type: none;
  line-height: 2;
}
.link-b7 {
  text-decoration: none;
  color: #1c1c1ca6;
}
.b7-list li {
  list-style-type: none;
  font-style: none;
}
.b7-container {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  color: #1c1c1ca6;
  flex-wrap: wrap;
}
.b7-cnt-logo img {
  width: 150px;
  margin: 0px 40.8646px 29px 38.8542px;
}
.b71 {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  max-width: 288px;
  gap: 1.25rem;
}

.b71-txt p {
  font-size: 17px;
  color: #1c1c1ca6;
  line-height: 1.7;
}
.text-box input {
  border-width: 1px;
  width: 100%;
  padding: 10.4px 12.8px;
  font-size: 17px;
  background-color: #faf9f6;
}
.b71-btn button {
  width: 177.09px;
  padding: 14.4px 12.8px;
  font-size: 18px;
  color: white;
  background-color: black;
  font-weight: bold;
}
.b72 ul {
  color: #1c1c1ca6;

  list-style-type: none;
  display: flex;
  gap: 2rem;
}
.b72 a {
  font-size: 11px;
}
.b73-payment-methods {
  display: flex;
  justify-content: center;
}
.b73-payment-methods ul {
  display: flex;
  list-style-type: none;
  gap: 0.9rem;
  flex-wrap: wrap;
}
.b73-payment-methods li {
  display: flex;
  justify-content: space-between;
}
.b74-location {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}
.b74-btn1 {
  padding: 10px 20px;
  font-size: 17px;
  background-color: #faf9f6;
}
.b74-btn2 {
  padding: 10px 20px;
  font-size: 17px;
  background-color: #faf9f6;
}

@media (max-width: 1100px) {
  .b1 {
    width: 59%;
  }
  .b1-img2 {
    width: 83%;
  }
  .b2-product-info {
    justify-content: center;
    gap: 1.2rem;
  }
  .faqs {
    width: auto;
  }
  .b2 {
    width: 41%;
  }
  .b4-row {
    width: 245px;
  }
  .row-img img {
    width: 245px;
  }
  .body4-rating {
    padding-right: 1rem;
    padding-left: 1rem;
    gap: 35rem;
  }
}

@media (max-width: 1024px) {
  .b1 {
    width: 56%;
  }
  .b2 {
    width: 44%;
  }
  .b1-img2 {
    width: 73%;
  }
  .title {
    font-size: 30px;
  }
  .info-a {
    font-size: 16px;
  }
  .info-b {
    font-size: 15px;
  }
  .info-c {
    font-size: 16px;
  }
  .type-container {
    width: 98%;
  }
  .type1-content {
    width: 97%;
  }
  .type2-content {
    width: 97%;
  }
  .detail-box1 {
    width: 97%;
  }
  .detail-box2 {
    width: 97%;
  }
  .cart-button {
    width: 97%;
  }
  .price p {
    font-size: 1.3rem;
  }
  .b2-product-info {
    justify-content: center;
    gap: 1.2rem;
  }
  .faqs {
    width: auto;
  }

  .b4-row {
    width: 230px;
  }
  .row-img img {
    width: 230px;
  }
  .body4-rating {
    padding-right: 1rem;
    padding-left: 1rem;
    gap: 30rem;
  }
}
@media (max-width: 995px) {
  .body4-rating {
    gap: 24rem;
  }
  .rev-img img {
    width: 200px;
  }
  .rev3-img img {
    width: 200px;
  }
  .b4-row {
    width: 200px;
  }
  .row-img img {
    width: 200px;
  }
  .frame-img img {
    width: 90%;
  }
}

@media (max-width: 855px) {
  .b4-row {
    width: 180px;
  }
  .row-img img {
    width: 180px;
  }
  .body4-rating {
    gap: 20rem;
  }
  .rev-img img {
    width: 190px;
  }
  .rev3-img img {
    width: 190px;
  }
  .b6-cnt p {
    font-size: 17px;
  }
}
@media (max-width: 776px) {
  .menu-icon {
    display: block;
  }
  .nav2 ul {
    display: none;
  }
  .menu-icon {
    display: block;
  }
  .side-menu {
    background-color: #faf9f6;
  }

  .body4-rating {
    gap: 0rem;
  }
  .b4-row {
    width: 165px;
  }
  .row-img img {
    width: 165px;
  }
  .rev-hed p {
    font-size: 15px;
  }
  .body5-hed {
    font-size: 23px;
  }
  .fq-txt-p {
    font-size: 19px;
  }
}
@media (max-width: 462px) {
  .body5-hed {
    font-size: 14px;
  }
  .fq-txt-p {
    font-size: 13px;
  }
  .body4-rating {
    gap: 0rem;
  }
  .b6-cnt p {
    font-size: 14px;
  }
}