.custom-darker {
    filter: brightness(0.55);
    background-size: cover;
    z-index: 0;
}
.bg-video div {
    z-index: 2;
}
.circle-container {
  position: relative;
  width: 300px;
  height: 300px;
}
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.circle1 {
  transform: translate(-150%, -50%);
}
.circle2 {
  transform: translate(50%, -50%);
}
.circle3 {
  transform: translate(-50%, 150%);
}
.howit_section {
    position: relative;
}
.howit_section::before {
    content: "";
    width: 100%;
    height: 10rem;
    position:absolute;
    top: -7rem;
    background-color: #9f9f9f;
    transform: skewY(6deg);
    z-index:0;
}
.howit_grid_container {
    overflow-x: visible;
    font-family: "Cairo", sans-serif;
}
.text_container {
    transform: translate(-5%, 10%);
}
.text_container_hover {
    transform: translate(-5%, -20%);
}
.text_container_p {
    transform: translate(-20%, 0%);
}
.text_container_1 {
    transform: translate(5%, 40%);
}
.text_container_1_hover {
    transform: translate(5%, 0%)
}
.text_container_1_p {
    transform: translate(-23%, 0%);
}
.text_container_2 {
    transform: translate(20%, 35%);
}
.text_container_2_hover {
    transform: translate(20%, -3%);
}
.text_container_2_p {
    transform: translate(-35%, 0%);
}
.howit_second {
    font-family: "Cairo", sans-serif;
}
.hero_section {
    position: relative;
}
.hero_section::after {
    content: "";
    width: 100%;
    height: 17rem;
    position: absolute;
    bottom: 0;
    background-color: #5e7d95;
    transform: skewY(20deg);
    z-index: 1;
    opacity: 0.8;
}
.solutions_section::before {
    content: "";
    width: 100%;
    height: 10rem;
    position: absolute;
    top: 4.75rem;
    background-color: #9f9f9f;
    transform: skewY(6deg);
    z-index: -1;
    opacity: 0.8;
}
@media (min-width: 1024px) {
    .custom_clippath {
        clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
    } 
}
@media (max-width: 1024px) {
    .custom_clippath {
        clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);
    }
}
.dashed_list {
  padding-left: 30px
}
.dashed_list li {
  position: relative;
}
.dashed_list li::before {
  content: "";
  position: absolute;
  left: -15px; /* Adjust the space between dashes and text */
  top: 50%; /* Adjust vertically to center the dashes */
  transform: translateY(-50%);
  width: 10px; /* Adjust the width of the dashes */
  height: 2px;
  background-color: white;
}
.casestudy_clippath {
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
}
.case-study::after {
    content: " ";
    width: 100%;
    height: 10rem;
    position: absolute;
    bottom: -10rem;
    background-color: #707070;
    transform: skewY(9deg);
}
input {
    font-family: "Cairo", sans-serif;
}