:root {
    /* Light Mode Colors */
    --bg-color: #eceef2;
    --text-color: #727476;
    --primary-color: #0460e5;
    --secondary-color: #11d5ff;
    --box-color: #0460e5;
    --counter-color: #0e0e0e;
    --counter-text: #11d5ff;
    --icon-text: #0460e5;
    --heading-text: #000;

  }
  
  [data-theme="dark"] {
    /* Dark Mode Colors */
    --bg-color: #121212;
    --text-color: #727476;
    --primary-color: #0460e5;
    --secondary-color: #11d5ff;
    --box-color: #11d5ff;
    --counter-color: #2e2f2f;
    --counter-text: #0460e5;
    --icon-text: #11d5ff;
    --heading-text: #fff;

  }

.blogs{
    width: 100%;
    margin-top: 100px;
    display: flex;
    justify-content: space-between;
}

.blog-list{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive columns */
    gap: 30px;
    margin: 0 auto;
    height: fit-content;

}


.blog-admin{
    width: 30%;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin: 0 auto;
}

.blog-admin-col{
    width: 100%;
    box-shadow: 0 4px 6px var(--text-color); /* Subtle shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    padding: 10px 0;
}
.blog-admin-col:hover{
    transform: translateY(-5px);
    box-shadow: 0px 8px 15px var(--secondary-color);
}


.blog-card-body h5, p{
    text-align: center;
}

.blog-latest-post{
    display: flex;
    padding: 7px 6px;
}


.blog-latest-post-body{
    text-align: center;
    padding-left: 4%;
}

.blog-latest-post-body span, a{
    text-decoration: none;

}



@media(max-width: 800px){

    .blogs{
        flex-direction: column;
        gap: 2rem;
    }

    .blog-list{
        width: 90%;
    }
    
    .blog-admin{
        width: 90%;
    }
    

}