/* ========================
   GLOBAL / BASE STYLES
   ======================== */
 .hero-15 {
     margin-bottom: 40px !important;
 }

 .hero-15-floating-form {
     width: 100%;
     /* max-width: 400px; */
     background: #101F42;
     color: #fff;
     justify-self: right;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
     z-index: 9999;
     transition: top 0.2s ease-out;
 }

 .print_cost .cost-modal-body .footer-row {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     gap: 20px;
 }

 .print_cost .cost-modal-body .footer-row .footer-disclaimer {
     max-width: 36%;
     margin-top: 20px;
     font-size: 12px;
 }

 .cost-calculator-form .form-check .btn-primary {

     width: 35%;
     padding: 5PX !important;
     text-transform: uppercase;

 }



 body {
     margin: 0;
     padding: 0;
     font-family: 'Arial', sans-serif;
 }

 .hero-15-container .img-fluid {
     object-fit: cover !important;
     object-position: center !important;
     width: 100%;
     /* Make sure image is responsive */
 }

 .hero-15-left-bottom {
     object-fit: cover;
     object-position: left bottom;
     width: 100%;
     height: 582px;
     /* only for large screens, we’ll override below */
 }

 /* Hero title */
 .hero-15-title {
     bottom: 0;
     left: 0;
     z-index: 10;
     max-width: 40% !important;
     padding: 20px;
 }

 .hero-15-title h1 {
     font-size: 40px !important;
     color: #B61C20;
     /* font-weight: bold !important; */
     text-transform: unset !important;
     margin: 0;
     font-family: 'Museo', sans-serif !important;
 }

 /* Cloudy / smoky gradient overlay */
 /* .hero-15-media::after {
     content: "";
     position: absolute;
     bottom: 0;
     left: 0;
     width: 60%; 
     height: 100%;
     background: radial-gradient(ellipse at bottom left, rgb(243 243 243 / 100%) 0%, rgb(255 255 255 / 0%) 79%);
     pointer-events: none; 
     z-index: 5;
 } */
 .hero-15-left-bottom {
     /* transform: scaleX(-1); */
     /* flips only the image horizontally */
 }

 .hero-15-wrapper {
     background: none #F1F1F1 !important;
     padding: 15px;
     width: 500px;
     max-width: 45%;
     /* display: flex !important; */
     align-items: center;
     border-radius: 10px;
     margin-left: 15px;
     margin-bottom: 20px;
 }

 .hero-15-title .btn {
     margin-top: 10px;
 }

 /* Floating form container */
 .floating-cost-calculator {
     position: fixed;
     top: 100px;
     /* distance from top */
     right: 20px;
     /* distance from right */
     width: 350px;
     z-index: 9999;
     background: #fff;
     padding: 20px;
     border-radius: 10px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
 }

 .floating-form-inner h3 {
     font-size: 20px;
     margin-bottom: 15px;
 }

 .floating-form-inner .form-group {
     margin-bottom: 15px;
 }

 @media(max-width: 991px) {
     .floating-cost-calculator {
         display: none !important;
     }

     .cost-calculator-form .sub-title {
         margin-top: 15px;
     }

     /* .hero-15-title h1 {
        font-weight: bold !important;
   
} */
     .hero-15-title h1 {
         font-size: 20px !important;
         text-align: left !important;
     }


     .print_cost .cost-modal-body .footer-row>div:last-child {
         width: 100%;
         /* full width contact block */
         order: 2;
         overflow: hidden;
         /* second */
     }

     .cost-calculator-form label[for="plans"] {
         margin-top: 0.5rem;
     }

     .hero-15-wrapper {
         margin-left: 50% !important;
         transform: translateX(-50%) !important;
         max-width: 90% !important;
         width: 90% !important;
         text-align: center;
     }
 }

 /* POP UP START */
 /* Modal full screen size */
 .cost-summary-modal {
     display: none;
     /* hidden by default */
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.6);
     z-index: 10001;
     /* higher than form */
     overflow-y: auto;
     padding: 20px;
 }

 /* Modal content */
 .cost-summary-content {
     background: #fff;
     margin: 40px auto;
     padding: 20px 20px;
     border-radius: 10px;
     /* max-width: 80%; */
     top: 50px;
     width: 100%;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
     position: relative;
     z-index: 10001;
     /* ensure it’s above overlay */
 }

 .print_cost .modal-header .modal-heading {
     padding: 5px 50px;
     font-family: 'Museo', sans-serif !important;

 }

 .print_cost .modal-heading h4 {
     font-size: 36px;
     font-weight: 200;
 }

 .cost-summary-modal .modal-subtext p {
     font-size: 14px !important;
 }

 .print_cost .modal-header .modal-subtext {
     padding: 0px 50px;
     font-family: 'Museo', sans-serif !important;
     margin-top: 20px;
 }

 /* Close button top-right corner */
 .print_cost .modal-close {
     border: none;
     height: 20px;
     display: flex;
     font-weight: bold;
     align-items: center;
     justify-content: center;
     position: absolute;
     top: -17px;
     border-radius: 50%;
     background-color: #b61c20;
     right: -18px;
     width: 20px;
     font-size: 19px;
     cursor: pointer;
     color: #fff;
 }

 /* Modal Footer Styling */
 .hero-15 .modal-footer {

     padding: 15px 50px;

     width: 100%;
     background-color: #101F42;
     color: #fff;
     display: block;
     /* stack content top-to-bottom instead of flexbox */
     text-align: left;

 }

 .cost-summary-modal .modal-footer .row {
     justify-content: flex-start;
     /* keep the form aligned left */
 }

 .hero-15 .modal-footer h5 {
     font-weight: bold;
     margin-bottom: 10px;
     text-align: left;
     /* LEFT ALIGN */

 }

 .full-report-header {
     font-family: 'Franklin Gothic URW', sans-serif !important;
 }

 .full-report-intro,
 .full-report-intro-mobile {
     margin-bottom: 15px;
     line-height: 1.5;
     text-align: left;
     font-family: 'Franklin Gothic URW', sans-serif !important;
     /* LEFT ALIGN */
 }

 .full-report-intro-mobile {
     display: none;
 }

 .full-report-separator {
     border: 1px solid #ccc;
     margin-bottom: 15px;
 }

 .full-report-form .form-control {
     width: 100%;
 }

 .full-report-form .btn {
     height: 100%;
 }

 .hero-15 .modal-footer h5 {
     text-align: left !important;
     /* force left alignment */
     margin: 0 0 10px 0;
     /* optional spacing */
 }

 /* table start */
 /* General body */
 body {

     margin: 0;

 }

 /* Table setup */
 .cost-table table {
     width: 100%;
     /* max-width: 1000px; */
     min-width: 700px;
     margin: auto;
     border-collapse: collapse;
     table-layout: fixed;
     /* min-width: 600px; */
     /* ensures scroll is possible on small screens */
     /* equal column width */
 }

 /* Header row */
 thead th {
     background: #9aa7aa;
     color: #001f3f;
     padding: 12px;
     text-align: center;
     /* border-radius: 8px 8px 0 0; */
 }

 /* Footer row background for columns 2,3,4 */
 tfoot td:nth-child(n+2) {
     background-color: #657D7B !important;
     /* your red color */
     color: #fff;
     /* optional, for contrast */
     font-weight: bold;
     text-align: center;
 }

 /* First column (labels) */
 tbody td:first-child,
 tfoot td:first-child {
     text-align: left;
     background: #ffffff;
     font-weight: bold;
     padding: 12px 12px;
     border-radius: 8px;
 }

 /* Column cards: columns 2,3,4 */
 tbody td:nth-child(2),
 tfoot td:nth-child(2) {
     background: #f5f5f5;
     /* box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      border-radius: 8px; */
     text-align: left;
     padding: 12px 12px;
     /* padding-bottom: 10px; */
     /* adds vertical spacing */
 }

 tbody td:nth-child(3),
 tfoot td:nth-child(3) {
     background: #dce3e5;
     /* box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                                             border-radius: 8px; */
     text-align: left;
     padding: 12px 12px;
 }

 tbody td:nth-child(4),
 tfoot td:nth-child(4) {
     background: #c1d2d6;
     /* box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                                                         border-radius: 8px; */
     text-align: center;
     padding: 3px 10px;
 }

 /* Top-left header cell */
 /* Entire first column */
 table td:first-child,
 table th:first-child {
     background-color: transparent;
     vertical-align: middle;
     /* or any color you want */
     color: #414141;
     text-align: left;
     /* optional, for text contrast */
 }

 /* Second column */
 table td:nth-child(2),
 table th:nth-child(2) {
     background-color: rgba(101, 125, 123, 0.3);
     color: #414141;
     ;
     /* optional, for text contrast */
 }

 /* Second column */
 table td:nth-child(3),
 table th:nth-child(3) {
     background-color: rgba(101, 125, 123, 0.4);
     color: #414141;
     /* optional, for text contrast */
 }

 /* Second column */
 table td:nth-child(4),
 table th:nth-child(4) {
     background-color: rgba(101, 125, 123, 0.5);
     color: #414141;
     /* optional, for text contrast */
 }

 /* Remove horizontal spacing */
 table {
     border-collapse: separate;
     /* required for spacing to work */
     border-spacing: 15px 0px;
     /* 0 horizontal, 15px vertical */
 }

 .digitisations-row td {
     border-bottom: 2px solid #657D7B;
 }

 /* Add line below the header for columns 2,3,4 */
 thead th:nth-child(n+2) {
     border-bottom: 2px solid #657D7B;
     /* adjust color and thickness */
     color: #101F42;
 }

 tfoot tr td:nth-child(2) {
     background-color: rgba(101, 125, 123, 0.4) !important;
     /* or text color: red; if you want text only */

 }

 tfoot tr td:nth-child(3) {
     background-color: rgba(101, 125, 123, 0.5) !important;
     /* or text color: red; if you want text only */

 }

 tfoot tr td:nth-child(4) {
     background-color: rgba(101, 125, 123, 0.6) !important;
     /* or text color: red; if you want text only */

 }

 /* Apply custom font only to table body cells except the first column */
 table tbody td:not(:first-child) {
     font-family: 'Franklin Gothic URW', sans-serif;
     font-style: normal !important;
     font-weight: 400;
     font-size: 16px !important;
     color: #414141;
 }

 /* Wrapper for horizontal scroll on mobile */
 .cost-table {
     width: 100%;
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     /* smooth scroll on iOS */
     padding-right: 0px !important;
     padding-left: 0px !important;
 }


 /* Table body text */
 tbody td {
     font-weight: bold;
 }

 /* Footer row */
 tfoot td {
     padding: 12px;
     font-weight: bold;
 }

 /* Make all table text lighter except strong */


 /* Keep strong tags bold */
 table strong {
     font-weight: bold !important;
 }

 /* table end */
 .cost-modal-body {
     background-color: rgba(101, 125, 123, 0.3);
     padding: 10px 20px;
     /* border-radius: 6px; */
 }

 /* Add margin-bottom only for form controls inside the modal form */
 #cost-summary-modal .modal-footer .full-report-form .form-control {
     margin-bottom: 10px;
 }

 .hero-15-overlay-lines {
     position: absolute;
     /* keep it over the image */
     bottom: 0;
     /* stick to bottom edge */
     left: 0;
     width: 100%;
     /* full width */
 }

 .cost-table table td:nth-child(4),
 .cost-table table th:nth-child(4) {
     background-color: unset !important;
     border: unset;
 }

 .savings-box {
     background: #B61C20 !important;
     color: #fff !important;
     font-weight: bold !important;
     font-family: 'Franklin Gothic URW', sans-serif !important;
     padding: 12px;
     /* border-radius: 4px; */
     font-size: 16px !important;
     vertical-align: middle !important;
     border: unset !important;
     text-align: center !important;
     /* margin-bottom: 150%; */
 }

 .savings-box-1 {
     font-size: 16px !important;
     background: #B61C20 !important;
     color: #fff !important;
     font-weight: bold !important;
     text-align: center !important;
     vertical-align: middle !important;
     border: unset !important;
 }

 .savings-box-2 {
     background: #B61C20 !important;
     color: #fff !important;
     font-weight: bold !important;
     text-align: center !important;
     font-size: 16px !important;
     vertical-align: middle !important;
     border: unset !important;
 }

 .savings-box-3 {
     background: #B61C20 !important;
     color: #fff !important;
     font-weight: bold !important;
     text-align: center !important;
     align-items: center;
     vertical-align: middle !important;
     border: unset !important;
 }

 .savings-box-4 {
     background: #B61C20 !important;
     color: #fff !important;
     font-weight: bold !important;
     text-align: center !important;
     align-items: center;
     vertical-align: middle !important;
     border: unset;
 }

 #pid-92481 #chat-widget-container,
 #pid-95250 #chat-widget-container {
     display: none;
 }

 .print_cost .modal-header .modal-brand-logo {
     position: absolute;
     top: 15px;
     right: 15px;
     /* leave space for close button */
 }

 .print_cost .modal-header .brand-logo-img {
     max-width: 175px;
     height: auto;
 }

 .print_cost .modal-header .cost-logo {
     bottom: 80px;
 }

 /* .print_cost .cost-header-row {
     width: 100% !important;
     align-items: center !important;
 } */
 /* POP UP END  */
 @media print {
     body * {
         visibility: hidden;
     }

     .cost-summary-modal,
     .cost-summary-modal * {
         visibility: visible;
     }

     .cost-summary-modal {
         position: absolute;
         left: 0;
         top: 0;
         width: 100%;
     }
 }

 /* ========================
   MEDIA QUERIES / RESPONSIVE
   ======================== */

 /* Large screens: 992px and above */
 @media (min-width: 992px) {
     .hero-15-container .img-fluid {
         /* height: 582px !important; */
         height: 370px !important;
         min-height: 300px;
     }

     table,
     table th,
     table td {
         font-weight: lighter !important;
     }
 }

 /* Medium screens: 768px to 991px */
 @media (min-width: 768px) and (max-width: 991px) {
     .hero-15-container .img-fluid {
         height: 250px;
         /* Adjust height if needed */
     }

     /* .hero-15-title {
         max-width: 63% !important;
     } */

     .print_cost .modal-heading h4 {
         font-size: 20px;

     }

     .savings-box {
         margin-bottom: 194%;
     }

     .savings-box-1 {
         height: 17%;
         margin-bottom: 25%;
     }
 }
 @media (min-width: 768px) {
.print_cost .modal-header .brand-logo-img {
     max-width: 210px;
     height: auto;
 }
 .print_cost .modal-header .row{
 padding: 25px 5px;
 }
 }
 /* Small screens: 576px to 767px */
 @media (min-width: 576px) and (max-width: 767px) {
     .hero-15-container .img-fluid {
         height: 250px;
     }

     /* .hero-15-title {
         max-width: 55% !important;
     } */

     .hero-15-title h1 {
         font-size: 20px !important;
     }

     .print_cost .modal-heading h4 {
         font-size: 20px;
     }

     .cost-summary-modal .modal-subtext p {
         font-size: 12px !important;
     }
 }

 /* Extra small screens: below 576px */
 @media (max-width: 575px) {
     .hero-15-container .img-fluid {
         height: 250px;
     }

     table tbody td:not(:first-child) {
         font-weight: 600 !important;
     }

     /* .cost-summary-content .cost-modal-body,
     .cost-summary-content .modal-heading,
     .cost-summary-content .modal-header-image,
     .print_cost .modal-header .modal-subtext {
         display: none;
     } */

     /* .hero-15-title {
         max-width: 69% !important;
     } */

     /* .hero-15-title h1 {
         font-size: 18px !important;
     } */

     .print_cost .modal-heading h4 {
         font-size: 20px;

     }

     .cost-summary-modal .modal-subtext p {
         font-size: 12px !important;
     }
 }

 .fixed-top {
     z-index: 999 !important;
 }

 #responseModal,
 #responseModal_non_broker {
     transform: translatey(15%);
 }

 #pid-92481 .modal-backdrop.show,
 #pid-95250 .modal-backdrop.show {
     z-index: 9 !important;
 }

 #pid-92481 #responseModal.show,
 #pid-95250 #responseModal_non_broker.show {
     z-index: 10 !important;
 }

 #pid-92481 .fixed-top,
 #pid-95250 .fixed-top {
     /* z-index: 9 !important; */
 }

 @media (max-width: 576px) {

     .cost-summary-content .cost-modal-body,
     .cost-summary-content .modal-heading,
     .cost-summary-content .modal-header-image,
     .print_cost .modal-header .modal-subtext {
         position: absolute;
         left: -9999px;
         top: 0;
         visibility: hidden;
     }

     .full-report-intro-mobile {
         display: block;
     }

     .full-report-intro {
         display: none;
     }

     .print_cost .modal-header .modal-brand-logo {
         display: none !important;
     }
 }


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