/* ================================ PHILOSOPHY STYLE ================================ */
#philosophy { margin-top: 12vh; }

#philosophy .two-columns {
    position: relative;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start; /* TOP ALIGN */
    gap: 2rem;
}

.philosophy-image, .philosophy-text {
    flex: 1 1 0;
    position: static;     /* remove all offset */
    margin: 0 2vw 0 2vw;
}

.philosophy-image img { 
    width: 100%;
    border-radius: 8px; 
}

.philosophy-text {
    border: 1px solid var(--color-text);
    padding-top: 3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 2rem;
    border-radius: 8px;
    background: var(--color-bg);
    min-width: 300px;
    max-width: 650px;
    position: relative;
}

@media (max-width: 1100px) {
    #philosophy .two-columns{
        flex-direction:column;
        gap:1.5rem;
    }
    #philosophy .philosophy-text{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .philosophy-text::before {
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        text-align: center !important;
        width: auto !important;
        max-width: 90% !important;
        min-width: 0 !important;
        right: auto !important;
    }

    .philosophy-text { position: relative !important; }
}

@media (max-width: 700px) {
    #philosophy {
        opacity:1 !important;
        transform:none !important;
    }

    .philosophy-text { padding-top: 2.2rem !important; }

    .philosophy-text {
        position: relative !important;
        min-width: 0 !important;
        max-width: 100% !important;
        margin-top: 0 !important;
    }

    #philosophy .philosophy-text { padding:1.8rem 1.3rem !important; }
}