/*custom color scheme*/
:root {
    --primary: #dd66ad;
    --secondary: #e9b4cf;
    --dark: #A02C5A;
    --light: #FFD8EF;
}


@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url("https://static.igem.wiki/teams/5154/manrope-v15-latin-regular.woff2");

}

@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: bold;
    font-display: swap;
    src: url("https://static.igem.wiki/teams/5154/manrope-v15-latin-700.woff2") format('woff2'); /*use a different url url_for('static', filename='fonts/manrope-v15-latin-700.woff2')*/ 
}

/*Page size setting*/
@media (min-width: 1400px) {
    .container, 
    .container-lg, 
    .container-md, 
    .container-sm, 
    .container-xl, 
    .container-xxl {
      max-width: 1400px;
    }
  }
  

body {
    padding-top: 56px;
    font-family: "Manrope", sans-serif;
    background-color: #fae4efff;
}


h1 {
    font-family: 'Manrope', sans-serif;
    font-weight: bold; 
    font-size: 2.5em; 
    margin: 0.5em 0;
}
h2 {
    font-family: 'Manrope', sans-serif;
    font-weight: bold; /* Use bold for h2 */
    font-size: 2em; /* Adjust size as needed */
    margin: 0.5em 0; /* Add margin */
}

h3 {
    font-family: 'Manrope', sans-serif;
    font-weight: normal; /* Regular weight for h3 */
    font-size: 1.75em; /* Adjust size as needed */
    margin: 0.5em 0; /* Add margin */
}

h4 {
    font-family: 'Manrope', sans-serif;
    font-weight: bold; /* Regular weight for h3 */
    font-style: italic;
    font-size: 1.25em; /* Adjust size as needed */
}
.red-text {
    color: #FF0000; /* Bright Red */
}

.left-aligned {
    margin-left: auto;
}

.bg-dark {
    background-color: #96015aff !important;
    /*border-bottom-left-radius: 150% 20px;*/
    /*border-bottom-right-radius: 150% 20px;*/
    /*No Curvature*/
}

.bg-hero {
    background-color: #e4a8ccff;
    /*clip-path: ellipse(900px 130px at 400px center);*/
}

/* 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 a {
    color: white;
    font-weight: bold;
    text-decoration: none;
}

footer a:hover {
    color: White;
    text-decoration: underline;
}

/* custom link colour */
.custom-link {
    color: #e4a8ccff;
}

/* change image when hover*/
/*
.image-hover {
    width: 300px;
    height: 300px;
    background-image: url(https://static.igem.wiki/teams/5154/holly1.jpg);
    background-size: cover;
    transition: background-image 0.5s ease-in-out;
}

.image-hover:hover {
    background-image: url(https://static.igem.wiki/teams/5154/untitled-design.png);
}
*/

pre {
    font-family: 'Comic Sans MS', sans-serif;
}

.container2 {
    display: flex;
    justify-content: space-between;
}

.column {
    flex: 1;
    padding: 10px;
    margin: 5px;
    text-align: center;
}

.figure {
    text-align: center
}


/*style for navbar*/

@font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Sarabun';
    src: url('../fonts/Sarabun-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }
  .bg-black{
    background-color: #1c1f21;
  }
  .navbar-logo{
    width: 6.25rem;
    height: 6.25rem;
  }
  .magenta-text span {
    font-size: 30px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    line-height: 12px;
    word-wrap: break-word;
    
    width: 9.875rem;
    height: 4.5625rem;
    flex-direction: column;
    justify-content: center;
  }
  
  .m { color: #A02C5A; }
  .a { color: #E5A9CD; }
  .g { color: #A02C5A; }
  .en { color: #E5A9CD; }
  .t { color: #A02C5A; }
  .magenta {color:white;}
  

.navbar {
    font-family: 'Manrope', sans-serif;
  }
  
  .navbar-dark .navbar-nav .nav-link{
    color: #FFD8EF;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
    transition: color 0.3s ease-in-out;
    
  }

 .navbar-nav{
    margin-left: auto;
    margin-right: 0;
  }
  
  .navbar-nav .nav-link {
    padding: 0.5rem 0.5rem;
    transition: color 0.3s ease-in-out;
 }
  
  /* .navbar-nav .nav-link:hover { 
    color: #E5A9CD; 
  } */

  
  .navbar-brand .navbar-logo {
    width: 50px;
    height: auto;
  }
  
  .dropdown-menu {
    background-color: #343a40; /* Dark background for dropdowns */
  }
  
  .dropdown-item {
    color: white;
    font-weight: 500;
  }
  
  .dropdown-item:hover {
    background-color: #A02C5A; /* Magenta hover effect for dropdown items */
    color: white;
  }
  
  .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.1);
  }
  
  .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }
  
  @media (max-width: 991px) {
    .nav-item.dropdown:hover .dropdown-menu {
      display: none; /* Prevent hover behavior on small screens */
    }
  }

/*style for team page*/

.teamCard {
    background-color: #f8f9fa; /* Light background */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Soft rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow */
    margin: 15px; /* Add space around each card */
    padding: 15px; /* Add padding inside the card */
    flex: 1 1 calc(33.33% - 30px); /* Allow cards to take up one-third of the space, accounting for margins */
}

.teamCard:hover {
    transform: translateY(-5px); /* Lift effect on hover */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); /* Stronger shadow */
}

.teamPhoto {
    display: block;
    width: 100%; /* Ensure the image takes full width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Ensure the image fits while maintaining aspect ratio */
    padding: 15px; /* Equal padding on top, left, and right */
    transition: opacity 0.3s ease; /* Smooth transition for hover */
}

.card-body {
    padding: 20px; /* Add padding to the body */
}

.card-title {
    font-size: 1.5rem; /* Larger font size for title */
    font-weight: bold; /* Bold font */
    color: #343a40; /* Darker text color */
}

.subText {
    font-size: 1rem; /* Slightly smaller font for subtitle */
    color: #6c757d; /* Bootstrap's muted text color */
    margin-bottom: 10px; /* Spacing after subtitle */
}

.card-text {
    font-size: 0.95rem; /* Base font size for the description */
    color: #495057; /* Soft text color */
    line-height: 1.6; /* Improve readability */
}

.container-team {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Distribute space between cards */
    margin-left: -15px;
    margin-right: -15px;
}

@media (max-width: 768px) {
    .teamCard {
        flex: 1 1 100%; /* Full width on smaller screens */
    }
}

@media (min-width: 769px) {
    .teamCard {
        flex: 1 1 calc(33.33% - 30px); /* 3 cards per row */
    }
}

/*style for sidebar*/
/* Style for the sidebar wrapper */
.navbardiv {
    padding: 0rem;
    position: -webkit-sticky;
    position: sticky;
    top: 4rem; /* Sidebar sticks 20px from the top */
    height: calc(90vh - 4rem); /* Full viewport height minus the top offset */
}

/* Wrapper for the sidebar content, allowing inner scrolling */
.navbar_wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Fixed Table of Contents header */
.toc-header {
    background-color: #f9e5ee; /* Match the background color */
    padding-bottom: 0.5rem;
    z-index: 1; /* Ensure it's on top */
    position: relative; /* Stay fixed within the sidebar */
}

/* Scrollable content below the fixed Table of Contents header */
.sidebarNav {
    background-color: #f9e5ee; /* Light pink background */
    padding: 1rem;
    border-right: 1px solid #e3b1c7; /* Subtle border for separation */
    overflow-y: auto; /* Allow scrolling for sidebar content */
    flex-grow: 1; /* Ensure it grows to take up remaining space */
}

/* Style for the Table of Contents heading */
.toc-header p {
    font-size: 20px;
    font-weight: bold;
    color: #A02C5A; /* Dark pink for heading */
    margin-bottom: 10px;
}

/* Style for the sidebar links */
.sidebarNav .nav-link {
    color: #007bff; /* Default link color */
    font-size: 18px;
    font-weight: 500;
    padding: 0.5rem 0;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover and active states for links */
.sidebarNav .nav-link:hover,
.sidebarNav .nav-link.active {
    color: #0056b3; /* Darker blue on hover */
    background-color: #f1d4df; /* Light background for active links */
    padding: 0.5rem 1rem; /* Adjust padding for active links */
    border-radius: 4px;
}

/* Sub-menu links (indented) */
.sidebarNav .nav .nav-link.ms-3 {
    font-size: 14px;
    padding-left: 2rem;
}

/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .sidebarNav {
        position: relative; /* Sticky behavior removed for mobile */
        height: auto;
        width: 100%;
    }
    .sidebarNav .nav-link {
        font-size: 18px;
    }
    .sidebarNav .nav .nav-link.ms-3 {
        padding-left: 2rem;
    }
}

/*Boxes e.g. on engineering page*/
.box_dbtl {
    width: 100% ;
    border:  3px solid #96015aff;
    border-radius: 10px;
    background-color: rgb(243, 201, 223);
    padding: 1.5rem;
    margin: 1px;
    text-align: left;
    
    .column_container {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    grid-template-rows: auto ;
    padding: 10px;
    margin: 1px;
    vertical-align: middle;
    img {
    max-width: 100%;
    max-height:100%;
      }
   } 
  
  }
  .equal_columns{
    column-count: 2;
    column-gap: 40px;
    column-rule: 1px solid #96015aff;
  }


  figure {
    display: table;
    break-inside: avoid;
  }
  figure figcaption {
      display:table-caption;
      caption-side:bottom;
      font-size: small;
      padding:5px;
  }
  figure img {
    display: block;
    
  }

 
  
  table{
    border-collapse:collapse;
  }
  
  table tr{
    border-bottom: 1px solid black;
  }
  table tr:last-child{
    border-bottom: 0;
  }



  .cfig {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }