/**
 * Responsive Styles for Modern Fintech Design
 * Mobile-First Responsive Breakpoints
 */

/* ========================
   Tablet Landscape (max-width: 1199px)
   ======================== */
@media (max-width: 1199px) {
	.hero-title {
		font-size: 3.5rem;
	}

	.section-title {
		font-size: 2.25rem;
	}

	.features-grid,
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--spacing-md);
	}

	.stat-item {
		border-right: none;
		border-bottom: 1px solid var(--border-light);
		padding-bottom: var(--spacing-md);
	}

	.stat-item:nth-child(3),
	.stat-item:nth-child(4) {
		border-bottom: none;
	}
}

/* ========================
   Tablet Portrait (max-width: 991px)
   ======================== */
@media (max-width: 991px) {
	/* Typography */
	h1 {
		font-size: 3rem;
	}

	h2 {
		font-size: 2rem;
	}

	.hero-title {
		font-size: 3rem;
	}

	.hero-subtitle {
		font-size: 1.125rem;
	}

	.section-title {
		font-size: 2rem;
	}

	.section-subtitle {
		font-size: 1rem;
	}

	/* Header */
	.topbar-wrapper {
		flex-direction: column;
		gap: var(--spacing-sm);
		text-align: center;
	}

	.topbar-left,
	.topbar-right {
		justify-content: center;
		flex-wrap: wrap;
	}

	.nav-menu-container {
		position: fixed;
		top: 138px;
		left: -100%;
		width: 300px;
		height: calc(100vh - 138px);
		background: var(--bg-white);
		box-shadow: var(--shadow-xl);
		transition: left 0.3s ease;
		z-index: 999;
		padding: var(--spacing-xl);
	}

	.nav-menu-container.active {
		left: 0;
	}

	.nav-menu {
		flex-direction: column;
		gap: 0;
	}

	.nav-item {
		border-bottom: 1px solid var(--border-light);
	}

	.nav-link {
		display: block;
		padding: var(--spacing-md) 0;
	}

	.mobile-nav-menu {
		display: block;
		width: 30px;
		height: 25px;
		position: relative;
		cursor: pointer;
		z-index: 1000;
	}

	.mobile-nav-menu span,
	.mobile-nav-menu::before,
	.mobile-nav-menu::after {
		content: '';
		position: absolute;
		width: 100%;
		height: 3px;
		background: var(--text-primary);
		transition: var(--transition-base);
	}

	.mobile-nav-menu span {
		top: 50%;
		transform: translateY(-50%);
	}

	.mobile-nav-menu::before {
		top: 0;
	}

	.mobile-nav-menu::after {
		bottom: 0;
	}

	.mobile-nav-menu.active span {
		opacity: 0;
	}

	.mobile-nav-menu.active::before {
		top: 50%;
		transform: translateY(-50%) rotate(45deg);
	}

	.mobile-nav-menu.active::after {
		bottom: 50%;
		transform: translateY(50%) rotate(-45deg);
	}

	/* Hero Section */
	.hero-slide {
		height: 550px;
	}

	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-actions .btn-primary,
	.hero-actions .btn-secondary {
		width: 100%;
		text-align: center;
	}

	/* About Section */
	.about-content {
		padding-left: 0;
		margin-top: var(--spacing-xl);
	}

	/* Services */
	.services-grid {
		grid-template-columns: 1fr;
	}

	/* Features */
	.features-grid {
		grid-template-columns: 1fr;
	}

	/* Padding Adjustments */
	.section-padding {
		padding: 60px 0;
	}
}

/* ========================
   Mobile (max-width: 767px)
   ======================== */
@media (max-width: 767px) {
	/* Typography */
	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 1.75rem;
	}

	.hero-title {
		font-size: 2.5rem;
	}

	.hero-subtitle {
		font-size: 1rem;
	}

	.section-title {
		font-size: 1.875rem;
	}

	/* Header */
	.header-topbar {
		display: none;
	}

	.hero-section {
		margin-top: 90px;
	}

	.main-navigation {
		padding: 15px 0;
	}

	.brand-logo img {
		height: 40px;
	}

	.header-cta {
		display: none;
	}

	/* Hero Section */
	.hero-slide {
		height: 500px;
		padding: var(--spacing-xl) 0;
	}

	.hero-badge {
		font-size: 12px;
		padding: 8px 16px;
	}

	.hero-actions {
		flex-direction: column;
	}

	.btn-large {
		padding: 16px 32px;
		font-size: 16px;
	}

	/* Stats Bar */
	.stats-bar {
		padding: 30px 0;
		margin-top: -40px;
	}

	.stats-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}

	.stat-item {
		border-right: none;
		border-bottom: 1px solid var(--border-light);
		padding-bottom: var(--spacing-md);
	}

	.stat-item:last-child {
		border-bottom: none;
		padding-bottom: 0;
	}

	.stat-icon {
		width: 50px;
		height: 50px;
		font-size: 24px;
	}

	.stat-number {
		font-size: 2rem;
	}

	/* Features */
	.feature-card {
		margin-bottom: var(--spacing-md);
	}

	.feature-image {
		height: 200px;
	}

	.feature-content {
		padding: var(--spacing-lg);
	}

	/* Benefits */
	.benefit-item {
		flex-direction: column;
		padding: var(--spacing-md);
	}

	.benefit-icon {
		width: 50px;
		height: 50px;
	}

	/* Video */
	.video-wrapper {
		margin-top: var(--spacing-xl);
	}

	/* Services */
	.service-card {
		padding: var(--spacing-lg);
		margin-bottom: var(--spacing-md);
	}

	.service-icon-box {
		width: 70px;
		height: 70px;
		font-size: 32px;
	}

	/* Consultation Form */
	.consultation-section {
		padding: 60px 0;
	}

	.consultation-form {
		padding: var(--spacing-lg);
	}

	.form-control {
		padding: 12px 16px;
		font-size: 15px;
	}

	/* Products */
	.product-image {
		height: 220px;
	}

	.product-content {
		padding: var(--spacing-md);
	}

	/* Testimonials */
	.testimonial-card {
		padding: var(--spacing-lg);
	}

	.testimonial-text {
		font-size: 1rem;
	}

	/* Footer */
	.footer-main {
		padding: 60px 0 30px;
	}

	.footer-column {
		margin-bottom: var(--spacing-lg);
	}

	.footer-title {
		font-size: 1.125rem;
	}

	/* Section Padding */
	.section-padding {
		padding: 50px 0;
	}

	/* Buttons */
	.btn-primary,
	.btn-secondary {
		padding: 12px 24px;
		font-size: 15px;
	}
}

/* ========================
   Small Mobile (max-width: 575px)
   ======================== */
@media (max-width: 575px) {
	/* Container Padding */
	.container {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Typography */
	h1 {
		font-size: 2rem;
	}

	h2 {
		font-size: 1.5rem;
	}

	.hero-title {
		font-size: 2rem;
		line-height: 1.2;
	}

	.section-title {
		font-size: 1.625rem;
	}

	/* Hero */
	.hero-slide {
		height: 450px;
	}

	.hero-content {
		max-width: 100%;
	}

	/* Stats */
	.stat-item {
		flex-direction: column;
		text-align: center;
		gap: var(--spacing-sm);
	}

	.stat-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* Features */
	.feature-image {
		height: 180px;
	}

	.feature-icon {
		width: 56px;
		height: 56px;
		margin-top: -40px;
	}

	/* Services */
	.service-icon-box {
		width: 60px;
		height: 60px;
		font-size: 28px;
	}

	/* Buttons */
	.btn-large {
		padding: 14px 28px;
		font-size: 15px;
	}

	/* Owl Carousel */
	.owl-theme .owl-nav button {
		width: 40px;
		height: 40px;
		font-size: 20px;
	}
}

/* ========================
   Extra Small Mobile (max-width: 375px)
   ======================== */
@media (max-width: 375px) {
	/* Typography */
	.hero-title {
		font-size: 1.75rem;
	}

	.section-title {
		font-size: 1.5rem;
	}

	/* Hero */
	.hero-slide {
		height: 400px;
	}

	.hero-badge {
		font-size: 11px;
		padding: 6px 12px;
	}

	/* Stats */
	.stat-number {
		font-size: 1.75rem;
	}

	.stat-label {
		font-size: 13px;
	}

	/* Features */
	.feature-content {
		padding: var(--spacing-md);
	}

	/* Forms */
	.form-control {
		padding: 10px 14px;
		font-size: 14px;
	}

	/* Footer */
	.footer-logo img {
		height: 40px;
	}
}

/* ========================
   Landscape Orientation
   ======================== */
@media (max-height: 500px) and (orientation: landscape) {
	.hero-slide {
		height: 400px;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-subtitle {
		font-size: 0.9375rem;
	}

	.hero-badge {
		margin-bottom: var(--spacing-sm);
	}

	.stats-bar {
		margin-top: 0;
	}
}

/* ========================
   Print Styles
   ======================== */
@media print {
	.modern-header,
	.hero-section,
	.consultation-section,
	.modern-footer,
	.scrollup,
	.owl-nav,
	.owl-dots {
		display: none;
	}

	body {
		color: #000;
		background: #fff;
	}

	.section-padding {
		padding: 20px 0;
	}

	.feature-card,
	.service-card,
	.testimonial-card {
		page-break-inside: avoid;
		box-shadow: none;
		border: 1px solid #ddd;
	}
}

/* ========================
   Accessibility Improvements
   ======================== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
	:root {
		--primary-color: #0000FF;
		--text-primary: #000000;
		--text-secondary: #000000;
		--border-color: #000000;
	}

	.btn-primary,
	.btn-secondary {
		border: 2px solid currentColor;
	}
}

/* Dark Mode Support (if needed in future) */
@media (prefers-color-scheme: dark) {
	/* Can be implemented for dark mode support */
}