.about__section {
  /* width: 100vw; */
  background: linear-gradient(to right, rgb(5, 41, 98, 0.9), rgb(5, 41, 98, 0.9)),  url(../../assets/office-builiding.jpg) no-repeat right / cover;;
  background-attachment: fixed;
}

.about__div {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 3rem;
  justify-content: center;
  align-items: center;
  text-align: justify;
  color: var(--white-color);
  padding-block: 5rem;
}

.about-writeup h2 {
  padding-bottom: 2rem;
  text-align: center;
}

.about-images{
  overflow: hidden;
}

.about-images img {
  width: 100%;
  border-radius: 5%;
  box-shadow: 0px 0px 10px 2px rgb(256, 256, 256, 0.1);
}

.about-images :nth-child(1), 
.about-images :nth-child(3) {
  display: none;
}


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

} */

/* sm */
/* @media (min-width: 640px) {

} */

/* md tablet*/
@media (min-width: 768px) {

  .about__div {
    gap: 0rem;
    padding-block: 5rem;
  }

  .about-images {
      display: flex;
      align-items: center;
      justify-content: center;
  }
  
  .about-images img {
      width: 35%;
  }
  
  .about-images :nth-child(1) {
      display: block;
  }

  .about-images :nth-child(2) {
      margin-left: -5%;
      margin-top: 15%;
  }

  .about-writeup h2 {
      text-align: left;
  }
}

/* lg small screen*/
@media (min-width: 1024px) {

}


/* xl average screen*/
@media (min-width: 1280px) {
  .about__div {
      flex-direction: row;
      gap: 3rem;
  }

  .about-images {
      flex-direction: column;
  }

  .about-images img {
    width: 50%;
}
  
  
  .about-images :nth-child(1) {
      margin-left: 30%;
  }

  .about-images :nth-child(2) {
      margin-left: -45%;
      margin-top: -15%;
      z-index: 100;
  }

  .about-images :nth-child(3) {
      display: block;
      margin-left: 30%;
      margin-top: -15%;
  }
}