.text-muted {
    color: var(--secondaryTextColor) !important;
}

.pb-5 {
    padding-bottom: 5rem !important;
}

.py-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

section h2 {
    color: var(--primaryTextColor);
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 3rem;
    line-height: 104%;
}

section small {
    color: var(--secondaryTextColor);
    font-family: Archivo;
    font-size: 0.875rem;
    font-style: normal;
    line-height: 132%;
    text-transform: uppercase;
}

section .title-desc {
    font-size: 1.25rem;
    color: var(--secondaryTextColor);
    line-height: 124%;
}

section .card-with-icon-text {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.02);
    padding: 1.125rem 1.5rem;
}

.feature-list .card-with-icon-text {
    margin-bottom: 1.5rem;
}

section .card-with-icon-text .icon img{
    margin-right: 1rem;
    width: 1.4375rem;
    height: 1.4375rem;
    aspect-ratio: 1 / 1;
}

section .card-with-icon-text .text {
    font-size: 1rem;
    color: var(--primaryTextColor);
    line-height: 132%;
}

.friction-section {
    /* linear-gradient(180deg, rgba(0, 0, 0, 85%) 0%, #0F0F0F 100%), */
    background-image: 
        linear-gradient(
            180deg,
            rgba(15, 15, 15, 1) 0%,
            rgba(15, 15, 15, 0.90) 40%,
            rgba(15, 15, 15, 1) 100%
        ),
        url('assets/friction-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.friction-section .row {
    row-gap: 1.5rem;
}
.friction-section-cards {
    margin-top: 3.2rem;
    margin-bottom: 3.2rem;
}

.future-section {
    /* linear-gradient(180deg, rgba(0, 0, 0, 85%) 0%, #0F0F0F 100%), */
    background-image:   
        linear-gradient(
            180deg,
            rgba(15, 15, 15, 1) 0%,
            rgba(15, 15, 15, 0.90) 40%,
            rgba(15, 15, 15, 1) 100%
        ),
        url('assets/future-banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    padding-left: 5rem;
    padding-right: 5rem;
}


/* .friction-section,
.future-section {
    padding-top: 5rem;
    padding-bottom: 4rem;
} */

/* hero-section */

section.hero-section {
    margin-top: 0.5rem;
}

.hero-section h1 { 
    color: var(--primaryTextColor);
    font-family: Archivo;
    font-size: 4.5rem;
    font-style: normal;
    line-height: 104%;
}

.hero-section .hero-info {
    display: flex;
    padding: 2.5rem 2rem;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1rem;
    flex: 1 0 0;
    align-self: stretch;
    border-radius: 0.5rem;
    border: 1px solid var(--borderColor01);
    background-color: var(--backgroundColor005);
}

.hero-section .title-desc {
    /* check responsive */
    /* max-width: 40rem; */
    max-width: 34.688rem;
    margin: 0rem;
    margin-top: 1rem;
}

.hero-section .image-card {
    /* height: 240px; */
     width: 100%;
    aspect-ratio: 16 / 9;

    border-radius: 0.5rem;
    border: 1px solid var(--borderColor01);
    /* padding: 1.5rem; */
    /* display: flex; */
    /* align-items: flex-end; */

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    cursor: pointer;
}

.hero-section .image-card.tall {
    aspect-ratio: 4 / 5; 
}

.hero-section .image-card span {
    font-size: 1.25rem;
}

.explore-platform-btn,
.explore-platform-btn:hover,
.explore-platform-btn:active,
.explore-platform-btn:focus {
    display: flex;
    padding: 2.125rem 2rem 2rem 2rem;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    align-self: stretch;
    border-radius: 0.5rem;
    background: var(--primaryButtonBackgroundColor) !important;
    color: var(--primaryButtonTextColor) !important;
    border: 1px solid var(--primaryButtonBorderColor) !important;
    font-size: 1.25rem;
    line-height: 124%;
    margin: 0rem;
    margin-top: 0.5rem;
}

.explore-platform-btn .btn-text {
    float: left;
    width: 100%;
    text-align: left;
}

.market-section,
.work-section,
.platform-section {
    /* padding: 5rem 3.75rem; */

    padding-left: 3.75rem;
    padding-right: 3.75rem;
}


/* market-section */
.market-section h2,
.work-section h2 {
    font-size: 3rem;
}

.market-section .col-lg-4{
    height: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

/* column base */
.stat-row {
    /* min-height: 280px; */
    /* min-height: 18rem; */
    /* min-height: 28rem; */
    min-height: 24rem;
    display: flex;
    /* justify-content: space-between; */
    gap: 3rem;
}
.stat-col {
    position: relative;
    padding-left: 1.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* min-height: 220px;
    max-height: 280px; */
    height: 15.6875rem;
    width: 9.375rem;
}

/* thin vertical line */
.stat-line {
    position: absolute;
    left: 0;
    width: 2px;
    background: linear-gradient(180deg, #626262 31%, #0C0C0C 100%);
    height: 100%;
}

span.stat-line:before {
    position: absolute;
    width: 2px;
    background: rgba(255, 255, 255, 1);
    content: "";
    height: 30%;
    top: 50%;
    transform: translateY(-50%);
}

/* DOWN */
.stat-col.down {
    align-self: flex-end;
}

/* .stat-col.down .stat-line {
    bottom: 0;
    height: 70%;
} */

/* UP */
.stat-col.up {
    align-self: flex-start;
}

/* .stat-col.up .stat-line {
    top: 0;
    height: 70%;
} */

/* typography */
.stat-col h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    white-space: nowrap;
    color: var(--primaryTextColor);
    line-height: 104%;
}

.stat-col p {
    font-size: 0.75rem;
    line-height: 103.3%;
    color: rgba(255, 255, 255, 0.6);
}

/* friction-section */
.friction-section .title-desc {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

.friction-section-card-parent-div {
    margin-top: 0rem !important;
}

/* .friction-section-card-parent-div .card-with-icon-text .text {
    font-size: 0.8rem;
} */



/* platform-section */

.platform-section .platform-card {
    background: var(--cardBackgroundColor);
    padding: 1.5rem;
    border-radius: 0.5rem;
}

.platform-section .platform-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}

.platform-section .platform-card-title {
    font-size: 2rem;
    color: var(--primaryTextColor);
    line-height: 104%;
    margin-bottom: 0.75rem;
}

.platform-section .platform-card-title-desc {
    font-size: 1rem;
    color: var(--secondaryTextColor);
    line-height: 132%;
    margin: 0rem;
    margin-bottom: 2rem;
}

.platform-section .platform-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--secondaryTextColor) !important;
    line-height: 132%;
}

.platform-section .platform-btn,
.platform-section .platform-btn:hover,
.platform-section .platform-btn:active,
.platform-section .platform-btn:focus {
    background-color: var(--secondaryButtonBackgroundColor) !important;
    border: none;
    color: var(--secondaryButtonTextColor) !important;
    padding: 0.75rem 1.25rem;
    border-radius: 0.375rem;
    font-size: 1rem;
    line-height: 132%;
    border: 1px solid var(--secondaryButtonBorderColor) !important;
}


/* future-section */
.feature-section .title-desc {
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
}

.btn-cta,
.btn-cta:hover,
.btn-cta:active,
.btn-cta:focus {
    display: inline-block;
    background: var(--primaryButtonBackgroundColor) !important;
    color: var(--primaryButtonTextColor) !important;
    border: 1px solid var(--primaryButtonBorderColor) !important;
    padding: 1rem 2rem;
    align-items: center;
    border-radius: 0.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1.5rem;
    text-decoration: none;
}

.friction-section, .built-section {
    padding-left: 24rem;
    padding-right: 24rem;
}

.built-section-content {
    max-width: 46rem;
    margin: 0rem auto;
}

.friction-section,
.future-section,
.market-section,
.work-section,
.platform-section,
.built-section {
    padding-top: 8rem;
    padding-bottom: 0rem;
}

.built-section{
    padding-bottom: 5rem !important;
}
/* Desktop safety */
@media (max-width: 1024px) {
    .stat-row {
        gap: 1rem;
    }
}
@media (max-width: 968px) {
    .friction-section,
    .built-section {
        padding-left: 5rem;
        padding-right: 5rem;
    }

    .stat-row {
        gap: 2rem;
    }

}


@media (max-width: 768px) {
    .hero-section .hero-info {
    padding: 9rem 1.5rem 2rem 1.5rem;
}
.explore-platform-btn {
    padding: 1.625rem 1.5rem 1.5rem 1.5rem;
}
.market-section, .work-section, .platform-section, .built-section, .friction-section, .future-section {
    padding: 3.75rem 1.5rem 0.5rem 1.5rem;
}
.built-section{
    padding-bottom: 3.75rem;
}

.built-section-content {
    max-width: 100%;
}

.market-section h2, .work-section h2 {
    font-size: 2.25rem;

    margin-top: 0.88rem;
    margin-bottom: 0.88rem;
}
    .py-5 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .px-5 {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    section small {
        font-size: 0.75rem;
    }

    section h2 {
        font-size: 2.25rem;
        margin-top: 0.88rem;
        margin-bottom: 0.88rem;
    }

    section .title-desc {
        font-size: 1rem;
    }

    .hero-section h1 {
        font-size: 2.75rem;
    }

    .hero-section .col-image-cards {
        margin-top: 0.25rem;
    }

    section .card-with-icon-text .text {
        font-size: 0.75rem;
    }

    .friction-section-cards {
        margin-top: 1rem !important;
    }

    .friction-section-cards .friction-section-card-parent-div {
        margin-top: 0.25rem !important;
    }

    .friction-section-cards .friction-section-card-parent-div .card-with-icon-text {
        margin-top: 0rem !important;
        margin-bottom: 0rem !important;
    }

    /* .friction-section .title-desc,
    .future-section .title-desc {
        margin-top: 1rem !important;
    } */


    section .card-with-icon-text {
        margin-top: 0.25rem;
        padding: 0.875rem;
    }
    .feature-list .card-with-icon-text {
    margin-bottom: 0.5rem;
}
    .friction-section .row {
        row-gap: 0.5rem;
    }
    .work-section .info {
        text-align: center;
    }

    .platform-section .platform-card {
        padding: 1rem;
    }

    .platform-section .platform-card-title {
        font-size: 1.5rem;
    }

    .stat-row {
    min-height: 13.2475rem;
    gap: 1rem;
}

    .stat-col {
        padding-left: 0.75rem;
        height: 7.64381rem;
    }
    .stat-col h3 {
        font-size: 0.7rem;
    }

    .stat-col p {
        font-size: 0.5rem;
        word-break: break-all;
    }

    .market-section .col-lg-4 {
        text-align: center;
    }
    .btn-cta {
    padding: 0.75rem 1.25rem;
}
}

@media (min-width: 768px) {
    .friction-section,
    .built-section {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 968px) {
    .friction-section,
    .built-section {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}

@media (min-width: 1200px) {
    .friction-section,
    .built-section {
        padding-left: 16rem;
        padding-right: 16rem;
    }
}

@media (min-width: 1440px) {
    .friction-section, .built-section {
        padding-left: 16rem;
        padding-right: 16rem;
    }
}

@media (min-width: 1600px) {
    .friction-section, .built-section {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}

@media (min-width: 1921px) {
    .friction-section, .built-section {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}

@media (min-width: 2150px) {
    .friction-section, .built-section {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}

@media (min-width: 2240px) {
    .friction-section, .built-section {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}

@media (min-width: 2360px) {
    .friction-section, .built-section {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}

@media (min-width: 2561px) {
    .friction-section, .built-section {
        padding-left: 18rem;
        padding-right: 18rem;
    }
}