body{
    background: linear-gradient(68.2deg, rgb(3, 126, 243) -0.3%, rgb(48, 195, 158) 100.2%);
    font-family: 'Rubik', sans-serif;
}



/* Media query for mobile screens with a maximum width of 767px (adjust as needed) */
@media screen and (max-width: 767px) {
  .idrame {
    border: none;
    overflow: hidden;
    width: 100%;
    height: 100%;
    border-radius: 15px;
    margin-top: 25px;
  }
}

.image-3d {
    display: inline-block;
    perspective: 1000px; /* Adjust the perspective value to control the depth effect */
  }
  
  .image-3d img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
    transform: rotateX(0deg) rotateY(-15deg);
    transition: transform 0.3s ease;

  }
  
  .image-3d img:hover {
    transform: rotateX(0) rotateY(0); 
  }
  
  .image-3d1 {
    display: inline-block;
    perspective: 1000px; /* Adjust the perspective value to control the depth effect */
  }
  
  .image-3d1 img {
    border-radius: 10px;
    width: 100%;
    height: 100%;
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
    transform: rotateX(0deg) rotateY(15deg);
    transition: transform 0.3s ease;

  }
  
  .image-3d1 img:hover {
    transform: rotateX(0) rotateY(0); 
  }