.border{
    border: 2px solid red;
    margin: 1px;
}

.grid {
    display: grid;
    /* grid-template-rows: 1fr 1fr; */
}

.flex{
    display: flex;
}

.horizontal-center{
    justify-content: center;
}

.vertical-center{
    align-items: center;
}

.bg-black {
    background-color: black;
    color: white;
}

.invert {
    filter: invert(1);
}

.rounded {
    border-radius: 10px;
}
.m-1 {
    margin: 10px ;
}

.p-1 {
    padding: 10px;
}

.font {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.bg-gray {
    background-color: #121212;
}

.bg-transp {
    background-color: #1f1f1f;
}
.font-2 {
    /* font-family: 'nunito', sans-serif; */
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: rgb(255, 255, 255);
}
.font-3 {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgb(179, 179, 179);
}

.scroll-Bar {
    /* max-height: 80vh; */
    overflow-y: scroll;  
    /* overflow-x: hidden;     */
    scrollbar-color: #555 #1a1a1a;    
}

.scroll-Bar::-webkit-scrollbar {
    width: 12px;
}

.scroll-Bar::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.scroll-Bar::-webkit-scrollbar-thumb {
    background-color: #555;
    border-radius: 10px;
    border: 2px solid #1a1a1a;
}                 



.fadeUp {
    animation: fadeUp 0.3s ease-out both;
    /* animation-timeline: view(); */
}
@keyframes fadeUp {
    from{
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    to {
        opacity: 1;
        transform: translateY(0px) scale(1);
    }
}

/* Add this to handle viewport units on mobile */
@supports (-webkit-touch-callout: none) {
    .container {
        height: -webkit-fill-available; /* Fix iOS viewport height */
    }
}