/* Custom CSS to replicate Bootstrap grid system */

/* Grid Container */

.card-button {
    color: #FFFFFF !important;
    background-color: #121212 !important;
    font-size: 16px !important;
    line-height: 24px;
    font-family: 'Outfit';
    font-weight: 300;
    padding: 6px 10px;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effect */
}

.card-button:hover {
    background-color: #72d2d2 !important; /* Hover background color */
    color: #000000 !important; /* Hover text color */
}
.card-button a {
    color: #FFFFFF ;
}
.btn.btn-primary.c-link img{
  margin-left: 8px;
    width: 14px;
    height: 14px;
}
a.btn.btn-primary.c-link{
    justify-content:center !important;
    display:inline-flex;
    align-items:center;
}

.trim_text{
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limits the text to 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.container {
    max-width: 1500px !important;
    margin: 0 auto;
    /*padding: 15px;*/
}

/*.blog .row > [class*='col-']:first-child {*/
/*    padding-left: 0;*/
/*}*/

/*.blog .row > [class*='col-']:last-child {*/
/*    padding-right: 0;*/
/*}*/
/*.blog > .row > *:first-child {*/
/*    padding-left: 0 !important;*/
/*}*/

/*.blog > .row > *:last-child {*/
/*    padding-right: 0 !important;*/
/*}*/

/* Row */
.blog>.row {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}
.blog .container {
    padding-left: 0px;
    padding-right: 0px;
}
.blog-container {
    max-width:1500px;
    padding: 70px 0px;
    margin:0 auto;
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .blog-container {
        padding: 50px 40px !important;
    }
    .card-text{
        font-size:16px;
        line-height:24px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .blog-container {
        padding: 40px 30px !important;
    }
    .card-text{
        font-size:14px;
        line-height:21px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .blog-container {
        padding: 40px 30px !important;
    }
     .card-text{
        font-size:14px;
        line-height:21px;
    }
}
@media (min-width: 481px) and (max-width: 767px) {
    .blog-container {
        padding: 30px 20px !important;
    }
     .card-text{
        font-size:14px !important;
        line-height:21px !important;
    }
    .card-body p {
        margin-bottom: 8px !important;
    }
}
@media (min-width: 200px) and (max-width: 480px) {
    .blog-container {
        padding: 30px 20px !important;
    }
     .card-text{
        font-size:14px !important;
        line-height:21px !important;
    }
    .card-body p {
        margin-bottom: 8px !important;
    }
    a.btn.btn-primary.c-link{
        font-size: 16px !important;
        line-height: 22px !important;
    }
    .btn.btn-primary.c-link img {
        margin-left: 8px;
        width: 12px;
        height: 12px;
    }
}
/*.row > [class*='col-'] {*/
/*    padding: 15px;*/
/*}*/

/* Column Classes */
.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
.col-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
.col-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
.col-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
.col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* Responsive Breakpoints */
@media (min-width: 576px) {
    .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .col-sm-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
    .col-sm-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .col-sm-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
    .col-sm-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .col-sm-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
    .col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
    
}


@media (min-width: 768px) {
    .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .col-md-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .col-md-3 { flex: 0 0 25%; max-width: 25%; }
    .col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .col-md-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .col-md-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .col-md-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .col-md-9 { flex: 0 0 75%; max-width: 75%; }
    .col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 992px) {
    .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .col-lg-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
    .col-lg-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .col-lg-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
    .col-lg-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .col-lg-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
    .col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

@media (min-width: 1200px) {
    .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; }
    .col-xl-2 { flex: 0 0 16.66667%; max-width: 16.66667%; }
    .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
    .col-xl-4 { flex: 0 0 33.33333%; max-width: 33.33333%; }
    .col-xl-5 { flex: 0 0 41.66667%; max-width: 41.66667%; }
    .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
    .col-xl-7 { flex: 0 0 58.33333%; max-width: 58.33333%; }
    .col-xl-8 { flex: 0 0 66.66667%; max-width: 66.66667%; }
    .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
    .col-xl-10 { flex: 0 0 83.33333%; max-width: 83.33333%; }
    .col-xl-11 { flex: 0 0 91.66667%; max-width: 91.66667%; }
    .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}
@media only screen and (max-width: 576px) and (min-width: 100px){
    /*.card-title{font-size: 20px !important;line-height: 25px !important;}*/
    span.text-muted1.cus-blog{margin-left: 0px!important;}
    button.card-button {margin-right: 12px!important;}
    .card-title a{font-size:20px !important;line-height:27px !important;}
    .cus-mb{margin-bottom:20px !important;}
}
/* Card Component */
.cuscard {
    border: 0px !important;
    box-shadow:none;
}
.cus-mb{
    margin-bottom:35px !important;
}
.card {
    border: 0px solid #ddd !important;
    /*border-radius: 0.25rem;*/
    background-color: #fff;
    box-shadow: none !important;
    transition: all 0.3s ease;
}
.card:hover {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
}
/*.col-md-4.mb-3.cus-mb {*/
/*    margin-bottom: 35px !important;*/
/*}*/
.card-img-top {
    width: 100%;
    height: auto;
    border-bottom: 1px solid #ddd;
}

.card-text {
    margin-bottom: 8px;
    font-size: 18px;
    color: #212529;
    font-family:'Outfit';
    line-height:27px;
}
/*.pd-0-r{*/
/*    padding: 0px 13px 0px 0px !important;*/
/*}*/
/*.pd-0-l{*/
/*    padding: 0px 0px 0px 13px !important;*/
/*}*/
.text-muted.cus-text {
    color: #121212 !important;
}

span.text-muted1.cus-blog {
    color: #121212 !important;
    font-size: 16px !important;
    font-family: 'Outfit';
    line-height: 24px;
    font-weight: 300;
    margin-left:10px !important;
}

/*.text-muted.cus-blog{*/
/*    color: red !important;*/
/*    font-size: 16px !important;*/
/*    font-family: 'Outfit';*/
/*    line-height: 24px;*/
/*    font-weight: 400;*/
/*}*/
.text-muted.cus-text a{
    color: #121212 !important;
}
.text-muted {
    color: #111111 !important;
    font-size: 18px;
    font-family: 'Outfit';
    line-height: 24px;
    font-weight: 400;
}
.recent-post-title a{
    color: #111111 !important;
    margin: 15px 0px 8px 0px !important;
    display: block;
    font-weight: 500  !important;
    font-family: 'Outfit';
}
/* Button */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
}

.card-title{
    margin-bottom: 6px !important;
    margin-top: 12px !important;
}

.card-title a {
    font-size: 26px;
    font-weight: 500;
    line-height: 39px;
    font-family: 'Outfit';
    margin-bottom: 6px !important;
    margin-top: 12px !important;
}
.c-link {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
}
.comments-section textarea{
            border: 1px solid !important;
    border-radius: 5px !important;
}

.c-link:hover {
   color:#000 !important;
}

.pagination {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
    margin: 20px 0px 0px 0px;
}


.pagination a, .pagination span {
    color: #121212; /* Link color */
    padding: 8px 16px;
    margin: 0 5px;
    text-decoration: none;
    border: 1px solid #121212;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    font-family:'Outfit' ;
}
.pagination a:hover{
    background-color: #121212;
    color: #121212;
    border-color: #121212;
}

.pagination span.current {
    background-color: #121212;
    color: #fff;
    border-color: #121212;
}

.pagination .disabled {
    color: #ccc;
    pointer-events: none;
    border-color: #ddd;
}

a.page-numbers {
    padding: 6px 18px !important;;
    margin: 0 5px !important;;
    background: #f8f8f8 !important;;
    height: 100% !important;;
    border-radius: 2px !important;;
}