body {
  font-family: 'Commissioner', sans-serif;
  text-align: inherit;
  padding: 20px;

}
h1,
h2
{
  text-decoration: underline;
  color:#059ccf;
}

.logos{
  position: fixed;
  max-width: 30%;
  top:207px;
  right:8%;
  transition:0.5s;

}
.logos:hover{
  transform:scale(1.2);
}
.logos1{
  max-width: 30%;
  position: fixed;
  top:200px;
  right:15%;
  transition:0.5s;
}
.logos1:hover{
  transform:scale(1.2);
}
.logos2{
  position: fixed;
  max-width: 30%;
  top:200px;
  right:22%;
  transition:0.5s;
}
.logos2:hover{
  transform:scale(1.2);
}
li,ul{
  color:#059ccf;
}
p{
  color: #002b57;
}


.border2:hover{ 
  transform:scale(1.2); 
} 
.border3:hover{ 
  transform:scale(1.2); 
} 
.border2{ 
  position: fixed; 
  right:0; 
  transition:0.5s; 
  bottom: 140px; 
  max-width: 30%; 
} 
.border3{ 
  position: fixed; 
  right:0; 
  transition:0.5s; 
  bottom: calc(140px + 120px); 
  max-width: 30%; 
}
.vl{ 
  padding:10px;
  border-left: 4px solid #059ccf;
  height: inherit;
}
.bor2{
  max-width: 1250px;
  position: absolute;
  bottom: -450;
  left:0;
}
.bor1{
  max-width: 1250px;
  position: absolute;
  top: -50px;
  left: 0px;
}
.hero_box{
  position : static ; 
  top: 0;
  left: 100px;
  float: initial;
  max-width:250px;
  border:5px solid #ffff;
  box-shadow: 2px 4px 8px;
  background: linear-gradient(0deg, rgba(13,29,59,1) 0%, rgba(30,117,147,1) 54%, rgba(34,178,195,1) 100%);
  animation: ava-animate 5s infinite alternate;

}
@keyframes ava-animate{
  0%{
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
  }
  40%{
    border-radius: 16% 84% 21% 79% / 73% 44% 56% 27%  ;
  }
  60%{
    border-radius:41% 59% 36% 64% / 75% 82% 18% 25% ;
  }
  100%{
    border-radius:50% 50% 50% 50% / 50% 50% 50% 50% ;
  }
}
@media screen and (max-width:480px){
  .border2{
    center: 140px;
    

}