/* styles.css */


.container {
    max-width: 1200px;
}

.box {
    position: relative;
    color: white;
    padding: 40px 20px;
    margin: 20px 0;
    text-align: center;
    transform: skewX(-20deg); /* Slant the boxes */
}

    .box h3 {
        margin-top: 20px;
        font-size: 24px;
        font-weight: bold;
    }

    .box p {
        font-size: 14px;
        line-height: 1.6;
    }

.icon {
    font-size: 50px;
    margin-bottom: 20px;
}

.vision {
    background: #0E77B5;
}

.mission {
    background: #E07A2D;
}

.values {
    background: #C0392B;
}

/* Adjust the slant to make the content inside look straight */
.box h3,
.box p,
.box .icon {
    transform: skewX(20deg); /* Counter the slant inside the box */
}