.post-blog {
    position: relative;
    border-radius: 0.82681rem;
    padding: 1rem !important;
    overflow: hidden;
    object-fit: cover;
}

.main-blog .hero-content {
    max-width: 850px;
}

.post-blog .post-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border-radius: 1rem;
}

.post-blog .post-category {
    font-size: 1rem;
    font-size: 1.25rem;
    font-weight: 500;
    color: #ffffff;
}
.post-blog .post-title {
    text-overflow: ellipsis;
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem; 
    color: #ffffff;
    margin: 8px 0 16px 0;
}
.post-blog .post-excerpt {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5rem;
    color: #ffffff;
}
.post-blog .post-read-more {
    display: inline-block;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-radius: 5rem;
    text-align: center ;
    text-decoration: none;
    font-size: 1rem;
    font-family: 'Montserrat', sans-serif;
}

@media (max-width: 767px) {
    .post-blog .post-meta {
        margin-top: 124px;
    }
}

/** comments style */
.ph-share{
    display: flex;
    gap: 24px;
}

.ph-btn-share{
    height: 72px;
    width: 88px;
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10);
    display: block;
    border: none;
    margin-top: 64px;
    margin-bottom: 64px;
}

.ph-btn-comments{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5833 32.01L11.4983 35.0217V29.5267C7.86667 27.045 5.5 23.1083 5.5 18.6367C5.5 11.0717 12.2467 5 20.5 5C28.7533 5 35.5 11.0717 35.5 18.6367C35.5 26.2017 28.7533 32.2733 20.5 32.2733C19.5017 32.2733 18.5283 32.18 17.5833 32.01V32.01Z" stroke="%230860DB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 40px 40px, #FFF;
}

.ph-btn-like{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.3475 9.95699L20.499 10.8185L19.6504 9.95686C18.1032 8.3851 15.99 7.5 13.7846 7.5C11.5791 7.5 9.46588 8.3851 7.91873 9.95686V9.95686C4.69245 13.2723 4.69245 18.5537 7.91873 21.8692L16.9065 30.9952C17.854 31.9578 19.1483 32.4999 20.4991 32.4999C21.8498 32.4999 23.1441 31.9578 24.0916 30.9952L33.0793 21.8693C36.3056 18.5539 36.3056 13.2724 33.0793 9.95701V9.95701C31.5322 8.3852 29.4189 7.50006 27.2134 7.50005C25.0079 7.50005 22.8946 8.38518 21.3475 9.95699Z" stroke="%230860DB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 40px 40px, #FFF;
}

.ph-btn-forward{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.9685 14.9165C10.8217 15.8359 4.66344 22.7247 4.65918 30.9232V31.9436C8.1998 27.6784 13.4259 25.1713 18.9685 25.0791V30.4597C18.9687 31.2404 19.4149 31.9523 20.1175 32.2928C20.82 32.6332 21.6553 32.5423 22.2682 32.0587L35.5904 21.5393C36.0634 21.1665 36.3394 20.5975 36.3394 19.9953C36.3394 19.3931 36.0634 18.8241 35.5904 18.4513L22.2682 7.93195C21.6553 7.44833 20.82 7.35741 20.1175 7.69786C19.4149 8.0383 18.9687 8.75025 18.9685 9.53095V14.9165Z" stroke="%230860DB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 40px 40px, #FFF;
}

.ph-btn-comments:hover,
.ph-btn-comments.active{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="41" height="40" viewBox="0 0 41 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M17.5833 32.01L11.4983 35.0217V29.5267C7.86667 27.045 5.5 23.1083 5.5 18.6367C5.5 11.0717 12.2467 5 20.5 5C28.7533 5 35.5 11.0717 35.5 18.6367C35.5 26.2017 28.7533 32.2733 20.5 32.2733C19.5017 32.2733 18.5283 32.18 17.5833 32.01Z" fill="%230860DB" stroke="%230860DB" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 40px 40px, #FFF;
}

.ph-btn-like:hover,
.ph-btn-like.active{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.8475 9.95699L19.999 10.8185L19.1504 9.95686C17.6032 8.3851 15.49 7.5 13.2846 7.5C11.0791 7.5 8.96588 8.3851 7.41873 9.95686V9.95686C4.19245 13.2723 4.19245 18.5537 7.41873 21.8692L16.4065 30.9952C17.354 31.9578 18.6483 32.4999 19.9991 32.4999C21.3498 32.4999 22.6441 31.9578 23.5916 30.9952L32.5793 21.8693C35.8056 18.5539 35.8056 13.2724 32.5793 9.95701V9.95701C31.0322 8.3852 28.9189 7.50006 26.7134 7.50005C24.5079 7.50005 22.3946 8.38518 20.8475 9.95699Z" fill="%230860DB"/></svg>') no-repeat center / 40px 40px, #FFF;
}

.ph-btn-forward:hover,
.ph-btn-forward.active{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M18.4685 14.9168C10.3217 15.8362 4.16344 22.725 4.15918 30.9234V31.9439C7.6998 27.6786 12.9259 25.1715 18.4685 25.0793V30.4599C18.4687 31.2406 18.9149 31.9526 19.6175 32.293C20.32 32.6334 21.1553 32.5425 21.7682 32.0589L35.0904 21.5395C35.5634 21.1668 35.8394 20.5978 35.8394 19.9956C35.8394 19.3933 35.5634 18.8243 35.0904 18.4516L21.7682 7.93219C21.1553 7.44857 20.32 7.35765 19.6175 7.6981C18.9149 8.03855 18.4687 8.7505 18.4685 9.53119V14.9168Z" fill="%230860DB"/></svg>') no-repeat center / 40px 40px, #FFF;
}

.comments-box{
    margin-bottom: 80px;
}

.comments-filter__label,
.comments-filter__select{
    color: var(--blue-01, #021E46);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
}

.comments-filter__select{
    border: none;
}

.comments-counter-label{
    color: var(--blue-01, #021E46);
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 120% */
}

.comments-box__header{
    margin-bottom: 72px;
}

.comment-form{
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 28px;
}

.comment-form .user-thumb{
    display: block;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="38" height="38" viewBox="0 0 38 38" fill="none"><path d="M31.5716 31.5715V30.3929C31.5716 26.7045 28.5815 23.7144 24.893 23.7144H13.1073C9.41881 23.7144 6.42871 26.7045 6.42871 30.3929V31.5715" stroke="white" stroke-width="2.35714" stroke-linecap="round" stroke-linejoin="round"/><circle cx="18.9996" cy="11.1429" r="6.28571" stroke="white" stroke-width="2.35714" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / 38px 38px, #0860DB;
}

.fields-wrapper{
    display: flex;
    flex-direction: column;
}

.fields-wrapper form{
    border-radius: 24px 96px 24px 24px;
    border: 1px solid var(--grey-03, #DFDFDF);
    overflow: hidden;
    padding: 24px;
    margin-bottom: 38px;
}

.fields-wrapper form textarea{
    width: 100%;
    height: 180px;
    border: none;
    color: #959595;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.fields-wrapper button.cancel{
    border: none;
    background: none;
    color: #000;
font-family: Montserrat;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 32px; /* 160% */
}

.social-login-btn{
    border-radius: 50%;
    background: var(--grey-05, #FFF);
    box-shadow: 0px 9.6px 8px 0px rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
}

.social-login-btn img{
    width: 28.8px;
    height: 28.8px;
    object-fit: contain;
    object-position: center;
}

input#anonymous{
    width: 609px;
    height: 68px;
    line-height: 68px;
    color: #616773;
    font-family: Montserrat;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    letter-spacing: -0.16px;
    padding-left: 16px;
    padding-right: 16px;
    border-radius: 8px;
    background: #F9F9F9;
    border: none;
}

.fields-wrapper label{
    color: #000;
    font-family: Montserrat;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.login-label{
    color: #000;
    font-family: Montserrat;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    margin-bottom: 16px;
}

.comment-item{
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    margin-bottom: 63px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--grey-03, #DFDFDF);
}

.comment-item__thumb{
    display: block;
    height: 64px;
    width: 64px;
    border-radius: 50%;
    background-color: #0860DB;
    overflow: hidden;
    position: relative;
}

.comment-item__thumb img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.comment-item__thumb img.no-thumb{
    object-fit: contain;
    width: 27.45px;
    height: 27.45px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
}

.comment-item__thumb img{
    width: 100%;
}

.comments-listing{
    margin-top: 63px;
}

.comment-item__body{
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.comment-item__body .profile-title{
    color: var(--blue-05, #0860DB);
    font-family: Montserrat;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 32px; /* 133.333% */
}

.comment-item__body .created-at{
    color: var(--grey-02, #959595);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 120% */
}

.comment-item__body .review{
    color: var(--blue-01, #021E46);
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 160% */
}

.comment-item__body .like-button{
    border: none;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.4232 4.9785L9.999 5.40926L9.57471 4.97843C8.80113 4.19255 7.74453 3.75 6.64179 3.75C5.53906 3.75 4.48245 4.19255 3.70888 4.97843V4.97843C2.09574 6.63614 2.09574 9.27687 3.70888 10.9346L8.20275 15.4976C8.67653 15.9789 9.32366 16.25 9.99904 16.25C10.6744 16.25 11.3215 15.9789 11.7953 15.4976L16.2892 10.9347C17.9023 9.27695 17.9023 6.63622 16.2892 4.9785V4.9785C15.5156 4.1926 14.459 3.75003 13.3562 3.75003C12.2535 3.75003 11.1968 4.19259 10.4232 4.9785Z" stroke="%23959595" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat left;
    color: var(--grey-02, #959595);
    font-family: Montserrat;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    font-size: 1.125rem; /* 128.571% */
    display: block;
    align-self: flex-start;
    padding-left: 26px;
}

.comments-box{
    display: none;
}

.comments-box.active{
    display: block;
}

.count-likes{
    color: #021E46;
    font-family: Montserrat;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 32px; /* 133.333% */
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.6778 7.96559L15.999 8.65482L15.3201 7.96549C14.0824 6.70808 12.3918 6 10.6275 6C8.86308 6 7.17251 6.70808 5.93479 7.96549C3.35377 10.6178 3.35377 14.843 5.93479 17.4953L13.125 24.7962C13.883 25.5663 14.9184 25.9999 15.9991 25.9999C17.0797 25.9999 18.1151 25.5663 18.8731 24.7962L26.0633 17.4955C28.6443 14.8431 28.6443 10.618 26.0633 7.96561C24.8255 6.70816 23.1349 6.00005 21.3705 6.00004C19.6061 6.00004 17.9155 6.70815 16.6778 7.96559Z" fill="%23D12424" stroke="%23D12424" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat left;
    padding-left: 58px;
}

#ph-share-modal .modal-body{
    padding: 40px;
}

#ph-share-modal .modal-content{
    border-radius: 40px;
    background: var(--grey-05, #FFF);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10);
}

.ph-share-modal__title{
    color: #021E46;
    font-family: Montserrat;
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px; /* 120% */
}

#ph-share-modal button.close{
    display: block;
    width: 40px;
    height: 40px;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M13.333 13.333L26.6663 26.6663" stroke="%23323232" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M26.6663 13.333L13.333 26.6663" stroke="%23323232" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center / contain;
}

.social-btns{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 72px;
}

.social-btn-item{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-btn-item a{
    display: block;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #FFF;
    box-shadow: 0px 12.8px 25.6px 0px rgba(0, 0, 0, 0.10);
    margin-bottom: 16px;
    border: none;
    position: relative;
    overflow: hidden;
}

.social-btn-title{
    color: #262626;
    font-family: Montserrat;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; /* 120% */
}


.compartilhe-header{
    margin-bottom: 72px;
}

.social-btn-item a img{
    width: 40px;
    height: 40px;
    left: 50%;
    top: 50%;
    object-fit: contain;
    object-position: center;
    transform: translate(-50%, -50%);
    position: absolute;
}

.copy-link{
    display: flex;
    flex-direction: column;
}

.copy-link__label{
    color: #000;
    font-family: Montserrat;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 500;
    line-height: 32px; /* 133.333% */
    display: block;
    margin-bottom: 24px;
}

.copy-link__input{
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><rect x="6.99792" y="6.99805" width="14.0058" height="14.0058" rx="2" stroke="%23959595" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.99788 17.0019H4.99705C3.89202 17.0019 2.99622 16.1061 2.99622 15.0011V4.99693C2.99622 3.8919 3.89202 2.99609 4.99705 2.99609H15.0012C16.1062 2.99609 17.002 3.8919 17.002 4.99693V6.99776" stroke="%23959595" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 24px center / 24px 24px, #F5F5F5;
    padding: 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    color: #959595;
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.16px;
}
.post-blog .post-meta {
  width: 100%;
  margin-top: 100px;
  position: relative;
  padding: 1.5rem;
  border-radius: 2rem;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(16px);
  color: white;
  overflow: hidden;
}

.post-blog .post-meta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 70%;
  border-radius: 2rem 2rem 0rem 0rem;
  padding: 1px;
  background: linear-gradient(to bottom, #ffffff, transparent);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.post-blog .post-meta .post-category {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
}

.post-blog .post-meta .post-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem;
    color: #ffffff;
}

.post-blog .post-meta .post-excerpt {
    color:#FFF;
    text-overflow: ellipsis;
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.125rem;
}

.main-blog .post-relateds .post-blog .post-thumbnail {
    border-radius: 1rem !important;
    top: -150px !important;
    left: 0px !important;
    height: 140% !important;
}

@media screen and (max-width: 768px){
    .comment-form{
        grid-template-columns: 1fr;
    }

    input#anonymous{
        width: 100%;
    }

    .copy-link__label{
        font-size: 20px;
        margin-bottom: 24px;
    }

    .comments-box__header{
        padding-bottom: 24px;
        margin-bottom: 32px;
        border-bottom: 1px solid var(--grey-03, #DFDFDF);
    }

    .cta{
        width: 100% !important;
    }

    .social-btns{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .ph-share-modal__title{
        font-size: 1.5rem;
    }

    .main-blog .post-relateds .post-blog .post-thumbnail {
        border-radius: 1rem !important;
        top: 0px !important;
        left: 0px !important;
        height: 100% !important;
    }
}
