@media (max-width:1440px){

.nav a{
    font-size: 1.8rem;
}
.HeroText{
    margin-top: 15vw;
    width: 90vw;
    margin-left:3vw ;
}
.HeroText2{
    margin-top: 5vw;
    margin-left: 16vw;
}
.HeroText h1, .HeroText2 h2{
    font-size: 2rem;
    margin-bottom: 1vw;
}
.HeroText h1{
    font-size: 3.5rem;
}
.HeroText p, .HeroText2 p{
    font-size:1.3rem;
}
.buttons{
    margin-top: 2vw;
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin-bottom: 1vw;
    margin-left: 40vw;
}
.buttons a{
    font-size: 1.8rem;
    margin-top: 4vw;
}
#userUI{
    width: 80vw;
    margin-left: 10vw;
    margin-top: 5vw;
}

.userEm{
    font-size: 2rem;
}

#userEmailMenu{
    margin-left: 6vw;
}
#logoutBtnMenu{
    margin-left: 15vw;
}
.logout{
    font-size: 0.9vw;
    width: 15vw;
    font-size: 1.5rem;
    margin-left: 0vw;
}
.footer>p{
    font-size: 1.5rem;
}
.footer>p>a{
    font-weight: 900;
}
/* Events */
#cards{
    margin-top: 5vw;
    grid-template-columns: repeat(2, 1fr);
}
.card img{
    height: 25vw;
}
.card:hover{
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(0,0,0,0.5);
}
.card h2{
    font-size: 2.5rem;
}
.card a{
    font-size: 1.8rem;
}
/* About US */

.about_Us{
    width: 90%;
    margin-left: 3vw;
    margin-top: 10vw;
    font-size: 1.5rem;
}
.Teams{
    font-size: 3rem;
}
.About_span{
    font-size: 2rem;
}
.mem{
    width: 40vw;
    height: auto;
}

.mem > img{
    width: 40vw;
    height:auto;
}

.mem h2{
    font-size: 2.5rem;
}

.mem p{
    font-size: 1.5rem;
}

.mem a img{
    width: 4vw;
}

/* Contact */
#HeroTextform{
    margin-left: 3vw;
}
#form label{
    font-size: 1.5rem;
}

#form input,
#form select,
#form textarea{
    width: 40vw;
    padding: 1vw;
    font-size: 1.5rem;
}
#SubmitButton{
    margin-top: 2vw;
    font-size: 1.5rem;
}
}


@media (max-width:768px){
#Menu{
    top: 18vw;
}
    .logo{
    height: 15vw;
    margin-left: 5vw;
}
.logo a img {
    height: 10vw;
}

.HeroText,.HeroText2{
    margin-top: 20vw;
    width: 90%;
    margin-left: 3vw;
}
.HeroText2{
    margin-top: 5vw;
}

.HeroText h1, .HeroText2 h2{
    font-size: 1.8rem;
    margin-bottom: 1vw;
     font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
}
.HeroText h1{
    text-align: center;
    font-size: 2.8rem;
}
.HeroText p, .HeroText2 p{
    font-size:1.2rem;
}
.buttons{
   margin-left: 35vw;
}
.buttons a{
    font-size: 1.8rem;
    margin-top: 4vw;
}
#userUI{
    width: 80vw;
    margin-left: 10vw;
}
.userEm{
    font-size: 2rem;
}
#userEmailMenu{
    margin-left: 0vw;
}
#logoutBtnMenu{
    margin-left: 15vw;
    height: auto;
    font-size: 1.5rem;
}
.logout{
    width: 15vw;
    font-size: 1.8rem;
    margin-left: 0vw;
}
.footer>p{
    font-size: 1.5rem;
}
.footer>p>a{
    margin-left: 2rem;
}
#cards{
    margin-top: 5vw;
}
.card img{
    width: 100%;
}
.card h2{
    font-size: 2rem;
}

.card a{
    font-size: 1.5rem;
}
.about_Us{
    width: 90%;
    margin-left: 3vw;
}

.Teams{
    margin-top:5vw;
}
.mem{
    width: 40vw;
    height: auto;
}
.mem > img{
    width: 35vw;
    height:25vh;
}
.mem h2{
    font-size: 2rem;
}
#form label{
    font-size: 1rem;
}

#form input,
#form select,
#form textarea{
    width: 40vw;
}
}

@media (max-width:426px){
#Menu{
    top: 25vw;
}
.HeroText{
    margin-top: 30vw;
}
.HeroText h1{
    font-size: 2.33rem;
}
.logo{
    height: 20vw;
}
.logo a img {
    height: 15vw;
}
.mem{
    width: 90vw;
}
.mem > img{
    width: 80vw;
    height:30vh;
    border-radius: 10px;
    margin-bottom: 0vw;
}

.buttons{
    margin-left: 25vw;
}
.userEm{
    font-size: 1.3rem;
}

#userEmailMenu{
    margin-left: 6vw;
}
#logoutBtnMenu{
    margin-left: 5vw;
    width: auto;
}
.logout{
    width: auto;
    font-size: 1.5rem;
}
.footer>p{
    font-size: 1.1rem;
}
#cards{
    margin-top: 5vw;
    grid-template-columns: repeat(1, 1fr);
}

.card{
    height: auto;
}

.card img{
    height: 60vw;
}
.card h2{
    font-size: 2rem;
}
.about_Us{
    font-size: 1rem;
}
.Teams{
    font-size: 2.4rem;
}
#HeroTextform{
    margin-left: 3vw;
}
#form label{
    font-size: 1.2rem;
}

#form input,
#form select,
#form textarea{
    width: 15rem;
    overflow-x: scroll;
}

#form textarea{
    min-height: 8vw;
}

#SubmitButton{
    margin-top: 5vw;
    width: auto;
}
}