/* =========================================================
   AlOsman Corporate — responsive.css
   Breakpoints: 1440 / 1280 / 1024 / 768 / 480 / 390 / 375
   Mobile-first overrides layered on top of main.css.
   ========================================================= */

/* ---------- 1440px and below (large desktop) ---------- */
@media (max-width: 1440px) {
	.container { max-width: 1200px; }
}

/* ---------- 1280px and below ---------- */
@media (max-width: 1280px) {
	.hero-inner { gap: 40px; }
	.footer-top { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
	.footer-top .footer-col.footer-newsletter { grid-column: span 2; }
}

/* ---------- 1024px — tablet landscape ---------- */
@media (max-width: 1024px) {
	.nav-menu { gap: 22px; }
	.nav-menu > li > a { font-size: 0.9rem; }

	.hero { padding: 150px 0 80px; }
	.hero-inner { grid-template-columns: 1fr; }
	.hero-visual { order: -1; }
	.hero-image-wrap img, .hero-img-placeholder { height: 340px; }
	.hero-sub { max-width: 100%; }

	.about-inner { grid-template-columns: 1fr; }
	.about-media img, .about-img-placeholder { height: 340px; }

	.approach-steps { flex-wrap: wrap; }
	.approach-step { flex: 1 1 40%; margin-bottom: 40px; }
	.step-connector { display: none; }

	.footer-top { grid-template-columns: 1fr 1fr 1fr; }
	.footer-top .footer-brand { grid-column: span 3; }
	.footer-top .footer-newsletter { grid-column: span 3; }

	.blog-layout, .project-body { grid-template-columns: 1fr; }
	.blog-sidebar, .project-sidebar { order: 2; }

	.contact-grid { grid-template-columns: 1fr; }
	.service-detail-grid { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- 768px — tablet portrait ---------- */
@media (max-width: 768px) {
	.section { padding: 64px 0; }
	.section-compact { padding: 48px 0; }
	.section-heading { margin-bottom: 36px; }

	.primary-navigation,
	.header-cta { display: none; }
	.hamburger { display: flex; }

	.header-search-form { padding: 14px 20px; }

	.hero { padding: 130px 0 60px; }
	.hero-title { font-size: 2.4rem; }
	.hero-ctas { flex-direction: column; align-items: stretch; }
	.hero-ctas .btn { width: 100%; }
	.floating-badge { display: none; }

	.services-grid, .portfolio-grid, .team-grid, .testimonials-track { grid-template-columns: 1fr 1fr; }

	.stats-grid { grid-template-columns: 1fr 1fr; }

	.approach-step { flex: 1 1 100%; }

	.footer-top { grid-template-columns: 1fr 1fr; padding-bottom: 40px; }
	.footer-top .footer-brand,
	.footer-top .footer-newsletter { grid-column: span 2; }

	.footer-bottom-inner { flex-direction: column; text-align: center; }

	.page-hero, .page-header, .project-hero { padding-top: 120px; }

	.about-mission-grid { grid-template-columns: 1fr; }
	.feature-list.two-col { grid-template-columns: 1fr; }
}

/* ---------- 480px and below — mobile ---------- */
@media (max-width: 480px) {
	.container { padding: 0 18px; }

	h1 { font-size: 2rem; }
	h2 { font-size: 1.6rem; }

	.services-grid, .portfolio-grid, .team-grid, .testimonials-track, .blog-grid { grid-template-columns: 1fr; }
	.stats-grid { grid-template-columns: 1fr 1fr; gap: 20px; }

	.hero-ctas { gap: 10px; }
	.btn-lg { padding: 14px 26px; font-size: 0.92rem; }

	.final-cta-buttons { flex-direction: column; }
	.final-cta-buttons .btn { width: 100%; }

	.trust-logos { gap: 22px; }

	.mobile-nav { width: 100vw; }

	.contact-form, .mission-card, .education-card { padding: 22px; }

	.error-code { font-size: 3.6rem; }
	.error-actions { flex-direction: column; }
	.error-actions .btn { width: 100%; }
}

/* ---------- 390px / 375px — small phones ---------- */
@media (max-width: 390px) {
	.hero-title { font-size: 2.1rem; }
	.section { padding: 52px 0; }
	.eyebrow { font-size: 0.68rem; }
	.footer-top { grid-template-columns: 1fr; }
	.footer-top .footer-brand,
	.footer-top .footer-newsletter { grid-column: span 1; }
}

/* Prevent any horizontal scroll from edge-to-edge elements */
html, body { max-width: 100%; overflow-x: hidden; }