.container-blog-listing {
  max-width: 1144px!important;
  margin: 0 auto;
  padding:30px 0;
}

.blog-index {
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}

.blog-index article, .blog-index article img {
  background-color:#ffffff;
}

.blog-post__text-box_post_body img {
  max-width:700px;
  height:auto;
}

.blog-post__text-box_post_body a span,.blog-post__text-box_post_body a {
 color:#1d777a;
}

.blog-index article{
  border-radius:8px;
}

.blog-index article h3 a{
  color: #1b1b26;
  font-size:24px;
  text-decoration: none;
}

.blog-index article p {
  margin:0;
}

.blog-index article p span {
  font-weight:400;
  font-size:16px;
}

.latest-post-btn {
  margin-top:20px;
}

.latest-post-btn a {
  color: #1b1b26;
  text-decoration: none;
  margin-top:20px;
}

.latest-post-btn a:hover {
  color: #c6d014;
}

.latest-post-btn a:after {
  background-image: url(https://6518621.fs1.hubspotusercontent-na1.net/hubfs/6518621/Inpo%202023%20website/leading-arrow-link.svg);
  background-repeat: no-repeat;
  background-size: contain;
  content: "";
  display: inline-block;
  font-weight: 400;
  height: 16px;
  margin-left: 8px;
  transform: rotate(1turn);
  vertical-align: middle;
  width: 16px;
}

.tag a {
  background-color: #eef1bd;
  border: none;
  border-radius: 4px;
  color: #1b1b26;
  display: inline-block;
  font-size: 16px;
  margin: 4px 0;
  padding: 4px 12px;
  text-decoration:none;
}

.blog-index__post-content .blog-index__post-content--list .tag {
  margin-top:0;
}

.blog-index__post-content {
  padding:16px 25px 20px; 
}

.blog-index article img {
  height:200px;
  object-fit:cover;
  width: 100%;
  border-radius: 8px 8px 0 0 ;
}

.blog-index__post-post-summary--list{
  max-height:97px;
  overflow:hidden;
}

.pagination-container{
  margin-top:40px;
  display:flex;
  justify-content:center;
}

.pagination-container svg {
  fill:#1D777A;
}

.pagination-container nav {
  display:flex;
  flex-direction:row;
  gap:20px;
}

.number-link a {
  text-decoration:none;
  color:#1D777A;
  border:2px solid #1D777A;
  padding:4px 8px;
}

.blog-pagination__link--active {
  background-color:#1D777A;
  color:#F0F7FA!important;
}

@media screen and (min-width:1000px) {
  .body-container .body-container--blog-index {
    max-width: 1041px;
    margin: 0 auto;
    padding:30px 0;
  }
} 


/*POST PAGE*/
.container-herobanner {
  position: relative;
}


.post_wrapper li::marker {
  color:#5B9A9B;
  font-size:18px;
}

.btn-herobanner-container{
  margin-top:16px;
}

.btn-inpo-september-2023 a{
  text-decoration:none;
}

.container-herobanner .main-herobanner-image {
  width:100%;
  height:600px;
  object-fit: cover;
  object-position: 75%;
  margin:0!important;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 75%);
}

.overlay-0 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 0%);
}

.overlay-10 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 10%);
}

.overlay-20 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 20%);
}

.overlay-30 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 30%);
}

.overlay-40 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 40%);
}

.overlay-50 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 50%);
}

.overlay-60 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 60%);
}

.overlay-70 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 70%);
}

.overlay-80 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 80%);
}

.overlay-90 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 90%);
}

.overlay-100 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 100%);
}

.text-box-herobanner h1{
  font-size:38px;
  margin:12px 0;
  font-weight:bold;
  letter-spacing: -2.86px;
}

.text-box-herobanner p{
  font-size:18px;
  font-weight:400;
  letter-spacing: -0.43px;
}

.text-box-herobanner {
  position: absolute;
  top: 50%; 
  left: 2%; 
  color: #fff; 
  padding: 10px; 
  max-width: 1200px;
  z-index:2;
}

.bottom-text {
  position: absolute;
  top: 105%; 
  left: 0%; 
  color: #fff; 
  padding: 10px; 
  max-width: 1200px;
  z-index:2;
}

.bottom-text img{
  position: absolute;
  top: 50%; 
  left: 56%; 
  z-index:2;
  width:100px
}

.main-author-details-text-box{
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding:20px 0;
}

@media screen and (min-width:450px) {
  .main-author-details-text-box{
    flex-direction: row-reverse;
    justify-content: start;
  }
}

.author-details-img {
  width:116px;
  height:116px
}

.author-details-img img{
  width:116px;
  height:116px;
  border-radius:50%;
}

.btn-inpo-september-2023 a {
  color: #1F1F40!important;
  font-weight:600!important;
}

.btn-inpo-september-2023:hover {
  background-color: #a1cfd0;
}

.centered-content {
  display: flex;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.rotate {
  transform: rotate(270deg);
}

.container-herobanner .text-box-herobanner h1 {
  position: relative;
}

.container-herobanner .text-box-herobanner .slide-image {
  position: absolute;
  top:26%;
  left:10%;
  width: 144px;
  height: 25px;
}

.herobanner-menu-container{
  display:none;
}

.herobanner-menu-container-out-text .slide-image2 {
  position: absolute;
  top:40%;
  left:60%;
  width: 90px;
  height: auto;
}

.btn-herobanner-container{
  display:flex;
  flex-direction:row;
  align-items:center;
}

.btn-inpo-september-2023 img{
  height:16px;
  width:16px;
}

.herobanner-menu-container-out {
  position: absolute;
  bottom: 12%;
  left: 26%; 
  transform: translateX(-50%); 
  z-index: 2;
  margin: 0 20px; 
  width: auto; 
}

.inner-paragraph {
  margin:8px 0;
  color: #ffffff;
  font-weight:400;
  letter-spacing: -0.58px;
}

.herobanner-menu-container-out-text {
  position:relative;
}

.herobanner-menu-container-out-text p{
  margin:8px 0;
  color: #ffffff;
  font-size:21px;
  font: 600;
  letter-spacing: -0.42px;
}

.herobanner-menu-container {
  display: flex;
  position:relative;
  background-color: #F0F7FA;
  height: 90px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 8px 8px 0 0;
  box-sizing: border-box; 
  margin-top:-70px;
  z-index:2;
}

blockquote {
  position: relative;
  margin: 20px 0;
  padding: 10px 20px 10px 80px;
}


blockquote p{
  font-size: clamp(20px, 2.5vw, 25px);
  color:#275353;
  font-weight:700;
}

blockquote:before {
  content: "“"; 
  font-size: 7em; 
  position: absolute;
  left: -1%; 
  top: -21%; 
  color: #D0E4E7; 
}

@media screen and (min-width:1144px){
  blockquote:before {
    font-size: 8em; 
    top: -36%; 
  }
}


.main-author-details {
  border-top: 1px solid #707070;
  border-bottom: 1px solid #707070;
}



.blog-post-flex-container{
  display:flex;
  flex-direction:column-reverse;
  gap:60px;
  margin: 0 16px;
  max-width: 1144px;
  padding: 30px 0;
}

@media screen and (min-width:1160px){
  .blog-post-flex-container{
    flex-direction:row-reverse;
  }
  .blog-post-small-form{
    width:375px;
  }
}

@media screen and (min-width:1144px){
  .blog-post-flex-container{
    padding: 60px 0;
  }
}

.herobanner-default-container {
  position: relative;
  height: 600px;
  overflow: hidden;
}

.herobanner-default-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 600px;
  object-fit: cover;
  object-position: 75% 50%;
  z-index: 1;
}

.herobanner-default-text-box {
  position: absolute;
  bottom: 30px;
  left: 0;
  padding: 32px 18px;
  z-index: 2; 
}

.red-dot {
  background-color:#C6D014;
  height:8px;
  width:8px;
  border-radius:50%;
  margin-right:8px;
}

.title-page {
  display:flex;
  flex-direction:row;
  align-items:center;
  color:#fff;
  gap:4px;
}

.title-page p {
  margin: 0;
  color: #ffffff;
}

.blog-index__post h3 {
  font-size:24px;
  line-height:28px;
  margin-top:16px;
  margin-bottom: 16px;
}

.blog-index__post p {
  font-size:15px!important;
  line-height:23px!important;
}

.herobanner-default-text-box p {
  color:#fff!important;
}

.herobanner-default-text-box h1 {
  margin: 0; 
  margin-top:10px;
  color: #ffffff;
  font-size:38px;
  font-weight:600;
  letter-spacing: -2.35px;
  line-height: 48px;
}

.herobanner-default-text-box h2 {
  font-size:20px;
  color:#ffffff;
  font-weight:400;
  letter-spacing: -0.58px;
  z-index:3;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 75%);
  z-index: 2;
}

.overlay-0 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 0%);
}

.overlay-10 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 10%);
}

.overlay-20 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 20%);
}

.overlay-30 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 30%);
}

.overlay-40 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 40%);
}

.overlay-50 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 50%);
}

.overlay-60 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 60%);
}

.overlay-70 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 70%);
}

.overlay-80 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 80%);
}

.overlay-90 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 90%);
}

.overlay-100 {
  background: linear-gradient(to right, rgba(0, 36, 41, 0.9) 0%, rgba(0, 36, 41, 0) 100%);
}

.title-page a {
  color:#ffffff;
}


@media screen and (min-width:900px) {
  .herobanner-default-text-box h1 {
    font-size:56px;
    max-width:470px;
    margin-bottom:10px;
    line-height:60px;
  }

  .herobanner-default-text-box h2 {
    font-size:24px;
  }
}

@media screen and (min-width:1100px) {
  .herobanner-default-text-box {
    left: 0.5%;
  }

  @media screen and (min-width:1200px) {
    .herobanner-default-text-box {
      left: 49%; 
      transform: translateX(-50%); 
      width: 1135px; 
    }
    .herobanner-default-container img {
      object-position: 50% 50%;
    }
  }



  @media screen and (min-width:700px){
    .container-herobanner .main-herobanner-image {
      object-position: center;
    }

    .bottom-text {
      top: 115%; 
    }

    .text-box-herobanner {
      top: 43%;
    }

    .text-box-herobanner p{
      font-size:24px;
    }

    .hs-menu-wrapper > ul {
      flex-direction: row;
      width: 100%;

    }

    .herobanner-menu-container{
      display:flex;
      justify-content:center;
    }

    .container-herobanner .slide {
      height: auto;
      width:100%;
    }

    .herobanner-menu-container {
      margin:-70px 16px;
    }

    .product-menu{
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .product-menu  ul li{
      list-style:none;
      font-size:15px;
      padding:6px;
      border-right:1px solid #D0E4E7;
    }

    .product-menu  ul li:last-child{
      border-right:none;
    }

    .product-menu  ul li a{
      color: #1F1F40;
      text-decoration:none;
      font-weight:bold;
    }
  }

  @media screen and (min-width:768px){
    .bottom-text {
      top: 104%; 
    }
  }

  @media screen and (min-width:800px){
    .product-menu  ul li{
      list-style:none;
      font-size:15px;
      padding:10px;
    }

    .bottom-text {
      top: 103%; 
    }

  }

  @media screen and (min-width:950px){
    .text-box-herobanner h1{
      font-size:50px;
    }

    .bottom-text {
      top: 95%; 
    }

    .product-menu  ul li{
      list-style:none;
      font-size:18px;
      padding:14px;
    }

    .herobanner-menu-container-out {
      max-width:1200px;
    }
  }

  @media screen and (min-width:1000px){
    .bottom-text {
      top: 105%; 
    }

    .product-menu  ul li{
      padding:8px;
    }

    .product-menu  ul li{
      font-size:16px;
      padding:16px;
    }

    .product-menu ul li a{
      display:flex;
      flex-direction:row;
      align-items:center;
    }

    .bottom-text {
      top: 95%; 
    }
  }

  @media screen and (min-width:1100px){
    .text-box-herobanner {
      top: 38%;
    }

    .bottom-text {
      top: 127%; 
    }

    .product-menu  ul li{
      font-size:18px;
    }

    .container-herobanner .main-herobanner-image {
      object-position: center 20%;
    }

    .product-menu  ul li{
      padding:10px;
    }

    .text-box-herobanner h1{
      font-size:68px;
      margin:2px 0;
    }

    .container-herobanner .main-herobanner-image {
      height:700px;
    }

    .product-menu ul li a:after {
      margin-left:10px;
    }

    .container-herobanner .text-box-herobanner .slide-image {
      top: 32%;
      height: 35px;
      width: 172px;
      left:3%;
    }
  }

  @media screen and (min-width: 1190px) {
    .text-box-herobanner {
      position: absolute;
      top: 50%; 
      left: 45%; 
      transform: translate(-50%, -50%);
      color: #fff; 
      padding: 10px; 
      width: 1000px;
      z-index: 2;
    }

    .bottom-text {
      top: 144%; 
    }
  }

  @media screen and (min-width: 1248px) {
    .bottom-text {
      top: 139%; 
    }
  }

  @media screen and (min-width: 1300px) {
    .text-box-herobanner {
      position: absolute;
      top: 50%; 
      left: 42%; 
      transform: translate(-50%, -50%);
      color: #fff; 
      padding: 10px; 
      width: 900px;
      z-index: 2;
    }
  }

  @media screen and (min-width: 1600px) {
    .text-box-herobanner {
      width: 860px;
    }
  }

  @media screen and (min-width: 1900px) {
    .text-box-herobanner {
      width: 800px;
    }
  }

  @media screen and (min-width: 2280px) {
    .text-box-herobanner {
      width: 750px;
    }
  }

  @media screen and (min-width: 2500px) {
    .text-box-herobanner {
      left: 42%;
    }
  }

  @media screen and (min-width: 2600px) {
    .text-box-herobanner {
      left: 42.5%;
    }
  }

  @media screen and (min-width: 2730px) {
    .text-box-herobanner {
      left: 43%;
    }
  }

  @media screen and (min-width: 2900px) {
    .text-box-herobanner {
      left: 43.5%;
      width:650px;
    }
  }