﻿/* =========================================================
   Responsive - Tablet
   ========================================================= */

@media (max-width: 900px) {

	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* =========================================================
   Responsive - Smaller screens
   ========================================================= */

@media (max-width: 800px) {

	.header-content {
		padding: 20px;
		align-items: flex-start;
		flex-direction: column;
		gap: 20px;
	}

	.main-nav {
		width: 100%;
		gap: 18px;
		flex-wrap: wrap;
	}

	.hero-content {
		min-height: auto;
		padding: 50px 20px;
	}

	.hero h1 {
		font-size: 42px;
	}

	.hero-intro {
		font-size: 18px;
	}

	.intro {
		padding: 40px 20px;
	}

	.validation {
		padding: 55px 20px;
	}

	.validation-container {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.validation-content h2 {
		font-size: 32px;
	}

	.industry-panel {
		padding: 30px;
	}
}


/* =========================================================
   Responsive - Mobile
   ========================================================= */

@media (max-width: 600px) {

	.services {
		padding: 50px 20px;
	}

	.services-grid {
		grid-template-columns: 1fr;
	}

	.section-heading h2 {
		font-size: 30px;
	}
}

@media (max-width: 500px) {

	.industry-list {
		grid-template-columns: 1fr;
	}

		.industry-list div:nth-child(odd) {
			margin-right: 0;
		}
}

/* =========================================================
	About Page
  ========================================================= */


@media (max-width: 800px) {

	.about-page {
		padding: 50px 20px;
	}

	.about-page-intro {
		margin-bottom: 40px;
	}

		.about-page-intro h1 {
			font-size: 34px;
		}

	.about-details {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.about-capabilities {
		padding-left: 25px;
	}
}

/* =========================================================
   Services Page Responsive
   ========================================================= */

@media (max-width: 900px) {

	* .services-page-grid {
		g *id-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 800px) {

	.services-page {
		padding: 50px 20px;
	}

	.services-page-intro h1 {
		font-size: 34px;
	}
}

@media (max-width: 600px) {

	.services-page-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Contact Page Responsive
   ========================================================= */

@media (max-width: 800px) {

	.contact-page {
		padding: 50px 20px;
	}

	.contact-page-intro {
		margin-bottom: 40px;
	}

		.contact-page-intro h1 {
			font-size: 34px;
		}

	.contact-details {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.contact-card {
		padding: 30px;
	}
}

/* =========================================================
   Validation Page Responsive
   ========================================================= */

@media (max-width: 800px) {

	.validation-page {
		padding: 50px 20px;
	}

	.validation-page-intro {
		margin-bottom: 40px;
	}

		.validation-page-intro h1 {
			font-size: 34px;
		}

	.validation-details {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.validation-frameworks {
		padding: 30px;
	}

	.validation-industry-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {

	.validation-industry-grid {
		grid-template-columns: 1fr;
	}
}