.intro {
  display: flex;
  justify-content: space-between; 
  align-items: center; 
  flex-direction: row; 
  flex-wrap: wrap; 
  align-content: center;
  padding: 1.2rem 3rem;
  padding-top: 44px;
  gap: 2rem;
  max-width: 1300px;
  margin: 0 auto;
  /* --- CHANGED --- */
  height: 100vh; /* Start at full viewport height */
  transition: height 1.5s cubic-bezier(0.16, 1, 0.3, 1); /* Smooth Apple-like easing */
}
.sparkle-heading-chapternav-section {
background-color: #1d1d1f;}

/* --- NEW CLASS --- */
/* This class will be added by JS after load */
.intro.intro-loaded {
  height: 56vh;
}

/* --- UPDATE MEDIA QUERY --- */
/* Ensure mobile stays 100vh regardless of the animation */
@media (max-width: 959px) {
  .intro, .intro.intro-loaded {
    height: 105vh;
        min-height: 600px;
            padding-top: 125px;
  }
}

.quicklinks {
  max-width: 1300px;
margin: 0 auto;

}
.content {
  color: var(--secondary-color);
}
.intro .content {
  max-width: 600px;
  z-index: 2;
}
.intro .content h1 {
  font-size:3rem;
      line-height: 1.1428571429;
    font-weight: 600; color: #fff;
    letter-spacing: .007em;
}
.intro  .content.price-calculator-ho-content h2 {
  font-size:1.5rem;
      line-height: 1.1428571429;
    font-weight: 600;color: #747474;
    letter-spacing: .007em;
    margin-top:24px;
    max-width:69%;
}
.intro .content h2 {
  font-size:3rem;
      line-height: 1.1428571429;
    font-weight: 500;
    letter-spacing: .007em;
}
.sparkle {
  color: var(--primary-color);
}

.introside {
  display: flex;
    z-index: 2;
  justify-content: flex-start; 
  align-items: center; 
  /* flex-flow: column wrap; */ 
  flex-direction: column; 
  flex-wrap: wrap; 
  align-content: center;
gap:5px;
}

.price-calculator-container {
  width:100%;
}
.price-calculator-intro {
justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    flex-direction: column;
    padding-top: 9vh;
    background-color: #fafafc;}
    

    /* PUBLIC/css/main.css */

/* --- Estimate Section Static Layout (Fixes) --- */

.estimate-cards-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

.estimate-card {
    /* Layout */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Align content to top */
    position: relative;
    min-height: 480px; /* Taller height to accommodate image + text space */
    /* Visuals */
    border-radius: 28px;
    overflow: hidden;
    background-color: #fff; /* White background for the "white space" */
    background-size: cover;
    background-position: center bottom; /* Image sits at the bottom */
    background-repeat: no-repeat;
    
    /* Interaction */
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 0.3s ease;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    
    /* Reset color to dark for visibility on white */
    color: #1d1d1f;
}

.estimate-card:hover {
    transform: scale(1.01);
    z-index: 2;
}

/* Content Container - Controls text positioning */
.estimate-card .get-an-estimate-slide-title {
    padding: 4.5rem 34px; /* Spacing from top/left */
    display: flex;
    gap:2vh;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-height: 50%;
    box-sizing: border-box;
    /* Ensure text stays in the top area */
    margin-bottom: auto; 
    z-index: 10; /* Sit above background image */
}

/* Title Styling */
.estimate-card .get-an-estimate-slide-title p:first-child {
    font-size: 28px;
    font-weight: 600;
    line-height: 1.1;
    color: #1d1d1f;
    max-width: 90%;
}

/* Description Text Styling */
.estimate-card .estimate-slide-text {
    font-size: 17px;
    line-height: 1.45;
    color: #424245;
    font-weight: 400;
    max-width: 85%; /* Prevent text from running too wide */
}

/* Link Styling (Mimic slide-link behavior) */
.estimate-card .arrow-link, .support-card-content .arrow-link {
    font-size: 17px;
    font-weight: 400;
    color: #ff6f00 !important; /* Apple Blue */
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    text-decoration: none;
}

/* Hover state for the link inside the card */
.arrow-link:hover {
    text-decoration: underline;
    color: #ff6f00 !important;
}

/* Fix the arrow icon color */
.estimate-card .arrow-link .arrow, .support-card-content .arrow-link .arrow {
    border-right: 2px solid #ff6f00 !important;
    border-bottom: 2px solid #ff6f00 !important;
    margin-left: 6px;
    margin-bottom: 2px;
}

/* PUBLIC/css/main.css */

/* --- Service Locator Card --- */
.service-locator-card {
    position: relative;
width: auto; 
    margin: 0 9vw 60px 9vw; /* Top | Right | Bottom | Left */    height: 600px; /* Fixed height for Desktop */
    border-radius: 28px;
    overflow: hidden;
    background-color: #f5f5f7;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    margin-bottom: 16vh;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-locator-card:hover {
    transform: scale(1.01);
}
.myChooseSparkle {
      padding-bottom: 9vh;
}
/* --- Background Layers --- */
.locator-backgrounds {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.bg-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
}

.bg-layer.is-visible {
    opacity: 1;
}

.bg-earth .bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bg-earth .bg-img-mobile {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.bg-form {
    background-color: #f5f5f7;
}

/* Sparkles SVG Container */
.locator-sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* --- Content Views (Desktop Default) --- */
.locator-content-wrapper {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 0 9vw;
    box-sizing: border-box;
}
.form-header-text {
font-size: 30px;
    line-height: 1.125;
    font-weight: 600;
    letter-spacing: 0.004em;
    color: rgba(0, 0, 0, 0.88);
    padding-bottom:24px;
}
.locator-view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Padding matches container to align content */
    padding: 0 9vw; 
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    /* Desktop Transitions (Fade/Slide) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.5s ease;
    pointer-events: none;
}

.locator-view.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Intro Styling */
.intro-text {
    font-size: 32px;
    font-weight: 600;
    color: #1d1d1f;
    margin-bottom: 24px;
    max-width: 500px;
    line-height: 1.1;
    text-shadow: 0 2px 4px rgba(255,255,255,0.8); 
}

/* --- Form View Layout (Desktop) --- */
.form-view-layout {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
}

.form-side {
    flex: 1;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

/* Mascot Side */
.mascot-side {
    flex: 1;
    /* MIN-WIDTH 0 is critical for Flexbox to allow shrinking */
    min-width: 0; 
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-bottom: 0;
    /* Slightly pull right to overlap edge if needed, or keep contained */
    padding-right: 0; 
    transition: opacity .3s ease;
    transform: translateX(25%);
}

.locator-mascot {
    /* Ensure image scales down on resize */
    object-fit: contain;
    
    /* Animation Setup */
    transform: scale(0.8) translateY(50px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Animate Mascot */
.locator-view.is-active .locator-mascot {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 1204px) {
      /* 4. Hide Mascot on Mobile */
    .mascot-side {
        transform: translateX(50%);
    }

}@media (max-width: 972px) {
      /* 4. Hide Mascot on Mobile */
    .mascot-side {
        transform: translateX(69%);
    }

}

/* --- Mobile Responsive Fixes --- */
@media (max-width: 959px) {
    
    /* 1. Fluid Height Container */
    .service-locator-card {
        height: auto !important; /* Let content dictate height */
        min-height: 350px; /* Minimum touch target */
    }
    
    .locator-content-wrapper {
        padding-top:50px;
        padding-left:50px;
        padding-right:38px;
        width:450px;
    }

    /* 2. Views: Switch to Relative Positioning + Display Toggle */
    /* This removes the "Absolute" whitespace issue */
    .locator-view {
        position: relative !important;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        padding: 0; /* Padding handled by wrapper */
        
        /* Reset Desktop Transitions */
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        
        /* Hide by default using display */
        display: none;
    }

    /* Show Active View */
    .locator-view.is-active {
        display: flex;
    }

    /* 3. Layout Adjustments */
    .locator-intro-view {
        align-items: flex-start;
        text-align: left;
    }

    .intro-text {
      padding-top:60px;
        font-size: 28px; /* Slightly smaller text */
        max-width: 100%;
        color: #1d1d1f; /* Ensure visibility */
        text-shadow: 0 1px 2px rgba(255,255,255,0.9); /* stronger shadow for readability */
    }

    .form-view-layout {
        flex-direction: column;
    }

    .form-side {
        width: 100%;
        max-width: 100%;
    }

    /* 4. Hide Mascot on Mobile */
    .mascot-side {
        display: none !important;
    }
}

@media (max-width: 667px) {
      .locator-content-wrapper {
        padding-top:50px;
        padding-left:38px;
        padding-right:38px;
        width:400px;
    }


}

.why-choose-sparkle-slide p {
  font-size: 1.8rem;
    line-height: 1.0714285714;
    font-weight: 600;
    letter-spacing: -.005em;
}

.sparkle-choose-title {
  width:50%;
}

 @media (max-width: 1252px) {

.index-subheader-section .sparkle-choose-title {
  width:55%;
}

}
  @media (max-width: 1140px) {

.index-subheader-section .sparkle-choose-title {
  width:59%;
}

}
 

@media (max-width: 1083px) {

.explore-our-services-header .index-title-text-responsive {
font-size:40px;}


}


  @media (max-width: 995px) {
.intro .content h1 {
    font-size: 2.4rem;
    line-height: 1.1428571429;
    font-weight: 600;
    letter-spacing: .007em;
}
.index-subheader-section .sparkle-choose-title {
  width:100%;
}

.explore-our-services-header .index-title-text-responsive, .where-we-service-section .index-title-text-responsive, .explore-our-services-section .index-title-text-responsive, .additional-services-section .index-title-text-responsive {
font-size:37px;}

.services-section .explore-our-services-header,.reviews-section .explore-our-services-header {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}
.explore-our-services-header .explore-our-services-header-links-container {
  padding-top:2.5vh;
  gap:12px;
}
}
@media (max-width:802px) {
  .bg-earth .bg-img {
    transform: translateX(90px);
}
}

@media (max-width:720px) {
  .bg-earth .bg-img {
    transform: translateX(100px);
    
}
/* NEW MARQUEE MODAL RESPONSIVE H2 STYLES */
#marquee-modal-body h2 {
  font-size:50px!important;
}/* NEW MARQUEE MODAL RESPONSIVE H2 STYLES */
#marquee-modal-body h2 {
  font-size:44px!important;
}
}
@media (max-width:696px) {
  .estimate-card .get-an-estimate-slide-title p:first-child {
    font-size:26px;
  }
  .estimate-card .estimate-slide-text {
    font-size:16px;
  }
  
}
@media (max-width:660px) {
  .estimate-card .get-an-estimate-slide-title p:first-child {
    font-size:24px;
  }
  .estimate-card .estimate-slide-text {
    font-size:15px;
  }
  
}
@media (max-width:633px) {
  .estimate-card .get-an-estimate-slide-title p:first-child {
    font-size:24px;
  }
  .estimate-card .estimate-slide-text {
    font-size:15px;
  }
  
}

/* Responsive Estimate Section Fixes */

/* Container Layout */
.estimate-cards-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    width: 100%;
    box-sizing: border-box;
}

/* Card Styling overrides for banner-card */
.banner-card.estimate-card-link {
    text-decoration: none;
    overflow: hidden;
    background-color: #fff; /* Ensure white background */
    border-radius: 28px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    transition: transform 0.3s ease;
    cursor: pointer;
    /* Flex-grow ensures equal height cards if one text is longer */
    flex: 1; 
    min-width: 0; /* Fix for flexbox overflow */
}

.banner-card.estimate-card-link:hover {
    transform: scale(1.01);
}

/* Ensure the internal row stacks vertically (Text top, Image bottom) */
.banner-card.estimate-card-link .banner-card-row {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

/* Text Area */
.banner-card.estimate-card-link .banner-card-copy-column {
    padding: 56px 30px 30px; /* Top padding for visual breathing room */
    text-align: center;
    flex-shrink: 0; /* Prevent text from shrinking */
}

/* Image Area */
.banner-card.estimate-card-link .banner-card-image-column {
    width: 100%;
    margin-top: auto; /* Pushes image to the bottom */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

/* Responsive Image */
.estimate-card-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-bottom-left-radius: 28px; /* Matches card radius */
    border-bottom-right-radius: 28px;
}


@media  (max-width:1355px) {
.estimate-card .get-an-estimate-slide-title p:first-child {
    font-size: 27px; }
  .estimate-card .estimate-slide-text {
    font-size: 16px;}
  .estimate-card .arrow-link,.support-card-content .arrow-link {
    font-size: 16px;}
  .estimate-card .get-an-estimate-slide-title .explore-our-services-link > .arrow, .support-card-content .explore-our-services-link > .arrow {
    width: 8px !important;
    height:8px!important;
margin-bottom:0px;
   }
}

@media  (max-width:1233px) {
  .estimate-card .get-an-estimate-slide-title p:first-child {
    font-size: 26px; }
  .estimate-card .estimate-slide-text {
    font-size: 15px;}
  .estimate-card .arrow-link, .support-card-content .arrow-link {
    font-size: 15px;}
  .estimate-card .get-an-estimate-slide-title .explore-our-services-link > .arrow, .support-card-content .explore-our-services-link > .arrow {
    width: 7px !important;
    height:7px!important;
margin-bottom:0px;
   }

}

@media  (max-width:1072px) {
    .price-calc-bg {
background-position-x: -169px !important;    }

}
.price-calc-bg img {
  display: none;
}
/* Mobile Responsive */
@media (max-width: 959px) {
    .estimate-cards-container {
        flex-direction: column;
    }

    .estimate-card {
        width: 100%;
        min-height: 420px;
        margin-bottom: 20px;
    }
    .estimate-card .get-an-estimate-slide-title p:first-child {
    font-size: 28px; }
  .estimate-card .estimate-slide-text {
    font-size: 17px;}
  .estimate-card .arrow-link,.support-card-content .arrow-link {
    font-size: 17px;}
  .estimate-card .get-an-estimate-slide-title .explore-our-services-link > .arrow, .support-card-content .explore-our-services-link > .arrow {
    width: 9px !important;
    height:9px!important;
margin-bottom:0px;
   }
    .price-calc-bg {
background: none!important;
background-color: #fff!important;  }
.locationfirstslidecontent {
    display: flex;
  flex-direction: column;
  justify-content: flex-end!important;
  gap:18px!important;
  align-items: center;
width:100%; max-width: none!important;
padding-top:10px;
padding-left:2rem;
padding-right:2rem;

}
.myLocation .ziplocatorslide {
  justify-content: center!important;
}
.price-calc-bg img {
  display: block;
width:100%;}

}


/* Base style: Hide mobile images by default */
.accordion-mobile-image {
    display: none;
    width: 100%;
    height: auto;
    border-radius: 18px;
    object-fit: contain;
}

/* 1. Tablet / Smaller Desktop Breakpoint (max-width: 1416px) */
@media (max-width: 1416px) {
    /* Ensure the pane doesn't overflow its container */
    .accordion-image-pane {
        overflow: hidden;
        /* Optional: Add border radius to the pane if needed to match design */
        border-top-right-radius: 28px; 
        border-bottom-right-radius: 28px;
    }

    /* Shift the image to the right and scale slightly to prevent left gaps */
    .accordion-image-pane img {
        height: 100%;
        object-fit: contain;
        /* Translate X shifts the image to the right. 
           Scale ensures we don't have empty space on the left side if it moves. */
        transform: translateX(25%);
        transform-origin: center right; /* Anchor the transformation */
        transition: transform 0.3s ease;
    }
}
/* 1. Tablet / Smaller Desktop Breakpoint (max-width: 1416px) */
@media (max-width: 1080px) {
    /* Ensure the pane doesn't overflow its container */
    .accordion-image-pane {
        overflow: hidden;
        /* Optional: Add border radius to the pane if needed to match design */
    }

    /* Shift the image to the right and scale slightly to prevent left gaps */
    .accordion-image-pane img {
        height: 100%;
        object-fit: contain;
        /* Translate X shifts the image to the right. 
           Scale ensures we don't have empty space on the left side if it moves. */
        transform: translateX(35%);
        transform-origin: center right; /* Anchor the transformation */
        transition: transform 0.3s ease;
    }
}

/* 2. Mobile Breakpoint (max-width: 956px) */
@media (max-width: 959px) {
  .price-calc-bg {
    padding:69px!important;
  }
  .myLocation .ziplocatorslide {
    align-items: center!important;
  }
    /* Hide the desktop image pane completely */
    .accordion-image-pane {
        display: none !important;
    }
.accordion-services-container {
 height:auto!important;
}
    /* Reset container layout to stack vertically */
    .accordion-image-container {
        display: block;
        width: 100%;
    }
    
    .accordion {
        width: 100%;
        padding: 0;
        padding-top:1rem;
        max-width: none!important;
    }
    .accordion-header {
      padding-right:6.5vw!important;
    }
       .faq-section .accordion-header {
      padding-right:unset!important;
    }
.faq-section .accordion-panel p {
  font-size:16px;
}
    .accordion-panel p {
            padding-right:6.5vw!important;

    }
    .accordion-item:last-child .accordion-mobile-image {
        border-radius:28px!important;
    }
    .accordion-item:last-child {
      border-bottom:none!important;
    }
    .faq-accordion .accordion-item:last-child {
            border-bottom:1px solid #d2d2d7!important;

    }

    /* Show the embedded mobile images inside the accordion */
    .accordion-mobile-image {
        display: block;
        border-radius:0px;
    }
    /* Ensure the panel expands enough to fit the image */
    .accordion-item.is-open .accordion-panel {
      max-height: 1500px!important;
        height: auto;
        opacity: 1;
            transition: max-height 1s ease-in-out;

    }
}
@media (max-width:505px) {
   .bg-earth .bg-img {
display:none;}
.bg-earth .bg-img-mobile {
display:block;} .intro-text {
        padding-top: 20px!important;}
}
@media (max-width:500px) {
    .price-calc-bg {
    padding:32px!important;
  }     
  .locationfirstslidecontent p {
    font-size: 24px;
  }
    .price-calc-bg img {
          height:50%;
          width:auto;
  }
    .intro-text {
padding-top: 40px!important;        font-size: 24px;
        max-width: 100%;
        color: #1d1d1f;
        text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
    }
    .locatorTitleWrapper .button-18, .locationfirstslidecontent .button-18 {
      font-size:14px;
    }
        .locator-content-wrapper {
        padding-top: 50px;
        padding-left: 38px;
        padding-right: 38px;
        width: 100%;
    }.form-header-text { font-size:24px;}
.check-area-message {
  width:100%!important;
}
       .faq-section .accordion-header {
      font-size:20px!important;
    }

.accordion-header { font-size:24px!important;}
.accordion-panel p, .service-card-text,.accordion-panel ul {
    font-size: 16px!important;}
    .accordion-panel .explore-our-services-link {
    font-size: 17px;}
}
@media (max-width:468px) {
  .intro-text {
        padding-top: 20px!important;}
}
.text-content h4 {
  padding-bottom: 12px;
}.text-content p strong {
  padding-bottom: 12px;
}
/* --- Video Background Styles --- */

/* The container that holds the video */
.video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Sits behind content */
    overflow: hidden;
}

/* The actual video element */
.video-bg {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures video covers area without stretching */
    display: block;
}

/* Optional: Darkens the video so text pops */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(149, 149, 149, 0.096); /* Adjust opacity (0.6) or color */
    z-index: 1;
}

/* Ensures the text/buttons sit ON TOP of the video */
.relative-content {
    position: relative;
    z-index: 2; 
}

@media (max-width:385px) {
         .faq-section .accordion-header {
      font-size:17px!important;
    

}
  }


  .service-card-text {
    padding-top:24px;
        font-size: 17px;
    line-height: 1.2353641176;
    font-weight: 400;
    letter-spacing: -.022em;
    color: #495057;

  }

  .plain-text-body {
    padding-left: 9vw;
    padding-right: 9vw;
    padding-top:125px;
  }

  .plain-text-content {
        max-width: 945px;
    display: flex;
    align-self: center;
    flex-direction: column;
    justify-self: center;
  }

  .plain-text-content p,.plain-text-content ul {
    font-size: 17px;
    line-height: 1.2353641176;
    font-weight: 400;
    letter-spacing: -.022em;
    color: #495057;
    padding-bottom:12px;
  }  .plain-text-content h4 {
    font-size: 15px;
    line-height: 1.2353641176;
    font-weight: 600;
    letter-spacing: -.022em;
    color: #495057;
    padding-top:24px;
    padding-bottom:12px;
    text-transform: uppercase;
  }

  .plain-text-content strong {
    font-weight:600;
  }
  .plain-text-content li {    padding-bottom:7px;
} .plain-text-content h5 {
    font-size: 14px;
    line-height: 1.2353641176;
    font-weight: 500;
    letter-spacing: -.022em;
    color: #495057;
    text-transform: uppercase;
  }

  #marquee-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.48);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  display: flex; 
  visibility: hidden; 
  justify-content: center;     box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
  z-index: 9999;
  opacity: 0; 
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  overflow-y: hidden; 
  align-items: center; 
  padding: 7vh 1rem; 
}/* NEW MARQUEE MODAL SHOW CLASS */
#marquee-modal.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s;
  overflow-y: scroll;
}/* NEW MARQUEE MODAL CONTENT STYLES */
#marquee-modal .modal-content {
    background-color: #fff;
    border-radius: 28px;
    width: 90%;
    max-width: 800px;
    position: relative;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: scale(1);
    flex-shrink: 0;
    padding: 0;
    display: grid;
    grid-template-areas: "cell";
}

/* NEW MARQUEE MODAL CLOSE BUTTON STYLES */
#marquee-modal .marquee-modal-close-btn {
    grid-area: cell;
    position: sticky;
    top: 20px; 
    justify-self: end;
    margin-right: 20px;
    z-index: 10;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease;
    margin-top: 20px;
}/* NEW MARQUEE MODAL CLOSE BUTTON SVG STYLES */
#marquee-modal .marquee-modal-close-btn svg{
    width: 16px;
    height: 16px;
    fill: #fff;
    transition: fill 0.2s ease;
}/* NEW MARQUEE MODAL CLOSE BUTTON HOVER STYLES */
#marquee-modal .marquee-modal-close-btn:hover {
    transform: scale(1.025);
}/* NEW MARQUEE MODAL CLOSE BUTTON SVG HOVER STYLES */
#marquee-modal .marquee-modal-close-btn:hover svg {
    fill: #fcc209;
}/* NEW MARQUEE MODAL BODY STYLES */
#marquee-modal #marquee-modal-body {
    grid-area: cell;
    padding: 76px; 
}/* NEW MARQUEE MODAL SPAN STYLES */
#marquee-modal span {
    font-size: 19px;
    line-height: 1.4211026316;
    font-weight: 600;
    letter-spacing: .012em;
}/* NEW MARQUEE MODAL H2 AND P STYLES */
#marquee-modal h2 {    
    margin-top: 12px;
    font-size: 56px;
    line-height: 1.0714285714;
    font-weight: 600;
    letter-spacing: -.005em;
    margin-bottom:24px;
}
#marquee-modal p {    
    margin-bottom:24px;
}

@media (max-width:546px) {
  /* NEW MARQUEE MODAL RESPONSIVE PADDING */
   #marquee-modal #marquee-modal-body {
    padding: 69px;
}
}
@media (max-width:517px) {
/* NEW MARQUEE MODAL RESPONSIVE STYLES */
    #marquee-modal-body span {
      font-size:15px;

  }
#marquee-modal-body h2 {
  font-size:38px!important;
}
#marquee-modal-body p {
  font-size:15px;
}
   #marquee-modal #marquee-modal-body {
    padding: 59px;
}}
@media (max-width:472px) {
  /* NEW MARQUEE MODAL RESPONSIVE STYLES */
  #marquee-modal-body span {
      font-size:14px;

  }
#marquee-modal-body h2 {
  font-size:24px!important;
}
#marquee-modal-body p {
  font-size:14px;
}
   #marquee-modal #marquee-modal-body {
    padding: 39px;
}
}

/* UPDATED MARQUEE MODAL H2 STYLES - Resized smaller */
#marquee-modal h2 {    
    margin-top: 0; /* Remove top margin for alignment */
    font-size: 32px; /* Reduced from 56px */
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.005em;
    margin-bottom: 0; /* Margin handled by container */
}

/* NEW: Container to align Title and Value opposite each other */
.marquee-modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid rgba(0,0,0,0.1); /* Optional separator */
    padding-bottom: 16px;
}

/* NEW: Style for the Value (e.g. 20%) to match H2 */
.marquee-modal-value {
    font-size: 32px;
    line-height: 1.1;
    font-weight: 600;
    letter-spacing: -.005em;
    color: #1d1d1f;
}

/* UPDATED: Description Text */
#marquee-modal p {    
    margin-bottom: 24px;
    font-size: 19px; /* Ensure description is readable */
    line-height: 1.4;
}

/* NEW: Fine Print Styling */
.marquee-modal-fine-print {
    font-size: 13px !important; /* Force smaller size */
    color: rgba(0, 0, 0, 0.6);
    line-height: 1.4;
    margin-top: 32px;
    border-top: 1px solid rgba(0,0,0,0.05);
    padding-top: 16px;
}

/* Responsive adjustments */
@media (max-width: 517px) {
    #marquee-modal h2, .marquee-modal-value {
        font-size: 24px !important;
    }
}