/* ===============================
   ABOUT 
================================ */

.about-image {
  display: flex;
  position: relative;
  border-radius: 44px;
  overflow: visible;
  border-radius: 12px;
  padding: 40px;
  overflow: hidden;
}

.about-image:hover img {
  border-radius: 10px; /* elegant morph */
  transform: translateY(-2px);
}


#about .container{
    display: grid;
    grid-template-columns: 520px auto;
    gap: 30px;
}

.about-picture {
  display: block;
  width: 100%;
}

.about-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

#about .about-image{
    border-radius: 50px;
    overflow: hidden;
    overflow: visible;    /* allow ball to show outside */
     position: relative;   /* 👈 REQUIRED */
}

#about .about-image img {
    width: 100%;
    height: auto;
    display: block;
}


#about .about-image:hover img{
    transform: scale(1.1); /* instead of 1.2 */
    transition: transform 0.4s ease;
}
#about .buttons-wrapper{
    margin-top: 30px;
}
@media (max-width:850px){
    #about .container *{
        text-align: center;
        padding: 1px 2px;  /* reduce padding on smaller screens and Gol Bros */
    }
    #about .container{
        grid-template-columns: 100%;
    }
}
/* About end */

/* ===============================
   ABOUT IMAGE BASE Effect
================================ */

@media (max-width: 768px) {

  /* Shine overlay */
  .about-image::after {
    content: "";
    position: absolute;
    inset: 0;

    /* Shine gradient */
    background: linear-gradient(
      120deg,
      transparent 30%,
      rgba(255,255,255,0.45),
      transparent 70%
    );

    /* Animation */
    transform: translateX(-120%);
    animation: aboutShine 3.5s ease-in-out infinite;

    pointer-events: none;
    z-index: 2;
  }

  @keyframes aboutShine {
    0% {
      transform: translateX(-120%);
    }
    100% {
      transform: translateX(120%);
    }
  }

}
/* ===============================
   Animation for text information about the company
   information about the company section contact us 
================================ */


/* Hide by default (desktop) */
.js-animation-wapper {
  display: none;
}

/* Show on mobile */
@media (max-width: 768px) {
  .js-animation-wapper {
    display: block;
    overflow: hidden;
    font-family: Arial, Helvetica, sans-serif;
  }
  .js-animation-track {
    display: inline-block;
    white-space: nowrap;
    will-change: transform;
  }
  .js-animation-track {
    overflow: hidden;
    white-space: nowrap;
  }

}