ol{
    list-style-type: decimal;
    padding-left: 2.5rem;
    line-height:2;
}

.supply-chain{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}

.matrix-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1rem;
}

.matrix-text {
    flex: 1;
}

.matrix-image {
    flex-shrink: 0; 
    max-width: 40%; 
    margin-top: 0.5rem;
}

.matrix-image img {
    max-width: 100%;
    height: auto;
    width: 100%; 
}
.matrix img{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:70%;
    padding: 1.5rem 0;
}

.matrix-list {
    list-style-type: decimal;
    /* padding-left: 2rem;  */
    /* padding-top:1rem; */
}

.matrix-list li {
    margin-bottom: 1.5rem;
    font-family: var(--text-font);
    font-size: 1.05rem;
    line-height: 1.8;
}

.matrix-sublist{
    list-style-type:circle;
    margin-left: 3rem;
    margin-bottom:1.5rem;
}

.matrix-sublist li::before{
    position: relative;
    margin-right: .5rem;
    --tw-text-opacity: 1;
    font-family: var(--text-font);
    color: var(--main-color);
    opacity: var(--tw-text-opacity);
    top: .1rem;
    content: "•";
    font-size: 1.5rem;
    line-height: 0;
}

.loop-sublist{
    padding-left:2rem;
    padding-top:1rem;
}

.loop-list li{
    padding-bottom:1.5rem;
}

.loop-list li::before{
    position: relative;
    margin-right: .5rem;
    --tw-text-opacity: 1;
    color: var(--main-color);
    opacity: var(--tw-text-opacity);
    top: .1rem;
    content: "•";
    font-size: 1.5rem;
    line-height: 0;
}

.loop ul{
    /* padding-left:3.5rem; */
    font-family: var(--text-font);
    color:var(--text);
    font-size:1.05rem;
    line-height:2;
    text-align: justify;
    padding-top:1rem;
}

.loop3-list li{
    font-family: var(--text-font);
    color:var(--text);
    font-size:1.05rem;
    line-height: 2;
    text-align:justify;
    padding-top:0.5rem;
}

.loop-sublist li::before{
    position: relative;
    margin-right: .5rem;
    --tw-text-opacity: 1;
    color: var(--main-color);
    opacity: var(--tw-text-opacity);
    top: .1rem;
    content: "-";
    font-size: 1.5rem;
    line-height: 0;
}

.pi{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}

.stroke-timeline{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}

.ministry-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.ministry-text {
    flex: 1;
    padding-right:1rem;
}

.ministry-image {
    flex-shrink: 0; 
    max-width: 40%; 
    margin-left:1rem;
}

.ministry-image img {
    max-width: 100%;
    height: auto;
    width: 100%; 
}

.ski{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}

.workflow{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}

.lv-aav{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}
.administration{
    display:flex;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    padding: 2rem 0;
}


#readmore3 ul{
    padding-top:1rem;
    padding-bottom:1.5rem;
    padding-left:2rem;
}

@media (max-width: 768px) {
    .matrix-container {
        flex-direction: column;
        align-items: center;
    }

    .matrix-text, .matrix-image {
        max-width: 100%;
    }
}

.sc-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 2rem 0;
}
.sc-card {
    overflow: hidden;
    --rpx: 100vw / 8000;
}
  
.sc-card,
.sc-card * {
    box-sizing: border-box;
}

.sc-card {
    position: relative;
    width: calc(1167 * var(--rpx));
    height: calc(1167 * var(--rpx));
    flex: 1 1 calc(33.333% - 1rem); /* Adjust the width as needed */
    margin: 0.5rem;
}

.sc-avatar {
    position: relative;
    width: calc(600 * var(--rpx));
    height: calc(600 * var(--rpx));
    margin: calc(93 * var(--rpx)) 0 0 calc(284 * var(--rpx));
    /* background: url(https://static.igem.wiki/teams/5316/images/ihp-daniel-tornero.png)
      no-repeat center;
    background-size: cover; */
    z-index: 1;
    border-radius: calc(473.5 * var(--rpx));
}
.rectangle {
    position: absolute;
    width: calc(1167 * var(--rpx));
    height: calc(1167 * var(--rpx));
    top: 0;
    left: 0;
    background: rgba(227, 211, 251, 0.35);
    border-radius: calc(76 * var(--rpx));
    /* box-shadow: 0 0 calc(72.0999984741211 * var(--rpx)) 0 rgba(56, 56, 56, 0.25); */
}

.group-1 {
    position: absolute;
    width: calc(711 * var(--rpx));
    height: auto; /* calc(241 * var(--rpx)); */
    /*top*/
    bottom: calc(106 * var(--rpx));
    left: calc(88 * var(--rpx));
    font-size: 0px;
    z-index: 2;
    font-family: var(--text-font);
}
.sc-name{
    display: block;
    position: relative;
    height: auto; /*calc(116 * var(--rpx));*/
    margin: 0 0 0 0;
    color: #000000;
    font-family: Open Sans, var(--default-font-family);
    font-size: calc(96 * var(--rpx));
    font-weight: 600;
    line-height: calc(116 * var(--rpx));
    text-align: left;
    /*white-space: nowrap;*/
    white-space: auto;
    /* white-space: auto;*/
    z-index: 3;
}
.sc-title {
    display: block;
    position: relative;
    height: auto; /*calc(116 * var(--rpx));*/
    margin: calc(9 * var(--rpx)) 0 0 calc(10 * var(--rpx));
    color: #000000;
    font-family: Open Sans, var(--default-font-family);
    font-size: calc(64 * var(--rpx));
    font-weight: 300;
    line-height: calc(87.15625 * var(--rpx));
    text-align: left;
    white-space: autop;
    z-index: 4;
}

.ellipse {
    position: absolute;
    width: calc(138 * var(--rpx));
    height: calc(138 * var(--rpx));
    top: calc(858 * var(--rpx));
    left: calc(895 * var(--rpx));
    background: linear-gradient(180deg, rgba(116,51,255,1) 0%, rgba(183,138,253,1) 100%);;
    background-size: cover;
    z-index: 5;
    border-radius: 50%;
}

.btn-content {
    display: flex;
    align-items: center;
    justify-self: center;
    position: absolute;
    height: calc(110 * var(--rpx));
    top: calc(865 * var(--rpx));
    left: calc(935 * var(--rpx));
    color: var(--background);
    font-family: var(--text-font);
    font-size: calc(100 * var(--rpx));
    font-weight: 600;
    z-index: 6;
}

.sc-button-container:hover{
    cursor:pointer;
}

/*Supply chain descriptions*/
.sc-desc {
    font-family: var(--text-font);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2rem;
    width: 100%;
}
  
  
.card {
    background-color: #F5F1EB;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); 
    border-radius: 20px;
    height: auto;
    padding: 1rem 2rem;
    width: 100%;
    flex-wrap: wrap-around;
    position: relative;
    display: flex;
    flex-direction: row;
    
}
  
.card-text{
    flex-grow:1;
    padding-right:2rem;
    text-align:justify;
}
.card-image img{
    max-width: 100%;
    padding-top:3rem;
}
  
.desc-name{
    font-size:20px;
    margin: 15px 0 5px 0;
}
.desc-title{
    font-size:15px;
}  
.card p {
    font-size: 16px;
    color: grey;
    line-height:2;
}
.card-image{
    flex-shrink: 0;
    width: 15rem;
    height: 15rem;
    display: none;  
}
  
.card-title{
    display:flex;
    float:left;
}          

.loop-container{
    /* display: flex; */
    justify-content: center;
}

/*
.loop-content{
    flex:1;
    margin-right:1.25rem;
} */

.loop-video{
    max-width:40%;
    /* flex: 0 0 auto; */
    margin-left:13rem;
}

.loop-video img{
    width: 100%;
    height: auto;
}

.references p{
    font-size:1rem;
}