/* ==========================================================================
   Responsive Styles (Mobile & Tablet)
   ========================================================================== */

@media (max-width: 1024px) {
	/* About Page */
	.about-story-section .about-story-grid,
	.about-areas-section .areas-content {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}
	
	.about-story-section .about-story-image {
		order: -1;
	}
	
	.about-story-section .about-story-content,
	.about-areas-section .areas-text {
		padding-right: 0;
	}
	
	.about-page .section-title {
		font-size: 2rem;
	}
	
	.about-story-section .stat-number {
		font-size: 2.5rem;
	}
	
	.about-excellence-section .excellence-grid,
	.about-pillars-section .pillars-grid {
		grid-template-columns: 1fr;
	}
	
	.about-why-section .why-grid {
		grid-template-columns: 1fr;
	}
	
	/* Contact Page */
	.contact-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-xl);
	}
	
	.contact-info-wrapper {
		position: static;
	}
	
	.form-row {
		grid-template-columns: 1fr;
	}
	
	/* Portfolio */
	.portfolio-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	}
	
	.portfolio-modal-body {
		grid-template-columns: 1fr;
	}
	
	.portfolio-modal-info {
		max-height: none;
	}
	
	.portfolio-carousel {
		min-height: 400px;
	}
}

@media (max-width: 768px) {
	/* Mobile Header */
	.header-top-inner {
		flex-direction: column;
		gap: var(--spacing-xs);
		text-align: center;
	}
	
	.header-contact-info {
		flex-direction: column;
		gap: var(--spacing-xs);
	}
	
	.header-email {
		display: none;
	}
	
	.site-header-inner {
		padding: var(--spacing-sm) 0;
	}
	
	.site-branding {
		gap: var(--spacing-sm);
	}
	
	.site-branding .custom-logo {
		max-height: 45px;
	}
	
	.site-title {
		font-size: 1.25rem;
	}
	
	.menu-toggle {
		display: block;
		position: relative;
		z-index: 1001;
	}
	
	.main-navigation {
		position: static;
	}
	
	.primary-menu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--color-white);
		flex-direction: column;
		padding: 100px var(--spacing-xl) var(--spacing-xxl);
		box-shadow: none;
		margin: 0;
		z-index: 1000;
		overflow-y: auto;
		gap: 0;
	}
	
	.primary-menu.active {
		display: flex;
	}
	
	.primary-menu li {
		width: 100%;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}
	
	.primary-menu a {
		display: block;
		padding: var(--spacing-md) var(--spacing-sm);
		font-size: 1.1rem;
		text-align: center;
	}
	
	.primary-menu a:after {
		display: none;
	}
	
	.header-cta {
		display: none;
	}
	
	/* Hero Sections */
	.hero-title {
		font-size: 2rem;
	}
	
	.hero-subtitle {
		font-size: 1rem;
	}
	
	.hero-section {
		min-height: auto;
	}
	
	.hero-split-content {
		grid-template-columns: 1fr;
		gap: 0;
		min-height: auto;
	}
	
	.hero-left {
		text-align: center;
		padding: var(--spacing-xl) var(--spacing-md);
	}
	
	.hero-right {
		padding: var(--spacing-md);
	}
	
	.hero-title {
		font-size: 2.5rem;
	}
	
	.hero-subtitle {
		font-size: 1.1rem;
	}
	
	.hero-services-grid {
		height: 350px;
	}
	
	.hero-service-overlay {
		padding: var(--spacing-md) var(--spacing-lg);
		min-height: 100px;
	}
	
	.hero-service-card h3 {
		font-size: 1.5rem;
	}
	
	.hero-buttons {
		justify-content: center;
		flex-direction: column;
		width: 100%;
	}
	
	.hero-button {
		width: 100%;
		text-align: center;
	}
	
	/* Page Hero */
	.page-hero {
		min-height: 50vh;
	}
	
	.page-hero-title {
		font-size: 2.2rem;
	}
	
	.page-hero-subtitle {
		font-size: 1.1rem;
	}
	
	/* Footer */
	.footer-widgets {
		grid-template-columns: 1fr;
	}
	
	.site-info {
		flex-direction: column;
		text-align: center;
	}
	
	/* Grids */
	.services-grid,
	.projects-grid {
		grid-template-columns: 1fr;
	}
	
	/* Search Form */
	.search-form {
		flex-direction: column;
	}
	
	/* About Section */
	.about-section-inner {
		grid-template-columns: 1fr;
	}
	
	.about-section-image {
		order: -1;
	}
	
	.about-section-title {
		font-size: 2rem;
	}
	
	/* CTA Section */
	.cta-title {
		font-size: 2rem;
	}
	
	.cta-buttons {
		flex-direction: column;
	}
	
	.cta-button {
		width: 100%;
	}
	
	/* Portfolio Showcase */
	.portfolio-title {
		font-size: 2rem;
	}
	
	.portfolio-features {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}
	
	.portfolio-feature {
		flex-direction: column;
		text-align: center;
	}
	
	/* Reviews */
	.reviews-grid {
		grid-template-columns: 1fr;
	}
	
	/* Solid Pillars Section */
	.solidpillars-section {
		padding: 60px 0;
		min-height: auto;
	}
	
	.solidpillars-title {
		font-size: 2rem;
	}
	
	.solidpillars-subtitle {
		font-size: 1.1rem;
		max-width: 100%;
	}
	
	.solidpillars-services {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
		max-width: 100%;
	}
	
	.sp-service-item {
		padding: var(--spacing-md);
	}
	
	/* Service Content */
	.service-content-wrapper {
		grid-template-columns: 1fr;
	}
	
	.service-sidebar {
		position: relative;
		top: 0;
	}
	
	/* Portfolio */
	.portfolio-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}
	
	.portfolio-card-image {
		height: 300px;
	}
	
	.portfolio-modal-content {
		max-height: 95vh;
		border-radius: var(--radius-md);
	}
	
	.portfolio-modal-close {
		width: 40px;
		height: 40px;
		top: 10px;
		right: 10px;
	}
	
	.portfolio-modal-title {
		font-size: 2rem;
	}
	
	.portfolio-modal-info {
		padding: var(--spacing-lg);
	}
	
	.carousel-btn {
		width: 40px;
		height: 40px;
	}
	
	.carousel-btn-prev {
		left: 10px;
	}
	
	.carousel-btn-next {
		right: 10px;
	}
	
	.portfolio-carousel {
		min-height: 300px;
	}
	
	/* About Page */
	.about-page .about-hero {
		min-height: 50vh;
	}
	
	.about-page .section-title {
		font-size: 1.8rem;
	}
	
	.about-story-section .about-stats {
		grid-template-columns: 1fr;
		gap: var(--spacing-md);
	}
	
	.about-excellence-section .excellence-grid,
	.about-pillars-section .pillars-grid {
		grid-template-columns: 1fr;
	}
	
	.about-areas-section .areas-list {
		grid-template-columns: 1fr;
	}
	
	.about-why-section .why-grid {
		grid-template-columns: 1fr;
	}
	
	/* Contact Page */
	.contact-hero {
		min-height: 40vh;
	}
	
	.contact-section-title,
	.contact-form-title {
		font-size: 1.5rem;
	}
	
	.contact-info-cards {
		gap: var(--spacing-sm);
	}
	
	.contact-info-card {
		padding: var(--spacing-md);
	}
	
	.contact-form-wrapper {
		padding: var(--spacing-lg);
	}
	
	.map-container {
		height: 350px;
	}
	
	.areas-grid {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	}
}