body{height: auto;}
.mainHeaderTop .container{margin:0 auto !important;}
.mainHeaderTop .brand{margin: 4px 0 2px;}
.mainHeaderTop .brand a{display: inline-block;}
.mainHeaderTop .brand img{margin: 0; max-width: 350px; width:100%;}
header.mainHeaderTop{box-shadow: none;}
.mainHeaderTop .breadcrumbTop{background-color: #f36d38; border-radius: 0;}
.mainHeaderTop .breadcrumbTop .breadcrumb{margin:0; padding: 9px 0; background-color:transparent;}
.mainHeaderTop .breadcrumbTop .breadcrumb li{list-style: none; margin:4px 5px; display: inline-block;}
.breadcrumb>li+li:before{left: -5px; color: #ffbea5; position: relative;}
.mainHeaderTop .breadcrumb-item, .disable-breadcrumb-item a{color:#ffbea5;}
.disable-breadcrumb-item a:hover, .disable-breadcrumb-item a:focus, .disable-breadcrumb-item a:active{color:#fff; cursor: pointer;}
.mainHeaderTop .breadcrumb-item.active{color: #fff;}
.mainHeaderTop .breadcrumb-item.active{font-weight: 600;}
.siteFooter .container{margin:0 auto;}
.mainHeaderTop .phone a{display: inline-block; margin: 9px 0;}
#content-area{margin:150px auto 50px;}
footer.siteFooter {
		width: 100%;
		position: fixed;
		bottom: 0;
		z-index: 11;
		background-color: #f9f9f9;
		border-top: 1px solid #e4e4e4;
}
footer .copyright{
		margin: 20px 0 15px;
}
footer .copyright p{margin:0;}
footer .copyright p > a, footer .copyright p > a:hover, footer .copyright p > a:focus {
		font-weight: bold;
		color: #f36d38;
		text-decoration: none;
		letter-spacing: 0.3px;
		font-size: 15px;
}

.wizardForm .step{max-width:600px; width:100%; margin-bottom : 120px;}
.wrapper-cdetail{padding: 130px 15px 80px}
.wrapper-cdetail .container {
	margin: 0 auto;
}
.btn-proceed, .btn-proceed:hover{
	background: #f36d38 !important;
	border: 0 !important;
	padding: 12px 20px;
	box-shadow:none !important;
	outline: none !important;
	font-weight: 600;
	height: auto;
	max-width: 250px;
	margin: 0 auto;
}
.btn-proceed:focus, .btn-proceed:active{background:#e86734 !important}
.packges_listing{margin: 0 -10px; flex-wrap: wrap; justify-content: flex-start; align-items: stretch;}
.packges_listing > span{
	flex-basis: 33.33333333333%;
	padding: 0 10px;
	margin-bottom: 20px;
	max-width: inherit;
	width: auto; /* override layout.css span{width:100%} so flex row lays out correctly */
}
.packges_listing > span ul{margin:0;}

/* Shop packages: LongDescription is HTML tables — don’t clip/flex-center like plain text */
#shopPackageList .package-list > li.shop-package-desc-html {
	height: auto !important;
	min-height: 100px;
	max-height: 420px;
	overflow: auto;
	display: block;
	text-align: left;
	padding: 10px 12px;
	-webkit-overflow-scrolling: touch;
}
#shopPackageList .package-list > li.shop-package-desc-html table {
	width: 100%;
	max-width: 100%;
	font-size: 12px;
}
#shopPackageList .package-list > li.shop-package-desc-html th,
#shopPackageList .package-list > li.shop-package-desc-html td {
	padding: 6px 8px;
	vertical-align: top;
}

.package-know-more-body {
	max-height: 70vh;
	overflow-y: auto;
	text-align: left;
}

/* Health / shared Know More — API may return full HTML documents or tables */
#modalBodyTable .shared-km-desc-html table,
#modalBodyTable .shared-km-feature-html table {
	width: 100%;
	max-width: 100%;
	font-size: 13px;
}
#modalBodyTable .shared-km-desc-html th,
#modalBodyTable .shared-km-desc-html td,
#modalBodyTable .shared-km-feature-html th,
#modalBodyTable .shared-km-feature-html td {
	padding: 6px 8px;
	vertical-align: top;
}
#modalBodyTable .shared-km-root img {
	max-width: 100%;
	height: auto;
}

/* Shared package card (Auto-style header + premiums) — Health & reusable template */
.shared-pkg-header-inner {
	width: 100%;
	padding: 10px 8px;
}
.shared-pkg-subtitle {
	margin: 6px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
}
.shared-pkg-label {
	display: block;
	margin-bottom: 6px;
	font-size: 13px;
}
.shared-pkg-row-original,
.shared-pkg-row-discounted {
	text-align: center;
}
.widget-selected .package-list > li:first-child {
	background-color: #f36d38 !important;
}

/* Health: full-width header bar inside card (match Auto package strip) */
#healthPackagesList .package-list > li:first-child {
	margin: 0;
}
.wrapper-cdetail.tProposal{padding-top:160px;}

@media screen and (max-width: 991px){
	.packges_listing > span{
		flex-basis: 50%;
	}
	.pkgSummary{flex-wrap: wrap;}
	.pkgSummary > span, #dlContacts > span, .packges_listing  > span{width:100%; max-width: 350px;}
	.pkgSummary > span.discount{max-width:100% !important; width: 100% !important;}
}
@media screen and (max-width: 767px){
	.mainHeaderTop, header .phone{text-align:center !important; width: 100%;}
	.mainHeaderTop .brand img{margin: 0 auto;}
	.mainHeaderTop .brand{margin-bottom: 0; width: 100%;}
	header.mainHeaderTop, footer.siteFooter{
		position: relative;
	}
	#content-area{margin-top: 20px; margin-bottom: 0 !important;}
	.p_mode{padding-top:0 !important;}
	.wrapper-cdetail, .wrapper-cdetail.tProposal{padding-top:20px;}
	#content-area{margin-top:0 !important;}
	.wrapper-cdetail.tProposal{padding-bottom:0;}
}
@media screen and (max-width: 568px){
	.wizardForm legend {
			font-size: 24px;
			padding: 10px 0;
			margin-bottom: 20px;
	}
	#content-area {
		margin: 20px auto 50px;
	}
	.packges_listing > span{
		flex-basis: 100%;
	}
	footer.siteFooter{position: relative;}
	.wrapper-cdetail{padding: 20px 15px 20px}

}

@media screen and (max-width: 479px){
	.mainHeaderTop .breadcrumbTop .breadcrumb li{margin:2px;}
	.breadcrumb>li+li:before{left:-2px;}
	.siteFooter .col-xs-6{width:100%; text-align: center;}
	footer .copyright{margin-bottom: 0;}
}



/* =========================== New Theme Css =========================== */

body{font-family: 'Montserrat', sans-serif !important;}
#content-area {
	padding: 12px 0 0;
	margin-top: 0;
}

/* CNIC modal – compact verify card (TPL theme) */
#cnicModal .cnic-primary-btn,
#otpModal .cnic-primary-btn {
	background-color: #f36d35;
	color: #fff;
	border: none;
}
.cnic-modal-dialog {
	max-width: 320px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cnic-modal-card {
	border-radius: 16px;
	border: none;
	box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
	padding-top: 8px;
}
.cnic-modal-card .cnic-modal-close {
	position: absolute;
	right: 10px;
	top: 8px;
	color: #999;
	opacity: 0.9;
	z-index: 2;
}
.cnic-card {
	padding: 26px 26px 30px;
	min-height: 260px;
}
.cnic-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	margin: 0 auto 12px;
	background: #003656;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cnic-icon {
	color: #fff;
	font-size: 26px;
	line-height: 1;
}
.cnic-title {
	margin: 4px 0 4px;
	font-weight: 700;
	font-size: 18px;
	color: #003656;
}
.cnic-subtitle {
	margin: 0 0 14px;
	font-size: 13px;
	color: #666;
}
.cnic-input {
	max-width: 230px;
	margin: 0 auto;
	text-align: center;
	letter-spacing: 1px;
}
.cnic-primary-btn {
	display: block;
	width: 100%;
	max-width: 230px;
	margin: 16px auto 0;
	background-color: #f36d35;
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 9px 10px;
	border-radius: 999px;
	border: none;
	min-height: 42px;
	-webkit-appearance: none;
	appearance: none;
}
.cnic-primary-btn:hover,
.cnic-primary-btn:focus,
.cnic-primary-btn:active {
	background-color: #003656;
	color: #fff;
	border: none;
	outline: none;
}
/* Bootstrap .btn sets color:#333 on :hover/:focus — keep Proceed label visible */
#cnicModal .cnic-primary-btn:hover,
#cnicModal .cnic-primary-btn:focus,
#cnicModal .cnic-primary-btn:active,
#otpModal .cnic-primary-btn:hover,
#otpModal .cnic-primary-btn:focus,
#otpModal .cnic-primary-btn:active {
	color: #fff;
}

/* OTP modal – 6 separate boxes */
.otp-card {
	min-height: 260px;
}
.otp-box-group {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin: 6px 0 10px;
}
.otp-box-group .otp-digit {
	width: 42px;
	height: 46px;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	padding: 4px;
}
.otp-primary-btn {
	margin-top: 10px;
}

/* Solar package details: render HTML short description cleanly */
#solarPackageList .package-list > li.solar-package-desc-html {
	height: auto !important;
	min-height: 100px;
	max-height: 280px;
	overflow: auto;
	display: block;
	text-align: left;
	padding: 10px 12px;
	line-height: 1.4;
	white-space: normal;
	overflow-wrap: anywhere;
}
#solarPackageList .package-list > li.solar-package-desc-html ul,
#solarPackageList .package-list > li.solar-package-desc-html ol {
	margin: 0;
	padding-left: 18px;
}
#solarPackageList .package-list > li.solar-package-desc-html li {
	text-align: left;
	line-height: 1.35;
	padding: 0;
	border: 0;
}
#solarPackageList .widget-selected .solar-package-desc-html ul li:first-child {
	background-color: transparent !important;
	color: inherit !important;
}

/* Solar package section: keep single-card response centered */
#solarPackageList.packges_listing {
	justify-content: center;
}

/* Shop package details: render rich HTML (tables/lists) cleanly inside card */
#shopPackageList .package-list > li.shop-package-desc-html {
	padding: 0 !important;
	height: auto !important;
	min-height: 180px;
	max-height: 360px;
	overflow: auto;
	display: block;
	text-align: left;
	background: #fff;
}
#shopPackageList .shop-package-desc-content {
	padding: 10px 12px;
	line-height: 1.35;
	color: #555;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}
#shopPackageList .shop-package-desc-content ul,
#shopPackageList .shop-package-desc-content ol {
	margin: 0;
	padding-left: 18px;
}
#shopPackageList .shop-package-desc-content li {
	padding: 0;
	border: 0;
	margin: 0 0 2px;
	line-height: 1.35;
	color: #555;
}
#shopPackageList .shop-package-desc-content table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 12px;
	color: #444;
}
#shopPackageList .shop-package-desc-content th,
#shopPackageList .shop-package-desc-content td {
	padding: 6px 8px;
	vertical-align: top;
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
	border: 1px solid #ddd;
	background-color: transparent !important;
}
.wizardForm .col-sm-4{margin: 8px 0;}
.wizardForm .form-control {
	border: 0;
	box-shadow: none;
	background: #fdfdfd;
	font-size: 14px;
	font-family: 'Poppins', sans-serif;
	line-height: normal;
	padding: 8px;
	height: 38px;
	min-height: inherit;
	border: 1px solid #d2d2d2;
	color: #777;
}
.wizardForm textarea.form-control {
	height: auto;
	min-height: 88px;
	line-height: 1.45;
	padding-top: 10px;
	padding-bottom: 10px;
}
.wizardForm .form-control[readonly] {
	background-color: #fdfdfd;
}

.wizardForm .control-label {
	font-size: 13.5px;
	text-shadow: none;
	font-weight: 600;
	color: #8c8c8c;
	margin-bottom: 8px;
	display: block;
	letter-spacing: 0.3px;
}
.wizardForm legend {
	font-size: 22px;
	padding: 8px 0;
	margin: 15px 0;
	font-weight: 700;
	display: block;
	float: left;
	width: 100%;
	color: #f36d35;
}
.mainHeaderTop .brand img {
	margin: 0;
	max-width: 130px;
	width: 100%;
	padding: 0;
}
.brand.secondary_logo {
	text-align: right;
	margin: 15px 0;
}

.brand.secondary_logo img {
	max-width: 230px;
}
.mainHeaderTop .container {
	padding: 0;
}
.col-sm-6.brand, .col-sm-6.phone {
	padding: 0;
}
.mainHeaderTop .breadcrumbTop {
	background-color: #f9f9f9;
	border-bottom: 1px solid #eaeaea;
	border-top: 1px solid #eaeaea;
}
.breadcrumbTop .container{padding:0;}
.mainHeaderTop .nav-tabs{padding: 6px 0; border:0;}
.mainHeaderTop .nav-tabs>li>a {
	color: #f36f22;
	padding: 3px 12px;
	margin: 8px 2px;
	border: 1px dotted #e0e0e0;
	font-weight: 600;
	border-radius: 4px;
	/*cursor: not-allowed;*/
	background-color: #e6e6e6;
	font-size: 13px;
}

.mainHeaderTop .nav-tabs>li.active>a{
	color: #fff;
	background-color: #f36d35;
	border: 1px solid #f36d35;
	cursor: default;
}

.btnContinuepg {
	text-align: right;
	margin-top: 0;
	border-top: 0;
	padding: 0 5px;
	border-radius: 5px;
}
.btnContinueCenterpg {
	text-align: center;
	margin-top: 0;
	border-top: 0;
	padding: 0 5px;
	border-radius: 5px;
}
.text-center.btnContinuepg{text-align: center;}

.btnContinuepg .quote-btn{
	background: #f36d38;
	border: 0 !important;
	padding: 9px 25px;
	min-height: inherit;
	font-size: 15px !important;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.3px;
	margin: 10px 10px;
	color: #fff !important;
	outline: none;
}
.btnContinuepg .quote-btn:hover, .btnContinuepg .quote-btn:focus{background-color: #ff4e03; text-decoration: none; outline: none;}
#FamilyTable #tblFamily .form-control{margin:0;}
.btn.addfamily_Btn, .btn.addfamily_Btn:hover, .btn.addfamily_Btn:focus{
    background: #034a6d;
    color: #fff;
    border: 0;
    padding: 5px 10px;
    display: block;
    width: 100%;
	margin: 4px auto;
    max-width: 70px;
	outline: none;
	font-size: 11px;
	font-weight: 600;
}
#FamilyTable #tblFamily .btn.btn-sm.btn-danger{
    margin: 0 auto !important;
    display: block;
    font-size: 11px;
    font-weight: 600;
}
#FamilyTable #tblFamily tbody tr td{vertical-align: middle;}
footer.siteFooter {
	background-color: #252525;
	border-top: 0;
}
footer .copyright p {
	color: #fff;
	font-weight: 500;
}

footer .copyright p > a, footer .copyright p > a:hover, footer .copyright p > a:focus {
	font-weight: 600;
	color: #fbfbfb;
}
.siteFooter .container, .siteFooter .col-sm-6{padding:0;}

.package-list h3 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.package-list > li:first-child {
    min-height: 55px;
    padding: 0;
    background-color: #8e8f91;
    border-radius: 8px;
	margin: 10px;
	border:0;
}

#dlContacts > span:hover ul, .packges_listing > span:hover ul{
    box-shadow: none;
}

.package-list a {
    padding: 7px 20px;
    background-color: #f36d35;
    border: 1px solid #f36d35;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
}

.package-list a:hover, .package-list a:focus, .widget-selected .package-list a{text-decoration: none; background-color: #ff4e03; color: #fff; border-color: #f36d35;}

.package-list > li:last-child {
    background-color: #f9f9f9;
}
.package-list > li{padding: 1em 0;}
.package-list .package-price{
    font-size: 22px;
	color: #f36d38;
	font-weight: 600;
}

.original-price{
    color: #b1b1b1 !important;
}

.package-list p, .package-list li{
    color: #565656;
	font-weight: 500;
	font-size: 13.5px;
}

.package-list li{color: #b3b3b3;}
.package-list, .package-list li{border-color: #ececec; border-style: solid;}
.package-list li{border-width: 0 0 1px;}
.widget-selected ul{border-radius: 9px;}
.widget-selected .package-list > li:last-child{border-bottom-left-radius: 9px; border-bottom-right-radius: 9px;}

.infoTip {
    margin: 0 auto 30px;
    padding: 0 10px;
    max-width: 700px;
    text-align: center;
    font-weight: 500;
    color: #6f6f6f;
}

label.error {
    font-size: 12px !important;
    position: absolute;
    bottom: -5px;
    background: transparent !important;
    font-weight: 500;
    color: #f36d35 !important;
	padding: 0 !important;
	font-style: italic;
}

.customer_message h5 {
    font-size: 22px;
    color: #f36d35;
	font-weight: 600;
	margin-bottom: 5px;
}

.customer_message {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
}
.declaration-text {
    margin: 50px auto 0;
    max-width: 1040px;
}
.declaration-text h5 {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f36d35;
}

.declaration-text ol{padding: 0 15px;}
.declaration-text ol li {
    font-size: 13px;
    font-weight: 500;
    color: #6f6f6f;
    letter-spacing: 0.1px;
    margin: 2px 0;
}
.declaration-text p > input[type="checkbox"] {
    margin-right: 5px;
    margin-top: 0;
    position: relative;
    top: 1px;
}
.declaration-text p {
    font-size: 15px;
    font-weight: 500;
}

.iconBlock {
    text-align: center;
    padding: 15px;
    background: #fdfdfd;
    border-radius: 8px;
    height: 290px;
    border: 1px solid #eaeaea;
}

.p_mode {
    padding: 90px 0 0;
}

.modal-header {
    background: #8e8f91;
    border-radius: 4px 4px 0 0;
}

.pkgTitle {
    margin: 10px 0 20px !important;
    padding: 0 !important;
    font-size: 18px;
}

#modalBodyTable thead tr th > strong {
    font-size: 15px;
    font-weight: 600;
}

#modalBodyTable tbody tr td {
    font-size: 13px;
    font-weight: 500;
    color: #969595;
}

/* Know more (Auto) - prevent package tables from overflowing modal */
#myModal #modalBody {
    overflow-x: auto;
}

#myModal .auto-knowmore-responsive {
    width: 100%;
}

#myModal .auto-knowmore-responsive #modalBodyTable {
    width: 100%;
}

.table tfoot tr td {
    font-weight: 600 !important;
    font-style: normal !important;
    font-size: 11.5px !important;
}

.modal-footer .btnContinuepg .quote-btn, .modal-footer .btnContinuepg .quote-btn:hover, .modal-footer .btnContinuepg .quote-btn:focus{
	font-size: 12px !important;
    padding: 7px 15px;
    margin: 7px 0;
	background: #f36d38;
}

.modal-header .close {
    margin-top: 1px;
    opacity: 0.5;
    font-weight: normal;
    font-size: 24px;
}

.modal-header .close:hover, .modal-header .close:focus{
	opacity: 0.8;
	outline: none;
}

.mainHeaderTop {
	margin-bottom: 30px;
	position: relative;
}

.mainHeaderTop:before, .mainHeaderTop:after {
    position: relative;
    display: table;
    content: "";
    clear: both;
}

.col-sm-12.disclaimer_bar {
    padding: 0;
    background: #8e8f91;
}

.disclaimer_bar p {
    font-size: 10px;
    color: #fff;
    font-weight: 600;
	margin: 0;
	padding: 5px 2px;
}