/*
Theme Name: CodeweTrust
*/

.singlephp div ul,
.singlephp div p,
.singlephp div img,
.singlephp div ol,
.singlephp div a:not(.quick-links a) {
    margin-bottom: 16px !important;
}
.singlephp div {
    margin-bottom: 15px !important;
}
h1,
h2,
h3,
h4 {
    margin: 15px auto;
}

/* Limit width of inner divs on single post pages */
.singlephp .container div {
    max-width: 800px !important;
    margin-left: auto;
    margin-right: auto;
}

li.breadcrumb-item {
    font-size: 14px;
    color: #333333;
}
.margin-bread {
    margin-bottom: 36px;
    margin-top: 24px;
}
.bg-menu-blue {
    background: #002445;
}

body,
h1,
h2,
p,
ul,
li,
ol,
div {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 16px;
    font-style: normal;
}

.btn-lightblue {
    background: #47DEFF !important;
    border: 1px solid #47DEFF;
    font-size: 15px;
    color: #000;
    padding: 12px 31.64px 12px 31.84px;
}

.btn-lightblue {
    font-weight: 500;
}

.title-header {
    font-size: 36px;
    line-height: 1.5;
    font-weight: 600;
    color: #002445;
}

.theme-blue {
    color: #002445;
}

.breadcrumb-last-head {
    color: #484848;
}

.category_sub.active {
    font-weight: 700;
    color: #333333;
    font-size: 14px;
    font-family: 'Roboto';
}

.category_sub {
    font-weight: 400;
    color: #333333;
    font-size: 14px;
    font-family: 'Roboto';
}

.published-date {
    color: #444444;
    font-size: 14px;
    font-weight: bold;
    font-weight: 400;
}

.vi-post-heading h3 {
    color: #222222;
    margin-bottom: 36px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Needed to make it work */
    overflow: hidden;
    /* white-space: nowrap; */
}

.para-description p {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
}

.readmore {
    color: #2AA2EE;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

#myTab {
    width: max-content;
}
body {
    background: #ffffff;
}
.vi-nav-tabs .nav-tabs .nav-link {
    margin: 0;
}
.vi-nav-tabs li.nav-item {
    background: #fff;
    margin: 0 12px 12px 0 !important;
    border-radius: 8px;
}
.vi-nav-tabs .nav-item button {
    width: 100%;
}
.vi-nav-tabs .nav-tabs .nav-link {
    color: #B0B0B0;
}
.vi-nav-tabs .nav-tabs .nav-link.active i {
    color: #1592E9;
}
html body .vi-nav-tabs .nav-link.active {
    background: #D4EBFF !important;
    border-radius: 8px;
    border: 1px #1592E9 solid !important;
}

.fa-link,
.fa-share {
    cursor: pointer;
}
.w-max-content {
    width: max-content;
    padding: 4px 12px 4px 12px;
    border-radius: 6px;
    border: 1px solid #CCCCCC;
    font-size: 14px;
    color: #666666;
    height: 36px !important;
    /* margin-bottom:24px; */
}
.search-blog {
    background: transparent !important;
    border: 1px solid #ccc !important;
    outline: none !important;
    height: 36px !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    padding: 0px 14px !important;
    font-size: 14px;
}
.search-blog:focus {
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    height: 36px !important;
    padding: 0px 14px !important;
    font-size: 14px;
}

.searchicon {
    color: #656565;
}
.w-max-content {
    cursor: pointer;
}
.filter-items {
    display: none;
    background: white;
    position: absolute;
    z-index: 1;
    border-radius: 6px;
    padding: 4px 12px 4px 12px;
    border-radius: 6px;
    border: 1px solid #ccc !important;
    font-size: 14px;
    color: #666666;
}
.vi-bg-dark {
    background: #002445;
    padding: 2px 8px 2px 8px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 400;
}
.vi-pos-abs {
    right: 20px;
    top: 20px;
}

/* Blog card container */
.category_tab {
    border-radius: 8px;
    box-shadow: 0px 4px 20px 0px #ededed !important;
    padding: 16px 16px 32px 16px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/* Hover effect for blog card */
.category_tab:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

/* New excerpt behaviour */
.limited-paragraph {
    /* default: show only a few lines */
    max-height: 5.6em; /* ~4 lines at 1.4 line-height */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    transition: max-height 0.4s ease;
}

/* Expand excerpt on hover of the blog card */
.category_tab:hover .limited-paragraph {
    max-height: 1000px; /* big enough to reveal full excerpt */
}

i {
    cursor: pointer;
}

@media (max-width: 767px) {
    .vi-nav-tabs li.nav-item {
        margin: unset;
        margin-right: 10px;
        margin-bottom: 10px;
        width: 137px;
    }
    .w-max-content {
        /* margin-bottom: 24px; */
    }
    .navbar-light .navbar-toggler {
        background: #ffffff;
    }
    .w-md-25 {
        width: 50% !important;
    }
    .vi-nav-tabs {
        flex-wrap: unset;
        overflow-x: scroll;
    }
    html body .vi-nav-tabs .nav-link {
        gap: 0 !important;
        font-size: 12px !important;
    }
    .vi-nav-tabs li.nav-item {
        width: unset;
    }
    .search-block .w-25 {
        width: 50% !important;
    }
    .filter-items {
        right: 8%;
    }
}

/* surya css 3-9-24  corrected */

html body .vi-nav-tabs .nav-link.active {
    background: #ffffff !important;
    border-radius: 8px;
    font-weight: bold;
    color: #333333;
    border: 2px solid #1592e9;
    font-size: 14px;
    gap: 6px;
    box-shadow: rgb(0 160 253 / 22%) 0 3px 8px;
}
.vi-nav-tabs li.nav-item button {
    padding: 8px 12px 8px 12px;
    /* height: 56px; */
    background: #ffffff !important;
    border-radius: 8px;
    font-weight: normal;
    color: #333333;
    border: 1px solid #e1e1e1;
    font-size: 14px;
    gap: 6px;
    box-shadow: none;
}
.clear {
    padding: 0 !important;
    margin: 0 !important;
}
ul li button img {
    width: 20px;
    height: 20px;
}
ul li button span {
    /* width: 86px; */
    /* text ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-tabs {
    border-bottom: none !important;
}
.mt-48 {
    margin-top: 48px;
}
.card-block {
    padding: 0px 16px;
}
a.nav-link.text-white:hover {
    text-decoration: underline !important;
    color: #40a9ff !important;
    cursor: pointer;
}
.quick-links i {
    font-size: 14px;
    margin-right: 12px;
    display: inline !important; /* saba remove once links are fixed- it was none before */
}
.searchmargin {
    /* margin-bottom: 24px; */
}
/* filter: saturate(0); */

.category_sub.active img {
    filter: saturate(1);
}
.category_sub img {
    filter: saturate(0);
}
.background-img {
    height: 300px;
    background-image: url('https://vetrisuriyan.info/codewetrust/wp-content/uploads/2024/09/background-images-scaled.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#navbarSupportedContent ul li.nav-item {
    margin-left: 12px;
    margin-right: 12px;
}
#navbarSupportedContent ul li.nav-item a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.navbar.navbar-expand-lg {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
}
.btn-lightblue {
    margin-left: 32px;
}
i.fa:hover,
.fa-brands:hover {
    color: #2aa2ee !important;
}

.filter-items {
    top: 44px;
}
.set-filter-border {
    border: 1px solid #2aa2ee !important;
}
.filter-items.position-absolute div a {
    padding: 0;
    margin-bottom: 5px;
    font-size: 14px;
}
.filter-items {
    border: none !important;
    padding: 12px;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 4px 12px 0 #2aa2ee59;
}
.filter-items div a {
    color: #555555;
}
.blog-main-cat-tab {
    margin-top: 60px;
}
.first-menu h5,
.second-menu h5 {
    color: #000 !important;
}
.first-menu a {
    color: #5e5e5e !important;
}
.footer-img {
    /* filter: saturate(0); */
}

.blog-heading {
    margin-top: 60px;
    line-height: 120%;
    font-size: 56px;
}

.vi-post-heading {
    min-height: 77px;
}
.vi-post-heading h3 {
    min-height: 56px;
}
.category_tab img {
    width: auto !important;
    height: 130px;
    border-radius: 5px;
    max-width: 100%;
}

.border-bottom {
    border-bottom: 1px solid #bfbfbf45 !important;
}

/* Main single blog content */
.blog_single_cont {
    line-height: 32px;
    color: #333333;
    text-align: justify;
    padding: 0 80px;
}

/* Blog main tab container */
.blog-main-cat-tab {
    padding: 0 12px;
}

.blog-banner img {
    border-radius: 24px;
}

.text-italic {
    color: #999999;
    font-style: italic;
    font-size: 14px;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: 0.5rem;
    color: #6c757d;
    content: "";
    font-family: 'FontAwesome';
    font-size: 10px;
    line-height: 20px;
}
li.breadcrumb-item a {
    font-size: 14px !important;
    color: #333333 !important;
    text-decoration: none;
}

.blog-img {
    border: 2px solid #0d6efd52;
    min-height: 150px;
    padding: 10px 0;
    border-radius: 6px;
}

.singlephp img {
    width: auto !important;
    height: auto !important;
}

@media (min-width: 960px) {
    .bg-menu-blue {
        min-width: 1170px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .bg-menu-blue .container {
        margin: 0;
        min-width: 1170px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .bg-menu-blue .container-fluid {
        margin: 0;
        padding: 0;
    }
}

@media (max-width: 767px) {
    .blog-heading {
        font-size: 36px;
        line-height: 40px;
        margin-top: 40px;
        text-align: center;
    }
    .blog-main-cat-tab {
        margin-top: 40px;
    }
    .vi-nav-tabs button {
        width: max-content !important;
    }

    .mt-48 {
        margin-top: 24px;
    }
}

/* ---------- NEW: Center entire single blog page & reduce width ---------- */

/* Center the main container on single post pages */
.singlephp .container,
.singlephp .container-fluid {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Center the main blog content column */
.singlephp .blog_single_cont {
    max-width: 800px;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 24px;
    text-align: justify; /* keep body text readable */
}

/* Keep banner centered */
.singlephp .blog-banner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Ensure headings/images inside single posts don’t stretch oddly */
.singlephp img,
.singlephp p,
.singlephp h1,
.singlephp h2,
.singlephp h3 {
    max-width: 100%;
}