.capability_container {
    position: relative;
    float: center;
    text-align: center;
    margin-top: 10vh;
}

.capability_title {
    color: #fff;
    font-size: 4vw;
    font-family: Tahoma, sans-serif;
}

.capability_box_container {
    margin-top: 5vh;
}

.capability_box {
    background-color: rgba(0, 0, 0, 0.5);
    margin-left: 15vw;
    margin-right: 15vw;
    margin-top: 1vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
    padding-left: 2vh;
}

.capability_header {
    color: white;
    text-align: left;
    font-size: 2vw;
    font-family: Tahoma, sans-serif;
    margin-left: 4vw;
}

.sideways-triangle-btn {
    width: 0;
    height: 1vh;
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
    border-bottom: 2vw solid #fff; /* You can change the color to your desired button color */
    cursor: pointer;
    transform: rotate(90deg);
    float: left;
}

.sideways-triangle-btn:hover {
    width: 0;
    height: 1vh;
    border-left: 1vw solid transparent;
    border-right: 1vw solid transparent;
    border-bottom: 2vw solid rgba(255, 255, 255, 0.5);; /* You can change the color to your desired button color */
    cursor: pointer;
    transform: rotate(90deg);
    float: left;
}

.capability_paragraph {
    color: white;
    text-align: left;
    font-size: 1vw;
    font-family: Tahoma, sans-serif;
    margin-left: 4vw;
    margin-right: 4vw;
    margin-top: 2vh;
    display: none;
}

/* Extra small devices (phones, < 576px) */
@media only screen and (max-width: 575px) {
    .capability_title {
        color: #fff;
        font-size: 8vw;
        font-family: Tahoma, sans-serif;
    }

    .capability_box {
        background-color: rgba(0, 0, 0, 0.5);
        margin-left: 5vw;
        margin-right: 5vw;
        margin-top: 1vh;
        padding-top: 2vh;
        padding-bottom: 2vh;
        padding-left: 5vh;
    }

    .capability_header {
        color: white;
        text-align: left;
        font-size: 6vw;
        font-family: Tahoma, sans-serif;
        margin-left: 4vw;
    }

    .sideways-triangle-btn {
        width: 0;
        height: 2vh;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-bottom: 4vw solid #fff; /* You can change the color to your desired button color */
        cursor: pointer;
        transform: rotate(90deg);
        float: left;
    }
    
    .sideways-triangle-btn:hover {
        width: 0;
        height: 2vh;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-bottom: 4vw solid rgba(255, 255, 255, 0.5);; /* You can change the color to your desired button color */
        cursor: pointer;
        transform: rotate(90deg);
        float: left;
    }

    .capability_paragraph {
        color: white;
        text-align: left;
        font-size: 4vw;
        font-family: Tahoma, sans-serif;
        margin-left: 4vw;
        margin-right: 4vw;
        margin-top: 2vh;
        display: none;
    }
}

/* Small devices (phones in landscape, 576px and up) */
@media only screen and (min-width: 576px) {
    /* Your CSS here */
}

/* Medium devices (tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    /* Your CSS here */
}

/* Large devices (desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    /* Your CSS here */
}

/* Extra large devices (large desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    /* Your CSS here */
}