/* Section Styles */
section {
    width: 100%;
    padding: 60px 0;
    position: relative;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Page Wrap */
.page-wrap {
    position: relative;
    width: 100%;
}

/* Row and Column Layout */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col-md-12, .col-sm-12, .col-lg-8, .col-md-6, .col-sm-8, .col-lg-4 {
    padding: 15px;
}

.col-md-12 {
    width: 100%;
}

.col-sm-12 {
    width: 100%;
}

.col-lg-8 {
    width: 66.666%;
}

.col-md-6 {
    width: 50%;
}

.col-sm-8 {
    width: 66.666%;
}

.col-lg-4 {
    width: 33.333%;
}

/* Post Detail */
.post-detail {
    width: 100%;
}

.post-feat-img, .serv-detail-img {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
}

    .post-feat-img img, .serv-detail-img img {
        width: 100%;
        height: auto;
        display: block;
    }

p {
    margin-bottom: 20px;
    font-size: 16px;
}

ul {
    list-style: none;
    margin-bottom: 20px;
}

    ul li {
        margin-bottom: 10px;
        font-size: 16px;
    }

/* Figure (Image on the right) */
figure.alignright {
    float: right;
    margin: 0 0 20px 20px;
    max-width: 300px;
    border-radius: 10px;
    overflow: hidden;
}

    figure.alignright img {
        width: 100%;
        height: auto;
    }

/* Sidebar */
.sidebar {
    width: 100%;
}

.widget-box {
    background-color: #f5f5f5; /* Assuming bg-color6 is a light background */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    overflow: hidden;
}

.widget-title3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #0396d0; /* Theme color */
    position: relative;
}

.widget-box ul li {
    margin-bottom: 10px;
}

    .widget-box ul li a {
        text-decoration: none;
        font-size: 16px;
        color: #0396d0;
        transition: color 0.3s;
    }

        .widget-box ul li a:hover {
            color: #027ab0;
        }

/* Responsive Design */

/* Tablets (768px and below) */
@media (max-width: 768px) {
    .col-lg-8, .col-lg-4, .col-md-6, .col-sm-8 {
        width: 100%;
    }

    figure.alignright {
        float: none;
        max-width: 100%;
        margin: 0 0 20px 0;
    }

    .post-feat-img, .serv-detail-img {
        margin-bottom: 15px;
    }

    .widget-box {
        padding: 15px;
    }

    .widget-title3 {
        font-size: 20px;
    }
}

/* Mobile Devices (576px and below) */
@media (max-width: 576px) {
    section {
        padding: 40px 0;
    }

    .container {
        padding: 0 10px;
    }

    .row {
        margin: 0 -10px;
    }

    .col-md-12, .col-sm-12, .col-lg-8, .col-md-6, .col-sm-8, .col-lg-4 {
        padding: 10px;
    }

    p, ul li {
        font-size: 14px;
    }

    .widget-title3 {
        font-size: 18px;
    }

    .widget-box {
        padding: 10px;
    }

    .post-feat-img img, .serv-detail-img img, figure.alignright img {
        border-radius: 8px;
    }
}

/* Large Screens (1200px and above) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}