@media only screen and (max-width: 1024px) {
 
    .container {
	width: 90%;
}

    .bor {
	border: 2px solid #fff;
	width: 60%;
}

.hero_text {
	padding-top: 76px;
}

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

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

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

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

}

@media only screen and (max-width: 767px) {
 
    .footer_row {
	grid-template-columns: 1fr 1fr;
}

.navbar {
	position: absolute;
	background: rgb(0, 0, 0);
	width: 100%;
	left: -100%;
	top: 84px;
	z-index: 99;
    height: 100vh;
    
}

.mobile {
	display: block;
}

.navbar.active {
	left: 0%;
}


.navbar ul li a {
	color: #fff;
}

.navbar ul li {
	display: block;
	padding: 13px 48px;
}

.mobile {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  transform: translate(0, 11px) rotate(-45deg);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  transform: translate(0, -11px) rotate(45deg);
}

}

@media only screen and (max-width: 500px) {

    .bor {
	border: 2px solid #fff;
	width: 100%;
}

h1 {
	font-size: 24px;
}

.hero {
	height: 480px;
}

.hero_text a {
	padding: 13px 27px;
}

.hero_text {
	padding-top: 30px;
}

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

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

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

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

.footer_row {
	grid-template-columns: 1fr;
	gap: 20px;
}

.cta_text h2 {
	font-size: 34px;
}

}