.arrow-container {
  position: relative;
  width: 100%;
  max-width: 1000px; /* Adjusts for larger screens */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8); /* Subtle shadow */
  border-radius: 6px; /* Matches the arrow border-radius */
  background-clip: padding-box; /* Prevents shadow bleed */
}

.arrow {
  position: relative;
  padding: 25px 30px 25px 20px; /* Adjust padding for arrow positioning */
  color: white;
  font-size: 18px;
  font-weight: 500;
  text-align: right;
  margin-bottom: 5px;
  border-radius: 5px;
}

.arrow::after, .arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
}

.arrow::after {
  right: -15px; /* Adjust this value */
  border-top: 35px solid transparent;
  border-bottom: 35px solid transparent;
  border-left: 15px solid; /* Matches the right property */
}

.arrow-1 {
  background: linear-gradient(to right, #004787, #00315F);
}

.arrow-1::after {
  border-left-color: #00315F;
}

.arrow-2 {
  background: linear-gradient(to right, #3B6C6B, #3B6C6B);
}

.arrow-2::after {
  border-left-color: #3B6C6B;
}

.arrow-3 {
  background: linear-gradient(to right, #470088, #270056);
}

.arrow-3::after {
  border-left-color: #270056;
}

.arrow-4 {
  background: linear-gradient(to right, #004787, #00315F);
}

.arrow-4::after {
  border-left-color: #00315F;
}

.arrow-5 {
  background: linear-gradient(to right, #3B6C6B, #3B6C6B);
}

.arrow-5::after {
  border-left-color: #3B6C6B;
}

.container-1, .container-2, .container-3, .container-4, .container-5 {
  width: 100%; /* Default to full width */
}

/* Media Queries */
@media (min-width: 576px) {
  .container-1 {
    width: 90%;
  }

  .container-2 {
    width: 85%;
  }

  .container-3 {
    width: 80%;
  }

  .container-4 {
    width: 75%;
  }

  .container-5 {
    width: 70%;
  }
}

@media (min-width: 768px) {
  .container-1 {
    width: 72%;
  }

  .container-2 {
    width: 78%;
  }

  .container-3 {
    width: 69%;
  }

  .container-4 {
    width: 80%;
  }

  .container-5 {
    width: 90%;
  }
}

@media (min-width: 992px) {
  .container-1 {
    width: 72%;
  }

  .container-2 {
    width: 78%;
  }

  .container-3 {
    width: 69%;
  }

  .container-4 {
    width: 80%;
  }

  .container-5 {
    width: 90%;
  }
}

/* Mobile Adjustments */
@media (max-width: 575px) {
  .arrow {
    padding: 15px 20px 15px 10px; /* Adjust padding for smaller screens */
    font-size: 14px; /* Reduce font size for smaller screens */
  }

  .arrow::after {
    display: none;
    /* border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 10px solid;
    right: -10px; */
  }
}