.blog {
    padding: 20px 0;

    .heading-section {
        margin-top: 130px;
        height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    
    small {
        color: #666;
    }
    
    
    .img-block {
        width: 50%;
        height: 300px;
        overflow: hidden;
    }
    
    .img-block img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 300ms;
    }
    
    .img-block:hover img {
        transform: scale(1.1);
    }
    
    
    .blogs {
        width: 90%;
        margin: 0 auto 30px;
        padding-bottom: 30px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .blogs .card {
        border: none;
        min-height: 300px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s;
    }
    
    .blogs .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    }
    
    .blogs .card .img-block {
        width: 100%;
        height: 250px;
    }
    
    .card-body {
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 10px;
        padding: 1.5rem;
    }
    
    .card-title {
        font-size: 1.25rem;
        font-weight: bold;
        margin: 0;
    }
    
    .card-info {
        flex-grow: 1;
    }
    
    .card-info p {
        margin: 0;
        color: #666;
        line-height: 1.6;
    }
    
    /* Blog Meta Information */
    .blog-meta {
        font-size: 0.875rem;
        color: #666;
        margin: 0.5rem 0;
    }
    
    .blog-meta i {
        margin-right: 5px;
    }
    
    /* Buttons */
    .blogs button {
        padding: 5px 10px;
        border: 1px solid black;
        color: black;
        background: none;
        transition: all 300ms;
        cursor: pointer;
        font-weight: bold;
        font-size: 0.9rem;
    }
    
    .blogs button:hover {
        color: white;
        background: black;
    }
    
    /* Single Blog View */
    .single-blog-view {
        padding: 40px 0;
    }
    
    .blog-header {
        text-align: center;
        margin-bottom: 2rem;
    }
    
    .blog-excerpt {
        color: #666;
        margin-top: 1rem;
    }
    
    .featured-image-large {
        width: 100%;
        height: auto;
        margin-bottom: 2rem;
        border-radius: 8px;
    }
    
    .blog-content {
        color: #333;
        margin-bottom: 2rem;
    
        p {
            font-size: 1.1rem;
        }
    }
    
    .blog-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    
    .blog-tags h6 {
        display: inline;
        margin-right: 10px;
    }
    
    .blog-tags .badge {
        max-width: 100%;
        margin-right: 5px;
        padding: 5px 10px;
        background-color: #6c757d;
        word-wrap: break-word;
        word-break: break-word;
        white-space: normal;
        text-align: left;
        line-height: normal;
    }
    
    .blog-navigation {
        margin-top: 3rem;
        text-align: center;
    }
    
    /* No Blogs Message */
    .no-blogs {
        text-align: center;
        padding: 60px 20px;
        grid-column: 1 / -1;
    }
    
    /* Responsive Design */
    @media (max-width: 992px) {
        .blogs {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 720px) {
        .heading-section {
            margin-top: 50px;
        }
    
        .img-block {
            width: 100%;
        }
    
        .blogs {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (max-width: 480px) {
        .blogs {
            grid-template-columns: 1fr;
            width: 95%;
        }
    
        .blog-header h1 {
            font-size: 1.75rem;
        }
    
        .blog-content {
            font-size: 1rem;
        }
    }
    
    /* Add these styles to your blog.css file */
    
    /* Responsive images in blog content */
    .blog-content img {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 1rem auto;
    }
    
    /* Responsive video embeds */
    .blog-content iframe {
        max-width: 100%;
        width: 100%;
        height: 400px;
        margin: 1rem auto;
        display: block;
    }
    
    /* Summernote video wrapper */
    .blog-content .note-video-clip {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Responsive video container */
    .blog-content .video-container,
    .blog-content .embed-responsive {
        position: relative;
        padding-bottom: 56.25%;
        /* 16:9 aspect ratio */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        margin: 1rem auto;
    }
    
    .blog-content .video-container iframe,
    .blog-content .embed-responsive iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /* Support for Trebuchet MS font */
    .blog-content {
        font-family: inherit;
    }
    
    .blog-content [style*="Trebuchet MS"] {
        font-family: "Trebuchet MS", Helvetica, sans-serif !important;
    }
}


/*.blog {*/
/*    padding: 20px 0;*/
/*}*/


/*.heading-section {*/
/*    height: 100vh;*/
/*    display: flex;*/
/*    justify-content: center;*/
/*    flex-direction: column;*/
/*    gap: 10px;*/
/*}*/

/*.heading-text {*/
/*    display: flex;*/
/*    align-items: start;*/
/*    flex-direction: column;*/
/*    gap: 10px;*/
/*}*/

/*.heading-text h2 {*/
/*    margin: 0;*/
/*    font-weight: bold;*/
/*}*/

/*.heading-text small {*/
/*    color: #666;*/
/*}*/


/*.img-block {*/
/*    width: 50%;*/
/*    height: 300px;*/
/*    overflow: hidden;*/
/*}*/

/*.img-block img {*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    object-fit: cover;*/
/*    transition: transform 300ms;*/
/*}*/

/*.img-block:hover img {*/
/*    transform: scale(1.1);*/
/*}*/


/*.blogs {*/
/*    width: 90%;*/
/*    margin: 0 auto 30px;*/
/*    padding-bottom: 30px;*/
/*    display: grid;*/
/*    grid-template-columns: repeat(3, 1fr);*/
/*    gap: 30px;*/
/*}*/

/*.blogs .card {*/
/*    border: none;*/
/*    min-height: 300px;*/
/*    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
/*    transition: transform 0.3s;*/
/*}*/

/*.blogs .card:hover {*/
/*    transform: translateY(-5px);*/
/*    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);*/
/*}*/

/*.blogs .card .img-block {*/
/*    width: 100%;*/
/*    height: 250px;*/
/*}*/

/*.card-body {*/
/*    display: flex;*/
/*    align-items: start;*/
/*    flex-direction: column;*/
/*    gap: 10px;*/
/*    padding: 1.5rem;*/
/*}*/

/*.card-title {*/
/*    font-size: 1.25rem;*/
/*    font-weight: bold;*/
/*    margin: 0;*/
/*}*/

/*.card-info {*/
/*    flex-grow: 1;*/
/*}*/

/*.card-info p {*/
/*    margin: 0;*/
/*    color: #666;*/
/*    line-height: 1.6;*/
/*}*/

/* Blog Meta Information */
/*.blog-meta {*/
/*    font-size: 0.875rem;*/
/*    color: #666;*/
/*    margin: 0.5rem 0;*/
/*}*/

/*.blog-meta i {*/
/*    margin-right: 5px;*/
/*}*/

/* Buttons */
/*.blogs button {*/
/*    padding: 5px 10px;*/
/*    border: 1px solid black;*/
/*    color: black;*/
/*    background: none;*/
/*    transition: all 300ms;*/
/*    cursor: pointer;*/
/*    font-weight: bold;*/
/*    font-size: 0.9rem;*/
/*}*/

/*.blogs button:hover {*/
/*    color: white;*/
/*    background: black;*/
/*}*/

/* Single Blog View */
/*.single-blog-view {*/
/*    padding: 40px 0;*/
/*}*/

/*.blog-header {*/
/*    text-align: center;*/
/*    margin-bottom: 2rem;*/
/*}*/

/*.blog-excerpt {*/
/*    color: #666;*/
/*    margin-top: 1rem;*/
/*}*/

/*.featured-image-large {*/
/*    width: 100%;*/
/*    height: auto;*/
/*    margin-bottom: 2rem;*/
/*    border-radius: 8px;*/
/*}*/

/*.blog-content {*/
/*    color: #333;*/
/*    margin-bottom: 2rem;*/

/*    p {*/
/*        font-size: 1.1rem;*/
/*    }*/
/*}*/

/*.blog-tags {*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    gap: 5px;*/
/*}*/

/*.blog-tags h6 {*/
/*    display: inline;*/
/*    margin-right: 10px;*/
/*}*/

/*.blog-tags .badge {*/
/*    max-width: 100%;*/
/*    margin-right: 5px;*/
/*    padding: 5px 10px;*/
/*    background-color: #6c757d;*/
/*    word-wrap: break-word;*/
/*    word-break: break-word;*/
/*    white-space: normal;*/
/*    text-align: left;*/
/*    line-height: normal;*/
/*}*/

/*.blog-navigation {*/
/*    margin-top: 3rem;*/
/*    text-align: center;*/
/*}*/

/* No Blogs Message */
/*.no-blogs {*/
/*    text-align: center;*/
/*    padding: 60px 20px;*/
/*    grid-column: 1 / -1;*/
/*}*/

/* Responsive Design */
/*@media (max-width: 992px) {*/
/*    .blogs {*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*    }*/
/*}*/

/*@media (max-width: 720px) {*/
/*    .heading-section {*/
/*        margin-top: 50px;*/
/*    }*/

/*    .img-block {*/
/*        width: 100%;*/
/*    }*/

/*    .blogs {*/
/*        grid-template-columns: repeat(2, 1fr);*/
/*    }*/
/*}*/

/*@media (max-width: 480px) {*/
/*    .blogs {*/
/*        grid-template-columns: 1fr;*/
/*        width: 95%;*/
/*    }*/

/*    .blog-header h1 {*/
/*        font-size: 1.75rem;*/
/*    }*/

/*    .blog-content {*/
/*        font-size: 1rem;*/
/*    }*/
/*}*/

/* Add these styles to your blog.css file */

/* Responsive images in blog content */
/*.blog-content img {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*    display: block;*/
/*    margin: 1rem auto;*/
/*}*/

/* Responsive video embeds */
/*.blog-content iframe {*/
/*    max-width: 100%;*/
/*    width: 100%;*/
/*    height: 400px;*/
/*    margin: 1rem auto;*/
/*    display: block;*/
/*}*/

/* Summernote video wrapper */
/*.blog-content .note-video-clip {*/
/*    width: 100% !important;*/
/*    height: auto !important;*/
/*}*/

/* Responsive video container */
/*.blog-content .video-container,*/
/*.blog-content .embed-responsive {*/
/*    position: relative;*/
/*    padding-bottom: 56.25%;*/
    /* 16:9 aspect ratio */
/*    height: 0;*/
/*    overflow: hidden;*/
/*    max-width: 100%;*/
/*    margin: 1rem auto;*/
/*}*/

/*.blog-content .video-container iframe,*/
/*.blog-content .embed-responsive iframe {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/

/* Support for Trebuchet MS font */
/*.blog-content {*/
/*    font-family: inherit;*/
/*}*/

/*.blog-content [style*="Trebuchet MS"] {*/
/*    font-family: "Trebuchet MS", Helvetica, sans-serif !important;*/
/*}*/