/* =========================
   Container
   ========================= */
   #gform_submit_button_4{
   	display: none;
   }
   .result-container {
   	max-width: 1100px;
   	margin: 40px auto;
   	padding: 40px;
   	background: #f2f3f4;
   	border-radius: 6px;
   	font-family: "Segoe UI", Arial, sans-serif;
   }

   .loader-wrapper {
   	position: fixed;
   	inset: 0;
   	background: rgba(255,255,255,0.85);
   	display: flex;
   	justify-content: center;
   	align-items: center;
   	z-index: 9999;
   }

   .spinner {
   	width: 50px;
   	height: 50px;
   	border: 5px solid #e5e5e5;
   	border-top: 5px solid #2c7be5;
   	border-radius: 50%;
   	animation: spin 0.8s linear infinite;
   }
   .loader-wrapper.hidden{
   	display: none;
   }

   .gfield.summery{
   	display: none;
   }

   .gfield.summery.show{
   	display: block;
   }
   @keyframes spin {
   	to { transform: rotate(360deg); }
   }


/* =========================
   Row replacement
   ========================= */

   .result-container .row {
   	display: flex;
   	flex-wrap: wrap;
   	gap: 40px;
   }

/* =========================
   Columns replacement
   ========================= */

   .result-left {
   	flex: 0 0 65%;
   }

   .result-right {
   	flex: 0 0 30%;
   }

/* =========================
   Title
   ========================= */

   .summary-title {
   	font-size: 12px;
   	letter-spacing: 2px;
   	color: #888;
   	margin-bottom: 20px;
   }

/* =========================
   Summary Row
   ========================= */

   .summary-row {
   	display: flex;
   	justify-content: space-between;
   	font-size: 16px;
   	font-weight: 500;
   	margin-bottom: 10px;
   }

   .amount-small {
   	font-weight: 600;
   }

/* =========================
   Divider
   ========================= */

   .divider {
   	height: 1px;
   	background: #ddd;
   	margin: 15px 0 25px;
   }

/* =========================
   Future Cost Section
   ========================= */

   .d-flex {
   	display: flex;
   	align-items: center;
   	justify-content: space-between;
   	flex-wrap: wrap;
   }

   .future-cost p {
   	margin: 0 0 5px;
   	color: #666;
   }

   .future-cost h2 {
   	margin: 0;
   	font-size: 36px;
   	font-weight: 700;
   }

/* =========================
   Buttons
   ========================= */

   .reset-btn {
   	padding: 10px 25px;
   	border: 1px solid #ccc;
   	background: #fff;
   	border-radius: 25px;
   	cursor: pointer;
   	font-weight: 500;
   }

   .reset-btn:hover {
   	background: #eee;
   }

   .cta-btn {
   	margin-top: 20px;
   	padding: 12px 28px;
   	background: #2e9f5b;
   	color: #fff;
   	border: none;
   	border-radius: 25px;
   	font-weight: 600;
   	cursor: pointer;
   	display: inline-flex;
   	align-items: center;
   	gap: 8px;
   }

   .cta-btn:hover {
   	background: #25874c;
   }

   .arrow {
   	font-size: 14px;
   }

/* =========================
   Right Side Text
   ========================= */

   .result-right h3 {
   	margin-top: 0;
   	font-size: 18px;
   	font-weight: 600;
   }

   .result-right p {
   	font-size: 14px;
   	color: #555;
   	line-height: 1.6;
   }
   #gform_submit_button_3{
   	visibility: hidden;
   	position: absolute;
   	z-index: -222;
   }

   #gform_3 #gform_fields_3{
   	row-gap:16px !important;
   }


   .custom-modal {
   	position: fixed;
   	inset: 0;
   	display: none;
   	z-index: 9999;
   }

   .custom-modal.active {
   	display: block;
   }

   .custom-modal-overlay {
   	position: absolute;
   	inset: 0;
   	background: rgba(0,0,0,0.5);
   }

   .custom-modal-content {
   	position: relative;
   	width: 500px;
   	max-width: 90%;
   	margin: 80px auto;
   	background: #fff;
   	padding: 30px;
   	border-radius: 6px;
   	z-index: 2;
   	animation: modalFade 0.25s ease;
   }

   @keyframes modalFade {
   	from { opacity: 0; transform: translateY(-10px); }
   	to { opacity: 1; transform: translateY(0); }
   }

   .custom-modal-close {
   	position: absolute;
   	top: 10px;
   	right: 15px;
   	font-size: 22px;
   	background: none;
   	border: none;
   	cursor: pointer;
   }

   .modal-field {
   	margin-top: 20px;
   }

   .modal-field label {
   	display: block;
   	font-size: 14px;
   	margin-bottom: 6px;
   }

   .modal-field input {
   	width: 100%;
   	padding: 8px;
   	border: 1px solid #ccc;
   	border-radius: 4px;
   }

/* =========================
   Responsive
   ========================= */

   @media (max-width: 768px) {
   	.result-left,
   	.result-right {
   		flex: 0 0 100%;
   	}

   	.d-flex {
   		flex-direction: column;
   		align-items: flex-start;
   		gap: 20px;
   	}

   	.cta-btn {
   		width: 100%;
   		justify-content: center;
   	}
   }