body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #FFFFFF !important; }
.bg-hero { background-color: #004654; }

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #e9ecef; border-left-width:.25rem; border-radius:.25rem }
.bd-callout h4 { margin-bottom:.25rem }
.bd-callout p:last-child { margin-bottom:0 }
.bd-callout code { border-radius:.25rem }
.bd-callout+.bd-callout { margin-top:-.25rem }
.bd-callout-info { border-left-color:#5bc0de }
.bd-callout-warning { border-left-color:#f0ad4e }
.bd-callout-danger { border-left-color:#d9534f }

/* footer */
footer { 
    background-image: url("https://static.igem.wiki/teams/5423/largest-waves.png"); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    color: white; 
    padding: 2rem 0; 
    height: 40vh; 
    min-height: 700px; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
}
footer a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }


.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .dropdown-item {
    color: #004654 !important; 
}


.navbar-nav .nav-item .dropdown-toggle::after {
    display: none;
}


.dropdown-menu {
    display: none; 
    position: absolute;
    top: 100%; 
    left: 0;
    z-index: 1000; 
}


.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease;
}


.navbar-nav .nav-item .nav-link {
    text-decoration: none;
}


.navbar-nav .nav-item.active .nav-link {
    color: #004654 !important; 
}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #002c39 !important; 
}

.nav-pills .nav-link {
    background-color: #f8f9fa; 
    color: #002c39; 
  }
  
  .nav-pills .nav-link.active {
    background-color: #002c39; 
    color: #fff; 
  }
  
  .nav-pills .nav-link:hover {
    background-color: #e9ecef; 
    color: #00404f; 
  }

/* Ensure the accordion button has the correct styling when collapsed */
.accordion-button {
    position: relative; 
    color: #002c39; 
    background-color: #fff; 
    border: 1px solid #002c39; 
}

/* Hide the default accordion arrow */
.accordion-button::after {
    display: none; 
}

/* Add custom arrows using pseudo-elements */
.accordion-button::before {
    content: "\f078"; 
    font-family: "Font Awesome 6 Free"; 
    font-weight: 900; 
    position: absolute;
    right: 1rem; 
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.25rem; 
}

/* Change the arrow to up when expanded */
.accordion-button:not(.collapsed)::before {
    content: "\f077"; 
}

/* Ensure the accordion button has the correct styling when expanded */
.accordion-button:not(.collapsed) {
    color: #004654; 
    background-color: #e9ecef; 
}