html, body {
  overflow-x: hidden;
}

.container{
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 42px 100px 70px;
}

.container:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  filter: blur(50px);
  z-index: -1;
}
.contact-box{
  max-width: 1300px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: center;
  text-align: left;
  background-color: #000;
  box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.19);
}



.boxleft{
  background: url("img/about.jpg") no-repeat center;
  background-size: cover;
  height: 100%;
}

.boxright{
  padding: 85px 70px;
}

.boxright h2{
  font-size: 44px;
}

.boxright p{
  font-size: 22px;
}

@media screen and (max-width: 1200px) {
.boxright{
  padding: 55px 55px;
}
.boxright h2{
  font-size: 36px;
}

.boxright p{
  font-size: 18px;
}
}

@media screen and (max-width: 1050px) {
.boxright{
  padding: 60px 60px;
}
.boxright h2{
  font-size: 32px;
}

.boxright p{
  font-size: 17px;
}
}

@media screen and (max-width: 950px) {
.boxright{
  padding: 50px 50px;
}
}


@media screen and (max-width: 880px){
  .container{
  padding: 20px 30px 40px;
}
  .contact-box{
    grid-template-columns: 1fr;
  }
  .boxleft{
    height: 200px;
  }
  .boxright{
  padding: 30px 40px;
}

.boxright h2{
  font-size: 26px;
}

.boxright p{
  font-size: 14px;
}


}


@media screen and (max-width: 300px) {
.boxright h2{
  font-size: 23px;
}

.boxright p{
  font-size: 13px;
}
 
}