.article-hero-section { height: 259px; width: 820px; margin: auto; background-color: #F9F9F9; color: #5E5E5E; padding-top: 80px; display: flex; gap: 24px; position: relative; overflow: hidden; }
.article-hero-section > div:first-child { z-index: 3; }
.article-hero-section h1 { font-size: 42px; z-index: 3; }
.article-hero-section .sub-text { font-size: 24px; z-index: 3; }
.article-hero-section .bread-crumb { display: flex; gap: 8px; padding-left: 3px; }
.article-hero-section .bread-crumb span { font-size: 12px; font-family: 'TransformaSansMedium'; color: #5E5E5E; opacity: 0.5; }
.article-hero-section .bread-crumb a { font-size: 12px; font-family: 'TransformaSansMedium'; color: #5E5E5E; opacity: 0.5; cursor: pointer; }


.article-content { width: 100%; display: flex; justify-content: center; gap: 52px; padding-top: 80px; padding-bottom: 80px; z-index: 5; position: relative; pointer-events: none; background-color: #ffffff; }
.article-text { width: 820px; padding-right: 277px; color: #545A60; display: flex; flex-direction: column; position: relative; pointer-events: none; }
.article-text .group { pointer-events: all; }
.article-text .group-last { margin-bottom: -80px; }
.article-text .group { display: flex; flex-direction: column; gap: 16px; padding-top: 30px; padding-bottom: 30px; position: relative; }
.article-text .group .id-pos { position: absolute; top: -100px; }
.article-text .group p { font-family: 'Metropolis'; line-height: 170%; }
.article-text .group b, .article-text .group strong { font-weight: unset !important; font-family: 'TransformaSansSemiBold';  }
.article-text .group h2 { line-height: 130%; font-size: 28px; margin-bottom: -8px; }
.article-text .group a { font-size: 16px; color: #2786FA; }
.article-text .group h3 { margin-bottom: -16px; margin-top: 16px; }
.article-text .group h4 { margin-bottom: -16px; }
.article-text .group .highlight{ background-color: #ddd; }
.article-text .coming-soon { color: #aaaaaa; cursor: default; }
.article-text .coming-soon:hover { text-decoration: none; }
.article-text img { max-width: 100%; }
.article-text video { max-width: 100%; }

.article-highlights-cont { width: 200px; position: absolute; right: 0; top: -50px; z-index: 1000; pointer-events: all; }
.article-highlights { width: 225px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; font-size: 14px; color: #545A60; font-family: 'Metropolis'; display: flex; flex-direction: column; gap: 12px; padding-top: 80px; pointer-events: all; background-color: rgba(255,255,255, 0.2); }
.article-highlights h4 { font-family: 'TransformaSansSemiBold'; }
.article-highlights > a { font-weight: 500; opacity: 0.5; color: inherit; }
.article-highlights .sub { padding-left: 20px; }


.article-content .date { position: absolute; top: -68px; left: 0; color: #5E5E5E; opacity: 0.5; font-size: 12px; font-family: 'TransformaSansMedium'; display: flex; gap: 24px; }

.article-gallery-cont { position: relative; height: 548px; width: 100vw; display: flex; align-items: center; justify-content: center; background-color: #F3F3F3; padding-top: 24px; padding-bottom: 24px; overflow-x: auto; overflow-y: visible; scrollbar-width: none; -ms-overflow-style: none; z-index: 0; }
.article-gallery-cont::-webkit-scrollbar { display: none; }
.article-gallery { position: absolute; left: 0; display: flex; gap: 24px; padding-left: 800px; padding-right: 800px; }
.article-gallery img { height: 500px; cursor: pointer; }

.mob-read-more { display: none; }

.interested { color: #5E5E5E; z-index: 600; display: flex; flex-direction: column; padding-top: 24px; width: 250px; }
.interested p { opacity: 1; margin-bottom: 6px; font-weight: 500; }
.interested a { color: #2786FA; }


#faq .question { display: flex; justify-content: space-between; align-items: center; height: fit-content; }
#faq .question h3 { margin: 0; }
#faq .divider { width: 100%; height: 1px; border-bottom: 2px solid #eeeeee; }
#faq .question img { cursor: pointer; }


@media (max-width: 991px) {

    .scroll-indicator { left: unset; transform: unset; }

}


@media (max-width: 820px) {

    .article-highlights-cont { display: none; }
    .article-highlights { display: none; }
    .article-hero-section { width: 100%; padding-left: 16px; padding-right: 16px; height: 320px; padding-top: 90px; }
    .article-hero-section h1 { font-size: 28px; }
    .article-hero-section .sub-text { font-size: 18px; }
    .scroll-indicator { right: 16px; }

    .article-content { padding-left: 16px; padding-right: 16px; padding-top: 40px; padding-bottom: 40px; }
    .article-text .group-last { margin-bottom: -20px; }
    .article-text { padding-right: unset; }
    .article-text h2 { line-height: 140%; font-size: 21px;  margin-bottom: -12px; }
    .article-text h3 { font-size: 16px; }

    .article-content .date { position: absolute; top: -28px; }
    
    .article-gallery-cont { height: 220px; padding-top: 20px; padding-bottom: 20px; margin-top: 0px; }
    .article-gallery { padding: 0; padding-left: 40px; padding-right: 40px; }
    .article-gallery img { height: 200px; }

    .sans-padding-top { padding-top: 20px; }
    .sans-padding-bottom { padding-bottom: 20px; }

    .article-text .group { padding-top: 12px; padding-bottom: 12px; }

    /* .article-text a { font-size: 13px; } */

    .interested { display: none !important; }


    .article-text .group .mob-collapse { display: none; }
    .mob-read-more { display: block; color: #545A60 !important; font-family: 'Metropolis'; font-size: 16px; width: fit-content; padding: 8px 12px; border: 1px solid #e5e5e5; text-decoration: underline; align-self: center; }

}