
@import '_feature-segment.css';
@import '_two-col-content.css';
@import '_cta-panel.css';
@import '_panel-call-action.css';

.home .default-banner-text h1 { font-size:48px; line-height: 56px;}

.home .seg-four-col.first { border-color: #63B5D8;  border-bottom: none;}
.home .seg-content h4{ color: #0061A0; }
.home .seg-content p { color: #353535; }
.home .non-circled .first .seg-inner:after {content: ""; z-index: -1; border-radius: 0 32px 32px 0;  border-right: 2px solid #63B5D8; border-bottom: 2px solid #63B5D8;  position: absolute;  right: -2px; top: -2px;  height: 100%;  width: 100px; }
.home .top-connector-wrap { padding: 44px 0 0; }
.home .top-connector-wrap .left-btm-curve { min-height: 223px; margin: 2px 0 0; }
.home .non-circled .first .seg-inner { padding-bottom: 58px; }
.home .btm-connector { width: calc(50% - 26px); padding: 0;  margin-bottom: 0; }

.home .main-feature { height: 33.4vw; position: relative; margin:0 0 46px; }
.home .main-feature .container { height:100%; }
.home .main-feature .mf-left,
.home .main-feature .mf-right { padding:0 0 40px; width:50%; position: relative; }
.home .main-feature .mf-left { padding-right:65px; }
.home .main-feature .mf-right { padding-left: 65px; }
.home .main-feature .mf-inner { height:100%; position: relative; }
.home .main-feature .mf-content { position:relative; }

.home .main-feature .mf-left .fit-img { width: 47vw; left: auto;  right: 0; overflow: hidden; border-radius: 0 8px 8px 0; z-index: -1; }
.home .main-feature .mf-right .fit-img { width: 47vw; left: 0;  right: auto; overflow: hidden; border-radius:8px 0 0 8px; z-index: -1; }
.home .mf-right .mf-content { padding-left:95px; } 
.home .mf-left .mf-content { padding-right:95px; }
.home .mf-content { padding-bottom:64px; width:100%; }  
.home .mf-content .h1 { color:#fff; font-size: 44px; line-height: 52px; padding: 0 0 2px; }
.home .mf-content p { font-size:20px; color:#fff; padding:0; }
.home .mf-content p a{color: #fff;}
.home .mf-content p a:hover{color: rgb(255 255 255 / 80%);}

.home .main-feature .mf-left .mf-content { text-align: right; }

.home-img-curve .left-curve, .home-img-curve .right-curve { width:105px; height:100%; position:absolute; }

.home-img-curve .left-curve { right:-66px; top:-50px; }
.home-img-curve .right-curve { left: -66px;  top: 28px;  bottom: auto; }

.home-img-curve .left-curve:after { position:absolute; right:0; content:""; border-right:2px solid #63B5D8; border-bottom:2px solid #63B5D8; width:100%; top:auto; height:80px; border-radius:0 0 64px 0; }

.home-img-curve .right-curve:before { position:absolute; left:-2px; content:""; border-left:2px solid #63B5D8; border-top:2px solid #63B5D8; width:100%; top:auto; height:100%; border-radius:64px 0 0 0; }

.home-img-curve .left-curve .plug-icon { left: -24px; top:68px; transform: rotate(-90deg); width: 18px; height: 26px; }
.home-img-curve .right-curve .plug-icon { right: -22px; transform: rotate(90deg); top: -12px; width: 18px; height: 26px; }

.home .center-seperator { width:2px; }

.home .pf-banner-wrap { background: linear-gradient(180deg, #00607f 0%, #00607f 100%); }
.home .pf-banner-inner .caption { padding:0 0 16px; color: #f3f3f3;}
.home .pf-banner-inner .h1 { color:#fff; font-size: 44px; line-height:52px; padding: 0 0 10px; }
.home .pf-banner-inner p { font-size:20px; line-height:28px; color:#fff; }
.home .pf-banner-inner { padding: 82px 0 0; }
.home .pf-banner-inner .btn{position: relative; z-index: 2;}

.home .btm-connector .tail-end { left: auto;  right: -35px;  bottom: -22px; }

.home .feature-slider-wrap { margin: 78px 0 0; padding:0; }
.home .feature-slider-wrap .fs-bg { max-height: inherit; height:auto; top:155px; z-index: -1; }
.home .feature-slider { padding: 0; margin: 0 0 150px;}
.home .reverse .cta-panel { padding:25px 0 0; }
.home .app-download { margin:0 0 78px; }
.home .app-download .micro-inner { background:#fff; }
.home .seperator { display: none; }

.non-circled.w-full.alignleft{position: relative;}
.flo_main_heading { top: -200px; left: 50%; transform: translateX(-50%); max-width: 700px; width: 100%; text-align: center; position: absolute;}
.flo_main_heading h2{text-transform: capitalize;}
.flo_main_heading h4{padding: 0 0 10px; font-family: 'Manrope', sans-serif; font-size: 16px; line-height: 20px; letter-spacing: 0.2em; font-weight: 800; text-transform: uppercase; color: #353535; opacity: 0.5; }

/*-- media css starts here --*/
@media only screen and (max-width:1182px) { 
    .home .default-banner-text h1 { font-size:32px; line-height: 40px; }
    .home .main-feature .mf-left  { padding-right:30px; }
    .home .main-feature .mf-right { padding-left:30px; }
    .home-img-curve .left-curve, .home-img-curve .right-curve { width:44px; }
    .home-img-curve .left-curve { right:-31px; }
    .home-img-curve .right-curve { left:-31px; }
    .home .mf-left .mf-content { padding-right: 63px; }
    .home .mf-right .mf-content { padding-left:63px; }
}
@media only screen and (max-width:1050px) { 
    .home .mf-content {  padding-bottom: 45px; }
}
@media only screen and (min-width: 1024px) {
    .flo_main_heading{top: -215px; left: calc(50% + 65px);}
}
@media only screen and (max-width: 1023px) and (min-width: 768px){
    .home .non-circled .seg-four-col .col:nth-child(2):after { border-radius: 0 32px 32px 0; content: ""; position: absolute; border: 2px solid #63B5D8; border-left: none; height: 100%; top: -2px; right: -28px;  width:60px; }
    .home .non-circled .seg-four-col .col:nth-child(3):after {border-radius: 32px 0 0 32px; content: ""; position: absolute; border: 2px solid #63B5D8; border-right: none; height: 100%; top: -2px; left: -28px; width: 60px;  }
    .home .non-circled .seg-four-col .col:nth-child(3), .home .non-circled .seg-four-col .col:nth-child(4) { padding-bottom:65px; }
    .home .non-circled .first .seg-inner { padding-bottom: 0; }
} 
 @media only screen and (max-width: 1023px) and (min-width: 200px){
    .home .non-circled .seg-four-col.first, 
    .home .non-circled .first .seg-inner:after{ border:none; }
    .home .mf-content .h1 { font-size:32px; line-height: 40px; }
    .home .top-connector-wrap .top-connector:before { display:none; }
    .home .pf-banner-inner { padding: 55px 0 0; }

    .home .top-connector-wrap .top-connector { min-height: 0; margin: 0 0 0 -7px; }
    .home .top-connector-wrap .top-connector .plug-icon { left: 0; right: auto; top: -26px; }
    .home .top-connector-wrap .left-btm-curve {border-radius:0 0 0 32px; min-height:186px; }
    .home .top-connector-wrap .left-btm-curve:before { display:none; }
    .home .non-circled .btm-left-curve { border-radius: 0 32px 0 0; border-right:2px solid #63B5D8; border-left:none; }
    .home .btm-connector { float:left;  margin: 0 0 0 28px; width: calc(50% - 28px); }

    .home .seperator { display: inline-block; margin: 46px 0 0; }
    .home .feature-slider-wrap { margin-top:36px; }
}
@media only screen and (max-width: 899px) and (min-width: 200px){
    .home .feature-slider { margin: 0 0 38px; }
    .home .main-feature { height: 40vw; }
}
@media only screen and (max-width: 767px) and (min-width: 200px){
    .home .pf-banner-inner .h1 { font-size:29px; line-height: 38px; }
    .home .pf-banner-inner p{font-size: 18px; line-height: 26px;}
    .home .pf-banner-img { margin:0 -20px; }
    .home .pf-banner-img img { width:100%; object-fit: cover; }
    .non-circled .seg-four-col .col { padding-bottom: 162px; padding-right:30px; padding-left: 48px; }
    .home .non-circled .seg-inner .col:nth-of-type(odd):after { border-radius: 0 32px 32px 0; content: "";  border: 2px solid #63B5D8; border-left: none;  position: absolute;  width: calc(100% - 28px);  bottom:0; right: 0; top:0; z-index: -1; }
    .home .non-circled .seg-inner .col:nth-of-type(even):before { border-radius: 32px 0 0 32px; content: "";  border: 2px solid #63B5D8; border-right: none;  position: absolute;  width: calc(100% - 28px);  bottom:0;  left: 0; top:0; z-index: -1; }  
    .home .non-circled .seg-inner .col:nth-child(4) { padding-bottom: 76px; }
    .home .non-circled .seg-inner .col:nth-child(4):before  { width:calc(50% - 28px); } 
    .home .non-circled .first .seg-inner { padding-bottom:0; }
    .home .btm-connector { width: calc(100% - 28px); margin-top: -2px; }
    
    .home .non-circled .btm-left-curve { height: 24px; }
    .home .main-feature { height: auto; }
    .home .main-feature .container { height: 100%; flex-direction: column; }
    .home .main-feature .mf-left, .home .main-feature .mf-right { height:443px; width:100%; }
    .home .main-feature .mf-left {  padding: 0 25px 25px 0;  }
    .home .main-feature .mf-left:after {content:""; position:absolute; width:calc(100% - 28px); border-radius:0 0 32px 0; border-right: 2px solid #63B5D8; border-bottom: 2px solid #63B5D8; right:0; top:0;bottom:0; z-index: -1; }
    .home .main-feature .mf-right { padding: 25px 0 25px 25px; margin:-2px 0 0; }

    .home .main-feature .mf-right:before {content:""; position:absolute; width:calc(50% - 28px); border-radius:32px 0 0 32px; border: 2px solid #63B5D8; border-right:none; left:0; top:0;bottom:0;  z-index: -1;}

    .home .main-feature .mf-left a, .home .main-feature .mf-right a { width: 100%; display: flex; height: 100%; }
    .home .center-seperator { display:none; }
    .home .main-feature .mf-inner { width:100%; }
    .home .main-feature .mf-left .fit-img,
    .home .main-feature .mf-right .fit-img  { width: calc(100% + 20px); }
    .home-img-curve .left-curve, .home-img-curve .right-curve { width:34px; }
    .home-img-curve .left-curve { right:-25px; top:-57px; }
    .home-img-curve .right-curve { left: -23px; height:78px; top:22px; }
    .home .main-feature .mf-right:after { content:""; }
    .home .main-feature .right-curve-downward { width: calc(50% - 28px); position: relative; height: 22px;}
    .home .main-feature .right-curve-downward .tail-end {  width: 16px; height: 26px; position: absolute; bottom: -25px; right: -9px; }

    .home .main-feature .mf-left .mf-content {text-align: left; padding-left: 15px; }
    .home .reverse .cta-panel { padding:74px 0 0; }
    .home .top-connector-wrap{ padding:74px 0 0;}
    .flo_main_heading{top: -225px;}
}