.outer-events {
  height: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 100%;
min-height: 100vh;
overflow: hidden; /* Prevent horizontal scrolling */
background: linear-gradient(180deg, #06182e, #0e3059);
}

.title-events {
font-family: "Anton", sans-serif;
font-size: 4.5vw;
background: linear-gradient(180deg, #fff, #000000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
z-index: 1;
padding-bottom: 3%;
padding-top: 3%
}

.instructions {
font-family: Arial, Helvetica, sans-serif;
background: linear-gradient(-45deg, #030c17, #0e2e56);
font-size: 1.2rem;
color: #fff;
letter-spacing: 0.1em;
position: relative;
border: 1px solid #113868;
border-radius: 10px;
padding: 3% 4%;
margin: 0 10%;
margin-top: 3%;
margin-bottom: 8%;
}

.inst{
opacity: 0.5;

}

.cards {
  position: relative;
display: grid;
grid-template-columns: repeat(3, 1fr); /* Default to 3 cards per row */
padding-bottom: 6vh;
/* gap: 20px; */
column-gap: 30px;
row-gap: 70px;
/* padding: 20px; */
/* width: 80%; */
justify-items: center;

}

.btn-container {
display: flex;
flex-direction: row;
position: absolute;
bottom: 10%;
right: 6%;
gap: 20px;
}
.clan{
opacity: 1;
cursor: pointer;
text-decoration: underline; /* Add underline to the clan elements */
text-decoration-color: #fff; /* Optional: Set the color of the underline */
text-decoration-thickness: 2px; /* Optional: Set the thickness of the underline */
text-underline-offset: 5px;
color: #fff;
}


@media (max-width: 768px) {
.cards {
  grid-template-columns: repeat(2, 1fr); /* 2 cards per row on mobile */
}
.title-events {
  font-size: 7vw;
}
}


.clan-btn {
display: flex;
align-items: center;
justify-content: center;
border: 3px solid #7c2424;
background-color: transparent; 
border-radius: 1000px;
cursor: pointer;
}
.button-title-clan {
font-size: 1rem;
color: #b33535;
margin-left: 0.5rem;
text-align: center;
padding-left: 2rem;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
padding-right: 2.5rem;
}

.reg-btn {

display: flex;
align-items: center;
justify-content: center;
background: #7c2424;
border: none;
border-radius: 1000px;
cursor: pointer;
}


.reg-btn:hover{
  animation: spinBackForth 0.5s ease-in-out;
}
.button-title {
font-size: 1rem;
color: #fff;
margin-left: 0.5rem;
text-align: center;
padding-left: 2rem;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
padding-right: 2.5rem;
opacity: 0.8;
}
@keyframes spinBackForth {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(10deg);
  }
  66% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


@media (max-width: 480px) {
  .cards {
    grid-template-columns: repeat(1, 1fr); /* 1 card per row on mobile */
    width: 100%;
    padding-top: 7%;
    padding-bottom: 7%;
  }
  .title-events {
    font-size: 12vw;
    margin-top: 5%;
  }
  .instructions{
    padding-bottom: 6%;
    margin-bottom: 45%;
  }
  .btn-container {
    flex-direction: column;
    bottom: -19%;
    right: 15%;
  }
}