/* City page styles - Bhubaneswar */

.city-page {
	color: var(--color-text);
	background: #f6f9fc;
}

/* Layout helpers */
.city-page .container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Hero */
.city-page .hero {
	background: linear-gradient(180deg, #0B2545 0%, #102947 100%);
	color: #ffffff;
	padding: 56px 0;
	text-align: center;
}

.city-page .hero h1 {
	font-size: 32px;
	line-height: 1.25;
	margin: 0 0 12px 0;
	font-weight: 800;
}

.city-page .hero p {
	font-size: 16px;
	opacity: 0.95;
	max-width: 760px;
	margin: 0 auto 20px auto;
}

/* Sections */
.city-page section {
	padding: 32px 0;
}

.city-page h2 {
	font-size: 24px;
	margin: 0 0 12px 0;
	font-weight: 800;
	color: var(--color-dark);
}

/* Services list */
.city-page .services ul {
	list-style: none;
	padding: 0;
	margin: 12px 0 0 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 10px;
}

.city-page .services li {
	background: #ffffff;
	border: 1px solid #e7eef7;
	border-radius: 10px;
	padding: 12px 14px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(11,37,69,.06);
}

/* FAQs */
.city-page .faqs .faq {
	border: 1px solid #e7eef7;
	border-radius: 12px;
	padding: 14px 16px;
	margin-top: 10px;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(11,37,69,.06);
}

.city-page .faqs .faq h3 {
	margin: 0 0 6px 0;
	font-size: 18px;
	color: var(--color-dark);
}

.city-page .faqs .faq p {
	margin: 0;
	color: var(--color-muted);
}

/* CTA */
.city-page .cta {
	text-align: center;
	background: #ffffff;
	border: 1px solid #e7eef7;
	border-radius: 14px;
	padding: 20px 16px;
	box-shadow: 0 2px 8px rgba(11,37,69,.06);
}

.city-page .cta p {
	margin: 8px 0 16px 0;
	color: #334155;
}

/* Buttons (align with global .btn but ensure colors) */
.city-page .btn {
	display: inline-block;
	padding: 10px 16px;
	border-radius: 10px;
	font-weight: 700;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
}

.city-page .btn:active {
	transform: translateY(1px);
}

.city-page .btn-primary {
	background: var(--color-primary);
	color: var(--color-dark);
	border-color: #e1c200;
	box-shadow: 0 3px 0 #caa800;
}

.city-page .btn-primary:hover {
	background: #ffe15a;
	border-color: #e1c200;
}

.city-page .btn-success {
	background: var(--color-accent);
	color: #0B2545;
	border-color: #e18c00;
}

.city-page .btn-success:hover {
	background: #ffc033;
	border-color: #e1a200;
}

.city-page .btn-whatsapp {
	background: linear-gradient(135deg, #ff6b35 0%, #ffcc22 50%, #ffd700 100%);
	color: #0B2545;
	border-color: #e1c200;
}

.city-page .btn-whatsapp:hover {
	background: linear-gradient(135deg, #ff7a46 0%, #ffd037 50%, #ffe15a 100%);
	color: #0B2545;
}

/* Responsive */
@media (min-width: 640px) {
	.city-page .hero h1 {
		font-size: 40px;
	}
	.city-page .services ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 960px) {
	.city-page .services ul {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}


/* Generic service-page support (for Cuttack, Puri) */
.service-page{
	padding: 28px 0 40px 0;
	color: var(--color-text);
}

.service-page h1{
	font-size: 32px;
	margin: 0 0 10px 0;
	font-weight: 800;
	color: var(--color-dark);
}

.service-page p{
	margin: 0 0 12px 0;
	color: var(--color-muted);
}

.service-page h2{
	font-size: 22px;
	margin: 18px 0 10px 0;
	font-weight: 800;
	color: var(--color-dark);
}

.service-page ul{
	list-style: none;
	padding: 0;
	margin: 10px 0 0 0;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 10px;
}

.service-page li{
	background: #ffffff;
	border: 1px solid #e7eef7;
	border-radius: 12px;
	padding: 12px 14px;
	font-weight: 600;
	box-shadow: 0 2px 8px rgba(11,37,69,.06);
}

.service-page .cta-box{
	margin-top: 18px;
	background: #ffffff;
	border: 1px solid #e7eef7;
	border-radius: 14px;
	padding: 16px;
	box-shadow: 0 2px 8px rgba(11,37,69,.06);
	text-align: center;
}

.service-page .btn{
	display: inline-block;
	padding: 12px 16px;
	border-radius: 12px;
	font-weight: 800;
	border: 1px solid transparent;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .05s ease;
}

.service-page .btn:active{transform: translateY(1px);}

.service-page .btn-primary{
	background: var(--color-primary);
	color: var(--color-dark);
	border-color: #e1c200;
	box-shadow: 0 3px 0 #caa800;
}

.service-page .btn-primary:hover{
	background: #ffe15a;
	border-color: #e1c200;
}

@media (min-width: 640px){
	.service-page ul{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media (min-width: 960px){
	.service-page ul{grid-template-columns: repeat(3, minmax(0, 1fr));}
}