.container {
    width: 90%;
   margin-left: auto;
   margin-right: auto;
  }

.feature-region {
  background-image: none;
}

 #home-page #feature img {
    object-fit: cover;
    width: 100%;
   }

#search-form.callout-region {
    background-color: #232d4b;
}
.search-box-wrapper {
float: right !important;
}


@media only screen and (max-width: 500px) {
  #home-page #feature img {
    visibility: hidden;
  }
 #home-page #feature {
    background:url("https://canvas.virginia.edu/sites/g/files/jsddwu1056/files/2023-10/Canvas%20Connect%20HP%20Banner%20mobile.png");
    background-repeat:no-repeat;
    background-size: cover;
    background-position: center;
    width:100%;
    height:400px;
  }
}

@media (min-width: 1200px) {
  .header-branding h1 a img {
    height: 150%;
  }

}

}


/* Navigation */

#header-menu {
  gap: 1rem;
}

/* Default styles for smaller screens */
#header-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: max-height 0.3s ease;
  margin-top: 1rem;
}

/* Additional styles for the hamburger icon */
#hamburger-icon {
  display: block;
  cursor: pointer;
  font-size: 2rem;
  color: #232d4b;
  margin-bottom: 1rem;
  margin-left: auto;
  margin-right: 0;
}

/* Hide hamburger icon on larger screens */
@media (min-width: 800px) {
  #hamburger-icon {
    display: none;
  }

  #header-menu {
    display: flex;
    flex-direction: row;
    align-items: center;
    max-height: none;
    transition: none;
    margin-top: 2rem;
    justify-content: flex-end;
  }

#cart,
#help-link,
#user-nav {
  margin: 1rem !important;
}
}

/* hide the inner divs when the screen size is small */
.hidden {
  display: none;
}

.col-xs-12 {
    width: 50%;
}

/* Styles for inner divs */
#cart,
#help-link,
#user-nav {
  margin-left: auto;
  margin-right: 0;
padding-bottom: 0.5rem;
padding-top: 0.5rem;
  width: auto; /* Set width to auto to take up their normal width */
}