﻿
:root {
    --brand-color-2: #4a90e2;
    --secondary-color-2: #0A4FD5;
}
.blog__meta-tag, .trk-btn, .footer__linklist-item a, .account__switch a, .account__social-btn span, .header-bar span {
    display: inline-block;
}

.blog-details__meta ul li, .service__item-thumb, .trk-btn--outline5, .trk-btn--outline3, .trk-btn--outline22, .trk-btn--outline2, .trk-btn--left span, .trk-btn--left, .trk-btn--arrowplay, .trk-btn--defult, .footer__end-copyright, .playbtn {
    display: inline-flex;
}

/*=========<<Display property extends end>>=========*/
/*=========<<Position property extends start>>=========*/
.about__thumb--style3, .about__thumb--style2, .about__thumb-image img, .about__thumb-image, .about, .roadmap--style2 .roadmap__item-inner, .roadmap--style2 .roadmap__item, .roadmap--style2 .roadmap__upper-inner, .roadmap--style1 .roadmap__item-inner, .roadmap--style1 .roadmap__wrapper, .roadmap, .counter, .service-details__team, .faq, .sidebar__search form, .sidebar__head, .story__thumb-inner, .story__wrapper, .story, .cta--style2, .cta__thumb, .cta__newsletter-inner, .cta__wrapper, .testimonial__wrapper, .blog-details, .blog__wrapper, .blog, .team__item-thumb, .team__item-inner, .pricing__item-top, .pricing__item, .pricing, .service__item-inner, .service, .feature--style1 .feature__wrapper, .feature--style1 .feature, .feature, .partner--style2, .partner--gradient, .partner__wrapper, .social__link--style3, .text-btn, .trk-btn, .footer__linklist-item a, .footer__app-inner, .footer__wrapper, .footer, .account__divider--style1, .account__wrapper, .account, .contact__wrapper, .contact, .banner--style5 .banner__content, .banner--style5 .banner, .banner--style5, .banner--style4, .banner--style3 .banner, .banner--style3, .banner--style2 .banner__content, .banner--style2, .banner--style1, .page-header, .section-header, .home-showcase__image, .menu-item-has-children > a, .header-bar, .header-section, .paginations ul li:not(:first-child, :last-child) a, .paginations ul li a, .form-pass {
    position: relative;
}

    .about__shape--style2 .about__shape-item, .about__shape--style1 .about__shape-item, .about__thumb--style3::after, .about__thumb--style2::after, .roadmap--style2 .roadmap__upper-inner::after, .roadmap--style1 .roadmap__shape-item, .faq__shape-item--3, .faq__shape-item--2, .faq__shape-item--1, .faq__shape-item, .sidebar__search form button, .story__shape-item, .story__thumb-playbtn, .cta__shape-item, .blog__shape-item, .blog__bg-element img, .team__item-shape3, .team__item-shape2, .team__item-shape1, .team__item-content, .pricing__shape-item--6, .pricing__shape-item--5, .pricing__shape-item, .service__shape-item--2, .service__shape-item, .feature--style2 .feature__shape-item, .feature--style1 .feature__shape-item, .partner--style2:before, .partner--gradient::after, .partner--gradient:before, .floating-content__bottom-right, .floating-content__bottom-left, .floating-content__left-top, .floating-content__top-right, .floating-content__top-left, .text-btn--style2::after, .text-btn::after, .trk-btn:after, .footer__shape-item, .footer__linklist-item a::after, .account__shape-item, .account__divider--style1:before, .account__divider--style1 span, .contact__shape-item, .banner--style5::after, .banner--style3 .banner__bg, .banner--style3 .banner__bg-element span, .banner--style3 .banner__bg-element img, .banner--style2 .banner__wrapper--style2::after, .banner--style1 .banner__bg-element span, .banner--style1 .banner__bg-element img, .banner__shape-item, .page-header__shape-item, .home-showcase__badge, .home-showcase__image::after, .home-showcase__buttons, .menu-item-has-children > a::after, .header-bar span, .header-section--style5, .header-section--style4, .header-section--style3, .header-section--style2, .swiper-nav--style2 .swiper-nav__btn-next, .swiper-nav--style2 .swiper-nav__btn-prev, .form-pass__ctoggle, .form-pass__toggle {
        position: absolute;
    }


.blog-details__segment-item, .blog-details__content, .blog-details__thumb, .account__check {
    margin-block-end: 35px;
}

/*-------<< margin properties >>-------*/
.sidebar__comment, .blog-details__commentform, .banner--style4 .banner__content-btn {
    margin-block-start: 40px;
}

.counter__item-inner img, .sidebar__comment-item, .account__header, .contact__social h3, .banner__btn-group, .section-header {
    margin-block-end: 40px;
}

/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
.contact__social {
    margin-block-end: 60px;
}

/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
.banner--style5 .banner__testimonial-inner {
    margin-block-start: 70px;
}

/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*-------<< margin properties >>-------*/
/*------<< Paddings >>---------*/


.paginations ul li {
    padding-inline: 5px;
}


.cta-form .form-control--style3, .cta-form .form-control--style2, .cta-form .form-control--style1 {
    padding-block: 10px;
}

.footer__app-inner {
    padding-inline: 10px;
}

.comment__body-inner, .sidebar__search form input, .team__item-author--style2 .team__item-authorinfo, .contact__item-thumb span {
    padding: 15px;
}

.sidebar__head h6, .sidebar__head h3 {
    padding-block-end: 15px;
}

.blog__meta, .floating-content__item, .header-wrapper, .cta-form .cta-btn {
    padding-block: 15px;
}

.service__item-inner {
    padding-inline: 15px;
}

.error__inner, .account__content--style1 {
    padding: 20px;
}

.accordion--style3 .accordion__button, .accordion--style1 .accordion__button, .service-details__faq {
    padding-block: 20px;
}

.accordion--style3 .accordion__body, .accordion--style3 .accordion__button, .counter__item-inner, .service-details__faq, .team__item-author--style2 .team__item-authorsocial, .floating-content__item, .cta-form .form-control--style3, .cta-form .form-control--style2, .cta-form .form-control--style1 {
    padding-inline: 20px;
}



.sidebar__comment-body, .sidebar__tags-body, .sidebar__categorie-body, .sidebar__recentpost-body, .blog__item-inner {
    padding-block-start: 25px;
}

.accordion--style2 .accordion__body, .testimonial__item--style3 .testimonial__item-content p, .blog-details__meta, .team__item-author--style2 .team__item-authorsocial {
    padding-block-end: 25px;
}

.blog-details__action-inner, .footer__end {
    padding-block: 25px;
}

.accordion--style2 .accordion__body, .blog__item-inner, .pricing__item-inner, .cta-form .cta-btn {
    padding-inline: 25px;
}

.service-details__item-inner, .sidebar__comment, .testimonial__item--style3 .testimonial__item-inner, .blog-details__commentform, .blog-details__item-inner, .account__content--style2, .banner--style5 .banner__thumb2-inner {
    padding: 30px;
}

.testimonial__item-content p, .blog__item-inner {
    padding-block-end: 30px;
}

.pricing__item-inner, .partner {
    padding-block: 30px;
}

.cta__newsletter-inner {
    padding-inline: 30px;
}

.blog__item--style2, .account__divider--style1 {
    padding-block-end: 35px;
}

.service__item-inner {
    padding-block: 35px;
}

.testimonial__item--style4 .testimonial__item-inner, .testimonial__item--style1 .testimonial__item-inner {
    padding: 40px;
}

.testimonial__slider, .testimonial__slider2 {
    padding-block-end: 40px;
}

.counter__item-inner, .pricing__item-middle {
    padding-block: 40px;
}

.cta__newsletter-inner {
    padding-block: 45px;
}

.partner--style2 {
    padding-block: 50px;
}

/*=========<<Margin property extends end>>=========*/
/*=========<<overflow property extends start>>=========*/
.about, .roadmap--style1 .roadmap__wrapper, .roadmap, .accordion__item, .service-details, .sidebar__categorie-body ul li span,
.sidebar__categorie-body ul li a, .sidebar__recentpost-thumb, .sidebar, .story, .cta, .testimonial, .blog-details__thumb, .blog-details, .blog__thumb, .blog__item-inner, .blog, .team--details .team__thumb, .team__item-thumb, .team__item-inner, .pricing, .service, .feature--style1 .feature, .feature, .lightdark-switch .switch-btn, .preloader, .trk-btn, .footer, .account, .contact, .banner--style5, .banner--style4, .banner--style3, .banner--style2, .banner--style1, .page-header, .home-showcase__image, .blog__content h5, .feature--style2 .feature__item-content h5, .sidebar__recentpost-content p a, .blog__content p {
    overflow: hidden;
}

.about, .roadmap--style1 .roadmap__wrapper, .roadmap, .accordion__item, .service-details, .sidebar__categorie-body ul li span,
.sidebar__categorie-body ul li a, .sidebar__recentpost-thumb, .sidebar, .story, .cta, .testimonial, .blog-details__thumb, .blog-details, .blog__thumb, .blog__item-inner, .blog, .team--details .team__thumb, .team__item-thumb, .team__item-inner, .pricing, .service, .feature--style1 .feature, .feature, .lightdark-switch .switch-btn, .preloader, .trk-btn, .footer, .account, .contact, .banner--style5, .banner--style4, .banner--style3, .banner--style2, .banner--style1, .page-header, .home-showcase__image, .blog__content h5, .feature--style2 .feature__item-content h5, .sidebar__recentpost-content p a, .blog__content p {
    overflow: hidden;
}

/*=========<<overflow property extends end>>=========*/
/*=========<<Cursor property extends start>>=========*/
.header-bar {
    cursor: pointer;
}

    /*=========<<Cursor property extends end>>=========*/
    /*=========<< Height-Width property extends start>>=========*/
    .accordion__button, .sidebar__recentpost-thumb img, .blog-details__thumb img, .blog__thumb img, .blog__bg-element img, .team--details .team__thumb img, .team__item-thumb img, input,
    textarea, .account__social-btn, .banner--style3 .banner__bg-element span, .banner--style3 .banner__bg-element img, .banner--style1 .banner__bg-element span, .banner--style1 .banner__bg-element img, .header-bar span, .header-section.header-fixed {
        width: 100%;
    }

/*=========<< Height-Width property extends end>>=========*/
/*=========<< List Style property extends start>>=========*/
.social, ul,
ol {
    list-style: none;
}

/*=========<< List Style property extends end>>=========*/
/* @@@@@@@@@@@@@  Extend Property CSS Writing Now  @@@@@@@@@@@@@@ */
.sidebar__recentpost-content p a, .blog__content p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis
}

.truncate-title {
    display: -webkit-box;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis !important;
    max-width: 120px !important;
}

.blog__content h5, .feature--style2 .feature__item-content h5 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}



.paginations {
    background-color: var(--wh-color);
    box-shadow: 0px -16px 48px rgba(6, 35, 63, 0.03), 0px 16px 48px rgba(6, 35, 63, 0.03);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 450px;
    margin: 0 auto;
    margin-top: 40px;
}

    .paginations ul li a {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        font-size: 1rem;
        width: 70px;
        height: 36px;
        color: var(--text-color);
        opacity: 0.5;
        
    }
.blog__wrapper a {
    text-decoration: none;
    color: var(--text-color);
}
.paginations ul li a.active, .paginations ul li a:hover {
    opacity: 1;
    color: var(--brand-color-2);
}

    .paginations ul li a.active i,
    .paginations ul li a.active svg, .paginations ul li a:hover i,
    .paginations ul li a:hover svg {
        color: var(--brand-color-2);
    }

    .paginations ul li:not(:first-child, :last-child) a {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        width: 36px;
        height: 36px;
        background: var(--wh-color);
        color: var(--title-color);
        z-index: 1;
        border-radius: 4px;
        opacity: 1;
    }

        .paginations ul li:not(:first-child, :last-child) a.active, .paginations ul li:not(:first-child, :last-child) a:hover {
            color: var(--brand-color-2);
            background-color: var(--pagination-bg-color);
        }

        .paginations ul li:not(:first-child, :last-child) a.dot {
            color: var(--brand-color-2);
            font-weight: 700;
        }

            .paginations ul li:not(:first-child, :last-child) a.dot:hover {
                color: var(--brand-color-2);
            }


.blog__wrapper {
    z-index: 2;
}
    .blog__wrapper a:hover {
        color: var(--brand-color-2);
    }
.blog__bg-element img {
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    opacity: 0.8;
}

.blog__item-inner {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    background-color: var(--wh-color);
    border: 2px solid transparent;
    box-shadow: 0px 16px 48px 0px rgba(6, 35, 63, 0.03), 0px -16px 48px 0px rgba(6, 35, 63, 0.03);
    border-radius: 16px;
}

    .blog__item-inner:hover {
        border: 2px solid var(--brand-color-2);
        box-shadow: none;
    }

        .blog__item-inner:hover .blog__thumb img {
            -webkit-transform: scale(1.05);
            -moz-transform: scale(1.05);
            -ms-transform: scale(1.05);
            -o-transform: scale(1.05);
            transform: scale(1.05);
        }

        .blog__item-inner:hover .blog__content h5 {
            color: var(--brand-color-2);
        }

.blog__item-inner--style2 {
    border: none;
}

    .blog__item-inner--style2:hover {
        border: none;
        box-shadow: 0px 8px 16px rgba(3, 23, 41, 0.08);
    }

        .blog__item-inner--style2:hover .blog__thumb img {
            -webkit-transform: scale(1.05);
            -moz-transform: scale(1.05);
            -ms-transform: scale(1.05);
            -o-transform: scale(1.05);
            transform: scale(1.05);
        }

        .blog__item-inner--style2:hover .blog__content h5 {
            color: var(--secondary-color-2);
        }

.blog__item--style3 .blog__item-inner {
    border-radius: 8px;
    box-shadow: none;
}

    .blog__item--style3 .blog__item-inner:hover {
        border: 2px solid var(--tertiary-color4);
    }

        .blog__item--style3 .blog__item-inner:hover .blog__content h5 a {
            color: var(--tertiary-color4);
        }

.blog__item--style3 .blog__thumb {
    border-radius: 4px;
}

.blog__thumb {
    border-radius: 8px;
}

    .blog__thumb img {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

.blog__content h5 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

    .blog__content h5.style2:hover a {
        color: var(--secondary-color-2);
    }

.blog__writer {
    gap: 10px;
}

.blog__writer-thumb img {
    border-radius: 99px;
    max-width: 50px;
}

.blog__writer-designation h6 {
    font-size: 1rem;
    font-family: "Open Sans", sans-serif;
    color: var(--title-color);
}

.blog__writer-designation p {
    font-size: 1.125rem;
    color: var(--title-color);
    margin-bottom: -3px;
}

.blog__writer-designation span {
    font-size: 0.875rem;
    /*color: var(--text-color);*/
}

@media (min-width: 1200px) {
    .blog__meta {
        padding-block: 16px;
    }
}

.blog__meta-tag {
    font-size: 0.875rem;
    padding: 3px 12px;
    border-radius: 8px;
    text-transform: capitalize;
}

.blog__meta-tag--style1 {
    color: #00D094;
    background-color: #ffffff0a;
}

.blog__meta-tag--style2 {
    color: var(--brand-color-2);
    background-color: var(--tertiary-color);
}

.blog__shape-item--1 {
    content: "";
    border: 2px solid var(--bg-shape-color);
    padding: 40px;
    border-radius: 100px 100px 229px 100px;
    transform: rotate(65deg);
    border-top: transparent;
    display: none;
}
.blog__item {
    background-color: var(--secondary-bg);
    border-radius: 8px;
}
@media (min-width: 768px) {
    .blog__shape-item--1 {
        display: block;
        height: 80%;
        width: 1000px;
        top: -14%;
        left: -36%;
    }
}

@media (min-width: 992px) {
    .blog__shape-item--1 {
        top: -6%;
        left: -28%;
    }
}

@media (min-width: 1200px) {
    .blog__shape-item--1 {
        height: 95%;
        top: -17%;
        left: -10%;
    }
}

@media (min-width: 1400px) {
    .blog__shape-item--1 {
        top: -17%;
        left: 0%;
    }
}

.blog__shape-item--1 span {
    position: absolute;
    content: "";
    height: 94%;
    width: 980px;
    border-radius: 100px 100px 236px 100px;
    background: linear-gradient(180deg, var(--bg-shape-color-trans) 0%, var(--bg-shape-color) 100%);
    opacity: 0.6;
}

@media (min-width: 768px) {
    .blog__shape-item--1 span {
        top: 3%;
        left: -1%;
    }
}

.blog-details__item-inner {
    background-color: var(--secondary-bg);
    box-shadow: 0px -16px 48px rgba(6, 35, 63, 0.03), 0px 16px 48px rgba(6, 35, 63, 0.03);
    border-radius: 4px;
}

@media (min-width: 768px) {
    .blog-details__item-inner {
        padding: 50px;
    }
}

.blog-details__thumb {
    border-radius: 16px;
}

    .blog-details__thumb img {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        object-fit: cover;
    }

    .blog-details__thumb:hover img {
        -webkit-transform: scale(1.01);
        -moz-transform: scale(1.01);
        -ms-transform: scale(1.01);
        -o-transform: scale(1.01);
        transform: scale(1.01);
    }

.blog-details__meta {
    color: var(--text-color-light);
}

@media (min-width: 576px) {
    .blog-details__meta ul {
        display: flex;
        flex-wrap: wrap;
        gap: 18px;
    }
}

@media (min-width: 768px) {
    .blog-details__meta ul {
        gap: 30px;
    }
}

.blog-details__meta ul li {
    gap: 10px;
    text-transform: capitalize;
}

@media (max-width: 767px) {
    .blog-details__meta ul li {
        margin-block: 5px;
    }
}

.blog-details__meta ul li a {
    color: var(--text-color-light);
}

.blog-details__meta ul li i,
.blog-details__meta ul li svg {
    margin-inline-end: 8px;
}

@media (max-width: 767px) {
    .blog-details__meta ul li i,
    .blog-details__meta ul li svg {
        margin-inline-end: 5px;
    }
}

.blog-details__content p {
    color: var(--text-color);
}

.blog-details__segment-thumb img {
    border-radius: 8px;
}

.blog-details__action-inner {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    gap: 20px;
}

@media (min-width: 992px) {
    .blog-details__action-inner {
        padding-block: 28px;
    }
}

.blog-details__commentform {
    background-color: var(--tertiary-color3);
    border-radius: 16px;
}

@media (min-width: 992px) {
    .blog-details__commentform {
        padding: 40px;
    }
}



    .sidebar__search form {
        background-color: var(--wh-color);
        border-radius: 8px;
    }

        .sidebar__search form input {
            /*background-color: var(--bg-color-6);*/
            border-color: var(--border-color);
            border-radius: 8px;
            cursor: text;
        }

            .sidebar__search form input:focus {
                box-shadow: none;
                border-color: var(--brand-color-2);
            }

        .sidebar__search form button {
            content: "";
            padding: 11px;
            top: 14%;
            right: 10px;
            line-height: 10px;
            border: none;
            outline: none;
            border-radius: 99px;
            background-color: var(--brand-color-2);
            color: var(--wh-color);
        }

            .sidebar__search form button i,
            .sidebar__search form button svg {
                font-size: 1.125rem;
            }


.paginations {
    background-color: var(--secondary-bg);
    box-shadow: 0px -16px 48px rgba(6, 35, 63, 0.03), 0px 16px 48px rgba(6, 35, 63, 0.03);
    border-radius: 8px;
    padding: 12px 16px;
    max-width: 450px;
    margin: 0 auto;
    margin-top: 40px;
}
.sidebar__head h6 {
    border-bottom: 5px solid var(--primary-bg);
}
.sidebar__categorie, .sidebar__recentpost, .sidebar__search {
    padding: 25px;
    background-color: var(--secondary-bg);
    box-shadow: 0px -16px 48px rgba(6, 35, 63, 0.03), 0px 16px 48px rgba(6, 35, 63, 0.03);
    border-radius: 6px;
}
.sidebar_ul_blog #blog-categories-list {
    border-radius: 5px;
    background-color: var(--light-blue);
    border-color: var(--border-color);
    padding: 10px
}

    .sidebar_ul_blog ul {
        padding-left: 0;
    }
        .sidebar_ul_blog ul li {
            justify-content: space-between;
            display: flex;
            flex-wrap: wrap;
            padding-bottom: 10px;
            padding-top: 10px;
        }
.sidebar__recentpost {
    box-shadow: 0px -16px 48px rgba(6, 35, 63, 0.03), 0px 16px 48px rgba(6, 35, 63, 0.03);
    border-radius: 4px;
}

.sidebar__recentpost-body ul li:last-child {
    margin-block-end: 0;
}

.sidebar__recentpost-inner {
    gap: 15px;
}

@media (min-width: 992px) {
    .sidebar__recentpost-inner {
        gap: 10px;
    }
}

@media (min-width: 1200px) {
    .sidebar__recentpost-inner {
        gap: 15px;
    }
}

.sidebar__recentpost-thumb {
    max-width: 100px;
    border-radius: 8px;
}

@media (min-width: 992px) {
    .sidebar__recentpost-thumb {
        max-width: 45px;
    }
}

@media (min-width: 1200px) {
    .sidebar__recentpost-thumb {
        max-width: 100px;
    }
}

.sidebar__recentpost-thumb img {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    object-fit: cover;
}

    .sidebar__recentpost-thumb img:hover {
        -webkit-transform: scale(1.09);
        -moz-transform: scale(1.09);
        -ms-transform: scale(1.09);
        -o-transform: scale(1.09);
        transform: scale(1.09);
    }

.sidebar__recentpost-content p {
    font-size: 1rem;
}

    .sidebar__recentpost-content p a {
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
    }

.sidebar__recentpost-content span {
    font-size: 0.875rem;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    color: #8c9ca7;
}

.sidebar__recentpost-content:hover p a {
    color: var(--brand-color-2);
}

.sidebar__recentpost-content:hover span {
    color: var(--brand-color-2);
}
.sidebar_ul_blog #recentPost {
    border-radius: 5px;
    background-color: var(--light-blue);
    border-color: var(--border-color);
    padding: 10px;
}
.sidebar__recentpost-item .sidebar__recentpost-inner {
    display: flex;
    flex-wrap: wrap;
}
.blog-details__segment-item img {
    max-width: 100%; /* Ảnh không vượt quá div cha */
    max-height: 100%; /* Ảnh không cao hơn div cha */
    width: auto; /* Không kéo to ảnh nhỏ */
    height: auto; /* Giữ nguyên tỷ lệ ảnh nhỏ */
    display: block; /* Tránh khoảng trắng dư thừa */
    object-fit: contain; /* Đảm bảo ảnh luôn hiển thị đầy đủ */
}
    