/* 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:.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 } */



/*Stuff for particles*/
.pic-box {
    border-radius: 20px;
}


/* The canvas will fill the screen */
canvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

/* GENERAL (Stuff thats annoying to always have to change manually (i.e. list-style-type: none) */

ul { 
    list-style-type: none;
}
/* footer */
footer a { color: white; 
    font-weight: bold; 
    text-decoration: none; 
}
footer a:hover { color: white; 
    text-decoration: underline; 
} 


/* Function for particle */
#particles-js {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: +1; /* Ensure particles are behind the content */
}


nav img {
    max-width: 40%;
}
nav a .fisk {
    color: white;
}




/* DROPDOWN nav */
.dropdown-menu {
    display: none; /* Hide the dropdown menu by default */
    position: absolute; /* Position the dropdown menu below the "Team" button */
    top: 100%; /* Position the dropdown menu below the "Team" button */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
    top: 100%;
    border-radius: 10%;
}


.dropdown-menu li {
    width: 100%; /* Set the width of the dropdown menu items */
}

.dropdown-menu li a {
    padding: 10px; /* Add padding to the dropdown menu items */
    background-color: #f5f5f5; /* Set the background color of the dropdown menu items */
}
/* MAIN*/
main {
    font-family: Arial, sans-serif; /* Use a modern sans-serif font */
    color: #333; /* Use a dark gray color for the text */
    line-height: 1.6; /* Increase the line height for readability */
    padding: 20px; /* Add some padding around the content */
    margin-top: 5%;
}

main h1 {
    color: #444; /* Use a slightly darker color for the heading */
    font-size: 2em; /* Make the heading larger */
    margin-bottom: 20px; /* Add some space below the heading */
}

main p {
    margin-bottom: 20px; /* Add some space below each paragraph */
}

main ul {
    padding-left: 40px; /* Add some padding to the left of the list */
}

main ul li {
    margin-bottom: 10px; /* Add some space below each list item */
}
/* FOOTER */
footer {
    background-color: #333; /* Dark background for contrast */
    color: #fff; /* White text color */
    text-align: center; /* Center the text */
    font-family: Arial, sans-serif; /* Modern, readable font */
}

footer h2 {
    margin-bottom: 0px; /* Space below the heading */
}
footer a {
    color: white;
    text-decoration: none;
}

footer a:hover {
    text-decoration: underline;
}
/*  Paragraphs and subtitles project description */

section.description ul {
    list-style: none;
}

/* Description */
h1.description {
    padding:2%;
    margin: 8%;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    
}

/* section.description li {
    padding:10px;
    margin: 2px;
    background: rgb(226, 191, 103);

} */

section.description ul {
    display: flex;
    flex-direction: column;
    align-items:center;
    padding: 0, 20px, 0, 20px;;
    
    
    

}

section.description .desc-para {
    
    flex-basis: 100%;
    background-color: rgb(255, 255, 255);
    border-radius: 20px;
    line-height: 2.4;
    padding: 20px;

}

section.description .desc-intro, section.description .desc-noncon, section.description .desc-con {
    background-color: rgb(255, 255, 255);
    padding:20px;
    border-radius: 20px;
}

/* Dropdown sources */

.dropdown-menu {
    display: none; /* Hide the dropdown menu by default */
    
}


.dropdown-menu li {
    width: 100%; /* Set the width of the dropdown menu items */
}

.dropdown-menu li a {
    padding: 10px; /* Add padding to the dropdown menu items */
    background-color: #f5f5f5; /* Set the background color of the dropdown menu items */ 
}

/* images team */


.team-member img {
    width:100%;

    
    

}

.all-member img {
    width: 100%;
    margin: 2%;
    border-radius: 10%;
    /* Hopefull this works*/
}
 
.prof-member img{
    width:90%;
}


/* Experiments */
.experiment_dropdown li {
    padding: 2%;
    background-color: aquamarine;
    margin-bottom: 2%;
    border-radius: 25px;
    text-align: center;
    
}

.experiment_dropdown li:last-child {
    margin-bottom: 0%;

}








.accordion-button:not(.collapsed) {
    background-color: #ffffff; 
    color: #000000; 

}

.accordion-button:focus {
    box-shadow: none; 
   
}

.accordion-button:active {
    background-color: #ffffff; 
    color: #000000; /* Change to the color you want */
}

/* Engineering */ 


.engineering-img {
    width: 100%;
    height: auto;
    

}

.engineering-p a {
    text-decoration: none;
    color: #007bff;

}

.engineering-p a:hover{
    text-decoration: underline;
}


/* Parts */ 

.parts-box{
    border: none; /* Remove borders around the list items */
    background-color: transparent; /* Transparent background */
    padding: 10px 15px; /* Add padding for spacing */
 
    padding: 10px;
    background-color: #f8f9fa;  
}
.parts-table a {
    text-decoration: none;
    color: #007bff;
    padding: 2%;
}
.parts-table a:hover {
    text-decoration: underline;
  }

  /* Results */


.first-agar {
    max-width: 100%;
    height: auto;
}
.results-col-text {
  vertical-align: top;
}
.results-figure-text{
    font-size: 16px;
    color: rgb(219, 98, 98);
}


.results-list li{
    margin:2%
    
}

.results-box {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 2rem;
  }

  .results-figure-text {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
    margin-top: 10px;
  }

  .center-content {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

.racka-25 {
width: 100%; 
height: auto;
}

.results-box-second {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 2rem;
  }

/* Banner slider */
.sponsor-banner {
    overflow: hidden;
    width: 100%;
    background-color: #f9f9f9;
    padding: 1% 0;
    position: relative;
}

.logo-slider {
    display: flex;           /* Align logos in a row */
    align-items: center;
    white-space: nowrap;     /* Prevent wrapping */
    animation: scroll 30s linear infinite; /* Smooth scrolling animation */
}

.logo-slider img {
    margin-right: 5%;        /* Space between logos */
    max-height: 100px;
    width: auto;
}

/* Seamless scroll */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media (max-width: 768px) {
    .logo-slider img {
        max-height: 60px;
    }
}

@media (max-width: 480px) {
    .logo-slider img {
        max-height: 50px;
    }
}
.carousel-item img {
    max-width: 100%; /* Adjust the percentage according to the size you want */
    max-height: 30%; /* Set a maximum height for the images */
    object-fit: cover; /* Ensures that the images cover the space without distortion */
    width: auto;
    height: auto
}
.carousel-inner {
    height: auto;
}

.carousel-item {
    height: auto;
}

.timeline {
    position: relative;
    padding-left: 40px;
    padding-right: 40px;
  }
  
  /* Continuous arrow in the center of the timeline */
  .timeline-arrow {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: #ED1C24;
    z-index: 1;
  }
  
  /* Customize the arrowhead at the top and bottom */
  .timeline-arrow::before,
  .timeline-arrow::after {
    content: '';
    position: absolute;
    left: -7px;
    width: 16px;
    height: 16px;
    background: #ED1C24;
    transform: rotate(45deg); /* Arrowhead shape */
  }
  
  .timeline-arrow::before {
    top: 0;
  }
  
  .timeline-arrow::after {
    bottom: 0;
  }
  
  /* Offset the right-side timeline items */
  .offset-timeline-item {
    margin-top: 70%; /* Adjust the offset to control how much lower the right-side items are */
  }
  
  /* Timeline items */
  .timeline-item {
    position: relative;
    z-index: 2;
  }
  
  .timeline-content {
    text-align: center;
    padding: 20px;
  }
  
  .timeline-item .timeline-date {
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  /* For larger screens, adjust the text alignment */
  @media (min-width: 768px) {
    .timeline-item:nth-child(odd) .timeline-content {
      text-align: right;
    }
  
    .timeline-item:nth-child(even) .timeline-content {
      text-align: left;
    }
  }

  /* Button Styling with Hover Effects */
  .btn.interactive-btn {
    font-weight: bold;
    border: 2px solid #e2484d;
    color: black !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  }

  .btn.interactive-btn:hover {
    background-color: black;
    color: white !important;
    border-color: #ED1C24;
  }

  .experiment-nav-cont {
    padding: 10px;
    background-color: #f8f9fa; /* Light background for clean look */
    border-radius: 5px; /* Rounded corners */
}

.experiment-nav .list-group-item {
    border: none; /* Remove borders around the list items */
    background-color: transparent; /* Transparent background */
    padding: 10px 15px; /* Add padding for spacing */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

.experiment-nav .list-group-item:hover {
    background-color: #f4b3b7; /* Light red background on hover */
}

.experiment-nav .nav-link {
    color: #ED1C24; /* Use the red color for links */
    font-weight: bold; /* Bold the text */
    text-decoration: none; /* Remove underline */
}

.experiment-nav .nav-link:hover {
    color: #c7181d; /* Darker red on hover */
    text-decoration: underline; /* Add underline on hover */
}