/* forms.css */

.filter_form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%; /* Full width on smaller screens */
}

.filter_form select, .filter_form button {
  padding: 5px;
  width: 100%; /* Full width on smaller screens */
}

@media (min-width: 600px) {
  .filter_form {
    flex-direction: row; /* Horizontal layout on larger screens */
    max-width: 600px; /* Maximum width for the form on larger screens */
    margin-left: 0; /* Aligning the form to the left */
  }

  .filter_form select, .filter_form input {
    width: auto; /* Auto width on larger screens */
  }
}


.city_container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Changes alignment to the left */
    padding: 20px;
    width: 100%; /* Ensures the container uses full width available */
}

.city_item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers content within each city item */
    margin: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    width: 100%; /* Ensures that city items don't exceed the container's width on mobile */
}

.city_item div {
    margin: 5px;
}

.city_link {
    color: #0275d8;
    text-decoration: none;
    font-size: 18px;
}

.category_h1, .city_container h2 {
    width: 100%; /* Makes headers span the full width of the container */
    text-align: left; /* Centers the text */
    margin: 20px 0; /* Adds vertical spacing */
}

@media (min-width: 768px) {
    .city_container {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .city_item {
        flex: 1 0 30%; /* Adjusts the width of each city item on desktop */
    }
}

@media (max-width: 767px) {
    .city_container {
        flex-direction: column;
    }

    .city_item {
        width: 90%; /* Adjusts city item width on mobile */
    }
}





/* Media query for desktop */
@media (min-width: 768px) { /* Adjust the breakpoint as needed */
  .city_item {
    width: 200px; /* Fixed width on desktop */
    flex: none; /* Override flex-grow */
  }
}



.home_motto {
  background-color:#f7f7f7;
  padding:10px;
  width:100%;
  font-family: "Montserrat","Google Sans","Roboto","Arial";
}

.language-cities-header {
  display: block;
  width: 100%;
}

.home_motto h2 {
  font-size:20px;
}


.city_item:hover {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.5s ease;
}

.city_item img {
  max-width: 100%;
  height: auto;
  border-radius: 2px; /* Optional: if you want rounded corners on images */
  margin-bottom: 5px; /* Added space between image and info */
}

.city_link {
  font-size:17px;
  color:#333540;
  font-weight: 700;
}


.home_h1 {
  color:#050505cc;
  text-align:left;
  font-size:40px;
  font-weight: 1000;
  line-height: 1.2em;
  margin:15px 0 0 0;
  padding:0;
}




.city_link {
  font-size:14px;
  text-decoration: underline;
}

.city_link:hover {
  text-decoration: none;
}



.city_block_buttons {
    text-align: left; /* Center buttons within the div */
    padding: 10px 0 10px 0; /* Add some padding around buttons */
}

.city_block_buttons button {
    background-color: #f7f7f7; /* Green background */
    border:1px solid black !important;
    color: #333; /* White text */
    border: none; /* No border */
    padding: 15px 32px; /* Top and bottom, Left and right padding */
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 5px 2px; /* Space between buttons */
    cursor: pointer;
    border-radius: 1px; /* Rounded corners */
    transition-duration: 0.4s; /* Smooth transition for hover effect */
}

.city_block_buttons button:hover {
    background-color: white; /* White background on hover */
    color: #000; /* Green text on hover */
    border:1px solid #f7f7f7 !important;

}



/* Responsive adjustments */
@media (max-width: 768px) {
  .city_item {
    flex-basis: 100%; /* Each item takes full width on small screens */
  }
}