/**
 * Component Styles: Recruit CEO Message
 *
 * Styles for the recruitment CEO message section
 *
 * @package RIKAI_Marketing
 * @since 1.0.0
 */

/* ==========================================================================
   CEO Photo
   ========================================================================== */
.ceo-photo-div {
}

.ceo-photo-wrapper {
    position: relative;
    width: 100%;
    max-width: 435px;
    margin: 0 auto;
    margin-top: -70%;
}

.ceo-photo-background {
    position: absolute;
    bottom: -10px;
    left: 0px;
    width: 40%;
    height: 40%;
    background: linear-gradient(135deg, #484848 0%, #484848 100%);
    border-radius: 50%;
    z-index: 1;
}

.ceo-photo {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    margin-top: -90%;
    z-index: 2;
}

.ceo-photo img {
    width: 100%;
    height: auto;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ==========================================================================
   Highlight Text
   ========================================================================== */

.ceo-message-highlight {
    margin-top: 25px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 3px;
}

/* ==========================================================================
   Message Content
   ========================================================================== */

.ceo-message-content {
    line-height: 2;
    font-weight: 700;
}

.ceo-message-highlight p,
.ceo-message-content p {
    margin-bottom: 0px;
}

/* ==========================================================================
   CEO Information
   ========================================================================== */

.ceo-info {
    margin-top: 35px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;
    font-weight: 700;
}

.ceo-message-cta {
    text-align: center;
}

/* ==========================================================================
   Responsive Styles
   ========================================================================== */

/* Tablet */
@media (max-width: 991px) {
    .ceo-photo-wrapper {
        width: 350px;
        max-width: 350px;
        margin-top: -190%;
        margin-left: -90px;
    }

    .ceo-photo-background {
        left: unset;
        right: 30px;
    }

    .ceo-message-highlight p {
        font-size: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .ceo-photo-div {
        height: 400px;
    }

    .ceo-photo-wrapper {
        max-width: 350px;
        margin: 0 auto;
        top: 340px;
    }

    .ceo-photo-background {
        bottom: unset;
    }

    .ceo-message-highlight {
        margin-top: 20px;
    }

    .ceo-message-content {
        margin-top: 20px;
    }
}

/* Small Mobile */
@media (max-width: 575px) {
    .ceo-photo-div {
        height: 300px;
    }

    .ceo-photo-wrapper {
        max-width: 250px;
        top: 250px;
    }
}