@media (max-width:1200px) {
	.headerAction {
		display: none
	}
	.mainNav>ul>li>a {
		padding-left: 10px;
		padding-right: 10px
	}
	.serviceGrid {
		grid-template-columns: repeat(2, 1fr)
	}
	.heroContainer {
		grid-template-columns: 1fr 300px;
		gap: 40px
	}
	.whyGrid, .faqPreviewGrid, .productWrap {
		grid-template-columns: 1fr;
		gap: 42px
	}
	.productLeft {
		position: static
	}
	.footerGrid {
		grid-template-columns: 1fr
	}
	.footerInfo {
		grid-template-columns: 1fr 1fr
	}
}
@media (max-width:960px) {
	.container {
		width: min(100% - 36px, var(--container))
	}
	.headerInner {
		width: calc(100% - 28px);
		height: 74px
	}
	.brandMark {
		width: 50px;
		height: 50px
	}
	.menuBtn {
		display: block
	}
	.mainNav {
		position: fixed;
		top: 74px;
		left: 0;
		width: 100%;
		height: calc(100vh - 74px);
		background: rgba(21, 25, 31, .98);
		padding: 20px 18px 60px;
		overflow: auto;
		opacity: 0;
		visibility: hidden;
		transform: translateY(-12px);
		transition: .3s
	}
	.mainNav.active {
		opacity: 1;
		visibility: visible;
		transform: none
	}
	.mainNav>ul {
		display: block
	}
	.mainNav>ul>li>a {
		padding: 15px 6px;
		border-bottom: 1px solid rgba(255, 255, 255, .1)
	}
	.megaMenu {
		position: static;
		transform: none;
		width: 100%;
		opacity: 1;
		visibility: visible;
		display: grid;
		grid-template-columns: 1fr 1fr;
		background: transparent;
		border: 0;
		padding: 12px 0;
		box-shadow: none
	}
	.hasMenu:hover .megaMenu {
		transform: none
	}
	.megaMenu a {
		font-size: 14px;
		padding: 10px
	}
	.hero {
		min-height: auto;
		padding: 128px 0 0;
		display: block
	}
	.heroContainer {
		display: block
	}
	.heroContent h1 {
		font-size: 44px
	}
	.heroContent p {
		font-size: 16px
	}
	.heroPanel {
		margin-top: 36px;
		max-width: 420px
	}
	.heroInfo {
		position: relative;
		margin-top: 54px;
		grid-template-columns: 1fr
	}
	.heroInfo div {
		padding: 18px 24px;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1)
	}
	.sectionPad {
		padding: 82px 0
	}
	.aboutGrid {
		grid-template-columns: 1fr;
		gap: 42px
	}
	.aboutBadge {
		right: 16px
	}
	.productCards {
		grid-template-columns: 1fr 1fr
	}
	.whyList {
		grid-template-columns: 1fr
	}
	.counterGrid {
		grid-template-columns: 1fr 1fr;
		gap: 28px
	}
	.counterGrid div:nth-child(2) {
		border-right: 0
	}
	.caseGrid {
		grid-template-columns: 1fr
	}
	.ctaBox {
		display: block
	}
	.ctaActions {
		margin-top: 28px
	}
	.footerInfo {
		grid-template-columns: 1fr
	}
}
@media (max-width:640px) {
	.container {
		width: calc(100% - 28px)
	}
	.heroContent h1 {
		font-size: 36px;
		line-height: 1.18
	}
	.heroBtns {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px
	}
	.mainBtn, .ghostBtn {
		width: 100%
	}
	.panelYear strong {
		font-size: 64px
	}
	.heroPanel {
		padding: 26px
	}
	.sectionHead {
		text-align: left;
		margin-bottom: 34px
	}
	.titleBox h2, .sectionHead h2 {
		font-size: 30px
	}
	.serviceGrid {
		grid-template-columns: 1fr
	}
	.serviceCard {
		min-height: auto
	}
	.productCards {
		grid-template-columns: 1fr
	}
	.productItem {
		height: 250px
	}
	.aboutImage:before {
		display: none
	}
	.aboutBadge {
		position: relative;
		right: auto;
		bottom: auto;
		margin-top: -10px;
		width: max-content
	}
	.counterGrid {
		grid-template-columns: 1fr
	}
	.counterGrid div {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
		padding-bottom: 24px
	}
	.counterGrid div:last-child {
		border-bottom: 0;
		padding-bottom: 0
	}
	.megaMenu {
		grid-template-columns: 1fr
	}
	.faqItem button {
		font-size: 17px;
		padding-right: 34px
	}
	.contactCta {
		padding: 62px 0
	}
	.footerGrid {
		gap: 36px
	}
	.footerInfo p span {
		display: block;
		margin-bottom: 3px
	}
	.mainNav {
		padding-bottom: 90px
	}
}




@media (max-width: 1200px) {
  .mainNav {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .mainNav.active,
  body.navOpen .mainNav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}