.section-blog {
    display: flex;
    flex-direction: column;
}

.blog-header-details {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    padding: 40px 0px 40px 0px;
}

.blog-header-inside {
    width: 100vw;
    /* max-width: 1920px; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-button-view-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    width: 158px;
    height: 57px;
    margin-top: 30px;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
}

.blog-info-header-details {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-div-search-r {
    width: 420px;
}

.blog-bar-header {
    height: 3px;
    border-radius: 3px;
    background: var(--primary-color);
    width: 63px;
}

.blog-input-group-prepend {
    height: 50px !important;
}

.blog-f-f {
    font-family: 'Oswald', sans-serif;
    font-size: 0.9rem !important;
}

.ff {
    font-family: 'Oswald', sans-serif !important;

}

.blog-title-header {
    font-size: 48px;
    padding-top: 5px;
    font-weight: 500;
    color: white;
    font-family: "Oswald", sans-serif;
}

.blog-input-group {
    border: 1px solid var(--primary-color);
}

.sub-header {
    padding-top: 10px;
    font-size: 18px;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    color: var(--font-color);
}

.section-post {
    padding-top: 97px;
    padding-bottom: 100px;
    display: flex;
    justify-content: center;
    height: 100%;
}

.inside-post-details {
    max-width: 1300px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.list-actions-details {
    display: flex;
    width: 100%;
    padding-top: 80px;
    gap: 20px;
    align-items: center;
}

.list-actions-details img {
    height: auto;
    cursor: pointer;
}

.item-action-like {
    background: white;
    height: 36px;
    width: 93px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #90939C;
    font-size: 16px;
    cursor: pointer;
    border-radius: 200px;
    font-weight: 600;
}



.details-list-comments {
    width: 100%;
    padding: 40px 0px 20px 0px;
    gap: 30px;
    display: flex;
    flex-direction: column;
}

.details-button-submit {
    font-size: 18px !important;
}

.details-item-comments {
    display: flex;
    margin-bottom: 15px;
}

.details-item-photo {
    margin-right: 15px;
}

.details-item-info {
    flex: 1;
    border-bottom: 2px solid #363636;
    padding-bottom: 80px;
}

.details-name {
    font-family: 'Oswald', sans-serif !important;
    color: white;
    font-size: 25px;
    font-weight: 500;
    text-transform: uppercase;
}

.details-date {
    font-size: 12px;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    padding-bottom: 15px;
}

.details-desc {
    color: #90939C;
    font-weight: 500;
    font-size: 16px;
}



/* Individual comment item */
.details-item-comments {}

/* Container for the comment author's photo or avatar */
.details-item-photo {}

/* Container for the comment information (name, date, description) */
.details-item-info {}

/* Name of the comment author */
.details-name {}

/* Date the comment was posted */
.details-date {}

/* Text content of the comment */
.details-desc {}



.blog-recent-post {
    padding: 60px 0px;
}

.blog-title-recent-post {
    color: white;
    font-weight: 500;
    font-size: 30px;
    text-transform: uppercase;
    padding-bottom: 19px;
}

.bar-recent-post {
    background: var(--primary-color);
    width: 63px;
    height: 2px;
    margin-top: 10px;
}

.blog-list-recent-post {
    padding-top: 63px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Individual blog post item */
.blog-item-recent-post {
    display: flex;
    align-items: center;
    gap: 30px;

}

/* Container for the post's image */
.blog-item-img-post {
    /* max-width: 600px; */
    /* width: 100%; */
}

.blog-item-img-post img {
    /* width: 100%; */
    max-width: 600px;


}

/* Container for the post's details (title, author, description) */
.blog-item-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

/* Title of the blog post */
.blog-item-title {
    font-size: 34px;
    font-weight: 500;
    color: white;
    padding-bottom: 30px;
}

.blog-item-author {
    color: #90939C;
    font-size: 19px;
    padding-bottom: 15px;
}

.custom-author {
    color: white;
}

.blog-item-desc {
    color: #90939C;
    font-size: 16px;
    font-weight: 500;
}


.blog-item-button-view-more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    width: 158px;
    height: 57px;
    margin-top: 30px;
    font-weight: 500;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
}

.div-quote {
    margin-top: 62px;
    background: #292E32;
    border-left: 2px solid var(--primary-color);
    display: flex;
    height: 158px;
    padding: 15px 0px;
}

.div-quote-image {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 15px
}

.info-quote {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.text-quote,
.author-quote {
    color: var(--font-color);
    font-size: 16px;
    font-weight: 500;
}

.info-comment {
    width: 100%;
    display: flex;
    padding-top: 10px;
    padding-bottom: 15px;
}

.desc-post {
    padding: 0px 0px;
}

.blog-img-post-details {
    width: 100%;
    max-width: 1300px;
    padding-bottom: 80px;
}

.blog-title-post-details {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 50px;
    text-transform: uppercase;
    font-weight: 500;

}

.author {
    font-size: 16px;
    font-weight: 500;
    color: var(--font-color);
    margin-right: 33px;
    display: flex;
    align-items: center;
}

.number-comment {
    font-size: 16px;
    font-weight: 500;
    color: var(--font-color);
    display: flex;
    align-items: center;
}

.number-comment .ico-comment-post {
    width: 20px;
    margin-right: 5px;
}

.author .ico-user-post {
    /* width: 20px; */
    margin-right: 5px;
    margin-bottom: 2px;
}

.right-side {
    width: 100%;
    height: 100vh;
    /* border: 1px solid white; */
}

.card-author {
    margin-top: 80px;
    background: #101314;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to bottom, #F46C64, transparent) 1;
    height: 182px;
    display: flex;
    align-items: center;
}

.div-img-author {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 30px;
}

.name-author {
    font-size: 16px;
    color: white;
    font-weight: 500;
}

.desc-author {
    padding-top: 5px;
    font-size: 16px;
    color: var(--font-color);
    font-weight: 500;
}

.action-author {
    font-size: 16px;
    padding-top: 13px;
    color: var(--font-color);
    font-weight: 500;
    cursor: pointer;
}

.control-post {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}



.action-author svg {
    margin-left: 5px;
}


.info-control {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.next {
    font-size: 16px;
    color: var(--font-color);
    cursor: pointer;
    font-weight: 500;
}

.text-control {
    font-size: 16px;
    font-weight: 500;
    color: white;
}

.ico-next {
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to left, #F46C64, transparent) 1;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 21px;
    cursor: pointer;
}

.ico-next img {
    width: 5px;
    height: 9px;
}

.custom-textarea {
    border: 1px solid var(--primary-color);
}

.button-custom img {
    filter: brightness(0) invert(1);
    margin-left: 15px;
}

.button-custom {
    margin-top: 30px;
    background: var(--primary-color);
    color: white;
    font-family: "Oswald", sans-serif;
    width: 225px;
    height: 50px;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 400;
    cursor: pointer;
}

.button-custom:hover {
    transition: 300ms;
    background: transparent !important;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.button-custom:hover img {
    transition: 300ms;
    filter: none;
}


.custom-textarea .input-group-text {
    border: none;
}

.textarea-custom {
    background: #292e32;
    border-left: 1px solid var(--primary-color);
}

.divider-post {
    width: 100%;
    height: 1px;
    background: #90939C;
    border-radius: 1px;
    margin-top: 63px;

}

.divider-categories {
    width: 100%;
    height: 1px;
    background: #90939C;
    border-radius: 1px;
    margin-top: 50px;
    margin-bottom: 33px;
}

.title-tag {
    margin-bottom: 43px;
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    font-weight: 400;
}


.title-recent-comment {
    margin-bottom: 13px;
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.list-tag {
    width: 100%;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.item-tag {
    font-weight: 400;
    font-size: 16px;
    color: var(--font-color);
    border: 1px solid var(--font-color);
    padding: 12px 10px;
    cursor: pointer;
}

.divider-tag {
    width: 100%;
    height: 1px;
    background: #90939C;
    border-radius: 1px;
    margin-top: 48px;
    margin-bottom: 36px;
}

.list-recent-comment {
    width: 100%;
}

.item-recent-comment {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 30px;
}

.text-recent-comment {
    font-size: 16px;
    font-weight: 400;
    color: var(--font-color);
}

.date-recent-comment {
    font-size: 16px;
    font-weight: 400;
    color: var(--font-color);
    text-align: end;
}

.divider-comment-tag {
    width: 100%;
    height: 1px;
    background: #90939C;
    border-radius: 1px;
    margin-top: 46px;
    margin-bottom: 36px;
}

.tag-select {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.title-recent-r {
    color: white;
    font-family: "Oswald", sans-serif;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 23px;
}

.list-recent {
    width: 100%;
}

.item-recent {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 28px;
}

.div-img-recent {
    display: flex;
    align-items: center;
    margin-right: 25px;
}

.details-recent {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.date-recent {
    color: var(--font-color);
    font-weight: 400;
    font-size: 18px;
    margin-bottom: 21px;
}

.text-recent {
    color: white;
    font-family: "Oswald", sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 18px;
}


.title-reply {
    font-size: 24px !important;
    text-transform: uppercase;
}

.divider-recent {
    width: 100%;
    height: 1px;
    background: #90939C;
    margin-top: 75px;
    margin-bottom: 68px;
    border-radius: 1px;
}

.div-inputs-reply {
    margin-top: 22px;
}


.title-related {
    color: white;
    font-size: 24px;
    font-weight: 500;
    font-family: "Oswald", sans-serif;
    text-align: center;
    text-transform: uppercase;
    margin-top: 39px;
}

.list-related {
    width: 100%;
    margin-top: 25px;
}

.container-blog-l {
    display: flex;
    justify-content: center;
    width: 100%;
}

.cards-blog-l {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    grid-gap: 15px;
}

/* Style the cards */
.card-blog-l {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: dodgerblue;
    flex-direction: column;
    color: white;
    height: 431px;
    width: 420px;
}

.div-img-card-blog-l {
    width: 100%;
    height: 240px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px 19px;
}

.date-card-blog-l {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 59px;
    background: #292E32;
    color: white;
    font-weight: 500;
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(to top, #F46C64, transparent) 1;
    font-size: 16px;
}

.actions-blog {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.action-edit {
    color: var(--font-color);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    align-items: center;
    cursor: pointer;
    /* width: 100%; */

}

.action-edit img {
    margin-right: 5px;
    margin-bottom: 2px;
}

.comments img {
    margin-right: 5px;
    margin-bottom: 2px;
}

.ico-view-more {
    cursor: pointer;
    padding-right: 10px;
}

.comments {
    color: var(--font-color);
    font-size: 14px;
    font-weight: 400;
    display: flex;
    /* align-items: center; */
    cursor: pointer;
    /* width: 100%; */
}

.div-info-card-blog-l {
    width: 100%;
    height: 191px;
    background: #292E32;
}

.title-card-blog {
    padding-top: 30px;
    text-align: center;
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 20px;
    color: white;
    text-transform: uppercase;
}

.desc-card-blog-l {
    padding-top: 24px;
    text-align: center;
    font-weight: 500;
    font-size: 16px;
    color: var(--font-color);
    display: flex;
    align-items: flex-end;
}


.list-categories {
    margin-top: 36px;
}

.title-categories {
    font-family: "Oswald", sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: white;
}

.item-categories {
    font-family: "Oswald", sans-serif;

    margin-top: 15px;
    font-weight: 500;
    font-size: 18px;
    color: var(--font-color);
    cursor: pointer;
}

.input-search-r {

    /* border-right-style: solid !important;
    border-right-width: 5px !important;
    -webkit-border-image: -webkit-gradient(linear, top right, bottom right, from(#F46C64), to(transparent))0 100% 0 0 stretch !important; */




}

.btn-back{
  border: 1px solid;
  border-color: var(--primary-color);
  width: 138px;
  height: 50px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-family: "Oswald", sans-serif !important;
  text-decoration: none;
  font-size: 22px;
  margin: 0px 10px 0px 10px;
  color: var(--primary-color) !important;
}

.btn-back:hover{
  background-color: var(--primary-color);
  color: white !important;
}









/*###################      MOBILE    ###################*/



@media (max-width: 1200px) {
    .blog-item-recent-post {
        flex-direction: column;
    }

    .blog-item-img-post img {
        width: 100%;
    }

}



@media (max-width: 990px) {

    .inside-post-details {
        padding-left: 20px;
        padding-right: 20px;
    }

    .blog-header-inside {
        flex-direction: column !important;
        gap: 30px !important;
        align-items: center;
        justify-content: center;
    }

    .blog-div-search-r {
        width: 100%;
    }

    .info-comment {
        flex-direction: column;
        gap: 5px !important;
    }

    .blog-title-post {
        padding-top: 20px;
        display: flex;
        justify-content: center;
        text-align: center;
    }

    .blog-title-header {
        padding: 0 !important;
    }

    .blog-info-header {
        padding: 0;
    }

    .section-post {
        padding-top: 20px;
    }

    .inside-post {
        width: 100%;
    }

    .img-desc-2 {
        width: 100%;
    }

    .card-author {
        height: 100%;
    }

    .right-site {
        margin-top: 20px;
    }
}