.flipbox {
    width: 100%;
    height: 100%;
    perspective: 1000px;
    margin: 0; /* remove the margin */
    padding: 0; /* remove the padding */
   }
  
  .flipbox-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  
  .flipbox:hover .flipbox-inner {
    transform: rotateY(180deg);
  }
  
  .flipbox-front, .flipbox-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .flipbox-front {
    background: #ffffff; /* yellow-500 */
    color: #000;
  }
  
  .flipbox-front img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 15px;
  }
  
  .flipbox-back {
    background: #eab308; /* yellow-600 */
    color: #fff;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: hidden; /* Hide overflow */
  }
  
  .flipbox-back p {
    font-size: 1rem;
    line-height: 1.4;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    text-align: center;
    width: 100%;
    padding: 0 10px; /* Optional padding for spacing */
    box-sizing: border-box;
    white-space: normal; /* Ensure wrapping */
    height: auto; /* Let it grow vertically */
    max-height: fit-content; /* Ensure it fits within flipbox */
    max-width: fit-content;
     }
  
  .flipbox-front h3 {
    font-size: 1.4rem;
    text-align: center;
    padding: 0 10px;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    line-height: 1.2;
  }
  
  @media (min-width:401px) and (max-width: 900px) {

    .flipbox {
      width: 100%;
      max-width: 100vw;
      height:40vh!important;
    }
    .box1 {
    margin-top:30vh!important;
    margin-left:13vw!important;
    padding-bottom: 280vh!important;
    margin-top: 1vh!important;
 
  }
  .flipbox h3 {
    transform: translateY(7vh);
  }

  .scaled-gif{
    scale:5;
  }
  }

    @media  (max-width: 400px) {
       
    .flipbox {
      width: 100%;
      max-width: 100vw;
      height:40vh!important;
    }
    .box1 {
    margin-top:30vh!important;
    margin-left:12vw!important;
    padding-bottom: 280vh!important;
 
  }
  .flipbox h3 {
    transform: translateY(7vh);
  }

  .scaled-gif{
    scale:5;
  }
#services1 {
  margin-bottom:-30vh!important;
}
#services{
  margin-bottom: -20vh!important;
}
}
  
  @media (min-width: 901px) and (max-width: 1400px) {
 #services {
  margin-top: -40vh!important;
  scale:.85;
 }
 #build-websites {
  transform: translateX(-8vw)!important;
 }
 }
 @media (min-width:850px) and (max-width:1050px){
      .flipbox {
      width: 100%;
      max-width: 80vw;
      height:30vh!important;
      transform: translateX(15vw);
    }
     .scaled-gif{
    scale:4;
  }
  .flipbox h3 {
    transform: translateY(5vh);
    scale:1.8;
  }
  
 }