html {
  scroll-behavior: smooth;
}

body {
  font-family: "Nunito", sans-serif;
  font-family: "Poppins", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  border: none;
  font-size: 100%;
  vertical-align: baseline;
  box-sizing: border-box;
}

.wrapper .container .box .question {
  font-size: clamp(13px, 3vw, 18px);
}

.wrapper .container .box .answer.active {
  max-height: 200px;
}

.wrapper .container .box .answer__text {
  font-size: clamp(8px, 3vw, 16px);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(90%, 800px);
  margin-inline: auto;
  color: #fff;
}

.overflow {
  overflow: hidden;
}

nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.thicker-hr {
  /* Adjust the thickness as desired */
  border-color: #746666; /* Adjust the color as desired */
}

.cut-edge {
  position: relative;
}

.cut-edge::before {
  content: "";
  position: absolute;
  bottom: -1.5px;
  right: -1.5px;
  border-bottom: 70px solid #e8e6e6;
  border-left: 70px solid transparent;
  width: 20px;
}

.testimonial {
  background-image: linear-gradient(180deg, #fbfbfb 20%, #e7e5e5 25%);
}

@media (max-width: 1000px) {
  .toggle {
    transition: ease-in-out 550ms;
    transform: translate(0px);
    opacity: 1;
    display: block;
    min-height: 100vh;
  }

  nav ul {
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: hsla(0, 0%, 0%, 0.5);
    backdrop-filter: blur(10px);
    transform: translateX(-500px);
    opacity: 0;
  }

  nav li {
    cursor: pointer;
  }

  nav li:hover {
    background: rgba(0, 0, 0, 0.7);
  }

  .hamburger {
    display: block;
  }
}

/* div.cards {
        position: relative;
    }

    div.cards:before {
        content: '';
        position: absolute;
        bottom: -1px;
        right: -1px;
        border-top: 80px solid transparent;
        border-right: 80px solid white;
        width: 0;
        /* border-left :1px solid #EAEFF3; 
    } */

@media (min-width: 1250px) {
  .testimonial {
    background-image: linear-gradient(180deg, white 20%, #e7e5e5 80%);
  }
}
@media (max-width: 800px) {
  .testimonial {
    background-image: linear-gradient(180deg, white 5%, #e7e5e5 25%);
  }
}

@media (max-width: 450px) {
 
.cut-edge::before {
  border-bottom: 55px solid #e8e6e6;
  border-left: 55px solid transparent;
}
}

div.test {
  height: 300px;
  background: red;
  position: relative;
}

div.test:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  border-top: 80px solid white;
  border-left: 80px solid red;
  width: 0;
}