/* Global Link Styling */
 a {
     text-decoration: none !important;
     color: #337ab7;
     transition: all 0.2s ease-in-out;
 }

 a:hover {
     text-decoration: none;
     color: #23527c;
 }

 .main-content {
     padding-top: 2rem;
 }

 .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);
     background: var(--clr);
     color: rgb(255, 255, 255);

 }
.nav-item.acive .nav-link {
    color: rgb(255, 255, 255) !important;
    background: rgb(8, 75, 146) !important;
    border-radius: 5px;
}

 /* .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;
     }
 }