/* FlowForma 2020 News Template */
/* @import url('http://example.com/example_style.css'); */

/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section                 */
/***********************************************/

/****************************************/
/* HubSpot Style Boilerplate            */
/****************************************/

/* These includes are optional, but helpful. */

/* HTML 5 Reset */

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
    display: block;
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

audio:not([controls]) {
    display: none;
}

/* Support migrations from wordpress */

.wp-float-left {
    float: left;
    margin: 0 20px 20px 0;
}

.wp-float-right {
    float: right;
    margin: 0 0 20px 20px;
}

/* Responsive Google Maps */

#map_canvas img, .google-maps img {
    max-width: none;
}

/* line height fix for reCaptcha theme */
#recaptcha_table td {line-height: 0;}
.recaptchatable #recaptcha_response_field {min-height: 0;line-height: 12px;}


/*****************************************/
/* Start your style declarations here    */
/*****************************************/

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
/* Document
   ========================================================================== */
.toc-link::before {
    background-color: #fff!important;
}
.post-header-custom, .post-body-wp{
  width: 100%;
}
 .sidebar{
    margin-left: 16px;
  }

.blog-post-wrapper{
  margin-left: 10%;
}
@media (max-width:994px) {
  .post-header-custom, .post-body-wp{
    width: 100%;
  }
  .sidebar{
    display: none;
  }
  .blog-post-wrapper{
    margin-left: auto;
  }
}



.post-header-custom h1{
  color: #343434;
  font-size: 40px;
  font-style: normal;
  font-weight: 800;
  line-height: 160%; /* 48px */
  letter-spacing: 0.57px;
  margin-top: 0px;
  margin-bottom: 8px;
}

.post-header-custom{
  margin-top: 0px;
  margin-bottom: 48px;
}

.about-blog-post-custom{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.about-blog-post-custom a:hover {
    color: #dd078b;
}
.about-blog-post-custom span{
  display: flex;
  gap: 8px;
  align-items: center;
}

.about-blog-post-custom img{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}



.sidebar{
  transition: all 0.2s ease-out;
  position: fixed!important;
  top:120px!important;
  left: 0px!important;
  right: auto;
  width: 205px;
  flex: none;
}


div.sidebar > div.toc.custom{
  transition: all 0.2s ease-out;
  position: static;!important;
  top: 0px;
}



.cta-sidebar{
  border: 1px solid rgba(128,183,71, 0.20);
  width: 100%;
  margin-top: 35px;
  border-radius: 4px;
  background: linear-gradient(155deg, #DD078B -8.88%, #673586 102.54%);
  
}

.cta-sidebar img{
  width: 100%;
  border-radius: 10px;
  margin-bottom: 20px;
}

.cta-sidebar > .content > h4{
  color: #FFF;
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 22.4px */
}

.cta-sidebar > .content > h4{
 margin-bottom: 8px;
}

.cta-sidebar > .content > .interactive-button-wrapper{
    margin-top: 16px; 
}

.cta-sidebar.desktop-only > div > div > a.interactive-button{
    display: flex;
    padding: 12px 18px;
    justify-content: center;
    align-items: center;
    background: #F89C1D;
    color: #FFFFFF;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16.1px; /* 115% */
    border: 1px solid #F89C1D;
}

.cta-sidebar.desktop-only > div > div > a.interactive-button:hover{
    background-color: transparent;
    border: 1px solid #fff;
}

/* Main CTA Start */
.cta-section{
  margin-top: 24px;
}


.cta-section h3{
  color: #FFF;
  text-align: center;
  font-size: 26px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin-top: 0px;
  margin-bottom: 5px;
  z-index:
}


.cta-section p{
  color: #FFF;
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 23.43px; /* 146.44% */
  margin-bottom: 24px;
}

.cta-section a.interactive-button{
    display: inline-block;
    padding: 12px 18px;
    background: #F89C1D;
    color: #FFFFFF;
    text-align: center;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 16.1px; /* 115% */
    border: 1px solid #F89C1D;
}

.cta-section a.interactive-button:hover{
    cursor: pointer;
    background-color: transparent;
    border: 1px solid #fff;
}
/* Main CTA End */

* Custom related-posts CSS Start */
.related-posts{
  padding-top: 100px;
  padding-bottom: 100px;
}
.related-posts > h2{
  color: #344054;
  text-align: center;
  font-family: Bitter;
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 30px;
}
.related-posts > .posts{
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.related-posts > .posts > .post{
    max-width: 360px;
    display: flex;
    border-radius: 22px;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
    border-radius: 8px;
    flex-basis: 100%;
}
.related-posts > .posts > .post > img{   
  width: 100%;
  height : 250px;
  object-fit: cover;
}
.related-posts > .posts > .post > .content{
    padding: 30px;
}

.blog-details {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 20px 0px;
  align-items: center;
}
.blog-details-item {
  margin: 0 0.5rem;
}
.blog-details-item {
  text-decoration: none;
  color: #4C4B63;
  font-family: "IBM Plex Sans";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.blog-details-item::after {
  content: '|';
  color: #9D9CAF;
  margin-left: 0.5rem;
}
.blog-details-item:last-child::after {
  content: '';
  margin: 0;
}
.blog-details-item.author{
  display: flex;
  gap: 10px;
  align-items: center;
}
.blog-details-item.author img{
  border-style: none;
  max-width: 100%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.blog-details-item.author p{
  margin: 0px;
}
/* Custom related-posts CSS End */

/* Show on mobile, hide on desktop */
.mobile-only {
    display: block; /* or any other display type like flex, grid, etc. */
}

.desktop-only {
    display: none;
}

/* Media query for desktop */
@media (min-width: 988px) { /* Adjust the breakpoint as needed */
    .mobile-only {
        display: none;
    }

    .desktop-only {
        display: block; /* or any other display type like flex, grid, etc. */
    }
} 

.container-fluid .row-fluid .page-center, .container-fluid .row-fluid .wrapper {
    max-width: 100%;
    margin-top:40px;
}



/* Custom breadcrumb CSS Start */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 16px 0px;
}

.breadcrumb-item {
  margin: 0 0.5rem;
}

.breadcrumb-item:nth-child(2) {
  margin-left: 0rem;
}


.breadcrumb-item a {
  text-decoration: none;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 350;
  line-height: normal;
}
.breadcrumb-item a:hover {
  text-decoration: underline;
  color: #26A9E1 !important;
}

.breadcrumb-item::after {
  content: '/';
  color: #000;
  margin-left: 0.5rem;
}

.breadcrumb-item:last-child::after {
  content: '';
  margin: 0;
}
.breadcrumb-item.active {
  font-size: 14px;
  font-style: normal;
  font-weight: 350;
  line-height: normal;
  margin-left: 0px;
}
.breadcrumb-item.active a {
  pointer-events: none; 
}
/* Custom featured image CSS Start */

div.sidebar > div.toc.custom {
    width: 100%;
}

.table-of-content__tocbot-el {
    max-height: 30vh;
    width: 100%;
}


.table-of-content__tocbot-el::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 10px;
	background-color: #F5F5F5;
}

.table-of-content__tocbot-el::-webkit-scrollbar
{
	width: 8px;
	background-color: #F5F5F5;
}

.table-of-content__tocbot-el::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #999997;
}