/* About page layout */

.about-page{
  padding:100px 20px;
  display:flex;
  justify-content:center;
}

/* Container */

.about-container{
  max-width:1100px;
  display:flex;
  align-items:center;
  gap:80px;

  background:#F7F2EE;
  padding:60px;

  border-radius:30px;

  box-shadow:0 20px 40px rgba(0,0,0,0.06);
}

/* Image */
.about-image{
  position:relative;
  display:flex;
  justify-content:center;
  margin:20px 0;
  z-index:1;
}

/* Decorative background shape */

.about-image::before{
  content:"";
  position:absolute;

  width:300px;
  height:300px;

  background:linear-gradient(
    135deg,
    #d2cbc7,
    #eaccbc
  );

  border-radius:40px;

  top:50%;
  left:50%;

  transform:translate(-50%, -50%) rotate(-6deg);

  z-index:-1;

  animation:softFloat 4s ease-in-out infinite;
}

/* Second layer */

.about-image::after{
  content:"";
  position:absolute;

  width:260px;
  height:260px;

  background:linear-gradient(
    135deg,
    #F3ECE7,
    #DDD3CC
  );

  border-radius:36px;

  top:55%;
  left:50%;

  transform:translate(-50%, -50%) rotate(4deg);

  opacity:0.6;

  z-index:-2;

  animation:softFloatReverse 5s ease-in-out infinite;
}

/* Profile image */

.about-image img{
  width:230px;
  border-radius:22px;
  object-fit:cover;

  position:relative;
  z-index:2;

  box-shadow:0 12px 30px rgba(0,0,0,0.08);
}
@keyframes softFloat{

  0%{
    transform:translate(-50%, -50%) rotate(-6deg) scale(1);
  }

  50%{
    transform:translate(-50%, -46%) rotate(-3deg) scale(1.05);
  }

  100%{
    transform:translate(-50%, -50%) rotate(-6deg) scale(1);
  }

}

@keyframes softFloatReverse{

  0%{
    transform:translate(-50%, -50%) rotate(4deg) scale(1);
  }

  50%{
    transform:translate(-50%, -54%) rotate(6deg) scale(1.03);
  }

  100%{
    transform:translate(-50%, -50%) rotate(4deg) scale(1);
  }

}

/* Text */

.about-content{
  flex:1;
}

.about-content p{
  line-height:1.75;
  margin-bottom:18px;
  text-align:justify;
}

/* Ending line */

.about-end{
  font-weight:500;
  margin-top:20px;
}

/* Responsive */

@media (max-width:900px){

  .about-container{
    flex-direction:column;
    text-align:center;
    gap:40px;
  }

  .about-content p{
    text-align:left;
  }

}
@media (max-width:768px){

  .about-page{
    padding:50px 20px;
  }

  .about-container{
    padding:40px 25px;
  }

  .about-image{
    margin-top:0;
    margin-bottom:20px;
  }

  .about-image img{
    width:170px;
  }

  .about-image::before{
    width:220px;
    height:220px;
  }

  .about-image::after{
    width:190px;
    height:190px;
  }

}
.services-btn{
  display:inline-block;
  margin-top:20px;

  padding:12px 26px;

  background:#6F8790;
  color:white;

  text-decoration:none;
  border-radius:30px;

  font-size:15px;

  transition:background 0.3s, transform 0.2s;
}

.services-btn:hover{
  background:#5e7680;
  transform:translateY(-2px);
}