/* Blog css */


.blog-searchbar { max-width: 380px; margin-left: auto; margin-top: 40px; position: relative; width: 100%; }
#blog-search input[type="search"] { border-color: var(--color-shade5); background: #fff; padding: 20px 20px 20px 52px; border-radius: 10px; transition: var(--primary_transition); }
#blog-search input[type=search]:focus {border-color: var(--gold_color); color: var(--body_color); }
#blog-search input[type=search]:focus:placeholder{ color: var(--body_color); }
#blog-search button { background: transparent; border: none; width: 22px; height: 22px; position: absolute; top: 19px; left: 20px; cursor: pointer; padding: 0; }
#blog-search input[type=search]:focus + button { filter: brightness(0) saturate(100%) invert(12%) sepia(1%) saturate(4767%) hue-rotate(28deg) brightness(97%) contrast(92%); }


.blog-listing .months-filter { margin-top: 60px; }
.blog-listing .months-filter .swiper-slide { width: auto; }
.months-filter .item { padding: 20px; font-size: 18px; line-height: 1.5; border-bottom: 1px solid var(--color-shade3); transition: var(--primary_transition); cursor: pointer; position:relative; display: inline-block; text-align: center; display:none; }
.months-filter .item::before { display: block; content: attr(title); font-weight: bold; height: 0; overflow: hidden; visibility: hidden; }
.months-filter .item:after { position: absolute; content: ''; bottom: 0; left: 0; width: 100%; height: 2px; background: transparent; transition: var(--primary_transition); }
.months-filter .item:hover{ color: var(--gold_color); }
.months-filter .swiper-slide + .swiper-slide .item { min-width: 132px; }
.months-filter .item.acitve { border-bottom: 1px solid var(--color-shade3); }
.months-filter .item.active:after { background: var(--gold_color); }
.months-filter .item.active { color: var(--gold_color); font-weight: 700; }

.blog-listing .pro-recent-post-list { position: relative; }
.blog-listing .pro-recent-post-list a.card-link { position: absolute; content: ''; inset: 0; }

.blog-cards-wrapper { margin: 30px -15px 0; row-gap: 40px; }
.blog-card { width: 33.33%; padding: 0 15px; }
.blog-card .card-inner { border: 1px solid var(--color-shade5); border-radius: 20px; height: 100%; }
.blog-card .card-inner > a .image { border-radius: 20px 20px 0 0; overflow: hidden; line-height: 0; height: 250px; }
.blog-card .card-inner > a .image img { transition: var(--primary_transition); width: 100%; height: 100%; object-fit: cover; object-position: center; }
.blog-card .card-inner > a:hover .image img { transform: scale(1.1); }

.blog-card  .card-body { padding: 40px 30px; height: calc(100% - 250px); display: flex; flex-direction: column; align-items: flex-start; }
.blog-card .tags-row { gap: 10px; margin-top: -56px; position: relative; }
.blog-card .tags-row .tag { padding: 6px 10px; border-radius: 5px; line-height: 1.3; background: var(--blue_color); }

.blog-card h5 { margin-top: 24px; font-family: var(--body_font); transition: var(--primary_transition); }
.blog-card .card-inner > a:hover h5 { color: var(--gold_color); }

.blog-card .link-text { transition: var(--primary_transition); color: var(--heading_color); margin-top: auto; font-size: 18px; font-style: normal; font-weight: 600; line-height: normal; padding: 0 25px 0 0; position: relative; text-transform: none; display: inline-block; }
.blog-card .link-text:after { transition: var(--primary_transition); background-repeat: no-repeat; background-size: contain; content: ""; height: 10px; position: absolute; right: 0; top: 7px; transition: var(--primary_transition); width: 16px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='13' fill='none' viewBox='0 0 18 13'%3E%3Cpath stroke='%23262626' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M16 6.5H1M12 1.5l4.293 4.293c.333.333.5.5.5.707s-.167.374-.5.707L12 11.5'/%3E%3C/svg%3E"); }
.blog-card .card-inner > a:hover .link-text { color: var(--gold_color); }
.blog-card .card-inner > a:hover .link-text:after { filter: brightness(0) saturate(100%) invert(95%) sepia(6%) saturate(5041%) hue-rotate(322deg) brightness(71%) contrast(95%); }


.pagination { margin-top: 40px; gap: 6px; }
.pagination .dots{ width: 45px; height: 45px; display: inline-flex; justify-content: center; align-items: center; }
.pagination .btn{ cursor: pointer; }
.pagination .btn img { transition: var(--primary_transition); }
.pagination .btn:hover img { filter: brightness(0) invert(1); }
.pagination .btn.disabled { display: none; }
.pagination .btn.active{ background: var(--gold_color); border-color: var(--gold_color); color: #fff; }

.pagination .btn, .pagination .page-num { transition: var(--primary_transition); width: 45px; height: 45px; display: inline-flex; justify-content: center; align-items: center; border-radius: 8px; background: #fff; border: 1px solid var(--color-shade5); font-weight: 600; }
.pagination .btn:hover, .pagination .page-num:hover { background: var(--gold_color); border-color: var(--gold_color); color: #fff; }


.blog-post-banner { padding-top: 40px; }
.blog-post-banner .full-inner { padding: 80px 0; background: var(--color-shade5); }
.blog-post-banner .inner { gap: 32px; }
.blog-post-banner .left { max-width: 663px; width: 100%; }
.blog-post-banner h1 { margin-top: 20px; font-family: var(--body_font); font-size: 40px; line-height: 55px; color: var(--body_color); }
.blog-post-banner .tags-row { gap: 6px; }
.blog-post-banner .tags-row .tag { padding: 6px 10px; border-radius: 5px; background: var(--blue_color); font-size: 16px; line-height: 1.25; }
.blog-post-banner .bottom-content { margin-top: 22px; gap: 20px; }
.blog-post-banner .bottom-content .meta { display: flex; align-items: center; gap: 6px; color:var(--color-shade2); }
.blog-post-banner .bottom-content .meta + .meta { position: relative; }
.blog-post-banner .bottom-content .meta + .meta:before { position: absolute; content: ''; top: 5px; left: -9px; width: 1px; height: 20px; background: var(--color-shade3); }

.blog-post-banner .right { max-width: 694px; width: 100%; border-radius: 20px; overflow: hidden; line-height: 0; flex-shrink: 0; }
.blog-post-banner .right img { width: 100%; height: 100%; object-fit: cover; object-position: center; aspect-ratio: 694 / 463; }

.blog-post-content { padding-top: 100px; }
.blog-post-content .inner{ gap: 30px; }
.blog-post-content .left { max-width: 984px; width: 100%; }
.blog-post-content .left .content { color: var(--color-shade1); }
.blog-post-content .left .content a { color: var(--blue_color); }
.blog-post-content .left .content a:hover { color: var(--body_color); }
.blog-post-content .right { max-width: 386px; width: 100%; }

.blog-post-content .blog-share { border-radius: 20px; background: var(--color-shade5); padding: 20px; flex-shrink: 0; }
.blog-post-content .blog-share .share-icons { margin-top: 20px; gap: 6px; }
.blog-post-content .blog-share .share-icons > div a { width: 60px; height: 60px; background: #fff; line-height: 0; border-radius: 50%; border: 1px solid var(--color-shade4); display: flex; justify-content:center; align-items: center; transition: var(--primary_transition); }
.blog-post-content .blog-share .share-icons > div a:hover { background: var(--gold_color); border-color: var(--gold_color); }
.blog-post-content .blog-share .share-icons > div a svg path{ transition: var(--primary_transition); }
.blog-post-content .blog-share .share-icons > div a:hover svg path{ fill: #fff; }

.zig-zag { padding-top: 60px; }
.zig-zag .row { gap: 60px; }
.zig-zag .row + .row { margin-top: 30px; } 
.zig-zag .left-part { max-width: 564px; width: 100%; }
.zig-zag .right-part { max-width: 360px; width: 100%; flex-shrink: 0; padding: 35px; border: 1px solid var(--color-shade4); border-radius: 10px; }
.zig-zag  h3 { font-family: var(--body_font); }
.zig-zag .content { margin-top: 20px; color: var(--color-shade1); }
.zig-zag .content strong { color: var(--body_color); }
.zig-zag .row.reverse { flex-direction: row-reverse; }

.appointment-form { background: var(--blue_color); border-radius: 20px; padding: 30px; margin-top: 30px; }
.appointment-form .icon { line-height: 0; max-width: 51px; }
.appointment-form .content { margin-top: 24px; }
.appointment-form .default-form { margin-top: 30px; }
#appointment form .hs-form-field > label { display: none; }
#appointment form .hs-form-field input { background: rgb(from #fff r g b / 20%); border-color: transparent; border-radius: 40px; color: #fff; padding: 16px 20px; }
#appointment form .hs-form-field input::placeholder { color: #fff; }
#appointment form .hs_submit { padding-top: 0; }
#appointment form .hs_submit input[type=submit] { padding: 14.5px; background: var(--blue_color); border-color: #fff; }
#appointment form .hs_submit input[type=submit]:hover { background: var(--gold_color); }

.author-box { padding: 100px 0 50px; }
.author-box .inner { border-radius: 20px; padding: 24px; background: var(--color-shade5); gap: 26px; }
.author-box .avtar { flex-shrink: 0; width: 82px; height: 82px; border-radius: 50%; }
.author-box .name { font-weight: 600; }
.author-box .content { margin-top: 24px; color: var(--color-shade1); }
.author-box .author-social { margin-top: 24px; gap: 6px; }
.author-box .author-social a { width: 45px; height: 45px; display: flex; justify-content: center; align-items: center; background: #ffff; border-radius: 50%; transition: var(--primary_transition); }
.author-box .author-social a:hover { background: var(--gold_color); border-color: var(--gold_color); }
.author-box .author-social a svg { width: auto; height: 18px; }
.author-box .author-social .item:last-child a svg { height: 24px; }
.author-box .author-social a svg path { transition: var(--primary_transition); }
.author-box .author-social a:hover svg path{ fill: #fff; }

@media(max-width: 1459px){
    .blog-post-banner .right { max-width: 560px; }
    .zig-zag .row { gap: 30px; }
    .zig-zag .right-part { max-width: 300px; }
}
@media(max-width: 1199px){
    .blog-card { width: 50%; }

    .blog-post-banner .right { max-width: 400px; }
    .zig-zag .row { flex-direction: column-reverse; align-items: flex-start; }
    .zig-zag .row.reverse { flex-direction: column-reverse; }
}
@media(max-width: 991px){
    .months-filter .swiper-slide+.swiper-slide .item { min-width: 100px; }
    .blog-card .tags-row { margin-top: -36px; }
    .blog-card .card-body { padding: 20px; height: calc(100% - 190px); }
    .blog-card .card-inner > a .image { height: 190px; }
    .blog-card .tags-row .tag { font-size: 12px; }   

    .blog-post-banner { padding: 0; }
    .blog-post-banner .full-inner { padding: 50px 0; }
    .blog-post-banner .inner { flex-direction: column; }
    .blog-post-banner h1 { font-size: 32px; line-height: 1.3; }
    .blog-post-banner .right { max-width: 100%; }

    .blog-post-banner .left { max-width: 100%; }
    .blog-post-content { padding-top: 50px; }
    .blog-post-content .inner { flex-direction: column; }
    .blog-post-content .left { max-width: 100%; }
    .zig-zag .right-part { max-width: 200px; padding: 20px; }
    .zig-zag .row { flex-direction: row; }
    .zig-zag .row.reverse { flex-direction: row-reverse; }
    .zig-zag .row + .row { margin-top: 50px; }
    .zig-zag h3 { font-size: 24px; }
    .blog-post-content .left .content { font-size: 16px; }
    .blog-post-content .right { max-width: 100%; }
    .author-box { padding: 50px 0 25px; }


}
@media(max-width: 767px){
    .blog-listing .months-filter { margin-top: 0; }
    .blog-searchbar { margin: 40px auto 0; max-width: 425px; }
    .blog-cards-wrapper { max-width: 425px; margin: 30px auto 0; row-gap: 24px; }
    .blog-card { padding: 0; width: 100%; }

    .blog-post-banner .bottom-content .meta { font-size: 14px; }
    .zig-zag .row { flex-direction: column-reverse; }
    .zig-zag .row.reverse { flex-direction: column-reverse; }
    .author-box .inner { flex-direction: column; }
    .blog-post-content .blog-share .share-icons > div a { width: 50px; height: 50px; }

}
/* Blog css end */}