/* Container for the stacking effect */
        .parallax-container {
            position: relative;
            width: 100%;
        }

        html, body {
    scroll-behavior: auto !important; /* Forces instant jumps instead of smooth sliding */
}




a.text-link {
  min-height: auto;
}


a.link-underlined:hover {
    color: #fff !important;
}

#loader-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff; 
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; 
        }



#intro-video { 
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000; 
    object-fit: contain;     
    z-index: 99;
    /* opacity: 0; */
}


        /* Add this to your <style> block */
.no-scroll {
    overflow: hidden !important;
    height: 100vh;
}

        .parallax-section {
            position: sticky; /* Keeps section in view while next slides over */
            top: 0;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
        }

        /* Ensure Section 2 is physically higher in the stack than Section 1 */
        .section-1 { z-index: 1; }
        .section-2 { z-index: 2; margin-top: 0; }

/* Adjust Section 1 to make room for the fixed card */
.section-1 {
    z-index: 1;
    display: flex;
    justify-content: flex-end; 
    align-items: flex-start; /* Changed from 'center' to 'flex-start' */
    padding-right: 15%;
    padding-top: 15vh;  
}

#main-content-wrapper {
    visibility: hidden;
    opacity: 0;
}

        .img-container {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
        }

        .parallax-img {
            width: 100%;
            height: 152%; /* Extra height for the "slow move up" effect */
            object-fit: cover;
            position: absolute;
            top: 0;
        }

        .parallax-text {
    color: white;
    font-size: 2.2vw; /* Reduced slightly to fit next to card */
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.2;
    z-index: 10;
    position: relative;
    margin: 0; /* Remove default margins */
    font-family : 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    padding-bottom: 10px;
}

.hero-desc{
    color: white;
    font-size: 1.9vw; /* Reduced slightly to fit next to card */
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.2;
    z-index: 10;
    position: relative;
    margin: 0; /* Remove default margins */
    font-family : 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
        padding-bottom: 24px;
}

.main-card {
    position: fixed; /* Keep it in place relative to the screen */
    top: 30vh;       /* 30% from the top */
    left: 12%;      /* Adjust this to sit next to where the text was */
    width: 32.8vw;
    z-index: 100;    /* Higher than Section 1 (1) and Section 2 (2) */
    pointer-events: none; /* Allows clicking things behind it if needed */
    transition: none; 
    /* will-change: transform, top; */
    z-index: 20;
    will-change: transform;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* gap: 15px;  */
    max-width: 40vw;
    z-index: 10;
    padding-left: 4vw;
    margin-top: 6vh;
}

/* Ensure images inside hero-content don't overflow */
.hero-content img {
    max-width: 100%;
    height: auto;
    display: block;
    padding-bottom: 20px;
}


.hero-content a#rm-ExploreMore {
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 0px;
    width: 162px;
    background-color: #006FCF;
    border-radius: 4px;
    color: #FFFFFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    z-index: 9;
    height: 45px;
    margin: 0px;
    
}

.hero-cont-links-outer{
        display: flex;
    flex-direction: row;
    margin-top: 24px;
     align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
    color: #FFF;
}

.hero-cont-links-outer a:hover{
     color: #FFF;
}

a:focus {
    outline: 1px dashed #53565a !important;
    outline-offset: 3px;
    display: inline-block;
}

.hero-cont-links1{
    font-size: 12px;
    line-height: 150%;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 700;
    color: #FFF;
}

.hero-cont-links2{
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;  
    color: #FFF;  
}

.hero-cont-links2 a{
    text-decoration: underline;
    color: #FFF;
    padding: 0px;
}

.hero-cont-links3{
    font-size: 12px;
    font-weight: 400;
    line-height: 150%;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    color: #FFF;
}

.hero-cont-links3 a{
    text-decoration: underline;
    color: #FFF;
    padding: 0px;
}

.hero-content a img{
    padding-top: 20px;
}

.intro-text{
    width: 8.7vw;
}

.graphite-text{
    width: 21.3vw;
        padding-bottom: 16px;
}

/* Only hide Section 2 text on load */
.section-2 .parallax-text {
    opacity: 0;
    /* Bottom edge (3rd value) is at 100%, hiding the text at the top */
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: translateY(-20px); /* Optional: slight drop for extra polish */
}

@media (max-width: 102px){
/* Container for the entire 2% section */
.secondFrame-left-Outer {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: row; /* Side-by-side */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 35px;
    width: 100%;
    margin-top: -17vh; /* Fixed 30% from top */
    color: white;
    padding-left: 7%;
}
}


/* Left side: Percentage stacking */
.secondFrame-left {
    display: flex;
    flex-direction: column; /* One below the other */
    align-items: center;
    text-align: center;
    opacity: 0;
    padding-top: 6px;
}

.secondFrame-left p {
    font-size: 7.5vw;
    font-weight: 400;
    line-height: 110%;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

.secondFrame-left span {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

/* Right side: Header and Description stacking */
.secondFrame-right {
    display: flex;
    flex-direction: column; /* One below the other */
    /* gap: 15px; */
    text-align: left;
    max-width: 33vw;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: translateY(-20px);
}

.secondFrame-header {
    font-size: 1.9vw;
    font-weight: 800;
    line-height: 130%;
     font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
     color: #fff;
     padding-bottom: 16px;
}

.secondFrame-desc {
    font-size: 1.5vw;
    line-height: 140%;
    opacity: 1;
    color: #fff;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    padding-bottom: 4px;
}

.secondFrame-tandc {
    font-size: 0.85vw;
    line-height: 1.5;
    opacity: 1;
    font-weight: 400;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

.secondFrame-tandc a {
    color: #fff;
    text-decoration: underline;
     font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
         padding: 0px;
    color: #B5D7F4;
}

.section-3 { 
    z-index: 3; /* Higher than section 2 */
    margin-top: -2px; /* Pulls it up slightly to close sub-pixel gaps */
    background: transparent; /* Fallback to hide any flickering */
    margin-top: -7vh; 
        height: 120vh;
}

.section-3 .img-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
}

/* Ensure the image has enough height for the deep parallax */
.section-3 .parallax-img {
    height: 108%; 
    object-fit: cover;
}

.secondFrame-left, .secondFrame-right {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: translateY(-20px);
}

/* Container for the entire 2% section */
.thirdFrame-left-Outer {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: row; /* Side-by-side */
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
    margin-top: -24vh; /* Fixed 30% from top */
    color: white;
    padding-left: 7%;
}

/* Left side: Percentage stacking */
.thirdFrame-left {
    display: flex;
    flex-direction: column; /* One below the other */
    align-items: center;
    text-align: center;
    opacity: 0;
    padding-top: 6px;
}

.thirdFrame-left p {
       font-size: 7.5vw;
    font-weight: 400;
    line-height: 110%;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

.thirdFrame-left span {
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

/* Right side: Header and Description stacking */
.thirdFrame-right {
    display: flex;
    flex-direction: column; /* One below the other */
    /* gap: 15px; */
    max-width: 450px;
    text-align: left;
    max-width: 33vw;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: translateY(-20px);
}

.thirdFrame-header {
    font-size: 1.9vw;
    font-weight: 800;
    line-height: 130%;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    color: #fff;
    padding-bottom: 16px;
}

.thirdFrame-desc {
       font-size: 1.5vw;
    line-height: 140%;
    opacity: 1;
    color: #fff;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    padding-bottom: 4px;
}

.thirdFrame-tandc {
        font-size: 0.85vw;
    line-height: 1.5;
    opacity: 1;
    font-weight: 400;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

.thirdFrame-tandc a {
       text-decoration: underline;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    padding: 0px;
    color: #B5D7F4;
        padding: 0px;
    min-width: auto;
    min-height: auto;
}


.explore-more-container {
    position: fixed;
    bottom: 20px;       /* 20px from bottom */
    right: 10%;         /* 30% from right side of screen */
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px 20px;
    z-index: 1000;      /* Ensure it sits above all sections and the card */
    
    /* Hidden on load */
    visibility: hidden;
    transform: translateY(20px); 
    pointer-events: none; 
    display: flex;
    flex-direction: row;
    z-index: 13;
    border-radius: 12px;
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    gap: 40px;
    padding: 16px;
    justify-content: center;
    align-items: center;
    /* width: 541px; */
    opacity: 0;
    transition: opacity 1s ease-in-out, visibility 0s 1s;
    background-color: rgba(0, 0, 0, 0.65);

}

.explore-more-left p { color: white; margin: 0; line-height: 1.2; }
.sticky-header { font-weight: bold; font-size: 1.2vw; padding-bottom: 0px;}
.sticky-desc { font-size: 1vw; opacity: 0.8; }

.sticky-header {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.08px;
  padding-bottom: 5px;
}

.sticky-desc {
  font-family: "BentonSans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.07px;
}


.explore-more-right a {
        display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 0px;
    width: 162px;
    background-color: #006FCF;
    border-radius: 4px;
    color: #FFFFFF !important;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    z-index: 9;
    height: 45px;
}

.section1-static {
    position: fixed; /* or absolute */
    top: 80px;       /* distance from the top */
    right: 10vh;     /* distance from the right */
    z-index: 10;   /* ensures it stays on top of other content */
     width: 15vw; 
}

.section1-static img {
    width: 14.5vw;    /* adjust size as needed */
    height: auto;
}


.section-4 {
    position: relative;
    width: 100%;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 4; /* Higher than section 3 to ensure it slides over or follows correctly */
}

.section4-img {
    width: 100%;
    max-width: 100%; /* Adjust based on your image size */
    height: auto;
    display: block;
    margin-bottom: 30px;
    margin-top: 10vh;
}


.section-5 { 
    z-index: 5; 
    margin-top: -15vh; 
    outline: 1px solid #ffffff; 
    /* Force the GPU to render it as a solid layer */
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}


/* Standard scrolling sections (Non-Sticky) */
.normal-scroll-section {
    position: relative; /* Normal flow */
    width: 100%;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10; /* Higher than sticky sections to slide over them */
    background-color: #fff;
}

/* Specific styling for Section 5 (White Background) */
.section-5 {
    background-color: #ffffff;
    color: #000;
    display: flex;
    flex-direction: row; /* Side-by-side logic */
    align-items: center; 
   justify-content: space-between; /* Align content to the left */
    padding-top: 20vh; /* Adjust height to match card verticality */
    padding-left: 10%; /* Space from the left edge */
    padding: 0 10%;
    position: relative;
    flex-direction: column;
        padding-left: 6.8vw !important;
    padding-right: 6.8vw !important;
}

.section-5 {
    position: relative;
    min-height: 100vh;
    background-color: #ffffff; /* White background */
    display: flex;
    align-items: center; /* Vertically center children */
    justify-content: flex-start;
    padding-left: 10%;
    z-index: 5;
    margin-top: -2px; /* Seal potential gaps */
    align-items: flex-start;
}

.card-landing-zone {
    width: 33.8vw; /* Matches original card width */
    height: 20vh;  /* Approximate height to maintain layout */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.white-bg-container {
        display: flex;
    flex-direction: column;
    /* gap: 20px; */
    max-width: 50vw;
    z-index: 10;
    color: #000;
    width: 50vw;
    padding-top: 60px;
}

.section-5-inner{
    display: flex;
    flex-direction: row;
    width: 100%;
}

.line-differentiator {
    position: absolute;
    bottom: 20%;
    left: 10%;
    width: 80%;
    height: 1px;
    background-color: #000;
    transform-origin: left;
    transform: scaleX(0); /* Start hidden */
    z-index: 6;
}


.white-bg-container .header-4 {
    font-size: 2.8vw;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    padding-bottom: 16px;
}

.white-bg-container p {
    font-size: 1.7vw;
    line-height: 1.4;
    color: #000;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
}

/* The vertical line */
.line {
    width: 100%;
    height: 1px;
    background-color: #006FCF;
    margin-top: 20px;
}

.purchase-expense-outer{
    display: flex;
    width: 100%;
    flex-direction: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 100%;
    display: grid;
    column-gap: 39px;
    margin: 0 auto;
}

/* Container for text alignment (30% from top) */
.fifthFrame-left-Outer {
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    width: 100%;
    padding-left: 10%;
    margin-top: 30vh; /* Consistent 30% top placement */
    color: #000; /* Dark text for white background */
}

/* Hidden states for reveal */
.fifthFrame-left, .fifthFrame-right {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    -webkit-clip-path: inset(0 0 100% 0);
    transform: translateY(-20px);
}

.fifthFrame-left p { font-size: 8vw; font-weight: 900; line-height: 1; }
.fifthFrame-header { font-size: 2vw; font-weight: 800; margin-bottom: 10px; }

/* This ensures section 4 stays behind section 3 until section 3 is done */
.section-4, .section-5 {
    position: relative;
    z-index: 1; /* Lower than sticky sections to stay beneath them */
    background: #000;
}

.section-5{
    background-color: #fff;
}

/* Ensure the sticky sections have a higher z-index than the normal ones */
.section-1 { z-index: 10; }
.section-2 { z-index: 11; background-color: transparent;}
.section-3 { z-index: 12; }

/* Critical: Add a spacer equal to the number of sticky sections 
   to push the normal content down */
.sticky-spacer {
    height: 300vh; /* 3 sections * 100vh each */
    pointer-events: none;
}

.line-differentiator {
    position: absolute;
    bottom: 20%; /* Sits underneath the centered card */
    left: 10%;
    width: 80%;
    height: 1px;
    background-color: #000;
    transform-origin: left;
    z-index: 6;
}

.spacer { height: 100vh; background: #000; position: relative; z-index: 3; }


.section5-header {
    color: rgb(0, 0, 0);
    font-family: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 40px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    padding-bottom: 16px;
    padding-top: 120px;
    margin: 0px;
}

.section5-desc {
    color: rgb(0, 0, 0);
    font-family: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    margin: 0px;
}

.purchase-expense-outer {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    max-width: 100%;
    display: grid;
    column-gap: 2vw;
    margin: 0px auto;
    /* margin-top: 120px; */
}

.purchase-expense-inner-left .purchase-header, .purchase-expense-inner-right .purchase-header {
   color: rgb(0, 111, 207);
    font-family: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    padding: 0px 0px 16px;
    margin: 0px;
    font-weight: 700;
    line-height: 140%;
}

.purchase-desc{
    color: #404347;
    font-family: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 1.3vw;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.tooltip-pomona{
    font-size: 1.3vw !important;
}

.parallax-img1-container, 
.parallax-img2-container {
    width: 100%;
    height: 425px; /* Adjust based on your design */
    overflow: hidden;
    position: relative;
    /* margin-top: 32px; */
}

.parallax-img1, 
.parallax-img2 {
    width: 100%;
    /* height: 100%; 
    object-fit: cover;
    position: absolute; */
    top: 0;
}

.sixthFrame-left-Outer-container {
    max-width: 100%;
    background-color: rgb(255, 255, 255);
    padding-left: 6.8vw !important;
    padding-right: 0px;
    margin: auto;
}

.crad-expense-outer {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
    display: grid;
    column-gap: 0px;
    z-index: 9;
    position: relative;
    margin: 0px auto;
}

.card-expense-inner-left {
    padding-top: 80px;
    /* padding-bottom: 80px; */
        width: 46vw;
    padding-right: 4vw;
}

.card-expense-inner-left .card-header {
    color: rgb(38, 38, 38);
    font-family: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
    /* font-size: 32px; */
    font-size: 2.25vw;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    text-transform: uppercase;
    padding-bottom: 16px;
}

.card-expense-inner-left .card-desc {
    color: rgb(0, 0, 0);
    font-family: BentonSans, "Helvetica Neue", Helvetica, sans-serif;
    /* font-size: 20px; */
    font-size: 1.4vw;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-bottom: 40px;
    /* border-bottom: 1px solid rgb(0, 0, 0); */
}

.accordionExpense {
    margin: 0px auto;
    background: rgb(255, 255, 255);
    overflow: hidden;
}

.accordionExpense-header {
    position: relative;
    padding: 0px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    padding-top: 32px;
    /* border-top: 1px solid #737373; */
    border-top: 1px solid #E0E0E0;
    color: #006FCF;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    /* font-size: 18px; */
        font-size: 1.45vw;
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.accordionExpense-header.active{
     /* border-top: 1px solid rgb(0, 0, 0); */
     border-top: 1px solid #000000;
}

.accordionExpense-header::after {
    content: '';
    position: absolute;
    right: 20px;
    width: 13px;
    height: 14px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
    transition: transform 0.3s ease, border-color 0.3s ease;
}


.accordionExpense-header.active::after {
    transform: rotate(-135deg);
}

.accordionExpense-content { 
            display: none; 
            padding: 24px 0px 0px; 
            font-size: 0.95rem;
            color: #595959;
            /* border-bottom: 1px solid #000; */
            line-height: 1.5;
            font-family : "Helvetica Neue", Helvetica, sans-serif;
            /* font-size: 16px; */
            font-size: 1.15vw;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
        }

    .accordionExpense-content.accordionExpense-content3{
        padding-top: 0px;
    }

        .exp-desc{
            color: #595959;
            /* Body/Body XSmall */
            font-family : "Helvetica Neue", Helvetica, sans-serif;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 150%;
            letter-spacing: 0.1px;
            margin-top: 5px;
            text-indent: -14px;
            padding-left: 16px;
        }

        .accordionExpense-content a{
            padding: 24px 0px; 
            font-size: 0.95rem;
            color: #006FCF;
            line-height: 1.5;
            font-family : "Helvetica Neue", Helvetica, sans-serif;
            /* font-size: 16px; */
            font-size: 1.15vw;
            font-style: normal;
            font-weight: 400;
            line-height: 140%; /* 25.2px */
            text-decoration: underline;
        }

        .accordionExpense-content a:hover{
            color: #006FCF !important;
        }

        .accordionExpense-content a{
            padding: 0px !important;
            margin: 0px !important;
                min-height: auto;
        }

        .is-open { display: block; }

        .accordionExpense-item-border{
            height: 1px;
            /* background-color: #737373; */
                margin-top: 32px;
        }


        .accordionExpense-header span sup::after {
    content: "\A";      /* This is the CSS code for a New Line */
    white-space: pre;  /* Essential to make the browser respect the new line */
    display: block;    /* Forces the element to take up the full width */
        height: 0px;
}

.card-expense-inner-right.parallax-container-lower {
   position: relative;
    width: 100%;
    /* Matches the 826/558 ratio (~1.48) */
    aspect-ratio: 826 / 1060; 
    overflow: hidden;
    background-color: #fff; /* Optional: hides flicker during load */
}

.card-expense-inner-right-img.parallax-img-lower {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* 140% height gives significant vertical room for parallax */
    height: 140%; 
    object-fit: cover;
    will-change: transform;
}

.section-7{
    background-color: #fff;
    padding-bottom: 80px;
    padding-top: 40px;
    text-align: center;
    flex-direction: column;
}

.animated-card {
    width: 100%;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 148px;
}

.card-anim {
    position: absolute;
    margin-bottom: 70px;
}

.explore-more-header {
    color: #262626;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 500;
    line-height: 120%;
    margin: 0px;
    padding: 40px 0px 16px 0px;
    display: block;
}

.explore-more-desc {
    color: #262626;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    padding-bottom: 40px;
    margin: 0px;
    display: block;
}

a.explore-more-cards, .section-7 a{
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0px 0px;
    width: 162px;
    background-color: #006FCF;
    border-radius: 4px;
    color: #FFFFFF;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    text-decoration: none;
    z-index: 9;
    height: 45px;
}

.section-8 {
    display: flex;
    padding: 24px 188px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    background-color: #F4F4F4;
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
}

.social-media-container {
    justify-content: center;
    align-items: center;
    display: flex;
    text-align: center;
}

.section-8 span {
    color: #404347;
    text-align: center;
    font-family: 'BentonSans', "Helvetica Neue", Helvetica, sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 110%;
    margin-right: 24px;
}

.section-8 img {
    width: 32px;
    /* margin-right: 24px; */
}

.section-8 .social-icons-desktop a{
    margin-right: 24px;
}

.accordionTandC {     
    max-width: 1240px;
    padding: 0px 32px;
    margin: 0 auto; background: #fff; 
    border-radius: 0px;
    overflow: hidden;
 }

 .accordionTandC-outer{
    background-color: #fff;
        z-index: 10;
    position: relative;
 }
        
        .accordionTandC-header { 
            position: relative;
            padding: 16px 15px 24px 45px; /* Extra left padding for the arrow */
            cursor: pointer; 
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            color: #000;
                font-family: "Helvetica Neue", Helvetica, sans-serif;
                font-size: 14px;
                font-style: normal;
                font-weight: 400;
                line-height: 150%;
                margin-top: 0px;
                cursor: pointer;
        }

        /* The Arrow Icon */
        .accordionTandC-header::before {
            content: '';
            position: absolute;
                left: 20px;
            width: 13px;
            height: 13px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            transform: rotate(-45deg); /* Pointing Right (Collapsed) */
            transition: transform 0.3s ease, border-color 0.3s ease;
                margin-top: -5px;
        }

        /* Active State for Header and Arrow */
        .accordionTandC-header.active { background: #fff; color: #000; }
        
        .accordionTandC-header.active::before {
            transform: rotate(45deg); /* Pointing Down (Open) */
            border-color: #000;
        }

        .accordionTandC-content { 
            display: none; 
            padding: 20px 20px; 
            font-size: 0.95rem;
            color: #555;
            line-height: 1.5;
            padding-top: 0px;
        }

        .is-open { display: block; }

        .tandc-header{
     color: #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    margin-top: 0px;
    margin-bottom: 2px;
}

.tandc-desc{
     color: #3D3D3D;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 0px;
    margin-bottom: 24px;
}

.tandc-desc a{
     color: #0066BE !important;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin-top: 0px;
    text-decoration-line: underline;
    padding: 0px;
    min-width: auto;
    min-height: auto;
}

.info-icon {
    width: 24px !important;
    margin-left: 5px;
}

.section-6{
    /* margin-top: 120px;
        margin-bottom: 120px; */
    margin-top: 120px;
    margin-bottom: 90px;
}

.section-4 img{
    width: 100%;
}

.section1-tab{
    display: none;
}

 .section1-mob{
    display: none;
}


.mob-tab{
        display: none;
    }

/* @media (min-width: 768px) and (max-width: 1024){
  .section1-desktop{
    display: none;
  }
  .section1-tab{
    display: block;
  }
   .section1-mob{
    display: none;
  }
}

@media (max-width: 768px){
    .section1-desktop{
    display: none;
  }
  .section1-tab{
    display: none;
  }
  .section1-mob{
    display: block;
  }

} */

.white-bg-container-right{
    width: 50vw;
    text-align: right;
}

.dup-main-card{
    transform: scale(0.68); 
    transform-origin: top center;
}

.seperator{
    width: 100%;
    height: 1px;
    background-color: #000;
    margin: 20px 0;
    transform: scaleX(0);
    margin-top: 64px;
    margin-bottom: 64px;
}


.two-text {
  width: 13vw;
}

.five-text {
  width: 13vw;
}


#moving-image img{
    width: 100%;
    border-radius: 21px;
}



/* Tablet*/
@media screen and (max-width: 1025px) {

    /* #intro-video{
        display: none;
    }

    #intro-video-mob{
        display: block;
    } */

    .purchase-desc-outer{
        margin-bottom: 0px;
    }

    .seperator{
        margin-top: 56px;
    margin-bottom: 56px;
}

    .section1-desktop {
        display: none !important;
    }

    .cardInitialTop{
        width: 100%;
    }

    /* If you want the tab version to show when desktop is hidden */
    .section1-tab.sec2 {
        display: block; 
        object-fit: contain;
        height:95%;
    }

    .section1-tab{
        display: block; 
    }

    .section-1 .section1-tab{
        height: 100%;
    }
        

    .section1-mob{
        display: none !important;
    }

    .section1-static img {
        width: 20.5vw;
        height: auto;
    }

    .main-card{
        width: 55.8vw;
        left: 4%;
        top: 20vh;
    }

    .hero-content{
        position: absolute;
        bottom: 14vh;
        left: 4%;
        padding-left: 0px;
        margin-top: 0px;
        width: 100%;
        display: block;
        min-width: 100%;
    }
    

    .intro-text {
        width: 16.3vw;
    }

    .graphite-text {
        width: 40vw;
        padding-bottom: 24px;
    }

    .parallax-text{
        font-size: 3.7vw;
    }

    .two-text {
    width: 28vw;
  }

  .five-text {
    width: 28vw;
  }

  .overlay-image {
    display: none;
  }


  .section1-static {
    width: 20vw;
    right: 5vh;
  }

    .hero-desc{
        font-size: 3.7vw;
        padding-bottom: 32px;
    }

    .section-1{
        padding-left: 0px;
        padding-right: 0px;
        padding: 0px;
    }

    .secondFrame-left-Outer{
        flex-direction: column;
        /* margin-top: -17vh; */
        color: white;
        padding-left: 14%;
    }

    .thirdFrame-left-Outer{
        flex-direction: column;
        /* margin-top: 24vh; */
        color: white;
        padding-left: 12%;
        gap: 30px;
    }

    .thirdFrame-left-Outer{
        flex-direction: column;
    }

    .section-2{
        background-color: transparent;
    }

    .secondFrame-left p, .thirdFrame-left p{
        font-size: 17vw;
    }

    .secondFrame-left span, .thirdFrame-left span{
        font-size: 4vw;
    }

    .secondFrame-right, .thirdFrame-right{
        min-width: 72vw;
    }

    .secondFrame-header, .thirdFrame-header{
        font-size: 4.7vw;
    }

    .secondFrame-desc, .thirdFrame-desc{
        font-size: 2.8vw;
    }

    .secondFrame-tandc, .thirdFrame-tandc{
        font-size: 1.9vw;
        padding-top: 10px;
    }

    .purchase-expense-outer{
        grid-template-columns: repeat(1, minmax(0px, 1fr));
            margin-top: 56px;
    }

    /* .parallax-img1-container, .parallax-img2-container{
        height: 43vw;
        margin-top: 0px;
    } */

    .white-bg-container{
            width: 100%;
    max-width: 100%;
    }

    .white-bg-container .header-4{
        line-height: 1.3;
    }

    .white-bg-container p{
        font-size: 2.3vw;
        line-height: 1.4;
    }

    .purchase-expense-inner-left .purchase-header, .purchase-expense-inner-right .purchase-header{
        font-size: 2.2vw;
        padding-bottom: 8px;
    }

    .purchase-desc{
        font-size: 2.1vw;
        padding-bottom: 40px;
        margin-bottom: 0px;
    }

    .tooltip-pomona{
        font-size: 2.1vw !important;
    }

    .purchase-expense-inner-right .purchase-desc-outer {
        padding-bottom: 40px;
        margin-bottom: 0px;
    }

    .purchase-desc-outer{
        margin-bottom: 0px !important;
    }

    /* .purchase-expense-inner-right{
        margin-top: 40px;
    } */

    .purchase-expense-inner-right .purchase-desc{
        padding-bottom: 8px;
    }

    .crad-expense-outer{
        grid-template-columns: repeat(1, minmax(0px, 1fr));
    }

    .sixthFrame-left-Outer-container{
        padding-left: 64px !important;
        padding-right: 64px !important;
        margin: 0px;
        width: 100%;
    }

    .card-expense-inner-left{
        width: 100%;
        padding: 0px;
    }

    .card-expense-inner-right.parallax-container-lower{
        display: none;
    }

    .accordionExpense-header span sup::after {
    content: "";
    white-space: pre;
    display: block;
}

.card-expense-inner-left .card-header{
    font-size: 24px;
    padding-bottom: 12px;
    line-height: 130%;
}

.card-expense-inner-left .card-desc{
    font-size: 18px;
}

.accordionExpense-header{
    margin-top: 24px;
}

.accordionExpense-content{
        font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.accordionExpense-content a{
        font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
}

.section-7{
    padding-top: 64px;
    padding-bottom: 64px;
        padding-left: 32px;
    padding-right: 32px;
}

.explore-more-header{
    padding-top: 32px;
    font-size: 24px;
    font-weight: 700;
    line-height: 130%;
    padding-bottom: 12px;
}

.explore-more-desc{
    padding-bottom: 64px;
    color: #595959;
}

.explore-more-container{
    width: 64vw;
    left: 50%;
  transform: translateX(-50%);
      padding: 12px;
}

.sticky-header{
    font-size: 2.1vw;
    opacity: 1;
}
.sticky-desc {
    font-size: 1.9vw;
    opacity: 1;
}

.seperator{
        margin-top: 56px;
    margin-bottom: 56px;
}

.purchase-expense-outer{
    margin-top: 0px;
}

.section-6 {
    margin-bottom: 40px;
}

}


/*Mobile Styles */
@media screen and (max-width: 767px) {
    .section1-desktop {
        display: none !important;
    }

    /* If you want the tab version to show when desktop is hidden */
    .section1-tab {
        display: none !important;
    }

    .section1-mob{
        display: block !important;
    }

    .sixthFrame-left-Outer-container{
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin: 0px;
        width: 100%;
    }

    .blue-nav-icon{
        display: none;
    }

    .section-7 {
        padding-top: 16px;
        padding-bottom: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .accordionTandC{
        padding: 0px 16px;
    }
    .accordionTandC-content{
        padding-left: 0px;
        padding-right: 0px;
    }
    .social-media-container{
        flex-direction: column-reverse;
    }
    .section-8{
        padding: 16px;
    }

    .section-8 span{
        font-size: 18px;
        margin-top: 24px;
    }

    .accordionTandC-header::before{
            left: 6px;
    }

    .accordionTandC-header{
        padding-left: 35px;
    }

    .section-5{
        min-height: auto;
        padding-left: 16px !important;
        padding-right: 16px !important;
    } 

    .section1-static img{
        /* width: 36vw; */
         width: 100%;
    }

    .section1-static{
        top: 38px;
        left: 32px;
        width: 37vw;
    }
    .section-1 .section1-mob{
        object-fit: contain;
        height: auto;
    }

    .main-card{
        width: 63.4vw; 
        left: 7vw;   
    }
        .intro-text {
        width: 30.0vw;
    }

    .graphite-text{
        width: 65.8vw;
    }

    .parallax-text {
        font-size: 6.3vw;
    }
    .hero-desc {
        font-size: 6.3vw;
        padding-bottom: 24px;
    }
    .hero-content{
        width: 90%;
        min-width: 90%;
        top: 53vh;
        left: 8vw;
    }
    .card-anim{
        width: 50%;
    }

    .explore-more-container{
        width: 100%;
        bottom: 0px;
        left: 0px;
    }

    .sticky-header {
        font-size: 3.7vw;
        opacity: 1;
    }

    .sticky-desc{
        font-size: 3.3vw;
        opacity: 1;
    }

    .explore-more-container{
        gap: 16px;
        border-radius: 0px;
        max-width: 100%;
    right: 0px;
    transform: translate(0px, 0px) !important;
    width: 100%;
    left: 0px;
    margin: 0 auto;
    /* border-top: 1px solid #fff 0.65; */
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    }

    .card-expense-inner-left .card-header {
        font-size: 22px;
        padding-bottom: 8px;
        line-height: 130%;
    }

    .card-expense-inner-left .card-desc {
        font-size: 16px;
    }

    .accordionExpense-header {
        font-size: 16px;
    }

    .section-7 {
        /* padding-top: 56px; */
        padding-bottom: 56px;
    }

    .explore-more-header{
        font-size: 22px;
        padding-bottom: 8px;
    }

    .explore-more-desc{
        padding-bottom: 56px;
    }

    .section-8 span{
        margin-right: 0px;
        margin-top: 15px;
    }

    .hero-cont-links1{
            font-size: 12px;
            margin-bottom: 24px;
    }

    .hero-cont-links2{
           font-size: 12px;
    }

    .hero-cont-links3{
            font-size: 12px;
    }

    .section1-static {
    /* width: 36vw; */
    width: 100%;
    top: 60px;
    left: 0px;
  }

  .two-text {
    width: 32vw;
  }

  .five-text {
    width: 32vw;
  }

  .seperator{
        margin-top: 40px;
        margin-bottom: 40px;
}
    
}

@media (max-width: 767px){
    .tab-desktop{
        display: none !important;
    }
    .section-2 .parallax-img{
        height: 100%;
    }

    .secondFrame-left-Outer{
        /* margin-top: -21vh; */
        padding-left: 15px;
        padding-right: 15px;
    }

    .thirdFrame-left-Outer{
        /* margin-top: -21vh; */
        padding-left: 15px;
        padding-right: 15px;
    }

    .secondFrame-left p, .thirdFrame-left p {
        font-size: 23.2vw;
    }
    
    .secondFrame-right, .thirdFrame-right{
        min-width: 100%;
    }

    .secondFrame-header, .thirdFrame-header {
        font-size: 6.2vw;
        padding-bottom: 12px;
    }

    .secondFrame-desc, .thirdFrame-desc {
        font-size: 4.2vw;
    }

    .secondFrame-tandc, .thirdFrame-tandc {
        font-size: 3.2vw;
        padding-top: 10px;
    }

    .section-3 .parallax-img{
            height: 100%;
    }

    .white-bg-container .header-4{
        font-size: 5.6vw;
    }

    .white-bg-container p {
        font-size: 4.8vw;
        line-height: 1.4;
    }

    .purchase-expense-inner-left .purchase-header, .purchase-expense-inner-right .purchase-header {
        font-size: 4.1vw;
        padding-bottom: 8px;
    }

    .purchase-desc{
        font-size: 4.2vw;
    }

    .tooltip-pomona{
        font-size: 4.2vw !important;
    }

    .parallax-img1, .parallax-img2{
        /* height: 100%; */
    }

    .main-card{
        top: 16vh;
    }

    .accordionExpense-header {
    margin-top: 0px;
  }

}

@media screen and (min-width: 768px){
    .tab-desktop{
        display: block !important;
    }

    .section-8{
        padding-left: 0px;
        padding-right: 0px;
    }

    .accordionExpense-header {
    margin-top: 0px;
  }



}

/* Desktop Styles (Default) */
@media screen and (min-width: 1025px) {
    .above-1024{
        display: block !important;
        opacity: 1 !important;
    }

    .below-1025{
        display: none !important;
    }

    .between-768-1024{
        display: none !important;
        opacity: 0 !important;
    }

    .below-768{
        display: none !important;
        opacity: 0 !important;
    }

    .section1-tab {
        display: none;
    }
    .section1-desktop {
        display: block; /* or block, depending on your layout */
        /* height: 100%; */
    }
    .section-2 .section1-desktop {
        height: 100%;
    }
    .section1-mob{
        display: none !important;
    }
    /* 1. Make the main wrapper a flex container */
.purchase-expense-outer {
  display: flex;
  align-items: stretch; /* Ensures the left and right columns are equal height */
}

/* 2. Make the inner columns flex containers to push content */
.purchase-expense-inner-left, 
.purchase-expense-inner-right {
  display: flex;
  flex-direction: column;
  flex: 1; /* Ensures both columns take up equal width */
}

/* 3. Force the description containers to grow and fill the available space */
.purchase-desc-outer {
  flex-grow: 1;
  display: flex;
}

.purchase-desc {
  flex-grow: 1;
  /* Optional: add a background or border here to see the equal heights */
  margin: 0; 
}

.section-2 { z-index: 11; background-color: transparent;height: 175vh;}


.section-3{
        margin-top: -55vh;
} 

}


@media screen and (min-width: 1200px) and (max-width: 1400px){
    /* .secondFrame-left-Outer{
            margin-top: -26vh;
    } */
    .thirdFrame-left-Outer {
            /* margin-top: -22vh; */
    }
    .section-7 {
    padding-top: 0px;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1199px){
    .secondFrame-left-Outer{
               /* margin-top: -28vh; */
               padding-left: 4%;
        gap: 20px;
    }
    .thirdFrame-left-Outer {
            /* margin-top: -23vh; */
            padding-left: 4%;
        gap: 20px;
    }

    .parallax-img{
        height: 129%;
    }

    .section-7 {
    padding-top: 60px;
  }

  .section-6{
        margin-top: 0px;
  }

  .card-expense-inner-right.parallax-container-lower{
    aspect-ratio: 826 / 1156;
  }

  .image-dest{
    /* display: block; */
    opacity: 0;
    /* transform: scale(0.5) !important; */
    visibility: hidden;
    transform-origin: right center;
}


}



@media screen and (min-width: 768px) and (max-width: 900px){
    /* .secondFrame-left-Outer{
        margin-top: -28vh;
    }

    .thirdFrame-left-Outer{
        margin-top: -32vh;
    } */

    .main-card{
        width: 56.8vw;
        top: 18vh;
    }

    .parallax-section.section-3{
        height: 70vh;
        /* height: 100vh; */
    }

}


@media screen and (min-width: 901px) and (max-width: 990px){

    .main-card {
        width: 56.8vw;
        left: 4%;
        top: 14vh;
    }

    .secondFrame-left-Outer{
        /* margin-top: -23vh; */
    }

     .thirdFrame-left-Outer{
        /* margin-top: -23vh; */
    }

}


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

    .main-card {
        width: 56.8vw;
        left: 4%;
        top: 14vh;
    }

    .secondFrame-left-Outer{
        /* margin-top: -25vh; */
    }

    .thirdFrame-left-Outer{
        margin-top: -17vh;
    }

    .parallax-img1-container, .parallax-img2-container{
        height: 350px;
    }

}



@media screen and (min-width: 768px) and (max-width: 1023px){
    .section-6{
        margin-top: 64px;
    }
    .section-5{
        padding-left: 8.25vw !important;
        padding-right: 8.25vw !important;
    }

    .hero-cont-links1, .hero-cont-links2, .hero-cont-links3{
        font-size: 12px;
    }

    .above-1024{
        display: none !important;
        opacity: 0 !important;
    }

    .between-768-1024{
        display: block !important;
        opacity: 1 !important;
    }

    .below-768{
        display: none !important;
        opacity: 0 !important;
    }

    .secondFrame-left-Outer{
        /* margin-top: 11vh; */
    }

    .thirdFrame-left-Outer{
        /* margin-top: 15vh; */
    }


    .sup-mob{
        top: -0.1em !important;
    }

}


@media screen and (min-width: 1100px) and (max-width: 1241px){
    .parallax-img1-container, .parallax-img2-container{
            height: 290px;
    }
    .section-6 {
        margin-top: 120px;
    }
}

.tooltip-pomona .tooltiptext-pomona {
    visibility: hidden;
}

/* The tooltip text */
  .tooltip-pomona .tooltiptext-pomona {
     visibility: hidden;
    width: 90vw;
    background-color: #EBF3FB;
    color: #262626;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 var(--Numbers-8, 8px) var(--Numbers-16, 16px) 0 rgba(0, 0, 0, 0.05);
    
    /* Position at the bottom */
    position: absolute;
    z-index: 1;
    top: 125%; /* Space below the text */
    left: 24%;
    margin-left: -94px; /* Center it (half of width) */
    
    /* Fade in */
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Tooltip arrow (optional) */
  .tooltip-pomona .tooltiptext-pomona::after {
    content: "";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #EBF3FB transparent;
  }

  /* Show on hover */
  .tooltip-pomona:hover .tooltiptext-pomona {
    visibility: visible;
    opacity: 1;
  }


         
 .tooltip-pomona {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #006FCF;
    font-family: "Helvetica Neue";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    text-decoration-line: underline;
  }


.section-1, .section-2, .section-3, .section-4, .section-5 {
    /* overflow: visible !important; */
    /* position: relative;  */
}

/* Also ensure no clip-paths are accidentally active on the parallax images */
.parallax-img {
    /* clip-path: none !important; */
    /* will-change: transform;  */
}


/* Tooltip container */
/* .tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}


.tooltiptext {
  visibility: hidden; 
  width: 515px;
  text-align: center;
  padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 10px;
  position: absolute;
  z-index: 1; 
  border-radius: 4px;
background: #EBF3FB;

color: #262626;
font-family: "Helvetica Neue";
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 150%; 

}


.tooltip:hover .tooltiptext {
  visibility: visible;
}

.tooltip-main-text{
color: #006FCF;
font-family: "Helvetica Neue";
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: normal;
letter-spacing: 0.08px;
text-decoration-line: underline;
} */


.purchase-desc-outer{
        display: flex;
    flex-direction: column;
    margin-bottom: 32px;
}
.info-container{
        margin-top: auto;
}

.exp-desc-ext{
    color: #595959;
font-family: "Helvetica Neue";
font-size: 12px;
font-style: normal;
line-height: 150%;
display: block;
    
}

.sub-head-desc{
    color: #595959;
/* Body/Body XSmall Bold */
font-family: "Helvetica Neue";
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 150%;
/* text-decoration-line: underline; */
display: block;
margin-top: 20px;
}

.exp-desc-ext a{
    font-size: 12px;
}



/* .cardInitialTop {
            width: 100%;
            
            
           
            background-size: cover;
            background-position: center;
            border-radius: 18px;
           
            
           
            transform-origin: center center;
            
           
            opacity: 0;
            transform: rotateY(60deg);

           
            animation: swingIntoPlace 3s cubic-bezier(0.19, 1, 0.22, 1) 0.5 forwards;
            animation-delay: 4s;
        }

        @keyframes swingIntoPlace {
            0% {
                opacity: 0;
                transform: rotateY(60deg);
                box-shadow: -30px 20px 50px rgba(0,0,0,0.5);
            }
            100% {
                opacity: 1;
                transform: rotateY(0deg); 
                box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            }
} */

@media screen and (min-width: 1025px) {


     

}



.purchase-header,
.purchase-desc {
  opacity: 0;
  transform: translateX(10px);
  will-change: transform, opacity; /* Optimizes performance */
}

.accordionExpense-item {
  opacity: 0;
  transform: translateX(30px);
  will-change: transform, opacity; /* Optimizes performance */
}

.card-expense-inner-right {
  position: relative; /* This is the anchor for the overlay */
}

.overlay-image {
  position: absolute;
  top: 0;
  left: 0; /* Aligns exactly at the start of the right column */
  z-index: 10; /* Sits on top of the base image */
  width: auto; /* Adjust if you want it smaller than the column */
  pointer-events: none; /* Allows clicks to pass through to the base image if needed */
}

.base-image {
  display: block;
  width: 100%;
  height: auto;
}


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

    .tooltiptext{
        display: none;
    }

  /* .tooltip-pomona {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .tooltip-pomona .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 32vw;
    background-color: #ebf3fb;
    color: #262626;
    padding: 8px 12px;
    border-radius: 4px;
    z-index: 1;
    opacity: 1;
    transition: opacity 0.6s;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
  }

  .tooltip-pomona:hover .tooltiptext {
    visibility: visible;
    top: 30px;
    left: 0vw;
  }

  .tooltip-main-text::after {
    visibility: hidden;
  }

  .tooltip-pomona:hover .tooltip-main-text::after {
    visibility: visible;
  }

  .tooltip-main-text::after {
    content: "";
    position: absolute;
    bottom: -26%;
    left: 5%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #ebf3fb transparent;
  }

  .tooltip-main-text {
    color: #006fcf;
    font-family: "Helvetica Neue";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    text-decoration-line: underline;
  }

  .tooltip-pomona:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  } */
}


@media screen and (min-width: 468px){

.tooltiptext{
        display: none;
    }

}


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

.parallax-img1-container, .parallax-img2-container{
       height: 380px;

    }

    .above-1024{
        display: none !important;
        opacity: 1;
    }

}




@media (max-width: 468px){

    .purchase-desc-outer{
        margin-bottom: 0px;
    }
    .tooltiptext{
        display: none;
    }
    .hero-content{
        top:35vh;
    }

    .main-card {
        top: 20vh;
    }

    .secondFrame-left-Outer{
        /* margin-top: 20vh; */
    } 
    .thirdFrame-left-Outer{
        /* margin-top: 10vh; */
    }
    .section-6 {
        margin-top: 80px;
        margin-bottom: 60px;
    }
    .purchase-expense-inner-right .purchase-desc-outer {
        padding-bottom: 40px;
    }

    .parallax-img1-container, .parallax-img2-container{
        height: 225px;
    }
}


@media (max-width: 468px){
    .parallax-img1-container, .parallax-img2-container{
        height: 190px;
    }
    .parallax-section.section-3{
        height: 90vh;
        margin-top: -30vh;
        /* height: 100vh; */
    }
}

.tooltip-main-text{
    color: #006FCF;
    font-family: "Helvetica Neue";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    text-decoration-line: underline;
}

.tooltip-pomona{
        display: flex;
    align-items: center;
}

/*Remove once footer enabled*/
/* .section-8{
    margin-bottom: 70px;
} */


@media (min-width: 768px) {
    .tooltip-pomona .tooltiptext-pomona{
        width: 60vw;
        left: 14%;
    }
}

@media screen and (min-width: 1025px){
    /* The container */
  .tooltip-pomona {
    position: relative;
    display: inline-block;
    cursor: pointer;
    color: #006FCF;
    font-family: "Helvetica Neue";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0.08px;
    text-decoration-line: underline;
  }

  /* The tooltip text */
  .tooltip-pomona .tooltiptext-pomona {
    visibility: hidden;
    width: 40vw;
    background-color: #EBF3FB;
    color: #262626;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 var(--Numbers-8, 8px) var(--Numbers-16, 16px) 0 rgba(0, 0, 0, 0.05);
    
    /* Position at the bottom */
    position: absolute;
    z-index: 1;
    top: 125%; /* Space below the text */
    left: 50%;
    margin-left: -60px; /* Center it (half of width) */
    
    /* Fade in */
    opacity: 0;
    transition: opacity 0.3s;
  }

  /* Tooltip arrow (optional) */
  .tooltip-pomona .tooltiptext-pomona::after {
    content: "";
    position: absolute;
    bottom: 100%; /* At the top of the tooltip */
    left: 10%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #EBF3FB transparent;
  }

  /* Show on hover */
  .tooltip-pomona:hover .tooltiptext-pomona {
    visibility: visible;
    opacity: 1;
  }
} 


.info-icon{
    vertical-align: middle;
}



.image-dest{
    display: none;
}

.image-dest img{
    max-width: 100%;
    width: 100%;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px;
    border-radius: 16px;
}

.section-5-inner1{
    display: none;
}
@media (min-width: 1025px){
    
    .section-5-inner{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.image-dest{
    /* display: block; */
    opacity: 0;
    /* transform: scale(0.55) !important; */
    visibility: hidden;
    transform-origin: right center;
}

.section-5-inner1{
    background-color: transparent; 
    width: 70%;
    position:absolute;
    top: 210px;
    display: block; 
    /* visibility: hidden; */
}
}


@media (min-width: 1025px) and (max-width: 1300px){

    .image-dest{
    /* display: block; */
    opacity: 0;
    /* transform: scale(0.5) !important; */
    visibility: hidden;
    transform-origin: right center;
}

}

@media (min-width: 330px) and (max-width: 1025px){
.mob-tab{
        display: block !important;
    }
}




@media (min-width: 1301px) and (max-width: 1800px){

    .image-dest{
    /* display: block; */
    opacity: 0;
    /* transform: scale(0.7) !important; */
    visibility: hidden;
    transform-origin: right center;
}

}

@media (max-width: 600px) {
    .section-2{
        background-color: transparent !important;
    }

    /* .parallax-img1-container, .parallax-img2-container{
                height: 250vw;
    } */
}

@media (max-width: 767px){


    #moving-image img{
        border-radius: 10px;    
    }

    .above-1024{
        display: none !important;
        opacity: 0 !important;
    }

    .between-768-1024{
        display: none !important;
        opacity: 0 !important;
    }

    .below-768{
        display: block !important;
        opacity: 1 !important;
    }

    .section-8 .social-media-container a img{
        margin: 0px;
    }

    .section-8 .social-media-container a#rm-Facebook img{
        margin: 0px 24px;
    }

    .mob-footer a{
        display: flex;
        align-items: center;
        justify-content: right;
    }

    .social-media-container .section1-mob a{
        display: inline-block;
        padding: 0px 12px;  
    }

        .purchase-expense-inner-right {
        margin-top: 0px;
    }

    .desc-outer {
        padding-bottom: 40px;
    }

    .explore-more-header {
        padding-top: 10px;
    }

}

@media (min-width: 1200px) and (max-width: 1439px){
    /* .secondFrame-left-Outer{
            margin-top: -32vh;
    } */

    .thirdFrame-left-Outer{
            margin-top: -26vh;
    }
    .parallax-img1-container, .parallax-img2-container{
        height: 380px;
    }

    .section-5{
        min-height: auto;
    }

        .section-7 {
        padding-top: 30px;
    }

     .section-3 .parallax-img {
        height: 100%; 
        object-fit: cover;
    }

}


@media (min-width: 1440px) and (max-width: 1550px){
     /* .secondFrame-left-Outer{
            margin-top: -34vh;
    } */

    .thirdFrame-left-Outer{
            margin-top: -28vh;
    }
    .parallax-img1-container, .parallax-img2-container{
        height: 380px;
    }

    .section-5{
        min-height: auto;
    }

        .section-7 {
        padding-top: 30px;
    }

    .section-3 .parallax-img {
        height: 103%; 
        object-fit: cover;
    }

}


@media (max-width: 390px){
    .secondFrame-left-Outer{
        /* margin-top: 10vh; */
    }

    .thirdFrame-left-Outer{
        /* margin-top: 13vh; */
        gap: 10px;
    }

    .thirdFrame-header {
        padding-bottom: 7px;
    }

    .sup-mob{
        top: -0.3em !important;
    }

    .main-card {
        top: 14vh;
    }

    .hero-content {
        top: 40vh;
    }

    .graphite-text {
        width: 53.8vw;
        padding-bottom: 10px !important;
    }

    .hero-desc {
        font-size: 5.3vw;
        padding-bottom: 7px;
    }

    .hero-cont-links1{
        margin-bottom: 12px;
    }

}

@media (min-width: 400px) and (max-width: 500px){
     .secondFrame-left-Outer{
        /* margin-top: 15vh; */
    }
    .thirdFrame-left-Outer{
        /* margin-top: 15vh; */
    }
    .sup-mob{
        top: -0.3em !important;
    }
    .graphite-text {
        width: 53.8vw;
        padding-bottom: 10px !important;
    }

    .hero-desc {
        font-size: 5.3vw;
        padding-bottom: 7px;
    }

    .hero-cont-links1{
        margin-bottom: 12px;
    }
}


@media (min-width: 1200px) and (max-width: 1300px){
    .parallax-img1-container, .parallax-img2-container {
        height: 315px;
    }
    .section-5-inner1{
        /* margin-top: 40px; */
        top: 178px;
    }
    .image-dest{
        margin-right: -15px;
    }
    .card-expense-inner-right.parallax-container-lower{
        aspect-ratio: 826 / 1150;
    }

    .card-expense-inner-left{
        padding-top: 60px;
    }
    .sup-mob{
        top: -0.3em !important;
    }
}


@media (min-width: 1301px) and (max-width: 1500px){

     .section-5-inner1{
        /* margin-top: 40px; */
        top: 195px;
    }

    .image-dest{
        margin-right: -15px;
    }

    .sup-mob{
        top: -0.3em !important;
    }

}

@media (min-width: 1501px) {
    .image-dest{
        margin-right: -15px;
    }
    .white-bg-container{
        padding-top: 40px;
        padding-bottom: 30px;
    }
    .section-5-inner1{
        top: 240px;
    }
}

@media (max-width: 360px){
     .secondFrame-left-Outer{
        /* margin-top: 15vh !important; */
    }

    .thirdFrame-left-Outer{
        margin-top: 15vh !important;
        gap: 10px !important;
    }
}
@media (min-width: 361px) and (max-width: 375px){
     .secondFrame-left-Outer{
        /* margin-top: 15vh !important; */
    }

    .thirdFrame-left-Outer{
        /* margin-top: 20vh !important; */
        gap: 2px !important;
    }

    .thirdFrame-tandc{
        padding-top: 0px;
    }
    .thirdFrame-header{
        padding-bottom: 0px;
    }

    .thirdFrame-desc{
        font-size: 3.5vw;
    }

    .thirdFrame-header{
            font-size: 5.5vw;
    }
}





.main-card {
    will-change: transform; /* Prepares the mobile GPU for the movement */
    transition: none !important; /* Prevents CSS from lagging the JS movement */
}


footer hr{
        display: none;
    }

@media (max-width: 500px){
    .main-card{
        top: 138px !important;
        max-width: 52vw !important;
    }   

    footer hr{
        display: none;
    }

    #main-content-content{
        background-color: #000000;
    } 


    .graphite-text {
        width: 53.8vw;
        padding-bottom: 10px !important;
    }

    .hero-desc {
        font-size: 5.3vw;
        padding-bottom: 7px;
    }

    .hero-cont-links1{
        margin-bottom: 12px;
    }

    .hero-content a#rm-ExploreMore{
        height: 40px;
    }

    .hero-content {
        top: 35vh !important;
    }

    .hero-content{
        top: 32vh !important;
    }

}


@media (min-width: 376px) and (max-width: 390px){
     .secondFrame-left-Outer{
        /* margin-top: 23vh !important; */
    }

    .thirdFrame-left-Outer{
        /* margin-top: 23vh !important; */
        gap: 10px !important;
    }

    .hero-content{
        top: 30vh !important;
    }

}


@media (min-width: 391px) and (max-width: 414px){
     .secondFrame-left-Outer{
        /* margin-top: 23vh !important; */
    }

    .thirdFrame-left-Outer{
        /* margin-top: 23vh !important; */
        gap: 10px !important;
    }

    .hero-content{
        top: 32vh !important;
    }
}


@media (min-width: 415px) and (max-width: 440px){

     .secondFrame-left-Outer{
        /* margin-top: 23vh !important; */
    }

    .thirdFrame-left-Outer{
        /* margin-top: 23vh !important; */
        gap: 10px !important;
    }

     .hero-content{
        top: 32vh !important;
    }

}


@media (min-width: 1025px){
.secondFrame-left-Outer{
    position: fixed; /* Keep it in place relative to the screen */
    
    left: 12%;      /* Adjust this to sit next to where the text was */
    width: 32.8vw;
    z-index: 100;    /* Higher than Section 1 (1) and Section 2 (2) */
    pointer-events: none; /* Allows clicking things behind it if needed */
    transition: none; 
    /* will-change: transform, top; */
    z-index: 20;
    will-change: transform;
    display: flex;
    flex-direction: row; 
    align-items: flex-start;
    justify-content: flex-start;
    gap: 35px;
    width: 100%;
    color: white;
    padding-left: 0%;
}
}

.section-2{
    position: relative
}


@media (min-width: 1025px) and (max-width: 1399px){
.secondFrame-left-Outer{
        margin-top: 10vh;
}
}

@media (min-width: 1400px) and (max-width: 1500px){
.secondFrame-left-Outer{
        margin-top: 6vh;
}
}


@media (min-width: 1501px) {
.secondFrame-left-Outer{
        margin-top: 6vh;
}
}


@media (max-width: 1025px){

.below-1025{
    display: block !important;
}

.below-1025 .secondFrame-left, .below-1025 .secondFrame-right{
    opacity: 1;
}

.secondFrame-left, .secondFrame-right{
        clip-path: none;
        -webkit-clip-path: none;
}

.thirdFrame-left, .thirdFrame-right{
        clip-path: none;
        -webkit-clip-path: none;
}

.secondFrame-left-Outer{
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    /* margin-top: 60px; */
}

.thirdFrame-left-Outer{
    z-index: 20;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    margin-top: 35px;
}

.secondFrame-left, .secondFrame-right{
    transform: none;
}

.thirdFrame-left, .thirdFrame-right{
    transform: none;
}

}


@media (max-width: 387px){
    /* .secondFrame-left-Outer{
        margin-top: 25vh;
    }

    .thirdFrame-left-Outer{
        margin-top: 25vh;
    } */

}

@media (max-width: 380px){
    /* .secondFrame-left-Outer{
        margin-top: 22vh;
    }

    .thirdFrame-left-Outer{
        margin-top: 22vh;
    } */

}

@media (max-width: 1025px) {
    .secondFrame-left, .secondFrame-right {
        transform: none;
        opacity: 0;
    }
.secondFrame-tandc, .thirdFrame-tandc{
        padding-top: 0px;
    }

    .secondFrame-header, .thirdFrame-header{
                font-size: 5.2vw;
    }

    .thirdFrame-left-Outer{
                gap: 5px !important;
    }
    
}