/* Page-specific styles (moved from index.php inline <style> blocks) */

/* ----- WhatsApp & call modals ----- */
/* ===== WhatsApp modal – reference style ===== */
		.theme-modal .wa-shell {
		background: #0a9f6c;              /* green background like image */
		border-radius: 24px;
		padding: 40px 44px;
		max-width: 480px;
		width: calc(100% - 40px);
		margin: 0 auto;
		box-shadow: 0 20px 40px rgba(0,0,0,0.35);
		position: relative;
		overflow: visible;
		}
		/* white "browser" card */
		.wa-window {
		background: #ffffff;
		border-radius: 24px;
		padding: 26px 34px 30px;
		width: 100%;
		box-shadow: 0 6px 18px rgba(0,0,0,0.08);
		display: flex;
		flex-direction: column;
		gap: 14px;
		}
		/* grey header dots */
		.wa-header-row {
		display:flex;
		gap:6px;
		margin-bottom:8px;
		}
		.wa-dot {
		width:10px;
		height:10px;
		border-radius:50%;
		background:#d6d6d6;
		}
		/* big grey content block */
		/* form area */
		.wa-form {
		display:flex;
		flex-direction:column;
		gap:10px;
		max-width:360px;
		margin-top:6px;
		}
		.wa-input {
		width:100%;
		padding:11px 14px;
		border-radius: 999px;
		border: none;
		background:#ffffff;
		box-shadow: 0 3px 8px rgba(0,0,0,0.08);
		font-size:14px;
		color:#222;
		}
		.wa-input::placeholder {
		color:#9b9b9b;
		}
		/* error text */
		.wa-error {
		min-height: 16px;
		font-size:12px;
		color:#d00;
		}
		/* green pill CTA */
		.wa-cta {
		margin-top:4px;
		border:none;
		width:240px;
		max-width:100%;
		align-self:flex-start;
		padding:12px 20px;
		border-radius:999px;
		background:#25D366;
		color:#fff;
		font-weight:600;
		font-size:15px;
		cursor:pointer;
		box-shadow: 0 12px 22px rgba(37,211,102,0.35);
		}
		/* WhatsApp badge floating at top-right */
		.wa-badge {
		position:absolute;
		right: 70px;
		bottom: 68px;
		display:flex;
		align-items:center;
		justify-content:center;
		}
		.wa-wa-circle {
		width:50px;
		height:50px;
		border-radius:50%;
		background:#25D366;
		display:flex;
		align-items:center;
		justify-content:center;
		box-shadow: 0 10px 24px rgba(0,0,0,0.25);
		}
		.wa-link-circle {
		position:absolute;
		left:-18px;
		top:-16px;
		width:34px;
		height:34px;
		border-radius:50%;
		background:#0f6b4f;
		border:2px solid #ffffff;
		display:flex;
		align-items:center;
		justify-content:center;
		color:#fff;
		font-size:13px;
		}
		/* close button (top-right of green shell) */
		.wa-close {
		position:absolute;
		right: 18px;
		top: 12px;
		background: none;
		border:none;
		color:#ffffff;
		font-size:20px;
		cursor:pointer;
		}
		/* responsive – stack + shrink */
		@media (max-width: 768px) {
		.theme-modal .wa-shell {
		padding: 24px 18px;
		border-radius: 18px;
		width: calc(100% - 24px);
		}
		.wa-close {
		position: absolute;
		right: 10px;
		top: 5px;
		}
		.wa-window {
		padding: 18px 18px 20px;
		}
		.wa-badge {
		right: 22px;
		top: -40px;
		}
		.wa-wa-circle {
		width:40px;
		height:40px;
		}
		}

/* ----- Swiper banner (overrides) ----- */
.swiper-container {
        height: 410px; /* Reduced height */
		}
		.swiper-slide img {
        height: 100%;
        object-fit: cover;
		}
		@media (max-width: 768px) {
        .swiper-container {
		height: 310px; /* Reduced height for mobile */
        }
		}
		@media (max-width: 480px) {
        .swiper-container {
		height: 300px; /* Further reduced height for smaller screens */
        }
		}
		.swiper-pagination-bullet {
        background: #333 !important; /* Change pagination bullet color */
		}
		.swiper-pagination-bullet-active {
        background: #333 !important; /* Change active pagination bullet color */
		}
		.swiper-button-next, .swiper-button-prev {
        color: #333 !important; /* Change navigation button color */
		}
		.swiper-button-next:hover, .swiper-button-prev:hover {
        color: #333 !important; /* Change hover color for navigation buttons */
		}

/* ----- Video banner ----- */
.video-banner {
		position: relative;
		width: 100%;
		height: 60vh;
		overflow: hidden;
		}
		.banner-video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		}

/* ----- Hero, forms, and page sections ----- */
:root {
		--primary-color: #333;
		--background-color: #D2262D0D;
        }
        a {
		text-decoration: none;
		color: #000;
        }
        h1 {
		font-size: 2rem;
        }
        h2 {
		font-size: 1.5rem;
        }
        h3 {
		font-size: 1.17rem;
        }
        h4 {
		font-size: 1rem;
        }
        ul {
		list-style: none;
        }
        li {
		list-style: none;
        }
        button {
		cursor: pointer;
        }
        .linear_border {
		content: "";
		background: linear-gradient(90deg, #aaaaaa 0%, #f4f4f4 100%);
		width: 70%;
		height: 1.5px;
        }
		.main_sec_button {
		padding: 8px 14px;
		border-radius: 8px;
		border: 1px solid var(--primary-color);
		color: #FFFFFF;
		background-color: var(--primary-color);
		font-size: 16px;
		font-weight: 600;
		line-height: 24px;
		text-align: center;
		width: 100%;
		outline: none;
        }
        /* bg img */
        /*  */
        /*.bg_image {*/
        /*    width: 100%;*/
        /*    height: 100vh;*/
        /*    margin-top: 3.5rem;*/
        /*    transition: height 2.5s ease;*/
        /*    animation: shrinkBanner 2.5s forwards;*/
        /*    animation-delay: 1s;*/
        /*}*/
        .bg_image img {
		object-fit: cover;
		object-position: center;
        }
        /* hero section */
        .main_hero_section {
		width: 85%;
		margin-inline: auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		margin-top: -8rem;
        }
        /* left form section */
        .hero_left {
		position: relative;
		width: 55%;
		background-color: #FFFFFF;
		padding: 20px;
		border: 1px solid #DDDDDD;
		border-radius: 12px;
		background: linear-gradient(180deg, #FAFAFA 0%, #F2F2F2 100%);
		z-index: 100;
		opacity: 0;
		transition: opacity 1s ease;
		animation: showContent 1s forwards;
		animation-delay: 1s;
		overflow: hidden;
        }
        @keyframes showContent {
		to {
		opacity: 1;
		}
        }
		.hero_left_bg_img {
		position: absolute;
		bottom: 0;
		width: 100%;
		z-index: -1;
		left: 0;
		filter: contrast(0.9);
		height: 173px;
        }
        @media screen and (max-width: 660px) {
		.hero_left_bg_img {
		object-fit: cover;
		}
        }
        .hero_left h2 {
		color: #000000CC;
		font-size: 20px;
		font-weight: 600;
		line-height: 24px;
		text-align: left;
		margin-bottom: 6px;
        }
        .hero_left p {
		display: flex;
		align-items: center;
		color: #00000066;
		font-size: 18px;
		font-weight: 600;
		line-height: 25.63px;
		gap: 4px;
        }
        .specs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-block: 16px;
		border-top: 1px dashed #0000001A;
		margin-top: 16px;
        }
        .price {
		color: #222222;
		font-size: 30px;
		font-weight: 700;
		line-height: 36px;
		text-align: left;
		position: relative;
        }
        .price::after {
		content: "₹ 75 Lac* Onwards";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(to right, transparent 0%, transparent 46%, #ffffff 51%, transparent 56%, transparent 100%);
		background-size: 300% 300%;
		animation: AnimationNameGrey 3s ease infinite;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
        }
        @keyframes AnimationNameGrey {
		0% {
		background-position: 100%;
		}
		100% {
		background-position: 0%;
		}
        }
        .bhks {
		color: #666666;
		font-size: 24px;
		font-weight: 600;
		line-height: 22.78px;
		text-align: left;
        }
        /* right form section */
        .hero_right {
		overflow: hidden;
		width: 30%;
		position: fixed;
		top: 7rem;
		left: 60%;
		background-color: #FFFFFF;
		border-radius: 12px;
		box-shadow: 0px 0px 15px 0px #00000026;
		opacity: 0;
		transition: opacity 1.5s ease;
		animation: showContent 2.5s forwards;
		animation-delay: 2s;
        }
        .form_container {
		padding: 28px 24px;
        }
        .form_container h1 {
		font-size: 20px;
		font-weight: 700;
		line-height: 25.14px;
		margin-bottom: 8px;
        }
        .connect_with_us {
		display: flex;
		align-items: center;
		gap: 4px;
        }
        .connect_with_us p {
		color: #000;
		font-size: 14px;
		font-weight: 400;
		line-height: 17.6px;
		text-align: left;
		white-space: nowrap;
        }
        .form_input {
		width: 100%;
		padding: 10px 12px;
		border-radius: 8px;
		border: 1px solid #cfcfcf;
		outline: none;
		color: #363636;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
		text-align: left;
		margin-bottom: 24px;
        }
        input[type="number"]::-webkit-inner-spin-button,
        input[type="number"]::-webkit-outer-spin-button {
		-webkit-appearance: none;
		margin: 0;
        }
        .iti {
		width: 100%;
		/* margin-bottom: 24px; */
        }
        .iti--separate-dial-code .iti__selected-flag {
		background-color: transparent !important;
		border-right: 1px solid #cfcfcf;
        }
        .connect_form button,
        .popup_connect_form button {
		width: 100%;
		border: none;
		background-color: var(--primary-color);
		color: #ffffff;
		padding: 10px 17.5px;
		border-radius: 8px;
		font-size: 18px;
		font-weight: 600;
		line-height: 30px;
		outline: none;
        }
        @media screen and (max-width: 991px) {
		.main_hero_section{
		width: 95%;
		}
		.hero_right {
		width: 40%;
		left: 58%;
		}
        }
        @media screen and (max-width: 775px) {
		.main_hero_section {
		flex-direction: column;
		gap: 30px;
		}
		.hero_right {
		position: unset;
		width: 100%;
		}
		.hero_left,
		.main_sections_container {
		width: 100%;
		}
        }
        @media screen and (max-width: 660px) {
		.hero_left h2 {
		font-size: 26px;
		line-height: 19.2px;
		}
		.hero_left p {
		font-size: 16px;
		line-height: 19.94px;
		font-weight: 500;
		}
		.hero_left p svg {
		width: 8.94px;
		height: 11.37px;
		}
		.price {
		font-size: 24px;
		line-height: 28.8px;
		}
		.form_container {
		padding: 24px 20px;
		}
		.form_input,
		.connect_form button,
		.popup_connect_form button {
		padding: 8px 12px;
		font-size: 14px;
		line-height: 24px;
		}
		.connect_form button,
		.popup_connect_form button {
		font-size: 16px;
		}
        }
        /* auto carousel */
        .form_auto_scroll {
		overflow: hidden;
		display: flex;
		height: 62px;
        }
        .autoscroll_cards_container {
		display: flex;
		width: 390px;
		gap: 12px;
		animation: scroll-left infinite linear;
        }
        @media screen and (max-width: 660px) {
		.autoscroll_cards_container {
		width: 370px;
		}
        }
        .autoscroll_card {
		display: flex;
		align-items: center;
		color: var(--primary-color);
		font-size: 14px;
		font-weight: 600;
		line-height: 24px;
		text-align: left;
		gap: 12px;
        }
        .dot {
		width: 7px;
		height: 7px;
		background-color: var(--primary-color);
		border-radius: 50%;
        }
        .autoscroll_card p {
		font-size: 14px;
		font-weight: 400;
		line-height: 17.6px;
		text-align: left;
		white-space: nowrap;
        }
        @keyframes scroll-left {
		from {
		transform: translateX(0);
		}
		to {
		transform: translateX(calc(-100% - 30px));
		}
        }
		.slides {
		display: flex;
		overflow: hidden;
		height: 100%;
        }
        .slide {
		display: none;
		width: 100%;
        }
        .slide p {
		font-size: 14px;
		font-weight: 400;
		line-height: 17.6px;
		text-align: left;
		color: var(--primary-color);
        }
        .slide.active {
		display: block;
        }
        .radio-buttons {
		margin-top: 10px;
		display: flex;
        }
        .radio-button {
		display: inline-block;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background-color: transparent;
		border: 1px solid var(--primary-color);
		cursor: pointer;
		margin-right: 5px;
        }
		.talk_to_expert{
		text-align: center;
		margin-block: 16px;
		color: #363636;
        }
        .talk_to_expert a{
		text-decoration: underline;
		color: var(--primary-color);
		font-weight: 600;
		font-size: 16px;
        }
        .radio-button.active {
		background-color: var(--primary-color);
        }

/* ----- Loading spinner ----- */
.spinner-border {
		vertical-align: middle;
		margin-right: 5px;
		}