:root {
	--primary-color: rgb(100, 200, 140);
 --secondary-color: rgb(23, 53, 53);
  --accent1-color: rgb(125, 225, 227);
	--accent2-color: rgb(105, 222, 193);
	--accent3-color: rgb(12, 22, 21);
}



@media (min-width: 1000px) {
    .nav-links {
        display: flex;
        align-items: center;
    }


    header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: white;
        box-shadow: 0 0 20px rgba(12, 22, 21, 0.8);
        width: 100%;
        position: fixed;  /* Fix header position */
        top: 0;
        left: 0;
        z-index: 1000;
    }



    /*----------- NAVIGATION --------------*/


nav {
    background-color: white;
    font-size: 1rem; /* Font size for navigation */
}

nav ul {
    display: flex; /* Horizontal layout for nav items */
}



nav a.active-menu-link {
    text-decoration: underline; /* Underline for active link */
    text-underline-offset: 5px; /* Offset for underline */
    text-decoration-thickness: 1px; /* Thickness for underline */
}

  
  /* Navigation Links */
  
  .navigation-links a {
    list-style-type: none; /* Removing bullet points */
    display: flex; /* Align items in a row */
    justify-content: center; /* Center the items */
    text-decoration: none; /* Remove underline */
    font-weight: 700;
    color: rgb(23, 53, 53);
    transition: background-color 0.3s, color 0.3s;
  }
  
  /* Hover Effects */
  .navigation-links a:hover {
    color: rgb(41, 100, 65);
  }
  


/*----------- MAIN --------------*/



/*----------- HERO SECTION FOR LARGE SCREENS --------------*/


.hero-container {
    width: 100%;
    margin: 0 auto;
    max-width: 1200px;
}

.hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5em 10em;
    
    color: #333;
}

.hero-text {
    max-width: 50%;
    text-align: left;
}

h2 {
    font-size: 2rem;
    font-weight: bold;
    margin: 20px 0;
    color: rgb(23, 53, 53);
}

p {
    font-size: .9rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #555;
}

.hero-btn {
    display: inline-block;
    padding: 15px 30px;
    background-color: rgb(23, 53, 53);
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.hero-btn:hover {
    background-color: rgb(83, 167, 117);
}

.hero-image {
    max-width: 45%;
    height: auto;
    border-radius: 10px;
}





/*----------- WEATHER CARD --------------*/


.main-container {
    width: 100%; /* Same as .weather-container */
    margin: 0 auto; /* Centers the container */
    background-color: #f0f4f8;
    padding: 2em 0;
}

h1 {
    margin: 1em 0; /* Remove auto centering */
    padding-left: 0; /* Ensure no extra padding */
    color: rgb(23, 53, 53);
    font-size: 1.8rem;
    text-align: left; /* Align text to the left */
}

.weather-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 80%;
    gap: 1em;
    margin: 0 auto; /* Centers the container horizontally */
    max-width: 1200px;
}

.card-events {
    border: 1px solid rgb(12, 22, 21);
    background-color: rgba(100, 200, 140, 0.4); /* Fix rgba color format */
    border-radius: 10px;
    text-align: left;
    width: 50%;
    height: 300px;
    margin: 2em 0; /* Center margin adjustments */
}

.card-events h2 {
    background-color: rgb(23, 53, 53);
    color: #ffff;
    border-radius: 10px 10px 0 0;
    padding: .4em .6em;
    margin: 0 0 1em 0;
    font-weight: 400;
    font-size: 1.4rem;
}

.card-events h3,
.card-events p {
    margin: 1em;
}

.card-weather {
    border: 1px solid rgb(12, 22, 21);
    background-color: rgba(100, 200, 140, 0.4);
    border-radius: 10px;
    text-align: center;
    width: 25%; /* Adjusted for consistent layout */
    height: 300px;
    margin: 2em 0; /* Same margin as other cards */
}

.card-weather h2 {
    background-color: rgb(23, 53, 53);
    color: #ffff;
    border-radius: 10px 10px 0 0;
    padding: .4em;
    margin: 0 0 1em 0;
    font-weight: 400;
    font-size: 1.4rem;
}

.card-weather h3,
.card-weather #description,
.card-weather #temperature {
    margin: auto 0;
}

.card-forecast {
    border: 1px solid rgb(12, 22, 21);
    background-color: rgba(100, 200, 140, 0.4);
    border-radius: 10px;
    text-align: left;
    width: 25%; /* Adjusted for consistent layout */
    height: 300px;
    margin: 2em 0; /* Same margin as other cards */
}

.card-forecast h2 {
    background-color: rgb(23, 53, 53);
    color: #ffff;
    border-radius: 10px 10px 0 0;
    padding: .4em .6em;
    margin: 0;
    font-weight: 400;
    font-size: 1.4rem;
}

.card-forecast h3,
.card-forecast p {
    margin: 1em;
    text-transform: capitalize;
    color: rgb(23, 53, 53);
}


/*----------- DIRECTORY SECTION --------------*/


h1 {
    text-align: center;
    font-size: 2rem;
    margin: 4em 0 0 0;
    color: rgb(23, 53, 53);
}

#directory-container.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Adjust the size as needed */
    gap: 1rem; /* Space between grid items */
}

#directory-container.list {
    display: block; /* Stack items vertically */
}


#directory-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px; /* space between the cards */
    max-width: 1200px; /* you can adjust this if needed */
    margin: 0 auto; /* center the grid */
    padding: 20px;
}



.menu {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.menu button {
    background-color: rgb(23, 53, 53);
    border: 1px solid var(--primary-color);
    color: rgb(100, 200, 140);
    padding: .8rem 3rem;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.menu button:hover {
    background-color: transparent; /* Background color on hover */
    color: var(--primary-color); /* Text color on hover */
}


/* For smaller screens, adjust the grid layout */
@media (max-width: 1000px) {
    #directory-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 660px) {
    #directory-container {
        grid-template-columns: 1fr; /* 1 column on small screens */
        justify-items: center;
    }
}

/*----------- SPOTLIGHT SECTION (LARGE SCREENS) --------------*/

#spotlight-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.spotlight-card {
    border: 1px solid var(--accent2-color);
    border-radius: 20px;
    padding: 2rem;
    margin: 1rem 0;
    background-color: white;
    box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.spotlight-card img {
    display: block;
    margin-bottom: 1rem;
    width: 100px;
}

.spotlight-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.spotlight-card p {
    margin: 0.8rem 0;
    font-size: 1rem;
}

/* Adjust grid layout for smaller screens */
@media (max-width: 1000px) {
    #spotlight-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (max-width: 660px) {
    #spotlight-container {
        grid-template-columns: 1fr; /* 1 column */
        justify-items: center;
    }

    .spotlight-card {
        text-align: center; /* Center text for smaller screens */
    }

    .spotlight-card img {
        margin: 0 auto; /* Center the image on smaller screens */
    }
}


/*----------- FORM --------------*/


.form-container {
    display: flex;
    flex-direction: column;
    max-width: 500px;
    margin: 2em auto 2em 30%;
    border: 1px solid var(--primary-color);
    color: rgb(100, 200, 140);
    padding: 2em 4em;
    border-radius: 45px;
    box-shadow: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.form-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


.designOne {
    margin: 1em auto;
}
  
  form {
      margin: 1rem auto;
  }
    
      label {
        display: block;
        font-size: .8rem;
        color: rgb(23, 53, 53);
        padding-top: .2rem;
      }

      h3 {
        font-size: .9rem;
        color: rgb(23, 53, 53);
        margin: 1.5rem 0 .2rem 0;
      }
    
      input[type=text],
      input[type=tel],
      input[type=date],
      input[type=email],
      textarea[name=description],
      select {
        display: block;
        margin: .1rem 0 1rem 0 ;
        padding: .3rem;
        border: 1px solid #999;
        border-radius: 4px;
        border-left-width: 5px;
        border-left-color:#555;
        font-size: 1rem;
        color: #3D405B;
        width: 250px;
      }
    
      input:required {border-left-color: #ec6060;}
      input:focus {border-left-color: rgb(23, 53, 53); outline:none;}
      input:required:valid{border-left-color: rgb(100, 200, 140);}
    
      input[type=submit] {
        border: none;
        text-align: center;
        background-color: rgb(100, 200, 140);
        color: rgb(23, 53, 53);
        padding: .75rem 1.5rem;
        margin: 2rem 0;
        font-size: 1.2rem;
        -webkit-appearance: none;
        appearance: none;
      }

      input[type=submit]:hover {
        background-color: rgb(23, 53, 53);
        color: rgb(100, 200, 140);
        cursor: pointer;
      }



    input:-webkit-autofill {
      -webkit-text-fill-color: #999;
    }
    
    #results {
      background-color: #F4F1DE;
      padding: 2em 4em;
      border: 1px solid rgb(23, 53, 53);
      border-radius: 6px;
      width: 800px;
      margin: 0 auto 2em auto;
    }

    .application-title {
        text-align: center;
        font-size: 1.6rem;
        margin: 2em auto 1em auto;
        color: rgb(23, 53, 53);
    }

    

/* JOIN layout */

.join-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 2em;
    align-items: flex-start;
}

.join-title {
    grid-column: 1 / 2;
    text-align: center;
    margin: 4em 0 1em 0;
}

.join-layout h2 {
    text-align: center;
    margin-bottom: 0;
    color: rgb(71, 142, 100);
    font-size: 1.6rem;
}

.form-container {
    grid-column: 1 / 2; /* Form takes the left side */
    margin-bottom: 2em;
}

.membership-container {
    display: flex; /* or grid */
    flex-wrap: wrap;
    gap: 1em; /* Adjust as needed */
    max-width: 80%;
    margin: 2em 30% 2em auto;
}

.membership-container {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    color: rgb(71, 142, 100);
    font-size: 1.6rem;
}

.membership-card {
    border: 1px solid rgb(23, 53, 53);
    border-radius: 20px;
    padding: .5em;
    background-color: rgba(100, 200, 140, 0.2);
    text-align: center;
    width: 80%;
}



.membership-card p {
    font-size: 1.2rem;
    color: var(--secondary-color);
    margin: .5em 0;
}


/* Membership card animation */
.membership-card {
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Start below the viewport */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition */
    transition: transform 0.3s ease-in-out, box-shadow 0.2s ease-in-out;
}

.membership-card.in-view {
    opacity: 1;
    transform: translateY(0); /* Move to the original position */
}

.membership-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Modal Styles */
.modal {
    border: 1px solid var(--secondary-color);
    border-radius: 10px;
    padding: 20px;
    max-width: 400px;
    margin: 4em auto;
}

.modal h3 {
    margin: 1em 0;
}

.modal p {
    font-size: .9rem;
}



/*----------- DISCOVERY PAGE --------------*/


.discovery-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    width: 100%;
    margin: 0 auto;
    background-color: #f0f4f8;
    padding: 2em 0;
    
}



h1 {
    margin: 1em 0; /* Remove auto centering */
    padding-left: 0; /* Ensure no extra padding */
    color: rgb(23, 53, 53);
    font-size: 1.8rem;
    text-align: left;
}

.discovery-cards-container {
    width: 80%;
    margin: 10em auto 2em 50%;
}

.discovery-cards-container h1 {
    width: 80%;
    margin: 0 auto;
}

.discovery-events {
    border: 1px solid rgb(12, 22, 21);
    background-color: rgba(100, 200, 140, 0.4); /* Fix rgba color format */
    border-radius: 10px;
    text-align: left;
    width: 80%;
    height: 200px;
    margin: 2em auto;
}

.discovery-events h2 {
    background-color: rgb(23, 53, 53);
    color: #ffff;
    border-radius: 10px 10px 0 0;
    padding: .4em .6em;
    margin: 0 0 1em 0;
    font-weight: 400;
    font-size: 1.4rem;
}

.discovery-events h3 {
    margin: 1em;
    font-size: 1.2rem;
    color: rgb(23, 53, 53);
}

.discovery-events p {
    margin: .5em 1.4em;
    color: rgb(23, 53, 53);
}

.discovery-webinars {
    border: 1px solid rgb(12, 22, 21);
    background-color: rgba(100, 200, 140, 0.4);
    border-radius: 10px;
    text-align: left;
    width: 80%;
    height: auto;
    margin: 2em auto;
    padding-bottom: 2em;
}

.discovery-webinars h2 {
    background-color: rgb(23, 53, 53);
    color: #ffff;
    border-radius: 10px 10px 0 0;
    padding: .4em;
    margin: 0 0 1em 0;
    font-weight: 400;
    font-size: 1.4rem;
}

.discovery-webinars h3 {
    margin: 1em;
    font-size: 1.2rem;
    color: rgb(23, 53, 53);
}

.discovery-webinars p {
    margin: .5em 1.4em;
    color: rgb(23, 53, 53);
}

.discovery-statistics {
    border: 1px solid rgb(12, 22, 21);
    background-color: rgba(100, 200, 140, 0.4);
    border-radius: 10px;
    text-align: left;
    width: 80%;
    height: auto;
    margin: 2em auto;
    padding-bottom: 2em;
}

.discovery-statistics h2 {
    background-color: rgb(23, 53, 53);
    color: #ffff;
    border-radius: 10px 10px 0 0;
    padding: .4em .6em;
    margin: 0;
    font-weight: 400;
    font-size: 1.4rem;
}

.discovery-statistics h3 {
    margin: 1em;
    font-size: 1.2rem;
    color: rgb(23, 53, 53);
}

.discovery-statistics p {
    margin: .5em 1.4em;
    color: rgb(23, 53, 53);
}


/*----------- PHOTOS DISCOVERY SECTION (LARGE SCREENS) --------------*/

/* Photos Section */
.photos-div {
    margin: 8em auto 2em auto;
}

#photos-container {
    display: grid;
    width: 600px;
    gap: 4em;
    
}

/* Photo card animation */
.photo-card {
    opacity: 0; /* Initially hidden */
    transform: translateY(50px); /* Start below the viewport */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.photo-card.in-view {
    opacity: 1;
    transform: translateY(0); /* Move to the original position */
}

#photos-container img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease-in-out;
    margin: 0 auto;
}

#photos-container img:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transform: scale(1.05); /* Slightly zoom the image on hover */
}


#photos-container h3 {
    font-size: 2rem;
    color: rgb(23, 53, 53);
}

#photos-container p {
    font-size: 1.2rem;
    color: rgb(23, 53, 53);
}


}