#content {
    position: relative;
}
/* HERO SECTION */
#main {
    position: relative;
}

#main .fusion-row {
    position: relative;
}

#main {
    @media(max-width: 768px) {
        padding-top: 0px !important;
	}
}

#main:before, .article-hero-background {
    @media(max-width: 768px) {
        content: none;
        display: none;
	}
}

.article-heading-section {
    max-width: 996px;
    margin: auto;
    border-radius: 32px 32px 0 0;
    background: #FFF;
}

.excerpt-wrapper span.excerpt p {
    color: #000;
    font-family: 'InterRegular';
    font-size: 16px;
    line-height: 24px;
}

.article-mobile-image-wrapper {
    display: none;
    @media(max-width: 768px) {
        display: block;
        margin-bottom: 32px;
	}
}
.article-image-wrapper {
    @media(max-width: 768px) {
        display: none;
	}
}

.article-title h1, .article-title h1 p {
    color: #000;
    font-family: 'InterRegular';
    font-size: 48px !important;
    line-height: 56px !important;
    letter-spacing: -1.44px !important;
    max-width: 1010px;
    margin-bottom: 48px !important;
    @media(max-width: 768px) {
        font-size: 40px !important;
        line-height: 40px !important;
        margin-bottom: 32px !important;
	}
}

.article-image-wrapper {
    margin-bottom: 48px;
}

.article-subtitle p, .article-excerpt {
    color: #151516;
    font-family: 'InterRegular';
    font-size: 16px;
    line-height: 24px;
    max-width: 996px;
    margin-bottom: 24px;
    margin-top: 0 !important;
    @media(max-width: 768px) {
        margin-bottom: 16px !important;
	}
}

.article-date-wrapper .article-date {
    color: #4D4D51;
    font-family: 'InterRegular';
    font-size: 16px;
    line-height: 24px;
}

.article-date-wrapper {
    margin-bottom: 24px;
    @media(max-width: 768px) {
        margin-bottom: 32px !important;
	}
}

.benchmark-content-wrapper {
    padding: 56px 0;
    @media(max-width: 768px) {
        padding: 32px 0 !important;
	}
}

.back-to-page-wrapper a {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    align-items: center;
    padding: 48px 48px 0 48px;
    @media(max-width: 768px) {
        margin-bottom: 16px;
        padding: 0;
	}
}

.article-title {
    padding: 0 48px 0 48px;
    @media(max-width: 768px) {
        padding: 0;
	}
}

.back-to-page-wrapper a .link-text span {
    color: #4D4D51;
    font-family: 'InterMedium';
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0.12px;
}

.percentage-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    @media(max-width: 768px) {
        gap: 16px
	}
}
.percentage-wrapper svg {
    @media(max-width: 768px) {
        max-width: 42px;
	}
}

.percentage-wrapper .percentage {
    color: #000;
    font-family: 'InterRegular';
    font-size: 36px;
    line-height: 46px;
    letter-spacing: -0.72px;
    @media(max-width: 768px) {
        font-size: 28px;
        line-height: 36px;
	}
}
.subtitle-wrapper .subtitle {
    color: #797979;
    font-family: 'InterRegular';
    font-size: 20px;
    line-height: 26px;
    letter-spacing: -0.4px;
    @media(max-width: 768px) {
        font-size: 16px;
        line-height: 24px;
	}
}

.excerpt-wrapper {
    border-top: 1px solid #DFDFDF;
    margin-top: 16px;
    padding-top: 16px;
}

.excerpt-wrapper .excerpt p {
    margin: 0;
}


/* END HERO SECTION */


/* POST CONTENT  */

.post-content h2.wp-block-heading {
    border-right: 0;
    border-left: 0;
    background: #B4F656;
    padding: 32px;
    color: #151516 !important;
    font-family: 'InterSemiBold' !important;
    font-size: 28px !important;
    line-height: 36px !important;
    letter-spacing: -0.28px;
    margin-top: 64px;
    margin-bottom: 32px;
    @media(max-width: 768px) {
            padding: 16px;
            font-size: 22px !important;
            line-height: 28px !important;
            margin-bottom: 24px;
            margin-top: 32px;
	}
}

.content-left ol, .content-left ul {
    color: #151516;
    font-family: InterRegular !important;
    margin-bottom: 24px;
    margin-top: -10px;
    padding-left: 55px !important;
}

.content-left ul {
    list-style-type: disc;
}

.content-left ol li strong, .content-left ul li strong {
    color: #151516 !important;
    font-family: InterSemiBold !important;
}

.post-content h2.wp-block-heading:first-of-type {
    border-radius: 32px 32px 0 0;
    margin-top: 0;
    @media(max-width: 768px) {
        border-radius: 16px 16px 0 0;
	}
}

.content-left h3 {
    font-size: 20px !important;
    line-height: 28px !important; 
}

.scroll-heading span {
    color: #151516 !important;
    font-family: 'InterSemiBold' !important;
    font-size: 28px !important;
    line-height: 36px !important;
    letter-spacing: -0.28px;
    padding-left: 0 !important;
    @media(max-width: 768px) {
        font-size: 22px !important;
        line-height: 26px !important;
	}
}

.post-content h2.wp-block-heading a {
    color: #151516 !important;
}

.content-left h3, .content-left h4, .content-left h5, .content-left h6, .content-left ul, .content-left span {
    padding-left: 32px;
    padding-right: 32px;
    @media(max-width: 768px) {
        padding-left: 16px;
        padding-right: 16px;
	}
}

.content-left h3, .content-left h4, .content-left h5, .content-left h6 {
    font-family: InterSemiBold !important;
    color: #151516 !important;
    margin-bottom: 24px;
}

.post-content p {
    margin-bottom: 20px !important;
    margin: 0;
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 0;
    margin-top: 20px;
    @media(max-width: 768px) {
        padding-left: 16px;
        padding-right: 16px;
	}
}



.post-content p {
    color: #151516;
    font-family: 'InterRegular' !important;
    font-size: 16px;
    line-height: 24px;
}

.post-content p a {
    color: #151516;
    font-family: 'InterRegular';
}

.content-left {
    border-right: 1px solid #EBEBEB;
    border-left: 1px solid #EBEBEB;
    border-bottom: 1px solid #EBEBEB;
    border-radius: 32px;
    padding-bottom: 44px;
    @media(max-width: 768px) {
        border-radius: 16px;
        padding-bottom: 12px;
    }
}

figure.wp-block-image {
    margin-left: 32px;
    margin-right: 32px;
    margin-bottom: 24px;
    @media(max-width: 768px) {
        margin-left: 16px;
        margin-right: 16px;
    }
}

.post-content strong {
    color: #151516 !important;
    font-family: InterSemiBold !important;
}


.post-content {
		display: flex;
		gap: 40px;
        margin-top: 48px;
        @media(max-width: 850px) {
            flex-direction: column-reverse;
            gap: 32px;
            margin-top: 32px;
        }

		.content-left {
			position: relative;

			.scroll-heading {
				display: none;
				background: #B4F656;
				border: 1px solid #B4F656;
				align-self: stretch;
				align-items: center;		
				border-radius: 0;
				padding: 32px;
				z-index: 9;
                @media(max-width: 768px) {
                    padding: 16px;
                }

				&.active:not(.locked) {
					position: fixed;
					display: flex;
				}
				&.locked {
					position: absolute;
					display: flex;
					bottom : 0 !important;
					top: auto !important;
					left: 0 !important;
					width : 100% !important;
				}
			}
		}
		.content-right {
			position: relative;
			min-width: 330px;

			.article-sidebar {
				display: flex;
                flex-direction: column;
                gap: 40px;
                @media(max-width: 768px) {
                    gap: 32px;
                }

				.article-content-table {
                        border-radius: 16px;
                        background: #F7F7F7;
                        padding: 24px;
                         @media(max-width: 768px) {
                            padding-right: 48px;
                        }

					.content-table {
                        .table-top {
                            span {
                                color: #151516;
                                font-family: InterSemiBold;
                                font-size: 12px;
                                line-height: 16px;
                                letter-spacing: 0.12px;
                                margin-bottom: 16px;
                            }
                        }

						.table-content {
                            margin-top: 16px;
                           .toc_container {
                                .toc {
                                    margin: 0;
                                    padding-left: 0;
                                    display: flex;
                                    flex-direction: column;
                                }
                           }     
							
							li {
								list-style: none;
                                position: relative;
                                padding-left: 16px;
                                padding-bottom: 6px;
                                padding-top: 6px;
                                margin-bottom: 0 !important;
                                @media(max-width: 850px) {
                                    padding-left: 0;
                                }

								a {
									color: #797979;
                                    font-family: InterRegular;
                                    font-size: 14px;
                                    line-height: 20px;
								}

                                &:hover a {
                                    color: #000000;
                                }

								&.active {

									a {
										color: #000000;
									}
								}
							}
						}
					}
				}
			}
		}
	}

    .logo-section .logo {
        height: 37px;
        @media(max-width: 768px) {
            height: 37px;
        }
    }

    .article-sidebar .toc li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 3px;
        background: #ccc; 
        @media(max-width: 850px) {
            display: none;
        }
    }

    .article-sidebar .toc li:first-child::before {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
    }

    .article-sidebar .toc li:last-child::before {
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .article-sidebar .toc li.active::before {
        background: #000; 
        border-radius: 12px;
    }

        .article-sidebar .toc li:hover::before {
        background: #000;
        border-radius: 12px;  
        }

        .article-sidebar .toc li:last-of-type{
            padding-bottom: 0 !important;
        }


        .article-sidebar-banner {
            border-radius: 16px;
            background: radial-gradient(71.9% 62.07% at 50% 50%, rgba(255, 255, 255, 0.00) 0%, rgba(253, 249, 249, 0.60) 100%), #C596FE;
            padding: 24px;
        }

        .article-sidebar-banner .article-banner {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .article-sidebar-banner .content-section span {
            color: #000;
            font-family: InterMedium;
            font-size: 20px;
            line-height: 28px;
        }

        .cta-button a {
            border-radius: 24px;
            background: #000;
            padding: 12px 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-family: InterSemiBold;
            font-size: 16px;
            line-height: 24px;
        }

        .cta-button a:hover {
            background: #595959;
            color: #fff;
        }

        html:not(.avada-has-site-width-percent) #main {
            @media(max-width: 850px) {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }
        }

/* END POST CONTETN */

.post {
    margin-bottom: 65px;
    @media(max-width: 768px) {
        margin-bottom: 0 !important;
    }
}

/* BOOTOM - CTA SECTION AND RELATED ARTICLES */
.creative-banner-wrapper {
    margin: 80px 0 40px 0;
    @media(max-width: 768px) {
        margin: 40px 0 0px 0;
        order: 3;
    }
}
div#related-articles-section {
    padding: 40px 0;
    @media(max-width: 768px) {
        order: 2;
    }
}

section#content {
    @media(max-width: 768px) {
        display: flex;
        flex-direction: column;
    }
}

.creative-banner {
    border-radius: 40px;
    background: radial-gradient(71.9% 62.07% at 50% 50%, rgba(255, 255, 255, 0.00) 0%, rgba(253, 249, 249, 0.60) 100%), #B4F656;
    padding: 40px;
    display: grid;
    grid-template-columns: 430px 1fr;
    gap: 80px;
    align-items: center;
    @media(max-width: 992px) {
           gap: 40px;
    }
    @media(max-width: 900px) {
            grid-template-columns: 1fr 1.5fr;
    }
    @media(max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 24px;
        justify-items: center;
            padding: 24px;
            border-radius: 32px;
    }
}

.creative-banner .banner-left {
    @media(max-width: 768px) {
        order: 2;
    }
}

.creative-banner .Banner-image img {
    border-radius: 28px;
        max-width: 430px;
        @media(max-width: 1010px) {
        max-width: 100%;
    }
}

.article-subtitle p a {
    color: #151516;
    font-family: 'InterRegular';
    font-size: 16px;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.creative-banner .banner-heading h3 {
    color: #000;
    font-family: InterRegular !important;
    font-size: 40px !important;
    line-height: 44px !important;
    letter-spacing: -1.2px;
    margin-bottom: 24px !important;
    @media(max-width: 768px) {
        font-size: 28px !important;
        line-height: 32px !important;
    }
}

.creative-banner .banner-text span {
    color: #000;
    font-family: 'InterRegular';
    font-size: 16px;
    line-height: 24px;
}

.creative-banner .banner-text {
    margin-bottom: 24px;
    @media(max-width: 768px) {
        margin-bottom: 32px;
    }
}

.creative-banner .banner-button-wrapper {
    display: grid;
    grid-template-columns: 143px 1fr;
    gap: 24px;
    align-items: center;
    @media(max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.creative-banner .banner-button-wrapper .banner-button a {
    border-radius: 24px;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    color: #fff;
    font-family: 'InterSemiBold';
    font-size: 16px;
    line-height: 24px;
}

.creative-banner .banner-button-wrapper .banner-button a:hover {
    background: #595959;
    color: #fff;
}

.creative-banner .banner-button-wrapper span {
    color: #151516;
    font-family: 'InterRegular' !important;
    font-size: 14px;
    line-height: 20px;
    @media(max-width: 768px) {
            color: #4D4D51;
    }
}


div#related-articles-section .related-articles-heading h3 {
    color: #000;
    font-family: 'InterRegular' !important;
    font-size: 40px !important;
    line-height: 44px !important;
    letter-spacing: -1.2px;
    margin-bottom: 40px !important;
    @media(max-width: 768px) {
        font-size: 28px !important;
        line-height: 32px !important;
    }
}

div#related-articles-section .related-articles-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    align-items: stretch;
     @media(max-width: 768px) {
        grid-template-columns: 1fr;
    }
}

.related-articles-row .featured-image img {
    border-radius: 40px 40px 0 0;
    aspect-ratio: 207 / 118;
    width: 100%;
    @media(max-width: 768px) {
        border-radius: 32px 32px 0 0;
    }
}

.related-articles-row .single-article {
    border-radius: 40px;
    border: 1px solid #DFDFDF;
    background: #FFF;
    align-items: stretch;
    min-height: 490px;
    display: flex;
    flex-direction: column;
    @media(max-width: 768px) {
        border-radius: 32px;
    }
}

.single-article .article-right {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.single-article .article-right .date {
    color: #595959;
    font-family: 'InterMedium';
    font-size: 14px;
    line-height: 20px;
}
.single-article .article-right .publish-date {
    margin-bottom: 8px;
}

.single-article .article-right h3 {
    color: #000;
    font-family: 'InterRegular' !important;
    font-size: 20px !important;
    line-height: 28px !important;
    margin-bottom: 8px !important;
}

.single-article .article-right .excerpt {
    color: #000;
    font-family: 'InterRegular';
    font-size: 14px;
    line-height: 20px;
}

.article-excerpt.trim-excerpt {
    margin-bottom: 24px;
}

.single-article .article-right a {
    border-radius: 24px;
    border: 1px solid #DFDFDF;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    color: #000;
    font-family: 'InterSemiBold';
    font-size: 16px;
    line-height: 24px;
    justify-content: center;
}
.single-article .article-link {
    margin-top: auto;
}

.single-article .article-right a:hover {
    color: #000;
    border: 1px solid #000;
}

.creative-banner .banner-left {
    position: relative;
}


.creative-banner .banner-left:before {
    content: none;
    display: inline-block;
    width: 70px;
    height: 40px;
    background-image: url(https://billo.app/wp-content/uploads/2026/04/Violet-logo.webp);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
    margin-right: 8px;
    bottom: -17px;
    position: absolute;
}

.video-wrapper {
    border: none !important;
}
/* END BOOTOM - CTA SECTION AND RELATED ARTICLES */