/*============= Loader CSS =================*/
.loader-ellips {
  font-size: 20px; /* change size here */
  position: relative;
  width: 4em;
  height: 1em;
  margin: 10px auto;
}

.loader-ellips__dot {
  display: block;
  width: 1em;
  height: 1em;
  border-radius: 0.5em;
  background:#8B4513;
  position: absolute;
  animation-duration: 0.5s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

.loader-ellips__dot:nth-child(1),
.loader-ellips__dot:nth-child(2) {
  left: 0;
}
.loader-ellips__dot:nth-child(3) { left: 1.5em; }
.loader-ellips__dot:nth-child(4) { left: 3em; }

@keyframes reveal {
  from { transform: scale(0.001); }
  to { transform: scale(1); }
}

@keyframes slide {
  to { transform: translateX(1.5em) }
}

.loader-ellips__dot:nth-child(1) {
  animation-name: reveal;
}

.loader-ellips__dot:nth-child(2),
.loader-ellips__dot:nth-child(3) {
  animation-name: slide;
}

.loader-ellips__dot:nth-child(4) {
  animation-name: reveal;
  animation-direction: reverse;
}

.page-load-status{
	  display: none;
    width: 100%;
    float: left;
}

body.blog-list section.innerbanner .innersec {
  width: 100%;
  z-index: 99;
  transform: translateY(22%);
}

body.blog-list section.innerbanner .innersec .input input, body.blog-list section.innerbanner .innersec .input select {
  border: none;
  background: #F5F1EF;
  min-height: 50px;
  width: 200px;
  margin: 0 4px;
  border-radius: 6px;
  -webkit-appearance: none;
  padding: 0 15px;
}

.listings.video-listings h2 {
  color: #8B4513;
}

body.blog-list section.innerbanner .innersec .input select{padding: 14px 15px;}


body.blog-list section.innerbanner .innersec .right-sort {
  display: flex;
  justify-content: flex-end;
  margin-top: 50px;
}

body.blog-list section.innerbanner .innersec .input select option {
  background: #fff;
}

body.blog-list section.innerbanner {
    min-height: auto;
    height: 220px;
    background-image: url(../../img/blogs/headerbg.jpg);
    background-size: 20%;
    padding-top: 0;
}

body.blog-list section.innerbanner h1 {
    padding-top: 0;
}

section.blog-list {
  background: #efefef;
}

.right-cont .slider .slide {
  position: relative;
}

.right-cont .slider .slide .desc {
  position: absolute;
  top: 0;
  background: rgba(8, 163, 77, 0.9);
  right: 0;
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px;
}

.right-cont .slider .slide .desc h3 {
  font-size: 32px;
  margin-bottom: 20px;
  color: #F5F1EF;
}

.right-cont .slider .slide .desc .date {
  margin-bottom: 20px;
}

.right-cont .slider .slide .desc .date {
  color: #fff;
  opacity: 0.8;
  display: flex;
  align-items: end;
}

.right-cont .slider .slide .desc p {
  color: #fff;
  font-weight: 300;
}

.right-cont .slider .slide .desc .date img {
    margin-right: 10px;
}

.right-cont .listings {
  margin-top: 80px;
  display: flex;
  flex-wrap: wrap;
}

.right-cont .listings .list {
  max-width: 47%;
  background: #fff;
  margin-right: 5%;
  margin-bottom: 50px;
}

.right-cont .listings .list:nth-child(2n+3) {
  margin-right: 0;
}

.right-cont .listings .list .desc {
  padding: 20px;
}

.right-cont .listings .list .desc h3 {
  font-size: 22px;
  color: #8B4513;
  font-weight: 500;
  margin-top: 0;
}

.right-cont .listings .list .desc .summry p {
  font-size: 14px;
  display: inline-block;
  margin: 0;
}

.right-cont .listings .list .desc .summry p:first-child {
  margin-right: 6px;
  border-right: 1px solid #ddd;
  padding-right: 10px;
}

.right-cont .listings .list .image h4 {
    position: absolute;
    top: 20px;
    left: 10px;
    background: #fff;
    transition: 0.1s;
    padding: 6px 20px;
    border-radius: 30px;
    font-size: 12px;
    font-family: "Roboto";
    margin: 0;
    font-weight: 400;
    text-transform: uppercase;
}

.right-cont .listings .list .image h4:hover {
    background: #FA670F;
}

.right-cont .listings .list .image h4:hover a {
    color: #FFF;
}

.right-cont .listings .list .image {
    position: relative;
}

body.blog-list section.innerbanner .innersec .input img {
    position: absolute;
    right: 20px;
    top: 42%;
}

body.blog-list section.innerbanner .innersec .input {
    position: relative;
}

body.blog-list section.innerbanner .innersec .input:first-child img {
    right: 20px;
    top: 34%;
}

.right-cont .listings .list .desc h3:hover a {
  color: #191919;
}

.right-cont .slick-slider .slick-slide {
  padding: 0;
}

.top-sec  button.slick-arrow {left: auto;right: 0;bottom: 0;top: auto;width: 50px;height: 50px;background-color: #8B4513;border-radius: 50%;background-image: url(../../img/blogs/chev-right.png);}

.top-sec button.slick-arrow.slick-prev {
    right: 100px;
    transform: scale(-1);
    bottom: -15px;
}

.top-sec button.slick-arrow.slick-next {
    bottom: -40px;
    right: 8px;
}

.right-cont .listings .list .image img {
  width: 100%;
}

.sidebar.hide-desktop {
  display: none;
}

.show-mobile{display: none;}

.sidebar .most-bx.box ul li a img {
  min-width: auto;
  width: 120px;
  height: auto;
  object-fit: contain;
}

.sidebar .ctgry-bx.box ul {
  max-height: 450px;
  overflow-y: scroll;
}

.right-cont.category-list .listings {
  margin-top: 0;
}

/* Blog Listing CSS */


/* Blog Detail Page Start */

section.blog-detail-top {
  background: #efefef;
}

section.blog-detail-top .head h3 {
  font-size: 45px;
  color: #8B4513;
  width: 60%;
margin: 20px auto;
}

section.blog-detail-top {
  text-align: center;
}

section.blog-detail-top .banner img {
  width: 100%;
}

section.blog-detail-top ul li {
  display: inline-block;
  margin: 0 10px;
}

section.blog-detail-top ul li img {
  margin-right: 10px;
}

section.blog-detail-top ul {
  margin-bottom: 50px;
  margin-top: 20px;
}

section.blog-detail-top .container-fluid {
  padding: 0;
}

section.blog-detail-top ul li {
  opacity: 0.9;
}

section.blog-detail-top {
  background: #efefef;
}


section.blog-detail-top {
  text-align: center;
}

section.blog-detail-top .banner img {
  width: 100%;
}

section.blog-detail-top ul li {
  display: inline-block;
  margin: 0 10px;
}

section.blog-detail-top ul li img {
  margin-right: 10px;
}

section.blog-detail-top ul {
  margin-bottom: 50px;
  margin-top: 20px;
}

section.blog-detail-top .container-fluid {
  padding: 0;
}

section.blog-detail-top ul li {
  opacity: 0.9;
}

.detail-sec .desc { overflow-wrap: break-word; word-wrap: break-word; }
.detail-sec .desc p {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 50px;
}

.detail-sec .desc h4 {
  font-size: 28px;
  font-weight: 500;
  margin-top: 50px;
}

.detail-sec .desc ul li {
  font-size: 18px;
  list-style: disc;
  font-weight: 500;
}

.detail-sec .desc ul {
  padding-left: 20px;
  margin-bottom: 50px;
}

.detail-sec .desc ol li {
  font-size: 18px;
  font-weight: 400;
}

.detail-sec .desc ol {
  padding-left: 20px;
  margin-bottom: 40px;
}

.detail-sec .desc > *:not(.highlight-para) a:not([class]) {
  color:#b83d0a;
  color: #8B4513;
  font-weight: bold;
  text-decoration: underline;
}

.detail-sec .highlight-para p {
  font-size: 18px;
  font-weight: 500;
}

.detail-sec .highlight-para p a {
  color:#b83d0a;
}

.detail-sec .bottom ul li {
  display: inline-block;
}

.detail-sec .bottom p.brand {
  color:#b83d0a;
}

.detail-sec .bottom ul li i {
  font-size: 18px;
  color:#b83d0a;
}

.detail-sec .bottom ul li {
  margin-right: 6px;
}

.detail-sec ul.social {
  display: inline-block;
  padding-left: 10px;
}

.detail-sec .bottom p {
  font-size: 14px;
  display: inline-block;
  font-weight: 500;
}

.detail-sec .bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.detail-sec .bottom {
  border-top: 1px solid #ddd;
  padding-top: 20px;
}

.detail-sec .buttons a {
  background: #fff;
  padding: 12px 18px;
  display: inline-block;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  margin: 0 6px;
  line-height: 1;
}

.detail-sec .buttons a img {
  margin: 0 2px;
  vertical-align: bottom;
}

.detail-sec .buttons {
  text-align: right;
  padding-top: 40px;
}

.detail-sec .buttons a:hover {
  color:#b83d0a;
}

section.detail-page .listings .head {
  width: 100%;
  text-align: center;
  margin-bottom: 21px;
}

section.detail-page .listings .head h3 {
  font-size: 38px;
  color: #8B4513;
}

.comment-sec .comment {
  display: flex;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 1px solid #cacaca;
}

.comment-sec .comment h4 {
  margin-bottom: 7px;
}

.comment-sec .comment .image {
  margin-right: 31px;
}

.comment-sec .head h3 {
  font-size: 38px;
  color: #8B4513;
}

.comment-sec .head {
  margin-bottom: 40px;
}

.comment-sec .comment h4 {
  font-size: 18px;
  margin-top: 0;
}

.comment-sec .comment h5 {font-family: "Roboto";font-weight: 400;color: #a9a9a9;margin-top: 0;}

.comment-sec .comment h5.date {
  margin-top: 0;
}

.comment-sec .comment p {
    font-size: 16px;
    margin-bottom: 0;
}

.comment-sec .comment:last-child {
    margin-bottom: 0;
    border: none;
}

.sidebar .box.form {
  background: #FA670F;
  padding-bottom: 40px;
}

.sidebar .box.form p {
  font-size: 14px;
  color: #fff;
}

.sidebar .box.form h3 {
  color: #fff;
}

.sidebar .box.form .input input {
  width: 100%;
  background: #F5F1EF;
  border: none;
  color: #3B2A20;
  padding: 15px;
  border-radius: 4px;
}

.sidebar .box.form .input input::placeholder {
  color: #6B584C;
}

.sidebar .box.form .input {
  margin-bottom: 10px;
}

.sidebar .box.form button {
  background: #F5F1EF;
  border: none;
  color: #000;
  padding: 15px;
  width: 100%;
  margin: auto;
  display: block;
  border-radius: 30px;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "Roboto";
  transition: 0.2s;
}

.sidebar .box.form p {
  margin-bottom: 20px;
}

.reply-sec {
  background: #ffffffa3;
  padding: 20px 30px 50px;
  border-radius: 6px;
}

.reply-sec .message textarea, .reply-sec  input {
  border: none;
  background: #e5e5e5;
  width: 100%;
}

.reply-sec .input {
  width: 33%;
  display: inline-block;
}

.reply-sec .input.message {
  width: 100%;
  margin: 0;
  margin-bottom: 15px;
}

.reply-sec .input input {
  padding: 15px;
  border-radius: 4px;
}

.reply-sec .input.message textarea {
  padding: 15px;
  border-radius: 6px;
}

.sidebar .box.form button:hover {
    background:#a83700;
    color: #fff;
}

.reply-sec .button button {
    display: inline-block;
    margin-top: 0;
    color: #000;
    background: transparent;
    border: 1px solid #000;
    text-transform: uppercase;
    padding: 8px 25px;
    border-radius: 30px;
    font-weight: 600;
    font-family: "Roboto";
}

.reply-sec .button button:hover {
    background: #1b1b1b;
    color: #fff;
}

.reply-sec h3 {
    color: #8B4513;
    margin-bottom: 30px;
}

.reply-sec .button p {
    display: inline-block;
    font-size: 14px;
    margin-bottom: 0;
}

.reply-sec .button {
    display: flex;
    margin-top: 30px;
    justify-content: space-between;
}

.ayur-sec {
    text-align: center;
    background: #fff;
    padding: 40px;
}

.ayur-sec a {
    display: inline-block;
}

.ayur-sec .know-btn {
    padding-top: 10px;
}


.ayur-sec h3 {
    margin-top: 0;
    color: #8B4513;
}

section.blog-detail-top {
  padding-bottom: 0;
  padding-top: 20px;
}

section.blog-list.detail-page {
  padding-top: 70px;
}

.detail-sec img {
  width: 100%;
}

.detail-sec .buttons a img {
  width: auto;
}

.detail-sec .bottom ul li:hover i {
  color:#b83d0a;
}

.banner-blog img {
  width: 100%;
}

body.blog-list.inner-page header {
    background-size: 20%;
    background-repeat: repeat;
}

body.blog-list .bottom-bx.float {
  opacity: 1;
}


.bottom-banner-menu .bottom-bx {
  width: auto;
  display: inline-block;
  bottom: 30px;
  position: fixed;
  z-index: 999;
  opacity: 0;
}
/* Blog Detail Page Ends */


/* Blog Video Listing Page Start */

.listings.video-listings {
  margin-top: 0;
}

.listings.video-listings h2 {
  font-size: 32px;
}

.listings.video-listings .head {
  width: 100%;
  padding-bottom: 20px;
}

.right-cont .listings.video-listings .list {
  max-width: 31%;
  margin-right: 2%;
}

.right-cont .video-listings.listings .list:nth-child(3n+4) {
  margin-right: 0;
}

.right-cont .listings.video-listings .list .desc .summry p {
  border: none;
  text-transform: uppercase;
  margin: 0;
  padding-bottom: 6px;
}

/* Blog Video Listing Page Ends */


/* Blog Video Category Page Starts */
.list-slider {
  width: 100%;
}
div.category {
  width: 100%;
  margin-bottom: 40px;
}

.right-cont .listings .slick-slider .slick-slide {
  padding: 10px;
}

.right-cont .listings.video-listings .category .list {
  max-width: 100% ;
  margin: 0;
}

.listings.video-listings .category .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.listings.video-listings .category .head h2, .listings.video-listings .category .head p {
  margin: 0;
}

.listings.video-listings .category .viewall {
  padding-right: 120px;
  letter-spacing: 1px;
}

.listings.video-listings .category .viewall p {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 14px;
  color: #7f7f7f;
}

.listings.video-listings .category button.slick-arrow {
  bottom: 0;
  top: -33px;
  width: 30px;
  height: 30px;
  background-color: #ffff;
  border-radius: 10px;
}
.listings.video-listings .category button.slick-arrow.slick-next {
    background-image: url(../../img/blogs/chev-right-dark.png);
}

.listings.video-listings .category button.slick-arrow.slick-prev {
    background-image: url(../../img/blogs/chev-left-dark.png);
    transform: none;
    right: 51px;
    top: -47px;
}

div.category h2 {
    padding-left: 10px;
}
.listings.video-listings .category .viewall a:hover p {
  color:#b83d0a;
}

.listings.video-listings .category button.slick-arrow:hover {
  background-color: #FA670F;
}
/* Blog Video Category Page Ends */
.detail-sec .bottom ul li:nth-child(1):hover a i{
  color: #3b5998 ;
}

.detail-sec .bottom ul li:nth-child(2):hover a i{
  color: #00acee;
}

.detail-sec .bottom ul li:nth-child(3):hover a i{
  color: #0e76a8;
}

.detail-sec .bottom ul li:nth-child(4):hover a i{
  color: #3f729b;
}

.detail-sec .bottom ul li:nth-child(5):hover a i{
  color: #B23121;
}
.right-cont .listings.video-listings .list:hover h3 {
  color:#b83d0a;
}

.sidebar .box.highlight a {
  color: #ffffff;
}

.sidebar .box.highlight {
  padding: 10px 20px;
  text-align: center;
  background: #ff8f4b;
  margin-bottom: 30px;
  margin-top: 30px;
}

.sidebar .box.highlight h3 {
  font-size: 23px;
  line-height: 1;
  margin-top: 10px;
}



.sidebar .box {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 40px;
}



.sidebar .box h3 {color: #8B4513;}

.sidebar .box ul li {
  margin-bottom: 9px;
  font-size: 16px;
}

.sidebar .box ul {
  margin-top: 20px;
}

.sidebar .ctgry-bx.box ul li {
  border-bottom: 1px solid #ddd;
  padding-bottom: 7px;
}

.sidebar .ctgry-bx.box ul li:hover a {
  color:#b83d0a;
}
.sidebar .most-bx.box ul li a {
  display: flex;
  align-items: end;
  position: relative;
}

.sidebar .most-bx.box ul li a h5 {
  margin-top: 0;
  text-transform: uppercase;
  margin-bottom: 5px;
  opacity: 0.8;
}

.sidebar .most-bx.box ul li a p {
  font-size: 16px;
  font-family: 'Philosopher', sans-serif;
  line-height: 1.2;
  margin-bottom: 0;
}

.sidebar .most-bx.box ul li a .desc {
  padding-left: 15px;
}

.sidebar .most-bx.box ul li {
  margin-bottom: 17px;
  padding-bottom: 15px;
  border-bottom: 1px solid #dddd;
}


.sidebar .most-bx.box ul li a:hover {
  color:#b83d0a;
}

.most-bx.box .view-btn {text-align: right;margin-top: 15px;}

.sidebar .most-bx.box ul li:last-child {
    margin: 0;
    padding: 0;
    border: none;
}

.most-bx.box .view-btn a {
    text-transform: uppercase;
    font-weight: 600;
}

.most-bx.box .view-btn a:hover {
    color:#b83d0a;
}

.list-slider .slick-track {
  margin-left: 0;
}
.right-cont .top-sec .slide img {
  height: 500px;
  width: 100%;
  object-fit: cover;
  object-position: bottom;
}

.right-cont .top-sec .slide .desc img {
  height: auto;
  width: auto;
}

.banner-blog img {
height: 500px;
object-fit: cover;
object-position: center;
}

.detail-sec .desc ul li p {
margin: 0;
}

.detail-sec .desc h2 {
  font-size: 40px;
}

.right-cont .detail-sec .listings {
  margin-top: 20px;
}

.comment-sec .head {
  margin-bottom: 0;
}

.comment-sec p {
  margin-bottom: 20px;
}

.right-cont .know-btn {
  padding-top: 10px;
}

/* Responsive */

@media only screen and (max-width: 768px){
.ctgry-bx.box ul {
    display: none;
}

.ctgry-bx.box h3 {
  margin: 0;
  position: relative;
}
}

@media only screen and (max-width:1024px) {

  
.sidebar .most-bx.box ul li a img {
  width: 40%;
}

.sidebar .most-bx.box ul li a h5 {
  font-size: 12px;
}

.sidebar .most-bx.box ul li a p {
  font-size: 14px;
}

.right-cont .listings .list .desc h3 {
  font-size: 20px;
}

.right-cont .listings .list .desc .summry p {
  font-size: 12px;
}

.right-cont .listings .list .image h4 {
  font-size: 10px;
}

.right-cont .slider .slide .desc {
  width: 45%;
  padding: 30px;
}

.right-cont .slider .slide .desc h3 {
  font-size: 28px;
}

body.blog-list section.innerbanner .innersec .right-sort {
  margin-top: 100px;
}

.sidebar .box ul li {
  font-size: 14px;
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.most-bx.box .view-btn a {
  font-size: 12px;
}


}


@media only screen and (max-width:768px) {
body.blog-list section.innerbanner .innersec .right-sort {display: none;}

section.blog-list {
  padding-top: 0;
}

section.blog-list .ctgry-bx.box {
  transform: translateY(-30px);
  padding: 20px;
  margin-bottom: 20px;
}

.ctgry-bx.box h3::after {content: "";width: 16px;height: 8px;background: url(../../img/blogs/chev-down-dark.png) no-repeat;position: absolute;right: 0;background-size: 100%;top: 7px;}

.sidebar .box.most-bx {
  width: 47%;
  display: inline-block;
  margin: 0 1% 30px;
}

.sidebar .box.most-bx:last-child {
  margin-right: 0;
  margin-left: 0;
}

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

.sidebar.hide-desktop {
display: block;
}

.ctgry-bx.hide-mobile {
display: none;
}

body.blog-list section.innerbanner h1 {
text-align: center;
padding-top: 40px;
}

body.blog-list section.innerbanner {
height: 240px;
}

.right-cont .slider .slide .desc {
width: 100%;
position: relative;
background: transparent;
padding: 0;
padding-top: 20px;
}

.right-cont .slider .slide .desc h3 {
color: #8B4513;
margin-bottom: 10px;
margin-top: 0;
}

.right-cont .slider .slide .desc .date {
color:#b83d0a;
font-size: 15px;
margin-bottom: 10px;
}

.right-cont .slider .slide .desc .date img {
filter: invert(0.7);
width: auto;
height: auto;
}

.right-cont .slider .slide img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.right-cont .slider .slide .desc p {
font-size: 15px;
color: #000;
font-weight: 400;
}

.sidebar .most-bx.box ul li a img {
width: 34%;
}

section.blog-list.detail-page .sidebar {
margin-top: 30px;
}
}


@media only screen and (max-width:500px) {

  .right-cont .listings {
    margin-top: 40px;
}
  
.right-cont .slider .slide .desc p br {
  display: none;
}

.right-cont .listings .list {
    max-width: 100%;
    margin: 0;
    /* margin-bottom: 40px; */
    background: transparent;
}

.sidebar .box.most-bx {
    width: 100%;
    display: none;
}

.sidebar .box.most-bx:last-child {
    display: block;
}
.right-cont .slider .slide {
  padding: 0 10px;
}
.sidebar .most-bx.box ul li a p {
  font-size: 18px;
}

.sidebar .most-bx.box ul li a img {
  width: 50%;
}

.right-cont .listings .list .image h4 {
    position: static;
    background: transparent;
    padding: 15px 0 10px;
    font-size: 12px;
    font-weight: 500;
    color:#b83d0a;
}

.right-cont .listings .list .desc {
    padding: 0;
}

.right-cont .listings .list .desc h3 {
    font-size: 22px;
}

.right-cont .listings .list .desc .summry p {
    font-size: 14px;
}

.right-cont .listings .know-btn {
  width: 70%;
  margin: auto;
  padding-top: 0 !important;
  padding-bottom: 50px;
}

.right-cont .listings .know-btn a {
  font-size: 16px;
}

.show-mobile{display: block;}

.head.show-mobile {
  text-align: center;
  margin-bottom: 20px;
  width: 100%;
}

.head.show-mobile h2 {
  color: #000;
  font-size: 34px;
}

.sidebar .most-bx.box:last-child ul li a::after {
  width: 25px;
  height: 25px;
}


section.blog-detail-top .head h3 {
  font-size: 34px;
  width:100%;
}

section.blog-detail-top .banner img {
  height: 300px;
  object-fit: cover;
}

section.blog-list.detail-page .ctgry-bx.box {
  margin-bottom: 0;
}

.detail-sec .desc p {
  margin-bottom: 10px;
  font-size: 15px;
}

.detail-sec .desc ul {
  margin-bottom: 30px;
}

.detail-sec .desc h4 {
  margin-top: 28px;
  font-size: 20px;
}

.detail-sec .bottom {
  display: block;
}

.comment-sec .comment {
  flex-direction: column;
}

.comment-sec .comment img {
  width: 80px;
}

.reply-sec .input {
  width: 100%;
  margin-bottom: 15px;
}

.reply-sec .button {flex-direction: column;margin-top: 10px;}

.reply-sec .button button {
  width: 60%;
  margin-bottom: 20px;
}

.reply-sec {
  padding-bottom: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

.reply-sec h3 {
  font-size: 28px;
}

.ayur-sec h3 {
  font-size: 28px;
}

.sidebar .box.form {
  width: 98%;
  margin: 0 AUTO;
}

.sidebar .most-bx.box.video-bx {
  display: block;
}

section.blog-list.detail-page {
  padding-top: 40px;
}

section.blog-detail-top ul {
  margin-bottom: 30px;
}

.comment-sec .head h3 {
  font-size: 32px;
}

.banner-blog img {
  height: 250px;
  object-fit: cover;
  object-position: center;
}

.right-cont .listings.video-listings .list {
  max-width: 100%;
  margin: 0;
  margin-bottom: 40px;
}


.right-cont .listings.video-listings .list .desc {
  padding-top: 10px;
}

.listings.video-listings .category .viewall {
  padding: 0;
  width: 100%;
  position: absolute;
  bottom: 0;
}

.listings.video-listings .category .viewall p {
  font-size: 12px;
  text-align: center;
  background:#c1440e;
  color: #fff;
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  border-radius: 30px;
}

.listings.video-listings .category .head h2 {padding: 0;font-size: 28px;}

.listings.video-listings .category .head {
  display: block;
  padding-bottom: 10px;
}

.listings.video-listings .category .viewall a:hover {
  color: #fff;
}

.listings.video-listings .category .viewall a:hover p {background: #8B4513;}

.listings.video-listings .category .viewall a:hover p {
  color: #fff;
}

div.category {
    position: relative;
    padding-bottom: 50px;
    text-align: center;
}

.right-cont .listings.video-listings .category .list h3 {
    font-size: 18px;
}

.right-cont .listings .slick-slider .slick-slide {
  padding-bottom: 0;
}

.bottom-banner-menu .bottom-bx {left: 2.5%;width: 95%;}

section.blog-detail-top ul li {
  width: 20%;
  margin: 0 2px;
  vertical-align: top;
  font-size: 12px;
}

section.blog-detail-top ul li img {
  display: block;
  margin: auto;
  margin-bottom: 5px;
}

.detail-sec .desc h2 {
font-size: 28px;
color: #171717;
}
.right-cont .listings .list:last-child {
  margin-bottom: 10px;
}

.top-sec .know-btn {
  margin-bottom: 40px;
}

.most-bx.box .view-btn {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 0px;
}

.most-bx.box .view-btn a {
  background: #8B4513;
  color: #fff;
  padding: 10px 30px;
  border-radius: 30px;
  font-weight: 100;
  display: inline-block;
}

.right-cont .listings .list .image h4:hover {
  color: black;
  background: transparent;
}

body.blog-list section.innerbanner {
  height: 140px;
}

body.blog-list section.innerbanner h1 {
  padding-top: 0;
  margin-top: 0;
  font-size: 35px;
  line-height: 1;
}

section.detail-page .listings .head h3 {
  margin-top: 0;
}

.reply-sec .input.message textarea {
  height: 100px;
}

.comment-sec .head {
  margin-bottom: 0;
}

.comment-sec p {
  margin-bottom: 20px;
}

}


/* ===================================================================
   Phase 0B — static blog rebuild (2026-07-12)
   Additive only. blog.css is loaded by /blog/ pages exclusively —
   verified: zero non-blog pages reference it — so nothing else can regress.
   =================================================================== */

.banner-blog.inner-banner { background:#8B4513; padding:48px 0 40px; color:#fff; }
.banner-blog.inner-banner h1 { color:#fff; font-size:34px; line-height:1.25; margin:14px 0 8px; }
.banner-blog.inner-banner .breadcrumbs { padding:0; margin:0; list-style:none; }
.banner-blog.inner-banner .breadcrumbs li { display:inline-block; font-size:13px; color:#E8DCD2; }
.banner-blog.inner-banner .breadcrumbs li + li:before { content:"/"; margin:0 8px; color:#8f5827; }
.banner-blog.inner-banner .breadcrumbs li a { color:#E8DCD2; }
.banner-blog.inner-banner .breadcrumbs li a:hover { color:#fff; }
.banner-blog.inner-banner .breadcrumbs li.active { color:#fff; }
.banner-blog.inner-banner p { color:#E8DCD2; margin:0; }
.banner-blog.inner-banner p.meta { font-size:14px; color:#8f5827; }

/* The Hub Connection Banner — the backlink that builds the topic cluster.
   Highest-value single element on an article page. */
.hub-connection { background:#F5F1EF; border-left:4px solid #8B4513; padding:14px 18px; margin:0 0 28px; border-radius:3px; }
.hub-connection p { margin:0; font-size:15px; color:#3B2A20; }
.hub-connection a { color:#8B4513; text-decoration:none; }
.hub-connection a:hover { text-decoration:underline; }

.detail-sec { padding:46px 0 60px; }
.detail-sec .desc h2 { font-size:26px; margin:30px 0 12px; color:#8B4513; }
.detail-sec .desc h3 { font-size:21px; margin:24px 0 10px; color:#3B2A20; }
.detail-sec .desc h4 { font-size:18px; margin:20px 0 8px; color:#3B2A20; }
.detail-sec .desc blockquote { border-left:3px solid #B8860B; margin:20px 0; padding:6px 0 6px 18px; color:#6B584C; font-style:italic; }
.detail-sec .desc code { background:#f2f5f3; padding:2px 5px; border-radius:3px; font-size:14px; }
.detail-sec .desc hr { border:0; border-top:1px solid #E6D9D0; margin:28px 0; }

/* wide tables must scroll inside their own box, never the page */
.table-wrap { overflow-x:auto; margin:22px 0; }
.table-wrap table { width:100%; border-collapse:collapse; font-size:15px; }
.table-wrap th, .table-wrap td { border:1px solid #E6D9D0; padding:9px 12px; text-align:left; vertical-align:top; }
.table-wrap th { background:#F5F1EF; color:#8B4513; }

.medical-disclaimer { background:#fbfaf5; border:1px solid #ece7d6; border-radius:3px; padding:14px 18px; margin:34px 0 0; }
.medical-disclaimer p { margin:0; font-size:13.5px; line-height:1.6; color:#6b6656; }

.related-hub { margin:34px 0 0; padding:22px 24px; background:#F5F1EF; border-radius:4px; }
.related-hub h3 { margin:0 0 12px; font-size:19px; color:#8B4513; }
.related-hub ul { margin:0; padding:0 0 0 18px; }
.related-hub ul li { margin-bottom:7px; }
.related-hub ul li a { color:#3B2A20; }
.related-hub ul li a:hover { color:#8B4513; }
.related-hub p.viewall { margin:14px 0 0; }
.related-hub p.viewall a { color:#8B4513; font-weight:600; }

.detail-sec .bottom { margin-top:30px; }
.detail-sec .sidebar .box { background:#F5F1EF; border-radius:4px; padding:20px 22px; margin-bottom:22px; }
.detail-sec .sidebar .box h3 { margin:0 0 12px; font-size:18px; }
.detail-sec .sidebar .box ul { margin:0; padding:0; list-style:none; }
.detail-sec .sidebar .box ul li { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #E6D9D0; font-size:15px; line-height:1.45; }
.detail-sec .sidebar .box ul li:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
.detail-sec .sidebar .box ul li a { color:#3B2A20; }
.detail-sec .sidebar .box ul li a:hover { color:#8B4513; }
.detail-sec .sidebar .ctgry-bx.box p { font-size:14px; color:#6B584C; }
.detail-sec .sidebar .know-btn { display:inline-block; margin-top:10px; background:#8B4513; color:#fff; padding:10px 18px; border-radius:3px; font-size:14px; }
.detail-sec .sidebar .know-btn:hover { background:#8B4513; color:#fff; text-decoration:none; }

.listings { padding:46px 0 60px; }
/* ⚠ CLASS-NAME COLLISION — DO NOT REMOVE THESE RESETS (fixed 2026-07-31).
   style.css uses `.bottom-bx` for the HOMEPAGE FLOATING CTA WIDGET:
       .bottom-bx{position:absolute;right:70px;bottom:70px;...}
   and, under @media(max-width:500px):
       .bottom-bx{position:FIXED;left:2.5%;width:95%;z-index:999;...}
   The blog listing cards reuse the same class name. Without these resets every card
   inherits that positioning, drops out of normal flow, and all of them stack at one
   absolute coordinate — on /blog/topic/* that put 51 cards on top of each other and
   over the <h1>, rendering the page unreadable at both desktop and mobile widths.
   `.listings .bottom-bx` (0,2,0) outranks `.bottom-bx` (0,1,0), so resetting here is
   enough; renaming the class would mean touching every listing template and page.
   display:flex is what makes `.know-btn{margin-top:auto}` below pin to the card bottom. */
.listings .bottom-bx { background:#fff; border:1px solid #E6D9D0; border-radius:4px; padding:22px; margin-bottom:26px; height:calc(100% - 26px);
  position:static; top:auto; right:auto; bottom:auto; left:auto; width:auto; z-index:auto; box-shadow:none;
  display:flex; flex-direction:column; }
.listings .bottom-bx .tag { display:inline-block; background:#EFE6E0; color:#8B4513; font-size:11.5px; letter-spacing:.4px; text-transform:uppercase; padding:3px 9px; border-radius:2px; margin-bottom:10px; }
.listings .bottom-bx h3 { font-size:18px; line-height:1.4; margin:0 0 10px; }
.listings .bottom-bx h3 a { color:#3B2A20; }
.listings .bottom-bx h3 a:hover { color:#8B4513; }
.listings .bottom-bx p { font-size:14.5px; color:#6B584C; line-height:1.6; }
.listings .bottom-bx p.meta { font-size:12.5px; color:#8f5827; }
.listings .bottom-bx .know-btn { display:inline-block; color:#8B4513; font-weight:600; font-size:14px; }
.listings .row { display:flex; flex-wrap:wrap; }

.pagination { text-align:center; margin-top:26px; }
.pagination a { display:inline-block; padding:9px 18px; margin:0 6px; background:#8B4513; color:#fff; border-radius:3px; font-size:14px; }
.pagination a:hover { background:#8B4513; color:#fff; text-decoration:none; }
.pagination span { display:inline-block; margin:0 10px; color:#6B584C; font-size:14px; }
.pagination .pg-nums { display:inline-flex; flex-wrap:wrap; justify-content:center; align-items:center; margin:0 6px; vertical-align:middle; }
.pagination .pg-nums a { padding:8px 13px; margin:4px 3px; }
.pagination .pg-current { display:inline-block; padding:8px 13px; margin:4px 3px; background:#FFF3E9; color:#8B4513; font-weight:700; border-radius:3px; }
.pagination .pg-ellipsis { display:inline-block; margin:4px 4px; color:#8f5827; }

@media (max-width:767px) {
  .banner-blog.inner-banner h1 { font-size:25px; }
  .detail-sec .sidebar { margin-top:34px; }
  .listings .row { display:block; }
  .listings .bottom-bx { height:auto; }
  .pagination .pg-nums { width:100%; margin:10px 0 0; }
}

/* ---- Phase 1: /success-stories/ ------------------------------------------------ */
/* Success stories reuse the article typography (.banner-blog / .detail-sec / .table-wrap)
   deliberately — they are long-form narrative pages and that CSS is already proven. Only
   the three components below are new. */

/* Editorial pull-out. NOT a blockquote and NOT rendered in quote marks — it is the site's
   summary of the case, not something the patient said. Genuine patient quotes are ordinary
   blockquotes inside the story body, sourced from the original post. */
.story-pull { border-left:4px solid #8B4513; background:#F5F1EF; margin:0 0 26px;
  padding:18px 22px; border-radius:3px; font-size:19px; line-height:1.5; font-weight:600;
  color:#3B2A20; }

.story-profile caption { caption-side:top; text-align:left; font-size:13px; letter-spacing:.06em;
  text-transform:uppercase; color:#8f5827; padding:0 0 8px; }
.story-profile th { width:38%; white-space:normal; font-weight:600; }
.story-profile td { color:#3B2A20; }

.story-consent { margin:26px 0 0; font-size:13.5px; line-height:1.6; color:#8f5827; }

@media (max-width:600px) {
  .story-pull { font-size:17px; }
  .story-profile th { width:44%; }
}

/* ---- blog card thumbnails (generated SVG hub marks) ---------------------------- */
/* The WordPress thumbnails died with the CMS. These are generated per hub (make_thumbs.js) —
   no stock photography on medical research. Decorative, so aria-hidden + empty alt: the card's
   heading already carries the link text and a screen reader should not hear it twice.
   The negative margin is -22px to exactly cancel .bottom-bx's 22px padding, and the radius is
   4px to match its border-radius — so the image sits flush in the card's top corners. */
.listings .bottom-bx { display: flex; flex-direction: column; }
.listings .bottom-bx .thumb { display: block; margin: -22px -22px 16px; border-radius: 4px 4px 0 0;
  overflow: hidden; background: #F5F1EF; line-height: 0; }
.listings .bottom-bx .thumb img { width: 100%; height: auto; display: block;
  transition: transform .35s ease; }
.listings .bottom-bx:hover .thumb img { transform: scale(1.03); }
.listings .bottom-bx .know-btn { margin-top: auto; }

@media (prefers-reduced-motion: reduce) {
  .listings .bottom-bx .thumb img { transition: none; }
  .listings .bottom-bx:hover .thumb img { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════════════════════════
   THE READING EXPERIENCE — 969 long-form medical articles. (Session 8, on mlk's UI/UX pass.)

   ⚠ THE SPACING HIERARCHY WAS INVERTED, and that is why the blog read as a wall of fragments.
       .desc p  { margin-bottom: 50px }      <- a FIFTY-PIXEL gap between every paragraph
       .desc h2 { margin-top:    30px }      <- but only THIRTY between sections
   Paragraphs were pushed further apart than the sections that contained them, so nothing grouped:
   an 1,800-word article became 40 floating slabs. Vertical rhythm is not decoration — it is what
   tells a reader "this belongs with that". And there was no line-height on 18px body copy (browser
   default ~1.2 is unreadable at that size) and no measure, so on a wide screen the line ran to
   140+ characters.

   Nothing could catch this: every class WAS styled. audit check 13 proves a rule EXISTS; it can
   never prove the rule is RIGHT. A stylesheet is verified by looking at it.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

.detail-sec .desc { max-width: 68ch; }        /* the measure. 68 characters is the readable line. */
.detail-sec .desc p {
  font-size: 18px; line-height: 1.78; color: #4A3B31;
  margin: 0 0 24px;                            /* was 50px */
}
.detail-sec .desc p:last-child { margin-bottom: 0; }
.detail-sec .desc h2 {
  font-family: 'Philosopher', Georgia, serif; font-size: 27px; line-height: 1.28;
  color: #8B4513; font-weight: 700;
  margin: 52px 0 14px;                         /* MORE than the paragraph gap — sections must group */
  padding-top: 8px; border-top: 1px solid #EFE5DD;
}
.detail-sec .desc h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.detail-sec .desc h3 {
  font-family: 'Philosopher', Georgia, serif; font-size: 21px; line-height: 1.35;
  color: #2A1B12; font-weight: 700; margin: 34px 0 10px;
}
.detail-sec .desc ul, .detail-sec .desc ol { margin: 0 0 24px; padding-left: 22px; }
.detail-sec .desc ul li, .detail-sec .desc ol li {
  font-size: 18px; line-height: 1.72; color: #4A3B31; font-weight: 400; margin: 0 0 9px;
}
.detail-sec .desc li strong, .detail-sec .desc p strong { color: #2A1B12; font-weight: 600; }
.detail-sec .desc blockquote {
  margin: 30px 0; padding: 18px 24px; border-left: 4px solid #B8860B;
  background: #F5F1EF; border-radius: 2px;
}
.detail-sec .desc blockquote p { margin: 0; font-size: 18px; color: #4A3B31; }
.detail-sec .desc .table-wrap { overflow-x: auto; margin: 30px 0; }
.detail-sec .desc table { width: 100%; border-collapse: collapse; font-size: 15.5px; min-width: 520px; }
.detail-sec .desc th, .detail-sec .desc td {
  border-bottom: 1px solid #E6D9D0; padding: 12px 14px; text-align: left;
  vertical-align: top; line-height: 1.6;
}
.detail-sec .desc thead th {
  border-bottom: 2px solid #B8860B; color: #2A1B12; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}

/* ---- ON THIS PAGE — a table of contents. -----------------------------------------------------
   These articles run to 1,200-1,800 words across 5-10 sections, on a medical topic, read by
   someone who is frightened and scanning for THEIR question. A long medical read without a
   contents list makes the reader do the indexing. Generated from the h2s by build_blog.js. */
.article-toc {
  margin: 0 0 40px; padding: 20px 24px; background: #F5F1EF;
  border-left: 3px solid #B8860B; border-radius: 2px;
}
.article-toc .toc-label {
  font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #B8860B;
  margin: 0 0 12px; padding: 0; border: 0;
}
.article-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.article-toc li { margin: 0 0 8px; padding: 0 0 0 26px; position: relative; line-height: 1.5; }
.article-toc li:last-child { margin-bottom: 0; }
.article-toc li::before {
  counter-increment: toc; content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: 'Philosopher', Georgia, serif; font-size: 13px; font-weight: 700; color:#8f5827;
}
.article-toc a { color: #4A3B31; text-decoration: none; font-size: 15.5px; }
.article-toc a:hover { color: #8B4513; text-decoration: underline; }

/* the anchored headings must not hide under the sticky sub-nav on hub-linked reads */
.detail-sec .desc h2[id] { scroll-margin-top: 80px; }

/* ---- the "back to all articles" link. `p.green` is a VESTIGIAL class name from the green era —
   it is styled NOWHERE (the only .green rules are `section.program-begins .box h4.green` in three
   disease stylesheets), so this link has been rendering as naked default-blue markup on 969 pages.
   Style it by its container, and leave the class name alone: it is on 981 pages and renaming it is
   a separate, mechanical change. */
.detail-sec .bottom { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid #E6D9D0; }
.detail-sec .bottom p.green a,
.detail-sec .bottom p a[href$="/blog"], .detail-sec .bottom p a[href$="blog"] {
  display: inline-block; color: #8B4513; font-weight: 600; font-size: 15px; text-decoration: none;
  border-bottom: 2px solid #B8860B; padding-bottom: 2px;
}
.detail-sec .bottom p.green a:hover { color:#b83d0a; border-bottom-color:#b83d0a; }

@media (max-width: 767px) {
  .detail-sec .desc { max-width: none; }
  .detail-sec .desc h2 { font-size: 23px; margin-top: 40px; }
  .detail-sec .desc h3 { font-size: 19px; }
  .detail-sec .desc p, .detail-sec .desc ul li, .detail-sec .desc ol li { font-size: 17px; }
}

/* ── Article-page sidebar: keep it with the reader (2026-07-30) ─────────────────
   These articles run 4,800–16,500px tall, but the sidebar column was only ~460px
   and position:static — so the reader scrolled ~16,000px beside a permanently
   empty 420px column. The column can't stick while its parent col is content-
   height (484px), so the row stretches its columns first, then the sidebar
   sticks. Desktop only (>=992px): below that Bootstrap stacks the columns and a
   sticky sidebar would sit between the article and its own content. */
@media (min-width: 992px) {
  .detail-sec > .container > .row { display: flex; flex-wrap: wrap; }
  .detail-sec > .container > .row > div[class*="col-"] { float: none; }
  .sidebar { position: sticky; top: 96px; }
}

/* ── Sticky-rail enrichment (2026-07-30) ────────────────────────────────────────
   The rail already stuck correctly (see the sticky note above) but held only two
   boxes — ~462px of content beside a ~900px viewport on articles that run 15,000px+.
   The TOC now renders twice: inline near the top for mobile (where the rail stacks
   BELOW the article and a contents list at the bottom is useless), and in the rail
   for desktop, where it stays with the reader for the whole scroll. Exactly one of
   the two is ever displayed, so there is no duplicate visible nav and the hidden
   copy is out of the accessibility tree. */
.toc-bx { display: none; }
@media (min-width: 992px) {
  .toc-bx { display: block; }
  .article-toc--inline { display: none; }
}
.toc-bx .article-toc { margin: 0; padding: 0; border: 0; background: none; }
.toc-bx .toc-label {
  font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: #8B4513; margin: 0 0 12px;
}
.toc-bx .article-toc ol { max-height: 300px; overflow-y: auto; margin: 0; padding-left: 20px; }
.toc-bx .article-toc li { margin: 0 0 7px; line-height: 1.45; }
.toc-bx .article-toc a { font-size: 14.5px; }

.sidebar .hub-bx.box p {
  font-size: 14.5px; line-height: 1.6; color: #4A3B31; margin: 0 0 14px;
}

/* ── Success-stories index: "Also documented" HS-cases block (2026-07-30) ──────
   Story-local classes on purpose. The hub design tokens live in hub.css, which
   verify_blog.js asserts is confined to hub pillar pages — so this block cannot
   reuse them. blog.css is already loaded on /success-stories/. */
.sx-also { padding: 74px 0 84px; background: #F5F1EF; }
.sx-kicker {
  display: inline-block; font-family: 'Roboto', sans-serif; font-size: 11.5px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: #B8860B;
  padding: 0 0 10px; margin: 0 0 14px; border-bottom: 2px solid #B8860B;
}
.sx-also h2 {
  font-family: 'Philosopher', Georgia, serif; font-size: 32px; line-height: 1.22; color: #2B1B10;
  font-weight: 700; margin: 0 0 14px; max-width: 30ch;
}
.sx-lead { font-size: 17px; line-height: 1.72; color: #4A3B31; max-width: 74ch; margin: 0 0 30px; }
.sx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sx-grid a {
  display: block; background: #fff; border: 1px solid #E6DED6; border-radius: 10px; padding: 15px 17px;
  font-family: 'Roboto', sans-serif; font-size: 14.5px; font-weight: 500; color: #2B1B10;
  line-height: 1.42; transition: .15s;
}
.sx-grid a:hover { border-color: #B8860B; background: #FBF7F3; }
.sx-grid a span {
  display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: #9C7B5C; margin-bottom: 5px;
}
.sx-note {
  margin: 34px 0 0; padding: 22px 26px; background: #FBF3E9;
  border-left: 4px solid #FA670F; border-radius: 0 10px 10px 0;
}
.sx-note p { font-size: 15.5px; line-height: 1.7; color: #4A3B31; margin: 0; }
.sx-note strong { color: #2B1B10; }
@media (max-width: 767px) {
  .sx-also { padding: 50px 0 56px; }
  .sx-also h2 { font-size: 25px; }
  .sx-lead { font-size: 16px; }
  .sx-grid { grid-template-columns: 1fr; }
}