#hero {
    position: relative;
    min-height: 716px;
    display: flex;
    align-items: flex-end;
    padding: 4.375rem 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    .container-fluid {
        position: relative;
        z-index: 2;
    }
    .title {
        padding-bottom: 2.5rem;
        margin-bottom: 2.5rem;
        border-bottom: solid 1px #C5C8D0;
        h1 {
            color: #FFF;
            font-size: clamp(1.875rem, -1.03rem + 9.2961vw, 6.25rem);
            margin: 0;
        }
    }
    .button {
        display: flex;
        justify-content: flex-end;
        gap: 1.25rem;
        width: auto;
        overflow: auto;
        .btn-primary {
            --bs-btn-color: var(--bs-black);
            --bs-btn-bg: rgba(255,255,255,.6);
            --bs-btn-border-color: rgba(255,255,255,.6);
        }
        .btn {
            white-space: nowrap;
            /* flex: 1 0 auto; */
        }
    }
    &::after {
        content: "";
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,.9) 80%);
    }
}

#quote {
    padding: 4.5rem 0;
    background-color: #0B0C0F;
    color: var(--bs-white);
    .text {
        font-size: 3.75rem;
        line-height: 1.25;
        strong {
            color: var(--bs-primary);
        }
    }
    .name {
        color: #8F8E9A;
        font-size: 2.5rem;
    }
}

#intro {
    padding: 4.5rem 0;
    overflow: hidden;
    background-color: var(--bs-white);
    .featured-tool {
        margin-top: 3.25rem;
        padding: 2.75rem;
        border-radius: var(--bs-border-radius);
        background: linear-gradient(70deg, rgba(214,227,251,.4) 0, rgba(207,252,81,.2) 100%);
        .title {
            display: flex;
            gap: 1.25rem;
            align-items: center;
            h3 {
                margin: 0;
            }
        }
        .text {
            margin-top: 2.5rem;
            padding-top: 2.5rem;
            border-top: solid 1px var(--bs-secondary);
        }
        .button {
            margin-top: 2.5rem;
        }
    }
    .featured-image {
        margin-top: 3.25rem;
    }
    #video-slider {
        overflow: visible;
        margin-top: 3.25rem;
        padding-bottom: 2.5rem;
        &.post-slider {
            .swiper-slide {
                height: auto;
            }
            .post {
                position: relative;
                display: flex;
                flex-direction: column;
                height: 100%;
                text-decoration: none;
                color: var(--bs-black);
                .image {
                    border-radius: var(--bs-border-radius);
                    overflow: hidden;
                    position: relative;
                    aspect-ratio: 1.5/1;
                    line-height: 0;
                    > img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .title {
                    position: absolute;
                    z-index: 1;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    padding: 1.5rem;
                }
            }
            .swiper-nav-wrapper {
                display: flex;
                align-items: center;
                gap: 3rem;
                .swiper-arrows {
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 1rem;
                    height: 1.5rem;
                    .swiper-button-next,
                    .swiper-button-prev {
                        position: static;
                        margin-top: 0;
                    }
                }
            }
            .swiper-button-next, .swiper-button-prev {
                --swiper-theme-color: var(--bs-light);
                background-color: var(--bs-black);
                border: solid 1.5px var(--bs-black);
            }
            .swiper-button-next.swiper-button-disabled,
            .swiper-button-prev.swiper-button-disabled {
                --swiper-theme-color: var(--bs-black);
                background-color: var(--bs-light);
                border-color: var(--bs-black);
            }
        }
        
        .ideas-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
        }

        &.sm {
            .ideas-footer {
                display: none;
            }
        }
    }
    .row {
        --bs-gutter-x: 3.75rem;
        .col-md-5 {
            position: relative;
            &::after {
                content: "";
                display: block;
                position: absolute;
                z-index: 2;
                top: 0;
                bottom: 0;
                right: 0;
                width: 50dvw;
                background-color: var(--bs-white);
            }
            > * {
                position: relative;
                z-index: 3;
            }
        }
    }
}

#features {
    padding: 4.5rem 0;
    background-color: #032425;
    .intro {
        padding-bottom: 3.125rem;
        margin-bottom: 3.125rem;
        border-bottom: solid 1px var(--bs-white);
        color: var(--bs-white);
    }
    h2 {
        color: inherit;
        margin: 0;
    }
    .items {
        --bs-gutter-x: 3.125rem;
        --bs-gutter-y: 3.125rem;
    }
    .item {
        .card {
            --bs-card-bg: #032425;
            --bs-card-border-color: var(--bs-light);
            height: 100%;
            padding: 0;
            text-decoration: none !important;
        }
        .image {
            aspect-ratio: 2.125/1;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        .card-body {
            position: relative;
            font-size: 1rem;
            text-align: left;
            color: var(--bs-white);
            display: flex;
            flex-direction: column;
            padding-bottom: 2rem;
            h6 {
                color: inherit;
                text-transform: uppercase;
                margin-bottom: 1.5rem;
            }
            .text:not(:last-child) {
                margin-bottom: 1.5rem;
            }
        }
        .link {
            margin-top: auto;
            font-size: 1.25rem;
            line-height: 1;
            color: var(--bs-primary);
            display: flex;
            gap: 1rem;
            align-items: center;
            > svg {
                transform: translateY(.125rem);
            }
        }
    }
}

#articles {
    padding: 4.5rem 0;
    h2 {
        margin-bottom: 3.125rem;
    }
}
#ideas.posts-feed {
    padding: 4.5rem 0;
    h1 {
        margin-bottom: 3rem;
    }
}
#idea-results {
    .item {
        display: flex;
        gap: 2.5rem;
        margin-bottom: 4.75rem;
        color: inherit;
        text-decoration: none;
        .image {
            position: relative;
            flex: 1 0 207px;
            width: 207px;
            max-width: 207px;
            height: 207px;
            border-radius: var(--bs-border-radius);
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
            .icon {
                position: absolute;
                bottom: 10px;
                left: 8px;
                width: 47px;
                height: 47px;
                background-color: var(--bs-black);
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 10px;
            }
        }
        .text {
            font-family: "Source Serif 4", serif;
            font-size: 1.25rem;
            color: #5E5D69;
        }
        .meta {
            display: flex;
            align-items: flex-end;
            gap: 2rem;
            margin-top: 1.5rem;
            color: #5E5D69;
            .authors {
                list-style: none;
                padding: 0;
                margin: 0;
                display: flex;
                gap: 1rem;
                > li {
                    flex: 1 0 40px;
                    max-width: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
            .date {
                display: flex;
                align-items: center;
                gap: 1rem;
                svg {
                    width: 32px;
                    height: 31px;
                }
            }
        }
    }
}


#insights.single {
    padding: 5.5rem 0;
    .intro {
        h1 {
            font-size: clamp(1.75rem, 0.0213rem + 5.5319vw, 5rem);
            font-weight: 600;
            margin-bottom: 2rem;
        }
        .date {
            display: flex;
            align-items: center;
            gap: 1.25rem;
            font-size: 1.5rem;
            svg {
                width: 32px;
                height: 31px;
            }
        }
    }
    .meta {
        margin: 2.75rem 0 0;
        padding: 2.75rem .875rem;
        border-top: solid 1px var(--bs-secondary);
        border-bottom: solid 1px var(--bs-secondary);
        .authors {
            margin-bottom: 0;
            > li {
                display: inline-flex;
                align-items: center;
                gap: 1rem;
                font-size: 1.5rem;
                &:not(:last-child) {
                    margin-right: 2rem;
                }
                .image {
                    width: 4rem;
                    height: 4rem;
                    border-radius: 50%;
                    overflow: hidden;
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
            }
            + .terms {
                margin-top: 2.625rem;
            }
        }
        .terms {
            margin-bottom: 0;
        }
    }
    .content {
        font-family: "Source Serif 4", serif;
        font-size: 1.25rem;
        margin: 2.75rem 0 0;
        .size-full {
            margin: 4.75rem calc(var(--bs-gutter-x) * -.25);
            width: calc(100% + (var(--bs-gutter-x) * .5));
            max-width: calc(100% + (var(--bs-gutter-x) * .5));
            border-radius: var(--bs-border-radius-xl);
            overflow: hidden;
        }
    }

    + .previous-post {
        margin-top: 10rem;
        margin-bottom: 10rem;
        #idea-results {
            border-top: solid 1px var(--bs-secondary);
            padding-top: 6rem;
        }
    }
}

#insights.feed {
    background-color: var(--bs-black);
    .intro {
        color: var(--bs-white);
        margin-bottom: 3rem;
        h2 {
            color: inherit;
        }

    }
    #insights-slider {
        .swiper-slide {
            height: auto;
        }
        .swiper-nav {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            /* margin-bottom: 2.5rem; */
            position: relative;
        }
        .swiper-button-next, .swiper-button-prev {
            --swiper-theme-color: var(--bs-black);
            background-color: var(--bs-primary);
            border-color: var(--bs-primary);
            position: static;
            margin-top: 0;
        }
        .swiper-button-next.swiper-button-disabled,
        .swiper-button-prev.swiper-button-disabled {
            --swiper-theme-color: var(--bs-light);
            background-color: var(--bs-black);
            border-color: var(--bs-light);
        }
        .card {
            --bs-card-border-radius: 0.625rem;
            --bs-card-inner-border-radius: calc(0.625rem - 1px);
        }
        .date {
            color: var(--bs-dark);
            margin-bottom: .5rem;
        }
        .image {
            aspect-ratio: 1/1.1;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}


#intro {
    position: relative;
}
.pin-spacer {
    background-color: #FFF;
}
.timeline-wrapper {
    overflow: visible !important;
}
.timeline {
    /* 
    display: flex;
    
    height: auto; */
    --tile-gap: 6.5rem;
    /* gap: var(--tile-gap); */
    padding: 5rem 0 10rem;
}
.timeline-item {
    --icon-width: 90px;
    --card-width: 540px;
    --card-height: 345px;
    position: relative;
    width: var(--card-width);
    min-height: var(--card-height);
    flex-shrink: 0;
    height: auto !important;
}
.timeline-item .inner {
    height: 100%;
    display: flex;
    gap: 2.5rem;
    position: relative;
}
.timeline-item .image {
    flex: 1 0 auto;
    max-width: 240px;
    width: 50%;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    min-height: var(--card-height);
}
.timeline-item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.timeline-item .content {
    align-self: flex-end;
}
.timeline-item .year {
    color: #3990CE;
}
.timeline-item .title {
    color: var(--bs-body-color);
    font-size: 1rem;
    font-weight: 700;
}
.timeline-item .text {
    font-size: .875rem;
}

/* gradient style */
.timeline-item {
    --gradient-bg: linear-gradient(90deg, #97CAEB 0%, #CFFC51 100%);
    --gradient-border: linear-gradient(180deg, #CFFC51 0%, #97CAEB 100%);
    --border-width: 2px;
}
.timeline-item::before {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--icon-width) - 1.5rem);
    height: calc(var(--icon-width) - 1.5rem);
    border-radius: 50%;
    top: calc(100% + 1.75rem + .75rem);
    left: .75rem;
    background: var(--gradient-bg);
    z-index: 3;
}
.timeline-item .inner::before {
    content: "";
    display: block;
    position: absolute;
    width: var(--icon-width);
    height: var(--icon-width);
    border-radius: 50%;
    top: calc(100% + 1.75rem);
    background: var(--gradient-border);
    z-index: 1;
}
.timeline-item .inner::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(var(--icon-width) - (var(--border-width) * 2));
    height: calc(var(--icon-width) - (var(--border-width) * 2));
    border-radius: 50%;
    top: calc(100% + 1.75rem + var(--border-width));
    left: var(--border-width);
    background: #FFF;
    z-index: 2;
}
.timeline-item::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + var(--tile-gap) - var(--icon-width));
    height: var(--border-width);
    background-color: #B6E597;
    top: calc(100% + 1.75rem + (var(--icon-width) / 2));
    left: var(--icon-width);
    z-index: 1;
}
.timeline-item:last-child::after {
    width: calc(100% - var(--icon-width));
}

/* dashed style */
/* .timeline-item::before {
    content: "";
    display: block;
    position: absolute;
    width: var(--icon-width);
    height: var(--icon-width);
    border-radius: 50%;
    border: dashed 1px #939A9F;
    top: calc(100% + 1.75rem);
}
.timeline-item::after {
    content: "";
    display: block;
    position: absolute;
    width: calc(100% + var(--tile-gap) - var(--icon-width));
    height: 1px;
    border: dashed 1px #939A9F;
    top: calc(100% + 1.75rem + (var(--icon-width) / 2));
    left: var(--icon-width);
}
.timeline-item:last-child::after {
    width: calc(100% - var(--icon-width));
} */


@media (max-width: 575px) {
    #hero {
        min-height: 265px;
        padding: 1.75rem 0;
        .container-fluid {
            max-width: 100dvw;
            overflow: hidden;
        }
        .title {
            padding-bottom: 1.25rem;
            margin-bottom: 1.25rem;
        }
        .button {
            justify-content: flex-start;
            margin: 0 -2.5rem;
            padding: 0 2.5rem;
            .btn-lg {
                font-size: .75rem;
                padding: .5rem 1.25rem;
                flex: 1 0 auto;
            }
        }
    }
    #quote {
        padding: 1.25rem 0;
        .text {
            font-size: 1.25rem;
        }
        .name {
            font-size: 1rem;
        }
    }
    #features {
        max-width: 100dvw;
        overflow: hidden;
    }
    #idea-results {
        .item {
            flex-direction: column;
        }
    }
}