.btn-group{
    bottom: 570px;
    left: 1170px;
    width: 100px;
    height: 70px;
   }

.container {
    max-width: 100%;
    padding: 20px;
    position: relative;
  }

  .background-image {
    width: 100%;
    height: 100vh;
    object-fit: cover;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .timer-container {
    background-color: rgba(255, 255, 255, 0.479);
    border-radius: 15px;
    padding: 20px;
    margin: 70px auto;
    max-width: 500px;
  }

  .input-group {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
  }

  .input-group input {
    width: 80px;
    text-align: center;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
  }

  .timer {
    font-size: clamp(24px, 5vw, 48px);
    font-weight: bold;
    text-align: center;
    margin: 20px 0;
    color:green;
  }

  .buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 20px 0;
  }

  .buttons button {
    padding: 10px 20px;
    border: none;
    border-radius: 10px;
    font-weight: bold;
    min-width: 100px;
  }
  @media (max-width: 576px) {
    .input-group {
      flex-direction: column;
      align-items: center;
    }

    .input-group input {
      width: 120px;
    }
}
.mainpage{
  object-fit: cover;
 width: 1300px;
 height: 800px;
}
.menu{
  display: flexbox;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #5453529b;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}
.title{
  font-size: 45px;
 text-align: center;
}
.logo{
display: block;
margin: auto;
}
.flip-card {
  background-color: transparent;
  width: 250px;
  height: 200px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; 
}

.flip-card-inner {
  position: relative;
  width: 150%;
  height: 200%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; 
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #bbb;
  color: black;
}

.flip-card-back {
  background-color: rgba(27, 25, 20, 0.296);
  color: white;
  transform: rotateY(180deg);
}
.viewbutton{
position: relative;
top: 180px;
left: 90px;
}
.viewbutton2{
  position: relative;
top: 180px;
left: 290px;
}
.viewbutton3{
  position: relative;
top: 180px;
left: 490px;
}