/* =========================================
       COMMON CSS FOR ALL SECTIONS
       ========================================= */
 .container {
     max-width: 1600px;
     margin: 0 auto;
     padding: 0 60px;
 }

 @media (max-width: 1200px) {
     .container {
         padding: 0 40px;
     }
 }

 @media (max-width: 768px) {
     .container {
         padding: 0 20px;
     }
 }

 /* =========================================
       COMMON CSS FOR ALL SECTIONS
       ========================================= */
 /* =========================================
       SECTION 1: HERO CSS (100% MATCH & ULTRA FAST)
       ========================================= */
 .custom-hero {
     position: relative;
     width: 100%;
     min-height: 100vh;
     display: flex;
     align-items: center;
     padding: 150px 0 200px 0;

     background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0) 100%);
 }

 @media(min-width:1440px) {
     .custom-hero {
         padding: 200px 0;
     }
 }

 .custom-hero {
     position: relative;
     overflow: hidden;
     isolation: isolate;
 }

 /* Video wrapper */
 .custom-hero__video {
     position: absolute;
     inset: 0;
     z-index: -2;
 }

 /* Video */
 .custom-hero__video video {
     width: 100%;
     height: 100%;
     display: block;
     object-fit: cover;
     object-position: center;
 }

 /* Mobile video hidden by default */
 .custom-hero__video--mobile {
     display: none;
 }

 /* Overlay */
 .custom-hero__overlay {
     position: absolute;
     inset: 0;
     z-index: -1;

     background: linear-gradient(90deg,
             rgba(0, 0, 0, 0.2) 0%,
             rgba(0, 0, 0, 0.21) 45%,
             rgba(0, 0, 0, 0) 100%);
 }

 /* Content */
 .custom-hero__content {
     position: relative;
     z-index: 1;
 }


 /* =========================
   MOBILE
========================= */

 @media (max-width: 767px) {

     .custom-hero__video--desktop {
         display: none;
     }

     .custom-hero__video--mobile {
         display: block;
     }

     .custom-hero {
         min-height: 650px;
     }

     .custom-hero__video video {
         object-position: center;
     }

 }

 /* /banner video */

 .custom-hero-content {
     position: relative;
     z-index: 2;
     width: 100%;
 }

 .custom-hero-content * {
     color: var(--e-global-color-2c3d629) !important;
 }

 .custom-tagline {
     font-size: 13px;
     font-weight: 600;
     letter-spacing: 1.2px;
     text-transform: uppercase;
     margin-bottom: 35px;
     display: flex;
     align-items: center;
     gap: 8px;
     position: relative;
 }

 .custom-tagline::after {
     position: absolute;
     content: '';
     left: 7px;
     top: 2px;
     display: none;
     width: 16px;
     height: 16px;
     border-radius: 50px;
     display: inline-block;
     border: 3px solid rgb(40 22 56);
 }

 .custom-tagline::before {
     position: absolute;
     content: '';
     left: 0px;
     top: 2px;
     width: 16px;
     height: 16px;
     border-radius: 50px;
     display: inline-block;
     background-color: #d8cce1;
 }

 .custom-tagline.center {
     margin: 0 auto 12px;
     width: fit-content;
 }

 .custom-tagline {
     padding-left: 29px;
 }

 .custom-heading {
     font-size: clamp(3.5rem, 6vw, 6rem);
     line-height: 1.05;
     margin-bottom: 20px;
     font-weight: 300;
     letter-spacing: -1px;
 }

 .custom-heading strong {
     font-weight: 800;
 }

 .custom-desc {
     font-size: 18px;
     line-height: 1.4;
     max-width: 600px;
     margin-bottom: 40px;
 }

 .custom-hero .custom-desc {
     margin-bottom: 20px;
 }

 .custom-btn {
     background: linear-gradient(180deg, #73176E 0%, #73176E 100%) !important;
     padding: 15px 22px;
     height: 48px;
     border-radius: 60px;
     font-weight: 500;
     font-size: 16px;
     text-decoration: none;
     display: inline-block;
     transition: 0.3s;
     border: none;
     text-transform: lowercase;

     line-height: 1;
 }

 .custom-btn:hover {
     background: linear-gradient(180deg, #73176E 0%, #73176E 100%) !important;
 }

 .community-box {
     display: flex;
     align-items: center;
     gap: 15px;
 }

 body.page-template .community-img {
     height: 80px !important;
     width: auto;
 }

 .community-text {
     font-size: 13px;
     line-height: 1.3;
 }

 .stats-block {
     display: flex;
     align-items: center;
     gap: 20px;
     margin-top: 20px;
 }

 .stats-number {
     font-size: 70px;
     font-weight: 600;
     line-height: 1;
     margin: 0;
 }

 .stats-text {
     font-size: 14px;
     max-width: 300px;
     line-height: 1.3;
     margin: 0;
 }

 /* =========================================
       ANIMATED PLAY BUTTON CSS (HERO SECTION)
       ========================================= */
 .play-btn {
     position: relative;
     width: 65px;
     height: 65px;
     background-color: #fff !important;
     border: 2px solid var(--e-global-color-2c3d629);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     text-decoration: none;
     margin-left: auto;
     transition: all 0.3s ease;
     z-index: 10;
     cursor: pointer;
 }

 .play-btn:hover {
     background-color: var(--e-global-color-primary) !important;

 }

 .play-btn svg {
     width: 18px;
     height: 18px;
     fill: var(--e-global-color-84712b3) !important;
     margin-left: 3px;
     transition: fill 0.3s ease;
     position: relative;
     z-index: 2;
 }

 .play-btn:hover svg {
     fill: var(--e-global-color-2c3d629) !important;

 }

 .play-btn {
     position: relative;
     z-index: 1;
 }

 .play-btn::before,
 .play-btn::after {
     content: "";
     position: absolute;
     width: calc(100% + 30px);
     height: calc(100% + 30px);
     left: -15px;
     top: -15px;
     border: 1px solid #fff;
     border-radius: 50%;
     opacity: 0;
     pointer-events: none;
     animation: borderanimation 1.5s linear infinite;
 }

 .play-btn::after {
     animation-delay: 0.4s;
 }

 @keyframes borderanimation {
     0% {
         transform: scale(0.4);
         opacity: 0;
     }

     50% {
         opacity: 1;
     }

     100% {
         transform: scale(1.3);
         opacity: 0;
     }
 }

 /* =========================================
       VIDEO MODAL POPUP CSS (SQUARE 400x400)
       ========================================= */
 .modal-backdrop.show {
     opacity: 0.85;
 }

 .square-modal {
     max-width: 400px !important;
     margin: auto;
 }

 .square-video-box {
     position: relative;
     /* Important for centering the play button overlay */
     width: 100%;
     max-width: 400px;
     aspect-ratio: 1 / 1;
     border: 4px solid #111;
     background: var(--e-global-color-6e00781);
     border-radius: 8px;
     overflow: hidden;
 }

 .square-video-box video {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 /* CUSTOM CENTER PLAY OVERLAY FOR POPUP */
 .custom-play-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 70px;
     height: 70px;
     background-color: rgba(0, 0, 0, 0.5);
     border: 2px solid var(--e-global-color-2c3d629);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 15;
     transition: all 0.3s ease;
 }

 .custom-play-overlay:hover {
     background-color: var(--e-global-color-primary);
     border-color: var(--e-global-color-primary);
     transform: translate(-50%, -50%) scale(1.1);
 }

 .custom-play-overlay svg {
     width: 20px;
     height: 20px;
     fill: var(--e-global-color-2c3d629);
     margin-left: 4px;
 }

 .custom-close-btn {
     position: absolute;
     top: -35px;
     right: 0;
     background: transparent;
     border: none;
     color: var(--e-global-color-2c3d629);
     font-size: 2rem;
     line-height: 1;
     cursor: pointer;
     z-index: 1060;
     opacity: 0.8;
     transition: 0.3s;
 }

 .custom-close-btn:hover {
     opacity: 1;
     transform: scale(1.1);
 }


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


     .custom-hero {
         padding: 160px 0 80px 0;
     }
 }

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


     .custom-hero {
         padding: 160px 0 60px 0;
     }

     .custom-desc {
         font-size: 17px;
         line-height: 1.3;
         max-width: 600px;
         margin-bottom: 24px;
     }
 }

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

     .custom-heading {
         font-size: 37px;
         margin-bottom: 20px;
         letter-spacing: -1.8px;
         text-align: center;
     }

     .custom-tagline {
         margin: 0 auto 17px;
         width: fit-content;
     }


     .custom-hero {
         padding: 230px 0 50px 0;

     }

     .custom-hero-content,
     .custom-hero-content p {
         text-align: center;
     }

     .stats-block {
         flex-direction: column;
     }

     .stats-number {
         font-size: 41px;
     }

     .community-box {
         display: none;
     }

     .custom-btn {
         margin: 0 auto;
     }

     .play-btn {
         margin: 0 auto;
         margin-top: 40px;
         width: 50px;
         height: 50px;
     }
 }

 /* =========================================
       SECTION 2: SPLIT MEDIA BLOCK CSS
       ========================================= */
 .split-media-section {
     background-color: var(--e-global-color-fefc204);
     /* Dark background matching your screenshot */
     padding: 60px 0;
     position: relative;
     z-index: 1;
 }


 .media-box {
     position: relative;
     width: 100%;
     border-radius: 16px;
     overflow: hidden;
     aspect-ratio: 16 / 11;
     /* Standard wide rectangle format */
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
     background-color: var(--e-global-color-6e00781);
 }

 .media-box video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Prevents image from stretching */
     display: block;
 }

 /* Left Box Custom Play Button */
 .box-play-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 50px;
     height: 50px;
     background-color: rgba(255, 255, 255, 0.2);
     border: 1px solid var(--e-global-color-2c3d629);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 10;
     transition: all 0.3s ease;
     backdrop-filter: blur(4px);
 }

 .box-play-overlay:hover {
     background-color: var(--e-global-color-primary);
     border-color: var(--e-global-color-primary);
     transform: translate(-50%, -50%);
 }

 .box-play-overlay svg {
     width: 20px;
     height: 20px;
     fill: var(--e-global-color-2c3d629);
     margin-left: 4px;
 }

 /* =========================================
       SECTION 3: WAKE-UP CALL CSS (FULL HEIGHT IMAGE)
       ========================================= */
 .wakeup-section {
     background-color: var(--e-global-color-2c3d629);
     padding: 80px 0;
     color: #000000;
 }

 /* Flex row to make both columns match height */
 .wakeup-row {
     display: flex;
     flex-wrap: wrap;
     align-items: stretch;
     /* Forces both columns to take equal full height */
 }

 /* Left Column Wrapper */
 .wakeup-img-col {
     display: flex;
     flex-direction: column;
 }

 /* Left Portrait Image stretches fully from top to bottom */
 body.page-template .wakeup-img {
     width: 100%;
     height: 100%;
     min-height: 100%;
     object-fit: cover;
     border-radius: 12px;
 }

 /* Tagline & Heading */
 .wakeup-tagline {
     font-size: 11px;
     font-weight: 800;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     color: var(--e-global-color-accent);
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 25px;
 }

 .heading.v1 {
     font-size: 79px;
     font-weight: 500;
     text-transform: none;
     line-height: 88px;
     letter-spacing: -1.2px;
     word-spacing: 3px;
     margin-bottom: 30px;
     color: #000000;
 }

 .heading.v1 .text-purple {
     color: var(--e-global-color-accent);
     font-weight: 500;
 }

 /* Media Player Box */
 .wakeup-media-box {
     position: relative;
     width: 100%;
     border-radius: 16px;
     overflow: hidden;
     margin-bottom: 25px;
     background: var(--e-global-color-6e00781);
     border: 1px solid #eaeaea;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

 .wakeup-media-box video {
     width: 100%;
     display: block;
     border-radius: 12px;
 }

 .corner-play-icon {
     position: absolute;
     top: 15px;
     right: 15px;
     width: 40px;
     height: 40px;
     background: var(--e-global-color-2c3d629);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 5;
     pointer-events: none;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .corner-play-icon svg {
     width: 16px;
     height: 16px;
     fill: #000000;
     margin-left: 2px;
 }

 /* Typography & Checklist */
 .common-desc {
     text-align: start;
     font-size: 18px;
     font-weight: 400;
     line-height: 30px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: rgb(0, 0, 0);
     margin-bottom: 25px;
 }

 .wakeup-list {
     list-style: none;
     padding: 0;
     margin: 0 0 35px 0;
 }

 .wakeup-list li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     margin-bottom: 18px;
     font-size: 16px;
     font-weight: 400;
     line-height: 22px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: rgb(0, 0, 0);
 }

 .wakeup-list .icon-box {
     flex-shrink: 0;
     width: 20px;
     height: 20px;
     margin-top: 2px;
     color: var(--e-global-color-text);
 }

 .text-magenta {
     color: var(--e-global-color-primary);
     font-weight: 700;
 }

 /* Button */

 .common-btn {
     background-color: rgb(54, 20, 81);
     font-size: 16px;
     font-weight: 500;
     line-height: 18px;
     fill: var(--e-global-color-2c3d629);
     color: var(--e-global-color-2c3d629);
     transition-duration: 1s;
     border-style: solid;
     border-width: 1px;
     border-color: var(--e-global-color-primary);
     border-radius: 60px;
     padding: 15px 22px;
     /* text-transform: lowercase; */
 }

 .common-btn:hover,
 .common-btn.primary:hover {
     background-color: rgba(2, 1, 1, 0);
     color: var(--e-global-color-primary);
     border-color: var(--e-global-color-primary);
 }

 .common-btn.primary {
     color: #fff;
     background-color: var(--e-global-color-primary);

 }

 @media (max-width: 991px) {
     h2.heading.v1 {
         font-size: 50px;
         line-height: 1.2;
         margin: 0 0 20px;
     }

     .custom-tagline.v2 {
         margin-bottom: 20px;
     }
 }

 @media screen and (max-width:768px) {
     .wakeup-section {
         padding: 50px 0;
     }

     h2.heading.v1 {
         font-size: 33px;
     }

     .common-desc {
         font-size: 16px;
         line-height: 24px;
     }

     .wakeup-list li {
         font-size: 14px;
     }

     .common-btn.v1 {
         padding: 11px 20px;
     }
 }

 /* =========================================
       SECTION: LIVER HEALTH RISKS 3-CARD GRID CSS
       ========================================= */
 .risks-section {
     background: linear-gradient(180deg, #BDB5C40F 0%, #ECE9EE 100%);
     /* Light soft background matching screenshot */
     padding: 90px 0;
     color: #000000;
     text-align: center;
 }

 /* Header Container */
 .risks-header {
     max-width: 1000px;
     margin: 0 auto 40px auto;
 }


 .f80 {
     font-size: 79px;
     font-weight: 500;
     text-transform: none;
     line-height: 88px;
     letter-spacing: -1.2px;
     word-spacing: 3px;
     color: var(--e-global-color-84712b3);
 }

 .risks-header .text-purple {
     color: var(--e-global-color-accent);
 }

 .f19 {
     font-size: 19px;
     font-weight: 400;
     line-height: 36px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: #5A5A5A;
     text-align: center;
 }

 .risks-card {
     background-color: var(--e-global-color-fefc204);
     /* Dark card bottom panel */
     border-radius: 16px;
     overflow: hidden;
     text-align: left;
     height: 100%;
     display: flex;
     flex-direction: column;
     transition: transform 0.3s ease;
 }

 .risks-card:hover {
     transform: translateY(-9px);
 }

 body.page-template .risks-card-img {
     width: 100%;
     height: 290px;
     object-fit: cover;
     display: block;
 }

 .risks-card-body {
     padding: 20px;
     display: flex;
     flex-direction: column;
     flex-grow: 1;
     align-items: flex-start;
 }

 .risks-card-title {
     font-size: 33px;
     font-weight: 600;
     line-height: 40px;
     letter-spacing: -1.2px;
     word-spacing: 0px;
     color: #FFFFFF;
 }

 .common-btn svg {
     width: 20px;
     height: 20px;
 }

 .common-desc.white {
     color: #FFFFFF;
 }

 .common-btn.white {
     border-color: transparent;
     color: #fff;

 }

 .common-btn.white:hover {
     color: #fff;
     border-color: #fff;
 }

 @media screen and (max-width:1200px) {
     .risks-section {
         padding: 70px 0;
     }


     .f80 {
         font-size: 50px;
         line-height: 1.2;
     }

     .f19 {
         font-size: 17px;
         line-height: 1.3;
     }


     body.page-template .risks-card-img {
         height: 250px;
     }

     .risks-card-title {
         font-size: 20px;
         line-height: 1.3;
     }

 }

 @media (max-width:768px) {
     .f80 {
         font-size: 32px;
     }

     .common-btn {
         padding: 10px 20px;
     }

     .risks-section {
         padding: 50px 0;
     }
 }

 /* =========================================
       SECTION 4: GENERATION DEMANDS BETTER CSS (FIXED BOX POSITION)
       ========================================= */
 .gen-section {
     background-color: var(--e-global-color-fefc204);
     padding: 100px 0;
     color: var(--e-global-color-2c3d629);
     position: relative;
     overflow: visible;
     /* Allows boxes to slightly overlap outside if needed */
     z-index: 1;
 }

 .gen-header {
     text-align: center;
     max-width: 1000px;
     margin: 0 auto 80px auto;
     padding: 0 15px;
 }


 .heading.f58 {
     font-family: var(--e-global-typography-primary-font-family), Sans-serif;
     font-size: var(--e-global-typography-primary-font-size);
     font-weight: var(--e-global-typography-primary-font-weight);
     text-transform: var(--e-global-typography-primary-text-transform);
     line-height: var(--e-global-typography-primary-line-height);
     letter-spacing: var(--e-global-typography-primary-letter-spacing);
     word-spacing: var(--e-global-typography-primary-word-spacing);
     color: #FFFFFF;
 }

 .common-desc.f24 {
     font-size: 24px;
     font-weight: 400;
     line-height: 41px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: #FFFFFF;
     text-align: center;
 }

 .common-desc.f24 strong {
     color: var(--e-global-color-2c3d629);
 }

 /* Strict 50-50 Row Layout with Top Alignment */
 .gen-grid-row {
     display: flex;
     flex-wrap: wrap;
     align-items: flex-start;
     margin-right: -15px;
     margin-left: -15px;
 }

 .gen-col-left,
 .gen-col-right {
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
 }

 @media (min-width: 992px) {

     .gen-col-left,
     .gen-col-right {
         flex: 0 0 50%;
         max-width: 50%;
     }
 }

 /* Left Image & Floating Stats Wrapper */
 .gen-image-wrapper {
     position: relative;
     width: 100%;
 }

 @media(min-width: 992px) {
     .gen-image-wrapper {
         padding: 0 53px;
     }
 }

 body.page-template .gen-portrait-img,
 .gen-portrait-video {
     width: 100%;
     /* height: 720px; */
     object-fit: cover;
     border-radius: 16px;
     display: block;
     overflow: hidden;
 }

 .gen-image-wrapper .video-wrapper {
     position: relative;
     width: 100%;
     aspect-ratio: 9 / 16;
     overflow: hidden;
     border-radius: 16px;
     overflow: hidden;


 }

 .gen-image-wrapper .video-wrapper iframe {
     width: 100%;
     height: 100%;
     border: 0;
     border-radius: 16px;

 }

 /* =========================================
       FLOATING BOXES POSITION FIX (BOTTOM ALIGNED)
       ========================================= */
 .floating-stat-box {
     position: static;
     background: var(--e-global-color-fefc204);
     border: 1px solid transparent;
     padding: 22px;
     padding-left: 0;
     border-radius: 12px;
     width: 310px;
     z-index: 10;
 }

 /* Box 1 (Number 4) - Placed towards middle-left */
 /* .stat-box-1 {
        bottom: 210px;
        left: -45px;
    } */

 /* Box 2 (Number %70) - Placed at the bottom-left */
 /* .stat-box-2 {
        bottom: 30px;
        left: -45px;
    } */

 .stat-number {
     font-size: 1.8rem;
     font-weight: 800;
     color: var(--e-global-color-2c3d629);
     line-height: 1;
     margin-bottom: 8px;
 }

 .stat-text {
     font-size: 13px;
     line-height: 1.4;
     color: #cccccc;
     margin: 0;
 }

 /* Right Side Cards Stack */
 .gen-cards-stack {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 .gen-card {
     background-color: #0D0214BF;
     border-radius: 16px;
     padding: 35px;
     transition: transform 0.3s ease;
 }

 .gen-card.purple-card {
     background-color: var(--e-global-color-primary);
 }

 .gen-card.grey-card {
     background-color: #2E2E2E;
 }

 .card-number {
     font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
     font-size: var(--e-global-typography-secondary-font-size);
     font-weight: var(--e-global-typography-secondary-font-weight);
     line-height: var(--e-global-typography-secondary-line-height);
     letter-spacing: var(--e-global-typography-secondary-letter-spacing);
     word-spacing: var(--e-global-typography-secondary-word-spacing);
     color: var(--e-global-color-2c3d629);
 }

 .card-heading {
     font-size: 24px;
     font-weight: 600;
     text-transform: none;
     line-height: 30px;
     letter-spacing: 0px;
     word-spacing: 0px;
     color: var(--e-global-color-2c3d629);
 }

 @media screen and (max-width:1499px) {
     .card-heading {
         font-size: 20px;
         line-height: 30px;
     }
 }

 .f16 {
     text-align: start;
     font-family: "Inter", Sans-serif;
     font-size: 16px;
     font-weight: 400;
     line-height: 26px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: var(--e-global-color-2c3d629);
 }

 .social-icons-row {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-top: 25px;
 }

 .social-icon-btn {
     width: 60px;
     height: 60px;
     border: 1px solid rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--e-global-color-2c3d629);
     text-decoration: none;
     transition: all 0.3s;
 }

 .social-icon-btn:hover {
     background: var(--e-global-color-2c3d629);
     color: var(--e-global-color-accent);
     border-color: var(--e-global-color-2c3d629);
     transform: scale(1.2);
 }

 .social-icon-btn svg {
     width: 30px;
     height: 30px;
     fill: currentColor;
 }

 @media (max-width: 991px) {
     .floating-stat-box {
         position: relative;
         left: 0 !important;
         bottom: auto !important;
         margin-top: 15px;
         width: 100%;
     }
 }

 /* =========================================
       SECTION 5: MIND YOUR LIVER MAG CSS (WITH BUTTON & EXTRA CONTENT)
       ========================================= */
 .mag-section {
     position: relative;
     width: 100%;
     display: flex;
     align-items: center;
     padding: 100px 0;

     /* Background Image + Dark Gradient Overlay */
     background:
         linear-gradient(90deg, rgba(7, 7, 7, 0.52) 0%, rgba(7, 7, 7, 0.49) 50%, rgba(8, 8, 8, 0.49) 100%),
         url('https://liverawareness.org/wp-content/uploads/2026/09/ChatGPT-Image-Sep-1-2026-02_22_51-PM.webp') center/cover no-repeat;
 }

 .mag-content-wrapper {
     position: relative;
     z-index: 2;
     width: 100%;
 }

 /* Tagline */

 /* Main Title */
 .heading.f70 {
     font-size: 69px;
     font-weight: 500;
     text-transform: none;
     line-height: 69px;
     letter-spacing: -1.2px;
     word-spacing: 3px;
     color: #FFFFFF;
     margin: 0 0 30px;
 }


 /* Subheading / Highlight Text */
 .mag-subtitle {
     font-size: 19px;
     font-weight: 500;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     color: var(--e-global-color-2c3d629);
     margin-bottom: 15px;
 }

 /* Paragraph Descriptions */
 .mag-desc {

     color: #fff;
     max-width: 405px;
     margin-bottom: 20px;
 }

 /* Additional Paragraph for Issue 4 */
 .mag-desc-bold {
     color: var(--e-global-color-2c3d629);

     max-width: 405px;
     margin-bottom: 35px;
 }

 .mag-desc-bold strong {
     font-weight: 700;
     color: var(--e-global-color-2c3d629);
 }

 /* Custom Button */


 /* Right Side Magazine Mockup Image (Slim/Patla) */
 body.page-template .mag-mockup-img {
     width: 100%;
     max-width: 352px;
     height: auto;
     border-radius: 8px;
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7);
     display: block;
     /* margin-left: auto; */
     margin: 0 auto;
 }

 .custom-tagline.white {
     color: #fff;
 }

 /* Responsive styling */
 @media (max-width: 991px) {
     body.page-template .mag-mockup-img {
         margin: 40px auto 0 auto;
         max-width: 100%;
     }

     .heading.f70 {
         font-size: 40px;
         line-height: 1.2;
         margin-bottom: 20px;
         text-align: center;
     }

     .heading.f70 br {
         display: none;
     }

     .mag-subtitle {
         text-align: center;
     }

     .mag-desc {
         max-width: 100%;
         text-align: center;
     }

     .mag-desc br {
         display: none;
     }

     .mag-desc-bold {
         text-align: center;
         max-width: 100%;
     }

     .mag-section .common-btn.primary {
         margin: 0 auto;
         display: flex;
         width: max-content;
     }

 }

 @media (max-width: 768px) {
     .heading.f70 {
         font-size: 35px;
         line-height: 1.2;
     }

     .common-desc.f24 {
         font-size: 18px;
         line-height: 1.4;
     }

     .gen-header {
         padding: 0;
         margin-bottom: 30px;
     }

     .gen-section {
         padding: 45px 0;
     }


     body.page-template .gen-portrait-img,
     .gen-portrait-video {
         height: 100%;
     }

     .social-icon-btn {
         width: 42px;
         height: 42px;
     }

     .social-icon-btn svg {
         width: 18px;
         height: 23px;
     }

     .mag-section {
         padding: 40px 0;
     }

     .mag-subtitle {
         font-size: 18px;
     }
 }

 /* =========================================
       SECTION: WHY LIVER HEALTH MATTERS & EARLY SIGNALS CSS
       ========================================= */
 .two-col-section {
     background-color: transparent;
     background-image: linear-gradient(180deg, #BDB5C40F 0%, #ECE9EE 100%);

     /* Soft light background matching screenshot */
     padding: 100px 0;
     color: #1a1a1a;
 }

 .col-wrapper {
     display: flex;
     flex-wrap: wrap;
     margin-right: -15px;
     margin-left: -15px;
 }

 .col-pane {
     position: relative;
     width: 100%;
     padding-right: 15px;
     padding-left: 15px;
 }

 @media (min-width: 768px) {
     .col-pane {
         flex: 0 0 50%;
         max-width: 50%;
     }
 }

 /* Tagline */


 /* Headings */
 .section-main-heading {
     font-family: var(--e-global-typography-primary-font-family), Sans-serif;
     font-size: var(--e-global-typography-primary-font-size);
     font-weight: var(--e-global-typography-primary-font-weight);
     text-transform: var(--e-global-typography-primary-text-transform);
     line-height: var(--e-global-typography-primary-line-height);
     letter-spacing: var(--e-global-typography-primary-letter-spacing);
     word-spacing: var(--e-global-typography-primary-word-spacing);
     color: var(--e-global-color-84712b3);
     margin: 20px 0 30px 0;
 }

 .section-main-heading .text-purple {
     color: var(--e-global-color-accent);
 }

 /* Paragraphs */
 .two-col-section .common-desc {
     color: var(--e-global-color-text);
     margin-bottom: 30px;
 }

 /* Images */
 body.page-template .content-img {
     width: 100%;
     height: auto;
     border-radius: 16px;
     object-fit: cover;
     margin-bottom: 30px;
 }

 /* Feature Sub-blocks (Left Column bottom) */
 .feature-grid {
     display: flex;
     gap: 20px;
     margin-top: 25px;
 }

 .feature-item {
     flex: 1;
 }

 .feature-icon {
     width: 24px;
     height: 24px;
     color: var(--e-global-color-accent);
     margin-bottom: 12px;
 }

 .feature-title {
     font-size: 25px;
     font-weight: 500;
     line-height: 30px;
     letter-spacing: -1.2px;
     word-spacing: 2px;
     color: var(--e-global-color-primary);
     margin-bottom: 10px;
 }

 .feature-desc {
     font-family: var(--e-global-typography-text-font-family), Sans-serif;
     font-size: var(--e-global-typography-text-font-size);
     font-weight: var(--e-global-typography-text-font-weight);
     line-height: var(--e-global-typography-text-line-height);
     letter-spacing: var(--e-global-typography-text-letter-spacing);
     word-spacing: var(--e-global-typography-text-word-spacing);
     color: var(--e-global-color-text);
     margin: 0;
 }

 /* Right Column Card Container with White Background Box over Image */
 .right-card-box {
     position: relative;

 }

 body.page-template .right-card-img {
     width: 100%;
     height: auto;
     display: block;
     border-radius: 16px;
     margin-bottom: 20px;
 }

 .right-card-content .common-btn.primary {
     display: inline-flex;
     margin-top: 20px;
 }

 @media (max-width: 991px) {
     .two-col-section {
         padding: 7 0px 0;
     }
 }

 @media (max-width: 768px) {
     .two-col-section {
         padding: 50px 0;
     }

     .section-main-heading {
         text-align: center;
         margin: 15px 0 20px;
     }

     .two-col-section .common-desc {
         text-align: center;
         margin-bottom: 20px;
     }

     .feature-title {
         font-size: 21px;
         line-height: 1.2;
         text-align: center;
     }

     .feature-grid p {
         text-align: center;
     }

     .feature-icon {
         margin: 0 auto 17px;
     }

     .right-card-content .common-btn.primary {
         display: flex;
         width: max-content;
         margin: 0 auto;
     }
 }

 /* =========================================
       SECTION: INSTAGRAM FEED CSS
       ========================================= */
 .insta-feed-section {
     background-color: var(--e-global-color-fefc204);
     /* Dark theme matching previous sections */
     padding: 80px 0;
     color: var(--e-global-color-2c3d629);
 }

 /* Instagram Profile Header */
 .insta-profile-header {
     display: flex;
     align-items: center;
     gap: 15px;
     margin-bottom: 40px;
     padding: 0 15px;
 }

 .insta-avatar {
     width: 50px;
     height: 50px;
     background: var(--e-global-color-2c3d629);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     color: var(--e-global-color-fefc204);
     font-size: 14px;
     flex-shrink: 0;
     overflow: hidden;
 }

 body.page-template .insta-avatar img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .insta-handle-wrap {
     display: flex;
     flex-direction: column;
 }

 .insta-username {
     font-size: 1.1rem;
     font-weight: 700;
     color: var(--e-global-color-2c3d629);
     text-decoration: none;
     line-height: 1.2;
 }

 .insta-bio {
     font-size: 13px;
     color: #bfa3c7;
     line-height: 1.4;
     margin-top: 3px;
 }

 /* 5-Column Grid Layout */
 .insta-grid {
     display: flex;
     flex-wrap: wrap;
     margin-right: -10px;
     margin-left: -10px;
 }

 .insta-col {
     position: relative;
     width: 100%;
     padding-right: 10px;
     padding-left: 10px;
     margin-bottom: 20px;
 }

 @media (min-width: 992px) {
     .insta-col {
         flex: 0 0 20%;
         /* Exactly 5 columns on desktop */
         max-width: 20%;
     }
 }

 @media (min-width: 576px) and (max-width: 991px) {
     .insta-col {
         flex: 0 0 33.333%;
         /* 3 columns on tablets */
         max-width: 33.333%;
     }
 }

 /* Instagram Card Item */
 .insta-card {
     position: relative;
     border-radius: 8px;
     overflow: hidden;
     aspect-ratio: 1 / 1;
     /* Perfect square grid */
     background-color: var(--e-global-color-6e00781);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
     display: block;
 }

 body.page-template .insta-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 body.page-template .insta-card:hover img {
     transform: scale(1.05);
 }

 /* Play Icon Overlay for Videos */
 .insta-play-overlay {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 45px;
     height: 45px;
     background: rgba(0, 0, 0, 0.6);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;
     backdrop-filter: blur(2px);
 }

 .insta-play-overlay svg {
     width: 16px;
     height: 16px;
     fill: var(--e-global-color-2c3d629);
     margin-left: 2px;
 }

 /* Bottom Action Buttons */
 .insta-actions-wrap {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     margin-top: 40px;
 }

 /* =========================================
       SECTION: AUTO PLAY VIDEO PSA CSS
       ========================================= */
 .psa-video-section {
     position: relative;
     width: 100%;
     background-color: #000000;
     overflow: hidden;
     padding: 0;
     margin: 0;
     line-height: 0;
     /* Removes any extra bottom gap */
 }

 .psa-video-wrapper {
     position: relative;
     width: 100%;
     height: 85vh;
     /* Adjust height as needed, or set to 100vh for full screen */
     min-height: 500px;
     max-height: 800px;
 }

 .psa-video-wrapper video {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* Ensures video fills the area perfectly without distortion */
     display: block;
 }

 /* Optional subtle dark overlay if you want to make text pop over video in future */
 .psa-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.15);
     pointer-events: none;
 }

 /* =========================================
       SECTION 6: KNOW THE RISKS CSS (PRE-FOOTER)
       ========================================= */
 .prefooter-cta-section {
     background-color: var(--e-global-color-fefc204);
     /* Dark theme matching the footer background */
     padding: 90px 0;
     color: var(--e-global-color-2c3d629);
     position: relative;
 }

 /* Tagline */

 /* Main Heading */
 .prefooter-title {
     font-size: var(--e-global-typography-primary-font-size);
     font-weight: var(--e-global-typography-primary-font-weight);
     text-transform: var(--e-global-typography-primary-text-transform);
     line-height: var(--e-global-typography-primary-line-height);
     letter-spacing: var(--e-global-typography-primary-letter-spacing);
     word-spacing: var(--e-global-typography-primary-word-spacing);
     margin-bottom: 20px;
     color: var(--e-global-color-2c3d629);
 }

 /* Buttons Container on Right Side */
 .prefooter-buttons-wrap {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 20px;
     flex-wrap: wrap;
     height: 100%;
 }

 /* Secondary Button */
 .common-btn.secondary {
     background-color: #3E104D;
 }

 .prefooter-cta-section .common-desc.white {
     max-width: 550px;
 }

 /* Responsive Styling for Mobile */
 @media (max-width: 991px) {
     .prefooter-buttons-wrap {
         justify-content: flex-start;
         margin-top: 40px;
     }
 }

 @media screen and (max-width: 768px) {
     .prefooter-cta-section {
         padding: 45px 0;
         text-align: center;
     }

     .prefooter-cta-section .common-desc {
         text-align: center;
     }

     .prefooter-buttons-wrap {
         margin-top: 0;
         align-items: center;
         justify-content: center;
         gap: 15px;
     }

     .psa-video-wrapper {
         height: 251px;
         min-height: 300px;
         max-height: 457px;
     }
 }

 /* Mrigank Updated below for team section  */
 .custom-team-section {
     padding: 100px 0 80px!important;
     background-color: #0d081a;
 }

 @media (max-width:1200px) {
     .custom-team-section {
         padding: 70px 0!Important;
     }

 }

 @media (max-width:768px) {
     .custom-team-section {
         padding: 50px 0!Important;
     }

 }

 .custom-team-section .main-heading,
 .custom-team-section .right-heading {
     font-size: var(--e-global-typography-secondary-font-size);
     font-weight: var(--e-global-typography-secondary-font-weight);
     line-height: var(--e-global-typography-secondary-line-height);
     letter-spacing: var(--e-global-typography-secondary-letter-spacing);
     word-spacing: var(--e-global-typography-secondary-word-spacing);
     color: var(--e-global-color-2c3d629);
 }

 .custom-team-swiper {
     padding-bottom: 60px !important;
 }

 .custom-team-section .left-desc,
 .custom-team-section .right-desc {
     text-align: start;
     font-family: "Inter", Sans-serif;
     font-size: 18px;
     font-weight: 400;
     line-height: 30px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: var(--e-global-color-2c3d629);
 }

 .team-card {
     background: transparent;
     text-align: left;
     height: 100%;
     display: flex;
     gap: 10px;
     flex-direction: column;
 }

 .custom-team-section .team-img-wrapper {
     border-radius: 16px;
     overflow: hidden;
     border: 3px solid #282828;

 }

 .custom-team-section .team-img-wrapper img {
     width: 100%;
     height: 380px;
     object-fit: cover;
     display: block;
 }

 @media (min-width:1440px) {
     .custom-team-section .team-img-wrapper img {
         height: 100%;
         aspect-ratio: 5/7;
     }
 }

 .custom-team-section .team-name {
     font-size: 20px;
     font-weight: 500;
     line-height: 30px;
     letter-spacing: -1.2px;
     word-spacing: 2px;
     color: var(--e-global-color-2c3d629);
     margin: 0;
     margin-top: 5px;
 }

 .custom-team-section .team-role {
     font-size: 16px;
     font-weight: 400;
     line-height: 26px;
     letter-spacing: 0.2px;
     word-spacing: 0.2px;
     color: var(--e-global-color-2c3d629);
 }

 .custom-team-section .common-btn.primary {
     background-color: #3E104D;
     border: 1px solid #3E104D;
 }

 .custom-team-section .team-btn-wrapper .common-btn.primary {
     padding: 10px 20px;
 }

 .custom-team-section .common-btn.primary:hover {
     background-color: transparent;
     color: #fff;
     border: 1px solid #fff;
 }

 .custom-team-swiper .swiper-pagination-bullet {
     background: #ffffff;
     opacity: 0.3;
     width: 10px;
     height: 10px;
 }

 .custom-team-swiper .swiper-pagination-bullet-active {
     opacity: 1;
     background: #ffffff;
 }

 @media (max-width:1200px) {

     .custom-team-section .left-desc,
     .custom-team-section .right-desc {
         font-size: 16px;
         line-height: 1.3;
     }



     .custom-team-section .team-name {
         font-size: 18px;
         line-height: 1.2;
     }

     .custom-team-section .custom-tagline {
         margin-left: 0;
     }

     .custom-team-section .team-role {
         font-size: 15px;
         line-height: 1.2;
     }
 }

 @media (max-width:768px) {
     .custom-team-section .team-img-wrapper img {
         height: 100%;
     }
 }

 /* single page CSS */
 .demo-page-banner-section {
     background-color: var(--e-global-color-fefc204, #0b0217);
     background-image: url('https://liverawareness.org/wp-content/uploads/2025/10/liver-logo-light-purple-color-By-Antor-05.webp');
     background-repeat: no-repeat;
     background-position: 123% 181px;
     background-size: auto;
     padding-top: 180px;
     padding-bottom: 90px;
     padding-left: 100px;
     padding-right: 100px;
     position: relative;
     overflow: hidden;
     box-shadow: inset 0 20px 40px rgba(11, 2, 23, 0.5);
 }

 .banner-main-title {
     font-size: 38px;
     font-weight: 700;
     color: #ffffff;
     line-height: 1.25;
     margin-bottom: 20px;
     letter-spacing: -0.5px;
 }

 .banner-breadcrumb {
     font-size: 14px;
     color: #a893be;
     margin-bottom: 12px;
 }

 .banner-breadcrumb a {
     color: #a893be;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .banner-breadcrumb a:hover {
     color: #ffffff;
 }

 .banner-excerpt {
     font-size: 16px;
     color: rgba(255, 255, 255, 0.85);
     max-width: 900px;
     line-height: 1.6;
     display: none;
 }

 @media (max-width: 991px) {
     .banner-main-title {
         font-size: 26px;
     }

     .demo-page-banner-section {
         padding-top: 225px;
         padding-left: 20px;
         padding-right: 20px;
         padding-bottom: 40px;
         background-size: cover;
         background-position: center;
     }
 }

 .demo-main-content-section {
     background-color: #ffffff !important;
     color: #222222 !important;
     padding-top: 70px;
     padding-bottom: 70px;
     padding-left: 100px;
     padding-right: 100px;
     font-family: inherit;
 }

 /* Professional Typography & Article Styling */
 .blog-article-content p {
     color: #444444 !important;
     font-size: 17px;
     line-height: 1.85;
     margin-bottom: 24px;
     font-weight: 400;
 }

 @media (min-width:1200px) {
     .blog-article-content {
         padding-right: 20px;
     }
 }

 .blog-article-content h2,
 .blog-article-content h1 {
     font-size: 24px;
     font-weight: 700;
     color: #0b0217;
     margin-top: 35px;
     margin-bottom: 18px;
     line-height: 1.3;
 }



 .blog-article-content h3,
 .blog-article-content .main-title {
     font-size: 30px;
     font-weight: 700;
     color: #0b0217;
     line-height: 1.25;
     margin-bottom: 24px;
     letter-spacing: -0.5px;
 }

 .blog-article-content .main-title {
     color: var(--e-global-color-primary);
 }

 @media (max-width:991px) {

     .blog-article-content h3,
     .blog-article-content .main-title {
         font-size: 22px;
     }

     .blog-article-content h2,
     .blog-article-content h1 {
         font-size: 22px;

     }
 }

 .blog-article-content h4 {
     font-size: 20px;
     font-weight: 700;
     color: #0b0217;
     margin-top: 30px;
     margin-bottom: 15px;
 }

 /* Meta Data Bar */
 .blog-meta-bar {
     font-size: 14px;
     color: #666666;
     border-bottom: 1px solid #eaeaea;
     padding-bottom: 16px;
     margin-bottom: 30px;
 }

 .blog-meta-bar span {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     color: #555555;
 }

 /* Featured Banner Image Box */
 .blog-featured-img-wrap {
     border-radius: 16px;
     overflow: hidden;
     border: 1px solid #eaeaea;
     box-shadow: 0 10px 30px rgba(11, 2, 23, 0.06);
     margin-bottom: 35px;
 }

 /* Updated Sidebar Styling (Compact / "Chapta" right alignment) */
 .demo-clean-sidebar {
     position: sticky;
     z-index: 1;
     top: 114px;
     padding-right: 30px !important;
 }

 .demo-clean-sidebar .sidebar-widget {
     background: transparent !important;
     border: none !important;
     padding: 0 !important;
     margin-bottom: 35px;
 }

 .demo-clean-sidebar h4 {
     font-size: 20px !important;
     font-weight: 700 !important;
     color: #0b0217 !important;
     margin-bottom: 18px !important;
     letter-spacing: -0.3px;
     border-bottom: 2px solid #0b0217;
     padding-bottom: 8px;
 }

 .news-item {
     display: flex;
     align-items: flex-start;
     margin-bottom: 16px;
     transition: transform 0.2s ease;
 }

 .news-item:hover {
     transform: translateX(3px);
 }

 body .news-item img {
     width: 65px;
     height: 65px;
     object-fit: cover;
     border-radius: 10px;
     flex-shrink: 0;
     margin-right: 12px;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
 }

 .news-content h5 {
     font-size: 14px !important;
     font-weight: 400 !important;
     line-height: 1.35 !important;
     margin-bottom: 4px !important;
 }

 .news-content h5 a {
     color: #111111 !important;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .news-content h5 a:hover {
     color: var(--e-global-color-primary) !important;
 }

 .news-meta {
     font-size: 11px;
     color: #666666;
     display: flex;
     align-items: center;
     gap: 5px;
     margin-bottom: 2px;
 }

 .more-videos-link {
     font-weight: 600;
     color: var(--e-global-color-primary);
     text-decoration: none;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     margin-top: 4px;
     font-size: 13px;
 }

 .more-videos-link:hover {
     text-decoration: underline;
 }

 /* Mission Widget Overlay Styling (#0F0B20) */
 .mission-widget-card {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     background-image: url('https://liverawareness.org/wp-content/uploads/2025/09/friends-students-happy-with-phone-university-campus-laughing-diversity-learning-development-gen-z-group-women-men-mobile-app-web-chat-meme-social-media-college-1536x767.webp');
     background-size: cover;
     background-position: center;
     padding: 30px 20px;
     color: #ffffff;
     text-align: center;
     box-shadow: 0 10px 25px rgba(11, 2, 23, 0.15);
 }

 .mission-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(to bottom, rgba(15, 11, 32, 0.94) 0%, rgba(15, 11, 32, 0.82) 100%);
     z-index: 1;
 }

 .mission-content-inner {
     position: relative;
     z-index: 2;
 }

 /* Social Icons Styling */
 .sidebar-social-wrap {
     margin-top: 25px;
     background: #fbf9fc;
     padding: 20px;
     border-radius: 16px;
     border: 1px solid #f0e6f5;
 }

 .sidebar-social-title {
     font-size: 16px;
     font-weight: 700;
     color: #0b0217;
     margin-bottom: 10px;
 }

 .sidebar-social-icons {
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
 }

 .social-icon-btn {
     width: 36px;
     height: 36px;
     background-color: #ffffff;
     border: 1px solid #d1c2db;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #0b0217;
     text-decoration: none;
     font-size: 14px;
     transition: all 0.25s ease;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
 }

 .social-icon-btn:hover {
     background-color: var(--e-global-color-primary);
     border-color: var(--e-global-color-primary);
     color: #ffffff;
     transform: translateY(-2px);
 }

 @media (max-width: 1199px) {
     .demo-main-content-section {
         padding-left: 40px;
         padding-right: 40px;
     }
 }

 @media (max-width: 991px) {
     .demo-main-content-section {
         padding-left: 20px;
         padding-right: 20px;
         padding-top: 45px;
     }

     .demo-clean-sidebar {
         padding-right: 0 !important;
     }
 }

 .demo-related-posts-section {
     background-color: #ffffff;
     padding-left: 100px;
     padding-right: 100px;
     padding-bottom: 80px;
 }

 .related-section-title {
     font-size: 26px;
     font-weight: 700;
     color: #0b0217;
     margin-bottom: 25px;
     letter-spacing: -0.5px;
 }

 .related-post-card {
     background: transparent;
     border: none;
     display: flex;
     flex-direction: column;
     height: 100%;
     transition: transform 0.25s ease;
 }

 .related-post-card:hover {
     transform: translateY(-4px);
 }

 .related-img-wrap {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     height: 320px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
 }

 body .related-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform 0.4s ease;
 }

 body .related-post-card:hover .related-img-wrap img {
     transform: scale(1.03);
 }

 .related-date-badge {
     position: absolute;
     top: 16px;
     left: 16px;
     background-color: var(--e-global-color-primary);
     color: #ffffff;
     width: 60px;
     height: 65px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     border-top-left-radius: 16px;
     border-bottom-right-radius: 16px;
     font-weight: 700;
     text-align: center;
     line-height: 1.1;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }

 .related-date-badge .month {
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .related-date-badge .day {
     font-size: 20px;
 }

 .related-category {
     font-size: 13px;
     color: var(--e-global-color-primary);
     margin-top: 14px;
     margin-bottom: 6px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .related-title {
     font-size: 20px;
     font-weight: 400;
     line-height: 1.25;
 }

 .related-title a {
     color: #111111;
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .related-title a:hover {
     color: var(--e-global-color-primary);
 }

 @media (max-width: 1199px) {
     .demo-related-posts-section {
         padding-left: 40px;
         padding-right: 40px;
     }
 }

 @media (max-width: 991px) {
     .demo-related-posts-section {
         padding-left: 20px;
         padding-right: 20px;
     }

     .related-img-wrap {
         height: 240px;
     }
 }

 /* ./single page CSS */
 /* Home page modal */
 .custom-portrait-modal .modal-body {
     max-height: 100% !important;
 }

 /* ./Home page modal */
 .learn-more-button svg {
     width: 20px;
     height: 17px;
     fill: #fff;
 }

 .learn-more-button span {
     border-bottom: 1px solid var(--e-global-color-primary);
 }