html{
  text-align: center;
  font-size: 150%;
  font-family: Gothic,CenturyGothic,AppleGothic,sans-serif;
  height: 100%;
}
body{
  background-color: #dbd7d000 !important;
}
.body{
  max-height: auto;
  height: auto;
}
.navbar{
  background-color: rgb(0, 0, 0,0.9);
}
.mr-auto .nav-link{
  color: white !important;
}
.main-action .nav-link{
  border: 1px solid white !important;
  color: black !important;
  transition-duration: 0.5s;
  background-color: white !important;

}
.main-action:hover,.main-action .nav-link:hover {
  background-color: black !important;
  color: white !important;
}
.mr-auto a:hover{
  text-decoration: underline !important;

}
.banner{
  width: 100%;
  height: 500px !important;
}
.banner img{
  float: right;
  object-fit: cover;
  width: 30%;
  padding-top: 50px;
  padding-right: 50px;
  border-radius: 10%;
}

.responsive{
  max-width: 100% !important;
  height: auto;
}
.center{
  height: 80px;
  position: relative;
}
.center button{
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, 0%);
  color: black !important;
  border-color: black !important;
  height: 150%;

}

.center #join{
  transform: translate(-50%, -400%);
}
.center a{
  color: black;
}

 button:hover a{
  border-color: white !important;
  background-color: black !important;
  color: white !important;
  text-decoration: none;
  transition: 1s;

}
button:hover{
  border-color: white !important;
  background-color: black !important;
}
.LR{
  width: 50%;
  transform: translate(50%,0%);
}
.photo_gallery {
    display: flex;
    width: 100%;
}
.photo_gallery div {
    display: inline-block;

}

.photo_gallery img{
        object-position: center;
        object-fit: cover;
        height:100px;
        width: auto;
        border-radius: 10%;
        display: inline-block;
        justify-content: space-evenly;
        margin: 20px;
    }
.edit{
  height:200px;
  width: auto;
  border-radius: 10%;
  margin-top:20px;
}

/* Add this CSS to your main.css file */
.btn-black {
  background-color: #000 !important; /* Set the background color to black */
  color: #fff !important; /* Set the text color to white */
}

.btn-black:hover {
  background-color: #333 !important; /* Darker shade on hover */
}

/* Add this CSS class for the slightly zoomed-in rectangular image with rounded corners */
.rounded-rectangle {
  object-fit: contain; /* Adjusted object-fit property */
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* Custom styling for the Register Household button */
.register-btn {
  background-color: #333 !important; /* Dark background color */
  color: #fff !important; /* White text color */
  padding: 8px 20px !important; /* Adjust padding for button size */
  border-radius: 5px !important; /* Rounded corners */
  transition-duration: 0.5s !important;
  text-decoration: none !important; /* Remove underlines */
}

.register-btn:hover {
  background-color: #000 !important; /* Darker background color on hover */
}



/* Add this to your CSS file */
@media (max-width: 767px) {
  /* Adjust the font size for smaller screens */
  .front, .front h1 {
      font-size: 40px; /* You can adjust this as needed */
  }

  .jumbotron p {
      font-size: 20px; /* You can adjust this as needed */
  }

  .feature-icon {
    font-size: 24px; /* You can adjust this as needed */
    margin-bottom: 10px; /* Add some spacing between icons and text */
}

h3 {
    font-size: 16px; /* You can adjust this as needed */
}

p {
    font-size: 14px; /* You can adjust this as needed */
}

/* Hide the specific text on mobile */
.hide-on-mobile {
  display: none;
}

.photo_gallery img{
  object-position: center;
  object-fit: cover;
  height:60px;
  width: auto;
  border-radius: 10%;
  display: inline-block;
  justify-content: space-evenly;
  margin: 10px;
}

.edit{
  height:120px;
  width: auto;
  border-radius: 10%;
  display: inline-block;
  transform: translate(210%,0%);
  margin-top:10px;
}

.banner{
  width: 100%;
  height: 250px !important;
}
.banner img{
  float: right;
  object-fit: cover;
  width: 30%;
  padding-top: 20px;
  padding-right: 20px;
  border-radius: 10%;
}

.center{
  height: 40px;
  position: relative;
}
}

/* Styles for image suggestions */
.image-suggestions-wrapper {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 20px 0;
  position: relative;
}


/* Styles for image grid */
.suggest_gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;  /* Center the images */
}

.suggest_gallery img {
  flex: 0 1 calc(25% - 20px);  /* 4 images per row, adjust if you want more or fewer */
  max-width: calc(25% - 20px);
}