
/* =========================================
   SECRETARY MESSAGE PAGE
========================================= */

.secretary-page {
    background: #fff;
    padding: 15px 0 15px;
}

/* Layout */
.secretary-layout {
    display: flex;
    gap: 15px;
    align-items: stretch;
}


/* =========================================
   LEFT PROFILE CARD
========================================= */

.secretary-profile-card {
    width: 283px;
    min-width: 283px;

    background:
        linear-gradient(
            145deg,
            #f4fbf8 0%,
            #f1faf6 65%,
            #e9f6f1 100%
        );

    border: 1px solid #e1eee9;
    border-radius: 8px;

    padding: 10px;

    position: relative;
    overflow: hidden;
}


/* Photo */

.secretary-photo {
    width: 261px;
    height: 206px;

    margin: 0;

    background: #cce8dc;
    border-radius: 5px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    overflow: hidden;
}

.secretary-photo img {
    width: 100%;
    height: 100%;
    display: block;
}


/* Name */

.secretary-name {
    color: #007548;

    font-size: 18px;
    font-weight: 700;

    line-height: 1.3;

    margin-top: 8px;
    margin-bottom: 2px;
}


/* Position */

.secretary-position {
    font-size: 14px;
    font-weight: 600;

    color: #55a888;

    margin-bottom: 2px;
}


/* Organization */

.secretary-organization {
    font-size: 14px;

    color: #80948e;

    line-height: 1.3;
}


/* Small line */

.secretary-profile-line {
    width: 18px;
    height: 2px;

    background: #31d77c;

    margin: 8px 0;
}


/* Signature */

.secretary-signature {
    margin-top: 2px;
    text-align: left;
}

.secretary-signature img {
    width: 58px;
    height: auto;

    object-fit: contain;

    margin-bottom: 2px;
}

.secretary-signature-name {
    font-size: 6px;

    color: #687b76;

    line-height: 1.35;
}


/* =========================================
   RIGHT MESSAGE CARD
========================================= */

.secretary-message-card {
    flex: 1;

    border: 1px solid #e1eee9;
    border-radius: 8px;

    background: #fff;

    padding: 10px 15px;

    box-shadow: 0 1px 5px rgba(0,0,0,0.02);
}


/* Heading */

.secretary-message-label {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #007548;

    font-size: 26px;
    font-weight: 700;

    margin-bottom: 5px;
}

.secretary-message-label i {
    color: #0a9b5c;
    font-size: 20px;
}


/* Main title */

.secretary-message-card h2 {
    margin: 0 0 7px;

    font-size: 16px;

    line-height: 1.4;

    color: #006d46;

    font-weight: 700;
}


/* Green line */

.secretary-message-line {
    width: 18px;
    height: 2px;

    background: #30d87b;

    margin-bottom: 7px;
}


/* Message text */

.secretary-message-text {
    color: #687875;

    font-size: 16px;

    line-height: 1.48;

    text-align: justify;
}

.secretary-message-text p {
    margin: 0 0 5px;
}


/* Strong text */

.secretary-message-text strong {
    color: #006d46;
}


/* =========================================
   MOST READ SIDEBAR
========================================= */

.secretary-sidebar {
    margin-top: 15px;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .secretary-layout {
        display: block;
    }

    .secretary-profile-card {
        width: 100%;
        min-width: 100%;

        margin-bottom: 15px;

        text-align: center;
    }

    .secretary-photo {
        margin-left: auto;
        margin-right: auto;

        max-width: 100%;
    }

    .secretary-profile-line {
        margin-left: auto;
        margin-right: auto;
    }

    .secretary-signature {
        text-align: center;
    }

    .secretary-message-card {
        width: 100%;
    }

}
