.blog .bread-crumb {padding-block: 15px;}
.blog .bread-crumb ul {display: flex; align-items: center; justify-content: start; gap: 12px;}
.blog .bread-crumb ul li > :first-child {font-size: var(--fs-base); transition: var(--transition);}
.blog .bread-crumb ul > :not(:last-child) {padding-right: 15px; position: relative;}
.blog .bread-crumb ul > :not(:last-child)::before {width: 6px; height: 10px; background: no-repeat center / cover url("../images/icons/chevron-right.svg"); position: absolute; inset: 0; margin-block: auto; margin-left: auto; content: "";}
.blog .bread-crumb ul a:hover {color: var(--c-primary);}
.blog .title {background-color: var(--c-light-bg); padding: 12px 24px; border-radius: 8px; margin-bottom: 30px;}
.blog .title > :first-child {font-size: calc(var(--fs-md) + 2px); font-weight: 600;}

.blog .blog-img img {width: 100%; height: 500px; object-fit: cover; border-radius: 8px;}
.blog .wrapper {display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-block: 20px 28px;}

.blog .wrapper > :first-child {display: flex; align-items: center; gap: 8px; }
.blog .wrapper .btn__primary {font-size: var(--fs-xs); background-color: #011f2d; padding-inline: 35px;}
.blog .wrapper .btn__primary::before {background-color: var(--c-primary);}
.blog .blog-date ul {display: flex; align-items: center; gap: 10px;}
.blog .blog-date li {font-size: var(--fs-base); font-weight: 500;}

.blog .content p {font-size: var(--fs-base); letter-spacing: .3px; margin-bottom: 8px;}
.blog .content :where(h2,h3,h4,h5,h6) {font-size: var(--fs-md); font-weight: 600; line-height: calc(1 + .3/max(1, 1.0)); margin-bottom: 5px;}
.blog .content :where(ul, ol) { padding-left: 1rem; margin-bottom: 8px;}
.blog .content :where(ul, ol) li {font-size: var(--fs-base); line-height: calc(1 + 0.8 / 1.0);}
.blog .content :where(ul) li {list-style: disc;}
.blog .content :where(ul, ol) li > :first-child {font-size: var(--fs-base); line-height: calc(1 + 0.8 / 1.0);}
.blog .content :where(ol) li {list-style: auto;}

.blog .icons {display: flex; align-items: center; justify-content: space-between; padding-left: 10px; margin-block: 20px;}
.blog .icons ul {display: flex; align-items: center; gap: 20px;}
.blog .icons ul img {width: 18px; height: 18px;}
.blog .share {display: flex; align-items: center; justify-content: center; gap: 10px;}
.blog .share > :nth-child(2) {font-size: var(--fs-xs); transition: var(--transition);}
.blog .share img {transition: var(--transition);}
.blog .share:hover > :nth-child(2) {color: var(--c-primary);}
.blog .share:hover img {filter: var(--_c-primary-filter);}

.blog .more-blogs {display: flex; align-items: center; justify-content: space-between; background-color: var(--c-light-bg); padding: 12px 24px; border-radius: 8px; margin-block: 3rem;}
.blog .more-blogs > * {width: 100%; display: flex; align-items: center; gap: 10px;}
.blog .more-blogs > :first-child {padding-right: 10px; border-right: 2px solid #0000001a;}
.blog .more-blogs > :last-child {justify-content: end; padding-left: 10px;}
.blog .more-blogs .anchor > img {width: 80px; height: 80px; object-fit: cover; border-radius: 8px;}
.blog .next-blog {display: flex; align-items: center; gap: 5px; font-size: var(--fs-base); margin-bottom: 5px; transition: var(--transition);}
.blog .more-blogs p {font-size: var(--fs-xs); font-weight: 600;}
.blog .more-blogs > :last-child p {text-align: end;}
.blog .more-blogs > :last-child .next-blog {justify-content: end;}
.blog .next-blog img {transition: var(--transition);}
.blog .next-blog:hover {color: var(--c-primary);}
.blog .next-blog:hover img {filter: var(--_c-primary-filter);}

.blog .back-blog {display: flex; align-items: center; gap: 5px; margin-bottom: 2rem; transition: var(--transition);}
.blog .back-blog:hover {color: var(--c-primary);}
.blog .back-blog:hover img {filter: var(--_c-primary-filter);}

.blog .comment-sec > :first-child {font-size: var(--fs-md); font-weight: 600; margin-bottom: 5px;}
.blog .comment {background-color: var(--c-light-bg); padding: 2rem; border-radius: 8px; margin-bottom: 1.5rem;}
.blog .comment > :first-child {display: block; font-size: var(--fs-base); margin-bottom: 10px; color: #000000cc;}
.blog .comment > :first-child > * {font-size: var(--fs-base); font-weight: 600;}
.blog .personal-info {display: flex; align-items: center; gap: 10px;}
.blog .personal-info > :nth-child(2) {display: flex; flex-direction: column ;}

.blog .comment-form > :first-child {font-size: var(--fs-md); font-weight: 600; margin-bottom: 5px;}
.blog form {margin-block: 20px 40px; }
.blog form > :nth-child(2) {margin-left: 2rem;}
.blog form > :nth-child(-n+2) {width: calc(49.8% - 1rem); margin-bottom: 2rem;}
.blog form input, textarea {font-weight: 600; padding: 7px 98px 8px 15px; border: none; border-radius: 5px; box-shadow: var(--_c-shadow); outline: none; transition: var(--transition);}
.blog form input::placeholder, textarea::placeholder {color: #00000066;}
.blog form input:hover, textarea:hover {box-shadow: var(--_c-secondary-shadow);}
.blog form input:focus, textarea:focus {box-shadow: 0 0 0 2px #000;}
.blog form textarea {height: 200px;}
.blog form button {width: fit-content; margin-top: 16px; background-color: #011f2d;}
.blog form button::before {background-color: var(--c-primary);}


@media only screen and (max-width: 991px) {
    .blog form > :nth-child(-n+2) {width: calc(49.6% - 1rem);}
}

@media only screen and (max-width: 576px) {
    .blog form > :nth-child(-n+2) {width: 100%; margin-bottom: 1rem;} 
    .blog form > :nth-child(2) {margin-left: unset;}
    .blog .more-blogs > :first-child {padding-right: unset; border-right: 0;}
    .blog .more-blogs {flex-direction: column; gap: 10px;}
    .blog .more-blogs > :last-child {padding-left: unset;}
}