:root{
    --primary-color:#003366;
    --secondary-Color:#f0c000;
    --accent:#28a745;
    --Background:#ffffff;
    --Text:	#222222;

}
@media screen and (min-width:768px){
    header{
        flex-direction: row;
        justify-content: space-between;
    }
    header .header-top{
    display: flex;
    width: 50%;
}
  .logo img{
    width: 100px;
    height: 100px;
    object-fit: contain;
}
   .logo .logo-text{
        padding: 1rem;
    }
    .logo .logo-text p{
        padding: 0%;
        margin: 0%;
        color: var(--secondary-Color);
        font-weight: 500;
        font-size: 1rem
    }
    .logo .logo-text h1{
        padding: 0%;
        margin-bottom: 0%;
        font-size: 2rem;
    }
    
    nav{
    width: 50%;
    padding: 1rem;

   }
    nav ul{
        display: flex;
        flex-direction: row;
        margin-top: 1rem;
        padding-top: 3rem;
        align-items: normal;
    }
    .active{
       border-bottom: 4px solid var(--accent);
       transition: 1s;
    } 
    ul li a:hover{
    border: none;
    }
    main{
        margin: 0rem 5rem;
    }
    /* Home Page Design */
    .hero{
       background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/large-hero-img.webp');
       background-repeat: no-repeat;
       min-height: 500px;
       height: 100%;
    }

    .hero h1{
       margin-top: 4rem;
       font-size: 2.5rem;
    }

    main .home-content{
        flex-direction: row;
    }
    .home-content > section{
        flex: 1;
        flex-direction: column;
        display: flex;
    }

    main .home-content .events{
        flex: 2;
    }
    main .home-content .current-weather{
        flex: 1;
    }
    .current-weather figure #weather-icon{
        width: 34%;
        margin-top: 0rem;
        align-self: flex-start;
    }
    main .home-content .weather-forecast{
        flex: 1;
    }
    main .home-content .weather-forecast p{
        margin: 1rem 2rem ;
        font-size: 1.5rem;
    }
    main .company-cards{
      flex-direction: row;
    }

/* End Home page Design */

/* Join Page Design */
.join-body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.register-page{
    padding: 1rem;
    margin: 1.5rem;
    background-color: var(--Background);
    border-radius: 8%;
    flex-direction: row;
    gap: 1rem;
    align-items: stretch;
    box-shadow: 0px 0px 2rem 5px rgba(0 ,0 ,0 ,0.3);
}
.register-page form, .register-page .membership-level{
    flex: 1;
} 
.register-page form{
    background-color: var(--Background);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    margin: 2rem 1rem;
    /*border-radius: 25px;
    box-shadow: 1px 1px .2rem rgba(0 0 0 / 50%);*/
    width: 80%;
}
.register-page .membership-level{
    align-self: start;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8),  rgba(0, 0, 0, 0.8)), url('../images/membership-level.webp');
    background-position: center;
    background-size: cover;
    border-radius: 25px;
    min-height: 950px ;
}
.register-page .membership-level h2{
    color: var(--Background);
    text-align: center;
}
.register-page .membership-level .level{
    width: 80%;
    justify-self: center;
    opacity: 0.9;
    animation: slideIn 2s linear 1 normal none;
}

@keyframes slideIn{
    from {
        transform: translateY(-100%);
        opacity: 0.5;
    }
    to{
        transform: translateY(0);
        opacity: 0.9;
    }
}

dialog {
    max-width: 600px;
    top: 50px;
    left: 50px;
}

/*End Join Page Design */

/* Thankyou page Design */
.thankyou-info{
    display: flex;
    margin: 3rem;
    margin: 0%;
    text-align: left;
    min-height: 100vh;
}
.thankyou-info .overlay-content {
  max-width: 45%;
  margin-left: auto; /* push content away from the image text */
  padding: 2rem;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  border-radius: 15px;
}

.overlay-content h1 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--Background);
}

.details {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  margin-top: 1.5rem;
}

.details .left,
.details .right {
  flex: 1;
}

.details h2 {
  color: gold;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}
.back-btn a{
    width: 10%;
    align-self: center;
    justify-self: center;
    padding: 0.5rem 1rem;
    background: var(--secondary-color);
    border-radius: 5px;
    color: var(--Text);
}

/* End Thankyou page Design */

/* buttons designs */
    .menu-button{
        display: none;
    }
    .hero .cta{
    background: var(--primary-color);
    width:6rem;
    padding:1rem 2rem;
}

   .menu{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
    gap: 1rem;
   }
    .cards{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
        padding: 1rem;
    }
    .cards .card h2{
        font-size: 1.5rem;
    }
    footer{
        flex-direction: row;
        justify-content: space-evenly;
        align-items: flex-start;
        text-align: left;

    }
    footer div{
        flex: 1;
        margin: 0 1rem;
    }

    
}