::before, ::after {
transition: 0.5s;
}
h1 {
font-weight: normal;
}
.header {
width: 100%;
z-index: 2;
display: flex;
/* align-items: center; */
justify-content: center;
position: relative;
flex-direction: column;
text-align: center;
padding-top: 7vh;
     
}
.header .bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.header .bg video {
width: 100%;
height: 100%;
object-fit: cover;
}



.header .line {
/* position: absolute; */
bottom: -0.5vh;
width: 100%;
height: 0.9vh;
pointer-events: none;
}
.header .line::before {
content: "";
width: 40%;
height: 0.2vh;
position: absolute;
left: 0;

}
.header .line::after {
content:"";
width: 40%;
height: 0.2vh;
position: absolute;
right: 0;

}
.header .line img {
width: 110vh;
    transform: rotate(180deg);
    position: relative;
    z-index: 1;
    top: -2.6vh;
    opacity: 0.8;

}
.header .top {
position: relative;
z-index: 1;
margin-bottom: 4vh;
      
}
.header .top::after {
content: "";
left: 0;
opacity: 0.3;
top: 10vh;
width: 100%;
height: 80%;
background-color: black;
position: absolute;
z-index: -1;
filter: blur(10vh);
}
.header .top .logo {
width: 75vh;
    padding-top: 10vh;
    opacity: 1;
    filter: brightness(1) contrast(1.5) saturate(1) drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.7));
}
      @media screen and (max-width: 1024px) {
    .header .top .logo {
        width: 35vh;
        margin: 0;
      padding-top:2vh;
    }
}
.header .top h1 {
color: white;
text-shadow: 0vh 0vh 2vh rgba(0, 0, 0, 0.6);
line-height: 10vh;
filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.8));
font-family:'Warhaven' !important;
}
.header .top h1 span {
color: #efe0ab;
      
}

li {
list-style: none;
}

.header {
background-position-y: 0vh;
}
.header .line {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}

.header .top h1 {
font-size: 2.5rem; 
line-height: 6.5vh;
width: 80%;
margin: 0 auto;
}
       @media screen and (max-width: 1024px) {
      .header .top h1 {
    font-size: 1.5rem; 
    }
}
.header .key {
width: 100%;
overflow-x: scroll;
justify-content: start;
padding-left: 4vh;
padding-top: 3vh;
}
.header .key::-webkit-scrollbar {
height: 0;
}
.header .key li {
width: 15vh;
margin: 0vh 2vh;
}
.header .key li p {
width: 15vh;
}


html, body {
overflow-x: hidden !important;
}

img {
transition: 0.5s;
}
a {
transition: 0.5s;
}

html, body {
overflow-x: hidden;
}


.ev-card {
    background: linear-gradient(to bottom, #32261b, #1a0f07);
    border-radius: 10px;
    padding: 40px 10px;
    width: 570px;
    text-align: center;
    position: relative;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}
.ev-card:hover {
    transform: translateY(-5px);
}
  .ev-card img {
    width: 200px;
    height: auto;
    margin: 70px 5px 5px 5px;
}

  .ev-card-container {
    display: flex
;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 1200px;

}
  .ev-top {
    background-color: #1c150f;
    color: #fff;
    font-size: 18px;

    padding: 10px 0px;
    border-radius: 10px 10px 0 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
  .ev-top .ev-title {
  color: #e9c392; 
font-family:'Warhaven' !important;
font-size: 28px;"

  }

  .page__title {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 6vh;
margin: 0 auto;
position: relative;
z-index: 1;
color: #ede0cb;
text-shadow: 0vh 1vh 2vh rgba(0, 0, 0, 0.3);
width: 1170px;
height: 250px;
        position: relative; width: 100%; aspect-ratio: 16/5; overflow: hidden; margin-bottom: 10px;
}
.page__title_name {
position: absolute;
top: 32%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 5vh;
margin: 0 auto;
color: #ede0cb;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.3));
filter: brightness(1) contrast(1.2) saturate(1) drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.2));
}
.page__title_name2 {
position: absolute;
top: 70%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.2vh;
margin: 0 auto;
color: #fff;
filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 1));
text-align: center;
flex-direction: column;
width: 100%;

}
.page__title_name2 span {
font-size: 3vh;
margin-bottom: 0.3vh;
font-family:'Warhaven' !important;
color:#e9c392;
}
.page__title img {width: 25vh;margin-right: 0vh;filter: drop-shadow(1px 1px 1px black);}
        
   
        
@media screen and (max-width: 1200px) {
.page__title {
height: 150px !important;
}
.page__title_name {
font-size: 3vh !important;
top: 25%;
}
.page__title_name2 {
font-size: 1.5vh !important;
}
.page__title img {
width: 10vh !important;
}
}