/* =====================================================
   ABOUT RELATIONSHIPS SECTION
   ===================================================== */

.about-relationships {
    padding: 100px 0;
    background: #f7f5f0;
}


/* =====================================================
   MAIN GRID
   ===================================================== */

.about-relationships__grid {
    display: grid;

    grid-template-columns: 0.85fr 1.15fr;

    gap: 80px;

    align-items: center;
}


/* =====================================================
   LEFT CONTENT
   ===================================================== */

.about-relationships__content {
    position: relative;
    z-index: 2;
}


/* Section Label */

.about-section-label {
    display: inline-block;

    color: #b58127;

    font-size: 11px;
    font-weight: 600;

    letter-spacing: 2px;

    text-transform: uppercase;
}


/* Heading */

.about-relationships__content h2 {
    margin: 15px 0 25px;

    color: #101722;

    font-family: Georgia, serif;

    font-size: clamp(38px, 4vw, 55px);

    line-height: 1.05;

    font-weight: 500;
}


/* Gold Heading */

.about-relationships__content h2 span {
    color: #b58127;
}


/* Description */

.about-relationships__content p {
    max-width: 500px;

    margin: 0;

    color: #656a71;

    font-size: 15px;

    line-height: 1.8;
}


/* =====================================================
   BUTTONS
   ===================================================== */

.about-relationships__actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;

    margin-top: 30px;
}


/* Main Button */

.about-relationship-btn {
    display: inline-flex;

    align-items: center;

    gap: 18px;

    padding: 14px 20px;

    background: #080f18;

    color: #fff;

    font-size: 12px;

    text-decoration: none;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.about-relationship-btn:hover {
    background: #b58127;

    color: #fff;

    transform: translateY(-2px);
}


/* Arrow */

.about-relationship-btn span {
    color: #d5a13a;

    font-size: 18px;

    line-height: 1;
}


/* =====================================================
   VIDEO BUTTON
   ===================================================== */

.about-video-btn {
    display: inline-flex;

    align-items: center;

    border: 0;

    padding: 0;

    background: transparent;

    color: #20252d;

    cursor: pointer;

    font-size: 12px;
}


/* Play Circle */

.about-video-btn span {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 32px;

    height: 32px;

    margin-right: 8px;

    border: 1px solid #c99835;

    border-radius: 50%;

    color: #b58127;

    font-size: 9px;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}


.about-video-btn:hover span {
    background: #b58127;

    color: #fff;
}


/* =====================================================
   SINGLE IMAGE
   ===================================================== */

.about-single-image {
    position: relative;

    width: 100%;

    min-height: 440px;

    overflow: visible;
}


/* Image */

.about-single-image img {
    display: block;

    width: 100%;

    object-fit: cover;

    object-position: center;

    border-radius: 2px;

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.12);
}


/* =====================================================
   EXPERIENCE CARD
   ===================================================== */

.about-experience-card {
    position: absolute;

    left: -35px;

    bottom: 45px;

    z-index: 3;

    width: 125px;

    height: 125px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background: #09111b;

    color: #fff;

    text-align: center;

    border: 1px solid rgba(201, 152, 53, 0.5);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.2);
}


/* Gold Number */

.about-experience-card strong {
    color: #d5a13a;

    font-family: Georgia, serif;

    font-size: 32px;

    line-height: 1;
}


/* Card Text */

.about-experience-card span {
    margin-top: 8px;

    color: rgba(255, 255, 255, 0.7);

    font-size: 9px;

    line-height: 1.5;

    text-transform: uppercase;

    letter-spacing: 1px;
}


/* =====================================================
   FEATURES
   ===================================================== */

.about-features {
    display: grid;

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

    margin-top: 90px;

    background: #fff;

    border: 1px solid #e8e4dc;
}


/* Individual Feature */

.about-feature {
    padding: 35px 25px;

    text-align: center;

    border-right: 1px solid #e8e4dc;
}


/* Remove border from last item */

.about-feature:last-child {
    border-right: 0;
}


/* =====================================================
   FEATURE ICON
   ===================================================== */

.about-feature__icon {
    width: 34px;

    height: 34px;

    margin: 0 auto 15px;
}


.about-feature__icon svg {
    width: 100%;

    height: 100%;

    fill: none;

    stroke: #b58127;

    stroke-width: 1.4;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* =====================================================
   FEATURE HEADING
   ===================================================== */

.about-feature h3 {
    margin: 0 0 10px;

    color: #151b23;

    font-family: Georgia, serif;

    font-size: 16px;

    line-height: 1.3;
}


/* =====================================================
   FEATURE DESCRIPTION
   ===================================================== */

.about-feature p {
    margin: 0;

    color: #777d84;

    font-size: 11px;

    line-height: 1.6;
}


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

@media (max-width: 1000px) {

    .about-relationships {
        padding: 80px 0;
    }


    .about-relationships__grid {
        grid-template-columns: 1fr 1fr;

        gap: 50px;
    }


    .about-relationships__content h2 {
        font-size: clamp(34px, 5vw, 48px);
    }


    .about-single-image {
        min-height: 380px;
    }


    /* .about-single-image img {
        height: 380px;
    } */


    .about-experience-card {
        left: -20px;

        bottom: 35px;

        width: 110px;

        height: 110px;
    }


    .about-experience-card strong {
        font-size: 28px;
    }


    .about-features {
        grid-template-columns: repeat(2, 1fr);
    }


    .about-feature:nth-child(2) {
        border-right: 0;
    }


    .about-feature:nth-child(-n+2) {
        border-bottom: 1px solid #e8e4dc;
    }

}


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

@media (max-width: 700px) {

    .about-relationships {
        padding: 65px 0;
    }


    .about-relationships__grid {
        grid-template-columns: 1fr;

        gap: 50px;
    }


    .about-relationships__content {
        text-align: left;
    }


    .about-relationships__content h2 {
        margin-top: 12px;

        font-size: clamp(34px, 10vw, 45px);
    }


    .about-relationships__content p {
        max-width: 100%;

        font-size: 14px;
    }


    /* Single Image */

    .about-single-image {
        min-height: auto;

        padding-left: 15px;
    }


    .about-single-image img {
        width: 100%;

        /* height: 360px; */
    }


    /* Experience Card */

    .about-experience-card {
        left: -5px;

        bottom: 25px;

        width: 100px;

        height: 100px;
    }


    .about-experience-card strong {
        font-size: 26px;
    }


    .about-experience-card span {
        font-size: 8px;
    }


    /* Features */

    .about-features {
        grid-template-columns: 1fr;

        margin-top: 60px;
    }


    .about-feature {
        border-right: 0;

        border-bottom: 1px solid #e8e4dc;
    }


    .about-feature:last-child {
        border-bottom: 0;
    }

}


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

@media (max-width: 480px) {

    .about-relationships {
        padding: 55px 0;
    }


    .about-relationships__actions {
        align-items: flex-start;

        flex-direction: column;

        gap: 18px;
    }


    .about-relationship-btn {
        width: auto;
    }


    .about-single-image {
        padding-left: 10px;
    }


    /* .about-single-image img {
        height: 300px;
    } */


    .about-experience-card {
        width: 90px;

        height: 90px;

        left: -2px;

        bottom: 20px;
    }


    .about-experience-card strong {
        font-size: 23px;
    }


    .about-experience-card span {
        font-size: 7px;

        letter-spacing: 0.8px;
    }


    .about-feature {
        padding: 30px 20px;
    }

}