.main-content {
    padding-top: 10rem;
 }
 .flex-bar {
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
 }
 .item {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        display:flex;
        justify-content:space-evenly;
        align-items:center;
        flex-direction:column;
        cursor:pointer;
        padding:1rem;
        transition:0.2s ease-in-out;
        border-radius:4px;
        min-height:200px;
        overflow: hidden;
        position:relative;
        color:rgb(80,80,80);
    }
    .item::before {
        content:"";
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
        width: 0;
        height: 0;
        background:var(--clr);
        border-radius: 100%;
        transition: 0.3s ease-in-out;
    }
    .item:hover::before {
        width: 150%;
        height: 150%;
    }
    .item:hover {
        color:rgb(255,255,255);
    }
    .item-content {
        position:relative;
        display: flex;
        z-index: 1;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }
    .item-arrow {
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        padding: 2rem;
        width: 100%;
        position: relative;
        border-radius: 5px;
        transition: 0.3s ease-in-out;
        background:rgb(250,250,250);
    }
    .item-arrow:hover {
        color:rgb(255,255,255);
        background:rgb(8, 75, 146);
    }
    .item-arrow::before {
        position: absolute;
        content:"";
        width:10px;
        height: 10px;
        top: 50%;
        right:5%;
        transform: translate(-5%, -50%) rotate(-45deg);
        border-right:solid 2px rgb(50,50,50);
        border-bottom:solid 2px rgb(50,50,50);
    }
    .item-arrow:hover::before {
        border-right:solid 2px rgb(255,255,255);
        border-bottom:solid 2px rgb(255,255,255);
    }
    @media(max-width:768px) {
        .flex-bar {
            flex-wrap: wrap;
        }
    }