/*------------------------------------*\
    
    Hide/Show Text Area - Global styling for all hide/show text

    This method is CSS heavy and light on JS, which is important for good SEO and CWV results
    Find the code snippet here: https://webfxcodelibrary.webpagefxstage.com/#intermediate_cssshowhidetext

\*------------------------------------*/

.read-more__content {
	position: relative;
}

.expand {
	border: none;
	position: relative;
	margin-top: 20px;
    display: none;
}

.ddd-truncated .expand,
.fx-untruncated .expand {
	display: flex;
    align-items: center;
    gap: 10px;
}

.ddd-truncated .expand--less,
.expand--more {
	display: none;
}

.ddd-truncated .expand--more {
	display: inline;
}

.read-more__box >a {
    outline: none;
    text-decoration: none;
}

.read-more__box >a:hover {
    background: transparent!important;
}

.bg-white .read-more__box >a, 
.bg-light .read-more__box >a {
    color: var(--color-text-primary);
    opacity: 0.8;
}

.bg-gradient-blue .read-more__box >a,
.bg-primary .read-more__box >a,
.bg-medium-blue .read-more__box >a,
.bg-navy .read-more__box >a {
    color: var(--color-white);
}

.btn__icon {
    font-size: 13px;
}