/* =========================================================
   RICH HOME - ABOUT US
========================================================= */

.rh-about {
    --about-burgundy: #74163d;
    --about-burgundy-dark: #5b0f2f;
    --about-text: #252525;
    --about-muted: #756d69;
    --about-line: #eadfd9;
    --about-soft: #fbf8f5;

    width: 100%;
    overflow: hidden;
    background: #fff;
    color: var(--about-text);
}

.rh-about * {
    box-sizing: border-box;
}

.rh-about .rh-container {
    width: min(1420px, calc(100% - 60px));
    margin-inline: auto;
}


/* =========================================================
   COMMON HEADINGS
========================================================= */

.rh-about__eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    color: var(--about-burgundy);

    font-size: 14px;
    font-weight: 700;
}

.rh-about__section-heading {
    max-width: 700px;

    margin:
        0
        auto
        30px;

    text-align: center;
}

.rh-about__section-heading > span {
    display: block;

    margin-bottom: 5px;

    color: var(--about-burgundy);

    font-size: 13px;
    font-weight: 700;
}

.rh-about__section-heading h2 {
    margin: 0 0 8px;

    color: var(--about-burgundy);

    font-size: 31px;
    font-weight: 700;
    line-height: 1.3;
}

.rh-about__section-heading p {
    margin: 0;

    color: var(--about-muted);

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   HERO
========================================================= */

.rh-about__hero {
    padding:
        45px
        0
        35px;
}

.rh-about__hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 60px;
}


/* CONTENT */

.rh-about__hero-content {
    max-width: 650px;
}

html[dir="rtl"] .rh-about__hero-content {
    text-align: right;
}

html[dir="ltr"] .rh-about__hero-content {
    text-align: left;
}

.rh-about__title {
    margin:
        0
        0
        18px;

    color: var(--about-burgundy);

    font-size: 46px;
    font-weight: 800;
    line-height: 1.2;
}

.rh-about__hero-heading {
    margin:
        0
        0
        16px;

    color: #282828;

    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
}

.rh-about__hero-text {
    max-width: 620px;

    margin: 0;

    color: var(--about-muted);

    font-size: 17px;
    line-height: 2;
}

.rh-about__signature {
    display: inline-block;

    position: relative;

    margin-top: 25px;
    padding-top: 14px;

    color: #a67864;

    font-size: 15px;
    font-weight: 600;
}

.rh-about__signature::before {
    content: "";

    position: absolute;
    top: 0;

    width: 45px;
    height: 2px;

    background: #c99b86;
}

html[dir="rtl"] .rh-about__signature::before {
    right: 0;
}

html[dir="ltr"] .rh-about__signature::before {
    left: 0;
}


/* HERO IMAGE */

.rh-about__hero-image {
    position: relative;

    height: 420px;

    overflow: hidden;

    border-radius: 20px;

    background: #f5f1ee;
}

.rh-about__hero-image::after {
    content: "";

    position: absolute;
    inset: 0;

    border:
        1px
        solid
        rgba(116, 22, 61, .08);

    border-radius: inherit;

    pointer-events: none;
}

.rh-about__hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   INSIDE RICH HOME
========================================================= */

.rh-about__inside {
    padding:
        55px
        0
        60px;

    background: #fff;
}

.rh-about__gallery {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.rh-about__gallery-card {
    position: relative;

    margin: 0;

    overflow: hidden;

    border-radius: 16px;

    background: #eee;
}

.rh-about__gallery-image {
    height: 285px;
}

.rh-about__gallery-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        .45s
        ease;
}

.rh-about__gallery-card:hover
.rh-about__gallery-image img {
    transform: scale(1.04);
}

.rh-about__gallery-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(25, 12, 17, .60) 0%,
            rgba(25, 12, 17, .05) 55%
        );

    pointer-events: none;
}

.rh-about__gallery-card figcaption {
    position: absolute;

    z-index: 2;

    inset-inline-start: 18px;
    bottom: 17px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    padding:
        9px
        15px;

    border-radius: 30px;

    background:
        rgba(255, 255, 255, .96);

    color: var(--about-burgundy);

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0
        8px
        20px
        rgba(0, 0, 0, .08);
}

.rh-about__gallery-card figcaption i {
    font-size: 14px;
}


/* =========================================================
   STATS
========================================================= */

.rh-about__stats {
    padding:
        0
        0
        65px;
}

.rh-about__stats-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    overflow: hidden;

    border:
        1px
        solid
        var(--about-line);

    border-radius: 15px;

    background: var(--about-soft);
}

.rh-about__stat {
    position: relative;

    min-height: 130px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 22px;

    text-align: center;
}

.rh-about__stat:not(:last-child)::after {
    content: "";

    position: absolute;

    inset-inline-end: 0;
    top: 25%;

    width: 1px;
    height: 50%;

    background: var(--about-line);
}

.rh-about__stat i {
    margin-bottom: 8px;

    color: var(--about-burgundy);

    font-size: 24px;
}

.rh-about__stat strong {
    color: var(--about-burgundy);

    font-size: 25px;
    font-weight: 800;
    line-height: 1.2;
}

.rh-about__stat span {
    margin-top: 5px;

    color: var(--about-muted);

    font-size: 12px;
}


/* =========================================================
   STORY
========================================================= */

.rh-about__story {
    padding:
        65px
        0;

    background: #fcfaf8;
}

.rh-about__story-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .9fr)
        minmax(0, 1.1fr);

    align-items: center;

    gap: 65px;
}


/* STORY IMAGE */

.rh-about__story-image {
    height: 500px;

    overflow: hidden;

    border-radius: 18px;

    background: #eee;
}

.rh-about__story-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* STORY CONTENT */

.rh-about__story-content h2 {
    margin:
        0
        0
        20px;

    color: var(--about-burgundy);

    font-size: 32px;
    font-weight: 700;
}

html[dir="rtl"] .rh-about__story-content {
    text-align: right;
}

html[dir="ltr"] .rh-about__story-content {
    text-align: left;
}


/*
 * Dashboard HTML
 */

.rh-about__dashboard-content {
    max-width: none !important;

    color: #56504d;

    font-size: 15px !important;
    line-height: 2 !important;
}

.rh-about__dashboard-content p {
    margin:
        0
        0
        14px !important;
}

.rh-about__dashboard-content strong,
.rh-about__dashboard-content b {
    color: #3b3034;
}

.rh-about__dashboard-content ul,
.rh-about__dashboard-content ol {
    padding-inline-start: 20px;

    margin:
        15px
        0;
}

.rh-about__dashboard-content img {
    max-width: 100%;
}


/* =========================================================
   VALUES
========================================================= */

.rh-about__values {
    padding:
        65px
        0
        70px;
}

.rh-about__values-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}

.rh-about__value {
    min-height: 215px;

    padding:
        28px
        24px;

    border:
        1px
        solid
        var(--about-line);

    border-radius: 14px;

    background: #fff;

    text-align: center;

    transition:
        transform
        .25s
        ease,
        box-shadow
        .25s
        ease,
        border-color
        .25s
        ease;
}

.rh-about__value:hover {
    transform: translateY(-4px);

    border-color:
        rgba(116, 22, 61, .24);

    box-shadow:
        0
        14px
        35px
        rgba(80, 35, 50, .07);
}

.rh-about__value-icon {
    width: 54px;
    height: 54px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin:
        0
        auto
        16px;

    border-radius: 50%;

    background: #f7edef;

    color: var(--about-burgundy);

    font-size: 21px;
}

.rh-about__value h3 {
    margin:
        0
        0
        9px;

    color: var(--about-burgundy);

    font-size: 18px;
    font-weight: 700;
}

.rh-about__value p {
    margin: 0;

    color: var(--about-muted);

    font-size: 13px;
    line-height: 1.8;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .rh-about .rh-container {
        width:
            min(
                100% - 40px,
                1100px
            );
    }

    .rh-about__hero-grid {
        gap: 35px;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(360px, .9fr);
    }

    .rh-about__title {
        font-size: 40px;
    }

    .rh-about__hero-heading {
        font-size: 24px;
    }

    .rh-about__hero-image {
        height: 380px;
    }

    .rh-about__gallery-image {
        height: 240px;
    }

    .rh-about__story-grid {
        gap: 40px;
    }

    .rh-about__story-image {
        height: 440px;
    }

}


/* =========================================================
   SMALL TABLET
========================================================= */

@media (max-width: 850px) {

    .rh-about__hero-grid,
    .rh-about__story-grid {
        grid-template-columns: 1fr;
    }

    .rh-about__hero-content {
        max-width: 100%;
    }

    .rh-about__hero-image {
        height: 390px;
    }

    .rh-about__gallery {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rh-about__gallery-card:last-child {
        grid-column: 1 / -1;
    }

    .rh-about__stats-grid,
    .rh-about__values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .rh-about__stat:nth-child(2)::after {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .rh-about .rh-container {
        width:
            calc(100% - 28px);
    }


    /* HERO */

    .rh-about__hero {
        padding:
            25px
            0
            20px;
    }

    .rh-about__hero-grid {
        display: flex;

        flex-direction: column;

        gap: 22px;
    }

    .rh-about__hero-content {
        text-align: center !important;
    }

    .rh-about__eyebrow {
        margin-bottom: 7px;

        font-size: 11px;
    }

    .rh-about__title {
        margin-bottom: 10px;

        font-size: 31px;
    }

    .rh-about__hero-heading {
        margin-bottom: 10px;

        font-size: 21px;
    }

    .rh-about__hero-text {
        font-size: 13px;
        line-height: 1.8;
    }

    .rh-about__signature {
        margin-top: 17px;

        font-size: 12px;
    }

    .rh-about__signature::before {
        left: 50% !important;
        right: auto !important;

        transform:
            translateX(-50%);
    }

    .rh-about__hero-image {
        width: 100%;
        height: 300px;

        border-radius: 14px;
    }


    /* SECTION HEAD */

    .rh-about__section-heading {
        margin-bottom: 20px;
    }

    .rh-about__section-heading h2 {
        font-size: 25px;
    }

    .rh-about__section-heading p {
        font-size: 12px;
        line-height: 1.7;
    }


    /* GALLERY */

    .rh-about__inside {
        padding:
            35px
            0
            40px;
    }

    .rh-about__gallery {
        display: flex;

        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type:
            x
            mandatory;

        -webkit-overflow-scrolling:
            touch;

        scrollbar-width: none;
    }

    .rh-about__gallery::-webkit-scrollbar {
        display: none;
    }

    .rh-about__gallery-card,
    .rh-about__gallery-card:last-child {
        flex:
            0
            0
            86%;

        grid-column: auto;

        scroll-snap-align: start;
    }

    .rh-about__gallery-image {
        height: 230px;
    }

    .rh-about__gallery-card figcaption {
        inset-inline-start: 12px;
        bottom: 12px;

        padding:
            7px
            12px;

        font-size: 12px;
    }


    /* STATS */

    .rh-about__stats {
        padding-bottom: 40px;
    }

    .rh-about__stats-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        border-radius: 12px;
    }

    .rh-about__stat {
        min-height: 110px;

        padding:
            16px
            8px;
    }

    .rh-about__stat::after {
        display: none !important;
    }

    .rh-about__stat:nth-child(1),
    .rh-about__stat:nth-child(2) {
        border-bottom:
            1px
            solid
            var(--about-line);
    }

    html[dir="rtl"]
    .rh-about__stat:nth-child(odd) {
        border-left:
            1px
            solid
            var(--about-line);
    }

    html[dir="ltr"]
    .rh-about__stat:nth-child(odd) {
        border-right:
            1px
            solid
            var(--about-line);
    }

    .rh-about__stat i {
        font-size: 19px;
    }

    .rh-about__stat strong {
        font-size: 21px;
    }

    .rh-about__stat span {
        font-size: 10px;
    }


    /* STORY */

    .rh-about__story {
        padding:
            40px
            0;
    }

    .rh-about__story-grid {
        gap: 25px;
    }

    .rh-about__story-image {
        height: 290px;

        border-radius: 13px;
    }

    .rh-about__story-content {
        text-align: center !important;
    }

    .rh-about__story-content h2 {
        margin-bottom: 14px;

        font-size: 25px;
    }

    .rh-about__dashboard-content {
        text-align: start !important;

        font-size:
            12.5px
            !important;

        line-height:
            1.9
            !important;
    }


    /* VALUES */

    .rh-about__values {
        padding:
            40px
            0
            45px;
    }

    .rh-about__values-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .rh-about__value {
        min-height: 185px;

        padding:
            20px
            13px;
    }

    .rh-about__value-icon {
        width: 44px;
        height: 44px;

        margin-bottom: 11px;

        font-size: 17px;
    }

    .rh-about__value h3 {
        font-size: 14px;
    }

    .rh-about__value p {
        font-size: 10.5px;
        line-height: 1.7;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 370px) {

    .rh-about__title {
        font-size: 28px;
    }

    .rh-about__values-grid {
        grid-template-columns: 1fr;
    }

}