/**
 * Ram Mandir Theme - Ayodhya Inspired Design
 * For Pawan Broadband - Serving the Sacred City of Ayodhya
 * Colors inspired by Ram Mandir's architecture and spiritual significance
 */

/* ========================================
   GLOBAL RAM MANDIR THEME VARIABLES
======================================== */

:root {
	/* Primary Ram Mandir Colors */
	--ram-saffron: #ff9933;
	--ram-orange: #ff6b35;
	--ram-red: #ffa24c;
	--ram-gold: #d4af37;
	--ram-temple-stone: #e8dcc4;
	--ram-sacred-yellow: #ffc107;
	--ram-white: #ffffff;
	--ram-cream: #fffef8;
	
	/* Gradients */
	--ram-gradient-primary: linear-gradient(135deg, #ff9933, #ff6b35);
	--ram-gradient-gold: linear-gradient(135deg, #d4af37, #ffc107);
	--ram-gradient-warm: linear-gradient(to bottom, #ffffff, #fffef8);
}

/* ========================================
   DESKTOP & MOBILE - UNIVERSAL STYLES
======================================== */

/* Primary Buttons - Ram Mandir Theme */
.theme-btn,
.btn-style-one .btn-title,
.btn-style-two .btn-title {
	background: var(--ram-gradient-primary) !important;
	border: none !important;
	transition: all 0.3s ease;
}

.theme-btn:hover,
.btn-style-one:hover .btn-title,
.btn-style-two:hover .btn-title {
	background: linear-gradient(135deg, #ff6b35, #ffa24c) !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255, 153, 51, 0.3);
}

/* Section Backgrounds */
.default-bg-section {
	background: var(--ram-cream) !important;
	position: relative;
}

.default-bg-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ram-gradient-primary);
	opacity: 0.5;
}

/* Links and Hover States */
a {
	color: var(--ram-red);
	transition: all 0.3s ease;
}

a:hover {
	color: var(--ram-saffron);
}

/* Section Titles - Temple Style */
.sec-title h2 {
	position: relative;
	padding-bottom: 15px;
}

.sec-title h2::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 80px;
	height: 4px;
	background: var(--ram-gradient-primary);
	border-radius: 2px;
}

.sec-title.centered h2::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Header Top Bar */
.header-top-one {
	background: var(--ram-gradient-primary) !important;
	border-bottom: 2px solid var(--ram-gold);
}

/* ========================================
   PLAN CARDS - REDESIGNED
======================================== */

/* Plan Card Container */
.case-block,
.locations-section .case-block {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	background: var(--ram-white);
	box-shadow: 0 4px 16px rgba(255, 153, 51, 0.15);
	transition: all 0.3s ease;
	border: 2px solid transparent;
	margin-bottom: 30px;
}

.case-block:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 24px rgba(255, 153, 51, 0.25);
	border-color: var(--ram-saffron);
}

/* Plan Card Top Accent */
.case-block::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: var(--ram-gradient-primary);
	z-index: 1;
}

/* Plan Card Side Accent */
.case-block::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--ram-gradient-gold);
	z-index: 1;
}

/* Plan Title Box */
.case-block .content-box .title-box {
	background: var(--ram-cream);
	border-bottom: 2px solid var(--ram-temple-stone);
	padding: 20px;
	position: relative;
}

.case-block .content-box .title-box h3 {
	color: var(--ram-red);
	font-weight: 700;
	margin: 0;
}

/* Plan Content */
.case-block .content-box .text-content {
	padding: 25px 20px;
}

/* Plan Price/Speed Display */
.case-block .content-box .text-content strong {
	color: var(--ram-saffron);
	font-size: 1.2em;
}

/* Plan Features List */
.case-block .content-box ul li {
	position: relative;
	padding-left: 25px;
	margin-bottom: 10px;
}

.case-block .content-box ul li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--ram-saffron);
	font-weight: bold;
	font-size: 1.2em;
}

/* ========================================
   SERVICE BLOCKS - TEMPLE INSPIRED
======================================== */

.service-block .inner-box {
	position: relative;
	background: var(--ram-white);
	border-radius: 12px;
	padding: 30px;
	transition: all 0.3s ease;
	border-top: 4px solid var(--ram-saffron);
	box-shadow: 0 2px 12px rgba(255, 153, 51, 0.1);
}

.service-block:hover .inner-box {
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(255, 153, 51, 0.2);
}

.service-block .icon-box {
	color: var(--ram-saffron);
}

/* ========================================
   TESTIMONIALS - SACRED STYLE
======================================== */

.testimonial-block .content {
	background: var(--ram-cream);
	border-left: 4px solid var(--ram-saffron);
	border-radius: 8px;
	position: relative;
}

.testimonial-block .content::before {
	content: '"';
	position: absolute;
	top: -10px;
	left: 20px;
	font-size: 60px;
	color: var(--ram-saffron);
	opacity: 0.3;
	font-family: Georgia, serif;
}

/* ========================================
   FOOTER - TEMPLE FOUNDATION
======================================== */

.main-footer {
	background: linear-gradient(to bottom, #2c2c2c, #1a1a1a);
	position: relative;
}

.main-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--ram-gradient-primary);
}

.main-footer .widget-title h4 {
	color: var(--ram-saffron);
	position: relative;
	padding-bottom: 10px;
}

.main-footer .widget-title h4::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 2px;
	background: var(--ram-saffron);
}

/* ========================================
   FORMS - SACRED INPUT STYLE
======================================== */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
	border-color: var(--ram-saffron) !important;
	box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.1) !important;
	outline: none !important;
}

/* ========================================
   BADGES & LABELS - TEMPLE ACCENTS
======================================== */

.badge,
.label {
	background: var(--ram-gradient-primary);
	color: var(--ram-white);
	padding: 5px 12px;
	border-radius: 20px;
	font-weight: 600;
}

/* ========================================
   ICONS - SAFFRON THEME
======================================== */

.icon-box,
.icon,
[class*="icon-"] {
	color: var(--ram-saffron);
}

/* ========================================
   NAVIGATION - TEMPLE PILLARS
======================================== */

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a {
	color: var(--ram-saffron) !important;
}

.main-menu .navigation > li::before {
	border-bottom-color: var(--ram-saffron) !important;
}

/* ========================================
   CALL TO ACTION - SACRED INVITATION
======================================== */

.call-to-action {
	background: var(--ram-cream);
	position: relative;
}

.call-to-action::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--ram-gradient-primary);
}

/* ========================================
   LOADING & ANIMATIONS
======================================== */

.preloader .icon {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" stroke="%23ff9933" stroke-width="8" fill="none" stroke-dasharray="60 200" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" from="0 50 50" to="360 50 50"/></circle></svg>');
}

/* ========================================
   SCROLL TO TOP - TEMPLE TOWER
======================================== */

.scroll-to-top {
	background: var(--ram-gradient-primary) !important;
	border: 2px solid var(--ram-gold);
}

.scroll-to-top:hover {
	background: linear-gradient(135deg, #ff6b35, #ffa24c) !important;
	transform: translateY(-3px);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media only screen and (max-width: 767px) {
	.case-block {
		margin-bottom: 20px;
	}
	
	.sec-title h2::after {
		width: 60px;
		height: 3px;
	}
}