/* Blog post */
.blog-post{margin:0 auto;max-width:960px}
.blog-post__meta{margin-bottom:1.4rem}
.blog-post__meta a{text-decoration:underline}
.blog-post__timestamp{display:block}
.blog-post__tags svg{height:auto;margin-right:.35rem;width:15px}
.blog-post__tag-link{font-size:.875rem}
.blog-related-posts{background-color:#f8fafc}
.blog-related-posts h2{text-align:center}
.blog-related-posts__list{display:flex;flex-wrap:wrap}
.blog-related-posts__post{flex:0 0 100%;padding:1rem}
@media screen and (min-width:768px){
.blog-related-posts__post{flex:0 0 calc(100% / 2)}
}
@media screen and (min-width:1000px){
.blog-related-posts__post{flex:0 0 calc(100% / 3)}
}
.blog-related-posts__image{height:auto;max-width:100%}
.blog-related-posts__title{margin:.7rem 0}
.blog-comments{margin:0 auto;max-width:680px}
.blog-comments .hs-submit{text-align:center}
.blog-comments .comment-reply-to{border:0 none}
.blog-comments .comment-reply-to:focus,.blog-comments .comment-reply-to:hover{background-color:transparent;text-decoration:underline}


/* Custom css  */



.featured-blog-Inner { display: flex; flex-wrap: wrap; align-items: center; padding: 20px; border: 1px solid #BDD3E9; position: relative; }
.featured-blog-left { width: 48.8%; height: 385px; overflow: hidden; }
.featured-blog-right { width: calc( 100% - 48.8% ); padding: 50px 30px 50px 50px; }
.featured-blog-right label.read-btn { margin: 0; }
.featured-blog-sec { padding: 100px 0 50px 0px; }
.featured-blog-left img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.featured-blog-left-img { width: 100%; height: 385px; transition: all 0.5s ease; }
.featured-blog-Inner:hover .featured-blog-left-img { transform: scale(1.1); }
.featured-blog-head { margin-bottom: 35px; }



.blog-list-filter-wrap { display: flex; flex-wrap: wrap; align-items: center; }
.wrap-drop ul.drop { background: #fff; border: 1px solid rgba(85, 85, 85, .2); box-shadow: 3px 3px 10px rgba(0, 0, 0, .2); display: none; left: 0; list-style: none; margin: 5px 0 0; max-height: 240px; opacity: 0; overflow-y: auto; padding: 6px 0 0; pointer-events: none; position: absolute; right: 0; top: 88%; z-index: 2 }
.wrap-drop>span { background: #012060; border-radius: 0; color: #fff; display: inline-block; overflow: hidden; padding: 10px 45px 10px 20px; text-align: left; text-overflow: ellipsis; text-transform: capitalize; white-space: nowrap; min-width: 359px; width: 100%; font-size: 18px; font-weight: 400; line-height: 1.56; text-align: left; background-image: url('https://info.eclaro.com/hubfs/Eclaro%202024/Images/Group%20%2826%29.svg'); background-repeat: no-repeat; background-position: right 20px center; background-size: 20px 11px; cursor: pointer; }
.wrap-drop.active .drop { display: block; opacity: 1; pointer-events: auto ; }
.wrap-drop { position: relative; font-size: 0;max-width:365px; }
.wrap-drop a, a.topic-link { color: var(--primary_color); padding: 10px; width: 100%; display: flex; flex-wrap: wrap; font-size: 18px; font-weight: 400; line-height: 1.5; text-align: left;  }
.wrap-drop a:hover, a.topic-link:hover { color: var(--secondary_color); }
.wrap-drop.active>span { background-image: url('https://info.eclaro.com/hubfs/Eclaro%202024/Images/Vector%20%2893%29.svg'); }
button.search-btn { padding: 0; margin: 0; background: transparent; border: none; width: 20px; height: 20px; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.hs-search-field { position: relative; }
.blog-list-search { width: calc(100% - 365px); padding-left: 30px; }
.blog-list-search input.hs-search-field__input { font-family: Arial; font-size: 18px; font-weight: 400; line-height: 1.56; text-align: left; border: 1px solid #BDD3E9; padding: 9px 45px 9px 20px !important; }
.blog-category-sec { padding: 50px 0 60px 0; }
.blog-list-search .hs-search-field--open .hs-search-field__suggestions { background-color: #fff; border: 0; box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1); max-height: 250px; max-width: 100%; overflow-y: auto; padding: 10px; position: absolute; z-index: 9; width: 100%; }
.blog-list-search .hs-search-field__suggestions li a { padding: 0; font-size: 16px; line-height: normal; margin: 0; transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
.blog-list-search ul.hs-search-field__suggestions>li>a { color: var(--primary_color) !important; font-size: 15px; }
.blog-list-search ul.hs-search-field__suggestions>li:first-child { font-size: 16px; font-weight: 700; }
.blog-list-search ul.hs-search-field__suggestions>li { font-size: 0; margin-bottom: 4px; }
.blog-list-search .hs-search-field__suggestions li a:hover { color: var(--secondary_color) !important; }
.blog-list-search .hs-search-field__suggestions::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; }
.blog-list-search .hs-search-field__suggestions::-webkit-scrollbar { width: 3px; background-color: #F5F5F5; }
.blog-list-search .hs-search-field__suggestions::-webkit-scrollbar-thumb { background-color: var(--primary_color); }


.blog-list-group { display: flex; flex-wrap: wrap; margin: 0 -15px; gap: 30px 0; }
.blog-list-main { width: 33.33%; padding: 0 15px; }
.blog-list-inner { padding: 20px; background: var(--white_color); position: relative; display: flex; flex-wrap: wrap; height: 100%; }
.blog-list-cont { display: flex; flex-wrap: wrap; width: 100%; height: calc(100% - 233px); }
.blog-list-image-wrapper { width: 100%; height: 233px; overflow: hidden; }
.blog-list-image { width: 100%; height: 233px; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: all 0.5s ease; }
.blog-list-inner:hover .blog-list-image { transform: scale(1.1); }
.blog-list-sec { padding: 100px 0; }
.blog-list-cont>h4 { margin-bottom: 40px; }
.blog-pagination>ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; }
.blog-pagination>ul li { display: flex; flex-wrap: wrap; font-weight: 400; }
.blog-pagination>ul .pg { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.blog-pagination>ul li a { display: flex; flex-wrap: wrap; font-size: 16px; font-weight: 400; line-height: 1.625; text-align: left; color: var(--primary_color); width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--primary_color); }
.blog-pagination>ul li.active a, .blog-pagination>ul li a:hover { color: var(--white_color); background: var(--primary_color); }
.blog-pagination>ul li a .hoverarrow { display: none; }
.blog-pagination>ul li a:hover .hoverarrow { display: block; }
.blog-pagination>ul li a:hover .normalarrow { display: none; }
.blog-pagination { margin-top: 60px; }


.blog-post-banner-wrap { display: flex; flex-wrap: wrap; align-items: center; }
.blog-post-banner-left { width: 58%; height: 545px; }
.blog-post-banner-sec { padding: 150px 0 100px 0; }
.blog-post-banner-right { width: calc(100% - 58%); padding-left: 60px; }
.blog-post-banner-img { margin-bottom: 20px; margin-top: 20px; }
.blog-post-banner-content h1 { margin: 0; }
.blog-post-banner-left img { width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.blog-post-banner-content * { color: var(--white_color); }
.blog-post-banner-content>p { margin-bottom: 20px; color: var(--secondary_color); }
.blog-post__body { padding: 100px 0 30px 0; }
.blog-post__body h2, .blog-post__body h3, .blog-post__body h4, .blog-post__body h5, .blog-post__body h6 { margin: 60px 0 30px 0; }
.blog-post__body img { width: 100%; height: 100%; object-fit: cover; object-position: center center; margin: 30px 0 0 0; }
.blog-post__body blockquote { border-left-width: 5px; border-left-style: solid; padding: 20px; margin-bottom: 30px; background: var(--primary_color); color: var(--white_color); }
.blog-post__body ul, .blog-post__body ol { margin: 30px 0 30px; padding-left: 18px; }
.blog-post__body ul li { list-style-type: disc; margin-bottom: 10px; }
.blog-post__body ol li { list-style-type: auto; margin-bottom: 10px; }
.blog-post__body .hs-video-container { max-width: 100% !important; !i; !; }
.blog-post__body .hs-video-widget { margin: 30px 0; }
.blog-post__body .hs-embed-wrapper { max-width: 100% !important; min-width: 100% !important; height: 100% !important; margin: 30px 0 !important; }

ul.blog-post-share-wrap li>a { width: 36px; height: 36px; background: var(--primary_color); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
ul.blog-post-share-wrap { display: flex; flex-wrap: wrap; gap: 15px; }
.blog-post-share { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 20px; padding: 30px 0 60px 0; border-top: 1px solid var(--primary_color); }
.blog-post-share h5 { margin: 0; }
ul.blog-post-share-wrap li>a:hover { background: var(--secondary_color); }

.blog-post-form-wrap { background: var(--primary_color); padding: 50px 30px; }
.form-contact-srt .submitted-message { color: var(--white_color) !important; }
.form-contact-srt .hs-form-field>label, .form-contact-srt form  label { color: var(--white_color) !important; }
.blog-post-form-heading * { color: var(--white_color); }
.blog-post-form-sec { padding-bottom:50px; }
.blog-post-form-heading { margin-bottom:40px; }

.blog-post-related-wrapper { display: flex; flex-wrap: wrap; margin: 0 -15px; gap: 30px 0; justify-content: center; }
.blog-post-related-blog-main { width: 33.33%; padding: 0 15px; }
.blog-post-related-item { padding: 20px; border: 1px solid var(--tertiary_color); position: relative; display: flex; flex-wrap: wrap; height: 100%; }
.blog-post-related-cont { display: flex; flex-wrap: wrap; width: 100%; height: calc(100% - 233px); }
.blog-post-related-img-wrapper { width: 100%; height: 233px; overflow: hidden; }
.blog-post-related-img { width: 100%; height: 233px; background-size: cover; background-position: center center; background-repeat: no-repeat; transition: all 0.5s ease; }
.blog-post-related-cont h4 { margin-bottom: 40px; }
.blog-post-related-item:hover .blog-post-related-img { transform: scale(1.1); }
.blog-post-related-blog { padding: 50px 0 100px 0; }
.blog-post-related-blog-heading { text-align: center; margin-bottom: 60px; }



@media (max-width:1280px) {
  .featured-blog-left, .featured-blog-left-img { height: 340px; }
  .blog-list-image-wrapper, .blog-list-image { height: 200px; }
  .blog-list-cont { height: calc(100% - 200px); }
  .blog-post-banner-left { height: 398px; }
  .blog-post__body h2, .blog-post__body h3, .blog-post__body h4, .blog-post__body h5, .blog-post__body h6 { margin: 30px 0 30px 0; }
  .blog-post-related-cont { height: calc(100% - 200px); }
  .blog-post-related-img-wrapper, .blog-post-related-img-wrapper { height: 200px; }

}
@media (max-width:1150px) {
  .featured-blog-head { margin-bottom: 30px; }
  .featured-blog-sec { padding: 70px 0 35px 0; }
  .featured-blog-left, .featured-blog-left-img { height: 290px; }
  .featured-blog-right { padding: 35px 15px 35px 35px; }
  .blog-category-sec { padding: 35px 0 60px; }
  .blog-list-sec { padding: 70px 0; }
  .blog-pagination { margin-top: 40px; }
  .blog-post-banner-left { height: 383px; }
  .blog-post-banner-right { padding-left: 40px; }
  .blog-post-banner-sec { padding: 50px 0 70px 0; }
  .blog-post__body h2, .blog-post__body h3, .blog-post__body h4, .blog-post__body h5, .blog-post__body h6 { margin: 20px 0; }
  .blog-post__body p { margin-bottom: 20px; }
  .blog-post__body img { margin: 15px 0; }
  .blog-post__body blockquote { margin-bottom: 20px; }
  .blog-post__body ul, .blog-post__body ol { margin: 20px 0; }
  .blog-post__body .hs-video-widget { margin: 20px 0; }
  .blog-post__body .hs-embed-wrapper { margin: 20px 0 !important; }
  .blog-post__body { padding: 70px 0 30px 0; }
  .blog-post-related-blog { padding: 35px 0 70px 0; }
  .blog-post-related-blog-heading { margin-bottom: 40px; }

}
@media (max-width:991px) {
  .featured-blog-head { margin-bottom: 25px; }
  .featured-blog-sec { padding: 60px 0 30px 0; }
  .featured-blog-left, .featured-blog-left-img { height: 250px; }
  .featured-blog-right { padding: 20px 0 20px 20px; }
  .blog-category-sec { padding: 30px 0 60px; }
  .blog-list-main { width: 50%; }
  .blog-list-sec { padding: 60px 0; }
  .blog-pagination { margin-top: 30px; }
  .blog-post-banner-left { width: 50%; height: 310px; }
  .blog-post-banner-right { width: 50%; padding-left: 30px; }
  .blog-post-banner-sec { padding: 90px 0 60px 0; }
  .blog-post__body { padding: 60px 0 40px 0; }
  .blog-post-related-blog-main { width: 50%; }
  .blog-post-related-cont h4 { margin-bottom: 25px; }
  .blog-post-related-blog { padding: 30px 0 60px 0; }
  .blog-post-related-blog-heading { margin-bottom: 30px; }
  .blog-post-form-heading { margin-bottom:30px; }
}
@media (max-width:767px) {
  .featured-blog-sec { padding: 50px 0 25px 0; }
  .featured-blog-left { width: 100%; }
  .featured-blog-right { width: 100%; padding: 20px 0 0 0; }
  .wrap-drop span { min-width: 100%; width: 100%; }
  .wrap-drop { width:100%; max-width:100%; margin-bottom:20px;}
  .blog-list-search { width: 100%; padding-left:0px; }
  .blog-category-sec { padding: 25px 0 50px; }
  .blog-list-sec { padding: 50px 0; }
  .blog-pagination>ul li a { width: 30px; height: 30px; }
  .blog-post-banner-left { width: 100%; height: auto; }
  .blog-post-banner-right { width: 100%; padding: 30px 0 0 0; }
  .blog-post-banner-sec { padding: 90px 0 50px 0; }
  .blog-post__body { padding: 50px 0 10px 0; }
  .blog-post-share { padding:50px 0; }
  .blog-post-form-wrap { padding: 30px 20px; }
  .
  .blog-post-form-wrap {max-width: 480px; margin: 0 auto;}
}

@media (max-width:640px) {
  .blog-list-main { width: 100%; padding: 0; }
  .blog-list-group { margin: 0; }
  .blog-post-related-blog-main { width: 100%; padding: 0; }
  .blog-post-related-wrapper { width: 100%; margin: 0; }
  .blog-post-related-blog { padding: 25px 0 50px 0; }
}

@media (max-width:480px) {
  .featured-blog-left, .featured-blog-left-img { height: 195px; }
  .wrap-drop { width: 100%; }
  .blog-list-search { width: 100%; padding:0px 0 0 0; }
  .blog-pagination>ul li a { font-size: 15px; height: 25px; width: 25px; }
}