.coil-tubbing .subBanner { height: 80vh; }
.headTextGrid { padding: 120px 0; position: relative; z-index: 1; overflow: clip; }
.headTextGrid:before { content: ''; position: absolute; width: 100%; height: 100%; background: url(../../images/dot-bg-2.png)center center no-repeat; background-size: cover; left: 0; bottom: -25%; z-index: -1; opacity: 0.5; }
.headTextGridInner .subTextLg { color: var(--colorText); padding: 14px 0 14px 40px; border-left: 2px solid var(--colorSecondary); position: relative; margin-top: 100px; }
.headTextGridInner .subTextLg:before { content: ''; position: absolute; width: 12px; aspect-ratio: 1; background-color: var(--colorSecondary); border-radius: 50%; left: -7px; top: 0; }
.headTextGridInner .subTextLg:after { content: ''; position: absolute; width: 12px; aspect-ratio: 1; background-color: var(--colorSecondary); border-radius: 50%; left: -7px; bottom: 0; }
.gridThree { margin: 110px 0 0 0; }
.gridThreeBox { padding: 40px; background-color: #F4F3F8; border-radius: 32px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
.gridThreeBox .gridThreeIndex { color: var(--colorAccent); font-size: var(--font9xl); opacity: 0.3; text-align:right}
.gridThreeBox .subText2xl { color: var(--colorBlack); }