/** Shopify CDN: Minification failed

Line 155:59 Unexpected "{"
Line 155:66 Expected ":"
Line 155:91 Unexpected ","

**/
/* ----------------------------------------------------
   Blog Article Styles – Clean and Optimized
---------------------------------------------------- */

/* Hero Image Container */
.article-template__hero-container {
  background-color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  max-width: 130rem;
  margin: 0 auto 30px auto !important;
}

.article-template__hero-container img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Hero Heights */
.article-template__hero-small { height: 11rem; }
.article-template__hero-medium { height: 22rem; }
.article-template__hero-large { height: 33rem; }

@media screen and (min-width: 750px) and (max-width: 989px) {
  .article-template__hero-small { height: 22rem; }
  .article-template__hero-medium { height: 44rem; }
  .article-template__hero-large { height: 66rem; }
}

@media screen and (min-width: 990px) {
  .article-template__hero-small { height: 27.5rem; }
  .article-template__hero-medium { height: 55rem; }
  .article-template__hero-large { height: 82.5rem; }
}

/* Title Styling */
.article-template__title {
  margin: 0 0 20px 0 !important;
  font-size: 40px !important;
}

@media (max-width: 768px) {
  .article-template__title {
    font-size: 28px !important;
  }
}

/* Content Styling */
.article-template__content {
  font-size: 18px !important;
  line-height: 1.8 !important;
  max-width: 85% !important;
  margin: 0 auto !important;
}

@media (max-width: 768px) {
  .article-template__content {
    font-size: 16px !important;
    padding: 10px !important;
  }
}

/* Header Margins */
.article-template header {
  margin-top: 5rem;
  margin-bottom: 2rem;
  line-height: calc(0.8 / var(--font-body-scale));
}

/* Social & Comment Spacing */
.article-template__social-sharing {
  margin-top: 3rem !important;
}

.article-template__social-sharing + header,
.article-template__social-sharing + .article-template__content {
  margin-top: 1.5rem;
}

.article-template__comment-wrapper {
  margin-top: 4rem !important;
  padding: 2.7rem 0;
}

.article-template__comments {
  margin-bottom: 4rem !important;
}

.article-template__comments-fields {
  margin-bottom: 3rem !important;
}

@media screen and (min-width: 750px) {
  .article-template__comment-wrapper {
    margin-top: 6rem;
    padding: 3.6rem 0;
  }

  .article-template__comments {
    margin-bottom: 7rem;
  }

  .article-template__comments-comment {
    padding: 2rem 2.5rem;
  }

  .article-template__comment-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 4rem;
  }
}

.article-template__comments-comment {
  color: rgba(var(--color-foreground), 0.75);
  background-color: rgb(var(--color-background));
  margin-bottom: 1.5rem;
  padding: 2rem 2rem 1.5rem;
}

.article-template__comments-comment p {
  margin: 0 0 1rem;
}

/* Navigation Link Back to Blog */
.article-template__back:last-child {
  margin-bottom: 3.2rem;
}
.article-template__hero-container {
  border-bottom: 1px solid #eee !important;
}
@media (max-width: 768px) {
  .article-template__title {
    text-transform: uppercase;
  }
}
.article-template__content p {
  margin-bottom: 1.6em;
}
.article-template__content p:first-of-type {
  font-weight: 500;
  font-size: 1.1em;
}
/* Force the background color to white on all parent containers */
.article-template__hero-container,
.article-template__hero-container .article-template__hero-{{ block.settings.image_height }},
.article-template__hero-container img {
  background-color: #ffffff !important; /* Set the background to white */
  border: none !important; /* Remove any borders */
  box-shadow: none !important; /* Remove any shadows */
}

/* Ensure the image inside the container is responsive */
.article-template__hero-container img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
}
/* Force image to scale while maintaining aspect ratio */
.article-template__hero-container {
  position: relative;
  overflow: hidden; /* Prevents overflow of image */
}

.article-template__hero-container img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Ensures the image covers the space but keeps its aspect ratio */
}

/* Optional: On desktop, ensure hero image covers the entire container */
@media (min-width: 990px) {
  .article-template__hero-container img {
    object-position: center center; /* Ensures the image is centered if the aspect ratio doesn't match */
  }
}

/* Optional: For mobile, adjust the container height to keep proportions */
@media (max-width: 768px) {
  .article-template__hero-container {
    height: auto; /* Let the container adjust to image size */
  }
  .article-template__hero-container img {
    object-fit: contain; /* Ensures the image fits nicely inside the container */
  }
}
/* Ensure hero image scales properly on desktop */
@media (min-width: 990px) {
  .article-template__hero-container {
    width: 100% !important; /* Ensure full width on desktop */
    height: 50vw; /* Ensure it takes up a good amount of space */
    max-height: 40rem; /* You can adjust max height to your preference */
  }

  .article-template__hero-container img {
    object-fit: cover; /* Cover the space with the image */
    object-position: center; /* Ensure image is centered */
    width: 100%;
    height: 100%;
  }
}
/* Increase font size and spacing for desktop */
@media (min-width: 990px) {
  .article-template__content {
    font-size: 20px !important; /* Larger text for desktop */
    line-height: 1.8 !important; /* Improved readability */
    max-width: 85% !important; /* Allow the content to fill the space better */
    margin: 0 auto !important; /* Center content */
  }

  .article-template__title {
    font-size: 48px !important; /* Increase title size */
    margin-bottom: 30px !important; /* Add spacing between title and content */
  }
}
/* Adjust margins and padding for better desktop layout */
@media (min-width: 990px) {
  .article-template__hero-container {
    margin-bottom: 40px !important; /* Add space below image */
  }

  .article-template__content {
    margin-top: 40px !important; /* Add space above content */
    padding: 0 20px !important; /* Add padding for better spacing */
  }

  .article-template__title {
    margin-bottom: 40px !important; /* Ensure proper space under title */
  }
}
/* Ensure the image scales properly across all screen sizes */
.article-template__hero-container img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important; /* Ensure image covers the container */
  margin: 0 auto !important;
}
.article-template__hero-container img {
  object-position: center center !important; /* Ensure the image is centered */
}
/* Increase spacing between sections on desktop */
.article-template__title {
  margin-bottom: 30px !important; /* Space between title and content */
}

.article-template__content {
  margin-top: 40px !important; /* Space between image and content */
  padding: 0 20px !important; /* Padding to prevent content from being too tight */
}
/* Increase font size for the article content on desktop */
@media (min-width: 990px) {
  .article-template__content {
    font-size: 22px !important; /* Increase body text size */
    line-height: 1.8 !important; /* Ensure readability */
  }

  /* Increase title font size for desktop */
  .article-template__title {
    font-size: 56px !important; /* Larger title on desktop */
    margin-bottom: 30px !important; /* Add spacing below the title */
  }
}
/* Shrink the width of the article on desktop */
@media (min-width: 990px) {
  .article-template__content {
    max-width: 80% !important; /* Shrink content to 80% of the available space */
    margin: 0 auto !important; /* Center the content */
  }

  .article-template__hero-container {
    max-width: 80% !important; /* Shrink the hero image container */
    margin: 0 auto !important; /* Center the image */
  }
}
/* Ensure the image loads and scales properly */
.article-template__hero-container {
  width: 100% !important; /* Ensure full width on desktop */
  height: auto !important; /* Let the height adjust automatically */
  max-height: 40rem; /* Set a max height */
  overflow: hidden; /* Hide any overflow */
  margin: 0 auto !important; /* Center the container */
}

.article-template__hero-container img {
  width: 100% !important; /* Full width */
  height: auto !important; /* Keep the aspect ratio */
  object-fit: cover !important; /* Cover the space but maintain aspect ratio */
  display: block !important;
  margin: 0 auto !important; /* Center the image */
}
/* Force the image container to load and scale properly */
.article-template__hero-container {
  width: 100% !important; /* Ensure full width of the container */
  height: auto !important; /* Let the height adjust automatically */
  max-height: 45rem; /* Optional: Set a max height for large images */
  overflow: hidden; /* Hide anything that exceeds the container */
  margin: 0 auto !important; /* Center the image container */
}

.article-template__hero-container img {
  width: 100% !important; /* Ensure the image stretches to full width */
  height: auto !important; /* Maintain aspect ratio */
  object-fit: cover !important; /* Ensure image covers the area, cropping if needed */
  display: block !important;
  margin: 0 auto !important; /* Center the image */
}
/* Shrink the width of the article on desktop */
@media (min-width: 990px) {
  .article-template__content {
    max-width: 80% !important; /* Shrink the article content to 80% of the available space */
    margin: 0 auto !important; /* Center the content */
  }

  .article-template__hero-container {
    max-width: 80% !important; /* Shrink the hero image container */
    margin: 0 auto !important; /* Center the image */
  }
}
/* Ensure the image container fills the space properly on desktop */
@media (min-width: 990px) {
  .article-template__hero-container {
    width: 100% !important;  /* Ensure full width */
    height: auto !important; /* Let the height adjust based on image aspect ratio */
    max-height: 45rem; /* Limit the max height to prevent overflow */
    overflow: hidden; /* Hide anything that exceeds the container */
    margin: 0 auto !important; /* Center the container */
  }

  .article-template__hero-container img {
    width: 100% !important; /* Make the image fill the container */
    height: auto !important; /* Preserve aspect ratio */
    object-fit: cover !important; /* Ensure the image covers the container while maintaining its aspect ratio */
    object-position: center center !important; /* Center the image if it's cropped */
    display: block !important;
    margin: 0 auto !important; /* Center the image */
  }
}
/* Shrink the article content width on desktop */
@media (min-width: 990px) {
  .article-template__content {
    max-width: 80% !important; /* Shrink content to 80% of the screen width */
    margin: 0 auto !important; /* Center the content */
  }

  .article-template__hero-container {
    max-width: 80% !important; /* Shrink the hero image container */
    margin: 0 auto !important; /* Center the image */
  }
}