/*----common----*/
main {
  background-color: #ffffff;
}

.breadcrum {
  width: 235px !important;
}

.about-section-1,
.about-section-2,
.about-section-3,
.about-section-4 {
  display: flex;
  justify-content: center;
  align-items: center;
}


.para {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.para h2 {
  padding: 7px 17px;
  border-left: 4px solid #fee823;
}

.para p {
  color: #00000099;
}

.image {
  min-width: 600px;
  min-height: 452px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image img {
  height: auto;
  width: 100%;
}


/*--about section 1--*/
.container {
  padding: 50px 0 0 80px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

/*--about section 2--*/
.about-section-2 .container {
  padding: 50px 80px 0 0;
}

/*--about section 3--*/
.about-section-3 .container {
  padding: 50px 0 0 80px;
}

/*--about section 4--*/
.about-section-4 .container {
  padding: 50px 80px 50px 0;
}



/*-------------------
    Tablet view
------------------*/
@media(max-width: 1024px) {
  .container {
    flex-direction: column;
    padding: 0 40px 50px 40px !important;
    text-align: center;
  }

  .about-section-1 .container {
    padding: 50px 40px !important;
  }

  .about-section-2 .container,
  .about-section-4 .container {
    flex-direction: column-reverse;
  }

  .image {
    min-height: 452px;
  }

  .image img {
    height: 100%;
    width: auto;
  }

  .para {
    align-items: center;
  }
}


/*-------------------
    Mobile view
------------------*/
@media(max-width: 767px) {
  .about-section-1 .container {
    padding: 36px 24px !important;
  }

  .about-section-2 .container,
  .about-section-3 .container,
  .about-section-4 .container {
    padding: 0 24px 36px 24px !important;
  }
}


/*-------------------*/
@media(min-width: 1025px) and (max-width: 1280px) {
  .image {
    min-width: unset;
    min-height: unset;
    width: clamp(400px, calc(78.43vw - 404px), 600px);
  }

  .para {
    max-width: 574px;
  }
}

@media(max-width: 700px) {
  .image {
    min-height: unset;
    width: 100%;
    min-width: unset;
  }

  .image img {
    width: 100%;
    height: auto;
  }
}

@media(max-width: 430px) {
  .para h2 {
    max-width: 234px;
    text-align: left;
  }
}



/*------ANIMATION------*/
@media(min-width: 1025px) {

  .about-section-1,
  .about-section-3 {
    opacity: 0.4;
    transform: translateX(-10%);
    transition: all 0.7s ease;
  }

  .about-section-2,
  .about-section-4 {
    opacity: 0.4;
    transform: translateX(10%);
    transition: all 0.7s ease;
  }

  .about-section-1.anim-show,
  .about-section-2.anim-show,
  .about-section-3.anim-show,
  .about-section-4.anim-show {
    opacity: 1;
    transform: translateX(0);
  }
}