.custom-tooltip {
    --bs-tooltip-bg: rgba(25, 25, 29, 0.95);
    --bs-tooltip-max-width: 900px;
    font-size: 1em !important;
  }

  
  .hex-main {
    display: flex;
    --s: 100px;
    /* size  */
    --m: 4px;
    /* margin */
    --f: calc(1.732 * var(--s) + 4 * var(--m) - 1px);
     /* margin-top: 20px; */
  }
  
  .hex-main .container {
    width: 1200px;
    font-size: 0;
    /*disable white space between inline block element */
  }
  
  .hidden {
    visibility: hidden;
  }
  
  .hexagon {
    position: relative;
    width: var(--s);
    margin: var(--m);
    height: calc(var(--s) * 1.1547);
    display: inline-block;
    font-size: initial;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: calc(var(--m) - var(--s) * 0.2885);
    transition: ease-in-out 0.2s;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
  }
  
  .hexagon:before {
    position: absolute;
    content: '';
  }
  
  .hex-main .container::before {
    content: '';
    width: calc(var(--s) / 2 + var(--m));
    float: left;
    height: 100%;
    shape-outside: repeating-linear-gradient(#0000 0 calc(var(--f) - 3px),
        #000 0 var(--f));
  }
  
  .hexagon:before {
    top: 4px;
    /* border width */
    left: 4px;
    /* border width */
    height: calc(100% - 8px);
    /* 100% - (2 * border width) */
    width: calc(100% - 8px);
    /* 100% - (2 * border width) */
    background: rgba(5, 5, 5, 0.6);
  
  }
  
  .hexagon,
  .hexagon:before {
    -webkit-clip-path: polygon(50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  }
  
  .hexagon:hover {
    background: #fff;
  }
  
  .mid span {
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 10.5px;
    transform: translate(-50%, -50%);
  
  }


  /* @media only screen and (min-width: 339px) {
    .hex-main .container {
      font-size: 0.2em;
    }
  }

  @media only screen and (min-width: 992px) {
    .hex-main .container {
      font-size: 0;
    }
  } */



  /* @media only screen and (max-width: 320px) {
    section {
      margin-bottom: -10em !important;
    }
  } */

  @media only screen and (max-width: 396px) {
    .hex-main .container {
      font-size: 4em !important;
    }
    .automotive-section {
      padding-bottom: 28em;
    }

    .medical-section .container {
      margin-bottom: 0 !important;
    }
  }

  @media only screen and (max-width: 390px) {
    .hex-main .container {
      font-size: 4em;
    }
    .automotive-section {
      padding-bottom: 18em;
    }

    .medical-section {
      padding-bottom: 18em;
    }
  }

  @media only screen and (max-width: 374px) {
    .hex-main .container {
      font-size: 4em;
    }
    .automotive-section {
      padding-bottom: 2em;
    }

    .medical-section {
      padding-bottom: 2em;
    }
  }

  
  @media only screen and (max-width: 1199px) {
    section {
      margin-bottom: 6em;
    }
  }
  
  @media only screen and (max-width: 396px) {
    .medical-section {
      margin-bottom: 40em;
    }
  }
  

  @media only screen and (max-width: 373px) {
    .medical-section {
      margin-bottom: 5em;
    }
  }

  @media only screen and (max-width: 321px) {
    .medical-section {
      margin-bottom: 5em !important;
    }
  }

  @media only screen and (max-width: 504px) {
    .medical-section .hex-main .container {
      font-size: 4em;
    }
  }

  @media only screen and (max-width: 427px) {
    .medical-section .hex-main .container {
      font-size: 0;
    }
  }

  @media only screen and (max-width: 390px) {
    .medical-section {
      margin-bottom: 15em !important;
    }
  }