body { padding-top: 56px; }
.left-aligned { margin-left: auto; }
.bg-dark { background-color: #343a40 !important; }
.bg-hero { background-color: #45b06cff; }

/* 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: 1.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 a { color: white; font-weight: bold; text-decoration: none; }
footer a:hover { color: white; text-decoration: underline; }
  
/* Image background ONLY for the homepage */
.bg-hero.homepage-hero {
    background-image: url("https://static.igem.wiki/teams/5871/wiki-assets/igem-group-photo.webp");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
    min-height: 600px; /* Adjust this value to control how much is visible */
    padding-top: 8rem; /* Optional: Adjust top padding to center text vertically */
    padding-bottom: 8rem; /* Optional: Adjust bottom padding */
  }

  /* Style the homepage title */
.bg-hero.homepage-hero .container h1 {
    color: white; /* White text */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Dark shadow behind text */
    text-align: center;
  }

/* Custom menu background and text color */
.custom-menu-bg {
    background-color: #DCF3F8 !important; /* Menu background */
  }
  
  /* Menu text color (links and brand) */
  .navbar-brand, .nav-link, .dropdown-item {
    color: #565252 !important; /* Menu text */
  }
  
  /* Dropdown menu background (matches menu) */
  .dropdown-menu {
    background-color: #DCF3F8 !important;
  }
  
  /* Footer background and text color */
  .custom-footer-bg {
    background-color: #DCF3F8 !important; /* Footer background */
    color: #565252 !important; /* Footer text */
    text-align: center;
  }
  
  /* Footer link color (overrides existing footer link style) */
  .custom-footer-bg a {
    color: #565252 !important;
  }
  
  .custom-footer-bg a:hover {
    color: #565252 !important; /* Keep hover color consistent */
    text-decoration: underline;
  }

  /*Changing layout header's background color*/
  /* Change background of the header containing title and lead */
header.bg-hero {
  background-color: #565252 !important; /* Your desired background color */
}

/* Optional: Adjust text color for better readability */
header.bg-hero h1,  /* Targets the title block */
header.bg-hero .lead {  /* Targets the lead block */
  color: white !important; /* White text on dark background */
}

/* adding new font*/
/* Define Quicksand font */
@font-face {
  font-family: 'Quicksand';
  src: url('https://static.igem.wiki/teams/5871/wiki-assets/fonts/quicksand-book.otf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Quicksand';
  src: url('https://static.igem.wiki/teams/5871/wiki-assets/fonts/quicksand-dash.otf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

/* Optional: Add italic or other variants if needed */
@font-face {
  font-family: 'Quicksand';
  src: url('https://static.igem.wiki/teams/5871/wiki-assets/fonts/quicksand-book-oblique.otf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

/* Apply Quicksand to all text */
body, h1, h2, h3, h4, p, ul, li, a {
  font-family: 'Quicksand', sans-serif !important;
}

/*Adding a horizontal scroll carousel*/

/* Horizontal Scroll Carousel */
.image-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 1rem 0;
}

.image-carousel img {
  flex: 0 0 auto;
  width: 300px; /* Adjust image width */
  height: 200px; /* Adjust image height */
  object-fit: cover;
  border-radius: 8px;
  scroll-snap-align: start;
}

/* Hide scrollbar (optional) */
.image-carousel::-webkit-scrollbar {
  display: none;
}
.image-carousel {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Carousel Arrows */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
}

.carousel-arrow.prev {
  left: 10px;
}

.carousel-arrow.next {
  right: 10px;
}

/* IHP Page Styling */
.accordion-button {
    background-color: #DCF3F8 !important;
    color: #565252 !important;
}

/* Optional: Style for the active (expanded) state to match */
.accordion-button:not(.collapsed) {
    background-color: #DCF3F8 !important;
    color: #565252 !important;
    box-shadow: none; /* Removes default blue glow on active button */
}

/* Mobile menu toggle button styling */
.navbar-toggler {
    border-color: #565252 !important;
}