/* .hero .title {
    font-size: 50px;
    background: linear-gradient(90.75deg, #f1e8e8 6.43%, rgb(124 104 104 / 64%) 86.66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
} */
/* .hero .title-para {
    font-size: 20px;
    background: linear-gradient(90.75deg, #ffffff 6.43%, rgb(211 230 243 / 83%) 86.66%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: justify;
}
.hero p {
    color: 
    color-mix(in srgb, var(--default-color), transparent 30%);
    margin: 5px 0 30px 0;
    font-size: 20px;
    font-weight: 400;
}
.title, .title-para, .custom-label, .custom-input, .heading-form, .sub-head, .com-title, .com-add, .vincent-title, .vincent-head, .heading-form2 {
    font-family: "Josefin Sans", sans-serif;
}
.custom-btn {
    background: linear-gradient(145deg, rgba(231, 64, 235, 0.6), rgba(59, 25, 156, 0.7));
    color: #fff;
    transition: color 0.3s ease;
} */
/* .w-50 {
    width: 50% !important;
}
.xyz-2 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  font-weight: 300;
  color: #cb904d;
  display: inline-block;
  position: relative;
  z-index: 3;
}

.xyz-2::after {
  content: "";
  width: 80%;
  height: 80%;
  position: absolute;
  top: 22%;
  left: 12%;
  border: 1px solid #cb904d31;
  z-index: -20;
} */

@keyframes move {
    from {
      transform: rotate(45deg) translate(-120px, 60px);
    }
    to {
      transform: rotate(45deg) translate(-120px, -290px);
    }
  }
  .xyz .container22 {
    margin: 0px;
    position: absolute;
    right: -135px;
    top: -250px;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 1rem;
    animation: move 4.5s linear infinite alternate;
  }
  
  .container22 .child-container {
    width: 150px;
    height: 150px;
    border-radius: 5px;
    background-color: #b9b9b9;
    text-align: center;
    overflow: hidden;
  }
  
  .child-container img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
  }
  
  @media screen and (max-width: 1000px) {
    body .heading {
      margin: 9rem 3rem;
      font-size: 6rem;
    }
  }
  
  @media screen and (max-width: 780px) {
    body .heading {
      font-size: 4rem;
      margin: 12rem 2rem;
    }
    @keyframes move {
      from {
        transform: rotate(45deg) translate(20px, 80px);
      }
      to {
        transform: rotate(45deg) translate(20px, 20px);
      }
    }
  
    body .container {
      gap: 0.5rem;
    }
    .container .child-container {
      width: 100px;
      height: 100px;
      border-radius: 4px;
    }
  }
  
  @media screen and (max-width: 500px) {
    body .heading {
      margin: 8rem 2rem;
    }
  
    @keyframes move {
      from {
        transform: rotate(45deg) translate(150px, 80px);
      }
      to {
        transform: rotate(45deg) translate(150px, 20px);
      }
    }
  }
  
  .grid-container {
    columns: 5 200px;
    column-gap: 1.5rem;
    width: 90%;
    margin: 0 auto;
    text-align: center;
  }
  .grid-container div {
    width: 150px;
    margin: 0 1.5rem 1.5rem 0;
    display: inline-block;
    width: 100%;
    border: solid 2px black;
    padding: 5px;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
    border-radius: 5px;
    transition: all .25s ease-in-out;
  }
  .grid-container div:hover img {
    filter: grayscale(0);
  }
  .grid-container div:hover {
    border-color: coral;
  }
  .grid-container img {
    width: 100%;
    filter: grayscale(100%);
    border-radius: 5px;
    transition: all .25s ease-in-out;
  }
  .grid-container p {
    margin: 5px 0;
    padding: 0;
    text-align: center;
    font-style: italic;
  }
  .cards-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 2rem;
    font-weight: 700;
    font-family: "Josefin Sans", sans-serif;
  }



  
  #hero-life {
      position: relative;
      width: 100%;
      /* min-height: 100vh; */
      overflow: hidden;
  }
  
  #hero-life .hero-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
  }
  
  #hero-life .hero-bg::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7); /* Adjust opacity as needed */
      z-index: 2;
  }
  
  #hero-life .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  #hero-life .container {
      position: relative;
      z-index: 3;
  }
  #hero-life .title{
    background: linear-gradient(90.75deg, #f1e8e8 6.43%, rgb(124 104 104 / 64%) 86.66%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
  }