body {
  background-color: #fffef1;
}
.navbar {
  background-color: #fffef1; 
}
.navbar-nav .nav-link {
  color: #1f1f1f;
}
.navbar-toggler {
  color: #1f1f1f;
}
@media screen and (min-width: 991px) and (max-width: 1399px) {
  .contactme {
    display: none;
  }
}

/* Show below 990px and above 1400px */
@media screen and (max-width: 990px), (min-width: 1400px) {
  .contactme {
    display: block;
  }
}
#brand {
  color: #1f1f1f;
}
.vending-machine-image {
    width: auto;
    height: 800px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px; 
}
.modal-header {
  background-color: #38B6FF;
  color: #fff;
  padding: 16px;
  border-radius: 4px 4px 0 0;
}

.modal-body {
  padding: 16px;
  background-color: #f9f9f9;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
}

.section {
  flex-basis: 100%;
  margin-top: 24px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: calc(50% - 12px);
}

.item {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.2;
  display: flex;
  align-items: center;
}

.item:before {
  content: '•';
  margin-right: 8px;
}

@media (max-width: 768px) {
  .modal-body {
    flex-direction: column;
    align-items: center;
  }

  .item-list {
    width: 100%;
  }
}

.modal-footer {
  background-color: #f9f9f9;
  color: #fff;
  padding: 16px;
  border-radius: 4px 4px 0 0;
}

#close-modal {
  background-color: #38B6FF;
  color: #fff;
  border: 2px solid #38B6FF;
  transition: all 0.3s ease-in-out;
}

#close-modal:hover {
  background-color: #fff;
  color: #38B6FF;
}

.btn {
  background-color: #002F69;
  border: 2px solid #1f1f1f;
  color: #fff;
}
#accordionFlushExample {
  background-color: #1f1f1f;
  color: #fff;
}
#flush-collapseOne {
  background-color: #1f1f1f;
}
.accordion-button {
  background-color: #1f1f1f;
}
.rounded {
  border-radius: 10px; 
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.accordion-button:not(.collapsed) {
    color: var(--mdb-accordion-active-color);
    background-color: #1f1f1f !important;
    box-shadow: inset 0 calc(var(--mdb-accordion-border-width)*-1) 0 var(--mdb-accordion-border-color);
}
.accordion-item {
    color: #3E8DE3 !important;
    background-color: var(--mdb-accordion-bg);
    border: var(--mdb-accordion-border-width) solid var(--mdb-accordion-border-color);
}
.logo {
  width: 175px; /* Set the width and height of the logo */
  height: 175px;
  background-image: url("../img/VG_Icon_Blank2.png"); /* Set the logo image as background */
  background-size: cover; /* Scale the image to cover the element */
  margin-left: 50px;
  margin-bottom: 50px;
}

/* Use flexbox to center the heading vertically */
.d-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* Set the height of the container to 100% */
}

/* Use media queries to change the layout of the logo and title when the page is collapsed or the viewport is smaller */
@media screen and (max-width: 576px) {
  .logo {
    display: block; /* Display the logo as a block element */
    margin: 0 auto; /* Center the logo horizontally */
  }
  
  .d-flex {
    flex-direction: column; /* Stack the logo above the title */
    align-items: center; /* Center both the logo and title horizontally */
  }
}
.colour {
  color: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 10px; 
  background-image: url("../img/header_1.jpg"); /* Set the unfocused background image */
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h1 {
  font-size: 48px;
  text-shadow: 2px 2px 0 #38B6FF, -2px -2px 0 #38B6FF, 2px -2px 0 #fff, -2px 2px 0 #38B6FF;
}
.navbar-nav .nav-item .nav-link.active {
  font-size: 20px;
  color: black;
  font-weight: bold;
}