/** Shopify CDN: Minification failed

Line 509:2 Unexpected "{"
Line 510:2 Expected identifier but found "%"
Line 514:2 Expected identifier but found "%"

**/
.blog-content-list-for-mob#content_mob {
  display: none;
}

.container {
  margin: 0 5%;
}

/* Breadcrumb */
.breadcrumb-section {
  border-top: 2px solid #ff3ebf;
  /* pink top border */
  padding: 10px 0;
}

.breadcrumb-section .breadcrumb-list {
  list-style: none;
  /* remove default numbers */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  font-size: 15px;
  align-items: center;
}

.breadcrumb-section .breadcrumb-list li {
  color: #888;
  text-transform: capitalize;
  display: flex;
  align-items: center;
}

.breadcrumb-section .breadcrumb-list li:not(:last-child)::after {
  content: "›";
  color: #aaa;
  margin: 0 8px;
}

.breadcrumb-section .breadcrumb-list a {
  color: #888;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb-section .breadcrumb-list a:hover {
  color: #000;
}

.breadcrumb-section .breadcrumb-list .active {
  color: #000;
  font-weight: 600;
}

/* end Breadcrumb */

/* blog title section */
.blog-title-section {
  padding: 20px 0;
  /* Add some vertical space */
  text-align: center;
  /* Center all content */
  font-family: Arial, sans-serif;
  /* Use a common, clean font */
}

.blog-title-section .blog-title {
  /* Text from the image: "7 Benefits Of Moisturizers You Need To Know!" */
  font-family: 'poppins-SemiBold';
  font-size: 3rem;
  /* Large font size for the main title */
  font-weight: bold;
  /* Make the text bold */
  color: #FF40B1;
  /* The bright pink color seen in the image */
  margin-bottom: 10px;
  /* Space below the title */
  line-height: 1.2;
  /* Adjust line height for better readability if the title wraps */
}

.blog-title-section .blog-details {
  /* This container holds the author/date and read time */
  display: flex;
  /* Use flexbox to align the details horizontally */
  justify-content: center;
  /* Center the detail items */
  gap: 15px;
  /* Space between the two detail items (author/date and read time) */
  font-size: 1.5rem;
  /* Smaller font size for details */
  color: #555555;
  /* Dark gray color for the detail text */
  font-family: 'poppins-Medium';
}

/* Optional: Styling for the individual detail items (to match the slight gray color in the image) */
.blog-title-section .blog-details>div {}

.blog-title-section .blog-details>div:last-child::before {
  content: '◷';
  /* Unicode character for a timer/watch, or use an icon font/image */
  margin-right: 5px;
}

/* blog title section */

/* blog container */
/* --- Global Container and Layout --- */
.blog-container-section {
  padding: 40px 0;
  /* Add top/bottom padding */
  background-color: #ffffff;
  /* Assuming a white background for the whole section */
  font-family: Arial, sans-serif;
}

/* Center and potentially limit the width of the main content area */
.container {
  max-width: 1200px;
  /* Standard website content width */
  margin: 0 auto;
  /* Center the container */
  padding: 0 15px;
  /* Add some padding on the sides */
}


.blog-container-section .blog-container-main-block-content h2 {
  font-size: 2.3rem;
  font-family: 'poppins-SemiBold';
  color: #FF40B1;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.blog-container-section .blog-container-main-block-content h3 {
  font-size: 1.8rem;
  color: rgb(50, 50, 50);
  margin-top: 1rem;
  margin-bottom: 1rem;
  font-family: 'poppins-SemiBold';
}

.blog-container-section .blog-container-main-block-content p {
  font-size: 1.6rem;
  line-height: 2.5rem;
  color: #555;
  margin-bottom: 0rem;
  letter-spacing: 0.06rem;
  font-family: 'poppins-Regular' !important;
}

.blog-container-section .blog-container-main-block-content {
  margin-top: 3rem;
}

.blog-container-section .blog-container-main-block-content p {
  margin-bottom: 1rem !important;
}

.blog-container-section .blog-container-main-block-content ul {
  margin-bottom: 1rem !important;
}

.ol-list {
  list-style-type: decimal !important;
  /* force numbers */
  list-style-position: outside !important;
  padding-left: 2.5rem;
  margin: 0;
  list-style: decimal;
  font-weight: 400 !important;
}

.ol-list li {
  display: list-item !important;
  /* ensures marker shows */
  margin-bottom: 1rem;
  line-height: 1.5;
  color: #555 !important;
}

.ol-list li b {
  display: block;
  margin-bottom: 4px;
  color: black !important;
  font-family: poppins-Semibold !important;
}

/* --- Three-Column Grid Layout --- */
.blog-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  /* Space between the columns */
}

.article-template__content ul {
  list-style-type: disc;
  padding-left: 20px;
}

.article-template__content ul li {
  font-family: 'poppins-Regular' !important;
  color: #555;
}

/* --- Left Sidebar (Table of Contents) Styling --- */
.blog-container-left-sidebar {
  padding: 0;
  /* Adjust padding as needed */
  /* Styles for the "Contents" and link list */
  width: 25%;
}

.blog-content-list-for-mob {
  width: 100%;
}

/* Heading for the Contents (from image) */
/* .blog-content-list-for-web div:first-child {
      font-size: 1.2rem;
      font-weight: bold;
      color: #333; // Dark gray/black text 
      margin-bottom: 20px;
  } */

/* blog containt left sidebar */
.blog-content-list-for-web .contents-title {
  color: #FF40B1;
  /* Bright pink color from the image */
  font-size: 1.8rem;
  /* Similar font size to the image */
  font-weight: bold;
  margin-bottom: 25px;
  /* Space between "Contents" title and the list */
  padding-left: 10px;
  /* Aligns with the list items if they have padding */
}

.blog-content-list-for-mob .contents-title {
  color: #FF40B1;
  /* Bright pink color from the image */
  font-size: 1.8rem;
  /* Similar font size to the image */
  font-weight: bold;
  padding-left: 10px;
  /* Aligns with the list items if they have padding */
  margin-bottom: 15px;
}

.blog-content-list-for-web .contents-list,
.blog-content-list-for-mob .contents-list {
  list-style: none;
  /* Remove default bullet points */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
}

.blog-content-list-for-web .contents-item,
.blog-content-list-for-mob .contents-item {
  position: relative;
  /* For the pink bar on the active item */
  /* margin-bottom: 10px;  // Space between list items */
}

.blog-content-list-for-web .contents-item a,
.blog-content-list-for-mob .contents-item a {
  text-decoration: none;
  /* Remove underline from links */
  color: #555555;
  /* Dark gray for inactive links */
  font-size: 1.5rem;
  /* Font size for list items */
  display: block;
  /* Make the whole area clickable */
  padding: 5px 10px;
  /* Padding inside each link */
  line-height: 1.4;
  /* Improve readability */
  transition: color 0.2s ease-in-out;
  /* Smooth color transition on hover */
}

.blog-content-list-for-web .contents-item a:hover,
.blog-content-list-for-mob .contents-item a:hover {
  color: #333333;
  /* Slightly darker on hover */
}

/* Styling for the active item */
.blog-content-list-for-web .contents-item.active a,
.blog-content-list-for-mob .contents-item.active a {
  color: #333333;
  /* Darker text for the active item */
  font-weight: bold;
  /* Bold text for the active item */
}

.blog-content-list-for-web .contents-item.active::before,
.blog-content-list-for-mob .contents-item.active::before {
  content: '';
  /* Create the pink bar */
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  /* Make it span the height of the item */
  width: 3px;
  /* Width of the pink bar */
  background-color: #f70a7b;
  /* Bright pink color */
  /* border-radius: 2px; // Slightly rounded corners for the bar */
}

/* Add the right arrow icon (using a unicode character or a font icon) */
.blog-content-list-for-web .contents-item a::after,
.blog-content-list-for-mob .contents-item a::after {
  content: ' ›';
  /* Unicode right arrow, or use a more sophisticated icon solution */
  font-weight: bold;
  margin-left: 5px;
  float: right;
  /* Float to the right of the text */
  color: #999;
  /* Lighter color for the arrow */
}

.blog-content-list-for-web .contents-item.active a::after,
.blog-content-list-for-mob .contents-item.active a::after {
  color: #333333;
  /* Darker arrow for active item */
}

/* end blog containt left sidebar */

/* --- Main Block (Hero Image/Content) Styling --- */
.blog-container-main-block {
  /* The main content usually doesn't need specific background styling here,
        but the content *inside* (like the pink hero banner) does. */
  overflow: hidden;
  /* Important to ensure child elements (like the banner) don't overflow */
  width: 55%;
}

/* Styles for the Pink Hero Banner (Hypothetical element inside main block) */
.blog-container-main-block img {
  /* If the image is direct content */
  width: 100%;
  border-radius: 10px;
  /* Soft rounded corners on the banner */
}

/* --- Right Sidebar (Author Bio) Styling --- */
.blog-container-right-sidebar {
  padding: 0px 5px 0px 5px;
  /* Add internal padding */
  /* The white card structure around the author bio in the image */
  width: 20%;
}

/* Author Image Placeholder (Hypothetical element inside right sidebar) */

/*
  .blog-container-right-sidebar .author-image {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      margin: 0 auto 15px;
      object-fit: cover;
  }
  */

/* Author Block Styling */
.blog-container-right-sidebar .author-block {
  text-align: left;
  /* Center image and name */
  padding: 0 0 0 0;
  margin-bottom: 20px;
}

.blog-container-right-sidebar .author-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  /* Make the image circular */
  object-fit: cover;
  margin-bottom: 15px;
}

.blog-container-right-sidebar .author-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
  font-family: 'poppins-Medium';
}

.blog-container-right-sidebar .author-bio {
  font-size: 1.3rem;
  font-family: 'poppins-Medium' !important;
  color: #555;
  line-height: 2rem;
  text-align: left;
  /* Align bio text to the left */
  letter-spacing: 0.2px;
}

/* Best Seller Block Styling */
.blog-container-right-sidebar .best-seller-block {
  margin-top: 10rem;
}

.blog-container-right-sidebar .best-seller-title {
  font-size: 1.6rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.blog-container-right-sidebar .best-seller-product {
  width: 100%;
  height: 314px;
  overflow: hidden;
}

.blog-container-right-sidebar .best-seller-product img {
  object-fit: cover;
}

.blog-container-right-sidebar .product-image {
  width: 100%;
  /* Make the image fill the container width */
  height: auto;
  border-radius: 10px;
  /* Rounded corners on the product image */
  display: block;
}

.blog-content-list-for-web #content {
  background-color: transparent !important;
  padding: 0;
}

#content a.active {
  color: #000;
  border-left: 0px solid #ff40b1;
}

#content_mob a.active {
  color: #000;
  border-left: 0px solid #ff40b1;
}

#content a {
  font-family: 'poppins-Regular' !important;
  font-size: 1.3rem;
  line-height: 2rem;
  display: block;
  color: #727272;
  border-left: 3px solid #C8C8C8;
  padding-bottom: 1rem;
}


#content_mob a {
  font-family: 'poppins-Regular' !important;
  font-size: 15px;
  line-height: 35px;
  padding-left: 10px;
  display: block;
  color: #727272;
  border-left: 3px solid #C8C8C8;
}

#content_mob ul {
  list-style-type: none;
}

.blog-container .blog-content-list-for-web,
.blog-container .blog-content-list-for-mob {
  position: sticky;
  top: 125px;
  /* adjust as needed */
  align-self: flex-start;
  height: fit-content;
}

/* end blog container */

/* sticky best-seller-block */
.best-seller-block {
  position: sticky;
  top: 125px;
  /* adjust as needed */
}

  {
  % comment %
}

social {
  % endcomment %
}

.footer-social-web {
  margin-top: 20px;
}

.footer-social-web .heading {
  margin-bottom: 10px;
}

.footer-social-web .social-icons {
  gap: 8px;
}

.footer-section.footer-social-mob {
  display: none;
}

.footer-section .heading {
  font-family: 'poppins-Regular' !important;
  color: black;
  font-size: 1.6rem;
}

.get-faster {
  font-size: 2.3rem;
  color: #FF40B1 !important;
}

.more-reads-blog-section .parent-all-blog-post .card-image img {
  height: 100%;
}

.author-block-for-mob {
  display: none;
}

@media(max-width: 769px) {
  .blog-title-section .blog-title {
    font-size: 3rem;
    text-align: left;
    font-weight: 500;
  }

  .blog-title-section .blog-details {
    font-size: 1rem;
    font-family: 'poppins-Medium' !important;
  }

  .blog-container-left-sidebar .contents-title {
    font-size: 1.5rem;
  }

  #content a {
    font-size: 1rem;
  }

  .blog-container-section .blog-container-main-block-content h2 {
    font-size: 2.3rem;
    font-family: 'poppins-SemiBold';
  }

  .blog-container-section .blog-container-main-block-content p {
    font-size: 1.2rem;
    font-family: 'poppins-Regular' !important;
  }

  .blog-container-right-sidebar .author-image {
    width: 80px;
    height: 80px;
  }

  .blog-container-right-sidebar .author-name {
    font-size: 1.2rem;
  }

  .blog-container-right-sidebar .author-bio {
    font-size: 1rem;
  }

  .blog-container-right-sidebar .best-seller-title {
    font-size: 1.5rem;
  }

  .footer-social-web {
    padding: 5% 0px !important;
  }

  .footer-social-web .social-icons img {
    height: 38px;
  }

  /* hide social icon */
  .footer-social-web {
    display: none;
  }

  .footer-section.footer-social-mob {
    display: block;
    padding: 5% 0;
  }

  .footer-section.footer-social-mob .heading {
    margin-bottom: 10px;
  }

  .blog-content-list-for-mob .contents-title {
    font-family: 'poppins-Medium';
  }
}

@media(max-width: 426px) {
  .blog-container {
    flex-direction: column;
  }

  .blog-content-list-for-web #content {
    display: none;
    background-color: transparent;
  }

  .blog-container-main-block {
    width: 100%;
  }

  .blog-container-section .blog-container-main-block-content p {
    font-size: 1.4rem;
    font-family: 'poppins-Regular' !important;
  }

  .blog-container-section .blog-container-main-block-content h3 {
    font-size: 1.8rem;
    font-family: 'poppins-SemiBold';
  }

  .best-seller-block {
    display: none;
  }

  .blog-content-list-for-mob#content_mob {
    display: block;
    margin-top: 20px;
  }

  #content_mob a {
    font-size: 13px;
  }

  .blog-container-left-sidebar .contents-title {
    margin-bottom: 10px;
  }

  .blog-container-section.article-parent-div {
    padding: 0px !important;
  }

  .breadcrumb-section .breadcrumb-list {
    font-size: 11px;
  }

  .our-recommendations-section .get-faster {
    padding-left: 0px;
  }

  .our-recommendations-section .npdp-recom-prods {
    margin-top: 5px !important;
    padding-top: 0px !important;
  }

  .author-block-for-web {
    display: none;
  }

  .author-block-for-mob {
    display: block;
    width: 100%;
  }

  .author-block-for-mob .author-block {
    background-color: #F5F5F5 !important;
    padding: 10px 13px;
    border-radius: 14px;
    text-align: center;
  }

  .author-block-for-mob .author-block .author-image {
    margin: auto;
    width: 80px;
    height: 80px;
  }

  .author-block-for-mob .author-block .author-name {
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    font-family: 'poppins-Medium' !important;
  }

  .author-block-for-mob .author-block .author-bio {
    text-align: center;
    font-size: 13px;
    font-family: 'poppins-Medium' !important;
  }
}

@media(max-width: 361px) {}