.about-section {

  position: relative;

  width: 100%;

  /* max-width: 1300px; */

  padding: 80px 0px;

  overflow: hidden;

  z-index: 1;

}





.about-section::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(135deg, #FFFDF5, #FCEDE6);

  z-index: -3;

}



.about-section::after {

  content: "";

  position: absolute;

  top: -140px;

  left: -140px;

  width: 520px;

  height: 520px;

  background: linear-gradient(135deg, #7A4A12, #5C370C);

  clip-path: polygon(0 0, 100% 0, 80% 60%, 60% 100%, 0 80%);

  opacity: 0.9;

  z-index: -2;

}



/* GOLD CLIP SHAPE */

.bg-yellow {

  position: absolute;

  bottom: -160px;

  right: -160px;

  width: 520px;

  height: 520px;

  background: linear-gradient(135deg, #F5BA5E, #E9A93C);

  clip-path: polygon(30% 0, 100% 20%, 100% 100%, 20% 100%, 0 60%);

  opacity: 0.85;

  z-index: -2;

}





.abcontainer {

  max-width: 1200px;

  margin: auto;

  display: flex;

  align-items: center;

  gap: 60px;

  flex-wrap: wrap;

  position: relative;

  z-index: 2;

}



.about-images {

  flex: 1;

  min-width: 300px;

  position: relative;

  animation: fadeUp 0.8s ease forwards;

}



.image-wrapper {

  position: relative;

  width: 100%;

  padding-top: 100%;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 20px 40px rgba(122, 74, 18, 0.25);

}



.image-wrapper img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.image-wrapper:hover img {

  transform: scale(1.05);

}





.experience-badge {

  position: absolute;

  bottom: -20px;

  right: -20px;

  width: 140px;

  height: 140px;

  background: #ffffff;

  border-radius: 50%;

  border: 5px solid #FFFDF5;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-shadow: 0 15px 30px rgba(0,0,0,0.15);

  animation: spin 6s linear infinite;

}



@keyframes spin {

  from { transform: rotate(0deg); }

  to { transform: rotate(360deg); }

}



.experience-badge span {

  font-size: 32px;

  font-weight: 800;

  color: #7A4A12;

}



.experience-badge p {

  font-size: 14px;

  font-weight: 500;

  text-align: center;

  color: #5C370C;

}



.about-content {

  flex: 1;

  min-width: 300px;

  padding: 20px;

  animation: fadeUp 0.8s ease 0.2s forwards;

  opacity: 0;

}



.subtitle {

  display: inline-block;

  background: rgba(122, 74, 18, 0.12);

  color: #7A4A12;

  padding: 6px 14px;

  border-radius: 20px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 1px;

}



.about-content h1 {

  font-size: 42px;

  color: #5C370C;

  margin: 18px 0;

  line-height: 1.2;

}



.about-content h1 span {

  color: #7A4A12;

  position: relative;

}



.about-content h1 span::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: 6px;

  width: 100%;

  height: 8px;

  background: rgba(245, 186, 94, 0.45);

  z-index: -1;

  border-radius: 4px;

}



.description {

  font-size: 17px;

  line-height: 1.7;

  color: #8A7A6A;

  margin-bottom: 30px;

}



.features {

  list-style: none;

  margin-bottom: 40px;

}



.features li {

  display: flex;

  align-items: flex-start;

  font-size: 17px;

  margin-bottom: 18px;

}



.features i {

  color: #2ECC71;

  font-size: 20px;

  margin-right: 12px;

  margin-top: 2px;

}



/* BUTTON */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 16px 36px;

  border-radius: 10px;

  background: linear-gradient(to right, #7A4A12, #5C370C);

  color: #ffffff;

  font-size: 17px;

  font-weight: 600;

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

  box-shadow: 0 10px 25px rgba(122, 74, 18, 0.35);

}



.btn:hover {

  transform: translateY(-3px);

}





@keyframes fadeUp {

  from {

    opacity: 0;

    transform: translateY(30px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



/* RESPONSIVE */

@media (max-width: 992px) {

  .container {

    flex-direction: column;

    gap: 40px;

  }



  .about-content h1 {

    font-size: 36px;

  }

}



@media (max-width: 768px) {

  .about-content h1 {

    font-size: 32px;

  }



  .btn {

    width: 100%;

    justify-content: center;

  }

}
@media(max-width:716px){
  .experience-badge {
    bottom: -52px;
    right: 8px;
  }
}


@media (max-width: 576px) {

  .about-content h1 {

    font-size: 28px;

  }



  .experience-badge {

    width: 120px;

    height: 120px;

  }

}

@media(max-width:370px){
.about-content {
    min-width: 0 !important;
    width: 100%;
}
}