@import url("_hero-banner.css");
@import url("_logolist-module.css");
@import url("_testimonial-module.css");
@import url("_ss-module.css");
@import url("_kisp-overview-module.css");
@import url("_blog-feature-module.css");
@import url("_featurette-module.css");
@import url("_cta-module.css");



.testimonial-module {background: var(--base-elevated);}

/* Blog Feature */
.blog-feature {padding:80px 0 40px;}

/* CTA module */
.cta-module {padding-top: 0;}

.scroll-nav-section {clear: both; width: 100%; position: relative; z-index: 1; padding: 83px 0 80px 0;}
.scroll-nav-main {gap: 80px;}
.scroll-nav-left {flex: 0 0 200px;}

.scroll-nav-right {flex: 1;}
.scroll-navrt-inner {gap: 40px 0;}
.scroll-nav-right .h1b {margin-bottom: 37px;}
.scroll-nav-row {gap:40px; padding:40px; flex-direction: row-reverse;}
.scroll-nav-image {flex: 0 0 440px; min-height: 293px;}
.scroll-nav-text {flex: 1; padding: 20px;}
.scroll-nav-text .h3 {margin-bottom: 38px;}
ul.scroll-nav-list {gap: 40px;}
ul.scroll-nav-list li {flex: 0 0 calc(20% - 32px); gap: 7px;}
.scroll-nav-lists:before {content: ""; background: var(--white); width: 100%; height: 100%; z-index: -1; position: absolute; left: 0; top: 0; clip-path: var(--path-120-1);}



.scroll-nav-text span.optional-text {font-size: 1rem; line-height: 1; color: var(--brand-blue); margin-bottom: 11px;}
.scroll-nav-text p {font-size: 0.875rem; line-height: 1.5;}
.scroll-nav-text .readmore {margin-top: 18px;}


.scroll-nav-stripe {padding:0 0 0 10px;}
.scroll-nav-lines {background-color: var(--brand-green); height: 100%; left:3px; opacity:0.5; top: 0; width: 2px;}

ul.scroll-nav-links {gap:6px; margin: 0;}
ul.scroll-nav-links li {margin: 0; display: block; width: 100%;}
ul.scroll-nav-links li:before {display: none;}
ul.scroll-nav-links li a {display: block; font-size: 0.875rem; font-weight: 400; line-height: 125%; opacity: .5; padding:10px; position: relative;}
ul.scroll-nav-links li a span {display: block; font-weight: 900; font-family: 'Correct XXX Condensed', sans-serif; text-transform: uppercase; font-size: 1.75rem; letter-spacing: 0.56px; color: var(--brand-green); line-height: 1;}
ul.scroll-nav-links li a:hover, ul.scroll-nav-links li a.active {opacity: 1;}
ul.scroll-nav-links li a.active span, ul.scroll-nav-links li a:hover span {color: var(--brand-blue); font-weight: bold;}
ul.scroll-nav-links li a:before {background-color: var(--brand-blue); content: ""; height: 72px; left: -10px; opacity: 1; position: absolute; top: 50%; transform: translateY(-50%) scaleY(0); transform-origin: top; width: 8px;}
ul.scroll-nav-links li a.active:before {transform: translateY(-50%) scaleY(1); transition: transform .5s ease;}
ul.scroll-nav-links li a:after {display: none;}


.sec-wrap ~ .cta-module {padding-top: 40px;}

/*-- media css starts here --*/

@media screen and (max-width:1280px) {
    .scroll-nav-text p, ul.scroll-nav-links li a {font-size: 0.75rem;} 
    
}
    

@media screen and (max-width:1280px) and (min-width:1024px) {
    .scroll-nav-left {flex: 0 0 168px;}
    .scroll-nav-image {flex: 0 0 376px; min-height:251px;}
}


@media screen and (max-width:1180px) and (min-width:200px) {
    .scroll-nav-image {flex: 0 0 100%; min-height:251px;}
}

@media screen and (min-width:1024px) {
.cta-module::before { top: 80px;}
}

@media screen and (max-width:1023px) and (min-width:768px) {
    .scroll-nav-section {padding: 64px 0;}
    .scroll-nav-lists::before {clip-path: var(--path-96-1);}
    .scroll-nav-main {gap:64px;}
    .scroll-nav-left {flex: 0 0 136px; margin: 6px 0 0 0;}
    .scroll-nav-row {padding: 32px; gap: 34px;}
    .scroll-nav-text {padding: 16px;}
    .scroll-nav-text .h3 {font-size: 2rem; letter-spacing: 0.64px;}
    ul.scroll-nav-links li a span {font-size: 1.5rem;}
  
}
@media screen and (max-width:767px) and (min-width:200px) {
    .scroll-nav-section {padding: 40px 0;}
    .scroll-navrt-inner {gap:20px 0;}
    .scroll-nav-lists::before {clip-path: var(--path-60-1);}
    .scroll-nav-row {padding:20px; gap:22px;}
    .scroll-nav-image {flex: 0 0 100%; min-height:180px;}
    .scroll-nav-text {padding: 12px 12px 10px 12px;}
    .scroll-nav-text span.optional-text {margin-bottom: 10px;}
    .scroll-nav-text .h3 {margin-bottom: 18px;}
    .scroll-nav-text p {margin-bottom: 15px;}
    .scroll-nav-text .readmore {margin: 0;}
    .scroll-nav-right .h1b {margin-bottom: 17px;}
}



@media only screen and (max-width: 1023px) and (min-width:768px){
.logolist-module {padding: 0 0 61px 0;}
}

@media only screen and (max-width: 767px) and (min-width: 200px){
    .cta-module {padding: 24px 0;}

}