.home .home-banner-1{
    
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 100% center;
  height: 680px;
  position: relative;
  /* background-attachment: fixed; */
}


.home .home-banner-1{
/* background-image: linear-gradient(rgba(0, 0, 0, 0.3),
  rgba(0, 0, 0, 0.3)), url(../images/school4.jpg) */
  /* background-image: url(../images/school4.jpg); */
  background-image: url(../images/kids1.png);
}

.box{
position: absolute;
top: 45%;
left: 28%;
transform: translate(-50%, -50% );
min-height: 360px;
width: 45%;
border-radius: 10px;

color: black;
background-color: white;
/* background-color: #122d6d6c; */
/* background-color: #636262; */
}
.big{
  font-size: 7rem !important;
}
.sbox{
  margin-top: -60px;
  border-bottom: 4px solid #111956;
  
}

.heading  {
  /* font-size: 3.5rem;  */
  font-weight:700;  
  letter-spacing:1px; 
  text-transform:uppercase; 
  width:fit-content; 
  /* text-align:center;  */
  /* margin:auto;  */
  white-space:nowrap; 
  padding-bottom:8px;
}
.heading :before {
    background-color: #c50000;
    content: '';
    display: block;
    height: 5px;
    width: 75px;
    margin-bottom: 5px;
}


.logocolor{
  color: #111956;
  font-size: 1.8rem;
}
.plogocolor{
  color: #111956;
  font-size: 1.3rem;    
  font-weight: 700;
}

.sbox a{
  text-decoration: none !important;
}

.iconsmall{
  font-size: 1.2rem;
}

@media (max-width:1000px){
  
  .box{
      width: 60%;
      left: 30%;
    
  } 
  
} 

@media (max-width:780px){

  .box{
    
    left: 36%;
        width: 70%;
    
  }

  
} 

@media (max-width:645px){

  .box{
    
      width: 80%;
    
  }
  .big{
    font-size: 6rem !important;
}

} 

@media (max-width:513px){

  .box{
    
      width: 86%;
    
  }
  .big{
    font-size: 5.5rem !important;
}
.home .home-banner .home-banner-text h1{
    font-size: 4rem;
     
 }

} 

@media (max-width:455px){

  .home .home-banner .home-banner-text h1{
    font-size: 4rem;
     
 }
 .box{
    
    width: 88%;
  
}
.big{
  font-size: 5rem !important;
}

} 
/* min-height: 360px; */

@media (max-width:388px){

    .home .home-banner .home-banner-text h1{
      font-size: 3rem;
       
   }
   .box{
      
      width: 88%;
      min-height: 300px;
  }
  .big{
    font-size: 3.6rem !important;
  }
  
  }
  
.home-banner-text{
    
    padding-top: 50px;
    padding-left: 40px;
    
    
    color: white;
    
}
  
  .home-banner-text h1{
    
      font-size: 4.5rem;
  
  }
  .bggray{
    background-color: #EFEEEE;
  }
  .graytext{
    color: #636262 !important;
  }
  .logoblue{
    color: #122D6D  !important;
  }
  .bg-blue{
    background-color: #122D6D;
  }
  .bg-light-gray{
    background-color: #f5f6f7 !important;
  }
 .ptext{
  font-size: 1.1rem;
 }
 .button {
    background-color: #c50000; 
    color:white;
    border: 2px solid #c50000;
    font-size: 1.1rem !important;
    font-weight: 500;
    padding: 7px 20px 7px 20px;
    transition: all .3s cubic-bezier(.05, .03, .35, 1);
    color: white !important;
  }
  .button:hover {
    background-color: white ;
    color: black !important;
    /* #636262 */
  }

  .button3 {
    background-color: white; 
    color:#122D6D !important;
    border: 2px solid white;
    font-size: 1.1rem !important;
    font-weight: 500;
    padding: 7px 20px 7px 20px;
    transition: all .3s cubic-bezier(.05, .03, .35, 1);
  }
  .button3:hover {
    background-color: #122D6D ;
    color: white !important;
    /* #636262 */
  }
 /* Text Hover */

 .texthovun{
  display: block;
  position: relative;
  padding: 0.4em 0;
  width: fit-content;
  margin: auto;
}

.texthovun::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  /* padding-left: auto;
  padding-right: auto; */
  width: 100%;
  height: 0.1em;
  background-color: #122D6D;
  opacity: 1;
  transition: opacity 300ms, transform 300ms;
}

.texthovun:hover::after,
.texthovun:focus::after {
  opacity: 1;
  transform: translate3d(0, 0.14em, 0);
}

.texthovun2{
    display: block;
    position: relative;
    padding: 0.4em 0;
    width: fit-content;
    /* margin: auto; */
  }
  
  .texthovun2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    /* padding-left: auto;
    padding-right: auto; */
    width: 100%;
    height: 0.1em;
    background-color: #122D6D;
    opacity: 1;
    transition: opacity 300ms, transform 300ms;
  }
  
  .texthovun2:hover::after,
  .texthovun2:focus::after {
    opacity: 1;
    transform: translate3d(0, 0.14em, 0);
  }

  .bordernone{
    border-radius: 10px;
    
  }

.LogoHex1{
    background-color:#111956;
    color:#111956;
}
.LogoHex2{
    background-color:#473939;
    color:#473939;
}