.about{
  position: relative;
  height: fit-content;
  padding-bottom: 34rem;
}

.about-shape-box {
  width: 100%;
  height: 100dvh;

  padding-top: 1rem;

  position: relative;
  z-index: -999;
}

.about-shape-box .point-left {
  width: 100%;
  height: 40%;

  border: 10px solid var(--p);

  border-top-right-radius: 7rem;
  border-bottom-left-radius: 7rem;

  background-color: var(--p);

  position: absolute;
  z-index: 2;
  top: 5.5rem;
  right: 3rem;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.about-shape-box .point-right {
  width: 100%;
  height: 40%;

  background-color: var(--lb);

  border-top-left-radius: 7rem;
  border-bottom-right-radius: 7rem;

  right: 0;
  
  position: absolute;
}

.point-right-2 {
  width: 100%;
  height: 50%;

  background-color: var(--lb);
  border: 10px solid var(--dp);

  border-top-left-radius: 7rem;
  border-bottom-right-radius: 7rem;

  right: 0;
  bottom: 0;
  translate: 0 30rem;


  position: absolute;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
}


/* small mobile */
@media (min-width: 320px) {
 .point-right-2 {
  height: 60%;

  border-top-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
 }
}

/* m mobile */


/* l mobile */
@media (min-width: 425px) {
 .about-shape-box .point-left {
  height: 60%;

  border-top-right-radius: 10rem;
  border-bottom-left-radius: 10rem;
 }

 .about-shape-box .point-right {
  height: 60%;

  border-top-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
 }

 .point-right-2 {
  height: 60%;

  border-top-left-radius: 10rem;
  border-bottom-right-radius: 10rem;
 }

}

/* xs */
/* @media (min-width: 475px) {

} */

/* sm */
@media (min-width: 640px) {
  .about-shape-box .point-left {
    height: 65%;
    width: 80%;

    
  
    border-top-right-radius: 13rem;
    border-bottom-left-radius: 13rem;
   }
  
   .about-shape-box .point-right {
    height: 65%;
    width: 80%;
  
    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;
   }

   .point-right-2 {
    height: 65%;
    width: 70%;
  
    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;
   }
}

/* m */
@media (min-width: 768px) {
  .about {
    padding-bottom: 18rem;
  }

  .about-shape-box .point-left {
    height: 65%;
    width: 60%;

    border-top-right-radius: 13rem;
    border-bottom-left-radius: 13rem;
   }
  
   .about-shape-box .point-right {
    height: 65%;
    width: 60%;

    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;
   }

   .point-right-2 {
    height: 65%;
    width: 60%;

    translate: 0 15rem;
    z-index: 99;

    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;
   }

   
}

/* lg */
@media (min-width: 1024px) {
  .about-shape-box .point-left {
    height: 65%;
    width: 50%;

    
  
    border-top-right-radius: 13rem;
    border-bottom-left-radius: 13rem;
   }
  
   .about-shape-box .point-right {
    height: 65%;
    width: 50%;


  
    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;
   }

   .point-right-2 {
    height: 65%;
    width: 50%;

    

    border-top-left-radius: 13rem;
    border-bottom-right-radius: 13rem;
   }

}

/* xl */
/* @media (min-width: 1280px) {
  
} */

/* 2xl */
/* @media (min-width: 1536px) {

} */