/* ========================================
   OTONGO.net – Philosophy Component
   Extracted from styles.css (2025-08-13)
   ======================================== */

/* ===== PHILOSOPHY SECTION ===== */
.philosophy {
	background-color: #f8f9fa;
}

.philosophy-content {
	display: flex;
	align-items: center;
	gap: var(--spacing-xl);
}

.philosophy-visual {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.philosophy-image-container {
	width: 300px;
	height: 300px;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-lg);
}

.philosophy-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Removed philosophy-circle::after as we're using an image now */

.philosophy-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.philosophy-item {
	background-color: white;
	padding: var(--spacing-md);
	border-radius: var(--border-radius-md);
	box-shadow: var(--shadow-sm);
	transition: all var(--transition-normal);
}

.philosophy-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

.philosophy-item h3 {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: var(--spacing-xs);
	color: var(--color-primary);
}

.philosophy-item h3 i {
	color: var(--color-secondary);
}

/* ===== Responsive ===== */
@media (max-width: 992px) {
	.philosophy-content {
		flex-direction: column-reverse;
		text-align: center;
	}
}

@media (max-width: 768px) {
	.philosophy-image-container {
		width: 250px;
		height: 250px;
	}
}