.usps {
  width: 100%;
  height: 25em;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  color: #fff;
  background: url("../imgs/homepage jpg images usps/uspheaderbg.jpg");
  background-size: cover;
}
.usps .lobby{
  color: #000;
font-weight: 800;
/* text-shadow: 1px 1px #e1e1e1; */
}
.uspintro {
  padding: 3em 0;
  /* text-align: justify; */
  font-size: 1.2em;
}
.yellowwhy{
  font-size: 1.8em;
  padding-right: .3em;
}
.wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5, .wrapper6 {
  position: relative;
  width: 100%;
  padding: 1em 5em;
  display: flex;
}

.wrapper1, .wrapper3, .wrapper5 {}

.wrapper2, .wrapper4, .wrapper6 {
  justify-content: flex-end;
  align-content: flex-end;
}

.uspwrap {
  background-color: #9ebb51;
  width: 75%;
  border-radius: .8em;
  padding: 2em;
  margin: 3em 0;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  display: flex;
}

.uspwrap .text {
  width: 90%;
  font-size: 1.2em;
  /* text-align: justify; */
  display: inline-block;
}

.wrapper2 .uspwrap, .wrapper4 .uspwrap, .wrapper6 .uspwrap {
  align-items: flex-end;
  justify-content: flex-end;
  background-color: #f5cb62;
}

.uspwrap h2 {
  color: #fff;
  text-shadow: 4px 4px grey;
}
.uspwrap .img1{
  background:url("../imgs/homepage jpg images usps/teacher child ratio.jpg") center no-repeat;
}
.uspwrap .img2{
  background:url("../imgs/homepage jpg images usps/daily class updates.jpg") center no-repeat;
}
.uspwrap .img3{
  background:url("../imgs/homepage jpg images usps/events & exibition.jpg") center no-repeat;
}
.uspwrap .img4{
  background:url("../imgs/homepage jpg images usps/goal based learning.jpg") center no-repeat;
}
.uspwrap .img5{
  background:url("../imgs/homepage jpg images usps/integrated theme based curriculum.jpg") center no-repeat;
}
.uspwrap .img6{
  background:url("../imgs/homepage jpg images usps/creative learning over rote learning.jpg") center no-repeat;
}

.uspwrap .img1, .uspwrap .img2, .uspwrap .img3, .uspwrap .img4, .uspwrap .img5, .uspwrap .img6 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* right: 10%; */
  /* background: url("../imgs/homepage png images of services/nursery.jpg") center no-repeat; */
  background-size: cover;
  height: 17em;
  width: 17em;
  border-radius: 50%;
  margin-left: -200px;
  border: 5px solid #9ebb51;
}


.img2, .img4, .img6 {
  left: 30%;
    border: 5px solid #f5cb62;
}

.img1, .img3, .img5 {
  right: 20%;
    border: 5px solid #9ebb51;
}
.uspwrap{



}
.uspwrap::after,.uspwrap::before{
  /* width: 15em;
    border-right: 1px solid black;
  outline: 4px solid red;
  outline-offset: 5em;
  content:'';
   width:15em;
   border-right:10px solid  red;
   position:absolute;
   top:50%;
   right: 50%; */
}

/* .uspwrap { */
.text h2{
  text-align: left;
  text-transform: uppercase;
 font-size: 1.5em;
}
@media only screen and (max-width: 1968px) {
  .uspwrap .img1,  .uspwrap .img3,  .uspwrap .img5{
    right: 15%;;
  }
}
@media only screen and (max-width: 1300px) {
  .uspwrap .img1,  .uspwrap .img3,  .uspwrap .img5{
    right: 10%;;
  }
}

@media only screen and (max-width: 978px) {
  body{
    font-size: 14px;
  }
  .uspwrap .img1,  .uspwrap .img3,  .uspwrap .img5{
    right: 5%;
  }
  .uspwrap .img2,.uspwrap .img4, .uspwrap .img6{
    /* margin-left: -220px; */
  }
  .wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5, .wrapper6 {
    padding: .5em 2em;
  }
  .uspwrap{
    margin:1em 0;
  }
  .uspintro {
    padding: 2em 0 1em 0;
  }
}
@media only screen and (max-width: 750px){
  .uspwrap .img1,  .uspwrap .img3,  .uspwrap .img5{
    right: 2%;
  }
}
@media only screen and (max-width: 670px){
  .uspwrap .img1,  .uspwrap .img3,  .uspwrap .img5{
    right: 1%;
  }
  .wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5, .wrapper6 {
    padding: 2em 1em;
  }
  .uspwrap .img1, .uspwrap .img2, .uspwrap .img3, .uspwrap .img4, .uspwrap .img5, .uspwrap .img6{
    height: 13em;
    width: 13em;
  }
  .img2, .img4, .img6 {
    left: 37%;
  }
}
@media only screen and (max-width: 545px){
  .img2, .img4, .img6 {
    left: 43%;
  }
  .uspwrap .img1, .uspwrap .img2, .uspwrap .img3, .uspwrap .img4, .uspwrap .img5, .uspwrap .img6{
    height: 11em;
    width: 11em;
  }
}
@media only screen and (max-width: 470px) {
  body {
    font-size: 12px;
  }

  .wrapper1, .wrapper2, .wrapper3, .wrapper4, .wrapper5, .wrapper6 {
    padding: 1em ;
  }

  .uspwrap {
    padding: 1em;
    margin: 0;
    width: 80%;
  }

  .uspwrap .text {
    /* height: 19em; */
    overflow:  hidden;
  }

  .uspwrap h2 {
    font-size: 1.5em;
    text-align: left;
  }

  .uspwrap .img1, .uspwrap .img2, .uspwrap .img3, .uspwrap .img4, .uspwrap .img5, .uspwrap .img6 {
    height: 10em;
    width: 10em;
  }

  .img2, .img4, .img6 {
    left: 48%;
  }

  .img1, .img3, .img5 {
    right: 3%;
  }
  .uspwrap .img1, .uspwrap .img2, .uspwrap .img3, .uspwrap .img4, .uspwrap .img5, .uspwrap .img6 {
    margin-left: -200px;
  }
}
@media only screen and (max-width: 420px){
  .img2, .img4, .img6 {
    left: 55%;
  }

  .uspwrap {
    width: 75%;
  }
}
@media only screen and (max-width: 375px){
  .img2, .img4, .img6 {
    left: 57%;
  }

  .uspwrap {
    width: 73%;
  }
}