@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap');

.content-container {
    max-width: var(--max-container-width);
    width: var(--normal-container-width);
    margin: 5% auto;
}

.content-container h2 {
    font-weight: 700;
    color: var(--color-black-200);
}

.company {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
}

.company-content h2 {
    background-color: var(--color-secondary);
    padding: 20px;
}

.company p {
    margin: 20px 0;
    width: 80ch;
    text-align: justify;
}

.watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.2;
}

.watermark img {
    width: 256px;
    height: 256px;
}

.office {
    width: 50%;
    height: 100%;
    max-height: 500px;
    overflow: hidden;
    border-radius: 15px;
}

.office img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ceo-message {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53%;
    margin: 2% auto;
}

.ceo-p {
    margin: 20px 0;
    max-width: 80ch;
    font-size: 1.5rem;
    font-family: 'Poppins' !important;
    color: var(--color-black-100);
    font-weight: 600;
    text-align: justify;
}

.name {
    font-size: 1.2rem;
    margin-top: 30px;
    margin-bottom: 2px;
    font-weight: 500 !important;
}

.ceo-message .name {
    color: var(--color-black-200);
    font-weight: 600;
}

.ceo-message .job-title {
    font-weight: 400;
    color: var(--color-grey-100);
}

.message {
    width: 100%;
    margin: 40px 0;
}

.message h2 {
    padding: 20px 0;
    background-color: var(--color-secondary);
    width: 100%;
    text-align: center;
}

/* .ceo-image {
    height: 256px;
    width: 50%;
    overflow: hidden;
    border-radius: 15px;
}

.ceo-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
} */

.ceo-message img {
    width: 464px;
    height: 527.4375px;
}

.show-on-responsive {
    display: none;
}

@media only screen and (max-width: 1620px) {
    .ceo-image, .office {
        display: none;
    }

    .ceo-message, .company {
        display: block;
        width: 100%;
    }

    .ceo-message img:last-child {
        display: none;
    }

    .ceo-message img:first-child {
        width: 256px;
        height: 291px;
    }

    .ceo-message .message {
        width: 100%;
    }

    .company p {
        width: 100%;
    }

    .show-on-responsive {
        display: block;
        width: 100%;
        height: 350px;
        margin: 30px 0;
    }
}

@media only screen and (max-width: 900px) {
    /* .watermark {
        top: 35%;
        transform: translate(-50%, -35%);
    } */

    .watermark img {
        width: 164px;
        height: 164px;
    }
}
/* 
@media only screen and (max-width: 700px) {
    .watermark {
        top: 50%;
        transform: translate(-50%, -50%);
    }
} */