:root {
   --seller-blue: #008EBC;
   --buyer-yellow: #F2A900;
   --risk-black: #222;
   --light-bg: #f4f4f4;
 }



 .wrapper {
   margin: auto;
   border: 30px solid #0981d1;
   padding: 5px;
   border-radius: 10px;
   margin-top: 3%;
   margin-bottom: 5%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }

 .wrapper h2 {
   text-align: center;
   font-size: 48px;
   color: #000;
   margin: 3% 0%;
   text-transform: uppercase;
   font-weight: bold;
  
 }


 .top-bar-section {

   margin-bottom: 5px;
 }


 .icon-header {
   display: flex;
   justify-content: space-around;
   align-items: flex-end;
   padding-bottom: 10px;
 }

 .icon-unit {
   text-align: center;
   flex: 1;
 }

 .icon-unit svg {
   width: 30px;
   height: 30px;
   fill: #444;
 }


 .black-heading-bar {
   display: flex;
   background: #333;
   color: white;
   font-size: 20px;
   font-weight: bold;
   text-transform: uppercase;
   text-align: center;
   min-height: 35px;
 }

 .label-cell {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: center;
   border-right: 1px solid #555;
   padding: 7px 7px;
   line-height: 1.2;
 }

 .label-cell:last-child {
   border-right: none;
 }


 .term-container {
   margin-top: 5px;
 }

 .row-item {
   margin-bottom: 4px;
 }

 .bar-flex {
   display: flex;
   cursor: pointer;
 }

 .code-box {
   width: 7%;
   background: var(--seller-blue);
   color: white;
   font-weight: bold;
   padding: 18px 0px 18px 12px;
   text-align: center;
   font-size: 2vw;
   flex-shrink: 0;
   font-family: 'Chakra Petch';
 }

 .bar-visual {
   flex-grow: 1;
   display: flex;
   /* height: 55px; */
   /* margin-left: 4px; */
   position: relative;
   background: #eee;
   overflow: hidden;
 }

 .blue-seg {
   background: var(--seller-blue);
   display: flex;
   align-items: center;
   padding-left: 10px;
   color: white;
   font-size: 0.9;
   font-weight: 500;
   text-transform: uppercase;
   white-space: nowrap;
 }

 .yellow-seg {
   background: var(--buyer-yellow);
   flex-grow: 1;
   border-left: 2px solid black;
 }

 .risk-marker {
   background: var(--risk-black);
   color: white;
   width: 20px;
   height: 20px;
   position: absolute;
   top: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: bold;
   border: 1px solid #fff;
   z-index: 2;
 }

 .faq-panel {
   display: none;
   /* margin-left: 69px; */
   background: var(--light-bg);
   padding: 30px 15px;
   font-size: 20px;
   border-left: 4px solid var(--risk-black);
 }


 .legend {
   display: flex;
   justify-content: flex-start;
   gap: 6%;
   margin-top: 20px;
   font-size: 18px;
   flex-wrap: wrap;
   margin-bottom: 20px;
 }

 .l-item {
   display: flex;
   align-items: center;
   gap: 5px;
   text-transform: uppercase;
 }

 .box {
   width: 12px;
   height: 12px;
 }


 .features-two__top .sec-title__title {
   color: black;
 }

 .features-two__top {
   position: relative;
   display: block;
   margin-bottom: 0px;
   margin-top: 5%;
 }

 .team-details {
   position: relative;
   display: block;
   background: var(--logistiq-white);
   padding: 80px 0px 0px;

 }

 .about-one__img1 {
   position: relative;
   display: block;
   max-width: 472px;
   width: 100%;
 }

 .about-one__img {
   position: relative;
   display: block;
   max-width: 430px;
   width: 100%;
 }

 .about-one__img .shape2 {
   position: absolute;
   top: 162px;
   right: -82px;
   z-index: -1;
 }

 .sec-title__title {

   text-transform: uppercase;
 }

 .sec-title__title {

   color: #1f1f1f;
 }

 .pt {
   padding-bottom: 5% !important;
 }

 .mt {
   margin-top: -5%;
 }

 @media only screen and (max-width: 767px) {
   .page-header__inner h1 {
     font-size: 35px !important;
   }

   .team-details {
     position: relative;
     display: block;
     background: var(--logistiq-white);
     padding: 10px 0px 0px;
     z-index: 1;
   }

   .wrap {
     flex-wrap: wrap-reverse;
   }

   .pt {
     padding-bottom: 15% !important;
   }

   .features-two__top {
     position: relative;
     display: block;
     margin-bottom: 0px;
     margin-top: 15%;
   }
 }

 @media only screen and (max-width: 1000px) {
   .page-header__inner h1 {
     font-size: 45px;
   }

   .team-details {
     position: relative;
     display: block;
     background: var(--logistiq-white);
     padding: 10px 0px 0px;

   }

   .wrap {
     flex-wrap: wrap-reverse;
   }

   .pt {
     padding-bottom: 10% !important;
   }

   .mt {
     margin-top: 5%;
   }
  }
  
  @media (max-width: 768px) {
   
    .wrapper {
        border-width: 10px;
        padding: 5px;
    }

    .wrapper h2 {
        font-size: 24px;
        margin: 15px 0;
    }

  
    .icon-header {
        display: grid;
        grid-template-columns: 0.8fr repeat(8, 1fr);
        gap: 2px;
    }

    .icon-unit img {
        width: 22px !important; 
        height: auto;
    }

   
    .black-heading-bar {
        display: grid;
        grid-template-columns: 0.8fr repeat(8, 1fr);
        font-size: 7px; 
        min-height: 45px;
    }

    .label-cell {
        padding: 4px 1px;
        word-break: break-word; 
        border-right: 0.5px solid #555;
    }

   
    .code-box {
        width: 45px;
        font-size: 12px;
        padding: 10px 0;
    }

    .blue-seg {
        font-size: 8px;
        padding-left: 5px;
    }

    .risk-marker {
        width: 15px;
        height: 15px;
        font-size: 9px;
    }

    .faq-panel {
        font-size: 14px;
        padding: 15px 10px;
    }
     .code-box {
     width: 50px;
     font-size: 14px;
   }

   .label-cell {
     font-size: 7px;
   }

   .faq-panel {
     margin-left: 54px;
   }
}
   


.icon-header {
    display: grid;
    
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 
    align-items: end;
    text-align: center;
}

.icon-unit img {
    width: 60px;
    height: auto;
}