.feature-segment { background: linear-gradient(180deg, #63B5D8 0%, #00607f 100%); }
.seg-intro { padding: 75px 416px 82px 76px; border-left: 2px solid #002942; border-radius:0 0 0 32px; border-bottom: 2px solid #002942; width:calc(100% - 28px); }
.seg-intro .h1 { color: #002942; padding: 0 0 14px; }
.seg-intro p { font-size: 18px; font-weight:500; line-height:26px; color:#fff; }

.seg-content h4, .seg-content p { color:#fff; }
.seg-four-col { width:calc(100% - 28px); padding:0; position: relative;  }

.seg-four-col.first  { margin:-2px 0 0 28px; border: 2px solid #002942; border-left:none; border-radius: 0 32px 32px 0;}
.seg-four-col.last { margin-top:-2px; border-left: 2px solid #002942; border-top:2px solid #002942; border-radius: 32px 0 0; }
.seg-inner { padding:0 58px 56px; flex-wrap: wrap; }
.seg-inner .circled-icon { border-color:#002942; background:#63B5D8; margin:0 0 21px; }
.seg-inner .circled-inner { background:#fff; }
.first .seg-inner { margin-left:-28px; padding-bottom: 90px; }
.last .seg-inner { margin-right:-28px; }

.seg-four-col .col { padding-right:26px; padding-left:24px;  margin: -46px 0 0; }

.feature-segment.key-features { padding:104px 0; }
.key-features .seg-intro { padding-top:0; position: relative; }
.key-features .seg-four-col.first { border-radius: 0 32px 0 0; border-bottom:none; }
.key-features .first .seg-inner { padding-bottom: 24px; position:relative; }
.key-features .plug-icon { top: -25px; left: -10px; right: auto; }
.key-features .tail-end { position: absolute; width: 16px;  right: -9px; bottom: -25px; height: 26px; }

.non-circled .circled-icon { border-radius:0; width:152px; min-height: 128px; border:none; height:auto; padding:0; background:none; margin:0; }
.non-circled  .circled-inner {margin-top: auto; border-radius: 0; width:100%; background:transparent; justify-content: flex-start; }
.non-circled  .circled-inner img { max-width:100%; max-height: 128px; margin-top: auto;}

.non-circled .seg-intro { padding-bottom:174px; }
.non-circled .seg-four-col .col { padding-top: 32px; padding-bottom:32px;  margin: -162px 0 0; }
.non-circled .seg-four-col .seg-content { padding: 34px 0 0; }
.non-circled .seg-inner { padding:0 62px 42px; }
.non-circled .first .seg-inner { padding-bottom: 160px; }

.end-line { position:relative; float:left; border-left:2px solid #002942; height:55px; width:16px; top: -1px}
.end-line img { background:#fff; position:absolute; left:-8px; bottom:0;  width:16px; height:22px; }
.end-line.seg-right{float: right;}
.segments-how-it .tail-end{display: none;}
.prod-page .tail-end{display: none;}


/*-- media css starts here --*/
@media only screen and (min-width: 1024px){
    .seg-four-col .col{flex: 25%; max-width: 25%;}
    .seg-four-col .col1-of-3{flex: 33.3333%; max-width: 33.3333%; text-align: center;}
    .seg-four-col .col1-of-3 .circled-icon{margin: 0 auto;}
    .seg-four-col .col1-of-3 .circled-icon img{margin: 0 auto;}

    .seg-four-col .col:nth-child(n+5){margin-top: 26px;}

    .feature-segment .seg-four-col{ padding-bottom: 120px; width:100%;}
    .feature-segment .seg-four-col:nth-child(odd){margin-top: -2px; border: 2px solid #002942; border-left: none; border-radius: 32px; border-top-left-radius: 0; border-bottom-left-radius: 0; right: -28px; } 
    .feature-segment .seg-four-col:nth-child(odd) .seg-inner{margin-left: -28px; } 
    .feature-segment .seg-four-col:nth-child(even) {margin-top: -2px; border: 2px solid #002942; border-right: none; border-radius: 32px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .feature-segment .seg-four-col.first{padding-bottom: 0;}
    .feature-segment .seg-four-col:last-child:nth-child(even){ border-bottom: none; border-bottom-left-radius: 0; }
    .feature-segment .seg-four-col:last-child:nth-child(odd){border-bottom: none; border-bottom-right-radius: 0; }
    .end-line.seg-right{float: right; right: -42px;}

    .products .of-panel .tail-end.key-tail-right{ float: right; right: -35px; left: auto; }
    .segments-how-it .feature-segment .seg-four-col.first{margin-left: 0;}
}
@media only screen and (max-width:1250px) {
    .seg-four-col .col, .non-circled .seg-four-col .col { padding-left:15px; padding-right:15px; }
}
@media only screen and (min-width:1024px) and (max-width:1152px) { 
    .seg-inner, .non-circled .seg-inner { padding-left:30px; padding-right:30px; }
    .segments .seg-intro, .non-circled .seg-intro {  padding-left:32px; }
}
@media only screen and (max-width:1023px) { 
    .segments .seg-inner { padding-bottom:0; }
    .segments .seg-intro { padding: 75px 76px 82px 42px; }
    .non-circled .seg-intro { padding-right:76px; padding-left:42px;  }
    .segments .first .seg-inner { padding-bottom:0; }
    .segments .seg-inner { flex-wrap:wrap; }
    .seg-four-col.first, .seg-four-col.last { border:none; }

    .key-features .seg-intro { padding: 18px 48px 82px; }
    .key-features .seg-four-col { margin:0; width:100%; padding:0 28px; }
    .key-features .seg-inner { margin:0; padding: 0 0 56px; flex-wrap:wrap; }
    .key-features .seg-four-col .col { margin:0; }
    .key-features .seg-inner .circled-icon { margin-top:-48px; z-index: 1;}
    .feature-segment.key-features { padding: 80px 0; }
    .key-features .tail-end { right: auto;  left: -35px;   bottom: -3px;  }

}
@media only screen and (min-width:751px) and (max-width:1023px) {
    .non-circled .seg-inner { flex-wrap:wrap; }
    .segments .seg-four-col .col, .non-circled .seg-four-col .col { width:50%; margin:0; border-top: 2px solid #63B5D8; padding-bottom: 161px; position:relative; }
    .segments .seg-four-col .col { border-color:#002942; padding-bottom: 74px; }
    .non-circled .seg-inner { padding-left:28px; padding-right:28px; }
    .non-circled .seg-four-col .col:nth-child(3),
    .non-circled .seg-four-col .col:nth-child(4) { padding-bottom:20px; }
    .segments .seg-inner .circled-icon { margin-top: -48px; }
    .non-circled .seg-inner .circled-icon { margin: -161px 0 0; }

    .segments .seg-inner .col:nth-child(2):after { content:""; position:absolute; right:-58px; width:62px; border-radius:0 32px 32px 0; top:-2px; bottom:-2px; border:2px solid; border-left:none;  }
    .segments .seg-inner .col:nth-child(3):after { content:""; position:absolute; left:-58px; width:62px; border-radius:32px 0 0 32px; top:-2px; bottom:0; border:2px solid; border-right:none;  }
    .segments .last .seg-inner .col:nth-child(3):after { border-radius:32px 0 0 0; border-bottom:none; }

    .key-features .seg-four-col .col { width:50%; padding-bottom: 75px; border-bottom:2px solid; position:relative; }
    .key-features .seg-four-col .col:nth-child(2):after { border-radius: 0 32px 32px 0; content: ""; position: absolute; border: 2px solid; border-left: none; top: -2px; bottom:-2px; right: -28px; width: 60px; }
    
    .key-features .seg-four-col .col:nth-child(3), 
    .key-features .seg-four-col .col:nth-child(4) { border-bottom:none; padding-bottom:50px; }

    .key-features .seg-four-col .col:nth-child(3):before {border-radius: 32px 0 0 0; content: ""; position: absolute; border: 2px solid; border-right: none; top: -2px; bottom:-2px; left: -28px; width: 60px; border-bottom:none; }


    .key-features .feature-segment .seg-four-col:first-child{margin-top: 0;}
    .feature-segment .seg-four-col{width: 100%;}
    .feature-segment .seg-four-col:first-child{margin-top: -2px;}
    .feature-segment .seg-four-col:last-child .seg-inner .col:nth-last-child(2){border-bottom: none;}
    .feature-segment .seg-four-col:last-child .seg-inner .col:last-child{border-bottom: none;}
    .feature-segment .seg-four-col:last-child .seg-inner .col:last-child:after{border-bottom-left-radius: 0; border-bottom: none;}
    .feature-segment .seg-four-col:last-child .seg-inner .col:nth-last-child(2):after{border-bottom-left-radius: 0; border-bottom: none;}


}
@media only screen and (max-width:750px) {
    .key-features .seg-inner { display:block; }
    .non-circled .seg-four-col.first { margin:0; width:100%; }
    .non-circled .seg-inner { flex-direction: column; padding:0; margin:0; }
    .non-circled .seg-four-col .col { width:100%; padding:0 30px; position:relative; margin:-2px 0 0; }
    .non-circled .seg-four-col .col { padding-bottom: 162px; }
    .non-circled .circled-icon { margin: -126px 0 0; }

    .segments .seg-intro { padding: 38px 30px 82px; }
    .segments .seg-inner { padding:0 28px; display:block; }
    .segments .seg-four-col .col { padding: 0 5px 72px; margin:0 0 -2px; border-color:#002942; position:relative; border-top:2px solid; border-bottom:2px solid;  }
    .segments .first .seg-inner { margin-bottom: 2px; }
    .segments .seg-inner .circled-icon { margin:-46px 0 0; z-index: 1;}
    .segments .seg-inner .seg-content { padding:20px 0 0; }
    .feature-segment.key-features { padding: 52px 0 80px; }
    .key-features .seg-intro { padding-left:22px; padding-right:0;  }
    .key-features .seg-four-col .col { padding:0 0 72px; border-bottom:2px solid; position:relative; }
    .segments .seg-inner .col:nth-of-type(odd):after, .key-features .seg-inner .col:nth-of-type(odd):after  { content:""; position:absolute; right:-28px; width:62px; border-radius:0 32px 32px 0; top:-2px; bottom:-2px; border:2px solid; border-left:none;  }

    .segments .seg-inner .col:nth-of-type(even):after, .key-features .seg-inner .col:nth-of-type(even):after { content:""; position:absolute; left:-28px; width:62px; border-radius:32px 0 0 32px; top:-2px; bottom:-2px; border:2px solid; border-right:none;  }
    .segments .seg-four-col.last .col:last-child, .key-features .seg-four-col .col:nth-of-type(4)  { border-bottom:none; padding-bottom: 35px; }
    .segments .seg-four-col.last .col:last-child:after, .key-features .seg-four-col .col:nth-of-type(4):after { border-bottom:none; border-radius: 0 32px 0px 0; bottom:0; }

    .segments .seg-four-col.last .col:first-child{border-top: none;}


    .key-features .seg-four-col .col:nth-child(5){padding-top: 15px; border-top: 2px solid;}
    .key-features .seg-four-col .col:nth-child(5):before{top: -2px; left: -28px; width: 100px; border-top: 2px solid; content: ""; position: absolute;}
    .key-features .seg-four-col .col:nth-child(6){border-bottom: none;}
    .key-features .seg-four-col .col:nth-child(6):after{border-radius: 32px 0 0 0; border-bottom: none;}

    .feature-segment .seg-four-col{width: 100%;}
    .feature-segment .seg-four-col:first-child{margin-top: -2px;}
    .feature-segment .seg-four-col:last-child .seg-inner .col:last-child{border-bottom: none;}
    .feature-segment .seg-four-col:last-child .seg-inner .col:last-child:after{border-bottom-left-radius: 0; border-bottom: none;}

    
    .key-features.feature-segment .seg-four-col:first-child{margin-top: 0;}
    .key-features .tail-end{bottom: 0;}
    .tail-end.key-tail-left, .tail-end.key-tail-right{width: 62px;}
    .tail-end.key-tail-left { right: auto; left: -27px; }
    .tail-end.key-tail-right{right:0; left: auto; }
    .tail-end.key-tail-left img, .tail-end.key-tail-right img{width: 16px; position: relative;}
    .tail-end.key-tail-left img { left: -7px; }
    .tail-end.key-tail-right img{ left: 34px; margin-left: auto; }
    .tail-end.key-tail-left::before, .tail-end.key-tail-right::before{ top: 0; width: 60px; height: 40px; content: ""; display: block; position: relative; }
    .tail-end.key-tail-left::before { left: 0; border-top: 2px solid #002942; border-left: 2px solid #002942; border-top-left-radius: 32px; }
    .tail-end.key-tail-right::before { right: -27px; border-top: 2px solid #002942; border-right: 2px solid #002942; border-top-right-radius: 32px; }

}