@import 'home-banner.css';

.home.page-content-area { padding-bottom:0; }
.intro-section {max-width: 846px; padding: 0px 26px; }
.intro-section h2 {margin:0 0 31px}
.intro-section.top-container p { letter-spacing: 0.53px; }
.home-feature-list { margin:60px 0 95px; }
.home-feature-list .slick-track {display: flex;}
.home-feature-list .slick-list {overflow: visible; }
.home-feature-list .slick-list .btn {margin-top: auto;}
.f-list-item {  background-color: #fff; width: 285px; height: inherit; padding:35px 28px 42px; margin:0 5px; flex-wrap: wrap; align-items: center; display: flex !important;
flex-direction: column;}
.f-list-item h3 {
    margin: 0 0 10px;
}
.f-list-tem:first-child { margin-left:0; }
.f-list-icon { font-size:36px; opacity: 0.67; color:#44546b; margin: 0 0 18px; }
.f-list-item p {margin: 0 0 24px; }

.home-process { min-height:609px; background: #44546b;  padding: 68px 0 102px; }
.home-process .intro-section { max-width:730px; position: relative;}
.home-process h2, .home-process h4, .home-process p { color:#fff; }
.home-process h2 { margin-bottom: 33px; }
.hp-three-col { margin: 60px 0 0; position: relative;}
.hp-col { padding:0 54px; border-left:1px dashed #738399 }
.hp-col:first-child { border-left:none; }
.home-process h4 { margin: 0 0 14px; }
.hp-icon {color:#dee3ea; opacity:0.4; font-size:46px; margin: 0 0 20px; transition: opacity .5s ease-in-out; }
.hp-col:hover .hp-icon { opacity:1;  color: #d5dac7; }

.guide-feature { padding:80px 0; }
.gf .fs-img{ max-width: 570px; }
.gf .img-border { width: 518px; height: 470px; }
.gf .img-wrap {  width: 529px;  height: 480px;  margin: 46px 0 0 41px; position:relative; }
.gf .reverse .img-wrap {  margin: 46px 44px 0 0; }
.gf.right-aligned .fs-content { padding-left:143px; }
.gf.left-aligned .fs-content { padding-right:143px; padding-top: 75px; }
.gf .fs-content > p { margin: 0 0 18px; }

.slate-bg .gf h2, .slate-bg .gf .fs-content > p { color:#fff; }

ul.icon-list { width:100%; margin: 0 0 40px; padding:0;}
ul.icon-list li { list-style: none; margin:0; padding: 26px 0 0; width:100%; font-size: 20px; font-family: "Gotham-Medium"; border-bottom:1px solid #44546b; display: inline-block; }

ul.icon-list li a { color:#778294; position:relative; transition:all 0.5s ease-in-out; padding: 0 0 12px 54px; display: block;}
ul.icon-list li a span { position:absolute; font-size:32px; top:42%; left:0; transform:translateY(-50%); }
ul.icon-list li a:hover, ul.icon-list li.active a { color:#44546b; }

ul.icon-list.hasArrow li a:after {
    content: "\f061"; font-family: "Font Awesome 6 Free";  font-weight: 900; font-size: 32px;
    position:absolute; right:0; top:42%; transform:translateY(-50%); transition:all 0.5s ease-in-out; opacity:1;
}
ul.icon-list.hasArrow li a:hover:after, ul.icon-list.hasArrow li.active:after { right:0; opacity:1; }


.slate-bg ul.icon-list li {border-bottom-color:#fff; }
.slate-bg ul.icon-list li a { color:#a2abb7; }
.slate-bg ul.icon-list li a span.fs-icon { color:#a2abb7 !important; }
.slate-bg ul.icon-list li a:hover, .slate-bg ul.icon-list li.active a { color:#fff;}
.slate-bg ul.icon-list.hasArrow li:hover a:after { color:#fff;}
.slate-bg ul.icon-list.hasArrow li a:after {color:#a2abb7;}

.bookmark {  width: 113px; height: 103px; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #d5dac7; background-color: #888c7c;position:absolute; top:50%; transform:translateY(-50%); }
.gf.right-aligned .bookmark { left:0; }
.gf.left-aligned .bookmark { right:0; }
.slate-bg .bookmark { background-color: #778394;  color:#44546b;}


@media only screen and (max-width:1250px) {
    .f-list-item { padding-left:15px; padding-right:15px; }
 }

@media only screen and (max-width:1200px) { 
    .hp-col { padding: 0 20px; }
    .gf.right-aligned .fs-content { padding-left: 70px; }
    .gf.left-aligned .fs-content{ padding-right: 80px; }
    .gf .img-border { width: 43.167vw; height: 39.167vw; }
    .gf .img-wrap {  width: 44.083vw; height: 40vw; }
    .home-feature-list { margin-bottom:60px; }
    .f-list-item { border:1px solid #ded8c2; }
	.f-list-item p {margin: 0 auto 24px; max-width: 198px;}
}
@media only screen and (min-width:1024px) {
	.guide-feature {padding: 80px 0 99px;}
	
}
@media only screen and (max-width:1023px) {
    .home-process { min-height: inherit; padding:37px 0 70px; }
    .home-process .intro-section {max-width: 698px; }
    .hp-three-col { margin:30px 0 0; }
    .hp-icon { opacity:1; }
    .f-list-icon { line-height: normal; }
}

@media only screen and (max-width:980px) { 
    .home.page-content-area { padding-top:45px; }
    ul.icon-list.hasArrow li a:after { opacity:1; right:0; }
    .home-feature-list { margin-top:5px; }
    ul.icon-list li { font-size:16px; }
    ul.icon-list li a { font-family:"Gotham-Book"; }
    ul.icon-list li a span, 
    ul.icon-list.hasArrow li a:after  { font-size: 26px; }
    ul.icon-list li { border-bottom-color:#2c3c48 !important; }
    ul.icon-list li a { color:#2c3c48 !important; }
	ul.icon-list li a:hover, ul.icon-list li.active a {color: #4580d3 !important;}


    .slate-bg ul.icon-list li { border-bottom-color:#fff !important; }
    .slate-bg ul.icon-list li a { color:#fff !important; }
		.slate-bg ul.icon-list li a:hover span.fs-icon, .slate-bg ul.icon-list li a:hover, .slate-bg ul.icon-list.hasArrow li a:hover::after {color: #4580d3 !important;} 
}

@media only screen and (max-width:950px) { 
    .hp-three-col { flex-direction: column; margin:4px auto; max-width:650px; }
    .hp-col { border-left:none; border-bottom: 1px dashed #738399; padding-bottom: 32px; padding-top:18px; }
    .hp-col:first-child { padding-top:0; }
    .hp-col:last-child { border-bottom:none; padding-bottom: 12px; }
    .home-process h2 { margin-bottom: 15px; }
    .home-process h4 { margin: 0 0 8px; }
    .hp-col p { margin: 0 0 22px; }
    .hp-icon { line-height: normal; margin: 0 0 14px; }
    .gf .img-border { width: 40.167vw;  height: 36.167vw;  }
    .gf .img-wrap {  width: 41.083vw; height: 37.2vw; }
    .bookmark { width:80px; height:80px; font-size:36px; }
    .gf ul.icon-list li a { padding-left:40px; }
    .f-list-item { padding-top:28px; }
}

@media only screen and (max-width:950px) {
    .gf .img-wrap { margin:36px 0 0 31px; }
    .gf .reverse .img-wrap { margin:36px 31px 0 0; }
    .gf.right-aligned .fs-content { padding-left: 48px;  }
    .gf.left-aligned .fs-content { padding-right: 62px; }
    .home-feature-list { margin-bottom:30px; }
 }

 @media only screen and (max-width:767px) { 
    .gf.feature-section { flex-direction: column; }
    .gf.feature-section.left-aligned { flex-direction: column-reverse; }
    .gf .fs-img { max-width: inherit;  margin: 0 auto 68px;  width: auto; }
    .slate-bg .gf .fs-img { margin-bottom:40px; }
    .guide-feature {  padding: 38px 0 51px; }
    .guide-feature.slate-bg { padding-bottom: 73px; }
    .gf.right-aligned .fs-content,
    .gf.left-aligned .fs-content { padding:0; }
    .gf ul.icon-list li { padding-top:14px; }
    .gf ul.icon-list li a { padding-left: 45px; }
    .bookmark { width:65px; height: 60px; font-size: 26px; }
	 
	 .hp-col .learn-btn a {min-width: 166px;}
 }

 @media only screen and (max-width:650px) { 
    .gf .img-border { width:290px; height:262px; }
    .gf .img-wrap { width:298px; height:270px;  margin: 25px 0 0 25px; }
    .gf .reverse .img-wrap { margin: 25px 25px 0 0;}
 }

 @media only screen and (max-width:620px) { 
    .f-list-item { padding-top:35px; }
 }

 @media only screen and (max-width:375px) { 
    .gf .img-border { width:77.333vw; height:69.867vw; }
    .gf .img-wrap { width:79.467vw; height:72vw; }
 }