.inner-banner{display: flex;
    box-sizing: border-box;
    padding: 6% 5vw 2% 10vw;
    background: #f1f1f1;
    color: #fff;
    gap: 30px;
    min-height: 50vh;
    align-items: center;}

.inner-banner .left {
    display: flex;
    flex-direction: column;
    gap: 25px;
      
}


.inner-banner .left h2{
    font-size: 2.5vw;
    font-weight: 400;
    line-height: 1.3;
    margin: 0;
    color: #f56c00;
    margin: 18% 0px 0px 0px;
}

.inner-banner .right {
    display: flex;
    flex-basis: 60vw;}


  .inner-banner .right img {
    width: 100%;
    height: auto;
}
.toc{
  padding: 2% 10vw 2% 10vw;
}
.toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.toc li {
  margin-bottom: 0.5rem;
  line-height: 2;
}

.toc a {
  color:#015AFF;
  text-decoration: none;
  font-weight: bold;
  background: #d9d9d9;
  padding: 0.5rem;
  display: block;
}

#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8{
  padding: 0% 10vw 2% 10vw;
}


#section1 h2, .section-title {font-size: 30px;
    color:#015AFF;
    line-height: 1.5;
    margin: 0;
    font-weight: 400;}



section p {font-size: 16px;
    line-height: 28px;
    font-weight: 400;}

section p strong, .strongtd{ font-weight: 600;}

.float-wrapper {
  overflow: auto;
}

.info-box {
  float: right;
  width:400px;
  background-color:#d9d9d9;
  padding: 10px 15px;
  font-size: 0.9rem;
  color: #333;
  margin: 0 0 15px 15px;
}

.info-box .source {
  font-style: italic;
  font-size: 0.85rem;
  margin-top: 10px;
}

.info-box a {
  color:#015AFF;
  text-decoration: none;
}

.info-box a:hover {
  text-decoration: underline;}

  .fig-img {
  text-align: center;
  margin: 1.5rem 0;
}

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

}
.taxonomy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
}

.taxonomy-table th,
.taxonomy-table td {
  border: 1px solid #ccc;
  padding: 0.75rem;
  text-align: left;
}

.taxonomy-table thead th {
  background-color: #4b5563;
  color: white;
}


.image-row {
  display: flex;
  justify-content: space-between;
  gap: 3rem;
  margin: 2rem 0 1rem;
  flex-wrap: wrap;
}

.image-blocks {
  flex: 1 1 48%;
  text-align: center;
}
.image-row .image-blocks img {
  width: 100%;
  height: auto;
  border: 1px solid #ddd;
}

.caption {
  font-size: 0.9rem;
  color: #444;
  margin-top: 0.5rem;
  font-style: italic;
}

.video-wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
  margin: 1.5rem 0;
    flex-wrap: nowrap;
}

.video-text {
  flex: 0 1 50%;
}

.roman-list {
  list-style: none;
  padding-left: 1rem;
  margin-top: 0.5rem;
}

.roman-list li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.roman {
  font-weight: 400;
  margin-right: 0.2rem;
}

.video-wrapper .video-thumb {
  flex: 1 1 47%;
      text-align: end;
}


.video-thumb img {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}


.link-highlight {
  color:#015AFF;
  font-weight: bold;
  text-decoration: none;
}
.link-highlight:hover {
  text-decoration: underline;
}

.note-block {
  background-color:#d9d9d9;
  padding: 1rem;
  margin-top: 1.5rem;
}
.mapping-list,
.gap-list {
  margin: 1rem 0;
  padding-left: 2rem;
}

.mapping-list li,
.gap-list li {
  margin-bottom: 0.75rem;
}
.highlight-line {
  font-weight: bold;
  margin-top: 1.5rem;
  color: #333;
}

strong.org{color:#fe5e01;}

#section7 ol.resource-list, #section8 ol.resource-list  {
  padding-left: 1.25rem;
  margin: 1rem 0;
}

#section7 ol.resource-list li, #section8 ol.resource-list li {
  margin-bottom: 1rem;
  line-height: 1.6;
}

#section7 a, #section8 a {
  color:#015AFF;
  text-decoration: none;
  font-weight: 500;
}

#section7 a:hover, #section8 a:hover{ text-decoration: underline;}



@media screen and (max-width: 781px) {

  .toc {padding: 3% 2vw 2% 3vw;}

  .info-box {float:left;  width: 90%; margin: 10px 0px; }

  .float-wrapper {overflow:hidden; }

  #section1 h2, .section-title {font-size: 30px;}

  .video-wrapper .video-text {flex-basis: 100%;}

  .video-wrapper .video-thumb iframe { width:550px;}

.video-wrapper { flex-direction: column;}

  .inner-banner { padding: 100px 5vw 0% 5vw;}

  .inner-banner {min-height: unset; flex-direction: column;}

  .inner-banner .left h2 { font-size: 40px; margin:0px;}
}  

@media screen and (min-width: 350px) and (max-width: 500px) {
  .video-wrapper .video-thumb iframe {
    width: 350px;
    height: auto; 
    /*max-width: 100%; */
  }
  #section1 h2, .section-title {font-size: 24px;}
  .inner-banner .left h2 {font-size: 28px; }

  .toc li { line-height: 1.5;}
}