/* Basic reset and responsive styling */
body, h1, h2, form, input, button, textarea {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'monospace';
}

body {
    background-color: #f3f3f3; /* Light grey background for a subtle look */
    color: #333; /* Dark grey color for text for better readability */
}

header {
    background-color: #ff9800; /* Warm orange for a vibrant header */
    color: #fff;
    text-align: center;
    padding: 1rem 0;
}

h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.place-item {
    background-color: #fff; /* White background for content items */
    border: 1px solid #ddd; /* Light grey border */
    margin: 1rem;
    padding: 1rem;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: transform 0.2s; /* Smooth transition for hover effect */
}

.place-item:hover {
    transform: translateY(-5px); /* Slight raise effect on hover */
}

footer {
    background-color: #3f51b5; /* Deep blue color for footer */
    color: #fff;
    padding: 1rem;
    text-align: center;
}

footer form {
    max-width: 600px;
    margin: 2rem auto;
    display: flex;
    flex-direction: column;
}

footer input, footer textarea {
    margin-bottom: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
}

footer button {
    padding: 0.5rem;
    border-radius: 5px;
    cursor: pointer;
    background-color: #f44336; /* Bright red for the submit button */
    color: white;
    border: none;
}


/* Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown Content */
.dropdown-content {
  display: none;
  position: absolute;
  padding: 8px;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Show the dropdown */
.dropdown-content.show {display:block;}


.tag-label {
    /* Example styles */
    display: block;
    margin-left:5px;
    cursor: pointer;
    color: #333; /* Example color */
    font-size: 12px; /* Example font size */
  }
  

  .search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    background-size: cover;
    background-position: center;
    min-height: 100px; /* Adjust based on your design preference */
  }
  
  .search-container select {
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: white;
}
  
  #searchField, #searchQuery {
    margin: 5px;
    padding: 10px;
    font-size: 16px;
    border: 2px solid #ddd; /* Light border */
    border-radius: 5px; /* Rounded corners */
    outline: none; /* Removes the outline */
  }
  
  #searchField:focus, #searchQuery:focus {
    border-color: #007bff; /* Highlight color when focused */
  }
  
  #searchField {
    cursor: pointer;
  }
  
  /* Optional: Responsive adjustments */
  @media (max-width: 600px) {
     .search-container {
      flex-direction: column;
      padding: 10px; /* Adjust padding for the search container */
    } 
  }
  
  #searchQuery::placeholder {
    color: #aaa; /* Lighter text color for the placeholder */
    opacity: 1; /* Fully opaque */
  }
  #searchField, #searchQuery {
    transition: border-color 0.3s ease-in-out;
  }

  #places-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 20px;
    padding: 20px;
    justify-content: center; /* Center grid items horizontally */

  }
  
    
  
  .card {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 10px;
    /* Adjust height as necessary, or remove for auto-height based on content */
    padding: 1rem; /* Padding inside cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    cursor: pointer;
    overflow: hidden;
     transition: all 0.3s ease;
  }

  
  /* Optional: Add styles for the expanded state and transition effects */
  .card-content {
    transition: transform 0.3s ease;
  }
  
  .card:hover .card-content {
    transform: translateY(-5px);
  }
  
  .tag-container {
    display: flex; /* Use flex layout for the tags container */
    flex-wrap: wrap; /* Allow tags to wrap to the next line */
    gap: 5px; /* Add a little space between tags */
    align-items: center; /* Align tags vertically */
    margin-top: 5px; /* Add some space above the tags */
  }
  
  .tag-chip {
    background-color: #007bff; /* Configurable chip background color */
    color: white; /* Text color */
    border-radius: 25px; /* Rounded corners for chip */
    padding: 5px 10px; /* Top/bottom and left/right padding */
    font-size: 0.8em; /* Smaller font size */
    cursor: default; /* Default cursor to indicate non-interactive */
    user-select: none; /* Prevent text selection */
  }
  
  /* Hover effect for tags */
  .tag-chip:hover {
    background-color: #0056b3; /* Darker background on hover */
    color: #fff;
  }

  .always-visible h3, .always-visible .location {
    margin: 10px 0;
}

.expandable-content {
    display: none; /* Hidden by default, shown on click */
}

/* Responsive design: On larger screens, you might choose to display all content by default */
@media (min-width: 768px) {
    .expandable-content {
        display: block; /* Show the expandable content on larger screens by default */
    }
    .expand-collapse-indicator {
        display: none;
    }
}

/* Style for when the card is expanded to indicate active state */
.card.expanded .expandable-content {
    display: block;
}
  

.expand-collapse-indicator {
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
}

/* If using FontAwesome icons, you might want to add specific styles */
.expand-collapse-indicator i {
    color: #007bff; /* Example color */
}


.contact-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    padding: 20px 20px; /* Increase padding for larger content */
    background-color: #72b99c;
    color: white;
    border: none;
    border-radius: 50%; /* Keeps the circular shape */
    cursor: pointer;
    display: inline-flex; /* Allows the button to grow with its content */
    justify-content: center;
    align-items: center;
    font-size: 16px; /* Adjust based on your content */
    white-space: nowrap; /* Prevents the text from wrapping */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}


@media (max-width: 480px) {

    .intro-section {
        padding: 15px; /* Provide more padding */
        text-align: center;
    }

    .intro-section h2 {
        font-size: 1.5rem; /* Adjust heading size for better visibility */
    }

    .intro-section p {
        font-size: 1rem; /* Increase paragraph font size for readability */
        margin: 10px auto; /* Ensure sufficient spacing */
    }

    .search-container {
        margin-top: 20px; /* Ensure there's space between the intro section and search container */
    }
    .contact-button {
        bottom: 10px;
        right: 10px;
        width: 40px;
        height: 40px;
        font-size: 16px; /* Adjust if you're using text/icon inside the button */
    }

  
}

.intro-section {
    background: 'IMG20220211132700.jpg' no-repeat center center/cover;
    color: white; /* Adjust based on your image's color scheme */
    padding: 20px; /* Add padding for spacing */
    text-align: center; /* Center the text */
}

.intro-section h2 {
    margin: 0 0 10px 0; /* Adjust spacing as needed */
    font-size: 2rem; /* Larger font size for the heading */
}

.intro-section p {
    margin: 0 auto; /* Center the paragraph */
    width: 80%; /* Limit the width of the text for readability */
    font-size: 0.75rem; /* Adjust the font size as needed */
}

.intro-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://i.ibb.co/n1MS0sd/sunset-cafe.jpg') no-repeat center center/cover;
}