#about-page .general-header {
    background-image     : url("/assets/images/bg/rendezvous-bay.jpg");
    background-position-y: 20%;
}

#about-section {
    padding: 48px 0 80px;
}

#about-section div.inner {
    gap: 80px;
}

#about-section h4 {
    margin-top: 48px;
    width     : max-content;
}

.about-panel {
    display   : flex;
    gap       : 30px;
    text-align: left;
}

.about-panel:last-child {
    flex-direction: row-reverse;
}

.about-panel>* {
    flex      : 1;
    min-width : 0;
    object-fit: cover;
}

.about-panel h1 {
    font-size     : 25px;
    font-weight   : 700;
    line-height   : 30px;
    margin        : 0 0 32px;
    padding-bottom: 24px;
    border-bottom : solid 1px #ebebeb;
}

.about-panel p {
    color        : #555;
    margin-bottom: 14px;
}

.about-panel em {
    color: rgb(128, 128, 128);
}

.about-panel p,
.about-panel em {
    font-size  : 14px;
    line-height: 22px;
    font-weight: 500;
}

.about-panel ul {
    padding-left: 12px;
    line-height : 32px;
}

.about-panel ul li {
    padding-left: 12px;
    font-weight : 500;
    font-size   : 13px;
}

.about-panel ul li::marker {
    font-family            : 'Font Awesome 5 Free';
    font-weight            : 600;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
    content                : "•";
    font-size              : 14px;
    color                  : var(--primary);
}

#about-carousel {
    position : relative;
    width    : 100%;
    max-width: 600px;
    margin   : auto;
}

.arrow-container {
    background     : #ffffffa6 !important;
    border-radius  : 50%;
    display        : flex !important;
    align-items    : center !important;
    justify-content: center !important;
    width          : 28px !important;
    height         : 28px !important;
    z-index        : 100;
    opacity        : 0.75;
    transition     : opacity 0.3s;
}

.arrow-container:hover {
    opacity: 1;
}

.arrow-container::before {
    content: none !important;
}

.arrow-container svg {
    stroke      : var(--primary);
    stroke-width: 3;
    width       : 100%;
}

.slick-prev {
    left: 12px !important;
}

.slick-next {
    right: 12px !important;
}

@media screen and (max-width: 991px) {

    #about-section div.inner {
        max-width: 600px;
    }

    .about-panel {
        text-align    : center;
        flex-direction: column-reverse !important;
    }

    .about-panel>img {
        max-width: 100%;
        margin   : auto;
        flex     : auto;
    }

    .about-panel ul {
        text-align: left;
    }

}