/* CSS Document */
.blog-container {
	max-width: 100%;
	margin: 0 auto;
	padding: 20px;
	font-family: Roboto, sans-serif;
	line-height: 1.6;
	color: #6b6b77;
}
.blog-header {
	text-align: center;
background: linear-gradient(135deg,
#f4fcff 0%,
	#e8f8ff 100%);
	color: black;
	padding: 40px 20px;
	border-radius: 15px;
	margin-bottom: 30px;
	box-shadow: 0 4px 20px rgba(0,180,235,0.15);
}
.blog-header h1 {
	margin: 0;
	font-size: 2.5em;
	font-weight: bold;
	color: #2c3e50;
}
.blog-header .subtitle {
	margin-top: 15px;
	font-size: 1.2em;
	opacity: 0.85;
	color: #495057;
}
.section-box {
	background: #fff;
	border: 1px solid #d3f4ff;
	border-radius: 10px;
	margin-bottom: 25px;
	padding: 30px;
	box-shadow: 0 3px 15px rgba(0,0,0,0.08);
}
.section-title {
background: linear-gradient(135deg,
#f4fcff 0%,
	#e0f7ff 100%);
	color: #2c3e50;
	font-size: 1.5em;
	font-weight: bold;
	padding: 18px 20px;
	margin: -30px -30px 25px -30px;
	border-radius: 10px 10px 0 0;
	border-bottom: 3px solid #00b1eb;
}
.section-subtitle {
	color: #00b1eb;
	font-size: 1.3em;
	font-weight: bold;
	margin: 25px 0 15px 0;
	padding-bottom: 10px;
	border-bottom: 2px solid #d3f4ff;
}
.highlight-box {
	background: #d3f4ff;
	border-left: 5px solid #00b1eb;
	padding: 20px;
	margin: 25px 0;
	border-radius: 0 8px 8px 0;
	box-shadow: 0 2px 10px rgba(0,177,235,0.1);
}
.tip-box {
	background: #fff3cd;
	border: 2px solid #ffc107;
	border-radius: 8px;
	padding: 18px;
	margin: 20px 0;
	position: relative;
	padding-left: 50px;
}
.tip-box::before {
	content: "💡";
	position: absolute;
	left: 15px;
	top: 15px;
	font-size: 1.5em;
}
.info-box {
	background: #e7f3ff;
	border: 2px solid #2196F3;
	border-radius: 8px;
	padding: 18px;
	margin: 20px 0;
	position: relative;
	padding-left: 50px;
}
.info-box::before {
	content: "ℹ️";
	position: absolute;
	left: 15px;
	top: 15px;
	font-size: 1.5em;
}
.product-showcase {
	background: #f8f9fa;
	border-radius: 10px;
	padding: 25px;
	margin: 25px 0;
}
.benefits-list {
	list-style: none;
	padding: 0;
}
.benefits-list li {
	padding: 12px 0 12px 35px;
	position: relative;
	border-bottom: 1px solid #e9ecef;
}
.benefits-list li:last-child {
	border-bottom: none;
}
.benefits-list li::before {
	content: "✨";
	position: absolute;
	left: 0;
	top: 10px;
	font-size: 1.2em;
}
.faq-item {
	background: #f8f9fa;
	border-left: 4px solid #00b1eb;
	padding: 15px 20px;
	margin: 15px 0;
	border-radius: 0 5px 5px 0;
}
.faq-question {
	font-weight: bold;
	color: #2c3e50;
	margin-bottom: 8px;
	font-size: 1.05em;
}
.cta-box {
background: linear-gradient(135deg,
#00b1eb 0%,
	#0099cc 100%);
	color: white;
	text-align: center;
	padding: 30px 20px;
	border-radius: 10px;
	margin: 30px 0;
	box-shadow: 0 5px 20px rgba(0,177,235,0.3);
}
.cta-button {
	display: inline-block;
	background: white;
	color: #00b1eb;
	padding: 15px 40px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 50px;
	margin-top: 15px;
	transition: all 0.3s;
	box-shadow: 0 3px 10px rgba(0,0,0,0.2);
}
.cta-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
.contact-footer {
	background: #f8f9fa;
	border-radius: 10px;
	padding: 25px;
	margin-top: 40px;
	text-align: center;
	border: 2px solid #e9ecef;
}
.divider {
	height: 3px;
background: linear-gradient(to right, transparent,
	#00b1eb, transparent);
	margin: 30px 0;
	border: none;
}
@media (max-width: 768px) {
.blog-container {
	padding: 10px;
}
.blog-header h1 {
	font-size: 1.8em;
}
.section-box {
	padding: 20px;
}
.section-title {
	margin: -20px -20px 20px -20px;
	font-size: 1.3em;
	padding: 15px;
}

}