/* Article Styles */

a {
  text-decoration: underline !important;
}

.article-description-container {
  padding:20px;
  border:1px solid grey;
  border-radius:8px
}

  .lu-life-content-container {
      max-width: 800px;
      margin:0 auto;
      margin-bottom: 24px;
      cursor: pointer;
  }
  .lu-life-content-image {
      width: 172px;
      margin-right: 20px;
      padding-top:4px;
      float: left;
      position: relative;
  }
  .lu-life-content-description {
    width: calc(100% - 192px);
    float: left;
  }
  .lu-life-content-name {
    font-size: 24px;
  }
  .lu-life-overlay-icon {
    width: 38px;
  }
  @media screen and (max-width:520px) {
    .lu-life-content-image {
        width: 72px;
        margin-right: 10px;
    }
    .lu-life-content-description {
        width: calc(100% - 92px);
    }
    .lu-life-content-name {
        font-size: 20px;
    }
    .lu-life-overlay-icon {
        width: 30px;
    }
  }

    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    /* Featured Image Container (full width of view) */
    .custom-featured-image-container {
        position: relative;
        width: 100%;
        height: 350px;
        overflow: hidden;
    }

    .custom-featured-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(50%); /* Darkens the image */
    }

    /* Text overlay on the image */
    .custom-featured-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
        padding: 0 20px;
        width: 100%; /* Spread text across the image */
    }

    /* H1 Title with more spread width */
    .custom-featured-title {
        font-size: 32px;
        color: white;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.2; /* Adjust line height for better spread */
        width: 100%;
    }

    /* Author Info */
    .custom-author-section {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .custom-author-image {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
    }

    .custom-author-name {
        font-size: 16px;
    }

    /* Main content wrapper to limit width */
    .content-wrapper {
        max-width: 820px; /* Limiting width for the rest of the content */
        margin: 0 auto;
        padding: 20px;
    }

    /* Key Summary Styles */
    .summary-container {
        position: relative;
        padding: 20px;
        width: fit-content;
        border-radius: 5px;
    }

    .key-summary-header {
        font-size: 12px;
        color: gray;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    .summary-content {
        position: relative;
        padding: 10px;
        font-size: 16px;
        color: black;
        background-color: #f9f9f9;
        display: inline-block;
    }

    /* Darker blue corner borders */
    .summary-content::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: -3px;
        left: -10px;
        border-left: 2px solid #1e90ff;
        border-top: 2px solid #1e90ff;
        transition: 1s;
    }

    .summary-content::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        top: -3px;
        right: -10px;
        border-right: 2px solid #1e90ff;
        border-top: 2px solid #1e90ff;
        transition: 1s;
    }

    .summary-content span::after {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        bottom: -3px;
        right: -10px;
        border-right: 2px solid #1e90ff;
        border-bottom: 2px solid #1e90ff;
        transition: 1s;
    }

    .summary-content span::before {
        content: "";
        position: absolute;
        width: 8px;
        height: 8px;
        bottom: -3px;
        left: -10px;
        border-left: 2px solid #1e90ff;
        border-bottom: 2px solid #1e90ff;
        transition: 1s;
    }

    /* Hover effect */
    .summary-content:hover::after,
    .summary-content:hover::before,
    .summary-content:hover span::after,
    .summary-content:hover span::before {
        width: calc(50% + 8px);
        height: calc(50% + 1px);
    }

    /* Article styling to limit viewport width */
    .article-content {
        max-width: 820px;
        margin: 0 auto;
        padding: 20px;
        font-size: 14px;
        line-height: 1.6;
    }

    .article-content h3 {
        font-size: 16pt;
    }

    .article-content p {
        font-size: 11pt;
    }

    .bio-container {
       display: flex;
       align-items: center;
       justify-content: flex-start;
       max-width: 700px; /* Limit the width */
       margin: 0 auto 20px; /* Center the container */
       border-top: 1px solid #5d7963;
       padding: 15px 15px 20px;
   }

   .bio-image {
       width: 120px;
       height: 120px;
       border-radius: 50%;
       object-fit: cover;
       margin-right: 20px;
   }

   .bio-text {
       font-size: 14px;
       max-width: 550px;
   }

   .bio-name {
       margin: 0;
       font-weight: bold;
       text-align: left;
   }

   .bio-role {
       margin: 4px 0 10px;
       font-size: smaller;
       text-align: left;
       color: #5d7963;
   }

   .bio-description {
       text-align: left;
   }

   .bio-link {
       font-size: smaller;
       text-decoration: none;
       color: #000;
       margin-bottom: 20px; /* Added margin for space below the link */
       display: inline-block; /* To ensure margin works properly */
   }

   @media (max-width: 768px) {
       .bio-container {
           flex-direction: column;
           text-align: center;
           align-items: center;
           padding: 15px 15px 40px;
       }

       .bio-image {
           margin-right: 0;
           margin-bottom: 10px;
       }

       .bio-text {
           text-align: center; /* Text is centered on mobile */
       }

       .bio-name, .bio-role, .bio-description {
           text-align: center; /* Ensure all text content is centered */
       }
   }

  .blockquote-container {
    width: 90%;
    max-width: 800px;
    margin: 40px auto;
    position: relative;
    padding: 40px;
    background-color: transparent;
    border-radius: 16px;
    border: 3px solid #89CFF0; /* Changed to baby blue */
  }

  .blockquote-container p {
    font-size: calc(16px + 0.25vw);
  }

  .blockquote-container cite {
    font-size: calc(14px + 0.25vw);
  }

  .blockquote-container::before {
    content: url("data:image/svg+xml,%3Csvg class='quote-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.56863 4H4.43137C2.56863 4 1 5.6 1 7.5V10.8C1 12.7 2.56863 14.3 4.43137 14.3H6.78431C7.56863 14.3 8.35294 14 9.03922 13.6V15.7C9.03922 17 8.05882 18 6.78431 18H5.21569C4.62745 18 4.23529 18.4 4.23529 19C4.23529 19.6 4.62745 20 5.21569 20H6.78431C9.13725 20 11 18.1 11 15.7V10V7.5C11 5.6 9.43137 4 7.56863 4Z'%3E%3C/path%3E%3Cpath d='M19.6638 4H16.4299C14.5679 4 13 5.6 13 7.5V10.8C13 12.7 14.5679 14.3 16.4299 14.3H18.7818C19.5658 14.3 20.3497 14 21.0357 13.6V15.7C21.0357 17 20.0557 18 18.7818 18H17.2138C16.6259 18 16.2339 18.4 16.2339 19C16.2339 19.6 16.6259 20 17.2138 20H18.7818C21.1337 20 22.9956 18.1 22.9956 15.7V10V7.5C23.0936 5.6 21.5257 4 19.6638 4Z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    top: -10px;
    left: -10px;
    transform: scale(2);
    opacity: 0.1;
  }

  .blockquote-container::after {
    content: url("data:image/svg+xml,%3Csvg class='quote-svg' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.56863 4H4.43137C2.56863 4 1 5.6 1 7.5V10.8C1 12.7 2.56863 14.3 4.43137 14.3H6.78431C7.56863 14.3 8.35294 14 9.03922 13.6V15.7C9.03922 17 8.05882 18 6.78431 18H5.21569C4.62745 18 4.23529 18.4 4.23529 19C4.23529 19.6 4.62745 20 5.21569 20H6.78431C9.13725 20 11 18.1 11 15.7V10V7.5C11 5.6 9.43137 4 7.56863 4Z'%3E%3C/path%3E%3Cpath d='M19.6638 4H16.4299C14.5679 4 13 5.6 13 7.5V10.8C13 12.7 14.5679 14.3 16.4299 14.3H18.7818C19.5658 14.3 20.3497 14 21.0357 13.6V15.7C21.0357 17 20.0557 18 18.7818 18H17.2138C16.6259 18 16.2339 18.4 16.2339 19C16.2339 19.6 16.6259 20 17.2138 20H18.7818C21.1337 20 22.9956 18.1 22.9956 15.7V10V7.5C23.0936 5.6 21.5257 4 19.6638 4Z'%3E%3C/path%3E%3C/svg%3E");
    position: absolute;
    bottom: -10px;
    right: -10px;
    transform: scale(2) rotate(180deg);
    opacity: 0.1;
  }
  
  @media (max-width: 768px) {
    .blockquote-container {
      padding: 20px;
    }

    .blockquote-container p {
      font-size: calc(14px + 0.5vw); /* Smaller font for smaller screens */
    }

    .blockquote-container cite {
      font-size: calc(12px + 0.5vw); /* Adjust cite font size for smaller screens */
    }

    .blockquote-container::before,
    .blockquote-container::after {
      transform: scale(1.5); /* Reduce the size of quote SVGs on smaller screens */
    }
  }

  @media (max-width: 480px) {
    .blockquote-container {
      padding: 15px;
    }

    .blockquote-container p {
      font-size: 14px;
    }

    .blockquote-container cite {
      font-size: 12px;
    }

    .blockquote-container::before,
    .blockquote-container::after {
      transform: scale(1.2); /* Further reduce quote SVG size for very small screens */
    }
  }

.article-cta-container {
    background-color: #38b6ff;
    border-radius: 8px;
    padding: 24px;
}
.article-cta-heading {
    font-size: 20px;
    font-weight: bold;
    text-align: left;
    color: #231F20;
}
.article-cta-content {
    margin-top: 16px;
    padding: 10px;
    display:flex;
    justify-content: space-between;
}
.article-cta-content-logo {
    display:flex
}
.article-cta-button {
    background-color: hsl(202,100%,31%);
    padding: 6px 16px;
    font-size: 16px;
}
.article-cta-text {
    font-size: 18px;
    font-weight: 500;
    color: #FFFFFF;
}
.article-cta-text-md {
    font-size: 13px;
    color: #FFFFFF;
}
.article-cta-text-sm {
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
}

@media (max-width: 480px) {
    .article-cta-content {
        display: block;
    }
    .article-cta-content-logo {
        max-width: 320px;
        margin:0 auto;
    }
    .article-cta-button {
        display: block;
        margin:0 auto;
        margin-top: 16px;
    }
}

.levelup-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.levelup-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  background: #000;
  border-radius: 1rem;
  padding: 32px;
  color: #fff;
  z-index: 1;
  box-shadow: 6px 28px 46px -6px #000;
}

.levelup-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, #89CFF0, #000000 40%);
  z-index: -2;
}

.levelup-card::after {
  content: '';
  position: absolute;
  left: 1px;
  top: 1px;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border-radius: 1rem;
  background: linear-gradient(90deg, #171721, #060609);
  z-index: -1;
}

.levelup-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* prevent children stretching */
}

.levelup-subtitle {
  color: #89CFF0;
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
}

.levelup-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 16px;
  max-width: 400px;
}

.levelup-cta {
  display: inline-block;
  padding: 12px 12px;
  background: #89CFF0;
  border: none;
  border-radius: 12px;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.3s ease;
  align-self: flex-start; /* ensure button fits content */
  text-decoration: none;
}

.levelup-cta:hover {
  background: #0077b6;
}

.levelup-image {
  position: relative;
  z-index: 0;
  width: 86px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.levelup-image::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(110deg, #89CFF0 10%, #000000);
  z-index: -2;
}

.levelup-image::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  background: linear-gradient(90deg, #12121a, #030303);
  box-shadow: inset 6px 6px 14px #89CFF050;
  z-index: -1;
}

.levelup-image img {
  width: 50px;
  height: auto;
  display: block;
}
@media (max-width: 768px) {
  .levelup-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px;
  }

  .levelup-info {
    align-items: center;
  }

  .levelup-title {
    font-size: 16px;
    max-width: 100%;
  }

  .levelup-cta {
    font-size: 12px;
    padding: 10px 12px;
    align-self: center;
  }

  .mobile-hide {
    display: none;
  }
}