.middle {
  padding: 7.5rem 0rem 0rem 0rem;
  display: block;
  height: auto;
  /* background-color: aqua; */
  background-color: #3feee6;
  width: 100%;
  border-top: 0.5px solid black;
  /* border-bottom: 2px solid black; */
}

.inner-middle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  /* width: 90%; */
  height: 100%;
  /* background-color: rgb(14, 13, 13); */
  /* margin: 3% auto 0; */
  /* background-color: salmon;  */
  padding: 50px 5px;
}

.image1 {
  height: 100%;
  /* float: left; */
  width: 60rem;
  /* width: 50vw; */
}

.text {
  height: 100%;
  /* float: right; */
  width: 60rem;
  /* width: 50vw; */

  /* display: block; */
}

/* .text h1,h3,h2 {
    padding-top: 20px; */

.text h1 {
  /* text-transform: uppercase; */
  padding: 1rem auto;
  text-align: center;
  font-size: 4rem;
}

.text h3 {
  /* height: 20%; */
  padding-top: 3rem;
  text-align: center;
  font-size: 1.6rem;
}

.text h2 {
  /* height: 20%; */
  padding: 4.5rem 1.5rem;
  text-align: center;
  font-size: 2.5rem;
}

.text .butt {
  border: none;
  /* color: black; */
  color: #fa4445;
  padding: 1.5rem 1.2rem;
  text-align: center;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 auto;
  display: block;
  cursor: pointer;
  border-radius: 1rem;
  background-color: #fff;
  width: 37%;
}

.text h6 {
  /* height: 18.2%; */
  padding-top: 2rem;
  text-align: center;
  font-size: 1.5rem;
}


/* feature section start from */
.features {
  padding: 1rem 9.25%;
}
.features .first {
  text-align: center;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
}

.first h2 {
  border: 0px solid;
  margin: 0rem 0rem 1rem 0rem;
  text-align: center;
  font-size: 3rem;
}
.first h5 {
  text-align: center;
  font-size: 15px;
}

.heading {
  text-align: center;
  border: 0px solid;
  font-size: 3rem;
  padding: 0.5rem 0rem 1.5rem 0rem;
  color: black;
}

.heading span {
  background: green;
  border: 0px solid;
  color: white;
  display: inline-block;
  padding: 0.5rem 1rem;
  clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}
.features .f-content {
  border: 0px solid red;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1rem;
}
.features .f-content .content-box {
  border: 0px solid;
  padding: 3rem 2rem;
  background-color: #fff;
  outline: var(--outline);
  outline-offset: -1rem;
  text-align: center;
  /* box-shadow: var(--box-shadow); */
  border-radius: 0.6rem;
}
.features .f-content .content-box:hover {
  box-shadow: var(--box-shadow);
  /* box-shadow: 1px 1px 10px 1px green; */
}

.features .f-content .content-box img {
  height: 12rem;
  margin: 1rem 0rem;
}

.features .f-content .content-box .content h3 {
  font-size: 2.2rem;
}

.features .f-content .content-box .content p {
  font-size: 1.4rem;
  line-height: 2rem;
  padding-bottom: 1rem;
  margin: 1rem auto;
}

.features .f-content .content-box .btn {
  border: 0.2rem solid black;
  display: inline-block;
  margin: 1rem 3rem;
  padding: 0.8rem 3rem;
  color: black;
  border-radius: 0.6rem;
  font-size: 1.7rem;
  cursor: pointer;
  background: none;
}

.features .f-content .content-box .btn:hover {
  background-color: green;
  color: #fff;
}
/* products section in index page  */
.products {
  padding: 0.1rem 9.24%;
}
.products .p-heading {
  text-align: center;
  font-size: 2.4rem;
  padding: 1.5rem 0rem 1.5rem 0rem;
  color: black;
}
.products .p-heading span {
  background: green;
  color: white;
  display: inline-block;
  padding: 0.5rem 1rem;
  clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}
.products .p-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
  gap: 1rem;
}

.content-box {
  border: 0px solid;
  padding: 3rem 2rem;
  background-color: #fff;
  outline: var(--outline);
  outline-offset: -1rem;
  text-align: center;
  /* box-shadow: var(--box-shadow); */
  border-radius: 0.6rem;
  transition: 0.2s linear;
}
.content-box:hover {
  box-shadow: var(--box-shadow);
}

.content-box .img {
  height: 18rem;
  width: 100%;
  border: 0px solid;
  object-fit: contain;
  margin: 1rem 0rem;
}

.products .p-content .content-box .brand {
  font-size: 1.3rem;
  color: #1f2833;
  font-weight: 600;
  text-align: start;
}
.content-box .card-text {
  text-align: start;
  font-size: 1.1rem;
  padding: 0.6rem 0 1rem 0;
  font-weight: 400;
}
.products .p-content .content-box .price {
  font-size: 1.8rem;
  font-weight: 300;
  line-height: 1.4rem;
  padding: 0.5rem 0;
}

.products .p-content .content-box .star-box {
  align-self: center;
}
.products .p-content .content-box .star-box .star {
  color: orange;
  font-size: 1rem;
}
.btn {
  border: 0.1rem solid lightgray;
  display: inline-block;
  margin: 1rem 3rem;
  padding: 0.8rem 3rem;
  color: black;
  border-radius: 0.6rem;
  font-size: 1.7rem;
  cursor: pointer;
  background: none;
}

.products .p-content .content-box .btn:hover {
  background-color: green;
  color: #fff;
}
/* testimonial slider in index page css */
.testimonial {
  padding: 2rem 9.25%;
}
.testimonial h3 {
  font-size: 1.6rem;
  padding: 2.4rem 0 0 0;
  font-weight: 500;
}
.swiper {
  width: 100%;
  height: 100%;
  margin: 2rem 0 1rem 0;
  border: 0px solid #e7f0f1;
}
.testi-content .slide {
  display: flex;
  flex-direction: column;
  border-radius: 2rem;
  background-color: #fff;
}
.slide .slide1 {
  display: inline-flex;
}
.slide .slide1 p {
  padding: 2rem 0.5rem 0;
  text-align: center;
  font-size: 1.6rem;
  font-weight: 400;
  color: #333;
  text-align: inherit;
}
.slide .slide1 .quote-icon {
  font-size: 3.4rem;
  color: lightblue;
  padding: 0.8rem 0.2rem 0;
}
.slide .slide2 {
  display: inline-flex;
  margin: 2rem;
}
.slide .slide2 .image {
  height: 6rem;
  width: 6rem;
  object-fit: cover;
  border-radius: 50%;
  background-color: gray;
}
.slide .details {
  align-self: flex-end;
  padding: 0rem 0rem 1rem 2rem;
}
.details .name {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
}
.details .valify {
  font-size: 0.8rem;
  font-weight: 400;
}
.slide .slide2 .star-box {
  align-self: center;
  margin: 0rem 0rem 0rem 3rem;
}
.slide .slide2 .star {
  color: orange;
  font-size: 1rem;
}

@media screen and (min-width: 768px) and (max-width: 991px) {
}
@media screen and (min-width: 428px) and (max-width: 767px) {
  .image1 {
    width: 90rem;
    overflow: hidden;
    margin: -40px 0px 0px -120px;
  }
}

@media screen and (max-width: 428px) {
  .image1 {
    width: 90rem;
    overflow: hidden;
    margin: -40px 0px 0px -120px;
  }
}