/* blog_list start */
.title{
    font-weight: bold;
    font-size: large;
    font-style: italic;
}
.card {
    border-radius: 12px !important; /* or any px/rem value */
  }
  .card-body img{
    border-radius: 12px !important; /* or any px/rem value */
  }

 @media (max-width: 576px) {
    .card {
        padding:0px !important;
    }
}

/* blog_list end */

.layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /*padding: 25px;
    flex-wrap: wrap; /* Allows wrapping on small screens */
    gap: 20px;
}

.left-ad,
.right-ad {
    width: 15%;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
}

.blog {
    width: 55%;
    box-sizing: border-box;
}

.blog-item {
    width: 100%;
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-sizing: border-box;
}
/* Show left and right ads only on desktops (width ≥ 1024px) */
@media (max-width: 1024px) {
    .layout {
        flex-direction: column;
        align-items: center;
    }

    .left-ad,
    .right-ad {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
       
        /* Show ads on top */
    }


    .blog {
        width: 100% !important;
        /* Take full width */
        padding: 0px;

    }

    .blog-item {
        width: 90%;
    }
}

@media (max-width: 991px) {
    .layout {
        flex-direction: column;
        align-items: center;
    }

    .left-ad,
    .right-ad {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        order: -1;
        /* Show ads on top */
    }

    .right-ad {
        order: 2;
        /* Show right ad at bottom */
    }

    .blog {
        width: 100% !important;
        /* Take full width */
        padding: 0px;

    }

    .blog-item {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .layout {
        flex-direction: column;
        align-items: center;
    }

    .left-ad,
    .right-ad {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        order: -1;
        /* Show ads on top */
    }

    .right-ad {
        order: 2;
        /* Show right ad at bottom */
    }

    .blog {
        width: 100% !important;
        /* Take full width */
        padding: 0px;
    }

    .blog-item {
        width: 100%;
    }

    .blog-img img {
        height: 150px !important;
    }
}