/* CSS for Cool Hover Animations */
.animated-img {
max-width:100%; 
max-height:auto; 
margin: 10px;
border-radius: 10px;
transition: transform 0.6s ease-in-out, box-shadow 0.4s ease-in-out, filter 0.5s ease-in-out;
}

/* Hover Effect */
.animated-img:hover {
transform: scale(1.1) rotate(2deg);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
filter: brightness(1.1);
}

/* Adding slight tilt effect */
.animated-img:nth-child(odd):hover {
transform: scale(1.1) rotate(-2deg);
}

.text-box {
    padding: 40px 20px 40px 20px;
}


/* CSS for Flip Effect */
.flip-box {
    background-color: transparent;
    /* width: 300px; */
    height: 370px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
  }
  
  /* This container is needed to position the front and back side */
  .flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
    padding: 20px;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-box-front {
    background-color: #2e43ab;
    color: black;
    background-repeat: no-repeat;
  }
  
  /* Style the back side */
  .flip-box-back {
    background-color: #242424;
    color: white;
    transform: rotateY(180deg);
  }

  .flip-box-back h2 {
    color: #aba073;
  }

.frontier h3 {
    /* background-color: rgba(36, 36, 36, 0.8); Dark but slightly transparent */
    background-color: #be4442; /* Dark but slightly transparent */
    color: #fff;
    display: inline-block; /* Makes background wrap around text */
    padding: 5px 10px; /* Adds slight spacing for aesthetics */
    border-radius: 5px; /* Optional: Adds rounded corners */
}