.blog-search-container {
    width: 400px;
    padding: 15px 0;
    display: flex;
    position: relative;
    border-bottom: 2px solid #4E5663;
    align-items: center;
}

.grid-search-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 34px;
}

.grid-search-container h2 {
    margin-bottom: 0;
}

#blogs-overview .dropdown--active .dropdown-button {
    border: 1px solid var(--swirl-color-1);
}

#blogs-overview .dropdown-content-wrapper {
    opacity: 0;
    max-height: 550px;
    transition: opacity 0.5s;
}

#blogs-overview .dropdown--active + .dropdown-content-wrapper {
    opacity: 1;
}

#blogs-filter-container {
    justify-content: space-between;
    position: relative;
}

.featured-blog {
    gap: 40px;
}

.featured-blog > div {
    flex: 1;
}

.featured-blog--publish-info {
    font-size: 14px;
    font-weight: 400;
    color: #6b7c93;
}

.featured-blog--excerpt {
    text-align: justify;
}

#blog-search-input {
    font-size: 20px;
}

.dropdown-content-shadow {
    box-shadow: 0px 4px 24px 0px #0000001A;
}

.blogs-sorting {
    display: flex;
    align-items: center;
    position: relative;
}

    .blogs-sorting span {
        font-weight: 400;
        font-size: 18px;
        margin-right: 10px;
        color: #4e5663;
    }

    .blogs-sorting .sort-filter-option {
        padding: 10px 0;
        cursor: pointer;
    }

        .blogs-sorting .sort-filter-option:hover {
            background-color: #f8f8f8;
        }

        .blogs-sorting .sort-filter-option.active {
            color: var(--swirl-color-1);
            font-weight: 700;
        }
    
    .blogs-sorting .dropdown-content-wrapper.sort {
        width: 232px !important;
        right: -18px;
        left: unset !important;
    }

    .blog-title {
        line-height: 46.88px;
    }

.blog-wrapper {
    position: relative;
    padding-bottom: 20px;
}

.blog-wrapper h3 {
    font-size: 20px;
    line-height: 23.44px;
}

.blogs-author {
    font-size: 14px;
    font-weight: 400;
    color: #6b7c93;
    margin-bottom: 20px;
}

.blog-wrapper p {
    color: #4e5663;
}

.blog-info,
.blog-social-links {
    font-weight: 400;
    color: #6B7C93;
}

.blog-container {
    display: flex;
    gap: 40px;
}

.blog-toc-container {
    width: 300px;
    position: relative;
}

.blog-toc-absolute {
    position: absolute;
    bottom: 5%;
}

.blog-toc-fixed {
    position: fixed;
    top: 5%;
    width: 300px;
    z-index: 1000;
}

.blog-toc--headings {
    padding-left: 0;
    list-style-image: none;
}

    .blog-toc--headings li {
        padding: 12px 0 12px 20px;
        margin: 0;
        display: flex;
        align-items: center;
        background-image: url(/img/ic-chevron-right.png);
        background-repeat: no-repeat;
        background-position: left center;
        font-weight: 400;
    }

    .blog-toc--headings li:not(:last-child) {
        border-bottom: 1px solid #d8e5f6;
    }

.blog-content {
    flex: 1;
}

.blog-toc--headings a {
    color: #4e5663;
}

    .blog-toc--headings a.active {
        color: var(--swirl-color-1);
    }

.blog-author-container {
    padding: 30px;
    border-radius: 5px;
    background-color: #f2f5fa;
    margin-bottom: 111px;
}

.blog-author-title {
    font-size: 24px;
    font-weight: 700;
}

.blog-author-inner-container {
    display: flex;
    gap: 20px;
}

.blog-author-inner-container > div:last-child {
    flex: 1;
}

.blog-author--image img {
    border-radius: 100%;
}

.blog-programs-and-industries {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 0 12px 0;
    align-items: center;
}

.blog-programs {
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: var(--swirl-color-1);
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-author--social-links {
    display: flex;
    align-items: center;
    gap: 6px;
}

.related-blogs {
    margin-bottom: 120px;
}

#blogs-list .teaser-content p {
    font-size: 14px;
    font-weight: 400;
}

article.blog-content h2 {
    text-transform: capitalize;
}

article.blog-content {
    font-size: 18px;
}

article.blog-content ul li {
    padding-left: 0;
    margin-bottom: 0;
}

#blogs-overview .dropdown-content-wrapper {
    transform: none;
}

#blogs-overview .dropdown-content-wrapper.active {
    pointer-events: auto;
    opacity: 1;
    z-index: 10;
}

/* Featured blog industries pills */
.featured-blog--industries {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 12px 0;
}

.industry-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 100px;
    background-color: var(--swirl-color-1-opac05);
    font-size: 13px;
    line-height: 1;
    color: var(--swirl-color-1);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    outline: none;
    border: none;
}

.industry-pill img {
    width: 14px;
    height: 14px;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
    filter: brightness(0) saturate(100%) invert(34%) sepia(41%) saturate(1162%) hue-rotate(181deg) brightness(93%) contrast(92%);   
}

.case-overview--title {
    font-size: 20px;
}

#blogs-overview .dropdown-button {
    font-size: 18px;
    padding-left: 18px;
    padding-right: 18px;
}

#categories-list {
    grid-template-columns: repeat(3, 1fr);
}

@media (min-width: 768px) {
    .related-blogs-inner-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        margin-top: 20px;
        gap: 20px;
    }
}

@media (min-width: 900px) {
    .related-blogs-inner-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1100px) {
    #blogs-overview .dropdown-content-wrapper[data-for='ddlIndustry'] {
        left: 165px;
    }

    #blogs-overview .dropdown-content-wrapper[data-for='ddlBlogCategories'] {
        right: 200px;
        left: unset;
    }
}

@media (min-width: 1000px) and (max-width: 1024px) {
    #blogs-filter-container {
        align-items: end;
    }

    .blogs-filter {
        align-items: start;
    }
}

@media (max-width: 1100px) {
    .blogs-filter {
        flex-direction: column;
        justify-content: center;
    }

    .blogs-sorting {
        justify-content: center;
        margin-top: 15px;
    }

    .blog-toc-container {
        width: 100%;
    }

    #blogs-overview .dropdown-content-wrapper {
        left: 0;
    }

    .blogs-sorting .dropdown-content-wrapper.sort {
        right: 0;
    }

    .blog-container {
        flex-direction: column;
    }
}

@media (max-width: 1100px) {
    #blogs-filter-container {
        flex-direction: column;
    }
}

@media (max-width: 900px) {
    .featured-blog {
        flex-direction: column;
        align-items: start;
    }

    .featured-blog > div {
        width: 100%;
    }

    .blog-toc {
        width: 100%;
    }

    .blogs-sorting .dropdown-content-wrapper.sort {
        width: 100% !important;
    }
}

@media (max-width: 767px) {
    .grid-search-container {
        flex-direction: column;
        align-items: start;
    }

    .grid-search-container > div {
        flex: 1;
        width: 100%;
    }

    .blog-search-container {
        width: 100%;
    }

    .blogs-filter .cases-dropdown {
        flex-direction: column;
    }

    .blogs-filter .cases-dropdown .dropdown {
        width: 100%;
    }

    .blogs-sorting .dropdown-content-wrapper.sort {
        right: unset;
        left: 0 !important;
    }

    .dropdown.dropdown--active + .dropdown-content-wrapper {
        z-index: 10;
    }

    .blog-minidetail-container {
        flex-direction: column;
        gap: 20px;
    }

    .blog-author-inner-container {
        flex-direction: column;
    }

    .blog-author--image img {
        width: 120px;
    }

    .related-blogs {
        margin-bottom: 60px;
    }

    .related-blogs-inner-container.owl-carousel .owl-stage {
        padding-left: 0px !important;
    }

    .owl-dots {
        display: flex;
        justify-content: center;
    }

        .owl-dots .owl-dot {
            margin: 0 5px;
            width: 10px;
            height: 10px;
            background-color: #d9d9d9 !important;
            border-radius: 50%;
        }

        .owl-dots .owl-dot.active {
            background-color: var(--swirl-color-1) !important;
        }
}