*{
    padding:0;
    margin: 0;
}  
header{
    background-color:rgb(50, 130, 205);
    height:100px ;
    width: 100%;
    position:fixed;
}
@keyframes change-color{
    50%{color: red;}
}
.h1{
    color:yellow;
    font-size:22px;
}
.h1-animation {
    animation-name:change-color;
    animation-duration:2s;
    animation-iteration-count:infinite;
}
header p {
    position: absolute;
    right: 5vw;
    top:88px;
    line-height:8px;
    color: white;
    font-size: 8px;
}
header h1{
    position: absolute;
    left: 60px;
    top: 0;
    line-height: 80px;
}
header h2{
    position: absolute;
    left: 630px;
    top: 16px;
    line-height: 53x;
    color:yellow;
    font-size: 33px;
}

@keyframes change-color1{
    0.3%{color: red;}
}
.h3-animation {
    animation-name:change-color1;
    animation-duration:15s;
    animation-iteration-count:infinite;
}
.h3 {
    position: absolute;
    right: 5vw;
    top:55px;
    padding:5px;
    color: white;
    font-size: 18px;
}
.h3:hover{
    background-color:yellow;
    color:blue;
    cursor: pointer;
}
.ablist {
    background-color:#bfff9049;
     Display:flex;
     Flex-direction:row;
     align-items: flex-end;
      height: 170px;
}
.ablist p {
    color:red;
    padding: 10px 10px 10px 40px;
    font-size: 30px;
}
.ablist:hover{
    background-color:yellow;
    color:blue;
    cursor: pointer;
}
.ablist p:hover{
    color:blue;
}
.address {
    background-color:#bfff9049;
    padding: 0px 10px 10px 120px;
}
.basicdata{
    color:black;
    background-color:#29ffb60f;
   padding: 0 0 20px 0;
}
.basicdata h4{
    color:black;
    font-size: 20px;
    padding: 10px 10px 10px 40px;
}
.basicdata p{
    font-size: 22px;
    padding: 5px 10px 5px 120px;
}
.basicdata:hover{
    color:blue;
    background-color:yellow;
    cursor: pointer;
}
.basicdata h4:hover{
    color:red;
    font-size: 20px;
    padding: 10px 10px 10px 40px;
}
.basicdata p:hover{
    font-size: 22px;
    padding: 10px 10px 10px 120px;
}
.feature {
    background-color:#29ffb60f;
    color:red;
    font-size: 30px;
    padding: 10px 10px 10px 40px;
}
.feature ol{
    color:black;
    font-size: 22px;
    padding: 10px 10px 10px 110px;
}
.feature li{
    padding: 10px 5px 10px 0px;
}
.feature:hover{
    background-color:yellow;
    cursor: pointer;
}
.feature ol:hover{
    color: blue;
}
.picture{
    Display:flex;
    background-color:#29ffb60f;
    align-items: end;
    text-align:center;
    Justify-content:center;
    }
  .picture div {
    width:450px;
    text-align:center;
    padding:20px 20px 20px;
 }  
   .picture img {
    width:100%;
  }  
 .picture1 {
    Display:flex;
    background-color:#29ffb60f;
    align-items: end;
    text-align:center;
    Justify-content:center;
    }
  .picture1 div {
    width:450px;
    text-align:center;
    padding:20px 20px 20px;
 }  
   .picture1 img {
    width:100%;
 }
 .picture2{
    Display:flex;
    background-color:#29ffb60f;
    align-items: end;
    text-align:center;
    Justify-content:center;
    }
  .picture2 div {
    width:450px;
    text-align:center;
    padding:20px 20px 20px;
 }  
   .picture2 img {
    width:100%;
  } 
   .prbc div{
      background-color:#f964f22a;
      height: 60px;
      Display:flex;
    Flex-direction:column;
    Justify-content:center;
    Align-items:center;
 }
 
@keyframes change-color{
    50%{color: red;}
}
.prbc {
    color:black;
    font-size:35px;
}
.prbc-animation {
    animation-name:change-color;
    animation-duration:2s;
    animation-iteration-count:infinite;
}

  .otherconnection {
    Display:flex;
    background-color:#f964f22a;
    align-items: end;
    text-align:center;
    Justify-content:center;
    }
  .otherconnection div {
    width:450px;
    text-align:center;
    padding:20px 20px 20px;
    color: blue;
    
 }  
   .otherconnection img {
    width:100%;
  } 
 footer {
    background-color:rgb(50, 130, 205);
    height:100px ;
    width: 100%;
    color: white;
    Display:flex;
    Flex-direction:column;
    Justify-content:center;
    Align-items:center;
 }
 footer h5 {
   font-size: 25px;
}
@media screen and (max-width: 900px){
    header h1{
        font-size:36px;
        position: absolute;
        left: 20px;
        top: 16px;
        line-height: 50px;
    }
    header h2{
    position: absolute;
    left: 530px;
    top:20px;
    line-height: 100x;
    color:yellow;
    font-size: 28px;
}
    h3{
        font-size: 16px;
    }
    .ablist p {
    font-size: 25px;
    padding: 10px 0px 10px 17px;
}
}
@media screen and (max-width: 768px){
    header h1{
        font-size:33px;
        position: absolute;
        left: 20px;
        top: 5px;
        line-height: 50px;
    }
    header h2{
    position: absolute;
    left: 330px;
    top:39px;
    line-height: 50x;
    color:yellow;
    font-size: 22px;
}
    h3{
        font-size: 16px;
    }
    .h3 {
    position: absolute;
    right: 5vw;
    top:59px;
    padding:5px;
    color: white;
    font-size: 18px;
}
    .ablist p {
    font-size: 25px;
    padding: 10px 0px 10px 17px;
}
}
@media screen and (max-width: 500px){
    header  p {display: none;}
    header h1{
        font-size: 28px;
        position: absolute;
        left: 20px;
        top: 5px;
        line-height: 50px;
    }
    header h2{
    position: absolute;
    left: 190px;
    top:39px;
    line-height: 50x;
    color:yellow;
    font-size: 22px;
}
    h3{
        font-size: 16px;
    }
    .ablist p {
    font-size: 20px;
    padding: 10px 0px 10px 8px;
}
}