@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;
  }
}
@media screen and (min-width: 576px) and (max-width: 949px) {
  .fixme {
    display: none;
  }
}

/* Show below 990px and above 1400px */
@media screen and (max-width: 575px), (min-width: 950px) {
  .fixme {
    display: block;
  }
}
.side-photo img {
  height: 100%;
  object-fit: cover;
}
body {
  background-color: #fffef1;
}
.section {
  padding: 30px;
  background-color: #fffef1;
  color: #1f1f1f;
}
#btn1 {
  background-color: #2B42FF;
  border: 2px solid #1f1f1f;
  color: #000000;
}
#btn2 {
  background-color: #276FE8;
  border: 2px solid #1f1f1f;
  color: #000000;
}
#btn3 {
  background-color: #38B6FF;
  border: 2px solid #1f1f1f;
  color: #000000;
}
#btn4 {
  background-color: #27D4E8;
  border: 2px solid #1f1f1f;
  color: #000000;
}
.navbar {
  background-color: #fffef1; 
}
.navbar-nav .nav-link {
  color: #1f1f1f;
}
.navbar-toggler {
  color: #1f1f1f;
}
#brand {
  color: #1f1f1f;
}

.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;
}

#title1 {
  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;
}
#title3 {
  margin-left: 2rem !important;
  font-size: 40px;
}
.divider {
  background-color: #1f1f1f;
  color: #fffef1;
}
.modal-dialog {
  max-width: none;
}