/* Blog */


.my-blog {
    padding: 50px 0;
    background: linear-gradient(90deg, rgb(202, 233, 223) 0%, rgb(124, 201, 182) 35%, rgb(158, 184, 226) 100%);
    width: 100%;
}

.my-blog h3 {
    font-size: 40px;
    font-weight: 600;
    padding: 0 58px;
    position: relative;
    display: inline-block;
    margin-left: 0px;
}


.my-blog h3::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px; 
    height: 4px;
    background-color: #4070f4;
}

@media screen and (max-width: 768px) {
    .my-blog h3 {
        font-size: 30px; /* Decrease font size for smaller screens */
        padding: 0 28px; /* Adjust padding for smaller screens */
        margin-left: 0; /* Remove left margin for smaller screens */
    }
}

.container {
    width: 100%;
    display: flex;
    padding: 0 20px; /* Add padding to the sides */
    box-sizing: border-box; /* Ensure padding doesn't affect width */
    display: flex;
    margin: 0 auto; /* Center the container horizontally */
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
}


.card {
    width: calc(100% - 20px);
    max-width: 400px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

.card-header img {
    width: 100%;
    height: 200px;
    display: block;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.card-body {
    padding: 20px;
}

.tag {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
    display: inline-block;
}

.tag-teal {
    background-color: #1abc9c;
    color: #fff;
}

.tag-purple {
    background-color: #9b59b6;
    color: #fff;
}

.card-body h4 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}

@media screen and (min-width: 768px) {
    .card {
        width: calc(50% - 20px);
    }
}


@media only screen and (max-width: 768px) {
    .container {
        margin: 0 auto; /* Center the container horizontally */
        align-items: center;
    }
}


/* READ MORE BUTTON */

.card-body {
    text-align: center; /* Center align the content */
    transition: transform 0.3s ease; /* Add transition effect */
}

.card-body:hover {
    transform: scale(1.05); /* Scale up the card body on hover */
}

.read-more-btn {
    display: inline-block;
    padding: 8px 16px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    margin-top: 10px; /* Add some top margin to separate the button from the content */
}

.read-more-btn:hover {
    background-color: #0056b3;
}