/* Telecloud Communications Website Styles */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Global Styles */
body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #212529;
	line-height: 1.6;
}

/* Navbar Styles */
.navbar {
	background: #ffffff !important;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
	padding: 1rem 0;
}

.navbar-brand {
	font-weight: 700;
	color: #0066CC !important;
	font-size: 1.5rem;
}

.nav-link {
	color: #343a40 !important;
	font-weight: 500;
	padding: 0.5rem 1rem !important;
	transition: color 0.3s ease;
}

.nav-link:hover {
	color: #0066CC !important;
}

/* Hero Section */
.hero-section {
	background: linear-gradient(135deg, #0066CC 0%, #004999 100%);
	color: #ffffff;
	padding: 5rem 0;
	text-align: center;
	margin-bottom: 0;
}

.hero-section h1 {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #ffffff;
}

.hero-section p {
	font-size: 1.25rem;
	margin-bottom: 2rem;
	opacity: 0.95;
}

/* Buttons */
.btn-primary {
	background: #0066CC !important;
	border: none !important;
	padding: 0.75rem 2rem;
	font-weight: 600;
	border-radius: 6px;
	transition: all 0.3s ease;
	color: #ffffff !important;
}

.btn-primary:hover {
	background: #004999 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,102,204,0.3);
}

.btn-secondary {
	background: #FF9900 !important;
	border: none !important;
	color: #ffffff !important;
	padding: 0.75rem 2rem;
	font-weight: 600;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.btn-secondary:hover {
	background: #CC7A00 !important;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(255,153,0,0.3);
}

.btn-outline-primary {
	color: #0066CC !important;
	border-color: #0066CC !important;
	padding: 0.5rem 1.5rem;
	font-weight: 600;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.btn-outline-primary:hover {
	background: #0066CC !important;
	color: #ffffff !important;
}

.btn-lg {
	padding: 1rem 2.5rem;
	font-size: 1.1rem;
}

/* Cards */
.card {
	border: none;
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	margin-bottom: 2rem;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

.card-title {
	color: #0066CC;
	font-weight: 600;
}

.card-body {
	padding: 2rem;
}

/* Service Cards */
.service-card {
	padding: 2rem;
	text-align: center;
	height: 100%;
}

.service-card .icon {
	font-size: 3rem;
	color: #0066CC;
	margin-bottom: 1rem;
	display: block;
}

.service-card h3 {
	color: #0066CC;
	font-weight: 600;
	margin-bottom: 1rem;
}

/* Footer */
footer,
.web-footer {
	background: #1a1a1a !important;
	color: #ffffff !important;
	padding: 3rem 0 1rem;
}

footer h5,
.web-footer h5 {
	color: #FF9900 !important;
	font-weight: 600;
	margin-bottom: 1rem;
}

footer a,
.web-footer a {
	color: #cccccc !important;
	text-decoration: none;
	transition: color 0.3s ease;
}

footer a:hover,
.web-footer a:hover {
	color: #FF9900 !important;
}

/* Coverage Map */
.coverage-map {
	min-height: 500px;
	background: #f8f9fa;
	border-radius: 12px;
	padding: 2rem;
}

.coverage-map h3,
.coverage-map h5 {
	color: #0066CC;
}

/* Pricing Tables */
.pricing-card {
	text-align: center;
	padding: 2rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.pricing-card h3 {
	color: #0066CC;
	font-weight: 600;
	margin-bottom: 1rem;
}

.pricing-card.featured {
	border: 2px solid #0066CC;
	position: relative;
}

.pricing-card.featured::before {
	content: 'POPULAR';
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: #FF9900;
	color: #ffffff;
	padding: 0.25rem 1rem;
	border-radius: 20px;
	font-size: 0.75rem;
	font-weight: 700;
}

.price {
	font-size: 3rem;
	font-weight: 700;
	color: #0066CC;
	margin: 1rem 0;
}

.price-currency {
	font-size: 1.5rem;
	vertical-align: super;
}

.price-period {
	font-size: 1rem;
	color: #666;
}

.pricing-card ul {
	list-style: none;
	padding: 0;
	margin: 2rem 0;
}

.pricing-card ul li {
	padding: 0.5rem 0;
	border-bottom: 1px solid #f0f0f0;
}

/* Status Page */
.status-indicator {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	margin-right: 8px;
}

.status-operational {
	background: #28a745;
	box-shadow: 0 0 8px rgba(40, 167, 69, 0.5);
}

.status-degraded {
	background: #ffc107;
	box-shadow: 0 0 8px rgba(255, 193, 7, 0.5);
}

.status-outage {
	background: #dc3545;
	box-shadow: 0 0 8px rgba(220, 53, 69, 0.5);
}

/* Form Styles */
.form-control {
	border-radius: 6px;
	border: 1px solid #ddd;
	padding: 0.75rem 1rem;
	transition: border-color 0.3s ease;
}

.form-control:focus {
	border-color: #0066CC;
	box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

.form-group label {
	font-weight: 600;
	color: #343a40;
	margin-bottom: 0.5rem;
}

/* Alerts */
.alert {
	border-radius: 8px;
	padding: 1rem 1.5rem;
}

.alert-info {
	background: #e7f3ff;
	border-color: #b3d9ff;
	color: #004085;
}

.alert-success {
	background: #d4edda;
	border-color: #c3e6cb;
	color: #155724;
}

/* Utility Classes */
.text-primary {
	color: #0066CC !important;
}

.bg-light {
	background-color: #f8f9fa !important;
	padding: 3rem 0;
}

.rounded {
	border-radius: 12px !important;
}

.mt-5 {
	margin-top: 3rem !important;
}

.mb-5 {
	margin-bottom: 3rem !important;
}

.py-5 {
	padding-top: 3rem !important;
	padding-bottom: 3rem !important;
}

.p-5 {
	padding: 3rem !important;
}

.text-center {
	text-align: center !important;
}

.text-muted {
	color: #6c757d !important;
}

.lead {
	font-size: 1.25rem;
	font-weight: 300;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.hero-section h1 {
		font-size: 2rem;
	}
	
	.hero-section p {
		font-size: 1rem;
	}
	
	.hero-section {
		padding: 3rem 0;
	}
	
	.btn-lg {
		padding: 0.75rem 1.5rem;
		font-size: 1rem;
		display: block;
		width: 100%;
		margin-bottom: 0.5rem;
	}
	
	.ml-3 {
		margin-left: 0 !important;
	}
	
	.price {
		font-size: 2.5rem;
	}
	
	.service-card {
		margin-bottom: 2rem;
	}
}

/* List Styles */
ul.list-unstyled li {
	padding: 0.5rem 0;
}

ul.list-unstyled li::before {
	content: none;
}

/* Image Styles */
img.img-fluid {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

/* Container Adjustments */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}

/* Row Alignment */
.row.align-items-center {
	align-items: center;
}

/* Web Page Specific */
.web-page-content {
	padding-top: 2rem;
}

/* Software Dropdown Menu Styles */
.navbar .software-dropdown {
	position: relative;
	display: inline-block;
}

.navbar .software-dropdown > a::after {
	content: " ▼";
	font-size: 0.7rem;
	margin-left: 0.3rem;
}

.navbar .software-dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	padding: 0.5rem 0;
	margin-top: 0.5rem;
	min-width: 250px;
	z-index: 1000;
	list-style: none;
}

.navbar .software-dropdown:hover .software-dropdown-menu {
	display: block;
}

.navbar .software-dropdown-menu a {
	display: block;
	padding: 0.5rem 1.5rem;
	color: #343a40;
	text-decoration: none;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.navbar .software-dropdown-menu a:hover {
	background: #f8f9fa;
	color: #0066CC;
	padding-left: 2rem;
}

.navbar .software-dropdown-menu a.header {
	color: #0066CC;
	font-weight: 600;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 0.75rem;
	margin-bottom: 0.5rem;
}

.navbar .software-dropdown-menu a.header:hover {
	padding-left: 1.5rem;
}

/* Mobile responsive for dropdown */
@media (max-width: 991px) {
	.navbar .software-dropdown-menu {
		position: static;
		display: block !important;
		border: none;
		box-shadow: none;
		padding-left: 1rem;
		margin-top: 0;
	}
	
	.navbar .software-dropdown > a::after {
		content: "";
	}
}

/* Login Page Footer Fix */
.for-login footer,
.for-login .web-footer {
	margin-top: 4rem;
}

/* Override Frappe Default Styles */
.web-page h1,
.web-page h2,
.web-page h3,
.web-page h4,
.web-page h5 {
	color: inherit;
}

.web-page a {
	color: #0066CC;
	text-decoration: none;
}

.web-page a:hover {
	color: #004999;
	text-decoration: underline;
}