body { padding-top: 64px; 
    background-color: var(--white);
    color: var(--black-blue);
    font-weight: 500;
    /*text-align: justify;*/
}
.left-aligned { margin-left: auto; }
.bg-dark { background-color: var(--medium-teal) !important;     
    padding-top: 1.1rem;
    padding-bottom: 1.1rem;
}
.bg-hero { 
    width: 100%;
    position: relative;
}

.header-img {
    width: 100%;
    max-height: 50vh;   /* limits image to half the viewport height */
    object-fit: cover;  /* scales/crops nicely */
    display: block;
}

/* CALLOUT */
.bd-callout { padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; border:1px solid #ecefe9; 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: var(--dark-contrast); text-decoration: underline; }


/* -=-=-=-=-=-=-=-= COLOR scheme UZurich 2025 =-=-=-=-=-=-=-=- */
:root{
    --white: rgb(255, 255, 255);
    --light-grey: rgb(233,239,239);
    --light-grey-tl: rgb(233,239,239, 0.5);
    --light-blue: rgb(188,213,220);
    --light-teal: rgb(95,146,163);
    --medium-teal: rgb(61,108,127);
    --dark-teal: rgb(58,80,89);
    --black-blue: rgb(28,31,41);
    --light-contrast: rgba(255, 152, 206, 0.3);
    --dark-contrast: rgb(255, 152, 206);
    --peach: rgb(255,135,127);
    --yellow: rgb(255,231,148);
    --dark-yellow: #ffdc8f;
    --lachs: rgb(255,173,127);
    --pink: #f2a6bc;
    --transparent-black-blue: rgb(28,31,41,0.8);
}

/* -=-=-=-=-=-=-=-= General styling of the wiki components -=-=-=-=-=-=-=-= */
/* all custom classes will have a z- in the beginning to easily identify them */

h1 {
    color: var(--light-teal);
    /*is still overwritten by layout page*/
    font-size: 3.2rem;
    font-weight: 600;
    margin-bottom: 2rem;
}
h2 { /* Defining appearance of all the h2 titles on the wiki */
  color: var(--medium-teal);
  /*text-transform: uppercase;*/
  font-size: 2.3rem;
  font-weight:600;
  margin-top: 3rem;
  margin-bottom: 1.3rem;
}

h3 {
    color: var(--dark-teal);
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: 2rem;
}

h4{
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0;
}



/*adds the title before the subtitle introduction but in the same column*/
.z-title {
    padding-left: 6px;
    margin-top: 3rem;
}
/*removes the space before h2 for all introductions*/
h2.z-intro, h3.z-intro{
    margin-top:0;
}

.tab-title{
    padding-left: 6px;
}

.z-subtitle{
    color: var(--dark-teal);
    /*font-style: italic ;*/
    font-weight: 600;
}


/*--------links------------(could use .z-link as class)*/
a.z-link:hover {
    color: var(--black-blue);
    box-shadow: inset 0 -0.3rem 12.4px 0.19rem var(--dark-contrast);
    /*border-radius: 3px;*/
    text-decoration: none;
}
a.z-link {
    color: var(--black-blue);
    box-shadow: inset 0 -.3rem 0px 0rem var(--light-contrast);
    /*border-radius: .2rem;*/
    text-decoration: none;
}
sub.z-ref-nr {
    color: var(--black-blue);
}

/* --- quotes ---- */
blockquote{
    padding: 20px;
    background-color: var(--light-contrast);
    border-radius: 5px;
}
blockquote p{
    margin-bottom: 0;
    text-decoration: dashed;
    font-style: italic;
}
.quoted-person{
    text-align: end;
    font-style: oblique;
    font-weight: 600;
    font-style: normal;
}

/* ----------- general elements -------------*/
.accordion{
    margin-bottom: 1rem;
}

/* -=-=-=-=-=-=-=-= top navigation bar -=-=-=-=-=-=-=-= */

.nav-link {
    color: var(--light-grey); 
}

li.nav-item.dropdown.position-static {
    font-size: 1.1rem;
    font-weight: 500;
}

.nav-item.dropdown.position-static a.dropdown-item:hover{
    background-color: var(--light-grey);
    color: var(--dark-contrast);
    border-radius: 3px;
}


/* use position-static to change it manually */
.nav-item.dropdown.position-static .dropdown-menu {
  left: 0;
  right: 0;
  width: 100%;
  margin-top: 0 !important;
  border-radius: 0;
  top: 100%;
}

.dropdown-item {
  display: flex;
  align-items: center; /* vertical centering */
  gap: 0.5rem;         /* space between icon and text */
}

.nav-icon{
    margin-right:15px;
    vertical-align: -2.5px; 
    width: auto;
    height: 2rem;
}

.z-navbar-main{
    padding: 8px 0;
}

.logo-container{
    position: relative;
    height: 3rem;
    width: auto;
}

.logo{
    height: 100%;
    width: auto;
}

.navbar-brand{
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
/* class to make the navbar bigger in relation to the font size (commented out because the font size first needs to be bigger) */
/*
.z-navbar-main {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
} 
    */

/* -=-=-=-=-=-=-=-= side navigation bar (page content)-=-=-=-=-=-=-=-= */

/* Sidebar */
nav.sticky-top.z-top {
    top: 6rem !important;  /* space for sticky top + header */
}
.nav-link.z-sidebar {
    color: var(--dark-teal);
    font-weight: 600;
}
.nav-link.z-sidebar:hover,.nav-link.z-sidebar-sub:hover{
    color: var(--dark-contrast);
}
.nav-link.active.z-sidebar, .nav-link.active.z-sidebar-sub {
    color: var(--medium-teal);
    background-color: var(--light-grey);
}
.nav-link.active.z-sidebar:hover, .nav-link.z-sidebar-sub:hover {
    color: var(--dark-contrast);
}
.z-border-sidebar{
    border-right-color: var(--light-grey) !important;
    border-right-width: 6px !important;
    border-right-style: dashed !important;
}
.nav-link.z-sidebar-sub {
  color: var(--dark-teal);
  font-weight: 600;
}

/* Scrollspy offset for sticky header/sidebar */
[id] {
    scroll-margin-top: 4rem; /* FIX: Changed from 300px to 6rem */
}
@media (max-width: 767.98px) {
    [id] {
        scroll-margin-top: 2rem;
    }
}

html {
    scroll-padding-top: 4rem; /* height of navbar + some buffer */
}

@media (max-width: 767.98px) {
    html {
        scroll-padding-top: 2rem; /* smaller header on mobile */
    }
}

.scroll-element {
  padding-top: 4.9rem;
}

.scroll-element h2, .scroll-element h3, .scroll-element h4{
    margin-top: 0.1rem;
}

@media (max-width: 767.98px) {
    .scroll-element {
        padding-top: inherit;
    }
    .scroll-element h2{
        margin-top: 3rem;
    }
    .scroll-element h3{
        margin-top: 2rem;
    }
    .scroll-element h4{
        margin-top: 1rem;
    }
}
.sidebar-wrapper {
  max-height: calc(100vh - 100px); /* adjust for header */
  overflow-y: auto;
}

/* Ensure sidebar content is always vertical */
#sidebarMobileCollapse{
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
}

#sidebarMobileCollapse .nav {
    /* Removed display: flex !important from the outer container (#sidebarMobileCollapse) */
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
}
 
/* Nested navs (your sub-sections) should also stack vertically */
#sidebarMobileCollapse .nav .nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

/* Optional: remove horizontal overflow */
#sidebarMobileCollapse {
    overflow-x: hidden !important;
}

.sidebar-btn{
    background-color: var(--light-teal);
    color: white;
    border-radius: 0;
    border-color: var(--light-teal);
}
.sidebar-btn:hover{
    background-color: var(--dark-contrast);
    color: white;
    border-radius: 0;
    border-color: var(--dark-contrast);
}

/* Default position if navbar height is fixed */
.mobile-sidebar-wrapper {
  top: calc(100% of navbar height + 5px); /* will override with JS for dynamic height */
}

/* Optional: smooth transition for mobile sidebar sliding */
#sidebarMobileCollapse {
  transition: max-height 0.3s ease;
}

/* Add this to style.css */
/* Target the mobile-only sidebar collapse container */
.d-md-none #sidebarMobileCollapse.collapse:not(.show) {
    /* This is what Bootstrap should be doing, but let's confirm */
    display: none !important; 
}

/*---------- note box ----------*/
.z-notebox{
    background-color: var(--light-contrast);
    padding: 1.25rem;
    border-radius: 5px;
    margin: 1rem 0;
}
.blue.z-notebox {
    background-color: var(--light-blue);
}

.gray.z-notebox {
    background-color: var(--light-grey-tl);
}

/*-------- references ----------*/
.z-references-container{
    background-color: var(--light-blue);
    padding: 1rem;
    border-radius: 5px;
}
.z-references-container.scroll-element {
    margin-top: 4.9rem;
}

h2.z-references-title, h3.z-references-title{
    margin-top: 1rem;
}

/* format for reference numbers in the text similar to the one from iGEM UZurich 2024*/
a[href^="#ref"] {
  color: var(--dark-contrast);
  vertical-align: super;
  font-size: 0.5 rem;
  text-decoration: none;
}

/*--- progress bar from chatgpt and inspo Leiden 2023---*/
#progress-bar {
  position: fixed;
  top: 1px;
  left: 0;
  height: 6px;
  width: 0%;
  /* other option with linear-gradient:
  background: linear-gradient(90deg, var(--light-blue) 0%, var(--dark-contrast) 100%);*/
   background: repeating-linear-gradient(
    to right,
    var(--dark-contrast),
    var(--dark-contrast) 25px,
    transparent 25px,
    transparent 35px
    );
  z-index: 9999;
  /*transition: width 0.2s ease-out;*/
}

/* back to top button */
#z-back-to-top-btn {
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 9999;
    background-color: transparent;
    border-style: none;
    border-radius: 40px;
    height: 80px;
    width: 80px;
    padding: 25px 0;
    background-image: url(https://static.igem.wiki/teams/5686/navbar/bacteria-top-2.webp);
}
#z-back-to-top-btn:hover {
    background-color: var(--light-contrast);
    color: var(--dark-contrast);
}

/* ---------------------pictures and videos------------------------- */
.z-picturebox {
    margin: 1.3rem 0 1.5rem 0; /* shorthand for top/right/bottom/left */
    padding: 1.25rem; /* smaller padding on mobile */
    background-color: var(--light-blue);
    border-radius: 5px;
}

@media (max-width: 767.98px) {
    .z-picturebox {
        padding: 0.5rem; /* less padding on small screens */
    }
}

figcaption.z-subtitle{
    padding-top: 0.5rem;
}

.z-videobox{
    margin-top: 1.3rem;
    margin-bottom: 1.5rem;
    margin-left: -.1rem;
    margin-right: -.1rem;
    background-color: var(--light-blue);
    padding: 1.25rem 1.25rem;
    border-radius: 5px;
}

@media (max-width: 992px) {
  .z-videobox {
    padding: 20px;
  }
}

figure{
    margin: 0;
    position: relative;

}

/* ----------------------------- notebook page ------------------------*/
.accordion-header{
    margin-top: auto;
}
.accordion-button{
    background-color: var(--light-blue);
}
.accordion-item{
    background-color: var(--light-grey);
}
.accordion-body{
    height: auto;
}
.accordion-body h3{
    margin-top: 0;
}
.notebook-btn{
    background-color: var(--light-teal);
    color: white;
    border-radius: 5px;
    border-color: var(--light-teal);
}
.notebook-btn:hover{
    background-color: var(--dark-contrast);
    color: white;
    border-radius: 5px;
    border-color: var(--dark-contrast);
}

.d-grid.gap-2{
    margin-bottom: 1rem;
}
/* ----------------------------- human practices page -----------------*/
.fixed-img {
  height: 200px; /* adjust */
  object-fit: cover;
  width: 100%;
}

.hpcard {
    font-size: 0.8rem;
}

.hp-btn{
    background-color: var(--light-teal);
    border-color: var(--light-teal);
}

.hp-btn:hover{
    background-color: var(--dark-contrast);
    border-color: var(--dark-contrast);
    transition: .2s ease-out;
}

.timeline.col-lg-12{
    position: relative;
    max-width: 1200px;
    margin: 100px auto;
}
.timeline {
    position: relative;  /* ensures ::after is positioned correctly */
    width: 100%;
    max-width: 1200px;
    margin: 100px auto;
}

.timeline::after {
    content: '';
    position: absolute;
    top: -20px;  /* line extends above first card */
    bottom: -20px; /* line extends below last card */
    left: 49%;  /* center */
    width: 6px;
    background: repeating-linear-gradient(
        to bottom,
        var(--dark-contrast),
        var(--dark-contrast) 25px,
        transparent 25px,
        transparent 35px
    );
    transform: translateX(-50%);
    z-index: -1;  /* behind the cards */
}


.timeline.col-md-12{
    position: relative;
    max-width: 1200px;
    margin: 100px 0px;
}

.timeline.col-sm-12{
    position: relative;
    max-width: 1200px;
    margin: 100px auto;
}

.timeline .container{
    width: 50%;
    margin: 0;
    position: relative;
}

.timeline .card-container{
    margin-top: -4rem; /*puts them closer together*/
}

.timeline .card-container.top-container{
    margin-top: 4rem; /*fixes the bleed into title*/
}

.timeline .card-container.left-container{
    padding: 10px 50px 10px 0;
    position: relative;
    left: 0;
    /*background-color: var(--light-contrast);*/
}
.timeline .card-container.right-container{
    padding: 10px 0 10px 50px;
    position: relative;
    left: 100%;
    /*background-color: var(--light-contrast);*/
}

.versiontwo.timeline::after {
    content: '';
    position: absolute;
    width: 6px;
    height: auto; /* requires top and bottom */
    background: repeating-linear-gradient(
        to bottom,
        var(--dark-contrast),
        var(--dark-contrast) 25px,
        transparent 25px,
        transparent 35px
        );
    top: -20px; /* how much line above the first card */
    bottom: -20px; /*how much line below the last card */
    left: 49%;
    z-index: -1;
    margin-left: -14.8px;
}

.timeline .dot{
    position: absolute;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    border-color: var(--dark-contrast);
    right: -20px;
    top: 56px;
    z-index: 10;
    background-color: var(--light-contrast);
}

.right-container .dot{
    left: -20px;
}

.left-container-arrow{
    height: 0;
    width: 0;
    position: absolute;
    top: 36px;
    z-index: 1;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-left: 25px solid var(--light-grey);
    right: -25px;
}

.right-container-arrow{
    height: 0;
    width: 0;
    position: absolute;
    top: 36px;
    z-index: 1;
    border-top: 30px solid transparent;
    border-bottom: 30px solid transparent;
    border-right: 25px solid var(--light-grey);
    left: -24.8px;
}

/*cards in the timeline*/
.timeline .card {
    background-color: var(--light-grey);
    position: relative;
    border-width: 0;
    padding: 5px;
}
/*
.timeline .card img{
    width: 50%;
    position: relative;
    left: 0;
}*/

.timeline .card-body{
    width: 50%;
    position: relative;
    left: 50%;
}

.timeline .card h3{
    margin-top: 0;
}

/*for rounded images
.timeline .card-img-top{
    border-radius: 50% !important;
}*/

.timeline .card-img-top{
    width: 100%;
    height: auto;
    border-radius: 3px;
}

.timeline .hp-btn{
    background-color: var(--light-teal);
    border-color: var(--light-teal);
}

.timeline .hp-btn:hover{
    background-color: var(--dark-contrast);
    border-color: var(--dark-contrast);
    transition: .2s ease-out;
}

h4{
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0;
}

h4.hp {
    font-size: 1.4rem;
    color: var(--dark-teal);
    margin-top: 1rem;
}

.int-date{
    font-weight: 600;
    margin-bottom: 0;
}

/* ----------------------------- responsive timeline -----------------*/
@media (max-width: 991px) {
    /* Timeline container */
    .timeline.col-lg-12,
    .timeline.col-md-12,
    .timeline.col-sm-12 {
        margin: 50px auto;
        max-width: 100%;
    }

    .timeline .container {
        width: 100%; /* full width on mobile */
        padding: 2rem 1rem;
        display: inline-grid 
    }

    /* Card containers stack vertically */
    .timeline .card-container.left-container,
    .timeline .card-container.right-container {
        padding: 10px 0;
        left: 0;
    }

    /* Remove arrows for small screens */
    .left-container-arrow,
    .right-container-arrow {
        display: none;
    }

    /* Dots centered below cards */
    .timeline .dot {
        display: none;
    }

    /* Cards full width */
    .timeline .card {
        width: 100%;
    }

    /* Image and content stacked */
    .timeline .row {
        flex-direction: column;
    }

    .timeline .col-lg-3,
    .timeline .col-lg-9,
    .timeline .col-md-4,
    .timeline .col-md-8 {
        order: unset !important;
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Card body full width */
    .timeline .card-body {
        left: 0;
        width: 100%;
    }

    /* Date alignment */
    .int-date {
        text-align: left;
        margin-top: 0.5rem;
    }

    /* Timeline vertical line adjustment */
    .timeline::after {
        left: 2px; /* line at the left or centered as needed */
        margin-left: 0;
        top: 0px; /* how much line above the first card */
        bottom: 0px; /*how much line below the last card */
    }
}


.filter-buttons button.active {
    background-color: var(--medium-teal);
    color: white;
    border-color: var(--medium-teal);
}

.filter-buttons .btn{
    border-color: var(--medium-teal);
    color: var(--medium-teal);
}

.filter-buttons .btn:hover{
    background-color: var(--dark-contrast);
    color: white;
    border-color: var(--dark-contrast);
    transition: .2s ease-out;
}

/* Base nav-items */
#hp-tab .nav-item {
    margin-right: 0.5rem; /* spacing between tabs */
}

.model-tabs {
  flex-wrap: wrap; /* allow wrapping */
  gap: 0.5rem;     /* add spacing between items */
}

/* All links default */
#hp-tab .nav-link {
    background-color: var(--light-teal);
    color: white;
    border-radius: 5px;
    padding-bottom: 3px;
    box-shadow: 0 5px 0 0 var(--light-teal);
}

/* Active link */
#hp-tab > .nav-item > .nav-link.active {
    background-color: var(--medium-teal);
    color: white;
    border-radius: 5px;
    padding-bottom: 3px;
    box-shadow: 0 5px 0 0 var(--dark-contrast);
}

/* Hover effect for links */
#hp-tab .nav-link:hover {
    background-color: var(--dark-contrast);
    color: white;
    border-color: var(--dark-contrast);
    transition: 0.2s ease-out;
    box-shadow: 0 5px 0 0 var(--dark-contrast);
}

/* Effect for mouse click */
#hp-tab .nav-link:active {
    background-color: var(--dark-contrast);
    color: white;
    border-color: var(--dark-contrast);
    box-shadow: 0 5px 0 0 var(--medium-teal);
}


/* Make the tab container a flex container */
#hp-tab {
    display: flex;
}


/*----- tables ------*/
.tablebox{
    background-color: var(--light-blue);
    padding: 20px;
    border-radius: 5px;
    display: grid;
}
table {
    background-color: var(--light-grey);
}
.table-head{
    padding: 5px;
}

tbody, td, tfoot, th, thead, tr{
    padding: 5px;
    border-width: 0.5px;
}
caption.z-subtitle{
    padding-bottom: 0;
}


/* ----------------------------- Footer -----------------*/

.z-icon-footer {
  display: inline-block;
  width: 35px;
  height: 35px;
  -webkit-mask: no-repeat center / contain;
  mask: no-repeat center / contain;
  margin-right: 12px;         /* space between icons horizontally */
  vertical-align: middle;
}

/* container that holds the icons */
.footer .icon-group {
  display: flex;
  flex-wrap: wrap;            /* allows wrapping only if absolutely needed */
  justify-content: flex-start;
  align-items: center;
  gap: 12px;                  /* spacing between icons */
}

/* keep them horizontal and smaller on very small screens */
@media (max-width: 576px) {
  .footer .icon-group {
    justify-content: center;  /* center on small screens */
    flex-wrap: nowrap;        /* force single line */
    overflow-x: auto;         /* allows horizontal scroll if icons overflow */
    -webkit-overflow-scrolling: touch;
  }

  .z-icon-footer {
    width: 30px;
    height: 30px;
    margin-right: 10px;
  }
}

/*--------------- members page ----------------------------*/
h1.members-title{
    text-align: center;
    margin-top: 3rem;
}
h2.members-title{
    text-align: center;
}

p.members-title{
    margin: 0;
}

#notmembers-title-container{
    background-color: white;
    position: relative;
    top: 0px;
    left: 0px;
    padding: 0 10px;
    width: auto;
    height: auto;
}

.h1-mg-0{
    margin-bottom: 20px;
}

.line-card{
    border: 6px dashed var(--dark-contrast);
    border-radius: 20px;
    padding: 10px;
    background-color: white ;
}

.line-card-members{
    /*border: 6px dashed var(--light-contrast);replaced through image in the back if possible*/
    border-radius: 20px;
    padding: 40px;
}

.spacer{
    margin: 40px;
}

img.portrait{
    /* not anymore... transform: rotate(90deg);*/
    width:fit-content;
}


.card-img-wrapper {
    width: 100%;               /* always fill card width */
    aspect-ratio: 17 / 18;       /* portrait ratio (width : height) */
    overflow: hidden;           /* crop any overflow */
    display: flex;
    justify-content: center;    /* center horizontally */
    align-items: center;        /* center vertically */
    border-radius: 5px 5px 0 0;
}

.card-img-wrapper img {
    width: 100%;                /* fill the wrapper width */
    height: auto;               /* fill the wrapper height */
    object-fit: cover;          /* crop and scale nicely */
     /* transform: rotate(90deg); fix iGEM rotation - was fixed by igem */
    border-radius: 0;
}

h3.members-card-title{
    margin-top: 0;
    text-align: center;
    font-size: 1.6rem;
}

h4.members-card-title, p.members-card-title{
    margin-top: 0;
    text-align: center;
}

.members-card{
    border-style: none;
    box-shadow: 0 0 15px 1px var(--light-blue);
}

/* Overlay background */
.members-card .card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--transparent-black-blue); /* semi-transparent dark overlay */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  border-radius: 5px;
}

/* Text inside overlay */
.members-card .overlay-text {
  color: white;
  text-align: center;
  padding: 15px;
}

/* Show overlay on hover */
.members-card:hover .card-overlay {
  opacity: 1;
}

.members-overlay h4{
    color: white;
}
/* optional lines in the background
#members-background{
    background-image: url(https://static.igem.wiki/teams/5686/team/members/members-background.svg);
}*/
/*-----------------Education page-----------------------*/

.edu-icons{
    margin-bottom: 15px;
}

.edu-card{
    margin-bottom:50px;
    word-break: break-word;     /* older browsers */
    overflow-wrap: break-word;  /* modern browsers */
    white-space: normal;        /* ensures text wraps */
    overflow: hidden;           /* hides accidental overflow from flex or inline-blocks */
}

.edu-cont .edu-text > .col-md-5 {
    border-left: 0.5px solid var(--light-teal);
    padding-left: 20px;
}

.edu-cont .edu-text > .col-md-7 {
    padding-right: 20px;
}

@media (min-width: 768px) {
    .edu-cont .edu-text > .col-md-5 {
    border-left: 0.5px none var(--light-teal);
    padding-left: auto;
}
    .edu-cont .edu-text > .col-md-7 {
    padding-right: auto;
}
}

/*----------------Dry Lab / Model pages ----------------*/
.model-tabs{
    background-color: var(--light-contrast);
    padding-bottom: 20px;
    padding-top: 20px;
    margin-top: 2rem;
    border-radius: 5px;
}
.z-notebox.dl-overview{
    background-color: var(--light-blue);
}
.z-notebox.dl-overview:hover{
    background-color: var(--light-contrast);
}

/*make cards but not test clickable*/
.stretched-link-wrapper {
  text-decoration: none; /* remove underline */
  color: inherit; /* keep text color normal */
  display: block;
}

.stretched-link-wrapper p {
  pointer-events: none; /* make text not clickable */
}

ul.tight { 
    margin-left: 2em; 
    padding-left: 0; 
    list-style: disc; }

ul.tight li { 
    margin: 0; 
}

.block { 
    margin: 0 0 0.5rem 0; 
}


/* ----------stakeholder pages-------------- */

/* Responsive stakeholder layout */
.stakeholder-row {
    display: flex;
    flex-direction: column;     /* stack on mobile */
}
@media (min-width: 768px) {
    .stakeholder-row {
        flex-direction: row;    /* text left, image right on desktop */
    }
}
.stakeholder-text {
    flex: 3;
    order: 2;                   /* text after image on mobile */
}
.stakeholder-img {
    flex: 1;
    order: 1;                   /* image before text on mobile */
    margin-bottom: 1rem;
}

.stakeholder-img .z-picturebox{
    margin: 0;
}

.stakeholder-profession{
    padding-left: 6px;
}

h1.stakeholder-title{
    margin-bottom: 0;
}

.stakeholder-subtitle{
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--light-teal)
}

.stakeholder-container{
    padding: 0;

}

/* ---------------sustainabilty page -------*/
.container.sust{
    margin: 1.3rem 0 1.5rem 0; /* shorthand for top/right/bottom/left */
    padding: 1.25rem; /* smaller padding on mobile */
    background-color: var(--light-blue);
    border-radius: 5px;
}

.z-notebox h4{
    margin-top: 0;
}

.container.sust-img-link-box{
    margin: 1.3rem 0 1.5rem 0;
    padding: 1rem;
    background-color: var(--light-blue);
    border-radius: 30px;
}

.sust-img-link{
    position: relative;
    width: 100%;
    border-radius: 120px;
}

/* Show overlay on hover */
.sust-img-link-box:hover{
  background-color: var(--dark-contrast);
}

.sust-emphasis{
    font-size: 2rem;
    color: var(--dark-teal);
}

/*entrepreneurship*/
.attention {
  background-color: var(--light-contrast);
}