@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;500;700;800;900;1000&display=swap");

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Nunito", sans-serif;
  }

  body{
    background-color: rgb(0, 0, 0);
    padding: 0px 50px;
  }

 .container{
    padding: 50px 0px;
    height: 100vh;
    display: flex;
    gap: 50px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .parent{
    height: 400px;
    width: 300px;
    padding: 20px;
    perspective: 1000px;
  }

  .card{
    padding-top: 100px;
    transform-style: preserve-3d;
    background-image: linear-gradient(to right, #1957b3, #c3cfe2);;
    background-position: center center;
    width: 100%;
    transition: all 0.5s ease-in-out;
    border-radius: 10px;
  }

  .card:hover{
    background-position: 80% 20%;
    transform: rotate3d(0, 1,0, 15deg );
  }

  .content-box{
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.811);
    border-radius: 0px 0px 10px 10px;
    box-shadow: rgba(0, 115, 255, 0.925) 0px 20px 50px -25px;
    transition: all 0.5s ease-in-out;
    padding: 50px 25px 25px 25px;
    transform-style: preserve-3d;
  }

  .container a{
    color: white;
    font-size: 25px;
    font-weight: 900;
    transition: all 0.5s ease-in-out;
    text-decoration: none;
  }

  .container a:hover {
    color:#13ec17;
  }

  .card-content{
    padding-top: 15px;
    padding-bottom: 35px;
    font-size: 12px;
    color: rgb(243, 236, 236);
    transition: all 0.5s ease-in-out;
    transform: translate3d(0px, 10px, 20px);
    font-weight: 600;
  }

  .card-content:hover{
    transform: translate3d(0,1,0,50px);
  }

  

  .see-more:hover{
    transform: translate3d(0px, 0px, 50px);
  }

  

  

  

 

  .card2{
    filter: hue-rotate(150deg);
  }

  .card3{
    filter: hue-rotate(300deg);
  }

  .card4{
    filter: hue-rotate(90deg);
  }
.card5{
  filter: hue-rotate(40deg);
}
.card6{
  filter: hue-rotate(170deg);
}
/* https://images.pexels.com/photos/1629236/pexels-photo-1629236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1 /*